/* ═══════════════════════════════════════════════════════════════════
   igotisekai — design system
   One accent per product, one house voice. Dark by default because the
   products are things you open at night: a queue, a lost cat, a place you
   meant to remember.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* House */
  --ink:#08070F;
  --ink-2:#0E0C1A;
  --surface:#15122A;
  --surface-2:#1D1936;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);

  --text:#F4F2FF;
  --text-2:#B7B1D4;
  --text-3:#8F87AD;   /* lifted from #7E789C: that failed WCAG AA (4.06) on cards */

  --brand:#6D5BF5;
  --brand-2:#9C7BFF;
  --brand-glow:rgba(109,91,245,.35);

  /* Products */
  /* Each product's accent is taken from the app itself. */
  --pugmark:#F0997B;      /* Pugmark's coral, over its indigo #26215C */
  --pugmark-deep:#26215C;
  --pinzaa:#E07E1A;       /* Pinzaa's burnt orange, sampled from the app */
  --pinzaa-deep:#C86800;
  --nabza:#8B6EFF;    /* lifted from #7C5CF7: 4.11 as small text on cards */

  --r-sm:12px;
  --r-md:18px;
  --r-lg:28px;
  --r-xl:40px;

  --shadow:0 24px 60px -20px rgba(0,0,0,.7);
  --ease:cubic-bezier(.22,.61,.36,1);
  --spring:cubic-bezier(.34,1.4,.5,1);

  --pad:clamp(20px,5vw,64px);
  --max:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ── Type ───────────────────────────────────────────────────────── */
.display{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.02;
}
h1.display{font-size:clamp(2.6rem,7.5vw,5.2rem)}
h2.display{font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.06}
h3.display{font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.15}

.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-3);
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--line-strong);
}
.lede{font-size:clamp(1.02rem,1.6vw,1.22rem);color:var(--text-2);max-width:56ch}
.muted{color:var(--text-3)}

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative;padding-block:clamp(72px,11vw,140px)}
.stack{display:flex;flex-direction:column;gap:18px}

/* ── Nav ────────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:16px var(--pad);
  transition:background .3s var(--ease),backdrop-filter .3s var(--ease),
             border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,7,15,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.02em}
.brand-mark{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(145deg,var(--brand),#4C1D95);
  display:grid;place-items:center;
  box-shadow:0 6px 18px -6px var(--brand-glow);
}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:.92rem;color:var(--text-2);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-toggle{display:none;background:none;border:none;color:var(--text);padding:8px;cursor:pointer}

@media(max-width:820px){
  .nav-links{
    position:fixed;inset:64px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(8,7,15,.96);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:8px var(--pad) 20px;
    transform:translateY(-120%);transition:transform .35s var(--ease);
  }
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 0;border-top:1px solid var(--line);font-size:1rem}
  .nav-links .btn{margin-top:14px;justify-content:center}
  .nav-toggle{display:block}
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:999px;border:1px solid transparent;
  font-size:.94rem;font-weight:650;cursor:pointer;
  transition:transform .25s var(--spring),box-shadow .25s var(--ease),
             background .2s,border-color .2s,color .2s;
  font-family:inherit;
}
.btn-primary{
  /* The ramp is deliberately darker than --brand/--brand-2. White text on
     #9C7BFF measures 3.14 against WCAG AA's 4.5, and this is the site's
     primary action, so the gradient runs 4.84 -> 6.88 instead. */
  background:linear-gradient(135deg,#7355F4,#5340D4);
  color:#fff;box-shadow:0 12px 30px -10px var(--brand-glow);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px var(--brand-glow)}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{background:rgba(255,255,255,.05);border-color:var(--text-3)}
.btn svg{width:17px;height:17px}

/* ── Reveal on scroll ───────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding-top:110px;padding-bottom:70px;overflow:hidden;
}
.hero-grid{display:grid;gap:clamp(36px,6vw,72px);align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.08fr .92fr}}

.hero h1{margin:18px 0 22px}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(100deg,var(--brand-2),#5EEAD4 55%,var(--pugmark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:26px;font-size:.86rem;color:var(--text-3)}

/* Ambient light behind the hero */
.aura{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;opacity:.5;z-index:0}
.aura-1{width:min(56vw,620px);aspect-ratio:1;background:var(--brand);top:-14%;right:-12%}
.aura-2{width:min(40vw,430px);aspect-ratio:1;background:#12B3A8;bottom:-18%;left:-10%;opacity:.28}
.hero .wrap{position:relative;z-index:1}

/* ── Flip stats ─────────────────────────────────────────────────── */
.stats{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:620px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{
  position:relative;height:150px;perspective:1000px;
  --c:var(--accent);
}
@media(min-width:620px){.stat{height:166px}}
.stat-inner{
  position:absolute;inset:0;
  transition:transform .9s var(--ease);
  transform-style:preserve-3d;
}
.stat.flipped .stat-inner{transform:rotateX(180deg)}
.stat-face{
  position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  padding:20px;border-radius:var(--r-md);
  background:
    radial-gradient(120% 110% at 100% 100%, color-mix(in srgb,var(--c) 20%,transparent) 0%, transparent 62%),
    var(--surface);
  border:1px solid color-mix(in srgb,var(--c) 22%,var(--line));
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.stat-face .stat-k,.stat-face .stat-l{position:relative;z-index:1;max-width:calc(100% - 58px)}

/* The character sits in the corner of the card, behind the reading. */
.stat-art{
  position:absolute;right:0;top:0;bottom:0;width:54%;
  display:grid;place-items:end center;pointer-events:none;
}
/* The photograph bleeds in from the right and dissolves under the reading,
   so the card carries the artwork without the text ever sitting on top of it. */
.stat-art img{
  width:100%;height:100%;object-fit:cover;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 62%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 62%);
}
.stat-art svg{height:84px;width:auto;max-width:76px;display:block;margin-right:8px}
@media(min-width:620px){.stat-art svg{height:98px;max-width:88px}}
.stat-back{transform:rotateX(180deg);background:var(--surface-2);justify-content:center}
.stat-back .stat-l{max-width:none}
.stat-k{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;
}
.stat-l{font-size:.82rem;color:var(--text-3);line-height:1.35}

/* ── Product cards ──────────────────────────────────────────────── */
.products{display:grid;gap:20px;margin-top:52px}
@media(min-width:900px){.products{grid-template-columns:repeat(3,1fr)}}

.product{
  position:relative;display:flex;flex-direction:column;
  padding:30px 26px 26px;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--tint) 0%, transparent 62%),
    var(--surface);
  border:1px solid var(--line);
  overflow:hidden;isolation:isolate;
  transition:transform .4s var(--ease),border-color .3s;
}
.product:hover{transform:translateY(-6px);border-color:var(--accent)}
.product::after{
  content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0;transition:opacity .35s;
}
.product:hover::after{opacity:1}

/* Poster art across the head of each card, dissolving into the surface so
   the icon can sit over its lower edge. */
.product-shot{
  position:relative;margin:-30px -26px 18px;height:176px;overflow:hidden;
}
.product-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease);
}
.product:hover .product-shot img{transform:scale(1.06)}
.product-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,var(--surface) 100%);
}

.product-mark{
  position:relative;z-index:1;margin:-54px 0 20px;
  width:60px;height:60px;border-radius:17px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 22%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  backdrop-filter:blur(6px);
}
.product h3{margin-bottom:8px}
.product p{color:var(--text-2);font-size:.95rem;flex:1}
.product-tags{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 20px}
.tag{
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--text-2);
}
.product-go{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;font-weight:650;color:var(--accent);
}
.product-go svg{transition:transform .3s var(--spring)}
.product:hover .product-go svg{transform:translateX(4px)}

/* ── Split feature rows ─────────────────────────────────────────── */
.row{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media(min-width:900px){
  .row{grid-template-columns:1fr 1fr}
  .row.flip .row-media{order:-1}
}
.row + .row{margin-top:clamp(56px,8vw,110px)}
.row-media{
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface);overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center;
  position:relative;
}

/* ── Steps / guide ──────────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:16px;margin-top:44px}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  position:relative;padding:28px 24px 24px;
  border-radius:var(--r-md);background:var(--surface);
  border:1px solid var(--line);
}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:.8rem;font-weight:700;letter-spacing:.1em;
  color:var(--brand-2);display:block;margin-bottom:14px;
}
.step h3{font-size:1.02rem;margin-bottom:7px;letter-spacing:-.01em}
.step p{font-size:.9rem;color:var(--text-2)}

/* ── Marquee ────────────────────────────────────────────────────── */
.marquee{
  overflow:hidden;border-block:1px solid var(--line);
  padding-block:18px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee-track{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite}
.marquee span{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:700;
  letter-spacing:-.02em;color:var(--text-3);white-space:nowrap;
  display:flex;align-items:center;gap:44px;
}
.marquee span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── CTA band ───────────────────────────────────────────────────── */
.cta{
  border-radius:var(--r-xl);padding:clamp(36px,6vw,72px);
  background:
    radial-gradient(100% 140% at 0% 0%, rgba(109,91,245,.30), transparent 60%),
    radial-gradient(90% 130% at 100% 100%, rgba(18,179,168,.22), transparent 60%),
    var(--surface);
  border:1px solid var(--line-strong);
  text-align:center;
}
.cta h2{margin-bottom:16px}
.cta .lede{margin-inline:auto;text-align:center}
.cta .hero-cta{justify-content:center}

/* ── Footer ─────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding-block:52px 40px}
.foot-grid{display:grid;gap:32px}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot-col h2{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:16px;font-weight:700;
}
.foot-col a{display:block;padding:5px 0;color:var(--text-2);font-size:.92rem;transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.84rem;color:var(--text-3);
}

/* ── Forms ──────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:.86rem;font-weight:600;color:var(--text-2)}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--line-strong);
  color:var(--text);font-family:inherit;font-size:.95rem;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(109,91,245,.16);
}
.field-row{display:grid;gap:0 18px}
@media(min-width:660px){.field-row{grid-template-columns:1fr 1fr}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
}

/* ═══════════════════════════════════════════════════════════════════
   Part 2 — product pages, guides, packages, forms
   ═══════════════════════════════════════════════════════════════════ */

/* ── Accent scoping ─────────────────────────────────────────────── */
body{--accent:var(--brand);--tint:rgba(109,91,245,.16)}
body[data-product="pugmark"]{--accent:var(--pugmark);--tint:rgba(240,153,123,.14)}
body[data-product="pinzaa"] {--accent:var(--pinzaa); --tint:rgba(224,126,26,.15)}
body[data-product="nabza"]  {--accent:var(--nabza);  --tint:rgba(124,92,247,.16)}
.accent{color:var(--accent)}

/* Home product cards each carry their own accent */
.product[data-product="pugmark"]{--accent:var(--pugmark);--tint:rgba(240,153,123,.12)}
.product[data-product="pinzaa"] {--accent:var(--pinzaa); --tint:rgba(224,126,26,.13)}
.product[data-product="nabza"]  {--accent:var(--nabza);  --tint:rgba(124,92,247,.13)}

/* ── Skip link ──────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{
  left:12px;top:12px;padding:10px 16px;border-radius:10px;
  background:var(--brand);color:#fff;font-weight:650;
}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px}

/* ── Nav additions ──────────────────────────────────────────────── */
.nav-links a.here{color:var(--text)}
.nav-links a[data-nav]{position:relative}
.nav-links a.here::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--brand);border-radius:2px;
}
@media(max-width:820px){.nav-links a.here::after{display:none}}

/* ── Section heads ──────────────────────────────────────────────── */
.head{max-width:62ch}
.head h2{margin:14px 0 14px}
.head-split{display:grid;gap:20px;align-items:end}
@media(min-width:900px){.head-split{grid-template-columns:1.35fr .65fr}}

/* ── Badges ─────────────────────────────────────────────────────── */
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.74rem;font-weight:650;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--text-2);
  background:rgba(255,255,255,.04);
}
.badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--text-3);
}
.badge.on::before{background:#5FD08A;box-shadow:0 0 0 3px rgba(95,208,138,.18)}
.badge.warm::before{background:var(--accent);box-shadow:0 0 0 3px var(--tint)}

/* ── Google Play button ─────────────────────────────────────────── */
.btn-play{
  background:#fff;color:#0B0A12;gap:11px;padding:11px 22px;
  box-shadow:0 14px 34px -16px rgba(255,255,255,.5);
}
.btn-play:hover{transform:translateY(-2px)}
.btn-play .pl{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.btn-play .pl small{font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;opacity:.62}
.btn-play .pl strong{font-size:.98rem;font-weight:700;letter-spacing:-.01em}
.btn-play svg{width:21px;height:21px}
.btn-play.is-soon{
  background:transparent;color:var(--text-2);
  border:1px dashed var(--line-strong);box-shadow:none;cursor:default;
}
.btn-play.is-soon:hover{transform:none}
.btn-play.is-soon .pl strong{color:var(--text)}
.track-note{
  margin-top:14px;font-size:.83rem;color:var(--text-3);max-width:46ch;
  padding-left:14px;border-left:2px solid var(--line-strong);
}

/* ── Phone frame ────────────────────────────────────────────────── */
.phone{
  position:relative;width:min(268px,72vw);margin-inline:auto;
  border-radius:34px;padding:9px;
  background:linear-gradient(160deg,#2A2740,#131126);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow);
}
.phone::before{
  content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:74px;height:5px;border-radius:99px;background:rgba(0,0,0,.55);z-index:2;
}
.phone img{border-radius:26px;width:100%;height:auto;background:var(--surface-2)}
.phone-glow{
  position:absolute;inset:auto 8% -14% 8%;height:60px;border-radius:50%;
  background:var(--accent);filter:blur(46px);opacity:.34;z-index:-1;
}

/* ── Guide (image-by-image how-to) ──────────────────────────────── */
.guide{counter-reset:g;display:flex;flex-direction:column;gap:clamp(56px,9vw,112px);margin-top:60px}
.guide-row{display:grid;gap:clamp(28px,5vw,60px);align-items:center}
@media(min-width:900px){
  .guide-row{grid-template-columns:.85fr 1.15fr}
  .guide-row:nth-child(even) .guide-shot{order:2}
}
.guide-n{
  counter-increment:g;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:14px;
}
.guide-n::before{content:"Step " counter(g,decimal-leading-zero)}
.guide-n::after{content:"";flex:1;height:1px;background:var(--line);max-width:70px}
.guide-body h3{margin-bottom:12px}
.guide-body > p{color:var(--text-2);margin-bottom:18px}
.ticks{list-style:none;display:flex;flex-direction:column;gap:11px}
.ticks li{
  position:relative;padding-left:28px;font-size:.93rem;color:var(--text-2);
}
.ticks li::before{
  content:"";position:absolute;left:0;top:.44em;width:15px;height:15px;border-radius:50%;
  background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
}
.ticks li::after{
  content:"";position:absolute;left:5px;top:.72em;width:5px;height:2.5px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}

/* ── Note / callout ─────────────────────────────────────────────── */
.note{
  display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);
  font-size:.92rem;color:var(--text-2);
}
.note strong{color:var(--text);font-weight:650}
.note svg{width:19px;height:19px;flex:0 0 auto;color:var(--accent);margin-top:2px}

/* ── Safety / principle grid ────────────────────────────────────── */
.grid-3{display:grid;gap:16px;margin-top:44px}
@media(min-width:760px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.card{
  padding:26px 24px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.card h3{font-size:1.02rem;margin-bottom:8px;letter-spacing:-.01em}
.card p{font-size:.92rem;color:var(--text-2)}
.card-ico{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  margin-bottom:16px;color:var(--accent);
}
.card-ico svg{width:19px;height:19px}

/* ── Pricing / packages ─────────────────────────────────────────── */
.tiers{display:grid;gap:16px;margin-top:44px}
@media(min-width:860px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{
  display:flex;flex-direction:column;
  padding:30px 26px;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
}
.tier.featured{
  background:radial-gradient(120% 90% at 50% 0%,var(--tint),transparent 60%),var(--surface-2);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
}
.tier-name{font-size:.76rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.tier-price{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.7rem,3.4vw,2.3rem);line-height:1.05;margin:14px 0 6px;
}
.tier-price small{font-size:.9rem;font-weight:500;color:var(--text-3);letter-spacing:0}
.tier > p{font-size:.92rem;color:var(--text-2);margin-bottom:20px}
.tier .ticks{margin-bottom:26px;flex:1}
.tier .btn{width:100%}

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq{margin-top:40px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq details p{padding:0 0 24px;color:var(--text-2);font-size:.95rem;max-width:72ch}

/* ── Process rail ───────────────────────────────────────────────── */
.rail{display:grid;gap:0;margin-top:48px}
.rail-item{
  display:grid;gap:6px 26px;padding:26px 0;
  border-top:1px solid var(--line);
  grid-template-columns:auto 1fr;
}
.rail-item:last-child{border-bottom:1px solid var(--line)}
.rail-n{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:.8rem;letter-spacing:.12em;color:var(--brand-2);padding-top:5px;
}
.rail-item h3{font-size:1.1rem;letter-spacing:-.015em}
.rail-item p{grid-column:2;color:var(--text-2);font-size:.94rem;max-width:64ch}

/* ── Form card ──────────────────────────────────────────────────── */
.form-card{
  padding:clamp(26px,4vw,44px);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);
}
.field .hint{font-size:.79rem;color:var(--text-3);font-weight:400}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#7E789C 50%),linear-gradient(135deg,#7E789C 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.field select option{background:var(--ink-2);color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:9px 15px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);font-size:.88rem;color:var(--text-2);
  transition:all .2s var(--ease);
}
.chip input:checked + span{
  background:var(--tint);border-color:var(--brand);color:var(--text);
}
.chip input:focus-visible + span{outline:2px solid var(--brand-2);outline-offset:2px}
.form-status{
  margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);
  font-size:.9rem;display:none;
}
.form-status.show{display:block}
.form-status.ok{background:rgba(95,208,138,.10);border:1px solid rgba(95,208,138,.32);color:#BDECCE}
.form-status.err{background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.32);color:#FBD3B4}

/* ── Contact rows ───────────────────────────────────────────────── */
.contact-list{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.contact-item{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);
  transition:border-color .2s;
}
a.contact-item:hover{border-color:var(--brand)}
.contact-item svg{width:18px;height:18px;color:var(--brand-2);flex:0 0 auto}
.contact-item .ci-l{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.contact-item .ci-v{font-size:.95rem;color:var(--text)}

/* ── Hero visual (home) ─────────────────────────────────────────── */
.orbit{position:relative;aspect-ratio:1;width:100%;max-width:440px;margin-inline:auto}
.orbit-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.orbit-ring.r2{inset:14%;border-style:dashed;border-color:rgba(255,255,255,.07)}
.orbit-ring.r3{inset:28%}
/* No plate. The mark's own ring IS the innermost orbit ring — a rounded
   square here would add a third silhouette that means nothing, and would
   make the company read as a fourth app. */
.orbit-core{
  position:absolute;inset:27%;border-radius:50%;
  display:grid;place-items:center;
}
.orbit-core svg{position:relative;z-index:2;width:100%;height:100%;color:#fff;
  filter:drop-shadow(0 0 18px rgba(124,92,247,.45))}

/* Light instead of a background plate, so the code rain still shows through. */
.core-glow{
  position:absolute;inset:-16%;border-radius:50%;z-index:0;
  background:radial-gradient(closest-side,
    rgba(109,91,245,.40), rgba(109,91,245,.12) 58%, transparent 76%);
}

/* ── The comet ──────────────────────────────────────────────────────
   A light falling around the ring: a wide faint trail furthest back, a
   narrower bright tail closer in, and a round head at the front. Three
   layers on the same 5.5s `orbit` animation, so they stay locked
   together. All of them sit ABOVE the mark and blend with `screen` —
   at a lower z-index they would hide behind the very ring they travel
   along, which is exactly the bug this replaced.

   The mask percentages place each band on the ring line. They are tied
   to the mark's viewBox: the ring sits at 88.8% of the half-width. If
   the viewBox changes, recompute these. */
.core-trail,.core-sweep,.core-comet{
  position:absolute;inset:0;border-radius:50%;
  pointer-events:none;mix-blend-mode:screen;
  /* A comet passes, it does not loop. One fast lap (~3.1s), then the ring
     goes dark for ~5.9s before the next. Continuous motion next to body
     copy is what makes people stop reading; an occasional event is what
     makes them look. Tune the cadence with the duration below: the lap is
     always 35% of it. */
  animation:comet-pass 9s linear infinite;
}
@keyframes comet-pass{
  0%   {transform:rotate(0deg);   opacity:0}
  4%   {opacity:1}
  27%  {opacity:1}
  35%  {transform:rotate(360deg); opacity:0}
  100% {transform:rotate(360deg); opacity:0}
}

/* Furthest back: wide, faint, long. */
.core-trail{
  z-index:3;
  background:conic-gradient(from 0deg,
    transparent 0deg 205deg,
    rgba(94,234,212,.10) 280deg,
    rgba(124,92,247,.20) 330deg,
    rgba(150,240,225,.30) 356deg,
    transparent 360deg);
  -webkit-mask-image:radial-gradient(closest-side,
    transparent 0 81%, #000 85%, #000 93%, transparent 97%);
          mask-image:radial-gradient(closest-side,
    transparent 0 81%, #000 85%, #000 93%, transparent 97%);
  filter:blur(1.5px);
}

/* Closer in: narrow and bright, so the tail reads as tapering. */
.core-sweep{
  z-index:4;
  background:conic-gradient(from 0deg,
    transparent 0deg 300deg,
    rgba(94,234,212,.30) 332deg,
    rgba(180,250,238,.85) 351deg,
    rgba(255,255,255,1) 359deg,
    transparent 360deg);
  -webkit-mask-image:radial-gradient(closest-side,
    transparent 0 85%, #000 87.6%, #000 90.4%, transparent 93%);
          mask-image:radial-gradient(closest-side,
    transparent 0 85%, #000 87.6%, #000 90.4%, transparent 93%);
}

/* The head. Sits at 12 o'clock on the ring line, which is where the
   bright end of the tail lands, and rides round with it. */
.core-comet{z-index:5}
.core-comet i{
  position:absolute;top:5.6%;left:50%;
  width:5.6%;aspect-ratio:1;margin:-2.8% 0 0 -2.8%;
  border-radius:50%;
  background:radial-gradient(circle,
    #FFFFFF 0 30%, #D6FFF6 52%, rgba(120,240,222,.45) 74%, transparent 100%);
  box-shadow:0 0 12px 2px rgba(160,248,232,.8),
             0 0 34px 9px rgba(94,234,212,.32);
}

/* The chip breathes, faintly. */
.core-chip{
  transform-box:fill-box;transform-origin:center;
  animation:core-breathe 3.4s var(--ease) infinite;
}
@keyframes core-breathe{
  0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.09);opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .core-trail,.core-sweep,.core-comet{animation:none}
  .core-trail,.core-sweep{opacity:.45}
  .core-chip{animation:none}
}

.orbiter{
  position:absolute;inset:0;
  animation:orbit var(--dur,22s) linear infinite;
  animation-delay:var(--delay,0s);
}
/* Square, on purpose: square reads as "an app", the round core as the
   system they belong to. */
.orbiter i{
  position:absolute;top:var(--r,2%);left:50%;margin-left:-27px;
  width:54px;height:54px;border-radius:16px;display:grid;place-items:center;
  background:rgba(21,18,42,.66);
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  animation:counter var(--dur,22s) linear infinite;
  animation-delay:var(--delay,0s);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9),
             0 0 26px -10px currentColor,
             inset 0 1px 0 rgba(255,255,255,.07);
}
.orbiter i svg{width:24px;height:24px}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes counter{to{transform:rotate(-360deg)}}
@media(prefers-reduced-motion:reduce){.orbiter,.orbiter i{animation:none}}

/* ── Misc ───────────────────────────────────────────────────────── */
.hr{height:1px;background:var(--line);border:0}
.center{text-align:center}
.center .lede{margin-inline:auto}
.doc-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.doc-links a{
  font-size:.88rem;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--text-2);transition:all .2s;
}
.doc-links a:hover{border-color:var(--accent);color:var(--text)}
.section-tight{padding-block:clamp(48px,7vw,84px)}

/* ═══════════════════════════════════════════════════════════════════
   The summoning — a ~3s intro that draws the mark, then gets out of
   the way. Runs once per session on the home page. Every rule here is
   decorative: if the JS never runs, a <noscript> block hides it.
   ═══════════════════════════════════════════════════════════════════ */
.summon{
  position:fixed;inset:0;z-index:200;
  background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .4s var(--ease);
}
.summon.done{opacity:0;pointer-events:none}
.summon canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s linear}
.summon.raining canvas{opacity:.5}
.summon.fading canvas{opacity:0}

.summon-mark{position:relative;width:min(44vmin,240px);aspect-ratio:1}
.summon-svg{width:100%;height:100%;overflow:visible;transform:scale(.94);
  animation:summon-settle 2s var(--ease) forwards}
@keyframes summon-settle{
  0%{transform:scale(.94)}
  62%{transform:scale(.94)}
  74%{transform:scale(1.045)}
  100%{transform:scale(1)}
}

/* Ring: circumference of r=20 is ~125.7 */
.s-ring{
  stroke-dasharray:126;stroke-dashoffset:126;
  transform:rotate(-90deg);transform-origin:32px 32px;
  animation:summon-draw .63s var(--ease) .12s forwards;
}
/* Triangle: three 34.6-unit sides */
.s-tri{
  stroke-dasharray:104;stroke-dashoffset:104;
  animation:summon-draw .5s var(--ease) .7s forwards;
}
@keyframes summon-draw{to{stroke-dashoffset:0}}

.s-node{transform:scale(0);transform-box:fill-box;transform-origin:center;
  animation:summon-pop .3s var(--spring) forwards}
.s-node.n1{animation-delay:1.12s}
.s-node.n2{animation-delay:1.2s}
.s-node.n3{animation-delay:1.29s}
@keyframes summon-pop{to{transform:scale(1)}}

.s-chip{transform:scale(0) rotate(-40deg);transform-box:fill-box;transform-origin:center;
  animation:summon-chip .38s var(--spring) 1.4s forwards}
.s-chip-in{opacity:0;animation:summon-fade .2s linear 1.68s forwards}
@keyframes summon-chip{to{transform:scale(1) rotate(0)}}
@keyframes summon-fade{to{opacity:1}}

.s-flash{
  transform-box:fill-box;transform-origin:center;
  transform:scale(.2);opacity:0;
  animation:summon-flash .56s var(--ease) 1.44s forwards;
}
@keyframes summon-flash{
  0%{transform:scale(.2);opacity:.85}
  100%{transform:scale(2.6);opacity:0}
}



/* Nothing moves for anyone who has asked for that, and the whole
   overlay is skipped in JS as well. */
@media(prefers-reduced-motion:reduce){
  .summon{display:none}
}

/* ── Code rain behind the hero orbit ────────────────────────────────
   Deliberately dim. It should read as texture behind the products,
   never as something competing with them, so it is masked to fade out
   at the edges and capped at low opacity. */
.hero-rain{
  position:absolute;inset:-8%;width:116%;height:116%;
  opacity:0;pointer-events:none;z-index:0;
  transition:opacity 1.2s var(--ease);
  -webkit-mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.35) 72%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.35) 72%,transparent 100%);
}
.hero-rain.on{opacity:.3}
.orbit-ring{z-index:1}
.orbit-core{z-index:3}
.orbiter{z-index:2}
@media(prefers-reduced-motion:reduce){.hero-rain{display:none}}

/* ── The nav's charged edge ─────────────────────────────────────────
   A single highlight travelling along the bottom border once the nav
   has a border to travel along. Code rain up here would compete with
   the text people are trying to read, run on every page forever, and
   double up with the hero's rain directly below it. This says the same
   thing in one hairline. */
.nav.scrolled::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(124,92,247,.85) 38%,
    rgba(94,234,212,.95) 62%,
    transparent);
  background-size:34% 100%;background-repeat:no-repeat;
  animation:nav-charge 11s linear infinite;
  pointer-events:none;
}
@keyframes nav-charge{
  0%{background-position:-36% 0}
  100%{background-position:136% 0}
}
@media(prefers-reduced-motion:reduce){
  .nav.scrolled::after{animation:none;opacity:.35;background-position:50% 0}
}

/* ══ Mascots ═══════════════════════════════════════════════════════
   Lifted from the mascots working page so the characters can be used
   on the product pages. Transform-only, so it stays cheap on a slow
   phone, and every animation stops under prefers-reduced-motion. */
  /* Movement. Everything is transform-only so it stays cheap on a slow phone. */
  .anim{transform-box:fill-box}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  @keyframes bobfast{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @keyframes jitter{
    0%,100%{transform:translate(0,0) rotate(0)}
    20%{transform:translate(1.6px,-1.2px) rotate(1.2deg)}
    45%{transform:translate(-1.6px,1px) rotate(-1.4deg)}
    70%{transform:translate(1.2px,1.4px) rotate(.8deg)}
  }
  @keyframes peer{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
  @keyframes step{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(-5deg)}}
  @keyframes armswing{0%,100%{transform:rotate(21deg)}50%{transform:rotate(-21deg)}}
  @keyframes tailsway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(9deg)}}
  @keyframes tailflick{0%,60%,100%{transform:rotate(-4deg)}72%{transform:rotate(-19deg)}84%{transform:rotate(6deg)}}
  @keyframes eartwitch{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-11deg)}94%{transform:rotate(5deg)}}
  @keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}
  @keyframes headlook{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
  @keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.025,1.035)}}
  @keyframes stride{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
  @keyframes lean{0%,100%{transform:rotate(3.5deg)}50%{transform:rotate(-3.5deg)}}

  .a-bob{animation:bob 2.6s ease-in-out infinite}
  .a-bobfast{animation:bobfast 1.1s ease-in-out infinite}
  .a-jitter{animation:jitter .38s steps(1,end) infinite}
  .a-peer{animation:peer 3.2s ease-in-out infinite;transform-origin:50% 90%}
  .a-legL{animation:step .6s ease-in-out infinite;transform-origin:50% 0}
  .a-legR{animation:step .6s ease-in-out infinite;animation-delay:-.3s;transform-origin:50% 0}
  .a-armL{animation:armswing .6s ease-in-out infinite;animation-delay:-.3s;transform-origin:50% 6%}
  .a-armR{animation:armswing .6s ease-in-out infinite;transform-origin:50% 6%}
  .a-stride{animation:stride .3s ease-in-out infinite}
  .a-lean{animation:lean .6s ease-in-out infinite;transform-origin:50% 100%}
  .a-tail{animation:tailsway 3.6s ease-in-out infinite;transform-origin:0% 100%}
  .a-tailflick{animation:tailflick 2.4s ease-in-out infinite;transform-origin:0% 100%}
  .a-earL{animation:eartwitch 6.5s ease-in-out infinite;transform-origin:50% 100%}
  .a-earR{animation:eartwitch 6.5s ease-in-out infinite;animation-delay:-2.1s;transform-origin:50% 100%}
  .a-blink{animation:blink 5.2s ease-in-out infinite;transform-origin:50% 50%}
  .a-look{animation:headlook 4.2s ease-in-out infinite;transform-origin:50% 100%}
  .a-breathe{animation:breathe 3.8s ease-in-out infinite;transform-origin:50% 100%}
  @keyframes ping{0%{transform:scale(1);opacity:.3}70%,100%{transform:scale(2.2);opacity:0}}
  .a-ping{animation:ping 2.4s ease-out infinite;transform-origin:50% 50%}
  @media(prefers-reduced-motion:reduce){
    .a-bob,.a-bobfast,.a-jitter,.a-peer,.a-legL,.a-legR,.a-armL,.a-armR,.a-stride,.a-lean,.a-tail,.a-tailflick,.a-earL,.a-earR,.a-blink,.a-look,.a-breathe,.a-ping{animation:none}
  }

.mascot-block{display:grid;gap:clamp(28px,5vw,56px);align-items:center}
@media(min-width:860px){.mascot-block{grid-template-columns:.8fr 1.2fr}}
.mascot-stage{
  display:grid;place-items:center;padding:clamp(20px,4vw,36px);
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:radial-gradient(120% 100% at 50% 0%,var(--tint),transparent 65%),var(--surface);
}
.mascot-stage svg{width:100%;max-width:230px;height:auto;display:block}
.mascot-name{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.4vw,2.4rem);margin:12px 0 14px;
}

.poster-block{display:grid;gap:clamp(26px,5vw,50px);align-items:center}
@media(min-width:860px){.poster-block{grid-template-columns:1fr 1fr}}
.poster{
  margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:0 26px 60px -30px rgba(0,0,0,.85);
}
.poster img{display:block;width:100%;height:auto}

/* ── Language switcher ──────────────────────────────────────────────
   Only languages that are completely translated appear here; the list
   is built in site.js from LANGS. A half-translated language is worse
   than none, so nothing is listed until its pages are finished. */
.lang{position:relative;display:flex;align-items:center}
.lang-btn{
  /* A bare globe does not tell anyone what it does, so the button carries the
     language it is currently set to — in that language's own script. */
  display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 13px;
  border-radius:999px;border:1px solid var(--line-strong);
  background:transparent;color:var(--text-2);cursor:pointer;
  font-family:inherit;transition:border-color .2s,color .2s,background .2s;
}
.lang-cur{font-size:.86rem;font-weight:600;letter-spacing:-.01em;line-height:1}
.lang-chev{transition:transform .25s var(--ease);opacity:.7}
.lang-btn[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{
  color:var(--text);border-color:var(--text-3);background:rgba(255,255,255,.05);
}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  min-width:190px;padding:6px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line-strong);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.8);
}
.lang-menu[hidden]{display:none}
.lang-menu a{
  display:flex;align-items:baseline;gap:9px;
  padding:9px 12px;border-radius:9px;
  text-decoration:none;color:var(--text-2);font-size:.92rem;line-height:1.3;
}
.lang-menu a:hover,.lang-menu a:focus-visible{background:rgba(255,255,255,.06);color:var(--text)}
.lang-menu a[aria-current="true"]{color:var(--text);background:rgba(255,255,255,.05)}
.lang-menu .lang-en{font-size:.78rem;color:var(--text-3)}
@media(max-width:820px){
  /* site.js moves .lang out of the drawer and into the bar at this width, so
     it sits between the brand and the hamburger. No `order` — it is a direct
     child of .nav here, and order would push it past the brand. */
  .lang{margin-left:auto}
  .lang-btn{padding:0 11px;gap:6px}
}

/* ── Pricing ────────────────────────────────────────────────────────
   Three bands against every stage, so the sheet is legible before the
   conversation rather than after it. */
.pr{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
/* .rail-item is a two-column grid — the number, then the content. Without
   this the price row becomes a third child and drops under the number. */
.rail-item .pr{grid-column:2;max-width:64ch}
.pr>div{
  padding:9px 11px;border-radius:10px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
}
.pr-k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:3px}
.pr-v{display:block;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:.98rem;color:var(--text);letter-spacing:-.01em}
@media(max-width:560px){.pr{grid-template-columns:1fr}}

.bands{display:grid;gap:16px;margin-top:44px}
@media(min-width:820px){.bands{grid-template-columns:repeat(3,1fr)}}
.band{
  padding:26px 24px;border-radius:var(--r-lg);
  background:radial-gradient(120% 100% at 50% 0%,var(--tint),transparent 62%),var(--surface);
  border:1px solid var(--line);
}
.band-t{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.03em;
  line-height:1;margin:12px 0 12px;color:var(--text);
}
.band p{font-size:.92rem;color:var(--text-2);line-height:1.55}

.cost-grid{display:grid;gap:14px;margin-top:36px}
@media(min-width:760px){.cost-grid{grid-template-columns:repeat(2,1fr)}}
.cost{padding:20px 22px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line)}
.cost-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:8px}
.cost-h strong{font-size:1rem;color:var(--text)}
.cost-h span{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:1.02rem;color:var(--accent);white-space:nowrap;letter-spacing:-.01em;
}
.cost p{font-size:.9rem;color:var(--text-2);line-height:1.55}

/* ── Price band detail ──────────────────────────────────────────────
   Native <details>, so it works with JavaScript off and a screen reader
   announces it correctly without any ARIA of ours. */
.detail-stack{display:grid;gap:12px;margin-top:26px}
.detail{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.detail[open]{border-color:color-mix(in srgb,var(--accent) 34%,var(--line))}
.detail summary{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:18px 22px;cursor:pointer;list-style:none;transition:background .2s;
}
.detail summary::-webkit-details-marker{display:none}
.detail summary:hover{background:rgba(255,255,255,.03)}
.d-band{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;color:var(--text);letter-spacing:-.015em}
.d-price{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;color:var(--accent);letter-spacing:-.015em}
.d-more{margin-left:auto;font-size:.84rem;font-weight:600;color:var(--text-3);display:inline-flex;align-items:center;gap:6px}
.d-more::after{content:"▾";font-size:.7rem;line-height:1;transition:transform .25s var(--ease)}
.detail[open] .d-more::after{transform:rotate(180deg)}
.d-body{display:grid;gap:26px;padding:4px 22px 24px}
@media(min-width:900px){.d-body{grid-template-columns:1fr 1.15fr;gap:34px}}
.d-copy .lede{font-size:1rem;margin-bottom:14px}
.d-copy .list{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.d-copy .list li{font-size:.92rem;color:var(--text-2);line-height:1.55;padding-left:16px;position:relative}
.d-copy .list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.d-copy .muted{margin-top:14px;color:var(--text-3)}
.d-shots{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.d-shots .shot{margin:0;flex:0 0 auto}
.d-shots .shot img{display:block;width:118px;height:auto;border-radius:10px;border:1px solid var(--line)}
.d-wire{flex-wrap:wrap}
.d-wire svg{width:112px;height:auto;flex:0 0 auto}
.wire-note{flex-basis:100%;font-size:.8rem;color:var(--text-3);line-height:1.5;margin-top:4px}