/* The Red Pen: the daily proofreading game (/red-pen). Prefix rp-.
 * Red is the pen's ink ONLY (circles, strikes, handwritten fixes, margin marks, the ink well).
 * Everything else is Zeal's palette: cream paper, emerald structure, amber for the editor.
 * Handwriting: Caveat 600 (OFL, Google Fonts; latin subset, 17 KB, self-hosted).          */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/caveat-600-latin.woff2") format("woff2"); }

.zs-rp { --rp-ink: #C42A29; --rp-ink-soft: rgba(196,42,41,.14); --rp-ed: #D98A0B; --rp-ed-ink: var(--z-amber-ink);
  --rp-paper: #FFFDF8; --rp-desk: #EEDFCC; --rp-hand: "Caveat", "Lora", Georgia, serif; }
.rp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.rp { position: relative; padding-bottom: var(--z-section-sm); }
.rp__in { display: flex; flex-direction: column; min-width: 0; }
.rp__in > * { min-width: 0; }

/* ---------------- hero ---------------- */
.rp-hero { padding-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.rp-hero .z-eyebrow { margin-top: clamp(1.25rem, 3vw, 2.25rem); }
.rp-hero__title { margin-top: .55rem; font-family: var(--z-font-display); font-size: var(--z-fs-3xl); font-weight: 600; line-height: var(--z-lh-tight); letter-spacing: var(--z-track-display); color: var(--z-green); }
.rp-hero__title em { display: block; margin-top: .45rem; font-size: .4em; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--z-amber-ink); }
.rp-hero__lede { margin-top: .9rem; max-width: 40rem; }
.rp-hero__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; padding: 0; list-style: none; }
.rp-hero__meta li { padding: .35rem .8rem .25rem; border: 1px solid var(--line-strong); border-radius: var(--z-r-pill); background: var(--z-white); font-size: var(--z-fs-xs); font-weight: 600; color: var(--z-green); }

/* ---------------- the desk ---------------- */
.rp-desk {
  position: relative; padding: clamp(.75rem, 2.5vw, 2rem) clamp(.5rem, 3vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--z-r-lg); background: radial-gradient(120% 90% at 50% 0%, #F3E7D6 0%, var(--rp-desk) 60%, #E6D3BB 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -30px 60px -40px rgba(140,83,0,.25);
}
.rp-hud {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  max-width: 44rem; margin: 0 auto .9rem; padding: .55rem .8rem; border-radius: var(--z-r-md);
  background: color-mix(in srgb, #FBF6EC 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 8px 18px -14px rgba(2,29,19,.45); transition: top var(--z-dur-3) var(--z-ease-out);
}
body:has(.z-header:not(.is-hidden)) .rp-hud { top: var(--z-header-h); }
.rp-inkm { position: relative; display: flex; align-items: center; gap: .55rem; min-width: 0; }
.rp-well { flex: none; width: 34px; height: 37px; overflow: visible; }
.rp-well__neck { fill: rgba(6,69,48,.1); stroke: var(--z-green); stroke-width: 1.6; }
.rp-well__bg { fill: rgba(255,255,255,.7); }
.rp-well__glass { fill: none; stroke: var(--z-green); stroke-width: 1.8; stroke-linejoin: round; }
.rp-well__shine { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .75; }
.rp-well__liq { transform: translateY(calc((1 - var(--lv, 1)) * 30px)); transition: transform 1s var(--z-ease-spring); }
.rp-well__wave { fill: var(--rp-ink); }
.rp-inkm.is-slosh .rp-well__wave { animation: rp-wave 1s linear 2; }
@keyframes rp-wave { 0% { transform: translateX(0) scaleY(1); } 50% { transform: translateX(6px) scaleY(1.12); } 100% { transform: translateX(12px) scaleY(1); } }
.rp-inkm__txt { display: flex; flex-direction: column; line-height: 1.1; }
.rp-inkm__v { font-size: var(--z-fs-sm); font-weight: 700; color: var(--z-green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-inkm__k { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.rp-drops { display: flex; gap: 2px; }
.rp-drop { width: 9px; height: 12px; }
.rp-drop path { fill: var(--rp-ink); stroke: var(--rp-ink); stroke-width: 1.2; transition: fill .4s, opacity .4s; }
.rp-drop.is-gone path { fill: transparent; opacity: .45; }
.rp-fall { position: absolute; left: 12px; top: 26px; width: 10px; height: 14px; pointer-events: none; z-index: 2; }
.rp-fall path { fill: var(--rp-ink); }
.rp-fall.is-falling { animation: rp-fall .85s cubic-bezier(.5,0,.85,.6) forwards; }
@keyframes rp-fall { 0% { transform: translateY(-6px) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(0) scale(1); }
  80% { transform: translateY(46px) scale(1, 1.15); opacity: 1; } 100% { transform: translateY(52px) scale(2.2, .25); opacity: 0; } }
.rp-foundm { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.rp-slots { display: flex; gap: 5px; }
.rp-slot { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(6,69,48,.3); transition: box-shadow .3s, background-color .3s, transform .35s var(--z-ease-spring); }
.rp-slot.is-found { box-shadow: inset 0 0 0 2px var(--rp-ink); transform: scale(1.12); }
.rp-slot.is-clean { background: radial-gradient(circle, var(--rp-ink) 0 3.5px, transparent 4px); box-shadow: inset 0 0 0 2px var(--rp-ink); }
.rp-slot.is-missed { box-shadow: none; background: none; outline: 2px dashed var(--rp-ed); outline-offset: -2px; }
.rp-foundm__v { font-size: var(--z-fs-xs); font-weight: 700; color: var(--z-green); white-space: nowrap; }
.rp-done { flex: none; min-height: 40px; padding: .45rem .9rem .3rem; border-radius: var(--z-r-pill); border: 1.5px solid var(--line-strong); background: var(--z-white); font: inherit; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); cursor: pointer; transition: border-color .2s, background-color .2s; }
.rp-done:hover { border-color: var(--z-amber); }
.rp-done.is-sure { background: var(--z-amber); border-color: var(--z-amber); color: var(--z-green-950); }
.rp-done[hidden] { display: none; }
@media (max-width: 520px) {
  .rp-hud { gap: .4rem; padding: .45rem .55rem; }
  .rp-drops { display: none; }
  .rp-well { width: 28px; height: 31px; }
  .rp-done { padding: .4rem .7rem .25rem; font-size: var(--z-fs-xs); }
  .rp-slot { width: 13px; height: 13px; }
}

/* ---------------- the paper ---------------- */
.rp-paperwrap { position: relative; max-width: 44rem; margin: 0 auto; }
.rp-paper {
  position: relative; padding: clamp(1.1rem, 3vw, 2.4rem) clamp(.9rem, 3.2vw, 2.6rem) clamp(1rem, 2.5vw, 1.75rem) clamp(.4rem, 1.5vw, 1.2rem);
  background: var(--rp-paper); border-radius: 3px;
  box-shadow: 0 1px 1px rgba(40,40,40,.06), 0 2px 0 -1px #FBF7EE, 0 3px 0 -1px rgba(40,40,40,.06), 0 6px 0 -3px #F8F2E6,
              0 7px 0 -3px rgba(40,40,40,.07), 0 30px 50px -28px rgba(2,29,19,.45);
}
.rp-paper::before { /* fine paper grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .1; mix-blend-mode: multiply;
  background-image: var(--z-grain); background-size: 220px 220px;
}
.rp-paper.is-in { animation: rp-slide .85s var(--z-ease-out) backwards; }
@keyframes rp-slide { from { opacity: 0; transform: translate(40px, -24px) rotate(4deg); } }
.rp-paper.is-out { animation: rp-slide-out .45s var(--z-ease-in-out) forwards; }
@keyframes rp-slide-out { to { opacity: 0; transform: translate(-60px, 20px) rotate(-5deg); } }
@media (min-width: 900px) { .rp-paper { transform: rotate(-.35deg); } }
.rp-paper__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; margin-left: clamp(2.4rem, 6vw, 3.6rem); padding-bottom: .65rem; border-bottom: 1px solid rgba(140,83,0,.22); }
.rp-run { font-size: var(--z-fs-xs); font-weight: 600; letter-spacing: .06em; color: var(--z-green); }
.rp-run i { font-family: var(--z-font-display); font-size: 1.12em; font-weight: 500; letter-spacing: 0; }
.rp-count { font-size: var(--z-fs-xs); font-weight: 600; color: var(--rp-ed-ink); }
.rp-body { position: relative; display: grid; grid-template-columns: clamp(2.4rem, 6vw, 3.6rem) minmax(0, 1fr); margin-top: .5rem; }
.rp-margin { position: relative; border-right: 1.5px solid rgba(196,42,41,.18); margin-right: .7rem; }
.rp-text {
  font-family: var(--z-font-display); font-size: 1.25rem; line-height: 2.2; color: #2E2A25; hyphens: none; overflow-wrap: break-word;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
@media (max-width: 600px) { .rp-text { font-size: 1.1875rem; line-height: 2.3; } }
.rp-w {
  position: relative; display: inline; padding: 0; margin: 0; border: 0; border-radius: 3px; background: none; font: inherit; line-height: inherit;
  color: inherit; letter-spacing: inherit; text-align: inherit; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color .15s, color .3s;
}
.rp-w::before { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1lh; transform: translateY(-50%); }
@media (hover: hover) and (pointer: fine) {
  .rp-text .rp-w { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M22 2l8 8-14 14-8 1 1-8z' fill='%23C42A29' stroke='%23fff' stroke-width='1.2'/%3E%3Cpath d='M9 17l6 6-11 6z' fill='%235F5A52' stroke='%23fff' stroke-width='1.2'/%3E%3Ccircle cx='4.6' cy='27.4' r='1.3' fill='%23C42A29'/%3E%3C/svg%3E") 3 29, pointer; }
  .rp-w:hover { background: rgba(140,83,0,.07); }
}
.rp-w:focus { outline: none; }
.rp-w:focus-visible { outline: 2px dotted var(--z-green); outline-offset: 2px; background: rgba(6,69,48,.06); }
.rp-w.is-checked { color: #6B655C; }
.rp-w.is-found { color: #2E2A25; }
.rp-text.is-locked .rp-w { cursor: default; }
.rp-w .rp-core { position: relative; }
.rp-w.is-gone { display: none; }
.rp-w.is-fixed .rp-core { color: var(--z-green-600); text-decoration: underline dotted rgba(10,90,63,.55); text-underline-offset: 5px; }
.rp-text.is-resetting .rp-w { animation: rp-set .45s var(--z-ease-out) backwards; animation-delay: calc(var(--k) * 16ms); }
@keyframes rp-set { from { opacity: .15; transform: translateY(-4px); filter: blur(1px); } }
.rp-honest { margin: 1rem 0 0 clamp(2.4rem, 6vw, 3.6rem); font-size: var(--z-fs-2xs); font-style: italic; color: var(--fg-muted); }
/* Once graded, the paper grows a blank foot for the stamp, so it never lands on the honesty line. */
.rp-paper.is-stamped .rp-honest { margin-bottom: clamp(6.75rem, 15vw, 8rem); }

/* ---------------- ink on the page (one SVG overlay + handwriting) ---------------- */
.rp-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rp-c { fill: none; stroke: var(--rp-ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; opacity: .92; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rp-draw .6s cubic-bezier(.5,.05,.25,1) forwards; }
.rp-c--alt { stroke-width: 1.7; opacity: .7; }
@keyframes rp-draw { to { stroke-dashoffset: 0; } }
.rp-c.is-smudge { animation: rp-draw .45s cubic-bezier(.5,.05,.25,1) forwards, rp-smudge 1s ease-out .5s forwards; }
@keyframes rp-smudge { 0% { opacity: .92; } 35% { opacity: .5; stroke-width: 7; transform: translate(1px, 2px); } 100% { opacity: .1; stroke-width: 9; transform: translate(3px, 4px); } }
.rp-blot { fill: var(--rp-ink); opacity: 0; animation: rp-blot 1.2s ease-out .5s forwards; }
@keyframes rp-blot { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: .22; } 100% { opacity: .1; transform: scale(1); } }
.rp-strike { fill: none; stroke: var(--rp-ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rp-draw .35s ease-out forwards; }
.rp-strike--ed { stroke: var(--rp-ed); }
.rp-ed { fill: none; stroke: var(--rp-ed); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 5; }
.rp-mdraw { fill: none; stroke: #fff; stroke-width: 8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rp-draw .7s ease-out forwards; }
.rp-mk { opacity: 0; animation: rp-mk .5s var(--z-ease-spring) .45s forwards; transform-box: fill-box; transform-origin: center; }
.rp-mk text { font-family: var(--rp-hand); font-weight: 600; font-size: 19px; fill: var(--rp-ink); }
.rp-mk path { fill: none; stroke: var(--rp-ink); stroke-width: 1.4; stroke-linecap: round; }
.rp-mk--ed text { fill: var(--rp-ed-ink); } .rp-mk--ed path { stroke: var(--rp-ed); stroke-dasharray: 3 3; }
@keyframes rp-mk { from { opacity: 0; transform: scale(.4) rotate(-12deg); } to { opacity: 1; transform: none; } }
.rp-ink .is-still, .rp-ink.is-still * { animation: none !important; stroke-dashoffset: 0; opacity: inherit; }
.rp-ink.is-still .rp-mk { opacity: 1; }
.rp-ink.is-faded { opacity: 0; transition: opacity .6s; }
.rp-hand { position: absolute; inset: 0; pointer-events: none; }
.rp-fixw {
  position: absolute; transform: translate(-50%, 0) rotate(-2.5deg); transform-origin: 50% 100%; white-space: nowrap;
  font-family: var(--rp-hand); font-weight: 600; font-size: 1.25rem; line-height: 1; color: var(--rp-ink);
  clip-path: inset(-20% 100% -20% 0); animation: rp-write .8s cubic-bezier(.4,0,.3,1) .25s forwards;
}
.rp-fixw--ed { color: var(--rp-ed-ink); }
@keyframes rp-write { to { clip-path: inset(-20% -6% -20% 0); } }
.rp-miss { position: absolute; transform: translate(0, -50%); font-family: var(--z-font-body); font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-ed-ink); opacity: 0; animation: rp-fade .4s ease-out .6s forwards; }
@keyframes rp-fade { to { opacity: 1; } }
.rp-hand.is-still > *, .rp-hand > .is-still { animation: none; clip-path: none; opacity: 1; }
.rp-hand.is-faded { opacity: 0; transition: opacity .6s; }

/* ---------------- the fix card ---------------- */
.rp-card {
  position: absolute; z-index: 20; left: 0; top: 0; width: min(340px, calc(100% - 1rem)); padding: .85rem .95rem .9rem;
  border-radius: var(--z-r-md); background: #FFFEFA; border: 1px solid rgba(40,40,40,.12);
  box-shadow: 0 2px 4px rgba(4,48,31,.06), 0 22px 44px -18px rgba(2,29,19,.5); transform-origin: 50% 0;
  animation: rp-card .35s var(--z-ease-spring);
}
.rp-card::before { content: ""; position: absolute; top: -7px; left: var(--ax, 50%); width: 13px; height: 13px; margin-left: -6.5px; background: #FFFEFA; border-left: 1px solid rgba(40,40,40,.12); border-top: 1px solid rgba(40,40,40,.12); transform: rotate(45deg); }
.rp-card.is-up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
@keyframes rp-card { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.rp-card__cat { display: flex; align-items: center; gap: .45rem; font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rp-ink); }
.rp-card__cat b { font-family: var(--rp-hand); font-size: 1.3rem; letter-spacing: 0; text-transform: none; line-height: 1; }
.rp-card__h { margin-top: .2rem; font-family: var(--z-font-display); font-size: var(--z-fs-md); font-weight: 600; color: var(--z-green); }
.rp-card__opts { display: grid; gap: .4rem; margin-top: .55rem; }
.rp-opt { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 44px; padding: .4rem .75rem .3rem; border-radius: var(--z-r-sm); border: 1.5px solid var(--line-strong); background: var(--z-white); font-family: var(--z-font-display); font-size: 1.0625rem; text-align: left; color: var(--z-charcoal); cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--z-ease-spring); }
.rp-opt:hover:not(:disabled) { border-color: var(--z-amber); transform: translateY(-1px); }
.rp-opt:focus-visible { outline: 3px solid var(--z-green); outline-offset: 2px; }
.rp-opt__k { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--z-green-50); font-family: var(--z-font-body); font-size: .75rem; font-weight: 700; color: var(--z-green); }
.rp-opt.is-right { border-color: var(--z-green); background: var(--z-green-50); }
.rp-opt.is-right .rp-opt__k { background: var(--z-green); color: #fff; }
.rp-opt.is-wrong { border-color: var(--rp-ed); background: #FFF6E6; text-decoration: line-through; text-decoration-color: var(--rp-ed); }
.rp-opt:disabled { cursor: default; }
.rp-card__msg { min-height: 1.3em; margin-top: .45rem; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); }

/* ---------------- the pen, the stamp ---------------- */
.rp-pen { position: absolute; right: -88px; top: 18%; width: 34px; height: auto; transform: rotate(18deg); filter: drop-shadow(6px 10px 8px rgba(2,29,19,.28)); pointer-events: none; transition: transform .6s var(--z-ease-spring); }
.rp-desk.is-writing .rp-pen { transform: rotate(10deg) translate(-6px, -10px); }
@media (max-width: 1080px) { .rp-pen { display: none; } }
.rp-stampwrap { position: absolute; right: -1.4rem; bottom: -1.6rem; z-index: 5; width: min(50%, 270px); transform: rotate(-9deg); color: #0A5A3F; pointer-events: none; }
.rp-stampwrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp-stampbleed { position: absolute; inset: 0; opacity: 0; }
.rp-stampbleed svg { filter: url(#rp-bleed); }
.rp-stampsvg__k { font-family: var(--z-font-body); font-size: 12px; font-weight: 700; letter-spacing: .18em; fill: currentColor; }
.rp-stampsvg__g { font-family: var(--z-font-display); font-size: 30px; font-weight: 700; letter-spacing: .04em; fill: currentColor; }
.rp-stampsvg__s { font-family: var(--z-font-body); font-size: 13px; font-weight: 700; letter-spacing: .2em; fill: currentColor; }
.rp-stamp { position: relative; opacity: .88; mix-blend-mode: multiply; }
.rp-stampwrap.is-on .rp-stamp { animation: rp-stamp .75s cubic-bezier(.2,.9,.25,1.15) backwards; }
.rp-stampwrap.is-on .rp-stampbleed { animation: rp-bleed 1.4s ease-out .32s forwards; }
@keyframes rp-stamp { 0% { opacity: 0; transform: scale(2.3) rotate(-10deg); } 55% { opacity: .95; transform: scale(.93) rotate(1deg); } 75% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes rp-bleed { 0% { opacity: 0; transform: scale(.98); } 30% { opacity: .38; } 100% { opacity: .2; transform: scale(1.035); } }
.rp-paper.is-thud { animation: rp-thud .35s ease-out .3s; }
@keyframes rp-thud { 40% { transform: translateY(2px) rotate(-.35deg) scale(.995); } }
.rp-spotless { position: absolute; left: -36%; top: -4%; padding: .6rem .7rem .45rem; border: 3px double var(--rp-ed); border-radius: 50%; color: var(--rp-ed-ink); font-size: .625rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-align: center; line-height: 1.15; width: 5.6rem; transform: rotate(14deg); mix-blend-mode: multiply; opacity: 0; }
.rp-stampwrap.is-on .rp-spotless { animation: rp-spot .6s cubic-bezier(.2,.9,.25,1.15) .9s forwards; }
@keyframes rp-spot { 0% { opacity: 0; transform: rotate(14deg) scale(2); } 100% { opacity: .9; transform: rotate(14deg) scale(1); } }
.rp-stampwrap.is-still .rp-stamp, .rp-stampwrap.is-still .rp-spotless { animation: none; opacity: .88; }
.rp-stampwrap.is-still .rp-stampbleed { animation: none; opacity: .2; }
@media (max-width: 600px) { .rp-stampwrap { right: -.3rem; bottom: -1.3rem; width: min(62%, 230px); } }
.rp-mode { max-width: 44rem; margin: 2.4rem auto 0; padding: .55rem .9rem; border-radius: var(--z-r-sm); background: rgba(255,255,255,.55); font-size: var(--z-fs-sm); color: var(--z-green); text-align: center; }
.rp-mode a, .rp-mode button { font: inherit; font-weight: 600; color: var(--z-green); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }

/* ---------------- after the reveal ---------------- */
.rp-after { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); margin-top: clamp(1.75rem, 4vw, 3rem); }
.rp-after > * { min-width: 0; }
.rp-after h2, .rp-archive h2 { font-family: var(--z-font-display); font-size: var(--z-fs-xl); font-weight: 600; line-height: 1.15; color: var(--z-green); outline: none; }
.rp-after__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.rp-link { padding: .3rem 0; border: 0; background: none; font: inherit; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rp-link:hover { color: var(--z-amber-ink); }

.rp-notes__list { display: grid; gap: .65rem; margin-top: 1rem; padding: 0; list-style: none; counter-reset: rpn; }
.rp-note {
  position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .1rem .85rem; padding: .9rem 1rem .95rem .8rem;
  border-radius: var(--z-r-md); background: var(--z-white); border: 1px solid var(--line); box-shadow: var(--z-shadow-1);
  animation: rp-rise .5s var(--z-ease-out) backwards; animation-delay: calc(var(--k) * 110ms);
}
@keyframes rp-rise { from { opacity: 0; transform: translateY(10px); } }
.rp-note__mk { grid-row: span 3; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-family: var(--rp-hand); font-size: 1.35rem; line-height: 1; }
.rp-note.is-clean .rp-note__mk, .rp-note.is-found .rp-note__mk { color: var(--rp-ink); box-shadow: inset 0 0 0 1.6px var(--rp-ink); }
.rp-note.is-missed .rp-note__mk { color: var(--rp-ed-ink); outline: 1.6px dashed var(--rp-ed); outline-offset: -2px; }
.rp-note__top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .65rem; font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-muted); }
.rp-note__st { padding: .15rem .5rem .05rem; border-radius: var(--z-r-pill); letter-spacing: .06em; }
.rp-note.is-clean .rp-note__st { background: var(--z-green-50); color: var(--z-green); }
.rp-note.is-found .rp-note__st { background: var(--z-amber-tint); color: var(--z-amber-ink); }
.rp-note.is-missed .rp-note__st { background: #F2EEE6; color: var(--z-ink-muted); }
.rp-note__fix { font-family: var(--z-font-display); font-size: var(--z-fs-md); color: var(--z-charcoal); }
.rp-note__fix s { color: var(--fg-muted); text-decoration-color: var(--rp-ink); text-decoration-thickness: 1.5px; }
.rp-note__fix b { font-weight: 600; color: var(--z-green); }
.rp-note__t { font-size: var(--z-fs-sm); line-height: 1.55; color: var(--fg-muted); }

.rp-result { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--z-r-lg); background: var(--z-white); border: 1px solid var(--line); box-shadow: var(--z-shadow-2); }
.rp-result__grade h2 { margin-top: .35rem; font-size: var(--z-fs-2xl); }
.rp-result__line { margin-top: .45rem; font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-md); color: var(--z-charcoal); }
.rp-result__stats { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; padding: 0; list-style: none; }
.rp-result__stats li { padding: .25rem .65rem .15rem; border-radius: var(--z-r-pill); background: var(--z-green-50); font-size: var(--z-fs-xs); font-weight: 700; color: var(--z-green); }
.rp-result__stats li.is-amber { background: var(--z-amber-tint); color: var(--z-amber-ink); }
.rp-share__k { font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.rp-share__text { margin-top: .45rem; padding: .85rem 1rem; border-radius: var(--z-r-sm); background: #FBF6EC; border: 1px dashed rgba(140,83,0,.3); font-family: var(--z-font-body); font-size: var(--z-fs-sm); line-height: 1.55; white-space: pre-wrap; color: var(--z-charcoal); }
.rp-share__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.rp-share__btns .z-btn { min-height: 44px; padding-inline: 1.1rem; }
.rp-share__status { min-height: 1.3em; margin-top: .45rem; font-size: var(--z-fs-sm); color: var(--z-green); }
.rp-story { width: 132px; height: auto; aspect-ratio: 1080 / 1920; border-radius: 10px; box-shadow: var(--z-shadow-3); transform: rotate(3deg); }
.rp-result.is-in .rp-story { animation: rp-print .9s var(--z-ease-spring) .3s backwards; }
@keyframes rp-print { from { opacity: 0; transform: translateY(30px) rotate(12deg) scale(.9); } }
@media (max-width: 900px) { .rp-result { grid-template-columns: minmax(0, 1fr); } .rp-story { width: 120px; justify-self: center; } }

.rp-habit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.rp-habit__box { position: relative; padding: 1.1rem 1.2rem 1.15rem; border-radius: var(--z-r-md); background: #FBF6EC; border: 1px solid rgba(140,83,0,.16); }
.rp-habit__k { font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.rp-habit__v { margin-top: .3rem; font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; color: var(--z-green); }
.rp-habit__v b { font-size: 1.4em; color: var(--rp-ink); font-variant-numeric: tabular-nums; }
.rp-habit__sub { margin-top: .3rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
@media (max-width: 760px) { .rp-habit { grid-template-columns: 1fr; } }
.rp-stack { position: relative; height: 56px; width: 64px; margin-bottom: .5rem; }
.rp-sheet { position: absolute; left: 0; bottom: 0; width: 44px; height: 30px; border-radius: 2px; background: var(--rp-paper); box-shadow: 0 0 0 1px rgba(40,40,40,.14), 0 3px 6px -3px rgba(2,29,19,.3);
  transform: translate(calc(var(--k) * 1.4px), calc(var(--k) * -3.4px)) rotate(calc((var(--k) % 3 - 1) * 2.5deg)); }
.rp-sheet::after { content: ""; position: absolute; left: 6px; right: 8px; top: 8px; height: 10px; background: repeating-linear-gradient(transparent 0 3px, rgba(40,40,40,.18) 3px 4px); }
.rp-sheet.is-rest { background: transparent; box-shadow: none; outline: 1.5px dashed rgba(140,83,0,.45); outline-offset: -1px; }
.rp-sheet.is-rest::after { display: none; }
.rp-sheet.is-new { animation: rp-sheet .7s var(--z-ease-spring) .2s backwards; }
@keyframes rp-sheet { from { opacity: 0; transform: translate(30px, -40px) rotate(18deg); } }

.rp-leads { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 4vw, 3rem); align-items: start; padding: clamp(1.25rem, 3.5vw, 2.5rem); border-radius: var(--z-r-lg); background: var(--z-parchment-50); border: 1px solid rgba(40,40,40,.08); }
.rp-leads__cta p:not(.z-eyebrow) { margin-top: .6rem; color: var(--fg-muted); }
.rp-leads__cta .z-btn { margin-top: 1.1rem; }
.rp-leads__svc a { font-weight: 600; color: var(--z-green); }
.rp-form { display: grid; gap: .8rem; padding: 1.25rem; border-radius: var(--z-r-md); background: var(--z-white); box-shadow: var(--z-shadow-1); }
.rp-form__h { font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; color: var(--z-green); }
.rp-form__sub { margin-top: -.4rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.rp-err { min-height: 1.2em; font-size: var(--z-fs-sm); color: var(--z-red-ink); }
.rp-form.is-sent > :not(.rp-form__done) { display: none; }
.rp-form__done { padding: 1rem; border-radius: var(--z-r-sm); background: var(--z-green-50); color: var(--z-green); font-weight: 600; animation: rp-rise .5s var(--z-ease-out); }
@media (max-width: 760px) { .rp-leads { grid-template-columns: 1fr; } .rp-leads__cta .z-btn { width: 100%; white-space: normal; } }

.rp-archive { margin-top: clamp(1.75rem, 4vw, 3rem); }
.rp-archive__sub { margin-top: .35rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.rp-archive__list { display: grid; gap: .5rem; margin-top: 1rem; padding: 0; list-style: none; }
@media (min-width: 760px) { .rp-archive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-arc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; width: 100%; min-height: 56px; padding: .65rem .9rem; border-radius: var(--z-r-md); border: 1px solid var(--line); background: var(--rp-paper); font: inherit; text-align: left; color: var(--fg); cursor: pointer; transition: transform .25s var(--z-ease-spring), border-color .2s; }
.rp-arc:hover { transform: translateY(-2px) rotate(-.3deg); border-color: var(--z-amber); }
.rp-arc__n { font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 700; color: var(--rp-ink); font-variant-numeric: tabular-nums; }
.rp-arc__t { display: block; font-family: var(--z-font-display); font-style: italic; color: var(--z-green); }
.rp-arc__m { display: block; font-size: var(--z-fs-xs); color: var(--fg-muted); }
.rp-arc__s { font-size: var(--z-fs-xs); font-weight: 700; color: var(--z-green); text-align: right; }
.rp-noscript { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: var(--z-r-sm); }

/* ---------------- what it trains + FAQ ---------------- */
.rp-teach { padding: var(--z-section-sm) 0; background: var(--z-green-900); color: var(--z-cream); }
.rp-teach h2 { max-width: 24ch; margin-top: .5rem; font-family: var(--z-font-display); font-size: var(--z-fs-2xl); font-weight: 600; line-height: 1.1; color: var(--z-white); }
.rp-teach__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; padding: 0; list-style: none; }
@media (max-width: 1000px) { .rp-teach__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rp-teach__list { grid-template-columns: 1fr; } }
.rp-teach__list li { padding: 1rem 1.1rem 1.1rem; border-radius: var(--z-r-md); background: rgba(250,249,245,.05); border: 1px solid rgba(250,249,245,.12); }
.rp-teach__mark { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--z-amber); font-family: var(--rp-hand); font-size: 1.35rem; color: var(--z-amber); }
.rp-teach__list h3 { margin-top: .6rem; font-family: var(--z-font-display); font-size: var(--z-fs-md); font-weight: 600; color: var(--z-white); }
.rp-teach__list p { margin-top: .3rem; font-size: var(--z-fs-sm); color: var(--z-green-200); }
.rp-teach__how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; padding: 0; list-style: none; counter-reset: rph; }
@media (max-width: 760px) { .rp-teach__how { grid-template-columns: 1fr; } }
.rp-teach__how li { counter-increment: rph; position: relative; padding-left: 2.2rem; font-size: var(--z-fs-sm); color: var(--z-green-200); }
.rp-teach__how li::before { content: counter(rph); position: absolute; left: 0; top: -.1rem; font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; color: var(--z-amber); }
.rp-teach__how b { color: var(--z-white); }
.rp-faq { padding: var(--z-section-sm) 0; }
.rp-faq__in { max-width: 48rem; }
.rp-faq h2 { font-family: var(--z-font-display); font-size: var(--z-fs-xl); font-weight: 600; color: var(--z-green); }
.rp-faq__q { margin-top: .75rem; padding: .9rem 1.1rem; border-radius: var(--z-r-md); background: var(--z-white); border: 1px solid var(--line); }
.rp-faq__q summary { cursor: pointer; font-weight: 600; color: var(--z-green); }
.rp-faq__q p { margin-top: .5rem; color: var(--fg-muted); }
.rp-faq__more { margin-top: 1.25rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.rp-faq__more a { color: var(--z-green); font-weight: 600; }

/* ---------------- a shared result (grade and stats only) ---------------- */
.rp--result { padding-bottom: var(--z-section); }
.rp-shared { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: center; margin-top: clamp(1.5rem, 4vw, 3rem); }
.rp-shared__paper { position: relative; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 3px; background: var(--rp-paper); transform: rotate(-.6deg);
  box-shadow: 0 1px 1px rgba(40,40,40,.06), 0 3px 0 -1px rgba(40,40,40,.06), 0 7px 0 -3px rgba(40,40,40,.07), 0 30px 50px -28px rgba(2,29,19,.45); }
.rp-shared__h { margin-top: .5rem; font-family: var(--z-font-display); font-size: var(--z-fs-2xl); font-weight: 600; color: var(--z-green); }
.rp-shared__marks { display: flex; gap: .55rem; margin-top: .75rem; }
.rp-dot { width: 20px; height: 20px; border-radius: 50%; }
.rp-dot--2 { background: var(--rp-ink); }
.rp-dot--1 { box-shadow: inset 0 0 0 2.5px var(--rp-ink); background: linear-gradient(90deg, var(--rp-ink) 50%, transparent 50%); }
.rp-dot--0 { outline: 2.5px dashed var(--rp-ed); outline-offset: -2.5px; }
.rp-shared__stats { margin-top: .4rem; font-weight: 600; color: var(--z-charcoal); }
.rp-shared__line { margin-top: .5rem; font-family: var(--z-font-display); font-style: italic; color: var(--fg-muted); }
.rp-shared__stamp { width: min(78%, 280px); margin-top: 1.2rem; color: #0A5A3F; transform: rotate(-7deg); opacity: .88; mix-blend-mode: multiply; animation: rp-stamp .75s cubic-bezier(.2,.9,.25,1.15) .3s backwards; }
.rp-shared__note { margin-top: 1rem; font-size: var(--z-fs-xs); font-style: italic; color: var(--fg-muted); }
.rp-shared__copy h2 { margin-top: .4rem; font-family: var(--z-font-display); font-size: var(--z-fs-xl); font-weight: 600; color: var(--z-green); }
.rp-shared__copy p:not(.z-eyebrow) { margin-top: .7rem; color: var(--fg-muted); }
@media (max-width: 760px) { .rp-shared { grid-template-columns: 1fr; } }

/* ---------------- reduced motion: every state lands at once ---------------- */
@media (prefers-reduced-motion: reduce) {
  .rp-c, .rp-strike, .rp-mdraw { stroke-dashoffset: 0 !important; }
  .rp-fixw { clip-path: none !important; }
  .rp-mk, .rp-miss { opacity: 1 !important; }
  .rp-c.is-smudge { opacity: .1 !important; stroke-width: 9 !important; }
  .rp-stampbleed { opacity: .2 !important; }
  .rp-spotless { opacity: .9 !important; }
  .rp-paper, .rp-story, .rp-shared__paper { transform: none !important; }
}

.rp-deskfoot { max-width: 44rem; margin: 2.4rem auto 0; text-align: left; }