/* ===========================================================================
   Cratelog landing page - layout.
   Desktop values are transcribed from "Cratelog Landing Page.dc.html".
   Everything below the desktop rules is added: the source design is fixed at
   min-width 1100px and has no small-screen behaviour of its own.
   =========================================================================== */

:root {
  --page-max: 1240px;
  --page-pad: 40px;
}

.shell {
  background: var(--paper-200);
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--page-pad);
}

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--text-on-brand);
  font-weight: var(--weight-semibold);
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus {
  top: 12px;
  text-decoration: none;
  color: var(--text-on-brand);
}

/* ===========================================================================
   Nav
   =========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper-50);
  border-bottom: 1px solid var(--border-hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.nav__brand-mark {
  display: block;
  border-radius: 6px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav__link {
  font-size: 15px;
  color: var(--text-secondary);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--text-on-brand);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  transition: background var(--dur-fast) var(--ease-out);
}

.nav__cta:hover {
  background: var(--brand-hover);
  color: var(--text-on-brand);
  text-decoration: none;
}

/* ===========================================================================
   Hero
   =========================================================================== */
.hero {
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: start;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 92px 0 72px;
}

.hero__eyebrow {
  align-self: flex-start;
}

.hero__title {
  margin: 0;
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: 1.04;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: pretty;
}

.hero__lede {
  margin: 0;
  max-width: 470px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* Store badges -------------------------------------------------------------
   Vendored artwork, not a rebuilt lockup: each badge is a complete plate with
   its own wordmark and mark, text already outlined to paths.

   The plate is chosen in the markup, not by CSS: the hero is always on paper
   and the download island is always dark, so the variant is a fixed fact per
   location rather than something to theme. That also means the badge is an
   <img> with real alt text - it renders at its intrinsic 120x40 even if this
   stylesheet never loads, instead of collapsing to nothing. */
.store-badge {
  display: block;
  flex: none;
  border-radius: var(--radius-sm);
  transition: opacity var(--dur-fast) var(--ease-out);
}

/* Both stores forbid redrawing or recolouring the badge, so hover is carried
   by the whole plate rather than by restyling anything inside it. */
.store-badge:hover {
  opacity: 0.85;
}

.store-badge img {
  display: block;
  height: 48px;
  width: auto;
}

/* The phone + the two cards that float over it. */
.hero__stage {
  position: relative;
  height: 660px;
}

.hero__phone {
  position: absolute;
  left: 120px;
  top: 56px;
}

/* display:contents so each card positions against .hero__stage on desktop,
   while still being a single flow container on small screens. */
.hero__floats {
  display: contents;
}

/* Positioning wrapper - carries the parallax transform, so the card itself is
   free to carry the entrance transform without the two fighting. */
.hero__float-pos {
  position: absolute;
}

.hero__float-pos--deadline {
  left: 16px;
  top: 128px;
}

.hero__float-pos--avoided {
  right: 6px;
  top: 410px;
}

.hero__float {
  width: 192px;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero__float--avoided {
  width: 182px;
  gap: 4px;
}

.hero__float-name {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.hero__float-note {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.hero__float-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.hero__float-figure {
  font-size: 24px;
  font-weight: var(--weight-semibold);
  color: var(--success);
}

.hero__float-caption {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

/* ===========================================================================
   Stats strip
   =========================================================================== */
.stats {
  background: var(--paper-50);
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}

.stats__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-block: 26px;
}

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

.stat__value {
  font-size: 26px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.stat__label {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ===========================================================================
   Morph scene - pinned "spreadsheet becomes app" transition
   =========================================================================== */
.morph {
  height: 260vh;
}

.morph__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.morph__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.morph__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}

.eyebrow {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-label);
}

.morph__title {
  margin: 0;
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.1;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.morph__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.morph__grid {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 20px;
  align-items: center;
}

.morph__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
  justify-self: center;
}

.morph__arrow .icon { --icon-size: 24px; }

.morph__after {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.morph__skipped {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-lg);
  background: var(--success-quiet);
}

.morph__skipped .icon {
  --icon-size: 18px;
  color: var(--success);
}

.morph__skipped-title {
  font-size: 13.5px;
  color: var(--success);
  font-weight: var(--weight-semibold);
}

.morph__skipped-note {
  font-size: 13px;
  color: var(--text-secondary);
}

/* --- The spreadsheet ------------------------------------------------------
   Deliberately off-system: this is the thing Cratelog replaces, so it uses raw
   greys and a monospace face rather than any design token. */
/* No overflow here at desktop width: an `overflow: auto` grid item has an
   automatic minimum size of 0, which lets the column collapse and clips the
   sheet's last column. Scrolling only gets switched on at phone widths. */
.sheet-wrap {
  min-width: 0;
}

.sheet {
  --sheet-cols: 30px 1fr 76px 74px 82px 100px;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #c9c9c9;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(28, 26, 23, 0.12);
  transform: rotate(-1.4deg);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  overflow: hidden;
}

.sheet__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f1f1f1;
  border-bottom: 1px solid #d9d9d9;
}

.sheet__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9d9d9;
}

.sheet__filename {
  font-size: 11.5px;
  color: #666666;
  margin-left: 6px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet__formula {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid #e3e3e3;
  font-size: 11px;
  color: #888888;
}

.sheet__fx { font-style: italic; }

.sheet__row {
  display: grid;
  grid-template-columns: var(--sheet-cols);
  font-size: 12px;
  color: #333333;
}

.sheet__row > span {
  padding: 5px 8px;
  border-bottom: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column-letter header row. */
.sheet__row--head > span {
  background: #f7f7f7;
  border-bottom: 1px solid #e3e3e3;
  border-left: 1px solid #e9e9e9;
  color: #999999;
}

/* Row-number gutter cell. */
.sheet__row > .sheet__gutter {
  background: #f7f7f7;
  border-left: none;
  color: #999999;
}

.sheet__row--labels > span { font-weight: 700; }

.sheet__row--last > span { border-bottom: none; }

.sheet__err { color: #c0392b; }
.sheet__err--bold { color: #c0392b; font-weight: 700; }
.sheet__formula-cell { color: #888888; }

.sheet__tabs {
  display: flex;
  gap: 14px;
  padding: 7px 12px;
  background: #f4f4f4;
  border-top: 1px solid #dddddd;
  font-size: 10.5px;
  color: #999999;
}

.sheet__tab--active { color: #444444; font-weight: 700; }

/* ===========================================================================
   Features
   =========================================================================== */
.features {
  scroll-margin-top: 90px;
}

.features__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-block: 88px;
}

.feature {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature__title {
  margin: 0;
  font-size: 19px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.feature__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* A cropped window onto the calendar phone. */
.feature__viewport {
  height: 300px;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-top: 6px;
  display: flex;
  justify-content: center;
  background: var(--surface-sunken);
}

.feature__viewport-inner {
  margin-top: -64px;
}

.feature__panel {
  margin-top: 6px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

/* Currency rows. */
.fx-list {
  display: flex;
  flex-direction: column;
  padding: 6px 16px;
}

.fx-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-hairline);
}

.fx-row:last-child { border-bottom: none; }

.fx-row__code {
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  width: 34px;
}

.fx-row__amount {
  font-size: 19px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.fx-row__projected {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Skip prompt. */
.skip-prompt {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.skip-prompt__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skip-prompt__title {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.skip-prompt__text {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.skip-prompt__note {
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

/* ===========================================================================
   Reading
   =========================================================================== */
.reading {
  background: var(--paper-100);
  border-top: 1px solid var(--border-hairline);
  scroll-margin-top: 90px;
}

.reading__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  padding-block: 80px;
  align-items: center;
}

.reading__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reading__title {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.reading__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.reading__stats {
  display: flex;
  gap: 22px;
  margin-top: 8px;
  flex-wrap: wrap;
}

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

.reading__stat-value {
  font-size: 24px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.reading__stat-value--success { color: var(--success); }

.reading__stat-label {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.shelf {
  display: flex;
  flex-direction: column;
}

.shelf__books {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 2px;
  flex-wrap: wrap;
}

.shelf__board {
  height: 10px;
  border-radius: 3px;
  background: var(--paper-400);
}

/* ===========================================================================
   Import
   =========================================================================== */
.import {
  border-top: 1px solid var(--border-hairline);
  scroll-margin-top: 90px;
}

.import__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 56px;
}

.import__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
}

.import__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 26px);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.import__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.import__sources {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.source {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.source__glyph {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
}

.source__body {
  display: flex;
  flex-direction: column;
}

.source__name {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.source__note {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

/* ===========================================================================
   FAQ
   =========================================================================== */
.faq-section {
  border-top: 1px solid var(--border-hairline);
  scroll-margin-top: 90px;
}

.faq-section__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-block: 80px;
  align-items: center;
}

.faq-section__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
  text-align: center;
  align-items: center;
}

.faq-section__title {
  margin: 0;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.12;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.faq-section .rows-card {
  width: 100%;
  max-width: 720px;
}

/* ===========================================================================
   Testimonials
   =========================================================================== */
.quotes {
  background: var(--paper-200);
}

.quotes__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-bottom: 88px;
}

.quote {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.quote__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-primary);
}

.quote__who {
  font-size: 13px;
  color: var(--text-tertiary);
  font-style: normal;
}

/* ===========================================================================
   Download + footer (dark)
   =========================================================================== */
.download {
  background: var(--bg-app);
  scroll-margin-top: 90px;
}

.download__inner {
  padding-top: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.download__title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 44px);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-align: center;
}

.download__text {
  margin: 0;
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 440px;
  text-align: center;
  line-height: 1.5;
}

.download__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 28px 0;
  margin-top: 48px;
  border-top: 1px solid var(--border-hairline);
  flex-wrap: wrap;
}

.footer__brand {
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.footer__links {
  display: flex;
  gap: 24px;
  font-size: 13px;
}

.footer__links a { color: var(--text-tertiary); }

.footer__links button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--weight-medium);
}

.footer__links button:hover {
  color: var(--brand-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__copy {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* Trademark notice - own row under the footer line, never squeezed by it. */
.footer__legal {
  flex-basis: 100%;
  margin: -8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-tertiary);
  opacity: 0.75;
}

/* ===========================================================================
   Motion - initial states for the entrance/reveal choreography.
   JS removes `is-armed` once it takes over; without JS nothing is hidden.
   =========================================================================== */
.js-motion [data-hero],
.js-motion [data-reveal] {
  opacity: 0;
}

.js-motion [data-hero] { transform: translateY(20px); }
.js-motion [data-reveal] { transform: translateY(26px); }

.js-motion [data-mcard] {
  opacity: 0;
  transform: translateX(-56px);
}

/* ===========================================================================
   Responsive
   The source design is fixed-width desktop; everything below is added.
   =========================================================================== */

/* --- Tight desktop -------------------------------------------------------- */
@media (max-width: 1180px) {
  :root { --page-pad: 28px; }

  .hero__inner { gap: 28px; }
  .hero__phone { left: 88px; }
  .hero__stage { height: 600px; }
  .hero__float-pos--avoided { top: 372px; }
  .nav__links { gap: 22px; }
}

/* --- Stack the hero ------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero__copy { padding: 64px 0 24px; }
  .hero__lede { max-width: 560px; }

  .hero__stage {
    height: auto;
    display: flex;
    justify-content: center;
    padding-bottom: 40px;
  }

  .hero__phone {
    position: static;
  }

  .hero__float-pos--deadline { left: 0; top: 96px; }
  .hero__float-pos--avoided { right: 0; top: auto; bottom: 120px; }

  /* Unpin the morph scene: sticky scrubbing needs vertical room the small
     viewports don't have, so the two states simply stack and reveal. */
  .morph { height: auto; }

  .morph__pin {
    position: static;
    height: auto;
    padding-block: 72px;
    overflow: visible;
  }

  .morph__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .morph__arrow { transform: rotate(90deg); }

  .sheet { transform: rotate(-0.8deg); }

  .features__inner,
  .quotes__inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .features__inner { padding-block: 64px; }
  .quotes__inner { padding-bottom: 64px; }

  .reading__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-block: 60px;
  }

  .shelf__books { justify-content: flex-start; }

  .import__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    padding-block: 48px;
  }
}

/* --- Tablet / large phone ------------------------------------------------- */
@media (max-width: 760px) {
  :root { --page-pad: 20px; }

  .nav__link { display: none; }

  .stats__inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
    padding-block: 22px;
  }

  .features__inner,
  .quotes__inner {
    grid-template-columns: 1fr;
  }

  .download__inner { padding-top: 64px; }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 32px;
  }
}

/* --- Phone ---------------------------------------------------------------- */
@media (max-width: 400px) {
  /* Two 144px badges plus the gap stop fitting; shrink rather than wrap to
     one per line, which reads as a ranking. */
  .store-badge img {
    height: 42px;
  }
}

@media (max-width: 620px) {
  /* The floating cards stop floating and become a normal row under the phone:
     overlapping a phone this narrow would bury the mockup. */
  .hero__stage {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .hero__floats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
  }

  .hero__float-pos {
    position: static;
    flex: 1 1 240px;
    max-width: 280px;
    /* the parallax transform is inert here, but clear it anyway */
    transform: none !important;
  }

  .hero__float,
  .hero__float--avoided {
    width: 100%;
  }

  .hero__copy { padding: 44px 0 20px; }

  /* Below this the six columns stop fitting, so the sheet scrolls in place
     rather than shrinking its cells into unreadability. */
  .sheet-wrap { overflow-x: auto; }
  .sheet {
    --sheet-cols: 24px 1fr 62px 58px 66px 76px;
    min-width: 330px;
  }

  .reading__stats { gap: 16px 20px; }

  .source { padding: 14px 18px; flex: 1 1 100%; }
}

/* --- Phone mockup scaling -------------------------------------------------
   The frame is authored at 390x800; only the scale changes. */
.phone-slot--hero { --phone-scale: 0.84; }
.phone-slot--feature { --phone-scale: 0.72; }

@media (max-width: 1180px) {
  .phone-slot--hero { --phone-scale: 0.74; }
}

@media (max-width: 1000px) {
  .phone-slot--hero { --phone-scale: 0.82; }
}

@media (max-width: 480px) {
  .phone-slot--hero { --phone-scale: 0.66; }
  .phone-slot--feature { --phone-scale: 0.62; }
  .feature__viewport { height: 260px; }
  .feature__viewport-inner { margin-top: -56px; }
}

@media (max-width: 380px) {
  .phone-slot--hero { --phone-scale: 0.58; }
}

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

  .js-motion [data-hero],
  .js-motion [data-reveal],
  .js-motion [data-mcard] {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}