/* Startknopf · design v2 (2026-10-22, "bhal dyal Open"): Fraunces + Atkinson + Caveat, warm paper, dotted planner
   pattern, grain, plum sections, sticky notes and risograph illustrations */
:root {
  --paper: #FBF6EF; --paper-2: #F5EBE0; --card: #FFFDF9;
  --ink: #231A24; --ink-2: #574A58; --ink-3: #8A7C8A;
  --line: #ECDFD3; --line-2: #DECAB9;
  --tomato: #E8492B; --tomato-d: #C7351B; --tomato-2: #F07A5A; --blush: #FBE3DA; --blush-2: #F4C9B8;
  --plum: #2B1D2E; --plum-2: #3A2840; --sun: #F7DE73; --sun-2: #FBEBA8; --ok: #2F9E6E;
  --r: 16px; --r-lg: 22px; --r-xl: 30px;
  --sh-1: 0 1px 2px rgba(43, 33, 31, .05), 0 4px 14px rgba(43, 33, 31, .05);
  --sh-2: 0 18px 36px -16px rgba(60, 28, 22, .32);
  --sh-3: 0 34px 60px -24px rgba(70, 22, 18, .45), 0 16px 28px -18px rgba(70, 22, 18, .3);
  --wrap: 1160px; --gut: 20px; --hdr: 64px;
  --btn: var(--tomato-d); --ink2: var(--ink-2); --soft: var(--ink-3);   /* aliases used by /danke/ */
  --f-d: 'Fraunces', ui-serif, Georgia, serif; --f-u: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif; --f-h: 'Caveat', cursive;
  --dots: radial-gradient(circle, rgba(43, 29, 46, .11) 1px, transparent 1.4px) 0 0 / 22px 22px;
  --dots-light: radial-gradient(circle, rgba(247, 222, 115, .11) 1px, transparent 1.4px) 0 0 / 22px 22px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.11 0 0 0 0 0.12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; background: var(--paper); }
body { font-family: var(--f-u); color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; background: var(--grain); pointer-events: none; z-index: 60; opacity: .55; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
h1, h2, h3 { font-family: var(--f-d); font-weight: 600; font-variation-settings: 'SOFT' 50, 'WONK' 0; letter-spacing: -.015em; line-height: 1.08; }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: 21px; }
em { font-family: var(--f-d); font-style: italic; font-weight: 500; color: var(--tomato-d); }
b, strong { font-weight: 700; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap.narrow { max-width: 780px; }
.center { text-align: center; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tomato-d); margin-bottom: 14px; }
.eyebrow::before, .eyebrow.center::after { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.eyebrow.center { justify-content: center; }
.center > .eyebrow { justify-content: center; }
.center > .eyebrow::after { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.eyebrow.light { color: #FF9B7E; }
.sub { color: var(--ink-2); font-size: 18px; margin: 14px auto 0; max-width: 40em; }
.sub.left { margin-left: 0; }
.fine { color: var(--ink-3); font-size: 14.5px; margin-top: 16px; }
section { position: relative; }

/* header */
.hdr { position: sticky; top: 0; z-index: 40; background: rgba(251, 246, 239, .9); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.hdr.scrolled { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(60, 28, 22, .4); }
.hdr__in { height: var(--hdr); display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-d); font-weight: 700; font-size: 22px; text-decoration: none; letter-spacing: -.01em; }
.logo .dot { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 50% 34%, #FF8A66, var(--tomato) 50%, #B8301A); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line-2), 0 4px 10px -2px rgba(200, 60, 30, .4); }
.logo.light { color: #FBF6EF; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; color: var(--ink-2); }
.nav a { text-decoration: none; }
.nav a:hover { color: var(--tomato-d); }
.hdr__cta { font-weight: 700; font-size: 15px; text-decoration: none; padding: 10px 18px; border-radius: 99px; background: var(--plum); color: #fff; }

/* buttons */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 14px 28px; border-radius: 99px; background: var(--tomato-d); color: #fff;
  font-weight: 700; font-size: 18px; box-shadow: 0 14px 26px -12px rgba(199, 53, 27, .55), inset 0 -3px 0 rgba(0, 0, 0, .14); transition: transform .1s, background .2s; text-decoration: none; }
.cta:hover { background: #B32E15; }
.cta:active { transform: translateY(2px); }
.cta.wide { width: 100%; }
.cta.ghost { background: transparent; color: var(--tomato-d); border: 2px solid var(--tomato-d); box-shadow: none; }
.cta.ghost:hover { background: var(--blush); }
.cta.sun { background: linear-gradient(180deg, #FBE89A, #F2CF55); color: var(--plum); box-shadow: 0 16px 30px -12px rgba(242, 207, 85, .55), inset 0 -3px 0 rgba(0, 0, 0, .1); }

/* knob */
.knobi { flex: none; width: 42px; height: 42px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 34%, #FF8A66, var(--tomato) 50%, #B8301A); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line-2), 0 8px 14px -6px rgba(200, 60, 30, .45); }
.knobi::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); }
.bigknob { --s: 220px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-content: center; color: #fff; position: relative;
  background: radial-gradient(circle at 50% 34%, #FF8A66 0%, var(--tomato) 48%, #B8301A 100%);
  box-shadow: inset 0 -14px 22px rgba(110, 20, 0, .34), inset 0 10px 16px rgba(255, 255, 255, .28), 0 26px 46px -14px rgba(200, 60, 30, .55), 0 0 0 14px var(--card), 0 0 0 15px var(--line-2), 0 0 0 28px rgba(232, 73, 43, .08);
  transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s; }
.bigknob::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .34); }
.bigknob span { position: relative; z-index: 1; text-align: center; line-height: 1.05; }
.bigknob b { display: block; font-family: var(--f-d); font-weight: 800; font-size: 36px; letter-spacing: .08em; }
.bigknob small { display: block; font-weight: 700; font-size: 14px; margin-top: 4px; }
.bigknob:active, .bigknob.down { transform: scale(.94) translateY(4px); box-shadow: inset 0 -6px 12px rgba(110, 20, 0, .36), inset 0 6px 10px rgba(255, 255, 255, .2), 0 8px 16px -8px rgba(200, 60, 30, .5), 0 0 0 14px var(--card), 0 0 0 15px var(--line-2); }
.bigknob.glow { box-shadow: inset 0 -14px 22px rgba(110, 20, 0, .34), inset 0 10px 16px rgba(255, 255, 255, .28), 0 0 80px rgba(255, 110, 70, .55), 0 0 0 14px rgba(251, 246, 239, .08), 0 0 0 15px rgba(251, 246, 239, .16); }

/* chips, pull, ticks */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 18px; }
.chips span { font-size: 13.5px; font-weight: 700; padding: 7px 13px; border-radius: 99px; background: var(--card); border: 1px solid var(--line-2); color: var(--ink-2); }
.pull { font-family: var(--f-d); font-style: italic; font-size: 21px; line-height: 1.35; color: var(--ink); border-left: 3px solid var(--tomato); padding: 2px 0 2px 18px; margin: 4px 0 20px; }
.ticks { list-style: none; display: grid; gap: 12px; margin-bottom: 24px; }
.ticks li { position: relative; padding-left: 34px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--blush); border: 1.5px solid var(--blush-2); }
.ticks li::after { content: ""; position: absolute; left: 8px; top: 7px; width: 5px; height: 10px; border: solid var(--tomato-d); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* hero */
.hero { padding: 34px 0 80px; background: radial-gradient(70% 60% at 15% 0%, rgba(247, 222, 115, .22), transparent 60%), var(--dots), var(--paper); }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.hero__visual { position: sticky; top: 92px; }
.frame { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-3); background: var(--blush); }
.frame img { width: 100%; height: auto; }
.frame__tag { position: absolute; left: 22px; bottom: 22px; background: var(--card); border-radius: 14px; padding: 10px 14px; box-shadow: var(--sh-2); line-height: 1.2; }
.frame__tag span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.frame__tag em { font-size: 17px; }
.hero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.04; }
.hero h1 em { display: block; font-size: 1.04em; margin-bottom: 4px; }
.hero__sub { font-size: 18.5px; color: var(--ink-2); margin-top: 18px; }
.picker { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-2); }
.picker__lab { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.opt { display: block; position: relative; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px 14px 46px; cursor: pointer; margin-bottom: 10px; transition: border-color .15s, background .15s; background: #fff; }
.opt input { position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; accent-color: var(--tomato-d); }
.opt:has(input:checked) { border-color: var(--tomato-d); background: #FFF8F4; box-shadow: 0 0 0 3px rgba(199, 53, 27, .08); }
.opt__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.opt__top b { font-family: var(--f-d); font-weight: 600; font-size: 19px; }
.opt__price { font-family: var(--f-d); font-weight: 600; font-size: 22px; white-space: nowrap; }
.opt__sub { display: block; color: var(--ink-3); font-size: 14.5px; margin-top: 2px; }
.opt__list { margin: 10px 0 2px; font-size: 14.5px; color: var(--ink-2); display: grid; gap: 5px; list-style: none; }
.opt__list li { position: relative; padding-left: 20px; }
.opt__list li::before { content: "✓"; position: absolute; left: 0; color: var(--tomato-d); font-weight: 700; }
.opt__badge { position: absolute; top: -11px; right: 14px; background: var(--tomato-d); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; letter-spacing: .1em; text-transform: uppercase; }
.picker__note { text-align: center; color: var(--ink-3); font-size: 13.5px; margin-top: 10px; }
.picker .cta { margin-top: 6px; }
.promise { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: var(--blush); border: 1px solid var(--blush-2); }
.promise p { font-size: 15px; color: var(--ink-2); }
.trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.trust span::before { content: "✓ "; color: var(--ok); font-weight: 700; }

/* pain (dark) */
.dark { background: var(--dots-light), linear-gradient(180deg, var(--plum), #241826); color: #F4ECE9; }
.pain { padding: 96px 0; overflow: hidden; }
.pain__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.pain h2 { color: #FBF6EF; margin-bottom: 20px; }
.pain p { color: #D4C6D2; font-size: 18px; }
.pain p + p { margin-top: 14px; }
.pain blockquote { margin-top: 26px; padding-left: 18px; border-left: 3px solid var(--tomato-2); font-family: var(--f-d); font-style: italic; font-size: 22px; line-height: 1.35; color: #FBF6EF; }
.pain__notes { position: relative; height: 430px; }
.pnote { position: absolute; width: 280px; padding: 30px 24px 26px; background: linear-gradient(170deg, #FFFDF9, #F1E8DC); color: var(--plum); font-family: var(--f-h); font-weight: 700; font-size: 30px; line-height: 1.05;
  box-shadow: 0 30px 40px -24px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .2); border-radius: 4px; }
.pnote::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: rgba(255, 255, 255, .35); }
.pnote s { text-decoration-color: var(--tomato); text-decoration-thickness: 3px; }
.pnote.n1 { left: 4%; top: 0; transform: rotate(-6deg); }
.pnote.n2 { right: 2%; top: 64px; transform: rotate(5deg); }
.pnote.n3 { left: 10%; top: 168px; transform: rotate(-2deg); }
.pnote.n4 { right: 6%; top: 262px; transform: rotate(3deg); background: linear-gradient(170deg, #FBE89A, #F6DA6A); font-size: 33px; }

/* press (try it) */
.press { padding: 96px 0; background: var(--dots), var(--paper); }
.press__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px auto 8px; max-width: 720px; }
.press__chips button { padding: 11px 18px; border-radius: 99px; background: var(--card); border: 1.5px solid var(--line-2); font-weight: 700; font-size: 15.5px; transition: all .15s; }
.press__chips button:hover { border-color: var(--plum); }
.press__chips button.on { background: var(--plum); color: #fff; border-color: var(--plum); }
.press__stage { position: relative; min-height: 340px; display: grid; place-items: center; margin: 34px 0 10px; }
.press__notes { width: 100%; display: grid; gap: 18px; justify-items: center; }
.press__notes .note { width: min(520px, 100%); text-align: left; }
.note { position: relative; background: linear-gradient(170deg, #FBE89A 0%, #F6DA6A 100%); color: var(--plum); padding: 26px 26px 24px; border-radius: 3px;
  box-shadow: 0 22px 30px -18px rgba(80, 50, 10, .55), 0 1px 3px rgba(80, 50, 10, .15); }
.note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(2deg); background: rgba(255, 255, 255, .55); }
.note .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tomato-d); margin-bottom: 6px; }
.note .t { font-family: var(--f-d); font-weight: 600; font-size: 26px; line-height: 1.2; }
.note.n-1 { transform: rotate(-1.5deg); animation: pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.note.n-2 { transform: rotate(1.2deg); background: linear-gradient(170deg, #FFFDF9, #F3EADD); animation: pop .5s .12s cubic-bezier(.3, 1.5, .5, 1) both; }
.note.n-3 { transform: rotate(-.8deg); background: linear-gradient(170deg, #FFFDF9, #F3EADD); animation: pop .5s .24s cubic-bezier(.3, 1.5, .5, 1) both; }
.note.n-2 .t, .note.n-3 .t { font-size: 20px; }
@keyframes pop { from { opacity: 0; transform: translateY(30px) scale(.9) rotate(0); } }
.press__more { color: var(--ink-3); margin: 18px auto 22px; font-family: var(--f-h); font-size: 25px; line-height: 1.15; color: var(--ink-2); max-width: 30em; }

/* anatomy */
.anatomy { padding: 96px 0; background: var(--paper-2); }
.anatomy__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.anatomy__visual { position: relative; justify-self: center; }
.phone { width: 300px; border-radius: 46px; background: var(--plum); padding: 11px; box-shadow: var(--sh-3), inset 0 0 0 2px var(--plum-2); position: relative; }
.phone img { border-radius: 36px; width: 100%; }
.pin { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--tomato-d); color: #fff; display: grid; place-items: center; font-family: var(--f-d); font-weight: 700; font-size: 16px; box-shadow: 0 0 0 4px var(--paper-2), 0 6px 12px -4px rgba(0, 0, 0, .35); }
.pin.p1 { left: -18px; top: 62px; }
.pin.p2 { right: -18px; top: 190px; }
.pin.p3 { left: -18px; top: 368px; }
.pin.p4 { right: -18px; top: 430px; }
.pin.p5 { left: -18px; top: 484px; }
.parts { list-style: none; counter-reset: p; display: grid; gap: 18px; margin-top: 26px; }
.parts li { counter-increment: p; position: relative; padding-left: 52px; }
.parts li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--card); display: grid; place-items: center; font-family: var(--f-d); font-weight: 700; color: var(--tomato-d); }
.parts b { display: block; font-family: var(--f-d); font-weight: 600; font-size: 19px; }
.parts span { color: var(--ink-2); font-size: 16px; }

/* inside (pages carousel) */
.inside { padding: 96px 0 80px; background: var(--paper); }
.car { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 40px 6px 16px; scrollbar-width: none; }
.car::-webkit-scrollbar { display: none; }
.car figure { flex: 0 0 auto; width: min(250px, 66vw); scroll-snap-align: center; }
.car img { width: 100%; border-radius: 6px; box-shadow: var(--sh-2); background: #fff; aspect-ratio: 148 / 210; object-fit: cover; }
.car figure:nth-last-child(-n+2) img { aspect-ratio: 210 / 297; }
.car figcaption { margin-top: 14px; font-size: 14.5px; color: var(--ink-3); }
.car figcaption b { display: block; color: var(--ink); font-family: var(--f-d); font-weight: 600; font-size: 17px; }
.car__nav { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.car__nav button { width: 48px; height: 48px; border-radius: 50%; background: var(--card); border: 1px solid var(--line-2); font-size: 26px; line-height: 1; box-shadow: var(--sh-1); }

/* contents */
.contents { padding: 96px 0; background: var(--dots), var(--paper-2); }
.contents__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.contents__intro p { color: var(--ink-2); margin-top: 14px; }
.also { margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--sh-1); }
.also b { font-family: var(--f-d); font-weight: 600; font-size: 18px; }
.also ul { list-style: none; margin-top: 10px; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.also li { position: relative; padding-left: 26px; }
.also li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--tomato); }
.chapters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chap { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px 10px 10px; box-shadow: var(--sh-1); }
.chap img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.chap small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tomato-d); }
.chap b { display: block; font-family: var(--f-d); font-weight: 600; font-style: italic; font-size: 17px; line-height: 1.2; }

/* starts */
.starts-sec { padding: 96px 0; background: var(--paper); }
.starts { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 22px; margin-top: 40px; }
.starts li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.starts .n { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--plum); color: #fff; display: grid; place-items: center; text-align: center; line-height: 1; }
.starts .n small { display: block; font-size: 8px; font-weight: 700; letter-spacing: .14em; opacity: .7; }
.starts .n b { font-family: var(--f-d); font-size: 19px; font-weight: 700; }
.starts li:first-child .n { background: var(--tomato-d); }
.starts b.t { display: block; font-family: var(--f-d); font-weight: 600; font-size: 17.5px; }
.starts span.o { color: var(--ink-3); font-size: 14.5px; display: block; }

/* packs */
.packs { padding: 96px 0; background: var(--dots), var(--paper-2); }
.packs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 44px 0 30px; }
.pack { background: var(--card); border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.pack__img img { width: 100%; aspect-ratio: 50 / 48; object-fit: cover; }
.pack__tx { padding: 20px 22px 24px; }
.pack__tx h3 { font-size: 21px; }
.pack__tx small { display: block; color: var(--ink-3); font-size: 13.5px; margin: 4px 0 10px; }
.pack__tx p { font-size: 15.5px; color: var(--ink-2); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; margin-bottom: 10px; letter-spacing: .08em; text-transform: uppercase; }
.tag.both { background: #E3F2EA; color: #23805A; }
.tag.only { background: var(--blush); color: var(--tomato-d); }
.packs__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* diag */
.diag { padding: 96px 0; background: var(--paper); }
.diag__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; }
.diag__art img { border-radius: 50%; box-shadow: var(--sh-3); aspect-ratio: 1; object-fit: cover; }
.diag h2 { font-size: clamp(28px, 3.4vw, 40px); }
.dsteps { list-style: none; counter-reset: d; display: grid; gap: 14px; margin-top: 22px; }
.dsteps li { counter-increment: d; position: relative; padding: 18px 20px 18px 66px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); font-size: 16px; color: var(--ink-2); }
.dsteps li::before { content: counter(d); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--tomato-d); color: #fff; display: grid; place-items: center; font-family: var(--f-d); font-weight: 700; }
.dsteps b { color: var(--ink); }

/* calc */
.calc-sec { padding: 40px 0 96px; background: var(--paper); }
.calc { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 34px 34px 30px; box-shadow: var(--sh-2); overflow: hidden; }
.calc__art { position: absolute; right: -40px; top: -40px; width: 200px; opacity: .9; transform: rotate(8deg); }
.calc__art img { border-radius: 50%; }
.calc h2 { font-size: clamp(26px, 3.2vw, 36px); max-width: 15em; margin-bottom: 20px; position: relative; padding-right: 150px; }
.calc label { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; position: relative; }
.calc input[type=range] { width: 100%; margin: 16px 0 6px; accent-color: var(--tomato-d); height: 30px; }
.calc__out { display: flex; gap: 20px; align-items: center; margin: 18px 0 20px; padding-top: 18px; border-top: 1px dashed var(--line-2); color: var(--ink-2); }
.calc__n { font-family: var(--f-d); font-weight: 700; font-size: 70px; line-height: 1; color: var(--tomato-d); min-width: 1.9em; }

/* how */
.how { padding: 96px 0; background: var(--paper-2); }
.how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.how article { background: var(--card); border-radius: var(--r-lg); padding: 28px; border: 1px solid var(--line); box-shadow: var(--sh-1); }
.how .num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--tomato-d); color: #fff; font-family: var(--f-d); font-weight: 700; font-size: 18px; margin-bottom: 14px; }
.how p { color: var(--ink-2); font-size: 16px; margin-top: 8px; }

/* gift */
.gift { padding: 96px 0; background: var(--paper); }
.gift__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: center; }
.gift__visual { position: relative; }
.gift__visual img { border-radius: var(--r-xl); box-shadow: var(--sh-3); }
.gift__note { position: absolute; right: -16px; bottom: -22px; width: 220px; padding: 24px 18px 20px; background: linear-gradient(170deg, #FBE89A, #F6DA6A); font-family: var(--f-h); font-weight: 700; font-size: 26px; line-height: 1.05; color: var(--plum); transform: rotate(4deg); box-shadow: 0 22px 30px -18px rgba(80, 50, 10, .55); text-align: center; }
.gift p { color: var(--ink-2); margin-top: 16px; font-size: 18px; }
.handline { font-family: var(--f-h); font-weight: 700; font-size: 26px !important; color: var(--tomato-d) !important; line-height: 1.15; }

/* sources */
.sources { padding: 40px 0 96px; background: var(--paper); }
.sources__card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--dots), var(--card); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 38px; box-shadow: var(--sh-2); }
.sources__card h2 { font-size: clamp(26px, 3vw, 34px); }
.sources__card p { color: var(--ink-2); margin-top: 12px; font-size: 16px; }
.cites { display: flex; flex-wrap: wrap; gap: 8px; }
.cites span { font-size: 13.5px; font-weight: 700; padding: 7px 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line-2); }

/* faq */
.faq { padding: 96px 0; background: var(--paper-2); }
.faq__list { margin-top: 30px; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 16px; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 26px; line-height: .8; color: var(--tomato-d); font-weight: 400; }
.faq details[open] summary::after { content: "×"; }
.faq details p { padding: 0 0 20px; color: var(--ink-2); font-size: 16.5px; }

/* final */
.final { padding: 110px 0 120px; text-align: center; background: radial-gradient(50% 45% at 50% 100%, rgba(242, 184, 128, .28), transparent 70%), var(--dots-light), linear-gradient(180deg, var(--plum), #1E141F); overflow: hidden; }
.final .bigknob { margin-bottom: 44px; }
.final__hand { font-family: var(--f-h); font-weight: 700; font-size: 32px; color: var(--sun); }
.final h2 { color: #FBF6EF; margin: 8px 0 30px; }
.final__note { color: #BFAFBD; font-size: 14.5px; margin-top: 14px; }
.final__note a { color: #FBF6EF; }

/* footer */
.foot { background: #1A111B; color: #B9AAB7; padding: 60px 0 120px; font-size: 15px; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; margin-bottom: 28px; }
.foot__grid p { margin-top: 12px; max-width: 30em; }
.foot__grid b { color: #FBF6EF; display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.foot__grid a { display: block; text-decoration: none; padding: 3px 0; }
.foot__grid a:hover { color: #fff; }
.foot__pay { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 14px; }
.foot a[href^="tel"] { color: #fff; }

/* sticky + checkout */
.sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 20px; background: rgba(255, 253, 249, .97);
  backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: 0 20px 40px -20px rgba(43, 20, 20, .5); max-width: 560px; margin: 0 auto; }
.sticky img { width: 38px; height: 54px; object-fit: cover; border-radius: 3px; box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .4); }
.sticky div { flex: 1; min-width: 0; line-height: 1.25; }
.sticky b { display: block; font-family: var(--f-d); font-weight: 700; }
.sticky span#st-sel { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.sticky .cta { min-height: 46px; padding: 10px 20px; font-size: 16px; }
dialog#co { margin: auto; border: 0; padding: 0; border-radius: 22px; width: min(520px, 94vw); max-height: 92vh; background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); }
dialog#co::backdrop { background: rgba(35, 26, 36, .55); backdrop-filter: blur(3px); }
.co-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; z-index: 2; font-family: var(--f-d); }
.co-x { font-size: 28px; line-height: 1; width: 40px; height: 40px; border-radius: 50%; }
.co-body { padding: 8px 12px 16px; min-height: 360px; }
.co-load { text-align: center; color: var(--ink-3); padding: 60px 0; }
dialog#co.is-ready .co-load { display: none; }

/* legal pages (tools/legal.py) */
.bar { position: sticky; top: 0; z-index: 40; display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; background: rgba(251, 246, 239, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar-cta { font-weight: 700; font-size: 15px; text-decoration: none; padding: 9px 16px; border-radius: 99px; background: var(--plum); color: #fff; }
.legal { padding: 60px 0 80px; background: var(--dots), var(--paper); }
.legal h1 { font-size: clamp(34px, 5vw, 50px); margin-bottom: 22px; }
.legal h2 { font-size: 24px; margin: 30px 0 10px; }
.legal p, .legal li { color: var(--ink-2); font-size: 17px; }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 8px 0 0 22px; }
.foot p a { color: inherit; }

/* thank-you page reuses: */
.knob-mini { display: inline-block; width: 64px; height: 64px; border-radius: 50%; position: relative; background: radial-gradient(circle at 50% 34%, #FF8A66, var(--tomato) 50%, #B8301A); box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line-2), 0 12px 20px -8px rgba(200, 60, 30, .5); }
.knob-mini.big { width: 64px; height: 64px; }

@media (max-width: 980px) {
  .hero__grid, .pain__grid, .anatomy__grid, .contents__grid, .diag__grid, .gift__grid, .sources__card { grid-template-columns: 1fr; }
  .hero__visual { position: relative; top: 0; }
  .nav { display: none; }
  .hdr__cta { margin-left: auto; }
  .packs__grid { grid-template-columns: 1fr 1fr; }
  .how__grid { grid-template-columns: 1fr; }
  .pain__notes { height: 400px; max-width: 460px; margin: 0 auto; width: 100%; }
  .diag__art { max-width: 300px; margin: 0 auto; }
  .gift__visual { max-width: 460px; }
}
@media (max-width: 640px) {
  :root { --gut: 16px; }
  body { font-size: 16.5px; }
  .hero { padding-top: 18px; }
  .hero__grid { gap: 30px; }
  .hero h1 { font-size: 36px; text-align: center; }
  .eyebrow.center-m { justify-content: center; }
  .hero__sub { text-align: center; }
  .chips { justify-content: center; }
  .frame__tag { left: 12px; bottom: 12px; }
  .pain, .press, .anatomy, .inside, .contents, .starts-sec, .packs, .diag, .how, .gift, .faq { padding: 68px 0; }
  .pnote { width: 230px; font-size: 25px; padding: 24px 18px 20px; }
  .pnote.n4 { font-size: 27px; }
  .bigknob { --s: 180px; }
  .bigknob b { font-size: 30px; }
  .note .t { font-size: 22px; }
  .chapters, .starts, .packs__grid { grid-template-columns: 1fr; }
  .phone { width: 250px; }
  .pin.p1 { top: 50px; } .pin.p2 { top: 160px; } .pin.p3 { top: 306px; } .pin.p4 { top: 356px; } .pin.p5 { top: 402px; }
  .calc { padding: 26px 20px; }
  .calc__art { width: 120px; right: -34px; top: -34px; }
  .calc h2 { padding-right: 70px; }
  .calc__n { font-size: 56px; }
  .sources__card { padding: 26px 20px; }
  .foot__grid { grid-template-columns: 1fr; }
  .gift__note { right: 6px; width: 190px; font-size: 22px; }
}