/* ============================================================
   BOOKESSA — scroll film
   Palette sampled directly from the film + the brand mark.

   Structure note: the *stacked* story is the default. The pinned
   film is opt-in via html.film-mode, added by an inline script
   before first paint. So no-JS, reduced-motion and "the video
   died" all land on a real page instead of a blank one.
   ============================================================ */

:root{
  /* the page's content column: fixed through laptop widths, stepping up on a
     wide screen so the sections do not sit in a 1180px ribbon at 1920 */
  --col: clamp(1180px, 70vw, 1400px);
  /* ground — the black the mark sits on, and the film's light void
     after the 25% ember wash (sampled from frame f0300) */
  --ink:        #0C0705;
  --ink-2:      #140B08;   /* raised dark surface                   */
  --ink-3:      #22120C;
  --canvas:     #E4DBD2;   /* the light void after the 25% ember wash — exact film value */
  --canvas-up:  #EFE8E0;
  --paper:      #F3EAE4;   /* text on the dark ground               */

  /* ember — sampled from bookessa-mark-ember.png, darkest fold to
     brightest highlight */
  --em-900: #320200;
  --em-800: #5B0A01;
  --em-700: #7D1502;
  --em-600: #952102;
  --em-500: #B5340D;
  --em-400: #DB5B2A;
  --em-300: #EC7440;
  --em-200: #F49A6C;
  --em-100: #F8C3A4;

  /* Three gradients, each measured for its text rather than guessed:
       --grad      fills on LIGHT ground, white text  — 5.2:1 at its bright end
       --grad-lite fills on DARK ground, ink text     — 5.2:1 at its dark end
       --grad-txt  gradient TEXT; re-declared per tone further down      */
  --grad:      linear-gradient(118deg, #5B0A01 0%, #952102 52%, #C23A12 100%);
  --grad-lite: linear-gradient(118deg, #E05620 0%, #EE6E34 50%, #F58A4B 100%);
  --grad-txt:  linear-gradient(118deg, #7D1502 0%, #A82E0C 100%);

  /* solid CTA and loose chrome flip with the ground they sit on */
  --btn-bg: var(--grad);
  --btn-fg: #FFF6F0;
  --fill:   var(--grad);

  /* ember light rather than a grey drop */
  --glow:  rgba(149,33,2,.45);
  --glow2: rgba(224,86,32,.5);

  --pad:   clamp(22px, 5.2vw, 92px);
  --pad-t: clamp(88px, 13vh, 150px);

  --ease:  cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  background:var(--ink);
  -webkit-text-size-adjust:100%;
  /* Clip at the viewport. On body, overflow-x:hidden creates a scroll
     container that makes Safari scroll the sticky film out of view. */
  overflow-x:hidden;
}

body{
  margin:0;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:300;
  color:var(--paper);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Contain wide children without creating another scroll container. */
  overflow-x:clip;
}

::selection{ background:var(--em-400); color:var(--ink); }

/* On dark ground the fills invert and gradient text lifts to the light
   end of the mark. Custom properties inherit, so declaring them on the
   toned container is enough — nothing below needs to know. */
.ch[data-tone="dark"],
.nav:not(.is-light),
.rail:not(.is-light){
  --btn-bg: var(--grad-lite);
  --btn-fg: var(--ink);
  --fill: var(--grad-lite);
  --grad-txt: linear-gradient(118deg, #EC7440 0%, #F8C3A4 100%);
  --glow: rgba(224,86,32,.4);
  --glow2: rgba(236,116,64,.55);
}

img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }


/* ============================================================
   TYPE SCALE
   Poppins is geometric — it only reads premium set large, light
   and tracked tight. Everything below does that.
   ============================================================ */

/* `balance` only acts where the browser is choosing the breaks. The headings
   that set their own with <br> are unaffected, which is the point: it fixes
   the ones that rag badly on their own ("Built for days that / run on /
   appointments.") and leaves the hand-set ones exactly as written. */
.h-xl{
  margin:0;
  font-size:clamp(2.45rem, 6.1vw, 6rem);
  font-weight:500; line-height:.95; letter-spacing:-.038em;
  text-wrap:balance;
}
.h-lg{
  margin:0;
  font-size:clamp(1.95rem, 4.5vw, 4.15rem);
  font-weight:500; line-height:1.0; letter-spacing:-.032em;
  text-wrap:balance;
}
.h-md{
  margin:0;
  font-size:clamp(1.65rem, 3.3vw, 2.95rem);
  font-weight:500; line-height:1.06; letter-spacing:-.026em;
  text-wrap:balance;
}

/* Title card — chapter 02, where the light floods in. The only place in
   the piece Poppins is tracked WIDE rather than tight, because this is a
   logotype moment and not a headline; the h-* scale's -.03em would read as
   a wordmark squeeze. Light weight because the centre scrim behind it is
   already carrying legibility.

   The trailing-letter-space correction lives with the centred placement
   rather than here, because it is only wrong when the text is centred —
   see the data-pos="center" rule further down. */
.title-card{
  margin:0;
  font-size:clamp(2.3rem, 7.4vw, 6.4rem);
  font-weight:300; line-height:1; letter-spacing:.16em;
}

.body{
  margin:1.15em 0 0;
  max-width:44ch;
  font-size:clamp(.94rem, 1.12vw, 1.13rem);
  font-weight:300; line-height:1.66;
  opacity:.74;
}
.body em{ font-style:italic; opacity:1; }

/* These values are the lowest that clear 4.5:1 on the cream they sit on.
   Measure the composited pixel, not the declared colour, before lowering
   any of them. */
.micro{
  margin:1.5em 0 0;
  font-size:.79rem; font-weight:300; letter-spacing:.02em; opacity:.64;
}

/* eyebrow: gradient index + hairline + label */
.eyebrow{
  display:flex; align-items:center; gap:.85em;
  margin:0 0 1.5em;
  font-size:.71rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase;
}
.eyebrow b{
  font-weight:600; letter-spacing:.06em;
  background:var(--grad-txt);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow::after{
  content:''; flex:0 0 clamp(28px,4vw,64px); height:1px;
  background:currentColor; opacity:.32; order:1;
}
.eyebrow span{ order:2; opacity:.6; }


/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  --h:clamp(46px,5.4vh,56px);
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 clamp(20px,2.2vw,32px);
  border-radius:calc(var(--h)/2);
  font-size:clamp(.85rem,.98vw,.97rem); font-weight:500; letter-spacing:.005em;
  white-space:nowrap; cursor:pointer; border:1px solid transparent;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             background .4s var(--ease), border-color .4s var(--ease);
}
.btn--sm{ --h:40px; font-size:.82rem; padding:0 18px; }

.btn--solid{
  color:var(--btn-fg); background:var(--btn-bg);
  background-size:180% 180%; background-position:0% 50%;
  box-shadow:0 6px 22px -9px var(--glow),
             0 1px 0 0 rgba(255,255,255,.16) inset;
}
.btn--solid:hover{
  background-position:100% 50%;
  transform:translateY(-2px);
  box-shadow:0 14px 34px -12px var(--glow2),
             0 1px 0 0 rgba(255,255,255,.22) inset;
}

.btn--ghost{ color:inherit; border-color:currentColor; opacity:.72; }
.btn--ghost:hover{ opacity:1; transform:translateY(-2px); }

.actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.8em 0 0; }




/* ============================================================
   NAV
   ============================================================ */

.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.2vh,24px) var(--pad);
  color:var(--canvas);
  transition:color .6s var(--ease);
  pointer-events:none;
}
/* The nav's own ground. Over the film the footage under it can be anything
   — a cream void, wood, a white card — so legibility cannot depend on it.
   A band in the current tone, opaque at the top and gone by the nav's
   bottom edge, holds every link above 4.5:1 on any frame. */
.nav::before{
  content:''; position:absolute; inset:0 0 -34px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,7,5,.82) 0%, rgba(12,7,5,.55) 58%, rgba(12,7,5,0) 100%);
  transition:opacity .6s var(--ease);
}
.nav > *{ pointer-events:auto; }
.nav.is-light{ color:var(--ink); }
.nav.is-light::before{
  background:linear-gradient(180deg, rgba(228,219,210,.86) 0%, rgba(228,219,210,.6) 58%, rgba(228,219,210,0) 100%);
}
/* past the film the nav is solid glass (see LAUNCH ADDITIONS); the band retires */
.nav.is-solid::before, .nav.menu-open::before{ opacity:0; }

.nav__brand{
  display:flex; align-items:center; gap:.6em;
  font-size:1.02rem; font-weight:600; letter-spacing:-.022em;
}
.nav__brand img{ width:30px; height:30px; border-radius:8px; }

.nav__right{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.nav__link{
  font-size:.84rem; font-weight:400; opacity:.86;
  transition:opacity .3s var(--ease);
}
.nav__link:hover{ opacity:1; }

/* ── touch targets ─────────────────────────────────────
   Gated on pointer:coarse rather than a width, because 44px is a fact about
   fingers and not about viewports — a touch laptop needs it at 1440 too.
   Every rule here grows the hit area with min-height and padding only; no
   type size, colour or position moves, so none of the layouts above shift. */
@media (pointer:coarse){
  .nav__brand,
  .nav__link,
  .nav__menu,
  .btn--sm{ min-height:44px; }
  /* the radius is calc(--h / 2), so the height has to move with it or a
     44px button keeps a 40px pill's corners */
  .btn--sm{ --h:44px; }
  .nav__brand,
  .nav__link{ display:inline-flex; align-items:center; }
  .nav__link{ padding-inline:6px; margin-inline:-6px; }
  .nav__link--in{ min-width:44px; justify-content:center; padding-inline:10px; margin-inline:0; }
  .nav__menu{ width:44px; height:44px; }
  /* Short labels ("FAQ") are narrower than a fingertip even with the padding
     above, so the floor is set on both axes, not just height. */
  .nav__links .nav__link{ min-height:44px; min-width:44px; justify-content:center; margin-inline:0; }
  .chat__chips button{ min-height:44px; padding-block:.72em; }
  .plans__compare a{ display:inline-flex; align-items:center; min-height:44px; }
  .plan__btn,
  .cmp__btn{ min-height:44px; }
  /* Footer links are the densest cluster on the page, so they are the easiest
     to hit by mistake. The extra height goes inside the link rather than
     between rows, which keeps the columns reading as lists. */
  .foot__cols a,
  .foot__mail{ display:inline-flex; align-items:center; min-height:44px; }
  .skip-link{ min-height:44px; display:inline-flex; align-items:center; }
}
@media (max-width:1060px){
  .nav__link{ display:none; }
  .nav__link--in{ display:inline-flex; }   /* never hide the way in */
}


/* ============================================================
   DEFAULT: the stacked story
   ============================================================ */

.film{ position:relative; }
.film__sticky{ background:var(--ink); }
.film__video,
.film__grain,
.rail,
.hint{ display:none; }

.ch{
  position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(360px,56vh,560px);
  padding:clamp(64px,9vh,110px) var(--pad) clamp(40px,6vh,72px);
  color:var(--canvas);
  background:var(--ink) center/cover no-repeat;
  background-image:
    linear-gradient(0deg,rgba(12,7,5,.95),rgba(12,7,5,.4) 55%,rgba(12,7,5,.18)),
    var(--still);
}
/* The turn plays with no copy at all -- it exists so film.js can map
   5.40-6.30s onto it. Once the film is gone it is a screen of nothing
   between two chapters, so the stacked story leaves it out. It stays in
   the DOM either way. */
html:not(.film-mode) .ch:not(:has(.ln)){ display:none; }
.ch[data-tone="light"]{
  color:var(--ink);
  background-color:var(--canvas);
  background-image:
    linear-gradient(0deg,rgba(228,219,210,.96),rgba(228,219,210,.45) 55%,rgba(228,219,210,.18)),
    var(--still);
}
.ch__in{ width:100%; max-width:54ch; }
.ch::before{ display:none; }
.film__still{ width:100%; height:auto; }

.ch[data-ch="knot"]     { --still:url(assets/still-01.jpg); }
.ch[data-ch="through"]  { --still:url(assets/still-02.jpg); }
.ch[data-ch="line"]     { --still:url(assets/still-03.jpg); }
.ch[data-ch="turn"]     { --still:url(assets/still-04.jpg); }
.ch[data-ch="product"]  { --still:url(assets/still-05.jpg); }
.ch[data-ch="door"]     { --still:url(assets/still-06.jpg); }
.ch[data-ch="room"]     { --still:url(assets/still-07.jpg); }
.ch[data-ch="meanwhile"]{ --still:url(assets/still-08.jpg); }
.ch[data-ch="away"]     { --still:url(assets/still-09.jpg); }
.ch[data-ch="open"]     { --still:url(assets/still-10.jpg); }
/* The offer is the same doorway a beat later, so it keeps the same still.
   Every chapter needs one: an undefined --still invalidates the whole
   background-image declaration and takes the legibility gradient with it. */
.ch[data-ch="offer"]    { --still:url(assets/still-10.jpg); }

/* the plan grid needs the full width, not the 54ch reading measure */


/* ============================================================
   FILM MODE: the pinned, scroll-scrubbed film
   ============================================================ */

html.film-mode .film{ height:1000vh; }   /* JS writes the real value */

/* The picture fills the LARGE viewport: on a phone the browser's toolbar
   collapses as soon as the page scrolls, the screen grows by its height, and a
   stage sized to the small viewport leaves a black band under the film. The
   copy (.film__stage) and the scroll cue stay inside the small viewport, so
   nothing anyone has to read is ever under the toolbar when it is showing. */
html.film-mode .film__sticky{
  position:sticky; top:0;
  height:100vh; height:100lvh;
  overflow:hidden;
  transition:background .8s var(--ease);
}
html.film-mode .film__sticky[data-tone="light"]{ background:var(--canvas); }

html.film-mode .film__video{
  display:block;
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; transition:opacity .35s var(--ease);
}
/* the first frame is the poster's own picture, so this fade is invisible;
   it exists for the tier switch on rotate, where the poster swaps by media
   query and the canvas rejoins once the new orientation's frames arrive */
html.film-mode .film__video.is-painted{ opacity:1; }
.film__poster{ display:none; }
html.film-mode .film__poster,
html.film-mode .film__poster img{
  display:block; position:absolute; inset:0; width:100%; height:100%;
}
html.film-mode .film__poster img{ object-fit:cover; object-position:50% 50%; }

/* filmic grain — stops flat cream from banding on large screens */
html.film-mode .film__grain{
  display:block;
  position:absolute; inset:-50%;
  pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html.film-mode .film__stage{ position:absolute; inset:0 0 auto; height:100vh; height:100svh; }

/* The chapter box always fills the stage and is never transformed —
   that is what keeps its scrim stage-sized. Placement lives on
   .ch__in, so no transform ever sits above the scrim. */
html.film-mode .ch{
  position:absolute; inset:0;
  display:block; visibility:hidden;
  min-height:0; padding:0;
  background:none; pointer-events:none;
}

/* legibility scrim — opacity driven by the chapter envelope.
   Paints above the video (later in DOM) and below .ch__in (z-index). */
html.film-mode .ch::before{
  content:''; display:block;
  position:absolute; inset:0; z-index:0;
  /* the copy lives in the small viewport but the picture fills the large one,
     so the wash runs on down to the picture's bottom edge -- stopping with
     the stage drew a hard line across the film where the toolbar used to be */
  bottom:calc(100svh - 100lvh);
  opacity:var(--scrim,0); pointer-events:none;
}

html.film-mode .ch__in{
  position:absolute; z-index:1;
  width:auto; max-width:none;
  pointer-events:auto;
}

/* individual lines — JS writes --lo / --ly per line */
html.film-mode .ln{
  opacity:var(--lo,0);
  transform:translate3d(0,var(--ly,0),0);
}

/* prose over the film reads on the scrim, not through it */
html.film-mode .ch[data-tone="light"] .body{ opacity:.86; }
html.film-mode .ch[data-tone="dark"] .body{ opacity:.82; }

/* — right third, vertically centred: the dark knot — */
html.film-mode .ch[data-pos="right"] .ch__in{
  right:var(--pad); top:50%; transform:translateY(-50%);
  /* No ch cap here: ch is the body font's zero, which does not move, while
     .h-xl scales with the viewport -- so a ch-capped column gave the knot
     four lines at 1280 and six at 1920. The column grows with the type.
     The headline breaks itself with a <br>, and measured at 1280-1920 its
     shorter half needs 53vw to hold one line; below that both halves wrap
     and the beat runs to four. 54vw, capped so it stops short of half the
     screen on a very wide one, sets it in three. */
  width:min(54vw,860px);
}
/* The wash is strongest at the edge the text sits on. Light ground is the
   default here as it is everywhere else; the ink variant below belongs to the
   knot, which is the one dark-ground chapter on this side. Getting these two
   the wrong way round drops a dark gradient across a cream frame and takes
   the ink text down with it. */
html.film-mode .ch[data-pos="right"]::before{
  background:linear-gradient(270deg,
    rgba(228,219,210,.94) 0%, rgba(228,219,210,.68) 38%, rgba(228,219,210,0) 72%);
}
html.film-mode .ch[data-tone="dark"][data-pos="right"]::before{
  background:linear-gradient(270deg,
    rgba(12,7,5,.9) 0%, rgba(12,7,5,.6) 40%, rgba(12,7,5,0) 72%);
}

/* — left third: beside the doorway, beside the floating cards — */
html.film-mode .ch[data-pos="left"] .ch__in{
  left:var(--pad); top:50%; transform:translateY(-50%);
  width:min(38ch,36vw);
}
html.film-mode .ch[data-pos="left"]::before{
  background:linear-gradient(90deg,
    rgba(228,219,210,.94) 0%, rgba(228,219,210,.68) 38%, rgba(228,219,210,0) 68%);
}

/* — bottom left, over the floor of the room — */
html.film-mode .ch[data-pos="bottom-left"] .ch__in{
  left:var(--pad); bottom:clamp(38px,7vh,86px);
  width:min(42ch,40vw);
}
html.film-mode .ch[data-pos="bottom-left"]::before{
  background:linear-gradient(24deg,
    rgba(228,219,210,.95) 0%, rgba(228,219,210,.55) 42%, rgba(228,219,210,0) 72%);
}

/* — dead centre — */
html.film-mode .ch[data-pos="center"] .ch__in{
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(58ch,80vw); text-align:center;
}
html.film-mode .ch[data-pos="center"]::before{
  background:radial-gradient(58% 52% at 50% 50%,
    rgba(228,219,210,.88) 0%, rgba(228,219,210,0) 100%);
}
html.film-mode .ch[data-tone="dark"][data-pos="center"]::before{
  background:radial-gradient(62% 56% at 50% 50%,
    rgba(12,7,5,.8) 0%, rgba(12,7,5,0) 100%);
}
/* Tracking is added after the final glyph too, so a centred wide-tracked
   line sits visually left of true centre by half the tracking. Nudge it
   back. Only correct while the text is actually centred. */
html.film-mode .ch[data-pos="center"] .title-card{ text-indent:.16em; }

/* — sitting ON the drawn line: the line becomes the underline — */
html.film-mode .ch[data-pos="overline"] .ch__in{
  left:50%; bottom:52%; transform:translateX(-50%);
  width:min(62ch,86vw); text-align:center;
}
html.film-mode .ch[data-pos="overline"]::before{
  background:radial-gradient(70% 46% at 50% 62%,
    rgba(228,219,210,.9) 0%, rgba(228,219,210,0) 100%);
}

/* — the cream band above the phone, and above the open door — */
html.film-mode .ch[data-pos="top"] .ch__in{
  left:50%; top:var(--pad-t); transform:translateX(-50%);
  width:min(64ch,88vw); text-align:center;
}
html.film-mode .ch[data-pos="top"]::before{
  background:linear-gradient(180deg,
    rgba(228,219,210,.92) 0%, rgba(228,219,210,.6) 44%, rgba(228,219,210,0) 78%);
}

/* centred chapters centre their furniture too */
html.film-mode .ch[data-pos="overline"] .eyebrow,
html.film-mode .ch[data-pos="top"] .eyebrow,
html.film-mode .ch[data-pos="center"] .eyebrow,
html.film-mode .ch[data-pos="overline"] .chips,
html.film-mode .ch[data-pos="top"] .chips,
html.film-mode .ch[data-pos="top"] .actions,
html.film-mode .ch[data-pos="center"] .actions{ justify-content:center; }

html.film-mode .ch[data-pos="overline"] .body,
html.film-mode .ch[data-pos="top"] .body,
html.film-mode .ch[data-pos="center"] .body{ margin-inline:auto; text-align:center; }


/* ============================================================
   HERO
   Chapter 00. The film sits behind it on frame 0, held back by
   the veil, so arriving on the site is not the same as being
   dropped inside the knot — and anyone who came to log in has
   a title, a price link and a way in without scrolling at all.
   ============================================================ */

.hero__title{
  margin:0;
  font-size:clamp(2.5rem,6.4vw,6.2rem);
  font-weight:500; line-height:.94; letter-spacing:-.042em;
}
.hero__line{ display:block; }
.hero__sub{
  margin:1.35em 0 0; max-width:44ch;
  font-size:clamp(.95rem,1.18vw,1.18rem);
  font-weight:300; line-height:1.62; opacity:.72;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:.7rem;
  margin:2.2em 0 0;
}
.hero__micro{
  margin:1.35em 0 0;
  font-size:.78rem; font-weight:300; opacity:.62;
}
.hero__skip{
  display:inline-flex; align-items:center; min-height:44px; margin-top:.4em;
  font-size:.78rem; font-weight:400; opacity:.62;
  text-decoration:underline; text-underline-offset:4px; line-height:1;
  transition:opacity .3s var(--ease);
}
.hero__skip:hover{ opacity:1; }

/* the film rising out of black, then the copy arriving over it */
@keyframes heroRise{
  from{ opacity:0; transform:translateY(28px); }
  to  { opacity:1; transform:none; }
}
@keyframes filmIn{
  from{ transform:scale(1.07); }
  to  { transform:none; }
}

@keyframes heroFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes lineUp  { from{ transform:translateY(26px);  } to{ transform:none; } }
@keyframes lineDown{ from{ transform:translateY(-26px); } to{ transform:none; } }
html.film-mode.is-booted .hero > *{ animation:heroRise .95s var(--ease) both; }
/* the headline comes out of the light: one line rising from it, one sinking */
html.film-mode.is-booted .hero__title  { animation:heroFade .8s var(--ease) .25s both; }
html.film-mode.is-booted .hero__line--a{ animation:lineUp   1.25s var(--ease) .25s both; }
html.film-mode.is-booted .hero__line--b{ animation:lineDown 1.25s var(--ease) .25s both; }
html.film-mode.is-booted .hero__sub    { animation-delay:.58s; }
html.film-mode.is-booted .hero__cta    { animation-delay:.76s; }
html.film-mode.is-booted .hero__tail   { animation-delay:.90s; }

/* the plate exists so the push-in animates a stable element — the
   quality upgrade replaces the <video>, which would restart it */
html.film-mode .film__plate{ position:absolute; inset:0; }
html.film-mode.is-booted .film__plate{ animation:filmIn 2.6s var(--ease) both; }

/* JS drives this: max(entrance fade, hero hold-back) */
.film__veil{ display:none; }
html.film-mode .film__veil{
  display:block; position:absolute; inset:0;
  background:var(--ink); opacity:1; pointer-events:none;
}

/* ── the hero is built on the one light in the frame ───────
   Frame 0 is a dark knot with a single ember at its centre: 50% across in
   both cuts, 50% down the landscape frame and 41% down the portrait one.
   The headline parts around it -- one line above, one below -- so the first
   thing on the page is the thing the film is about to fly into. --ember-y is
   measured in the LARGE viewport, because that is what the picture fills. */
html.film-mode .ch[data-pos="hero"]{ --ember-y:50lvh; --part:clamp(40px,6.2vh,64px); }
html.film-mode .ch[data-pos="hero"] .ch__in{
  position:absolute; inset:0; width:auto; max-width:none; transform:none;
}
html.film-mode .hero{
  position:absolute; left:var(--pad); right:var(--pad);
  /* on a short screen the block slides up rather than run off the bottom */
  top:min(var(--ember-y), calc(100svh - var(--below, 330px)));
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
html.film-mode .hero__title{ position:relative; padding-top:var(--part); }
html.film-mode .hero__line--a{
  position:absolute; left:50%; bottom:calc(100% + var(--part));
  width:max-content; max-width:calc(100vw - 2 * var(--pad));
  margin-left:0; transform-origin:50% 100%;
  translate:-50% calc((1 - var(--lo, 1)) * -56px);     /* scrolling in parts the lines */
}
html.film-mode .hero__line--b{ translate:0 calc((1 - var(--lo, 1)) * 56px); }
html.film-mode .hero__sub{ margin-top:1.15em; max-width:64ch; }
html.film-mode .hero__cta{ justify-content:center; margin-top:1.5em; }
html.film-mode .hero__tail{ margin:.7em 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 1.2em; }
html.film-mode .hero__micro{ margin:0; }
.hero__tail{ margin:1.35em 0 0; }
.hero__tail .hero__micro{ display:inline; margin:0; }
/* a vignette, open where the light is: the knot stays present, and the copy
   sits on the dark rings either side of the ember */
html.film-mode .ch[data-pos="hero"]::before{
  background:radial-gradient(ellipse 78% 44% at 50% var(--ember-y),
    rgba(12,7,5,0) 0%, rgba(12,7,5,.08) 14%, rgba(12,7,5,.58) 52%, rgba(12,7,5,.86) 100%);
}


/* ── chapter furniture ──────────────────────────────────── */

/* six chips, echoing the 3×2 tile grid on the phone screen */
.chips{
  display:flex; flex-wrap:wrap;
  gap:.5rem; margin:1.9em 0 0; padding:0; list-style:none;
}
/* three by two, the tile grid on the phone's screen — the chips are its labels */
@media (min-aspect-ratio: 3/4){
  html.film-mode .chips{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:center; }
}
.chips li{
  padding:.5em 1.05em;
  font-size:clamp(.73rem,.86vw,.85rem); font-weight:400;
  border:1px solid currentColor; border-radius:999px;
  opacity:.78;
}
/* opaque enough to stay legible if a chip drifts over the dark
   phone body as the camera pushes in */
html.film-mode .chips li{
  border-color:rgba(12,7,5,.14); opacity:1;
  background:rgba(239,232,224,.86);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}

/* ── the plan cards ─────────────────────────────────────────
   Geometry lifted from the film's floating panels: portrait
   ~1:1.4, corner radius ~12% of width, hairline edge, a title
   line, four feature bars, a diagonal accent low and right.
   The film's panels glow white because they sit against wood;
   on flat cream that would vanish, so these are frosted with an
   ink hairline instead — same silhouette, legible background. */

/* ── plan cards ──────────────────────────────────────────
   Sized in vh, not just vw: this block has to fit four rich
   cards inside a pinned viewport, so height is the binding
   constraint, not width. */

.plans{
  display:grid; gap:clamp(10px,1.05vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin:clamp(14px,2vh,26px) 0 0; padding:0; list-style:none;
  text-align:left;
}

.plan{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(16px,2.6vh,30px) clamp(15px,1.15vw,24px);
  border:1px solid rgba(12,7,5,.13);
  border-radius:clamp(14px,1.5vw,22px);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 22px 50px -34px rgba(12,7,5,.55);
}

/* the chosen plan: gradient edge drawn with two backgrounds so the
   radius stays clean, plus a cool cast in the shadow */
.plan--pick{
  border:1.5px solid transparent;
  background:
    linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) padding-box,
    var(--grad) border-box;
  box-shadow:0 26px 60px -32px rgba(149,33,2,.32);
}

.plan__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6em; margin-bottom:clamp(10px,1.6vh,20px);
}
.plan__num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.1em; height:1.75em; padding:0 .5em;
  font-size:clamp(.58rem,.66vw,.68rem); font-weight:600; letter-spacing:.1em;
  color:#fff; background:var(--grad); border-radius:.6em;
}
.plan__tier{
  font-size:clamp(.52rem,.6vw,.62rem); font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
  padding:.45em .8em; border-radius:99px;
  border:1px solid rgba(12,7,5,.16); opacity:.62;
}
.plan--pick .plan__tier{
  color:#fff; background:var(--grad); border-color:transparent; opacity:1;
}

.plan__name{
  margin:0;
  font-size:clamp(1.5rem,3.9vh,2.3rem); font-weight:600;
  letter-spacing:-.035em; line-height:1;
}
.plan__for{
  margin:.6em 0 0; min-height:2.7em;
  font-size:clamp(.76rem,1.6vh,.94rem); font-weight:300; line-height:1.35; opacity:.6;
}

.plan__price{
  display:flex; align-items:baseline; gap:.1em;
  margin:clamp(10px,1.9vh,20px) 0 0;
}
.plan__price i{
  font-style:normal; font-size:clamp(1.1rem,2.4vh,1.55rem);
  font-weight:600; letter-spacing:-.02em;
}
.plan__price b{
  font-size:clamp(2.4rem,6.5vh,3.7rem); font-weight:600; letter-spacing:-.055em;
  line-height:.9;
}
.plan__price span{
  margin-left:.35em;
  font-size:clamp(.7rem,1.35vh,.85rem); font-weight:300; opacity:.62;
}

.plan__hook{
  position:relative; margin:.75em 0 0; padding-left:1em;
  min-height:2.6em;
  font-size:clamp(.72rem,1.4vh,.88rem); font-weight:300; line-height:1.38; opacity:.72;
}
.plan__hook::before{
  content:''; position:absolute; left:0; top:.5em;
  width:.42em; height:.42em; border-radius:50%; background:var(--grad);
}

.plan__inc{
  margin:clamp(12px,1.9vh,22px) 0 0;
  padding-top:clamp(12px,1.9vh,22px);
  border-top:1px solid rgba(12,7,5,.12);
  font-size:clamp(.56rem,.95vh,.68rem); font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; opacity:.62;
}

.plan__feat{
  margin:.85em 0 0; padding:0; list-style:none;
  display:grid; gap:clamp(7px,1.15vh,13px);
}
.plan__feat li{
  position:relative; padding-left:1.75em;
  font-size:clamp(.74rem,1.5vh,.92rem); font-weight:300; line-height:1.32;
}
/* gradient tile + white tick, same idiom as the brand mark */
.plan__feat li::before{
  content:''; position:absolute; left:0; top:.05em;
  width:1.15em; height:1.15em; border-radius:.34em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/64% no-repeat,
    var(--grad);
}
/* quieter by size, not by transparency — an italic underlined link at half
   opacity measured 3.0:1 */
.plan__more{ font-size:.92em; }
.plan__more::before{ display:none !important; }
.plan__more{ padding-left:0 !important; }

.plan__btn{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center; gap:.5em;
  height:clamp(42px,6vh,54px);
  margin-bottom:.7em;
  border:1px solid rgba(12,7,5,.18); border-radius:99px;
  font-size:clamp(.76rem,1.5vh,.92rem); font-weight:500;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .35s var(--ease), border-color .35s var(--ease);
}
.plan__btn::after{ content:'→'; transition:transform .35s var(--ease); }
.plan__btn:hover{ transform:translateY(-2px); border-color:rgba(12,7,5,.4); }
.plan__btn:hover::after{ transform:translateX(3px); }

.plan--pick .plan__btn{
  color:#fff; border-color:transparent;
  background:var(--grad); background-size:180% 180%; background-position:0% 50%;
  box-shadow:0 8px 24px -11px rgba(91,10,1,.42);
}
.plan--pick .plan__btn:hover{
  background-position:100% 50%;
  box-shadow:0 14px 32px -12px rgba(91,10,1,.52);
}

/* The reason to click, parked against the number it argues with. It sits
   directly under the price rather than under the button because the price
   is where the flinch happens; by the time the eye reaches the button,
   "Start free with Solo" has already said it again.

   Only Solo and Basic carry it. Four identical notes is exactly what made
   the old one invisible — the contrast between the plans that have the
   offer and the plans that don't is what the eye catches. */
.plan__free{
  display:flex; flex-direction:column; gap:.1em;
  margin:.7em 0 0; padding:.5em .7em;
  border-radius:.65em;
  background:linear-gradient(100deg, rgba(149,33,2,.13), rgba(149,33,2,.045));
  border:1px solid rgba(149,33,2,.2);
}
.plan__free b{
  font-size:clamp(.85rem,1.62vh,1rem); font-weight:600; letter-spacing:-.012em;
  line-height:1.15; color:var(--em-700);
}
.plan__free span{
  font-size:clamp(.6rem,1.05vh,.72rem); font-weight:300; line-height:1.3; opacity:.6;
}

/* The old value here was 9.28px at .42 opacity — under the contrast floor
   and the faintest thing on a card whose whole job is to be read. It now
   carries only what is genuinely small print, at a size that can be read. */
.plan__note{
  margin:0; text-align:center;
  font-size:clamp(.62rem,1vh,.74rem); font-weight:300; opacity:.62;
}

/* the tally that runs while you are in the room */
.stats{ display:grid; gap:.75rem; margin:1.9em 0 0; }
.stats div{ display:flex; align-items:baseline; gap:.7em; }
.stats dt{
  min-width:1.6em;
  font-size:clamp(1.5rem,2.4vw,2.2rem); font-weight:600; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  background:var(--grad-txt);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stats dd{
  margin:0; font-size:clamp(.8rem,.95vw,.93rem); font-weight:300; opacity:.74;
}


/* ── rail + scroll hint (film mode only) ────────────────── */

html.film-mode .rail{
  position:absolute; right:calc(var(--pad) * .55); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:16px;
  color:var(--canvas); transition:color .6s var(--ease); z-index:5;
}
html.film-mode .rail.is-light{ color:var(--ink); }
.rail__label{
  writing-mode:vertical-rl;
  font-size:.63rem; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase; opacity:.5;
}
.rail__track{
  width:1px; height:clamp(90px,16vh,150px);
  background:currentColor; opacity:.22; position:relative;
}
.rail__track i{
  position:absolute; inset:0 0 auto; width:1px; height:0%;
  background:var(--fill);
  box-shadow:0 0 8px 1px rgba(236,116,64,.55);
}

html.film-mode .hint{
  position:absolute; left:50%; bottom:clamp(22px,4vh,42px);
  bottom:calc(100lvh - 100svh + clamp(22px,4vh,42px));   /* ignored where lvh is unknown */
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--canvas); transition:opacity .5s var(--ease);
  z-index:5; pointer-events:none;
}
html.film-mode .hint.is-gone{ opacity:0; }
/* the cue is a line falling from the light; the word was one label too many */
html.film-mode .hint span{ display:none; }
.hint span{
  font-size:.62rem; font-weight:400;
  letter-spacing:.34em; text-transform:uppercase; opacity:.55;
}
.hint i{
  width:1px; height:38px; background:currentColor; opacity:.3;
  transform-origin:top; animation:drip 2.1s var(--ease) infinite;
}
@keyframes drip{
  0%  { transform:scaleY(0); opacity:0;  }
  40% { transform:scaleY(1); opacity:.4; }
  100%{ transform:scaleY(1); opacity:0;  }
}

/* ── touch performance ──────────────────────────────────
   Every scroll frame repaints the canvas; a blend layer or a backdrop
   blur composited over it costs a phone GPU every frame. The grain
   exists to stop banding on large screens, and the chips are legible
   on a solid fill. */
html.film-mode .film__sticky{ touch-action:pan-y; }
@media (pointer:coarse){
  html.film-mode .film__grain{ display:none; }
  html.film-mode .chips li{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(239,232,224,.94);
  }
}


/* ============================================================
   EPILOGUE
   ============================================================ */

.epilogue{
  position:relative; z-index:2;
  background:var(--canvas); color:var(--ink);
  padding:clamp(80px,14vh,170px) var(--pad) 0;
}
.epilogue__inner{ max-width:var(--col); margin-inline:auto; }
.eyebrow--ink{ color:inherit; }

.steps{
  display:grid; gap:clamp(28px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin:clamp(48px,8vh,88px) 0 0; padding:0; list-style:none;
}
.steps li{ border-top:1px solid rgba(12,7,5,.15); padding-top:22px; }
.steps__n{
  display:block; margin-bottom:1.1em;
  font-size:.74rem; font-weight:600; letter-spacing:.2em;
  background:var(--grad-txt);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.steps h3{
  margin:0 0 .6em;
  font-size:clamp(1.1rem,1.45vw,1.32rem); font-weight:500; letter-spacing:-.02em;
}
.steps p{
  margin:0; font-size:clamp(.88rem,1.02vw,1rem);
  font-weight:300; line-height:1.65; opacity:.68;
}

.closing{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1.1rem; padding:clamp(84px,13vh,140px) var(--pad);
}
.closing img{ width:52px; height:52px; border-radius:14px; }
.closing .actions{ justify-content:center; }

.foot{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
  max-width:1180px; margin-inline:auto;
  padding:26px 0 30px; border-top:1px solid rgba(12,7,5,.14);
  font-size:.78rem; font-weight:300; opacity:.6;
}
.foot nav{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.foot a{ transition:opacity .3s var(--ease); }
.foot a:hover{ opacity:.55; }


/* ============================================================
   PORTRAIT — the film fills the phone, edge to edge.
   A 16:9 frame cannot cover a 9:19.5 screen without losing most
   of its width, so the crop rides the chapter's focal point
   (CHAPTERS[].focal in film.js, measured per shot) and the copy
   sits over the film on its scrim rather than beneath a band.
   ============================================================ */

@media (max-aspect-ratio: 3/4){
  html.film-mode .film__video{
    object-fit:cover;
    object-position:50% 50%;
    background:inherit;
  }
  /* every placement collapses to one block beneath the film band */
  html.film-mode .ch[data-pos] .ch__in{
    left:var(--pad); right:var(--pad); top:auto;
    bottom:clamp(74px,13vh,120px);
    width:auto; transform:none; text-align:left;
  }
  /* The film now runs behind the copy instead of stopping above it, so
     the scrim only has to carry legibility — anything heavier would
     paint out the half of the shot it is sitting on. */
  html.film-mode .ch::before{
    background:linear-gradient(0deg,
      rgba(228,219,210,.97) 0%, rgba(228,219,210,.82) 24%,
      rgba(228,219,210,.34) 46%, rgba(228,219,210,0) 68%) !important;
  }
  html.film-mode .ch[data-tone="dark"]::before{
    background:linear-gradient(0deg,
      rgba(12,7,5,.97) 0%, rgba(12,7,5,.82) 24%,
      rgba(12,7,5,.34) 46%, rgba(12,7,5,0) 68%) !important;
  }
  html.film-mode .ch .eyebrow,
  html.film-mode .ch .chips,
  html.film-mode .ch .actions{ justify-content:flex-start; }
  html.film-mode .ch .body{ margin-inline:0; text-align:left; }
  html.film-mode .rail{ display:none; }
  html:not(.film-mode) .ch{ min-height:clamp(300px,40svh,420px); }

  /* The placement rules above ("overline", "top", "center") centre their
     furniture and win on specificity; on an upright screen every block is one
     left-aligned column, so these carry the attribute selector too. */
  html.film-mode .ch[data-pos] .body,
  html.film-mode .ch[data-pos] .micro,
  html.film-mode .ch[data-pos] .title-card{ margin-inline:0; text-align:left; }
  html.film-mode .ch[data-pos] .eyebrow,
  html.film-mode .ch[data-pos] .chips,
  html.film-mode .ch[data-pos] .actions{ justify-content:flex-start; }

  /* The hero sits in the lower band like every chapter, but on a tall phone
     that leaves a quarter of the screen empty above it. Rise with the height:
     the 635 px composition at every height. */
  html.film-mode .ch[data-pos="hero"]{ --ember-y:41lvh; --below:420px; --part:clamp(34px,5.4vh,52px); }
  /* the hero is not a lower-band block: it is laid out on the light, so it
     keeps the whole stage (this has to follow the collapse rule above) */
  html.film-mode .ch[data-pos="hero"] .ch__in{
    left:0; right:0; top:0; bottom:0; text-align:center;
  }
  /* Below the light a phone has ~400px before the scroll cue, toolbar showing.
     The sub sets a size down, the offer and the way past the film share one
     quiet paragraph, and the cue drops its label -- the line alone says it. */
  html.film-mode .hero__sub{ margin-top:.8em; font-size:.9rem; line-height:1.55; max-width:none; }
  html.film-mode .hero__cta{ margin-top:1.25em; }
  html.film-mode .hero__micro{ display:inline; margin:0; }
  html.film-mode .hero__skip{ display:inline; min-height:0; margin:0 0 0 .5em; padding-block:14px; line-height:inherit;
 }
  html.film-mode .hero__tail{ display:block; margin:.9em 0 0; line-height:1.7; }
  html.film-mode .hint i{ height:26px; }
}
/* the shortest phones: a size down all round, so the block still clears the
   light instead of sliding up over it */
@media (max-aspect-ratio: 3/4) and (max-height:700px){
  html.film-mode .ch[data-pos="hero"]{ --below:350px; --part:30px; }
  html.film-mode .hero__title{ font-size:2.05rem; }
  html.film-mode .hero__sub{ font-size:.84rem; margin-top:.6em; }
  html.film-mode .hero__cta{ margin-top:1em; }
  html.film-mode .hero__cta .btn{ --h:44px; }

  .h-xl{ font-size:clamp(2.1rem,8.6vw,3.2rem); }
  .h-lg{ font-size:clamp(1.85rem,7.4vw,2.7rem); }
  /* every placement went left-aligned above, so the centring nudge is
     now the thing that is wrong */
  html.film-mode .ch[data-pos="center"] .title-card{ text-indent:0; }
  .title-card{ font-size:clamp(1.9rem,8vw,2.9rem); letter-spacing:.13em; }
  .stats{ gap:.4rem; }
  .stats dt{ font-size:1.55rem; }

}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hint i{ animation:none; }
  .btn{ transition:none; }
}


/* ============================================================
   LAUNCH ADDITIONS
   Nav states, the sections below the film, the plan comparison
   and the AI demo. Appended rather than woven in, so the film
   rules above stay exactly as tuned.
   ============================================================ */

.sr-only{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; left:16px; top:12px; z-index:200;
  padding:.7em 1.15em; border-radius:99px;
  background:var(--canvas); color:var(--ink);
  font-size:.85rem; font-weight:500;
  transform:translateY(-180%); transition:transform .25s var(--ease);
}
.skip-link:focus{ transform:none; }

:focus-visible{ outline:2px solid var(--em-400); outline-offset:3px; }

/* ── hero: two lines on desktop ─────────────────────────────
   The block used to be 58ch wide, which is ~520px at body size, so the
   display headline broke into five lines. Width and size now scale
   together: text runs ~4.4vw × 13.75 ≈ 60vw, inside a 64vw block. */
.hero__title{ font-size:clamp(2.5rem,4.4vw,5.4rem); }
@media (min-width:900px){
  html:not(.film-mode) .ch[data-ch="hero"] .ch__in{ max-width:min(64vw,1180px); }
}
/* a laptop-height landscape screen: the sub runs on one line and the scroll
   cue shortens, so the block clears it */
@media (min-aspect-ratio:3/4) and (max-height:800px){
  html.film-mode .ch[data-pos="hero"]{ --part:clamp(30px,5vh,44px); }
  html.film-mode .hero__sub{ max-width:96ch; font-size:.92rem; }
  html.film-mode .hero__cta{ margin-top:1.2em; }
  html.film-mode .hint i{ height:16px; }
}

/* ── nav ───────────────────────────────────────────────── */
.nav{
  transition:color .6s var(--ease), background-color .45s var(--ease),
             box-shadow .45s var(--ease);
}
.nav__links{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); }
.nav__menu{ display:none; }

/* The stacked story alternates ink and cream chapters and nothing flips
   the nav for it, so give it a dark ground of its own there. */
html:not(.film-mode) .nav{
  background:rgba(12,7,5,.72);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  pointer-events:auto;
}

/* Past the film — and whenever the phone menu is open — the nav sits on
   the dark sections, so it becomes dark glass with ember fills. */
html .nav.is-solid,
html .nav.menu-open{
  color:var(--paper);
  background:rgba(12,7,5,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(243,234,228,.08);
  pointer-events:auto;
  --btn-bg:var(--grad-lite); --btn-fg:var(--ink); --fill:var(--grad-lite);
  --grad-txt:linear-gradient(118deg,#EC7440 0%,#F8C3A4 100%);
  --glow:rgba(224,86,32,.4); --glow2:rgba(236,116,64,.55);
}

@media (max-width:1060px){
  .nav__right{ gap:12px; }
  .nav__menu{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 13px;
    border:1px solid currentColor; border-radius:50%;
    background:transparent; color:inherit; cursor:pointer;
  }
  .nav__menu i{
    display:block; height:1.5px; border-radius:2px; background:currentColor;
    transition:transform .3s var(--ease);
  }
  .nav__menu[aria-expanded="true"] i:first-child{ transform:translateY(3.25px) rotate(45deg); }
  .nav__menu[aria-expanded="true"] i:last-child { transform:translateY(-3.25px) rotate(-45deg); }

  .nav__links{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    padding:4px var(--pad) 16px;
    color:var(--paper);
    background:rgba(12,7,5,.96);
    border-bottom:1px solid rgba(243,234,228,.08);
    box-shadow:0 22px 34px -26px rgba(0,0,0,.7);
  }
  .nav__links.is-open{ display:flex; }
  .nav__links .nav__link{
    display:flex; align-items:center; min-height:50px;
    font-size:1rem; opacity:.86;
    border-top:1px solid rgba(243,234,228,.08);
  }
  .nav__links .nav__link:first-child{ border-top:0; }
}
@media (max-width:420px){
  .nav__right{ gap:10px; }
  .nav .btn--sm{ padding:0 14px; }
  .nav__brand{ gap:.5em; }
}

.plan__more a{ text-decoration:underline; text-underline-offset:3px; opacity:1; }
.plans__compare{ display:flex; justify-content:center; }
.plans__compare a{
  display:inline-flex; align-items:center; min-height:44px; padding-bottom:2px;
  border-bottom:1px solid currentColor;
  font-size:.86rem; font-weight:500; opacity:.8;
  transition:opacity .3s var(--ease);
}
.plans__compare a:hover{ opacity:1; }


/* ============================================================
   BELOW THE FILM
   ============================================================ */

.sec{
  position:relative; z-index:2;
  padding:clamp(84px,13vh,140px) var(--pad);
  color:var(--paper); background:var(--ink);
  --btn-bg:var(--grad-lite); --btn-fg:var(--ink); --fill:var(--grad-lite);
  --grad-txt:linear-gradient(118deg,#EC7440 0%,#F8C3A4 100%);
  --glow:rgba(224,86,32,.4); --glow2:rgba(236,116,64,.55);
}
.sec:not(.sec--ink) + .sec:not(.sec--ink){ border-top:1px solid rgba(243,234,228,.07); }
.sec__in{ max-width:var(--col); margin-inline:auto; }
.sec__head{ max-width:62ch; margin-bottom:clamp(44px,7vh,84px); }
.sec__head .body{ margin-top:1.1em; }
.sec__head--center{ margin-inline:auto; text-align:center; }
.sec__head--center .eyebrow{ justify-content:center; }
.sec__head--center .body{ margin-inline:auto; }

/* ember-lit band: the raised dark surface with the mark's light behind it */
.sec--ink{
  background:
    radial-gradient(56% 64% at 80% 42%, rgba(149,33,2,.26), rgba(149,33,2,0) 72%),
    var(--ink-2);
}

/* ── the light section: the film's ground, continued ──
   Pricing stands on the same cream the film ends on, so the eye does not
   register a scene change between "You'll know by then." and the price. */
.sec--light{
  color:var(--ink); background:var(--canvas);
  --btn-bg:var(--grad); --btn-fg:#FFF6F0; --fill:var(--grad);
  --grad-txt:linear-gradient(118deg,#7D1502 0%,#A82E0C 100%);
  --glow:rgba(149,33,2,.45); --glow2:rgba(224,86,32,.5);
}
.sec--light + .sec{ border-top:0; }

/* anchors clear the fixed nav */
/* 44px navigation controls, responsive vertical padding, and an 8px gap. */
html{ scroll-padding-top:calc(52px + clamp(28px,4.4vh,48px)); }

/* ── pricing in flow ────────────────────────────────────
   The card component keeps its geometry; only the sizes that were tied to
   a pinned viewport's height become fixed. Four across in the page column,
   two across on tablets, one on phones. */
#pricing .plans{ margin-top:0; gap:clamp(12px,1.4vw,20px); grid-template-columns:repeat(4,minmax(0,1fr)); }
#pricing .plan{ padding:clamp(18px,2vw,28px) clamp(16px,1.4vw,24px); }
#pricing .plan__name{ font-size:clamp(1.55rem,1.9vw,2.15rem); }
#pricing .plan__for{ font-size:clamp(.8rem,.95vw,.94rem); }
#pricing .plan__price{ margin-top:clamp(12px,1.3vw,20px); }
#pricing .plan__price i{ font-size:clamp(1.15rem,1.4vw,1.55rem); }
#pricing .plan__price b{ font-size:clamp(2.6rem,3.6vw,3.7rem); }
#pricing .plan__price span{ font-size:clamp(.74rem,.86vw,.86rem); }
#pricing .plan__hook{ font-size:clamp(.76rem,.9vw,.88rem); }
#pricing .plan__inc{ margin-top:clamp(14px,1.4vw,22px); padding-top:clamp(14px,1.4vw,22px); font-size:clamp(.6rem,.68vw,.68rem); }
#pricing .plan__feat{ gap:clamp(8px,.9vw,13px); margin-bottom:clamp(14px,1.6vw,22px); }
#pricing .plan__feat li{ font-size:clamp(.8rem,.94vw,.92rem); }
#pricing .plan__btn{ height:clamp(46px,3.6vw,54px); font-size:clamp(.8rem,.94vw,.92rem); }
#pricing .plan__free b{ font-size:clamp(.88rem,1vw,1rem); }
#pricing .plan__free span{ font-size:clamp(.64rem,.72vw,.72rem); }
#pricing .plan__note{ font-size:clamp(.66rem,.74vw,.74rem); }
#pricing .plan__detail{ display:contents; }
#pricing .plan__toggle{ display:none; }
#pricing .plans__go{ display:none; }
#pricing .assure{ margin-top:clamp(26px,3.5vw,40px); }
#pricing .plans__compare{ margin-top:clamp(14px,1.6vw,20px); }

@media (max-width:1099px){
  #pricing .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Phones: a price list you can scan, and a card you can open. Only the
   answer to "what do I get" is folded; the price, the offer and the one-line
   reason never are. Without JS every card is open. */
@media (max-width:639px){
  #pricing .plans{ grid-template-columns:1fr; gap:.6rem; }
  #pricing .plan{ padding:.95em 1em 1em; border-radius:16px; }
  #pricing .plan__for{ min-height:0; }
  #pricing .plan__hook{ min-height:0; }
  html.has-js #pricing .plan__detail{ display:none; }
  html.has-js #pricing .plan.is-open .plan__detail{ display:block; }
  html.has-js #pricing .plan__toggle{
    display:inline-flex; align-items:center; gap:.45em;
    min-height:44px; margin-top:.35em; padding:0 .15em;
    border:0; background:none; color:inherit; font:inherit; font-size:.86rem; font-weight:500;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  #pricing .plan__toggle::after{
    content:''; width:.5em; height:.5em;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:translateY(-.15em) rotate(45deg); transition:transform .3s var(--ease);
  }
  #pricing .plan.is-open .plan__toggle::after{ transform:translateY(.1em) rotate(225deg); }
  #pricing .plan__inc{ margin-top:.9em; padding-top:.9em; }
  #pricing .plan__btn{ margin-top:1em; height:48px; }
  #pricing .plans__go{ display:flex; margin:1rem 0 0; }
  #pricing .plans__cta{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.05em; width:100%; min-height:52px; padding:.55em 1.1em;
    border-radius:99px; color:#F2EBE2; background:var(--grad);
    box-shadow:0 12px 28px -13px rgba(91,10,1,.62);
    font-size:.95rem; font-weight:600; letter-spacing:-.01em;
  }
  #pricing .plans__cta span{ font-size:.64rem; font-weight:300; opacity:.86; letter-spacing:0; }
  #pricing .assure{ flex-direction:column; align-items:flex-start; gap:8px; }
}

.can-reveal .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.can-reveal .reveal.is-in{ opacity:1; transform:none; }

/* ── 02 the workspace ──────────────────────────────────── */
.shots{
  position:relative; max-width:1080px; margin:0 auto;
  /* a lane on the right for the phone, so it overlaps the frame's margin and
     never the dashboard's own right column */
  padding-right:clamp(80px,12%,150px);
}
.shots__frame{
  overflow:hidden;
  border:1px solid rgba(236,116,64,.2);
  border-radius:clamp(12px,1.4vw,18px);
  background:#140B08;
  box-shadow:0 44px 100px -44px rgba(0,0,0,.9), 0 0 120px -30px rgba(224,86,32,.28);
}
.shots__chrome{
  display:flex; align-items:center; gap:6px;
  height:34px; padding:0 14px;
  background:#1A0E0A; border-bottom:1px solid rgba(243,234,228,.08);
}
.shots__chrome i{ width:9px; height:9px; border-radius:50%; background:rgba(243,234,228,.18); }
.shots__chrome span{
  margin-inline:auto; padding:3px 14px; border-radius:99px;
  background:rgba(243,234,228,.06);
  font-size:.7rem; letter-spacing:.02em; opacity:.7;
  transform:translateX(-18px);
}
.shots img{ display:block; width:100%; height:auto; }
.shots__phone{
  position:absolute; right:0; bottom:8%;
  width:clamp(120px,19%,210px);
  overflow:hidden;
  border:5px solid #1A0E0A; border-radius:clamp(20px,2.6vw,32px);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.9);
}
.shots figcaption{ position:static; margin-top:16px; font-size:.78rem; opacity:.55; }
@media (max-width:700px){
  .shots{ padding-right:0; }
  .shots__frame{ display:none; }
  .shots__phone{
    position:relative; right:auto; bottom:auto;
    /* against the screen, not against .shots' own box, which is narrower */
    width:min(300px, 74vw); margin:0 auto;
  }
  .shots__phone img{ border-radius:22px; }
  .shots figcaption{ text-align:center; }
}
/* A ruled statement wearing the AI list's tick. `.ticks li::before` is
   placed with `top:.2em`, which resolves against the padding box: on `.ticks`,
   which has no block padding, that is the first line — on `.notes`, which is
   ruled and padded, it left the mark level with the hairline above the words.
   Both lists now centre the mark on the first line box, which is also the line
   the mark belongs to when a statement wraps: half the leading that the line
   box adds around a 1.15em mark is (1.4em - 1.15em) / 2. */
.notes.ticks li{ padding-left:1.9em; }
.notes.ticks li::before{ top:calc(var(--note-pad) + .125em); }

/* three plain statements; the screenshots carry the detail */
.notes{
  display:grid; gap:0 clamp(26px,3vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin:clamp(40px,6vh,72px) 0 0; padding:0; list-style:none;
}
.notes li{
  --note-pad:16px;
  padding-block:var(--note-pad); border-top:1px solid rgba(228,219,210,.16);
  font-size:clamp(1rem,1.2vw,1.12rem); font-weight:400; line-height:1.4; letter-spacing:-.01em;
  opacity:.84;
}

/* one screen: copy on the left, the screenshots as large as the height
   allows on the right. --room comes from .sec--fit (see "one screen"). The
   shots are the frame (width × .625 + 36px of chrome and border) plus a 6%
   ledge for the phone and caption, so width ≤ (room − 36px) ÷ .685. */
/* between a phone and a wide screen the capture takes the whole width — the
   only size at which a dashboard reads as software rather than texture */
@media (min-width:701px) and (max-width:1100px){
  .ws .sec__head{ margin-bottom:clamp(24px,4vw,40px); }
  /* A 12% lane costs the frame more than it is worth at these widths: the
     capture has to stay wide enough to read as software. */
  .ws .shots{ max-width:none; padding-right:clamp(36px,6%,64px); }
  .ws .shots__phone{ width:clamp(104px,14%,150px); }
  .ws .notes{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(24px,4vw,40px); }
}
@media (min-width:1101px){
  .ws{
    display:grid;
    grid-template-columns:minmax(0,.65fr) minmax(0,1.45fr);
    grid-template-areas:"head shots" "notes shots";
    column-gap:clamp(36px,5vw,84px); align-items:center;
  }
  .ws .sec__head{ grid-area:head; align-self:end; margin:0; text-align:left; container-type:inline-size; }
  .ws .sec__head .body{ margin-inline:0; }
  /* "Every booking." is ~8em wide, so 12cqi keeps each line on one line
     in the copy column; the room term keeps it off short screens */
  .ws .sec__head .h-lg{ font-size:clamp(1.8rem, min(calc(var(--room) * .078), 12cqi), clamp(1.95rem, 4.5vw, 4.15rem)); }
  /* stacked statements, ruled above and below like a short list */
  .ws .notes{
    grid-area:notes; align-self:start; grid-template-columns:1fr;
    margin-top:clamp(22px, calc(var(--room) * .05), 48px);
  }
  .ws .notes li{ --note-pad:clamp(11px, calc(var(--room) * .022), 16px); }
  .ws .notes li:last-child{ border-bottom:1px solid rgba(228,219,210,.16); }
  .ws .shots{
    grid-area:shots; justify-self:center;
    width:100%; max-width:calc((var(--room) - 36px) / .685);
    padding-bottom:6%;
  }
}

/* ── 03 Bookessa AI ────────────────────────────────────── */
.ai{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  gap:clamp(44px,6vw,96px); align-items:center;
}
@media (max-width:819px){ .ai{ grid-template-columns:1fr; } .ai__copy{ max-width:60ch; } }

.ticks{ display:grid; gap:.85em; margin:1.9em 0 0; padding:0; list-style:none; }
.ticks li{ position:relative; padding-left:1.9em; font-size:clamp(.94rem,1.05vw,1.04rem); }
.ticks li::before{
  content:''; position:absolute; left:0; top:.2em;
  width:1.15em; height:1.15em; border-radius:.34em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/64% no-repeat,
    var(--grad);
}
.credits{
  max-width:46ch; margin:1.9em 0 0; padding-top:1.2em;
  border-top:1px solid rgba(243,234,228,.14);
  font-size:.86rem; line-height:1.6; opacity:.72;
}

.ai__demo{ margin:0; }
.ai__demo figcaption{ margin-top:14px; font-size:.76rem; text-align:center; opacity:.55; }

.chat{
  max-width:440px; margin-inline:auto; overflow:hidden;
  border:1px solid rgba(243,234,228,.1); border-radius:24px;
  background:rgba(26,14,10,.72);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 34px 80px -44px rgba(12,7,5,.6);
}
.chat__head{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid rgba(243,234,228,.08);
}
.chat__head img{ width:34px; height:34px; border-radius:10px; }
.chat__head p{ display:flex; flex-direction:column; margin:0; line-height:1.3; }
.chat__head strong{ font-size:.95rem; font-weight:500; }
.chat__head span{ display:flex; align-items:center; gap:6px; font-size:.74rem; opacity:.62; }
.chat__head span::before{ content:''; width:7px; height:7px; border-radius:50%; background:#6E8B5E; }

.chat__body{
  display:flex; flex-direction:column; gap:10px;
  min-height:0; padding:18px;
}
.msg{ max-width:88%; padding:11px 14px; border-radius:16px; font-size:.88rem; line-height:1.5; }
.msg--bot{
  align-self:flex-start; display:flex; flex-direction:column; gap:4px;
  background:rgba(243,234,228,.06); border:1px solid rgba(243,234,228,.06);
  border-bottom-left-radius:6px;
}
.msg--bot strong{ font-weight:500; }
.msg--bot small{ font-size:.78rem; opacity:.62; }
.msg--you{
  align-self:flex-end; color:#F2EBE2; background:var(--grad);
  border-bottom-right-radius:6px;
}
.msg--typing{
  align-self:flex-start; display:flex; gap:4px; padding:14px;
  background:rgba(243,234,228,.06);
}
.msg--typing i{
  width:6px; height:6px; border-radius:50%; background:var(--em-400);
  animation:typing 1s var(--ease) infinite;
}
.msg--typing i:nth-child(2){ animation-delay:.15s; }
.msg--typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing{
  0%,100%{ opacity:.3; transform:none; }
  50%    { opacity:1;  transform:translateY(-2px); }
}
.msg__slot{
  display:flex; align-items:center; gap:10px;
  margin-top:8px; padding:10px 10px 10px 14px;
  border:1px solid rgba(243,234,228,.14); border-radius:14px;
  background:rgba(243,234,228,.05); color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.msg__slot:hover{ border-color:rgba(236,116,64,.55); transform:translateY(-1px); }
.msg__slot small{ font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:.55; }
.msg__slot strong{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; }
.msg__slot b{
  margin-left:auto; padding:.55em .95em; border-radius:99px;
  color:#F2EBE2; background:var(--grad);
  font-size:.74rem; font-weight:500; white-space:nowrap;
}

.chat__chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }
.chat__chips button{
  padding:.55em 1em;
  border:1px solid rgba(243,234,228,.16); border-radius:99px;
  background:transparent; color:inherit; font:inherit; font-size:.78rem; cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.chat__chips button:hover{ background:rgba(243,234,228,.07); border-color:rgba(236,116,64,.55); }
.chat__form{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid rgba(243,234,228,.08); }
.chat__form input{
  flex:1; min-width:0; height:44px; padding:0 16px;
  border:1px solid rgba(243,234,228,.14); border-radius:99px;
  background:rgba(243,234,228,.05); color:var(--paper);
  font:inherit; font-size:16px;   /* 16px keeps iOS from zooming on focus */
}
.chat__form input::placeholder{ color:rgba(243,234,228,.45); }
.chat__form input:focus{ outline:none; border-color:var(--em-400); box-shadow:0 0 0 3px rgba(224,86,32,.22); }
.chat__form button{
  display:grid; place-items:center; flex:0 0 44px; height:44px;
  border:0; border-radius:50%; background:var(--grad); cursor:pointer;
}
.chat__form svg{ width:18px; height:18px; fill:#F2EBE2; }

/* ── 04 compare plans ──────────────────────────────────── */
.cmp{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid rgba(243,234,228,.1); border-radius:clamp(16px,1.6vw,22px);
  background:rgba(243,234,228,.025);
}
.cmp table{
  width:100%; min-width:860px; table-layout:fixed;
  border-collapse:separate; border-spacing:0;
  font-size:clamp(.82rem,.95vw,.92rem);
}
.cmp col:not(:first-child){ width:17.5%; }
.cmp thead th[data-plan]{ min-width:150px; }
.cmp col.is-pick{ background:rgba(224,86,32,.07); }
.cmp th,
.cmp td{
  padding:14px clamp(12px,1.4vw,20px);
  text-align:center; vertical-align:middle;
  border-bottom:1px solid rgba(243,234,228,.07);
}
.cmp tbody th{ text-align:left; font-weight:400; }
.cmp thead th,
.cmp thead td{ padding-top:26px; padding-bottom:20px; vertical-align:bottom; }
.cmp thead th.is-pick{ box-shadow:inset 0 3px 0 var(--em-400); }
/* the feature column stays put while the plans scroll on a phone.
   Without the shadow on its trailing edge the plan columns appear to be cut
   off mid-word rather than passing behind it, which reads as a rendering
   fault. The shadow only appears once there is something to pass under. */
.cmp tbody th,
.cmp .cmp__corner{
  position:sticky; left:0; z-index:1;
  width:30%; min-width:190px;
  background:#110A07;
}
.cmp.is-scrolled tbody th,
.cmp.is-scrolled .cmp__corner{
  box-shadow:14px 0 16px -14px rgba(0,0,0,.95);
  clip-path:inset(0 -30px 0 0);
}
.cmp thead th.is-pick{ box-shadow:inset 0 3px 0 var(--em-400); }
.cmp__tier{
  display:block; font-size:.6rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; opacity:.55;
}
.cmp__name{ display:block; margin-top:.45em; font-size:1.15rem; font-weight:600; letter-spacing:-.03em; }
/* "€149 / month" must break as a unit or not at all — never "€149 /" with
   "month" orphaned onto the next line. */
.cmp__price{ display:inline-block; margin-top:.35em; font-size:1.7rem; font-weight:600; letter-spacing:-.045em; white-space:nowrap; }
.cmp__per{ margin-left:.25em; font-size:.74rem; opacity:.5; white-space:nowrap; }
.yes{
  display:inline-block; width:1.15em; height:1.15em; border-radius:.34em; vertical-align:middle;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.5-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/64% no-repeat,
    var(--grad);
}
.no{ display:inline-block; width:.9em; height:1px; vertical-align:middle; background:currentColor; opacity:.3; }
.cmp tfoot td{ padding:18px 10px 22px; border-bottom:0; }
.cmp__btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 1.1em;
  border:1px solid rgba(243,234,228,.22); border-radius:99px;
  font-size:.8rem; font-weight:500; white-space:nowrap;
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.cmp__btn:hover{ transform:translateY(-2px); border-color:rgba(236,116,64,.6); }
.cmp__btn--pick{
  color:var(--ink); border-color:transparent;
  background:var(--grad-lite);
  box-shadow:0 10px 30px -12px rgba(224,86,32,.55);
}

.assure{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 30px;
  margin:clamp(28px,4vh,42px) 0 0; padding:0; list-style:none;
}
.assure li{ display:flex; align-items:center; gap:.6em; font-size:.9rem; }
.assure li::before{ content:''; width:.42em; height:.42em; border-radius:50%; background:var(--grad); }
.assure strong{ font-weight:500; }
.fineprint{
  max-width:66ch; margin:clamp(24px,3vh,34px) auto 0;
  font-size:clamp(.85rem,.95vw,.9rem); line-height:1.7; text-align:left; opacity:.72;
}
.fineprint p{ margin:0; }
.fineprint p + p{ margin-top:.8em; }


/* ── the plan picker (phones) ─────────────────────────── */
.pick{ display:none; }
@media (max-width:599px){
  html.has-pick .cmp,
  html.has-pick .cmp__hint{ display:none; }
  html.has-pick .pick{ display:block; }
  /* Hiding the break outright joined the two sentences ("pricing.Every"),
     because display:none leaves no whitespace behind. Collapse it to a
     space instead, so the headline reflows as prose on a narrow screen. */
  #pricing-title br{ display:inline; font-size:0; line-height:0; }
  #pricing-title br::after{ content:' '; font-size:1rem; }
}
.pick__tabs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  padding:4px; border:1px solid rgba(243,234,228,.12); border-radius:99px;
  background:rgba(243,234,228,.04);
}
.pick__tab{
  min-height:44px; padding:0 .2em; border:0; border-radius:99px;
  background:transparent; color:inherit; font:inherit; font-size:.86rem; font-weight:500;
  opacity:.72; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background .25s var(--ease), opacity .25s var(--ease);
}
.pick__tab[aria-selected="true"]{ background:var(--grad-lite); color:var(--ink); opacity:1; }
.pick__panel{
  margin-top:14px; border:1px solid rgba(243,234,228,.1); border-radius:18px;
  background:rgba(243,234,228,.025); overflow:hidden;
}
.pick__head{
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"tier cost" "name cost";
  align-items:end; gap:2px 16px; padding:18px 18px 16px;
  border-bottom:1px solid rgba(243,234,228,.08);
}
.pick__tier{ grid-area:tier; font-size:.6rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; opacity:.55; }
.pick__name{ grid-area:name; font-size:1.3rem; font-weight:600; letter-spacing:-.03em; }
.pick__cost{ grid-area:cost; display:flex; align-items:baseline; gap:.25em; }
.pick__price{ font-size:1.7rem; font-weight:600; letter-spacing:-.045em; }
.pick__per{ font-size:.74rem; opacity:.6; }
.pick__rows{ margin:0; padding:0; list-style:none; }
.pick__rows li{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:52px; padding:10px 18px; border-bottom:1px solid rgba(243,234,228,.07);
  font-size:.9rem;
}
.pick__label{ font-weight:400; }
.pick__value{ flex:0 0 auto; text-align:right; opacity:.86; }
.pick__btn{
  display:flex; align-items:center; justify-content:center;
  min-height:48px; margin:16px 18px 18px; border-radius:99px;
  border:1px solid rgba(243,234,228,.22); font-size:.9rem; font-weight:500;
}
.pick__btn--pick{ color:var(--ink); border-color:transparent; background:var(--grad-lite); box-shadow:0 10px 30px -12px rgba(224,86,32,.55); }


/* ── 06 from the founder ───────────────────────────────── */
.founder{
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(149,33,2,.3), rgba(149,33,2,0) 66%),
    var(--ink-2);
}
.founder__in{ max-width:900px; }
.founder__lead{
  margin:0;
  font-size:clamp(1.55rem,2.9vw,2.5rem); font-weight:300;
  line-height:1.26; letter-spacing:-.022em;
}
.founder__body{
  max-width:58ch; margin:1.3em 0 0;
  font-size:clamp(1.02rem,1.3vw,1.2rem); line-height:1.7; opacity:.76;
}
.founder__sign{ display:flex; align-items:center; gap:16px; margin:2.2em 0 0; }
.founder__sign::before{ content:''; width:44px; height:1px; background:currentColor; opacity:.4; }
.founder__sign span{ font-weight:500; line-height:1.3; }
.founder__sign small{ display:block; font-size:.78rem; font-weight:300; opacity:.58; }

/* ── 07 FAQ ────────────────────────────────────────────── */
/* The section no longer splits into a narrow heading column and a wide
   accordion — with the answers visible there is nothing to hide, so the
   heading sits above and the answers take the full measure. */
.faq{ display:block; }
/* The measure belongs to the lede, not the whole header — constraining the
   header squeezed the headline past its own <br> and broke it over four
   lines. */
.faq .sec__head{ margin-bottom:clamp(38px,5vw,64px); }
.faq .sec__head .body{ max-width:38ch; }

/* Widths follow the answers rather than a card grid: the free month is both
   the longest answer and the one people decide on, so it takes the full
   measure and the remaining four pair off. */
.faq__list{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(32px,5vw,80px); margin:0;
}
/* The rule is a pseudo-element rather than a border so it can draw itself.
   A line arriving left to right is the site's own motif — "one line, your
   entire day", the floor line the film closes on, the afternoon timeline in
   section 05 — so the section assembles the way the rest of the page argues
   rather than fading up like everything else on the web. */
.faq__item{
  position:relative;
  padding:clamp(26px,2.6vw,34px) 0;
}
.faq__item::before{
  content:''; position:absolute; inset:0 0 auto; height:1px;
  background:rgba(243,234,228,.12);
}
.faq__item--wide{ grid-column:1 / -1; }

/* One orchestrated reveal, not five. The list keeps the .reveal class so the
   existing observer still fires it, but gives up its own fade — otherwise the
   parent would mask the stagger happening inside it. */
.can-reveal .faq__list{ opacity:1; transform:none; }

.can-reveal .faq__item::before{
  transform:scaleX(0); transform-origin:left;
  transition:transform .85s var(--ease) calc(var(--i,0) * 110ms);
}
.can-reveal .faq__q,
.can-reveal .faq__a,
.can-reveal .faq__d{
  opacity:0; transform:translateY(10px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
/* The line leads, then the label, the statement and the detail follow it in.
   Same idea as the film's LINE_STAGGER, which offsets each line of copy by
   its index rather than moving a block. */
.can-reveal .faq__q{ transition-delay:calc(var(--i,0) * 110ms + 150ms); }
.can-reveal .faq__a{ transition-delay:calc(var(--i,0) * 110ms + 220ms); }
.can-reveal .faq__d{ transition-delay:calc(var(--i,0) * 110ms + 310ms); }

.can-reveal .faq__list.is-in .faq__item::before{ transform:scaleX(1); }
.can-reveal .faq__list.is-in .faq__q,
.can-reveal .faq__list.is-in .faq__a,
.can-reveal .faq__list.is-in .faq__d{ opacity:1; transform:none; }

/* Stagger by row, not by item: the two side-by-side answers are read as a
   pair, so they arrive as one. */
.faq__item:nth-child(1){ --i:0; }
.faq__item:nth-child(2), .faq__item:nth-child(3){ --i:1; }
.faq__item:nth-child(4), .faq__item:nth-child(5){ --i:2; }

/* The question is the label, not the headline — small and quiet, so the eye
   lands on the answer. Not uppercased: at this size the site's tracked caps
   would compete with the eyebrow directly above the section. */
.faq__q{
  margin:0 0 .55em;
  font-size:.8rem; font-weight:500; letter-spacing:.01em;
  color:var(--em-300); opacity:.9;
}
.faq__answer{ margin:0; }

/* The one loud element in the section. Reading just these five lines down the
   page should answer the section on its own. */
.faq__a{
  margin:0 0 .5em; max-width:24ch;
  font-size:clamp(1.25rem,1.9vw,1.72rem);
  font-weight:500; line-height:1.15; letter-spacing:-.028em;
  color:var(--paper); text-wrap:balance;
}
.faq__item--wide .faq__a{
  max-width:18ch;
  font-size:clamp(1.5rem,2.6vw,2.4rem);
}
/* .78, not the .72 this section used to run at — the detail is the part that
   actually answers the question, so it has to be comfortably readable. */
.faq__d{
  margin:0; max-width:56ch;
  font-size:clamp(.92rem,1.05vw,1.02rem); line-height:1.7;
  color:var(--paper); opacity:.78;
}
.faq__item--wide .faq__d{ max-width:68ch; }
/* the lead answer spans the row as statement | detail, so the row is read
   left to right like the pairs below it */
@media (min-width:821px){
  .faq__item--wide .faq__answer{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
    gap:0 clamp(32px,5vw,80px); align-items:start;
  }
  .faq__item--wide .faq__a{ max-width:none; margin-bottom:0; }
  .faq__item--wide .faq__d{ max-width:none; padding-top:.35em; }
}
@media (max-width:820px){
  .faq__item--wide .faq__a{ font-size:clamp(1.25rem,1.9vw,1.72rem); max-width:24ch; }
}

@media (max-width:820px){
  .faq__list{ grid-template-columns:1fr; }
  .faq .sec__head{ max-width:none; }
  /* Single column, so the pairs are no longer read side by side and the
     stagger goes back to one step per item. */
  .faq__item:nth-child(2){ --i:1; }
  .faq__item:nth-child(3){ --i:2; }
  .faq__item:nth-child(4){ --i:3; }
  .faq__item:nth-child(5){ --i:4; }
}

/* ── closing + footer ──────────────────────────────────── */
.closing{
  position:relative; z-index:2;
  color:var(--paper);
  background:
    radial-gradient(46% 58% at 50% 34%, rgba(224,86,32,.2), rgba(224,86,32,0) 70%),
    var(--ink);
  border-top:1px solid rgba(243,234,228,.07);
  --btn-bg:var(--grad-lite); --btn-fg:var(--ink); --fill:var(--grad-lite);
  --grad-txt:linear-gradient(118deg,#EC7440 0%,#F8C3A4 100%);
  --glow:rgba(224,86,32,.4); --glow2:rgba(236,116,64,.55);
}
.closing img{ filter:drop-shadow(0 14px 34px rgba(224,86,32,.45)); }

.foot{
  position:relative; z-index:2;
  display:block; max-width:none; margin:0;
  padding:clamp(48px,7vh,76px) var(--pad) 28px;
  color:var(--paper); background:var(--ink);
  border-top:1px solid rgba(243,234,228,.08);
  font-size:.86rem; opacity:1;
}
.foot__main{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:40px; max-width:var(--col); margin:0 auto;
}
.foot__brand p{ max-width:32ch; margin:.9em 0 .7em; line-height:1.6; opacity:.62; }
.foot__mail{ opacity:.82; border-bottom:1px solid rgba(243,234,228,.25); }
.foot .foot__cols{ display:grid; grid-template-columns:repeat(3,max-content); justify-content:space-between; gap:24px; }
.foot__cols a{ white-space:nowrap; }
.foot__cols div{ display:flex; flex-direction:column; gap:.75em; }
.foot__cols strong{
  margin-bottom:.3em;
  font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; opacity:.5;
}
.foot__cols a{ opacity:.78; }
.foot a:hover{ opacity:1; }
.foot__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 2rem;
  max-width:var(--col); margin:clamp(36px,6vh,58px) auto 0; padding-top:20px;
  border-top:1px solid rgba(243,234,228,.08);
  font-size:.76rem; opacity:.55;
}
@media (max-width:760px){ .foot__main{ grid-template-columns:1fr; } }
@media (max-width:480px){ .foot .foot__cols{ grid-template-columns:1fr; gap:18px; } }

@media (prefers-reduced-motion: reduce){
  .msg--typing i{ animation:none; }
  /* The FAQ's +/− marker went with the accordion; its answers are on the page
     now and nothing there transitions under reduced motion. */
  .nav__menu i{ transition:none; }
}

/* ── fixes from the screenshot pass ────────────────────── */
/* display headings need more room than the 62ch reading measure */
.sec__head{ max-width:min(100%,900px); }
.sec__head .body{ max-width:48ch; }
/* the longest Solo list was touching its button at 900px tall */
.plan__feat{ margin-bottom:clamp(12px,1.8vh,20px); }
/* The hint appears only when the table really overflows (site.js measures it),
   and an instruction that has been followed is just clutter. */
.cmp__hint{
  display:none; margin:0 0 10px; font-size:.78rem; text-align:right; opacity:.62;
  transition:opacity .3s var(--ease);
}
.cmp__hint.is-shown{ display:block; }
.cmp__hint.is-gone{ opacity:0; }
@media (max-width:600px){
  /* Nine sections at 110px top and bottom is 2,000px of a phone's scroll
     spent on air. A tighter rhythm keeps the document under 20,000px without
     taking anything off the film. */
  .sec,
  .closing{ padding-block:clamp(56px,8.5vh,96px); }
  .cmp table{ min-width:620px; }
  .cmp tbody th,
  .cmp .cmp__corner{ width:auto; min-width:128px; }
  .cmp th,
  .cmp td{ padding:12px 10px; }
  .cmp__btn{ padding:0 .9em; font-size:.74rem; }
}


/* ============================================================
   WHO IT'S FOR — one day on a dial
   Six appointments from six kinds of business on a single 08:00–
   20:00 face. Arc length is the appointment's duration. One value,
   the hour the hand points at, drives the hand, its bead and the
   elapsed line on the rim. The hand sweeps the day once as the
   section arrives and each appointment inks itself in as the bead
   reaches it (the one moment of motion here); after that, choosing
   a business turns the hand there.
   ============================================================ */

.day{
  --glide:cubic-bezier(.16,1,.3,1);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas:"head stage" "list stage";
  column-gap:clamp(40px,6vw,110px);
  align-items:start;
}
.day__head{ grid-area:head; }
/* the dial with the note under it as its caption */
.day__stage{
  grid-area:stage; align-self:center;
  display:flex; flex-direction:column; align-items:center;
}
.day__head .body{ margin-top:1.1em; }
.day__list{
  grid-area:list;
  margin:clamp(30px,4.5vh,48px) 0 0; padding:0; list-style:none;
  border-top:1px solid rgba(243,234,228,.14);
}
.day__item{
  position:relative;
  display:grid; grid-template-columns:3.7em minmax(0,1fr); column-gap:.9em;
  width:100%; padding:16px 4px;
  border:0; border-bottom:1px solid rgba(243,234,228,.14);
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* the chosen row's top rule turns to ember, drawn the way the hand turns */
.day__item::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--em-400);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease);
}
.day__item.is-on::before{
  transform:none; transform-origin:left center;
  transition:transform .9s var(--glide) .08s;
}
.day__item time{
  padding-top:.32em;
  font-size:.84rem; font-weight:500; line-height:1.35; font-variant-numeric:tabular-nums;
  opacity:.62; transition:opacity .5s var(--ease);
}
.day__name{
  font-size:clamp(1.04rem,1.3vw,1.2rem); font-weight:500; line-height:1.35; letter-spacing:-.018em;
  transition:opacity .5s var(--ease);
}
/* a 1fr → 0fr row, so the description closes to its real height */
.day__desc{
  grid-column:2; display:grid; grid-template-rows:1fr;
  font-size:.9rem; line-height:1.58;
  transition:grid-template-rows .65s var(--glide), opacity .35s var(--ease);
}
.day__desc > span{ min-height:0; overflow:hidden; padding-top:.3em; opacity:.72; }
.day__item.is-on time{ opacity:1; }
/* with the script running, only the chosen business is open */
.day.is-live .day__item:not(.is-on) time,
.day.is-live .day__item:not(.is-on) .day__name{ opacity:.64; }
.day.is-live .day__item:not(.is-on):hover time,
.day.is-live .day__item:not(.is-on):hover .day__name{ opacity:1; }
.day.is-live .day__item:not(.is-on) .day__desc{ grid-template-rows:0fr; opacity:0; }
.day.is-live .day__item.is-on .day__desc{ transition-duration:.65s, .5s; transition-delay:0s, .15s; }
.day__note{
  grid-area:note; max-width:40ch; margin:clamp(14px,3vh,28px) auto 0;
  font-size:.95rem; line-height:1.6; text-align:center; text-wrap:balance; opacity:.7;
}

.dial{
  grid-area:dial; align-self:center; justify-self:center;
  position:relative; width:100%; max-width:600px; margin:0;
  aspect-ratio:1;
}
/* ember light pooled behind the face, the way the mark glows */
.dial::before{
  content:''; position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle, rgba(224,86,32,.16) 0%, rgba(149,33,2,.08) 46%, rgba(149,33,2,0) 70%);
  pointer-events:none;
}
.dial svg{ position:relative; display:block; width:100%; height:100%; overflow:visible; }
.dial__ring{ fill:none; stroke:rgba(243,234,228,.16); stroke-width:1; }
/* the part of the day already behind the hand, traced on the rim */
.dial__elapsed{ fill:none; stroke:var(--em-300); stroke-width:1.6; stroke-linecap:round; opacity:.9; }
.dial__ticks line{ stroke:var(--paper); stroke-width:1; opacity:.25; }
.dial__ticks line.is-hour{ opacity:.6; }
.dial__labels text{
  fill:var(--paper); opacity:.5;
  font-family:inherit; font-size:12.5px; font-weight:500;
  text-anchor:middle; dominant-baseline:central; font-variant-numeric:tabular-nums;
}
.dial__track{ fill:none; stroke:rgba(243,234,228,.05); stroke-width:28; }
/* booked sits as a narrower band inside the track; chosen fills it */
.dial__arc{
  fill:none; stroke:#6B1305; stroke-width:20; stroke-linecap:round;
  transition:stroke .6s var(--ease), stroke-width .6s var(--glide);
}
.dial__arc.is-on{ stroke:#EC6A30; stroke-width:28; }
.day.is-live .dial__arc{ cursor:pointer; }
.day.is-live .dial__arc:not(.is-on):hover{ stroke:#A82E0C; }
.dial__hand line{ stroke:var(--paper); stroke-width:1.4; stroke-linecap:round; }
/* the bead rides the track, so it sits on the appointment it points at */
.dial__bead{ fill:var(--ink); stroke:var(--em-300); stroke-width:2.4; }
.dial__face{
  position:absolute; inset:24%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none;
}
.dial__range{
  display:flex; justify-content:center;
  font-size:clamp(1.35rem,2.8vw,2.6rem); font-weight:200;
  line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums;
}
/* a digit and the one replacing it share a cell while they trade places */
.dial__range .digit{ display:grid; }
.dial__range .digit > span{ grid-area:1 / 1; }
.dial__what{ margin-top:.7em; font-size:clamp(.8rem,1vw,.96rem); font-weight:500; text-wrap:balance; }
.dial__who{ margin-top:.25em; font-size:clamp(.72rem,.85vw,.8rem); opacity:.58; }

@media (max-width:900px){
  .day{ grid-template-columns:1fr; grid-template-areas:"head" "dial" "list" "note"; }
  /* stacked, the dial and its note take their own places in the grid */
  .day__stage{ display:contents; }
  .dial{ max-width:min(320px, 78vw); margin:clamp(20px,4vw,32px) auto 0; }
  .day__note{ margin-inline:0; text-align:left; }
}


/* ============================================================
   THREE THINGS, ONE AFTERNOON — one line into a doorway
   The times are set huge and light; a single line runs under them
   and ends in the doorway the film closes on. It draws once.
   ============================================================ */

.noon__title{ max-width:16ch; }
.noon{
  --t:clamp(3rem,6.4vw,6.6rem);
  position:relative;
  margin-top:clamp(52px,9vh,100px);
  padding-right:clamp(84px,8vw,112px);
}
.noon__list{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(22px,3vw,48px);
  margin:0; padding:0; list-style:none;
}
.noon__step time{
  display:block;
  font-size:var(--t); font-weight:200; line-height:1;
  letter-spacing:-.045em; font-variant-numeric:tabular-nums;
}
.noon__node{ position:relative; display:block; height:34px; }
.noon__node::before{
  content:''; position:absolute; left:2px; top:50%;
  width:11px; height:11px; margin-top:-5.5px; border-radius:50%;
  background:var(--em-400);
}
.noon__step h3{ margin:.45em 0 .55em; font-size:clamp(1.1rem,1.45vw,1.32rem); font-weight:500; letter-spacing:-.02em; }
.noon__step p{ max-width:34ch; margin:0; font-size:clamp(.9rem,1vw,.98rem); line-height:1.66; opacity:.68; }
.noon__rule{
  position:absolute; left:0; right:0; top:calc(var(--t) + 17px);
  height:1px; background:rgba(236,116,64,.6);
  transform-origin:left center;
}
.noon__door{
  position:absolute; right:0; top:calc(var(--t) + 17px - 118px);
  width:70px; height:120px; overflow:visible;
}
.noon__door path{
  fill:none; stroke:var(--em-300); stroke-width:1.3; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
/* the drawn-out starting state exists only once site.js can finish it */
.noon.can-draw .noon__rule{ transform:scaleX(0); transition:transform 1.8s var(--ease); }
.noon.can-draw .noon__node::before{
  transform:scale(0); transition:transform .5s var(--ease);
  transition-delay:calc(.35s + var(--i) * .5s);
}
.noon.can-draw .noon__door path{
  stroke-dasharray:1; stroke-dashoffset:1;
  transition:stroke-dashoffset 1.2s var(--ease) 1.5s;
}
.noon.can-draw.is-drawn .noon__rule{ transform:none; }
.noon.can-draw.is-drawn .noon__node::before{ transform:none; }
.noon.can-draw.is-drawn .noon__door path{ stroke-dashoffset:0; }

@media (max-width:760px){
  .noon{ --t:3.1rem; padding-right:0; padding-left:30px; }
  .noon__list{ grid-template-columns:1fr; row-gap:38px; }
  .noon__step{ position:relative; }
  .noon__node{ position:absolute; left:-30px; top:calc(var(--t) / 2 - 17px); width:30px; }
  .noon__node::before{ left:-.5px; }
  /* the line runs down the left and becomes the doorway's jamb */
  .noon__rule{ left:5px; right:auto; top:12px; bottom:2px; width:1px; height:auto; transform-origin:center top; }
  .noon.can-draw .noon__rule{ transform:scaleY(0); }
  .noon__door{ position:relative; right:auto; top:auto; display:block; margin:30px 0 0 -39px; }
}

@media (prefers-reduced-motion: reduce){
  .day__item::before, .day__item.is-on::before, .day__item time, .day__name,
  .day__desc, .dial__arc{ transition:none; }
}

/* ── one screen ─────────────────────────────────────────
   Wider than a phone, the section is exactly one screen: it fills the
   viewport under the fixed nav, and type, spacing and the dial are sized
   from --room (the height left once the nav and two gaps are taken off)
   as well as from the width. Each size is clamp(floor, share of --room,
   what the width alone would give), so a tall screen changes nothing and
   a short one shrinks the section instead of making it scroll. */
@media (min-width:901px), (min-width:600px) and (min-height:640px){
  .sec--fit{
    --gap:clamp(16px, 4svh, 48px);
    --nav-h:calc(2 * clamp(14px, 2.2vh, 24px) + 40px);   /* .nav padding + .btn--sm */
    --room:calc(100svh - var(--nav-h) - 2 * var(--gap));
    display:grid; align-content:center;
    min-height:100vh; min-height:100svh;
    padding-block:calc(var(--nav-h) + var(--gap)) var(--gap);
  }
  .sec--fit .day__head .h-lg{ font-size:clamp(1.8rem, calc(var(--room) * .078), clamp(1.95rem, 4.5vw, 4.15rem)); }
  .sec--fit .day__head .body{
    margin-top:.9em; line-height:1.6;
    font-size:clamp(13.5px, calc(var(--room) * .026), clamp(.94rem, 1.12vw, 1.13rem));
  }
  .sec--fit .day__list{ margin-top:clamp(14px, calc(var(--room) * .04), 48px); }
  .sec--fit .day__item{ padding-block:clamp(7px, calc(var(--room) * .016), 16px); }
  .sec--fit .day__item time{ font-size:clamp(12px, calc(var(--room) * .02), .84rem); }
  .sec--fit .day__name{ font-size:clamp(14.5px, calc(var(--room) * .029), clamp(1.04rem, 1.3vw, 1.2rem)); }
  .sec--fit .day__desc{ font-size:clamp(12.5px, calc(var(--room) * .022), .9rem); }
  .sec--fit .day__note{
    margin-top:clamp(10px, calc(var(--room) * .028), 28px);
    font-size:clamp(12.5px, calc(var(--room) * .022), .95rem);
  }
  /* the note sits under the dial, so the two together have to fit --room */
  .sec--fit .dial{ max-width:min(600px, 42vw, calc(var(--room) - 4.8rem)); }
  .sec--fit .dial__labels text{ font-size:14px; }
}
/* a tablet held upright: the heading runs across the top, and the list
   and the dial share the screen below it */
@media (min-width:600px) and (max-width:900px) and (min-height:640px){
  .day{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"head head" "list stage";
    column-gap:clamp(24px,4vw,44px);
  }
  .day__stage{ display:flex; }
  .sec--fit .dial{ max-width:min(100%, calc(var(--room) * .6)); margin:0; }
  .sec--fit .dial__labels text{ font-size:21px; }
  .day__note{ margin-inline:auto; text-align:center; }
}
/* on a phone the dial is ~350px wide, so its 12.5-unit labels would print
   at ~7px — set them in bigger units there */
@media (max-width:900px){
  .dial__labels text{ font-size:21px; }
  .dial__ticks line:not(.is-hour){ opacity:.16; }
}

/* ── the returning customer's chip ─────────────────────
   Replaces "Log in / Start free" when the app has left its hint cookie.
   Quieter than the Start free button on purpose: someone who already has an
   account does not need to be sold, they need a door. The mark carries the
   ember fill so the chip still reads as the brand at a glance. */
.nav__account{
  display:inline-flex; align-items:center; gap:9px;
  min-height:40px; padding:5px 16px 5px 5px;
  border-radius:999px;
  color:var(--btn-fg, #FFF6F0); background:var(--btn-bg, var(--grad));
  box-shadow:0 6px 22px -9px var(--glow, rgba(149,33,2,.45));
  font-size:.84rem; font-weight:500;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.nav__account:hover{ transform:translateY(-1px); }
/* the owner's initial, cut out of the button's own ground */
.nav__account-mark{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(12,7,5,.22); color:inherit;
  font-size:.78rem; font-weight:600; line-height:1;
}
/* a phone has room for the noun, not the verb */
@media (max-width:1060px){
  .nav__account-verb{ display:none; }
  .nav__account-name{ text-transform:capitalize; }
  .nav__account{ padding-right:13px; }
}
@media (pointer:coarse){ .nav__account{ min-height:44px; } }

.nav__right, .nav__links{ white-space:nowrap; }
html:not([lang="en"]) .hero__title{ text-wrap:balance; }
html:not([lang="en"]) .ch[data-ch="open"] .h-xl{ font-size:clamp(2rem,4.5vw,5rem); }
@media (max-width:680px){
  .nav__right{ gap:8px; }
  .nav__right > .btn--sm{ display:none; }
  .language__options{ right:-45px; }
  html:not([lang="en"]) .ch[data-ch="open"] .h-xl{ font-size:clamp(1.8rem,7vw,2.7rem); }
}
@media (max-width:360px){
  .nav__brand{ font-size:.88rem; gap:5px; }
  .nav__brand img{ width:25px; height:25px; }
  .nav__right{ gap:4px; }
  .language summary{ min-width:58px; padding-inline:5px; }
  .nav__link--in{ font-size:.78rem; padding-inline:4px; }
}
@media (max-width:680px){
  .is-known .nav__account-name{ display:none; }
  .is-known .nav__account{ min-width:44px; padding:5px; justify-content:center; }
}

.nav__links .nav__link--start{ display:none; }
@media (max-width:680px){
  .nav__links .nav__link--start{ display:flex; font-weight:600; }
}