/* ════════════════════════════════════════════════════════════
   FRONT STYLE · website, after the Atelier UI demo
   ────────────────────────────────────────────────────────────
   Layout, type and motion only - every word on the page is the
   HTML's own. Huge uppercase display type over one fixed WebGL
   canvas (fs-webgl.js); the canvas sits at z-index -1, under the
   transparent page and over the root's background, so the films
   and the hero headline it draws show through wherever the page
   leaves a hole.

   Effects after Atelier UI by Jérémie Nallet (MIT) -
   https://github.com/whatisjery/atelier-ui-codrops
   ════════════════════════════════════════════════════════════ */

:root{
  --bg:#070808;
  --text:#f0f0f0;
  --muted:#71727a;
  --line:color-mix(in srgb, var(--text) 16%, transparent);
  --surface:color-mix(in srgb, var(--text) 5%, var(--bg));
  --lemon:#32C6AE;
  --ink-on-film:#fff;
  --gut:clamp(16px, 1.1vw, 20px);
  --ease:cubic-bezier(.84,0,.22,1);
  color-scheme:dark;
}
html.theme-light{
  --bg:#eaf2fc;
  --text:#0f1b2d;
  --muted:#5a6b85;
  color-scheme:light;
}

/* ── base ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:clip;
  font:500 17px/1.5 'Clash Grotesk',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:clip}
a{color:inherit}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
b{font-weight:600}
:focus-visible{outline:2px solid var(--lemon);outline-offset:3px}

/* the voice of everything that is not a headline or a paragraph:
   the demo's 14px bold capitals, set in the house face */
.ui,
.hh-top,.eyebrow,.chip,.card h3,.pill,
.pr-mo,.pr-seats,.pr-includes h3,.pr-cmp,
.faq summary,.contact-note,.fl-row,.ap-seg,.ap-note,.ap-foot,.trusted .eyebrow{
  font-size:14px;font-weight:600;line-height:1.1;letter-spacing:0;text-transform:uppercase;
}

/* ── display type: uppercase, -0.06em, line-height 1 ──────────
   The hero's <h1> is ~18vw; section headlines are capped at 10vw.
   --fit is written by fs-atelier.js when the widest word would
   run past the column: it never grows the type, it only stops a
   long word from leaving the page. */
.hh-body,.fs-hero h1,
main h2:not(.fs-prose h2){
  margin:0;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.06em;
  text-transform:uppercase;
  overflow-wrap:break-word;
  margin-inline-start:-.03em;
}
/* the hero title is sized by fs-atelier.js to one screen; this is the size without it */
.hh-body,.fs-hero h1{font-size:min(11vw,12svh)}
main h2:not(.fs-prose h2){font-size:clamp(2.25rem, 10vw * var(--fit,1), 10vw)}
.hh-body b{font-weight:inherit}
main h2 em{font-style:normal;color:var(--muted)}
.fs-hero h1.fs-gl{opacity:0}

/* ── the letter layer ───────────────────────────────────────
   A display headline's own text stays in .fs-rt, read once by
   screen readers, translators and anyone with CSS off. .fs-layer
   is the picture of it: aria-hidden, one box per letter (so a
   touching pair can be given room, and a letter can roll), and
   the letters are pseudo-element content, so there is no second
   copy of the words in the DOM. */
.fs-rt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fs-layer{display:block}
.fs-w{display:inline-block;white-space:nowrap}
.fs-l{display:inline-block;vertical-align:top}
/* no mask: a letter rises a little and fades in, so no part of any letter is
   ever hidden - not an umlaut's dots, not a comma's tail, not mid-motion */
.fs-l>i{display:block;font-style:normal;white-space:pre}
.fs-l>i::before{content:attr(data-c)}
.fs-pre .fs-l>i{opacity:0;transform:translateY(.35em)}
.fs-em{color:var(--muted)}

/* No z-index on the words that sit over a film: they paint above it because
   they come after it, and a z-index there would make a layer of its own and
   trap what lives inside it - the sign-in box, opened from the footer, would
   sit under the page's own dimmed backdrop. */

/* ── films ──────────────────────────────────────────────────
   Decorative and aria-hidden. Each one is a <video> with its
   poster; fs-atelier.js gives it a source when it comes near the
   screen, fs-webgl.js draws it and hides the DOM copy (.fs-gl). */
.fs-media{position:relative;overflow:hidden;background:#000}
.fs-media video,.fs-media img{width:100%;height:100%;object-fit:cover}
.fs-media canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.fs-tiles img{position:absolute;inset:0}
.fs-media.fs-gl{background:transparent}
.fs-media.fs-gl video,.fs-media.fs-gl img,.fs-media.fs-gl canvas{opacity:0}

/* ── top bar: the hero's row of furniture, held at the top ──
   The logo on the left, the Berlin time in the middle of the screen,
   and search, language and light/dark on the right, beside Login. */
.hh-top{
  position:fixed;z-index:50;inset:0 0 auto 0;
  display:flex;align-items:center;gap:18px;
  padding:12px var(--gut);
  background:var(--bg);color:var(--text);
}
.hh-logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;margin-right:6px}
.hh-logo img{width:18px;height:auto}
html.theme-light .hh-logo img{filter:invert(1)}
.hh-nav,.hh-col2,.hh-theme{display:flex;align-items:center}
.hh-nav{margin-left:auto}
.hh-acct{display:flex;align-items:center}
.hh-time{position:absolute;left:50%;transform:translateX(-50%);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none}
.hh-top a{text-decoration:none}
.hh-top a:hover{background:var(--text);color:var(--bg)}

/* language: each one is the first character of its own name. At rest only the
   one in use shows; on approach the others slide in and the one pointed at (or
   focused) spells its name out. Widths move on grid tracks (0fr -> 1fr), so the
   switch grows smoothly into the free column beside it. The chosen one keeps its
   name while another is pointed at: folding it would slide the one under the
   pointer away from it. */
.lang{display:inline-flex;align-items:center}
.lang button{display:inline-grid;grid-template-columns:0fr;margin:0;padding:0;background:none;border:0;cursor:pointer;
  color:var(--muted);font:inherit;font-weight:600;line-height:1.4;text-transform:none;letter-spacing:.01em;
  transition:grid-template-columns .35s cubic-bezier(.65,0,.35,1),margin .35s cubic-bezier(.65,0,.35,1),color .2s}
.lang button.on{grid-template-columns:1fr;color:var(--text)}
.lang button:hover,.lang button:focus-visible{color:var(--text)}
.ls-in{min-width:0;overflow:hidden;display:inline-flex;white-space:nowrap;text-transform:uppercase}
.ls-r{display:inline-grid;grid-template-columns:0fr;transition:grid-template-columns .35s cubic-bezier(.65,0,.35,1)}
.ls-r>span{min-width:0;overflow:hidden}
.lang.fs-open button,
.lang:has(:focus-visible):not(.fs-picked) button{grid-template-columns:1fr;margin-right:12px}
.lang.fs-open button.on .ls-r,
.lang:has(:focus-visible):not(.fs-picked) button.on .ls-r,
.lang button:focus-visible .ls-r{grid-template-columns:1fr}
@media (hover:hover){
  .lang:hover:not(.fs-picked) button{grid-template-columns:1fr;margin-right:12px}
  .lang:hover:not(.fs-picked) button.on .ls-r,
  .lang:hover:not(.fs-picked) button:hover .ls-r{grid-template-columns:1fr}
}
.lang button:last-child{margin-right:0}
.lang button:focus-visible{outline-offset:2px}
.lang-wave{position:fixed;z-index:9998;width:24px;height:24px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);opacity:.55}
.lang-wave.go{transition:transform 1.05s cubic-bezier(.22,.61,.36,1),opacity 1.05s ease;transform:translate(-50%,-50%) scale(160);opacity:0}

/* search */
.nav-search{position:relative}
.nav-ic{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer}
.nav-ic svg{width:16px;height:16px}
.pop{display:none}
.open>.pop{display:block}
.search-pop{position:absolute;top:calc(100% + 10px);left:0;width:min(340px,calc(100vw - 2*var(--gut)));
  background:var(--bg);border:1px solid var(--line);padding:10px;text-transform:none;font-size:15px;font-weight:500}
.search-bar{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px}
.search-bar svg{width:16px;height:16px;flex:0 0 16px}
.search-bar input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:inherit}
.search-results{display:grid}
.sr{display:flex;align-items:center;gap:10px;padding:8px 0;text-decoration:none;border-bottom:1px solid var(--line)}
.sr:hover{background:var(--text);color:var(--bg)}
.sr-empty,.search-hint{padding-top:8px;color:var(--muted)}

/* theme switch - the circles are sized here, as they were */

.theme-toggle{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:var(--text);cursor:pointer}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .tt-mask-c{cx:18px;cy:5px;r:9px;transition:cx .4s ease,cy .4s ease}
.theme-toggle .tt-sun{r:5.2px;transition:r .4s ease}
.theme-toggle .tt-rays{opacity:0;transition:opacity .3s ease}
html.theme-light .theme-toggle .tt-mask-c{cx:24px;cy:1px}
html.theme-light .theme-toggle .tt-sun{r:5.6px}
html.theme-light .theme-toggle .tt-rays{opacity:1}

/* account: avatar menu once signed in */
.hh-me{position:relative}
.hh-me-btn{width:28px;height:28px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:var(--surface);padding:0;cursor:pointer}
.hh-me-btn img{width:100%;height:100%;object-fit:cover}
.hh-ini{font-size:11px}
.hh-me-pop{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--bg);border:1px solid var(--line);padding:8px;text-align:left}
.hh-me.open .hh-me-pop{display:block}
.hh-me-id{display:grid;gap:2px;padding:6px 6px 10px;text-transform:none;font-weight:500}
.hh-me-id span{color:var(--muted)}
.hh-me-a{display:block;width:100%;text-align:left;padding:8px 6px;background:none;border:0;cursor:pointer;text-decoration:none}
.hh-me-sep{height:1px;background:var(--line);margin:4px 0}

/* ── hero: a light band, the film below it, the title over both ──
   As in the demo: the page opens on a pale band with the title in
   dark type; the film starts under it, full width and cut at the
   screen's edges, and the title's last line sits over the film's
   top edge. Exactly one screen, nothing to scroll. fs-atelier.js
   sizes the title and writes --band, where the film begins. */
.hero{position:relative;height:100svh;overflow:hidden;background:var(--band-bg);color:var(--band-ink)}
.hero,.fs-hero{--band-bg:#ecebe7;--band-ink:#0b0c0c}
/* with the canvas running, the band is drawn there, under the film and the title */
html.fs-webgl .hero,html.fs-webgl .fs-hero{background:transparent}
.fs-hero-media{position:absolute;left:0;right:0;bottom:0;top:var(--band,46%);z-index:0}
.fs-hero-media video{filter:brightness(.82)}
.hero-frame{position:absolute;inset:0;padding:72px var(--gut) 28px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:16px;
  grid-template-areas:"title title" ". ." "enter get";align-items:end}
.hh-mid{display:contents}
.hh-body{grid-area:title;align-self:start;color:var(--band-ink)}
/* the WebGL copy is drawn exactly here; the real one steps aside for it */
.hh-body.fs-gl{opacity:0}
.hh-foot{grid-area:enter;margin:0;justify-self:start}
.hh-get{grid-area:get;justify-self:end}

/* the two ways on: real buttons, square-cut. The library is the filled one */
.hh-foot a,.hh-get,.foot-download{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;
  border-radius:4px;text-decoration:none;font-size:15px;font-weight:600;width:fit-content;
  transition:background .2s,color .2s,border-color .2s}
.hh-foot a{background:#fff;color:#0b0c0c;border:1px solid #fff}
.hh-foot a:hover{background:var(--lemon);border-color:var(--lemon)}
.hh-get,.foot-download{color:var(--ink-on-film);border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.18)}
.hh-get:hover,.foot-download:hover{background:#fff;border-color:#fff;color:#0b0c0c}
.hh-get .apple,.foot-download .apple{width:14px;height:17px;flex:0 0 auto}
.hh-get-note,.foot-beta{padding:2px 6px;border:1px solid currentColor;border-radius:2px;
  font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.8;white-space:nowrap}
@media (max-width:700px){
  .hero-frame{grid-template-columns:1fr;grid-template-areas:"title" "." "enter" "get";grid-template-rows:auto 1fr auto auto;row-gap:10px;padding-bottom:22px}
  .hh-get{justify-self:start;flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px}
}

/* the top-bar copy of the nav is retired by the page's own script;
   with CSS on and JS off it would otherwise sit above the hero */
body>nav{display:none}
.announce{display:none}

/* ── sections ───────────────────────────────────────────── */
main{position:relative}
main>section{padding:min(22vh,200px) 0 0}
.col{padding:0 var(--gut)}
.eyebrow{color:var(--muted);margin:0 0 18px}
main h2{margin:0 0 36px}
.sub,.story p,.card p,.faq p{max-width:36em}
.sub{margin:0 0 56px;font-size:clamp(17px,1.35vw,21px);line-height:1.45}
@media (min-width:900px){
  .sub{margin-left:50%}
}

/* trusted by: the marks in a row */
.trusted{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:center;padding:28px var(--gut) !important;border-bottom:1px solid var(--line)}
.trusted .eyebrow{margin:0}
.trusted-row{grid-column:2/-1;display:flex;justify-content:space-between;gap:16px}
.tlogo{flex:1;max-width:120px;height:36px;opacity:0;transition:opacity .6s ease}
.tlogo.on{opacity:.7}
/* .tlogo .mark and .sr-logo live in the page's own <style>: their url() arrives
   in --src, and a url in a custom property resolves against the stylesheet that
   uses it - from this file, a brand path would point into this folder */

/* the library belt */
.belt{overflow-x:auto;overflow-y:hidden;margin-top:12px;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab;
  -webkit-overflow-scrolling:touch;outline-offset:-2px}
.belt::-webkit-scrollbar{display:none}
.belt.fs-dragging{cursor:grabbing;user-select:none}
.belt.fs-dragging a{pointer-events:none}
.belt-track{display:flex;gap:20px;width:max-content;animation:none}
.belt-card{position:relative;flex:0 0 auto;width:clamp(240px,26vw,420px);aspect-ratio:4/3;overflow:hidden;text-decoration:none;
  background:var(--surface)}
/* the photos in black and white; with the canvas running they are drawn there,
   with the liquid ripple, and the DOM copy steps aside */
.belt-card .cover{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .8s var(--ease)}
.belt-card.fs-gl{background:transparent}
.belt-card.fs-gl .cover{opacity:0}
.belt-card:hover .cover{transform:scale(1.04)}
/* a soft shade only where the logo sits, so the photo stays clear around it */
.belt-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%,rgba(0,0,0,.42),rgba(0,0,0,0))}
.belt-logo{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.belt-logo img{width:46%;max-height:42%;object-fit:contain}
/* every logo white: its own shape, filled white - an SVG stays sharp at any size */
.belt-logo img{filter:brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0,0,0,.5))}
.belt-tag{position:absolute;z-index:1;left:12px;bottom:10px;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* the story: the spec list and the three paragraphs */
.story-grid{display:grid;gap:48px}
@media (min-width:900px){.story-grid{grid-template-columns:1fr 1fr}.story-grid>div:last-child{padding-top:1em}}
.story p{margin:0 0 1.1em;font-size:clamp(17px,1.35vw,21px);line-height:1.45}
.spec{display:grid;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;text-transform:uppercase;line-height:1.1}
.spec>div span:first-child{color:var(--muted)}

/* cards: columns of text between hairlines */
.grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
/* fixed counts, so no card is ever left alone on a row of its own */
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (min-width:1800px){#chapters .grid.g3{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:1000px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid.g3,.grid.g4{grid-template-columns:1fr}}
.card{border-top:1px solid var(--text);padding:12px 0 40px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.card h3{margin:0}
.card p{margin:0;color:color-mix(in srgb, var(--text) 78%, transparent)}
.chip{color:var(--muted)}
/* one set: line icons on a 48 grid, 1.5 stroke, 4 corner radius, nothing filled */
.feat .glyph{width:56px;color:var(--text);align-self:flex-start}
.feat .glyph svg{display:block;width:56px;height:56px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* the big mark after the chapters (decorative, aria-hidden) read as a stray white
   block over the modules and left a gap under them; it stays in the page, unshown */
.chapter-mark{display:none}

/* pills: a link that says so */
.pill{display:inline-block;margin-top:auto;padding:10px 16px;border:1px solid var(--text);border-radius:4px;background:var(--text);color:var(--bg);text-decoration:none}
.pill.ghost{background:none;color:var(--text)}
.pill:hover{background:var(--lemon);border-color:var(--lemon);color:#000}

/* pricing */
#bill-toggle{display:flex;width:fit-content;margin:0 auto 32px;padding:4px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
#bill-toggle button{position:relative;border:0;border-radius:999px;padding:9px 18px;background:none;cursor:pointer;
  color:var(--muted);font-size:14px;font-weight:600;text-transform:uppercase;line-height:1.1}
#bill-toggle button.on{color:var(--bg);background:var(--text)}
.fs-has-pill{position:relative;isolation:isolate}
.fs-pill{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--text);z-index:-1;pointer-events:none}
.fs-pill-ready .fs-pill{transition:transform .4s cubic-bezier(.65,0,.35,1),width .4s cubic-bezier(.65,0,.35,1)}
#bill-toggle.fs-has-pill button,#bill-toggle.fs-has-pill button.on{background:none;transition:color .4s cubic-bezier(.65,0,.35,1)}
.fs-has-pill button.on{color:var(--bg)}
.amt{position:relative;display:inline-block}
.amt.fs-rolling{color:transparent}
.fs-amt-roll{position:absolute;left:0;top:0;display:inline-flex;color:var(--text);white-space:nowrap;pointer-events:none}
.fs-dc{display:inline-block;height:1.1em;overflow:clip}
.fs-dc>i{display:block;font-style:normal;white-space:pre;line-height:1.1}
.fs-dc>i::before{content:attr(data-a) "\A" attr(data-b)}
.save{color:var(--lemon)}
.pr-cards .card{padding-bottom:28px}
.plan.accent{border-top-color:var(--lemon)}
.pr-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pr-price .amt{font-size:clamp(52px,6.4vw,104px);font-weight:600;line-height:1.1;letter-spacing:-.06em}
.pr-price .per{color:var(--muted);font-size:14px;font-weight:600;text-transform:uppercase}
.pr-mo{color:var(--muted)}
.pr-lede{font-size:17px;margin:0}
.plan ul,.pr-includes ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;width:100%}
.plan li,.pr-includes li{padding-left:16px;position:relative;font-size:15px;line-height:1.35}
.plan li::before,.pr-includes li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--lemon)}
.pr-seatbar{width:100%;height:3px;background:var(--line)}
.pr-seatbar i{display:block;height:100%;width:0;background:var(--lemon)}
.pr-seats{color:var(--lemon)}
.pr-includes{margin-top:72px;display:grid;gap:14px;border-top:1px solid var(--line);padding-top:12px}
.pr-includes h3{margin:0}
.pr-includes ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.pr-cmp-h{margin:96px 0 0;font-size:clamp(28px,3.4vw,52px);font-weight:600;line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.pr-cmp-h+.sub{margin-left:0;margin-top:14px}
.pr-cmp-wrap{overflow-x:auto;margin:24px calc(-1*var(--gut)) 0;padding:0 var(--gut)}
.pr-cmp{width:100%;min-width:640px;border-collapse:collapse}
.pr-cmp th,.pr-cmp td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.pr-cmp th{border-bottom-color:var(--text)}
.pr-cmp .col-pop{color:var(--lemon)}
.pr-cmp td.feat{color:var(--text)}
.pr-cmp .no{color:var(--muted)}
.pr-cmp small{display:block;color:var(--muted);font-size:11px;margin-top:3px}

/* faq */
.faq{border-top:1px solid var(--text)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 32px 18px 0;position:relative;font-size:clamp(14px,1.2vw,18px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font-size:22px;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 22px}

/* contact */
.contact-row{display:flex;flex-wrap:wrap;gap:8px}
.contact-note{margin-top:20px;color:var(--muted)}

/* the galleries between sections */
.fs-gallery{display:grid;gap:8px;padding:min(22vh,200px) var(--gut) 0}
.fs-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fs-g3 .fs-media{aspect-ratio:3/4}
.fs-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fs-g2 .fs-media{aspect-ratio:16/9}
.fs-band .fs-media{aspect-ratio:21/9}
.fs-gallery .fs-media{border-radius:4px;background:transparent}
/* street footage is framed from the top: the buildings and their signs, not the pavement */
.fs-street video{object-position:50% 0%}
@media (max-width:700px){
  .fs-g3{grid-template-columns:1fr 1fr}
  .fs-g3 .fs-media:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .fs-g2{grid-template-columns:1fr}
}

/* ── footer: a street film with parallax and the lens ────────
   The mark sits at the top of the film, large; the words sit at
   the bottom on a shade of their own: the description at body
   size, the links under it, the Mac app across from them, and the
   company line last, small and quiet. */
footer{position:relative;margin-top:min(22vh,200px);min-height:max(80vh,620px);overflow:hidden;color:var(--ink-on-film);display:flex;flex-direction:column}
.fs-foot-media{position:absolute;inset:0;z-index:0;will-change:transform}
.foot{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:22px;
  grid-template-rows:auto 1fr auto auto;grid-template-areas:"brand brand" ". ." "legal dl" "bottom bottom";
  padding-top:28px;padding-bottom:20px;
  background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 40%,rgba(0,0,0,.82) 78%)}
.foot-brand{grid-area:brand;display:flex;align-items:center;gap:.32em;font-size:clamp(16px,1.8vw,28px);font-weight:600;
  line-height:1;letter-spacing:-.04em;text-transform:uppercase}
.foot-brand svg{width:1.25em;height:auto}
.foot-legal{grid-area:legal;align-self:end;display:grid;gap:16px}
.fl-text{margin:0;max-width:34em;font-size:clamp(16px,1.2vw,19px);line-height:1.45;font-weight:500}
.fl-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fl-row a,.fl-row #signinToggle{text-decoration:underline;text-underline-offset:3px}
.fl-row #signinToggle{background:none;border:0;padding:0;cursor:pointer;text-transform:inherit;font-weight:inherit;display:inline-flex;align-items:center;gap:4px;color:inherit}
.fl-row .chev{width:10px;height:10px}
.foot-download{grid-area:dl;align-self:end}
.fl-bottom{grid-area:bottom;margin:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);
  font-size:12px;line-height:1.4;color:rgba(255,255,255,.62)}
@media (max-width:700px){
  .foot{grid-template-columns:1fr;grid-template-areas:"brand" "." "legal" "dl" "bottom"}
}

/* ── sign in: a centred box over a dimmed page ──────────── */
#navAccount{position:static}
#navAccount.open .account-pop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10001;
  width:min(380px,calc(100vw - 32px));max-height:86vh;overflow:auto;
  background:var(--bg);color:var(--text);border:1px solid var(--line);padding:18px;display:grid;gap:14px;text-align:left}
#signinBackdrop{position:fixed;inset:0;background:rgba(7,8,8,.62);z-index:10000;display:none}
html.theme-light #signinBackdrop{background:rgba(20,40,80,.32)}
body:has(#navAccount.open) #signinBackdrop{display:block}
.ap-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)}
.ap-seg button{background:none;border:0;padding:10px;cursor:pointer;color:var(--muted);font-weight:600;text-transform:uppercase}
.ap-seg button.on{background:var(--text);color:var(--bg)}
.ap-reg{margin:0;font-size:15px;line-height:1.4}
.ap-soc{display:grid;gap:8px}
.ap-socbtn{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;font-size:15px}
.ap-socbtn:hover{border-color:var(--text)}
.ap-socbtn svg{width:18px;height:18px;flex:0 0 18px}
.ap-soc-label{flex:1}
.ap-soon{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.ap-note{color:var(--muted);text-transform:none;font-weight:500;font-size:13px;line-height:1.35}
.ap-note.pulse{color:var(--lemon)}
.ap-foot{color:var(--muted)}
.ap-reglink{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-transform:inherit;font-weight:inherit}

/* ── small screens ──────────────────────────────────────── */
@media (max-width:700px){
  body{font-size:16px}
  .hh-time{display:none}
  .hh-top{gap:14px}
  .trusted{grid-template-columns:1fr}
  .trusted-row{grid-column:1;flex-wrap:wrap}
  .tlogo{flex:0 0 28%}
}

/* ── reduced motion: still type, still films ────────────── */
@media (prefers-reduced-motion:reduce){
  .belt-track{animation:none}
  .belt{overflow-x:auto}
  .lang-wave{display:none}
  .card .glyph .near{transition:none}
  .belt-card .cover{transition:none}
}


/* ════════════════════════════════════════════════════════════
   the other website pages: pricing, download, imprint, privacy
   ════════════════════════════════════════════════════════════ */

/* the slim bar every one of them opens with */
.bar-top{position:fixed;z-index:50;inset:0 0 auto 0;display:flex;align-items:center;gap:16px;
  padding:10px var(--gut);background:var(--bg);color:var(--text);
  font-size:14px;font-weight:600;line-height:1.1;text-transform:uppercase}
.bar-top a{text-decoration:none}
.bar-top a:hover{background:var(--text);color:var(--bg)}
.bar-title{flex:1}
.bar-title .muted{color:var(--muted)}
.t-mob{display:none}
.bar-back,.login-back{display:inline-flex;align-items:center;gap:6px}
.login-back svg{width:16px;height:16px}
.bar-top .theme-toggle{color:var(--text)}
@media (max-width:700px){.t-desk{display:none}.t-mob{display:inline}}

/* the hero of a page: its title over its film */
.fs-hero{position:relative;height:80svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;
  padding:72px var(--gut) 32px;background:var(--band-bg);color:var(--band-ink)}
.fs-hero>:not(.fs-media){position:relative}
.fs-hero h1{color:var(--band-ink)}
.fs-hero .fs-hero-media video{filter:brightness(.82)}
.fs-hero>p{color:var(--ink-on-film)}
.fs-hero p{margin:auto 0 0;max-width:34em;font-size:clamp(17px,1.35vw,21px);line-height:1.45}
@media (min-width:900px){.fs-hero p{margin-left:50%}}

/* running text: the legal pages */
.legal-stage{padding:min(14vh,120px) var(--gut) 0}
.fs-prose{max-width:46em;margin-left:auto;margin-right:0}
@media (min-width:900px){.fs-prose{width:50%}}
.fs-prose h2{margin:48px 0 10px;font-size:14px;font-weight:600;line-height:1.1;text-transform:uppercase;
  border-top:1px solid var(--text);padding-top:10px}
.fs-prose h2:first-child{margin-top:0}
.fs-prose p,.fs-prose li{margin:0 0 1em;color:color-mix(in srgb, var(--text) 82%, transparent)}
.fs-prose a{text-underline-offset:3px}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:64px;
  font-size:14px;font-weight:600;text-transform:uppercase}
.legal-nav a{padding:9px 14px;border:1px solid var(--text);text-decoration:none}
.legal-nav a:hover{background:var(--text);color:var(--bg)}

/* pricing */
.price-stage{padding:min(14vh,120px) var(--gut) 0}
.plans{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.plan{border-top:1px solid var(--text);padding:12px 0 28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;outline:none}
.plan.popular{border-top-color:var(--lemon)}
.plan.on .cta{background:var(--text);color:var(--bg)}
.plan:focus-visible{outline:2px solid var(--lemon);outline-offset:6px}
.plan .who,.plan .mo,.plan .seats,.plan .transferable{font-size:14px;font-weight:600;line-height:1.1;text-transform:uppercase}
.plan .mo{color:var(--muted)}
.plan .amount{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan .amt{font-size:clamp(52px,6.4vw,104px);font-weight:600;line-height:1.1;letter-spacing:-.06em}
.plan .per{color:var(--muted);font-size:14px;font-weight:600;text-transform:uppercase}
.plan .lede{margin:0;font-size:17px}
.plan ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;width:100%}
.plan li{padding-left:16px;position:relative;font-size:15px;line-height:1.35}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--lemon)}
.plan .seatbar{width:100%;height:3px;background:var(--line)}
.plan .seatbar i{display:block;height:100%;width:0;background:var(--lemon)}
.plan .seats{color:var(--lemon)}
.plan .transferable{color:var(--muted);text-transform:none;font-weight:500;line-height:1.35}
.plan .cta{margin-top:auto;padding:9px 14px;border:1px solid var(--text);text-decoration:none;font-size:14px;font-weight:600;text-transform:uppercase}
.plan .cta:hover{background:var(--lemon);border-color:var(--lemon);color:#000}
.includes{margin-top:min(22vh,200px)}
.includes ul{margin:0;padding:0;list-style:none;display:grid;gap:6px 8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  border-top:1px solid var(--text);padding-top:12px}
.includes li{padding-left:16px;position:relative;font-size:15px}
.includes li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--lemon)}
.cmp-head{margin-top:min(22vh,200px)}
.cmp-head p{margin:0 0 32px}
@media (min-width:900px){.cmp-head p{margin-left:50%}}
.cmp-wrap{overflow-x:auto;margin:0 calc(-1*var(--gut));padding:0 var(--gut)}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:14px;font-weight:600;text-transform:uppercase}
.cmp th,.cmp td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp th{border-bottom-color:var(--text)}
.cmp .col-pop{color:var(--lemon)}
.cmp .no{color:var(--muted)}
.cmp small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
.donate{margin-top:min(22vh,200px);border-top:1px solid var(--line);padding-top:16px;display:grid;gap:16px}
.donate p{margin:0;max-width:36em}
.donate .ways{display:flex;flex-wrap:wrap;gap:8px}
.donate .ways a{padding:9px 14px;border:1px solid var(--text);text-decoration:none;font-size:14px;font-weight:600;text-transform:uppercase}
.donate .ways a:hover{background:var(--text);color:var(--bg)}
.price-stage .back{display:inline-block;margin-top:48px;font-size:14px;font-weight:600;text-transform:uppercase;text-underline-offset:3px}
/* pricing splits its wordmark into one span per letter; the space must keep its width */
.wordmark .gl{display:inline-block;white-space:pre}

/* download */
.fs-hero .row{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.fs-hero .fs{width:28px;color:var(--band-ink);margin-bottom:20px}
.fs-hero .apple{width:20px;height:24px}
.beta{padding:2px 6px;border:1px solid currentColor;font-size:12px;font-weight:600}
.dl{padding:min(14vh,120px) var(--gut) 0;display:grid;gap:40px}
@media (min-width:900px){.dl>*{margin-left:50%}}
.dl>p{margin:0;max-width:34em;font-size:clamp(17px,1.35vw,21px);line-height:1.45}
.dl ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--text)}
.dl ul li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.dl ul li svg{width:16px;height:16px;flex:0 0 16px;margin-top:.25em;color:var(--lemon)}
.dl .cta{display:grid;gap:10px;justify-items:start}
.dl .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;background:var(--text);color:var(--bg);text-decoration:none;
  font-size:14px;font-weight:600;text-transform:uppercase}
.dl .btn:hover{background:var(--lemon);color:#000}
.dl .req,.dl .sys{color:var(--muted);font-size:14px;font-weight:600;text-transform:uppercase}
.dl .first .h{display:block;font-size:14px;text-transform:uppercase;border-top:1px solid var(--text);padding-top:10px}
.dl .first ol{padding-left:1.2em}
.dl .first li{margin:0 0 .8em}
.dl code{font-family:ui-monospace,Menlo,monospace;font-size:.88em}
.dl .home a{font-size:14px;font-weight:600;text-transform:uppercase;text-underline-offset:3px}

/* the footer of these pages, and the closing band of the one without */
.site-footer{position:relative;margin-top:min(22vh,200px);min-height:max(70vh,560px);overflow:hidden;color:var(--ink-on-film);
  display:flex;flex-direction:column}
.site-footer>:not(.fs-media){position:relative}
.site-footer .fs-foot-wrap{flex:1;display:grid;grid-template-rows:auto 1fr auto auto;row-gap:18px;
  padding:28px var(--gut) 20px;
  background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 80%)}
.site-footer img{grid-row:1;width:clamp(36px,3.5vw,56px);filter:none}
.site-footer .links{grid-row:3;display:flex;flex-wrap:wrap;gap:14px;font-size:14px;font-weight:600;text-transform:uppercase}
.site-footer .links a{text-underline-offset:3px}
.ft-text{grid-row:4;display:grid;gap:4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);
  font-size:12px;line-height:1.4;color:rgba(255,255,255,.62)}
.fs-endband{position:relative;margin-top:min(22vh,200px);height:max(65vh,520px);overflow:hidden}

/* ════════════════════════════════════════════════════════════
   login pages: the same type, colour and picture - and calm.
   No canvas, no smooth scroll, no film: a still frame sits away
   from the form, and the form is on plain ground, usable at once.
   ════════════════════════════════════════════════════════════ */
.fs-login{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,520px)}
.fs-login-media{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.fs-login-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.fs-login-panel{display:flex;flex-direction:column;justify-content:center;gap:28px;padding:96px var(--gut) 32px;background:var(--bg)}
@media (max-width:800px){
  .fs-login{grid-template-columns:1fr}
  .fs-login-media{position:relative;height:28svh}
  .fs-login-panel{padding-top:32px;justify-content:flex-start}
}
.fs-login-panel h1{margin:0;font-size:clamp(48px,7vw,112px);font-weight:600;line-height:1;letter-spacing:-.06em;text-transform:uppercase}
.login-card{display:grid;gap:18px;margin:0}
.login-logo{width:28px;height:auto}
html.theme-light .login-logo{filter:invert(1)}
.login-sub{margin:14px 0 0;font-size:17px;max-width:30em}
.soc-row{display:grid;gap:8px}
.soc{display:flex;align-items:center;gap:10px;width:100%;padding:14px;border:1px solid var(--line);background:var(--surface);
  color:var(--text);cursor:pointer;text-align:left;font-size:15px}
.soc:hover{border-color:var(--text)}
.soc svg{width:18px;height:18px;flex:0 0 18px}
.soc-label{flex:1}
.soon-chip{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.soc-note{margin-top:10px;color:var(--muted);font-size:13px;line-height:1.35}
.soc-note.pulse{color:var(--lemon)}
.login-foot{color:var(--muted);font-size:12px;line-height:1.45;font-weight:600;text-transform:uppercase;max-width:46em}
.login-foot a{text-underline-offset:3px}

/* the desktop app's sign-in bridge: one card, the same calm ground */
/* .card here is the bridge's own box, not the homepage's hairline card */
.fs-login .card{display:grid;gap:16px;justify-items:start;max-width:420px;border:0;padding:0}
.fs-login .card .mark{width:28px;height:auto}
.fs-login .card h1{font-size:clamp(40px,5vw,72px)}
.fs-login .card p{margin:0;font-size:17px}
.fs-login .card .btns{display:grid;gap:8px;width:100%}
.fs-login .card button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font-size:15px;font-weight:600}
.fs-login .card button:hover{border-color:var(--text)}
.fs-login .card button svg{width:18px;height:18px}
.fs-login .card a{color:inherit;width:100%}
.fs-login .status{min-height:16px;font-size:13px;color:var(--muted)}
.fs-login .status.err{color:#ff6b6b}