/*
 * Home page (lib/web/home.ts, lib/web/demo.ts): the demo on the iPad at the top, below it "Try it here" with the editor.
 * Loads after style.css. The bold part is the drawing, everything else stays calm.
 */

/* === Home page basics (from public/style.css): header, editor, result, notebook, questions ==================== */

/* --- Home page: header --------------------------------------------------------------------------- */

.hero { padding: clamp(1.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); }
.hero h1 {
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.6rem); font-weight: 720; line-height: 0.98; letter-spacing: -0.035em;
  max-width: 12ch;
}
.hero .lede { margin-top: 1.1rem; }

/* --- Home page: editor ---------------------------------------------------------------------------- */

.composer { display: grid; gap: 1.1rem; }

/* The sheet: lines and margin line are background, the text sits in a see-through textarea on top */
.sheet {
  --line: 2.75rem;
  --sheet-x: 3.75rem;       /* margin line */
  --sheet-top: 2.25rem;     /* top margin of the sheet */
  --ink-color: var(--ink-blue);
  /* No stacking context of its own (no isolation/z-index), otherwise the sheet below would lie over the lines */
  position: relative;
  border-radius: 6px;
  background-color: var(--sheet);
  /* Line at 72% of the line height + 2px: that's where the baselines of all three fonts sit (measured in the browser) */
  background-image:
    linear-gradient(90deg, transparent calc(var(--sheet-x) - 1.5px), var(--sheet-margin) calc(var(--sheet-x) - 1.5px), var(--sheet-margin) var(--sheet-x), transparent var(--sheet-x)),
    linear-gradient(180deg, transparent calc(var(--line) - 1px), var(--sheet-rule) calc(var(--line) - 1px));
  background-position: 0 0, 0 calc(var(--sheet-top) - var(--line) * 0.28 + 3px);
  background-repeat: no-repeat, repeat-y;
  background-size: 100% 100%, 100% var(--line);
  box-shadow: var(--shadow-sheet);
}
/* A second sheet underneath, slightly rotated: the stack on the desk */
.sheet::before {
  content: ''; position: absolute; inset: 0.4rem -0.2rem -0.45rem 0.35rem; z-index: -1;
  background: var(--sheet); border-radius: 6px; transform: rotate(0.7deg);
  box-shadow: 0 0 0 1px rgba(29, 34, 48, 0.06), 0 12px 30px -20px rgba(31, 63, 168, 0.3);
}
.sheet[data-ink='black'] { --ink-color: var(--ink-black); }
.sheet[data-ink='royal'] { --ink-color: var(--ink-royal); }
.sheet-text {
  display: block; width: 100%; min-height: calc(var(--line) * 7 + var(--sheet-top) + 1.5rem); resize: none; overflow: hidden;
  padding: var(--sheet-top) 1.75rem 1.5rem calc(var(--sheet-x) + 1rem);
  font-size: calc(2.15rem * var(--hand-scale)); line-height: var(--line);
  color: var(--ink-color); caret-color: var(--ink-color);
  background: transparent; border: 0; border-radius: 6px;
  field-sizing: content;
}
.sheet-text:focus { outline: none; }
.sheet:has(.sheet-text:focus-visible) { box-shadow: var(--shadow-sheet), 0 0 0 3px color-mix(in srgb, var(--focus) 40%, transparent); }
.sheet-text::placeholder { color: #97a0b4; opacity: 1; }
.sheet-count {
  position: absolute; right: 1rem; bottom: 0.55rem;
  font-size: 0.8rem; font-variant-numeric: tabular-nums; color: #8a93a6;
}
.sheet-count.is-over { color: var(--danger); font-weight: 600; }

.controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.75rem; }
.controls legend { font-size: 0.85rem; color: var(--pencil); font-weight: 500; margin-bottom: 0.4rem; }
.convert { margin-left: auto; min-height: 3.25rem; padding-inline: 1.5rem; font-size: 1.05rem; }

/* --- Home page: result ---------------------------------------------------------------------------- */

.result { display: grid; gap: 1rem; scroll-margin-top: 1rem; }
.result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.result-frame {
  margin: 0; padding: clamp(0.75rem, 3vw, 2rem); border-radius: var(--radius);
  border: 1px solid var(--rule); overflow: hidden; display: grid; place-items: center;
}
.result-paper { position: relative; display: block; width: 100%; line-height: 0; }
.result-paper img { display: block; width: 100%; height: auto; }
.result-frame.bg-transparent {
  background-color: #ffffff;
  background-image: conic-gradient(#eef1f6 25%, transparent 0 50%, #eef1f6 0 75%, transparent 0);
  background-size: 18px 18px;
}
.result-frame.bg-paper, .result-frame.bg-lined, .result-frame.bg-grid { background: var(--sheet); }
/* Lines exactly under the handwriting's baseline: editor.js sets --lh and --l0 to match the image's size and position */
.result-frame.bg-lined {
  background-image: linear-gradient(180deg, transparent calc(var(--lh) - 1px), var(--sheet-rule) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  background-position: 0 var(--l0);
}
.result-frame.bg-grid {
  background-image:
    linear-gradient(180deg, transparent calc(var(--lh) / 2 - 1px), var(--sheet-rule) calc(var(--lh) / 2 - 1px)),
    linear-gradient(90deg, transparent calc(var(--lh) / 2 - 1px), var(--sheet-rule) calc(var(--lh) / 2 - 1px));
  background-size: 100% calc(var(--lh) / 2), calc(var(--lh) / 2) 100%;
  background-position: 0 var(--l0), var(--x0) 0;
}
/* The one big moment: the result is "written" from left to right */
.result-paper.is-writing img { animation: write-in 1.15s cubic-bezier(0.32, 0.72, 0.3, 1) both; }
@keyframes write-in {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.result-status { min-height: 1.5rem; color: var(--pencil); font-size: 0.95rem; }
.result-status.is-ok { color: var(--graphite); }

/* The same as a Goodnotes notebook with real ink: page on the left, explanation and download on the right */
.notebook-card {
  display: grid; gap: 1.5rem 2.25rem; align-items: start; margin-top: 0.75rem;
  padding: clamp(1.25rem, 3.5vw, 2rem); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface);
}
.notebook-page { margin: 0; width: min(100%, 10rem); justify-self: center; padding: 0.4rem 0.6rem 0.6rem 0.3rem; }
/* The account's paper, drawn (paperThumb in lib/web/stationery.ts): no rendered page, so nothing is written before you ask */
.notebook-page .paper-thumb { width: 100%; transform: rotate(-1.4deg); filter: drop-shadow(0 6px 14px rgba(31, 63, 168, 0.18)); }
.notebook-copy { display: grid; gap: 0.8rem; align-content: start; }
.notebook-copy h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.6rem); font-weight: 700; }
.notebook-copy .muted { max-width: 34rem; }
.notebook-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin-top: 0.2rem; }
.notebook-actions .button[aria-busy], .result-actions .button[aria-busy] { pointer-events: none; opacity: 0.7; }
.notebook-paper { font-size: 0.9rem; color: var(--pencil); }
.notebook-steps { margin: 0.35rem 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 0.45rem; max-width: 34rem; }
.notebook-steps li { counter-increment: step; display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline; color: var(--pencil); font-size: 0.95rem; }
.notebook-steps li::before { content: counter(step); font-family: 'Caveat', cursive; font-weight: 700; font-size: 1.55rem; line-height: 1; color: var(--ink-text); }
.notebook-steps strong { color: var(--graphite); font-weight: 600; }
.notebook-copy .result-status:empty { display: none; }
@media (min-width: 44rem) {
  .notebook-card { grid-template-columns: 12.5rem minmax(0, 1fr); }
  .notebook-page { justify-self: start; width: 12.5rem; }
}

/* --- Home page: questions ---------------------------------------------------------------------------------- */

.faq { margin-top: clamp(4rem, 10vw, 6rem); max-width: 44rem; }
.faq h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); font-weight: 700; margin-bottom: 1rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0; font-weight: 600; font-size: 1.1rem; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.3rem;
  border-right: 2px solid var(--pencil); border-bottom: 2px solid var(--pencil);
  transform: rotate(45deg) translateY(-0.15rem); transition: transform 0.2s;
}
.faq details[open]:not(.is-closing) summary::after { transform: rotate(225deg) translateY(-0.1rem); }
.faq details p { padding: 0 0 1.25rem; color: var(--pencil); max-width: 38rem; }

@media (max-width: 40rem) {
  .sheet { --line: 2.4rem; --sheet-x: 2.1rem; --sheet-top: 1.5rem; }
  .sheet-text { padding-left: calc(var(--sheet-x) + 0.7rem); padding-right: 1rem; font-size: calc(1.85rem * var(--hand-scale)); }
  .controls { gap: 1rem; }
  .convert { width: 100%; margin-left: 0; }
  .result-actions .button { flex: 1 1 calc(50% - 0.6rem); }
  .notebook-actions .button { width: 100%; }
}

/* === Redesigned: the demo on the iPad and everything below it ======================================================= */

.page-home {
  --demo-device: #edf0f5;   /* casing of the drawn iPad */
  --demo-select: #3a6cf0;   /* text selection on the screen */
}
@media (prefers-color-scheme: dark) {
  .page-home { --demo-device: #1b212d; }
}

/* --- Header: heading, demo, button ------------------------------------------------------------
 * Narrow: text, demo, buttons stacked. Wide: heading across the full width,
 * intro, steps and buttons on the left, the iPad on the right.
 */

.page-home .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'title' 'lede' 'stage' 'steps' 'actions';
  align-items: start;
  padding: clamp(1.25rem, 4.5vw, 3rem) 0 0;
}
.page-home .hero h1 { grid-area: title; }
.page-home .hero .hero-lede { grid-area: lede; margin-top: 1rem; max-width: 34rem; }

.hero-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; margin-top: 1.75rem; }
.hero-cta { min-height: 3.25rem; padding-inline: 1.6rem; font-size: 1.075rem; }
/* Margin note in fountain pen: written slightly askew next to the button, the arrow points at it */
.hero-note {
  display: inline-flex; align-items: center; gap: 0.2rem; margin-left: -0.6rem;
  font-family: 'Caveat', cursive; font-weight: 600; font-size: 1.4rem; line-height: 0.95; color: var(--ink-text);
  transform: rotate(-4deg);
}
.hero-note-arrow { flex: none; width: 2.3rem; height: auto; margin-top: 0.6rem; }
.hero-try { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }
.hero-also { flex-basis: 100%; font-size: 0.925rem; color: var(--pencil); }

/* --- The drawing ------------------------------------------------------------------------------------ */

.demo-stage { grid-area: stage; margin-top: clamp(1.5rem, 4vw, 2.25rem); max-width: 40rem; }
.demo-art { display: block; width: 100%; height: auto; aspect-ratio: 592 / 468; overflow: visible; }

/* Device in the UI colors (dark in dark mode) */
.demo-body { fill: var(--demo-device); stroke: var(--graphite); stroke-width: 2.2; }
.demo-screen { fill: none; stroke: var(--graphite); stroke-width: 1.3; }
.demo-camera { fill: var(--pencil); }
.demo-pencil-body, .demo-pencil-tip { fill: var(--surface); stroke: var(--graphite); stroke-width: 1.8; stroke-linejoin: round; }
.demo-pencil-flat { fill: none; stroke: var(--rule-strong); stroke-width: 1.2; stroke-linecap: round; }
.demo-pencil-nib { fill: var(--pencil); }
.demo-squeeze path { fill: none; stroke: var(--ink-text); stroke-width: 2.4; stroke-linecap: round; }

/* Screen: stays light like a real display, in dark mode too */
.demo-pane { fill: #ffffff; }
.demo-hair { fill: none; stroke: #e3e7ee; stroke-width: 1; }
.demo-chrome { fill: none; stroke: #8c94a5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo-bar-title { font-size: 9px; font-weight: 600; fill: #7d8597; }
.demo-heading { font-size: 15px; font-weight: 700; fill: #1d2230; letter-spacing: -0.01em; }
.demo-read { font-size: 10.8px; fill: #596172; }
.demo-sel { fill: var(--demo-select); fill-opacity: 0.2; }
.demo-handles path { fill: none; stroke: var(--demo-select); stroke-width: 1.6; }
.demo-handles circle { fill: var(--demo-select); }
.demo-more rect { fill: #e6e9f0; }
.demo-figure { fill: #f1f3f7; }
.demo-leaf, .demo-leaf-vein { fill: none; stroke: #a2aaba; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.demo-copy rect, .demo-copy path { fill: #23272f; }
.demo-copy text { font-size: 9.5px; font-weight: 600; fill: #ffffff; }
.demo-divider { fill: #cdd3dd; }
.demo-grabber { fill: #868e9e; }
.demo-canvas { fill: #e8ecf2; }
.demo-toolbar { fill: #f6f7fa; }
.demo-page { fill: #ffffff; stroke: #d9dfe8; stroke-width: 1; }
.demo-rule { fill: none; stroke: #cfdaee; stroke-width: 1; }
.demo-title { font-size: 24px; font-weight: 700; fill: #1e3a8a; }
.demo-title-line { fill: none; stroke: #1e3a8a; stroke-width: 1.6; stroke-linecap: round; }
.demo-hand { font-size: 18px; }
.demo-banner rect { fill: #ffffff; stroke: #cfd6e2; stroke-width: 1; }
.demo-banner-name { font-size: 18px; font-weight: 700; fill: #1f3fa8; }
.demo-banner-text { font-size: 9.5px; font-weight: 500; fill: #596172; }

/* End state (without animation): text is on the page, selection, menu, banner and squeeze are gone */
.demo-selection, .demo-handles, .demo-copy, .demo-banner, .demo-squeeze { opacity: 0; }
.demo-copy, .demo-banner, .demo-pencil, .demo-squeeze { transform-box: fill-box; transform-origin: center; }
.demo-banner { transform-origin: center top; }

/* --- Steps and time comparison ------------------------------------------------------------------------- */

.demo-steps { grid-area: steps; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; max-width: 40rem; }
.demo-step { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); column-gap: 0.7rem; align-items: start; color: var(--graphite); }
.demo-step-num {
  position: relative; display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
  font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1;
}
.demo-step-num .pen-ring { left: -18%; top: -20%; width: 136%; height: 140%; }
.demo-step-text { display: grid; gap: 0.05rem; padding-top: 0.28rem; }
.demo-step-text strong { font-size: 1.025rem; font-weight: 650; line-height: 1.3; color: inherit; }
.demo-step-hint { font-size: 0.9rem; line-height: 1.4; color: var(--pencil); }

.demo-time { margin-top: 0.85rem; font-size: 0.975rem; color: var(--pencil); text-wrap: pretty; }
.demo-time strong { color: var(--graphite); font-weight: 650; white-space: nowrap; }
.demo-time small { display: block; margin-top: 0.15rem; font-size: 0.825rem; }

/* Pause: in the free strip below the iPad, left of the Pencil (the hit area may reach into the casing) */
.demo-art-wrap { position: relative; }
.demo-toggle {
  position: absolute; left: -0.7rem; bottom: -0.55rem;
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 0.7rem;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--pencil);
  background: none; border: 0; border-radius: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.demo-toggle:hover { color: var(--ink-text); }
.demo-toggle .icon { width: 1.1rem; height: 1.1rem; }
.demo-icon-play, .is-paused .demo-icon-pause { display: none; }
.is-paused .demo-icon-play { display: block; }

/* --- The sequence: 9 s, every part with fixed points in time, so it stays in sync --------------------------------------
 *   0–4%       rest
 *   4–15%      paragraph is selected line by line              step 1
 *   18–30%     "Copy" appears and is tapped
 *   33–43%     Pencil is squeezed                              step 2
 *   37–54%     Penvy banner at the top
 *   46–50%     selection disappears
 *   50–84%     handwriting appears line by line                step 3
 *   84–93%     hold, 93–97% fade out
 * Only without prefers-reduced-motion; otherwise the end state stays.
 */
@media (prefers-reduced-motion: no-preference) {
  .demo-selection { animation: demo-select 9s linear infinite; }
  .demo-handles { animation: demo-handles 9s linear infinite; }
  .demo-copy { animation: demo-copy 9s ease-out infinite; }
  .demo-pencil { animation: demo-pencil 9s ease-in-out infinite; }
  .demo-squeeze { animation: demo-squeeze 9s ease-out infinite; }
  .demo-banner { animation: demo-banner 9s cubic-bezier(0.2, 0.8, 0.3, 1) infinite; }
  .demo-hand-1 { animation: demo-write-1 9s linear infinite; }
  .demo-hand-2 { animation: demo-write-2 9s linear infinite; }
  .demo-hand-3 { animation: demo-write-3 9s linear infinite; }
  .demo-hand-4 { animation: demo-write-4 9s linear infinite; }
  .demo-hand-5 { animation: demo-write-5 9s linear infinite; }
  .demo-hand-6 { animation: demo-write-6 9s linear infinite; }
  .demo-hand-7 { animation: demo-write-7 9s linear infinite; }
  .demo-step { color: var(--pencil); }
  .demo-step-1 { animation: demo-step-1 9s linear infinite; }
  .demo-step-2 { animation: demo-step-2 9s linear infinite; }
  .demo-step-3 { animation: demo-step-3 9s linear infinite; }
  .demo-step-1 .pen-ring path { animation: demo-ring-1 9s ease-out infinite; }
  .demo-step-2 .pen-ring path { animation: demo-ring-2 9s ease-out infinite; }
  .demo-step-3 .pen-ring path { animation: demo-ring-3 9s ease-out infinite; }

  .is-paused, .is-paused * { animation-play-state: paused !important; }
}

/* Selection grows from top to bottom, one line per step */
@keyframes demo-select {
  0%, 4% { opacity: 1; clip-path: inset(0 0 100% 0); animation-timing-function: steps(6, jump-start); }
  15% { opacity: 1; clip-path: inset(0 0 0 0); }
  46% { opacity: 1; clip-path: inset(0 0 0 0); }
  50%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
}
@keyframes demo-handles {
  0%, 14.5% { opacity: 0; }
  15.5%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes demo-copy {
  0%, 18% { opacity: 0; transform: translateY(3px); }
  20.5% { opacity: 1; transform: none; }
  26% { opacity: 1; transform: none; }
  27% { opacity: 1; transform: scale(0.92); }
  28% { opacity: 1; transform: none; }
  30%, 100% { opacity: 0; transform: none; }
}
@keyframes demo-pencil {
  0%, 34% { transform: none; }
  36%, 40% { transform: scaleY(0.9); }
  42%, 100% { transform: none; }
}
@keyframes demo-squeeze {
  0%, 33% { opacity: 0; transform: scaleY(1.25); }
  35.5% { opacity: 1; transform: scaleY(0.94); }
  40% { opacity: 1; transform: scaleY(0.94); }
  43%, 100% { opacity: 0; transform: scaleY(1); }
}
@keyframes demo-banner {
  0%, 37% { opacity: 0; transform: translateY(-14px); }
  40%, 51% { opacity: 1; transform: none; }
  54%, 100% { opacity: 0; transform: translateY(-14px); }
}

/* Handwriting: each line is revealed from left to right (clip-path), opacity as a fallback */
@keyframes demo-write-1 {
  0%, 50% { opacity: 0; clip-path: inset(-60% 100% -60% -3%); }
  52% { opacity: 1; }
  55.5%, 93% { opacity: 1; clip-path: inset(-60% -6% -60% -3%); }
  97%, 100% { opacity: 0; clip-path: inset(-60% -6% -60% -3%); }
}
@keyframes demo-write-2 {
  0%, 54.8% { opacity: 0; clip-path: inset(-60% 100% -60% -3%); }
  56.8% { opacity: 1; }
  60.3%, 93% { opacity: 1; clip-path: inset(-60% -6% -60% -3%); }
  97%, 100% { opacity: 0; clip-path: inset(-60% -6% -60% -3%); }
}
@keyframes demo-write-3 {
  0%, 59.6% { opacity: 0; clip-path: inset(-60% 100% -60% -3%); }
  61.6% { opacity: 1; }
  65.1%, 93% { opacity: 1; clip-path: inset(-60% -6% -60% -3%); }
  97%, 100% { opacity: 0; clip-path: inset(-60% -6% -60% -3%); }
}
@keyframes demo-write-4 {
  0%, 64.4% { opacity: 0; clip-path: inset(-60% 100% -60% -3%); }
  66.4% { opacity: 1; }
  69.9%, 93% { opacity: 1; clip-path: inset(-60% -6% -60% -3%); }
  97%, 100% { opacity: 0; clip-path: inset(-60% -6% -60% -3%); }
}
@keyframes demo-write-5 {
  0%, 69.2% { opacity: 0; clip-path: inset(-60% 100% -60% -3%); }
  71.2% { opacity: 1; }
  74.7%, 93% { opacity: 1; clip-path: inset(-60% -6% -60% -3%); }
  97%, 100% { opacity: 0; clip-path: inset(-60% -6% -60% -3%); }
}
@keyframes demo-write-6 {
  0%, 74% { opacity: 0; clip-path: inset(-60% 100% -60% -3%); }
  76% { opacity: 1; }
  79.5%, 93% { opacity: 1; clip-path: inset(-60% -6% -60% -3%); }
  97%, 100% { opacity: 0; clip-path: inset(-60% -6% -60% -3%); }
}
@keyframes demo-write-7 {
  0%, 78.8% { opacity: 0; clip-path: inset(-60% 100% -60% -3%); }
  80.8% { opacity: 1; }
  84.3%, 93% { opacity: 1; clip-path: inset(-60% -6% -60% -3%); }
  97%, 100% { opacity: 0; clip-path: inset(-60% -6% -60% -3%); }
}

/* The current step: dark text, the number circled with the fountain pen */
@keyframes demo-step-1 { 0%, 1% { color: var(--pencil); } 3%, 30% { color: var(--graphite); } 32%, 100% { color: var(--pencil); } }
@keyframes demo-step-2 { 0%, 30% { color: var(--pencil); } 32%, 48% { color: var(--graphite); } 50%, 100% { color: var(--pencil); } }
@keyframes demo-step-3 { 0%, 48% { color: var(--pencil); } 50%, 94% { color: var(--graphite); } 96%, 100% { color: var(--pencil); } }
@keyframes demo-ring-1 {
  0%, 1% { opacity: 1; stroke-dashoffset: 3.4; }
  6%, 30% { opacity: 1; stroke-dashoffset: 0; }
  32%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes demo-ring-2 {
  0%, 30% { opacity: 1; stroke-dashoffset: 3.4; }
  35%, 48% { opacity: 1; stroke-dashoffset: 0; }
  50%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes demo-ring-3 {
  0%, 48% { opacity: 1; stroke-dashoffset: 3.4; }
  53%, 94% { opacity: 1; stroke-dashoffset: 0; }
  96%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

/* Without motion there's nothing to pause */
@media (prefers-reduced-motion: reduce) {
  .demo-toggle { display: none !important; }
}

/* --- Try it here ------------------------------------------------------------------------------------------ */

.write { display: grid; gap: 1.5rem; margin-top: clamp(4rem, 9vw, 6.5rem); padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.write-head h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); font-weight: 700; letter-spacing: -0.025em; }
.write-head p { margin-top: 0.6rem; max-width: 38rem; color: var(--pencil); }

/* Handwriting and ink: kept small, the sheet stays the main thing */
.page-home .controls { align-items: flex-start; gap: 0.75rem 2rem; }
.page-home .convert { align-self: flex-end; }
.control legend { margin-bottom: 0.1rem; font-size: 0.85rem; font-weight: 500; color: var(--pencil); }
.picks-compact { gap: 0.1rem 0.35rem; }
.picks-compact .pick { padding: 0.4rem 0.6rem; }
.pick-font .pick-label { font-weight: 400; }
.pick-font .hand { display: block; font-size: calc(1.7rem * var(--hand-scale)); line-height: 1.15; }
.pick-ink { gap: 0.3rem; }
.pick-ink .ink-stroke { width: 3.6rem; padding: 0.22rem 0.32rem; }
.pick-ink .pick-label, .pick-bg .pick-label { font-size: 0.8rem; font-weight: 550; }

/* --- Result ----------------------------------------------------------------------------------------- */

.write .result { margin-top: 1.25rem; }
.page-home .result-head { align-items: flex-end; }
.result-head h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.6rem); font-weight: 700; }
.pick-bg { gap: 0.3rem; }
.pick-bg .paper-thumb { width: 2.1rem; }
.bg-checker .checker rect { fill: #e2e7ef; }
.bg-checker .checker-edge { fill: none; stroke: rgba(29, 34, 48, 0.2); stroke-width: 0.8; }

.result-time { font-size: 0.975rem; color: var(--pencil); }
.result-time strong { color: var(--graphite); font-weight: 650; }
.result-time small { display: block; margin-top: 0.1rem; font-size: 0.825rem; color: var(--pencil); }
.result-status:empty { display: none; }

/* New account: invite to setup once below the image, never redirect */
.finish-setup {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  margin-top: 0.5rem; padding: 1rem 1.15rem 1rem 1.25rem; border-radius: 12px; background: var(--ink-wash);
}
.finish-setup p { flex: 1 1 18rem; max-width: 36rem; color: var(--pencil); }
.finish-setup strong { color: var(--graphite); }

/* Ink notebook: no box, a line separates it from the image; only the page itself is a sheet */
.page-home .notebook-card {
  margin-top: 1.25rem; padding: 2rem 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; background: none;
}

/* --- Questions ------------------------------------------------------------------------------------------- */

.page-home .faq { margin-top: clamp(4rem, 9vw, 6rem); }

/* --- Wide screens: heading on top, text on the left, the iPad on the right ------------------------------------- */

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .demo-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.25rem; }
}

@media (min-width: 64rem) {
  .page-home .hero {
    grid-template-columns: minmax(0, 19.5rem) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      'title title'
      'lede stage'
      'steps stage'
      'actions stage'
      '. stage';
    column-gap: clamp(2.5rem, 4.5vw, 4rem);
  }
  .page-home .hero h1 { max-width: none; }
  .page-home .hero .hero-lede { margin-top: 2.25rem; }
  .demo-stage { margin-top: 2rem; max-width: none; }
  .demo-steps { margin-top: 2rem; }
  .hero-actions { margin-top: 2.25rem; }
}

/* --- Phone --------------------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .page-home .hero .hero-lede { font-size: 1.075rem; }
  .demo-steps { gap: 0.7rem; }
  .hero-actions { gap: 0.5rem 1.1rem; }
  .page-home .controls { gap: 0.5rem 1.25rem; }
  .page-home .convert { width: 100%; }
}