:root { --paper:#f8f3e9; --card:#fffdf8; --ink:#171310; --muted:#6e655e; --line:#d9d0c5; --red:#9d1c27; --pink:#c98f89; font-family:'Source Sans 3',sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-snap-type:y mandatory; }
body { margin:0; }
h1,h2,h3,p,figure { margin:0; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:default; }
a { color:inherit; }
img { max-width:100%; display:block; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:2px solid var(--red); outline-offset:4px; }
.scene { min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always; }
.container { width:min(1280px,calc(100% - 96px)); margin-inline:auto; }
.site-top { height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-top .logo { width:214px; height:auto; }
.cta { min-height:50px; padding:12px 22px; display:inline-flex; align-items:center; justify-content:center; gap:32px; border:1px solid var(--red); border-radius:6px; background:var(--red); color:#fffdf8; font-weight:650; font-size:17px; line-height:1.25; text-decoration:none; transition:background .18s,border-color .18s; }
.cta:hover { background:#881722; border-color:#881722; }
.cta .arrow { font-size:27px; font-weight:400; line-height:.7; }
.site-top .cta { min-height:42px; padding:10px 16px; font-size:14px; gap:24px; }
.intro-text { color:var(--muted); font-size:20px; line-height:1.45; }
.credit-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding:18px 0; color:var(--muted); font-size:14px; line-height:1.5; }
.credit-line strong { color:var(--ink); font-weight:600; }
.return-link { font-size:13px; text-underline-offset:4px; color:var(--muted); }
.closing-row { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-top:auto; padding-top:40px; }
.closing-row h2 { font-size:clamp(30px,3.4vw,48px); font-weight:600; line-height:1.04; letter-spacing:-1.2px; }
.closing-row p { color:var(--muted); margin-top:12px; font-size:17px; }
.concept-footer { display:flex; justify-content:space-between; align-items:center; gap:16px; border-top:1px solid var(--line); padding-top:20px; margin-top:38px; color:var(--muted); font-size:13px; }
.section-comparisons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px 22px; }
.scene-details { padding:64px 0 28px; display:flex; flex-direction:column; }
.scene-details>.container { flex:1; display:flex; flex-direction:column; }
.scene-details h2 { letter-spacing:-1.6px; }
.details-intro { display:flex; justify-content:space-between; align-items:end; gap:60px; }
.details-intro h2 { max-width:650px; font-size:clamp(36px,4.4vw,62px); line-height:1.02; font-weight:600; }
.details-intro>p { max-width:335px; color:var(--muted); font-size:18px; line-height:1.5; }
.version-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; padding:40px 0; }
.version-columns article { border-top:1px solid var(--line); padding-top:22px; }
.version-columns .number { display:block; color:var(--red); margin-bottom:20px; font-size:14px; }
.version-columns h3 { font-size:24px; font-weight:600; letter-spacing:-.5px; margin-bottom:10px; }
.version-columns p { font-size:17px; line-height:1.5; color:var(--muted); max-width:315px; }
.benefit-line { display:flex; flex-wrap:wrap; gap:18px 40px; color:var(--muted); border-top:1px solid var(--line); padding-top:24px; font-size:16px; }
.benefit-line strong { color:var(--ink); font-weight:600; }
.entrance { animation:enter .6s ease-out both; }
.reveal-ready { opacity:0; transform:translateY(12px); transition:opacity .5s,transform .5s; }
.reveal-ready.revealed { opacity:1; transform:none; }
@keyframes enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }

/* 01 — an approachable study desk, with the same app on two screens. */
.desk-first { height:100svh; min-height:730px; display:grid; grid-template-rows:88px minmax(0,1fr) auto; }
.desk-layout { display:grid; grid-template-columns:5fr 7fr; align-items:center; gap:20px; min-height:0; }
.desk-copy { padding-bottom:22px; }
.desk-copy h1 { font-size:clamp(58px,4.8vw,72px); line-height:.99; letter-spacing:-3px; font-weight:650; }
.desk-copy h1 span { color:var(--red); }
.desk-copy .intro-text { max-width:385px; margin-top:26px; }
.desk-study-line span { display:block; }
.desk-copy .cta { margin-top:28px; }
.device-stage { position:relative; height:570px; width:100%; max-height:calc(100svh - 185px); }
.desk-window { position:absolute; width:calc(100% - 30px); left:0; top:52px; border:1px solid #45423e; border-radius:9px; overflow:hidden; background:#121212; box-shadow:0 3px 8px #24150e17; }
.desk-window .desktop-screen { width:100%; }
.capture-titlebar { height:26px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 12px; border-bottom:1px solid #45423e; background:#242321; color:#aaa69f; font-size:10px; }
.live-desktop-image { display:block; width:1797px; height:1002px; max-width:none; }
.capture-sidebar { position:absolute; inset:0 auto 0 0; width:264px; padding:44px 27px 32px; border-right:1px solid #45423e; background:#1d1c1b; color:#aaa69f; display:flex; flex-direction:column; font:600 16px/1.3 'Roboto','Source Sans 3',sans-serif; }
.capture-sidebar-row { height:60px; display:flex; gap:13px; align-items:center; padding:0 17px; border-left:3px solid transparent; }
.capture-sidebar-row.active { color:#c98f89; border-left-color:#c98f89; }
.capture-sidebar-row svg { width:19px; height:19px; flex:none; }
.capture-profile { display:flex; gap:12px; align-items:center; margin-top:auto; padding-top:24px; border-top:1px solid #45423e; color:#dedad3; }
.capture-profile svg { width:43px; height:43px; flex:none; }
.device-caption { position:absolute; left:24px; bottom:18px; max-width:220px; color:var(--muted); font-size:15px; line-height:1.45; }
.device-caption::before { content:''; display:block; width:28px; height:2px; background:var(--red); margin-bottom:14px; }
.phone-device { position:absolute; right:-10px; bottom:0; width:266px; height:548px; border:7px solid #252321; border-radius:36px; padding:3px; background:#121212; box-shadow:0 3px 8px #24150e24; color:#dedad3; }
.phone-screen { height:100%; border-radius:25px; overflow:hidden; display:flex; flex-direction:column; background:#121212; }
.phone-status { height:26px; flex:none; display:flex; align-items:center; justify-content:space-between; padding:6px 17px 0; font-size:10px; font-weight:600; }
.phone-status .camera { width:58px; height:13px; background:#050505; border-radius:10px; }
.phone-status svg { width:32px; height:12px; }
.phone-app-title { display:flex; align-items:center; justify-content:space-between; padding:9px 13px; border-bottom:1px solid #45423e; min-height:36px; font-size:12px; color:#aaa69f; }
.phone-app-title img { width:79px; height:auto; }
.phone-content { padding:12px 13px; flex:1; min-height:0; overflow:auto; scrollbar-width:thin; }
.phone-session { display:flex; justify-content:space-between; gap:12px; margin-bottom:13px; }
.phone-session strong { display:block; font-size:12px; font-weight:600; }
.phone-session span { display:block; font-size:10px; color:#aaa69f; margin-top:2px; }
.question-progress { display:flex; justify-content:space-between; gap:12px; color:#aaa69f; font-size:11px; margin-bottom:6px; }
.question-progress strong { font-weight:600; color:#dedad3; }
.question-track { height:3px; background:#33302d; margin-bottom:16px; border-radius:2px; }
.question-track span { display:block; width:5%; height:100%; background:var(--pink); }
.sample-stem { font-size:17px; line-height:1.4; font-weight:575; letter-spacing:-.2px; margin:0; }
.sample-options { display:grid; gap:8px; margin-top:16px; }
.sample-option { display:grid; grid-template-columns:25px 1fr; gap:10px; align-items:center; min-height:42px; width:100%; padding:8px 10px; border:1px solid #45423e; border-radius:7px; background:#1d1c1b; color:#dedad3; text-align:left; font-size:13px; line-height:1.35; transition:background .15s,border-color .15s; }
.sample-option strong { color:var(--pink); font-size:12px; font-weight:600; border-right:1px solid #45423e; padding:3px 0; }
.sample-option:hover { background:#2a2624; }
.sample-option[aria-pressed=true] { border-color:#966e69; background:#2a2220; box-shadow:inset 3px 0 0 var(--pink); }
.sample-option:focus-visible { outline-color:var(--pink); }
.sample-source { margin-top:12px; font-size:10px; line-height:1.4; color:#aaa69f; }
.phone-bottom { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 13px 10px; border-top:1px solid #45423e; background:#1d1c1b; }
.phone-bottom button { border:1px solid #5c5853; border-radius:5px; padding:7px 12px; background:transparent; color:#aaa69f; font-size:12px; min-height:34px; }
.phone-bottom button[data-join] { background:var(--pink); border-color:var(--pink); color:#171310; font-weight:600; }
/* The phone shows the app's light Tutor state after a confirmed correct answer. */
.phone-tutor { background:var(--paper); color:var(--ink); color-scheme:light; }
.phone-tutor .phone-screen { background:var(--paper); }
.phone-tutor .phone-content { padding:10px 12px; overscroll-behavior:contain; }
.phone-tutor .phone-session { gap:10.2px; margin-bottom:6.8px; padding-bottom:6.8px; border-bottom:1px solid var(--line); }
.phone-tutor .phone-session strong { font-size:10.2px; }
.phone-tutor .phone-session span { font-size:8.5px; margin-top:1.7px; }
.phone-tutor .phone-session>div:last-child { text-align:right; }
.phone-tutor .phone-session span,.phone-tutor .question-progress { color:var(--muted); }
.phone-tutor .question-progress strong { color:var(--ink); }
.phone-tutor .question-track { background:var(--line); margin-bottom:13px; }
.phone-tutor .question-track span { background:var(--red); }
.phone-tutor .sample-stem { font-size:15px; line-height:1.4; }
.phone-tutor .sample-options { gap:6px; margin-top:13px; }
.phone-tutor .sample-option { grid-template-columns:20px 1fr; gap:9px; min-height:35px; padding:6px 9px; border-color:var(--line); border-radius:6px; background:var(--card); color:var(--ink); font-size:12px; box-shadow:none; opacity:1; }
.phone-tutor .sample-option strong { padding:3px 0; border-color:var(--line); color:var(--red); font-size:11px; }
.phone-tutor .sample-option.correct { border:1.7px solid #6aa67e; background:#d9f3e1; }
.phone-tutor .sample-option.correct strong { color:#117b38; }
.sample-explanation { margin-top:12px; border-left:2px solid var(--red); background:var(--card); font-size:11px; line-height:1.5; }
.sample-explanation summary { min-height:32px; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; list-style:none; }
.sample-explanation summary::-webkit-details-marker { display:none; }
.sample-explanation summary>span { font-size:9px; color:var(--red); font-weight:600; }
.sample-explanation summary:focus-visible { outline:2px solid var(--red); outline-offset:-2px; }
.sample-explanation .explanation-opened { display:none; }
.sample-explanation[open] .explanation-opened { display:inline; }
.sample-explanation[open] .explanation-closed { display:none; }
.sample-explanation-body { border-top:1px solid var(--line); padding:8px 10px; }
.phone-tutor .sample-source { padding-top:6px; margin-top:6px; border-top:1px solid var(--line); font-size:9px; color:var(--muted); }
.phone-tutor-controls { padding:8px; gap:6px; background:var(--card); border-color:var(--line); }
.phone-tutor-controls button { display:grid; place-items:center; width:29px; height:29px; min-height:29px; padding:0; border-color:var(--line); color:var(--ink); }
.phone-tutor-controls button:disabled { opacity:.4; }
.phone-tutor-controls button[data-join] { background:var(--red); border-color:var(--red); color:#fffdf8; }
.phone-tutor-controls svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.phone-session-tools { display:flex; align-items:center; gap:3px; }
.phone-session-tools>span { display:grid; place-items:center; width:24px; height:26px; border:1px solid var(--line); border-radius:5px; color:var(--muted); }
.phone-session-tools .phone-map { color:var(--red); background:#f5eae1; }
.desk-details { background:#eee5d8; }

/* 02 — a library shelf, composed around the sources themselves. */
.library-first { height:100svh; min-height:760px; display:flex; flex-direction:column; }
.library-title { text-align:center; padding-top:10px; }
.library-title h1 { font-size:clamp(54px,5vw,76px); line-height:.98; letter-spacing:-3px; font-weight:650; }
.library-title h1 span { color:var(--red); }
.library-title .intro-text { margin:18px auto 0; max-width:560px; font-size:19px; }
.library-title .cta { margin-top:20px; }
.library-visual { width:min(940px,calc(100% - 80px)); margin:32px auto 0; flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.library-shelf { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:40px; align-items:end; }
.shelf-source { display:flex; flex-direction:column; align-items:center; gap:14px; }
.shelf-source img { width:auto; height:176px; border:1px solid #d4c8b9; }
.shelf-source svg { width:110px; height:152px; color:var(--red); }
.shelf-source span { font-size:14px; color:var(--muted); white-space:nowrap; }
.library-gather { position:relative; margin:24px 8% 0; height:33px; border:1px solid #c7b5a3; border-top:0; border-radius:0 0 14px 14px; }
.library-gather::after { content:''; position:absolute; left:50%; bottom:-19px; height:19px; width:1px; background:#c7b5a3; }
.shelf-destination { display:flex; justify-content:center; align-items:center; gap:24px; margin:29px auto 18px; }
.shelf-destination img { width:200px; }
.shelf-destination p { border-left:1px solid var(--line); padding-left:24px; color:var(--muted); font-size:15px; }
.library-details { background:var(--card); }
.library-detail-layout { display:grid; grid-template-columns:4fr 6fr; gap:72px; align-items:center; flex:1; }
.library-detail-copy h2 { font-size:clamp(38px,4vw,56px); line-height:1.03; font-weight:600; }
.library-detail-copy>p { color:var(--muted); font-size:18px; margin-top:18px; line-height:1.5; }
.version-picker { margin-top:32px; }
.version-picker-buttons { display:flex; flex-wrap:wrap; border-bottom:1px solid var(--line); gap:22px; }
.version-picker button { border:0; border-bottom:2px solid transparent; padding:10px 0; margin-bottom:-1px; color:var(--muted); background:none; font-weight:600; font-size:15px; }
.version-picker button[aria-pressed=true] { border-bottom-color:var(--red); color:var(--red); }
.version-picker [data-version-panel] { min-height:90px; font-size:17px; line-height:1.5; padding-top:20px; color:var(--muted); }
.library-app { border:1px solid #45423e; border-radius:8px; overflow:hidden; background:#121212; }
.library-detail-visual>p { color:var(--muted); font-size:15px; line-height:1.5; padding-top:18px; max-width:520px; }

/* 03 — a dark, app-first opening; one question is the whole focal point. */
.focus-first { height:100svh; min-height:730px; background:#171615; color:#f8f3e9; display:flex; flex-direction:column; padding-bottom:24px; }
.focus-first .cta { background:#9d1c27; border-color:#b43843; }
.focus-first .cta:hover { background:#b02936; }
.focus-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; padding:8px 0 26px; }
.focus-heading h1 { font-size:clamp(44px,4.3vw,64px); line-height:.98; letter-spacing:-2.3px; font-weight:600; }
.focus-heading h1 span { color:var(--pink); }
.focus-heading .intro-text { font-size:18px; max-width:330px; color:#b8b1aa; padding-bottom:4px; }
.exam-window { width:min(1140px,calc(100% - 96px)); margin:0 auto; border:1px solid #45423e; border-radius:9px; overflow:hidden; background:#121212; flex:1; min-height:0; display:flex; flex-direction:column; }
.exam-titlebar { min-height:34px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 13px; border-bottom:1px solid #45423e; background:#242321; color:#aaa69f; font-size:11px; }
.traffic-lights { display:flex; gap:6px; }
.traffic-lights i { width:10px; height:10px; border-radius:50%; background:#ed6b63; }
.traffic-lights i:nth-child(2) { background:#e8b653; }
.traffic-lights i:nth-child(3) { background:#71b778; }
.exam-layout { display:grid; grid-template-columns:215px minmax(0,1fr); flex:1; min-height:0; }
.exam-sidebar { padding:26px 22px 20px; border-right:1px solid #45423e; background:#1d1c1b; display:flex; flex-direction:column; min-height:0; }
.exam-sidebar>button { text-align:left; display:flex; align-items:center; gap:12px; border:0; background:none; color:#aaa69f; font-size:14px; min-height:46px; padding:0 10px; font-weight:600; }
.exam-sidebar>button:first-child { border-left:2px solid var(--pink); color:var(--pink); }
.exam-sidebar svg { width:16px; height:16px; }
.exam-label { margin-top:28px; border-top:1px solid #45423e; padding-top:20px; }
.exam-label strong { display:block; font-size:15px; color:#dedad3; font-weight:600; }
.exam-label p { margin-top:5px; color:#aaa69f; font-size:12px; }
.exam-profile { margin-top:auto; padding-top:16px; border-top:1px solid #45423e; display:flex; align-items:center; gap:9px; font-size:13px; color:#dedad3; }
.exam-avatar { width:30px; height:30px; background:#312525; color:var(--pink); border-radius:50%; overflow:hidden; }
.exam-avatar svg { width:100%; height:100%; }
.exam-content { padding:24px 40px 16px; min-height:0; overflow:auto; display:flex; flex-direction:column; color:#dedad3; scrollbar-width:thin; }
.exam-content-top { display:flex; justify-content:space-between; align-items:center; gap:18px; border-bottom:1px solid #45423e; padding-bottom:12px; margin-bottom:20px; color:#aaa69f; font-size:13px; }
.exam-content-top strong { color:#dedad3; font-weight:600; }
.exam-question { width:100%; max-width:720px; margin-inline:auto; }
.exam-question .sample-stem { font-size:25px; line-height:1.35; margin-top:8px; }
.exam-question .sample-options { gap:9px; margin-top:20px; }
.exam-question .sample-option { min-height:48px; font-size:16px; grid-template-columns:36px 1fr; padding:10px 14px; }
.exam-question .sample-option strong { font-size:14px; }
.exam-question .sample-source { font-size:12px; margin-top:14px; }
.exam-bottom { margin-top:auto; padding-top:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; color:#aaa69f; }
.exam-bottom button { border:1px solid var(--pink); background:var(--pink); color:#171310; min-height:38px; padding:7px 17px; border-radius:5px; font-size:14px; font-weight:600; }
.focus-footnote { display:flex; justify-content:space-between; gap:20px; padding-top:15px; color:#aaa69f; font-size:13px; }
.focus-footnote a { text-decoration-color:#5c5853; text-underline-offset:4px; }
.focus-details { background:var(--paper); }
.focus-detail-columns { display:grid; grid-template-columns:1fr 1fr; gap:100px; margin-top:40px; }
.study-steps { list-style:none; margin:0; padding:0; }
.study-steps li { display:grid; grid-template-columns:40px 1fr; border-top:1px solid var(--line); gap:16px; padding:20px 0; }
.study-steps li>span { color:var(--red); font-size:14px; padding-top:3px; }
.study-steps h3 { font-weight:600; font-size:23px; letter-spacing:-.5px; }
.study-steps p { color:var(--muted); line-height:1.5; font-size:17px; margin-top:6px; }
.compact-versions { border-top:1px solid var(--line); padding-top:20px; }
.compact-versions>p { color:var(--muted); font-size:15px; margin-bottom:16px; }
.compact-versions div { padding:12px 0; }
.compact-versions h3 { font-size:20px; font-weight:600; }
.compact-versions div p { margin-top:5px; color:var(--muted); font-size:16px; line-height:1.5; }

/* The comparison page is separate from the five landing-page experiences. */
.gallery-page { scroll-snap-type:none; }
.gallery { width:min(1320px,calc(100% - 80px)); margin:0 auto; padding:30px 0 40px; }
.gallery-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:35px; border-bottom:1px solid var(--line); }
.gallery-header img { width:214px; }
.gallery-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; padding:36px 0; }
.gallery-heading h1 { font-weight:600; font-size:50px; line-height:1.02; letter-spacing:-1.8px; }
.gallery-heading p { color:var(--muted); font-size:18px; line-height:1.5; max-width:420px; }
.design-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.design-card { color:inherit; text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:26px; }
.design-card:first-child { grid-column:1 / -1; display:grid; grid-template-columns:1.4fr 1fr; gap:38px; align-items:center; }
.design-image { border:1px solid var(--line); border-radius:7px; overflow:hidden; background:#eee5d8; aspect-ratio:1512/835; transition:border-color .18s; }
.design-image img { width:100%; height:100%; object-fit:cover; }
.design-card:hover .design-image { border-color:var(--red); }
.design-info { padding-top:18px; }
.design-card:first-child .design-info { padding-top:0; }
.design-info .design-number { color:var(--red); font-size:14px; }
.design-info h2 { font-size:30px; font-weight:600; letter-spacing:-.7px; margin-top:8px; }
.design-info p { color:var(--muted); font-size:17px; line-height:1.5; margin-top:10px; max-width:450px; }
.design-info .open-design { display:block; margin-top:18px; font-weight:600; color:var(--red); }
.gallery>footer { padding-top:34px; color:var(--muted); font-size:14px; }

@media(min-width:721px) and (max-height:780px) {
  .site-top { height:72px; }
  .desk-first { grid-template-rows:72px minmax(0,1fr) auto; min-height:690px; }
  .desk-copy h1 { font-size:62px; }
  .desk-copy .intro-text { font-size:18px; margin-top:20px; }
  .device-stage { height:515px; }
  .phone-device { transform:scale(.9); transform-origin:bottom right; }
  .library-first { min-height:700px; }
  .library-title h1 { font-size:58px; }
  .library-visual { margin-top:24px; }
  .shelf-source img { height:142px; }
  .shelf-source svg { height:120px; }
  .library-gather { margin-top:18px; height:23px; }
  .focus-first { min-height:700px; }
  .focus-heading h1 { font-size:48px; }
  .focus-heading { padding-bottom:18px; }
  .exam-content { padding-top:18px; }
  .exam-question .sample-stem { font-size:22px; }
  .exam-question .sample-option { min-height:42px; }
  .exam-content-top { margin-bottom:10px; }
  .exam-question .sample-options { margin-top:14px; gap:7px; }
}
@media(max-width:1050px) and (min-width:721px) {
  .container { width:calc(100% - 56px); }
  .desk-layout { grid-template-columns:4fr 5fr; }
  .desk-copy h1 { font-size:56px; letter-spacing:-2px; }
  .desk-copy .intro-text { font-size:18px; max-width:300px; }
  .phone-device { transform:scale(.85); transform-origin:bottom right; }
  .desk-window { top:75px; }
  .device-caption { max-width:140px; bottom:20px; left:0; font-size:13px; }
  .library-detail-layout { gap:35px; }
  .exam-window { width:calc(100% - 56px); }
  .focus-detail-columns { gap:48px; }
}
@media(max-width:720px) {
  .container { width:calc(100% - 40px); }
  .site-top { height:72px; gap:15px; }
  .site-top .logo { width:166px; }
  .site-top .cta { padding:10px 12px; min-height:40px; font-size:12px; gap:10px; }
  .site-top .cta .arrow { font-size:22px; }
  .cta { min-height:46px; padding:11px 20px; font-size:15px; gap:30px; }
  .intro-text { font-size:17px; }
  .credit-line { font-size:12px; gap:5px; padding:14px 0; }
  .credit-line strong { display:block; }
  .scene-details { padding:42px 0 24px; }
  .details-intro { display:block; }
  .details-intro h2 { font-size:40px; line-height:1.03; }
  .details-intro>p { margin-top:20px; font-size:16px; }
  .version-columns { display:block; padding:28px 0 16px; }
  .version-columns article { padding:18px 0; }
  .version-columns .number { display:none; }
  .version-columns h3 { font-size:22px; margin-bottom:7px; }
  .version-columns p { max-width:none; font-size:16px; }
  .benefit-line { display:grid; gap:12px; padding-top:20px; font-size:15px; }
  .closing-row { display:block; padding-top:32px; }
  .closing-row h2 { font-size:34px; }
  .closing-row p { font-size:16px; }
  .closing-row .cta { margin-top:23px; }
  .concept-footer { margin-top:30px; font-size:12px; }
  .desk-details .concept-footer { flex-direction:column; align-items:flex-start; }
  .section-comparisons { justify-content:flex-start; gap:10px 20px; }
  .desk-first { height:auto; min-height:100svh; grid-template-rows:72px auto auto; }
  .desk-first .site-top { justify-content:center; }
  .desk-first .site-top .cta { display:none; }
  .desk-layout { display:flex; flex-direction:column; gap:14px; padding:15px 0 10px; }
  .desk-copy { width:100%; padding:0; text-align:center; }
  .desk-copy h1 { font-size:39px; line-height:1.02; letter-spacing:-1.6px; }
  .desktop-break { display:none; }
  .desk-copy .intro-text { max-width:310px; font-size:16px; line-height:1.4; margin:16px auto 0; }
  .desk-copy .cta { margin-top:18px; }
  .device-stage { height:436px; max-height:none; margin-top:6px; }
  .desk-window { top:28px; width:100%; }
  .phone-device { right:0; transform:scale(.76); transform-origin:bottom right; }
  .device-caption { left:0; bottom:36px; max-width:117px; font-size:12px; line-height:1.4; }
  .device-caption::before { margin-bottom:11px; }
  .desk-first .credit-line { padding-top:12px; }
  .library-first { height:auto; min-height:100svh; }
  .library-title { padding-top:22px; }
  .library-title h1 { font-size:44px; letter-spacing:-1.6px; }
  .library-title .intro-text { font-size:17px; margin-top:20px; max-width:300px; }
  .library-title .cta { margin-top:24px; }
  .library-visual { width:calc(100% - 32px); flex:1; margin-top:32px; padding-bottom:22px; }
  .library-shelf { grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px 8px; }
  .shelf-source { gap:10px; }
  .shelf-source { grid-column:span 2; }
  .shelf-source:nth-child(4) { grid-column:2 / span 2; }
  .shelf-source:nth-child(5) { grid-column:4 / span 2; }
  .shelf-source img { height:118px; max-width:100%; }
  .shelf-source svg { width:62px; height:74px; }
  .shelf-source span { font-size:12px; white-space:normal; text-align:center; line-height:1.2; }
  .library-gather { margin-top:20px; height:30px; }
  .shelf-destination { flex-direction:column; gap:15px; margin-top:31px; }
  .shelf-destination img { width:192px; }
  .shelf-destination p { border:0; padding:0; font-size:13px; }
  .library-detail-layout { display:flex; flex-direction:column; gap:24px; align-items:stretch; }
  .library-detail-copy h2 { font-size:40px; }
  .library-detail-copy>p { font-size:16px; }
  .version-picker { margin-top:22px; }
  .version-picker-buttons { gap:15px; }
  .version-picker button { font-size:13px; }
  .version-picker [data-version-panel] { min-height:86px; font-size:16px; }
  .library-detail-visual>p { font-size:14px; padding-top:14px; }
  .focus-first { height:auto; min-height:100svh; padding-bottom:20px; }
  .focus-heading { display:block; padding:24px 0; }
  .focus-heading h1 { font-size:43px; letter-spacing:-1.7px; }
  .focus-heading .intro-text { margin-top:18px; font-size:16px; max-width:315px; }
  .exam-window { width:calc(100% - 32px); min-height:450px; flex:none; }
  .exam-titlebar { min-height:30px; font-size:10px; }
  .exam-layout { display:block; }
  .exam-sidebar { display:none; }
  .exam-content { padding:18px 17px 16px; min-height:420px; }
  .exam-content-top { font-size:11px; gap:10px; margin-bottom:17px; }
  .exam-question .sample-stem { font-size:19px; line-height:1.4; }
  .exam-question .sample-options { margin-top:18px; gap:8px; }
  .exam-question .sample-option { font-size:14px; min-height:43px; padding:8px 11px; grid-template-columns:28px 1fr; }
  .exam-question .sample-source { font-size:10px; }
  .exam-bottom { margin-top:16px; padding-top:0; }
  .focus-footnote { display:block; font-size:12px; line-height:1.5; }
  .focus-footnote>span+span { display:none; }
  .focus-footnote a { display:inline-block; margin-top:8px; }
  .focus-detail-columns { display:block; margin-top:30px; }
  .study-steps h3 { font-size:22px; }
  .study-steps p { font-size:16px; }
  .compact-versions { margin-top:14px; }
  .gallery { width:calc(100% - 32px); padding-top:20px; }
  .gallery-header { padding-bottom:24px; gap:15px; }
  .gallery-header img { width:170px; }
  .gallery-header a { font-size:12px; }
  .gallery-heading { display:block; padding:28px 0; }
  .gallery-heading h1 { font-size:38px; }
  .gallery-heading p { font-size:16px; margin-top:18px; }
  .design-grid { display:block; }
  .design-card,.design-card:first-child { display:block; margin-bottom:26px; }
  .design-card:first-child .design-info { padding-top:18px; }
  .design-info h2 { font-size:27px; }
  .design-info p { font-size:16px; }
}