/* landing.css - the landing page's own rules, from the landing prototype.
   NOT scoped: templates/index.html is a page of its own and loads only this
   sheet and fonts.css. Edit _knowledge-base/_tools/revamp/landing.page.css and
   run land_foundation.py; this file is overwritten. */
/* ------------------------------------------------------------
   The landing page (templates/index.html), from tsa-landing-prototype.html,
   wired to the hub. A page of its own, as the live one was: it loads none of
   core.css, so nothing here is scoped.

   Drawn whole at the first paint (memory: tsa-no-late-render). The
   prototype's entrances are gone - sections resolving out of blur, wiping,
   rising; the hero assembling and then firing; the gap figure drawing its
   line; the steps drawing their track; the tracker cards fading in - each
   shows as it would have settled. What still moves answers the reader: a
   card turned by a click, the carousel (Paulo asked for it to advance on its
   own; it stops under a pointer or the keyboard), the price changing when the
   billing period is.

   Colour: only the eight tokens from the brand guide, section 03. Green is
   the accent and every CTA. Info blue is links, never a button.
   Radius: surfaces 16px, controls 10px, the billing switch is the only pill.
   ------------------------------------------------------------ */
:root{
  --ground:#0A0F1E; --surface:#111827; --accent:#00C896; --accent-ink:#002E22;
  --info:#378ADD;   --text:#FFFFFF;    --muted:#8892A4;  --line:#1E2A3A;
  --r-surface:16px; --r-control:10px; --r-pill:999px;
  --shell:1220px;
  --display:clamp(2.4rem,5.2vw,4.25rem);
  --section:clamp(2rem,4vw,3.4rem);
  --nav:68px;
}
*,*::before,*::after{box-sizing:border-box;}
/* no smooth scrolling: arriving at /#pricing it glided 3,691px down in front of
   the reader after the page appeared; an anchor is a jump, as it was */
html{scrollbar-gutter:stable;}
/* the nav is sticky: an in-page link lands with its heading below it */
section[id]{scroll-margin-top:calc(var(--nav) + 16px);}
body{margin:0; background:var(--ground); color:var(--text);
     font-family:Montserrat,"Helvetica Neue",Arial,sans-serif; font-weight:500;
     line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-.03em; line-height:1.06;
         text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
a{color:var(--info); text-decoration:none;}
a:hover{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}

::selection{background:var(--accent); color:var(--accent-ink);}
html{scrollbar-width:thin; scrollbar-color:#24354B var(--ground); caret-color:var(--accent);}
::-webkit-scrollbar{width:12px; height:12px;}
::-webkit-scrollbar-track{background:var(--ground);}
::-webkit-scrollbar-thumb{background:#24354B; border-radius:99px; border:3px solid var(--ground);}
::-webkit-scrollbar-thumb:hover{background:#314864;}
.num{font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em;}

.shell{width:min(var(--shell),100% - 3rem); margin-inline:auto;}
@media(max-width:640px){.shell{width:min(var(--shell),100% - 2rem);}}
.skip{position:absolute; left:-9999px; background:var(--accent); color:var(--accent-ink);
      padding:12px 20px; font-weight:700; z-index:200;}
.skip:focus{left:0; top:0;}
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0;}

/* ------------------------------------------------------------ nav ---------- */
/* One look, always. The prototype's "docked" bar (72px to 60px, darker, a
   rule) was switched by an observer whose first answer came just after the
   page appeared - and said "docked" at the very top, so every visit opened
   with the bar shrinking and darkening in front of the reader. A sticky bar
   that changes height also moves everything under it as the reader scrolls.
   The docked look is kept, from the first paint. */
.nav{position:sticky; top:0; z-index:100; height:var(--nav); display:flex; align-items:center;
     background:rgba(10,15,30,.94); backdrop-filter:blur(18px); border-bottom:1px solid var(--line);}
.nav .shell{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:13px; color:var(--text); font-weight:800;
       font-size:.98rem; letter-spacing:-.02em; padding:11px 0;}
.brand:hover{text-decoration:none;}
/* 34px: below about 32 the circuit nodes collapse into the ring */
.brand .mark{width:34px; height:auto; flex:none;}   /* the official mark, a little wider than tall */
@media(max-width:520px){.brand .wordmark{display:none;}}
.nav-links{display:flex; gap:30px; font-size:.88rem; font-weight:600;}
.nav-links a{color:var(--muted);} .nav-links a:hover{color:var(--text); text-decoration:none;}
@media(max-width:900px){.nav-links{display:none;}}
.nav-acts{display:flex; align-items:center; gap:10px;}
/* the phone's menu: the sections the bar has no room for (Yas, 5 Oct,
   blocker 2). Shown below 900px, where .nav-links is not. */
.nav-menu{display:none; position:static;}
.nav-menu summary{list-style:none; padding:9px 12px;}
.nav-menu summary::-webkit-details-marker{display:none;}
.nav-menu summary i{display:block; width:1em; height:1em; line-height:1; font-size:1.15rem;}
.nav-menu[open] summary{border-color:var(--accent); color:var(--accent);}
/* solid, not translucent: under the bar's backdrop blur a .98 ground still let
   the hero's heading show through the open menu */
.nav-panel{position:absolute; left:0; right:0; top:100%; display:grid; padding:8px max(16px, calc((100% - 1200px)/2));
           background:#0A0F1E; border-bottom:1px solid var(--line); box-shadow:0 18px 34px rgba(0,0,0,.45);}
.nav-panel a{padding:14px 4px; font-size:1rem; font-weight:700; color:var(--text); border-top:1px solid var(--line);}
.nav-panel a:first-child{border-top:0;}
.nav-panel a:hover{color:var(--accent); text-decoration:none;}
@media(max-width:900px){ .nav-menu{display:block;} }
/* Log in stays on a phone too: every public page shows Log in and Start free
   (Yas, QA #129, 13 Oct: one pattern). It was hidden below 420px, in the menu.
   On the narrowest phones the bar needed 351px of a 320px screen (the page
   zoomed out to fit): tighter gaps and button padding there (Yas, review of
   #132). */
@media(max-width:360px){
  .nav .shell{gap:12px;}
  .nav-acts{gap:6px;}
  .nav-acts .btn-sm{padding-inline:12px;}
}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
     font-family:inherit; font-size:.93rem; font-weight:700; white-space:nowrap;
     padding:14px 28px; border-radius:var(--r-control); border:1px solid transparent;
     cursor:pointer; transition:transform .1s, background .13s, border-color .13s;}
.btn:hover{text-decoration:none;} .btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent); color:var(--accent-ink);}
.btn-primary:hover{background:#15D9A9;}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line);}
.btn-ghost:hover{border-color:#31435A;}
.btn-sm{padding:9px 18px; font-size:.85rem;}
.btn-wide{width:100%;}

/* ------------------------------------------------------------ hero --------- */
.hero{padding:clamp(44px,5vw,76px) 0 clamp(56px,6vw,88px); position:relative; overflow:hidden;}
.hero::before{content:""; position:absolute; top:-30%; right:-15%; width:70%; height:130%;
  background:radial-gradient(ellipse at center,rgba(0,200,150,.07),transparent 65%);
  pointer-events:none;}
.hero .shell{position:relative; display:grid; gap:clamp(36px,4.5vw,60px);
             grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); align-items:center;}
.hero h1{font-size:var(--display);}
.hero .sub{color:var(--muted); font-size:1.08rem; max-width:31rem; margin-top:20px;}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
@media(max-width:980px){.hero .shell{grid-template-columns:1fr;}}
.hero .copy{position:relative; z-index:2;}
.art{position:relative; min-height:430px;}

/* the constellation: the logo's own hexagon-and-line motif at scale, at rest */
.const-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.const-hub{position:absolute; left:50%; top:50%; width:168px; height:auto;
           transform:translate(-50%,-50%); user-select:none;}
.o2-orbit{fill:none; stroke:#1E3550; stroke-width:1.2; stroke-dasharray:1.5 15;}
.o2-inner{fill:none; stroke:#1A2C44; stroke-width:1; stroke-dasharray:1 11;}
.o2-ring{fill:none; stroke:#24405E; stroke-width:1.2; stroke-linecap:round; opacity:.85;}
.o2-wire{stroke:url(#wireGrad); stroke-width:1.9; fill:none; stroke-linecap:round;}
.o2-hex{fill:#0C1524; stroke:#32536F; stroke-width:1.7;}
.o2-pip{fill:#2C4762;}
.o2-lab{fill:var(--muted); font-family:Montserrat,sans-serif; font-size:13px;
        font-weight:700; letter-spacing:.055em;}
/* the drawing scales with the column: on a phone a 640-unit drawing in
   ~360px set the trackers' names at about 6px. Larger units there, so they
   read at 11px or more. */
@media(max-width:1199px){ .o2-lab{font-size:15px; letter-spacing:.03em;} }
@media(max-width:600px){ .o2-lab{font-size:22px; letter-spacing:.02em;} }

@media(max-width:980px){
  .art{min-height:340px;}
  .const-hub{width:104px;}
}

/* ------------------------------------------------------------ bands -------- */
.band{padding:clamp(72px,8.5vw,132px) 0;}
.band-surface{background:var(--surface); border-block:1px solid var(--line);}
.head{max-width:44rem;}
.head h2{font-size:var(--section);}
.head p{color:var(--muted); margin-top:16px; max-width:34rem;}

/* the gap: one wheel cycle, the sheet flat at the strike, the real break even
   stepping down on every premium. Two drawings, not one scaled down: at a
   phone's width a 960-unit drawing renders 12px labels at about 4px. */
.drift{margin:clamp(40px,5vw,66px) 0 0; padding:0;}
.drift-plot{position:relative; container-type:inline-size;}
.drift svg{display:block; width:100%; height:auto; overflow:visible;}
.drift .dw-narrow{display:none;}
@container (max-width:759px){ .drift .dw-wide{display:none;} .drift .dw-narrow{display:block;} }
/* every label here is measured against the band surface #111827 */
.drift figcaption{margin-top:20px; font-size:.78rem; color:var(--muted); max-width:48ch;}
.d-grid{stroke:#1B2A3E; stroke-width:1;}
.d-tick{fill:#7E8CA0; font-family:Montserrat,sans-serif; font-weight:600;}
.d-sheet{fill:none; stroke:#8892A4; stroke-width:2; stroke-dasharray:5 6; stroke-linecap:round;}
.d-real{fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round;}
.d-glow{fill:none; stroke:var(--accent); stroke-width:10; opacity:.15; stroke-linejoin:round; stroke-linecap:round;}
.d-node{fill:var(--ground); stroke:#33506F; stroke-width:2;}
.d-node-on{stroke:var(--accent); fill:#08251E;}
.d-evt{fill:#9AA6B8; font-family:Montserrat,sans-serif; font-weight:700;}
.d-sub{fill:var(--muted); font-family:Montserrat,sans-serif; font-weight:600;}
.d-lab{font-family:Montserrat,sans-serif; font-weight:800; letter-spacing:-.01em;}
.d-lab-sheet{fill:#8892A4;}
.d-lab-real{fill:var(--accent);}
.d-cap{font-family:Montserrat,sans-serif; font-weight:600; fill:var(--muted);}
.d-gapnum{fill:var(--accent); font-family:Montserrat,sans-serif; font-weight:800; letter-spacing:-.025em;}
.d-gaplab{fill:#AAB5C6; font-family:Montserrat,sans-serif; font-weight:700; letter-spacing:.16em;}
.d-hit{fill:transparent; cursor:pointer;}
/* shown by landing.js (the hidden attribute: hidden, it takes no room - an
   invisible tip at the plot's edge widened the page on a phone) */
.drift-tip{position:absolute; pointer-events:none; z-index:3;
           transform:translate(-50%,-118%); background:#0C1523;
           border:1px solid var(--line); border-radius:var(--r-control);
           padding:10px 14px; font-size:.8rem; line-height:1.5; white-space:nowrap;
           box-shadow:0 14px 34px rgba(0,0,0,.5);}
.drift-tip b{display:block; color:var(--text); font-weight:700;}
.drift-tip span{display:block; color:var(--muted);}
.drift-tip em{display:block; font-style:normal; color:var(--accent); font-weight:700;}

/* ------------------------------------------------------------ comparison --- */
#compare .head{max-width:52rem;}
.vs{--vs-cols:minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr); margin-top:clamp(30px,3.6vw,48px);}
.vs-key{display:grid; grid-template-columns:var(--vs-cols); gap:clamp(18px,3vw,46px);
        padding-bottom:16px; font-size:.7rem; font-weight:700; letter-spacing:.17em;
        text-transform:uppercase; color:var(--muted);}
.vs-key span:last-child{color:var(--accent);}
.vs-rows{margin:0; border-bottom:1px solid var(--line);}
.vs-row{display:grid; grid-template-columns:var(--vs-cols); gap:clamp(18px,3vw,46px);
        align-items:baseline; padding:clamp(19px,2.3vw,27px) 0; border-top:1px solid var(--line);}
.vs-row dt{font-size:1.16rem; font-weight:700; letter-spacing:-.015em; color:var(--text);}
.vs-row dd{margin:0; font-size:.93rem; line-height:1.55;}
.vs-row .was{color:var(--muted);}
.vs-row .now{color:#DEE6F2; font-size:.97rem;}
.vs-row .now b{color:var(--accent); font-weight:700;}
/* the column names, said to a screen reader on every row (the key above is
   for the eye); shown on a phone, where the key is not */
.vs-row dd i{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
@media(max-width:860px){
  .vs-key{display:none;}
  .vs-row{grid-template-columns:1fr; gap:12px;}
  .vs-row dd i{position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal;
               display:block; font-style:normal; font-size:.7rem; font-weight:700;
               letter-spacing:.17em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
  .vs-row .now i{color:var(--accent);}
}

/* ------------------------------------------------------------ trackers ----- */
/* A carousel of cards, each turning on a click to say more. It advances on
   its own and stops the instant a pointer or the keyboard arrives. Where
   there is no hover there is no turn: the back stacks under the front. */
.carousel{--cg:clamp(14px,1.6vw,22px); margin-top:clamp(12px,2.2vw,26px); position:relative;}
/* overflow-x:clip, not hidden: hidden clips the vertical axis too and slices
   every turning card; clip-path lets the track widen the page */
.cviewport{overflow-x:clip; overflow-y:visible; padding-block:30px;}
.track{display:flex; gap:var(--cg); will-change:transform; touch-action:pan-y; cursor:grab; user-select:none;}
.track.dragging{cursor:grabbing;}
.tcard{flex:0 0 calc((100% - var(--cg)*2)/3); perspective:1600px; color:var(--text);
       min-height:352px; cursor:pointer;}
.tface{position:relative; height:100%; min-height:inherit; transform-style:preserve-3d;
       transition:transform .95s cubic-bezier(.65,.05,.36,1);}
.tcard.flipped .tface{transform:rotateY(180deg);}
.tfront,.tback{position:absolute; inset:0; display:flex; flex-direction:column;
               padding:clamp(20px,2.2vw,28px); border:1px solid var(--line);
               border-radius:var(--r-surface); box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
               transition:box-shadow .45s ease, border-color .45s ease;
               backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.tcard:hover .tfront,.tcard:hover .tback,.tcard:focus-within .tfront,.tcard:focus-within .tback,
.tcard.flipped .tfront,.tcard.flipped .tback{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 22px 46px rgba(0,0,0,.5);}
.tfront{background:radial-gradient(120% 140% at 100% 0%,rgba(0,200,150,.10),transparent 58%), var(--surface);}
.tback{transform:rotateY(180deg);
       background:radial-gradient(120% 140% at 0% 0%,rgba(0,200,150,.11),transparent 58%), var(--surface);}
/* every icon in a box of its own size: the icon font comes from a CDN, and
   arriving late it moved the card's words 4px (layout shift 0.0004-0.0008) */
.tico{display:block; width:1em; height:1em; color:var(--accent); font-size:1.55rem; line-height:1;}
.tfront h3{font-size:1.12rem; font-weight:700; margin-top:18px; letter-spacing:-.015em;}
.tfront p{color:var(--muted); font-size:.9rem; margin-top:10px;}
.tviz{margin-top:20px; width:100%;}
.tviz svg{display:block; width:100%; height:auto; overflow:visible;}
.vz-line{stroke:#3C6590; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.vz-dim{stroke:#2A4260; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.vz-node{fill:#0C1524; stroke:#3C6590; stroke-width:2;}
.vz-node-on{stroke:var(--accent); fill:#08251E;}
.vz-lab{fill:#8E9BAE; font-family:Montserrat,sans-serif; font-size:13px; font-weight:700; letter-spacing:.08em;}
@media(max-width:600px){ .vz-lab{font-size:14.5px;} }   /* the card drawings' words, ~11px on a phone */
.vz-bar{fill:var(--accent);}
.vz-cell{fill:var(--accent); opacity:.9;}
.vz-cell-off{fill:#0B1422; stroke:#415D80; stroke-width:1.6;}
.vz-path{stroke:var(--accent); stroke-width:2.4; fill:none; stroke-linejoin:round; stroke-linecap:round;}
.vz-area{fill:rgba(0,200,150,.17);}
.vz-zero{stroke:#2A4260; stroke-width:1.4; stroke-dasharray:4 5;}
.vz-dot{fill:#24405E;}
.vz-dot-on{fill:var(--accent);}
.vz-seg-a{fill:var(--accent);}
.vz-seg-b{fill:#378ADD;}
.vz-seg-c{fill:#3E5878;}
/* the card's foot: "Learn more", a link to the tracker's page, and the turn,
   a real button of its own (Yas, 5 Oct, blocker 1) */
.tacts{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.tmore,.tflip{display:flex; align-items:center; gap:9px; padding:8px 0; font-family:inherit; font-size:.72rem; font-weight:700;
              letter-spacing:.14em; text-transform:uppercase; color:#7E8CA0;}
.tmore:hover{color:var(--accent); text-decoration:none;}
.tmore i{display:inline-block; width:1em; font-size:.92rem; transition:transform .25s cubic-bezier(.22,1,.36,1);}
.tmore:hover i{transform:translateX(4px);}
.tflip{background:none; border:0; cursor:pointer;}
.tflip i{display:inline-block; width:1em; font-size:.92rem;}
.tflip:hover{color:var(--text);}
.tback b{display:block; margin-top:18px; font-size:.72rem; font-weight:700;
         letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.tback ul{list-style:none; margin:15px 0 0; padding:0; display:grid; gap:10px;}
.tback li{display:flex; gap:10px; font-size:.85rem; line-height:1.45; color:#CFD8E4;}
.tback li::before{content:"\F26E"; font-family:"bootstrap-icons"; color:var(--accent);
                  font-size:.74rem; line-height:1.7; flex:none; width:1em; text-align:center;}
.tback .go{margin-top:auto; padding-top:16px; font-size:.84rem; font-weight:700; color:var(--accent);}
.cnav{display:flex; align-items:center; justify-content:center; margin-top:2px;}
.cdots{display:flex; gap:8px;}
/* a 2px bar to see, a 32x24 target to press; the current one's bar is
   longer by a scale, not a width - nothing beside it moves */
.cdot{width:32px; height:24px; padding:0; border:0; cursor:pointer; background:none; position:relative;}
.cdot::before{content:""; position:absolute; left:0; right:0; top:11px; height:2px; border-radius:99px;
              background:#55698A; transform:scaleX(.625);   /* 3.4:1 on the ground (the line colour was 1.3:1) */
              transition:background .3s ease, transform .35s cubic-bezier(.2,.8,.25,1);}
.cdot[aria-current="true"]::before{background:var(--accent); transform:none;}
@media(max-width:1000px){.tcard{flex-basis:calc((100% - var(--cg))/2);}}
@media(max-width:680px){
  .tcard{flex-basis:84%;}
  /* the next card's edge fades out rather than being cut at the screen's
     edge (Yas, 5 Oct) - it reads as more to come */
  .cviewport{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);
             mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);}
}
/* reduced motion: a cross fade, not a turn */
@media(prefers-reduced-motion:reduce) and (hover:hover){
  .tface{transition:none; transform:none !important;}
  .tfront,.tback{backface-visibility:visible; -webkit-backface-visibility:visible; transition:opacity .2s ease;}
  .tback{transform:none; opacity:0;}
  .tcard.flipped .tback{opacity:1;}
  .tcard.flipped .tfront{opacity:0;}
  .cdot,.cdot::before{transition:none;}
}
/* no hover, no turn: both faces stack, nothing behind a gesture the device
   cannot make */
@media(hover:none){
  .tcard{min-height:0; perspective:none; cursor:auto;}
  .tface{transform:none !important; transform-style:flat;}
  .tfront,.tback{position:static; inset:auto; transform:none;
                 backface-visibility:visible; -webkit-backface-visibility:visible;}
  .tfront{border-radius:var(--r-surface) var(--r-surface) 0 0; border-bottom:0;}
  .tback{border-radius:0 0 var(--r-surface) var(--r-surface); border-top:0;
         border-color:var(--line); background:var(--surface);}
  .tflip,.tback b,.tback .tico,.tback .go{display:none;}   /* the front's link goes there */
  .tback ul{margin-top:0;}
}
/* Script off: nothing turns or slides, so every card shows both faces,
   stacked, and the cards wrap - all six and their links reachable. The dots
   and the pause could not work, so they are not drawn. */
html:not(.js) .track{flex-wrap:wrap; transform:none; cursor:auto;}
html:not(.js) .tcard{min-height:0; perspective:none; cursor:auto;}
html:not(.js) .tface{transform:none; transform-style:flat;}
html:not(.js) .tfront,html:not(.js) .tback{position:static; inset:auto; transform:none;
                                           backface-visibility:visible; -webkit-backface-visibility:visible;}
html:not(.js) .tfront{border-radius:var(--r-surface) var(--r-surface) 0 0; border-bottom:0;}
html:not(.js) .tback{border-radius:0 0 var(--r-surface) var(--r-surface); border-top:0; background:var(--surface);}
html:not(.js) .tflip,html:not(.js) .tback b,html:not(.js) .tback .tico,html:not(.js) .tback .go,html:not(.js) .cnav{display:none;}
html:not(.js) .tback ul{margin-top:0;}
/* the pause (WCAG 2.2.2: moving content can be stopped): where the carousel
   moves on its own - a pointer device, motion not reduced, script on */
.cpause{display:inline-grid; place-items:center; width:32px; height:32px; margin-left:10px; padding:0;
        border:1px solid var(--line); border-radius:50%; background:none; color:var(--muted); cursor:pointer;}
.cpause:hover{color:var(--text); border-color:#31435A;}
.cpause i{display:block; width:1em; height:1em; line-height:1; font-size:.9rem;}
.cpause .bi-play-fill{display:none;}
.cpause[aria-pressed="true"] .bi-play-fill{display:block;}
.cpause[aria-pressed="true"] .bi-pause-fill{display:none;}
@media(hover:none),(prefers-reduced-motion:reduce){ .cpause{display:none;} }
@media(max-width:360px){ .switch button{padding-inline:14px;} }

/* ------------------------------------------------------------ steps -------- */
/* numbered markers on a track, because the order is real */
.steps{--sgap:clamp(26px,3.5vw,48px);
       display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sgap);
       margin-top:clamp(40px,5vw,60px);}
.step{position:relative;}
.step::before{content:""; position:absolute; top:19px; height:2px; left:50px;
              right:calc(-1 * var(--sgap)); border-radius:2px; background:var(--accent);}
.step:last-child::before{display:none;}
.step-dot{position:relative; z-index:1; display:grid; place-items:center;
          width:40px; height:40px; border-radius:50%; font-size:.92rem; font-weight:800;
          font-variant-numeric:tabular-nums; color:var(--accent-ink);
          background:var(--accent); border:2px solid var(--accent);
          box-shadow:0 0 0 6px rgba(0,200,150,.12);}
.step h3{font-size:1.04rem; font-weight:700; margin-top:24px;}
.step p{color:var(--muted); font-size:.91rem; margin-top:11px;}
@media(max-width:760px){
  .steps{grid-template-columns:1fr; gap:36px;}
  /* the track turns vertical rather than disappearing: the order still
     matters. The words sit beside the marker, clear of the track - under it,
     the track ran through every heading ("Cre|ate", the prototype too). */
  .step{display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:18px; align-items:start;}
  .step-dot{grid-row:1 / span 2;}
  .step h3{margin-top:9px;}
  .step::before{left:19px; right:auto; top:48px; bottom:-36px; width:2px; height:auto;}
}

/* ------------------------------------------------------------ pricing ------ */
.switch{display:inline-flex; gap:4px; margin-top:28px; padding:4px;
        background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:var(--r-pill);}
.switch button{white-space:nowrap; font-family:inherit; font-size:.85rem; font-weight:700; color:var(--muted);
   background:transparent; border:none; padding:9px 22px; border-radius:var(--r-pill);
   cursor:pointer; transition:background .13s, color .13s;}
.switch button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink);}
/* script off: the switch could not work, so it is not drawn (monthly shows) */
html:not(.js) .switch{display:none;}
.save{margin-left:7px; font-size:.72rem; font-weight:700; padding:2px 8px;
      border-radius:var(--r-pill); background:var(--accent-ink); color:var(--accent);}
.plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:clamp(34px,4vw,50px);}
.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-surface);
      padding:28px; display:flex; flex-direction:column;}
.plan-featured{border-color:var(--accent);
  background:radial-gradient(120% 130% at 50% 0%,rgba(0,200,150,.1),transparent 60%),var(--surface);}
.plan-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.plan-name{font-weight:700; font-size:.97rem;}
.badge{font-size:.72rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
       padding:3px 9px; border-radius:var(--r-pill); background:var(--accent-ink); color:var(--accent);}
.amount{font-size:2.35rem; font-weight:800; letter-spacing:-.035em; margin-top:16px;}
/* the price is what changed, so the price is what moves - on the click */
@media (prefers-reduced-motion:no-preference){
  .amount.swap,.cadence.swap{animation:priceSwap .26s cubic-bezier(.22,1,.36,1);}
  @keyframes priceSwap{0%{opacity:0; transform:translateY(7px) scale(.97);} 100%{opacity:1; transform:none;}}
}
.cadence{color:var(--muted); font-size:.83rem; margin-top:3px;}
.plan ul{list-style:none; margin:22px 0 26px; padding:0; display:grid; gap:10px;}
.plan li{display:flex; gap:9px; font-size:.86rem; color:#C9D2DE;}
.plan li i{color:var(--accent); font-size:.88rem; flex:none; line-height:1.65; width:1em; text-align:center;}
.plan li.off{color:var(--muted);} .plan li.off i{color:var(--muted);}
.plan .btn{margin-top:auto;}
@media(max-width:980px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.plans{grid-template-columns:1fr;}}

/* ------------------------------------------------------------ close, footer  */
.close{text-align:center; padding:clamp(88px,9.5vw,150px) 0; position:relative;
       background:#070B16; border-top:1px solid var(--line); overflow:hidden;}
.close::before{content:""; position:absolute; left:50%; top:-40%; width:min(780px,110%);
               height:180%; transform:translateX(-50%); pointer-events:none;
               background:radial-gradient(ellipse at center,rgba(0,200,150,.10),transparent 62%);}
.close .shell{position:relative;}
.close h2{font-size:var(--section); max-width:18ch; margin-inline:auto;}
.close p{color:var(--muted); margin-top:18px;}
.close .btn{margin-top:32px;}
/* The footer spans the page (Paulo, 9 Oct: its links sat pushed to the
   right, and the rule above the disclaimer stopped short): the mark and
   name with the line under them, then the links in three named columns;
   below a full-width rule, the copyright and the legal links, then the
   disclaimer. A hairline of the accent marks the top edge. */
footer{position:relative; border-top:1px solid var(--line); padding:72px 0 40px;
       font-size:.88rem; color:var(--muted);
       background:linear-gradient(180deg,#0B1222 0%,var(--ground) 70%);}
footer::before{content:""; position:absolute; top:-1px; left:50%; width:min(720px,80%); height:1px;
               transform:translateX(-50%); pointer-events:none;
               background:linear-gradient(90deg,transparent,rgba(0,200,150,.55),transparent);}
footer .fgrid{display:grid; grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
              gap:40px clamp(28px,4vw,56px); align-items:start;}
footer .brand{display:inline-flex; padding:0;}
footer .fbrand p{margin-top:16px; max-width:30ch; line-height:1.6;}
footer nav{display:flex; flex-direction:column; align-items:flex-start;}
footer .fcol{gap:12px;}
footer .fcol h2{margin-bottom:6px; color:var(--text); font-size:.88rem; font-weight:700;
                letter-spacing:0; line-height:1.4;}
footer a{color:var(--muted);}
footer a:hover{color:var(--text);}
footer .fbase{margin-top:64px; padding-top:28px; border-top:1px solid var(--line);}
footer .fbar{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 32px;
             font-size:.82rem;}
footer .flegal{flex-direction:row; gap:28px;}
.legal{margin-top:18px; color:var(--muted); font-size:.78rem; max-width:84ch; line-height:1.7;}
@media(max-width:900px){
  footer .fgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  footer .fbrand{grid-column:1 / -1;}
}

/* ============================================ every device (Paulo, 7 Oct) ===
   Phones: the hero and the footer centre (the hero's words sat left of a
   centred drawing; the footer's groups scattered down the left), the hero's
   two buttons share the width, and sentences are 16px. Touch screens: every
   control 44px to land on. */
/* the hero centres wherever it is one column (980px down: its words sat left
   of a centred drawing); on a phone its two buttons share the width */
@media(max-width:980px){
  .hero .copy{text-align:center;}
  .hero .sub{margin-inline:auto;}
  .hero .actions{justify-content:center;}
}
@media(max-width:600px){
  .hero .actions .btn{flex:1 1 200px;}
  /* phones: the name centred over two columns - the trackers, and the
     company and account links under each other */
  footer{padding-top:56px;}
  footer .fgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px;}
  footer .fbrand{display:flex; flex-direction:column; align-items:center; text-align:center;}
  footer .fbrand p{margin-top:12px;}
  footer .brand .wordmark{display:inline;}
  footer .fcol:nth-of-type(1){grid-row:span 2;}
  footer .fbase{margin-top:44px; text-align:center;}
  footer .fbar{flex-direction:column-reverse; align-items:center;}
  .legal{margin-inline:auto;}
}
@media(max-width:640px){
  .drift figcaption, .tfront p, .tback li, .vs-row dd, .vs-row .now, .step p{font-size:1rem;}
  .plan li{font-size:1rem;}
}
.vs-key, .vs-row dd i{font-size:.75rem;}     /* the column names: 12px, not 11.2 */
@media (pointer:coarse){
  .btn-sm{min-height:44px;}
  .nav-menu summary{min-width:44px; min-height:44px;}
  .brand{min-width:44px; min-height:44px;}
  .tmore, .tflip{min-height:44px;}
  .cdot{height:44px;} .cdot::before{top:21px;}      /* the dot's bar stays centred in its taller target */
  .nav-links a, footer nav a{display:inline-flex; align-items:center; min-height:44px;}
  footer .fcol{row-gap:0;}
}