/* Philocalist (the app's typeface), subset to Latin. Persian sample text uses Noto Naskh Arabic (SIL OFL), a naskh face like the app's Adobe Arabic, subset to the Persian letters; Vazirmatn (OFL) stays as the fallback. All self-hosted. */
@font-face{font-family:'Philocalist';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/philocalist-latin.woff2) format('woff2')}
/* size-adjust 90 %: matches the app's frame (frames/list.png), where Persian ink is about 0.85x the height of the English ink in the same list. Measured with canvas ink boxes: 0.845x at 90 %. */
@font-face{font-family:'Noto Naskh Fit';font-style:normal;font-weight:400;font-display:swap;size-adjust:90%;src:url(fonts/noto-naskh-arabic-fa.woff2) format('woff2');unicode-range:U+0020,U+00A0,U+00AB,U+00BB,U+060C,U+061B,U+061F,U+0621-0655,U+0660-0669,U+0670,U+067E,U+0686,U+0698,U+06A9,U+06AF,U+06BE,U+06C0-06C1,U+06C3,U+06CC,U+06D2,U+06D5,U+06F0-06F9,U+200C-200F}
@font-face{font-family:'Vazirmatn';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/vazirmatn-arabic-wght-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* A system serif sized to sit close to Philocalist while it loads, so nothing jumps. */
@font-face{font-family:'Philocalist Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:94%;ascent-override:96%;descent-override:30%;line-gap-override:0%}

/* Doly landing page. One paper theme, like the app: no dark version.
   Tokens come from the app (Paper.swift). Hierarchy is built with size, colour, space and the orange strike:
   Philocalist has one weight and no italic, so nothing here is bold or slanted. */
:root {
  color-scheme: light;
  --paper: #F4F0EA;          /* app background */
  --paper-2: #EDE7DD;        /* a step darker: plates, menu bar */
  --card: #FBF8F3;           /* a step lighter: cards, notes */
  --ink: #4E473D;            /* app text */
  --faint: #B5B0A9;          /* app dotted line, off switch, empty ring (graphics only) */
  --orange: #F23E00;         /* app accent (graphics, large text) */
  /* The same colours, darkened until small text reads at 4.5:1 on paper (see 03-design.md, contrast table). */
  --faint-ink: #6A645C;      /* placeholder, "No items yet", Back, captions */
  --orange-ink: #B82E00;     /* ticked titles, small orange labels */
  --orange-deep: #C73000;    /* button fill under light text */
  --icon-faint: #8C867E;     /* faint icons that must still show (3:1) */
  --hover: rgba(78, 71, 61, .06);
  --line: rgba(78, 71, 61, .14);
  --font: 'Philocalist', 'Philocalist Fallback', 'Noto Naskh Fit', 'Vazirmatn', Georgia, 'Times New Roman', serif;
  --fa: 'Noto Naskh Fit', 'Vazirmatn', 'Philocalist', Tahoma, serif;
  /* Springs from Motion.swift; replaced by exact linear() curves in app.js where the browser supports them. */
  --spring-list: cubic-bezier(.3, 1.25, .5, 1);
  --spring-page: cubic-bezier(.3, 1.12, .5, 1);
  --spring-ctl: cubic-bezier(.3, 1.6, .5, 1);
  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --dur-list: .46s; --dur-page: .4s; --dur-ctl: .42s;
  --hdr: 64px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;
  --hit: 13px;               /* extra touch area around small controls (5px with a mouse) */
  --hitf: 12px;
  --rowh: 44px;
  /* The app's paper (owner's prototype, PaperGrain and PaperFibers): two faint noise layers drawn by the browser, no image shipped. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .29 0 0 0 0 .2 0 0 0 -1.1 .72'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='.3'/%3E%3C/svg%3E");
  --fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='400'%3E%3Cfilter id='f' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 -2.2 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29' opacity='.07'/%3E%3C/svg%3E");
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) { :root { --hit: 5px; --hitf: 4px; --rowh: 42px; } }
/* The popover is scaled down on narrow phones (zoom), so its touch areas are made bigger to stay 44px after scaling. */
@media (max-width: 371px) { :root { --hit: 15.5px; --hitf: 14.5px; --rowh: 49px; } }
@media (max-width: 339px) { :root { --hit: 17px; --hitf: 16px; --rowh: 52px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.125rem/1.55 var(--font); letter-spacing: .03em; font-synthesis: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  background-image: var(--grain), var(--fibres);
}
h1, h2, h3, h4, b, strong, summary, th { font-weight: 400; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
/* Persian runs: -4 % letter spacing as in the app (Paper.swift); spaces between words keep their width, so word-spacing gives the 4 % back. */
[lang="fa"] { font-family: var(--fa); letter-spacing: -.04em; word-spacing: .04em; }
.ico { width: 1em; height: 1em; fill: none; display: block; flex: none; }
:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 10px; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* The dotted rule of the app: one dot on, two off. */
.dots { background: repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 3px); height: 1px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 28px;
  background: var(--orange-deep); color: #FFF8F1; border: 1px solid transparent; border-radius: 999px; text-decoration: none;
  font-size: 1.2rem; line-height: 1.2; transition: transform var(--dur-ctl) var(--spring-ctl), background-color .14s ease-out, box-shadow .2s;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 18px -8px rgba(199, 48, 0, .55);
}
.btn:hover { background: var(--orange-ink); transform: translateY(-1px); }
.btn:active { transform: scale(.95); transition-duration: .14s; }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(78, 71, 61, .38); box-shadow: none; }
.btn-ghost:hover { background: var(--hover); }
.btn-sm { min-height: 44px; padding: 8px 18px; font-size: 1rem; }
.btn-lg { min-height: 64px; padding: 16px 40px; font-size: 1.5rem; }
/* Before release: "Coming soon" sits where the Download button will be. A dashed stamp, not a button. */
.btn-soon, .btn-soon:hover, .btn-soon:active { background: transparent; color: var(--orange-ink); border: 1.5px dashed currentColor; box-shadow: none; transform: none; cursor: default; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 3px); }
.top-in { display: flex; align-items: center; gap: 16px; min-height: var(--hdr); padding: 8px 16px; max-width: 1360px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; font-size: 1.6rem; line-height: 1; }
.brand-mark { width: 28px; height: 28px; color: var(--orange); display: block; }
.brand-mark svg { width: 100%; height: 100%; display: block; }
.top-nav { display: none; margin-inline: auto; gap: 8px; }
.top-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; border-radius: 99px; transition: background-color .14s ease-out; }
.top-nav a:hover { background: var(--hover); }
.top-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
@media (min-width: 960px) { .top-nav { display: flex; } .top-end { margin-inline-start: 0; } }
.snd {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px; font-size: 1rem; line-height: 1; transition: transform var(--dur-ctl) var(--spring-ctl), background-color .14s ease-out;
}
.snd:hover { background: #E7E0D4; }
.snd:active { transform: scale(.94); }
.snd .ico { width: 20px; height: 20px; }
.snd[data-state="off"] .s-waves, .snd:not([data-state="off"]) .s-slash { display: none; }
.snd[data-state="off"] { color: var(--faint-ink); }
.snd.pop-in .ico { animation: ctl-pop .4s var(--ease-out); }
@keyframes ctl-pop { 0% { transform: scale(1); } 25% { transform: scale(.78); } 100% { transform: scale(1); } }
.top .btn-sm { display: none; }
@media (min-width: 520px) { .top .btn-sm { display: inline-flex; } }

/* ---------- Page rhythm ---------- */
section { position: relative; padding: var(--s8) 0; scroll-margin-top: var(--hdr); }
@media (min-width: 900px) { section { padding: var(--s9) 0; } }
.sec-head { max-width: 760px; margin: 0 auto var(--s7); padding: 0 16px; text-align: center; }
.sec-head h2, .cta h2 { font-size: clamp(2.25rem, 7vw, 4rem); line-height: 1.02; letter-spacing: .005em; }
.sec-head p { margin-top: 16px; font-size: 1.25rem; color: var(--faint-ink); text-wrap: balance; }
h2 { text-wrap: balance; }

/* ---------- Hero ---------- */
.hero { min-height: min(calc(100svh - var(--hdr)), 900px); display: grid; place-items: center; padding: 56px 16px 88px; overflow-x: clip; }
.hero-in { position: relative; z-index: 2; text-align: center; max-width: 920px; }
.eyebrow { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; font-size: 1.05rem; color: var(--faint-ink); }
.mb-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: rgba(78, 71, 61, .13); color: var(--ink); font-size: 1rem; line-height: 1; box-shadow: 0 0 0 1px var(--line); }
.mb-chip .ico { width: 16px; height: 16px; } .mbc-n { display: inline-block; min-width: 2.2em; text-align: left; }
h1 { margin: 20px 0 22px; font-size: clamp(3.4rem, 14.5vw, 9rem); line-height: .93; letter-spacing: -.005em; }
.h1-a { display: block; }
.h1-b { display: inline-block; position: relative; padding: 0 .04em; }
.h1-b-t { color: var(--ink); animation: tint .5s .95s var(--ease-out) both; }
/* The pencil line on display type (headline and "leaves out" list): the app's wavy line, #F7B27A, rough-edged by the #pencil filter, stretched to the words.
   It is wiped on from the left (a clip that opens), so it needs no script and shows complete without one and under reduced motion. */
.pl { position: absolute; left: -4%; width: 108%; top: calc(54% - .2em); height: .4em; overflow: visible; pointer-events: none; filter: url(#pencil); }
.pl path { fill: none; stroke: #F7B27A; stroke-width: max(4px, .045em); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
[dir="rtl"] .pl { transform: scaleX(-1); }
.h1-line { animation: pl-wipe .8s .5s var(--ease-out) both; }
@keyframes pl-wipe { from { clip-path: inset(-60% 100% -60% -10%); } to { clip-path: inset(-60% -10% -60% -10%); } }
@keyframes tint { from { color: var(--ink); } to { color: var(--orange); } }
.h1-b-t { color: var(--orange); }
.hero-sub { max-width: 34ch; margin: 0 auto; font-size: clamp(1.2rem, 3.4vw, 1.5rem); line-height: 1.45; text-wrap: balance; }
.hero-act { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.hero-note { margin-top: 16px; font-size: 1rem; color: var(--faint-ink); }
.scroll-hint { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-size: .95rem; color: var(--faint-ink); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scroll-hint i { width: 1px; height: 22px; background: var(--faint); transform-origin: top; animation: tick-drop 1.4s 2s ease-in-out 3; }
@keyframes tick-drop { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-in > :not(h1), .h1-a { animation: rise .6s 0s var(--ease-out) both; }
  .scatter .obj { animation: land .9s .3s var(--ease-out) both; }
  .scatter .obj:nth-child(2n) { animation-delay: .45s; } .scatter .obj:nth-child(3n) { animation-delay: .6s; }
}
/* Text is never hidden while it enters: it only drifts 8 px into place, so the first screen reads at once. */
@keyframes rise { from { transform: translateY(8px); } to { transform: none; } }
@keyframes land { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }

/* Scattered objects: drawn in the app's palette. app.js moves them with scroll (--tx, --ty, --r). */
.scatter { position: absolute; inset: 0; pointer-events: none; overflow: clip; z-index: 1; }
.obj { position: absolute; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(calc(var(--rot0, 0deg) + var(--r, 0deg))); filter: drop-shadow(0 6px 10px rgba(78, 71, 61, .16)); will-change: transform; }
.note { position: relative; min-width: 128px; max-width: 176px; padding: 14px 16px 24px; background-color: var(--card); color: var(--ink); font-size: 1.05rem; line-height: 24px; text-align: left;
  background-image: repeating-linear-gradient(transparent 0 23px, rgba(78, 71, 61, .1) 23px 24px); background-position: 0 6px;
  clip-path: polygon(0 0, 100% 0, 100% 93%, 94% 100%, 87% 94%, 79% 100%, 70% 93%, 61% 100%, 51% 94%, 42% 100%, 31% 93%, 21% 100%, 10% 94%, 0 100%); }
.note-t { display: block; padding-left: 20px; position: relative; }
.note-t::before { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--faint); }
.note-t[lang="fa"] { padding-left: 0; padding-right: 20px; text-align: right; }
.note-t[lang="fa"]::before { left: auto; right: 0; }
.stamp { width: 84px; height: 84px; display: block; opacity: .92; }
.pencil { width: 190px; height: 24px; display: block; }
.coffee { width: 104px; height: 104px; display: block; }
.pol-card { width: 176px; height: 142px; padding: 9px 9px 0; background: #FBFAF7; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.pol-empty { display: block; width: 158px; height: 102px; background: #E9E4DA; }
/* Hero decorations live in a band above the eyebrow and a band below the buttons (and, on wide screens, in the side gutters),
   so they never sit on text. The hero keeps padding for the bands; the scroll motion only moves them further away. */
.hero { --band: 100px; padding-top: calc(var(--band) + 8px); padding-bottom: calc(var(--band) + 8px); }
.h-n1 { left: 3%; top: 14px; --rot0: -5deg; } .h-n2 { right: 3%; top: 14px; --rot0: 4deg; }
.h-n3 { left: 3%; bottom: 14px; --rot0: 3deg; } .h-n4 { right: 3%; bottom: 14px; --rot0: -4deg; }
.h-stamp, .h-pencil, .h-ring { display: none; }
.h-polaroid { right: 2%; top: 8px; --rot0: 6deg; } .h-polaroid .pol-card { transform: scale(.62); transform-origin: top right; }
.h-n2 { display: none; }
.h-n1 .note, .h-n3 .note, .h-n2 .note, .h-n4 .note { transform: scale(.88); transform-origin: top left; }
.scroll-hint { display: none; }
@media (min-width: 700px) {
  .hero { --band: 112px; }
  .h-n1 { left: 5%; top: 20px; } .h-n2 { right: 5%; top: 20px; } .h-n3 { left: 4%; bottom: 20px; } .h-n4 { right: 4%; bottom: 20px; }
  .h-n1 .note, .h-n2 .note, .h-n3 .note, .h-n4 .note { transform: none; }
  .h-n2 { display: block; } .h-polaroid { left: 31%; right: auto; top: 14px; --rot0: -7deg; } .h-polaroid .pol-card { transform: scale(.68); transform-origin: top center; } .h-stamp { display: block; right: 31%; top: 22px; } .h-stamp .stamp { width: 76px; height: 76px; }
  .scroll-hint { display: flex; }
}
@media (min-width: 900px) {
  .h-pencil { display: block; left: 19%; bottom: 40px; --rot0: -6deg; } .h-pencil .pencil { width: 190px; height: 24px; }
  .h-ring { display: block; right: 19%; bottom: 14px; }
}
/* A short window (a laptop on its side) keeps the first screen for the words: only the bottom band stays. */
@media (min-width: 700px) and (max-height: 700px) and (max-width: 1199px) {
  .hero { padding-top: 56px; }
  .h-n1, .h-n2, .h-polaroid, .h-stamp { display: none; }
}
@media (min-width: 1200px) {
  .hero { --band: 60px; padding-top: 56px; padding-bottom: 88px; }
  .h-n1 { left: 3%; top: 35%; } .h-n2 { right: 3%; top: 54%; } .h-n3 { left: 6%; bottom: 20%; } .h-n4 { right: 7%; bottom: 16%; }
  .h-pencil { left: 3%; bottom: 42%; } .h-stamp { right: auto; left: 7%; top: 5%; } .h-ring { right: 14%; bottom: 8%; }
  .note { font-size: 1.2rem; min-width: 150px; }
}
/* From 1140px the polaroid sits at the right shoulder of "Write it down." (the headline is at its full size from here up, so a fixed offset from the centre stays beside it), like the share picture. */
@media (min-width: 1140px) {
  .h-polaroid { left: calc(50% + 385px); right: auto; top: 22%; --rot0: 7deg; } .h-polaroid .pol-card { transform: scale(.92); transform-origin: top left; }
}
.stage-wrap { max-width: 1360px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .stage-wrap { padding-inline: 24px; } }
@media (min-width: 1000px) { .stage-wrap { padding-inline: 32px; } }
.stage {
  --px: 50%; scroll-margin-top: calc(var(--hdr) + 12px); position: relative; min-height: 560px; max-width: 880px; margin-inline: auto; border-radius: 24px; overflow: hidden; isolation: isolate; overflow: clip;
  background-color: #E9E2D6; background-image: var(--grain), var(--fibres);
  box-shadow: 0 0 0 1px var(--line), 0 36px 60px -34px rgba(78, 71, 61, .5);
}
@media (min-width: 1000px) { .stage { border-radius: 32px; min-height: 600px; } }
.menubar { position: absolute; top: 0; left: 0; right: 0; height: 32px; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(244, 240, 234, .97); border-bottom: 1px solid var(--line); font-size: .98rem; line-height: 1; }
.mb-left { display: none; gap: 16px; align-items: center; }
.mb-left i { display: block; width: 44px; height: 8px; border-radius: 4px; background: rgba(78, 71, 61, .2); }
.mb-left i:first-child { width: 28px; background: rgba(78, 71, 61, .32); }
.mb-right { display: flex; align-items: center; gap: 12px; margin-inline-start: auto; color: var(--ink); }
.mb-ico { width: 18px; height: 18px; } .mb-bat { width: 24px; }
.mb-clock { white-space: nowrap; }
.mb-item { position: absolute; left: var(--px); top: -6px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 12px; background: none; border: 0; color: var(--ink); z-index: 1; }
.mb-item::before { content: ""; position: absolute; inset: 9px 0; border-radius: 7px; background: rgba(78, 71, 61, .13); opacity: 0; transition: opacity .14s ease-out; }
.mb-item[aria-expanded="true"]::before { opacity: 1; }
.mb-item .ico { width: 18px; height: 18px; position: relative; }
.mb-count { position: relative; display: inline-block; min-width: 2.2em; text-align: left; }
@media (min-width: 700px) { .mb-left { display: flex; } .menubar { padding: 0 18px; } .mb-right { gap: 18px; } }
@media (max-width: 480px) { .mb-ico { display: none; } .mb-right { gap: 0; } }
.stage:not(:has(.pop-holder)) .menubar { opacity: .5; }

.pop-holder { position: relative; z-index: 6; padding: 52px 0 56px; display: flex; justify-content: center; pointer-events: none; }
.pop-holder > * { pointer-events: auto; }
@media (max-width: 371px) { .pop { zoom: .9; } }
@media (max-width: 339px) { .pop { zoom: .84; } }
.pop {
  position: relative; width: 340px; background-color: var(--paper); background-image: var(--grain), var(--fibres); border-radius: 20px; overflow: hidden; overflow: clip; font-size: 15px; line-height: 1.4; letter-spacing: .5px;
  box-shadow: 0 0 0 1px rgba(78, 71, 61, .12), 0 28px 50px -14px rgba(78, 71, 61, .55), 0 6px 14px rgba(78, 71, 61, .12);
  transform-origin: 50% 0; transition: opacity .2s ease-out, transform var(--dur-page) var(--spring-page), visibility .3s;
}
.pop[data-open="false"] { opacity: 0; transform: translateY(-10px) scale(.97); visibility: hidden; pointer-events: none; }
html:not(.js) .pop { display: none; }
.nojs { padding: 24px 0 0; text-align: center; position: relative; z-index: 6; }
.nojs img { margin: 0 auto 16px; border-radius: 20px; } .nojs p { background: var(--paper); margin: 0 16px 8px; padding: 6px 12px; border-radius: 10px; display: inline-block; }
.page { position: relative; }
.in-row { position: relative; display: flex; align-items: center; gap: 11px; height: var(--rowh); margin: 0 10px; padding: 0 10px; }
.in-row::after, .set-head::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 3px); }
.in-plus { width: 18px; height: 18px; color: var(--icon-faint); }
.draft, .edit { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 6px; margin: 0 0 0 -6px; outline: none; color: var(--ink); caret-color: var(--orange); font: 400 16px/22px var(--font); letter-spacing: .5px; border-radius: 0; }
.draft::placeholder { color: var(--faint-ink); opacity: 1; font-size: 15px; }
.draft:focus-visible { outline: none; border-radius: 0; box-shadow: 0 1px 0 0 var(--orange-deep); }
/* The scripted day types without focusing the field: a drawn caret follows the text (a hidden copy of it pushes the bar to the right place). */
.fake-caret { position: absolute; left: 39px; right: 10px; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; font: 400 16px/22px var(--font); letter-spacing: .5px; }
.fc-t { color: transparent; white-space: pre; }
.fc-bar { flex: none; width: 1.5px; height: 18px; margin-inline-start: 1px; background: var(--orange); }
.draft[data-scripted]:focus-visible { box-shadow: none; }
.edit:focus-visible { outline: none; border-radius: 0; box-shadow: 0 1px 0 0 var(--orange-deep); }
.send { width: 18px; height: 18px; box-sizing: content-box; padding: var(--hit); margin: calc(-1 * var(--hit)); background: none; border: 0; color: var(--orange); display: grid; place-items: center; transition: transform var(--dur-ctl) var(--spring-ctl); }
.send .ico { width: 18px; height: 18px; fill: currentColor; }
.send:active { transform: scale(.88); }
.send.enter { animation: send-in var(--dur-ctl) var(--spring-ctl); }
@keyframes send-in { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.list-wrap { padding: 0 10px 10px; }
.list { position: relative; padding-top: 12px; max-height: 360px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.list::-webkit-scrollbar { display: none; }
.row { position: relative; display: flex; align-items: center; min-height: var(--rowh); padding: 0 10px; border-radius: 10px; background: transparent; transition: background-color .14s ease-out; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: -2px; }
.row:hover, .row.is-hover, .row.is-editing, .row.is-lifted { background: var(--hover); }
.row:focus-visible { outline: 2px solid var(--orange-deep); border-radius: 10px; }
.row.is-lifted { box-shadow: 0 12px 24px -8px rgba(78, 71, 61, .45); background: #EBE5DB; z-index: 3; }
.chk { position: relative; flex: none; width: 18px; height: 18px; box-sizing: content-box; padding: var(--hit); margin: 0 calc(11px - var(--hit)) 0 calc(-1 * var(--hit)); background: none; border: 0; display: block; color: var(--orange); }
.chk::before { content: ""; position: absolute; inset: calc(var(--hit) - 5px); border-radius: 50%; background: rgba(78, 71, 61, .1); opacity: 0; transition: opacity .14s ease-out; }
.chk:hover::before { opacity: 1; }
.chk-svg { position: relative; width: 18px; height: 18px; display: block; overflow: visible; }
.chk-bg { fill: rgba(181, 176, 169, .1); transition: fill .14s ease-out; }
.chk-ring { fill: none; stroke: rgba(181, 176, 169, .7); stroke-width: 1; transition: stroke .14s ease-out; }
.chk-tick { fill: none; stroke: var(--orange); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset .28s ease-out .06s; }
.row:hover .chk-bg, .row.is-hover .chk-bg { fill: transparent; }
.row:hover .chk-ring, .row.is-hover .chk-ring, .row:focus-visible .chk-ring { stroke: var(--orange); }
.is-done .chk-bg { fill: rgba(242, 62, 0, .1); } .is-done .chk-ring { stroke: var(--orange); } .is-done .chk-svg { opacity: .8; } .is-done .chk-tick { stroke-dashoffset: 0; }
.ttl { flex: 1; min-width: 0; align-self: stretch; display: block; padding: 10px 6px 10px 0; background: none; border: 0; text-align: left; cursor: text; color: var(--ink); font-size: 16px; line-height: 22px; letter-spacing: .5px; }
@media (max-width: 767px), (pointer: coarse) { .ttl { padding-block: 11px; } }
.ttl-t { position: relative; display: inline-block; max-width: 100%; color: var(--ink); transition: color .5s cubic-bezier(.22, 1, .36, 1); overflow-wrap: anywhere; vertical-align: top; unicode-bidi: plaintext; }
.ttl-t[lang="fa"] { font-family: var(--fa); font-size: 16px; line-height: 22px; letter-spacing: -.04em; word-spacing: .04em; }
/* The pencil line (the app's PencilStrike, from the owner's prototype): one wavy path that app.js draws to the title's width, rough-edged by the #pencil filter. */
.ttl-line { position: absolute; left: -5px; top: calc(50% + 1px); width: calc(100% + 10px); height: 18px; margin-top: -9px; overflow: visible; pointer-events: none; filter: url(#pencil); }
.ttl-line path { fill: none; stroke: #F7B27A; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .28s cubic-bezier(.4, 0, .6, 1), opacity 0s .3s; }
.ttl-t[dir="rtl"] .ttl-line { transform: scaleX(-1); }
.is-done .ttl-t { color: var(--orange-ink); } .is-done .ttl-line path { stroke-dashoffset: 0; opacity: .95; transition: stroke-dashoffset .26s cubic-bezier(.4, 0, .6, 1), opacity 0s; }
.wraps .ttl-line { display: none; } .wraps.is-done .ttl-txt { text-decoration: line-through; text-decoration-color: #F7B27A; text-decoration-thickness: 2px; }
.edit { flex: 1; height: 28px; margin: 7px 6px 7px -6px; font-size: 16px; }
.edit.fa { font-family: var(--fa); font-size: 16px; letter-spacing: -.04em; word-spacing: .04em; }
.del { flex: none; width: 18px; height: 18px; box-sizing: content-box; padding: var(--hit); margin: 0 calc(-1 * var(--hit)) 0 calc(6px - var(--hit)); background: none; border: 0; color: var(--icon-faint); display: grid; place-items: center; opacity: 0; transform: translateX(4px); transition: opacity .14s ease-out, transform .14s ease-out, color .14s; }
.del .ico { width: 18px; height: 18px; fill: currentColor; transition: transform var(--dur-ctl) var(--spring-ctl); }
.row:hover .del, .row.is-hover .del, .row:focus-within .del { opacity: 1; transform: none; }
.row.is-editing .del { opacity: 0; pointer-events: none; }
.del:hover { color: var(--ink); } .del:hover .ico { transform: scale(1.1); } .del:active .ico { transform: scale(.88); }
@media (hover: none) { .row:not(.is-editing) .del { opacity: 1; transform: none; } }
.empty p { height: 15px; box-sizing: content-box; padding: 24px 0 12px; line-height: 15px; text-align: center; color: var(--faint-ink); }
.ghost { display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 10px; opacity: .5; }
.ghost i { width: 18px; height: 18px; border-radius: 50%; background: rgba(78, 71, 61, .2); flex: none; } .ghost b { width: 255px; max-width: 100%; height: 15px; border-radius: 2px; background: rgba(78, 71, 61, .2); }

/* The bottom of the list page, as in the app: gear and power together at the leading corner, faint until hovered, the polaroid at the trailing corner. */
.pfoot { --foot: 114px; position: relative; z-index: 2; height: var(--foot); pointer-events: none; }
.pop[data-photo="off"] .pfoot { --foot: 50px; }
.pfoot-btns { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 3; display: flex; align-items: flex-end; gap: 14px; }
@media (pointer: coarse) { .pfoot-btns { gap: 24px; } }
.pop[data-photo="off"] .pfoot-btns { justify-content: space-between; }
.fbtn { position: relative; width: 20px; height: 20px; box-sizing: content-box; padding: var(--hitf); margin: calc(-1 * var(--hitf)); background: none; border: 0; color: var(--icon-faint); display: grid; place-items: center; pointer-events: auto; transition: color .14s ease-out; }
.fbtn .ico { width: 20px; height: 20px; transition: transform var(--dur-ctl) var(--spring-ctl); }
.fbtn:hover, .fbtn:focus-visible { color: var(--ink); }
.fbtn:hover .ico { transform: scale(1.12); } .fbtn-gear:hover .ico { transform: rotate(60deg) scale(1.12); } .fbtn:active .ico { transform: scale(.88); }
/* The label above an icon (the app's HoverLabel): paper text on an ink chip, after the pointer has rested on the icon for 0.15 s. */
.ftip { position: absolute; left: var(--hitf); bottom: calc(100% - var(--hitf) + 8px); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 12px; line-height: 1.3; letter-spacing: .5px; white-space: nowrap; box-shadow: 0 1px 3px rgba(78, 71, 61, .18); opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity .14s ease-out, transform .14s ease-out; }
.pop[data-photo="off"] #power .ftip { left: auto; right: var(--hitf); }
@media (hover: hover) { .fbtn:hover .ftip { opacity: 1; transform: none; transition-delay: .15s; } }
.fbtn:focus-visible .ftip { opacity: 1; transform: none; }

.pol { position: absolute; right: 25px; bottom: 0; width: 176px; height: 152px; }
.pop[data-photo="off"] .pol { display: none; }
.pol-zone { position: absolute; left: 5px; width: 166px; bottom: 0; height: 60px; padding: 0; margin: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; pointer-events: auto; z-index: 2; -webkit-tap-highlight-color: transparent; }
.pol-zone:focus-visible { left: 0; width: 176px; bottom: 10px; height: 142px !important; outline: 2px solid var(--orange-deep); outline-offset: 3px; border-radius: 2px; }
.polaroid { position: absolute; left: 0; top: 10px; width: 176px; height: 142px; padding: 9px 9px 0; background: #FBFAF7; border-radius: 2px; transform-origin: 50% 0; box-shadow: 1px 6px 14px rgba(40, 30, 10, .3), 0 0 0 1px rgba(0, 0, 0, .05); will-change: transform; pointer-events: none; transform: translate3d(0, 152px, 0); opacity: 0; }
.pol-photo { position: relative; width: 158px; height: 102px; background: #E8E3D8; overflow: hidden; }
.pol-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(var(--ps, 1.07)); will-change: transform; }
.pol-img.dev { animation: develop 3s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes develop { 0% { filter: blur(8px) sepia(1) brightness(1.6) contrast(.55); opacity: .6; } 100% { filter: blur(0) sepia(0) brightness(1) contrast(1); opacity: 1; } }
.pol-empty-art { position: absolute; inset: 0; }
.pol[data-state="photo"] .pol-empty-art { display: none; }
.pol-plus { transform-box: fill-box; transform-origin: center; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.pol.is-up .pol-plus { transform: rotate(90deg) scale(1.1); }
.pol-glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 123px); opacity: 0; transition: opacity .5s ease-out; pointer-events: none; }
.pol.is-up .pol-glare { opacity: 1; }
.pol-menu { position: absolute; z-index: 12; min-width: 176px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px -10px rgba(78, 71, 61, .55), 0 2px 6px rgba(78, 71, 61, .12); }
.pol-menu button { display: block; width: 100%; min-height: 44px; padding: 0 14px; background: none; border: 0; border-radius: 8px; text-align: left; font-size: 15px; letter-spacing: .5px; color: var(--ink); }
.pol-menu button:hover, .pol-menu button:focus-visible { background: var(--hover); }
.pol-menu button:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: -2px; }

.set-head { position: relative; display: grid; grid-template-columns: 98px 1fr 1fr 16px; align-items: center; height: var(--rowh); margin: 0 10px; padding: 0 10px; }
.back { display: flex; align-items: center; min-height: max(44px, var(--rowh)); margin-block: -1px; padding: 0; background: none; border: 0; color: var(--faint-ink); font-size: 15px; letter-spacing: .5px; transition: color .14s; }
.back .ico { width: 18px; height: 18px; color: var(--icon-faint); transition: transform var(--dur-ctl) var(--spring-ctl); }
.back:hover { color: var(--ink); } .back:hover .ico { transform: translateX(-2px); }
.set-title { grid-column: 2; text-align: center; color: var(--ink); }
.set-list { padding: 12px 10px 0; }
.set-row { display: flex; align-items: center; gap: 8px; min-height: max(44px, var(--rowh)); padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background-color .14s ease-out; user-select: none; -webkit-user-select: none; outline-offset: -2px; }
.set-row:hover, .set-row.is-hover { background: var(--hover); }
.set-t { flex: 1; color: var(--ink); }
.set-keys { display: inline-flex; align-items: center; gap: 1px; vertical-align: -3px; margin-left: 2px; } .set-keys .ico { width: 15px; height: 15px; }
.set-lang { width: 100%; background: none; border: 0; text-align: left; font: inherit; letter-spacing: inherit; color: var(--ink); }
.set-val { display: inline-flex; align-items: center; gap: 4px; color: var(--faint-ink); } .set-val .ico { width: 18px; height: 18px; color: var(--icon-faint); }
.set-copy { margin: 10px 0 14px; text-align: center; font-size: 12px; line-height: 1.3; letter-spacing: .5px; color: var(--faint-ink); }
.sw { position: relative; flex: none; width: 44px; height: 20px; border-radius: 99px; background: var(--faint); transition: background-color .3s ease-out; }
.sw i { position: absolute; left: 2px; top: 2px; width: 26px; height: 16px; border-radius: 99px; background: #fff; box-shadow: 0 3px 18px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .12); transition: transform var(--dur-ctl) var(--spring-ctl); }
.set-row[aria-checked="true"] .sw { background: var(--orange); } .set-row[aria-checked="true"] .sw i { transform: translateX(14px); }

.stage-ctl { max-width: 880px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 18px 4px 0; min-height: 80px; }
.cap { flex: 1 1 280px; min-height: 1.6em; font-size: 1.25rem; color: var(--ink); }
.cap::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--orange); vertical-align: 2px; }
.cap:empty::before { display: none; }
.hint { flex: 1 1 100%; order: 3; color: var(--faint-ink); font-size: 1.05rem; }
.hint b { font-weight: 400; color: var(--ink); }
.stage-btns { display: flex; gap: 8px; }
.note-line, .photo-line, .photo-err { flex: 1 1 100%; color: var(--faint-ink); font-size: 1rem; } .note-line { order: 4; } .photo-line { order: 5; } .photo-err { order: 6; color: var(--orange-ink); }
.stage[data-photo="off"] ~ .stage-ctl .photo-line { display: none; }
.cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 22px; height: 26px; pointer-events: none; opacity: 0; will-change: transform; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.cursor.is-down { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.demo-pulse { animation: ctl-pop .5s var(--ease-out); }

/* ---------- Feature cards ---------- */
.cards { width: min(100% - 32px, 1240px); margin: 0 auto; display: grid; gap: 16px; grid-template-columns: 1fr; }
.card { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 24px; min-width: 0; }
.card-demo { position: relative; flex: 1; display: grid; place-items: center; min-height: 210px; padding: 20px 16px; background: var(--paper-2); border-bottom: 1px dotted rgba(78, 71, 61, .3); overflow: hidden; }
html:not(.js) .card-demo { display: none; }
.card-txt { padding: 20px 22px 24px; } .card h3 { font-size: 1.7rem; line-height: 1.1; margin-bottom: 8px; } .card p { color: var(--ink); font-size: 1.05rem; line-height: 1.5; }
.c7 { background: var(--ink); color: var(--paper); border-color: var(--ink); } .c7 .card-demo { background: #433D34; border-bottom-color: rgba(244, 240, 234, .3); } .c7 p { color: #EDE7DD; }
.c2 .card-demo, .c9 .card-demo { background: #F0E3D3; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } .c3, .c6, .c9, .c10 { grid-column: span 2; } }
@media (min-width: 640px) and (max-width: 999px) { .c3 .card-demo, .c6 .card-demo, .c9 .card-demo, .c10 .card-demo { min-height: 190px; } }
@media (min-width: 1000px) {
  .cards { grid-template-columns: repeat(6, 1fr); }
  .c1 { grid-column: span 2; } .c2 { grid-column: span 4; } .c3 { grid-column: span 3; } .c4 { grid-column: span 3; } .c5 { grid-column: span 2; } .c6 { grid-column: span 2; } .c7 { grid-column: span 2; } .c8 { grid-column: span 4; } .c9 { grid-column: span 2; } .c10 { grid-column: span 6; }
  .c2, .c8, .c10 { flex-direction: row; } .c2 .card-demo, .c8 .card-demo, .c10 .card-demo { flex: 1.15; border-bottom: 0; border-right: 1px dotted rgba(78, 71, 61, .3); } .c2 .card-txt, .c8 .card-txt, .c10 .card-txt { flex: 1; align-self: center; padding: 28px; }
  .c8 { flex-direction: row-reverse; } .c8 .card-demo { border-right: 0; border-left: 1px dotted rgba(78, 71, 61, .3); }
  .card h3 { font-size: 1.9rem; } .card-demo { min-height: 240px; }
}
/* the little paper plates inside the cards */
.mini { position: relative; width: min(100%, 300px); background: var(--paper); border-radius: 16px; overflow: hidden; overflow: clip; box-shadow: 0 0 0 1px rgba(78, 71, 61, .12), 0 14px 28px -14px rgba(78, 71, 61, .5); font-size: 15px; letter-spacing: .5px; }
.mini .row { cursor: default; touch-action: auto; } .mini .row:hover { background: transparent; } .mini .row.is-hover { background: var(--hover); }
.mini .chk, .mini .del, .mini .ttl { pointer-events: none; }
.mini .chk { padding: 5px; margin: 0 6px 0 -5px; } .mini .del { padding: 5px; margin: 0 -5px 0 1px; }
.mini .row { min-height: 42px; } .mini .ttl { padding-block: 10px; cursor: default; }
.mini .list { padding: 6px 0; max-height: none; overflow: visible; }
.mini .in-row { margin: 0 6px; height: 40px; }
.mini .in-row .draft-t { flex: 1; min-width: 0; font-size: 16px; line-height: 22px; white-space: nowrap; overflow: hidden; color: var(--ink); }
.mini .in-row .ph { color: var(--faint-ink); font-size: 15px; }
.caret { display: inline-block; width: 1px; height: 18px; background: var(--orange); vertical-align: -3px; margin-left: 1px; }
.mini-mb { width: min(100%, 300px); height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--paper); border-radius: 12px; box-shadow: 0 0 0 1px rgba(78, 71, 61, .12), 0 14px 28px -16px rgba(78, 71, 61, .5); font-size: 15px; letter-spacing: .5px; }
.mini-mb .mb-left { display: flex; gap: 10px; } .mini-mb .mb-left i { width: 28px; } .mini-mb .mb-left i + i { width: 18px; }
.mini-count { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; background: rgba(78, 71, 61, .13); font-size: 1.15rem; }
.mini-count .ico { width: 18px; height: 18px; } .mini-count .num { display: inline-block; min-width: 2.1em; }
.keycaps { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.keycap { display: grid; justify-items: center; gap: 6px; font-size: .85rem; color: var(--faint-ink); }
.keycap kbd { display: grid; place-items: center; min-width: 54px; height: 50px; padding: 0 12px; font: 400 1.3rem var(--font); color: var(--ink); background: var(--card); border-radius: 11px; border: 1px solid var(--line); border-bottom-width: 4px; box-shadow: 0 6px 10px -6px rgba(78, 71, 61, .4); transition: transform .14s ease-out, border-bottom-width .14s ease-out, background-color .14s; }
.keycap kbd .ico { width: 24px; height: 24px; }
.keycap.is-pressed kbd { transform: translateY(3px); border-bottom-width: 1px; background: #F6D8C8; }
.keycap.is-pressed { color: var(--orange-ink); }
.c7 .keycap { color: #D8D1C5; } .c7 .keycap.is-pressed { color: #FFD9C8; } .c7 .keycap kbd { border-color: rgba(0, 0, 0, .25); }
.keys-row { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.keys-row .keycap kbd { min-width: 64px; height: 38px; font-size: 1.05rem; border-bottom-width: 3px; }
.mini-set { padding: 8px 10px 10px; } .mini-set .set-row { min-height: 40px; padding: 6px 10px; } .mini-set .set-head { height: 36px; margin: 0; }
.mini-set .back { min-height: 36px; margin-block: 0; pointer-events: none; }
.sil { display: grid; gap: 8px; padding: 14px; } .sil i { display: block; height: 10px; border-radius: 5px; background: rgba(78, 71, 61, .16); } .sil i:first-child { width: 60%; height: 12px; background: rgba(242, 62, 0, .35); }
.pop-flash { position: relative; }
.mini-card-in { opacity: 1; }

/* ---------- Leaves out ---------- */
.leaves { text-align: center; }
.leave-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1em .8em; width: min(100% - 32px, 1100px); margin: 0 auto 40px; font-size: clamp(2.3rem, 8vw, 5rem); line-height: 1.12; }
.leave-list li:nth-child(3n + 2) { font-size: .78em; } .leave-list li:nth-child(4n + 1) { font-size: 1.12em; }
.strike { position: relative; display: inline-block; color: var(--faint-ink); padding: 0 .04em; }
.leave-list.arm .strike .pl { clip-path: inset(-60% 100% -60% -10%); }
.leave-list.in .strike .pl { clip-path: inset(-60% -10% -60% -10%); transition: clip-path .55s cubic-bezier(.3, .7, .2, 1); transition-delay: calc(var(--i) * .36s); }
.leave-close { font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.2; max-width: 22ch; margin: 0 auto; }
.leave-mac { margin: 20px auto 0; max-width: 46ch; color: var(--faint-ink); }

/* ---------- FAQ ---------- */
.qas { width: min(100% - 32px, 800px); margin: 0 auto; border-bottom: 1px dotted rgba(78, 71, 61, .45); }
.qa { border-top: 1px dotted rgba(78, 71, 61, .45); }
.qa summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 48px 14px 0; font-size: clamp(1.25rem, 3.4vw, 1.6rem); line-height: 1.25; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before, .qa summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 1.5px; margin-top: -1px; background: var(--orange); border-radius: 2px; transition: transform var(--dur-ctl) var(--spring-ctl); }
.qa summary::after { transform: rotate(90deg); } .qa[open] summary::after { transform: rotate(0); }
.qa p { padding: 0 0 22px; max-width: 60ch; color: var(--ink); }

/* ---------- Closing call to action ---------- */
.cta { text-align: center; padding: var(--s9) 16px 120px; overflow-x: clip; }
.cta-in { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.cta h2 { font-size: clamp(2.6rem, 9.5vw, 6rem); line-height: .98; } .cta-in > p:not(.hero-note):not(.cta-try) { margin: 20px 0 32px; font-size: 1.4rem; }
.cta-try { margin-top: 20px; } .cta-try a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.scatter-cta { overflow: clip; }
.c-n1 { left: 4%; top: 6%; --rot0: -6deg; } .c-n2 { right: 4%; bottom: 6%; --rot0: 5deg; } .c-stamp { right: 10%; top: 4%; --rot0: 10deg; } .c-pencil { left: 6%; bottom: 8%; --rot0: 10deg; }
.c-ring { display: none; } .c-polaroid { display: none; }
.c-n1 .note, .c-n2 .note { transform: scale(.88); transform-origin: top left; } .c-stamp .stamp { width: 56px; height: 56px; } .c-pencil .pencil { width: 140px; height: 18px; }
@media (min-width: 700px) { .c-n1 { left: 8%; top: 22%; } .c-n2 { right: 8%; bottom: 22%; } .c-stamp { right: 16%; top: 12%; } .c-pencil { left: 14%; bottom: 14%; } .c-ring { display: block; right: 22%; bottom: 8%; } .c-polaroid { display: block; left: 22%; top: 3%; --rot0: -8deg; } .c-polaroid .pol-card { transform: scale(.6); transform-origin: top left; }
  .c-n1 .note, .c-n2 .note { transform: none; } .c-stamp .stamp { width: 76px; height: 76px; } .c-pencil .pencil { width: 190px; height: 24px; } }
/* Same idea as the hero: between phone and desktop the objects sit in a band above and below the words. */
@media (min-width: 480px) and (max-width: 1099px) {
  .cta { padding-top: calc(var(--s9) + 40px); padding-bottom: 150px; }
  .c-n1 { left: 5%; top: 18px; } .c-n2 { right: 5%; bottom: 18px; } .c-stamp { right: 12%; top: 22px; } .c-pencil { left: 12%; bottom: 24px; }
  .c-polaroid { left: 31%; top: 24px; } .c-ring { right: 30%; bottom: 20px; }
}
@media (min-width: 1100px) { .c-n1 { left: 12%; } .c-n2 { right: 12%; } .c-polaroid { left: 24%; top: 2%; } }

/* ---------- Footer, 404 ---------- */
.foot { position: relative; padding: 40px 0 56px; color: var(--faint-ink); font-size: 1rem; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 3px); }
.foot-in { width: min(100% - 32px, 1160px); margin: 0 auto; display: grid; gap: 10px; text-align: center; justify-items: center; }
.foot-line { color: var(--ink); font-size: 1.25rem; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; } .foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.nf { min-height: 70svh; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 80px 16px; text-align: center; }
.nf h1 { font-size: clamp(3rem, 12vw, 7rem); margin: 0; }

/* ---------- Scroll reveals (only where motion is welcome and a script runs) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(22px); }
  html.js .rv.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0s); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .scroll-hint i { display: none; }
}

/* ---------- Small note near the sound switch ---------- */
.snd-note { position: fixed; z-index: 40; top: calc(var(--hdr) + 8px); right: 16px; max-width: min(280px, calc(100vw - 32px)); padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 12px; font-size: 1rem; line-height: 1.35; box-shadow: 0 12px 24px -10px rgba(78, 71, 61, .6); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s ease-out, transform var(--dur-ctl) var(--spring-ctl); }
.snd-note.show { opacity: 1; transform: none; }

.stackc { display: grid; gap: 14px; justify-items: center; width: 100%; } .stackc > .mini, .stackc > .mini-mb { width: min(100%, 300px); }
.mini-set .set-head::after { display: none; }

/* ---------- Card demos: the language row and the polaroid page (cards 8 and 10) ---------- */
.mini-lang { padding: 6px 10px 0; }
.set-val .lv { min-width: 4.2em; text-align: end; } .set-val .lv[lang="fa"], .mini-lang .set-t[lang="fa"] { font-family: var(--fa); letter-spacing: -.04em; }
/* The mini list laid out right to left (Persian): the checkbox and the trash can swap sides, the same way the app mirrors its list. */
.mini[dir="rtl"] .ttl { text-align: right; padding: 10px 0 10px 6px; } .mini[dir="rtl"] .chk { margin: 0 -5px 0 6px; } .mini[dir="rtl"] .del { margin: 0 1px 0 -5px; } .mini-lang .set-row { cursor: default; min-height: 40px; }
.mini-polpage { position: relative; height: 210px; }
.mini-polpage .sil { position: absolute; left: 16px; top: 14px; width: 130px; padding: 0; }
.mfoot { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 14px; color: var(--icon-faint); } .mfoot .ico { width: 20px; height: 20px; }
.mini-polpage .pol { right: 20px; }