@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --canvas: #f8f8f8;
  --surface: #ffffff;
  --ink: #111111;
  --muted: #666666;
  --faint: #b8b8b8;
  --hero: #e80030;
  --hero-deep: #c00028;
  --hero-soft: #f8d0d8;
  --lime: #b1d243;
  --lime-deep: #3f6b1c;
  --lime-soft: #e8f4c0;
  --sun: #fcbb2d;
  --sky: #2b73d6;
  --mark: #fff9b0;
  --accent: #fffa00;
  --peach: #fdb5a4;
  --paper: #f3ebd8;
  --paper-deep: #e4d5b5;
  --border: #e8e8e8;
  --wood: #b8894a;
  --desk: #d9c4a0;
  --depth: 18 28 46;
  --held: 0 24px 48px rgb(20 10 12 / 0.16), 0 2px 0 rgb(20 10 12 / 0.05);
  --float: 0 12px 32px rgb(16 10 12 / 0.16);
  --soft: 0 9px 25px rgb(0 0 0 / 0.1);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --pill: 999px;
  --font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
    "YuGothic", "Meiryo", sans-serif;
  --space: 8px;
  --max: 1120px;
  --header-h: 64px;
  --focus: 0 0 0 3px color-mix(in srgb, var(--hero) 40%, transparent);
  /* Press feedback is instant and lives on the pointer, never on release. */
  --press: 0.96;
  --press-dur: 110ms;
  color-scheme: light only;
}

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

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input {
  font: inherit;
}

/* Anchor targets sit below the sticky header rather than under it. */
main > section,
#preview {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* The brand returns to the very top, so it cancels the header offset. */
#top {
  scroll-margin-top: var(--header-h);
}

:focus {
  outline: none;
}

:focus-visible {
  box-shadow: var(--focus);
}

.skip {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 40;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--pill);
  transform: translateY(-140%);
}

.skip:focus {
  transform: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  padding: 10px 20px;
  background: rgb(248 248 248 / 0.78);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 20px;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav a {
  text-decoration: none;
  color: rgb(17 17 17 / 0.7);
  padding: 10px 14px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--pill);
  font-size: 14px;
  font-weight: 600;
}

.nav .nav-cta {
  background: var(--hero);
  color: var(--surface);
  padding: 10px 16px;
}

@media (hover: hover) {
  .nav a:hover {
    color: var(--ink);
  }

  .nav .nav-cta:hover {
    background: var(--hero-deep);
    color: var(--surface);
  }
}

.hero {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 24px 32px 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.kicker {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

h1,
h2 {
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-weight: 700;
}

h1 {
  font-size: clamp(36px, 5.4vw, 64px);
  white-space: pre-line;
}

h2 {
  font-size: clamp(28px, 4vw, 44px);
  white-space: pre-line;
}

.lede {
  margin: 16px 0 28px;
  max-width: 38ch;
  font-size: 18px;
  color: var(--muted);
}

.cta-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--pill);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--soft);
}

.pill-primary {
  background: var(--hero);
  color: var(--surface);
}

@media (hover: hover) {
  .pill-primary:hover {
    background: var(--hero-deep);
  }
}

/* Press feedback lives on pointer-down for every control, never on release. */
.pill:active,
.choice:active,
.tabbar button:active,
.pager button:active,
.sheet-close:active,
.brand:active {
  transform: scale(var(--press));
}

.nav a:active {
  transform: scale(0.97);
}

/* A disabled control must not look pressable. */
.pager button:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none;
}

.pager button:disabled:active {
  transform: none;
}

.pill-ghost {
  background: transparent;
  color: var(--hero);
  box-shadow: none;
  min-height: 44px;
  padding: 8px 4px;
}

.whisper {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "phone mascot"
    "phone hint";
  align-items: end;
  justify-items: end;
  column-gap: 24px;
}

.page-mascot {
  grid-area: mascot;
  position: relative;
  bottom: 0px;
  width: 132px;
  height: 132px;
  justify-self: start;
  z-index: 1;
  filter: drop-shadow(0 10px 18px rgb(17 17 17 / 0.16));
}

.page-mascot-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
  user-select: none;
}

.page-mascot-squash {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 78%;
}

.page-mascot-layer {
  position: absolute;
  inset: 0;
  background-size: 300% 300%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.page-mascot-button:focus-visible {
  border-radius: 24px;
}

.phone {
  grid-area: phone;
  /* Sized from the available height so a short laptop window cuts off as little
     of the hero as possible. 0.46875 is the 9 / 19.2 aspect ratio and 190px
     covers the sticky header, the hero padding, and the tap hint. The 300px
     floor is the narrowest the Read card still fits inside without clipping. */
  width: clamp(300px, calc((100svh - 190px) * 0.46875), min(340px, 100%));
  aspect-ratio: 9 / 19.2;
  background: #1c1c1e;
  border-radius: 42px;
  padding: 12px;
  box-shadow: var(--held);
  position: relative;
}

.phone-screen {
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--desk);
  position: relative;
  display: flex;
  flex-direction: column;
}

.desk {
  flex: 1;
  position: relative;
  background:
    radial-gradient(120% 80% at 50% 0%, #efe3cc 0%, var(--desk) 55%, #c9ae7e 100%);
  display: grid;
  place-items: center;
  padding: 56px 14px 72px;
}

/* The Saved and Tracker panes are absolutely positioned, so the desk stays in
   flow while they are open. `visibility` keeps its layout box (the phone would
   otherwise collapse to a sliver in the content-sized hero stage) while
   removing the card and its word buttons from the tab order and accessibility
   tree. */
.desk.is-behind {
  visibility: hidden;
}

.read-chrome {
  position: absolute;
  inset: 10px 12px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
  pointer-events: none;
}

.badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgb(255 255 255 / 0.86);
  padding: 6px 10px;
  border-radius: var(--pill);
}

.dots {
  display: flex;
  gap: 6px;
}

.dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(17 17 17 / 0.18);
}

.dots span.on {
  background: var(--ink);
}

.tabbar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgb(255 255 255 / 0.92);
  backdrop-filter: blur(16px);
  border-radius: var(--pill);
  z-index: 7;
  padding: 4px;
}

.tabbar button {
  border: 0;
  background: transparent;
  border-radius: var(--pill);
  font-weight: 700;
  font-size: 13px;
  color: var(--muted);
  min-height: 40px;
  cursor: pointer;
}

.tabbar button[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 4px 12px rgb(17 17 17 / 0.08);
}

.object {
  /* The tilt is a custom property so a gesture can compose a translate with it
     instead of replacing the whole transform. */
  --tilt: -2deg;
  width: 100%;
  max-width: 280px;
  transform: rotate(var(--tilt));
  box-shadow: var(--float);
  position: relative;
  touch-action: none;
}

.object.face-label {
  --tilt: -3deg;
}

.object.face-stub {
  --tilt: -2.4deg;
}

.object.face-transit {
  --tilt: 0deg;
}

.letter {
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: 12px;
  overflow: hidden;
}

.letter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--paper-deep);
}

.letter-head strong {
  display: block;
  font-family: var(--jp);
  font-size: 13px;
}

.letter-head small {
  color: var(--muted);
  font-size: 11px;
}

.stamp {
  width: 38px;
  height: 38px;
  border: 2px solid var(--hero);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--hero);
  font-family: var(--jp);
  font-size: 11px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--hero);
}

.barcode {
  display: flex;
  gap: 2px;
  align-items: end;
  padding: 8px 12px;
  height: 28px;
}

.barcode i {
  display: block;
  background: var(--ink);
  opacity: 0.72;
  height: 100%;
}

.letter-foot {
  border-top: 1px solid var(--paper-deep);
  margin: 0 12px;
  padding: 10px 0 12px;
  color: var(--muted);
  font-family: var(--jp);
  font-size: 11px;
  font-weight: 700;
}

.label {
  background: var(--surface);
  border: 3px solid #e85a1a;
  border-radius: 8px;
  overflow: hidden;
}

.label-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #e85a1a;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.chip {
  background: #fff;
  color: #c84a12;
  border-radius: var(--pill);
  padding: 2px 8px;
  font-family: var(--jp);
  font-size: 12px;
}

.label-meta {
  padding: 12px 12px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.stub {
  display: flex;
  background: var(--paper);
  border: 1px solid var(--paper-deep);
  border-radius: 6px;
  overflow: hidden;
}

.stub-side {
  width: 68px;
  background: var(--peach);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  text-align: center;
}

.stub-side .tiny {
  color: var(--hero);
  font-size: 10px;
  font-weight: 800;
}

.stub-side .seat {
  font-size: 22px;
  font-weight: 800;
}

.stub-main {
  flex: 1;
  padding: 12px;
}

.stub-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  color: var(--hero);
  margin-bottom: 8px;
}

.transit {
  background: #141414;
  border: 5px solid #2a2a2a;
  border-radius: 4px;
  color: #f4d27a;
  padding: 8px;
}

.transit-grid {
  display: grid;
  grid-template-columns: 1fr 5px 1fr;
  min-height: 150px;
  background: #000;
}

.transit-grid > div {
  padding: 10px;
}

.transit-bar {
  background: #2a2a2a;
}

.next-chip {
  display: inline-block;
  background: #f4d27a;
  color: #111;
  font-family: var(--jp);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.station {
  font-family: var(--jp);
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.door {
  margin-top: 18px;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
}

.jp {
  font-family: var(--jp);
  font-size: clamp(18px, 4.8vw, 23px);
  font-weight: 600;
  line-height: 1.85;
  padding: 8px 12px 4px;
  color: var(--ink);
}

.transit .jp {
  color: #f4d27a;
  font-size: 13px;
  padding: 0;
  line-height: 1.55;
}

.word {
  display: inline;
  margin: 0;
  padding: 0 1px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 28%, transparent);
}

.word[data-tappable="true"]:focus-visible {
  background: var(--mark);
  text-decoration-color: var(--ink);
}

/* An inline element cannot be scaled, so the press reads as the highlight. */
.word[data-tappable="true"]:active {
  background: var(--mark);
  text-decoration-color: var(--ink);
}

@media (hover: hover) {
  .word[data-tappable="true"]:hover {
    background: var(--mark);
    text-decoration-color: var(--ink);
  }
}

.word.kept {
  background: var(--lime-soft);
  text-decoration-color: var(--lime-deep);
}

.word[data-tappable="false"] {
  cursor: default;
  text-decoration: none;
}

.reason {
  margin: 8px 12px 12px;
  display: inline-block;
  background: var(--lime-soft);
  color: var(--lime-deep);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--pill);
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(20px);
  border-radius: 28px 28px 0 0;
  padding: 10px 16px 64px;
  box-shadow: 0 -20px 56px rgb(16 10 12 / 0.22);
  z-index: 8;
  transform: translateY(110%);
  opacity: 0;
  /* `visibility: hidden` is what actually removes the dialog and its buttons from
     the tab order and the accessibility tree while the sheet is closed. */
  visibility: hidden;
  pointer-events: none;
}

.sheet.open {
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The grabber is a wide, forgiving drag target; the visible bar is drawn inside
   it, so the hit area is not the 4px line itself. */
.grab {
  width: 100%;
  height: 26px;
  margin: -6px 0 4px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: grab;
  touch-action: none;
}

.grab::after {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: var(--pill);
  background: var(--border);
}

.sheet.is-dragging,
.sheet.is-dragging .grab {
  cursor: grabbing;
}

.sheet-word {
  margin: 0;
  text-align: center;
  font-family: var(--jp);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sheet-read {
  margin: 2px 0 0;
  text-align: center;
  color: var(--sky);
  font-size: 13px;
  font-weight: 700;
}

.sheet-mean {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
}

.sheet .pill {
  width: 100%;
  margin-top: 16px;
  background: var(--accent);
  color: var(--ink);
}

.sheet .pill[disabled] {
  background: var(--lime-soft);
  color: var(--lime-deep);
}

.sheet-close {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 0;
  background: none;
  color: var(--muted);
  min-height: 44px;
  cursor: pointer;
}

.pane {
  position: absolute;
  inset: 0;
  background: var(--canvas);
  padding: 56px 16px 72px;
  overflow: auto;
  z-index: 3;
}

.pane h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.pane .sub {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
}

.saved-item {
  background: var(--surface);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--soft);
}

.saved-item .jp-line {
  font-family: var(--jp);
  font-size: 15px;
  line-height: 1.6;
  margin: 8px 0 0;
}

.saved-word {
  font-family: var(--jp);
  font-size: 22px;
  font-weight: 800;
}

.state {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--lime-deep);
  background: var(--lime-soft);
  padding: 2px 8px;
  border-radius: var(--pill);
  vertical-align: middle;
}

.empty {
  color: var(--muted);
  font-size: 14px;
}

.today {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

.today.kept {
  color: var(--lime-deep);
}

.quiz {
  margin-top: 16px;
  background: var(--surface);
  border-radius: 16px;
  padding: 14px;
}

.quiz-sentence {
  margin: 0 0 10px;
  font-family: var(--jp);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.quiz-label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiz-word {
  margin: 0 0 12px;
  font-family: var(--jp);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.quiz-result {
  margin: 10px 0 0;
  min-height: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lime-deep);
}

.quiz-result.wrong {
  color: var(--hero-deep);
}

.choice {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  min-height: 44px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
}

.choice[aria-pressed="true"] {
  background: var(--lime-soft);
  border-color: var(--lime);
}

.choice[data-state="wrong"] {
  background: var(--hero-soft);
  border-color: var(--hero);
  color: var(--hero-deep);
}

.pager {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 64px;
  display: flex;
  justify-content: space-between;
  z-index: 4;
}

.pager[hidden] {
  display: none;
}

.pager button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  cursor: pointer;
  font-size: 18px;
}

.hint {
  grid-area: hint;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

section {
  padding: 72px 24px;
  max-width: var(--max);
  margin: 0 auto;
}

.band {
  background: var(--surface);
}

.moments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}

.moment-art {
  display: flex;
  align-items: end;
  gap: 16px;
}

.moment-art img {
  width: 140px;
}

.loop {
  display: grid;
  gap: 28px;
}

.loop ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.loop li {
  padding-top: 8px;
}

.num {
  display: block;
  color: var(--hero);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 8px;
}

.loop h3,
.homes article h3 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.homes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.homes p,
.loop p {
  margin: 0;
  color: var(--muted);
}

.mastery {
  margin: 28px 0 0;
  font-weight: 600;
}

.avail {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

.pair {
  margin-top: 16px;
  font-weight: 600;
}

.faq details {
  border-top: 1px solid var(--border);
  padding: 16px 0;
}

.faq details:last-child {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.faq p {
  margin: 8px 0 0;
  color: var(--muted);
}

.site-footer {
  padding: 32px 24px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 14px;
}

.legal-links {
  display: flex;
  gap: 16px;
}

.legal-links a {
  color: var(--ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.legal-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 32px 24px 72px;
}

.legal-page h1 {
  font-size: 36px;
  white-space: normal;
}

.legal-page h2 {
  font-size: 20px;
  margin: 28px 0 8px;
  white-space: normal;
}

.legal-meta {
  color: var(--muted);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

@media (max-width: 1180px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    order: 2;
  }

  .hero-stage {
    order: 1;
    justify-self: center;
  }
}

@media (max-width: 860px) {
  .nav a:not(.nav-cta) {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 16px 16px 32px;
    gap: 16px;
  }

  .hero-copy {
    order: 2;
  }

  .hero-stage {
    order: 1;
    width: 100%;
    grid-template-columns: 1fr;
    grid-template-areas:
      "phone"
      "hint"
      "mascot";
    justify-items: start;
    column-gap: 0;
    row-gap: 0;
  }

  .cta-row {
    order: 3;
  }

  h1 {
    font-size: clamp(32px, 10vw, 42px);
  }

  .lede {
    font-size: 16px;
    max-width: none;
  }

  .phone {
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    height: min(78svh, 640px);
  }

  .desk {
    padding: 48px 12px 68px;
  }

  .page-mascot {
    width: min(150px, 45%);
    height: auto;
    aspect-ratio: 1;
    max-width: 150px;
    margin: 12px 0 0;
    justify-self: start;
  }

  .loop ol,
  .homes,
  .moments,
  .avail {
    grid-template-columns: 1fr;
  }

  section {
    padding: 56px 20px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .tabbar,
  .sheet {
    backdrop-filter: none;
    background: var(--surface);
  }
}

@media (prefers-contrast: more) {
  .site-header,
  .tabbar,
  .sheet {
    backdrop-filter: none;
    background: var(--surface);
  }

  .site-header,
  .tabbar,
  .sheet,
  .saved-item,
  .quiz,
  .choice,
  .pager button {
    border: 1px solid var(--ink);
  }

  .dots span {
    background: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .object,
  .object.face-label,
  .object.face-stub {
    transform: none;
  }

  .sheet,
  .pill,
  .choice,
  .tabbar button,
  .pager button,
  .sheet-close,
  .nav a,
  .brand {
    transition: none;
  }

  .sheet {
    transform: none;
  }

  .sheet:not(.open) {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sheet {
    transition:
      transform 280ms cubic-bezier(0.34, 1.2, 0.64, 1),
      opacity 200ms ease,
      visibility 0s linear 280ms;
  }

  .sheet.open {
    transition:
      transform 280ms cubic-bezier(0.34, 1.2, 0.64, 1),
      opacity 200ms ease,
      visibility 0s linear 0s;
  }

  .pill,
  .choice,
  .tabbar button,
  .pager button,
  .sheet-close,
  .nav a,
  .brand {
    transition:
      transform var(--press-dur) ease-out,
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease;
  }
}

/* A gesture owns the element while it is under the finger, so any CSS
   transition must stand down and let the pointer drive the value directly.
   The sheet needs this because it carries a transition; the card rules are a
   guard, because a transition added to `.object` later would silently smooth
   the drag and break 1:1 tracking. Placed last so it outranks the rules above. */
.sheet.is-dragging,
.object.is-dragging,
.desk.is-dragging .object {
  transition: none;
}