/* pages/funnel.css — free-book, /free-book/download/, the two quizzes, /review/ (Owner: D).
   Layout + the quiz engine's classes (quiz.js DOM contract, AUDIT §5). Tokens only — no hex here;
   only the three breakpoints (≤1080 / ≤900 / ≤640). Shared components (.btn .card .tel .rating
   .opener .text-link .hero-ctas) come from main.css and are not restyled. */

/* ================= /free-book/ ================= */
/* opener: cover beside the title (DESIGN §5.12) */
.book-opener__grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-8);align-items:start}
.book-opener__cover{display:block;width:200px;border-radius:6px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--white)}
.book-opener__cover img{width:100%;height:auto}
.book-opener__label{margin:var(--s-2) 0 var(--s-2);font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-text)}
.book-opener__inside{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5)}
.book-opener__inside li{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:var(--fs-base);color:var(--teal-deep)}
.book-opener__inside li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--mint)}

/* form section: the GHL iframe in a card with 460px reserved, sizes + proof in a side column */
.book-form{padding-top:var(--s-7)}
.book-form__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--s-8);align-items:start}
.form-shell{padding:var(--s-6)}
.form-shell h2{font-size:var(--fs-xl);margin-bottom:var(--s-1)}
.form-shell__note{color:var(--gray-text);font-size:var(--fs-sm);margin-bottom:var(--s-4)}
.form-shell__loading{margin:0 0 var(--s-2);font-size:var(--fs-sm);font-weight:600;color:var(--gray-text)}
.ghl-form-wrap{min-height:460px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);padding:4px}
.ghl-form-wrap iframe{display:block;width:100%;min-height:460px;background:var(--white)}
.req-note{margin:var(--s-3) 0 0;font-size:var(--fs-sm);color:var(--gray-text)}
.book-form__aside{min-width:0}
.book-files{list-style:none;margin:0 0 var(--s-4);padding:0;border-top:1px solid var(--line)}
.book-files li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--gray-text)}
.book-files b{font-family:var(--display);color:var(--teal-deep);font-size:var(--fs-base)}
.book-files__size{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700;color:var(--teal-deep)}
.book-form__sample{margin:0 0 var(--s-5);color:var(--gray-text)}
.book-form__proof{border-top:1px solid var(--line);padding-top:var(--s-4)}
.book-form__town{margin:0 0 2px;font-family:var(--display);font-weight:700;color:var(--teal-deep)}
.book-form__asof{margin:var(--s-2) 0 0;font-size:var(--fs-xs);color:var(--gray-text)}

/* ================= /free-book/download/ ================= */
.dl-card{max-width:var(--measure)}
.dl-list{list-style:none;margin:0 0 var(--s-5);padding:0;display:grid;gap:var(--s-3)}
.dl-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.dl-row__body b{display:block;font-family:var(--display);font-size:var(--fs-md);color:var(--teal-deep)}
.dl-row__body span{font-size:var(--fs-sm);color:var(--gray-text)}
.dl-note{color:var(--gray-text);max-width:34em}

/* ================= quizzes (quiz.js DOM contract — names frozen) ================= */
.quiz-section{background:var(--white)} /* only .opener--utility carries the gray wash; the page returns to white below it like every other utility-opener page */
.quiz-noscript{max-width:660px;margin:0 auto var(--s-5)}
.quiz-card{max-width:660px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s-7) var(--s-8) var(--s-6)}
.quiz-bar{height:8px;background:var(--gray-line);border-radius:var(--r-pill);overflow:hidden;margin-bottom:var(--s-6)}
.quiz-bar span{display:block;height:100%;background:var(--teal-deep);border-radius:var(--r-pill);transition:width .3s ease}
.quiz-kicker{font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-text);margin-bottom:var(--s-2)}
.quiz-card h2{font-size:var(--fs-xl);margin-bottom:var(--s-3)}
.quiz-card h2:focus{outline:3px solid transparent;box-shadow:none}
.quiz-card h2:focus-visible{box-shadow:var(--ring);border-radius:var(--r-sm)}
.quiz-card p{color:var(--ink)}
.quiz-lede{color:var(--gray-text);margin-bottom:var(--s-5)}
.quiz-note{font-size:var(--fs-sm);color:var(--gray-text);margin:-4px 0 var(--s-4)}
.quiz-opts{display:grid;gap:var(--s-3);margin-bottom:var(--s-2)}
.quiz-opt{text-align:left;font-family:var(--body);font-size:var(--fs-base);line-height:1.4;color:var(--ink);background:var(--white);border:2px solid var(--line);border-radius:var(--r-md);padding:12px var(--s-4);min-height:52px;cursor:pointer;transition:border-color .15s,background .15s}
.quiz-opt:hover{border-color:var(--teal-deep);background:var(--mint-wash)}
.quiz-check{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-base);line-height:1.4;color:var(--ink);background:var(--white);border:2px solid var(--line);border-radius:var(--r-md);padding:12px var(--s-4);min-height:52px;cursor:pointer}
.quiz-check:hover{border-color:var(--teal-deep)}
.quiz-check input{margin:2px 0 0;accent-color:var(--teal-deep);width:20px;height:20px;flex:none}
.quiz-none{background:var(--gray-wash)}
.quiz-cta{margin-top:var(--s-4)}
.quiz-back{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s-4);padding:8px var(--s-4);background:var(--white);border:2px solid var(--line);border-radius:var(--r-md);font-family:var(--display);font-size:var(--fs-sm);font-weight:700;color:var(--teal-deep);cursor:pointer}
.quiz-back:hover{border-color:var(--teal-deep)}
.quiz-disclaimer{font-size:var(--fs-xs);color:var(--gray-text);margin:var(--s-5) 0 0;line-height:1.5}
.quiz-disclaimer a{color:var(--teal-deep);font-weight:600;padding-block:12px;margin-block:-12px}
.quiz-email{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-2)}
.quiz-email input{flex:1 1 240px;min-width:0;font:inherit;font-size:max(16px,1rem);min-height:52px;color:var(--ink);border:2px solid var(--gray-mid);border-radius:var(--r-sm);padding:10px var(--s-4)}
.quiz-email input:focus-visible{border-color:var(--teal-deep);box-shadow:var(--ring);outline:3px solid transparent}
.quiz-email .quiz-cta{margin-top:0}
.quiz-do{background:var(--mint-wash);border:1px solid var(--mint-line);border-left:5px solid var(--teal);border-radius:var(--r-md);padding:var(--s-4) var(--s-5);font-size:var(--fs-base);color:var(--ink);margin:var(--s-5) 0 var(--s-4)}
.quiz-sent{font-size:var(--fs-base);color:var(--teal-text);font-weight:600;margin:var(--s-4) 0}
.quiz-ctas{margin-top:var(--s-3)}
.quiz-card .btn-ghost{margin-top:var(--s-1)}
.quiz-capture{background:var(--mint-wash);border:1px solid var(--mint-line);border-radius:var(--r-lg);padding:var(--s-5);margin:var(--s-5) 0 var(--s-4)}
.quiz-capture h3{font-size:var(--fs-md);margin-bottom:var(--s-1)}
.quiz-capture p{font-size:var(--fs-sm);color:var(--gray-text);margin:0 0 var(--s-3)}
.quiz-capture form{display:flex;gap:var(--s-2);flex-wrap:wrap}
.quiz-capture input{flex:1 1 220px;min-width:0;font:inherit;font-size:max(16px,1rem);min-height:52px;padding:10px var(--s-4);border:2px solid var(--gray-mid);border-radius:var(--r-sm);color:var(--ink);background:var(--white)}
.quiz-capture input:focus-visible{border-color:var(--teal-deep);box-shadow:var(--ring);outline:3px solid transparent}
.quiz-capture .quiz-disclaimer{margin:var(--s-3) 0 0}

/* ================= /review/ ================= */
.review__h{font-size:var(--fs-xl);margin-bottom:var(--s-5)}
.review-towns{list-style:none;margin:0 0 var(--s-9);padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-4)}
.review-town h3{font-size:var(--fs-md);margin-bottom:var(--s-1)}
.review-town__who{font-size:var(--fs-sm);color:var(--gray-text);margin:0 0 var(--s-4)}
.review__prose{margin-bottom:var(--s-7)}
.review__prose:last-of-type{margin-bottom:var(--s-4)}
.review__ctas{max-width:var(--measure)}

/* ================= breakpoints ================= */
@media (max-width:900px){
  .book-opener__grid{grid-template-columns:140px minmax(0,1fr);gap:var(--s-6)}
  .book-opener__cover{width:140px}
  .book-form__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .quiz-card{padding:var(--s-6) var(--s-5) var(--s-5)}
  .review-towns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  /* phone: 96px cover beside crumbs/eyebrow/h1; lede + bullets take the full width underneath */
  .book-opener__grid{grid-template-columns:96px minmax(0,1fr);gap:var(--s-2) var(--s-4);align-items:start}
  .book-opener .opener__text{display:contents}
  .book-opener__cover{width:96px;grid-column:1;grid-row:1/4;align-self:start;margin-top:var(--s-3)}
  .book-opener .opener__crumbs,.book-opener .opener__eyebrow,.book-opener .opener__title{grid-column:2}
  .book-opener .opener__title{font-size:var(--fs-xl);margin-bottom:var(--s-2)}
  .book-opener .opener__eyebrow{display:none} /* the crumb already says Free book; the eyebrow wrapped beside the cover */
  .book-opener .opener__lede,.book-opener__label,.book-opener__inside{grid-column:1/-1}
  .book-opener .opener__lede{margin-top:var(--s-3)}
  .book-opener__inside{flex-direction:column;gap:var(--s-1)}
  .book-form{padding-top:var(--s-5)}
  .form-shell{padding:var(--s-4)}
  .form-shell h2{font-size:var(--fs-lg)}
  .form-shell__note{display:none} /* the subtitle is on the cover beside the title */
  .form-shell__loading{margin-bottom:var(--s-1)}
  .book-files li.book-files__epub{order:-1}
  .dl-row{flex-direction:column;align-items:stretch}
  .dl-row--epub{order:-1}
  .dl-row .btn{width:100%}
  .quiz-card{padding:var(--s-5) var(--s-4) var(--s-4);border-radius:var(--r-lg)}
  .quiz-capture form .btn,.quiz-email .btn{width:100%}
  .review-towns{grid-template-columns:1fr}
}