/* Landing (marketing) page styles. Ported from the approved design (vyzko-landing.html), scoped
   under .lp so they never touch the app's other pages. Colours/type are DERIVED from the theme
   tokens (vyzko-theme.css / app.css) - the only literals are the few neutral ramp steps the theme
   does not define. The hero search card, chips, autocomplete and status pills reuse the live
   components (app.css) so the teaser flags match the real report cards. */

.lp{
  /* neutral ramp: brand tokens where they exist; literals only for the missing mid-steps */
  --n0:var(--vy-paper); --n100:var(--vy-bone); --n200:#ECE6DB; --n300:var(--vy-line);
  --n400:#D2CABB; --n500:#A8A093; --n600:var(--color-text-muted); --n700:#555049;
  --n800:#3A3631; --n900:var(--vy-ink);
  --green:var(--vy-green); --green-hover:var(--vy-green-hover); --green-soft:var(--vy-green-soft);
  --terra:var(--vy-terracotta);
  /* status family pulled straight from the shared pill tokens (landing == report) */
  --clear:var(--status-clear); --clear-bg:var(--pill-clear-bg); --clear-tx:var(--pill-clear-fg);
  --check:var(--status-check); --check-bg:var(--pill-check-bg); --check-tx:var(--pill-check-fg);
  --know:var(--status-know); --know-bg:var(--pill-info-bg); --know-tx:var(--pill-info-fg);
  --fh:var(--font-head); --fb:var(--font-body); --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow:0 1px 2px rgba(38,35,32,.04),0 2px 8px rgba(38,35,32,.05);
  background:var(--n100); color:var(--n900);
}
.lp .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.lp h1,.lp h2,.lp h3{font-family:var(--fh);font-weight:500;letter-spacing:-.2px}
/* Editorial DISPLAY serif on the hero headline + the marketing section headings + the big trust line +
   the price figure. Calm comes from size and space, not weight (Fraunces light, wght 300). Step/cluster
   h3, the footer h4 labels, body copy, the form and the chips all stay on Hanken/Inter (UI, not display).
   These selectors are more specific than `.lp h1,.lp h2,.lp h3` above, so they win. */
.lp .lp-hero h1,.lp .section-h{font-family:var(--font-serif-display);font-weight:300;letter-spacing:-.3px}
.lp .trust-sec .big,.lp .pricecard .amt{font-family:var(--font-serif-display);font-weight:300}
/* ONE terracotta accent word per display heading. Large-text-only rule: #B4663F on bone = 3.80:1,
   AA for large text. The hero h1 (clamp 32-44px) and .section-h (24-28px) are both >= 24px, so the
   accent never lands on body-size text. Not italic (the <em> default would be). */
.lp em.accent{font-style:normal;color:var(--accent-heading)}
/* Hero address label: a calm Hanken form label (replaces the raw <b>, which rendered Inter bold). */
.lp .form-label{display:block;font-family:var(--fh);font-size:15px;font-weight:500}
.lp a{color:var(--color-link);text-decoration:none}  /* app's AA-darkened terracotta (>=4.5:1 on bone) */
.lp .muted{color:var(--n600)}
.lp .lp-card{background:var(--n0);border:1px solid var(--n300);border-radius:var(--r-md);box-shadow:var(--shadow)}
.lp .src{font-size:12px;color:var(--n600)}
.lp .src b{color:var(--n700);font-weight:500}

/* header */
.lp .lp-head{padding:18px 0;border-bottom:1px solid var(--n300);background:var(--n100)}
.lp .nav{display:flex;align-items:center;gap:12px}
.lp .nav .logo{display:inline-flex;align-items:center}
.lp .nav .logo img{height:26px;width:auto;display:block}
.lp .nav .right{margin-left:auto;display:flex;align-items:center;gap:18px}
.lp .nav .right a{color:var(--n700);font-size:14px}

/* hero */
.lp .lp-hero{padding:60px 0 40px;text-align:center}
.lp .eyebrow{font-size:13px;font-weight:600;letter-spacing:.3px;color:#4E6B5C}  /* soft green darkened to AA on bone */
.lp .lp-hero h1{font-size:44px;line-height:1.08;margin:10px 0 14px}
.lp .lp-hero .sub{font-size:18px;color:var(--n700);max-width:620px;margin:0 auto 24px}
.lp .hero-form{max-width:620px;margin:0 auto;text-align:left}
.lp .trustline{margin-top:14px;font-size:13px;color:var(--n600);text-align:center}
.lp .followline{margin-top:8px;font-size:13px;text-align:center}
.lp .followline a{text-decoration:underline}  /* in-text link: distinguish by more than colour (a11y) */

/* sections */
.lp section{padding:56px 0}
.lp .section-alt{background:var(--n0);border-top:1px solid var(--n300);border-bottom:1px solid var(--n300)}
.lp .section-h{text-align:center;margin-bottom:8px;font-size:28px}
.lp .section-sub{text-align:center;color:var(--n600);max-width:560px;margin:0 auto 36px}
.lp .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.lp .step{padding:22px}
.lp .step .num{font-family:var(--fm);font-size:13px;color:var(--green-soft);font-weight:500}
.lp .step h3{font-size:18px;margin:8px 0 6px}
.lp .step p{font-size:14px;color:var(--n700)}

/* free check + unlock */
.lp .teaser-grid{display:grid;grid-template-columns:1fr;gap:0;max-width:560px;margin:0 auto}
.lp .flag{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--n200)}
.lp .flag:last-child{border-bottom:none}
.lp .flag .ico{color:var(--n600);display:inline-flex}
.lp .flag .name{font-size:14px;font-weight:500}
.lp .flag .badge{margin-left:auto}
.lp .unlock{background:var(--green);color:var(--n100);border-radius:var(--r-md);padding:18px 20px;display:flex;align-items:center;gap:16px;margin:16px auto 0;max-width:560px}
.lp .unlock .price{font-family:var(--fh);font-size:26px;font-weight:500}
.lp .unlock .what{font-size:13px;opacity:.9}
.lp .unlock .btn-bone{background:var(--n100);color:var(--green);border:none;border-radius:var(--r-md);padding:12px 18px;font-family:var(--fb);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
/* Visual hotfix 2 (payments paused): geometry only. The 'unlock-paused' modifier is present ONLY when
   payments_paused(), so this wraps the flex row and drops the info notice onto its OWN full-width line
   BELOW the headline+price (the row keeps only headline+price, as flag-off) instead of the notice
   becoming a flex sibling that crushed the headline into a one-word-per-line sliver. Flag-off .unlock is
   untouched (no modifier class -> neither rule applies). */
.lp .unlock-paused{flex-wrap:wrap}
.lp .unlock-paused .pay-paused{flex-basis:100%;width:100%;margin:0}

/* sample report */
.lp .sample{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.lp .sig{padding:14px}
.lp .sig .top{display:flex;align-items:center;gap:8px}
.lp .sig .top .ico{color:var(--n600);display:inline-flex}
.lp .sig .top .name{font-size:15px;font-weight:500}
.lp .sig .top .badge{margin-left:auto}
.lp .sig .fact{font-size:14px;color:var(--n900);margin-top:8px}
.lp .sig .mean{font-size:14px;color:var(--n700);margin-top:4px}
.lp .sig .cite{font-size:12px;color:var(--n600);margin-top:10px;border-top:1px solid var(--n200);padding-top:8px;display:flex;align-items:center;gap:6px}
.lp .sample-note{text-align:center;margin-top:24px;font-family:var(--fh);font-size:18px;color:var(--n800)}

/* signals grid */
.lp .cluster{margin-bottom:24px}
.lp .cluster h3{font-size:16px;margin-bottom:10px;color:var(--n800)}
.lp .sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.lp .scell{display:flex;align-items:center;gap:8px;background:var(--n0);border:1px solid var(--n300);border-radius:var(--r-sm);padding:9px 11px;font-size:13px;color:var(--n800)}
.lp .scell .ico{color:var(--n600);display:inline-flex;flex:0 0 auto}
/* P1-13: Orientation (Vaastu lens) callout - DISTINCT from the 25-registry grid above (a derived facts-lens
   per ADR-0007, NOT a 26th registry; never a .scell, never in the count). A white panel with a green left
   accent marks it as the differentiator (brand chrome, not a status/verdict colour). Recomputed sRGB:
   heading green #2F4A3C on white #FFFFFF = 9.69:1 (AA); body n700 #555049 on white = 8.9:1 (AA). */
.lp .orientation-plus{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:16px 18px;
  background:var(--n0);border:1px solid var(--n300);border-left:3px solid var(--green);border-radius:var(--r-md)}
.lp .orientation-plus .op-ico{color:var(--green);display:inline-flex;flex:0 0 auto;margin-top:1px}
.lp .orientation-plus b{font-family:var(--fh);font-weight:600;color:var(--green);display:block}
.lp .orientation-plus p{font-size:14px;color:var(--n700);margin:4px 0 0}

/* trust */
.lp .trust-sec{background:var(--n0);border-top:1px solid var(--n300);border-bottom:1px solid var(--n300)}
.lp .trust-sec .big{font-family:var(--fh);font-size:24px;text-align:center;max-width:640px;margin:0 auto 12px}
.lp .trust-sec .big-mech{text-align:center;max-width:620px;margin:0 auto;font-size:15px;color:var(--n700)}
.lp .trust-sec .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:28px}
.lp .trust-sec .row .t{font-size:14px;color:var(--n700)}
.lp .trust-sec .row .t b{color:var(--n900);font-weight:500;font-family:var(--fh)}
.lp .trust-sec .clarity{text-align:center;max-width:620px;margin:18px auto 0;font-size:15px;font-weight:500;color:var(--n900)}

/* example/illustrative labels (link to the real /sample report) */
.lp .example-note{text-align:center;max-width:620px;margin:-14px auto 22px;font-size:13.5px;color:var(--n600)}
.lp .example-note a{color:var(--green);font-weight:500}

/* pricing */
.lp .whypay{max-width:620px;margin:0 auto 18px;padding:20px 24px}
.lp .whypay h3{font-family:var(--fh);font-size:16px;font-weight:500;margin:0 0 8px}
.lp .whypay p{font-size:14px;color:var(--n700);margin:0}
.lp .pricecard{max-width:440px;margin:0 auto;text-align:center;padding:32px}
.lp .pricecard .amt{font-family:var(--fh);font-size:44px;font-weight:500}
.lp .pricecard ul{list-style:none;margin:18px 0 24px;padding:0;text-align:left;display:inline-block}
.lp .pricecard li{font-size:14px;color:var(--n700);padding:5px 0;display:flex;gap:8px;align-items:center}
.lp .pricecard li .ico{color:var(--clear);display:inline-flex;flex:0 0 auto}
.lp .price-cta{display:inline-block;background:var(--green);color:var(--n100);border:none;border-radius:var(--r-md);padding:13px 22px;font-family:var(--fb);font-size:15px;font-weight:500;text-decoration:none;cursor:pointer}
.lp .price-cta:hover{background:var(--green-hover)}

/* footer */
.lp .lp-foot{background:var(--green);color:var(--n100);padding:48px 0 36px;margin-top:8px}
.lp .lp-foot .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
.lp .lp-foot h4{font-family:var(--fh);font-size:14px;font-weight:500;margin-bottom:10px;opacity:.95}
.lp .lp-foot p,.lp .lp-foot li{font-size:13px;opacity:.9;line-height:1.7}
.lp .lp-foot ul{list-style:none;padding:0}
.lp .lp-foot a{color:var(--n100);opacity:.92}
.lp .lp-foot .legal{border-top:1px solid rgba(245,241,234,.18);margin-top:28px;padding-top:18px;font-size:12px;opacity:.88;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.lp .lp-foot .legal .legal-co{flex-basis:100%;opacity:.82}

@media(max-width:720px){
  .lp .wrap{padding:0 18px}
  .lp .nav .right{display:none}
  .lp .lp-hero{padding:40px 0 28px}
  .lp .lp-hero h1{font-size:32px}
  .lp .lp-hero .sub{font-size:16px}
  .lp section{padding:40px 0}
  .lp .section-h{font-size:24px}
  .lp .sgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .lp .unlock{flex-wrap:wrap}
  .lp .lp-foot .cols{grid-template-columns:1fr}
}