/* PeptideUniv landing page (refactor, 12 Oct 2026).
 *
 * The landing now uses the native app's tokens -- the --pu-* custom properties
 * defined in index.html from apps/mobile/App.tsx themePalettes (WD5) -- like
 * every other page. No new colours are introduced here. Mapping and component
 * list: docs/landing-refactor/LANDING_DESIGN_MAPPING.md.
 *
 * Everything is scoped to the landing (body[data-page="landing"] or .lp), so
 * app pages are untouched. Loaded once from index.html (CSP: 'self').
 */

/* ---- 1. Legacy variables -> native tokens (same mapping the app pages use) ---- */
body[data-page="landing"]{
  --accent:var(--pu-ac);--accent-2:var(--pu-ac);--ring:color-mix(in srgb,var(--pu-ac) 30%,transparent);
  --muted:var(--pu-mu);--border:var(--pu-bd);--border-light:var(--pu-bd2);--text:var(--pu-tx);
  --text-primary:var(--pu-tx);--primary-text:var(--pu-tx);--pro-accent:var(--pu-ac);
  --panel:var(--pu-panel);--bg:var(--pu-bg);
  --lp-max:1200px;--lp-gap:16px;--lp-radius:16px;--lp-radius-sm:12px;
  --lp-section:88px;
  background:var(--pu-bg);color:var(--pu-tx);
}
@media(max-width:768px){body[data-page="landing"]{--lp-section:64px}}
/* Light theme: the app's light accent (#0284c7) is 3.9:1 on white -- below WCAG AA
   for text and button labels. The landing uses one step darker in the same sky
   hue (#0369a1, 5.9:1). Recorded in LANDING_DESIGN_MAPPING.md as a gap to fix
   in the app's light palette too. */
:root[data-theme="light"] body[data-page="landing"]{--pu-ac:#0369a1}

body[data-page="landing"] :focus-visible{outline:3px solid var(--pu-ac);outline-offset:2px;border-radius:8px}
body[data-page="landing"] .lpSr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- 2. Header on the landing: logo + 4 anchors + Sign in + Start free ---- */
body[data-page="landing"] .header{align-items:center;flex-wrap:nowrap;max-width:var(--lp-max);margin:0 auto 8px;position:relative}
body[data-page="landing"] .header .sub,
body[data-page="landing"] .header #peu-slogan,
body[data-page="landing"] .header .brandRow .h1,
body[data-page="landing"] #upgradeCtaBar{display:none!important}
body[data-page="landing"] .header > div:last-child{flex-direction:row!important;align-items:center!important}
body[data-page="landing"] .landingTabs{gap:4px;align-items:center;flex-wrap:nowrap;overflow:visible;max-width:none;padding:0}
body[data-page="landing"] .lpNavLinks{display:flex;align-items:center;gap:2px}
body[data-page="landing"] .landingTabs .tab{background:transparent;border-color:transparent;color:var(--pu-mu);font-weight:800;font-size:14px;padding:10px 12px;min-height:44px;border-radius:10px}
body[data-page="landing"] .landingTabs .tab:hover{color:var(--pu-tx);background:var(--pu-soft);border-color:transparent}
body[data-page="landing"] .lpNavSignIn{color:var(--pu-tx)!important}
body[data-page="landing"] .lpNavCta{margin-left:8px;min-height:44px;padding:0 18px;font-size:14px}
body[data-page="landing"] .lpNavMenuBtn{display:none}
@media(max-width:900px){
  body[data-page="landing"] .lpNavMenuBtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;border-radius:12px;border:1px solid var(--pu-bd2);background:var(--pu-panel);color:var(--pu-tx);cursor:pointer}
  body[data-page="landing"] .lpNavLinks{display:none;position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:1300;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border:1px solid var(--pu-bd);border-radius:var(--lp-radius);background:var(--pu-panel);box-shadow:0 18px 40px rgba(2,6,23,.35)}
  body[data-page="landing"] .landingTabs.lpNavOpen .lpNavLinks{display:flex}
  body[data-page="landing"] .lpNavLinks .tab{justify-content:flex-start;font-size:16px;padding:12px 14px;min-height:48px}
  body[data-page="landing"] .landingTabs{position:static}
}
@media(max-width:640px){
  body[data-page="landing"] .brandLogo img{height:34px;width:auto}
  body[data-page="landing"] .lpNavCta{padding:0 14px}
}

/* ---- 3. Page frame + shared type ---- */
.lp{display:block}
.lp > section,.lp > nav{max-width:var(--lp-max);margin-left:auto;margin-right:auto}
.lp .lpSection{margin-top:var(--lp-section);scroll-margin-top:24px}
.lp [id]{scroll-margin-top:24px}
.lp .lpEyebrow{margin:0 0 10px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--pu-ac)}
.lp .lpH1{margin:0;font-size:clamp(40px,6.4vw,68px);line-height:1.02;font-weight:900;letter-spacing:-.025em;color:var(--pu-tx)}
.lp .lpH2{margin:0;font-size:clamp(28px,4.1vw,44px);line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--pu-tx)}
.lp .lpH3{margin:0;font-size:18px;line-height:1.3;font-weight:900;color:var(--pu-tx)}
.lp .lpLead{margin:14px 0 0;font-size:clamp(16px,1.6vw,19px);line-height:1.6;color:var(--pu-mu);font-weight:600;max-width:60ch}
.lp .lpFine{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--pu-mu);font-weight:600}
.lp .lpSectionHead{text-align:center;max-width:820px;margin:0 auto 32px}
.lp .lpSectionHead .lpLead{margin-left:auto;margin-right:auto}
.lp kbd{font:inherit;font-size:.86em;font-weight:800;padding:1px 6px;border-radius:6px;border:1px solid var(--pu-bd2);background:var(--pu-soft);color:var(--pu-tx)}
.lp .lpPro{display:inline-block;vertical-align:2px;margin-left:6px;font-size:10px;line-height:14px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--pu-on-ac);background:var(--pu-ac);border-radius:6px;padding:1px 6px}

/* ---- 4. Buttons (the app's primary and ghost) ---- */
body[data-page="landing"] .lpBtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:12px;font-size:16px;font-weight:900;line-height:1.1;text-decoration:none;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:filter .15s ease,background-color .15s ease}
body[data-page="landing"] .lpBtn--primary{background:var(--pu-ac);border-color:var(--pu-ac);color:var(--pu-on-ac)}
body[data-page="landing"] .lpBtn--primary:hover{filter:brightness(1.08)}
body[data-page="landing"] .lpBtn--ghost{background:transparent;border-color:var(--pu-bd2);color:var(--pu-tx)}
body[data-page="landing"] .lpBtn--ghost:hover{background:var(--pu-soft)}
body[data-page="landing"] .lpBtn--lg{min-height:54px;padding:0 26px;font-size:17px}
body[data-page="landing"] .lpBtn--block{display:flex;width:100%}
body[data-page="landing"] .lpLink{display:inline-flex;align-items:center;min-height:44px;color:var(--pu-ac);font-weight:900;text-decoration:none}
body[data-page="landing"] .lpLink:hover{text-decoration:underline}
body[data-page="landing"] .lpLinkBtn{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;font:inherit;font-weight:900;color:var(--pu-ac);cursor:pointer;min-height:44px}
body[data-page="landing"] .lpLinkBtn:hover{text-decoration:underline}
/* The sticky bar keeps its own markup; give it the app's button look. */
body[data-page="landing"] #landingStickyCta{background:var(--pu-panel)!important;border-top-color:var(--pu-bd)!important}
body[data-page="landing"] #landingStickyCta .primary{background:var(--pu-ac);color:var(--pu-on-ac);border:1px solid var(--pu-ac);border-radius:12px!important;font-weight:900!important}
body[data-page="landing"] #landingStickyCta .ghost{background:transparent;color:var(--pu-tx);border:1px solid var(--pu-bd2);border-radius:12px!important;font-weight:900!important}
.lp .lpCtas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.lp .lpCtas--center{justify-content:center}

/* ---- 5. Hero ---- */
.lp .lpHero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:48px;align-items:center;padding:56px 0 24px}
.lp .lpHeroCopy{min-width:0}
.lp .lpMicro{margin:14px 0 0;font-size:14px;font-weight:700;color:var(--pu-mu)}
.lp .lpPlatforms{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px}
/* Google's badge: 44px tall with a quarter of its height clear around it (tests/account-notice.test.cjs). */
.lp .lpPlayBadge{display:inline-flex;line-height:0;padding:11px;margin:-11px;border-radius:8px}
.lp .lpPlatformNote{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--pu-tx)}
.lp .lpPlatformNote svg{color:var(--pu-ac)}
.lp .lpNotice{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--pu-bd);font-size:13px;line-height:1.5;color:var(--pu-mu);font-weight:600;max-width:52ch}
.lp .lpHeroArt{position:relative;min-height:600px;display:flex;justify-content:flex-end;align-items:flex-end}
.lp .lpHeroWeb{position:absolute;left:0;top:40px;width:min(100%,560px);margin:0}
.lp .lpHeroPhone{position:relative;z-index:2;margin:0 24px 0 0}
.lp .lpHeroArt::before{content:"";position:absolute;inset:10% 0 0 18%;background:radial-gradient(closest-side,color-mix(in srgb,var(--pu-ac) 22%,transparent),transparent);pointer-events:none}

/* Phone frame around a real app capture */
.lp .lpShot{margin:0;display:flex;flex-direction:column;align-items:center}
.lp .lpShotFrame{width:300px;max-width:100%;padding:8px;border-radius:40px;background:#050b16;border:1px solid var(--pu-bd2);box-shadow:0 30px 60px -20px rgba(2,6,23,.55)}
.lp .lpShotFrame img{display:block;width:100%;height:auto;border-radius:32px;background:#f8fafc}
.lp figcaption{margin-top:12px;font-size:13px;font-weight:700;color:var(--pu-mu);text-align:center}
/* Browser frame around the real web Command Center */
.lp .lpWebShot{margin:0;border-radius:var(--lp-radius);border:1px solid var(--pu-bd2);background:var(--pu-panel);overflow:hidden;box-shadow:0 30px 60px -24px rgba(2,6,23,.5)}
.lp .lpWebBar{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-bottom:1px solid var(--pu-bd);background:var(--pu-soft)}
.lp .lpWebBar span{width:9px;height:9px;border-radius:50%;background:var(--pu-bd2)}
.lp .lpWebBar em{margin-left:10px;font-style:normal;font-size:12px;font-weight:800;color:var(--pu-mu)}
.lp .lpWebShot img{display:block;width:100%;height:auto}
.lp .lpThemeLight{display:none!important}
:root[data-theme="light"] .lp .lpThemeDark{display:none!important}
:root[data-theme="light"] .lp .lpThemeLight{display:block!important}
/* An enlarged real card from the app */
.lp .lpCardShot{margin:0}
.lp .lpCardShot img{display:block;width:100%;max-width:480px;height:auto;margin:0 auto;border-radius:20px;border:1px solid var(--pu-bd2);box-shadow:0 24px 50px -24px rgba(2,6,23,.5)}

/* ---- 6. Proof strip ---- */
.lp .lpProof{margin-top:48px;padding:20px 0;border-top:1px solid var(--pu-bd);border-bottom:1px solid var(--pu-bd)}
.lp .lpProofList{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;gap:12px 24px}
.lp .lpProofItem{display:inline-flex;align-items:center;gap:10px;font-size:14px;line-height:1.35;font-weight:800;color:var(--pu-tx)}
.lp .lpProofItem svg{flex:0 0 auto;color:var(--pu-ac)}

/* ---- 7. Before / after ---- */
.lp .lpCompare{display:grid;grid-template-columns:1fr 1fr;gap:var(--lp-gap);max-width:960px;margin:0 auto}
.lp .lpCompareCol{border-radius:var(--lp-radius);border:1px solid var(--pu-bd);padding:24px;background:var(--pu-panel)}
.lp .lpCompareCol--after{background:var(--pu-acs);border-color:color-mix(in srgb,var(--pu-ac) 45%,var(--pu-bd))}
.lp .lpCompareLabel{margin:0 0 14px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--pu-mu)}
.lp .lpCompareCol--after .lpCompareLabel{color:var(--pu-ac)}
.lp .lpCompareList{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lp .lpCompareList li{position:relative;padding-left:30px;font-size:16px;line-height:1.45;font-weight:700;color:var(--pu-tx)}
.lp .lpCompareCol--before li{color:var(--pu-mu)}
.lp .lpCompareList li::before{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
.lp .lpCompareCol--before li::before{content:"✕";color:var(--pu-mu);border:1px solid var(--pu-bd2)}
.lp .lpCompareCol--after li::before{content:"✓";color:var(--pu-on-ac);background:var(--pu-ac)}

/* ---- 8. Feature sections (copy + real screen) ---- */
.lp .lpFeature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.lp .lpFeature--flip .lpFeatureCopy{order:2}
.lp .lpFeature--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.lp .lpFeature--flip.lpFeature--wide{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.lp .lpFeatureCopy{min-width:0}
.lp .lpFeatureArt{min-width:0}
.lp .lpBullets{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.lp .lpBullets li{position:relative;padding-left:28px;font-size:16px;line-height:1.5;font-weight:600;color:var(--pu-tx)}
.lp .lpBullets li::before{content:"";position:absolute;left:4px;top:.45em;width:10px;height:10px;border-radius:50%;background:var(--pu-ac)}
.lp .lpBullets strong{font-weight:900}

/* ---- 9. How it works ---- */
.lp .lpSteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:none}
.lp .lpStep a{display:flex;flex-direction:column;gap:8px;height:100%;padding:20px;border-radius:var(--lp-radius);border:1px solid var(--pu-bd);background:var(--pu-panel);text-decoration:none;color:var(--pu-tx);transition:border-color .15s ease}
.lp .lpStep a:hover{border-color:var(--pu-ac)}
.lp .lpStepNum{width:32px;height:32px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:var(--pu-on-ac);background:var(--pu-ac)}
.lp .lpStep strong{font-size:18px;font-weight:900}
.lp .lpStep span:last-child{font-size:14px;line-height:1.5;color:var(--pu-mu);font-weight:600}

/* ---- 10. Calculator bridge: the Calculator desk's cards (dashboard-v2 main.tsx #puCalcDesk .puCa*), same values ---- */
.lp .lpCalc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;max-width:1000px;margin:0 auto}
.lp .lpCalcCard{background:var(--pu-panel);border:1px solid var(--pu-bd);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.lp .lpCalcHero{border:2px solid var(--pu-ac)}
.lp .lpCalcEyebrow{margin:0;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--pu-mu)}
.lp .lpCalcAccent{color:var(--pu-ac)}
.lp .lpCalcMuted{margin:0;color:var(--pu-mu);font-size:13px;line-height:19px;font-weight:700}
.lp .lpCalcTwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp .lpCalcField{display:flex;flex-direction:column;gap:6px;margin:0;min-width:0}
.lp .lpCalcField>label{font-size:12px;font-weight:900;color:var(--pu-mu);margin:0}
.lp .lpCalcIn{display:flex;align-items:center;min-height:46px;border-radius:12px;border:1px solid var(--pu-bd2);background:var(--pu-bg);padding:0 12px;gap:8px}
.lp .lpCalcIn:focus-within{outline:2px solid var(--pu-ac);border-color:var(--pu-ac)}
.lp .lpCalcIn input{flex:1;width:100%;min-width:0;border:0;background:transparent;color:var(--pu-tx);font:inherit;font-size:18px;font-weight:900;outline:none;padding:0;min-height:0;box-shadow:none}
.lp .lpCalcIn em{font-style:normal;font-size:12px;font-weight:800;color:var(--pu-mu);white-space:nowrap}
.lp .lpCalcRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.lp .lpCalcNoWrap{flex-wrap:nowrap}
.lp .lpCalcGrow{flex:1 1 auto;min-width:0}
.lp .lpCalcPresets{display:flex;gap:6px;flex-wrap:wrap}
.lp .lpCalcPresets button{min-height:36px;padding:0 10px;border-radius:9px;border:1px solid var(--pu-bd2);background:transparent;color:var(--pu-tx);font:inherit;font-size:12px;font-weight:900;cursor:pointer;box-shadow:none;white-space:nowrap}
.lp .lpCalcPresets button:hover{background:var(--pu-soft)}
.lp .lpCalcPresets button.on{background:var(--pu-acs);border-color:var(--pu-ac);color:var(--pu-tx)}
.lp .lpCalcSeg{display:inline-flex;gap:2px;padding:3px;border-radius:12px;border:1px solid var(--pu-bd);background:var(--pu-bg)}
.lp .lpCalcSeg button{min-height:38px;padding:0 12px;border-radius:9px;border:0;background:transparent;color:var(--pu-mu);font:inherit;font-size:13px;font-weight:900;cursor:pointer;box-shadow:none;white-space:nowrap}
.lp .lpCalcSeg button.on{background:var(--pu-acs);color:var(--pu-tx);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pu-ac) 45%,transparent)}
.lp .lpCalcBig{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.lp .lpCalcBig p{margin:0}
.lp .lpCalcBig b{font-size:56px;line-height:58px;font-weight:900;color:var(--pu-tx);letter-spacing:-.02em}
.lp .lpCalcBig span{font-size:20px;font-weight:900;color:var(--pu-mu)}
.lp .lpCalcBig .lpCalcRight span{font-size:13px;color:inherit}
.lp .lpCalcRight{text-align:right;white-space:nowrap}
.lp .lpCalcSplit{margin:4px 0 0;font-size:14px;font-weight:900;color:var(--pu-da)}
.lp .lpCalcSyr{position:relative;padding:12px 12px 4px}
.lp .lpCalcTrack{position:relative;height:28px;border-radius:8px;border:1.5px solid var(--pu-bd2);background:var(--pu-bg);overflow:hidden}
.lp .lpCalcTrack.over{border-color:var(--pu-da)}
.lp .lpCalcTrack i{position:absolute;left:0;top:0;bottom:0;background:color-mix(in srgb,var(--pu-ac) 55%,transparent);border-right:2px solid var(--pu-ac)}
.lp .lpCalcTicks{position:relative;height:10px}
.lp .lpCalcTicks span{position:absolute;top:0;width:1px;height:5px;background:var(--pu-bd2)}
.lp .lpCalcTicks span.m{height:10px;background:var(--pu-mu)}
.lp .lpCalcTickL{position:relative;height:16px}
.lp .lpCalcTickL span{position:absolute;transform:translateX(-50%);font-size:11px;font-weight:800;color:var(--pu-mu)}
.lp .lpCalcFacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:12px}
.lp .lpCalcFacts div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--pu-soft);border:1px solid var(--pu-bd)}
.lp .lpCalcFacts span{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--pu-mu)}
.lp .lpCalcFacts b{font-size:20px;font-weight:900;color:var(--pu-tx)}
.lp .lpCalcWarn{margin:0;padding:10px 12px 10px 28px;border-radius:12px;border:1px solid color-mix(in srgb,var(--pu-da) 45%,var(--pu-bd));font-size:13px;line-height:19px;font-weight:700;color:var(--pu-tx)}
.lp .lpCalcHero .lpBanner{margin-top:4px}
@media(max-width:900px){.lp .lpCalc{grid-template-columns:1fr}}
@media(max-width:420px){.lp .lpCalcTwo{grid-template-columns:1fr}.lp .lpCalcBig b{font-size:48px;line-height:50px}}
.lp .lpBanner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;padding:16px;border-radius:var(--lp-radius);border:1px solid color-mix(in srgb,var(--pu-ac) 45%,var(--pu-bd));background:var(--pu-acs)}
.lp .lpBannerTitle{margin:0;font-weight:900;font-size:16px;color:var(--pu-tx)}
.lp .lpBannerText{margin:4px 0 0;font-size:13px;line-height:1.5;font-weight:600;color:var(--pu-mu);max-width:52ch}
.lp .lpBannerActions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.lp .lpChips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.lp .lpChipsLabel{font-size:13px;font-weight:900;color:var(--pu-mu);margin-right:4px}
.lp .lpChip{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--pu-bd);background:var(--pu-panel);color:var(--pu-tx);font-size:14px;font-weight:800;text-decoration:none}
.lp .lpChip:hover{border-color:var(--pu-ac)}
.lp .lpChip--more{color:var(--pu-ac)}
.lp .lpLeadCard{margin-top:20px;padding:20px;border-radius:var(--lp-radius);border:1px solid var(--pu-bd);background:var(--pu-panel)}
.lp .lpLeadForm{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.lp .lpInput{flex:1 1 240px;min-width:0;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--pu-bd2);background:var(--pu-bg);color:var(--pu-tx);font:inherit;font-size:16px}
.lp .lpInput:focus{outline:none;border-color:var(--pu-ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--pu-ac) 30%,transparent)}
.lp #puLeadStatus{margin-top:8px;min-height:18px}

/* ---- 11. Library gateway ---- */
.lp .lpHubs{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lp .lpHubs a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:var(--lp-radius-sm);border:1px solid var(--pu-bd);background:var(--pu-panel);text-decoration:none;color:var(--pu-tx);height:100%}
.lp .lpHubs a:hover{border-color:var(--pu-ac)}
.lp .lpHubs strong{font-size:15px;font-weight:900}
.lp .lpHubs span{font-size:13px;font-weight:600;color:var(--pu-mu)}

/* ---- 12. Platforms ---- */
.lp .lpPlatformCards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lp-gap)}
.lp .lpPlatformCard{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:24px;border-radius:var(--lp-radius);border:1px solid var(--pu-bd);background:var(--pu-panel)}
.lp .lpPlatformCard svg{color:var(--pu-ac)}
.lp .lpPlatformCard strong{font-size:18px;font-weight:900}
.lp .lpPlatformCard > span{font-size:15px;line-height:1.5;font-weight:600;color:var(--pu-mu)}
.lp .lpPlatformCard .lpLink{margin-top:auto;padding-top:8px}
.lp .lpPlatformCard .lpPlayBadge{margin-top:auto}

/* ---- 13. Pricing ---- */
.lp .lpPlans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--lp-gap);max-width:1000px;margin:0 auto;align-items:stretch}
.lp .lpPlan{display:flex;flex-direction:column;gap:16px;padding:28px;border-radius:20px;border:1px solid var(--pu-bd);background:var(--pu-panel)}
.lp .lpPlan--pro{border:2px solid var(--pu-ac);background:linear-gradient(180deg,var(--pu-acs) 0%,var(--pu-panel) 55%)}
.lp .lpPlanName{margin:0;font-size:22px;font-weight:900}
.lp .lpPlanLead{margin:0;font-weight:900;font-size:15px}
.lp .lpPrice{margin:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.lp .lpPriceAmount{font-size:40px;line-height:1;font-weight:900;letter-spacing:-.02em}
.lp .lpPricePer{font-size:15px;font-weight:800;color:var(--pu-mu)}
.lp .lpPriceOptions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lp .lpPriceOption{padding:14px;border-radius:14px;border:1px solid var(--pu-bd);background:var(--pu-panel)}
.lp .lpPriceOption--best{border-color:var(--pu-ac)}
.lp .lpPriceOption .lpPriceAmount{font-size:30px}
.lp .lpPriceOptionName{margin:0 0 6px;font-weight:900;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lp .lpPriceNote{margin:6px 0 0;font-size:12px;font-weight:700;color:var(--pu-mu)}
.lp .lpBadge{font-size:10px;line-height:14px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--pu-on-ac);background:var(--pu-ac);border-radius:6px;padding:1px 6px}
.lp .lpChecks{list-style:none;margin:0;padding:0;display:grid;gap:10px;flex:1}
.lp .lpChecks li{position:relative;padding-left:28px;font-size:15px;line-height:1.45;font-weight:600;color:var(--pu-tx)}
.lp .lpChecks li::before{content:"✓";position:absolute;left:0;top:0;font-weight:900;color:var(--pu-next)}
.lp .lpTerms{margin:0;font-size:12px;line-height:1.55;font-weight:600;color:var(--pu-mu)}
.lp .lpRestore{margin:18px 0 0;text-align:center;font-size:14px;font-weight:700;color:var(--pu-mu)}
.lp [data-lp-pro-card][data-lp-is-pro="1"] .lpPriceOptions,
.lp [data-lp-pro-card][data-lp-is-pro="1"] .lpTerms{opacity:.6}

/* ---- 14. FAQ ---- */
.lp .lpFaq{max-width:820px;margin:0 auto;display:grid;gap:10px}
.lp .lpFaqItem{border:1px solid var(--pu-bd);border-radius:14px;background:var(--pu-panel)}
.lp .lpFaqItem summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 18px;font-size:16px;font-weight:900;color:var(--pu-tx)}
.lp .lpFaqItem summary::-webkit-details-marker{display:none}
.lp .lpFaqItem summary::after{content:"+";flex:0 0 auto;font-size:22px;line-height:1;font-weight:700;color:var(--pu-ac)}
.lp .lpFaqItem[open] summary::after{content:"–"}
.lp .lpFaqItem p{margin:0;padding:0 18px 18px;font-size:15px;line-height:1.6;font-weight:600;color:var(--pu-mu)}
.lp .lpFaqItem a{color:var(--pu-ac);font-weight:800}

/* ---- 15. Final CTA ---- */
.lp .lpFinal{margin-top:var(--lp-section);padding:56px 24px;text-align:center;border-radius:24px;border:1px solid color-mix(in srgb,var(--pu-ac) 40%,var(--pu-bd));background:linear-gradient(180deg,var(--pu-acs) 0%,var(--pu-panel) 100%)}
.lp .lpFinal .lpLead{margin-left:auto;margin-right:auto}
.lp .lpFinal .lpLine{display:inline-block}
.lp .lpFinalCtas{align-items:center;gap:16px 26px}
.lp .lpFinal .lpFine{margin-top:18px}

/* ---- 16. Site map ---- */
.lp .lpSiteMap{margin-top:64px;padding-top:32px;border-top:1px solid var(--pu-bd);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.lp .lpSiteCol{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.lp .lpSiteHead{margin:0 0 6px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--pu-tx)}
.lp .lpSiteCol a,.lp .lpSiteCol .lpLinkBtn{display:inline-flex;align-items:center;min-height:32px;font-size:14px;font-weight:700;color:var(--pu-mu);text-decoration:none}
.lp .lpSiteCol a:hover,.lp .lpSiteCol .lpLinkBtn:hover{color:var(--pu-tx)}
.lp .lpSiteNotice{grid-column:1/-1;margin:8px 0 0;font-size:12px;line-height:1.55;font-weight:600;color:var(--pu-mu);max-width:90ch}

/* Testimonial / rating slot -- CSS only; no markup ships until reviews are real (Decisions D-L7). */
.lp .lpQuote{padding:20px;border-radius:var(--lp-radius);border:1px solid var(--pu-bd);background:var(--pu-panel)}

/* The shared footer, in the app's tokens on the landing */
body[data-page="landing"] .footer{max-width:var(--lp-max);border-top-color:var(--pu-bd)}
body[data-page="landing"] .footer a{display:inline-flex;align-items:center;min-height:36px;color:var(--pu-mu);border-color:var(--pu-bd);background:transparent}
body[data-page="landing"] .footer a:hover{color:var(--pu-tx);border-color:var(--pu-ac);background:transparent}

/* ---- 17. Responsive ---- */
@media(max-width:1100px){
  .lp .lpSteps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lp .lpProofList{grid-template-columns:repeat(3,auto);justify-content:center}
  .lp .lpHero{gap:32px}
}
@media(max-width:900px){
  .lp .lpHero{grid-template-columns:1fr;padding:24px 0 8px;gap:32px}
  .lp .lpHeroArt{min-height:0;justify-content:center}
  .lp .lpHeroWeb{display:none}
  .lp .lpHeroPhone{margin:0}
  .lp .lpHeroArt::before{inset:10% 10% 0 10%}
  .lp .lpFeature,.lp .lpFeature--wide,.lp .lpFeature--flip.lpFeature--wide{grid-template-columns:1fr;gap:28px}
  .lp .lpFeature--flip .lpFeatureCopy{order:0}
  .lp .lpPlatformCards{grid-template-columns:1fr}
  .lp .lpPlans{grid-template-columns:1fr}
  .lp .lpSiteMap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .lp .lpCompare{grid-template-columns:1fr}
  .lp .lpProofList{grid-template-columns:1fr 1fr;justify-content:stretch;gap:14px 16px}
  .lp .lpProofItem{align-items:flex-start;font-size:13px}
  .lp .lpFeatureArt .lpShotFrame{max-height:470px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent);mask-image:linear-gradient(180deg,#000 85%,transparent)}
  .lp .lpSteps{grid-template-columns:1fr}
  .lp .lpStep a{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:4px;padding:16px}
  .lp .lpStep span:last-child{flex-basis:100%}
  .lp .lpHubs{grid-template-columns:1fr}
  .lp .lpCtas .lpBtn{flex:1 1 100%}
  .lp .lpShotFrame{width:260px;border-radius:34px;padding:7px}
  .lp .lpShotFrame img{border-radius:28px}
  /* The hero phone shows the top of Today so the next section is in reach. */
  .lp .lpHeroPhone .lpShotFrame{max-height:440px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .lp .lpPriceOptions{grid-template-columns:1fr}
  .lp .lpPlan{padding:22px}
  .lp .lpCompareCol{padding:20px}
  .lp .lpFinal{padding:40px 18px}
  .lp .lpBanner .lpBannerActions{width:100%}
  .lp .lpBanner .lpBannerActions .lpBtn{flex:1 1 100%}
}
@media(max-width:360px){
  .lp .lpProofList{grid-template-columns:1fr}
  .lp .lpSiteMap{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="landing"] *{transition:none!important;scroll-behavior:auto!important}
}

/* iPhone: coming soon (12 Oct 2026). Text only -- Apple's App Store badge is for
   apps that are available (or on pre-order), so it is not used until launch. */
.lp .lpSoon{color:var(--pu-mu)}
.lp .lpSoon svg{color:var(--pu-mu)!important}
.lp .lpSoonTag{display:inline-block;vertical-align:3px;margin-left:6px;font-size:10px;line-height:14px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--pu-tx);background:var(--pu-soft);border:1px solid var(--pu-bd2);border-radius:6px;padding:1px 6px}
.lp #landing-calculator > .lpChips,.lp #landing-calculator > .lpLeadCard{max-width:1000px;margin-left:auto;margin-right:auto}
/* Balanced heading lines: no single-word last line ("grows."). */
.lp .lpH1,.lp .lpH2{text-wrap:balance}

/* Motion (12 Oct 2026): js/landing-motion.js. Landing sections only, never the
   app screenshots. Nothing is hidden until that script has run, and nothing
   moves for prefers-reduced-motion or print. */
.lp .lpRv{transition:opacity .6s ease var(--lp-rv-delay,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--lp-rv-delay,0ms)}
.lp.lpAnim .lpRv:not(.lpIn){opacity:0;transform:translateY(22px)}

@media(prefers-reduced-motion:reduce),print{.lp.lpAnim .lpRv{opacity:1!important;transform:none!important}}
.lp .lpProAccount{margin:10px 0 0;font-size:13px;text-align:center}