/* self-hosted faces, so the CSP does not have to be widened for a typeface.
     latin and latin-ext are complementary cuts: without the ranges the
     second rule of each pair would shadow the first. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/space-grotesk-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/space-grotesk-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/space-grotesk-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/noto-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/noto-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============================================================
   TOKENS  brand layer from the Figma, structure from earlier scaffolds
   ============================================================ */
:root{
  --ws-ink:#15344B;
  --ws-teal:#03B8A5;
  --ws-aqua:rgba(0,255,229,.2);
  --ws-sky:#E2F5FF;
  --ws-sky-2:#D8F1FF;
  --ws-paper:#FFFFFF;
  --ws-body:#000000;
  --ws-line:rgba(21,52,75,.14);
  --ws-line-light:rgba(255,255,255,.2);
  --ws-duo:#1C5F91;               /* the blue every photograph is printed in */
  --ws-seam:clamp(64px,12vh,150px); /* how far the card rides up into the band */

  --ws-gutter:20px;
  --ws-maxw:1416px;
  --ws-radius:32px;
  --ws-header-h:104px;

  --ws-fs-mega:clamp(3.6rem,17.6vw,261px);
  --ws-fs-h1:clamp(2.9rem,8.1vw,120px);
  --ws-fs-h2:clamp(2.2rem,4.05vw,60px);
  --ws-fs-h3:clamp(1.9rem,3.1vw,46px);
  --ws-fs-h4:clamp(1.4rem,2.16vw,32px);
  --ws-fs-tile:clamp(1.9rem,4.3vw,64px);
  --ws-fs-lede:clamp(1.1rem,1.82vw,27px);
  --ws-fs-body:clamp(1rem,1.21vw,18px);
  --ws-fs-nav:16px;

  --ws-ease:cubic-bezier(.22,.61,.36,1);
  --ws-dur:800ms;
}
@media (min-width:1024px){ :root{ --ws-gutter:32px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ws-paper);color:var(--ws-body);
  font-family:'Noto Sans',system-ui,sans-serif;font-weight:500;
  font-size:var(--ws-fs-body);line-height:1.33;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--ws-teal);outline-offset:3px}

.d{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;letter-spacing:-.05em;color:var(--ws-ink);text-wrap:balance}
.mega{font-size:var(--ws-fs-mega);line-height:.83}
.h1{font-size:var(--ws-fs-h1);line-height:1.09;color:var(--ws-body)}
.h2{font-size:var(--ws-fs-h2);line-height:1.17}
.h3{font-size:var(--ws-fs-h3);line-height:1.28;font-weight:700}
.h4{font-size:var(--ws-fs-h4);line-height:1.28}
.tile-t{font-size:var(--ws-fs-tile);line-height:1.14;font-weight:700}
.lede{font-size:var(--ws-fs-lede);line-height:1.55;letter-spacing:.02em}
.body{font-size:var(--ws-fs-body);line-height:1.33;letter-spacing:.02em}
.label{font-family:'Noto Sans',sans-serif;font-weight:500;font-size:var(--ws-fs-nav);line-height:1.375;text-transform:uppercase}

.wrap{max-width:var(--ws-maxw);margin-inline:auto;padding-inline:var(--ws-gutter)}

/* ============================================================
   BUTTONS  the angled edge, from the CTA shape study.

   A chamfer at the top left that runs the full height, so the button leans
   in the direction everything else on this site travels. Three things about
   the construction are deliberate.

   The fill lives on ::before rather than on the element. clip-path clips
   everything an element paints, its outline included, so a clipped button
   loses its focus ring. Clipping only the fill layer leaves the element's
   own box rectangular, and the ring is drawn on that.

   --ws-cut is registered with @property so it can transition. A plain custom
   property inside clip-path() jumps between values instead of animating.

   Padding compensates for the diagonal but never changes on hover. The label
   is fixed; only the notch moves.
   ============================================================ */
@property --ws-cut{syntax:'<length>';inherits:true;initial-value:12px}

.btn{
  --ws-cut:12px;                 /* 12 across 38 is 17.5 degrees off vertical */
  --ws-cut-hover:18px;
  --ws-btn-bg:var(--ws-paper);   /* what the outline variant fills itself with */
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;gap:12px;
  /* the extra 6px on the left is half the cut, so the label sits optically
     centred inside the visible shape rather than inside the box */
  padding:8px 16px 8px 22px;min-height:38px;border:0;border-radius:0;cursor:pointer;
  font-family:'Noto Sans',sans-serif;font-weight:600;font-size:var(--ws-fs-nav);
  line-height:1.375;text-transform:uppercase;letter-spacing:.02em;
  background:transparent;color:var(--ws-ink);white-space:nowrap;
  transition:--ws-cut 260ms var(--ws-ease),transform 220ms var(--ws-ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--ws-teal);
  clip-path:polygon(var(--ws-cut) 0,100% 0,100% 100%,0 100%);
  transition:background 220ms var(--ws-ease);
}
.btn:hover{--ws-cut:var(--ws-cut-hover);color:#fff}
.btn:hover::before{background:var(--ws-ink)}
.btn:active{transform:translateY(1px)}

/* Quiet stays a text control. Giving it the shape would contradict the
   decision that the secondary action is the one not asking for attention. */
.btn-quiet{background:transparent;color:var(--ws-body)}
.btn-quiet::before,.btn-quiet:hover::before{background:transparent}
.btn-quiet:hover{--ws-cut:12px;color:var(--ws-teal-deep)}

/* The large size keeps the angle rather than the inset: 18 across 56 is 17.8
   degrees, so it reads as the same cut at a different scale. */
.btn-lg{--ws-cut:18px;--ws-cut-hover:26px;padding:16px 28px 16px 37px;min-height:56px;font-size:18px}

/* ============================================================
   0  HEADER  Figma spec
   ============================================================ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:80;height:var(--ws-header-h);
  background:var(--ws-paper);
  transition:box-shadow 320ms var(--ws-ease);
}
.hdr.solid{box-shadow:0 1px 0 var(--ws-line)}
.hdr > .wrap{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
/* The horizontal lockup, mark v1.0 Ascent (2026-08-31, restored 2026-09-20
   after a stage_site.py run reverted it on every page). The mark is INLINE SVG
   rather than an <img>: it costs no second request, and fitNav below measures
   .brand on document.fonts.ready, which an image would not be laid out for. The
   word stays live Space Grotesk 500 at -0.05em, which is how this site has
   always set the brand.
   Cap height is 24.5px, just over the brand floor of 24px on white, and it no
   longer steps down with the breakpoints: the old 28/26/24px steps put the word
   at a 16.8px cap on a phone, well under the floor the teal "wise" needs. The
   whole lockup is about 170px wide, which still leaves room for the menu button
   at 375px. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{height:38px;width:38px;flex:none;display:block}
.brand-mark path{fill:var(--ws-ink)}
.brand-mark path.a{fill:var(--ws-teal)}
.brand-word{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:35px;letter-spacing:-.05em;line-height:1}
.brand-word .t{color:var(--ws-ink)}
.brand-word .w{color:var(--ws-teal)}
/* six items now, so the gap tightens before the nav can reach either side */
.nav{position:relative;justify-self:center;display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav > a,.nav-trigger{position:relative;color:var(--ws-body);opacity:.6;transition:opacity 200ms var(--ws-ease)}
.nav > a:hover,.nav > a.active,.nav-trigger:hover,.nav-trigger.active,.nav-group.open .nav-trigger{opacity:1}

/* The three audience segments live under one trigger. Four top level items
   instead of six, and the group can grow without the bar growing with it. */
.nav-group{position:relative;display:flex;align-items:center}
.nav-trigger{
  display:inline-flex;align-items:center;gap:7px;
  border:0;background:transparent;cursor:pointer;padding:0;
  font-family:'Noto Sans',sans-serif;font-weight:500;font-size:var(--ws-fs-nav);
  line-height:1.375;letter-spacing:.02em;text-transform:uppercase;
}
.nav-trigger svg{transition:transform 240ms var(--ws-ease)}
.nav-group.open .nav-trigger svg{transform:rotate(180deg)}
.nav-drop{
  position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%);
  min-width:230px;display:flex;flex-direction:column;
  background:var(--ws-paper);padding:8px 0;
  box-shadow:0 0 0 1px var(--ws-line),0 22px 40px -24px rgba(21,52,75,.55);
}
/* an author display rule outranks the UA [hidden] rule, so state it explicitly
   or the panel renders open on load */
.nav-drop[hidden]{display:none}
/* keeps the pointer inside the group while it crosses the gap */
.nav-drop::before{content:"";position:absolute;left:0;right:0;top:-22px;height:22px}
.nav-drop a{
  padding:11px 22px;white-space:nowrap;color:var(--ws-body);opacity:.72;
  transition:opacity 160ms var(--ws-ease),color 160ms var(--ws-ease);
}
.nav-drop a:hover{opacity:1;color:var(--ws-teal)}
.nav-pill{
  position:absolute;top:-11px;height:4px;width:23px;border-radius:25px;background:var(--ws-body);opacity:0;
  transition:transform 420ms var(--ws-ease),opacity 260ms var(--ws-ease);pointer-events:none;
}
.nav:hover .nav-pill,.nav-pill.rest{opacity:1}
.actions{display:flex;align-items:center;gap:16px}

.menu-btn{
  display:none;border:0;background:transparent;cursor:pointer;padding:8px 4px;
  font-family:'Noto Sans',sans-serif;font-weight:600;font-size:var(--ws-fs-nav);
  line-height:1.375;letter-spacing:.02em;color:var(--ws-body);
}
.menu-btn:hover{color:var(--ws-teal)}
.menu-panel{
  position:absolute;top:var(--ws-header-h);left:0;right:0;
  background:var(--ws-paper);
  box-shadow:0 1px 0 var(--ws-line),0 24px 40px -28px rgba(21,52,75,.5);
  /* The panel is a child of a position:fixed header, so the page scrolling
     underneath it does not move it. Without a ceiling and a scrollbar of its
     own, every link past the bottom of the screen is unreachable rather than
     just out of sight, and the language list is the last block in here. svh,
     not vh: the small viewport is the one with the browser toolbars showing,
     which is the state the panel opens in. */
  max-height:calc(100svh - var(--ws-header-h));
  overflow-y:auto;overscroll-behavior:contain;
}
.menu-panel .wrap{display:flex;flex-direction:column;align-items:stretch;height:auto;padding-block:8px 24px}
.menu-panel a{
  padding:14px 0;font-family:'Noto Sans',sans-serif;font-weight:500;font-size:20px;
  text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--ws-line);
}
.menu-panel a:last-child{border-bottom:0;opacity:.6}
.menu-group-label{
  padding:16px 0 6px;font-family:'Noto Sans',sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ws-teal);
}
.menu-panel a.sub{padding-left:18px;font-size:18px}
.menu-panel a:hover{color:var(--ws-teal)}

/* six items need more room, so the centred nav gives way earlier than it used to */
@media (max-width:1024px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
}
/* measured fallback: if the six items do not fit their column in whatever font
   actually loaded, collapse to the menu rather than crowding the buttons */
.hdr.compact .nav{display:none}
.hdr.compact .menu-btn{display:inline-flex}
@media (max-width:1080px){ :root{--ws-header-h:88px} }
@media (max-width:560px){ .actions .btn-quiet{display:none} }

/* ============================================================
   1  HERO  no video. Statement, then a bento of three USPs.
   ============================================================ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;
  padding-top:calc(var(--ws-header-h) + clamp(16px,4.5vh,72px));
  padding-bottom:clamp(16px,2.5vh,32px);
}
.hero-top{
  display:grid;grid-template-columns:minmax(0,805fr) minmax(0,459fr);
  gap:clamp(32px,5vw,84px);align-items:start;
  margin-bottom:clamp(24px,4.5vh,72px);
}
/* the type is capped by viewport HEIGHT as well as width, so a short laptop
   screen does not get a headline that eats the fold */
.hero .h1{font-size:min(var(--ws-fs-h1),13vh)}
.hero-lede{font-size:min(var(--ws-fs-lede),2.6vh)}
.hero h1{width:fit-content;max-width:100%}
.hero .line{
  display:block;position:relative;z-index:0;white-space:nowrap;
  opacity:0;transform:translateY(18px);
  transition:opacity var(--ws-dur) var(--ws-ease),transform var(--ws-dur) var(--ws-ease);
}
.hero .line.on{opacity:1;transform:none}

/* SIGNATURE: the aqua marker. Both blocks run to the same right edge, which is
   the width of the longest line, so the shorter line's block overhangs its text.
   That mis-registration is the detail that makes it read as a marker, not a fill. */
.hero .line.mk::before{
  content:"";position:absolute;z-index:-1;
  left:-.05em;right:-.02em;top:.13em;height:.80em;
  background:var(--ws-aqua);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 760ms cubic-bezier(.65,0,.35,1);
}
.hero .line.mk.swept::before{transform:scaleX(1)}

.hero-lede{display:flex;flex-direction:column;gap:1.2em;padding-top:.5em}

/* bento, proportioned off the Figma frame: 937 + 20 + 458, right column 300 + 14 + 300 */
.bento{display:grid;grid-template-columns:minmax(0,937fr) minmax(0,458fr);gap:20px;flex:1 1 0;min-height:min(30vh,420px)}
.bento-side{display:grid;grid-template-rows:1fr 1fr;gap:14px}
.tile{position:relative;border-radius:var(--ws-radius);overflow:hidden;isolation:isolate}
.tile.big{height:100%}
.tile-copy{
  position:absolute;left:clamp(20px,2.3vw,32px);bottom:clamp(18px,2.3vw,32px);right:clamp(20px,2.3vw,32px);
  z-index:2;color:#fff;
}
.tile-copy .d{color:#fff}
.feature .overlay .d{color:var(--ws-ink)}
.tile.small .tile-t{font-size:clamp(1.6rem,2.4vw,34px)}
.hero-foot{display:flex;justify-content:center;align-items:flex-end;margin-top:clamp(14px,2vh,24px)}
@media (max-width:900px){
  .hero{min-height:0;display:block}
  .hero .h1{font-size:var(--ws-fs-h1)}
  .hero-lede{font-size:var(--ws-fs-lede)}
  .hero-top{grid-template-columns:minmax(0,1fr);gap:28px}
  .bento{grid-template-columns:minmax(0,1fr);min-height:0}
  .bento-side{grid-template-rows:none;grid-auto-rows:1fr}
  .tile.big{height:auto;aspect-ratio:4/3}
  .tile.small{aspect-ratio:16/10}
  .hero-foot{margin-top:24px}
  .cue{margin-top:8px}
}

/* scroll cue, from the Figma */
.cue{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,1.6vh,20px)}
.cue span{font-size:var(--ws-fs-nav);line-height:1.375;opacity:.7}
.cue i{display:block;width:1px;height:clamp(24px,4vh,56px);background:var(--ws-body);opacity:.5}

/* ============================================================
   1c  EVERY WEARABLE WELCOME
   Proportioned off the Figma frame: 479 copy column, 698x1024 image,
   32px radius, and a flat rgba(0,174,255,.2) wash rather than a duotone.
   ============================================================ */
/* extra room below: the climbing line rises into this space, and it needs to be
   clear white rather than the tail of the photograph above it */
.ww{padding-top:clamp(64px,10vh,130px);padding-bottom:clamp(150px,33vh,380px)}
.ww-grid{
  max-width:1180px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,479fr) minmax(0,698fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.ww-copy{display:flex;flex-direction:column;gap:40px}
.ww-copy .h2{color:var(--ws-teal)}
.ww-copy p{max-width:34ch}

/* stand-in wordmarks. Real brand logos need each company's permission and their
   own asset files, so these are deliberately uniform placeholders. */
.ww-logos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px 34px;max-width:380px;opacity:.6;
}
.ww-logos span{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ws-ink);
}
.ww-media{
  position:relative;border-radius:var(--ws-radius);overflow:hidden;
  aspect-ratio:698/1024;background:var(--ws-sky-2);
}
.ww-media img{width:100%;height:100%;object-fit:cover}
.ww-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(0,174,255,.2);
}
@media (max-width:900px){
  .ww-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .ww-media{aspect-ratio:4/5;order:-1}
  .ww-copy{gap:28px}
}

/* ============================================================
   1b  PHONE STAGE  scroll-driven product walkthrough
   All classes are prefixed pm- because the incoming markup used .card,
   .screen and .step, which already mean something else on this page.
   ============================================================ */
:root{ --pm-radius:52px; --pm-frame:12px; --pm-muted:#5C7488; }

/* the wash moves up to a band wrapper so the headline can bleed above the stage
   without joining the stage's own scroll maths */
.sky-band{
  background:var(--ws-sky);position:relative;
  /* seam + clearance, so the phone lands in colour instead of being cut by the edge */
  padding-bottom:calc(var(--ws-seam) + 40px);
}
.pm-stage{height:320vh;position:relative}

/* SIGNATURE 2: the headline straddles the colour boundary. One position, two
   stacked copies. The base is navy; a teal copy sits exactly on top of it and is
   clipped to everything below the band edge, so the letters change colour at the
   join rather than at a glyph. --ms-bleed is in em, so it holds at any size. */
.ms{
  --ms-bleed:.27em;                  /* 70 of 261.71 in the Figma frame */
  will-change:transform;
  position:relative;display:flow-root;   /* flow-root, or the negative margin
                                            collapses out and drags the band up */
  padding-bottom:clamp(20px,4vh,56px);
}
/* both copies carry the same pull, so they cannot drift apart */
.ms .mega{margin:calc(-1 * var(--ms-bleed)) 0 0;color:var(--ws-ink);text-align:center}
/* fit-content, not plain block: a block-level line fills its parent, so measuring
   it returns the container width and the fitter never grows the type */
.ms .mline{display:block;width:fit-content;margin-inline:auto;white-space:nowrap}
.ms .ms-teal{
  /* an absolute child is placed against the PADDING BOX, so it has to carry the
     wrap's gutter itself or it sits 32px left of the copy underneath it */
  position:absolute;top:0;left:0;right:0;padding-inline:var(--ws-gutter);
  color:var(--ws-teal);
  clip-path:inset(var(--ms-bleed) 0 0 0);
  pointer-events:none;
}
@media (max-width:900px){ .ms{--ms-bleed:.20em} }
.pm-sticky{
  position:sticky;top:0;height:100svh;
  padding-top:var(--ws-header-h);
  display:grid;grid-template-columns:auto minmax(0,560px);
  justify-content:center;gap:clamp(28px,7vw,110px);align-items:center;
  max-width:var(--ws-maxw);margin-inline:auto;padding-inline:var(--ws-gutter);
}

/* the phone is sized off the viewport so it never outgrows the pinned screen */
.pm-phone{
  position:relative;justify-self:center;
  height:min(760px,calc(100svh - var(--ws-header-h) - 72px));
  aspect-ratio:9/19.5;width:auto;
  background:#1C2B36;border-radius:var(--pm-radius);padding:var(--pm-frame);
  box-shadow:0 30px 60px rgba(21,52,75,.22),inset 0 0 0 2px #3B4B58;
}
.pm-screen{
  position:relative;height:100%;overflow:hidden;   /* the mask */
  border-radius:calc(var(--pm-radius) - var(--pm-frame));background:var(--ws-paper);
}
/* flex-basis 100% makes every panel exactly one screen tall, so the shift is
   always a whole number of screens whatever the content does */
.pm-strip{height:100%;display:flex;flex-direction:column;will-change:transform}
.pm-app{flex:0 0 100%;padding:54px 20px 28px;display:flex;flex-direction:column}
.pm-notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:44%;height:26px;background:#1C2B36;border-radius:0 0 16px 16px;z-index:2;
}

.pm-eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--pm-muted);margin-bottom:6px}
.pm-app h3{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;font-size:19px;margin-bottom:14px;color:var(--ws-ink)}
.pm-card{background:#F3F9FC;border-radius:16px;padding:14px;margin-bottom:10px}
.pm-card b{display:block;font-size:14px;color:var(--ws-ink)}
.pm-card span{font-size:11px;color:var(--pm-muted);line-height:1.45;display:block}
.pm-ring{
  width:112px;height:112px;border-radius:50%;margin:18px auto 14px;display:grid;place-items:center;
  background:conic-gradient(var(--ws-teal) 0 78%,#E3EEF4 78% 100%);
}
.pm-ring i{background:#fff;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:26px;color:var(--ws-teal)}
.pm-big{font-family:'Space Grotesk',sans-serif;font-size:44px;font-weight:700;color:var(--ws-teal);letter-spacing:-.03em;margin-bottom:14px}

.pm-copy h2{margin-bottom:28px;color:var(--ws-ink)}
.pm-step{
  padding:12px 0 12px 16px;border-left:2px solid transparent;opacity:.35;
  transition:opacity .35s var(--ws-ease),border-color .35s var(--ws-ease);
}
.pm-step[data-active="true"]{opacity:1;border-left-color:var(--ws-teal)}
.pm-step h4{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;font-size:20px;margin-bottom:4px;color:var(--ws-ink)}
.pm-step p{font-size:15px;line-height:1.5;color:var(--pm-muted);max-width:44ch}

/* Mobile keeps the pinned behaviour. Going static there left the phone stuck on
   screen one, so two thirds of the walkthrough never rendered. Shorter runway,
   smaller phone, tighter steps instead. */
@media (max-width:900px){
  .pm-stage{height:260vh}
  .pm-sticky{grid-template-columns:minmax(0,1fr);align-content:center;gap:clamp(18px,3vh,28px)}
  .pm-phone{height:min(460px,52svh)}
  .pm-copy h2{font-size:clamp(1.7rem,6.4vw,2.2rem);margin-bottom:14px}
  .pm-step{padding:8px 0 8px 14px}
  .pm-step h4{font-size:17px}
  .pm-step p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .pm-stage{height:auto}
  .pm-sticky{position:static;height:auto;padding-block:8vh}
  .pm-step{opacity:1;border-left-color:rgba(21,52,75,.18)}
}

/* ============================================================
   2  STICKY CARD STACK
   ============================================================ */
/* The headline crosses into the band at the top; the card crosses out of it at the
   bottom. Same device at both ends, so the band reads as bracketed rather than as
   two hard edges. */
.stack{padding-block:0 14vh;margin-top:calc(-1 * var(--ws-seam));position:relative;z-index:2}
.stack .card:only-of-type{position:static}
.card{
  position:sticky;top:calc(var(--ws-header-h) + 16px);
  background:var(--ws-paper);border-radius:var(--ws-radius);overflow:hidden;
  box-shadow:0 40px 80px -44px rgba(21,52,75,.5),0 0 0 1px var(--ws-line);
  display:grid;grid-template-columns:1fr 1fr;
  min-height:min(76vh,700px);margin-bottom:28px;
}
.card .txt{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:clamp(28px,4vw,64px)}
.card .media{position:relative;overflow:hidden;isolation:isolate}
.card.flip .txt{order:2}
.card.flip .media{order:1}
.card.tint{background:var(--ws-sky-2)}
.card.tealtype .h2{color:var(--ws-teal)}
@media (max-width:900px){
  .card{grid-template-columns:minmax(0,1fr);position:static;min-height:0}
  .card .media{aspect-ratio:4/3}
  .card.flip .txt{order:2}.card.flip .media{order:1}
}

/* ============================================================
   3  TINTED STATEMENT  the pale blue card from the Figma, full width
   ============================================================ */
.tinted{background:var(--ws-sky-2);border-radius:var(--ws-radius);padding:clamp(40px,7vw,96px);text-align:center}
.tinted .h2{max-width:16ch;margin-inline:auto}
.tinted .w{opacity:.18;transition:opacity 460ms var(--ws-ease)}
.tinted .w.on{opacity:1}
.tinted .lede{max-width:58ch;margin:28px auto 0;color:var(--ws-ink)}

.tilt{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:clamp(48px,8vh,110px)}
.tilt .t{position:relative;aspect-ratio:4/5;border-radius:var(--ws-radius);overflow:hidden;isolation:isolate}
.tilt .t:nth-child(odd){transform:rotate(-1.3deg) translateY(.7vw)}
.tilt .t:nth-child(even){transform:rotate(1.3deg) translateY(-.7vw)}
@media (max-width:760px){
  .tilt{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:66vw;overflow-x:auto;scroll-snap-type:x mandatory}
  .tilt .t{scroll-snap-align:center;transform:none}
}

/* ============================================================
   4  SKY SECTION
   ============================================================ */
.sky{background:var(--ws-sky);padding-block:clamp(72px,11vh,140px);color:var(--ws-ink)}
.sky .body,.sky .lede{color:var(--ws-ink)}
.sky-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.band{position:relative;border-radius:var(--ws-radius);overflow:hidden;aspect-ratio:3/4;isolation:isolate}
.specs{display:flex;flex-direction:column;gap:40px}
.spec-list{display:flex;flex-direction:column}
.spec{display:flex;flex-direction:column;gap:8px;padding-block:24px;border-top:1px solid rgba(21,52,75,.2)}
.spec:last-child{border-bottom:1px solid rgba(21,52,75,.2)}
@media (max-width:900px){.sky-grid{grid-template-columns:minmax(0,1fr)}.band{aspect-ratio:4/3}}

/* ============================================================
   5  FIELD NOTES
   ============================================================ */
.notes{padding-block:clamp(80px,12vh,150px)}
.notes-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vh,56px)}
.feature{position:relative;border-radius:var(--ws-radius);overflow:hidden;min-height:min(70vh,640px);isolation:isolate}
.feature .overlay{
  position:absolute;left:clamp(16px,2.6vw,40px);bottom:clamp(16px,2.6vw,40px);z-index:2;
  width:min(430px,84%);background:var(--ws-paper);border-radius:24px;
  padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:14px;
}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.note{border-radius:var(--ws-radius);overflow:hidden;background:var(--ws-sky);display:flex;flex-direction:column}
.note .media{aspect-ratio:16/10;position:relative;isolation:isolate}
.note .nbody{padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;gap:12px;color:var(--ws-ink)}
.read{font-weight:600;font-size:var(--ws-fs-nav);text-transform:uppercase;color:var(--ws-teal)}
@media (max-width:760px){.two-up{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   6  CLOSER
   ============================================================ */
.closer{background:var(--ws-sky);padding-block:clamp(60px,9vh,120px) clamp(80px,12vh,150px);text-align:center;overflow:hidden}
.closer .mega{color:var(--ws-teal)}
@media (min-width:900px){.closer .mega{white-space:nowrap}}
.closer .lede{max-width:52ch;margin:clamp(24px,3vh,44px) auto 0;color:var(--ws-ink)}
.closer .btn{margin-top:36px}

/* ============================================================
   7  FOOTER
   ============================================================ */
.ftr{background:var(--ws-ink);color:#fff;padding-block:clamp(56px,8vh,96px) 28px}
.ftr .brand-mark path{fill:#fff}
.ftr .brand-word .t{color:#fff}
.ftr-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:clamp(40px,6vh,72px)}
.ftr-groups :is(h2,h4){font-family:'Noto Sans',sans-serif;font-weight:600;font-size:var(--ws-fs-nav);line-height:1.375;text-transform:uppercase;color:var(--ws-teal);margin-bottom:18px;letter-spacing:.02em}
.ftr-groups ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ftr-groups a{color:rgba(255,255,255,.78)}
.ftr-groups a:hover{color:#fff}
/* One disclaimer, in the footer, so it is on every page rather than on the
   three that happened to have an honest-limits block. */
.ftr-disclaimer{
  max-width:78ch;margin:clamp(32px,5vh,56px) 0 0;
  font-size:14px;line-height:1.7;color:#fff;opacity:.62;
}
.ftr-bottom{
  margin-top:clamp(40px,6vh,72px);padding-top:24px;border-top:1px solid var(--ws-line-light);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:var(--ws-fs-nav);color:rgba(255,255,255,.6);
}
.locale{border:1px solid var(--ws-line-light);padding:9px 16px}
@media (max-width:760px){.ftr-groups{grid-template-columns:minmax(0,1fr);gap:32px}.ftr-bottom{justify-content:center;text-align:center}}

/* ============================================================
   PHOTOGRAPHY  every image is printed in one blue.
   The image contributes luminance only, the blue underneath supplies the hue,
   so a misty forest and an athletics track end up in the same world.
   ============================================================ */
.ph{position:absolute;inset:0;overflow:hidden;background:var(--ws-sky-2);isolation:isolate}
.ph.rel{position:relative;inset:auto;width:100%;height:100%}
.ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02)}

/* The duotone is now a HERO-ONLY device. Printing the three USP tiles in one blue
   makes them read as a set and separates the pitch from the evidence below it,
   where the photography keeps its own colour. */
.ph.duo{background:var(--ws-duo)}
.ph.duo img{mix-blend-mode:luminosity;filter:contrast(1.08)}
.ph.scrim::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(6,28,46,.78),rgba(6,28,46,.14) 52%,transparent 78%);
}
.tag{
  position:absolute;right:20px;bottom:20px;z-index:3;
  font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.35);padding:7px 12px;
}

[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--ws-dur) var(--ws-ease),transform var(--ws-dur) var(--ws-ease)}
[data-reveal].on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card{position:static}
  .tilt .t{transform:none!important}
  .hero .line,[data-reveal],.tinted .w{opacity:1!important;transform:none!important}
  .hero .line.mk::before{transform:scaleX(1)!important}
  *{transition:none!important}
}

/* ============================================================
   AUDIENCE PAGES  runners / coaches / organizations
   One set of components, three pages. Nothing here is page specific,
   so a fourth audience is markup only.
   ============================================================ */
.aud-head{padding-top:calc(var(--ws-header-h) + clamp(48px,9vh,120px));padding-bottom:clamp(36px,6vh,72px)}
.aud-head .h1{max-width:17ch}
.aud-head .lede{max-width:52ch;margin-top:clamp(20px,3vh,32px);color:var(--ws-ink)}
.aud-cta{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);flex-wrap:wrap;margin-top:clamp(28px,4vh,44px)}
.aud-cta .sup{font-size:15px;color:var(--ws-ink);opacity:.55;letter-spacing:.02em}
.aud-cta .lnk{
  font-family:'Noto Sans',sans-serif;font-weight:600;font-size:var(--ws-fs-nav);
  text-transform:uppercase;letter-spacing:.02em;color:var(--ws-ink);
  border-bottom:1px solid rgba(21,52,75,.3);padding-bottom:3px;
}
.aud-cta .lnk:hover{color:var(--ws-teal);border-color:var(--ws-teal)}

/* the problem. Each sentence is its own beat, so each gets its own line and
   its own rule above it. */
.aud-beats{background:var(--ws-sky);padding-block:clamp(56px,9vh,110px)}
.aud-beats .h2{color:var(--ws-ink);max-width:18ch;margin-bottom:clamp(28px,4vh,48px)}
.aud-beats ul{list-style:none;margin:0;padding:0;max-width:820px}
.aud-beats li{
  padding-block:clamp(18px,2.6vh,28px);border-top:1px solid rgba(21,52,75,.18);
  font-size:clamp(1.1rem,1.5vw,22px);line-height:1.5;color:var(--ws-ink);letter-spacing:.01em;
}
.aud-beats li:last-child{border-bottom:1px solid rgba(21,52,75,.18)}

/* what changes. Heading on the left, the claim and its evidence on the right. */
.aud-row{
  display:grid;grid-template-columns:minmax(0,420fr) minmax(0,700fr);
  gap:clamp(24px,4vw,72px);
  padding-block:clamp(30px,4.5vh,52px);border-top:1px solid var(--ws-line);
}
.aud-row:last-child{border-bottom:1px solid var(--ws-line)}
.aud-row .k{font-size:clamp(1.5rem,2.3vw,34px);line-height:1.2;color:var(--ws-ink)}
.aud-row .st{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.25rem,1.9vw,28px);line-height:1.3;color:var(--ws-teal);margin-bottom:16px;
}
.aud-row p{font-size:clamp(1rem,1.25vw,19px);line-height:1.6;color:var(--ws-ink);letter-spacing:.01em}
@media (max-width:860px){.aud-row{grid-template-columns:minmax(0,1fr);gap:14px}}

/* a normal Tuesday. One paragraph, set large, on the wash. */
.aud-day{background:var(--ws-sky);padding-block:clamp(60px,9vh,120px)}
.aud-day .k{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--ws-teal);margin-bottom:clamp(18px,2.6vh,28px);display:block;
}
.aud-day p{
  max-width:900px;font-size:clamp(1.25rem,2vw,30px);line-height:1.45;
  color:var(--ws-ink);letter-spacing:.01em;
}

/* ---- A normal Tuesday, and the hand-off --------------------------------
   One pinned stage carrying two passages. The steps are revealed one at a
   time by --r (0 to 1 each); when the last one is up, --x slides the whole
   flight right and takes its opacity with it, and --q surfaces the argument
   on the right out of the same wash. All three come from one scroll number.
   Nothing here is a separate scroll listener. */
.tue{position:relative;background:var(--ws-sky);padding-block:0;height:var(--tue-runway,400vh)}
.tue-stage{
  position:sticky;top:var(--ws-header-h);height:calc(100svh - var(--ws-header-h));
  display:flex;align-items:center;overflow:hidden;
}
.tue-inner{
  position:relative;width:100%;max-width:var(--ws-maxw);margin-inline:auto;
  padding-inline:var(--ws-gutter);
}
.tue-flight{
  width:min(760px,62%);
  transform:translate3d(var(--tue-x,0px),0,0);
  opacity:var(--tue-o,1);will-change:transform,opacity;
}
.tue-flight .h2{margin:0 0 clamp(20px,3vh,40px)}

.stair{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.stair-step{
  position:relative;--r:0;
  margin-left:calc(var(--i) * var(--rise,4vw));
  /* label above the line it labels, which is how the flight read when it was
     first drawn; side by side made the step a table row */
  max-width:min(560px,86%);
  padding:clamp(14px,1.9vh,22px) 0 clamp(20px,3vh,40px) clamp(18px,1.8vw,30px);
  border-top:2px solid var(--ws-teal);
  border-left:2px solid var(--ws-teal);
  /* a step is not there at all until its turn, so the flight builds rather
     than sitting greyed out waiting */
  opacity:var(--r);
  transform:translate3d(0,calc((1 - var(--r)) * 20px),0);
  will-change:opacity,transform;
}
.stair-step.last{padding-bottom:clamp(12px,1.6vh,20px)}
.stair-step .t{
  display:block;font-family:'Noto Sans',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ws-teal);margin-bottom:10px;
}
.stair-step p{
  margin:0;font-size:clamp(1rem,1.4vw,21px);line-height:1.45;
  color:var(--ws-ink);letter-spacing:.01em;
}

.tue-close{
  position:absolute;top:50%;left:var(--ws-gutter);
  width:min(520px,42%);
  transform:translate3d(calc(0px - var(--tue-cx,110px)),-50%,0);
  opacity:var(--tue-c,0);will-change:transform,opacity;
}
.tue-close h2{font-size:clamp(1.9rem,3.4vw,52px);line-height:1.06;color:var(--ws-teal);margin:0}
.tue-close .lede{margin:clamp(16px,2.2vh,26px) 0 0;color:var(--ws-ink);font-size:clamp(1rem,1.25vw,19px);line-height:1.5}
.tue-close .btn{margin-top:clamp(22px,3vh,34px)}
.tue-prose{
  position:absolute;top:50%;right:var(--ws-gutter);
  width:min(520px,42%);
  transform:translate3d(calc(var(--tue-px,120px)),-50%,0);
  opacity:var(--tue-q,0);will-change:transform,opacity;
}
.tue-prose .h2{margin:0 0 clamp(14px,2vh,24px)}
.tue-prose p{font-size:clamp(1rem,1.2vw,18px);line-height:1.6;color:var(--ws-ink);letter-spacing:.01em}
.tue-prose p + p{margin-top:14px}

@media (max-width:1000px){
  /* no room for two passages side by side, and no pin: the day is a column and
     the argument follows it */
  .tue{height:auto!important;padding-block:clamp(56px,9vh,110px)}
  .tue-stage{position:static;height:auto;display:block;overflow:visible}
  .tue-flight{width:auto;transform:none!important;opacity:1!important}
  .stair-step{margin-left:0;max-width:none;opacity:1!important;transform:none!important}
  .tue-prose{position:static;width:auto;max-width:70ch;transform:none!important;opacity:1!important;
    margin-top:clamp(48px,7vh,88px)}
  /* stacked, the closer has to come LAST: in the pinned version it is beside
     the argument, in source it sits before it */
  .tue-inner{display:flex;flex-direction:column}
  .tue-flight{order:1}
  .tue-prose{order:2}
  .tue-close{position:static;width:auto;max-width:46ch;transform:none!important;opacity:1!important;
    margin-top:clamp(48px,7vh,88px);text-align:left;order:3}
}
@media (prefers-reduced-motion:reduce){
  .tue{height:auto!important;padding-block:clamp(56px,9vh,110px)}
  .tue-stage{position:static;height:auto;display:block;overflow:visible}
  .tue-flight{width:auto;transform:none!important;opacity:1!important}
  .stair-step{opacity:1!important;transform:none!important}
  .tue-prose{position:static;width:auto;max-width:70ch;transform:none!important;opacity:1!important;
    margin-top:clamp(48px,7vh,88px)}
  /* stacked, the closer has to come LAST: in the pinned version it is beside
     the argument, in source it sits before it */
  .tue-inner{display:flex;flex-direction:column}
  .tue-flight{order:1}
  .tue-prose{order:2}
  .tue-close{position:static;width:auto;max-width:46ch;transform:none!important;opacity:1!important;
    margin-top:clamp(48px,7vh,88px);text-align:left;order:3}
}

/* prose. The longer argument passages. */
/* The .aud-prose rules went with the section on 2026-09-13. The comment
   above stays because women_tuesday_2026_09_12.py slices against it, and the
   rule below sits AFTER it for the same reason: that comment is the END of the
   slice, so anything before it is overwritten from the runners page on a re-run.
   The rescued field-note link is a flex item in .aud-cta, which stretches it to
   the column, so a label that wraps (French, German) drew its underline as a
   full-width rule under both lines. Inline, it hugs the words on each line. */
.tue-prose .aud-cta{display:block;margin-top:clamp(22px,3vh,32px)}
.aud-tail{max-width:840px;margin-top:clamp(22px,3vh,34px);display:flex;flex-direction:column;gap:12px;font-size:17px;line-height:1.55}
.aud-note{max-width:840px;margin-top:clamp(18px,2.4vh,28px);font-size:15px;line-height:1.6;color:var(--ws-body);opacity:.6}

/* a value the page cannot know yet. Rendered, never typed. */
.tok{
  font-variant-numeric:tabular-nums;border-bottom:1px dotted rgba(21,52,75,.45);
  padding-bottom:1px;opacity:.85;
}

.aud-close .lede{max-width:46ch;margin-inline:auto}

/* ============================================================
   CYCLE  one thing at a time, changed by scroll
   The section pins and the reader moves through its items instead of
   past them. Same hold-then-change grammar as the phone stage: each item
   holds, then hands over inside a window at the end of its dwell. One
   component drives both the statements and the What changes rows.
   ============================================================ */
.cyc{position:relative}
.cyc-stage{
  position:sticky;top:var(--ws-header-h);
  height:calc(100svh - var(--ws-header-h));
  display:grid;align-content:center;overflow:hidden;
}
.cyc-inner{width:100%}
/* A floor under the whitespace above and below the statement. The stage centres
   its content, so this is invisible while there is room and is read by the fitter
   once there is not: the type scales down rather than the margin vanishing. */
.aud-beats.cyc .cyc-inner{padding-block:clamp(32px,6vh,72px)}
.cyc-inner > .h2{margin-bottom:clamp(26px,4vh,52px)}
/* The heading and the statement beneath it were the same colour at similar
   weight, so the heading read as the first line of the statement. Teal separates
   them, but the brand teal measures 2.2:1 against the sky wash and fails even
   the large-text floor, so this is the same hue darkened to 4.8:1. */
.aud-beats.cyc .cyc-inner > .h2{color:var(--ws-teal-deep)}
/* the deck reserves the height of its tallest item, so the heading and the rail
   never move as the items change */
.cyc-deck{position:relative}
.cyc-card{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  will-change:opacity,transform;
}
.cyc-card.lead{position:relative;opacity:1}
.cyc-rail{display:flex;gap:8px;margin-top:clamp(26px,4vh,52px)}
.cyc-rail i{
  display:block;height:3px;width:44px;border-radius:2px;
  background:rgba(21,52,75,.18);overflow:hidden;
}
.cyc-rail i b{display:block;height:100%;width:0;background:var(--ws-teal)}

/* the statements, one at a time, so they can be much larger than a list */
/* One statement owns the screen, so it is sized like a headline rather than
   like a list item, and capped by viewport HEIGHT as well as width or the
   longest statement outgrows a short window. */
.cyc-beat{
  font-size:calc(clamp(1.35rem,min(4.1vw,6.6vh),62px) * var(--cyc-fit,1));
  line-height:1.2;letter-spacing:-.015em;color:var(--ws-ink);max-width:21ch;
}
.aud-beats.cyc{background:var(--ws-sky);padding-block:0}

/* the What changes rows keep their two column shape inside the deck */
.cyc .aud-row{border:0;padding-block:0}
.cyc .aud-row .k{font-size:calc(clamp(1.7rem,min(3.1vw,5vh),46px) * var(--cyc-fit,1))}
.cyc .aud-row .st{font-size:calc(clamp(1.35rem,min(2.3vw,3.7vh),34px) * var(--cyc-fit,1));margin-bottom:20px}
.cyc .aud-row p{font-size:calc(clamp(1.02rem,min(1.35vw,2.2vh),21px) * var(--cyc-fit,1))}

@media (max-width:860px){
  .cyc-beat{font-size:clamp(1.25rem,5.2vw,30px);max-width:none}
  .cyc-rail i{width:32px}
}
@media (prefers-reduced-motion:reduce){
  /* no pin, no fade: every item present, in order */
  .cyc{height:auto!important;padding-block:clamp(56px,9vh,110px)}
  .cyc-stage{position:static;height:auto;display:block;overflow:visible}
  .cyc-deck{display:flex;flex-direction:column;gap:clamp(26px,4vh,48px);min-height:0!important}
  .cyc-card{position:relative!important;inset:auto;opacity:1!important;transform:none!important;pointer-events:auto}
  .cyc-rail{display:none}
}

/* The shared closer sets mega type and, above 900px, nowrap. That works for the
   homepage's four words and clips a whole sentence. These closers are sentences. */
.aud-close .mega{
  font-size:clamp(2.3rem,5.6vw,88px);line-height:1.02;
  white-space:normal;max-width:22ch;margin-inline:auto;
}

/* A CTA can be a whole sentence on these pages, and .btn is nowrap by design.
   Let the long ones wrap rather than push the page sideways on a phone. */
@media (max-width:560px){
  .aud-cta .btn,.aud-close .btn{white-space:normal;text-align:center;max-width:100%;line-height:1.25}
  .aud-cta{gap:16px}
}

/* Tokens the block forgot, defined once at the root before anything asks.

   The deep teal is in the brand book and in the button hover state, but it was
   never written into the token block, so every rule that asked for it resolved
   to nothing and the declaration was thrown away. That is why the spots bar had
   no fill: an invalid colour inside linear-gradient invalidates the whole
   background.

   The other four arrived with the v2 segmented control, which is their only
   consumer today and will not be their last:

     --ws-muted        idle UI label. The designer specified #6A7F8E, which is
                       4.17:1 on white and misses AA for text below 18.66px
                       bold. This is the same hue and saturation three shades
                       down, at 4.53:1. On a control the muted label is the
                       affordance that says which option is NOT chosen, so it
                       has to be readable.
     --ws-line-strong  a hairline with presence, for a boundary that carries
                       state. Twice --ws-line, still a hairline.
     --ws-fs-ui        control labels. One step below --ws-fs-nav.
     --ws-dur-micro    a colour change on hover. Short enough not to lag the
                       pointer, long enough not to snap. */
:root{
  --ws-teal-deep:#00786C;
  --ws-muted:#657987;
  --ws-line-strong:rgba(21,52,75,.32);
  --ws-fs-ui:15px;
  --ws-dur-micro:220ms;
}

/* ============================================================
   LANGUAGE PICKER
   Seven locales in the header, next to the sign-in and join
   buttons, because that is the corner people already look in
   for account-shaped controls. The names are endonyms and stay
   in their own language on every page.
   ============================================================ */
.lang{position:relative;flex:none}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;appearance:none;border:0;cursor:pointer;
  background:none;padding:9px 10px;color:var(--ws-body);opacity:.62;
  font-family:'Noto Sans',sans-serif;font-weight:600;font-size:var(--ws-fs-nav);letter-spacing:.02em;
  transition:opacity 200ms var(--ws-ease);
}
.lang-btn:hover,.lang.open .lang-btn{opacity:1;color:var(--ws-teal-deep)}
.lang-btn:focus-visible{outline:3px solid var(--ws-ink);outline-offset:2px}
.lang-btn svg{flex:none}
.lang-btn .chev{transition:transform 260ms var(--ws-ease)}
.lang.open .lang-btn .chev{transform:rotate(180deg)}
.lang-drop{
  position:absolute;top:calc(100% + 6px);right:0;z-index:90;min-width:184px;
  background:var(--ws-paper);box-shadow:0 1px 0 var(--ws-line),0 18px 40px rgba(21,52,75,.14);
  padding:8px;display:grid;gap:2px;
}
/* The `hidden` attribute is a UA rule, and any author rule that sets display
   beats it. Without this line the panel has display:grid and sits open on every
   page from the moment it loads, attribute or no attribute. The nav dropdowns
   above already carry the same line; this one was missed. */
.lang-drop[hidden]{display:none}
.lang-drop a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 12px;color:var(--ws-body);opacity:.78;
  font-family:'Noto Sans',sans-serif;font-weight:500;font-size:16px;
  transition:background 180ms var(--ws-ease),opacity 180ms var(--ws-ease);
}
.lang-drop a:hover{background:var(--ws-sky);opacity:1}
.lang-drop a[aria-current="true"]{font-weight:700;opacity:1;color:var(--ws-teal-deep)}

/* The header runs out of room before the nav does, so below the breakpoint the
   picker lives in the menu panel instead of beside it. */
.menu-langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--ws-line)}
.menu-langs a{
  padding:8px 12px;font-size:15px;font-weight:600;color:var(--ws-body);opacity:.7;
  box-shadow:inset 0 0 0 1px var(--ws-line);
}
.menu-langs a[aria-current="true"]{opacity:1;color:#fff;background:var(--ws-ink);box-shadow:none}
@media (max-width:1024px){ .actions .lang{display:none} }
@media (min-width:1025px){ .menu-langs{display:none} }

/* German and Dutch compounds are longer than the English they replace, and a
   fixed-width card stays a fixed-width card. Let a long word break rather than
   push the page wider than the screen. Zero specificity, so nothing else has to
   move out of its way. */
:where(p,li,dd,dt,td,th,figcaption,label,button,a,h1,h2,h3,h4,.d){overflow-wrap:break-word}
:where(:lang(de),:lang(nl)) :where(p,li,dd,dt,td){hyphens:auto}

/* ============================================================
   SIGN-UP
   Opened by every "Start 30 days free" button. Two steps: who you
   are, then how the trial ends. The second step is the whole point
   of the design, so it is a real choice on one screen rather than a
   card field with a skip link hidden under it.
   ============================================================ */
.su-veil{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(21,52,75,.55);backdrop-filter:blur(3px);
  padding:clamp(16px,4vh,56px) var(--ws-gutter);overflow:auto;
}
.su-veil.on{display:grid;place-items:start center}
.su{
  position:relative;width:min(660px,100%);background:var(--ws-paper);
  border-radius:var(--ws-radius);padding:clamp(28px,4vw,52px);
  box-shadow:0 60px 120px -50px rgba(21,52,75,.7);
  opacity:0;transform:translateY(20px) scale(.98);
  transition:opacity 420ms var(--ws-ease),transform 420ms var(--ws-ease);
}
.su-veil.on .su{opacity:1;transform:none}
.su-x{
  position:absolute;top:18px;right:18px;width:40px;height:40px;
  display:grid;place-items:center;border:0;background:none;cursor:pointer;
  color:var(--ws-ink);opacity:.5;font-size:26px;line-height:1;
}
.su-x:hover{opacity:1}
.su h2{font-size:clamp(1.2rem,2.5vw,34px);line-height:1.14;margin:0}
.su-sub{margin:0;font-size:17px;line-height:1.45;color:var(--ws-body);opacity:.72}

/* Two dots rather than "step 1 of 2", so the form reads as short. */
.su-dots{display:flex;gap:8px;margin-top:26px}
.su-dots i{width:26px;height:3px;background:var(--ws-line);display:block}
.su-dots i.on{background:var(--ws-teal)}

.su-step{display:none;margin-top:26px}
.su-step .su-card{margin-top:0}
.su-step.on{display:block}
.su-field{margin-top:18px}
.su-field label{display:block;font-family:'Noto Sans',sans-serif;font-weight:600;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ws-ink);margin-bottom:8px}
.su-field input{
  width:100%;font-family:'Noto Sans',sans-serif;font-size:17px;color:var(--ws-body);
  background:var(--ws-paper);border:1px solid var(--ws-line);border-radius:0;
  padding:14px 16px;min-height:54px;
}
.su-field input:focus{outline:3px solid var(--ws-teal);outline-offset:1px;border-color:transparent}
.su-field .hint{margin:8px 0 0;font-size:14px;color:var(--ws-body);opacity:.6}
.su-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.su-row{grid-template-columns:minmax(0,1fr)}}

/* Inline, not a panel: inside step two it is one of three things stacked in a
   column and a tinted box around it read as a second dialog. */
.su-plan{margin:22px 0 26px;display:flex;flex-direction:column;gap:5px}
.su-plan .k{
  font-family:'Noto Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ws-teal);
}
.su-plan b{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:19px;color:var(--ws-ink)}
.su-plan .p{font-size:15.5px;line-height:1.4;color:var(--ws-body);opacity:.75}

.su-login{margin:0 0 0 auto;text-align:right;font-size:16px;color:var(--ws-body);opacity:.7}
/* Side by side there is no room for both on a phone, so it drops under the
   button and goes back to reading left to right with everything else. */
@media (max-width:560px){
  .su-login{margin:4px 0 0;width:100%;text-align:left}
}
.su-login a{color:var(--ws-teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.su-login a:hover{color:var(--ws-ink)}
/* The way out, quiet by default and teal only when it is being used. A full
   width outlined button competed with the primary one it sits under; a plain
   line does the same job without arguing for itself. */
.su-later{margin-top:6px}
.su-later .btn{
  width:auto;min-height:0;padding:8px 0;background:transparent;
  /* sentence case, because uppercase is the kit's emphasis and this is the one
     control on the screen that should not be asking for attention */
  text-transform:none;letter-spacing:.02em;font-weight:500;
  color:var(--ws-body);opacity:.55;text-decoration:underline;text-underline-offset:4px;
  transition:color 220ms var(--ws-ease),opacity 220ms var(--ws-ease);
}
.su-later .btn:hover,.su-later .btn:focus-visible{color:var(--ws-teal);opacity:1;background:transparent}
.su-later .btn::before,.su-later .btn:hover::before{background:transparent}
/* The first sentence holds one line, which is why the title's lower bound is
   1.2rem rather than 1.5: at 390px a 24px setting of it is wider than the panel
   and a line that cannot wrap has nowhere to go but sideways. */
.su h2 .nb{white-space:nowrap}
.su-card{margin-top:4px}

.su-actions{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.su-actions .btn{flex:0 0 auto}
.su-back{background:none;border:0;cursor:pointer;font-family:'Noto Sans',sans-serif;
  font-weight:600;font-size:16px;color:var(--ws-body);opacity:.6;padding:8px 0}
.su-back:hover{opacity:1;color:var(--ws-teal)}
.su-fine{margin:18px 0 0;font-size:14px;line-height:1.55;color:var(--ws-body);opacity:.6}

@media (prefers-reduced-motion:reduce){ .su{transition:none} }

/* Tokens the block forgot, defined once at the root before anything asks.

   The deep teal is in the brand book and in the button hover state, but it was
   never written into the token block, so every rule that asked for it resolved
   to nothing and the declaration was thrown away. That is why the spots bar had
   no fill: an invalid colour inside linear-gradient invalidates the whole
   background.

   The other four arrived with the v2 segmented control, which is their only
   consumer today and will not be their last:

     --ws-muted        idle UI label. The designer specified #6A7F8E, which is
                       4.17:1 on white and misses AA for text below 18.66px
                       bold. This is the same hue and saturation three shades
                       down, at 4.53:1. On a control the muted label is the
                       affordance that says which option is NOT chosen, so it
                       has to be readable.
     --ws-line-strong  a hairline with presence, for a boundary that carries
                       state. Twice --ws-line, still a hairline.
     --ws-fs-ui        control labels. One step below --ws-fs-nav.
     --ws-dur-micro    a colour change on hover. Short enough not to lag the
                       pointer, long enough not to snap. */
:root{
  --ws-teal-deep:#00786C;
  --ws-muted:#657987;
  --ws-line-strong:rgba(21,52,75,.32);
  --ws-fs-ui:15px;
  --ws-dur-micro:220ms;
}

/* ============================================================
   BETA SIGNUP 2026-10-03
   The owner-approved redesign: ink rail with one moving highlight, sky
   title panel, angled teal action, full screen on a phone. Written by
   build/beta_signup_2026_10_03.py; the app's /beta page carries the same
   design on its tokens (apps/web/app/beta/_signup/beta-signup.css).
   Everything is scoped to #btVeil and namespaced .bsu-, so the trial dialog's
   .su- shell above is untouched.
   ============================================================ */
#btVeil{
  --bs-ink:var(--ws-ink);--bs-teal:var(--ws-teal);--bs-deep:var(--ws-teal-deep,#00786C);
  --bs-sky:var(--ws-sky);--bs-paper:var(--ws-paper);--bs-muted:var(--ws-muted,#6A7F8E);
  --bs-quiet:#486173;--bs-line:rgba(21,52,75,.14);--bs-field:rgba(21,52,75,.32);
  --bs-selected:#E8F8F6;--bs-mint:#EDF9F7;--bs-mint-line:#B8D9D6;--bs-seq2:#A9E4DC;
  --bs-on-ink:#E2F5FF;--bs-ink-wash:rgba(226,245,255,.14);--bs-line-light:rgba(255,255,255,.2);
  --bs-error:#A32B2B;--bs-error-fill:#FCF3F3;--bs-error-line:#F5D4D4;--bs-sky-lift:#F4FBFF;
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:32px;
  background:rgba(23,59,82,.42);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  color:var(--bs-ink);font-family:'Noto Sans',system-ui,sans-serif;font-size:14px;line-height:1.6;font-weight:400;letter-spacing:0;
  -webkit-hyphens:manual;hyphens:manual;
}
#btVeil[hidden]{display:none}
#btVeil *,#btVeil *::before,#btVeil *::after{box-sizing:border-box}
#btVeil :is(h2,h3){font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;margin:0}
#btVeil :is(button,input,select){font:inherit;color:inherit}
#btVeil button{cursor:pointer}
#btVeil button:disabled{cursor:wait;opacity:.6}
#btVeil :is(a,button,input,select):focus-visible{outline:3px solid var(--bs-deep);outline-offset:4px}
#btVeil [hidden]{display:none!important}
#btVeil .bsu-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#btVeil svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#btVeil .bsu-shell{width:min(1120px,100%);height:min(810px,calc(100dvh - 64px));display:grid;grid-template-columns:278px minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden;border-radius:28px;background:var(--bs-paper);box-shadow:0 35px 100px rgba(7,31,53,.27)}
/* rail */
#btVeil .bsu-rail{min-height:0;overflow-y:auto;scrollbar-width:none;padding:36px 27px 27px;display:flex;flex-direction:column;background:var(--bs-ink);color:var(--bs-paper)}
#btVeil .bsu-brand{display:flex;align-items:center;gap:9px;height:36px;width:fit-content;color:#fff;text-decoration:none}
#btVeil .bsu-brand-mark{width:35px;height:35px;stroke:none}
#btVeil .bsu-brand-mark path{fill:#fff}
#btVeil .bsu-brand-mark path.a{fill:var(--bs-teal)}
#btVeil .bsu-brand-word{font-family:'Space Grotesk',system-ui,sans-serif;font-size:30px;line-height:1;letter-spacing:-.06em;color:#fff}
#btVeil .bsu-brand-word .w{color:var(--bs-teal)}
#btVeil .bsu-rail-intro{margin:52px 0 31px}
#btVeil .bsu-kicker{font-size:10px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--bs-seq2)}
#btVeil .bsu-rail-title{margin:12px 0 0;font-family:'Space Grotesk',system-ui,sans-serif;font-size:31px;line-height:1.18;letter-spacing:-.045em;font-weight:500}
#btVeil .bsu-rail-title span{display:block}
#btVeil .bsu-progress{position:relative;margin-inline:-11px;--step:0}
#btVeil .bsu-progress-highlight{position:absolute;inset:0 0 auto;height:68px;border-radius:15px;background:var(--bs-ink-wash);transform:translateY(calc(var(--step)*80px));transition:transform 320ms cubic-bezier(0,0,.38,.9)}
#btVeil .bsu-progress ol{position:relative;display:grid;gap:12px;margin:0;padding:0;list-style:none}
#btVeil .bsu-progress li{min-height:68px;display:flex;align-items:center;gap:14px;padding:10px 13px;color:var(--bs-on-ink)}
#btVeil .bsu-step-name{display:grid;gap:1px;font-size:13px}
#btVeil .bsu-step-name small{font-size:10px;opacity:.8}
#btVeil .bsu-step-marker{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--bs-line-light);border-radius:50%;font-family:'Space Grotesk',system-ui,sans-serif;font-size:13px}
#btVeil .bsu-step-marker svg{width:17px;height:17px;display:none}
#btVeil .bsu-step-done{display:none}
#btVeil .bsu-progress li[data-state="current"]{color:#fff}
#btVeil .bsu-progress li[data-state="current"] .bsu-step-marker{background:var(--bs-teal);border-color:var(--bs-teal);color:var(--bs-ink)}
#btVeil .bsu-progress li[data-state="done"] .bsu-step-marker{color:var(--bs-teal);border-color:#3E827F}
#btVeil .bsu-progress li[data-state="done"] .bsu-step-n{display:none}
#btVeil .bsu-progress li[data-state="done"] .bsu-step-marker svg{display:block}
#btVeil .bsu-rail-bottom{margin-top:auto;padding-top:34px}
#btVeil .bsu-rail-line{display:block;width:36px;height:3px;background:var(--bs-teal);transform:skewX(-18deg)}
#btVeil .bsu-rail-bottom p{margin:18px 0 12px;font-family:'Space Grotesk',system-ui,sans-serif;font-size:27px;line-height:1.16;letter-spacing:-.04em;font-weight:500}
#btVeil .bsu-rail-bottom p span,#btVeil .bsu-rail-bottom p strong{display:block}
#btVeil .bsu-rail-bottom strong{font-weight:500;color:var(--bs-seq2)}
/* panel */
#btVeil .bsu-panel{min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}
#btVeil .bsu-topbar{min-height:70px;padding:12px 28px 12px 32px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
#btVeil .bsu-topbar-label{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--bs-quiet)}
#btVeil .bsu-topbar-label i{width:6px;height:6px;border-radius:50%;background:var(--bs-deep)}
#btVeil .bsu-close{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--bs-line);border-radius:50%;background:var(--bs-paper);color:var(--bs-quiet)}
#btVeil .bsu-close:hover{background:var(--bs-sky);color:var(--bs-ink)}
#btVeil .bsu-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;padding:0 32px 26px}
#btVeil .bsu-sky{border-radius:24px;background:linear-gradient(145deg,var(--bs-sky) 0%,var(--bs-sky-lift) 58%,#D8F1FF 100%);padding:26px 29px 27px}
#btVeil .bsu-title{margin:0 0 13px;font-size:43px;line-height:1.08;letter-spacing:-.05em;color:var(--bs-ink);overflow-wrap:anywhere;outline:none}
#btVeil .bsu-title span{display:block}
#btVeil [data-stage="join"] .bsu-title span{display:inline}
#btVeil .bsu-intro{margin:0;max-width:560px;font-size:13px;line-height:1.75;color:var(--bs-quiet)}
#btVeil .bsu-offer{display:flex;flex-wrap:wrap;gap:3px 8px;margin:16px 0 0;font-size:11px;color:var(--bs-quiet)}
#btVeil .bsu-offer strong{font-weight:500;color:var(--bs-deep)}
/* signing up joins the waiting list (owner feedback 2026-10-14); an organisation talks to us instead */
#btVeil .bsu-how{max-width:560px;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--bs-mint-line)}
#btVeil .bsu-how-title{margin:0 0 8px;font-size:11px;font-weight:500;color:var(--bs-ink)}
#btVeil .bsu-how ol{display:grid;gap:5px;margin:0;padding:0;list-style:none}
#btVeil .bsu-how li{display:flex;gap:10px;align-items:baseline;font-size:12px;line-height:1.6;color:var(--bs-quiet)}
#btVeil .bsu-how li > span{flex:none;font-family:'Space Grotesk',system-ui,sans-serif;font-size:11px;color:var(--bs-deep)}
#btVeil .bsu-shell[data-aud="org"] .bsu-how{display:none!important}
/* forms */
#btVeil .bsu-form{padding:25px 4px 0}
#btVeil .bsu-fieldset{min-width:0;margin:0;padding:0;border:0}
#btVeil .bsu-fieldset legend{width:100%;margin:0 0 11px;padding:0;font-size:13px;font-weight:500;color:var(--bs-ink)}
#btVeil .bsu-tag{margin-left:7px;font-size:10px;font-weight:400;color:var(--bs-quiet)}
#btVeil .bsu-field{display:grid;gap:9px;align-content:start}
#btVeil .bsu-field > label{font-size:13px;font-weight:500;color:var(--bs-ink)}
#btVeil .bsu-field :is(input,select){width:100%;min-width:0;height:51px;padding:12px 15px;border:1px solid var(--bs-field);border-radius:11px;background:var(--bs-paper);color:var(--bs-ink);font-size:15px;-webkit-appearance:none;appearance:none}
#btVeil .bsu-field select{padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--bs-quiet) 50%),linear-gradient(135deg,var(--bs-quiet) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
#btVeil .bsu-field :is(input,select):hover{border-color:var(--bs-muted)}
#btVeil .bsu-field input::placeholder{color:#758995}
#btVeil .bsu-field input[aria-invalid="true"]{border-color:var(--bs-error)}
#btVeil .bsu-hint{margin:0;font-size:11px;color:var(--bs-quiet)}
#btVeil .bsu-error{margin:0;font-size:12px;color:var(--bs-error)}
#btVeil .bsu-error-box{margin-top:16px;padding:12px 14px;border:1px solid var(--bs-error-line);border-radius:10px;background:var(--bs-error-fill)}
#btVeil .bsu-error-box:focus{outline:2px solid var(--bs-error);outline-offset:2px}
#btVeil .hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
#btVeil .bsu-audiences{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#btVeil :is(.bsu-audience,.bsu-choice,.bsu-platform){position:relative;display:flex;align-items:center;gap:10px;border:1px solid var(--bs-field);border-radius:12px;background:var(--bs-paper);color:var(--bs-ink);cursor:pointer;transition:background-color 200ms cubic-bezier(.2,0,.38,.9),border-color 200ms cubic-bezier(.2,0,.38,.9)}
#btVeil .bsu-audience{align-items:flex-start;min-height:78px;padding:16px 13px}
#btVeil .bsu-audience-text strong{display:block;font-size:13px;font-weight:500}
#btVeil .bsu-audience-text small{display:block;margin-top:2px;font-size:10px;color:var(--bs-quiet)}
#btVeil :is(.bsu-audience,.bsu-choice,.bsu-platform) input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#btVeil :is(.bsu-audience,.bsu-choice,.bsu-platform):hover{border-color:var(--bs-deep)}
#btVeil :is(.bsu-audience,.bsu-choice):has(input:checked){border-color:var(--bs-deep);background:var(--bs-selected);box-shadow:inset 0 0 0 .5px var(--bs-deep)}
#btVeil :is(.bsu-audience,.bsu-choice,.bsu-platform,.bsu-consent):has(input:focus-visible){outline:3px solid var(--bs-deep);outline-offset:3px}
#btVeil :is(.bsu-audience,.bsu-choice,.bsu-platform,.bsu-consent):has(input:disabled){opacity:.65;cursor:wait}
#btVeil .bsu-dot{display:block;width:15px;height:15px;flex:0 0 15px;border:1px solid #829EAE;border-radius:50%;background:var(--bs-paper)}
#btVeil .bsu-audience .bsu-dot{margin-top:3px}
#btVeil :has(> input:checked) > .bsu-dot{border:5px solid var(--bs-deep)}
#btVeil .bsu-name-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 18px}
/* preferences */
#btVeil .bsu-preferences{display:grid;gap:24px}
#btVeil .bsu-question{display:grid;gap:14px}
#btVeil .bsu-sent{display:flex;gap:11px;align-items:flex-start;padding-bottom:21px;border-bottom:1px solid var(--bs-line);font-size:12px}
#btVeil .bsu-sent strong{font-weight:500}
#btVeil .bsu-sent p{margin:3px 0 0;font-size:11px;color:var(--bs-quiet);overflow-wrap:anywhere}
#btVeil .bsu-sent-check{width:25px;height:25px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--bs-selected);color:var(--bs-deep)}
#btVeil .bsu-sent-check svg{width:16px;height:16px}
#btVeil .bsu-address{font-weight:500;color:var(--bs-ink);overflow-wrap:anywhere}
#btVeil .bsu-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#btVeil .bsu-choice{min-height:50px;padding:10px 13px;font-size:12px}
#btVeil .bsu-clear{margin-top:6px;padding:0;border:0;background:none;font-size:10px;color:var(--bs-deep);text-decoration:underline;text-underline-offset:3px}
#btVeil .bsu-legend-hint{margin:-4px 0 12px}
#btVeil .bsu-platforms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#btVeil .bsu-platform{min-height:49px;padding:12px 14px;gap:11px;font-size:12px}
#btVeil .bsu-platform-none{grid-column:1/-1;background:var(--bs-sky-lift)}
#btVeil .bsu-platform:has(input:checked){border-color:var(--bs-deep);background:var(--bs-selected)}
#btVeil .bsu-mark{display:grid;place-items:center;width:16px;height:16px;flex:0 0 16px;border:1px solid #9AAFBB;border-radius:4px;color:#fff}
#btVeil .bsu-mark svg{width:12px;height:12px;stroke-width:3;visibility:hidden}
#btVeil .bsu-platform:has(input:checked) .bsu-mark{border-color:var(--bs-deep);background:var(--bs-deep)}
#btVeil .bsu-platform:has(input:checked) .bsu-mark svg{visibility:visible}
#btVeil .bsu-updates{padding:23px;border:1px solid var(--bs-mint-line);border-radius:19px;background:var(--bs-mint)}
#btVeil .bsu-updates-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
#btVeil .bsu-updates-heading h3{font-size:24px;line-height:1.2;letter-spacing:-.035em;color:var(--bs-ink)}
#btVeil .bsu-updates-heading span{font-size:10px;color:var(--bs-deep)}
#btVeil .bsu-updates > p{max-width:590px;margin:10px 0 18px;font-size:12px;line-height:1.8;color:var(--bs-quiet)}
#btVeil .bsu-updates > .bsu-updates-note{margin:10px 0 0;font-size:11px}
#btVeil .bsu-consent{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;border:1px solid var(--bs-mint-line);border-radius:11px;background:var(--bs-paper);cursor:pointer}
#btVeil .bsu-consent:hover,#btVeil .bsu-consent:has(input:checked){border-color:var(--bs-deep)}
#btVeil .bsu-consent input{width:21px;height:21px;flex:0 0 auto;margin:2px 0 0;accent-color:var(--bs-deep)}
#btVeil .bsu-consent input:focus-visible{outline:none}
#btVeil .bsu-consent > span{display:grid;gap:3px}
#btVeil .bsu-consent strong{font-size:13px;font-weight:600;color:var(--bs-ink)}
#btVeil .bsu-consent > span > span{font-size:11px;color:var(--bs-quiet)}
/* finish */
#btVeil .bsu-finish{padding:30px 16px 10px}
#btVeil .bsu-finish h3{margin:0 0 9px;font-size:25px;letter-spacing:-.035em;color:var(--bs-ink)}
#btVeil .bsu-finish > p{max-width:520px;margin:0;font-size:13px;line-height:1.9;color:var(--bs-quiet)}
#btVeil .bsu-next-steps{display:grid;gap:18px;margin:25px 0 0;padding:23px 0 0;border-top:1px solid var(--bs-line);list-style:none}
#btVeil .bsu-next-steps li{display:flex;gap:14px;align-items:flex-start}
#btVeil .bsu-next-steps li > span{padding-top:3px;font-family:'Space Grotesk',system-ui,sans-serif;font-size:13px;color:var(--bs-deep)}
#btVeil .bsu-next-steps p{display:grid;gap:3px;margin:0}
#btVeil .bsu-next-steps strong{font-size:12px;font-weight:500}
#btVeil .bsu-next-steps small{font-size:11px;color:var(--bs-quiet)}
#btVeil .bsu-finish > .bsu-saved{display:flex;gap:7px;align-items:center;margin:24px 0 0;font-size:11px;color:var(--bs-deep)}
#btVeil .bsu-saved svg{width:15px;height:15px}
/* dock */
#btVeil .bsu-dock{flex:0 0 auto;display:grid;gap:12px;padding:20px 36px 21px;border-top:1px solid var(--bs-line);background:var(--bs-paper)}
#btVeil .bsu-dock-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
#btVeil .bsu-privacy{font-size:11px;line-height:1.75;color:var(--bs-deep);text-decoration:underline;text-underline-offset:3px}
#btVeil .bsu-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 0;border:0;background:none;color:var(--bs-quiet);font-size:13px;font-weight:500}
#btVeil .bsu-back:hover{color:var(--bs-ink)}
#btVeil .bsu-back svg{width:17px;height:17px}
#btVeil .bsu-primary{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:50px;padding:13px 24px 13px 32px;border:0;background:none;color:var(--bs-ink);font-size:13px;font-weight:600;white-space:nowrap}
#btVeil .bsu-primary::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--bs-teal);clip-path:polygon(16px 0,100% 0,100% 100%,0 100%);transition:background-color 200ms cubic-bezier(.2,0,.38,.9)}
#btVeil .bsu-primary:hover::before{background:#31C7B5}
#btVeil .bsu-primary svg{transition:transform 200ms cubic-bezier(.2,0,.38,.9)}
#btVeil .bsu-primary:hover svg{transform:translateX(3px)}
#btVeil .bsu-primary:focus-visible{outline:3px solid var(--bs-ink);outline-offset:4px}
#btVeil .bsu-skip{padding:2px 0;border:0;background:none;font-size:11px;color:var(--bs-quiet);text-decoration:underline;text-underline-offset:4px}
#btVeil .bsu-skip:hover{color:var(--bs-ink)}
#btVeil .bsu-thanks{margin:0;font-size:11px;color:var(--bs-quiet)}
/* which parts show at which stage */
#btVeil [data-stage="join"] [data-when="later"],
#btVeil .bsu-shell:not([data-stage="join"]) [data-when="join"],
#btVeil .bsu-shell:not([data-stage="preferences"]) [data-when="preferences"],
#btVeil .bsu-shell:not([data-stage="done"]):not([data-stage="already"]) [data-when="finish"],
#btVeil .bsu-shell:not([data-stage="done"]) .bsu-finish [data-when="done"],
#btVeil .bsu-shell:not([data-stage="already"]) .bsu-finish [data-when="already"]{display:none!important}
#btVeil .bsu-shell[data-aud="runner"] .bsu-preferences [data-aud]:not([data-aud="runner"]),
#btVeil .bsu-shell[data-aud="coach"] .bsu-preferences [data-aud]:not([data-aud="coach"]),
#btVeil .bsu-shell[data-aud="org"] .bsu-preferences [data-aud]:not([data-aud="org"]){display:none!important}
@media (min-width:721px) and (max-height:790px){
  #btVeil .bsu-rail-intro{margin:35px 0 20px}
  #btVeil .bsu-rail-bottom{padding-top:20px}
  #btVeil .bsu-rail-bottom p{font-size:23px}
  #btVeil .bsu-sky{padding-block:21px}
  #btVeil .bsu-title{font-size:36px}
  #btVeil .bsu-topbar{min-height:60px}
  #btVeil .bsu-form{padding-top:19px}
  #btVeil .bsu-audience{min-height:68px;padding-block:11px}
}
@media (min-width:721px) and (max-width:1000px){
  #btVeil{padding:18px}
  #btVeil .bsu-shell{height:calc(100dvh - 36px);grid-template-columns:224px minmax(0,1fr)}
  #btVeil .bsu-rail{padding-inline:22px}
  #btVeil .bsu-rail-title{font-size:28px}
  #btVeil .bsu-brand-word{font-size:27px}
  #btVeil .bsu-scroll,#btVeil .bsu-topbar{padding-inline:24px}
  #btVeil .bsu-audiences{gap:7px}
  #btVeil .bsu-audience{padding:13px 10px;gap:7px}
  #btVeil .bsu-audience-text strong{font-size:12px}
  #btVeil .bsu-audience-text small{font-size:9px}
  #btVeil .bsu-platforms{grid-template-columns:repeat(3,minmax(0,1fr))}
  #btVeil .bsu-sky{padding-inline:23px}
  #btVeil .bsu-title{font-size:36px}
  #btVeil .bsu-dock{padding-inline:28px}
  #btVeil .bsu-thanks{display:none}
}
@media (max-width:720px){
  #btVeil{display:block;padding:0}
  #btVeil .bsu-shell{width:100%;height:100dvh;display:flex;flex-direction:column;border-radius:0;box-shadow:none}
  #btVeil .bsu-rail{display:block;flex:0 0 auto;padding:max(18px,env(safe-area-inset-top)) 21px 14px}
  #btVeil .bsu-brand-word{font-size:25px}
  #btVeil .bsu-brand-mark{width:29px;height:29px}
  #btVeil .bsu-rail-intro,#btVeil .bsu-rail-bottom{display:none}
  #btVeil .bsu-progress{margin:16px -8px 0}
  #btVeil .bsu-progress ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  #btVeil .bsu-progress li{flex-direction:column;align-items:flex-start;min-height:76px;gap:7px;padding:9px 8px}
  #btVeil .bsu-step-marker{width:25px;height:25px;font-size:10px}
  #btVeil .bsu-step-marker svg{width:14px;height:14px}
  #btVeil .bsu-step-name{display:block;font-size:10px;line-height:1.4}
  #btVeil .bsu-step-name small{display:none}
  #btVeil .bsu-progress-highlight{height:76px;width:calc((100% - 10px)/3);border-radius:9px;transform:translateX(calc(var(--step)*(100% + 5px)))}
  #btVeil .bsu-panel{flex:1}
  #btVeil .bsu-topbar{min-height:49px;padding:7px 19px}
  #btVeil .bsu-topbar-label{font-size:10px}
  #btVeil .bsu-scroll{padding:0 18px 24px;scrollbar-gutter:auto}
  #btVeil .bsu-sky{padding:23px;border-radius:20px}
  #btVeil .bsu-title{font-size:34px}
  #btVeil [data-stage="join"] .bsu-title span{display:block}
  #btVeil .bsu-intro{font-size:12px}
  #btVeil .bsu-how li{font-size:11px}
  #btVeil .bsu-form{padding:22px 1px 0}
  #btVeil .bsu-audiences{gap:7px}
  #btVeil .bsu-audience{flex-direction:column;gap:7px;min-height:100px;padding:11px 10px}
  #btVeil .bsu-audience-text strong{font-size:11px}
  #btVeil .bsu-audience-text small{font-size:9px;line-height:1.5}
  #btVeil .bsu-audience .bsu-dot{margin-top:0}
  #btVeil .bsu-name-fields{gap:10px}
  #btVeil .bsu-field :is(input,select){font-size:16px}
  #btVeil .bsu-choices{gap:7px}
  #btVeil .bsu-choice{min-height:60px;gap:7px;padding:10px;font-size:11px}
  #btVeil .bsu-platforms{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #btVeil .bsu-platform{padding:12px;gap:10px}
  #btVeil .bsu-updates{padding:19px 16px;border-radius:16px}
  #btVeil .bsu-updates-heading h3{font-size:22px}
  #btVeil .bsu-consent{padding:14px 12px;gap:11px}
  #btVeil .bsu-dock{padding:14px 20px max(17px,env(safe-area-inset-bottom));gap:10px}
  #btVeil .bsu-primary{min-height:46px;padding:12px 17px 12px 25px;gap:18px;font-size:12px}
  #btVeil .bsu-back{font-size:12px}
  #btVeil .bsu-finish{padding:25px 8px 10px}
  #btVeil .bsu-finish > p{font-size:12px}
  #btVeil .bsu-thanks{display:none}
}
@media (prefers-reduced-motion:reduce){
  #btVeil *,#btVeil *::before,#btVeil *::after{transition:none!important;animation:none!important}
}
/* end beta signup 2026-10-03 */




/* ---- audience masthead: the statement and the athlete are one block ----
   The figure STRETCHES to the height of the copy rather than carrying an
   aspect ratio of its own, so the picture is exactly as tall as the words
   beside it. That is what stops it reading as a slab parked next to the type:
   the two share a top edge and a bottom edge on every page, whatever the
   headline runs to. The floor is there for a short headline, not for looks. */
.aud-head{
  display:grid;grid-template-columns:minmax(0,700fr) minmax(0,520fr);
  gap:clamp(28px,4vw,64px);align-items:stretch;
}
.aud-head-copy{min-width:0;display:flex;flex-direction:column;justify-content:center}
.aud-head-fig{
  position:relative;border-radius:var(--ws-radius);overflow:hidden;
  min-height:clamp(320px,44vh,520px);background:var(--ws-sky-2);isolation:isolate;
}
/* THE HEADLINE NOW SHARES ITS LINE WITH A PICTURE, so it can no longer wear the
   full-width hero size. At 120px in a 739px column it wrapped to four lines
   instead of three and pushed the buttons 67px under the fold on a 1710x952
   screen; before the masthead it had the full 17ch measure and fitted. Capped
   against viewport HEIGHT, which is the same device .hero .h1 uses on the
   homepage and for the same reason: a short laptop screen should get a headline
   that fits, not one that has to be scrolled to finish reading. The min() keeps
   120px on a tall window. */
.aud-head .h1{font-size:min(var(--ws-fs-h1),9vh)}
/* the same grade every other photograph on the site is printed at */
.aud-head-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02)}
/* One column below 900: the figure goes under the copy and lies down, because a
   figure as tall as the headline is most of a phone screen before a word of the
   argument arrives. */
@media (max-width:900px){
  .aud-head{grid-template-columns:minmax(0,1fr);gap:clamp(22px,3.5vh,36px)}
  .aud-head-fig{min-height:0;aspect-ratio:4/3}
}

/* ---- aud-head owns the first screen ----
   Before this, the masthead finished 114 to 221px ABOVE the fold on every
   laptop size measured (2026-09-13), so the first sky band opened inside the
   first screen with its own headline sliced by the bottom edge. The head is now
   one viewport tall and the scroll cue sits on its floor, which is the
   arrangement the homepage hero already uses. The band starts at the fold.

   ALL OF IT IS SCOPED ABOVE 900. Below that the masthead is a column already
   taller than a phone screen, so there is no fold to fit and nothing here
   should apply: a forced viewport height would only add empty space, and the vw
   cap below would take the phone headline down to 22px. The homepage hero takes
   the same escape at the same breakpoint. Mobile keeps exactly what it ships
   today, plus the cue.

   THE HEADLINE CAP IS LOAD BEARING. 100svh keeps the band out of the first
   screen whatever the copy does, but a copy column taller than the fold takes
   the cue down with it: at the inherited 9vh the women page's four line
   headline puts "Explore" 6px under the fold on 1710x952, and the German one
   71px under on 1280x1024. min(8vh,5.6vw) clears every page, locale and window
   size in build/verify_audience_cue.mjs, tightest margin 40px. The vw term
   carries the narrow tall windows, where the shared 8.1vw display size is set
   for a full width headline and this one sits in a 55% column. Re-run that
   script if one of these headlines or ledes is ever rewritten longer. */
@media (min-width:901px){
  .aud-head{
    min-height:100svh;
    grid-template-rows:minmax(0,1fr) auto;
    row-gap:clamp(20px,3vh,44px);
    padding-top:calc(var(--ws-header-h) + clamp(16px,4.5vh,72px));
    padding-bottom:clamp(16px,2.5vh,32px);
  }
  .aud-head .h1{font-size:min(var(--ws-fs-h1),8vh,5.6vw)}
  .aud-head .hero-foot{grid-column:1/-1}
}
/* render fixes 2026-10-02 (TRA-209) */
.hero::after{left:0;right:0}
.hc-head h1{min-width:0}
:where(:lang(de),:lang(nl)) .hc-head h1{hyphens:auto}
@media (max-width:899px){.closer .mega{font-size:clamp(2.6rem,13vw,261px)}}
@media (max-width:600px){.viz .u,.viz .k{white-space:normal}}
@media (max-width:560px){.tue-close .btn,.pr-foot .btn,.hc-pad .acts .btn{white-space:normal;text-align:center;max-width:100%;line-height:1.25}.hc-pad .acts{flex-wrap:wrap}}
@media (max-width:480px){.hdr .brand{gap:7px}.hdr .brand-mark{height:30px;width:30px}.hdr .brand-word{font-size:27px}.actions{gap:10px}.actions .btn{padding-left:14px;padding-right:14px}}
/* end render fixes 2026-10-02 */