/* Day with night windows (owner 2026-11-04: "it looks ok, put it here" for the lab site, then "love it, update
   the live website at wix" for cohera.tech). Loaded after site.css: light ground, ink text, gold accents; the
   animations keep a dark frame. Type: Sofia Sans Extra Condensed (display, labels) and Sofia Sans Semi
   Condensed (text), both SIL Open Font License, served from /assets/fonts/ (latin subset). */
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:100 700;font-display:swap;src:url(/assets/fonts/sofia-extra-condensed.woff2) format('woff2')}
@font-face{font-family:'Sofia Sans Semi Condensed';font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/sofia-semi-condensed.woff2) format('woff2')}

:root{
  --paper:#F3F5F8; --ink:#0B1526; --slate:#3E4C63; --dim:#5A6880; --line:#D9DFE8; --panel:#FFFFFF; --panel2:#FFFFFF;
  --chip:#E8ECF2; --chip-on:#0B1526; --chip-on-ink:#F3F5F8;
  --gold:#7C5A0B; --gold-bright:#E8B33C; --good:#0E7A47; --good-bg:#E2F2E8; --proj:#5B3A9E; --proj-bg:#EFE8FA;
  --focus:#1F6FEB; --mineral:#0B1526; --plasma:#2B5FA8;
  --disp:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  --sans:'Sofia Sans Semi Condensed','Segoe UI',-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --mono:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  color-scheme:light;
  --gut:clamp(18px,6.5vw,96px);  /* owner 2026-11-04: wider side margins (about 70px at a 1080px window, was 40px) */
}
body{font-size:13.3px;line-height:1.6;font-weight:350}  /* owner 2026-11-04: back to size 10, light and elegant, as in the mockup */
body{padding-bottom:0}

/* ---------- night planes: navy boxes on the day ground (owner 2026-11-04: "more dark navy everywhere, more boxes or
   planes"); the animations, the header and the footer are navy too ---------- */
.welcome,.stage3,.ands,.flow,.scale-tile,.rhythm svg,.ccp-hero,.site-head,.site-foot,
.ctx-card,.two-col .col,.viz,.floor2,.xcard,.helper,.method div,.shift div,.live div,.person,.earn div,.ind-detail,.lens,
.flow-info,.secret,.brandarch > .ba-tier{
  --paper:#060B14; --ink:#E8EFF9; --slate:#C6D4E8; --dim:#8CA0BC; --line:#1B2A44; --panel:#0C1424; --panel2:#101B30;
  --chip:#141A28; --chip-on:#E8B33C; --chip-on-ink:#060B14; --gold:#E8B33C; --good:#2FD583; --good-bg:#0F2A1E; --proj:#C9A6F2; --proj-bg:#241A38;
  --mineral:#EDE7DC; --plasma:#7DB8FF; --focus:#3D9BFF;
  color:var(--ink);
}
.ctx-card,.two-col .col,.viz,.xcard,.helper,.method div,.shift div,.live div,.person,.earn div,.flow-info,.secret{background:var(--panel);border-color:var(--line)}
.brandarch > .ba-tier{background:var(--panel)} .ba-tier .ba-tier{background:var(--panel2)} .ba-tier .ba-tier .ba-tier{background:#141D33}
.site-foot{background:#060B14;box-shadow:0 0 0 100vmax #060B14;clip-path:inset(0 -100vmax -100vmax);margin-top:56px;padding-block:26px 46px;border-top:0}
.ccp-hero{background:radial-gradient(120% 140% at 0% 0%,rgba(232,179,60,.22),rgba(232,179,60,0) 55%),#0A0E1A;border-color:#E8B33C;box-shadow:0 18px 50px -20px rgba(232,179,60,.45)}
.ccp-kick,.ccp-name,.ccp-row svg{color:#E8B33C}
.tag3.us{border-color:#E8B33C}
.welcome{height:clamp(230px,27vw,370px);border-radius:18px;margin-bottom:clamp(22px,3vw,34px)}
.ands{background:radial-gradient(80% 90% at 50% 100%,rgba(232,179,60,.08),rgba(232,179,60,0) 70%),#060B14;border:1px solid #1B2A44;border-radius:18px;padding:clamp(22px,3.4vw,40px) clamp(16px,4vw,48px);max-width:none;gap:12px}
.flip i{font-size:11px}
.and-row{font-family:var(--disp);font-weight:150;font-size:clamp(20px,2.4vw,32px);letter-spacing:0;line-height:1.15}
.rhythm svg{background:radial-gradient(80% 80% at 50% 50%,#101728,#060B14);border:1px solid #1B2A44;border-radius:18px;padding:10px}

/* ---------- header ---------- */
.site-head{background:rgba(6,11,20,.92)}
.mark{font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.3em;color:var(--gold)}
.nav a{font-size:12.5px;font-weight:400;color:var(--slate)}
.nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -1px 0 #E8B33C;border-radius:0}
.nav a:hover{background:transparent;color:var(--ink)}
@media (max-width:900px){.nav{background:rgba(6,11,20,.97)}.nav a{font-size:13.3px}.nav a[aria-current="page"]{box-shadow:none;color:var(--gold)}}

/* ---------- type: slim, tall display; condensed text ---------- */
h1,h2,h3,.big-line,.floor2-big,.quote,.ctx-card .n,.cmp-n,.ledger td.r,.xcard b,.ind-detail h3,.ind-fact,.lens .fig,
.helper .ab,.method b,.road .st2 b,.shift b,.person b,.earn b,.ba-tier > b,.whisper li b,.principles li:before,
.ccp-name,.tag3 .big,.clock3,.result3 .big,.floor2-big{font-family:var(--disp)}
h1{font-weight:150;font-size:clamp(34px,4.4vw,64px);line-height:.98;letter-spacing:-.005em;margin:12px 0 18px;max-width:11em}
.hero h1{font-size:clamp(40px,5.6vw,84px);line-height:.96;max-width:9.5em;margin-top:0}
.h1-intro{font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.06em;color:var(--dim);margin-bottom:16px;line-height:1}
.h1-tag{display:inline}
h2{font-weight:200;font-size:clamp(26px,3vw,42px);line-height:1;letter-spacing:0;margin:0 0 16px;max-width:14em}
h3{font-weight:300;font-size:clamp(16px,1.5vw,20px);letter-spacing:0;line-height:1.1}
.dek{font-family:var(--disp);font-weight:200;font-size:clamp(18px,1.9vw,26px);line-height:1.15;color:var(--slate);max-width:none}
.lead{font-size:13.3px;line-height:1.6;font-weight:350}
.page-hero .lead{font-size:14px}
.note{font-size:11.2px}
.after{font-size:13.3px;font-weight:500}
.big-line{font-weight:150;font-size:clamp(24px,3.2vw,44px);line-height:1;letter-spacing:0;color:var(--gold);margin:22px 0 14px;max-width:14em}
.quote{font-weight:150;font-size:clamp(24px,3vw,40px);line-height:1.02;letter-spacing:0;max-width:14em}
.floor2-big{font-weight:150;font-size:clamp(28px,3.4vw,46px);line-height:1;letter-spacing:0}
.ctx-card .n{font-weight:150;font-size:clamp(40px,4.6vw,66px);line-height:.9;letter-spacing:0}
.cmp-n{font-weight:200;font-size:clamp(22px,2vw,28px);letter-spacing:0}
.ledger td.r{font-weight:200;font-size:clamp(19px,1.9vw,25px);letter-spacing:0}
.xcard b{font-weight:200;font-size:22px;letter-spacing:0;line-height:1.05}
.ind-detail h3{font-size:clamp(20px,2vw,26px);font-weight:200}
.ind-fact{font-weight:200;font-size:clamp(16px,1.6vw,20px);line-height:1.2;letter-spacing:0}
.lens .fig{font-weight:200;font-size:clamp(26px,2.8vw,38px);letter-spacing:0}
.helper .ab{font-weight:300;font-size:21px;letter-spacing:0}
.method b,.road .st2 b,.shift b,.earn b,.ba-tier > b{font-weight:300;font-size:18px;letter-spacing:0}
.person b{font-weight:300;font-size:20px;letter-spacing:0}
.whisper li b{font-weight:300;font-size:clamp(16px,1.6vw,19px);letter-spacing:0}
.principles li:before{font-weight:150;font-size:clamp(36px,3.8vw,54px);letter-spacing:0}
.principles h3{font-size:clamp(18px,1.8vw,22px)}
.tag3 .big{font-weight:300;font-size:18px;letter-spacing:0}
.clock3{font-weight:300;letter-spacing:0}
.result3 .big{font-weight:250;letter-spacing:0}

/* labels: the condensed face in capitals, a little larger than the old mono */
.eyebrow,.sec-t,.ctl .lbl,.viz-t,.xcard .k,.page-hero .num,.loop .node small,.could b,.ledger th,.road .st2 small,
.flow-info .k,.flow-info dt,.shift small,.person small,.earn small,.donut small,.match .lbl,.scale-tile b,.ba-tier > small,
.helper .when,.ccp-kick,.stamp,.ledger td.d,.timeline b,details.eng summary,.rh-list li b,.hint3,.clock3 small,.result3 .k,
.menu-btn,.foot-tag b,.lens .tg button,.bin,.cmp-who small,.cmp-n small,.ledger td.r small{font-size:10.5px;font-weight:500}
.eyebrow{background:transparent;color:var(--gold);padding:0;border-radius:0;letter-spacing:.22em;font-size:11px}
.page-hero .num{font-size:11px;letter-spacing:.22em}
.page-hero .num:after{background:var(--gold-bright)}
.stamp{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.bin{font-size:10px;font-weight:600;letter-spacing:.1em}

/* ---------- surfaces ---------- */
.act{border-top:1px solid var(--line);padding-block:clamp(36px,5vw,64px) 8px;margin-top:clamp(18px,2.6vw,34px)}
.act.first{margin-top:clamp(14px,2vw,24px)}
.ctx-card,.two-col .col,.helper,.method div,.shift div,.person,.earn div,.flow-info,.xcard{border-radius:16px}
.ctx-card{padding:clamp(18px,2.4vw,28px)}
.ctx-card p,.two-col ul,.xcard span,.helper p,.method div > span,.shift span,.live span,.earn p,.person p,.road .st2 span,.secret p{font-size:12.5px}
.ctx-card.us{border-color:rgba(232,179,60,.5)}
.ctx-card.us .n{color:var(--gold)}
.two-col .col{padding:clamp(18px,2.4vw,26px)}
.why{background:var(--panel);border-left-color:var(--gold-bright);font-size:12.5px}
.floor2{background:radial-gradient(90% 120% at 0% 0%,rgba(232,179,60,.12),rgba(232,179,60,0) 60%),var(--panel);border-color:rgba(232,179,60,.6);box-shadow:0 22px 50px -30px rgba(6,11,20,.55)}
.hero-why{border-top:0;padding-top:0;max-width:62ch}
.hero-why p{font-size:12.5px;color:var(--dim)}
.hero-why .hw-k{color:var(--ink);font-weight:500}
.hero-why .hw-k:before{content:"";display:block;width:32px;height:1px;background:var(--gold-bright);margin:14px 0 12px}
.controls{background:transparent;padding:0}
.chips button{background:#fff;font-size:12px;border-radius:999px;min-height:44px;padding:9px 16px}
.samework{background:#fff}
.btn{font-size:12.5px}
.btn.cta,.cta{background:var(--ink);color:var(--paper)}
.btn.cta:hover{background:var(--gold);color:var(--paper)}
.xcard:hover{border-color:#E8B33C;background:var(--panel2)}
.xcard .k,.xcard i{color:var(--gold)}
.ind-list button{background:#fff;font-size:12px}
.ind-list button:hover{border-color:#B8C2D0}
.ind-list button[aria-pressed="true"]{background:#FBF7EC;border-color:var(--gold-bright)}
.ind-detail{background:var(--panel);border-color:rgba(232,179,60,.55)}
.loop .wire i,.road .dot{background:#E8B33C}
.secret{border-color:#B8C2D0}
.lens{background:var(--panel);border-color:rgba(232,179,60,.55)}
.live div{border-left-color:var(--gold-bright)}

/* graphs: squares, rings, bars, queue */
.viz{padding:clamp(18px,2.4vw,26px)}
.cmp-row{border-top-color:var(--line)}
.cell{fill:#1A2740}
.cell.on{fill:#6F7F99}
.cmp-row.us .cell.on{fill:var(--gold-bright)}
.cmp-row.us .cmp-n,.cmp-n.us-t{color:var(--gold)}
.us-share{fill:var(--gold-bright)}
.donut .bg{stroke:var(--line)}
.donut .fg{stroke:var(--gold-bright)}
.donut text{font-family:var(--disp);font-weight:300;font-size:18px}
.donut-arrow{color:var(--dim)}
.speed .bar{background:var(--line)}
.speed .bar i{background:var(--gold-bright)}

/* footer */
.site-foot nav a{font-size:11.5px}
.site-foot .legal{font-size:11px}
.foot-tag{font-size:12.5px}
/* small print inside a display figure stays in the text face */
.lens .fig small,.ledger td.r small,.cmp-n small,.tag3 .big small,.helper .ab small{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:0;text-transform:none}

/* the golden horizon from the day mockup, animated (owner 2026-11-04: "lets use this from the mockup, just animate it") */
.welcome.dawn{background:#060B14}
.dawn i{position:absolute;display:block;pointer-events:none}
.dawn .d-stars{inset:0;background-image:radial-gradient(1.2px 1.2px at 8% 18%,rgba(232,239,249,.8),transparent),radial-gradient(1px 1px at 21% 42%,rgba(232,239,249,.5),transparent),radial-gradient(1.4px 1.4px at 33% 12%,rgba(232,239,249,.7),transparent),radial-gradient(1px 1px at 47% 30%,rgba(232,239,249,.45),transparent),radial-gradient(1.2px 1.2px at 62% 16%,rgba(232,239,249,.75),transparent);animation:d-twinkle 5s ease-in-out infinite alternate}
.dawn .d-stars.s2{background-image:radial-gradient(1px 1px at 74% 38%,rgba(232,239,249,.5),transparent),radial-gradient(1.5px 1.5px at 86% 20%,rgba(232,239,249,.8),transparent),radial-gradient(1px 1px at 93% 46%,rgba(232,239,249,.45),transparent),radial-gradient(1px 1px at 14% 58%,rgba(232,239,249,.35),transparent),radial-gradient(1px 1px at 81% 60%,rgba(232,239,249,.35),transparent),radial-gradient(1.2px 1.2px at 40% 8%,rgba(232,239,249,.6),transparent);animation-duration:7s;animation-delay:-3s}
.dawn .d-glow{left:50%;top:72%;width:110%;aspect-ratio:2.2;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(232,179,60,.42),rgba(232,179,60,.12) 45%,rgba(232,179,60,0) 72%);animation:d-glow 8s ease-in-out infinite}
.dawn .d-rays{left:50%;top:72%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(232,179,60,.09) 0deg .5deg,rgba(232,179,60,0) .5deg 15deg);-webkit-mask:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.6) 30%,transparent 62%);mask:radial-gradient(closest-side,#000 8%,rgba(0,0,0,.6) 30%,transparent 62%);animation:d-spin 120s linear infinite}
.dawn .d-ring{left:50%;top:72%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(232,179,60,.24);transform:translate(-50%,-50%);animation:d-breathe 9s ease-in-out infinite}
.dawn .r1{width:12%} .dawn .r2{width:23%;animation-delay:-1.5s;border-color:rgba(232,179,60,.2)} .dawn .r3{width:36%;animation-delay:-3s;border-color:rgba(232,179,60,.15)} .dawn .r4{width:52%;animation-delay:-4.5s;border-color:rgba(232,179,60,.11)} .dawn .r5{width:70%;animation-delay:-6s;border-color:rgba(232,179,60,.08)}
.dawn .d-wave{left:50%;top:72%;width:2%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,217,120,.6);transform:translate(-50%,-50%);opacity:0;animation:d-wave 7.5s cubic-bezier(.25,.6,.35,1) infinite}
.dawn .w2{animation-delay:2.5s} .dawn .w3{animation-delay:5s}
.dawn .d-below{left:0;right:0;top:72%;bottom:0;background:linear-gradient(180deg,rgba(6,11,20,.25),rgba(6,11,20,.92))}
.dawn .d-horizon{left:4%;right:4%;top:72%;height:1px;overflow:visible;background:linear-gradient(90deg,rgba(232,179,60,0),rgba(232,179,60,.85) 50%,rgba(232,179,60,0))}
.dawn .d-horizon:after{content:"";position:absolute;top:-1px;left:-20%;width:20%;height:3px;border-radius:2px;background:linear-gradient(90deg,rgba(255,236,190,0),rgba(255,236,190,.9),rgba(255,236,190,0));animation:d-sweep 6s ease-in-out infinite}
.dawn .d-core{left:50%;top:72%;width:7px;height:7px;border-radius:50%;background:#FFE7AE;transform:translate(-50%,-50%);box-shadow:0 0 18px 6px rgba(232,179,60,.55),0 0 60px 20px rgba(232,179,60,.18);animation:d-core 3.2s ease-in-out infinite}
@keyframes d-twinkle{from{opacity:.35}to{opacity:1}}
@keyframes d-glow{0%,100%{opacity:.82}50%{opacity:1}}
@keyframes d-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes d-breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.035);opacity:.55}}
@keyframes d-wave{0%{width:2%;opacity:0}10%{opacity:.75}100%{width:76%;opacity:0}}
@keyframes d-sweep{0%{left:-20%}55%,100%{left:100%}}
@keyframes d-core{0%,100%{box-shadow:0 0 18px 6px rgba(232,179,60,.55),0 0 60px 20px rgba(232,179,60,.18)}50%{box-shadow:0 0 26px 9px rgba(232,179,60,.75),0 0 90px 30px rgba(232,179,60,.28)}}
@media (prefers-reduced-motion:reduce){.dawn i,.dawn .d-horizon:after{animation:none}.dawn .d-wave,.dawn .d-horizon:after{display:none}}

/* ---------- phones (owner 2026-11-04: "make sure the mobile version complies") ----------
   Lighthouse's legible-font-sizes audit fails a page when 40% or more of its text is under 12px; Apple's
   typography guidance sets 17pt as the default body size, 11pt as the minimum, and larger for thin custom fonts.
   So on phones: body text 16px at a normal weight, sentences in small print 13.5px, and nothing under 12px. */
@media (max-width:700px){
  body{font-size:16px;font-weight:400}
  .lead,.page-hero .lead,.after,.ctx-card p,.two-col ul,.xcard span,.helper p,.method div > span,.shift span,.live span,
  .earn p,.person p,.road .st2 span,.secret p,.hero-why p,.why,.principles p,.flow-info dd,.ba-tier > p,.whisper li span,
  .rh-list li span,.could ul,.lens .ex,.ccp-side,.timeline span,.ledger td,.loop .node span,.ind-fact{font-size:15px;font-weight:400}
  .note,.viz-cap,.flow-cap,.scale-cap,.uses,.ind-src,details.eng p,details.eng li,.site-foot .legal,.lens .fig small,
  .ledger td.r small,.cmp-n small,.tag3 .big small,.helper .ab small,.result3 .s,.result3 .s.dim,.speed .row,.tag3,.tag3 b,
  .cmp-who b,.samework b,.chips button,.ind-list button,.ip li,.ledger-tools button,.rv-pick button,.site-foot nav a,
  .h1-intro{font-size:13.5px}
  .ccp-line{font-size:15.5px} .ccp-side{font-size:14px}
  .dek{font-size:21px;font-weight:250}
  .eyebrow,.sec-t,.ctl .lbl,.viz-t,.xcard .k,.page-hero .num,.loop .node small,.could b,.ledger th,.road .st2 small,
  .flow-info .k,.flow-info dt,.shift small,.person small,.earn small,.donut small,.match .lbl,.scale-tile b,.ba-tier > small,
  .helper .when,.ccp-kick,.stamp,.ledger td.d,.timeline b,details.eng summary,.rh-list li b,.hint3,.clock3 small,.result3 .k,
  .menu-btn,.foot-tag b,.lens .tg button,.bin,.cmp-who small,.chips button small,.samework small,.tag3 .dim,.tag3 .sub,
  .conf,.flip i,.person .av,.mark,.flow .dept text,.flow .core text,.rhythm text,.queue text{font-size:12px}
  .nav a{font-size:15px}
}