/* The platform's marketing site: "Sticker Shop", Home A with the pressable-ledge buttons (round 3b) [#725].
   Loaded only by layouts/platform_site, so the storefront, the back office and the console never see it.
   It lives in lib/assets, not app/assets, because the other layouts include every app/assets stylesheet.

   A scrapbook table: content sits on stickers, notes and polaroids. Rule of thumb for credibility:
   decoration tilts, reading text sits (nearly) straight. Single committed light look, every color explicit.

   Motion: everything is visible without JavaScript and under prefers-reduced-motion.
   - html.js is set by an inline script in the head only when motion is allowed. It runs the CSS-only
     entrances (hero, starburst, settle), which end on the final state on their own.
   - html.motion-on is set by the site-motion Stimulus controller once it is running. Only then are
     scroll reveals held back; anything already on screen is marked .seen and left alone.
   - .armed is set by the week and glimpse controllers on their own sections before they play. */

/* Self-hosted, SIL Open Font License (OFL-*.txt beside them in app/assets/fonts). Latin subsets. */
@font-face { font-family: "Bagel Fat One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/bagel-fat-one-latin-f2fbfbf2.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("/assets/figtree-latin-62e20c4d.woff2") format("woff2"); }
@font-face { font-family: "Gochi Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/gochi-hand-latin-17146da4.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --paper: #FCF5FF;
  --grid: #EBDDF7;
  --ink: #2A1650;
  --ink-soft: #5B4A80;
  --bubble: #FF4F9A;      /* decorative pink + button fill (ink text on it) */
  --berry: #C2185B;       /* pink for text on light paper */
  --tang: #FF7A1A;
  --tang-ink: #B34700;
  --lemon: #FFD23F;
  --mint: #1FCB98;
  --sky: #3DA9FC;
  --grape: #7B4DFF;       /* decorative */
  --grape-deep: #5B2FD6;  /* band background behind white text */
  --white: #FFFFFF;
  --cork: #C8915A;
  --cork-dark: #A06A38;
  --note-y: #FFF1A8;
  --note-p: #FFD6E8;
  --note-b: #D4EEFF;
  --note-g: #CFF6E6;
  --shadow: rgba(42, 22, 80, .22);
  --shadow-soft: rgba(42, 22, 80, .12);

  --f-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-hand: "Gochi Hand", "Comic Sans MS", "Chalkboard SE", cursive;

  --s-xxl: clamp(2.5rem, 6vw, 4.75rem);
  --s-xl: clamp(1.9rem, 4vw, 3.1rem);
  --s-l: clamp(1.3rem, 2.2vw, 1.65rem);
  --s-m: 1.125rem;
  --s-b: 1rem;
  --s-s: .875rem;
  --wrap: 1120px;

  /* motion tokens */
  --e-slap: cubic-bezier(.3, 1.55, .5, 1);     /* overshoot, then settle */
  --e-out: cubic-bezier(.2, .8, .2, 1);
  --e-pin: cubic-bezier(.34, 1.4, .64, 1);
  --t-slap: 520ms;
  --t-peel: 220ms;
  --t-tape: 460ms;

  /* round 3b: the pressable ledge */
  --bubble-deep: #B0105A;
  --bubble-hi: #FF6AAB;
  --ledge-n: #5E4E8C;
  --t-press: 120ms;
  --t-hover: 160ms;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--s-b); line-height: 1.55; overflow-x: clip; }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--grape-deep); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.04; text-wrap: balance; margin: 0; letter-spacing: .005em; }
p { margin: 0; }
.wrap { max-width: calc(var(--wrap) + 64px); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 720px) { .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); } }
.band { position: relative; padding-block: clamp(56px, 8vw, 104px); overflow-x: clip; }
.dots { background-image: radial-gradient(var(--grid) 1.6px, transparent 1.7px); background-size: 22px 22px; }
.hand { font-family: var(--f-hand); }
.eyebrow { font-family: var(--f-hand); font-size: 1.3rem; color: var(--berry); display: inline-block; rotate: -2deg; line-height: 1.2; }
.sec-head { display: grid; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 760px; }
.sec-head h2 { font-size: var(--s-xl); }
.sec-head p { color: var(--ink-soft); font-size: var(--s-m); max-width: 62ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* die-cut sticker treatment */
.diecut { filter: drop-shadow(3px 0 0 var(--white)) drop-shadow(-3px 0 0 var(--white)) drop-shadow(0 3px 0 var(--white)) drop-shadow(0 -3px 0 var(--white)) drop-shadow(4px 6px 0 var(--shadow)); }
.stk { border: 4px solid var(--white); box-shadow: 0 0 0 1.5px var(--shadow-soft), 5px 7px 0 var(--shadow); }
.tilt { rotate: var(--r, 0deg); }

/* washi tape */
.tape { position: absolute; z-index: 2; width: 92px; height: 26px; top: -12px; left: 50%; translate: -50% 0; rotate: var(--tr, -4deg); opacity: .92; transform-origin: 0 50%;
  background: repeating-linear-gradient(45deg, var(--tc, var(--sky)) 0 8px, color-mix(in srgb, var(--tc, var(--sky)) 68%, var(--white)) 8px 16px);
  clip-path: polygon(3% 0, 97% 4%, 100% 30%, 96% 55%, 100% 80%, 97% 100%, 2% 96%, 0 70%, 4% 45%, 0 20%); pointer-events: none; }

/* buttons, round 3b: Bright Counter's pressable ledge in Sticker Shop colours.
   Solid bubblegum fill, ink type (5.14:1), a 2px border and a 6px hard ledge in --bubble-deep, plus a soft drop.
   Hover lifts 2px onto an 8px ledge; press sinks 4px into a 2px ledge (120ms). The ledge's bottom edge never moves. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.1; text-decoration: none; padding: 13px 24px 14px; border-radius: 999px;
  background: var(--bubble); color: var(--ink); border: 2px solid var(--bubble-deep);
  box-shadow: 0 6px 0 var(--bubble-deep), 0 14px 26px rgba(176, 16, 90, .26);
  transition: translate var(--t-hover) var(--e-out), box-shadow var(--t-hover) var(--e-out), background-color var(--t-hover); white-space: nowrap; cursor: pointer; }
.btn:hover { translate: 0 -2px; background: var(--bubble-hi); box-shadow: 0 8px 0 var(--bubble-deep), 0 18px 30px rgba(176, 16, 90, .30); }
.btn:active { translate: 0 4px; background: var(--bubble); box-shadow: 0 2px 0 var(--bubble-deep), 0 6px 12px rgba(176, 16, 90, .22); transition-duration: var(--t-press); }
.btn:focus-visible { outline: 3px solid var(--grape-deep); outline-offset: 4px; border-radius: 999px; }
/* secondary: white fill, same ledge idea in a neutral plum */
.btn.alt { background: var(--white); color: var(--ink); border-color: var(--ledge-n); box-shadow: 0 5px 0 var(--ledge-n), 0 10px 20px var(--shadow-soft); }
.btn.alt:hover { background: var(--note-y); box-shadow: 0 7px 0 var(--ledge-n), 0 14px 24px var(--shadow-soft); }
.btn.alt:active { background: var(--white); box-shadow: 0 1px 0 var(--ledge-n), 0 4px 8px var(--shadow-soft); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover svg.go-arrow { translate: 3px 0; }
.btn svg.go-arrow { transition: translate 150ms var(--e-out); }
.tlink { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--bubble); }
.tlink:hover { text-decoration-color: var(--ink); }


/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 3px dashed var(--grid); }
.nav .wrap { display: flex; align-items: center; gap: 16px; padding-block: 10px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-size: 1.45rem; }
.logo svg { width: 42px; height: 42px; --r: -8deg; transition: rotate 300ms var(--e-slap); }
.logo:hover svg { rotate: 12deg; }
.links { display: flex; align-items: center; gap: 2px; margin-left: auto; font-weight: 700; }
.links > a, .links summary { padding: 8px 12px; border-radius: 999px; text-decoration: none; cursor: pointer; }
.links > a:hover, .links summary:hover { background: var(--note-y); }
.links summary { list-style: none; display: flex; align-items: center; gap: 6px; }
.links summary::-webkit-details-marker { display: none; }
.links summary::after { content: ""; width: 7px; height: 7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate 200ms; }
.drop[open] summary::after { rotate: 225deg; translate: 0 2px; }
.drop { position: relative; }
.drop .menu { position: absolute; top: calc(100% + 10px); left: -10px; width: 280px; background: var(--white); border-radius: 18px; padding: 10px; display: grid; gap: 2px; box-shadow: 0 0 0 2px var(--ink), 6px 8px 0 var(--ink); rotate: -1deg; transform-origin: 30px 0; }
.drop[open] .menu { animation: menu-in 260ms var(--e-slap); }
@keyframes menu-in { from { opacity: 0; scale: .9; rotate: -5deg; } }
.menu a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.menu a:hover { background: var(--note-p); }
.menu small { font-family: var(--f-hand); color: var(--tang-ink); font-size: .95rem; font-weight: 400; }
.nav .btn { font-size: 1rem; padding: 8px 17px 9px; box-shadow: 0 4px 0 var(--bubble-deep), 0 8px 16px rgba(176, 16, 90, .18); }
.nav .btn:hover { box-shadow: 0 6px 0 var(--bubble-deep), 0 10px 18px rgba(176, 16, 90, .22); }
.nav .btn:active { translate: 0 3px; box-shadow: 0 1px 0 var(--bubble-deep), 0 4px 8px rgba(176, 16, 90, .18); }
.mob { display: none; margin-left: auto; }
.mob summary { list-style: none; font-family: var(--f-display); background: var(--lemon); padding: 8px 16px; border-radius: 999px; box-shadow: 0 0 0 2px var(--ink), 3px 4px 0 var(--ink); cursor: pointer; }
.mob summary::-webkit-details-marker { display: none; }
.mob .sheet { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); top: calc(100% + 6px); background: var(--white); border-radius: 20px; padding: 16px; box-shadow: 0 0 0 2px var(--ink), 6px 8px 0 var(--ink); display: grid; gap: 2px; max-height: calc(100dvh - 120px); overflow: auto; }
.mob[open] .sheet { animation: menu-in 260ms var(--e-slap); transform-origin: 90% 0; }
.mob:not([open]) .sheet { display: none; }
.mob .sheet a { padding: 9px 6px; text-decoration: none; font-weight: 700; }
.mob .sheet .lbl { font-family: var(--f-hand); color: var(--berry); font-size: 1.15rem; padding-top: 6px; }
.mob .sheet .sub { padding-left: 16px; font-weight: 500; display: flex; justify-content: space-between; }
.mob .sheet .sub small { font-family: var(--f-hand); color: var(--tang-ink); font-size: .95rem; }
.mob .sheet .btn { margin-top: 8px; }
.nav-signin { font-weight: 800; color: var(--ink); text-decoration: none; margin-right: 14px; }
.nav-signin:hover, .nav-signin[aria-current] { text-decoration: underline; text-decoration-color: var(--bubble); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 920px) { .links, .nav-cta, .nav-signin { display: none; } .mob { display: block; } .nav .wrap { position: relative; } }

/* ---------- hero ---------- */
.hero { padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.hero .wrap:not(.facts-wrap) { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero-copy { min-width: 0; display: grid; gap: 20px; justify-items: start; }
.hero h1 { font-size: var(--s-xxl); line-height: 1; }
.hero h1 .w { display: inline-block; }
.hero h1 .hl { display: inline-block; background: var(--lemon); padding: 0 .16em .06em; border-radius: .22em; rotate: -2deg; box-shadow: 0 0 0 4px var(--white), 5px 7px 0 var(--shadow); }
.hero h1 .pk { color: var(--berry); }
.hero .sub { font-size: clamp(1.08rem, 1.6vw, 1.25rem); max-width: 46ch; color: var(--ink-soft); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.cta-row .note { font-family: var(--f-hand); font-size: 1.2rem; color: var(--ink-soft); }
.flat { display: inline-flex; gap: 12px; align-items: center; background: var(--mint); color: var(--ink); font-weight: 800; padding: 10px 16px; border-radius: 16px; --r: 1deg; max-width: 100%; line-height: 1.3; }
.flat svg { flex: none; width: 28px; height: 28px; }
.hero-art { position: relative; min-width: 0; aspect-ratio: 1 / .96; max-width: 520px; width: 100%; justify-self: center; }
.polaroid { position: absolute; margin: 0; background: var(--white); padding: 12px 12px 44px; box-shadow: 0 1px 0 var(--shadow-soft), 6px 10px 22px var(--shadow-soft), 4px 6px 0 var(--shadow-soft); rotate: var(--r, 0deg); }
.polaroid figcaption { position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; font-family: var(--f-hand); font-size: 1.2rem; }
.polaroid .pic { display: block; width: 100%; height: auto; }
.p1 { width: 62%; top: 5%; left: 3%; --r: -6deg; }
.p2 { width: 52%; top: 36%; right: 0; --r: 7deg; }
.hero-art .s-sold { position: absolute; left: 1%; bottom: 2%; width: 44%; --r: -10deg; }
.hero-art .s-star { position: absolute; right: 6%; top: 0; width: 20%; --r: 10deg; }
.hero-art .scribble { position: absolute; left: 36%; bottom: -1%; width: 18%; }
@media (max-width: 860px) { .hero .wrap:not(.facts-wrap) { grid-template-columns: 1fr; } .hero-art { max-width: 400px; } }

/* honest facts strip */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 44px); padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; background: var(--white); border-radius: 18px; padding: 14px 16px; box-shadow: 0 0 0 2px var(--ink), 4px 5px 0 var(--ink); min-width: 0; }
.facts svg { width: 34px; height: 34px; grid-row: span 2; }
.facts b { font-size: 1rem; line-height: 1.25; }
.facts span { font-size: .88rem; color: var(--ink-soft); line-height: 1.35; }
@media (max-width: 980px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: 10px; } .facts li { padding: 10px 14px; } }

/* ---------- chooser: sticker sheet ---------- */
.sheet-wrap { position: relative; background: var(--white); border-radius: 28px; padding: clamp(28px, 4vw, 44px) clamp(16px, 4vw, 44px) clamp(24px, 4vw, 44px); box-shadow: 0 0 0 2px var(--ink), 10px 12px 0 var(--ink); }
.sheet-wrap > .sheet-lbl { position: absolute; top: 12px; right: 22px; font-size: .7rem; letter-spacing: .14em; font-weight: 800; color: var(--ink-soft); }
.sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.6vw, 30px); margin-top: 10px; }
.chip { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; text-decoration: none; padding: 20px 12px 18px; border-radius: 26px; background: var(--c, var(--note-y)); color: var(--ink); rotate: var(--r, 0deg); min-width: 0; transition: translate var(--t-peel) var(--e-out), rotate var(--t-peel) var(--e-out), box-shadow var(--t-peel) var(--e-out); }
.chip svg { width: 72px; height: 72px; }
.chip .t { font-family: var(--f-display); font-size: 1.22rem; line-height: 1.05; }
.chip .go { font-weight: 800; font-size: .9rem; display: inline-flex; gap: 4px; align-items: center; background: var(--white); padding: 3px 10px; border-radius: 999px; }
/* peel-on-hover: the bottom-right corner curls up, showing the backing paper */
.peel { overflow: visible; }
.peel::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 42px; height: 42px; border-radius: 0 0 24px 0; pointer-events: none;
  background: linear-gradient(315deg, var(--grid) 0 49%, transparent 50%), linear-gradient(135deg, color-mix(in srgb, var(--c, var(--white)) 70%, var(--white)) 0 48%, var(--white) 49% 51%, transparent 52%);
  filter: drop-shadow(-2px -2px 2px var(--shadow-soft)); transform-origin: 100% 100%; scale: 0; transition: scale var(--t-peel) var(--e-out); }
.peel:hover, .peel:focus-visible { translate: 0 -5px; rotate: calc(var(--r, 0deg) * .3); box-shadow: 0 0 0 1.5px var(--shadow-soft), 8px 12px 0 var(--shadow); }
.peel:hover::after, .peel:focus-visible::after { scale: 1; }
.peel:active { translate: 0 0; scale: .98; }
.chip.soon { background: var(--white); border: 3px dashed var(--ink-soft); box-shadow: none; color: var(--ink-soft); }
.chip.soon svg { opacity: .55; filter: grayscale(.4); }
.chip.soon .go { background: var(--note-y); color: var(--ink); }
.chip.soon .lab { font-family: var(--f-hand); font-size: 1.05rem; color: var(--tang-ink); line-height: 1; }
.chip.else { background: var(--ink); color: var(--white); }
.chip.else .go { color: var(--ink); }
@media (max-width: 860px) { .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .chip .t { font-size: 1.05rem; } .chip svg { width: 58px; height: 58px; } .chip { padding: 16px 8px 14px; } }

/* ---------- corkboard week ---------- */
.board { position: relative; border-radius: 22px; padding: clamp(24px, 4vw, 48px) clamp(14px, 3vw, 40px); border: 14px solid var(--cork-dark);
  background-color: var(--cork);
  background-image: radial-gradient(rgba(90,50,20,.35) 1px, transparent 1.5px), radial-gradient(rgba(255,230,190,.35) 1px, transparent 1.5px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08), 8px 10px 0 var(--shadow); }
.board-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 26px; }
.board-title { display: inline-block; background: var(--white); padding: 10px 18px; font-family: var(--f-display); font-size: var(--s-l); rotate: -1.5deg; position: relative; box-shadow: 4px 5px 0 var(--shadow); }
.board-title .tape { --tc: var(--bubble); }
.replay { display: none; font: 700 .95rem var(--f-body); background: var(--white); color: var(--ink); border: 0; border-radius: 999px; padding: 8px 14px 8px 10px; box-shadow: 0 0 0 2px var(--ink), 3px 4px 0 var(--ink); cursor: pointer; align-items: center; gap: 6px; }
.replay svg { width: 18px; height: 18px; transition: rotate 400ms var(--e-out); }
.replay:hover svg { rotate: -200deg; }
.replay:active { translate: 2px 3px; box-shadow: 0 0 0 2px var(--ink), 1px 1px 0 var(--ink); }
.armed .replay { display: inline-flex; }  /* only once its controller can replay */
/* day strip: a star sticker slides to the day being played */
.days { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); background: var(--white); border-radius: 14px; box-shadow: 0 0 0 2px var(--ink); margin-bottom: 28px; font-weight: 800; font-size: .85rem; text-align: center; overflow: hidden; }
.days span { padding: 8px 2px; position: relative; z-index: 1; }
.days span + span { border-left: 2px dashed var(--grid); }
.days span.key { color: var(--ink); }
.days span:not(.key) { color: var(--ink-soft); font-weight: 600; }
.days .marker { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 12.5%; background: var(--lemon); transition: translate 520ms var(--e-slap); translate: calc(var(--step, 7) * 100%) 0; }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
.n { position: relative; background: var(--nc, var(--note-y)); padding: 30px 20px 20px; rotate: var(--r, 0deg); box-shadow: 3px 6px 0 rgba(0,0,0,.18), 0 12px 18px rgba(0,0,0,.12); min-width: 0; display: grid; gap: 10px; align-content: start; }
.n::before { content: ""; position: absolute; z-index: 2; top: 9px; left: 50%; translate: -50% 0; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--white) 0 15%, var(--pin, var(--bubble)) 20%); box-shadow: 2px 3px 0 rgba(0,0,0,.25); }
.n .day { font-family: var(--f-hand); font-size: 1.65rem; line-height: 1; color: var(--ink); }
.n .day::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 4px; margin-top: 4px; background: var(--pin, var(--bubble)); }
.n p { font-size: 1.02rem; }
.n svg { width: 100%; height: auto; max-height: 110px; }
.n.big { grid-column: span 2; }
.n .loaves { display: flex; gap: 8px; flex-wrap: wrap; }
.n .tag { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border-radius: 999px; padding: 3px 10px; font-weight: 700; font-size: .85rem; box-shadow: 0 0 0 1.5px var(--ink); }
.n .tag svg { width: 22px; height: 22px; }
.n .stamp { display: inline-block; font-family: var(--f-display); color: var(--berry); border: 3px solid var(--berry); padding: 2px 10px; border-radius: 8px; rotate: -8deg; font-size: 1.2rem; justify-self: start; background: rgba(255,255,255,.5); }
.n ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-family: var(--f-hand); font-size: 1.15rem; }
.n li { display: flex; gap: 8px; align-items: center; }
.box { width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 4px; background: var(--white); flex: none; display: grid; place-items: center; }
.box::after { content: ""; width: 9px; height: 5px; border-left: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); rotate: -45deg; translate: 0 -1px; scale: 0; transition: scale 240ms var(--e-slap); }
.box.on::after, .done .box::after { scale: 1; }
.n li .lbl-t { background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 0 55%; background-size: 0 2px; transition: background-size 320ms var(--e-out); }
.n li.done .lbl-t { background-size: 100% 2px; }
@media (max-width: 860px) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .days { font-size: .72rem; } }
@media (max-width: 560px) { .notes { grid-template-columns: 1fr; } .n.big { grid-column: auto; } .board { border-width: 10px; }
  .days { grid-template-columns: repeat(4, minmax(0, 1fr)); } .days span:nth-child(4n+1) { border-left: 0; } .days span:nth-child(n+5) { border-top: 2px dashed var(--grid); } .days .marker { display: none; } .days span.now { background: var(--lemon); } }

/* ---------- features ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 44px) clamp(20px, 3vw, 36px); }
.f { grid-column: span 4; position: relative; background: var(--white); padding: 14px 14px 22px; rotate: var(--r, 0deg); box-shadow: 4px 7px 0 var(--shadow-soft), 0 14px 24px var(--shadow-soft); display: grid; gap: 10px; align-content: start; min-width: 0; }
.f .art { background: var(--fc, var(--note-b)); aspect-ratio: 4 / 3; max-width: 100%; display: grid; place-items: center; overflow: hidden; }
.f .art svg { width: 100%; height: 100%; }
.f .job { font-family: var(--f-hand); color: var(--berry); font-size: 1.1rem; line-height: 1; margin-top: 4px; }
.f h3 { font-size: 1.4rem; }
.f p { color: var(--ink-soft); }
.f .ex, .ex-tag { background: var(--ink); color: var(--white); font-size: .68rem; letter-spacing: .12em; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.f .ex { position: absolute; top: 22px; right: 22px; z-index: 1; }
.f.wide { grid-column: span 6; }
.f.w12 { grid-column: span 12; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 24px; }
.f.w12 .art { aspect-ratio: 16 / 7; }
@media (max-width: 980px) { .f, .f.wide { grid-column: span 6; } .f.w12 { grid-column: span 12; grid-template-columns: 1fr; } .f.w12 .art { aspect-ratio: 16 / 8; } }
@media (max-width: 620px) { .f, .f.wide, .f.w12 { grid-column: span 12; } .f { rotate: calc(var(--r, 0deg) * .5); } }
.proof { margin-top: clamp(32px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: center; }
.proof .ph { background: var(--white); border: 3px dashed var(--ink-soft); padding: 16px 22px; font-family: var(--f-hand); font-size: 1.3rem; color: var(--ink-soft); rotate: var(--r, 0deg); text-align: center; }

/* ---------- product glimpse ---------- */
.glimpse-band { background: var(--grape-deep); color: var(--white); }
.glimpse-band .eyebrow { color: var(--lemon); }
.glimpse-band .sec-head p { color: #EDE6FF; }
.glimpse { position: relative; }
.app { background: var(--paper); color: var(--ink); border-radius: 24px; border: 5px solid var(--white); box-shadow: 0 0 0 3px var(--ink), 12px 14px 0 var(--ink); overflow: hidden; }
.app-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--white); border-bottom: 3px solid var(--ink); flex-wrap: wrap; }
.app-bar .dotz { display: flex; gap: 6px; }
.app-bar .dotz i { width: 12px; height: 12px; border-radius: 50%; background: var(--bubble); box-shadow: 0 0 0 2px var(--ink); }
.app-bar .dotz i:nth-child(2) { background: var(--lemon); }
.app-bar .dotz i:nth-child(3) { background: var(--mint); }
.app-bar .ttl { font-weight: 800; min-width: 0; }
.exbadge { margin-left: auto; background: var(--lemon); font-family: var(--f-display); font-size: .95rem; padding: 3px 12px; border-radius: 999px; box-shadow: 0 0 0 2px var(--ink); }
.app-body { display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px; padding: 18px; }
.app-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
.card { background: var(--white); border-radius: 16px; padding: 16px; box-shadow: 0 0 0 2px var(--ink); min-width: 0; }
.card .card-h { font-family: var(--f-body); font-weight: 700; line-height: 1.3; margin: 0 0 4px; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.cap { display: grid; gap: 10px; }
.cap .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; }
.cap .num { font-family: var(--f-display); font-size: 2.2rem; font-variant-numeric: tabular-nums; line-height: 1; }
.cap .so { background: var(--bubble); color: var(--ink); font-family: var(--f-display); padding: 4px 12px; border-radius: 10px; rotate: -6deg; box-shadow: 0 0 0 3px var(--white), 3px 4px 0 var(--shadow); }
.bar { height: 14px; background: var(--grid); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--ink); }
.bar i { display: block; height: 100%; width: 100%; background: var(--bc, var(--bubble)); border-right: 2px solid var(--ink); transform-origin: 0 50%; scale: var(--w, 1) 1; transition: scale 300ms var(--e-out); }
.small { font-size: .85rem; color: var(--ink-soft); }
.win { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.win .clock { width: 44px; height: 44px; grid-row: span 2; }
.win b { font-size: 1.05rem; }
.list .li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 2px dashed var(--grid); font-variant-numeric: tabular-nums; }
.list .li:last-child { border-bottom: 0; }
.list .who { font-weight: 700; overflow-wrap: anywhere; }
.list .what { font-size: .85rem; color: var(--ink-soft); }
.pill { font-size: .75rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--note-g); box-shadow: 0 0 0 1.5px var(--ink); white-space: nowrap; }
.li:not(.done) .pill { background: var(--note-y); }
.glimpse .arrow-note { position: absolute; font-family: var(--f-hand); font-size: 1.35rem; color: var(--lemon); display: flex; align-items: center; gap: 4px; }
.glimpse .an1 { top: -48px; right: 6%; rotate: 3deg; }
.glimpse .an1 svg { width: 60px; height: 44px; }
.glimpse .replay { position: absolute; left: 0; top: -52px; }
@media (max-width: 820px) { .app-body { grid-template-columns: 1fr; } .glimpse .an1 { position: static; margin-bottom: 10px; } .glimpse .replay { position: static; margin-bottom: 14px; } }

/* ---------- money: where it goes ---------- */
.money { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.receipt { position: relative; background: var(--white); padding: 28px 24px 34px; rotate: -1deg; box-shadow: 6px 8px 0 var(--shadow), 0 0 0 2px var(--ink); font-variant-numeric: tabular-nums; min-width: 0;
  -webkit-mask: radial-gradient(circle 8px at 50% 100%, transparent 98%, #000) 0 0 / 22px 100% repeat-x; mask: radial-gradient(circle 8px at 50% 100%, transparent 98%, #000) 50% 0 / 22px 100%; }
.receipt .tape { --tc: var(--mint); }
.receipt .rh { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 2px dashed var(--grid); padding-bottom: 10px; margin-bottom: 8px; }
.receipt .rh b { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; }
.receipt dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 8px 0; }
.receipt dd { padding-left: 16px; }
.receipt dt { color: var(--ink-soft); }
.receipt dd { margin: 0; font-weight: 700; text-align: right; }
.receipt .zero { color: var(--ink); font-weight: 800; }
.receipt dd.zero span { background: var(--mint); padding: 1px 8px; border-radius: 6px; }
.receipt .tot { border-top: 2px solid var(--ink); padding-top: 8px; margin-top: 4px; }
.receipt .fine { margin-top: 16px; font-size: .88rem; color: var(--ink-soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.steps li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: start; background: var(--white); border-radius: 18px; padding: 16px 18px; box-shadow: 0 0 0 2px var(--ink), 4px 5px 0 var(--ink); }
.steps li::before { counter-increment: s; content: counter(s); grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.3rem; background: var(--sc, var(--lemon)); box-shadow: 0 0 0 2px var(--ink); }
.steps b { font-size: 1.1rem; }
.steps span { color: var(--ink-soft); }
@media (max-width: 860px) { .money { grid-template-columns: 1fr; } }

/* ---------- coming ---------- */
.coming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.cs { position: relative; background: var(--white); border: 3px dashed var(--ink-soft); border-radius: 22px; padding: 18px 14px; text-align: center; display: grid; gap: 8px; justify-items: center; rotate: var(--r, 0deg); min-width: 0; }
.cs svg { width: 56px; height: 56px; opacity: .8; }
.cs b { font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; line-height: 1.1; }
.cs .soon-label { font-family: var(--f-hand); color: var(--tang-ink); font-size: 1.05rem; line-height: 1.1; }
@media (max-width: 900px) { .coming { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs:last-child { grid-column: span 2; } }

/* ---------- pricing ---------- */
.price-band { background: var(--lemon); }
.price-band .eyebrow { color: var(--ink); }
.price-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.big-sticker { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; text-align: center; --r: -6deg; rotate: var(--r); }
.big-sticker svg.burst { position: absolute; inset: 0; width: 100%; height: 100%; }
.big-sticker .in { position: relative; display: grid; gap: 4px; justify-items: center; color: var(--ink); padding: 18%; }
.big-sticker .one { font-family: var(--f-hand); font-size: 1.45rem; }
.big-sticker .amt { font-family: var(--f-display); font-size: clamp(2.3rem, 6vw, 3.5rem); line-height: 1; white-space: nowrap; }
.big-sticker .per { font-family: var(--f-display); font-size: 1.45rem; }
.big-sticker .nofee { margin-top: 8px; font-weight: 800; font-size: .92rem; background: var(--white); color: var(--ink); padding: 6px 12px; border-radius: 999px; max-width: 22ch; line-height: 1.25; }
.inc { background: var(--white); padding: clamp(22px, 3vw, 34px); position: relative; rotate: .6deg; box-shadow: 6px 8px 0 var(--ink), 0 0 0 2px var(--ink); min-width: 0; }
.inc .tape { --tc: var(--mint); }
.inc h3 { font-size: var(--s-l); margin-bottom: 12px; }
.inc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.inc li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; padding-block: 5px; }
.inc li svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.inc .hl { font-weight: 800; background: var(--note-p); padding: 0 4px; }
.inc .cta-row { margin-top: 20px; }
@media (max-width: 860px) { .price-layout { grid-template-columns: 1fr; } .big-sticker { width: min(100%, 340px); } }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.q { background: var(--qc, var(--note-b)); padding: 18px 22px; rotate: var(--r, 0deg); box-shadow: 4px 6px 0 var(--shadow); border-radius: 4px 4px 20px 4px; min-width: 0; }
.q summary { cursor: pointer; list-style: none; font-family: var(--f-display); font-size: 1.25rem; display: flex; justify-content: space-between; gap: 12px; align-items: center; line-height: 1.15; }
.q summary::-webkit-details-marker { display: none; }
.q summary::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: var(--white); border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); font-size: 1.3rem; transition: rotate 250ms var(--e-slap); }
.q[open] summary::after { rotate: 45deg; }
.q p { margin-top: 12px; max-width: 60ch; }
.q[open] p { animation: fade-up 300ms var(--e-out); }
@keyframes fade-up { from { opacity: 0; translate: 0 6px; } }
@media (max-width: 720px) { .faq { grid-template-columns: 1fr; } }

/* ---------- closing CTA ---------- */
.closer { text-align: center; display: grid; justify-items: center; gap: 18px; }
.closer h2 { font-size: var(--s-xl); max-width: 18ch; }
.closer p { color: var(--ink-soft); font-size: var(--s-m); max-width: 50ch; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--white); padding-block: 64px 40px; }
.foot .cols { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot .foot-h { margin: 0 0 10px; font-family: var(--f-hand); font-weight: 400; line-height: 1.2; color: var(--lemon); font-size: 1.3rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { text-decoration: none; color: #F2ECFF; }
.foot a:hover { text-decoration: underline; color: var(--white); }
.foot .logo { color: var(--white); }
.foot .blurb { margin-top: 12px; color: #D9CFF0; max-width: 32ch; font-size: .95rem; }
.mock { margin-top: 56px; display: grid; gap: 10px; }
.mock .cap-l { font-family: var(--f-hand); font-size: 1.2rem; color: var(--lemon); display: flex; gap: 6px; align-items: center; }
.mock .cap-l svg { width: 46px; height: 30px; flex: none; }
.shopfoot { background: #F4EBDD; color: #3B2A1A; border-radius: 16px; padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; font-family: Georgia, "Times New Roman", serif; box-shadow: 0 0 0 3px var(--white), 6px 8px 0 rgba(0,0,0,.35); }
.shopfoot .sn { font-size: 1.15rem; font-weight: 700; }
.shopfoot .sn small { display: block; font-weight: 400; font-size: .85rem; color: #5A4632; font-family: var(--f-body); }
.shopfoot .sl { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; }
.shopfoot .sl span { color: #3B2A1A; text-decoration: underline; }
.foot .mwk { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-body); font-size: .78rem; font-weight: 700; color: #3B2A1A; background: var(--white); padding: 4px 10px 4px 5px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(59,42,26,.25); }
.mwk svg { width: 18px; height: 18px; }
.legal-line { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .85rem; color: #CFC4E8; }
.legal-line .made-by { color: inherit; text-decoration: none; }
.legal-line .made-by:hover { color: #fff; text-decoration: underline; }
.legal-line .made-by [aria-hidden] { color: var(--bubble); }
@media (max-width: 860px) { .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot .brand-col { grid-column: span 2; } }

/* =====================================================================
   MOTION SYSTEM
   Named moments: Slap (sticker lands, squash + settle) · Peel (hover corner curl, above)
   Unroll (washi tape) · Pin-in (corkboard notes, day by day) · Tick (counters to a cap)
   Wobble (price starburst) · Settle (scroll-linked rotate-in for feature cards).
   Hidden "before" states exist only under html.motion-on and .armed (see the top of this file).
   ===================================================================== */
@keyframes slap {
  0% { opacity: 0; transform: scale(1.35) rotate(var(--sr, 6deg)); }
  45% { opacity: 1; transform: scale(.92, .96) rotate(0deg); }
  70% { transform: scale(1.03) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes unroll { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes pin-in {
  0% { opacity: 0; transform: translateY(-34px) rotate(7deg) scale(1.06); }
  60% { opacity: 1; transform: translateY(3px) rotate(-1deg) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes pin-push { 0% { scale: 1.8; } 60% { scale: .85; } 100% { scale: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes wobble { 0%, 100% { rotate: var(--r); } 50% { rotate: calc(var(--r) + 3deg); } }
@keyframes jelly { 0% { scale: 1; } 30% { scale: 1.08 .94; } 55% { scale: .96 1.05; } 80% { scale: 1.02 .99; } 100% { scale: 1; } }
@keyframes wiggle { 0%, 100% { rotate: var(--r, 0deg); } 25% { rotate: calc(var(--r, 0deg) - 4deg); } 50% { rotate: calc(var(--r, 0deg) + 3deg); } 75% { rotate: calc(var(--r, 0deg) - 2deg); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes settle { from { transform: translateY(46px) rotate(4deg); } to { transform: none; } }
@keyframes thump { 0% { opacity: 0; transform: scale(2.2) rotate(-14deg); } 55% { opacity: 1; transform: scale(.9) rotate(0); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* hero entrance choreography (runs on load) */
  .js .hero [data-hero] { animation: rise 560ms var(--e-out) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
  .js .hero h1 .w { animation: slap var(--t-slap) var(--e-slap) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .hero-art .slap { animation: slap var(--t-slap) var(--e-slap) both; animation-delay: var(--d, 0s); }
  .js .hero-art .tape { animation: unroll var(--t-tape) var(--e-out) both; animation-delay: calc(var(--d, 0s) + 380ms); }
  .hero-art .s-star { animation: bob 6s ease-in-out 1.6s infinite; }

  /* scroll reveals: the site-motion controller holds back what's below the fold (html.motion-on),
     marks what was already on screen .seen, and adds .in as each part scrolls in */
  .motion-on [data-in="slap"]:not(.in, .seen) > * { opacity: 0; }
  .motion-on [data-in="slap"].in > * { animation: slap var(--t-slap) var(--e-slap) both; animation-delay: calc(var(--i, 0) * 70ms); }
  .motion-on [data-in="rise"]:not(.in, .seen) > * { opacity: 0; }
  .motion-on [data-in="rise"].in > * { animation: rise 520ms var(--e-out) both; animation-delay: calc(var(--i, 0) * 80ms); }
  .motion-on [data-in]:not(.in, .seen) .tape, .motion-on .tapes > :not(.in, .seen) > .tape { scale: 0 1; }
  .motion-on [data-in].in .tape, .motion-on .tapes > .in > .tape { animation: unroll var(--t-tape) var(--e-out) both; animation-delay: calc(var(--i, 0) * 70ms + 260ms); }
  .motion-on .tapes > .in > .tape { animation-delay: 280ms; }
  .motion-on .sheet-grid.in > .chip { animation-duration: 560ms; }

  /* corkboard: notes pin in day by day (the week controller arms the board, then adds .on to each note in turn) */
  .board.armed .n:not(.on) { opacity: 0; }
  .board.armed .n.on { animation: pin-in 620ms var(--e-pin) both; }
  .board.armed .n.on::before { animation: pin-push 420ms var(--e-slap) 260ms both; }
  .board.armed .n:not(.on) .stamp { opacity: 0; }
  .board.armed .n.on .stamp { animation: thump 420ms var(--e-slap) 520ms both; }

  /* glimpse: SOLD OUT sticker thumps when the cap fills */
  .glimpse.armed .so:not(.on) { opacity: 0; }
  .glimpse.armed .so.on { animation: thump 460ms var(--e-slap) both; }

  /* pricing starburst: a slow idle wobble, a jelly on hover */
  .big-sticker { animation: wobble 7s ease-in-out infinite; }
  .js .hero-burst { animation: slap 640ms var(--e-slap) 520ms both, wobble 7s ease-in-out 1.4s infinite; }
  .big-sticker:hover .in, .big-sticker:focus-visible .in { animation: jelly 600ms var(--e-out); }
  .big-sticker:hover svg.burst, .big-sticker:focus-visible svg.burst { animation: jelly 600ms var(--e-out) 40ms; }

  /* tilted bits wiggle when poked */
  .wig:hover, .wig:focus-visible { animation: wiggle 500ms ease-in-out; }
}
/* Settle: feature cards rotate into place as they scroll in. Scroll-driven where supported, IO-timed elsewhere.
   Transform only, never opacity, so content is always readable. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .settle > * { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
  @supports not (animation-timeline: view()) {
    .js .settle > .in { animation: settle 700ms var(--e-out) both; }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.sr:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip-path: none; background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: 12px; box-shadow: 0 0 0 2px var(--ink); }

/* ---------- pricing page ---------- */
.p-hero { padding-block: clamp(40px, 6vw, 80px); }
.p-hero .wrap:not(.x) { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.p-hero .big-sticker { width: min(100%, 440px); }
@media (max-width: 860px) { .p-hero .wrap:not(.x) { grid-template-columns: 1fr; } .p-hero .big-sticker { width: min(100%, 330px); } }
.inc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); list-style: none; margin: 0; padding: 0; }
.inc-grid li { position: relative; background: var(--c, var(--note-y)); border-radius: 22px; padding: 18px 16px; display: grid; gap: 6px; align-content: start; rotate: var(--r, 0deg); min-width: 0; }
.inc-grid svg { width: 54px; height: 54px; }
.inc-grid b { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.inc-grid span { font-size: .93rem; color: var(--ink); }
@media (max-width: 960px) { .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .inc-grid { grid-template-columns: 1fr; } .inc-grid li { rotate: 0deg; } }
.honest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.honest > div { background: var(--white); border: 3px dashed var(--ink-soft); border-radius: 22px; padding: 20px; display: grid; gap: 8px; align-content: start; }
.honest b { font-family: var(--f-display); font-weight: 400; font-size: 1.2rem; }
.honest span { color: var(--ink-soft); }
@media (max-width: 860px) { .honest { grid-template-columns: 1fr; } }

/* Decorations may poke past the edge; never let them make the page scroll sideways. clip, not hidden, so the sticky nav still sticks. */
html, body { overflow-x: clip; }

.replay { background: var(--white); color: var(--ink); border: 2px solid var(--ledge-n); box-shadow: 0 3px 0 var(--ledge-n);
  transition: translate var(--t-hover) var(--e-out), box-shadow var(--t-hover) var(--e-out), background-color var(--t-hover); }
.replay:hover { translate: 0 -1px; background: var(--note-y); box-shadow: 0 4px 0 var(--ledge-n); }
.replay:active { translate: 0 2px; box-shadow: 0 1px 0 var(--ledge-n); transition-duration: var(--t-press); }
.replay:focus-visible { border-radius: 999px; }
/* reduced motion: no lift or sink, the colour change carries the feedback */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .replay:hover, .replay:active, .btn:hover svg.go-arrow { translate: none; }
  .btn:hover, .nav .btn:hover { box-shadow: 0 6px 0 var(--bubble-deep), 0 14px 26px rgba(176, 16, 90, .26); }
  .nav .btn:hover, .nav .btn:active { box-shadow: 0 4px 0 var(--bubble-deep), 0 8px 16px rgba(176, 16, 90, .18); }
  .btn:active { background: #FFA3CB; box-shadow: 0 6px 0 var(--bubble-deep), 0 14px 26px rgba(176, 16, 90, .26); }
  .btn.alt:hover, .btn.alt:active { box-shadow: 0 5px 0 var(--ledge-n), 0 10px 20px var(--shadow-soft); }
  .btn.alt:active { background: var(--note-p); }
  .replay:hover, .replay:active { box-shadow: 0 3px 0 var(--ledge-n); }
}
/* on the grape band: lemon secondary, the ledge in near-black plum so it reads against purple; lemon focus ring */
.glimpse-band { --ledge-n: #1A0940; }
.glimpse-band .btn.alt { background: var(--lemon); }
.glimpse-band .btn.alt:hover { background: #FFE27A; }
.glimpse-band .btn.alt:active { background: var(--lemon); }
.glimpse-band :focus-visible { outline-color: var(--lemon); }
@media (prefers-reduced-motion: reduce) { .glimpse-band .btn.alt:active { background: #FFF1A8; } }


/* =====================================================================
   Rails build additions [#725]: pieces the mockups didn't have, in the same system.
   ===================================================================== */
.skip { z-index: 99; }
.links > a[aria-current] { background: var(--note-y); }
.foot small { font-family: var(--f-hand); color: var(--lemon); font-size: .95rem; }
.f-text { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tag-start { justify-self: start; }
.more-link { margin-top: clamp(24px, 3vw, 36px); text-align: center; font-size: var(--s-m); }

/* "Pro and up": which plan a feature starts on, when not every listed plan has it */
.plan-tag { display: inline-block; font-family: var(--f-body); font-style: normal; font-weight: 800; font-size: .72rem; letter-spacing: .04em; line-height: 1.4;
  background: var(--ink); color: var(--white); padding: 1px 8px; border-radius: 999px; vertical-align: middle; white-space: nowrap; }
.inc-grid .plan-tag { justify-self: start; }

/* the hero's facts rise in after the headline, CSS only */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .facts > li { animation: rise 520ms var(--e-out) both; animation-delay: calc(var(--i, 0) * 80ms + 820ms); }
}

/* "Coming" stickers with a line of detail (/features) */
.cs .cs-detail { font-size: .88rem; color: var(--ink-soft); line-height: 1.35; }

/* ---------- /features ---------- */
.jump ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.jump li { rotate: var(--r, 0deg); min-width: 0; }
.jump a { display: flex; align-items: center; gap: 10px; height: 100%; background: var(--c, var(--white)); padding: 10px 14px; border-radius: 16px; text-decoration: none; font-weight: 700; line-height: 1.25;
  box-shadow: 0 0 0 2px var(--ink), 3px 4px 0 var(--ink); transition: translate var(--t-hover) var(--e-out), box-shadow var(--t-hover) var(--e-out); }
.jump a:hover { translate: 0 -2px; box-shadow: 0 0 0 2px var(--ink), 4px 6px 0 var(--ink); }
.jump svg { width: 34px; height: 34px; flex: none; }
.jump .jump-soon a { background: var(--white); box-shadow: none; outline: 3px dashed var(--ink-soft); outline-offset: -3px; }
@media (max-width: 520px) { .jump ul { grid-template-columns: 1fr; } }
.feat-list { display: grid; gap: clamp(36px, 5vw, 60px); }
.feat-list .f { rotate: calc(var(--r, 0deg) * .4); scroll-margin-top: 96px; }
.feat-list .f.w12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); padding: 16px; align-items: center; }
.feat-list .f.w12 .art { aspect-ratio: 4 / 3; }
.feat-list .f.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.feat-list .f.flip .art { order: 2; }
.feat-list .f:not(.flip) .ex { right: auto; left: 30px; }
.feat-list .f h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.f-details { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.f-details li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.f-details svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
@media (max-width: 980px) {
  .feat-list .f.w12, .feat-list .f.flip { grid-template-columns: 1fr; }
  .feat-list .f.flip .art { order: 0; }
  .feat-list .f:not(.flip) .ex { left: auto; right: 22px; }
}

/* ---------- /pricing: one card per listed plan ---------- */
.plans { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(18px, 3vw, 30px); }
.plan { position: relative; background: var(--c, var(--note-y)); border-radius: 26px; padding: 22px 20px 24px; display: grid; gap: 6px; align-content: start; rotate: var(--r, 0deg); min-width: 0; }
.plan h3 { font-size: 1.6rem; }
.plan-price { font-weight: 700; }
.plan-price .amt { font-family: var(--f-display); font-weight: 400; font-size: 2.6rem; line-height: 1; }
.plan-year { color: var(--ink-soft); font-size: .95rem; }
.plan-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.plan-lines li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.plan-lines svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.plan-lines .without { color: var(--ink-soft); }
.plan-lines .dash { flex: none; width: 20px; text-align: center; font-weight: 800; }

/* ---------- legal pages: plain and readable ---------- */
.doc-head { padding-block: clamp(36px, 6vw, 64px) clamp(20px, 3vw, 32px); }
.doc-head .wrap { display: grid; gap: 10px; justify-items: start; }
.doc-head h1 { font-size: var(--s-xl); }
.doc-meta { color: var(--ink-soft); }
.draft-banner { margin-top: 8px; background: var(--lemon); color: var(--ink); border-radius: 16px; padding: 12px 16px; box-shadow: 0 0 0 2px var(--ink), 4px 5px 0 var(--ink); max-width: 70ch; }
.doc-band { padding-block: clamp(28px, 4vw, 48px) clamp(56px, 8vw, 96px); }
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.doc-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; position: sticky; top: 96px; }
.doc-nav a { display: block; padding: 8px 12px; border-radius: 12px; text-decoration: none; font-weight: 700; }
.doc-nav a:hover { background: var(--note-p); }
.doc-nav a[aria-current] { background: var(--note-y); box-shadow: 0 0 0 2px var(--ink); }
.doc { background: var(--white); border-radius: 22px; padding: clamp(20px, 4vw, 44px); box-shadow: 0 0 0 2px var(--ink), 6px 8px 0 var(--ink); max-width: 72ch; min-width: 0; font-size: 1.05rem; }
.doc h2 { font-size: 1.45rem; margin: 30px 0 8px; }
.doc p, .doc ul { margin: 0 0 12px; }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 6px; }
.doc-summary { font-size: var(--s-m); color: var(--ink-soft); }
@media (max-width: 760px) {
  .doc-layout { grid-template-columns: 1fr; }
  .doc-nav ul { position: static; display: flex; flex-wrap: wrap; }
}

/* ---------- signup placeholder (until #730) ---------- */
.signup-soon .sub b { overflow-wrap: anywhere; }
.signup-art { display: grid; place-items: center; }
.signup-art .soon-cookie { width: min(64%, 300px); height: auto; rotate: var(--r, 0deg); }
.signup-art .s-star { position: absolute; right: 10%; top: 6%; width: 22%; height: auto; }

/* ---------- /for/<segment> pages [#726] ---------- */
#today { margin-top: clamp(36px, 5vw, 56px); }
.coming-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.coming-lines .cs { width: min(100%, 210px); color: var(--ink); }
.tell-me { margin-top: clamp(24px, 3vw, 34px); }
.also-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2.6vw, 30px); max-width: 860px; }
.also-list .chip { height: 100%; }
@media (max-width: 620px) { .also-list { grid-template-columns: 1fr; } .coming-lines .cs { width: calc(50% - 9px); } }

/* Sign in for store owners [#1049]. */
.signin-form { margin-top: 24px; max-width: 34rem; }
.signin-label { display: block; font-weight: 800; margin-bottom: 6px; }
.signin-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.signin-input { flex: 1 1 16rem; min-width: 0; font: inherit; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 14px; background: var(--white); color: var(--ink); }
.signin-input:focus-visible { outline: 3px solid var(--bubble); outline-offset: 2px; }
.signin-error { color: var(--berry); font-weight: 700; margin: 8px 0 0; }
.owner-sign-in .small { font-size: .95rem; margin-top: 20px; }