/* Zeal Publishers — the 2026 Platform Price & Spine Planner (Job 12): /book-royalty-calculator and
 * /book-cover-size-calculator. Brand tokens only (tokens.css): emerald, amber, cream, Lora + Hind.
 * The royalty page's centrepiece is a price ladder: rungs are list prices, bars are KDP's royalty, the ground
 * is KDP's minimum price and the dashed gates are published thresholds. The cover page draws the flat cover
 * on cream and thickens the spine with the page count. Motion is transform/opacity; reduced motion lands in
 * final states. Mobile first: one column, 16px gutters (the container's), nothing wider than the screen. */

.zs-pf { --pf-paper: #FBF8F1; --pf-ease: cubic-bezier(.22, .9, .3, 1); --pf-line: rgba(6, 69, 48, .14); }
.zs-pf [hidden] { display: none !important; }   /* the format tabs show and hide grid/flex blocks */

/* ---------- Hero ---------- */
.pf-hero { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.pf-hero__grid { display: grid; gap: clamp(1rem, .8rem + 2vw, 3rem); align-items: center; padding-top: clamp(.8rem, .6rem + 2vw, 2rem); }
@media (min-width: 940px) { .pf-hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); } }
.pf-hero__title { margin-top: .9rem; font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); font-weight: 500; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
.pf-hero__title em { display: block; margin-top: .35rem; font-size: .6em; color: var(--z-amber-ink); letter-spacing: -.02em; }
.pf-hero__title--wide { max-width: 22ch; }
.zs-pf--cover .pf-hero__title { margin-top: .9rem; }
.pf-hero__lede { margin-top: 1rem; max-width: 42rem; }
.pf-art { display: none; width: 100%; max-width: 260px; height: auto; justify-self: center; }
@media (min-width: 940px) { .pf-art { display: block; } }
.pf-art__rungs rect { transform-box: fill-box; transform-origin: left center; animation: pf-grow .9s var(--pf-ease) both; }
.pf-art__rungs rect:nth-child(1) { animation-delay: .05s; } .pf-art__rungs rect:nth-child(2) { animation-delay: .12s; }
.pf-art__rungs rect:nth-child(3) { animation-delay: .19s; } .pf-art__rungs rect:nth-child(4) { animation-delay: .34s; }
.pf-art__rungs rect:nth-child(5) { animation-delay: .41s; } .pf-art__rungs rect:nth-child(6) { animation-delay: .48s; }
.pf-art__rungs rect:nth-child(7) { animation-delay: .55s; }
@keyframes pf-grow { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- The calculator card ---------- */
.pf-calc { margin-top: clamp(1.25rem, 1rem + 2vw, 2.25rem); padding: clamp(1rem, .7rem + 2vw, 2.25rem); border-radius: var(--z-r-lg); background: var(--pf-paper); box-shadow: var(--z-shadow-2), inset 0 0 0 1px rgba(40, 40, 40, .07); }
.pf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; max-width: 30rem; padding: .3rem; border-radius: var(--z-r-pill); background: rgba(6, 69, 48, .08); }
.pf-tab { min-height: 44px; padding: 0 .6rem; border: 0; border-radius: var(--z-r-pill); background: none; color: var(--z-green); font: 600 .98rem var(--z-font-body); cursor: pointer; transition: background .2s, color .2s; }
.pf-tab:hover { background: rgba(6, 69, 48, .08); }
.pf-tab[aria-selected="true"] { background: var(--z-green); color: var(--z-cream); box-shadow: var(--z-shadow-1); }
.pf-tab:focus-visible { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.pf-calc__body { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 2.25rem); margin-top: 1.25rem; }
@media (min-width: 980px) { .pf-calc__body { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
/* phones: the results come straight after the price; the optional own-costs line follows them */
@media (max-width: 979px) { .pf-calc__body { display: flex; flex-direction: column; gap: 1.1rem; } .pf-calc__body > .pf-inputs { display: contents; }
  .pf-calc__body > .pf-outs { order: 1; } .pf-calc__body .pf-own { order: 2; } }
.pf-inputs { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.pf-row2 { display: grid; gap: 1.1rem; }
@media (min-width: 560px) { .pf-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pf-field { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.pf-label { font-weight: 700; color: var(--z-green); font-size: var(--z-fs-sm); }
.pf-opt { font-weight: 500; color: var(--z-ink-muted); }
.pf-note { font-size: var(--z-fs-xs); color: var(--z-ink-muted); line-height: 1.45; }
.pf-note a { color: var(--z-green); font-weight: 600; }
.pf-select, .pf-num { width: 100%; min-height: 48px; padding: .6rem .8rem .5rem; border: 1.5px solid rgba(40, 40, 40, .24); border-radius: var(--z-r-sm); background: var(--z-white); color: var(--z-charcoal); font: 500 1rem var(--z-font-body); font-variant-numeric: tabular-nums; }
.pf-select { padding-right: 2.2rem; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: var(--z-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23064530' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right .7rem center / 16px; }
.pf-select:focus, .pf-num:focus { outline: none; border-color: var(--z-green); box-shadow: 0 0 0 4px rgba(239, 154, 16, .35); }
.pf-step { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; }
.pf-step .pf-num { border-radius: 0; text-align: center; border-left: 0; border-right: 0; -moz-appearance: textfield; }
.pf-step__b { min-height: 48px; border: 1.5px solid rgba(40, 40, 40, .24); background: var(--z-cream); color: var(--z-green); font: 600 1.3rem var(--z-font-body); cursor: pointer; }
.pf-step__b:first-child { border-radius: var(--z-r-sm) 0 0 var(--z-r-sm); }
.pf-step__b:last-child { border-radius: 0 var(--z-r-sm) var(--z-r-sm) 0; }
.pf-step__b:hover { background: var(--z-amber-tint); }
.pf-step__b:focus-visible { outline: 3px solid var(--z-amber); outline-offset: 1px; position: relative; z-index: 1; }
.pf-money { position: relative; display: flex; align-items: center; min-width: 0; }
.pf-money > span { position: absolute; left: .8rem; color: var(--z-ink-muted); font-weight: 600; pointer-events: none; }
.pf-money .pf-num { padding-left: 1.7rem; }
.pf-money--pct > span { left: auto; right: .8rem; }
.pf-money--pct .pf-num { padding-left: .8rem; padding-right: 1.8rem; }
.pf-money--big > span { font: 600 1.4rem var(--z-font-display); color: var(--z-green); left: .9rem; }
.pf-num--price { min-height: 56px; padding-left: 2.1rem !important; font: 600 1.6rem var(--z-font-display); color: var(--z-green); }
.pf-price { padding: 1rem 1.1rem .8rem; border-radius: var(--z-r-md); background: var(--z-white); box-shadow: inset 0 0 0 1px var(--pf-line); }
.pf-price__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 11rem); align-items: center; gap: .8rem; }
.pf-price__note { margin-top: .2rem; }
.pf-range { width: 100%; height: 44px; margin: .2rem 0 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pf-range:focus { outline: none; }
.pf-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--z-amber) var(--p, 20%), rgba(6, 69, 48, .14) var(--p, 20%)); }
.pf-range::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--z-amber) var(--p, 20%), rgba(6, 69, 48, .14) var(--p, 20%)); }
.pf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--z-green); border: 4px solid var(--z-cream); box-shadow: 0 2px 8px rgba(2, 29, 19, .35); }
.pf-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--z-green); border: 4px solid var(--z-cream); box-shadow: 0 2px 8px rgba(2, 29, 19, .35); }
.pf-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.pf-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--z-amber); outline-offset: 2px; }

/* ---------- Outputs: one card per platform ---------- */
.pf-outs { display: grid; gap: 1rem; min-width: 0; }
.pf-print { padding: .7rem .9rem; border-radius: var(--z-r-sm); background: rgba(6, 69, 48, .06); font-size: var(--z-fs-sm); line-height: 1.5; }
.pf-print b { font: 600 1.05rem var(--z-font-display); color: var(--z-green); }
.pf-print.is-bad { background: #FCE8E6; color: var(--z-red-ink); }
.pf-cards { display: grid; gap: .8rem; }
@media (min-width: 600px) { .pf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-card { display: grid; align-content: start; gap: .3rem; min-width: 0; padding: 1rem 1.05rem .9rem; border-radius: var(--z-r-md); background: var(--z-white); box-shadow: inset 0 0 0 1px var(--pf-line); }
.pf-card[hidden] { display: none; }
.pf-card--kdp { background: var(--z-green); color: var(--z-green-200); box-shadow: var(--z-shadow-2); }
.pf-card__name { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; font: 700 var(--z-fs-xs)/1.3 var(--z-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--z-amber-ink); }
.pf-card--kdp .pf-card__name { color: var(--z-amber); }
.pf-chip { padding: .1rem .55rem; border-radius: var(--z-r-pill); background: var(--z-amber-tint); color: var(--z-amber-ink); font-size: .74rem; letter-spacing: .04em; }
.pf-chip:empty { display: none; }
.pf-card--kdp .pf-chip { background: var(--z-amber); color: var(--z-green-950); }
.pf-card__v { font: 600 clamp(2rem, 1.5rem + 1.6vw, 2.6rem)/1.05 var(--z-font-display); color: var(--z-green); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pf-card--kdp .pf-card__v { color: var(--z-cream); }
.pf-card__v.is-neg { color: var(--z-red-ink); }
.pf-card--kdp .pf-card__v.is-neg { color: #FFB4B4; }
.pf-card__v.is-dim { opacity: .45; }
.pf-card__v.is-word { font-size: 1.9rem; }
.pf-card__f { font-size: var(--z-fs-xs); line-height: 1.45; color: var(--z-ink-muted); overflow-wrap: anywhere; }
.pf-card--kdp .pf-card__f { color: var(--z-green-200); }
.pf-card__m { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.pf-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .4rem .6rem; margin-top: .4rem; padding-top: .6rem; border-top: 1px dashed var(--pf-line); }
.pf-mini label { font-size: var(--z-fs-xs); font-weight: 700; color: var(--z-green); }
.pf-mini .pf-num { min-height: 42px; padding-top: .45rem; padding-bottom: .35rem; font-size: .95rem; }
.pf-mini__note { grid-column: 1 / -1; }
.pf-mini[hidden] { display: none; }

/* the small "Verified [date]" mark beside every number */
.pf-ver { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem .02rem; border-radius: var(--z-r-pill); background: var(--z-green-50); color: var(--z-green); font: 600 .7rem/1.6 var(--z-font-body); letter-spacing: .02em; text-decoration: none; white-space: nowrap; vertical-align: .08em; }
.pf-ver::before { content: ""; width: .7em; height: .7em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pf-ver:hover { background: var(--z-amber-tint); color: var(--z-amber-ink); }
.pf-ver:focus-visible { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.pf-card--kdp .pf-ver { background: rgba(250, 249, 245, .12); color: var(--z-cream); }

.pf-own { display: grid; gap: .4rem; padding: .9rem 1.1rem; border-radius: var(--z-r-md); background: rgba(6, 69, 48, .05); }
.pf-own__out { font-size: var(--z-fs-sm); line-height: 1.45; }
.pf-own .pf-money { max-width: 14rem; }
.pf-own__out { font-weight: 600; color: var(--z-green); }
.pf-tips { margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); padding: 1rem 1.15rem; border-radius: var(--z-r-md); background: var(--z-amber-tint); }
.pf-tips[hidden] { display: none; }
.pf-tips__h { display: flex; align-items: center; gap: .5rem; font: 700 var(--z-fs-sm) var(--z-font-body); color: var(--z-amber-ink); }
.pf-tips__h svg { width: 18px; height: 18px; flex: none; }
.pf-tips__list { display: grid; gap: .45rem; margin-top: .6rem; }
.pf-tips__list li { position: relative; padding-left: 1.1rem; font-size: var(--z-fs-sm); line-height: 1.5; }
.pf-tips__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--z-amber-press); }
.pf-fine { margin-top: 1rem; font-size: var(--z-fs-xs); color: var(--z-ink-muted); line-height: 1.5; }
.pf-fine a { color: var(--z-green); font-weight: 600; }

/* ---------- The price ladder ---------- */
.pf-lad-sec { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.pf-lad-head { display: grid; gap: .8rem 3rem; align-items: end; }
@media (min-width: 940px) { .pf-lad-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pf-lad-lede { color: var(--z-ink-muted); max-width: 38rem; }
.pf-ladder { position: relative; display: grid; max-width: 52rem; margin: 1.5rem auto 0; padding: 1.1rem clamp(.6rem, .3rem + 2vw, 1.5rem) 0; border-radius: var(--z-r-lg); background: var(--pf-paper); box-shadow: var(--z-shadow-2), inset 0 0 0 1px rgba(40, 40, 40, .07); overflow: hidden; }
.pf-rung-li, .pf-lgate, .pf-floor { list-style: none; }
.pf-rung { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 4.4rem 4.2rem; align-items: center; gap: 0 .5rem; width: 100%; min-height: 40px; padding: 0; border: 0; background: none; color: var(--z-charcoal); font: 600 .92rem var(--z-font-body); text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.pf-rung__p { text-align: right; color: var(--z-green); }
.pf-rung__t { position: relative; height: 40px; border-left: 7px solid var(--z-green); border-right: 7px solid var(--z-green); background: linear-gradient(transparent 46%, rgba(6, 69, 48, .1) 46% 54%, transparent 54%); }
.pf-rung__t i { position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; border-radius: 0 6px 6px 0; background: #9DB5A5; transform-origin: left center; transition: transform .55s var(--pf-ease), background .3s; }
.pf-rung.is-hi .pf-rung__t i { background: var(--z-amber); }
.pf-rung__v { text-align: right; color: var(--z-charcoal); }
.pf-rung__r { font-size: .72rem; color: var(--z-ink-muted); white-space: nowrap; }
.pf-rung.is-neg .pf-rung__v { color: var(--z-red-ink); }
.pf-rung:hover .pf-rung__t { background-color: rgba(239, 154, 16, .08); }
.pf-rung:focus-visible { outline: 3px solid var(--z-amber); outline-offset: -3px; border-radius: 6px; }
.pf-rung.is-you { background: rgba(6, 69, 48, .07); border-radius: 8px; }
.pf-rung.is-you .pf-rung__p, .pf-rung.is-you .pf-rung__v { color: var(--z-green); font-weight: 700; }
.pf-rung.is-you .pf-rung__t i { box-shadow: 0 0 0 3px rgba(239, 154, 16, .28); }
.pf-rung.is-you .pf-rung__r::after { content: " ◂ you"; color: var(--z-amber-ink); font-weight: 700; }
.pf-lgate { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .6rem; margin: .25rem 0; padding: .35rem 0; }
.pf-lgate::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--z-amber-press); z-index: 0; }
.pf-lgate > * { position: relative; z-index: 1; }
.pf-lgate__t { padding: .12rem .7rem; border-radius: var(--z-r-pill); background: var(--z-amber-tint); color: var(--z-amber-ink); font-size: .8rem; font-weight: 700; box-shadow: 0 0 0 4px var(--pf-paper); }
.pf-floor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .7rem; margin: .6rem calc(-1 * clamp(.6rem, .3rem + 2vw, 1.5rem)) 0; padding: .8rem 1rem .9rem; background: var(--z-parchment-300); color: var(--z-green-900); font-size: .86rem; font-weight: 700; text-align: center;
  background-image: repeating-linear-gradient(135deg, rgba(4, 48, 31, .08) 0 6px, transparent 6px 12px); }
.pf-lad-empty { list-style: none; padding: 1.5rem; text-align: center; color: var(--z-ink-muted); }
@media (max-width: 480px) { .pf-rung { grid-template-columns: 3.9rem minmax(0, 1fr) 3.9rem 2.2rem; gap: 0 .35rem; font-size: .84rem; } .pf-rung.is-you .pf-rung__r::after { content: ""; } }

/* ---------- Gate ---------- */
.pf-gatesec { padding-block: clamp(1rem, .6rem + 2vw, 2.5rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.pf-gatesec[hidden], .pf-report[hidden] { display: none; }
.pf-gatebox { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 3rem); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: var(--z-r-lg); background: var(--z-white); box-shadow: var(--z-shadow-3), inset 0 0 0 1.5px var(--z-amber); }
@media (min-width: 940px) { .pf-gatebox { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.pf-h2 { font-size: var(--z-fs-xl); font-weight: 500; line-height: 1.12; text-wrap: balance; }
.pf-h2 em { color: var(--z-amber-ink); }
.pf-h2--sm { font-size: var(--z-fs-lg); }
.pf-h2:focus { outline: none; }
.pf-h3 { margin-top: .5rem; font-size: var(--z-fs-lg); font-weight: 500; line-height: 1.2; }
.pf-h4 { font: 600 var(--z-fs-md)/1.3 var(--z-font-display); color: var(--z-green); }
.pf-gate__list { display: grid; gap: .55rem; margin-top: .9rem; }
.pf-gate__list li { display: flex; gap: .55rem; align-items: flex-start; }
.pf-gate__list svg { flex: none; width: 20px; height: 20px; margin-top: .15rem; color: var(--z-amber-press); }
.pf-form { max-width: 34rem; min-width: 0; }
.pf-q-set { border: 0; padding: 0; margin: 0; min-width: 0; }
.pf-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; }
.pf-pill { position: relative; }
.pf-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pf-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem; border-radius: var(--z-r-pill); border: 1.5px solid rgba(6, 69, 48, .2); background: var(--z-cream); font-size: .92rem; font-weight: 600; color: var(--z-green); }
.pf-pill input:checked + span { background: var(--z-green); color: var(--z-cream); border-color: var(--z-green); }
.pf-pill input:focus-visible + span { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.pf-err { min-height: 1.4em; margin-top: .6rem; color: var(--z-red-ink); font-weight: 600; font-size: var(--z-fs-sm); }

/* ---------- The spec sheet / template (after the gate) ---------- */
.pf-report { padding-block: clamp(1rem, .6rem + 2vw, 2.5rem) clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.pf-sheet { padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: 4px; background-color: var(--pf-paper); box-shadow: 0 2px 0 rgba(0, 0, 0, .04), var(--z-shadow-3);
  background-image: repeating-linear-gradient(transparent 0 1.9rem, rgba(6, 69, 48, .04) 1.9rem calc(1.9rem + 1px)); }
.pf-sheet__k { padding-bottom: .55rem; border-bottom: 1px solid rgba(40, 40, 40, .16); font-size: var(--z-fs-2xs); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--z-ink-muted); }
.pf-sheet .pf-h2 { margin-top: 1rem; }
.pf-sheet__sum { margin-top: .5rem; color: var(--z-ink-muted); }
.pf-sheet__rows { display: grid; margin-top: 1.2rem; border-top: 2px solid var(--z-green); }
.pf-srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(40, 40, 40, .12); }
.pf-srow__h { font-weight: 700; color: var(--z-green); }
.pf-srow__v { font: 600 1.15rem var(--z-font-display); color: var(--z-charcoal); text-align: right; font-variant-numeric: tabular-nums; }
.pf-srow__f, .pf-srow__s { grid-column: 1 / -1; font-size: var(--z-fs-xs); color: var(--z-ink-muted); overflow-wrap: anywhere; }
.pf-srow__s { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.pf-sheet__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.4rem; }
.pf-sheet__btns .z-btn { white-space: normal; text-align: center; line-height: 1.2; }
.pf-sheet__fine { margin-top: 1rem; font-size: var(--z-fs-xs); color: var(--z-ink-muted); }
.pf-linkbtn { min-height: 44px; padding: 0; border: 0; background: none; color: var(--z-green); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-cta { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); padding: clamp(1.4rem, 1rem + 2.5vw, 3rem); border-radius: var(--z-r-lg); }
.pf-cta__h { font-size: var(--z-fs-xl); font-weight: 500; line-height: 1.15; color: var(--z-cream); }
.pf-cta__p { margin-top: .7rem; max-width: 42rem; color: var(--z-green-200); }
.pf-cta__btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.pf-cta__btns .z-btn { white-space: normal; text-align: center; line-height: 1.2; }
.pf-cta__btns .z-btn[hidden] { display: none; }
.pf-cta__done { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--z-r-sm); background: rgba(250, 249, 245, .1); color: var(--z-cream); font-weight: 600; }
.pf-cta__or { margin-top: 1rem; color: var(--z-green-200); font-size: var(--z-fs-sm); }
.pf-cta__or a { color: var(--z-amber); }

/* ---------- The rules, side by side ---------- */
.pf-plats { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .pf-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1160px) { .pf-plats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pf-plat { min-width: 0; padding: 1.2rem 1.2rem 1.1rem; border-radius: var(--z-r-md); background: var(--pf-paper); box-shadow: var(--z-shadow-1), inset 0 0 0 1px rgba(40, 40, 40, .07); }
.pf-plat__h { font: 600 var(--z-fs-md)/1.25 var(--z-font-display); color: var(--z-green); }
.pf-plat dl { display: grid; gap: .25rem; margin: .7rem 0 0; font-size: var(--z-fs-sm); }
.pf-plat dt { margin-top: .35rem; font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--z-amber-ink); }
.pf-plat dd { margin: 0; line-height: 1.5; }
.pf-q { margin: .8rem 0 0; padding-left: .8rem; border-left: 3px solid var(--z-amber); font: italic 400 .92rem/1.5 var(--z-font-display); overflow-wrap: anywhere; }
.pf-q cite { display: block; margin-top: .2rem; font: 600 .74rem var(--z-font-body); font-style: normal; color: var(--z-ink-muted); }
.pf-q cite a { color: inherit; }
.pf-qlist { display: grid; gap: .3rem; margin-top: .7rem; font: italic 400 .92rem/1.45 var(--z-font-display); }
.pf-small { margin-top: .7rem; font-size: var(--z-fs-xs); color: var(--z-ink-muted); line-height: 1.5; }
.pf-small a { color: var(--z-green); }
.pf-conflicts, .pf-aside { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: var(--z-r-md); background: var(--z-amber-tint); border-left: 4px solid var(--z-amber); }
.pf-aside { background: rgba(6, 69, 48, .05); border-left-color: var(--z-green); }
.pf-conflict, .pf-aside p { margin-top: .7rem; }
.pf-aside a { color: var(--z-green); font-weight: 600; }

/* ---------- 2026 changes + other stores ---------- */
.pf-y26__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
@media (min-width: 980px) { .pf-y26__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.pf-tl { display: grid; gap: 0; margin-top: 1.2rem; }
.pf-tl__i { position: relative; padding: 0 0 1.4rem 1.6rem; border-left: 2px solid rgba(6, 69, 48, .2); }
.pf-tl__i:last-child { padding-bottom: 0; }
.pf-tl__i::before { content: ""; position: absolute; left: -8px; top: .2rem; width: 14px; height: 14px; border-radius: 50%; background: var(--z-amber); box-shadow: 0 0 0 4px var(--z-parchment); }
.pf-tl__d { font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--z-amber-ink); }
.pf-tl__t { margin-top: .2rem; font-weight: 600; color: var(--z-green); }
.pf-tbl { width: 100%; margin-top: .9rem; border-collapse: collapse; font-size: var(--z-fs-sm); }
.pf-tbl th, .pf-tbl td { padding: .55rem .4rem; border-bottom: 1px solid rgba(40, 40, 40, .14); text-align: left; vertical-align: top; }
.pf-tbl thead th { font-size: var(--z-fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--z-ink-muted); }
.pf-tbl tbody th { font-weight: 600; color: var(--z-green); }

/* ---------- FAQ + sources ---------- */
.pf-ref__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
@media (min-width: 940px) { .pf-ref__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.pf-faq .pf-h2 { margin-bottom: .8rem; }
.pf-faq__item { border-bottom: 1px solid rgba(6, 69, 48, .15); padding: .9rem 0; }
.pf-faq__item summary { cursor: pointer; font-weight: 700; color: var(--z-green); min-height: 28px; }
.pf-faq__item summary:focus-visible { outline: 3px solid var(--z-amber); outline-offset: 2px; }
.pf-faq__item p { margin-top: .5rem; }
.pf-sources p { margin-top: .8rem; }
.pf-sources ul { display: grid; gap: .45rem; margin-top: .9rem; padding-left: 1.1rem; list-style: disc; }
.pf-sources a { color: var(--z-green); }
.pf-src-d { font-size: var(--z-fs-xs); color: var(--z-ink-muted); white-space: nowrap; }
.pf-sources .pf-h4 { margin-top: 1.4rem; }
.pf-log { list-style: none !important; padding-left: 0 !important; }
.pf-log time { font-weight: 700; color: var(--z-green); margin-right: .3rem; }
.pf-sources__fine { font-size: var(--z-fs-xs); color: var(--z-ink-muted); }

/* ---------- The cover page ---------- */
.pf-cv { display: grid; gap: clamp(1.1rem, .9rem + 1.5vw, 1.75rem) clamp(1.25rem, 1rem + 2vw, 2.25rem); grid-template-areas: "in" "board" "stats"; }
.pf-cv > .pf-inputs { grid-area: in; } .pf-cv > .pf-board { grid-area: board; } .pf-cv > .pf-stats { grid-area: stats; }
@media (min-width: 1020px) { .pf-cv { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "in board" "stats board"; align-items: start; } .pf-cv > .pf-board { position: sticky; top: calc(var(--z-header-h) + 1rem); } }
.pf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.pf-stat { display: grid; align-content: start; gap: .15rem; min-width: 0; padding: .85rem .9rem; border-radius: var(--z-r-md); background: var(--z-white); box-shadow: inset 0 0 0 1px var(--pf-line); }
.pf-stat__k { font-size: var(--z-fs-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--z-amber-ink); }
.pf-stat b { font: 600 clamp(1.3rem, 1.05rem + .8vw, 1.6rem)/1.1 var(--z-font-display); color: var(--z-green); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pf-stat__u, .pf-stat__f { font-size: var(--z-fs-xs); color: var(--z-ink-muted); line-height: 1.4; overflow-wrap: anywhere; }
.pf-stat--main { grid-column: 1 / -1; background: var(--z-green); box-shadow: var(--z-shadow-2); }
.pf-stat--main .pf-stat__k { color: var(--z-amber); }
.pf-stat--main b { font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); color: var(--z-cream); }
.pf-stat--main .pf-stat__u, .pf-stat--main .pf-stat__f { color: var(--z-green-200); }
.pf-stat--main .pf-ver { background: rgba(250, 249, 245, .12); color: var(--z-cream); }
.pf-stat--no b { color: var(--z-red-ink); }
.pf-stat--borderline b { color: var(--z-amber-ink); }
.pf-board { margin: 0; min-width: 0; padding: clamp(.6rem, .4rem + 1.5vw, 1.4rem); border-radius: var(--z-r-lg); background: var(--z-cream); box-shadow: inset 0 0 0 1px rgba(40, 40, 40, .08);
  background-image: radial-gradient(rgba(6, 69, 48, .08) 1px, transparent 1px); background-size: 14px 14px; }
.pf-board__svg { width: 100%; }
.pf-board__svg svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 24px rgba(2, 29, 19, .18)); }
.pf-board__cap { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .8rem; font-size: var(--z-fs-xs); color: var(--z-ink-muted); }
.pf-key { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--z-charcoal); }
.pf-key::before { content: ""; width: 16px; height: 10px; border-radius: 2px; }
.pf-key--bleed::before { background: repeating-linear-gradient(45deg, #FBE5BF 0 3px, #EF9A10 3px 4.5px); }
.pf-key--safe::before { border: 1.5px dashed #2F6FDB; }
.pf-key--bc::before { background: #fff; border: 1.5px solid #8C5300; }
.pf-key--fold::before { height: 0; border-top: 2px dashed #C42A29; }
.zs-pf--cover .pf-calc .pf-inputs { gap: 1rem; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pf-art__rungs rect { animation: none; }
  .pf-rung__t i, .pf-tab, .pf-select, .pf-num { transition: none; }
}