/* ============================================================
   Dr. Paz Vital Flow — shared stylesheet
   ============================================================ */
:root{
  --deep:#0E140F;
  --forest:#1E2A1E;
  --moss:#243024;
  --gold:#C4B47C;
  --gold-dk:#A2915C;
  --gold-lo:rgba(196,180,124,.38);
  --cream:#F0EEE4;
  --dim:rgba(240,238,228,.52);
  --line:rgba(240,238,228,.13);
  --rose:#C99A8E;
  --sage:#8CA184;
  --max:1220px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--deep);color:var(--cream);
  font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:16px;line-height:1.75;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--gold);color:var(--deep)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- type ---------- */
h1,h2,h3{font-family:'Cormorant',Georgia,serif;font-weight:300;letter-spacing:-.01em}
h1{font-size:clamp(38px,6.2vw,84px);line-height:1.03}
h2{font-size:clamp(29px,4.3vw,56px);line-height:1.09}
h3{font-size:clamp(19px,2.1vw,26px);line-height:1.28}
.eyebrow{
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:14px;font-weight:400;
}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--gold-lo);flex:none}
.eyebrow.ctr{justify-content:center}
.lede{font-size:clamp(16px,1.5vw,18.5px);line-height:1.8;color:rgba(240,238,228,.8);max-width:58ch}
.small{font-size:13.5px;line-height:1.72;color:var(--dim)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(30px,5vw,56px)}
section{position:relative;z-index:2}
/* Vertical rhythm only. These MUST NOT use the `padding` shorthand: almost
   every section is `class="pad wrap"`, and the shorthand's `0` horizontal
   value silently overwrote `.wrap`'s gutter — same specificity, declared
   later, so it won. That is why body copy sat flush against the screen edge
   on phones while `.wrap` looked correct in the stylesheet. */
.pad{padding-block:clamp(84px,10vw,140px)}
.pad-s{padding-block:clamp(56px,7vw,92px)}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);gap:clamp(34px,6vw,86px);align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}

/* ============================================================
   BUTTONS — redesigned
   ============================================================ */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  font-family:'Jost',sans-serif;font-size:11.5px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  padding:15px 30px;border-radius:100px;
  text-decoration:none;cursor:pointer;overflow:hidden;
  border:1px solid var(--line);color:var(--cream);background:transparent;
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .3s var(--ease);
  isolation:isolate;white-space:nowrap;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--cream);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--deep);border-color:var(--cream)}
.btn:active{transform:translateY(1px)}
.btn .ar{
  display:inline-block;width:14px;height:1px;background:currentColor;position:relative;
  transition:width .4s var(--ease);
}
.btn .ar::after{
  content:"";position:absolute;right:0;top:-2.5px;
  width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .ar{width:22px}

/* gold — primary */
.btn.gold{border-color:var(--gold);color:var(--gold)}
.btn.gold::before{background:var(--gold)}
.btn.gold:hover,.btn.gold:focus-visible{color:var(--deep);border-color:var(--gold)}

/* solid gold — highest emphasis */
.btn.solid{background:var(--gold);border-color:var(--gold);color:var(--deep)}
.btn.solid::before{background:var(--cream)}
.btn.solid:hover,.btn.solid:focus-visible{color:var(--deep);border-color:var(--cream)}

/* quiet text link button */
.btn.ghost{border-color:transparent;padding-left:0;padding-right:0;border-radius:0;color:var(--dim)}
.btn.ghost::before{display:none}
.btn.ghost:hover{color:var(--gold);border-color:transparent;background:none}
.btn.ghost::after{
  content:"";position:absolute;left:0;bottom:6px;height:1px;width:0;background:var(--gold);
  transition:width .45s var(--ease);
}
.btn.ghost:hover::after{width:100%}

/* disabled / coming soon */
.btn.mute{opacity:.42;pointer-events:none}

.btn.lg{padding:19px 38px;font-size:12px}
.btn.sm{padding:12px 22px;font-size:10.5px}
.btn.block{width:100%;justify-content:center}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- header CTA: the portal key ---------- */
.cta-portal{
  position:relative;display:inline-flex;align-items:center;gap:16px;
  padding:11px 14px 11px 36px;border-radius:100px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  color:var(--gold);border:1px solid var(--gold-lo);
  background:rgba(196,180,124,.06);
  transition:color .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease);
  overflow:hidden;isolation:isolate;
}
.cta-portal::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(100deg,var(--gold),#DFD3A6);
  transform:translateX(-101%);transition:transform .55s var(--ease);
}
.cta-portal:hover::before,.cta-portal:focus-visible::before{transform:translateX(0)}
.cta-portal:hover,.cta-portal:focus-visible,
.navlinks>a.cta-portal:hover,.navlinks>a.cta-portal:focus-visible{color:var(--deep);border-color:var(--gold)}
.cta-portal .key{
  width:26px;height:26px;border-radius:50%;flex:none;
  border:1px solid currentColor;display:grid;place-items:center;
  transition:transform .55s var(--ease);
}
.cta-portal:hover .key{transform:rotate(180deg)}
.cta-portal .key svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3}

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(22px,5vw,56px);transition:all .4s var(--ease);
}
/* A scrim under the menu. The header outranks the canvas already, but being
   transparent at the top of the page it did not OCCLUDE anything — the strands
   were legible straight through the links. This fades them out behind the menu
   without putting a hard bar across the hero. */
nav::before{
  content:"";position:absolute;inset:-1px 0 auto;height:190%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,20,15,.92) 0%,rgba(14,20,15,.72) 45%,rgba(14,20,15,0) 100%);
  transition:opacity .4s var(--ease);
}
nav.solid::before{opacity:0}
nav.solid{background:rgba(14,20,15,.9);backdrop-filter:blur(18px);padding:11px clamp(22px,5vw,56px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .seal{width:38px;height:38px;flex:none;border-radius:50%;object-fit:cover}
.brand b{font-family:'Cormorant',serif;font-weight:400;font-size:19px;letter-spacing:.04em;display:block;line-height:1.15}
.brand i{font-style:normal;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);display:block}
.navlinks{display:flex;align-items:center;gap:28px}
.navlinks>a{
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;
  color:var(--dim);transition:color .3s;position:relative;padding:4px 0;
}
.navlinks>a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .4s var(--ease);
}
.navlinks>a:hover{color:var(--cream)}
.navlinks>a:hover::after,.navlinks>a[aria-current="page"]::after{width:100%}
.navlinks>a[aria-current="page"]{color:var(--cream)}
.navlinks>a.cta-portal::after{display:none}
.navlinks>a.cta-portal{padding:11px 16px 11px 30px}
.burger{display:none;background:none;border:0;color:var(--cream);cursor:pointer;padding:8px}
.burger svg{width:22px;height:22px}
@media(max-width:1000px){
  .navlinks{
    position:fixed;inset:0;background:rgba(14,20,15,.98);backdrop-filter:blur(20px);
    flex-direction:column;justify-content:center;gap:24px;opacity:0;pointer-events:none;transition:opacity .35s;
  }
  .navlinks.open{opacity:1;pointer-events:auto}
  .navlinks>a{font-size:15px;letter-spacing:.2em}
  .burger{display:block;position:relative;z-index:70}
}

/* ============================================================
   BACKGROUND
   ============================================================ */
/* The strand harp is desktop-only, and hidden by default so that anything we
   have not thought of gets the quiet version rather than the expensive one.

   Two reasons it is not simply faded on small screens the way it used to be.
   Legibility: on a phone the copy fills the width and the strands run straight
   under it, and thin pale strokes crossing serif body text at 17px is where
   readability goes — no gutter fixes that. And purpose: the whole point of the
   harp is parting it with a cursor and brushing a tone out of it, which a touch
   screen cannot do, so on a phone it was only ever decoration being paid for in
   battery. Hence `pointer: fine` rather than width alone — a tablet is wide and
   still has nothing to brush with.

   app.js gates the simulation on this exact query, so the frames are not spent
   either. Keep the two in step if you change it. */
#strand{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
@media (min-width:1001px) and (hover:hover) and (pointer:fine){
  #strand{display:block}
}
.glowbg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(80% 70% at 70% 34%,#26332450,transparent 68%),
    radial-gradient(60% 50% at 20% 80%,#1a241b60,transparent 70%),
    linear-gradient(170deg,var(--forest),var(--deep) 55%);
}

/* ---------- hero ---------- */
.hero{min-height:100svh;max-width:1640px;display:flex;align-items:center;padding-top:120px;padding-bottom:70px;position:relative}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,20,15,.92) 0%,rgba(14,20,15,.55) 50%,transparent 78%);
}
.hero .col{max-width:min(56vw,880px)}
.hero h1{margin:28px 0 26px}
.hero h1 .gold{color:var(--gold);font-style:italic}
.hero .actions{margin:38px 0 44px}
.notice{font-size:12.5px;color:var(--dim);border-left:1px solid var(--gold-lo);padding-left:16px;max-width:46ch}
.scrollcue{position:absolute;bottom:32px;left:clamp(22px,5vw,56px);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:12px}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:drip 2.4s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- hero choreography ----------
   Staged entrance on load; the gold phrase shimmers and draws its own
   underline; a warm aurora breathes behind the strand canvas; floating
   glass chips drift over the helix. All still under reduced-motion. */
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-8%;top:12%;width:56vw;height:76vh;border-radius:50%;
  background:radial-gradient(closest-side,rgba(196,180,124,.13),rgba(140,161,132,.07) 55%,transparent 72%);
  animation:aurora 9s var(--ease) infinite alternate;
}
@keyframes aurora{from{transform:scale(.92) translateY(6px);opacity:.7}to{transform:scale(1.06) translateY(-10px);opacity:1}}
.hero .col>*{opacity:0;transform:translateY(26px);animation:heroin 1.1s var(--ease) forwards}
.hero .col>.eyebrow{animation-delay:.15s}
.hero .col>h1{animation-delay:.35s}
.hero .col>.lede{animation-delay:.6s}
.hero .col>.actions{animation-delay:.85s}
.hero .col>.notice{animation-delay:1.1s}
@keyframes heroin{to{opacity:1;transform:none}}
.hero h1 .gold{
  position:relative;white-space:nowrap;
  background:linear-gradient(100deg,var(--gold) 20%,#EADFB8 38%,var(--gold) 56%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer 7s linear 1.6s infinite;
}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
.hero h1 .gold::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold),rgba(196,180,124,0));
  animation:drawline 1.2s var(--ease) 1.5s forwards;
}
@keyframes drawline{to{width:100%}}
.herochips{position:absolute;right:clamp(24px,5vw,72px);top:50%;display:flex;flex-direction:column;gap:18px;z-index:2}
.herochip{
  display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--cream);
  border:1px solid var(--line);border-radius:99px;padding:11px 22px;font-size:12.5px;letter-spacing:.06em;
  background:rgba(20,28,20,.55);backdrop-filter:blur(6px);
  opacity:0;animation:heroin 1s var(--ease) forwards,chipfloat 7s ease-in-out infinite alternate;
  transition:border-color .4s var(--ease),color .4s var(--ease);
}
.herochip::before{content:"✦";color:var(--gold);font-size:10px}
.herochip:hover{border-color:var(--gold-lo)}
.herochip:nth-child(1){animation-delay:1.3s,2.3s}
.herochip:nth-child(2){margin-right:34px;animation-delay:1.5s,2.9s;animation-duration:1s,8s}
.herochip:nth-child(3){margin-right:10px;animation-delay:1.7s,2.5s;animation-duration:1s,9s}
@keyframes chipfloat{from{transform:translateY(-7px)}to{transform:translateY(9px)}}
@media(max-width:1140px){.herochips{display:none}}

/* ---------- numbers band ---------- */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.numbers .num{background:var(--deep);padding:44px 20px;text-align:center}
.numbers .num b{display:block;font-family:'Cormorant',Georgia,serif;font-weight:300;font-size:clamp(44px,5vw,72px);line-height:1;color:var(--gold);margin-bottom:10px}
.numbers .num span{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
@media(max-width:760px){.numbers{grid-template-columns:repeat(2,1fr)}.numbers .num{padding:32px 14px}}

/* ---------- cinematic sanctuary band ---------- */
.cine{position:relative;overflow:hidden;min-height:72vh;display:flex;align-items:center;justify-content:center;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cine video,.cine .cine-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:saturate(.82) brightness(.72)}
.cine .cine-vid{opacity:0;transition:opacity 1.1s var(--ease)}
.cine .cine-vid.on{opacity:1}
.cine .cine-poster{display:none}
.worldsw{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:30px}
.worldsw button{font-family:'Jost',system-ui,sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);background:rgba(14,20,15,.42);border:1px solid var(--line);border-radius:99px;padding:10px 18px;cursor:pointer;transition:all .4s var(--ease)}
.worldsw button:hover{color:var(--cream);border-color:var(--gold-lo)}
.worldsw button.on{color:var(--gold);border-color:var(--gold);background:rgba(196,180,124,.08)}
.cine::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(90% 90% at 50% 50%,rgba(14,20,15,.28),rgba(14,20,15,.82))}
.cine .inner{position:relative;z-index:2;max-width:760px;padding:96px 24px}
.cine h2{font-size:clamp(34px,4.6vw,62px)}
.cine .lede{margin:20px auto 0;max-width:56ch}
.cine .actions{justify-content:center;margin-top:34px}

/* ---------- frequency preview ----------
   Resonating rings in the selected tone's color (--tone set by app.js),
   a serif Hz core, and the seven chakra tones as selectable rows. */
.freqband{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:54px}
.freqvis{position:relative;aspect-ratio:1;max-width:440px;margin-inline:auto;width:100%;--tone:#c05a4f}
.freqvis .ringset i{position:absolute;inset:0;border:1px solid var(--tone);border-radius:50%;opacity:.5;animation:resonate 5s var(--ease) infinite;transition:border-color .8s var(--ease)}
.freqvis .ringset i:nth-child(2){animation-delay:1.6s}
.freqvis .ringset i:nth-child(3){animation-delay:3.2s}
@keyframes resonate{0%{transform:scale(.55);opacity:.55}70%{opacity:.12}100%{transform:scale(1);opacity:0}}
.freqcore{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.freqcore::before{content:"";position:absolute;width:46%;height:46%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tone,#c05a4f) 26%,transparent),transparent 70%);animation:corebreathe 5s ease-in-out infinite;transition:background .8s var(--ease)}
@keyframes corebreathe{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.06);opacity:1}}
.freqcore b{font-family:'Cormorant',Georgia,serif;font-weight:300;font-size:clamp(40px,4.6vw,58px);color:var(--cream);line-height:1;position:relative}
.freqcore span{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);position:relative;transition:color .5s}
.freqlist{display:grid;gap:8px}
.freqlist button{display:flex;align-items:center;gap:14px;text-align:left;background:transparent;border:1px solid var(--line);border-radius:6px;padding:12px 16px;cursor:pointer;transition:all .35s var(--ease);color:var(--cream)}
.freqlist button i{width:9px;height:9px;border-radius:50%;background:var(--dot,#c05a4f);flex:none;box-shadow:0 0 10px var(--dot,#c05a4f)}
.freqlist button b{font-family:'Cormorant',Georgia,serif;font-weight:400;font-size:18px;min-width:74px}
.freqlist button span{font-size:12px;color:var(--dim);letter-spacing:.03em}
.freqlist button:hover{border-color:var(--gold-lo)}
.freqlist button.on{border-color:var(--gold);background:rgba(196,180,124,.06)}
#freqplay.playing{background:var(--gold);color:var(--deep)}
@media(max-width:900px){.freqband{grid-template-columns:1fr}.freqvis{max-width:320px}}

/* ---------- scene mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:19px;margin-top:50px}
.mose{position:relative;display:block;border-radius:4px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/4.6;text-decoration:none}
.mose img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.78);transition:transform 1.2s var(--ease),filter 1.2s var(--ease)}
.mose::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(14,20,15,.88))}
.mose:hover img{transform:scale(1.06);filter:saturate(1) brightness(.9)}
.mose figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}
.mose figcaption i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.mose figcaption b{font-family:'Cormorant',Georgia,serif;font-weight:400;font-size:23px;color:var(--cream)}
@media(max-width:820px){.mosaic{grid-template-columns:1fr;gap:14px}.mose{aspect-ratio:16/9}}

/* ---------- doctor portrait ---------- */
.docframe{position:relative;max-width:420px;margin-inline:auto}
.docframe img{width:100%;border-radius:4px;display:block;border:1px solid var(--line)}
.docframe::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--gold-lo);border-radius:4px;z-index:-1}

/* ---------- faq teaser rows ---------- */
.faqrows{margin-top:44px;border-top:1px solid var(--line)}
.faqrows a{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--cream);font-family:'Cormorant',Georgia,serif;font-size:clamp(19px,2.2vw,25px);transition:padding .4s var(--ease),color .4s var(--ease)}
.faqrows a span.ar2{color:var(--gold);font-size:18px;transition:transform .4s var(--ease)}
.faqrows a:hover{color:var(--gold);padding-left:14px}
.faqrows a:hover span.ar2{transform:translateX(6px)}

/* ---------- page header (inner pages) ---------- */
.pagehead{padding:190px 0 clamp(56px,7vw,92px);position:relative}
.pagehead h1{margin:26px 0 22px;font-size:clamp(36px,5.6vw,74px)}
.pagehead h1 em{color:var(--gold)}
.crumbs{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:26px}
.crumbs a{text-decoration:none;transition:color .3s}
.crumbs a:hover{color:var(--gold)}

/* ---------- ticker ---------- */
/* `position:relative` here is not cosmetic. The strand canvas is FIXED with
   z-index:0, and a positioned element paints in a later step than an ordinary
   block's background — so an opaque, unpositioned band still ends up with hair
   drawn across it. Every full-bleed band needs the same z-index:2 the sections
   already carry. */
.ticker{position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:17px 0;background:var(--forest)}
.ticker-in{display:flex;gap:56px;white-space:nowrap;animation:slide 44s linear infinite;width:max-content}
.ticker span{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:56px}
.ticker span::after{content:"✦";color:var(--gold);font-size:9px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1px;background:var(--line);margin-top:54px}
.pillar{background:var(--deep);padding:38px 30px;transition:background .4s}
.pillar:hover{background:var(--forest)}
.pillar h3{margin-bottom:14px}
.pillar h3::before{content:"";display:block;width:20px;height:1px;background:var(--gold);margin-bottom:18px;transition:width .5s var(--ease)}
.pillar:hover h3::before{width:54px}
.on-forest .pillar{background:var(--forest)}
.on-forest .pillar:hover{background:var(--moss)}

/* ---------- steps ---------- */
.steps{margin-top:54px;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.5fr);gap:clamp(16px,4vw,50px);align-items:baseline;padding:36px 0;border-bottom:1px solid var(--line);transition:background .4s}
.step:hover{background:rgba(196,180,124,.035)}
.step .num{font-family:'Cormorant',serif;font-size:30px;color:var(--gold);line-height:1}
@media(max-width:780px){.step{grid-template-columns:44px 1fr;row-gap:11px}.step p{grid-column:2}}

/* ---------- chips ---------- */
.priority{display:flex;gap:9px;flex-wrap:wrap;margin-top:30px}
.chip{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;padding:8px 15px;border:1px solid var(--line);border-radius:100px;display:flex;align-items:center;gap:8px}
.chip i{width:6px;height:6px;border-radius:50%;display:block}
.chip.hi i{background:var(--rose);box-shadow:0 0 9px var(--rose)}
.chip.md i{background:var(--gold);box-shadow:0 0 9px var(--gold)}
.chip.lo i{background:var(--sage)}
.chip.ok i{background:rgba(240,238,228,.38)}

/* ---------- readout ---------- */
.readout{margin-top:58px;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--forest)}
.readout-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:22px 28px;border-bottom:1px solid var(--line);background:rgba(196,180,124,.05)}
.readout-head .t{font-family:'Cormorant',serif;font-size:22px}
.readout-head .m{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.bars{padding:30px 28px;display:grid;gap:18px}
.bar{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:18px;align-items:center;font-size:13.5px}
.bar .track{height:4px;background:rgba(240,238,228,.09);border-radius:3px;overflow:hidden}
.bar .fill{height:100%;width:0;border-radius:3px;transition:width 1.5s var(--ease)}
.bar .lvl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.f-hi{background:linear-gradient(90deg,var(--rose),#d9b0a4)}
.f-md{background:linear-gradient(90deg,var(--gold),#ded1a4)}
.f-lo{background:linear-gradient(90deg,var(--sage),#a9bda1)}
@media(max-width:640px){.bar{grid-template-columns:1fr auto;row-gap:7px}.bar .track{grid-column:1/-1;order:3}}
.readout-foot{padding:18px 28px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}

/* ---------- readout gauges ---------- */
.gauges{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.gauge{background:var(--forest);padding:36px 18px 32px;text-align:center;transition:background .4s}
.gauge:hover{background:var(--moss)}
.gauge svg{width:96px;height:96px;transform:rotate(-90deg)}
.ring-track{fill:none;stroke:rgba(240,238,228,.08);stroke-width:3}
.ring{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:263.9;transition:stroke-dashoffset 1.6s var(--ease)}
.ring.f-hi{stroke:var(--rose);filter:drop-shadow(0 0 7px rgba(201,154,142,.45))}
.ring.f-md{stroke:var(--gold);filter:drop-shadow(0 0 7px rgba(196,180,124,.4))}
.ring.f-lo{stroke:var(--sage)}
.gauge .gname{font-family:'Cormorant',serif;font-size:19px;line-height:1.25;margin-top:18px}
.gauge .glvl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;margin-top:9px;color:var(--dim)}
.glvl.hi{color:var(--rose)}
.glvl.md{color:var(--gold)}
.glvl.lo{color:var(--sage)}
@media(max-width:900px){.gauges{grid-template-columns:repeat(2,1fr)}}

/* ---------- cards ---------- */
.reportgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:1px;background:var(--line);margin-top:56px}
.rcard{background:var(--forest);padding:36px 30px}
.rcard .tag{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:15px;display:block}
.rcard h3{margin-bottom:18px}
.rcard ul{list-style:none;display:flex;flex-direction:column}
.rcard li{font-size:13.5px;padding:10px 0;border-bottom:1px solid rgba(240,238,228,.07);color:rgba(240,238,228,.74);display:flex;align-items:center;gap:11px}
.rcard li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.6;flex:none}
.rcard li:last-child{border-bottom:0}

/* ---------- cloud ---------- */
.cloud{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.cloud span{font-size:12px;padding:7px 14px;border:1px solid var(--line);border-radius:100px;color:rgba(240,238,228,.7);transition:all .3s;background:rgba(14,20,15,.35)}
.cloud span:hover{border-color:var(--gold-lo);color:var(--cream)}
.cloud span.flag{border-color:rgba(201,154,142,.42);color:var(--rose)}
.cloud span.ok{border-color:rgba(140,161,132,.42);color:var(--sage)}

/* ---------- markers panel (report) ---------- */
.markers{
  position:relative;border:1px solid var(--line);border-radius:20px;
  padding:clamp(28px,4vw,52px);
  background:linear-gradient(160deg,rgba(30,42,30,.72),rgba(14,20,15,.82));
  backdrop-filter:blur(9px);
}
.markers-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap;
  padding-bottom:30px;margin-bottom:34px;border-bottom:1px solid var(--line);
}
.legend{display:flex;flex-direction:column;gap:12px;flex:none}
.legend span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:10px}
.legend span::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.legend .key-nut::before{background:var(--gold)}
.legend .key-str::before{background:var(--rose)}
.markers-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(26px,3vw,44px);
}
.mgroup h4{
  font-family:'Jost',sans-serif;font-weight:400;
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  padding-bottom:14px;border-bottom:1px solid var(--gold-lo);
}
.mgroup .cloud{margin-top:16px}
.mgroup:has(.flag) h4{color:var(--rose);border-bottom-color:rgba(201,154,142,.3)}
@media(max-width:560px){.markers-head{flex-direction:column;gap:22px}}

/* ---------- features ----------
   A fixed 3-column hairline grid — 6 cards sit 3×2, 12 sit 3×4,
   never an orphan row. Cards carry an editorial counter, a gold-ringed
   icon, and a gold hairline that draws across the top on hover. */
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:50px;counter-reset:feat}
.feat{background:var(--forest);padding:40px 34px 36px;position:relative;overflow:hidden;transition:background .5s var(--ease)}
.feat::before{counter-increment:feat;content:counter(feat,decimal-leading-zero);position:absolute;top:22px;right:26px;font-size:10.5px;letter-spacing:.28em;color:var(--dim);transition:color .5s var(--ease)}
.feat::after{content:"";position:absolute;top:0;left:0;height:1px;width:0;background:linear-gradient(90deg,var(--gold),rgba(196,180,124,0));transition:width .7s var(--ease)}
.feat:hover{background:var(--moss)}
.feat:hover::before{color:var(--gold)}
.feat:hover::after{width:100%}
.feat .ic{width:46px;height:46px;padding:11px;margin-bottom:22px;stroke:var(--gold);fill:none;stroke-width:1.1;border:1px solid var(--gold-lo);border-radius:50%;transition:border-color .5s var(--ease),transform .5s var(--ease)}
.feat:hover .ic{border-color:var(--gold);transform:translateY(-2px)}
.feat h3{font-size:20px;margin-bottom:11px;padding-right:34px}
.on-deep .feat{background:var(--deep)}
.on-deep .feat:hover{background:var(--forest)}
@media(max-width:980px){.featgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.featgrid{grid-template-columns:1fr}.feat{padding:32px 26px 30px}}

/* ---------- app store buttons ----------
   Custom on-brand store badges. Pre-launch they carry .soon (dimmed,
   unclickable, gold "Soon" pill); when the apps are approved, set the real
   store URLs and remove .soon + the pill. */
.storebtns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.storebtn{display:inline-flex;align-items:center;gap:13px;border:1px solid var(--line);border-radius:8px;padding:13px 22px 13px 18px;text-decoration:none;color:var(--cream);background:var(--forest);transition:all .4s var(--ease)}
.storebtn svg{width:26px;height:26px;fill:var(--gold);flex:none}
.storebtn span.tx{display:flex;flex-direction:column;line-height:1.3}
.storebtn i{font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.storebtn b{font-size:15.5px;font-weight:500;letter-spacing:.02em;font-family:'Cormorant Garamond',Georgia,serif;font-size:18px}
.storebtn:hover{border-color:var(--gold-lo);transform:translateY(-2px)}
.storebtn.soon{pointer-events:none;opacity:.75}
.soon-pill{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--deep);background:var(--gold);border-radius:99px;padding:3px 9px;align-self:center;font-weight:600}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:19px;margin-top:56px;align-items:stretch}
.plan{border:1px solid var(--line);padding:40px 32px;display:flex;flex-direction:column;border-radius:4px;transition:all .4s var(--ease);background:var(--forest)}
.plan:hover{border-color:var(--gold-lo);transform:translateY(-4px)}
.plan.feature{border-color:var(--gold);background:linear-gradient(180deg,rgba(196,180,124,.08),var(--forest))}
.plan .flag{font-size:9.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:17px;display:block;min-height:14px}
.plan h3{margin-bottom:15px}
.plan p{font-size:14.5px;color:var(--dim);line-height:1.75}
.plan .inc{list-style:none;margin:24px 0 0;display:grid;gap:9px;flex:1}
.plan .inc li{font-size:13px;color:rgba(240,238,228,.76);display:flex;gap:10px;align-items:flex-start;line-height:1.6}
.plan .inc li::before{content:"✦";color:var(--gold);font-size:9px;margin-top:5px;flex:none}
.price{font-family:'Cormorant',serif;font-size:44px;color:var(--cream);margin:26px 0 6px;line-height:1}
.price sup{font-size:20px;vertical-align:super;opacity:.6}
.per{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:26px}

/* ---------- founder ---------- */
.credentials{list-style:none;display:grid;gap:11px;margin-top:28px}
.credentials li{font-size:14px;color:rgba(240,238,228,.76);display:flex;gap:12px;align-items:flex-start}
.credentials li::before{content:"✦";color:var(--gold);font-size:10px;margin-top:5px;flex:none}
blockquote{font-family:'Cormorant',serif;font-style:italic;font-size:clamp(20px,2.5vw,29px);line-height:1.4;border-left:1px solid var(--gold);padding-left:clamp(20px,3vw,34px);margin:40px 0;color:var(--cream)}
blockquote cite{display:block;font-family:'Jost',sans-serif;font-style:normal;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-top:19px}
.portrait{aspect-ratio:3/4;background:linear-gradient(160deg,#2c3a2b,#141a14);border:1px solid var(--line);border-radius:3px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:28px}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
/* the veil carries her name — it has to hold against a white coat, not only a dark background */
/* the veil carries her name, so it has to sit ABOVE the photo — as a ::before it
   is the first child and the img would otherwise paint straight over it */
.portrait::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(60% 50% at 50% 32%,rgba(196,180,124,.10),transparent 70%),linear-gradient(180deg,transparent 46%,rgba(14,20,15,.55) 74%,rgba(14,20,15,.96))}
.portrait span{font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--cream);position:relative;z-index:2}

/* ---------- phone ---------- */
.phone{width:min(258px,72vw);aspect-ratio:9/19;margin-inline:auto;border:1px solid rgba(240,238,228,.18);border-radius:30px;padding:10px;background:var(--deep)}
.screen{width:100%;height:100%;border-radius:22px;overflow:hidden;position:relative;background:linear-gradient(175deg,#253324,#0E140F 62%);display:flex;flex-direction:column;justify-content:space-between;padding:26px 20px}
.screen .top{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.screen .aff{font-family:'Cormorant',serif;font-style:italic;font-size:21px;line-height:1.25}
.screen .big{font-family:'Cormorant',serif;font-size:38px;line-height:1}
.screen .big small{display:block;font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:7px}
.breathring{width:88px;height:88px;border:1px solid var(--gold);border-radius:50%;margin:0 auto;display:grid;place-items:center;font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.8);opacity:.45}50%{transform:scale(1.08);opacity:1}}
/* real app screenshot inside the phone frame */
.phone .pshot{width:100%;height:100%;border-radius:22px;object-fit:cover;object-position:top center;display:block}

/* ---------- product screenshots ---------- */
.browser{
  border:1px solid var(--line);border-radius:15px;overflow:hidden;background:var(--forest);
  box-shadow:0 50px 90px -46px rgba(0,0,0,.75);max-width:1080px;margin:52px auto 0;
}
.browser .bar{display:flex;align-items:center;gap:8px;padding:13px 18px;background:rgba(240,238,228,.04);border-bottom:1px solid var(--line)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:var(--gold-lo);display:block;flex:none}
.browser .bar i:nth-child(2){background:rgba(201,154,142,.5)}
.browser .bar i:nth-child(3){background:rgba(140,161,132,.55)}
.browser .bar span{margin-left:12px;font-size:11px;letter-spacing:.14em;color:var(--dim)}
.browser img{width:100%;display:block}
.browser-cap{text-align:center;font-size:12px;color:var(--dim);margin-top:18px}
.shot-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:30px}
.shot-frame{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--forest);margin:0}
.shot-frame img{width:100%;display:block;transition:transform .6s var(--ease)}
.shot-frame:hover img{transform:scale(1.035)}
.shot-frame figcaption{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);padding:15px 18px;border-top:1px solid var(--line)}

/* ---------- faq ---------- */
.faq{margin-top:50px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:26px 40px 26px 0;position:relative;
  font-family:'Cormorant',serif;font-size:clamp(19px,2vw,24px);font-weight:300;transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{padding:0 0 28px;max-width:70ch}

/* ---------- timeline ---------- */
.tl{margin-top:52px;position:relative;padding-left:34px}
.tl::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold-lo),transparent)}
.tl-item{position:relative;padding-bottom:40px}
.tl-item::before{content:"";position:absolute;left:-34px;top:9px;width:13px;height:13px;border-radius:50%;border:1px solid var(--gold);background:var(--deep)}
.tl-item .wk{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.tl-item h3{font-size:21px;margin-bottom:8px}

/* ---------- contact ---------- */
.contactrow{display:flex;gap:clamp(20px,5vw,58px);flex-wrap:wrap;margin-top:34px}
.contactrow a{text-decoration:none;border-bottom:1px solid var(--gold-lo);padding-bottom:3px;transition:border-color .3s}
.contactrow a:hover{border-color:var(--gold)}
.contactrow div>div{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}

/* ---------- form ---------- */
.form{display:grid;gap:20px;margin-top:38px;max-width:620px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:620px){.row{grid-template-columns:1fr}}
.field label{display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(240,238,228,.04);border:1px solid var(--line);border-radius:3px;
  padding:14px 15px;color:var(--cream);font-family:'Jost',sans-serif;font-size:15px;font-weight:300;
  transition:border-color .3s,background .3s;
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(196,180,124,.05)}
.field select option{background:var(--forest);color:var(--cream)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--dim);line-height:1.6}
.consent input{width:16px;height:16px;margin-top:3px;flex:none;accent-color:var(--gold)}

/* ---------- prose (legal) ---------- */
.prose{max-width:74ch}
.prose h2{font-size:clamp(24px,3vw,34px);margin:52px 0 16px}
.prose h3{font-size:20px;margin:32px 0 10px}
.prose p{margin-bottom:16px;color:rgba(240,238,228,.78);font-size:15.5px}
.prose ul{margin:0 0 18px 20px;color:rgba(240,238,228,.78);font-size:15.5px}
.prose li{margin-bottom:8px}
.prose a{color:var(--gold)}

/* ---------- footer ---------- */
footer{background:var(--forest);border-top:1px solid var(--line);padding:66px 0 32px;position:relative;z-index:2}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:32px}}
footer h4{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:17px;font-weight:400}
footer ul{list-style:none;display:grid;gap:10px}
footer a{font-size:14px;text-decoration:none;color:rgba(240,238,228,.72);transition:color .3s}
footer a:hover{color:var(--gold)}
.legal{margin-top:50px;padding-top:25px;border-top:1px solid var(--line);font-size:12px;color:var(--dim);line-height:1.7}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}
  /* elements that ENTER via animation must rest visible when motion is off */
  .hero .col>*,.herochip{opacity:1;transform:none}
  .hero h1 .gold{-webkit-text-fill-color:var(--gold)}
  .hero h1 .gold::after{width:100%}
  .cine video{display:none}
  .cine .cine-poster{display:block}
}


/* ============================================================
   BENTO TOUCH-UP — the portal's design language, in the dark
   ============================================================
   Scoped to `.bento` on <body> so it lands on the homepage first;
   drop the class on any other page to bring it across.

   The palette does not move — this is the same forest, the same gold.
   What changes is the SHAPE language, borrowed from the client portal:
   hairline grids become floating tiles with generous radii, headings
   inside tiles speak in the geometric face, figures grow large and
   light, and the nav collects itself into a pill. The tile surface is
   literally the portal's `.tile-dark` recipe — two soft radials over
   the forest gradient — so the two products are lit the same way. */
.bento{
  --tile-r:clamp(18px,1.7vw,26px);
  --tile-bg:
    radial-gradient(120% 90% at 50% 0%,rgba(117,153,108,.20),transparent 56%),
    radial-gradient(80% 60% at 85% 100%,rgba(194,163,90,.14),transparent 62%),
    linear-gradient(160deg,#22301f 0%,#1a2518 55%,#121a11 100%);
  --tile-sh:0 1px 2px rgba(8,12,8,.30),0 18px 44px rgba(20,29,17,.34);
}

/* ---- the tile ---- */
.bento .numbers .num,
.bento .pillar,
.bento .steps,
.bento .readout,
.bento .faqrows,
.bento .storebtn{
  background:var(--tile-bg);border:0;
  border-radius:var(--tile-r);box-shadow:var(--tile-sh);
}

/* ---- numbers → oversized geometric figures on four tiles ---- */
.bento .numbers{background:none;border:0;gap:clamp(10px,1.1vw,16px)}
.bento .numbers .num{padding:clamp(30px,3vw,46px) 18px}
.bento .numbers .num b{
  font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:clamp(46px,5.2vw,76px);letter-spacing:-.03em;color:var(--cream);
  font-variant-numeric:tabular-nums;margin-bottom:12px;
}

/* ---- pillars → four tiles that lift toward the light ---- */
.bento .pillars{background:none;gap:clamp(10px,1.1vw,16px)}
.bento .pillar{
  padding:clamp(26px,2.6vw,36px) clamp(22px,2.2vw,30px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.bento .pillar:hover{background:var(--tile-bg);transform:translateY(-3px);box-shadow:0 1px 2px rgba(8,12,8,.3),0 26px 56px rgba(20,29,17,.44)}

/* Tile headings take the geometric face — section H2s stay Cormorant,
   because that voice belongs to the brand, not to the layout system. */
.bento .pillar h3,.bento .step h3,.bento .gauge .gname{
  font-family:'Jost',system-ui,sans-serif;font-weight:400;letter-spacing:-.012em;
}

/* ---- steps → one tile holding four rows ---- */
.bento .steps{border-top:0;padding:2px clamp(22px,2.4vw,34px)}
.bento .step{border-bottom-color:rgba(240,238,228,.09)}
.bento .step:last-child{border-bottom:0}
.bento .step:hover{background:rgba(196,180,124,.05);border-radius:14px}

/* ---- the readout keeps its inner grid, and gains the tile's corners ---- */
.bento .readout{overflow:hidden}
.bento .readout-head{background:rgba(196,180,124,.07);border-bottom-color:rgba(240,238,228,.09)}
.bento .readout-foot{border-top-color:rgba(240,238,228,.09)}
.bento .gauges{background:rgba(240,238,228,.09)}
.bento .gauge{background:#1c261b}
.bento .gauge:hover{background:#232f21}

/* ---- FAQ teaser → a tile of rows ---- */
.bento .faqrows{border-top:0;padding:0 clamp(20px,2.2vw,30px)}
.bento .faqrows a{border-bottom-color:rgba(240,238,228,.09)}
.bento .faqrows a:last-child{border-bottom:0}

/* ---- everything rectangular softens to the same family of corners ---- */
.bento .mose{border-radius:clamp(16px,1.5vw,22px)}
.bento .browser{border-radius:var(--tile-r)}
.bento .docframe img,.bento .docframe::after{border-radius:var(--tile-r)}
.bento .phone{border-radius:34px}
.bento .phone .pshot,.bento .screen{border-radius:26px}
.bento .freqlist button{border-radius:15px}
.bento .chip{background:rgba(240,238,228,.05);padding:9px 16px}
/* store badges become pills, like every other action on the page */
.bento .storebtn{border-radius:99px;padding:12px 22px 12px 18px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.bento .storebtn:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(8,12,8,.3),0 22px 46px rgba(20,29,17,.44)}

/* ---- the nav collects itself into a pill ---- */
@media(min-width:1001px){
  .bento .navlinks{
    gap:2px;padding:5px 6px;border-radius:99px;
    background:rgba(240,238,228,.05);border:1px solid var(--line);
  }
  .bento .navlinks>a{padding:9px 14px;border-radius:99px;transition:background .3s,color .3s}
  .bento .navlinks>a::after{display:none}  /* the pill replaces the underline */
  .bento .navlinks>a:hover{background:rgba(240,238,228,.09);color:var(--cream)}
  .bento .navlinks>a[aria-current="page"]{background:var(--cream);color:var(--deep)}
  .bento .navlinks>a.cta-portal{margin-left:6px}
  .bento nav.solid .navlinks{background:rgba(240,238,228,.07)}
}