/* The feature pages (features/*.html): one feature each, in the landing page's editorial style. They load no
   motion script, so nothing here waits for a reveal: everything is visible on first paint. */
.fhero{padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--rule)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:28px}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--rule-2)}
.fhero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end}
.fhero h1{font-size:clamp(40px,5.6vw,76px);line-height:1;letter-spacing:-.035em;font-weight:700;margin-bottom:22px}
.fhero .lead{max-width:58ch;margin-bottom:28px}
.fhero .tag{display:inline-block;font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);padding:5px 8px;border-radius:3px;margin-left:10px;vertical-align:middle}
.facts{display:grid;border-top:1px solid var(--ink)}
.facts div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.facts dt{font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.facts dd{color:var(--ink);font-size:15.5px;line-height:1.45}
@media (max-width:860px){.fhero-grid{grid-template-columns:1fr;align-items:start}}

/* a section on a feature page: a short header, then blocks */
.fsec{padding:clamp(56px,7vw,104px) 0}
.fsec .sh{margin-bottom:clamp(28px,4vw,48px)}
.fsec .feat:first-of-type{padding-top:0}
.prose{display:grid;gap:14px;max-width:68ch}
.prose p{color:var(--ink-2)}
.prose b{color:var(--ink);font-weight:650}

/* numbered steps, in a row of cards on wide screens */
.fsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--paper);counter-reset:fs}
.fsteps li{padding:24px 22px;display:grid;gap:10px;align-content:start;counter-increment:fs;border-left:1px solid var(--rule)}
.fsteps li:first-child{border-left:0}
.fsteps li::before{content:counter(fs,decimal-leading-zero);font:500 13px/1 var(--mono);color:var(--accent-ink)}
.fsteps h3{font-size:18px;line-height:1.25;letter-spacing:-.01em;font-weight:650}
@media (max-width:720px){.fsteps li{border-left:0;border-top:1px solid var(--rule)}.fsteps li:first-child{border-top:0}}

/* "what it does not do": the honest half of every page */
.limits{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.limits li{border:1px solid var(--rule-2);border-radius:var(--r);padding:20px;display:grid;gap:8px;align-content:start;background:var(--paper)}
.limits h3{font-size:16.5px;font-weight:650;letter-spacing:-.005em;display:flex;gap:10px;align-items:baseline}
.limits h3::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid var(--ink-3);border-radius:50%;transform:translateY(1px)}

/* the grid of every feature, on features/index.html and under each page */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.fcard{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:22px;border:1px solid var(--rule-2);border-radius:var(--r);background:var(--paper);text-decoration:none;color:var(--ink);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.fcard:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 18px 36px -28px rgba(13,15,18,.45)}
.fcard .ic{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--paper-2);border:1px solid var(--rule)}
.fcard .ic .i{width:22px;height:22px}
.fcard h3{font-size:19px;line-height:1.2;font-weight:650;letter-spacing:-.01em}
.fcard p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.fcard .go{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:8px;align-items:center}
.fcard:hover .go{color:var(--accent-ink)}
.fcard .go .i{width:14px;height:14px}
.fcard.new{border-color:var(--ink)}
.fcard .new-tag{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 6px;border-radius:3px;margin-left:8px;vertical-align:3px}
.fcard[aria-current="page"]{border-style:dashed;pointer-events:none;opacity:.6}
.fgrid.big .fcard{padding:28px}
.fgrid.big .fcard h3{font-size:22px}


/* the three verdicts of the offside check */
.verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.verdicts li{border-radius:var(--r);padding:20px;display:grid;gap:8px;align-content:start;border:1px solid var(--rule-2)}
.verdicts .v{font:700 15px/1 var(--text);letter-spacing:.08em;text-transform:uppercase;padding:9px 12px;border-radius:4px;color:#fff;justify-self:start}
.verdicts .off .v{background:#c8304f}
.verdicts .on .v{background:var(--ok)}
.verdicts .close-call .v{background:#c98a12}
@media (max-width:760px){.verdicts{grid-template-columns:1fr}}

/* a key-value list for "what you get" on a page */
.kv{width:100%;border-collapse:collapse;font-size:15.5px}
.kv th,.kv td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--rule)}
.kv thead th{font:500 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink)}
.kv tbody th{font-weight:600;color:var(--ink);width:34%}
.kv td{color:var(--ink-2)}
@media (max-width:640px){.kv thead{display:none}.kv tr{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--rule)}.kv th,.kv td{padding:0;border:0;width:auto}}

/* the menu on feature pages: no burger, so the links shrink to "Features" on phones */
@media (max-width:980px){.top .menu-links{display:flex;margin-left:auto}.top .menu-links a:not(.keep){display:none}.top .end{margin-left:0}}
@media (max-width:420px){.top .menu-links{display:none}}