/* ============================================================
   LUXURY SALES — homepage
   Section order:
   hero (drift toasts, one beam) → win tape → numbers band →
   module deck (#program) → DM transformation → commission wire →
   8-week thread (#path) → quote wall (#quotes) → FAQ (#faq) →
   final CTA → footer
   Page-specific styles only. base.css owns the system.
   §9 choreography pass: hero exit shear + vignette burn-off ·
   ghost numerals + tile depth + drawn rules (numbers) · dealt-card
   roll-in deck · phone float + word-cascade beats (DM) · receipt
   roll-in + ghost amount (wire) · alternating stamp drift (path) ·
   multi-speed quote columns + counter-drifting qmarks · L/R FAQ
   reveals + under-rule · bloom finale. All scrub layers use the
   independent translate/rotate/scale properties — never `transform`.
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 48px);
  padding-bottom: 48px;
  position: relative;
  overflow: clip;
}
.hero-inner { position: relative; z-index: 2; text-align: center; }

/* proof pill: ava strip + 30-students pill + stars */
.hero-proof {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: 8px 20px 8px 10px;
  background: rgba(245, 239, 226, 0.025);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.hero-proof .ava { width: 34px; height: 34px; font-size: 0.62rem; }
.hero-proof .txt { font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600; color: var(--ink-dim); }
.hero-proof .txt strong { color: var(--ink); font-family: var(--font-mono); font-weight: 700; }
.hero-proof .stars { color: var(--gold); font-size: 0.78rem; letter-spacing: 2px; }
.hero-note {
  /* placement via the independent translate property — the reveal system's
     transform:none resets (html.js [data-reveal]) never touch it */
  position: absolute; top: -54px; left: 50%; translate: -80% 0;
  white-space: nowrap; pointer-events: none;
}
.hero-note .note-arrow { position: absolute; right: -30px; top: 14px; transform: rotate(14deg); }

/* headline: Fraunces roman + foil clause */
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 7.6vw, 5.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero-h1 .clause { font-size: 1.03em; }

.hero-lede { margin: clamp(22px, 3vw, 32px) auto 0; max-width: 640px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(30px, 4vw, 44px); }

/* floating toasts — desktop gutters; restacked bands under 940px */
.hero-toasts { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-toast { position: absolute; width: min(300px, 26vw); }
.hero-toast .toast { pointer-events: auto; }
.ht-1 { left: max(2vw, calc(50% - 640px)); top: 30%; }
.ht-2 { right: max(2vw, calc(50% - 640px)); top: 19%; }
.ht-3 { right: max(1.4vw, calc(50% - 616px)); bottom: 19%; }

/* §3.4 scroll parallax — --p inherits from the data-scrub hero-toasts wrapper.
   Independent translate composes with the entrance keyframe (middle layer) and
   the sine drift (inner layer); the 0.5 fallback yields zero offset pre-JS.
   Reduced-motion guard: the engine pins --p to 1 there, which would strand a
   static offset. */
@media (prefers-reduced-motion: no-preference) {
  .hero-toast { translate: 0 calc((var(--p, 0.5) - 0.5) * var(--par, -36px)); }
  .ht-1 { --par: -78px; }
  .ht-2 { --par: -40px; }
  .ht-3 { --par: -108px; }
}

/* §9 HERO EXIT — the hero itself is a scrub host (data-scrub, cross span:
   --p sits at 0.5 while the hero rests at the top, runs 0.5 → 1 as it leaves).
   Text layers carry .pz-* in markup (proof pz-1 · h1 pz-3 · lede pz-2 ·
   CTAs pz-1) so the stack shears apart at different speeds on exit, and the
   toasts separate on the deepened --par spread above. The gold vignette
   burns off over the same travel. Reduced motion: the engine pins --p to 1,
   so the calc is gated — plain opacity 1 is the resting frame. No-JS:
   --p defaults to 0.5 → opacity 1. */
@media (prefers-reduced-motion: no-preference) {
  .hero > .vignette { opacity: calc(1 - (clamp(0.5, var(--p, 0.5), 1) - 0.5) * 1.9); }
}

/* §3.2 entrance — reveal-gated keyframe on the middle wrapper: the card drifts
   in from its screen edge (--from inline per toast) with a ~5% overshoot from
   the back-out curve, plays once via .is-in. Opacity rides base's fade reveal. */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-toast [data-reveal].is-in {
    animation: ls-toast-in 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) both;
    animation-delay: var(--d, 0s);
  }
}
@keyframes ls-toast-in {
  from { transform: translateX(var(--from, 40px)) scale(0.94); }
  to { transform: none; }
}

@media (max-width: 1180px) {
  .hero-toast { width: 250px; }
  .ht-1 { left: 1vw; } .ht-2 { right: 1vw; } .ht-3 { right: 0.6vw; }
}
@media (max-width: 940px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 64px); }
  .hero-toasts {
    position: static; pointer-events: auto; order: 3;
    margin-top: 44px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding-inline: clamp(16px, 4vw, 32px);
  }
  .hero-toast { position: static; width: 100%; translate: none; }
  .ht-1 { grid-column: 1 / -1; max-width: 440px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .hero-toasts { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; padding-inline: 0; }
  .ht-1 { max-width: none; }
  .hero-note { translate: -66% 0; scale: 0.9; }
  .hero-proof { gap: 10px; padding: 7px 14px 7px 8px; }
  .hero-proof .ava { width: 27px; height: 27px; font-size: 0.55rem; }
  .hero-proof .txt { font-size: 0.78rem; white-space: nowrap; }
  .hero-proof .stars { font-size: 0.66rem; letter-spacing: 1px; }
}
@media (max-width: 400px) {
  .hero-proof { flex-wrap: wrap; justify-content: center; row-gap: 3px; max-width: 100%; }
  .hero-proof .txt { white-space: normal; }
}

/* ---------- WIN TAPE ---------- */
/* §9.1: the tape leans with scroll velocity (skewX on .tape, engine/base-
   owned) and sits flush with the viewport edge — the skewed corners poke
   ~1px past the viewport at full lean. Page-owned clip wrapper zeroes the
   horizontal overflow; the band's borders stay horizontal under skewX, so
   nothing visible is lost. */
.tape-clip { overflow: clip; }

/* ---------- NUMBERS BAND ---------- */
/* §9: the section is a scrub host. Each tile carries .pz-1/.pz-2 (alternating
   depth — the hairline columns shear subtly against each other) and clips its
   own ghost numeral, which drifts horizontally on --p in alternating
   directions (--gn-amp signs alternate in markup). Ghost fills are
   sub-perceptual (§9.4) — they don't spend the gold budget; the drawn
   hr-gold above the grid is this viewport's one gold accent artifact. */
.numbers { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(30px, 4vw, 48px); }
.num-rule { margin-top: clamp(30px, 4vw, 46px); }
.num-rule-b { margin-top: 14px; }
.num-cell {
  padding: clamp(26px, 4vw, 48px) clamp(18px, 3vw, 40px);
  border-left: 1px solid var(--hairline);
  position: relative;
  overflow: clip; /* the drifting ghost numeral stays inside its tile */
}
.num-cell .ghost-num { font-size: clamp(4.6rem, 9vw, 7rem); letter-spacing: -0.04em; }
.num-cell > :not(.ghost-num) { position: relative; } /* content paints above the ghost */
.num-cell:first-child { border-left: 0; }
.num-val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: clamp(1.8rem, 4.4vw, 3.2rem);
  letter-spacing: -0.03em; line-height: 1.05;
  color: var(--ink);
}
.num-val .accent { color: var(--gold); }
.num-label { font-family: var(--font-sans); font-weight: 700; font-size: 0.92rem; margin-top: 10px; }
.num-sub { font-size: 0.82rem; color: var(--ink-dim); margin-top: 5px; line-height: 1.5; }
@media (max-width: 860px) {
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .num-cell:nth-child(3) { border-left: 0; }
  .num-cell:nth-child(n+3) { border-top: 1px solid var(--hairline); }
}
@media (max-width: 430px) {
  .num-val { font-size: 1.7rem; }
}

/* ---------- MODULE DECK (base owns the deck; page adds the week stamp) ---------- */
/* §9: each card is its own enter-scrub host with .roll-in (--roll alternates
   in markup) — the stack shuffles in like dealt cards, straight before it
   sticks. overflow: clip guards the rotated corners; clip (unlike hidden)
   creates no scroll container, so the sticky cards are unaffected. */
#program { overflow: clip; }
/* Deepen the cover contrast slightly: --dim (0..0.3, engine-driven) also
   feeds an independent scale on the covered card — composes with the
   engine's inline transform scale. Reduced motion / no-JS: --dim stays 0. */
#program .deck-card::after { opacity: calc(var(--dim, 0) * 1.35); }
@media (prefers-reduced-motion: no-preference) {
  #program .deck-card { scale: calc(1 - var(--dim, 0) * 0.12); }
}
.deck-stamp {
  position: absolute; top: clamp(22px, 3vw, 34px); right: clamp(22px, 3vw, 34px);
  z-index: 2;
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--hairline-strong); border-radius: 7px;
  padding: 5px 10px;
}
@media (max-width: 560px) {
  .deck-stamp { display: none; } /* the card eyebrow already carries the weeks */
}

/* ---------- DM TRANSFORMATION (sticky phone + beats) ---------- */
.transform-stage {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 64px);
}
.phone-sticky { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; display: flex; justify-content: center; }
.phone {
  width: clamp(270px, 26vw, 330px);
  border-radius: 42px;
  border: 1px solid var(--hairline-strong);
  background: linear-gradient(180deg, #17120C, #0E0B07);
  box-shadow: var(--shadow-raised), 0 0 0 8px rgba(245, 239, 226, 0.03);
  padding: 18px 16px 22px;
  position: relative;
  min-height: 560px;
  display: flex; flex-direction: column;
}
.phone::before {
  content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 22px; border-radius: 12px; background: #060504;
}
.phone-head { display: flex; align-items: center; gap: 10px; padding: 26px 6px 14px; border-bottom: 1px solid var(--hairline); }
.phone-head .ava { width: 34px; height: 34px; font-size: 0.62rem; }
.phone-head .ph-name { font-family: var(--font-sans); font-weight: 700; font-size: 0.88rem; }
.phone-head .ph-sub { font-size: 0.7rem; color: var(--ink-faint); font-family: var(--font-mono); }
.phone-thread { padding: 18px 4px; display: grid; gap: 10px; align-content: start; flex: 1; }

.msg {
  max-width: 86%; padding: 11px 15px; border-radius: 17px;
  font-size: 0.86rem; line-height: 1.5;
}
.msg.in { justify-self: start; background: rgba(245, 239, 226, 0.07); border-bottom-left-radius: 6px; }
.msg.out {
  justify-self: end;
  /* deeper gold stops: #FFF7E0 is 4.72:1 on #8A6A1C and 7.97:1 on #5E4A10 —
     every point of the gradient clears the 4.5:1 body-text bar */
  background: linear-gradient(135deg, #8A6A1C, #5E4A10);
  color: #FFF7E0;
  border-bottom-right-radius: 6px;
}
.msg.out.bad {
  background: rgba(224, 139, 123, 0.12);
  color: #E8A899;
  border: 1px dashed rgba(224, 139, 123, 0.4);
}
.msg-status { justify-self: end; font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); }
.msg-status.bad { color: var(--red); }
.booked-card {
  margin-top: 6px;
  border: 1px solid rgba(134, 199, 154, 0.35); border-radius: 14px;
  background: rgba(134, 199, 154, 0.07);
  padding: 13px 15px;
}
.booked-card .bk-top { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--green); text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.booked-card .bk-main { font-family: var(--font-sans); font-weight: 700; font-size: 0.92rem; margin-top: 5px; }
.booked-card .bk-sub { font-size: 0.74rem; color: var(--ink-dim); margin-top: 2px; }
.booked-card .bk-amt { font-family: var(--font-mono); font-weight: 700; color: var(--green); margin-top: 7px; font-size: 1.05rem; }

/* hidden-until-beat states — gated on html.js; no-JS lands the full thread */
html.js .phone .msg { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); }
html.js .phone .msg-status { opacity: 0; transition: opacity 0.5s var(--ease-out) 0.2s; }
html.js .phone .booked-card { opacity: 0; transform: translateY(14px) scale(0.95); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
html.js .phone .b2.m2 { transition-delay: 0.25s; }
html.js .phone .b2.m3 { transition-delay: 0.5s; }
/* beat 1 — the bad DM, on seen */
html.js .phone[data-beat="1"] .b1.msg { opacity: 1; transform: none; }
html.js .phone[data-beat="1"] .b1.msg-status { opacity: 0.85; }
/* beat 2 — the bad DM dissolves, the trained thread arrives */
html.js .phone[data-beat="2"] .b1.msg { opacity: 0.3; transform: none; }
html.js .phone[data-beat="2"] .b1.msg-status { opacity: 0.3; }
html.js .phone[data-beat="2"] .b2.msg { opacity: 1; transform: none; }
/* beat 3 — the booked call */
html.js .phone[data-beat="3"] .b1.msg { opacity: 0.12; transform: none; }
html.js .phone[data-beat="3"] .b1.msg-status { opacity: 0.12; }
html.js .phone[data-beat="3"] .b2.msg { opacity: 1; transform: none; }
html.js .phone[data-beat="3"] .booked-card { opacity: 1; transform: none; }

/* typed-in bubble (GUIDE §6 recipe: steps() typing + blinking caret) */
@keyframes ls-type { from { max-width: 0ch; } to { max-width: 27ch; } }
html.js .phone .type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0ch; }
html.js .phone[data-beat="2"] .type,
html.js .phone[data-beat="3"] .type { animation: ls-type 1.25s steps(25, end) 0.85s forwards; }
.type-caret {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--champagne);
  margin-left: 3px; vertical-align: -0.18em;
  opacity: 0;
}
html.js .phone[data-beat="2"] .type-caret { opacity: 1; animation: ls-caret 0.95s steps(1) infinite; }
html.js .phone[data-beat="3"] .type-caret { opacity: 0; animation: none; }

/* beats column */
.beats { display: grid; gap: clamp(120px, 24vh, 220px); padding-block: clamp(60px, 10vh, 120px); }
.beat { max-width: 460px; }
.beat-no {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; display: block;
}
.beat h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.95rem); letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 12px; }
.beat h3 .clause { font-size: 1.05em; }
.beat p { color: var(--ink-dim); }
.beat .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (max-width: 880px) {
  .transform-stage { grid-template-columns: 1fr; gap: 0; }
  .phone-sticky { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5; }
  .phone-sticky .pz-2 { --pz-amp: -14px; } /* smaller float — the phone pins right under the nav here */
  .phone { min-height: 0; width: min(300px, 82vw); padding: 12px 12px 16px; border-radius: 34px; }
  .phone-head { padding: 20px 4px 10px; }
  .phone-thread { padding: 12px 2px; gap: 8px; }
  .msg { font-size: 0.8rem; padding: 9px 13px; }
  .beats { gap: clamp(240px, 46vh, 380px); padding-block: clamp(48px, 9vh, 90px); }
  .beat {
    max-width: none;
    background: linear-gradient(180deg, rgba(26, 21, 15, 0.96), rgba(16, 13, 9, 0.96));
    border: 1px solid var(--hairline);
    border-radius: var(--radius-card);
    padding: 22px 20px;
    box-shadow: var(--shadow-card);
  }
}

/* ---------- COMMISSION WIRE ---------- */
/* §9: the receipt straightens from -4.5deg (.roll-in) as its rows print —
   both ride .wire-wrap's band --p. A ghost "$1,480.00" drifts the opposite
   way behind it. clip guards the rotated corners + ghost drift. */
.wire-section { overflow: clip; }
.wire-ghost { left: -0.06em; bottom: -0.16em; font-size: clamp(4.2rem, 8.5vw, 6.6rem); }
.wire-section.section { padding-top: clamp(40px, 6vw, 80px); }
.wire-section .grid-2 { align-items: center; }
.wire-points { display: grid; gap: 18px; margin-top: 30px; }
.wire-point { display: flex; gap: 15px; align-items: flex-start; }
.wp-ico {
  width: 38px; height: 38px; flex: none; border-radius: 11px;
  background: rgba(245, 239, 226, 0.06); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.wp-ico svg { width: 18px; height: 18px; }
.wire-point h4 { font-family: var(--font-sans); font-weight: 700; font-size: 1.02rem; margin-bottom: 3px; }
.wire-point p { color: var(--ink-dim); font-size: 0.92rem; }
.wire-wrap { position: relative; padding-block: clamp(10px, 2vw, 30px); }
.wire-big { max-width: 480px; margin-inline: auto; }
@media (max-width: 430px) {
  .wire-stamp { font-size: 0.64rem; right: 12px; }
}

/* ---------- 8-WEEK THREAD ---------- */
/* §9: .thread is a scrub host (cross) — week stamps carry .pz-x-1 with
   alternating signed --gn amps and the margin note rides .pz-x-2, drifting
   against them while the gold line stays the anchor. The engine still puts
   its own band scrub on .thread-line, and that nearer host wins for the
   line's subtree — the draw is untouched. Section clips the horizontal travel. */
#path { overflow: clip; }
.thread-hand { margin-top: 10px; display: inline-flex; align-items: center; gap: 10px; }

/* ---------- QUOTE WALL ---------- */
/* §9 multi-speed masonry: CSS `columns` can't be wrapped, so the wall is two
   explicit column divs under one data-scrub host — col 1 .pz-1 (shallow),
   col 2 .pz-3 (deep). Vertical translate only, so no clip needed; the ragged
   bottom the depth difference produces is the point. */
.quote-wall {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start;
  margin-top: clamp(40px, 5vw, 60px);
}
.q-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* Reveal on the .q-wrap wrapper, tilt on the card (the .fit-wrap pattern):
   base's reveal resets and the tilt rule's transform-only transition would
   otherwise fight over the same element. */
.q-wrap { min-width: 0; }
/* Oversized quote marks counter-drift: columns ride negative amps, the marks
   ride a small positive one — relative motion inside each card. Gated on
   no-preference (engine pins --p to 1 under reduced motion); no-JS --p
   defaults to 0.5 → zero offset. */
@media (prefers-reduced-motion: no-preference) {
  .quote-card .qmark { translate: 0 calc((var(--p, 0.5) - 0.5) * 26px); }
}
.quote-card {
  padding: clamp(26px, 3.4vw, 40px);
  display: flex; flex-direction: column; gap: 20px;
}
.quote-card .qmark {
  font-family: var(--font-display); font-style: italic;
  font-size: 3.6rem; line-height: 0.6; height: 0.34em;
  color: var(--gold); opacity: 0.55;
}
.quote-card blockquote {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.45; letter-spacing: 0.002em; color: var(--ink);
}
@media (max-width: 760px) {
  .quote-wall { grid-template-columns: 1fr; }
  .q-col { --pz-amp: 0px; } /* stacked columns don't shear into each other */
}

/* ---------- FAQ ---------- */
.wrap.narrow { max-width: 880px; }
.faq-list { margin-top: clamp(28px, 4vw, 44px); }
/* Items reveal from alternating sides (left/right variants in markup);
   clip guards the ±34px hidden offsets at narrow widths. */
#faq { overflow: clip; }
/* Gold rule draws UNDER the open item — base draws the top one from the
   left, this one closes the frame from the right. Gated on html.js like
   base's: with no JS the accordion sits open and unadorned. */
html.js .faq-item::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: var(--grad); opacity: 0.85;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.8s var(--ease-wipe);
}
html.js .faq-item.is-open::after { transform: scaleX(1); }

/* ---------- FINAL CTA ---------- */
.cta-final {
  position: relative; overflow: clip; text-align: center;
  padding-block: clamp(110px, 16vw, 210px);
}
.cta-final .wrap { position: relative; z-index: 2; }
.cta-h {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 7.4vw, 5.6rem);
  letter-spacing: -0.02em; line-height: 1.05;
}
.cta-h .clause { font-size: 1.04em; }
.cta-sub { color: var(--ink-dim); margin: 22px auto 0; max-width: 520px; font-size: 1.06rem; }
.cta-btns { display: flex; justify-content: center; margin-top: 38px; }
.cta-fine { margin-top: 30px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--ink-faint); }
/* §9 finale: the section is an enter-scrub host; .bloom sits on the .wrap
   stage (scale 0.92→1, opacity 0.4→1), and the vignette breathes deeper —
   brighter and wider — as --p completes. Gated on no-preference; the plain
   vignette is the reduced-motion resting frame. No-JS: --p defaults to 1 →
   fully arrived. Section already has overflow: clip for the scale-up. */
@media (prefers-reduced-motion: no-preference) {
  .cta-final .vignette {
    opacity: calc(0.35 + clamp(0, var(--p, 1), 1) * 0.65);
    scale: calc(0.92 + clamp(0, var(--p, 1), 1) * 0.2);
  }
}

/* ---------- Reduced motion: land the phone complete, kill typing ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .phone .type { max-width: none !important; animation: none !important; }
  .type-caret { display: none !important; }
}