/* Hallmark · macrostructure: Marquee Hero (stage) · theme: studied-DNA (source: Solari.html + styles.css) · tone: 落ち着き/信頼/整理 · accent: navy hue 256 · enrichment: split-flap departure board (Tier A) */

/* ============================================================
   Solari — Landing page styles (v2)
   Reuses the product design system (styles.css) tokens + the
   split-flap / journey / checklist component CSS. The .lp root
   re-declares the token block so component classes resolve
   outside the app shell, but lays out as a normal scrolling page.
   Japanese-primary copy: heading tracking + line-height relaxed.
   ============================================================ */

html {
  color-scheme: light;
  background: oklch(0.985 0.004 256);
}

html[data-theme="dark"] {
  color-scheme: dark;
  background: oklch(0.18 0.018 256);
}

.lp {
  --bh: 256;            /* accent hue — set inline by Tweaks */
  --rs: 1;              /* radius scale — set inline by Tweaks */
  --font: 'Hanken Grotesk', 'Noto Sans JP', system-ui, sans-serif;

  --blue:        oklch(0.62 0.13 var(--bh));
  --blue-strong: oklch(0.55 0.145 var(--bh));
  --blue-soft:   oklch(0.95 0.035 var(--bh));
  --blue-soft2:  oklch(0.91 0.05 var(--bh));
  --blue-ink:    oklch(0.46 0.13 var(--bh));
  --navy:        oklch(0.30 0.06 var(--bh));
  --navy-2:      oklch(0.24 0.05 var(--bh));

  --bg:        oklch(0.985 0.004 var(--bh));
  --bg-tint:   oklch(0.972 0.012 var(--bh));
  --surface:   #ffffff;
  --surface-2: oklch(0.975 0.006 var(--bh));
  --ink:    oklch(0.27 0.028 var(--bh));
  --ink-2:  oklch(0.50 0.02 var(--bh));
  --ink-3:  oklch(0.66 0.014 var(--bh));
  --line:   oklch(0.915 0.007 var(--bh));
  --line-2: oklch(0.95 0.006 var(--bh));
  --good:   oklch(0.62 0.13 158);
  --star:   oklch(0.78 0.13 80);

  --r-xl: calc(26px * var(--rs));
  --r-lg: calc(20px * var(--rs));
  --r-md: calc(14px * var(--rs));
  --r-sm: calc(10px * var(--rs));
  --r-pill: 999px;

  --sh-1: 0 1px 2px oklch(0.5 0.03 var(--bh) / .06), 0 1px 1px oklch(0.5 0.03 var(--bh) / .04);
  --sh-2: 0 2px 6px oklch(0.5 0.03 var(--bh) / .06), 0 12px 28px -16px oklch(0.45 0.06 var(--bh) / .28);
  --sh-3: 0 8px 24px -8px oklch(0.45 0.06 var(--bh) / .22), 0 30px 60px -28px oklch(0.45 0.08 var(--bh) / .34);
  --sh-4: 0 18px 50px -18px oklch(0.4 0.07 var(--bh) / .34), 0 50px 90px -50px oklch(0.35 0.08 var(--bh) / .5);

  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.006em;
  position: relative;
  overflow-x: clip;
}
.lp[data-theme="dark"] {
  color-scheme: dark;

  --blue:        oklch(0.70 0.12 var(--bh));
  --blue-strong: oklch(0.76 0.12 var(--bh));
  --blue-soft:   oklch(0.30 0.045 var(--bh));
  --blue-soft2:  oklch(0.36 0.06 var(--bh));
  --blue-ink:    oklch(0.82 0.07 var(--bh));
  --navy:        oklch(0.22 0.035 var(--bh));
  --navy-2:      oklch(0.17 0.03 var(--bh));

  --bg:        oklch(0.18 0.018 var(--bh));
  --bg-tint:   oklch(0.22 0.02 var(--bh));
  --surface:   oklch(0.255 0.02 var(--bh));
  --surface-2: oklch(0.31 0.022 var(--bh));
  --ink:    oklch(0.94 0.01 var(--bh));
  --ink-2:  oklch(0.78 0.014 var(--bh));
  --ink-3:  oklch(0.64 0.018 var(--bh));
  --line:   oklch(0.40 0.02 var(--bh));
  --line-2: oklch(0.34 0.018 var(--bh));
  --good:   oklch(0.72 0.13 158);
  --star:   oklch(0.84 0.13 80);

  --sh-1: 0 1px 2px oklch(0 0 0 / .28), 0 1px 1px oklch(0 0 0 / .18);
  --sh-2: 0 2px 8px oklch(0 0 0 / .26), 0 18px 36px -20px oklch(0 0 0 / .64);
  --sh-3: 0 10px 28px -12px oklch(0 0 0 / .50), 0 34px 68px -34px oklch(0 0 0 / .72);
  --sh-4: 0 20px 54px -22px oklch(0 0 0 / .62), 0 56px 96px -54px oklch(0 0 0 / .82);
}
.lp * { box-sizing: border-box; }
.lp button { font-family: inherit; cursor: pointer; color: inherit; }
.lp ::selection { background: var(--blue-soft2); }

/* focus-visible only (never bare :focus) */
.lp button:focus-visible,
.lp a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-sm); }
.lp .btn:focus-visible { border-radius: var(--r-md); }
.lp .lp-brand:focus-visible,
.lp .lp-card:focus-visible { border-radius: var(--r-lg); }
.lp .mk-na-do:focus-visible,
.lp .mk-item:focus-visible { border-radius: var(--r-md); }

.lp-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.lp-section { padding: 96px 0; position: relative; }
.lp-section.tint { background: var(--bg-tint); }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-ink);
}
.lp-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--blue); opacity: .6; }
.lp-eyebrow.center::before { display: none; }

/* JP-tuned headings (relaxed tracking / line-height vs v1) */
.lp-h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; line-height: 1.26; letter-spacing: -0.018em; text-wrap: balance; margin: 18px 0 0; }
.lp-lead { font-size: clamp(16px, 1.3vw, 17.5px); line-height: 1.85; color: var(--ink-2); font-weight: 500; max-width: 40em; margin: 18px 0 0; text-wrap: pretty; }
.lp .nb { display: inline-block; } /* JP phrase-unit line breaking for headings/leads */
.lp-sectionhead { max-width: 720px; }
.lp-sectionhead.center { max-width: 760px; margin: 0 auto; text-align: center; }
.lp-sectionhead.center .lp-lead { margin-left: auto; margin-right: auto; }

/* ============ Buttons (landing-scale) ============ */
.lp .btn > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lp .btn-xl { height: 58px; padding: 0 28px; font-size: 17px; border-radius: var(--r-md); }
.lp .btn-play .play-ic { width: 26px; height: 26px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink);
  display: grid; place-items: center; margin-left: -6px; transition: .15s; }
.lp .btn-play:hover .play-ic { background: var(--blue); color: #fff; }

/* ============ Nav ============ */
.lp-nav-wrap { position: sticky; top: 0; z-index: 100; }
.lp-nav {
  height: 70px; display: flex; align-items: center; gap: 28px;
  background: rgba(255,255,255,.72); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.lp-nav.scrolled { border-color: var(--line); box-shadow: var(--sh-1); }
.lp-brand { display: flex; align-items: center; gap: 11px; background: none; border: 0; padding: 0; }
.lp-brand-mark { position: relative; overflow: hidden; width: 36px; height: 36px; border-radius: 12px;
  background: radial-gradient(circle at 78% 76%, oklch(0.62 0.13 var(--bh) / .22) 0 18%, transparent 19%), linear-gradient(180deg, var(--navy), var(--navy-2)); display: grid; place-items: center; box-shadow: var(--sh-1); }
.lp-brand-mark::before { content: ""; position: absolute; left: 10px; top: 10px; width: 19px; height: 5px; border-radius: 999px;
  background: oklch(0.96 0.012 var(--bh)); box-shadow: 0 10px 0 oklch(0.90 0.02 var(--bh)), 0 20px 0 oklch(0.82 0.025 var(--bh)); }
.lp-brand-dot { position: absolute; right: 7px; bottom: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px oklch(0.62 0.13 var(--bh) / .24); }
.lp-brand-name { font-size: 22px; font-weight: 800; letter-spacing: -0.035em; }
.lp-navlinks { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.lp-navlink { background: none; border: 0; padding: 9px 14px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; color: var(--ink-2); transition: .15s; white-space: nowrap; }
.lp-navlink:hover { background: var(--surface-2); color: var(--ink); }
.lp-nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lp-navghost { background: none; border: 0; padding: 10px 14px; border-radius: var(--r-sm); font-size: 15px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.lp-navghost:hover { color: var(--ink); }
.lp-lang-toggle,
.lp-theme-toggle { min-width: 42px; height: 38px; display: inline-grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 13px; font-weight: 800; color: var(--ink); line-height: 1; transition: .15s; }
.lp-theme-toggle { width: 42px; padding: 0; }
.lp-theme-toggle svg { display: block; }
.lp-lang-toggle:hover,
.lp-theme-toggle:hover,
.lp-theme-toggle[aria-pressed="true"] { border-color: var(--blue-soft2); background: var(--surface-2); color: var(--blue-ink); }
.lp-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); place-items: center; }

/* mobile menu (≤720px) — opens below nav */
.lp-mobilemenu { display: none; position: absolute; top: 70px; left: 0; right: 0; z-index: 99;
  background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--sh-2);
  flex-direction: column; padding: 8px; gap: 2px; }
.lp-mobilemenu.open { display: flex; }
.lp-mobilemenu button { background: none; border: 0; text-align: left; padding: 13px 14px; border-radius: var(--r-sm);
  font-size: 15.5px; font-weight: 600; color: var(--ink); transition: .15s; }
.lp-mobilemenu button:hover { background: var(--surface-2); }
.lp-mobilemenu .lp-mobile-lang,
.lp-mobilemenu .lp-mobile-theme { border-top: 1px solid var(--line-2); border-radius: 0; margin-top: 4px; color: var(--blue-ink); font-weight: 800; }
.lp-mobilemenu .lp-mobile-theme { display: flex; align-items: center; gap: 10px; }

.lp[data-theme="dark"] .lp-nav {
  background: oklch(0.20 0.018 var(--bh) / .78);
}
.lp[data-theme="dark"] .lp-card-cat {
  background: oklch(0.25 0.02 var(--bh) / .92);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* ============ Hero (stage) ============ */
.lp-hero { padding: 60px 0 40px; position: relative; }
.lp-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lp-hero-glow { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.lp-hero-glow.a { width: 540px; height: 540px; top: -200px; right: -120px; background: radial-gradient(circle, oklch(0.86 0.08 var(--bh)), transparent 70%); opacity: .35; }
.lp-hero-glow.b { width: 460px; height: 460px; top: 120px; left: -180px; background: radial-gradient(circle, oklch(0.9 0.05 calc(var(--bh) + 40)), transparent 70%); opacity: .4; }
.lp[data-theme="dark"] .lp-hero-glow.a { opacity: .18; }
.lp[data-theme="dark"] .lp-hero-glow.b { opacity: .20; }
.lp-hero .lp-container { position: relative; z-index: 1; }

.lp-hero-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.lp-hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700;
  color: var(--blue-ink); background: var(--surface); border: 1px solid var(--blue-soft2); padding: 7px 8px 7px 14px; border-radius: var(--r-pill); box-shadow: var(--sh-1); }
.lp-hero-badge .pin { display: inline-flex; align-items: center; gap: 5px; background: var(--blue-soft); color: var(--blue-ink); padding: 3px 9px; border-radius: var(--r-pill); font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em; }
.lp-hero-title { font-size: clamp(40px, 5.6vw, 68px); font-weight: 800; line-height: 1.16; letter-spacing: -0.022em; margin: 22px 0 0; text-wrap: balance; }
.lp-hero-title .accent { color: var(--blue-ink); }
.lp-hero-sub { font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.8; color: var(--ink-2); font-weight: 500; margin: 20px auto 0; max-width: 40em; text-wrap: pretty; }
.lp-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; justify-content: center; }

/* hero proof row — chips (no avatars / no head-count) */
.lp-hero-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 28px; }
.lp-hero-proof .pchip { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.lp-hero-proof .pchip .pic { color: var(--blue-ink); display: grid; place-items: center; flex: 0 0 auto; }

.lp-hero-stage { max-width: 1040px; margin: 40px auto 0; }

/* ============ Departure board XL (hero centerpiece, dark) ============ */
.lp-bigboard { position: relative; border-radius: var(--r-xl); overflow: hidden;
  /* shared column template: flap strip (14 tiles) · status · next step */
  --bb-cols: calc(14 * 25px + 13 * 3px) 130px minmax(0, 1fr);
  background: linear-gradient(180deg, oklch(0.30 0.05 var(--bh)), oklch(0.23 0.045 var(--bh)));
  border: 1px solid oklch(0.22 0.04 var(--bh)); box-shadow: var(--sh-4); }
.lp-bigboard-tiles { position: absolute; inset: 0; opacity: .08; pointer-events: none;
  background-image: linear-gradient(oklch(1 0 0 / .5) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / .5) 1px, transparent 1px);
  background-size: 40px 54px; mask-image: radial-gradient(120% 90% at 80% 0%, #000, transparent 78%); }
.lp-bigboard-inner { position: relative; z-index: 1; padding: 22px 26px 26px; }
.lp-bigboard-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; }
.lp-bigboard-live { display: inline-flex; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: oklch(0.82 0.04 var(--bh)); }
.lp-bigboard-live .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px oklch(0.62 0.13 158 / .25); }
.lp-bigboard-clock { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; letter-spacing: .1em;
  color: oklch(0.82 0.04 var(--bh)); font-variant-numeric: tabular-nums; }
.lp-bigboard-cols { display: grid; grid-template-columns: var(--bb-cols); gap: 18px; align-items: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: oklch(0.6 0.03 var(--bh)); padding: 0 0 10px; }
.lp-bigboard-row { display: grid; grid-template-columns: var(--bb-cols); gap: 18px; align-items: center;
  padding: 16px 0; border-top: 1px solid oklch(1 0 0 / .07); }
.lp-bigboard-sit { min-width: 0; }
.lp-bigboard-step { font-size: 15px; font-weight: 600; color: oklch(0.93 0.008 var(--bh)); line-height: 1.4; animation: lpStepIn .5s ease; }
@keyframes lpStepIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============ Departure board — light mini (final CTA) ============ */
.lp-board {
  display: inline-flex; flex-direction: column; gap: 0; margin-top: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); overflow: hidden; max-width: 100%;
}
.lp-board-top { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.lp-board-live { display: inline-flex; align-items: center; gap: 8px; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.lp-board-live .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px oklch(0.62 0.13 158 / .2); }
.lp-board-cols { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lp-board-row { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }
.lp-board-situation { flex: 1 1 auto; min-width: 0; }
.lp-board-next { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.lp-board-next .arrow { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-soft); color: var(--blue-ink); display: grid; place-items: center; flex: 0 0 auto; }
.lp-board-next-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-board-next-lbl { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.lp-board-next-step { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; animation: lpStepIn .5s ease; }
.lp[data-theme="dark"] .lp-finalcta .lp-board .flap-tile {
  background: linear-gradient(180deg, oklch(0.99 0.003 var(--bh)), oklch(0.95 0.006 var(--bh)));
  border-color: oklch(0.915 0.007 var(--bh));
  box-shadow: 0 1px 1px oklch(0.5 0.03 var(--bh) / .05), inset 0 1px 0 rgba(255,255,255,.6);
  color: oklch(0.27 0.028 var(--bh));
}
.lp[data-theme="dark"] .lp-finalcta .lp-board .flap-tile::after {
  background: oklch(0.4 0.02 var(--bh) / .12);
}
.lp[data-theme="dark"] .lp-finalcta .lp-board .flap-tile.is-blank {
  background: oklch(0.96 0.005 var(--bh));
}

/* ============ Problem — information overload ============ */
.lp-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: center; }
.lp-problem-pivot { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.7;
  margin-top: 24px; padding-left: 16px; border-left: 4px solid var(--blue); }
.lp-chaos { position: relative; height: 400px; }
.lp-chaos-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; box-shadow: var(--sh-3); }
.lp-chaos-core .q { font-size: 15px; font-weight: 700; color: var(--ink); }
.lp-chaos-core .h { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lp-source { position: absolute; display: flex; align-items: center; gap: 9px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 13px 9px 10px; box-shadow: var(--sh-2); font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.lp-source .si { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.lp-source.s1 { top: 6%; left: 2%; transform: rotate(-5deg); }
.lp-source.s2 { top: 0%; right: 8%; transform: rotate(4deg); }
.lp-source.s3 { top: 38%; left: -4%; transform: rotate(3deg); }
.lp-source.s4 { top: 30%; right: -6%; transform: rotate(-4deg); }
.lp-source.s5 { bottom: 6%; left: 8%; transform: rotate(5deg); }
.lp-source.s6 { bottom: 2%; right: 4%; transform: rotate(-3deg); }
.lp-chaos-lines { position: absolute; inset: 0; z-index: 1; }

/* ============ Solution — scattered to checklist ============ */
.lp-transform { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; margin-top: 14px; }
.lp-messy { display: flex; flex-direction: column; gap: 9px; }
.lp-messy .lp-source { position: static; transform: none; }
.lp-messy .lp-source:nth-child(odd) { margin-left: 18px; }
.lp-messy .lp-source:nth-child(3n) { margin-left: 38px; }
.lp-arrow-mid { display: grid; place-items: center; gap: 8px; }
.lp-arrow-mid .ring { width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px oklch(0.55 0.14 var(--bh) / .4); }
.lp-arrow-mid .lbl { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lp-tidy { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-3); }
.lp-tidy-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px; }
.lp-tidy-title { font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; }
.lp-tidy-sec { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-ink); margin: 14px 0 8px; }
.lp-tidy-sec:first-of-type { margin-top: 0; }
.lp-tidy-item { display: flex; align-items: center; gap: 11px; padding: 6px 0; font-size: 14px; font-weight: 500; color: var(--ink); }
.lp-tidy-box { width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; color: #fff; }
.lp-tidy-item.on .lp-tidy-box { background: var(--good); border-color: var(--good); }
.lp-tidy-item.on { color: var(--ink-3); }
.lp-tidy-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-3); }

/* ============ How it works (journey stepper) ============ */
.lp-steps { margin-top: 56px; position: relative; }
.lp-steps-rail { position: absolute; left: 0; right: 0; top: 27px; height: 2px; background: var(--line); z-index: 0; }
.lp-steps-rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-strong)); opacity: .9; }
.lp-steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; z-index: 1; }
.lp-step { text-align: center; display: flex; flex-direction: column; align-items: center; }
.lp-step-node { width: 56px; height: 56px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-2); display: grid; place-items: center; color: var(--blue-ink); position: relative; }
.lp-step-num { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; box-shadow: var(--sh-1); font-variant-numeric: tabular-nums; }
.lp-step-en { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: 18px; }
.lp-step-title { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.lp-step-txt { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); font-weight: 500; margin-top: 6px; max-width: 22ch; }

/* ============ Categories grid (lp-card reused) ============ */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1); transition: transform .18s, box-shadow .18s, border-color .18s; cursor: pointer; display: flex; flex-direction: column; }
.lp-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--blue-soft2); }
.lp-card-cover { position: relative; height: 168px; }
.lp-card-cat { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px); padding: 5px 11px 5px 8px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; box-shadow: var(--sh-1); }
.lp-card-cat .ct { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.lp-card-body { padding: 16px 17px 17px; display: flex; flex-direction: column; flex: 1; }
.lp-card-title { font-size: 18px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.3; }
.lp-card-blurb { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); font-weight: 500; margin-top: 8px; flex: 1; text-wrap: pretty; }
.lp-card-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.lp-card-chips .lp-card-when { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-3); }
.lp-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.lp-card-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.lp-card-open { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; color: var(--blue-ink); white-space: nowrap; }
.lp-cats-note { text-align: center; font-size: 14px; color: var(--ink-3); font-weight: 500; margin-top: 32px; }

/* ============ Demo (Execute experience) ============ */
.lp-demo { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--sh-4); padding: 24px; }
.lp-demo-try { position: absolute; top: 18px; right: 18px; z-index: 2; }
.lp-demo-points { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }
.lp-dpoint { display: flex; gap: 15px; align-items: flex-start; }
.lp-dpoint-ic { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--blue-soft); color: var(--blue-ink); display: grid; place-items: center; flex: 0 0 auto; }
.lp-dpoint b { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; }
.lp-dpoint p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); font-weight: 500; margin-top: 4px; }

/* mock execute screen (mk-* reused for ExecuteDemo) */
.mk-exec-head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.mk-exec-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.mk-exec-cat { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.mk-board { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 16px 18px; box-shadow: var(--sh-1); }
.mk-board-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mk-board-pct { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mk-na { display: flex; align-items: center; gap: 14px; margin-top: 16px; background: var(--surface);
  border: 1px solid var(--blue-soft2); border-left: 4px solid var(--blue); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--sh-1); }
.mk-na-body { flex: 1; min-width: 0; }
.mk-na-lbl { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.mk-na-text { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-top: 3px; line-height: 1.3; }
.mk-na-do { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--blue); color: #fff; display: grid; place-items: center; flex: 0 0 auto; box-shadow: 0 2px 8px oklch(0.55 0.14 var(--bh) / .4); border: 0; }
.mk-list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.mk-sec-lbl { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--blue-ink); margin: 8px 0 2px; }
.mk-sec-lbl:first-child { margin-top: 0; }
.mk-item { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.mk-item:hover { border-color: var(--blue-soft2); }
.mk-item .box { width: 24px; height: 24px; border-radius: 7px; border: 2.5px solid var(--line); flex: 0 0 auto; display: grid; place-items: center; color: #fff; }
.mk-item .txt { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.mk-item.done .box { background: var(--good); border-color: var(--good); }
.mk-item.done .txt { color: var(--ink-3); text-decoration: line-through; }
.mk-item.next { border-color: var(--blue-soft2); box-shadow: 0 0 0 3px var(--blue-soft); }
.mk-item.next .box { border-color: var(--blue); }

/* ============ Trust ============ */
.lp-trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.lp-trust-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-1); }
.lp-trust-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.lp-trust-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-top: 8px; }
.lp-trust-txt { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); font-weight: 500; margin-top: 8px; text-wrap: pretty; }
.lp-trust-note { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 24px; line-height: 1.6; }

/* ============ Philosophy ============ */
.lp-philo { background: var(--navy); color: oklch(0.96 0.01 var(--bh)); border-radius: var(--r-xl); padding: 84px 56px; position: relative; overflow: hidden; }
.lp-philo-tiles { position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: linear-gradient(oklch(1 0 0 / .14) 1px, transparent 1px), linear-gradient(90deg, oklch(1 0 0 / .14) 1px, transparent 1px);
  background-size: 38px 52px; mask-image: radial-gradient(120% 90% at 80% 0%, #000, transparent 75%); }
.lp-philo-inner { position: relative; z-index: 1; max-width: 800px; }
.lp-philo .lp-eyebrow { color: oklch(0.84 0.07 var(--bh)); }
.lp-philo-statement { font-size: clamp(32px, 4.6vw, 56px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 20px 0 0; text-wrap: balance; }
.lp-philo-statement em { font-style: normal; color: oklch(0.82 0.1 var(--bh)); }
.lp-philo-sub { font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.8; color: oklch(0.85 0.02 var(--bh)); font-weight: 500; margin: 24px 0 0; max-width: 50em; text-wrap: pretty; }
.lp-philo-not { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.lp-philo-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; white-space: nowrap;
  color: oklch(0.86 0.02 var(--bh)); background: oklch(1 0 0 / .07); border: 1px solid oklch(1 0 0 / .12); padding: 9px 15px; border-radius: var(--r-pill); }
.lp-philo-pill .x { color: oklch(0.7 0.13 25); display: grid; place-items: center; }
.lp-philo-pill.yes { color: oklch(0.94 0.03 var(--bh)); background: oklch(0.62 0.13 var(--bh) / .26); border-color: oklch(0.7 0.1 var(--bh) / .5); }
.lp-philo-pill.yes .x { color: oklch(0.84 0.1 158); }

/* ============ Final CTA ============ */
.lp-finalcta { text-align: center; background:
    radial-gradient(120% 140% at 50% -20%, var(--blue-soft) 0%, transparent 60%), var(--bg-tint);
  border-top: 1px solid var(--line); }
.lp-finalcta .lp-board { margin: 0 auto 34px; }
.lp-finalcta-title { font-size: clamp(32px, 4.8vw, 56px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.lp-finalcta-sub { font-size: clamp(16px, 1.4vw, 18px); color: var(--ink-2); font-weight: 500; margin: 18px auto 0; max-width: 40em; line-height: 1.8; }
.lp-finalcta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }

/* ============ Support ============ */
.lp-support { background: var(--surface); border-top: 1px solid var(--line); padding: 80px 0; }
.lp-support-card { max-width: 560px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lp-support-card .flap { margin-bottom: 4px; }
.lp-support-title { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; line-height: 1.25;
  letter-spacing: -0.02em; text-wrap: balance; margin: 4px 0 0; }
.lp-support-lead { font-size: 15.5px; color: var(--ink-2); font-weight: 500;
  line-height: 1.8; max-width: 36em; margin: 4px auto 0; text-wrap: pretty; }
.lp-support-cta { margin-top: 12px; text-decoration: none; }
.lp-support-cta:hover { text-decoration: none; }
.lp-support-meta { font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  letter-spacing: .06em; color: var(--ink-3); margin-top: 6px; }
.lp[data-theme="dark"] .lp-support .flap-tile {
  background: linear-gradient(180deg, oklch(0.99 0.003 var(--bh)), oklch(0.95 0.006 var(--bh)));
  border-color: oklch(0.915 0.007 var(--bh));
  box-shadow: 0 1px 1px oklch(0.5 0.03 var(--bh) / .05), inset 0 1px 0 rgba(255,255,255,.6);
  color: oklch(0.27 0.028 var(--bh));
}
.lp[data-theme="dark"] .lp-support .flap-tile::after { background: oklch(0.4 0.02 var(--bh) / .12); }
.lp[data-theme="dark"] .lp-support .flap-tile.is-blank { background: oklch(0.96 0.005 var(--bh)); }

/* ============ Footer ============ */
.lp-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 36px; }
.lp-footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.lp-footer-brand { max-width: 320px; }
.lp-footer-tag { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); font-weight: 500; margin-top: 14px; }
.lp-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.lp-footer-col h4 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.lp-footer-col a { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink-2); text-decoration: none; padding: 5px 0; transition: .15s; white-space: nowrap; }
.lp-footer-col a:hover { color: var(--blue-ink); }
.lp-footer-extlink { display: inline-flex !important; align-items: center; gap: 6px; }
.lp-footer-extlink svg { opacity: .7; transition: transform .15s; }
.lp-footer-extlink:hover svg { transform: translate(1px, -1px); opacity: 1; }
.lp-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lp-footer-copy { font-size: 13.5px; color: var(--ink-3); font-weight: 600; }
.lp-footer-mono { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .06em; color: var(--ink-3); }

/* ============ Reveal ============ */
.reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .12s; }
.reveal[data-d="3"] { transition-delay: .16s; }

/* ============ Responsive ============ */
@media (max-width: 1000px) {
  .lp-split { grid-template-columns: 1fr; gap: 40px; }
  .lp-steps-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 18px; }
  .lp-steps-rail { display: none; }
  .lp-cards { grid-template-columns: repeat(2, 1fr); }
  .lp-cards .lp-card:nth-child(3) { grid-column: 1 / -1; }

  /* big board: narrower flap tiles + status column so the JP step keeps room */
  .lp-bigboard { --bb-cols: calc(14 * 20px + 13 * 3px) 110px minmax(0, 1fr); }
  .lp-bigboard .flap-lg .flap-tile { width: 20px; height: 28px; font-size: 16px; border-radius: 5px; }
}
/* collapse nav to burger before the JP links + long CTA get cramped */
@media (max-width: 860px) {
  .lp-navlinks { display: none; }
  .lp-navghost { display: none; }
  .lp-burger { display: grid; }
}
@media (max-width: 720px) {
  .lp-container { padding: 0 20px; }
  .lp-section { padding: 64px 0; }
  .lp-nav-right .btn { height: 42px; padding: 0 16px; font-size: 14.5px; }
  .lp-hero { padding: 32px 0 20px; }
  .lp-hero-stage { margin-top: 28px; }
  .lp-hero-title { font-size: clamp(30px, 9vw, 40px); }
  .lp-hero-badge { font-size: 12.5px; max-width: 100%; }

  /* big board → stacked rows, drop STATUS column */
  .lp-bigboard-inner { padding: 18px 16px 20px; }
  .lp-bigboard-cols { display: none; }
  .lp-bigboard-row { grid-template-columns: 1fr; gap: 10px; }
  .lp-bigboard-status { display: none; }
  .lp-bigboard .flap { gap: 2px; }
  .lp-bigboard .flap-lg .flap-tile { width: 18px; height: 25px; font-size: 12.5px; border-radius: 4px; }

  /* light mini board */
  .lp-board { width: 100%; }
  .lp-board-row { gap: 12px; padding: 14px; }
  .lp-board-next { display: none; }
  .lp-board .flap-lg .flap-tile { width: 17px; height: 24px; font-size: 14px; border-radius: 4px; }

  .lp-transform { grid-template-columns: 1fr; gap: 18px; }
  .lp-arrow-mid { flex-direction: row; }
  .lp-arrow-mid .ring { transform: rotate(90deg); }
  .lp-steps-grid { grid-template-columns: 1fr; gap: 22px; text-align: left; }
  .lp-step { flex-direction: row; align-items: flex-start; gap: 16px; text-align: left; }
  .lp-step-en { margin-top: 0; }
  .lp-step-txt { max-width: none; }
  .lp-step-body { padding-top: 2px; }
  .lp-cards { grid-template-columns: 1fr; }
  .lp-demo { padding: 18px; }
  .lp-demo-try { position: static; display: flex; justify-content: flex-end; margin-bottom: 12px; }
  .lp-trust-grid { grid-template-columns: 1fr; }
  .lp-philo { padding: 48px 26px; }
  .lp-chaos { height: 340px; }
  .lp-footer-cols { gap: 36px; }
  .lp-hero-cta .btn, .lp-finalcta-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .lp-nav-right .btn { display: none; }
  .lp-hero-badge .pin { display: none; }
  .lp-hero-badge { padding: 7px 14px; }
}
@media (max-width: 380px) {
  .lp-container { padding: 0 16px; }
  .lp-nav .lp-container { gap: 18px; }
  .lp-nav-right { gap: 6px; }
  .lp-brand-name { font-size: 20px; }
  .lp-lang-toggle,
  .lp-theme-toggle { min-width: 38px; width: 38px; height: 38px; }
  .lp-burger { width: 38px; height: 38px; }
}
@media (max-width: 360px) {
  .lp-bigboard .flap-lg .flap-tile { width: 15px; height: 21px; font-size: 11px; }
}
@media (min-width: 861px) {
  .lp-mobilemenu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lp * { animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}