/* AIL Studio v7 Overlap — Brand Bot rev 2 tokens */
@font-face{
  font-family:"Inter";
  src:url("fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("fonts/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-weight:100 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight:100 800; font-style:normal; font-display:swap;
}

:root{
  --white:#FFFFFF;
  --cloud:#F5F5F7;
  --night:#0E1530;
  --ink:#172041;
  --slate:#5B6478;
  --fog:#A9B0C2;
  --mist:#E3E6EE;
  --teal:#1F7A6D;
  --teal-on-dark:#4FC1AE;
  --amber:#F5B82E;

  --r-xs:8px;
  --r-sm:12px;
  --r-md:20px;
  --r-lg:28px;
  --r-xl:36px;

  --e1:0 1px 2px rgba(23,32,65,.06), 0 4px 12px rgba(23,32,65,.06);
  --e2:0 8px 24px rgba(23,32,65,.08), 0 2px 6px rgba(23,32,65,.05);
  --e3:0 30px 60px -12px rgba(23,32,65,.18), 0 18px 36px -18px rgba(23,32,65,.12);
  --e3-night:0 30px 60px -12px rgba(0,0,0,.45), 0 18px 36px -18px rgba(0,0,0,.35);

  --grad-light:linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
  --grad-dark:radial-gradient(120% 80% at 50% 0%, #1A2550 0%, #0E1530 60%);

  --font:Inter, system-ui, sans-serif;
  --display:Inter, system-ui, sans-serif;
  --wordmark:"Space Grotesk", Inter, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;


  /* Logo & icon paths — official icon-v3 opt2r (stepped doorway). Swap files in assets/logo/ */
  --logo-wordmark-light: url("assets/logo/wordmark-light.svg");
  --logo-wordmark-white: url("assets/logo/wordmark-white.svg");
  --logo-wordmark-dark: url("assets/logo/wordmark-dark.svg");
  --logo-full-light: url("assets/logo/full-light.svg");
  --logo-full-white: url("assets/logo/full-white.svg");
  --logo-full-dark: url("assets/logo/full-dark.svg");
  --logo-icon-light: url("assets/logo/icon-light.svg");
  --logo-icon-dark: url("assets/logo/icon-dark.svg");
  --logo-icon-white: url("assets/logo/icon-white.svg");
  --logo-favicon: url("assets/logo/favicon.svg");


  /* Device bezels & sheet papers — only for device/sheet CSS */
  --device-face: #1a1f2e;
  --device-bezel: #2a3144;
  --device-bezel-mid: #222838;
  --device-bezel-deep: #111522;
  --device-bezel-alt: #3a4158;
  --device-chin: #0a0d18;
  --sheet-back: #e8ebf2;
  --sheet-mid: #dfe3ec;

  --max:1120px;
  --pad:clamp(20px,4vw,40px); /* mobile floor raised in max-width:768 rule */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; font-family:var(--font); font-weight:400; font-size:17px; line-height:1.5;
  color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--ink)}
.skip{
  position:absolute; left:-999px; top:0; background:var(--amber); color:var(--ink);
  padding:8px 12px; border-radius:var(--r-sm); z-index:100;
}
.skip:focus{left:8px; top:8px}

/* Nav */
.site-header{
  position:sticky; top:0; z-index:50; height:48px;
  background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{box-shadow:var(--e2); border-bottom-color:var(--mist)}
.site-header-inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad); height:48px;
  display:flex; align-items:center; gap:20px;
}
.brand{
  font-family:var(--wordmark); font-weight:600; font-size:15px; letter-spacing:-.02em;
  color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:8px;
  flex:0 0 auto;
}
.brand img{height:18px; width:auto}
.brand img.brand-icon{height:28px; width:28px; flex:0 0 auto; border-radius:6px}
.nav-desk{
  display:flex; align-items:center; justify-content:center; gap:clamp(12px,2vw,22px);
  flex:1 1 auto;
}
.nav-desk a{
  font-size:12px; font-weight:500; color:var(--slate); text-decoration:none;
}
.nav-desk a:hover,.nav-desk a[aria-current="page"]{color:var(--ink)}
.nav-actions{flex:0 0 auto; display:flex; align-items:center; gap:10px}
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--amber); color:var(--ink); font-weight:600; font-size:13px;
  padding:8px 14px; border-radius:var(--r-sm); box-shadow:var(--e1);
  text-decoration:none; border:0; cursor:pointer;
}
.btn-primary:hover{filter:brightness(.97); color:var(--ink)}
.nav-m{display:none; position:relative}
.nav-m summary{
  list-style:none; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
  padding:6px 10px; border-radius:var(--r-sm);
}
.nav-m summary::-webkit-details-marker{display:none}
.nav-m-panel{
  position:absolute; right:0; top:36px; background:var(--white); border-radius:var(--r-md);
  box-shadow:var(--e2); padding:8px; min-width:220px; display:flex; flex-direction:column; gap:2px;
}
.nav-m-panel a{
  padding:10px 12px; border-radius:var(--r-xs); color:var(--ink); font-size:14px; text-decoration:none;
}
.nav-m-panel a:hover{background:var(--cloud)}
@media (max-width:820px){
  .nav-desk{display:none}
  .nav-m{display:block}
}

/* Bands */
.band{padding-block:clamp(56px,8vw,104px); position:relative}
.band-cloud{background:var(--cloud)}
.band-white{background:var(--white)}
.band-night{background:var(--grad-dark); color:#fff}
.band-night .sub,.band-night .lede{color:var(--fog)}
.band-night a.link-text{color:var(--teal-on-dark)}
.band-night a.link-text:hover{color:#fff}
.band-inset{
  margin:0 clamp(12px,2vw,24px); border-radius:var(--r-xl); overflow:hidden;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.center{text-align:center}
.h-hero{
  font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.05;
  font-size:clamp(40px,6vw,64px); margin:0 0 12px; color:var(--ink);
}
.h-hero *, .h2 *, .h3 *{color:inherit} /* no two-tone spans inside headlines */
.h2{
  font-family:var(--display); font-weight:600; letter-spacing:-.025em; line-height:1.08;
  font-size:clamp(32px,4.5vw,48px); margin:0 0 10px; color:var(--ink);
}
.h3{
  font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(24px,3vw,36px); margin:0 0 8px; color:var(--ink);
}
.band-night .h-hero, .band-night .h2, .band-night .h3{color:#fff}
.sub{
  font-size:clamp(17px,1.6vw,21px); font-weight:400; color:var(--slate);
  line-height:1.4; margin:0 auto 20px; max-width:36em;
}
.lede{font-size:18px; color:var(--slate); max-width:38em; margin:0 0 20px}
.small{font-size:12px; color:var(--slate)}
.link-text{
  font-size:15px; font-weight:500; color:var(--teal); text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
}
.link-text:hover{color:var(--ink)}
.actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center; margin-top:8px}
.actions-left{justify-content:flex-start}

/* What do you need */
.need-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,3vw,28px);
  margin-top:clamp(28px,4vw,40px);
}
.need-card{
  background:none; border:0; border-radius:0; padding:0; box-shadow:none;
  text-decoration:none; color:var(--ink); text-align:center;
  transition:color .2s ease;
}
.need-card:hover{color:var(--teal); background:none; box-shadow:none; transform:none}
.need-card strong{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em}
.need-card span{display:block; margin-top:4px; font-size:13px; color:var(--slate); font-weight:400}
.need-card:hover span{color:var(--slate)}
@media (max-width:720px){
  .need-row{gap:18px 24px}
}

/* Overlap stage — large, layered, ~70–80% content width */
.overlap-stage{
  position:relative; width:min(100%,980px); height:clamp(420px,58vw,620px);
  margin:clamp(32px,5vw,56px) auto 0;
}
.device{
  position:absolute; border-style:solid; background:var(--device-face);
  box-shadow:var(--e3); overflow:hidden;
}
.device img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
.device-laptop{
  width:min(78%,760px); aspect-ratio:16/10; border-radius:16px 16px 12px 12px;
  border-width:12px 12px 22px; border-color:var(--device-bezel); left:50%; top:4%;
  transform:translateX(-58%) rotate(-3deg); z-index:2;
}
.device-laptop::after{
  content:""; position:absolute; left:12%; right:12%; bottom:-16px; height:10px;
  background:var(--device-bezel); border-radius:0 0 10px 10px; opacity:.95;
}
.device-laptop .bezel-shine{
  pointer-events:none; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12), transparent 40%);
}
.device-tablet{
  width:min(42%,400px); aspect-ratio:4/3; border-radius:22px;
  border-width:14px; border-color:var(--device-bezel-mid); right:2%; top:22%;
  transform:rotate(5deg); z-index:1;
}
.device-docs{
  width:min(32%,280px); aspect-ratio:3/4; border-radius:10px; border-width:0;
  background:transparent; box-shadow:none; left:2%; bottom:0; z-index:3;
  display:grid; place-items:center;
}
.device-docs .paper{
  width:94%; aspect-ratio:3/4; background:var(--white); border-radius:10px;
  box-shadow:var(--e3); overflow:hidden; transform:rotate(-8deg);
  border:1px solid rgba(23,32,65,.06);
}
.device-docs .paper + .paper{
  position:absolute; width:90%; transform:rotate(5deg) translate(14px,12px); z-index:-1;
  background:var(--sheet-back); box-shadow:var(--e2);
}
.device-docs .paper:nth-child(3){
  position:absolute; width:86%; transform:rotate(-2deg) translate(-10px,18px); z-index:-2;
  background:var(--sheet-mid); box-shadow:var(--e1);
}
.device-phone{
  width:min(22%,180px); aspect-ratio:9/19; border-radius:26px;
  border-width:9px; border-color:var(--device-bezel-deep); right:14%; bottom:-2%;
  transform:rotate(9deg); z-index:4;
}
.device-phone::before{
  content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:34%; height:5px; background:var(--device-bezel); border-radius:4px; z-index:2;
}
.overlap-stage.is-balanced .device-laptop{transform:translateX(-58%) rotate(-1.5deg) scale(1.02)}
.overlap-stage.is-balanced .device-tablet{transform:rotate(3deg) translateY(8px) scale(.98); opacity:.96}
.overlap-stage.is-balanced .device-phone{transform:rotate(7deg) translateY(-6px)}
.overlap-stage .device{transition:transform .4s ease, opacity .4s ease}
@media (prefers-reduced-motion:reduce){
  .overlap-stage .device{transition:none !important}
}
@media (max-width:640px){
  .overlap-stage{height:360px; width:100%}
  .device-laptop{width:86%; left:48%; top:0}
  .device-tablet{width:48%; right:0; top:34%}
  .device-docs{width:40%; left:0; bottom:0}
  .device-phone{width:28%; right:4%; bottom:0}
}

/* Line sections — distinct large compositions */
.line-section .visual{
  margin:clamp(32px,5vw,56px) auto 0; width:100%; max-width:1000px;
  display:flex; justify-content:center;
}
.line-section .device-solo{
  position:relative; box-shadow:var(--e3);
}
.line-section .device-solo.laptop{
  width:100%; aspect-ratio:16/10; border-radius:16px 16px 12px 12px;
  border:12px solid var(--device-bezel); border-bottom-width:22px; background:var(--device-face); overflow:hidden;
}
.line-section .device-solo.tablet{
  width:min(100%,720px); aspect-ratio:4/3; border-radius:28px;
  border:16px solid var(--device-bezel-mid); background:var(--device-face); overflow:hidden;
}
.line-section .device-solo.docs{
  width:min(100%,480px); aspect-ratio:3/4; border-radius:var(--r-lg);
  background:var(--white); overflow:hidden; border:0;
}
.band-night .device-solo.docs{box-shadow:var(--e3-night)}
.line-section .device-solo.phone{
  width:min(42%,280px); aspect-ratio:9/19; border-radius:32px;
  border:12px solid var(--device-bezel-deep); background:var(--device-chin); overflow:hidden;
}
.line-section .device-solo img{width:100%; height:100%; object-fit:cover; object-position:top center}

/* Websites: angled laptop pair */
.pair-angled{
  position:relative; width:100%; max-width:1040px; height:clamp(380px,46vw,520px);
  margin:0 auto;
}
.pair-angled .lap{
  position:absolute; width:62%; aspect-ratio:16/10;
  border-radius:16px 16px 12px 12px; border:12px solid var(--device-bezel); border-bottom-width:22px;
  background:var(--device-face); overflow:hidden; box-shadow:var(--e3);
}
.pair-angled .lap img{width:100%; height:100%; object-fit:cover; object-position:top center}
.pair-angled .lap-a{left:0; top:8%; transform:rotate(-6deg); z-index:1}
.pair-angled .lap-b{right:0; top:18%; width:58%; transform:rotate(5deg); z-index:2; border-color:var(--device-bezel-alt)}
.pair-angled .labels{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:space-between; gap:12px; pointer-events:none;
}
.pair-angled .sample-label{
  font-size:12px; color:var(--slate); background:rgba(245,245,247,.92);
  padding:4px 10px; border-radius:var(--r-xs);
}
@media (max-width:720px){
  .pair-angled{height:520px}
  .pair-angled .lap-a{width:88%; left:6%; top:0}
  .pair-angled .lap-b{width:82%; right:6%; top:42%}
  .pair-angled .labels{flex-direction:column; align-items:center; bottom:auto; top:38%}
}

/* Automation: flat tablet + zoomed cell callout */
.sheet-stage{
  position:relative; width:100%; max-width:920px; margin:0 auto;
  display:flex; justify-content:center; align-items:flex-end; gap:0;
}
.sheet-stage .tablet-main{
  width:min(100%,820px); aspect-ratio:4/3; border-radius:28px;
  border:16px solid var(--device-bezel-mid); background:var(--device-face); overflow:hidden; box-shadow:var(--e3);
  transform:rotate(-1deg);
}
.sheet-stage .tablet-main img{width:100%; height:100%; object-fit:cover; object-position:top center}
.sheet-stage .cell-callout{
  position:absolute; right:2%; bottom:6%; width:min(42%,320px);
  background:var(--white); border-radius:var(--r-md); box-shadow:var(--e3);
  padding:16px 18px; border:1px solid var(--mist); transform:rotate(2deg); z-index:2;
}
.sheet-stage .cell-callout .k{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--slate)}
.sheet-stage .cell-callout .v{font-size:22px; font-weight:700; letter-spacing:-.02em; margin:6px 0 4px; color:var(--ink)}
.sheet-stage .cell-callout .s{font-size:13px; color:var(--teal); font-weight:600}
.sheet-stage .cell-callout .hint{font-size:12px; color:var(--slate); margin-top:8px; line-height:1.35}
@media (max-width:720px){
  .sheet-stage{flex-direction:column; align-items:center}
  .sheet-stage .cell-callout{position:relative; right:auto; bottom:auto; width:min(100%,320px); margin-top:-28px; transform:none}
}

/* Documents: Night document fan */
.doc-fan{
  position:relative; width:100%; max-width:880px; height:clamp(400px,52vw,520px);
  margin:0 auto;
}
.doc-fan .sheet{
  position:absolute; width:min(48%,340px); aspect-ratio:3/4; background:var(--white);
  border-radius:12px; overflow:hidden; box-shadow:var(--e3-night);
  border:1px solid rgba(255,255,255,.08);
}
.doc-fan .sheet img{width:100%; height:100%; object-fit:cover; object-position:top center}
.doc-fan .s1{left:8%; top:10%; transform:rotate(-12deg); z-index:1; opacity:.88; background:var(--sheet-back)}
.doc-fan .s2{left:28%; top:4%; transform:rotate(-3deg); z-index:2}
.doc-fan .s3{right:10%; top:12%; transform:rotate(8deg); z-index:3; width:min(50%,360px)}
@media (max-width:640px){
  .doc-fan{height:400px}
  .doc-fan .s1{left:2%; width:55%}
  .doc-fan .s2{left:18%; width:58%}
  .doc-fan .s3{right:2%; width:60%}
}

/* Products: phone + large cover stack */
.product-stack{
  position:relative; width:100%; max-width:900px; height:clamp(400px,50vw,520px);
  margin:0 auto;
}
.product-stack .cover{
  position:absolute; left:4%; top:6%; width:min(62%,480px); aspect-ratio:16/9;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e3);
  transform:rotate(-3deg); z-index:1; background:var(--night);
}
.product-stack .cover img{width:100%; height:100%; object-fit:cover}
.product-stack .phone{
  position:absolute; right:8%; bottom:0; width:min(34%,260px); aspect-ratio:9/19;
  border-radius:32px; border:12px solid var(--device-bezel-deep); background:var(--device-chin); overflow:hidden;
  box-shadow:var(--e3); transform:rotate(6deg); z-index:2;
}
.product-stack .phone img{width:100%; height:100%; object-fit:cover; object-position:top center}
.product-stack .phone::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:34%; height:5px; background:var(--device-bezel); border-radius:4px; z-index:2;
}
@media (max-width:640px){
  .product-stack{height:460px}
  .product-stack .cover{width:88%; left:6%; top:0}
  .product-stack .phone{width:42%; right:8%; bottom:0}
}

/* legacy pair (unused) */
.pair-visual{
  display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:end; width:100%; max-width:900px;
}
.pair-visual .sample-label{font-size:12px; color:var(--slate); margin-top:8px; text-align:center}

/* Proof strip — larger thumbs */
.proof-strip{
  display:flex; gap:16px; overflow-x:auto; padding:8px 2px 16px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.proof-card{
  flex:0 0 auto; width:min(320px,75vw); border-radius:var(--r-md); overflow:hidden;
  background:var(--white); box-shadow:var(--e1); scroll-snap-align:start;
}
.proof-card img{width:100%; height:200px; object-fit:cover; object-position:top}
.proof-card p{padding:12px 14px; font-size:13px; color:var(--slate); margin:0}

/* How we work */
.how-sentence{
  font-size:clamp(20px,2.4vw,28px); font-weight:500; letter-spacing:-.015em;
  line-height:1.45; max-width:28em; margin:0 auto; color:var(--ink);
}
.how-sentence .mark{
  display:inline-block; color:var(--teal); font-weight:600; padding:0 2px;
}

/* Contact strip + footer */
.contact-strip{
  background:var(--white); border-top:1px solid var(--mist);
  padding:clamp(40px,6vw,64px) 0;
}
.contact-strip-inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad);
  display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between;
}
.contact-strip p{
  font-family:var(--display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(22px,2.4vw,30px); margin:0; max-width:18em; line-height:1.2;
}
.mail-lg{
  font-size:clamp(16px,1.6vw,20px); font-weight:500; color:var(--ink);
  text-decoration:none; border-bottom:2px solid var(--amber); padding-bottom:2px;
}
.mail-lg:hover{color:var(--teal); border-bottom-color:var(--teal)}
.site-footer{background:var(--cloud); padding:clamp(36px,5vw,56px) 0 28px; color:var(--slate); font-size:13px}
.site-footer-inner{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.f-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-bottom:28px;
}
.f-grid h4{margin:0 0 10px; font-size:12px; font-weight:600; color:var(--ink); letter-spacing:.02em}
.f-grid a{display:block; color:var(--slate); text-decoration:none; padding:3px 0}
.f-grid a:hover{color:var(--ink)}
.f-bottom{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  padding-top:16px; border-top:1px solid var(--mist); font-size:12px;
}
.f-brand{display:flex; flex-direction:column; gap:4px; font-family:var(--wordmark); font-weight:600; color:var(--ink); font-size:14px}
.f-tagline{font-family:Inter, system-ui, sans-serif; font-weight:400; font-size:12px; color:var(--slate); letter-spacing:0}
@media (max-width:720px){
  .f-grid{grid-template-columns:1fr 1fr}
}

/* Inner pages */
.page-hero{padding:clamp(48px,7vw,88px) 0 24px; text-align:center; background:var(--grad-light)}
.page-hero .h-hero{font-size:clamp(36px,5vw,56px)}
.section{padding-block:clamp(40px,6vw,72px)} /* block only — leave inline to .wrap when class="section wrap" */
.ledger{width:100%; border-collapse:collapse; font-size:15px; margin:24px 0; background:var(--white); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--e1)}
.ledger th,.ledger td{text-align:left; padding:16px 14px; border-bottom:1px solid var(--mist); vertical-align:top}
.ledger th{background:var(--cloud); font-size:12px; font-weight:600; color:var(--slate)}
.ledger .price{font-weight:600; white-space:nowrap}
.ledger .includes{font-size:14px; color:var(--slate)}
.plan-cards{display:none; flex-direction:column; gap:14px; margin:24px 0}
.plan-card{
  background:var(--white); border-radius:var(--r-md); box-shadow:var(--e1);
  padding:20px 18px; color:var(--ink);
}
.plan-card-name{
  margin:0 0 14px; font-size:20px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
}
.plan-card-prices{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
  margin:0 0 14px; padding:0;
}
.plan-card-prices div{margin:0}
.plan-card-prices dt{
  margin:0; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--slate);
}
.plan-card-prices dd{
  margin:4px 0 0; font-size:16px; font-weight:600; color:var(--ink);
}
.plan-card-actions{display:flex; flex-wrap:wrap; gap:12px 18px; margin-top:14px}
.buy-link{font-size:14px}
.ledger .buy-link{font-size:13px; margin-top:6px; display:inline-flex}
.plan-card-includes{
  margin:0; font-size:14px; line-height:1.45; color:var(--slate);
}
.plan-card-includes strong{display:block; margin-bottom:4px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--slate)}
.plan-extras{
  border-radius:var(--r-xl); margin:0 var(--pad); max-width:calc(var(--max) - 0px);
  /* avoid 100%+margin overflow: shrink to content box */
  width:auto; box-sizing:border-box;
}
.plan-extras > .wrap{padding-inline:var(--pad); max-width:none} /* content inset inside rounded card */
@media (max-width:640px){
  .ledger-desk{display:none}
  .plan-cards{display:flex}
  .plan-card-prices{grid-template-columns:1fr 1fr 1fr}
}
@media (min-width:641px){
  .plan-cards{display:none}
  .ledger-desk{display:table}
}
.stack{display:flex; flex-direction:column; gap:0; max-width:720px; margin:0 auto}
.stack-item{
  padding:20px 0; border-bottom:1px solid var(--mist);
}
.stack-item h3{margin:0 0 6px; font-size:18px; letter-spacing:-.015em}
.stack-item p{margin:0; color:var(--slate); font-size:15px}
.stack-item .meta{display:inline-block; margin-top:8px; font-size:14px; font-weight:600; color:var(--ink)}
.fact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px;
}
.fact{
  background:var(--white); border-radius:var(--r-md); padding:20px; box-shadow:var(--e1);
}
.fact h3{margin:0 0 6px; font-size:16px}
.fact p{margin:0; font-size:14px; color:var(--slate)}
@media (max-width:640px){.fact-grid{grid-template-columns:1fr}}
.faq-item{padding:18px 0; border-bottom:1px solid var(--mist); max-width:720px; margin:0 auto}
.faq-item h3{margin:0 0 6px; font-size:17px}
.faq-item p{margin:0; color:var(--slate); font-size:15px}
.line-nav{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  max-width:720px; margin:40px auto 0; padding-top:24px; border-top:1px solid var(--mist);
}
.line-nav a{font-size:14px; font-weight:500}
.snap{
  max-width:720px; margin:24px auto; background:var(--white); border-radius:var(--r-lg);
  box-shadow:var(--e2); overflow:hidden;
}
.snap-bar{
  display:flex; justify-content:space-between; gap:12px; padding:12px 18px;
  background:var(--cloud); font-size:12px; color:var(--slate);
}
.snap-body{padding:20px 22px}
.snap-body ol{margin:8px 0 0; padding-left:1.2em; color:var(--slate); font-size:15px}
.snap-note{margin-top:14px; font-size:12px; color:var(--slate)}

/* Motion: visible by default */
.rise{
  opacity:1; transform:none;
  transition:transform .4s ease, opacity .4s ease;
}
@media (prefers-reduced-motion:no-preference){
  .rise.js-ready{opacity:1; transform:translateY(0)}
}

/* Shared mobile side inset — content never flush to either edge.
   Full-bleed band backgrounds stay full-bleed; only .wrap / inners inset. */
@media (max-width:768px){
  :root{ --pad:24px }
  .wrap,
  .site-footer-inner,
  .contact-strip-inner,
  .site-header-inner{
    padding-inline:var(--pad);
  }
}