/* ============================================================
   SignPrep — landing page styles
   Brand: teal → sky-blue gradient from app icon. iOS card aesthetic.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);

  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;
  --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --radius-md: .625rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-full: 9999px;
  --transition: 200ms cubic-bezier(.16,1,.3,1);

  --font-display: 'Cabinet Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body: 'General Sans','Helvetica Neue',system-ui,sans-serif;

  /* brand */
  --grad-teal: #5FD3C4;
  --grad-blue: #4AB6E8;
  --brand-gradient: linear-gradient(135deg, #5FD3C4 0%, #4AB6E8 100%);

  --content-wide: 1140px;
}

/* Light */
:root, [data-theme="light"] {
  --color-bg: #f4f8fb;
  --color-surface: #ffffff;
  --color-surface-2: #eef4f8;
  --color-border: #dde7ee;
  --color-text: #14222b;
  --color-text-muted: #5a6b76;
  --color-text-faint: #647079;
  --color-text-inverse: #ffffff;
  --color-primary: #1597b8;
  --color-primary-hover: #0f7c98;
  --c-teal: #119a8f;
  --c-blue: #1f86c4;
  --c-orange: #d4711a;
  --c-purple: #8a4bd1;
  --shadow-sm: 0 1px 2px rgba(20,40,55,.06);
  --shadow-md: 0 8px 24px rgba(20,50,70,.10);
  --shadow-lg: 0 24px 60px rgba(20,50,70,.16);
  --hero-tint: rgba(95,211,196,.16);
}

/* Dark */
[data-theme="dark"] {
  --color-bg: #0c1418;
  --color-surface: #141e24;
  --color-surface-2: #1a262d;
  --color-border: #25343d;
  --color-text: #e6eef2;
  --color-text-muted: #9bacb6;
  --color-text-faint: #82929c;
  --color-text-inverse: #0c1418;
  --color-primary: #5dc6e0;
  --color-primary-hover: #7ad2e8;
  --c-teal: #5fd3c4;
  --c-blue: #5db8ec;
  --c-orange: #f0a347;
  --c-purple: #b285e8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --hero-tint: rgba(74,182,232,.12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#0c1418; --color-surface:#141e24; --color-surface-2:#1a262d; --color-border:#25343d;
    --color-text:#e6eef2; --color-text-muted:#9bacb6; --color-text-faint:#82929c; --color-text-inverse:#0c1418;
    --color-primary:#5dc6e0; --color-primary-hover:#7ad2e8;
    --c-teal:#5fd3c4; --c-blue:#5db8ec; --c-orange:#f0a347; --c-purple:#b285e8;
    --hero-tint: rgba(74,182,232,.12);
  }
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; scroll-behavior:smooth; scroll-padding-top:84px; }
body { min-height:100dvh; line-height:1.6; font-family:var(--font-body); font-size:var(--text-base); color:var(--color-text); background:var(--color-bg); }
img,video { display:block; max-width:100%; height:auto; }
svg { display:block; }
svg:not([width]):not([height]) { width:1em; height:1em; }
[hidden] { display:none !important; }
ul[role="list"] { list-style:none; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { text-wrap:balance; line-height:1.12; font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; }
p { text-wrap:pretty; }
button { cursor:pointer; background:none; border:none; color:inherit; font:inherit; }
::selection { background:rgba(74,182,232,.28); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:6px; }

.container { width:100%; max-width:var(--content-wide); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem); }

.skip-link { position:absolute; left:-999px; top:0; z-index:200; background:var(--color-primary); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

a,button,.btn,summary { transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }

.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; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px; font-weight:600; border-radius:var(--radius-full); padding:.7rem 1.3rem; font-size:var(--text-sm); }
.btn-sm { padding:.5rem 1.05rem; }
.btn-primary { background:var(--brand-gradient); color:#08323c; box-shadow:var(--shadow-sm); }
.btn-primary:hover { filter:brightness(1.04); transform:translateY(-1px); box-shadow:var(--shadow-md); }

/* Official Apple App Store badge — theme-aware (black in light, white in dark) */
.appstore-badge { display:inline-block; line-height:0; border-radius:10px; transition:transform var(--transition); }
.appstore-badge:hover { transform:translateY(-2px); }
.appstore-badge img.badge-light,
.appstore-badge img.badge-dark { width:200px; height:auto; vertical-align:middle; object-fit:contain; }
/* Light mode (default): show black badge, hide white */
.appstore-badge img.badge-light { display:block !important; }
.appstore-badge img.badge-dark { display:none !important; }
/* Dark mode: show white badge, hide black */
[data-theme="dark"] .appstore-badge img.badge-light { display:none !important; }
[data-theme="dark"] .appstore-badge img.badge-dark { display:block !important; }
/* On the coloured gradient CTA, always use the white (dark) badge for contrast, in both themes */
.appstore-badge.on-gradient img.badge-light,
[data-theme="dark"] .appstore-badge.on-gradient img.badge-light { display:none !important; }
.appstore-badge.on-gradient img.badge-dark,
[data-theme="dark"] .appstore-badge.on-gradient img.badge-dark { display:block !important; }

/* App icon — theme-aware (light/gradient icon in light mode, dark icon in dark mode) */
.app-icon { display:inline-block; line-height:0; position:relative; }
.app-icon img.icon-light,
.app-icon img.icon-dark { width:100%; height:100%; object-fit:contain; }
.app-icon img.icon-light { display:block !important; }
.app-icon img.icon-dark { display:none !important; }
[data-theme="dark"] .app-icon img.icon-light { display:none !important; }
[data-theme="dark"] .app-icon img.icon-dark { display:block !important; }
/* On the coloured gradient CTA, always use the light/gradient icon in both themes */
.app-icon.on-gradient img.icon-light,
[data-theme="dark"] .app-icon.on-gradient img.icon-light { display:block !important; }
.app-icon.on-gradient img.icon-dark,
[data-theme="dark"] .app-icon.on-gradient img.icon-dark { display:none !important; }

.icon-btn { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-full); color:var(--color-text); border:1px solid var(--color-border); background:var(--color-surface); }
.icon-btn:hover { background:var(--color-surface-2); }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; backdrop-filter:blur(14px); background:color-mix(in oklab, var(--color-bg) 82%, transparent); border-bottom:1px solid var(--color-border); }
.header-inner { display:flex; align-items:center; gap:1rem; height:64px; }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.15rem; }
.brand-icon { width:36px; height:36px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
.site-nav { display:flex; gap:1.6rem; margin-left:auto; font-size:var(--text-sm); font-weight:500; color:var(--color-text-muted); }
.site-nav a:hover { color:var(--color-text); }
.header-actions { display:flex; align-items:center; gap:.6rem; margin-left:1.4rem; }
.nav-toggle { display:none; }
.nav-toggle .nav-ico-close { display:none; }
.nav-toggle[aria-expanded="true"] .nav-ico-open { display:none; }
.nav-toggle[aria-expanded="true"] .nav-ico-close { display:block; }

@media (max-width: 760px) {
  .header-actions { margin-left:auto; }
  .nav-toggle { display:inline-grid; }
  /* Mobile dropdown panel */
  .site-nav {
    position:absolute; left:0; right:0; top:64px;
    flex-direction:column; gap:0; margin:0;
    background:var(--color-surface); border-bottom:1px solid var(--color-border);
    box-shadow:var(--shadow-md);
    padding:.4rem 0;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .site-nav[data-open="true"] { transform:translateY(0); opacity:1; visibility:visible; }
  .site-nav a {
    display:block; padding:.9rem clamp(1.25rem,4vw,2.5rem);
    font-size:var(--text-base); color:var(--color-text);
    border-bottom:1px solid var(--color-border);
  }
  .site-nav a:last-child { border-bottom:0; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { background:var(--color-surface-2); }
}

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,5.5rem); }
.hero-bg { position:absolute; inset:0; z-index:0; background:
  radial-gradient(900px 500px at 78% -10%, var(--hero-tint), transparent 60%),
  radial-gradient(700px 480px at -5% 20%, rgba(74,182,232,.10), transparent 60%); pointer-events:none; }
.hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-icon { width:92px; height:92px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.22)); margin-bottom:1.4rem; }
.hero-title { font-size:var(--text-2xl); font-weight:800; letter-spacing:-.025em; }
.hero-sub { margin-top:1.1rem; font-size:var(--text-lg); color:var(--color-text-muted); max-width:30ch; line-height:1.5; }
.hero-sub strong { color:var(--color-text); }
.hero-cta { margin-top:1.8rem; display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.hero-meta { font-size:var(--text-xs); color:var(--color-text-faint); }

.hero-visual { display:flex; justify-content:center; }

/* feature device — image already includes its own iPhone frame */
.feature-device { width:clamp(220px,26vw,300px); height:auto; filter:drop-shadow(0 24px 48px rgba(20,50,70,.24)); }
[data-theme="dark"] .feature-device { filter:drop-shadow(0 24px 48px rgba(0,0,0,.55)); }

/* hero device — image already includes its own iPhone frame */
.hero-device { width:clamp(260px,32vw,380px); height:auto; filter:drop-shadow(0 30px 60px rgba(20,50,70,.28)); }
[data-theme="dark"] .hero-device { filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }

@media (max-width: 860px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-icon { margin-inline:auto; }
  .hero-sub { margin-inline:auto; }
  .hero-cta { align-items:center; }
}

/* ---------- Trust strip ---------- */
.trust { border-block:1px solid var(--color-border); background:var(--color-surface); }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.trust-item { display:flex; flex-direction:column; gap:.15rem; padding:1.3rem .5rem; text-align:center; }
.trust-k { font-family:var(--font-display); font-weight:700; font-size:var(--text-base); color:var(--color-text); }
.trust-v { font-size:var(--text-xs); color:var(--color-text-muted); }
@media (max-width: 760px){ .trust-grid{ grid-template-columns:repeat(2,1fr); gap:1rem .5rem; padding-block:1rem; } }

/* ---------- Sections ---------- */
.section { padding-block:clamp(3.5rem,8vw,7rem); }
.eyebrow { font-size:var(--text-sm); font-weight:600; color:var(--color-primary); text-transform:uppercase; letter-spacing:.06em; }
.section-title { font-size:var(--text-xl); margin-top:.5rem; }
.section-lead { margin-top:1rem; font-size:var(--text-lg); color:var(--color-text-muted); max-width:60ch; }
.section-intro { padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.feature-alt { background:var(--color-surface); }

/* ---------- Feature rows ---------- */
.feature { padding-block:clamp(3rem,6vw,5.5rem); }
.feature-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.feature-row.reverse .feature-text { order:2; }
.feature-row.reverse .feature-visual { order:1; }
.feature-visual { display:flex; justify-content:center; }
.feature-text h3 { font-size:var(--text-xl); margin-top:.6rem; }
.feature-text > p { margin-top:1rem; color:var(--color-text-muted); font-size:var(--text-base); max-width:52ch; }
.feature-tag { display:inline-block; font-family:var(--font-display); font-weight:700; font-size:var(--text-sm); letter-spacing:.02em; }
.feature-tag[data-c="teal"]{ color:var(--c-teal); }
.feature-tag[data-c="blue"]{ color:var(--c-blue); }
.feature-tag[data-c="orange"]{ color:var(--c-orange); }
.feature-tag[data-c="purple"]{ color:var(--c-purple); }
.feature-list { margin-top:1.3rem; display:flex; flex-direction:column; gap:.7rem; }
.feature-list li { position:relative; padding-left:1.8rem; font-size:var(--text-sm); color:var(--color-text); }
.feature-list li::before { content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:50%; background:var(--brand-gradient); box-shadow:0 0 0 4px color-mix(in oklab, var(--grad-blue) 18%, transparent); }

@media (max-width: 860px) {
  .feature-row, .feature-row.reverse { grid-template-columns:1fr; gap:2.5rem; }
  .feature-row.reverse .feature-text { order:1; }
  .feature-row.reverse .feature-visual { order:2; }
  .feature-text { text-align:center; }
  .feature-text > p, .feature-list { margin-inline:auto; }
  .feature-list { max-width:34ch; text-align:left; }
}

/* ---------- Card grid ---------- */
.section-grid .card-grid { margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.card { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:1.6rem 1.5rem; box-shadow:var(--shadow-sm); }
[data-theme="dark"] .card { background:var(--color-surface-2); }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card-title { font-size:var(--text-lg); }
.card-title[data-c="teal"]{ color:var(--c-teal); }
.card-title[data-c="orange"]{ color:var(--c-orange); }
.card-title[data-c="purple"]{ color:var(--c-purple); }
.card p { margin-top:.6rem; font-size:var(--text-sm); color:var(--color-text-muted); }
@media (max-width: 900px){ .section-grid .card-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 580px){ .section-grid .card-grid{ grid-template-columns:1fr; } }

/* ---------- What's new in v1.5 ---------- */
.whatsnew-v15 { background:var(--color-surface); }
.v15-grid { margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.v15-card { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:1.7rem 1.6rem; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
[data-theme="dark"] .v15-card { background:var(--color-surface-2); }
.v15-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.v15-card h3 { margin-top:1.1rem; font-size:var(--text-lg); }
.v15-card p { margin-top:.55rem; font-size:var(--text-sm); color:var(--color-text-muted); }
.v15-ic { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; }
.v15-ic svg { width:22px; height:22px; }
.v15-ic[data-c="teal"]{ color:var(--c-teal); background:color-mix(in srgb, var(--c-teal) 12%, transparent); }
.v15-ic[data-c="purple"]{ color:var(--c-purple); background:color-mix(in srgb, var(--c-purple) 12%, transparent); }
.v15-ic[data-c="orange"]{ color:var(--c-orange); background:color-mix(in srgb, var(--c-orange) 12%, transparent); }
@media (max-width: 900px){ .v15-grid{ grid-template-columns:1fr; max-width:40ch; margin-inline:auto; } }

/* ---------- Privacy ---------- */
.privacy { text-align:center; }
.privacy-inner { max-width:62ch; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.privacy-badge { display:grid; place-items:center; width:72px; height:72px; border-radius:20px; color:#fff; background:var(--brand-gradient); box-shadow:var(--shadow-md); margin-bottom:1.4rem; }
.privacy .section-lead { text-align:center; }
.privacy-inner:has(.privacy-points) { max-width:920px; }
.privacy-points { list-style:none; display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; width:100%; margin:2rem 0 0; text-align:left; }
.privacy-points li { display:flex; align-items:flex-start; gap:.8rem; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.1rem 1.2rem; font-size:var(--text-sm); line-height:1.5; color:var(--color-text-muted); }
.privacy-points li strong { color:var(--color-text); font-weight:600; }
.privacy-points svg { width:18px; height:18px; flex:none; margin-top:.15rem; color:var(--color-primary); }
.privacy-foot { margin-top:1.6rem; font-size:var(--text-sm); color:var(--color-text-muted); text-align:center; max-width:62ch; }
@media (max-width:680px){ .privacy-points { grid-template-columns:1fr; } }

/* ---------- Feedback ---------- */
.feedback { text-align:center; }
.feedback-inner { max-width:60ch; margin-inline:auto; display:flex; flex-direction:column; align-items:center; }
.feedback-ic { display:grid; place-items:center; width:64px; height:64px; border-radius:18px; color:#fff; background:var(--brand-gradient); box-shadow:var(--shadow-md); margin-bottom:1.3rem; }
.feedback .section-lead { text-align:center; }
.feedback-btn { margin-top:1.6rem; }
.feedback-email { margin-top:1rem; font-size:var(--text-sm); color:var(--color-text-muted); }
.doc-feedback .btn-primary { text-decoration:none; color:#08323c; }
.doc-feedback .btn-primary:hover { text-decoration:none; }

/* ---------- CTA ---------- */
.cta { padding-block:clamp(3.5rem,7vw,6rem); }
.cta-inner { background:var(--brand-gradient); border-radius:var(--radius-2xl); padding:clamp(2.5rem,6vw,4rem); text-align:center; display:flex; flex-direction:column; align-items:center; box-shadow:var(--shadow-lg); }
.cta-icon { width:72px; height:72px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.22)); margin-bottom:1.2rem; }
.cta h2 { color:#06323b; font-size:var(--text-xl); }
.cta p { color:#0a3a44; margin-top:.6rem; margin-bottom:1.6rem; font-weight:500; }

/* ---------- FAQ ---------- */
.faq .section-title { text-align:center; margin-bottom:2rem; }
.faq-list { max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:.75rem; }
.faq details { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:0 1.3rem; box-shadow:var(--shadow-sm); }
.faq summary { list-style:none; cursor:pointer; padding:1.1rem 0; font-family:var(--font-display); font-weight:700; font-size:var(--text-base); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.4rem; font-weight:400; color:var(--color-primary); transition:transform var(--transition); }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 0 1.1rem; color:var(--color-text-muted); font-size:var(--text-sm); }

/* ---------- Credibility / social proof ---------- */
.credibility { background:var(--color-surface); border-block:1px solid var(--color-border); }
.cred-inner { max-width:760px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.cred-quote { font-family:var(--font-display); font-weight:600; font-size:var(--text-xl); line-height:1.35; color:var(--color-text); max-width:48ch; }
.cred-quote .hl { background:linear-gradient(180deg,transparent 62%, color-mix(in oklab, var(--color-primary) 28%, transparent) 0); padding:0 .1em; }
.cred-attr { font-size:var(--text-sm); color:var(--color-text-muted); }
.cred-points { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin-top:.4rem; }
.cred-points li { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--text-sm); color:var(--color-text-muted); background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-full); padding:.45rem .9rem; }
.cred-points svg { width:16px; height:16px; color:var(--color-primary); flex:none; }

/* ---------- What's New / changelog ---------- */
.whatsnew { background:var(--color-surface); }
.changelog { max-width:760px; margin-inline:auto; display:flex; flex-direction:column; gap:1.1rem; }
.release { background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:1.5rem 1.6rem; box-shadow:var(--shadow-sm); }
[data-theme="dark"] .release { background:var(--color-surface-2); }
.release-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.7rem; }
.release-ver { font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:var(--color-text); }
.release-ver .ver-tag { display:inline-block; margin-left:.6rem; font-size:var(--text-xs); font-weight:600; color:var(--color-primary); border:1px solid color-mix(in oklab, var(--color-primary) 40%, var(--color-border)); border-radius:var(--radius-full); padding:.15rem .6rem; vertical-align:middle; }
.release-date { font-size:var(--text-sm); color:var(--color-text-faint); }
.release ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.release li { position:relative; padding-left:1.4rem; color:var(--color-text-muted); font-size:var(--text-sm); line-height:1.55; }
.release li::before { content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--brand-gradient); }
.whatsnew-cta { text-align:center; margin-top:1.6rem; font-size:var(--text-sm); color:var(--color-text-muted); }
.whatsnew-cta a { color:var(--color-primary); font-weight:600; text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:.08em; }
.whatsnew-cta a:hover { color:var(--color-primary-hover); }
@media (max-width:760px){ .cred-quote{ font-size:var(--text-lg); } }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--color-border); background:var(--color-surface); padding-block:clamp(2.5rem,5vw,3.5rem); }
.footer-inner { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; }
.footer-brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.1rem; }
.footer-brand .app-icon { width:32px; height:32px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.16)); }
.footer-tagline { color:var(--color-text-muted); font-size:var(--text-sm); max-width:52ch; }
.footer-nav { display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center; font-size:var(--text-sm); color:var(--color-text-muted); }
.footer-nav a:hover { color:var(--color-text); }
.footer-social { display:flex; gap:.75rem; justify-content:center; }
.footer-social .icon-btn { width:44px; height:44px; }
.footer-social .icon-btn svg { width:18px; height:18px; }
.footer-social .icon-btn:hover { color:var(--color-text); border-color:var(--color-text-muted); }
.footer-copy { font-size:var(--text-xs); color:var(--color-text-faint); }

/* ---------- Scroll reveal ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---------- Content / doc pages (Privacy, Features, Support) ---------- */
.doc-hero { position:relative; padding-block:clamp(3rem,7vw,5rem) clamp(1.5rem,3vw,2.5rem); background:var(--color-surface-2); border-bottom:1px solid var(--color-border); overflow:hidden; }
.doc-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 50% -20%, var(--hero-tint), transparent 70%); pointer-events:none; }
.doc-hero .container { position:relative; text-align:center; }
.doc-hero .eyebrow { justify-content:center; }
.doc-title { font-size:var(--text-2xl); margin:.4rem 0 .6rem; }
.doc-lead { color:var(--color-text-muted); font-size:var(--text-lg); max-width:60ch; margin-inline:auto; }
.doc-meta { margin-top:1rem; font-size:var(--text-sm); color:var(--color-text-faint); }

.doc-body { padding-block:clamp(2.5rem,5vw,4rem); }
.doc-prose { max-width:760px; margin-inline:auto; }
.doc-prose h2 { font-size:var(--text-xl); margin:2.4rem 0 .9rem; padding-top:.4rem; }
.doc-prose h2:first-child { margin-top:0; }
.doc-prose h3 { font-size:var(--text-lg); margin:1.8rem 0 .7rem; color:var(--color-text); }
.doc-prose p { color:var(--color-text-muted); margin:0 0 1rem; }
.doc-prose p strong { color:var(--color-text); }
.doc-prose ul { list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.doc-prose ul li { position:relative; padding-left:1.6rem; color:var(--color-text-muted); }
.doc-prose ul li::before { content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--brand-gradient); }
/* ---------- Inline body / content links: always underlined so they're clearly tappable ---------- */
.doc-prose a, .doc-faq a, .faq-list a, .doc-contact-cta p a, .section-lead a {
  color:var(--color-primary);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:.08em;
}
.doc-prose a:hover, .doc-faq a:hover, .faq-list a:hover, .doc-contact-cta p a:hover, .section-lead a:hover {
  color:var(--color-primary-hover);
  text-decoration-thickness:.12em;
}
.doc-prose .lead { font-size:var(--text-lg); color:var(--color-text); }

.doc-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-xl); padding:clamp(1.4rem,3vw,2rem); box-shadow:var(--shadow-sm); margin:1.4rem 0; }
.doc-card h3 { margin-top:0; }
.doc-card h3:first-child { margin-top:0; }

/* divider between feature sections */
.doc-prose .doc-section { padding-top:1.4rem; border-top:1px solid var(--color-border); margin-top:2.4rem; }
.doc-prose .doc-section:first-of-type { border-top:none; padding-top:0; margin-top:0; }

/* inline screenshot figures inside feature docs */
.doc-shot { margin:1.6rem 0; text-align:center; }
.doc-shot img { width:220px; max-width:62%; height:auto; border-radius:26px; box-shadow:var(--shadow-md); }
.doc-shot figcaption { margin-top:.7rem; font-size:var(--text-xs); color:var(--color-text-muted); }
@media (max-width: 560px){ .doc-shot img { width:62%; } }

/* CPD table */
.doc-table-wrap { overflow-x:auto; margin:1.2rem 0 1.6rem; }
.doc-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); min-width:420px; }
.doc-table th, .doc-table td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--color-border); }
.doc-table thead th { font-family:var(--font-display); font-weight:700; color:var(--color-text); background:var(--color-surface-2); }
.doc-table tbody tr:last-child td { border-bottom:none; }
.doc-table td { color:var(--color-text-muted); }

/* support accordions reuse .faq look */
.doc-faq { display:flex; flex-direction:column; gap:.7rem; margin:.8rem 0 1.4rem; }
.doc-faq details { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:0 1.2rem; box-shadow:var(--shadow-sm); }
.doc-faq summary { list-style:none; cursor:pointer; padding:1rem 0; font-family:var(--font-display); font-weight:700; font-size:var(--text-base); display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--color-text); }
.doc-faq summary::-webkit-details-marker { display:none; }
.doc-faq summary::after { content:"+"; font-size:1.4rem; font-weight:400; color:var(--color-primary); transition:transform var(--transition); flex:none; }
.doc-faq details[open] summary::after { transform:rotate(45deg); }
.doc-faq details > *:not(summary) { margin-bottom:1rem; color:var(--color-text-muted); font-size:var(--text-sm); }
.doc-faq details ul { margin-top:.2rem; }

.doc-back { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--text-sm); color:var(--color-primary); font-weight:600; margin-bottom:1.4rem; }
.doc-back:hover { color:var(--color-primary-hover); }
.doc-contact-cta { text-align:center; margin-top:2.4rem; }