/*
 * The trial homepage (templates/home-trial.html), from Riley's 2026-10-04
 * design D-01: today's homepage sections, numbers and motion, laid out like
 * paired.com. Laptop sizes are the design's 1280px board; at 860px and below
 * the page takes the design's phone reflow (its 390px board).
 * Shared pieces (footer, sticky bar, language menu, dates reel) keep their
 * styles from partials/site-styles-v2.html.
 */

/* Each photo is gone by a third of the cycle, where the next one starts, so a
   photo that begins part-way through never shows over the one on screen. */
@keyframes ht-hero { 0%, 24% { opacity: 1 } 33%, 91% { opacity: 0 } 100% { opacity: 1 } }
@keyframes ht-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

.ht { background: #FBF9F7; }
/* The shared base caps images at their container's width, which squeezes the
   small fixed-size pictures here (faces, logos, badges) to nothing. */
.ht-avatar img, .ht-founders-faces img, .ht-brand img, .ht-story-who img, .ht-badges img, .ht-closing-words > img { max-width: none; flex: none; }
.ht-page { position: relative; overflow-x: clip; background: #FBF9F7; }

/* Buttons. The pink pill is every "try it" button on the page. */
.ht-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 8px 26px; border-radius: 28px; box-sizing: border-box; max-width: 100%;
  border: .5px solid rgba(255,255,255,.38);
  background: linear-gradient(135deg,#E91E63,rgba(233,30,99,.9));
  box-shadow: 0 6px 12px rgba(255,107,157,.16);
  /* Some languages run long: wrap onto a second line rather than overflow. */
  color: #fff; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.2; text-align: center; text-wrap: balance;
  transition: transform .15s cubic-bezier(.34,1.26,.64,1), box-shadow .2s ease;
}
.ht-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(255,107,157,.3); }
.ht-btn:active { transform: scale(.97); }
.ht-btn--white { border: none; background: #fff; color: var(--amora-pink); font-weight: 800; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.ht-btn--white:hover { color: var(--amora-pink); box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.ht-btn--hero { width: 360px; }

/* Navigation: a floating glass pill on a laptop, a slim sticky bar on a phone. */
.ht-nav { position: relative; z-index: 40; display: flex; justify-content: center; padding: 18px 40px 0; background: radial-gradient(900px 300px at 15% 0%, rgba(233,30,99,.12), rgba(233,30,99,0) 70%), #FBF9F7; }
.ht-nav-bar {
  display: flex; align-items: center; gap: 6px; width: 100%; max-width: 1040px; height: 60px;
  padding: 0 8px 0 22px; box-sizing: border-box; border-radius: 999px;
  background: rgba(255,255,255,.72); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 0 0 .5px rgba(36,27,34,.08);
}
.ht-brand { display: flex; align-items: center; gap: 10px; flex: none; }
.ht-brand img:first-child { width: 30px; height: 30px; border-radius: 8px; display: block; }
.ht-brand img + img { height: 22px; width: auto; display: block; }
.ht-nav-space { flex: 1; }
.ht-nav-link {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px;
  color: var(--text-primary); font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background .15s ease;
}
.ht-nav-link:hover { color: var(--text-primary); background: rgba(36,27,34,.05); }
.ht-nav-rule { width: 1px; height: 20px; margin: 0 8px; background: rgba(36,27,34,.12); }
.ht-nav .amora-lang-wrap { position: relative; }
.ht-nav-try {
  display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 22px;
  background: #241B22; color: #fff; font-size: 14.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 14px rgba(36,27,34,.18); transition: transform .15s cubic-bezier(.34,1.26,.64,1);
}
.ht-nav-try:hover { color: #fff; transform: translateY(-1px); }
.ht-nav-try:active { transform: scale(.97); }
.ht-nav-try span { color: #FF6B9D; }
.ht-nav .amora-burger { display: none; }

/* The phone menu: the design's full-screen sheet over the page. */
.ht-sheet {
  position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column;
  background: rgba(251,249,247,.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  padding-bottom: env(safe-area-inset-bottom);
}
.ht-sheet.is-open { display: flex; }
.ht-sheet-head { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 8px 0 16px; box-shadow: inset 0 -.5px 0 rgba(36,27,34,.12); }
.ht-sheet-close { position: relative; width: 44px; height: 44px; border: none; background: transparent; color: var(--text-primary); cursor: pointer; }
.ht-sheet-close span { position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
.ht-sheet-close span:first-child { transform: rotate(45deg); }
.ht-sheet-close span:last-child { transform: rotate(-45deg); }
.ht-sheet-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 24px; overflow-y: auto; }
.ht-sheet-nav a { padding: 16px 0; border-bottom: .5px solid rgba(36,27,34,.1); color: var(--text-primary); font-size: 24px; font-weight: 600; }
.ht-sheet-nav details { border-bottom: .5px solid rgba(36,27,34,.1); }
.ht-sheet-nav summary { padding: 16px 0; color: var(--text-primary); font-size: 24px; font-weight: 600; }
.ht-sheet-langs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; padding: 0 0 14px; }
.ht-sheet-langs a { padding: 8px 10px; border: none; border-radius: 11px; color: var(--text-primary); font-size: 15px; font-weight: 600; }
.ht-sheet-langs a.is-current { background: var(--surface-pressed); }
.ht-sheet-foot { padding: 0 24px 32px; }
.ht-sheet-foot .ht-btn { width: 100%; min-height: 54px; }

/* Hero */
.ht-hero {
  background:
    radial-gradient(900px 600px at 15% 0%, rgba(233,30,99,.12), rgba(233,30,99,0) 70%),
    radial-gradient(700px 500px at 90% 0%, rgba(255,167,38,.10), rgba(255,167,38,0) 70%),
    #FBF9F7;
}
.ht-hero-copy { display: flex; flex-direction: column; align-items: center; padding: 48px 64px 0; text-align: center; }
.ht-hero h1 { margin: 24px 0 0; font-size: 76px; font-weight: 700; line-height: .98; letter-spacing: -.045em; }
.ht-hero-lead { margin: 14px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -.024em; color: var(--text-secondary); }
.ht-hero-lead span { color: var(--amora-pink); }
.ht-hero-cta { margin-top: 30px; }
.ht-hero-sub { margin-top: 14px; color: var(--text-secondary); font-size: 14px; font-weight: 600; }
.ht-hero-proof { display: flex; align-items: center; gap: 22px; margin-top: 26px; }
.ht-badges { display: flex; align-items: center; gap: 12px; }
.ht-badges img { display: block; height: 44px; width: auto; }
/* A phone shows only its own store (home-v2.js, initPlatform). */
.ht-badges a[hidden] { display: none !important; }
.ht-proof-rule { width: 1px; height: 30px; background: rgba(36,27,34,.12); }
.ht-rating { display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
.ht-rating b { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; }
.ht-rating b span { color: var(--gold); letter-spacing: 1px; }
/* 4.6 is the App Store's own average, so it carries the store's name. */
.ht-rating b a { margin-left: 2px; color: var(--text-tertiary); font-size: 13px; font-weight: 600; }
.ht-rating small { max-width: 54ch; color: var(--text-tertiary); font-size: 12px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.ht-hero-media {
  position: relative; height: 520px; margin: 56px 64px 0; border-radius: 36px; overflow: hidden;
  background: #D8E2ED; box-shadow: 0 24px 60px rgba(36,27,34,.14);
}
.ht-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ht-hero 13.5s ease-in-out infinite; }
.ht-hero-media img:nth-child(1) { object-position: 70% 22%; }
.ht-hero-media img:nth-child(2) { object-position: 52% 12%; animation-delay: -4.5s; }
.ht-hero-media img:nth-child(3) { object-position: 58% 20%; animation-delay: -9s; }

/* The four feature rows: a picture and a block of words side by side. */
.ht-rows { display: flex; flex-direction: column; gap: 120px; padding: 120px 96px 0; }
.ht-pair { display: flex; flex-direction: column; gap: 120px; }
.ht-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; align-items: center; }
.ht-row > .ht-visual { order: 1; }
.ht-row > .ht-words { order: 2; }
.ht-row--flip > .ht-visual { order: 2; }
.ht-row--flip > .ht-words { order: 1; }
.ht-visual { position: relative; height: 460px; border-radius: 32px; overflow: hidden; box-shadow: 0 20px 50px rgba(36,27,34,.10); }
.ht-visual--blush { background: linear-gradient(160deg,#FBE4EC,#F3E8FF); }
.ht-visual--white { background: #fff; }
.ht-visual--dark { background: #1a1a1a; }
.ht-words { display: flex; flex-direction: column; align-items: flex-start; }
.ht-eyebrow { color: var(--amora-pink); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.ht-words h2 { margin: 12px 0 0; font-size: 40px; font-weight: 700; line-height: 1.06; letter-spacing: -.034em; text-wrap: balance; }
.ht-words p { margin: 14px 0 0; max-width: 40ch; color: var(--text-secondary); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.ht-words .ht-btn { margin-top: 26px; }

/* Daily question card */
.ht-daily-card {
  position: absolute; left: 50%; top: 50%; width: 392px; height: 392px; max-width: calc(100% - 40px);
  display: flex; flex-direction: column; padding: 24px; box-sizing: border-box; border-radius: 28px; overflow: hidden;
  background: var(--card-3-bg); transform: translate(-50%,-50%);
  box-shadow: 0 18px 40px rgba(36,27,34,.14), inset 0 1px 0 rgba(255,255,255,.7);
  transition: background .35s cubic-bezier(.16,1,.3,1);
}
.ht-daily-card::before { content: ""; position: absolute; inset: 0; border-radius: 28px; background: linear-gradient(170deg,rgba(255,255,255,.52),rgba(255,255,255,0) 46%); pointer-events: none; }
.ht-daily-top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ht-next {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px;
  background: rgba(255,255,255,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: .5px solid rgba(255,255,255,.7);
  color: var(--text-secondary); font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap;
}
.ht-next [data-ref="countdown"] { font-variant-numeric: tabular-nums; }
.ht-daily-emoji { font-size: 46px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(36,27,34,.18)); }
.ht-daily-q {
  position: relative; flex: 1; display: flex; align-items: center; margin: 8px 0;
  font-size: 29px; line-height: 1.2; font-weight: 600; letter-spacing: -.018em; color: var(--text-primary); text-wrap: pretty;
}
.ht-daily-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.ht-avatars { display: flex; align-items: center; gap: 8px; }
.ht-avatar { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: linear-gradient(135deg,var(--gold) 0%,var(--category-orange) 32%,var(--amora-pink) 66%,var(--category-purple) 100%); }
.ht-avatar > span:first-child { display: inline-flex; padding: 2.5px; border-radius: 999px; background: #fff; }
.ht-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; }
.ht-avatar > span + span { position: absolute; right: -2px; bottom: -2px; display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px; border-radius: 999px; background: var(--success); border: 2px solid #fff; }
.ht-shuffle {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px;
  border: .5px solid rgba(255,255,255,.8); border-radius: 999px; background: #fff; box-shadow: 0 4px 12px rgba(36,27,34,.13);
  color: var(--text-primary); font-family: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; transition: transform .15s cubic-bezier(.34,1.26,.64,1);
}
.ht-shuffle:active { transform: scale(.96); }
.ht-typed { color: var(--amora-pink); white-space: nowrap; }
.ht-caret { display: inline-block; width: 3px; height: .85em; margin-left: 2px; vertical-align: -.08em; border-radius: 2px; background: var(--amora-pink); animation: ht-caret 1s steps(1) infinite; }

/* Important dates: the shared reel, held in the design's white card. */
.ht-reel-frame {
  position: absolute; inset: 0 6px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image: linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.ht-date-title { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-date-meta { font-size: 13px; font-weight: 600; white-space: nowrap; }
.ht-date-days { font-size: 26px; line-height: 1; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ht-date-unit { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }

/* Stories */
.ht-story-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.ht-story-img:first-child { opacity: 1; }
.ht-story-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.4)); }
.ht-story-bars { position: absolute; left: 18px; right: 18px; top: 16px; display: flex; gap: 4px; }
.ht-story-bars > span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); overflow: hidden; }
.ht-story-bars [data-ref="story-bar"] { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.ht-story-who { position: absolute; left: 18px; top: 30px; display: flex; align-items: center; gap: 8px; color: #fff; }
.ht-story-who img { width: 32px; height: 32px; border-radius: 999px; object-fit: cover; border: 1.5px solid #fff; }
.ht-story-who b { font-size: 14px; font-weight: 700; }
.ht-story-who span { font-size: 13px; font-weight: 600; opacity: .8; }
.ht-story-caption {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border-radius: 14px; background: rgba(20,18,25,.5); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap;
}

/* A phone held in a card (widgets, and the closing card). */
.ht-phone { position: absolute; left: 50%; top: 44px; width: 270px; transform: translateX(-50%); aspect-ratio: 882/1800; }
.ht-phone > span { position: absolute; left: 4.6%; top: 1.5%; width: 90.8%; height: 97%; border-radius: 14.09%/6.49%; overflow: hidden; background: #2B2135; }
.ht-phone > span img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center -3px; }
.ht-phone > img { position: relative; display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 30px 50px rgba(36,27,34,.28)); }

/* Long distance */
.ht-distance { position: relative; height: 640px; margin: 120px 40px 0; border-radius: 36px; overflow: hidden; box-shadow: 0 24px 60px rgba(36,27,34,.16); }
.ht-distance > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 22%; }
.ht-distance::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,rgba(10,14,26,.72) 0%,rgba(10,14,26,.45) 34%,rgba(10,14,26,0) 62%), linear-gradient(0deg,rgba(10,14,26,.55),rgba(10,14,26,0) 38%);
}
.ht-distance-words { position: absolute; z-index: 1; left: 56px; top: 64px; width: 460px; display: flex; flex-direction: column; align-items: flex-start; }
.ht-distance-words .ht-eyebrow { color: #fff; opacity: .85; }
.ht-distance-words h2 { margin: 14px 0 0; color: #fff; font-size: 54px; font-weight: 700; line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.ht-distance-words p { margin: 16px 0 0; max-width: 36ch; color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.55; font-weight: 500; }
.ht-distance-words .ht-btn { margin-top: 28px; }

/* Built by a long-distance couple */
.ht-founders-wrap { display: flex; justify-content: center; margin: 32px 16px 0; }
.ht-founders {
  display: flex; align-items: center; gap: 16px; max-width: 100%; box-sizing: border-box; padding: 10px 26px 10px 10px; border-radius: 999px;
  background: var(--surface-card); box-shadow: 0 8px 24px rgba(36,27,34,.08), 0 0 0 .5px rgba(36,27,34,.06);
}
.ht-founders-faces { position: relative; flex: none; display: flex; }
.ht-founders-faces img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(36,27,34,.14); }
.ht-founders-faces img + img { margin-left: -12px; }
.ht-founders-faces span { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: #E91E63; border: 2px solid #fff; color: #fff; font-size: 11px; }
.ht-founders-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.ht-founders-words b { color: var(--text-primary); font-size: 16px; font-weight: 700; letter-spacing: -.012em; }
.ht-founders-words span { color: var(--text-secondary); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Loved by couples */
.ht-loved { display: flex; flex-direction: column; align-items: center; padding: 96px 64px 0; text-align: center; }
.ht-loved h2 { margin: 12px 0 0; font-size: 44px; font-weight: 700; letter-spacing: -.036em; }
.ht-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; width: 100%; max-width: 880px; margin-top: 36px; }
.ht-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 8px 22px rgba(36,27,34,.06); }
.ht-stat-value { font-size: 44px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ht-stat-value small { color: var(--text-tertiary); font-size: 20px; }
.ht-stat-value--grad { background: linear-gradient(90deg,#E91E63,#9C27B0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ht-stat-label { color: var(--text-tertiary); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.ht-stat-note { max-width: 26ch; color: var(--text-tertiary); font-size: 12px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.ht-stat-flags { display: flex; align-items: center; gap: 12px; }
.ht-stat-flags > span:last-child { display: flex; gap: 2px; font-size: 22px; }
.ht-reviews {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 0 26px; margin-top: 22px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.ht-review-row { display: flex; gap: 12px; width: max-content; animation: amora-marquee 78s linear infinite; }
.ht-review-row + .ht-review-row { margin-left: -150px; animation: amora-marquee-rev 96s linear infinite; }
.ht-review {
  flex: none; display: flex; flex-direction: column; gap: 8px; width: 300px; min-height: 150px; padding: 18px 20px 16px; box-sizing: border-box;
  border-radius: 22px; background: var(--surface-card); box-shadow: 0 0 0 .5px rgba(36,27,34,.06), 0 4px 14px rgba(36,27,34,.05);
  text-align: start;
}
.ht-review-stars { color: var(--gold); font-size: 12px; letter-spacing: 1.5px; }
.ht-review-quote { overflow-wrap:anywhere; display:block; color: var(--text-secondary); font-size: 14px; line-height: 1.45; font-weight: 500; }
.ht-review-who { margin-top: auto; color: var(--text-tertiary); font-size: 12px; font-weight: 700; }

/* Closing card */
.ht-closing {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 40px; margin: 112px 64px 0; padding: 64px 64px 0;
  border-radius: 36px; overflow: hidden;
  background: radial-gradient(520px 380px at 12% 0%,rgba(255,255,255,.26),rgba(255,255,255,0) 70%), radial-gradient(480px 420px at 100% 100%,rgba(156,39,176,.45),rgba(156,39,176,0) 70%), linear-gradient(135deg,#F0457E,#E91E63 45%,#C2185B);
  box-shadow: 0 24px 50px rgba(233,30,99,.24);
}
.ht-closing-words { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 64px; }
.ht-closing-words > img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.ht-closing h2 { margin: 22px 0 0; color: #fff; font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.04em; text-wrap: balance; }
.ht-closing ul { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.ht-closing li { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 15.5px; font-weight: 600; }
.ht-closing li span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.22); }
.ht-closing-act { display: flex; align-items: center; gap: 18px; margin-top: 32px; flex-wrap: wrap; row-gap: 14px; }
.ht-closing-act .ht-btn--white { min-height: 58px; padding: 8px 28px; border-radius: 29px; box-shadow: 0 10px 24px rgba(60,0,30,.22); }
.ht-closing .ht-rating b { color: #fff; font-size: 15px; }
.ht-closing .ht-rating b span { color: #FFD54F; }
.ht-closing .ht-rating small, .ht-closing .ht-rating b a { color: rgba(255,255,255,.82); }
.ht-closing-terms { color: rgba(255,255,255,.9); font-size: 14px; font-weight: 600; line-height: 1.5; }
.ht-closing-phone { position: relative; align-self: end; height: 420px; }
.ht-closing-phone .ht-phone { top: 0; width: 300px; }
.ht-closing-phone .ht-phone > span img { object-position: center top; }
.ht-closing-phone .ht-phone > img { filter: drop-shadow(0 30px 50px rgba(60,0,30,.35)); }

.ht-after-closing { height: 56px; }

/* The design's phone board, from 860px down. */
@media (max-width: 860px) {
  .ht-nav { position: sticky; top: 0; padding: 0; background: rgba(251,249,247,.82); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 -.5px 0 rgba(36,27,34,.12); }
  .ht-nav-bar { height: 56px; max-width: none; padding: 0 8px 0 16px; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .ht-brand { gap: 8px; }
  .ht-brand img:first-child { width: 28px; height: 28px; }
  .ht-brand img + img { height: 18px; }
  .ht-nav-link, .ht-nav-rule, .ht-nav .amora-lang-wrap, .ht-nav-try { display: none; }
  .ht-nav .amora-burger { display: inline-flex; color: var(--text-primary); }
  .ht-hero-copy { padding: 40px 20px 0; }
  .ht-hero h1 { font-size: 40px; line-height: 1.05; }
  .ht-hero-lead { font-size: 21px; }
  .ht-btn--hero { width: auto; min-width: 260px; min-height: 54px; padding: 8px 28px; font-size: 16px; }
  .ht-hero-proof { flex-wrap: wrap; justify-content: center; row-gap: 14px; }
  .ht-proof-rule { display: none; }
  .ht-hero-proof .ht-rating { align-items: center; text-align: center; }
  .ht-rating small { max-width: 30ch; }
  .ht-hero-media { height: auto; aspect-ratio: 4/5; margin: 40px 16px 0; border-radius: 28px; }
  .ht-hero-media img:nth-child(1) { object-position: 82% 40%; }
  .ht-hero-media img:nth-child(2), .ht-hero-media img:nth-child(3) { object-position: center 35%; }
  .ht-rows, .ht-pair { gap: 64px; }
  .ht-rows { padding: 56px 20px 0; }
  .ht-row { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .ht-visual { height: 440px; }
  .ht-words h2 { font-size: 28px; }
  .ht-words .ht-btn { min-width: 240px; padding: 8px 32px; }
  .ht-daily-card { width: 340px; height: 340px; max-width: calc(100% - 24px); padding: 20px; }
  .ht-daily-q { font-size: 24px; }
  .ht-avatar img { width: 36px; height: 36px; }
  .ht-shuffle { height: 38px; padding: 0 12px; font-size: 11.5px; }
  .ht-distance { height: auto; aspect-ratio: 3/4; margin: 64px 16px 0; border-radius: 28px; }
  .ht-distance > img { object-position: center 35%; }
  /* The words run the full width on a phone, so the shade does too. */
  .ht-distance::after { background: linear-gradient(180deg,rgba(10,14,26,.74) 0%,rgba(10,14,26,.4) 58%,rgba(10,14,26,.55) 100%); }
  .ht-distance-words { left: 20px; right: 20px; top: 40px; width: auto; }
  .ht-distance-words h2 { font-size: 34px; line-height: 1.1; }
  .ht-distance-words .ht-btn { min-width: 240px; padding: 8px 32px; }
  .ht-founders-words span { white-space: normal; }
  .ht-loved { padding: 64px 20px 0; }
  .ht-loved h2 { font-size: 30px; line-height: 1.12; }
  .ht-stats { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .ht-closing { grid-template-columns: minmax(0,1fr); gap: 28px; margin: 64px 16px 0; padding: 40px 22px 0; }
  .ht-closing-words { padding-bottom: 0; }
  .ht-closing h2 { font-size: 34px; line-height: 1.1; }
  .ht-closing-phone { height: 480px; margin-top: -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ht-hero-media img { animation: none; opacity: 0; }
  .ht-hero-media img:first-child { opacity: 1; }
  .ht-caret, .ht-review-row { animation: none; }
}