:root {
    /* brand = deep navy; --accent = gold (miles/award) for highlights.
       token name --crimson kept to avoid churn; value is navy since 2026-09-18. */
    --crimson:#172B46; --crimson-lt:#24406a; --gold:#C9A227; --accent:#B8891A;
    --ink:#14161a; --body:#454c57; --muted:#717a86;
    --bg:#fff; --surface:#fff; --line:#e7e9ec;
    --wash:#f5f7fa;   /* cool off-white band */
    --tint:#eef2f8;   /* navy-tinted band */
    --ok:#12805a;
    --shadow-lg:0 2px 4px rgba(20,22,26,.03), 0 24px 60px -12px rgba(20,22,26,.16);
    --shadow-sm:0 1px 2px rgba(20,22,26,.04), 0 8px 24px -8px rgba(20,22,26,.1);
    --r:14px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ink:#f3f4f6; --body:#c2c7ce; --muted:#8a919c;
      --bg:#101216; --surface:#171a1f; --line:#282c33;
      --wash:#14171b; --tint:#161b24; --ok:#4ecb92;
      --crimson:#6f93c4; --crimson-lt:#87a6d1; --accent:#d9b25a;  /* lighter navy + gold for dark bg */
      --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 24px 60px -12px rgba(0,0,0,.55);
      --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -8px rgba(0,0,0,.4);
    }
  }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    margin:0; background:var(--bg); color:var(--body); line-height:1.7;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans TC','PingFang TC',sans-serif;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  img { max-width:100%; height:auto; display:block; }
  .wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
  .narrow { max-width:780px; }

  /* ── nav ─────────────────────────────────────────────── */
  header { position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
  .nav { display:flex; align-items:center; gap:11px; height:64px; }
  .nav>img { width:31px; height:31px; border-radius:9px; }
  .nav b { color:var(--ink); font-size:17px; letter-spacing:-.015em; }
  .nav .spacer { flex:1; }
  .nav a.ghost { color:var(--muted); text-decoration:none; font-size:14.5px; }
  .nav a.ghost:hover { color:var(--ink); }
  @media (max-width:720px) { .nav a.ghost { display:none; } }
  .btn { display:inline-block; text-decoration:none; border-radius:11px; font-weight:600;
    white-space:nowrap; transition:transform .13s ease, background .13s ease; }
  .btn-primary { background:var(--crimson); color:#fff; padding:12px 22px; font-size:15px;
    box-shadow:0 1px 2px rgba(23,43,70,.3), 0 8px 20px -8px rgba(23,43,70,.55); }
  .btn-primary:hover { background:var(--crimson-lt); transform:translateY(-1px); }
  .btn-sm { padding:9px 17px; font-size:14px; }
  .btn-lg { padding:15px 30px; font-size:16.5px; }
  .quiet { color:var(--muted); text-decoration:none; font-size:14.5px;
    border-bottom:1px solid var(--line); padding-bottom:2px; }
  .quiet:hover { color:var(--ink); border-color:var(--muted); }

  /* ── section rhythm ──────────────────────────────────── */
  section { padding:92px 0; }
  .band { background:var(--wash); border-block:1px solid var(--line); }
  .band-tint { background:var(--tint); border-block:1px solid var(--line); }
  .eyebrow { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.09em;
    text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
  h1 { color:var(--ink); font-size:clamp(38px,6.4vw,68px); line-height:1.06;
    letter-spacing:-.035em; margin:0 0 22px; font-weight:800; }
  h1 em { font-style:normal; color:var(--accent); }
  h2 { color:var(--ink); font-size:clamp(27px,4vw,40px); line-height:1.15;
    letter-spacing:-.028em; margin:0 0 14px; font-weight:750; }
  h3 { color:var(--ink); font-size:18.5px; margin:0 0 7px; font-weight:650; letter-spacing:-.01em; }
  .sect-lede { font-size:17px; color:var(--muted); margin:0 0 52px; max-width:34em; }

  /* ── 1 · hero ────────────────────────────────────────── */
  .hero { position:relative; overflow:hidden; padding:84px 0 0;
    background:linear-gradient(168deg, var(--tint) 0%, var(--bg) 62%); }
  .hero::before { content:''; position:absolute; inset:auto auto 0 50%; width:1200px; height:620px;
    transform:translateX(-50%); pointer-events:none;
    background:radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--crimson) 11%, transparent), transparent 66%); }
  .hero-in { position:relative; }
  .hero-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:52px; align-items:end; }
  @media (min-width:980px) { .hero-grid { grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:60px; } }
  .hero-copy { padding-bottom:70px; }
  .lede { font-size:19px; line-height:1.65; max-width:27em; margin:0 0 32px; }
  .cta-line { display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
  .facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
  .fact { font-size:12.5px; font-weight:600; color:var(--body); background:var(--surface);
    border:1px solid var(--line); border-radius:999px; padding:6px 13px; }
  .hero-scope { font-size:12.5px; color:var(--muted); margin:22px 0 0; }
  .hero-shot img { border-radius:16px 16px 0 0; border:1px solid var(--line); border-bottom:none;
    box-shadow:var(--shadow-lg); background:var(--surface); }

  /* ── hero flow diagram (SVG + foreignObject → scales to any width, dark-mode via tokens) ── */
  .hero-grid { align-items:center; }
  .hero { padding-bottom:52px; }
  .hero-copy { padding-bottom:0; min-width:0; }
  .hero-shot { min-width:0; }   /* let the SVG shrink below its 560px viewBox on narrow screens */
  .dia-svg { width:100%; max-width:560px; height:auto; display:block; margin:0 auto; }
  .dcard { height:100%; background:var(--surface); border:1px solid var(--line);
    border-radius:14px; box-shadow:var(--shadow-sm); padding:11px 13px; overflow:hidden; }
  .dwho { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
  .dwho .ic { font-size:19px; line-height:1; }
  .dwho b { color:var(--ink); font-size:14.5px; font-weight:750; letter-spacing:-.01em; }
  .dwho small { color:var(--muted); font-size:11px; font-weight:600; margin-left:auto; }
  .drow { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--body);
    background:var(--wash); border:1px solid var(--line); border-radius:8px; padding:5px 9px; margin-top:5px; }
  .drow .rt { font-weight:700; color:var(--ink); }
  .drow .dt { color:var(--muted); margin-left:auto; font-variant-numeric:tabular-nums; }
  .d-sys { text-align:center; border:1.5px solid var(--crimson); }
  .d-sys .brand { color:var(--crimson); font-weight:800; font-size:17px; letter-spacing:-.01em; }
  .d-sys .desc { color:var(--muted); font-size:11.5px; margin:1px 0 9px; }
  .dgrp { display:flex; flex-direction:column; gap:5px; text-align:left; }
  .dgrow { display:flex; align-items:center; gap:6px; }
  .dglbl { font-size:10.5px; font-weight:700; color:var(--muted); width:60px; flex:none; }
  .dchip { font-size:11px; border-radius:7px; padding:2px 7px; border:1px solid var(--line);
    background:var(--wash); color:var(--muted); font-variant-numeric:tabular-nums; }
  .dchip.hit { border-color:color-mix(in srgb, var(--ok) 40%, var(--line));
    background:color-mix(in srgb, var(--ok) 12%, var(--surface)); color:var(--ok); font-weight:700; }
  .d-mail { border:1px solid color-mix(in srgb, var(--ok) 40%, var(--line));
    background:color-mix(in srgb, var(--ok) 8%, var(--surface)); }
  .d-mail .dwho b { color:var(--ok); }
  .d-mail .big { font-size:19px; font-weight:800; color:var(--ok); letter-spacing:-.01em; margin:2px 0 1px; }
  .d-mail .sub { font-size:13px; color:var(--body); font-weight:600; }
  .d-mail .ctx { font-size:11px; color:var(--muted); margin-top:4px; }
  .dia-note { text-align:center; color:var(--crimson); font-weight:700; margin:4px 0 0; font-size:14.5px; }

  /* ── 2 · proof ───────────────────────────────────────── */
  .benefits { display:grid; grid-template-columns:1fr; gap:26px; }
  @media (min-width:820px) { .benefits { grid-template-columns:repeat(2,1fr); gap:32px 40px; } }
  .benefit .k { font-size:26px; line-height:1; margin-bottom:13px; display:block; }
  .benefit p { margin:0; font-size:15px; }

  /* ── 2b · side-by-side comparison ────────────────────── */
  /* Left pane is a third-party booking site shown for comparison. Airline
     marks are masked; flight designators are factual data and stay legible —
     without them the two panes cannot be read as the same route. */
  .cmp { display:grid; grid-template-columns:1fr; gap:20px; }
  @media (min-width:900px) { .cmp { grid-template-columns:1fr 1fr; gap:28px; align-items:start; } }
  .pane { border:1px solid var(--line); border-radius:var(--r);
    background:var(--surface); overflow:hidden; box-shadow:var(--shadow-sm); }
  .pane-head { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    padding:15px 18px; border-bottom:1px solid var(--line); background:var(--wash); }
  .pane-head b { color:var(--ink); font-size:15px; letter-spacing:-.01em; }
  .pane-head span { font-size:12.5px; color:var(--muted); }
  .pane-head.on { background:color-mix(in srgb, var(--crimson) 7%, transparent); }
  .pane-head.on b { color:var(--crimson); }
  .pane img { width:100%; max-height:520px; object-fit:cover; object-position:top; display:block; }
  .pane-foot { padding:14px 18px; font-size:13.5px; border-top:1px solid var(--line); }
  .pane-foot b { color:var(--ink); }
  .cmp-note { font-size:12.5px; color:var(--muted); margin-top:22px; line-height:1.6; }

  /* ── 3 · steps ───────────────────────────────────────── */
  .step { display:grid; grid-template-columns:1fr; gap:28px; align-items:center; padding:0 0 76px; }
  .step:last-child { padding-bottom:0; }
  @media (min-width:900px) {
    .step { grid-template-columns:1fr 330px; gap:70px; }
    .step.flip .txt { order:2; }
  }
  .n { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:11px; font-size:15px; font-weight:800; background:var(--crimson); color:#fff; margin-bottom:16px; }
  .step p { margin:0; font-size:15.5px; }
  figure { margin:0; }
  .shot { border-radius:var(--r); border:1px solid var(--line); box-shadow:var(--shadow-sm); background:var(--surface); }
  .shot.crop { max-height:430px; object-fit:cover; object-position:top; width:100%; }
  figcaption { font-size:12.5px; color:var(--muted); margin-top:12px; line-height:1.55; }


  /* ── 5 · permissions ─────────────────────────────────── */
  .perms { display:grid; grid-template-columns:1fr; gap:12px; }
  @media (min-width:780px) { .perms { grid-template-columns:1fr 1fr; } }
  .perm { border:1px solid var(--line); border-radius:12px; padding:17px 19px;
    background:var(--surface); color:var(--ink); font-size:14.5px; font-weight:600; }
  .perm code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
    background:var(--wash); border:1px solid var(--line); border-radius:6px; padding:2px 7px; }
  .perm p { margin:9px 0 0; font-size:14px; font-weight:400; color:var(--body); }
  .nots { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
  .not { font-size:13px; font-weight:600; color:var(--ok);
    background:color-mix(in srgb, var(--ok) 9%, transparent);
    border:1px solid color-mix(in srgb, var(--ok) 26%, transparent); border-radius:999px; padding:6px 13px; }

  /* ── 6 · flow ────────────────────────────────────────── */
  .flow { display:grid; grid-template-columns:1fr; gap:12px; }
  @media (min-width:820px) { .flow { grid-template-columns:repeat(4,1fr); gap:16px; } }
  .node { border:1px solid var(--line); border-radius:12px; padding:20px 18px; background:var(--surface); }
  .node .t { font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--crimson); margin-bottom:7px; }
  .node b { display:block; color:var(--ink); font-size:15.5px; margin-bottom:5px; }
  .node span { font-size:13.5px; color:var(--muted); }

  /* ── 7 · alpha limits ────────────────────────────────── */
  .limits { display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:820px) { .limits { grid-template-columns:1fr 1fr; gap:16px 40px; } }
  .limit { display:flex; gap:13px; font-size:15px; align-items:flex-start; }
  .limit .m { flex:none; width:20px; height:20px; margin-top:5px; border-radius:6px;
    background:color-mix(in srgb, var(--crimson) 12%, transparent);
    color:var(--crimson); font-size:12px; font-weight:800; display:grid; place-items:center; }
  .limit b { color:var(--ink); }

  /* ── 8 · faq ─────────────────────────────────────────── */
  details { border-bottom:1px solid var(--line); padding:20px 0; }
  details summary { cursor:pointer; color:var(--ink); font-size:16.5px; font-weight:650;
    list-style:none; display:flex; justify-content:space-between; gap:18px; letter-spacing:-.01em; }
  details summary::-webkit-details-marker { display:none; }
  details summary::after { content:'+'; color:var(--muted); font-weight:400; font-size:22px; line-height:1; }
  details[open] summary::after { content:'−'; }
  details p { margin:13px 0 0; font-size:15.5px; }
  details a { color:var(--crimson); }

  /* ── 9 · closing ─────────────────────────────────────── */
  .closing { text-align:center; }
  .closing h2 { margin-bottom:16px; }
  .closing p { max-width:28em; margin:0 auto 32px; font-size:16.5px; }

  footer { border-top:1px solid var(--line); padding:34px 0 60px; font-size:13.5px; color:var(--muted); }
  footer a { color:var(--crimson); text-decoration:none; }
  footer a:hover { text-decoration:underline; }
  .foot-row { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; }
  .foot-row .spacer { flex:1; }
  .fine { margin-top:16px; font-size:12.5px; line-height:1.65; max-width:62em; }

  /* ── step 3 shows both halves: where you set the times, and what arrives ── */
  .duo { display:grid; grid-template-columns:1fr; gap:16px; }
  @media (min-width:520px) { .duo { grid-template-columns:1fr 1fr; gap:18px; } }
  .duo figcaption { font-size:12px; }

  /* ── step 1 has no screenshot: the comparison above already showed it ─────── */
  .step-lead { border-left:3px solid var(--crimson); padding:2px 0 2px 22px; margin-bottom:64px; }
  .step-lead p { max-width:52em; }

  /* ── compact disclosure inside the FAQ ───────────────────────────────────── */
  .mini { font-size:14px; }
  .mini ul { padding-left:20px; margin:10px 0; }
  .mini li { margin:5px 0; }
  .mini code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
    background:var(--wash); border:1px solid var(--line); border-radius:5px; padding:1px 6px; }
  .mini table { width:100%; border-collapse:collapse; font-size:13.5px; margin:12px 0; }
  .mini th, .mini td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
  .mini th { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; font-weight:600; }
  .mini .flow { gap:10px; margin:14px 0; }
  .mini .node { padding:13px 14px; }
  .mini .node b { font-size:14px; }
  .mini .node span { font-size:12.5px; }

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN v2 (2026-09-18) — interface-first, v0.3.7, scroll-reveal +
   sticky feature section. Placeholder .ph slots swap for real shots.
   ═══════════════════════════════════════════════════════════════════ */

/* scroll reveal (reveal.js adds .in; reduced-motion / no-JS => visible) */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .32s ease, transform .32s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} }
html:not(.js) .reveal { opacity:1; transform:none; }

/* placeholder shot slot — replace inner with <img class="shot-img"> when real */
.ph { position:relative; border:2px dashed color-mix(in srgb,var(--crimson) 30%, var(--line));
  border-radius:var(--r); background:linear-gradient(160deg,var(--tint),var(--wash));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); padding:20px; overflow:hidden; }
.ph .tag { font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--crimson);
  background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.ph b { color:var(--ink); font-size:14.5px; margin:10px 0 3px; }
.ph small { font-size:12.5px; opacity:.85; max-width:26em; }
.ph .dim { margin-top:8px; font-size:11.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; opacity:.7; }
.shot-img { width:100%; height:auto; display:block; border-radius:var(--r); }

/* comparison table — 官網 vs FeiFinder */
.vs-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
.vs { width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
.vs th, .vs td { padding:13px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.vs tr:last-child td { border-bottom:0; }
.vs thead th { font-size:12.5px; font-weight:700; letter-spacing:.05em; color:var(--muted); background:var(--wash); }
.vs thead th.ff, .vs td.ff { background:var(--tint); }
.vs td.ff { color:var(--ink); font-weight:600; }
.vs td.official { color:var(--muted); }
.vs td.dim { color:var(--muted); font-weight:600; font-size:13.5px; white-space:nowrap; }

/* sticky core-feature section: desktop = pinned media + scrolling chapters */
.feat { display:grid; grid-template-columns:1fr; gap:34px; }
.feat-media { }
.feat-list { display:flex; flex-direction:column; gap:28px; }
.feat-step { }
.feat-step .kk { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:9px; background:var(--crimson); color:#fff; font-weight:700; font-size:15px; margin-bottom:10px; }
@media (min-width:1024px){
  .feat { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:start; }
  .feat-media { position:sticky; top:88px; }
  .feat-list { gap:64px; padding:40px 0; }
}

/* pool / subscription section */
.pool-quote { font-size:clamp(20px,2.6vw,27px); font-weight:750; letter-spacing:-.02em; color:var(--ink);
  line-height:1.3; margin:0 0 10px; }
.pool-status { display:inline-block; font-size:13px; color:var(--crimson); background:var(--tint);
  border:1px solid color-mix(in srgb,var(--crimson) 20%,var(--line)); border-radius:999px; padding:4px 12px; margin-bottom:8px; }
.notebox { background:var(--wash); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:10px; padding:14px 16px; font-size:14px; color:var(--body); margin:20px 0 0; }
.notebox b { color:var(--ink); }
.pool-grid { display:grid; grid-template-columns:1fr; gap:24px; margin-top:32px; }
@media (min-width:860px){ .pool-grid { grid-template-columns:1fr 1fr; gap:32px; align-items:start; } }

/* generic bits */
.cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:26px; }
.trust { font-size:13.5px; color:var(--muted); margin-top:14px; }
.trust b { color:var(--ink); font-weight:600; }
.feat-cap { font-size:13px; color:var(--muted); margin-top:9px; }
.sec-cta { margin-top:40px; }
.lead-in { font-size:17px; color:var(--muted); max-width:36em; margin:0 0 8px; }

/* content links (navy brand) — 2026-09-18 navy palette */
.trust a, .lede a, .sect-lede a, .lead-in a, .mini a, .notebox a { color:var(--crimson); text-decoration:underline; text-underline-offset:2px; }

/* ── aviation motifs (2026-09-18) · decorative, palette-only, motion-budgeted ── */
.hero, #together { isolation:isolate; }
.hero > .ff-hero { position:absolute; top:0; right:0; width:min(72%,860px)!important; z-index:0; }
.hero-in { position:relative; z-index:1; }
#together { position:relative; overflow:hidden; }
#together > .ff-network { position:absolute; top:8px; right:0; width:min(46%,560px)!important; z-index:0; }
#together > .wrap { position:relative; z-index:1; }
.ff-plane-host .ff-plane { color:#fff; opacity:.92; margin-right:3px; }

@media (prefers-reduced-motion:no-preference){
  .ff-hero.ff-animate .ff-route { animation:ff-draw 3.2s cubic-bezier(.22,.61,.36,1) both; }
  .ff-hero.ff-animate .ff-plane-motion { animation:ff-drift 2.6s cubic-bezier(.22,.61,.36,1) both; }
  #together .ff-network.ff-animate { animation:ff-fade-net 700ms ease both; animation-delay:120ms; }
  .ff-plane-host .ff-plane-motion { transition:transform .5s cubic-bezier(.22,.61,.36,1); }
  .ff-plane-host:is(:hover,:focus-visible) .ff-plane-motion { transform:translateX(3px); }
}
@keyframes ff-draw { from{stroke-dashoffset:1} to{stroke-dashoffset:0} }
@keyframes ff-drift { from{opacity:0;transform:translate(-26px,12px)} to{opacity:1;transform:translate(0,0)} }
@keyframes ff-fade-net { from{opacity:0} to{opacity:.08} }

@media (prefers-reduced-motion:reduce){
  .ff-motif, .ff-motif * { animation:none!important; transition:none!important; }
  .ff-motif .ff-plane-motion { transform:none!important; opacity:1!important; }
  .ff-hero .ff-route { stroke-dashoffset:0!important; }
}
@media (max-width:600px){
  .hero > .ff-hero .ff-plane-motion { display:none; }
  #together > .ff-network { width:150px!important; top:4px; }
}

/* ── liveliness pass (2026-09-19) · one-time only, zero loops ── */
/* stronger, staggered scroll-reveal so each section clearly reads as animated */
.reveal { transform:translateY(28px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.benefits .benefit.reveal:nth-of-type(2), .feat-list .feat-step.reveal:nth-of-type(2), .pool-grid>.reveal:nth-of-type(2){ transition-delay:.12s; }
.benefits .benefit.reveal:nth-of-type(3), .feat-list .feat-step.reveal:nth-of-type(3){ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .reveal{transition:none;transform:none;} }

/* one-time gold underline sweep under section eyebrows (plays on scroll-in) */
.ff-eyebrow-accent { position:relative; }
.ff-eyebrow-accent::after { content:""; position:absolute; left:0; right:0; bottom:-6px; width:100%; height:2px;
  background:var(--accent); pointer-events:none; transform-origin:left center; opacity:0; transform:scaleX(0); }
@media (prefers-reduced-motion:no-preference){
  .ff-eyebrow-accent.ff-accent-played::after { animation:ff-accent-underline 460ms ease-out 1 both; }
  .ff-plan-accent.ff-accent-played .ff-accent-ink { animation:ff-accent-settle 600ms ease-out 1 both; }
}
@keyframes ff-accent-underline { from{opacity:0;transform:scaleX(0)} to{opacity:1;transform:scaleX(1)} }
@keyframes ff-accent-settle { from{opacity:0;transform:translate(-6px,3px)} to{opacity:1;transform:translate(0,0)} }
@media (prefers-reduced-motion:reduce){
  .ff-eyebrow-accent::after { opacity:1; transform:scaleX(1); animation:none; }
  .ff-plan-accent .ff-accent-ink { animation:none; transform:none; opacity:1; }
}

/* planning corner curve (desktop only, decorative) */
#plan > .wrap { position:relative; }
.ff-plan-accent { display:none; position:absolute; top:0; right:24px; width:160px; height:56px; pointer-events:none; z-index:0; }
@media (min-width:1024px){ .ff-plan-accent { display:block; } }


/* ── hero image lightbox (2026-09-19) · click/tap to enlarge, a11y ── */
.shot-zoom { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; position:relative; border-radius:16px 16px 0 0; }
.shot-zoom .shot-img { border-radius:inherit; }
.zoom-badge { position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:5px;
  font-size:12px; font-weight:600; color:#fff; background:var(--crimson); padding:5px 10px; border-radius:999px;
  opacity:.85; transition:opacity .15s ease; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.shot-zoom:hover .zoom-badge, .shot-zoom:focus-visible .zoom-badge { opacity:1; }
.shot-zoom:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

.lightbox { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(10,14,20,.85); padding:24px; overflow:auto; overscroll-behavior:contain; }
.lightbox[hidden] { display:none; }
.lightbox-img { max-width:100%; max-height:90vh; width:auto; height:auto; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:zoom-in; display:block; }
.lightbox.zoomed { align-items:flex-start; justify-content:flex-start; }
.lightbox.zoomed .lightbox-img { max-width:none; max-height:none; width:2000px; cursor:zoom-out; }
.lightbox-close { position:fixed; top:16px; right:18px; width:44px; height:44px; border-radius:50%; border:0;
  background:rgba(255,255,255,.94); color:#111; font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.3); }
.lightbox-close:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:no-preference){ .lightbox { animation:lb-fade 160ms ease both; } }
@keyframes lb-fade { from{opacity:0} to{opacity:1} }

/* ── demo video (V1) · click-to-play, poster, no autoplay (2-min walkthrough) ── */
.demo-video { display:block; width:100%; max-width:900px; height:auto; margin:0 auto 30px;
  border-radius:var(--r); box-shadow:var(--shadow-lg); background:#000; border:1px solid var(--line); }

/* keep Core-Features screenshots crisp + consistent, not blown-up (2026-09-19) */
.feat-media .shot-zoom, .feat-step .shot-zoom { max-width:340px; width:100%; }

/* planning-section shots: A7 capped, A8 tall poster shown as a compact top "peek" + lightbox (2026-09-19) */
.pool-grid .shot-zoom { max-width:360px; width:100%; }
.pool-grid .shot-tall { max-width:300px; }
.pool-grid .shot-tall .shot-img { height:440px; object-fit:cover; object-position:top center; }