/* ============================================================================
 * Dogware Studio: "rays of light" production stylesheet  (#99876 S2)
 *
 * The APPROVED direction (#101276, operator decision #4338 A, 2026-07-25):
 * dark ground + four saturated role hues ("rays of light"), each hue with ONE
 * job sitewide. Ported verbatim from the ratified render
 * brand/direction/studio-spec-sheet/homepage.html and EXTENDED to cover the
 * real site's functional components (mobile nav, the working quote form, the
 * sticky CTA, skip-link, portfolio) in the same visual language.
 *
 * ROLE, not decoration. A hue used outside its role is a defect:
 *   --create  #FFC94A  brand / logo / visual language           12.59:1 on ink
 *   --build   #3B9EFF  sites / WordPress / stores                 6.91:1
 *   --perform #00D18F  speed / SEO / every NUMBER on the site     9.66:1
 *   --action  #FF5C9B  clickable only (never decorative)          6.66:1
 * All ratios AA, measured with contrast.py against --ink.
 *
 * NO gradients (operator 2026-08-03). Logical CSS only (inset/start/end) so RTL
 * he mirrors for free; Latin brand tokens + numerals stay LTR via .lat/.run.
 * ========================================================================== */

:root{
  --ink:#0E0E10; --sheet:#131316; --card:#17171B; --line:#242428; --line-2:#33333a;
  --text:#F7F7F9; --muted:#9C9CA4; --faint:#6b6b74; --dim:#5d5d66;
  --create:#FFC94A;  --build:#3B9EFF;  --perform:#00D18F;  --action:#FF5C9B;
  --maxw:1280px; --rail:58px;
  --font:"Rubik",sans-serif; --font-he:"Heebo","Rubik",sans-serif; --font-mono:"Space Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--font-he);
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-inline-size:100%;block-size:auto;display:block}
:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-radius:4px}

/* ---- bidi utilities (from the ratified render, keep verbatim) ------------- */
.lat{unicode-bidi:isolate}
.run{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ---- skip link ----------------------------------------------------------- */
.skip-link{position:absolute;inset-block-start:-60px;inset-inline-start:12px;z-index:200;
  background:var(--action);color:var(--ink);font-weight:800;padding:10px 16px;border-radius:9px;
  transition:inset-block-start .15s}
.skip-link:focus{inset-block-start:12px}

.wrap{max-inline-size:var(--maxw);margin-inline:auto;padding-inline:var(--rail)}

/* ---- the sheet: hairline column grid, always visible --------------------- */
.sheetgrid{position:absolute;inset:0;margin-inline:auto;max-inline-size:var(--maxw);
  padding-inline:var(--rail);pointer-events:none}
.sheetgrid i{position:absolute;inset-block:0;inline-size:1px;background:var(--line)}
.rail{position:absolute;inset-block-start:0;inset-inline-end:14px;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.16em;color:var(--dim);writing-mode:vertical-rl;
  text-orientation:mixed;padding-block-start:26px}

/* ===== NAV ================================================================= */
.nav{position:sticky;inset-block-start:0;z-index:60;background:rgba(14,14,16,.94);
  border-block-end:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;block-size:74px}
.brand{display:flex;align-items:center;gap:11px}
.mk{inline-size:26px;block-size:26px;border:2px solid var(--text);border-radius:7px;position:relative;flex:none}
.mk::after{content:"";position:absolute;inset-block-start:5px;inset-inline-start:5px;
  inline-size:12px;block-size:12px;background:var(--action);border-radius:3px}
.brand .nm{font-family:var(--font);font-weight:900;font-size:19px;letter-spacing:-.02em}
.brand .sub{font-size:12.5px;color:var(--muted);font-weight:600;margin-inline-start:2px}
.navmid{display:flex;align-items:center;gap:28px;font-size:15px;color:var(--muted);font-weight:600}
.navmid a:hover{color:var(--text)}
.navend{display:flex;align-items:center;gap:16px}
.sheetno{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--dim)}
.lang-toggle{border:1px solid var(--line-2);border-radius:8px;padding:7px 12px;font-family:var(--font);
  font-weight:700;font-size:13px;color:var(--muted)}
.lang-toggle:hover{color:var(--text);border-color:var(--muted)}
.cta-a{background:var(--action);color:var(--ink);font-weight:800;font-size:15px;
  padding:11px 20px;border-radius:9px;display:inline-block}
.cta-a:hover{background:#ff74ab}
/* mobile hamburger */
.nav-toggle{display:none;inline-size:44px;block-size:44px;border:1px solid var(--line-2);
  border-radius:10px;background:transparent;position:relative;cursor:pointer;flex:none}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;
  inline-size:20px;block-size:2px;background:var(--text);inset-inline-start:11px;transition:.2s}
.nav-toggle-bars{inset-block-start:21px}
.nav-toggle-bars::before{inset-block-start:-6px}
.nav-toggle-bars::after{inset-block-start:6px}

/* ===== HERO =============================================================== */
.hero{position:relative;border-block-end:1px solid var(--line);overflow:hidden;background:var(--sheet)}
.hero .wrap{position:relative;padding-block:78px 68px;display:grid;
  grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.kicker{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;margin-block-end:24px;flex-wrap:wrap}
.kicker s{inline-size:26px;block-size:1px;background:var(--line-2);display:block;text-decoration:none}
h1{font-family:var(--font-he);font-weight:900;font-size:60px;line-height:1.1;letter-spacing:-.025em}
h1 .c{color:var(--create)} h1 .b{color:var(--build)} h1 .p{color:var(--perform)}
.lede{margin-block-start:22px;font-size:18.5px;line-height:1.7;color:var(--muted);max-inline-size:44ch}
.lede b{color:var(--text);font-weight:700}
.proofline{margin-block-start:28px;padding-block-start:20px;border-block-start:1px solid var(--line);
  font-size:15.5px;color:var(--muted);line-height:2.1;max-inline-size:48ch}
.proofline em{font-family:var(--font-mono);font-style:normal;font-weight:700;color:var(--perform);
  font-size:16.5px;padding-inline:2px}
.acts{display:flex;gap:12px;margin-block-start:30px;align-items:center;flex-wrap:wrap}
.btn{background:var(--action);color:var(--ink);font-weight:800;font-size:16.5px;
  padding:15px 28px;border-radius:11px;display:inline-flex;gap:9px;align-items:center;cursor:pointer}
.btn:hover{background:#ff74ab}
.btn-ghost{border:1px solid var(--line-2);color:var(--text);font-weight:700;font-size:16.5px;
  padding:14px 24px;border-radius:11px;display:inline-flex;align-items:center;background:transparent;cursor:pointer}
.btn-ghost:hover{background:rgba(247,247,249,.06)}

/* the specimen frame */
.frame{position:relative;border:1px solid var(--line-2);border-radius:16px;background:var(--ink);padding:26px 24px 22px}
.frame .tick{position:absolute;inline-size:9px;block-size:9px;border:1px solid var(--build);opacity:.75}
.frame .t1{inset-block-start:-1px;inset-inline-start:-1px;border-block-end:0;border-inline-end:0}
.frame .t2{inset-block-start:-1px;inset-inline-end:-1px;border-block-end:0;border-inline-start:0}
.frame .t3{inset-block-end:-1px;inset-inline-start:-1px;border-block-start:0;border-inline-end:0}
.frame .t4{inset-block-end:-1px;inset-inline-end:-1px;border-block-start:0;border-inline-start:0}
.frame .cap{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.14em;color:var(--faint);margin-block-end:18px;text-transform:uppercase}
.flow{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:8px}
.arrowcell{display:grid;place-items:center;color:var(--build);font-family:var(--font-mono);font-size:18px}
.plate{border:1px solid var(--line);border-radius:11px;background:var(--card);padding:12px;block-size:196px;
  display:flex;flex-direction:column;gap:7px}
.plate .pt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:var(--faint);
  text-transform:uppercase;margin-block-end:3px}
.wire{block-size:9px;background:var(--line-2);border-radius:2px}
.wire.w1{inline-size:62%} .wire.w2{inline-size:88%} .wire.w3{inline-size:74%}
.wirebar{block-size:26px;border:1px dashed var(--build);border-radius:5px;opacity:.85}
.wirerow{display:flex;gap:6px}.wirerow>span{flex:1;block-size:34px;border:1px dashed var(--line-2);border-radius:5px}
.live .lh{font-weight:900;font-size:15px;letter-spacing:-.02em}
.live .lp{block-size:7px;background:var(--line-2);border-radius:2px}
.live .lbtn{background:var(--action);color:var(--ink);font-weight:800;font-size:10px;padding:6px 10px;border-radius:6px;align-self:flex-start}
.live .lrow{display:flex;gap:6px;margin-block-start:auto}
.live .lrow>span{flex:1;block-size:36px;border-radius:6px}
.dimn{display:flex;align-items:center;gap:10px;margin-block-start:16px;font-family:var(--font-mono);
  font-size:10.5px;color:var(--faint);letter-spacing:.1em}
.dimn s{flex:1;block-size:1px;background:var(--line-2);display:block;position:relative;text-decoration:none}
.dimn s::before,.dimn s::after{content:"";position:absolute;inset-block-start:-3px;inline-size:1px;block-size:7px;background:var(--line-2)}
.dimn s::before{inset-inline-start:0}.dimn s::after{inset-inline-end:0}

/* ===== SECTION SHELL ====================================================== */
section.blk{position:relative;border-block-end:1px solid var(--line);padding-block:72px}
.head{margin-block-end:38px;max-inline-size:62ch}
.sect{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;color:var(--faint);
  text-transform:uppercase;display:flex;align-items:center;gap:10px}
.sect b{color:var(--muted);font-weight:700}
h2{font-family:var(--font-he);font-weight:900;font-size:38px;letter-spacing:-.025em;line-height:1.18;margin-block-start:14px}
.head p{color:var(--muted);font-size:16.5px;max-inline-size:52ch;margin-block-start:12px;line-height:1.7}
.head p strong,.head p b{color:var(--text);font-weight:700}
.ask{display:inline-flex;align-items:center;gap:9px;margin-block-start:18px;padding:8px 14px;
  border:1px solid var(--line-2);border-radius:999px;font-size:14px;color:var(--muted)}
.ask i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--create);display:block;flex:none}

/* ===== SERVICES as SPECIMENS ============================================== */
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sp{border:1px solid var(--line);border-radius:15px;background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.sp .win{block-size:132px;background:var(--ink);border-block-end:1px solid var(--line);padding:16px;position:relative;overflow:hidden}
.sp .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.sp .fam{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fam);font-weight:700}
.sp h3{font-weight:800;font-size:19px;margin-block-start:10px;line-height:1.35}
.sp .d{font-size:14.5px;color:var(--muted);margin-block-start:9px;line-height:1.65;flex:1}
.sp .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-block-start:16px;
  padding-block-start:14px;border-block-start:1px solid var(--line)}
.sp .price{font-family:var(--font-mono);font-weight:700;font-size:21px;display:flex;align-items:baseline;gap:6px}
.sp .price i{font-family:var(--font-he);font-style:normal;font-size:14px;font-weight:600;color:var(--muted)}
.sp .mkt{font-family:var(--font-mono);font-size:12px;color:var(--faint);text-decoration:line-through;unicode-bidi:isolate}
/* specimen internals */
.lgogrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:7px;block-size:100%}
.lgogrid div{border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;position:relative}
.lgogrid .ctx{font-family:var(--font-mono);font-size:7.5px;color:var(--dim);position:absolute;
  inset-block-end:4px;inset-inline-end:5px;letter-spacing:.08em;direction:ltr}
.m2{position:relative;border-radius:5px;border:2px solid var(--create);flex:none}
.m2::after{content:"";position:absolute;inset-block-start:16%;inset-inline-start:16%;inline-size:40%;block-size:40%;background:var(--create);border-radius:2px}
.wp{block-size:100%;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column}
.wp .bar{block-size:16px;background:var(--build);display:flex;align-items:center;gap:4px;padding-inline:6px}
.wp .bar u{inline-size:5px;block-size:5px;border-radius:50%;background:rgba(14,14,16,.55);display:block}
.wp .cnv{flex:1;padding:9px;display:flex;flex-direction:column;gap:6px;background:var(--card)}
.wp .b{block-size:8px;background:var(--line-2);border-radius:2px}
.wp .bcols{display:flex;gap:6px;flex:1}
.wp .bcols span{flex:1;border:1px dashed var(--line-2);border-radius:4px}
.serp{block-size:100%;display:flex;flex-direction:column;gap:9px;justify-content:center}
.serp .u{font-family:var(--font-mono);font-size:10px;color:var(--faint);unicode-bidi:isolate}
.serp .t{color:var(--perform);font-weight:700;font-size:14px}
.serp .s{block-size:6px;background:var(--line-2);border-radius:2px}
.serp .s.a{inline-size:92%}.serp .s.b{inline-size:64%}
.serp .cwv{display:flex;gap:6px;align-items:center;margin-block-start:4px;font-family:var(--font-mono);
  font-size:10px;color:var(--perform);unicode-bidi:isolate}
.serp .cwv u{inline-size:8px;block-size:8px;border-radius:50%;background:var(--perform);display:block}
.cart{block-size:100%;display:flex;flex-direction:column;gap:6px;justify-content:center}
.cart .ln{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.cart .th{inline-size:22px;block-size:22px;border-radius:5px;background:var(--line-2);flex:none}
.cart .nmx{flex:1;display:flex;flex-direction:column;gap:4px;max-inline-size:96px}
.cart .nmx u{block-size:6px;background:var(--line-2);border-radius:2px;display:block;text-decoration:none}
.cart .nmx u:last-child{inline-size:46%;background:var(--line);block-size:5px}
.cart .px{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);unicode-bidi:isolate;flex:none;margin-inline-start:auto}
.cart .qty{font-family:var(--font-mono);font-size:9.5px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:2px 5px;flex:none;direction:ltr}
.cart .tot{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--build);padding:2px 9px 0}
.cart .tot span{unicode-bidi:isolate}
.cart .tot span:first-child{direction:ltr}
.spark{block-size:100%;display:flex;align-items:flex-end;gap:5px;padding-block-end:6px}
.spark i{flex:1;background:var(--perform);border-radius:2px 2px 0 0;display:block;opacity:.85}
.tspec{block-size:100%;display:flex;flex-direction:column;justify-content:center;gap:4px}
.tspec .big{font-family:var(--font);font-weight:900;font-size:34px;letter-spacing:-.03em;color:var(--create);line-height:1}
.tspec .sub{font-family:var(--font-mono);font-size:10px;color:var(--faint);letter-spacing:.14em;unicode-bidi:isolate}
.tspec .swr{display:flex;gap:5px;margin-block-start:8px}
.tspec .swr u{inline-size:22px;block-size:10px;border-radius:3px;display:block}
/* full price list (hybrid: keeps the live page's rich pricing under the specimens) */
.pricelist{margin-block-start:26px;border:1px solid var(--line);border-radius:15px;background:var(--card);overflow:hidden}
.pricelist summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;font-weight:800;font-size:16.5px}
.pricelist summary::-webkit-details-marker{display:none}
.pricelist summary .chev{font-family:var(--font-mono);color:var(--action);font-size:13px}
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block-start:1px solid var(--line)}
.pl-item{background:var(--card);padding:16px 22px}
.pl-item .pn{font-weight:700;font-size:15.5px}
.pl-item .pp{font-family:var(--font-mono);font-weight:700;font-size:15px;margin-block-start:6px;display:flex;gap:8px;align-items:baseline}
.pl-item .pp .mkt{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);text-decoration:line-through}
.pl-item .pd{font-size:13.5px;color:var(--muted);margin-block-start:6px;line-height:1.6}

/* ===== PROCESS: stations + gates ========================================== */
.track{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--card);display:grid;grid-template-columns:repeat(4,1fr)}
.stn{padding:26px 22px 22px;border-inline-start:1px solid var(--line);position:relative;display:flex;flex-direction:column}
.stn:first-child{border-inline-start:0}
.stn .no{font-family:var(--font-mono);font-weight:700;font-size:12px;color:var(--fam);letter-spacing:.14em;unicode-bidi:isolate}
.stn h4{font-weight:800;font-size:17.5px;margin-block-start:12px}
.stn p{font-size:14px;color:var(--muted);margin-block-start:8px;line-height:1.65}
.stn .need{margin-block-start:16px;padding-block-start:12px;border-block-start:1px dashed var(--line-2);font-size:13px;color:#77777f;line-height:1.6;flex:1}
.stn .need b{color:var(--muted);font-weight:700;display:block;font-size:10.5px;font-family:var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;margin-block-end:6px;unicode-bidi:isolate}
.gate{margin-block-start:18px;padding:9px 12px;border:1px solid var(--fam);border-radius:8px;color:var(--fam);
  font-weight:800;font-size:12.5px;display:flex;align-items:center;gap:8px}
.gate u{font-size:11px;text-decoration:none;opacity:.85}
.track .stn:last-child .gate{background:rgba(0,209,143,.09)}

/* ===== WORK: editorial rows =============================================== */
.rows{border-block-start:1px solid var(--line)}
.rw{display:grid;grid-template-columns:150px 1.1fr 1fr 150px;gap:26px;align-items:center;padding-block:22px;border-block-end:1px solid var(--line)}
.rw .chip{block-size:64px;border-radius:10px;display:grid;place-items:center;font-family:var(--font);
  font-weight:900;font-size:15px;color:var(--ink);letter-spacing:-.02em;unicode-bidi:isolate}
.rw .nm{font-weight:800;font-size:18px}
.rw .kd{font-size:13.5px;color:var(--muted);margin-block-start:6px}
.rw .out{font-size:14.5px;color:var(--muted);line-height:1.6}
.rw .out em{font-family:var(--font-mono);font-style:normal;font-weight:700;color:var(--perform);unicode-bidi:isolate}
.rw .lk{font-family:var(--font-mono);font-size:12px;color:var(--action);font-weight:700;text-align:start;unicode-bidi:isolate}
.rw a.lk:hover{text-decoration:underline}

/* ===== CLOSE / QUOTE ====================================================== */
.close{padding-block:72px;border-block-end:1px solid var(--line);background:var(--sheet);position:relative}
.closegrid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}
.closenote{font-family:var(--font-mono);font-size:11px;color:var(--faint);letter-spacing:.1em;margin-block-start:18px}
/* the real working quote form, in the dark-rays language */
.quote-form{display:flex;flex-direction:column;gap:16px;border:1px solid var(--line);border-radius:15px;
  background:var(--card);padding:26px 24px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14px;font-weight:600;color:var(--text)}
.field input,.field select,.field textarea{background:var(--ink);border:1px solid var(--line-2);border-radius:10px;
  color:var(--text);font:inherit;font-size:15.5px;padding:12px 14px;inline-size:100%}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--build);outline:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--action)}
.field textarea{min-block-size:96px;resize:vertical}
.field .hint{font-size:12.5px;color:var(--faint);line-height:1.5}
.field .hint a{color:var(--build)}
.hp-field{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.quote-form .btn{justify-content:center;font-size:16px}
.form-status{font-size:14px;color:var(--muted);min-block-size:1em}
.form-status.is-ok{color:var(--perform)}
.form-status.is-err{color:var(--action)}
.error-summary{border:1px solid var(--action);border-radius:11px;padding:14px 18px;background:rgba(255,92,155,.06)}
.error-summary h3{color:var(--action);font-size:15px;margin-block-end:8px}
.error-summary a{color:var(--action)}
/* the "5 questions" preview panel */
.qs{border:1px solid var(--line);border-radius:15px;background:var(--card);padding:8px 0;overflow:hidden;margin-block-start:22px}
.qs .q{display:flex;align-items:center;gap:13px;padding:13px 20px;border-block-end:1px solid var(--line);font-size:15px}
.qs .q:last-child{border-block-end:0}
.qs .q u{font-family:var(--font-mono);font-size:11px;color:var(--faint);inline-size:20px;flex:none;text-decoration:none;unicode-bidi:isolate}
.qs .q b{font-weight:600;color:var(--text)}
.steps{margin-block-start:20px}
.steps h3{font-size:15px;font-weight:800;margin-block-end:12px}
.steps ol{list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.steps li{display:flex;gap:12px;font-size:14px;color:var(--muted)}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--font-mono);font-weight:700;
  color:var(--action);inline-size:22px;block-size:22px;border:1px solid var(--line-2);border-radius:6px;
  display:grid;place-items:center;flex:none;font-size:12px}
.steps li strong{color:var(--text);font-weight:700;display:block;margin-block-end:2px}
.steps-note{font-size:13px;color:var(--faint);margin-block-start:12px}
.steps-note a{color:var(--build)}

/* ===== PORTFOLIO ========================================================== */
.folio{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px}
.folio figure{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card)}
.folio img{aspect-ratio:880/550;object-fit:cover;inline-size:100%}
.folio figcaption{padding:16px 18px;font-size:13.5px;color:var(--muted);line-height:1.55}
.folio figcaption strong{display:block;color:var(--text);font-weight:800;font-size:15.5px;margin-block-end:4px}
.folio .folio-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--action);display:block;margin-block-end:6px}
.folio a.folio-link:hover figcaption strong{color:var(--action)}

/* ===== STICKY CTA (mobile) ================================================ */
.sticky-cta{position:fixed;inset-block-end:0;inset-inline:0;z-index:70;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(14,14,16,.94);border-block-start:1px solid var(--line);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);display:none}
.sticky-cta .btn{inline-size:100%;justify-content:center}

/* ===== FOOTER (spec-sheet strip; group endorsement bar keeps its own css) == */
footer.site-foot{padding-block:34px;color:#77777f;font-size:13.5px;border-block-start:1px solid var(--line)}
footer.site-foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.dots{display:flex;gap:6px}
.dots i{inline-size:10px;block-size:10px;border-radius:3px;display:block}

/* ===== MOBILE ============================================================= */
@media (max-width:860px){
  :root{--rail:20px}
  .sheetno,.rail,.sheetgrid{display:none}
  .nav-toggle{display:block}
  /* nav collapses into a panel toggled by [data-nav-toggle] (site.js sets .nav-open on the header) */
  .navmid{position:fixed;inset-block-start:74px;inset-inline:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--ink);border-block-end:1px solid var(--line);padding:8px 20px 16px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.18s;z-index:59}
  .nav.nav-open .navmid{transform:none;opacity:1;pointer-events:auto}
  .navmid a{padding:13px 4px;border-block-end:1px solid var(--line);font-size:16px}
  .kicker s,.kicker .sep,.kicker .k3{display:none}
  .kicker{font-size:10.5px;gap:8px}
  .hero .wrap{grid-template-columns:1fr;gap:40px;padding-block:44px 40px}
  h1{font-size:37px} h2{font-size:28px}
  .lede{font-size:17px}
  .specs{grid-template-columns:1fr}
  .pl-grid{grid-template-columns:1fr}
  .track{grid-template-columns:1fr}
  .stn{border-inline-start:0;border-block-start:1px solid var(--line)}
  .stn:first-child{border-block-start:0}
  .rw{grid-template-columns:96px 1fr;gap:16px;row-gap:12px}
  .rw .out,.rw .lk{grid-column:1 / -1}
  .rw .chip{block-size:52px}
  .closegrid{grid-template-columns:1fr;gap:32px}
  .flow{grid-template-columns:1fr;gap:12px}
  .arrowcell{transform:rotate(90deg)}
  .sticky-cta{display:block}
  .acts .btn,.acts .btn-ghost{flex:1;justify-content:center}
}
@media (min-width:861px){
  .nav-toggle{display:none}
}