/*
Theme Name: Hippora Cinematic Journal Studio
Theme URI: https://hippora.org
Author: Lyndon Davis
Description: Independent Hippora cinematic editorial theme with full WordPress publishing, responsive pages, featured images, category archives, and the original animated mobile navigation.
Version: 1.5.27
Requires PHP: 7.4
License: Proprietary
Text Domain: hippora
*/

/* ============================================================
   HIPPORA DESIGN SYSTEM
   Extracted from the app reference screens and the logo mark.
   ============================================================ */
:root{
  /* Sampled from the approved full-site preview. Never black: a lifted
     blue-navy base, with card surfaces that step UP to a lighter navy so
     they read with contrast, not washed into the background. */
  --ink-void:#06121D; --ink:#091825; --ink-raised:#0D1B29;
  --ink-deep:#050F18;
  /* Cards are solid lifted navy (#0D1B29), a clear step above the base.
     A cool top-edge highlight gives the iOS glass read without going washed. */
  --card:#0D1B29; --card-hi:#122334;
  --surface:#0D1B29; --surface-hi:#122334;
  --glass:rgba(18,35,52,.72); --glass-hi:rgba(22,42,62,.80);
  --glass-edge:rgba(150,180,220,.16);
  --hairline:rgba(160,190,225,.13); --hairline-soft:rgba(160,190,225,.07);
  --ivory:#F2EBDF; --ivory-80:rgba(242,235,223,.80); --ivory-60:rgba(242,235,223,.60);
  --ivory-42:rgba(242,235,223,.42); --ivory-26:rgba(242,235,223,.26);
  --gold:#F0A82E; --gold-bright:#FED554; --gold-deep:#B57F24;
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r-sm:12px; --r-md:18px; --r-card:24px; --r-lg:32px; --r-pill:999px;
  --gutter:clamp(22px,5vw,40px); --measure:1180px; --narrow:760px;
  --section-y:clamp(92px,12vw,175px);
  --rail:clamp(14px,3.4vw,52px);
  --sky-a:rgba(227,192,138,.085); --sky-b:rgba(60,92,140,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:clip}
body{color:var(--ivory);font-family:var(--body);font-size:17px;
  font-weight:300;line-height:1.72;letter-spacing:.004em;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  /* Exact target: lifted navy #091825 at top, easing to #06121D. Never black. */
  background:
    radial-gradient(120% 70% at 50% -6%, #10243A 0%, rgba(16,36,58,0) 52%),
    linear-gradient(180deg, #091825 0%, #071521 45%, var(--ink-deep) 100%);
  background-attachment:fixed}
img,canvas,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(227,192,138,.22);color:var(--ivory)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:var(--narrow)}
.skip{position:absolute;left:-9999px;top:12px;z-index:99}
.skip:focus{left:12px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:300;line-height:1.15;letter-spacing:-.012em}
h1{font-size:clamp(41px,6.6vw,74px);line-height:1.06}
h2{font-size:clamp(30px,4.3vw,49px)}
h3{font-size:clamp(20px,2.2vw,25px);line-height:1.3;letter-spacing:-.006em}
h4{font-size:19px;line-height:1.4}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.75;color:var(--ivory-60);font-weight:300}
.eyebrow{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);opacity:.72;margin:0 0 22px}
em.gold,.accent{font-style:italic;color:var(--gold)}
.accent{font-style:normal}

/* ---------- Sky and aura ---------- */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background 3s linear;background:
  radial-gradient(58vw 46vw at 50% -6%,var(--sky-a),transparent 66%),
  radial-gradient(72vw 62vw at 88% 32%,var(--sky-b),transparent 68%),
  radial-gradient(60vw 55vw at 6% 84%,rgba(227,192,138,.03),transparent 70%)}
.page{position:relative;z-index:2}
main{position:relative;z-index:2}

/* ---------- Nav ---------- */
#sitenav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .8s ease,border-color .8s ease}
#sitenav.is-set{background:rgba(9,24,37,.82);backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom-color:var(--hairline-soft)}
.nav__in{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);height:76px;width:100%;
  max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.mark{display:flex;align-items:center;gap:12px;margin-right:auto}
.pc-mark .glyph{width:34px;height:34px;object-fit:contain}
.mark .glyph{height:32px;width:auto;flex:none;object-fit:contain;filter:drop-shadow(0 0 10px rgba(240,168,46,.30))}
.mark b{font-family:var(--display);font-size:22px;font-weight:300;letter-spacing:.075em;color:var(--ivory)}
.links{display:flex;gap:clamp(16px,1.9vw,24px);align-items:center}
.links a{font-size:14px;white-space:nowrap;color:var(--ivory-60);transition:color .4s ease;position:relative}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:var(--gold);opacity:.6;transition:right .6s cubic-bezier(.2,.8,.2,1)}
.links a:hover{color:var(--ivory)}
.links a:hover::after{right:0}
.links a.active{color:var(--gold)}
.links a.active::after{right:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);
  font-size:14px;font-weight:500;letter-spacing:.012em;padding:12px 24px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .5s ease,color .5s ease}
.btn-primary{background:linear-gradient(178deg,#FED554,var(--gold) 55%,#C48824);color:#1B1206}
.btn-primary::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent)}
.btn-primary:hover{box-shadow:0 16px 46px rgba(227,192,138,.2);transform:translateY(-1px)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.btn-ghost{border-color:var(--hairline);color:var(--ivory-80);background:var(--surface);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:rgba(227,192,138,.36);color:var(--ivory)}
.btn-lg{padding:15px 30px;font-size:15px}

/* ---------- Mobile menu ---------- */
.orb-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-pill);cursor:pointer;
  transition:border-color .5s ease}
.orb-btn:hover{border-color:rgba(227,192,138,.35)}
.orb-btn i{display:block;width:16px;height:1px;background:var(--ivory-80);position:relative;
  transition:background .3s ease}
.orb-btn i::before,.orb-btn i::after{content:"";position:absolute;left:0;width:16px;height:1px;
  background:var(--ivory-80);transition:transform .5s cubic-bezier(.2,.8,.2,1),top .3s ease}
.orb-btn i::before{top:-5px}
.orb-btn i::after{top:5px}
body.menu-open .orb-btn i{background:transparent}
body.menu-open .orb-btn i::before{top:0;transform:rotate(45deg)}
body.menu-open .orb-btn i::after{top:0;transform:rotate(-45deg)}

.menu-overlay{position:fixed;inset:0;z-index:55;background:rgba(1,6,15,.985);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  display:flex;flex-direction:column;padding:96px var(--gutter) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
body.menu-open .menu-overlay{opacity:1;visibility:visible}
.menu-overlay .bigmark .glyph{width:64px;height:64px;object-fit:contain}
.menu-overlay .bigmark{width:64px;margin:0 auto 26px;opacity:0;transform:scale(.8);
  transition:opacity .9s ease .1s,transform 1s cubic-bezier(.16,1,.3,1) .1s}
body.menu-open .menu-overlay .bigmark{opacity:1;transform:none}
.mlink{display:flex;align-items:baseline;gap:16px;font-family:var(--display);font-size:clamp(26px,7vw,34px);
  font-weight:300;padding:13px 0;border-bottom:1px solid var(--hairline-soft);color:var(--ivory-80);
  opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),color .4s ease}
body.menu-open .mlink{opacity:1;transform:none}
.mlink .n{font-family:var(--body);font-size:11px;letter-spacing:.2em;color:var(--gold);opacity:.5;
  min-width:26px}
.mlink:hover,.mlink.active{color:var(--gold)}
.legalrow{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;font-size:13.5px;color:var(--ivory-42)}
.legalrow a:hover{color:var(--gold)}
.menu-overlay .mcta{margin-top:28px;margin-bottom:8px;align-self:flex-start}

/* ---------- The Aperture (living logo) ---------- */
.aperture{width:clamp(250px,32vw,360px);height:clamp(250px,32vw,360px);position:relative;
  display:flex;align-items:center;justify-content:center}
/* The hero shows the real Hippora mark, identical to the nav, with a soft
   radiant glow behind it and a gentle breathing pulse so it feels alive. */
.aperture-glow{position:absolute;inset:-8%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,168,46,.30),rgba(240,168,46,.10) 45%,transparent 72%);
  opacity:0;animation:haze 11s ease-in-out infinite}
.aperture-mark{position:relative;width:88%;height:auto;object-fit:contain;
  opacity:0;transform:scale(.86);
  filter:drop-shadow(0 0 18px rgba(240,168,46,.22)) drop-shadow(0 0 44px rgba(240,168,46,.10))}
.aperture.ready .aperture-mark{animation:bloom 2.2s cubic-bezier(.16,1,.3,1) forwards,
  breathe 9s ease-in-out 2.4s infinite}
.aperture.ready .aperture-glow{animation:haze 11s ease-in-out infinite}
@keyframes bloom{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes breathe{0%,100%{transform:scale(1);filter:drop-shadow(0 0 26px rgba(240,168,46,.30)) drop-shadow(0 0 60px rgba(240,168,46,.12))}50%{transform:scale(1.035);filter:drop-shadow(0 0 34px rgba(240,168,46,.42)) drop-shadow(0 0 74px rgba(240,168,46,.2))}}
@keyframes haze{0%,100%{opacity:.55}50%{opacity:.9}}
@keyframes blip{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- The Thread ---------- */
.thread{position:absolute;left:var(--rail);top:0;bottom:0;width:1px;z-index:1;pointer-events:none;
  background:var(--hairline-soft)}
.thread .lit{position:absolute;left:0;top:0;width:1px;height:0;
  background:linear-gradient(180deg,rgba(227,192,138,0),var(--gold) 12%,var(--gold-bright));
  box-shadow:0 0 12px rgba(227,192,138,.5)}
.thread .node{position:absolute;left:-4.5px;width:10px;height:10px;opacity:.22;transform:scale(.7);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.thread .node svg{width:10px;height:10px}
.thread .node.lit{opacity:1;transform:scale(1)}
.thread .node.lit svg{filter:drop-shadow(0 0 7px rgba(227,192,138,.85))}
@media(max-width:900px){.thread{display:none}}

/* ---------- Word-by-word resolve ---------- */
.resolve span{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(16px);
  transition:opacity 1.5s cubic-bezier(.16,1,.3,1),filter 1.5s cubic-bezier(.16,1,.3,1),
             transform 1.5s cubic-bezier(.16,1,.3,1)}
.resolve.on span{opacity:1;filter:blur(0);transform:none}

/* ---------- Heroes ---------- */
.hero{position:relative;padding-top:128px;padding-bottom:var(--section-y);text-align:center}
.hero__in{display:flex;flex-direction:column;align-items:center;width:100%;
  max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.hero .aperture{margin-bottom:clamp(30px,4.5vw,48px)}
.hero h1{max-width:16ch}
.hero .lede{max-width:52ch;margin:24px auto 0}
.hero-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero-note{margin-top:30px;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ivory-26);display:flex;align-items:center;gap:11px;justify-content:center}
.hero-note::before,.hero-note::after{content:"";width:34px;height:1px;background:var(--hairline)}

.phero{padding-top:152px;padding-bottom:clamp(56px,8vw,92px);position:relative}
.phero__in{max-width:800px}
.phero.mid .phero__in{margin-inline:auto;text-align:center}
.phero h1{max-width:18ch}
.phero.mid h1{margin-inline:auto}
.phero .lede{margin-top:24px;max-width:58ch}
.phero.mid .lede{margin-inline:auto}
.crumbs{font-size:12.5px;color:var(--ivory-26);margin-bottom:26px;letter-spacing:.02em}
.crumbs a{color:var(--ivory-42);transition:color .35s ease}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- Sections ---------- */
section{padding-block:var(--section-y);position:relative}
section.tight{padding-block:clamp(60px,8vw,110px)}
section.ruled::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;
  background:linear-gradient(90deg,rgba(227,192,138,.45),var(--hairline-soft) 40%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.9s cubic-bezier(.16,1,.3,1)}
section.ruled.in::before{transform:scaleX(1)}
.head{max-width:640px}
.head.mid{margin-inline:auto;text-align:center}
.head .lede{margin-top:22px}

.statement,.statement2{text-align:center}
.statement p,.statement2 p{font-family:var(--display);font-weight:200;font-size:clamp(25px,3.6vw,41px);
  line-height:1.42;letter-spacing:-.01em;max-width:20ch;margin:0 auto;color:var(--ivory-60)}
.statement p+p,.statement2 p+p{margin-top:.5em}
.statement .hold,.statement2 .hold{color:var(--ivory)}
/* the emotional "why it matters" beat, high on the page */
.feel{background:linear-gradient(180deg,transparent,rgba(16,36,58,.3),transparent)}
.feel h2{font-family:var(--display);font-weight:300;font-size:clamp(27px,4vw,44px);
  line-height:1.28;color:var(--ivory);letter-spacing:-.01em}
.feel .lede{font-size:clamp(17px,2vw,20px);line-height:1.72;color:var(--ivory-80);max-width:640px;margin-top:22px}

/* The final line on the About page. Given all the room it needs. */
.coda{text-align:center;padding-block:clamp(120px,18vw,240px);position:relative}
.coda::before{content:"";position:absolute;left:50%;top:50%;width:min(760px,92%);height:420px;
  transform:translate(-50%,-50%);pointer-events:none;filter:blur(30px);
  background:radial-gradient(closest-side,rgba(227,192,138,.10),transparent 72%)}
.coda p{position:relative;font-family:var(--display);font-weight:200;
  font-size:clamp(26px,3.9vw,44px);line-height:1.44;letter-spacing:-.012em;
  max-width:22ch;margin:0 auto;color:var(--ivory)}
.coda p .soft{color:var(--ivory-60)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.mt-lg{margin-top:62px}
/* Card: a SOLID lifted-navy surface (#0D1B29), a clear step above the page
   background so it reads with contrast. A cool top-edge highlight gives the
   premium iOS glass feel without the washed-out translucency. */
.card{position:relative;overflow:hidden;border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:34px 32px 36px;
  background:linear-gradient(160deg,var(--card-hi) 0%,var(--card) 55%);
  box-shadow:0 1px 0 rgba(190,214,248,.09) inset, 0 20px 46px -30px rgba(0,0,0,.75);
  transition:border-color .9s ease,background .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .9s ease}
.card::after{content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(190,214,248,.30) 22%,rgba(190,214,248,.30) 78%,transparent)}
.card::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(227,192,138,.13),transparent 72%);
  opacity:0;transition:opacity .7s ease}
.card:hover{border-color:rgba(190,214,248,.22);transform:translateY(-4px);
  background:linear-gradient(160deg,#152741 0%,var(--card-hi) 55%);
  box-shadow:0 1px 0 rgba(190,214,248,.14) inset, 0 28px 58px -26px rgba(0,0,0,.8)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:24px;
  border:1px solid rgba(227,192,138,.22);
  background:radial-gradient(70% 70% at 50% 20%,rgba(227,192,138,.15),rgba(227,192,138,.03))}
.card h3{margin-bottom:11px}
.card p{font-size:15.5px;line-height:1.7;color:var(--ivory-60)}
.card .clink{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:13.5px;
  font-weight:500;letter-spacing:.045em;color:var(--gold);opacity:.8;transition:opacity .5s ease,gap .5s ease}
.card:hover .clink{opacity:1;gap:12px}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px}
.steps.s4{grid-template-columns:repeat(4,1fr)}
.step{padding:0 34px;border-left:1px solid var(--hairline-soft)}
.step:first-child{padding-left:0;border-left:0}
.step:last-child{padding-right:0}
.step .n{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--gold);
  opacity:.6;display:block;margin-bottom:20px}
.step h3{margin-bottom:12px}
.step p{font-size:15.5px;color:var(--ivory-60);line-height:1.7}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:center}
.split.flip .media{order:-1}
.split .copy .lede{margin-top:22px}
.plate{position:relative;border-radius:var(--r-lg);border:1px solid var(--hairline);
  background:linear-gradient(160deg,var(--card-hi) 0%,var(--card) 55%);
  padding:26px;box-shadow:0 1px 0 rgba(190,214,248,.10) inset, 0 20px 50px -30px rgba(0,0,0,.72)}
.plate::before{content:"";position:absolute;inset:-34% -14% auto -14%;height:70%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(227,192,138,.17),transparent 74%);filter:blur(28px)}
.thr{position:relative;display:flex;flex-direction:column;gap:13px}
.bub{max-width:84%;padding:15px 19px;border-radius:20px;font-size:15px;line-height:1.62;
  opacity:0;transform:translateY(14px);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.in .bub{opacity:1;transform:none}
.in .bub:nth-child(2){transition-delay:.35s}
.in .bub:nth-child(3){transition-delay:.7s}
.b-them{align-self:flex-start;background:rgba(242,235,223,.055);border:1px solid var(--hairline);
  color:var(--ivory-80);border-bottom-left-radius:7px}
.b-you{align-self:flex-end;color:#1B1206;border-bottom-right-radius:7px;
  background:linear-gradient(170deg,#F5C877,#D0A052)}
.recall{margin-top:20px;padding:16px 19px;border-radius:var(--r-md);position:relative;
  border:1px solid rgba(227,192,138,.22);background:rgba(227,192,138,.045);
  opacity:0;transform:translateY(12px);
  transition:opacity 1.2s ease 1.05s,transform 1.2s cubic-bezier(.16,1,.3,1) 1.05s}
.in .recall{opacity:1;transform:none}
.recall .lt{position:absolute;left:26px;top:-26px;width:1px;height:26px;
  background:linear-gradient(180deg,transparent,var(--gold));transform:scaleY(0);transform-origin:bottom;
  transition:transform 1s cubic-bezier(.16,1,.3,1) 1.5s}
.in .recall .lt{transform:scaleY(1)}
.recall span.lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.78}
.recall p{margin:8px 0 0;font-family:var(--display);font-style:italic;font-size:17px;
  line-height:1.55;color:var(--ivory-80)}

.dials{display:flex;flex-direction:column;gap:20px;position:relative}
.dial-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.dial-name{font-size:14.5px;color:var(--ivory-80)}
.dial-val{font-family:var(--display);font-size:14px;color:var(--gold);letter-spacing:.06em}
.bar{height:3px;border-radius:var(--r-pill);background:rgba(242,235,223,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  transition:width 2.6s cubic-bezier(.16,1,.3,1)}
.in .bar i{width:var(--w)}

/* ---------- Quiet rows ---------- */
.quiet{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,6vw,80px);margin-top:56px}
.quiet.one{grid-template-columns:1fr}
.qrow{display:flex;gap:18px;padding:26px 0;border-top:1px solid var(--hairline-soft)}
.qdot{flex:none;width:6px;height:6px;border-radius:50%;margin-top:11px;background:var(--gold);
  box-shadow:0 0 12px rgba(227,192,138,.5)}
.qrow h4{font-family:var(--body);font-size:15.5px;font-weight:500;margin:0 0 5px;letter-spacing:.004em}
.qrow p{font-size:14.5px;color:var(--ivory-60);line-height:1.68;margin:0}
.qrow a{color:var(--gold)}

/* ---------- Store badges ---------- */
/* Store badges.
   The eyebrow used to be gold uppercase at wide tracking, which fought the
   store name for attention and made the accent colour cheap. It is now quiet
   ivory, so the name carries the badge and gold stays rare. */
.store{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.store.mid{justify-content:center}
.badge{position:relative;display:inline-flex;align-items:center;gap:13px;
  padding:11px 22px 12px 17px;border:1px solid var(--hairline);border-radius:15px;
  background:linear-gradient(160deg,var(--card-hi),var(--card));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;
  transition:border-color .8s ease,background .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.badge::before{content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(242,235,223,.16) 30%,rgba(242,235,223,.16) 70%,transparent)}
.badge:hover{border-color:rgba(227,192,138,.28);transform:translateY(-1px);
  background:linear-gradient(160deg,#152741,var(--card-hi))}
.badge svg{flex:none;opacity:.78;transition:opacity .8s ease}
.badge:hover svg{opacity:.95}
.badge b{display:block;font-family:var(--body);font-size:15px;font-weight:400;
  color:var(--ivory-80);line-height:1.3;letter-spacing:.005em}
.badge small{display:block;font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ivory-42);line-height:1.6;margin-bottom:1px}
.ribbon{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(227,192,138,.26);background:rgba(227,192,138,.06);font-size:11.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ribbon i{width:5px;height:5px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 10px var(--gold);animation:blip 4s ease-in-out infinite}
.store-band{border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);
  padding-block:clamp(56px,7vw,88px);text-align:center;position:relative}
.store-band::after{content:"";position:absolute;left:50%;top:0;width:min(640px,92%);height:100%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(227,192,138,.10),transparent 72%)}
.store-band .wrap{position:relative;z-index:1}
.store-band h2{max-width:17ch;margin-inline:auto}

/* ---------- Pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px;align-items:start}
.tier{position:relative;overflow:hidden;border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:38px 32px 36px;
  background:linear-gradient(160deg,var(--card-hi) 0%,var(--card) 55%);
  box-shadow:0 1px 0 rgba(190,214,248,.09) inset, 0 20px 46px -30px rgba(0,0,0,.75)}
.tier::after{content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(190,214,248,.28) 25%,rgba(190,214,248,.28) 75%,transparent)}
.tier.feature{border-color:rgba(227,192,138,.32);
  background:linear-gradient(172deg,rgba(227,192,138,.08),rgba(242,235,223,.02))}
.tier .tag{position:absolute;top:-11px;left:32px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#1B1206;background:linear-gradient(178deg,#F5C877,#D0A052);padding:5px 13px;border-radius:var(--r-pill)}
.tier-eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.85;margin-bottom:14px}
.tier.feature .tier-eyebrow{display:none}
.notice{display:flex;align-items:flex-start;gap:12px;max-width:760px;margin:0 auto 44px;
  padding:15px 20px;border:1px solid var(--hairline);border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--card-hi),var(--card))}
.notice svg{flex:none;margin-top:2px;opacity:.85}
.notice p{font-size:14px;line-height:1.6;color:var(--ivory-60);margin:0}
.tier h3{font-family:var(--display);font-size:24px;margin-bottom:8px}
.tier .sub{font-size:14.5px;color:var(--ivory-42);margin-bottom:26px}
.tier .price{display:flex;align-items:baseline;gap:7px;margin-bottom:8px}
.tier .price b{font-family:var(--display);font-size:46px;font-weight:300;color:var(--ivory);letter-spacing:-.02em}
.tier .price span{font-size:14px;color:var(--ivory-42)}
.tier .note{font-size:13px;color:var(--ivory-26);margin-bottom:28px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.tier li{display:flex;gap:11px;font-size:15px;color:var(--ivory-60);line-height:1.6}
.tier li svg{flex:none;margin-top:5px}
.tier .btn{width:100%}
.later{margin-top:52px;padding:30px 32px;border:1px dashed var(--hairline);border-radius:var(--r-card)}
.later h4{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);opacity:.75;margin-bottom:6px}
.later .lrow{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-top:1px solid var(--hairline-soft);font-size:15px;color:var(--ivory-60)}
.later .lrow b{font-family:var(--display);color:var(--ivory-80);font-weight:400}
.later .lrow span{color:var(--ivory-26);font-size:13.5px;text-align:right}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-top:56px}
.faq details{border-top:1px solid var(--hairline-soft)}
.faq details:last-child{border-bottom:1px solid var(--hairline-soft)}
.faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:var(--display);font-size:clamp(19px,2vw,22px);font-weight:300;color:var(--ivory-80);
  transition:color .4s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ivory)}
.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 .5s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq .a{padding:0 44px 30px 0}
.faq .a p{font-size:16px;color:var(--ivory-60);line-height:1.75}
.faq .a a{color:var(--gold)}

/* ---------- Prose / WP content ---------- */
.prose,.page-content,.post-body .wrap{max-width:70ch}
.prose h2,.page-content h2,.post-body h2{font-size:clamp(25px,3vw,33px);margin:2.1em 0 .65em}
.prose h2:first-child{margin-top:0}
.prose h3,.page-content h3,.post-body h3{font-size:21px;margin:1.9em 0 .55em}
.prose p,.prose li,.page-content p,.page-content li,.post-body p,.post-body li{
  color:var(--ivory-60);font-size:16.5px;line-height:1.78}
.prose strong,.page-content strong,.post-body strong{color:var(--ivory-80);font-weight:500}
.prose a,.page-content a,.post-body a{color:var(--gold);border-bottom:1px solid rgba(227,192,138,.3)}
.prose a:hover,.page-content a:hover,.post-body a:hover{border-bottom-color:var(--gold)}
.prose ul,.prose ol,.page-content ul,.page-content ol,.post-body ul,.post-body ol{padding-left:20px;margin:0 0 1.3em}
.prose li,.page-content li,.post-body li{margin-bottom:.5em}
.prose li::marker,.page-content li::marker,.post-body li::marker{color:var(--gold)}
.prose blockquote,.page-content blockquote,.post-body blockquote{margin:2em 0;padding:22px 26px;
  border-left:1px solid rgba(227,192,138,.35);background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0}
.prose blockquote p,.page-content blockquote p,.post-body blockquote p{
  font-family:var(--display);font-style:italic;font-size:20px;color:var(--ivory-80);line-height:1.6}
.prose hr,.page-content hr,.post-body hr{border:0;border-top:1px solid var(--hairline-soft);margin:2.6em 0}
.prose table,.post-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.prose th,.prose td,.post-body th,.post-body td{padding:13px 14px;
  border-bottom:1px solid var(--hairline-soft);text-align:left}
.prose th,.post-body th{color:var(--gold);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.prose td,.post-body td{color:var(--ivory-60)}
.updated{font-size:13px;color:var(--ivory-26);letter-spacing:.02em;margin-bottom:44px}
.page-main{padding-top:152px;padding-bottom:var(--section-y)}
.wp-page{width:100%;max-width:var(--narrow);margin:0 auto;padding-inline:var(--gutter)}
.page-header{margin-bottom:44px}
.page-title{font-size:clamp(34px,5vw,56px)}
.alignwide,.alignfull{max-width:none;margin-inline:0}
.wp-caption,figure{margin:2em 0}
figcaption,.wp-caption-text{font-size:13px;color:var(--ivory-26);margin-top:10px;text-align:center}
img.aligncenter{margin-inline:auto}
.sticky,.gallery-caption,.bypostauthor{display:block}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Blog ---------- */
.pagehead{padding-top:152px;padding-bottom:clamp(40px,6vw,70px)}
.pagehead .sub{color:var(--ivory-60);max-width:60ch;margin-top:22px;font-size:clamp(17px,1.6vw,19px)}
.cats{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:44px}
.cat-pill{padding:8px 17px;border-radius:var(--r-pill);border:1px solid var(--hairline);
  font-size:13px;color:var(--ivory-60);background:var(--surface);transition:all .45s ease}
.cat-pill:hover{border-color:rgba(227,192,138,.3);color:var(--ivory)}
.cat-pill.active{background:rgba(227,192,138,.1);border-color:rgba(227,192,138,.36);color:var(--gold)}
.featured{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hairline);
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin-bottom:20px;
  transition:border-color .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.featured:hover{border-color:rgba(227,192,138,.26);transform:translateY(-3px)}
.featured .fbody{padding:clamp(30px,4vw,54px);display:flex;flex-direction:column;justify-content:center}
.featured .fimage{background-size:cover;background-position:center;min-height:300px}
.featured h2{font-size:clamp(26px,3.4vw,38px);line-height:1.18;margin-bottom:14px}
.featured p{font-size:16px;color:var(--ivory-60)}
.featured .cat,.post-card .cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);opacity:.72;margin-bottom:14px}
.featured .meta,.post-card .meta{font-size:13px;color:var(--ivory-26);margin-top:18px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:var(--r-card);
  overflow:hidden;background:var(--surface);backdrop-filter:blur(14px);
  transition:border-color .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.post-card:hover{border-color:rgba(227,192,138,.26);transform:translateY(-4px)}
.post-card .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;
  background-color:#0A1524}
.post-card .thumb.placeholder{display:grid;place-items:center;
  background:radial-gradient(70% 90% at 55% 30%,rgba(227,192,138,.16),var(--ink) 70%)}
.post-card .thumb.placeholder img{width:58px;height:58px;opacity:.85}
.post-card .pbody{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:21px;margin-bottom:10px}
.post-card p{font-size:14.5px;color:var(--ivory-60);line-height:1.68}
.post-card .meta{margin-top:auto;padding-top:14px}
.post-hero{padding-top:152px;padding-bottom:clamp(30px,4vw,50px)}
.post-hero .cat{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px}
.post-hero h1{max-width:20ch}
.post-hero .meta{margin-top:24px;font-size:13.5px;color:var(--ivory-26);display:flex;gap:10px;flex-wrap:wrap}
.post-feature{width:100%;max-width:1100px;margin:0 auto;padding-inline:var(--gutter)}
.post-feature img{width:100%;border-radius:var(--r-lg);border:1px solid var(--hairline)}
.post-body{padding-block:clamp(40px,6vw,70px)}
.post-body .wrap{max-width:var(--narrow)}
.post-tags{width:100%;max-width:var(--narrow);margin:0 auto;padding-inline:var(--gutter);
  display:flex;gap:9px;flex-wrap:wrap}
.post-tags a{padding:7px 15px;border-radius:var(--r-pill);border:1px solid var(--hairline);
  font-size:12.5px;color:var(--ivory-42)}
.post-tags a:hover{color:var(--gold);border-color:rgba(227,192,138,.3)}
.post-cta{text-align:center;margin-top:clamp(60px,8vw,100px);padding:clamp(50px,7vw,80px) var(--gutter);
  border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);position:relative}
.post-cta h2{max-width:18ch;margin:0 auto 30px}
.related h3{margin-bottom:34px}
.pagination{display:flex;gap:9px;justify-content:center;margin-top:56px}
.pagination .page-numbers{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--hairline);font-size:14px;color:var(--ivory-60);transition:all .45s ease}
.pagination .page-numbers:hover{border-color:rgba(227,192,138,.3);color:var(--ivory)}
.pagination .page-numbers.current{background:rgba(227,192,138,.1);
  border-color:rgba(227,192,138,.36);color:var(--gold)}

/* ---------- Forms ---------- */
.form{display:grid;gap:18px;max-width:560px;margin-top:44px}
.form.wide{max-width:100%}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{display:block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ivory-42);margin-bottom:9px}
.field input,.field textarea,.field select{width:100%;padding:14px 18px;border-radius:var(--r-md);
  border:1px solid var(--hairline);background:var(--surface);color:var(--ivory);
  font-family:var(--body);font-size:15.5px;font-weight:300;outline:none;transition:border-color .45s ease}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(227,192,138,.4)}
.field textarea{min-height:150px;resize:vertical;line-height:1.65}
.field select option{background:#0C1F30;color:var(--ivory)}
.hp{position:absolute;left:-9999px}
.form .btn{justify-self:start}
.form-note{font-size:13px;color:var(--ivory-26)}

/* Confirmation note. Hidden until there is something to say, then it settles
   in as a small panel rather than a line of loose text. */
.form-result{font-size:14.5px;line-height:1.6;margin:0}
.form-result:empty{display:none}
.form-result.is-ok,.form-result.is-error{
  display:flex;gap:11px;align-items:flex-start;padding:14px 18px 15px;
  border-radius:var(--r-md);border:1px solid;opacity:0;transform:translateY(7px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.form-result.is-in{opacity:1;transform:none}
.form-result svg{flex:none;width:15px;height:15px;margin-top:4px}
.form-result.is-ok{border-color:rgba(227,192,138,.30);background:rgba(227,192,138,.065);color:var(--gold)}
.form-result.is-ok span{color:var(--ivory-80)}
.form-result.is-error{border-color:rgba(226,140,124,.34);background:rgba(226,140,124,.06);color:#E28C7C}
.form-result.is-error span{color:rgba(242,235,223,.78)}
.subscribe{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;max-width:480px}
.subscribe input{flex:1 1 220px;padding:14px 18px;border-radius:var(--r-pill);
  border:1px solid var(--hairline);background:var(--surface);color:var(--ivory);
  font-family:var(--body);font-size:15px;font-weight:300;outline:none}
.subscribe input:focus{border-color:rgba(227,192,138,.4)}
.subscribe.mid{margin-inline:auto;justify-content:center}

/* ---------- Timeline / rows / swatches / stats ---------- */
.timeline{margin-top:60px;border-left:1px solid var(--hairline-soft);padding-left:34px}
.tl{position:relative;padding-bottom:44px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-39px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 14px rgba(227,192,138,.5)}
.tl .yr{font-family:var(--display);font-size:14px;letter-spacing:.16em;color:var(--gold);
  opacity:.75;display:block;margin-bottom:9px}
.tl h3{margin-bottom:9px}
.tl p{font-size:15.5px;color:var(--ivory-60);line-height:1.7}
.rows{margin-top:52px;border-top:1px solid var(--hairline-soft)}
.row{display:flex;align-items:center;gap:20px;padding:26px 0;
  border-bottom:1px solid var(--hairline-soft);transition:padding-left .5s ease}
.row:hover{padding-left:8px}
.row .rmain{flex:1}
.row h3{font-family:var(--display);font-size:22px;margin-bottom:5px}
.row p{font-size:14.5px;color:var(--ivory-42);margin:0}
.row .rmeta{font-size:13px;color:var(--ivory-42);text-align:right;flex:none}
.row .rarrow{flex:none;color:var(--gold);opacity:.6}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.sw{border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden}
.sw .chip{height:104px}
.sw .sbody{padding:16px 18px}
.sw b{display:block;font-family:var(--body);font-size:14px;font-weight:500;margin-bottom:3px}
.sw code{font-size:12px;color:var(--ivory-42);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px}
.stat{padding:0 30px;border-left:1px solid var(--hairline-soft);text-align:center}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(38px,5vw,56px);font-weight:200;
  color:var(--gold);line-height:1;margin-bottom:12px}
.stat span{font-size:14px;color:var(--ivory-42)}

/* ---------- Closing ---------- */
.closing{text-align:center;position:relative}
.closing::before{content:"";position:absolute;left:50%;top:-10%;width:min(720px,92%);height:360px;
  transform:translateX(-50%);pointer-events:none;filter:blur(20px);
  background:radial-gradient(closest-side,rgba(227,192,138,.14),transparent 72%)}
.closing h2{max-width:15ch;margin-inline:auto;position:relative}
.closing .lede{max-width:44ch;margin:24px auto 0;position:relative}
.closing .cta{margin-top:38px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;position:relative}
.closing .store{margin-top:34px;position:relative}

/* ---------- Footer ---------- */
.sitefooter{border-top:1px solid var(--hairline-soft);padding:clamp(54px,6.4vw,72px) 0 28px;
  background:var(--ink-void);position:relative;z-index:2}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:0 clamp(22px,2.8vw,38px);
  width:100%;max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}

.fbrand{padding-right:clamp(14px,2.6vw,38px)}
.fbrand .mark b{font-size:21px}
.fbrand p{font-size:14px;color:var(--ivory-42);max-width:27ch;margin-top:14px;line-height:1.66}
.fmail{display:inline-block;margin-top:15px;font-size:13.5px;color:var(--ivory-60);
  border-bottom:1px solid rgba(227,192,138,.22);transition:color .4s ease,border-color .4s ease}
.fmail:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* Groups are <details> so mobile gets a real accordion with no extra markup.
   On desktop JS forces them open and the summary stops behaving like a control. */
.fcol{border:0}
.fcol summary{list-style:none;display:block;cursor:default;pointer-events:none}
.fcol summary::-webkit-details-marker{display:none}
.sitefooter h5{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(242,235,223,.34);margin:0 0 16px}
.fchev{display:none}
.sitefooter ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.sitefooter ul a{font-size:14px;color:rgba(242,235,223,.72);transition:color .38s ease}
.sitefooter ul a:hover{color:var(--gold)}

.fdivide{width:100%;max-width:var(--measure);margin:clamp(42px,5vw,54px) auto 0;padding-inline:var(--gutter)}
.fdivide i{display:block;height:1px;background:linear-gradient(90deg,
  rgba(227,192,138,.20),var(--hairline) 26%,var(--hairline) 74%,rgba(227,192,138,.20))}
.fbase{width:100%;max-width:var(--measure);margin:0 auto;padding:20px var(--gutter) 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ivory-26)}
.fbase em{font-style:normal;color:var(--ivory-42)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity 1.35s cubic-bezier(.16,1,.3,1),transform 1.35s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ---------- Centre stage (404, coming soon) ---------- */
.center-stage{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:130px var(--gutter) 90px}
.center-stage h1{max-width:16ch;margin-inline:auto}
.center-stage .lede{max-width:46ch;margin:24px auto 0}
.center-stage .aperture{margin:0 auto clamp(30px,5vw,46px)}
.code404{font-family:var(--display);font-size:clamp(74px,13vw,150px);font-weight:200;
  color:var(--gold);opacity:.28;line-height:1;margin-bottom:18px;letter-spacing:.04em}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .links,#sitenav .btn{display:none}
  .orb-btn{display:flex}
  .g3,.g4,.tiers,.posts,.swatches{grid-template-columns:repeat(2,1fr)}
  .featured{grid-template-columns:1fr}
  .featured .fimage{min-height:240px;order:-1}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px clamp(24px,4vw,52px)}
  .fbrand{grid-column:1 / -1;padding-right:0;margin-bottom:6px}
  .fbrand p{max-width:44ch}
}
@media(max-width:760px){
  body{font-size:16px}
  .g2,.g3,.g4,.tiers,.posts,.swatches,.frow{grid-template-columns:1fr}
  .steps,.steps.s4{grid-template-columns:1fr}
  .step{padding:30px 0 0;border-left:0;border-top:1px solid var(--hairline-soft)}
  .step:first-child{padding-top:0;border-top:0}
  .split{grid-template-columns:1fr}
  .split.flip .media{order:0}
  .quiet{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:34px}
  .stat{padding:0;border-left:0}
  .fgrid{grid-template-columns:1fr;gap:0}
  .fbrand{margin-bottom:10px}
  .fcol{border-top:1px solid var(--hairline-soft)}
  .fcol summary{cursor:pointer;pointer-events:auto;display:flex;align-items:center;
    justify-content:space-between;padding:15px 0}
  .sitefooter h5{margin:0;font-size:11px;color:rgba(242,235,223,.58)}
  .fchev{display:block;width:8px;height:8px;border-right:1px solid var(--gold);
    border-bottom:1px solid var(--gold);opacity:.7;transform:translateY(-2px) rotate(45deg);
    transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .fcol[open] .fchev{transform:translateY(1px) rotate(-135deg)}
  .fcol ul{padding:2px 0 18px;gap:13px}
  .fdivide{margin-top:30px}
  .fbase{flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:18px}
  .row{flex-wrap:wrap;gap:10px}
  .row .rmeta{text-align:left}
  /* One badge, not two: size to content and centre it rather than stretching
     a lone item edge to edge with its label pinned left. */
  .badge{flex:0 0 auto}
  .store{justify-content:center}
  .later .lrow{flex-direction:column;gap:4px}
  .later .lrow span{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,.bub,.recall{opacity:1;transform:none}
  .resolve span{opacity:1;filter:none;transform:none}
  .aperture-mark{opacity:1;transform:none}.aperture-glow{opacity:.7}
  .bar i{width:var(--w)}
  section.ruled::before{transform:scaleX(1)}
  html{scroll-behavior:auto}
}

/* ---------- Explicit product sections (What is / voice / compare / loop) ---- */
.head.mid{text-align:center;margin-inline:auto;max-width:720px}
.wrap.mid{text-align:center}
.whatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.whatcell{padding:26px 24px;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--card-hi),var(--card))}
.whatcell b{display:block;font-family:var(--display);font-size:19px;color:var(--ivory);margin-bottom:10px}
.whatcell span{font-size:14.5px;line-height:1.62;color:var(--ivory-60)}
.ticks{list-style:none;display:flex;flex-direction:column;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ivory-80);line-height:1.55}
.ticks li svg{flex:none;margin-top:3px}
/* voice plate */
.voice-plate{display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center;padding:40px 30px}
.voice-wave{display:flex;align-items:center;gap:6px;height:64px}
.voice-wave span{width:5px;border-radius:3px;background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  animation:vwave 1.3s ease-in-out infinite}
.voice-wave span:nth-child(1){height:20%;animation-delay:0s}
.voice-wave span:nth-child(2){height:45%;animation-delay:.08s}
.voice-wave span:nth-child(3){height:70%;animation-delay:.16s}
.voice-wave span:nth-child(4){height:95%;animation-delay:.24s}
.voice-wave span:nth-child(5){height:60%;animation-delay:.32s}
.voice-wave span:nth-child(6){height:85%;animation-delay:.40s}
.voice-wave span:nth-child(7){height:100%;animation-delay:.48s}
.voice-wave span:nth-child(8){height:75%;animation-delay:.56s}
.voice-wave span:nth-child(9){height:50%;animation-delay:.64s}
.voice-wave span:nth-child(10){height:80%;animation-delay:.72s}
.voice-wave span:nth-child(11){height:35%;animation-delay:.80s}
.voice-wave span:nth-child(12){height:55%;animation-delay:.88s}
.voice-wave span:nth-child(13){height:25%;animation-delay:.96s}
@keyframes vwave{0%,100%{transform:scaleY(.5);opacity:.6}50%{transform:scaleY(1);opacity:1}}
.voice-caption{font-family:var(--display);font-size:19px;font-style:italic;color:var(--ivory);
  line-height:1.5;max-width:36ch}
.voice-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ivory-42)}
.voice-meta .lt{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px var(--gold);animation:blip 2.4s ease-in-out infinite}
/* comparison table */
.compare{max-width:760px;margin:44px auto 0;border:1px solid var(--hairline);border-radius:var(--r-card);
  overflow:hidden}
.compare-row{display:grid;grid-template-columns:1fr 1fr}
.compare-row span{padding:16px 22px;font-size:15px;border-top:1px solid var(--hairline-soft)}
.compare-row span:first-child{color:var(--ivory-42);border-right:1px solid var(--hairline-soft)}
.compare-row span:last-child{color:var(--ivory);font-weight:400}
.compare-head span{border-top:none;font-family:var(--body);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding-top:18px;padding-bottom:18px}
.compare-head span:first-child{color:var(--ivory-42)}
.compare-head span:last-child{color:var(--gold)}
/* the loop */
.loop{max-width:440px;margin:44px auto 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.loop-step{width:100%;text-align:center;padding:24px 30px;border:1px solid var(--hairline);
  border-radius:var(--r-card);background:linear-gradient(160deg,var(--card-hi),var(--card))}
.loop-step b{display:block;font-family:var(--display);font-size:22px;color:var(--ivory);margin-bottom:7px}
.loop-step span{font-size:15px;line-height:1.6;color:var(--ivory-80)}
.loop-arrow{color:var(--gold);font-size:20px;line-height:1;opacity:.7}
@media (max-width:820px){
  .whatgrid{grid-template-columns:1fr}
  .compare-row span{padding:13px 16px;font-size:14px}
}

/* ---------- One Life, Three Perspectives + two layers ---------------------- */
.perspectives{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.persp{padding:30px 26px;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--card-hi),var(--card));position:relative;overflow:hidden}
.persp::after{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(190,214,248,.28) 30%,rgba(190,214,248,.28) 70%,transparent)}
.persp-q{display:block;font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);opacity:.85;margin-bottom:14px}
.persp h3{font-family:var(--display);font-size:26px;color:var(--ivory);margin-bottom:12px}
.persp p{font-size:14.5px;line-height:1.62;color:var(--ivory-60)}
.layers{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;margin-top:44px;max-width:900px;margin-inline:auto}
.layer{padding:28px 26px;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--card-hi),var(--card))}
.layer-label{font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
.layer ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.layer li{display:flex;flex-direction:column;gap:2px}
.layer li b{font-family:var(--display);font-size:17px;color:var(--ivory)}
.layer li span{font-size:13px;color:var(--ivory-42)}
.layer-join{font-size:26px;color:var(--gold);opacity:.6;text-align:center}
.loop-return{color:var(--gold);opacity:.8;font-size:13px;letter-spacing:.04em;margin-top:4px}
@media (max-width:820px){
  .perspectives{grid-template-columns:1fr}
  .layers{grid-template-columns:1fr}
  .layer-join{transform:rotate(90deg)}
}

/* ---------- Makes-sense flow + Story-centred map -------------------------- */
.makesense{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:40px auto 8px;max-width:820px}
.ms-step{padding:18px 24px;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--card-hi),var(--card));text-align:center;min-width:180px}
.ms-step b{display:block;font-family:var(--display);font-size:19px;color:var(--ivory)}
.ms-step span{font-size:13px;color:var(--ivory-42)}
.ms-flow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.8}
.storymap{max-width:560px;margin:44px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.sm-top{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sm-src{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory-60);
  padding:8px 16px;border:1px solid var(--hairline-soft);border-radius:var(--r-pill)}
.sm-arrow{color:var(--gold);opacity:.55;font-size:18px;line-height:1}
.sm-node{padding:16px 26px;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--card-hi),var(--card));font-size:15px;color:var(--ivory-80);min-width:170px}
.sm-node span{display:block;font-size:12.5px;color:var(--ivory-42);margin-top:2px}
.sm-story{border-color:rgba(240,168,46,.4);padding:26px 40px;
  background:linear-gradient(160deg,#182636,#101d29);box-shadow:0 0 40px -18px rgba(240,168,46,.4)}
.sm-story b{font-family:var(--display);font-size:30px;letter-spacing:.06em;color:var(--gold-bright);display:block}
.sm-story span{font-size:13.5px;color:var(--ivory-60);margin-top:6px}
.sm-branch{display:flex;gap:120px;justify-content:center;color:var(--gold);opacity:.55;font-size:22px}
.sm-pair{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.sm-out{min-width:150px}
.sm-better{border-color:rgba(190,214,248,.2)}
.sm-loop{font-size:13px;color:var(--gold);opacity:.75;letter-spacing:.03em;margin-top:6px}
@media (max-width:640px){
  .makesense{flex-direction:column}
  .sm-branch{gap:60px}
  .sm-pair{flex-direction:column}
}

/* ---------- Practices, Over Time, complete loop -------------------------- */
.status-pill{display:inline-block;font-family:var(--body);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(240,168,46,.35);
  border-radius:var(--r-pill);padding:6px 14px;margin-bottom:22px}
.grid.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* practice plate (the stillness example) */
.practice-plate{display:flex;flex-direction:column;gap:16px;align-items:flex-start;text-align:left;padding:38px 34px}
.pp-line{font-family:var(--display);font-size:20px;font-style:italic;color:var(--ivory);line-height:1.5}
.pp-after{color:var(--gold-bright)}
.pp-sep{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-42)}
.pp-note{font-size:13.5px;color:var(--ivory-42);margin-top:6px}
/* over time timeline */
.overtime{background:linear-gradient(180deg,transparent,rgba(16,36,58,.35),transparent)}
.timeline{max-width:720px;margin:46px auto 0;display:flex;flex-direction:column;gap:2px;position:relative}
.timeline::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(240,168,46,.5),rgba(240,168,46,.8));opacity:.5}
.tl-stage{position:relative;padding:22px 0 22px 44px}
.tl-stage::before{content:"";position:absolute;left:4px;top:28px;width:11px;height:11px;border-radius:50%;
  background:var(--card-hi);border:1.5px solid var(--gold-deep)}
.tl-peak::before{background:var(--gold);border-color:var(--gold-bright);
  box-shadow:0 0 16px var(--gold)}
.tl-when{display:block;font-family:var(--body);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px}
.tl-stage p{font-family:var(--display);font-size:20px;line-height:1.5;color:var(--ivory-80);margin:0}
.tl-peak p{color:var(--ivory);font-size:23px}
/* complete loop, elegant inline flow not boxes */
.cloop{max-width:820px;margin:40px auto 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px}
.cl{font-family:var(--display);font-size:20px;color:var(--ivory-80)}
.cl-end{color:var(--gold-bright);font-style:italic}
.cl-a{color:var(--gold);opacity:.6;font-size:15px}
@media (max-width:820px){
  .grid.g2{grid-template-columns:1fr}
  .cloop{gap:8px 10px}
  .cl{font-size:17px}
}

/* ---------- Quick Answer box -------------------------------------------- */
/* Any post whose opening paragraph begins with "Quick Answer:" is rebuilt in
   PHP into a dark rounded panel with a gold border and an inline gold label.
   Works whether the article bolds only the label or the whole block. */
.post-body .wrap p.quick-answer{
  position:relative;
  background:linear-gradient(160deg,#0F1E2C,#0B1722);
  border:1px solid rgba(240,168,46,.42);
  border-radius:16px;
  padding:30px 30px 28px;
  margin:8px 0 40px;
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  color:var(--ivory-80);
  box-shadow:0 0 40px -22px rgba(240,168,46,.5);
}
.post-body .wrap p.quick-answer .qa-label{
  font-family:var(--body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-right:10px;
  white-space:nowrap;
}
.post-body .wrap p.quick-answer strong{font-weight:400;color:inherit}

/* ---------- Complete loop extras + deeper system map --------------------- */
.coming-tag{display:inline-block;font-family:var(--body);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(240,168,46,.4);
  border-radius:var(--r-pill);padding:2px 8px;margin-left:8px;vertical-align:middle;font-weight:400}
.loop-coming{border-color:rgba(240,168,46,.3);border-style:dashed}
.loop-peak{border-color:rgba(240,168,46,.45);background:linear-gradient(160deg,#182636,#101d29);
  box-shadow:0 0 34px -18px rgba(240,168,46,.5)}
.loop-peak b{color:var(--gold-bright)}
/* deeper system map */
.deepmap{max-width:600px;margin:44px auto 0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dm-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.dm-node{padding:12px 22px;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--card-hi),var(--card));font-size:14.5px;color:var(--ivory-80)}
.dm-center{padding:20px 44px;border:1px solid rgba(240,168,46,.4);border-radius:var(--r-card);
  background:linear-gradient(160deg,#182636,#101d29);font-family:var(--display);font-size:26px;
  letter-spacing:.04em;color:var(--gold-bright);box-shadow:0 0 34px -18px rgba(240,168,46,.5)}
.dm-a{color:var(--gold);opacity:.55}
.dm-down,.dm-updown{color:var(--gold);opacity:.5;font-size:18px;line-height:1}
.dm-fan{display:flex;gap:120px;color:var(--gold);opacity:.5;font-size:20px}
.dm-coming{border-style:dashed;border-color:rgba(240,168,46,.3)}
@media (max-width:640px){ .dm-fan{gap:60px} }

/* ---------- Pricing: one product, two billing periods ------------------- */
.pricing-lead{max-width:600px;margin:0 auto 48px;text-align:center}
.pricing-lead p{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.6vw,27px);
  line-height:1.5;color:var(--ivory-60);margin:0}
.pricing-lead .hold{color:var(--gold-bright)}

/* ======================================================================
   PRACTICES PAGE (scoped additions only, appended, no existing rules changed)
   ====================================================================== */
.pr-lede{font-family:var(--display);font-weight:300;font-size:clamp(21px,2.6vw,28px);
  line-height:1.5;color:var(--ivory-80);max-width:22ch;margin:0 auto 28px}
.pr-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* --- the 15-practice pathway --- */
.pathway{max-width:760px;margin:44px auto 0}
.pw-arc{margin:30px 0 12px}
.pw-arc:first-child{margin-top:0}
.pw-arc-label{font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);opacity:.85}
.pw-item{border:1px solid var(--hairline);border-radius:var(--r-card);margin-bottom:10px;
  background:linear-gradient(160deg,var(--card-hi),var(--card));overflow:hidden}
.pw-item summary{display:flex;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;
  list-style:none;transition:background .2s ease}
.pw-item summary::-webkit-details-marker{display:none}
.pw-item summary:hover{background:rgba(190,214,248,.03)}
.pw-num{flex:none;font-family:var(--display);font-size:15px;color:var(--gold-deep);width:26px}
.pw-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.pw-name{font-family:var(--display);font-size:20px;color:var(--ivory);line-height:1.2}
.pw-line{font-size:14px;color:var(--ivory-60);line-height:1.5}
.pw-plus{flex:none;width:16px;height:16px;position:relative}
.pw-plus::before,.pw-plus::after{content:"";position:absolute;background:var(--gold);
  transition:transform .25s ease;opacity:.75}
.pw-plus::before{top:7px;left:0;width:16px;height:1.5px}
.pw-plus::after{top:0;left:7px;width:1.5px;height:16px}
.pw-item[open] .pw-plus::after{transform:scaleY(0)}
.pw-detail{padding:4px 22px 24px 66px;display:flex;flex-direction:column;gap:16px}
.pw-d-label{display:block;font-family:var(--body);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:5px}
.pw-d p{font-size:15px;line-height:1.62;color:var(--ivory-80);margin:0}
/* --- why a path plate --- */
.why-plate{display:flex;flex-direction:column;align-items:center;gap:8px;padding:38px 30px;text-align:center}
.why-step{padding:11px 24px;border:1px solid var(--hairline);border-radius:var(--r-pill);
  background:linear-gradient(160deg,var(--card-hi),var(--card));font-size:15px;color:var(--ivory-80);
  font-family:var(--display)}
.why-arrow{color:var(--gold);opacity:.5;font-size:16px;line-height:1}
.why-last{border-color:rgba(240,168,46,.4);color:var(--gold-bright)}
/* --- one life grid --- */
.onelife{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
.ol{padding:24px 20px;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:linear-gradient(160deg,var(--card-hi),var(--card))}
.ol b{display:block;font-family:var(--display);font-size:18px;color:var(--ivory);margin-bottom:10px}
.ol span{font-size:13.5px;line-height:1.58;color:var(--ivory-60)}
/* --- practice isn't the destination --- */
.narrow-block .hold-line{font-family:var(--display);font-style:italic;font-size:clamp(19px,2.4vw,24px);
  color:var(--ivory);max-width:26ch}
/* --- carry / final --- */
.carry{background:linear-gradient(180deg,transparent,rgba(16,36,58,.4),transparent)}
.carry-num{display:inline-block;font-family:var(--display);font-size:40px;color:var(--gold-deep);
  opacity:.6;margin-bottom:6px}
.carry-close{font-family:var(--display);font-style:italic;font-size:clamp(19px,2.4vw,25px);
  color:var(--gold-bright);max-width:28ch;margin:26px auto 0;line-height:1.4}
.carry-sub{font-size:14px;color:var(--ivory-42);margin-top:16px}
/* ---- Practices responsive ---- */
@media (max-width:1024px){
  .onelife{grid-template-columns:repeat(2,1fr);max-width:560px;margin-inline:auto}
}
@media (max-width:768px){
}
@media (max-width:620px){
  .onelife{grid-template-columns:1fr;max-width:340px}
  .pw-item summary{gap:14px;padding:18px 18px}
  .pw-name{font-size:18px}
  .pw-detail{padding:4px 18px 22px 50px}
}

/* homepage practices teaser: names fading into the distance */
.practice-fade{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:40px 36px}
.practice-fade .pf-name{font-family:var(--display);font-size:24px;line-height:1.2;color:var(--ivory)}
.practice-fade .pf-name:nth-child(2){opacity:.72}
.practice-fade .pf-name:nth-child(3){opacity:.5}
.practice-fade .pf-name:nth-child(4){opacity:.34}
.practice-fade .pf-name:nth-child(5){opacity:.2}
.practice-fade .pf-more{font-size:13px;color:var(--gold);opacity:.7;letter-spacing:.02em;margin-top:6px}

/* ---- Practices pathway: intro hold + Integration / Practice 15 ---------- */
.pathway-intro-hold{font-family:var(--display);font-style:italic;color:var(--ivory);
  font-size:clamp(18px,2.2vw,22px);margin-top:14px}
/* generous breathing room before Integration so the path visually settles */
.integration{margin-top:78px}
.integration-arc{margin-bottom:20px;text-align:center}
.integration-arc .pw-arc-label{font-size:12px}
.carry15{max-width:640px;margin:0 auto;text-align:center;
  border:1px solid rgba(240,168,46,.32);border-radius:var(--r-card);
  background:linear-gradient(170deg,#152435,#0C1A27 70%);
  padding:clamp(38px,6vw,64px) clamp(26px,5vw,56px);
  box-shadow:0 40px 90px -50px rgba(240,168,46,.5)}
.carry15-num{display:block;font-family:var(--display);font-size:clamp(30px,5vw,42px);
  color:var(--gold-deep);opacity:.65;line-height:1}
.carry15-name{font-family:var(--display);font-weight:300;font-size:clamp(30px,5vw,44px);
  color:var(--ivory);line-height:1.15;margin:6px 0 14px}
.carry15-line{font-family:var(--display);font-style:italic;font-size:clamp(19px,2.6vw,25px);
  color:var(--gold-bright);margin-bottom:36px}
.carry15-detail{text-align:left;display:flex;flex-direction:column;gap:26px}
.carry15-detail .pw-d-label{display:block;font-family:var(--body);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.carry15-detail p{font-size:15.5px;line-height:1.65;color:var(--ivory-80);margin:0}
.carry15-detail .pw-d p + p{margin-top:12px}
/* the quiet capacity sequence, editorial not flowchart */
.carry15-seq{display:flex;flex-wrap:wrap;gap:7px 12px;justify-content:flex-start;
  margin:18px 0;padding:18px 0;border-top:1px solid var(--hairline-soft);
  border-bottom:1px solid var(--hairline-soft)}
.carry15-seq span{font-family:var(--display);font-size:14px;color:var(--ivory-42);
  position:relative;line-height:1.4}
.carry15-seq span:not(:last-child)::after{content:"\2193";margin-left:12px;color:var(--gold);opacity:.4}
.carry15-life{color:var(--gold-bright)!important;font-style:italic}
/* the emotional endpoint */
.carry15-close-1{font-family:var(--display);font-size:clamp(20px,2.8vw,26px);
  color:var(--ivory)!important;margin-bottom:10px!important}
.carry15-close-2{font-family:var(--display);font-style:italic;
  font-size:clamp(22px,3.2vw,30px);color:var(--gold-bright)!important;line-height:1.35}
@media (max-width:620px){
  .integration{margin-top:56px}
  .carry15{text-align:center}
  .carry15-seq{justify-content:center;gap:6px 10px}
  .carry15-seq span{font-size:13px}
}

/* ---- About: the belief section, editorial treatment (words unchanged) ---- */
.belief{text-align:center}
.belief .mid-eyebrow{margin-bottom:30px}
.belief-open{font-family:var(--display);font-weight:300;font-size:clamp(24px,3.4vw,36px);
  line-height:1.32;letter-spacing:-.01em;color:var(--ivory);max-width:20ch;margin:0 auto 44px}
.belief-body{text-align:left;max-width:60ch;margin:0 auto}
.belief-body p{font-size:clamp(16px,1.7vw,18px);line-height:1.78;color:var(--ivory-80);
  margin:0 0 1.35em}
.belief-body p:last-child{margin-bottom:0}
.belief-close{font-family:var(--display)!important;font-style:italic;
  font-size:clamp(19px,2.3vw,23px)!important;line-height:1.5!important;color:var(--ivory)!important;
  margin-top:1.8em!important;padding-top:1.6em;border-top:1px solid var(--hairline-soft)}
@media (max-width:620px){
  .belief-open{font-size:23px;margin-bottom:34px}
  .belief-body{max-width:100%}
}

/* ======================================================================
   Homepage feature index, "the trailer". A typographic contents page,
   not a card grid. Boldness spent only on the hover gold rule + name.
   ====================================================================== */
.index{margin-top:44px;border-top:1px solid var(--hairline)}
.idx{display:grid;grid-template-columns:minmax(180px,1fr) 2.4fr auto;align-items:baseline;
  gap:34px;padding:26px 4px;border-bottom:1px solid var(--hairline);
  text-decoration:none;color:inherit;position:relative;
  transition:padding-left .35s cubic-bezier(.2,.7,.2,1)}
.idx-name{font-family:var(--display);font-weight:300;font-size:clamp(23px,2.7vw,30px);
  line-height:1.1;color:var(--ivory);letter-spacing:-.01em;
  transition:color .3s ease}
.idx-say{font-size:15.5px;line-height:1.6;color:var(--ivory-60);
  transition:color .3s ease}
.idx-go{justify-self:end;font-family:var(--body);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivory-42);white-space:nowrap;position:relative;
  padding-bottom:3px;transition:color .3s ease}
.idx-go::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.2,1)}
/* the single orchestrated hover moment */
.idx:hover{padding-left:16px}
.idx:hover .idx-name{color:var(--gold-bright)}
.idx:hover .idx-say{color:var(--ivory-80)}
.idx:hover .idx-go{color:var(--gold)}
.idx:hover .idx-go::after{transform:scaleX(1)}
.idx:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
@media (hover:none){ .idx:hover{padding-left:4px} }
@media (max-width:820px){
  .idx{grid-template-columns:1fr;gap:8px;padding:22px 2px}
  .idx-go{justify-self:start;margin-top:6px}
  .idx-go::after{background:var(--gold-deep)}
}
@media (prefers-reduced-motion:reduce){
  .idx,.idx-name,.idx-say,.idx-go,.idx-go::after{transition:none}
}

/* ======================================================================
   About, the belief / origin section. Editorial two-column chapter opener.
   ====================================================================== */
.belief2-grid{display:grid;grid-template-columns:minmax(240px,0.85fr) 1.4fr;gap:clamp(40px,7vw,96px);
  align-items:start}
.belief2-rail{position:relative}
.belief2-kicker{display:block;font-family:var(--body);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.belief2-rail h2{margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(30px,3.8vw,46px);line-height:1.12;letter-spacing:-.015em;color:var(--ivory)}
.belief2-rule{display:block;width:44px;height:2px;margin-top:28px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.belief2-body{max-width:60ch}
.belief2-thesis{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.3vw,27px);
  line-height:1.42;letter-spacing:-.01em;color:var(--ivory);margin:0 0 1.5em}
.belief2-body p{font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.8;color:var(--ivory-80);
  margin:0 0 1.35em}
.belief2-close{font-family:var(--display)!important;font-style:italic;
  font-size:clamp(18px,2vw,22px)!important;line-height:1.5!important;color:var(--gold-bright)!important;
  margin-top:1.7em!important;padding-top:1.6em;border-top:1px solid var(--hairline-soft);max-width:34ch}
@media (max-width:860px){
  .belief2-grid{grid-template-columns:1fr;gap:32px}
  .belief2-rule{display:none}
  .belief2-body{max-width:100%}
}

/* Practices hero tail: sit close to the hero as one composed unit, not a gap */
section.tight.pr-hero-tail{padding-top:clamp(20px,3vw,36px);padding-bottom:clamp(48px,7vw,90px)}
.pr-hero-tail .pr-lede{margin-bottom:30px}

/* ---------- Pricing page ------------------------------------------------ */
/* Editorial composition. The two plans are divided by a hairline rather than
   boxed, so the page itself carries the hierarchy instead of a card grid. */

.pr-intro{font-size:clamp(18px,1.8vw,21px);line-height:1.7;color:var(--ivory-80);font-weight:300}

/* --- the two plans, split by a rule not a box --- */
.pr-plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,84px);align-items:start;position:relative}
.pr-plans::before{content:"";position:absolute;top:6px;bottom:6px;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--hairline) 12%,var(--hairline) 88%,transparent)}
.pr-plan-name{font-size:clamp(24px,2.6vw,30px);margin-bottom:20px}
.pr-price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.pr-price b{font-family:var(--display);font-weight:300;font-size:clamp(46px,6.4vw,66px);
  line-height:1;letter-spacing:-.02em;color:var(--ivory)}
.pr-plan--premium .pr-price b{color:var(--gold-bright)}
.pr-price span{font-size:14px;color:var(--ivory-42);letter-spacing:.02em}
.pr-sub{font-size:15px;color:var(--ivory-60);margin-bottom:26px}
.pr-sub b{color:var(--ivory-80);font-weight:400}
.pr-line{font-size:16px;line-height:1.72;color:var(--ivory-80);margin-bottom:24px}
.pr-plan-lead{font-family:var(--display);font-weight:300;font-size:clamp(21px,2.3vw,26px);
  line-height:1.3;letter-spacing:-.008em;color:var(--ivory);margin-bottom:16px}
.pr-plan-body{font-size:16.5px;line-height:1.74;color:var(--ivory-60);margin-bottom:20px}
.pr-plan-body:last-of-type{margin-bottom:28px}
.pr-list{list-style:none;margin:0 0 28px}
.pr-list li{position:relative;padding-left:26px;margin-bottom:13px;font-size:16px;
  line-height:1.66;color:var(--ivory-60)}
.pr-list li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);opacity:.5}
.pr-list--lead li{color:var(--ivory-60);margin-bottom:20px}
.pr-list--lead b{display:block;color:var(--ivory);font-weight:400;font-size:17px;margin-bottom:3px}
.pr-list--lead li::before{opacity:.85}
.pr-cta{margin-top:4px}
.pr-fine{margin-top:16px;font-size:13.5px;color:var(--ivory-42);line-height:1.6}
.pr-plan:not(.pr-plan--premium) .pr-fine{padding-top:14px;border-top:1px solid var(--hairline-soft)}

/* --- the ten minute moment --- */
.pr-voice-in{max-width:900px}
.pr-voice-lead{font-family:var(--display);font-weight:300;
  font-size:clamp(26px,3.6vw,42px);line-height:1.24;letter-spacing:-.012em;
  color:var(--ivory-80);margin-top:26px;max-width:19ch}
.pr-num{color:var(--gold-bright);font-size:1.32em;line-height:1}
.pr-voice-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);
  margin-top:clamp(34px,4vw,52px);padding-top:30px;border-top:1px solid var(--hairline-soft)}
.pr-voice-body p{font-size:16.5px;line-height:1.72;color:var(--ivory-60)}
.pr-voice-note{color:var(--ivory-80)}

/* --- pull quotes, used to break prose without a box --- */
.pr-pull{font-family:var(--display);font-weight:300;font-size:clamp(21px,2.5vw,28px);
  line-height:1.38;letter-spacing:-.008em;color:var(--ivory);
  margin:clamp(30px,4vw,44px) 0;padding-left:26px;border-left:1px solid var(--gold);
  max-width:26ch}
.pr-hero-line{font-family:var(--display);font-weight:300;font-size:clamp(24px,3vw,34px);
  line-height:1.3;color:var(--ivory);margin:24px 0 22px}

/* --- the seven systems --- */
.pr-systems{margin-top:clamp(44px,5vw,68px);border-top:1px solid var(--hairline-soft)}
.pr-system{display:grid;grid-template-columns:64px 250px 1fr;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(24px,3vw,32px) 0;
  border-bottom:1px solid var(--hairline-soft)}
.pr-system-n{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.14em;
  color:var(--gold);opacity:.55}
.pr-system h3{color:var(--ivory)}
.pr-system p{font-size:16px;line-height:1.7;color:var(--ivory-60)}

/* --- comparison table --- */
.pr-table-wrap{margin-top:clamp(38px,4vw,54px)}
.pr-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr-table{width:100%;border-collapse:collapse;text-align:left}
.pr-table thead th{vertical-align:bottom;padding:0 22px 20px;
  border-bottom:1px solid var(--hairline)}
.pr-table thead th:first-child{padding-left:0}
.pr-th-label{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory-42)}
.pr-th-plan{display:block;font-family:var(--display);font-size:clamp(19px,2vw,23px);
  font-weight:300;color:var(--ivory);margin-bottom:6px}
.pr-th-hi .pr-th-plan{color:var(--gold-bright)}
.pr-th-price{display:block;font-size:13px;color:var(--ivory-42);line-height:1.5}
.pr-table tbody th{font-weight:400;font-size:16px;color:var(--ivory-80);
  padding:18px 22px 18px 0;border-bottom:1px solid var(--hairline-soft)}
.pr-table tbody td{font-size:15.5px;color:var(--ivory-60);padding:18px 22px;
  border-bottom:1px solid var(--hairline-soft)}
.pr-table tbody .pr-td-hi{color:var(--ivory)}
.pr-table tbody tr:last-child th,.pr-table tbody tr:last-child td{border-bottom:none}

/* --- at the limit --- */
.pr-stays{list-style:none;margin:26px 0;display:grid;gap:11px}
.pr-stays li{position:relative;padding-left:24px;font-size:16.5px;color:var(--ivory-80)}
.pr-stays li::before{content:"";position:absolute;left:0;top:12px;width:11px;height:1px;
  background:var(--gold);opacity:.6}
.pr-none{margin-top:28px;font-size:15.5px;line-height:1.75;color:var(--ivory-42)}

/* --- the chain --- */
.pr-chain{list-style:none;counter-reset:chain;margin:clamp(28px,3.5vw,40px) 0}
.pr-chain li{counter-increment:chain;position:relative;padding-left:44px;
  padding-bottom:18px;font-size:17px;line-height:1.6;color:var(--ivory-80)}
.pr-chain li::before{content:counter(chain);position:absolute;left:0;top:1px;
  font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.1em;
  color:var(--gold);opacity:.6}
.pr-chain li:not(:last-child)::after{content:"";position:absolute;left:6px;top:22px;
  bottom:4px;width:1px;background:var(--hairline)}

/* --- legal links --- */
.pr-legal-links{margin-top:32px;font-size:15px;color:var(--ivory-26)}
.pr-legal-links a{color:var(--gold);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .4s ease}
.pr-legal-links a:hover{border-bottom-color:var(--gold)}
.pr-legal-links span{margin:0 12px}

/* --- final decision --- */
.pr-final-plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);
  max-width:820px;margin:clamp(44px,5vw,64px) auto 0;position:relative}
.pr-final-plans::before{content:"";position:absolute;top:4px;bottom:4px;left:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--hairline) 15%,var(--hairline) 85%,transparent)}
.pr-final-plan{text-align:center}
.pr-final-name{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory-42);margin-bottom:14px}
.pr-final-price{font-family:var(--display);font-weight:300;font-size:clamp(36px,5vw,50px);
  line-height:1;color:var(--ivory);margin-bottom:12px}
.pr-final-plan:last-child .pr-final-price{color:var(--gold-bright)}
.pr-final-price span{font-size:15px;color:var(--ivory-42);letter-spacing:.02em}
.pr-final-note{font-size:14.5px;color:var(--ivory-60);margin-bottom:24px;
  max-width:26ch;margin-inline:auto;line-height:1.6}

/* ---------- Pricing responsive ------------------------------------------ */
@media (max-width:900px){
  .pr-system{grid-template-columns:48px 1fr;row-gap:8px}
  .pr-system-n{grid-row:1}
  .pr-system h3{grid-column:2}
  .pr-system p{grid-column:2}
  .pr-voice-body{grid-template-columns:1fr;gap:16px}
}
@media (max-width:760px){
  /* plans stack, the vertical rule becomes a horizontal one */
  .pr-plans{grid-template-columns:1fr;gap:0}
  .pr-plans::before{display:none}
  .pr-plan{padding-block:clamp(34px,6vw,46px)}
  .pr-plan:first-child{padding-top:0;border-bottom:1px solid var(--hairline)}
  .pr-plan:last-child{padding-bottom:0}
  .pr-cta{width:100%}

  /* the table restacks into labelled rows rather than scrolling sideways */
  .pr-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pr-table,.pr-table tbody,.pr-table tr,.pr-table th,.pr-table td{display:block;width:100%}
  .pr-table tbody tr{padding:22px 0;border-bottom:1px solid var(--hairline-soft)}
  .pr-table tbody tr:last-child{border-bottom:none}
  .pr-table tbody th{padding:0 0 12px;border-bottom:none;font-size:17px;color:var(--ivory)}
  .pr-table tbody td{padding:0 0 7px 0;border-bottom:none;display:flex;gap:12px;
    align-items:baseline;justify-content:space-between;font-size:15.5px}
  .pr-table tbody td::before{content:attr(data-plan);flex:0 0 auto;
    font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ivory-42)}
  .pr-table tbody .pr-td-hi::before{color:var(--gold);opacity:.75}

  .pr-final-plans{grid-template-columns:1fr;gap:0}
  .pr-final-plans::before{display:none}
  .pr-final-plan{padding-block:34px}
  .pr-final-plan:first-child{padding-top:0;border-bottom:1px solid var(--hairline)}
  .pr-final-plan:last-child{padding-bottom:0}
  .pr-final-plan .btn{width:100%}
  .pr-pull{padding-left:20px;max-width:none}
}
@media (max-width:420px){
  .pr-price b{font-size:44px}
  .pr-table tbody td{flex-direction:column;gap:2px}
}

/* ---------- Canonical definition ---------------------------------------- */
/* A single plain factual passage, deliberately unadorned, so both people and
   answer engines can lift it without decoding poetry around it. */
.prose p.definition{
  font-size:17.5px;
  line-height:1.75;
  color:var(--ivory-80);
  padding:24px 0 24px 26px;
  border-left:1px solid var(--gold);
  margin:26px 0 34px;
}

/* ==========================================================================
 * How Hippora Grows
 * --------------------------------------------------------------------------
 * The continuity motif is a single hairline thread that runs the length of the
 * page, picked up again by each sequence. Time markers instead of icons. No
 * cards anywhere: hierarchy comes from scale, space and rules.
 * ========================================================================== */

.grows .wrap{position:relative}
.grows-hero{padding-block:152px 0}
.grows-hero h1{font-size:clamp(38px,6vw,72px)}
.grows-lede{margin-top:26px;max-width:44ch}

/* --- time markers --- */
.time-mark{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);opacity:.7;margin-bottom:18px;
  padding-left:26px;position:relative}
.time-mark::before{content:"";position:absolute;left:0;top:6px;width:16px;height:1px;
  background:var(--gold);opacity:.6}

/* --- the five year statement, a full moment --- */
.grows-statement{padding-block:clamp(72px,11vw,150px)}
.grows-big{font-family:var(--display);font-weight:200;
  font-size:clamp(30px,5.4vw,64px);line-height:1.16;letter-spacing:-.022em;
  color:var(--ivory);max-width:19ch}
.grows-because{margin-top:clamp(34px,4vw,52px);padding-top:28px;
  border-top:1px solid var(--hairline-soft);max-width:46ch}
.grows-because p{font-size:17px;line-height:1.75;color:var(--ivory-60);margin-bottom:6px}
.grows-because p:last-child{color:var(--ivory-80);margin-bottom:0}

/* --- pull lines --- */
.grows-pull{font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.7vw,30px);line-height:1.34;letter-spacing:-.01em;
  color:var(--ivory);margin:clamp(30px,4vw,44px) 0;
  padding-left:26px;border-left:1px solid var(--gold);max-width:26ch}

/* --- day one negations --- */
.grows-not{list-style:none;margin:26px 0 30px}
.grows-not li{position:relative;padding-left:26px;margin-bottom:10px;
  font-size:16.5px;color:var(--ivory-42)}
.grows-not li::before{content:"";position:absolute;left:0;top:12px;width:12px;height:1px;
  background:var(--ivory-26)}

/* --- the loop --- */
.grows-loop{list-style:none;counter-reset:none;margin:clamp(44px,5vw,64px) 0 0;
  max-width:760px;position:relative}
.grows-loop li{position:relative;padding-left:74px;padding-bottom:clamp(30px,3.4vw,44px)}
.grows-loop li::after{content:"";position:absolute;left:15px;top:20px;bottom:-2px;width:1px;
  background:linear-gradient(180deg,var(--hairline),var(--hairline-soft))}
.grows-loop li.gl-last::after{background:linear-gradient(180deg,var(--hairline),transparent)}
.gl-n{position:absolute;left:0;top:2px;font-family:var(--body);font-size:11px;
  font-weight:500;letter-spacing:.12em;color:var(--gold);opacity:.55}
.gl-t{display:block;font-family:var(--display);font-weight:300;
  font-size:clamp(20px,2.3vw,27px);line-height:1.28;letter-spacing:-.01em;
  color:var(--ivory);margin-bottom:7px}
.gl-s{display:block;font-size:16px;line-height:1.7;color:var(--ivory-60);max-width:44ch}
.grows-loop-back{margin-left:74px;font-size:14px;letter-spacing:.04em;
  color:var(--gold);opacity:.65}
.grows-loop-back span{margin-right:8px;font-size:16px}

/* --- accumulation --- */
.grows-acc{margin-top:clamp(44px,5vw,64px);border-top:1px solid var(--hairline-soft)}
.ga{display:grid;grid-template-columns:64px 300px 1fr;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(26px,3vw,34px) 0;
  border-bottom:1px solid var(--hairline-soft)}
.ga-n{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.14em;
  color:var(--gold);opacity:.5}
.ga h3{color:var(--ivory)}
.ga p{font-size:16px;line-height:1.7;color:var(--ivory-60)}

/* --- who you were / are / changing --- */
.grows-three{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,64px);
  margin-top:clamp(44px,5vw,64px);position:relative}
.grows-three::before,.grows-three::after{content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--hairline) 18%,var(--hairline) 82%,transparent)}
.grows-three::before{left:33.333%}
.grows-three::after{left:66.666%}
.g3-k{font-family:var(--display);font-weight:300;font-size:clamp(20px,2.2vw,26px);
  line-height:1.25;color:var(--ivory);margin-bottom:14px}
.grows-three .g3:last-child .g3-k{color:var(--gold-bright)}
.g3-v{font-size:16px;line-height:1.72;color:var(--ivory-60)}

/* --- decision sequence --- */
.grows-seq{margin-top:clamp(44px,5vw,64px);max-width:840px;position:relative}
.gs{display:grid;grid-template-columns:220px 1fr;gap:clamp(18px,3vw,40px);
  align-items:baseline;padding:22px 0 22px 30px;position:relative;
  border-bottom:1px solid var(--hairline-soft)}
.gs::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--hairline)}
.gs::after{content:"";position:absolute;left:-3px;top:31px;width:7px;height:7px;
  border-radius:50%;background:var(--ink);border:1px solid var(--gold);opacity:.75}
.gs:last-child{border-bottom:none}
.gs-k{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory-80)}
.gs-v{font-size:16.5px;line-height:1.7;color:var(--ivory-60)}
.gs-gap .gs-k{color:var(--ivory-42)}
.gs-gap .gs-v{color:var(--ivory-42);font-style:italic}
.gs-gap::after{background:var(--ink);border-color:var(--ivory-26);opacity:.5}

/* --- outcome states --- */
.grows-states{list-style:none;margin:26px 0;display:grid;gap:11px}
.grows-states li{position:relative;padding-left:26px;font-size:17px;color:var(--ivory-80)}
.grows-states li::before{content:"";position:absolute;left:0;top:13px;width:12px;height:1px;
  background:var(--gold);opacity:.6}

/* --- the emotional centre --- */
.grows-centre{padding-block:clamp(84px,13vw,180px)}
.grows-centre-h{font-family:var(--display);font-weight:200;
  font-size:clamp(32px,6vw,70px);line-height:1.14;letter-spacing:-.024em;
  color:var(--ivory);max-width:17ch}
.grows-centre-body{margin-top:clamp(36px,4vw,54px);max-width:50ch}
.grows-centre-body p{font-size:17px;line-height:1.76;color:var(--ivory-60);margin-bottom:14px}
.grows-less{list-style:none;margin:clamp(40px,4.5vw,58px) 0;max-width:640px;
  border-top:1px solid var(--hairline-soft)}
.grows-less li{font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(18px,2vw,23px);line-height:1.4;color:var(--ivory-42);
  padding:16px 0 16px 30px;border-bottom:1px solid var(--hairline-soft);position:relative}
.grows-less li::before{content:"less";position:absolute;left:0;top:24px;
  font-family:var(--body);font-style:normal;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-26)}
.grows-centre-line{font-family:var(--display);font-weight:300;
  font-size:clamp(23px,3.2vw,38px);line-height:1.34;letter-spacing:-.014em;
  color:var(--ivory-60);max-width:24ch;margin-top:clamp(30px,4vw,46px)}
.grows-centre-line em{font-style:normal;color:var(--gold-bright)}

/* --- relationship context --- */
.grows-rel{list-style:none;margin:26px 0 28px;display:grid;
  grid-template-columns:1fr 1fr;gap:2px 32px}
.grows-rel li{position:relative;padding-left:24px;margin-bottom:11px;
  font-size:16px;color:var(--ivory-80)}
.grows-rel li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--gold);opacity:.6}

/* --- refusals --- */
.grows-nots{margin-top:clamp(40px,4.6vw,58px);border-top:1px solid var(--hairline-soft)}
.gn{display:grid;grid-template-columns:minmax(280px,42%) 1fr;gap:clamp(18px,3vw,44px);
  align-items:baseline;padding:clamp(22px,2.6vw,30px) 0;
  border-bottom:1px solid var(--hairline-soft)}
.gn h3{font-family:var(--display);font-weight:300;font-size:clamp(19px,2vw,24px);
  line-height:1.3;color:var(--ivory)}
.gn p{font-size:16px;line-height:1.7;color:var(--ivory-60)}
.grows-silence{margin-top:clamp(34px,4vw,50px);font-family:var(--display);font-weight:300;
  font-size:clamp(21px,2.6vw,29px);line-height:1.36;color:var(--gold-bright);max-width:28ch}

/* --- ten years --- */
.grows-ten-list{list-style:none;margin:28px 0 0;max-width:56ch}
.grows-ten-list li{position:relative;padding-left:28px;padding-bottom:18px;
  font-size:17px;line-height:1.72;color:var(--ivory-80)}
.grows-ten-list li::before{content:"";position:absolute;left:0;top:13px;width:14px;height:1px;
  background:var(--gold);opacity:.55}

/* ---------- How Hippora Grows: responsive ------------------------------- */
@media (max-width:900px){
  .ga{grid-template-columns:48px 1fr;row-gap:8px}
  .ga-n{grid-row:1}
  .ga h3,.ga p{grid-column:2}
  .grows-three{grid-template-columns:1fr;gap:0}
  .grows-three::before,.grows-three::after{display:none}
  .g3{padding-block:26px;border-bottom:1px solid var(--hairline-soft)}
  .g3:first-child{padding-top:0}
  .g3:last-child{border-bottom:none;padding-bottom:0}
  .gs{grid-template-columns:1fr;row-gap:6px}
  .gn{grid-template-columns:1fr;row-gap:8px}
  .grows-rel{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grows-hero{padding-block:120px 0}
  .grows-loop li{padding-left:56px}
  .grows-loop li::after{left:11px}
  .grows-loop-back{margin-left:56px}
  .grows-pull{padding-left:20px;max-width:none}
  .grows-big{max-width:none}
  .grows-centre-h{max-width:none}
  .grows-centre-line{max-width:none}
  .grows-less li{padding-left:0;padding-top:30px}
  .grows-less li::before{top:10px}
}
@media (prefers-reduced-motion:reduce){
  .grows *{transition:none!important;animation:none!important}
}

/* --- depth links into How Hippora Grows ---------------------------------- */
.idx-after,.depth-link{margin-top:clamp(28px,3vw,40px);font-size:15.5px}
.idx-after a,.depth-link a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(240,168,46,.28);padding-bottom:2px;
  transition:border-color .4s ease}
.idx-after a:hover,.depth-link a:hover{border-bottom-color:var(--gold)}
.idx-after a::after,.depth-link a::after{content:" \2192";opacity:.7}

/* --- live store badge -------------------------------------------------- */
/* The App Store badge is a real link now, so it gets affordance the Google
   Play placeholder does not: full opacity mark, brighter label, hover lift. */
a.badge.is-live{text-decoration:none;cursor:pointer;
  border-color:rgba(240,168,46,.34);
  transition:border-color .4s ease,transform .4s ease,background .4s ease}
a.badge.is-live:hover{border-color:var(--gold);transform:translateY(-2px)}
a.badge.is-live small{color:var(--ivory-60)}
a.badge.is-live b{color:var(--ivory)}
.ribbon.is-live i{background:var(--gold-bright)}
.ribbon.is-live{color:var(--gold-bright);border-color:rgba(254,213,84,.32)}

/* --- blog post CTA row -------------------------------------------------- */
/* The App Store badge is the primary action here, so the row centres the two
   together and matches their heights. The badge is taller than a button by
   default because it carries two lines of text, so the button is nudged rather
   than the badge squashed. */
.post-cta-row{display:flex;gap:14px;justify-content:center;align-items:stretch;
  flex-wrap:wrap;margin-top:30px}
.post-cta-row .store{gap:14px;margin:0}
.post-cta-row .badge{border-radius:10px}
.post-cta-row .btn-lg{padding-block:0;min-height:100%;align-self:stretch}
@media (max-width:520px){
  .post-cta-row{flex-direction:column;align-items:stretch}
  .post-cta-row .store{justify-content:center}
  .post-cta-row .badge{justify-content:center}
  .post-cta-row .btn-lg{padding-block:15px;min-height:0}
}

/* --- App Store badge, Apple's official treatment -------------------------
   Apple's marketing guidelines require the badge to keep its own identity:
   black field, white mark, white wordmark, thin white keyline. It deliberately
   does NOT take the Hippora card gradient or gold border, so it reads as a
   store badge rather than as a site component. */
a.badge.is-live{
  background:#000;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  padding:9px 18px 10px 15px;
  gap:11px;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:border-color .4s ease,transform .4s ease}
a.badge.is-live::before{display:none}
a.badge.is-live:hover{
  background:#000;
  border-color:rgba(255,255,255,.55);
  transform:translateY(-1px)}
a.badge.is-live svg{opacity:1}
a.badge.is-live:hover svg{opacity:1}
a.badge.is-live small{color:#fff;font-size:9.5px;letter-spacing:.055em;
  text-transform:none;opacity:.92;line-height:1.35;margin-bottom:0}
a.badge.is-live b{color:#fff;font-size:19px;font-weight:400;line-height:1.15;
  letter-spacing:-.01em}

/* --- badge inside the closing block -------------------------------------- */
/* The closing CTA is a badge plus one ghost button. They are different heights
   by nature, so the row aligns on centre and the button matches the badge. */
.closing-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.closing-cta .store{margin:0}
.closing-cta .btn-lg{padding-block:13px}
@media (max-width:520px){
  .closing-cta{flex-direction:column;align-items:stretch}
  .closing-cta .store{justify-content:center}
  .closing-cta .badge{justify-content:center}
}

/* Pricing HTML design integrated into WordPress v1.5.2 */
.hip-pricing-redesign a{text-decoration:none;color:inherit}
.hip-pricing-redesign .hero{min-height:690px;display:grid;grid-template-columns:43% 57%;align-items:center;position:relative}
.hip-pricing-redesign .hero-copy{z-index:2;padding:60px 0}
.hip-pricing-redesign .eyebrow{color:var(--gold);font-size:11px;letter-spacing:4px;text-transform:uppercase;font-weight:700;margin-bottom:32px}
.hip-pricing-redesign h1,.hip-pricing-redesign h2,.hip-pricing-redesign h3,.hip-pricing-redesign .serif{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.035em}
.hip-pricing-redesign h1{font-size:clamp(50px,5.3vw,91px);line-height:1.06;margin:0 0 30px}
.hip-pricing-redesign h1 em,.hip-pricing-redesign h2 em{color:var(--gold);font-weight:400}
.hip-pricing-redesign .lead{color:var(--muted);font-size:18px;line-height:1.85;max-width:510px}
.hip-pricing-redesign .actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:35px}
.hip-pricing-redesign .primary{display:inline-flex;background:linear-gradient(120deg,#f9d064,#efa82c);color:#091725;border-radius:40px;padding:16px 26px;font-size:14px;font-weight:700}
.hip-pricing-redesign .quiet{font-size:14px;border-bottom:1px solid #6e8391;padding-bottom:5px}
.hip-pricing-redesign .art{position:relative;isolation:isolate}
.hip-pricing-redesign .hero .art{width:116%;margin-left:-8%;margin-right:-8%}
.hip-pricing-redesign .art img{display:block;width:100%;height:auto;mask-image:radial-gradient(ellipse 63% 60% at 50% 50%,#000 55%,transparent 99%);-webkit-mask-image:radial-gradient(ellipse 63% 60% at 50% 50%,#000 55%,transparent 99%)}
.hip-pricing-redesign .art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--bg),transparent 13%,transparent 87%,var(--bg));opacity:.55}
.hip-pricing-redesign .rule{border-top:1px solid var(--line)}
.hip-pricing-redesign .statement{text-align:center;padding:95px 0 105px}
.hip-pricing-redesign .statement .eyebrow{margin-bottom:23px}
.hip-pricing-redesign .statement h2{font-size:clamp(36px,4vw,62px);max-width:900px;margin:0 auto 24px;line-height:1.2}
.hip-pricing-redesign .statement p{max-width:680px;margin:auto;color:var(--muted);line-height:1.8}
.hip-pricing-redesign .feature{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4%;padding:65px 0}
.hip-pricing-redesign .feature .art{margin:-25px -9%}
.hip-pricing-redesign .feature.reverse .art{order:2}
.hip-pricing-redesign .feature h2{font-size:clamp(40px,4.3vw,68px);line-height:1.12;margin:0 0 24px}
.hip-pricing-redesign .feature p{color:var(--muted);font-size:17px;line-height:1.9;max-width:470px}
.hip-pricing-redesign .more{display:inline-block;margin-top:22px;color:var(--gold);font-size:14px;border-bottom:1px solid #a77d36;padding-bottom:9px}
.hip-pricing-redesign .interlude{padding:90px 0;text-align:center;background:radial-gradient(ellipse at center,#0d2a3a 0%,var(--bg) 70%)}
.hip-pricing-redesign .interlude h2{font-size:clamp(38px,4.5vw,70px);max-width:900px;margin:0 auto 22px}
.hip-pricing-redesign .interlude p{color:var(--muted);max-width:680px;line-height:1.8;margin:0 auto 28px}
.hip-pricing-redesign .mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:28px 0 100px}
.hip-pricing-redesign .mini{border:1px solid #294354;background:#0a2130;border-radius:18px;padding:32px;min-height:220px}
.hip-pricing-redesign .mini b{color:var(--gold);font-size:11px;letter-spacing:3px}
.hip-pricing-redesign .mini h3{font-size:29px;margin:22px 0 10px}
.hip-pricing-redesign .mini p{font-size:14px;line-height:1.8;color:var(--muted)}
.hip-pricing-redesign .final{padding:110px 0 125px;text-align:center;border-top:1px solid var(--line)}
.hip-pricing-redesign .final h2{font-size:clamp(42px,5vw,80px);margin:10px auto 30px;max-width:850px}
.hip-pricing-redesign .final p{color:var(--muted);margin-bottom:35px}
@media (max-width:900px){.hip-pricing-redesign #menu{display:block;border:0;background:transparent;color:var(--ink);font-size:27px}
.hip-pricing-redesign .hero{display:flex;flex-direction:column;min-height:0}
.hip-pricing-redesign .hero-copy{order:1;padding:10px 0 70px}
.hip-pricing-redesign .hero .art{order:0;width:calc(100% + 60px);margin:10px -30px -10px}
.hip-pricing-redesign .hero h1{font-size:clamp(47px,10vw,75px)}
.hip-pricing-redesign .feature,.hip-pricing-redesign .feature.reverse{display:flex;flex-direction:column;gap:0;padding:30px 0 75px}
.hip-pricing-redesign .feature .art,.hip-pricing-redesign .feature.reverse .art{order:0;width:calc(100% + 50px);margin:0 -25px}
.hip-pricing-redesign .feature .copy,.hip-pricing-redesign .feature.reverse .copy{order:1}
.hip-pricing-redesign .mini-grid{grid-template-columns:1fr}
.hip-pricing-redesign .statement{padding:70px 0}
.hip-pricing-redesign .lead{font-size:16px}
.hip-pricing-redesign .feature h2{font-size:45px}}
@media (max-width:480px){.hip-pricing-redesign .hero .art{margin-top:0}
.hip-pricing-redesign .eyebrow{letter-spacing:3px}
.hip-pricing-redesign .feature .art{margin-top:0}
.hip-pricing-redesign .mini{min-height:0}}
@media (prefers-reduced-motion:reduce){.hip-pricing-redesign html{scroll-behavior:auto}}
.hip-pricing-redesign .page-hero{display:grid;grid-template-columns:47% 53%;min-height:530px;align-items:center;padding:45px 0 35px;gap:1%}
.hip-pricing-redesign .page-hero h1{font-size:clamp(47px,5vw,80px)}
.hip-pricing-redesign .page-hero .art{margin:0 -7%}
.hip-pricing-redesign .breadcrumbs{font-size:12px;color:#9aabb6;margin-top:28px}
.hip-pricing-redesign .breadcrumbs a{color:var(--gold)}
.hip-pricing-redesign .editorial{max-width:1000px;margin:0 auto;padding:30px 0 100px}
.hip-pricing-redesign .editorial section{border-top:1px solid var(--line);padding:50px 0}
.hip-pricing-redesign .editorial h2{font-size:clamp(33px,3.3vw,51px);margin:0 0 24px}
.hip-pricing-redesign .editorial h3{font-size:28px;margin:22px 0}
.hip-pricing-redesign .editorial p,.hip-pricing-redesign .editorial li{font-size:17px;line-height:1.85;color:var(--muted)}
.hip-pricing-redesign .editorial p{max-width:850px}
.hip-pricing-redesign .editorial strong,.hip-pricing-redesign .editorial b{color:var(--ink)}
.hip-pricing-redesign .editorial ul{padding-left:24px}
.hip-pricing-redesign .editorial li{margin:9px 0}
.hip-pricing-redesign .editorial details{border-bottom:1px solid var(--line);padding:20px 0}
.hip-pricing-redesign .editorial summary{cursor:pointer;font-size:20px}
.hip-pricing-redesign .editorial .a p{font-size:15px}
.hip-pricing-redesign .plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:30px 0 50px}
.hip-pricing-redesign .plan{padding:35px;border:1px solid var(--line);border-radius:20px;background:#0a2131}
.hip-pricing-redesign .plan h2{font-size:38px}
.hip-pricing-redesign .plan .price{font:52px Georgia,serif;color:var(--gold)}
.hip-pricing-redesign .plan p,.hip-pricing-redesign .plan li{color:var(--muted);line-height:1.75}
.hip-pricing-redesign .section-art{max-width:960px;margin:10px auto 35px}
.hip-pricing-redesign .section-art img{width:100%;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,black 50%,transparent 99%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%,black 50%,transparent 99%)}
.hip-pricing-redesign .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hip-pricing-redesign .blog-tile{border:1px solid var(--line);padding:28px;border-radius:16px;background:#0b2130}
.hip-pricing-redesign .blog-tile h3{font-size:26px}
.hip-pricing-redesign .blog-tile p{color:var(--muted);line-height:1.7}
.hip-pricing-redesign .page-links{display:flex;gap:18px;flex-wrap:wrap;margin:30px 0}
.hip-pricing-redesign .page-links a{border-bottom:1px solid var(--gold);padding-bottom:8px;color:var(--gold)}
@media (max-width:900px){.hip-pricing-redesign .page-hero{display:flex;flex-direction:column-reverse;min-height:0;gap:0}
.hip-pricing-redesign .page-hero .art{width:calc(100% + 40px);margin:0 -20px}
.hip-pricing-redesign .page-hero h1{font-size:clamp(44px,9vw,70px)}
.hip-pricing-redesign .plan-grid,.hip-pricing-redesign .blog-grid{grid-template-columns:1fr}
.hip-pricing-redesign .editorial section{padding:38px 0}
.hip-pricing-redesign .editorial{padding-bottom:60px}}

/* Pricing: use site's original dark background, not an isolated HTML shell. */
.hip-pricing-redesign{max-width:1180px;margin:0 auto;padding:65px clamp(20px,4vw,55px) 100px;color:#f5eee3;background:#061827}
.hip-pricing-redesign .page-hero{margin-top:10px}
.hip-pricing-redesign .plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.hip-pricing-redesign .plan{background:#0a2131;border:1px solid #254050;border-radius:20px;padding:35px}
.hip-pricing-redesign .editorial{max-width:1000px;margin:auto}
.hip-pricing-redesign .editorial section{border-top:1px solid #254050;padding:50px 0}
.hip-pricing-redesign .art img{max-width:100%;height:auto}
.menu-overlay .mcta{align-self:center!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;justify-content:center!important}
@media(max-width:900px){.hip-pricing-redesign{padding:35px 22px 70px}.hip-pricing-redesign .plan-grid{grid-template-columns:1fr}.hip-pricing-redesign .page-hero{display:flex;flex-direction:column-reverse}.hip-pricing-redesign .page-hero .art{width:100%;margin:0}.hip-pricing-redesign .page-hero h1{font-size:clamp(42px,9vw,70px)}}

/* v1.5.3: pricing shares the site's continuous background; no boxed shell. */
body.page-template-page-pricing,body.page-template-page-pricing-php{background-color:#061827;}
.hip-pricing-redesign{width:100%;max-width:none;margin:0;padding:65px max(28px,calc((100vw - 1120px)/2)) 100px;background:transparent!important;box-sizing:border-box;}
.hip-pricing-redesign .page-hero .art{margin:0;min-width:0;}
.hip-pricing-redesign .page-hero .art img{display:block;width:100%;height:auto;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 66% 65% at 50% 50%,#000 48%,transparent 100%);mask-image:radial-gradient(ellipse 66% 65% at 50% 50%,#000 48%,transparent 100%);}
@media(max-width:900px){.hip-pricing-redesign{padding:35px 22px 70px;}.hip-pricing-redesign .page-hero .art{width:100%;margin:0;}}

/* v1.5.5: mobile hero actions and menu footer alignment */
.menu-overlay .legalrow{justify-content:center;text-align:center;width:100%;margin-left:auto;margin-right:auto;}
.menu-overlay .mcta{display:flex;width:max-content;max-width:calc(100% - 32px);align-self:center!important;margin:28px auto 12px!important;justify-content:center;text-align:center;}
@media(max-width:900px){
 .hc-site .hero .actions,.hc-site .page-hero .actions,.hip-pricing-redesign .page-hero .actions{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;}
 .hc-site .hero .actions .primary,.hc-site .page-hero .actions .primary,.hip-pricing-redesign .page-hero .actions .primary{margin-left:auto!important;margin-right:auto!important;text-align:center!important;justify-content:center!important;}
 .menu-overlay .legalrow{gap:14px 20px;padding:0 10px;}
}
@media(max-width:600px){
 .hc-site .hero .actions,.hc-site .page-hero .actions{flex-direction:column!important;}
 .menu-overlay .mcta{width:min(100%,320px);box-sizing:border-box;}
}

/* v1.5.5: mobile hero actions and menu footer alignment */
.menu-overlay .legalrow{justify-content:center;text-align:center;width:100%;margin-left:auto;margin-right:auto;}
.menu-overlay .mcta{display:flex;width:max-content;max-width:calc(100% - 32px);align-self:center!important;margin:28px auto 12px!important;justify-content:center;text-align:center;}
@media(max-width:900px){
 .hc-site .hero .actions,.hc-site .page-hero .actions,.hip-pricing-redesign .page-hero .actions{display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important;}
 .hc-site .hero .actions .primary,.hc-site .page-hero .actions .primary,.hip-pricing-redesign .page-hero .actions .primary{margin-left:auto!important;margin-right:auto!important;text-align:center!important;justify-content:center!important;}
 .menu-overlay .legalrow{gap:14px 20px;padding:0 10px;}
}
@media(max-width:600px){
 .hc-site .hero .actions,.hc-site .page-hero .actions{flex-direction:column!important;}
 .menu-overlay .mcta{width:min(100%,320px);box-sizing:border-box;}
}

/* v1.5.6: desktop homepage CTA follows the centered hero copy. */
@media (min-width:901px){
  .hc-site .hero .hero-copy .actions{display:flex!important;width:100%!important;justify-content:center!important;align-items:center!important;text-align:center!important;margin-left:auto!important;margin-right:auto!important;}
  .hc-site .hero .hero-copy .actions .primary{margin-left:auto!important;margin-right:auto!important;}
}
/* Contact: keep both columns aligned to one top edge, without altering other split layouts. */
.hip-contact-layout{align-items:start!important;gap:clamp(32px,5vw,80px)!important;}
.hip-contact-layout > .copy,.hip-contact-layout > .media{min-width:0;align-self:start!important;margin-top:0!important;padding-top:0!important;}
.hip-contact-layout > .copy > h2{margin-top:0!important;}
.hip-contact-layout > .media > .plate{margin-top:0!important;}
.hip-contact-layout .form{width:100%;max-width:none;box-sizing:border-box;}
.hip-contact-layout .form .frow{grid-template-columns:repeat(2,minmax(0,1fr));}
.hip-contact-layout .hip-contact-appstore{display:flex;justify-content:center;align-items:center;width:100%;margin-top:24px;}
.hip-contact-layout .hip-contact-appstore > *{margin-left:auto!important;margin-right:auto!important;}
@media(max-width:800px){
 .hip-contact-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:36px!important;}
 .hip-contact-layout .form .frow{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:480px){.hip-contact-layout .form .frow{grid-template-columns:minmax(0,1fr);}}

/* v1.5.7 — Contact: deliberate two-column symmetry. */
@media (min-width: 769px) {
  .hip-contact-layout {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:clamp(36px,5vw,72px)!important;
  }
  .hip-contact-layout > .copy,
  .hip-contact-layout > .media {
    width:100%;min-width:0;
  }
  .hip-contact-layout > .media {
    display:flex;flex-direction:column;
    padding-top:clamp(128px,12vw,155px)!important;
  }
  .hip-contact-layout > .media > .plate {width:100%;box-sizing:border-box;}
  .hip-contact-layout .hip-contact-appstore {
    display:flex!important;align-items:center;justify-content:center!important;
    margin:24px auto 0!important;width:100%;
  }
}
.hip-contact-layout .form > button[type="submit"] {
  justify-self:center!important;
  margin-inline:auto!important;
  min-width:170px;
}
.hip-contact-layout .form-note {text-align:center;}
.hip-contact-layout .hip-contact-appstore,
.hip-contact-layout .hip-contact-appstore a {text-align:center;}
@media(max-width:768px) {
  .hip-contact-layout > .media {padding-top:0!important;}
  .hip-contact-layout .hip-contact-appstore {justify-content:center!important;}
}

/* v1.5.14: founder feature on About, within existing visual language */
.editorial .hip-founder-spotlight{margin:30px 0;padding:clamp(30px,5vw,68px);border:1px solid rgba(222,169,69,.35);border-radius:18px;background:linear-gradient(135deg,rgba(222,169,69,.10),rgba(222,169,69,.015) 65%);}
.editorial .hip-founder-spotlight h2{font-size:clamp(38px,4.5vw,65px);line-height:1.12;margin:20px 0 26px;}
.editorial .hip-founder-spotlight h2 em{color:#e6aa39;}
.editorial .hip-founder-spotlight .hip-founder-lead{font-size:clamp(20px,2.3vw,27px);line-height:1.5;color:#f4eee3;}
.editorial .hip-founder-spotlight p{max-width:760px;}
.editorial .hip-founder-spotlight .hip-founder-cta{display:inline-flex;align-items:center;gap:16px;margin-top:20px;padding:15px 25px;background:#eeb43f;color:#061929;border-radius:40px;font-weight:700;text-decoration:none;}
.editorial .hip-founder-spotlight .hip-founder-cta:hover{background:#ffd36a;}
@media(max-width:600px){.editorial .hip-founder-spotlight{margin:20px 0;padding:27px 23px;}.editorial .hip-founder-spotlight .hip-founder-cta{width:100%;justify-content:center;}}