@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,
#pricing {
  scroll-margin-top: calc(var(--header-h) + 28px);
}

/* 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: 12px;
  z-index: 20;
  padding: 0 16px;
}

.nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  max-width: 960px;
  min-height: var(--header-h);
  margin: 0 auto;
  padding: 0 10px 0 20px;
  background: rgb(17 17 17 / 0.94);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgb(17 17 17 / 0.16);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}

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

.nav-left {
  justify-self: start;
}

.nav-right {
  justify-self: end;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 20px;
  color: var(--surface);
  padding: 6px 0;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

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

.nav .nav-cta {
  background: var(--hero);
  color: var(--surface);
  padding: 10px 18px;
  border-radius: var(--pill);
  white-space: nowrap;
}

@media (hover: hover) {
  .nav a:hover {
    color: var(--surface);
    background: rgb(255 255 255 / 0.1);
  }

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

/* Chameleon nav - Alma-style palette swap while the pill sits over a dark
   field (the red #get band, the ink footer). */
.nav.is-light {
  background: rgb(255 255 255 / 0.94);
  border-color: rgb(17 17 17 / 0.08);
}

.nav.is-light .brand {
  color: var(--ink);
}

.nav.is-light a {
  color: rgb(17 17 17 / 0.66);
}

.nav.is-light .nav-cta {
  color: var(--surface);
}

@media (hover: hover) {
  .nav.is-light a:hover {
    color: var(--ink);
    background: rgb(17 17 17 / 0.07);
  }

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

/* Section entrances - only marked when JS + IntersectionObserver are
   available, so content is never hidden without a reveal path. */
main > section.io-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

main > section.io-reveal.in {
  opacity: 1;
  transform: none;
}

.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);
}

.hero-copy .lede {
  margin-bottom: 24px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.cta-row .pill {
  min-height: 52px;
  max-width: 100%;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  box-shadow: none;
}

.cta-row .pill:focus-visible {
  outline: 2px solid var(--hero);
  outline-offset: 4px;
}

.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);
  }

  .pill-ghost:hover {
    background: var(--canvas);
    border-color: var(--faint);
  }
}

/* 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: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
}

.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: center;
  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;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease-out;
}

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

/* Satellite annotation cards - each one labels the pane that is actually
   open in the preview, so the floating UI always describes what is on
   screen. Pointer parallax sets --px/--py; visibility follows
   .hero-stage[data-tab]. */
.sat {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--float);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: rotate(var(--rot))
    translate3d(var(--px, 0px), calc(var(--py, 0px) + 10px), 0) scale(0.92);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.35s;
}

.hero-stage[data-tab="read"] .sat[data-tab="read"],
.hero-stage[data-tab="saved"] .sat[data-tab="saved"],
.hero-stage[data-tab="tracker"] .sat[data-tab="tracker"] {
  opacity: 1;
  visibility: visible;
  transform: rotate(var(--rot)) translate3d(var(--px, 0px), var(--py, 0px), 0)
    scale(1);
}

.sat-read {
  top: 36%;
  left: -56px;
}

.sat-saved {
  bottom: 15%;
  left: -56px;
}

.sat-tracker {
  bottom: 15%;
  right: -16px;
}

.sat-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.sat-pair {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sat-pair b {
  font-size: 22px;
  letter-spacing: 0;
}

.sat-pair i {
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.sat-line {
  font-size: 14px;
  font-weight: 700;
}

/* Scroll-reactive track CTA - appears bottom-center once the hero actions
   scroll out of view, and steps aside again over the footer. */
.float-cta {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 28px;
  background: var(--hero);
  color: var(--surface);
  border-radius: var(--pill);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 14px 32px rgb(232 0 48 / 0.3);
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

.float-cta:not(.is-on) {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px);
}

.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;
  white-space: pre-line;
}

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

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

/* Sections that carry a field color run full-bleed; their content keeps the
   shared 1120px column. */
#day,
#homes,
#get {
  max-width: none;
  padding: 0;
}

#day .moments,
#homes > *,
#get .avail {
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

#day {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
}

#day .moments {
  position: relative;
  padding-top: 72px;
  padding-bottom: 72px;
}

#homes {
  background: color-mix(in srgb, var(--lime) 16%, var(--canvas));
  padding-top: 72px;
  padding-bottom: 72px;
}

#get {
  background: var(--hero);
  color: var(--surface);
}

#get .avail {
  padding-top: 72px;
  padding-bottom: 72px;
}

#get h2 {
  color: var(--surface);
}

#get .lede {
  color: rgb(255 255 255 / 0.85);
}

#get .pair {
  color: rgb(255 255 255 / 0.92);
}

#get .price-note {
  color: rgb(255 255 255 / 0.78);
}

#get .price-note b {
  color: var(--surface);
}

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

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

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

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

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

/* Context chips around the mascots - named moments from the section copy
   ("a queue or a bus"), not invented features. */
.moment-chip {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--pill);
  padding: 8px 15px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--soft);
  transform: rotate(var(--rot));
  white-space: nowrap;
}

.moment-chip:nth-of-type(1) {
  top: -14px;
  right: 36%;
}

.moment-chip:nth-of-type(2) {
  bottom: 34%;
  right: -18px;
}

.moment-chip:nth-of-type(3) {
  bottom: -12px;
  left: 6%;
}

.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: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgb(17 17 17 / 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .loop li:hover {
    transform: translateY(-3px);
    box-shadow: var(--soft);
  }
}

.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 article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--soft);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.homes article:nth-child(1) {
  --tilt: -2deg;
}

.homes article:nth-child(3) {
  --tilt: 2deg;
}

@media (hover: hover) {
  .homes article:hover {
    transform: rotate(0deg) translateY(-5px);
    box-shadow: var(--float);
  }
}

.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;
}

.price-note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  max-width: 46ch;
}

.price-note b {
  color: var(--ink);
  font-weight: 700;
  margin-right: 4px;
}

.faq {
  max-width: 780px;
}

.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 20px;
  margin-bottom: 12px;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: 20px;
  font-weight: 600;
  color: var(--muted);
  transition: transform 0.25s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

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

/* Dark footer - the page's closing bookend against the ink nav pill. */
.site-footer {
  background: var(--ink);
  color: rgb(255 255 255 / 0.72);
  padding: 64px 24px 0;
  font-size: 14px;
}

.foot-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}

.foot-tag {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--surface);
  margin: 0 0 10px;
}

.foot-op {
  color: rgb(255 255 255 / 0.45);
  margin: 0;
}

.foot-col {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 2px;
}

.foot-head {
  color: var(--lime);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.foot-col a {
  color: rgb(255 255 255 / 0.72);
  text-decoration: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
}

@media (hover: hover) {
  .foot-col a:hover {
    color: var(--surface);
  }
}

.foot-mascots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 48px;
  padding-bottom: 8px;
}

.foot-mascots img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.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);
}

/* ==== Track setup (track.html) ====
   The intake as a questionnaire: one question per screen in a narrow column,
   labeled section progress, lime keep-wash selections, hero-red actions. */

.tq-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.tq-top {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 8px 16px 10px;
  background: rgb(248 248 248 / 0.86);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 1px 0 var(--border);
}

.tq-top-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  max-width: 560px;
  margin: 0 auto;
}

.tq-back {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.tq-back svg {
  width: 22px;
  height: 22px;
}

@media (hover: hover) and (pointer: fine) {
  .tq-back:hover {
    background: var(--border);
  }
}

.tq-back:active {
  transform: scale(0.94);
}

.tq-brand {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 18px;
}

.tq-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.tq-sections {
  list-style: none;
  margin: 8px auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 560px;
}

.tq-sections[hidden] {
  display: none;
}

.tq-section-track {
  display: block;
  height: 4px;
  background: var(--border);
  border-radius: var(--pill);
  overflow: hidden;
}

.tq-section-fill {
  display: block;
  height: 100%;
  background: var(--hero);
  border-radius: inherit;
  transform-origin: 0 50%;
  transition: transform 0.32s cubic-bezier(0.23, 1, 0.32, 1);
}

.tq-section-label {
  display: block;
  margin-top: 5px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

.tq-sections li[data-current] .tq-section-label {
  color: var(--ink);
  font-weight: 700;
}

.tq-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: min(100% - 32px, 540px);
  margin: 0 auto;
  padding: 20px 0 140px;
}

/* The landing page's generic `section` rule sets band padding and max-width;
   quiz steps are content-sized and must not inherit it. */
.tq-step {
  padding: 0;
  max-width: none;
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .tq-step[data-direction] {
    animation: tq-in 0.26s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .tq-step[data-direction="back"] {
    animation-name: tq-in-back;
  }
}

@keyframes tq-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}

@keyframes tq-in-back {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}

.tq-head {
  text-align: center;
  margin: 12px 0 22px;
}

.tq-prompt {
  margin: 0;
  font-size: clamp(30px, 7.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.tq-prompt:focus {
  outline: none;
}

/* The prompt takes programmatic focus on every step so screen readers land
   on the question; it is not keyboard-tabbable, so the global focus ring
   would only ever paint where no keypress sent it. */
.tq-prompt:focus-visible {
  box-shadow: none;
}

.tq-context {
  margin: 10px auto 0;
  max-width: 40ch;
  color: var(--muted);
  font-size: 16px;
  text-wrap: balance;
}

.tq-options {
  display: grid;
  gap: 10px;
}

.tq-options--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tq-option {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform var(--press-dur) cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.16s ease,
    background-color 0.16s ease,
    opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tq-option:hover {
    border-color: var(--faint);
  }
}

.tq-option:active {
  transform: scale(0.97);
}

.tq-option[data-selected] {
  background: var(--lime-soft);
  border-color: var(--lime);
}

.tq-options[data-picked] .tq-option:not([data-selected]),
.tq-options[data-full] .tq-option:not([data-selected]) {
  opacity: 0.5;
}

.tq-option-text {
  flex: 1;
  display: grid;
  gap: 2px;
}

.tq-option-label {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.tq-option-detail {
  font-size: 14px;
  color: var(--muted);
}

.tq-options--grid .tq-option {
  min-height: 58px;
  padding: 10px 14px;
}

.tq-options--grid .tq-option-label {
  font-size: 15px;
  overflow-wrap: break-word;
}

.tq-option-mark {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: transparent;
}

.tq-option-mark svg {
  width: 14px;
  height: 14px;
}

.tq-option[data-selected] .tq-option-mark {
  background: var(--lime-deep);
  color: #fff;
}

.tq-option-mark--box {
  border: 1.5px solid var(--faint);
  border-radius: 7px;
}

.tq-option[data-selected] .tq-option-mark--box {
  border-color: var(--lime-deep);
}

/* The language medallion: one glyph in the target's script. */
.tq-glyph {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--paper);
  font-size: 20px;
  font-weight: 700;
}

.tq-glyph[data-script="jp"] {
  font-family: var(--jp);
}

.tq-glyph[data-script="ko"] {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

.tq-glyph[data-script="latin"] {
  font-family: var(--font);
}

.tq-skip,
.tq-link {
  display: block;
  margin: 16px auto 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}

.tq-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--canvas) 72%, transparent);
}

.tq-footer-inner {
  max-width: 540px;
  margin: 0 auto;
  display: grid;
  gap: 6px;
}

.tq-primary {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--pill);
  background: var(--hero);
  color: var(--surface);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--soft);
  transition:
    transform var(--press-dur) ease-out,
    background-color 0.16s ease,
    opacity 0.16s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tq-primary:hover:not(:disabled) {
    background: var(--hero-deep);
  }
}

.tq-primary:active {
  transform: scale(var(--press));
}

.tq-primary:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.tq-count {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.tq-keyhint {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .tq-keyhint {
    display: block;
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
  }
}

.tq-intro,
.tq-inter,
.tq-loader {
  flex: 1;
  justify-content: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}

.tq-intro-art {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  filter: drop-shadow(0 10px 18px rgb(17 17 17 / 0.16));
}

.tq-intro .tq-prompt {
  font-size: clamp(36px, 9vw, 52px);
}

.tq-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.tq-intro-cta {
  width: min(100%, 360px);
  margin-top: 28px;
}

.tq-inter .tq-primary,
.tq-loader .tq-primary {
  width: min(100%, 360px);
  margin-top: 26px;
}

.tq-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 4px;
  padding: 0;
}

.tq-chips li {
  background: var(--lime-soft);
  color: var(--lime-deep);
  border-radius: var(--pill);
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
}

.tq-loader {
  padding-top: 14px;
}

.tq-ring {
  width: 180px;
  height: 180px;
  position: relative;
}

.tq-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.tq-ring circle {
  fill: none;
  stroke-width: 12px;
}

.tq-ring-track {
  stroke: var(--border);
}

.tq-ring-fill {
  stroke: var(--hero);
  stroke-linecap: round;
}

.tq-ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tq-ring-value small {
  margin-left: 2px;
  font-size: 24px;
}

.tq-loader-rows {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  text-align: left;
}

.tq-loader-rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--faint);
  font-size: 15px;
  transition: color 0.24s ease;
}

.tq-loader-rows li[data-state="active"],
.tq-loader-rows li[data-state="done"] {
  color: var(--ink);
}

.tq-loader-tick {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  color: transparent;
}

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

.tq-loader-rows li[data-state="done"] .tq-loader-tick {
  background: var(--lime-deep);
  border-color: var(--lime-deep);
  color: #fff;
}

.tq-loader-rows li[data-state="active"] .tq-loader-tick {
  border-color: var(--lime-deep);
  border-top-color: transparent;
  animation: tq-spin 0.8s linear infinite;
}

@keyframes tq-spin {
  to {
    transform: rotate(360deg);
  }
}

.tq-receipt .tq-head {
  margin-top: 4px;
}

.tq-facts {
  display: grid;
  margin-top: 8px;
}

.tq-fact {
  display: grid;
  grid-template-columns: minmax(76px, auto) 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.tq-fact:first-child {
  border-top: 1px solid var(--border);
}

.tq-fact-label {
  color: var(--muted);
  font-size: 14px;
}

.tq-fact-value {
  font-weight: 600;
  font-size: 15px;
}

.tq-change {
  border: 0;
  background: none;
  color: var(--hero);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
  padding: 0 4px;
}

.tq-receipt .tq-primary {
  margin-top: 26px;
}

.tq-receipt .tq-link {
  margin: 14px auto 0;
}

/* The preview speaks one pair at a time - the pack swaps the card script. */
.phone-screen[data-font="latin"] {
  --jp: var(--font);
}

.phone-screen[data-font="ko"] {
  --jp: "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

@media (max-width: 560px) {
  .tq-section-label {
    font-size: 11px;
  }

  .tq-glyph {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tq-section-fill,
  .tq-option,
  .tq-option-mark,
  .tq-loader-rows li,
  .tq-primary,
  .tq-back {
    transition: none;
  }

  .tq-loader-rows li[data-state="active"] .tq-loader-tick {
    animation: none;
  }
}

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

  .hero-copy {
    order: 2;
  }

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

@media (max-width: 1180px) {
  .sat-read,
  .sat-saved {
    left: -24px;
  }

  .sat-tracker {
    right: 0;
  }
}

@media (max-width: 960px) {
  .sat {
    display: none;
  }
}

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

  .nav {
    padding: 0 8px 0 16px;
    border-radius: 18px;
  }

  .brand span {
    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,
  .foot-grid {
    grid-template-columns: 1fr;
  }

  .homes article {
    --tilt: 0deg;
  }

  .moment-art {
    justify-self: start;
    margin-top: 12px;
  }

  #day .moments,
  #homes > *,
  #get .avail {
    padding-left: 20px;
    padding-right: 20px;
  }

  section {
    padding: 56px 20px;
  }
}

@media (max-width: 480px) {
  .cta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
}

@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,
  .phone,
  .float-cta {
    transition: none;
  }

  .sat,
  .homes article,
  .loop li,
  .faq summary::after {
    transition: none;
  }

  .sat {
    transform: rotate(var(--rot));
  }

  .phone {
    transform: none;
  }

  main > section.io-reveal {
    opacity: 1;
    transform: 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;
}