/* pages/home.css — home-only layout (Owner: A; DESIGN §4.27, §5.1).
   .home-hero (hero extras), .home-facts, .story, .proof, .articles-strip, .problems-section.
   Layout only: colours/sizes/radii of shared components stay in main.css. Same three breakpoints. */

/* ---- hero ---- */
.home-hero{padding:var(--s-9) 0 var(--s-8)}
.home-hero .opener__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-9);align-items:center}
.home-hero__eyebrow{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4);font-family:var(--display);font-size:var(--fs-sm);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-text);line-height:1.3}
.home-hero__eyebrow::before{content:"";flex:none;width:28px;height:2px;background:var(--mint);border-radius:2px}
.home-hero__thumb{display:none;flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--line)}
.home-hero__who b{color:var(--teal-deep)}
.home-hero__item{white-space:nowrap}
.home-hero__title{font-size:var(--fs-display);line-height:1.06;max-width:13em;margin-bottom:var(--s-5)}
.home-hero__hl{font-style:normal;color:var(--teal-deep);background:linear-gradient(transparent 64%,var(--mint) 64%,var(--mint) 92%,transparent 92%);padding:0 .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.home-hero__lede{max-width:30em}
.home-hero__next{margin:var(--s-5) 0 0;font-size:var(--fs-sm);font-weight:600;color:var(--gray-text);line-height:1.6;max-width:34em}
.home-hero__next b{font-family:var(--display);color:var(--teal-deep);font-weight:800;font-variant-numeric:tabular-nums}
.home-hero__town{white-space:nowrap}
.home-hero__next-two{display:none}
.home-hero__next .text-link{color:var(--teal-deep)}
.home-hero__figure{margin:0;max-width:440px;margin-left:auto}
.home-hero__frame{aspect-ratio:5/4}
.home-hero__frame img{width:100%;height:100%;object-fit:cover;object-position:28% 45%}

/* ---- facts ---- */
.home-facts{margin-bottom:var(--s-2)}

/* ---- story (#about) ---- */
.story__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-9);align-items:start}
.story__text h2{max-width:14em}
.story__text>p{max-width:34em}
.story__sig{display:grid;gap:2px;margin:var(--s-5) 0 var(--s-5);font-size:var(--fs-sm);color:var(--gray-text)}
.story__sig b{font-family:var(--display);font-size:var(--fs-md);color:var(--teal-deep)}
.story__media{display:grid;gap:var(--s-4)}
.story__photo{margin:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white);padding:8px}
.story__photo img{width:100%;height:auto;border-radius:calc(var(--r-lg) - 6px);aspect-ratio:16/9;object-fit:cover}

/* ---- proof ---- */
.proof h2{max-width:18em}
.proof__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s-7);align-items:start}
.proof__ratings{min-width:0}
.proof .rating-rows{margin-bottom:var(--s-3)}
.proof .rating-rows__foot{margin:0;max-width:34em}

/* ---- problems (#services) ---- */
.problems__intro{max-width:36em}
.problems__foot p{margin:0;max-width:34em}

/* ---- articles strip ---- */
.articles-strip__list{list-style:none;margin:0 0 var(--s-4);padding:0;border-top:1px solid var(--line)}
.articles-strip__row{padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.articles-strip__title{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:700;font-size:var(--fs-md);color:var(--teal-deep);text-decoration:none;line-height:1.3}
.articles-strip__title:hover{text-decoration:underline;text-decoration-color:var(--mint)}
.articles-strip__dek{margin:0;font-size:var(--fs-sm);color:var(--gray-text);max-width:44em}
.articles-strip__foot{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin:0}

/* ---- md ≤900 ---- */
@media (max-width:900px){
  .home-hero .opener__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .home-hero__figure{max-width:360px;margin-left:0}
  .story__grid{grid-template-columns:1fr;gap:var(--s-6)}
  .proof__grid{grid-template-columns:1fr;gap:var(--s-5)}
}

/* ---- sm ≤640 ---- */
@media (max-width:640px){
  .home-hero{padding:var(--s-5) 0 var(--s-6)}
  .home-hero__eyebrow{letter-spacing:.06em;font-size:clamp(14px,3.75vw,var(--fs-xs));margin-bottom:var(--s-3)}
  .home-hero__eyebrow::before{display:none}
  .home-hero__thumb{display:block}
  .home-hero__sep{display:none}
  .home-hero__who{display:grid;gap:1px;min-width:0}
  .home-hero__who b{font-size:clamp(14px,4vw,var(--fs-sm))}
  .home-hero__role{display:block}
  .home-hero__title{max-width:none;margin-bottom:var(--s-4)}
  .home-hero__lede{font-size:var(--fs-base);margin-bottom:var(--s-4)}
  .home-hero__next{margin-top:var(--s-4);line-height:1.5}
  .home-hero__next-all{display:none}
  .home-hero__next-two{display:inline}
  .story__media .video{display:none}
  .story__photo{display:none}
  .story__sig{display:none}
  .story__actions .btn{flex:0 1 auto}
  .story .pull{font-size:var(--fs-md);margin:var(--s-4) 0}
  .problems__intro{display:none}
  .problems-section{padding:var(--s-6) 0}
  .problems-section .marker{margin-bottom:var(--s-3)}
  .problems-section h2{margin-bottom:var(--s-3)}
  .problems li>.problem{padding:8px 14px;gap:0}
  .problem__line{line-height:1.4}
  .problems__foot{margin-top:var(--s-4);gap:var(--s-2) var(--s-4);font-size:var(--fs-sm)}
  .articles-strip__dek{display:none}
  .articles-strip__title{font-size:var(--fs-base)}
  .articles-strip__row{padding:6px 0}
  .articles-strip__title{line-height:1.25}
  .proof,.articles-strip{padding:var(--s-6) 0}
  .proof__grid{gap:var(--s-3)}
  .proof .marker,.articles-strip .marker{margin-bottom:var(--s-3)}
  .proof h2,.articles-strip h2{margin-bottom:var(--s-2)}
  .proof .rating-rows li{padding:4px 0}
  .proof .quote{padding:10px var(--s-4)}
  .proof .quote blockquote{font-size:var(--fs-sm);line-height:1.42;margin-bottom:var(--s-2)}
}

/* ---------- 11. Follow along (bottom of the page; his ask 2026-09-05) ---------- */
.follow h2{max-width:16em;margin-top:var(--s-3)}
.follow__lede{color:var(--gray-text);max-width:34em;margin:var(--s-2) 0 var(--s-6)}
.follow__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
.follow__latest .video{border:1px solid var(--line)}
.follow__cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.follow-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-4);min-height:64px;padding:var(--s-3) var(--s-4);background:var(--white);border:2px solid var(--line);border-radius:var(--r-lg);color:var(--ink);text-decoration:none}
.follow-card:hover,.follow-card:focus-visible{border-color:var(--teal-deep)}
.follow-card:focus-visible{outline:none;box-shadow:var(--ring)}
.follow-card__icon{width:26px;height:26px;fill:currentColor;color:var(--teal-deep);flex:none}
.follow-card__text b{display:block;font-family:var(--display);font-size:var(--fs-base);font-weight:800;color:var(--teal-deep)}
.follow-card__text small{display:block;font-size:var(--fs-sm);color:var(--gray-text);line-height:1.35}
.follow-card__go{font-family:var(--display);font-weight:700;font-size:var(--fs-sm);color:var(--teal-deep);white-space:nowrap}
@media (max-width:900px){.follow__grid{grid-template-columns:1fr}}
@media (max-width:640px){.follow-card{min-height:56px;padding:var(--s-2) var(--s-3)}.follow-card__text small{font-size:var(--fs-xs)}}

/* ---------- Unlock Strong offer card under the book band (his call 2026-09-07).
   Smaller than the book, but a card with a real button rather than a line of grey text,
   which nobody saw. ---------- */
.offer-line{grid-column:1/-1;margin:var(--s-6) 0 0;padding:var(--s-5);background:var(--white);border:1px solid var(--mint-line);border-radius:var(--r-lg);display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center;justify-content:space-between}
.offer-line__body{min-width:0}
.offer-line__title{margin:0;font-family:var(--display);font-weight:700;font-size:var(--fs-md);color:var(--teal-deep)}
.offer-line__note{margin:2px 0 0;color:var(--gray-text);font-size:var(--fs-sm)}
.offer-line .btn{flex:none}
@media (max-width:640px){
  .offer-line{margin-top:var(--s-4);padding:var(--s-4);gap:var(--s-3)}
  .offer-line .btn{width:100%;justify-content:center}
}