/* ==========================================================================
   Campaign page (/back) — visual theme layer, matching the landing v2 look.
   --------------------------------------------------------------------------
   Loaded AFTER back.css and scoped under body.back. This file only restyles
   the page chrome (.b-* / .top / footer). It deliberately does NOT touch the
   demo app inside the phone — .phone, .phone-screen, .dm-*, .a-* and .d-btns
   are a scale model of the real app and back.js drives them, so they are left
   exactly as back.css defines them.
   ========================================================================== */

body.back{
  --hair:rgba(255,255,255,.09);
  --hair-strong:rgba(255,255,255,.18);
  --txt-2:rgba(255,255,255,.64);
  --txt-3:rgba(255,255,255,.48);  /* 4.99:1 on #0A0A0A; .42 was 4.05:1, under AA */
  --ease:cubic-bezier(.2,.7,.3,1);
  --shell:64rem;

  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Same film grain as the landing — the thing that stops flat #0A0A0A from
   reading as unfinished. Inert, sits above everything. */
body.back::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Header — sticky glass, aligned to the 64rem content column
   ========================================================================== */
body.back .top{
  position:sticky;top:0;z-index:60;display:block;padding:0;
  background:rgba(10,10,10,.55);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
body.back .top.is-stuck{background:rgba(10,10,10,.86);border-bottom-color:var(--hair)}
.b-top-in{
  max-width:var(--shell);margin:0 auto;
  padding:.95rem clamp(1.25rem,5vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
body.back .top nav{display:flex;align-items:center;gap:1.5rem}
body.back .top nav a{
  margin-left:0;font-size:.85rem;font-weight:500;color:var(--txt-3);
  white-space:nowrap;transition:color .16s var(--ease);
}
body.back .top nav a:hover{color:var(--white)}
body.back .top nav .b-nav-doc{color:rgba(255,255,255,.55)}
@media (max-width:900px){ body.back .top nav .b-nav-jump{display:none} }
@media (max-width:520px){
  body.back .top nav{gap:1rem}
  body.back .top nav a{font-size:.8rem}
}
/* the sticky header would otherwise cover the top of a jumped-to section */
body.back section[id]{scroll-margin-top:5rem}

/* ==========================================================================
   Section furniture
   ========================================================================== */
body.back .b-sec{
  padding:clamp(4.5rem,8vw,7rem) clamp(1.25rem,5vw,2rem);
  border-top:1px solid rgba(255,255,255,.06);
}
/* Kept in step with .b-eyebrow in back.css — this file loads after it, so a
   stale size or tracking here silently wins. 13px / .1em across every section. */
body.back .b-eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.1em;color:var(--teal)}
body.back .b-sec h2{
  margin-top:.9rem;
  font-size:clamp(1.8rem,4vw,2.75rem);font-weight:800;
  letter-spacing:-.038em;line-height:1.08;text-wrap:balance;
}
body.back .b-lede{margin-top:1.05rem;color:var(--txt-2);font-size:clamp(1rem,1.6vw,1.0625rem);line-height:1.62}

/* ==========================================================================
   Buttons — gradient primary with a brand glow, matching the landing
   ========================================================================== */
body.back .b-btn{
  border-radius:14px;padding:.9375rem 1.75rem;font-weight:700;letter-spacing:-.014em;
  background:linear-gradient(180deg,#25B183,#1D9E75);border-color:transparent;color:#04241B;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 12px 30px -10px rgba(29,158,117,.6);
  transition:background .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease),border-color .16s var(--ease);
}
body.back .b-btn:hover{
  background:linear-gradient(180deg,#2CC292,#22AA80);border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 16px 38px -10px rgba(29,158,117,.8);
}
body.back .b-btn:active{transform:translateY(1px)}
body.back .b-btn.ghost{
  background:rgba(255,255,255,.02);border:1px solid var(--hair-strong);color:var(--white);box-shadow:none;
}
body.back .b-btn.ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.32);box-shadow:none}

/* ==========================================================================
   1. Hero
   ========================================================================== */
/* padding-inline must match .b-sec exactly — back.css tightens the hero to
   1rem below 23.5rem while this file holds the sections at the clamp, which
   left the hero 4px wider than everything under it on small phones. */
body.back .b-hero{
  padding-top:clamp(3rem,6vw,4.5rem);
  padding-bottom:clamp(3.5rem,7vw,5.5rem);
  padding-inline:clamp(1.25rem,5vw,2rem);
}

/* duotone glow replaces back.css's single teal circle */
body.back .b-hero::before{
  top:-26%;left:50%;width:min(880px,120vw);height:min(880px,120vw);
  background:radial-gradient(circle,rgba(29,158,117,.20),rgba(29,158,117,0) 62%);
}
body.back .b-hero::after{
  content:"";position:absolute;top:-14%;left:50%;transform:translateX(-18%);
  width:min(700px,100vw);height:min(700px,100vw);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(83,74,183,.19),rgba(83,74,183,0) 62%);
}
/* The hero was the one block on the page with no width cap — back.css puts
   the grid straight onto the full-bleed section, so on a wide screen the copy
   pinned to the far left and the phone to the far right while every section
   below stayed in a 64rem column. The section stays full-bleed (the glow needs
   it); the grid moves into a capped inner wrapper that lines up with .b-wrap
   and the header. */
body.back .b-hero{display:block}
.b-hero-in{
  position:relative;z-index:1;
  max-width:var(--shell);margin:0 auto;
  display:grid;gap:3rem;justify-items:center;text-align:center;
}
@media (min-width:48rem){
  .b-hero-in{
    grid-template-columns:1.05fr .95fr;
    align-items:center;text-align:left;gap:2.5rem;justify-items:start;
  }
}
body.back .b-hero-copy,
body.back .b-hero-visual{position:relative;z-index:1}

/* the tagline becomes a status chip */
body.back .b-tagline{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.45rem .95rem;border-radius:999px;
  border:1px solid var(--hair);background:rgba(255,255,255,.04);
  font-size:.8125rem;font-weight:500;color:var(--txt-2);letter-spacing:-.01em;
}
body.back .b-tagline::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none;
  box-shadow:0 0 0 3px rgba(29,158,117,.16);
}
@media (prefers-reduced-motion:no-preference){
  body.back .b-tagline::before{animation:b-pulse 2.4s ease-in-out infinite}
  @keyframes b-pulse{0%,100%{box-shadow:0 0 0 3px rgba(29,158,117,.16)}50%{box-shadow:0 0 0 7px rgba(29,158,117,.05)}}
}
body.back .b-tagline .teal{color:inherit}

body.back .b-hero h1{
  margin-top:1.6rem;
  font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:900;
  letter-spacing:-.045em;line-height:1.02;text-wrap:balance;
}
body.back .b-hero h1 .teal{
  background:linear-gradient(100deg,#1D9E75 0%,#3FD9A4 46%,#6E63E8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
body.back .b-sub{margin-top:1.5rem;color:var(--txt-2);font-size:clamp(1rem,2vw,1.125rem);line-height:1.58;text-wrap:pretty}
body.back .b-cta{margin-top:2.25rem;gap:.875rem}
/* txt-2, not txt-3. At 13px the .42 white measured 4.05:1 — under AA — and this
   is the line that tells a visitor pledging is open at all. Load-bearing trust
   copy does not get the page's dimmest value. */
body.back .b-hero-note{margin-top:1.375rem;font-size:.8125rem;color:var(--txt-2)}

/* lifts the hero phone off the background the way the landing stage does */
body.back .b-hero-visual .phone{box-shadow:0 44px 90px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}

/* ==========================================================================
   Cards — one treatment across every panel on the page
   ========================================================================== */
body.back .b-card,
body.back .b-price,
body.back .b-tier,
body.back .b-bar-group,
body.back .b-demo-slot,
body.back .b-terms,
body.back .b-tester-slot{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  border:1px solid var(--hair);
  border-radius:20px;
}
body.back .b-card,
body.back .b-price,
body.back .b-tier{
  position:relative;overflow:hidden;
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
/* the hairline accent that reads as "lit from above" */
body.back .b-card::before,
body.back .b-price::before,
body.back .b-tier::before{
  content:"";position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.55;
}
body.back .b-card:hover,
body.back .b-price:hover,
body.back .b-tier:hover{
  border-color:var(--hair-strong);transform:translateY(-4px);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.9);
}
body.back .b-tier.featured{
  border-color:rgba(29,158,117,.42);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(29,158,117,.16),rgba(29,158,117,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
}
body.back .b-tier.featured::before{opacity:1;height:2px}
/* the couple tier is the violet half of the brand */
body.back .b-tier:last-child::before{background:linear-gradient(90deg,transparent,#6E63E8,transparent)}

body.back .b-why-grid{margin-top:2.5rem;gap:1.125rem}
body.back .b-card{padding:2rem 1.75rem}
body.back .b-why-grid h3{font-size:1.125rem;letter-spacing:-.022em;line-height:1.3}
body.back .b-why-grid p{margin-top:.75rem;font-size:.9375rem;line-height:1.6;color:var(--txt-2)}
body.back .b-why-close{margin-top:2.5rem;font-size:clamp(1.125rem,2.6vw,1.5rem);letter-spacing:-.028em}

/* ==========================================================================
   3. Demo shell — glow behind the phone, chrome only
   ========================================================================== */
body.back .b-demo-slot{position:relative;overflow:hidden;padding:2rem 1.25rem 2.25rem;gap:1.5rem}
body.back .b-demo-slot::before{
  content:"";position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:min(760px,140%);height:min(760px,140%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(29,158,117,.14),rgba(29,158,117,0) 62%);
}
body.back .b-demo-slot>*{position:relative;z-index:1}
body.back .b-hint{background:rgba(29,158,117,.10);border-color:rgba(29,158,117,.32);color:var(--txt-2)}

/* ==========================================================================
   4. Already built
   ========================================================================== */
body.back .b-checks li{font-size:.9375rem;color:var(--txt-2)}
body.back .b-shot img{border-radius:14px;border-color:var(--hair);box-shadow:0 18px 36px -22px rgba(0,0,0,.9)}
body.back .b-shot figcaption{color:var(--txt-3)}
/* Same reason as .b-hero-note: this sentence is what authenticates the
   screenshots above it, so it cannot be the faintest text in its own section. */
/* The screenshot column is gone, so the status claims take the full width
   rather than sitting in a narrow half with dead space beside them: two groups
   side by side instead of one tall stack. */
body.back .b-built-grid{grid-template-columns:1fr}
@media (min-width:48rem){
  body.back .b-status{display:grid;grid-template-columns:1fr 1fr;gap:2rem 3rem;align-items:start}
}
body.back .b-shotnote{color:var(--txt-2)}
body.back .b-shotnote a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
body.back .b-shotnote a:hover{color:var(--white)}

/* ==========================================================================
   5. Pricing
   ========================================================================== */
body.back .b-price{padding:1.75rem 1.625rem}
body.back .b-price-main{font-size:2.125rem;letter-spacing:-.04em}
/* Was a 3px teal side tab with a half-open radius — two rules broken at once
   (every border in this system is 1px, and radius is symmetric), and the one
   shape on the page that read as a generic callout rather than as NEXO. It now
   borrows .b-goal's treatment, the teal-accented informational card this page
   already uses two sections down: hairline all round, symmetric radius, the
   tint carried by a diagonal wash instead of a bar. */
body.back .b-note{
  margin-top:1.75rem;
  border:1px solid rgba(29,158,117,.32);border-radius:16px;
  background:linear-gradient(150deg,rgba(29,158,117,.12),rgba(255,255,255,.014) 60%);
  padding:1.25rem 1.375rem;
}
body.back .b-note p{color:var(--txt-2)}
body.back .b-bars-head{margin-top:3.25rem;font-size:1.1875rem;letter-spacing:-.025em}
body.back .b-bar-group{padding:1.625rem}
body.back .b-bar-track{background:rgba(255,255,255,.06);border-radius:8px}
body.back .b-bar-fill{border-radius:8px}
body.back .b-bar-fill.teal{background:linear-gradient(90deg,#1D9E75,#2CC292)}
body.back .b-bar-fill.violet{background:linear-gradient(90deg,#534AB7,#6E63E8)}
body.back .b-bar-fill.grey{background:rgba(255,255,255,.13)}
body.back .b-bar-save{border-top-color:var(--hair);color:var(--txt-2)}
/* Between 768 and ~990 the two bar groups sit side by side while back.css has
   already switched the rows to label/track/value columns — which squeezes the
   track down to ~40px and makes the comparison unreadable. Stack them until
   there is genuinely room for both. */
@media (min-width:48rem) and (max-width:62rem){
  body.back .b-bars{grid-template-columns:1fr}
}

/* ==========================================================================
   6. Tiers
   ========================================================================== */
body.back .b-tier-grid{margin-top:2.5rem;gap:1.125rem}
body.back .b-tier{padding:1.75rem 1.625rem;gap:.8125rem}
body.back .b-tier h3{font-size:1.1875rem;letter-spacing:-.025em}
body.back .b-tier-price{font-size:1.625rem;letter-spacing:-.035em}
body.back .b-tier li{color:var(--txt-2)}
body.back .b-terms{margin-top:2rem;padding:1.5rem}
body.back .b-terms li{color:var(--txt-3)}
body.back .b-terms li b{color:var(--txt-2)}

/* ==========================================================================
   7. Roadmap
   ========================================================================== */
body.back .b-goal{
  margin-top:2.5rem;border-radius:20px;padding:1.75rem;
  border:1px solid rgba(29,158,117,.28);
  background:
    radial-gradient(110% 130% at 0% 0%,rgba(29,158,117,.18),rgba(29,158,117,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
}
body.back .b-goal-amt{font-size:2.5rem;letter-spacing:-.045em}
body.back .b-goal-copy{color:var(--txt-2)}
body.back .b-funds{border-radius:16px;border-color:var(--hair)}
body.back .b-funds li{background:rgba(255,255,255,.025);border-bottom-color:var(--hair);padding:.8125rem 1.25rem}
body.back .b-funds li span{color:var(--txt-2)}
body.back .b-stretch,
body.back .b-roadmap-note{color:var(--txt-3)}
body.back .b-phases li{border-left-color:var(--hair)}
body.back .b-phases p{color:var(--txt-2)}

/* ==========================================================================
   8. Founder
   ========================================================================== */
body.back .b-founder-body p{color:var(--txt-2);font-size:1.0625rem;line-height:1.7}

/* ==========================================================================
   9. FAQ — same plus/minus toggle as the landing
   ========================================================================== */
body.back .b-faq details{border-bottom-color:var(--hair)}
body.back .b-faq details:first-of-type{border-top-color:var(--hair);margin-top:2.25rem}
body.back .b-faq summary{
  padding:1.375rem 3rem 1.375rem .25rem;
  font-size:1.0625rem;font-weight:600;letter-spacing:-.018em;
  transition:color .16s var(--ease);
}
body.back .b-faq summary:hover{color:var(--teal)}
/* replace back.css's chevron with the + / × cross */
body.back .b-faq summary::after{
  content:"";position:absolute;right:.5rem;top:50%;
  width:14px;height:2px;border:0;border-radius:2px;background:var(--txt-3);
  transform:translateY(-50%) rotate(0deg);
  transition:background .22s var(--ease);
}
/* Centred on the horizontal arm above, not offset from the same edge: ::after
   starts at right:.5rem and runs 14px, so its midpoint is 15px in and the 2px
   vertical arm has to sit at 14px (.875rem) to cross it. At 1.25rem the two
   arms met at their ends and every FAQ row rendered ⊢ instead of +. */
body.back .b-faq summary::before{
  content:"";position:absolute;right:.875rem;top:50%;
  width:2px;height:14px;border-radius:2px;background:var(--txt-3);
  transform:translateY(-50%);
  transition:transform .22s var(--ease),background .22s var(--ease);
}
body.back .b-faq details[open] summary::after{background:var(--teal)}
body.back .b-faq details[open] summary::before{transform:translateY(-50%) rotate(90deg);background:var(--teal)}
body.back .b-faq details p{padding-bottom:1.5rem;font-size:.9688rem;line-height:1.65;color:var(--txt-2)}
body.back .b-faq a{color:var(--teal);text-decoration:none;font-weight:600}
body.back .b-faq a:hover{text-decoration:underline}

/* ==========================================================================
   10. Testers
   ========================================================================== */
body.back .b-testers{
  background:
    radial-gradient(90% 120% at 50% 0%,rgba(83,74,183,.16),rgba(83,74,183,0) 60%),
    linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%);
}
/* Solid, not dashed. A dashed edge means "drop something here" (the receipt
   field on the pledge page is the only place that earns it); on a panel that
   collects an email it just read as an unfinished placeholder. */
body.back .b-tester-slot{margin-top:2rem;border:1px solid var(--hair);padding:2.75rem 1.25rem}
body.back .b-placeholder{color:var(--txt-3)}

/* ==========================================================================
   Footer
   ========================================================================== */
body.back footer{
  display:block;padding:0;border-top:1px solid var(--hair);
}
.b-foot-in{
  max-width:var(--shell);margin:0 auto;
  padding:clamp(3rem,5vw,4rem) clamp(1.25rem,5vw,2rem) 2.5rem;
}
.b-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}
body.back footer .wordmark{color:var(--white);font-size:1.3rem}
.b-foot-tag{margin-top:1rem;max-width:22rem;font-size:.875rem;line-height:1.6;color:var(--txt-3)}
.b-foot-in h4{font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);margin-bottom:1rem}
.b-foot-in ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.b-foot-in ul a{color:var(--txt-2);text-decoration:none;font-size:.875rem;overflow-wrap:anywhere;transition:color .16s var(--ease)}
.b-foot-in ul a:hover{color:var(--white)}
.b-foot-bottom{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  font-size:.8125rem;color:var(--txt-3);
}
@media (max-width:720px){
  .b-foot-top{grid-template-columns:1fr 1fr;gap:2.25rem}
  .b-foot-brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .b-foot-top{grid-template-columns:1fr;gap:2rem}
  .b-foot-bottom{flex-direction:column;gap:.5rem}
}

/* ==========================================================================
   Header nav — Demo and the pledge CTA outrank everything else in it.

   The rule near the top of this file hides every .b-nav-jump under 900px,
   which left a narrow window showing only Privacy / Terms / Support — the
   three links nobody opens the page for. .b-nav-keep opts an item out of
   every collapse, so Demo and "Back the launch" are the last two standing.
   ========================================================================== */
/* Violet, not teal. This is the campaign action — the same button, with the
   same label, that the landing page renders in violet — and teal is the page's
   single light source. A sticky teal gradient put a second glow in EVERY
   viewport, so the one-light rule was broken everywhere at once and the in-page
   pledge buttons had to compete with the header to read as primary. */
body.back .top nav .b-nav-cta{
  padding:.5rem 1rem;border-radius:999px;
  color:var(--white);font-size:.8125rem;font-weight:700;letter-spacing:-.012em;
  border:1px solid rgba(110,99,232,.6);
  background:rgba(255,255,255,.03);
  box-shadow:0 8px 22px -12px rgba(83,74,183,.85);
  transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease);
}
body.back .top nav .b-nav-cta:hover{
  border-color:rgba(110,99,232,.9);
  background:rgba(255,255,255,.07);
  box-shadow:0 12px 28px -12px rgba(83,74,183,1);
}
/* The teal→violet hairline, same as the landing page's campaign button. Needs a
   padding-box/border-box pair, so it upgrades in only where that is supported. */
@supports (background:linear-gradient(#000,#000) padding-box,linear-gradient(#000,#000) border-box){
  body.back .top nav .b-nav-cta{
    border-color:transparent;
    background:
      linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)) padding-box,
      linear-gradient(115deg,rgba(29,158,117,.55),rgba(110,99,232,.95) 55%,rgba(83,74,183,.6)) border-box;
  }
  body.back .top nav .b-nav-cta:hover{
    border-color:transparent;
    background:
      linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04)) padding-box,
      linear-gradient(115deg,rgba(29,158,117,.85),rgba(110,99,232,1) 55%,rgba(83,74,183,.9)) border-box;
  }
}
@media (max-width:900px){
  body.back .top nav .b-nav-jump.b-nav-keep{display:inline-flex}
}
/* Below this the wordmark plus five items stops fitting. The legal links go
   — they are in the footer of every page — and the two that matter stay. */
@media (max-width:640px){
  body.back .top nav .b-nav-doc{display:none}
}
@media (max-width:400px){
  body.back .top nav{gap:.75rem}
  body.back .top nav .b-nav-cta{padding:.45rem .8rem;font-size:.78125rem}
}

/* ==========================================================================
   Chapter dividers — five centred signposts that break a long page into
   parts, so a section heading answers "what is this bit about" instead of
   arriving with no context.

   Each divider is a real .b-sec containing a real .b-wrap. That is deliberate:
   it inherits the content column and the scroll-reveal selectors at the foot
   of this file for free, with no new JS. The padding and rules are then pulled
   back so it reads as a break between parts, not as another block of content.

   These rules live in this file, not back.css, because `body.back .b-sec h2`
   below has the same specificity as `body.back .b-chapter h2` — whichever
   file loads last wins, and this one loads last.
   ========================================================================== */
body.back .b-chapter{
  padding-top:clamp(3.75rem,6.5vw,6rem);
  padding-bottom:clamp(1rem,2vw,1.75rem);
  border-top:1px solid var(--hair);
  text-align:center;
}
/* The divider already draws a rule above itself; the section that follows it
   is part of the same chapter, so a second rule would fence the heading off
   from the content it introduces. */
body.back .b-chapter + .b-sec{
  border-top:0;
  padding-top:clamp(2rem,3.5vw,3rem);
}
body.back .b-chapter .b-wrap{max-width:46rem}
body.back .b-chapter-num{
  display:inline-block;
  padding:.4rem .9rem;border-radius:999px;
  border:1px solid rgba(29,158,117,.32);background:rgba(29,158,117,.09);
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);
}
body.back .b-chapter h2{
  margin-top:1.3rem;
  font-size:clamp(2.1rem,5.2vw,3.25rem);font-weight:900;
  letter-spacing:-.045em;line-height:1.04;text-wrap:balance;
}
body.back .b-chapter-sub{
  margin:1.05rem auto 0;max-width:34rem;
  color:var(--txt-2);font-size:clamp(1rem,1.8vw,1.125rem);line-height:1.6;
  text-wrap:pretty;
}

/* ==========================================================================
   Founder vouch — the accountability line, at the tiers rather than after them.
   Deliberately not a card: it is one person talking, so it takes a teal rule
   and the page's own background instead of another bordered box in a section
   that already has four of them.
   ========================================================================== */
body.back .b-vouch{
  margin-top:2.25rem;max-width:44rem;
  border-left:1px solid rgba(29,158,117,.55);
  padding:.125rem 0 .125rem 1.25rem;
}
body.back .b-vouch p{font-size:.9375rem;line-height:1.68;color:var(--txt-2)}
body.back .b-vouch-sign{margin-top:.75rem;font-size:.8125rem;font-weight:700;color:var(--white)}
body.back .b-vouch-sign a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
body.back .b-vouch-sign a:hover{color:var(--white)}

/* ==========================================================================
   Closing card — the page ends on the decision, in the landing page's idiom.
   ========================================================================== */
body.back .b-close{border-top:0}
body.back .b-close-card{
  border:1px solid var(--hair);border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  padding:clamp(2.25rem,5vw,3.25rem) clamp(1.5rem,4vw,2.75rem);
  text-align:center;
}
body.back .b-close-card h2{
  margin-top:0;
  font-size:clamp(1.9rem,4.4vw,3rem);font-weight:800;
  letter-spacing:-.04em;line-height:1.06;text-wrap:balance;
}
/* Stacked, not wrapped. Three items across a 46rem card break 2 + 1 and orphan
   the last fact; as a column with the ticks aligned it reads as a checklist and
   the block still centres. */
body.back .b-close-assure{
  margin:1.75rem auto 0;flex-direction:column;align-items:flex-start;
  width:max-content;max-width:100%;gap:.5rem;
}
body.back .b-close-act{margin-top:1.75rem}
/* txt-2, not txt-3 — this is the operator disclosure, the same class of
   load-bearing trust copy that was lifted off 4.05:1 elsewhere on the page. */
body.back .b-close-disclosure{
  margin-top:1.75rem;font-size:.75rem;line-height:1.65;color:var(--txt-2);
  max-width:34rem;margin-inline:auto;
}
body.back .b-close-disclosure a{color:var(--txt-2);text-decoration:underline;text-underline-offset:3px}
body.back .b-close-disclosure a:hover{color:var(--white)}

/* ==========================================================================
   Disclosure blocks — long-but-secondary detail folded behind one click.
   Nothing is removed from the page; it just stops competing with the thing
   it supports. Same +/× affordance as the FAQ, so the two never read as two
   different controls.
   ========================================================================== */
body.back .b-disclose{
  margin-top:1.5rem;
  border:1px solid var(--hair);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
}
body.back .b-disclose>summary{
  list-style:none;cursor:pointer;position:relative;
  padding:1.125rem 3.25rem 1.125rem 1.25rem;
  font-size:.9688rem;font-weight:600;letter-spacing:-.015em;color:var(--white);
  transition:color .16s var(--ease);
}
body.back .b-disclose>summary::-webkit-details-marker{display:none}
body.back .b-disclose>summary:hover{color:var(--teal)}
body.back .b-disclose>summary:focus-visible{outline:2px solid var(--teal);outline-offset:-3px;border-radius:16px}
/* the horizontal arm of the + ... */
body.back .b-disclose>summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;
  width:13px;height:2px;border-radius:2px;background:var(--txt-3);
  transform:translateY(-50%);
  transition:background .22s var(--ease);
}
/* ... and the vertical one, centred on it: 1.25rem + half of 13px - half of 2px */
body.back .b-disclose>summary::before{
  content:"";position:absolute;right:calc(1.25rem + 5.5px);top:50%;
  width:2px;height:13px;border-radius:2px;background:var(--txt-3);
  transform:translateY(-50%);
  transition:transform .22s var(--ease),background .22s var(--ease);
}
body.back .b-disclose[open]>summary::after{background:var(--teal)}
body.back .b-disclose[open]>summary::before{transform:translateY(-50%) rotate(90deg);background:var(--teal)}
body.back .b-disclose-in{padding:0 1.25rem 1.375rem}
body.back .b-disclose-in>*:first-child{margin-top:0}

/* Bare variant — for a disclosure that sits inside a panel that already has
   its own card treatment (the campaign terms), where a second border would
   read as a box inside a box. */
body.back .b-disclose--bare{
  margin-top:1.125rem;border:0;background:none;border-radius:0;
}
body.back .b-disclose--bare>summary{padding:.75rem 2.25rem .75rem 0;font-size:.875rem;color:var(--txt-2)}
body.back .b-disclose--bare>summary::after{right:.25rem}
body.back .b-disclose--bare>summary::before{right:calc(.25rem + 5.5px)}
body.back .b-disclose--bare .b-disclose-in{padding:0 0 .25rem}

/* ==========================================================================
   Expanding headings — the heading IS the control. Used where the copy under
   a heading is worth having but is not what you came for: it stays folded
   until the heading is clicked, so the section leads with the thing itself
   (the phone, the tier table) rather than a paragraph about the thing.
   ========================================================================== */
body.back .b-expand>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:1rem;
  width:fit-content;max-width:100%;
  margin-top:.9rem;
}
body.back .b-expand>summary::-webkit-details-marker{display:none}
body.back .b-expand>summary::marker{content:""}
body.back .b-expand>summary:focus-visible{outline:2px solid var(--teal);outline-offset:8px;border-radius:10px}
/* the heading already carries the section's own margin-top; the summary owns
   it now, or the two would stack */
body.back .b-expand>summary>h2,
body.back .b-expand>summary>h3{margin-top:0;transition:color .16s var(--ease)}
body.back .b-expand>summary:hover>h2,
body.back .b-expand>summary:hover>h3{color:var(--teal)}
body.back .b-expand-in>.b-lede{margin-top:1.05rem}

/* the +/× affordance — a real element rather than a pseudo, because the same
   control sits beside an h2 in one place and an h3 in another */
body.back .b-expand-ic{
  position:relative;flex:none;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--hair-strong);background:rgba(255,255,255,.04);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
body.back .b-expand-ic::before,
body.back .b-expand-ic::after{
  content:"";position:absolute;top:50%;left:50%;border-radius:2px;background:var(--txt-2);
  transition:transform .22s var(--ease),background .22s var(--ease);
}
body.back .b-expand-ic::before{width:13px;height:2px;transform:translate(-50%,-50%)}
body.back .b-expand-ic::after{width:2px;height:13px;transform:translate(-50%,-50%)}
body.back .b-expand>summary:hover .b-expand-ic{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07)}
body.back .b-expand[open] .b-expand-ic{border-color:rgba(29,158,117,.45);background:rgba(29,158,117,.12)}
body.back .b-expand[open] .b-expand-ic::before,
body.back .b-expand[open] .b-expand-ic::after{background:var(--teal)}
body.back .b-expand[open] .b-expand-ic::after{transform:translate(-50%,-50%) rotate(90deg)}
@media (prefers-reduced-motion:reduce){
  body.back .b-expand-ic,
  body.back .b-expand-ic::before,
  body.back .b-expand-ic::after{transition:none}
}

/* sub variant — sits on an h3 mid-section, so it needs the heading's own
   spacing above it and a smaller dot */
body.back .b-expand--sub{margin-top:3.25rem}
body.back .b-expand--sub>summary{margin-top:0;gap:.875rem}
body.back .b-expand--sub>summary>.b-bars-head{margin-top:0}
body.back .b-expand--sub .b-expand-ic{width:28px;height:28px}
body.back .b-expand--sub .b-expand-ic::before{width:11px}
body.back .b-expand--sub .b-expand-ic::after{height:11px}
body.back .b-expand--sub .b-bars{margin-top:1.25rem}

/* ==========================================================================
   Hero CTAs — both filled, neither grey. A grey outlined button on a dark
   page reads as "dismiss" or "go back"; these are two different things you
   can do, so they get the two brand colours instead of a rank.
   ========================================================================== */
body.back .b-btn.violet{
  background:linear-gradient(180deg,#6E63E8,#534AB7);border-color:transparent;color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,0 12px 30px -10px rgba(83,74,183,.62);
}
body.back .b-btn.violet:hover{
  background:linear-gradient(180deg,#7E74F0,#5F55C6);border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 16px 38px -10px rgba(83,74,183,.85);
}
/* Decorative only — the label carries the meaning. The arrow exists so that
   nothing about "Back the launch" points backwards. */
body.back .b-btn-ic{
  width:1.05em;height:1.05em;flex:none;margin-left:.55rem;
  transition:transform .16s var(--ease);
}
body.back .b-btn:hover .b-btn-ic{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  body.back .b-btn-ic{transition:none}
  body.back .b-btn:hover .b-btn-ic{transform:none}
}

/* ==========================================================================
   Why-now grid — four cells, not three plus a loose line. The payoff sits in
   the grid as the answer to the three problems beside it.
   ========================================================================== */
body.back .b-why-grid{grid-template-columns:1fr}
@media (min-width:40rem){
  body.back .b-why-grid{grid-template-columns:1fr 1fr}
}
body.back .b-card--answer{
  display:flex;align-items:center;
  border-color:rgba(29,158,117,.34);
  background:
    radial-gradient(120% 130% at 0% 0%,rgba(29,158,117,.20),rgba(29,158,117,0) 62%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
}
body.back .b-card--answer::before{opacity:1;height:2px}
body.back .b-card--answer .b-why-close{
  margin-top:0;
  font-size:clamp(1.25rem,2.2vw,1.5rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.3;text-wrap:balance;
}

/* the currency pills carry names now, not country codes — long enough to
   need a wrap on the narrowest phones */
body.back .b-curswitch{flex-wrap:wrap}

/* ==========================================================================
   Scroll reveal — page chrome only. The demo slot is excluded outright, so
   back.js's rendering can never be hidden by this.

   The hidden state is expressed as a selector here rather than a class added
   by script, so it applies on the first paint — adding the class from JS
   would show the content and then blink it away.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js body.back .b-hero-copy > *,
  .js body.back .b-hero-visual,
  .js body.back .b-sec .b-wrap > *:not(.b-demo-slot){
    opacity:0;transform:translateY(18px);
  }
  .js body.back .b-hero-copy > *.in,
  .js body.back .b-hero-visual.in,
  .js body.back .b-sec .b-wrap > *.in{
    opacity:1;transform:none;
    transition:opacity .65s var(--ease),transform .65s var(--ease);
    transition-delay:var(--d,0s);
  }
}