/* v2 — the study guide. New sections only; design.css supplies tokens, buttons, FAQ, offer, footer and the guided demo. */
.guide-page { --g-green:#466b51; --g-sage:#e4ebda; --g-note:#eef2e8; --g-hi:#f6e7a6; --g-gold:#a8842f; --g-bar:#dedfd6; }
kbd { display:inline-grid; place-items:center; min-width:1.55em; height:1.45em; padding:0 .3em; margin-inline:.06em; border:1px solid #cdd6c6; border-bottom-width:2px; border-radius:5px; background:#fffefa; font:600 .8em/1 var(--sans); color:#263e35; vertical-align:.08em; }
.g-eyebrow { font:600 14px/1.4 var(--sans); color:var(--g-green); margin-bottom:14px; }
.g-h2 { font:400 clamp(34px,3.8vw,54px)/1.1 var(--serif); letter-spacing:-.01em; }
.g-h2 em, .g-h3 em { color:var(--g-green); }
.g-h3 { font:400 clamp(28px,2.6vw,38px)/1.15 var(--serif); }
.g-source { font-size:13px; line-height:1.5; color:var(--muted); }
.g-source a { text-decoration:underline; text-underline-offset:3px; }

/* Navigation */
.g-nav { display:flex; align-items:center; justify-content:space-between; height:76px; }
.g-nav nav { display:flex; align-items:center; gap:30px; font-size:14px; }
.g-nav nav a:not(.g-nav-cta):hover { color:var(--g-green); }
.g-nav-cta { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:99px; background:#263e35; color:#fffefa; font-weight:600; }
.g-nav-cta:hover { background:#34543e; }
.g-nav-cta .icon { width:15px; height:15px; }

/* Hero: one promise, one action, the payoff on screen */
.g-hero { text-align:center; padding-block:56px 72px; }
.g-kicker { font:500 16px/1.5 var(--sans); color:var(--g-green); }
.g-hero h1 { max-width:980px; margin:18px auto 0; font:600 clamp(46px,6.2vw,92px)/1.02 var(--sans); letter-spacing:-.047em; color:#263e35; }
.g-hero h1 em { font:italic 400 1.06em/1 var(--serif); letter-spacing:-.02em; color:var(--g-green); }
.g-lede { max-width:650px; margin:26px auto 0; font-size:20px; line-height:1.6; color:var(--muted); }
.g-actions { display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:32px; }
.g-actions .download-cta { min-height:58px; min-width:250px; justify-content:center; gap:14px; padding-inline:30px; border-radius:10px; background:#466b51; border-color:#466b51; font-size:16px; }
.g-actions .download-cta:hover { background:#34543e; }
.g-reassure { font-size:14px; line-height:1.5; color:var(--muted); }
.g-reassure strong { color:var(--g-green); font-weight:600; }
.g-requirements { margin-top:8px; font-size:12px; color:var(--muted); }
.g-hero-visual { max-width:920px; margin:52px auto 0; }
.loop-frame { position:relative; aspect-ratio:1040 / 940; overflow:hidden; border:1px solid #d8dfd0; border-radius:14px; background:#f6f4ed; box-shadow:0 40px 80px -50px #263e3566; }
.loop-frame img, .loop-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.loop-video { opacity:0; transition:opacity .4s var(--ease); }
.loop-video.is-playing { opacity:1; }
.g-hero-visual figcaption { margin-top:14px; font-size:13px; color:var(--muted); }

/* The real app, right under the promise. The owner's recording is 924 × 720 and silent; shown at 720 px or less so it isn't stretched. */
/* Hero film: 16:9 (vertical on upright phones), sized so the whole player fits on screen. */
.g-hero-film { max-width:min(1000px, calc((100svh - 150px) * 16 / 9)); margin:48px auto 0; border-color:#d8dfd0; box-shadow:0 40px 80px -50px #263e3566; }
/* See how Margin works: the owner's recording. */
.g-see { padding-block:88px; border-top:1px solid var(--rule); text-align:center; }
.g-see .g-demo { margin-top:32px; text-align:left; }
.g-demo { max-width:min(720px, calc((100svh - 120px) * 1388 / 1080)); margin:48px auto 0; border-color:#d8dfd0; box-shadow:0 40px 80px -50px #263e3566; }
.g-demo .hero-video-frame, .g-hero .g-demo .hero-video-frame { aspect-ratio:1388 / 1080; background:#f3f2ec; }
@media(max-width:600px) and (orientation:portrait) { .g-demo { width:100%; } .g-demo .hero-video-frame { aspect-ratio:1388 / 1080; } }

/* Scattered: the real competitor, then the reason why */
.g-scattered { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px 64px; align-items:center; padding-block:96px; border-top:1px solid var(--rule); }
.g-scattered-copy>p:last-child { margin-top:20px; font-size:var(--body-size); line-height:1.7; color:var(--muted); max-width:500px; }
.g-before-after { display:grid; grid-template-columns:1.35fr 1fr; gap:18px; align-items:stretch; }
.g-before, .g-after { position:relative; min-height:280px; border:1px solid var(--rule); border-radius:12px; background:#f1f0ea; overflow:hidden; }
.g-after { background:#fffefa; }
.g-ba-label { position:absolute; top:12px; left:14px; font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.g-after .g-ba-label { color:var(--g-green); }
.g-before { padding-top:36px; }
.g-before img { display:block; width:100%; height:auto; }
.g-before i { position:absolute; width:58%; padding:30px 10px 26px; border:1px solid #d7d9d3; border-radius:8px; background:#fff; font:500 11px/1.2 var(--sans); font-style:normal; color:#3b3f3c; box-shadow:0 10px 24px -14px #1b1f1d59; }
.g-before i::before { content:"• • •"; position:absolute; top:7px; left:9px; font-size:9px; letter-spacing:1px; color:#c8c8c1; }
.g-before .w1 { top:38px; left:8%; transform:rotate(-4deg); } .g-before .w2 { top:70px; left:36%; transform:rotate(3deg); }
.g-before .w3 { top:128px; left:10%; transform:rotate(2deg); } .g-before .w4 { top:168px; left:38%; transform:rotate(-3deg); } .g-before .w5 { top:206px; left:14%; transform:rotate(1deg); }
.g-page { position:absolute; inset:38px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.g-page b { display:block; height:9px; border-radius:5px; background:var(--g-bar); }
.g-page b:nth-child(2n) { width:86%; }
.g-page b.hl { background:var(--g-hi); height:12px; }
.g-page em { margin-inline:-16px; padding:10px 16px 10px 26px; border-block:1px solid #c9d6bf; background:var(--g-note); font:500 12px/1.4 var(--sans); font-style:normal; color:#2f3f33; position:relative; }
.g-page em::before { content:""; position:absolute; left:14px; top:9px; bottom:9px; width:3px; border-radius:2px; background:var(--g-green); opacity:.7; }
/* Compare the same material at the same scale; color marks the next manageable section. */
.g-evidence { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:30px 64px; padding:42px; border:1px solid var(--rule); border-radius:14px; background:#fffefa; }
.g-evidence h2 { font:400 clamp(32px,3.2vw,46px)/1.12 var(--serif); letter-spacing:-.01em; }
.g-evidence h2 em { color:var(--g-green); }
.evidence-copy>p:last-child { margin-top:18px; max-width:450px; font-size:17px; line-height:1.65; color:var(--muted); }
.evidence-segments { min-width:0; }
.evidence-comparison { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.evidence-label { margin-bottom:12px; font:600 12px/1.4 var(--sans); color:var(--muted); }
.evidence-focus .evidence-label { color:var(--g-green); }
.evidence-page { padding:22px 18px; border:1px solid #dde1d7; background:#fff; }
.evidence-page-title { display:block; width:64%; height:6px; margin-bottom:18px; background:#bfc4b9; }
.evidence-lines { padding:8px 0; }
.evidence-lines i { display:block; height:3px; background:#d6d9cf; }
.evidence-lines i+i { margin-top:5px; }
.evidence-lines i:last-child { width:76%; }
.evidence-focus .evidence-page-title, .evidence-focus .evidence-lines { opacity:.3; }
.evidence-focus .evidence-current { position:relative; margin-inline:-9px; padding-inline:9px; background:var(--g-note); opacity:1; }
.evidence-current::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--g-green); }
.evidence-current i { background:#7a9470; }
.evidence-segments figcaption { margin-top:14px; font-size:12px; line-height:1.5; color:var(--g-green); }
.evidence-research { grid-column:1 / -1; padding-top:22px; border-top:1px solid var(--rule); font-size:13px; line-height:1.6; color:var(--muted); }
.evidence-research strong { color:var(--ink); font-weight:600; }
.evidence-research a { color:var(--g-green); text-decoration:underline; text-underline-offset:3px; }

/* The loop */
.g-loop { padding-block:96px; border-top:1px solid var(--rule); background:#fbfaf5; }
.g-loop .g-h2 { max-width:760px; }
.g-steps { list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.g-steps li { display:flex; flex-direction:column; padding:24px 22px 22px; border:1px solid var(--rule); border-radius:12px; background:#fffefa; }
.g-step-n { font:600 12px/1 var(--sans); color:var(--g-green); letter-spacing:.08em; }
.g-steps h3 { margin-top:10px; font:600 22px/1.2 var(--sans); letter-spacing:-.02em; }
.g-steps p { margin-top:8px; font-size:15px; line-height:1.6; color:var(--muted); flex:1; }
.g-art { position:relative; height:112px; margin-top:20px; border-radius:8px; background:#f4f3ed; overflow:hidden; }
.g-art-read { display:flex; flex-direction:column; justify-content:center; gap:11px; padding:0 18px; }
.g-art-read b { position:relative; display:block; height:9px; border-radius:5px; background:var(--g-bar); }
.g-art-read b.r { background:var(--g-hi); height:12px; }
.g-art-read b.r i { position:absolute; left:38%; top:-3px; width:22%; height:18px; border-radius:4px; background:#E4C45A; }
.g-art-read b.s { width:60%; }
.g-art-notes { display:flex; flex-direction:column; justify-content:center; gap:5px; }
.g-art-notes b { height:6px; margin:0 18px; border-radius:3px; background:var(--g-bar); }
.g-art-notes em { position:relative; display:block; padding:3px 30px 3px 26px; border-block:1px solid; font:600 10.5px/1.3 var(--sans); font-style:normal; }
.g-art-notes em::before { content:""; position:absolute; left:16px; top:4px; bottom:4px; width:2.5px; border-radius:2px; background:currentColor; opacity:.6; }
.g-art-notes em::after { content:""; position:absolute; right:14px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:currentColor; opacity:.7; }
.g-art-notes .n1 { background:#eef2e8; border-color:#c9d6bf; color:#3f5944; }
.g-art-notes .n2 { background:#f8efe3; border-color:#e6d2b5; color:#7a5a2e; }
.g-art-notes .n3 { background:#eaf0f6; border-color:#c9d5e2; color:#34506a; }
.g-art-open { display:grid; place-items:center; }
.g-art-open span { display:grid; place-items:end center; width:58px; height:74px; padding-bottom:10px; border:1.5px solid #c9cfc3; border-radius:4px 16px 4px 4px; background:#fffefa; font:700 12px/1 var(--sans); letter-spacing:.08em; color:#466b51; }
.g-art-stuck { display:flex; align-items:center; gap:7px; padding-left:20px; }
.g-art-stuck i { width:4px; height:40px; border-radius:2px; background:var(--g-gold); }
.g-art-stuck i:nth-child(odd) { transform:rotate(4deg); }
.g-art-stuck b { flex:1; height:16px; margin:0 18px 0 12px; border-radius:3px; background:var(--g-hi); }
.g-art-explain { display:flex; flex-direction:column; justify-content:center; gap:10px; }
.g-art-explain b { height:9px; margin-inline:18px; border-radius:5px; background:var(--g-bar); }
.g-art-explain span { padding:8px 18px 8px 28px; border-block:1px solid #c9d6bf; background:var(--g-note); font:500 12px/1.3 var(--sans); color:#2f3f33; position:relative; }
.g-art-explain span::before { content:""; position:absolute; left:16px; top:7px; bottom:7px; width:3px; border-radius:2px; background:var(--g-green); }
.g-art-keep { display:flex; flex-direction:column; justify-content:center; gap:7px; padding-left:22px; }
.g-art-keep i { position:relative; width:46px; height:3px; border-radius:2px; background:#cfd2c8; }
.g-art-keep i:nth-child(3n+2) { width:34px; }
.g-art-keep i.d::after { content:""; position:absolute; left:56px; top:-1.5px; width:6px; height:6px; border-radius:50%; background:#8fa886; }
.g-art-keep i.d:nth-child(4)::after { background:#c9a56a; } .g-art-keep i.d:nth-child(7)::after { background:#7f9bb8; }
.g-art-review { padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.g-art-review span { font:700 11px/1.2 var(--sans); color:#263e35; }
.g-art-review i { height:18px; border-radius:5px; background:var(--g-note); box-shadow:inset 0 0 0 1px #c9d6bf; }
.g-art-review i.s2 { background:#f8efe3; box-shadow:inset 0 0 0 1px #e6d2b5; } .g-art-review i.s3 { background:#eaf0f6; box-shadow:inset 0 0 0 1px #c9d5e2; }
.g-film { margin-top:56px; }
.g-film-caption { padding:10px 16px 12px; font-size:13px; color:var(--muted); text-align:center; }

/* Try it: three clicks on one real page */
.g-try { padding-block:96px; background:#203b32; color:#f6f4ed; }
.g-try .g-eyebrow { color:#b9cfa5; }
.g-try-head { text-align:center; margin-bottom:36px; }
.g-try-head .g-h2 { color:#f6f4ed; }
.g-try-head>p:last-child { margin-top:12px; font-size:18px; color:#c9d6bf; }
.try { max-width:1080px; margin-inline:auto; overflow:hidden; border-radius:16px; background:#fffefa; color:var(--ink); box-shadow:0 40px 80px -40px #0008; }
.try-steps { list-style:none; margin:0; padding:16px 22px; display:flex; flex-wrap:wrap; gap:8px 26px; border-bottom:1px solid var(--rule); background:#f4f3ed; }
.try-steps li { display:flex; align-items:center; gap:9px; font:500 14px/1.3 var(--sans); color:#8a9189; }
.try-steps li span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid #c9cfc3; font-size:12px; font-weight:700; }
.try-steps li[aria-current="step"] { color:var(--ink); font-weight:650; }
.try-steps li[aria-current="step"] span { border-color:var(--g-green); background:var(--g-green); color:#fff; }
.try-steps li[data-done] { color:var(--g-green); }
.try-steps li[data-done] span { border-color:var(--g-green); color:var(--g-green); }
.try-panes { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
.try-pane-label { font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:#8a9189; margin-bottom:18px; }
.try-book { padding:28px 36px 34px; }
.try-chapter { font:650 12px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--g-green); }
.try-book h3 { margin:8px 0 14px; font:700 26px/1.25 var(--serif); }
.try-text { font:18px/1.7 var(--serif); color:#2e3a33; }
.try-text mark { background:var(--g-hi); color:inherit; padding:2px 0; border-radius:2px; transition:background .3s; }
.try-text mark.is-found { animation:try-found 1.6s var(--ease); }
.try-after { margin-top:14px; color:#4d5a52; }
.try-open { display:inline-flex; align-items:center; gap:10px; margin-top:14px; min-height:46px; padding:0 18px; border:1.5px dashed var(--g-green); border-radius:10px; background:#f3f7ef; font:600 15px/1.2 var(--sans); color:#2f4a36; animation:try-nudge 2.4s ease-in-out infinite; }
.try-open:hover { background:#e6eedf; }
.try-open kbd { font-size:13px; }
.try-note { margin:14px -36px 0; padding:16px 36px 16px 50px; border-block:1px solid #c9d6bf; background:var(--g-note); position:relative; overflow:hidden; max-height:0; opacity:0; transition:max-height .45s var(--ease), opacity .3s; }
.try-note.is-open { max-height:240px; opacity:1; }
.try-note::before { content:""; position:absolute; left:36px; top:18px; bottom:18px; width:4px; border-radius:2px; background:var(--g-green); opacity:.75; }
.try-note.is-found { animation:try-found-note 1.6s var(--ease); }
.try-note textarea { display:block; width:100%; min-height:58px; border:0; outline:0; resize:none; background:transparent; font:500 18px/1.5 var(--sans); color:#2f3f33; }
.try-note textarea:focus-visible { outline:2px solid #6e8464; outline-offset:4px; border-radius:4px; }
.try-add { display:inline-flex; align-items:center; gap:8px; margin-top:10px; min-height:44px; padding:0 18px; border:0; border-radius:9px; background:#466b51; color:#fff; font:600 15px/1 var(--sans); }
.try-add:hover { background:#34543e; }
.try-add .icon { width:17px; height:17px; }
.try-guide { padding:28px 28px 34px; border-left:1px solid var(--rule); background:#f7f6f1; }
.try-guide h3 { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font:700 22px/1.25 var(--sans); letter-spacing:-.02em; margin-bottom:18px; }
.try-count { padding:4px 10px; border-radius:99px; background:#466b51; color:#fff; font:650 12px/1.2 var(--sans); letter-spacing:0; }
.try-cards { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.try-card { padding:13px 16px; border:1.5px solid; border-radius:10px; font:500 15px/1.45 var(--sans); }
.try-card span { display:block; margin-bottom:4px; font:650 12px/1.2 var(--sans); color:#5c655c; }
.try-card-link { all:unset; display:block; cursor:pointer; }
.try-card-link:focus-visible { outline:2px solid #6e8464; outline-offset:6px; border-radius:6px; }
.try-card.is-new { animation:try-land .6s var(--ease); box-shadow:0 0 0 3px #b9cfa5; }
.tone-sage { background:#eef2e8; border-color:#c9d6bf; color:#2f3f33; }
.tone-sand { background:#f8efe3; border-color:#e6d2b5; color:#7a5a2e; }
.tone-blue { background:#eaf0f6; border-color:#c9d5e2; color:#34506a; }
.try-slot { display:grid; place-items:center; min-height:74px; border:1.5px dashed #c9cfc3; border-radius:10px; font:500 14px/1.3 var(--sans); color:#8a9189; }
.try-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 22px; border-top:1px solid var(--rule); background:#f4f3ed; }
.try-hint { font:500 15px/1.5 var(--sans); color:#2f4a36; }
.try-reset { min-height:40px; padding:0 14px; border:1px solid var(--rule); border-radius:8px; background:#fffefa; font:500 14px/1 var(--sans); }
@keyframes try-found { 0%,100% { background:var(--g-hi); } 30% { background:#b9cfa5; } }
@keyframes try-found-note { 0%,100% { box-shadow:none; } 30% { box-shadow:inset 0 0 0 3px #466b51; } }
@keyframes try-land { from { transform:translateX(-40px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes try-nudge { 0%,100% { transform:none; } 50% { transform:translateY(-2px); } }

/* Any PDF: three real examples, one note each */
.g-any { padding-block:96px; }
.g-any-head { max-width:640px; }
.g-any-head>p:last-child { margin-top:16px; font-size:var(--body-size); line-height:1.7; color:var(--muted); }
.g-examples { list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.g-ex-kind { margin-bottom:10px; font:700 12px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--g-green); }
.g-ex-page { overflow:hidden; padding:22px 22px 18px; border:1px solid #dfe2d7; border-radius:10px; background:#fffefa; box-shadow:0 18px 40px -34px #263e3566; }
.g-ex-title { font:700 19px/1.3 var(--serif); margin-bottom:10px; }
.g-ex-text { font:16px/1.6 var(--serif); color:#2e3a33; }
.g-ex-text mark, .g-ex-page li mark { background:var(--g-hi); color:inherit; padding:1px 0; }
.g-ex-dim { color:#8a9189 !important; }
.g-ex-note { position:relative; margin:12px -22px; padding:11px 22px 11px 36px; border-block:1px solid; font:500 15px/1.45 var(--sans); }
.g-ex-note::before { content:""; position:absolute; left:22px; top:10px; bottom:10px; width:3px; border-radius:2px; background:currentColor; opacity:.55; }
.g-ex-slide { background:#fbfbf8; }
.g-ex-slide .g-ex-title { font-family:var(--sans); font-size:18px; letter-spacing:-.01em; padding-bottom:8px; border-bottom:2px solid #466b51; }
.g-ex-slide ul { margin:10px 0 0; padding-left:20px; font:500 16px/1.6 var(--sans); color:#2e3a33; }

/* Mac */
section.g-mac { padding-block:72px; border-top:1px solid var(--rule); }
section.g-mac ul { list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
section.g-mac li { border-top:1px solid var(--rule); padding-top:20px; }
section.g-mac h3 { font:600 18px/1.4 var(--sans); }
section.g-mac li p { margin-top:8px; font-size:var(--body-size); line-height:1.65; color:var(--muted); }

/* Closing */
.g-closing { text-align:center; padding-block:96px 104px; border-top:1px solid var(--rule); }
.g-closing .g-h2 { max-width:860px; margin-inline:auto; }

/* Phones and other non-Macs: hand the page to a Mac instead of downloading a DMG to the phone. */
.handoff { position:fixed; inset:auto 16px 16px; z-index:50; display:flex; justify-content:center; }
.handoff-card { position:relative; width:min(460px,100%); padding:24px 24px 20px; border:1px solid #d8dfd0; border-radius:14px; background:#fffefa; box-shadow:0 30px 60px -20px #1b1f1d59; }
.handoff-card h2 { font:600 20px/1.3 var(--sans); padding-right:32px; }
.handoff-card>p { margin-top:8px; font-size:15px; line-height:1.55; color:var(--muted); }
.handoff-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.handoff-actions .button { min-height:46px; }
.handoff-status { margin-top:10px; min-height:1.4em; font-size:14px; color:#466b51; }
.handoff-close { position:absolute; top:10px; right:10px; width:40px; height:40px; border:0; border-radius:8px; background:transparent; font-size:26px; line-height:1; color:#5c655c; }
.handoff-close:hover { background:#eef0e8; }

@media(max-width:1000px) {
  .g-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:900px) {
  .g-evidence { grid-template-columns:1fr; gap:28px; }
  .evidence-copy>p:last-child { max-width:600px; }
  .g-scattered { grid-template-columns:1fr; gap:36px; }
  .try-panes { grid-template-columns:1fr; }
  .try-guide { border-left:0; border-top:1px solid var(--rule); }
  .g-examples { grid-template-columns:1fr; max-width:560px; }
  section.g-mac ul { grid-template-columns:1fr; gap:18px; }
}
/* A quiet mobile header; the hero supplies the main download action. */
@media(max-width:760px) {
  .g-nav nav a { display:none; }
  .g-nav nav a[href="#books"] { display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; }
}
@media(max-width:600px) {
  .g-hero { padding-block:28px 48px; }
  .g-hero h1 { font-size:clamp(40px,11.4vw,56px); }
  .g-lede { font-size:17px; }
  .g-actions .download-cta { width:100%; }
  .g-hero-visual { margin-top:36px; }
  .g-scattered, .g-loop, .g-any, .g-closing { padding-block:64px; }
  .g-before-after { grid-template-columns:1fr; }
  .g-after { min-height:220px; }
  .g-evidence { padding:26px 20px; gap:26px; }
  .evidence-comparison { gap:16px; }
  .evidence-page { padding:18px 12px; }
  .g-steps { grid-template-columns:1fr; }
  .g-examples { gap:28px; }
  .try-book { padding:22px 20px 26px; }
  .try-note { margin-inline:-20px; padding:14px 20px 14px 34px; }
  .try-note::before { left:20px; }
  .try-guide { padding:22px 20px 26px; }
  .try-steps { gap:6px 16px; padding:14px 16px; }
  .try-foot { flex-direction:column; align-items:flex-start; }
}
@media(prefers-reduced-motion:reduce) { .loop-video, .try-note { transition:none; } .try-open, .try-card.is-new, .try-text mark.is-found, .try-note.is-found { animation:none; } }

/* Free textbooks: a place to start the trial */
.g-books { border-top:1px solid var(--rule); }
.g-books .resources-more { margin-top:18px; }

/* What the research says: its own section after the real app */
.g-research { padding-block:0 88px; }

.g-loop-lede { margin-top:14px; font-size:19px; line-height:1.6; color:var(--muted); }
@media(max-width:360px) { .g-nav .wordmark { font-size:24px; } .g-nav-cta { padding:0 12px; } }


/* The page stays in view; small word bricks visibly support the larger sentence pieces. */
.sentence-evidence { grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:32px 80px; align-items:center; padding:0; border:0; border-radius:0; background:transparent; }
.sentence-evidence .evidence-copy>p:not(.g-eyebrow) { margin-top:18px; max-width:470px; font-size:17px; line-height:1.65; color:var(--muted); }
.detail-zoom { width:100%; min-width:0; }
.detail-zoom-art { display:block; width:100%; height:auto; }
.zoom-projections { stroke:#b5c1aa; stroke-width:1.1; }
.zoom-paper { fill:#fffefa; stroke:#d0d7c9; stroke-width:1; }
.zoom-page-ink { stroke:#dadfd4; stroke-width:3; }
.zoom-page-heading { stroke:#bdc8b6; stroke-width:5; }
.zoom-sentence-selection { fill:#edf2e5; stroke:#9aaf88; stroke-width:1; }
.zoom-selected-ink { stroke:#a2b195; stroke-width:2; }
.zoom-page-word, .brick-focus-word { fill:#d6b867; }
.zoom-label { font:500 16px var(--sans); fill:#6b7963; }
.zoom-foundation-label { fill:#466b51; }
.study-brick { stroke-width:1; stroke-linejoin:round; }
.brick-sentence .brick-front { fill:#e3eadb; stroke:#aebea0; }
.brick-sentence .brick-top { fill:#f1f4eb; stroke:#aebea0; }
.brick-sentence .brick-side { fill:#ccd8bf; stroke:#aebea0; }
.brick-sentence-light .brick-front { fill:#edf1e6; }
.brick-sentence-ink { fill:none; stroke:#9eaf91; stroke-width:4; stroke-linecap:round; }
.brick-word .brick-front { fill:#b4c5a5; stroke:#98ac88; }
.brick-word .brick-top { fill:#d4dfc7; stroke:#a8bb97; }
.brick-word .brick-side { fill:#8fa77d; stroke:#8fa77d; }
.brick-word-ink { fill:none; stroke:#718964; stroke-width:4; stroke-linecap:round; }
.brick-keystone .brick-front { fill:#dcc17c; stroke:#bc9d52; }
.brick-keystone .brick-top { fill:#f0dfa9; stroke:#ccb372; }
.brick-keystone .brick-side { fill:#bea05c; stroke:#ae904e; }
.brick-keyword { font:400 22px Georgia,serif; fill:#604b20; }

/* Current version stays close to the download details, linked to its release history. */
.g-hero-meta { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:18px; margin-top:8px; }
.g-hero-meta .g-requirements { margin-top:0; }
.g-release { display:inline-flex; align-items:center; gap:6px; min-height:32px; font:500 12px/1.4 var(--sans); color:var(--g-green); text-decoration:underline; text-decoration-color:#b6c4ab; text-underline-offset:3px; }
.g-release .icon { width:13px; height:13px; }
.g-release:hover { color:#263e35; text-decoration-color:currentColor; }
@media(max-width:900px) { .sentence-evidence { grid-template-columns:1fr; } .detail-zoom { max-width:600px; } }
@media(max-width:600px) {
  .sentence-evidence { gap:26px; }
  .zoom-label { font-size:26px; }
  .g-hero-meta { flex-direction:column; gap:0; margin-top:10px; }
  .g-release { min-height:44px; }
}