/*
 * THE HOMEPAGE (`public/index.html`) — its own layout on top of `chrome.css`: the hero, the four page sections, the invite
 * story, "Make it yours", the feature grid, the devices and the finale. The sections' markup is drawn by
 * `scripts/home-sections.ts`; `assets/home.js` plays them (a step is `.vg[data-s]`, and every state below keys off it).
 * Colours, type families and the hairline are the app's tokens (tokens.css, theme.css); the few literals are the app's own
 * one-off values (the ground green of the first screen, the Stillness oat) and are named where they are defined.
 *
 * ONE BREAKPOINT, 759px: above it the desk layout (the site column, chrome.css --px, two-up sections), below it the phone layout
 * (one column, the hero stacked like the app's phoneLayout). The pictures are drawn at their natural size and never reflow.
 */

:root {
  --ink-2: var(--ink-secondary);
  --ink-3: var(--ink-subtle);
  --ink-4: var(--ink-detail);
  --border: var(--canvas-border);
  --fill: var(--canvas-fill);
  --accent-subtle: #d9e9cf; /* the app's accent.subtle */
  --accent-pressed: #395443;
  --sans: var(--font-sans);
  --mono: var(--font-mono);
  --serif: "IBM Plex Serif", Georgia, serif; /* the Stillness look's serif */
  --oat: #ebe5d9; /* the Stillness look's oat */
  --ground: #7bab67; /* FIRST_GROUND in FirstScreen.tsx */
  --rule: rgba(75, 110, 88, 0.45);
  --pad: 24px;
  --sec-y: 84px; /* the page's vertical rhythm: a section's padding above its heading and below its last row */
  /* the page's column is chrome.css's --px (every section's text and picture sit on it; the full-width art bands stay full width) */
}

.home {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
}

.home * {
  margin: 0;
}

.home button {
  font: inherit;
  color: inherit;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ───────── the typing headline ───────── */
.hl {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: var(--ls);
}

.tw-vis {
  display: block;
}

.hl .l1,
.hl .l2,
.tw .one {
  display: flex;
  align-items: flex-start;
}

.hl .l1 {
  height: var(--lh);
}

.hl .l2,
.tw .one {
  height: calc(var(--lh) + 8px);
}

.lead {
  margin-right: 0.26em;
}

.wordbox {
  position: relative;
  display: inline-block;
  height: var(--lh);
}

.typed {
  display: inline-block;
}

.caret {
  display: inline-block;
  width: 0.062em;
  min-width: 2px;
  height: var(--cap, 0.7em);
  margin-left: 0.03em;
  background: var(--accent);
  vertical-align: baseline;
}

.caret.blink {
  animation: blink 1.06s steps(1, end) infinite;
}

.static .caret {
  visibility: hidden;
}

@keyframes blink {
  0%,
  55% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}

.rule {
  position: absolute;
  left: 0;
  top: calc(var(--lh) + 3px);
  height: 2px;
  border-radius: 1px;
  background: var(--rule);
  width: 0;
}

.stop {
  flex-shrink: 0;
}

/* ───────── the hero ───────── */
.hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}

/* the top row's right side: "Sign in" (a phone's; a desk's is the card foot's, as in the app) */
/* the hero floats the shared header (chrome.css's .sh) over its scene; a phone's is in the flow. Placement only, never size or type. */
.hero > .sh {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 24px var(--px) 0; /* chrome.css's, restated: the line above zeroes every margin */
}

.home .sf-in {
  margin: 0 var(--px);
}

@media (max-width: 759px) {
  .hero > .sh {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    margin: 8px 16px 0;
    flex: none;
  }
}

html {
  scroll-padding-top: 8px;
}

.hgap {
  display: none;
}

.hero .hl {
  position: absolute;
  left: var(--px-flat); /* the hero is not zoomed by the page scale */
  top: 107px;
  --fs: 54px;
  --lh: 56px;
  --ls: -1.35px;
  z-index: 2;
}

.hgrass {
  display: contents;
}

.hcard {
  position: absolute;
  left: var(--px-flat);
  top: 255px;
  width: 908px;
  max-width: calc(100% - var(--px-flat) - 24px);
  z-index: 2;
}

.cta {
  display: flex;
  align-items: center;
  gap: 22px;
}

.start {
  font: 500 17px var(--sans);
  background: var(--accent);
  color: var(--white);
  border-radius: 14px;
  height: 52px;
  padding: 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -0.2px;
  text-decoration: none;
}

.start:hover {
  background: var(--accent-pressed);
}

.getapp {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.getapp-link {
  font: 500 16px / 22px var(--sans);
  letter-spacing: -0.2px;
  color: var(--accent);
  text-decoration: none;
}

.getapp-link:hover {
  text-decoration: underline;
}

.or {
  margin-top: 31px;
  font: 400 15px / 20px var(--sans);
  color: var(--ink-3);
  letter-spacing: -0.3px;
}

.samples {
  margin-top: 8px;
}

.hcards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.hcards::-webkit-scrollbar {
  display: none;
}

/* THE SAMPLE CARDS (the app's MiniTripCard, drawn small): dates and name over a strip of the look's own card. Every size is in
   --k (1px; the hero's scale unit on a desk), so the card is the same picture at any desk width. */
.scard {
  --k: 1px;
  position: relative;
  flex: none;
  display: block;
  box-sizing: border-box;
  width: calc(172 * var(--k));
  height: calc(121 * var(--k));
  border: 1px solid var(--border);
  border-radius: calc(14 * var(--k));
  background: var(--soft, var(--white));
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sc-eye,
.sc-name {
  position: absolute;
  left: calc(12 * var(--k));
  right: calc(12 * var(--k));
}

.sc-eye {
  top: calc(10 * var(--k));
  font: 500 calc(10 * var(--k)) / calc(13 * var(--k)) var(--mono);
  letter-spacing: calc(0.8 * var(--k));
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink-3);
}

.sc-name {
  top: calc(26 * var(--k));
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font: 600 calc(14 * var(--k)) / calc(17.5 * var(--k)) var(--sans);
  letter-spacing: calc(-0.1 * var(--k));
  color: var(--ink);
}

.sc-art {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(52 * var(--k));
  overflow: hidden;
  pointer-events: none;
}

/* the look's strip window (a wide crop of its showcase, `STRIP_WINDOW`) fills the strip */
.sc-art svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* the strip's wide window has its own viewBox for each card width: the phone's (145 x 52) and the desk's (172 x 52) */
.sc-art .sc-ph {
  display: none;
}
@media (max-width: 759px) {
  .sc-art .sc-ph {
    display: block;
  }
  .sc-art .sc-dk {
    display: none;
  }
}

.card-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* HOVER (a mouse or a keyboard focus; a touch screen has none): the card lifts 2px and takes a soft shadow, and its art plays once, over a
   second: the layers slide by different amounts (far least, near most) while the picture pushes in 3%, so the scene has depth. Reduced motion keeps the lift only. */
.scard .pl {
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scard .sc-art svg {
  transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: 50% 100%;
}
@media (hover: hover) and (pointer: fine) {
  /* a scroller clips on every side, so the room a hovered card lifts into (2px) and casts its shadow over (4px down, 10px blur) is padding
     here, handed back as negative margin so the row sits where it did */
  .hcard .samples .hcards {
    padding-block: 4px 16px;
    margin-block: -4px -14px;
  }
  .scard:hover,
  .scard:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgb(18 18 18 / 0.1);
    border-color: var(--ink-faint);
  }
  .scard:hover .sc-art svg,
  .scard:focus-visible .sc-art svg {
    transform: scale(1.03);
  }
  .scard:hover .pl-far,
  .scard:focus-visible .pl-far {
    transform: translateX(3px);
  }
  .scard:hover .pl-mid,
  .scard:focus-visible .pl-mid {
    transform: translateX(7px);
  }
  .scard:hover .pl-fore,
  .scard:focus-visible .pl-fore {
    transform: translateX(13px);
  }
  .scard:hover .pl-air,
  .scard:focus-visible .pl-air {
    transform: translateX(18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scard .pl,
  .scard .sc-art svg {
    transition: none;
  }
  .scard:hover .pl,
  .scard:focus-visible .pl,
  .scard:hover .sc-art svg,
  .scard:focus-visible .sc-art svg {
    transform: none;
  }
}

.inv {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  font: 400 15px / 20px var(--sans);
  color: var(--ink-secondary);
  letter-spacing: -0.16px;
}

.inv .dot {
  color: var(--ink-faint);
}

.inv a {
  color: var(--ink);
  font-weight: 500;
  margin-left: 0;
  text-decoration: none;
}

.inv a:hover {
  text-decoration: underline;
}

.hscene {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 332px;
  background: url(/img/scene-desk.svg) 0 100% / 3600px 332px no-repeat;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  background: var(--ground);
  z-index: 1;
}

/* ───────── "Inside every trip" ───────── */
.intro {
  padding: 96px var(--px) 36px;
  background: var(--canvas);
}

.intro p {
  margin: 14px 0 0;
  font: 700 46px / 50px var(--sans);
  letter-spacing: -1.15px;
  color: var(--ink);
  max-width: 760px;
  text-wrap: balance;
}

.pages {
  position: relative;
}

/* ───────── a story: the words, the checklist, the picture ───────── */
.story {
  position: relative;
  overflow-x: clip; /* a hidden piece's drift is not page width */
}

.pane {
  position: relative;
  background: var(--canvas);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 80px;
  padding: 84px var(--px);
}

.pane.rev .sec-txt {
  order: 2;
  justify-self: start;
}

.pane.rev .vgwrap {
  order: 1;
}

.sec-txt {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
}

.sec-title {
  font-weight: 700;
  color: var(--ink);
  text-wrap: balance;
  font-size: 46px;
  line-height: 50px;
  letter-spacing: -1.15px;
  --fs: 46px;
  --lh: 50px;
  --ls: -1.15px;
}

.sec-title.tw {
  white-space: nowrap;
}

.sec-sub {
  color: var(--ink-2);
  font-size: 21px;
  line-height: 31px;
  letter-spacing: -0.3px;
  max-width: 420px;
}

.vgwrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.vg {
  position: relative;
  width: 520px;
  max-width: 100%;
}

.steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.steps li {
  position: relative;
  padding-bottom: 2px;
}

.stepbtn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font: 500 15px / 20px var(--sans);
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.25s;
}

.stepbtn i {
  width: 14px;
  height: 14px;
  display: block;
  flex: none;
}

.stepbtn i::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 4px;
  border-radius: 50%;
  background: var(--ink-4);
}

.steps li.done i::before {
  background: var(--accent);
}

.steps li.on .stepbtn {
  color: var(--ink);
}

.steps li.on i::before {
  width: 0;
  height: 0;
  margin: 1px 2px 1px 3px;
  border-radius: 0;
  background: none;
  border-left: 10px solid var(--accent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.pbar {
  position: absolute;
  left: 26px;
  right: 0;
  bottom: -3px;
  height: 2px;
}

.steps li.on .pbar::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--accent);
  border-radius: 1px;
}

/* ───────── the pictures' shared parts ───────── */
.vcard {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.05), 0 18px 44px rgba(18, 18, 18, 0.09);
  overflow: hidden;
}

.eyebrow {
  font: 400 12px / 16px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.vtitle {
  font: 700 34px / 38px var(--sans);
  letter-spacing: -0.7px;
  color: var(--ink);
}

.vsub {
  font: 400 16px / 22px var(--sans);
  color: var(--accent);
}

.faces {
  display: flex;
  align-items: center;
}

.face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 500 14px var(--sans);
  color: var(--ink);
  box-shadow: 0 0 0 2px var(--white);
  flex: none;
}

.faces .face + .face {
  margin-left: -8px;
}

.face.dash {
  background: var(--white) !important;
  box-shadow: none;
  border: 1.5px dashed var(--border);
  color: var(--ink-3);
}

.face.lg {
  width: 44px;
  height: 44px;
  font-size: 17px;
  box-shadow: none;
}

.pill {
  font: 500 14px var(--sans);
  color: var(--ink);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--white);
  margin-left: 12px;
  white-space: nowrap;
}

.tile {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--soft);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink);
}

.tile svg {
  width: 24px;
  height: 24px;
}

.rowt {
  font: 500 17px / 22px var(--sans);
  color: var(--ink);
  letter-spacing: -0.2px;
}

.rows {
  font: 400 14px / 20px var(--sans);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 5px;
}

.rows svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex: none;
}

.rows u {
  text-decoration-color: var(--ink-4);
}

.grow {
  min-width: 0;
  flex: 1;
}

.grab {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  margin: 0 auto 12px;
}

/* THE TRIP HEADER: the art's open sky runs up behind the lines and the faces; the whole drawing is shown (it is scaled to
   the card's width, never cropped), and the lines stand clear of the van. */
.arthd {
  position: relative;
  background: var(--art) 50% 100% / 100% auto no-repeat;
  padding-bottom: 24cqw;
}

.ov,
.lap .main {
  container-type: inline-size;
}

.ovh {
  padding: var(--pad) var(--pad) 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ovh .faces {
  margin-top: 6px;
}

.pp {
  transition: transform 0.38s cubic-bezier(0.34, 1.8, 0.5, 1), opacity 0.2s;
}

.pp.off {
  transform: scale(0);
  opacity: 0;
}

.sb {
  transition: opacity 0.35s ease;
}

.sb.off {
  opacity: 0;
}

.cr2 {
  display: none;
  width: 2px;
  height: 0.95em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: -0.12em;
  animation: blink 1.06s steps(1, end) infinite;
}

.ey .cr2 {
  height: 12px;
  vertical-align: -2px;
}

.typing .cr2 {
  display: inline-block;
}

/* Overview: tiles, pins, panels */
.otiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px var(--pad) 0;
}

.otile {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  background: var(--white);
  transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
}

.oi svg {
  width: 22px;
  height: 22px;
  display: block;
  margin-bottom: 4px;
}

.otile b {
  font: 600 14px / 18px var(--sans);
}

.otile small {
  font: 400 11.5px / 15px var(--sans);
  color: var(--ink-3);
}

.vg[data-s="1"] .ot-travel,
.vg[data-s="2"] .ot-documents {
  box-shadow: 0 0 0 2px var(--accent);
  transform: scale(0.97);
  background: var(--accent-subtle);
}

[data-part] {
  transition: opacity 0.4s ease;
}

.dim {
  opacity: 0.78;
}

.ovp {
  padding: 12px var(--pad) 0;
}

.pins {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pslot {
  position: relative;
  min-height: 76px;
  border: 1.5px dashed transparent;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font: 400 12px var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-4);
}

/* the slot's dashed outline shows only while its pin is up in the air (step 1's drop) */
.pslot:has(.pin.pre) {
  border-color: var(--border);
}

/* The pins sit on the board by default (no script, no motion); .pre is the state before they drop. */
.pin {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font: 400 13px / 18px var(--sans);
  letter-spacing: 0;
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(18, 18, 18, 0.08);
  transform: rotate(-1deg);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.pin > * {
  flex: none;
}

.pin::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--accent);
}

.pin.note {
  background: var(--fill);
  border: 1px solid var(--border);
}

.pin.file {
  background: var(--white);
  border: 1px solid var(--border);
}

.pin.note > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pin.file .bp {
  display: block;
  width: 100%;
  height: 28px;
  border-radius: 8px;
}

.fname {
  font-weight: 500;
}

.pin .fname {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pfoot,
.fnrow {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pfoot {
  font: 400 11px var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-3);
}

.pfoot .face,
.fnrow .face {
  width: 22px;
  height: 22px;
  font-size: 11px;
  box-shadow: none;
}

.pslot:nth-child(2) .pin {
  transform: rotate(1.2deg);
  transition-delay: 0.15s;
}

.pslot .pin.pre {
  opacity: 0;
  transform: translateY(-70px) rotate(-7deg);
}

.pslot:nth-child(2) .pin.pre {
  transform: translateY(-70px) rotate(6deg);
}

/* The stay (left) is exactly as tall as the 2×2 of tiles (right): the grid row sets both. */
.ovs {
  --S: 212px;
  display: grid;
  grid-template-columns: var(--S) minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  padding: 12px var(--pad) var(--pad);
}

.ovs .otiles {
  padding: 0;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  min-height: var(--SH, var(--S));
}

.ovs .otile {
  justify-content: flex-start;
  min-width: 0;
}

.ovs .otile b {
  white-space: nowrap;
}

.stay {
  box-sizing: border-box;
  min-width: 0;
  border-radius: 14px;
  background: var(--fill);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
}

.stay .sh {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.stay .bed {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--white);
  display: grid;
  place-items: center;
  flex: none;
}

.stay .bed svg {
  width: 20px;
  height: 20px;
  display: block;
}

.stay .nt {
  font: 500 11px / 14px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 3px;
  white-space: nowrap;
}

.stay .smid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.stay .sa {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stay .srw {
  display: flex;
  flex-direction: column;
}

.stay .sl-l {
  font: 500 10.5px / 14px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.stay .sl-v {
  font: 400 15px / 20px var(--sans);
  letter-spacing: -0.16px;
  color: var(--ink);
  white-space: nowrap;
}

.stay .nm {
  min-height: 20px;
  font: 500 16px / 20px var(--sans);
  letter-spacing: -0.16px;
}

.stay .sdates {
  display: none;
}

.stay .ad {
  margin-top: 4px;
  min-height: 16px;
  display: flex;
  gap: 4px;
  align-items: flex-start;
  font: 400 12px / 16px var(--sans);
  color: var(--ink-3);
}

.stay .ad svg {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 1.5px;
  color: var(--accent);
}

.stay .ad span {
  min-width: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-faint);
}

.stay .bed,
.stay .nt,
.stay .ad svg,
.stay .smid,
.stay .sdates {
  transition: opacity 0.25s ease;
}

.stay.pre .bed,
.stay.pre .nt,
.stay.pre .ad svg,
.stay.pre .smid,
.stay.pre .sdates {
  opacity: 0;
}

/* the header keeps its two lines while it types, so the pins and the stay below never jump */
.ovh .ti::before,
.ovh .ey::before {
  content: "\200b";
}

.pdf {
  position: relative;
  height: 56px;
  border-radius: 10px;
  background: var(--fill);
  overflow: hidden;
  border: 1px solid var(--border);
}

.pdf::before {
  content: "LIS OPO";
  position: absolute;
  left: 22%;
  top: 8px;
  right: 22%;
  bottom: 0;
  background: var(--white);
  font: 700 10px var(--sans);
  padding: 4px 6px;
  border-top: 4px solid #14392b;
}

.pdf b {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: var(--ink);
  color: var(--white);
  font: 500 10px var(--mono);
  letter-spacing: 0.12em;
  padding: 2px 7px;
  border-radius: 999px;
}

.pdf-s {
  width: 64px;
  flex: none;
}

.pdf-s::before {
  display: none;
}

.pdf-s .bp {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.opanel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 226px;
  background: var(--canvas);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 40px rgba(18, 18, 18, 0.2);
  padding: 10px var(--pad) var(--pad);
  transform: translateY(125%);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 4;
  overflow: hidden;
}

.vg[data-s="1"] .pt,
.vg[data-s="2"] .pd {
  transform: none;
}

.oph {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 20px / 26px var(--sans);
  margin: 2px 0 4px;
}

.oph small {
  font: 400 12px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.oph .pill {
  margin-left: auto;
}

.orow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}

.orow + .orow {
  border-top: 1px solid var(--border);
}

.orow .tile {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

.orow .tile svg {
  width: 20px;
  height: 20px;
}

.orow .rowt {
  font-size: 15px;
  line-height: 20px;
}

.orow .rows {
  font-size: 13px;
  line-height: 17px;
  display: block;
}

.heart {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 14px var(--mono);
  color: var(--ink);
}

.heart svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: transform 0.3s;
}

.heart.up svg {
  transform: scale(1.35);
}

/* Plan */
.plan-card {
  padding: var(--pad);
  min-height: 600px;
  overflow: hidden;
}

.dstrip {
  display: flex;
  margin: 0 0 16px;
}

.dc {
  width: 56px;
  height: 64px;
  flex: none;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font: 400 12px / 14px var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink);
  position: relative;
}

.dc b {
  font: 500 20px / 22px var(--mono);
  letter-spacing: 0;
}

.dc + .dc::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--fill);
}

.dc.on {
  background: var(--accent);
  color: var(--white);
}

.dc.on::before,
.dc.on + .dc::before {
  display: none;
}

.plan-card h4 {
  font: 700 22px / 28px var(--sans);
  letter-spacing: -0.4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.plan-card h4 small {
  font: 400 12px var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.tr {
  position: relative;
  display: flex;
  gap: 12px;
  margin-top: 18px;
  align-items: flex-start;
}

.tr::before {
  content: "";
  position: absolute;
  left: 95px;
  top: -18px;
  height: 18px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ink-faint) 0 4px, transparent 4px 8px);
}

.plan-card h4 + .tr::before {
  display: none;
}

.tr .tt {
  width: 62px;
  flex: none;
  position: relative;
  align-self: stretch;
  text-align: right;
  font: 400 13px / 18px var(--mono);
  color: var(--ink);
}

.tt .t1 {
  display: block;
  padding-top: 13px;
}

.tt .t2 {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--ink-4);
}

.tr.sm .tt .t2 {
  top: 33px;
  bottom: auto;
}

.mk {
  width: 44px;
  flex: none;
  border-radius: 22px;
  background: var(--fill);
  display: grid;
  place-items: center;
  color: var(--ink);
}

.mk svg {
  width: 22px;
  height: 22px;
}

.tr .grow {
  padding-top: 3px;
}

.tr .grow .rowt {
  font-size: 16px;
}

.tr .note {
  margin-top: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  font: 400 13px / 18px var(--sans);
  color: var(--ink-2);
}

.tr.new {
  max-height: 0;
  opacity: 0;
  overflow: visible;
  margin-top: 0;
  transition: max-height 0.6s ease, opacity 0.5s ease, margin-top 0.6s ease;
}

.vg[data-s="2"] .tr.new {
  max-height: 90px;
  opacity: 1;
  margin-top: 18px;
  transition-delay: 0.8s;
}

.vg[data-s="2"] .tr.new .mk {
  background: var(--accent-subtle);
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--canvas);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 40px rgba(18, 18, 18, 0.18);
  padding: 12px var(--pad) var(--pad);
  transform: translateY(125%);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 4;
}

.vg[data-s="1"] .sheet {
  transform: none;
}

.vg[data-s="2"] .sheet {
  transition-delay: 0.55s;
}

.sh-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sh-head .tile {
  width: 44px;
  height: 44px;
}

.sh-head .cap {
  font: 400 12px var(--mono);
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  flex: 1;
}

.xbtn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  font: 300 22px / 1 var(--sans);
  color: var(--ink);
}

.ttl {
  margin-top: 14px;
  font: 500 21px / 28px var(--sans);
  letter-spacing: -0.3px;
  min-height: 56px;
  color: var(--ink);
}

.ttl .cr {
  display: inline-block;
  width: 2px;
  height: 22px;
  background: var(--accent);
  vertical-align: -3px;
  margin-left: 1px;
  animation: blink 1.06s steps(1, end) infinite;
}

.fld {
  background: var(--fill);
  border-radius: 16px;
  padding: 10px 16px;
  margin-top: 8px;
}

.fld small {
  display: block;
  font: 400 13px / 18px var(--sans);
  color: var(--ink-3);
}

.fld b {
  font: 400 16px / 22px var(--sans);
}

.addbtn {
  margin-top: 12px;
  height: 50px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  display: grid;
  place-items: center;
  font: 500 17px var(--sans);
  position: relative;
}

.addbtn .ck {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s;
  width: 22px;
  height: 22px;
}

.addbtn .tx {
  transition: opacity 0.2s;
}

.vg[data-s="2"] .addbtn .ck {
  opacity: 1;
}

.vg[data-s="2"] .addbtn .tx {
  opacity: 0;
}

/* Money */
.stk {
  display: grid;
}

.stk > * {
  grid-area: 1 / 1;
  transition: opacity 0.4s ease, transform 0.5s ease;
}

.vg .scr-list,
.vg .scr-split,
.vg .scr-enter,
.vg .scr-settle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.vg[data-s="0"] .scr-list,
.vg[data-s="1"] .scr-split,
.vg[data-s="2"] .scr-split,
.vg[data-s="3"] .scr-split,
.vg[data-s="4"] .scr-enter,
.vg[data-s="5"] .scr-settle {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lst {
  padding: var(--pad);
}

.lst .eyebrow {
  display: block;
  margin-bottom: 4px;
}

.lst .dh {
  font: 700 20px / 26px var(--sans);
  letter-spacing: -0.3px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.lst .dh small {
  font: 400 12px var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.er {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
}

.er + .er {
  border-top: 1px solid var(--border);
}

.er .rowt {
  font-size: 17px;
  line-height: 22px;
}

.er .rows {
  display: block;
  font-size: 14px;
  line-height: 19px;
}

.er .amt {
  font: 400 16px var(--mono);
  font-variant-numeric: tabular-nums;
  align-self: flex-start;
  padding-top: 2px;
  white-space: nowrap;
}

.okc {
  color: var(--accent);
}

.tick-s {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}

.tick-s svg {
  width: 13px;
  height: 13px;
}

.spl {
  padding: var(--pad);
}

.spl .hd {
  display: flex;
  gap: 14px;
  align-items: center;
}

.spl .hd .nm {
  font: 500 19px / 24px var(--sans);
}

.spl .hd .sm {
  font: 400 14px / 20px var(--sans);
  color: var(--ink-3);
}

.spl .amt {
  margin-left: auto;
  font: 700 30px / 34px var(--sans);
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
}

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
}

.seg b {
  text-align: center;
  font: 500 15px / 36px var(--sans);
  color: var(--ink);
  transition: background 0.3s, color 0.3s;
  cursor: pointer;
}

.seg b + b {
  border-left: 1px solid var(--border);
}

.vg[data-s="1"] .seg b:nth-child(1),
.vg[data-s="2"] .seg b:nth-child(2),
.vg[data-s="3"] .seg b:nth-child(3) {
  background: var(--accent);
  color: var(--white);
}

.lists {
  display: grid;
  margin-top: 6px;
}

.lists > div {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.35s;
}

.vg[data-s="1"] .lists .eq,
.vg[data-s="2"] .lists .sh,
.vg[data-s="3"] .lists .ex {
  opacity: 1;
}

.srow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
}

.srow + .srow {
  border-top: 1px solid var(--border);
}

.chk {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--white);
  display: grid;
  place-items: center;
  flex: none;
}

.chk svg {
  width: 14px;
  height: 14px;
}

.chk.off {
  background: var(--white);
  border: 1.5px solid var(--border);
}

.srow .grow .rowt {
  font-size: 16px;
  line-height: 20px;
}

.srow .grow .rows {
  font-size: 13px;
  line-height: 17px;
}

.srow .a {
  font: 400 16px var(--mono);
  font-variant-numeric: tabular-nums;
}

.srow.out {
  opacity: 0.55;
}

.step3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  font: 500 14px var(--mono);
  background: var(--white);
}

.step3 u {
  text-decoration: none;
  color: var(--ink-3);
  font-size: 16px;
}

.stot {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--fill);
  font: 400 14px / 20px var(--mono);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ok {
  color: var(--accent);
}

.tick {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.enter {
  padding: var(--pad);
}

.enter .big {
  font: 700 44px / 50px var(--sans);
  letter-spacing: -1.2px;
  margin-top: 4px;
  min-height: 52px;
  font-variant-numeric: tabular-nums;
}

.enter .ttl {
  min-height: 30px;
  margin-top: 12px;
}

.enter .fld,
.enter .save {
  transition: opacity 0.4s, transform 0.4s;
}

.enter .late {
  opacity: 0;
  transform: translateY(8px);
}

.enter.shown .late {
  opacity: 1;
  transform: none;
}

.enter .save {
  margin-top: 12px;
  height: 50px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  text-align: center;
  font: 500 17px / 50px var(--sans);
}

.enter .fld .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.enter .hint {
  font: 400 13px var(--sans);
  color: var(--accent);
}

.bal {
  background: var(--fill);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.05), 0 18px 44px rgba(18, 18, 18, 0.08);
  overflow: hidden;
}

.bal .top {
  padding: 20px var(--pad) 16px;
}

.bal .lab {
  font: 400 16px / 22px var(--sans);
  color: var(--ink-2);
}

.bal .big {
  font: 700 46px / 52px var(--sans);
  letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums;
}

.stats2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}

.stats2 > div {
  padding: 12px var(--pad) 14px;
  font: 400 16px / 20px var(--mono);
  font-variant-numeric: tabular-nums;
}

.stats2 > div + div {
  border-left: 1px solid var(--border);
}

.stats2 small {
  display: block;
  font: 400 11px / 16px var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.paylist {
  margin-top: 14px;
  padding: 6px var(--pad);
}

.prow2 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  position: relative;
}

.prow2 + .prow2 {
  border-top: 1px solid var(--border);
}

.prow2 .rowt {
  font-size: 17px;
}

.prow2 .a {
  margin-left: auto;
  font: 400 16px var(--mono);
  transition: opacity 0.3s;
}

.prow2 .sd {
  position: absolute;
  right: 0;
  opacity: 0;
  font: 500 15px var(--sans);
  color: var(--accent);
  display: flex;
  gap: 6px;
  align-items: center;
  transition: opacity 0.35s;
}

.prow2 .sd svg {
  width: 16px;
  height: 16px;
}

.prow2.done .sd {
  opacity: 1;
}

.prow2.done .a,
.prow2.done .rowt .pay {
  opacity: 0;
}

.prow2 .rowt .stl {
  display: none;
}

.prow2.done .rowt .stl {
  display: inline;
  color: var(--ink-3);
}

.prow2.done .rowt .pay {
  display: none;
}

.chev {
  color: var(--ink-4);
  font: 400 18px var(--sans);
  margin-left: 6px;
}

/* Journal */
.jbox {
  position: relative;
  width: 440px;
  height: 660px;
  margin: 0 auto;
}

.print {
  position: absolute;
  background: var(--white);
  padding: 10px 10px 40px;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.1), 0 14px 30px rgba(18, 18, 18, 0.16);
  border-radius: 3px;
}

.print .ph2 {
  position: relative;
  overflow: hidden;
  border-radius: 1px;
}

.print .ph2 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.print .sun {
  position: absolute;
  border-radius: 50%;
}

.print .cap2 {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  font: 400 14px / 18px var(--sans);
  color: var(--ink-2);
}

.jnote {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 14px;
  font: 400 14px / 21px var(--mono);
  color: var(--ink);
  box-shadow: 0 10px 26px rgba(18, 18, 18, 0.12);
  background-image: radial-gradient(var(--border) 1px, transparent 1.2px);
  background-size: 12px 21px;
  background-position: 0 16px;
}

.jnote .by {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 14px var(--sans);
  background: var(--white);
  width: fit-content;
  padding-right: 8px;
}

.jnote .face {
  width: 16px;
  height: 16px;
  box-shadow: none;
}

.jquote {
  position: absolute;
  background: var(--oat);
  border-radius: 14px;
  padding: 22px 22px 18px 26px;
  box-shadow: 0 10px 26px rgba(18, 18, 18, 0.12);
}

.jquote::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 44px;
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.jquote p {
  padding-left: 18px;
  font: italic 400 22px / 30px var(--serif);
  letter-spacing: -0.2px;
  color: var(--ink);
}

.jquote .by {
  padding-left: 18px;
  margin-top: 16px;
  font: 400 12px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.jit {
  --r: 0deg;
  --hx: 0px;
  --hy: -70px;
  transform: rotate(var(--r));
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.jit.hid {
  opacity: 0;
  transform: translate(var(--hx), var(--hy)) rotate(calc(var(--r) * 3));
}

.jit.d2 {
  transition-delay: 0.25s;
}

/* Invite: three beats in one phone screen (home-sections.ts's vInvite, home.js plays them). The chat is the message thread's own look. */
.imsg {
  padding: 0 0 20px;
}

.im-top {
  text-align: center;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border);
  background: #f6f6f7;
}

.im-top .face {
  margin: 0 auto 4px;
  width: 40px;
  height: 40px;
  box-shadow: none;
}

.im-top small {
  display: block;
  font: 400 12px var(--sans);
  color: var(--ink-3);
}

.im-body {
  padding: 18px var(--pad) 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bub {
  align-self: flex-end;
  background: #0b84ff;
  color: #fff;
  border-radius: 20px 20px 6px 20px;
  padding: 9px 15px;
  font: 400 17px / 22px -apple-system, "SF Pro Text", Archivo, sans-serif;
  max-width: 80%;
}

.lcard {
  align-self: flex-end;
  width: 82%;
  border-radius: 18px;
  overflow: hidden;
  background: #e9e9eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.lcard img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--canvas);
}

.lcard .lt {
  padding: 10px 14px 12px;
  font-family: -apple-system, "SF Pro Text", Archivo, sans-serif;
}

.lcard .lt b {
  display: block;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: #000;
}

.lcard .lt span {
  display: block;
  font-size: 13px;
  line-height: 18px;
  color: #6b6b6f;
}

.im-del {
  align-self: flex-end;
  font: 400 11px var(--sans);
  color: var(--ink-4);
}

/* the screens and what slides over them */
#invite .pframe {
  --fh: 420px;
}
.ivbox,
.ivs {
  position: absolute;
  inset: 0;
}
.ivs {
  background: var(--white);
  transition: opacity 0.35s ease, transform 0.45s ease;
}
.iv-chat {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
.vg[data-b="1"] .iv-chat {
  opacity: 1;
  transform: none;
}
.vg[data-b="1"] .iv-trip {
  opacity: 0;
  transform: translateY(-10px);
}
.iv-chat .imsg {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.vg.nt,
.vg.nt * {
  transition: none !important;
  animation: none !important;
}

/* beat 1 and 3: the trip's people row */
.iv-head {
  padding: 26px var(--pad) 0;
}
.iv-head .vtitle {
  margin: 4px 0 12px;
}
.iv-faces .iv-p {
  width: 0;
  margin-left: 0 !important;
  opacity: 0;
  transform: translateY(-22px);
  overflow: hidden;
  box-shadow: none;
  transition: width 0.35s ease, margin 0.35s ease, opacity 0.3s ease, transform 0.45s
    cubic-bezier(0.3, 1.5, 0.5, 1);
}
.iv-faces .iv-p.in {
  width: 34px;
  margin-left: -8px !important;
  opacity: 1;
  transform: none;
  box-shadow: 0 0 0 2px var(--white);
}
.iv-faces .iv-p.set {
  transform: scale(1.08);
}
.iv-pill {
  margin-left: 10px;
}
.iv-pill.pulse {
  animation: ivpulse 0.6s ease;
}
@keyframes ivpulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(75, 110, 88, 0);
  }
  40% {
    box-shadow: 0 0 0 7px rgba(75, 110, 88, 0.28);
    border-color: var(--accent);
  }
}
.iv-rows {
  margin: 22px var(--pad) 0;
  display: grid;
  gap: 10px;
}
.iv-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.iv-row .tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--canvas-oat-light);
  display: grid;
  place-items: center;
}
.iv-row .tile svg {
  width: 20px;
  height: 20px;
}
.iv-row b {
  display: block;
  font: 600 16px / 22px var(--sans);
  letter-spacing: -0.2px;
}
.iv-row span:not(.tile) {
  display: block;
  font: 400 14px / 20px var(--sans);
  color: var(--ink-3);
}

/* the share sheet */
.iv-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px var(--pad) 22px;
  background: var(--white);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 40px rgba(18, 18, 18, 0.18);
  transform: translateY(105%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 3;
}
.iv-sheet.on {
  transform: none;
}
.iv-grab {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 0 auto 14px;
}
.iv-sheet > b {
  display: block;
  font: 600 18px / 24px var(--sans);
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.iv-act {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 14px;
  font: 500 17px / 22px var(--sans);
  letter-spacing: -0.2px;
  transition: background 0.2s;
}
.iv-act .fxi {
  background: var(--canvas-oat-light);
}
.iv-act.press {
  background: var(--canvas-oat-light);
}
.iv-act.press .fxi {
  background: var(--accent);
  color: var(--white);
}

/* toasts: "Link copied" over the sheet, "Priya joined" over the row */
.iv-toast {
  position: absolute;
  left: 50%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--ink);
  color: var(--white);
  border-radius: 999px;
  padding: 9px 16px;
  font: 500 15px / 20px var(--sans);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity 0.3s ease, transform 0.4s ease;
  pointer-events: none;
}
.iv-toast.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.iv-toast .tick-s svg {
  width: 14px;
  height: 14px;
  display: block;
}
.iv-copied {
  bottom: 190px;
}
.iv-joined {
  top: 20px;
  background: var(--white);
  color: var(--ink);
  padding: 5px 16px 5px 5px;
  box-shadow: 0 10px 26px rgba(18, 18, 18, 0.15);
}
.iv-joined .face {
  width: 28px;
  height: 28px;
  font-size: 13px;
  box-shadow: none;
}

/* beat 2: the thread, one thing after another */
.iv-chat .bub,
.iv-chat .lcard,
.iv-chat .im-del {
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transform-origin: 100% 100%;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.iv-chat .rep {
  transform-origin: 0 100%;
}
.iv-chat .on {
  opacity: 1;
  transform: none;
}
.bub.rep {
  align-self: flex-start;
  background: #e9e9eb;
  color: #000;
  border-radius: 20px 20px 20px 6px;
}
.iv-chat .iv-bub {
  min-width: 40px;
}

/* beat 3: her name, then the face */
.iv-join {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 20px;
  z-index: 3;
  padding: 18px 18px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 18px 44px rgba(18, 18, 18, 0.16);
  transform: translateY(130%);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.iv-join.on {
  transform: none;
}
.iv-join > b {
  display: block;
  font: 700 20px / 26px var(--sans);
  letter-spacing: -0.3px;
}
.iv-lab {
  display: block;
  margin-top: 12px;
  font: 400 12px / 16px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.iv-in {
  margin-top: 6px;
  height: 48px;
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  font: 400 18px var(--sans);
}
.iv-go {
  margin-top: 12px;
  height: 48px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  display: grid;
  place-items: center;
  font: 500 17px var(--sans);
  letter-spacing: -0.2px;
  transition: transform 0.15s;
}
.iv-go.press {
  transform: scale(0.95);
}
.ivtx.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: currentColor;
  animation: blink 0.9s steps(1) infinite;
}

/* the stay and travel rows of the Overview card */
.orows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.srow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--edge);
}

.srow:first-child {
  border-top: 0;
  margin-top: 4px;
}

.rt {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--tile);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink);
}

.thx.still .rt {
  border: 1px solid var(--oat);
  background: var(--white);
}

.rt svg {
  width: 22px;
  height: 22px;
  display: block;
}

.srow .gt {
  min-width: 0;
  flex: 1;
}

.srow .sr-t {
  font: 400 15px / 20px var(--sans);
  letter-spacing: -0.16px;
  color: var(--ink);
}

.srow .sr-s {
  font: 400 13px / 18px var(--sans);
  color: var(--ink-3);
}

.srow .nt {
  font: 500 11px / 14px var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink-2);
  white-space: nowrap;
}

.thx.still .srow .nt {
  font: 400 13px / 18px var(--sans);
  letter-spacing: 0;
}

/* ───────── everything else ───────── */
.more {
  padding: 84px var(--px) 72px;
  background: var(--canvas);
}

.more .head {
  max-width: 560px;
  margin-bottom: 36px;
}

.more .head .sec-title {
  margin: 0 0 12px;
}

/* ───────── devices ───────── */
.dev {
  padding: 84px var(--gx) 64px;
  text-align: center;
  background: var(--canvas);
}

.dev .sec-title {
  margin: 0 auto;
}

.dev .sec-sub {
  margin: 12px auto 0;
  max-width: 560px;
}

.dwrap {
  position: relative;
  margin: 44px auto 0;
  width: 1180px;
  max-width: 100%;
  height: 640px;
  overflow: hidden;
}

.dstage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1180px;
  height: 640px;
  transform-origin: 0 0;
}

.lap {
  position: absolute;
  left: 0;
  top: 10px;
  width: 880px;
  z-index: 1;
  text-align: left;
}

.lap .win {
  border-radius: 14px 14px 0 0;
  background: #1b1c1e;
  padding: 8px 8px 0;
  box-shadow: 0 30px 60px rgba(18, 18, 18, 0.22);
}

.lap .bar2 {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 8px;
  background: #ededea;
  border-radius: 8px 8px 0 0;
}

.lap .bar2 i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9c9c4;
}

.lap .bar2 .url {
  margin: 0 auto;
  background: var(--white);
  border-radius: 7px;
  padding: 3px 60px;
  font: 400 12px / 16px var(--sans);
  color: var(--ink-3);
}

.lap .scr {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 232px;
  height: 500px;
  background: var(--canvas);
  overflow: hidden;
}

.lap .side {
  border-right: 1px solid var(--border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lap .side .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 9px var(--mono);
  letter-spacing: 0.26em;
  margin-bottom: 14px;
}

.lap .side .brand i {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #f7efdd url(/app-icon.png) center / cover;
}

.lap .side .trip {
  font: 400 10px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 4px 8px;
}

.lap .side .it {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  font: 500 14px var(--sans);
  color: var(--ink-2);
}

.lap .side .it svg {
  width: 18px;
  height: 18px;
}

.lap .side .it.on {
  background: var(--accent);
  color: var(--white);
}

.lap .main {
  padding: 14px 18px;
  overflow: hidden;
}

.lap .arthd {
  margin: 0 -18px;
  padding: 0 18px 24cqw;
}

.lap .main .vtitle {
  font-size: 26px;
  line-height: 30px;
}

.lap .main .faces {
  margin-top: 6px;
}

.lap .mt {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.lap .mt div {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 8px;
  font: 600 11px / 14px var(--sans);
}

.lap .mt div.on {
  box-shadow: 0 0 0 2px var(--accent);
  background: var(--accent-subtle);
}

.lap .mt svg {
  width: 16px;
  height: 16px;
  display: block;
  margin-bottom: 2px;
}

.pboard {
  position: relative;
  height: 150px;
  margin-top: 12px;
}

.pboard .slot2 {
  position: absolute;
  top: 6px;
  width: 150px;
  height: 120px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
}

.pboard .pn {
  position: absolute;
  top: 6px;
  width: 150px;
  height: 120px;
  border-radius: 12px;
  padding: 12px 10px 8px;
  font: 400 12px / 16px var(--sans);
  background: var(--fill);
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(18, 18, 18, 0.08);
}

.pboard .pn::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.pboard .pn.f {
  background: var(--white);
}

.pboard .pn b {
  font-weight: 600;
}

.pboard .cur {
  position: absolute;
  right: 18px;
  bottom: 6px;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.dev.play .pboard .drag {
  animation: dragpin 7s ease-in-out infinite;
  z-index: 3;
}

.dev.play .pboard .cur {
  animation: curv 7s ease-in-out infinite;
}

@keyframes dragpin {
  0%,
  18% {
    transform: none;
    box-shadow: 0 3px 10px rgba(18, 18, 18, 0.08);
  }
  30%,
  52% {
    transform: translate(172px, 6px) rotate(3deg);
    box-shadow: 0 16px 28px rgba(18, 18, 18, 0.22);
  }
  64%,
  100% {
    transform: none;
    box-shadow: 0 3px 10px rgba(18, 18, 18, 0.08);
  }
}

@keyframes curv {
  0%,
  12% {
    opacity: 0;
  }
  20%,
  56% {
    opacity: 1;
  }
  66%,
  100% {
    opacity: 0;
  }
}

.lap .rp {
  border-left: 1px solid var(--border);
  padding: 16px 14px;
  background: var(--canvas);
  box-shadow: -8px 0 20px rgba(18, 18, 18, 0.05);
  text-align: left;
}

.lap .rp .oph {
  font-size: 17px;
  line-height: 22px;
}

.lap .rp .orow {
  padding: 8px 0;
}

.lap .rp .orow .rowt {
  font-size: 13px;
  line-height: 17px;
}

.lap .base {
  height: 12px;
  margin: 0 -26px;
  background: linear-gradient(#d5d5d1, #bdbdb8);
  border-radius: 0 0 16px 16px;
}

.phs {
  position: absolute;
  left: 872px;
  top: 150px;
  width: 310px;
  height: 480px;
}

.dev-ph {
  position: absolute;
  transform-origin: 0 0;
  transform: scale(0.42);
  z-index: 3;
}

.dev-ph.a {
  left: 0;
  top: 70px;
}

.dev-ph.b {
  left: 126px;
  top: 10px;
}

.ios,
.andr {
  position: relative;
  width: 420px;
  height: 878px;
}

.ios {
  border-radius: 58px;
  background: #0e0f10;
  padding: 13px;
  box-shadow: inset 0 0 0 2px #2a2c2e, 0 30px 60px rgba(18, 18, 18, 0.25);
}

.ios .shot,
.andr .shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--canvas);
  display: block;
}

.ios .shot {
  border-radius: 46px;
}

.ios .isl {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 120px;
  height: 34px;
  margin-left: -60px;
  border-radius: 20px;
  background: #000;
  z-index: 5;
}

.ios .home {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 140px;
  height: 5px;
  margin-left: -70px;
  border-radius: 3px;
  background: #121212;
  z-index: 5;
}

.andr {
  border-radius: 46px;
  background: #0e0f10;
  box-shadow: inset 0 0 0 2px #2a2c2e, 0 30px 60px rgba(18, 18, 18, 0.25);
  padding: 13px;
}

.andr .as {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--canvas);
}

.andr .cam {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #0b0e1a;
  box-shadow: inset 0 0 0 2px #1a1e30;
  z-index: 5;
}

.andr .tm {
  position: absolute;
  left: 22px;
  top: 12px;
  font: 500 14px / 18px Archivo, sans-serif;
  z-index: 5;
  color: #000;
}

.andr .gl {
  position: absolute;
  right: 22px;
  top: 14px;
  z-index: 5;
  display: flex;
  gap: 6px;
  align-items: center;
}

.andr .nav {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 120px;
  height: 4px;
  margin-left: -60px;
  border-radius: 2px;
  background: #3a3a3a;
  z-index: 5;
}

.badges {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 26px;
}

.badge {
  display: block;
  background: #000;
  color: #fff;
  border-radius: 10px;
  padding: 7px 18px 7px 14px;
  text-align: left;
  min-width: 160px;
  text-decoration: none;
}

.badge small {
  display: block;
  font: 400 10px / 12px var(--sans);
}

.badge b {
  display: block;
  font: 500 20px / 22px var(--sans);
  letter-spacing: -0.3px;
}

.weblink {
  display: inline-block;
  margin-top: 0;
  font: 500 17px var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ───────── the finale ───────── */
.fin {
  position: relative;
  overflow: hidden;
  background: var(--canvas);
  min-height: 900px;
  /* The finale draws the first screen's own start block (cta, "or look inside a sample", the cards), which sizes itself in
     the hero's scale unit: here it is 1px, the block's own size. */
  --u: 1px;
}

/* The finale's start block is the hero's, centred under its title instead of left in a card. */
.fin-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.fin-start .or {
  margin-top: 28px;
}

/* the finale's start block is the first screen's: the same row and the same label line ("or look inside a sample" left, the link right),
   four cards wide on a desk, drawn once by one function (home-sections.ts startBlock) */
.fin-start .samples {
  align-self: stretch;
  text-align: left;
}

@media (min-width: 760px) {
  .fin-start .or,
  .fin-start .samples {
    width: min(732px, 100%);
    align-self: center;
    text-align: left;
  }
}

.fin .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 96px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.fin h2 {
  font: 700 76px / 80px var(--sans);
  letter-spacing: -2.4px;
}

.fin .vscene,
.fin .vvan {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 388px;
  background-repeat: no-repeat;
  z-index: 1;
  background-size: auto 388px;
  background-position: 0 0;
}

.fin .vscene {
  background-image: url(/img/scene-desk-empty.svg);
}

.fin .vvan {
  background-image: url(/img/scene-desk-van.svg);
  z-index: 2;
  transform-origin: 230px 60%;
  --dx0: -1400px;
  --dx1: 1700px;
}

.fin.play .vvan {
  animation: drive 15s linear infinite;
}

@keyframes drive {
  0% {
    transform: translateX(var(--dx0)) scaleX(-1);
    animation-timing-function: ease-out;
  }
  28% {
    transform: translateX(0) scaleX(-1);
  }
  55% {
    transform: translateX(0) scaleX(-1);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateX(var(--dx1)) scaleX(-1);
  }
}

.fin .ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ground);
  height: 90px;
  z-index: 1;
}

/* without motion nothing moves: no typing, no van, no transitions */
@media (prefers-reduced-motion: reduce) {
  .home *,
  .home *::before,
  .home *::after {
    transition: none !important;
    animation: none !important;
  }

  .caret {
    visibility: hidden;
  }
}

/* ───────── the phone layout ───────── */
@media (max-width: 759px) {
  :root {
    --sec-y: 28px;
    --pad: 18px;
  }

  .hero {
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
  }

  .hero::after {
    display: none;
  }

  .hgap {
    display: block;
    flex: 0 1 40px;
    min-height: 24px;
  }

  .hl + .hgap {
    flex: 0 1 32px;
    min-height: 24px;
  }

  .hero .hl {
    position: static;
    padding: 0 16px;
    flex: none;
    --fs: 33px;
    --lh: 35px;
    --ls: -0.83px;
  }

  /* The scene is 320 tall and its top 96px are open sky: it rides up under the headline so the roof luggage stands
     about 32px below it. Leftover height goes into the grass under the card; on a short phone the gaps shrink to their
     minimum and the page runs a little taller rather than crop the van. */
  .hscene {
    position: relative;
    bottom: auto;
    flex: none;
    height: 320px;
    margin-top: -104px;
    background: url(/img/scene-phone.svg) 50% 100% / 393px 320px no-repeat;
  }

  .hgrass {
    display: block;
    flex: 1 0 auto;
    background: var(--ground);
    padding: 0 16px 24px;
    position: relative;
  }

  .hcard {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: none;
    margin-top: -11px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 20px 20px 14px;
    box-shadow: 0 10px 30px rgba(18, 18, 18, 0.1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .cta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: center;
  }

  .start {
    width: auto;
  }

  .getapp {
    align-items: flex-start;
    margin-top: 0;
  }

  .getapp-link {
    line-height: 20px;
  }

  .or {
    text-align: center;
    margin-top: 4px;
  }

  .samples {
    margin: 8px -20px 0;
    position: relative;
  }

  .hcards {
    padding: 0 20px;
    scroll-snap-type: x mandatory;
  }

  .scard {
    scroll-snap-align: start;
    scroll-margin-left: 20px;
  }

  .samples::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 36px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--white));
    pointer-events: none;
  }

  .inv {
    flex-direction: column;
    gap: 6px;
    font-size: 15px;
  }

  /* phone: the lockup stacks, the name's tracking locked so both lines are one width */
  /* sections */
  .intro {
    padding: 60px 16px 20px;
  }

  .intro p {
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.7px;
  }

  .pane {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 60px 16px 36px;
  }

  .story + .story .pane {
    border-top: 1px solid var(--border);
  }

  .pane .sec-txt {
    gap: 8px;
    flex: none;
    max-width: none;
  }

  .pane.rev .sec-txt {
    order: 0;
  }

  .vgwrap {
    align-items: flex-start;
    width: 100%;
  }

  .vg {
    width: 100%;
  }

  .sec-title {
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.8px;
    --fs: 30px;
    --lh: 34px;
    --ls: -0.8px;
  }

  .sec-sub {
    font-size: 16px;
    line-height: 23px;
  }

  .steps {
    gap: 6px;
    margin-top: 4px;
  }

  .stepbtn {
    font-size: 13.5px;
    line-height: 18px;
  }

  .steps li.on .stepbtn {
    font-weight: 600;
  }

  .vtitle {
    font-size: 30px;
    line-height: 34px;
  }

  .ov {
    --pad: 20px;
  }

  .ovs {
    --S: 144px;
    --SH: 172px;
  }

  .ovs .otile {
    padding: 7px 6px;
    gap: 0;
  }

  .ovs .otile .oi svg {
    width: 20px;
    height: 20px;
    margin-bottom: 2px;
  }

  .ovs .otile b {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.1px;
  }

  .ovs .otile small {
    font-size: 11px;
    line-height: 14px;
  }

  /* On a phone the stay is quiet: the bed and the nights, then the name with one line of dates. No check-in rows, no address. */
  .stay {
    padding: 10px;
    justify-content: space-between;
  }

  .stay .bed {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .stay .bed svg {
    width: 17px;
    height: 17px;
  }

  .stay .nt {
    font: 400 12px / 16px var(--sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-3);
    padding-top: 4px;
  }

  .stay .smid,
  .stay .ad {
    display: none;
  }

  .stay .nm {
    font-size: 15px;
    line-height: 18px;
    min-height: 18px;
  }

  .stay .sdates {
    display: block;
    margin-top: 2px;
    font: 400 12px / 16px var(--sans);
    color: var(--ink-3);
    white-space: nowrap;
  }

  .otile small + small {
    display: none;
  }

  .dc {
    width: 52px;
  }

  .jbox {
    zoom: 0.8;
  }

  .sl2.money,
  .sl2.plan,
  .sl2.jrn {
    grid-column: 1;
    grid-row: auto;
  }

  .pp3 {
    width: 54%;
  }

  .pp3:nth-child(2) {
    left: 44%;
  }

  .more {
    padding: 56px 16px 36px;
  }

  .dev {
    padding: 56px 16px 36px;
  }

  .dwrap {
    width: auto;
    height: auto;
    overflow: visible;
    margin-top: 24px;
  }

  .dstage {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
  }

  .lap {
    position: static;
    width: 880px;
    zoom: var(--lz, 0.4);
  }

  .phs {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .dev-ph,
  .dev-ph.a,
  .dev-ph.b {
    position: static;
    transform: none;
    zoom: 0.41;
  }

  .fin {
    height: auto;
    min-height: max(100svh, 760px);
    padding-bottom: 368px;
    display: flex;
    flex-direction: column;
  }

  .fin .inner {
    position: static;
    flex: 1;
    justify-content: center;
    padding: 56px 16px 24px;
  }

  .fin h2 {
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -1.3px;
  }

  .fin .vscene {
    background-image: url(/img/scene-phone-empty.svg);
  }

  .fin .vvan {
    background-image: url(/img/scene-phone-van.svg);
    transform-origin: 50% 60%;
    --dx0: -520px;
    --dx1: 640px;
  }

  .fin .ground {
    height: 49px;
  }
}

/* ═══ THE PHONE HOMEPAGE: every section fits one 393×700 screen (tests/home.e2e.mjs measures it) ═══
   Desktop (≥760px) draws as before. The phone-only copy is a `.mb` span beside the desk's `.dk` one; the extra phone pictures
   (the hero foot, the devices' two screenshots) are in the markup and hidden here. The in-phone tab bars, FABs, sheets and the
   Money and Plan stories are built by home.js's phone part. */
.dwrap.prop {
  display: none;
}
/* ── the Plan and Money stories: one whole real task each, on every width (the phone adds its own bar and layout below) ── */
/* the picture is ONE phone screen: content clipped by the screen, the app's own tab bar inside it */
.pframe {
  position: relative;
  height: var(--fh, 360px);
  overflow: hidden;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.05), 0 18px 44px rgba(18, 18, 18, 0.09);
}
.pframe .vcard {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#plan .sheet {
  z-index: 50;
}

/* content that scrolls inside a phone picture, under its tab bar */
.pscroll {
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.25, 1);
  will-change: transform;
}
.pscroll.slow {
  transition-duration: 2.6s;
}

/* Plan: a smaller day strip pinned on top; the day scrolls under it and under the tab bar */
#plan .pframe {
  --fh: 420px;
}
#plan .plan-card {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
#plan .dstrip {
  flex: none;
  margin: 0 0 10px;
}
#plan .dc {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 10px;
  line-height: 12px;
  gap: 1px;
}
#plan .dc b {
  font-size: 15px;
  line-height: 17px;
}
#plan .pclip {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin: 0 calc(-1 * var(--pad));
  padding: 0 var(--pad);
}
#plan .plan-card h4 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 26px;
}
#plan .pscroll {
  padding-bottom: 90px;
}

/* Money: the list scrolls under the tab bar */
#money .pframe {
  --fh: 420px;
}
#money .stk {
  height: 100%;
}
#money .vcard.lst {
  height: 100%;
  overflow: hidden;
  /* room for the + at the picture's foot: it never covers a row's amount */
  padding-bottom: 82px;
}
#money .pscroll {
  padding-bottom: 90px;
}

/* ── the phone stories' shared parts: FAB, sheets, cards ── */
.pframe .fab {
  position: absolute;
  right: 14px;
  bottom: 74px;
  z-index: 30;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 16px rgba(18, 18, 18, 0.22);
  transition: transform 0.18s ease, opacity 0.3s ease;
}
.pframe .fab svg {
  width: 24px;
  height: 24px;
}
.pframe .press {
  transform: scale(0.9);
}
.pframe.sheeted .fab {
  opacity: 0;
}
.pframe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 18, 18, 0.28);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 45;
}
.pframe.sheeted::after {
  opacity: 1;
}

.xsheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 18px;
  z-index: 50;
  background: var(--canvas);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -14px 40px rgba(18, 18, 18, 0.18);
  transform: translateY(105%);
  transition: transform 0.45s cubic-bezier(0.3, 0.8, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}
.pframe.sheeted .xsheet {
  transform: none;
}
.xsheet .grab {
  margin: 0 auto 8px;
  flex: none;
}
.xs-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 16px;
}
.xs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.xs-head .tile {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fill);
  display: grid;
  place-items: center;
}
.xs-head .tile svg {
  width: 22px;
  height: 22px;
}
.xs-head .cap {
  font: 500 11px / 14px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: 1;
}
.xs-head .xbtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font: 400 20px / 1 var(--sans);
  color: var(--ink-2);
}
.xs-title {
  min-height: 26px;
  font: 500 19px / 26px var(--sans);
  letter-spacing: -0.3px;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.xs-title.big {
  font: 700 24px / 30px var(--sans);
  letter-spacing: -0.5px;
  min-height: 30px;
  margin-bottom: 10px;
}
.xs-title .ph {
  color: var(--ink-faint);
}
.xs-title .cr {
  width: 2px;
  height: 1.05em;
  background: var(--accent);
  margin-left: 1px;
  opacity: 0;
}
.xs-title.typing .cr {
  opacity: 1;
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.xs-amt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 10px;
}
.xs-amt b {
  font: 700 34px / 40px var(--sans);
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.xs-amt b.ph {
  color: var(--ink-faint);
}
.xs-amt .chip {
  font: 500 13px / 16px var(--sans);
  background: var(--fill);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--ink);
  /* the label and its chevron on one row */
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.xs-card {
  background: var(--fill);
  border-radius: 14px;
  padding: 0 14px;
  margin-bottom: 8px;
}
.xs-card > small {
  display: block;
  padding-top: 9px;
  font: 400 12px / 16px var(--sans);
  color: var(--ink-3);
}
.xs-card .xr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  font: 400 15px / 20px var(--sans);
  color: var(--ink);
  transition: background 0.2s ease;
  margin: 0 -14px;
  padding: 0 14px;
}
.xs-card .xr + .xr {
  border-top: 1px solid var(--canvas);
}
.xs-card .xr b {
  font-weight: 400;
}
.xs-card .xr b.ph {
  color: var(--ink-3);
}
.xs-card .xr.hit {
  background: var(--accent-subtle);
}
.xs-card.one {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
}
.xs-card.one div small {
  display: block;
  font: 400 12px / 16px var(--sans);
  color: var(--ink-3);
}
.xs-card.one div b {
  font: 400 15px / 20px var(--sans);
}
.xs-card .chev {
  color: var(--ink-3);
  font: 400 18px / 1 var(--sans);
}
.xs-save {
  flex: none;
  margin: 8px 16px 14px;
  height: 46px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--white);
  display: grid;
  place-items: center;
  font: 600 16px / 1 var(--sans);
  transition: transform 0.18s ease;
}
.xs-card .tv-fade {
  transition: opacity 0.3s ease;
}

/* the Split card: a row that opens its own list in place (Equally │ Shares │ Exact) */
.xs-card.split {
  padding: 0 14px;
}
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
}
.sp-head small {
  display: block;
  font: 400 12px / 16px var(--sans);
  color: var(--ink-3);
}
.sp-head b {
  font: 400 15px / 20px var(--sans);
}
.sp-head .owed {
  font: 400 13px / 18px var(--sans);
  color: var(--accent);
  white-space: nowrap;
}
.sp-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}
.split.open .sp-body {
  max-height: 260px;
}
.sp-seg {
  display: flex;
  background: var(--white);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin: 2px 0 6px;
}
.sp-seg b {
  flex: 1;
  text-align: center;
  font: 500 13px / 30px var(--sans);
  border-radius: 8px;
  color: var(--ink-2);
  transition: background 0.25s ease, color 0.25s ease;
}
.split[data-mode="equal"] .sp-seg b[data-m="equal"],
.split[data-mode="shares"] .sp-seg b[data-m="shares"],
.split[data-mode="exact"] .sp-seg b[data-m="exact"] {
  background: var(--accent);
  color: var(--white);
}
.sp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
}
.sp-row + .sp-row {
  border-top: 1px solid var(--canvas);
}
.sp-row .face {
  width: 26px;
  height: 26px;
  font-size: 12px;
  box-shadow: none;
}
.sp-row .nm {
  flex: 1;
  font: 400 14px / 18px var(--sans);
}
.sp-row .amt {
  font: 500 13px / 18px var(--mono);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: right;
  transition: color 0.3s ease;
}
.sp-row .amt.bump {
  color: var(--accent);
}
.sp-row .stp {
  display: none;
  align-items: center;
  gap: 8px;
  font: 500 13px / 18px var(--mono);
}
.sp-row .stp u {
  text-decoration: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: background 0.2s ease, color 0.2s ease;
}
.sp-row .stp u.hit {
  background: var(--accent);
  color: var(--white);
}
.split[data-mode="shares"] .sp-row .stp {
  display: flex;
}
.split[data-mode="exact"] .sp-row .amt {
  background: var(--white);
  border-radius: 8px;
  padding: 3px 8px;
}
.sp-tot {
  display: flex;
  justify-content: space-between;
  font: 400 12px / 16px var(--sans);
  color: var(--ink-3);
  padding: 6px 0 10px;
}

/* the inner list scroll the stories drive */
.pframe .pscroll.k {
  transition: transform var(--ms, 0.9s) cubic-bezier(0.45, 0, 0.25, 1);
}

/* ── Money: the list screen only; a new row arrives on Save ── */
#money .stk > :not(.lst) {
  display: none;
}
#money .vg .scr-list {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#money .er.new {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s ease, background 0.6s ease;
  margin: 0 -10px;
  padding: 0 10px;
  border-radius: 12px;
}
#money .er.new.in {
  max-height: 90px;
  opacity: 1;
}
#money .er.new.hi {
  background: var(--accent-subtle);
}

/* ── Plan: the old sheet is replaced; the new row is driven here ── */
#plan .plan-card > .sheet {
  display: none;
}
#plan .tr.new {
  border-radius: 12px;
  transition: max-height 0.5s ease, opacity 0.4s ease, margin-top 0.5s ease, background 0.6s ease;
}
#plan .tr.new.in {
  max-height: 90px;
  opacity: 1;
  margin-top: 18px;
}
#plan .tr.new.hi {
  background: var(--accent-subtle);
}
#plan .tr.new.hi .mk {
  background: var(--accent-subtle);
}

@media (max-width: 759px) {
  .dwrap.prop {
    display: block;
  }
  .dev .dwrap:not(.prop) {
    display: none;
  }
}

@media (max-width: 759px) {
  /* ── hero: the scene gives up 80px so the card's links show ── */
  .hero {
    min-height: 100svh;
  }
  .hgap {
    flex: 0 1 14px;
    min-height: 12px;
  }
  .hl + .hgap {
    flex: 0 1 14px;
    min-height: 12px;
  }
  .hero .hscene {
    margin-top: -104px;
  }
  .hcard {
    padding-top: 14px;
  }
  .hgrass {
    padding-bottom: 10px;
  }

  /* ── Inside every trip: no floating bar over the page ── */
  .intro {
    padding-top: 36px;
    padding-bottom: 8px;
  }

  .story .pane {
    padding: 36px 16px 20px;
    gap: 16px;
  }
  .story .steps {
    gap: 2px;
  }

  /* Overview: the trip header, then the Travel panel open over the rest */
  #overview .pframe {
    --fh: 420px;
  }
  #overview .ov {
    height: 100%;
    background: var(--white);
  }
  #overview .ov .vtitle {
    font-size: 26px;
    line-height: 30px;
  }
  #overview .ovh {
    gap: 4px;
    padding-top: 16px;
  }
  #overview .ovh .faces {
    margin-top: 2px;
  }
  #overview .ovh .face {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  #overview .opanel.pd {
    display: none;
  }
  #overview .opanel.pt {
    height: auto;
    top: 196px;
    bottom: 0;
    padding-bottom: 68px;
    z-index: 5;
  }
  #overview .opanel .orow:nth-child(n + 5) {
    display: none;
  }

  /* a sheet or an edit screen covers the tab bar, as in the app */
  /* Journal: the page at its own phone size, scrolled down as prints are added */
  #journal .pframe {
    --fh: 420px;
  }
  #journal .jbox {
    margin: 0 0 0 -2px;
    transition: transform 1.1s cubic-bezier(0.45, 0, 0.25, 1);
  }

  /* Overview: the trip page scrolls down to the boarding passes on step three */
  #overview .pscroll {
    background: var(--white);
  }

  /* ── And everything else: one-line tiles, two columns ── */
  .more {
    padding: 36px 16px 20px;
  }
  .more .head {
    margin-bottom: 16px;
  }

  /* ── On iPhone, Android and the web ── */
  .dev {
    padding: 36px 16px 20px;
  }
  .dev .sec-sub {
    margin-top: 8px;
  }
  .dev .dwrap.prop {
    margin-top: 18px;
  }
  .dshots {
    position: relative;
    height: 380px;
  }
  .dshots .desk {
    position: absolute;
    left: 0;
    top: 0;
    width: 340px;
    border-radius: 8px;
    overflow: hidden;
    background: #1b1c1e;
    padding: 4px 4px 0;
    box-shadow: 0 16px 34px rgba(18, 18, 18, 0.2);
  }
  .dshots .desk img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px 4px 0 0;
  }
  .dshots .desk {
    border-radius: 8px 8px 0 0;
  }
  .dshots .desk::after {
    content: "";
    display: block;
    height: 4px;
  }
  .dshots .base2 {
    position: absolute;
    left: -8px;
    top: 0;
    width: 316px;
    height: 6px;
    background: linear-gradient(#d5d5d1, #bdbdb8);
    border-radius: 0 0 6px 6px;
  }
  .dshots .ph1 {
    position: absolute;
    right: 0;
    top: 74px;
    width: 142px;
    height: 302px;
    border-radius: 22px;
    background: #0e0f10;
    padding: 5px;
    box-shadow: inset 0 0 0 1px #2a2c2e, 0 16px 34px rgba(18, 18, 18, 0.25);
  }
  .dshots .ph1 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 17px;
  }
  .dshots .ph1 .isl {
    position: absolute;
    left: 50%;
    top: 10px;
    width: 40px;
    height: 11px;
    margin-left: -20px;
    border-radius: 6px;
    background: #000;
  }

  /* ── Where to next? ── */
  .fin {
    min-height: 0;
    padding-bottom: 210px;
  }
  .fin .inner {
    padding: 40px 16px 8px;
    flex: none;
    gap: 14px;
  }
  .fin {
    padding-bottom: 214px;
  }
  .fin .inner {
    padding-top: 32px;
  }
  .fin .vscene,
  .fin .vvan {
    height: 200px;
    background-size: 246px 200px;
    background-position: 50% 100%;
    bottom: 44px;
  }
}
@media (max-width: 759px) {
  /* ── hero card: one foot row on the card's bottom edge, as the app's first screen (FirstScreen.tsx `Foot`) ── */
  .hcard .inv {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
    padding: 6px 0 0;
    font-size: 14px;
    line-height: 18px;
  }
  .hcard .inv a {
    margin-left: 4px;
  }
  .hcard {
    padding-bottom: 10px;
  }

  /* ── Overview: the app's phone hero art (heroPhoneSvg), full width of the screen, the text over its sky ── */
  #overview .ov .arthd {
    background: var(--white) url(/art/hero-road.svg) 50% 100% / 100% auto no-repeat;
    height: 248px;
    padding: 0;
    box-sizing: border-box;
  }
  #overview .ov .arthd::before,
  #overview .ov .arthd::after {
    display: none;
  }
  #overview .ovp {
    padding-top: 10px;
  }
  #overview .opanel.pt {
    top: 196px;
    padding-bottom: 18px;
    z-index: 60;
  }

  /* ── Where to next?: the first screen's own start block (cards in one sideways row); the scene spans the full width ── */
  .fin .inner {
    gap: 12px;
    padding-bottom: 0;
    align-items: stretch;
  }
  .fin-start .samples {
    margin: 8px -16px 0;
  }
  .fin-start .hcards {
    padding: 0 16px;
  }
  .fin-start .scard {
    scroll-margin-left: 16px;
  }
  .fin-start .samples::after {
    background: linear-gradient(90deg, rgba(251, 251, 249, 0), var(--canvas));
  }
  /* The scene is drawn at 393 x 320 and SCALES WITH THE WIDTH (aspect-ratio, no viewport units), so its sky and ground reach both
     edges at any phone width (Android is 412+); the room under the words is a spacer of the same ratio. */
  .fin .vscene,
  .fin .vvan {
    height: auto;
    aspect-ratio: 393 / 320;
    background-size: 100% 100%;
    background-position: 0 0;
    bottom: 44px;
  }
  .fin {
    padding-bottom: 0;
  }
  .fin::after {
    content: "";
    display: block;
    flex: none;
    aspect-ratio: 393 / 300;
  }
}

/* ───────── Get the app: the last section, on the grass the finale's ground runs into ───────── */
.betasec {
  background: var(--ground);
  color: var(--white);
  padding: 24px var(--px) 40px;
}

.betasec .sec-title {
  color: var(--white);
  margin: 0 0 10px;
}

.betasec .sec-sub {
  color: rgba(255, 255, 255, 0.92);
  max-width: none;
}

.bcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.bc {
  background: var(--white);
  color: var(--ink);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.bc h3 {
  font: 700 22px / 26px var(--sans);
  letter-spacing: -0.5px;
}

.bc p {
  font: 400 16px / 22px var(--sans);
  color: var(--ink-2);
}

.bbtn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--accent);
  color: var(--white);
  font: 500 16px var(--sans);
  letter-spacing: -0.2px;
  text-decoration: none;
}

.bbtn:hover {
  background: var(--accent-pressed);
}

.bsteps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.bsteps a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  font: 500 16px var(--sans);
  letter-spacing: -0.2px;
  text-decoration: none;
}

.bsteps a:hover {
  background: var(--fill);
}

.bsteps b {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent-pressed);
  font: 600 13px / 24px var(--mono);
  text-align: center;
}

.betasec [aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.brows {
  display: none;
}

.bfoot {
  margin-top: 28px;
  font: 400 15px / 22px var(--sans);
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 759px) {
  .betasec {
    padding: 28px 16px 20px;
  }
  .betasec .sec-title {
    font-size: 30px;
    line-height: 34px;
    letter-spacing: -0.8px;
    margin-bottom: 6px;
  }
  .betasec .sec-sub {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.2px;
  }
  .bcards {
    display: none;
  }
  .brows {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin-top: 18px;
    background: var(--white);
    color: var(--ink);
    border-radius: 16px;
    overflow: hidden;
  }
  .brows li + li {
    border-top: 1px solid var(--border);
  }
  .brow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 0 16px;
    color: var(--ink);
    text-decoration: none;
  }
  .bl {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    white-space: nowrap;
  }
  .bl b {
    font: 600 17px var(--sans);
    letter-spacing: -0.3px;
  }
  .bl span {
    font: 400 15px var(--sans);
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brow .chev {
    flex: none;
    color: var(--ink-3);
  }
  .brows li[data-os="android"] .brow {
    min-height: 44px;
  }
  .bthen {
    display: block;
    padding: 0 16px 12px;
    font: 400 13px / 18px var(--sans);
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .bfoot {
    margin-top: 16px;
    font-size: 13px;
    line-height: 18px;
  }
}

/* ═══ THE DESK FIRST SCREEN = THE APP'S (FirstScreen.tsx's desk): the 1440 x 900 composition scaled uniformly to the window ═══
   One composition pixel is `--u`: clamp(0.8, min(W / 1360, H / 900), 1.6) real px (first-layout.ts's deskScale). The hero is the
   window's height; the scene (the app's own art, drawn by generate-home.ts) is pinned to its bottom-left and runs to the right
   edge; a taller window than the composition lifts the content to the middle of the air above the scene. */
@media (min-width: 760px) {
  .hero {
    --u: clamp(0.8px, min(0.07353vw, 0.11111svh), 1.6px);
    --lift: max(0px, calc((100svh - 900 * var(--u)) / 2.5));
    height: auto;
    min-height: max(100svh, calc(900 * var(--u)));
  }
  .hero::after {
    display: none;
  }
  .hscene {
    height: calc(332 * var(--u));
    background-size: calc(3600 * var(--u)) calc(332 * var(--u));
  }
  .hero .hl {
    left: var(--px-flat); /* the site column, not a composition pixel count */
    top: calc(107 * var(--u) + var(--lift));
    --fs: calc(54 * var(--u));
    --lh: calc(56 * var(--u));
    --ls: calc(-1.35 * var(--u));
  }
  .hcard {
    left: var(--px-flat); /* the site column, not a composition pixel count */
    top: calc(255 * var(--u) + var(--lift));
    width: calc(908 * var(--u));
  }
  .cta {
    gap: calc(16 * var(--u));
  }
  .start {
    font-size: calc(17 * var(--u));
    height: calc(52 * var(--u));
    padding: 0 calc(30 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .getapp-link {
    font-size: calc(16 * var(--u));
    line-height: calc(22 * var(--u));
  }
  .or {
    margin-top: calc(31 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(20 * var(--u));
  }
  .samples {
    margin-top: calc(8 * var(--u));
  }
  .hcards {
    gap: calc(12 * var(--u));
  }
  .scard {
    border-radius: calc(14 * var(--u));
  }
  .scard {
    --k: var(--u);
  }
  /* The link and the hairline end at the fourth card's right edge, at every desk width: four cards and three gaps, in the hero's unit */
  .hcard .samples {
    width: calc((4 * 172 + 3 * 12) * var(--u));
    max-width: 100%;
  }
  .inv {
    font-size: calc(15 * var(--u));
    line-height: calc(20 * var(--u));
  }
}

@media (max-width: 759px) {
  .scard {
    width: 145px;
  }
}

/* THE PHONE FIRST SCREEN FILLS THE SCREEN, as the app's does: spare height goes into the gaps above the van (the scene and the card
   stay together), and the card rests up to 24px above the bottom edge. */
@media (max-width: 759px) {
  .hgap {
    flex-grow: 0.75;
  }
  .hl + .hgap {
    flex-grow: 1;
  }
  .hgrass {
    flex: none;
    padding-bottom: clamp(10px, calc(100svh - 690px), 24px);
  }
}

/* the phone first screen's card, mirrored from the app's (FirstScreen.tsx phone-web): 17px sides, a 48 button, the foot with Privacy · Terms */
@media (max-width: 759px) {
  .hcard {
    padding: 17px 17px 24px;
  }
  .hcard .start {
    height: 48px; /* the app's button (LandingNext BOX_HEIGHT) */
    min-width: 50%;
    border-radius: 14px;
  }
  .hcard .getapp {
    margin-top: 0;
  }
  .hcard .getapp-link {
    font-size: 15px;
    line-height: 20px;
  }
  .hcard .or {
    margin-top: 17px;
  }
  .hcard .samples {
    margin: 13px -17px 0;
  }
  .hcard .hcards {
    padding: 0 17px;
  }
  /* THE FOOT, the app's own (FirstScreen.tsx `Foot`): a hairline 16 below the cards, 12 of padding, the 15/20 invite line in ink-secondary
     with its link in ink, Privacy · Terms 13/18 in ink-subtle at the right, 24 under it */
  .hcard .inv {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 0 0;
    font-size: 15px;
    line-height: 20px;
    letter-spacing: -0.16px;
    color: var(--ink-secondary);
  }
  .hcard .inv > span {
    display: flex;
    gap: 4px;
  }
  .hcard .inv .dot {
    display: none; /* the phone stacks the two sentences; the dot only separates them on one line */
  }
  .hcard .inv a {
    margin: 0;
  }
}

/* a short phone (the app scales its scene down; here the card tightens) fits one screen */
@media (max-width: 759px) and (max-height: 760px) {
  .hcard {
    padding: 14px 17px 10px;
  }
  .hcard .start {
    height: 48px;
  }
  .hcard .getapp {
    margin-top: 0;
  }
  .hcard .or {
    margin-top: 4px;
  }
  .hcard .samples {
    margin-top: 8px;
  }
  .hcard .inv {
    padding-top: 8px;
  }
}

/* "Privacy · Terms" stands on the ground at the right margin, as on the app's first screen (desk only: a phone's is in the page footer) */
.hlegal {
  display: none;
}
@media (min-width: 760px) {
  .hlegal {
    display: flex;
    gap: 4px;
    position: absolute;
    right: var(--px-flat);
    bottom: calc(22 * var(--u));
    z-index: 3;
    font: 400 calc(13 * var(--u)) / calc(18 * var(--u)) var(--sans);
    color: rgba(255, 255, 255, 0.92);
  }
  .hlegal a,
  .hlegal i {
    color: inherit;
    font-style: normal;
    text-decoration: none;
  }
  .hlegal a:hover {
    text-decoration: underline;
  }
}

/* THE PHONE FIRST SCREEN AT 65% ILLUSTRATION PRESENCE (maintainer pick, 2026-11-01). The art is scene-phone-65.svg (scripts/scene-phone-65.ts):
   every object scaled to 65% about its own ground point, the ground bands untouched and edge to edge, the box cropped to the tallest
   object. So the scene is just its art (no empty sky riding under the headline); the freed height goes evenly above and below the
   headline, and the card is the app's exact card, 24px above the bottom. Desktop never reads this. */
@media (max-width: 759px) {
  .hero {
    height: auto;
    min-height: 100svh;
  }
  .hgap,
  .hl + .hgap {
    display: block;
    flex: 1 1 0;
    min-height: 12px;
  }
  .hero .hscene {
    position: relative;
    flex: none;
    height: auto;
    aspect-ratio: 246 / 96.4;
    margin-top: 0;
    background: url(/img/scene-phone-65.svg) 50% 100% / 100% 100% no-repeat;
  }
  .hgrass {
    flex: none;
    padding: 0 16px 24px;
  }
  .hcard {
    margin-top: -11px;
    padding: 17px 17px 24px;
  }
  .hcard .or {
    margin-top: 17px;
  }
  .hcard .samples {
    margin: 13px -17px 0;
  }
  .hcard .inv {
    padding-top: 12px;
  }
}

/* only a really short phone (iPhone SE) gives the card its tightening back */
@media (max-width: 759px) and (max-height: 640px) {
  .hgrass {
    padding-bottom: 10px;
  }
  .hcard {
    padding-bottom: 10px;
  }
  .hcard .inv {
    padding-top: 8px;
  }
}

/* "All N looks ›": a quiet green text link on the samples. Desktop: right-aligned on the "or look inside a sample" row. Phone: under the swipe row. */
.alllooks {
  font: 500 15px / 20px var(--sans);
  letter-spacing: -0.3px;
  color: var(--accent);
  text-decoration: none;
}
.alllooks:hover {
  text-decoration: underline;
}
@media (min-width: 760px) {
  .samples {
    position: relative;
  }
  .alllooks {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin-bottom: calc(8 * var(--u));
    font-size: calc(15 * var(--u));
    line-height: calc(20 * var(--u));
  }
}
@media (max-width: 759px) {
  .alllooks {
    display: block;
    margin: 8px 17px 0; /* the samples row bleeds to the card's edges; the link keeps the card's own margin */
  }
}

/* ───────── Questions: the top five, on the canvas under the grass, before the footer ───────── */
.qsec {
  padding: var(--sec-y) var(--px);
}

.qsec .qlist {
  max-width: 760px;
}

.qsec .sec-title {
  margin: 0 0 16px;
}

.qall {
  display: inline-block;
  margin-top: 18px;
  font: 500 16px / 24px var(--sans);
  color: var(--accent);
  text-decoration: none;
}

.qall:hover {
  text-decoration: underline;
}

.qall:focus:not(:focus-visible) {
  outline: none;
}

/* THE FEATURE SECTIONS (2026-11-01): the centred intro, the four page sections with their rows, the tab strip over the picture, and the phone's one-row card with its step bar. */

/* 18. the intro, centred: a small green eyebrow, the page's ONE big statement, then the answer and the sub, small */
.intro.fxintro {
  text-align: center;
  padding: 136px var(--px) 72px;
}
.fxintro .fxeye {
  margin: 0 auto;
  max-width: none; /* home.css's .intro p is a 760 block pinned left: centred here */
  font: 500 15px / 20px var(--mono);
  letter-spacing: 0.24em;
  color: var(--accent);
}
.intro.fxintro .fxbig {
  margin: 18px auto 0;
  font: 700 68px / 72px var(--sans);
  letter-spacing: -2px;
  color: var(--ink);
  max-width: 900px;
  text-wrap: balance;
}
.intro.fxintro p.fxlead {
  margin: 26px auto 0;
  font: 600 22px / 30px var(--sans);
  letter-spacing: -0.3px;
  color: var(--ink);
  max-width: 640px;
  text-wrap: balance;
}
.intro.fxintro p.fxsub {
  margin: 6px auto 0;
  font: 400 19px / 28px var(--sans);
  letter-spacing: -0.2px;
  color: var(--ink-2);
  max-width: 560px;
  text-wrap: balance;
}

/* 8. the text side takes about 45% of the content width, a large plain heading */
@media (min-width: 760px) {
  .story .pane {
    grid-template-columns: minmax(0, 1fr) 520px; /* the picture keeps its 520; at 1440 the words get 500 (45%) */
    gap: 100px;
    align-items: center;
  }
  .story .vgwrap {
    justify-content: flex-end;
  }
}
/* between a phone and a wide screen there is no room for the words beside a 520 picture: the words on top, the picture under them, centred */
@media (min-width: 760px) and (max-width: 1179px) {
  .story .pane {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    justify-items: center;
  }
  .sec-txt.fx {
    width: 100%;
    max-width: 520px;
  }
  .story .vgwrap {
    justify-content: center;
    width: 100%;
  }
}
.sec-txt.fx {
  max-width: 500px;
  gap: 0;
}
.fxh {
  margin: 0;
  font: 600 34px / 40px var(--sans);
  letter-spacing: -0.8px;
  color: var(--ink);
  text-wrap: balance;
}

/* 10. the rows, in the app's own row language: a 40 row tile on the left (oat, ink glyph), the bold action over its grey
       context. The playing row: the tile fills with the accent, its glyph turns white, a thin bar under the row fills for the step. */
.steps.fxrows {
  margin: 34px 0 0;
  gap: 6px;
}
.fxrows li {
  position: relative;
  padding: 0;
}
.fx .stepbtn {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 12px 14px;
  margin: 0 -12px;
  width: calc(100% + 24px);
  border-radius: 16px;
  font: 400 16px / 22px var(--sans);
  letter-spacing: -0.1px;
  color: var(--ink-3);
  transition: background 0.25s;
}
.fx .stepbtn:hover {
  background: rgba(18, 18, 18, 0.03);
}
.fx .stepbtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fxi {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--canvas-oat-light);
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background 0.3s, color 0.3s;
}
.fxi svg {
  display: block;
  width: 20px;
  height: 20px;
}
.fxi .qglyph {
  font: 700 28px / 28px var(--sans);
  height: 18px;
  margin-top: -2px;
}
.fxt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.fxt b {
  font: 600 18px / 24px var(--sans);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.fxt em {
  font-style: normal;
  color: var(--ink-3);
  margin-top: 1px;
}
.fxrows li.on .fxi {
  background: var(--accent);
  color: var(--white);
}
/* the step's bar: under the row's words, a faint track filling with the accent */
.fxrows .pbar {
  position: absolute;
  left: 56px;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  overflow: hidden;
  transition: background 0.3s;
}
.fxrows li.on .pbar {
  background: var(--border);
}
.fxrows li.on .pbar::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--accent);
  border-radius: 1px;
}
.fxseg {
  display: none;
}

/* 12. the page marker: the four pages as quiet tabs, CENTRED over the picture, this one lit */
.fxframe {
  position: relative;
  width: 520px;
  max-width: 100%;
}
.pgstrip {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--border);
}
.pgt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 12px;
  font: 500 15px / 20px var(--sans);
  color: var(--ink-3);
  text-decoration: none;
}
.pgt svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}
.pgt:hover {
  color: var(--ink-2);
}
.pgt.on {
  color: var(--ink);
}
.pgt.on svg {
  color: var(--accent);
  opacity: 1;
}
.pgt.on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* no app tab bar inside the pictures on desktop: the + sits at the screen's foot */
.pframe .fab {
  bottom: 16px;
}

/* ── Plan: the "line" the plan is typed as, and the filled fields flashing as the line fills them ── */
.psheet .xr .ph {
  color: var(--ink-faint);
}

/* ── Money: the app's balance card on top of the list ── */
.mbal {
  margin: 2px 0 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
  overflow: hidden;
  transition: box-shadow 0.4s, border-color 0.4s;
}
.mbal.hi {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.mb-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px 10px;
}
.mb-top .lab {
  font: 400 15px / 20px var(--sans);
  color: var(--ink-2);
}
.mb-top .big {
  font: 700 28px / 32px var(--sans);
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.mb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-top: 1px solid var(--border);
  font: 400 14px / 20px var(--sans);
  color: var(--ink);
}
.mb-row .face {
  width: 24px;
  height: 24px;
  font-size: 11px;
  box-shadow: none;
}
.mb-row .nm {
  flex: 1;
}
.mb-row .a {
  font-variant-numeric: tabular-nums;
}
.xs-card.paid.hit {
  background: var(--accent-subtle);
}
.xs-card.paid {
  transition: background 0.25s;
}

/* ── Journal: one phone screen, the board scrolling as it fills ── */
#journal .pframe {
  --fh: 420px;
}
#journal .jbox {
  margin: 0 auto;
  height: 780px;
}
#journal .jbox.k {
  transition: transform var(--ms, 0.9s) cubic-bezier(0.45, 0, 0.25, 1);
}
#journal .jbox.nt,
#journal .jbox.nt * {
  transition: none !important;
}
.jtype.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: var(--accent);
  animation: blink 0.9s steps(1) infinite;
}
.jnote .by {
  transition: opacity 0.3s;
}
.jnote .by.off {
  opacity: 0;
}
.jquote p:empty,
.jquote .by:empty {
  min-height: 30px;
}
.jquote .by:empty {
  min-height: 14px;
}
.print .cap2:empty::before {
  content: "\200b";
}

/* ── the phone: ONE row at a time (the playing one), dots under it; the picture gets the room; one screen per section ── */
@media (max-width: 759px) {
  .intro.fxintro {
    padding: 48px 16px 40px;
  }
  .fxintro .fxeye {
    font-size: 13px;
    letter-spacing: 0.16em;
  }
  .intro.fxintro .fxbig {
    margin-top: 12px;
    font-size: 38px;
    line-height: 42px;
    letter-spacing: -1.1px;
  }
  .intro.fxintro p.fxlead {
    margin-top: 16px;
    font-size: 18px;
    line-height: 25px;
  }
  .intro.fxintro p.fxsub {
    margin-top: 4px;
    font-size: 16px;
    line-height: 23px;
  }
  .story .pane {
    padding: 28px 16px 16px;
    gap: 14px;
  }
  .fxh {
    font-size: 23px;
    line-height: 28px;
    letter-spacing: -0.4px;
  }
  .sec-txt.fx {
    width: 100%;
    max-width: none;
  }
  .fxrowbox {
    align-self: stretch;
    margin-top: 12px;
    padding: 12px 12px 2px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
  }
  .steps.fxrows {
    margin: 0;
    gap: 0;
    height: 59px;
    position: relative;
  }
  .fxrows li {
    display: none;
  }
  .fxrows li.on {
    display: block;
    animation: fxin 0.35s ease;
  }
  .fx .stepbtn {
    gap: 12px;
    padding: 0;
    margin: 0;
    width: 100%;
    align-items: start;
    font-size: 14px;
    line-height: 19px;
  }
  .fx .stepbtn:hover {
    background: none;
  }
  .fxt b {
    font-size: 16px;
    line-height: 21px;
  }
  .fxrows .pbar {
    display: none;
  }
  /* 14. the stories bar, under the row's words: done segments full, the playing one filling, each a 26px tap target */
  .fxseg {
    display: flex;
    gap: 6px;
    margin-left: 52px;
  }
  .fxsg {
    flex: 1;
    height: 26px;
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .fxsg i {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: var(--border);
    overflow: hidden;
  }
  .fxsg i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--f, 0) * 100%);
    background: var(--accent);
    border-radius: 2px;
  }
  .fxframe {
    width: 100%;
  }
  .pgstrip {
    gap: 18px;
    margin-bottom: 12px;
  }
  .pgt {
    gap: 6px;
    padding-bottom: 9px;
    font-size: 14px;
    line-height: 18px;
  }
  .pgt svg {
    width: 16px;
    height: 16px;
  }
  #overview .pframe,
  #plan .pframe,
  #money .pframe,
  #journal .pframe,
  #invite .pframe {
    --fh: 540px;
  }
  /* the taller picture: Travel opens lower, over the art, with all three of its rows */
  #overview .opanel.pt {
    top: 290px;
    padding-bottom: 12px;
  }
  #overview .opanel .orow:nth-child(n + 5) {
    display: flex;
  }
}
@keyframes fxin {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ═══ Round 6 (maintainer, 2026-11-01): Invite and Make it yours in the page sections' rows; "And everything else" as moments; real captures ═══ */

/* ── Invite: the heading steps down to the page sections' level; the picture is the page sections' phone frame ── */
#invite h2.sec-title.fxh {
  font: 600 34px / 40px var(--sans);
  letter-spacing: -0.8px;
  margin: 0;
}

/* ── Make it yours: the heading and its one static row, then a slice of /looks (showcase.css's .lp pieces) ── */
#themes .mxwrap {
  padding: 84px var(--px);
}
#themes .sec-txt.fx {
  max-width: none;
  display: block;
}
.mxhd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
#themes .mxhd h2 {
  margin: 0;
  font: 600 34px / 40px var(--sans);
  letter-spacing: -0.8px;
}
.mxall {
  font: 500 17px / 22px var(--sans);
  letter-spacing: -0.2px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.mxall span {
  color: var(--accent);
  margin-left: 2px;
}
.mxall:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mxall:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.fxi .aglyph {
  font: 700 16px / 16px var(--sans);
  letter-spacing: -0.4px;
}
/* the rows say what a look is; they do not play: no hover, no lit tile, no bar */
#themes .mxstatic .stepbtn {
  cursor: default;
}
#themes .mxstatic .stepbtn:hover {
  background: none;
}
.mxlooks.lp {
  --px: 0px;
  padding: 0;
}
.mxlooks .showcase {
  margin-top: 28px;
  border-radius: 20px;
}
.mxlooks .plate .name {
  margin: 0;
}
.mxlooks .win .wname {
  margin-top: 4px;
}
/* the strip: one row of fixed-width thumbnails that scrolls sideways (it never shrinks them to fit, so a new look just extends it);
   the bar under it is its scroll track, and a fade on the side that can still scroll. home.js sets --th, --po, --fl and --fr. */
.mxlooks .rail {
  --tw: 150px;
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--tw);
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px 4px;
  margin: 10px -4px 0;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--fl, 0px),
    #000 calc(100% - var(--fr, 0px)),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 var(--fl, 0px),
    #000 calc(100% - var(--fr, 0px)),
    transparent 100%
  );
}
.mxlooks .rail::-webkit-scrollbar {
  display: none;
}
.mxlooks .win {
  scroll-snap-align: start;
}
.mxbar {
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  cursor: pointer;
}
.mxbar i {
  display: block;
  height: 100%;
  width: calc(var(--th, 1) * 100%);
  margin-left: calc(var(--po, 0) * 100%);
  background: var(--ink);
  border-radius: 2px;
}
.mxphone,
.mxall.mxfoot {
  display: none;
}
/* "Explore looks & samples" is the section's last line, flush left under the strip */
.mxall.mxend {
  display: inline-block;
  margin-top: 18px;
}

/* a desk: the one row under the heading, the showcase over the whole column, every live look in one strip under it */
@media (min-width: 1180px) {
  #themes .steps.fxrows {
    margin-top: 34px;
    max-width: 560px;
  }
}
/* between a phone and a wide screen: the rows stacked, the showcase and strip full width; the name and mood go under the picture so the
   plate does not cover its hero */
@media (min-width: 760px) and (max-width: 1179px) {
  #themes .steps.fxrows {
    margin-top: 34px;
    max-width: 560px;
  }
  .mxlooks .showcase {
    aspect-ratio: auto;
    height: calc((100vw - 192px) * 240 / 576 + 78px);
    background: transparent;
    border-radius: 0;
  }
  .mxlooks .showcase-art {
    bottom: 78px;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    background: var(--canvas-fill);
  }
  .mxlooks .plate {
    left: 0;
    bottom: 0;
    padding: 12px 0 0;
    background: transparent;
    border: 0 !important;
    max-width: 100%;
  }
}

/* ── And everything else: a card per moment, its spot top left, where you are in bold, what the app does in one plain line ── */
.mgrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.mc {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 20px 22px;
  min-width: 0;
}
.mc .ms {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 0 14px;
}
.mc .ms svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mc h3 {
  margin: 0;
  font: 600 18px / 24px var(--sans);
  letter-spacing: -0.3px;
  color: var(--ink);
}
.mc p {
  margin: 4px 0 0;
  font: 400 16px / 22px var(--sans);
  letter-spacing: -0.1px;
  color: var(--ink-3);
}
@media (min-width: 760px) and (max-width: 1179px) {
  .mgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ── the devices: real captures in the frames; two actions under them ── */
.lap .scr.capscr {
  display: block;
}
.lap .scr.capscr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.devacts {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

@media (max-width: 759px) {
  #invite h2.sec-title.fxh {
    font-size: 23px;
    line-height: 28px;
    letter-spacing: -0.4px;
  }
  #themes .mxwrap {
    padding: 28px 16px 16px;
  }
  #themes .mxhd h2 {
    font-size: 23px;
    line-height: 28px;
    letter-spacing: -0.4px;
  }
  #themes .mxstatic {
    height: auto;
    display: grid;
    gap: 14px;
    padding: 2px 0 12px;
  }
  #themes .mxstatic li {
    display: block;
    animation: none;
  }
  /* one look at a time: the whole showcase over its own sky, the name under it, dots, swipe */
  .mxlooks .showcase,
  .mxall.mxend {
    display: none;
  }
  /* the phone's order: the picture, its name, then the same strip and its track, then the link */
  .mxlooks.lp {
    display: flex;
    flex-direction: column;
  }
  .mxphone {
    display: contents;
  }
  .mxworld {
    order: 1;
    margin-top: 14px;
  }
  .mxplate {
    order: 2;
  }
  .mxlooks .rail {
    order: 3;
    margin: 12px -16px 0;
    padding: 6px 16px 4px;
  }
  .mxlooks .mxbar {
    order: 4;
    margin-top: 8px;
  }
  .mxall.mxfoot {
    order: 5;
  }
  .mxworld {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: var(--canvas-fill);
    touch-action: pan-y;
  }
  .mxtrack {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
  }
  .mxw {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 363 / 240;
    overflow: hidden;
  }
  .mxw img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    position: absolute;
    display: block;
    max-width: none;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
  }
  .mxw img.shots {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
  }
  .mxplate {
    margin-top: 12px;
    min-height: 56px;
  }
  .mxplate .name {
    font: 700 26px / 30px var(--sans);
    letter-spacing: -0.6px;
    color: var(--ink);
    margin: 0;
  }
  .mxplate .moodline {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 21px;
  }
  .mxall.mxfoot {
    display: inline-block;
    margin-top: 10px;
    font-size: 16px;
  }
  /* the moments: a sideways strip of cards, the next one peeking */
  .mgrid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 4px;
    scroll-padding: 0 16px;
  }
  .mgrid::-webkit-scrollbar {
    display: none;
  }
  .mgrid .mc {
    flex: 0 0 248px;
    scroll-snap-align: start;
  }
  .mc h3 {
    font-size: 16px;
    line-height: 21px;
  }
  .mc p {
    font-size: 14px;
    line-height: 19px;
  }
  .devacts {
    margin-top: 10px;
    gap: 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mxtrack {
    transition: none;
  }
}

/* ROUND 7 over the live homepage's first screen (SPEC 40): every live sample in one row that drifts left, a thin track under it,
   "Explore looks & samples ›". Only the hero's row: the finale keeps its own. */
:is(.hero, .fin) .hcards {
  scroll-snap-type: none !important;
  /* room for the hover lift and its shadow inside the row's clip */
  padding-top: 4px;
  margin-top: -4px;
  padding-bottom: 12px;
  margin-bottom: -10px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 22px,
    #000 calc(100% - 44px),
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 22px,
    #000 calc(100% - 44px),
    transparent 100%
  );
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
:is(.hero, .fin) .hcards.drag {
  cursor: grabbing;
}
:is(.hero, .fin) .hcards .scard {
  scroll-snap-align: none !important;
}
:is(.hero, .fin) .hcards img,
:is(.hero, .fin) .hcards a {
  -webkit-user-drag: none;
}
/* the row's -4px top (room for the lift) must not collapse into .samples' margin and lift the whole group */
:is(.hero, .fin) .samples {
  display: flow-root;
}
/* the live phone row's own right-edge fade is replaced by the mask */
:is(.hero, .fin) .samples::after {
  display: none !important;
}

/* Stillness has no art: its card shows its tag line where the strip would be, as the app's MiniTripCard does */
.scard .sc-tag {
  display: flex;
  align-items: flex-end;
  padding: 0 calc(12 * var(--k)) calc(10 * var(--k));
  box-sizing: border-box;
  border-top: 1px solid rgb(18 18 18 / 0.08);
  margin: 0 calc(12 * var(--k));
  left: 0;
  right: 0;
  padding-left: 0;
}
.scard .sc-tag i {
  font: italic 400 calc(13 * var(--k)) / calc(17 * var(--k)) Georgia, "Times New Roman", serif;
  color: var(--ink-3);
}

/* THE SCROLLBAR IS THE TRACK (the card's rule under the "Explore looks" link is the `hr`, as the app's first screen): the hairline under the row IS its scrollbar. A short, darker thumb
   rides along it showing the window's place among all the samples, and drags. The line never fades; the thumb is faint while the
   row drifts on its own and darker while a hand is on the row or the line. The hit area is 16px tall and invisible. */
.strack {
  position: relative;
  height: 16px;
  margin-top: 0;
  cursor: pointer;
  touch-action: none;
}
.strack::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  border-top: 1px solid var(--border);
}
.strack i {
  position: absolute;
  top: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-3);
  opacity: 0.45;
  transition: opacity 0.5s ease;
}
.strack.live i,
.strack:hover i,
.strack.held i {
  opacity: 1;
}
:is(.hero, .fin) .samples {
  margin-bottom: calc(6 * var(--u, 2px));
}
@media (max-width: 759px) {
  .strack {
    margin: 6px 17px 0;
  }
  :is(.hero, .fin) .alllooks {
    display: inline-block;
    margin-top: 6px;
  }
}

/* THE CARD'S FOOT ROW (maintainer, 2026-11-02; the app's `FIRST_FOOT`): ONE row under the card's rule, "Got an invite? Join the trip" at the
   left and "Sign in" alone flush right. Both cells are at least 44 tall and the link fills its cell; too narrow for both (a 320 phone) and
   "Sign in" wraps left-aligned under the invite cell. The rule's own spacing is the `hr`'s margin above and the cells' 44 below. */
.hcard .inv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  padding: 0;
  font-size: 15px;
  line-height: 20px;
}
.hcard .inv > span,
.hcard .inv > a {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hcard .inv > span a,
.hcard .inv > a {
  align-self: stretch;
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.hcard .inv > a {
  min-width: 44px;
  justify-content: flex-end;
}
@media (min-width: 760px) {
  .hcard .inv {
    width: calc((4 * 172 + 3 * 12) * var(--u, 1));
    max-width: 100%;
  }
  .hcard .inv > span,
  .hcard .inv > a {
    font-size: calc(15 * var(--u, 1));
  }
}
@media (max-width: 759px) {
  /* the rule sits 16 under the "Explore looks" link, as the app's (the row's own 12 of bottom margin is not added to it) */
  .hcard .samples {
    margin-bottom: 0;
  }
}

/* THE TRACK IS THE CARD'S DIVIDER (maintainer, 2026-11-02, card mock 1A): the one line between the samples link and the invite row. */
@media (min-width: 760px) {
  .hcard .samples .strack {
    margin-top: 8px;
  }
}