/* 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}
/* Both card kinds are anchors now, so the whole card is the hit area rather than
   the "Read the note" line inside it. The hover moves the card, and the image
   underneath it moves a little further, which is what makes a flat tile read as
   a thing you can open. */
.feature,.note{display:block;transition:transform 480ms var(--ws-ease)}
.feature .ph img,.note .ph img{transition:transform 900ms var(--ws-ease)}
.feature:hover,.note:hover{transform:translateY(-5px)}
.feature:hover .ph img,.note:hover .ph img{transform:scale(1.035)}
.feature:focus-visible,.note:focus-visible{outline:3px solid var(--ws-teal);outline-offset:4px}
.feature .read:last-child,.note .read:last-child{display:inline-flex;align-items:center;gap:9px}
.feature .read svg,.note .read svg{flex:none;transition:transform 420ms var(--ws-ease)}
.feature:hover .read svg,.note:hover .read svg{transform:translateX(4px)}
/* The reading time sits beside the category on one line. */
.cat-row{display:flex;align-items:center;gap:10px;color:var(--ws-ink);opacity:.5;
  font-weight:600;font-size:var(--ws-fs-nav);text-transform:uppercase;letter-spacing:.02em}
.cat-row i{width:3px;height:3px;border-radius:50%;background:currentColor;font-style:normal;flex:none}
@media (prefers-reduced-motion:reduce){
  .feature:hover,.note:hover,.feature:hover .ph img,.note:hover .ph img{transform:none}
}
.feature .overlay{
  position:absolute;left:clamp(16px,2.6vw,40px);bottom:clamp(16px,2.6vw,40px);z-index:2;
  width:min(430px,84%);background:var(--ws-paper);border-radius:24px;
  padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column;gap:14px;
}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.note{border-radius:var(--ws-radius);overflow:hidden;background:var(--ws-sky);display:flex;flex-direction:column}
.note .media{aspect-ratio:16/10;position:relative;isolation:isolate}
.note .nbody{padding:clamp(20px,2.2vw,32px);display:flex;flex-direction:column;gap:12px;color:var(--ws-ink)}
.read{font-weight:600;font-size:var(--ws-fs-nav);text-transform:uppercase;color:var(--ws-teal)}
@media (max-width:760px){.two-up{grid-template-columns:minmax(0,1fr)}}

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

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

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

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

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

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

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

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



/* ============================================================
   BRAND PAGE
   A specimen page: every section shows the thing rather than
   describing it, so the page is its own proof.
   ============================================================ */
.br-head{padding-top:calc(var(--ws-header-h) + clamp(48px,9vh,120px));
  padding-bottom:clamp(36px,6vh,72px)}
.br-head .h1{max-width:14ch}
.br-head .lede{max-width:58ch;margin-top:24px;color:var(--ws-ink)}
.br-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(28px,4vh,44px)}
.br-facts span{font-weight:600;font-size:var(--ws-fs-nav);text-transform:uppercase;
  letter-spacing:.02em;background:var(--ws-sky);color:var(--ws-ink);padding:8px 14px}

.br-nav{position:sticky;top:var(--ws-header-h);z-index:40;background:var(--ws-paper);
  border-bottom:1px solid var(--ws-line)}
.br-nav .wrap{display:flex;gap:clamp(14px,2vw,30px);overflow-x:auto;padding-block:14px}
.br-nav a{font-weight:600;font-size:var(--ws-fs-nav);text-transform:uppercase;
  letter-spacing:.02em;color:var(--ws-ink);opacity:.5;white-space:nowrap;
  transition:opacity 240ms var(--ws-ease),color 240ms var(--ws-ease)}
.br-nav a:hover{opacity:1}
.br-nav a[aria-current="true"]{opacity:1;color:var(--ws-teal-deep)}

.br-part{padding-top:clamp(56px,8vh,104px)}
.br-part > .wrap > .k{font-weight:600;font-size:var(--ws-fs-nav);text-transform:uppercase;
  letter-spacing:.09em;color:var(--ws-teal-deep);margin-bottom:clamp(20px,3vh,32px);
  padding-bottom:12px;border-bottom:1px solid var(--ws-line)}
.br-sec{padding-block:clamp(34px,5vh,60px);scroll-margin-top:calc(var(--ws-header-h) + 70px)}
.br-sec > h3{margin-bottom:14px}
.br-sec > .body{max-width:64ch;opacity:.78;line-height:1.6;font-size:17px}

.br-demo{margin-top:clamp(24px,3.5vh,40px);background:var(--ws-paper);
  border:1px solid var(--ws-line);border-radius:var(--ws-radius);
  padding:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.br-demo.col{flex-direction:column;align-items:stretch}
.br-demo.sky{background:var(--ws-sky);border-color:transparent}
.br-demo.ink{background:var(--ws-ink);border-color:transparent;color:#fff}
.br-cap{font-size:13px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  color:var(--ws-ink);opacity:.5;margin-top:26px}

.br-grid{display:grid;gap:16px;margin-top:clamp(24px,3.5vh,40px)}
.br-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.br-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.br-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.br-g2,.br-g4{grid-template-columns:minmax(0,1fr)}}

.br-sw{border:1px solid var(--ws-line);border-radius:20px;overflow:hidden;background:var(--ws-paper)}
.br-sw .chip{height:104px}
.br-sw .m{padding:16px 18px}
.br-sw .m b{display:block;font-family:'Space Grotesk',sans-serif;font-size:19px;
  letter-spacing:-.03em;color:var(--ws-ink)}
.br-sw .m code{display:block;font-family:ui-monospace,Menlo,monospace;font-size:12px;
  color:var(--ws-body);opacity:.55;margin-top:3px}
.br-sw .m .cr{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 8px}
.br-sw .cr.ok{background:#E4F5E4;color:#046B04}
.br-sw .cr.mid{background:#FDF0D8;color:#8A5A00}
.br-sw .cr.no{background:#FAE3E3;color:#A32B2B}
.br-sw .m p{margin:10px 0 0;font-size:14px;line-height:1.5;opacity:.7}

.br-tbl{width:100%;border-collapse:collapse;font-size:15px;margin-top:20px}
.br-tbl th{text-align:left;font-weight:600;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ws-teal-deep);padding:10px 14px;
  border-bottom:1.5px solid var(--ws-line)}
.br-tbl td{padding:12px 14px;border-bottom:1px solid var(--ws-line);vertical-align:top}
.br-tbl code{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--ws-ink)}
.br-scroll{overflow-x:auto}
.br-scroll .br-tbl{min-width:560px}

.br-note{margin-top:24px;padding:18px 20px;border-left:3px solid var(--ws-teal);
  background:rgba(3,184,165,.06);font-size:16px;line-height:1.6;border-radius:0 8px 8px 0}
.br-note.open{border-left-color:var(--ws-duo);background:rgba(28,95,145,.06)}
.br-note b{color:var(--ws-ink)}

.br-do{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin-top:clamp(24px,3.5vh,40px)}
@media (max-width:700px){.br-do{grid-template-columns:minmax(0,1fr)}}
.br-do > div{border:1px solid var(--ws-line);border-radius:20px;padding:26px;background:var(--ws-paper)}
.br-do h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 16px}
.br-do .y h4{color:#046B04} .br-do .n h4{color:#A32B2B}
.br-do ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.br-do li{font-size:16px;line-height:1.5;padding-left:22px;position:relative}
.br-do li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:2px;
  background:var(--ws-line-strong,rgba(21,52,75,.28))}
.br-do .y li::before{background:#046B04} .br-do .n li::before{background:#A32B2B}

.br-serie{display:grid;grid-template-columns:repeat(8,1fr);border-radius:12px;overflow:hidden}
.br-serie div{height:76px;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:8px;font-size:10px;font-family:ui-monospace,Menlo,monospace;color:#fff}
@media (max-width:600px){.br-serie{grid-template-columns:repeat(4,1fr)}}
.br-ramp{display:grid;grid-auto-flow:column;border-radius:12px;overflow:hidden;margin-top:10px}
.br-ramp div{height:52px}

.br-logo{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:center}
.br-logo figure{margin:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.br-logo figcaption{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;opacity:.5}
.br-word{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.05em;
  font-size:44px;line-height:1;color:var(--ws-ink)}
.br-clear{position:relative;padding:22px;outline:1px dashed var(--ws-line-strong,rgba(21,52,75,.28));
  outline-offset:0}

.br-metric{display:flex;flex-direction:column;gap:7px}
.br-metric .k{font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ws-teal-deep)}
.br-metric .v{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.04em;
  font-size:clamp(30px,3.2vw,46px);line-height:1;color:var(--ws-ink);
  font-variant-numeric:tabular-nums}
.br-metric .d{font-size:13px;color:var(--ws-ink);opacity:.55}
.br-conf{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ws-ink);opacity:.6}
.br-conf i{display:inline-block;width:15px;height:4px;background:rgba(21,52,75,.2)}
.br-conf i.on{background:var(--ws-teal-deep)}

.br-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
  margin-top:clamp(24px,3.5vh,40px)}
@media (max-width:820px){.br-dl{grid-template-columns:minmax(0,1fr)}}
.br-dl a{display:flex;flex-direction:column;gap:8px;background:var(--ws-paper);
  border:1px solid var(--ws-line);border-radius:20px;padding:26px;
  transition:transform 380ms var(--ws-ease),box-shadow 380ms var(--ws-ease)}
.br-dl a:hover{transform:translateY(-4px);box-shadow:var(--ws-shadow-card,0 0 0 1px rgba(21,52,75,.14),0 30px 60px -40px rgba(21,52,75,.45))}
.br-dl .t{font-family:'Space Grotesk',sans-serif;font-weight:500;letter-spacing:-.03em;
  font-size:21px;color:var(--ws-ink)}
.br-dl .s{font-size:14px;line-height:1.5;opacity:.68}
.br-dl .f{margin-top:6px;font-weight:600;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ws-teal-deep)}

/* small components this page shows and the site does not yet have a class for */
.hl{position:relative;isolation:isolate;padding:2px 8px;display:inline-block}
.hl::before{content:"";position:absolute;z-index:-1;left:0;right:2px;bottom:1px;height:.82em;
  background:var(--ws-aqua);transform:rotate(-.4deg)}
.br-badge{display:inline-flex;align-items:center;gap:6px;font-family:'Noto Sans',sans-serif;
  font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ws-teal);color:#fff;padding:7px 11px;white-space:nowrap}
.br-badge.ink{background:var(--ws-ink)}
.br-badge.quiet{background:var(--ws-sky);color:var(--ws-ink)}
.br-badge.good{background:#046B04}
.br-badge.warn{background:#FAB219;color:var(--ws-ink)}
.br-badge.crit{background:#A32B2B}
.br-alert{display:flex;gap:14px;padding:16px 18px;border-left:3px solid rgba(21,52,75,.28);
  background:rgba(21,52,75,.04);font-size:16px;line-height:1.55}
.br-alert p{margin:0} .br-alert b{color:var(--ws-ink)}
.br-alert > span{flex:none;width:9px;height:9px;margin-top:7px;background:rgba(21,52,75,.28)}
.br-alert.good{border-left-color:#0CA30C;background:rgba(12,163,12,.06)}
.br-alert.good > span{background:#0CA30C}
.br-alert.warn{border-left-color:#FAB219;background:rgba(250,178,25,.10)}
.br-alert.warn > span{background:#FAB219}
.br-alert.crit{border-left-color:#D03B3B;background:rgba(208,59,59,.07)}
.br-alert.crit > span{background:#D03B3B}
.br-field{display:block;margin-top:20px}
.br-field > span{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}
.br-field input,.br-field select{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}
.br-field input:focus,.br-field select:focus{outline:3px solid var(--ws-teal);outline-offset:1px;
  border-color:transparent}
.br-field em{display:block;margin-top:8px;font-size:14px;font-style:normal;color:var(--ws-body);opacity:.6}
.br-field strong{display:block;margin-top:8px;font-size:14px;color:#A32B2B;font-weight:600}
.br-field[data-invalid] input{border-color:#D03B3B;border-width:1.5px}
.br-check{display:inline-flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:16px;line-height:1.45}
.br-check input{appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;cursor:pointer;
  border:1.5px solid rgba(21,52,75,.28);background:var(--ws-paper);border-radius:0}
.br-check input:checked{background:var(--ws-teal);border-color:var(--ws-teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat}

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

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

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

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

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

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

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

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

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

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

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

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