/* landing-v2.css — the shared base of the 2026-10 landing handoff (frontpage + ClickSmith),
   docs/design/landing-v1/README.md. Loaded before the page's own CSS (frontpage.css,
   landings/click-builder.css) on <body class="lv2">.
   Page tokens are --lp-* so they never clash with the shell / nav / theme-switcher tokens.
   dark = the handoff's home theme; light = Light v1 (--sl-*, the handoff's light column is
   the same values); hc = black / white, text ≥7:1, boundaries ≥3:1, no glows. */
:root{
  --lp-bg:#0e0e0e;--lp-bg2:#0b0b0b;--lp-surf0:#121211;--lp-surf:#151514;--lp-surf2:#1b1b19;
  --lp-line:#1f1f1d;--lp-line2:#262624;--lp-line3:#3a3a36;--lp-track:#24241f;--lp-dim:#2c2c29;--lp-dim2:#34342f;
  --lp-ink:#f2f0ea;--lp-ink2:#b5b2a8;--lp-ink3:#8a877e;
  --lp-gold-fill:#e3a948;--lp-gold-text:#e3a948;--lp-gold:#e3a948;--lp-on-gold:#0e0e0e;
  --lp-glow:rgba(227,169,72,.55);--lp-sh-deep:rgba(0,0,0,.8);--lp-paper:#f6f4ee;
  --lp-ok:#5bb98c;--lp-ok-text:#5bb98c;--lp-cs-ink:#6f9be0;
  --lp-spot:1; /* hero spotlights on/off */
  --serif:"Playfair Display",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  /* the names the theme switcher (theme-switcher.css) reads */
  --text:var(--lp-ink);--muted:var(--lp-ink2);--faint:var(--lp-ink3);--border:var(--lp-line3);
  --card:var(--lp-surf);--gold:var(--lp-gold-text);--gold-bright:var(--lp-gold-text);
}
html[data-pf-theme="light"]:not([data-pf-theme-locked]){
  --lp-bg:var(--sl-surface-page);--lp-bg2:var(--sl-surface-panel);--lp-surf0:var(--sl-surface-panel);
  --lp-surf:var(--sl-surface-panel);--lp-surf2:var(--sl-surface-plot);
  --lp-line:var(--sl-line-default);--lp-line2:var(--sl-line-default);--lp-line3:var(--sl-line-control);
  --lp-track:var(--sl-surface-pressed);--lp-dim:var(--sl-viz-grid-major);--lp-dim2:var(--sl-viz-bar-neutral);
  --lp-ink:var(--sl-ink-primary);--lp-ink2:var(--sl-ink-secondary);--lp-ink3:var(--sl-ink-faint);
  --lp-gold-fill:var(--sl-accent-fill);--lp-gold-text:var(--sl-accent-text);--lp-gold:var(--sl-accent-line);
  --lp-on-gold:var(--sl-ink-primary);--lp-glow:rgba(184,128,15,.35);--lp-sh-deep:rgba(24,24,29,.16);
  --lp-paper:#fff;--lp-ok:var(--sl-ok-fill);--lp-ok-text:var(--sl-ok-ink);--lp-cs-ink:#4067a5;
  color-scheme:light;
}
html[data-pf-theme="hc"]:not([data-pf-theme-locked]){
  --lp-bg:#000;--lp-bg2:#000;--lp-surf0:#000;--lp-surf:#000;--lp-surf2:#000;
  --lp-line:#8c8c8c;--lp-line2:#8c8c8c;--lp-line3:#b3b3b3;--lp-track:#5c5c5c;--lp-dim:#5c5c5c;--lp-dim2:#5c5c5c;
  --lp-ink:#fff;--lp-ink2:#e6e6e6;--lp-ink3:#ccc;
  --lp-gold-fill:#f5be00;--lp-gold-text:#f5be00;--lp-gold:#f5be00;--lp-on-gold:#000;
  --lp-glow:transparent;--lp-sh-deep:transparent;--lp-paper:#fff;
  --lp-ok:#8fd16a;--lp-ok-text:#8fd16a;--lp-cs-ink:#9cc1ff;--lp-spot:0;
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;}
body.lv2{background:var(--lp-bg);color:var(--lp-ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.lv2 main{position:relative;overflow-x:hidden;}
.lv2 img{max-width:100%;}
.lv2 :where(main,footer) a{color:var(--lp-gold-text);text-underline-offset:3px;}
.lv2 :is(a,button,summary):focus-visible{outline:2px solid var(--lp-gold-text);outline-offset:2px;border-radius:4px;}
html[data-pf-theme="hc"]:not([data-pf-theme-locked]) .lv2 :is(a,button,summary):focus-visible{outline-width:3px;}
.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;}

/* ── layout + type ── */
.lv-sec{position:relative;padding:120px 24px;}
.lv-band{background:var(--lp-bg2);border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line);}
.lv-wrap{position:relative;max-width:1180px;margin:0 auto;}
.lv-head{display:flex;flex-direction:column;gap:16px;max-width:760px;}
.lv-eyebrow{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lp-gold-text);}
.lv-h2{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(36px,5vw,64px);line-height:1.04;letter-spacing:-.01em;text-wrap:balance;color:var(--lp-ink);}
.lv-h2 em{font-style:italic;}
.lv-lede{margin:0;font-size:18px;line-height:1.55;color:var(--lp-ink2);text-wrap:pretty;}
.lv-spot{position:absolute;inset:0;pointer-events:none;opacity:var(--lp-spot);}

/* ── buttons ── */
.lv-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:10px;font-size:17px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;border:1px solid transparent;font-family:inherit;transition:filter .15s,transform .15s,background .15s,border-color .15s;}
.lv2 .lv-btn--gold{background:var(--lp-gold-fill);color:var(--lp-on-gold);box-shadow:0 10px 30px -10px var(--lp-glow);}
.lv2 .lv-btn--gold:hover{filter:brightness(1.06);transform:translateY(-1px);color:var(--lp-on-gold);}
.lv2 .lv-btn--ghost{padding:16px 22px;font-size:16px;font-weight:600;border-color:var(--lp-line3);color:var(--lp-ink);background:transparent;}
.lv2 .lv-btn--ghost:hover{border-color:var(--lp-ink3);color:var(--lp-ink);}
.lv-btn--xl{padding:18px 30px;border-radius:12px;font-size:18px;box-shadow:0 14px 40px -12px var(--lp-glow);}
.lv-arrow{font-size:18px;line-height:1;}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv2 .lv-btn--gold{border-color:var(--sl-accent-line);box-shadow:var(--sl-shadow-1),0 10px 30px -10px var(--lp-glow);}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv2 .lv-btn--gold:hover{filter:none;background:var(--sl-accent-fill-hover);transform:none;}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv2 .lv-btn--gold:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sl-ink-primary);}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv2 .lv-btn--ghost{background:var(--sl-surface-panel);}

/* ── small badges: FREE / €49 / SOON ── */
.lv-tag{flex:none;padding:3px 7px;border-radius:6px;border:1px solid var(--lp-line3);color:var(--lp-ink2);font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;white-space:nowrap;text-transform:uppercase;}
.lv-tag--price{border-color:rgba(227,169,72,.5);color:var(--lp-gold-text);}
.lv-tag--soon{border-color:var(--lp-line2);color:var(--lp-ink3);}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv-tag--price{border-color:var(--sl-accent-line);background:var(--sl-accent-tint);}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv-tag--soon{border-style:dashed;border-color:var(--sl-line-disabled);color:var(--sl-ink-secondary);}
html[data-pf-theme="hc"]:not([data-pf-theme-locked]) .lv-tag{border-color:#fff;color:#fff;}
html[data-pf-theme="hc"]:not([data-pf-theme-locked]) .lv-tag--price{border-color:var(--lp-gold);color:var(--lp-gold-text);}

/* Tool colour: --tc (Tool::COLORS, inline) in dark; Light v1 fill/ink via data-sl-tool. */
.lv2 [data-sl-tool]{--c:var(--tc,var(--lp-gold));--ci:var(--tc,var(--lp-gold-text));}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv2 [data-sl-tool]{--c:var(--tool-fill,var(--tc));--ci:var(--tool-ink,color-mix(in oklab,var(--tc) 55%,#18181d));}
html[data-pf-theme="hc"]:not([data-pf-theme-locked]) .lv2 [data-sl-tool]{--ci:#fff;}
.lv-sq{flex:none;width:10px;height:10px;border-radius:3px;background:var(--c);box-shadow:0 0 10px var(--c);}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv-sq{box-shadow:none;}

/* ── scroll reveals (only once the page script runs: no JS = everything shown) ──
   A slide-up plus a top-down wipe instead of an opacity fade: text is either hidden or at
   full contrast, never half-transparent (a mid-fade heading is unreadable, and the journey
   contrast audit rightly flags it). The open inset is negative so nothing gets clipped. */
.lv-js .lv-rv{clip-path:inset(0 0 100% 0);transform:translateY(28px);transition:clip-path .7s ease,transform .7s ease;transition-delay:var(--d,0s);}
.lv-js .lv-rv.is-in{clip-path:inset(-60px);transform:none;}
@media (prefers-reduced-motion:reduce){.lv-js .lv-rv{clip-path:none;transform:none;transition:none;}}

/* ── FAQ (native <details>, JSON-LD mirrors it) ── */
.lv-faq-wrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:32px;}
.lv-faq-h{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(34px,4.4vw,52px);line-height:1.08;}
.lv-faq{display:flex;flex-direction:column;border-top:1px solid var(--lp-line2);}
.lv-faq details{border-bottom:1px solid var(--lp-line2);}
.lv-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;font-size:19px;font-weight:600;color:var(--lp-ink);}
.lv-faq summary::-webkit-details-marker{display:none;}
.lv-faq summary::after{content:"+";flex:none;font-family:var(--mono);font-size:20px;font-weight:400;color:var(--lp-gold-text);transition:transform .25s;}
.lv-faq details[open] summary::after{transform:rotate(45deg);}
.lv-faq p,.lv-faq .ans{margin:0;padding:0 4px 24px;max-width:720px;font-size:16px;line-height:1.6;color:var(--lp-ink2);}
.lv-faq b{color:var(--lp-ink);font-weight:600;}

/* ── final CTA ── */
.lv-final{position:relative;padding:140px 24px;overflow:hidden;text-align:center;}
.lv-final .lv-wrap{max-width:820px;display:flex;flex-direction:column;align-items:center;gap:26px;}
.lv-final h2{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:-.02em;text-wrap:balance;}
.lv-final p{margin:0;max-width:580px;font-size:19px;line-height:1.55;color:var(--lp-ink2);}
.lv-final .lv-small{font-size:14px;color:var(--lp-ink3);}
.lv-final .lv-small a{font-weight:600;}
.lv-live{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:6px;background:var(--lp-gold-fill);color:var(--lp-on-gold);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}

/* ── the shared Media nav, re-coloured + re-set in Hanken Grotesk (structure untouched;
   light/hc keep nav.css's own theme blocks, which carry the same values) ── */
.lv2 .sqm-nav{--sans:"Hanken Grotesk",system-ui,sans-serif;--bg:var(--lp-bg);--text:var(--lp-ink);--muted:var(--lp-ink2);
  --faint:var(--lp-ink3);--border:var(--lp-line3);--border-soft:var(--lp-line);--gold:var(--lp-gold-fill);}
.lv2 .nv-brand{gap:10px;}
.lv2 .nv-brand__mark{width:auto;height:auto;}
.lv2 .nv-brand__mark img{width:28px;height:28px;}
.lv2 .nv-brand__wm{flex-direction:row;align-items:baseline;line-height:1.2;}
.lv2 .nv-brand__wm b{font-family:var(--sans);font-size:17px;font-weight:700;letter-spacing:0;color:var(--lp-ink);}
.lv2 .nv-brand__wm span{font-family:var(--sans);font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;margin:0;color:var(--lp-ink2);}
.lv2 .nv-primary a{font-size:14px;font-weight:500;padding:8px 12px;color:var(--lp-ink2);}
.lv2 .nv-login{font-weight:600;color:var(--lp-ink);padding:8px 10px;}
.lv2 .nv-cta{border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;background:var(--lp-gold-fill);color:var(--lp-on-gold);box-shadow:none;}
.lv2 .nv-cta:hover{background:var(--lp-gold-fill);filter:brightness(1.06);}
.lv2 .nv-trigger{min-height:38px;padding:0 12px;border-radius:8px;background:transparent;border-color:var(--lp-line3);font-weight:500;}
.lv2 .nv-trigger svg{color:currentColor;}
.lv2 .sqm-nav .pf-theme-trigger{border-radius:8px;background:transparent;border-color:var(--lp-line3);color:var(--lp-ink);font-weight:500;font-size:14px;}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv2 .nv-brand__mark{width:auto;height:auto;background:none;border:0;}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv2 .nv-brand__mark img{width:28px;height:28px;filter:invert(1);opacity:1;}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .lv2 .nv-cta:hover{filter:none;}

/* ── the platform chain + "also free" pills (partials/landing-chain.blade.php), shared by the
   ClickSmith and TempoSense landings. A 1.1 s loop (the page script) lifts each card in turn:
   .is-on, and the cards it passed keep their colour edge: .is-past. ── */
.cb-chain{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;}
.cb-chain li{display:flex;}
.cb-link{flex:1;position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-radius:16px;background:var(--lp-surf);border:1.5px solid var(--lp-line2);text-decoration:none;transition:all .5s ease;}
.lv2 a.cb-link{color:var(--lp-ink);}
.cb-link.is-on{background:var(--lp-surf2);border-color:var(--c);transform:translateY(-6px);box-shadow:0 20px 40px -20px var(--c);}
.cb-link.is-past{border-color:var(--c);}
.cb-link-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.cb-link-when{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lp-ink3);}
.cb-link.is-here .lv-tag{border-color:var(--c);color:var(--ci);}
.cb-link-name{display:flex;gap:10px;align-items:center;font-family:var(--serif);font-size:22px;font-weight:600;}
.cb-link-d{font-size:14px;line-height:1.5;color:var(--lp-ink2);}
.cb-link-out{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--ci);}
.cb-also{display:flex;flex-direction:column;gap:14px;}
.cb-pills{display:flex;gap:8px;flex-wrap:wrap;}
.cb-pill{display:flex;gap:8px;align-items:center;padding:9px 14px;border-radius:999px;background:var(--lp-surf);border:1px solid var(--lp-line2);font-size:14px;font-weight:500;text-decoration:none;}
.lv2 a.cb-pill{color:var(--lp-ink);}
.cb-pill:hover{border-color:var(--lp-line3);background:var(--lp-surf2);}
.cb-pill .lv-sq{width:8px;height:8px;border-radius:2px;box-shadow:none;}
.lv2 a.cb-pill--all{background:transparent;border-color:var(--lp-line3);color:var(--lp-gold-text);font-weight:600;}
html[data-pf-theme="light"]:not([data-pf-theme-locked]) .cb-link.is-on{box-shadow:var(--sl-shadow-2);}
html[data-pf-theme="hc"]:not([data-pf-theme-locked]) .cb-link.is-on{box-shadow:none;background:#000;}
html[data-pf-theme="hc"]:not([data-pf-theme-locked]) :is(.cb-link:hover,.cb-pill:hover){border-color:#fff;}
@media (prefers-reduced-motion:reduce){.cb-link{transition:none;}}

/* ── footer ── */
.lv-foot{border-top:1px solid var(--lp-line);padding:40px 24px;font-size:14px;color:var(--lp-ink3);}
.lv-foot .lv-wrap{display:flex;flex-wrap:wrap;gap:16px 24px;justify-content:space-between;align-items:center;}
.lv-foot nav{display:flex;gap:10px 18px;flex-wrap:wrap;}
.lv-foot nav a{color:var(--lp-ink2);text-decoration:none;}
.lv-foot nav a:hover{color:var(--lp-ink);}
html:is([data-pf-theme="light"],[data-pf-theme="hc"]):not([data-pf-theme-locked]) .lv-foot nav a{text-decoration:underline;text-decoration-color:var(--lp-line3);}
.lv-foot .lp-theme{flex-basis:100%;}

@media (max-width:600px){
  .lv-sec{padding:84px 20px;}
  .lv-final{padding:100px 20px;}
  .lv-btn{white-space:normal;}
}