/* ==========================================================================
   Stream Universe · the account funnel
   Built from the DESKTOP screens on Figma `Flow v3`, not the phone ones:
   D03 Sign in (367:4850) · D08 Create your account (368:4863) ·
   D09 Verify your email (397:6610). 1440 x 1024, 480px card.

   Loaded on top of styles.css, which carries the tokens and the components
   this reuses (.push, .brand, .lang, the starfield). Every hex the Figma
   export named is already a token there, so almost nothing below is a literal
   colour; where one appears it is a value the design system never named, and
   it says so.

   Numbers are measured, not eyeballed: geometry from the node tree, fills and
   radii from get_design_context, and the few remaining values sampled out of
   the 1440px render.
   ========================================================================== */

/* Author styles beat the user agent's `[hidden]{display:none}` no matter how
   low their specificity, so every `display` rule below would quietly un-hide
   its own element. Half this funnel is sections that start hidden, so this
   line is load-bearing rather than defensive. */
[hidden]{display:none!important}

/* The funnel sits on Space, not on the landing page's Void. Same rule as the
   app: every screen after the splash is #080B14. */
body{background:var(--space)}

/* ── the galaxy mark, without inlining it five times ─────────────── */
/* The landing page inlines the path as an SVG symbol because it uses it at
   four sizes on one page. Here it appears once per page across six pages, so
   it is a mask instead: one cached file, and `background:currentColor` keeps
   the "recolour per use" rule the design system asks for. The source is
   `fill="currentColor"`, which a mask reads as fully opaque, which is what a
   mask wants. */
.mark{
  display:block;background:currentColor;
  -webkit-mask:url(/assets/logo/stream-universe-mark.svg) center/contain no-repeat;
  mask:url(/assets/logo/stream-universe-mark.svg) center/contain no-repeat;
}

/* ── page shell ──────────────────────────────────────────────────── */
/* Two rows, both in flow: the header, then everything else.
   
   The header used to be absolutely positioned over a centred card, which is
   fine on a 1024 tall window and falls apart on anything shorter: the card
   slides underneath and the headline ends up printed over the wordmark. A grid
   cannot do that at any height.
   
   Every vertical measurement below is a clamp against `svh` rather than a
   fixed pixel value, because the requirement is that no step of the funnel
   ever needs scrolling. On a tall window these resolve to the numbers the
   Figma draws; on a short one they give the room back in the order it can
   most afford to lose it. */
.au{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  row-gap:clamp(16px,4svh,40px);
  justify-items:center;
  padding:clamp(18px,3.4svh,40px) 48px clamp(20px,4svh,48px);
}

.au__top{
  position:relative;z-index:3;justify-self:stretch;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
/* Brand at y=40 is 26 tall, Back at y=108: a 42px gap between them, which is
   the first thing to give on a short window. */
.au__nav{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,3.2svh,42px)}
.au__top .brand__mark{width:26px;height:26px}
.au__top .brand__word{font-size:20px}

.back{
  display:inline-flex;align-items:center;gap:6px;padding:2px 0;
  font-size:14px;color:var(--grey);transition:color .2s;
}
.back:hover{color:var(--ink)}
.back svg{width:20px;height:20px}


/* ── the card ────────────────────────────────────────────────────── */
/* 480 wide, 40 padding, so the content measure is exactly 400 and every
   component below inherits that width. */
.card{
  align-self:center;
  width:100%;max-width:480px;
  background:var(--surf);
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  padding:clamp(22px,4.2svh,40px);
}

/* ── step progress ───────────────────────────────────────────────── */
/* "Three-segment signup progress bar", per the component's own description. */
.card__step{
  margin:0 0 clamp(8px,1.4svh,12px);
  font:600 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  /* The design system files #8F87AD under status, but the Figma uses it as
     label ink on every form screen, so that is what it is here. */
  color:var(--grey);
}
.steps{display:flex;gap:6px;list-style:none;margin:0 0 clamp(16px,3.2svh,28px);padding:0}
.steps li{flex:1 1 0;height:4px;border-radius:2px;background:var(--purple-800)}
.steps li.is-on{background:var(--purple-500)}

/* ── card type ───────────────────────────────────────────────────── */
/* `line-height: normal` rather than a number: the Figma text nodes are all
   `leading-[normal]`, and on SF Pro that is the ~1.19 the screens are drawn
   at. Pinning a number would be a different design on every fallback font. */
.card__h1{
  margin:0 0 clamp(6px,1svh,8px);
  font-size:clamp(25px,min(2.6vw,4.3svh),34px);font-weight:700;line-height:normal;letter-spacing:-.02em;
  color:var(--ink);
}
.card__sub{margin:0 0 clamp(15px,3.2svh,28px);font-size:clamp(15px,2svh,16px);line-height:normal;color:var(--ink-2)}
/* The address the sentence names. Same weight and colour as the rest of
   the line, as drawn; it only needs to be able to break. */
.card__sub span{overflow-wrap:anywhere}
.card__hint{margin:clamp(9px,1.9svh,16px) 0 0;font-size:13px;line-height:normal;color:var(--ink-3)}

.card__foot{margin:clamp(13px,2.8svh,24px) 0 0;text-align:center;font-size:14px;font-weight:500;color:var(--grey)}
.card__foot a{color:var(--purple-300);transition:color .2s}
.card__foot a:hover{color:var(--ink)}

/* ── fields ──────────────────────────────────────────────────────── */
/* "Labelled input used across account, password and payment forms." */
.fields{display:flex;flex-direction:column;gap:clamp(10px,2svh,16px)}
.field{display:flex;flex-direction:column;gap:clamp(4px,.9svh,7px);min-width:0}
.field__lab{
  font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey);
}
.in{
  width:100%;height:clamp(42px,6.2svh,50px);padding:0 14px;
  background:var(--purple-900);border:1px solid var(--purple-800);border-radius:12px;
  color:var(--ink);font-size:15.5px;outline:none;
  transition:border-color .2s,box-shadow .3s;
}
.in::placeholder{color:var(--ink-3)}
.in:focus{border-color:var(--purple-500);box-shadow:var(--glow-v)}
.in[aria-invalid="true"]{border-color:var(--red)}
/* Safari paints its own yellow over autofilled inputs and the dark text on it
   is unreadable. There is no way to set the background, only to fake it with
   an inset shadow the size of the box. */
.in:-webkit-autofill,.in:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 60px var(--purple-900) inset;
  caret-color:var(--ink);
}

/* the password box carries a reveal toggle, so the input needs the room */
.pw{position:relative}
.pw .in{padding-right:76px}
.pw__see{
  position:absolute;right:5px;top:50%;translate:0 -50%;height:40px;padding:0 11px;
  border:0;border-radius:8px;background:none;cursor:pointer;
  font:600 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--grey);
  transition:color .2s,background .2s;
}
.pw__see:hover{color:var(--ink);background:rgba(255,255,255,.07)}

/* ── primary button ──────────────────────────────────────────────── */
/* The app's 3D push button, which styles.css already implements: a Purple/500
   face riding 6px above a Purple/800 base. Only two things differ from the
   landing page's pill version, and both come from the Figma component: an 8px
   radius instead of a full round, and a Purple/400 hairline on the face. */
.push--card{width:100%;display:block;border-radius:8px}
.push--card .push__face{
  height:clamp(44px,6.4svh,52px);border-radius:8px;
  border:1px solid var(--purple-400);
  font-size:15px;font-weight:700;letter-spacing:-.01em;
}
.push--card{margin-top:clamp(14px,3svh,26px)}

/* ── the provider buttons ────────────────────────────────────────── */
/* Apple and Google both publish binding rules for these, and D03 as drawn
   breaks nearly all of them: two narrow buttons labelled "Apple" and "Google",
   no marks, on our own translucent white. Google forbids the bare word
   "Google" as a label outright. Apple permits exactly three titles and
   requires the fill, the mark and the title to be black or white.
   So this is the one place the build deliberately departs from the Figma.

   Apple (developer.apple.com, Sign in with Apple > Displaying buttons):
     titles: only Sign in with / Sign up with / Continue with Apple
     appearance: white, white with outline, or black. Black is explicitly
       wrong on a dark background, so this is the white style
     minimum 140pt wide and 30pt tall, margin around the button at least
       1/10 of its height
     corner radius is ours to choose, to match the rest of the UI

   Google (developers.google.com/identity/branding-guidelines):
     text: Sign in with / Sign up with / Continue with Google
     dark theme: #131314 fill, #8E918F 1px inside stroke, #E3E3E3 text
     12px before the mark, 10px after it, 12px after the text
     the mark is the standard colour G, never recoloured or resized

   Stacked rather than side by side because the required titles do not fit
   194px, and because Apple's floor is 140pt of width before margins. */
.social{display:flex;flex-direction:column;gap:clamp(7px,1.3svh,10px);margin-top:clamp(13px,2.8svh,24px)}

/* Layout only. Each variant below brings its own mandated skin. */
.sbtn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:clamp(42px,6svh,50px);padding-inline:12px;border-radius:8px;cursor:pointer;
  font-size:15px;font-weight:500;
  transition:background .2s,border-color .2s,color .2s;
}
.sbtn__logo{width:18px;height:18px;flex:0 0 auto;display:block}

.sbtn--apple{background:#fff;color:#000;border:0;font-weight:600}
.sbtn--apple:hover{background:#eaeaea}
.sbtn--apple .sbtn__logo{fill:#000}

.sbtn--google{background:#131314;color:#E3E3E3;border:1px solid #8E918F}
.sbtn--google:hover{background:#1d1d1e}

/* The design system's plain Secondary Button: "non-primary full-width action".
   Ours, so ours to style, unlike the two above. */
.sbtn--plain{background:var(--surf-2);border:1px solid var(--line);color:var(--ink);font-weight:600}
.sbtn--plain:hover{background:rgba(255,255,255,.11);border-color:var(--purple-800)}

/* Ours too. "Danger variant for destructive actions." */
.sbtn--danger{
  background:none;border:1px solid rgba(255,107,107,.28);
  color:var(--red);font-weight:600;
}
.sbtn--danger:hover{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.45)}

.or{
  display:flex;align-items:center;gap:14px;margin-top:clamp(14px,3svh,26px);
  font-size:13px;color:var(--ink-3);
}
.or::before,.or::after{content:"";flex:1 1 0;height:1px;background:rgba(255,255,255,.1)}

/* ── one row, two links ──────────────────────────────────────────── */
.rowlinks{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:14px}
.rowlinks--end{justify-content:flex-end}
.rowlinks--gap{margin:14px 0 0}
.rowlinks--code{margin:22px 0 0}
.link{color:var(--purple-300);transition:color .2s}
.link:hover{color:var(--ink)}
.link-btn{
  background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--purple-300);
  transition:color .2s;
}
.link-btn:hover{color:var(--ink)}
.link-btn[disabled]{color:var(--ink-3);cursor:default}

/* ── the six digit code ──────────────────────────────────────────── */
/* "Six-digit verification code field used in email, phone and password flows."
   One real input behind six drawn boxes, not six inputs. Six inputs is the
   usual build and it fights every password manager, every paste, and the
   keyboard's own offer to fill the code from the email. This way
   `autocomplete="one-time-code"` simply works. */
.code{position:relative}
.code__boxes{display:flex;gap:9px;pointer-events:none}
.code__boxes i{
  flex:1 1 0;min-width:0;height:58px;border-radius:12px;
  background:var(--purple-900);border:1.4px solid var(--purple-800);
  display:grid;place-items:center;font-style:normal;
  font-size:24px;font-weight:600;color:var(--ink);
  transition:border-color .2s,box-shadow .3s;
}
/* The component's Filled variants carry a brighter edge on a box that holds a
   digit. The design system never named this violet, so it is a literal. */
.code__boxes i.is-set{border-color:#4C2A85}
.code__boxes i.is-on{border-color:var(--purple-500);box-shadow:var(--glow-v)}
.code__in{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;border:0;background:none;cursor:pointer;
  /* 16px or larger, or iOS zooms the page when it takes focus. */
  font-size:24px;
}

/* ── status line ─────────────────────────────────────────────────── */
.msg{margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--amber);min-height:1.2em}
.msg.is-ok{color:var(--green)}
.msg:empty{min-height:0;margin:0}

.is-busy{opacity:.6;pointer-events:none}

/* ── account ─────────────────────────────────────────────────────── */
/* The pane from D36, without the app shell around it: that screen's top bar
   and left rail hang off Home, My List and search, none of which exist yet. */
.card--wide{max-width:620px}

.who{display:flex;align-items:center;gap:18px;padding-bottom:clamp(14px,3svh,26px)}
.who__mark{
  width:64px;height:64px;flex:0 0 auto;border-radius:50%;
  background:var(--purple-900);border:1px solid var(--purple-800);
  display:grid;place-items:center;color:var(--purple-400);
}
.who__mark .mark{width:34px;height:34px}
.who__txt{min-width:0}
.who__name{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;overflow-wrap:anywhere}
.who__mail{margin:3px 0 0;font-size:14px;color:var(--ink-3);overflow-wrap:anywhere}

.grouplab{
  margin:0 0 4px;padding-top:clamp(13px,2.6svh,22px);border-top:1px solid var(--line-2);
  font:600 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
}
.row{
  display:flex;align-items:center;gap:16px;padding:clamp(8px,2svh,16px) 0;
  border-bottom:1px solid var(--line-2);font-size:15px;
}
.row:last-child{border-bottom:0}
.row__k{flex:0 0 auto}
.row__v{
  margin-left:auto;text-align:right;min-width:0;
  color:var(--ink-2);font-size:14px;overflow-wrap:anywhere;
}

.badge{
  display:inline-flex;align-items:center;padding:5px 12px;border-radius:var(--r-full);
  font:600 11px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  background:var(--purple-900);border:1px solid var(--purple-800);color:var(--ink-2);
}
.badge--live{background:rgba(74,222,140,.1);border-color:rgba(74,222,140,.35);color:var(--green)}
.badge--wait{background:rgba(255,194,71,.1);border-color:rgba(255,194,71,.35);color:var(--amber)}

/* A standalone one, not in the two-column provider row. `display:flex` does
   not stretch a <button>: form controls size to their content even when they
   are block-level, so the width has to be asked for. */
.card--wide .sbtn{width:100%;margin-top:clamp(14px,3svh,26px)}

/* ── short windows ───────────────────────────────────────────────── */
/* Everything in here is "the window is shorter than the 1024 D02 and D10 were
   drawn at". That is most laptops: a 1080p screen gives about 950 of viewport
   once the browser has taken its chrome. The full layout fits at 1024 with
   nothing to spare, so the boundary is exactly there rather than at some
   rounder number, and below it the page gives back the things it can afford:
   Back moves up beside the brand (55px), the benefits become one wrapped row
   (45px), and the type steps down. Height, not width: a 1440x720 window needs
   this and a 900x1200 one does not. */
@media (max-height:1023px){
  .au__nav{flex-direction:row;align-items:center;gap:22px}
  .au__nav .back{padding:0}
}

/* ── phone ───────────────────────────────────────────────────────── */
/* The desktop card becomes the whole screen. The phone screens in the Figma
   drop the card entirely and run full bleed, so the border softens rather than
   boxing a 340px column inside a 360px viewport. */
@media (max-width:720px){
  .au{display:block;padding:24px 20px 48px}
  .au__top{position:static;margin-bottom:30px}
  .au__nav{flex-direction:row;align-items:center;gap:18px}
  .back{padding:6px 0}
  .card{max-width:none;padding:28px 22px;border-radius:16px}
  .card__h1{font-size:28px}
  .card__sub{font-size:15.5px}
  .code__boxes{gap:7px}
  .code__boxes i{height:54px;font-size:22px;border-radius:10px}
}

@media (max-width:400px){
  .au{padding-inline:16px}
  .card{padding:24px 18px}
  .card__h1{font-size:26px}
  .code__boxes{gap:5px}
  .code__boxes i{height:50px;font-size:20px}
}

/* ==========================================================================
   The wide steps: D10 Your services, D11 Titles you love, D12 Choose your plan
   These three drop the card. The page itself is the canvas and the content is
   a centred column, so they get their own shell rather than a wider .card.
   Geometry from the node tree: 960 body on D10 and D11, 900 on D12, both
   starting at y=168 and y=310 respectively under the same floating header.
   ========================================================================== */
/* `justify-items:stretch`, not the shell's `center`: a percentage width on a
   centred grid item resolves against a column the item itself sized, so the
   960px body once collapsed to 38px. These pages want a full width track and
   a body that centres itself with a margin.
   
   No padding of its own any more. It carried `168px 48px 72px`, which is the
   Figma's y=168 read as a constant, and 240px of fixed chrome is most of a
   720 tall window before a single row is drawn. The shell's height-aware
   padding covers it, and on a tall window the row-gap puts the body back at
   y=168 anyway. */
/* A definite height, not a minimum. `.au` is min-height:100svh so that short
   content still fills the screen, but a minimum lets the grid grow with its
   content, which means the 1fr track grows too and an overflow:auto child
   inside it never has a bound to scroll within. It just gets taller and takes
   the page with it. The picker pages need the shell pinned to the viewport
   instead, and then the list is the only thing that moves. */
.au--wide{justify-items:stretch;height:100svh}
/* Stretch, not start. The body has to fill the 1fr track for the picker
   inside it to have a height to scroll within: an item sized to its own
   content gives its children nothing to be a percentage of, so the list just
   grows and takes the page with it. `start` was right when the content was
   shrunk to fit and wrong the moment it started scrolling. */
.au--wide .body{align-self:stretch}
/* D12 has no step head, far less content and no list, so it keeps sitting in
   the middle of what is left rather than stretching to fill it. */
.au--plan .body{align-self:center}
/* Ten posters and their labels need every pixel the head is not using, so the
   head is tighter here than on D10 and so is the gap under the header. */
.au--tiles{row-gap:clamp(8px,1.6svh,18px)}
/* Brand and Back on one line at every height here, not just on short windows:
   stacking them is 55px, and this is the one page where two rows of artwork
   need every one of them. */
.au--tiles .au__nav{flex-direction:row;align-items:center;gap:22px}
.au--tiles .au__nav .back{padding:0}
.au--tiles .step__sub{margin-bottom:clamp(12px,2.4svh,20px)}
.au--tiles .seek{margin-bottom:clamp(12px,2.6svh,22px)}

.body{width:100%;max-width:960px;margin-inline:auto}
.body--narrow{max-width:900px}

/* ── the centred step head ───────────────────────────────────────── */
.step__lab{
  margin:0 0 clamp(9px,1.8svh,16px);text-align:center;
  font:600 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--grey);
}
.steps--c{max-width:360px;margin:0 auto clamp(14px,3svh,26px)}
.step__h1{
  margin:0 0 clamp(6px,1.2svh,10px);text-align:center;
  font-size:clamp(27px,min(3.2vw,5.2svh),42px);font-weight:700;line-height:normal;letter-spacing:-.025em;color:var(--ink);
}
.step__sub{margin:0 auto clamp(16px,3.2svh,28px);text-align:center;font-size:clamp(15px,2svh,16px);line-height:normal;color:var(--ink-2);max-width:74ch}

/* ── the search pill ─────────────────────────────────────────────── */
.seek{
  display:flex;align-items:center;gap:10px;
  width:420px;max-width:100%;height:clamp(40px,5.6svh,46px);margin:0 auto clamp(16px,3.4svh,30px);padding:0 16px;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r-full);
  transition:border-color .25s,box-shadow .35s;
}
.seek:focus-within{border-color:var(--purple-500);box-shadow:var(--glow-v)}
.seek svg{width:17px;height:17px;color:var(--ink-3);flex:0 0 auto}
.seek input{
  flex:1 1 auto;min-width:0;height:100%;
  background:none;border:0;outline:none;color:var(--ink);font-size:15px;
}
.seek input::placeholder{color:var(--ink-3)}

/* ── the scrolling picker ────────────────────────────────────────── */
/* Services and titles both used to shrink their contents until everything
   fitted, which capped how much could be offered: ten services, ten posters,
   and posters that got smaller on a shorter window. The list scrolls instead.
   The page still never scrolls, which was always the actual requirement; the
   difference is that "no page scroll" is now achieved by giving the list its
   own overflow rather than by making the content smaller than the window.

   Everything above it (brand, step head, search) and the Continue button
   below stay put, so the thing you press is always on screen no matter how
   far down the list you are. */
.au--wide .body{display:flex;flex-direction:column;min-height:0}
.picker{
  flex:1 1 auto;min-height:0;overflow-y:auto;
  /* Stops a flick at the end of the list from scrolling the page behind it. */
  overscroll-behavior:contain;
  /* The scrollbar sits inside the padding, so rows do not jump sideways when
     it appears and disappears between filtered results. */
  scrollbar-gutter:stable;
  margin-bottom:clamp(14px,3svh,26px);
}
/* D12 has no list, so it opts out of the flex column entirely and keeps the
   plain block flow it was drawn with. */
.au--plan .body{display:block}

/* ── services, two columns of rows ───────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.6svh,14px) 16px}
/* `width:100%` because these are <button>s. A form control sizes to its own
   content even as a grid item with justify-self:stretch, so without this the
   row collapses to the logo plus the tick. Third time in this file. */
.svc{
  display:flex;align-items:center;gap:14px;width:100%;
  height:clamp(48px,7.4svh,68px);padding:0 18px;border-radius:12px;cursor:pointer;text-align:left;
  background:var(--surf);border:1px solid var(--line);color:var(--ink);
  transition:border-color .2s,background .2s;
}
.svc:hover{border-color:var(--purple-800)}
.svc[aria-pressed="true"]{border-color:var(--purple-500);background:rgba(109,40,217,.16)}
.svc__logo{
  width:36px;height:36px;flex:0 0 auto;border-radius:9px;object-fit:cover;
  background:var(--purple-900);
}
.svc__name{font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Selection is a circle, never a rectangle: the standing rule in this file. */
.svc__tick{
  margin-left:auto;flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;
  transition:border-color .2s,background .2s;
}
.svc__tick svg{width:12px;height:12px;color:#fff;opacity:0}
.svc[aria-pressed="true"] .svc__tick{background:var(--purple-500);border-color:var(--purple-500)}
.svc[aria-pressed="true"] .svc__tick svg{opacity:1}

/* ── titles, five posters across ───────────────────────── */
/* 860 at every height now, which is five columns of 148: exactly what D11
   draws. This used to be a two-line fit against the window height, because
   two rows of 2:3 artwork plus a Continue button is taller than a 900px
   window and the posters had to shrink to make room. The picker scrolls, so
   the arithmetic is gone and the posters are the size they were designed at
   on every screen. */
.tiles{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px 30px;
  max-width:860px;margin:0 auto;
}
.tile{
  background:none;border:0;padding:0;cursor:pointer;text-align:left;width:100%;
  display:flex;flex-direction:column;gap:10px;color:var(--ink);min-width:0;
}
.tile__art{
  position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  background:var(--purple-900);border:2px solid transparent;
  transition:border-color .2s,transform .25s var(--ease);
}
.tile:hover .tile__art{transform:translateY(-3px)}
.tile[aria-pressed="true"] .tile__art{border-color:var(--purple-500)}
.tile__art img{width:100%;height:100%;object-fit:cover;display:block}
.tile__tick{
  position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;
  background:var(--purple-500);display:grid;place-items:center;
  opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s var(--ease);
}
.tile__tick svg{width:13px;height:13px;color:#fff}
.tile[aria-pressed="true"] .tile__tick{opacity:1;transform:none}
/* Two lines at most. A long title pushing a tile taller than its neighbours
   ragged the whole row. */
.tile__name{
  font-size:14.5px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tile__meta{font-size:12.5px;color:var(--ink-3);margin-top:-6px}

.empty{text-align:center;color:var(--ink-3);font-size:15px;padding:60px 0}

/* the wide steps end on a centred 360px button, not a full-width one */
.push--step{width:360px;max-width:100%;margin-inline:auto;margin-top:0}

/* ── choose your plan ────────────────────────────────────────────── */
.plan-cols{display:grid;grid-template-columns:461fr 396fr;gap:43px;align-items:start}
.plan-list{display:flex;flex-direction:column;gap:clamp(8px,1.6svh,12px)}

.plan{
  display:flex;align-items:center;gap:16px;
  padding:clamp(12px,2.4svh,18px) 20px;border-radius:14px;cursor:pointer;text-align:left;width:100%;
  background:var(--purple-900);border:1px solid var(--purple-800);color:var(--ink);
  transition:border-color .2s,background .2s;
}
.plan:hover{border-color:var(--purple-600)}
.plan[aria-pressed="true"]{border-color:var(--purple-500);background:rgba(109,40,217,.22)}
.plan__radio{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--ink-3);display:grid;place-items:center;transition:border-color .2s;
}
.plan__radio::after{
  content:"";width:10px;height:10px;border-radius:50%;background:var(--purple-400);
  opacity:0;transition:opacity .2s;
}
.plan[aria-pressed="true"] .plan__radio{border-color:var(--purple-400)}
.plan[aria-pressed="true"] .plan__radio::after{opacity:1}
.plan__txt{min-width:0}
.plan__name{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700}
.plan__sub{margin:3px 0 0;font-size:13px;color:var(--ink-2)}
.plan__save{
  padding:3px 8px;border-radius:var(--r-full);background:var(--purple-500);color:#fff;
  font:700 10px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
}
.plan__price{margin-left:auto;text-align:right;flex:0 0 auto}
.plan__amount{font-size:21px;font-weight:700;letter-spacing:-.02em}
.plan__per{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}

.perks{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:24px}
.perks h2{margin:0 0 18px;font-size:17px;font-weight:700}
.perks ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.perks li{display:flex;gap:12px;font-size:14.5px;line-height:1.35;color:var(--ink)}
.perks li svg{width:15px;height:15px;flex:0 0 auto;color:var(--purple-400);margin-top:2px}
.perks__fine{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-2);
  font-size:12.5px;line-height:1.5;color:var(--ink-3);
}

/* ── the wide steps on smaller screens ───────────────────────────── */
@media (max-width:1000px){
  .tiles{grid-template-columns:repeat(4,1fr);gap:26px}
  .plan-cols{grid-template-columns:1fr;gap:26px}
}
@media (max-width:720px){
  /* This is the SECOND max-width:720px block in this file. The picker rules
     have to be here and not in the first one, because .picker is declared
     between them and media queries add no specificity: an override above the
     rule it overrides silently loses on source order. That has now cost time
     three times in this file, on the benefit list, on the title labels, and
     on this. Check the line number before adding to a media block. */
  .au--wide{padding:24px 20px 48px;height:auto}
  /* Block flow here, so pinning the shell to the viewport would clip the page
     rather than give the picker a bound to scroll inside. On a phone the page
     scrolling is the right answer, and the list should just be as long as it
     is. */
  .picker{overflow:visible;min-height:0;margin-bottom:22px}
  .step__h1{font-size:28px}
  .step__sub{font-size:15.5px}
  .svc-grid{grid-template-columns:1fr;gap:10px}
  .svc{height:62px;padding:0 14px}
  .tiles{grid-template-columns:repeat(3,1fr);gap:18px}
  .seek{width:100%;margin-bottom:22px}
  .push--step{width:100%}
}
@media (max-width:460px){
  .tiles{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ==========================================================================
   The welcome page, Figma D02, and now the front door at /
   Left: the pitch and the four ways in. Right: a wall of posters that drifts,
   alternate columns up and down. Geometry from the node tree: pitch 640 wide
   at x=48, poster columns 190 wide with 18px gutters, posters 190x285.
   ========================================================================== */
/* Three rows in flow: header, pitch, footnote.

   The header and the footnote used to be absolutely positioned over a
   vertically centred pitch. That holds on a 1024 tall window and collapses on
   anything shorter: the headline slides up under the wordmark and the
   footnote lands on top of the legal line. A grid cannot overlap itself.
   `overflow:hidden` stays, but only to clip the wall, which is the one
   absolutely positioned thing left; the element grows with its content so
   nothing of the pitch is ever cut off. */
.wel{
  position:relative;min-height:100svh;overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  row-gap:clamp(9px,2.4svh,32px);
  padding:clamp(14px,3svh,40px) 48px;
  background:var(--space);
}
.wel__top{
  position:relative;z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.wel__top .brand__mark{width:26px;height:26px}
.wel__top .brand__word{font-size:20px}

/* 560, not the 640 the Figma frame is: the headline wraps on its own line
   breaks well inside that, and the narrower cap is what leaves room for a
   fourth poster column at 1440, as drawn. */
.pitch{position:relative;z-index:2;max-width:560px;align-self:center}
.pitch__h1{
  margin:0 0 clamp(10px,2.2svh,22px);
  font-size:clamp(28px,min(4.4vw,5.6svh),56px);font-weight:700;line-height:1.14;letter-spacing:-.03em;
  text-wrap:balance;
}
.pitch__sub{margin:0 0 clamp(12px,3.6svh,36px);max-width:520px;font-size:clamp(16px,2.5svh,20px);line-height:normal;color:var(--ink-2)}

.perks-list{list-style:none;margin:0 0 clamp(13px,4.6svh,46px);padding:0;display:flex;flex-direction:column;gap:clamp(6px,1.6svh,16px)}
.perks-list li{display:flex;align-items:center;gap:12px;font-size:clamp(14px,2svh,16px);color:var(--ink)}
.perks-list svg{width:16px;height:16px;flex:0 0 auto;color:var(--purple-400)}

.actions{width:360px;max-width:100%;display:flex;flex-direction:column;gap:clamp(6px,1.3svh,12px)}
/* The funnel spaces these from a form above them; here the flex gap does it. */
.actions .push--card,.actions .social{margin-top:0}

.legal{margin:clamp(9px,2.4svh,24px) 0 0;max-width:46ch;font-size:13px;line-height:1.55;color:var(--ink-3)}
/* In a card it is the full measure, and it sits under the button. */
.card .legal{margin-top:clamp(9px,1.9svh,16px);max-width:none}
.legal a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--ink)}

/* The footnote about the service tags. Its own grid row, so it can never sit
   on the legal line above it, and above the wall in z-order so a poster
   drifting past cannot sit on the text either. */
.wel__note{
  position:relative;z-index:3;
  margin:0;max-width:min(52ch, 45vw);
  font:400 12.5px/1.5 var(--sans);color:var(--ink-3);
}

/* ── the wall ────────────────────────────────────────────────────── */
/* Right-anchored so it hugs the edge at any width, and built in JavaScript so
   a phone downloads none of it. Column count is chosen to leave the pitch
   760px of clear space, which is why it never collides. */
.wall{
  position:absolute;top:0;bottom:0;right:0;z-index:1;
  display:flex;gap:18px;pointer-events:none;
}
.wall__col{width:190px;flex:0 0 auto;overflow:hidden}
.wall__track{display:flex;flex-direction:column;will-change:transform}

/* The two halves of the track are identical, so -50% is exactly one list.
   The 18px gutter is a margin on each poster rather than a flex gap: a gap
   would sit between the two halves too and put the loop out by 18px. */
.wall__track--up{animation:wall-up var(--dur,140s) linear infinite}
.wall__track--down{animation:wall-down var(--dur,140s) linear infinite}
@keyframes wall-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.wall__item{
  position:relative;flex:0 0 auto;width:190px;height:285px;margin-bottom:18px;
  border-radius:10px;overflow:hidden;background:var(--purple-900);
}
.wall__item img{width:100%;height:100%;object-fit:cover;display:block}

/* The service tag. A solid chip rather than a scrim over the artwork, so it
   stays legible on a dark poster and a bright one alike without a gradient,
   which the design system does not allow anywhere. */
.tag{
  position:absolute;left:8px;bottom:8px;
  display:inline-flex;align-items:center;gap:6px;
  max-width:calc(100% - 16px);
  padding:5px 10px;border-radius:var(--r-full);
  background:rgba(8,11,20,.86);border:1px solid rgba(255,255,255,.16);
  font-size:11.5px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tag::before{
  content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--green);
}

@media (prefers-reduced-motion:reduce){
  .wall__track--up,.wall__track--down{animation:none}
}

/* Below this the wall is not built at all, so the pitch simply centres. */
@media (max-width:900px){
  .wel{padding:24px 24px 48px;row-gap:24px}
  .pitch{max-width:none;align-self:start}
  .wel__note{max-width:none}
  .pitch__h1{font-size:clamp(32px,8vw,44px)}
  .pitch__sub{font-size:17px;margin-bottom:28px}
  .perks-list{margin-bottom:34px}
  .actions{width:100%}
}

/* ── legal documents ─────────────────────────────────────────────── */
/* /terms and /privacy. Deliberately plain: a long read on a starfield is a
   worse read, so the card widens, the measure caps at 68 characters and the
   atmosphere gets out of the way. */
.doc{max-width:760px;margin-inline:auto;padding:120px 0 80px}
.doc__h1{margin:0 0 8px;font-size:38px;font-weight:700;letter-spacing:-.025em}
.doc__when{margin:0 0 40px;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.doc h2{margin:38px 0 12px;font-size:19px;font-weight:700;letter-spacing:-.015em}
.doc p,.doc li{font-size:15.5px;line-height:1.65;color:var(--ink-2)}
.doc p{margin:0 0 14px;max-width:68ch}
.doc ul{margin:0 0 14px;padding-left:20px;max-width:68ch}
.doc li{margin-bottom:8px}
.doc strong{color:var(--ink);font-weight:600}
.doc a{color:var(--purple-300);text-decoration:underline;text-underline-offset:3px}
.doc__foot{margin-top:48px;padding-top:24px;border-top:1px solid var(--line-2);font-size:14px;color:var(--ink-3)}

/* ── short windows, the welcome page ─────────────────────────────── */
/* At the end of the file on purpose: the welcome rules are declared below the
   general short-window block, so anything overriding them has to come after or
   source order hands the win back to the base rule. It did, once. */
@media (max-height:1023px){
  /* The three benefits become one wrapped row. Stacked they are 122px of a
     700px window, and they are the most compressible thing on the page: the
     headline already makes the argument, these only restate it. */
  .perks-list{flex-direction:row;flex-wrap:wrap;gap:5px 18px}
  .perks-list li{font-size:13.5px;gap:8px}
  .perks-list svg{width:14px;height:14px}

  /* Everything below lowers the svh COEFFICIENT rather than the clamp floor.
     A floor only bites once the middle term falls under it, which for these
     is somewhere around a 400px window: lowering the floors did nothing at
     700 and the pages stayed exactly as over as they were. */

  /* The welcome page: headline, the provider pair, the divider. */
  .pitch__h1{font-size:clamp(26px,min(4.4vw,5svh),56px)}
  .wel .or{margin-top:clamp(10px,2svh,26px)}
  .wel .sbtn{height:clamp(36px,5.4svh,50px)}
  .wel .push--card .push__face{height:clamp(38px,5.8svh,52px)}
  .wel{row-gap:clamp(8px,1.6svh,32px)}
  .pitch__sub{margin-bottom:clamp(10px,2.6svh,36px)}
  .perks-list{margin-bottom:clamp(11px,3.4svh,46px)}

  /* The card pages, which are three fields deep on signup. */
  .card{padding:clamp(16px,3.4svh,40px)}
  .card__sub{margin-bottom:clamp(12px,2.4svh,28px)}
  .fields{gap:clamp(9px,1.6svh,16px)}
  .in{height:clamp(36px,5.6svh,50px)}

}