/* Tech Machine AI: brand + "feed the machine" layer. Linked last. Palette: Navy #14234B, Cream #F5F1E8, Cyan #22C3E6, Ink #0B0F1A. */
:root{
  --tm-navy:#14234B;--tm-cream:#F5F1E8;--tm-cyan:#22C3E6;--tm-ink:#0B0F1A;
  --bg:#0B0F1A;--bg2:#0D1428;--panel:#101A38;--panel-paid:#14234B;
  --panel-line:rgba(120,150,225,.24);--panel-line-paid:rgba(120,150,225,.40);--vi:#4A6BC8;
  --hair:rgba(245,241,232,.10);--hair2:rgba(245,241,232,.16);
  --u-line:#222F58;
  --glow:radial-gradient(closest-side,rgba(34,195,230,.10),rgba(20,35,75,.35) 55%,transparent);
}
html,body{background:#0B0F1A}
.site-head,.hero{--bg:#0B0F1A}
.site-head{background:rgba(11,15,26,.82)}
main>section:not(.hero),body>section:not(.hero),.foot{background-color:#0B0F1A}
.ba,.how,.faq{background-color:#0B0F1A}
.about,.book{background-color:#0D1428}

/* ---------- header + footer logo ---------- */
.brand img{height:48px;width:auto}
@media (max-width:767.98px){.brand img{height:34px}}
@media (max-width:420px){.brand img{height:30px}}
.site-head .brand-tag{display:none!important}
.foot-l img{height:40px;width:auto}
.foot-l{gap:12px 24px}
.foot-copy{margin-top:24px;font-size:14px;line-height:22px;color:var(--tx3)}
.foot-copy a{color:var(--tx2);text-decoration:none;border-bottom:1px solid rgba(245,241,232,.3)}
@media (hover:hover) and (pointer:fine){.foot-copy a:hover{color:#fff;border-bottom-color:var(--ac)}}

/* ---------- hero ---------- */
html body .hero{background:#0B0F1A;position:relative;isolation:isolate;overflow:hidden}
html body .hero::before{display:block;content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(52% 60% at 12% 0%,rgba(34,195,230,.085),transparent 70%),
    radial-gradient(60% 70% at 92% 30%,rgba(20,35,75,.75),transparent 72%),
    linear-gradient(rgba(245,241,232,.026) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(245,241,232,.026) 1px,transparent 1px) 0 0/64px 64px;
  -webkit-mask-image:radial-gradient(80% 85% at 50% 0%,#000 30%,transparent 78%);mask-image:radial-gradient(80% 85% at 50% 0%,#000 30%,transparent 78%)}
/* faint cog mark: the feed port points at the headline */
html body .hero::after{content:"";position:absolute;z-index:-1;left:auto;right:-170px;bottom:-190px;top:auto;width:720px;height:720px;transform:none;
  background:url(assets/tm-hex-icon-dark.svg?v=1) center/contain no-repeat;opacity:.04;pointer-events:none;border:0}
@media (max-width:1023.98px){html body .hero::after{width:480px;height:480px;right:-170px;bottom:-110px}}
@media (max-width:767.98px){html body .hero::after{display:none}}
html body .hero h1{font-size:clamp(56px,5.7vw,84px)!important;line-height:1.06!important}
html body .hero .tm-eyebrow{margin:0 0 20px;font:600 clamp(16px,1.3vw,19px)/1.3 'Inter',system-ui,sans-serif;letter-spacing:.01em;color:var(--tm-cyan);text-align:inherit}
html body .hero h1 .h1g{color:var(--tm-cyan)}
html body .hero h1 .h1a,html body .hero h1 .h1a .h1l{display:block}
@media (min-width:1024px){html body .hero h1 .h1a .h1l{white-space:nowrap!important}}
.dg-lines path{stroke-dasharray:5 7;stroke-linecap:butt}
@media (max-width:1023.98px){html body .hero h1{font-size:clamp(52px,8.4vw,76px)!important}}
@media (max-width:1023.98px){
  html body .hero h1 .h1l{display:inline!important;white-space:normal!important}
  html body .hero h1{text-wrap:balance}
  html body .hero h1 .h1a{display:block!important}
  html body .hero h1 .h1a .h1l:not(.h1g){display:block!important;text-wrap:balance}
  html body .hero h1 .h1a .h1g{display:block!important;white-space:nowrap!important}
}
@media (min-width:560px) and (max-width:1023.98px){html body .hero h1{font-size:clamp(38px,6.1vw,58px)!important}}
@media (max-width:559.98px){html body .hero h1{font-size:clamp(34px,10.4vw,60px)!important;line-height:1.08!important}}
html body .hero .sub{max-width:660px!important;text-wrap:pretty}
@media (min-width:1024px){html body .hero .sub{font-size:22px!important;line-height:1.5!important}}

/* ---------- panels in navy ---------- */
.wid-card,.tl-card,.ba-table,.calc,.bk-card{background:linear-gradient(180deg,#121D40 0%,#0F1936 100%);border-color:var(--panel-line)}
.calc-r{background:linear-gradient(160deg,#17285A,#14234B 60%,#101C3E)!important;border-left:1px solid var(--panel-line-paid)}
.calc-r::before{background:linear-gradient(90deg,rgba(34,195,230,.0),rgba(34,195,230,.9),rgba(34,195,230,.0))!important;opacity:1!important}
.tlv,.rcp{background:#0B1230;border-color:var(--u-line)}
.pain-list{border-color:var(--u-line);background:linear-gradient(180deg,#101A38,#0C1330)}
.pain-card{border-color:var(--u-line)}
.ba-row,.ba-head{border-color:var(--u-line)!important}
.about::before,.book::after{display:none}
.bk-form input{background:#0B1230!important;border-color:rgba(245,241,232,.22)}
.bk-form input:focus{border-color:var(--tm-cyan)!important}
.tl-ck .ck,.ba-wt .ck{stroke:var(--tm-cyan)}
/* purple is retired: slider fills and hairlines go navy to cyan */
.sl input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#2F55B8,#22C3E6) 0 0/var(--p) 100% no-repeat,rgba(245,241,232,.14)}
.sl input[type=range]::-moz-range-progress{background:linear-gradient(90deg,#2F55B8,#22C3E6)}

/* ---------- "01" diagram: the feed cog machine ---------- */
.dg{background:#070A14;border-color:#222F58;position:relative;overflow:hidden}
.dg::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 60% at 50% 52%,rgba(20,35,75,.65),transparent 72%)}
.dg-body{position:relative;z-index:1}
.dg-lbl{color:var(--tx3);letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:600}
.dg-tile{background:#0C1330;border-color:#222F58}
.dg-tile .dg-ic{color:var(--tm-cyan)}
.dg-row{background:rgba(34,195,230,.08);border-color:rgba(34,195,230,.34)}
.dg-core{width:220px;height:220px}
.dg-ring{display:none}
.dg-box{width:210px;height:210px;border:0;border-radius:0;background:transparent;box-shadow:none}
.dg-box img{width:210px;height:210px;filter:drop-shadow(0 0 28px rgba(34,195,230,.18))}
.dg-name,.dg-sub{background:#070A14}
.dg-cap{max-width:640px;margin-left:auto;margin-right:auto;color:var(--tx2);font-size:17px;line-height:26px;text-wrap:balance}
@media (max-width:819.98px){
  .dg-core{width:150px;height:150px;margin-top:0}
  .dg-box{width:140px;height:140px}.dg-box img{width:140px;height:140px}
  .dg-cap{font-size:16px;line-height:24px}
}

/* hero fills the first screen again (>=768px): section 01 always starts below the fold.
   Content is centered, with a bit more bottom padding so it sits slightly above center. */
@media (min-width:768px){html body .hero{min-height:calc(100vh - var(--nav-h))!important;min-height:calc(100svh - var(--nav-h))!important;justify-content:center!important;padding-top:72px!important;padding-bottom:104px!important}
  html body .whatido{padding-top:120px!important}}

/* diagram a2: text under the cog removed; cog ~22% smaller; only the freed space is tightened */
.dg{padding-bottom:36px}
.dg-mid .dg-lbl{margin-bottom:24px}
.dg-core{width:170px;height:170px;margin:auto 0}
.dg-box{width:164px;height:164px}
.dg-box img{width:164px;height:164px}
@media (max-width:819.98px){
  .dg{padding-bottom:28px}
  .dg-vl{margin:10px auto}
  .dg-core{width:114px;height:114px;margin:0 auto}
  .dg-box,.dg-box img{width:110px;height:110px}
}

/* mobile diagram: the two dashed lines run on the gear's hub axis (hub centre at 60.7% x of the art, 11.8px right of the cog box centre)
   and continue over the gear body into the hub: the top line stops at the hub ring, the bottom line leaves from it */
@media (max-width:819.98px){
  .dg-core{z-index:1}
  .dg-vl{position:relative;z-index:2;transform:translateX(11.8px)}
  .dg-vl-in{margin:10px auto -44px}
  .dg-vl-out{margin:-45px auto 10px}
}

/* mobile diagram: three converging lines above the gear (drawn by section01-a1.js), one line out below */
@media (max-width:819.98px){
  .dg-vl-in.dg-l3{width:100%;transform:none}
}

/* diagram-hex-a1: the section 01 machine is a diagram-only hex (purple intake squares -> cyan node -> straight cyan arm).
   Desktop: horizontal art, wider than tall (217x164), node on the box centre. Mobile: the same art transposed (intake on top, arm down). */
.dg-box picture{display:contents}
@media (min-width:820px){
  .dg-core{width:217px}
  .dg-box{width:217px;height:164px}
  .dg-box img{width:217px;height:164px}
}
@media (max-width:819.98px){
  .dg-core{width:104px;height:120px;margin:0 auto}
  .dg-box,.dg-box img{width:103.6px;height:119.95px}
  .dg-vl{transform:none}
  .dg-vl-in{margin:10px auto -1px}
  .dg-vl-out{margin:0 auto 10px}
}

/* a3: arrowhead outside the hex, flat base 2.5 off the edge (as in the logo). Mobile art is cropped at the tip so the out line starts exactly there (40px, ends on a dash) */