/* ==========================================================================
   MyHotelAuditor: marketing site layout
   Built on assets/css/brand.css. No color appears here that is not a token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Chrome
   -------------------------------------------------------------------------- */

.site-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pf-border);
}
.site-nav__inner {
  display: flex; align-items: center; gap: 28px;
  height: 66px;
}
.brandmark {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; color: var(--pf-text); letter-spacing: -.01em;
  flex: none;
}
.brandmark:hover { text-decoration: none; color: var(--pf-text); }
.brandmark__glyph {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--pf-blue); color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: -.02em;
  object-fit: cover;
}
.brandmark__sub { font-weight: 400; font-size: 11.5px; color: var(--pf-muted); letter-spacing: 0; }

.site-nav__links { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.site-nav__links a {
  font-size: 14px; font-weight: 600; color: var(--pf-muted);
  transition: color var(--ease);
}
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--pf-text); text-decoration: none; }
.site-nav__cta { margin-left: 4px; }
/* The CTA is a filled button: its label must stay white, not inherit link colors. */
.site-nav__links a.site-nav__cta,
.site-nav__links a.site-nav__cta:hover,
.site-nav__links a.site-nav__cta[aria-current="page"] { color: #fff; }

/* Between the phone menu and a wide screen: labels stay on one line, the gaps
   tighten and the byline gives way, so the full menu never wraps or overflows. */
@media (min-width: 901px) and (max-width: 1180px) {
  .site-nav__links { gap: 18px; }
  .site-nav__links a { white-space: nowrap; }
  .brandmark__sub { display: none; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  .site-nav .wrap-wide { padding: 0 28px; }
  .site-nav__links { gap: 14px; }
  .site-nav__links a { font-size: 13px; }
}

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--pf-text); border-radius: 2px; }
.nav-toggle span + span { margin-top: 4px; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav__links {
    position: absolute; left: 0; right: 0; top: 66px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--pf-border);
    padding: 8px 20px 18px; margin-left: 0;
    box-shadow: var(--shadow);
  }
  .site-nav__links[hidden] { display: none; }
  .site-nav__links a { padding: 12px 0; border-bottom: 1px solid var(--pf-border); }
  .site-nav__cta { margin: 14px 0 0; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { padding: 88px 0; }
.section--tight { padding: 64px 0; }
.section--tint { background: var(--pf-tintband); border-block: 1px solid var(--pf-border); }

.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head .kicker { margin-bottom: 12px; }
.section-head .h1 { margin-bottom: 14px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; padding: 72px 0 84px; overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.hero__copy .display { margin: 18px 0 0; }
.hero__copy .lede { margin-top: 18px; max-width: 520px; }
.hero__actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__reassure {
  margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--pf-muted);
}
.hero__reassure span { display: inline-flex; align-items: center; gap: 7px; }
.hero__reassure svg { flex: none; }

.hero__stage {
  position: relative; border-radius: var(--radius);
  border: 1px solid var(--pf-border); background: var(--pf-white);
  box-shadow: var(--shadow-lift); overflow: hidden;
  aspect-ratio: 16 / 10;
}
.hero__stage video, .hero__stage img { width: 100%; height: 100%; object-fit: cover; }
.hero__stage--still img { object-fit: cover; }

/* Floating scorecard over the stage: the product, in one glance. */
.hero__chip {
  position: absolute; z-index: 2;
  background: #fff; border: 1px solid var(--pf-border);
  border-radius: 10px; box-shadow: var(--shadow-lift);
  padding: 12px 16px; font-size: 13px;
}
.hero__chip--flag { left: 16px; bottom: 16px; }
.hero__chip .label { display: block; margin-bottom: 3px; }
.hero__chip .val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* The eight-audits badge: a brand-blue 8, the line, and a strip of eight lenses that fills in once.
   Compact by default (the 8 beside the label, the line full width under it), side by side once the
   stage is wide enough. Kept small and under half the stage, so it covers as little of the
   professor and his chart animation as it can from the top-right corner. */
.hero__chip--score {
  right: 10px; top: 10px; width: min(208px, 44%);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 8px;
  padding: 8px 10px; border-color: var(--pf-blue100); border-radius: 10px;
}
.hero__chip-eight {
  grid-column: 1; grid-row: 1;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: linear-gradient(140deg, var(--pf-blue), var(--pf-blue-deep));
  color: var(--pf-white); font-size: 15px; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 14px -6px var(--pf-blue);
}
.hero__chip-copy { display: contents; }
.hero__chip--score .label { grid-column: 2; grid-row: 1; margin: 0; font-size: 10px; color: var(--pf-blue); }
.hero__chip--score .val { grid-column: 1 / -1; grid-row: 2; display: block; font-size: 12.5px; line-height: 1.3; color: var(--pf-text); text-wrap: balance; }
.hero__chip-lenses { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin-top: 1px; }
.hero__chip-lenses i { height: 3px; border-radius: var(--radius-pill); background: var(--pf-blue); transform-origin: left center; }
@media (min-width: 1200px) {
  .hero__chip--score { right: 12px; top: 12px; width: 208px; gap: 3px 10px; padding: 10px 12px; border-radius: 12px; }
  .hero__chip-eight { grid-row: 1 / 3; width: 36px; height: 36px; border-radius: 10px; font-size: 22px; }
  .hero__chip--score .label { align-self: end; font-size: 10.5px; }
  .hero__chip--score .val { grid-column: 2; font-size: 13.5px; align-self: start; }
  .hero__chip-lenses { gap: 3px; margin-top: 6px; }
  .hero__chip-lenses i { height: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__chip-lenses i { animation: lens-in 520ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(400ms + var(--n, 0) * 80ms); }
  .hero__chip-lenses i:nth-child(2) { --n: 1; } .hero__chip-lenses i:nth-child(3) { --n: 2; }
  .hero__chip-lenses i:nth-child(4) { --n: 3; } .hero__chip-lenses i:nth-child(5) { --n: 4; }
  .hero__chip-lenses i:nth-child(6) { --n: 5; } .hero__chip-lenses i:nth-child(7) { --n: 6; }
  .hero__chip-lenses i:nth-child(8) { --n: 7; }
}
@keyframes lens-in { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .hero__stage { order: -1; aspect-ratio: 16 / 11; }
}

/* --------------------------------------------------------------------------
   The mascot rail: the professor glides down the page
   -------------------------------------------------------------------------- */

.mascot-rail {
  position: fixed; right: 22px; top: 0; z-index: 40;
  width: 168px; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms ease, visibility 420ms ease;
  will-change: transform;
}
.mascot-rail.is-live { opacity: 1; visibility: visible; }

.mascot-rail__figure {
  position: relative; width: 168px; height: 168px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--pf-white);
  border: 1px solid var(--pf-border);
  box-shadow: var(--shadow-lift);
}
.mascot-rail__figure video,
.mascot-rail__figure img { width: 100%; height: 100%; object-fit: cover; }

/* The speech bubble he carries down the page. */
.mascot-rail__say {
  pointer-events: auto;
  margin-top: 12px;
  background: var(--pf-blue50);
  border: 1px solid var(--pf-blue100);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--pf-text);
  box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.mascot-rail__say.is-shown { opacity: 1; transform: none; }
.mascot-rail__say b { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-blue-deep); margin-bottom: 4px; }

/* Hide the rail wherever it would overlap the 1,120px content column
   (below 1540px it covered the right edge: prices, the cart, the 360 card). */
@media (max-width: 1539px) { .mascot-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .mascot-rail { transition: none; } }

/* --------------------------------------------------------------------------
   Persona switcher: the problem statements
   -------------------------------------------------------------------------- */

.persona { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }

.persona__tabs { display: flex; flex-direction: column; gap: 8px; }
.persona__tab {
  text-align: left; font-family: var(--sans); cursor: pointer;
  background: #fff; border: 1px solid var(--pf-border);
  border-radius: 10px; padding: 14px 16px;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.persona__tab:hover { border-color: var(--pf-border-strong); }
.persona__tab strong { display: block; font-size: 15px; font-weight: 700; }
.persona__tab span { display: block; font-size: 12.5px; color: var(--pf-muted); margin-top: 2px; }
.persona__tab[aria-selected="true"] {
  border-color: var(--pf-blue); background: var(--pf-blue50); box-shadow: var(--shadow);
}
.persona__tab[aria-selected="true"] span { color: var(--pf-blue-deep); }

.persona__panel { min-height: 300px; }
.persona__panel[hidden] { display: none; }
.persona__pains { list-style: none; display: grid; gap: 10px; margin: 4px 0 24px; }
.persona__pains li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; color: var(--pf-text);
}
.persona__pains li::before {
  content: ''; flex: none; width: 8px; height: 8px; margin-top: 8px;
  border-radius: 50%; background: var(--pf-red);
}
.persona__answer {
  background: var(--pf-blue50); border: 1px solid var(--pf-blue100);
  border-radius: var(--radius); padding: 20px 22px;
}
.persona__answer .label { color: var(--pf-blue-deep); }
.persona__answer p { margin-top: 8px; font-size: 15.5px; }
.persona__meta { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .persona { grid-template-columns: 1fr; }
  .persona__tabs { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .persona__tab { flex: 1 0 200px; }
}

/* --------------------------------------------------------------------------
   Value props
   -------------------------------------------------------------------------- */

.valueprops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vp { background: #fff; border: 1px solid var(--pf-border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.vp h4 { font-size: 15.5px; font-weight: 700; margin-top: 14px; }
.vp p { font-size: 13.5px; color: var(--pf-muted); margin-top: 6px; }
@media (max-width: 900px) { .valueprops { grid-template-columns: 1fr; } }

/* ── Testimonials ───────────────────────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote {
  position: relative; background: #fff; border: 1px solid var(--pf-border); border-radius: var(--radius);
  padding: 58px 26px 28px; box-shadow: var(--shadow);
}
.quote::before {
  content: '\201C'; position: absolute; top: 16px; left: 24px;
  font-size: 60px; line-height: 1; font-weight: 700; color: var(--pf-blue);
}
.quote blockquote p { font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--pf-text); }
.quotes__preview { margin-top: 18px; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* The problem: the walkthrough clip, listing in hand, above the personas. */
.problem__scene { max-width: 860px; margin: 0 auto 32px; }
.problem__scene-frame {
  aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--pf-border); background: var(--pf-white); box-shadow: var(--shadow-lift);
}
.problem__scene-frame video, .problem__scene-frame img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Module catalog: expandable cards
   -------------------------------------------------------------------------- */

.modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 860px) { .modules { grid-template-columns: 1fr; } }

.module {
  background: #fff; border: 1px solid var(--pf-border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.module:hover { border-color: var(--pf-border-strong); box-shadow: var(--shadow-lift); }
.module.is-open { border-color: var(--pf-blue); }

.module__head {
  width: 100%; text-align: left; font-family: var(--sans); cursor: pointer;
  background: none; border: 0; padding: 22px 24px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
}
.module__code {
  font-size: 12px; font-weight: 700; color: var(--pf-blue-deep);
  background: var(--pf-blue50); border: 1px solid var(--pf-blue100);
  border-radius: 6px; padding: 3px 8px; font-variant-numeric: tabular-nums;
}
.module__title { font-size: 16.5px; font-weight: 700; }
.module__one { font-size: 13.5px; color: var(--pf-muted); margin-top: 6px; line-height: 1.6; }
.module__price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.module__chev { transition: transform var(--ease); color: var(--pf-muted); }
.module.is-open .module__chev { transform: rotate(180deg); }

.module__body { padding: 0 24px 24px; border-top: 1px solid var(--pf-border); margin-top: 0; }
.module__body[hidden] { display: none; }
.module__body ul { list-style: none; margin: 18px 0 0; display: grid; gap: 9px; }
.module__body li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; }
.module__body li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--pf-blue); }
.module__deliverable { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--pf-border); font-size: 13.5px; color: var(--pf-muted); }
.module__deliverable strong { color: var(--pf-text); font-weight: 700; font-size: 12.5px; }
.module__foot { margin-top: 16px; display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--pf-muted); }

.composite-card {
  margin-top: 16px; background: var(--pf-blue50);
  border: 1px solid var(--pf-blue100); border-radius: var(--radius);
  padding: 28px 30px;
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
}
.composite-card ul { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.composite-card li { display: flex; gap: 10px; font-size: 14px; }
.composite-card li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--pf-blue-deep); }
.composite-card__buy { text-align: right; max-width: 400px; justify-self: end; }
.composite-card__price { font-size: 34px; font-weight: 700; color: var(--pf-blue); font-variant-numeric: tabular-nums; }
@media (max-width: 780px) {
  .composite-card { grid-template-columns: 1fr; }
  .composite-card__buy { text-align: left; }
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--pf-border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.step__n {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--pf-blue); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  margin-bottom: 14px;
}
.step h4 { font-size: 15.5px; }
.step p { font-size: 13.5px; color: var(--pf-muted); margin-top: 6px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Sample report preview
   -------------------------------------------------------------------------- */

.sample {
  border: 1px solid var(--pf-border-strong); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-lift); overflow: hidden;
}
.sample__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--pf-border);
  background: var(--pf-tintband);
}
.sample__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pf-border-strong); }
.sample__name { font-size: 12.5px; font-weight: 600; color: var(--pf-muted); margin-left: 6px; }
.sample__watermark {
  margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--pf-muted); border: 1px dashed var(--pf-border-strong);
  border-radius: 5px; padding: 3px 9px;
}
.sample__body { padding: 26px 28px; }

.finding {
  border: 1px solid var(--pf-border); border-radius: 10px; padding: 18px 20px;
  margin-bottom: 14px;
}
.finding__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.finding__code { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pf-muted); }
.finding__title { font-size: 15.5px; font-weight: 700; margin-top: 8px; }
.finding__prose { font-size: 14px; color: var(--pf-muted); margin-top: 6px; line-height: 1.65; }

.sev {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  border-radius: 6px; padding: 3px 9px;
}
.sev--critical { background: var(--pf-red); color: #fff; }
.sev--moderate { background: var(--pf-blue50); color: var(--pf-blue-deep); border: 1px solid var(--pf-blue100); }
.sev--minor    { background: var(--pf-tintband); color: var(--pf-muted); border: 1px solid var(--pf-border-strong); }
.sev--advisory { background: #fff; color: var(--pf-muted); border: 1px dashed var(--pf-border-strong); }
.sev--positive { background: #fff; color: var(--pf-green); border: 1px solid var(--pf-green); }

.evidence {
  margin-top: 14px; background: var(--pf-tintband);
  border: 1px solid var(--pf-border); border-radius: 8px; padding: 13px 15px;
  font-size: 12.5px; color: var(--pf-muted); line-height: 1.7;
}
.evidence .label { display: block; margin-bottom: 5px; }
.evidence code { font-family: ui-monospace, 'Courier New', monospace; font-size: 12px; color: var(--pf-text); }

.datagap {
  margin-top: 14px; border: 1px dashed var(--pf-border-strong); border-radius: 8px;
  padding: 13px 15px; font-size: 12.5px; color: var(--pf-muted); line-height: 1.7;
}
.datagap .label { display: block; margin-bottom: 5px; }

.sample-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--pf-tintband); border: 1px solid var(--pf-border); border-radius: 10px; }
.sample-toggle button {
  font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
  background: none; border: 0; border-radius: 7px; padding: 7px 16px; color: var(--pf-muted);
  transition: background var(--ease), color var(--ease);
}
.sample-toggle button[aria-pressed="true"] { background: #fff; color: var(--pf-text); box-shadow: var(--shadow); }

/* --------------------------------------------------------------------------
   Video
   -------------------------------------------------------------------------- */

.filmstrip {
  border: 1px solid var(--pf-border); border-radius: var(--radius);
  background: var(--pf-text); box-shadow: var(--shadow-lift); overflow: hidden;
  aspect-ratio: 16 / 9;
}
.filmstrip video { width: 100%; height: 100%; object-fit: cover; }
.filmstrip--pending {
  background: var(--pf-tintband); display: grid; place-items: center;
  text-align: center; padding: 40px; color: var(--pf-muted); font-size: 14px;
}
.film-chapters { display: grid; gap: 8px; margin-top: 20px; }
.film-chapter {
  display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: baseline;
  font-size: 14px; padding: 11px 14px; border: 1px solid var(--pf-border);
  border-radius: 9px; background: #fff;
}
.film-chapter time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: var(--pf-blue); }
.film-chapter b { font-weight: 700; }
.film-chapter span { color: var(--pf-muted); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: 10px; }
.faq__item { border: 1px solid var(--pf-border); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq__q {
  width: 100%; text-align: left; font-family: var(--sans); cursor: pointer;
  background: none; border: 0; padding: 18px 22px;
  font-size: 15.5px; font-weight: 700; color: var(--pf-text);
  display: flex; align-items: center; gap: 14px;
}
.faq__q svg { margin-left: auto; flex: none; color: var(--pf-muted); transition: transform var(--ease); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { padding: 0 22px 20px; font-size: 14.5px; color: var(--pf-muted); line-height: 1.75; max-width: 760px; }
.faq__a[hidden] { display: none; }

/* --------------------------------------------------------------------------
   CTA band + footer
   -------------------------------------------------------------------------- */

.cta-band { background: var(--pf-blue50); border-block: 1px solid var(--pf-blue100); padding: 72px 0; }
.cta-band__inner { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.cta-band .h1 { margin-bottom: 10px; }
@media (max-width: 780px) { .cta-band__inner { grid-template-columns: 1fr; } }

.site-foot { border-top: 1px solid var(--pf-border); padding: 48px 0 56px; }
.site-foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.site-foot h5 { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-muted); margin-bottom: 12px; }
.site-foot ul { list-style: none; display: grid; gap: 8px; }
.site-foot a { font-size: 14px; color: var(--pf-muted); }
.site-foot a:hover { color: var(--pf-blue); }
.site-foot__legal {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--pf-border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: var(--pf-muted);
}
@media (max-width: 780px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------------------------
   Pricing page
   -------------------------------------------------------------------------- */

.lane-toggle { display: inline-flex; gap: 4px; padding: 5px; background: var(--pf-tintband); border: 1px solid var(--pf-border); border-radius: 12px; }
.lane-toggle button {
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
  background: none; border: 0; border-radius: 8px; padding: 9px 20px; color: var(--pf-muted);
  transition: background var(--ease), color var(--ease);
}
.lane-toggle button[aria-pressed="true"] { background: #fff; color: var(--pf-text); box-shadow: var(--shadow); }

.pricing-layout { display: grid; grid-template-columns: 1fr 336px; gap: 28px; align-items: start; }
@media (max-width: 1040px) { .pricing-layout { grid-template-columns: 1fr; } }

.pick { display: grid; gap: 12px; }
.pick__row {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--pf-border); border-radius: var(--radius);
  padding: 18px 22px; cursor: pointer;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.pick__row:hover { border-color: var(--pf-border-strong); }
.pick__row.is-picked { border-color: var(--pf-blue); background: var(--pf-blue50); box-shadow: var(--shadow); }
.pick__box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--pf-border-strong);
  background: #fff; display: grid; place-items: center; transition: all var(--ease);
}
.pick__row.is-picked .pick__box { background: var(--pf-blue); border-color: var(--pf-blue); }
.pick__box svg { opacity: 0; transition: opacity var(--ease); }
.pick__row.is-picked .pick__box svg { opacity: 1; }
.pick__name { font-size: 15.5px; font-weight: 700; }
.pick__name em { font-style: normal; font-weight: 600; font-size: 12px; color: var(--pf-blue-deep); background: var(--pf-blue50); border: 1px solid var(--pf-blue100); border-radius: 5px; padding: 2px 7px; margin-right: 9px; }
.pick__row.is-picked .pick__name em { background: #fff; }
.pick__desc { font-size: 13px; color: var(--pf-muted); margin-top: 4px; line-height: 1.55; }
.pick__price { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pick__row input { position: absolute; opacity: 0; width: 0; height: 0; }
/* The real input is visually hidden, so the row carries the focus ring. */
.pick__row:focus-within { outline: 2px solid var(--pf-blue); outline-offset: 2px; }

.cart { position: sticky; top: 90px; }
.cart__inner {
  background: #fff; border: 1px solid var(--pf-border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lift); overflow: hidden;
}
.cart__head { padding: 20px 24px 16px; border-bottom: 1px solid var(--pf-border); }
.cart__lines { padding: 8px 24px; max-height: 260px; overflow-y: auto; }
.cart__line {
  display: flex; justify-content: space-between; gap: 14px;
  font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--pf-border);
}
.cart__line:last-child { border-bottom: 0; }
.cart__line span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.cart__empty { padding: 22px 0; font-size: 13.5px; color: var(--pf-muted); }
.cart__nudge {
  margin: 4px 16px 0; background: var(--pf-blue50); border: 1px solid var(--pf-blue100);
  border-radius: 10px; padding: 13px 15px; font-size: 12.5px; line-height: 1.6;
}
.cart__nudge[hidden] { display: none; }
.cart__nudge strong { font-weight: 700; }
.cart__nudge button {
  display: block; margin-top: 9px; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  color: var(--pf-blue-deep); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.cart__total { padding: 18px 24px; border-top: 1px solid var(--pf-border); background: var(--pf-tintband); }
.cart__total-row { display: flex; justify-content: space-between; align-items: baseline; }
.cart__total-row .val { font-size: 30px; font-weight: 700; color: var(--pf-blue); font-variant-numeric: tabular-nums; }
.cart__save { font-size: 12.5px; color: var(--pf-green); font-weight: 700; margin-top: 4px; }
.cart__save[hidden] { display: none; }
.cart__hint { font-size: 12.5px; color: var(--pf-muted); line-height: 1.5; margin-top: 6px; }
.cart__line--bundle small { display: block; font-size: 12px; font-weight: 400; color: var(--pf-muted); margin-top: 3px; }
.cart__actions { padding: 16px 24px 22px; display: grid; gap: 9px; }
.cart__fine { font-size: 11.5px; color: var(--pf-muted); line-height: 1.6; text-align: center; }

.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .packs { grid-template-columns: 1fr; } }
.pack { background: #fff; border: 1px solid var(--pf-border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); text-align: center; }
.pack.is-featured { border-color: var(--pf-blue); box-shadow: var(--shadow-lift); }
.pack__credits { font-size: 34px; font-weight: 300; font-variant-numeric: tabular-nums; }
.pack__name { font-size: 15px; font-weight: 700; margin-top: 2px; }
.pack__price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 12px; }
.pack__per { font-size: 12.5px; color: var(--pf-muted); margin-top: 2px; }
.pack__note { font-size: 13px; color: var(--pf-muted); margin-top: 12px; line-height: 1.6; }

.compare th:first-child, .compare td:first-child { width: 44%; }
.compare td svg { display: inline-block; vertical-align: -2px; }

/* --------------------------------------------------------------------------
   Intake
   -------------------------------------------------------------------------- */

.intake-shell { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
/* Grid items default to min-width:auto, which blocks the rail's own
   horizontal scroll on small screens; let them shrink instead. */
.intake-shell > * { min-width: 0; }
@media (max-width: 980px) { .intake-shell { grid-template-columns: 1fr; gap: 24px; } }

.intake-rail { position: sticky; top: 90px; }
.intake-rail ol { list-style: none; display: grid; gap: 2px; }
.intake-rail li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 9px;
  font-size: 13.5px; color: var(--pf-muted); font-weight: 600;
}
.intake-rail li .dot {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--pf-border-strong); background: #fff;
  display: grid; place-items: center; font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.intake-rail li.is-current { background: var(--pf-blue50); color: var(--pf-text); }
.intake-rail li.is-current .dot { border-color: var(--pf-blue); color: var(--pf-blue-deep); }
.intake-rail li.is-done .dot { background: var(--pf-blue); border-color: var(--pf-blue); color: #fff; }
.intake-rail li.is-done { color: var(--pf-text); }
@media (max-width: 980px) { .intake-rail { position: static; } .intake-rail ol { grid-auto-flow: column; overflow-x: auto; } .intake-rail li span:last-child { display: none; } }

.progress { height: 4px; background: var(--pf-border); border-radius: 999px; overflow: hidden; margin-bottom: 30px; }
.progress__bar { height: 100%; background: var(--pf-blue); border-radius: 999px; transition: width 320ms ease; }

.step-panel[hidden] { display: none; }
.step-panel__head { margin-bottom: 26px; }
.step-panel__head .h1 { margin: 8px 0 10px; }

.choices { display: grid; gap: 10px; }
.choices--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 680px) { .choices--two { grid-template-columns: 1fr; } }

.choice {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--pf-border); border-radius: 10px;
  padding: 15px 18px; cursor: pointer; font-size: 15px;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.choice:hover { border-color: var(--pf-border-strong); }
.choice.is-picked { border-color: var(--pf-blue); background: var(--pf-blue50); box-shadow: var(--shadow); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice:focus-within { outline: 2px solid var(--pf-blue); outline-offset: 2px; }
.choice__mark {
  width: 20px; height: 20px; border: 1.5px solid var(--pf-border-strong); background: #fff;
  display: grid; place-items: center; transition: all var(--ease);
}
.choice__mark--radio { border-radius: 50%; }
.choice__mark--check { border-radius: 6px; }
.choice.is-picked .choice__mark { border-color: var(--pf-blue); background: var(--pf-blue); }
.choice__mark svg, .choice__mark i { opacity: 0; transition: opacity var(--ease); }
.choice.is-picked .choice__mark svg { opacity: 1; }
.choice__mark i { display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.choice.is-picked .choice__mark i { opacity: 1; }

.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: var(--pf-text); }
.field label .opt { font-weight: 400; color: var(--pf-muted); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="tel"], .field input[type="number"], .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; color: var(--pf-text);
  background: #fff; border: 1px solid var(--pf-border-strong); border-radius: var(--radius-sm);
  padding: 11px 14px; width: 100%;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--pf-blue); box-shadow: 0 0 0 3px var(--pf-blue50);
}
.field .hint { font-size: 12.5px; color: var(--pf-muted); }
.field .err { font-size: 12.5px; color: var(--pf-red); font-weight: 600; }
.field .err[hidden] { display: none; }
.field.is-invalid input, .field.is-invalid select { border-color: var(--pf-red); }

.fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fieldgrid .span-2 { grid-column: 1 / -1; }
@media (max-width: 680px) { .fieldgrid { grid-template-columns: 1fr; } .fieldgrid .span-2 { grid-column: auto; } }

.consent {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font-size: 13px; color: var(--pf-muted); line-height: 1.6;
  background: var(--pf-tintband); border: 1px solid var(--pf-border);
  border-radius: 10px; padding: 15px 17px; cursor: pointer;
}
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pf-blue); }

.step-nav { display: flex; gap: 12px; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--pf-border); }
.step-nav .spacer { margin-left: auto; }

.autosave {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--pf-muted);
  opacity: 0; transition: opacity 260ms ease;
}
.autosave.is-shown { opacity: 1; }
.autosave .tick { width: 14px; height: 14px; border-radius: 50%; background: var(--pf-green); display: grid; place-items: center; }

.resume-banner { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.resume-banner[hidden] { display: none; }
.resume-banner p { flex: 1 1 320px; font-size: 14px; }

.rec {
  background: #fff; border: 1px solid var(--pf-blue); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.rec__head { background: var(--pf-blue50); border-bottom: 1px solid var(--pf-blue100); padding: 22px 26px; }
.rec__name { font-size: 22px; font-weight: 700; margin-top: 8px; }
.rec__price { font-size: 26px; font-weight: 300; font-variant-numeric: tabular-nums; margin-top: 6px; }
.rec__body { padding: 24px 26px; }
.rec__why { list-style: none; display: grid; gap: 9px; }
.rec__why li { display: flex; gap: 11px; font-size: 14px; line-height: 1.6; color: var(--pf-muted); }
.rec__why li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--pf-blue); }
.rec__also { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pf-border); }
.rec__also-list { display: grid; gap: 10px; margin-top: 12px; }
.rec__escape { margin-top: 20px; font-size: 13.5px; color: var(--pf-muted); }

.summary-table td:first-child { color: var(--pf-muted); width: 40%; font-size: 13px; }
.summary-table td:last-child { font-weight: 600; }

/* --------------------------------------------------------------------------
   Motion: everything here is opt-out under prefers-reduced-motion
   -------------------------------------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 620ms cubic-bezier(.16,1,.3,1), transform 620ms cubic-bezier(.16,1,.3,1); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Ambient background: the rendered studio drift behind the hero.
   The gradient wash keeps the type at contrast whatever frame is showing,
   and doubles as the no-video / reduced-motion floor.
   -------------------------------------------------------------------------- */

.hero { background: linear-gradient(180deg, var(--pf-blue50), var(--pf-white) 70%); }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg video { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, .25) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, var(--pf-white) 100%);
}
.hero__grid { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Report card internals: the problem / benefit pair from the Report Guide
   -------------------------------------------------------------------------- */

.module__pb {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  padding-bottom: 18px; margin-bottom: 16px;
  border-bottom: 1px solid var(--pf-border);
}
@media (max-width: 720px) { .module__pb { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   The analytics suite teaser: where the reports are headed
   -------------------------------------------------------------------------- */

.platform { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: start; }
.platform__scene {
  width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--pf-border); box-shadow: var(--shadow-lift); background: var(--pf-white);
}
.platform__scene video, .platform__scene img { width: 100%; height: 100%; object-fit: cover; }
.platform__list { display: grid; gap: 14px; }
.platform__item { display: flex; gap: 14px; align-items: flex-start; }
.platform__item h4 { font-size: 15px; margin-bottom: 3px; }
.platform__item p { font-size: 14px; color: var(--pf-muted); line-height: 1.6; }
@media (max-width: 860px) { .platform { grid-template-columns: 1fr; } .platform__scene { max-width: 300px; } }

/* The [hidden] attribute must always win, even over display'd components. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Price treatment: the price bold in the brand blue, and when an item is
   discounted, its sticker struck through just in front of it
   -------------------------------------------------------------------------- */

.price-now { color: var(--pf-blue); font-weight: 700; }
.price-was {
  color: var(--pf-muted); font-weight: 600; font-size: .72em;
  text-decoration: line-through; text-decoration-thickness: 1.5px;
  margin-right: .25em; white-space: nowrap;
}
.cart__line .price-was, .summary-table .price-was { font-size: 12px; }

/* ── Sample lightbox ─────────────────────────────────────────────────────
   Opened by sample-view.js wherever a sample is offered outside the
   homepage, so buyers never leave the page they were deciding on. */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.lightbox__panel {
  position: relative; width: min(860px, 100%); max-height: min(88vh, 940px); overflow-y: auto;
  background: var(--pf-white); border: 1px solid var(--pf-border); border-radius: 14px;
  padding: 26px 28px 22px; box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
}
.lightbox__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  font-size: 22px; line-height: 1; color: var(--pf-muted);
  background: var(--pf-tintband); border: 1px solid var(--pf-border); border-radius: 50%; cursor: pointer;
}
.lightbox__close:hover { color: var(--pf-text); border-color: var(--pf-border-strong); }
.lightbox__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lightbox__chips button {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--pf-muted); background: var(--pf-white); border: 1px solid var(--pf-border);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.lightbox__chips button[aria-pressed="true"] { color: var(--pf-blue); background: var(--pf-blue50); border-color: var(--pf-blue100); }
@media (max-width: 640px) {
  .lightbox { padding: 10px; }
  .lightbox__panel { padding: 20px 14px 16px; max-height: 94vh; }
}

/* ── Programs & add-ons ─────────────────────────────────────────────────── */
.programs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.program-card {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--pf-border); border-radius: var(--radius);
  background: var(--pf-white); padding: 22px 24px; box-shadow: var(--shadow);
}
.program-card__name { font-size: 17px; }
.program-card__one { font-size: 14px; line-height: 1.6; flex: 1; }
.program-card__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.program-card--contact { grid-column: 1 / -1; background: var(--pf-blue50); border-color: var(--pf-blue100); }
.program-card__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 4px; }
.program-card__lists .label { margin-bottom: 10px; }
.program-card__list { list-style: none; display: grid; gap: 8px; }
.program-card__list li { display: flex; gap: 11px; font-size: 14px; line-height: 1.6; color: var(--pf-text); }
.program-card__list li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--pf-blue); }
.program-card__more { font-size: 13.5px; margin-top: 10px; }
@media (max-width: 760px) {
  .programs { grid-template-columns: 1fr; }
  .program-card__lists { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Email capture: the footer band on every page, the pop-up on marketing pages
   -------------------------------------------------------------------------- */

.site-foot__subscribe {
  display: grid; grid-template-columns: 1.4fr 1.6fr; gap: 28px; align-items: center;
  margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--pf-border);
}
.site-foot__subscribe:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.site-foot__subscribe p { font-size: 13.5px; max-width: 420px; margin-top: 6px; }
.subscribe-form { position: relative; }
.subscribe-form__row { display: flex; gap: 10px; }
.subscribe-form input[type="email"] {
  flex: 1; min-width: 0; font-family: var(--sans); font-size: 15px; color: var(--pf-text);
  background: #fff; border: 1px solid var(--pf-border-strong); border-radius: var(--radius-sm);
  padding: 11px 14px; transition: border-color var(--ease), box-shadow var(--ease);
}
.subscribe-form input[type="email"]:focus { outline: none; border-color: var(--pf-blue); box-shadow: 0 0 0 3px var(--pf-blue50); }
.subscribe-form .btn { white-space: nowrap; }
.subscribe-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.subscribe-form__note { font-size: 12.5px; color: var(--pf-muted); margin-top: 8px; min-height: 1.2em; }
.subscribe-form__note.is-error { color: var(--pf-red); font-weight: 600; }
.subscribe-form.is-done .subscribe-form__row { display: none; }
.subscribe-form.is-done .subscribe-form__note { color: var(--pf-green); font-weight: 600; font-size: 14px; margin-top: 0; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 780px) {
  .site-foot__subscribe { grid-template-columns: 1fr; }
  .subscribe-form__row { flex-direction: column; }
  .subscribe-form .btn { width: 100%; }
}

/* Above the privacy banner (z-index 1100): the pop-up keeps its own timing, so on a phone the two can meet,
   and while it is open it covers the banner like the rest of the page; the banner is there when it closes. */
.subscribe-popup { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px; }
.subscribe-popup[hidden] { display: none; }
.subscribe-popup__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .2s ease; }
.subscribe-popup__card {
  position: relative; width: min(480px, 100%);
  background: #fff; border: 1px solid var(--pf-border); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: 30px 32px 22px; opacity: 0; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease;
}
.subscribe-popup.is-open .subscribe-popup__backdrop { opacity: 1; }
.subscribe-popup.is-open .subscribe-popup__card { opacity: 1; transform: none; }
.subscribe-popup__title { font-size: 22px; line-height: 1.3; font-weight: 700; margin: 8px 0 16px; }
.subscribe-popup__x {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--pf-border); background: #fff; color: var(--pf-muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.subscribe-popup__x:hover { color: var(--pf-text); border-color: var(--pf-border-strong); }
.subscribe-popup__fine { font-size: 12.5px; color: var(--pf-muted); margin-top: 12px; }
.subscribe-popup__skip { display: block; margin: 10px auto 0; background: none; border: 0; font: 600 13px var(--sans); color: var(--pf-muted); cursor: pointer; text-decoration: underline; }
.subscribe-popup__skip:hover { color: var(--pf-text); }
@media (max-width: 560px) { .subscribe-popup__card { padding: 26px 22px 18px; } .subscribe-popup .subscribe-form__row { flex-direction: column; } .subscribe-popup .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .subscribe-popup__backdrop, .subscribe-popup__card { transition: none; } }

/* --------------------------------------------------------------------------
   Phones only: a start button that stays on screen (assets/js/mobile-cta.js).
   It steps aside while another start button is in view, and pages that carry
   it pad their bottom so it never covers the footer.
   -------------------------------------------------------------------------- */

.mobile-cta { display: none; }
@media (max-width: 900px) {
  .mobile-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--pf-border);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
    transition: transform 220ms ease, visibility 220ms ease;
  }
  .mobile-cta .btn { display: block; width: 100%; text-align: center; }
  .mobile-cta.is-away { transform: translateY(110%); visibility: hidden; }
  body.has-mobile-cta { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .mobile-cta { transition: none; } }

/* --------------------------------------------------------------------------
   Privacy choices (assets/js/consent.js): the banner shown until a visitor
   decides, and the choices dialog behind "Your privacy choices". Accept all
   and Reject all carry the same weight on purpose.
   -------------------------------------------------------------------------- */

.consent-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100;
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; align-items: center;
  background: var(--pf-white); border: 1px solid var(--pf-border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: 18px 22px;
  animation: consent-in 240ms ease both;
}
.consent-banner__title { font-weight: 700; font-size: 15px; color: var(--pf-text); margin-bottom: 4px; }
.consent-banner__text p { font-size: 13.5px; line-height: 1.6; color: var(--pf-muted); }
.consent-banner__note { margin-top: 6px; }
.consent-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.consent-banner__actions .btn, .consent-banner__actions .btn2 { padding: 10px 18px; min-width: 112px; }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .consent-banner {
    left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr; padding: 16px 18px;
  }
  .consent-banner__actions { justify-content: stretch; }
  .consent-banner__actions .btn, .consent-banner__actions .btn2 { flex: 1 1 0; min-width: 0; padding: 10px 8px; }
}
/* The phone start button steps aside while the banner waits for an answer. */
.consent-pending .mobile-cta { display: none; }

.consent-dialog {
  width: 100%; max-width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--pf-text);
  overflow-y: auto; overscroll-behavior: contain;
}
.consent-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.consent-dialog__card {
  position: relative; background: var(--pf-white); border: 1px solid var(--pf-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 28px 28px 20px;
}
.consent-dialog__title { font-size: 22px; line-height: 1.3; margin: 0 40px 8px 0; }
.consent-dialog__intro { font-size: 14px; color: var(--pf-muted); line-height: 1.65; margin-bottom: 14px; }
.consent-option {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--pf-border); cursor: pointer;
}
.consent-option strong { display: block; font-size: 14.5px; }
.consent-option__text { display: block; font-size: 13px; line-height: 1.6; color: var(--pf-muted); margin-top: 2px; }
.consent-option input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--pf-blue); cursor: pointer; }
.consent-option--fixed { cursor: default; }
.consent-option__always { font-size: 12px; font-weight: 600; color: var(--pf-green); white-space: nowrap; margin-top: 2px; }
.consent-dialog__note {
  font-size: 13px; line-height: 1.6; color: var(--pf-muted);
  background: var(--pf-blue50); border: 1px solid var(--pf-blue100); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-top: 4px;
}
.consent-dialog__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pf-border); }
.consent-dialog__foot { margin-top: 12px; font-size: 13px; }
.consent-dialog__x {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--pf-border); background: var(--pf-white); color: var(--pf-muted);
  font: 400 20px/1 var(--sans); cursor: pointer;
}
.consent-dialog__x:hover { color: var(--pf-text); border-color: var(--pf-border-strong); }
@media (max-width: 560px) {
  .consent-dialog { max-height: calc(100vh - 20px); max-width: calc(100vw - 20px); }
  .consent-dialog__card { padding: 22px 18px 16px; }
  .consent-dialog__title { font-size: 20px; }
  .consent-option { padding: 12px 0; }
  .consent-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .consent-dialog__actions [data-consent-save] { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .consent-banner { animation: none; } }

.site-foot__privacy { display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot .site-foot__privacy a { font-size: 12px; font-weight: 600; color: var(--pf-muted); }
.site-foot .site-foot__privacy a:hover { color: var(--pf-blue); }
.site-foot .site-foot__social { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--pf-muted); }
.site-foot .site-foot__social:hover { color: var(--pf-blue); }

/* --------------------------------------------------------------------------
   Legal pages (privacy.html): long-form text, its contents list and tables.
   -------------------------------------------------------------------------- */

.legal h1 { font-size: clamp(28px, 3.6vw, 36px); margin: 12px 0 6px; }
.legal h2 { font-size: 21px; margin: 40px 0 10px; scroll-margin-top: 96px; }
.legal h3 { font-size: 16.5px; margin: 24px 0 6px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; }
.legal p + p { margin-top: 10px; }
.legal ul { padding-left: 22px; display: grid; gap: 6px; margin: 10px 0; }
.legal__updated { font-size: 14px; color: var(--pf-muted); }
.legal__contents { margin-top: 22px; }
.legal__contents ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14.5px; }
.legal__table { margin: 12px 0; overflow-x: auto; border: 1px solid var(--pf-border); border-radius: var(--radius-sm); }
.legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--pf-border); line-height: 1.55; }
.legal tr:last-child td { border-bottom: 0; }
.legal th { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-muted); background: var(--pf-tintband); }
.legal code { font-size: 13px; background: var(--pf-tintband); border: 1px solid var(--pf-border); border-radius: 4px; padding: 1px 5px; }
/* Phones: each table row stacks as a card, its column names written in front of each value. */
@media (max-width: 640px) {
  .legal__table { overflow: visible; }
  .legal table { min-width: 0; }
  .legal thead { display: none; }
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal tr { padding: 10px 14px; border-bottom: 1px solid var(--pf-border); }
  .legal tr:last-child { border-bottom: 0; }
  .legal td { padding: 4px 0; border-bottom: 0; }
  .legal td::before {
    content: attr(data-label); display: block;
    font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-muted);
  }
}

/* --------------------------------------------------------------------------
   About page (about.html): the founder's note and the team.
   -------------------------------------------------------------------------- */

.about-title { margin: 16px 0 14px; max-width: 860px; }
.about-lede { max-width: 760px; }
.about-note { max-width: 760px; border-left: 3px solid var(--pf-blue100); padding-left: 24px; }
.about-note p { font-size: 17px; line-height: 1.75; color: var(--pf-text); }
.about-note p + p { margin-top: 16px; }
.about-note__sign { font-weight: 700; }
.about-follow { margin-top: 14px; }
.about-follow a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
@media (max-width: 640px) { .about-note { padding-left: 16px; } }