/* ==========================================================================
   The Why Buy Challenge ads landing (challenge/index.html). Oct 2026 rebuild,
   PLAN.md §5.1 and §6 ("Measured practice").
   Sits on top of style.css. Written mobile first: the base rules are the 390px
   layout, min-width queries widen it. Rules the page relies on:
   - Orange (--action) is the only action colour. It is never text, never a
     label, never decoration. Links are navy on light, white on navy.
   - Dark sections carry .on-dark (see README, "Two bug classes").
   - Nothing fades in. Content is visible at rest.
   - "Before" data is grey, "after" data is navy, and every bar prints its numbers.
   ========================================================================== */

/* ---------- shared bits ---------- */
.lp-h{margin-top:.6rem; max-width:24ch; text-wrap:balance}
.lp-h + .lead{margin-top:.9rem}

/* ---------- header: logo and one button, no menu ---------- */
.lp-header .header__inner{min-height:64px}
.lp-header__cta{margin-left:auto}
.lp-header__cta .btn{min-height:40px; padding:.55rem 1rem; font-size:.9375rem}

/* ---------- 1. hero ---------- */
.lp-hero{
  position:relative; color:var(--white); background-color:var(--blue-900);
  /* graph grid, the measurement motif from the carousels */
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;
  padding-top:calc(64px + 1.75rem); padding-bottom:0;
}
/* ruler ticks down the left edge */
.lp-hero::before{content:""; position:absolute; left:0; top:64px; bottom:0; width:12px;
  border-right:1px solid rgba(255,255,255,.16);
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.32) 0 1px,transparent 1px 14px),
                   repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,transparent 1px 70px);
  background-size:5px 100%,10px 100%; background-repeat:no-repeat; background-position:right top,right top}
.lp-hero__inner{display:grid; gap:1.75rem}
.lp-hero h1{color:var(--white); margin-top:.7rem; font-size:clamp(1.85rem,1.3rem + 2.6vw,3.25rem); line-height:1.08; max-width:17ch}
.lp-hero .lead{margin-top:.9rem; max-width:46ch; color:#D5DEE8}
.lp-hero__actions{display:flex; flex-direction:column; align-items:stretch; gap:.9rem; margin-top:1.4rem}
.lp-hero__actions .tlink{align-self:center}
.lp-hero__trust{margin-top:1.1rem; font-size:.875rem; line-height:1.45; color:#B8C2CF}
.lp-film{margin-inline:calc(var(--gutter) * -1)}
.lp-film__btn{display:block; width:100%; border-radius:0; box-shadow:none; background:var(--ink-950)}
.lp-film__btn:hover img{transform:none; filter:none}
.lp-film__btn img{filter:saturate(.88)}
.lp-film__play{position:absolute; left:1rem; bottom:1rem; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; color:var(--white);
  background:rgba(11,28,56,.78); border:1.5px solid rgba(255,255,255,.85)}
.lp-film__play svg{width:22px; height:22px; margin-left:3px}
.lp-film__btn:hover .lp-film__play,.lp-film__btn:focus-visible .lp-film__play{background:var(--blue-900)}
.lp-film__cap{display:flex; flex-direction:column; gap:.1rem; padding:.75rem var(--gutter) 1.1rem;
  background:var(--ink-950); font-size:.9375rem; color:#B8C2CF}
.lp-film__cap b{color:var(--white); font-family:var(--font-display); font-weight:600}
.lp-film video{display:block; width:100%; aspect-ratio:16/9; background:#000}

@media (min-width:900px){
  .lp-hero{padding-top:calc(78px + 3.5rem); padding-bottom:4rem}
  .lp-hero::before{top:78px}
  .lp-header .header__inner{min-height:78px}
  .lp-hero__inner{grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center}
  .lp-hero__actions{flex-direction:row; align-items:center; gap:1.5rem}
  .lp-film{margin-inline:0}
  .lp-film__btn{border-radius:var(--r-lg) var(--r-lg) 0 0; overflow:hidden}
  .lp-film__cap{border-radius:0 0 var(--r-lg) var(--r-lg); padding-inline:1.1rem}
}

/* ---------- 3. proof ---------- */
.lp-proof{padding-block:2rem 2.5rem; border-bottom:1px solid var(--paper-deep)}
.lp-logos{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem 1.5rem; align-items:center; justify-items:center;
  padding-bottom:1.75rem; border-bottom:1px solid var(--paper-deep)}
.lp-logos img{height:26px; width:auto; filter:grayscale(1) contrast(.9); opacity:.78}
.lp-logos__txt{font:700 1.05rem/1 var(--font-display); letter-spacing:.2em; color:#6B7685}
.lp-proof__grid{display:grid; gap:1.75rem; margin-top:1.75rem}
.lp-result{margin:0; display:flex; flex-direction:column; gap:.7rem}
.lp-result figcaption{font-weight:600; font-size:1rem; line-height:1.4; color:var(--blue-900); max-width:40ch}
.lp-result__nums{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem; font-variant-numeric:tabular-nums}
.lp-result__b{font:600 1.4rem/1 var(--font-display); color:var(--before)}
.lp-result__arr{color:var(--grey-500)}
.lp-result__a{font:700 2.6rem/1 var(--font-display); color:var(--blue-900); letter-spacing:-.02em}
.lp-result__when{font-size:.875rem; color:var(--grey-500)}
.lp-bar{position:relative; height:10px; border-radius:5px; background:var(--paper-deep); overflow:hidden}
.lp-bar i{position:absolute; top:0; bottom:0; left:0}
.lp-bar__b{background:var(--before)}
.lp-bar__a{background:var(--blue-900)}
.lp-bar__axis{display:flex; justify-content:space-between; font-size:.75rem; color:var(--grey-500); font-variant-numeric:tabular-nums}
.lp-result__src{font-size:.8125rem; color:var(--grey-500)}
.lp-quote{margin:0; padding:0 0 0 1.1rem; border-left:2px solid var(--blue-900)}
.lp-quote p{font-size:1.0625rem; line-height:1.55; color:var(--blue-900)}
.lp-quote footer{margin-top:.8rem; display:flex; flex-direction:column; font-size:.875rem; color:var(--grey-500)}
.lp-quote footer b{color:var(--blue-900); font-size:.9375rem}
@media (min-width:760px){
  .lp-logos{grid-template-columns:repeat(6,auto); justify-content:space-between}
  .lp-proof__grid{grid-template-columns:1fr 1fr; gap:3rem; align-items:start}
}

/* ---------- 4. score one answer ---------- */
.lp-try__inner{display:grid; gap:1.5rem}
.lp-score{background:var(--white); border:1px solid var(--blue-300); border-radius:var(--r-lg);
  padding:1.1rem; display:flex; flex-direction:column; gap:1rem}
.lp-score__q{font:600 1rem/1.4 var(--font-display); color:var(--blue-900)}
.lp-score__a{margin:0; padding:.85rem 1rem; background:var(--paper); border-radius:var(--r-sm);
  font-size:1rem; line-height:1.55; color:var(--blue-900)}
.lp-score__a small{display:block; margin-top:.45rem; font-size:.75rem; color:var(--grey-500)}
.lp-crit{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem .9rem; align-items:center;
  padding-top:.9rem; border-top:1px solid var(--blue-300)}
.lp-crit__name{font-weight:700; font-size:1rem; color:var(--blue-900)}
.lp-crit__hint{grid-column:1; font-size:.8125rem; color:var(--grey-500)}
.lp-ticks{grid-column:2; grid-row:1 / span 2; display:flex; gap:.4rem}
.lp-ticks label{position:relative}
.lp-ticks input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer}
.lp-ticks span{display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-sm);
  border:1.5px solid #B6C0CC; background:var(--white); font:700 1rem/1 var(--font-body);
  color:var(--blue-900); font-variant-numeric:tabular-nums}
.lp-ticks input:checked + span{background:var(--blue-900); border-color:var(--blue-900); color:var(--white)}
.lp-ticks input:focus-visible + span{outline:3px solid var(--focus); outline-offset:2px}
.lp-crit__lvl{grid-column:1 / -1; margin-top:.35rem; font-size:.9rem; color:var(--content-body); min-height:1.4em}
.lp-score__result{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem; padding-top:.9rem; border-top:1px solid var(--blue-300)}
.lp-score__result strong{font:700 2rem/1 var(--font-display); color:var(--blue-900); font-variant-numeric:tabular-nums}
.lp-score__result span{font-size:.9375rem; color:var(--content-body)}
@media (min-width:900px){
  .lp-try__inner{grid-template-columns:.8fr 1.2fr; gap:3.5rem; align-items:start}
  .lp-score{padding:1.5rem}
}

/* ---------- 5. why this works: three statements, no icon cards ---------- */
.lp-why__list{margin-top:1.5rem; display:grid; gap:0; border-top:1px solid var(--paper-deep)}
.lp-why__list li{display:flex; flex-direction:column; gap:.35rem; padding-block:1.1rem; border-bottom:1px solid var(--paper-deep)}
.lp-why__list b{font-family:var(--font-display); font-weight:600; font-size:1.125rem; line-height:1.3; color:var(--blue-900)}
.lp-why__list span{color:var(--content-body); max-width:62ch}
@media (min-width:900px){
  .lp-why__list{grid-template-columns:repeat(3,1fr); gap:2.5rem; border-top:0}
  .lp-why__list li{border-bottom:0; border-top:2px solid var(--blue-900); padding-top:1.1rem}
}

/* ---------- 6. how it runs: a week ruler ---------- */
.lp-weeks{margin-top:1.5rem; display:grid; gap:0; counter-reset:none}
.lp-weeks li{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:.2rem 1rem; padding-block:1rem;
  border-top:1px solid var(--blue-300)}
.lp-weeks li:last-child{border-bottom:1px solid var(--blue-300)}
.lp-weeks__w{grid-row:1 / span 3; font:600 .8125rem/1.4 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--grey-500); padding-top:.2rem}
.lp-weeks__v{font:700 1.125rem/1.25 var(--font-display); color:var(--blue-900)}
.lp-weeks p{color:var(--content-body)}
.lp-weeks small{font-size:.8125rem; color:var(--grey-500)}
@media (min-width:900px){
  .lp-weeks{grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--blue-900)}
  .lp-weeks li{grid-template-columns:1fr; border-top:0; border-bottom:0; padding:1.1rem 1.25rem 0 0;
    background-image:linear-gradient(var(--blue-900),var(--blue-900)); background-size:2px 12px; background-repeat:no-repeat; background-position:0 0}
  .lp-weeks li:last-child{border-bottom:0}
  .lp-weeks__w{grid-row:auto; padding-left:.75rem}
  .lp-weeks__v,.lp-weeks p,.lp-weeks small{padding-left:.75rem}
}

/* ---------- 7. what's inside ---------- */
.lp-inside__inner{display:grid; gap:1.5rem}
.lp-mods{border-top:1px solid var(--paper-deep)}
.lp-mods li{display:grid; grid-template-columns:1.6rem minmax(0,1fr) auto; grid-template-areas:"n t m" ". s s";
  gap:.15rem .75rem; padding-block:.8rem; border-bottom:1px solid var(--paper-deep); font-variant-numeric:tabular-nums}
.lp-mods__n{grid-area:n; font-weight:700; color:var(--grey-500)}
.lp-mods__t{grid-area:t; font-weight:600; color:var(--blue-900); line-height:1.35}
.lp-mods__m{grid-area:m; font-size:.875rem; color:var(--grey-500); white-space:nowrap}
.lp-mods__s{grid-area:s; font-size:.8125rem; color:var(--grey-500)}
.lp-mods__s--open{color:var(--blue-900); font-weight:600}
.lp-files{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem}
.lp-files li{display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .7rem .4rem .45rem;
  border:1px solid var(--paper-deep); border-radius:var(--r-sm); background:var(--white); font-size:.875rem; color:var(--blue-900)}
.lp-files i{font:700 .6875rem/1 var(--font-body); font-style:normal; letter-spacing:.04em; padding:.25rem .35rem;
  border-radius:3px; background:var(--blue-900); color:var(--white)}
.lp-inside__note{margin-top:1.1rem; color:var(--content-body)}
.lp-inside__note b{color:var(--blue-900)}
@media (min-width:900px){
  .lp-inside__inner{grid-template-columns:.8fr 1.2fr; gap:3.5rem; align-items:start}
}

/* ---------- 8 and 11. CTA bands ---------- */
.lp-band{background:var(--blue-900); color:var(--white); padding-block:2.25rem}
.lp-band__inner{display:flex; flex-direction:column; align-items:stretch; gap:1.1rem}
.lp-band__t{font:700 clamp(1.35rem,1.1rem + 1.2vw,1.9rem)/1.2 var(--font-display); color:var(--white); text-wrap:balance}
.lp-band__s{margin-top:.35rem; color:#B8C2CF}
.lp-band--final{background:var(--ink-950); padding-block:2.75rem}
@media (min-width:760px){
  .lp-band__inner{flex-direction:row; align-items:center; justify-content:space-between; gap:2rem}
}

/* ---------- 9. two routes ---------- */
.lp-routes__grid{display:grid; gap:1rem; margin-top:1.5rem}
.lp-route{border:1px solid var(--blue-300); border-radius:var(--r-lg); padding:1.2rem; display:flex; flex-direction:column; gap:1rem; background:var(--white)}
.lp-route h3{font-size:1.2rem; display:flex; align-items:center; gap:.6rem; color:var(--blue-900)}
.lp-route h3 span{font:700 .75rem/1 var(--font-body); letter-spacing:.06em; text-transform:uppercase;
  padding:.3rem .5rem; border-radius:4px; background:var(--paper); color:var(--blue-900)}
.lp-route dl{margin:0; display:grid; grid-template-columns:6rem minmax(0,1fr); gap:.55rem 1rem}
.lp-route dt{font:600 .8125rem/1.5 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:var(--grey-500)}
.lp-route dd{margin:0; color:var(--blue-900); line-height:1.45}
.lp-route .tlink,.lp-route .btn{align-self:flex-start; margin-top:auto}
.lp-route--paid{border-color:var(--blue-900); border-width:1.5px}
.lp-routes__more{margin-top:1.25rem; color:var(--content-body); max-width:70ch}
@media (min-width:760px){
  .lp-routes__grid{grid-template-columns:1fr 1fr; gap:1.25rem}
  .lp-route{padding:1.5rem}
}

/* ---------- 10. FAQ ---------- */
.lp-faq__inner{display:grid; gap:1.25rem}
.faq{border-top:1px solid var(--paper-deep)}
.faq details{border-bottom:1px solid var(--paper-deep)}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:1rem;
  cursor:pointer; list-style:none; font-weight:700; font-size:1.0625rem; line-height:1.35; color:var(--blue-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:0 0 auto; transition:transform .2s var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq .fa{padding-bottom:1.1rem; color:var(--content-body); max-width:68ch}
@media (min-width:900px){
  .lp-faq__inner{grid-template-columns:.8fr 1.2fr; gap:3.5rem; align-items:start}
}

/* ---------- footer ---------- */
.lp-footer .lp-footer__row{display:flex; flex-direction:column; gap:1rem; padding-bottom:1.5rem}
.lp-footer .lp-footer__row p{max-width:60ch}
.lp-footer .flogo{align-self:flex-start; height:28px; width:auto}
.lp-footer__links{display:flex; flex-wrap:wrap; gap:.4rem 1.1rem}
.lp-footer__links a{display:inline-block; padding-block:.55rem}

/* ---------- sticky button, phones only ---------- */
.lp-sticky{position:fixed; left:0; right:0; bottom:0; z-index:95; background:rgba(255,255,255,.97);
  border-top:1px solid var(--blue-300); padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0px))}
.lp-sticky[hidden]{display:none}
@media (min-width:760px){ .lp-sticky{display:none !important} }
@media (max-width:759px){ body.has-sticky{padding-bottom:76px} }