/* Read FRONTEND.md before changing this file (shared front-end component rules).
   It records why every rule carries a prefix, why the component must supply its
   own base styles, and why :hover cannot be verified with a simulated mouse. */
/* Scoped: every rule is prefixed with .kp-paywall.
   Reason: a page's own generic rules reach straight into the dialog.
   generate.html has button:hover{color:var(--ink)} at (0,1,1), which beats a
   single-class component selector at (0,1,0) -- on hover the label turned dark
   green on a dark green button and vanished. box.html has
   button{width:100%;min-height:42px}, which changed the dialog height too. */

/* Isolation: push page styles out first, then let the component rules below
   define everything again.
   One shared component is not the same as a protected one. A page's own
   input{} / button{} / font rules reach inside: the same dialog measured 64px
   inputs in generate and 80px in box, 46px different in total height, with a
   different typeface as well.
   Do not use all:revert to do this -- it also reverts the page box-sizing and
   the layout collapses. */
.kp-paywall *{box-sizing:border-box}
/* !important is required: the hidden attribute only amounts to display:none at
   (0,1,1), and the component sets display on .kp-auth-field / .kp-google at
   (0,2,0), which overrides it -- the password field and the Google button could
   not be hidden in the forgot-password view. */
.kp-paywall [hidden]{display:none!important}
.kp-paywall input,.kp-paywall button,.kp-paywall textarea,.kp-paywall select{font-family:inherit;margin:0}
.kp-paywall h1,.kp-paywall h2,.kp-paywall h3,.kp-paywall p,.kp-paywall label,.kp-paywall ul,.kp-paywall li,.kp-paywall figure{margin:0;padding:0}
.kp-paywall button{padding:0;border:0;background:none}
/* editor.html has h2{text-transform:uppercase;letter-spacing:.1em}; the headings
   here set neither, so in the editor they came out in capitals (09-29). */
.kp-paywall h1,.kp-paywall h2,.kp-paywall h3{text-transform:none;letter-spacing:normal}
.kp-paywall{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;background:rgba(22,36,27,.58);backdrop-filter:blur(7px);font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.kp-paywall[hidden]{display:none!important}.kp-paywall *{box-sizing:border-box}.kp-paywall-card{position:relative;width:min(820px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;padding:30px;border:1px solid rgba(27,42,33,.16);border-radius:18px;background:#F4F3EB;color:#1B2A21;box-shadow:0 28px 90px rgba(18,31,22,.32)}.kp-paywall-close{position:absolute;right:17px;top:15px;width:34px;height:34px;padding:0;border:1px solid rgba(27,42,33,.13);border-radius:50%;background:#E7EAE2;color:#536359;font-family:inherit;font-size:20px;line-height:1;cursor:pointer}.kp-paywall-close:hover{background:#DDE3D9;color:#1B2A21}.kp-paywall-eyebrow{margin:0 0 8px;color:#B33A26;font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase}.kp-paywall h2{margin:0 42px 8px 0;color:#2E4A38;font-size:clamp(22px,3vw,31px);line-height:1.15;letter-spacing:-.025em}.kp-paywall-intro{max-width:630px;margin:0;color:#5C6B60;font-size:13px;line-height:1.7}.kp-paywall-note{margin:17px 0 0;text-align:center;color:#718076;font-size:10px;line-height:1.6}.kp-paywall-note a,.kp-paywall .kp-login{color:#3D6B4A;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.kp-paywall-status{min-height:18px;margin:10px 0 0;text-align:center;color:#B33A26;font-size:11px;font-weight:650}.kp-paywall .kp-digital-consent{display:flex;align-items:flex-start;gap:8px;margin:16px auto 4px;padding:11px 13px;border:1px solid rgba(27,42,33,.12);border-radius:8px;background:#ECEFE7;color:#526258;font-size:10px;line-height:1.55;cursor:pointer}.kp-paywall .kp-digital-consent input{flex:none;margin:2px 0 0;accent-color:#3D6B4A}
@media(max-width:700px){.kp-paywall{padding:10px}.kp-paywall-card{max-height:calc(100vh - 20px);padding:24px 17px}}

/* Hover states: as in auth-modal, the weight must beat the page rule
   button:hover:not(:disabled) at (0,2,1). Prefixed to .kp-paywall-card,
   giving (0,3,1). */
.kp-paywall .kp-paywall-card .kp-login:hover{color:#2E4A38;text-decoration:underline}

/* Download paywall (10-23): a stack of paper sheets with a cut-wave header.
   Every rule sits under .kp-paywall-stack, so the free-download confirmation,
   which shares .kp-paywall-card, keeps its own look. Card, slot and perks box
   heights are fixed: picking another plan never moves anything. */
.kp-paywall{transition:background .35s}
.kp-paywall.is-tearing{background:rgba(22,36,27,0);backdrop-filter:none}
.kp-paywall .kp-paywall-stack{position:relative;width:min(880px,calc(100% - 18px));margin:0 18px 18px 0}
.kp-paywall .kp-sheet{position:absolute;inset:0;border-radius:10px}
.kp-paywall .kp-sheet-back{transform:translate(18px,18px);background:#2E4A38}
.kp-paywall .kp-sheet-mid{transform:translate(9px,9px);background:#8FA394;box-shadow:0 2px 6px rgba(27,42,33,.25)}
.kp-paywall .kp-paywall-stack .kp-paywall-card{width:100%;max-height:calc(100vh - 58px);padding:0;overflow-x:hidden;overflow-y:auto;border:0;border-radius:10px;background:#EFF1E9;box-shadow:0 3px 8px rgba(27,42,33,.28)}
/* The dark green stops above the bottom of the header: under the waves there is
   only the card colour, so no hairline shows where header and body meet. */
.kp-paywall .kp-paywall-head{position:relative;height:196px;padding:30px 110px 0 44px;background:linear-gradient(#2E4A38 0 172px,transparent 172px)}
/* The head is a <header>; pages style their own top bar with a bare header{} rule (pricing.html: flex,
   sticky, border, blur), which turned this head into one squeezed row there (10-26). Undo exactly those. */
.kp-paywall header.kp-paywall-head{display:block;top:auto;z-index:auto;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.kp-paywall .kp-paywall-head .kp-paywall-eyebrow{margin:0 0 8px;color:#F3C9BE;font-size:12px}
.kp-paywall .kp-paywall-head h2{margin:0 0 8px;color:#FFFFFF;font-size:34px;font-weight:700;line-height:1.08;letter-spacing:-.015em;font-variation-settings:'wdth' 112}
.kp-paywall .kp-paywall-head .kp-paywall-intro{max-width:none;color:#D5E0D7;font-size:15px;line-height:1.5}
.kp-paywall .kp-paywall-head .kp-paywall-close{right:22px;top:22px;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid rgba(255,255,255,.55);background:transparent;color:#FFFFFF}
.kp-paywall .kp-paywall-close svg{display:block;width:14px;height:14px}
.kp-paywall .kp-paywall-card .kp-paywall-head .kp-paywall-close:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
.kp-paywall .kp-paywall-waves{position:absolute;left:0;bottom:-2px;display:block;width:100%;height:72px}
.kp-paywall .kp-paywall-body{padding:20px 44px 22px}
.kp-paywall .kp-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;height:322px;padding-top:8px;align-items:start}
.kp-paywall .kp-paywall-card .kp-plan{display:grid;grid-template-columns:18px minmax(0,1fr);grid-template-areas:"dot name" "price price" "sub sub" "feat feat";grid-template-rows:auto auto auto 1fr;column-gap:10px;align-content:start;width:100%;height:306px;padding:20px 20px 18px;border:1px solid rgba(27,42,33,.18);border-radius:8px;background:#F7F8F3;color:#1B2A21;font-family:inherit;text-align:left;cursor:pointer;box-shadow:0 1px 2px rgba(27,42,33,.08);transition:transform .18s,box-shadow .18s}
.kp-paywall .kp-paywall-card .kp-plan:hover{border-color:#8FA394;background:#F7F8F3;color:#1B2A21}
.kp-paywall .kp-paywall-card .kp-plan.is-on,.kp-paywall .kp-paywall-card .kp-plan.is-on:hover{border:2px solid #2E4A38;background:#FFFFFF;transform:translateY(-8px);box-shadow:6px 6px 0 #8FA394,12px 12px 0 #2E4A38,0 18px 28px rgba(27,42,33,.18)}
.kp-paywall .kp-paywall-card .kp-plan:focus-visible{outline:2px solid #B33A26;outline-offset:3px}
.kp-paywall .kp-dot{grid-area:dot;align-self:center;display:grid;place-items:center;width:18px;height:18px;border:2px solid #9AA79D;border-radius:50%}
.kp-paywall .kp-dot::after{content:'';width:8px;height:8px;border-radius:50%}
.kp-paywall .kp-plan.is-on .kp-dot{border-color:#2E4A38}
.kp-paywall .kp-plan.is-on .kp-dot::after{background:#2E4A38}
.kp-paywall .kp-plan-name{grid-area:name;display:flex;align-items:center;gap:8px;color:#1B2A21;font-size:16px;font-weight:700}
.kp-paywall .kp-badge{margin-left:auto;padding:4px 10px;border-radius:999px;background:#2E4A38;color:#FFFFFF;font-size:11px;font-weight:700;letter-spacing:.02em}
.kp-paywall .kp-price{grid-area:price;display:flex;align-items:baseline;gap:7px;margin-top:18px}
.kp-paywall .kp-was{color:#6B786F;font-size:14px;text-decoration:line-through}
.kp-paywall .kp-now{color:#1B2A21;font-size:38px;font-weight:800;line-height:1;letter-spacing:-.02em}
.kp-paywall .kp-period{color:#5C6B60;font-size:13px}
.kp-paywall .kp-equivalent{grid-area:sub;margin-top:8px;color:#5C6B60;font-size:13px}
.kp-paywall .kp-features{grid-area:feat;display:flex;flex-direction:column;gap:8px;margin-top:18px}
.kp-paywall .kp-feat{position:relative;padding-left:22px;color:#1B2A21;font-size:13.5px;line-height:1.35}
.kp-paywall .kp-feat::before{content:'';position:absolute;left:4px;top:2px;width:5px;height:9px;border:solid #2E4A38;border-width:0 2px 2px 0;transform:rotate(45deg)}
.kp-paywall .kp-perks{display:none}
.kp-paywall .kp-paywall-slot{display:flex;align-items:center;height:58px}
.kp-paywall .kp-paywall-slot .kp-digital-consent{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0;border:0;background:none;color:#3E4C42;font-size:13px;line-height:1.45}
.kp-paywall .kp-paywall-slot .kp-digital-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:#2E4A38}
.kp-paywall .kp-commercial{color:#3E4C42;font-size:13.5px;line-height:1.45}
.kp-paywall .kp-commercial b{color:#1B2A21}
.kp-paywall .kp-paywall-card .kp-cta{display:block;width:360px;max-width:100%;height:52px;margin:0 auto;border-radius:8px;background:#2E4A38;color:#FFFFFF;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 0 #1B2A21}
.kp-paywall .kp-paywall-card .kp-cta:hover{background:#345C3F;color:#FFFFFF}
.kp-paywall .kp-paywall-card .kp-cta:disabled{opacity:.6;cursor:default}
.kp-paywall .kp-paywall-stack .kp-paywall-status{margin-top:8px}
.kp-paywall .kp-paywall-stack .kp-paywall-note{margin-top:6px;font-size:12px}
/* Closing: two copies of the stack, cut along a jagged line, fall apart.
   The polygons reach 40px past the box so the offset sheets are kept. */
.kp-paywall .kp-tear{position:fixed;margin:0;pointer-events:none;transform-origin:50% 0}
.kp-paywall .kp-tear-l{clip-path:polygon(-40px -40px,50% -40px,47% 8%,53% 16%,48% 24%,54% 33%,47% 42%,52% 51%,46% 60%,53% 69%,48% 78%,54% 87%,49% 94%,51% calc(100% + 40px),-40px calc(100% + 40px));animation:kp-tear-l .5s cubic-bezier(.45,0,.9,.6) forwards}
.kp-paywall .kp-tear-r{clip-path:polygon(50% -40px,calc(100% + 40px) -40px,calc(100% + 40px) calc(100% + 40px),51% calc(100% + 40px),49% 94%,54% 87%,48% 78%,53% 69%,46% 60%,52% 51%,47% 42%,54% 33%,48% 24%,53% 16%,47% 8%);animation:kp-tear-r .5s cubic-bezier(.45,0,.9,.6) forwards}
@keyframes kp-tear-l{0%{transform:none;opacity:1}55%{opacity:1}100%{transform:translate(-90px,380px) rotate(-16deg);opacity:0}}
@keyframes kp-tear-r{0%{transform:none;opacity:1}55%{opacity:1}100%{transform:translate(90px,420px) rotate(13deg);opacity:0}}
/* Short screens (a laptop browser is often 650-750px tall): tighter spacing and
   slightly smaller type, so the button is on screen without scrolling. */
/* Points context (2026-10-26): two cards (Pro, or the two packs) and one switch line under them.
   The line keeps its height whether or not it shows text, so switching never moves the button. */
.kp-paywall .kp-plans.is-two{grid-template-columns:repeat(2,minmax(0,280px));justify-content:center}
.kp-paywall .kp-switch-row{display:flex;justify-content:center;align-items:center;height:30px;margin:4px 0 0}
.kp-paywall .kp-switch-row[hidden]{display:none!important}
.kp-paywall .kp-paywall-card .kp-switch{padding:4px 8px;border:0;background:none;color:#2E4A38;font-family:inherit;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kp-paywall .kp-paywall-card .kp-switch:hover{color:#B33A26}
@media(min-width:701px) and (max-height:820px){
  .kp-paywall .kp-paywall-stack .kp-paywall-card{max-height:calc(100vh - 40px)}
  .kp-paywall{padding:12px 20px}
  .kp-paywall .kp-paywall-head{height:150px;padding:22px 100px 0 40px;background:linear-gradient(#2E4A38 0 134px,transparent 134px)}
  .kp-paywall .kp-paywall-head .kp-paywall-eyebrow{font-size:11px;margin-bottom:6px}
  .kp-paywall .kp-paywall-head h2{font-size:28px;margin-bottom:6px}
  .kp-paywall .kp-paywall-head .kp-paywall-intro{font-size:14px}
  .kp-paywall .kp-paywall-head .kp-paywall-close{top:16px;right:16px}
  .kp-paywall .kp-paywall-waves{height:52px}
  .kp-paywall .kp-paywall-body{padding:12px 40px 14px}
  .kp-paywall .kp-plans{height:284px;gap:16px}
  .kp-paywall .kp-paywall-card .kp-plan{height:270px;padding:16px 18px 14px}
  .kp-paywall .kp-plan-name{font-size:15px}
  .kp-paywall .kp-price{margin-top:12px}
  .kp-paywall .kp-now{font-size:32px}
  .kp-paywall .kp-equivalent{margin-top:6px;font-size:12.5px}
  .kp-paywall .kp-features{margin-top:12px;gap:6px}
  .kp-paywall .kp-feat{font-size:12.5px}
  .kp-paywall .kp-paywall-slot{height:48px}
  .kp-paywall .kp-paywall-slot .kp-digital-consent{font-size:12px;line-height:1.4}
  .kp-paywall .kp-commercial{font-size:12.5px}
  .kp-paywall .kp-paywall-card .kp-cta{height:46px;font-size:14px}
  .kp-paywall .kp-paywall-stack .kp-paywall-status{margin-top:4px}
  .kp-paywall .kp-paywall-stack .kp-paywall-note{margin-top:2px;font-size:11px}
}
/* Phone: a sheet from the bottom, plans as rows, the picked plan's perks in one box. */
@media(max-width:700px){
  .kp-paywall{padding:0;place-items:end center}
  .kp-paywall .kp-paywall-stack{width:100%;margin:0}
  .kp-paywall .kp-sheet{display:none}
  .kp-paywall .kp-paywall-stack .kp-paywall-card{max-height:calc(100vh - 24px);border-radius:16px 16px 0 0}
  .kp-paywall .kp-paywall-head{padding:22px 72px 0 20px;background:linear-gradient(#2E4A38 0 182px,transparent 182px)}
  .kp-paywall .kp-paywall-head .kp-paywall-eyebrow{font-size:11px;margin-bottom:6px}
  .kp-paywall .kp-paywall-head h2{font-size:25px;line-height:1.1;margin-bottom:6px}
  .kp-paywall .kp-paywall-head .kp-paywall-intro{font-size:13px;line-height:1.45}
  .kp-paywall .kp-paywall-head .kp-paywall-close{right:14px;top:14px}
  .kp-paywall .kp-paywall-waves{height:46px}
  .kp-paywall .kp-paywall-body{padding:12px 20px 18px}
  .kp-paywall .kp-plans{grid-template-columns:1fr;gap:10px;height:auto;padding-top:0}
  .kp-paywall .kp-paywall-card .kp-plan{grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:"dot name price" "dot sub price";grid-template-rows:auto auto;row-gap:2px;column-gap:12px;align-content:center;height:64px;padding:0 14px}
  .kp-paywall .kp-paywall-card .kp-plan.is-on,.kp-paywall .kp-paywall-card .kp-plan.is-on:hover{transform:none;box-shadow:4px 4px 0 #8FA394,8px 8px 0 #2E4A38}
  .kp-paywall .kp-plan-name{font-size:15px}
  .kp-paywall .kp-badge{margin-left:0;padding:3px 8px;font-size:10px}
  .kp-paywall .kp-price{display:grid;grid-template-columns:auto auto;justify-items:end;align-items:baseline;column-gap:3px;margin:0}
  .kp-paywall .kp-was{grid-column:1/-1;font-size:11px}
  .kp-paywall .kp-now{font-size:22px}
  .kp-paywall .kp-period{font-size:11px}
  .kp-paywall .kp-equivalent{margin:0;font-size:12px}
  .kp-paywall .kp-plan .kp-features{display:none}
  .kp-paywall .kp-perks{display:flex;flex-direction:column;gap:8px;height:144px;margin-top:10px;padding:14px 16px;border:1px dashed rgba(27,42,33,.25);border-radius:8px;background:#FFFFFF}
  .kp-paywall .kp-perks .kp-features{margin:0}
  .kp-paywall .kp-perks .kp-feat{font-size:13px}
  .kp-paywall .kp-perks-title{color:#5C6B60;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .kp-paywall .kp-paywall-slot{height:64px}
  .kp-paywall .kp-paywall-slot .kp-digital-consent{font-size:11.5px;line-height:1.4}
  .kp-paywall .kp-commercial{font-size:12.5px;line-height:1.4}
  .kp-paywall .kp-paywall-card .kp-cta{width:100%}
  .kp-paywall .kp-paywall-stack .kp-paywall-note{font-size:11px}
}

/* Free-download confirmation (KerfPaywall.confirmFree). A small card, two
   buttons; states carry the same (0,3,x) prefix as the plan buttons above. */
.kp-paywall .kp-confirm-card{width:min(440px,100%)}
.kp-paywall .kp-confirm-card .kp-paywall-intro+.kp-paywall-intro{margin-top:8px}
.kp-paywall .kp-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.kp-paywall .kp-confirm-actions button{min-height:42px;padding:0 20px;border:1px solid #AEBBAF;border-radius:8px;background:#E1E7DE;color:#2E4A38;font-size:12px;font-weight:650;cursor:pointer}
.kp-paywall .kp-confirm-actions .kp-confirm-yes{border-color:#3D6B4A;background:#3D6B4A;color:#fff}
.kp-paywall .kp-paywall-card .kp-confirm-actions .kp-confirm-no:hover{background:#D6DED2;border-color:#8FA593;color:#2E4A38}
.kp-paywall .kp-paywall-card .kp-confirm-actions .kp-confirm-yes:hover{background:#345C3F;border-color:#345C3F;color:#fff}

/* "Didn't get the file?" bar (KerfPaywall.offerAgain). Not a dialog: it sits at
   the bottom of the page and the page stays usable. Same base lines and prefix
   rules as the rest of the component; states at (0,3,x). */
.kp-again *{box-sizing:border-box}
.kp-again[hidden],.kp-again [hidden]{display:none!important}
.kp-again button{font-family:inherit;margin:0;padding:0;border:0;background:none}
.kp-again p{margin:0;padding:0}
.kp-again{position:fixed;left:50%;bottom:20px;z-index:999;transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100% - 32px);padding:12px 46px 12px 18px;border:1px solid rgba(27,42,33,.16);border-radius:12px;background:#F4F3EB;color:#1B2A21;box-shadow:0 14px 40px rgba(18,31,22,.22);font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;line-height:1.5}
.kp-again .kp-again-text b{color:#2E4A38;font-weight:700}
.kp-again .kp-again-actions{display:flex;align-items:center;gap:10px;flex:none}
.kp-again .kp-again-btn{min-height:34px;padding:0 14px;border:1px solid #3D6B4A;border-radius:8px;background:#3D6B4A;color:#fff;font-size:12px;font-weight:650;cursor:pointer}
.kp-again .kp-again-free{color:#718076;font-size:11px}
.kp-again .kp-again-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:1px solid rgba(27,42,33,.13);border-radius:50%;display:grid;place-items:center;background:#E7EAE2;color:#536359;cursor:pointer}
/* A drawn cross, not the × character: each font puts that glyph somewhere else in the circle. */
.kp-again .kp-again-close svg{display:block;width:12px;height:12px}
.kp-again.kp-again .kp-again-btn:hover{background:#345C3F;border-color:#345C3F;color:#fff}
.kp-again.kp-again .kp-again-close:hover{background:#DDE3D9;color:#1B2A21}
@media(max-width:560px){.kp-again{flex-direction:column;align-items:flex-start;gap:8px;bottom:12px;width:calc(100% - 24px);max-width:none}}