/* Zeal Publishers — the Ghostwriting Cost & Payback Planner (Job 3).
 * One cream "book page" in halves: I. the cost (an open spread: controls left, the book,
 * the odometer range and amber margin notes right), II. the payback, III. the sealed page
 * and the gate, then the unsealed result. Motion is transform/opacity (plus stroke and
 * clip on small SVG/text); everything lands in its final state under reduced motion.  */

.zs-gwc { --gw-paper: #FBF8F1; --gw-paper-2: #F7F0E3; --gw-ink: var(--z-amber); --gw-spring: cubic-bezier(.34, 1.45, .64, 1); }

/* ---------- Hero ---------- */
.gw-hero { padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.gw-hero__in { padding-top: clamp(1.25rem, .8rem + 2vw, 3rem); max-width: 54rem; }
.gw-hero__title { margin-top: 1rem; font-size: clamp(2.2rem, 1.25rem + 3.8vw, 4.4rem); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; }
.gw-hero__lede { margin-top: 1.1rem; }
.gw-hero .s-proof a { color: inherit; }
.gw-noscript { margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--z-amber); border-radius: 6px; background: var(--z-amber-tint); }
.gw-h2 { font-size: var(--z-fs-xl); font-weight: 500; line-height: 1.15; }
.gw-h2--sm { font-size: var(--z-fs-lg); margin-bottom: 1rem; }
.gw-legend { padding: 0; margin-bottom: .6rem; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); }

/* ---------- The open book (spread) ---------- */
.gw-cost { padding-block: 0 clamp(2.5rem, 2rem + 3vw, 5rem); }
.gw-spread {
  display: grid; border-radius: 6px; background: var(--gw-paper);
  box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 40px 80px -40px rgba(2,29,19,.5), inset 0 0 0 1px rgba(40,40,40,.08);
}
.gw-page { position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.75rem); }
.gw-page--l { background-image: repeating-linear-gradient(transparent 0 1.9rem, rgba(6,69,48,.035) 1.9rem calc(1.9rem + 1px)); }
.gw-page--r { background-color: var(--gw-paper-2); }
@media (min-width: 1000px) {
  .gw-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gw-page--l { border-radius: 6px 0 0 6px; box-shadow: inset -26px 0 30px -26px rgba(40,30,10,.32); }
  .gw-page--r { border-radius: 0 6px 6px 0; box-shadow: inset 26px 0 30px -26px rgba(40,30,10,.32); }
  .gw-right { position: sticky; top: calc(var(--z-header-h) + 1.25rem); }
}
@media (max-width: 999px) { .gw-page--r { border-top: 1px dashed rgba(40,40,40,.18); } }
.gw-page--l .s-chapter { margin-bottom: 1.25rem; }
.gw-page--l .gw-h2 { margin-bottom: 1.5rem; }

/* Book types: tactile cards */
.gw-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: .55rem; margin: 0 0 1.75rem; padding: 0; border: 0; }
.gw-types .gw-legend { grid-column: 1 / -1; }
.gw-type {
  position: relative; display: grid; gap: .15rem; min-height: 64px; padding: .7rem .8rem .6rem; border: 1.5px solid rgba(40,40,40,.2); border-radius: 8px;
  background: var(--z-white); cursor: pointer; transition: border-color var(--z-dur-2), background-color var(--z-dur-2), transform .3s var(--gw-spring), box-shadow var(--z-dur-2);
}
.gw-type input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gw-type__name { font-family: var(--z-font-display); font-size: var(--z-fs-base); line-height: 1.2; color: var(--z-green); }
.gw-type__meta { font-size: var(--z-fs-2xs); letter-spacing: .04em; color: var(--z-ink-muted); }
.gw-type:hover { border-color: var(--z-sage); transform: translateY(-2px); }
.gw-type:has(input:checked) { border-color: var(--z-green); background: var(--z-green-50); box-shadow: 0 10px 22px -16px rgba(2,29,19,.6); }
.gw-type:has(input:checked)::after { content: ""; position: absolute; top: .55rem; right: .55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--z-amber); box-shadow: 0 0 0 3px rgba(239,154,16,.25); }
.gw-type:has(input:focus-visible) { outline: 3px solid var(--z-green); outline-offset: 2px; }
.gw-type:active { transform: scale(.97); }

/* ---------- Fields + tactile sliders ---------- */
.gw-field { margin-bottom: 1.4rem; border: 0; padding: 0; min-width: 0; }
.gw-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.gw-field__top label { font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-green); }
.gw-out {
  display: inline-block; padding: .2rem .65rem .1rem; border-radius: 999px; background: var(--z-amber-tint); color: var(--z-amber-ink);
  font-family: var(--z-font-display); font-size: var(--z-fs-base); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gw-out.is-bump { animation: gw-bump .32s var(--gw-spring); }
@keyframes gw-bump { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(-3px) scale(1.07); } 100% { transform: none; } }
.gw-hint { margin-top: .25rem; font-size: var(--z-fs-xs); color: var(--z-ink-muted); }
.gw-range { position: relative; display: flex; align-items: center; height: 44px; }
.gw-range input[type=range] {
  --p: 50%; position: relative; z-index: 2; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.gw-range input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--z-amber) 0 var(--p), rgba(40,40,40,.16) var(--p) 100%); }
.gw-range input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(40,40,40,.16); }
.gw-range input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--z-amber); }
.gw-range input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; border: 3px solid var(--z-green);
  background: radial-gradient(circle at 35% 30%, #fff, var(--z-cream) 60%, #EADFCB); box-shadow: 0 4px 10px -2px rgba(2,29,19,.45);
  transition: transform .25s var(--gw-spring), box-shadow .2s;
}
.gw-range input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--z-green); background: var(--z-cream); box-shadow: 0 4px 10px -2px rgba(2,29,19,.45);
  transition: transform .25s var(--gw-spring);
}
.gw-range input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.08); }
.gw-range input[type=range]:active::-webkit-slider-thumb { transform: scale(1.22); box-shadow: 0 8px 18px -4px rgba(2,29,19,.5), 0 0 0 7px rgba(239,154,16,.18); }
.gw-range input[type=range]:active::-moz-range-thumb { transform: scale(1.22); }
.gw-range input[type=range]:focus-visible { outline: none; }
.gw-range input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(239,154,16,.55), 0 4px 10px -2px rgba(2,29,19,.45); }
.gw-range input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(239,154,16,.55); }
.gw-range.is-snap input[type=range]::-webkit-slider-thumb { animation: gw-thumbsnap .38s var(--gw-spring); }
@keyframes gw-thumbsnap { 0% { transform: scale(1.22); } 40% { transform: scale(.88); } 100% { transform: scale(1.1); } }
/* The typical length for the chosen book type, shaded under the track */
.gw-range__band {
  position: absolute; z-index: 1; top: 50%; left: calc(15px + (100% - 30px) * var(--b0, .2)); width: calc((100% - 30px) * var(--bw, .6));
  height: 16px; margin-top: -8px; border-radius: 8px; border: 1px dashed rgba(6,69,48,.4); background: rgba(6,69,48,.08);
  transition: left .6s var(--gw-spring), width .6s var(--gw-spring);
}
.gw-range__tick { position: absolute; z-index: 1; top: calc(50% + 9px); left: calc(15px + (100% - 30px) * var(--t, .3)); width: 2px; height: 9px; margin-left: -1px; border-radius: 1px; background: var(--z-green); opacity: .55; transition: left .5s var(--gw-spring); }
.gw-steps { display: flex; justify-content: space-between; margin-top: -.2rem; padding-inline: 4px; font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--z-ink-muted); }
.gw-steps span { min-width: 3ch; text-align: center; transition: color var(--z-dur-2); }
.gw-steps span.is-on { color: var(--z-green); }
.gw-seg { display: flex; flex-wrap: wrap; gap: .5rem; }
.gw-seg .gw-legend { flex-basis: 100%; }
.gw-seg__opt { position: relative; }
.gw-seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gw-seg__opt span { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1.3rem .35rem; border: 1.5px solid rgba(40,40,40,.22); border-radius: 999px; background: var(--z-white); font-weight: 600; color: var(--z-ink-muted); transition: background-color var(--z-dur-2), color var(--z-dur-2), border-color var(--z-dur-2), transform .3s var(--gw-spring); }
.gw-seg__opt input:checked + span { border-color: var(--z-green); background: var(--z-green); color: var(--z-cream); }
.gw-seg__opt input:focus-visible + span { outline: 3px solid var(--z-green); outline-offset: 2px; }
.gw-seg__opt:active span { transform: scale(.96); }
.gw-onward { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; font-weight: 600; color: var(--z-green); text-decoration: none; }
.gw-onward__i { transform: rotate(90deg); transition: transform .3s var(--gw-spring); }
.gw-onward:hover .gw-onward__i { transform: rotate(90deg) translateX(3px); }

/* ---------- The book on the right-hand page ---------- */
.gw-bookstage { display: grid; justify-items: center; }
.gw-book { width: min(230px, 62%); height: auto; overflow: visible; }
@media (prefers-reduced-motion: no-preference) { .gw-book { animation: gw-float 7s ease-in-out infinite; } }
@keyframes gw-float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-5px) rotate(-.6deg); } }
.gw-book__shadow { fill: rgba(2,29,19,.16); transform-box: fill-box; transform-origin: center; transform: scaleX(var(--shadow, 1)); transition: transform .7s var(--gw-spring); }
.gw-book__block { transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--thick, 1)); transition: transform .7s var(--gw-spring); }
.gw-book__block rect { fill: #F4ECDD; stroke: rgba(40,40,40,.18); }
.gw-book__block line { stroke: rgba(40,40,40,.14); stroke-width: 1; }
.gw-book__leaf { fill: var(--gw-paper); stroke: rgba(40,40,40,.14); transform-box: fill-box; transform-origin: left center; }
.gw-book.is-fanning .gw-book__leaf--0 { animation: gw-fan .8s cubic-bezier(.3,.7,.3,1) both; --a: -7deg; }
.gw-book.is-fanning .gw-book__leaf--1 { animation: gw-fan .8s cubic-bezier(.3,.7,.3,1) .06s both; --a: -13deg; }
.gw-book.is-fanning .gw-book__leaf--2 { animation: gw-fan .8s cubic-bezier(.3,.7,.3,1) .12s both; --a: -19deg; }
@keyframes gw-fan { 0% { transform: none; } 38% { transform: rotate(var(--a)); } 100% { transform: none; } }
.gw-book__spine { transform-box: fill-box; transform-origin: left center; transform: scaleX(var(--spine, 1)); transition: transform .7s var(--gw-spring); }
.gw-book__spine rect { fill: rgba(0,0,0,.2); }
.gw-book__board { transition: fill .5s; filter: drop-shadow(0 18px 20px rgba(2,29,19,.3)); }
.gw-book__frame { fill: none; stroke-width: 1.5; transition: stroke .5s; }
.gw-book__kicker { font-family: var(--z-font-body); font-size: 9px; font-weight: 600; letter-spacing: .26em; text-anchor: middle; transition: fill .5s; }
.gw-book__title { font-family: var(--z-font-display); font-size: 27px; font-weight: 500; text-anchor: middle; transition: fill .5s; }
.gw-book__author { font-family: var(--z-font-display); font-style: italic; font-size: 13px; text-anchor: middle; transition: fill .5s; }
.gw-book__rule { transition: fill .5s; }
.gw-book__imprint { font-family: var(--z-font-body); font-size: 7px; letter-spacing: .4em; text-anchor: middle; opacity: .7; transition: fill .5s; }
.gw-book__notes { font-family: var(--z-font-display); font-size: 14px; text-anchor: middle; opacity: 0; transition: opacity .5s; }
.gw-book__photo, .gw-book__mark { opacity: 0; transition: opacity .5s; }
.gw-book__mark rect:first-child { fill: none; stroke-width: 2; }
/* cover styles by book type */
.gw-book[data-cover=founder] .gw-book__board { fill: var(--z-green); }
.gw-book[data-cover=founder] .gw-book__frame { stroke: rgba(239,154,16,.7); }
.gw-book[data-cover=founder] :is(.gw-book__kicker, .gw-book__imprint) { fill: var(--z-amber); }
.gw-book[data-cover=founder] .gw-book__title { fill: var(--z-cream); }
.gw-book[data-cover=founder] .gw-book__author { fill: var(--z-parchment); }
.gw-book[data-cover=founder] .gw-book__rule { fill: var(--z-amber); }
.gw-book[data-cover=ebook] .gw-book__board { fill: var(--z-amber); }
.gw-book[data-cover=ebook] .gw-book__frame { stroke: rgba(2,29,19,.45); }
.gw-book[data-cover=ebook] :is(.gw-book__kicker, .gw-book__title, .gw-book__author, .gw-book__imprint) { fill: var(--z-green-950); }
.gw-book[data-cover=ebook] .gw-book__rule { fill: var(--z-green); }
.gw-book[data-cover=memoir] .gw-book__board { fill: var(--z-parchment); }
.gw-book[data-cover=memoir] .gw-book__frame { stroke: rgba(6,69,48,.55); }
.gw-book[data-cover=memoir] :is(.gw-book__title, .gw-book__imprint) { fill: var(--z-green); }
.gw-book[data-cover=memoir] .gw-book__kicker, .gw-book[data-cover=memoir] .gw-book__author { fill: var(--z-amber-ink); }
.gw-book[data-cover=memoir] .gw-book__rule { fill: var(--z-amber-ink); }
.gw-book[data-cover=memoir] .gw-book__photo { opacity: 1; fill: #D8C6A6; stroke: var(--z-green); stroke-width: 2; }
.gw-book[data-cover=company] .gw-book__board { fill: var(--z-charcoal); }
.gw-book[data-cover=company] .gw-book__frame { stroke: rgba(250,249,245,.25); }
.gw-book[data-cover=company] :is(.gw-book__title, .gw-book__rule) { fill: var(--z-amber); }
.gw-book[data-cover=company] :is(.gw-book__kicker, .gw-book__author, .gw-book__imprint) { fill: var(--z-cream); }
.gw-book[data-cover=company] .gw-book__mark { opacity: 1; }
.gw-book[data-cover=company] .gw-book__mark rect { stroke: var(--z-amber); }
.gw-book[data-cover=company] .gw-book__mark rect:last-child { fill: var(--z-amber); stroke: none; }
.gw-book[data-cover=research] .gw-book__board { fill: var(--z-green-950); }
.gw-book[data-cover=research] .gw-book__frame { stroke: var(--z-amber); stroke-width: 3; stroke-dasharray: 1 0; }
.gw-book[data-cover=research] :is(.gw-book__title) { fill: var(--z-cream); }
.gw-book[data-cover=research] :is(.gw-book__kicker, .gw-book__rule, .gw-book__imprint, .gw-book__notes) { fill: var(--z-amber); }
.gw-book[data-cover=research] .gw-book__author { fill: var(--z-green-200); }
.gw-book[data-cover=research] .gw-book__notes { opacity: 1; }
.gw-bookcap { margin-top: .4rem; font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-sm); color: var(--z-ink-muted); }

/* ---------- The range: odometer figures + an amber ink bar ---------- */
.gw-meter { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid rgba(40,40,40,.14); }
.gw-meter__k { font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--z-ink-muted); }
.gw-meter__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem; margin-top: .3rem; font-family: var(--z-font-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--z-green); }
.gw-meter__dash { color: var(--z-amber-ink); }
.gw-odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.gw-odo .o-c { position: relative; display: inline-block; height: 1.15em; overflow: hidden; }
.gw-odo .o-s { display: block; transform: translateY(calc(var(--d, 0) * -1.15em)); transition: transform .85s var(--gw-spring); transition-delay: var(--dl, 0ms); }
.gw-odo .o-s i { display: block; height: 1.15em; font-style: normal; }
.gw-odo .o-x { display: inline-block; }
.gw-bar { position: relative; height: 48px; margin-top: .65rem; }
.gw-bar > span:not(.gw-bar__lab) { position: absolute; left: 0; right: 0; top: 10px; height: 14px; border-radius: 7px; }
.gw-bar__track { background: rgba(40,40,40,.09); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.gw-bar__pub { background: rgba(6,69,48,.16); outline: 1px dashed rgba(6,69,48,.45); outline-offset: 2px; transform-origin: left center; transform: translateX(calc(var(--l, .2) * 100%)) scaleX(var(--w, .2)); transition: transform .7s var(--gw-spring); }
.gw-bar__ink {
  overflow: hidden; transform-origin: left center; transform: translateX(calc(var(--l, .25) * 100%)) scaleX(var(--w, .15));
  background: linear-gradient(90deg, #F5AE3A, #EF9A10 55%, #D6860A); box-shadow: 0 0 0 1px rgba(140,83,0,.25), 0 6px 14px -4px rgba(239,154,16,.7);
  transition: transform .95s var(--gw-spring);
}
.gw-bar__ink i { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 30%, rgba(255,255,255,.55) 45%, transparent 60% 100%); background-size: 220% 100%; animation: gw-sheen 2.6s linear infinite; }
@keyframes gw-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.gw-bar__lab { position: absolute; top: 30px; font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .06em; color: var(--z-ink-muted); }
.gw-bar__lab--0 { left: 0; } .gw-bar__lab--1 { left: 50%; transform: translateX(-50%); } .gw-bar__lab--2 { right: 0; }
.gw-meter__pub { font-size: var(--z-fs-sm); color: var(--z-ink-muted); }
.gw-meter__pub b { font-weight: 600; color: var(--z-green); }
.gw-meter__pub a { color: var(--z-green); }

/* ---------- Margin notes, written in amber ---------- */
.gw-notes { display: grid; gap: .55rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.gw-note { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; gap: .2rem .7rem; align-items: baseline; padding-left: .8rem; border-left: 2px solid rgba(239,154,16,.55); }
.gw-note__k { font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--z-green); }
.gw-note__t { font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-sm); line-height: 1.4; color: var(--z-amber-ink); }
.gw-note__fx { font-size: var(--z-fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--z-green); white-space: nowrap; }
.gw-note.is-writing { animation: gw-notein .5s var(--z-ease-out) both; }
.gw-note.is-writing .gw-note__t { animation: gw-write .75s cubic-bezier(.5,0,.3,1) both; }
@keyframes gw-notein { from { opacity: .3; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@keyframes gw-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (max-width: 520px) { .gw-note { grid-template-columns: minmax(0, 1fr) auto; } .gw-note__t { grid-column: 1 / -1; grid-row: 2; } }
.gw-flag { margin-top: 1rem; padding: .7rem .9rem; border-left: 3px solid var(--z-amber); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--z-amber-tint) 45%, transparent); font-size: var(--z-fs-sm); color: var(--z-amber-ink); }
.gw-flag.is-new { animation: gw-notein .45s var(--z-ease-out) both; }

/* ---------- II. Payback ---------- */
.gw-payback { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.gw-pay__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 980px) { .gw-pay__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; } }
.gw-pay__intro .gw-h2 { margin-bottom: 1rem; }
.gw-pay__form { padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); border-radius: 6px; background: var(--gw-paper); box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 30px 60px -36px rgba(2,29,19,.45); }
.gw-profs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
.gw-profs .gw-legend { flex-basis: 100%; }
.gw-chip { position: relative; }
.gw-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.gw-chip span { display: inline-flex; align-items: center; min-height: 42px; padding: .4rem 1rem .3rem; border: 1.5px solid rgba(40,40,40,.2); border-radius: 999px; background: var(--z-white); font-size: var(--z-fs-sm); font-weight: 500; transition: background-color var(--z-dur-2), color var(--z-dur-2), border-color var(--z-dur-2), transform .3s var(--gw-spring); }
.gw-chip input:checked + span { border-color: var(--z-green); background: var(--z-green); color: var(--z-cream); }
.gw-chip input:focus-visible + span { outline: 3px solid var(--z-green); outline-offset: 2px; }
.gw-chip:active span { transform: scale(.95); }
.gw-profnote { margin: -.5rem 0 1.25rem; font-family: var(--z-font-display); font-style: italic; color: var(--z-amber-ink); }
.gw-money { display: flex; align-items: center; border: 1.5px solid rgba(40,40,40,.26); border-radius: 8px; background: var(--z-white); transition: border-color var(--z-dur-2), box-shadow var(--z-dur-2); }
.gw-money span { padding-left: .9rem; font-family: var(--z-font-display); font-size: 1.25rem; color: var(--z-green); }
.gw-money input { flex: 1; min-width: 0; min-height: 52px; padding: .7rem .8rem .6rem .35rem; border: 0; background: none; font-family: var(--z-font-display); font-size: 1.25rem; color: var(--z-charcoal); }
.gw-money input:focus { outline: none; }
.gw-money:focus-within { border-color: var(--z-green); box-shadow: 0 0 0 4px rgba(239,154,16,.35); }
.gw-paypeek { margin-top: .5rem; padding-top: 1rem; border-top: 1px dashed rgba(40,40,40,.2); font-family: var(--z-font-display); font-style: italic; color: var(--z-green); }

/* ---------- III. The sealed page + the gate ---------- */
.gw-gate { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.gw-gate__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 980px) { .gw-gate__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 4.5rem; } }
.gw-gate__text { margin: .9rem 0 1.5rem; color: var(--z-ink-muted); }
.gw-gate__form .gw-h2 { margin-top: .25rem; }
.gw-err { min-height: 1.2em; font-size: var(--z-fs-sm); font-weight: 600; color: var(--z-red-ink); }
.gw-sealed { position: relative; justify-self: center; width: min(100%, 380px); aspect-ratio: 4 / 5; }
@media (max-width: 979px) { .gw-sealed { order: 2; width: min(72%, 260px); } .gw-gate__grid { gap: 1.75rem; } }
.gw-sealed__page {
  position: absolute; inset: 0; display: grid; align-content: start; gap: 14px; padding: 2rem 1.75rem; border-radius: 4px;
  background: var(--gw-paper); box-shadow: 0 2px 0 rgba(0,0,0,.04), 0 40px 70px -34px rgba(2,29,19,.55);
  transform: rotate(-1.5deg); transition: opacity .45s ease .25s, transform .7s var(--z-ease-out) .2s;
}
.gw-sk { display: block; height: 10px; border-radius: 5px; background: rgba(6,69,48,.14); filter: blur(2.5px); }
.gw-sk--head { width: 70%; height: 8px; background: rgba(40,40,40,.14); }
.gw-sk--big { width: 82%; height: 34px; margin-block: 8px 6px; background: rgba(239,154,16,.42); }
.gw-sk--short { width: 58%; }
.gw-sk--chart { position: relative; height: 120px; margin-block: 8px; border-radius: 4px; background: rgba(6,69,48,.07); }
.gw-sk--chart i { position: absolute; left: 10%; right: 8%; bottom: 22%; height: 3px; transform: rotate(-16deg); transform-origin: left; background: rgba(6,69,48,.5); }
.gw-wax { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(-8deg); filter: drop-shadow(0 10px 14px rgba(92,52,0,.45)); }
.gw-wax__half { position: absolute; inset: 0; }
.gw-wax__half--l { clip-path: polygon(0 0, 52% 0, 47% 18%, 55% 33%, 46% 51%, 54% 68%, 48% 84%, 53% 100%, 0 100%); }
.gw-wax__half--r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%, 48% 84%, 54% 68%, 46% 51%, 55% 33%, 47% 18%); }
.gw-sealsvg { display: block; width: 100%; height: 100%; }
.gw-sealsvg__label { font-family: var(--z-font-display); font-size: 15px; font-weight: 600; fill: rgba(92,52,0,.85); }
.gw-wax__quill { position: absolute; inset: 25% 27%; }
.gw-wax__quill .z-quill { width: 100%; height: 100%; }
.gw-wax__quill .z-quill path { fill: rgba(92,52,0,.48); }
.gw-gate.is-sealing .gw-wax { animation: gw-press .75s cubic-bezier(.2,.9,.3,1.25) both; }
@keyframes gw-press { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9) rotate(-26deg); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(-6deg); } 100% { transform: translate(-50%, -50%) rotate(-8deg); } }
/* the crack (gwc.js hands over to the unfold at 720ms): a shudder, then the halves part and fall away */
.gw-gate.is-cracking .gw-wax { animation: gw-shudder .16s linear 2; }
@keyframes gw-shudder { 0%, 100% { transform: translate(-50%, -50%) rotate(-8deg); } 30% { transform: translate(-51.5%, -50%) rotate(-9deg); } 70% { transform: translate(-48.5%, -50%) rotate(-7deg); } }
.gw-gate.is-cracking .gw-wax__half--l { animation: gw-split-l .46s cubic-bezier(.55,0,.8,.2) .22s both; }
.gw-gate.is-cracking .gw-wax__half--r { animation: gw-split-r .46s cubic-bezier(.55,0,.8,.2) .22s both; }
@keyframes gw-split-l { to { transform: translate(-46%, 34%) rotate(-28deg); opacity: 0; } }
@keyframes gw-split-r { to { transform: translate(46%, 44%) rotate(24deg); opacity: 0; } }
.gw-gate.is-cracking .gw-sealed__page { opacity: 0; transform: rotate(0) scale(.97) translateY(14px); }
.gw-gate.is-open .gw-sealed { display: none; }
.gw-gate.is-open .gw-gate__grid { grid-template-columns: 1fr; }
.gw-unsealed { padding: 1rem 1.25rem; border-left: 3px solid var(--z-green); background: var(--z-green-50); font-family: var(--z-font-display); color: var(--z-green); }

/* ---------- The result: the page unfolds ---------- */
.gw-result { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3rem, 2rem + 4vw, 5.5rem); perspective: 1600px; }
.gw-result.is-unfolding .gw-sheet { animation: gw-unfold .85s cubic-bezier(.22,1,.36,1) both; }
@keyframes gw-unfold { from { opacity: 0; transform: rotateX(-68deg) translateY(-24px); } to { opacity: 1; transform: none; } }
.gw-sheet {
  position: relative; max-width: 52rem; margin-inline: auto; padding: clamp(1.5rem, 1rem + 2.5vw, 3.25rem); border-radius: 4px; transform-origin: top center;
  background-color: var(--gw-paper); background-image: repeating-linear-gradient(transparent 0 1.9rem, rgba(6,69,48,.04) 1.9rem calc(1.9rem + 1px));
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 50px 90px -40px rgba(2,29,19,.55), inset 0 0 0 1px rgba(40,40,40,.08);
}
.gw-sheet__run { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(40,40,40,.16); font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--z-ink-muted); }
.gw-sheet__title { margin-top: 1.4rem; font-size: var(--z-fs-2xl); font-weight: 500; }
.gw-sheet__title:focus { outline: none; }
.gw-sheet__for { margin-top: .4rem; font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-md); color: var(--z-amber-ink); }
.gw-sheet__range { margin-top: 1.4rem; padding: 1.1rem 0; border-block: 1.5px solid var(--z-green); }
.gw-sheet__nums { font-family: var(--z-font-display); font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; color: var(--z-green); }
.gw-sheet__k { margin-top: .35rem; font-size: var(--z-fs-sm); color: var(--z-ink-muted); }
.gw-drivers { width: 100%; margin-top: 1.25rem; border-collapse: collapse; font-size: var(--z-fs-sm); }
.gw-drivers th { padding: .45rem .5rem; border-bottom: 1px solid rgba(40,40,40,.22); text-align: left; font-size: var(--z-fs-2xs); letter-spacing: .12em; text-transform: uppercase; color: var(--z-ink-muted); }
.gw-drivers td { padding: .55rem .5rem; border-bottom: 1px dotted rgba(40,40,40,.22); vertical-align: top; }
.gw-drivers td:first-child { font-weight: 600; color: var(--z-green); }
.gw-drivers td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--z-amber-ink); font-weight: 600; }
.gw-sheet__flag { margin-top: 1rem; font-size: var(--z-fs-sm); color: var(--z-amber-ink); }
.gw-paywrap { margin-top: 2rem; }
.gw-paywrap__h { font-size: var(--z-fs-lg); font-weight: 500; }
.gw-paywrap__head { margin-top: .35rem; font-family: var(--z-font-display); font-size: var(--z-fs-md); color: var(--z-green); }
.gw-paywrap__head b { color: var(--z-amber-ink); font-weight: 600; }
.gw-paywrap__note { margin-top: .5rem; font-size: var(--z-fs-xs); color: var(--z-ink-muted); }
.gw-chartbox { margin-top: .75rem; }
.gw-chart { display: block; width: 100%; height: auto; overflow: visible; }
.gw-sheet__fine { margin-top: 2rem; padding-top: .9rem; border-top: 1px solid rgba(40,40,40,.14); font-size: var(--z-fs-2xs); line-height: 1.55; color: var(--z-ink-muted); }

/* the payback chart (built by gwc.js) */
.gwc-axis { stroke: rgba(40,40,40,.35); stroke-width: 1.2; }
.gwc-grid { stroke: rgba(40,40,40,.08); }
.gwc-lab { font-family: var(--z-font-body); font-size: 11px; fill: var(--z-ink-muted); }
.gwc-inv { stroke: var(--z-charcoal); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .65; }
.gwc-invlab { font-family: var(--z-font-display); font-style: italic; font-size: 12px; fill: var(--z-charcoal); }
.gwc-line { fill: none; stroke: var(--z-green); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gwc-profit { fill: url(#gwcProfit); opacity: 0; }
.gwc-tok { opacity: 0; transform: translateY(-46px); transform-box: fill-box; transform-origin: center bottom; }
.gwc-tok rect:first-child { fill: var(--z-green); }
.gwc-tok rect:last-child { fill: var(--z-amber); }
.gwc-tok.is-profit rect:first-child { fill: var(--z-amber); }
.gwc-tok.is-profit rect:last-child { fill: var(--z-green); }
.gwc-seal { opacity: 0; transform-box: fill-box; transform-origin: center; }
.gwc-seal { filter: drop-shadow(0 6px 6px rgba(92,52,0,.35)); }
.gwc-seal__text { font-family: var(--z-font-display); font-weight: 600; fill: rgba(70,38,0,.92); text-anchor: middle; }
.gwc-seal__text--s { font-family: var(--z-font-body); font-size: 8px; letter-spacing: .12em; }
.gwc-seal__text--b { font-size: 17px; }
.gwc-ring { fill: none; stroke: rgba(239,154,16,.7); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gw-chart.is-playing .gwc-line { animation: gw-draw 1.15s cubic-bezier(.45,0,.2,1) .1s forwards; }
.gw-chart.is-playing .gwc-tok { animation: gw-drop .6s var(--gw-spring) var(--d, 0ms) both; }
.gw-chart.is-playing .gwc-seal { animation: gw-stamp .75s cubic-bezier(.2,.9,.3,1.2) var(--d, 0ms) both; }
.gw-chart.is-playing .gwc-ring { animation: gw-ring .9s ease-out var(--d, 0ms) both; }
.gw-chart.is-playing .gwc-profit { animation: gw-glow 1s ease var(--d, 0ms) both, gw-breathe 3.2s ease-in-out calc(var(--d, 0ms) + 1s) infinite; }
@keyframes gw-draw { to { stroke-dashoffset: 0; } }
@keyframes gw-drop { 0% { opacity: 0; transform: translateY(-46px); } 60% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
@keyframes gw-stamp { 0% { opacity: 0; transform: scale(2.5) rotate(-32deg); } 55% { opacity: 1; transform: scale(.88) rotate(5deg); } 76% { transform: scale(1.05) rotate(-2deg); } 100% { opacity: 1; transform: none; } }
@keyframes gw-ring { 0% { opacity: .75; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.75); } }
@keyframes gw-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes gw-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.gw-chart.is-static .gwc-line { stroke-dashoffset: 0; }
.gw-chart.is-static :is(.gwc-tok, .gwc-seal, .gwc-profit) { opacity: 1; transform: none; }
.gw-paynone { padding: 1rem 1.2rem; border-left: 3px solid var(--z-amber); background: var(--z-amber-tint); font-family: var(--z-font-display); font-style: italic; color: var(--z-amber-ink); }

/* ---------- After the result ---------- */
.gw-quote { max-width: 40rem; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; --rot: -.6deg; }
.gw-quote .s-letter__text { font-size: var(--z-fs-md); }
.gw-after { display: grid; gap: 1rem; max-width: 64rem; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; }
@media (min-width: 900px) { .gw-after { grid-template-columns: 1.3fr 1fr 1fr; } }
.gw-after__card { padding: 1.5rem; border-radius: 6px; border: 1px solid rgba(40,40,40,.12); background: var(--z-white); box-shadow: var(--z-shadow-1); }
.gw-after__card h3 { font-size: var(--z-fs-lg); font-weight: 500; }
.gw-after__card > p { margin-block: .5rem 1.1rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.gw-after__card--call { border: 0; }
.gw-after__card--call h3 { color: var(--z-cream); margin-top: .5rem; }
.gw-after__card--call > p { color: var(--z-green-200); }
.gw-after__or { margin: 1rem 0 0 !important; font-size: var(--z-fs-sm); color: var(--z-green-200); }
.gw-after__or a { color: var(--z-cream); }
.gw-after__card--save { background: var(--gw-paper); }
.gw-after__done { margin-top: .75rem; padding: .7rem .85rem; border-left: 3px solid var(--z-green); background: var(--z-green-50); font-size: var(--z-fs-sm); color: var(--z-green); }
.gw-after__done.is-in { animation: gw-notein .45s var(--z-ease-out) both; }
.gw-after__edit { display: inline-block; margin-top: .85rem; font-size: var(--z-fs-sm); color: var(--z-green); }

/* ---------- The published table + FAQ ---------- */
.gw-ref__grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 1000px) { .gw-ref__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; } }
.gw-ref__lede { margin: .9rem 0 1.25rem; color: var(--z-ink-muted); }
.gw-ref__lede a { color: var(--z-green); }
.gw-reftable { width: 100%; border-collapse: collapse; font-size: var(--z-fs-sm); background: var(--gw-paper); }
.gw-reftable th, .gw-reftable td { padding: .65rem .75rem; border-bottom: 1px solid rgba(40,40,40,.16); text-align: left; vertical-align: top; }
.gw-reftable th { background: var(--z-green); color: var(--z-cream); font-weight: 600; font-size: var(--z-fs-xs); letter-spacing: .06em; }
.gw-reftable td:last-child { font-family: var(--z-font-display); color: var(--z-green); white-space: nowrap; }
.gw-ref__more { margin-top: 1.25rem; }
@media (max-width: 600px) { .gw-reftable td:nth-child(2), .gw-reftable th:nth-child(2) { display: none; } }

/* ---------- Phones: the live range follows the sliders ---------- */
.gw-mini { display: none; }
@media (max-width: 999px) {
  .gw-mini {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; display: flex; align-items: center; gap: .75rem;
    padding: .65rem var(--z-gutter) calc(.65rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--z-green-900) 95%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--z-cream); transform: translateY(110%); transition: transform .45s var(--z-ease-out);
  }
  .gw-mini.is-on { transform: none; }
  .gw-mini__k { font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--z-green-200); }
  .gw-mini__v { flex: 1; min-width: 0; font-family: var(--z-font-display); font-size: 1.15rem; font-weight: 500; color: var(--z-amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (max-width: 420px) { .gw-mini__k { display: none; } }
  .gw-mini__v.is-bump { animation: gw-bump .32s var(--gw-spring); }
  .gw-mini__go { display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .9rem .2rem; border-radius: 4px; background: var(--z-amber); color: var(--z-green-950); font-weight: 600; text-decoration: none; }
  body.gw-mini-on .z-footer__bottom { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
  .gw-type { min-height: 58px; }
}

/* ---------- Reduced motion: final states, no flourish ---------- */
@media (prefers-reduced-motion: reduce) {
  .gw-bar__ink i { animation: none; }
  .gw-book { animation: none; }
}

/* ---------- Save my estimate: one clean cream page ---------- */
@media print {
  @page { size: letter portrait; margin: 9mm; }
  html, body { background: #FBF8F1 !important; min-height: 0 !important; height: auto !important; }
  body.z-grain::after { display: none; }
  main { overflow: visible !important; }
  body > *:not(main), main > *:not(#result), #result > .z-container > *:not(#gw-sheet) { display: none !important; }
  #result { display: block !important; padding: 0 !important; perspective: none; }
  #result > .z-container { max-width: none; padding: 0; }
  #gw-sheet {
    max-width: none; margin: 0; padding: 6mm 8mm; border-radius: 0; box-shadow: none !important; background-color: #FBF8F1 !important;
    animation: none !important; transform: none !important; opacity: 1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #gw-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gw-sheet__title { margin-top: 3mm; font-size: 19pt; }
  .gw-sheet__for { font-size: 11pt; }
  .gw-sheet__range { margin-top: 4mm; padding: 3mm 0; }
  .gw-sheet__nums { font-size: 23pt; }
  .gw-drivers { margin-top: 2mm; font-size: 8.5pt; } .gw-drivers td, .gw-drivers th { padding: .9mm 2mm; }
  .gw-paywrap { margin-top: 3.5mm; break-inside: avoid; }
  .gw-paywrap__head { font-size: 11pt; }
  .gw-chart { width: auto; max-width: 100%; height: 56mm; margin-inline: auto; }
  .gw-chart :is(.gwc-tok, .gwc-seal, .gwc-profit) { opacity: 1 !important; transform: none !important; animation: none !important; }
  .gw-chart .gwc-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .gwc-ring { display: none; }
  .gw-sheet__fine { margin-top: 3mm; padding-top: 2mm; }
}