/* ScanIDCard, "paper craft". The page is a teal board with layers of cut paper on it: sheets pinned and taped, a card
   cut out with scissors, post-its, hanging tags, a folded strip for the steps, a cork board for privacy. Every large
   surface carries the same small grain tile (web/grain.png, scripts/grain.ts) over its own color; small pieces (labels,
   notes, buttons, tags) stay flat, since grain on each of them doubled the paint work. Shadows are soft and short,
   like paper a few millimeters off the board. The guides grid is the exception: card-shaped tiles with a thick outline
   and a hard shadow. Fonts are served by this site (web/fonts/, SIL OFL; the build hashes their names): Gabarito for
   every word, Caveat for the handwritten notes, Mr Dafoe for typed signatures (fetched only when someone types one).
   Tokens, type scale and motion: DESIGN.md. */
@font-face { font-family: "Gabarito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/assets/gabarito.780dd129f5.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/caveat-700.a3e9b0c7e4.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; }
@font-face { font-family: "Mr Dafoe"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/mr-dafoe.6c4e3607b6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212; }

:root {
  color-scheme: light;
  /* The board and the paper */
  --board: #14A296;
  --board-deep: #0E8C81;
  --paper: #FFFDF7;
  --kraft: #E9C99A;
  --kraft-light: #F5E9D4;
  /* Colored stock */
  --sun: #FFC83D;
  --coral: #FF6A55;
  --pink: #FF9DC6;
  --sky: #8FD3FF;
  --mint: #B9EBC9;
  --orange: #FF8A1F;
  --green: #16C27A;
  --blue: #2B3DF5;
  /* Ink */
  --navy: #1B2240;
  --navy-2: #2A3360;
  --mut: #4D546E;
  --line: rgba(27, 34, 64, 0.14);
  --brick: #C93A26;
  --link: #0B6E5F;
  --hand-ink: #0B7A70;
  --white: #FFFFFF;
  --grain: url("/assets/grain.d9e727afd5.png");
  /* Paper a few millimeters off the board */
  --lift: 0 1px 0 rgba(27, 34, 64, 0.10), 0 3px 4px -1px rgba(27, 34, 64, 0.16), 0 12px 18px -8px rgba(27, 34, 64, 0.28);
  --lift-board: 0 2px 2px rgba(0, 0, 0, 0.12), 0 22px 30px -14px rgba(5, 60, 55, 0.7);
  --font: "Gabarito", "Avenir Next", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --gutter: 40px;
}
@media (max-width: 720px) { :root { --gutter: 18px; } }
@media (max-width: 380px) { :root { --gutter: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--board) var(--grain); color: var(--navy); font: 500 16px/1.5 var(--font); }
@media (min-width: 900px) { body { font-size: 17px; } }
img, canvas, svg { display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--navy); text-decoration-thickness: 2.5px; }
h1, h2, h3, p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 8px; background: var(--paper); color: var(--navy); font-weight: 700; box-shadow: var(--lift); }
.skip-link:focus { top: 8px; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.display { font-family: var(--font); font-weight: 900; letter-spacing: -0.025em; text-wrap: balance; }
.hand { font-family: var(--font-hand); font-weight: 700; letter-spacing: 0; }
.caps { font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.icon { flex: none; }

/* A paper label: the kicker over each heading, a cut slip of white paper */
.label {
  display: inline-block; justify-self: start; align-self: flex-start; margin: 0; padding: 7px 11px 6px; background: var(--white); color: var(--navy);
  font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: var(--lift); rotate: -2deg; clip-path: polygon(0 0, 100% 6%, 97% 100%, 2% 94%);
}
/* Washi tape and pins */
.tape { position: absolute; z-index: 3; top: -11px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(255, 157, 198, 0.82); rotate: 3deg; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); pointer-events: none; }
.tape::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.35) 7px 9px); }
.pin { --pin: var(--coral); position: absolute; z-index: 4; display: block; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF 0 12%, var(--pin) 14% 62%, color-mix(in srgb, var(--pin), #000000 25%) 100%); box-shadow: 2px 5px 4px -1px rgba(0, 0, 0, 0.35); pointer-events: none; }
.pin-navy { --pin: var(--navy); }
.pin-sun { --pin: var(--sun); }
.pin-pink { --pin: var(--pink); }

/* Privacy ribbon, header and trail: all on the board */
.privacy-bar { background: var(--navy); color: #E6E9F5; font-size: 13px; font-weight: 600; }
.privacy-bar .wrap { display: flex; align-items: center; gap: 9px; min-height: 30px; }
.lock-icon { color: var(--sun); }
.site-header { background: var(--board) var(--grain); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; padding-top: 8px; padding-bottom: 4px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--white); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.brand:hover { color: var(--white); }
.brand .logo { filter: drop-shadow(0 2px 1.5px rgba(0, 0, 0, 0.25)); }
.nav { display: flex; gap: 10px; margin-left: auto; }
.nav a, .tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 10px; background: var(--paper); color: var(--navy); font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: var(--lift); }
.nav a:nth-child(odd) { rotate: -1.5deg; }
.nav a:nth-child(even) { rotate: 1.2deg; }
.nav a:hover, .tab:hover { color: var(--navy); background-color: var(--sun); }
.nav a[aria-current] { background-color: var(--sun); }
.tab { rotate: 2deg; }
@media (min-width: 1000px) { .tab { display: none; } }
@media (max-width: 999px) { .nav { display: none; } }
.trail { position: relative; }
.trail ol { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0; padding: 6px 0 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--navy); }
.trail li + li::before { content: "/"; margin: 0 9px; opacity: 0.55; }
.trail a { color: var(--navy); }

/* Buttons: navy card on a colored card */
.button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border: 0; border-radius: 14px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; text-align: center; line-height: 1.15;
}
.button.primary { background: var(--navy); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 4px 6px 0 -1px var(--sun), 0 2px 3px rgba(0, 0, 0, 0.2); }
.button.primary:hover { background: var(--navy-2); color: var(--white); }
.button.secondary { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy), 4px 6px 0 -1px var(--sky); }
.button.secondary:hover { background-color: #F1F9FF; color: var(--navy); }
.button.small { min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.button.big { min-height: 60px; padding: 0 24px; font-size: 20px; border-radius: 18px; }
.button.secondary.big { font-size: 17px; font-weight: 700; }
.button:active { translate: 2px 3px; }
.button:disabled { opacity: 0.55; cursor: default; translate: none; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.file-button:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
.text-button { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--link); font-weight: 700; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-button:hover { color: var(--navy); }

/* The tool lives on the board, full width */
.tool { position: relative; isolation: isolate; padding-top: 18px; padding-bottom: 48px; }
.tool::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--board) var(--grain); }

/* The home hero: the tool's start screen */
.tool:not(.embedded):has(.start-screen:not([hidden])) { padding-top: 0; padding-bottom: 0; }
.hero-board { position: relative; }
.hero-head { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.hero h1 { color: var(--white); font-size: clamp(38px, 2.8vw + 20px, 66px); line-height: 0.98; text-wrap: wrap; text-shadow: 0 2px 0 rgba(14, 140, 129, 0.6); }
.hero h1:focus { outline: none; }
.hero h1 .cut {
  display: block; width: fit-content; margin-top: 8px; padding: 0 9px 3px; border-radius: 4px; background: var(--sun); color: var(--navy); text-shadow: none; rotate: -2deg;
  box-shadow: var(--lift); clip-path: polygon(0 4%, 8% 0, 30% 5%, 55% 0, 78% 4%, 100% 0, 99% 52%, 100% 100%, 70% 96%, 42% 100%, 18% 95%, 0 100%, 2% 50%);
}
.lede { font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--navy); max-width: 31em; }
.hero-scene { position: relative; z-index: 2; margin: 6px calc(var(--gutter) * -1) 0; }
.hero-scene figcaption { position: absolute; z-index: 7; right: var(--gutter); bottom: 4px; }
.replay { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--navy); font-size: 22px; line-height: 1; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; cursor: pointer; }
.waves { position: absolute; z-index: 1; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: clamp(110px, 36vw, 150px); pointer-events: none; }
.wave-shade { fill: rgba(6, 48, 44, 0.22); }
.wave-sun { fill: var(--sun); }
.wave-pink { fill: var(--pink); }
.wave-paper { fill: var(--paper); }
.hero-card { position: relative; z-index: 3; isolation: isolate; display: flex; flex-direction: column; gap: 12px; padding: 18px 0 34px; }
.hero-card::before { content: ""; position: absolute; z-index: -1; top: -2px; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw); background: var(--paper) var(--grain); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px 14px; }
.hero-actions .button { flex: 1 1 100%; }
.hero-card .hero-actions .button.secondary { min-height: 52px; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; color: var(--mut); }
.facts li::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--board); vertical-align: 0; }
.facts .dot-coral::before { background: var(--coral); }
.facts .dot-sun::before { background: var(--sun); }
.spec-line { color: var(--mut); text-align: center; font-size: 11px; }
.hero-card .doc-choice { align-self: center; text-align: left; }
@media (min-width: 900px) {
  .tool:not(.embedded):has(.start-screen:not([hidden])) { padding-top: 10px; padding-bottom: 120px; }
  .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "head scene" "card scene"; grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 26px; align-items: start; }
  .hero-board { display: contents; }
  .hero-head { grid-area: head; padding-top: 22px; gap: 18px; }
  .lede { font-size: 20px; }
  .hero-scene { grid-area: scene; margin: 0; padding-top: 4px; }
  .hero-scene .craft { max-width: 660px; margin-left: auto; }
  .hero-scene figcaption { right: 0; bottom: -40px; }
  .waves { height: 170px; }
  .hero-card { grid-area: card; align-self: start; padding: 26px 26px 22px; border-radius: 6px; background: var(--paper) var(--grain); box-shadow: var(--lift-board); rotate: -0.6deg; }
  .hero-card::before { display: none; }
  .hero-card::after { content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(255, 157, 198, 0.82); rotate: 3deg; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
  .hero-actions .button { flex: 1 1 220px; }
  .facts { justify-content: flex-start; }
  .spec-line { text-align: left; }
  .hero-card .doc-choice { align-self: stretch; }
}

.doc-choice { font-size: 15px; color: var(--mut); }
.doc-choice summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 44px; padding: 10px 0; cursor: pointer; list-style: none; }
.doc-choice summary::-webkit-details-marker { display: none; }
.link-like { color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.doc-choice fieldset { border: 0; margin: 0; padding: 4px 0 0; display: grid; gap: 4px; }
.choice { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 6px 0; cursor: pointer; color: var(--navy); font-weight: 600; }
.choice input { margin: 4px 0 0; width: 18px; height: 18px; accent-color: var(--navy); }
.choice small { display: block; color: var(--mut); font-size: 14px; font-weight: 500; }
.custom { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; padding: 8px 0 0 28px; }
.custom label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.custom input, .custom select { min-height: 44px; width: 7.5em; padding: 0 10px; border: 2px solid var(--navy); border-radius: 8px; background: var(--white); }

.calm-note { padding: 10px 14px; border-radius: 6px; background: #FFF1C7; color: var(--navy); font-size: 15px; font-weight: 600; box-shadow: var(--lift); }
.calm-note:empty { display: none; }

/* The cut-out (src/art.ts, craftScene). Percentages of the stage, type in container units: one drawing at any size.
   The markup is the finished state; .craft-live plays the cut and the lift once, 3.5 s from first paint. */
.craft { position: relative; aspect-ratio: 390 / 338; container-type: inline-size; }
.craft p { margin: 0; }
.cr-sheet { position: absolute; z-index: 2; left: 14.4%; top: 6.5%; width: 64.1%; height: 88.8%; border-radius: 2px; background: var(--paper) var(--grain); rotate: -3deg; box-shadow: var(--lift-board); }
.cr-tape { position: absolute; left: 35.2%; top: -3.3%; width: 29.6%; height: 7.3%; background: rgba(255, 157, 198, 0.82); rotate: 4deg; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.cr-tape::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, 0.35) 7px 9px); }
.cr-head { position: absolute; left: 5.6%; top: 4.7%; color: #8E94A8; font-size: 2.35cqw; font-weight: 700; letter-spacing: 0.14em; white-space: nowrap; }
.cr-slot { position: absolute; left: 15.2%; top: 15.3%; width: 69.6%; height: 36.7%; border: 0.5cqw dashed #A8AEC3; border-radius: 3cqw; }
.cr-glued { position: absolute; left: 15.2%; top: 56%; width: 69.6%; border-radius: 2.6cqw; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18), 0 3px 4px -2px rgba(0, 0, 0, 0.25); }
.cr-dim { position: absolute; left: 15.2%; top: 93.6%; width: 69.6%; display: flex; align-items: center; gap: 1.5cqw; color: #7E8499; font-size: 2.6cqw; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.cr-dim::before, .cr-dim::after { content: ""; flex: 1; height: 0.4cqw; background: #C7CBD8; }
.craft-card { width: 100%; height: auto; border-radius: 2.6cqw; }
.cr-cutout { position: absolute; z-index: 4; left: 16.9%; top: 8.9%; width: 52.3%; padding: 1.8cqw; border-radius: 4.1cqw; background: var(--white); rotate: -9deg; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14), 0 26px 30px -12px rgba(5, 50, 46, 0.6); }
.cr-cutout::before { content: ""; position: absolute; inset: -1.8cqw; border: 0.5cqw dashed rgba(255, 255, 255, 0.92); border-radius: 5.4cqw; }
.cr-pin-1 { left: 15.9%; top: 7.1%; width: 5.6cqw; height: 5.6cqw; z-index: 6; }
.cr-pin-2 { left: 73.3%; top: 5.9%; width: 5.6cqw; height: 5.6cqw; z-index: 6; }
.scissors { position: absolute; z-index: 5; left: 64.6%; top: 0.6%; width: 15.9%; height: auto; rotate: 166deg; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.25)); }
.sc-blade { fill: #EEF0F6; stroke: var(--navy); stroke-width: 1.6; stroke-linejoin: round; }
.sc-blade-2 { fill: #DADFEA; transform-box: view-box; transform-origin: 27.5px 20px; }
.sc-grip { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; }
.sc-rivet { fill: var(--navy); }
.cr-note { position: absolute; z-index: 6; right: 4%; top: 68%; width: 23%; padding: 2.2cqw 1.8cqw 2cqw; background: var(--sun); color: var(--navy); text-align: center; rotate: 4deg; box-shadow: var(--lift); }
.cr-note b { display: block; font-size: 2.6cqw; font-weight: 700; line-height: 1.25; letter-spacing: 0; white-space: nowrap; }
.cr-note .hand { display: block; margin-bottom: 0.8cqw; font-size: 4.4cqw; line-height: 1; }
.cr-blob { position: absolute; z-index: 6; left: 2.6%; top: 69.8%; width: 17.9cqw; height: 17.9cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--coral); color: var(--white); text-align: center; rotate: -10deg; box-shadow: var(--lift); font-size: 3.3cqw; font-weight: 800; line-height: 1; }
.cr-blob b { display: block; font-size: 6.2cqw; line-height: 0.9; }
/* The card faces: the paper-craft colors */
.craft-card text { font-family: var(--font); font-weight: 700; }
.cc-sky { fill: var(--sky); }
.cc-wave { fill: #6FC2F5; }
.cc-navy { fill: var(--navy); }
.cc-title { fill: var(--sun); font-weight: 900 !important; letter-spacing: 0.02em; }
.cc-white { fill: var(--white); letter-spacing: 0.17em; }
.cc-paper { fill: var(--paper); }
.cc-coral { fill: var(--coral); }
.cc-ink { fill: var(--navy); }
.cc-label { opacity: 0.6; letter-spacing: 0.14em; }
.cc-wide { letter-spacing: 0.15em; }
.cc-sun { fill: var(--sun); }
.cc-seal { fill: none; stroke: var(--navy); stroke-width: 4; stroke-dasharray: 6 7; }
.cc-pink { fill: var(--pink); }
.cc-bars { fill: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .craft-live .cr-cutout, .craft-live .cr-cutout::before, .craft-live .scissors, .craft-live .sc-blade-2, .craft-live .cr-glued, .craft-live .cr-pin-1, .craft-live .cr-pin-2, .craft-live .cr-note, .craft-live .cr-blob {
    animation-duration: 3.2s; animation-delay: 0.3s; animation-fill-mode: both; animation-timing-function: linear;
  }
  /* 1. The scissors cut along the card's edge; the dashed cut line appears behind them. */
  .craft-live .scissors { animation-name: cr-scissors; }
  .craft-live .sc-blade-2 { animation-name: cr-snip; }
  .craft-live .cr-cutout::before { animation-name: cr-cutline; }
  /* 2. The cut-out lifts off the board, turns and settles on the sheet. */
  .craft-live .cr-cutout { animation-name: cr-lift; }
  /* 3. The back is already glued; the pins go in, the post-it and the sticker land. */
  .craft-live .cr-glued { animation-name: cr-glue; }
  .craft-live .cr-pin-1, .craft-live .cr-pin-2 { animation-name: cr-pin; }
  .craft-live .cr-pin-2 { animation-delay: 0.38s; }
  .craft-live .cr-note { animation-name: cr-pop; }
  .craft-live .cr-blob { animation-name: cr-pop; animation-delay: 0.42s; }
}
@keyframes cr-scissors {
  0% { translate: -250% 420%; rotate: 200deg; opacity: 0; animation-timing-function: ease-out; }
  4% { opacity: 1; }
  30% { translate: 0% 0%; rotate: 166deg; opacity: 1; }
  100% { translate: 0% 0%; rotate: 166deg; opacity: 1; }
}
@keyframes cr-snip {
  0%, 30%, 100% { rotate: 0deg; }
  5%, 12%, 19%, 26% { rotate: -14deg; }
  8.5%, 15.5%, 22.5% { rotate: 0deg; }
}
@keyframes cr-cutline {
  0%, 6% { opacity: 0; }
  28%, 100% { opacity: 1; }
}
@keyframes cr-lift {
  0%, 30% { translate: -12% 44%; rotate: -17deg; scale: 0.97; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 5px -3px rgba(5, 50, 46, 0.5); animation-timing-function: cubic-bezier(0.45, 0, 0.3, 1); }
  58% { translate: -3% -6%; rotate: -12deg; scale: 1.08; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.12), 0 40px 40px -14px rgba(5, 50, 46, 0.55); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  72% { translate: 0% 1%; rotate: -9deg; scale: 0.99; }
  78%, 100% { translate: 0% 0%; rotate: -9deg; scale: 1; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14), 0 26px 30px -12px rgba(5, 50, 46, 0.6); }
}
@keyframes cr-glue {
  0%, 18% { opacity: 0; translate: 0 10%; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  32%, 100% { opacity: 1; translate: 0 0; }
}
@keyframes cr-pin {
  0%, 74% { opacity: 0; translate: 0 -90%; scale: 1.7; animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  82%, 100% { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes cr-pop {
  0%, 80% { opacity: 0; scale: 0.5; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  89% { opacity: 1; scale: 1.06; animation-timing-function: ease-out; }
  94%, 100% { opacity: 1; scale: 1; }
}

/* Flow screens: paper on the board */
.screen-head { display: flex; align-items: center; gap: 12px; padding: 6px 0 12px; }
.back-button { flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--paper); color: var(--navy); box-shadow: var(--lift); cursor: pointer; }
.back-button:hover { background-color: var(--sun); }
.step-label { color: var(--navy); font-size: 11.5px; }
.screen-title { color: var(--white); font-weight: 900; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; text-shadow: 0 2px 0 rgba(14, 140, 129, 0.6); }
.screen-title:focus { outline: none; }
.progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0 0 20px; }
.progress i { height: 7px; border-radius: 2px; background: rgba(255, 253, 247, 0.45); }
.progress i.on { background: var(--sun); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
.progress[data-steps="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.progress[data-steps="3"] i:nth-child(4) { display: none; }
@media (min-width: 900px) { .screen-title { font-size: 34px; } .progress { max-width: 560px; } }

.pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 580px; margin: 10px auto 0; padding: 36px 22px 26px; border-radius: 4px; background: var(--paper) var(--grain); box-shadow: var(--lift-board); text-align: center; rotate: -0.5deg; }
.pick::before { content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 24px; margin-left: -46px; background: rgba(255, 157, 198, 0.82); rotate: 3deg; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
.pick-card { width: min(66%, 250px); padding: 6px; border-radius: 14px; background: var(--white); box-shadow: var(--lift); rotate: -5deg; }
.pick-art { width: 100%; height: auto; }
.pick-text { color: var(--mut); max-width: 400px; }
.pick-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; width: 100%; }
.pick-actions .button { flex: 1 1 200px; min-height: 56px; font-size: 18px; }
.done-front { display: flex; align-items: center; gap: 10px; color: var(--mut); font-size: 15px; font-weight: 600; }
.done-front canvas { width: 64px; height: auto; border-radius: 3px; box-shadow: var(--lift); }
.done-front span { display: flex; align-items: center; gap: 6px; }
.check-icon { color: var(--link); }
.busy { margin: 24px auto; max-width: 580px; padding: 18px; border-radius: 4px; background: var(--paper); box-shadow: var(--lift); text-align: center; font-weight: 700; color: var(--navy); }

/* Check the corners: the photo as a print on the dark table, handles ringed in coral */
.editor { display: grid; gap: 16px; }
@media (min-width: 960px) { .editor { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; } }
.stage-frame { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; overflow: hidden; background: var(--navy) var(--grain); box-shadow: var(--lift-board); }
.stage { position: relative; max-width: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.stage canvas[data-photo] { width: 100%; height: auto; border-radius: 3px; box-shadow: 0 0 0 4px var(--paper); }
.stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.stage polygon { fill: rgba(255, 106, 85, 0.1); stroke: var(--coral); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-dasharray: 8 5; }
.handle { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; }
.handle::after { content: ""; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 4px var(--coral), 0 3px 8px rgba(0, 0, 0, 0.45); }
.handle:active { cursor: grabbing; }
.handle:focus-visible { outline: none; }
.handle:focus-visible::after { box-shadow: 0 0 0 4px var(--coral), 0 0 0 8px var(--white), 0 3px 8px rgba(0, 0, 0, 0.45); }
[data-doubtful="true"] .stage polygon { stroke: var(--sun); fill: rgba(255, 200, 61, 0.12); }
[data-doubtful="true"] .handle::after { box-shadow: 0 0 0 4px var(--sun), 0 0 0 9px rgba(255, 200, 61, 0.35), 0 3px 8px rgba(0, 0, 0, 0.45); }
[data-doubtful="true"] .handle:focus-visible::after { box-shadow: 0 0 0 4px var(--sun), 0 0 0 8px var(--white), 0 3px 8px rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  [data-doubtful="true"] .handle::after { animation: breathe 2.4s ease-in-out infinite; }
  @keyframes breathe { 50% { transform: scale(1.12); } }
}
.loupe { position: absolute; left: 6px; top: 6px; width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 4px var(--paper), 0 10px 24px rgba(0, 0, 0, 0.45); pointer-events: none; z-index: 2; }
.loupe.is-right { left: auto; right: 6px; }
.stage-note { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: #EEF0F8; font-size: 15px; font-weight: 600; }
.stage-note::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--mint); }
[data-doubtful="true"] .stage-note::before, [data-found="false"] .stage-note::before { background: var(--sun); }
.editor-side { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 4px; background: var(--paper) var(--grain); box-shadow: var(--lift-board); }
.editor-help { color: var(--mut); font-size: 15px; }
@media (max-width: 959px) { .editor-help { display: none; } }
.editor-actions { display: flex; gap: 14px; }
.editor-actions .button { min-height: 56px; font-size: 18px; }
.editor-actions .retake { flex: 1; }
.editor-actions [data-apply] { flex: 1.6; }
.caption { text-align: center; color: var(--mut); font-size: 11px; }
.side-screen > .calm-note { margin-top: 12px; }

/* Your page: the sheet taped to the board as it will print; its controls on paper cards */
.page-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .page-grid { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; } .page-view { position: sticky; top: 16px; } }
.page-view { display: flex; flex-direction: column; gap: 18px; padding: 26px 14px 16px; border-radius: 12px; background: var(--kraft) var(--grain); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2), 0 14px 20px -12px rgba(0, 0, 0, 0.4); }
.sheet-wrap { display: flex; justify-content: center; padding: 4px 0 6px; }
.sheet { position: relative; width: min(100%, 290px); background: var(--white); border-radius: 1px; rotate: -1deg; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12), 0 22px 30px -14px rgba(60, 40, 10, 0.6); }
.sheet::before { content: ""; position: absolute; z-index: 2; top: -11px; left: 50%; width: 86px; height: 22px; margin-left: -43px; background: rgba(143, 211, 255, 0.85); rotate: -3deg; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); }
@media (min-width: 960px) { .sheet { width: min(100%, 440px); } }
.sheet canvas { width: 100%; height: auto; }
.stamp { position: absolute; right: -8px; bottom: 6%; width: 7.6em; padding: 10px 8px; background: var(--sun); color: var(--navy); font-size: 10px; line-height: 1.25; text-align: center; white-space: normal; rotate: 5deg; box-shadow: var(--lift); }
@media (min-width: 960px) { .stamp { font-size: 11.5px; right: -22px; } }
.dimension { position: absolute; display: flex; align-items: center; gap: 4px; height: 9px; transform: translateY(-50%); border-left: 1.5px solid var(--brick); border-right: 1.5px solid var(--brick); }
.dimension::before, .dimension::after { content: ""; flex: 1; height: 0; border-top: 1.5px solid var(--brick); }
.dimension span { font-size: 9px; letter-spacing: 0.04em; text-transform: none; color: var(--brick); font-weight: 800; white-space: nowrap; }
@media (min-width: 960px) { .dimension span { font-size: 11.5px; } }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.side-chip { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border-radius: 10px; background: var(--paper); box-shadow: var(--lift); }
.side-chip canvas { width: 46px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.chip-name { padding: 0 6px; font-weight: 800; font-size: 15px; }
.chip-button { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 8px; background: #F1EADB; color: var(--navy); font-weight: 700; font-size: 14px; cursor: pointer; }
.chip-button:hover { background: var(--sun); }
@media (max-width: 520px) {
  .chip-button[data-rotate], .chip-button[data-flip] { width: 44px; padding: 0; justify-content: center; }
  .chip-button[data-rotate] span, .chip-button[data-flip] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.page-controls { display: flex; flex-direction: column; gap: 18px; padding: 20px 18px 22px; border-radius: 4px; background: var(--paper) var(--grain); box-shadow: var(--lift-board); }
.seg-group { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.legend { padding: 0 0 6px; color: var(--mut); }
.page-controls > .seg-group > .legend { display: block; width: 100%; }
.seg-group .seg-group .legend { padding: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: #EFE6D3; box-shadow: inset 0 1px 3px rgba(60, 40, 10, 0.18); }
.seg label { position: relative; display: flex; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 6px; border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--mut); text-align: center; line-height: 1.15; cursor: pointer; }
.seg input:checked + span { background: var(--navy); color: var(--white); box-shadow: 2px 3px 0 -1px var(--sun); }
.seg input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.seg.looks { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seg.looks label { grid-column: span 2; }
.seg.looks label:nth-child(n + 4) { grid-column: span 3; }
.tone { margin-top: -6px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
.tone summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; font-weight: 800; cursor: pointer; list-style: none; }
.tone summary::-webkit-details-marker { display: none; }
.tone summary .caps { color: var(--mut); font-size: 11px; }
.tone summary::after, .more summary::after, .faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin: -4px 4px 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.tone[open] summary::after, .more[open] summary::after, .faq details[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.slider-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 12px; padding: 4px 14px 10px; border-top: 1.5px dashed var(--line); }
.slider-row label { font-size: 15px; font-weight: 700; }
.slider-row output { min-width: 3ch; color: var(--mut); text-align: right; }
.slider-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 36px; margin: 0; accent-color: var(--navy); }
.slider-row [data-tone-reset] { grid-column: 3; grid-row: 1; }
.slider-row [data-tone-reset]:disabled { color: var(--mut); text-decoration: none; cursor: default; }
.check-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--mut); cursor: pointer; }
.check-row input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }

.panel { display: flex; flex-direction: column; padding: 2px 16px; border-radius: 10px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 6px 0; cursor: pointer; }
.row + .mark-fields, .row + .redact { border-top: 1.5px dashed var(--line); }
.panel > .row:not(:first-child), .mark-fields + .row { border-top: 1.5px dashed var(--line); }
.row-text { display: flex; flex-direction: column; }
.row-title { font-weight: 800; }
.row-sub { font-size: 14px; color: var(--mut); }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 50px; height: 30px; margin: 0; border-radius: 15px; background: #CFC6B4; cursor: pointer; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.switch:checked { background: var(--board-deep); }
.switch:checked::after { left: 23px; }
@media (prefers-reduced-motion: no-preference) { .switch::after { transition: left 0.15s ease; } }
.mark-fields { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .legend { padding: 0; font-size: 11px; }
.field input { min-height: 46px; padding: 0 12px; border-radius: 8px; border: 2px solid var(--navy); background: var(--white); font-size: 16px; }
.field input:focus-visible { outline: 3px solid var(--sun); outline-offset: 1px; }
.field-note { font-size: 14px; color: var(--mut); }
.field-note:empty { display: none; }
.field-note.calm { padding: 8px 12px; border-radius: 6px; background: #FFF1C7; color: var(--navy); }
.redact { display: flex; flex-direction: column; gap: 14px; padding: 12px 0 16px; }
.redact-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.redact-side .legend { padding: 0; }
.redact-surface { position: relative; width: 100%; touch-action: none; cursor: crosshair; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none; }
.redact-surface canvas { width: 100%; height: auto; border-radius: 3px; }
.redact-boxes { position: absolute; inset: 0; }
.redact-box { position: absolute; padding: 0; border: 0; background: #000000; cursor: move; touch-action: none; }
.redact-box.drawing { opacity: 0.8; }
.redact-box:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; box-shadow: 0 0 0 2px var(--navy); }
.redact-actions { display: flex; align-items: center; gap: 12px; }

.row + .sign-fields { border-top: 1.5px dashed var(--line); }
.sign-fields { display: flex; flex-direction: column; gap: 12px; padding: 12px 0 16px; }

/* The signature pad (sign/pad.ts): a strip of white paper with a signing line, on both tools */
.sig-pad { display: flex; flex-direction: column; gap: 10px; }
.pad-sheet { position: relative; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line), 0 1px 0 rgba(27, 34, 64, 0.06); }
.pad-sheet canvas { position: relative; z-index: 1; width: 100%; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; }
.sig-pad:not([data-mode="draw"]) .pad-sheet canvas { cursor: default; }
.pad-line { position: absolute; left: 6%; right: 6%; bottom: 25%; border-top: 1.5px solid rgba(27, 34, 64, 0.28); }
.pad-x { position: absolute; left: 3%; bottom: 25%; color: var(--brick); font-size: 26px; line-height: 1; }
.pad-hint { position: absolute; inset: 0 0 34% 0; display: flex; align-items: flex-end; justify-content: center; color: rgba(27, 34, 64, 0.32); font-size: 26px; pointer-events: none; }
.pad-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.pad-tools .seg span { font-size: 14px; }
.pad-tools .button.small { padding: 0 14px; }
.pad-type, .pad-photo { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pad-photo .file-button { align-self: flex-start; }
.pad-threshold { padding: 0; border-top: 0; }

/* Sign a PDF (sign/app.ts): the page on kraft with the signatures on it, the controls on a sheet beside it */
.signer .drop-note { color: var(--mut); font-size: 14px; }
.sign-drop.dragging { outline: 3px dashed var(--navy); outline-offset: 6px; }
.sign-grid { display: grid; gap: 24px; }
@media (min-width: 960px) { .sign-grid { grid-template-columns: minmax(0, 1fr) 410px; gap: 44px; align-items: start; } .doc-view { position: sticky; top: 16px; } }
.doc-view { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 14px; border-radius: 12px; background: var(--kraft) var(--grain); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2), 0 14px 20px -12px rgba(0, 0, 0, 0.4); }
.doc-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.doc-nav .back-button:disabled { opacity: 0.4; cursor: default; background: var(--paper); }
.doc-page { min-width: 9em; text-align: center; color: var(--navy); }
.doc-sheet-wrap { display: flex; justify-content: center; }
.doc-sheet { position: relative; width: min(100%, 620px); background: var(--white); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12), 0 22px 30px -14px rgba(60, 40, 10, 0.6); }
.doc-sheet canvas { width: 100%; height: 100%; }
.marks { position: absolute; inset: 0; touch-action: none; }
.mark { position: absolute; padding: 0; border: 0; border-radius: 2px; background: transparent; cursor: move; touch-action: none; outline: 1.5px dashed rgba(27, 34, 64, 0.3); outline-offset: 2px; }
.mark canvas { width: 100%; height: 100%; pointer-events: none; }
.mark.selected { outline: 2px dashed var(--coral); }
.mark:focus-visible { outline: 3px solid var(--navy); }
.mark.ghost { opacity: 0.4; }
.mark-resize { position: absolute; right: -15px; bottom: -15px; width: 30px; height: 30px; cursor: nwse-resize; touch-action: none; }
.mark-resize::after { content: ""; position: absolute; left: 8px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px var(--coral), 0 2px 5px rgba(0, 0, 0, 0.35); }
.mark:not(.selected) .mark-resize { display: none; }
.doc-help { text-align: center; color: var(--navy); }
@media (max-width: 959px) { .doc-help { font-size: 13.5px; } }
.sign-step { display: flex; flex-direction: column; gap: 14px; }
.sign-step > .button { width: 100%; min-height: 54px; }
.extras-body { display: flex; flex-direction: column; gap: 12px; padding: 6px 14px 14px; border-top: 1.5px dashed var(--line); }
.extra-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.extra-row .button { min-height: 46px; }
.placed { gap: 12px; padding: 14px 16px 10px; }
.placed-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.placed .legend { padding: 0; }
.placed .text-button { align-self: flex-start; }

.seg.sizes { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.downloads { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.downloads .button { width: 100%; }
.downloads .button.big { min-height: 62px; font-size: 21px; }
.downloads .button.secondary { min-height: 52px; font-size: 17px; }
.file-note { font-size: 14px; font-weight: 600; color: var(--link); text-align: center; }
.file-note:empty { display: none; }
.file-note.calm { padding: 10px 14px; border-radius: 6px; background: #FFF1C7; color: var(--navy); text-align: left; }
.print-note { font-size: 14px; color: var(--mut); text-align: center; }
.start-over { align-self: center; }

/* The tool in a guide: a taped sheet on the board; the preset hangs on it like a kraft tag */
.tool-band { position: relative; }
.tool.embedded { padding-top: 34px; padding-bottom: 44px; }
.tool-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 32px 34px 32px; border-radius: 4px; background: var(--paper) var(--grain); box-shadow: var(--lift-board); rotate: -0.4deg; }
.tool-copy { display: flex; flex-direction: column; gap: 16px; }
.tool-title { font-size: clamp(28px, 1.6vw + 18px, 40px); line-height: 1.02; }
.tool-title:focus { outline: none; }
.tool-lede { color: var(--mut); max-width: 34em; }
.tool-side { display: flex; flex-direction: column; gap: 10px; }
.tool-card .hero-actions .button { flex: 1 1 200px; }
.tool-card .spec-line { text-align: left; }
.preset { position: relative; margin: 0; display: grid; padding: 22px 16px 12px; border-radius: 6px 6px 10px 10px; background: var(--kraft) var(--grain); rotate: 1.5deg; box-shadow: var(--lift); clip-path: polygon(14% 0, 86% 0, 100% 10%, 100% 100%, 0 100%, 0 10%); }
.preset::before { content: ""; position: absolute; left: 50%; top: 7px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px rgba(27, 34, 64, 0.15); }
.preset > div { display: flex; flex-direction: column; gap: 2px; padding: 8px 2px; min-width: 0; }
.preset > div + div { border-top: 1.5px dashed rgba(27, 34, 64, 0.3); }
.preset dt { color: rgba(27, 34, 64, 0.75); font-size: 10.5px; }
.preset dd { margin: 0; font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .tool-card { grid-template-columns: minmax(0, 1fr); padding: 30px 22px 24px; gap: 22px; } }
@media (max-width: 520px) { .tool-card { padding: 30px 16px 22px; rotate: 0deg; } .tool-card .hero-actions .button { flex: 1 1 100%; } }

/* Guides: the board, the heading, the answer on a pinned note, the drawing taped on a sheet, the facts as notes */
.article-hero { background: var(--board) var(--grain); }
.article-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; row-gap: 26px; align-items: start;
  grid-template-areas: "copy art" "block art"; grid-template-rows: auto 1fr; padding-top: 22px; padding-bottom: 40px;
}
.article-copy { grid-area: copy; display: flex; flex-direction: column; gap: 18px; }
.article-copy h1 { color: var(--white); font-size: clamp(34px, 2.6vw + 18px, 60px); line-height: 1; text-shadow: 0 2px 0 rgba(14, 140, 129, 0.6); }
.answer-note { position: relative; padding: 20px 20px 18px; background: var(--paper) var(--grain); box-shadow: var(--lift-board); rotate: -0.8deg; }
.answer-note .pin { left: 50%; top: -8px; margin-left: -10px; }
.answer { font-size: 19px; line-height: 1.5; color: var(--navy); }
.answer strong { font-weight: 800; background: linear-gradient(transparent 58%, rgba(255, 200, 61, 0.7) 58% 92%, transparent 92%); }
.article-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.article-art { grid-area: art; position: relative; min-width: 0; padding: 26px 22px 16px; border-radius: 3px; background: var(--paper) var(--grain); box-shadow: var(--lift-board); rotate: 1deg; }
.title-block { grid-area: block; align-self: start; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.title-block > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 12px; min-width: 0; background: var(--sun); box-shadow: var(--lift); }
.title-block > div:nth-child(4n + 1) { rotate: -1.5deg; }
.title-block > div:nth-child(4n + 2) { rotate: 1.2deg; background-color: var(--pink); }
.title-block > div:nth-child(4n + 3) { rotate: 1deg; background-color: var(--sky); }
.title-block > div:nth-child(4n) { rotate: -1deg; background-color: var(--mint); }
.title-block dt { color: rgba(27, 34, 64, 0.78); font-size: 10.5px; }
.title-block dd { margin: 0; font-weight: 800; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .article-hero .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "art" "block"; grid-template-rows: none; padding-top: 14px; padding-bottom: 34px; }
  .answer { font-size: 17.5px; }
}
@media (max-width: 520px) {
  .article-art { padding: 22px 12px 10px; rotate: 0.6deg; }
  .answer-note { padding: 18px 16px 16px; }
}

/* Sections: cut paper layers with a torn top edge; the label and heading on the left, the one idea on the right */
.band { position: relative; background: var(--paper) var(--grain); }
.band::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px; background: inherit; clip-path: polygon(0 60%, 4% 20%, 9% 70%, 14% 30%, 19% 80%, 25% 25%, 31% 65%, 37% 15%, 42% 70%, 48% 30%, 54% 75%, 60% 20%, 66% 60%, 72% 25%, 78% 70%, 84% 20%, 90% 65%, 95% 30%, 100% 55%, 100% 100%, 0 100%); }
.band.white { background-color: var(--kraft-light); }
.band.sun { background-color: var(--sun); }
.band.dark { background-color: var(--coral); }
.section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 56px; row-gap: 22px; padding-top: 60px; padding-bottom: 68px; }
.section-head { display: flex; flex-direction: column; gap: 14px; align-self: start; position: sticky; top: 20px; }
.section-head h2.display { font-size: clamp(30px, 1.6vw + 20px, 44px); line-height: 1.02; }
.section-head h2 .hand { display: inline-block; color: var(--brick); font-size: 1.12em; line-height: 0.8; rotate: -3deg; }
.section-lede { color: var(--mut); font-size: 17px; font-weight: 600; max-width: 26em; }
.section-body { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.section-body > p { color: var(--mut); max-width: 38em; }
.band.sun .section-lede, .band.sun .section-body > p, .band.dark .section-lede, .band.dark .section-body > p { color: var(--navy); }
.band.sun a, .band.dark a { color: var(--navy); }
@media (max-width: 900px) { .section { grid-template-columns: minmax(0, 1fr); padding-top: 42px; padding-bottom: 48px; } .section-head { position: static; } }

.more { position: relative; border-radius: 4px; background: var(--white); box-shadow: var(--lift); }
.more::after { content: ""; position: absolute; right: 0; top: 0; width: 18px; height: 18px; background: linear-gradient(225deg, var(--paper) 50%, rgba(27, 34, 64, 0.16) 50%); pointer-events: none; }
.more summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px; cursor: pointer; list-style: none; font-weight: 800; color: var(--navy); }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--link); }
.more-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 20px; border-top: 1.5px dashed var(--line); color: var(--mut); font-size: 16px; max-width: 46em; }
.more-body > :first-child { margin-top: 12px; }
.more-body ul, .more-body ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Steps: one folded strip of paper, a big number on each panel */
.fold { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); filter: drop-shadow(0 16px 16px rgba(120, 80, 0, 0.22)); }
.fold-panel { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px 20px 22px 22px; background: var(--paper); }
.fold-panel:nth-child(3n + 1) { background-image: linear-gradient(90deg, #FFFDF7, #F3EEE2); border-radius: 6px 0 0 6px; }
.fold-panel:nth-child(3n + 2) { background-image: linear-gradient(90deg, #E9E2D2, #FFFDF7 70%); }
.fold-panel:nth-child(3n) { background-image: linear-gradient(90deg, #FFFDF7, #F1EBDD); }
.fold-panel:last-child { border-radius: 0 6px 6px 0; }
.fold-panel:only-child { border-radius: 6px; }
.fold-n { font-weight: 900; font-size: 48px; line-height: 0.9; color: var(--coral); text-shadow: 2px 3px 0 rgba(27, 34, 64, 0.15); }
.fold-text h3 { font-size: 20px; line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; }
.fold-text p { margin-top: 5px; color: var(--mut); font-size: 15.5px; line-height: 1.4; }
.fold-text .fold-note { color: var(--hand-ink); font-size: 21px; line-height: 1.05; }
.fold-art { display: grid; place-items: center; height: 132px; }
.fold-art .figure, .fold-art .mini { width: 100%; height: 100%; }
.fold-art .figure .art { width: 100%; height: 132px; }
.fold-art figcaption { display: none; }
.fold-panel.has-art .fold-n { position: absolute; left: 14px; top: 10px; z-index: 1; }
@media (max-width: 700px) {
  .fold { grid-template-columns: minmax(0, 1fr); filter: drop-shadow(0 14px 14px rgba(120, 80, 0, 0.2)); }
  .fold-panel { border-radius: 0 !important; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 18px 16px; }
  .fold-panel:first-child { border-radius: 6px 6px 0 0 !important; }
  .fold-panel:last-child { border-radius: 0 0 6px 6px !important; }
  .fold-panel:nth-child(3n + 1) { background-image: linear-gradient(180deg, #FFFDF7, #F3EEE2); }
  .fold-panel:nth-child(3n + 2) { background-image: linear-gradient(180deg, #E9E2D2, #FFFDF7 70%); transform: skewY(-1.2deg); }
  .fold-panel:nth-child(3n) { background-image: linear-gradient(180deg, #FFFDF7, #F1EBDD); }
  .fold-panel + .fold-panel { box-shadow: inset 0 1px 0 rgba(27, 34, 64, 0.1); }
  .fold-n { font-size: 40px; }
  .fold-panel.has-art { grid-template-columns: 124px minmax(0, 1fr); align-items: center; }
  .fold-panel.has-art .fold-n { left: 8px; top: 6px; }
  .fold-art { height: 112px; }
  .fold-art .figure .art { height: 112px; }
}
.mini-cut { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-dasharray: 5 5; }
.mini-card { fill: var(--sky); }
.mini-navy { fill: var(--navy); }
.mini-paper { fill: var(--paper); }
.mini-line { fill: rgba(27, 34, 64, 0.5); }
.mini-grip { fill: var(--sun); stroke: var(--navy); stroke-width: 2; }
.mini-blade { stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; }

/* Index cards: a label and a short title, the text beneath; the home page hangs them on strings as tags */
.ledger { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px 16px; }
.ledger-row { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 18px; border-radius: 3px; background: var(--white); box-shadow: var(--lift); }
.ledger-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--sky); border-radius: 3px 3px 0 0; }
.ledger-row:nth-child(4n + 2)::before { background: var(--sun); }
.ledger-row:nth-child(4n + 3)::before { background: var(--pink); }
.ledger-row:nth-child(4n)::before { background: var(--mint); }
.ledger-row:nth-child(odd) { rotate: -0.5deg; }
.ledger-row:nth-child(even) { rotate: 0.5deg; }
.ledger dt { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 18px; line-height: 1.2; letter-spacing: -0.01em; }
.ledger dt .caps { color: var(--link); font-size: 11px; }
.ledger dd { margin: 0; color: var(--mut); font-size: 15.5px; }
.ledger dd p + p, .ledger dd ol + p { margin-top: 6px; }
.ledger dd ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.band.white .ledger-row { background-color: var(--paper); }

.tags { margin: 0; padding: 30px 0 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; position: relative; }
.tag { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px 14px 16px; background: var(--sky); clip-path: polygon(16% 0, 84% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); min-height: 170px; }
.tag::before { content: ""; position: absolute; left: 50%; top: 10px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px rgba(27, 34, 64, 0.18); }
.tags li:nth-child(4n + 1) { rotate: -3deg; }
.tags li:nth-child(4n + 2) { rotate: 2.5deg; background-color: var(--pink); }
.tags li:nth-child(4n + 3) { rotate: 2deg; background-color: var(--sun); }
.tags li:nth-child(4n) { rotate: -2deg; background-color: var(--mint); }
.tags { filter: drop-shadow(0 6px 6px rgba(27, 34, 64, 0.18)); }
.tag-string { position: absolute; left: 50%; top: 0; width: 2px; height: 16px; background: #8B6B45; }
.tags::before { content: ""; position: absolute; left: -8px; right: -8px; top: 2px; height: 2px; background: #8B6B45; border-radius: 1px; opacity: 0.8; }
.tag .caps { color: rgba(27, 34, 64, 0.78); font-size: 10.5px; }
.tag h3 { font-size: 19px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; }
.tag p { font-size: 14px; line-height: 1.35; color: var(--navy); font-weight: 500; }
.tag a { color: var(--navy); }
@media (max-width: 900px) { .tags::before { display: none; } .tag-string { top: -24px; height: 34px; rotate: 12deg; } .tags li:nth-child(even) .tag-string { rotate: -10deg; } }
@media (min-width: 901px) { .tags { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tag-string { top: -28px; height: 36px; } .tags { padding-top: 36px; } }
@media (max-width: 360px) { .tags { grid-template-columns: minmax(0, 1fr); } }

/* Tables of numbers: on a taped sheet */
.table-wrap { position: relative; overflow-x: auto; padding: 8px 18px 14px; border-radius: 3px; background: var(--white); box-shadow: var(--lift); }
.numbers { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.numbers caption { caption-side: bottom; padding-top: 10px; text-align: left; font-size: 14px; color: var(--mut); }
.numbers th, .numbers td { padding: 11px 16px 11px 0; text-align: left; border-bottom: 1.5px dashed var(--line); white-space: nowrap; }
.numbers thead th { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); font-weight: 800; border-bottom: 2px solid var(--navy); }
.numbers tbody th { font-weight: 800; }
@media (max-width: 520px) { .numbers th, .numbers td { white-space: normal; padding-right: 10px; } .numbers { font-size: 14px; } .table-wrap { padding: 6px 12px 12px; } }

/* A calm note: a pinned slip, mint or yellow */
.note-box { position: relative; padding: 18px 18px 16px; background: var(--mint); color: var(--navy); font-size: 15.5px; font-weight: 600; max-width: 44em; box-shadow: var(--lift); rotate: -0.6deg; }
.note-box::before { content: ""; position: absolute; left: 22px; top: -8px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF 0 12%, var(--coral) 14% 62%, #BF4F40 100%); box-shadow: 2px 4px 3px -1px rgba(0, 0, 0, 0.35); }
.note-box.amber { background-color: #FFE08A; }
.note-box p + p { margin-top: 8px; }
.note-box a { color: var(--navy); }

/* Drawings: plates of paper; colors from the paper-craft set */
.figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.figure .art { width: 100%; height: auto; }
.figure figcaption { font-size: 14px; font-weight: 600; color: var(--mut); }
.figure figcaption:empty { display: none; }
.section-body > .figure, .section-body > .switcher, .brand-steps .figure { padding: 20px 18px 14px; border-radius: 3px; background: var(--white) var(--grain); box-shadow: var(--lift); }
.band.white .section-body > .figure { background-color: var(--paper); }
.band.dark .figure figcaption, .band.sun .figure figcaption { color: var(--mut); }
.art text { font-family: var(--font); font-weight: 700; letter-spacing: 0.03em; }
.art .card { fill: var(--sky); stroke: rgba(27, 34, 64, 0.35); stroke-width: 0.3; }
.art .card-back { fill: var(--pink); }
.art .card-band { fill: var(--navy); }
.art .card-photo { fill: var(--paper); }
.art .card-head { fill: var(--coral); }
.art .card-line { fill: rgba(27, 34, 64, 0.38); }
.art .card-line.dark { fill: rgba(27, 34, 64, 0.75); }
.art .card-stripe { fill: var(--navy); }
.art .card-bar { fill: var(--navy); }
.art .card-mask { fill: #000000; }
.art .card-digits { fill: var(--navy); font-weight: 800; }
.art .card-spec { fill: rgba(27, 34, 64, 0.2); font-weight: 900; letter-spacing: 0.2em; }
.art .card-markline { fill: rgba(11, 92, 80, 0.85); font-weight: 800; }
.art .card-bandtext { fill: var(--sun); font-weight: 800; letter-spacing: 0.12em; }
.art .dim, .art .dim-lead { stroke: var(--brick); stroke-width: 0.45; fill: none; stroke-linecap: round; }
.art .dim-text, .art .callout { fill: var(--brick); font-weight: 800; }
.art .format { stroke-width: 0.6; }
.art .format.f0 { fill: rgba(255, 200, 61, 0.35); stroke: #C9961A; }
.art .format.f1 { fill: rgba(255, 157, 198, 0.45); stroke: #D9659A; }
.art .format.f2 { fill: var(--sky); stroke: var(--navy); }
.art .format-name { fill: var(--navy); font-weight: 800; }
.art .paper { fill: var(--white); stroke: rgba(27, 34, 64, 0.2); stroke-width: 0.5; }
.art .paper-name, .art .sheet-label { fill: var(--mut); }
.art .glass { fill: #CFE9F7; stroke: #8FB9CF; stroke-width: 0.5; }
.art .glass-guide { stroke: var(--navy); stroke-width: 1; fill: none; }
.art .glass-zone { fill: none; stroke: var(--coral); stroke-width: 0.6; stroke-dasharray: 2 1.5; }
.art .glass-text { fill: var(--navy); font-weight: 800; }
.art .flow { stroke: var(--coral); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.art .table { fill: var(--navy); }
.art .corner-dot { fill: var(--white); stroke: var(--coral); stroke-width: 1.6; }
.art .phone { fill: var(--navy); }
.art .phone-screen { fill: #3A4470; }
.art .phone-shutter { fill: var(--white); }
.art .booklet { fill: var(--blue); }
/* The open passport: the cover around both pages, the facing visa page with its guilloche, the stitched fold */
.art .booklet-cover { fill: #27307A; }
.art .booklet-edge { fill: #E6DFCB; }
.art .visa-page { fill: #FBF7EC; stroke: rgba(27, 34, 64, 0.16); stroke-width: 0.3; }
.art .guilloche { fill: none; stroke: rgba(11, 110, 95, 0.24); stroke-width: 0.28; }
.art .rosette ellipse, .art .rosette circle { fill: none; stroke: rgba(255, 106, 85, 0.36); stroke-width: 0.3; }
.art .visa-head { fill: rgba(27, 34, 64, 0.55); font-weight: 800; letter-spacing: 0.2em; }
.art .visa-num { fill: var(--navy); font-weight: 800; }
.art .visa-rule { stroke: rgba(27, 34, 64, 0.16); stroke-width: 0.35; }
.art .fold-line { stroke: rgba(27, 34, 64, 0.4); stroke-width: 0.5; }
.art .stitch { stroke: #3A4470; stroke-width: 0.8; stroke-dasharray: 2.4 2; stroke-linecap: round; }
/* Signed pages: the same signature in the same spot */
.art .sig-ink { fill: none; stroke: #1C3FAE; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.art .sign-line { stroke: rgba(27, 34, 64, 0.45); stroke-width: 0.4; }
.art .same-spot { fill: none; stroke: var(--brick); stroke-width: 0.45; stroke-dasharray: 2 1.6; }
.art .booklet-emblem { fill: none; stroke: var(--sun); stroke-width: 1; }
.art .booklet-text { fill: var(--sun); font-weight: 800; letter-spacing: 0.2em; }
.art .ruler { fill: #FFE08A; stroke: #C9961A; stroke-width: 0.4; }
.art .ruler-tick { stroke: var(--navy); stroke-width: 0.25; fill: none; }
.art .ruler-text { fill: var(--navy); }
.art .ruler-mark { stroke: var(--brick); stroke-width: 0.6; stroke-dasharray: 1.5 1; fill: none; }
.art .number-band { fill: rgba(255, 255, 255, 0.8); stroke: rgba(27, 34, 64, 0.2); stroke-width: 0.3; }
.art .bar { fill: var(--board-deep); }
.art .bar.full { fill: #A9B0C6; }
.art .bar-label { fill: var(--navy); font-weight: 800; }
.art .bar-value { fill: var(--mut); }
.art .form-line { fill: rgba(27, 34, 64, 0.18); }
.art .form-title { fill: var(--navy); font-weight: 800; }
.art .clip { fill: none; stroke: #8C93A8; stroke-width: 1.6; stroke-linecap: round; }
.art .mrz { fill: rgba(255, 255, 255, 0.6); }
.art .mrz-text { fill: var(--navy); letter-spacing: 0.06em; }
.art .photo-bg { fill: #3A4470; }

/* A demo without script: radio buttons pick which drawing shows (kit.ts, switcher). Without :has, all show. */
.switcher { display: flex; flex-direction: column; gap: 14px; }
.switcher .seg-group { max-width: 560px; }
.switcher .seg span { font-size: 14px; }
.switcher:has(input[value="0"]:checked) .switch-panel:not([data-panel="0"]),
.switcher:has(input[value="1"]:checked) .switch-panel:not([data-panel="1"]),
.switcher:has(input[value="2"]:checked) .switch-panel:not([data-panel="2"]),
.switcher:has(input[value="3"]:checked) .switch-panel:not([data-panel="3"]),
.switcher:has(input[value="4"]:checked) .switch-panel:not([data-panel="4"]) { display: none; }

.brand-steps { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 3px; background: var(--white) var(--grain); box-shadow: var(--lift); }
.brand-steps ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.brand-steps li::marker { font-weight: 900; color: var(--coral); }
.brand-steps p:not(.caps) { color: var(--mut); font-size: 15.5px; }
.kicker.teal { color: var(--link); }
.switch-panel .brand-steps { padding: 6px 0 0; background: none; box-shadow: none; }

/* Home: privacy on the cork board, the questions as folded notes */
.cork { position: relative; height: 210px; border-radius: 14px; background: var(--kraft) var(--grain); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2), 0 14px 20px -12px rgba(0, 0, 0, 0.4); overflow: hidden; }
.cork::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(120, 70, 20, 0.18) 1.5px, transparent 2px) 0 0 / 11px 13px, radial-gradient(circle at 60% 70%, rgba(120, 70, 20, 0.14) 1.3px, transparent 2px) 0 0 / 17px 9px; }
.cork-plane { position: absolute; left: 50%; top: 30px; width: 190px; height: auto; margin-left: -80px; filter: drop-shadow(0 10px 8px rgba(80, 40, 0, 0.35)); }
.plane-top { fill: var(--paper); }
.plane-wing { fill: #E7E2D4; }
.plane-fold { fill: #CFC8B6; }
.plane-edge { fill: none; stroke: var(--navy); stroke-opacity: 0.12; stroke-width: 1.5; }
.plane-pin { fill: var(--coral); }
.plane-shine { fill: var(--white); opacity: 0.7; }
.cork-trail { position: absolute; left: 4%; top: 116px; width: 120px; height: 60px; }
.cork-trail path { fill: none; stroke: #8B6B45; stroke-width: 2.4; stroke-dasharray: 2 7; stroke-linecap: round; }
.cork-note { position: absolute; right: 14px; bottom: 14px; padding: 8px 12px; background: var(--paper); color: var(--navy); font-size: 22px; line-height: 1; rotate: -4deg; box-shadow: var(--lift); }
.band.dark .figure { padding: 18px 16px 14px; border-radius: 3px; background: var(--paper) var(--grain); box-shadow: var(--lift); rotate: 0.5deg; }
.nope { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nope li { padding: 8px 12px; border-radius: 6px; background: var(--white); color: var(--navy); font-size: 14px; font-weight: 800; box-shadow: var(--lift); }
.nope li:nth-child(odd) { rotate: -1.5deg; }
.nope li:nth-child(even) { rotate: 1.5deg; }
.nope s { text-decoration-thickness: 2.5px; text-decoration-color: var(--brick); }
@media (min-width: 901px) { .band#privacy .section-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 22px 28px; } .band#privacy .cork { grid-row: span 2; height: 100%; min-height: 260px; } }

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { position: relative; border-radius: 3px; background: var(--paper); box-shadow: var(--lift); }
.faq details:nth-child(odd) { rotate: -0.4deg; }
.faq details:nth-child(even) { rotate: 0.4deg; }
.faq summary { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 18px; cursor: pointer; list-style: none; font-weight: 800; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--link); }
.faq details p { padding: 12px 18px 18px; border-top: 1.5px dashed var(--line); color: var(--mut); max-width: 42em; }

/* Citations and the source list: a taped sheet */
.cite { font-size: 0.7em; line-height: 0; margin-left: 1px; }
.cite a { text-decoration: none; font-weight: 800; padding: 0 2px; }
.sources { position: relative; padding: 46px 0 50px; background: var(--kraft-light) var(--grain); }
.sources-sheet { position: relative; display: flex; flex-direction: column; gap: 14px; max-width: 920px; padding: 30px 26px 24px; border-radius: 3px; background: var(--paper) var(--grain); box-shadow: var(--lift); }
.sources ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--mut); }
.sources li { overflow-wrap: anywhere; }
.sources li::marker { font-weight: 900; color: var(--brick); }
.source-publisher { font-weight: 800; color: var(--navy); }
.sources-note { font-size: 14px; color: var(--mut); }
@media (max-width: 520px) { .sources-sheet { padding: 28px 16px 20px; } }

/* The guides grid: card-shaped tiles (the ID-1 proportion), each a page; the footer's, and a guide's related four */
.related { position: relative; padding: 44px 0 56px; background: var(--paper) var(--grain); }
.related .label { margin-bottom: 26px; }
.tiles { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; } }
@media (min-width: 1100px) { .site-footer .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tiles > li:last-child:nth-child(2n+1) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
@media (min-width: 720px) { .tiles > li:last-child:nth-child(2n+1) { grid-column: auto; width: auto; } .tiles > li:last-child:nth-child(4n+1) { grid-column: 1 / -1; width: calc(25% - 15px); } }
@media (min-width: 1100px) { .site-footer .tiles > li:last-child:nth-child(4n+1) { grid-column: auto; width: auto; } .site-footer .tiles > li:last-child:nth-child(6n+1) { grid-column: 1 / -1; width: calc((100% - 100px) / 6); } }
.tiles li { position: relative; }
.tiles li:nth-child(odd) { rotate: -1deg; }
.tiles li:nth-child(4n + 2) { rotate: 1.5deg; }
.tiles li:nth-child(3n + 1)::before { content: ""; position: absolute; z-index: 2; right: 18px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFFFFF 0 12%, var(--coral) 14% 62%, #BF4F40 100%); box-shadow: 2px 4px 3px -1px rgba(0, 0, 0, 0.35); pointer-events: none; }
.tiles li:nth-child(3n + 2)::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -9px; width: 60px; height: 18px; margin-left: -30px; background: rgba(255, 253, 247, 0.75); rotate: -4deg; clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 50%); pointer-events: none; }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; aspect-ratio: 1.586; min-height: 92px; padding: 10px 11px 11px;
  border: 3px solid var(--navy); border-radius: 14px; background: var(--white); color: var(--navy); text-decoration: none; box-shadow: 0 4px 0 var(--navy); overflow: hidden;
}
.tile::before { content: ""; position: absolute; right: 10px; top: 9px; width: 22px; height: 16px; border-radius: 4px; border: 2px solid currentColor; opacity: 0.55; background: linear-gradient(currentColor 0 0) 50% 50% / 100% 2px no-repeat; }
.tile::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 26px; height: 32px; border-radius: 6px; background: rgba(27, 34, 64, 0.14); }
.tile:hover { color: var(--navy); translate: 0 -2px; box-shadow: 0 6px 0 var(--navy); }
.tile:active { translate: 0 2px; box-shadow: 0 2px 0 var(--navy); }
.tile[aria-current] { outline: 3px dashed var(--navy); outline-offset: 4px; }
.tile-tag { padding-right: 30px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.tile-name { position: relative; z-index: 1; padding-right: 30px; font-size: 18px; font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
@media (max-width: 380px) { .tile-name { font-size: 16px; } }
@media (min-width: 1100px) { .tile-name { font-size: 20px; } }
.t-orange { background: var(--orange); }
.t-white { background: var(--white); }
.t-green { background: var(--green); }
.t-sun { background: var(--sun); }
.t-blue { background: var(--blue); color: var(--white); }
.t-blue:hover { color: var(--white); }
.t-pink { background: #FF6FB1; }
.t-navy { background: var(--navy); color: var(--white); }
.t-navy:hover { color: var(--white); }
.t-navy::after, .t-blue::after { background: rgba(255, 255, 255, 0.18); }
.t-sky { background: var(--sky); }
.t-coral { background: var(--coral); }
.t-mint { background: #7FE0C4; }
.t-navy:hover, .t-navy[aria-current] { outline-color: var(--paper); }

/* Footer: the guides board, then a navy strip with a torn edge */
.site-footer { position: relative; }
.guides-board { position: relative; padding: 50px 0 56px; background: var(--board) var(--grain); }
.guides-board::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px; background: inherit; clip-path: polygon(0 60%, 4% 20%, 9% 70%, 14% 30%, 19% 80%, 25% 25%, 31% 65%, 37% 15%, 42% 70%, 48% 30%, 54% 75%, 60% 20%, 66% 60%, 72% 25%, 78% 70%, 84% 20%, 90% 65%, 95% 30%, 100% 55%, 100% 100%, 0 100%); }
.board-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.board-head h2 { color: var(--white); font-size: clamp(32px, 1.8vw + 22px, 48px); line-height: 1; text-shadow: 0 2px 0 rgba(14, 140, 129, 0.6); }
.tile[aria-current] { outline-color: var(--white); }
.footer-base { position: relative; background: var(--navy); color: #C9CEE4; }
.footer-base::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px; background: var(--navy); clip-path: polygon(0 60%, 4% 20%, 9% 70%, 14% 30%, 19% 80%, 25% 25%, 31% 65%, 37% 15%, 42% 70%, 48% 30%, 54% 75%, 60% 20%, 66% 60%, 72% 25%, 78% 70%, 84% 20%, 90% 65%, 95% 30%, 100% 55%, 100% 100%, 0 100%); }
.footer-base .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding-top: 30px; padding-bottom: 32px; font-size: 13.5px; }
.legal { display: flex; flex-wrap: wrap; gap: 8px; }
.legal a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 8px; background: var(--navy-2); color: var(--white); font-weight: 700; font-size: 14px; text-decoration: none; }
.legal a:hover, .legal a[aria-current] { background: var(--sun); color: var(--navy); }
.footer-base :focus-visible { outline-color: var(--sun); }
.footer-notes { flex: 1 1 100%; display: flex; flex-direction: column; gap: 4px; }

/* Legal pages: the heading on the board, the text on a taped sheet */
.prose-board { background: var(--board) var(--grain); }
.prose-board .wrap { padding-top: 18px; padding-bottom: 70px; }
.prose-board h1 { max-width: 760px; color: var(--white); font-size: clamp(36px, 2vw + 24px, 56px); line-height: 1.02; text-shadow: 0 2px 0 rgba(14, 140, 129, 0.6); }
.prose-page { padding-bottom: 64px; }
.prose { position: relative; max-width: 800px; margin-top: -44px; display: flex; flex-direction: column; gap: 16px; padding: 34px 32px 34px; border-radius: 3px; background: var(--paper) var(--grain); box-shadow: var(--lift-board); }
.prose .tape { left: 60px; margin-left: 0; }
.prose h2 { margin-top: 14px; padding-top: 18px; border-top: 1.5px dashed var(--line); font-weight: 900; font-size: 23px; letter-spacing: -0.015em; }
.prose p, .prose li { color: var(--mut); }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose .updated { font-size: 14px; color: var(--mut); }
.lead-text { font-size: 19px; font-weight: 600; }
.prose .lead-text { color: var(--navy); }
@media (max-width: 520px) { .prose { padding: 30px 18px 26px; } }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .replay { display: none; } }