/* =====================================================================
   HOME-V2 2026-11-01: homepage-only layer (have / better / implement)
   Layered ON TOP of the contrast-pack styles (AUDIT-P1-CONTRAST-2026-11-01:
   assets/bt-2026-10-07.css and the contrast-fixed index.html inline CSS).
   Loaded only by index.html, after its inline <style> blocks.
   Nothing here redefines a base rule except where the new hero needs it,
   and every selector is scoped to #hero, #send-us, #better, #story or .close.
   Small gray text uses #5F6B7A (contrast-pack value, 5.4:1 on white).
   ===================================================================== */

/* ---- hero: static layout (old bill teardown is retired, so no 200vh scroll pin) ---- */
.mo #hero{height:auto}
#hero .hstage,.mo #hero .hstage{position:relative;top:auto;height:auto;min-height:100vh;min-height:100svh;padding-bottom:48px}
#hero .eyebrow{display:inline-flex}
#hero h1{font-size:clamp(40px,4.9vw,68px);max-width:13ch}
#hero .sub{max-width:31em}
#hero .hcta{margin-top:26px;gap:10px}
#hero .hcta .btn.bill{background:#38B6FF;color:#222428;box-shadow:0 12px 28px -14px rgba(56,182,255,.9)}
#hero .hcta .btn.bill:hover{background:#5CC4FF}
#hero .hnote a{color:var(--brand-deep);font-weight:600}
#hero .hscope{margin-top:18px;font-size:13px;line-height:1.5;color:#5F6B7A;max-width:36em}
#hero .scrollcue{display:none}

/* ---- hero: "How we work" box (replaces .bill-box) ---- */
#hero .flow-box{position:relative;width:100%;max-width:540px;justify-self:end}
#hero .flow-box:before{content:"";position:absolute;left:-22%;right:-22%;top:-16%;bottom:-16%;background:radial-gradient(farthest-side at 50% 50%,rgba(56,182,255,.30) 50%,rgba(56,182,255,.10) 76%,rgba(56,182,255,0) 100%);pointer-events:none;z-index:0}
#hero .flow{position:relative;z-index:1;background:#fff;border-radius:22px;padding:18px 18px 16px;box-shadow:0 0 0 1px var(--line),var(--card)}
#hero .flow-hd{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 10px;border-bottom:1px solid var(--line)}
#hero .flow-hd b{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
#hero .flow-hd span{font-size:12px;color:#5F6B7A}
#hero .step{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:12px 4px}
#hero .step + .step{border-top:1px dashed var(--line)}
#hero .step .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff;background:var(--brand-deep)}
#hero .step.s2 .n{background:var(--yl,#FFC72C);color:#222428}
#hero .step h3{font-size:15.5px;line-height:1.25;font-weight:600;color:var(--ink);letter-spacing:-.015em}
#hero .step p{margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--text)}
#hero .step .go{display:inline-block;margin-top:5px;font-size:13px;font-weight:600;color:var(--brand-deep)}
#hero .step .go:hover{color:var(--brand-ink)}
#hero .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
#hero .opt{display:block;background:var(--brand-tint);border-radius:12px;padding:9px 11px;border-left:3px solid #38B6FF;color:var(--ink);transition:translate .2s ease,box-shadow .2s ease}
#hero .opt:hover{translate:0 -2px;box-shadow:0 0 0 1.5px rgba(56,182,255,.7)}
#hero .opt b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
#hero .opt b:after{content:" \2192";color:var(--brand-deep)}
#hero .opt span{display:block;margin-top:2px;font-size:12px;line-height:1.38;color:var(--muted)}
#hero .paths{margin-top:8px;font-size:12.5px;color:var(--muted)}
#hero .paths i{font-style:normal;font-weight:600;color:var(--ink)}
@media (max-width:900px){#hero .flow-box{justify-self:stretch;max-width:none}#hero h1{font-size:clamp(36px,10.4vw,46px)}}
@media (max-width:640px){#hero .hstage,.mo #hero .hstage{min-height:0}}
@media (max-width:520px){#hero .opts{grid-template-columns:1fr}}
@media (max-height:700px){html.mo #hero .eyebrow{display:inline-flex}}

/* ---- Step 1 (#send-us, moved up) ---- */
#send-us .shead p{margin-top:12px;font-size:17px;line-height:1.55;color:var(--muted);max-width:60ch}

/* ---- Step 2 (#better, replaces #newer-tech) ---- */
#better{background:#fff}
#better .paths2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:22px}
#better .path{background:var(--brand-tint);border-radius:18px;padding:20px 22px;border-left:4px solid #38B6FF}
#better .path h3{font-size:18px;line-height:1.25;font-weight:600;color:var(--ink);letter-spacing:-.015em}
#better .path p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--text)}
#better .fx-grid.fx-3{grid-template-columns:repeat(3,minmax(0,1fr))}
#better .common{margin-top:34px}
#better .common h3.sub-h{font-size:14px;font-weight:600;letter-spacing:.02em;color:#5F6B7A;margin-bottom:12px}
@media (max-width:1100px){#better .fx-grid.fx-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#better .paths2,#better .fx-grid.fx-3{grid-template-columns:1fr}}

/* ---- Step 3 intro (#step3, sits right above the #story scroll walk-through) ---- */
#step3{padding-bottom:0}
#step3 .fx-head{margin-bottom:0}
#step3 .fx-head a{color:var(--brand-deep);font-weight:600}

/* ---- Close CTA: second button ---- */
.close .ccta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin-top:34px}
.close .ccta .btn{margin-top:0}
.close .ccta .btn.ghost{position:relative;background:transparent;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.close .ccta .btn.ghost:hover{background:rgba(255,255,255,.06);box-shadow:0 0 0 1px #38B6FF}

/* ---- 2026-11-01b: Jonathan's hero requirements ----
   1) Left copy larger (901px and up): H1 about 17% larger (68px -> 80px cap), body text +2px.
   2) Two-column desktop (1200px and up): the "How we work" box is exactly as tall as the left
      column. Both columns stretch; the box is taken out of the row-height calculation
      (absolute inside its stretched grid cell), so the copy sets the row height and the box
      fills it edge to edge. Below 1200px the box would need more height than the copy has,
      so 901-1199px stacks the box under the copy (the same layout phones already use). */
@media (min-width:901px){
  #hero h1{font-size:clamp(47px,5.75vw,80px)}
  #hero .eyebrow{font-size:15px}
  #hero .sub{font-size:clamp(18px,calc(1.5vw + 2px),21px)}
  #hero .hnote{font-size:15.5px}
  #hero .hscope{font-size:15px}
}
@media (min-width:901px) and (max-width:1199px){
  #hero .hgrid{grid-template-columns:1fr;gap:28px}
  #hero h1{max-width:14ch}
  #hero .flow-box{justify-self:stretch;max-width:none}
}
@media (min-width:1200px){
  #hero .hgrid{align-items:stretch}
  #hero .hcopy{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start}
  #hero .flow-box{align-self:stretch;position:relative}
  #hero .flow-box:before{top:-10%;bottom:-10%}
  #hero .flow{position:absolute;inset:0;display:flex;flex-direction:column;padding:14px 16px 12px;overflow:hidden}
  #hero .flow-hd{padding:0 4px 8px}
  #hero .step{padding:8px 4px;gap:10px;grid-template-columns:28px 1fr}
  #hero .step .n{width:28px;height:28px;font-size:12.5px}
  #hero .step h3{font-size:15px}
  #hero .step p{font-size:13px;line-height:1.4}
  #hero .step .go{margin-top:3px;font-size:12.5px}
  #hero .opts{gap:6px;margin-top:6px}
  #hero .opt{padding:7px 10px}
  #hero .opt b{font-size:13px}
  #hero .opt span{font-size:11.5px;line-height:1.33}
  #hero .paths{margin-top:6px;font-size:12px}
  /* spread the three steps so the box content runs top to bottom */
  #hero .flow .step{flex:1 1 auto;align-content:center}
}