/* 4olio site: one composition notebook on a desk (apps/Folio/DESIGN.md).
   No web fonts, no scripts, no external requests. Pages and cards stay paper-coloured; only the desk follows Dark Mode.
   The notebook demo and the fold animation are CSS only: radio buttons + :has() for the demo, keyframes for the fold. */

:root {
  --paper: #F6F2E6;
  --card: #FFFDF7;
  --rule: rgba(153, 189, 217, 0.85);   /* #99BDD9 pale blue rules */
  --margin: #E1717E;                     /* pink-red margin line */
  --ink: #1E3A8A;                        /* ballpoint blue */
  --ink-black: #1F1F23;
  --kraft: #C6A47B;
  --lcd: #FF7A29;
  --highlight: #FEEC4A;
  --tape: rgba(233, 221, 184, 0.92);     /* masking tape */
  --dymo-red: #B3261E;
  --dymo-blue: #1F4FA8;
  --dymo-black: #1F1F23;
  --dymo-green: #2F6B3A;
  --desk: #D5CFC4;                       /* pale laminate */
  --desk-ink: #1F1F23;
  --desk-soft: #45423B;
  --desk-glow: rgba(255, 255, 255, 0.42);
  --line: 1.75rem;                       /* rule spacing = body line height */
  --head: calc(var(--line) * 3);         /* blank header band above the first rule */
  --marginx: 2.75rem;
  --hand: "Bradley Hand", "Bradley Hand ITC", "Noteworthy", "Marker Felt", "Segoe Print", "Comic Neue", cursive;
  --type: "American Typewriter", "Courier New", Courier, monospace;
  --label: "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.55, .06, .25, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root { --desk: #1E1D1F; --desk-ink: #EDEAE2; --desk-soft: #C2BDB2; --desk-glow: rgba(255, 255, 255, 0.07); }
  .why .dymo.black { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2px 4px rgba(0, 0, 0, 0.5); }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--desk);
  color: var(--desk-ink);
  font: 1.0625rem/var(--line) var(--body);
  overflow-x: hidden;
}

img { max-width: 100%; }

.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Skip link */
.skip {
  position: absolute; left: -999px; top: 0.5rem;
  background: var(--paper); color: var(--ink); padding: 0.75rem 1rem; z-index: 20;
}
.skip:focus { left: 0.5rem; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--paper);
}

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

/* ---------- The cover: marble board, cloth spine, white label ---------- */
.cover {
  position: relative;
  background: #E5E1D6 url("img/marble.svg") center / cover;
  padding: 2rem 1rem 2rem 3.5rem;
  border-bottom: 6px solid #121212;
}
.cover::before {              /* black cloth spine tape */
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 1.75rem;
  background: linear-gradient(90deg, #0A0A0A, #1A1A1A 70%, #0F0F0F);
}
.label {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  background: #F5F1E6;
  color: var(--ink-black);
  border: 3px double #3B3B3B;
  border-radius: 0.6rem;
  padding: 0.75rem 1.25rem 0.9rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.label .field {
  display: flex; align-items: baseline; gap: 0.75rem;
  border-bottom: 1px solid #8A8A8A;
  padding: 0.15rem 0;
}
.label .field + .field { margin-top: 0.25rem; }
.label .key {
  font: 600 0.7rem/1 var(--type);
  letter-spacing: 0.08em;
  min-width: 4.75rem;
}
.label .value { font: 700 1.6rem/1.35 var(--hand); color: var(--ink); }
.label .value.small { font-size: 1.15rem; }
.label a { text-decoration: none; display: inline-block; min-height: 44px; }

nav.tabs { max-width: 46rem; margin: 0 auto; padding: 0.75rem 1rem 0; }
nav.tabs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
nav.tabs a {
  display: inline-flex; align-items: center;
  font: 600 0.95rem/1 var(--type);
  color: var(--ink-black);
  background: var(--kraft);
  padding: 0 1rem;
  border-radius: 0.35rem 0.35rem 0 0;
  text-decoration: none;
  min-height: 44px;                 /* touch target */
}
nav.tabs a[aria-current="page"] { background: var(--paper); color: var(--ink); }
.home nav.tabs { max-width: 74rem; }

/* ---------- The page: wide-ruled paper ---------- */
.page {
  position: relative;
  max-width: 46rem;
  margin: 0 auto 2rem;
  color: var(--ink-black);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--line) - 1px),
      var(--rule) calc(var(--line) - 1px), var(--rule) var(--line))
    0 var(--head) / 100% calc(100% - var(--head)) no-repeat,
    var(--paper);
  padding: var(--head) clamp(1rem, 4vw, 2.5rem) calc(var(--line) * 2) calc(var(--marginx) + 1rem);
  box-shadow: 0 1px 0 #E3DDCC, 0 3px 0 #C9C1AC, 0 10px 24px rgba(0, 0, 0, 0.25);
  cursor: url("img/cursor-pen.png") 7 25, auto;
  cursor: -webkit-image-set(url("img/cursor-pen.png") 1x, url("img/cursor-pen@2x.png") 2x) 7 25, auto;
  cursor: image-set(url("img/cursor-pen.png") 1x, url("img/cursor-pen@2x.png") 2x) 7 25, auto;
}
.page::before {           /* the margin line */
  content: "";
  position: absolute; top: 0; bottom: 0; left: var(--marginx); width: 2px;
  background: var(--margin); opacity: 0.85;
}
.page a, .page label, .page summary { cursor: pointer; }

h1, h2, h3 { color: var(--ink); font-family: var(--hand); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: 2.1rem; line-height: calc(var(--line) * 2); margin-top: calc(var(--line) * -2); }
h2 { font-size: 1.6rem; line-height: calc(var(--line) * 2); margin-top: var(--line); }
h3 { font-size: 1.25rem; line-height: var(--line); margin-top: var(--line); }
p, ul, ol, dl { margin: 0 0 var(--line); }
ul, ol { padding-left: 1.25rem; }
dt { font-weight: 700; }
dd { margin: 0 0 calc(var(--line) / 2) 0; }
strong { font-weight: 700; }

.lede { font-size: 1.15rem; }
.typed { font-family: var(--type); }
.small { font-size: 0.9rem; }

mark {
  background: linear-gradient(transparent 15%, rgba(254, 236, 74, 0.85) 15%, rgba(254, 236, 74, 0.85) 92%, transparent 92%);
  color: inherit;
  padding: 0 0.1em;
}

/* Masking-tape note: an index card stuck on the page */
.note {
  position: relative;
  background: var(--card);
  border: 1px solid #E6E0CF;
  padding: var(--line) 1rem calc(var(--line) / 2);
  margin: calc(var(--line) * 1.5) 0 var(--line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: rotate(-0.6deg);
}
.note::before, .taped::before {  /* tape */
  content: "";
  position: absolute; top: -0.8rem; left: 50%; width: 5.5rem; height: 1.5rem;
  margin-left: -2.75rem;
  background: var(--tape);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.note h3 { margin-top: 0; }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }

/* ---------- Label-maker tape (Dymo): raised white letters on coloured plastic ---------- */
.dymo {
  display: inline-block;
  font: 700 0.95rem/1 var(--label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F7F7F2;
  background: var(--dymo-red);
  padding: 0.55rem 0.8rem 0.5rem 0.95rem;
  border-radius: 0.2rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.3);
}
.dymo.blue { background: var(--dymo-blue); }
.dymo.black { background: var(--dymo-black); }
.dymo.green { background: var(--dymo-green); }

/* ---------- App Store badge slot (replace with Apple's official artwork; see README) ---------- */
.badge-slot {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  min-height: 56px;
  padding: 0.6rem 1rem;
  border: 2px dashed var(--ink);
  border-radius: 0.6rem;
  background: var(--card);
  font: 700 1rem/1.3 var(--type);
  color: var(--ink);
  margin: 0;
}
.stamp {
  font: 700 0.9rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.08em;
  color: var(--lcd);
  background: #1F1F23;
  padding: 0.4rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 0 0 1rem; }
.more {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 700 1.2rem/1.2 var(--hand);
  color: var(--ink);
  text-decoration: underline wavy rgba(225, 113, 126, 0.9) 2px;
  text-underline-offset: 0.3em;
}

.toc, .jump {
  list-style: none; padding: 0; margin: 0 0 var(--line);
  display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}
.toc a, .jump a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0.35rem 0.75rem;
  background: var(--card);
  border: 1px solid #E2DBC8;
  border-left: 4px solid var(--kraft);
  border-radius: 0.3rem;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.3;
}
.toc a:hover, .jump a:hover { border-left-color: var(--ink); }

.contact {
  background: var(--card);
  border-left: 4px solid var(--kraft);
  padding: calc(var(--line) / 2) 1rem;
  margin-bottom: var(--line);
}

footer.site {
  max-width: 46rem; margin: 0 auto; padding: 0 1rem 2.5rem;
  color: var(--desk-ink);
  font-size: 0.85rem; line-height: 1.5;
}
.home footer.site { max-width: 60rem; }
footer.site a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
footer.site ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0 0 0.5rem; }

/* ===================================================================================================
   Landing page
   =================================================================================================== */

/* ---------- Hero: an index card and the notebook on the desk ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(55% 60% at 68% 48%, var(--desk-glow), transparent 72%);
  padding: 2rem 1rem 1.5rem;
}
.hero-in {
  max-width: 74rem; margin: 0 auto;
  display: grid; gap: 2rem; align-items: center;
}
.index-card {
  position: relative;
  max-width: 34rem;
  margin: 0.75rem auto 0;
  color: var(--ink-black);
  --top: 2.75rem;                       /* the red line */
  background:
    linear-gradient(var(--margin), var(--margin)) 0 var(--top) / 100% 2px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--line) - 1px), rgba(153, 189, 217, 0.6) calc(var(--line) - 1px), rgba(153, 189, 217, 0.6) var(--line)) 0 calc(var(--top) + 2px) / 100% 100% no-repeat,
    var(--card);
  padding: calc(var(--top) + 2px) clamp(1rem, 4vw, 2rem) var(--line);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 14px 30px rgba(0, 0, 0, 0.22);
  transform: rotate(-1.2deg);
}
.index-card::before {
  content: ""; position: absolute; top: -0.85rem; left: 1.5rem; width: 6rem; height: 1.6rem;
  background: var(--tape); transform: rotate(-6deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.index-card h1 {
  font-size: clamp(1.9rem, 6.2vw, 2.9rem);
  line-height: calc(var(--line) * 2);
  margin: 0 0 var(--line);
  padding-right: 1.5rem;
}
.index-card p { margin-bottom: var(--line); }
.index-card .cta { margin-bottom: 0; }
.index-card .badge-slot { transform: rotate(1.2deg); }   /* the card is tilted; the badge must sit level */
.index-card .sub { font-size: 1.1rem; line-height: var(--line); }
.index-card .fine { font-size: 0.95rem; color: #3E3B35; line-height: var(--line); }
.gold-star {
  position: absolute; top: -1.1rem; right: -0.6rem; width: 4.2rem; height: 4.2rem;
  transform: rotate(14deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}

@media (min-width: 64rem) {
  .hero { padding: 2.5rem 1.5rem 2rem; }
  .hero-in { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: 2.5rem; }
  .index-card { margin: 0; }
}

/* ---------- The foldable (shared by the demo and the fold animation) ----------
   A generic book-style foldable drawn in CSS: two halves on a hinge, outer display on the front half.
   Hinge at x = 0 (the device's centre line). Closed, the front half lies over the back half; open, it swings to the left. */
.stage {
  --w: min(17rem, calc((100vw - 3rem) / 2.15));
  --w: min(var(--wmax, 17rem), calc((100cqw - 1rem) / 2.05));
  --h: calc(var(--w) * 1.4069);         /* half of the inner display, 2853 x 2007 */
  --bz: calc(var(--w) * 0.04);          /* bezel */
  --r: calc(var(--w) * 0.11);           /* corner radius */
  --rs: calc(var(--r) - var(--bz));     /* screen corner radius */
  --rh: calc(var(--r) * 0.4);           /* hinge-side corners */
  position: relative;
  width: calc(var(--w) * 2 + 1rem);
  max-width: 100%;
  height: calc(var(--h) * 1.3);
  margin: 0 auto;
  perspective: calc(var(--w) * 8);
  perspective-origin: 50% 30%;
}
.device {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--w) * 2); height: var(--h);
  margin: calc(var(--h) * -0.5) 0 0 calc(var(--w) * -1);
  transform-style: preserve-3d;
  transform: rotateX(16deg) translateX(-30%) scale(1.2);
}
.half, .leaf { position: absolute; transform-style: preserve-3d; transform-origin: 0 50%; }
.half { top: 0; left: 50%; width: var(--w); height: 100%; }
.half.front { transform: rotateY(0deg) translateZ(2px); }
.leaf {
  left: 50%; top: var(--bz);
  width: calc(var(--w) - var(--bz)); height: calc(100% - var(--bz) * 2);
  transform: rotateY(0deg) translateZ(1px);
}
.face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: #141416;
  padding: var(--bz);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.face.inner { transform: rotateY(180deg); }
.face.outer { border-radius: var(--rh) var(--r) var(--r) var(--rh); }
.half.front .face.inner { border-radius: var(--r) var(--rh) var(--rh) var(--r); padding-right: 0; }
.half.back .face { border-radius: var(--rh) var(--r) var(--r) var(--rh); padding-left: 0; }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: #1E1D1F; border-radius: var(--rs); }
.half.front .face.inner .screen { border-radius: var(--rs) 0 0 var(--rs); }
.half.back .screen { border-radius: 0 var(--rs) var(--rs) 0; }
.leaf .face { padding: 0; background: #1E1D1F; box-shadow: none; overflow: hidden; border-radius: 0 var(--rs) var(--rs) 0; }
.leaf .face.inner { border-radius: var(--rs) 0 0 var(--rs); }
.screen img, .leaf img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
img.l, img.r { width: 200%; }
img.r { left: -100%; }
.shadow {
  position: absolute; top: 6%; bottom: -2%; left: 0; width: 100%;
  border-radius: 8%;
  background: rgba(0, 0, 0, 0.34);
  filter: blur(14px);
  transform-origin: 100% 50%;
  transform: translateZ(-6px) translateY(4%) scaleX(0.5);
}
/* laptop content: the page above the fold, the pencil case below (counter-rotated for the spun device) */
.tall {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--h) - var(--bz) * 2); height: calc(var(--w) - var(--bz));
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: hidden; opacity: 0;
}
.tall img { position: absolute; left: 0; width: 100%; height: 200%; top: 0; object-fit: cover; }
.tall img.b { top: -100%; }

/* ---------- The demo you can play with ---------- */
.play { margin: 0; container-type: inline-size; --wmax: 19rem; }
.play .stage-wrap { position: relative; }
.play .half.front, .play .leaf, .play .device {
  transition: transform 1.15s var(--ease);
}
.play .shadow { transition: transform 0.5s var(--ease); }   /* closing: the shadow pulls in first */
.play:has(#nb-open:checked) .device,
.play:has(#nb-next:checked) .device { transform: rotateX(16deg) translateX(0) scale(1); }
.play:has(#nb-open:checked) .half.front,
.play:has(#nb-next:checked) .half.front { transform: rotateY(-180deg) translateZ(2px); }
.play:has(#nb-next:checked) .leaf { transform: rotateY(-180deg) translateZ(1px); }
.play:has(#nb-open:checked) .shadow,
.play:has(#nb-next:checked) .shadow { transform: translateZ(-6px) translateY(4%) scaleX(1); transition: transform 0.6s var(--ease) 0.55s; }

.hit { position: absolute; top: 0; bottom: 0; z-index: 3; display: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.play:has(#nb-closed:checked) .hit-cover { display: block; left: calc(50% - var(--w) * 0.62); width: calc(var(--w) * 1.24); }
.play:has(#nb-open:checked) .hit-turn { display: block; left: 50%; width: var(--w); }
.play:has(#nb-next:checked) .hit-back { display: block; right: 50%; width: var(--w); }
.play .stage-wrap { --w: min(17rem, calc((100vw - 3rem) / 2.15)); --w: min(var(--wmax), calc((100cqw - 1rem) / 2.05)); }

.hint {
  margin: 0.25rem 0 0.75rem; min-height: 1.8rem;
  text-align: center;
  font: 700 1.2rem/1.5 var(--hand);
  color: var(--desk-ink);
}
.hint span { display: none; }
.play:has(#nb-closed:checked) .h-closed,
.play:has(#nb-open:checked) .h-open,
.play:has(#nb-next:checked) .h-next { display: inline; }
.play:not(:has(input:checked)) .h-closed { display: inline; }

.controls {
  border: 0; margin: 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.controls input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.controls label {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 1rem;
  font: 600 0.95rem/1 var(--type);
  color: var(--ink-black);
  background: var(--kraft);
  border-radius: 0.4rem;
  cursor: pointer;
  box-shadow: 0 3px 0 #8E7350;
  transition: transform 0.12s, box-shadow 0.12s;
}
.controls input:checked + label { background: var(--card); color: var(--ink); box-shadow: 0 1px 0 #8E7350; transform: translateY(2px); }
.controls input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--paper); }

/* A slight lift of the cover, three times, to show it opens */
@media (prefers-reduced-motion: no-preference) {
  .play:has(#nb-closed:checked) .half.front { animation: peek 3.4s 1.6s 3 var(--ease); }
}
@keyframes peek {
  0%, 62%, 100% { transform: rotateY(0deg) translateZ(2px); }
  78% { transform: rotateY(-16deg) translateZ(2px); }
}

/* ---------- Why it's different: label-maker strip ---------- */
.why { padding: 0.5rem 1rem 2.5rem; text-align: center; }
.why h2 { color: var(--desk-ink); font-size: 1.35rem; line-height: 1.4; margin: 0 0 0.9rem; }
.why ul { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 0.8rem; }
.why li { display: block; }
.why li:nth-child(odd) .dymo { transform: rotate(-2deg); }
.why li:nth-child(even) .dymo { transform: rotate(1.6deg); }
.why li:nth-child(3n) .dymo { transform: rotate(-0.8deg); }

/* ---------- The ruled page on the landing ---------- */
.home .page { max-width: 60rem; }
.home .page > section { padding-bottom: var(--line); }
.home .page h2 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); line-height: 1.2; margin: 0 0 1.1rem; padding-top: var(--line); }
.home .page h2:first-child { padding-top: 0; }
.home .page .say { font-size: 1.1rem; }
.home .page > section + section { border-top: 0; }

/* ---------- How it folds: the auto-playing fold and the poses in ballpoint ---------- */
.fold { margin: 0 0 var(--line); container-type: inline-size; --wmax: 16rem; }
.fold .stage { height: calc(var(--h) * 1.45); }
.fold .device { animation: fold-cam 18s var(--ease) infinite; }
.fold .half.front { animation: fold-hinge 18s var(--ease) infinite; }
.fold .shadow { animation: fold-shadow 18s var(--ease) infinite; }
.fold .tall { animation: fold-tall 18s linear infinite; }
.fold:has(#fold-pause:checked) * { animation-play-state: paused !important; }

@keyframes fold-cam {
  0%, 9%    { transform: rotateX(16deg) rotateZ(0deg) translateX(-30%) scale(1.2); }
  17%, 30%  { transform: rotateX(16deg) rotateZ(0deg) translateX(0) scale(1); }
  37%, 47%  { transform: rotateX(20deg) rotateZ(0deg) translateX(8%) scale(1); }
  55%       { transform: rotateX(34deg) rotateZ(90deg) translateX(0) scale(0.86); }
  63%, 82%  { transform: rotateX(56deg) rotateZ(90deg) translateX(-6%) scale(0.92); }
  90%       { transform: rotateX(16deg) rotateZ(0deg) translateX(0) scale(1); }
  97%, 100% { transform: rotateX(16deg) rotateZ(0deg) translateX(-30%) scale(1.2); }
}
@keyframes fold-hinge {
  0%, 9%    { transform: rotateY(0deg) translateZ(2px); }
  17%, 30%  { transform: rotateY(-180deg) translateZ(2px); }
  37%, 47%  { transform: rotateY(-128deg) translateZ(2px); }
  55%       { transform: rotateY(-180deg) translateZ(2px); }
  63%, 82%  { transform: rotateY(-98deg) translateZ(2px); }
  90%       { transform: rotateY(-180deg) translateZ(2px); }
  97%, 100% { transform: rotateY(0deg) translateZ(2px); }
}
@keyframes fold-shadow {
  0%, 9%, 97%, 100% { transform: translateZ(-6px) translateY(4%) scaleX(0.5); }
  13% { transform: translateZ(-6px) translateY(4%) scaleX(0.56); }
  17%, 30%, 55%, 90% { transform: translateZ(-6px) translateY(4%) scaleX(1); }
  94% { transform: translateZ(-6px) translateY(4%) scaleX(0.56); }
  37%, 47% { transform: translateZ(-6px) translateY(4%) scaleX(0.82); }
  63%, 82% { transform: translateZ(-6px) translateY(4%) scaleX(0.5); }
}
@keyframes fold-tall {
  0%, 49%, 87%, 100% { opacity: 0; }
  53%, 83% { opacity: 1; }
}

.fold-bar { display: flex; justify-content: center; margin: 0.25rem 0 0.5rem; }
.fold-bar input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.fold-bar label {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.9rem;
  font: 600 0.9rem/1 var(--type); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 2rem; background: var(--card);
}
.fold-bar .when-paused { display: none; }
.fold:has(#fold-pause:checked) .when-paused { display: inline; }
.fold:has(#fold-pause:checked) .when-playing { display: none; }
.fold-bar input:focus-visible + label { outline: 3px solid var(--ink); outline-offset: 2px; }

.poses {
  list-style: none; padding: 0; margin: 0 0 var(--line);
  display: grid; gap: 1rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.poses li { position: relative; padding: 0.5rem 0.25rem 0; }
.poses svg { display: block; width: 100%; max-width: 11rem; height: auto; margin: 0 auto 0.5rem; overflow: visible; }
.poses h3 { margin: 0 0 0.5rem; line-height: 1; }
.poses p { margin: 0; font-size: 0.98rem; line-height: 1.45; }
.poses li::before {         /* highlighter swipe for the pose the animation is showing */
  content: ""; position: absolute; inset: 0 -0.25rem -0.25rem; z-index: -1;
  background: rgba(254, 236, 74, 0.55); border-radius: 0.3rem; opacity: 0;
}
.poses { position: relative; z-index: 0; }
.poses li:nth-child(1)::before { animation: pose-1 18s linear infinite; }
.poses li:nth-child(2)::before { animation: pose-2 18s linear infinite; }
.poses li:nth-child(3)::before { animation: pose-3 18s linear infinite; }
.poses li:nth-child(4)::before { animation: pose-4 18s linear infinite; }
@keyframes pose-1 { 0%, 11% { opacity: 1; } 13%, 95% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes pose-2 { 0%, 12% { opacity: 0; } 14%, 32% { opacity: 1; } 34%, 86% { opacity: 0; } 88%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes pose-3 { 0%, 33% { opacity: 0; } 35%, 49% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes pose-4 { 0%, 50% { opacity: 0; } 52%, 85% { opacity: 1; } 87%, 100% { opacity: 0; } }
.any-iphone { font-size: 0.98rem; }

@media (min-width: 52rem) {
  .poses { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Benefit sections: a taped print beside the words ---------- */
.feature { display: grid; gap: 1.25rem 2.25rem; align-items: center; }
.feature .copy > :last-child { margin-bottom: 0; }
.print {
  position: relative;
  justify-self: center;
  width: min(17rem, 78%);
  margin: 1.25rem 0 0.5rem;
  background: #FBFAF5;
  padding: 0.55rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.2);
  transform: rotate(var(--tilt, -2deg));
}
.print img { display: block; width: 100%; height: auto; aspect-ratio: 1398 / 2034; object-fit: cover; background: #1E1D1F; }
.print::before {
  content: ""; position: absolute; z-index: 1; top: -0.8rem; left: 50%; width: 5.5rem; height: 1.5rem; margin-left: -2.75rem;
  background: var(--tape); transform: rotate(var(--tape-tilt, -4deg)); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.print .dymo { position: absolute; left: -0.9rem; bottom: 1.2rem; font-size: 0.8rem; transform: rotate(-4deg); }
.flip .print { --tilt: 2.2deg; --tape-tilt: 5deg; }
.flip .print .dymo { left: auto; right: -0.9rem; transform: rotate(3deg); }

@media (min-width: 46rem) {
  .feature { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
  .feature .print { grid-column: 1; grid-row: 1; width: 100%; }
  .feature .copy { grid-column: 2; grid-row: 1; }
  .feature.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); }
  .feature.flip .print { grid-column: 2; }
  .feature.flip .copy { grid-column: 1; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .print, .why .dymo, .gold-star { transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1); }
  .print:hover { transform: rotate(calc(var(--tilt, -2deg) * -1)) scale(1.02); }
  .why .dymo:hover { transform: rotate(0deg) translateY(-3px); }
  .gold-star:hover { transform: rotate(-8deg) scale(1.08); }
}

/* Send a page: the steps */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps li { position: relative; padding-left: 2.75rem; margin-bottom: calc(var(--line) / 2); counter-increment: step; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.15rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font: 700 1.25rem/1 var(--hand); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 50% 46% 52% 48%;
  transform: rotate(-6deg);
}

/* Private by design: a rubber stamp */
.private { display: grid; gap: 1rem 2rem; align-items: center; }
.rubber {
  justify-self: center;
  display: inline-block;
  font: 700 1.15rem/1.15 var(--type);
  letter-spacing: 0.12em;
  text-align: center;
  color: #A3241C;
  border: 4px double #A3241C;
  border-radius: 0.4rem;
  padding: 0.6rem 1rem;
  transform: rotate(-7deg);
  opacity: 0.92;
}
@media (min-width: 46rem) {
  .private { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Get it: the closing call to action */
.get {
  text-align: center;
  background: var(--card);
  border: 1px solid #E2DBC8;
  padding: 1.75rem 1rem 1.25rem;
  margin: calc(var(--line) * 1.5) auto var(--line);
  max-width: 38rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transform: rotate(0.6deg);
  position: relative;
}
.get::before {
  content: ""; position: absolute; top: -0.8rem; left: 50%; width: 6rem; height: 1.5rem; margin-left: -3rem;
  background: var(--tape); transform: rotate(3deg);
}
.home .page .get h2 { padding-top: 0; }
.get .cta { justify-content: center; }
.get .badge-slot { transform: rotate(-0.6deg); }
.private .copy a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Support and privacy readability ---------- */
.faq h3 { font: 700 1.05rem/var(--line) var(--body); color: var(--ink); margin-top: var(--line); }
.faq h2 { scroll-margin-top: 1rem; }
.faq h2 + h3 { margin-top: 0; }
.faq .top { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9rem; }
.faq .ask { margin-bottom: var(--line); font-size: 1.1rem; }
.faq .small-head { font: 700 1rem/var(--line) var(--type); color: var(--ink-black); margin: 0 0 calc(var(--line) / 2); padding: 0; }
.faq p, .faq dd { max-width: 38rem; }
.faq dt { margin-top: calc(var(--line) / 2); }

@media (max-width: 30rem) {
  :root { --marginx: 1.75rem; }
  h1 { font-size: 1.75rem; }
  .cover { padding-left: 2.75rem; }
  .cover::before { width: 1.25rem; }
  .label .key { min-width: 4rem; }
  .page { padding-left: calc(var(--marginx) + 0.75rem); padding-right: 0.9rem; }
  .print .dymo { left: -0.4rem; }
  .flip .print .dymo { right: -0.4rem; }
}

/* ---------- Reduce Motion: no movement; the demo cuts between states, the fold becomes a still ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .fold .stage, .fold-bar { display: none; }
  .poses li::before { display: none; }
}

@media print {
  body { background: #fff; }
  .cover, nav.tabs, .skip, .play, .fold, .why { display: none; }
  .page { box-shadow: none; background: #fff; }
  .page::before { display: none; }
}