/* ==========================================================================
   APLAI landing page — "Paper & Ink"
   --------------------------------------------------------------------------
   Structure
     1. Tokens
     2. Base & utilities
     3. Buttons, badges, tags, paper
     4. Nav
     5. Hero (+ flap component, peek art, chat)
     6. Demo film
     7. Steps 01–03
     8. Review (04)
     9. Final CTA
    10. Footer
   10b. Phone pass (< 620px only; desktop never sees it)
    11. Motion (all hidden-start states live here, gated by
        prefers-reduced-motion AND the .js class, so no-JS and reduced-motion
        visitors always get the finished, static page)
   ========================================================================== */

/* 1. Tokens --------------------------------------------------------------- */
:root {
  --paper: #FAF9F5;          /* page; illustrations were prepared against this */
  --paper-2: #F2F0E9;        /* stage panels */
  --card: #FFFFFF;           /* sheets and cards */
  --ink: #111111;
  --ink-2: #3A3A3A;
  --grey: #6B6B6B;           /* sublines, 5.1:1 on --paper */
  --grey-2: #8C8A84;         /* fine print, large/secondary only */
  --line: #E6E3DA;
  --line-strong: #D3CFC4;
  --skel: #ECE9E1;

  --font: "Inter var", Inter, -apple-system, BlinkMacSystemFont, "SF Pro Display",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --stroke: 2.5px;           /* the ink outline weight used everywhere */
  --radius: 18px;
  --radius-lg: 28px;

  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(80px, 8.4vw, 120px);   /* polish: 152 read as gaps at 1440 */

  /* Paper settles; ink draws. */
  --ease-paper: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-ink: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-flap: cubic-bezier(0.3, 1.35, 0.55, 1);
}

/* 2. Base & utilities ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Faint paper grain. Static, decorative, never intercepts input. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.035;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }

h1, h2 {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}
h2 { font-size: clamp(2.1rem, 4.8vw, 3.75rem); }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.container {
  width: min(1160px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  left: 16px; top: 12px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-paper);
}
.skip-link:focus { transform: none; }

.section { padding-block: var(--section); }

.section__head { display: grid; gap: 18px; }
.section__head--center { justify-items: center; text-align: center; }
.section__head--center h2 { max-width: 16ch; }
.section__head--center .section__sub { text-wrap: balance; }

.section__sub {
  color: var(--grey);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: pretty;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.eyebrow__n {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  padding: 0 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.caption {
  color: var(--grey);
  font-size: 15px;
  text-align: center;
}
.caption strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.caption--left { text-align: left; }

/* 3. Buttons, badges, tags, paper ---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s var(--ease-paper), box-shadow 0.25s var(--ease-paper), background-color 0.2s;
}
.btn--ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.2);
}
.btn--ink:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(17, 17, 17, 0.55);
}
.btn--ink:active { transform: translateY(0); box-shadow: none; transition-duration: 0.08s; }
.btn:focus-visible { outline-offset: 4px; }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 30px; font-size: 17px; }

.link-quiet {
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.link-quiet:hover { border-color: var(--ink); }
.link-quiet span { display: inline-block; transition: transform 0.3s var(--ease-paper); }
.link-quiet:hover span { transform: translateY(2px); }
.link-quiet:focus-visible { outline-offset: 2px; border-radius: 6px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.badge img { width: 14px; }
.badge--quiet { background: transparent; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  background: var(--card);
}
.tag--ink { border-color: var(--ink); color: var(--ink); }

/* A sheet of paper: white, soft contact shadow, hairline edge. */
.paper {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(17, 17, 17, 0.04),
    0 22px 40px -30px rgba(17, 17, 17, 0.35);
}
/* The ink variant: the thick, even outline of the mascot drawings. */
.paper--ink { border: var(--stroke) solid var(--ink); }

.skel {
  display: block;
  width: var(--w, 80%);
  height: 7px;
  margin-top: 9px;
  border-radius: 4px;
  background: var(--skel);
}

.tick {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 4. Nav ------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 249, 245, 0.86);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.is-scrolled { border-color: var(--line); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand__mark { width: 24px; transform-origin: 50% 90%; transition: transform 0.4s var(--ease-flap); }
.brand:hover .brand__mark { transform: rotate(-8deg); }
.brand:focus-visible { outline-offset: 6px; border-radius: 8px; }
.brand__word {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.2em;
  margin-right: -0.2em; /* optical: trailing tracking */
}

@media (max-width: 380px) {
  .nav .btn--sm { padding: 0 14px; font-size: 13px; }
  .brand__word { letter-spacing: 0.14em; }
}

/* 5. Hero ------------------------------------------------------------------ */
.hero {
  padding-top: clamp(56px, 10vw, 128px);
  padding-bottom: clamp(72px, 10vw, 128px);
  overflow-x: clip;
}
.hero__copy {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 24px;
}
.hero__title {
  font-size: clamp(2.7rem, 8.4vw, 6.25rem);
  line-height: 1.04;
}
.hero__line { display: block; }
.hero__sub {
  color: var(--grey);
  line-height: 1.45;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  max-width: 34ch;
  text-wrap: balance;
}
.keep { display: inline-block; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: 6px;
}
.hero__note { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 550; color: var(--ink-2); }
.hero__note .tick { width: 16px; height: 16px; }

/* ---- Flap component --------------------------------------------------------
   A paper card with a hinge line. JS builds four leaves (top/bottom, static/
   flipping) on demand and removes them after each flip, so at rest the card
   is just the word: selectable, translatable, readable with JS off.       */
.flap {
  display: inline-block;
  white-space: nowrap;
  vertical-align: baseline;
  perspective: 6em;
}
.flap__card {
  position: relative;
  display: inline-block;
  padding: 0.02em 0.2em 0.07em;
  margin: 0 0.02em;
  border: 0.05em solid var(--ink);
  border-radius: 0.17em;
  background: var(--card);
  box-shadow: 0 0.07em 0 var(--ink);          /* card thickness */
  line-height: 1.02;
  overflow: clip;
  transition: width 0.42s var(--ease-paper);
}
/* the hinge */
.flap__card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 0.025em;
  min-height: 1px;
  background: rgba(17, 17, 17, 0.16);
  z-index: 3;
  pointer-events: none;
}
.flap__word { display: inline-block; }
.flap.is-flipping .flap__word { visibility: hidden; }

.flap__leaf {
  position: absolute;
  inset: 0;
  display: block;
  padding: inherit;
  text-align: center;
  white-space: nowrap;
  background: var(--card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%;
}
.flap__leaf--top { clip-path: inset(0 0 50% 0); }
.flap__leaf--bottom { clip-path: inset(50% 0 0 0); }
.flap__leaf--turning { z-index: 2; }

/* ---- Hero stage: peek art + illustrative chat ---- */
.hero__stage {
  display: grid;
  justify-items: center;
  gap: 40px;
  margin-top: clamp(48px, 7vw, 88px);
}
@media (min-width: 920px) {
  .hero__stage {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
  }
  .peek { grid-column: 2; }
  .chat { grid-column: 3; justify-self: start; margin-left: clamp(24px, 4vw, 64px); }
}

.peek {
  position: relative;
  width: clamp(210px, 30vw, 320px);
}
.peek__art {
  position: relative;
  aspect-ratio: 693 / 1000;
}
.peek__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.peek__alpaca { z-index: 0; transform-origin: 62% 100%; }
.peek__stack { z-index: 1; }

.peek__ground {
  position: absolute;
  max-width: none;
  left: -45%;
  width: 190%;
  bottom: -4px;
  height: 12px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
@media (max-width: 600px) { .peek__ground { left: -22%; width: 150%; } }

.peek__sheet {
  position: absolute;
  z-index: 2;
  right: -34%;
  bottom: -2px;
  width: 34%;
  overflow: visible;
  fill: var(--card);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.peek__sheet path + path { fill: none; stroke-width: 2.2; }

.chat {
  width: min(340px, 100%);
  padding: 16px;
  display: grid;
  gap: 10px;
  background: var(--card);
  border: var(--stroke) solid var(--ink);
  border-radius: 24px;
  box-shadow: 0 26px 50px -34px rgba(17, 17, 17, 0.4);
  text-align: left;
}
.chat__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
}
.chat__dot {
  width: 9px; height: 9px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}
.chat__app { color: var(--ink); font-weight: 750; letter-spacing: 0.08em; }
.bubble {
  max-width: 86%;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.4;
  text-wrap: balance;
}
.bubble--me {
  justify-self: end;
  background: var(--ink);
  color: var(--paper);
  border-radius: 18px 18px 5px 18px;
}
.bubble--aplai {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--paper-2);
  border-radius: 18px 18px 18px 5px;
}
.bubble--aplai img { width: 16px; flex: none; }
.chat__foot { font-size: 13px; color: var(--grey); padding-top: 4px; }
.chat__label {
  padding-top: 10px;
  border-top: 1px dashed var(--line-strong);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-2);
}

/* 6. Demo film ------------------------------------------------------------- */
.demo { padding-top: clamp(24px, 3vw, 48px); }
.demo__layout {
  display: grid;
  justify-items: center;
  gap: 56px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(36px, 5.5vw, 72px) clamp(20px, 5vw, 72px);
  background: var(--paper-2);
  border-radius: 36px;
}
@media (min-width: 860px) {
  .demo__layout {
    grid-template-columns: auto minmax(0, 380px);
    justify-content: center;
    align-items: center;
    gap: clamp(56px, 8vw, 112px);
  }
}

.film { width: clamp(232px, 28vw, 312px); }
.film__device {
  position: relative;
  aspect-ratio: 324 / 727;             /* ≈ the film's 1080 × 2424 */
  filter: drop-shadow(0 34px 34px rgba(17, 17, 17, 0.14));
}
.film__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.film__frame rect { fill: var(--card); }
.film__screen {
  position: absolute;
  inset: 2.2% 4.2%;
  overflow: hidden;
  border-radius: 13% / 5.8%;
  background: var(--paper);
  border: 1.5px solid var(--line);
}
.film__island {
  position: absolute;
  z-index: 2;
  top: 1.8%;
  left: 50%;
  width: 30%;
  height: 3.1%;
  transform: translateX(-50%);
  background: var(--ink);
  border-radius: 999px;
}
.film__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 18% 10% 12%;
  text-align: center;
}
.film__chip {
  padding: 4px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.film__placeholder img { width: 80%; margin: 8px 0 4px; }
.film__title {
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: balance;
}
.film__text { font-size: 13.5px; color: var(--grey); }
.film__play {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-top: 10px;
  border: var(--stroke) solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.25s var(--ease-paper);
}
.film__play svg { width: 26px; fill: var(--ink); transform: translateX(2px); }
.film__play:disabled { opacity: 0.45; cursor: not-allowed; }
.film__play:not(:disabled):hover { transform: scale(1.06); }
/* Film-ready state (JS adds .has-film): the placeholder becomes a play overlay */
.film.has-film .film__placeholder { position: absolute; inset: 0; z-index: 1; background: rgba(250, 249, 245, 0.35); }
.film.has-film .film__chip,
.film.has-film .film__placeholder img,
.film.has-film .film__title,
.film.has-film .film__text { display: none; }
.film.is-playing .film__placeholder { display: none; }
.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--paper);
}

.flow { width: 100%; }
.flow__title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.flow__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line-strong);
  font-size: 17px;
  font-weight: 550;
  line-height: 1.35;
}
.flow__list li:last-child { border-bottom: 1px solid var(--line-strong); }
.flow__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 750;
}
.flow__list li:nth-child(4) .flow__n { background: var(--ink); color: var(--paper); }
.flow__more { margin-top: 18px; color: var(--grey); font-size: 15px; text-wrap: pretty; }

/* 7. Steps 01–03 ------------------------------------------------------------ */
.step__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
.step__copy { display: grid; gap: 18px; justify-items: start; }
.step__copy h2 { max-width: 12ch; }
.step__visual { position: relative; width: 100%; }

@media (min-width: 920px) {
  .step__grid { grid-template-columns: 5fr 7fr; gap: clamp(48px, 7vw, 104px); }
  .step--flip .step__grid { grid-template-columns: 7fr 5fr; }
  .step--flip .step__copy { order: 2; }
}

/* 01 · Share */
.visual-share {
  display: grid;
  gap: 24px;
  justify-items: center;
}
@media (min-width: 620px) {
  .visual-share {
    grid-template-columns: 0.85fr 1fr;
    align-items: end;
    gap: 20px 12px;
  }
  .visual-share__alpaca { grid-column: 1; grid-row: 1; }
  .profile { grid-column: 2; grid-row: 1; }
  .visual-share .caption { grid-column: 1 / -1; }
}
.visual-share__alpaca { width: min(300px, 80%); }
@media (min-width: 620px) { .visual-share__alpaca { width: 100%; } }

.profile {
  width: 100%;
  max-width: 392px;
  padding: 22px 22px 18px;
}
.paper__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.paper__meta { font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-2); }
.profile__name { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.profile__role { color: var(--grey); font-size: 15px; margin-top: 2px; }
.profile__rows { margin-top: 18px; }
.profile__rows > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.profile__rows dt { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.profile__rows dd .skel:first-child { margin-top: 5px; }
.profile__skills { font-size: 14px; font-weight: 600; }
.profile__target {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px;
}
.profile__target-k { font-size: 13px; font-weight: 700; }
.profile__target-v { font-size: 13px; color: var(--grey); }

/* 02 · Answer */
.visual-answer {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 18px;
  align-items: center;
}
.known {
  grid-column: 1; grid-row: 1;
  padding: 18px 20px;
  transform: rotate(-1.2deg);
}
.visual-answer__alpaca { grid-column: 2; grid-row: 1; width: 100%; max-width: 230px; justify-self: center; }
.question { grid-column: 1 / -1; grid-row: 2; padding: 24px; margin-left: 6%; transform: rotate(0.6deg); }
@media (max-width: 560px) {
  .visual-answer { grid-template-columns: 1fr; }
  .known { grid-column: 1; }
  .question { grid-column: 1; margin-left: 0; }
  .visual-answer__alpaca { grid-column: 1; grid-row: 3; max-width: 170px; }
}

.known__title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.known__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-weight: 650;
  font-size: 15px;
}
.known__list li + li { border-top: 1px solid var(--line); }
.known__list li span { margin-left: auto; font-weight: 500; font-size: 13px; color: var(--grey); }

.question__q {
  margin: 14px 0 16px;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; cursor: pointer; }
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.choice span {
  display: inline-flex;
  align-items: center;
  height: 44px;                           /* comfortable tap target */
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 650;
  font-size: 15px;
  background: var(--card);
  transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease-paper);
}
.choice:hover span { transform: translateY(-2px); box-shadow: 0 6px 12px -8px rgba(17, 17, 17, 0.5); }
.choice input:checked + span { transform: none; box-shadow: none; }
.choice input:checked + span { background: var(--ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.question__foot { margin-top: 14px; font-size: 13px; color: var(--grey); }

/* 03 · Tailor */
.visual-shape { display: grid; gap: 28px; }
.fan {
  position: relative;
  height: clamp(300px, 40vw, 420px);
}
.sheet {
  position: absolute;
  left: 50%;
  top: 8%;
  width: clamp(158px, 22vw, 226px);
  aspect-ratio: 8.5 / 11;
  padding: 16px;
  border-radius: 12px;
  transform: translateX(-50%) translate(calc(var(--x) * 2.2), var(--y)) rotate(var(--r));
}
.sheet .tag { margin-bottom: 14px; }
.sheet__name { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; line-height: 1.2; }
.sheet__k { font-size: 12.5px; color: var(--grey); margin-bottom: 8px; }
.sheet--letter { background: var(--paper-2); border-color: var(--line-strong); }
.sheet--letter .tag { background: transparent; }
@media (max-width: 520px) {
  .sheet { transform: translateX(-50%) translate(calc(var(--x) * 1.9), var(--y)) rotate(var(--r)); padding: 12px; }
}

.visual-shape__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.visual-shape__foot img { width: clamp(110px, 14vw, 150px); }

/* 8. Review (04) — the differentiator ------------------------------------- */
.review { background: var(--paper-2); }
.review__title { font-size: clamp(2.4rem, 6vw, 4.75rem); }

.review__stage {
  display: grid;
  gap: 56px;
  align-items: center;
  margin-top: clamp(44px, 5.5vw, 72px);
}
@media (min-width: 1000px) {
  .review__stage { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(56px, 6vw, 96px); }
}

/* The sheet sits on a small stack of paper (two sheets peeking behind). */
.sheet-review {
  width: 100%;
  max-width: 660px;
  justify-self: center;
  padding: clamp(22px, 3.6vw, 40px);
  border-radius: 24px;
  /* two sheets of paper peeking out beneath: a small stack, like the mascot's */
  box-shadow:
    9px 10px 0 -2px var(--card),
    9px 10px 0 -0.5px var(--line-strong),
    18px 20px 0 -4px var(--card),
    18px 20px 0 -2.5px var(--line-strong),
    0 44px 70px -44px rgba(17, 17, 17, 0.45);
}
.sheet-review__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}
.status__dot { width: 8px; height: 8px; border: 2px solid var(--ink); border-radius: 50%; }

.sheet-review__title {
  max-width: 62%;
  margin: 22px 0 8px;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.rv-block { margin-top: 22px; }
.rv-block__k {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rv-block__k span { color: var(--grey); letter-spacing: 0.04em; text-transform: none; font-weight: 600; }

.rv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  margin-inline: -10px;
  border-radius: 10px;
  transition: background-color 0.5s var(--ease-paper), color 0.5s;
}
.rv-row .tick { margin-left: auto; }
.rv-row__v { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.rv-row__v--strong { font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }

.rv-docs { display: grid; gap: 8px; }
@media (min-width: 560px) { .rv-docs { grid-template-columns: 1fr 1fr; } }
.rv-doc {
  margin-inline: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--line-strong);
  background: var(--paper);
}
/* tiny ink document icon with a folded corner */
.rv-doc__icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 20px;
  border: 2px solid var(--ink);
  border-radius: 2px 6px 2px 2px;
}
.rv-doc__icon::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 7px;
  height: 2px;
  background: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  border-radius: 2px;
}

.rv-form .rv-row { border-top: 1px solid var(--line); border-radius: 0; }
.rv-form .rv-row:first-child { border-top: 0; }
.rv-form dt { flex: none; width: clamp(84px, 28%, 150px); font-size: 14px; color: var(--grey); }
.rv-form dd { font-size: 15px; font-weight: 650; overflow-wrap: anywhere; }

.sheet-review__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: var(--stroke) solid var(--ink);
}
.sheet-review__foot p { font-weight: 650; font-size: 15px; }
.mock-btn {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border: 2px dashed var(--ink);
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  user-select: none;
}

.stamp {
  position: absolute;
  top: clamp(92px, 10vw, 112px);
  right: clamp(14px, 4vw, 40px);
  padding: 8px 12px;
  border: 3px solid var(--ink);
  outline: 1.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-7deg);
  opacity: 0.88;
  pointer-events: none;
}

@media (max-width: 560px) {
  .sheet-review__title { max-width: none; }
  .stamp { position: static; display: inline-block; margin: 6px 0 4px 6px; }
}

.sheet-review__fine {
  margin-top: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--grey);
}

.review__aside { display: grid; gap: 28px; justify-items: center; }
.review__alpaca { width: min(300px, 76%); }
.promises { width: 100%; max-width: 420px; }
.promises li {
  padding: 16px 0;
  border-top: 1px solid var(--line-strong);
  color: var(--grey);
  font-size: 16px;
  line-height: 1.45;
}
.promises li:last-child { border-bottom: 1px solid var(--line-strong); }
.promises strong { display: block; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }

.approval {
  display: grid;
  justify-items: center;
  gap: 36px;
  margin-top: clamp(64px, 7.5vw, 104px);
  text-align: center;
}
.approval__line {
  font-size: clamp(1.7rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}
.ink-under { position: relative; display: inline-block; padding-bottom: 0.18em; }
.ink-under svg {
  position: absolute;
  left: -2%;
  bottom: -0.08em;
  width: 104%;
  height: 0.34em;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}

.after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.after li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}
.after__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px; height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}
@media (min-width: 900px) {
  .after { flex-direction: row; gap: 44px; }
  .after li { position: relative; }
  /* ink connector between the three after-approval steps */
  .after li + li::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 50%;
    width: 28px;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--ink);
  }
}

/* 9. Final CTA ------------------------------------------------------------ */
.final { padding-bottom: clamp(48px, 6vw, 80px); }
.final__inner { display: grid; justify-items: center; text-align: center; gap: 32px; }
.final h2 { font-size: clamp(2.5rem, 6.4vw, 5rem); max-width: 17ch; }

.quote p {
  display: inline-block;
  padding: 20px 28px;
  border: var(--stroke) solid var(--ink);
  border-radius: 28px 28px 8px 28px;
  background: var(--card);
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-wrap: balance;
  box-shadow: 0 26px 50px -36px rgba(17, 17, 17, 0.45);
}

.final__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  color: var(--grey);
  font-size: 16px;
}
.final__points li { display: inline-flex; align-items: center; gap: 10px; }
.final__points li::before {
  content: "";
  width: 10px; height: 6px;
  border-left: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(-45deg) translateY(-2px);
}

.final__actions { display: grid; justify-items: center; gap: 18px; }
.final__alpaca { width: min(460px, 80%); margin-top: clamp(8px, 2vw, 24px); }

/* 10. Footer ---------------------------------------------------------------- */
.footer { border-top: 1px solid var(--line); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  padding-block: 36px 44px;
}
.footer__alpaca { width: 92px; }
.footer__brand { display: grid; gap: 2px; }
.footer__tag { font-size: 14px; color: var(--grey); }
.footer__fine { margin-left: auto; font-size: 13px; color: var(--grey); }
@media (max-width: 620px) { .footer__fine { margin-left: 0; width: 100%; } }

/* 10b. Phone pass ------------------------------------------------------------
   Mobile revision v2 (2026-09-27). Phones only: every rule lives inside
   max-width: 619px, below all of the page's min-width layout breakpoints
   (620 / 860 / 900 / 920 / 1000), so tablet and desktop are untouched.
   Scoped to body.landing so the signed-in pages keep their own rhythm.
   Intent: more air between and inside sections, smaller art and type where
   they crowded each other, and a hero that lands in one phone screen.
   v3 spacing pass (2026-09-27): values only, no new selectors bar
   .choices. More rhythm between sections (124px) and between each head and
   its visual (52px), more padding inside cards, lists and the demo stage.
   Polish pass (2026-09-27, late): 124px each side stacked into ~250px holes
   between sections, and the art-to-section gaps read as dead zones. Section
   rhythm is 88px now (176px between sections, still the page's biggest
   pause); inner air inside cards and lists is kept.                      */
@media (max-width: 619px) {
  .landing {
    --gutter: 22px;
    --section: 88px;
    --phone-air: 44px;               /* space between a section head and its visual */
  }

  /* Nav: a lighter bar so the hero owns the first screen. */
  .landing .nav__inner { height: 58px; }
  .landing .brand__mark { width: 21px; }
  .landing .brand__word { font-size: 15px; }
  .landing .nav .btn--sm { height: 38px; padding: 0 15px; font-size: 13px; }

  /* Section heads: calmer type, a little more space between the lines. */
  .landing h2 { font-size: 2.05rem; line-height: 1.06; }
  .landing .section__head,
  .landing .step__copy { gap: 20px; }
  .landing .section__sub { font-size: 1.02rem; line-height: 1.6; }

  /* Hero: badge, headline + flap, CTA and the alpaca in one screen (≈390×760).
     The illustrative chat follows below the fold with room of its own. */
  .landing .hero { padding-top: 44px; padding-bottom: 48px; }
  .landing .hero__copy { gap: 24px; }
  .landing .hero .badge { padding: 6px 12px 6px 9px; font-size: 12px; }
  .landing .hero__title { font-size: 2.6rem; line-height: 1.08; }
  .landing .hero__title .flap { margin-block: 0.06em; }
  .landing .hero__sub { font-size: 1.05rem; max-width: 26ch; }
  .landing .hero__actions { flex-direction: column; gap: 10px; margin-top: 8px; }
  .landing .hero .btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
  .landing .hero .link-quiet { font-size: 15px; }
  .landing .hero__note { font-size: 13px; }
  .landing .hero__stage { gap: 64px; margin-top: 44px; }
  .landing .peek { width: 162px; }
  .landing .peek__ground { left: -60%; width: 220%; }
  .landing .chat { width: min(320px, 100%); padding: 22px 20px; gap: 16px; }

  /* Demo: a smaller device on a roomier stage. */
  .landing .demo { padding-top: 24px; }
  .landing .demo__layout {
    gap: 56px;
    margin-top: var(--phone-air);
    padding: 52px 26px 44px;
    border-radius: 30px;
  }
  .landing .film { width: 206px; }
  .landing .film__placeholder { gap: 8px; padding-inline: 8%; }
  .landing .film__chip { padding: 3px 9px; font-size: 9.5px; letter-spacing: 0.1em; }
  .landing .film__title { font-size: 15px; }
  .landing .film__text { font-size: 12.5px; }
  .landing .film__play { width: 52px; height: 52px; }
  .landing .film__play svg { width: 22px; }
  .landing .flow__title { margin-bottom: 18px; }
  .landing .flow__list li { padding: 18px 0; font-size: 16px; }
  .landing .flow__more { margin-top: 28px; }

  /* Steps 01–03: head, then a clear pause, then the visual. */
  .landing .step__grid { gap: var(--phone-air); }

  .landing .visual-share { gap: 36px; }
  .landing .profile { max-width: 340px; padding: 26px 22px 24px; }
  .landing .profile__name { font-size: 23px; }
  .landing .profile__rows > div { grid-template-columns: 92px 1fr; padding: 15px 0; }
  .landing .profile__target { margin-top: 14px; }
  .landing .visual-share__alpaca { width: min(236px, 66%); }

  .landing .visual-answer { gap: 36px; }
  .landing .known { padding: 22px 22px 14px; }
  .landing .known__list li { padding: 12px 0; }
  .landing .question { padding: 28px 24px; }
  .landing .question__q { font-size: 19px; margin: 16px 0 22px; }
  .landing .choices { gap: 12px; }
  .landing .visual-answer__alpaca { max-width: 140px; margin-top: 12px; }

  .landing .visual-shape { gap: 40px; }
  .landing .fan { height: 250px; margin-top: 16px; }
  /* Narrower sheets, fanned wider, so each resume shows its name in full.
     Both the static and the settled (motion) state use the same spread. */
  .landing .sheet,
  .js:not(.reveal-all) .landing .fan.is-in .sheet {
    transform: translateX(-50%) translate(calc(var(--x) * 2.55), var(--y)) rotate(var(--r));
  }
  .landing .sheet { width: 124px; padding: 10px; border-radius: 10px; }
  .landing .sheet .tag { margin-bottom: 10px; padding: 2px 8px; font-size: 11px; }
  .landing .sheet__name { font-size: 13px; }
  .landing .sheet__k { font-size: 11px; }
  .landing .sheet .skel { height: 6px; margin-top: 7px; }
  .landing .visual-shape__foot img { width: 96px; }
  .landing .visual-shape__foot .caption { max-width: 22ch; font-size: 14px; }
  .landing .visual-shape__foot .caption strong { font-size: 16px; }

  /* Review keeps the most weight after the hero: it gets the most air, the
     sheet keeps its ink and stack, only its inner type steps down a notch. */
  .landing .review__title { font-size: 2.35rem; line-height: 1.04; }
  .landing .review__stage { gap: 56px; margin-top: var(--phone-air); }
  .landing .sheet-review { padding: 30px 22px 26px; border-radius: 22px; }
  .landing .sheet-review__head { gap: 12px; }
  .landing .sheet-review__title { font-size: 25px; margin: 20px 0 6px; }
  .landing .rv-block { margin-top: 28px; }
  .landing .rv-block__k { margin-bottom: 6px; font-size: 11.5px; }
  .landing .rv-row__v--strong { font-size: 16px; }
  .landing .rv-docs { gap: 10px; }
  .landing .rv-form dt { font-size: 13.5px; }
  .landing .rv-form dd { font-size: 14.5px; }
  .landing .sheet-review__foot { gap: 18px; margin-top: 32px; padding-top: 26px; }
  .landing .stamp { margin: 10px 0 2px 6px; }
  .landing .sheet-review__fine { margin-top: 26px; font-size: 11px; }
  .landing .review__aside { gap: 36px; }
  .landing .review__alpaca { width: min(220px, 60%); }
  .landing .promises li { padding: 20px 0; font-size: 15.5px; }
  .landing .promises strong { font-size: 18px; margin-bottom: 2px; }
  .landing .approval { gap: 36px; margin-top: 80px; }
  .landing .approval__line { font-size: 1.75rem; }
  .landing .after { gap: 20px; }
  .landing .after li { font-size: 14.5px; }

  /* Final CTA: one line of ink, one quote, one button — spaced like a close. */
  .landing .final { padding-bottom: 56px; }
  .landing .final__inner { gap: 36px; }
  .landing .final h2 { font-size: 2.3rem; }
  .landing .quote p { padding: 18px 24px; font-size: 1.2rem; }
  .landing .final__points { flex-direction: column; align-items: center; gap: 14px; font-size: 15px; }
  .landing .final__actions { gap: 24px; }
  .landing .final .btn--lg { height: 52px; padding: 0 26px; font-size: 16px; }
  .landing .final__alpaca { width: min(260px, 70%); margin-top: 12px; }

  .landing .footer__inner { gap: 18px 20px; padding-block: 36px 44px; }
  .landing .footer__alpaca { width: 80px; }
}

/* 11. Motion ---------------------------------------------------------------
   Everything below only applies when motion is welcome AND main.js is on
   (.js, not .reveal-all). Remove this block and the page is complete.     */
@media (prefers-reduced-motion: no-preference) {

  /* Generic reveal: a sheet of paper settling into place. */
  .js:not(.reveal-all) [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.9s var(--ease-paper) var(--d, 0ms),
      transform 1.1s var(--ease-paper) var(--d, 0ms);
  }
  .js:not(.reveal-all) [data-reveal="sheet"] { transform: translateY(34px) rotate(-1.6deg); }
  .js:not(.reveal-all) [data-reveal="art"] { transform: translateY(10px); }
  .js:not(.reveal-all) [data-reveal].is-in { opacity: 1; transform: none; }
  /* keep the designed resting tilt of the answer cards */
  .js:not(.reveal-all) .known.is-in { transform: rotate(-1.2deg); }
  .js:not(.reveal-all) .question.is-in { transform: rotate(0.6deg); }
  .js:not(.reveal-all) .fan[data-reveal] { opacity: 1; transform: none; } /* sheets animate instead */

  /* Ink lines draw themselves. */
  .js:not(.reveal-all) .ink-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s var(--ease-ink) var(--draw-d, 0.2s);
  }
  .js:not(.reveal-all) .is-in .ink-draw { stroke-dashoffset: 0; }
  .known__list li:nth-child(1) .ink-draw { --draw-d: 0.55s; }
  .known__list li:nth-child(2) .ink-draw { --draw-d: 0.8s; }
  .known__list li:nth-child(3) .ink-draw { --draw-d: 1.05s; }
  .ink-under .ink-draw { --draw-d: 0.5s; transition-duration: 1.4s; }
  .film__frame .ink-draw { transition-duration: 1.8s; }
  .js:not(.reveal-all) .film__frame rect { fill-opacity: 0; transition: fill-opacity 0.8s ease 1.1s, stroke-dashoffset 1.8s var(--ease-ink) 0.2s; }
  .js:not(.reveal-all) .film.is-in .film__frame rect { fill-opacity: 1; }
  .js:not(.reveal-all) .film__screen { opacity: 0; transition: opacity 0.9s var(--ease-paper) 1.2s; }
  .js:not(.reveal-all) .film.is-in .film__screen { opacity: 1; }

  /* Hero: the stack builds from the ground up, the alpaca leans out,
     a fresh sheet slides in to join the pile. */
  .js:not(.reveal-all) .peek[data-reveal] { opacity: 1; transform: none; }
  .js:not(.reveal-all) .peek__stack {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.1s cubic-bezier(0.33, 0.9, 0.3, 1) 0.25s;
  }
  .js:not(.reveal-all) .peek__alpaca {
    opacity: 0;               /* hidden until the stack is there to hide behind */
    transform: translateX(-36%);
    transition:
      opacity 0.01s linear 1.0s,
      transform 1.1s cubic-bezier(0.2, 0.9, 0.25, 1.04) 1.0s;
  }
  .js:not(.reveal-all) .peek__sheet {
    opacity: 0;
    transform: translateX(140%) rotate(10deg);
    transition: opacity 0.4s ease 1.45s, transform 1s var(--ease-paper) 1.45s;
  }
  .js:not(.reveal-all) .peek.is-in .peek__stack { clip-path: inset(0 0 0 0); }
  .js:not(.reveal-all) .peek.is-in .peek__alpaca { opacity: 1; transform: none; }
  .js:not(.reveal-all) .peek.is-in .peek__sheet { opacity: 1; transform: none; }
  /* After settling, a slow, occasional lean. Calm, not a loop you notice. */
  .peek.is-settled .peek__alpaca { animation: lean 9s ease-in-out 1s infinite; }
  @keyframes lean {
    0%, 70%, 100% { transform: none; }
    80% { transform: translateX(-4%) rotate(-1.5deg); }
    90% { transform: translateX(0.5%) rotate(0.3deg); }
  }

  /* Tailor: sheets slide out of one pile into a fan. */
  .js:not(.reveal-all) .fan .sheet {
    opacity: 0;
    transform: translateX(-50%) translateY(40px) rotate(0deg);
    transition:
      opacity 0.6s var(--ease-paper) var(--d, 0ms),
      transform 1.2s var(--ease-paper) calc(var(--d, 0ms) + 150ms);
  }
  .js:not(.reveal-all) .fan.is-in .sheet {
    opacity: 1;
    transform: translateX(-50%) translate(calc(var(--x) * 2.2), var(--y)) rotate(var(--r));
  }
  @media (max-width: 520px) {
    .js:not(.reveal-all) .fan.is-in .sheet {
      transform: translateX(-50%) translate(calc(var(--x) * 1.9), var(--y)) rotate(var(--r));
    }
  }
  .fan .sheet { transition-property: opacity, transform, box-shadow; }
  .fan .sheet:hover { box-shadow: 0 30px 50px -30px rgba(17, 17, 17, 0.45); }

  /* Review: rows are checked one by one, then the stamp comes down. */
  .js:not(.reveal-all) [data-review] .rv-row { color: var(--grey-2); }
  .js:not(.reveal-all) [data-review] .rv-row.is-checked { color: var(--ink); }
  .js:not(.reveal-all) [data-review] .rv-row.is-current { background: var(--paper-2); }
  .js:not(.reveal-all) [data-review] .rv-row .ink-draw { stroke-dashoffset: 1; transition-delay: 0s; transition-duration: 0.5s; }
  .js:not(.reveal-all) [data-review] .rv-row.is-checked .ink-draw { stroke-dashoffset: 0; }
  .js:not(.reveal-all) [data-stamp] { opacity: 0; }
  .js:not(.reveal-all) [data-stamp].is-stamped { animation: stamp-down 0.52s cubic-bezier(0.5, 0, 0.3, 1) both; }
  @keyframes stamp-down {
    0%   { opacity: 0;    transform: rotate(-11deg) scale(1.7); }
    55%  { opacity: 1;    transform: rotate(-7deg) scale(0.95); }
    75%  { opacity: 0.92; transform: rotate(-7deg) scale(1.02); }
    100% { opacity: 0.88; transform: rotate(-7deg) scale(1); }
  }
  .sheet-review.is-pressed { animation: sheet-press 0.4s cubic-bezier(0.3, 0, 0.3, 1) both; }
  @keyframes sheet-press {
    0%, 100% { translate: 0 0; }
    35% { translate: 0 3px; }
  }

  /* Final: the invoke line is written out, letter by letter. */
  .js:not(.reveal-all) [data-type] .ch { opacity: 0; transition: opacity 0.12s linear calc(0.45s + var(--i) * 26ms); }
  .js:not(.reveal-all) .is-in [data-type] .ch { opacity: 1; }
}

/* Motion off: the flap never animates, the page is simply finished. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ==========================================================================
   12. Signed-in pages (account.html, signin.html)
   Same paper, same ink. One column that does one job, with the guide
   beside it (desktop) or above it (mobile).
   ========================================================================== */

/* JS-only controls (copy, regenerate) stay out of the no-JS page. */
html:not(.js) .js-only { display: none !important; }

/* Quiet outline button: paper, hairline ink. */
.btn--line {
  background: var(--card);
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  cursor: pointer;
  font-family: inherit;
}
.btn--line:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn--line:active { transform: none; transition-duration: 0.08s; }
button.btn { font-family: inherit; cursor: pointer; }
.btn--ink:is(button) { border: 0; }
.link-quiet--sm { font-size: 14px; padding: 4px 2px; }
button.link-quiet { background: none; border-top: 0; border-inline: 0; font-family: inherit; color: var(--ink); cursor: pointer; }

/* Design-preview strip (deleted in production). Dashed = "not the product". */
.preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 18px;
  padding: 8px var(--gutter);
  border-bottom: 1.5px dashed var(--line-strong);
  font-size: 12.5px;
  color: var(--grey);
  text-align: center;
}
.preview-bar strong { color: var(--ink); }
.preview-bar nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; }
.preview-bar a { color: var(--ink-2); text-underline-offset: 3px; }

/* Header: brand left, who you are + sign out right. */
.app-nav__user { display: flex; align-items: center; gap: 14px; min-width: 0; }
.app-nav__email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: var(--grey);
}
@media (max-width: 440px) { .app-nav__email { max-width: 38vw; font-size: 13px; } }

.app-main { padding-block: clamp(28px, 5vw, 64px) clamp(36px, 4.5vw, 64px); }   /* polish: 96 left a dead band under the page foot */

.app-layout {
  display: grid;
  gap: 24px;
}
@media (min-width: 960px) {
  .app-layout {
    grid-template-columns: 250px minmax(0, 620px);
    justify-content: center;
    gap: clamp(48px, 6vw, 84px);
  }
}

.app-col { display: grid; gap: 22px; align-content: start; min-width: 0; }

.app-head { display: grid; gap: 12px; margin-bottom: 10px; }
.app-head__title {
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
}
.app-head__sub {
  color: var(--grey);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 36ch;
  text-wrap: pretty;
}

/* ---- Your APLAI code ---- */
.code-card { padding: clamp(20px, 3vw, 28px); }
.code-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.code-card__k {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.code-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  margin: 16px 0 18px;
}

/* The code: flap-card tiles, the same paper cards as the hero's "Meta Muse". */
.code { margin: 0; }
.code__tiles { display: inline-flex; align-items: center; gap: 5px; }
.code__tile {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.18em;
  height: 1.5em;
  border: 2px solid var(--ink);
  border-radius: 0.2em;
  background: var(--card);
  box-shadow: 0 3px 0 var(--ink);           /* card thickness, like the flap */
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.code__tile::after {                          /* the hinge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(17, 17, 17, 0.14);
}
.code__dash { padding: 0 2px; font-size: clamp(22px, 3.4vw, 30px); font-weight: 700; color: var(--grey-2); }
@media (max-width: 420px) {
  .code__tiles { gap: 3px; }
  .code__tile { font-size: 25px; width: 1.12em; border-width: 1.8px; box-shadow: 0 2px 0 var(--ink); }
  .code__dash { font-size: 18px; padding: 0; }
}

.btn--copy { height: 44px; padding: 0 18px 0 14px; font-size: 15px; gap: 8px; }
.i-copy { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--copy.is-copied { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn--copy { transition: transform 0.25s var(--ease-paper), background-color 0.22s, color 0.22s, border-color 0.22s; }
@media (prefers-reduced-motion: no-preference) {
  /* Copied: the button presses in and springs back as it inks over. */
  .btn--copy.is-copied { animation: copy-pop 0.4s var(--ease-flap); }
  .btn--copy.is-copied .i-copy { animation: copy-pop 0.4s var(--ease-flap) 0.05s; }
  @keyframes copy-pop { from { transform: scale(0.9); } }
}

.code-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.code-card__note { font-size: 14px; color: var(--grey); text-wrap: pretty; }
.code-card__status { font-size: 15px; color: var(--grey); }
.code-card__status strong { color: var(--ink); }

/* States: only one body shows at a time. */
.code-card__loading, .code-card__error { display: none; }
[data-code-state="loading"] .code-card__body,
[data-code-state="error"] .code-card__body { display: none; }
[data-code-state="loading"] .code-card__loading {
  display: grid;
  gap: 14px;
  margin: 16px 0 18px;
}
[data-code-state="error"] .code-card__error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 16px 0 18px;
  padding: 16px 18px;
  border: 1.5px dashed var(--ink);
  border-radius: 14px;
}
.code__tiles--blank .code__tile { border-color: var(--line-strong); box-shadow: 0 3px 0 var(--line-strong); background: var(--paper); }
[data-code-state="loading"] [data-regen-open],
[data-code-state="error"] [data-regen-open] { display: none; }

/* Regenerate confirm: a small ink-edged note that unfolds inside the card. */
.confirm {
  margin-top: 16px;
  padding: 18px 20px;
  border: var(--stroke) solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
}
.confirm[hidden] { display: none; }
.confirm__title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.confirm__text { margin-top: 4px; font-size: 15px; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
.confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 420px) {
  .confirm__actions { flex-direction: column; }
  .confirm__actions .btn { width: 100%; height: 46px; }
}

/* ---- The handoff: the star ---- */
.handoff {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 3.4vw, 34px);
  border-radius: 24px;
  /* the same small paper stack as the review sheet */
  box-shadow:
    8px 9px 0 -2px var(--card),
    8px 9px 0 -0.5px var(--line-strong),
    0 36px 60px -40px rgba(17, 17, 17, 0.45);
}

.btn--muse {
  justify-content: flex-start;
  width: 100%;
  height: 76px;
  padding: 0 26px 0 12px;
  gap: 16px;
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 750;
  letter-spacing: -0.015em;
}
.btn--muse__face {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--card);
  transition: transform 0.45s var(--ease-flap);
}
.btn--muse__face img { width: 25px; }
.btn--muse__face .tick {
  position: absolute;
  width: 24px; height: 24px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s, transform 0.35s var(--ease-flap);
}
.btn--muse__label { flex: 1; }
.btn--muse__arrow {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease-paper);
}
.btn--muse:hover .btn--muse__face { transform: rotate(-8deg); }
.btn--muse:hover .btn--muse__arrow { transform: translate(2px, -2px); }
.btn--muse:focus-visible { outline-offset: 5px; }
/* After the click: the face becomes a tick for a moment */
.btn--muse.is-done .btn--muse__face img { opacity: 0; }
.btn--muse.is-done .btn--muse__face .tick { opacity: 1; transform: none; }
@media (max-width: 420px) {
  .btn--muse { height: 68px; padding: 0 20px 0 9px; gap: 12px; font-size: 18px; }
  .btn--muse__face { width: 50px; height: 50px; }
}

/* No code yet: the handoff waits, visibly. */
.btn--muse[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.btn--muse[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.handoff__how { font-size: 14px; color: var(--grey); text-align: center; }

.handoff__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-2);
}
.handoff__or::before, .handoff__or::after { content: ""; flex: 1; border-top: 1.5px dashed var(--line-strong); }

.line-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 18px;
  padding: 16px 16px 16px 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  background: var(--paper);
}
.line-card__k { grid-column: 1 / -1; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.line-card__line { font-size: 17px; font-weight: 600; line-height: 1.4; text-wrap: pretty; user-select: all; }
.line-card__code { font-weight: 800; white-space: nowrap; }
@media (max-width: 520px) {
  .line-card { grid-template-columns: 1fr; }
  .line-card .btn--copy { justify-self: start; }
}

/* ---- What happens next ---- */
.next { padding: 8px 2px 0; }
.next__title {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.next__steps { display: grid; gap: 0; }
.next__steps li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line-strong);
  font-size: 16px;
  font-weight: 550;
  line-height: 1.35;
}
.next__steps li:last-child { border-bottom: 1px solid var(--line-strong); font-weight: 700; }
.next__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 750;
}
.next__n--ink { background: var(--ink); color: var(--paper); }
.next__promise {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.next__promise .tick { width: 18px; height: 18px; }

.app-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.app-foot__tier { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.app-foot__dot { width: 8px; height: 8px; border: 2px solid var(--ink); border-radius: 50%; }

/* "You are here" ring: the guide points at a card by inking a loose outline
   around it, like circling something on paper. */
[data-guide-target] { position: relative; }
[data-guide-target]::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px dashed var(--ink);
  border-radius: 30px;
  opacity: 0;
  transform: scale(0.985);
  pointer-events: none;
  transition: opacity 0.4s var(--ease-paper), transform 0.5s var(--ease-paper);
}
.code-card[data-guide-target]::before { border-radius: calc(var(--radius) + 9px); }
.next[data-guide-target]::before { border-radius: 20px; inset: -4px -12px -10px; }
@media (max-width: 520px) { .next[data-guide-target]::before { inset: -4px -8px -10px; } }
[data-guide-target].is-guided::before { opacity: 0.42; transform: none; }

/* ---- Toast ---- */
.toast {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 650;
  box-shadow: 0 18px 36px -18px rgba(17, 17, 17, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s var(--ease-paper), transform 0.45s var(--ease-flap), visibility 0s 0.45s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.toast__face { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--card); }
.toast__face img { width: 16px; }

/* ==========================================================================
   13. The guide — the alpaca as a quest NPC
   ========================================================================== */
.guide { position: relative; }
.guide__npc { display: grid; gap: 4px; }

.guide__avatar { position: relative; width: 96px; margin-left: 18px; }
.guide__head { width: 96px; transform-origin: 40% 95%; }
.guide__sleep { display: none; width: 150px; }
.guide__sparks {
  position: absolute;
  top: -18px; right: -30px;
  width: 52px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: 0;
}

.guide__bubble {
  position: relative;
  padding: 16px 18px 14px;
  background: var(--card);
  border: var(--stroke) solid var(--ink);
  border-radius: 22px;
  box-shadow: 0 22px 40px -30px rgba(17, 17, 17, 0.4);
}
/* tail up to the alpaca's mouth */
.guide__bubble::before, .guide__bubble::after {
  content: "";
  position: absolute;
  left: 96px;
  width: 0; height: 0;
  border: 11px solid transparent;
  border-top: 0;
}
.guide__bubble::before { top: -14px; border-bottom: 14px solid var(--ink); border-left-width: 13px; border-right-width: 13px; margin-left: -2px; }
.guide__bubble::after { top: -9.5px; border-bottom: 11px solid var(--card); }

.guide__arrow { display: none; }
@media (min-width: 960px) {
  .guide__arrow {
    display: block;
    position: absolute;
    right: -66px;
    top: 34px;
    width: 58px;
    overflow: visible;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .guide[data-guide-step="done"] .guide__arrow { display: none; }
}

.guide__quest { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-2); }
.guide__quest-k { color: var(--ink-2); }

.guide__steps { display: grid; gap: 12px; }
.guide__steps li { font-size: 16px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.guide__steps strong { display: block; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
html:not(.js) .guide__steps li[data-guide-step="done"],
html:not(.js) .guide__foot,
html:not(.js) .guide__replay,
html:not(.js) .guide__arrow { display: none; }

.guide__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.guide__dots { display: inline-flex; gap: 6px; }
.guide__dots i {
  width: 9px; height: 9px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  transition: background-color 0.3s, transform 0.4s var(--ease-flap);
}
.guide__dots i.is-done { background: var(--ink); }
.guide__dots i.is-now { transform: scale(1.3); }
.guide__actions { display: inline-flex; align-items: center; gap: 4px; }
.guide__skip, .guide__next, .guide__replay {
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
}
.guide__skip {
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--grey);
  border-radius: 999px;
}
.guide__skip:hover { color: var(--ink); }
.guide__next {
  height: 34px;
  padding: 0 14px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--ease-paper);
}
.guide__next:hover { background: var(--ink); color: var(--paper); }
.guide__next:active { transform: scale(0.97); }
.guide__replay { display: none; margin-top: 8px; padding: 2px 0; border: 0; border-bottom: 1.5px solid var(--line-strong); background: none; font-size: 13px; }
.guide__replay:hover { border-color: var(--ink); }

/* JS mode: one step at a time */
.js .guide__steps li { display: none; }
.js .guide[data-guide-step="code"]  li[data-guide-step="code"],
.js .guide[data-guide-step="line"]  li[data-guide-step="line"],
.js .guide[data-guide-step="paste"] li[data-guide-step="paste"],
.js .guide[data-guide-step="done"]  li[data-guide-step="done"] { display: block; }

/* Done: the alpaca curls up on the paper. Quiet from here on. */
.guide[data-guide-step="done"] .guide__head { display: none; }
.guide[data-guide-step="done"] .guide__sleep { display: block; }
.guide[data-guide-step="done"] .guide__avatar { width: 150px; margin-left: 4px; }
.guide[data-guide-step="done"] .guide__bubble::before,
.guide[data-guide-step="done"] .guide__bubble::after { left: 110px; }
.guide[data-guide-step="done"] .guide__bubble { border-width: 1.5px; border-color: var(--line-strong); box-shadow: none; }
.guide[data-guide-step="done"] .guide__bubble::before { border-bottom-color: var(--line-strong); }
.guide[data-guide-step="done"] .guide__foot,
.guide[data-guide-step="done"] .guide__quest { display: none; }
.guide[data-guide-step="done"] .guide__replay { display: inline-block; }

/* Parked (skipped): the aside empties; the peek waits at the bottom edge. */
.guide[data-guide-status="parked"] { visibility: hidden; }
.guide-peek {
  position: fixed;
  z-index: 80;
  left: clamp(12px, 3vw, 36px);
  bottom: 0;
  width: 74px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateY(34%);
  transition: transform 0.45s var(--ease-flap);
}
.guide-peek[hidden] { display: none; }
.guide-peek img { width: 100%; }
.guide-peek:hover, .guide-peek:focus-visible { transform: translateY(12%); }
.guide-peek:focus-visible { outline: none; }
.guide-peek:focus-visible img { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
.guide-peek__tip {
  position: absolute;
  left: 78px;
  top: 14px;
  padding: 5px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px 999px 999px 4px;
  background: var(--card);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s, transform 0.35s var(--ease-paper);
}
.guide-peek:hover .guide-peek__tip, .guide-peek:focus-visible .guide-peek__tip { opacity: 1; transform: none; }

/* Desktop: the guide stands in its own column and walks down to whichever
   card it's talking about (JS sets --guide-y). */
@media (min-width: 960px) {
  .guide__npc {
    position: relative;
    top: var(--guide-y, 0px);
    transition: top 0.8s cubic-bezier(0.45, 0, 0.2, 1);
  }
}

/* Mobile: the guide sits above the page as a compact row — the alpaca's
   head beside the bubble, tail pointing left to it. */
@media (max-width: 959px) {
  .guide__npc { grid-template-columns: 58px 1fr; align-items: start; gap: 10px; }
  .guide__avatar { width: 58px; margin: 6px 0 0; }
  .guide__head { width: 58px; }
  .guide__sparks { top: -14px; right: -18px; width: 36px; }
  .guide__bubble { padding: 12px 14px 10px; border-radius: 18px; }
  .guide__bubble::before, .guide__bubble::after {
    top: 22px; left: auto;
    border: 9px solid transparent;
    border-left: 0;
  }
  .guide__bubble::before { left: -13px; border-right: 13px solid var(--ink); border-top-width: 11px; border-bottom-width: 11px; margin: -2px 0 0; }
  .guide__bubble::after { left: -8.5px; border-right: 10px solid var(--card); }
  .guide__steps li { font-size: 15px; }
  .guide__steps strong { font-size: 16px; }
  .guide__foot { margin-top: 10px; }
  .guide[data-guide-step="done"] .guide__npc { grid-template-columns: 84px 1fr; align-items: center; }
  .guide[data-guide-step="done"] .guide__avatar { width: 84px; margin: 0; }
  .guide[data-guide-step="done"] .guide__sleep { width: 84px; }
  .guide[data-guide-step="done"] .guide__bubble::before,
  .guide[data-guide-step="done"] .guide__bubble::after { left: -13px; }
  .guide[data-guide-step="done"] .guide__bubble::after { left: -8.5px; }
  .guide[data-guide-step="done"] .guide__bubble::before { border-bottom-color: transparent; border-right-color: var(--line-strong); }
  .guide[data-guide-status="parked"] { display: none; }
  .guide-peek { left: auto; right: 14px; width: 56px; transform: translateY(40%); }
  /* Room for the parked peek only while it's actually there. */
  body:has(.guide-peek:not([hidden])) .app-main { padding-bottom: 104px; }
  .guide-peek img { transform: scaleX(-1); }       /* faces into the page */
  .guide-peek__tip { left: auto; right: 66px; border-radius: 999px 999px 4px 999px; }
}

/* ---- Sign-in: the doorway (signin.html only) ------------------------------
   A second hero: the waving alpaca, the whole journey in one line, one big
   button. Every rule is scoped to body.signin, so index.html (.landing) and
   account.html never match. Phones get their own < 620px block below; motion
   is CSS-only, behind prefers-reduced-motion, and ends on the static layout. */
.signin { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.signin .si-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: clamp(24px, 3vw, 40px) clamp(56px, 6vw, 88px);
}

/* The waving alpaca on an ink ground line. */
.signin .si-art {
  position: relative;
  width: clamp(150px, 15vw, 196px);
  margin: 0 0 36px;
  padding-bottom: 4px;
}
.signin .si-art__alpaca { position: relative; width: 100%; transform-origin: 40% 100%; }
.signin .si-art__ground {
  position: absolute;
  left: -45%;
  bottom: 0;
  width: 190%;
  max-width: none;
  height: 12px;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.signin .si-art__wave {
  position: absolute;
  top: 14%;
  right: -24%;
  width: 26%;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.2;
  stroke-linecap: round;
}

/* One breath: resume -> applications submitted. The end of the journey
   gets a hand-drawn ink underline. */
.signin .si-title {
  max-width: 11em;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.signin .si-title__end { position: relative; display: inline-block; }
.signin .si-title__ink {
  position: absolute;
  left: 0;
  bottom: -0.1em;
  width: 100%;
  height: 0.16em;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.signin .si-lead {
  max-width: 35em;
  margin-top: 30px;
  color: var(--grey);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  text-wrap: balance;
}

/* The one action. Bigger than .btn--lg: the mark in a paper disc (as on the
   account page's "Start in Meta Muse"), the words, an ink arrow. */
.signin .si-action { display: grid; justify-items: center; gap: 16px; margin-top: 48px; }
.signin .si-btn {
  height: 76px;
  min-width: 340px;
  padding: 0 32px 0 13px;
  gap: 18px;
  justify-content: space-between;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.signin .si-btn:hover { box-shadow: 0 16px 30px -16px rgba(17, 17, 17, 0.6); }
.signin .si-btn__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--card);
}
.signin .si-btn__mark img { width: 24px; }
.signin .si-btn__label { flex: 1; text-align: left; }
.signin .si-btn__arrow {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease-paper);
}
.signin .si-btn:hover .si-btn__arrow { transform: translateX(5px); }
.signin .si-action__hint { font-size: 14px; color: var(--grey); }

.signin .si-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 30px;
  border-top: 1px solid var(--line);
}
.signin .si-foot__tag { font-size: 14px; font-weight: 600; color: var(--grey); }

/* v3 — A whisper of a timeline under the subline: the founder's line, then
   four small stations on one hand-drawn line. "Review and approve" is the
   filled dot (the gate); the last station carries a check. Quiet by design:
   small grey type, a grey line, ink only on the dots. */
.signin .si-time { width: min(640px, 100%); margin-top: 38px; }
.signin .si-time__cap {
  margin-bottom: 20px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: 0.005em;
  color: var(--ink-2);
}
.signin .si-time__track { position: relative; }
.signin .si-time__line {
  position: absolute;
  top: 5px;
  left: 12.5%;
  width: 75%;
  height: 8px;
  overflow: visible;
  fill: none;
  stroke: var(--grey-2);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.signin .si-time__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.signin .si-time__steps li {
  position: relative;
  padding: 26px 4px 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--grey);
  text-wrap: balance;
}
.signin .si-time__steps li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}
.signin .si-time__steps .is-gate { color: var(--ink); font-weight: 650; }
.signin .si-time__steps .is-gate::before { background: var(--ink); }
.signin .si-time__steps .is-end { color: var(--ink-2); font-weight: 600; }
.signin .si-time__steps .is-end::before { top: -1px; width: 20px; height: 20px; margin-left: -10px; }
.signin .si-time__steps .is-end::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2.5px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* v3 — Demo teaser. A native <details> under the button: the summary is a
   paper pill with an ink play disc (the outlined sibling of the ink button),
   and opening it unfolds a paper stage holding the portrait player. The
   player is the landing's .film component; FILM SWAP is one attribute on
   <figure data-film> in signin.html (CODEX WIRING item 6 in main.js). */
.signin .si-demo { width: min(600px, 100%); margin-top: 40px; }
.signin .si-demo__trigger {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-width: 340px;
  height: 62px;
  padding: 0 26px 0 10px;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: transform 0.25s var(--ease-paper), box-shadow 0.25s var(--ease-paper);
}
.signin .si-demo__trigger::-webkit-details-marker { display: none; }
.signin .si-demo__trigger:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(17, 17, 17, 0.55); }
.signin .si-demo__trigger:active { transform: translateY(0); box-shadow: none; transition-duration: 0.08s; }
.signin .si-demo__trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.signin .si-demo__disc {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
}
.signin .si-demo__disc svg { width: 17px; fill: var(--paper); transform: translateX(1.5px); }
.signin .si-demo__label { flex: 1; text-align: left; }
.signin .si-demo__close { display: none; }
.signin .si-demo[open] .si-demo__open { display: none; }
.signin .si-demo[open] .si-demo__close { display: inline; }
.signin .si-demo__chev {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s var(--ease-paper);
}
.signin .si-demo[open] .si-demo__chev { transform: rotate(180deg); }

.signin .si-demo__stage {
  display: grid;
  justify-items: center;
  gap: 26px;
  margin-top: 24px;
  padding: 52px 28px 40px;
  background: var(--paper-2);
  border-radius: 34px;
  transform-origin: 50% 0;
}
.signin .si-film { width: 262px; }
.signin .si-demo__note { max-width: 32ch; font-size: 14.5px; line-height: 1.5; color: var(--grey); text-wrap: balance; }

/* Phones (< 620px, the same line as the landing's 10b pass). v3: spacing
   first. Every block gets its own air (the page may run past one screen;
   calm beats compact). The button and the demo trigger fill the width. */
@media (max-width: 619px) {
  .signin .nav__inner { height: 58px; }
  .signin .si-hero { justify-content: flex-start; padding-block: 40px 72px; }
  .signin .si-art { width: 132px; margin-bottom: 40px; }
  .signin .si-art__ground { left: -70%; width: 240%; }
  .signin .si-title { font-size: 2.45rem; line-height: 1.06; }
  .signin .si-lead { max-width: 29ch; margin-top: 26px; font-size: 1.04rem; line-height: 1.6; }

  .signin .si-time { display: none; }
  .signin .si-time__cap span { display: block; }
  .signin .si-time__steps { gap: 6px; }
  .signin .si-time__steps li { padding: 26px 0 0; font-size: 12px; line-height: 1.4; }

  .signin .si-action { align-self: stretch; margin-top: 32px; gap: 16px; }
  .signin .si-btn { width: 100%; min-width: 0; height: 66px; padding-left: 9px; font-size: 19px; }
  .signin .si-btn__mark { width: 48px; height: 48px; }
  .signin .si-action__hint { max-width: 28ch; font-size: 13.5px; line-height: 1.5; }

  .signin .si-demo { margin-top: 36px; }
  .signin .si-demo__trigger { display: flex; width: 100%; min-width: 0; height: 58px; padding: 0 22px 0 8px; font-size: 17px; }
  .signin .si-demo__stage { gap: 22px; margin-top: 18px; padding: 40px 18px 32px; border-radius: 28px; }
  .signin .si-film { width: 218px; }
  .signin .si-film .film__placeholder { gap: 8px; padding-inline: 8%; }
  .signin .si-film .film__chip { padding: 3px 9px; font-size: 9.5px; letter-spacing: 0.1em; }
  .signin .si-film .film__title { font-size: 15px; }
  .signin .si-film .film__text { font-size: 12.5px; }
  .signin .si-film .film__play { width: 52px; height: 52px; }
  .signin .si-film .film__play svg { width: 22px; }
  .signin .si-demo__note { font-size: 14px; }

  .signin .si-foot { flex-direction: column; gap: 8px; padding: 28px 0 36px; }
}

/* Motion: paper settles in, ink draws, the alpaca waves once. */
@media (prefers-reduced-motion: no-preference) {
  .signin .si-in { animation: si-settle 0.8s var(--ease-paper) var(--d, 0ms) both; }
  @keyframes si-settle { from { opacity: 0; transform: translateY(14px); } }

  .signin .si-art__ground path,
  .signin .si-art__wave path,
  .signin .si-title__ink path { stroke-dasharray: 1 2; animation: si-draw 0.9s var(--ease-ink) both; }
  .signin .si-art__ground path { animation-delay: 0.2s; }
  .signin .si-title__ink path { animation-duration: 0.8s; animation-delay: 0.75s; }
  .signin .si-art__wave path:nth-child(1) { animation-delay: 1s; }
  .signin .si-art__wave path:nth-child(2) { animation-delay: 1.1s; }
  .signin .si-art__wave path:nth-child(3) { animation-delay: 1.2s; }
  /* 1 2 + 1.01: nothing (not even a round-cap dot) shows before the draw. */
  @keyframes si-draw { from { stroke-dashoffset: 1.01; } to { stroke-dashoffset: 0; } }

  /* v3 timeline: the line draws left to right, each station inks in as the
     line reaches it. */
  .signin .si-time__line path { stroke-dasharray: 1 2; animation: si-draw 1.3s var(--ease-ink) 0.7s both; }
  .signin .si-time__steps li::before,
  .signin .si-time__steps li::after { animation: si-dot 0.45s var(--ease-flap) var(--dot-d, 0.7s) both; }
  .signin .si-time__steps li:nth-child(2) { --dot-d: 1.05s; }
  .signin .si-time__steps li:nth-child(3) { --dot-d: 1.4s; }
  .signin .si-time__steps li:nth-child(4) { --dot-d: 1.8s; }
  .signin .si-time__steps .is-end::after { animation-name: si-tick; animation-delay: 2.05s; }
  @keyframes si-dot { from { opacity: 0; scale: 0.3; } }
  @keyframes si-tick { from { opacity: 0; scale: 0.4; } }

  /* v3 demo teaser: the fold opens (height eases where ::details-content is
     supported), the paper stage drops and settles, then the phone frame is
     drawn in ink, its paper fills, and the screen comes up last. Replays on
     every open because [open] re-applies the animations. */
  .signin { interpolate-size: allow-keywords; }
  .signin .si-demo::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.7s var(--ease-paper), content-visibility 0.7s allow-discrete;
  }
  .signin .si-demo[open]::details-content { height: auto; }
  .signin .si-demo[open] .si-demo__stage { animation: si-unfold 0.8s var(--ease-paper) both; }
  @keyframes si-unfold {
    from { opacity: 0; transform: perspective(1400px) translateY(-14px) rotateX(-28deg) scaleY(0.94); }
    60% { opacity: 1; }
  }
  .signin .si-demo[open] .film__frame rect,
  .signin .si-demo[open] .film__frame path { stroke-dasharray: 1 2; animation: si-draw 1.3s var(--ease-ink) 0.3s both; }
  .signin .si-demo[open] .film__frame rect { animation: si-draw 1.3s var(--ease-ink) 0.3s both, si-fill 0.6s ease 1.15s both; }
  .signin .si-demo[open] .film__frame path { animation-delay: 1.2s; animation-duration: 0.5s; }
  @keyframes si-fill { from { fill-opacity: 0; } }
  .signin .si-demo[open] .film__screen { animation: si-settle 0.7s var(--ease-paper) 1.25s both; }
  .signin .si-demo[open] .si-demo__note { animation: si-settle 0.7s var(--ease-paper) 1.5s both; }

  .signin .si-art__alpaca { animation: si-wave 1.1s cubic-bezier(0.45, 0, 0.3, 1) 0.95s both; }
  @keyframes si-wave {
    0%, 100% { transform: none; }
    30% { transform: translateY(-8px) rotate(-3deg); }
    60% { transform: translateY(0) rotate(1.5deg); }
  }
}

/* ---- Signed-in motion (same gate as section 11) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Idle: a slow, occasional head tilt. Calm; never a loop you notice. */
  .guide:not([data-guide-step="done"]) .guide__head { animation: guide-idle 7s ease-in-out 2s infinite; }
  @keyframes guide-idle {
    0%, 78%, 100% { transform: none; }
    86% { transform: rotate(-4deg); }
    93% { transform: rotate(1deg); }
  }
  .guide__bubble.is-talking { animation: bubble-pop 0.42s var(--ease-flap); }
  @keyframes bubble-pop { 0% { transform: scale(0.96); } 100% { transform: none; } }

  /* Step complete: a hop, a burst of ink, the dot fills. */
  .guide.is-cheering .guide__head { animation: guide-hop 0.6s cubic-bezier(0.3, 0, 0.3, 1); }
  @keyframes guide-hop {
    0%, 100% { transform: none; }
    35% { transform: translateY(-14px) rotate(-5deg); }
    65% { transform: translateY(0) rotate(2deg); }
  }
  .guide.is-cheering .guide__sparks { animation: sparks 0.7s var(--ease-paper) 0.1s both; }
  @keyframes sparks {
    0% { opacity: 0; transform: scale(0.5); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: scale(1.15); }
  }
  .guide__dots i.is-done { animation: dot-fill 0.45s var(--ease-flap); }
  @keyframes dot-fill { 0% { transform: scale(0.6); } 100% { transform: none; } }

  /* Entrance: the guide pops in once the page has settled. */
  .js:not(.reveal-all) .guide__npc { opacity: 0; translate: -10px 0; transition: opacity 0.6s var(--ease-paper) 0.5s, translate 0.8s var(--ease-paper) 0.5s, top 0.8s cubic-bezier(0.45, 0, 0.2, 1); }
  .js:not(.reveal-all) .guide.is-in .guide__npc { opacity: 1; translate: 0 0; }
  .guide-peek:not([hidden]) { animation: peek-up 0.6s var(--ease-flap) both; }
  @keyframes peek-up { from { transform: translateY(100%); } }

  /* Regenerated code: each tile flips over to its new letter, left to right. */
  .code__tile.is-flipping { animation: tile-flip 0.44s cubic-bezier(0.5, 0, 0.3, 1) var(--i, 0ms) both; }
  @keyframes tile-flip {
    0% { transform: perspective(200px) rotateX(0); }
    50% { transform: perspective(200px) rotateX(-90deg); }
    100% { transform: perspective(200px) rotateX(0); }
  }
  /* Loading: blank tiles breathe, one after another. */
  [data-code-state="loading"] .code__tiles--blank .code__tile { animation: tile-wait 1.6s ease-in-out infinite; }
  .code__tiles--blank .code__tile:nth-child(2) { animation-delay: 0.1s !important; }
  .code__tiles--blank .code__tile:nth-child(3) { animation-delay: 0.2s !important; }
  .code__tiles--blank .code__tile:nth-child(4) { animation-delay: 0.3s !important; }
  .code__tiles--blank .code__tile:nth-child(6) { animation-delay: 0.4s !important; }
  .code__tiles--blank .code__tile:nth-child(7) { animation-delay: 0.5s !important; }
  .code__tiles--blank .code__tile:nth-child(8) { animation-delay: 0.6s !important; }
  .code__tiles--blank .code__tile:nth-child(9) { animation-delay: 0.7s !important; }
  @keyframes tile-wait { 0%, 100% { background: var(--paper); } 50% { background: var(--skel); } }

  .confirm:not([hidden]) { animation: unfold 0.4s var(--ease-paper); }
  @keyframes unfold { from { opacity: 0; transform: translateY(-6px); } }
}

/* ---- Login: the door (login.html only) -------------------------------------
   The styled face of Clerk. body is "signin login": it inherits the doorway's
   alpaca, ink underline, footer and settle-in motion; every rule here is
   scoped to .login so signin.html, index.html and account.html never match.
   One paper card, one job per step (email, then code). Errors are text + an
   icon + a red edge, never colour alone. */
.login {
  --err: #B3261E;          /* 6.5:1 on --card; the one colour outside ink/grey */
  --err-wash: #FCF4F2;
}
.login .lg-hero { padding-block: clamp(24px, 3vw, 40px) clamp(48px, 5vw, 72px); }

.login .lg-art { width: clamp(118px, 10vw, 138px); margin-bottom: 30px; }
.login .lg-art__mail { display: none; width: 100%; }
.login [data-login-step="code"] .lg-art { width: clamp(168px, 14vw, 196px); }
.login [data-login-step="code"] .lg-art__hello,
.login [data-login-step="code"] .si-art__wave { display: none; }
.login [data-login-step="code"] .lg-art__mail { display: block; }
.login [data-login-step="code"] .si-art__ground { left: -22%; width: 144%; }

.login .lg-title { font-size: clamp(2.6rem, 4.6vw, 3.9rem); line-height: 1; }
.login .lg-lead { margin-top: 20px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); }

/* The card: a sheet of paper, left-aligned inside a centred page. */
.login .lg-card {
  width: min(452px, 100%);
  margin-top: 40px;
  padding: 30px 30px 28px;
  border-radius: var(--radius-lg);
  text-align: left;
}
.login .lg-card__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.login .lg-card__text { margin: 8px 0 22px; color: var(--grey); font-size: 15px; line-height: 1.55; }
.login .lg-card__text strong { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }

/* SSO: the outlined sibling of the ink button, full width. */
.login .lg-sso { display: grid; gap: 10px; }
.login .lg-sso__btn { position: relative; width: 100%; height: 56px; padding: 0 20px; font-size: 16px; }
.login .lg-sso__logo { width: 20px; height: 20px; flex: none; }

.login .lg-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 20px;
  color: var(--grey);
  font-size: 13px;
  font-weight: 550;
}
.login .lg-or::before,
.login .lg-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Field */
.login .lg-form { display: grid; gap: 16px; }
.login .lg-field { display: grid; gap: 8px; }
.login .lg-field__label { font-size: 14px; font-weight: 650; }
.login .lg-field__input {
  width: 100%;
  height: 58px;
  padding: 0 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.login .lg-field__input::placeholder { color: #A3A098; opacity: 1; }
.login .lg-field__input:hover { border-color: var(--grey); }
/* Focus: the ink outline weight of the drawings, drawn inside (no reflow). */
.login .lg-field__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.login .lg-field__input--code {
  height: 66px;
  padding: 0 0 0 0.5em;              /* balances the trailing letter-spacing */
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5em;
  text-align: center;
}
.login .lg-field__input--code::placeholder { letter-spacing: 0.5em; }

.login .lg-field.is-invalid .lg-field__input { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.login .lg-field__error {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: var(--err);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.45;
}
.login .lg-field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* Form-level alert (network / Clerk trouble, not a field). */
.login .lg-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 13px 16px;
  border: 1.5px solid color-mix(in srgb, var(--err) 35%, var(--card));
  border-radius: 14px;
  background: var(--err-wash);
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.45;
}
.login .lg-alert[hidden],
.login .lg-field__error[hidden] { display: none; }
.login .lg-alert__icon {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.5px;
  fill: none;
  stroke: var(--err);
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* The go button: the doorway's big ink button, sized for a card. */
.login .lg-go {
  position: relative;
  width: 100%;
  height: 64px;
  padding: 0 24px 0 8px;
  gap: 16px;
  justify-content: space-between;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.login .lg-go:hover { box-shadow: 0 14px 26px -16px rgba(17, 17, 17, 0.6); }
.login .lg-go:hover .lg-go__arrow { transform: translateX(5px); }
.login .lg-go__mark { width: 48px; height: 48px; }
.login .lg-go__mark img { width: 22px; }
.login .lg-go__label { flex: 1; text-align: left; }
.login .lg-go__arrow { width: 24px; height: 24px; }
.login .lg-go__label--busy { display: none; }

/* Busy: label swaps, a pen-stroke ring turns where the arrow was, the rest
   of the card is locked and quiet. Same size throughout: nothing jumps. */
.login .lg-spin {
  display: none;
  width: 22px;
  height: 22px;
  flex: none;
  border: 2.4px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.login button.is-busy .lg-spin { display: block; }
.login .lg-go.is-busy .lg-go__arrow,
.login .lg-go.is-busy .lg-go__label:not(.lg-go__label--busy) { display: none; }
.login .lg-go.is-busy .lg-go__label--busy { display: block; }
.login .lg-sso__btn .lg-spin { position: absolute; right: 20px; top: calc(50% - 11px); }
.login .lg-card button:disabled { cursor: progress; transform: none; }
.login .lg-go:disabled { box-shadow: none; }
.login .lg-card :is(button, input):disabled:not(.is-busy) { opacity: 0.5; }
.login .lg-sso__btn.is-busy { border-color: var(--ink); }

.login .lg-code-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 18px;
}
.login [data-login-resend][data-cooling] { color: var(--grey); cursor: default; border-color: transparent; font-variant-numeric: tabular-nums; }

.login .lg-noscript {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  color: var(--ink-2);
  font-size: 14px;
  text-align: center;
}
.login .lg-hint { max-width: 36ch; margin-top: 22px; color: var(--grey); font-size: 14px; line-height: 1.5; text-wrap: balance; }

/* Path B: Clerk's prebuilt <SignIn/> sits flush inside the paper card. */
.login .lg-clerk__root,
.login .lg-clerk__card { width: 100%; box-shadow: none; border: 0; background: transparent; padding: 0; }
.login .lg-clerk__primary { min-height: 56px; border-radius: 999px; font-weight: 700; text-transform: none; }
.login .lg-clerk__social { min-height: 56px; border-radius: 999px; }
.login .lg-clerk__input { min-height: 56px; border-radius: 16px; }

/* Phones (< 620px, the same line as the sign-in and landing phone passes). */
@media (max-width: 619px) {
  .login .lg-hero { padding-block: 36px 64px; }
  .login .lg-art { width: 112px; margin-bottom: 34px; }
  .login [data-login-step="code"] .lg-art { width: 164px; }
  .login .lg-title { font-size: 2.45rem; line-height: 1.06; }
  .login .lg-lead { max-width: 26ch; margin-top: 18px; font-size: 1.04rem; line-height: 1.6; }
  .login .lg-card { margin-top: 36px; padding: 24px 20px 22px; border-radius: 24px; }
  .login .lg-go { height: 62px; font-size: 18px; }
  .login .lg-go__mark { width: 46px; height: 46px; }
  .login .lg-hint { max-width: 30ch; margin-top: 26px; font-size: 13.5px; }
  .login .app-nav .link-quiet--sm { font-size: 13.5px; }
}

/* Motion: the doorway's settle-in (inherited), plus a turning ring, a
   step that settles in when it swaps, and a short shake on a form alert. */
@media (prefers-reduced-motion: no-preference) {
  .login button.is-busy .lg-spin { animation: lg-spin 0.8s linear infinite; }
  @keyframes lg-spin { to { transform: rotate(1turn); } }
  .login .lg-step:not([hidden]) { animation: si-settle 0.5s var(--ease-paper) both; }
  .login [data-login-step="code"] .lg-art__mail { animation: si-settle 0.7s var(--ease-paper) both; }
  .login .lg-field.is-invalid .lg-field__error { animation: lg-nudge 0.35s var(--ease-paper) both; }
  @keyframes lg-nudge { from { opacity: 0; transform: translateY(-4px); } }
  .login .lg-alert.is-shaking { animation: lg-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
  @keyframes lg-shake {
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
  }
}

/* ---- Alpaca sprites (sprite.js; film library strips) -----------------------
   A .sprite-host holds the still frame (always in the markup: no JS, reduced
   motion and a failed sheet all show it). Once the sheet has decoded,
   sprite.js lays a .sprite exactly over the still and hides it. The sheet is
   a cols x rows grid: the <img> steps across a row while its wrapper steps
   down the rows, so one CSS animation pair plays every frame in order. */
.sprite-host { position: relative; display: block; }
.sprite-host > [data-sprite-still] { display: block; width: 100%; height: auto; }
.sprite-host.is-live > [data-sprite-still] { visibility: hidden; }
.sprite { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sprite__y { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--rows) * 100%); }
.sprite__sheet {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--cols) * 100%);
  max-width: none;
  height: 100%;
}
.sprite.is-loop .sprite__y { animation: sprite-y var(--dur) steps(var(--rows)) infinite; }
.sprite.is-loop .sprite__sheet { animation: sprite-x calc(var(--dur) / var(--rows)) steps(var(--cols)) infinite; }
.sprite.is-once .sprite__y { animation: sprite-y var(--dur) steps(var(--rows)) 1; }
.sprite.is-once .sprite__sheet { animation: sprite-x calc(var(--dur) / var(--rows)) steps(var(--cols)) var(--rows); }
/* Held on the last frame (cheer lands and stays down until it curls up). */
.sprite.is-held .sprite__y { animation: none; transform: translateY(calc(-100% * (var(--rows) - 1) / var(--rows))); }
.sprite.is-held .sprite__sheet { animation: none; transform: translateX(calc(-100% * (var(--cols) - 1) / var(--cols))); }
@keyframes sprite-y { to { transform: translateY(-100%); } }
@keyframes sprite-x { to { transform: translateX(-100%); } }
/* Motion turned off mid-visit: back to the still, instantly. */
@media (prefers-reduced-motion: reduce) {
  .sprite { display: none; }
  .sprite-host.is-live > [data-sprite-still] { visibility: visible; }
}

/* Sign-in + login: the sprite's greet is the wave now, so the old CSS
   bob on the whole drawing retires (it would double the hop). */
.signin .si-art__alpaca.sprite-host { animation: none; }
/* The greet frame is taller than the old hop drawing (it keeps headroom for
   the hop); a touch narrower keeps the button above the fold at 1440x900. */
@media (min-width: 620px) {
  .signin:not(.login) .si-art { width: clamp(136px, 12.5vw, 172px); margin-bottom: 32px; }
}

/* Account guide. Face = idle loop over its still. Finishing the guide: the
   cheer plays once over the spot where the sleeping alpaca will lie, bottom-
   aligned (it rears up above the box), then the sleeper takes over. */
.guide__face { transform-origin: 40% 95%; }
.guide[data-guide-step="done"] .guide__face { display: none; }
.guide__cheer { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 260 / 319; display: none; }
.guide.is-celebrating .guide__cheer { display: block; }
.guide.is-celebrating .guide__sleep { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  /* The sprite already breathes and tilts; the CSS tilt is for the still. */
  .guide__face.is-live .guide__head { animation: none; }
  .guide.is-cheering .guide__face { animation: guide-hop 0.6s cubic-bezier(0.3, 0, 0.3, 1); }
  .guide[data-guide-step="done"]:not(.is-celebrating) .guide__sleep { animation: si-settle 0.6s var(--ease-paper) both; }
}

/* Login greeter: the waving alpaca and its one line, as a speech bubble in
   the guide's language (card paper, ink outline, a tail to the alpaca). */
.login .lg-greet {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  margin: 0 0 30px;
  padding-right: 12px;               /* optically centres alpaca + bubble */
}
.login .lg-greet .lg-art { flex: none; width: clamp(124px, 10.5vw, 146px); margin: 0; }
.login .lg-say {
  position: relative;
  max-width: 15.5em;
  margin-top: 18px;
  padding: 14px 18px 13px;
  background: var(--card);
  border: var(--stroke) solid var(--ink);
  border-radius: 22px 22px 22px 8px;
  box-shadow: 0 22px 40px -30px rgba(17, 17, 17, 0.4);
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-align: left;
  text-wrap: balance;
  transform-origin: 0 70%;
}
.login .lg-say::before,
.login .lg-say::after {
  content: "";
  position: absolute;
  top: 26px;
  width: 0;
  height: 0;
  border: solid transparent;
  border-left: 0;
}
.login .lg-say::before { left: -14px; border-width: 11px 14px 11px 0; border-right-color: var(--ink); }
.login .lg-say::after { left: -9px; margin-top: 3px; border-width: 8px 10px 8px 0; border-right-color: var(--card); }
.login [data-login-step="code"] .lg-say { display: none; }
.login [data-login-step="code"] .lg-greet { padding-right: 0; }
.login [data-login-step="code"] .lg-greet .lg-art { width: clamp(168px, 14vw, 196px); }

@media (max-width: 619px) {
  .login .lg-greet { gap: 14px; margin-bottom: 30px; padding-right: 0; }
  .login .lg-greet .lg-art { width: 104px; }
  .login .lg-say { max-width: 12em; margin-top: 6px; padding: 12px 15px 11px; font-size: 15px; border-radius: 20px 20px 20px 7px; }
  .login .lg-say::before { top: 22px; }
  .login .lg-say::after { top: 22px; }
  .login [data-login-step="code"] .lg-greet .lg-art { width: 164px; }
  .login .lg-greet .si-art__ground { left: -24%; width: 148%; }   /* stays on screen beside the bubble */
}

@media (prefers-reduced-motion: no-preference) {
  /* The bubble pops out of the alpaca once it has hopped into view. */
  .login .lg-say { animation: lg-say 0.55s var(--ease-flap) 0.55s both; }
  @keyframes lg-say { from { opacity: 0; transform: translateX(-10px) scale(0.86); } }

  /* Email <-> code: the new step slides in from the side it belongs to
     (login.js sets data-login-dir; the card eases its height meanwhile). */
  .login [data-login-dir="fwd"] .lg-step:not([hidden]) { animation: lg-from-r 0.46s var(--ease-paper) both; }
  .login [data-login-dir="back"] .lg-step:not([hidden]) { animation: lg-from-l 0.46s var(--ease-paper) both; }
  @keyframes lg-from-r { from { opacity: 0; transform: translateX(28px); } }
  @keyframes lg-from-l { from { opacity: 0; transform: translateX(-28px); } }
}

/* ---- Login push (signin.html, every width) ---------------------------------
   The CTA reads "Login to apply"; under it, the reason in ink, then the
   new-visitor reassurance in grey. */
.signin .si-action__hint span { display: block; text-wrap: balance; }
.signin .si-action__push { margin-bottom: 2px; color: var(--ink); font-size: 15px; font-weight: 650; letter-spacing: -0.005em; }
.signin .si-demo__head { display: none; }   /* desktop only, below */

/* ==========================================================================
   14. One screen on desktop (signin.html, login.html, account.html)
   From 900px wide (laptops and up) each page is exactly one viewport: the
   body is a 100dvh column, the main area takes what the nav and foot leave,
   and every vertical size is tied to the viewport height (dvh) as well as
   its width, so 1440x900 and shorter laptop screens (1366x768, 1280x800)
   fit without a scrollbar. Nothing is clipped: the page is never
   overflow: hidden, so a screen too short to fit (under ~680px) simply
   scrolls. Phones and tablets (< 900px) never match: their layouts are
   exactly as they were.
   ========================================================================== */
@media (min-width: 900px) {

  /* ---- Sign-in: a narrow copy column left, the demo stage right ----
     The demo earns most of the width: the page container widens (up to
     1480px), the copy column is capped at clamp(380px, 32vw, 500px) and the
     film takes the rest. The film is also capped by the viewport height
     (.si-film below), so short laptop screens still fit. */
  .signin:not(.login) { height: 100dvh; min-height: 100dvh; }
  .signin:not(.login) .container { width: min(1480px, 100% - 2 * var(--gutter)); }
  .signin:not(.login) .nav__inner { height: clamp(50px, 6.4dvh, 62px); }
  .signin:not(.login) .si-hero {
    display: grid;
    grid-template-columns: minmax(0, clamp(380px, 32vw, 500px)) minmax(0, 1fr);
    align-items: center;
    align-content: center;
    column-gap: clamp(32px, 3.6vw, 64px);
    min-height: 0;
    padding-block: clamp(6px, 1.4dvh, 18px);
    text-align: left;
  }
  .signin:not(.login) .si-hero > :not(.si-demo) { grid-column: 1; justify-self: start; }
  .signin:not(.login) .si-art {
    width: clamp(70px, 10.4dvh, 104px);
    margin: 0 0 clamp(8px, 1.8dvh, 18px) clamp(20px, 3.4dvh, 34px);
  }
  .signin:not(.login) .si-art__ground { left: -24%; width: 230%; }
  .signin:not(.login) .si-title {
    max-width: 10.5em;
    font-size: clamp(2.2rem, min(3.4vw, 5.9dvh), 3.4rem);
    line-height: 0.98;
  }
  .signin:not(.login) .si-lead {
    max-width: 31em;
    margin-top: clamp(8px, 1.8dvh, 18px);
    font-size: clamp(0.96rem, min(1.2vw, 2dvh), 1.08rem);
    text-wrap: pretty;
  }
  .signin:not(.login) .si-time { width: 100%; margin-top: clamp(12px, 2.4dvh, 24px); }
  .signin:not(.login) .si-time__cap { margin-bottom: clamp(8px, 1.5dvh, 14px); }
  .signin:not(.login) .si-time__steps li { padding-top: 24px; font-size: 12.5px; line-height: 1.35; }
  .signin:not(.login) .si-action {
    justify-items: start;
    gap: clamp(8px, 1.4dvh, 14px);
    margin-top: clamp(12px, 2.6dvh, 26px);
  }
  .signin:not(.login) .si-btn { height: clamp(56px, 7.2dvh, 68px); min-width: 320px; }
  .signin:not(.login) .si-btn__mark { width: clamp(44px, 5.8dvh, 50px); height: clamp(44px, 5.8dvh, 50px); }
  .signin:not(.login) .si-action__hint { padding-left: 4px; line-height: 1.45; }

  /* The demo stage: the <details> summary steps aside and the stage is
     always shown (::details-content, so it holds with JS off too). Its head
     is the "Watch the demo" pill; the phone becomes a window for the
     landscape cut. Tight paddings so the film, not the paper, takes the
     room. */
  .signin:not(.login) .si-demo {
    grid-column: 2;
    grid-row: 1 / span 5;
    width: 100%;
    margin: 0;
  }
  .signin:not(.login) .si-demo > .si-demo__trigger { display: none; }
  .signin:not(.login) .si-demo::details-content { content-visibility: visible; height: auto; overflow: visible; }
  .signin:not(.login) .si-demo__stage {
    justify-items: stretch;
    gap: clamp(10px, 1.6dvh, 16px);
    margin: 0;
    padding: clamp(14px, 2.2dvh, 22px);
    border-radius: 30px;
    animation: none;
  }
  .signin:not(.login) .si-demo__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .signin:not(.login) .si-demo__start {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    height: clamp(44px, 5.6dvh, 52px);
    padding: 0 22px 0 6px;
    border: var(--stroke) solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.25s var(--ease-paper), box-shadow 0.25s var(--ease-paper);
  }
  .signin:not(.login) .si-demo__start .si-demo__disc { width: clamp(34px, 4.6dvh, 40px); height: clamp(34px, 4.6dvh, 40px); }
  .signin:not(.login) .si-demo__start:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(17, 17, 17, 0.55); }
  .signin:not(.login) .si-demo__start:disabled { cursor: default; }
  .signin:not(.login) .si-demo__start:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .signin:not(.login) .si-demo__len { font-size: 13px; font-weight: 600; color: var(--grey); text-align: right; }

  /* As wide as the column, and never taller than the screen allows: the
     16:9 screen's height is the viewport minus the nav, foot, stage head,
     caption and paddings (about 340px), so 1280x720 still fits. */
  .signin:not(.login) .si-film { justify-self: center; width: min(100%, calc((100dvh - 340px) * 16 / 9 + 18px)); }
  .signin:not(.login) .si-film .film__device {
    aspect-ratio: auto;
    padding: 30px 9px 9px;
    border: var(--stroke) solid var(--ink);
    border-radius: 20px;
    background: var(--card);
    filter: drop-shadow(0 18px 22px rgba(17, 17, 17, 0.08));
  }
  .signin:not(.login) .si-film .film__device::before {       /* window dots */
    content: "";
    position: absolute;
    top: 11px;
    left: 15px;
    width: 40px;
    height: 9px;
    background:
      radial-gradient(circle at 4.5px 50%, var(--ink) 3.2px, transparent 3.7px),
      radial-gradient(circle at 20px 50%, transparent 2.2px, var(--ink) 2.4px, var(--ink) 3.4px, transparent 3.8px),
      radial-gradient(circle at 35.5px 50%, transparent 2.2px, var(--ink) 2.4px, var(--ink) 3.4px, transparent 3.8px);
  }
  .signin:not(.login) .si-film .film__frame,
  .signin:not(.login) .si-film .film__island { display: none; }
  .signin:not(.login) .si-film .film__screen {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
  }
  .signin:not(.login) .si-film .film__placeholder {
    display: grid;
    grid-template-columns: auto auto;
    align-content: center;
    justify-content: center;
    align-items: center;
    column-gap: clamp(16px, 2.2vw, 28px);
    row-gap: 6px;
    padding: 6% 8%;
    text-align: left;
  }
  .signin:not(.login) .si-film .film__placeholder img { grid-row: 1 / span 4; width: clamp(110px, 22dvh, 210px); margin: 0; }
  .signin:not(.login) .si-film .film__chip { justify-self: start; }
  .signin:not(.login) .si-film .film__title { font-size: clamp(17px, 2.6dvh, 24px); }
  .signin:not(.login) .si-film .film__text { font-size: clamp(13.5px, 1.8dvh, 15.5px); }
  .signin:not(.login) .si-film .film__play { width: clamp(44px, 6dvh, 54px); height: clamp(44px, 6dvh, 54px); margin-top: 6px; }
  .signin:not(.login) .si-film .film__play svg { width: 22px; }
  .signin:not(.login) .si-film.has-film .film__placeholder { display: grid; grid-template-columns: auto; place-content: center; }
  .signin:not(.login) .si-film.is-playing .film__placeholder { display: none; }
  .signin:not(.login) .si-demo__note { max-width: none; font-size: 14px; line-height: 1.4; text-align: left; text-wrap: pretty; }

  .signin:not(.login) .si-foot { padding: clamp(8px, 1.5dvh, 14px) 0 clamp(10px, 1.8dvh, 18px); }

  /* ---- Login: the same single column, a tighter rhythm ----
     Every step (email, code, and their error states) fits: the greeter,
     title, lead, card and hint all scale with the viewport height. The card
     still eases its height between steps (login.js). */
  .login { min-height: 100dvh; }
  .login .preview-bar { padding-block: 6px; }
  .login .nav__inner { height: clamp(50px, 6.4dvh, 66px); }
  .login .lg-hero { padding-block: clamp(4px, 1.2dvh, 18px); }
  .login .lg-greet { margin-bottom: clamp(10px, 2dvh, 22px); }
  .login .lg-greet .lg-art { width: clamp(76px, 10.4dvh, 118px); }
  .login [data-login-step="code"] .lg-greet .lg-art { width: clamp(100px, 13.6dvh, 170px); }
  .login .lg-say { margin-top: clamp(6px, 1.4dvh, 14px); }
  .login .lg-title { font-size: clamp(2.2rem, min(4vw, 5.8dvh), 3.4rem); }
  .login .lg-lead { margin-top: clamp(8px, 1.6dvh, 16px); }
  .login .lg-card { width: min(484px, 100%); margin-top: clamp(12px, 2.6dvh, 26px); padding: clamp(18px, 2.8dvh, 26px) 28px clamp(18px, 2.6dvh, 24px); }
  .login .lg-sso__btn { height: clamp(46px, 5.8dvh, 52px); }
  .login .lg-or { margin: clamp(12px, 2dvh, 18px) 0 clamp(10px, 1.8dvh, 16px); }
  .login .lg-form { gap: clamp(10px, 1.6dvh, 14px); }
  .login .lg-field { gap: 6px; }
  .login .lg-field__input { height: clamp(46px, 6dvh, 54px); }
  .login .lg-field__input--code { height: clamp(52px, 6.8dvh, 62px); }
  .login .lg-go { height: clamp(52px, 6.6dvh, 60px); }
  .login .lg-go__mark { width: clamp(40px, 5.2dvh, 46px); height: clamp(40px, 5.2dvh, 46px); }
  .login .lg-card__text { margin: 6px 0 clamp(12px, 2dvh, 18px); }
  .login .lg-alert { margin-bottom: clamp(12px, 2dvh, 18px); padding-block: 10px; }
  .login .lg-code-actions { margin-top: clamp(10px, 1.8dvh, 16px); }
  .login .lg-hint { max-width: 60ch; margin-top: clamp(10px, 2dvh, 18px); }
  .login .si-foot { padding: clamp(8px, 1.4dvh, 16px) 0 clamp(10px, 1.8dvh, 20px); }
}
/* ---- Account: the guided install on one screen ----
   From 960px (where the guide stands in its own column) the page is one
   viewport: a tighter head, compact code card and handoff, a denser "What
   happens next", and the page foot tucked under it. The guide still shows
   one step at a time and walks down beside the card it is talking about. */
@media (min-width: 960px) {
  body.app:has(.app-main) { display: flex; flex-direction: column; min-height: 100dvh; }
  body.app:has(.app-main) .preview-bar { padding-block: 6px; }
  .app-nav[data-nav] .nav__inner { height: clamp(52px, 7dvh, 66px); }
  .app-main { flex: 1; display: grid; align-content: center; padding-block: clamp(8px, 2.2dvh, 28px) clamp(10px, 2.4dvh, 28px); }
  .app-col { gap: clamp(10px, 2dvh, 20px); }
  .app-head { gap: clamp(4px, 0.9dvh, 8px); margin-bottom: 0; }
  .app-head__title { font-size: clamp(2.2rem, min(4.6vw, 6.4dvh), 3.5rem); }
  .app-head__sub { max-width: 48ch; font-size: clamp(1rem, 2.1dvh, 1.15rem); }
  .code-card { padding: clamp(14px, 2.4dvh, 24px) clamp(20px, 2.4vw, 26px); }
  .code-card__body { margin: clamp(8px, 1.4dvh, 14px) 0 clamp(8px, 1.6dvh, 16px); }
  [data-code-state="loading"] .code-card__loading,
  [data-code-state="error"] .code-card__error { margin: clamp(8px, 1.4dvh, 14px) 0 clamp(8px, 1.6dvh, 16px); }
  .code__tile { font-size: clamp(26px, 4.2dvh, 36px); }
  [data-code-state="error"] .code-card__error { flex-wrap: nowrap; }
  [data-code-state="error"] .code-card__error .btn { flex: none; }
  /* "Get a new code?" drops from the code card as a note over the handoff
     (which waits for the answer anyway), so the page never grows. */
  .confirm {
    position: absolute;
    z-index: 6;
    top: calc(100% - 14px);
    left: clamp(20px, 2.4vw, 26px);
    right: clamp(20px, 2.4vw, 26px);
    margin: 0;
    padding: 16px 20px;
    box-shadow: 0 26px 44px -26px rgba(17, 17, 17, 0.5);
  }
  .confirm__actions { margin-top: 12px; }
  .handoff { gap: clamp(8px, 1.3dvh, 12px); padding: clamp(14px, 2.6dvh, 26px) clamp(20px, 2.6vw, 30px); }
  .btn--muse { height: clamp(56px, 7.6dvh, 70px); }
  .btn--muse__face { width: clamp(42px, 5.6dvh, 50px); height: clamp(42px, 5.6dvh, 50px); }
  /* "What happens next" reads across: three numbered steps on one ruled
     line, the gate step still in ink, the promise underneath. */
  .next { padding-top: 0; }
  .next__title { margin-bottom: clamp(4px, 1dvh, 10px); }
  .next__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; border-block: 1px solid var(--line-strong); }
  .next__steps li,
  .next__steps li:last-child { align-items: flex-start; gap: 10px; padding: clamp(8px, 1.4dvh, 12px) 0; border: 0; font-size: 15px; text-wrap: balance; }
  .next__n { width: 26px; height: 26px; margin-top: -2px; }
  .next__promise { margin-top: clamp(6px, 1.2dvh, 12px); }
  .app-foot { margin-top: 0; padding-top: clamp(8px, 1.6dvh, 16px); }
  .guide__avatar { width: clamp(72px, 10dvh, 96px); }
  .guide__head { width: 100%; }
}

/* Account on short laptop screens (under 820px tall): the code card's
   loading and error states get the same compact footprint as the code. */
@media (min-width: 960px) and (max-height: 820px) {
  .app-head__title { font-size: clamp(2.1rem, 5.4dvh, 3rem); }
  .app-nav[data-nav] .nav__inner { height: 50px; }
  [data-code-state="loading"] .code-card__loading { gap: 6px; }
  [data-code-state="loading"] .code__tile { font-size: 24px; }
  [data-code-state="loading"] .code-card__status { font-size: 14px; line-height: 1.3; }
  [data-code-state="error"] .code-card__error { padding: 10px 14px; }
  .code-card__foot { padding-top: 10px; }
  .handoff__how { font-size: 13.5px; }
  .handoff { padding-block: clamp(12px, 2.2dvh, 20px); }
  .app-col { gap: clamp(8px, 1.6dvh, 14px); }
}

/* Short laptop screens (under 820px tall): while the card shows an error
   (the alert or a field message), the grey lead line steps aside and the
   greeter shrinks a little, so the error, the field and the button all stay
   on screen. The title and the card never move out of view. */
@media (min-width: 900px) and (max-height: 820px) {
  .login .lg-hero:has(.lg-alert:not([hidden]), .lg-field.is-invalid) .lg-lead { display: none; }
  .login .lg-hero:has(.lg-alert:not([hidden]), .lg-field.is-invalid) .lg-greet .lg-art { width: clamp(64px, 9dvh, 96px); }
  .login .lg-hero:has(.lg-alert:not([hidden]), .lg-field.is-invalid) .lg-say { max-width: 17em; padding: 11px 15px 10px; font-size: 15px; }
  .login .lg-hero[data-login-step="code"]:has(.lg-field.is-invalid) .lg-greet .lg-art { width: clamp(88px, 12dvh, 120px); }
}

/* ==========================================================================
   15. Sign-in demo: bigger on phones, a fullscreen button, no scroll
   ========================================================================== */

/* Fullscreen toggle, bottom right of the film screen (signin.html only; the
   button is revealed by main.js where the browser can go full screen). While
   the film plays it sits above the video's control bar. */
.film__fs {
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.25s var(--ease-paper), box-shadow 0.25s var(--ease-paper);
}
.film__fs[hidden] { display: none; }
.film__fs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.film__fs:hover { transform: translateY(-1px); box-shadow: 0 10px 18px -12px rgba(17, 17, 17, 0.55); }
.film__fs:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--paper); }
.film__fs-out,
.film.is-fullscreen .film__fs-in { display: none; }
.film.is-fullscreen .film__fs-out { display: block; }
.film.is-playing .film__fs { bottom: 58px; }
.film:has(.film__fs:not([hidden])) .film__video::-webkit-media-controls-fullscreen-button { display: none; }   /* one fullscreen control, ours */

/* Full screen: the whole screen box fills the display on paper; the film
   letterboxes rather than crops, and the poster grows with it. */
.signin .si-film .film__screen:fullscreen { border: 0; border-radius: 0; background: var(--paper); }
.signin .si-film .film__screen:fullscreen .film__island { display: none; }
.signin .si-film .film__screen:fullscreen .film__video { object-fit: contain; }
.signin .si-film .film__screen:fullscreen .film__placeholder img { width: clamp(150px, 32vh, 340px); }
.signin .si-film .film__screen:fullscreen .film__fs { right: 24px; bottom: 24px; width: 48px; height: 48px; }
.signin .si-film.is-playing .film__screen:fullscreen .film__fs { bottom: 72px; }

/* Phones: the teaser opens exactly as before, but the phone inside now fills
   the width (and is capped so the whole phone fits one screen once
   initDemoFold scrolls it into view). The caption under it is gone on
   phones; desktop keeps it. The poster's type returns to full size. */
@media (max-width: 619px) {
  .signin .si-demo__stage { gap: 0; padding: 14px 10px; border-radius: 28px; }
  .signin .si-film { width: min(100%, calc((100svh - 136px) * 324 / 727)); }
  .signin .si-demo__note { display: none; }
  .signin .si-film .film__placeholder { gap: 10px; padding-inline: 10%; }
  .signin .si-film .film__chip { padding: 4px 10px; font-size: 10.5px; letter-spacing: 0.12em; }
  .signin .si-film .film__title { font-size: 18px; }
  .signin .si-film .film__text { font-size: 14px; }
  .signin .si-film .film__play { width: 60px; height: 60px; }
  .signin .si-film .film__play svg { width: 25px; }
  .signin .si-film .film__fs { right: 16px; bottom: 16px; }
}

/* Sign-in, desktop: airtight. Section 14 sizes everything to fit with room
   to spare at every verified laptop size; this also removes the page
   scrollbar outright, so a heavier fallback font or a browser toolbar can
   never bring one back. Only from 700px tall: a shorter window keeps normal
   scrolling rather than hiding anything. */
@media (min-width: 900px) and (min-height: 700px) {
  html:has(> body.signin:not(.login)) { overflow: hidden; }
}