/* Editorial-tech website starter, assembled from ../../website.md (the
   "sec." numbers below point into it). Re-skin: change the hue (3rd oklch
   number) on the four --accent* tokens, then run contrast.py on this file.
   Zero external requests: self-host any font you add. */
@layer reset, tokens, base, layout, components, motion;

/* sec. 2 */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  table { border-collapse: collapse; }
}

/* sec. 3.3, 4, 5, 6, 8 */
@layer tokens {
  :root {
    color-scheme: light dark;

    --bg:          light-dark(oklch(.972 .009 85), oklch(.148 .026 265));
    --bg-sunk:     light-dark(oklch(.94  .011 85), oklch(.115 .022 265));
    --surface:     light-dark(oklch(.995 .004 85), oklch(.205 .03  265));
    --surface-2:   light-dark(oklch(.955 .01  85), oklch(.245 .034 265));
    --surface-3:   light-dark(oklch(.92  .012 85), oklch(.29  .038 265));

    --line:        light-dark(oklch(.2 .03 265 / .12), oklch(1 0 0 / .1));
    --line-strong: light-dark(oklch(.2 .03 265 / .24), oklch(1 0 0 / .2));

    --ink:         light-dark(oklch(.2  .03 265), oklch(.968 .01 85));
    --ink-2:       light-dark(oklch(.36 .03 265), oklch(.83  .015 265));
    --muted:       light-dark(oklch(.46 .03 265), oklch(.72  .02  265));

    /* THE ONE ACCENT -- Trade Corp red-orange (hue ~34) */
    --accent:        light-dark(oklch(.63 .2  34), oklch(.72 .2  40));
    --accent-strong: light-dark(oklch(.57 .21 32), oklch(.78 .2  44));
    --accent-text:   light-dark(oklch(.52 .19 32), oklch(.8  .18 40));
    --accent-soft:   light-dark(oklch(.63 .2  34 / .16), oklch(.72 .2 40 / .14));
    --on-accent:     oklch(.18 .03 40);

    --good: light-dark(oklch(.5 .13 155), oklch(.8 .15 155));
    --warn: light-dark(oklch(.52 .13 65), oklch(.83 .14 80));

    --series-0: light-dark(oklch(.6 .07 255), oklch(.72 .07 255));
    --series-1: light-dark(oklch(.6 .1  215), oklch(.76 .1  215));
    --series-2: light-dark(oklch(.62 .15 28), oklch(.74 .14 28));
    --series-3: var(--accent);
    --series-4: light-dark(oklch(.6 .12 150), oklch(.76 .12 150));

    --glass: light-dark(oklch(.985 .006 85 / .72), oklch(.16 .026 265 / .66));

    --shadow-1: 0 1px 1px light-dark(oklch(.2 .03 265/.06), oklch(0 0 0/.3)),
                0 6px 16px -6px light-dark(oklch(.2 .03 265/.1), oklch(0 0 0/.4));
    --shadow-2: 0 1px 1px light-dark(oklch(.2 .03 265/.05), oklch(0 0 0/.25)),
                0 10px 20px -8px light-dark(oklch(.2 .03 265/.14), oklch(0 0 0/.45)),
                0 34px 70px -24px light-dark(oklch(.2 .03 265/.25), oklch(0 0 0/.6));
    --shadow-post: 0 2px 2px oklch(0 0 0/.12),
                   0 14px 28px -10px oklch(0 0 0/.35),
                   0 40px 90px -30px oklch(0 0 0/.55);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    /* sec. 5: swap "YourDisplayFont" for a self-hosted variable face, e.g.
       @font-face { font-family: "YourDisplayFont"; src: url("../fonts/YourDisplayFont.ttf") format("truetype");
                    font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; } */
    --f-display: "YourDisplayFont", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
    --f-text:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --gutter: clamp(16px, 4vw, 44px);
    --max: 1280px;
    --max-wide: 1480px;
    --hdr: 68px;
    /* radii: the doc uses --r-l without defining it; these are the starter's */
    --r-s: 10px; --r-m: 16px; --r-l: 24px;

    --ease:    cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}

/* sec. 5, 10 */
@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
  body { min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 1rem/1.55 var(--f-text); -webkit-font-smoothing: antialiased; }
  h1, h2, h3 { font-family: var(--f-display); font-weight: 650; color: var(--ink); text-wrap: balance; }
  h1 { font-size: clamp(2.5rem, 1.2rem + 5.2vw, 5.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.02; }
  h2 { font-size: clamp(2rem, 1.2rem + 2.9vw, 3.8rem); letter-spacing: -.035em; line-height: 1.06; }
  h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem); letter-spacing: -.02em; line-height: 1.12; }
  p { max-width: 70ch; text-wrap: pretty; }
  .lede { font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem); color: var(--ink-2); max-width: 60ch; }
  a { color: var(--accent-text); text-underline-offset: .2em; }
  :focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
  :focus:not(:focus-visible) { outline: none; }
  ::selection { background: var(--accent); color: var(--on-accent); }
  .eyebrow { display: inline-flex; align-items: center; gap: .7em; font: 600 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
  .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
  .muted { color: var(--muted); }
  .skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 200; padding: .7em 1.1em; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 650; text-decoration: none; }
  .skip-link:focus { top: 12px; }
  .crumbs { font: 500 .8rem/1 var(--f-mono); color: var(--muted); }
}

/* sec. 6 */
@layer layout {
  .wrap      { width: min(100% - 2 * var(--gutter), var(--max));      margin-inline: auto; }
  .wrap-wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto; }
  .section       { padding-block: clamp(72px, 10vw, 150px); position: relative; }
  .section-tight { padding-block: clamp(48px, 6vw, 90px); }
  .stack > * + * { margin-top: 1.1rem; }

  .bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
  .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }
  .span-12 { grid-column: 1 / -1; }
  .center-y { align-self: center; }
  @media (max-width: 980px) { .bento > * { grid-column: span 12; } .bento > .span-3, .bento > .span-4 { grid-column: span 6; } }
  @media (max-width: 620px) { .bento > *, .bento > .span-3, .bento > .span-4 { grid-column: 1 / -1; } }

  @media (min-width: 1900px) { :root { --max: 1560px; --max-wide: 1760px; } html { font-size: 112.5%; } }
  @media (min-width: 2300px) { html { font-size: 125%; } }
}

/* sec. 7, 9 */
@layer components {
  .btn {
    --bx: 0px; --by: 0px;
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
    padding: .85em 1.4em; border-radius: 999px; font-weight: 650; font-size: .98rem; line-height: 1; white-space: nowrap; text-decoration: none;
    transform: translate(var(--bx), var(--by));
    transition: transform .35s var(--ease), background .2s, box-shadow .3s, border-color .2s, color .2s;
  }
  .btn-primary {
    background: var(--accent); color: var(--on-accent);
    box-shadow: 0 1px 0 oklch(1 0 0/.5) inset, 0 -2px 0 oklch(0 0 0/.12) inset, 0 10px 24px -10px var(--accent), 0 2px 4px oklch(0 0 0/.15);
  }
  .btn-primary:hover { background: var(--accent-strong); box-shadow: 0 1px 0 oklch(1 0 0/.5) inset, 0 -2px 0 oklch(0 0 0/.12) inset, 0 14px 32px -10px var(--accent), 0 2px 4px oklch(0 0 0/.15); }
  .btn-primary:active { transform: translate(var(--bx), calc(var(--by) + 1px)); }
  .btn-ghost { border: 1px solid var(--line-strong); background: color-mix(in oklab, var(--surface) 50%, transparent); color: var(--ink); }
  .btn-ghost:hover { border-color: var(--ink-2); }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

  .icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); transition: color .2s, border-color .2s, background .2s; }
  .icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
  .icon-btn svg { width: 18px; height: 18px; }

  .card {
    --mx: 50%; --my: 0%;
    position: relative; isolation: isolate; overflow: hidden;
    border-radius: var(--r-l); border: 1px solid var(--line); background: var(--surface);
    box-shadow: var(--shadow-1); padding: clamp(20px, 2.4vw, 34px);
    transition: border-color .3s, box-shadow .4s;
  }
  .card::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in oklab, var(--accent) 16%, transparent), transparent 65%);
    opacity: 0; transition: opacity .4s;
  }
  .card:hover::before { opacity: 1; }
  .card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
  .card h3 { margin-bottom: .5rem; }
  .card p { color: var(--ink-2); }
  .stat { font: 700 clamp(2rem, 1.4rem + 2vw, 3.2rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

  .status { display: inline-flex; align-items: center; gap: .55em; padding: .5em .85em; border-radius: 999px; border: 1px solid var(--line); font: 600 .74rem/1 var(--f-mono); color: var(--ink-2); }
  .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .status[data-state="live"] .dot { background: var(--good); animation: ping 2.4s infinite; }
  /* homepage links to the Live Trading Battle page (competition/), gold like that page */
  .battle-chip { display: flex; width: fit-content; max-width: 100%; color: var(--ink); text-decoration: none; transition: border-color .2s, background .2s; }
  .battle-chip:hover, .battle-chip:focus-visible { border-color: oklch(0.78 0.14 75); background: var(--surface-2); }

  .post { position: relative; aspect-ratio: 4/5; border-radius: clamp(14px, 2.2%, 22px); overflow: hidden; background: var(--surface-3); box-shadow: var(--shadow-post); isolation: isolate; }
  .post img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .post::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    box-shadow: inset 0 0 0 1px oklch(1 0 0/.14), inset 0 1px 0 oklch(1 0 0/.3);
    background: linear-gradient(115deg, oklch(1 0 0/.16), transparent 32%, transparent 68%, oklch(0 0 0/.14));
  }
  .chip { position: absolute; left: 14px; top: 14px; z-index: 1; padding: .45em .8em; border-radius: 999px; font: 600 .72rem/1 var(--f-mono); color: #fff; background: oklch(0 0 0/.45); backdrop-filter: blur(8px); }

  .compare { --pos: 50%; position: relative; overflow: hidden; aspect-ratio: 4/5; border-radius: var(--r-l); box-shadow: var(--shadow-2); touch-action: pan-y; user-select: none; }
  .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
  .compare .after { clip-path: inset(0 0 0 var(--pos)); }
  .compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: oklch(1 0 0/.9); pointer-events: none; }
  .compare .knob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; color: oklch(.2 .03 265); display: grid; place-items: center; font: 700 .8rem/1 var(--f-mono); transition: transform .3s var(--ease); }
  .compare:hover .knob, .compare:focus-within .knob { transform: scale(1.1); }
  /* the focusable part is the invisible range input: show its focus on the knob */
  .compare:has(input:focus-visible) .knob { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
  .compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }

  .site-header { position: sticky; top: 0; z-index: 100; background: var(--glass); backdrop-filter: blur(20px) saturate(1.5); border-bottom: 1px solid var(--line); }
  .hdr { display: flex; align-items: center; gap: 16px; height: var(--hdr); }
  .brand { display: inline-flex; align-items: center; gap: .55em; font: 700 1.1rem/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
  .brand-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); box-shadow: 0 1px 0 oklch(1 0 0/.5) inset; }
  .hdr-actions { display: flex; align-items: center; gap: 8px; }
  .nav { display: flex; gap: 2px; margin-inline: auto; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in oklab, var(--surface) 60%, transparent); }
  .nav a { padding: .6em 1em; border-radius: 999px; color: var(--ink-2); font-size: .92rem; font-weight: 550; text-decoration: none; white-space: nowrap; transition: color .2s, background .2s; }
  .nav a:hover { color: var(--ink); background: var(--surface-2); }
  .nav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); box-shadow: 0 1px 0 oklch(1 0 0/.4) inset, 0 6px 16px -8px var(--accent); }
  .menu-btn { display: none; }
  /* 1280: the six-link nav needs about 1225px; below it the menu becomes a drawer */
  @media (max-width: 1280px) {
    .menu-btn { display: grid; }
    .hdr-actions { margin-left: auto; }
    .nav { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--hdr) + 8px); flex-direction: column; border-radius: var(--r-l);
      background: var(--surface); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
      transition: opacity .25s, transform .35s var(--ease), visibility 0s .3s; }
    .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); }
    .nav a { padding: .9em 1.1em; }
  }

  .cta-band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-l); padding: clamp(32px, 6vw, 88px); border: 1px solid var(--line);
    background: radial-gradient(80% 120% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface-2); }
  .cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .09; mix-blend-mode: overlay; }
  .battle-band { background: radial-gradient(70% 120% at 100% 0%, oklch(0.78 0.14 75 / .2), transparent 60%), radial-gradient(80% 120% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface-2); }

  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 600 1.08rem/1.3 var(--f-display); }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; color: var(--accent-text); transition: transform .35s var(--ease); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details p { padding-bottom: 18px; color: var(--ink-2); }

  .site-footer { position: relative; overflow: hidden; background: var(--bg-sunk); border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 96px) clamp(120px, 20vw, 260px); }
  .site-footer .wrap { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
  .site-footer a { color: var(--ink-2); text-decoration: none; }
  .site-footer a:hover { color: var(--ink); }
  .foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .foot-mega {
    position: absolute; left: 0; right: 0; bottom: -.22em; z-index: 0; text-align: center; white-space: nowrap;
    font: 800 clamp(4.5rem, 17.5vw, 20rem)/.8 var(--f-display); letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 1px var(--line-strong); opacity: .7; pointer-events: none; user-select: none;
  }
}

/* sec. 8 */
@layer motion {
  /* The doc's ping starts and ends transparent, so nothing shows; this ring
     is drawn in --good, the dot's own colour. */
  @keyframes ping {
    0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--good) 60%, transparent); }
    70%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  @supports (animation-timeline: view()) {
    .parallax { animation: px linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes px { from { transform: translateY(var(--px-from, 40px)); } to { transform: translateY(var(--px-to, -40px)); } }
  }

  /* hidden only once theme-init.js has marked <html class="js"> */
  html.js .rv { opacity: 0; transform: translateY(28px); }
  html.js .rv.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
  [data-d="1"] { --d: 1; } [data-d="2"] { --d: 2; } [data-d="3"] { --d: 3; } [data-d="4"] { --d: 4; } [data-d="5"] { --d: 5; }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 280ms var(--ease-io) both vt-out; }
  ::view-transition-new(root) { animation: 500ms var(--ease) both vt-in; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: 0s; }

  /* last in the last layer: nothing overrides it */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
    }
    .parallax { animation: none !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  }
}

/* ---- Trade Corp product-specific additions (appended to components) ---- */
@layer components {
  .brand-logo { flex: none; }
  .brand-word { font: 700 1.12rem/1 var(--f-display); letter-spacing: -.02em; }
  .brand-dot { color: var(--accent-text); }

  .btn-sm { padding: .55em 1em; font-size: .86rem; }
  @media (max-width: 640px) { .hide-sm { display: none; } }

  .num { display: inline-block; margin-bottom: .6rem; font: 600 .74rem/1 var(--f-mono); letter-spacing: .12em; color: var(--accent-text); }
  .link { display: inline-flex; margin-top: .9rem; font: 600 .82rem/1 var(--f-mono); letter-spacing: .04em; color: var(--accent-text); text-decoration: none; }
  .link:hover { color: var(--accent-strong); }

  /* AI "sample output" card -- overrides the .post image frame */
  .term { aspect-ratio: auto; background: var(--surface); border: 1px solid var(--line-strong); padding: 46px 20px 20px; }
  .term::after { display: none; }
  .term-body { display: flex; flex-direction: column; gap: .7rem; font: .82rem/1.5 var(--f-mono); }
  .term-you { color: var(--ink); font-weight: 600; }
  .term-ai { color: var(--ink-2); display: flex; gap: .55em; align-items: baseline; }
  .term-tag { flex: none; padding: .15em .5em; border-radius: 6px; font-size: .68rem; font-weight: 700; color: var(--accent-text); background: var(--accent-soft); }
  .term-list { list-style: none; padding: 0; margin: .1rem 0; display: grid; gap: .4rem; }
  .term-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .5em .7em; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); }
  .term-list li span:last-child { color: var(--ink); font-weight: 600; }
  .term-list .ok { color: var(--good); }

  /* ticker marquee */
  .marquee { margin-block: clamp(2.5rem, 6vw, 4.5rem); border-block: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .marquee-row { display: flex; align-items: center; gap: 1.6rem; width: max-content; padding-block: .85rem; font: 600 .78rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; animation: tc-marquee 42s linear infinite; }
  .marquee-row i { color: var(--accent-text); font-style: normal; }
}
@keyframes tc-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-row { animation: none; } }

/* ---- Auth pages (sign in / sign up) ---- */
@layer components {
  .auth-body { min-height: 100dvh; }
  .auth-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
  .auth-main { display: grid; place-items: center; padding: clamp(24px, 5vw, 64px); }
  .auth-card { width: min(100%, 410px); }
  .auth-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
  .auth-card h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.15rem); margin-bottom: 6px; }
  .auth-form { display: grid; gap: 15px; margin-top: 24px; }
  .field { display: grid; gap: 7px; }
  .field > span { font: 600 .8rem/1 var(--f-mono); letter-spacing: .03em; color: var(--ink-2); }
  .field input { height: 48px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
  .field input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85rem; margin-top: 2px; }
  .check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); cursor: pointer; }
  .check input { accent-color: var(--accent); width: 15px; height: 15px; }
  .auth-row a, .auth-alt a, .terms a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
  .btn-block { width: 100%; justify-content: center; height: 48px; margin-top: 4px; }
  .auth-or { display: flex; align-items: center; gap: 14px; margin: 20px 0 16px; color: var(--muted); font: 600 .74rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
  .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .btn-oauth { gap: 10px; }
  .btn-oauth svg { width: 18px; height: 18px; }
  .terms { font-size: .82rem; color: var(--muted); line-height: 1.45; }
  .auth-alt { margin-top: 24px; font-size: .9rem; color: var(--muted); }
  /* brand aside */
  .auth-aside { position: relative; overflow: hidden; display: grid; align-content: center; gap: 18px; padding: clamp(32px, 5vw, 76px); background: oklch(.16 .02 265); isolation: isolate; }
  .auth-aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(130% 90% at 72% 18%, var(--accent) 0%, transparent 56%), radial-gradient(100% 90% at 15% 92%, var(--accent-strong) 0%, transparent 52%); }
  .auth-aside::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; mix-blend-mode: overlay; background-image: var(--grain); }
  .auth-aside .eyebrow { color: oklch(1 0 0 / .9); }
  .auth-aside h2 { color: #fff; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3.1rem); line-height: 1.02; letter-spacing: -.02em; }
  .auth-aside p { color: oklch(1 0 0 / .85); max-width: 42ch; }
  .auth-quote { margin-top: 14px; padding: 18px 20px; border-radius: 16px; background: oklch(1 0 0 / .12); border: 1px solid oklch(1 0 0 / .18); backdrop-filter: blur(8px); color: #fff; font-size: .95rem; }
  .auth-quote cite { display: block; margin-top: 8px; font: 600 .78rem/1 var(--f-mono); color: oklch(1 0 0 / .72); font-style: normal; }
  @media (max-width: 880px) { .auth-wrap { grid-template-columns: 1fr; } .auth-aside { display: none; } }
}


/* ============================================================
   Landing hero — 2136 sci-fi background system
   ============================================================ */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero .wrap, .hero .bento { position: relative; z-index: 1; }

.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; }

/* radial red-orange mesh bloom */
.hero::before {
  inset: -25% -15% 0; z-index: -3;
  --hero-core: light-dark(color-mix(in srgb, var(--accent-strong) 60%, transparent), color-mix(in srgb, var(--accent-strong) 76%, transparent));
  --hero-mid:  light-dark(color-mix(in srgb, var(--accent) 40%, transparent),        color-mix(in srgb, var(--accent) 54%, transparent));
  --hero-edge: light-dark(color-mix(in srgb, var(--accent-soft) 70%, transparent),   color-mix(in srgb, var(--accent) 28%, transparent));
  --hero-glow: light-dark(color-mix(in srgb, var(--accent) 32%, transparent),        color-mix(in srgb, var(--accent-strong) 42%, transparent));
  background:
    linear-gradient(to bottom, transparent 60%, var(--bg) 100%),
    radial-gradient(34% 40% at 64% 44%, var(--hero-core) 0%, transparent 72%),
    radial-gradient(64% 66% at 54% 42%, var(--hero-mid) 0%, transparent 70%),
    radial-gradient(44% 52% at 14% 70%, var(--hero-edge) 0%, transparent 72%),
    radial-gradient(42% 50% at 88% 26%, var(--hero-glow) 0%, transparent 70%);
}

/* grain */
/* light-dark() only takes colors, so opacity/blend need explicit per-theme rules */
.hero::after { inset: 0; z-index: -1; background-image: var(--grain); opacity: .15; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::after { opacity: .22; mix-blend-mode: overlay; } }
:root[data-theme="dark"] .hero::after { opacity: .22; mix-blend-mode: overlay; }

/* fx layer: drifting tech grid + scanline sweep */
.hero-fx { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(130% 100% at 60% 38%, #000 24%, transparent 76%);
          mask-image: radial-gradient(130% 100% at 60% 38%, #000 24%, transparent 76%);
  animation: hero-grid-drift 26s linear infinite;
}
.hero-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 170px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 13%, transparent) 50%, transparent);
  opacity: .7; animation: hero-scan 7.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes hero-grid-drift { to { background-position: 46px 46px; } }
@keyframes hero-scan { 0% { transform: translateY(-170px); } 55%, 100% { transform: translateY(98vh); } }

@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: hero-drift 26s ease-in-out infinite alternate; }
  @keyframes hero-drift { from { transform: translate3d(-1.5%, 0, 0) scale(1); } to { transform: translate3d(1.5%, -1.5%, 0) scale(1.05); } }
}
@media (prefers-reduced-motion: reduce) { .hero-grid { animation: none; } .hero-scan { display: none; } }


/* ---- Self-hosted display font: Space Grotesk (SIL OFL) ---- */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("../../fonts/SpaceGrotesk-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("../../fonts/SpaceGrotesk-var.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root { --f-display: "Space Grotesk", "Avenir Next", ui-sans-serif, system-ui, sans-serif; }

/* auth error box */
@layer components {
  .auth-err { margin: 14px 0 2px; padding: 11px 14px; border-radius: 12px; font-size: .86rem; line-height: 1.4;
    color: light-dark(oklch(.5 .2 25), oklch(.82 .16 25));
    background: light-dark(oklch(.5 .2 25 / .1), oklch(.82 .16 25 / .12));
    border: 1px solid light-dark(oklch(.5 .2 25 / .3), oklch(.82 .16 25 / .35)); }
}

/* ============================================================
   Landing page — 2136 sci-fi components + interactive layers
   ============================================================ */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --grid-line:   light-dark(oklch(.2 .03 265 / .055), oklch(.72 .18 45 / .085));
  --glow-accent: light-dark(oklch(.63 .2 34 / .42), oklch(.72 .2 40 / .6));
  --brk:         color-mix(in srgb, var(--accent) 60%, transparent);
  --holo: linear-gradient(100deg, var(--accent-strong) 0%, light-dark(oklch(.68 .19 50), oklch(.82 .16 62)) 34%, var(--accent) 60%, var(--accent-strong) 100%);
}

@layer components {

  /* ---- Brand logo: raster mark + type wordmark ---- */
  .brand-logo-img { height: 30px; width: auto; filter: drop-shadow(0 2px 9px var(--glow-accent)); transition: transform .4s var(--ease), filter .3s; }
  .brand-word { white-space: nowrap; }
  @media (max-width: 560px) { .brand-logo-img { height: 26px; } .hdr { gap: 10px; } }

  /* ---- Brand tagline lockup ---- */
  .brand-lockup { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; }
  .brand-tag { display: flex; gap: .5em; align-items: center; font: 700 .52rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); }
  .brand-tag .sep { color: var(--line-strong); font-weight: 400; }
  .brand-tag .hot { color: var(--accent-text); }
  @media (max-width: 560px) { .brand-tag { display: none; } }

  /* ---- Footer brand lockup (full two-line tagline) ---- */
  .foot-brand { display: flex; align-items: center; gap: 15px; }
  .foot-brand > div { display: flex; flex-direction: column; gap: 5px; }
  .foot-brand .brand-logo-img { height: 42px; }
  .foot-brand .brand-word { font: 700 1.3rem/1 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
  .foot-tag { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; font: 700 .6rem/1.3 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; }
  .foot-tag span:first-child { color: var(--ink-2); }
  .foot-tag .hot { color: var(--accent-text); }
  .foot-copy { margin-top: 6px; font-size: .82rem; }
  .brand:hover .brand-logo-img { transform: translateY(-1px) scale(1.05); filter: drop-shadow(0 4px 15px var(--glow-accent)); }

  /* ---- HUD eyebrow (landing only): blinking status block ---- */
  #main .eyebrow::after { content: ""; width: 6px; height: 6px; margin-left: .2em; border-radius: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: hud-blink 1.6s steps(1) infinite; }

  /* ---- Holographic headline word ---- */
  .hero h1 .hl { background: var(--holo); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: holo 7s linear infinite; }
  :root[data-theme="dark"] .hero h1 { text-shadow: 0 0 46px oklch(.72 .2 40 / .18); }

  /* ---- Hero visual: live network in a HUD frame ---- */
  .hero-visual { position: relative; will-change: transform; }
  .dotgrid {
    position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; isolation: isolate;
    border-radius: var(--r-l); border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-1), inset 0 0 70px -22px var(--glow-accent);
    background:
      radial-gradient(120% 110% at 50% -10%, color-mix(in oklab, var(--accent-soft) 55%, transparent), transparent 60%),
      linear-gradient(180deg, color-mix(in oklab, var(--surface) 90%, transparent), var(--surface));
  }
  .dotgrid canvas { display: block; width: 100%; height: 100%; }
  @media (max-width: 980px) { .dotgrid { aspect-ratio: 16 / 10; } }

  .hud-readout { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 2; display: flex; gap: 14px; flex-wrap: wrap;
    font: 600 .64rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .hud-readout b { color: var(--ink-2); font-weight: 700; }
  .hud-readout .on { color: var(--good); margin-left: auto; }

  .brk { position: absolute; width: 16px; height: 16px; z-index: 2; pointer-events: none; border: 2px solid var(--brk); }
  .brk.tl { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 5px; }
  .brk.tr { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 5px; }
  .brk.bl { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 5px; }
  .brk.br { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 5px; }

  /* ---- Stats strip (animated counters) ---- */
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.5vw, 18px); }
  .stat-cell { position: relative; overflow: hidden; padding: clamp(16px, 2vw, 26px); border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-1); }
  .stat-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
  .stat-num { display: block; font: 700 clamp(1.8rem, 1.2rem + 2.2vw, 3rem)/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .stat-cap { display: block; margin-top: .5rem; font: 600 .7rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  @media (max-width: 720px) { .stats { grid-template-columns: repeat(2, 1fr); } }

  /* ---- Scrolling binary matrix strip ---- */
  .binary {
    overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-sunk);
    padding-block: 11px; display: flex; flex-direction: column; gap: 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .binary-row { white-space: nowrap; width: max-content; will-change: transform; font: 600 .66rem/1 var(--f-mono); letter-spacing: .34em; color: var(--accent-text); opacity: .22; animation: tc-bin 64s linear infinite; }
  .binary-row:nth-child(even) { color: var(--ink-2); opacity: .13; animation-duration: 86s; animation-direction: reverse; }
  .binary-row:nth-child(3n)   { animation-duration: 74s; }

  /* ---- Agents "doesn't suggest, it acts" statement ---- */
  .statement {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 34px;
    margin-block: clamp(1.5rem, 3.5vw, 2.8rem); padding: clamp(24px, 4vw, 46px);
    border-radius: var(--r-l); border: 1px solid var(--line-strong); position: relative; overflow: hidden; isolation: isolate;
    background: radial-gradient(90% 150% at 100% 0%, var(--accent-soft), transparent 58%), var(--surface-2);
    box-shadow: var(--shadow-1), inset 0 0 80px -34px var(--glow-accent);
  }
  .statement::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .07; mix-blend-mode: overlay; }
  .statement p { margin: 0; max-width: 22ch; font: 650 clamp(1.4rem, 1rem + 2vw, 2.4rem)/1.08 var(--f-display); letter-spacing: -.025em; color: var(--ink); }
  .statement em { color: var(--accent-text); font-style: normal; }

  /* ---- Broker wordmarks (text only, no copied logos) ---- */
  .brokers { margin-top: clamp(1.3rem, 3vw, 2rem); padding-top: clamp(1.3rem, 3vw, 2rem); border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
  .brokers-label { font: 600 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .brokers-list { display: flex; flex-wrap: wrap; gap: 10px 12px; list-style: none; padding: 0; margin: 0; }
  .brokers-list li { padding: .5em .95em; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
    font: 650 .86rem/1 var(--f-display); letter-spacing: -.01em; color: var(--ink-2);
    transition: color .2s, border-color .2s, transform .3s var(--ease), box-shadow .3s; }
  .brokers-list li:hover { color: var(--ink); border-color: var(--brk); transform: translateY(-2px); box-shadow: 0 0 18px -6px var(--glow-accent); }

  /* ---- News meta line ---- */
  .news-meta { display: flex; gap: .8em; margin-bottom: .9rem; font: 600 .72rem/1 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .news-meta .tag { color: var(--accent-text); }

  /* ---- 6-step flow ---- */
  .flow { list-style: none; padding: 0; margin: 0; }
  .flow > li { position: relative; }

  /* ---- Cards: glass + rotating glow border + lift ---- */
  .card { transition: border-color .3s, box-shadow .4s, transform .4s var(--ease); }
  .card:hover { transform: translateY(-3px); }
  .card::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
    background: conic-gradient(from var(--ang), transparent 0 34%, var(--accent) 46% 54%, transparent 66% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .45s;
  }
  .card:hover::after { opacity: .85; animation: spin-border 3.2s linear infinite; }

  /* ---- Glossy primary button: glow + shine sweep ---- */
  .btn-primary { overflow: hidden; box-shadow: 0 1px 0 oklch(1 0 0/.5) inset, 0 -2px 0 oklch(0 0 0/.12) inset, 0 10px 24px -10px var(--accent), 0 0 26px -8px var(--glow-accent), 0 2px 4px oklch(0 0 0/.15); }
  .btn-primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 32%, oklch(1 0 0/.55) 48%, transparent 62%); transform: translateX(-130%); transition: transform .65s var(--ease); }
  .btn-primary:hover::after { transform: translateX(130%); }

  /* ---- CTA panel glow + marquee glow ---- */
  .cta-band { box-shadow: var(--shadow-1), inset 0 0 90px -34px var(--glow-accent); }
  :root[data-theme="dark"] .marquee-row i { text-shadow: 0 0 10px var(--accent); }

  /* ---- Footer tech grid ---- */
  .site-footer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 46px 46px; -webkit-mask-image: linear-gradient(to top, #000, transparent 72%); mask-image: linear-gradient(to top, #000, transparent 72%); }
}

/* ---- Cursor-follow glow (hero), driven by hero.js ---- */
.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 0; width: 480px; height: 480px; border-radius: 50%;
  pointer-events: none; opacity: 0; will-change: transform, opacity; transition: opacity .5s var(--ease);
  mix-blend-mode: multiply;
  background: radial-gradient(circle at center,
    color-mix(in srgb, var(--accent) 46%, transparent) 0%,
    color-mix(in srgb, var(--accent) 18%, transparent) 38%,
    transparent 68%);
}
.cursor-glow[data-on="true"] { opacity: 1; }
:root[data-theme="dark"] .cursor-glow { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cursor-glow { mix-blend-mode: screen; } }

@keyframes tc-bin { to { transform: translateX(-50%); } }
@keyframes holo { to { background-position: 220% 0; } }
@keyframes hud-blink { 50% { opacity: .25; } }
@keyframes spin-border { to { --ang: 360deg; } }

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .binary-row, #main .eyebrow::after, .hero h1 .hl { animation: none; }
  .card:hover::after { animation: none; }
}
@media (prefers-reduced-motion: reduce), (hover: none) {
  .cursor-glow { display: none; }
}

/* ---- audit fixes (unlayered, so they take precedence over the layered base) ---- */
/* above-the-fold reveal: visible on first paint, no transition dependency */
html.js .rv.rv-now { transition: none; }
/* Sign in lives in the mobile nav drawer when the header button is hidden */
.nav .nav-signin { display: none; }
@media (max-width: 640px) { .nav .nav-signin { display: block; } }
/* legal page */
.legal-card { width: min(100%, 780px); }
.legal { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.legal h2 { font-size: 1.35rem; margin: 0 0 12px; scroll-margin-top: 24px; }
.legal h3 { font-size: 1rem; margin: 18px 0 6px; }
.legal p { color: var(--ink-2); line-height: 1.65; margin: 0 0 10px; }
.legal-card > .muted a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.legal-wrap { grid-template-columns: 1fr; }
.legal-wrap .auth-main { place-items: start center; }

/* ---- final polish ---- */
/* the hero paints on first frame even before site.js runs (never a blank fold) */
html.js .hero .rv { opacity: 1; transform: none; transition: none; }
/* scroll-spy: section in view */
.nav a[aria-current="true"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* mobile menu button reads as pressed while the drawer is open */
.menu-btn[aria-expanded="true"] { color: var(--accent-text); border-color: var(--brk); background: var(--accent-soft); }
/* FAQ rows: crisp hover/focus */
.faq summary { transition: color .2s; }
.faq summary:hover, .faq summary:focus-visible { color: var(--accent-text); }
.faq summary:focus-visible { outline-offset: 4px; border-radius: 6px; }
/* sign-up referral invite */
.auth-ref { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--brk); background: var(--accent-soft); color: var(--ink); font-size: .84rem; font-weight: 550; }
.auth-ref::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.auth-ref[hidden] { display: none; }

/* ---- official channels: footer row, landing section, auth cards ---- */
.oc-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.oc-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: color .2s, border-color .2s, background .2s, transform .3s var(--ease), box-shadow .3s; }
.oc-link svg { width: 18px; height: 18px; }
.oc-link:hover, .oc-link:focus-visible { color: var(--accent-text); border-color: var(--brk); background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 0 18px -4px var(--glow-accent); }
.foot-social { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.foot-social-h { display: flex; flex-direction: column; gap: 6px; }
.foot-social-h span { font: 600 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.foot-social-h small { font-size: .84rem; color: var(--muted); }
.site-footer .foot-social-h a { color: var(--accent-text); font-weight: 600; }
.site-footer .foot-social-h a:hover { color: var(--accent-strong); }
.site-footer .oc-link { color: var(--ink-2); }
.site-footer .oc-link:hover, .site-footer .oc-link:focus-visible { color: var(--accent-text); }

.oc-safety { display: flex; align-items: flex-start; gap: 16px; max-width: 880px; padding: 18px 22px; border-radius: var(--r-m); border: 1px solid var(--brk);
  background: radial-gradient(120% 150% at 0% 0%, var(--accent-soft), transparent 62%), var(--surface); box-shadow: 0 0 34px -18px var(--glow-accent); }
.oc-safety-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); box-shadow: 0 0 22px -6px var(--glow-accent); }
.oc-safety-ic svg { width: 24px; height: 24px; }
.oc-safety b { display: block; margin-bottom: 4px; font: 700 1.08rem/1.25 var(--f-display); letter-spacing: -.01em; color: var(--ink); }
.oc-safety p { line-height: 1.55; color: var(--ink-2); }
.oc-safety p.muted { margin-top: 4px; font-size: .92rem; color: var(--muted); }
.oc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; padding: 0; }
.oc-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic go" "txt txt"; gap: 16px 12px; height: 100%; padding: 18px;
  border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none;
  transition: border-color .2s, transform .3s var(--ease), box-shadow .3s; }
.oc-card-ic { grid-area: ic; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); transition: color .2s, background .2s, box-shadow .3s; }
.oc-card-ic svg { width: 21px; height: 21px; }
.oc-card-go { grid-area: go; justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: 4px; font: 600 .7rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); transition: color .2s; }
.oc-card-go svg { width: 13px; height: 13px; }
.oc-card-txt { grid-area: txt; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oc-card-txt b { font: 650 .98rem/1.2 var(--f-display); letter-spacing: -.01em; }
.oc-card-url { font: 500 .74rem/1.4 var(--f-mono); color: var(--muted); overflow-wrap: anywhere; }
.oc-card:hover, .oc-card:focus-visible { border-color: var(--brk); transform: translateY(-3px); box-shadow: 0 0 28px -10px var(--glow-accent), 0 14px 30px -22px oklch(0 0 0 / .45); }
.oc-card:hover .oc-card-ic, .oc-card:focus-visible .oc-card-ic { color: var(--accent-text); background: var(--accent-soft); box-shadow: 0 0 18px -4px var(--glow-accent); }
.oc-card:hover .oc-card-go, .oc-card:focus-visible .oc-card-go { color: var(--accent-text); }
@media (max-width: 1100px) { .oc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .oc-grid { grid-template-columns: 1fr; gap: 10px; }
  .oc-card { grid-template-columns: auto 1fr auto; grid-template-areas: "ic txt go"; align-items: center; padding: 12px 14px; }
  .oc-card-go { align-self: center; }
  .oc-safety { padding: 16px; gap: 12px; }
  .oc-safety-ic { width: 38px; height: 38px; }
  .foot-social .oc-row { gap: 6px; }
  .foot-social .oc-link { width: 36px; height: 36px; }
}

.auth-social { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.auth-social-h { font: 600 .68rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.auth-social .oc-row { gap: 6px; }
.auth-social .oc-link { width: 34px; height: 34px; }
.auth-social .oc-link svg { width: 16px; height: 16px; }
.auth-social-note { font-size: .76rem; line-height: 1.45; color: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .oc-link, .oc-card { transition: color .2s, border-color .2s, background .2s; }
  .oc-link:hover, .oc-link:focus-visible, .oc-card:hover, .oc-card:focus-visible { transform: none; }
}

/* site links on the auth + legal pages */
.auth-pages { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .86rem; }
.auth-pages a { color: var(--ink-2); text-decoration: none; }
.auth-pages a:hover { color: var(--accent-text); text-decoration: underline; }