/* ═══════════════════════════════════════════════════
   SAMRO STUDIOS · the home page, 2026-09-30
   Loads after /pages/pages.css (tokens, .qa-card, .qa-btn) and
   /pages/chrome.css (the one header and footer). The look is public/og.png:
   a black first screen with the still blue orb and the gold italic line, then
   white sections in ink with one gold accent. The orb blue is only for
   buttons and small details. The iPhone and MacBook frames are copied from
   public/tools/movers.html; the call player rules from public/orb/orb.css.
   Zero em dashes.
   ═══════════════════════════════════════════════════ */

.home {
  --black: #0C0D10;
  --ivory: #F5F3EE;
  --ink: #17181C;
  --gold-hi: #C29C4B;
  --gold: #A07E33;
  --gold-text: #7E601E;
  --tint: #F8F7F3;
  --hair: #E6E3DC;
  --secondary: #4F5157;
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  overflow-x: clip;
}

/* French waits for its words before the first paint (see the head script). */
html[data-i18n-wait] main,
html[data-i18n-wait] .sx-top,
html[data-i18n-wait] .sx-foot { visibility: hidden; }

.home main section[id] { scroll-margin-top: 76px; }

/* ── shared type ─────────────────────────────────────── */
.h-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.h-kicker::before {
  content: "";
  width: 28px;
  height: 1.5px;
  background: currentColor;
  opacity: 0.7;
}
.h-kicker--dark { color: var(--gold-hi); }

.h-h2 {
  margin: 0;
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 600;
  color: var(--ink);
  text-wrap: balance;
}
.h-h3 {
  margin: 0 0 16px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.h-sub {
  margin: 18px 0 0;
  max-width: 36ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: var(--secondary);
}
.h-head { margin-bottom: clamp(36px, 5vw, 60px); }
.h-head--split { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) {
  .h-head--split { grid-template-columns: 1fr auto; }
}

.h-sec { padding-block: clamp(72px, 10vw, 136px); }
.h-sec--tint { background: var(--tint); border-block: 1px solid #EFECE5; }

/* the quiet dark button, for the custom band */
.qa-btn--ink { background: var(--ink); color: #fff !important; }
.qa-btn--ink:hover { background: #000; transform: translateY(-1px); }

/* ═══════════ 1. hero ═══════════ */
.h-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
  color: var(--ivory);
  min-height: min(calc(100svh - 68px), 860px);
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 9vw, 120px) clamp(64px, 9vw, 120px);
}
.h-hero__warm {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 70% at 0% 112%, rgba(160, 126, 51, 0.20), rgba(160, 126, 51, 0) 70%),
    radial-gradient(80% 60% at 70% 0%, rgba(255, 255, 255, 0.025), transparent 70%);
}
.h-hero__in { position: relative; }

/* "Every call / becomes a quote.": two lines, the gold one never breaks.
   The gold line is about 8.2 times the font size wide in English and 11.1 in
   French, so the size is set to clear the orb on a desk and to fit the width
   of a 390 phone. */
.h-hero__h {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 5.6rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-weight: 700;
  color: var(--ivory);
}
.h-hero__h em {
  display: block;
  font-style: italic;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #C29C4B 0%, #A07E33 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* room for the italic overhang and the descenders inside the clip */
  padding: 0.02em 0.12em 0.14em 0.1em;
  margin: -0.02em -0.12em -0.14em -0.12em;
}
.h-hero__sub {
  margin: clamp(22px, 3vw, 34px) 0 0;
  max-width: 34ch;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  line-height: 1.45;
  font-weight: 500;
  color: rgba(245, 243, 238, 0.74);
}
.h-hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: clamp(28px, 4vw, 44px);
}
.h-hero .qa-btn--line { color: var(--ivory); border-color: rgba(245, 243, 238, 0.34); }
.h-hero .qa-btn--line:hover { border-color: var(--ivory); background: rgba(245, 243, 238, 0.05); }
.h-btn-demo svg { margin-left: -4px; }
.h-hero__price {
  margin: 18px 0 0;
  font-size: 0.98rem;
  font-weight: 500;
  color: rgba(245, 243, 238, 0.62);
}

/* The orb from the share image: still, pale core, blue body, a warm gold rim
   on the side facing the type, rings and a wide halo. Sized off one number. */
.h-orb {
  --s: clamp(170px, 21vw, 300px);
  position: absolute;
  z-index: -1;
  left: 76%;
  top: 48%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.h-orb > span { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.h-orb__halo {
  width: calc(var(--s) * 3.5);
  height: calc(var(--s) * 3.5);
  background: radial-gradient(circle, rgba(10, 111, 232, 0.26) 0%, rgba(10, 111, 232, 0.09) 36%, rgba(10, 111, 232, 0) 66%);
}
.h-orb__glow {
  width: calc(var(--s) * 1.95);
  height: calc(var(--s) * 1.95);
  left: calc(var(--s) * -0.27);
  top: calc(var(--s) * 0.27);
  background: radial-gradient(circle, rgba(194, 156, 75, 0.10) 0%, rgba(194, 156, 75, 0) 62%);
}
.h-orb__ring { border: 1px solid rgba(124, 196, 255, 0.11); }
.h-orb__ring--1 { width: calc(var(--s) * 1.5); height: calc(var(--s) * 1.5); }
.h-orb__ring--2 { width: calc(var(--s) * 2.02); height: calc(var(--s) * 2.02); border-color: rgba(124, 196, 255, 0.055); }
.h-orb__ball {
  width: var(--s);
  height: var(--s);
  background: radial-gradient(circle at 40% 34%, rgba(124, 196, 255, 0.86) 0%, rgba(10, 111, 232, 0.70) 50%, rgba(6, 70, 160, 0.46) 100%);
  box-shadow: 0 0 90px 10px rgba(10, 111, 232, 0.28), inset -16px -22px 50px rgba(4, 30, 80, 0.55), inset 0 0 0 1px rgba(180, 220, 255, 0.12);
}
.h-orb__rim {
  width: var(--s);
  height: var(--s);
  background: radial-gradient(circle at 14% 84%, rgba(222, 184, 104, 0.55) 0%, rgba(222, 184, 104, 0.18) 22%, rgba(222, 184, 104, 0) 42%);
  box-shadow: inset 6px -6px 12px -5px rgba(226, 190, 112, 0.6);
  mix-blend-mode: screen;
}
.h-orb__core {
  width: calc(var(--s) * 0.53);
  height: calc(var(--s) * 0.53);
  left: calc(var(--s) * -0.06);
  top: calc(var(--s) * -0.1);
  background: radial-gradient(circle, rgba(235, 246, 255, 0.6) 0%, rgba(235, 246, 255, 0) 70%);
}
/* a very slow breath, nothing more */
@media (prefers-reduced-motion: no-preference) {
  .h-orb__ball, .h-orb__rim, .h-orb__core { animation: h-breathe 9s ease-in-out infinite alternate; }
  .h-orb__halo { animation: h-halo 9s ease-in-out infinite alternate; }
}
@keyframes h-breathe {
  from { transform: translate(-50%, -50%) scale(1); }
  to { transform: translate(-50%, -50%) scale(1.035); }
}
@keyframes h-halo {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

/* On a phone the orb sits behind the top right of the headline, smaller and
   quieter, so the buttons stay on the first screen. */
@media (max-width: 899px) {
  .h-hero { align-items: flex-start; min-height: 0; padding-top: calc(var(--orb-s) + 52px); padding-bottom: 60px; --orb-s: clamp(96px, 27vw, 150px); }
  .h-orb { --s: var(--orb-s); left: auto; right: calc(var(--s) * 0.5 + var(--gutter, 18px)); top: calc(var(--s) * 0.5 + 26px); }
  .h-orb__halo { opacity: 0.9; }
  .h-hero__h { font-size: clamp(2.2rem, 10.6vw, 4.6rem); }
}
/* The home hero only (trade pages keep their own sizes above and below). */
.h-hero:not(.h-hero--trade) .h-hero__h em { white-space: nowrap; }
html[lang^="fr"] .h-hero:not(.h-hero--trade) .h-hero__h { font-size: clamp(2rem, 4.5vw, 4.2rem); }
@media (max-width: 899px) {
  /* French on a phone: "Chaque appel / devient une / soumission." reads
     better than one gold line shrunk to fit. */
  html[lang^="fr"] .h-hero:not(.h-hero--trade) .h-hero__h { font-size: clamp(2.2rem, 11vw, 4.2rem); }
  html[lang^="fr"] .h-hero:not(.h-hero--trade) .h-hero__h em { white-space: normal; }
}
@media (max-width: 520px) {
  .h-hero__act .qa-btn { flex: 1 1 100%; }
  .h-hero__sub { font-size: 1.08rem; }
}

/* ═══════════ 2. how it works: the movers page's iPhone and step cards ═══════════ */
.tl-iphone {
  --bz: clamp(4px, 0.8vw, 8px);
  position: relative;
  container-type: inline-size;
  border: var(--bz) solid #0b0b0d;
  border-radius: calc(14% + var(--bz)) / calc(6.47% + var(--bz));
  background: #0b0b0d;
  box-shadow: 0 0 0 1.5px #56565c, 0 0 0 3px #1d1d20, 0 30px 60px rgba(30, 30, 90, 0.35), 0 8px 18px rgba(30, 30, 90, 0.2);
}
.tl-iphone__screen { position: relative; isolation: isolate; overflow: hidden; border-radius: 14cqw; aspect-ratio: 390 / 844; }
.tl-iphone__screen img { display: block; width: 100%; height: 100%; }
.tl-iphone__status {
  position: absolute; z-index: 2; inset: 0 0 auto; height: 13.85cqw;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 7.5cqw 1.4cqw 9cqw;
  color: #1d1d1f; font: 600 4.3cqw/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; letter-spacing: -0.01em;
}
.tl-iphone__status svg { display: block; height: 3.1cqw; width: auto; }
.tl-iphone__island {
  position: absolute; z-index: 3; top: 2.8cqw; left: 50%; width: 32.3cqw; height: 9.5cqw; transform: translateX(-50%);
  border-radius: 999px; background: #000;
}
.tl-iphone__home {
  position: absolute; z-index: 2; bottom: 2.1cqw; left: 50%; width: 34.4cqw; height: 1.3cqw; transform: translateX(-50%);
  border-radius: 999px; background: #1d1d1f;
}
.tl-iphone::before, .tl-iphone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2a2e; }
.tl-iphone::before { right: calc(-1 * var(--bz) - 4px); top: 24%; height: 12%; }
.tl-iphone::after { left: calc(-1 * var(--bz) - 4px); top: 20%; height: 7%; }
.tl-mac__screen::after, .tl-iphone__glare {
  content: ""; position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 30%, rgba(255, 255, 255, 0) 42%);
}

.tl-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: s;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.tl-steps::-webkit-scrollbar { display: none; }
.tl-step {
  counter-increment: s; scroll-snap-align: start; display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: #FBFAF6; border: 1px solid var(--hair);
}
.tl-step__shot {
  display: grid; place-items: center; padding: 34px 0 30px;
  background:
    radial-gradient(60% 55% at 20% 15%, rgba(10, 124, 255, 0.20), transparent 70%),
    radial-gradient(60% 55% at 85% 30%, rgba(139, 63, 240, 0.20), transparent 70%),
    linear-gradient(160deg, #eef2ff, #f5efff);
  border-bottom: 1px solid var(--hair);
}
.tl-step .tl-iphone {
  --bz: 6px; width: min(62%, 210px);
  box-shadow: 0 0 0 1.5px #56565c, 0 0 0 3px #1d1d20, 0 22px 44px rgba(30, 30, 90, 0.28), 0 6px 14px rgba(30, 30, 90, 0.16);
}
.tl-step__body { padding: 22px 24px 26px; }
.tl-step__t { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.tl-step__t::before {
  content: counter(s); flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: rgba(160, 126, 51, 0.14); color: var(--gold-text); font-size: 16px; font-weight: 600;
}
.tl-step p { margin: 0; color: var(--secondary); line-height: 1.5; }
@media (min-width: 820px) {
  .tl-steps { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 22px; overflow: visible; margin-inline: 0; padding: 0; }
}

/* ═══════════ 3. trades ═══════════
   Every trade is its own little product: a stage in the trade's colour and
   a phone rising out of it on that trade's first quote question. The eight
   hues share one lightness and one chroma (oklch), so they read as a family
   next to the gold and the orb blue. On a phone the screen keeps the icon and
   drops the words, so nothing gets tiny. */
/* Under 900px the row swipes sideways, the video first; on a desk it is a
   4 column grid and the video takes the top left 2 by 2, so the eight cards
   still close in clean rows (2 + 2 beside it, 4 under it). */
.h-trades {
  list-style: none;
  margin: 0 calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 18px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.h-trades::-webkit-scrollbar { display: none; }
.h-trades li { display: flex; flex: 0 0 min(64vw, 248px); scroll-snap-align: start; }
.h-trades .h-reel-li { flex-basis: min(76vw, 292px); }
@media (min-width: 900px) {
  .h-trades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; overflow: visible; }
  .h-trades .h-reel-li { grid-column: span 2; grid-row: span 2; }
}

.h-trade {
  --c: 0.075;
  --acc: oklch(0.52 0.13 var(--h));
  --on-acc: #fff;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 7px 7px 64px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--hair);
  color: var(--ink) !important;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(37, 33, 22, 0.04);
  transition: border-color 220ms, box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
}

.h-trade--movers    { --h: 262; }
.h-trade--roofers   { --h: 38; }
.h-trade--junk      { --h: 142; }
.h-trade--detailing { --h: 196; }
.h-trade--mechanic  { --h: 62; }
.h-trade--snow      { --h: 232; --c: 0.05; }
.h-trade--towing    { --h: 88; --acc: oklch(0.8 0.15 88); --on-acc: #17181C; }
.h-trade--medspa    { --h: 350; }

/* the stage: a soft wash of the trade's colour, two faint rings from the orb */
.h-trade__stage {
  position: relative;
  display: flex;
  justify-content: center;
  height: 176px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 118%, transparent 38%, oklch(0.5 var(--c) var(--h) / 0.09) 38.3%, transparent 38.8%, transparent 58%, oklch(0.5 var(--c) var(--h) / 0.06) 58.3%, transparent 58.8%),
    radial-gradient(90% 80% at 50% 110%, oklch(0.86 calc(var(--c) * 1.25) var(--h)), transparent 72%),
    linear-gradient(180deg, oklch(0.975 calc(var(--c) * 0.35) var(--h)), oklch(0.93 calc(var(--c) * 0.8) var(--h)));
}

/* the phone, cropped by the bottom of the stage */
.h-trade__ph {
  position: relative;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: min(76%, 210px);
  height: 100%;
  margin-top: 22px;
  padding: 30px 11px 0;
  border: 5px solid #0b0b0d;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: #fff;
  box-shadow: 0 0 0 1px #3a3a3f, 0 18px 36px -10px oklch(0.35 0.08 var(--h) / 0.4);
  transition: transform 420ms var(--ease-out);
}
.h-trade__ph::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 34%;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0b0b0d;
}
.h-trade__ic {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--acc);
  box-shadow: 0 1px 2px oklch(0.3 0.06 var(--h) / 0.22), 0 3px 8px -3px oklch(0.3 0.06 var(--h) / 0.3);
}
/* the rendered tiles in public/media/trade-icons (masters in design/trade-icons-2026-10-01) */
.h-trade__ic img { display: block; width: 30px; height: 30px; border-radius: 7px; }
.h-trade__q {
  margin: 2px 0 1px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h-trade__o {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  color: #3d3f45;
  background: #F3F2EF;
  white-space: nowrap;
}
.h-trade__o::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #B9B7B0;
}
.h-trade__o--on {
  color: var(--ink);
  background: oklch(0.955 calc(var(--c) * 0.45) var(--h));
  box-shadow: inset 0 0 0 1.5px var(--acc);
}
.h-trade__o--on::after { box-shadow: inset 0 0 0 3.5px var(--acc); }

.h-trade__n,
.h-trade__p { padding-inline: 15px; }
.h-trade__n { font-size: clamp(1.08rem, 1.6vw, 1.3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.h-trade__p { margin-top: 7px; font-size: 0.95rem; line-height: 1.45; color: var(--secondary); }

.h-trade__go {
  position: absolute;
  left: 22px;
  bottom: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  transition: background-color 220ms, border-color 220ms, color 220ms, transform 320ms var(--ease-out);
}
.h-trade__go::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
}

@media (hover: hover) {
  .h-trade:hover {
    border-color: oklch(0.8 calc(var(--c) * 0.9) var(--h));
    box-shadow: 0 22px 44px -20px oklch(0.35 0.08 var(--h) / 0.38), 0 2px 6px rgba(37, 33, 22, 0.05);
    transform: translateY(-4px);
  }
  .h-trade:hover .h-trade__ph { transform: translateY(-8px); }
  .h-trade:hover .h-trade__go { background: var(--acc); border-color: var(--acc); color: var(--on-acc); transform: translateX(4px); }
}
.h-trade:active { transform: scale(0.985); transition-duration: 120ms; }
.h-trade:focus-visible { outline: 2px solid #0A6FE8; outline-offset: 3px; }

/* in the swipe row the cards stretch to the video's height: the stage takes
   the extra room and the phone rises a little higher out of it */
@media (max-width: 899px) {
  .h-trade__stage { flex: 1 0 176px; }
}

@media (prefers-reduced-motion: reduce) {
  .h-trade, .h-trade__ph, .h-trade__go { transition: none; }
  .h-trade:hover, .h-trade:active, .h-trade:hover .h-trade__ph, .h-trade:hover .h-trade__go { transform: none; }
}

/* the video tile: the same card, a dark stage like the first screen, and the
   slim phone frame from public/pages/promo.css (/movers "Watch it in 20
   seconds"). The phone is placed absolutely so it never sizes the row; it
   takes the stage's height and keeps 9:16. */
.h-reel {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 7px 7px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgba(37, 33, 22, 0.04);
}
.h-reel__stage {
  position: relative;
  flex: 1 0 auto;
  min-height: 440px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 120%, transparent 40%, rgba(194, 156, 75, 0.16) 40.3%, transparent 40.8%, transparent 60%, rgba(194, 156, 75, 0.1) 60.3%, transparent 60.8%),
    radial-gradient(70% 55% at 50% 105%, rgba(10, 111, 232, 0.34), transparent 70%),
    linear-gradient(180deg, #17181d, var(--black));
}
.h-reel__phone {
  position: absolute;
  top: 50%;
  left: 50%;
  height: calc(100% - 40px);
  aspect-ratio: 0.585;
  padding: 7px;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  border-radius: 38px;
  background: #0C0D10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 0 0 1px #3a3a3f, 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.h-reel__v {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 31px;
  background: #1d1e23;
  object-fit: cover;
  cursor: pointer;
}
.h-reel__snd {
  position: absolute;
  right: 17px;
  bottom: 17px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(12, 13, 16, 0.58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms;
}
.h-reel__snd::before { content: ""; position: absolute; inset: -4px; } /* a 44px target */
.h-reel__snd:active { transform: scale(0.92); }
.h-reel__snd svg { width: 18px; height: 18px; fill: currentColor; }
.h-reel__on { display: none; }
.h-reel__snd[aria-pressed="true"] .h-reel__on { display: block; }
.h-reel__snd[aria-pressed="true"] .h-reel__off { display: none; }
.h-reel__play {
  position: absolute;
  inset: 7px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 31px;
  background: transparent;
  cursor: pointer;
}
.h-reel__play span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(12, 13, 16, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.h-reel__play svg { width: 24px; height: 24px; margin-left: 4px; fill: #fff; }
.h-reel__snd[hidden], .h-reel__play[hidden] { display: none; }
.h-reel__snd:focus-visible, .h-reel__play:focus-visible, .h-reel__v:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.h-reel__cap { display: flex; flex-direction: column; }
.h-reel__link {
  align-self: flex-start;
  margin: 7px 15px 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--gold-text);
  text-decoration: none;
}
.h-reel__link::after { content: "\2192"; display: inline-block; margin-left: 5px; transition: transform 220ms var(--ease-out); }
.h-reel__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.h-reel__link:hover::after { transform: translateX(3px); }
@media (min-width: 900px) {
  .h-reel__stage { min-height: 0; flex: 1 1 0; }
  .h-reel__phone { height: calc(100% - 56px); }
}
@media (prefers-reduced-motion: reduce) {
  .h-reel__snd, .h-reel__link::after { transition: none; }
}

/* ═══════════ 4. by text and by phone ═══════════ */
.h-tp { display: grid; gap: 64px; }
@media (min-width: 960px) {
  .h-tp { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
}
.h-tp__col { min-width: 0; }
.h-tp__lead { margin: -4px 0 26px; max-width: 40ch; font-size: 1.1rem; line-height: 1.5; color: var(--secondary); }
.h-tp__cap { margin: 18px 0 0; font-size: 0.95rem; color: var(--secondary); text-align: center; }

/* the drawn text thread, in the same slim iPhone */
.h-sms { display: grid; place-items: center; padding: 34px 0; border-radius: 22px;
  background:
    radial-gradient(60% 55% at 20% 15%, rgba(10, 124, 255, 0.14), transparent 70%),
    radial-gradient(60% 55% at 85% 30%, rgba(194, 156, 75, 0.14), transparent 70%),
    linear-gradient(160deg, #F3F4F8, #F7F3EC);
  border: 1px solid var(--hair);
}
.h-sms__phone {
  width: min(86%, 330px);
  border: 7px solid #0b0b0d;
  border-radius: 50px;
  background: #0b0b0d;
  box-shadow: 0 0 0 1.5px #56565c, 0 0 0 3px #1d1d20, 0 26px 54px rgba(30, 30, 90, 0.26), 0 6px 14px rgba(30, 30, 90, 0.14);
}
.h-sms__screen {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  border-radius: 43px;
  overflow: hidden;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "General Sans", sans-serif;
}
.h-sms__status {
  position: relative;
  display: flex; justify-content: space-between; align-items: center;
  height: 46px; padding: 0 24px 0 30px;
  font-size: 14px; font-weight: 600; color: #1d1d1f;
}
.h-sms__status svg { height: 10px; width: auto; }
.h-sms__island { position: absolute; top: 10px; left: 50%; width: 96px; height: 28px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.h-sms__who {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 6px 0 12px; border-bottom: 1px solid #EEE;
  background: #F9F9FA;
}
.h-sms__av {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(180deg, #A8ADB6, #858B95); color: #fff; font-size: 15px; font-weight: 600;
}
.h-sms__name { font-size: 12.5px; font-weight: 500; color: #1d1d1f; }
.h-sms__talk { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 12px; }
.h-sms__miss {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 8px; padding: 5px 10px; border-radius: 999px;
  background: #FDECEC; color: #C2362F; font-size: 11.5px; font-weight: 600;
}
.h-sms__b {
  max-width: 80%;
  margin: 0;
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.35;
  border-radius: 18px;
}
.h-sms__b--us { align-self: flex-start; background: #E9E9EB; color: #1d1d1f; border-bottom-left-radius: 5px; }
.h-sms__b--them { align-self: flex-end; background: #0A6FE8; color: #fff; border-bottom-right-radius: 5px; }
.h-sms__b .qa-eg { font-weight: 600; white-space: nowrap; }
.h-sms__bar { margin: 4px 12px 18px; padding: 8px 14px; border: 1px solid #DDD; border-radius: 999px; font-size: 13px; color: #6E6E73; }

/* the recorded call: the player from public/orb/orb.css, in this page's colours */
.vplayer {
  --accent: #0A6FE8;
  --on-accent: #fff;
  --muted: var(--secondary);
  --r: 18px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --glow: rgba(10, 111, 232, 0.25);
  margin: 0;
}
.vplayer__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d1117;
  border-radius: var(--r);
  box-shadow: 0 30px 70px -30px rgba(12, 13, 16, 0.55), 0 12px 40px -24px var(--glow);
}
.vplayer__v { display: block; width: 100%; height: 100%; object-fit: cover; background: #0d1117; }
.vplay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 0; color: var(--on-accent); background: none; border: 0; cursor: pointer;
  transition: opacity 160ms var(--ease);
}
.vplay__svg { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55)); transition: transform 160ms var(--ease); }
.vplay__bg { fill: var(--accent); fill-opacity: 0.96; }
.vplay:hover .vplay__svg { transform: scale(1.06); }
.vplay:hover .vplay__bg { fill-opacity: 1; }
.vplay:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: var(--r); }
.vplayer[data-playing="1"] .vplay { opacity: 0; pointer-events: none; }
.vplayer[data-playing="1"][data-bar="1"] .vplay,
.vplayer[data-done="1"] .vplay { opacity: 0; }
.vpill {
  position: absolute; right: 10px; bottom: 10px; padding: 3px 7px;
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: #fff; background: rgba(0, 0, 0, 0.78); border-radius: 6px; pointer-events: none;
  transition: opacity 160ms var(--ease);
}
.vplayer[data-playing="1"] .vpill,
.vplayer[data-bar="1"] .vpill { opacity: 0; }
.vplayer[data-auto="1"][data-playing="1"]:not([data-bar="1"]) .vpill { opacity: 1; }
.vsound {
  position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 13px 20px; font: 700 1rem/1 var(--font-body); color: var(--on-accent); background: var(--accent);
  border: 0; border-radius: 999px; cursor: pointer; transform: translate(-50%, -50%);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}
.vsound[hidden] { display: none; }
.vsound__i { flex: none; width: 20px; height: 20px; fill: currentColor; }
.vbar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 2px;
  padding: 6px 4px 5px; background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.vplayer[data-bar="1"] .vbar,
.vplayer:focus-within .vbar { opacity: 1; transform: none; pointer-events: auto; }
.vplayer[data-playing="0"]:not([data-done="1"]) .vbar,
.vplayer:not([data-playing]) .vbar { opacity: 0; pointer-events: none; }
.vplayer[data-playing="0"]:not([data-done="1"]):focus-within .vbar { opacity: 1; pointer-events: auto; }
.vbtn {
  flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0;
  font: 700 0.6875rem/1 var(--font-body); color: #fff; background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.vbtn[hidden] { display: none; }
.vbtn:hover { background: rgba(255, 255, 255, 0.16); }
.vbtn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.vbtn--cc[aria-pressed="true"] { color: #0d1117; background: #fff; }
.vi { width: 20px; height: 20px; fill: currentColor; }
.vi--play, .vi--off { display: none; }
.vplayer[data-playing="0"] .vi--pause { display: none; }
.vplayer[data-playing="0"] .vi--play { display: block; }
.vbtn[aria-pressed="true"] .vi--loud { display: none; }
.vbtn[aria-pressed="true"] .vi--off { display: block; }
.vseek { position: relative; flex: 1 1 auto; height: 20px; margin: 0 4px; cursor: pointer; touch-action: none; }
.vseek::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  background: rgba(255, 255, 255, 0.3); border-radius: 2px;
}
.vseek__buf, .vseek__fill { position: absolute; left: 0; top: 50%; height: 3px; width: 0; margin-top: -1.5px; border-radius: 2px; }
.vseek__buf { background: rgba(255, 255, 255, 0.45); }
.vseek__fill { background: var(--accent); }
.vseek__dot {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  background: var(--accent); border-radius: 50%; opacity: 0; transition: opacity 120ms var(--ease);
}
.vseek:hover .vseek__dot, .vseek:focus-visible .vseek__dot, .vseek[data-drag="1"] .vseek__dot { opacity: 1; }
.vseek:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
.vtime { flex: none; padding: 0 4px; font-size: 0.75rem; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.vplayer__soon { margin: 10px 0 0; font-size: 0.8125rem; color: var(--muted); text-align: center; }
.h-call__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 18px; }
.h-call__t { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }
.h-call__d { font-size: 0.95rem; color: var(--secondary); }

/* ═══════════ 5. pricing: the one card, centred on this page ═══════════ */
.home .qa-price { padding-block: clamp(72px, 10vw, 136px); }
.home .qa-price .section-h {
  margin: 0 auto clamp(32px, 4vw, 48px);
  max-width: 16ch;
  text-align: center;
  font-size: clamp(2.1rem, 5vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 600;
  text-wrap: balance;
}
.home .qa-card { margin-inline: auto; }
.home .qa-card::after {
  content: "";
  position: absolute;
  left: -160px;
  bottom: -200px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(160, 126, 51, 0.16), rgba(160, 126, 51, 0) 66%);
  pointer-events: none;
}
.h-alert {
  max-width: 980px;
  margin: 0 auto 18px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #FFF4E5;
  border: 1px solid #F1D3A6;
  color: #6B4A12;
  font-size: 0.98rem;
}
.h-alert[hidden] { display: none; }

/* ═══════════ 6. custom builds: finished laptop and phone mockups ═══════════
   The images are the rendered mockups from design/gbp-2026-09-30 (soft
   gradient stage included), so the card draws no device frame of its own:
   a rounded picture, a soft shadow, the caption under it. */
.h-head__btn { justify-self: start; }
.h-work {
  display: grid;
  gap: 18px;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 400px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter));
  padding: 4px var(--gutter) 26px;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.h-work::-webkit-scrollbar { display: none; }
.tl-card { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.tl-card__img {
  border-radius: 18px; overflow: hidden; background: #eceaf7;
  box-shadow: 0 18px 40px rgba(37, 33, 60, 0.12), 0 2px 6px rgba(37, 33, 60, 0.06);
}
.tl-card__img > img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 786; }
.tl-card figcaption { padding: 18px 4px 0; }
.tl-card__k { margin: 0 0 6px; color: var(--gold-text); font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.tl-card__t { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.tl-card__p { margin: 6px 0 0; color: var(--secondary); font-size: 15.5px; line-height: 1.45; max-width: 40ch; }
@media (min-width: 900px) {
  .h-work {
    grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 40px 24px;
    overflow: visible; margin-inline: 0; padding: 0;
  }
  /* Seven cards: two wide, three narrow, two wide. */
  .h-work > .tl-card { grid-column: span 2; }
  .h-work > .tl-card:nth-child(-n + 2), .h-work > .tl-card:nth-last-child(-n + 2) { grid-column: span 3; }
  .h-work > .tl-card:nth-child(-n + 2) .tl-card__t, .h-work > .tl-card:nth-last-child(-n + 2) .tl-card__t { font-size: 23px; }
}

.h-quotes { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(36px, 4vw, 48px); border-top: 1px solid var(--hair); }
.h-quotes__h { margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--secondary); }
.h-quotes__row { display: grid; gap: 28px; }
@media (min-width: 900px) { .h-quotes__row { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.h-quote { margin: 0; }
.h-quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.h-quote figcaption { margin-top: 14px; font-size: 0.92rem; color: var(--secondary); }
.h-quote figcaption b { font-weight: 600; color: var(--ink); }
.h-quote figcaption span::before { content: "·"; margin: 0 8px 0 4px; color: var(--gold); }

/* ═══════════ 8. FAQ: a phone showing a Messages conversation ═══════════
   The slim iPhone from "How it works" (.tl-iphone, container-type inline-size)
   holding the old home page's message thread (commit 10cb021). Everything
   inside is sized in cqw, so the screen scales with the phone: about 360px on
   a desk, the full width of a 390 phone. The visitor's side (the questions,
   typed into the bar) is the blue sent bubble; the answers are the grey
   received ones, as their own phone shows it. The type is the page's. */
.ph-grid { display: grid; gap: clamp(26px, 5vw, 44px); align-items: center; }
.ph-head { margin-bottom: 0; }
.ph-head .h-sub { max-width: 34ch; }
.ph-wrap { display: flex; flex-direction: column; align-items: center; }
.ph { --bz: 7px; width: min(100%, 360px); }
.ph-note { margin: 18px 0 0; max-width: 36ch; font-size: 12.5px; line-height: 1.5; color: #6E6E73; text-align: center; }
@media (min-width: 900px) {
  .ph-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
  .ph { --bz: 8px; }
}

.ph__screen { display: flex; flex-direction: column; background: #fff; }

/* The Messages header: the business, its round avatar, a hairline. */
.ph__top {
  flex: none; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw;
  padding: 14.6cqw 0 2.6cqw; background: rgba(246, 246, 248, 0.96); border-bottom: 1px solid #E5E5EA;
}
.ph__av {
  display: grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%;
  background: #0C0D10; overflow: hidden;
}
.ph__av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph__name { font-size: 3.2cqw; font-weight: 500; color: #1C1C1E; }

/* The conversation. It scrolls inside the phone, never the page. */
.ph__thread {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 2cqw; padding: 4cqw 4cqw 3cqw;
}
.ph__thread::-webkit-scrollbar { display: none; }
.im-msg {
  max-width: 78%; margin: 0; padding: 2.3cqw 3.7cqw;
  font-size: 3.85cqw; line-height: 1.38; letter-spacing: -0.005em;
  white-space: pre-line; overflow-wrap: anywhere;
  animation: im-in 0.34s var(--ease-out) both;
}
.im-msg--me { align-self: flex-end; border-radius: 4.8cqw 4.8cqw 1.4cqw 4.8cqw; background: #0A6FE8; color: #fff; }
.im-msg--them { align-self: flex-start; border-radius: 4.8cqw 4.8cqw 4.8cqw 1.4cqw; background: #E9E9EB; color: #1C1C1E; }
.im-msg--me + .im-msg--them, .im-msg--them + .im-msg--me, .im-acts + .im-msg { margin-top: 1.2cqw; }
@keyframes im-in {
  from { opacity: 0; transform: translateY(2cqw) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Three dots while the answer is on its way. */
.im-dots { display: inline-flex; gap: 1.2cqw; padding: 0.8cqw 0; }
.im-dots i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #8E8E93; animation: im-dot 1.2s infinite ease-in-out; }
.im-dots i:nth-child(2) { animation-delay: 0.15s; }
.im-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes im-dot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-0.8cqw); }
}

/* The one next step an answer can offer, under the received bubble. */
.im-acts { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.im-act {
  display: inline-flex; align-items: center; min-height: 8.4cqw; padding: 0 3.4cqw;
  border: 1.5px solid #0A6FE8; border-radius: 999px;
  font-size: 3.4cqw; font-weight: 600; color: #0A6FE8; text-decoration: none;
}
.im-act:hover { background: #0A6FE8; color: #fff; }
.im-act:focus-visible { outline: 2px solid #0A6FE8; outline-offset: 2px; }

/* The fixed answers, as chips above the bar. */
.ph__chips {
  flex: none; display: flex; gap: 1.8cqw; overflow-x: auto; scrollbar-width: none;
  padding: 1.6cqw 4cqw 2cqw; scroll-padding-inline: 4cqw;
}
.ph__chips::-webkit-scrollbar { display: none; }
.ph__chips:empty { display: none; }
.ph__chip {
  flex: none; padding: 1.9cqw 3.4cqw; border: 1px solid #D1D1D6; border-radius: 999px; background: #fff;
  font: inherit; font-size: 3.3cqw; font-weight: 500; color: #0A6FE8; cursor: pointer; white-space: nowrap;
}
.ph__chip:hover { background: #F2F7FF; border-color: #0A6FE8; }
.ph__chip:focus-visible { outline: 2px solid #0A6FE8; outline-offset: 2px; }

/* The message bar, with a blinking cursor in it. */
.ph__bar {
  flex: none; display: flex; align-items: center; gap: 2cqw;
  margin: 0 3.4cqw 9cqw; padding: 1.2cqw 1.2cqw 1.2cqw 4cqw;
  border: 1px solid #D1D1D6; border-radius: 999px; background: #fff;
}
.ph__bar:focus-within { border-color: #0A6FE8; box-shadow: 0 0 0 3px rgba(10, 111, 232, 0.14); }
.ph__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ph__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.ph__in {
  width: 100%; height: 8.6cqw; padding: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
  color: #1C1C1E;
}
.ph__ghost {
  position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none;
  font-size: 3.7cqw; white-space: nowrap; color: #1C1C1E;
}
.ph__typed:empty + .ph__caret + .ph__ph { display: inline; }
.ph__ph { display: none; margin-left: 0.4cqw; color: #8E8E93; overflow: hidden; text-overflow: ellipsis; }
.ph__caret { flex: none; width: 2px; height: 4.6cqw; margin-left: 1px; border-radius: 1px; background: #0A6FE8; animation: ph-blink 1.05s steps(1) infinite; }
@keyframes ph-blink { 50% { opacity: 0; } }
.ph__field:focus-within .ph__ghost, .ph__in:not(:placeholder-shown) + .ph__ghost { display: none; }
.ph__send {
  flex: none; display: grid; place-items: center; width: 8.6cqw; height: 8.6cqw; padding: 0;
  border: 0; border-radius: 50%; background: #0A6FE8; color: #fff; cursor: pointer;
}
.ph__send svg { width: 4.6cqw; height: 4.6cqw; }
.ph__send:hover { background: #0961CC; }
.ph__send:focus-visible { outline: 2px solid #0A6FE8; outline-offset: 2px; }
.ph__send:disabled { opacity: 0.4; cursor: default; }
.ph__capped {
  flex: none; display: block; margin: 0 3.4cqw 9cqw; padding: 3cqw 4cqw; border-radius: 999px;
  background: #F2F2F7; color: #0A6FE8; font-size: 3.5cqw; font-weight: 600; text-align: center; text-decoration: none;
}
.ph__capped[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .im-msg { animation: none; }
  .im-dots i { animation: none; opacity: 0.6; }
  .ph__caret { animation: none; }
}

/* ═══════════ the demo dialog ═══════════ */
.h-demo {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ivory);
  overflow: visible;
  max-height: none;
}
.h-demo::backdrop { background: rgba(8, 9, 12, 0.78); backdrop-filter: blur(6px); }
.h-demo__in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.h-demo__top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 16px; }
.h-demo__t { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--ivory); }
.h-demo__x {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(245, 243, 238, 0.3); border-radius: 50%; background: rgba(12, 13, 16, 0.6); color: var(--ivory); cursor: pointer;
}
.h-demo__x:hover { border-color: var(--ivory); }
.h-demo__x:focus-visible, .h-demo__full:focus-visible { outline: 2px solid #7CC4FF; outline-offset: 3px; }
.h-demo__phone {
  --h: min(calc(100vh - 150px), 780px);
  height: var(--h);
  aspect-ratio: 390 / 844;
  border: 8px solid #0b0b0d;
  border-radius: 54px;
  background: #0b0b0d;
  box-shadow: 0 0 0 1.5px #56565c, 0 0 0 3px #1d1d20, 0 40px 90px rgba(0, 0, 0, 0.6);
}
.h-demo__screen { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 46px; overflow: hidden; background: #fff; }
.h-demo__status {
  position: relative; flex: none; display: flex; justify-content: space-between; align-items: center;
  height: 48px; padding: 0 26px 0 32px; font: 600 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; color: #1d1d1f;
}
.h-demo__status svg { height: 11px; width: auto; }
.h-demo__island { position: absolute; top: 11px; left: 50%; width: 104px; height: 30px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.h-demo__frame { flex: 1; width: 100%; border: 0; display: block; background: #fff; }
.h-demo__home { position: absolute; bottom: 8px; left: 50%; width: 120px; height: 5px; transform: translateX(-50%); border-radius: 999px; background: #1d1d1f; pointer-events: none; }
.h-demo__full { color: var(--ivory) !important; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* line the page up with the header's own column */
.home { --gutter: clamp(18px, 4vw, 48px); }
.home .container { max-width: 1200px; padding-inline: var(--gutter); }

/* The shared header is wider than a 390 phone with its button, its logo and
   the burger. On the home page the hero carries the same button a thumb
   away, so the header keeps the logo and the burger on narrow phones. */
@media (max-width: 440px) {
  .home .sx-nav .sx-cta { display: none; }
  .home .sx-burger { margin-left: auto; }
}

/* ═══════════ the trade pages (scripts/build-trades.mjs) ═══════════ */
.h-hero--trade .h-hero__h { max-width: 12ch; font-size: clamp(3rem, 8.2vw, 6.4rem); }
.t-demo__note {
  display: inline-block;
  margin: calc(clamp(36px, 5vw, 60px) * -0.5) 0 clamp(28px, 4vw, 44px);
  padding: 10px 16px;
  border-radius: 999px;
  background: #FBF6EA;
  border: 1px solid #EFE2C2;
  color: var(--gold-text);
  font-size: 0.98rem;
  font-weight: 500;
}
.t-asks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
@media (min-width: 900px) {
  .t-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
.t-ask {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--hair);
}
.t-ask__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #F3EEDF;
  color: var(--gold-text);
  font-size: 0.95rem;
  font-weight: 600;
}
.t-ask__h { margin: 4px 0 6px; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; }
.t-ask p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--secondary); }
.t-asks__note { margin: 22px 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.5; color: var(--secondary); }