/* Zeal Publishers — production layer (Job 2). One brand, three roles:
 *   A "The Publishing House" is the house look (trust): cream paper, Lora, chapter labels,
 *     the shelf, Contents, letters, editions.
 *   C "Modern Authority" is the conversion layer (leads): the stage picker, phone-first
 *     heroes, the call block.
 *   B "Manuscript to Masterpiece" supplies dark cinematic BANDS inside the light site.
 * Loaded after tokens/base/components on every redesigned public page (body.zs).
 * Sections marked "from A/C" were lifted from the approved Job 1 concepts and renamed
 * (a- -> s-, c- -> cv-) so production never depends on the /design preview files.   */

/* ============ House look ============ */
.zs { --z-btn-radius: 4px; }
.zs .z-btn { letter-spacing: .015em; }
.zs h2 { font-weight: 500; letter-spacing: -.028em; }
.zs h1 em, .zs h2 em, .zs h3 em { color: var(--accent-ink); font-weight: 400; }
.zs .z-on-green h1 em, .zs .z-on-green h2 em, .zs .z-on-deep h1 em, .zs .z-on-deep h2 em,
.zs .z-on-green.cv-final__panel em { color: var(--z-amber); }
.zs .z-section--tight { padding-block: clamp(3rem, 2rem + 3.5vw, 6rem); }
.zs .z-head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
@media (max-width: 759px) {
  .zs .z-section { padding-block: clamp(3rem, 2.4rem + 3vw, 4.5rem); }
  .zs .z-lede { font-size: var(--z-fs-base); }
}

/* Trust ticks (C's hero proof): facts true of every package, never invented stats */
.s-proof { display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; margin-top: 1.75rem; list-style: none; padding: 0;
  font-size: var(--z-fs-sm); font-weight: 500; color: var(--fg-strong); }
.s-proof li { display: inline-flex; align-items: center; gap: .45rem; }
.s-proof svg { width: 1.15rem; height: 1.15rem; padding: 2px; border-radius: 50%; background: var(--z-amber); color: var(--z-green-950); flex: none; }
.z-on-green .s-proof, .z-on-deep .s-proof { color: var(--z-cream); }

/* ===================== from A: The Publishing House ===================== */
/* ---------- Running head (like the top of a printed page) ---------- */
.s-runhead {
  display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0 .95rem;
  border-bottom: 1px solid var(--line); font-size: var(--z-fs-2xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted);
}
@media (max-width: 700px) { .s-runhead__mid { display: none; } }

/* ---------- Hero ---------- */
.s-hero { padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.s-hero__grid { display: grid; gap: 3rem; padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: center; }
@media (min-width: 980px) { .s-hero__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 6rem); } }
.s-hero__title {
  margin-top: 1.4rem; max-width: 12.5ch; font-size: clamp(2.85rem, 1.25rem + 5.7vw, 6.75rem);
  font-weight: 500; line-height: .97; letter-spacing: -.038em;
}
.s-hero__lede { margin-top: 1.75rem; }
.s-hero .z-btn-row { margin-top: 2.25rem; }
.s-hero__call { margin-top: 1.25rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.s-hero__call a { color: var(--fg-strong); font-weight: 600; }

/* Plate: an arched frame with ruled paper, the quill drawn in one line */
.s-plate { margin: 0; justify-self: center; width: min(100%, 410px); }
.s-plate__arch {
  position: relative; aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden;
  border-radius: 999px 999px 6px 6px; background: var(--z-parchment);
  box-shadow: inset 0 0 0 1px rgba(6,69,48,.28), inset 0 0 0 12px var(--z-parchment), inset 0 0 0 13px rgba(6,69,48,.3), var(--z-shadow-2);
}
.s-plate__rules { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(6,69,48,.075) 27px 28px); }
.s-plate .z-quill { position: relative; width: 56%; height: auto; overflow: visible; transform: translate(4%, 2%); }
.s-plate .z-quill path {
  fill: rgba(239,154,16,0); stroke: var(--z-green); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: s-draw 2.8s var(--z-ease-in-out) .3s forwards, s-ink 1.3s ease 2.7s forwards;
}
@keyframes s-draw { to { stroke-dashoffset: 0; } }
@keyframes s-ink { to { fill: rgba(239,154,16,1); stroke: rgba(6,69,48,0); } }
.s-plate__cap { margin-top: 1rem; text-align: center; font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.s-plate__cap span { font-style: normal; font-variant: small-caps; letter-spacing: .06em; color: var(--fg-strong); }
@media (max-width: 979px) { .s-plate { width: min(78%, 330px); } }

/* ---------- Chapter label ---------- */
.s-chapter {
  display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-muted);
}
.s-chapter__num {
  flex: none; display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding-inline: .3rem;
  border: 1px solid currentColor; border-radius: 999px; color: var(--accent-ink);
  font-family: var(--z-font-display); font-size: 1rem; font-weight: 500; letter-spacing: .04em; text-transform: none;
}
.s-chapter::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- I. The shelf ---------- */
.s-shelf { position: relative; }
.s-shelf__intro { max-width: 34rem; }
.s-shelf__intro h2 { font-size: var(--z-fs-2xl); }
.s-shelf__intro .z-lede { margin-top: 1.1rem; }
.s-shelf__books { list-style: none; padding: 0; display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin-top: 2.5rem; }
.s-book { flex: none; }
.s-book__spine {
  --h: 380px; --w: 110px; --c: var(--z-green); --t: var(--z-cream); --foil: var(--z-amber);
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: var(--w); height: var(--h); padding: 1.05rem .4rem 1rem; color: var(--t); text-decoration: none;
  background-color: var(--c);
  background-image: linear-gradient(90deg, rgba(0,0,0,.24), rgba(255,255,255,.1) 16%, rgba(255,255,255,0) 42%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.26));
  border-radius: 3px 3px 1px 1px; transform-origin: 50% 100%;
  transition: transform var(--z-dur-3) var(--z-ease-spring), box-shadow var(--z-dur-3) var(--z-ease-out);
}
.s-book__spine:hover { color: var(--t); }
.s-book__spine::before, .s-book__spine::after {
  content: ""; position: absolute; left: 13%; right: 13%; height: 7px;
  border-block: 1.5px solid var(--foil); opacity: .95;
}
.s-book__spine::before { top: 3.1rem; }
.s-book__spine::after { bottom: 2.6rem; }
.s-book__num { font-family: var(--z-font-display); font-size: .95rem; font-weight: 500; color: var(--foil); line-height: 1; }
.s-book__title {
  flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 2.8rem 2.6rem;
  writing-mode: vertical-rl; white-space: nowrap; font-family: var(--z-font-display);
  font-size: clamp(1.05rem, .85rem + .55vw, 1.4rem); font-weight: 600; letter-spacing: .01em;
}
.s-book__time { display: none; }
.s-book.is-active .s-book__spine, .s-book__spine:hover {
  transform: translateY(-24px) rotate(-1.2deg);
  box-shadow: 0 30px 34px -20px rgba(2,29,19,.6);
}
.s-book__spine:focus-visible { outline-offset: 4px; }
.s-book--1 .s-book__spine { --h: 404px; --w: 118px; }
.s-book--2 .s-book__spine { --h: 360px; --w: 104px; --c: var(--z-parchment); --t: var(--z-green); --foil: var(--z-amber-ink); }
.s-book--3 .s-book__spine { --h: 424px; --w: 124px; --c: var(--z-sage); }
.s-book--4 .s-book__spine { --h: 372px; --w: 100px; --c: var(--z-amber); --t: var(--z-green-950); --foil: var(--z-green); }
.s-book--5 .s-book__spine { --h: 394px; --w: 108px; --c: var(--z-charcoal); --t: var(--z-parchment); }
.s-book--6 .s-book__spine { --h: 352px; --w: 112px; --c: var(--z-purple); --t: var(--z-green-950); --foil: var(--z-green-950); }
.s-book--7 .s-book__spine { --h: 386px; --w: 98px; --c: var(--z-white); --t: var(--z-green); --foil: var(--z-amber-ink); box-shadow: inset 0 0 0 1px rgba(40,40,40,.14); }
.s-book--8 .s-book__spine { --h: 410px; --w: 116px; --c: var(--z-green-900); --t: var(--z-amber); }
.s-shelf__quill { flex: none; align-self: flex-end; width: 104px; margin-left: 4px; transform: rotate(-9deg); transform-origin: 0 100%; }
.s-shelf__quill .z-quill { width: 100%; height: auto; }
.s-shelf__quill path { fill: var(--z-amber); }
.s-shelf__board { position: relative; height: 16px; border-radius: 2px; background: linear-gradient(var(--z-green), var(--z-green-900)); box-shadow: 0 20px 34px -18px rgba(2,29,19,.65); }
.s-shelf__board::after { content: ""; position: absolute; left: 1%; right: 1%; top: 100%; height: 24px; background: linear-gradient(rgba(2,29,19,.16), transparent); }

/* Book card: opens beside the intro when its spine is active */
.s-book__card {
  position: absolute; top: 0; right: 0; width: min(46%, 31rem); padding: 1.7rem 1.9rem 1.8rem;
  background: var(--z-white); border: 1px solid var(--line); border-radius: 4px; box-shadow: var(--z-shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity var(--z-dur-2) var(--z-ease-out), transform var(--z-dur-3) var(--z-ease-out), visibility 0s linear var(--z-dur-3);
}
.s-book.is-active .s-book__card { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.s-book__no { font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
.s-book__name { margin-top: .55rem; font-size: var(--z-fs-xl); font-weight: 500; }
.s-book__short { margin-top: .3rem; font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-md); color: var(--fg-strong); }
.s-book__detail { margin-top: .75rem; color: var(--fg-muted); }
.s-book__card .z-link { margin-top: 1.1rem; }
@media (min-width: 900px) { .s-shelf__intro { min-height: 300px; padding-right: 50%; max-width: none; } }
@media (min-width: 900px) and (max-width: 1180px) {
  .s-book__spine { --w: 88px !important; }
  .s-book--3 .s-book__spine, .s-book--1 .s-book__spine { --w: 96px !important; }
  .s-shelf__quill { width: 80px; }
}

/* Small screens: the shelf becomes a stack of books lying flat */
@media (max-width: 899px) {
  .s-shelf__books { flex-direction: column; align-items: stretch; gap: 0; margin-top: 2rem; }
  .s-book__spine {
    width: auto; height: auto; flex-direction: row; align-items: center; gap: .9rem;
    padding: .95rem 1.1rem .85rem; margin-inline: var(--ml, 0) var(--mr, 0); border-radius: 3px;
    background-image: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 40%, rgba(0,0,0,.16));
  }
  .s-book__spine::before, .s-book__spine::after { top: 0; bottom: 0; height: auto; width: 5px; left: auto; right: auto; border-block: 0; border-inline: 1.5px solid var(--foil); }
  .s-book__spine::before { left: 3.1rem; }
  .s-book__spine::after { right: .7rem; }
  .s-book__num { width: 2rem; padding-left: .1rem; }
  .s-book__title { writing-mode: horizontal-tb; padding: 0 0 0 .6rem; justify-content: flex-start; flex: 1; font-size: 1.12rem; white-space: normal; line-height: 1.2; }
  .s-book__time { display: block; padding-right: 1.4rem; font-size: .8rem; font-weight: 500; opacity: .9; text-align: right; line-height: 1.2; max-width: 8.5rem; }
  .s-book.is-active .s-book__spine, .s-book__spine:hover { transform: translateX(6px); box-shadow: none; }
  .s-book__card, .s-shelf__quill { display: none; }
  .s-book--1 .s-book__spine { --ml: 2%; --mr: 3%; }
  .s-book--2 .s-book__spine { --ml: 5%; --mr: 0%; }
  .s-book--3 .s-book__spine { --ml: 0%; --mr: 4%; }
  .s-book--4 .s-book__spine { --ml: 3%; --mr: 2%; }
  .s-book--5 .s-book__spine { --ml: 6%; --mr: 1%; }
  .s-book--6 .s-book__spine { --ml: 1%; --mr: 5%; }
  .s-book--7 .s-book__spine { --ml: 4%; --mr: 2%; }
  .s-book--8 .s-book__spine { --ml: 0%; --mr: 0%; }
}

/* ---------- Page-turn: sections arrive like a page being laid down from the spine ---------- */
.s-page { position: relative; z-index: 1; margin-top: -26px; border-radius: 26px 26px 0 0; box-shadow: 0 -20px 40px -26px rgba(2,29,19,.4); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-page { animation: s-turn linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; transform-origin: 0 0; }
  }
}
@keyframes s-turn {
  from { transform: perspective(2200px) rotateY(6deg) translateY(40px); }
  to { transform: none; }
}

/* ---------- II. Contents ---------- */
.s-contents__head { display: grid; gap: 1.25rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
@media (min-width: 900px) { .s-contents__head { grid-template-columns: 1fr 1fr; align-items: end; column-gap: 4rem; } }
.s-contents__title { font-size: clamp(3.75rem, 2rem + 7.5vw, 8.5rem); font-weight: 400; line-height: .9; letter-spacing: -.045em; }
.s-contents__title em { color: var(--z-green); }
.s-toc { list-style: none; padding: 0; border-top: 1.5px solid var(--z-green); }
.s-toc__row { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding-block: 1.9rem 1.8rem; border-bottom: 1px solid var(--line-strong); }
.s-toc__num { font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-xl); line-height: 1; color: var(--accent-ink); padding-top: .15rem; transition: color var(--z-dur-2); }
.s-toc__line { display: flex; align-items: baseline; gap: 1.1rem; }
.s-toc__title { font-size: var(--z-fs-xl); font-weight: 500; transition: transform var(--z-dur-3) var(--z-ease-out); }
.s-toc__leader { flex: 1; min-width: 2rem; position: relative; top: -.28em; border-bottom: 2px dotted rgba(40,40,40,.38); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--z-ease-out) .3s; }
.s-toc__row.is-in .s-toc__leader, .no-js .s-toc__leader { transform: scaleX(1); }
.s-toc__fact { flex: none; font-size: var(--z-fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-strong); white-space: nowrap; }
.s-toc__text { margin-top: .6rem; max-width: 46rem; color: var(--fg-muted); }
.s-toc__row:hover .s-toc__num { color: var(--z-green); }
.s-toc__row:hover .s-toc__title { transform: translateX(6px); }
@media (max-width: 720px) {
  .s-toc__row { grid-template-columns: 2.6rem 1fr; }
  .s-toc__line { flex-direction: column; gap: .35rem; }
  .s-toc__leader { display: none; }
  .s-toc__fact { order: -1; white-space: normal; color: var(--accent-ink); }
}

/* ---------- III. Letters (testimonials) ---------- */
.s-letters { position: relative; }
.s-letters .z-lede { color: var(--z-green-200); }
.s-letters__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .s-letters__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .s-letters__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.75rem; }
  .s-letter--1 { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .s-letter--2 { grid-column: 8 / span 5; }
  .s-letter--3 { grid-column: 8 / span 5; }
  .s-letter--4 { grid-column: 1 / span 6; }
  .s-letter--5 { grid-column: 7 / span 6; }
}
.s-letter {
  --rot: -.5deg; position: relative; margin: 0; padding: 2.6rem 2rem 1.8rem 3.4rem; border-radius: 3px;
  color: var(--z-charcoal); background-color: var(--z-cream);
  background-image: linear-gradient(90deg, transparent 2.3rem, rgba(241,59,58,.38) 2.3rem, rgba(241,59,58,.38) calc(2.3rem + 1px), transparent calc(2.3rem + 1px)),
                    repeating-linear-gradient(transparent 0 1.95rem, rgba(6,69,48,.07) 1.95rem calc(1.95rem + 1px));
  box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 26px 50px -26px rgba(0,0,0,.6);
  transform: rotate(var(--rot)); transition: transform var(--z-dur-3) var(--z-ease-out);
}
.js .s-letter[data-reveal] { transform: translate3d(0, 28px, 0) rotate(var(--rot)); }
.js .s-letter[data-reveal].is-in { transform: rotate(var(--rot)); }
.s-letter:nth-child(even) { --rot: .55deg; }
.s-letter:hover, .js .s-letter[data-reveal].is-in:hover { transform: rotate(0deg) translateY(-4px); }
.s-letter::before { content: "\201C"; position: absolute; left: 2.9rem; top: .3rem; font-family: var(--z-font-display); font-size: 4.2rem; line-height: 1; color: var(--z-amber); }
.s-letter__text { font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-md); line-height: 1.55; color: var(--z-green); }
.s-letter--1 .s-letter__text { font-size: var(--z-fs-lg); line-height: 1.5; }
.s-letter--1 { padding: 3.6rem 2.6rem 2.4rem 4rem; }
@media (min-width: 1100px) { .s-letter--1 { align-self: stretch; display: flex; flex-direction: column; justify-content: center; } }
.s-letter__sign { margin-top: 1.25rem; display: flex; align-items: center; gap: .75rem; }
.s-letter__sign::before { content: ""; width: 1.75rem; height: 1.5px; background: var(--z-amber); }
.s-letter__sign cite { font-style: normal; font-weight: 600; font-size: var(--z-fs-sm); letter-spacing: .04em; color: var(--z-charcoal); }

/* ---------- IV. Editions (packages) ---------- */
.s-ed { border-radius: 4px; padding-top: 2.75rem; }
.s-ed::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line-strong); border-radius: 2px; pointer-events: none; }
.s-ed--foundation { background: var(--z-white); }
.s-ed--prestige::before { border-color: rgba(239,154,16,.6); }
.s-ed--imperial { background-image: radial-gradient(120% 55% at 50% 0%, rgba(160,130,197,.26), transparent 62%); }
.s-ed--imperial::before { border-color: rgba(160,130,197,.65); box-shadow: inset 0 0 0 4px var(--z-green-900), inset 0 0 0 5px rgba(239,154,16,.5); }
.s-ed .z-pkg__name { font-weight: 500; }
.s-ed .z-pkg__badge { top: 1.6rem; right: 1.6rem; }
.s-colophon { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line-strong); text-align: center; }
.s-colophon__title { font-family: var(--z-font-display); font-style: italic; color: var(--fg-muted); }
.s-colophon__title span { font-style: normal; font-variant: small-caps; letter-spacing: .08em; color: var(--fg-strong); }
.s-colophon__list { display: grid; gap: 1.5rem 2rem; margin-top: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.s-colophon__list dt { font-family: var(--z-font-display); font-size: var(--z-fs-md); font-weight: 600; color: var(--z-green); }
.s-colophon__list dd { margin: .3rem 0 0; font-size: var(--z-fs-sm); color: var(--fg-muted); }

/* ---------- VII. FAQ ---------- */
.s-faq__grid { display: grid; gap: 2.5rem; }
@media (min-width: 980px) {
  .s-faq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 5rem; align-items: start; }
  .s-faq__side { position: sticky; top: calc(var(--z-header-h) + 2rem); }
}
.s-faq__side h2 { font-size: var(--z-fs-2xl); }
.s-faq__side .z-lede { margin-top: 1rem; }
.s-faq__side .z-btn-row { margin-top: 1.75rem; }

/* ===================== from C: Modern Authority (conversion) ===================== */
/* Tool teaser */
.cv-teaser {
  position: relative; padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); border-radius: 24px; background: var(--z-white); border: 1.5px solid var(--z-green);
  box-shadow: 14px 14px 0 0 var(--z-amber), 0 40px 80px -36px rgba(4,48,31,.45);
}
.cv-teaser__title { margin-top: .8rem; font-size: var(--z-fs-xl); font-weight: 600; letter-spacing: -.025em; }
.cv-teaser__sub { margin-top: .25rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.cv-teaser__opts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1.25rem 0 0; padding: 0; border: 0; min-width: 0; }
.cv-opt {
  position: relative; display: flex; align-items: center; gap: .65rem; min-height: 58px; padding: .7rem .85rem .6rem;
  border: 1.5px solid var(--line-strong); border-radius: 14px; cursor: pointer; font-size: var(--z-fs-sm); font-weight: 500; line-height: 1.25; color: var(--z-charcoal);
  transition: border-color var(--z-dur-2), background-color var(--z-dur-2), transform var(--z-dur-2) var(--z-ease-out);
}
.cv-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cv-opt__dot { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: border-color var(--z-dur-2); }
.cv-opt__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--z-green); transform: scale(0); transition: transform var(--z-dur-2) var(--z-ease-spring); }
.cv-opt:hover { border-color: var(--z-sage); }
.cv-opt:active { transform: scale(.98); }
.cv-opt:has(input:checked) { border-color: var(--z-green); background: var(--z-green-50); }
.cv-opt:has(input:checked) .cv-opt__dot { border-color: var(--z-green); }
.cv-opt:has(input:checked) .cv-opt__dot::after { transform: scale(1); }
.cv-opt:has(input:focus-visible) { outline: 3px solid var(--z-green); outline-offset: 2px; }
.cv-teaser__results { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1.5px dashed var(--line-strong); min-height: 10.5rem; }
.cv-res + .cv-res { margin-top: 1.5rem; }
@supports selector(:has(*)) {
  .cv-res, .cv-res + .cv-res { display: none; margin-top: 0; }
  .cv-teaser:has(input[value="idea"]:checked) .cv-res[data-stage="idea"],
  .cv-teaser:has(input[value="draft"]:checked) .cv-res[data-stage="draft"],
  .cv-teaser:has(input[value="done"]:checked) .cv-res[data-stage="done"],
  .cv-teaser:has(input[value="stalled"]:checked) .cv-res[data-stage="stalled"] { display: block; animation: cv-in .5s var(--z-ease-out); }
}
@keyframes cv-in { from { opacity: 0; transform: translateY(8px); } }
.cv-res__title { font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 600; line-height: 1.2; color: var(--z-green); }
.cv-res__text { margin-top: .4rem; font-size: var(--z-fs-sm); color: var(--fg-muted); }
.cv-res__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.1rem; }
.cv-res__call { font-size: var(--z-fs-sm); font-weight: 500; color: var(--z-green); }

/* ---------- Final ---------- */
.cv-final__panel { position: relative; display: grid; gap: 2.5rem; padding: clamp(1.25rem, .7rem + 2.5vw, 3.5rem); border-radius: 32px; overflow: hidden; background-image: radial-gradient(70% 80% at 0% 100%, rgba(239,154,16,.2), transparent 60%), radial-gradient(50% 60% at 100% 0%, rgba(160,130,197,.18), transparent 70%); }
@media (min-width: 1000px) { .cv-final__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4rem; } }
.cv-final__copy { padding: clamp(.5rem, 1vw, 1.5rem); }
.cv-final__title { margin-top: 1rem; font-size: var(--z-fs-3xl); line-height: 1.02; }
.cv-final__text { margin-top: 1.25rem; max-width: 32rem; font-size: var(--z-fs-md); color: var(--z-green-200); }
.cv-final__phone { display: inline-flex; align-items: center; gap: .8rem; margin-top: 2rem; font-family: var(--z-font-display); font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); letter-spacing: -.02em; color: var(--z-cream); text-decoration: none; }
.cv-final__phone svg { width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: 50%; background: var(--z-amber); color: var(--z-green-950); }
.cv-final__phone:hover { color: var(--z-amber); }
.cv-final__or { margin-top: .75rem; color: var(--z-green-200); }
.cv-final__or a { color: var(--z-cream); }
.cv-final__form { padding: clamp(1.4rem, 1rem + 1.5vw, 2.5rem); border-radius: 22px; }
.cv-final__formtitle { margin-bottom: 1.25rem; font-size: var(--z-fs-xl); font-weight: 600; }
/* =====================================================================================
   MERGED LAYER (Job 2): overrides and new pieces on top of the lifted A + C sections
   ===================================================================================== */

/* ---------- Home hero: the SEO H1 on two clean lines, CTAs phone-first ---------- */
.s-hero__title { max-width: 10em; font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.5rem); }
.s-hero__lede { margin-top: 1.5rem; }
.s-hero .z-btn-row { margin-top: 2rem; }
.s-hero { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
@media (max-width: 979px) {
  .s-hero__grid { gap: 1.25rem; padding-top: 1.5rem; }
  .s-plate { order: -1; justify-self: start; width: 104px; }
  .s-plate__arch { box-shadow: inset 0 0 0 1px rgba(6,69,48,.28), inset 0 0 0 6px var(--z-parchment), inset 0 0 0 7px rgba(6,69,48,.3), var(--z-shadow-1); }
  .s-plate__cap { display: none; }
  .s-plate__rules { background-size: 100% 14px; background-image: repeating-linear-gradient(to bottom, transparent 0 13px, rgba(6,69,48,.075) 13px 14px); }
  .s-plate .z-quill path { stroke-width: 5; }
}
@media (max-width: 520px) {
  .s-hero .z-btn-row .z-btn { width: 100%; }
}

/* ---------- C picker as its own band directly under the hero ---------- */
.s-picker { position: relative; padding-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.s-picker .cv-teaser__title { margin-top: .8rem; font-size: var(--z-fs-xl); font-weight: 500; }
.s-picker__card { display: grid; }
.s-picker .cv-res__title { font-weight: 500; }
@media (min-width: 900px) {
  .s-picker__card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); padding: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
  .s-picker__intro, .s-picker .cv-teaser__opts { grid-column: 1; }
  .s-picker .cv-teaser__results {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; padding: 0 0 0 clamp(2rem, 4vw, 4rem);
    border-top: 0; border-left: 1.5px dashed var(--line-strong); min-height: 12rem; display: grid; align-content: center;
  }
}
@media (max-width: 759px) {
  .s-picker .cv-teaser { box-shadow: 8px 8px 0 0 var(--z-amber), 0 30px 60px -30px rgba(4,48,31,.45); }
  .s-picker .cv-teaser__opts { gap: .5rem; }
  .s-picker .cv-opt { min-height: 54px; padding: .6rem .7rem .5rem; }
  .s-picker .cv-teaser__results { min-height: 0; }
}

/* ---------- B band: the compact transformation, auto-played once ---------- */
.s-band {
  position: relative; overflow: hidden; padding-block: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  background: radial-gradient(70% 90% at 80% 40%, #0B5C40 0%, var(--z-green-900) 55%, var(--z-green-950) 100%);
}
.s-band__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) { .s-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 7rem); } }
.s-band h2 { margin-top: 1rem; font-size: var(--z-fs-2xl); color: var(--z-cream); }
.s-band .z-lede { margin-top: 1.25rem; color: var(--z-green-200); }
.s-band__steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0 2rem; list-style: none; padding: 0; }
.s-band__steps li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .35rem; border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: var(--z-fs-sm); color: var(--z-green-200);
  transition: background-color .45s var(--z-ease-out), color .45s, border-color .45s;
}
.s-band__n { font-family: var(--z-font-display); font-size: .9em; color: var(--z-amber); }
.s-band__steps li.is-done { color: var(--z-cream); border-color: rgba(239,154,16,.45); }
.s-band__steps li.is-active { background: var(--z-amber); border-color: var(--z-amber); color: var(--z-green-950); }
.s-band__steps li.is-active .s-band__n { color: var(--z-green-950); }
.s-band__stage { display: grid; place-items: center; }
.s-band .st-scene { width: min(460px, 100%); }
@media (max-width: 959px) {
  .s-band__stage { order: -1; }
  .s-band .st-scene { width: min(290px, 76vw); }
  .s-band__steps { margin: 1.25rem 0 1.5rem; }
}

/* ---------- Contents: link onward + tighter rows on phones ---------- */
.s-contents__more { margin-top: 2rem; }
@media (max-width: 720px) {
  .s-toc__row { padding-block: 1.25rem 1.2rem; }
  .s-toc__title { font-size: var(--z-fs-lg); }
  .s-toc__text { font-size: var(--z-fs-sm); }
  .s-contents__title { font-size: clamp(3rem, 2rem + 6vw, 4.5rem); }
}

/* ---------- Letters: collage on desktop, swipe rail on phones ---------- */
.s-letters__hint { display: none; }
.s-letters__grid:focus-visible { outline-offset: 6px; }
@media (max-width: 759px) {
  .s-letters__grid {
    display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--z-gutter)); padding: .75rem var(--z-gutter) 1.5rem; scroll-padding-inline: var(--z-gutter);
    scrollbar-width: none;
  }
  .s-letters__grid::-webkit-scrollbar { display: none; }
  .s-letter, .s-letter--1 { flex: 0 0 86%; scroll-snap-align: start; padding: 2.4rem 1.4rem 1.5rem 2.75rem; }
  .s-letter::before { left: 2.2rem; font-size: 3.4rem; }
  .s-letter--1 .s-letter__text, .s-letter__text { font-size: var(--z-fs-base); }
  .s-letters__hint { display: block; margin-top: .25rem; font-size: var(--z-fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--z-green-200); }
  .s-letters__hint::after { content: " \2192"; color: var(--z-amber); }
}

/* ---------- Editions: anchor for old /#pricing links ---------- */
.s-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
@media (max-width: 759px) { .s-colophon__list { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; text-align: left; } .s-colophon { text-align: left; } }

/* ---------- Closing call block ---------- */
.s-final { padding-top: clamp(2.5rem, 2rem + 3vw, 5rem); }
@media (max-width: 759px) {
  .cv-final__panel { border-radius: 20px; padding: 1.25rem; gap: 1.5rem; }
  .cv-final__copy { padding: .5rem .25rem 0; }
  .cv-final__title { font-size: var(--z-fs-2xl); }
  .cv-final__form { padding: 1.25rem; border-radius: 14px; }
}

/* ---------- House-consistent radii for the C pieces ---------- */
.zs .cv-teaser { border-radius: 14px; }
.zs .cv-opt { border-radius: 8px; }
.zs .cv-final__panel { border-radius: 14px; }
.zs .cv-final__form { border-radius: 10px; }

/* ---------- Phones: keep the page a sensible length ---------- */
@media (max-width: 759px) {
  .s-services { padding-top: 2.5rem; }
  /* editions: compact cards, inclusions collapsed (button in components.css) */
  .s-ed { padding: 2.1rem 1.25rem 1.35rem; gap: .85rem; }
  .s-ed::before { inset: 7px; }
  .s-ed .z-pkg__name { font-size: var(--z-fs-lg); }
  .s-ed .z-pkg__price { padding-block: .65rem; }
  .s-ed .z-pkg__amount { font-size: var(--z-fs-lg); }
  .s-ed .z-pkg__tagline { font-size: var(--z-fs-sm); }
  .s-colophon { margin-top: 2rem; padding-top: 1.25rem; }
  .s-colophon__list { margin-top: 1rem; }
  .s-colophon__list dd { display: none; }
  .s-colophon__list dt { font-size: var(--z-fs-base); }
  /* contents */
  .s-contents__head { gap: .75rem; margin-bottom: 1.25rem; }
  .s-toc__row { grid-template-columns: 2.2rem 1fr; gap: .6rem; padding-block: 1rem; }
  .s-toc__num { font-size: var(--z-fs-lg); }
  .s-toc__text { margin-top: .35rem; line-height: 1.5; }
  /* faq */
  .s-faq__side .z-lede { display: none; }
  .s-faq__side h2 { font-size: var(--z-fs-xl); }
  .s-faq .z-faq__q { padding: .95rem 0 .9rem; font-size: var(--z-fs-base); }
  .s-faq .z-faq__icon { width: 30px; height: 30px; }
  .s-faq .z-faq__a { padding-right: 0; font-size: var(--z-fs-sm); }
  /* band */
  .s-band { padding-block: 3rem; }
  .s-band .st-scene { width: min(250px, 68vw); }
}

/* =====================================================================================
   INNER PAGES: breadcrumbs, page heroes, the stage jump list, the call strip
   ===================================================================================== */
.s-crumbs { padding-top: 1.25rem; font-size: var(--z-fs-xs); color: var(--fg-muted); }
.s-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; }
.s-crumbs li + li::before { content: "/"; margin-right: .35rem; color: var(--line-strong); }
.s-crumbs a { color: var(--fg-muted); text-decoration: none; }
.s-crumbs a:hover { color: var(--fg-strong); text-decoration: underline; }
.s-hero--page .s-hero__grid { padding-top: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.s-hero__title--page { max-width: 15em; font-size: clamp(2.3rem, 1.2rem + 4vw, 4.75rem); line-height: 1.02; }
@media (min-width: 980px) { .s-hero__grid--how { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: end; } }

/* Stage jump list: a printed table of contents for the story below */
.s-jump { list-style: none; padding: 0; border-top: 1.5px solid var(--z-green); }
.s-jump a {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 .75rem; padding: .85rem .25rem .8rem; border-bottom: 1px solid var(--line-strong);
  color: var(--fg); text-decoration: none; transition: background-color var(--z-dur-2), padding var(--z-dur-3) var(--z-ease-out);
}
.s-jump a:hover { background: var(--z-parchment-50); padding-left: .6rem; color: var(--fg); }
.s-jump__n { grid-row: 1 / span 2; font-family: var(--z-font-display); font-style: italic; font-size: var(--z-fs-lg); color: var(--accent-ink); line-height: 1.1; }
.s-jump__s { font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.s-jump__t { font-family: var(--z-font-display); font-size: var(--z-fs-md); color: var(--fg-strong); line-height: 1.3; }
@media (max-width: 759px) { .s-jump__t { font-size: var(--z-fs-base); } .s-jump a { padding-block: .6rem .55rem; } }

/* Call strip (C): phone-first, one decision */
.s-callstrip { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.s-callstrip__grid { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 960px) { .s-callstrip__grid { grid-template-columns: minmax(0, 1.3fr) auto; gap: 4rem; } }
.s-callstrip__title { margin-top: .9rem; font-size: var(--z-fs-2xl); color: var(--z-cream); }
.s-callstrip__text { margin-top: .9rem; max-width: 38rem; color: var(--z-green-200); }
.s-callstrip__actions { display: grid; gap: 1rem; justify-items: start; }
.s-callstrip__phone {
  display: inline-flex; align-items: center; gap: .75rem; font-family: var(--z-font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  letter-spacing: -.02em; color: var(--z-cream); text-decoration: none;
}
.s-callstrip__phone svg { width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 50%; background: var(--z-amber); color: var(--z-green-950); flex: none; }
.s-callstrip__phone:hover { color: var(--z-amber); }
@media (max-width: 520px) { .s-callstrip__actions, .s-callstrip__actions .z-btn { width: 100%; } }

/* What comes with every package (how-it-works) */
.s-howinc__list { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; }
.s-howinc__list > div { padding-top: 1rem; border-top: 1.5px solid var(--z-green); }
.s-howinc__list dt { font-family: var(--z-font-display); font-size: var(--z-fs-lg); font-weight: 500; color: var(--z-green); }
.s-howinc__list dd { margin: .35rem 0 0; color: var(--fg-muted); }
@media (max-width: 759px) { .s-howinc__list { grid-template-columns: 1fr 1fr; } .s-howinc__list dt { font-size: var(--z-fs-base); } .s-howinc__list dd { font-size: var(--z-fs-sm); } }

/* ---------- "Also on our list" under the shelf ---------- */
.s-alsolist { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; margin-top: 2.5rem; font-family: var(--z-font-display); font-size: var(--z-fs-md); }
.s-alsolist__k { flex-basis: 100%; font-family: var(--z-font-body); font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.s-alsolist a { color: var(--fg-strong); text-decoration: underline; text-decoration-color: rgba(140,83,0,.45); text-underline-offset: .22em; }
.s-alsolist a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
@media (min-width: 900px) { .s-alsolist__k { flex-basis: auto; } }
@media (max-width: 759px) { .s-alsolist { margin-top: 1.75rem; font-size: var(--z-fs-base); gap: .35rem 1rem; } }

/* ---------- Phones: the three editions become a swipe rail (inclusions stay collapsed) ---------- */
.s-editions__hint { display: none; }
@media (max-width: 759px) {
  .s-editions__grid {
    display: flex; gap: .85rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; align-items: start;
    margin-inline: calc(-1 * var(--z-gutter)); padding: .5rem var(--z-gutter) 1rem; scroll-padding-inline: var(--z-gutter); scrollbar-width: none;
  }
  .s-editions__grid::-webkit-scrollbar { display: none; }
  .s-editions__grid > .z-pkg { flex: 0 0 86%; height: auto; scroll-snap-align: start; }
  .s-editions__grid:focus-visible { outline-offset: -3px; }
  .s-editions__hint { display: block; margin-top: .25rem; font-size: var(--z-fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted); }
  .s-editions__hint::after { content: " \2192"; color: var(--accent-ink); }
}

/* Grid children may shrink below their content's min-content width (no hidden overflow). */
.s-hero__grid > *, .s-lphero__cgrid > *, .bk__grid > *, .cv-final__panel > *, .s-band__grid > *, .s-callstrip__grid > * { min-width: 0; }
.cf-actions .z-btn { min-width: 0; }
.pk-hero { max-width: 52rem; }