/* A live, self-contained phone illustration. App scenes use genuine iOS captures. */
.hero,.protocol-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(2rem,5vw,5rem); }
.hero { padding-block:var(--space-32) clamp(3rem,6vw,5rem); }
.protocol-section { padding-block:clamp(3rem,6vw,6rem); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.eyebrow { letter-spacing:.02em; }
.hero h1 { font-size:clamp(2.3rem,5.1vw,4.65rem); line-height:1.09; letter-spacing:-.04em; }
.hero h1 span { color:var(--accent); overflow-wrap:anywhere; }
.hero-lede { max-width:27rem; font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.65; }
.hero-lede,.protocol-copy .lede,.sharing-heading .lede,.privacy-section .lede { font-weight:400; }
.hero .store-buttons { margin-top:var(--space-32); }
.hero-gallery { min-width:0; width:100%; max-width:27rem; justify-self:center; }
.hero-gallery .app-carousel { padding:var(--space-16); background:var(--card); border:1px solid var(--line); }
.hero-gallery .carousel-top { letter-spacing:.02em; }
.hero-gallery .screen-frame { width:min(100%,220px); padding:10px; background:var(--paper); border-radius:28px; box-shadow:0 0 0 1px var(--line); }
.hero-gallery .app-slide figcaption { min-height:0; margin-block:1rem; }
.hero-gallery .app-slide figcaption p { font-size:.875rem; }
.reading-steps { container-type:inline-size; padding-block:clamp(2.5rem,5vw,4.5rem); border-block:1px solid var(--line); }
.paper-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.paper-benefit { min-width:0; padding:var(--space-16) clamp(1rem,2.5vw,2rem); }
.paper-benefit + .paper-benefit { border-left:1px solid var(--line); }
.paper-scene { display:block; width:100%; max-width:216px; height:auto; margin:0 auto var(--space-24); overflow:visible; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; }
.paper-back { fill:var(--accent-soft); stroke:none; }
.paper-sheet { fill:var(--card); stroke:var(--line-2); }
.paper-rule { fill:none; stroke:var(--line-2); }
.paper-accent { fill:none; stroke:var(--accent); stroke-width:2.5; }
.paper-highlight { fill:var(--accent-soft); stroke:none; }
.paper-folder { fill:var(--accent-soft); stroke:var(--accent); }
.reading-steps h2 { font-size:1.375rem; line-height:1.35; letter-spacing:-.03em; }
.reading-steps p { max-width:32ch; color:var(--ink-2); font-size:.9375rem; line-height:1.7; margin-top:var(--space-12); }
.protocol-copy h2 { font-size:clamp(2rem,4vw,3.6rem); line-height:1.15; letter-spacing:-.04em; }
.protocol-copy h2 span { color:var(--accent); overflow-wrap:anywhere; }
.protocol-copy .lede { max-width:27rem; margin-top:var(--space-24); }
.protocol-demo { min-width:0; width:min(100%,var(--demo-width,20rem)); max-width:28rem; margin:0; justify-self:center; }
.demo-stage { position:relative; width:100%; aspect-ratio:480/720; overflow:hidden; border-radius:var(--corner-panel); background:transparent; isolation:isolate; touch-action:pan-y; }
.demo-stage:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.demo-artboard { position:absolute; top:0; left:0; width:480px; height:720px; transform:scale(var(--demo-fit,1)); transform-origin:0 0; pointer-events:none; }
.demo-camera { width:480px; height:720px; transform-origin:0 0; will-change:transform; }
.demo-phone { position:absolute; top:24px; left:78px; width:324px; height:674px; padding:9px; border:1px solid var(--line-2); border-radius:44px; background:var(--card); box-shadow:0 16px 40px -18px var(--quiet-shadow); }
.demo-phone-screen { position:relative; width:304px; height:654px; border-radius:34px; overflow:hidden; background:var(--paper); color:var(--ink); }
.demo-assistant { position:absolute; inset:0; background:#FAF9F5; color:#302F2C; font-family:var(--font); }
.demo-statusbar { height:29px; padding:10px 21px 0; display:flex; justify-content:space-between; font:600 10px/1 var(--font); }
.demo-statusbar span:last-child { letter-spacing:1px; font-size:8px; }
.demo-chat-nav { height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-size:20px; }
.demo-chat-nav strong { font:500 19px/1.3 Georgia,serif; }
.demo-chat-nav strong span { font:12px var(--font); color:#73716B; }
.demo-greeting { position:absolute; left:16px; right:16px; top:115px; text-align:center; }
.demo-assistant-icon { color:#C06C48; font:40px/1 Georgia,serif; display:inline-block; }
.demo-greeting p { margin-top:12px; font:23px/1.3 Georgia,serif; letter-spacing:-.03em; }
.demo-source-card { position:absolute; left:0; top:0; width:124px; height:148px; overflow:hidden; padding:12px; border:1px solid #E4E1D9; border-radius:13px; background:#FFF; box-shadow:0 7px 15px -8px #302F2C28; transform-origin:0 0; z-index:3; }
.demo-source { display:flex; align-items:center; gap:5px; color:#73716B; font:10px/1.3 var(--font); }
.demo-source svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.demo-source-card strong { display:block; color:#302F2C; font:600 12px/1.4 var(--font); margin-top:7px; }
/* A second, shorter line reads as a genuine file preview rather than one stray placeholder bar. */
.demo-file-lines { display:block; height:2px; width:50px; margin-top:7px; border-radius:2px; background:#E4E1D9; position:relative; }
.demo-file-lines::after { content:""; position:absolute; left:0; top:6px; width:33px; height:2px; border-radius:2px; background:#E4E1D9; }
.demo-source-card[data-file="0"] { transform:translate(20px,224px) rotate(-8deg); }
.demo-source-card[data-file="1"] { transform:translate(160px,195px) rotate(7deg); }
.demo-source-card[data-file="2"] { transform:translate(97px,310px) rotate(-3deg); }
.demo-composer { position:absolute; left:14px; bottom:40px; width:276px; padding:12px; border:1px solid #DEDBD2; border-radius:19px; background:#FFF; box-shadow:0 4px 12px #302F2C08; }
.demo-attachment-space { height:var(--demo-attachment-height,0px); }
.demo-prompt { position:relative; height:18px; font:12px/1.5 var(--font); color:#302F2C; overflow:hidden; white-space:nowrap; }
.demo-caret { display:inline-block; height:16px; width:1.5px; background:#C06C48; vertical-align:-3px; margin-left:1px; }
.demo-composer-tools { display:flex; align-items:center; justify-content:space-between; height:29px; margin-top:5px; font-size:24px; line-height:1; }
.demo-model { font:10px var(--font); color:#73716B; margin-left:auto; margin-right:12px; }
.demo-send { position:relative; display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:#C57553; color:#FFF; font:23px/1 var(--font); }
.demo-send::after { content:""; position:absolute; inset:-8px; border:2px solid #C57553; border-radius:50%; background:#C5755330; opacity:0; pointer-events:none; }
.demo-stage[data-action="send"] .demo-send { transform:scale(.84); background:#9F5030; box-shadow:0 0 0 5px #C5755350; }
.demo-stage[data-action="send"] .demo-send::after { opacity:1; }
.demo-stage[data-action="sent"] .demo-send::after { opacity:var(--demo-send-ripple); transform:scale(var(--demo-send-spread)); }
.demo-conversation { display:none; position:absolute; top:96px; left:18px; right:18px; }
.demo-question { padding:14px; border-radius:15px; background:#EFECE4; color:#302F2C; font:13px/1.5 var(--font); white-space:nowrap; }
.demo-response { margin-top:27px; }
.demo-response .demo-assistant-icon { font-size:26px; }
.demo-thinking { font:13px/1.5 var(--font); margin-top:13px; color:#73716B; }
/* A small pulsing-dots indicator, like a real assistant's "thinking" state, instead of a static ellipsis. */
.demo-dots { display:inline-flex; gap:3px; margin-left:4px; vertical-align:middle; }
.demo-dots i { display:block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.35; animation:demo-dot-pulse 1.1s ease-in-out infinite; }
.demo-dots i:nth-child(2) { animation-delay:.15s; }
.demo-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes demo-dot-pulse { 0%,60%,100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }
.demo-result { display:none; }
/* A quiet rise-and-fade when the finished result appears, matching the hero gallery's own entrance motion. */
.demo-stage[data-scene="response"] .demo-result { animation:demo-result-in .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes demo-result-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.demo-result > p { margin-top:13px; font:14px/1.7 var(--font); }
.demo-returned-file { display:flex; align-items:center; gap:9px; margin-top:19px; padding:14px 10px; background:#FFF; border:1px solid #DEDACE; border-radius:13px; box-shadow:0 4px 12px #302F2C08; }
.demo-returned-file svg { flex:none; width:24px; height:28px; stroke:#C06C48; stroke-width:1.5; fill:none; stroke-linejoin:round; }
.demo-returned-file strong { display:block; font:600 12px/1.5 var(--font); }
.demo-returned-file div > span { display:block; margin-top:4px; font:10px/1.4 var(--font); color:#73716B; }
.demo-download-icon { margin-left:auto; font:21px/1 var(--font); }
.demo-returned-file { position:relative; overflow:hidden; }
.demo-returned-file::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#C57553; transform:scaleX(var(--demo-download,0)); transform-origin:left; }
.demo-stage[data-action="open"] .demo-returned-file { box-shadow:0 0 0 3px #C5755340; }
.demo-home-indicator { position:absolute; bottom:7px; left:105px; width:94px; height:4px; border-radius:3px; background:currentColor; opacity:.6; z-index:6; }
.demo-app { position:absolute; inset:0; background:#F8FAFB; display:none; }
/* Continue the capture's own edge color through the safe areas and rounded corners.
   Follow the displayed image's theme, including while a replacement capture loads. */
.demo-app:has([data-active="true"] img[data-theme="dark"]:not([hidden])) { background:#131D25; }
.demo-app:has(:is([data-demo-image="collection"],[data-demo-image="add-to-library"],[data-demo-image="import-complete"])[data-active="true"]) { background:#C7C7C9; }
.demo-app:has(:is([data-demo-image="collection"],[data-demo-image="add-to-library"],[data-demo-image="import-complete"])[data-active="true"] img[data-theme="dark"]:not([hidden])) { background:#0B0F12; }
.demo-app:has([data-demo-image="original-i20"][data-active="true"]) { background:#131D25; }
.demo-stage[data-scene="app"] .demo-home-indicator { background:#131D25; }
.demo-stage[data-scene="app"] .demo-phone-screen:has([data-active="true"] img[data-theme="dark"]:not([hidden]), [data-demo-image="original-i20"][data-active="true"]) .demo-home-indicator { background:#F8FAFB; }
.demo-app [data-demo-image] { position:absolute; left:0; right:0; top:16px; aspect-ratio:860/1760; overflow:hidden; display:none; }
.demo-app img { width:100%; height:auto; display:block; margin-top:-12.790697674%; }
.demo-app-tap { position:absolute; width:30px; height:30px; border:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); border-radius:50%; opacity:0; }
.demo-stage[data-submitted="true"] .demo-greeting { display:none; }
.demo-stage[data-submitted="true"] .demo-conversation { display:block; }
.demo-stage[data-scene="type"] .demo-response { visibility:hidden; }
.demo-stage[data-scene="response"] .demo-thinking { display:none; }
.demo-stage[data-scene="response"] .demo-result { display:block; }
.demo-stage[data-scene="app"] .demo-app { display:block; }
.demo-stage[data-scene="app"] .demo-assistant { display:none; }
.demo-stage[data-scene="app"] .demo-app [data-active="true"] { display:block; }
.demo-stage[data-reacting="true"] { box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent); }
.demo-reaction-ring { position:absolute; width:42px; height:42px; border:1px solid var(--accent); border-radius:50%; opacity:0; pointer-events:none; }
.protocol-demo figcaption { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 8px; margin-top:var(--space-12); color:var(--ink-2); font-size:.7rem; line-height:1.5; text-align:center; }
.demo-phase-label { color:var(--accent); }
.demo-compatibility { margin-top:var(--space-16); text-align:center; color:var(--ink-2); font-size:.75rem; line-height:1.6; }
.demo-compatibility span { color:var(--ink); }
.demo-compatibility small { display:block; font-size:inherit; margin-top:2px; }
.demo-static-description { font-size:.875rem; color:var(--ink-2); }
.anchor-alias { display:block; scroll-margin-top:calc(var(--header-height,6rem) + 2rem); }
:root[data-theme="dark"] .demo-assistant { background:#242321; color:#EEECE5; }
:root[data-theme="dark"] .demo-chat-nav strong span { color:#B5B1A8; }
:root[data-theme="dark"] .demo-source-card,:root[data-theme="dark"] .demo-composer,:root[data-theme="dark"] .demo-returned-file { background:#30302D; border-color:#47453F; }
:root[data-theme="dark"] .demo-source-card strong,:root[data-theme="dark"] .demo-prompt { color:#EEECE5; }
:root[data-theme="dark"] .demo-source,:root[data-theme="dark"] .demo-model,:root[data-theme="dark"] .demo-thinking,:root[data-theme="dark"] .demo-returned-file div > span { color:#B5B1A8; }
:root[data-theme="dark"] .demo-file-lines,:root[data-theme="dark"] .demo-file-lines::after { background:#55524B; }
:root[data-theme="dark"] .demo-question { background:#34332F; color:#EEECE5; }
@media (hover:hover) and (pointer:fine) { .demo-stage:hover .demo-phone { border-color:var(--accent); } }
@media (max-width:47.99rem) {
  .hero,.protocol-section { grid-template-columns:minmax(0,1fr); gap:var(--space-32); }
  .hero h1 { font-size:clamp(2.3rem,8.6vw,4rem); }
}
@container (max-width:40rem) {
  .paper-benefits { grid-template-columns:minmax(0,1fr); }
  .paper-benefit { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-20); padding:var(--space-24) 0; }
  .paper-benefit + .paper-benefit { border-left:0; border-top:1px solid var(--line); }
  .paper-scene { flex:0 0 88px; width:88px; margin:0; }
  .paper-benefit > div { flex:1 1 10rem; min-width:0; }
  .reading-steps h2 { font-size:1.25rem; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-camera { will-change:auto; }
  .demo-caret,.demo-reaction-ring,.demo-app-tap { display:none; }
}

.demo-controls { display:flex; justify-content:flex-end; margin-top:.65rem; }

.demo-file-preview { display:block; width:100px; height:64px; object-fit:cover; object-position:top; margin-top:6px; background:#fff; border:1px solid #e4e1d9; border-radius:2px; }