/* ============================================================================
   WorkFreq marketing — shared brand-page design system.
   Extracted from index.html (single source of truth for the look) + a few
   brand-page utilities. Linked by the brand family pages (magic-mirror.html,
   welcome-booth.html, 1snap.html).
   60 black / 30 grey / 10 white · NFTV green accent.
   ========================================================================== */
:root{
  --black:#0A0A0A; --g0:#0D0F10; --g1:#121415; --g2:#171A1B; --g3:#1E2223;
  --line:#282D2E; --line2:#333A3B;
  --white:#FFFFFF; --grey:#C4CBC6; --muted:#8B938E; --dim:#7A817C;
  --green:#77BB41; --green-d:#5f9e33; --green-tint:rgba(119,187,65,.12);
  --sans:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:'SF Mono','Consolas','Fira Code',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--black);color:var(--grey);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);letter-spacing:1.6px;text-transform:uppercase;font-size:11px;color:var(--green);font-weight:600}
h1,h2,h3,h4{letter-spacing:-.5px;color:var(--white)}
.btn{display:inline-block;padding:11px 20px;border-radius:10px;font-weight:700;font-size:14px;border:1px solid var(--line2);transition:.15s;color:var(--white)}
.btn.primary{background:var(--green);color:#0a1705;border-color:var(--green)}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost:hover{border-color:var(--green);color:var(--green)}
/* nav */
/* ── SKIP LINK — WCAG 2.4.1 Bypass Blocks (Level A) ────────────────────────
   2026-07-12: measured 0 of 84 pages across BOTH sites had one. Level A is the
   floor, not the stretch goal — it is what an enterprise vendor accessibility
   review checks first.
   NEVER display:none / visibility:hidden here: both drop the element out of the
   tab order, so the link renders correctly in the DOM and is unreachable by the
   only people it exists for. Off-screen keeps it focusable.
   z-index:100 must beat the sticky nav (z-index:30), or it appears BEHIND it.
   #0a1705 on --green #77BB41 = 7.88:1 (AAA). White on green would be 2.34:1 — a
   FAIL — which is why the dark ink is used here and everywhere on green. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--green);color:#0a1705;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none}
.skip:focus{left:0}
/* <main> is the skip target; it must never render a focus ring of its own */
main:focus{outline:none}

nav{position:sticky;top:0;z-index:30;background:rgba(10,10,10,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .row{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-weight:800;letter-spacing:2px;font-size:16px;color:var(--white)}
.brand b{color:var(--green)}
.navlinks{display:flex;gap:24px;align-items:center}
.navlinks a.lnk{color:var(--grey);font-size:14px;font-weight:600}
.navlinks a.lnk:hover{color:var(--white)}
@media(max-width:780px){.navlinks .hidem{display:none}}
/* breadcrumb */
.crumb{padding:22px 0 0;color:var(--dim);font-size:13px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--green)}
/* brand hero (left-aligned) */
header.bhero{padding:clamp(38px,6vw,66px) 0 clamp(34px,5vw,56px);background:radial-gradient(760px 360px at 18% -40px,var(--green-tint),transparent 66%);border-bottom:1px solid var(--line)}
header.bhero .cat{margin-bottom:14px}
header.bhero h1{font-size:clamp(32px,5.4vw,54px);font-weight:800;line-height:1.06;max-width:820px;margin:0 0 8px}
header.bhero h1 em{font-style:normal;color:var(--green)}
header.bhero .tag{color:var(--white);font-size:clamp(17px,2.3vw,22px);font-weight:600;margin:0 0 16px}
header.bhero p.sub{color:var(--grey);font-size:clamp(15px,1.9vw,18px);max-width:680px;margin:0 0 26px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.cta.center{justify-content:center}
/* sections + grey layering */
section{padding:clamp(44px,6vw,76px) 0;border-bottom:1px solid var(--line)}
section.g0{background:var(--g0)} section.g1{background:var(--g1)}
h2{font-size:clamp(24px,3.2vw,34px);font-weight:800;margin-bottom:12px}
.eyebrow{margin-bottom:12px}
.lead{color:var(--muted);max-width:720px;font-size:16px;margin-bottom:34px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}
/* capability / feature grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:820px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--g2);border:1px solid var(--line);border-radius:16px;padding:24px}
.card .k{color:var(--green);font-family:var(--mono);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;display:block;margin-bottom:9px}
.card b{display:block;color:var(--white);font-size:16px;margin-bottom:6px}
.card p,.card span.d{color:var(--muted);font-size:14px;display:block}
/* numbered how-it-works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--g2);border:1px solid var(--line);border-radius:14px;padding:22px}
.step .n{font-family:var(--mono);font-size:11px;color:var(--green);font-weight:700;letter-spacing:1px}
.step h3{font-size:16px;margin:8px 0 6px}
.step p{color:var(--muted);font-size:14px}
/* bullets */
.ul{list-style:none;display:grid;gap:12px;max-width:820px}
.ul li{position:relative;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.55}
.ul li b{color:var(--grey);font-weight:600}
.ul li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--green)}
/* powered-by-workfreq band */
.powered{background:var(--g3)}
.powered .box{border:1px solid var(--line2);border-radius:18px;padding:clamp(24px,4vw,40px);background:linear-gradient(180deg,var(--g2),var(--g1))}
.powered h2{margin-bottom:10px}
.powered .pill{display:inline-flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.powered .pill span{border:1px solid var(--line2);border-radius:20px;padding:6px 12px;color:var(--grey);font-size:12.5px}
.powered .pill span b{color:var(--green);font-weight:700}
/* final */
.final{text-align:center;background:radial-gradient(700px 300px at 50% 120%,var(--green-tint),transparent)}
footer{padding:44px 0 60px;color:var(--dim);font-size:13px}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center}
footer a{color:var(--muted)}footer a:hover{color:var(--white)}

/* ══ ACCESSIBILITY (audit 2026-07-12) ══════════════════════════════════════
   WCAG 2.4.7 (Focus Visible) — there were ZERO focus rules in this stylesheet.
   The saving grace: we never set `outline:none`, so the browser's default ring
   still appeared. But a default UA outline on a #0A0A0A background is nearly
   invisible — technically present, practically useless. Anyone navigating by
   keyboard (or using a screen reader, or a switch device) could not see where
   they were on the page.

   :focus-visible (not :focus) so mouse users don't get rings on click, but
   keyboard users always do. Green ring + dark offset reads clearly on the dark
   ground and reuses the brand accent rather than inventing a new colour.

   CONTRAST — measured, not eyeballed (WCAG AA needs 4.5:1 for body text):
       #77BB41 green on #0A0A0A black ........ 8.46:1  AAA  ✅
       #C4CBC6 grey  on #0A0A0A black ........ 11.98:1 AAA  ✅
       #0a1705 near-black on #77BB41 button ... 7.88:1 AAA  ✅  (what we use)
       #FFFFFF WHITE on #77BB41 button ....... 2.34:1  FAIL ❌  (HALF the minimum)
   The palette is sound. The ONE way to break it is white text on the green.
   The rule below makes that mistake loud instead of silent. */
/* LONGHANDS, not the `outline` shorthand. Verified in a live browser: with
   `outline:3px solid var(--green)` the width and style landed but outline-color
   computed to `rgb(255,255,255)` — i.e. it fell back to currentColor and the var()
   colour never applied. (--green itself resolves fine: #77BB41 on both :root and
   the element, so the variable is not the problem — the shorthand is.)
   The ring was still VISIBLE and still passed contrast (white on #0A0A0A is
   19.8:1), which is exactly why this would have shipped unnoticed: it looked
   fine, it was accessible, and it was the wrong colour. Longhands resolve. */
:focus-visible{
  outline-width:3px;
  outline-style:solid;
  outline-color:var(--green);
  outline-offset:2px;
  border-radius:4px;
}
/* Never remove the ring without replacing it. */
:focus:not(:focus-visible){outline:none}

/* SPECIFICITY TRAP — caught in the 2026-07-12 audit, and it defeated the rule above.
   inquire.html's own <style> sets `outline:none` inside `.fld input[type=text]`,
   which is specificity (0,2,1). The bare `:focus-visible` above is (0,1,0) and
   therefore LOSES — so the focus ring was being stripped on the FORM FIELDS, the
   single place where a keyboard user most needs it. The form "had" a focus style
   (border turns green) but the ring itself was gone.
   These selectors match that specificity and win. Do not lower them. */
.fld input:focus-visible,
.fld textarea:focus-visible,
.fld select:focus-visible,
.fld .chip:focus-visible,
.formwrap a:focus-visible,
.pick a:focus-visible{
  outline-width:3px;
  outline-style:solid;
  outline-color:var(--green);
  outline-offset:2px;
}

/* GUARD: white text on the green accent is a 2.34:1 contrast FAILURE.
   If it ever ships, this makes it visible in review instead of shipping
   quietly to a keyboard/low-vision user. Do not "fix" this by deleting the
   rule — fix the markup to use var(--black) on green. */
.btn.primary[style*="color:#fff"],.btn.primary[style*="color:white"]{
  outline:3px dashed red;
}