/* ============================================================
   THE PRE-LISTING FILTER — sales page
   Design system: warm editorial / trusted-advisor
   Audience: US homeowners 45–70. Large type, high contrast,
   generous spacing, big tap targets. Light theme only.
   ============================================================ */

:root{
  color-scheme: light;

  /* Paper & ink */
  --paper:      #FBF8F3;
  --paper-2:    #F4EDE2;
  --paper-3:    #EFE6D8;
  --white:      #FFFFFF;
  --ink:        #1A1613;
  --ink-2:      #3B342D;
  --muted:      #6D6459;
  --line:       #E3D8C7;
  --line-soft:  #EFE7DA;

  /* Accents */
  --clay:       #B04A1C;
  --clay-dark:  #923C15;
  --clay-tint:  #FBEDE4;
  --forest:     #1C3A32;
  --forest-2:   #142A24;
  --gold:       #B98B42;
  --green:      #2F6A4F;

  /* Type */
  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Scale */
  --step--1: clamp(.95rem, .92rem + .15vw, 1.02rem);
  --step-0:  clamp(1.08rem, 1.03rem + .22vw, 1.2rem);
  --step-1:  clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.35rem + .9vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.6rem + 1.6vw, 3rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.7vw, 4.1rem);

  --wrap: 1160px;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(26,22,19,.05), 0 12px 32px -12px rgba(26,22,19,.18);
  --shadow-lg: 0 2px 4px rgba(26,22,19,.06), 0 32px 64px -24px rgba(26,22,19,.28);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  color:var(--ink);
  font-variation-settings:"opsz" 40;
}
h1{ font-size:var(--step-4); line-height:1.04; letter-spacing:-.025em; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); line-height:1.22; }
p{ margin:0 0 1.1em; }
a{ color:var(--clay); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--clay-dark); }

:focus-visible{
  outline:3px solid var(--clay);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:.8em 1.2em;
  font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- Layout ---------- */
.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.5rem, 760px); }
@media (max-width:640px){ .wrap{ width:calc(100% - 2rem); } }

.section{ padding:clamp(3.75rem, 7vw, 7rem) 0; }
.section--tint{ background:var(--paper-2); }
.section--problem{ background:var(--paper); border-top:1px solid var(--line-soft); }

.section__head{ max-width:44ch; margin-bottom:clamp(2rem,4vw,3.25rem); }
.section__head--center{ margin-inline:auto; text-align:center; max-width:46ch; }
.section__lede{ font-size:var(--step-1); line-height:1.5; color:var(--ink-2); margin-bottom:0; }

.kicker{
  font-family:var(--sans);
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay); margin:0 0 1rem;
}
.kicker--light{ color:var(--gold); }
.eyebrow{
  font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.4rem;
}
.eyebrow a{ color:var(--clay); }

.lede{ font-size:var(--step-1); line-height:1.55; color:var(--ink-2); }
.lede--tight{ font-size:var(--step-0); }
.microcopy{ font-size:.9rem; color:var(--muted); margin:.9rem 0 0; }
.checkout-error{
  font-size:.92rem; line-height:1.5; color:#8A2C10;
  background:var(--clay-tint); border:1px solid rgba(176,74,28,.28);
  border-radius:var(--radius); padding:.75em 1em; margin:.9rem 0 0;
}
[aria-busy="true"]{ opacity:.75; cursor:progress; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--sans); font-weight:600; letter-spacing:-.005em;
  text-decoration:none; text-align:center; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius);
  transition:transform .14s ease, background-color .14s ease, box-shadow .14s ease;
}
.btn--solid{
  background:var(--clay); color:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 10px 24px -12px rgba(176,74,28,.75);
}
.btn--solid:hover{ background:var(--clay-dark); color:#fff; transform:translateY(-1px); }
.btn--solid:active{ transform:translateY(0); }
.btn--sm{ padding:.7em 1.15em; font-size:.95rem; }
.btn--lg{ padding:1.05em 1.9em; font-size:1.1rem; }
.btn--block{ display:flex; width:100%; }
@media (max-width:480px){
  .btn--lg{ width:100%; font-size:1.03rem; padding:1.05em 1.2em; }
}

/* ---------- Announcement bar ---------- */
.announce{
  background:var(--forest); color:#EFE7DA;
  font-size:.88rem; letter-spacing:.01em;
}
.announce .wrap{ display:flex; align-items:center; justify-content:center; gap:.65rem; padding:.7rem 0; }
.announce p{ margin:0; text-align:center; }
.announce__dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none;
  box-shadow:0 0 0 3px rgba(185,139,66,.25);
}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,248,243,.9);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-header__inner{
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem 0;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand__mark{
  width:38px; height:38px; flex:none; display:grid; place-items:center;
  background:var(--forest); color:var(--paper-2);
  font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.02em;
  border-radius:2px;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text strong{ font-family:var(--display); font-size:1.06rem; font-weight:600; letter-spacing:-.01em; }
.brand__text em{ font-style:normal; font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }

.site-nav{ display:flex; gap:1.6rem; }
.site-nav a{
  color:var(--ink-2); text-decoration:none; font-size:.95rem; font-weight:500;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.site-nav a:hover{ color:var(--clay); border-bottom-color:var(--clay); }
@media (max-width:900px){ .site-nav{ display:none; } }
@media (max-width:520px){
  .site-header__inner .btn{ display:none; }
  .brand__text em{ display:none; }
}

/* ---------- Hero ---------- */
.hero{ padding:clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-areas:
    "intro art"
    "body  art";
  grid-template-rows:auto 1fr;
  column-gap:clamp(2rem,5vw,4.5rem);
  align-content:center;
}
.hero__intro{ grid-area:intro; }
.hero__body{ grid-area:body; }
.hero__art{ grid-area:art; align-self:center; }

@media (max-width:900px){
  .hero__grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    grid-template-areas:"intro" "art" "body";
    row-gap:2.25rem;
  }
  .hero__art{ max-width:290px; margin-inline:auto; }
  .hero__intro h1{ margin-bottom:0; }
}

.hero h1 .hl{
  color:var(--clay);
  font-style:italic;
  font-variation-settings:"opsz" 144;
}
.hero .lede{ max-width:52ch; }
.hero__cta{ margin-top:2rem; }

.trust-strip{
  list-style:none; margin:2.75rem 0 0; padding:1.6rem 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:2.2rem;
}
.trust-strip li{ display:flex; flex-direction:column; gap:.15rem; }
.trust-strip strong{
  font-family:var(--display); font-size:1.65rem; font-weight:600; color:var(--forest);
  line-height:1;
}
.trust-strip span{ font-size:.82rem; color:var(--muted); max-width:18ch; line-height:1.35; }
@media (max-width:560px){
  .trust-strip{ gap:1.15rem; }
  .trust-strip li{ flex-direction:row; align-items:baseline; gap:.75rem; width:100%; }
  .trust-strip strong{ font-size:1.45rem; min-width:3.6rem; }
  .trust-strip span{ max-width:none; font-size:.88rem; }
}

.cover{ margin:0; }
.cover img{
  width:100%;
  border-radius:2px 6px 6px 2px;
  box-shadow:var(--shadow-lg);
  transform:rotate(-1.2deg);
}
.cover__caption{
  text-align:center; font-size:.82rem; color:var(--muted);
  margin:1.6rem 0 0; letter-spacing:.02em;
}

/* ---------- Problem cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:860px){ .cards{ grid-template-columns:1fr; } }
.card{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:2rem 1.75rem;
  box-shadow:0 1px 2px rgba(26,22,19,.03);
}
.card__num{
  font-family:var(--display); font-size:.9rem; font-weight:600; letter-spacing:.1em;
  color:var(--clay); margin:0 0 1rem;
}
.card h3{ font-size:1.22rem; margin-bottom:.6rem; }
.card p{ margin:0; color:var(--ink-2); font-size:1rem; line-height:1.6; }

/* ---------- Dark section ---------- */
.section--dark{ background:var(--forest); color:#E8DFD1; }
.section--dark h2, .h2--light{ color:#FBF8F3; }
.section--dark p{ color:#D3C9B9; }

.reframe{ max-width:66ch; margin-inline:auto; text-align:center; }
.reframe blockquote{ margin:0 0 2.5rem; }
.reframe blockquote p{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.7rem,1.2rem+2.2vw,2.9rem);
  line-height:1.22; letter-spacing:-.02em; color:#FBF8F3; margin:0;
}
.reframe blockquote em{ color:var(--gold); font-style:italic; }
.reframe__body{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; text-align:left; }
@media (max-width:760px){ .reframe__body{ grid-template-columns:1fr; gap:0; } }
.reframe__body p{ font-size:1.02rem; line-height:1.7; margin:0 0 1em; }

/* ---------- Chapters ---------- */
.chapters{
  list-style:none; counter-reset:ch; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0 3.5rem;
  border-top:1px solid var(--line);
}
@media (max-width:860px){ .chapters{ grid-template-columns:1fr; gap:0; } }
.chapters li{
  counter-increment:ch;
  padding:1.7rem 0 1.7rem 3.4rem;
  border-bottom:1px solid var(--line);
  position:relative;
}
.chapters li::before{
  content:counter(ch,decimal-leading-zero);
  position:absolute; left:0; top:1.95rem;
  font-family:var(--display); font-size:.9rem; font-weight:600;
  color:var(--clay); letter-spacing:.06em;
}
.chapters h3{ font-size:1.18rem; margin-bottom:.35rem; }
.chapters p{ margin:0; font-size:.99rem; line-height:1.58; color:var(--muted); }

/* ---------- Excerpt ---------- */
.excerpt-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:860px){ .excerpt-wrap{ grid-template-columns:1fr; } }
.excerpt-wrap .section__head{ margin-bottom:0; }
.excerpt{ margin:0; }
.excerpt__page{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(2rem,4vw,3.25rem);
  box-shadow:var(--shadow);
  position:relative;
}
.excerpt__page::after{
  content:""; position:absolute; inset:0; border-radius:2px;
  border-left:3px solid var(--clay); pointer-events:none;
}
.excerpt__label{
  font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 1.2rem;
}
.excerpt__page p{ font-size:1.02rem; line-height:1.72; color:var(--ink-2); }
.excerpt__page p strong{ font-family:var(--display); font-size:1.35rem; color:var(--clay); }
.excerpt__page p:last-child{ margin-bottom:0; }
.excerpt__page em{ color:var(--muted); }

/* ---------- Fit ---------- */
.fit{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:820px){ .fit{ grid-template-columns:1fr; } }
.fit__col{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem 1.9rem; background:var(--white);
}
.fit__col--yes{ border-top:4px solid var(--green); }
.fit__col--no{ border-top:4px solid var(--line); background:transparent; }
.fit h3{ font-size:1.28rem; margin-bottom:1.1rem; }
.fit ul{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.fit li{ position:relative; padding-left:1.9rem; font-size:1rem; line-height:1.55; color:var(--ink-2); }
.fit__col--yes li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:12px; height:7px; border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.fit__col--no li::before{
  content:""; position:absolute; left:2px; top:.68em;
  width:11px; height:2px; background:var(--muted);
}

/* ---------- Bonuses ---------- */
.bonuses{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:860px){ .bonuses{ grid-template-columns:1fr; } }
.bonus{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:2rem 1.75rem;
}
.bonus__tag{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--clay); background:var(--clay-tint);
  padding:.35em .7em; border-radius:2px; margin:0 0 1rem;
}
.bonus h3{ font-size:1.2rem; margin-bottom:.5rem; }
.bonus p{ margin:0; font-size:.99rem; line-height:1.6; color:var(--muted); }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
@media (max-width:860px){ .about{ grid-template-columns:1fr; } .about__art{ max-width:300px; } }
.about__art img{
  width:100%; border-radius:var(--radius-lg);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.about__caption{
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:.95rem 0 0; text-align:center;
}
.about__copy .lede{ max-width:none; }
.about__copy p{ color:var(--ink-2); }
.about__scope{
  border-left:3px solid var(--gold); padding:.2rem 0 .2rem 1.2rem;
  color:var(--muted) !important; font-size:1rem;
}
.about__link a{ font-weight:600; text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- Testimonials ---------- */
.placeholder-note{
  font-size:.85rem; color:#F0C88A; background:rgba(0,0,0,.22);
  border:1px dashed rgba(240,200,138,.5); border-radius:var(--radius);
  padding:.7em 1em; margin-top:1rem;
}
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media (max-width:860px){ .quotes{ grid-template-columns:1fr; } }
.quote{
  margin:0; background:rgba(255,255,255,.05);
  border:1px solid rgba(232,223,209,.16); border-radius:var(--radius-lg);
  padding:1.9rem 1.7rem;
}
.quote blockquote{ margin:0 0 1.2rem; }
.quote blockquote p{
  font-family:var(--display); font-size:1.08rem; line-height:1.5;
  color:#F3ECE0 !important; margin:0;
}
.quote figcaption{
  font-size:.88rem; font-weight:600; color:#E8DFD1;
  display:flex; flex-direction:column; gap:.1rem;
}
.quote figcaption span{ font-weight:400; font-size:.8rem; color:#A99E8C; }

/* ---------- Offer ---------- */
.section--offer{ background:var(--paper-3); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.offer{ display:grid; grid-template-columns:1fr .8fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width:900px){ .offer{ grid-template-columns:1fr; } }
.offer__list{ list-style:none; margin:1.75rem 0 0; padding:0; display:grid; gap:1rem; }
.offer__list li{
  position:relative; padding-left:1.9rem; font-size:1.02rem; line-height:1.55; color:var(--ink-2);
}
.offer__list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:12px; height:7px; border-left:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(-45deg);
}
.offer__list span{ font-weight:600; color:var(--ink); }

.offer__box{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.75rem,3vw,2.4rem);
  box-shadow:var(--shadow); text-align:center;
  position:sticky; top:5.5rem;
}
@media (max-width:900px){ .offer__box{ position:static; } }
.offer__anchor{ font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin:0; }
.offer__price{
  font-family:var(--display); font-size:clamp(3rem,2rem+3vw,4rem); font-weight:600;
  line-height:1; color:var(--ink); margin:.4rem 0 .6rem; letter-spacing:-.03em;
}
.offer__sub{ font-size:.92rem; color:var(--muted); margin-bottom:1.6rem; }
.offer__secure{
  display:flex; align-items:center; justify-content:center; gap:.45em;
  font-size:.83rem; color:var(--muted); margin:1rem 0 0;
}
.guarantee{
  margin-top:1.9rem; padding-top:1.7rem; border-top:1px solid var(--line-soft); text-align:left;
}
.guarantee h3{ font-size:1.1rem; margin-bottom:.5rem; }
.guarantee p{ font-size:.94rem; line-height:1.6; color:var(--muted); margin:0; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0;
  font-family:var(--display); font-size:1.14rem; font-weight:600; line-height:1.35;
  color:var(--ink); position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.25rem; top:1.75rem;
  width:11px; height:11px;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:2rem; }
.faq summary:hover{ color:var(--clay); }
.faq__body{ padding:0 2.5rem 1.5rem 0; }
.faq__body p{ margin:0; color:var(--ink-2); font-size:1.01rem; line-height:1.68; }

/* ---------- Final ---------- */
.section--final{ background:var(--paper-2); text-align:center; }
.final .lede{ margin-inline:auto; max-width:56ch; margin-bottom:2rem; }
.final__sig{
  font-family:var(--display); font-style:italic; font-size:1.2rem;
  color:var(--muted); margin:2.5rem 0 0;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--forest-2); color:#B7AC9A; padding:3.5rem 0 2.5rem; font-size:.92rem; }
.site-footer__top{
  display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:center; justify-content:space-between;
  padding-bottom:2rem; border-bottom:1px solid rgba(232,223,209,.14);
}
.brand--footer{ color:#F3ECE0; margin-right:0; }
.brand--footer .brand__mark{ background:var(--gold); color:var(--forest-2); }
.brand--footer .brand__text strong{ color:#F3ECE0; }
.brand--footer .brand__text em{ color:#8E8371; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer-nav a{ color:#C4B9A6; text-decoration:none; }
.footer-nav a:hover{ color:var(--gold); }
.site-footer__legal{ padding-top:2rem; display:grid; gap:.9rem; max-width:80ch; }
.site-footer__legal p{ margin:0; font-size:.85rem; line-height:1.6; color:#8E8371; }
.site-footer__legal strong{ color:#B7AC9A; }
.site-footer__legal a{
  color:#D3C8B4; text-decoration:underline;
  text-underline-offset:.18em; text-decoration-thickness:1px;
}
.site-footer__legal a:hover{ color:#fff; }
.copyright{ padding-top:.8rem; }

/* ---------- Sticky bar ---------- */
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--ink); color:var(--paper);
  border-top:1px solid rgba(255,255,255,.1);
  transform:translateY(100%); transition:transform .3s ease;
  box-shadow:0 -8px 32px -12px rgba(0,0,0,.4);
}
.sticky-bar[hidden]{ display:none; }
.sticky-bar.is-visible{ transform:translateY(0); }
.sticky-bar__inner{ display:flex; align-items:center; gap:1.25rem; padding:.8rem 0; }
.sticky-bar__text{ margin:0; display:flex; flex-direction:column; line-height:1.3; margin-right:auto; }
.sticky-bar__text strong{ font-family:var(--display); font-size:1.02rem; }
.sticky-bar__text span{ font-size:.82rem; color:#B7AC9A; }
.sticky-bar__close{
  background:none; border:none; color:#8E8371; font-size:1.5rem; line-height:1;
  cursor:pointer; padding:.2rem .4rem;
}
.sticky-bar__close:hover{ color:var(--paper); }
@media (max-width:520px){
  .sticky-bar__text span{ display:none; }
  .sticky-bar__inner{ gap:.75rem; }
}

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1.25rem; }
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0; background:rgba(20,17,14,.72);
  backdrop-filter:blur(3px); animation:fade .25s ease;
}
.modal__panel{
  position:relative; width:min(100%, 520px);
  background:var(--paper); border-radius:var(--radius-lg);
  padding:clamp(1.9rem,4vw,2.9rem); text-align:center;
  box-shadow:var(--shadow-lg); border-top:5px solid var(--clay);
  max-height:calc(100dvh - 2.5rem); overflow-y:auto;
  animation:pop .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes fade{ from{ opacity:0; } }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.98); } }

.modal__close{
  position:absolute; right:.6rem; top:.4rem;
  background:none; border:none; font-size:1.9rem; line-height:1;
  color:var(--muted); cursor:pointer; padding:.25rem .55rem;
}
.modal__close:hover{ color:var(--ink); }
.modal__kicker{
  font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay); margin:0 0 .7rem;
}
.modal__title{ font-size:clamp(1.7rem,1.3rem+1.6vw,2.3rem); margin-bottom:.7rem; }
.modal__desc{ font-size:1rem; line-height:1.6; color:var(--ink-2); max-width:38ch; margin-inline:auto; }

.modal__price{ display:flex; align-items:baseline; justify-content:center; margin:1.5rem 0 1.6rem; }
.modal__now{
  font-family:var(--display); font-size:3.2rem; font-weight:600; line-height:1;
  color:var(--clay); letter-spacing:-.03em;
}

.modal__decline{
  display:block; width:100%; margin:1rem 0 0;
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:.9rem; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.modal__decline:hover{ color:var(--ink); }
.modal__fine{ font-size:.78rem; color:var(--muted); margin:1.1rem 0 0; }

body.modal-open{ overflow:hidden; }

/* ---------- Simple pages (success / legal) ---------- */
.page{ padding:clamp(3rem,7vw,6rem) 0; }
.page h1{ font-size:var(--step-3); }
.page h2{ font-size:var(--step-1); margin-top:2.2rem; }
.page p, .page li{ color:var(--ink-2); }
.page ul{ padding-left:1.2rem; display:grid; gap:.5rem; }
.download-box{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem; text-align:center; margin:2.5rem 0; box-shadow:var(--shadow);
}