/* ==========================================================================
   BSAI — product pages (login / pricing / checkout)
   Shared sheet. Carries the foundry landing's typography, colour tokens and
   brand mark so the set reads as one site.

   ZERO external requests: fonts come from secret-pathways-assets/fonts.css
   (vendored, inline @font-face), the mark and the noise tile are local.
   Tokens below are copied verbatim from the landing's :root.
   ========================================================================== */

:root{
  --ink:#05070a;          /* page black */
  --ink-2:#0a0e12;        /* raised black */
  --bone:#dfe7e0;         /* the pale sage white of the wordmark */
  --bone-dim:#aab4ad;
  --muted:#78837c;
  /* the landing's --muted is tuned for text on bare ink; small text sitting on
     a panel or over the mark needs a lighter step to clear 4.5:1 */
  --muted-lite:#98a39c;
  --line:rgba(223,231,224,.13);
  --line-soft:rgba(223,231,224,.07);
  --vermilion:#e0231c;
  --ember:#ff5a3c;
  --gold:#c9a24a;
  --pad:clamp(20px, 3.4vw, 56px);
  --nav-h:84px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  /* surfaces for the reading column. The panel is deliberately close to
     opaque: the mark must never sit under a field label. */
  --panel:rgba(9,12,16,.9);
  --panel-solid:#0b0f13;
  --field:rgba(223,231,224,.045);
  --ok:#57b98a;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; overflow-x:clip }
html.nav-open, html.nav-open body{ overflow:hidden }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Onest',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-weight:300; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip; min-height:100svh;
}
::selection{ background:var(--vermilion); color:#fff }
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4{ font-weight:400; margin:0; letter-spacing:-.005em }
p{ margin:0 }
:focus-visible{ outline:1px solid var(--ember); outline-offset:3px }

/* ============================================================= atmosphere */
#grain{
  position:fixed; inset:-1px; z-index:60; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-repeat:repeat; background-size:180px 180px;
}
#vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:radial-gradient(125% 95% at 50% 42%, transparent 40%, rgba(2,4,6,.62) 100%);
}

/* ======================================================== brand field (3D)
   The ensō mark, extruded in Z and turned against the page, sitting in the
   backdrop behind the reading column. The extrusion is built from layers of the
   flat mono mark — one image, stepped back in Z — so the space between
   neighbours is a real wall rather than a painted offset. Layers are <img>, not
   CSS masks: a mask-image fetch is CORS-mode in Chrome and is refused outright
   from a file:// origin, which would leave the stencils as solid blocks.
   .bf-slab layers are injected by site.js; the face stays present without JS. */
.brandfield{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  contain:strict;
}
.brand3d{
  position:absolute; left:50%; top:50%;
  width:var(--bf-size, clamp(280px, 58vmin, 640px));
  height:var(--bf-size, clamp(280px, 58vmin, 640px));
  margin:calc(var(--bf-size, 58vmin) / -2) 0 0 calc(var(--bf-size, 58vmin) / -2);
  transform:translate3d(0, var(--bf-y, -20vh), 0);
  perspective:1100px; perspective-origin:50% 42%;
  /* Held well down in the backdrop: the mark is a surface the page is printed
     onto, not a graphic competing with the reading column. The blur is the
     depth cue — a hair of atmospheric falloff reads as "behind", where a crisp
     edge reads as "pasted on". */
  opacity:.5;
  filter:blur(.5px) saturate(.95);
  will-change:transform;
}
.brand3d .bf-stage{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(13deg) rotateY(-15deg) rotateZ(-3deg);
  transition:transform .9s var(--ease-out);
}
.bf-slab,.bf-emboss,.bf-key,.bf-face{
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain;
}
/* the walls: the same stencil stepped back in Z and slid down-right, each layer
   a little deeper in shadow, so the extruded side reads as one continuous
   surface lit from the upper left */
.bf-slab{
  filter:brightness(var(--bk, .35)) sepia(.42) saturate(2.3) hue-rotate(-10deg);
}
/* the front face: the real mark, brush strokes and all */
.bf-face{ transform:translateZ(1px); filter:saturate(1) brightness(1.1) }
/* a soft cast shadow, so the object reads as standing against the backdrop
   rather than pasted on it. Flat, not in the 3D stage: a shadow does not need
   the object's perspective, and sharing it shrank the silhouette. */
.bf-emboss{
  filter:brightness(0) blur(30px); opacity:.9;
  transform:translate3d(2.4%, 4.6%, 0) scale(1.015);
}
/* a faint key light on the upper-left rim: letterpress, not sticker */
.bf-key{
  filter:brightness(4.2) saturate(.28); opacity:.10;
  transform:translateZ(2px) translate3d(-.6%,-.7%,0);
}
/* the field feathers into the ink so the mark reads as printed into it */
.brandfield::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(44% 42% at 50% 40%,
    rgba(5,7,10,0) 0%, rgba(5,7,10,.34) 42%, rgba(5,7,10,.72) 62%, rgba(5,7,10,.94) 80%, rgba(5,7,10,1) 100%);
}

/* ============================================================== nav */
.nav{
  position:fixed; top:0; left:0; width:100%; height:var(--nav-h); z-index:50;
  display:flex; align-items:center; gap:24px; padding:0 var(--pad);
}
.nav::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(5,7,10,.86), rgba(5,7,10,.42) 62%, rgba(5,7,10,0));
  backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1);
  -webkit-mask-image:linear-gradient(#000 62%, transparent);
          mask-image:linear-gradient(#000 62%, transparent);
  opacity:.55; transition:opacity .5s linear;
}
.nav.stuck::before{ opacity:1 }
.nav::after{
  content:''; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px;
  background:var(--line-soft); opacity:0; transition:opacity .5s;
}
.nav.stuck::after{ opacity:1 }
.brand{ display:flex; align-items:center; gap:11px; flex:0 0 auto }
.brand-mark{ width:30px; height:30px; display:block; flex:0 0 auto }
.brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px }
.brand-tx b{ font-size:12px; font-weight:500; letter-spacing:.26em }
.brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.34em; color:var(--muted-lite) }
.nav-links{ display:flex; gap:clamp(16px,2.4vw,42px); margin-left:auto; align-items:center }
.nav-link{
  position:relative; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim); display:block; height:15px; line-height:15px; overflow:hidden;
}
.nav-link span{ display:block; height:15px; line-height:15px;
  transition:transform .55s var(--ease-out), color .3s }
.nav-link .alt{ position:absolute; inset:0; transform:translate3d(0,100%,0);
  color:var(--bone); letter-spacing:.32em }
.nav-link:hover span{ transform:translate3d(0,-100%,0) }
.nav-link:hover .alt{ transform:none }
.nav-link.on{ color:var(--bone) }
.nav-link.on::after{ content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--vermilion) }
.nav-cta{
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone); border:1px solid var(--line); border-radius:999px;
  padding:9px 18px; transition:border-color .35s, color .35s, background .35s;
  white-space:nowrap;
}
.nav-cta:hover{ border-color:rgba(224,35,28,.7); color:#fff; background:rgba(224,35,28,.14) }
.nav-burger{ display:none; margin-left:auto; width:26px; height:16px; position:relative; flex:0 0 auto }
.nav-burger i{ position:absolute; right:0; height:1.5px; background:var(--bone);
  transition:width .45s var(--ease-out), transform .45s var(--ease-out) }
.nav-burger i:nth-child(1){ top:4px; width:26px }
.nav-burger i:nth-child(2){ top:11px; width:17px }
.nav-burger.active i:nth-child(1){ top:7px; width:26px; transform:rotate(45deg) }
.nav-burger.active i:nth-child(2){ top:7px; width:26px; transform:rotate(-45deg) }

/* ============================================================== type */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim);
}
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--vermilion);
  box-shadow:0 0 10px var(--vermilion); flex:0 0 auto }
.mono{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase }
.display{ text-transform:uppercase; line-height:1.06; letter-spacing:-.012em; font-weight:400;
  text-shadow:0 2px 34px rgba(3,6,8,.72) }
.h-1{ font-size:clamp(30px,4.2vw,54px) }
.h-2{ font-size:clamp(24px,2.6vw,34px) }
.lede{ font-size:clamp(14px,1.02vw,17px); line-height:1.72; color:#b4bfb7;
  text-shadow:0 1px 20px rgba(3,6,8,.88) }
.sub{ font-size:14px; line-height:1.68; color:#9aa5a0; text-shadow:0 1px 18px rgba(3,6,8,.85) }
.t{ color:var(--ember) }

/* ============================================================== layout */
.page{ position:relative; z-index:10 }
.shell{ max-width:1160px; margin:0 auto; padding:0 var(--pad) }
.top-pad{ padding-top:calc(var(--nav-h) + clamp(26px,7vh,84px)) }
.rule{ height:1px; background:var(--line-soft); border:0; margin:0 }

/* entrance — a single, quiet reveal; no motion when the OS asks for none */
[data-in]{ opacity:0; transform:translate3d(0,16px,0) }
[data-in].in{ opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:var(--in-delay,0ms) }

/* ============================================================== panel */
.panel{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; padding:clamp(22px,3vw,34px);
  backdrop-filter:blur(18px) saturate(1.05); -webkit-backdrop-filter:blur(18px) saturate(1.05);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.panel::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(223,231,224,.22), transparent);
}

/* ============================================================== forms */
.field{ margin-bottom:16px }
.field label{
  display:block; margin-bottom:8px;
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim);
}
.field label .opt{ color:var(--muted-lite); letter-spacing:.14em }
.input{
  width:100%; padding:14px 15px; color:var(--bone);
  background:var(--field); border:1px solid var(--line); border-radius:12px;
  font:inherit; font-size:15px; font-weight:300; letter-spacing:.01em;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.input::placeholder{ color:var(--muted-lite) }
.input:hover{ border-color:rgba(223,231,224,.24) }
.input:focus{ outline:none; border-color:rgba(255,90,60,.6); background:rgba(223,231,224,.07);
  box-shadow:0 0 0 3px rgba(224,35,28,.13) }
.input.err{ border-color:rgba(224,35,28,.75); background:rgba(224,35,28,.07) }
.row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:4px }
.remember{ display:flex; align-items:center; gap:9px; font-size:10.5px; letter-spacing:.1em;
  color:var(--muted-lite); cursor:pointer; text-transform:uppercase }
.remember input{ width:15px; height:15px; accent-color:var(--vermilion); margin:0 }
.forgot{ font-size:10.5px; letter-spacing:.1em; color:var(--muted-lite); text-transform:uppercase;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s }
.forgot:hover{ color:var(--ember); border-color:rgba(255,90,60,.5) }

.btn{
  width:100%; margin-top:22px; padding:15px 18px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, #c81f19, var(--vermilion) 46%, var(--ember));
  color:#fff; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:0 16px 40px -18px rgba(224,35,28,.75);
  transition:transform .28s var(--ease-out), box-shadow .28s var(--ease-out), filter .28s;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:0 20px 48px -18px rgba(224,35,28,.85) }
.btn:disabled{ opacity:.55; cursor:wait; transform:none }
.btn.ghost{
  background:transparent; border:1px solid var(--line); color:var(--bone); box-shadow:none;
  font-weight:500;
}
.btn.ghost:hover{ border-color:rgba(223,231,224,.34); filter:none; transform:none }
.btn-row{ display:flex; gap:12px; margin-top:22px }
.btn-row .btn{ margin-top:0 }

.msg{
  margin-top:16px; min-height:0; display:none;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:.1em; line-height:1.8; text-align:center; color:var(--ok);
}
.msg.show{ display:block }
.msg.err-msg{ color:#ff6a5a }

.toggle-line{ margin-top:18px; text-align:center;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase }
.toggle-line button{ color:var(--ember); font:inherit; letter-spacing:inherit; text-transform:inherit }
.toggle-line button:hover{ color:#fff }

.status-line{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-lite);
}
.blink{ width:7px; height:7px; border-radius:50%; background:var(--vermilion);
  animation:hcblink 1.6s infinite; flex:0 0 auto }
@keyframes hcblink{ 0%,80%,100%{ opacity:.25 } 40%{ opacity:1 } }

.back{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-lite);
  transition:color .25s;
}
.back:hover{ color:var(--ember) }

/* mock toggle — a staging tool, labelled as one, off by default */
.mockbar{
  position:fixed; left:var(--pad); bottom:18px; z-index:70;
  display:flex; align-items:center; gap:10px; padding:8px 13px;
  border:1px dashed rgba(223,231,224,.28); border-radius:999px;
  background:rgba(5,7,10,.82); color:var(--bone-dim);
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
}
.mockbar b{ font-weight:500; color:var(--bone) }
.mockbar label{ display:flex; align-items:center; gap:7px; cursor:pointer }
.mockbar input{ width:13px; height:13px; accent-color:var(--vermilion); margin:0 }
.mockbar .live{ color:var(--ok) }

/* ============================================================== footer */
.foot{ position:relative; margin-top:clamp(60px,12vh,140px); padding:clamp(44px,7vh,84px) var(--pad) 30px }
.foot::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(transparent, rgba(3,5,8,.86) 40%, rgba(3,5,8,.97)) }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.6fr));
  gap:clamp(22px,4vw,60px) }
.foot-grid > div > h4{ margin:0 0 16px; font-size:10px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-lite); font-weight:500 }
.foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px }
.foot li a{ font-size:13px; color:#8f9a93; transition:color .35s }
.foot li a:hover{ color:var(--bone) }
.foot-brand svg, .foot-brand img{ width:34px; height:34px; display:block; border-radius:50% }
.foot-brand p{ margin:16px 0 0; max-width:34ch; font-size:13px; color:#79847e }
.foot-base{ display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap; margin-top:clamp(30px,5vh,60px); padding-top:20px;
  border-top:1px solid var(--line-soft);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-lite) }
.jp{ font-family:'NotoJP','Onest',sans-serif; font-weight:400; letter-spacing:.2em }

/* ============================================================== pricing */
.phero{ padding:0 var(--pad); text-align:center; position:relative }
.phero .tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ember);
  border:1px solid rgba(224,35,28,.34); background:rgba(224,35,28,.07);
  border-radius:999px; padding:7px 16px;
}
.phero h1{
  font-size:clamp(32px,5.4vw,64px); line-height:1.05; letter-spacing:-.015em;
  margin:22px auto 14px; text-transform:uppercase;
  text-shadow:0 2px 40px rgba(3,6,8,.8);
}
.phero h1 .g{
  background:linear-gradient(120deg, var(--vermilion), var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.phero p{ color:#a5b0a9; font-size:clamp(14px,1.15vw,17px); line-height:1.7;
  max-width:640px; margin:0 auto; text-shadow:0 1px 22px rgba(3,6,8,.9) }

.plans{
  max-width:1240px; margin:0 auto; padding:clamp(38px,6vh,64px) var(--pad) 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:16px; align-items:stretch;
}
.plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:24px 22px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:transform .3s var(--ease-out), border-color .3s;
}
.plan:hover{ transform:translateY(-4px); border-color:rgba(223,231,224,.26) }
.plan .p-name{ font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ember) }
.plan .p-price{ font-size:clamp(28px,2.6vw,34px); font-weight:400; letter-spacing:-.02em;
  margin:16px 0 4px; color:var(--bone); font-variant-numeric:tabular-nums }
.plan .p-price small{ font-size:12px; color:var(--muted-lite); font-weight:300; letter-spacing:0 }
.plan .p-sub{ font-size:11.5px; letter-spacing:.06em; color:var(--muted-lite); margin-bottom:20px;
  min-height:2.6em }
.plan ul{ list-style:none; margin:0 0 22px; padding:0; display:flex; flex-direction:column;
  gap:10px; flex:1 }
.plan li{ font-size:12.5px; line-height:1.5; color:#b4bfb7; display:flex; gap:10px }
.plan li::before{
  content:''; flex:0 0 auto; width:6px; height:10px; margin-top:4px;
  border-right:1.4px solid var(--vermilion); border-bottom:1.4px solid var(--vermilion);
  transform:rotate(40deg);
}
.plan .p-btn{
  display:block; text-align:center; padding:13px 10px; border-radius:999px;
  border:1px solid var(--line); color:var(--bone); font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; transition:border-color .3s, color .3s, background .3s;
}
.plan .p-btn:hover{ border-color:rgba(223,231,224,.4); background:rgba(223,231,224,.05) }
.plan.hot{ border-color:rgba(224,35,28,.55);
  background:linear-gradient(180deg, rgba(224,35,28,.10), rgba(9,12,16,.74) 46%) }
.plan.hot .badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg, #c81f19, var(--ember)); color:#fff;
  font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px; white-space:nowrap;
}
.plan.hot .p-btn{ background:linear-gradient(135deg, #c81f19, var(--ember)); border-color:transparent;
  color:#fff }
.plan.hot .p-btn:hover{ filter:brightness(1.07); background:linear-gradient(135deg,#c81f19,var(--ember)) }
.plan.zero .p-name, .plan.zero .p-price{ color:#6fcf97 }
.plan.zero .p-btn:hover{ border-color:rgba(111,207,151,.6); color:#8fe0b2 }

.pnote{
  max-width:720px; margin:clamp(34px,6vh,58px) auto 0; padding:0 var(--pad);
  text-align:center; color:var(--muted-lite); font-size:12.5px; line-height:1.8;
}
.pnote b{ color:var(--bone); font-weight:500 }
.pnote .billing{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:24px;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:8px 15px; color:var(--bone-dim);
}

/* ============================================================== checkout */
.steps{
  display:flex; align-items:center; gap:clamp(10px,2vw,22px); flex-wrap:wrap;
  margin-bottom:clamp(24px,4vh,40px);
}
.step{ display:flex; align-items:center; gap:10px; color:var(--muted-lite);
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase }
.step .n{ width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:10px; letter-spacing:0; color:var(--muted-lite);
  transition:border-color .35s, color .35s, background .35s }
.step.on{ color:var(--bone) }
.step.on .n{ border-color:rgba(224,35,28,.75); color:#fff; background:rgba(224,35,28,.85) }
.step.done .n{ border-color:rgba(111,207,151,.6); color:#8fe0b2 }
.step-arrow{ color:rgba(223,231,224,.22); font-size:11px; letter-spacing:.1em }

.ck-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:clamp(18px,3vw,40px); align-items:start }
.ck-step{ display:none }
.ck-step.on{ display:block }
.pick{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.pick label{
  position:relative; display:block; padding:20px 20px 22px; cursor:pointer;
  background:var(--field); border:1px solid var(--line); border-radius:16px;
  transition:border-color .3s, background .3s;
}
.pick label:hover{ border-color:rgba(223,231,224,.3) }
.pick input{ position:absolute; opacity:0; pointer-events:none }
.pick input:checked + label{ border-color:rgba(224,35,28,.7); background:rgba(224,35,28,.09) }
.pick b{ display:block; font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase }
.pick .pk-meta{ display:block; margin-top:8px; font-size:11.5px; color:var(--muted-lite); line-height:1.5 }
.pick .pk-price{ display:block; margin-top:12px; font-size:18px; font-weight:400; color:var(--bone);
  font-variant-numeric:tabular-nums }
.pick .pk-price small{ font-size:11px; color:var(--muted-lite) }
.cycle{ display:inline-flex; gap:6px; padding:4px; border:1px solid var(--line); border-radius:999px }
.cycle button{
  padding:9px 18px; border-radius:999px; font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-lite); transition:.3s;
}
.cycle button.on{ background:rgba(223,231,224,.1); color:var(--bone) }
.summary{ background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:22px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px) }
.summary h3{ font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-lite); margin-bottom:16px }
.sum-line{ display:flex; justify-content:space-between; gap:14px; font-size:12.5px; color:#b4bfb7;
  padding:9px 0; border-bottom:1px solid var(--line-soft) }
.sum-line:last-of-type{ border-bottom:0 }
.sum-line b{ color:var(--bone); font-weight:500; font-variant-numeric:tabular-nums }
.sum-plans{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px }
.sum-plan{ display:flex; justify-content:space-between; gap:14px; align-items:baseline }
.sum-plan .sp-n{ font-size:12px; color:var(--bone); font-weight:500; letter-spacing:.06em }
.sum-plan .sp-m{ font-size:11px; color:var(--muted-lite) }
.sum-total{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line) }
.sum-total span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim) }
.sum-total b{ font-size:24px; font-weight:400; color:var(--bone); font-variant-numeric:tabular-nums }
.sum-renew{ margin-top:10px; font-size:11px; color:var(--muted-lite) }
.legal{ margin-top:14px; font-size:11px; line-height:1.7; color:var(--muted-lite) }
.legal a{ color:var(--bone-dim); border-bottom:1px solid var(--line) }
.legal a:hover{ color:var(--ember) }
.ck-lead{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-lite);
  margin-bottom:14px }

/* ============================================================== responsive */
@media (max-width:1080px){
  .nav-links .collapse{ display:none }
  .foot-grid{ grid-template-columns:1fr 1fr }
  .ck-grid{ grid-template-columns:1fr }
}
@media (max-width:820px){
  :root{ --nav-h:72px }
  .brandfield{ --bf-y:-13vh }
  .nav-burger{ display:block }
  .nav-links{
    position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px);
    padding:calc(var(--nav-h) + 28px) var(--pad) 34px;
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:22px; background:rgba(3,6,9,.985); border-left:1px solid var(--line-soft);
    transform:translate3d(100%,0,0); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .5s var(--ease-out), opacity .4s, visibility .5s;
  }
  .nav-links .collapse{ display:block }
  .nav.menu-open .nav-links{ transform:none; opacity:1; visibility:visible; pointer-events:auto }
  .nav.menu-open::before{ opacity:0; backdrop-filter:none; -webkit-backdrop-filter:none }
  .nav-link{ font-size:13px; height:auto; overflow:visible; padding:8px 0 }
  .nav-link span{ height:auto; font-size:13px }
  .nav-link .alt{ display:none }
  .nav-link.on::after{ bottom:2px }
  .nav-cta{ margin-top:6px }
  .pick{ grid-template-columns:1fr }
  .phero h1{ font-size:clamp(30px,8vw,44px) }
}
@media (max-width:560px){
  .brandfield{ --bf-y:-16vh }
  .foot-grid{ grid-template-columns:1fr }
  .foot-base{ flex-direction:column; align-items:flex-start; gap:10px }
  .panel{ border-radius:16px; padding:20px }
  .plans{ gap:14px }
  .mockbar{ left:12px; right:12px; bottom:12px; justify-content:space-between }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important }
  [data-in]{ opacity:1; transform:none }
}