/* ===========================================================================
   FREE TRIAL — /free-trial/
   Light, editorial, warm-neutral. Warm off-white canvas, deep ink, fine
   borders, one restrained accent (brand orange #FF8833) used for small rules
   only: orange text, or an orange button fill with white text, fails AA
   contrast, so the primary button is solid ink instead.
   Scoped under `.ft` (page) and `.mh-header` (the quiet header, which sits
   outside the page wrapper). The hero carousel's base slide rules live inline
   in the homepage template, so this file carries its own copy.
   =========================================================================== */

html:has(.ft),
html:has(.ft) body,
html:has(.ft) main { background: #faf8f4 !important; }

.ft {
  --ft-canvas: #faf8f4;
  --ft-surface: #ffffff;
  --ft-ink: #242b29;
  --ft-ink-hover: #3a423f;
  --ft-muted: #59615c;
  --ft-border: #ddddd5;
  --ft-tint: #f3efe6;
  --ft-accent: #ff8833;
  --ft-r-card: 14px;
  --ft-r-btn: 9px;
  background: var(--ft-canvas);
  color: var(--ft-ink);
  overflow-x: clip;
}

.ft *, .ft *::before, .ft *::after { box-sizing: border-box; }

.ft-wrap { width: min(100% - 64px, 1120px); margin: 0 auto; }

.ft p { font-size: 1.125rem; line-height: 1.6; margin: 0; color: var(--ft-ink); }

.ft-h1, .ft-h2, .ft-h3 { color: var(--ft-ink); }
.ft-h1 { margin: 0 0 22px; letter-spacing: -0.025em; }
.ft-h2 { margin: 0 0 32px; letter-spacing: -0.015em; }
.ft-h3 { margin: 0 0 10px; }

/* ── QUIET HEADER ─────────────────────────────────────────────────────────── */

.mh-header { background: #faf8f4; }

.mh-header__inner {
  width: min(100% - 64px, 1120px);
  height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mh-header__brand { display: inline-flex; align-items: center; min-height: 44px; }
.mh-header__brand img { display: block; height: 36px; width: auto; }

.mh-header__cta {
  min-height: 44px;
  padding: 0 20px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #ffffff;
  background: #242b29;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
}

.mh-header__cta { display: inline-flex; align-items: center; text-decoration: none; }
.mh-header__cta:hover { background: #3a423f; color: #ffffff; text-decoration: none; }

.mh-header__cta:focus-visible,
.ft-btn:focus-visible { outline: 3px solid #ff8833; outline-offset: 3px; }

/* ── BUTTON ───────────────────────────────────────────────────────────────── */

.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--ft-ink);
  border: 0;
  border-radius: var(--ft-r-btn);
  cursor: pointer;
  transition: background 0.15s ease;
}

.ft a.ft-btn { text-decoration: none; color: #ffffff; }
.ft-btn:hover { background: var(--ft-ink-hover); }

.ft .ft-reassure { margin: 14px 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ft-muted); }

/* ── 1 HERO ───────────────────────────────────────────────────────────────── */

.ft-hero { padding: 72px 0 104px; }

.ft-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 72px;
  align-items: center;
}

.ft .ft-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ft-muted);
}

.ft-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--ft-accent); }

/* Art headline: free7.webp stands in for the h1 text. */
.ft-hero__copy { position: relative; }

/* Thin rule under the carousel, running from about a third of the way in to the
   right edge of the wrap. The carousel is the tallest item in the row, so the
   grid's bottom edge is the carousel's bottom edge. */
.ft-hero__grid { position: relative; }
.ft-hero__grid::after { content: ''; position: absolute; right: 0; bottom: 0; width: 67%; height: 1px; background: #4d4d4d; pointer-events: none; }
.ft .ft-h1--art { margin: 0 0 26px; line-height: 0; }
.ft .ft-h1--art img { display: block; width: 100%; max-width: 554px; height: auto; }

.ft .ft-lede { max-width: 31em; margin: 0 0 32px; color: var(--ft-muted); }

/* Carousel: same proportions and caption overlay as the homepage hero. */
.ft-hero__art { max-width: 468px; width: 100%; margin: 0 auto; }

.ft-hero__art .testimonial-carousel-wrapper { width: 100%; margin: 0; overflow: visible; }

.ft-hero__art #testimonialCarousel {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 760 / 975 !important;
  overflow: visible !important;
  border-radius: 16px;
}

.ft-hero__art #testimonialCarousel .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.ft-hero__art #testimonialCarousel .slide.active { opacity: 1; visibility: visible; }

.ft-hero__art #testimonialCarousel .slide-photo {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 16px;
}

.ft-hero__art #testimonialCarousel .slide-caption {
  position: absolute;
  pointer-events: none;
  bottom: 0 !important;
  right: -25px !important;
  left: auto !important;
  width: calc(48.51% * 0.8) !important;
  max-width: none !important;
  transform: translateY(18px) !important;
}

.ft-hero__art #testimonialCarousel .slide.active .slide-caption { transform: translateY(0) !important; }

/* ── START PAGE (/free-trial/start/) ──────────────────────────────────────── */

.ft-start { padding: 72px 0 112px; }
.ft-start__inner { max-width: 560px; margin: 0 auto; }
.ft .ft-start__lede { margin: 0 0 32px; color: var(--ft-muted); }

.ft-form { display: grid; gap: 18px; padding: 32px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-r-card); }
.ft-field { display: flex; flex-direction: column; gap: 7px; }
.ft-field label { font-size: 0.9375rem; font-weight: 700; color: var(--ft-ink); }
.ft-field label span[aria-hidden="true"] { color: #b3541a; }
.ft-opt { font-weight: 400; color: var(--ft-muted); }

.ft-field input[type="text"],
.ft-field input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ft-ink);
  background: #ffffff;
  border: 1px solid #b9bbb2;
  border-radius: 8px;
  -webkit-appearance: none;
          appearance: none;
}

.ft-field input:focus { outline: 3px solid var(--ft-accent); outline-offset: 1px; border-color: var(--ft-ink); }

.ft-check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.ft-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ft-ink); }
.ft .ft-check a { color: var(--ft-ink); text-decoration: underline; text-underline-offset: 3px; }

.ft .ft-error { padding: 12px 14px; font-size: 0.9375rem; line-height: 1.45; color: #7a2e00; background: #fff4ea; border: 1px solid #e0a070; border-radius: 8px; }
.ft-error[hidden], .ft-done[hidden], .ft-form[hidden] { display: none; }
.ft-done:focus { outline: none; }
.ft-form .mf-turnstile { margin: 2px 0 4px; }
.ft-form .ft-btn { justify-self: start; }

/* ── TRIAL RESULTS (/free-trial/result/) ──────────────────────────────────── */

.ft-result [hidden] { display: none !important; }

.fr-bar { height: 4px; max-width: 320px; background: var(--ft-border); border-radius: 4px; overflow: hidden; }
.fr-bar span { display: block; width: 40%; height: 100%; background: var(--ft-ink); border-radius: 4px; animation: fr-slide 1.6s ease-in-out infinite; }
@keyframes fr-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

.fr-intro { padding-bottom: 56px; }

.ft .fr-summary { max-width: 46rem; font-size: 1.25rem; line-height: 1.55; margin: 0 0 36px; }

.fr-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.fr-points > div { padding: 20px 22px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-r-card); }
.fr-points dt { margin: 0 0 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ft-muted); }
.fr-points dd { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--ft-ink); }

.ft .fr-headline { font-size: 1.5rem; line-height: 1.35; font-weight: 700; margin: 0 0 18px; }
.ft .ft-diff p + p { margin-top: 1em; }
.fr-sub { margin: 36px 0 12px; }
.fr-evidence { margin: 0; padding-left: 22px; max-width: 46rem; }
.fr-evidence li { margin: 0 0 8px; font-size: 1.0625rem; line-height: 1.55; color: var(--ft-muted); }

.fr-campaign { max-width: 52rem; }
.fr-camp { margin: 18px 0 0; display: grid; gap: 18px; }
.fr-camp dt { margin: 0 0 4px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ft-muted); }
.fr-camp dd { margin: 0; font-size: 1.0625rem; line-height: 1.55; }

.ft .fr-note { max-width: 46rem; margin: 0 0 32px; color: var(--ft-muted); }
.fr-week { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* "Show me your taste": the brand step before the first week is made. It uses the (a)MD
   onboarding look (see amd-onboarding.css): white surface, Sebino, orange accent, pills. */
#fr-brand { background: #ffffff; padding: 56px 0 72px; }
.ft .fr-brand__greet { margin: 0 0 40px; font-size: 28px; line-height: 1.3; color: #111111; }
.ft .fr-brand__greet em { font-style: normal; color: #ff8833; }
.fr-brand__q { margin: 0 0 22px; max-width: 16em; color: #000000; line-height: 1.12; letter-spacing: -0.01em; -webkit-text-stroke: 0.01em currentColor; }
#fr-brand .fr-slot { border: 1pt solid #d7d7d7; border-radius: 28px; padding: 26px 28px; }
#fr-brand .fr-slot--plain { border: 0; padding: 0; }
#fr-brand .fr-thumb { border-radius: 16px; border-color: #d7d7d7; }
#fr-brand .fr-add { border: 1pt solid #d7d7d7; border-radius: 999px; padding: 0 26px; }
#fr-brand .fr-add:hover { border-color: #111111; }
#fr-brand .fr-regen__input { border: 1pt solid #d7d7d7; border-radius: 28px; padding: 16px 24px; font-size: 1.125rem; }
#fr-brand .ft-btn { min-height: 58px; padding: 0 42px; font-size: 1.125rem; border-radius: 999px; background: #ff8833; color: #ffffff; }
#fr-brand .ft-btn:hover { background: #e07020; }
#fr-brand .fr-regen__toggle { border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; }
.fr-brand { max-width: 760px; margin: 0 auto; }
.fr-brand .ft-h1 { margin-bottom: 18px; }
.ft .fr-brand__lede { margin: 0 0 36px; max-width: 40em; color: var(--ft-muted); }
.fr-slot { margin: 0 0 22px; padding: 22px 24px; background: var(--ft-surface); border: 1px solid var(--ft-border); border-radius: var(--ft-r-card); }
.fr-slot--plain { background: transparent; border: 0; padding: 0; }
.fr-slot .ft-h3 { margin: 0 0 6px; }
.fr-slot__tag { margin-left: 8px; font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.04em; color: var(--ft-muted); }
.ft .fr-slot__help { margin: 0 0 14px; font-size: 0.9375rem; line-height: 1.55; color: var(--ft-muted); max-width: 46em; }
.fr-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.fr-thumbs:empty { display: none; }
.fr-thumb { position: relative; width: 112px; height: 112px; border-radius: 10px; overflow: hidden; background: var(--ft-tint); border: 1px solid var(--ft-border); }
.fr-thumbs--logo .fr-thumb { width: 160px; height: 90px; background: #ffffff; }
.fr-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fr-thumbs--logo .fr-thumb img { object-fit: contain; padding: 8px; }
.fr-thumb__x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; font: inherit; font-size: 1.125rem; line-height: 1; color: #ffffff; background: rgba(36, 43, 41, 0.82); border: 0; border-radius: 50%; cursor: pointer; }
.fr-thumb__x:focus-visible, .fr-add:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 2px; }
.fr-add { min-height: 44px; padding: 0 18px; font: inherit; font-size: 0.9375rem; font-weight: 700; color: var(--ft-ink); background: #ffffff; border: 1px solid #b9bbb2; border-radius: 8px; cursor: pointer; }
.fr-add:hover { border-color: var(--ft-ink); }
.fr-add[hidden] { display: none; }
.fr-check { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-size: 0.9375rem; cursor: pointer; }
.fr-check[hidden] { display: none; }
.fr-check input { width: 20px; height: 20px; accent-color: var(--ft-ink); }
.fr-notes__label { display: block; }
.fr-brand__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 28px 0 0; }
.ft .fr-brand__note { margin: 12px 0 0; font-size: 0.875rem; color: var(--ft-muted); }
.fr-brand [hidden] { display: none !important; }

/* Post image: a square frame that holds its place while the picture is generated. */
.fr-img { position: relative; width: 100%; aspect-ratio: 1 / 1; margin: 0 0 18px; background: var(--ft-tint); border-radius: 10px; overflow: hidden; }
.fr-img[hidden] { display: none; }
/* contain, not cover: a visitor's own product photo must never be cropped. Generated images are
   square, so they fill the frame either way. */
.fr-img img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.4s ease; }
.fr-img.is-loaded img { opacity: 1; }
.fr-img.is-busy img { opacity: 0.45; }

/* The "Regenerate this image" control and its prompt window. */
.fr-regen { margin: -6px 0 18px; }
.fr-regen__toggle { padding: 4px 0; font: inherit; font-size: 0.875rem; font-weight: 700; color: var(--ft-ink); background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; }
.fr-regen__toggle:hover { color: #b3541a; }
.fr-regen__toggle:focus-visible, .fr-regen__go:focus-visible, .fr-regen__cancel:focus-visible { outline: 3px solid var(--ft-accent); outline-offset: 3px; }
.fr-regen__row { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.fr-regen__toggle:disabled { opacity: 0.55; cursor: progress; }
.fr-regen__panel { margin: 12px 0 0; padding: 16px; background: var(--ft-tint); border: 1px solid var(--ft-border); border-radius: 10px; }
.fr-regen__panel[hidden] { display: none; }
.fr-regen__label { display: block; margin: 0 0 8px; font-size: 0.9375rem; font-weight: 700; color: var(--ft-ink); }
.fr-regen__input { width: 100%; padding: 11px 12px; font: inherit; font-size: 0.9375rem; line-height: 1.45; color: var(--ft-ink); background: #ffffff; border: 1px solid #b9bbb2; border-radius: 8px; resize: vertical; min-height: 5.5em; }
.fr-regen__input:focus { outline: 3px solid var(--ft-accent); outline-offset: 1px; border-color: var(--ft-ink); }
.ft .fr-regen__hint { margin: 8px 0 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--ft-muted); }
.fr-regen__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.fr-regen__go { min-height: 44px; padding: 0 18px; font: inherit; font-size: 0.9375rem; font-weight: 700; color: #ffffff; background: var(--ft-ink); border: 0; border-radius: 8px; cursor: pointer; }
.fr-regen__go:disabled { opacity: 0.55; cursor: progress; }
.fr-regen__cancel { min-height: 44px; padding: 0 6px; font: inherit; font-size: 0.9375rem; color: var(--ft-muted); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ft .fr-regen__status { min-height: 1.4em; margin: 10px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--ft-ink); }
.fr-img:not(.is-loaded)::after,
.fr-img.is-busy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); background-size: 200% 100%; animation: fr-shimmer 1.4s ease-in-out infinite; }
@keyframes fr-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .fr-img:not(.is-loaded)::after { animation: none; } }

.ft .fr-copy { white-space: pre-line; font-size: 1.0625rem; line-height: 1.6; margin: 0 0 14px; }
.ft .fr-cta { font-size: 0.9375rem; color: var(--ft-muted); margin: 0; }

.ft .fr-after { margin: 0 0 30px; color: var(--ft-muted); }

@media (max-width: 991px) {
  .fr-points, .fr-week { grid-template-columns: minmax(0, 1fr); }
}

/* ── SECTIONS ─────────────────────────────────────────────────────────────── */

.ft-section { padding: 88px 0; }
.ft-section--tint { background: var(--ft-tint); }
.ft-section--white { background: #ffffff; }

/* ── 2 BENEFITS ───────────────────────────────────────────────────────────── */

/* 50px less space above the A-to-B path (88px section padding -> 38px). Desktop only. */
@media (min-width: 992px) { .ft-hero + .ft-section { padding-top: 38px; } }

/* Decorative A-to-B path above the benefits heading. */
.ft-path { display: block; width: 100%; height: auto; margin: 0 0 8px; }

.ft-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.ft-card {
  padding: 32px;
  background: var(--ft-surface);
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-r-card);
}

.ft .ft-card p { font-size: 1.0625rem; color: var(--ft-muted); }

.ft-icon { display: block; width: 32px; height: 32px; margin: 0 0 20px; color: var(--ft-ink); }

/* The three benefit cards: a slight drop shadow on all, the first in brand orange
   and the last in charcoal with white text, the middle one left as is. */
.ft-cards > .ft-card { box-shadow: 0 6px 18px rgba(36, 43, 41, 0.12); }

.ft-cards > .ft-card:nth-child(1) { background: #ff8833; border-color: #ff8833; }
.ft-cards > .ft-card:nth-child(3) { background: #4d4d4d; border-color: #4d4d4d; }

.ft-cards > .ft-card:nth-child(1),
.ft-cards > .ft-card:nth-child(3) { color: #ffffff; }
.ft .ft-cards > .ft-card:nth-child(1) p,
.ft .ft-cards > .ft-card:nth-child(3) p { color: #ffffff; }
.ft-cards > .ft-card:nth-child(1) .ft-icon,
.ft-cards > .ft-card:nth-child(3) .ft-icon { color: #ffffff; }

/* Title and icon accents: card 1 title #333, card 2 icon orange, card 3 title orange. */
.ft-cards > .ft-card:nth-child(1) .ft-h3 { color: #333333; }
.ft-cards > .ft-card:nth-child(2) .ft-icon { color: #ff8833; }
.ft-cards > .ft-card:nth-child(3) .ft-h3 { color: #ff8833; }

/* ── 3 DIFFERENTIATION ────────────────────────────────────────────────────── */

/* The (a)MD code-running animation on the left, text on the right (desktop); below
   992px the text comes first. Decorative image. */
.ft-diff-row { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center; }
.ft-diff__art { display: block; width: 300px; height: auto; justify-self: end; }
@media (min-width: 992px) {
  .ft-diff-row { grid-template-columns: 300px minmax(0, 1fr); }
  .ft-diff__art { order: -1; justify-self: start; }
}

.ft-diff { max-width: 720px; padding-left: 28px; border-left: 3px solid var(--ft-accent); }
.ft-diff .ft-h2 { margin-bottom: 20px; }
.ft .ft-diff p { color: var(--ft-muted); }

/* ── 4 FINAL CTA ──────────────────────────────────────────────────────────── */

.ft-final { padding: 104px 0 112px; }
.ft-final__inner { max-width: 760px; }
.ft-final .ft-h2 { margin-bottom: 30px; }

/* Dark closing panel on /free-trial/. */
.ft-panel { padding: 88px 0; background: #333333; }
.ft-panel__row { display: flex; align-items: center; justify-content: space-between; gap: 56px; }
.ft .ft-panel__title { margin: 0; flex: 1 1 auto; max-width: 800px; color: #ffffff; letter-spacing: -0.01em; }
.ft-panel__amd { color: #ff8833; white-space: nowrap; }
.ft-panel__amd sup { font-size: 0.4em; vertical-align: super; line-height: 0; margin-left: 2px; }
.ft-panel__arrow { display: inline-block; width: 1.05em; height: auto; margin-left: 0.4em; vertical-align: -0.08em; color: #ff8833; }
/* The button is a blank graphic with live text overlaid on its face. Text sizes are
   in cqw so they scale with the button. Face of starto.webp: ~12% in from each side,
   ~15% down, ~22% up from the bottom. */
.ft-panel__btn { position: relative; display: block; flex: 0 0 auto; width: 325px; container-type: inline-size; line-height: 0; border-radius: 12px; transition: transform 0.15s ease; text-decoration: none; }
.ft-panel__btn img { display: block; width: 100%; height: auto; }
.ft-panel__btn-text { position: absolute; left: 12.5%; right: 12.5%; top: 15%; bottom: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #ffffff; }
.ft .ft-panel__btn-main { display: block; font-size: 11.5cqw; font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; color: #ffffff; }
.ft .ft-panel__btn-sub { display: block; margin-top: 3.2cqw; font-size: 3.6cqw; font-weight: 700; line-height: 1.2; color: #333333; }
.ft-panel__btn:hover { transform: translateY(-2px); }
.ft-panel__btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }

/* ── HEADING SIZES ────────────────────────────────────────────────────────────
   The global typescale sets h1/h2/h3 with !important inside @layer site; for
   !important the layer order is reversed, so only a layered rule with extra
   specificity can beat it. Do not "simplify" these selectors. */
@layer site {
  /* Brand-step headline: the onboarding look (regular weight, black). */
  body.mf-typescale.mf-typescale .ft .fr-brand__q.fr-brand__q {
    font-family: 'Sebino', system-ui, sans-serif !important;
    font-size: clamp(2.25rem, 4.6vw, 3.75rem) !important;
    font-weight: 400 !important;
    line-height: 1.12 !important;
    color: #000000 !important;
  }
  body.mf-typescale.mf-typescale .ft .ft-h1.ft-h1 {
    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }
  /* Closing-panel headline, live text. */
  body.mf-typescale.mf-typescale .ft .ft-panel__title.ft-panel__title {
    font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #ffffff !important;
  }
  body.mf-typescale.mf-typescale .ft .ft-h2.ft-h2 {
    font-size: clamp(1.625rem, 3vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
  /* Benefit-card titles: 30% larger than the 1.3125rem base. */
  body.mf-typescale.mf-typescale .ft .ft-cards > .ft-card .ft-h3.ft-h3 {
    font-size: 1.7063rem !important;
    line-height: 1.2 !important;
  }
  body.mf-typescale.mf-typescale .ft .ft-h3.ft-h3 {
    font-size: 1.3125rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
  }
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .ft-hero { padding: 56px 0 72px; }
  .ft-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ft-hero__grid::after { width: 100%; }
  .ft-diff-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ft-diff__art { width: 240px; justify-self: center; }
  .ft-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ft-section { padding: 56px 0; }
  .ft-final { padding: 64px 0 72px; }
  .ft-panel { padding: 56px 0; }
  .ft-panel__row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .ft-panel__btn { align-self: center; width: 240px; }
  .ft-panel__br { display: none; }
}

@media (max-width: 767px) {
  .ft-wrap, .mh-header__inner { width: calc(100% - 40px); }
  .mh-header__inner { height: 68px; }
  .mh-header__brand img { height: 30px; }
  .mh-header__cta { padding: 0 14px; font-size: 0.875rem; }
  .ft-hero { padding: 40px 0 56px; }
  .ft-btn { width: 100%; max-width: 360px; }
  .ft-start { padding: 40px 0 64px; }
  .ft-form { padding: 22px 18px; }
  .ft-form .ft-btn { justify-self: stretch; max-width: none; }
  .ft-card { padding: 24px; }
  .ft-hero__art #testimonialCarousel .slide-caption { right: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ft *, .mh-header * { transition: none !important; }
}

/* (a)MD look for the two interactive trial pages (start, result). The landing page keeps its own
   design. Same tokens as amd-onboarding.css: white, Sebino, orange, pills, 28px outlined shapes. */
html:has(.ft-amd) main,
.mh-header { background: #ffffff !important; }
.ft.ft-amd {
  --ft-canvas: #ffffff;
  --ft-ink: #111111;
  --ft-ink-hover: #333333;
  --ft-border: #d7d7d7;
  --ft-tint: #fafafa;
  --ft-r-card: 28px;
  --ft-r-btn: 999px;
}
.ft-amd .ft-eyebrow { letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.75rem; font-weight: 400; color: #333333; }
.ft-amd .ft-btn { background: #ff8833; color: #ffffff; }
.ft-amd .ft-btn:hover { background: #e07020; }
.ft-amd .ft-field input,
.ft-amd .ft-field textarea { border-radius: 24px; }
@layer site {
  body.mf-typescale.mf-typescale .ft-amd .ft-h1.ft-h1,
  body.mf-typescale.mf-typescale .ft-amd .ft-h2.ft-h2,
  body.mf-typescale.mf-typescale .ft-amd .ft-h3.ft-h3 { font-weight: 400 !important; color: #000000 !important; }
}

/* Pending / confirm screens (start + verify). */
.ft-done__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 22px 0 14px; }
.ft-done .ft-btn:disabled, .ft-done__actions .ft-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ft .ft-link { padding: 0; background: none; border: 0; font: inherit; color: var(--ft-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ft-error[hidden], .ft-done__actions[hidden], .ft .ft-reassure[hidden] { display: none; }

.ft-panel .ft-scope { margin: 28px auto 0; max-width: 46em; font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.75); text-align: center; }