/* Layout: a notebook laid open. Stippled paper bands alternate with the app's graphite library. */
:root {
  --paper: #fbf7ed;
  --sheet: #f4ecdc;
  --ink: #222224;
  --soft: #5f5a52;
  --graphite: #262628;
  --cream: #f7f0e3;
  --accent: #c23a22;
  --serif: ui-serif, "New York", "Source Serif 4", Georgia, serif;
  --sans: -apple-system, system-ui, "SF Pro Text", "Source Sans 3", "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--sans);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 7vw, 5rem); line-height: .98; letter-spacing: -.015em; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
main { overflow-x: clip; }
main > .wrap { padding-block: clamp(56px, 8vw, 104px); }

/* Sketched icons: pencil lines drawn twice, slightly off, like a real hand. */
.sk { width: 56px; height: 56px; flex: none; overflow: visible; filter: url(#pencil); }
.sk g { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk .ink { stroke: var(--ink); }
.sk .red { stroke: var(--accent); }
.sk .ghost { opacity: .5; stroke-width: 1.1; }
.dark .sk .ink { stroke: var(--cream); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.375rem var(--serif); }
.brand img { width: 44px; height: 44px; border-radius: 22.4%; }
.links { display: flex; gap: 22px; }
.links a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; }
.links a:hover { color: var(--accent); }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.herotext { display: grid; gap: 22px; min-width: 0; }
.eyebrow { font-weight: 600; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.5; color: var(--soft); max-width: 34em; }
.lead.narrow { margin-top: 14px; }
.soon { display: flex; align-items: center; gap: 14px; font-size: 1rem; line-height: 1.35; color: var(--soft); }
.soon strong { color: var(--ink); font-size: 1.125rem; font-weight: 600; }
.soon img { border-radius: 22.4%; box-shadow: 0 4px 10px rgb(34 34 36 / .18); }

/* The folded iPhone Duo: flat hinge down the left, big round corners on the right. */
.duo {
  position: relative;
  display: block;
  background: linear-gradient(135deg, #8d8e93, #4c4d52 45%, #2f3034);
  padding: 1.3%;
  border-radius: 1.6% 13.5% 13.5% 1.6% / 1.1% 9.4% 9.4% 1.1%;
  box-shadow: 0 22px 46px rgb(34 34 36 / .32);
}
.duo img { width: 100%; background: #000; box-shadow: 0 0 0 2px #000; border-radius: 1.2% 13% 13% 1.2% / .85% 9% 9% .85%; }
/* The two halves of the phone meet at the hinge. */
.duo::before { content: ""; position: absolute; left: -2.6%; top: 1%; bottom: 1%; width: 3.4%; background: linear-gradient(90deg, #3a3b3f, #6f7075 60%, #2f3034); border-radius: 4px 0 0 4px; }
.duo .key { position: absolute; background: #55565b; border-radius: 2px; }
.duo .key.a { top: -.55%; left: 46%; width: 13%; height: .7%; }
.duo .key.b { top: -.55%; left: 62%; width: 11%; height: .7%; }
.duo .key.c { right: -1%; top: 29%; width: 1.3%; height: 16%; }
.phones { position: relative; margin: 0; min-width: 0; padding-bottom: 8%; }
.phones .back { width: 60%; transform: rotate(-5deg); }
.phones .front { position: absolute; width: 68%; right: 2%; top: 13%; transform: rotate(3deg); }
.scrawl { position: relative; white-space: nowrap; }
.scrawl svg { position: absolute; left: 0; bottom: -.16em; width: 100%; height: .22em; overflow: visible; filter: url(#pencil); }
.scrawl path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.duofold { display: grid; gap: 34px; }
.duohead { display: flex; gap: 18px; align-items: center; }
.duohead .sk { width: 84px; height: 84px; }
.duohead .eyebrow { margin-bottom: 6px; }
.duolist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.duolist p { color: var(--soft); font-size: 1rem; line-height: 1.45; margin-top: 8px; }
.fine { font-size: .875rem; opacity: .6; margin-top: 10px; }
.foot .small a { text-decoration: underline; }

.foldrow { display: grid; gap: 36px; }
.foldhead { display: grid; gap: 12px; max-width: 38em; }
.folds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 44px); }
.folds li { position: relative; display: grid; gap: 8px; min-width: 0; align-content: start; }
.folds .duo { width: 100%; margin-bottom: 10px; }
.folds p { color: var(--soft); font-size: 1rem; }
.withpencil { position: relative; min-width: 0; }
.pencil { position: absolute; height: auto; filter: drop-shadow(10px 14px 10px rgb(34 34 36 / .3)); pointer-events: none; }
.heropen { width: 22px; left: 2%; top: -2%; transform: rotate(-20deg); }
.rowpen { width: 18px; right: 6%; top: -2%; transform: rotate(20deg); }
.storypen { width: 18px; right: -4%; top: 2%; transform: rotate(20deg); }

.band.paper {
  background-color: var(--sheet);
  background-image: radial-gradient(circle, rgb(110 100 84 / .28) 1px, transparent 1.2px);
  background-size: 24px 24px;
  padding-block: clamp(56px, 8vw, 96px);
}
.features { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 36px; }
.features li { display: flex; gap: 14px; min-width: 0; }
.features p { font-size: 1rem; line-height: 1.45; color: var(--soft); margin-top: 4px; }

.story { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 7vw, 88px); align-items: center; }
.story > div { display: grid; gap: 16px; min-width: 0; max-width: 34em; }
.story .sk { width: 72px; height: 72px; }

.band.dark { background: var(--graphite); color: var(--cream); padding-block: clamp(56px, 8vw, 96px); }
.dark p { color: rgb(247 240 227 / .82); }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.plan { background: var(--sheet); border-radius: 0 28px 28px 0; padding: 32px; min-width: 0; }
.plan.plus { background: var(--graphite); color: var(--cream); }
.plan.plus .sk .ink { stroke: var(--cream); }
.plan.plus .sk .red { stroke: #f07a60; }
.plan h3 { font-size: 1.625rem; margin-bottom: 16px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iconlist li { display: flex; align-items: center; gap: 14px; }
.iconlist .sk { width: 42px; height: 42px; }

.promise { display: flex; gap: 28px; align-items: center; }
.promise .sk { width: 96px; height: 96px; }
.promise p { margin-top: 12px; color: var(--soft); max-width: 36em; }

.doc { max-width: 760px; display: grid; gap: 14px; }
.doc h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); }
.doc h2 { font-size: 1.5rem; margin-top: 18px; }
.doc ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.meta { color: var(--soft); font-size: 1rem; }
.faq { margin-top: 18px; display: grid; }
details { border-top: 1px solid rgb(34 34 36 / .16); padding-block: 14px; }
details:last-child { border-bottom: 1px solid rgb(34 34 36 / .16); }
summary { cursor: pointer; font: 700 1.1875rem var(--serif); }
details p { margin-top: 10px; color: var(--soft); }

.foot { background: var(--graphite); color: var(--cream); padding-block: 40px; }
.footgrid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot .tag { font: 700 1.375rem var(--serif); }
.foot .small { font-size: 1rem; opacity: .75; margin-top: 4px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: var(--cream); font-size: 1rem; }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .phones { max-width: 460px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .duolist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story .duo { max-width: 280px; }
}
@media (max-width: 600px) {
  .features, .plans, .duolist { grid-template-columns: minmax(0, 1fr); }
  .folds { grid-template-columns: minmax(0, 300px); justify-content: center; gap: 28px; }
  .promise { flex-direction: column; align-items: flex-start; }
  .plan { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The opened Duo: rounded all round, with the fold down the middle. */
.duo.open { border-radius: 7.4% / 10.5%; padding: .9%; }
.duo.open img { border-radius: 6.9% / 9.8%; box-shadow: 0 0 0 2px #000; }
.duo.open::before { left: 50%; top: 0; bottom: 0; width: .3%; background: rgb(0 0 0 / .16); border-radius: 0; z-index: 1; }
.duo.open .key { display: none; }
.phones { aspect-ratio: 1 / .92; padding-bottom: 0; }
.phones .open.back { width: 100%; transform: rotate(-2deg); }
.phones .front { width: 38%; left: -4%; right: auto; top: 37%; transform: rotate(-5deg); }
.heropen { left: auto; right: 2%; top: -6%; transform: rotate(16deg); }
.openrow { display: grid; gap: 36px; }
.openrow .foldhead .lead { color: rgb(247 240 227 / .82); }
.openrow .duo { max-width: 900px; width: 100%; justify-self: center; }

/* A small working notebook. */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 7vw, 88px); align-items: center; }
.demostage { min-width: 0; }
.demophone { width: 100%; }
.screen { position: relative; container-type: inline-size; aspect-ratio: 699 / 1017; overflow: hidden; background: #000; border-radius: 1.2% 12.5% 12.5% 1.2% / .85% 8.7% 8.7% .85%; perspective: 1400px; }
.sheet { position: absolute; inset: 0; background-color: #fbf7ed; }
.sheet.dots { background-image: radial-gradient(circle, rgb(110 100 84 / .5) 1px, transparent 1.3px); background-size: 6.6% 4.54%; }
.sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.printed { position: absolute; left: 0; width: 100%; top: 8.9%; pointer-events: none; font: 600 2.1cqw/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8d8779; }
.printed .row { height: 5.2cqw; display: flex; justify-content: flex-end; padding: .8cqw 18.9% 0 0; border-bottom: 1px solid rgb(110 100 84 / .22); }
.printed .row.start { box-shadow: 0 -1px 0 rgb(110 100 84 / .6); }
.printed .frame { aspect-ratio: 16 / 6.4; margin-left: 2.6%; margin-right: 2.6%; border: 1px solid rgb(110 100 84 / .65); border-radius: 1cqw; margin-top: 4cqw; }
.printed .frame:first-child { margin-top: 0; }
.cam { position: absolute; width: 8%; aspect-ratio: 1; top: 4.7%; right: 6.3%; border-radius: 50%; background: #000; z-index: 3; }
.demorail, .demobar { position: absolute; z-index: 1; display: flex; background: rgb(251 247 237 / .86); box-shadow: 0 0 0 1px rgb(110 100 84 / .22), 0 2cqw 5cqw rgb(34 34 36 / .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.demorail { right: 4.6%; top: 16%; width: 11.4cqw; flex-direction: column; border-radius: 6cqw; }
.demorail button { aspect-ratio: 1; }
.demorail .aa { font: 500 5cqw var(--sans); }
.demotexts { position: absolute; inset: 0; pointer-events: none; }
.demotext { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; max-width: 76%; }
.demotext .words { min-width: 3em; min-height: 1.3em; padding: 1.5cqw 2.5cqw; font: 400 4.6cqw/1.3 var(--serif); color: var(--ink); outline: none; white-space: pre-wrap; }
.demotext .words[contenteditable="plaintext-only"] { cursor: text; box-shadow: inset 0 0 0 1px #d8412f; border-radius: 2cqw; }
.demotext.on .words { outline: 1.5px dashed #d8412f; border-radius: 2cqw; }
.demotext .knob { display: none; position: absolute; left: 50%; top: -11cqw; width: 8cqw; height: 8cqw; margin-left: -4cqw; border-radius: 50%; background: #d8412f; cursor: grab; }
.demotext .knob::after { content: "\21BB"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 4.6cqw var(--sans); font-style: normal; }
.demotext.on .knob { display: block; }
.demobar { left: 5.5%; right: 5.5%; bottom: 3.8%; height: 11.4cqw; border-radius: 6cqw; padding: 0 1.5cqw; justify-content: space-between; }
.demorail button, .demobar button { flex: 1; min-width: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 50%; }
.demorail svg, .demobar svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demobar button.on { color: #d8412f; }
.demobar button:disabled { opacity: .3; cursor: default; }
.demobar .well i { display: block; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; box-shadow: 0 0 0 .5cqw #fbf7ed, 0 0 0 1.1cqw #8d8779; }
.demobar .well[aria-expanded="true"] i { box-shadow: 0 0 0 .5cqw #fbf7ed, 0 0 0 1.1cqw #d8412f; }
.demorail button:focus-visible, .demobar button:focus-visible, .demopop button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.demopop { position: absolute; z-index: 2; background: #fffdf7; border-radius: 6cqw; box-shadow: 0 0 0 1px rgb(110 100 84 / .16), 0 4cqw 10cqw rgb(34 34 36 / .22); }
.demopop[hidden] { display: none; }
.demomenu { right: 18%; top: 16%; width: 48cqw; padding: 2cqw; display: grid; }
.demomenu button { font: 500 4.4cqw var(--sans); color: var(--ink); text-align: left; background: none; border: 0; border-radius: 3cqw; padding: 0 3.5cqw; min-height: 11cqw; cursor: pointer; }
.demomenu button.on { color: #d8412f; font-weight: 600; }
.tin { left: 5.5%; right: 5.5%; bottom: 13%; padding: 2.5cqw; display: flex; flex-wrap: wrap; gap: 2cqw; justify-content: center; }
.tin button, .tin label { width: 8.6cqw; height: 8.6cqw; padding: 0; border: 1px solid rgb(34 34 36 / .2); border-radius: 50%; cursor: pointer; background: var(--c); }
.tin button.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.tin label { position: relative; overflow: hidden; background: conic-gradient(red, orange, yellow, green, cyan, blue, purple, red); }
.tin input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.democover { position: absolute; inset: 0; z-index: 4; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: left center; transition: transform .8s cubic-bezier(.42, .02, .2, 1), opacity .25s .55s; }
.democover img { width: 100%; height: 100%; }
.democover:hover { transform: rotateY(-7deg); }
.democover:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }
[data-state="open"] .democover { transform: rotateY(-115deg); opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .demo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .demostage { width: 100%; max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) { .democover { transition: opacity .2s; } .democover:hover { transform: none; } }

.herotext .lead { margin-top: 14px; }
.openrow .duo.open::before { display: none; }

.note { display: grid; gap: 16px; max-width: 40em; }
.note p:not(.eyebrow) { font-size: 1.125rem; }
.note .sign { font-family: var(--serif); font-style: italic; font-size: 1.375rem; }