:root{
  --bg:#F8F9FA;
  --ink:#0B0D1E;
  --ink-2:#242844;
  --muted:#5B6078;
  --muted-2:#8B90A8;
  --line:rgba(11,13,30,0.08);
  --line-2:rgba(11,13,30,0.14);
  --card:#ffffff;
  --glass:rgba(255,255,255,0.72);

  /* SaaS — light sky blue */
  --saas-navy:#1668A8;
  --saas-blue:#7CC4F4;
  --saas-grad:linear-gradient(90deg,#2E9BE6 0%,#5BB3EF 55%,#7CC4F4 100%);
  --saas-grad-soft:linear-gradient(135deg, rgba(46,155,230,0.16), rgba(124,196,244,0.14));

  /* Ecommerce — deep teal / emerald */
  --ecom-teal:#0B7C68;
  --ecom-em:#2FB98A;
  --ecom-grad:linear-gradient(90deg,#0B7C68 0%,#2FB98A 100%);
  --ecom-grad-soft:linear-gradient(135deg, rgba(11,124,104,0.14), rgba(47,185,138,0.12));

  /* mode-aware vars — default = SteelWyre (deep cobalt / steel blue) */
  --brand-a:#0E2D6B;
  --brand-b:#2B8FD9;
  --brand-grad:linear-gradient(90deg,#0E2D6B 0%,#1C4FA8 55%,#2B8FD9 100%);
  --brand-grad-soft:linear-gradient(135deg, rgba(14,45,107,0.16), rgba(43,143,217,0.14));
  --brand-tint:#E1EAF6;
  --brand-ink:#0E2D6B;

  --shadow-sm:0 1px 2px rgba(12,16,40,0.04), 0 1px 1px rgba(12,16,40,0.03);
  --shadow-md:0 6px 20px -8px rgba(12,16,40,0.10), 0 2px 6px rgba(12,16,40,0.04);
  --shadow-lg:0 24px 60px -24px rgba(12,16,40,0.18), 0 8px 20px -8px rgba(12,16,40,0.08);
  --shadow-xl:0 40px 80px -24px rgba(12,16,40,0.22), 0 12px 30px -10px rgba(12,16,40,0.10);

  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:26px;
  --r-2xl:34px;

  --font-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

body[data-mode="neutral"]{
  /* Same as :root defaults — SteelWyre palette */
}

body[data-mode="saas"]{
  --brand-a:#2E9BE6;
  --brand-b:#7CC4F4;
  --brand-grad:var(--saas-grad);
  --brand-grad-soft:var(--saas-grad-soft);
  --brand-tint:#E8F4FD;
  --brand-ink:#1668A8;
}

body[data-mode="ecom"]{
  --brand-a:#0B7C68;
  --brand-b:#2FB98A;
  --brand-grad:var(--ecom-grad);
  --brand-grad-soft:var(--ecom-grad-soft);
  --brand-tint:#E3F4EE;
  --brand-ink:#0A5B4E;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.01em;
  overflow-x:hidden;
}
/* ——— Blueprint board background (whole page) ——— */
body::after{
  content:"";
  position:fixed; inset:0;
  background-image:
    /* minor grid */
    linear-gradient(to right, rgba(11,13,30,0.020) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,13,30,0.020) 1px, transparent 1px),
    /* major grid */
    linear-gradient(to right, rgba(11,13,30,0.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,13,30,0.038) 1px, transparent 1px);
  background-size:
    32px 32px, 32px 32px,
    160px 160px, 160px 160px;
  /* grid runs the full length of the page now — the whole site is one drawing sheet */
  mask-image: linear-gradient(to bottom, transparent 0, black 92px, black calc(100% - 230px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 92px, black calc(100% - 230px), transparent 100%);
  z-index:-3;
  pointer-events:none;
  will-change:opacity;
}
@media (prefers-reduced-motion: no-preference){
  body::after{ animation:bpBoardPulse 9s ease-in-out infinite }
}
@keyframes bpBoardPulse{
  0%, 100%{ opacity:0.6 }
  50%{ opacity:0.85 }
}

/* ——— Colored blueprint tint on mode-button hover ——— */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:0;
  /* colored grid — color set per hover state below */
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--bp-tint-a, #2E9BE6) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bp-tint-a, #2E9BE6) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to right, color-mix(in oklab, var(--bp-tint-b, #7CC4F4) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--bp-tint-b, #7CC4F4) 70%, transparent) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  mask-image: linear-gradient(to bottom, transparent 0, black 92px, black calc(100% - 230px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 92px, black calc(100% - 230px), transparent 100%);
  transition: opacity .9s ease-in-out;
}
body[data-bp-hover="saas"]{ --bp-tint-a:#2E9BE6; --bp-tint-b:#7CC4F4 }
body[data-bp-hover="ecom"]{ --bp-tint-a:#0B7C68; --bp-tint-b:#2FB98A }
@media (prefers-reduced-motion: no-preference){
  body[data-bp-hover="saas"]::before,
  body[data-bp-hover="ecom"]::before{ animation:bpTintPulse 2.6s ease-in-out infinite }
}
body[data-bp-hover="saas"]::before,
body[data-bp-hover="ecom"]::before{ opacity:0.16 }
@keyframes bpTintPulse{
  0%, 100%{ opacity:0.07 }
  50%{ opacity:0.22 }
}

a{color:inherit;text-decoration:none}
button{font-family:inherit}

.mono{font-family:var(--font-mono)}
.serif{font-family:var(--font-display); font-weight:400; letter-spacing:-0.01em}

.container{max-width:1240px; margin:0 auto; padding:0 28px; position:relative}
.container-narrow{max-width:980px; margin:0 auto; padding:0 28px; position:relative}

/* ——— Brand gradient text ——— */
.grad-text{
  background:var(--brand-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ——— Eyebrow chip ——— */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px 6px 10px;
  background:rgba(255,255,255,0.7);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px; color:var(--muted);
  backdrop-filter:blur(10px);
  font-weight:500; letter-spacing:0.02em;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--brand-grad);
}

/* ——— Buttons ——— */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px;
  border-radius:999px;
  font-weight:500; font-size:14px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--ink);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:var(--shadow-lg) }
.btn-grad{
  background:var(--brand-grad);
  color:#fff;
  box-shadow:0 8px 22px -8px color-mix(in oklab, var(--brand-a) 60%, transparent);
}
.btn-grad:hover{ transform:translateY(-1px) }
.btn-ghost{
  background:rgba(255,255,255,0.6);
  border:1px solid var(--line);
  color:var(--ink);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{ background:#fff }
.btn-audit{
  position:relative;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line-2);
  box-shadow:var(--shadow-sm);
}
.btn-audit:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:color-mix(in oklab, var(--brand-a) 35%, transparent) }
.btn-audit .free{
  font-size:10px; font-weight:700; letter-spacing:0.08em;
  padding:3px 7px; border-radius:999px;
  background:var(--brand-tint); color:var(--brand-ink);
  text-transform:uppercase;
}

/* ——— Card base ——— */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.glass{
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:var(--shadow-md);
}

/* ——— One-page anchor scrolling ——— */
html{ scroll-behavior:smooth }
section[id]{ scroll-margin-top:96px }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
}

/* ——— Nav ——— */
.nav-wrap{
  position:fixed; top:18px; left:0; right:0; z-index:50;
  display:flex; justify-content:center;
  pointer-events:none;
  transition:top .35s ease;
}
.nav-wrap.scrolled{ top:10px }
.nav{
  pointer-events:auto;
  display:flex; align-items:center; gap:6px;
  padding:7px 7px 7px 18px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:999px;
  box-shadow:0 14px 40px -16px rgba(12,16,40,0.18), 0 2px 8px rgba(12,16,40,0.04);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.nav-wrap.scrolled .nav{
  background:rgba(255,255,255,0.92);
  box-shadow:0 18px 50px -18px rgba(12,16,40,0.22), 0 2px 10px rgba(12,16,40,0.06);
  padding:6px 6px 6px 16px;
}
.nav .logo{
  display:flex; align-items:center; gap:8px; padding:4px 14px 4px 0;
  font-weight:600; font-size:14px; letter-spacing:-0.02em;
  border-right:1px solid var(--line);
}
.nav .logo img{ width:22px; height:22px }
.nav .logo .by{ color:var(--muted-2); font-weight:400; }
.nav-links{ display:flex; gap:2px; padding:0 6px; margin:0 4px }
.nav-links a{
  padding:8px 14px; border-radius:999px;
  font-size:13px; color:var(--ink-2); font-weight:500;
  white-space:nowrap;
  transition:background .2s, color .2s;
}
.nav-links a:hover{ background:var(--brand-grad-soft); color:var(--brand-ink) }
.nav .cta{
  padding:9px 16px;
  border-radius:999px;
  background:var(--brand-grad);
  color:#fff; font-size:13px; font-weight:600;
  border:0; cursor:pointer;
  box-shadow:0 4px 14px -4px color-mix(in oklab, var(--brand-a) 60%, transparent);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav .cta:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -6px color-mix(in oklab, var(--brand-a) 70%, transparent) }
/* Hamburger — hidden on desktop, shown on mobile */
.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; padding:0 10px; flex-shrink:0;
  background:var(--brand-grad-soft);
  border:1px solid color-mix(in oklab, var(--brand-a) 22%, transparent);
  border-radius:999px; cursor:pointer;
}
.nav-burger span{
  display:block; height:2px; width:100%; border-radius:2px;
  background:var(--brand-ink); transition:transform .3s ease, opacity .2s ease;
}
.nav-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-burger.open span:nth-child(2){ opacity:0 }
.nav-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* Scrim behind the drawer */
.nav-scrim{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:rgba(11,13,30,0.42);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .3s ease;
}
.nav-scrim.on{ opacity:1; pointer-events:auto }

/* Slide-in drawer */
.nav-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:61;
  width:min(320px, 82vw); pointer-events:none;
  display:flex; flex-direction:column; padding:20px 20px 28px;
  background:rgba(255,255,255,0.97);
  -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -20px rgba(12,16,40,0.32);
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.nav-drawer.open{ transform:translateX(0); pointer-events:auto }
.nav-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.nav-drawer-head .logo{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; letter-spacing:-0.02em }
.nav-drawer-head .logo img{ width:22px; height:22px }
.nav-drawer-close{
  width:34px; height:34px; flex-shrink:0; position:relative; cursor:pointer;
  background:rgba(11,13,30,0.04); border:1px solid var(--line); border-radius:999px;
}
.nav-drawer-close span{
  position:absolute; top:50%; left:50%; width:14px; height:2px; border-radius:2px; background:var(--ink-2);
}
.nav-drawer-close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg) }
.nav-drawer-close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg) }
.nav-drawer-links{ display:flex; flex-direction:column; gap:2px; margin-top:16px }
.nav-drawer-links a{
  padding:14px; border-radius:12px;
  font-size:17px; font-weight:600; color:var(--ink); text-decoration:none; letter-spacing:-0.01em;
  opacity:0; transform:translateX(18px);
  transition:transform .35s ease, opacity .35s ease, background .2s ease, color .2s ease;
}
.nav-drawer-links a:hover, .nav-drawer-links a:active{ background:var(--brand-grad-soft); color:var(--brand-ink) }
.nav-drawer.open .nav-drawer-links a{ opacity:1; transform:none }
.nav-drawer.open .nav-drawer-links a:nth-child(1){ transition-delay:.10s }
.nav-drawer.open .nav-drawer-links a:nth-child(2){ transition-delay:.15s }
.nav-drawer.open .nav-drawer-links a:nth-child(3){ transition-delay:.20s }
.nav-drawer.open .nav-drawer-links a:nth-child(4){ transition-delay:.25s }
.nav-drawer.open .nav-drawer-links a:nth-child(5){ transition-delay:.30s }
@media (prefers-reduced-motion: reduce){
  .nav-drawer, .nav-scrim, .nav-drawer-links a{ transition:none }
}

.nav-trigger{
  background:transparent; border:0; cursor:pointer;
  padding:8px 14px; border-radius:999px;
  font-family:inherit; font-size:13px; font-weight:500;
  color:var(--ink-2);
  display:inline-flex; align-items:center; gap:6px;
  transition:background .2s, color .2s;
}
.nav-trigger:hover{ background:var(--brand-grad-soft); color:var(--brand-ink) }
.nav-trigger.active{ background:var(--brand-grad-soft); color:var(--brand-ink) }
.nav-trigger .chev{ transition:transform .25s ease; opacity:0.6 }
.nav-trigger.active .chev{ transform:rotate(180deg); opacity:1 }
.nav-links a.muted{ color:var(--muted) }

/* Mega menu */
.mega{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(820px, calc(100vw - 32px));
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,0.8);
  border-radius:22px;
  box-shadow:0 30px 80px -24px rgba(12,16,40,0.28), 0 8px 24px -8px rgba(12,16,40,0.12);
  opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
  pointer-events:none;
}
.mega.open{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto }
.mega-inner{
  display:grid; grid-template-columns:260px 1fr; gap:0;
}
.mega-left{
  padding:24px 22px;
  background:linear-gradient(180deg, var(--brand-grad-soft), transparent);
  border-right:1px solid var(--line);
}
.mega-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  background:var(--brand-grad); color:#fff;
  font-size:12px; font-weight:600;
  text-decoration:none;
  transition:transform .2s;
}
.mega-cta:hover{ transform:translateY(-1px) }
.mega-grid{
  padding:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
}
.mega-item{
  display:grid; grid-template-columns:32px 1fr 14px; gap:10px; align-items:center;
  padding:12px 12px;
  border-radius:12px;
  color:var(--ink-2); text-decoration:none;
  opacity:0; transform:translateY(6px);
  transition:all .3s cubic-bezier(.2,.8,.2,1);
}
.mega.open .mega-item{ opacity:1; transform:none }
.mega-item:hover{ background:var(--brand-grad-soft) }
.mega-item .n{
  width:32px; height:32px; border-radius:8px;
  background:var(--brand-grad-soft); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700;
}
.mega-item:hover .n{ background:var(--brand-grad); color:#fff }
.mega-item .k{ font-size:13px; font-weight:600; color:var(--ink) }
.mega-item .d{ font-size:11px; color:var(--muted); margin-top:2px; line-height:1.4 }
.mega-item .arr{ color:var(--muted-2); transition:transform .2s, color .2s }
.mega-item:hover .arr{ transform:translate(2px,-2px); color:var(--brand-ink) }

/* ——— Section rail (continuous spine) ——— */
.spine{
  position:absolute; left:50%; top:0; bottom:0;
  width:1px;
  background:linear-gradient(to bottom,
    transparent 0%,
    var(--line-2) 8%,
    var(--line-2) 92%,
    transparent 100%);
  transform:translateX(-50%);
  pointer-events:none;
}

/* ——— Hero ——— */
.hero{
  position:relative;
  padding:150px 0 90px;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:64px;
  align-items:center;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:550;
  font-size:clamp(38px, 4.4vw, 62px);
  line-height:1.04;
  letter-spacing:-0.03em;
  margin:18px 0 22px;
  color:var(--ink);
  text-wrap:balance;
}
.hero h1 em{ font-style:italic; font-weight:400; color:var(--brand-ink) }
.hero .sub{
  font-size:17px; line-height:1.6; color:var(--muted);
  max-width:540px; margin:0 0 8px;
  text-wrap:pretty;
}
.hero .supp{
  font-size:14px; color:var(--muted-2);
  font-family:var(--font-mono); letter-spacing:0;
  margin-top:12px;
}

/* ——— Mode switch (pill segmented) ——— */
.mode-switch{
  display:inline-flex; padding:4px;
  background:rgba(11,13,30,0.06);
  border-radius:999px;
  border:1px solid var(--line);
}
.mode-switch button{
  border:0; background:transparent; cursor:pointer;
  padding:9px 18px; border-radius:999px;
  font-size:13px; color:var(--muted);
  font-weight:500;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .35s ease-in-out, background-color .35s ease-in-out, color .35s ease-in-out, box-shadow .35s ease-in-out;
}
.mode-switch button:hover{
  transform:translateY(-1px);
  background:rgba(11,13,30,0.05);
  color:var(--ink);
}
.mode-switch button:hover .dot{
  transform:scale(1.25);
  box-shadow:0 0 0 4px rgba(11,13,30,0.04);
}
.mode-switch button.active{
  background:#fff;
  color:var(--ink);
  box-shadow:0 4px 12px -4px rgba(12,16,40,0.16), 0 1px 2px rgba(12,16,40,0.08);
}
.mode-switch button.active:hover{
  background:#fff;
  box-shadow:0 7px 18px -6px rgba(12,16,40,0.22), 0 1px 2px rgba(12,16,40,0.08);
}
.mode-switch .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--brand-grad);
  transition:transform .35s ease-in-out, box-shadow .35s ease-in-out;
}

/* ——— Accordion (features) ——— */
.acc{
  border-top:1px solid var(--line);
}
.acc:last-child{ border-bottom:1px solid var(--line) }
.acc-head{
  width:100%; text-align:left;
  display:flex; align-items:center; gap:12px;
  padding:16px 0;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font-sans);
  font-size:15px; font-weight:500; color:var(--ink);
}
.acc-head .num{
  width:24px; height:24px; border-radius:6px;
  background:var(--brand-tint); color:var(--brand-ink);
  font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.acc.open .acc-head .num{
  background:var(--brand-grad); color:#fff;
}
.acc-head .chev{
  margin-left:auto; color:var(--muted-2);
  transition:transform .3s ease;
}
.acc.open .acc-head .chev{ transform:rotate(180deg); color:var(--ink) }
.acc-body{
  max-height:0; overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  opacity:0;
}
.acc.open .acc-body{ max-height:220px; opacity:1 }
.acc-body-inner{
  padding:0 0 18px 36px;
  font-size:14px; color:var(--muted); line-height:1.55;
}

/* ——— Section headers ——— */
.sec{ position:relative; padding:120px 0 }
.sec-head{ margin-bottom:48px }
.sec-head .label{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted-2);
  display:flex; align-items:center; gap:10px;
}
.sec-head .label::before{
  content:""; width:18px; height:1px; background:var(--line-2);
}
.sec-head h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(34px,4.4vw,58px); line-height:1.02;
  letter-spacing:-0.02em; margin:14px 0 10px;
  max-width:780px;
}
.sec-head p{
  font-size:17px; line-height:1.55; color:var(--muted);
  max-width:620px; margin:0;
}

/* ——— Fake UI primitives ——— */
.ui-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  background:var(--brand-tint);
  color:var(--brand-ink);
  border-radius:999px;
  font-size:11px; font-weight:500;
  border:1px solid color-mix(in oklab, var(--brand-a) 22%, transparent);
}
.ui-chip.neutral{
  background:#fff; color:var(--ink-2);
  border:1px solid var(--line);
}
.ui-chip.good{
  background:#E8FBEF; color:#0A7C3A;
  border-color:#B7E9C8;
}
.ui-chip.warn{
  background:#FFF4E4; color:#B36A00;
  border-color:#F0D6A8;
}

.ui-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 16px;
  box-shadow:var(--shadow-sm);
}
.ui-card .title{
  font-size:13px; font-weight:600; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.ui-card .sub{ font-size:12px; color:var(--muted); margin-top:3px; line-height:1.45 }

/* ——— Symbolic browser ——— */
.sym-browser{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  overflow:hidden;
  position:relative;
}
.sym-browser .bar{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:rgba(248,249,250,0.6);
}
.sym-browser .dots{ display:flex; gap:6px }
.sym-browser .dots span{ width:10px; height:10px; border-radius:50%; background:#DADCE3 }
.sym-browser .url{
  flex:1;
  height:28px; padding:0 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; color:var(--muted-2);
}
.sym-browser .body{ padding:20px }

/* input typing animation */
.type-caret::after{
  content:"";
  display:inline-block; width:1px; height:1em;
  background:var(--ink); margin-left:2px;
  animation:caret 1s steps(2) infinite;
  vertical-align:-2px;
}
@keyframes caret{ 50%{opacity:0} }

/* ——— Spec row (key/value, code-like) ——— */
.spec{
  display:grid; grid-template-columns:128px 1fr; gap:12px;
  padding:10px 0;
  border-bottom:1px dashed var(--line);
  font-size:13px;
}
.spec:last-child{ border-bottom:0 }
.spec .k{ color:var(--muted-2); font-family:var(--font-mono); font-size:12px; letter-spacing:0.02em }
.spec .v{ color:var(--ink-2) }

/* ——— Blueprint chapter stack ——— */
.ch-stack{ display:flex; flex-direction:column; gap:14px }
.ch{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:20px 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease;
}
.ch:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md) }
.ch .idx{
  font-family:var(--font-mono); font-size:11px; color:var(--muted-2);
  letter-spacing:0.08em;
}
.ch .h{
  font-family:var(--font-display); font-weight:400;
  font-size:22px; line-height:1.15; margin:2px 0 6px;
  letter-spacing:-0.01em;
}
.ch .d{ font-size:13px; color:var(--muted); line-height:1.5 }
.ch.locked{ opacity:0.72 }
.ch.locked .body-blur{ filter:blur(4px); user-select:none }

/* lock glyph */
.lock-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:11px; font-family:var(--font-mono);
  background:#EDF0F5; color:#3E4A66;
  border:1px solid #D5DCE8;
}

/* ——— Checkpoint gate ——— */
.gate{
  position:relative;
  border-radius:var(--r-2xl);
  padding:48px 56px;
  background:
    radial-gradient(800px 300px at 50% -10%, color-mix(in oklab, var(--brand-a) 18%, transparent), transparent 60%),
    #0B0D1E;
  color:#fff;
  overflow:hidden;
  box-shadow:var(--shadow-xl);
}
.gate::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 0%, color-mix(in oklab, var(--brand-a) 8%, transparent) 50%, transparent 100%);
  pointer-events:none;
}
.gate .price{
  font-family:var(--font-display);
  font-size:72px; font-weight:400; letter-spacing:-0.02em;
  line-height:1;
}
.gate .price .cur{ font-size:28px; color:var(--muted-2); vertical-align:top; margin-right:2px }
.gate .price .mini{ font-size:14px; color:var(--muted-2); font-family:var(--font-sans); font-weight:400; letter-spacing:0 }

/* ——— File tree / repo ——— */
.repo{
  background:#0B0D1E;
  color:#D6D9E8;
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-xl);
  border:1px solid rgba(255,255,255,0.08);
}
.repo .bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.08);
  font-family:var(--font-mono); font-size:12px; color:#A7ABC2;
}
.repo .bar .dot{ width:8px; height:8px; border-radius:50%; background:#3F445F }
.repo .tree{ font-family:var(--font-mono); font-size:13px; line-height:1.7; padding:16px 18px }
.repo .tree .line{ color:#9BA0BC }
.repo .tree .dir{ color:#C2C6E0 }
.repo .tree .file{ color:#8E93B2 }
.repo .tree .key{ color:#7DB8F0 }
.repo .tree .keyT{ color:#5BC9A8 }

/* ——— Log row ——— */
.log{
  font-family:var(--font-mono); font-size:12px;
  color:var(--muted);
  padding:7px 0;
  border-bottom:1px dashed var(--line);
  display:grid; grid-template-columns:90px 1fr auto; gap:14px; align-items:center;
}
.log:last-child{ border-bottom:0 }
.log .t{ color:var(--muted-2) }
.log .ok{ color:#0A7C3A }

/* ——— Approval tags ——— */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px;
  font-family:var(--font-mono); font-size:11px;
  background:#F3F4F8; color:var(--muted);
  border:1px solid var(--line); border-radius:6px;
}
.tag.ok{ background:#E8FBEF; color:#0A7C3A; border-color:#B7E9C8 }
.tag.live{ background:#EEF0FF; color:#2E3AAF; border-color:#CFD3F5 }

/* ——— Audit tier picker (Lite / Advanced) ——— */
.audit-tiers{ margin-top:42px; padding-top:24px; border-top:1px solid var(--line-2) }
.tier-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:5px; border-radius:14px;
  background:rgba(11,13,30,0.035); border:1px solid var(--line);
}
.tier-tab{
  appearance:none; cursor:pointer; text-align:left;
  padding:12px 14px; border-radius:10px; border:1px solid transparent;
  background:transparent; transition:all .22s ease;
  display:flex; align-items:flex-start; gap:9px;
}
.tier-tab:hover{ background:rgba(255,255,255,0.5) }
.tier-tab.active{ background:#fff; border-color:var(--line); box-shadow:var(--shadow-sm, 0 4px 14px -8px rgba(11,13,30,0.25)) }
.tier-tab .tt-text{ display:flex; flex-direction:column; gap:3px }
.tier-tab .tt-name{ display:block; font-family:var(--font-display); font-size:17px; font-weight:600; letter-spacing:-0.015em; line-height:1; color:var(--muted) }
.tier-tab.active .tt-name{ color:var(--ink) }
.tier-tab .tt-meta{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; color:var(--muted-2); line-height:1.3 }
.tier-tab .tt-dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:3px;
  border:2px solid var(--line-2); transition:all .22s ease;
}
.tier-tab.active .tt-dot{ border-color:transparent; background:var(--brand-grad); box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-a) 22%, transparent) }

.tier-panel{ margin-top:16px; animation:fadeSlide .35s ease both }
.tier-panel .tp-lead{ font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0 0 14px; text-wrap:pretty }
.tier-panel .tp-lead b{ color:var(--ink); font-weight:600 }
.tier-label{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.14em; color:var(--muted-2); text-transform:uppercase; margin-bottom:9px }

.tp-urlfield{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; border-radius:11px;
  background:#fff; border:1px solid var(--line);
  font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2); margin-bottom:14px;
}
.tp-urlfield svg{ color:var(--muted-2); flex-shrink:0 }
.tp-urlfield .req{ margin-left:auto; font-size:9.5px; letter-spacing:0.1em; color:#2E3AAF; background:#EEF0FF; border:1px solid #CFD3F5; padding:2px 7px; border-radius:5px }

.tp-chips{ display:flex; flex-wrap:wrap; gap:8px }
.tp-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 12px; border-radius:999px;
  background:#fff; border:1px dashed var(--line-2);
  font-size:12px; color:var(--ink-2); font-weight:500;
}
.tp-chip svg{ flex-shrink:0; color:var(--muted-2) }
.tp-chip.app{ border-style:solid; border-color:var(--line) }
.tp-chip .conn{ width:6px; height:6px; border-radius:50%; background:var(--brand-grad) }

/* ——— Decorative grid ——— */
.grid-fade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(11,13,30,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,13,30,0.04) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black 40%, transparent 80%);
}

/* ——— Orbit (resync) ——— */
.orbit{ position:relative; width:100%; aspect-ratio:1; max-width:460px; margin:0 auto }
.orbit .ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:1px dashed var(--line-2);
}
.orbit .ring.r2{ inset:14%; border-color:var(--line) }
.orbit .ring.r3{ inset:28%; border-color:var(--line) }
.orbit .core{
  position:absolute; inset:38%;
  border-radius:50%;
  background:var(--brand-grad);
  box-shadow:0 20px 60px -10px color-mix(in oklab, var(--brand-a) 50%, transparent);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.1em;
}
.orbit .sat{
  position:absolute; top:50%; left:50%;
  transform-origin:0 0;
}
.orbit .sat-inner{
  transform:translate(-50%,-50%);
  padding:8px 12px;
  background:#fff; border:1px solid var(--line);
  border-radius:10px; font-family:var(--font-mono); font-size:11px;
  color:var(--ink-2);
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}

/* ——— Integrations marquee ——— */
.marquee{
  overflow:hidden;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track{
  display:flex; gap:12px;
  width:max-content;
  padding:4px 0;
  animation:marquee 36s linear infinite;
}
.marquee.reverse .marquee-track{ animation-direction:reverse; animation-duration:42s }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes marquee{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none }
}
.int-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
  flex-shrink:0;
}
.int-chip .n{ font-size:14px; font-weight:600; color:var(--ink); letter-spacing:-0.01em }
.int-chip .t{
  font-family:var(--font-mono); font-size:11px; color:var(--muted-2);
  padding-left:10px; border-left:1px solid var(--line);
}

/* ——— Scroll animations ——— */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1) }
.reveal.on{ opacity:1; transform:none }
.reveal.bounce{ transition:opacity .7s ease, transform .9s cubic-bezier(.34,1.56,.64,1) }
.reveal.bounce.on{ transform:none }
.reveal.left{ transform:translateX(-32px) }
.reveal.left.on{ transform:none }
.reveal.right{ transform:translateX(32px) }
.reveal.right.on{ transform:none }
.reveal.scale{ transform:scale(.94) }
.reveal.scale.on{ transform:none }

/* Ripple text: each word fades + slides up in sequence */
.ripple > *{
  display:inline-block;
  opacity:0; transform:translateY(14px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.ripple.on > *{ opacity:1; transform:none }

/* ——— Comparison table ——— */
.cmp-row{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:0;
  border-top:1px solid var(--line);
}
.cmp-row:last-child{ border-bottom:1px solid var(--line) }
.cmp-row > div{ padding:16px 18px; font-size:14px }
.cmp-row .k{ color:var(--muted); font-weight:500 }
.cmp-row .generic{ color:var(--muted); background:rgba(11,13,30,0.02) }
.cmp-row .stratify{ color:var(--ink); font-weight:500; background:linear-gradient(180deg, color-mix(in oklab, var(--brand-a) 6%, transparent), transparent) }
.cmp-head{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted-2); font-weight:600 }

/* Flow steps with connector */
.flow-steps{ display:flex; flex-direction:column; gap:10px; position:relative }
.flow-step{
  display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:center;
  padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow-sm);
}
.flow-step .n{
  width:36px; height:36px; border-radius:10px;
  background:var(--brand-grad-soft); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:13px;
}
.flow-step.active .n{ background:var(--brand-grad); color:#fff }

/* Outcome cards */
.out-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative; overflow:hidden;
}
.out-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md) }
.out-card .ico{
  width:38px; height:38px; border-radius:10px;
  background:var(--brand-grad-soft); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px; font-weight:600;
}

/* Connective map */
.map-field{
  position:relative; width:100%; aspect-ratio:16/10;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--brand-a) 8%, transparent), transparent 70%),
    #fff;
  border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden;
}
.map-node{
  position:absolute; transform:translate(-50%,-50%);
  padding:10px 14px; background:#fff; border:1px solid var(--line);
  border-radius:10px; font-size:12px; font-weight:600;
  box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:8px; color:var(--ink-2);
}
.map-node .dot{
  width:8px; height:8px; border-radius:50%; background:var(--brand-grad);
}
.map-node.core{
  padding:14px 18px; background:var(--ink); color:#fff; border-color:transparent;
  box-shadow:0 14px 40px -14px color-mix(in oklab, var(--brand-a) 60%, transparent);
}

@keyframes spin{ to { transform:rotate(360deg) } }
.rotate-slow{ animation:spin 60s linear infinite }
.rotate-med{ animation:spin 30s linear infinite }
.rotate-mid-r{ animation:spin 45s linear infinite reverse }

/* ——— Progress bar ——— */
.bar-track{
  height:6px; background:rgba(11,13,30,0.06);
  border-radius:999px; overflow:hidden;
}
.bar-fill{
  height:100%;
  background:var(--brand-grad);
  border-radius:999px;
  transition:width .8s cubic-bezier(.2,.8,.2,1);
}

/* ——— Tweaks panel ——— */
.tweaks{
  position:fixed; right:18px; bottom:18px; z-index:60;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width:280px; padding:14px;
  font-size:12px;
  display:none;
}
.tweaks.open{ display:block }
.tweaks .row{ display:flex; justify-content:space-between; align-items:center; margin:10px 0 }
.tweaks h4{ margin:0 0 8px; font-size:12px; font-family:var(--font-mono); letter-spacing:0.1em; color:var(--muted-2); text-transform:uppercase }

/* ——— Utility ——— */
.flex{ display:flex } .col{ flex-direction:column } .items-center{ align-items:center } .items-start{ align-items:flex-start }
.justify-between{ justify-content:space-between } .gap-4{ gap:16px } .gap-3{ gap:12px } .gap-2{ gap:8px } .gap-6{ gap:24px } .gap-8{ gap:32px }
.grid{ display:grid }
.w-full{ width:100% }
.text-center{ text-align:center }
.fade-in{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease }
.fade-in.on{ opacity:1; transform:none }

/* entry animation for swapped hero copy */
.swap{ animation:swap .5s ease both }
@keyframes swap{
  from{ opacity:0; transform:translateY(6px) }
  to{ opacity:1; transform:none }
}

/* ——— Pillars (01) ——— */
.pillar{ border-top:2px solid var(--ink); padding:20px 2px 0; height:100%; cursor:pointer; display:flex; flex-direction:column }
.pillar .kick{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); font-weight:600; transition:color .4s }
.pillar.live .kick{ color:var(--brand-ink) }
.pillar .track{ height:2px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:auto; padding-top:0 }
.pillar .track span{ display:block; height:100%; width:0; background:var(--brand-grad) }
.pillar.live .track span{ animation:trackFill 3.2s linear forwards }
.pillar p{ margin-bottom:18px !important }
@keyframes trackFill{ from{width:0} to{width:100%} }
.pillar h3{ font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-0.02em; line-height:1.18; margin:12px 0 10px; text-wrap:balance }
.pillar p{ font-size:14.5px; color:var(--muted); line-height:1.62; margin:0; text-wrap:pretty }

/* ——— System showcase (01, full-width animated) ——— */
.showcase{
  margin-top:64px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow-xl);
  padding:24px;
  position:relative;
}
.showcase-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding:0 4px }

/* ownership state — the whole showcase becomes “the asset” */
.showcase{ transition:border-color .5s ease, box-shadow .5s ease }
.showcase.owned{
  border-color:color-mix(in oklab, var(--brand-a) 45%, transparent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-a) 10%, transparent), var(--shadow-md);
}
.showcase .show-zone{ transition:border-color .5s ease }
.showcase.owned .show-zone{ border-color:color-mix(in oklab, var(--brand-a) 30%, transparent) }
.owned-strip{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s ease }
.owned-strip.on{ grid-template-rows:1fr }
.owned-strip > div{ overflow:hidden }
.owned-strip-inner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding:12px 16px;
  background:var(--brand-tint);
  border:1px solid color-mix(in oklab, var(--brand-a) 22%, transparent);
  border-radius:14px;
  font-size:13px; color:var(--brand-ink); font-weight:500;
}
.showcase-grid{ display:grid; grid-template-columns:1fr 44px 1fr 44px 1fr; align-items:stretch }
.show-zone{
  border:1px solid var(--line); border-radius:18px; padding:18px;
  background:#fff;
  display:flex; flex-direction:column; gap:12px;
  min-height:250px;
  opacity:.55;
  transition:opacity .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.show-zone.active{
  opacity:1;
  border-color:color-mix(in oklab, var(--brand-a) 30%, transparent);
  box-shadow:var(--shadow-md);
}
.show-zone .zk{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  color:var(--muted-2); text-transform:uppercase;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.show-link{ display:flex; align-items:center; justify-content:center }
.show-link .dash{
  width:26px; height:2px;
  background-image:repeating-linear-gradient(90deg, color-mix(in oklab, var(--brand-a) 60%, transparent) 0 5px, transparent 5px 10px);
  background-size:10px 2px;
  opacity:.3;
  transition:opacity .4s;
}
.show-link.flow .dash{ animation:dashflow .6s linear infinite; opacity:1 }
@keyframes dashflow{ to{ background-position:10px 0 } }
/* ——— Under the hood · blueprint schematic ——— */
.bp{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(165deg,
    color-mix(in oklab, var(--brand-a) 80%, #0B1026) 0%,
    color-mix(in oklab, var(--brand-a) 55%, #070C20) 100%);
  color:#E6EDFB;
  padding:26px 28px 22px;
  box-shadow:var(--shadow-lg);
}
.bp::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.085) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.085) 1px, transparent 1px);
  background-size:22px 22px, 22px 22px, 110px 110px, 110px 110px;
}
@media (prefers-reduced-motion: no-preference){
  .bp::after{
    content:""; position:absolute; inset:-40% auto; width:140px; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.055), transparent);
    transform:skewX(-12deg);
    animation:bpScan 9s ease-in-out infinite;
  }
}
@keyframes bpScan{
  0%, 55%{ left:-12% }
  90%, 100%{ left:108% }
}
.bp > *{ position:relative; z-index:1 }
.bp-head{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em;
  color:rgba(230,237,251,0.65);
  border-bottom:1px solid rgba(255,255,255,0.22);
  padding-bottom:12px; margin-bottom:24px;
}
.bp-flow{ display:grid; grid-template-columns:auto 58px 1fr 58px 1fr 58px 1fr 58px auto; align-items:stretch }
.bp-end{
  writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.22em; white-space:nowrap;
  border:1px dashed rgba(255,255,255,0.45); border-radius:8px;
  padding:14px 9px; color:rgba(230,237,251,0.85);
  transition:border-color .45s, color .45s, box-shadow .45s, background .45s;
}
.bp-end.live{
  border-style:solid; border-color:rgba(255,255,255,0.9); color:#fff;
  background:rgba(255,255,255,0.07);
  box-shadow:0 0 22px rgba(255,255,255,0.14);
}
.bp-link{ position:relative; min-height:120px }
.bp-link .wire{
  position:absolute; left:7px; right:7px; top:50%; height:1.5px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0.45) 0 6px, transparent 6px 12px);
}
@media (prefers-reduced-motion: no-preference){
  .bp-link.flow .wire{ animation:bpFlow .5s linear infinite }
  .bp-link.flow .wire::after{ border-left-color:#fff }
}
.bp-link.flow .lbl{ color:#fff }
@keyframes bpFlow{ to{ background-position:12px 0 } }
.bp-link .wire::after{
  content:""; position:absolute; right:-2px; top:-3.5px;
  border-left:7px solid rgba(255,255,255,0.8);
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:border-color .3s;
}
.bp-link .lbl{
  position:absolute; top:calc(50% - 24px); left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:9px; letter-spacing:0.1em; white-space:nowrap;
  color:rgba(230,237,251,0.7);
}
.bp-plate{
  position:relative; height:100%;
  border:1px solid rgba(255,255,255,0.42);
  background:rgba(255,255,255,0.05);
  padding:18px 18px 12px;
  transition:background .45s, border-color .45s, box-shadow .45s;
}
.bp-plate:hover{ background:rgba(255,255,255,0.095); border-color:rgba(255,255,255,0.75) }
.bp-plate.live{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.85);
  box-shadow:0 0 26px rgba(255,255,255,0.12), inset 0 0 26px rgba(255,255,255,0.05);
}
.bp-plate .tick{ position:absolute; width:9px; height:9px; border:0 solid rgba(255,255,255,0.65); transition:width .35s, height .35s, border-color .35s }
.bp-plate.live .tick{ width:14px; height:14px; border-color:#fff }
.bp-plate.live .bp-stage{ color:#fff }
.bp-plate .t1{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px }
.bp-plate .t2{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px }
.bp-plate .t3{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px }
.bp-plate .t4{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px }
.bp-stage{ font-family:var(--font-mono); font-size:9px; letter-spacing:0.2em; color:rgba(230,237,251,0.55) }
.bp-name{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-0.01em; margin-top:7px; color:#fff }
.bp-note{ font-size:12px; color:rgba(230,237,251,0.72); line-height:1.55; margin-top:5px; text-wrap:pretty }
.bp-specs{ margin-top:13px; border-top:1px solid rgba(255,255,255,0.28) }
.bp-spec{
  display:grid; grid-template-columns:86px 1fr; gap:8px; padding:7px 0;
  border-bottom:1px dashed rgba(255,255,255,0.16);
  font-family:var(--font-mono); font-size:11px;
}
.bp-spec:last-child{ border-bottom:0 }
.bp-spec .k{ color:rgba(230,237,251,0.55); text-transform:uppercase; letter-spacing:0.08em; font-size:9.5px; padding-top:1.5px }
.bp-spec .v{ color:#fff }
.bp-foot{
  display:flex; justify-content:space-between; align-items:flex-end; gap:18px; flex-wrap:wrap;
  margin-top:24px; border-top:1px solid rgba(255,255,255,0.22); padding-top:14px;
}
.bp-bom{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em;
  color:rgba(230,237,251,0.7); max-width:520px; line-height:1.9;
}
.bp-tb{
  display:grid; grid-template-columns:auto auto;
  border:1px solid rgba(255,255,255,0.42);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.08em;
  background:rgba(255,255,255,0.03);
}
.bp-tb > span{ padding:5px 11px; border-top:1px solid rgba(255,255,255,0.2); color:#fff }
.bp-tb > span:nth-child(odd){ border-right:1px solid rgba(255,255,255,0.2); color:rgba(230,237,251,0.55) }
.bp-tb > span:nth-child(-n+2){ border-top:0 }

@keyframes bpFlowV{ to{ background-position:0 12px } }
@media (max-width: 960px){
  .bp{ padding:18px 16px }
  .bp-flow{ grid-template-columns:1fr }
  .bp-end{ writing-mode:horizontal-tb; transform:none; padding:10px; justify-content:center }
  .bp-link{ min-height:52px }
  .bp-link .wire{
    left:50%; right:auto; top:8px; bottom:8px; width:1.5px; height:auto;
    background:repeating-linear-gradient(180deg, rgba(255,255,255,0.45) 0 6px, transparent 6px 12px);
  }
  @media (prefers-reduced-motion: no-preference){
    .bp-link.flow .wire{ animation:bpFlowV .5s linear infinite }
  }
  .bp-link .wire::after{
    right:auto; left:-4.5px; top:auto; bottom:-2px;
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:7px solid rgba(255,255,255,0.8); border-bottom:0;
  }
  .bp-link.flow .wire::after{ border-top-color:#fff }
  .bp-link .lbl{ top:50%; left:calc(50% + 14px); transform:translateY(-50%) }
  .bp-foot{ align-items:stretch }
}

@keyframes fadeSlide{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
@keyframes slideRight{ from{ opacity:0; transform:translateX(-10px) } to{ opacity:1; transform:none } }
@keyframes pulseDot{ 0%,100%{ opacity:.5 } 50%{ opacity:1 } }

/* ——— Ledger (02) ——— */
.ledger-grid{ grid-template-columns:1.15fr 1fr; gap:56px; align-items:stretch }
.ledger-row{
  display:grid; grid-template-columns:1fr auto; gap:20px; align-items:baseline;
  padding:20px 4px;
  border-top:1px solid var(--line-2);
}
.ledger-row:last-child{ border-bottom:1px solid var(--line-2) }
.ledger-row .k{ font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-0.01em }
.ledger-row .d{ font-size:13.5px; color:var(--muted); margin-top:5px; line-height:1.55; max-width:420px }
.ledger-row .cost{
  font-family:var(--font-display); font-size:26px; font-weight:400;
  color:var(--muted-2); letter-spacing:-0.02em; white-space:nowrap;
}
.ledger-pick{
  position:relative;
  display:flex; flex-direction:column;
  border-radius:var(--r-xl);
  padding:34px 36px;
  background:
    radial-gradient(600px 240px at 50% -10%, color-mix(in oklab, var(--brand-a) 22%, transparent), transparent 60%),
    #0B0D1E;
  color:#fff;
  box-shadow:var(--shadow-xl);
  overflow:hidden;
}
.stmt-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:36px; margin-top:72px }
.stmt{ border-top:1px solid var(--ink); padding-top:16px }
.stmt h3{ font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-0.015em; margin:0 0 8px }
.stmt p{ font-size:13.5px; color:var(--muted); line-height:1.6; margin:0; text-wrap:pretty }

/* ——— Flow rail (03) ——— */
.flow-list{ position:relative; display:flex; flex-direction:column; gap:6px }
.flow-list::before{
  content:""; position:absolute; left:18px; top:28px; bottom:28px;
  width:1px; background:var(--line-2);
}
.flow-item{
  position:relative; text-align:left; cursor:pointer; font-family:inherit;
  padding:15px 18px 15px 44px;
  border-radius:14px;
  background:transparent; border:1px solid transparent;
  transition:all .3s;
}
.flow-item::before{
  content:""; position:absolute; left:13px; top:21px;
  width:11px; height:11px; border-radius:50%;
  box-sizing:border-box;
  background:var(--bg); border:2px solid var(--line-2);
  transition:all .3s;
  z-index:1;
}
.flow-item.active{
  background:#fff;
  border-color:color-mix(in oklab, var(--brand-a) 30%, transparent);
  box-shadow:var(--shadow-md);
}
.flow-item.active::before{
  background:var(--brand-a); border-color:var(--brand-a);
  box-shadow:0 0 0 4px var(--brand-tint);
}

/* ——— Resync loop (05) ——— */
.loop-wrap{ position:relative; width:100%; max-width:460px; aspect-ratio:1; margin:0 auto }
.loop-track{ animation:dashcrawl 5s linear infinite }
@keyframes dashcrawl{ to{ stroke-dashoffset:-60 } }
.loop-node{
  position:absolute; transform:translate(-50%,-50%);
  padding:9px 16px; border-radius:999px;
  background:#fff; border:1px solid var(--line-2);
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink-2);
  box-shadow:var(--shadow-sm); cursor:pointer;
  white-space:nowrap; z-index:2;
  transition:all .4s ease;
}
.loop-node.active{
  background:var(--brand-grad); color:#fff; border-color:transparent;
  box-shadow:0 10px 30px -10px color-mix(in oklab, var(--brand-a) 60%, transparent);
}
.loop-row{
  text-align:left; cursor:pointer; font-family:inherit;
  padding:15px 18px; border-radius:14px;
  background:transparent; border:1px solid var(--line);
  transition:all .3s;
}
.loop-row.active{
  background:#fff;
  border-color:color-mix(in oklab, var(--brand-a) 30%, transparent);
  box-shadow:var(--shadow-md);
}

/* ——— Mobile / Tablet ——— */
@media (max-width:900px){

  /* Nav */
  .nav-wrap{ top:12px }
  .nav{ padding:6px 8px 6px 14px; gap:10px }
  .nav-links{ display:none }
  .nav-burger{ display:flex }

  /* Hero */
  .hero{ padding:110px 0 52px }
  .hero h1{ font-size:clamp(34px, 8vw, 54px) }
  .hero .sub{ font-size:16px }
  .hero-grid{ grid-template-columns:1fr; gap:44px }
  .whatis-grid{ grid-template-columns:1fr !important; gap:28px !important }
  .hood-grid{ grid-template-columns:1fr !important }
  .showcase{ padding:14px; margin-top:40px; border-radius:var(--r-xl) }
  .showcase-grid{ grid-template-columns:1fr }
  .show-zone{ min-height:0 }
  .show-link{ height:32px }
  .show-link .dash{ transform:rotate(90deg) }
  .ledger-grid{ grid-template-columns:1fr !important; gap:36px !important }
  .ledger-pick{ padding:26px 22px }
  .stmt-grid{ grid-template-columns:1fr 1fr; gap:24px; margin-top:48px }
  .loop-wrap{ max-width:320px }
  .loop-node{ font-size:11px; padding:7px 12px }
  .process-grid{ grid-template-columns:1fr !important; gap:24px !important }
  .problem-grid{ grid-template-columns:1fr !important; gap:28px !important }
  .components-strip{ grid-template-columns:1fr 1fr !important }

  /* Sections */
  .sec{ padding:72px 0 }
  .container,.container-narrow{ padding:0 18px }

  /* Section head */
  .sec-head h2{ font-size:clamp(28px, 6vw, 44px) }
  .sec-head p{ font-size:15px }

  /* Feature rows — stack vertically */
  .feature-row-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
    direction:ltr !important;
  }
  .feature-row-grid > *{ direction:ltr !important }

  /* Clarity comparison grid — stack */
  .clarity-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  /* About — stack */
  .about-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  /* Gate (checkpoint) */
  .gate{ padding:32px 20px }
  .gate-inner-grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .gate .price{ font-size:54px }

  /* Repo grid */
  .repo-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  /* Execution grid */
  .exec-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  /* Resync grid */
  .resync-grid{
    grid-template-columns:1fr !important;
    gap:32px !important;
  }
  .orbit{ max-width:280px }

  /* Trust strip */
  .trust-grid{
    grid-template-columns:1fr 1fr !important;
    gap:18px !important;
  }

  /* Wizard steps — wrap */
  .wizard-steps{ gap:4px; flex-wrap:wrap }
  .wizard-steps > *{ font-size:11px; padding:5px 8px }

  /* Synthesis cards grid → 1 col */
  .syn-cards-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  /* Builder inner grid */
  .builder-inner-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  /* Channel chips wrap */
  .channel-grid{
    grid-template-columns:1fr 1fr !important;
  }

  /* Fragment stream → compact */
  .frag-stream > *{ padding:6px 10px !important }

  /* Acc body padding */
  .acc-body-inner{ padding-left:24px }

  /* Floating chips hidden on mobile */
  .hero-float{ display:none !important }

  /* Sym browser padding */
  .sym-browser .body{ padding:14px }

  /* Scattered tools — smaller  */
  .scatter-tool{ padding:6px 10px !important; font-size:11px !important }

  /* Clarity alt row — wrap */
  .clarity-alt-row{
    grid-template-columns:1fr !important;
  }

  /* Final CTA heading */
  .final-h{ font-size:clamp(32px, 7vw, 52px) !important }

  /* Footer */
  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:28px !important;
  }
  .footer-inner{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:16px !important;
  }
  .footer-links{ flex-wrap:wrap; gap:12px !important }

  /* Blueprint / Checkpoint code block */
  .gate-code{ font-size:11px }

  /* Mode switch wraps */
  .mode-switch{ width:100% }
  .mode-switch button{ flex:1; justify-content:center }
}

@media (max-width:540px){

  .nav .logo{ display:none }

  .hero h1{ font-size:clamp(28px, 9vw, 44px) }

  /* Feature viz → compact heights */
  .sym-browser .body{ padding:12px }
  .sym-browser .bar{ padding:10px 12px }

  /* Footer — single col on small */
  .footer-grid{
    grid-template-columns:1fr !important;
  }

  /* Trust strip → 1 col */
  .trust-grid{
    grid-template-columns:1fr !important;
  }

  /* Orbit smaller */
  .orbit{ max-width:220px }
  .loop-wrap{ max-width:260px }
  .stmt-grid{ grid-template-columns:1fr }

  /* Card padding */
  .card{ border-radius:var(--r-md) }

  /* Gate price */
  .gate .price{ font-size:44px }
  .gate{ border-radius:var(--r-xl) }

  /* Acc head font */
  .acc-head{ font-size:14px }

  /* Sec head h2 */
  .sec-head h2{ font-size:clamp(24px, 8vw, 38px) }

  /* Builder card */
  .card{ padding:16px }
}

/* ════════════════════════════════════════════════════════════════════
   BLUEPRINT BOARD SKIN — the whole site reads as one engineering drawing.
   Pulled from the “Under the hood” schematic: sheet stamps, corner ticks,
   dimension lines, registration marks, and a title block.
   ════════════════════════════════════════════════════════════════════ */

/* ——— Cursor-following warmth, tuned to the active state palette ——— */
.warm-field{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(680px circle at var(--wx,50%) var(--wy,40%),
    color-mix(in oklab, var(--brand-a) 13%, transparent),
    color-mix(in oklab, var(--brand-b) 6%, transparent) 44%,
    transparent 72%);
  mix-blend-mode:multiply;
  opacity:0;
  transition:opacity 1.4s ease-in-out;
}
/* the blueprint lines themselves catch the state colour near the cursor —
   identical grid geometry to body::after so the tint lands exactly on the lines */
.warm-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right,  color-mix(in oklab, var(--brand-a) 34%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--brand-a) 34%, transparent) 1px, transparent 1px),
    linear-gradient(to right,  color-mix(in oklab, var(--brand-b) 46%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--brand-b) 46%, transparent) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 160px 160px, 160px 160px;
  -webkit-mask-image: radial-gradient(circle at var(--wx,50%) var(--wy,40%), #000 0, rgba(0,0,0,0.55) 60px, transparent 300px);
  mask-image: radial-gradient(circle at var(--wx,50%) var(--wy,40%), #000 0, rgba(0,0,0,0.55) 60px, transparent 300px);
  opacity:0;
  transition:opacity 1.4s ease-in-out;
}
body.warm-on .warm-field{ opacity:0.5 }
body.warm-on .warm-grid{ opacity:0.4 }
@media (prefers-reduced-motion: reduce){
  .warm-field, .warm-grid{ transition:opacity .4s ease-in-out }
}

.sheet-frame{
  position:fixed; inset:11px;
  z-index:5; pointer-events:none;
  --rk: color-mix(in oklab, var(--brand-a) 34%, transparent);
}
.sheet-frame::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(var(--rk) 0 0) left top    / 26px 1.5px no-repeat,
    linear-gradient(var(--rk) 0 0) left top    / 1.5px 26px no-repeat,
    linear-gradient(var(--rk) 0 0) right top   / 26px 1.5px no-repeat,
    linear-gradient(var(--rk) 0 0) right top   / 1.5px 26px no-repeat,
    linear-gradient(var(--rk) 0 0) left bottom / 26px 1.5px no-repeat,
    linear-gradient(var(--rk) 0 0) left bottom / 1.5px 26px no-repeat,
    linear-gradient(var(--rk) 0 0) right bottom/ 26px 1.5px no-repeat,
    linear-gradient(var(--rk) 0 0) right bottom/ 1.5px 26px no-repeat;
}
@media (max-width:900px){ .sheet-frame{ inset:7px } .sheet-frame::before{ background-size:18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px, 18px 1.5px, 1.5px 18px } }

/* ——— Per-section sheet mark: dimension line + stamp + corner ticks ——— */
.bp-sheet{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  --tk: color-mix(in oklab, var(--brand-a) 30%, transparent);
}
.bp-sheet-dim{
  position:absolute; left:0; right:0; top:-50px; height:0;
  border-top:1px dashed color-mix(in oklab, var(--brand-a) 26%, transparent);
}
.bp-sheet-dim::before, .bp-sheet-dim::after{
  content:""; position:absolute; top:-5px; width:1.5px; height:11px;
  background:color-mix(in oklab, var(--brand-a) 38%, transparent);
}
.bp-sheet-dim::before{ left:0 }
.bp-sheet-dim::after{ right:0 }
.bp-sheet-stamp{
  position:absolute; top:-8px; left:0;
  background:transparent; padding:0 11px 0 0;
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em;
  color:var(--muted-2); text-transform:uppercase; white-space:nowrap;
  display:inline-flex; align-items:center;
}
.bp-sheet-stamp i{ font-style:normal; margin:0 8px; color:color-mix(in oklab, var(--brand-a) 50%, transparent) }
.bp-sheet-stamp b{ font-weight:700; color:var(--brand-ink) }
/* drafting registration mark in place of the redundant sheet number */
.bp-mk{
  width:7px; height:7px; flex-shrink:0; margin-right:9px;
  background:var(--brand-grad); transform:rotate(45deg);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-a) 12%, transparent);
}
/* looping typewriter for blueprint titles */
.bp-type{ white-space:nowrap }
.bp-type-caret{
  display:inline-block; width:1px; height:1em; margin-left:2px;
  vertical-align:-0.12em;
  background:color-mix(in oklab, var(--brand-a) 70%, transparent);
  animation:bpCaret 1s steps(1) infinite;
}
@keyframes bpCaret{ 50%{ opacity:0 } }
@media (prefers-reduced-motion: reduce){ .bp-type-caret{ animation:none } }
.bp-corner{
  position:absolute; width:13px; height:13px; pointer-events:none;
  border:0 solid var(--tk);
}
.bp-corner.c1{ top:-7px;    left:-7px;  border-top-width:1.5px; border-left-width:1.5px }
.bp-corner.c2{ top:-7px;    right:-7px; border-top-width:1.5px; border-right-width:1.5px }
.bp-corner.c3{ bottom:-7px; left:-7px;  border-bottom-width:1.5px; border-left-width:1.5px }
.bp-corner.c4{ bottom:-7px; right:-7px; border-bottom-width:1.5px; border-right-width:1.5px }
@media (max-width:900px){
  .bp-sheet-dim{ top:-34px }
  .bp-sheet-stamp{ font-size:9px; letter-spacing:0.12em }
  .bp-sheet-stamp i{ margin:0 5px }
}

/* ——— Drawing-style section eyebrow: tick + dotted leader ——— */
.sec-head .label::before{
  content:""; width:13px; height:8px;
  border-left:1.5px solid color-mix(in oklab, var(--brand-a) 45%, transparent);
  border-bottom:1.5px solid color-mix(in oklab, var(--brand-a) 45%, transparent);
  background:transparent;
}

/* ——— Corner ticks on the signature “plates” ——— */
.showcase::before,
.gate::before{
  content:""; position:absolute; inset:11px; pointer-events:none; z-index:1;
  background:
    linear-gradient(var(--tk) 0 0) left top    / 15px 1.5px no-repeat,
    linear-gradient(var(--tk) 0 0) left top    / 1.5px 15px no-repeat,
    linear-gradient(var(--tk) 0 0) right top   / 15px 1.5px no-repeat,
    linear-gradient(var(--tk) 0 0) right top   / 1.5px 15px no-repeat,
    linear-gradient(var(--tk) 0 0) left bottom / 15px 1.5px no-repeat,
    linear-gradient(var(--tk) 0 0) left bottom / 1.5px 15px no-repeat,
    linear-gradient(var(--tk) 0 0) right bottom/ 15px 1.5px no-repeat,
    linear-gradient(var(--tk) 0 0) right bottom/ 1.5px 15px no-repeat;
}
.showcase{ --tk: color-mix(in oklab, var(--brand-a) 30%, transparent) }
.gate{ --tk: rgba(255,255,255,0.42) }
.gate > div{ position:relative; z-index:2 }

/* ——— Drawing title block (footer) ——— */
.bp-titleblock{
  margin-top:8px;
  border:1px solid var(--line-2);
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  font-family:var(--font-mono);
  background:rgba(255,255,255,0.5);
  overflow:hidden;
}
.bp-tbcell{
  padding:11px 14px;
  border-right:1px solid var(--line);
  border-top:1px solid var(--line);
}
.bp-tbcell:nth-child(-n+6){ border-top:0 }
.bp-tbcell:nth-child(6n){ border-right:0 }
.bp-tbcell .k{
  font-size:8.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted-2);
}
.bp-tbcell .v{
  font-size:12px; color:var(--ink-2); margin-top:5px; letter-spacing:0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bp-tbcell .v b{ color:var(--brand-ink); font-weight:700 }
@media (max-width:900px){
  .bp-titleblock{ grid-template-columns:repeat(2, 1fr) }
  .bp-tbcell{ border-top:1px solid var(--line) }
  .bp-tbcell:nth-child(-n+6){ border-top:1px solid var(--line) }
  .bp-tbcell:nth-child(-n+2){ border-top:0 }
  .bp-tbcell:nth-child(6n){ border-right:1px solid var(--line) }
  .bp-tbcell:nth-child(2n){ border-right:0 }
}

@media (prefers-reduced-motion: reduce){
  .sheet-frame, .bp-sheet{ transition:none }
}