/* ============================================================
   TapLexi — landing page
   Same layout language as bkterm.com: dark bands (nav, hero, how-it-works,
   footer), white and a light tint between them, hairlines, centred section
   heads, line icons. The colours are TapLexi's own: the icon's red for
   actions, its cream for highlights, and the app's Dark theme
   (#1e1f26 / indigo #7c83ff) for the bands and the popup mock-ups.
   ============================================================ */

:root{
  color-scheme:light;

  --bg:     #ffffff;
  --tint:   #f5f2ec;
  --hover:  #f1eee8;
  --ink:    #1c1e26;
  --ink-2:  #4a4e5a;
  --ink-3:  #6b7080;
  --line:   #d8d4cb;
  --line-2: #e8e4dc;
  /* the icon: red tile, cream T */
  --brand:  #d4402f;
  --brand-hover:#e2523f;
  --brand-ink:#ffffff;
  --brand-text:#b3301f;
  --brand-soft:rgba(212,64,47,.1);
  --cream:  #f6ead2;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 24px 48px -24px rgba(16,24,40,.28);

  /* the app's Dark theme (ui/themes.css), used by the popup mock-ups */
  --p-bg:#1e1f26; --p-bg2:#262833; --p-fg:#e8e9ee; --p-dim:#9aa0ae; --p-accent:#7c83ff;
  --p-border:#3a3d4d; --p-chip:#343747; --p-freq:#2e4d3a; --p-freq-fg:#8fd9a8;

  --sans: "Segoe UI Variable Text", "Segoe UI", "Microsoft JhengHei UI", system-ui,
          -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", "Microsoft JhengHei UI", system-ui,
          -apple-system, "PingFang TC", "Noto Sans TC", sans-serif;
  --jp: "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, Consolas, monospace;

  --r-card: 8px;
  --r-small: 4px;
  --wrap: 1120px;
}
:lang(zh-Hant) :is(h1,h2,h3,h4,.lede,.sub,.hero-checks li),
:lang(zh-Hans) :is(h1,h2,h3,h4,.lede,.sub,.hero-checks li){word-break:keep-all; overflow-wrap:anywhere}
:is(:lang(zh-Hant),:lang(zh-Hans)) .lede{max-width:34em}
:lang(ko) :is(h1,h2,h3,h4,.lede,.sub,.hero-checks li){word-break:keep-all; overflow-wrap:anywhere}
:lang(ja) :is(h1,h2,h3,h4,.lede,.sub,.hero-checks li){word-break:auto-phrase}
:is(:lang(ja),:lang(ko)) .lede{max-width:34em}
:root:lang(ja){--sans:"Segoe UI Variable Text","Segoe UI","Yu Gothic UI",Meiryo,system-ui,sans-serif; --display:var(--sans)}
:root:lang(ko){--sans:"Segoe UI Variable Text","Segoe UI","Malgun Gothic",system-ui,sans-serif; --display:var(--sans)}
:root:lang(zh-Hans){--sans:"Segoe UI Variable Text","Segoe UI","Microsoft YaHei UI",system-ui,sans-serif; --display:var(--sans)}
[lang="ja"]{font-family:var(--jp)}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; scroll-padding-top:64px}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
kbd{font-family:var(--sans); font-size:.84em; font-weight:600; background:var(--bg);
  border:1px solid var(--line); border-bottom-width:2px; border-radius:var(--r-small); padding:.05em .45em; color:var(--ink)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.ico{width:1em; height:1em; flex:none; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-size:.94rem; font-weight:600; line-height:1;
  padding:.72em 1.15em; border-radius:var(--r-card); border:1px solid transparent;
  cursor:pointer; transition:background-color .12s, border-color .12s; white-space:nowrap}
.btn .ico{font-size:1.1em}
.btn-primary{background:var(--brand); color:var(--brand-ink)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--bg)}
.btn-ghost:hover{background:var(--hover)}
.btn-sm{padding:.55em .95em; font-size:.86rem}
.btn-lg{padding:.85em 1.4em; font-size:1rem}
.btn-block{width:100%}
:focus-visible{outline:2px solid var(--brand-text); outline-offset:2px}

/* ============================================================
   NAV
   ============================================================ */
:root{
  --d-bg:#1e1f26; --d-bg2:#16171d; --d-ink:#f3f1ec; --d-ink2:#c9cbd4; --d-ink3:#9aa0ae;
  --d-line:rgba(255,255,255,.13); --d-hover:rgba(255,255,255,.08); --d-accent:#f6ead2;
}
.nav{position:sticky; top:0; z-index:50; height:64px; color:var(--d-ink);
  background:color-mix(in srgb, var(--d-bg) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(12px); backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--d-line)}
.nav-inner{display:flex; align-items:center; gap:32px; height:63px}
.brand{display:flex; align-items:center; gap:10px}
.brand-icon{width:28px; height:28px; display:block; border-radius:6px}
.brand-name{font-family:var(--display); font-size:1.14rem; font-weight:700; letter-spacing:-.01em}
.nav-links{display:flex; gap:4px; font-size:.92rem}
.nav-links a{position:relative; padding:.45em .8em; color:var(--d-ink2); white-space:nowrap}
.nav-links a:hover{color:var(--d-ink)}
.nav-links a::after{content:""; position:absolute; left:.8em; right:.8em; bottom:-2px; height:2px;
  background:var(--brand); transform:scaleX(0); transition:transform .15s}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-right{display:flex; align-items:center; gap:10px; margin-left:auto}
.lang-box{position:relative; display:inline-flex; align-items:center; margin-right:4px}
.lang-globe{position:absolute; left:8px; width:14px; height:14px; fill:none; stroke:var(--d-ink2);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; pointer-events:none}
.lang{background:transparent; color:var(--d-ink2); border:1px solid var(--d-line); border-radius:var(--r-small);
  font-family:var(--sans); font-size:.82rem; padding:.34em .35em .34em 28px; cursor:pointer}
.lang:hover{background:var(--d-hover); color:var(--d-ink)}
.lang option{background:var(--bg); color:var(--ink)}
.nav-burger{display:none; background:none; border:none; color:var(--d-ink); font-size:1.4rem; cursor:pointer}
.btn-outline{border-color:var(--d-line); color:var(--d-ink); background:transparent}
.btn-outline:hover{background:var(--d-hover); border-color:rgba(255,255,255,.3)}
.nav .btn-primary,.hero .btn-primary{box-shadow:0 6px 18px -6px color-mix(in srgb, var(--brand) 70%, transparent)}

/* ============================================================
   HERO — dark band; the live demo overlaps its lower edge
   ============================================================ */
.hero{position:relative; z-index:0; padding:36px 0 0; color:var(--d-ink)}
.hero-band{position:absolute; left:0; right:0; top:0; height:calc(100% - min(17vw, 230px)); z-index:-1;
  background:
    radial-gradient(ellipse 60% 70% at 85% 10%, rgba(212,64,47,.22), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(124,131,255,.16), transparent 70%),
    linear-gradient(180deg, var(--d-bg) 0%, var(--d-bg2) 100%)}
.hero-grid{display:grid; grid-template-columns:1fr auto; gap:64px; align-items:end}
.pill{display:inline-flex; align-items:center; gap:10px; padding:4px 12px 4px 4px; margin-bottom:20px;
  border:1px solid var(--d-line); border-radius:999px; font-size:.86rem; color:var(--d-ink2)}
.pill:hover{border-color:rgba(255,255,255,.3); color:var(--d-ink)}
.pill-tag{background:linear-gradient(135deg,#8b5cf6,#ec4899 55%,#f59e0b); color:#fff; font-weight:600; font-size:.76rem;
  padding:2px 9px; border-radius:999px}
.pill .ico{color:var(--d-ink3)}
.hero h1{font-family:var(--display); font-weight:700; margin-bottom:20px}
.h1-name{display:inline-block; font-size:clamp(2.8rem,6.4vw,4.6rem); line-height:1.02; letter-spacing:-.03em}
/* "Tap" + "Lexi": the gesture and the dictionary; a Shift keycap after it */
.h1-name em{font-style:normal; color:var(--cream)}
.h1-key{display:inline-flex; align-items:center; gap:.4em; vertical-align:.55em; margin-left:.9rem; padding:.28em .8em;
  border-radius:8px; font-family:var(--sans); font-size:clamp(.78rem,1.1vw,.92rem); font-weight:600; letter-spacing:.02em;
  color:var(--d-ink); background:linear-gradient(180deg,#34363f,#26272e); border:1px solid #4a4c57;
  box-shadow:0 3px 0 #0e0f13; animation:key-tap 3.2s ease-in-out infinite}
.h1-key::before{content:"⇧"; font-size:1.1em}
@keyframes key-tap{0%,40%,56%,100%{transform:translateY(0); box-shadow:0 3px 0 #0e0f13}
  46%{transform:translateY(3px); box-shadow:0 0 0 #0e0f13; background:linear-gradient(180deg,#4a3a3a,#3a2a2a)}}
.h1-tag{display:block; margin-top:10px; font-size:clamp(1.4rem,2.9vw,2.15rem); line-height:1.2;
  letter-spacing:-.015em; font-weight:600; color:var(--d-ink2)}
.lede{font-size:clamp(1.02rem,1.5vw,1.14rem); line-height:1.6; color:var(--d-ink2); max-width:58ch; margin-bottom:32px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}
.hero-checks{padding:0 0 6px 32px; border-left:1px solid var(--d-line); min-width:260px}
.hero-checks li{color:var(--d-ink); font-size:.95rem}
.hero-stage{margin-top:48px}

:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.checks{list-style:none; display:flex; flex-direction:column; gap:14px}
.checks li{position:relative; padding-left:32px; line-height:1.5}
.checks li::before{content:""; position:absolute; left:0; top:.08em; width:20px; height:20px; border-radius:50%;
  background:var(--brand) var(--tick) center/12px no-repeat}

/* ============================================================
   LIVE DEMO — a mock reading window; hover a dotted word and tap Shift
   (or click it). The autoplay drives the same code path.
   ============================================================ */
.demo{position:relative; max-width:1040px; margin:0 auto; border-radius:12px; background:#fbfaf7;
  border:1px solid var(--line); box-shadow:0 2px 4px rgba(0,0,0,.2), 0 40px 80px -30px rgba(0,0,0,.6);
  overflow:hidden; user-select:none}
.demo-bar{display:flex; align-items:center; gap:8px; padding:10px 14px; background:#efece6; border-bottom:1px solid var(--line-2);
  font-size:.8rem; color:var(--ink-3)}
.demo-bar i{width:11px; height:11px; border-radius:50%; background:#d9d5cc}
.demo-bar .url{margin-left:12px; flex:1; max-width:420px; background:#fff; border:1px solid var(--line-2);
  border-radius:999px; padding:3px 14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.demo-body{position:relative; min-height:560px; padding:34px 44px 40px; display:grid; grid-template-columns:1.15fr 1fr; gap:44px}
.demo-art h3{font-family:var(--jp); font-size:1.35rem; font-weight:700; margin-bottom:12px; color:var(--ink)}
.demo-art p{font-family:var(--jp); font-size:1.1rem; line-height:2; color:#2b2d35}
.demo-art p.en{font-family:Georgia,"Times New Roman",serif; font-size:1.12rem; line-height:1.85}
.demo-art .meta{font-family:var(--sans); font-size:.78rem; color:var(--ink-3); margin-bottom:14px}
.demo-art + .demo-art{border-left:1px solid var(--line-2); padding-left:44px}
.w{border-bottom:1.5px dotted color-mix(in srgb, var(--brand) 55%, transparent); cursor:help; transition:background-color .15s}
.w:hover{background:var(--brand-soft)}
.w.hit{background:rgba(124,131,255,.22); border-bottom:2px solid var(--p-accent)}
.demo-hint{position:absolute; left:44px; bottom:12px; font-size:.8rem; color:var(--ink-3); display:flex; align-items:center; gap:8px}
.demo-hint kbd{font-size:.78rem}
/* fake cursor + the Shift keycap that dips when "tapped" */
.d-cur{position:absolute; z-index:6; width:16px; height:24px; left:0; top:0; transform:translate(520px,300px); pointer-events:none;
  transition:transform .8s cubic-bezier(.45,.05,.35,1), opacity .3s; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.d-cur path{fill:#111; stroke:#fff; stroke-width:1.2}
.d-key{position:absolute; z-index:7; right:18px; bottom:14px; padding:6px 16px; border-radius:8px; font-size:.86rem; font-weight:700;
  color:#3a3d4d; background:linear-gradient(180deg,#fff,#eceae4); border:1px solid #cfcac0; box-shadow:0 3px 0 #b9b3a7;
  opacity:0; transition:opacity .25s}
.d-key.on{opacity:1}
.d-key.down{transform:translateY(3px); box-shadow:0 0 0 #b9b3a7; background:linear-gradient(180deg,#f3e3df,#ead2cc); color:var(--brand-text)}
.demo.live .d-cur,.demo.live .d-key{opacity:0}

/* the popup: the app's own look (Dark theme, popup.css) */
.pop{position:absolute; z-index:5; width:360px; max-width:calc(100% - 24px); max-height:420px; overflow:hidden;
  background:var(--p-bg); color:var(--p-fg); border:1px solid var(--p-border); border-radius:6px;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.55); font-family:var(--jp); font-size:14px; line-height:1.5;
  opacity:0; transform:translateY(4px); transition:opacity .14s, transform .14s; pointer-events:none; user-select:text}
.pop.on{opacity:1; transform:none; pointer-events:auto}
.pop-bar{display:flex; align-items:center; gap:6px; padding:4px 8px; background:var(--p-bg2); border-bottom:1px solid var(--p-border);
  font-size:12px; color:var(--p-dim)}
.pop-bar .sp{flex:1}
.pop-bar b{font-weight:400; padding:0 5px}
.pop-in{padding:6px 12px 12px}
.entry{padding:6px 0 8px}
.entry + .entry{border-top:1px solid var(--p-border)}
.hw{display:flex; align-items:baseline; flex-wrap:wrap; gap:8px}
.hw .word{font-size:24px; line-height:1.35}
.hw ruby rt{font-size:11px; color:var(--p-dim)}
.hw .ph{font-family:"Segoe UI",sans-serif; font-size:14px; color:var(--p-dim)}
.hw .spk{color:var(--p-dim); font-size:13px}
.hw .spark{margin-left:auto; font-size:15px; background:linear-gradient(135deg,#8b5cf6,#ec4899 55%,#f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent; cursor:pointer}
.pitch{display:inline-flex; gap:1px; font-size:13px; color:var(--p-dim)}
.pitch span{padding:0 1px}
.pitch .hi{border-top:1.5px solid var(--p-accent)}
.pitch .dr{border-right:1.5px solid var(--p-accent)}
.pitch sup{font-size:10px; color:var(--p-accent); margin-left:2px}
.chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:3px}
.chip{font-family:var(--sans); font-size:10px; padding:1px 6px; border-radius:3px; background:var(--p-chip); color:var(--p-dim)}
.chip.f{background:var(--p-freq); color:var(--p-freq-fg)}
.chip.pos{color:#b8a5f5}
.chip.lv{color:#f0c674}
.infl{font-family:var(--sans); font-size:11px; color:var(--p-dim); margin-top:2px}
.infl b{font-weight:400; color:var(--p-accent)}
.dict{display:inline-block; font-family:var(--sans); font-size:10px; color:var(--p-dim); border:1px solid var(--p-border); border-radius:3px; padding:0 4px; margin-top:6px}
.gl{margin:3px 0 0; padding-left:20px; font-family:"Microsoft JhengHei UI","PingFang TC","Noto Sans TC",sans-serif}
.gl li{margin:2px 0}
.ex{margin:6px 0 0; padding-left:16px; font-size:13px; font-family:"Segoe UI",sans-serif}
.ex li{margin:3px 0}
.ex .zh{display:block; color:var(--p-dim); font-family:"Microsoft JhengHei UI","PingFang TC",sans-serif}
.ex b{color:var(--p-accent); font-weight:600}
.sub-h{font-family:var(--sans); font-size:11px; color:var(--p-dim); margin-top:8px; padding-top:6px; border-top:1px dashed var(--p-border)}

/* scene chips under the demo */
.demo-steps{list-style:none; counter-reset:st; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  max-width:1040px; margin:20px auto 0}
.demo-steps li{counter-increment:st; display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer;
  border:1px solid var(--line-2); border-radius:10px; background:var(--bg); color:var(--ink-3);
  font-size:.92rem; line-height:1.4; transition:color .25s, border-color .25s, box-shadow .25s}
.demo-steps li::before{content:counter(st); flex:none; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.84rem;
  background:var(--line-2); color:var(--ink-2); transition:background-color .25s, color .25s}
.demo-steps li.on{color:var(--ink); border-color:var(--brand-text); box-shadow:0 6px 18px -10px color-mix(in srgb, var(--brand) 60%, transparent)}
.demo-steps li.on::before{background:var(--brand); color:#fff}

/* ============================================================
   BLOCKS
   ============================================================ */
.block{padding:80px 0}
.hero + .block{padding-top:72px}
.block-tint{background:var(--tint); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.block-head{max-width:720px; margin:0 auto 36px; text-align:center}
.kicker{display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--brand-text);
  background:var(--brand-soft); padding:4px 12px; border-radius:999px; margin-bottom:16px}
.block-head h2,.how-copy h2{font-family:var(--display); font-size:clamp(1.75rem,3.4vw,2.5rem); line-height:1.18;
  letter-spacing:-.02em; font-weight:700}
.sub{font-size:1.06rem; line-height:1.6; color:var(--ink-2); margin-top:14px}

.feat-grid{display:grid; gap:20px; grid-template-columns:repeat(3,1fr)}
.feat{position:relative; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line-2);
  border-radius:12px; padding:28px; transition:border-color .15s, box-shadow .15s, transform .15s}
.feat:hover{border-color:var(--line); box-shadow:0 16px 36px -18px rgba(16,24,40,.25); transform:translateY(-2px)}
.feat-no{position:absolute; right:24px; top:18px; font-family:var(--display); font-size:3rem; font-weight:800;
  line-height:1; color:var(--line-2); letter-spacing:-.04em}
.feat p{flex:1; color:var(--ink-2); font-size:.94rem; line-height:1.55}
.feat h4{font-size:1.06rem; font-weight:600; margin-bottom:6px; line-height:1.35}
.f-ico{width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft); color:var(--brand-text); font-size:1.25rem; margin-bottom:16px}
.more{display:inline-flex; align-items:center; gap:6px; margin-top:18px; font-size:.9rem; font-weight:600; color:var(--ink)}
.more .ico{transition:transform .15s}
.more:hover{color:var(--brand-text)}
.more:hover .ico{transform:translateX(3px)}

/* a static popup beside a list of points */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split.rev > :first-child{order:2}
.pop.static{position:relative; opacity:1; transform:none; pointer-events:auto; width:100%; max-width:420px; max-height:none; margin:0 auto}
.stage-card{background:linear-gradient(160deg,#ece7dd,#f8f6f1); border:1px solid var(--line-2); border-radius:14px; padding:40px 28px}
.stage-card .src{font-family:var(--jp); text-align:center; font-size:1.05rem; color:var(--ink-2); margin-bottom:18px}
.stage-card .src.en{font-family:Georgia,serif}
.stage-card .src mark{background:rgba(124,131,255,.22); border-bottom:2px solid var(--p-accent); color:var(--ink)}

.notes{display:grid; grid-template-columns:1fr 1fr; gap:26px 32px}
.notes > div{color:var(--ink-2); font-size:.94rem; line-height:1.55; padding-left:14px; border-left:2px solid var(--line)}
.notes b{display:block; color:var(--ink); font-weight:600; font-size:1rem; margin-bottom:4px}
.notes kbd{font-size:.8em}

/* ---------- 突發奇想: a word in the middle, three rings around it ---------- */
.idea{position:relative; max-width:760px; aspect-ratio:1.45; margin:0 auto; background:var(--p-bg); border-radius:14px;
  border:1px solid #2c2e3a; box-shadow:var(--shadow); overflow:hidden; font-family:var(--jp)}
.idea svg.rings{position:absolute; inset:0; width:100%; height:100%}
.idea svg.rings circle{fill:none; stroke:var(--p-border); stroke-dasharray:3 5}
.idea svg.rings line{stroke:rgba(124,131,255,.28)}
.node{position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center;
  padding:4px 11px 3px; border-radius:9px; background:var(--p-bg2); color:var(--p-fg);
  border:1.5px solid var(--c); font-size:15px; line-height:1.25; white-space:nowrap; cursor:default;
  transition:transform .15s, box-shadow .15s; animation:node-in .5s both}
.node:hover{transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent)}
.node small{font-family:var(--sans); font-size:10px; color:var(--p-dim)}
.node i{position:absolute; top:-8px; right:-8px; font:600 9px/1 var(--sans); font-style:normal; padding:2px 4px; border-radius:4px; background:#f0c674; color:#1e1f26}
.node.r2{font-size:13px; opacity:.92}
.node.r3{font-size:12px; opacity:.8; padding:2px 8px}
.node.center{--c:var(--p-accent); font-size:26px; padding:8px 18px 6px; background:#2b2d4a; box-shadow:0 0 30px rgba(124,131,255,.35); animation:none}
.syn{--c:#3fa34d} .ant{--c:#d9534f} .rel{--c:#7c83ff} .hub{--c:#9a6fd8} .chr{--c:#9aa0ae}
@keyframes node-in{from{opacity:0; transform:translate(-50%,-50%) scale(.6)}}
.idea-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:22px; font-size:.9rem; color:var(--ink-2)}
.idea-legend span{display:inline-flex; align-items:center; gap:8px}
.idea-legend span::before{content:""; width:12px; height:12px; border-radius:4px; border:2px solid var(--c)}
.idea-notes{margin-top:40px; grid-template-columns:repeat(3,1fr)}

/* ---------- how it reads text: a dark band ---------- */
.block-dark{background:var(--d-bg); color:var(--d-ink); position:relative; overflow:hidden}
.block-dark .sub{color:var(--d-ink2)}
.block-dark .kicker{color:var(--cream); background:rgba(246,234,210,.12)}
.flow{position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--p-accent),var(--cream),transparent);
  background-size:200% 100%; animation:flow 6s linear infinite; opacity:.9}
@keyframes flow{from{background-position:200% 0} to{background-position:0 0}}
.how-inner{display:grid; grid-template-columns:1.4fr .8fr; gap:64px; align-items:center}
.how-copy h2{font-size:clamp(1.6rem,3vw,2.2rem)}
.chain{list-style:none; counter-reset:ch; margin-top:28px; display:flex; flex-direction:column; gap:18px}
.chain li{counter-increment:ch; display:grid; grid-template-columns:auto 1fr; column-gap:14px; color:var(--d-ink2); font-size:.94rem; line-height:1.55}
.chain li::before{content:counter(ch); grid-row:span 2; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.85rem; color:var(--d-bg); background:var(--cream); margin-top:1px}
.chain b{color:var(--d-ink); font-weight:600; font-size:1rem}
.spec{background:var(--d-bg2); border:1px solid var(--d-line); border-radius:var(--r-card); padding:8px 24px 20px}
.spec-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:16px 0;
  border-bottom:1px solid var(--d-line); font-size:.94rem; color:var(--d-ink2)}
.spec-row b{font-family:var(--display); color:var(--cream); font-size:1.4rem; font-weight:700; letter-spacing:-.01em}
.spec-note{font-size:.86rem; color:var(--d-ink3); line-height:1.5; margin-top:14px}

/* ---------- small icon list ---------- */
.icon-list{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 40px}
.icon-list > div{display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-content:start}
.icon-list .ico{grid-row:span 2; font-size:1.3rem; color:var(--brand-text); margin-top:2px}
.icon-list h4{font-size:1rem; font-weight:600; line-height:1.4}
.icon-list p{color:var(--ink-2); font-size:.92rem; line-height:1.55; margin-top:3px}

/* a small "licensed edition" tag beside features the free edition lacks */
.pro-tag{display:inline-block; vertical-align:.12em; margin-left:6px; padding:1px 7px; border-radius:999px;
  font:600 .68rem/1.5 var(--sans); letter-spacing:.02em; color:var(--brand-text); background:var(--brand-soft)}
.block-dark .pro-tag{color:var(--cream); background:rgba(246,234,210,.14)}
.edition li.ed-lead{padding-left:0; color:var(--ink)}
.edition li.ed-lead::before{display:none}

/* ---------- downloads / pricing ---------- */
.platforms{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:560px; margin:0 auto 28px; scroll-margin-top:90px}
.plat{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:22px 18px 18px;
  background:var(--bg); border:1px solid var(--line-2); border-radius:12px}
.plat-ico{width:34px; height:34px; fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-bottom:6px}
.plat-name{font-family:var(--display); font-weight:700; font-size:1.1rem}
.plat-req{font-size:.84rem; color:var(--ink-3); margin-bottom:14px}
.plat .btn{margin-top:auto}
.plat.soon .plat-ico{stroke:var(--ink-3)}
.plat.soon .btn{cursor:default; color:var(--ink-3); border-style:dashed; background:transparent}
.release{text-align:center; margin:-8px 0 34px; font-size:.92rem; color:var(--ink-3); line-height:1.6}
.release b{color:var(--ink); font-weight:600}
.release .rel-note{color:var(--ink-2)}
.editions{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:880px; margin:0 auto}
.edition{background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r-card); padding:28px; display:flex; flex-direction:column}
.edition.featured{border:2px solid var(--brand-text); box-shadow:var(--shadow)}
.ed-name{font-size:.95rem; color:var(--ink-2); font-weight:600}
.ed-price{font-family:var(--display); font-size:2.6rem; font-weight:700; letter-spacing:-.02em; margin:6px 0 20px; line-height:1.1}
.ed-per{font-family:var(--sans); font-size:.9rem; color:var(--ink-3); font-weight:400; letter-spacing:0}
.edition ul{list-style:none; display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:1px solid var(--line-2)}
.edition li{color:var(--ink-2); font-size:.94rem; padding-left:28px; position:relative}
.edition li::before{content:""; position:absolute; left:0; top:.2em; width:18px; height:18px; border-radius:50%;
  background:var(--brand) var(--tick) center/11px no-repeat}
.edition ul.ed-more{gap:7px; padding-top:14px; margin-top:16px; margin-bottom:24px; flex:1}
.ed-more li{font-size:.86rem; color:var(--ink-3); padding-left:16px}
.ed-more li::before{width:5px; height:5px; top:.62em; left:4px; background:var(--ink-3); opacity:.55}
.edition li b{color:var(--ink); font-weight:700}
.secure{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; font-size:.86rem; color:var(--ink-3); text-align:center}

/* ---------- footer ---------- */
.footer{padding:64px 0 28px; background:var(--d-bg); color:var(--d-ink)}
.footer-inner{display:grid; grid-template-columns:1.2fr 2fr; gap:48px; padding-bottom:40px; border-bottom:1px solid var(--d-line)}
.foot-brand p{color:var(--d-ink3); font-size:.9rem; margin-top:12px; line-height:1.55; max-width:36ch}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.foot-col h5{font-size:.84rem; color:var(--d-ink); margin-bottom:12px; font-weight:600}
.foot-col a{display:block; color:var(--d-ink2); font-size:.9rem; padding:4px 0}
.foot-col a:hover,.foot-mail:hover{color:var(--cream)}
.foot-mail{display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:.9rem; color:var(--d-ink2)}
.foot-bottom{display:flex; justify-content:space-between; padding-top:20px; font-size:.82rem; color:var(--d-ink3); flex-wrap:wrap; gap:8px}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} .h1-key,.flow,.node{animation:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1040px){
  .nav-links{display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column;
    gap:0; background:var(--d-bg); border-bottom:1px solid var(--d-line); padding:6px 14px}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 8px}
  .nav-burger{display:block}
  .hero-grid{grid-template-columns:1fr; gap:32px}
  .hero-checks{border-left:none; padding:0; display:grid; grid-template-columns:1fr 1fr}
  .split,.how-inner{grid-template-columns:1fr; gap:40px}
  .split.rev > :first-child{order:0}
}
@media(max-width:900px){
  .feat-grid,.icon-list,.idea-notes{grid-template-columns:1fr 1fr}
  .demo-body{grid-template-columns:1fr; gap:24px; padding:26px 24px 48px}
  .demo-art + .demo-art{border-left:none; padding-left:0; border-top:1px solid var(--line-2); padding-top:20px}
  .demo-hint{left:24px}
  .footer-inner{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nav-dl{display:none}
  .feat-grid,.icon-list,.notes,.idea-notes,.editions,.platforms,.demo-steps{grid-template-columns:1fr}
  .hero-checks{grid-template-columns:1fr}
  .idea{aspect-ratio:.95}
  .node{font-size:13px} .node.r3{display:none}
  .foot-cols{grid-template-columns:1fr 1fr}
}