/* ══ Homepage design system (redesign 2026-11-10) ═════════════════════════
   roadmap/2026-11-10-website-redesign — approved sample: design/homepage.html (v3)
   Scoped to .hp (main) and .hp-foot (footer) so nothing leaks into app screens.
   ONE of everything: one card (.hp-card), one screenshot frame (.hp-stage +
   .hp-win, 4:3), one photo frame (.hp-ph, 4:5), one section header (.hp-head),
   one icon tile (.hp-ico), three buttons (.hp-btn-p primary/orange, -s light,
   -d on navy). Navy only for hero, free-trial band, closing band and footer;
   light sections alternate white / .mist. Orange only for primary actions.
   Grid 1200px · 12 columns · 24px gutter · sections 104px, blocks 56px, groups 24px. */

.hp, .hp-foot {
  --hp-navy: #0A2463; --hp-navy-2: #061847; --hp-ink: #0F1B3D; --hp-text: #3D4A66; --hp-muted: #66728C;
  --hp-blue: #1563D6; --hp-blue-50: #EEF3FC; --hp-blue-100: #DCE7FA; --hp-sky: #9CC3FF;
  --hp-orange: #F5821F; --hp-orange-2: #DE6E0E;
  --hp-mist: #F6F8FC; --hp-line: #E3E8F1; --hp-line-dk: rgba(255,255,255,.12);
  --hp-ok: #12805C; --hp-ok-50: #E8F5EF; --hp-warn: #B45309; --hp-warn-50: #FDF3E6; --hp-bad: #C2362C;
  --hp-f-d: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hp-f-b: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hp-f-m: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --hp-r: 12px; --hp-r-l: 16px; --hp-r-xl: 20px;
  --hp-sh: 0 1px 2px rgba(15,27,61,.05), 0 12px 32px -16px rgba(15,27,61,.22);
  --hp-sh-lg: 0 2px 6px rgba(10,36,99,.08), 0 32px 64px -28px rgba(10,36,99,.45);
  font-family: var(--hp-f-b); color: var(--hp-text); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.hp *, .hp-foot * { box-sizing: border-box; }
.hp h1, .hp h2, .hp h3 { font-family: var(--hp-f-d); color: var(--hp-ink); margin: 0; letter-spacing: -.02em; text-wrap: balance; }
.hp p { margin: 0; }
.hp img { display: block; max-width: 100%; }
.hp a { text-decoration: none; }
.hp :focus-visible, .hp-foot :focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 3px; border-radius: 6px; }
.hp-wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 760px) { .hp-wrap { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1264px) { .hp-wrap { padding-left: 0; padding-right: 0; } }

/* type */
.hp-eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-blue); }
.hp .hp-h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.15; font-weight: 800; }
.hp-sub { font-size: 18px; line-height: 1.6; color: var(--hp-muted); max-width: 620px; }

/* sections + the one header */
.hp-sec { padding-block: 104px; background: #fff; }
.hp-sec.mist { background: var(--hp-mist); }
.hp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: 56px; flex-wrap: wrap; }
.hp-head-t { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }
@media (max-width: 760px) { .hp-sec { padding-block: 72px; } .hp-head { margin-bottom: 40px; } }

/* buttons + link */
.hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--hp-r); font: 600 15px/1 var(--hp-f-b); border: 1px solid transparent; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.hp-btn-p { background: var(--hp-orange); color: #fff; }
.hp-btn-p:hover { background: var(--hp-orange-2); color: #fff; }
.hp-btn-s { background: #fff; border-color: var(--hp-line); color: var(--hp-ink); }
.hp-btn-s:hover { border-color: var(--hp-ink); color: var(--hp-ink); }
.hp-btn-d { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.hp-btn-d:hover { border-color: #fff; color: #fff; }
.hp-link { display: inline-flex; align-items: center; gap: 6px; color: var(--hp-blue); font: 600 15px/1.4 var(--hp-f-b); background: none; border: 0; padding: 0; cursor: pointer; }
.hp-btn span, .hp-link span { transition: transform .2s; }
.hp-btn:hover span, .hp-link:hover span { transform: translateX(3px); }

/* the one card, icon tile, checks */
.hp-card { background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-r-l); padding: 28px; transition: border-color .2s, box-shadow .2s; }
.hp-ico { width: 44px; height: 44px; border-radius: var(--hp-r); background: var(--hp-blue-50); color: var(--hp-blue); display: inline-grid; place-items: center; flex: none; }
.hp-ico svg { width: 22px; height: 22px; }
.hp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hp-checks li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--hp-text); }
.hp-checks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; background: var(--hp-ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat; }

/* the one screenshot frame */
.hp-stage { position: relative; overflow: hidden; background: var(--hp-blue-50); border-radius: var(--hp-r-xl); padding: 32px 32px 0; }
.hp-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--hp-blue-100) 1px, transparent 1px); background-size: 18px 18px; }
.hp-win { position: relative; background: #fff; border-radius: var(--hp-r) var(--hp-r) 0 0; overflow: hidden; box-shadow: 0 -1px 0 var(--hp-line), 0 24px 48px -24px rgba(10,36,99,.35); }
.hp-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--hp-line); background: #FAFBFD; }
.hp-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D9DEE8; }
.hp-bar span { margin-left: 10px; font: 500 11px/1 var(--hp-f-m); color: var(--hp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-shot { aspect-ratio: 4 / 3; background: #fff; }
.hp-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .2s; }
.hp-shot.hp-shot-fit img { object-fit: contain; object-position: top center; }
@media (max-width: 560px) { .hp-stage { padding: 20px 20px 0; } }

/* ── hero ── */
.hp-hero { position: relative; overflow: hidden; background: var(--hp-navy); color: #fff; }
.hp-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 90% at 85% 10%, rgba(21,99,214,.45), transparent 60%); pointer-events: none; }
.hp-hero-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-top: 80px; }
.hp-hero-copy { grid-column: 1 / span 6; padding-bottom: 80px; }
.hp-hero .hp-eyebrow { color: var(--hp-sky); }
.hp-hero h1 { color: #fff; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; margin: 18px 0 20px; }
.hp-hero h1 span { color: var(--hp-sky); }
.hp-hero .hp-sub { color: #C2CEE8; max-width: 540px; }
.hp-find { position: relative; margin-top: 32px; display: flex; align-items: center; max-width: 540px; background: #fff; border-radius: var(--hp-r-l); padding: 6px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.5); }
.hp-find > svg { flex: none; width: 20px; height: 20px; margin: 0 6px 0 12px; color: var(--hp-muted); }
.hp-find input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font: 16px var(--hp-f-b); color: var(--hp-ink); }
.hp-find .hp-btn { height: 46px; }
.hp-find-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-r); box-shadow: var(--hp-sh-lg); padding: 6px; }
.hp-find-list[hidden] { display: none !important; }
.hp-find-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 15px; color: var(--hp-ink); }
.hp-find-list a:hover, .hp-find-list a.is-on { background: var(--hp-mist); }
.hp-find-list a span { font-size: 13px; color: var(--hp-muted); }
.hp-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; color: #93A4CC; }
.hp-pop a { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #E2E9F7; font-size: 13.5px; }
.hp-pop a:hover { border-color: #fff; color: #fff; }
.hp-facts { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hp-line-dk); }
.hp-facts > div { display: flex; flex-direction: column; gap: 2px; }
.hp-facts strong { font: 700 24px/1.2 var(--hp-f-d); color: #fff; font-variant-numeric: tabular-nums; }
.hp-facts strong .lp-sstat-num { font: inherit; color: inherit; }
.hp-facts span { font-size: 13.5px; color: #93A4CC; }
.hp-hero-art { grid-column: 7 / span 6; position: relative; align-self: stretch; min-height: 520px; }
.hp-hero-back { position: absolute; right: 0; top: 0; width: 88%; }
.hp-hero-back .hp-win { border-radius: var(--hp-r); }
.hp-hero-front { position: absolute; left: 0; bottom: 0; width: 78%; }
.hp-shot-dash { aspect-ratio: 16 / 11; }
.hp-shot-test { aspect-ratio: 16 / 9.5; }
.hp-shot-test img { object-fit: contain; object-position: top center; }
.hp-score { position: absolute; right: 16px; bottom: 56px; z-index: 3; display: flex; align-items: center; gap: 14px; background: #fff; color: var(--hp-ink); border-radius: var(--hp-r); padding: 14px 16px; box-shadow: var(--hp-sh-lg); }
.hp-ring { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--hp-blue) 61%, var(--hp-blue-50) 0); display: grid; place-items: center; }
.hp-ring b { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 600 11.5px var(--hp-f-m); }
.hp-score small { display: block; font-size: 12px; color: var(--hp-muted); }
.hp-score strong { font: 700 15px var(--hp-f-d); }
@media (max-width: 1000px) {
  .hp-hero-grid { grid-template-columns: 1fr; padding-top: 56px; }
  .hp-hero-copy, .hp-hero-art { grid-column: auto; }
  .hp-hero-copy { padding-bottom: 0; }
  .hp-hero-art { min-height: 0; aspect-ratio: 12 / 9; margin-top: 16px; }
}
@media (max-width: 560px) {
  .hp-score { display: none; }
  .hp-hero-front { width: 92%; }
  .hp-facts { gap: 24px; }
  .hp-find .hp-btn { padding: 0 14px; }
}

/* ── exam catalogue (server markup: mm-eg-*) ── */
.hp .mm-eg-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0 0 24px; }
.hp .mm-eg-chip { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--hp-line); background: #fff; color: var(--hp-text); font: 600 14.5px var(--hp-f-b); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.hp .mm-eg-chip em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--hp-muted); }
.hp .mm-eg-chip:hover { border-color: var(--hp-ink); }
.hp .mm-eg-chip.is-on { background: var(--hp-ink); border-color: var(--hp-ink); color: #fff; }
.hp .mm-eg-chip.is-on em { color: #B9C3DA; }
.hp .mm-eg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hp .mm-eg-card { display: flex; flex-direction: column; gap: 16px; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-r-l); padding: 24px; transition: border-color .2s, box-shadow .2s; }
.hp .mm-eg-card[hidden] { display: none !important; }
.hp .mm-eg-card:hover { border-color: var(--hp-blue-100); box-shadow: var(--hp-sh); }
.hp .mm-eg-card-top { display: flex; align-items: center; gap: 14px; }
.hp .mm-eg-mono { font: 800 13px var(--hp-f-d); }
.hp .mm-eg-card-id { min-width: 0; }
.hp .mm-eg-name { font-size: 18px; line-height: 1.25; }
.hp .mm-eg-visually { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hp .mm-eg-full { font-size: 13.5px; color: var(--hp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp .mm-eg-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.hp .mm-eg-stream, .hp .mm-eg-upcoming-tag { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--hp-mist); color: var(--hp-text); border: 1px solid var(--hp-line); }
.hp .mm-eg-upcoming-tag { background: var(--hp-warn-50); color: var(--hp-warn); border-color: transparent; }
.hp .mm-eg-desc { font-size: 14.5px; color: var(--hp-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hp .mm-eg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding-block: 14px; border-block: 1px solid var(--hp-line); }
.hp .mm-eg-stats div { display: flex; flex-direction: column-reverse; }
.hp .mm-eg-stats dt { font-size: 12px; color: var(--hp-muted); }
.hp .mm-eg-stats dd { margin: 0; font: 600 16px var(--hp-f-m); color: var(--hp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp .mm-eg-cnote { font-size: 13px; color: var(--hp-muted); margin-top: -4px; }
.hp .mm-eg-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hp .mm-eg-neg { font-size: 12.5px; font-weight: 600; }
.hp .mm-eg-neg.is-neg { color: var(--hp-bad); }
.hp .mm-eg-neg.is-none { color: var(--hp-ok); }
.hp .mm-eg-link { display: inline-flex; gap: 6px; color: var(--hp-blue); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.hp .mm-eg-more { margin-top: 28px; display: flex; justify-content: center; }
.hp .mm-eg-more[hidden] { display: none !important; }
.hp .mm-eg-note, .hp .mm-eg-upcoming { margin-top: 24px; font-size: 13px; color: var(--hp-muted); max-width: 820px; }
@media (max-width: 1000px) { .hp .mm-eg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .hp .mm-eg-cards { grid-template-columns: 1fr; }
  .hp .mm-eg-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .hp .mm-eg-chip { flex: none; }
}

/* ── USPs (server markup) ── */
.hp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hp-usp { display: flex; flex-direction: column; gap: 16px; }
.hp-usp h3 { font-size: 20px; line-height: 1.3; }
.hp-usp p { font-size: 15.5px; }
.hp-minor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.hp-minor > div { display: flex; gap: 12px; align-items: flex-start; padding-top: 20px; border-top: 1px solid var(--hp-line); font-size: 15px; }
.hp-minor b { display: block; color: var(--hp-ink); font-weight: 600; }
.hp-minor-ico { flex: none; color: var(--hp-blue); margin-top: 2px; }
.hp-minor-ico svg { width: 18px; height: 18px; display: block; }
@media (max-width: 900px) { .hp-grid3, .hp-minor { grid-template-columns: 1fr; } }

/* ── how it works ── */
.hp-how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.hp-steps { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 12px; }
.hp-how-view { grid-column: 7 / span 6; }
.hp-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; text-align: left; width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--hp-r-l); padding: 20px; color: var(--hp-text); font: inherit; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
.hp-step:hover { background: var(--hp-mist); }
.hp-step-n { width: 44px; height: 44px; border-radius: var(--hp-r); border: 1px solid var(--hp-line); background: #fff; display: grid; place-items: center; font: 600 14px var(--hp-f-m); color: var(--hp-muted); }
.hp-step b { display: block; font: 700 18px/1.3 var(--hp-f-d); color: var(--hp-ink); margin-bottom: 4px; }
.hp-step > span > span { font-size: 15px; color: var(--hp-muted); }
.hp-step[aria-selected="true"] { background: #fff; border-color: var(--hp-line); box-shadow: var(--hp-sh); }
.hp-step[aria-selected="true"] .hp-step-n { background: var(--hp-blue); border-color: var(--hp-blue); color: #fff; }
@media (max-width: 960px) { .hp-how { grid-template-columns: 1fr; } .hp-steps, .hp-how-view { grid-column: auto; } .hp-step { padding: 14px; } }

/* ── split + report ── */
.hp-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.hp-split > .hp-a { grid-column: 1 / span 6; min-width: 0; }
.hp-split > .hp-b { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hp-split.hp-rev > .hp-a { grid-column: 7 / span 6; order: 2; }
.hp-split.hp-rev > .hp-b { grid-column: 1 / span 5; order: 1; }
@media (max-width: 960px) { .hp-split { grid-template-columns: 1fr; gap: 40px; } .hp-split > .hp-a, .hp-split > .hp-b, .hp-split.hp-rev > .hp-a, .hp-split.hp-rev > .hp-b { grid-column: auto; order: 0; } }
.hp-rep { padding: 0; overflow: hidden; box-shadow: var(--hp-sh); }
.hp-rep-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--hp-line); flex-wrap: wrap; }
.hp-rep-h b { display: block; font: 700 16px var(--hp-f-d); color: var(--hp-ink); }
.hp-rep-h small { font-size: 13px; color: var(--hp-muted); }
.hp-pill { font-size: 11.5px; font-weight: 600; color: var(--hp-muted); border: 1px solid var(--hp-line); border-radius: 999px; padding: 3px 10px; }
.hp-rep-s { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 24px; border-bottom: 1px solid var(--hp-line); }
.hp-big { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--hp-blue) 60.7%, var(--hp-blue-50) 0); display: grid; place-items: center; }
.hp-big > div { width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; line-height: 1.05; }
.hp-big b { display: block; font: 800 30px var(--hp-f-d); color: var(--hp-ink); }
.hp-big small { font: 500 11px var(--hp-f-m); color: var(--hp-muted); }
.hp-kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; margin: 0; }
.hp-kv dt { font-size: 12.5px; color: var(--hp-muted); }
.hp-kv dd { margin: 0; font: 600 17px var(--hp-f-m); color: var(--hp-ink); }
.hp-kv dd.hp-neg { color: var(--hp-bad); }
.hp-bars { display: grid; gap: 14px; padding: 24px; border-bottom: 1px solid var(--hp-line); }
.hp-barrow { display: grid; grid-template-columns: 104px 1fr 64px; gap: 16px; align-items: center; font-size: 14.5px; }
.hp-barrow s { position: relative; height: 8px; border-radius: 4px; background: var(--hp-mist); box-shadow: inset 0 0 0 1px var(--hp-line); overflow: hidden; text-decoration: none; }
.hp-barrow s i { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c, var(--hp-blue)); border-radius: 4px; }
.hp-barrow b { font: 600 13.5px var(--hp-f-m); color: var(--hp-ink); text-align: right; }
.hp-cc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }
.hp-cc > div > b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.hp-cc-g > b { color: var(--hp-ok); } .hp-cc-w > b { color: var(--hp-warn); }
.hp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chips i { font-style: normal; font-size: 12.5px; font-weight: 500; padding: 4px 10px; border-radius: 6px; }
.hp-cc-g .hp-chips i { background: var(--hp-ok-50); color: var(--hp-ok); }
.hp-cc-w .hp-chips i { background: var(--hp-warn-50); color: var(--hp-warn); }
.hp-feat > div { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hp-line); }
.hp-feat b { display: block; font: 700 17px var(--hp-f-d); color: var(--hp-ink); margin-bottom: 2px; }
.hp-feat > div > span > span { font-size: 15px; color: var(--hp-muted); }
@media (max-width: 560px) { .hp-rep-s { grid-template-columns: 1fr; justify-items: start; } .hp-cc { grid-template-columns: 1fr; } .hp-barrow { grid-template-columns: 84px 1fr 56px; } }

/* ── personas + free-trial band ── */
.hp-ppl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hp-pp { display: flex; flex-direction: column; gap: 4px; color: var(--hp-text); }
.hp-ph { display: block; aspect-ratio: 4 / 5; border-radius: var(--hp-r-l); overflow: hidden; background: var(--hp-mist); margin-bottom: 12px; }
.hp-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.hp-pp:hover .hp-ph img { transform: scale(1.04); }
.hp-pp > b { font: 700 18px var(--hp-f-d); color: var(--hp-ink); }
.hp-pp > span:last-child { font-size: 14.5px; color: var(--hp-muted); }
@media (max-width: 1000px) { .hp-ppl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hp-band { position: relative; overflow: hidden; margin-top: 72px; background: var(--hp-navy); border-radius: var(--hp-r-xl); padding: 40px 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.hp-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 120% at 100% 0%, rgba(21,99,214,.5), transparent 60%); }
.hp-band > * { position: relative; }
.hp-band b { display: block; font: 800 26px/1.2 var(--hp-f-d); color: #fff; }
.hp-band > div > span { display: block; color: #C2CEE8; margin-top: 6px; }
.hp-band-cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 560px) { .hp-band { padding: 32px 24px; } }

/* ── part 2: products ── */
.hp-chapter { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.hp-chapter span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-muted); white-space: nowrap; }
.hp-chapter::after { content: ""; flex: 1; height: 1px; background: var(--hp-line); }
.hp-rows { display: flex; flex-direction: column; gap: 96px; }
.hp-eyebrow-ico { display: flex; align-items: center; gap: 12px; }
.hp-prod h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; font-weight: 800; }
.hp-d { font-size: 17px; color: var(--hp-muted); }
.hp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 4px; }
@media (max-width: 760px) { .hp-rows { gap: 72px; } }

/* ── pricing ── */
.hp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hp-price { position: relative; display: flex; flex-direction: column; gap: 18px; }
.hp-price.hp-rec { border: 2px solid var(--hp-blue); box-shadow: var(--hp-sh); }
.hp-flag { position: absolute; top: -12px; left: 24px; background: var(--hp-blue); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.hp-price h3 { font-size: 19px; }
.hp-pd { font-size: 14.5px; color: var(--hp-muted); min-height: 3.2em; }
.hp-unit { font: 700 17px var(--hp-f-d); color: var(--hp-ink); padding-block: 14px; border-block: 1px solid var(--hp-line); }
.hp-price .hp-checks li { font-size: 14.5px; }
.hp-price .hp-btn { margin-top: auto; }
.hp-subline { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 24px; border: 1px dashed var(--hp-blue-100); border-radius: var(--hp-r-l); background: var(--hp-blue-50); font-size: 15px; }
.hp-subline b { color: var(--hp-ink); }
.hp-pay { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; color: var(--hp-muted); }
.hp-pay i { font-style: normal; font: 600 11.5px var(--hp-f-m); color: var(--hp-ink); border: 1px solid var(--hp-line); background: #fff; border-radius: 6px; padding: 4px 10px; }
@media (max-width: 1060px) { .hp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hp-grid4 { grid-template-columns: 1fr; } }

/* ── testimonials ── */
.hp-qt { margin: 0; display: flex; flex-direction: column; gap: 20px; }
.hp-stars { color: #E8A317; letter-spacing: 2px; font-size: 14px; }
.hp-qt blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: var(--hp-ink); }
.hp-qt figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--hp-line); }
.hp-qt figcaption i { width: 40px; height: 40px; border-radius: 50%; background: var(--hp-blue-50); color: var(--hp-blue); display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; flex: none; }
.hp-qt figcaption b { display: block; color: var(--hp-ink); font-size: 15px; }
.hp-qt figcaption span span { font-size: 13px; color: var(--hp-muted); }
.hp-note { margin-top: 20px; font-size: 13px; color: var(--hp-muted); }

/* ── FAQ (existing .lp-faq-* markup, restyled) ── */
.hp-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.hp-faq-l { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hp-faq-q { grid-column: 6 / span 7; }
.hp-help { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; align-self: stretch; }
.hp-help > b { color: var(--hp-ink); font-size: 16px; }
.hp-help > span { font-size: 15px; margin-bottom: 8px; }
.hp .hp-faq-q.lp-faq-list { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; overflow: visible; }
.hp .hp-faq-q .lp-faq-item { border: 0; border-bottom: 1px solid var(--hp-line); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.hp .hp-faq-q .lp-faq-item:first-child { border-top: 1px solid var(--hp-line); }
.hp .hp-faq-q .lp-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; background: none; border: 0; text-align: left; cursor: pointer; font: 700 17px/1.4 var(--hp-f-d); color: var(--hp-ink); }
.hp .hp-faq-q .lp-faq-item.open .lp-faq-q { background: none; color: var(--hp-blue); }
.hp .hp-faq-q .lp-faq-arrow { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hp-line); display: grid; place-items: center; flex: none; font-size: 14px; color: var(--hp-blue); }
.hp .hp-faq-q .lp-faq-a { padding: 0 48px 22px 0; }
.hp .hp-faq-q .lp-faq-a p { font-size: 15.5px; line-height: 1.7; color: var(--hp-text); }
@media (max-width: 960px) { .hp-faq { grid-template-columns: 1fr; } .hp-faq-l, .hp-faq-q { grid-column: auto; } .hp .hp-faq-q .lp-faq-a { padding-right: 0; } }

/* ── closing band ── */
.hp-close { position: relative; overflow: hidden; background: var(--hp-navy); }
.hp-close::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 120% at 90% 0%, rgba(21,99,214,.45), transparent 60%); }
.hp-close .hp-wrap { position: relative; padding-block: 88px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.hp .hp-close h2 { color: #fff; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.15; font-weight: 800; max-width: 15em; }
.hp-close p { color: #C2CEE8; font-size: 18px; margin-top: 12px; }

/* ── footer ── */
.hp-foot { background: var(--hp-navy-2); color: #9EADCF; font-size: 14.5px; }
.hp-foot a { color: #9EADCF; text-decoration: none; }
.hp-foot a:hover { color: #fff; }
.hp-foot-g { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-block: 64px 40px; }
.hp-foot-g > div:not(.hp-foot-brand) { display: flex; flex-direction: column; gap: 10px; }
.hp-foot-g > div > b { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.hp-foot-logo { height: 32px; width: auto; display: block; filter: brightness(0) invert(1); }
.hp-foot-brand p { margin: 16px 0 0; max-width: 24em; line-height: 1.6; }
.hp-foot .hp-foot-mail { display: inline-block; margin-top: 14px; color: #fff; font-weight: 600; }
.hp-foot-social { display: flex; gap: 10px; margin-top: 18px; }
.hp-foot-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hp-line-dk); display: grid; place-items: center; }
/* Google Play badge (2026-11-12) */
.hp-foot a.hp-play { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 7px 16px 7px 12px; height: 44px; box-sizing: border-box; background: #000; border: 1px solid #A6A6A6; border-radius: 8px; color: #fff; line-height: 1; }
.hp-foot a.hp-play:hover { border-color: #fff; color: #fff; }
.hp-play span { display: flex; flex-direction: column; font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.hp-play small { font-size: 9.5px; font-weight: 500; letter-spacing: .06em; margin-bottom: 3px; }
.hp-foot-b { border-top: 1px solid var(--hp-line-dk); padding-block: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #7383AA; }
@media (max-width: 960px) { .hp-foot-g { grid-template-columns: 1fr 1fr; } .hp-foot-brand { grid-column: 1 / -1; } }

/* reveal: never leave homepage content invisible */
.hp .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hp *, .hp-foot * { transition: none !important; } }

/* cookie banner (consent.js) in the site colours */
html body #sv-cc .sv-cc-yes { background: #1563D6; }
html body #sv-cc .sv-cc-yes:hover { background: #0F4FB0; }