/* ==========================================================================
   AgentOnRails — design tokens
   Light-first, warm consumer-fintech palette. Dark mode mirrors the brand's
   original dark theme. Pillar colors (pay/id/priv) carry real product
   meaning — see assets/brand/BRAND_KIT.md — never reassign them.
   ========================================================================== */
:root{
  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --surface-2:#EEF0F4;
  --text:#12141A;
  --muted:#565F6E;
  --muted-2:#8891A0;
  --hair:rgba(18,20,26,0.09);
  --hair-strong:rgba(18,20,26,0.16);

  --pay:#C6672A;      --pay-dim:rgba(198,103,42,0.12);
  --id:#2A56C6;        --id-dim:rgba(42,86,198,0.10);
  --priv:#7A4FC0;      --priv-dim:rgba(122,79,192,0.10);
  --green:#1F9D55;     --green-dim:rgba(31,157,85,0.12);

  --line-a:#5C8A99; --line-b:#A69049; --line-c:#6E9469; --line-d:#A67B8C;

  --nav-bg:rgba(246,247,249,0.82);
  --btn-bg:#12141A;
  --btn-text:#FFFFFF;
  --shadow:rgba(18,20,26,0.10);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --nav-h:72px;
}

/* Dark tokens apply when the system prefers dark (unless the user has
   explicitly chosen light via the toggle), OR when the user has explicitly
   chosen dark regardless of system preference. See the theme-toggle button
   in nav and its script at the bottom of each page. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B0D11;
    --surface:#12151B;
    --surface-2:#171B23;
    --text:#EDEFF4;
    --muted:#9AA3B2;
    --muted-2:#6B7382;
    --hair:rgba(255,255,255,0.08);
    --hair-strong:rgba(255,255,255,0.16);

    --pay:#E8A059;      --pay-dim:rgba(232,160,89,0.14);
    --id:#6EA6F7;        --id-dim:rgba(110,166,247,0.14);
    --priv:#B48CF0;      --priv-dim:rgba(180,140,240,0.14);
    --green:#55D992;     --green-dim:rgba(85,217,146,0.14);

    --line-a:#7FB0C0; --line-b:#C9AE6A; --line-c:#8FBF86; --line-d:#C79FB0;

    --nav-bg:rgba(11,13,17,0.78);
    --btn-bg:#F5F7FA;
    --btn-text:#0B0D11;
    --shadow:rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0D11;
  --surface:#12151B;
  --surface-2:#171B23;
  --text:#EDEFF4;
  --muted:#9AA3B2;
  --muted-2:#6B7382;
  --hair:rgba(255,255,255,0.08);
  --hair-strong:rgba(255,255,255,0.16);

  --pay:#E8A059;      --pay-dim:rgba(232,160,89,0.14);
  --id:#6EA6F7;        --id-dim:rgba(110,166,247,0.14);
  --priv:#B48CF0;      --priv-dim:rgba(180,140,240,0.14);
  --green:#55D992;     --green-dim:rgba(85,217,146,0.14);

  --line-a:#7FB0C0; --line-b:#C9AE6A; --line-c:#8FBF86; --line-d:#C79FB0;

  --nav-bg:rgba(11,13,17,0.78);
  --btn-bg:#F5F7FA;
  --btn-text:#0B0D11;
  --shadow:rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--bg); color:var(--text);
  font-family:'Plus Jakarta Sans', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--id); color:#fff; }
.mono{ font-family:'IBM Plex Mono', monospace; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 32px; }
section{ padding:112px 0; }
h1,h2,h3{ font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; letter-spacing:-0.015em; line-height:1.15; }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--id); outline-offset:3px; border-radius:3px; }
code{ font-family:'IBM Plex Mono', monospace; }

/* ============================= NAV ============================= */
nav{
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--nav-h); }
.navmark{ display:flex; align-items:center; gap:9px; flex-shrink:0; text-decoration:none; }
.navmark svg{ display:block; }
.navmark span{ font-weight:700; font-size:16px; color:var(--text); }
.navlinks{ display:flex; align-items:center; gap:26px; font-size:14px; color:var(--muted); font-weight:500; }
.navlinks a{ text-decoration:none; white-space:nowrap; transition:color .15s ease; }
.navlinks a:hover{ color:var(--text); }
.navcta{ background:var(--btn-bg); color:var(--btn-text); padding:10px 18px; border-radius:var(--r-sm); font-weight:600; text-decoration:none; white-space:nowrap; }

.navtoggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:transparent; border:1px solid var(--hair-strong); border-radius:var(--r-sm); cursor:pointer; flex-shrink:0; }
.navtoggle span{ display:block; width:16px; height:1.5px; background:var(--text); margin:0 auto; transition:transform .2s ease, opacity .2s ease; }
.navtoggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; background:transparent; color:var(--muted); border:1px solid var(--hair-strong); border-radius:var(--r-sm); cursor:pointer; flex-shrink:0; }
.theme-toggle:hover{ color:var(--text); border-color:var(--muted-2); }
.theme-toggle svg{ display:block; }
.theme-toggle .icon-sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }

/* ============================= BUTTONS ============================= */
.btn{ font-weight:600; font-size:15px; padding:14px 24px; border-radius:var(--r-sm); border:none; cursor:pointer; text-decoration:none; display:inline-block; transition:transform .15s ease, opacity .15s ease; white-space:nowrap; }
.btn:active{ transform:scale(0.98); }
.btn-primary{ background:var(--btn-bg); color:var(--btn-text); }
.btn-primary:hover{ opacity:0.88; }
.btn-secondary{ background:transparent; color:var(--text); border:1px solid var(--hair-strong); }
.btn-secondary:hover{ border-color:var(--muted-2); }

/* ============================= HERO ============================= */
.hero{ padding:64px 0 88px; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(34px,4.6vw,54px); max-width:560px; margin-bottom:20px; }
.hero p.lede{ font-size:18px; color:var(--muted); max-width:480px; line-height:1.6; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

.hero-visual{
  position:relative; aspect-ratio:1/1; max-width:460px; margin:0 auto; width:100%;
  background:
    radial-gradient(circle at 50% 50%, var(--id-dim), transparent 42%),
    radial-gradient(circle at 38% 62%, var(--pay-dim), transparent 40%),
    radial-gradient(circle at 62% 62%, var(--priv-dim), transparent 40%);
}
.rail-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }

.map-line{ fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; opacity:0.85; }
.map-lines-bg .map-line{ stroke-width:4; opacity:0.4; }
.line-a{ stroke:var(--line-a); } .line-b{ stroke:var(--line-b); }
.line-c{ stroke:var(--line-c); } .line-d{ stroke:var(--line-d); }

.station{ r:4.5; fill:var(--surface); stroke-width:2.5; }
.station.line-a{ stroke:var(--line-a); } .station.line-b{ stroke:var(--line-b); }

.minor-ring{ r:7; fill:var(--surface); stroke:var(--text); stroke-width:1.5; opacity:0.55; }

.hub-ring{ fill:none; stroke:var(--text); stroke-width:3; opacity:0.85; }
.hub-disc{ fill:var(--surface); }

.gate-bar{ transform-origin:center; transform-box:fill-box; }
.gate-pay .gate-bar{ fill:var(--pay); }
.gate-id .gate-bar{ fill:var(--id); }
.gate-priv .gate-bar{ fill:var(--priv); }

.traveler{ opacity:0; }
.traveler.line-a{ fill:var(--line-a); } .traveler.line-b{ fill:var(--line-b); }
.tv-1, .tv-1b{ offset-path:path('M40 60 L140 60 L200 120 L200 200 L260 260 L340 260'); }
.tv-2, .tv-2b{ offset-path:path('M370 140 L260 140 L200 200 L140 260 L50 260'); }

@media (prefers-reduced-motion: no-preference){
  .traveler{ animation:travel-thru 6s linear infinite; }
  .tv-1{ animation-delay:0s; }    .tv-1b{ animation-delay:-3s; }
  .tv-2{ animation-delay:-1.5s; } .tv-2b{ animation-delay:-4.5s; }

  .gate-pay .gate-bar{ animation:gate-pulse 4s ease infinite; }
  .gate-id .gate-bar{ animation:gate-pulse 4s ease infinite; animation-delay:1.3s; }
  .gate-priv .gate-bar{ animation:gate-pulse 4s ease infinite; animation-delay:2.6s; }

  @keyframes travel-thru{
    0%{ offset-distance:0%; opacity:0; }
    6%{ opacity:0.9; }
    94%{ opacity:0.9; }
    100%{ offset-distance:100%; opacity:0; }
  }
  @keyframes gate-pulse{
    0%,15%,100%{ opacity:0.55; transform:scale(1); }
    7%{ opacity:1; transform:scale(1.35); }
  }
}
@media (prefers-reduced-motion: reduce){
  .traveler{ opacity:0.6; offset-distance:45%; }
  .gate-bar{ opacity:0.85; }
}

/* ============================= TRUST LOGO ROW ============================= */
.logos-row{ padding:36px 0 88px; }
.logos-row .label{ text-align:center; font-size:13px; color:var(--muted-2); margin-bottom:28px; font-weight:500; }
.logos-track{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:44px 56px; }
.logos-track .logo-pair{ display:inline-flex; align-items:center; height:24px; width:auto; }
.logos-track img{ height:24px; width:auto; opacity:0.68; }
.logos-track img.on-dark{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logos-track img.on-light{ display:none; }
  :root:not([data-theme="light"]) .logos-track img.on-dark{ display:block; }
}
:root[data-theme="dark"] .logos-track img.on-light{ display:none; }
:root[data-theme="dark"] .logos-track img.on-dark{ display:block; }

/* ============================= EDITORIAL / MANIFESTO ============================= */
.manifesto{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--surface); }
.manifesto .wrap{ max-width:760px; text-align:center; }
.manifesto h2{ font-size:clamp(26px,3.6vw,38px); margin-bottom:22px; }
.manifesto p{ font-size:17px; color:var(--muted); line-height:1.7; }
.manifesto p strong{ color:var(--text); font-weight:600; }

/* ============================= SECTION HEADS ============================= */
.sec-head{ margin-bottom:52px; max-width:620px; }
.sec-head h2{ font-size:32px; margin-bottom:14px; }
.sec-head p{ color:var(--muted); font-size:16px; line-height:1.6; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ============================= ALTERNATIVES (3-cell comparison) ============================= */
.alt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:20px; }
.alt-cell{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md); padding:30px 26px; }
.alt-cell h3{ font-size:17px; margin-bottom:10px; }
.alt-cell p{ font-size:14px; color:var(--muted); line-height:1.6; }
.alt-cell .x{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:var(--surface-2); color:var(--muted-2); font-size:14px; margin-bottom:16px; }
.alt-lead{ background:var(--text); color:var(--bg); border-radius:var(--r-md); padding:30px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.alt-lead p{ font-size:16px; line-height:1.55; max-width:640px; }
.alt-lead strong{ font-weight:700; }
.alt-lead .check{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--green); color:#08170F; font-size:16px; flex-shrink:0; }

/* ============================= STEPS ============================= */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.step{ padding:0; }
.step .num{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:var(--surface-2); font-size:14px; font-weight:700; margin-bottom:20px; }
.step h3{ font-size:19px; margin-bottom:10px; }
.step p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin-bottom:14px; }
.step .stat{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:6px 14px; display:inline-block; }

/* ============================= THREE PARTS (bento) ============================= */
.parts-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.part{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-md); padding:30px 26px; position:relative; overflow:hidden; }
.part.pay::before, .part.id::before, .part.priv::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; }
.part.pay::before{ background:var(--pay); } .part.id::before{ background:var(--id); } .part.priv::before{ background:var(--priv); }
.part .badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px; margin-bottom:18px; }
.part.pay .badge{ background:var(--pay-dim); color:var(--pay); }
.part.id .badge{ background:var(--id-dim); color:var(--id); }
.part.priv .badge{ background:var(--priv-dim); color:var(--priv); }
.part h3{ font-size:19px; margin-bottom:10px; }
.part p{ font-size:14.5px; color:var(--muted); line-height:1.65; }
.part ul{ list-style:none; }
.part li{ font-size:14.5px; color:var(--muted); line-height:1.8; padding-left:20px; position:relative; margin-bottom:6px; }
.part li::before{ content:"–"; position:absolute; left:0; color:var(--muted-2); }
.part.wide{ grid-column:1 / -1; }

/* ============================= DASHBOARD MOCK ============================= */
.dash-mock{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 20px 50px -20px var(--shadow); }
.dash-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--hair); }
.dash-head .title{ font-weight:700; font-size:15px; }
.dash-head .title span{ color:var(--muted); font-weight:400; }
.dash-badge{ font-family:'IBM Plex Mono',monospace; font-size:11px; padding:4px 10px; border-radius:20px; background:var(--green-dim); color:var(--green); }
.dash-table{ width:100%; border-collapse:collapse; font-size:13px; }
.dash-table th{ text-align:left; font-weight:600; font-size:11.5px; color:var(--muted-2); padding:12px 24px; border-bottom:1px solid var(--hair); text-transform:uppercase; letter-spacing:0.04em; }
.dash-table td{ padding:14px 24px; border-bottom:1px solid var(--hair); color:var(--muted); }
.dash-table tr:last-child td{ border-bottom:none; }
.dash-table td.agent{ color:var(--text); font-weight:600; }
.dash-pill{ font-family:'IBM Plex Mono',monospace; font-size:11px; padding:3px 10px; border-radius:20px; }
.dash-pill.ok{ background:var(--green-dim); color:var(--green); }
.dash-pill.warn{ background:var(--priv-dim); color:var(--priv); }
.dash-mono{ font-family:'IBM Plex Mono',monospace; font-size:12px; }

/* ============================= TRUST GRID ============================= */
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.trust-cell{ padding:0; }
.trust-cell .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); margin-bottom:16px; }
.trust-cell h4{ font-size:16px; font-weight:700; margin-bottom:8px; }
.trust-cell p{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.trust-cell small{ display:block; margin-top:8px; color:var(--muted-2); font-size:12px; }

/* ============================= DEVELOPER CODE BLOCK ============================= */
.dev-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.dev-copy p{ font-size:15px; color:var(--muted); line-height:1.7; margin-bottom:16px; }
.dev-copy a.inline-link{ color:var(--id); font-weight:600; text-decoration:none; }
.dev-copy a.inline-link:hover{ text-decoration:underline; }
.codeblock{ background:#12141A; color:#D8DCE4; border-radius:var(--r-md); padding:24px 26px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; line-height:1.85; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
.codeblock .k{ color:#8891A0; }
.codeblock .v{ color:#EDEFF4; }
.codeblock .c-pay{ color:#E8A059; }
.codeblock .c-id{ color:#6EA6F7; }
.codeblock .c-priv{ color:#B48CF0; }
.codeblock .c3{ color:#6B7382; }

/* ============================= CALLOUT ============================= */
.callout{ background:var(--surface); border:1px solid var(--hair); border-left:3px solid var(--id); border-radius:var(--r-md); padding:24px 28px; margin:28px 0; }
.callout.c-pay{ border-left-color:var(--pay); }
.callout.c-priv{ border-left-color:var(--priv); }
.callout .cap{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted-2); margin-bottom:8px; }
.callout p{ font-size:14.5px; color:var(--muted); line-height:1.65; }
.callout p:last-child{ margin-bottom:0; }
.callout a{ color:var(--id); }

/* ============================= ONBOARDING (connected step list) ============================= */
.onboard{ max-width:600px; margin:0 auto; text-align:left; }
.onboard-step{ display:flex; gap:20px; padding-bottom:32px; position:relative; }
.onboard-step:last-child{ padding-bottom:0; }
.onboard-step:not(:last-child)::before{ content:""; position:absolute; left:19px; top:40px; bottom:4px; width:2px; background:var(--hair-strong); }
.onboard-step .num{ flex-shrink:0; width:40px; height:40px; border-radius:50%; background:var(--surface); border:1px solid var(--hair-strong); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; position:relative; z-index:1; }
.onboard-step .body{ padding-top:6px; }
.onboard-step .body h3{ font-size:17px; margin-bottom:6px; }
.onboard-step .body p{ font-size:14.5px; color:var(--muted); line-height:1.6; margin-bottom:10px; }
.onboard-step .snippet{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; background:var(--surface-2); border:1px solid var(--hair); padding:8px 13px; border-radius:8px; display:inline-block; color:var(--muted); }
.onboard-cta{ margin-top:40px; padding-top:36px; border-top:1px solid var(--hair); text-align:center; }
.onboard-cta p{ color:var(--muted); font-size:15px; margin-bottom:22px; }
.onboard-cta .fallback{ font-size:13px; color:var(--muted-2); margin-top:18px; }
.onboard-cta .fallback code{ background:var(--surface-2); border:1px solid var(--hair); padding:2px 8px; border-radius:6px; }

/* ============================= FINAL CTA ============================= */
.final{ text-align:center; padding:120px 0; background:var(--surface); border-top:1px solid var(--hair); }
.final h2{ font-size:clamp(28px,4.2vw,42px); max-width:600px; margin:0 auto 18px; }
.final p{ color:var(--muted); font-size:16px; margin-bottom:36px; }
.final .btn{ font-size:16px; padding:16px 30px; }
.final .fallback{ font-size:13px; color:var(--muted-2); margin-top:20px; }
.final .fallback code{ background:var(--surface-2); border:1px solid var(--hair); padding:2px 8px; border-radius:6px; }

/* ============================= FOOTER ============================= */
footer{ padding:44px 0; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
footer p{ font-size:12px; color:var(--muted-2); letter-spacing:0.01em; }
footer .foot-links{ display:flex; gap:22px; flex-wrap:wrap; }
footer .foot-links a{ font-size:13px; color:var(--muted-2); text-decoration:none; }
footer .foot-links a:hover{ color:var(--muted); }

/* ============================= SUBPAGE HERO ============================= */
.crumb{ font-size:13px; color:var(--muted-2); margin-bottom:18px; }
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--text); }
.page-hero{ padding:56px 0 8px; }
.page-hero h1{ font-size:clamp(30px,4.4vw,44px); line-height:1.15; max-width:760px; margin-bottom:20px; }
.page-hero p.lede{ font-size:17px; color:var(--muted); max-width:640px; line-height:1.6; margin-bottom:32px; }
.badge-pill{ display:inline-flex; align-items:center; font-size:12.5px; font-weight:600; padding:6px 14px; border-radius:999px; margin-bottom:20px; background:var(--surface-2); color:var(--muted); }

/* ============================= LEGAL (long-form prose) ============================= */
.legal{ max-width:720px; padding:0 0 100px; }
.legal .updated{ font-size:13px; color:var(--muted-2); margin-bottom:48px; }
.legal h2{ font-size:22px; margin:48px 0 16px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:16px; margin:28px 0 10px; color:var(--text); }
.legal p{ font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:16px; }
.legal ul, .legal ol{ margin:0 0 16px 22px; }
.legal li{ font-size:15px; color:var(--muted); line-height:1.75; margin-bottom:8px; }
.legal a{ color:var(--id); }
.legal strong{ color:var(--text); font-weight:600; }

code, p code, li code{ font-family:'IBM Plex Mono',monospace; font-size:0.88em; color:var(--text); background:var(--surface-2); padding:1px 6px; border-radius:4px; }

/* ============================= RESPONSIVE ============================= */
@media (max-width:960px){
  .wrap{ padding:0 24px; }
  section{ padding:80px 0; }
  .hero{ padding:40px 0 60px; }
  .hero-grid{ grid-template-columns:1fr; gap:44px; }
  .hero h1, .hero p.lede{ max-width:100%; }
  .hero-visual{ order:-1; max-width:340px; }
  .final{ padding:88px 0; }
  .dev-grid{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .alt-grid, .steps, .parts-grid{ grid-template-columns:1fr; }
  .trust-grid{ grid-template-columns:1fr 1fr; }
  .dash-table{ font-size:12px; }
  .dash-table th, .dash-table td{ padding:10px 16px; }
}

@media (max-width:760px){
  .navlinks{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--hair);
    max-height:0; overflow:hidden; opacity:0;
    transition:max-height .25s ease, opacity .2s ease;
  }
  .navlinks.open{ max-height:440px; opacity:1; overflow-y:auto; }
  .navlinks a, .navlinks .navcta{ padding:16px 24px; border-top:1px solid var(--hair); font-size:14px; }
  .navlinks a:first-child{ border-top:none; }
  .navlinks .navcta{ text-align:center; margin:12px 24px 16px; border-radius:var(--r-sm); border-top:none; display:block; }
  .navlinks .theme-toggle{ margin:14px 24px 0; }
  .navtoggle{ display:flex; }

  .alt-lead{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:560px){
  .wrap{ padding:0 20px; }
  section{ padding:64px 0; }
  .final{ padding:72px 0; }
  .sec-head{ margin-bottom:36px; }
  .sec-head h2{ font-size:25px; }
  .hero-ctas .btn{ flex:1 1 100%; text-align:center; }
  .trust-grid{ grid-template-columns:1fr; }
  .logos-track{ gap:28px 32px; }
  .dash-table{ display:block; overflow-x:auto; white-space:nowrap; }
  footer .wrap{ flex-direction:column; align-items:flex-start; }
}