/*
 * 学伴展示站样式。
 * 来源文件：marketing_site_v2.html；样式块的原始顺序保持不变，
 * 以确保本次结构整理不改变现有视觉层叠结果。
 */

/* ===== source style block 01 · base ===== */
* { box-sizing: border-box; }
    html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; }
    body {
      margin: 0;
      overflow-x: clip;
      color: var(--ink);
      background: var(--bg);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      letter-spacing: 0;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: none;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    img, video { max-width: 100%; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { text-wrap: balance; }
    p { text-wrap: pretty; }

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 12px;
      left: 12px;
      padding: 12px 16px;
      border-radius: 10px;
      background: var(--ink);
      color: #fff;
      transform: translateY(-160%);
    }
    .skip-link:focus { transform: translateY(0); }
    :focus-visible { outline: 3px solid rgba(47,111,237,.48); outline-offset: 4px; }

    .inner { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
    .section { position: relative; padding: 128px 0; }
    .eyebrow {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 760;
    }
    .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 7px rgba(47,111,237,.10); }
    .kicker {
      margin-bottom: 14px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 820;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .section-title { max-width: 850px; margin-bottom: 56px; }
    .section-title h2 { margin-bottom: 20px; font-size: clamp(42px, 5.2vw, 78px); line-height: 1.02; font-weight: 760; }
    .section-title > p:last-child { max-width: 720px; margin-bottom: 0; color: var(--muted); font-size: 19px; line-height: 1.75; }

    .nav {
      position: fixed;
      z-index: 50;
      top: 18px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      padding: 0 18px;
      pointer-events: none;
    }
    .nav-inner {
      display: flex;
      align-items: center;
      gap: 42px;
      min-height: 60px;
      padding: 8px 10px 8px 16px;
      border: 1px solid rgba(255,255,255,.72);
      border-radius: 999px;
      background: rgba(255,255,255,.76);
      box-shadow: 0 16px 48px rgba(17,19,23,.13), inset 0 1px 0 rgba(255,255,255,.9);
      backdrop-filter: blur(24px) saturate(160%);
      pointer-events: auto;
      transition: box-shadow .3s ease, background .3s ease, transform .3s ease;
    }
    .nav.is-scrolled .nav-inner { min-height:54px; background:rgba(255,255,255,.88); box-shadow:0 12px 34px rgba(17,19,23,.12); transform:translateY(-2px); }
    .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 820; white-space: nowrap; }
    .brand-mark { width: 34px; height: 34px; border-radius: 11px; background: #fff url("marketing-assets/xueban-mark.png") center/27px no-repeat; box-shadow: 0 0 0 1px var(--line); }
    .nav-links { display: flex; align-items: center; gap: 6px; }
    .nav-links a { padding: 12px 13px; border-radius: 999px; color: #4e5560; font-size: 14px; font-weight: 720; transition: color .2s, background .2s; }
    .nav-links a:hover, .nav-links a.is-active { color: var(--ink); background: rgba(17,19,23,.055); }
    .nav-links .nav-cta { min-height: 44px; padding: 12px 19px; color: #fff; background: var(--ink); }
    .nav-links .nav-cta:hover { color: #fff; background: #252931; }
    .nav-menu-button { display:none; width:42px; height:42px; border:0; border-radius:50%; color:var(--ink); background:rgba(17,19,23,.055); cursor:pointer; font-size:20px; line-height:1; }
    .mobile-menu { position:fixed; z-index:49; top:82px; left:16px; right:16px; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:10px; border:1px solid rgba(255,255,255,.75); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:var(--shadow-soft); backdrop-filter:blur(20px); opacity:0; transform:translateY(-8px); visibility:hidden; pointer-events:none; transition:opacity .18s, transform .18s, visibility .18s; }
    .mobile-menu.is-open { opacity:1; transform:none; visibility:visible; pointer-events:auto; }
    .mobile-menu a { padding:13px 14px; border-radius:11px; color:#4e5560; font-size:14px; font-weight:730; text-align:center; }
    .mobile-menu a:active { background:var(--soft); }

    .hero { position: relative;
      min-height: min(940px, 100svh);
      padding: 142px 0 82px;
      overflow: hidden;
      background: transparent;
    }
    .hero::before { content:"LEARN / UNDERSTAND"; position:absolute; z-index:1; right:-7%; bottom:15%; color:transparent; font-size:clamp(42px, 7vw, 112px); font-weight:850; letter-spacing:.08em; line-height:1; -webkit-text-stroke:1px rgba(17,19,23,.11); transform:rotate(-90deg); transform-origin:center; pointer-events:none; }
    .hero-video { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100svh; object-fit: cover; object-position: center; opacity: 1; transform:translateY(var(--stage-y, 0px)); transition:opacity .28s ease; will-change:transform; pointer-events: none; }
    .hero-video.is-hidden { opacity:0; }
    .hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); align-items: center; min-height: calc(min(940px, 100svh) - 224px); }
    .hero-copy { max-width: 670px; padding: 40px 0; }
    .hero h1 { margin-bottom: 28px; font-size: clamp(56px, 5.2vw, 80px); line-height: .98; font-weight: 780; }
    .hero h1 span { display: block; white-space: nowrap; }
    .hero .lead { max-width: 650px; margin-bottom: 34px; color: var(--muted); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.72; }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 0 24px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink);
      background: rgba(255,255,255,.82);
      font-weight: 780;
      transition: transform .2s, background .2s, box-shadow .2s;
    }
    .button:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .button.primary { border-color: var(--ink); color: #fff; background: var(--ink); }
    .hero-note {
      position: fixed;
      z-index: 4;
      right: 2.5%;
      bottom: 7%;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 12px;
      align-items: center;
      width: min(320px, 28vw);
      padding: 14px 16px;
      border: 1px solid rgba(255,255,255,.8);
      border-radius: 16px;
      background: rgba(255,255,255,.72);
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
      transform:translateY(var(--stage-y, 0px));
      transition: opacity .2s ease;
    }
    .hero-note.is-hidden { opacity:0; pointer-events:none; }
    .hero-note img { width: 54px; height: 54px; object-fit: contain; }
    .hero-note strong { display: block; margin-bottom: 3px; font-size: 14px; }
    .hero-note span { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .hero-proof { position: absolute; z-index: 3; left: 50%; bottom: 22px; display: flex; gap: 24px; transform: translateX(-50%); color: #5e6570; font-size: 12px; font-weight: 740; white-space: nowrap; }
    .hero-proof span { display: inline-flex; align-items: center; gap: 7px; }
    .hero-proof i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
    .catamind-stamp { position:absolute; z-index:3; top:108px; left:max(24px, calc((100vw - var(--max)) / 2)); display:inline-flex; align-items:center; gap:10px; color:rgba(17,19,23,.56); font-size:9px; font-weight:820; letter-spacing:.16em; line-height:1; text-transform:uppercase; }
    .catamind-stamp img { display:block; width:88px; height:18px; object-fit:contain; mix-blend-mode:multiply; opacity:.72; }

    .difference { z-index: 2; min-height:100svh; padding:104px 0 38px; background: linear-gradient(90deg, rgba(246,247,245,.97) 0 54%, rgba(246,247,245,.74) 64%, rgba(246,247,245,0) 82%); }
    .difference-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-content:center; gap: 24px; width: min(58%, 790px); min-height:calc(100svh - 142px); margin-left: max(5vw, calc((100vw - var(--max)) / 2)); margin-right: auto; }
    .difference-copy { position: static; }
    .difference-copy h2 { margin-bottom: 14px; font-size: clamp(42px, 4.7vw, 68px); line-height: 1.02; }
    .difference-copy p { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.6; }
    .compare-stack { display: grid; gap: 10px; }
    .compare-card { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.76); box-shadow: none; }
    .compare-card.dim { color: #505965; background: rgba(236,239,235,.72); box-shadow: none; }
    .compare-card.dim .compare-path span { color:#66707c; }
    .compare-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .compare-head strong { font-size: 20px; }
    .compare-head span { padding: 7px 10px; border-radius: 999px; color: var(--muted); background: var(--soft); font-size: 12px; font-weight: 780; }
    .compare-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .compare-path div { position: relative; min-height: 86px; padding: 13px 14px; border-top: 3px solid var(--line); background: rgba(17,19,23,.025); }
    .compare-card:not(.dim) .compare-path div:nth-child(1) { border-color: var(--blue); }
    .compare-card:not(.dim) .compare-path div:nth-child(2) { border-color: var(--teal); }
    .compare-card:not(.dim) .compare-path div:nth-child(3) { border-color: var(--violet); }
    .compare-path b { display: block; margin-bottom: 8px; }
    .compare-path span { color: var(--muted); font-size: 13px; line-height: 1.45; }

    .journey { height: 300vh; padding: 0; }
    .journey-sticky { --journey-accent:#2f6fed; position: sticky; top: 0; min-height: 100svh; display: grid; align-items: center; padding: 86px 0 28px; overflow: hidden; }
    .journey-sticky::before { content:""; position:absolute; z-index:0; top:8%; right:-8%; width:52%; height:84%; background:linear-gradient(135deg, color-mix(in srgb, var(--journey-accent) 72%, white), transparent 72%); clip-path:polygon(26% 0,100% 8%,86% 100%,0 86%); opacity:.13; transform:rotate(-8deg); transition:background .7s ease, opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); pointer-events:none; }
    .journey-layout { position:relative; display: grid; grid-template-columns: minmax(250px,.78fr) minmax(360px,1.08fr) minmax(330px,1fr); gap: 18px; align-items: center; height:min(610px, calc(100svh - 114px)); }
    .journey-layout::after { content:attr(data-chapter); position:absolute; z-index:0; right:8%; top:50%; color:transparent; font-size:clamp(120px, 19vw, 290px); font-weight:900; line-height:.8; letter-spacing:-.04em; -webkit-text-stroke:1px color-mix(in srgb, var(--journey-accent) 42%, transparent); opacity:.22; transform:translateY(-50%); pointer-events:none; }
    .journey-layout > * { position:relative; z-index:1; }
    .journey-media, .journey-copy, .orbit-shell { min-height:0; height:100%; }
    .journey-media { position: relative; align-self:center; height:min(570px, calc(100svh - 140px)); overflow: visible; }
    .journey-shot { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(22px) scale(.98); transition: opacity .45s, transform .55s cubic-bezier(.16,1,.3,1); }
    .journey-shot.is-active { opacity: 1; transform: none; }
    .journey-shot img { width:auto; max-width:92%; height:calc(100% - 28px); padding:5px; border:1px solid rgba(17,19,23,.28); border-radius:40px; background:#1c1f24; object-fit:cover; object-position:top; clip-path:inset(0 round 40px); box-shadow:0 20px 38px rgba(17,19,23,.14); aspect-ratio:1320 / 2868; }
    .journey-copy { display: flex; flex-direction: column; justify-content: center; }
    .journey-copy > h2 { margin: 0 0 16px; font-size: clamp(36px, 3.5vw, 52px); line-height: 1.03; }
    .step-list { display: grid; gap: 4px; }
    .step-card { position:relative; display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 10px 12px; border: 1px solid transparent; border-radius: 14px; opacity: .58; background: transparent; cursor: pointer; transition: opacity .28s, background .28s, border-color .28s, transform .28s; }
    .step-card:hover { opacity: .7; }
    .step-card.is-active { opacity: 1; border-color: var(--line); background: rgba(255,255,255,.84); box-shadow: var(--shadow-soft); transform: translateX(4px); }
    .step-index { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--ink); font-size: 11px; font-weight: 820; }
    .step-card h3 { margin: 0 0 2px; font-size: 17px; }
    .step-card p { margin: 0 0 2px; color: var(--muted); font-size: 12px; line-height: 1.38; }
    .step-card em { color: var(--blue); font-size: 11px; font-style: normal; font-weight: 740; }
    .orbit-shell { display: grid; place-items: center; overflow: visible; }
    .orbit-icon { --rotation: 0deg; position: relative; width: min(490px, 34vw); aspect-ratio: 1; transform: rotate(var(--rotation)); transition: transform .65s cubic-bezier(.16,1,.3,1); }
    .orbit-icon::before, .orbit-icon::after { content:""; position:absolute; border-radius:50%; pointer-events:none; }
    .orbit-icon::before { inset:17%; border:3px solid rgba(116,136,166,.28); border-left-color:rgba(47,111,237,.5); border-bottom-color:rgba(32,184,170,.52); transform:rotate(-18deg); }
    .orbit-icon::after { inset:23%; border:3px dotted rgba(106,135,180,.3); transform:rotate(24deg); }
    .orbit-icon img { display: none; }
    .orbit-point { --size: 15%; --color: var(--blue); position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1; border-radius: 50%; opacity: .28; background: radial-gradient(circle at 34% 28%, #fff 0 8%, color-mix(in srgb, var(--color) 54%, white) 26%, var(--color) 72%, color-mix(in srgb, var(--color) 74%, black)); transform: translate(-50%,-50%) scale(.74); transition: opacity .34s, transform .55s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
    .orbit-point.is-active { opacity: 1; transform: translate(-50%,-50%) scale(1.12); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color) 14%, transparent); animation: none; }
    .orbit-label { position:absolute; left:50%; top:50%; display:grid; place-items:center; gap:6px; width:124px; color:var(--ink); text-align:center; line-height:1.2; transform:translate(-50%,-50%) rotate(calc(-1 * var(--rotation))); transition:transform .65s cubic-bezier(.16,1,.3,1); }
    .orbit-label strong { font-size:18px; font-weight:820; }
    .orbit-label small { color:var(--muted); font-size:11px; font-weight:760; }
    .journey-progress { position: absolute; right: 22px; top: 50%; width: 3px; height: 180px; border-radius: 99px; background: rgba(17,19,23,.1); transform: translateY(-50%); }
    .journey-progress i { display: block; width: 100%; height: var(--progress,0%); border-radius: inherit; background: var(--ink); transition: opacity .18s linear; }
    .journey-progress span { position:absolute; left:12px; bottom:-22px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; white-space:nowrap; writing-mode:vertical-rl; }
    @keyframes orbit-breathe { 0%,100% { filter:saturate(1); } 50% { filter:saturate(1.28) brightness(1.08); } }
    .step-card::after { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:99px; background:transparent; transform:scaleY(.2); transform-origin:center; transition:transform .4s cubic-bezier(.16,1,.3,1), background .3s; }
    .step-card.is-active::after { transform:scaleY(1); background:var(--blue); }
    .step-card:nth-child(2).is-active::after { background:var(--ink); }
    .step-card:nth-child(3).is-active::after { background:var(--teal); }
    .step-card:nth-child(4).is-active::after { background:var(--amber); }
    .step-card:nth-child(5).is-active::after { background:var(--violet); }
    .scroll-marker { position:fixed; z-index:20; left:18px; bottom:28px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:10px; font-weight:820; letter-spacing:.12em; writing-mode:vertical-rl; pointer-events:none; opacity:.8; }
    .scroll-marker i { position:relative; display:block; width:2px; height:72px; overflow:hidden; border-radius:99px; background:rgba(17,19,23,.12); }
    .scroll-marker i::after { content:""; position:absolute; left:0; top:0; width:100%; height:30%; border-radius:inherit; background:var(--blue); transform:translateY(calc(var(--page-progress, 0) * 230%)); transition:transform .15s linear; }
    .mobile-screen-pair { display:none; }

    .product-proof { padding:48px 0; background: #121419; color: #fff; }
    .product-proof::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 12% 15%, rgba(47,111,237,.18), transparent 34%); pointer-events:none; }
    .product-proof .section-title > p:last-child, .product-proof .kicker { color: rgba(255,255,255,.62); }
    .proof-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
    .classroom-phone { position:relative; width:min(260px, 82%); margin:0 auto; padding:6px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-radius:40px; background:#20242b; box-shadow:0 32px 72px rgba(0,0,0,.34); aspect-ratio:1320 / 2868; }
    .classroom-phone img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; border-radius:34px; clip-path:inset(0 round 34px); }
    .proof-copy h2 { margin-bottom: 14px; font-size: clamp(40px,4.5vw,62px); line-height: 1.02; }
    .proof-copy > p { margin-bottom: 18px; color: rgba(255,255,255,.67); font-size: 16px; line-height: 1.52; }
    .reason-list { display: grid; gap: 1px; border-top: 1px solid rgba(255,255,255,.13); }
    .reason { display: grid; grid-template-columns: 32px 1fr; gap: 11px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.13); }
    .reason i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#0f1718; background:var(--teal); font-style:normal; font-weight:900; }
    .reason strong { display:block; margin-bottom:3px; font-size:16px; }
    .reason span { color:rgba(255,255,255,.58); font-size:13px; line-height:1.4; }
    .report-strip { display:grid; grid-template-columns:1.08fr .92fr; gap:1px; margin-top:14px; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:14px; background:rgba(255,255,255,.13); }
    .report-panel { padding:12px 14px; background:#1a1d23; }
    .report-panel h3 { margin-bottom:8px; font-size:18px; line-height:1.15; }
    .meter { display:grid; grid-template-columns:88px 1fr 34px; gap:10px; align-items:center; margin:7px 0; color:rgba(255,255,255,.72); font-size:12px; }
    .meter-track { height:6px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
    .meter-track i { display:block; width:var(--value); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--blue),var(--teal)); }
    .next-step { display:grid; align-content:center; gap:8px; }
    .next-step div { padding:11px 12px; border-radius:10px; background:rgba(255,255,255,.055); }
    .next-step strong { display:block; margin-bottom:3px; font-size:13px; }
    .next-step span { color:rgba(255,255,255,.56); font-size:11px; line-height:1.35; }

    #trust.section { padding:80px 0; }
    .trust-grid { display:grid; grid-template-columns:1.03fr .97fr; gap:40px; align-items:start; }
    .reward-visual { position:relative; min-height:540px; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#fff; box-shadow:var(--shadow); }
    .reward-visual video { width:100%; height:100%; min-height:540px; object-fit:cover; border-radius:27px; clip-path:inset(0 round 27px); }
    .reward-score { position:absolute; left:28px; top:28px; padding:24px; border-radius:17px; background:rgba(255,255,255,.9); box-shadow:var(--shadow-soft); backdrop-filter:blur(16px); }
    .reward-score small { display:block; margin-bottom:8px; color:var(--muted); font-weight:800; text-transform:uppercase; }
    .reward-score strong { display:block; font-size:54px; line-height:1; }
    .reward-tag { position:absolute; right:24px; bottom:24px; max-width:300px; padding:20px; border-radius:16px; color:#fff; background:var(--ink); }
    .reward-tag strong { display:block; margin-bottom:6px; font-size:20px; }
    .reward-tag span { color:rgba(255,255,255,.62); font-size:14px; line-height:1.55; }
    .trust-copy h2 { margin-bottom:14px; font-size:clamp(44px,5vw,72px); line-height:1.02; }
    .trust-copy > p { margin-bottom:20px; color:var(--muted); font-size:17px; line-height:1.6; }
    .trust-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .trust-card { padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.68); }
    .trust-card strong { display:block; margin-bottom:5px; font-size:16px; }
    .trust-card span { color:var(--muted); font-size:13px; line-height:1.5; }
    .boundary { margin-top:14px; padding:0; color:rgba(17,19,23,.42); font-size:10px; line-height:1.5; letter-spacing:.01em; }
    .boundary strong { color:inherit; font-weight:760; }

    .devices { padding:64px 0 72px; border-top:1px solid rgba(17,19,23,.08); background:linear-gradient(180deg, rgba(47,111,237,.045), rgba(47,111,237,0) 230px); }
    .devices .section-title { margin-bottom:28px; }
    .device-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
    .device-card { position:relative; display:flex; flex-direction:column; min-width:0; min-height:600px; padding:24px 28px 28px; overflow:visible; border-right:1px solid var(--line); background:transparent; }
    .device-card:last-child { border-right:0; }
    .device-card small { color:var(--muted); font-size:12px; font-weight:820; text-transform:uppercase; }
    .device-card h3 { margin:14px 0 8px; font-size:28px; }
    .device-card p { min-height:52px; margin-bottom:0; color:var(--muted); line-height:1.6; }
    .device-shot { position:relative; left:auto; bottom:auto; width:min(74%, 252px); height:auto; margin:30px auto 0; padding:5px; overflow:hidden; border:1px solid rgba(17,19,23,.3); border-radius:40px; background:#1c1f24; box-shadow:0 20px 38px rgba(17,19,23,.15); aspect-ratio:1320 / 2868; transform:none; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; will-change:transform; }
    .device-card:hover .device-shot { transform:translateY(-8px); box-shadow:0 28px 48px rgba(17,19,23,.18); }
    .device-shot img { display:block; width:100%; height:100%; border-radius:34px; clip-path:inset(0 round 34px); object-fit:cover; object-position:top; }

    .faq { padding:56px 0; }
    .faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start; }
    .faq h2 { position:sticky; top:130px; font-size:clamp(44px,5vw,72px); line-height:1.02; }
    details { border-top:1px solid var(--line); }
    details:last-child { border-bottom:1px solid var(--line); }
    summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0; cursor:pointer; font-size:18px; font-weight:760; list-style:none; }
    summary::-webkit-details-marker { display:none; }
    summary::after { content:"+"; font-size:28px; font-weight:400; transition:transform .2s; }
    details[open] summary::after { transform:rotate(45deg); }
    details p { max-width:650px; padding:0 44px 24px 0; color:var(--muted); line-height:1.75; }

    .final-cta { padding:72px 0 48px; }
    .cta-panel { position:relative; overflow:hidden; contain:paint; padding:64px 32px; border-radius:28px; color:#fff; background:#121419; text-align:center; box-shadow:var(--shadow); }
    .cta-panel::before { content:""; position:absolute; inset:-18%; background:conic-gradient(from 90deg, transparent, rgba(47,111,237,.32), transparent 24%, rgba(30,182,170,.22), transparent 55%); transform-origin:center; animation:cta-glow 8s ease-in-out infinite alternate, cta-sweep 22s linear infinite; will-change:opacity,transform; }
    .cta-panel::after { content:""; position:absolute; left:50%; top:50%; width:72%; aspect-ratio:1; border:1px solid rgba(255,255,255,.1); border-radius:50%; transform:translate(-50%,-50%) rotate(-8deg) scaleX(1.08); animation:cta-orbit 10s ease-in-out infinite alternate, cta-orbit-drift 18s ease-in-out infinite alternate; will-change:opacity,transform; pointer-events:none; }
    .cta-panel::before, .cta-panel::after { z-index:0; }
    .cta-panel > * { position:relative; z-index:1; }
    .cta-panel h2 { margin-bottom:18px; font-size:clamp(48px,6vw,86px); line-height:1; }
    .cta-panel p { max-width:650px; margin:0 auto 30px; color:rgba(255,255,255,.66); font-size:18px; line-height:1.7; }
    .cta-panel .actions { justify-content:center; }
    .cta-panel .button.secondary { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.06); }
    @keyframes cta-glow { from { opacity:.56; } to { opacity:.92; } }
    @keyframes cta-sweep { from { transform:rotate(0deg) scale(1.18); } to { transform:rotate(360deg) scale(1.18); } }
    @keyframes cta-rotate { to { transform:rotate(360deg); } }
    @keyframes cta-orbit { from { opacity:.35; } to { opacity:.72; } }
    @keyframes cta-orbit-drift { from { transform:translate(-50%,-50%) rotate(-8deg) scaleX(1.08); } to { transform:translate(-50%,-50%) rotate(8deg) scaleX(1.16); } }

    .footer { padding:24px 0 32px; border-top:1px solid var(--line); }
    .footer-row { display:flex; align-items:center; justify-content:space-between; gap:32px; color:var(--muted); font-size:13px; }
    .footer-brand { display:flex; align-items:center; flex-wrap:wrap; gap:26px; min-width:0; }
    .footer-copy { display:grid; gap:4px; }
    .footer-copy strong { color:var(--ink); font-size:13px; font-weight:800; }
    .footer-copy span { color:var(--muted); font-size:12px; }
    .built-by { display:inline-flex; align-items:center; gap:9px; padding-left:20px; border-left:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:780; letter-spacing:.11em; line-height:1; text-transform:uppercase; white-space:nowrap; }
    .built-by img { display:block; width:92px; height:18px; object-fit:contain; mix-blend-mode:multiply; opacity:.72; }
    .footer-actions { display:flex; align-items:center; justify-content:flex-end; gap:24px; }
    .footer-links { display:flex; flex-wrap:wrap; gap:20px; }
    .footer-top { color:var(--muted); white-space:nowrap; }
    .footer a:hover { color:var(--ink); }

    dialog { width:min(560px, calc(100% - 32px)); padding:0; border:0; border-radius:22px; color:var(--ink); background:#fff; box-shadow:0 40px 120px rgba(17,19,23,.34); }
    dialog::backdrop { background:rgba(17,19,23,.52); backdrop-filter:blur(8px); }
    .dialog-head { display:flex; justify-content:space-between; gap:24px; padding:26px 28px 20px; border-bottom:1px solid var(--line); }
    .dialog-head h2 { margin:0; font-size:28px; }
    .icon-button { width:40px; height:40px; border:0; border-radius:50%; background:var(--soft); cursor:pointer; font-size:24px; }
    .trial-form { display:grid; gap:18px; padding:26px 28px 28px; }
    .trial-form p { margin:0; color:var(--muted); line-height:1.65; }
    .field { display:grid; gap:8px; }
    .field label { font-size:14px; font-weight:760; }
    .field input, .field select { width:100%; min-height:48px; padding:0 14px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:#fff; }
    .form-note { color:var(--muted); font-size:12px; }
    .trial-form .button { border:0; cursor:pointer; }

    .reveal { opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1); }
    .reveal.is-visible { opacity:1; transform:none; }

    @media (min-width: 981px) {
      .product-proof { min-height:100svh; display:grid; align-items:center; }
    }

    @media (max-width: 980px) {
      .inner { width:min(720px, calc(100% - 40px)); }
      .section { padding:96px 0; }
      .product-proof { min-height:auto; padding:76px 0; }
      .nav-links a:not(.nav-cta) { display:none; }
      .nav-menu-button { display:grid; place-items:center; }
      .nav-inner { gap:24px; }
      .hero { min-height:920px; }
      .hero-grid { grid-template-columns:1fr; min-height:700px; align-items:start; }
      .hero-copy { max-width:560px; padding-top:60px; }
      .hero-video { object-position:45% center; opacity:1; }
      .hero::before, .scroll-marker { display:none; }
      .hero-note { right:28px; bottom:80px; width:270px; }
      .difference-grid, .proof-grid, .trust-grid, .faq-grid { grid-template-columns:1fr; gap:42px; }
      .difference-grid { width:min(720px, calc(100% - 40px)); margin-inline:auto; }
      .difference { min-height:auto; background:rgba(246,247,245,.96); }
      .difference-grid { min-height:auto; }
      .difference-copy, .faq h2 { position:static; }
      .journey { height:auto; padding:96px 0; overflow-x:clip; }
      .journey-sticky { position:static; padding:0; }
      .journey-layout { grid-template-columns:1fr; height:auto; }
      .journey-copy { display:contents; }
      .journey-copy > h2 { order:-3; }
      .step-list { order:-2; grid-template-columns:1fr; }
      .journey-media { order:-1; min-height:620px; }
      .journey-progress { display:none; }
      .journey-layout::after { display:none; }
      .journey-sticky::before { display:none; }
      .orbit-shell { display:grid; order:-3; min-height:190px; height:190px; }
      .orbit-icon { width:190px; }
      .step-card { opacity:1; background:rgba(255,255,255,.74); border-color:var(--line); }
      .step-card.is-active { transform:none; }
      .report-strip { grid-template-columns:1fr; }
      .reward-visual { order:2; min-height:560px; }
      .reward-visual video { min-height:560px; }
      .device-grid { grid-template-columns:1fr; }
      .device-card { min-height:650px; border-right:0; border-bottom:1px solid var(--line); }
      .device-card:last-child { border-bottom:0; }
      .device-shot { width:min(58%, 340px); }
    }

    @media (max-width: 640px) {
      html { scroll-padding-top:84px; }
      body::before { background-size:48px 48px; }
      .inner { width:calc(100% - 32px); }
      .section { padding:76px 0; }
      .nav { top:12px; padding:0 12px; }
      .nav-inner { min-height:56px; padding:7px 8px 7px 12px; }
      .nav-inner { gap:7px; }
      .brand { font-size:17px; }
      .brand-mark { width:32px; height:32px; }
      .nav-links .nav-cta { min-height:44px; padding:11px 16px; }
      .hero { min-height:780px; padding:108px 0 56px; }
      .hero-grid { display:block; min-height:610px; }
      .hero-copy { max-width:none; padding:72px 0 0; }
      .hero h1 { margin-bottom:22px; font-size:47px; line-height:1.02; }
      .hero .lead { margin-bottom:28px; font-size:17px; line-height:1.65; }
      .hero-video { object-position:34% center; opacity:1; }
      .hero::after { display:none; }
      .hero-grid, .hero-note, .hero-proof { z-index:2; }
      .hero-note { display:none; }
      .hero-proof { left:16px; right:16px; bottom:18px; justify-content:space-between; gap:6px; transform:none; font-size:10px; }
      .actions { display:grid; grid-template-columns:1fr; }
      .button { width:100%; min-height:50px; }
      .section-title { margin-bottom:34px; }
      .section-title h2, .difference-copy h2, .proof-copy h2, .trust-copy h2, .faq h2 { font-size:39px; }
      .section-title > p:last-child, .difference-copy p, .proof-copy > p, .trust-copy > p { font-size:16px; line-height:1.68; }
      .difference { padding-top:82px; }
      .difference { padding-bottom:54px; }
      .difference-grid { gap:16px; }
      .difference-copy h2 { margin-bottom:10px; font-size:36px; }
      .difference-copy p { font-size:14px; line-height:1.5; }
      .compare-stack { gap:8px; }
      .compare-card { padding:14px; }
      .compare-head { margin-bottom:8px; }
      .compare-head strong { font-size:18px; }
      .compare-head span { padding:5px 8px; font-size:10px; }
      .compare-path { grid-template-columns:1fr; }
      .compare-path div { min-height:auto; padding:8px 10px; }
      .compare-path b { display:inline; margin:0 8px 0 0; font-size:13px; }
      .compare-path span { display:inline; font-size:11px; line-height:1.35; }
      .journey { padding:80px 0; }
      .journey-layout { gap:20px; }
      .journey-copy > h2 { font-size:38px; }
      .journey-media { min-height:410px; height:410px; margin-top:30px; margin-bottom:34px; }
      .journey-shot img { width:min(68%, 258px); height:380px; border-radius:28px; clip-path:inset(0 round 28px); }
      .orbit-shell { min-height:166px; height:166px; }
      .orbit-icon { width:166px; }
      .step-list { gap:6px; }
      .step-card { grid-template-columns:34px 1fr; padding:11px 12px; }
      .step-card p { font-size:12px; line-height:1.4; }
      .product-proof { padding:64px 0 72px; }
      .classroom-phone { max-width:300px; max-height:620px; overflow:hidden; border-radius:38px; }
      .classroom-phone img { max-height:590px; }
      .reason { padding:13px 0; }
      .report-strip { margin-top:20px; }
      .report-panel { padding:16px; }
      .meter { grid-template-columns:72px 1fr 38px; gap:9px; }
      .trust-list { grid-template-columns:1fr 1fr; gap:8px; }
      .trust-card { padding:15px; }
      .trust-card strong { font-size:15px; }
      .trust-card span { font-size:12px; line-height:1.45; }
      .reward-visual, .reward-visual video { min-height:480px; }
      .reward-score { left:16px; top:16px; padding:18px; }
      .reward-score strong { font-size:42px; }
      .reward-tag { left:16px; right:16px; bottom:16px; max-width:none; }
      #trust.section { padding:64px 0; }
      .devices { padding:56px 0 64px; }
      .device-grid { gap:0; }
      .device-card { display:flex; flex-direction:column; min-height:0; padding:28px 4px 34px; overflow:visible; }
      .device-card h3 { font-size:25px; }
      .device-card p { min-height:0; max-width:30ch; margin-bottom:0; }
      .device-shot { position:relative; left:auto; bottom:auto; flex:none; width:min(66%, 228px); height:auto; margin:26px auto 0; padding:4px; border-radius:36px; aspect-ratio:1320 / 2868; transform:none; }
      .device-card:hover .device-shot { transform:none; }
      .device-shot img { width:100%; height:100%; border-radius:31px; clip-path:inset(0 round 31px); object-fit:cover; object-position:top; }
      .faq-grid { gap:26px; }
      .faq { padding:52px 0; }
      summary { font-size:17px; }
      .final-cta { padding:64px 0 40px; }
      .cta-panel { padding:64px 20px; border-radius:22px; }
      .cta-panel h2 { font-size:45px; }
      .footer-row { align-items:flex-start; flex-direction:column; gap:24px; }
      .footer-brand { align-items:flex-start; flex-direction:column; gap:16px; }
      .built-by { padding-top:14px; padding-left:0; border-top:1px solid var(--line); border-left:0; }
      .footer-actions { width:100%; justify-content:space-between; gap:16px; }
      .footer-links { gap:12px 16px; }
      .dialog-head, .trial-form { padding-left:20px; padding-right:20px; }
    }

    @media (max-width: 640px) {
      .journey-media { display:none; }
      .mobile-screen-pair { order:-1; display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; margin:28px 0 4px; }
      .mobile-screen { display:flex; flex-direction:column; min-width:0; }
      .mobile-screen b { order:2; display:block; margin:10px 0 0; color:var(--muted); font-size:11px; letter-spacing:.04em; text-align:center; }
      .mobile-screen-frame { width:100%; padding:4px; overflow:hidden; border:1px solid rgba(17,19,23,.32); border-radius:30px; background:#1c1f24; box-shadow:0 14px 28px rgba(17,19,23,.13); aspect-ratio:1320 / 2868; }
      .mobile-screen-frame img { display:block; width:100%; height:100%; border-radius:25px; clip-path:inset(0 round 25px); object-fit:cover; object-position:top; }
      .product-proof { padding-top:64px; }
    }

    @media (max-width: 640px) {
      .catamind-stamp { top:84px; left:16px; gap:7px; font-size:8px; }
      .catamind-stamp img { width:72px; height:15px; }
      .hero h1 span { white-space:normal; }
      .hero-copy { padding-top:108px; }
      .hero h1 { max-width:12ch; }

      .journey { padding:84px 0 96px; background:rgba(246,247,245,.92); }
      .journey-sticky { min-height:0; padding:0; overflow:visible; }
      .journey-sticky::before { display:none; }
      .journey-layout { display:flex; flex-direction:column; align-items:stretch; gap:0; width:calc(100% - 32px); height:auto; }
      .journey-layout::after { display:none; }
      .journey-layout > * { width:100%; }
      .journey-copy { display:contents; }
      .journey-copy > h2 { order:0; width:100%; margin:0 0 24px; font-size:clamp(34px, 10vw, 44px); line-height:1.05; }
      .orbit-shell { order:1; display:grid; min-height:216px; height:216px; margin:0 0 22px; overflow:visible; }
      .orbit-icon { width:min(210px, 58vw); }
      .step-list { order:2; display:grid; gap:8px; width:100%; margin:0; }
      .step-card { grid-template-columns:38px minmax(0,1fr); min-height:0; padding:14px; gap:12px; border-radius:18px; opacity:1; border-color:rgba(17,19,23,.11); background:rgba(255,255,255,.84); box-shadow:none; }
      .step-card.is-active { border-color:rgba(47,111,237,.28); background:#fff; box-shadow:0 12px 28px rgba(17,19,23,.07); transform:none; }
      .step-index { width:34px; height:34px; font-size:11px; }
      .step-card h3 { margin-bottom:4px; font-size:18px; }
      .step-card p { margin-bottom:4px; font-size:12px; line-height:1.42; }
      .step-card em { font-size:12px; }
      .journey-media, .journey-progress { display:none !important; }

      .product-proof .classroom-phone { display:block; width:min(88vw, 320px); max-width:none; max-height:none; margin:0 auto; border-radius:40px; }
      .product-proof .classroom-phone img { width:100%; height:100%; max-height:none; border-radius:34px; object-fit:cover; }
      .device-shot { width:min(72vw, 280px); border-radius:34px; }
      .device-shot img { border-radius:29px; clip-path:inset(0 round 29px); }
      .cta-panel::after { width:120%; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
      .reveal { opacity:1; transform:none; }
    }

/* ===== 02 · canonical visual system ===== */
/*
     * V2 展示层：
     * 只存在于 marketing_site_v2.html，不覆盖原版网页，也不依赖 App 业务代码。
     * 视觉关键词：暖纸张、深墨色、单一蓝色焦点、证据化叙事。
     */
    :root {
      --bg: #f3f0e8;
      --surface: #fffdf8;
      --ink: #111317;
      --muted: #667180;
      --soft: #e8ece8;
      --line: rgba(17, 19, 23, .13);
      --blue: #2b63d9;
      --teal: #2d8f86;
      --amber: #b9851c;
      --violet: #5f58b8;
      --shadow: 0 20px 56px rgba(17, 19, 23, .09);
      --shadow-soft: 0 1px 2px rgba(17, 19, 23, .04), 0 18px 42px rgba(17, 19, 23, .08);
      --radius: 24px;
      --max: 1260px;
    }

    html {
      scroll-padding-top: 104px;
      background: var(--bg);
    }

    body {
      color: var(--ink);
      background:
        radial-gradient(circle at 78% -10%, rgba(53, 107, 232, .13), transparent 28rem),
        radial-gradient(circle at 7% 31%, rgba(28, 174, 158, .08), transparent 25rem),
        var(--bg);
    }

    body::before {
      background: none;
      mask-image: none;
    }

    .inner {
      width: min(var(--max), calc(100% - 56px));
    }

    .section {
      padding: 144px 0;
    }

    .kicker {
      margin-bottom: 18px;
      color: #637084;
      font-size: 12px;
      letter-spacing: .14em;
    }

    .eyebrow {
      margin-bottom: 24px;
      color: #506178;
      letter-spacing: .02em;
    }

    .eyebrow::before {
      width: 8px;
      height: 8px;
      background: var(--blue);
      box-shadow: 0 0 0 8px rgba(53, 107, 232, .11);
    }

    .nav {
      top: 20px;
      padding: 0 20px;
    }

    .nav-inner {
      width: min(1120px, 100%);
      min-height: 64px;
      gap: 34px;
      padding: 8px 10px 8px 17px;
      border-color: rgba(255, 255, 255, .84);
      background: rgba(255, 253, 248, .78);
      box-shadow: 0 18px 54px rgba(17, 19, 23, .10), inset 0 1px 0 rgba(255, 255, 255, .94);
    }

    .nav.is-scrolled .nav-inner {
      min-height: 58px;
      background: rgba(255, 253, 248, .94);
      box-shadow: 0 14px 36px rgba(17, 19, 23, .10);
    }

    .brand {
      gap: 11px;
      color: var(--ink);
      font-size: 17px;
      letter-spacing: -.02em;
    }

    .brand-mark {
      width: 36px;
      height: 36px;
      border-radius: 12px;
      background-size: 28px;
      box-shadow: 0 0 0 1px rgba(17, 19, 23, .1), 0 5px 14px rgba(17, 19, 23, .08);
    }

    .nav-links {
      gap: 4px;
    }

    .nav-links a {
      padding: 11px 12px;
      color: #5a6575;
      font-size: 13px;
      font-weight: 760;
    }

    .nav-links a:hover,
    .nav-links a.is-active {
      color: var(--ink);
      background: rgba(53, 107, 232, .09);
    }

    .nav-links .nav-cta {
      min-height: 46px;
      padding-inline: 20px;
      background: var(--ink);
    }

    .hero {
      min-height: min(900px, 100svh);
      padding: 148px 0 82px;
      isolation: isolate;
      background:
        linear-gradient(108deg, rgba(243, 240, 232, .98) 0 45%, rgba(243, 240, 232, .68) 63%, rgba(243, 240, 232, 0) 85%);
    }

    .hero::before {
      right: 4%;
      bottom: 24%;
      color: transparent;
      font-size: clamp(46px, 7.4vw, 122px);
      letter-spacing: .14em;
      opacity: .55;
      -webkit-text-stroke: 1px rgba(17, 19, 23, .11);
    }

    .hero::after {
      content: "";
      position: absolute;
      z-index: 0;
      right: 3%;
      bottom: -16%;
      width: 44vw;
      max-width: 620px;
      aspect-ratio: 1;
      border: 1px solid rgba(53, 107, 232, .16);
      border-radius: 50%;
      box-shadow:
        0 0 0 44px rgba(53, 107, 232, .035),
        0 0 0 92px rgba(28, 174, 158, .024);
      pointer-events: none;
    }

    .hero-grid {
      grid-template-columns: minmax(0, .84fr) minmax(420px, 1.16fr);
      min-height: calc(min(900px, 100svh) - 230px);
      gap: 18px;
    }

    .hero-copy {
      max-width: 640px;
      padding: 48px 0 66px;
    }

    .hero h1 {
      max-width: 8.2ch;
      margin-bottom: 28px;
      color: #102039;
      font-size: clamp(62px, 7vw, 108px);
      line-height: .94;
      letter-spacing: -.065em;
    }

    .hero .lead {
      max-width: 590px;
      margin-bottom: 36px;
      color: #637084;
      font-size: clamp(18px, 1.55vw, 21px);
      line-height: 1.75;
    }

    .actions {
      gap: 14px;
    }

    .button {
      min-height: 54px;
      padding-inline: 25px;
      border-color: rgba(17, 19, 23, .16);
      background: rgba(255, 253, 248, .8);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(17, 19, 23, .1);
    }

    .button.primary {
      border-color: var(--ink);
      background: var(--ink);
      box-shadow: 0 12px 26px rgba(17, 19, 23, .16);
    }

    .hero-video {
      position: absolute;
      z-index: 1;
      inset: 0 0 0 37%;
      width: 70%;
      height: 100%;
      object-fit: cover;
      object-position: 74% center;
      opacity: .94;
      transform: none;
      filter: saturate(.92) contrast(.98);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 88%, transparent 100%);
      mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 88%, transparent 100%);
    }

    .hero-note {
      position: absolute;
      z-index: 4;
      right: max(5vw, calc((100vw - var(--max)) / 2));
      bottom: 13%;
      width: min(330px, 28vw);
      padding: 16px 18px;
      border-color: rgba(255, 255, 255, .88);
      background: rgba(255, 253, 248, .76);
      box-shadow: 0 18px 44px rgba(17, 19, 23, .13);
      transform: none;
    }

    .hero-note img {
      width: 56px;
      height: 56px;
    }

    .hero-note strong {
      color: var(--ink);
      font-size: 14px;
    }

    .hero-note span {
      color: #697587;
      font-size: 12px;
      line-height: 1.5;
    }

    .hero-proof {
      left: max(28px, calc((100vw - var(--max)) / 2));
      bottom: 30px;
      gap: 22px;
      transform: none;
      color: #6c7786;
      font-size: 11px;
      letter-spacing: .03em;
    }

    .hero-proof span {
      gap: 8px;
    }

    .hero-proof i {
      width: 5px;
      height: 5px;
      background: var(--teal);
    }

    .catamind-stamp {
      top: 112px;
      color: rgba(17, 19, 23, .48);
    }

    .difference {
      min-height: 92svh;
      padding: 122px 0 94px;
      background:
        linear-gradient(180deg, rgba(235, 240, 237, .82), rgba(235, 240, 237, .9)),
        radial-gradient(circle at 86% 50%, rgba(53, 107, 232, .1), transparent 30rem);
    }

    .difference-grid {
      grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
      align-content: center;
      gap: clamp(44px, 7vw, 110px);
      width: min(var(--max), calc(100% - 56px));
      min-height: calc(92svh - 216px);
      margin-inline: auto;
    }

    .difference-copy {
      position: sticky;
      top: 142px;
      align-self: start;
    }

    .difference-copy h2 {
      max-width: 12ch;
      margin-bottom: 20px;
      color: #102039;
      font-size: clamp(46px, 5.5vw, 76px);
      line-height: .98;
      letter-spacing: -.06em;
    }

    .difference-copy p {
      max-width: 34ch;
      color: #637084;
      font-size: 17px;
      line-height: 1.75;
    }

    .compare-stack {
      gap: 16px;
    }

    .compare-card {
      padding: 26px 28px;
      border-color: rgba(17, 19, 23, .12);
      border-radius: 22px;
      background: rgba(255, 253, 248, .88);
      box-shadow: var(--shadow-soft);
    }

    .compare-card.dim {
      color: #687282;
      background: rgba(221, 228, 223, .55);
      box-shadow: none;
    }

    .compare-head {
      margin-bottom: 20px;
    }

    .compare-head strong {
      font-size: 22px;
      letter-spacing: -.03em;
    }

    .compare-head span {
      padding: 7px 11px;
      color: #657286;
      background: #e7ece8;
      font-size: 11px;
      letter-spacing: .04em;
    }

    .compare-path {
      gap: 10px;
    }

    .compare-path div {
      min-height: 110px;
      padding: 15px 16px;
      border-top-width: 2px;
      background: rgba(17, 19, 23, .035);
    }

    .compare-path b {
      margin-bottom: 9px;
      font-size: 15px;
    }

    .compare-path span {
      color: #6c7786;
      font-size: 12px;
      line-height: 1.52;
    }

    .journey {
      height: 320vh;
      background:
        linear-gradient(180deg, #f5f4ef 0%, #ebf1ee 100%);
    }

    .journey-sticky {
      --journey-accent: #356be8;
      padding: 112px 0 24px;
      background:
        radial-gradient(circle at 88% 30%, color-mix(in srgb, var(--journey-accent) 10%, transparent), transparent 28rem),
        linear-gradient(180deg, rgba(245, 244, 239, .78), rgba(235, 241, 238, .92));
    }

    .journey-sticky::before {
      top: 12%;
      right: -4%;
      width: 54%;
      height: 76%;
      opacity: .1;
      filter: blur(.2px);
    }

    .journey-layout {
      grid-template-columns: minmax(240px, .78fr) minmax(390px, 1.12fr) minmax(300px, .92fr);
      gap: 30px;
      height: min(590px, calc(100svh - 164px));
    }

    .journey-layout::after {
      right: 5%;
      font-size: clamp(150px, 20vw, 320px);
      opacity: .16;
    }

    .journey-media {
      height: min(560px, calc(100svh - 184px));
    }

    .journey-shot {
      transform: translateY(28px) scale(.975);
      transition: opacity .4s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
    }

    .journey-shot img {
      max-width: 88%;
      height: calc(100% - 18px);
      border-color: rgba(17, 19, 23, .22);
      border-radius: 36px;
      background: #1c222b;
      box-shadow: 0 28px 60px rgba(17, 19, 23, .17);
    }

    .journey-copy > h2 {
      max-width: 10ch;
      margin-bottom: 24px;
      color: #102039;
      font-size: clamp(40px, 4vw, 58px);
      letter-spacing: -.055em;
    }

    .step-list {
      gap: 7px;
    }

    .step-card {
      grid-template-columns: 40px 1fr;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      opacity: .54;
    }

    .step-card:hover {
      opacity: .78;
    }

    .step-card.is-active {
      border-color: rgba(17, 19, 23, .12);
      background: rgba(255, 253, 248, .91);
      box-shadow: 0 14px 34px rgba(17, 19, 23, .09);
      transform: translateX(6px);
    }

    .step-index {
      width: 34px;
      height: 34px;
      color: var(--ink);
      background: #dfe8f7;
      font-size: 11px;
    }

    .step-card.is-active .step-index {
      color: #fff;
      background: var(--journey-accent);
    }

    .step-card h3 {
      margin-bottom: 3px;
      font-size: 16px;
    }

    .step-card p {
      color: #6d7887;
      font-size: 12px;
      line-height: 1.48;
    }

    .step-card em {
      color: var(--journey-accent);
      font-size: 11px;
    }

    .orbit-icon {
      width: min(440px, 31vw);
    }

    .orbit-icon::before {
      border-width: 2px;
      border-left-color: color-mix(in srgb, var(--journey-accent) 58%, transparent);
    }

    .orbit-icon::after {
      border-width: 2px;
    }

    .orbit-label strong {
      font-size: 17px;
    }

    .journey-progress {
      right: max(22px, calc((100vw - var(--max)) / 2 - 18px));
      height: 220px;
      background: rgba(17, 19, 23, .11);
    }

    .journey-progress i {
      background: var(--journey-accent);
    }

    .product-proof {
      min-height: 100svh;
      padding: 112px 0;
      background:
        radial-gradient(circle at 14% 18%, rgba(53, 107, 232, .2), transparent 30rem),
        radial-gradient(circle at 92% 88%, rgba(28, 174, 158, .13), transparent 24rem),
        #101927;
    }

    .product-proof::before {
      opacity: 0;
      background: none;
      mask-image: none;
    }

    .proof-grid {
      grid-template-columns: .8fr 1.2fr;
      gap: clamp(50px, 9vw, 140px);
    }

    .classroom-phone {
      width: min(330px, 90%);
      border-radius: 42px;
      box-shadow: 0 38px 90px rgba(0, 0, 0, .36);
    }

    .proof-copy h2 {
      max-width: 9ch;
      margin-bottom: 20px;
      font-size: clamp(44px, 5.1vw, 78px);
      letter-spacing: -.06em;
    }

    .proof-copy > p {
      max-width: 45ch;
      color: rgba(255, 255, 255, .64);
      font-size: 17px;
      line-height: 1.7;
    }

    .reason-list {
      margin-top: 26px;
    }

    .reason {
      grid-template-columns: 36px 1fr;
      gap: 13px;
      padding: 12px 0;
    }

    .reason i {
      width: 30px;
      height: 30px;
      background: #8ee1d4;
    }

    .reason strong {
      font-size: 15px;
    }

    .reason span {
      color: rgba(255, 255, 255, .56);
      font-size: 12px;
      line-height: 1.5;
    }

    .report-strip {
      margin-top: 22px;
      border-radius: 18px;
    }

    .report-panel {
      padding: 18px;
      background: rgba(255, 255, 255, .075);
    }

    .report-panel h3 {
      max-width: 19ch;
      margin-bottom: 14px;
      font-size: 19px;
      line-height: 1.22;
    }

    .meter {
      margin: 10px 0;
      color: rgba(255, 255, 255, .7);
    }

    .meter-track {
      background: rgba(255, 255, 255, .12);
    }

    .meter-track i {
      background: linear-gradient(90deg, #7eaeff, #6be0d2);
    }

    #trust.section {
      padding: 128px 0;
      background:
        linear-gradient(180deg, rgba(235, 241, 238, .78), rgba(243, 240, 232, .95));
    }

    .trust-grid {
      grid-template-columns: 1.05fr .95fr;
      gap: clamp(44px, 8vw, 118px);
      align-items: center;
    }

    .reward-visual {
      min-height: 600px;
      border-color: rgba(17, 19, 23, .12);
      border-radius: 32px;
      box-shadow: var(--shadow);
    }

    .reward-visual video {
      min-height: 600px;
    }

    .reward-score {
      left: 26px;
      top: 26px;
      padding: 20px 22px;
      background: rgba(255, 253, 248, .9);
    }

    .reward-score small {
      color: #6a7584;
      font-size: 10px;
      letter-spacing: .13em;
    }

    .reward-score strong {
      color: var(--ink);
      font-size: 48px;
      letter-spacing: -.06em;
    }

    .reward-tag {
      right: 22px;
      bottom: 22px;
      max-width: 320px;
      padding: 20px 22px;
      border: 1px solid rgba(255, 255, 255, .1);
      background: rgba(16, 25, 39, .92);
    }

    .reward-tag strong {
      font-size: 18px;
    }

    .reward-tag span {
      font-size: 13px;
      line-height: 1.55;
    }

    .trust-copy h2 {
      max-width: 8ch;
      font-size: clamp(46px, 5.4vw, 78px);
      letter-spacing: -.06em;
    }

    .trust-copy > p {
      max-width: 40ch;
      color: #667180;
      font-size: 17px;
      line-height: 1.72;
    }

    .trust-list {
      gap: 10px;
    }

    .trust-card {
      min-height: 128px;
      padding: 18px;
      border-color: rgba(17, 19, 23, .12);
      border-radius: 18px;
      background: rgba(255, 253, 248, .8);
      box-shadow: 0 1px 0 rgba(255, 255, 255, .8);
    }

    .trust-card strong {
      margin-bottom: 8px;
      font-size: 15px;
    }

    .trust-card span {
      color: #6a7584;
      font-size: 12px;
      line-height: 1.55;
    }

    .boundary {
      margin-top: 18px;
      color: rgba(17, 19, 23, .46);
      font-size: 11px;
    }

    .devices {
      padding: 112px 0 124px;
      border-top-color: rgba(17, 19, 23, .1);
      background:
        linear-gradient(180deg, rgba(53, 107, 232, .06), rgba(53, 107, 232, 0) 300px),
        var(--bg);
    }

    .devices .section-title {
      max-width: 820px;
      margin-bottom: 48px;
    }

    .section-title h2 {
      margin-bottom: 24px;
      font-size: clamp(44px, 5.6vw, 82px);
      letter-spacing: -.06em;
    }

    .section-title > p:last-child {
      max-width: 660px;
      color: #697587;
      font-size: 18px;
      line-height: 1.72;
    }

    .device-grid {
      border-top-color: rgba(17, 19, 23, .12);
      border-bottom-color: rgba(17, 19, 23, .12);
    }

    .device-card {
      min-height: 650px;
      padding: 28px 32px 34px;
      border-right-color: rgba(17, 19, 23, .12);
    }

    .device-card small {
      color: #6c7786;
      letter-spacing: .12em;
    }

    .device-card h3 {
      margin: 16px 0 9px;
      color: #102039;
      font-size: 28px;
      letter-spacing: -.04em;
    }

    .device-card p {
      color: #6c7786;
      line-height: 1.65;
    }

    .device-shot {
      width: min(70%, 268px);
      margin-top: 36px;
      border-color: rgba(17, 19, 23, .2);
      box-shadow: 0 28px 52px rgba(17, 19, 23, .16);
    }

    .faq {
      padding: 92px 0 108px;
      background: rgba(255, 253, 248, .7);
    }

    .faq-grid {
      grid-template-columns: .78fr 1.22fr;
      gap: clamp(48px, 9vw, 138px);
    }

    .faq h2 {
      max-width: 8ch;
      font-size: clamp(46px, 5.5vw, 78px);
      letter-spacing: -.06em;
    }

    summary {
      padding: 22px 0;
      color: #18253a;
      font-size: 17px;
    }

    summary::after {
      color: var(--blue);
    }

    details p {
      color: #667180;
      font-size: 15px;
      line-height: 1.75;
    }

    .final-cta {
      padding: 96px 0 62px;
      background: rgba(255, 253, 248, .7);
    }

    .cta-panel {
      padding: 86px 36px;
      border-radius: 32px;
      background:
        radial-gradient(circle at 18% 12%, rgba(53, 107, 232, .24), transparent 28rem),
        radial-gradient(circle at 88% 90%, rgba(28, 174, 158, .16), transparent 25rem),
        #101927;
    }

    .cta-panel h2 {
      max-width: 9ch;
      margin-inline: auto;
      font-size: clamp(54px, 7vw, 96px);
      letter-spacing: -.07em;
    }

    .cta-panel p {
      max-width: 600px;
      color: rgba(255, 255, 255, .66);
      font-size: 17px;
      line-height: 1.75;
    }

    .footer {
      padding: 30px 0 38px;
      background: rgba(243, 240, 232, .95);
    }

    .footer-copy strong {
      color: var(--ink);
    }

    .footer-copy span {
      color: #6a7584;
    }

    dialog {
      border-radius: 26px;
    }

    .reveal {
      transform: translateY(18px);
      transition-duration: .58s;
    }

    @media (max-width: 980px) {
      .inner {
        width: min(720px, calc(100% - 40px));
      }

      .hero {
        min-height: 900px;
      }

      .hero-grid {
        grid-template-columns: 1fr;
        min-height: 720px;
      }

      .hero-video {
        inset: 31% 0 0 23%;
        width: 90%;
        height: 69%;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 92%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 92%, transparent 100%);
      }

      .hero-copy {
        max-width: 620px;
        padding-top: 56px;
      }

      .hero-note {
        right: 28px;
        bottom: 88px;
        width: 290px;
      }

      .difference-grid,
      .proof-grid,
      .trust-grid,
      .faq-grid {
        grid-template-columns: 1fr;
        gap: 52px;
      }

      .difference-grid {
        width: min(720px, calc(100% - 40px));
        min-height: auto;
      }

      .difference-copy {
        position: static;
      }

      .difference-copy h2,
      .trust-copy h2,
      .faq h2 {
        max-width: 12ch;
      }

      .journey {
        height: auto;
        padding: 108px 0;
      }

      .journey-sticky {
        position: static;
        padding: 0;
      }

      .journey-layout {
        grid-template-columns: 1fr;
        height: auto;
      }

      .journey-media {
        min-height: 620px;
        height: 620px;
      }

      .orbit-shell {
        min-height: 220px;
        height: 220px;
      }

      .orbit-icon {
        width: 220px;
      }

      .journey-progress,
      .journey-layout::after {
        display: none;
      }

      .product-proof {
        min-height: auto;
      }

      .reward-visual,
      .reward-visual video {
        min-height: 560px;
      }

      .device-grid {
        grid-template-columns: 1fr;
      }

      .device-card {
        min-height: 620px;
        border-right: 0;
        border-bottom-color: rgba(17, 19, 23, .12);
      }

      .device-card:last-child {
        border-bottom: 0;
      }
    }

    @media (max-width: 640px) {
      .inner {
        width: calc(100% - 32px);
      }

      .section {
        padding: 82px 0;
      }

      .nav {
        top: 12px;
        padding: 0 12px;
      }

      .nav-inner {
        min-height: 58px;
        gap: 8px;
        padding: 7px 8px 7px 12px;
      }

      .nav-links .nav-cta {
        min-height: 44px;
        padding-inline: 16px;
      }

      .hero {
        min-height: 780px;
        padding: 108px 0 54px;
      }

      .hero-grid {
        min-height: 612px;
      }

      .hero-copy {
        padding-top: 76px;
      }

      .hero h1 {
        max-width: 10ch;
        font-size: 50px;
        line-height: .98;
      }

      .hero .lead {
        font-size: 16px;
        line-height: 1.7;
      }

      .hero-video {
        inset: 42% -10% 0 0;
        width: 112%;
        height: 58%;
        opacity: .82;
      }

      .hero-note {
        display: none;
      }

      .hero-proof {
        left: 16px;
        right: 16px;
        bottom: 18px;
        justify-content: space-between;
        gap: 5px;
        font-size: 9px;
      }

      .hero-proof span {
        gap: 5px;
      }

      .hero-proof span:nth-child(n + 4) {
        display: none;
      }

      .difference,
      #trust.section {
        padding: 82px 0;
      }

      .difference-copy h2,
      .proof-copy h2,
      .trust-copy h2,
      .faq h2,
      .section-title h2 {
        font-size: 42px;
      }

      .difference-copy p,
      .proof-copy > p,
      .trust-copy > p,
      .section-title > p:last-child {
        font-size: 16px;
        line-height: 1.7;
      }

      .compare-card {
        padding: 18px;
      }

      .compare-path {
        grid-template-columns: 1fr;
        gap: 7px;
      }

      .compare-path div {
        min-height: auto;
        padding: 11px 12px;
      }

      .compare-path b {
        display: inline;
        margin: 0 8px 0 0;
      }

      .compare-path span {
        display: inline;
      }

      .journey {
        padding: 84px 0 98px;
      }

      .journey-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
      }

      .journey-copy {
        display: contents;
      }

      .journey-copy > h2 {
        order: 0;
        width: 100%;
        margin-bottom: 24px;
        font-size: 42px;
      }

      .orbit-shell {
        order: 1;
        min-height: 196px;
        height: 196px;
        margin-bottom: 22px;
      }

      .orbit-icon {
        width: min(190px, 58vw);
      }

      .step-list {
        order: 2;
        gap: 8px;
      }

      .step-card,
      .step-card.is-active {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 14px;
        border-radius: 18px;
        opacity: 1;
        background: rgba(255, 253, 248, .84);
        box-shadow: none;
        transform: none;
      }

      .step-card.is-active {
        background: #fffdf8;
        box-shadow: 0 12px 28px rgba(17, 19, 23, .07);
      }

      .journey-media,
      .journey-progress {
        display: none !important;
      }

      .mobile-screen-pair {
        order: 1;
        margin-top: 18px;
        margin-bottom: 24px;
      }

      .product-proof {
        padding: 78px 0 84px;
      }

      .classroom-phone {
        width: min(84vw, 320px);
      }

      .reason {
        padding: 13px 0;
      }

      .report-strip {
        grid-template-columns: 1fr;
      }

      .trust-list {
        grid-template-columns: 1fr 1fr;
      }

      .reward-visual,
      .reward-visual video {
        min-height: 480px;
      }

      .reward-score {
        left: 16px;
        top: 16px;
      }

      .reward-tag {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
      }

      .devices {
        padding: 76px 0 82px;
      }

      .device-card {
        min-height: 0;
        padding: 28px 4px 38px;
      }

      .device-shot {
        width: min(70vw, 250px);
        margin-top: 28px;
      }

      .faq {
        padding: 62px 0 76px;
      }

      summary {
        font-size: 16px;
      }

      .final-cta {
        padding: 72px 0 42px;
      }

      .cta-panel {
        padding: 68px 20px;
        border-radius: 24px;
      }

      .cta-panel h2 {
        font-size: 50px;
      }
    }

/* ===== 03 · navigation and responsive layout ===== */
/* Keep the desktop brand anchored left while centering the navigation group in the pill. */
    @media (min-width: 981px) {
      .nav-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        width: min(1240px, 100%);
        gap: 18px;
        padding-right: 17px;
      }

      .nav-inner .brand {
        grid-column: 1;
        justify-self: start;
      }

      .nav-inner .nav-links {
        grid-column: 2;
        justify-self: center;
      }

      .nav-inner .nav-menu-button {
        grid-column: 3;
        justify-self: end;
        display: none;
      }
    }

    /* Mobile is a separate composition: compact navigation, editorial hero card,
       horizontal product previews, and a vertical learning-evidence timeline. */
    @media (max-width: 700px) {
      :root {
        --mobile-gutter: 16px;
      }

      body {
        background: #f1efe8;
      }

      body::before {
        background-size: 42px 42px;
        opacity: .72;
      }

      .inner {
        width: calc(100% - (var(--mobile-gutter) * 2));
      }

      .nav {
        top: max(10px, env(safe-area-inset-top));
        padding: 0 var(--mobile-gutter);
      }

      .nav-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        position: relative;
        width: 100%;
        min-height: 58px;
        gap: 8px;
        padding: 7px 8px 7px 10px;
        border-color: rgba(255, 255, 255, .86);
        background: rgba(255, 253, 248, .86);
        box-shadow: 0 16px 34px rgba(17, 19, 23, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
      }

      .nav-inner .brand {
        grid-column: 1;
        gap: 8px;
        font-size: 16px;
      }

      .brand-mark {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background-size: 26px;
      }

      .nav-inner .nav-links {
        position: absolute;
        z-index: 2;
        top: 50%;
        left: 50%;
        grid-column: auto;
        justify-content: center;
        gap: 0;
        transform: translate(-50%, -50%);
      }

      .nav-links a:not(.nav-cta) {
        display: none;
      }

      .nav-links .nav-cta {
        min-height: 44px;
        min-width: 84px;
        padding: 0 15px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
        box-shadow: 0 8px 18px rgba(17, 19, 23, .16);
      }

      .nav-inner .nav-menu-button {
        grid-column: 3;
        position: relative;
        z-index: 3;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        font-size: 0;
        background: rgba(17, 19, 23, .07);
      }

      .nav-menu-button::before {
        content: "";
        width: 18px;
        height: 14px;
        background:
          linear-gradient(var(--ink), var(--ink)) 0 0 / 18px 2px no-repeat,
          linear-gradient(var(--ink), var(--ink)) 0 6px / 12px 2px no-repeat,
          linear-gradient(var(--ink), var(--ink)) 0 12px / 18px 2px no-repeat;
      }

      .mobile-menu {
        top: 76px;
        left: var(--mobile-gutter);
        right: var(--mobile-gutter);
        gap: 6px;
        padding: 8px;
        border-radius: 22px;
        background: rgba(255, 253, 248, .96);
        box-shadow: 0 22px 44px rgba(17, 19, 23, .16);
      }

      .mobile-menu a {
        min-height: 46px;
        display: grid;
        place-items: center;
        padding: 10px 8px;
        border-radius: 14px;
        font-size: 13px;
      }

      @media (max-width: 360px) {
        .nav-links .nav-cta {
          padding-inline: 12px;
          font-size: 12px;
        }
      }

      .hero {
        min-height: 820px;
        padding: 104px 0 28px;
        background:
          radial-gradient(circle at 86% 20%, rgba(47, 111, 237, .12), transparent 15rem),
          linear-gradient(145deg, #f1eee6 0%, #f7f7f4 54%, #e9f1f0 100%);
      }

      .hero::before {
        content: "TODAY / NEXT";
        z-index: 0;
        right: -13px;
        bottom: 270px;
        color: rgba(17, 19, 23, .34);
        font-size: 10px;
        font-weight: 840;
        letter-spacing: .17em;
        writing-mode: vertical-rl;
        -webkit-text-stroke: 0;
        transform: none;
      }

      .hero::after {
        z-index: 0;
        right: -70px;
        bottom: 144px;
        width: 248px;
        border-color: rgba(47, 111, 237, .18);
        box-shadow:
          0 0 0 28px rgba(47, 111, 237, .045),
          0 0 0 58px rgba(30, 182, 170, .035);
      }

      .catamind-stamp {
        top: 86px;
        left: var(--mobile-gutter);
        gap: 7px;
        font-size: 8px;
      }

      .catamind-stamp img {
        width: 78px;
        height: 16px;
      }

      .hero-grid {
        display: block;
        min-height: 0;
        height: auto;
      }

      .hero-copy {
        max-width: none;
        padding: 66px 0 0;
      }

      .eyebrow {
        gap: 9px;
        margin-bottom: 17px;
        font-size: 13px;
      }

      .eyebrow::before {
        width: 8px;
        height: 8px;
        box-shadow: 0 0 0 6px rgba(53, 107, 232, .11);
      }

      .hero h1 {
        max-width: none;
        margin-bottom: 20px;
        font-size: clamp(45px, 12.8vw, 58px);
        line-height: .95;
        letter-spacing: -.075em;
      }

      .hero h1 span {
        white-space: normal;
      }

      .hero .lead {
        max-width: 31em;
        margin-bottom: 22px;
        font-size: 16px;
        line-height: 1.66;
      }

      .actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .button {
        width: 100%;
        min-height: 52px;
        padding: 0 10px;
        font-size: 14px;
        white-space: nowrap;
      }

      .hero-video {
        position: absolute;
        top: auto;
        right: auto;
        bottom: 94px;
        left: var(--mobile-gutter);
        width: calc(100% - (var(--mobile-gutter) * 2));
        height: 246px;
        border: 1px solid rgba(255, 255, 255, .82);
        border-radius: 30px;
        object-position: 62% center;
        opacity: .96;
        filter: saturate(.92) contrast(.98);
        box-shadow: 0 24px 50px rgba(17, 19, 23, .18), 0 0 0 8px rgba(255, 255, 255, .26);
        -webkit-mask-image: none;
        mask-image: none;
        transform: none;
      }

      .hero-note {
        left: 28px;
        right: 28px;
        bottom: 108px;
        display: grid;
        width: auto;
        padding: 10px 12px;
        border-radius: 17px;
        background: rgba(255, 253, 248, .88);
        box-shadow: 0 14px 28px rgba(17, 19, 23, .14);
        transform: none;
      }

      .hero-note img {
        width: 40px;
        height: 40px;
      }

      .hero-note strong {
        margin-bottom: 2px;
        font-size: 13px;
      }

      .hero-note span {
        font-size: 11px;
        line-height: 1.42;
      }

      .hero-proof {
        left: var(--mobile-gutter);
        right: var(--mobile-gutter);
        bottom: 16px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        transform: none;
        color: #5e6877;
        font-size: 10px;
        white-space: normal;
      }

      .hero-proof span {
        gap: 6px;
      }

      .hero-proof i {
        width: 5px;
        height: 5px;
      }

      .difference {
        min-height: 0;
        padding: 82px 0 76px;
        background:
          radial-gradient(circle at 100% 12%, rgba(30, 182, 170, .11), transparent 13rem),
          linear-gradient(180deg, rgba(235, 240, 237, .96), rgba(235, 240, 237, .9));
      }

      .difference-grid {
        display: block;
        width: calc(100% - (var(--mobile-gutter) * 2));
        min-height: 0;
        margin: 0 auto;
      }

      .difference-copy h2,
      .proof-copy h2,
      .trust-copy h2,
      .faq h2,
      .section-title h2 {
        font-size: clamp(38px, 10.8vw, 48px);
        line-height: 1.03;
        letter-spacing: -.055em;
      }

      .difference-copy p,
      .proof-copy > p,
      .trust-copy > p,
      .section-title > p:last-child {
        font-size: 16px;
        line-height: 1.7;
      }

      .compare-stack {
        gap: 12px;
        margin-top: 28px;
      }

      .compare-card {
        padding: 18px;
        border-radius: 24px;
        background: rgba(255, 253, 248, .8);
        box-shadow: 0 14px 30px rgba(17, 19, 23, .06);
      }

      .compare-card.dim {
        background: rgba(226, 232, 228, .74);
        box-shadow: none;
      }

      .compare-head {
        align-items: flex-start;
        margin-bottom: 12px;
      }

      .compare-head strong {
        font-size: 18px;
      }

      .compare-head span {
        padding: 6px 8px;
        font-size: 10px;
      }

      .compare-path {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .compare-path div,
      .compare-card:not(.dim) .compare-path div:nth-child(1),
      .compare-card:not(.dim) .compare-path div:nth-child(2),
      .compare-card:not(.dim) .compare-path div:nth-child(3) {
        min-height: 0;
        padding: 12px 13px 12px 15px;
        border-top: 0;
        border-left: 1px solid var(--line);
        background: rgba(17, 19, 23, .035);
      }

      .compare-card:not(.dim) .compare-path div:nth-child(1) { border-left-color: var(--blue); }
      .compare-card:not(.dim) .compare-path div:nth-child(2) { border-left-color: var(--teal); }
      .compare-card:not(.dim) .compare-path div:nth-child(3) { border-left-color: var(--violet); }

      .compare-path b {
        margin-bottom: 4px;
        font-size: 14px;
      }

      .compare-path span {
        font-size: 12px;
        line-height: 1.45;
      }

      .journey {
        height: auto;
        padding: 78px 0 92px;
        background:
          linear-gradient(180deg, rgba(248, 248, 244, .96), rgba(237, 243, 242, .96)),
          radial-gradient(circle at 8% 28%, rgba(47, 111, 237, .12), transparent 16rem);
      }

      .journey-sticky {
        position: static;
        min-height: 0;
        padding: 0;
        overflow: visible;
      }

      .journey-sticky::before,
      .journey-layout::after,
      .journey-progress,
      .journey-media {
        display: none !important;
      }

      .journey-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: calc(100% - (var(--mobile-gutter) * 2));
        height: auto;
      }

      .journey-layout > * {
        width: 100%;
      }

      .journey-copy {
        display: contents;
      }

      .journey-copy > h2 {
        order: 0;
        width: 100%;
        position: sticky;
        top: 70px;
        z-index: 20;
        margin: 0 0 18px;
        padding: 12px 0 14px;
        background: linear-gradient(180deg, #f6f7f5 0 76%, rgba(246,247,245,0) 100%);
        font-size: clamp(38px, 10.8vw, 48px);
        line-height: 1.03;
        letter-spacing: -.06em;
      }

      .orbit-shell {
        order: 1;
        display: grid;
        min-height: 170px;
        height: 170px;
        margin: 0 0 18px;
      }

      .orbit-icon {
        width: min(172px, 52vw);
      }

      .orbit-icon::before,
      .orbit-icon::after {
        border-width: 2px;
      }

      .orbit-label {
        width: 100px;
        gap: 4px;
      }

      .orbit-label strong {
        font-size: 15px;
      }

      .orbit-label small {
        font-size: 10px;
      }

      .mobile-screen-pair {
        order: 2;
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 68%;
        gap: 12px;
        width: calc(100% + var(--mobile-gutter));
        margin: 0 calc(var(--mobile-gutter) * -1) 25px;
        padding: 0 var(--mobile-gutter) 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      .mobile-screen-pair::-webkit-scrollbar {
        display: none;
      }

      .mobile-screen {
        min-width: 0;
        scroll-snap-align: start;
      }

      .mobile-screen b {
        display: block;
        margin: 0 0 8px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 780;
        letter-spacing: .04em;
        text-align: left;
      }

      .mobile-screen-frame {
        width: 100%;
        padding: 4px;
        border: 1px solid rgba(17, 19, 23, .22);
        border-radius: 24px;
        background: #1c1f24;
        box-shadow: 0 16px 30px rgba(17, 19, 23, .13);
        aspect-ratio: 1320 / 2868;
      }

      .mobile-screen-frame img {
        border-radius: 20px;
        clip-path: inset(0 round 20px);
      }

      .step-list {
        order: 3;
        position: relative;
        display: grid;
        gap: 10px;
        width: 100%;
        padding-left: 14px;
      }

      .step-list::before {
        content: "";
        position: absolute;
        z-index: 0;
        left: 4px;
        top: 22px;
        bottom: 22px;
        width: 2px;
        border-radius: 99px;
        background: linear-gradient(180deg, rgba(47, 111, 237, .62), rgba(30, 182, 170, .42) 52%, rgba(124, 92, 255, .42));
      }

      .step-card,
      .step-card.is-active {
        z-index: 1;
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        min-height: 0;
        padding: 15px 14px 15px 12px;
        border: 1px solid rgba(17, 19, 23, .1);
        border-radius: 21px;
        opacity: 1;
        background: rgba(255, 253, 248, .78);
        box-shadow: 0 10px 24px rgba(17, 19, 23, .055);
        transform: none;
      }

      .step-card.is-active {
        border-color: rgba(47, 111, 237, .22);
        background: rgba(255, 253, 248, .98);
        box-shadow: 0 14px 28px rgba(17, 19, 23, .1);
      }

      .step-index {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        font-size: 10px;
      }

      .step-card h3 {
        margin-bottom: 3px;
        font-size: 16px;
      }

      .step-card p {
        margin-bottom: 4px;
        font-size: 12px;
        line-height: 1.46;
      }

      .step-card em {
        font-size: 10px;
      }

      .step-card::after,
      .step-card.is-active::after {
        left: -14px;
        top: 24px;
        bottom: auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        transform: scale(1);
        background: #c9d2dd;
        box-shadow: 0 0 0 4px #edf3f2;
      }

      .step-card.is-active::after {
        background: var(--blue);
        box-shadow: none;
      }

      .step-card:nth-child(2).is-active::after { background: var(--ink); }
      .step-card:nth-child(3).is-active::after { background: var(--teal); }
      .step-card:nth-child(4).is-active::after { background: var(--amber); }
      .step-card:nth-child(5).is-active::after { background: var(--violet); }

      .product-proof {
        padding: 74px 0 84px;
      }

      .proof-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
      }

      .classroom-phone {
        width: min(66vw, 252px);
        border-radius: 32px;
      }

      .classroom-phone img {
        border-radius: 27px;
        clip-path: inset(0 round 27px);
      }

      .proof-copy h2 {
        margin-bottom: 14px;
      }

      .reason {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 12px 0;
      }

      .reason strong {
        font-size: 15px;
      }

      .reason span {
        font-size: 12px;
        line-height: 1.45;
      }

      .report-strip {
        grid-template-columns: 1fr;
        gap: 1px;
        margin-top: 16px;
        border-radius: 18px;
      }

      .report-panel {
        padding: 14px;
      }

      .report-panel h3 {
        font-size: 17px;
      }

      .meter {
        grid-template-columns: 74px minmax(0, 1fr) 30px;
        gap: 7px;
        font-size: 11px;
      }

      #trust.section {
        padding: 78px 0;
      }

      .trust-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .reward-visual,
      .reward-visual video {
        min-height: 382px;
      }

      .reward-visual {
        border-radius: 26px;
      }

      .reward-visual video {
        border-radius: 25px;
        clip-path: inset(0 round 25px);
      }

      .reward-score {
        left: 16px;
        top: 16px;
        padding: 15px;
        border-radius: 16px;
      }

      .reward-score strong {
        font-size: 42px;
      }

      .reward-tag {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none;
        padding: 15px;
        border-radius: 16px;
      }

      .reward-tag strong {
        font-size: 17px;
      }

      .reward-tag span {
        font-size: 12px;
        line-height: 1.45;
      }

      .trust-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .trust-card {
        min-height: 132px;
        padding: 14px;
        border-radius: 16px;
      }

      .trust-card strong {
        font-size: 14px;
      }

      .trust-card span {
        font-size: 12px;
        line-height: 1.45;
      }

      .devices {
        padding: 76px 0 84px;
      }

      .devices .section-title {
        margin-bottom: 26px;
      }

      .devices .section-title::after {
        content: "左右滑动查看完整实机";
        display: block;
        margin-top: 16px;
        color: var(--blue);
        font-size: 11px;
        font-weight: 780;
        letter-spacing: .05em;
      }

      .device-grid {
        display: flex;
        gap: 12px;
        width: calc(100% + var(--mobile-gutter));
        margin-right: calc(var(--mobile-gutter) * -1);
        padding-right: var(--mobile-gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }

      .device-grid::-webkit-scrollbar {
        display: none;
      }

      .device-card {
        flex: 0 0 min(82vw, 316px);
        min-height: 530px;
        padding: 22px 18px 26px;
        border: 1px solid rgba(17, 19, 23, .1);
        border-radius: 26px;
        background: rgba(255, 253, 248, .86);
        box-shadow: 0 14px 30px rgba(17, 19, 23, .07);
        scroll-snap-align: start;
      }

      .device-card:not(:last-child) {
        border-right: 1px solid rgba(17, 19, 23, .1);
      }

      .device-card h3 {
        font-size: 24px;
      }

      .device-card p {
        font-size: 13px;
        line-height: 1.55;
      }

      .device-shot {
        width: min(58vw, 210px);
        margin-top: 26px;
      }

      .faq {
        padding: 68px 0 78px;
      }

      .faq-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      .faq h2 {
        margin-bottom: 0;
      }

      .final-cta {
        padding: 70px 0 42px;
      }

      .cta-panel {
        padding: 56px 20px;
        border-radius: 26px;
      }

      .cta-panel h2 {
        font-size: clamp(42px, 12vw, 54px);
      }

      .cta-panel .actions {
        grid-template-columns: 1fr;
      }
    }

/* ===== 04 · story architecture ===== */
.journey-route {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      margin: 0 0 14px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .02em;
    }

    .journey-route span {
      padding: 6px 9px;
      border: 1px solid rgba(47, 111, 237, .16);
      border-radius: 999px;
      color: #40536c;
      background: rgba(255, 253, 248, .62);
      white-space: nowrap;
    }

    .journey-route span:nth-of-type(2) { border-color: rgba(30, 182, 170, .22); }
    .journey-route span:nth-of-type(3) { border-color: rgba(232, 185, 47, .28); }
    .journey-route span:nth-of-type(4) { border-color: rgba(124, 92, 255, .2); }
    .journey-route i { color: var(--blue); font-style: normal; }

    @media (min-width: 701px) {
      .compare-path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .compare-card:not(.dim) .compare-path div:nth-child(1) { border-color: var(--blue); }
      .compare-card:not(.dim) .compare-path div:nth-child(2) { border-color: var(--teal); }
      .compare-card:not(.dim) .compare-path div:nth-child(3) { border-color: var(--amber); }
      .compare-card:not(.dim) .compare-path div:nth-child(4) { border-color: var(--violet); }
    }

    @media (max-width: 700px) {
      .journey-route {
        display: grid;
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 4px;
        margin-bottom: 18px;
        font-size: 10px;
      }

      .journey-route span {
        padding: 8px 6px;
        text-align: center;
      }

      .journey-route i { display: grid; place-items: center; }
      .compare-path { grid-template-columns: 1fr; }
      .mobile-screen-pair { order: 2; }
      .step-list { order: 3; }
    }

/* ===== 05 · mobile card switching ===== */
@media (max-width: 700px) {
      /* The hero video is a quiet left-side texture, not a second phone mockup. */
      .hero-video {
        top: auto;
        right: auto;
        bottom: 62px;
        left: -34px;
        width: 76%;
        height: 248px;
        border: 0;
        border-radius: 0;
        object-position: 68% center;
        opacity: .2;
        filter: saturate(.48) contrast(.88) brightness(1.06);
        mix-blend-mode: multiply;
        box-shadow: none;
        -webkit-mask-image: radial-gradient(ellipse at 12% 50%, #000 0%, #000 48%, transparent 100%);
        mask-image: radial-gradient(ellipse at 12% 50%, #000 0%, #000 48%, transparent 100%);
      }

      /* The desktop orbit is intentionally removed on phones; the cards become the visual. */
      .orbit-shell {
        display: none !important;
      }

      .journey-route {
        order: 1;
      }

      .mobile-screen-pair {
        order: 2;
        margin-top: 4px;
        margin-bottom: 28px;
      }

      .step-list {
        order: 3;
        gap: 24px;
        padding: 12px 0 8px;
        perspective: 900px;
      }

      .step-list::before {
        display: none;
      }

      /* Offset paper sheets create a small staircase without hiding any copy. */
      .step-card,
      .step-card.is-active {
        position: relative;
        --stair-offset: 0px;
        width: calc(100% - var(--stair-offset));
        min-height: 128px;
        margin-left: var(--stair-offset);
        padding: 16px 16px 16px 13px;
        border: 1px solid rgba(17, 19, 23, .11);
        border-radius: 5px 22px 22px 22px;
        background: #fffdf8;
        box-shadow: 0 12px 24px rgba(17, 19, 23, .075), 0 1px 0 rgba(255, 255, 255, .9) inset;
        transform: rotateZ(-.7deg) translateZ(0);
        transform-origin: left center;
      }

      .step-card:nth-child(1) {
        --stair-offset: 0px;
        z-index: 5;
        transform: rotateZ(-.7deg);
      }

      .step-card:nth-child(2) {
        --stair-offset: 14px;
        z-index: 4;
        transform: rotateZ(.55deg);
      }

      .step-card:nth-child(3) {
        --stair-offset: 28px;
        z-index: 3;
        transform: rotateZ(-.35deg);
      }

      .step-card:nth-child(4) {
        --stair-offset: 42px;
        z-index: 2;
        transform: rotateZ(.72deg);
      }

      .step-card:nth-child(5) {
        --stair-offset: 56px;
        z-index: 1;
        transform: rotateZ(-.45deg);
      }

      .step-card:nth-child(1) { background: #fffdf8; }
      .step-card:nth-child(2) { background: #f8fbff; }
      .step-card:nth-child(3) { background: #f6fcfa; }
      .step-card:nth-child(4) { background: #fffaf0; }
      .step-card:nth-child(5) { background: #faf7ff; }

      .step-card.is-active {
        border-color: rgba(47, 111, 237, .24);
        background: #fffdf8;
        box-shadow: 0 16px 30px rgba(17, 19, 23, .11), 0 1px 0 rgba(255, 255, 255, .96) inset;
      }

      .step-card::before {
        content: "";
        position: absolute;
        z-index: 2;
        top: -1px;
        right: -1px;
        width: 28px;
        height: 28px;
        border-top-right-radius: 20px;
        background: linear-gradient(135deg, transparent 0 48%, rgba(17, 19, 23, .11) 49% 52%, rgba(255, 255, 255, .88) 53% 100%);
        pointer-events: none;
      }

      .step-card::after,
      .step-card.is-active::after {
        left: 0;
        top: 15px;
        bottom: 15px;
        width: 3px;
        height: auto;
        border-radius: 99px;
        transform: scaleY(.45);
        background: rgba(47, 111, 237, .28);
        box-shadow: none;
      }

      .step-card.is-active::after {
        transform: scaleY(1);
        background: var(--blue);
      }

      .step-card:nth-child(2).is-active::after { background: var(--ink); }
      .step-card:nth-child(3).is-active::after { background: var(--teal); }
      .step-card:nth-child(4).is-active::after { background: var(--amber); }
      .step-card:nth-child(5).is-active::after { background: var(--violet); }

      @media (prefers-reduced-motion: no-preference) {
        .step-card {
          transition: opacity .48s ease, transform .62s cubic-bezier(.16, 1, .3, 1), background .28s, border-color .28s, box-shadow .28s;
        }

        .step-card:not(.is-mobile-visible) {
          opacity: 0;
        }

        .step-card:nth-child(1):not(.is-mobile-visible) {
          transform: translateX(-18px) rotateZ(-.7deg);
        }

        .step-card:nth-child(2):not(.is-mobile-visible) {
          transform: translateX(18px) rotateZ(.55deg);
        }

        .step-card:nth-child(3):not(.is-mobile-visible) {
          transform: translateX(-18px) rotateZ(-.35deg);
        }

        .step-card:nth-child(4):not(.is-mobile-visible) {
          transform: translateX(18px) rotateZ(.72deg);
        }

        .step-card:nth-child(5):not(.is-mobile-visible) {
          transform: translateX(-18px) rotateZ(-.45deg);
        }

        .step-card.is-mobile-visible {
          opacity: 1;
        }
      }

      dialog {
        max-height: calc(100svh - 24px);
        overflow: auto;
      }

      /* The product views are a vertical sticky deck: page scroll advances the card. */
      .devices .section-title::after {
        content: "向下滑动，切换一张学习画面";
      }

      .device-grid {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 0 140px;
        overflow: visible;
        scroll-snap-type: none;
      }

      .device-card {
        position: sticky;
        top: 92px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: calc(100svh - 150px);
        margin: 0 0 28px;
        padding: 22px 18px 28px;
        border: 1px solid rgba(17, 19, 23, .12);
        border-radius: 6px 28px 28px 28px;
        background: rgba(255, 253, 248, .96);
        box-shadow: 0 18px 36px rgba(17, 19, 23, .1), 0 1px 0 rgba(255, 255, 255, .92) inset;
        transform-origin: center top;
        transform: rotateZ(-.45deg);
        scroll-snap-align: none;
      }

      .device-card:nth-child(2) {
        top: 104px;
        z-index: 2;
        margin-left: 7px;
        width: calc(100% - 7px);
        transform: rotateZ(.55deg);
      }

      .device-card:nth-child(3) {
        top: 116px;
        z-index: 3;
        margin-left: 3px;
        width: calc(100% - 3px);
        transform: rotateZ(-.35deg);
      }

      .device-card::before {
        content: "";
        position: absolute;
        top: -1px;
        right: -1px;
        width: 34px;
        height: 34px;
        border-top-right-radius: 26px;
        background: linear-gradient(135deg, transparent 0 48%, rgba(17, 19, 23, .13) 49% 52%, rgba(255, 255, 255, .92) 53% 100%);
        pointer-events: none;
      }

      .device-card:nth-child(2)::after,
      .device-card:nth-child(3)::after {
        content: "";
        position: absolute;
        left: 18px;
        top: 20px;
        width: 36px;
        height: 3px;
        border-radius: 99px;
        background: var(--teal);
      }

      .device-card:nth-child(3)::after {
        background: var(--violet);
      }

      .device-card h3 {
        max-width: 10ch;
        margin-bottom: 8px;
        font-size: 26px;
        letter-spacing: -.05em;
      }

      .device-card p {
        max-width: 25em;
        font-size: 14px;
        line-height: 1.58;
      }

      .device-shot {
        width: min(55vw, 216px);
        margin-top: auto;
        padding-top: 24px;
      }
    }

/* ===== 06 · mobile polish ===== */
/* Keep the CTA label optically level and centered inside its pill. */
    .nav-links .nav-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      min-height: 44px;
      padding: 0 19px;
      line-height: 1.2;
      text-align: center;
      font-style: normal;
      transform: none;
    }

    @media (max-width: 700px) {
      .nav-links .nav-cta {
        height: 44px;
        padding-inline: 15px;
      }

      /* The locating callout was competing with the hero instead of helping it. */
      .hero-note {
        display: none !important;
      }

      /* Compact the product-view deck without losing the stacked-card idea. */
      .devices {
        padding: 48px 0 56px;
      }

      .devices .section-title {
        margin-bottom: 20px;
      }

      .devices .section-title h2 {
        margin-bottom: 10px;
        font-size: clamp(34px, 9.4vw, 40px);
        line-height: 1.06;
      }

      .devices .section-title > p:last-child {
        font-size: 14px;
        line-height: 1.55;
      }

      .devices .section-title::after {
        margin-top: 9px;
      }

      .device-grid {
        padding-bottom: 70px;
      }

      .device-card {
        top: 76px;
        min-height: 528px;
        margin-bottom: 14px;
        padding: 18px 16px 20px;
        border-radius: 5px 22px 22px 22px;
      }

      .device-card:nth-child(2) {
        top: 84px;
        margin-left: 4px;
        width: calc(100% - 4px);
      }

      .device-card:nth-child(3) {
        top: 92px;
        margin-left: 2px;
        width: calc(100% - 2px);
      }

      .device-card h3 {
        margin-top: 11px;
        margin-bottom: 6px;
        font-size: 23px;
      }

      .device-card p {
        font-size: 13px;
        line-height: 1.48;
      }

      .device-shot {
        width: min(46vw, 178px);
        margin-top: auto;
        padding-top: 14px;
      }
    }

/* ===== 07 · mobile density ===== */
/* A tighter mobile composition: clear hierarchy, shorter scroll, less empty canvas. */
    @media (max-width: 700px) {
      html {
        scroll-padding-top: 78px;
      }

      .section {
        padding: 54px 0;
      }

      .hero {
        min-height: 0;
        padding: 88px 0 20px;
      }

      .catamind-stamp {
        top: 76px;
      }

      .hero-copy {
        position: relative;
        z-index: 2;
        padding-top: 50px;
      }

      .eyebrow {
        margin-bottom: 12px;
        font-size: 12px;
      }

      .hero h1 {
        margin-bottom: 14px;
        font-size: clamp(41px, 11.4vw, 46px);
        line-height: 1;
      }

      .hero .lead {
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.55;
      }

      .actions {
        gap: 8px;
      }

      .button {
        min-height: 48px;
        font-size: 13px;
      }

      .hero-video {
        z-index: 1;
        top: 52px;
        right: auto;
        bottom: auto;
        left: -25%;
        width: 150%;
        height: auto;
        max-width: none;
        object-position: 60% center;
        border: 0;
        border-radius: 0;
        opacity: .15;
        box-shadow: none;
        filter: saturate(.68) contrast(.94);
        mix-blend-mode: multiply;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.7) 20%, #000 42%, rgba(0,0,0,.62) 80%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.7) 20%, #000 42%, rgba(0,0,0,.62) 80%, transparent 100%);
      }

      .hero-proof {
        position: relative;
        z-index: 3;
        left: auto;
        right: auto;
        bottom: auto;
        margin: 18px 16px 0;
        gap: 6px 10px;
        font-size: 9px;
      }

      .difference {
        padding: 54px 0 50px;
      }

      .difference-copy h2,
      .journey-copy > h2,
      .proof-copy h2,
      .trust-copy h2,
      .faq h2 {
        font-size: clamp(34px, 9.6vw, 39px);
        line-height: 1.04;
      }

      .difference-copy p,
      .proof-copy > p,
      .trust-copy > p,
      .section-title > p:last-child {
        font-size: 14px;
        line-height: 1.58;
      }

      .compare-stack {
        gap: 8px;
        margin-top: 20px;
      }

      .compare-card {
        padding: 14px;
      }

      .compare-path {
        gap: 6px;
      }

      .compare-path div,
      .compare-card:not(.dim) .compare-path div:nth-child(1),
      .compare-card:not(.dim) .compare-path div:nth-child(2),
      .compare-card:not(.dim) .compare-path div:nth-child(3) {
        padding: 10px 11px 10px 12px;
      }

      .journey {
        padding: 54px 0 58px;
      }

      .journey-copy > h2 {
        margin-bottom: 14px;
      }

      .mobile-screen-pair {
        gap: 10px;
        grid-auto-columns: 62%;
        margin-bottom: 16px;
      }

      .mobile-screen b {
        margin-bottom: 6px;
        font-size: 10px;
      }

      .mobile-screen-frame {
        border-radius: 20px;
      }

      .mobile-screen-frame img {
        border-radius: 16px;
      }

      .step-list {
        gap: 8px;
        padding-left: 10px;
      }

      .step-list::before {
        left: 3px;
        top: 18px;
        bottom: 18px;
      }

      .step-card,
      .step-card.is-active {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 8px;
        padding: 12px 12px 12px 10px;
        border-radius: 18px;
      }

      .step-index {
        width: 30px;
        height: 30px;
        border-radius: 10px;
      }

      .step-card h3 {
        margin-bottom: 3px;
        font-size: 17px;
      }

      .step-card p {
        font-size: 12px;
        line-height: 1.42;
      }

      .step-card em {
        margin-top: 5px;
        font-size: 10px;
      }

      .product-proof {
        min-height: 0;
        padding: 52px 0 58px;
      }

      .proof-grid {
        gap: 24px;
      }

      .product-proof .classroom-phone {
        width: min(64vw, 240px);
        padding: 4px;
        border-radius: 30px;
      }

      .product-proof .classroom-phone img {
        border-radius: 26px;
      }

      .proof-copy .kicker {
        margin-bottom: 10px;
      }

      .proof-copy > p {
        margin-bottom: 18px;
      }

      .reason-list {
        margin-top: 18px;
      }

      .reason {
        padding: 10px 0;
      }

      .reason strong {
        font-size: 14px;
      }

      .reason span {
        font-size: 12px;
        line-height: 1.42;
      }

      .report-strip {
        margin-top: 12px;
      }

      .report-panel {
        padding: 12px;
      }

      #trust {
        padding: 52px 0 56px;
      }

      .trust-grid {
        gap: 24px;
      }

      .trust-copy .kicker {
        margin-bottom: 10px;
      }

      .trust-copy > p {
        margin-bottom: 16px;
      }

      .trust-list {
        gap: 6px;
      }

      .trust-card {
        min-height: 0;
        padding: 11px;
      }

      .trust-card strong {
        margin-bottom: 4px;
        font-size: 13px;
      }

      .trust-card span {
        font-size: 11px;
        line-height: 1.4;
      }

      .boundary {
        margin-top: 10px;
        font-size: 9px;
        line-height: 1.42;
      }

      .reward-visual,
      .reward-visual video {
        min-height: 300px;
        height: 300px;
      }

      .devices {
        padding: 52px 0 56px;
      }

      .devices .section-title {
        margin-bottom: 18px;
      }

      .devices .section-title h2 {
        margin-bottom: 9px;
        font-size: clamp(33px, 9vw, 38px);
      }

      .devices .section-title > p:last-child {
        font-size: 13px;
        line-height: 1.5;
      }

      .device-grid {
        padding-bottom: 54px;
      }

      .device-card {
        top: 70px;
        min-height: 500px;
        margin-bottom: 10px;
        padding: 16px 14px 18px;
        border-radius: 5px 20px 20px 20px;
      }

      .device-card:nth-child(2) {
        top: 77px;
        margin-left: 3px;
        width: calc(100% - 3px);
      }

      .device-card:nth-child(3) {
        top: 84px;
        margin-left: 1px;
        width: calc(100% - 1px);
      }

      .device-card h3 {
        margin-top: 9px;
        margin-bottom: 5px;
        font-size: 22px;
      }

      .device-card p {
        font-size: 12px;
        line-height: 1.45;
      }

      .device-shot {
        width: min(43vw, 166px);
        padding-top: 10px;
      }

      .faq {
        padding: 52px 0 58px;
      }

      .faq-grid {
        gap: 18px;
      }

      summary {
        padding: 16px 0;
        font-size: 14px;
      }

      details p {
        font-size: 13px;
        line-height: 1.52;
      }

      .final-cta {
        padding: 54px 0 32px;
      }

      .cta-panel {
        padding: 44px 18px;
        border-radius: 22px;
      }

      .cta-panel h2 {
        margin-bottom: 12px;
        font-size: clamp(38px, 10.6vw, 46px);
      }

      .cta-panel p {
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.55;
      }
    }

/* ===== 08 · interaction and state pass ===== */
/* Design pass: one visual system, natural scrolling, and explicit states. */
    body::before,
    .scroll-marker,
    .hero::before {
      display: none !important;
    }

    .nav-inner {
      transition: box-shadow .3s ease, background .3s ease, transform .3s ease;
    }

    .nav.is-scrolled .nav-inner {
      min-height: 60px;
    }

    .journey {
      height: 270vh;
    }

    .journey-shot {
      pointer-events: none;
    }

    .journey-shot[aria-hidden="true"] {
      visibility: hidden;
    }

    .journey-shot.is-active {
      visibility: visible;
      pointer-events: auto;
    }

    .step-card {
      transition: opacity .24s ease, background-color .24s ease, border-color .24s ease, transform .24s ease;
    }

    .step-card.is-active {
      border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
    }

    .report-label {
      display: block;
      margin-bottom: 8px;
      color: rgba(255,255,255,.66);
      font-size: 10px;
      font-weight: 760;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .form-status {
      min-height: 1.45em;
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .text-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin-top: 6px;
      padding: 0 4px;
      border: 0;
      color: var(--blue);
      background: transparent;
      font-size: 12px;
      font-weight: 760;
      cursor: pointer;
    }

    .text-button:hover { text-decoration: underline; }

    .nav-menu-button > span,
    .nav-menu-button > span::before,
    .nav-menu-button > span::after {
      display: block;
      width: 16px;
      height: 2px;
      border-radius: 99px;
      background: currentColor;
    }

    .nav-menu-button > span {
      position: relative;
      margin: 0 auto;
    }

    .nav-menu-button > span::before,
    .nav-menu-button > span::after {
      content: "";
      position: absolute;
      left: 0;
    }

    .nav-menu-button > span::before { top: -5px; }
    .nav-menu-button > span::after { top: 5px; }

    @media (prefers-reduced-transparency: reduce) {
      .nav-inner,
      .mobile-menu,
      .hero-note,
      .button,
      .compare-card,
      .step-card,
      dialog {
        backdrop-filter: none !important;
        background: var(--surface) !important;
      }
    }

    @media (max-width: 700px) {
      .hero {
        min-height: 0;
        padding-bottom: 18px;
      }

      .hero::after {
        content: "";
        position: absolute;
        z-index: 1;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(246,247,245,.94) 0 16%, rgba(246,247,245,.72) 38%, rgba(246,247,245,.94) 78%, #f6f7f5 100%);
      }

      .hero-video {
        top: 58px;
        right: auto;
        bottom: auto;
        left: -22%;
        width: 145%;
        height: auto;
        max-width: none;
        object-position: 62% center;
        opacity: .26;
        filter: saturate(.72) contrast(.96);
        mix-blend-mode: multiply;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 12%, #000 40%, rgba(0,0,0,.72) 82%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.35) 12%, #000 40%, rgba(0,0,0,.72) 82%, transparent 100%);
      }

      .hero-copy { padding-top: 44px; }
      .hero-proof { margin-top: 16px; }

      .journey {
        height: auto;
      }

      .journey-route span {
        border-color: rgba(43, 99, 217, .18) !important;
      }

      .step-card:nth-child(n),
      .step-card:nth-child(n).is-active {
        background: #fffdf8;
      }

      .step-card:nth-child(n).is-active::after {
        background: var(--blue);
      }

      .devices {
        padding-top: 42px;
        padding-bottom: 46px;
      }

      .devices .section-title::after {
        color: var(--blue);
        content: "左右滑动查看完整实机";
      }

      .device-grid {
        display: flex;
        gap: 12px;
        width: calc(100% + 16px);
        margin-right: -16px;
        padding-bottom: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
      }

      .device-card,
      .device-card:nth-child(2),
      .device-card:nth-child(3) {
        position: relative;
        top: auto;
        flex: 0 0 min(82vw, 316px);
        min-height: 450px;
        margin: 0;
        transform: none;
      }

      .device-card:nth-child(n)::after { display: none; }
      .device-shot { width: min(48vw, 182px); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto !important; }
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
      .reveal,
      .step-card:not(.is-mobile-visible) {
        opacity: 1 !important;
        transform: none !important;
      }
    }

/* ===== 09 · mobile note composition ===== */
/* Mobile-only composition experiment. Desktop rules remain untouched. */
    .mobile-note-label { display: none; }

    @media (max-width: 700px) {
      /* 01. Make the difference section a true side-by-side comparison. */
      .difference .compare-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
      }

      .difference .compare-card {
        min-width: 0;
        padding: 14px 10px 12px;
        border-radius: 18px;
      }

      .difference .compare-head {
        display: block;
        margin-bottom: 10px;
      }

      .difference .compare-head strong {
        display: block;
        font-size: 16px;
        letter-spacing: -.04em;
      }

      .difference .compare-head span {
        display: inline-flex;
        margin-top: 7px;
        padding: 5px 7px;
        font-size: 9px;
      }

      .difference .compare-path {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .difference .compare-path div,
      .difference .compare-card:not(.dim) .compare-path div:nth-child(1),
      .difference .compare-card:not(.dim) .compare-path div:nth-child(2),
      .difference .compare-card:not(.dim) .compare-path div:nth-child(3) {
        min-height: 70px;
        padding: 9px 8px;
        border-top: 0;
        border-left: 1px solid rgba(17,19,23,.12);
      }

      .difference .compare-card:not(.dim) .compare-path div:nth-child(1),
      .difference .compare-card:not(.dim) .compare-path div:nth-child(2),
      .difference .compare-card:not(.dim) .compare-path div:nth-child(3) {
        border-left-color: var(--blue);
      }

      .difference .compare-path b {
        display: block;
        margin: 0 0 4px;
        font-size: 12px;
        line-height: 1.25;
      }

      .difference .compare-path span {
        display: block;
        font-size: 10px;
        line-height: 1.38;
      }

      /* 02. Replace the mobile staircase with five upward-stacking notes. */
      .journey {
        padding: 62px 0 84px;
      }

      .journey-route,
      .mobile-screen-pair,
      .journey .step-list {
        display: none !important;
      }

      .journey-media {
        order: 2;
        display: block !important;
        position: relative;
        height: auto;
        min-height: 0;
        margin: 18px 0 0;
        overflow: visible;
      }

      .journey-shot,
      .journey-shot.is-active,
      .journey-shot[aria-hidden="true"] {
        position: sticky;
        inset: auto;
        top: 94px;
        display: grid;
        place-items: start center;
        align-content: start;
        min-height: min(calc(100svh - 178px), 620px);
        margin: 0 0 22px;
        padding: 13px 12px 18px;
        border: 1px solid rgba(17,19,23,.12);
        border-radius: 6px 22px 22px 22px;
        background: #fffdf8;
        box-shadow: 0 16px 34px rgba(17,19,23,.12), 0 1px 0 rgba(255,255,255,.9) inset;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto;
      }

      .journey-shot:nth-child(1) { top: 94px; z-index: 1; transform: rotate(-.9deg) !important; }
      .journey-shot:nth-child(2) { top: 102px; z-index: 2; transform: rotate(.65deg) !important; }
      .journey-shot:nth-child(3) { top: 110px; z-index: 3; transform: rotate(-.45deg) !important; }
      .journey-shot:nth-child(4) { top: 118px; z-index: 4; transform: rotate(.8deg) !important; }
      .journey-shot:nth-child(5) { top: 126px; z-index: 5; transform: rotate(-.55deg) !important; }

      .mobile-note-label {
        position: absolute;
        z-index: 4;
        right: 14px;
        bottom: 14px;
        display: block;
        max-width: calc(100% - 28px);
        margin: 0;
        padding: 10px 12px;
        border: 1px solid rgba(17,19,23,.1);
        border-radius: 13px 4px 13px 13px;
        color: var(--ink);
        background: rgba(255,253,248,.9);
        box-shadow: 0 8px 18px rgba(17,19,23,.12);
        font-size: 15px;
        font-weight: 860;
        letter-spacing: -.03em;
        line-height: 1.1;
        text-align: right;
      }

      .journey-shot img {
        width: auto;
        height: min(65svh, 520px);
        max-width: 78vw;
        max-height: none;
        padding: 4px;
        border: 1px solid rgba(17,19,23,.2);
        border-radius: 28px;
        background: #1c1f24;
        object-fit: contain;
        object-position: top;
        clip-path: inset(0 round 24px);
        box-shadow: 0 14px 28px rgba(17,19,23,.14);
        aspect-ratio: 1320 / 2868;
      }

      /* 03. The classroom title leads, then the next content rises over the phone. */
      #classroom {
        --classroom-overlay-alpha: .12;
        --classroom-overlay-y: 36px;
        --classroom-phone-opacity: 1;
        position: relative;
        overflow: clip;
        padding: 52px 0 74px;
      }

      #classroom .proof-grid {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        align-items: stretch;
      }

      #classroom .proof-copy {
        display: contents;
      }

      #classroom .proof-copy .kicker {
        display: none;
      }

      #classroom .proof-copy h2 {
        order: 1;
        position: sticky;
        top: clamp(72px, 9svh, 92px);
        z-index: 4;
        margin: 0 0 18px;
        font-size: clamp(35px, 10.5vw, 46px);
        line-height: 1.04;
        opacity: var(--classroom-phone-opacity);
        transition: opacity .12s linear;
      }

      #classroom .classroom-phone {
        order: 2;
        position: sticky;
        top: clamp(198px, 27svh, 220px);
        z-index: 1;
        width: auto;
        height: min(70svh, 560px);
        max-width: 78vw;
        margin: 0 auto 24px;
        padding: 5px;
        border-radius: 34px;
        opacity: var(--classroom-phone-opacity);
        transition: opacity .12s linear;
      }

      #classroom .classroom-phone img {
        width: auto;
        height: 100%;
        max-width: none;
        border-radius: 29px;
        object-fit: cover;
      }

      #classroom .proof-copy > p,
      #classroom .reason-list,
      #classroom .report-strip {
        position: relative;
        z-index: 3;
        opacity: 1;
        transform: translateY(var(--classroom-overlay-y));
        transition: opacity .12s linear, transform .12s linear;
      }

      #classroom .proof-copy > p {
        order: 3;
        margin: 0 0 12px;
        padding: 16px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 20px;
        background: rgba(18,20,25,var(--classroom-overlay-alpha));
        color: rgba(255,255,255,.7);
      }

      #classroom .reason-list {
        order: 4;
        margin: 0;
        padding: 0 16px;
        border: 1px solid rgba(255,255,255,.13);
        border-radius: 22px;
        background: rgba(18,20,25,var(--classroom-overlay-alpha));
      }

      #classroom .report-strip {
        order: 5;
        margin-top: 12px;
        background: rgba(18,20,25,var(--classroom-overlay-alpha));
      }

      #classroom .reason {
        padding: 14px 0;
      }

      #classroom .report-panel {
        padding: 16px;
      }
    }

    @media (prefers-reduced-motion: reduce) and (max-width: 700px) {
      .journey-shot,
      .journey-shot.is-active,
      .journey-shot[aria-hidden="true"] {
        position: relative;
        top: auto;
        transform: none !important;
      }

      #classroom .classroom-phone {
        position: relative;
        top: auto;
        opacity: 1;
      }

      #classroom .proof-copy h2 {
        opacity: 1;
      }

      #classroom .proof-copy > p,
      #classroom .reason-list,
      #classroom .report-strip {
        opacity: 1;
        transform: none;
      }
    }

/* ===== 10 · mobile type system ===== */
/* Mobile type pass: preserve the established SF Pro / PingFang voice while
       giving each reading role a stable size, measure, and rhythm. */
    @media (max-width: 700px) {
      :root {
        --mobile-display: clamp(40px, 11vw, 48px);
        --mobile-section-title: clamp(32px, 9vw, 38px);
        --mobile-body: 15px;
        --mobile-supporting: 13px;
        --mobile-meta: 11px;
      }

      h1,
      h2,
      h3 {
        text-wrap: balance;
      }

      p,
      li,
      span {
        text-wrap: pretty;
      }

      .nav-inner .brand {
        font-size: 17px;
        letter-spacing: -.025em;
      }

      .nav-links .nav-cta {
        font-size: 14px;
        letter-spacing: -.015em;
      }

      .eyebrow,
      .kicker {
        font-size: var(--mobile-meta);
        line-height: 1.35;
        letter-spacing: .045em;
      }

      .hero h1 {
        max-width: 11.2ch;
        margin-bottom: 16px;
        font-size: var(--mobile-display);
        line-height: 1.04;
        letter-spacing: -.045em;
      }

      .hero .lead {
        max-width: 25em;
        margin-bottom: 18px;
        font-size: var(--mobile-body);
        line-height: 1.65;
        letter-spacing: .005em;
      }

      .actions .button {
        line-height: 1.2;
        letter-spacing: -.01em;
      }

      .difference-copy h2,
      .journey-copy > h2,
      .trust-copy h2,
      .faq h2,
      .section-title h2 {
        font-size: var(--mobile-section-title);
        line-height: 1.1;
        letter-spacing: -.045em;
      }

      .difference-copy p,
      .proof-copy > p,
      .trust-copy > p,
      .section-title > p:last-child {
        font-size: var(--mobile-body);
        line-height: 1.65;
        letter-spacing: .005em;
      }

      .difference .compare-head strong {
        font-size: 15px;
        line-height: 1.25;
        letter-spacing: -.025em;
      }

      .difference .compare-head span {
        font-size: var(--mobile-meta);
        line-height: 1.3;
        letter-spacing: -.01em;
      }

      .difference .compare-path b {
        font-size: 12px;
        line-height: 1.3;
        letter-spacing: -.015em;
      }

      .difference .compare-path span {
        font-size: 11px;
        line-height: 1.45;
        letter-spacing: 0;
      }

      .mobile-note-label {
        font-size: 14px;
        line-height: 1.2;
        letter-spacing: -.02em;
      }

      #classroom .proof-copy h2 {
        font-size: clamp(34px, 9.8vw, 42px);
        line-height: 1.08;
        letter-spacing: -.05em;
      }

      #classroom .proof-copy > p {
        font-size: var(--mobile-body);
        line-height: 1.68;
        letter-spacing: .008em;
      }

      #classroom .reason {
        padding: 14px 0 15px;
      }

      #classroom .reason strong {
        font-size: 15px;
        line-height: 1.3;
        letter-spacing: -.02em;
      }

      #classroom .reason span {
        font-size: var(--mobile-supporting);
        line-height: 1.52;
        letter-spacing: .005em;
      }

      #classroom .report-label {
        font-size: var(--mobile-meta);
        line-height: 1.35;
        letter-spacing: .06em;
      }

      #classroom .report-panel h3 {
        font-size: 21px;
        line-height: 1.17;
        letter-spacing: -.035em;
      }

      #classroom .meter {
        font-size: 12px;
        line-height: 1.3;
      }

      #classroom .next-step strong {
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: -.02em;
      }

      #classroom .next-step span {
        font-size: var(--mobile-supporting);
        line-height: 1.5;
      }

      .trust-card strong {
        font-size: 14px;
        line-height: 1.3;
      }

      .trust-card span {
        font-size: 12px;
        line-height: 1.52;
      }

      .boundary {
        font-size: 10px;
        line-height: 1.5;
      }

      .devices .section-title h2 {
        font-size: clamp(32px, 8.8vw, 38px);
        line-height: 1.08;
        letter-spacing: -.045em;
      }

      .devices .section-title > p:last-child {
        font-size: 14px;
        line-height: 1.6;
      }

      .device-card small {
        font-size: var(--mobile-meta);
        line-height: 1.3;
        letter-spacing: .09em;
      }

      .device-card h3 {
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: -.04em;
      }

      .device-card p {
        font-size: var(--mobile-supporting);
        line-height: 1.55;
      }

      .faq h2 {
        line-height: 1.08;
      }

      summary {
        font-size: 15px;
        line-height: 1.4;
      }

      details p {
        font-size: 14px;
        line-height: 1.6;
      }

      .cta-panel h2 {
        font-size: clamp(34px, 9.6vw, 42px);
        line-height: 1.08;
        letter-spacing: -.05em;
      }

      .cta-panel p {
        font-size: var(--mobile-body);
        line-height: 1.62;
      }

      .footer-row {
        font-size: 12px;
        line-height: 1.5;
      }

      .footer-copy strong {
        font-size: 13px;
      }

      .footer-copy span,
      .footer-links,
      .footer-top {
        font-size: 12px;
        line-height: 1.45;
      }

      .dialog-head h2 {
        font-size: 25px;
        line-height: 1.15;
        letter-spacing: -.035em;
      }

      .trial-form p {
        font-size: var(--mobile-body);
        line-height: 1.62;
      }

      .field label {
        font-size: 13px;
        line-height: 1.3;
      }

      .field input,
      .field select {
        font-size: 16px;
      }

      .form-note,
      .form-status {
        font-size: var(--mobile-meta);
        line-height: 1.5;
      }
    }

    @media (max-width: 360px) {
      .hero h1 {
        font-size: 40px;
      }

      .difference .compare-head strong {
        font-size: 14px;
      }

      .difference .compare-path b {
        font-size: 11px;
      }

      .difference .compare-path span {
        font-size: 10.5px;
      }

      .actions .button {
        padding-inline: 8px;
        font-size: 13px;
      }
    }

/* ===== 11 · compact mobile navigation ===== */
/* Compact mobile navigation: a slimmer pill with the same touch hierarchy. */
    @media (max-width: 700px) {
      .nav {
        padding-inline: 30px;
      }

      .nav-inner {
        min-height: 50px;
        gap: 6px;
        padding: 4px 6px 4px 8px;
      }

      .nav-inner .brand {
        gap: 6px;
        font-size: 16px;
      }

      .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background-size: 24px;
      }

      .nav-links .nav-cta {
        min-width: 74px;
        min-height: 42px;
        height: 42px;
        padding-inline: 10px;
        font-size: 13px;
      }

      .nav-inner .nav-menu-button {
        width: 40px;
        height: 40px;
        position: relative;
      }

      /* Preserve the compact visual size while giving touch input a 44px
         invisible hit area. */
      .nav-inner .nav-menu-button::after,
      .nav-links .nav-cta::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: inherit;
      }

      .nav-links .nav-cta { position: relative; }

      .nav-menu-button::before {
        display: none;
        content: none;
        background: none;
      }

      .mobile-menu {
        top: 68px;
        left: 30px;
        right: 30px;
      }
    }

/* ===== 12 · trial dialog ===== */
/* Keep the trial form compact on phones without shrinking readable inputs. */
    @media (max-width: 700px) {
      #trial-dialog {
        max-height: calc(100svh - 32px);
        border-radius: 18px;
      }

      #trial-dialog .dialog-head {
        gap: 12px;
        padding: 15px 18px 11px;
      }

      #trial-dialog .dialog-head h2 {
        font-size: 22px;
        line-height: 1.15;
      }

      #trial-dialog .icon-button {
        width: 34px;
        height: 34px;
        font-size: 20px;
      }

      #trial-dialog .trial-form {
        gap: 11px;
        padding: 15px 18px 17px;
      }

      #trial-dialog .trial-form p {
        line-height: 1.5;
      }

      #trial-dialog .field {
        gap: 5px;
      }

      #trial-dialog .field input,
      #trial-dialog .field select {
        min-height: 42px;
        padding-inline: 12px;
        border-radius: 10px;
      }

      #trial-dialog .trial-form .button {
        min-height: 44px;
      }

      #trial-dialog .text-button {
        min-height: 34px;
        margin-top: 0;
      }
    }

/* ===== 13 · journey visual treatment ===== */
.journey-phone-visual {
      display: contents;
    }

    @media (max-width: 700px) {
      .journey-shot,
      .journey-shot.is-active,
      .journey-shot[aria-hidden="true"] {
        min-height: min(calc(100svh - 240px), 540px);
        margin-bottom: 16px;
        padding: 10px 10px 12px;
      }

      .journey-phone-visual {
        position: relative;
        display: inline-block;
        width: fit-content;
        max-width: 78vw;
        line-height: 0;
      }

      .journey-shot img {
        display: block;
        width: auto;
        height: min(61svh, 500px);
        max-width: 78vw;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        object-fit: contain;
        clip-path: none;
        box-shadow: none;
        aspect-ratio: auto;
      }

      .mobile-note-label {
        position: absolute;
        right: -5px;
        bottom: 14px;
        display: block;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        color: #101927;
        background: transparent;
        box-shadow: none;
        font-size: 18px;
        font-weight: 860;
        letter-spacing: -.035em;
        line-height: 1;
        white-space: nowrap;
        text-shadow: 0 1px 0 rgba(255,255,255,.98), 0 0 10px rgba(255,255,255,.78);
      }
    }

/* ===== 14 · final journey frame overrides ===== */
@media (max-width: 700px) {
      .journey {
        padding-bottom: 0;
      }

      .journey-layout {
        --journey-title-card-gap: 38px;
        --journey-card-top: calc(clamp(210px, 30svh, 248px) - 42px);
      }

      /* Reference composition: title owns the upper beat, each note owns the
         phone and its caption. Keep the existing sticky choreography intact. */
      .journey-copy > h2 {
        width: 100%;
        max-width: none;
        position: sticky;
        top: 70px;
        z-index: 20;
        transform: translateY(var(--journey-title-shift, 0px));
        margin: 0 0 var(--journey-title-card-gap);
        padding: 8px 0 8px;
        background: transparent;
      }

      .journey-media {
        margin-top: 0;
      }

      .journey-shot,
      .journey-shot.is-active,
      .journey-shot[aria-hidden="true"] {
        width: calc(100% - 24px);
        max-width: none;
        min-height: min(calc(100svh - 260px), 540px);
        margin-left: 12px;
        margin-right: 0;
        padding: 10px 10px 34px;
        transform: none !important;
        transition: none !important;
      }

      .journey-phone-visual {
        position: static;
        display: contents;
      }

      .journey-shot img {
        height: min(60svh, 500px);
        max-width: calc(100% - 8px);
        padding: 5px;
        border: 1px solid rgba(17,19,23,.32);
        border-radius: 32px;
        background: #1c1f24;
        clip-path: inset(0 round 28px);
        box-shadow: 0 18px 34px rgba(17,19,23,.18);
      }

      /* Keep every sheet on one reading line below the title. The sheets move
         only through native sticky positioning; the scroll room comes from the
         margin, so touch scrolling remains continuous. */
      .journey-shot:nth-child(1) { top: var(--journey-card-top) !important; }
      .journey-shot:nth-child(2),
      .journey-shot:nth-child(3),
      .journey-shot:nth-child(4),
      .journey-shot:nth-child(5) { top: var(--journey-card-top) !important; }

      .journey-shot:nth-child(1) { transform: rotate(-.9deg) !important; }
      .journey-shot:nth-child(2) { transform: rotate(.65deg) !important; }
      .journey-shot:nth-child(3) { transform: rotate(-.45deg) !important; }
      .journey-shot:nth-child(4) { transform: rotate(.8deg) !important; }
      .journey-shot:nth-child(5) { transform: rotate(-.55deg) !important; }

      /* The color belongs to the bottom-right step label, not the whole
         screenshot. Each label gets a small paper slip with its own angle. */
      .mobile-note-label {
        isolation: isolate;
        width: max-content;
        max-width: calc(100% - 8px);
        padding: 8px 12px 7px 14px;
        border: 0;
        border-radius: 3px 12px 4px 10px;
        background: transparent;
        box-shadow: none;
        text-align: right;
        text-shadow: 0 1px 0 rgba(255, 255, 255, .96);
      }

      .mobile-note-label::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset: 0;
        border: 1px solid var(--journey-note-border);
        border-radius: inherit;
        background: var(--journey-note-bg);
        box-shadow: 0 10px 18px var(--journey-note-shadow),
          0 1px 0 rgba(255, 255, 255, .86) inset;
        transform: translate(var(--journey-note-x), var(--journey-note-y))
          rotate(var(--journey-note-angle));
        transform-origin: 50% 50%;
        pointer-events: none;
      }

      .journey-shot:nth-child(1) {
        --journey-note-bg: #eaf3ff;
        --journey-note-border: #c7dcf6;
        --journey-note-shadow: rgba(66, 112, 166, .16);
        --journey-note-x: -3px;
        --journey-note-y: 2px;
        --journey-note-angle: -1.1deg;
      }

      .journey-shot:nth-child(2) {
        --journey-note-bg: #fff0de;
        --journey-note-border: #f0d3b2;
        --journey-note-shadow: rgba(166, 111, 61, .14);
        --journey-note-x: 4px;
        --journey-note-y: -1px;
        --journey-note-angle: 1deg;
      }

      .journey-shot:nth-child(3) {
        --journey-note-bg: #e6f7f2;
        --journey-note-border: #bfe6dc;
        --journey-note-shadow: rgba(52, 132, 117, .14);
        --journey-note-x: -2px;
        --journey-note-y: 3px;
        --journey-note-angle: -.75deg;
      }

      .journey-shot:nth-child(4) {
        --journey-note-bg: #f0edff;
        --journey-note-border: #d8d0f7;
        --journey-note-shadow: rgba(96, 82, 160, .14);
        --journey-note-x: 3px;
        --journey-note-y: 0;
        --journey-note-angle: .85deg;
      }

      .journey-shot:nth-child(5) {
        --journey-note-bg: #fff6cf;
        --journey-note-border: #eee0a6;
        --journey-note-shadow: rgba(156, 128, 46, .14);
        --journey-note-x: -4px;
        --journey-note-y: 2px;
        --journey-note-angle: -1deg;
      }

      .journey-shot,
      .journey-shot.is-active,
      .journey-shot[aria-hidden="true"] {
        margin-bottom: clamp(122px, 16svh, 146px);
      }

      .journey-shot:last-child,
      .journey-shot:last-child.is-active,
      .journey-shot:last-child[aria-hidden="true"] {
        /* Keep the final sheet's former upward release position; only the
           journey section's bottom padding is removed below. */
        margin-bottom: clamp(104px, 14svh, 126px);
      }

      .mobile-note-label {
        right: 18px;
        bottom: 12px;
        z-index: 5;
        font-size: 18px;
        text-shadow: 0 1px 0 rgba(255,255,255,.98), 0 0 10px rgba(255,255,255,.78);
      }
    }

/* ===== 15 · mobile content refinement ===== */
/* Keep the established journey title/card distance and note geometry. This
   pass changes only caption scale and the reading hierarchy of pages two and
   three. Desktop composition remains untouched. */
@media (max-width: 700px) {
      .mobile-note-label {
        right: 18px;
        bottom: 12px;
        width: max-content;
        max-width: calc(100% - 8px);
        font-size: clamp(30px, 10.8vw, 42px);
        font-weight: 900;
        letter-spacing: -.055em;
        line-height: 1;
      }

      /* Page two: turn the classroom explanation into a clear reading rail. */
      #classroom .proof-copy > p {
        max-width: 31ch;
        margin-bottom: 10px;
        padding: 14px 16px 15px;
        font-size: 15px;
        line-height: 1.55;
      }

      #classroom .reason-list {
        gap: 0;
        padding: 4px 16px;
      }

      #classroom .reason {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 15px 0;
      }

      #classroom .reason i {
        width: 28px;
        height: 28px;
        margin-top: 1px;
      }

      #classroom .reason strong {
        margin-bottom: 5px;
        font-size: 16px;
        line-height: 1.25;
      }

      #classroom .reason span {
        display: block;
        max-width: 28ch;
        font-size: 13px;
        line-height: 1.45;
      }

      #classroom .report-strip {
        margin-top: 10px;
      }

      #classroom .report-panel {
        padding: 14px 16px;
      }

      #classroom .report-panel h3 {
        max-width: 14ch;
      }

      #classroom .next-step {
        gap: 6px;
      }

      #classroom .next-step div {
        padding: 11px 12px;
      }

      /* Page three: keep the growth story and the reward demo in one mobile
         viewport without shrinking the video into a thumbnail. */
      #trust.trust-growth {
        padding: 80px 0 32px;
      }

      #trust.trust-growth .trust-grid {
        gap: 14px;
        align-items: stretch;
      }

      #trust.trust-growth .trust-copy {
        order: 1;
      }

      #trust.trust-growth .reward-visual {
        order: 2;
        height: clamp(260px, 37svh, 310px);
        min-height: 0;
        border-radius: 24px;
      }

      #trust.trust-growth .reward-visual video {
        height: 100%;
        min-height: 0;
        border-radius: 23px;
        clip-path: inset(0 round 23px);
      }

      #trust.trust-growth .trust-copy .kicker {
        margin-bottom: 8px;
        font-size: 11px;
        letter-spacing: .11em;
      }

      #trust.trust-growth .trust-copy h2 {
        max-width: none;
        margin-bottom: 10px;
        font-size: clamp(34px, 9.5vw, 42px);
        line-height: 1.05;
        letter-spacing: -.06em;
      }

      #trust.trust-growth .trust-copy > p {
        margin-bottom: 12px;
        font-size: 14px;
        line-height: 1.45;
      }

      #trust.trust-growth .trust-list {
        gap: 6px;
      }

      #trust.trust-growth .trust-card {
        min-height: 0;
        padding: 11px;
        border-radius: 14px;
      }

      #trust.trust-growth .trust-card strong {
        margin-bottom: 3px;
        font-size: 14px;
        line-height: 1.25;
      }

      #trust.trust-growth .trust-card span {
        font-size: 11px;
        line-height: 1.35;
      }

      #trust.trust-growth .boundary {
        margin-top: 8px;
        font-size: 9px;
        line-height: 1.35;
      }

      #trust.trust-growth .reward-score {
        left: 14px;
        top: 14px;
        padding: 12px 14px;
        border-radius: 14px;
      }

      #trust.trust-growth .reward-score small {
        margin-bottom: 5px;
        font-size: 9px;
      }

      #trust.trust-growth .reward-score strong {
        font-size: 38px;
      }

      #trust.trust-growth .reward-tag {
        right: 12px;
        bottom: 12px;
        left: 12px;
        padding: 12px 14px;
        border-radius: 14px;
      }

      #trust.trust-growth .reward-tag strong {
        margin-bottom: 4px;
        font-size: 15px;
      }

      #trust.trust-growth .reward-tag span {
        font-size: 11px;
        line-height: 1.4;
      }
    }

    @media (max-width: 360px) {
      #trust.trust-growth .reward-visual {
        height: 260px;
      }

      #trust.trust-growth .trust-card {
        padding: 10px;
      }

      #trust.trust-growth .trust-card span {
        font-size: 10.5px;
      }
    }

/* ===== 17 · product-view phone proportions ===== */
/* The screenshot already has a fixed 1320:2868 ratio. Let the framed phone
   derive its height from that image instead of forcing a second aspect ratio
   on the padded frame, which was slightly warping the top bezel on mobile. */
    @media (max-width: 700px) {
      .devices .device-shot {
        height: auto;
        aspect-ratio: auto;
        padding-top: 2px;
      }

      .devices .device-shot img {
        height: auto;
        object-fit: contain;
        object-position: top;
      }
    }

/* ===== 18 · desktop journey tuning ===== */
/* Restore the established desktop video composition. Mobile positioning stays
   in the established responsive rules above. */
@media (min-width: 981px) {
      .hero-video {
        transform: none;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 100%);
      }

      #trust.trust-growth .trust-card strong {
        font-size: 18px;
      }

      #trust.trust-growth .trust-card span {
        font-size: 14px;
      }
    }

@media (max-width: 980px) {
      #trust.trust-growth .trust-card strong {
        font-size: 16px;
      }

      #trust.trust-growth .trust-card span {
        font-size: 13px;
        line-height: 1.45;
      }
    }

@media (max-width: 360px) {
      #trust.trust-growth .trust-card strong {
        font-size: 15px;
      }

      #trust.trust-growth .trust-card span {
        font-size: 12px;
      }
    }

/* ===== 19 · compact mobile navigation ===== */
    @media (max-width: 700px) {
      .nav-inner,
      .nav.is-scrolled .nav-inner {
        min-height: 50px;
        padding: 4px 6px 4px 8px;
      }

      .nav-inner .brand-mark {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        background-size: 24px;
      }

      .nav-inner .nav-links .nav-cta {
        height: 40px;
        min-height: 40px;
        padding-inline: 13px;
      }

      .nav-inner .nav-menu-button {
        width: 38px;
        height: 38px;
      }
    }