/* Later layers: comparison panel, comment pins, glow, status marks, phone menu, touch targets, question grid. Loaded last on purpose. */

/* comparison: the stack column sits on a soft gradient panel */
.cmp-wrap { position: relative; margin-top: var(--s12); }
.cmp-wrap .cmp { position: relative; z-index: 1; margin-top: 0; }
.col-hl { position: absolute; z-index: 0; border-radius: var(--r-lg); pointer-events: none; opacity: 0;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(41,151,255,.14), rgba(191,90,242,.11) 45%, rgba(255,55,95,.09) 75%, rgba(255,159,10,.11)) padding-box,
              linear-gradient(var(--bg), var(--bg)) padding-box,
              var(--grad) border-box;
  box-shadow: 0 24px 64px -28px rgba(191,90,242,.55); transition: opacity .3s ease; }
.col-hl.on { opacity: 1; }
.cmp thead th:last-child { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 720px) {
  .cmp th:last-child, .cmp td:last-child { padding-left: var(--s5); padding-right: var(--s5); }
  .cmp thead th:last-child { padding-top: var(--s4); }
  .cmp tbody tr:last-child > td:last-child { padding-bottom: var(--s5); }
}
@media (max-width: 719px) {
  .col-hl { display: none; }
  .cmp td:last-child { margin-top: var(--s2); padding: var(--s3); border-radius: var(--r-md); border: 1px solid transparent;
    background: linear-gradient(120deg, rgba(41,151,255,.14), rgba(191,90,242,.12) 50%, rgba(255,159,10,.10)) padding-box, linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad-soft) border-box; }
}

/* comments: researcher quotes as comment pins on a canvas */
.board { margin-top: var(--s12); display: grid; gap: var(--s6); }
@media (min-width: 720px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s6); } }
@media (min-width: 1000px) { .board { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cm:nth-child(3n+2) { margin-top: var(--s12); } .cm:nth-child(3n) { margin-top: var(--s6); } }
.cm { appearance: none; position: relative; display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); align-items: start;
  width: 100%; margin: 0; padding: var(--s4) var(--s5) var(--s4) var(--s4); text-align: left; cursor: pointer; color: inherit; font: inherit;
  border: 1px solid var(--border-strong); border-radius: 20px 20px 20px 4px; background: var(--bg);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,.8); touch-action: manipulation;
  transition: border-color .2s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.cm:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-3px); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--c) 45%, transparent); }
.cm-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 var(--sans); color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 75%); }
.cm-who { display: block; font-size: 13px; line-height: 20px; color: var(--gray-900); }
.cm-who b { color: var(--gray-1000); font-weight: 600; margin-right: var(--s1); }
.cm-q { display: block; margin-top: var(--s1); font-size: 16px; line-height: 24px; color: var(--gray-1000); }
.cm-go { display: inline-flex; align-items: center; gap: var(--s1); margin-top: var(--s3); font-size: 13px; line-height: 20px; color: var(--gray-900); }
.cm-go::after { content: ""; width: 12px; height: 12px; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/12px no-repeat; }
.cm:hover .cm-go { color: var(--gray-1000); }
.cm:hover .cm-go::after { transform: translateX(3px); }
.cm > span:last-child > * { display: block; }
.cm .cm-go { display: inline-flex; }
.src { margin-top: var(--s8); color: var(--gray-700); }

/* glow on the exact line a comment points to */
.glow { border-radius: var(--r-sm); animation: glow 3.2s ease-out both; }
@keyframes glow {
  0% { background: rgba(10,114,239,0); box-shadow: 0 0 0 0 rgba(10,114,239,0); }
  12%, 60% { background: rgba(10,114,239,.18); box-shadow: 0 0 0 6px rgba(10,114,239,.18), 0 0 32px rgba(41,151,255,.45); color: var(--gray-1000); }
  100% { background: rgba(10,114,239,0); box-shadow: 0 0 0 0 rgba(10,114,239,0); }
}

/* comparison status: green = built in, yellow = partly or missing */
:root { --ok: #3fb950; --warn: #f5a524; }
.st { display: inline-block; flex: none; width: 16px; height: 16px; margin-right: var(--s2); vertical-align: -3px; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 10px; }
.yes .st { background-color: rgba(63,185,80,.18); box-shadow: inset 0 0 0 1px rgba(63,185,80,.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%233fb950' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5l2.2 2.2L9.5 3.5'/%3E%3C/svg%3E"); }
.part .st { background-color: rgba(245,165,36,.16); box-shadow: inset 0 0 0 1px rgba(245,165,36,.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5a4.5 4.5 0 0 1 0 9z' fill='%23f5a524'/%3E%3C/svg%3E"); }
.no .st { background-color: rgba(245,165,36,.16); box-shadow: inset 0 0 0 1px rgba(245,165,36,.6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23f5a524' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h6'/%3E%3C/svg%3E"); }
.cmp td > span { display: flex; align-items: flex-start; }
.cmp td > span > .st { margin-top: 4px; }
.cmp td.yes { color: var(--gray-1000); }
.cmp td.yes > span { color: inherit; }
.cmp td.no, .cmp td.part { color: var(--gray-900); }
.cmp tbody th { font-weight: 500; }
.cmp thead th:first-child { color: var(--gray-700); font-weight: 500; font-size: 14px; }
.legend { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); font-size: 14px; line-height: 20px; color: var(--gray-900); }
.legend li { display: inline-flex; align-items: center; }

/* terms: one quiet toggle in the footer, plain text inside */
.tp { margin-top: var(--s8); border-top: 1px solid var(--border); padding-top: var(--s6); }
.tp > summary { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; list-style: none; font-size: 14px; line-height: 20px; color: var(--gray-900); }
.tp > summary::-webkit-details-marker { display: none; }
.tp > summary::after { content: ""; width: 12px; height: 12px; transition: transform .2s ease;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23a1a1a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") center/12px no-repeat; }
.tp[open] > summary::after { transform: rotate(180deg); }
.tp > summary:hover { color: var(--gray-1000); }
.tp-body { max-width: 760px; margin-top: var(--s6); display: grid; gap: var(--s8); }
.tp-part { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.tp-part h3 { color: var(--gray-1000); }
.tp-part .lt { margin-top: var(--s3); padding-bottom: 0; }

/* audit fixes: mobile menu, touch targets, compact mobile layouts, question grid */
.mnav { display: none; position: relative; }
.mnav > summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: var(--r-full); }
.mnav > summary::-webkit-details-marker { display: none; }
.bars, .bars::before, .bars::after { display: block; width: 18px; height: 1.5px; background: var(--gray-1000); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; } .bars::after { top: 6px; }
.mnav[open] .bars { background: transparent; }
.mnav[open] .bars::before { transform: translateY(6px) rotate(45deg); }
.mnav[open] .bars::after { transform: translateY(-6px) rotate(-45deg); }
.mnav nav { position: fixed; left: 0; right: 0; top: var(--header-h); padding: var(--s2) var(--s4) var(--s4); background: var(--bg); box-shadow: 0 24px 48px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); display: grid; }
.mnav nav a { display: flex; align-items: center; min-height: 48px; font-size: 17px; text-decoration: none; color: var(--gray-1000); }
.mnav nav a + a { border-top: 1px solid var(--border); }
@media (max-width: 759px) { .mnav { display: block; } .hdr .wrap { gap: var(--s2); } }
@media (pointer: coarse) {
  .btn, .btn.sm { min-height: 44px; }
  .agree { padding-block: var(--s3); }
  .pick label { min-height: 44px; }
  .tp > summary, .legal summary { min-height: 44px; }
}
.tp > summary { min-height: 32px; }
.agree { min-height: 24px; }
@media (pointer: coarse) { .logo, .flinks a { min-height: 44px; display: inline-flex; align-items: center; } .flinks { row-gap: 0; } }
@media (pointer: coarse) { .tp > summary { min-height: 44px; } }
.agree.first { margin-top: 0; margin-bottom: var(--s4); }
.offer .terms { margin-top: var(--s5); }
/* steady section rhythm */
section { padding-block: var(--s12); }
@media (min-width: 900px) { section { padding-block: var(--s16) var(--s16); } }
/* comments: a swipe row on phones instead of six stacked cards */
@media (max-width: 719px) {
  .board { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s3);
    margin-inline: calc(-1 * var(--s4)); padding: var(--s2) var(--s4) var(--s4); scrollbar-width: none; }
  .board::-webkit-scrollbar { display: none; }
  .cm { scroll-snap-align: start; }
  .src::before { content: "Swipe for more. "; }
}
/* comparison on phones: the two other tools side by side, the stack full width */
@media (max-width: 719px) {
  .cmp tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) var(--s3); }
  .cmp tbody th { grid-column: 1 / -1; padding-bottom: 0; }
  .cmp td { display: block; padding: 0; font-size: 14px; line-height: 20px; }
  .cmp td::before { display: block; margin-bottom: var(--s1); font-size: 12px; line-height: 16px; }
  .cmp td:last-child { grid-column: 1 / -1; margin-top: var(--s1); }
  .cmp td > span > .st { margin-top: 2px; }
}
/* questions: heading on the left, answers in two columns */
.faq-wrap { display: grid; gap: var(--s8); }
.faq { margin-top: 0; max-width: none; }
@media (min-width: 1000px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--s12); align-items: start; }
  .faq-head { position: sticky; top: calc(var(--header-h) + var(--s8)); }
  .faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s10); align-items: start; }
  .faq details + details { border-top: 0; }
  .faq details { border-top: 1px solid var(--border); }
  .faq details:nth-child(-n+2) { border-top: 0; }
  .faq details:nth-child(2) summary { padding-top: 0; }
}
/* pick total: proportional figures read better than mono at this size */
#pick-price { font: 600 26px/32px var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.team { margin-top: var(--s8); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6);
  padding: var(--s5) var(--s6); border: 1px solid var(--border-strong); border-radius: var(--r-lg); }
.team b { color: var(--gray-1000); font-weight: 500; }
.pricing + .team + .note, .team + .note { margin-top: var(--s4); }
@media (prefers-reduced-motion: reduce) { .glow { animation: none !important; background: rgba(10,114,239,.18); box-shadow: 0 0 0 6px rgba(10,114,239,.18); } * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* thank-you note after checkout */
.paid { background: rgba(63,185,80,.12); border-bottom: 1px solid rgba(63,185,80,.4); }
.paid .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s3); }
.paid p { font-size: 14px; line-height: 20px; }
.paid b { font-weight: 600; }
[aria-busy="true"] { cursor: progress; opacity: .7; }

/* Free label on the Collate pack and free skills */
.free-tag { display: inline-block; font: 600 12px/20px var(--sans); color: #3fb950; background: rgba(63,185,80,.14); border: 1px solid rgba(63,185,80,.45); border-radius: 999px; padding: 0 8px; }
.free-tag.big { font-size: 18px; line-height: 30px; padding: 0 12px; }
.ptile:has(.free-tag) .pt-check { border-color: rgba(63,185,80,.5); }