/* hero-autopilot-nov05 (preview): header + hero only, scoped to #head.tma-head and #top.tma-hero.
   Concept: a cream editorial sheet set between the dark header and the dark site; the word "on" is a purple-to-cyan switch flipped on inside the headline. */
#head.tma-head{--a-pad:20px;--a-hh:64px;position:sticky;top:0;z-index:30;height:var(--a-hh);background:#0B0F1A;border-bottom:1px solid rgba(245,241,232,.08)}
#head .tma-head-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--a-pad);max-width:2200px;margin:0 auto}
#head .tma-brand{display:block;flex:none;border-radius:6px}
#head .tma-brand img{display:block;height:30px;width:auto}
#head .tma-nav{display:flex;align-items:center;gap:36px}
#head .tma-link{display:none;font:500 15px/1 var(--body)!important;color:rgba(245,241,232,.72);text-decoration:none;white-space:nowrap;padding:10px 0;transition:color .15s}
@media (hover:hover) and (pointer:fine){#head .tma-link:hover{color:#F5F1E8}}
#head .tma-navcta{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font:500 15px/1 var(--body)!important;color:#F5F1E8;text-decoration:none;white-space:nowrap;border:1px solid rgba(245,241,232,.34);border-radius:8px;transition:border-color .15s,background-color .15s}
@media (hover:hover) and (pointer:fine){#head .tma-navcta:hover{border-color:#F5F1E8;background:rgba(245,241,232,.06)}}
#head a:focus-visible{outline:2px solid #22C3E6;outline-offset:3px}

#top.tma-hero{--a-ink:#0B0F1A;--a-paper:#F5F1E8;--a-vio:#7C6CF6;--a-cyan:#22C3E6;--a-pad:20px;--a-hh:64px;
  position:relative;isolation:isolate;overflow:hidden;margin:0;background:var(--a-paper);color:var(--a-ink);
  display:flex;flex-direction:column;padding:clamp(28px,5svh,48px) var(--a-pad) 40px}
/* the sheet ends on the brand flow line, then the dark site continues */
#top.tma-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--a-vio) 0,var(--a-vio) 40%,var(--a-cyan) 66%,var(--a-cyan) 100%)}

#top.tma-hero h1.tma-h1{margin:0;color:var(--a-ink);font-size:clamp(48px,17.16vw,81px)!important;line-height:.9!important;letter-spacing:-.045em!important;font-weight:700!important}
#top.tma-hero h1.tma-h1 *{letter-spacing:-.045em!important}
#top .tma-w1,#top .tma-w2{display:block;white-space:nowrap}
/* the switch: real text "on" inside a pill the size of a capital letter */
#top .tma-sw{position:relative;display:inline-block;width:1.74em;height:.73em;margin:.1em 0 .08em;border-radius:999px;vertical-align:baseline;
  background:linear-gradient(90deg,var(--a-vio) 0,var(--a-vio) 34%,var(--a-cyan) 78%,var(--a-cyan) 100%)}
#top .tma-sw::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#D9D3C6;opacity:0}
#top.tma-hero h1.tma-h1 .tma-sw-t{position:absolute;left:.5em;top:50%;transform:translateY(-52%);font-size:.42em;line-height:1!important;color:#fff;letter-spacing:-.01em!important}
#top .tma-sw-k{position:absolute;top:.08em;right:.08em;width:.57em;height:.57em;border-radius:50%;background:var(--a-paper);box-shadow:0 .02em .05em rgba(11,15,26,.25)}

#top .tma-base{display:flex;flex-direction:column;margin-top:22px}
#top .tma-sub{margin:0;max-width:30ch;font:400 19px/1.45 var(--body)!important;letter-spacing:normal!important;color:rgba(11,15,26,.84);text-wrap:pretty}
#top .tma-nw{white-space:nowrap}
#top .tma-act{margin-top:0;padding-top:28px;display:flex;flex-wrap:wrap;align-items:center;column-gap:28px}
#top .tma-cta{order:0;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 18px;white-space:nowrap;
  font:500 17px/1 var(--body)!important;color:var(--a-paper);background:var(--a-ink);border:2px solid var(--a-ink);border-radius:8px;text-decoration:none;transition:background-color .15s,border-color .15s}
@media (hover:hover) and (pointer:fine){#top .tma-cta:hover{background:#14234B;border-color:#14234B}}
#top .tma-arr{display:inline-block;transition:transform .15s}
@media (hover:hover) and (pointer:fine){#top .tma-cta:hover .tma-arr{transform:translateX(3px)}}
#top .tma-cta:focus-visible{outline:2px solid transparent;box-shadow:0 0 0 3px var(--a-paper),0 0 0 5px #5B4BE0}
#top .tma-note{order:1;flex:1 0 100%;margin:14px 0 0;font:400 15px/1.45 var(--body)!important;letter-spacing:normal!important;color:rgba(11,15,26,.68)}
#top .tma-how{order:2;display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font:500 15px/1 var(--body)!important;color:var(--a-ink);
  text-decoration:underline;text-decoration-color:var(--a-vio);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .15s}
@media (hover:hover) and (pointer:fine){#top .tma-how:hover{text-decoration-color:var(--a-cyan)}}
#top .tma-how:focus-visible{outline:2px solid #5B4BE0;outline-offset:3px;border-radius:2px}

@media (max-width:374.98px){#top .tma-cta{font-size:16px!important;padding:0 14px;gap:8px}}
@media (max-height:700px) and (max-width:767.98px){#top.tma-hero h1.tma-h1{font-size:clamp(50px,17vw,72px)!important}#top .tma-sub{font-size:17px!important}#top .tma-base{margin-top:16px}#top .tma-act{padding-top:18px}}

/* compact phone scale (hero-compact-nov05): phones under 640px only; tablet/desktop untouched */
@media (max-width:639.98px){
  #top.tma-hero{padding-top:clamp(20px,3.5svh,32px);padding-bottom:32px}
  #top.tma-hero h1.tma-h1{font-size:clamp(44px,14.4vw,66px)!important}
  #top .tma-base{margin-top:16px}
  #top .tma-sub{font-size:17px!important;line-height:1.5!important;max-width:34ch}
  #top .tma-act{padding-top:22px}
  #top .tma-cta{min-height:48px;padding:0 16px;font-size:16px!important}
  #top .tma-note{margin-top:12px;font-size:14px!important}
  #top .tma-how{margin-top:0}
}
@media (max-width:374.98px){#top .tma-cta{font-size:15px!important;padding:0 12px;gap:8px}}
/* short phones: keep the compact heading from being enlarged by the older short-phone rule above */
@media (max-height:700px) and (max-width:639.98px){
  #top.tma-hero h1.tma-h1{font-size:clamp(40px,13vw,58px)!important}
  #top .tma-sub{font-size:16px!important}
  #top .tma-base{margin-top:12px}
  #top .tma-act{padding-top:16px}
}

/* breathing phone layout (hero-breathing-nov05): phones under 640px only; overrides the compact block above.
   Height: content-safe minimum of one screen below the 64px mobile header (100vh fallback, then 100svh so Safari's expanded toolbar
   never shows the dark section on load). Minimum only - content sets the real height on short phones. Safe areas are handled in padding.
   Spare space: 2 parts above the headline, 3 below the actions. CTA: shorter phone label, content-width, 48px. */
#top .tma-cta-s{display:none}
@media (max-width:639.98px){
  #top.tma-hero{min-height:calc(100vh - var(--a-hh));min-height:calc(100svh - var(--a-hh));height:auto;
    padding:clamp(32px,5svh,48px) max(var(--a-pad),env(safe-area-inset-right)) clamp(32px,5svh,48px) max(var(--a-pad),env(safe-area-inset-left))}
  #top.tma-hero::before{content:"";flex:2 1 0;min-height:0}
  #top.tma-hero h1.tma-h1{font-size:clamp(48px,14.4vw,56px)!important}
  #top .tma-base{flex:3 1 auto;margin-top:24px}
  #top .tma-sub{font-size:17px!important;line-height:1.5!important;max-width:34ch}
  #top .tma-act{padding-top:32px}
  #top .tma-cta{display:inline-flex;width:auto;min-height:48px;padding:0 24px;gap:10px;font-size:16px!important}
  #top .tma-cta-l{display:none}
  #top .tma-cta-s{display:inline}
  #top .tma-note{margin-top:16px;font-size:15px!important;line-height:1.5!important}
  #top .tma-how{margin-top:4px}
}
@media (max-width:374.98px){#top .tma-cta{font-size:16px!important;padding:0 22px;gap:10px}}
@media (max-height:700px) and (max-width:639.98px){
  #top.tma-hero h1.tma-h1{font-size:clamp(44px,13vw,52px)!important}
  #top .tma-sub{font-size:16px!important}
  #top .tma-base{margin-top:20px}
  #top .tma-act{padding-top:24px}
}
/* centered.html only: same scale and rhythm, centred alignment (phones only) */
@media (max-width:639.98px){
  #top.tma-hero.tma-center{align-items:center;text-align:center}
  #top.tma-center .tma-base{align-items:center;width:100%}
  #top.tma-center .tma-sub{margin-left:auto;margin-right:auto;text-wrap:balance}
  #top.tma-center .tma-act{justify-content:center}
  #top.tma-center .tma-note{text-align:center}
}

/* centered.html only, all widths: whiter neutral sheet (no yellow cast). --a-paper also drives the switch knob and CTA text. */
#top.tma-hero.tma-center{--a-paper:#FAFAF9}
#top.tma-center .tma-sw::before{background:#D9D9D6}

/* centered.html refinement (phones only): larger headline with a looser internal stack. Headline-to-sub gap is capped (no growth);
   spare height splits equally above the headline and below the actions (two auto margins), so the group sits balanced. Left page unaffected (.tma-center only). */
@media (max-width:639.98px){
  #top.tma-hero.tma-center{padding-top:clamp(24px,4svh,40px);padding-bottom:clamp(28px,4svh,40px)}
  #top.tma-hero.tma-center::before{content:none}
  #top.tma-center h1.tma-h1{font-size:clamp(46.82px,14.045vw,58.52px)!important;line-height:1!important;margin-top:auto}
  #top.tma-center .tma-sw{margin:.3098em 0 .12em;top:.0551em}
  #top.tma-center .tma-sub{font-size:18px!important;line-height:1.5!important}
  #top.tma-center .tma-base{flex:none;margin-top:0;margin-bottom:auto;padding-top:clamp(32px,5svh,48px)}
  #top.tma-center .tma-act{padding-top:clamp(32px,5svh,48px)}
}
@media (max-height:700px) and (max-width:639.98px){
  #top.tma-center h1.tma-h1{font-size:clamp(40.13px,12.122vw,50.16px)!important}
  #top.tma-center .tma-base{padding-top:clamp(20px,3.5svh,28px)}
  #top.tma-center .tma-act{padding-top:24px}
  #top.tma-center .tma-sub{font-size:18px!important}
}

@media (min-width:640px){
  #head.tma-head,#top.tma-hero{--a-pad:40px;--a-hh:76px}
  #head .tma-brand img{height:38px}
  #top.tma-hero{padding-top:56px;padding-bottom:56px}
  #top.tma-hero h1.tma-h1{font-size:clamp(92px,17vw,150px)!important}
  #top .tma-base{margin-top:32px}
  #top .tma-sub{font-size:22px!important;max-width:32ch}
  #top .tma-cta{display:inline-flex;width:auto;padding:0 28px;min-height:60px;font-size:18px!important}
  #top .tma-how{order:1;margin-top:0;font-size:16px!important}
  #top .tma-note{order:2;margin-top:16px;font-size:16px!important}
}
@media (min-width:861px){#head .tma-link{display:inline-block}}

/* desktop: one centred, contained group (headline, sub, actions) sitting in the middle of the first screen */
@media (min-width:1024px){
  #head.tma-head,#top.tma-hero{--a-pad:clamp(40px,5vw,128px);--a-hh:80px}
  #head .tma-brand img{height:44px}
  #top.tma-hero{min-height:calc(100vh - var(--a-hh));justify-content:center;align-items:center;text-align:center;
    padding:clamp(40px,6vh,96px) var(--a-pad) clamp(56px,9vh,140px)}
  #top.tma-hero h1.tma-h1{font-size:clamp(96px,min(8.4vw,15vh),184px)!important;line-height:.9!important;white-space:nowrap;margin:0}
  #top .tma-w1{display:inline}
  #top .tma-sw{margin:0 0 0 .04em}
  #top .tma-base{width:100%;max-width:60rem;margin-top:clamp(28px,4vh,48px);display:flex;flex-direction:column;align-items:center}
  #top .tma-sub{margin:0 auto;font-size:clamp(24px,1.75vw,38px)!important;line-height:1.4!important;font-weight:400!important;max-width:27em;text-align:center;text-wrap:balance;color:rgba(11,15,26,.86)}
  #top .tma-act{margin-top:clamp(28px,3.6vh,44px);padding-top:0;justify-content:center;column-gap:28px}
  #top .tma-cta{min-height:clamp(56px,3vw,68px);padding:0 clamp(26px,1.5vw,36px);font-size:clamp(17px,.9vw,21px)!important}
  #top .tma-how{font-size:clamp(15px,.8vw,19px)!important}
  #top .tma-note{text-align:center;font-size:clamp(15px,.8vw,19px)!important;margin-top:clamp(14px,1.8vh,22px)}
}
@media (min-width:2200px){#head .tma-link,#head .tma-navcta{font-size:17px!important}#head .tma-navcta{min-height:48px;padding:0 20px}}

/* motion: the switch flips on once; nothing else moves */
@media (prefers-reduced-motion:no-preference){
  #top .tma-sw::before{animation:tma-track .5s ease .55s both}
  #top .tma-sw-k{animation:tma-knob .55s cubic-bezier(.5,0,.15,1) .5s both}
  #top.tma-hero h1.tma-h1 .tma-sw-t{animation:tma-on .3s ease .85s both}
}
@keyframes tma-track{from{opacity:1}to{opacity:0}}
@keyframes tma-knob{from{transform:translateX(-1.02em)}to{transform:none}}
@keyframes tma-on{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#head .tma-navcta,#top .tma-cta,#top .tma-arr,#top .tma-how{transition:none}}

/* desktop-scale-nov06 (owner t1121u/t1123u): desktop only (>=1024px) H1 + toggle 15% smaller (toggle is em-sized, so it follows
   the H1), subheader 10% smaller. Every clamp term is multiplied exactly; spacing, layout and mobile are untouched. */
@media (min-width:1024px){
  #top.tma-hero h1.tma-h1{font-size:clamp(81.6px,min(7.14vw,12.75vh),156.4px)!important}
  #top .tma-sub{font-size:clamp(21.6px,1.575vw,34.2px)!important}
}