/* Mixture (9 Nov 2026). Layered after circles.css + theme-mf.css + theme-mfnavy.css + theme-mfnw.css.
   Base: Manifest navy and white (ruled nav, buttons, statement band, FAQ, link rows, footer).
   Colours: Westbridge / Bexley navy #0D1B3E and white, with cream and light blue here and there.
   Type: Westbridge / Bexley upright EB Garamond headings, label above; second line in blue italic (Circles / SydeDoor accent).
   Sections: rituals = Bexley ruled rows (visual always right); what you leave with = SydeDoor-style ledger;
   beyond = Bexley / Manifest ruled table; how a circle works = Westbridge. Three hero options below. */
:root{
  --navy:#0D1B3E;--navy-2:#0A1631;--navy-3:#16274F;
  --acc:#2F5BEA;--sky:#B9D7EC;--sky-2:#D3E6F4;--ice:#EEF3FA;--mist:#F5F7FA;
  --gut:40px;--frame:max(0px,calc(50% - 640px));
  --fl:rgba(13,27,62,.14)
}
@media (max-width:1040px){:root{--gut:28px}}
@media (max-width:680px){:root{--gut:18px}}

/* One width for every block, nav aside: 1280 outer, 40 gutter */
.wrap{max-width:1280px;padding-left:var(--gut);padding-right:var(--gut)}
section{padding:clamp(80px,9vw,124px) 0}
.mf-next{padding:0}

/* White sections: Westbridge solid tones */
section:not(.hx):not(.mf-band):not(.ab-quote):not(.close):not(#beyond):not(.page-head):not(.ab-hero):not(.nf),.mf-next{
  --ink:#0D1B3E;--ink-2:#3D4864;--muted:#7C849A;--line:rgba(13,27,62,.12);--alt:#F5F7FA
}
section:not(.hx):not(.mf-band):not(.ab-quote):not(.close):not(#beyond):not(.page-head):not(.ab-hero):not(.nf).alt{--bg:#F5F7FA;background:#F5F7FA}

/* ---------- Type: upright serif line one, blue italic line two ---------- */
h1,h2,h3{letter-spacing:-.018em}
h1 em,h2 em,h3 em,.lead em,.rit-lead em,.rr-lead em{font-style:italic}
/* One italic blue everywhere (the "stay yours" blue), on white and on navy */
h1 em,h2 em,h3 em,.lead em,.rit-lead em,.rr-lead em,.pq em,.pq2 em,.ft-say em,.aha em,.say em,.big em,.sub em,.mf-say em{color:var(--acc)!important}
.st{border-bottom:0;padding-bottom:0;margin-bottom:clamp(44px,5vw,64px);align-items:flex-end}
.st > div{display:flex;flex-direction:column}
.st > div > .mono{order:-1;margin:0 0 18px;font-family:var(--sans);font-size:13px;color:var(--muted);max-width:none}
.st h2{font-style:normal;font-size:clamp(38px,4.6vw,64px);line-height:1.04;color:var(--ink)}
.st h2 span{display:block;font-style:italic;color:var(--acc)}
.st .num{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;line-height:1;color:var(--muted);opacity:1}
.st .num::before{content:'('}.st .num::after{content:')'}
.rit-lead{font-size:clamp(22px,2.2vw,30px)}
.fsplit .side h2 em{font-style:italic;color:var(--acc)!important}
.fsplit .side > .mono{font-size:13px}

.ab-quote .pq em,.close h2 em,.ft-say em,.privacy h3 em,.fam-out .aha em{font-style:italic}

/* ---------- Statement band: a touch of light blue ---------- */
.mf-band{background:var(--navy)}
.mf-say{font-size:clamp(28px,3vw,44px)}

/* ---------- Who: ruled cells, square tags ---------- */
.tags span{border-radius:2px!important}
.tags span.more{border-style:dashed!important}
.match4{border-color:var(--line)}
.match4 b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;margin-bottom:6px}
.match4 li:nth-child(1) i{background:var(--navy)}
.match4 li:nth-child(2) i{background:var(--sky)}
.match4 li:nth-child(3) i{background:var(--acc)}
.match4 li:nth-child(4) i{background:var(--ice);box-shadow:inset 0 0 0 1px var(--navy)}
.who-v{border-radius:2px!important}

/* ---------- Bexley frame lines, used now and then (hero C, stats, rituals, beyond) ---------- */
.framed{position:relative}
.framed::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent var(--frame),var(--fl) var(--frame),var(--fl) calc(var(--frame) + 1px),transparent calc(var(--frame) + 1px),transparent calc(100% - var(--frame) - 1px),var(--fl) calc(100% - var(--frame) - 1px),var(--fl) calc(100% - var(--frame)),transparent calc(100% - var(--frame)))}
.framed.on-navy{--fl:rgba(255,255,255,.12)}

/* ---------- Rituals: Bexley ruled rows, visual always on the right ---------- */
#rituals .rstack{gap:0;margin:0 calc(-1 * var(--gut));border-bottom:1px solid var(--line)}
#rituals .rrow,#rituals .rrow.flip{grid-template-columns:.8fr 1.2fr;gap:0;align-items:stretch;background:#fff;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;padding:0;box-shadow:none;overflow:visible}
#rituals .rrow .rr-t{order:0;padding:clamp(36px,4vw,56px) var(--gut);border-right:1px solid var(--line);justify-content:center}
#rituals .rrow .rr-v{order:1;margin:clamp(28px,3vw,44px) var(--gut);background:var(--mist)!important;border:1px solid var(--line)!important;border-radius:0!important;align-self:center}
#rituals .rr-n{font-size:clamp(64px,6vw,88px);color:var(--sky);opacity:1}
#rituals .rr-t > .mono.blue{color:var(--muted)}
#rituals .rrow h3{font-size:clamp(34px,3.4vw,48px)}
#rituals .rr-t li::before{color:var(--acc)}
#rituals .rr-v .kc,#rituals .rr-v .col,#rituals .rr-v .pl-sum div,#rituals .rr-v .bench-v,#rituals .rr-v .swap div,#rituals .rr-v .commit,#rituals .pill,#rituals .bm-bar,#rituals .bm-bar i{border-radius:0!important}
#rituals .rr-v .pl-sum b{color:var(--navy)}
#rituals .bm-bar i,#rituals .bm-key i{background:var(--navy)}
#rituals .bm-bar em,#rituals .bm-key em{background:var(--acc);border-color:var(--acc)}
#rituals .privacy{border-radius:0!important;background:var(--navy)!important;border:0!important;color:#fff;--ink:#fff;--ink-2:rgba(255,255,255,.8);margin-top:40px}
#rituals .privacy h3{color:#fff}
#rituals .privacy li::before{color:var(--sky)}

/* ---------- Beyond the monthly session: Westbridge navy band, colourful type pills ---------- */
#beyond{--bg:#0D1B3E;--alt:#16274F;--sheet:#16274F;--ink:#FFFFFF;--ink-2:rgba(255,255,255,.72);--muted:rgba(255,255,255,.48);--line:rgba(255,255,255,.12);background:#0D1B3E;color:var(--ink)}
#beyond .st h2{color:#fff}
#beyond .db-r:hover{background:#16274F}
#beyond .arrow-link{color:#fff}
#beyond .pill{border-radius:4px}

/* ---------- What you leave with: SydeDoor-style ledger ---------- */
#gain .ledger{border-top:1px solid var(--navy)}
#gain .lg-h span:last-child{color:var(--acc)}
#gain .lg-k i{color:var(--acc);font-size:22px}
#gain .lg-b{text-decoration-color:rgba(124,132,154,.6)}
#gain .lg-a{font-size:clamp(22px,2.3vw,30px)}
#gain .lg-r:hover .lg-a{color:var(--acc)}
#gain .lg-r{border-bottom-color:rgba(13,27,62,.12)}
#gain .indep{background:var(--ice)!important;border:1px solid rgba(13,27,62,.08)!important;border-radius:2px!important;margin-top:40px}
#gain .indep .mono.blue{color:var(--acc)}

/* ---------- How a circle works: Westbridge ---------- */
#format .ring-card{border-radius:4px!important;background:#fff!important;box-shadow:none!important}
#format .ring li.me{background:none;border-color:transparent}
#format .ring li.me i{background:var(--btn,var(--acc));border-color:var(--btn,var(--acc));color:#fff}
#format .ring-card .ring .core{background:var(--ice)}
#format .ring .core b{color:var(--navy)}
#format .nums{border-top-color:var(--line)}
#format .nums b{color:var(--acc);font-style:italic}
#format .nums h3{font-size:26px}

/* ---------- FAQ, link rows, close, footer: Manifest ---------- */
.faq details{border-radius:2px!important}
.mf-rows{max-width:1280px;margin:0 auto}
.mf-rows a{padding-left:var(--gut);padding-right:var(--gut)}
.mf-rows .ic1{background:var(--navy)}.mf-rows .ic2{background:var(--acc)}.mf-rows .ic3{background:var(--sky);box-shadow:inset -12px 0 0 #fff}
.close{background:var(--navy)}
.ft{background:var(--navy-2)}

/* ====================== HEADERS ====================== */
.hx{position:relative;display:flex;flex-direction:column;color:#fff;overflow:hidden;background:var(--navy);border-top:0;padding:0;min-height:calc(100vh - 57px);min-height:calc(100svh - 57px)}
.hx video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 40%;transform:scaleX(-1)}
.hx .wrap{position:relative;z-index:2;width:100%}
.hx h1{color:#fff;font-weight:400;text-shadow:none}
.hx h1 em{font-style:italic}
.hx .btn{border-radius:2px;font-size:14px;padding:12px 18px;background:var(--sky);border-color:var(--sky);color:var(--navy)}
.hx .btn:hover{background:var(--sky-2);border-color:var(--sky-2);color:var(--navy)}
.hx .btn.ghost{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.hx .btn.ghost:hover{background:#fff;border-color:#fff;color:var(--navy)}
.hx .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hw-chip{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);padding:5px 10px;border-radius:2px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hw-chip:hover{background:rgba(255,255,255,.14)}
.hw-chip i{width:6px;height:6px;border-radius:50%;background:var(--sky)}

/* A + B: Westbridge. Full-bleed footage, small intro, big headline */
.hero-w::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,17,40,.82) 0%,rgba(8,17,40,.55) 40%,rgba(8,17,40,.15) 75%),linear-gradient(0deg,rgba(8,17,40,.85) 0%,rgba(8,17,40,0) 45%)}
.hero-w video{filter:saturate(.75) contrast(1.05)}
.hero-w .wrap{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding-top:clamp(48px,9vh,96px);padding-bottom:clamp(36px,6vh,64px)}
.hw-top{max-width:440px}
.hero-w .sub{font-size:15.5px;line-height:1.6;max-width:440px;margin:18px 0 22px;color:rgba(255,255,255,.84);font-weight:300}
.hero-w h1{font-size:clamp(48px,min(7.4vw,13vh),124px);line-height:.98;letter-spacing:-.02em}

/* B: headline first, sub-heading underneath */
.hero-w2 .wrap{justify-content:space-between}
.hw-low{display:flex;flex-direction:column;gap:clamp(20px,3vh,32px)}
.hw-row{display:grid;grid-template-columns:minmax(0,520px) auto;justify-content:space-between;align-items:end;gap:24px 48px;padding-top:clamp(18px,2.6vh,26px);border-top:1px solid rgba(255,255,255,.22)}
.hero-w2 .sub{margin:0;max-width:520px;font-size:16.5px}
.hero-w2 .hw-meta{font-size:13px;color:rgba(255,255,255,.62)}

/* C: Bexley. Navy, copy left, footage fills the right half to the frame line */
.hero-bx .wrap{flex:1;display:flex;align-items:center;padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(56px,9vh,110px)}
.hero-bx video{left:50%;right:auto;width:calc(50% - var(--frame));object-position:35% 50%}
.hero-bx::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.12);z-index:3}
.hb-body{max-width:calc(50% - var(--gut) - 48px)}
.hb-body .hw-chip{margin-bottom:28px}
.hero-bx h1{font-size:clamp(44px,min(5.2vw,9.5vh),84px);line-height:1.02}
.hero-bx .sub{color:rgba(255,255,255,.76);font-size:17px;max-width:520px;margin:clamp(18px,3vh,28px) 0 clamp(22px,3.4vh,32px);font-weight:300}
.hero-bx .founding{margin-top:22px;font-size:13px;color:rgba(255,255,255,.55)}
.bx-stats{background:#fff;padding:0;border-top:0;border-bottom:1px solid var(--line)}
.bx-stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0}
.bx-stats .wrap > div{padding:clamp(32px,3.6vw,50px) 24px;text-align:center;border-left:1px solid var(--line)}
.bx-stats .wrap > div:first-child{border-left:0}
.bx-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,3.8vw,56px);line-height:1;color:var(--navy)}
.bx-stats b em{color:var(--acc)}
.bx-stats span{display:block;margin-top:10px;font-size:13px;color:#7C849A}

@media (prefers-reduced-motion:no-preference){
  @keyframes hx-in{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
  @keyframes hx-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
  .hx .hw-chip{animation:hx-in .9s cubic-bezier(.16,1,.3,1) .05s both}
  .hx h1{animation:hx-in 1.1s cubic-bezier(.16,1,.3,1) .18s both}
  .hx .sub,.hx .hw-row{animation:hx-in .9s cubic-bezier(.16,1,.3,1) .32s both}
  .hx .ctas{animation:hx-in .9s cubic-bezier(.16,1,.3,1) .44s both}
  .hx .founding{animation:hx-in .9s cubic-bezier(.16,1,.3,1) .54s both}
  .hero-w .hw-top .sub{animation-delay:.15s}.hero-w .hw-top .ctas{animation-delay:.25s}
  .hero-w > .wrap > h1{animation-delay:.38s}
  .hero-bx video{animation:hx-wipe 1.3s cubic-bezier(.65,0,.35,1) .1s both}
  .rv-on .rv{transition-duration:.8s;transition-timing-function:cubic-bezier(.16,1,.3,1)}
}

@media (max-width:1040px){
  .hero-bx{min-height:0}
  .hero-bx video{position:relative;inset:auto;left:auto;right:auto;width:100%;height:auto;aspect-ratio:16/10;order:-1}
  .hero-bx::before{display:none}
  .hb-body{max-width:none}
  .hero-bx .wrap{padding-top:40px;padding-bottom:56px}
  .bx-stats .wrap{grid-template-columns:1fr 1fr}
  .bx-stats .wrap > div:nth-child(3){border-left:0}
  .bx-stats .wrap > div:nth-child(n+3){border-top:1px solid var(--line)}
  #rituals .rrow,#rituals .rrow.flip{grid-template-columns:1fr}
  #rituals .rrow .rr-t{border-right:0;padding-bottom:8px}
  #rituals .rrow .rr-v{margin-top:16px}
  .hw-row{grid-template-columns:1fr;justify-content:start}
}
@media (max-width:900px){
  #beyond .db{border:0;background:transparent;border-top:1px solid var(--line)}
  #beyond .db-r{grid-template-columns:1fr auto;padding:16px 0;gap:8px 16px}
  #beyond .db-r > *{padding:0;border-right:0}
}
@media (max-width:680px){
  .hero-w::before{background:linear-gradient(0deg,rgba(8,17,40,.92) 0%,rgba(8,17,40,.7) 55%,rgba(8,17,40,.45) 100%)}
  .hero-w h1{font-size:clamp(40px,11.5vw,60px)}
  .hx .nw{white-space:normal}
  .hero-bx h1{font-size:clamp(40px,11vw,56px)}
  #rituals .rrow .rr-v{margin-left:12px;margin-right:12px;padding:12px}
  .st{flex-direction:column;align-items:flex-start;gap:12px}
  .st .num{order:-1}
}

/* Square corners site-wide, to match the ruled Manifest / Bexley look */
.card,.plan,.pc,.eq-c,.m-card,.ph-card,.calc,.b-card,.l-side,.l-page,.letter,.mt,.mt-res,.mt-q,.legal-toc,.ptable,.facts > div,.steps4 > *,.tl-row,.tl,.feat,.over,.chip,.chipx,.collage figure,.collage img,.media .img,.media img,.rr-ph,.ab-grid figure,.pgrid > *,.g3 > *,.g4 > *,.m-grid > *,.m-steps li,.ask,.say,.ring-card,.fam-out,.chk,.privacy,.indep,.ft-status,.who-v,.db,.ledger{border-radius:4px!important}

.path li:last-child span{color:var(--navy)!important}
#format .ring li.me i{color:#fff!important}
.privacy{background:var(--navy)!important;border:0!important;color:#fff;--ink:#fff;--ink-2:rgba(255,255,255,.8)}
.privacy h3{color:#fff}.privacy li::before{color:var(--sky)}
.pl-foot,.pl-foot b{color:#0D1B3E!important}