/* The single-topic product landings (/medical-binder/, /emergency-binder/,
   /where-its-kept/, /letter-to-my-family/, /executor-checklist/). One sheet for
   all five; build.py renders the markup (product_landing_html) and the body
   class pp-<key> picks the accent. Same type, colors and parts as
   /life-story/ (life-story-landing/life-story.css). Mobile first: the base
   rules are the phone, min-width queries add the wider layouts. */
@font-face{font-family:Atkinson;src:url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2?v=d64ba838ef') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2?v=140e2bd25a') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Fraunces;src:url('/fonts/fraunces-latin-600-normal.woff2?v=3a1de7711d') format('woff2');font-weight:600;font-display:swap}

:root{--ink:#173f43;--text:#3f5350;--muted:#5f675e;--cream:#faf8f3;--sand:#efe9df;--gold:#c4a370;--line:#dcded3;
  --accent:#a64b30;--accent-dark:#883d27;--tint:#f0e4d7;--serif:Fraunces,Georgia,serif;--sans:Atkinson,Arial,sans-serif}
.pp-emergency-binder{--accent:#a0521f;--accent-dark:#80411a;--tint:#f2e6d3}
.pp-where-its-kept{--accent:#2f5a7e;--accent-dark:#244865;--tint:#e3e9ee}
.pp-letter-to-my-family{--accent:#7d3346;--accent-dark:#652838;--tint:#f4e5e8}
.pp-executor-checklist{--accent:#3d5e70;--accent-dark:#2f4a59;--tint:#e3e9eb}
.pp-christmas-puzzle-book{--accent:#9e2a30;--accent-dark:#7f2126;--tint:#f5e4e2}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--cream);color:var(--text);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.dialog-open{overflow:hidden}
h1,h2,h3,p,figure,ol,ul{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--ink)}
h1{font-size:clamp(31px,8.4vw,40px);line-height:1.08;letter-spacing:-1.2px}
h2{font-size:31px;line-height:1.14;letter-spacing:-1px}
h3{font-size:21px;line-height:1.25;letter-spacing:-.3px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:4px}
button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
::selection{background:#ead9bc;color:var(--ink)}
[hidden]{display:none!important}
.wrap{width:min(100%,1200px);margin-inline:auto;padding-inline:16px}
.section{padding-block:52px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;line-height:1.5;color:var(--accent);margin-bottom:12px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 22px;background:var(--ink);color:#fff;text-decoration:none;border:1px solid var(--ink);border-radius:4px;font-size:17px;font-weight:700;line-height:1.25;transition:background .18s,transform .18s}
.button:hover{background:#275a5d;transform:translateY(-2px)}
.button span{font-size:20px;font-weight:400}
.checkout{background:var(--accent);border-color:var(--accent)}
.checkout:hover{background:var(--accent-dark)}
.text-link{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1px solid var(--gold)}
.text-link:hover{color:var(--accent)}
.skip-link{position:fixed;z-index:20;top:-90px;left:10px;background:var(--ink);color:#fff;padding:12px}
.skip-link:focus{top:10px}

/* header */
.header{border-bottom:1px solid var(--line)}
.nav{height:60px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font:600 21px var(--serif);letter-spacing:-.6px;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;white-space:nowrap}
.brand-mark{font-family:Georgia,serif;margin-right:9px;font-size:24px;color:var(--accent)}
.brand-dot{color:var(--accent)}
.nav nav{display:none;gap:26px;font-size:15px}
.nav nav a{text-decoration:none}
.nav nav a:hover{color:var(--accent)}

/* hero: heading, pages, action (one column on a phone) */
.hero{display:grid;grid-template-areas:"copy" "product" "action";padding-top:24px;padding-bottom:36px}
.hero-copy{grid-area:copy}
.hero-intro{font-size:17px;margin-top:14px;max-width:520px}
.hero-spec{font-size:15px;font-weight:700;color:var(--ink);margin-top:14px;max-width:520px}
.hero-product{grid-area:product;margin:18px 0 14px;min-width:0}
.hero-action{grid-area:action;text-align:center}
.hero-buy{width:100%;justify-content:space-between}
.reassurance{font-size:15px;margin-top:12px}
.reassurance>span{color:var(--accent);margin-right:6px}
.digital-note{font-size:14px;color:var(--muted);margin-top:3px}

.stage{position:relative;width:100%;max-width:290px;aspect-ratio:1/0.86;margin:0 auto;isolation:isolate}
.stage-ring{position:absolute;border-radius:50%;background:var(--tint);width:86%;aspect-ratio:1;left:7%;top:-2%;z-index:-1}
.paper{display:block;padding:0;border:0;background:#fff;box-shadow:0 10px 26px #382c161f;transition:transform .2s,box-shadow .2s}
.paper:hover{box-shadow:0 14px 34px #382c1638}
.paper img{width:100%}
.stage .paper{position:absolute;width:42%}
.sheet-left{left:2%;top:14%;transform:rotate(-9deg)}
.sheet-right{right:2%;top:14%;transform:rotate(9deg)}
.stage .sheet-front{width:52%;left:24%;top:0;transform:rotate(-2deg);box-shadow:0 18px 38px #35281c40}
.hero-product figcaption{font-size:13px;text-align:center;color:var(--muted);margin-top:10px}

/* real pages */
.pages .section-heading{margin-bottom:24px}
.section-heading>p{font-size:16px;margin-top:12px;max-width:520px}
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:-16px;padding:4px 16px 16px;scroll-padding-left:16px;list-style:none}
.gallery li{flex:0 0 72%;scroll-snap-align:start;min-width:0}
.gallery .paper{background:var(--tint);padding:18px 24px;box-shadow:none;border:1px solid #e6e3d8}
.gallery .paper img{box-shadow:0 6px 14px #32261222}
.gallery .paper:hover{transform:translateY(-4px)}
.gallery h3{font-size:19px;margin-top:14px}
.gallery p{font-size:15px;margin-top:6px}

/* what's inside */
.inside{background:#f1eee6;border-block:1px solid var(--line)}
.inside-lead{font-size:16px;margin-top:12px;max-width:560px}
.toc{list-style:none;padding:0;display:grid;gap:14px;margin-top:28px;counter-reset:sec}
.toc>li{background:var(--cream);border:1px solid var(--line);border-top:4px solid var(--accent);padding:18px 18px 16px}
.toc h3{font-size:21px}
.toc ul{list-style:none;padding:0;margin-top:10px}
.toc ul li{font-size:16px;padding:4px 0 4px 22px;position:relative}
.toc ul li:before{content:'✓';position:absolute;left:0;color:var(--accent)}

/* who it's for */
.who-grid{list-style:none;padding:0;display:grid;gap:22px;margin-top:26px}
.who-grid li{border-left:3px solid var(--gold);padding-left:16px}
.who-grid p{font-size:16px;margin-top:6px}

/* how it works */
.how{background:var(--tint)}
.steps{list-style:none;padding:0;margin-top:26px;display:grid;gap:22px}
.steps li{display:flex;gap:16px}
.steps li>span{font:600 17px var(--serif);color:var(--accent);border-top:1px solid var(--gold);min-width:30px;padding-top:3px}
.steps h3{font-size:20px;margin-bottom:5px}
.steps p{font-size:16px}

/* offer */
.offer{display:grid;gap:30px;align-items:center}
.offer-visual{background:#f1eee4;padding:24px;display:flex;justify-content:center}
.offer-visual .paper{width:62%;max-width:300px;transform:rotate(-3deg)}
.price{display:flex;align-items:center;gap:16px;margin:18px 0}
.price strong{font:600 46px var(--serif);color:var(--ink);letter-spacing:-1.5px}
.price span{font-size:14px;color:var(--muted)}
.offer-list{list-style:none;padding:0;margin:0 0 22px}
.offer-list li{font-size:16px;margin:9px 0;padding-left:24px;position:relative}
.offer-list li:before{content:'✓';position:absolute;left:0;color:var(--accent)}
.offer-buy{width:100%;justify-content:space-between}
.payment-note{font-size:14px;text-align:center;margin-top:10px;color:var(--muted)}
.refund{display:flex;align-items:start;gap:12px;border-top:1px solid var(--line);margin-top:20px;padding-top:18px;font-size:15px}
.refund>span{font-size:20px;color:var(--accent)}
.refund strong{color:var(--ink)}

/* FAQ */
.faq-section{border-top:1px solid var(--line)}
.faq-section>div>p:not(.eyebrow){margin-top:14px;font-size:16px}
.faq-list{margin-top:24px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
.faq-list summary{display:flex;align-items:center;gap:20px;padding-block:17px;color:var(--ink);font-size:17px;font-weight:700}
summary>span:last-child{margin-left:auto;font-size:24px;font-weight:400;transition:transform .2s}
details[open]>summary>span:last-child{transform:rotate(45deg)}
.faq-list details>p{font-size:16px;padding:0 24px 20px 0}

/* the sets box (build.py bundle_box_html): as quiet as the kit line, above it */
.sets-note{margin-bottom:20px}
.sets-box{border:1px solid var(--line);border-left:4px solid var(--accent);background:#fff;padding:18px 20px}
.sets-box h2{font-size:22px;letter-spacing:-.3px}
.sets-box p{font-size:16px;margin-top:8px}
.sets-box ul{list-style:none;padding:0;margin:12px 0 14px}
.sets-box li{font-size:16px;padding:9px 0;border-top:1px solid var(--line)}
.sets-box li:last-child{border-bottom:1px solid var(--line)}
.sets-box li a{color:var(--ink);font-weight:700}
.sets-box strong{color:var(--ink);margin-left:6px}
.sets-box small{font-size:14px;color:var(--muted);margin-left:6px}
.sets-box li span{display:block;margin-top:2px;color:var(--text)}

/* the quiet kit line */
.kit-note{margin-bottom:44px}
.kit-note p{font-size:16px;border:1px solid var(--line);background:#f4f1e8;padding:18px 20px}
.kit-note a{display:inline-block;margin-top:8px}

/* closing */
.closing{text-align:center;padding:44px 0 48px;border-top:1px solid var(--line);background:#f4efe5}
.closing h2{max-width:640px;margin:0 auto}
.closing p{font-size:16px;margin:14px auto 22px;max-width:520px}
.closing .button{width:100%;max-width:420px;justify-content:space-between}
.closing-note{display:block;margin-top:13px;font-size:14px;color:var(--muted)}

/* footer */
.footer{padding-top:30px;padding-bottom:110px}
.footer-top{display:flex;flex-direction:column;gap:10px}
.footer-top>p{font-size:14px}
.footer-top nav{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;margin-top:6px}
.footer-bottom{border-top:1px solid var(--line);padding-top:16px;margin-top:22px;font-size:13px;color:var(--muted)}
.footer-bottom p+p{margin-top:8px}
.disclaimer{font-weight:700;color:var(--text)}

/* sticky buy bar on phones */
.mobile-buy{position:fixed;bottom:0;inset-inline:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#faf8f3f7;box-shadow:0 -3px 24px #173f4314}
.mobile-buy strong{display:block;font:600 16px var(--serif);color:var(--ink)}
.mobile-buy small{font-size:13px}
.mobile-buy .button{font-size:15px;padding:12px 14px;gap:6px;white-space:nowrap}
.mobile-buy .button span{display:none}

/* dialogs */
dialog{border:0;border-radius:6px;background:var(--cream);color:var(--text);padding:0;box-shadow:0 20px 100px #0004;width:min(760px,calc(100% - 20px));max-height:92dvh}
dialog::backdrop{background:#112a2cd9}
.dialog-top{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;background:var(--cream);border-bottom:1px solid var(--line)}
.dialog-top h2{font-size:20px;letter-spacing:-.4px}
.dialog-close,.checkout-close{background:transparent;border:0;color:var(--ink);font-size:32px;line-height:1;width:44px;height:44px}
.dialog-body{padding:8px;background:#e8e6de}
.dialog-body img{width:100%;box-shadow:0 4px 14px #0002}
.dialog-note{font-size:14px;text-align:center;padding:12px}
#checkout-dialog{padding:34px 24px;width:min(500px,calc(100% - 20px))}
#checkout-dialog h2{font-size:30px}
#checkout-dialog>p:not(.eyebrow){font-size:16px;margin:16px 0}
.checkout-close{position:absolute;right:6px;top:6px}

@media(min-width:620px){
  .wrap{padding-inline:28px}
  .gallery{margin-inline:-28px;padding-inline:28px;scroll-padding-left:28px}
  .gallery li{flex-basis:40%}
  .toc{grid-template-columns:1fr 1fr}
  .who-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .hero-buy,.offer-buy{width:auto;min-width:320px}
  .hero-action{text-align:left}
  .stage{max-width:420px}
}

@media(min-width:900px){
  body{font-size:18px}
  .wrap{padding-inline:40px}
  .section{padding-block:84px}
  .nav{height:80px}
  .nav nav{display:flex}
  .brand{font-size:24px}
  h1{font-size:clamp(42px,4.4vw,58px);letter-spacing:-2px;line-height:1.05}
  h2{font-size:clamp(34px,3.4vw,44px);letter-spacing:-1.4px}
  .hero{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;grid-template-areas:"copy product" "action product";column-gap:48px;padding-top:56px;padding-bottom:64px;align-items:start}
  .hero-intro{font-size:19px;margin-top:20px}
  .hero-spec{margin-top:18px}
  .hero-action{padding-top:28px}
  .hero-product{align-self:center;margin:0}
  .stage{max-width:540px}
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}
  .gallery .paper{padding:22px 30px}
  .section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px}
  .section-heading>p{max-width:360px;margin:0}
  .toc{grid-template-columns:repeat(3,1fr);gap:18px}
  .offer{grid-template-columns:.8fr 1fr;gap:80px}
  .offer-visual{padding:40px}
  .faq-section{display:grid;grid-template-columns:.6fr 1fr;gap:80px}
  .faq-list{margin-top:0}
  .closing{padding:64px 0 70px}
  .closing h2{font-size:48px}
  .footer{padding-bottom:28px}
  .footer-top{flex-direction:row;justify-content:space-between;align-items:center}
  .footer-bottom{display:flex;justify-content:space-between;gap:30px}
  .footer-bottom p+p{margin-top:0}
  .mobile-buy{display:none!important}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* under the hero buy button (build.py product_sets_line; .ls-line, the
   puzzle books' My Life Story line, product_under_buy_line 09.11.2026): the sets this guide
   is also in, one plain line linking to /bundles/. */
.sets-line,.ls-line{font-size:16px;line-height:1.5;color:var(--text);margin-top:14px}
.sets-line a,.ls-line a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);white-space:nowrap}
.sets-line a:hover,.ls-line a:hover{color:var(--accent-dark)}