/* ==========================================================================
   Bloomberry
   Palette is fixed: Vanilla Glaze, Cherry Whip, Berry Sorbet, Black Cherry.
   Nothing here uses pure white or pure black, including shadows and borders,
   which are all tinted with Black Cherry so the page stays warm throughout.
   ========================================================================== */

:root{
  /* --- brand palette --- */
  --vanilla:      #F4F2EC;   /* page canvas */
  --cream:        #FAF8F3;   /* lifted surface, still warm */
  --whip:         #E8CBD0;   /* soft fills, hover states */
  --whip-soft:    #F2E3E5;   /* washes */
  --sorbet:       #BC7087;   /* signature accent */
  --sorbet-deep:  #9E4E64;   /* button fill, deepened so light text passes AA */
  --sorbet-ink:   #8A415A;   /* small accent text on light */
  --cherry:       #591721;   /* text and deep backgrounds */
  --cherry-lift:  #6B2531;   /* raised surface on deep sections */

  /* --- tinted neutrals, all derived from Black Cherry --- */
  --ink:          #591721;
  --ink-80:       rgba(89,23,33,.80);
  --ink-70:       rgba(89,23,33,.72);
  --ink-50:       rgba(89,23,33,.52);
  --ink-35:       rgba(89,23,33,.35);
  --line:         rgba(89,23,33,.13);
  --line-soft:    rgba(89,23,33,.08);

  --shadow-sm:  0 1px 2px rgba(89,23,33,.05), 0 3px 10px rgba(89,23,33,.05);
  --shadow-md:  0 2px 4px rgba(89,23,33,.05), 0 10px 26px rgba(89,23,33,.08);
  --shadow-lg:  0 4px 10px rgba(89,23,33,.06), 0 22px 50px rgba(89,23,33,.11);
  --shadow-berry: 0 10px 28px rgba(137,63,88,.28);

  /* --- type --- */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  /* Inter, so every visitor sees the same face rather than each platform's own.
     System fonts stay as fallbacks in case the Google Fonts request fails. */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, system-ui,
           "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- motion: one easing curve for the whole site --- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .22s;
  --t-mid:  .42s;
  --t-slow: .8s;

  --shell: 1140px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--vanilla);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .2vw, 1.0625rem);
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.004em;   /* Inter sets a touch wide at body size */
  font-optical-sizing:auto; /* Inter carries an opsz axis; let it do its job */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
svg{ display:block; }

/* ---------- type scale ---------- */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  font-variation-settings:"SOFT" 30, "WONK" 1, "opsz" 120;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(2.45rem, 1.6rem + 3.6vw, 4.15rem); text-wrap:pretty; }
h2{ font-size:clamp(1.95rem, 1.35rem + 2.5vw, 3rem); }
h3{ font-size:clamp(1.18rem, 1.05rem + .5vw, 1.4rem); line-height:1.25; font-variation-settings:"SOFT" 30, "WONK" 0, "opsz" 40; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }

::selection{ background:var(--whip); color:var(--cherry); }

/* ---------- layout ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  padding-block:clamp(4.5rem, 9vw, 8.5rem);
  scroll-margin-top:5rem;
  position:relative;
}

.section-head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head.narrow{ max-width:46ch; }
.section-head h2{ margin-top:.5rem; }

.kicker{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--sorbet-ink);
  margin:0;
}
.kicker.light{ color:var(--whip); }

.visually-hidden{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:50%; top:0; transform:translate(-50%,-140%);
  z-index:200; background:var(--cherry); color:var(--vanilla);
  padding:.7rem 1.2rem; border-radius:0 0 12px 12px;
  font-size:.9rem; text-decoration:none;
  transition:transform var(--t-mid) var(--ease);
}
.skip-link:focus-visible{ transform:translate(-50%,0); }

:focus-visible{
  outline:2.5px solid var(--sorbet-deep);
  outline-offset:3px;
  border-radius:4px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(244,242,236,0);
  border-bottom:1px solid transparent;
  transition:background var(--t-slow) var(--ease-soft),
             border-color var(--t-slow) var(--ease-soft),
             backdrop-filter var(--t-slow) var(--ease-soft),
             box-shadow var(--t-slow) var(--ease-soft);
}
.site-header.is-stuck{
  background:rgba(244,242,236,.82);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line-soft);
  box-shadow:0 1px 20px rgba(89,23,33,.05);
}

.header-inner{
  display:flex; align-items:center; gap:1.5rem;
  min-height:4.6rem;
}

.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--cherry);
  font-family:var(--serif);
  font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 20;
  font-size:1.2rem;
  letter-spacing:-.015em;
  margin-right:auto;
}
.brand-mark{ width:1.85rem; height:1.85rem; flex:none; overflow:visible; }
.bm-stem{ stroke:var(--cherry); }
.bm-leaf{ fill:var(--cherry); }
.bm-berry{ transition:transform .5s var(--ease), fill .5s var(--ease); transform-origin:center; }
.bm-1{ fill:var(--sorbet); }
.bm-2{ fill:var(--sorbet-deep); }
.bm-3{ fill:var(--whip); }
.brand:hover .bm-1{ transform:translate(-.9px,-1.1px) scale(1.06); }
.brand:hover .bm-2{ transform:translate(1px,-.5px) scale(1.06); }
.brand:hover .bm-3{ transform:translate(0,1.2px) scale(1.08); fill:var(--sorbet); }

.nav{ display:flex; gap:1.9rem; }
.nav a{
  position:relative;
  text-decoration:none;
  font-size:.93rem;
  color:var(--ink-70);
  padding-block:.35rem;
  transition:color var(--t-mid) var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1.5px; background:var(--sorbet);
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-mid) var(--ease);
}
.nav a:hover{ color:var(--cherry); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  --btn-bg:var(--sorbet-deep);
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.65rem;
  border:0; border-radius:999px;
  background:var(--btn-bg);
  color:var(--vanilla);
  font-family:var(--sans);
  font-size:1rem; font-weight:600; letter-spacing:0;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  /* the inset line is a 1px highlight along the top inside edge. It is what
     gives the pill a sense of volume, rather than reading as a flat shape. */
  box-shadow:inset 0 1px 0 rgba(244,242,236,.22), 0 2px 6px rgba(89,23,33,.1);
  /* transform gets its own shorter curve so a press reads as a press. Fast out,
     settle, no overshoot: a button that boings would be the one element on this
     site fighting its own tone. */
  transition:transform .2s cubic-bezier(.2,.9,.3,1),
             box-shadow var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease);
}
/* the fill slides in rather than snapping */
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  background:var(--cherry);
  opacity:0;
  transform:scale(.94);
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(244,242,236,.22), var(--shadow-berry);
}
.btn:hover::before{ opacity:1; transform:scale(1); }
/* compress under the cursor, and drop the lift and most of the shadow with it,
   so the whole button reads as pushed toward the page */
.btn:active{
  transform:translateY(0) scale(.97);
  box-shadow:inset 0 1px 0 rgba(244,242,236,.14), 0 1px 3px rgba(89,23,33,.14);
  transition-duration:.08s;
}
.btn-arrow{
  display:inline-block;
  transition:transform var(--t-mid) var(--ease);
}
.btn:hover .btn-arrow{ transform:translateX(4px); }

.btn-sm{ padding:.62rem 1.15rem; font-size:.9rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  padding-top:clamp(3rem, 6vw, 5.5rem);
  padding-bottom:clamp(4rem, 8vw, 7rem);
  overflow:hidden;
}

.hero-glow{ position:absolute; inset:-20% -10% auto -10%; height:120%; pointer-events:none; z-index:0; }
.glow{ position:absolute; border-radius:50%; filter:blur(10px); }
.glow-a{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  top:-14%; right:-8%;
  background:radial-gradient(circle at 50% 50%, rgba(232,203,208,.85) 0%, rgba(232,203,208,.35) 42%, rgba(232,203,208,0) 68%);
  animation:drift-a 26s ease-in-out infinite alternate;
}
.glow-b{
  width:44vw; height:44vw; max-width:620px; max-height:620px;
  top:34%; left:-14%;
  background:radial-gradient(circle at 50% 50%, rgba(188,112,135,.28) 0%, rgba(188,112,135,.12) 45%, rgba(188,112,135,0) 70%);
  animation:drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-5%,6%,0) scale(1.12); }
}
@keyframes drift-b{
  from{ transform:translate3d(0,0,0) scale(1.05); }
  to  { transform:translate3d(7%,-8%,0) scale(.92); }
}

.hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:500;
  color:var(--sorbet-ink);
  background:rgba(232,203,208,.5);
  border:1px solid rgba(188,112,135,.28);
  padding:.42rem .95rem .42rem .8rem;
  border-radius:999px;
  margin:0 0 1.5rem;
}
.pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--sorbet-deep);
  box-shadow:0 0 0 0 rgba(158,78,100,.55);
  animation:pulse 2.6s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(158,78,100,.5); }
  60%{ box-shadow:0 0 0 9px rgba(158,78,100,0); }
  100%{ box-shadow:0 0 0 0 rgba(158,78,100,0); }
}

h1{ margin-bottom:1.5rem; }
.accent-word{
  position:relative;
  display:inline-block;
  font-style:italic;
  color:var(--sorbet-deep);
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 144;
  padding-inline:.04em;
}
.squiggle{
  position:absolute;
  left:-.02em; right:-.02em; bottom:-.16em;
  width:104%; height:.34em;
  overflow:visible;
}
.squiggle path{
  stroke:var(--sorbet);
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:.85;
}
.js .squiggle path{ transition:stroke-dashoffset 1.1s var(--ease) .75s; }
.is-loaded .squiggle path{ stroke-dashoffset:0; }

.lede{
  font-size:clamp(1.05rem,1rem + .35vw,1.22rem);
  color:var(--ink-70);
  max-width:46ch;
  margin-bottom:2rem;
}

.micro{
  font-size:.86rem;
  color:var(--ink-70);
  margin:1rem 0 0;
}

/* ---------- signup form ---------- */
.signup-wrap{ display:grid; max-width:31rem; }
.signup-wrap.wide{ max-width:34rem; margin-inline:auto; }
.signup, .signup-done{ grid-area:1/1; align-self:center; }

.signup{
  display:flex; gap:.55rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.4rem .4rem .4rem .45rem;
  box-shadow:var(--shadow-sm);
  transition:opacity var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.signup:hover{ border-color:rgba(188,112,135,.4); }
.signup:focus-within{
  border-color:var(--sorbet);
  box-shadow:0 0 0 4px rgba(188,112,135,.16), var(--shadow-sm);
}

.signup-input{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent;
  font-family:var(--sans); font-size:1rem; font-weight:400;
  color:var(--cherry);
  padding:.65rem .5rem .65rem 1rem;
}
.signup-input::placeholder{ color:rgba(89,23,33,.65); }
.signup-input:focus{ outline:none; }
.signup-input:focus-visible{ outline:none; }

.signup.is-invalid{
  border-color:var(--sorbet-deep);
  animation:nudge .42s var(--ease-soft);
}
@keyframes nudge{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  60%{ transform:translateX(4px); }
}

.signup-wrap.is-sending .signup{ opacity:.6; }
.signup-wrap.is-sending .btn{ pointer-events:none; }

.signup-done{
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  gap:.7rem;
  padding:.85rem 1.5rem;
  background:var(--cream);
  border:1px solid rgba(188,112,135,.45);
  border-radius:999px;
  box-shadow:var(--shadow-sm);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.985);
  transition:opacity var(--t-slow) var(--ease),
             transform var(--t-slow) var(--ease),
             visibility 0s linear var(--t-slow);
}
.signup-wrap.is-done .signup{
  opacity:0; visibility:hidden;
  transform:translateY(-8px) scale(.98);
  pointer-events:none;
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
}
.signup-wrap.is-done .signup-done{
  opacity:1; visibility:visible; transform:none;
  transition-delay:.12s,.12s,0s;
}
.done-check{ width:1.4rem; height:1.4rem; flex:none; }
.done-check path{
  stroke:var(--sorbet-deep);
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset .7s var(--ease) .3s;
}
.signup-wrap.is-done .done-check path{ stroke-dashoffset:0; }
.done-title{
  font-family:var(--serif); font-size:1.1rem; font-weight:500;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 24;
  margin:0; color:var(--cherry); line-height:1.35;
}
.done-sub{
  font-family:var(--sans); font-size:.9rem; font-weight:400;
  color:var(--ink-70);
}

.form-status{
  grid-area:2/1;
  font-size:.86rem;
  color:var(--sorbet-ink);
  margin:.7rem 0 0;
  min-height:0;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.form-status.is-shown{ opacity:1; transform:none; }

/* ---------- hero board ---------- */
.hero-visual{ perspective:1100px; }

.board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(.7rem,1.4vw,1.1rem);
  transform-style:preserve-3d;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform 1.1s var(--ease);
}
.board-col{ display:flex; flex-direction:column; gap:clamp(.7rem,1.4vw,1.1rem); }
.board-col-drop{ margin-top:clamp(1.6rem,4vw,3rem); }

.pin{
  background:var(--cream);
  border:1px solid var(--line-soft);
  border-radius:20px;
  padding:.75rem .6rem .95rem;
  box-shadow:var(--shadow-md);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.pin:hover{ box-shadow:var(--shadow-lg); }

.pin-art{
  border-radius:14px;
  position:relative;
  overflow:hidden;
  background:var(--whip);   /* warm hold while the photo decodes */
  will-change:transform;
}
/* No fixed height. Each photo is pre-cropped to its card's ratio, so the image
   defines the box and the aspect is correct at every width by construction.
   A fixed height here was the bug: below 980px the hero stacks and the cards
   get wider, while a vw-based height stays small, so subjects were sheared off.
   These sit in the first screen, so no lazy loading. */
.pin-art img{
  display:block;
  width:100%;
  height:auto;
}

.pin-label{
  font-size:.84rem; font-weight:500;
  color:var(--ink-80);
  margin:.7rem .35rem 0;
  line-height:1.4;
}
.pin-why{
  font-size:.8rem;
  color:var(--ink-70);
  margin:.3rem .35rem 0;
  line-height:1.5;
}

.pin-feature{
  position:relative;
  border-color:rgba(188,112,135,.4);
  box-shadow:var(--shadow-lg);
}
.pin-rank{
  position:absolute; top:-.7rem; left:.9rem;
  background:var(--sorbet-deep);
  color:var(--vanilla);
  font-size:.7rem; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  padding:.32rem .7rem;
  border-radius:999px;
  box-shadow:0 4px 12px rgba(138,65,90,.3);
  z-index:2;
}

.board-note{
  font-size:.78rem;
  color:var(--ink-70);
  text-align:center;
  margin:1.6rem 0 0;
  font-style:italic;
}

/* Gentle idle float, each pin on its own cycle. This sits on the art block
   rather than the card so the labels underneath never move: text stays still,
   only the shapes breathe. */
.float-a .pin-art{ animation:bob 7.5s var(--ease-soft) infinite; }
.float-b .pin-art{ animation:bob 9.2s var(--ease-soft) infinite -2.4s; }
.float-c .pin-art{ animation:bob 8.3s var(--ease-soft) infinite -4.1s; }
.float-d .pin-art{ animation:bob 10.1s var(--ease-soft) infinite -1.2s; }
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}

/* ==========================================================================
   Problem
   ========================================================================== */
.problem{
  background:
    linear-gradient(180deg, var(--vanilla) 0%, #F0EDE5 45%, var(--vanilla) 100%);
}

.problem-grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2rem,4.5vw,4.5rem);
  align-items:center;
}

.chips{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem;
  max-width:32rem;
}
.chip{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.55rem 1.1rem;
  font-size:.92rem;
  color:var(--ink-70);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-mid) var(--ease), color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  will-change:transform;
}
.chip-1{ animation:sway 9s var(--ease-soft) infinite; }
.chip-2{ animation:sway 11s var(--ease-soft) infinite -3s; }
.chip-3{ animation:sway 8.4s var(--ease-soft) infinite -5.5s; }
.chip-4{ animation:sway 10.3s var(--ease-soft) infinite -1.8s; }
.chip-5{ animation:sway 9.6s var(--ease-soft) infinite -6.7s; }
@keyframes sway{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  33%    { transform:translate(3px,-5px) rotate(-.7deg); }
  66%    { transform:translate(-3px,3px) rotate(.6deg); }
}
.chip:hover{
  color:var(--cherry);
  border-color:rgba(188,112,135,.45);
  animation-play-state:paused;
  transform:translateY(-3px) scale(1.03);
}

.problem-body{ max-width:46ch; }
.problem-body > p{ font-size:clamp(1.02rem,.98rem + .3vw,1.16rem); color:var(--ink-70); }

.pull{
  margin:2rem 0 0; padding:0 0 0 1.6rem;
  border-left:2.5px solid var(--sorbet);
  font-family:var(--serif);
  font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);
  font-weight:500;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 60;
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--cherry);
}

/* ==========================================================================
   How it works
   ========================================================================== */
.steps{
  --step-gap:clamp(1.5rem,3.5vw,3rem);
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--step-gap);
}

.step{ position:relative; }

/* each step trails a dashed segment into the next one, so the run of dashes
   stops at 03 instead of carrying on into nothing */
.step::after{
  content:"";
  position:absolute;
  top:1.6rem;
  left:4.3rem;
  right:calc(var(--step-gap) * -1);
  height:1.5px;
  background:repeating-linear-gradient(to right, rgba(188,112,135,.55) 0 7px, transparent 7px 14px);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 1.05s var(--ease);
}
.step:last-child::after{ content:none; }
.steps.is-drawn .step::after{ transform:scaleX(1); }
.steps.is-drawn .step:nth-child(1)::after{ transition-delay:.2s; }
.steps.is-drawn .step:nth-child(2)::after{ transition-delay:.75s; }
.step-num{
  display:block;
  font-family:var(--serif);
  font-size:3.4rem; font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 1,"opsz" 100;
  line-height:1;
  color:var(--whip);
  letter-spacing:-.03em;
  transition:color var(--t-slow) var(--ease);
}
.step:hover .step-num{ color:var(--sorbet); }

.step-icon{
  display:flex; align-items:center; justify-content:center;
  width:2.9rem; height:2.9rem;
  margin:1.4rem 0 1.1rem;
  border-radius:14px;
  background:var(--cream);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.step-icon svg{ width:1.4rem; height:1.4rem; stroke:var(--sorbet-deep); }
.step:hover .step-icon{
  transform:translateY(-3px) rotate(-4deg);
  border-color:rgba(188,112,135,.45);
  background:var(--whip-soft);
}

.step h3{ margin-bottom:.6rem; }
.step p{ color:var(--ink-70); font-size:.98rem; }

/* ==========================================================================
   Who it's for
   ========================================================================== */
.who{ background:linear-gradient(180deg,var(--vanilla),#F1EEE6); }

.who-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.5rem);
}
.card{
  position:relative; overflow:hidden;
  background:var(--cream);
  border:1px solid var(--line-soft);
  border-radius:22px;
  padding:clamp(1.6rem,2.5vw,2.1rem);
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(165deg, rgba(232,203,208,.55), rgba(232,203,208,0) 62%);
  opacity:0;
  transition:opacity var(--t-slow) var(--ease);
  pointer-events:none;
}
.card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(188,112,135,.35);
}
.card:hover::after{ opacity:1; }
.card > *{ position:relative; z-index:1; }

.card-glyph{
  display:flex; align-items:center; justify-content:center;
  width:2.7rem; height:2.7rem; margin-bottom:1.2rem;
  border-radius:50%;
  background:var(--whip-soft);
  transition:background var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.card-glyph svg{ width:1.35rem; height:1.35rem; stroke:var(--sorbet-deep); }
.card:hover .card-glyph{ background:var(--whip); transform:scale(1.07); }

.card h3{ margin-bottom:.55rem; }
.card p{ color:var(--ink-70); font-size:.96rem; }

/* ==========================================================================
   Board band
   A full-bleed masonry strip. Varied tile heights, the way a real board packs.
   Deliberately static: it reveals on scroll and then holds still, so a long
   image-heavy stretch stays restful to read past.
   ========================================================================== */
.board-band{
  padding:clamp(2rem,3.4vw,3rem) 0 clamp(1.2rem,2vw,1.6rem);
  background:linear-gradient(180deg,#F1EEE6 0%,var(--vanilla) 55%,var(--vanilla) 100%);
  overflow:hidden;
}

.band-masonry{
  columns:9;
  column-gap:12px;
  padding-inline:12px;
}

.tile{ margin:0 0 12px; break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid; }

.tile-img{
  display:block;
  width:100%;
  height:auto;          /* width/height attributes hold the ratio, so no shift on load */
  border-radius:14px;
  background:var(--whip);   /* warm hold before the image paints, never a white flash */
  box-shadow:0 1px 2px rgba(89,23,33,.05), 0 6px 18px rgba(89,23,33,.07);
  transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.tile-img:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
}

.band-note{
  text-align:center;
  font-size:.78rem;
  font-style:italic;
  color:var(--ink-70);
  margin:1.1rem auto 0;
  padding-inline:var(--gutter);
}

/* without JS the deferred tiles would be empty boxes, so drop them entirely */
html:not(.js) .tile-extra{ display:none; }

/* Columns and tile count step down together, so the band stays about two rows
   deep and a tile stays roughly 145-195px at every width. Getting this wrong in
   either direction is what made the band balloon: too few columns and the tiles
   grow, too many tiles for the columns and it goes rows deep.
   Column width is NOT usable here: at 375px it collapses to one 357px column.
   These thresholds MUST match the data-min values in index.html. */
@media (max-width:1599px){ .band-masonry{ columns:8; } .tile:nth-child(n+17){ display:none; } }
@media (max-width:1359px){ .band-masonry{ columns:7; } .tile:nth-child(n+15){ display:none; } }
@media (max-width:1159px){ .band-masonry{ columns:6; } .tile:nth-child(n+13){ display:none; } }
@media (max-width:999px){  .band-masonry{ columns:5; } .tile:nth-child(n+11){ display:none; } }
@media (max-width:819px){  .band-masonry{ columns:4; } .tile:nth-child(n+9){  display:none; } }
@media (max-width:619px){  .band-masonry{ columns:3; } .tile:nth-child(n+7){  display:none; } }
@media (max-width:479px){
  .band-masonry{ columns:2; column-gap:9px; padding-inline:9px; }
  .tile{ margin-bottom:9px; }
}

/* ==========================================================================
   Payoff (deep section)
   ========================================================================== */
.payoff{
  background:var(--cherry);
  color:var(--vanilla);
  position:relative;
  overflow:hidden;
}
.payoff::before{
  content:""; position:absolute;
  width:60vw; height:60vw; max-width:800px; max-height:800px;
  top:-25%; right:-15%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(188,112,135,.33), rgba(188,112,135,0) 66%);
  animation:drift-b 30s ease-in-out infinite alternate;
  pointer-events:none;
}
.payoff-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(2.5rem,5vw,4.5rem);
  align-items:center;
}
.payoff h2{ margin:.6rem 0 1.3rem; max-width:16ch; }
.payoff-copy p{ color:rgba(244,242,236,.78); font-size:clamp(1.02rem,.98rem + .3vw,1.14rem); max-width:44ch; }

.plan{
  /* Perforated top edge: the card reads as a page torn from a pad rather than a
     software panel. A mask is used rather than overlaid circles so the notches
     show whatever is actually behind them, including the section's radial glow.
     Browsers without mask support simply get a straight edge. */
  -webkit-mask-image:radial-gradient(circle 7px at 13px 0, transparent 98%, #000 100%);
          mask-image:radial-gradient(circle 7px at 13px 0, transparent 98%, #000 100%);
  -webkit-mask-size:26px 100%;  mask-size:26px 100%;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
  background:var(--cherry-lift);
  border:1px solid rgba(232,203,208,.18);
  border-radius:24px;
  padding:clamp(2.1rem,3vw,2.6rem) clamp(1.5rem,2.6vw,2.1rem) clamp(1.5rem,2.6vw,2.1rem);
  box-shadow:0 28px 60px rgba(30,6,11,.35);
}
.plan-head{
  font-size:.74rem; font-weight:600;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--whip);
  margin:0 0 1.3rem;
}
.plan-list{ list-style:none; margin:0; padding:0; }
.plan-list li{
  display:flex; gap:1rem;
  padding:.95rem .8rem;
  margin-inline:-.8rem;
  border-radius:14px;
  border-top:1px solid rgba(232,203,208,.14);
  transition:background var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.plan-list li:first-child{ border-top:0; }
.plan-list li:hover{ background:rgba(232,203,208,.09); transform:translateX(4px); }

.plan-n{
  flex:none;
  width:1.7rem; height:1.7rem;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--whip);
  color:var(--cherry);
  font-family:var(--serif); font-weight:600; font-size:.88rem;
  font-variation-settings:"opsz" 14;
  margin-top:.1rem;
}
.plan-t{ margin:0; font-size:.97rem; font-weight:500; color:var(--vanilla); line-height:1.45; }
.plan-w{ margin:.2rem 0 0; font-size:.86rem; color:rgba(244,242,236,.62); line-height:1.5; }
.plan-note{
  margin:1.3rem 0 0;
  font-size:.76rem; font-style:italic;
  color:rgba(244,242,236,.64);
}

/* ==========================================================================
   Join / early access
   ========================================================================== */
.join{
  background:linear-gradient(175deg, var(--whip-soft) 0%, var(--whip) 100%);
  text-align:center;
}
.join-inner{ max-width:40rem; }
.join h2{ margin:.6rem 0 1.2rem; }
.join-lede{
  color:var(--ink-70);
  font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);
  margin-bottom:2.1rem;
}
.join .signup{ background:var(--cream); border-color:rgba(89,23,33,.1); }


/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{
  max-width:52rem;
  border-top:1px solid var(--line);
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item h3{ margin:0; font-size:inherit; font-family:inherit; letter-spacing:0; }

.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background:none; border:0;
  padding:1.5rem .4rem;
  text-align:left;
  cursor:pointer;
  font-family:var(--serif);
  font-size:clamp(1.08rem,1rem + .4vw,1.32rem);
  font-weight:500;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 40;
  letter-spacing:-.01em;
  color:var(--cherry);
  transition:color var(--t-mid) var(--ease), padding-left var(--t-mid) var(--ease);
}
.faq-q:hover{ color:var(--sorbet-deep); padding-left:.9rem; }

.faq-sign{
  position:relative; flex:none;
  width:1.55rem; height:1.55rem;
  border-radius:50%;
  background:var(--whip-soft);
  transition:background var(--t-mid) var(--ease), transform var(--t-slow) var(--ease);
}
.faq-sign::before,.faq-sign::after{
  content:""; position:absolute; top:50%; left:50%;
  width:.68rem; height:1.6px; border-radius:2px;
  background:var(--sorbet-deep);
  transform:translate(-50%,-50%);
  transition:transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.faq-sign::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faq-q:hover .faq-sign{ background:var(--whip); }
.faq-q[aria-expanded="true"] .faq-sign{ background:var(--whip); transform:rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-sign::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; }

/* 0fr to 1fr gives a genuinely smooth open with no height measuring */
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows var(--t-slow) var(--ease), opacity var(--t-mid) var(--ease);
}
.faq-a > .faq-a-inner{ overflow:hidden; }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; opacity:1; }
.faq-a p{
  margin:0;
  padding:0 3.5rem 1.7rem .4rem;
  color:var(--ink-70);
  max-width:60ch;
}

/* ==========================================================================
   Legal pages (privacy, and terms when it exists)
   Plain prose. Measure is deliberately narrow: legal text is the one place
   people actually read every line, so line length matters more than density.
   ========================================================================== */
.legal{ padding-block:clamp(4rem,7vw,6.5rem) clamp(3.5rem,6vw,5.5rem); }
.legal-inner{ max-width:none; }
.legal-inner > *{ max-width:68ch; }

.legal h1{ font-size:clamp(2.1rem,1.6rem + 2vw,3rem); margin:.5rem 0 .6rem; }
.legal h2{
  font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem);
  margin:2.6rem 0 .7rem;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 40;
}
.legal p{ color:var(--ink-80); }
.legal ul{
  margin:0 0 1.15em;
  padding-left:1.15rem;
  color:var(--ink-80);
}
.legal li{ margin-bottom:.4rem; }
.legal li::marker{ color:var(--sorbet); }
.legal strong{ font-weight:600; color:var(--cherry); }
.legal a{ color:var(--sorbet-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color var(--t-mid) var(--ease); }
.legal a:hover{ color:var(--cherry); }

.legal-date{ font-size:.9rem; color:var(--ink-50); margin-bottom:2rem; }
.legal-lede{ font-size:1.08rem; }

.legal-callout{
  background:var(--whip-soft);
  border-left:3px solid var(--sorbet);
  border-radius:0 14px 14px 0;
  padding:1.2rem 1.4rem;
  margin:0 0 2.2rem;
}
.legal-callout p{ margin:0; font-size:.98rem; }

.legal-back{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line); font-size:.95rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:var(--cherry);
  color:rgba(244,242,236,.7);
  padding-top:clamp(3rem,5vw,4.5rem);
}
.site-footer .brand{ color:var(--vanilla); margin-right:0; }
.site-footer .bm-stem{ stroke:var(--whip); }
.site-footer .bm-leaf{ fill:var(--whip); }
.site-footer .bm-3{ fill:var(--vanilla); }

.footer-inner{
  display:flex; flex-wrap:wrap; gap:2rem;
  justify-content:space-between; align-items:flex-start;
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
.footer-line{
  margin:1rem 0 0;
  font-family:var(--serif);
  font-size:1.05rem;
  font-style:italic;
  font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 24;
  color:var(--whip);
  max-width:34ch;
}
.footer-links{ display:flex; flex-direction:column; align-items:flex-end; gap:.9rem; }
.footer-links a{
  color:rgba(244,242,236,.74);
  text-decoration:none;
  font-size:.95rem;
  position:relative;
  transition:color var(--t-mid) var(--ease);
}
.footer-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-3px;
  height:1px; background:var(--sorbet);
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--t-mid) var(--ease);
}
.footer-links a:hover{ color:var(--vanilla); }
.footer-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.footer-cta{
  display:inline-flex; align-items:center;
  border:1px solid rgba(232,203,208,.35);
  border-radius:999px;
  padding:.6rem 1.25rem;
  color:var(--whip) !important;
  transition:background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.footer-cta::after{ display:none; }
.footer-cta:hover{ background:var(--whip); border-color:var(--whip); color:var(--cherry) !important; }

.footer-base{
  border-top:1px solid rgba(232,203,208,.14);
  padding-block:1.4rem 1.6rem;
}
.footer-base p{ margin:0; font-size:.82rem; color:rgba(244,242,236,.62); }

/* ==========================================================================
   Reveal on scroll + load
   ========================================================================== */
.js .reveal,
.js .load-in{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .85s var(--ease) var(--d,0ms),
             transform .85s var(--ease) var(--d,0ms);
}
.js .reveal.is-in,
.js .is-loaded .load-in{ opacity:1; transform:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; gap:3.5rem; }
  .hero-copy{ max-width:36rem; }
  .hero-visual{ max-width:34rem; }
  .payoff-inner{ grid-template-columns:1fr; }
  .payoff h2{ max-width:20ch; }
  .steps{ grid-template-columns:1fr 1fr; gap:2.5rem 2rem; }
  .step::after{ content:none; }
  .problem-grid{ grid-template-columns:1fr; gap:3rem; }
  .chips{ max-width:36rem; }
  .who-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .nav{ display:none; }
  .header-inner{ min-height:4.1rem; }
  .steps{ grid-template-columns:1fr; gap:2.4rem; }
  .who-grid{ grid-template-columns:1fr; }
  .step-num{ font-size:2.8rem; }
  .step-icon{ margin-top:1rem; }
}

@media (max-width:560px){
  .signup{
    flex-direction:column;
    border-radius:24px;
    padding:.75rem;
    gap:.65rem;
  }
  .signup-input{ padding:.6rem .85rem; text-align:center; }
  .signup .btn{ width:100%; }
  .board-col-drop{ margin-top:1.4rem; }
  .pull{ padding-left:1.15rem; }
  .faq-q{ padding:1.25rem .2rem; gap:1rem; }
  .faq-a p{ padding-right:2rem; }
  .footer-inner{ flex-direction:column; gap:2.2rem; }
  .footer-links{ align-items:flex-start; }
}

/* ==========================================================================
   Reduced motion: keep every state change, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal,.js .load-in{ opacity:1; transform:none; }
  .squiggle path{ stroke-dashoffset:0; }
  .step::after{ transform:scaleX(1); }
  .board{ transform:none !important; }
}