/* 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}
  .pr-head .pr-line.mk::before{transform:scaleX(1)!important}
  .hero .line.mk::before{transform:scaleX(1)!important}
  *{transition:none!important}
}

/* ============================================================
   FIELD NOTES PAGE
   ============================================================ */
.fn-head{padding-top:calc(var(--ws-header-h) + clamp(48px,9vh,120px));padding-bottom:clamp(36px,6vh,72px)}
.fn-head .h1{max-width:12ch}
.fn-head .lede{max-width:52ch;margin-top:24px;color:var(--ws-ink)}
.fn-body{padding-bottom:clamp(80px,12vh,150px)}
.fn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:28px}
@media (max-width:1000px){.fn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.fn-grid{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   PRICING
   Ported from the 14 Aug copy mockup. Copy and structure are that
   file's; everything visual is this design system. Classes are
   prefixed pr- so nothing here can reach the rest of the kit.
   ============================================================ */
.pr-head{padding-top:calc(var(--ws-header-h) + clamp(48px,9vh,120px));padding-bottom:clamp(28px,4vh,48px);text-align:center}

/* SIGNATURE: the same aqua marker as the homepage hero, and the same rule that
   makes it work. The line has to be width:fit-content or its box is the width of
   the container and the absolutely positioned marker fills all of it.
   One block per VISUAL line, which is why the first sentence pair is two spans
   rather than one: written as one span it wrapped, and the second visual line
   came out unmarked. Same bug as the homepage headline in v3.1. */
.pr-head .pr-line{
  display:block;width:fit-content;margin-inline:auto;position:relative;z-index:0;
}
.pr-head .pr-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);
}
.pr-head .pr-line.mk.swept::before{transform:scaleX(1)}

/* h2 scale, not h1: the hero size belongs to the homepage, and at 116px this
   line pushed the plans a full screen below the fold. */
.pr-head .h2{max-width:24ch;margin-inline:auto;color:var(--ws-ink)}
.pr-head .h2 span{display:block}

/* ============================================================
   SEGMENTED CONTROLS, v2 "sliding rule"

   One teal rule per control, travelling to the pressed button, on
   a hairline that is the whole track. The v1 version was a filled
   sky block with a teal thumb and a label reversed out of it;
   this is the same mechanism with nothing to reverse out of.

   The rule's width and offset are measured from the pressed
   button by slide(), not set here, so a label of any length in
   any language works and the rule resizes as well as moves.
   ============================================================ */
.pr-segwrap{display:flex;justify-content:center}

.pr-seg{
  position:relative;display:inline-flex;
  padding:2px 0 0;
  border-bottom:1px solid var(--ws-line);
}

.pr-ind{
  position:absolute;bottom:-1px;left:0;width:0;height:3px;
  background:var(--ws-teal);z-index:0;
  transition:transform 480ms var(--ws-ease),width 480ms var(--ws-ease);
}

.pr-seg button{
  position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;
  font-family:'Noto Sans',sans-serif;font-weight:600;font-size:var(--ws-fs-ui);
  letter-spacing:.02em;color:var(--ws-muted);padding:9px 18px 11px;white-space:nowrap;
  border-radius:0;
  transition:color var(--ws-dur-micro) var(--ws-ease);
}
/* Idle is solid muted ink, not black at 60 percent over a wash. Hover brings a
   label up to ink, which is the only thing hover does. */
.pr-seg button:hover{color:var(--ws-ink)}
.pr-seg button[aria-pressed="true"]{color:var(--ws-ink)}

.pr-bill{margin:clamp(24px,4vh,44px) 0 clamp(24px,4vh,40px)}
.pr-bill .pr-seg button{padding:8px 14px 10px;font-size:14px}

/* ---------------------------------------------------------------- the chip */
/* Solid teal beside a control that no longer has any teal fill of its own made
   the chip the loudest thing in the row. */
.pr-save{
  font-family:'Noto Sans',sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;background:var(--ws-sky);color:var(--ws-teal-deep);
  padding:5px 9px;white-space:nowrap;flex-shrink:0;border-radius:0;
}

/* ------------------------------------------- the row that holds them both */
.pr-billrow{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.pr-savepill{
  align-self:center;
  transition:background var(--ws-dur-micro) var(--ws-ease),
             box-shadow var(--ws-dur-micro) var(--ws-ease);
}

/* The two states still mean different things. With Yearly pressed the saving is
   yours, so the chip is filled. With Monthly pressed it is an offer, so it steps
   back to a hairline. Same :has() selector as v1, same fallback: unsupported
   means the chip stays filled, which is the resting state. */
.pr-billrow:has(button[aria-pressed="true"][data-bill="month"]) .pr-savepill,
.pr-billrow:has(button[aria-pressed="true"][data-cbill="month"]) .pr-savepill{
  background:transparent;box-shadow:inset 0 0 0 1px var(--ws-line-strong);
}

/* ------------------------------------------------ breakpoints and motion */
/* Equal flex, full width track. The rule still measures a real box, which is
   what the old stacked fallback gave up. */
@media (max-width:560px){
  .pr-seg{display:flex;width:100%}
  /* Taller than the desktop rhythm on purpose. These are the same two pixels
     of extra space below the label, but the button is now a touch target and
     34px is not one. 44 is, and both controls take it: on a phone there is
     nothing beside either of them to be tight against. */
  .pr-seg button{flex:1;padding:13px 4px 15px;font-size:14px}
  /* Repeated, not redundant. A media query adds no specificity, so the desktop
     rule .pr-bill .pr-seg button, which is one class heavier, keeps winning
     the padding here and the billing targets go back to 34px. */
  .pr-bill .pr-seg button{padding:13px 4px 15px}
  /* The row stacks, and takes the width with it. Without this the billing
     track is 100% of a shrink-to-fit parent, which is 118px on a phone: two
     targets 59px wide under a buyer switch that spans the screen. */
  .pr-billrow{flex-direction:column;gap:12px;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .pr-ind{transition:none}
}

/* Plans */
.pr-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.pr-plan{
  display:flex;flex-direction:column;background:var(--ws-paper);
  border-radius:var(--ws-radius);padding:40px 34px;
  box-shadow:0 0 0 1px var(--ws-line),0 30px 60px -40px rgba(21,52,75,.45);
  transition:transform 260ms var(--ws-ease),box-shadow 260ms var(--ws-ease);
}
.pr-plan:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--ws-line),0 40px 80px -40px rgba(21,52,75,.55)}
/* The lead plan is marked by a teal ring and a deeper lift rather than by a
   different fill, so the three cards still read as one set. */
.pr-plan.lead{box-shadow:0 0 0 2px var(--ws-teal),0 40px 80px -38px rgba(21,52,75,.5)}
.pr-plan.lead:hover{transform:translateY(-6px);box-shadow:0 0 0 2px var(--ws-teal),0 50px 96px -38px rgba(21,52,75,.6)}
@media (hover:none){.pr-plan:hover,.pr-plan.lead:hover{transform:none}}

.pr-nrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px}
.pr-name{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.5rem,1.9vw,30px);line-height:1.1;color:var(--ws-ink)}
.pr-prow{margin-top:22px;min-height:52px;display:flex;align-items:center}
.pr-price{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(2.1rem,3.2vw,46px);line-height:1;color:var(--ws-ink);white-space:nowrap}
.pr-price small{font-family:'Noto Sans',sans-serif;font-size:16px;font-weight:500;
  letter-spacing:.02em;color:var(--ws-body);opacity:.55}
.pr-qual{font-size:15px;line-height:1.4;color:var(--ws-body);opacity:.55;margin-top:12px;min-height:21px}
.pr-tag{margin-top:22px;padding-top:22px;border-top:1px solid var(--ws-line);
  font-size:17px;line-height:1.4;font-weight:600;color:var(--ws-ink)}
.pr-list{list-style:none;margin:18px 0 0;padding:0;flex:1;font-size:16px;line-height:1.42}
/* ascent bullets, 2026-09-17 */
.pr-list li{position:relative;padding:7px 0 7px 32px;color:rgba(0,0,0,.72)}
.pr-list li::before{content:"";position:absolute;left:0;top:calc(7px + (1lh - 13px) / 2);width:15px;height:13px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1 3 13 11' width='13' height='11'><path d='M1 14 L5 14 L6.9 8 L2.9 8 Z' fill='%2315344B'/><path d='M6.5 14 L10.5 14 L14 3 L10 3 Z' fill='%2303B8A5'/></svg>") no-repeat left center / contain}
@supports not (top:1lh){ .pr-list li::before{top:12px} }
.pr-list .plus{padding-left:0;font-weight:600;color:var(--ws-ink);opacity:1;margin-bottom:4px}
.pr-list .plus::before{display:none}

.pr-fences{margin-top:24px;padding-top:20px;border-top:1px solid var(--ws-line)}
.pr-fence{padding:9px 0}
.pr-fl{display:block;font-family:'Noto Sans',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ws-teal)}
.pr-fv{display:block;font-size:16px;font-weight:600;color:var(--ws-ink);margin-top:3px}
.pr-foot{padding-top:30px}
.pr-foot .btn{width:100%;justify-content:center}
.pr-vat{text-align:center;font-size:16px;color:var(--ws-body);opacity:.55;margin:32px 0 0}

/* The panes */
.pr-pane{display:none}
.pr-pane.on{display:block}

.pr-one{
  max-width:900px;margin:clamp(48px,8vh,96px) auto 0;background:var(--ws-sky);
  border-radius:var(--ws-radius);padding:clamp(36px,5vw,64px);
}
.pr-one .h4{margin:0}
.pr-one p{margin-top:18px;font-size:17px;line-height:1.5;color:var(--ws-body);opacity:.78}
.pr-one p.strong{opacity:1;font-weight:600;color:var(--ws-ink);margin-top:34px}
.pr-flag{display:inline-block;font-family:'Noto Sans',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;background:var(--ws-paper);color:var(--ws-ink);
  padding:7px 12px;margin-bottom:20px}
.pr-row{display:flex;justify-content:space-between;gap:20px;align-items:baseline;
  font-size:17px;padding:14px 0;border-bottom:1px solid var(--ws-line);color:var(--ws-body)}
.pr-row b{color:var(--ws-ink);font-weight:700;white-space:nowrap}
.pr-hard{background:var(--ws-paper);border-left:4px solid var(--ws-teal);
  padding:20px 24px;margin-top:24px;font-size:17px;line-height:1.5}
.pr-hard b{color:var(--ws-ink)}
.pr-one .btn{margin-top:28px}

/* Bands and the rest */
.pr-band{background:var(--ws-sky);padding-block:clamp(64px,10vh,130px);margin-top:clamp(64px,10vh,140px)}
/* With the trial section gone the questions sit straight under the fan, and two
   tinted blocks touching read as one very long blue region. */
.pr-band-plain{background:var(--ws-paper);margin-top:0;padding-bottom:clamp(72px,11vh,140px)}
.pr-band h2,.pr-sec h2{text-align:center}
.pr-band .lede,.pr-sec .lede{text-align:center;max-width:64ch;margin:22px auto 0;color:var(--ws-body);opacity:.72}
.pr-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px;margin-top:clamp(40px,6vh,72px)}
.pr-feat h3{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:21px;line-height:1.3;color:var(--ws-ink);margin:0 0 8px}
.pr-feat p{font-size:16px;line-height:1.45;color:var(--ws-body);opacity:.72;margin:0}

.pr-sec{padding-block:clamp(64px,10vh,130px);text-align:center}
.pr-sec h2{max-width:22ch;margin-inline:auto}
.pr-then{background:var(--ws-sky);border-left:4px solid var(--ws-teal);text-align:left;
  padding:22px 26px;max-width:66ch;margin:32px auto 0;font-size:17px;line-height:1.5}
.pr-sec .btn{margin-top:34px}

.pr-faq{max-width:860px;margin:clamp(40px,6vh,72px) auto 0;text-align:left}
.pr-qa{border-bottom:1px solid var(--ws-line);padding:22px 0}
.pr-qa h3{font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:20px;line-height:1.3;color:var(--ws-ink);margin:0 0 8px}
.pr-qa p{font-size:16px;line-height:1.5;color:var(--ws-body);opacity:.72;margin:0}

.pr-note{margin-top:14px;font-size:14px;opacity:.7}
.pr-note a{color:var(--ws-teal-deep);text-decoration:underline}
.pr-legal{border-top:1px solid var(--ws-line);margin-top:clamp(48px,8vh,90px);
  padding:32px 0 clamp(60px,9vh,110px);font-size:14px;line-height:1.8;
  color:var(--ws-body);opacity:.5;text-align:center}

/* An outline button for the secondary plan actions. The kit's quiet button has no
   box at all, which disappears inside a card, so this is the same square shape
   with a hairline around it. */
/* clip-path cuts an inset box-shadow off along the diagonal, so the outline
   is built as two clipped layers: ::before is the stroke, ::after is the fill
   inset by its width. Both use the same polygon, which lays a 1.5px stroke
   along the angle as well as along the straight edges. */
.btn-outline{background:transparent;color:var(--ws-ink);box-shadow:none}
.btn-outline::before{background:var(--ws-ink)}
.btn-outline::after{
  content:"";position:absolute;inset:1.5px;z-index:-1;
  background:var(--ws-btn-bg);
  clip-path:polygon(var(--ws-cut) 0,100% 0,100% 100%,0 100%);
  transition:background 220ms var(--ws-ease);
}
.btn-outline:hover{color:#fff}
.btn-outline:hover::after{background:var(--ws-ink)}

@media (max-width:1000px){
  .pr-plans{grid-template-columns:minmax(0,1fr);gap:26px}
  .pr-plan.lead{order:-1}
  .pr-feat{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .pr-plan{transition:none}
  .pr-plan:hover{transform:none}
}

/* ============================================================
   THE INCLUDED SECTION, AS A FAN
   Same mechanism as the homepage closer: a tall runway with a pinned
   stage, the words in the middle that never move, and satellites that
   start as one clump crossing the bottom edge and travel outward, so
   the sentence is uncovered rather than faded in. Nine satellites here
   rather than eight, and they carry copy rather than photographs, so
   every width and destination is tighter. Class names are prfan-
   because this page has no .closer and the two must never share rules.
   ============================================================ */
.prfan{
  background:var(--ws-sky);color:var(--ws-ink);height:var(--pr-fan-runway,165vh);
  margin-top:clamp(64px,10vh,140px);
  --vy:calc((100svh - var(--ws-header-h)) / 100);
}
.prfan-stage{
  position:sticky;top:var(--ws-header-h);height:calc(100svh - var(--ws-header-h));
  overflow:hidden;display:grid;place-items:center;text-align:center;
}
/* Narrower than the homepage core, because nine satellites need more of the
   frame than eight do. */
.prfan-core{position:relative;z-index:1;padding-inline:var(--ws-gutter);width:min(520px,36vw)}
.prfan-core h2{font-size:clamp(1.7rem,2.9vw,42px);line-height:1.1;margin:0}
.prfan-core p{margin:clamp(14px,2vh,22px) 0 0;font-size:clamp(.95rem,1.15vw,17px);
  line-height:1.45;color:var(--ws-body);opacity:.72}

.prfan-item{
  position:absolute;top:50%;left:50%;z-index:2;
  width:var(--w);border-radius:20px;overflow:hidden;
  background:var(--ws-paper);text-align:left;
  padding:clamp(14px,1.3vw,20px) clamp(15px,1.4vw,22px);
  box-shadow:0 26px 50px -30px rgba(21,52,75,.55);
  --px:0;--py:0;--sr:0deg;
  transform:
    translate3d(
      calc(-50% + var(--sx) + (var(--x) - var(--sx)) * var(--px)),
      calc(-50% + var(--sy) + (var(--y) - var(--sy)) * var(--py)), 0)
    rotate(calc(var(--sr) + (var(--r) - var(--sr)) * var(--px)))
    scale(calc(.88 + .12 * var(--py)));
  will-change:transform;
}
.prfan-item h3{
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(13px,1.02vw,15px);line-height:1.22;color:var(--ws-ink);margin:0 0 6px;
}
.prfan-item p{
  margin:0;font-size:clamp(11.5px,.87vw,12.5px);line-height:1.38;
  color:var(--ws-body);opacity:.72;
}



/* ---- What the satellites carry -----------------------------------------
   Most of them show the thing rather than describe it, in flat teal on navy
   drawn at the card's own scale. Card two keeps its paragraph, because "the
   plan reflows around what happened" is a claim about behaviour and there is
   no honest picture of it. */
.prfan-item .vis{margin-top:14px}
.prfan-item .vis svg{display:block;width:100%;height:auto}
/* Card two is the only one carrying a title, a paragraph AND a drawing, which
   made it the tallest thing in the ring by 40px and the first to cross the top
   edge on a short window. Its drawing is held to two thirds of the card. */
.prfan-item.c2 .vis{margin-top:12px}
.prfan-item.c2 .vis svg{max-width:66%}

/* Card six fans its own connectors out inside the card, a small echo of what
   the section is doing around it. Names rather than brand marks: at this size a
   wordmark is unreadable, we hold official files for three of these eight, and
   using any of them on a public page needs the company's permission. */
.prfan-item .chips{
  margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;
  gap:7px 6px;padding-bottom:4px;
}
.prfan-item .chip{
  display:inline-block;font-family:'Noto Sans',sans-serif;font-weight:600;
  font-size:clamp(10.5px,.78vw,12px);letter-spacing:.02em;color:var(--ws-ink);
  background:var(--ws-sky);padding:6px 10px;border-radius:999px;white-space:nowrap;
  transform:rotate(var(--cr,0deg));
}
.prfan-item .chip:nth-child(1){--cr:-5deg}
.prfan-item .chip:nth-child(2){--cr: 3.5deg}
.prfan-item .chip:nth-child(3){--cr:-2deg}
.prfan-item .chip:nth-child(4){--cr: 5deg}
.prfan-item .chip:nth-child(5){--cr:-3.5deg}
.prfan-item .chip:nth-child(6){--cr: 2.5deg}

/* Destinations. Seven, and not on a grid: three loose pairs plus one, each
   offset from its partner in both axes, so the arrangement reads as things that
   fell into place. Width is capped against the viewport HEIGHT as well as its
   width, but gently: a narrower card is a TALLER card, which is the opposite of
   what a short window needs.

   Every card is now sized to its own title, because a title that wraps to two
   lines reads as a card that ran out of room, and because seven cards at one
   width read as a set of tiles rather than as things that landed. So the widths
   run from "Seven daily signals" at the small end to "Automatic tweaks based on
   how you feel" at the large one, and the variety is a consequence of the
   words rather than a decoration applied to them. */
.prfan-item{--sr:0deg}
/* One line per title, but only where the ring runs. In the stacked fallback the
   cards are the width of the page and a title that cannot wrap pushes the whole
   document sideways, which it did at 390px. */
@media (min-width:1201px){ .prfan-item h3{white-space:nowrap} }
.prfan-item.c1{--w:clamp(214px,min(21.4vw,43 * var(--vy)),308px);--x:-32vw;--y:calc(-28 * var(--vy));--r:-3.2deg;--d:0}
.prfan-item.c2{--w:clamp(238px,min(24vw,48 * var(--vy)),344px);--x: -4vw;--y:calc(-31 * var(--vy));--r: 2.4deg;--d:.08}
.prfan-item.c3{--w:clamp(152px,min(15.2vw,28 * var(--vy)),218px);--x: 26vw;--y:calc(-31 * var(--vy));--r:-2.2deg;--d:.16}
.prfan-item.c4{--w:clamp(168px,min(16.8vw,31 * var(--vy)),242px);--x: 39vw;--y:calc( -3 * var(--vy));--r: 2.8deg;--d:.24}
.prfan-item.c6{--w:clamp(196px,min(19.6vw,36 * var(--vy)),282px);--x:-38vw;--y:calc(  4 * var(--vy));--r:-2.6deg;--d:.32}
.prfan-item.c7{--w:clamp(172px,min(17.2vw,32 * var(--vy)),248px);--x:-16vw;--y:calc( 33 * var(--vy));--r: 2.2deg;--d:.40}
.prfan-item.c8{--w:clamp(226px,min(22.6vw,45 * var(--vy)),326px);--x: 18vw;--y:calc( 34 * var(--vy));--r:-3.0deg;--d:.48}

/* Start: one loose clump held high in the stage, overlapping itself, rotations
   scattered. High in the STAGE is what puts it low on the SCREEN, because until
   the stage pins the section is still rising, so the clump crosses the bottom
   edge of the window first and the words arrive underneath it. Not a single
   point, which reads as a magic trick, and not a tidy row either. */
.prfan-item.c1{--sx:-14vw;--sy:calc(-23 * var(--vy));--sr:-5.5deg}
.prfan-item.c2{--sx: -2vw;--sy:calc(-30 * var(--vy));--sr: 4deg}
.prfan-item.c3{--sx:  8vw;--sy:calc(-18 * var(--vy));--sr: 6deg}
.prfan-item.c4{--sx: 15vw;--sy:calc(-27 * var(--vy));--sr:-4deg}
.prfan-item.c6{--sx:-19vw;--sy:calc(-33 * var(--vy));--sr:-3deg}
.prfan-item.c7{--sx: -5vw;--sy:calc(-14 * var(--vy));--sr: 5deg}
.prfan-item.c8{--sx: 12vw;--sy:calc(-29 * var(--vy));--sr: 3deg}

/* A short window shrinks the words and pushes the outer cards hard against the
   top and bottom edges, since that is the only room left to find. */
@media (min-width:1201px) and (max-height:880px){
  .prfan-core h2{font-size:clamp(1.5rem,2.5vw,34px)}
  .prfan-core p{font-size:clamp(.9rem,1vw,15px)}
  .prfan-item{padding:12px 14px}
  .prfan-item h3{font-size:13px}
  .prfan-item p{font-size:11.5px;line-height:1.34}
  .prfan-item .vis{margin-top:10px}
  .prfan-item.c1{--y:calc(-30 * var(--vy))}
  .prfan-item.c2{--y:calc(-35 * var(--vy))}
  .prfan-item.c3{--y:calc(-33 * var(--vy))}
  .prfan-item.c7{--y:calc( 34 * var(--vy))}
  .prfan-item.c8{--y:calc( 35 * var(--vy))}
}

/* Below 1200px there is no room for a ring around nine cards that carry copy.
   Tuning it down to 1024 was possible for one viewport at a time and never for
   all of them: narrow and short at once leaves the ring nowhere to go in either
   axis. So under 1200 the section drops the pin entirely and becomes the plain
   two-up it was, which is also what it does under prefers-reduced-motion. */
@media (max-width:1200px){
  .prfan{height:auto;padding-block:clamp(64px,10vh,120px)}
  .prfan-stage{position:static;height:auto;overflow:visible;display:block}
  .prfan-core{width:auto;max-width:64ch;margin:0 auto}
  .prfan-inner{max-width:var(--ws-maxw);margin-inline:auto;padding-inline:var(--ws-gutter)}
  .prfan-item{
    position:static;transform:none!important;width:auto;margin-top:20px;
    box-shadow:0 0 0 1px var(--ws-line);
  }
  .prfan-item h3{font-size:19px}
  .prfan-item p{font-size:15px}
  /* Stretched to the full width of a two-up column these read as banners, not
     as small drawings on a card. */
  .prfan-item h3{white-space:normal}
  .prfan-item .vis svg{max-width:400px}
  .prfan-item.c2 .vis svg{max-width:400px}
  .prfan-item .chips{justify-content:flex-start}
}
@media (max-width:640px){ .prfan-item{margin-top:16px} }

@media (prefers-reduced-motion:reduce){
  .prfan{height:auto;padding-block:clamp(64px,10vh,120px)}
  .prfan-stage{position:static;height:auto;overflow:visible;display:block}
  .prfan-core{width:auto;max-width:64ch;margin:0 auto}
  .prfan-item{position:static;transform:none!important;width:auto;margin-top:20px;
    box-shadow:0 0 0 1px var(--ws-line)}
  .prfan-item h3{white-space:normal}
  .prfan-item .vis svg{max-width:400px}
  .prfan-item.c2 .vis svg{max-width:400px}
}

/* ============================================================
   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;
}

/* ============================================================
   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}


/* ============================================================
   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 */

/* ============================================================
   COACH PANE
   The cards are the athlete component unchanged. Everything
   below them is a short labelled block, because a coach reads
   this page looking for one specific answer at a time and a
   wall of prose makes them hunt for it.
   ============================================================ */

/* Both VAT figures, on every price, at every band. */
.pr-vatline{font-variant-numeric:tabular-nums}

/* The athlete price is "€ 16 per month". The coach price has to carry the
   VAT basis as well, so the unit is three times longer and nowrap becomes a
   promise the card cannot keep at 200 percent zoom. Both halves wrap here, and
   only here: the athlete cards are untouched. */
#paneCoach .pr-price{white-space:normal;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
/* The unit sits beside the figure, as it does on the athlete cards. It may
   still wrap to a second line on a narrow card or in a long language, and that
   is fine now: the cards share the grid's rows, so a taller price row is taller
   on all three at once and nothing falls out of line. That was not true when
   this was first written, which is why it briefly had a line of its own. */
#paneCoach .pr-price .cUnit{white-space:normal}
#paneCoach .pr-price{row-gap:2px}
#paneCoach .pr-nrow{align-items:flex-start}

/* Band names are the longest thing in this row, and with the badge holding the
   corner the name is what wraps. "16 to 25 athletes" wraps at 1600 while the
   other two do not, which drops that card's price and rule below its
   neighbours and makes three cards look like two cards and a mistake. Reserve
   two lines on every card so the row agrees at every width and in every
   language, rather than only at the widths somebody happened to open.
   2lh is exactly two lines of this element's own line-height, so it holds when
   the clamp resizes the name. */
#paneCoach .pr-name{min-width:0}

/* Three cards, one component. Every row inside a card has to line up with the
   same row in its neighbours, and a min-height per row cannot deliver that: the
   band name wraps to two lines in one language and three in another, the price
   unit wraps at some widths, and each guess only holds until somebody opens the
   page in Dutch at 1440. The cards borrow the grid's own rows instead, so the
   name row is as tall as the tallest name and every card agrees by
   construction. Below the breakpoint the cards stack and there is nothing to
   align them with. */
@media (min-width:1001px){
  #paneCoach .pr-plans{grid-template-rows:auto auto auto 1fr auto auto}
  /* row-gap:0 because a subgrid inherits its parent's gaps, and the parent's
     24px is the space between the three cards, not the space inside one. Left
     alone it was added between every row of every coach card, so the gap under
     the price came out 36px against the athlete cards' 12px and the two panes
     did not look like the same component. Each row carries its own margin, the
     way it does on an athlete card. */
  #paneCoach .pr-plan{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0}
}

/* A grid item will not shrink below its own min-content unless it is told it
   may. At 200 percent zoom the track is 202px and the name plus the badge want
   504px, so the card's insides walked out of the card. Letting the row wrap is
   the release valve: at real widths the badge keeps its corner, and only when
   the name can no longer give does the badge take its own line. */
#paneCoach .pr-plan > *{min-width:0}
#paneCoach .pr-nrow{flex-wrap:wrap}

/* On an athlete card the rule under the price comes from .pr-tag, the tagline
   between the qualifier and the features. The coach cards have no tagline, so
   the rule was missing and the card did not read as the same component. The
   feature list carries it instead, at the same offset. */
#paneCoach .pr-list{margin-top:22px;padding-top:22px;border-top:1px solid var(--ws-line)}

/* The bullets under "The longer you stay". Same teal square as the feature
   list, because it is the same kind of list, and the values keep .pr-fv's
   weight so the fence still reads as label over value. */
.pr-fvl{list-style:none;margin:5px 0 0;padding:0}
/* ascent bullets, 2026-09-17 */
.pr-fvl li{position:relative;padding:2px 0 2px 32px;font-size:16px;font-weight:600;
  line-height:1.35;color:var(--ws-ink)}
.pr-fvl li::before{content:"";position:absolute;left:0;top:calc(2px + (1lh - 13px) / 2);width:15px;height:13px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1 3 13 11' width='13' height='11'><path d='M1 14 L5 14 L6.9 8 L2.9 8 Z' fill='%2315344B'/><path d='M6.5 14 L10.5 14 L14 3 L10 3 Z' fill='%2303B8A5'/></svg>") no-repeat left center / contain}
@supports not (top:1lh){ .pr-fvl li::before{top:6px} }

/* Two headline sets in one h1, one shown at a time. [hidden] is a user-agent
   rule, so the attribute has to be said out loud, and it has to be said louder
   than `.pr-head .h2 span`, which is a class more specific than a bare class
   plus an attribute. Naming the element is what wins it. */
.pr-hset{display:block}
.pr-head .h2 span.pr-hset[hidden]{display:none}
.prfan-core .fan-set[hidden]{display:none}

/* Three lines under the grid, the way the athlete pane closes its cards. The
   stacking rule is general because the athlete pane now has a second line too,
   and 32px between two sentences that belong together reads as two topics. */
#paneCoach .pr-vat{margin-top:14px}
.pr-vat + .pr-vat{margin-top:8px}

/* The price row was flattened to its contents when the unit sat on a line of
   its own and the reserved 52px was dead space. The unit is beside the figure
   again, so the athlete rule fits, and with it the gap between the price and
   the line under it is the same on both panes. */


/* ascent bullets, 2026-09-17: on an ink band the ink stride prints in paper */
.ws-band-ink .hc-prose ul li::before,.ws-band-ink .pr-list li::before,.ws-band-ink .pr-fvl li::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='1 3 13 11' width='13' height='11'><path d='M1 14 L5 14 L6.9 8 L2.9 8 Z' fill='%23FFFFFF'/><path d='M6.5 14 L10.5 14 L14 3 L10 3 Z' fill='%2303B8A5'/></svg>")}
.ws-band-ink .hc-prose ul ul li::before{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='6.5 3 7.5 11' width='7.5' height='11'><path d='M6.5 14 L10.5 14 L14 3 L10 3 Z' fill='%23FFFFFF'/></svg>")}
/* 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 */