/* ============================================================
   Marketing site styles — homepage, pricing, and any future
   marketing pages. Shares css/styles.css's design tokens (colour
   variables, font stack) so the marketing site and the app read
   as one product; this file only adds the components the app's
   own stylesheet has no use for (nav bar, hero, pricing cards,
   FAQ accordion, footer).
   ============================================================ */

/* PrepPath brand palette (Sep 2026 rebrand) — deliberately marketing-only.
   --violet/--violet-tint are redefined here to override css/styles.css's
   app-wide violet with the real PrepPath brand orange, sampled from the
   logo file (images/logo-preppath.png): orange #FD5E3B, navy #01234F.
   This works because marketing.css loads *after* styles.css on every
   marketing page and :root rules of equal specificity cascade by source
   order — the app itself never loads this file, so its own violet/cyan/
   magenta/amber palette (css/styles.css, see CLAUDE.md) is untouched.
   Every existing var(--violet)/var(--violet-tint) usage in this file
   picks up the new orange automatically; --mkt-navy* below are new
   tokens for the secondary dark brand colour (nav/footer chrome, dark
   contrast bands, laptop-mockup bezel) — see DECISIONS.md. */
:root {
  --violet: #FD5E3B;
  --violet-tint: #FFE6DD;
  --violet-deep: #C43D1E;
  --mkt-orange-hover: #E14E2C;
  --mkt-navy: #01234F;
  --mkt-navy-deep: #001229;
  --mkt-navy-mid: #0B2E5C;
  --mkt-navy-light: #1C4A82;
  --mkt-navy-muted: #9FB2C9;
}

* { box-sizing: border-box; }
/* Site-wide safety net (Sep 2026, found while building the Ask Tutor demo):
   the browser's own [hidden]{display:none} default is only a UA-stylesheet
   rule, and gets silently overridden the moment ANY class on the same
   element sets its own `display` (e.g. .mkt-btn-outline's display:
   inline-flex) - the element then stays visibly on screen even though its
   hidden IDL property/attribute is true. Hit three times independently
   (the tutor directory's "More filters" panel, its mobile filter bar, and
   here) before promoting it to one global rule rather than patching each
   component that happens to collide with it. Always toggle visibility with
   el.hidden in JS, never style.display - this rule is what makes that
   reliable everywhere on the site. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: hidden; }
/* Belt-and-braces: a properly responsive page should never need this, but
   it's a cheap safety net against a horizontal scroll/page-shifts-sideways
   bug - some element somewhere overflowing its container - reaching a real
   visitor's device before it's caught in testing. Doesn't affect the sticky
   nav (still sticks correctly against the viewport with this set on html
   rather than body). */
/* Visible keyboard-focus ring for every marketing-site interactive element.
   Kept as a single high-contrast rule (rather than relying on each
   component's own default outline) since some sections (dark contrast
   bands, footer) sit on darker surfaces where a browser-default outline
   is hard to see. */
.mkt a:focus-visible, .mkt button:focus-visible, .mkt input:focus-visible, .mkt textarea:focus-visible {
  outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 2px;
}
body.mkt {
  margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: 'Atkinson Hyperlegible', sans-serif;
}
.mkt a { color: inherit; text-decoration: none; }
.mkt-wrap { max-width: min(94vw, 1560px); margin: 0 auto; padding: 0 32px; }
.mkt-wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- nav ---------- */
/* Light nav (Sep 2026 rebrand): the real PrepPath logo file has a solid
   navy wordmark, so it needs a light background to read against — a dark
   nav (the old dark-violet bar) would make the wordmark nearly invisible.
   See DECISIONS.md. */
.mkt-nav {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.mkt-nav-inner {
  max-width: min(94vw, 1560px); margin: 0 auto; padding: 16px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.mkt-logo { display: flex; align-items: center; flex-shrink: 0; line-height: 1; }
.mkt-logo-img { display: block; height: 75px; width: auto; }
@media (max-width: 1000px) { .mkt-logo-img { height: 60px; } }
@media (max-width: 480px) { .mkt-logo-img { height: 46px; } }
.mkt-nav-links { display: flex; align-items: center; gap: 0; }
.mkt-nav-links a {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 12.5px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--mkt-navy); padding: 4px 14px; border-bottom: none; position: relative;
}
.mkt-nav-links a:first-child { padding-left: 0; }
.mkt-nav-links a:last-child { padding-right: 0; }
.mkt-nav-links a::after {
  content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 14px; background: var(--line);
}
.mkt-nav-links a:last-child::after { display: none; }
.mkt-nav-links a:hover { color: var(--violet); text-decoration: underline; text-underline-offset: 4px; }
.mkt-nav-links a.active { color: var(--violet); text-decoration: underline; text-underline-offset: 4px; }
.mkt-nav-links a.mkt-nav-cta {
  font-size: 13px; text-transform: none; letter-spacing: normal; font-weight: 700; opacity: 1;
  background: var(--violet); color: #fff; padding: 10px 20px; border-radius: 999px;
  white-space: nowrap;
}
.mkt-nav-links a.mkt-nav-cta:hover { background: var(--mkt-orange-hover); color: #fff; text-decoration: none; }
.mkt-nav-links a.mkt-nav-cta::after { display: none; }
@media (max-width: 1000px) { .mkt-nav-links { display: none; } }

.mkt-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mkt-nav-login {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  background: transparent; color: var(--mkt-navy); border: 1.5px solid var(--line); padding: 8px 17px; border-radius: 999px;
  white-space: nowrap;
}
.mkt-nav-login:hover { background: var(--surface-2); border-color: var(--violet); }
/* Hides the Log in button from the very first paint until js/marketing-auth.js
   has actually checked the session (see the inline <head> script on every
   marketing page) - without this, the button visibly flashes before
   disappearing for a genuinely signed-in visitor, since the real session
   check is async and the button would otherwise paint in its default
   (visible) state first. visibility (not display) so revealing it later
   doesn't shift the header layout. */
.mkt-auth-pending .mkt-nav-login,
.mkt-auth-pending .mkt-mm-login { visibility: hidden; }
.mkt-nav-dashboard {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  background: var(--violet); color: #fff; padding: 10px 20px; border-radius: 999px;
  white-space: nowrap;
}
.mkt-nav-dashboard:hover { background: var(--mkt-orange-hover); }
.mkt-nav-logout {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  background: transparent; color: var(--mkt-navy); border: 1.5px solid var(--line); padding: 8px 17px; border-radius: 999px;
  white-space: nowrap;
}
.mkt-nav-logout:hover { background: var(--surface-2); border-color: var(--violet); }
.mkt-nav-cta {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px;
  background: var(--violet); color: #fff; padding: 10px 20px; border-radius: 999px;
  white-space: nowrap;
}
.mkt-nav-cta:hover { background: var(--mkt-orange-hover); }
/* Same flash-prevention as .mkt-nav-login above: js/marketing-auth.js hides
   the disabled "Start Free Trial" CTA for a signed-in visitor (it's
   replaced by "Go to Dashboard" instead - a real account has no use for a
   trial prompt), so it must start invisible rather than flash into view
   first. .mkt-nav-dashboard needs no matching rule: it starts hidden via
   its own inline display:none in partials/nav.html, which already matches
   its pending-state appearance. */
.mkt-auth-pending .mkt-nav-cta,
.mkt-auth-pending .mkt-mm-cta { visibility: hidden; }
/* On narrow screens, drop the disabled "Start Free Trial" button before
   "Log in" - Log in is the one that actually does something. Dashboard
   stays even here: for a signed-in visitor it's the only working way back
   into the app from this header (there's no "Log in" to fall back on). */
@media (max-width: 480px) { .mkt-nav-cta { display: none; } }
/* Below the hamburger breakpoint, the top bar has room for the logo, one
   pill (Dashboard) and the hamburger toggle - a second always-visible pill
   (Log out) crowds the toggle button itself off-screen. Log out lives only
   in the hamburger drawer below this width (js/marketing-nav.js already
   clones it there as .mkt-mm-logout); the desktop pill returns above it. */
@media (max-width: 1000px) { .mkt-nav-logout { display: none !important; } }
/* Real-device bug (Sep 2026): on a genuine narrow phone (~375-390px), the
   logo + a full-size "Go to Dashboard"/"Log in" pill + the hamburger toggle
   together were wider than the viewport - the row doesn't wrap (flex-shrink:0
   throughout, deliberately, so nothing squashes illegibly), so the excess
   pushed the toggle button off-screen and forced the whole page to scroll
   sideways. Shrinking the pill and tightening the row's own padding at this
   width is the actual fix; html's overflow-x:hidden above is only a
   safety net, not a substitute for this. */
@media (max-width: 480px) {
  .mkt-nav-inner { padding: 12px 14px; gap: 8px; }
  .mkt-nav-actions { gap: 6px; }
  .mkt-nav-login, .mkt-nav-dashboard, .mkt-nav-logout {
    font-size: 12px; padding: 7px 11px;
  }
  .mkt-nav-toggle { width: 34px; height: 34px; }
}

/* ---------- mobile hamburger + slide-down menu (injected by js/marketing-nav.js) ---------- */
.mkt-nav-toggle {
  display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--surface-2); border: none; color: var(--mkt-navy); cursor: pointer; flex-shrink: 0;
}
@media (max-width: 1000px) { .mkt-nav-toggle { display: flex; } }
.mkt-nav-toggle .mkt-icon-close { display: none; }
.mkt-nav.open .mkt-nav-toggle .mkt-icon-burger { display: none; }
.mkt-nav.open .mkt-nav-toggle .mkt-icon-close { display: block; }
.mkt-mobile-menu {
  display: none; max-height: 0; overflow: hidden; background: #fff; border-top: 1px solid var(--line);
  transition: max-height 0.28s ease;
}
@media (max-width: 1000px) { .mkt-mobile-menu { display: block; } }
.mkt-nav.open .mkt-mobile-menu { max-height: 520px; }
.mkt-mobile-menu-inner { padding: 8px 32px 26px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 560px) { .mkt-mobile-menu-inner { padding: 8px 20px 22px; } }
.mkt-mobile-menu-inner a {
  color: var(--mkt-navy); font-size: 15px; font-weight: 700; padding: 13px 4px; border-bottom: 1px solid var(--line);
  font-family: 'Inter', sans-serif;
}
.mkt-mobile-menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.mkt-mobile-menu-actions a {
  text-align: center; border-radius: 999px; padding: 12px; font-weight: 700; font-family: 'Inter', sans-serif; font-size: 14px;
  border-bottom: none;
}
.mkt-mobile-menu-actions .mkt-mm-login,
.mkt-mobile-menu-actions .mkt-mm-logout { background: transparent; color: var(--mkt-navy); border: 1.5px solid var(--line); }
.mkt-mobile-menu-actions .mkt-mm-cta,
.mkt-mobile-menu-actions .mkt-mm-dashboard { background: var(--violet); color: #fff; }

/* ---------- scroll to top (injected by js/marketing-nav.js) ---------- */
.mkt-scroll-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 46px; height: 46px; border-radius: 50%;
  background: var(--violet); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(20,12,60,0.28); opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.mkt-scroll-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mkt-scroll-top:hover { background: var(--mkt-orange-hover); }
@media (max-width: 560px) { .mkt-scroll-top { right: 16px; bottom: 16px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .mkt-scroll-top { transition: none; } }

/* ---------- hero ---------- */
.mkt-hero { padding: 44px 0 52px; position: relative; overflow: hidden; }
.mkt-hero-blob-a, .mkt-hero-blob-b { position: absolute; border-radius: 50%; z-index: 0; opacity: 0.5; filter: blur(6px); }
.mkt-hero-blob-a { top: -80px; right: -60px; width: 320px; height: 320px; background: var(--violet-tint); }
.mkt-hero-blob-b { bottom: -100px; left: -80px; width: 260px; height: 260px; background: var(--cyan-tint); }
.mkt-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 56px; align-items: center;
}
@media (max-width: 900px) { .mkt-hero-grid { grid-template-columns: 1fr; gap: 48px; } }
.mkt-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--violet); background: var(--violet-tint);
  padding: 7px 14px; border-radius: 999px; margin: 0 0 22px;
}
.mkt-hero h1 {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.06; margin: 0 0 20px; text-wrap: balance; letter-spacing: -0.01em;
}
.mkt-hero h1 .accent { color: var(--violet); }
/* A hard <br> forces the first line break in every hero h1 regardless of
   width; combined with text-wrap: balance above, this leaves an oddly
   large gap before the second line on narrow screens instead of the
   heading wrapping naturally. Drop the forced break below 640px - the
   space kept in each heading's markup after the <br> (normally collapsed
   at a forced line start) then reads as the ordinary word gap. */
@media (max-width: 640px) {
  .mkt-hero h1 br { display: none; }
}
.mkt-hero .lede {
  font-size: 17.5px; line-height: 1.65; color: var(--muted); max-width: 46ch; margin: 0 0 26px;
}
.mkt-checklist { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mkt-checklist li { display: flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 600; }
.mkt-checklist .ck {
  width: 22px; height: 22px; border-radius: 50%; background: var(--good-bg); color: var(--good);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mkt-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mkt-btn-primary {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px;
  background: var(--violet); color: #fff; padding: 15px 28px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;
  box-shadow: 0 10px 24px rgba(253,94,59,0.28); white-space: nowrap;
}
.mkt-btn-primary:hover { background: var(--mkt-orange-hover); }
/* "Start Free Trial" is disabled everywhere on the marketing site until a
   real trial/subscription flow exists (Stripe, time-limited access) - it
   used to just link straight into the same free practice experience any
   visitor already gets, which overpromised a "trial" that wasn't real.
   aria-disabled + pointer-events:none fully disables the link regardless
   of which button class it's paired with (nav CTA, hero CTA, etc). */
a[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
a[aria-disabled="true"]:hover { background: inherit; }
.mkt-btn-outline {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1px solid var(--line); padding: 14px 22px; border-radius: 999px; white-space: nowrap;
}
.mkt-btn-outline:hover { border-color: var(--violet); color: var(--violet); }
.mkt-btn-outline .play {
  width: 22px; height: 22px; border-radius: 50%; background: var(--violet-tint); color: var(--violet);
  display: flex; align-items: center; justify-content: center; font-size: 9px;
}
.mkt-hero-note { font-size: 13px; color: var(--muted); margin: 18px 0 0; display: flex; align-items: center; gap: 6px; }

/* hero visual: layered dashboard + phone mockups of the real app */
.mkt-hero-visual { position: relative; padding: 20px 30px 40px 0; min-width: 0; }
.mkt-dash-card {
  background: var(--surface); border-radius: 20px; border: 1px solid var(--line);
  box-shadow: 0 30px 70px rgba(42,35,80,0.14); overflow: hidden;
  display: flex; min-height: 300px; min-width: 460px;
}
.mkt-dash-sidebar {
  width: 118px; flex-shrink: 0; background: var(--surface-2); border-right: 1px solid var(--line);
  padding: 16px 10px; display: flex; flex-direction: column; gap: 4px;
}
.mkt-dash-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--violet); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 0 0 14px;
}
.mkt-dash-navitem {
  display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 11px; color: var(--muted); padding: 8px 9px; border-radius: 9px;
}
.mkt-dash-navitem.active { background: var(--violet-tint); color: var(--violet); }
.mkt-dash-main { flex: 1; padding: 18px 20px; min-width: 0; }
.mkt-dash-topbar { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mkt-dash-h { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14.5px; margin: 0; }
.mkt-dash-sub { font-size: 10.5px; color: var(--muted); margin: 3px 0 0; }
.mkt-dash-week {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px;
  display: flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0;
}
.mkt-dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.mkt-dash-stats-4 { grid-template-columns: repeat(4, 1fr); }
.mkt-dash-stat {
  background: var(--surface-2); border-radius: 12px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.mkt-dash-stat span { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 8.5px; color: var(--muted); }
.mkt-dash-stat strong { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px; }
.mkt-dash-stat .spark { width: 100%; height: 13px; margin-top: 2px; }
.mkt-dash-stat-sub { font-size: 8.5px !important; font-weight: 500 !important; color: var(--muted); margin-top: 1px; }
.mkt-dash-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mkt-dash-panel { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; min-width: 0; overflow: hidden; }
.mkt-dash-panel-txt { overflow-wrap: break-word; }
.mkt-dash-focus-row { min-width: 0; }
.mkt-dash-focus-row span:not(.fdot):not(.ftag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mkt-dash-panel-txt { font-size: 10px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
.mkt-dash-btn {
  display: inline-block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px;
  background: var(--violet); color: #fff; padding: 6px 12px; border-radius: 999px;
}
.mkt-dash-link { display: inline-block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; color: var(--violet); margin-top: 4px; }
.mkt-dash-focus-row {
  display: flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 600;
  padding: 5px 0; border-top: 1px solid var(--line);
}
.mkt-dash-focus-row:first-of-type { border-top: none; }
.mkt-dash-focus-row .fdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.mkt-dash-focus-row .ftag {
  margin-left: auto; font-size: 8px; font-weight: 700; color: var(--magenta); background: var(--magenta-tint);
  padding: 2px 6px; border-radius: 999px; white-space: nowrap;
}
.mkt-dash-focus-row .ftag.mid { color: var(--amber); background: var(--amber-tint); }

.mkt-phone-card {
  position: absolute; right: -8px; bottom: -46px; width: 200px;
  background: var(--ink); border-radius: 30px; padding: 10px 8px; box-shadow: 0 24px 50px rgba(42,35,80,0.30);
}
.mkt-phone-notch { width: 60px; height: 5px; border-radius: 4px; background: rgba(255,255,255,0.25); margin: 0 auto 8px; }
.mkt-phone-screen { background: var(--surface); border-radius: 20px; padding: 16px 14px; }
.mkt-device-q { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; line-height: 1.4; margin: 0 0 12px; }
.mkt-device-opt {
  display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 9px;
  padding: 8px 10px; margin-bottom: 7px; font-size: 11.5px; font-weight: 600;
}
.mkt-device-opt .tag {
  width: 17px; height: 17px; border-radius: 5px; background: var(--violet-tint); color: var(--violet);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mkt-device-opt.correct { background: var(--good-bg); }
.mkt-device-opt.correct .tag { background: var(--good); color: #fff; }
.mkt-device-feedback {
  margin-top: 10px; background: var(--good); color: #fff; border-radius: 9px; padding: 9px 12px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: space-between;
}
.mkt-device-feedback span { background: rgba(255,255,255,0.22); padding: 4px 9px; border-radius: 999px; font-size: 9.5px; }

.mkt-float-badge {
  position: absolute; right: 6px; bottom: -10px; width: 92px; height: 92px; border-radius: 50%;
  background: var(--violet); color: #fff; border: 3px dashed rgba(255,255,255,0.55);
  box-shadow: 0 14px 30px rgba(253,94,59,0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; line-height: 1.3; text-align: center;
}
.mkt-float-badge .fb-ico {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.25); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@media (max-width: 900px) {
  .mkt-hero-visual { padding: 20px 16px 40px; max-width: 420px; margin: 0 auto; }
  .mkt-float-badge { display: none; }
}
@media (max-width: 680px) {
  .mkt-hero-visual { display: none; }
}

/* ---------- trust badge row ---------- */
.mkt-trust { padding: 44px 0 0; position: relative; z-index: 1; }
.mkt-trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .mkt-trust-row { grid-template-columns: repeat(2, 1fr); } }
.mkt-trust-item { display: flex; align-items: flex-start; gap: 12px; }
.mkt-trust-item .ti-ico {
  width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mkt-trust-item div { display: flex; flex-direction: column; gap: 2px; }
.mkt-trust-item strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; }
.mkt-trust-item span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* ---------- section scaffolding ---------- */
.mkt-section { padding: 68px 0; }
.mkt-section-head { max-width: 620px; margin: 0 0 48px; }
.mkt-section-eyebrow {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 12px;
}
.mkt-section-eyebrow.c-cyan { color: var(--cyan); }
.mkt-section-eyebrow.c-magenta { color: var(--magenta); }
.mkt-section-eyebrow.c-amber { color: var(--amber); }
.mkt-section-eyebrow.c-violet { color: var(--violet); }
.mkt-section-eyebrow.c-good { color: var(--good); }
.mkt-section-head h2 {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 14px; text-wrap: balance;
}
.mkt-section-head p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---------- feature grid ---------- */
.mkt-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .mkt-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .mkt-feature-grid { grid-template-columns: 1fr; } }
.mkt-feature-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 620px) { .mkt-feature-grid-2 { grid-template-columns: 1fr; } }
.mkt-feature-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px;
}
.mkt-feature-icon {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 18px;
}
.mkt-feature-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 9px; }
.mkt-feature-card p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---------- large gradient icon-square feature cards ---------- */
.mkt-feature-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .mkt-feature-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mkt-feature-grid-4 { grid-template-columns: 1fr; } }
.mkt-feature-card-lg {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px;
  text-align: center;
}
.mkt-feature-icon-lg {
  width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  color: #fff; margin: 0 auto 16px;
}
.mkt-feature-icon-lg.grad-violet, .grad-violet { background: linear-gradient(135deg, var(--mkt-navy-light), var(--mkt-navy)); }
.mkt-feature-icon-lg.grad-green, .grad-green { background: linear-gradient(135deg, #4FBF8B, #1B8F5C); }
.mkt-feature-icon-lg.grad-orange, .grad-orange { background: linear-gradient(135deg, #F0AE4E, #E39A1F); }
.mkt-feature-icon-lg.grad-blue, .grad-blue { background: linear-gradient(135deg, #5CA8F0, #2E7FD6); }
.mkt-feature-card-lg h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16.5px; margin: 0 0 8px; }
.mkt-feature-card-lg p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.mkt-feature-card-lg p em { color: var(--muted); font-style: italic; }

/* ---------- how it works ---------- */
.mkt-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 800px) { .mkt-steps { grid-template-columns: 1fr; gap: 16px; } }
.mkt-step {
  position: relative; display: flex; align-items: flex-start; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px;
}
.mkt-step-icon-wrap { position: relative; width: 52px; flex-shrink: 0; }
.mkt-step-icon {
  width: 52px; height: 52px; border-radius: 14px; background: var(--violet-tint); color: var(--violet);
  display: flex; align-items: center; justify-content: center;
}
.mkt-step-icon svg { width: 22px; height: 22px; }
.mkt-step-num {
  position: absolute; top: -8px; right: -8px;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 12px; color: #fff;
  width: 22px; height: 22px; border-radius: 50%; background: var(--violet);
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface);
}
.mkt-step-body { min-width: 0; }
.mkt-step h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 6px; }
.mkt-step p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- topic showcase ---------- */
.mkt-topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 800px) { .mkt-topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mkt-topic-grid { grid-template-columns: 1fr; } }
.mkt-topic-card {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.mkt-topic-card:hover { border-color: var(--violet); }
.mkt-topic-card .ti {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mkt-topic-card > span:not(.ti) { display: flex; flex-direction: column; gap: 2px; }
.mkt-topic-card em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--muted); }

/* ---------- pricing ---------- */
.mkt-pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 780px; margin: 0 auto; }
@media (max-width: 720px) { .mkt-pricing-grid { grid-template-columns: 1fr; } }
.mkt-price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 32px 28px;
  position: relative;
}
.mkt-price-card.featured { border: 2px solid var(--violet); }
.mkt-price-badge {
  position: absolute; top: -13px; left: 28px; background: var(--violet); color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.mkt-price-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 19px; margin: 6px 0 6px; }
.mkt-price-card .price-sub { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; }
.mkt-price-amount { display: flex; align-items: baseline; gap: 5px; margin-bottom: 22px; }
.mkt-price-amount .amt { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 40px; }
.mkt-price-amount .per { font-size: 14px; color: var(--muted); }
.mkt-price-list { list-style: none; margin: 0 0 26px; padding: 0; }
.mkt-price-list li {
  font-size: 14.5px; padding: 9px 0; border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 10px;
}
.mkt-price-list li:first-child { border-top: none; }
.mkt-price-list li .ok { color: var(--good); flex-shrink: 0; margin-top: 1px; }
.mkt-price-list li .no { color: var(--bad); flex-shrink: 0; margin-top: 1px; }
.mkt-price-list li.is-no { color: var(--muted); }
.mkt-price-cta {
  display: block; text-align: center; width: 100%; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 15px; padding: 13px; border-radius: 999px; cursor: pointer; border: none;
}
.mkt-price-cta.solid { background: var(--violet); color: #fff; }
.mkt-price-cta.outline { background: var(--surface-2); color: var(--ink); }
.mkt-price-status {
  font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 12px;
}

.mkt-price-terms {
  max-width: 780px; margin: 36px auto 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 28px; padding-top: 28px; border-top: 1px solid var(--line);
}
.mkt-price-terms div { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.mkt-price-terms svg { color: var(--violet); flex-shrink: 0; }

/* ---------- how-it-works carousel ---------- */
.htw-carousel { position: relative; }
.htw-slides { position: relative; min-height: 480px; }
.htw-slide {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.htw-slide.is-active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (max-width: 760px) {
  .htw-slides { min-height: 720px; }
  .htw-slide { grid-template-columns: 1fr; gap: 24px; }
}
.htw-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--violet); color: #fff; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px;
  margin-bottom: 14px;
}
.htw-copy h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 24px; margin: 0 0 10px; text-wrap: balance; }
.htw-copy p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0; }
.htw-frame {
  background: var(--surface); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(42,35,80,0.12); overflow: hidden;
}
.htw-frame-bar { background: var(--surface-2); padding: 10px 14px; display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.htw-frame-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.htw-frame-bar span:nth-child(1) { background: #0E8F82; }
.htw-frame-bar span:nth-child(2) { background: #E39A1F; }
.htw-frame-bar span:nth-child(3) { background: #C13268; }
.htw-frame-body { padding: 20px; background: var(--bg); }
.htw-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.htw-arrow {
  width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.htw-arrow:hover { border-color: var(--violet); color: var(--violet); }
.htw-dots { display: flex; gap: 9px; }
.htw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; padding: 0; }
.htw-dot.is-active { background: var(--violet); width: 22px; border-radius: 999px; transition: width 0.2s ease; }

/* ---------- how-it-works: alternating feature showcase ---------- */
.htw-feature {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center;
  margin-bottom: 80px; position: relative;
}
.htw-feature-rev .htw-feature-copy { order: 2; }
.htw-feature-rev .htw-feature-media { order: 1; }
@media (max-width: 860px) {
  .htw-feature { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  .htw-feature-rev .htw-feature-copy, .htw-feature-rev .htw-feature-media { order: initial; }
  .htw-feature-media { max-width: 460px; margin: 0 auto; }
  .mkt-phone-card { display: none; }
}
.htw-feature-badge {
  width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 16px; margin-bottom: 14px;
}
.htw-feature-label { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; }
.htw-feature-copy h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 12px; text-wrap: balance; }
.htw-feature-desc { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; }
.htw-feature-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.htw-feature-checks li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.htw-feature-checks .ck {
  width: 19px; height: 19px; border-radius: 50%; background: var(--good-bg); color: var(--good); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.htw-feature-media { position: relative; }

.htw-frame {
  background: var(--surface); border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(42,35,80,0.12); overflow: hidden;
}
.htw-frame-bar { background: var(--surface-2); padding: 10px 14px; display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.htw-frame-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.htw-frame-bar span:nth-child(1) { background: #0E8F82; }
.htw-frame-bar span:nth-child(2) { background: #E39A1F; }
.htw-frame-bar span:nth-child(3) { background: #C13268; }
.htw-frame-body { padding: 22px; background: var(--bg); }
.htw-qtopbar { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.htw-explain { margin-top: 12px; background: var(--good-bg); border: 1px solid var(--good); border-radius: 12px; padding: 11px 13px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.htw-explain strong { color: var(--good); }
.htw-next-btn {
  margin-top: 12px; width: 100%; background: var(--violet); color: #fff; border-radius: 10px; padding: 10px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-align: center;
}

/* Focus Areas progress list */
.htw-flist { display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; }
.htw-frow-top { display: flex; justify-content: space-between; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px; margin-bottom: 4px; }
.htw-frow-sub { font-size: 10px; color: var(--muted); margin: 3px 0 0; }
.htw-fbar { height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.htw-fbar-fill { height: 100%; border-radius: 999px; }
.htw-why-card { background: var(--surface-2); border-radius: 12px; padding: 11px 13px; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.htw-why-card em { font-style: normal; color: var(--ink); font-weight: 600; }

/* Focus Practice pills + mini answer card */
.htw-pills-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.htw-pill2 {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; padding: 8px 12px; border-radius: 10px;
  background: var(--surface-2); color: var(--muted);
}
.htw-pill2 em { font-style: normal; font-weight: 500; opacity: 0.75; margin-left: 3px; }
.htw-pill2.active { background: var(--violet); color: #fff; }
.htw-answer-input {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 2px solid var(--violet);
  font-family: 'IBM Plex Mono', monospace; font-size: 17px; font-weight: 500; margin: 10px 0; background: var(--surface);
}
.htw-solution { background: var(--surface-2); border-radius: 10px; padding: 10px 13px; font-size: 12px; line-height: 1.6; color: var(--ink); margin-bottom: 12px; }
.htw-solution strong { color: var(--good); }
.htw-check-btn {
  width: 100%; background: var(--good); color: #fff; border-radius: 10px; padding: 10px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-align: center;
}

/* Mock Test Results */
.htw-score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.htw-score-card { background: var(--surface-2); border-radius: 12px; padding: 12px 8px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.htw-score-label { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; color: var(--muted); }
.htw-score-big { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 21px; }
.htw-score-sub { font-size: 9.5px; color: var(--muted); }
.htw-score-sub.good { color: var(--good); font-weight: 700; }
.htw-breakdown { display: flex; flex-direction: column; }
.htw-brow {
  display: grid; grid-template-columns: 1fr 44px 70px auto; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: 11.5px;
}
.htw-brow:first-child { border-top: none; }
.htw-brow-label { font-weight: 600; }
.htw-brow-frac { font-family: 'IBM Plex Mono', monospace; color: var(--muted); font-size: 10.5px; }
.htw-rating { font-size: 9.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.htw-rating.excellent { background: var(--good-bg); color: var(--good); }
.htw-rating.good { background: var(--cyan-tint); color: var(--cyan); }
@media (max-width: 500px) {
  .htw-brow { grid-template-columns: 1fr auto; grid-template-areas: "label rating" "bar bar"; row-gap: 4px; }
  .htw-brow-label { grid-area: label; } .htw-rating { grid-area: rating; }
  .htw-brow-frac { display: none; } .htw-fbar { grid-area: bar; }
}

/* Learning loop diagram */
.htw-loop-row { display: flex; align-items: flex-start; justify-content: center; gap: 8px; flex-wrap: wrap; }
.htw-loop-node { display: flex; flex-direction: column; align-items: center; text-align: center; width: 130px; }
.htw-loop-icon {
  width: 60px; height: 60px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; box-shadow: 0 10px 24px rgba(42,35,80,0.14);
}
.htw-loop-node h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14.5px; margin: 0 0 4px; }
.htw-loop-node p { font-size: 11.5px; color: var(--muted); line-height: 1.45; margin: 0; }
.htw-loop-arrow { color: var(--line); flex-shrink: 0; margin-top: 24px; }
@media (max-width: 760px) {
  .htw-loop-row { flex-direction: column; align-items: center; }
  .htw-loop-arrow { transform: rotate(90deg); margin: 4px 0; }
  .htw-loop-node { width: 220px; }
}

/* ---------- SEAG Guide: hero illustration ---------- */
.sg-hero-media { display: flex; gap: 26px; align-items: stretch; }
.sg-book {
  flex-shrink: 0; width: 210px; border-radius: 18px;
  background: linear-gradient(155deg, var(--violet), var(--violet-deep)); color: #fff; padding: 32px 26px;
  display: flex; flex-direction: column; box-shadow: 0 26px 54px rgba(42,35,80,0.28); position: relative;
}
.sg-book-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 23px; line-height: 1.25; }
.sg-book-sub { font-size: 13.5px; color: var(--mkt-navy-muted); margin-top: 10px; }
.sg-book-ico { position: absolute; bottom: 26px; left: 26px; opacity: 0.85; width: 58px; height: 58px; }
.sg-papers { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; justify-content: center; }
.sg-paper {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px;
  box-shadow: 0 16px 36px rgba(42,35,80,0.09); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px;
}
.sg-paper strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; width: 100%; }
.sg-paper > span { font-size: 13px; color: var(--muted); }
.sg-paper-min, .sg-paper-q { width: auto; }
.sg-paper-min::after { content: "\00b7"; margin-left: 8px; color: var(--line); }
.sg-tag {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; background: var(--violet-tint); color: var(--violet);
  padding: 5px 12px; border-radius: 999px; margin-top: 6px;
}
@media (max-width: 480px) { .sg-hero-media { flex-direction: column; } .sg-book { width: 100%; padding: 24px; } }

/* ---------- SEAG Guide: paper skill cards ---------- */
.sg-paper-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .sg-paper-cols { grid-template-columns: 1fr; } }
.sg-paper-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px 26px 10px; }
.sg-paper-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 3px; }
.sg-paper-card-sub { font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.sg-skill-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.sg-skill-row:first-of-type { border-top: none; padding-top: 0; }
.sg-skill-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sg-skill-row strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; }
.sg-skill-row span span { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---------- SEAG Guide: "how the app helps" band ---------- */
.sg-app-band { background: #E8F5EE; }
.sg-app-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
@media (max-width: 860px) { .sg-app-grid { grid-template-columns: 1fr; gap: 32px; } .sg-app-media .mkt-phone-card { display: none; } }
.sg-app-media { position: relative; max-width: 460px; }
.sg-app-desc { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; opacity: 0.85; }
.sg-check-list { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.sg-check-row { display: flex; align-items: flex-start; gap: 13px; }
.sg-check-ico {
  width: 34px; height: 34px; border-radius: 50%; background: var(--good); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sg-check-row strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14.5px; }
.sg-check-row span span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }

/* ---------- pricing page ---------- */
.pr-hero-note { display: flex; align-items: flex-start; gap: 13px; margin-top: 30px; }
.pr-hero-note .ico {
  width: 42px; height: 42px; border-radius: 12px; background: var(--violet-tint); color: var(--violet);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pr-hero-note strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; }
.pr-hero-note span { font-size: 12.5px; color: var(--muted); }

.pr-plan-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  max-width: 1080px; margin: 0 auto; align-items: start;
}
@media (max-width: 900px) {
  .pr-plan-grid { grid-template-columns: 1fr; max-width: 420px; }
}
.pr-plan-card {
  background: var(--surface); border-radius: 26px; border: 2px solid var(--line); padding: 40px 32px 30px;
  box-shadow: 0 18px 40px rgba(42,35,80,0.08); position: relative; text-align: center;
}
.pr-plan-card.pr-plan-featured {
  border-color: var(--violet); box-shadow: 0 34px 70px rgba(42,35,80,0.16); transform: scale(1.04); z-index: 1;
}
@media (max-width: 900px) { .pr-plan-card.pr-plan-featured { transform: none; } }
.pr-plan-badge {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--violet); color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 6px 18px; border-radius: 999px; white-space: nowrap;
}
.pr-plan-title { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 25px; margin: 10px 0 4px; text-align: center; }
.pr-plan-sub { font-size: 14px; color: var(--muted); text-align: center; margin: 0 0 22px; }
.pr-plan-price { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 26px; }
.pr-plan-price .amt { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 46px; }
.pr-plan-price .per { font-size: 15px; color: var(--muted); }
.pr-plan-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px; list-style: none;
  margin: 0 0 28px; padding: 22px 0 0; border-top: 1px solid var(--line);
}
@media (max-width: 560px) { .pr-plan-list { grid-template-columns: 1fr; } }
.pr-plan-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 600; }
.pr-plan-list li .ok {
  width: 18px; height: 18px; border-radius: 50%; background: var(--good-bg); color: var(--good);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.pr-plan-note { text-align: center; font-size: 12px; color: var(--muted); margin: 14px 0 0; }

.pr-value-band { background: var(--mkt-navy-deep); padding: 68px 0; }
.pr-value-band h2 {
  color: #fff; text-align: center; font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(23px, 3vw, 32px); margin: 0 0 52px; text-wrap: balance;
}
.pr-value-band h2 .accent { color: var(--violet); }
.pr-value-row { display: flex; align-items: flex-start; justify-content: center; gap: 6px; max-width: 1120px; margin: 0 auto; flex-wrap: wrap; }
.pr-value-node { display: flex; flex-direction: column; align-items: center; text-align: center; width: 220px; }
.pr-value-icon { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.pr-value-node h3 { color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.pr-value-node p { color: var(--mkt-navy-muted); font-size: 13px; line-height: 1.55; margin: 0; }
.pr-value-arrow { color: var(--mkt-navy-muted); margin-top: 32px; flex-shrink: 0; }
@media (max-width: 860px) {
  .pr-value-row { flex-direction: column; align-items: center; }
  .pr-value-arrow { transform: rotate(90deg); margin: 6px 0; }
}

.pr-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .pr-faq-grid { grid-template-columns: 1fr; } }

/* ---------- contact page ---------- */
.ct-info-list { display: flex; flex-direction: column; gap: 18px; margin-top: 30px; }
.ct-info-row { display: flex; align-items: flex-start; gap: 14px; }
.ct-info-ico { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ct-info-row strong { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; }
.ct-info-row span span { font-size: 13px; color: var(--muted); }

.ct-form-card { background: var(--surface); border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 30px 60px rgba(42,35,80,0.10); padding: 34px; }
.ct-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .ct-form-grid { grid-template-columns: 1fr; } }
.ct-field { margin-bottom: 16px; }
.ct-field label { display: block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px; margin-bottom: 7px; }
.ct-field input, .ct-field textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 14px; color: var(--ink); background: var(--surface-2);
  resize: vertical;
}
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: var(--violet); background: var(--surface); box-shadow: 0 0 0 3px var(--violet-tint); }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: var(--muted); }
.ct-form-btn {
  width: 100%; background: var(--violet); color: #fff; border: none; border-radius: 999px; padding: 15px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ct-form-btn:hover { background: var(--mkt-orange-hover); }
.ct-form-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: 14px 0 0; }

.ct-touch-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 24px; text-align: center; }
.ct-touch-ico { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.ct-touch-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; margin: 0 0 8px; }
.ct-touch-card p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }

.ct-band {
  display: grid; grid-template-columns: 1fr 0.8fr; gap: 40px; align-items: center;
  background: var(--violet-tint); border-radius: 28px; padding: 56px;
}
@media (max-width: 760px) { .ct-band { grid-template-columns: 1fr; padding: 36px 28px; text-align: center; } .ct-band-art { max-width: 220px; margin: 0 auto; } }
.ct-band-copy h2 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(24px,2.6vw,30px); margin: 0 0 14px; }
.ct-band-copy p { font-size: 15px; line-height: 1.65; color: var(--ink); opacity: 0.8; margin: 0; max-width: 44ch; }
.ct-band-art { width: 100%; }

/* ---------- about page ---------- */
.ab-hero-art { border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px rgba(42,35,80,0.14); }
.ab-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .ab-story-grid { grid-template-columns: 1fr; gap: 32px; } }
.ab-story-p { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.ab-feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
@media (max-width: 560px) { .ab-feat-grid { grid-template-columns: 1fr; } }
.ab-feat-ico { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ab-feat h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.ab-feat p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }

.ab-diff-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px 16px; max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px) { .ab-diff-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ab-diff-row { grid-template-columns: 1fr; } }
.ab-diff-node { text-align: center; }
.ab-diff-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.ab-diff-node h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 8px; }
.ab-diff-node p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 0; }

.ab-who-band {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
  background: var(--amber-tint); border-radius: 24px; padding: 44px 48px;
}
@media (max-width: 760px) { .ab-who-band { grid-template-columns: 1fr; padding: 32px 26px; } }
.ab-who-ico {
  width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,0.6); color: var(--amber);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.ab-who-copy h2 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(22px,2.4vw,26px); margin: 0 0 12px; }
.ab-who-copy p { font-size: 14.5px; line-height: 1.65; color: var(--ink); opacity: 0.85; margin: 0; }
.ab-who-band .mkt-checklist li { font-size: 14px; }

/* ---------- FAQ page ---------- */
.fq-search { position: relative; max-width: 440px; margin-top: 26px; }
.fq-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.fq-search input {
  width: 100%; box-sizing: border-box; padding: 14px 16px 14px 46px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface); font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 14px; color: var(--ink);
  box-shadow: 0 10px 24px rgba(42,35,80,0.06);
}
.fq-search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }

.fq-hero-art { position: relative; height: 300px; }
.fq-bubble-main {
  position: absolute; right: 40px; top: 30px; width: 210px; height: 140px; background: var(--violet); color: #fff;
  border-radius: 30px 30px 30px 6px; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: 0.03em;
  box-shadow: 0 26px 50px rgba(42,35,80,0.22);
}
.fq-bubble-q {
  position: absolute; left: 30px; top: 0; width: 76px; height: 56px; background: var(--good-bg); color: var(--good);
  border-radius: 18px 18px 18px 4px; display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 22px; box-shadow: 0 14px 28px rgba(42,35,80,0.1);
}
.fq-bubble-dots {
  position: absolute; right: 0; bottom: 20px; width: 68px; height: 46px; background: var(--amber-tint); color: var(--amber);
  border-radius: 16px 16px 4px 16px; display: flex; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 14px 28px rgba(42,35,80,0.1);
}
.fq-bubble-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.fq-spark { position: absolute; color: var(--violet); opacity: 0.4; font-size: 18px; }
.fq-spark-1 { left: 5px; top: 90px; } .fq-spark-2 { right: 175px; top: 5px; font-size: 12px; } .fq-spark-3 { left: 60px; bottom: 10px; font-size: 13px; }
@media (max-width: 900px) { .fq-hero-art { display: none; } }

.fq-topic-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 1000px) { .fq-topic-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .fq-topic-grid { grid-template-columns: repeat(2, 1fr); } }
.fq-topic-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px 14px; text-align: center; }
.fq-topic-card:hover { border-color: var(--violet); }
.fq-topic-ico { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.fq-topic-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; margin: 0 0 6px; }
.fq-topic-card p { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.4; }

.fq-allq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.fq-allq-head h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 22px; }
.fq-expand-all { display: inline-flex; align-items: center; gap: 6px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; color: var(--violet); cursor: pointer; }

.fq-help-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--violet-tint); border-radius: 20px; padding: 30px 36px;
}
.fq-help-left { display: flex; align-items: center; gap: 16px; }
.fq-help-ico {
  width: 54px; height: 54px; border-radius: 50%; background: var(--surface); color: var(--violet);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 10px 22px rgba(42,35,80,0.1);
}
.fq-help-actions { display: flex; gap: 10px; }
.fq-help-actions .mkt-btn-outline, .fq-help-actions .mkt-btn-primary { padding: 12px 20px; font-size: 14px; }
/* Below ~560px there isn't room for the icon+text block and both nowrap
   buttons on one row - stack everything and let the buttons take the full
   width instead of squeezing (which used to wrap "Contact us" onto 2 lines). */
@media (max-width: 560px) {
  .fq-help-band { flex-direction: column; align-items: stretch; padding: 26px 22px; }
  .fq-help-actions { flex-direction: column; }
  .fq-help-actions .mkt-btn-outline, .fq-help-actions .mkt-btn-primary { justify-content: center; width: 100%; }
}

/* ---------- resources & advice page ---------- */
.res-hero-art { position: relative; height: 300px; }
@media (max-width: 900px) { .res-hero-art { display: none; } }

.res-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; }
@media (max-width: 1000px) { .res-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .res-cat-grid { grid-template-columns: repeat(2, 1fr); } }
.res-cat-card { text-align: center; padding: 10px 6px; }
.res-cat-ico { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.res-cat-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; margin: 0 0 5px; }
.res-cat-card p { font-size: 11px; color: var(--muted); line-height: 1.4; margin: 0; }

.res-section-head-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.res-section-head-row h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 22px; margin: 0; }
.res-view-all { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--violet); display: inline-flex; align-items: center; gap: 5px; }

.res-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .res-feat-grid { grid-template-columns: 1fr; } }
.res-feat-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 16px 34px rgba(42,35,80,0.07); transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.res-feat-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(42,35,80,0.12); }
a.res-latest-row:hover { background: var(--surface-2); }
.res-feat-media { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.res-feat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.res-feat-badge {
  position: absolute; top: 14px; left: 14px; z-index: 1; background: rgba(255,255,255,0.9); color: var(--ink);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.res-feat-body { padding: 20px; }
.res-cat-tag { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 0.02em; }
.res-feat-body h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16.5px; margin: 8px 0 8px; line-height: 1.3; }
.res-feat-body p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.res-meta-row { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.res-meta-row span { display: flex; align-items: center; gap: 5px; }
.res-soon { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; color: var(--amber) !important; background: var(--amber-tint); padding: 3px 9px; border-radius: 999px; }

.res-grad-violet { background: linear-gradient(135deg, var(--mkt-navy-light), var(--mkt-navy)); }
.res-grad-good { background: linear-gradient(135deg, #4FBF8B, #1B8F5C); }
.res-grad-cyan { background: linear-gradient(135deg, #4FC3D9, #0E8F82); }
.res-grad-amber { background: linear-gradient(135deg, #F0AE4E, #E39A1F); }
.res-grad-magenta { background: linear-gradient(135deg, #E06B93, #C13268); }

.res-2col { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .res-2col { grid-template-columns: 1fr; } }

.res-latest-list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.res-latest-row { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; border-top: 1px solid var(--line); }
.res-latest-row:first-child { border-top: none; }
.res-latest-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-latest-body { flex: 1; min-width: 0; }
.res-latest-body h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.res-latest-body p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.res-latest-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.res-latest-meta span { display: flex; align-items: center; gap: 4px; }
@media (max-width: 560px) {
  .res-latest-row { flex-direction: column; }
  .res-latest-ico { margin-bottom: 4px; }
  .res-latest-meta { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; margin-top: 4px; }
}

/* Non-JS fallback only (tools/build-directory-fallbacks.js) - real content
   inside a <noscript> block for crawlers that don't execute JavaScript, and
   for the rare genuine no-JS visitor. Browsers with scripting enabled never
   render <noscript> content at all, so this only needs to be readable, not
   pixel-matched to the JS-rendered version above. */
.res-fallback-item { display: block; padding: 14px 0; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.res-fallback-item:first-child { border-top: none; }
.res-fallback-item h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin: 4px 0; }
.res-fallback-item p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 4px; }
.res-fallback-item .res-cat-tag { font-size: 11px; font-weight: 700; color: var(--violet); }
.res-fallback-item > span:last-child { font-size: 11.5px; color: var(--muted); }

.res-side-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin-bottom: 20px; }
.res-side-card h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 4px; color: var(--violet); }
.res-side-card > p { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; }
.res-dl-item { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.res-dl-item:first-of-type { border-top: none; }
.res-dl-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--violet-tint); color: var(--violet); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-dl-body { flex: 1; min-width: 0; }
.res-dl-body strong { display: block; font-size: 13px; font-weight: 700; }
.res-dl-body span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.res-dl-soon { font-size: 9.5px; font-weight: 700; color: var(--muted); background: var(--surface-2); padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.res-dl-action { width: 30px; height: 30px; border-radius: 999px; background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
a.res-dl-item:hover .res-dl-action { background: var(--violet); color: #fff; }
.res-side-note { display: flex; gap: 12px; align-items: flex-start; background: var(--violet-tint); border-radius: 16px; padding: 18px; }
.res-side-note-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--violet); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-side-note h4 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; margin: 0 0 4px; }
.res-side-note p { font-size: 12px; color: var(--ink); opacity: 0.75; margin: 0; line-height: 1.5; }

.res-email-band {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 30px 34px;
}
.res-email-left { display: flex; align-items: center; gap: 16px; max-width: 480px; }
.res-email-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--violet-tint); color: var(--violet); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.res-email-left h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.res-email-left p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.res-email-form { display: flex; flex-direction: column; gap: 6px; }
.res-email-form-row { display: flex; gap: 8px; }
.res-email-form-row input { flex: 1; min-width: 0; box-sizing: border-box; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; width: 220px; }
.res-email-form-row button { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; background: var(--violet); color: #fff; border: none; border-radius: 999px; padding: 12px 22px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 480px) { .res-email-form-row { flex-direction: column; } .res-email-form-row input { width: 100%; } }
.res-email-form small { font-size: 11px; color: var(--muted); text-align: center; }

/* ---------- for-parents: hero highlight row ---------- */
.fp-highlight-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px; }
@media (max-width: 720px) { .fp-highlight-row { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- for-parents: dashboard "Recent Activity" panel rows ---------- */
.mkt-dash-activity-row {
  display: flex; align-items: center; gap: 8px; font-size: 9.5px; font-weight: 600;
  padding: 5px 0; border-top: 1px solid var(--line);
}
.mkt-dash-activity-row:first-of-type { border-top: none; }
.mkt-dash-activity-row .aico {
  width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mkt-dash-activity-row .atxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mkt-dash-activity-row .adate { font-size: 8px; font-weight: 500; color: var(--muted); }
.mkt-dash-activity-row .ascore {
  margin-left: auto; font-size: 8px; font-weight: 700; color: var(--good); background: var(--good-bg);
  padding: 2px 6px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}

/* ---------- for-parents: "know what needs work" example callout ---------- */
.fp-why-list { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.fp-why-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); border-radius: 12px; padding: 12px 14px;
}
.fp-why-row-topic { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; }
.fp-why-row-topic span { display: block; font-family: 'Atkinson Hyperlegible', sans-serif; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 1px; }
.fp-why-tag {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0;
}
.fp-why-tag.needs { color: var(--magenta); background: var(--magenta-tint); }
.fp-why-tag.dev { color: var(--amber); background: var(--amber-tint); }
.fp-instead {
  background: var(--good-bg); border: 1px solid rgba(27,143,92,0.25); border-radius: 12px;
  padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--ink); margin: 0 0 6px;
}
.fp-instead strong { color: var(--good); }

/* ---------- for-parents: light 3-step flow ---------- */
.fp-flow-row { display: flex; align-items: flex-start; justify-content: center; gap: 6px; max-width: 900px; margin: 32px auto 0; flex-wrap: wrap; }
.fp-flow-node { display: flex; flex-direction: column; align-items: center; text-align: center; width: 220px; }
.fp-flow-icon {
  width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.fp-flow-node h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 6px; }
.fp-flow-node p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.fp-flow-arrow { color: var(--line); margin-top: 28px; flex-shrink: 0; }
@media (max-width: 720px) {
  .fp-flow-row { flex-direction: column; align-items: center; }
  .fp-flow-arrow { transform: rotate(90deg); margin: 4px 0; }
}

/* ---------- notice / disclaimer box ---------- */
.mkt-notice {
  display: flex; align-items: flex-start; gap: 12px; background: var(--amber-tint);
  border: 1px solid rgba(227,154,31,0.3); border-radius: 14px; padding: 16px 18px;
}
.mkt-notice svg { color: var(--amber); flex-shrink: 0; margin-top: 1px; }
.mkt-notice p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }

/* ---------- FAQ accordion ---------- */
.mkt-faq { max-width: 760px; margin: 0 auto; }
.mkt-faq-item { border-bottom: 1px solid var(--line); }
.mkt-faq-item summary {
  cursor: pointer; padding: 20px 4px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15.5px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.mkt-faq-item summary::-webkit-details-marker { display: none; }
.mkt-faq-item summary .chev { color: var(--violet); font-size: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.mkt-faq-item[open] summary .chev { transform: rotate(45deg); }
.mkt-faq-item .a { font-size: 14.5px; line-height: 1.65; color: var(--muted); padding: 0 4px 20px; margin: 0; }

/* ---------- final CTA band ---------- */
.mkt-cta-band {
  background: linear-gradient(120deg, var(--mkt-navy), var(--mkt-navy-deep)); border-radius: 28px; padding: 44px 48px;
  position: relative; overflow: hidden; isolation: isolate;
}
.mkt-cta-band::before {
  content:""; position:absolute; top:-70px; right:-60px; width:220px; height:220px; border-radius:50%;
  background: var(--violet); opacity: 0.5; z-index:-1;
}
.mkt-cta-rocket {
  position: absolute; left: 28px; bottom: 18px; width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,0.14); color: #fff; display: flex; align-items: center; justify-content: center;
  transform: rotate(-8deg);
}
.mkt-cta-band-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding-left: 96px;
}
@media (max-width: 720px) { .mkt-cta-band-inner { padding-left: 0; } .mkt-cta-rocket { display: none; } }
.mkt-cta-band h2 {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(22px,2.6vw,28px); color: #fff;
  margin: 0 0 10px; text-wrap: balance;
}
.mkt-cta-band .mkt-cta-band-inner p { color: rgba(255,255,255,0.88); font-size: 15px; margin: 0; max-width: 40ch; }
.mkt-cta-band-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex-shrink: 0; max-width: 100%; }
.mkt-cta-band .mkt-btn-primary { background: #fff; color: var(--violet); white-space: normal; text-align: center; max-width: 100%; }
@media (max-width: 480px) { .mkt-cta-band-actions { flex-shrink: 1; } }
.mkt-cta-band .mkt-btn-primary:hover { background: #FFEDE7; }
.mkt-cta-band-note { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.75); font-size: 12px; margin: 0; }

/* ---------- footer ---------- */
/* Light footer (Sep 2026 rebrand): flipped from a dark-violet band to the
   site's own neutral surface tokens, same reason as the nav — the real
   logo file's navy wordmark needs a light background to read against, and
   we only have the one (non-reversed) logo asset. See DECISIONS.md. */
.mkt-footer { background: var(--surface-2); color: var(--muted); padding: 56px 0 28px; margin-top: 40px; border-top: 1px solid var(--line); }
.mkt-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 32px; margin-bottom: 36px; }
@media (max-width: 900px) { .mkt-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mkt-footer-grid { grid-template-columns: 1fr; } }
.mkt-footer-brand .mkt-logo { margin-bottom: 12px; }
.mkt-footer-brand .mkt-logo-img { height: 66px; }
@media (max-width: 560px) { .mkt-footer-brand .mkt-logo-img { height: 50px; } }
.mkt-footer-brand p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 34ch; }
.mkt-footer-col h4 {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--mkt-navy); margin: 0 0 16px;
}
.mkt-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mkt-footer-col a { font-size: 13.5px; color: var(--muted); }
.mkt-footer-col a:hover { color: var(--violet); }
.mkt-footer-newsletter p { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.mkt-newsletter-form { display: flex; gap: 8px; }
.mkt-newsletter-form input {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; color: var(--ink); font-size: 13px; font-family: 'Atkinson Hyperlegible', sans-serif;
}
.mkt-newsletter-form input::placeholder { color: var(--muted); }
.mkt-newsletter-form button {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; background: var(--violet); color: #fff;
  border: none; border-radius: 10px; padding: 10px 16px; cursor: pointer; white-space: nowrap;
}
.mkt-newsletter-form button:hover { background: var(--mkt-orange-hover); }
.mkt-footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted);
}

/* ============================================================
   Rich product-led components — shared with the homepage's visual
   language (laptop mockup, photo hero, dark gauge/bars composition).
   All prefixed mkt- and use the site's own --violet/--ink/etc tokens
   directly (no separate --hv- style prefix needed here, since these
   live in marketing.css itself rather than a page-scoped <style>).
   ============================================================ */
.mkt-photo-frame { width: 100%; aspect-ratio: 5/4; border-radius: 32px; overflow: hidden; box-shadow: 0 30px 70px rgba(20,12,60,0.22); position: relative; background: linear-gradient(155deg, var(--violet-tint) 0%, var(--bg) 55%, #fff 100%); }
.mkt-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mkt-laptop { width: 100%; max-width: 620px; margin: 0 auto; }
.mkt-laptop-bezel { background: var(--mkt-navy-mid); border-radius: 18px 18px 6px 6px; padding: 14px 14px 10px; box-shadow: 0 30px 70px rgba(20,12,60,0.22); }
.mkt-laptop-cam { width: 6px; height: 6px; border-radius: 50%; background: var(--mkt-navy-light); margin: 0 auto 10px; }
.mkt-laptop-screen { background: #fff; border-radius: 9px; overflow: hidden; display: flex; min-height: 300px; }
.mkt-laptop-side { width: 120px; background: var(--ink); padding: 16px 10px; flex-shrink: 0; }
.mkt-laptop-side-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.5); font-size: 10.5px; font-weight: 700; padding: 8px 8px; border-radius: 8px; margin-bottom: 3px; }
.mkt-laptop-side-item.active { background: rgba(255,255,255,0.12); color: #fff; }
.mkt-laptop-main { flex: 1; padding: 18px 20px; min-width: 0; }
.mkt-laptop-main-h { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink); margin: 0 0 2px; }
.mkt-laptop-main-sub { font-size: 11px; color: var(--muted); margin: 0 0 14px; }
.mkt-laptop-base { height: 12px; background: linear-gradient(180deg,var(--mkt-navy-mid),var(--mkt-navy-deep)); border-radius: 0 0 10px 10px; margin: 0 -6px; position: relative; }
.mkt-laptop-base::after { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 60px; height: 5px; background: var(--mkt-navy-deep); border-radius: 0 0 6px 6px; }
@media (max-width: 640px) { .mkt-laptop-side { width: 88px; } .mkt-laptop-side-item { font-size: 9.5px; } }

.mkt-qrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.mkt-qrow:first-of-type { border-top: none; }
.mkt-qrow .qdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mkt-qrow .qname { flex: 1; font-size: 12.5px; font-weight: 700; color: var(--ink); min-width: 0; }
.mkt-qrow .qtag { font-size: 9.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.mkt-qrow .qtag.needs { background: var(--magenta-tint); color: var(--magenta); }
.mkt-qrow .qtag.dev { background: var(--amber-tint); color: var(--amber); }
.mkt-qrow .qtag.good { background: var(--good-bg); color: var(--good); }

.mkt-timeline { position: relative; display: flex; flex-direction: column; gap: 0; }
.mkt-timeline::before { content: ""; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.mkt-tstep { position: relative; display: flex; gap: 20px; padding: 16px 0; }
.mkt-tnum { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid var(--violet); color: var(--violet); font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mkt-tstep h4 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16.5px; color: var(--ink); margin: 0 0 4px; }
.mkt-tstep p { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; }

.mkt-rich-card { display: flex; flex-direction: column; gap: 12px; background: #fff; border-radius: 22px; padding: 26px 24px; box-shadow: 0 20px 50px rgba(30,20,70,0.12); border: 1px solid var(--line); }
.mkt-rich-card .r-ico { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mkt-rich-card h3 { font-size: 16px; font-weight: 700; font-family: 'Inter', sans-serif; margin: 0; }
.mkt-rich-card p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }

.mkt-dark-band { background: var(--mkt-navy-deep); position: relative; overflow: hidden; padding: 88px 0; border-radius: 32px; }
.mkt-dark-glow { position: absolute; top: -160px; left: 8%; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(253,94,59,0.30), rgba(253,94,59,0) 65%); pointer-events: none; }
.mkt-dark-band h2 { color: #fff; }
.mkt-dark-band .mkt-section-eyebrow { color: var(--violet); }
.mkt-dark-band > .mkt-wrap > p { color: rgba(255,255,255,0.72); }

.mkt-gauge-card { position: relative; width: 260px; background: #fff; border-radius: 22px; box-shadow: 0 30px 70px rgba(20,12,60,0.22); padding: 22px 22px 20px; z-index: 1; }
.mkt-gauge-ring { width: 118px; height: 118px; border-radius: 50%; margin: 0 auto 12px; background: conic-gradient(var(--violet) 0% 68%, var(--line) 68% 100%); display: flex; align-items: center; justify-content: center; }
.mkt-gauge-ring-inner { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 24px; color: var(--ink); }
.mkt-gauge-sub { text-align: center; font-size: 11.5px; color: var(--muted); font-weight: 700; }
.mkt-gauge-sub strong { color: var(--good); font-weight: 800; }

.mkt-bars-card { position: relative; width: 250px; background: #fff; border-radius: 20px; box-shadow: 0 30px 70px rgba(20,12,60,0.22); padding: 20px 21px; z-index: 2; }
.mkt-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.mkt-bar-row:last-child { margin-bottom: 0; }
.mkt-bar-row span:first-child { font-size: 11.5px; font-weight: 700; color: var(--ink); width: 82px; flex-shrink: 0; }
.mkt-bar-track { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.mkt-bar-fill { height: 100%; border-radius: 999px; background: var(--violet); }
.mkt-bar-row span:last-child { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 700; color: var(--muted); width: 26px; text-align: right; flex-shrink: 0; }

.mkt-dark-visual-stack { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; justify-content: center; }

.mkt-mini-icon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mkt-mini-icon { display: flex; align-items: flex-start; gap: 10px; }
.mkt-mini-icon .m-ico { width: 34px; height: 34px; border-radius: 11px; background: var(--violet-tint); color: var(--violet); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mkt-mini-icon strong { display: block; font-size: 13px; color: var(--ink); font-family: 'Inter', sans-serif; }
.mkt-mini-icon span { font-size: 11.5px; color: var(--muted); }

/* ---------- policy/legal pages (privacy, terms, refunds, accessibility, cookies) ---------- */
.policy-hero { padding: 44px 0 8px; }
.policy-hero h1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(30px, 3.6vw, 42px); margin: 0 0 10px; }
.policy-hero .lede { font-size: 16.5px; color: var(--muted); margin: 0 0 14px; max-width: 62ch; }
.policy-caption { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--muted); margin: 0; }
/* Draft-status banner: every policy page is built from a launch-draft pack
   with bracketed placeholders still to fill in (real legal name, address,
   provider list, retention periods, etc.) - see DECISIONS.md. Keep this
   until every [PLACEHOLDER] below is replaced with real, confirmed detail
   and the pages have had a solicitor review, per the source pack's own
   "Important legal note". */
.policy-banner {
  display: flex; gap: 14px; align-items: flex-start; background: var(--amber-tint); border: 1px solid var(--amber);
  border-radius: 16px; padding: 18px 20px; margin: 28px 0 8px;
}
.policy-banner svg { color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.policy-banner strong { display: block; color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.policy-banner p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.policy-toc { background: var(--surface-2); border-radius: 16px; padding: 20px 22px; margin: 32px 0; }
.policy-toc strong { display: block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 12px; }
.policy-toc ol { columns: 2; column-gap: 28px; margin: 0; padding: 0 0 0 18px; }
@media (max-width: 640px) { .policy-toc ol { columns: 1; } }
.policy-toc li { font-size: 14px; margin-bottom: 8px; break-inside: avoid; }
.policy-toc a { color: var(--ink); }
.policy-toc a:hover { color: var(--violet); text-decoration: underline; }
.policy-body { padding: 8px 0 72px; }
.policy-body h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 21px; margin: 44px 0 14px; scroll-margin-top: 90px; }
.policy-body h2:first-child { margin-top: 0; }
.policy-body p { font-size: 15.5px; line-height: 1.7; color: var(--ink); margin: 0 0 16px; }
.policy-body ul, .policy-body ol { margin: 0 0 16px; padding-left: 22px; }
.policy-body li { font-size: 15.5px; line-height: 1.65; color: var(--ink); margin-bottom: 8px; }
.policy-body strong { font-weight: 700; }
.policy-note { background: var(--surface-2); border-left: 3px solid var(--violet); border-radius: 0 12px 12px 0; padding: 16px 20px; margin: 0 0 20px; }
.policy-note p { margin: 0; font-size: 14.5px; }
.policy-note p:not(:last-child) { margin-bottom: 10px; }
/* [PLACEHOLDER TEXT] styling - flags a bracketed field from the source
   pack that still needs a real value before this page can go live. */
.policy-todo {
  background: var(--amber-tint); color: #7A5109; border-radius: 6px; padding: 1px 7px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.88em; font-weight: 600; white-space: normal;
}
.policy-table-wrap { overflow-x: auto; margin: 0 0 24px; border: 1px solid var(--line); border-radius: 14px; }
.policy-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.policy-table th { text-align: left; background: var(--surface-2); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; color: var(--ink); padding: 12px 16px; border-bottom: 1px solid var(--line); }
.policy-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--ink); line-height: 1.55; vertical-align: top; }
.policy-table tr:last-child td { border-bottom: none; }
.policy-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mkt-footer-legal { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.mkt-footer-legal a { font-size: 12.5px; color: var(--muted); }
.mkt-footer-legal a:hover { color: var(--violet); }

/* ---------- Resource Hub: article/blog-post template ---------- */
.article-hero { padding: 40px 0 0; }
.article-crumb { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.article-crumb a { color: var(--muted); }
.article-crumb a:hover { color: var(--violet); }
.article-eyebrow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.article-cat-tag { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.article-meta-bit { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; }
.article-hero h1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 14px; text-wrap: balance; }
.article-hero .lede { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 68ch; margin: 0 0 30px; }
.article-hero-img-wrap { border-radius: 22px; overflow: hidden; box-shadow: var(--mkt-shadow, 0 30px 60px rgba(30,20,70,0.14)); margin: 0 0 8px; }
.article-hero-img-wrap img { width: 100%; height: auto; display: block; aspect-ratio: 3/2; object-fit: cover; object-position: right center; }
.article-body { max-width: 720px; margin: 44px auto 0; padding: 0 24px 72px; }
.article-body h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 24px; margin: 48px 0 16px; scroll-margin-top: 90px; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px; margin: 28px 0 10px; }
.article-body p { font-size: 16.5px; line-height: 1.75; color: var(--ink); margin: 0 0 18px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body li { font-size: 16.5px; line-height: 1.65; color: var(--ink); margin-bottom: 9px; }
.article-body strong { font-weight: 700; }
.article-body img { width: 100%; height: auto; border-radius: 18px; margin: 8px 0 28px; display: block; }
.article-tip {
  display: flex; gap: 14px; align-items: flex-start; background: var(--good-bg); border-radius: 16px;
  padding: 18px 20px; margin: 0 0 24px;
}
.article-tip svg { color: var(--good); flex-shrink: 0; margin-top: 2px; }
.article-tip strong { display: block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--good); margin-bottom: 5px; }
.article-tip p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
/* Informational note - general support/disclaimer callouts. Deliberately a
   neutral outlined style (not a filled colour) so it reads distinctly from
   .article-tip (filled green), .article-alert (filled red) and .article-cta
   (navy/orange) - cyan and good/green are too close in hue to use here
   without the note looking like just another "tip". See the source content
   pack's "keep visually distinct" instruction. */
.article-note {
  display: flex; gap: 14px; align-items: flex-start; background: var(--surface-2);
  border-left: 3px solid var(--amber); border-radius: 0 16px 16px 0;
  padding: 18px 20px; margin: 0 0 24px;
}
.article-note svg { color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.article-note strong { display: block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); margin-bottom: 5px; }
.article-note p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.article-note p + p { margin-top: 8px; }
/* Urgent/crisis callout - reserved for genuine "call 999 / go to A&E" type
   guidance, one level more visually serious than .article-note. */
.article-alert {
  display: flex; gap: 14px; align-items: flex-start; background: var(--bad-bg); border: 1px solid var(--bad);
  border-radius: 16px; padding: 18px 20px; margin: 0 0 24px;
}
.article-alert svg { color: var(--bad); flex-shrink: 0; margin-top: 2px; }
.article-alert strong { display: block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bad); margin-bottom: 5px; }
.article-alert p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.article-cta { margin: 40px 0; }
.article-disclaimer { font-size: 13.5px; color: var(--muted); font-style: italic; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 40px; }
.article-share-row { display: flex; align-items: center; gap: 14px; margin: 0 0 44px; }
.article-share-row span { font-size: 13px; font-weight: 700; color: var(--muted); }
/* Honest "photo not supplied yet" placeholder - used instead of a fake or
   missing image where a real supplied photo is pending (same no-fabrication
   principle as the "Coming soon" badges elsewhere on the site). Content
   authors/editors get exact filename, alt text and placement notes to hand
   to a photographer or stock source; visitors get an honest empty state
   instead of a broken-looking gap. Remove this block and drop in a real
   <img> (matching the other article images' markup) once a photo exists. */
.article-img-slot {
  border: 2px dashed var(--line); border-radius: 18px; background: var(--surface-2);
  padding: 28px 24px; margin: 8px 0 28px; text-align: center;
}
.article-img-slot svg { color: var(--muted-2); margin-bottom: 10px; }
.article-img-slot strong { display: block; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin-bottom: 8px; }
.article-img-slot p { margin: 0 auto; font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 46ch; }
.article-img-slot code { font-family: 'IBM Plex Mono', monospace; font-size: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.article-table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 15px; }
.article-table th, .article-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); line-height: 1.5; }
.article-table th { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--surface-2); }
.article-table td { color: var(--ink); }
.article-table tr:last-child td { border-bottom: none; }

/* ============================================================
   SEAG Tutor Directory (seag-tutors/) - reuses existing tokens/
   patterns (.fq-search, .res-cat-card, .mkt-faq-item, .mkt-btn-outline)
   rather than introducing a new visual language.
   ============================================================ */
.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;
}

.td-search { position: relative; max-width: 480px; margin-top: 22px; }
.td-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.td-search input {
  width: 100%; padding: 13px 16px 13px 44px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 14.5px; color: var(--ink);
}
.td-search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }

/* Quick location links */
.td-loc-row { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 0; }
.td-loc-pill {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
}
.td-loc-pill:hover { border-color: var(--violet); color: var(--violet); }

/* Filter bar */
.td-filter-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin: 28px 0 0;
}
.td-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; flex: 1 1 160px; }
.td-filter-field label { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; color: var(--muted); }
.td-filter-field select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  font-family: 'Atkinson Hyperlegible', sans-serif; font-size: 14px; color: var(--ink); min-height: 44px;
}
.td-filter-field select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }

.td-more-toggle {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; color: var(--violet); background: none;
  border: none; cursor: pointer; padding: 10px 4px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
}
.td-more-panel {
  flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
  border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px;
}
.td-more-panel[hidden] { display: none; }
.td-more-group { display: flex; flex-direction: column; gap: 8px; }
.td-more-group h4 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.td-more-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); min-height: 28px; }
.td-more-check input { width: 17px; height: 17px; accent-color: var(--violet); flex-shrink: 0; }

.td-mobile-filters-btn {
  display: none; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13.5px; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  cursor: pointer; margin-top: 16px; min-height: 44px;
}
.td-mobile-filters-btn .td-mobile-count {
  background: var(--violet); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px;
}
@media (max-width: 760px) {
  .td-filter-bar[hidden] { display: none; }
  .td-filter-bar { flex-direction: column; align-items: stretch; }
  .td-mobile-filters-btn { display: inline-flex; }
}

/* Active filter chips */
.td-active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; }
.td-filter-chip {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px; color: var(--violet); background: var(--violet-tint);
  border: none; border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.td-clear-all { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 6px 4px; }

/* Results head */
.td-results-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 18px; flex-wrap: wrap; }
.td-results-head h2 { margin: 0; }
#tdResultCount { font-size: 14px; color: var(--muted); font-weight: 600; }

/* Results grid */
.td-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) { .td-results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .td-results-grid { grid-template-columns: 1fr; } }

/* Card */
.td-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 18px;
  box-shadow: 0 12px 28px rgba(42,35,80,0.06); display: flex; flex-direction: column; gap: 10px;
}
.td-type-tag {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--violet); background: var(--violet-tint); border-radius: 999px; padding: 4px 10px; display: inline-block; width: fit-content;
}
.td-card-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 17px; margin: 8px 0 2px; color: var(--ink); }
.td-card-area { font-size: 13px; color: var(--muted); margin: 0; font-weight: 600; }
.td-card-desc { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 4px 0 0; }
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.td-chip {
  font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 4px 10px;
}
.td-card-covered { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }
.td-card-covered strong { color: var(--ink); }
.td-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.td-card-actions .mkt-btn-outline, .td-card-actions .td-details-btn {
  font-size: 13px; padding: 9px 16px; min-height: 40px;
}
.td-details-btn {
  font-family: 'Inter', sans-serif; font-weight: 700; color: var(--ink); background: var(--surface-2); border: none;
  border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.td-details-btn svg { transition: transform 0.15s ease; }
@media (prefers-reduced-motion: reduce) { .td-details-btn svg { transition: none; } }
.td-card-no-contact { font-size: 12.5px; color: var(--muted); font-style: italic; }
.td-card-actions .mkt-btn-primary { font-size: 13px; padding: 9px 18px; min-height: 40px; }

/* Featured listing - a real editorial/commercial choice (data/tutors/
   tutors.js's `featured: true`), spans the full grid width (1 / -1 rather
   than a fixed span count, so it stays full-width whether the grid is
   currently 3, 2 or 1 columns wide) and is always pinned first among the
   results (see js/tutor-directory.js's render()), rather than sitting
   wherever normal relevance sorting would place it. */
.td-card.td-card-featured {
  grid-column: 1 / -1;
  position: relative;
  border: 2px solid var(--violet);
  box-shadow: 0 20px 44px rgba(42,35,80,0.14);
  padding-top: 30px;
}
.td-recommended-badge {
  position: absolute; top: -13px; left: 22px; background: var(--violet); color: #fff;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; box-shadow: 0 6px 16px rgba(106,84,214,0.35);
}
.td-featured-grid { display: flex; align-items: center; gap: 36px; }
.td-featured-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.td-featured-logo {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 14px;
  background: #fef8eb; border-radius: 16px;
}
.td-featured-logo img { width: 190px; height: 190px; object-fit: contain; border-radius: 8px; }
@media (max-width: 640px) {
  .td-featured-grid { flex-direction: column-reverse; }
  .td-featured-logo img { width: 130px; height: 130px; }
}

/* Expanded details */
.td-details { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; }
.td-detail-desc { font-size: 13.5px; line-height: 1.65; color: var(--ink); margin: 0 0 14px; }
.td-detail-row { display: flex; gap: 8px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--surface-2); }
.td-detail-label { flex: 0 0 130px; font-weight: 700; color: var(--muted); font-family: 'Inter', sans-serif; font-size: 12px; }
.td-detail-value { color: var(--ink); word-break: break-word; }
.td-detail-value a { color: var(--violet); font-weight: 600; }
.td-suggest-update { margin: 14px 0 0; font-size: 12.5px; }
.td-suggest-update a { color: var(--violet); font-weight: 700; }

/* Empty state */
.td-empty {
  grid-column: 1 / -1; text-align: center; background: var(--surface-2); border-radius: 18px; padding: 40px 24px;
}
.td-empty h3 { margin: 0 0 8px; }
.td-empty p { max-width: 440px; margin: 0 auto 20px; color: var(--muted); font-size: 14.5px; }
.td-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Guide / questions / cost / FAQ / disclaimer sections reuse .mkt-section,
   .mkt-section-head, .mkt-faq-item and the .article-* list/table patterns
   already defined above - no new component classes needed there. */
.td-guide-list, .td-questions-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.td-guide-list li, .td-questions-list li {
  display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.55; color: var(--ink);
}
.td-questions-list li { counter-increment: td-q; }
.td-questions-list { counter-reset: td-q; }
.td-questions-list li::before {
  content: counter(td-q); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--violet-tint);
  color: var(--violet); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12.5px; display: flex; align-items: center; justify-content: center;
}
.td-guide-list li svg { flex-shrink: 0; color: var(--violet); margin-top: 2px; }

.td-disclaimer {
  background: var(--surface-2); border-radius: 16px; padding: 22px 24px; font-size: 13.5px; line-height: 1.65; color: var(--muted);
}
.td-disclaimer strong { color: var(--ink); }
@media (max-width: 640px) { .article-body { padding: 0 20px 56px; } .article-table { display: block; overflow-x: auto; } }

/* ============================================================
   Ask Tutor interactive demo (for-parents/) - the phone's inner
   content deliberately reuses css/styles.css's real .qcard/
   .choice-row/.tutor-* classes verbatim for pixel-faithfulness to
   the actual app; everything below is only the frame/chrome around
   it, using marketing.css's own tokens like the rest of this page.
   ============================================================ */
.atd-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px;
  grid-template-areas: "intro media" "steps media";
  align-items: start;
}
.atd-intro { grid-area: intro; }
.atd-media { grid-area: media; position: sticky; top: 110px; }
.atd-steps { grid-area: steps; }
@media (max-width: 900px) {
  .atd-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "media" "steps"; gap: 32px; }
  .atd-media { position: static; }
}

.atd-intro h2 { margin: 8px 0 12px; }
.atd-intro-copy { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0; }

/* CSS-only phone frame - no photographic mockup. */
.atd-phone {
  max-width: 340px; margin: 0 auto; border-radius: 38px; background: var(--mkt-navy);
  padding: 14px 10px; box-shadow: 0 30px 60px rgba(1,35,79,0.22), 0 0 0 1px rgba(1,35,79,0.06),
    0 0 46px rgba(253,94,59,0.14);
}
.atd-phone-notch {
  width: 90px; height: 20px; background: var(--mkt-navy); border-radius: 0 0 14px 14px; margin: 0 auto 8px;
  position: relative; z-index: 1;
}
.atd-phone-viewport {
  position: relative; background: var(--bg); border-radius: 26px; overflow-y: auto; overflow-x: hidden;
  height: 460px; padding: 18px 14px 22px; scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { .atd-phone-viewport { scroll-behavior: auto; } }
/* The phone reuses the app's real .qcard styling, but it's sitting inside a
   frame rather than the app's own page background - drop the card's own
   outer shadow so it doesn't double up with the frame's. */
.atd-phone-viewport .qcard { box-shadow: none; padding: 4px 2px; margin-bottom: 0; }
.atd-phone-viewport .choice-row { cursor: default; }

.atd-tap-dot {
  position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin-left: -15px; margin-top: -15px;
  border-radius: 50%; background: rgba(253,94,59,0.22); border: 2px solid var(--violet);
  pointer-events: none; z-index: 5; transition: transform 0.55s cubic-bezier(0.22,0.61,0.36,1);
}
.atd-tap-dot-click { animation: atd-tap-pulse 0.4s ease-out; }
@keyframes atd-tap-pulse { 0% { box-shadow: 0 0 0 0 rgba(253,94,59,0.45); } 100% { box-shadow: 0 0 0 14px rgba(253,94,59,0); } }
@media (prefers-reduced-motion: reduce) {
  .atd-tap-dot { transition: none; }
  .atd-tap-dot-click { animation: none; }
}

/* "Stuck, considering an option" - a soft highlight, not a fake click. */
.atd-phone-viewport .choice-row.atd-hover { background: var(--violet-tint); box-shadow: inset 0 0 0 2px var(--violet); }

/* Subtle emphasis on the Ask Tutor button before the simulated tap "clicks"
   it - restrained per the brief (no bounce/zoom), a soft glow ring only. */
.tutor-btn.atd-pulse { animation: atd-glow 1.1s ease-in-out infinite; }
@keyframes atd-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253,94,59,0.35); }
  50% { box-shadow: 0 0 0 7px rgba(253,94,59,0); }
}
@media (prefers-reduced-motion: reduce) { .tutor-btn.atd-pulse { animation: none; box-shadow: 0 0 0 3px rgba(253,94,59,0.35); } }

.atd-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.atd-controls button { font-size: 13.5px; padding: 9px 18px; }

.atd-step-list { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: atd-step; display: flex; flex-direction: column; gap: 4px; }
.atd-step-list li {
  counter-increment: atd-step; position: relative; padding: 12px 0 12px 40px; border-left: 2px solid var(--line);
  margin-left: 15px; transition: border-color 0.2s ease;
}
.atd-step-list li:last-child { border-left-color: transparent; }
.atd-step-list li::before {
  content: counter(atd-step); position: absolute; left: -15px; top: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); color: var(--muted); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease;
}
.atd-step-list li.atd-step-done::before { background: var(--good-bg); color: var(--good); }
.atd-step-list li.atd-step-active { border-left-color: var(--violet); }
.atd-step-list li.atd-step-active::before { background: var(--violet); color: #fff; }
.atd-step-list h3 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; margin: 0 0 3px; color: var(--ink); }
.atd-step-list p { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.atd-step-list p strong { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .atd-step-list li, .atd-step-list li::before { transition: none; }
}

.atd-support {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.atd-support h3 { margin: 0 0 8px; font-size: 16px; }
.atd-support p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.atd-support.atd-support-active { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-tint); }
@media (prefers-reduced-motion: reduce) { .atd-support { transition: none; } }