/* The home page's own layout (website v2, 27 Oct 2026), on top of web.css.
   Phone first: one column, then two from 960 px. The order on the page is
   what it is and what a missed call costs, a sample night, how it works,
   the trades, what you get, try it, questions, and set-up. */

/* ------------------------------------------------------------------ 1. hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding:clamp(24px,4vw,64px) var(--gut) clamp(40px,5vw,72px)}
.hero h1{font-size:clamp(34px,5vw,64px);font-weight:750;font-stretch:92%;letter-spacing:-.035em;line-height:1.02;margin-top:10px;max-width:13em}
.hero .sub{font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ink-2);margin-top:14px;max-width:34em}
.hero .label{padding:5px 12px;border-radius:999px;background:var(--blue-soft);font-size:14px}
.is{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:15px;font-weight:600;color:var(--ink-2)}
.is li{display:flex;align-items:center;gap:7px}
.is .ic{width:19px;height:19px;color:var(--blue-deep)}
.cta{margin-top:22px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.cta .note{margin-top:10px}

/* the money a missed call can lose (Ethan, 27 Oct 2026) */
.lost{align-self:start;padding:clamp(18px,2vw,28px)}
.lost-h{font-family:var(--display);font-size:clamp(19px,1.6vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.lost-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
.lost-figs li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-sm);background:var(--paper)}
.lost-figs b{font-family:var(--display);font-size:clamp(20px,2vw,30px);font-weight:750;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.lost-figs span{font-size:13px;line-height:1.3;color:var(--muted)}
.lost-year{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--blue-soft);font-size:16px;line-height:1.4;color:var(--ink)}
.lost-year b{font-weight:750}
.lost-src{margin-top:10px;font-size:13px;line-height:1.45;color:var(--muted)}
.lost-src a{color:var(--blue-deep);font-weight:600;text-decoration:underline 1px;text-underline-offset:3px}

@media (min-width:960px){
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,4vw,72px);align-items:center;padding-top:clamp(40px,4.4vw,72px)}
}

/* ------------------------------------------------------------------ 2. a sample night */
.night-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.facts-row{display:grid;gap:16px;margin-top:26px}
.facts-row li{display:flex;gap:14px;align-items:flex-start}
.facts-row b{display:block;font-size:17px}
.facts-row span{display:block;color:var(--muted);font-size:16px}
.night-card{padding:clamp(18px,2vw,26px)}
.nc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.nc-head h3{font-size:18px}
.nc-head p{font-size:14px;color:var(--muted);margin-top:2px}
.nc-count{flex:none;font-size:14px;font-weight:650;color:var(--muted);white-space:nowrap}
.nc-count b{color:var(--ink)}
.nc-live{display:flex;align-items:center;gap:12px;margin-top:14px;padding:10px 14px;border-radius:var(--r-sm);background:var(--blue-soft)}
.nc-live div{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px;line-height:1.35}
.nc-live span{color:var(--ink-2)}
.nc-live time{font-size:15px;font-weight:600}
.voice{display:flex;align-items:center;gap:3px;height:22px}
.voice i{display:block;width:3px;height:8px;border-radius:2px;background:var(--blue);animation:voice 900ms var(--ease) 5 alternate}
.voice i:nth-child(2){animation-delay:150ms}.voice i:nth-child(3){animation-delay:300ms}.voice i:nth-child(4){animation-delay:450ms}.voice i:nth-child(5){animation-delay:600ms}
@keyframes voice{to{height:20px}}
.calls{margin-top:8px}
.calls li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:0 12px;padding:10px 0;border-top:1px solid var(--rule);font-size:15px;line-height:1.35}
.calls li:first-child{border-top:0}
.calls time{grid-row:span 3;font-size:13px;color:var(--muted);padding-top:2px}
.calls b{font-weight:700}
.calls span{color:var(--ink-2)}
.calls em{font-style:normal;font-weight:650;color:var(--blue-deep);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* "Maybe" 5: no small text on canary; the Urgent tag is white on a deep red */
.urg,.ws-urg{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--urgent);color:#FFFFFF;font-size:13px;font-weight:700;font-style:normal}
.nc-foot{margin-top:10px;padding-top:12px;border-top:1px solid var(--rule);font-size:15px;font-weight:600}
@media (min-width:960px){
  .night-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .calls li{grid-template-columns:80px minmax(0,1fr) auto;align-items:baseline}
  .calls time{grid-row:auto}
  .calls span{grid-column:2}
  .calls b{grid-column:2}
  .calls em{grid-column:3;grid-row:1 / span 2;justify-content:flex-end;text-align:right}
}

/* ------------------------------------------------------------------ 3. how it works */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
.steps{display:grid;gap:14px;counter-reset:step}
.steps li{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper)}
.steps span{display:block;font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.015em}
.steps p{margin-top:2px;color:var(--ink-2)}
.ws{padding:0;overflow:hidden}
.ws-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule);font-size:15px}
.ws-bar .mono{color:var(--muted);font-size:13px}
.ws-tag{margin-left:auto;padding:2px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue-deep);font-size:13px;font-weight:700}
.ws-lines{display:grid;gap:10px;padding:16px 18px}
.ws-lines li{max-width:86%;padding:10px 14px;border-radius:12px;background:var(--paper);font-size:15px;line-height:1.45}
.ws-lines li span{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
.ws-lines li.us{justify-self:end;background:var(--blue-soft)}
.ws-lines li.us span{color:var(--blue-deep)}
.ws-job{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border-top:1px solid var(--rule)}
.ws-job div{padding:12px 18px;background:var(--card)}
.ws-job dt{font-size:12px;font-weight:700;color:var(--muted)}
.ws-job dd{font-size:15px;font-weight:600}
.how-note{margin-top:22px;color:var(--muted);font-size:15px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:16px}
.feed-copy{margin-top:8px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
@media (min-width:960px){
  .how-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

/* ------------------------------------------------------------------ 4. trades */
.two{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.trade{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,32px)}
.trade-top{display:flex;align-items:center;gap:12px}
.trade-k{font-size:14px;font-weight:650;color:var(--muted)}
.trade h3{font-size:clamp(22px,2vw,28px);letter-spacing:-.02em}
.trade .does{color:var(--ink-2)}
.setup-dl{display:grid;gap:0;border-top:1px solid var(--rule)}
.setup-dl div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:15px}
.setup-dl dt{font-weight:700}
.setup-dl dd{color:var(--ink-2)}
.asks{font-size:14px;font-weight:700;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:-6px}
.facts li{padding:5px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);font-size:14px;font-weight:600}
.trade .btn{margin-top:auto;align-self:flex-start}
.other{margin-top:20px;font-size:17px}
@media (min-width:720px){
  .two{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ------------------------------------------------------------------ 5. what you get */
.rows-list{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rows-list li{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--rule);border-radius:var(--r);background:var(--paper)}
.rows-list p{color:var(--ink-2)}
@media (min-width:640px){.rows-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.rows-list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ------------------------------------------------------------------ 6. try it */
.demo-in{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;padding:clamp(24px,4vw,56px);border-radius:calc(var(--r) + 6px);background:var(--night);color:#FFFFFF}
.demo-in .label{color:#B9C8FF}
.demo-in h2{color:#FFFFFF}
.demo .line{font-size:clamp(17px,1.3vw,20px);margin-top:12px;max-width:34em;color:#D5DCF0}
.demo .act{display:flex}
.demo-in .btn{background:#FFFFFF;color:var(--ink);box-shadow:none}
.demo-in .btn:hover{background:var(--blue-soft)}
.demo-in :focus-visible{outline-color:#FFFFFF}
@media (min-width:860px){.demo-in{grid-template-columns:minmax(0,1fr) auto}}

/* ------------------------------------------------------------------ 7. questions */
.qs{display:grid;gap:10px;max-width:880px}
.qs details{border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper)}
.qs summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 18px;font-weight:700;font-size:17px;cursor:pointer;list-style:none}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-3px) rotate(45deg);transition:transform .2s var(--ease)}
.qs details[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.qs details p{padding:0 18px 16px;color:var(--ink-2);max-width:44em}
.qs details[open]{background:var(--card);box-shadow:var(--lift)}

/* ------------------------------------------------------------------ 8. set-up */
.setup{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.setup .line{color:var(--ink-2);font-size:17px;margin-top:14px;max-width:30em}
.next{display:grid;gap:14px;margin:24px 0 8px}
.next li{display:flex;gap:14px;align-items:flex-start}
.next span{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#FFFFFF;font-weight:700;font-size:15px}
.next b{display:block}
.next p{color:var(--muted);font-size:16px}
.setup .contact-line{margin-top:4px;color:var(--ink)}
/* Ethan 27 Sep: the email and phone links in the Contact lines are 44px tap targets on a phone */
.setup .contact-line .tl{min-height:44px}
.form.card{padding:clamp(20px,2.4vw,32px)}
@media (min-width:960px){.setup{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}

/* a phone: the button and "See how it works" share a line, so the money panel
   fits the first screen at 390 x 844 (Ethan, 27 Oct 2026) */
@media (max-width:420px){
  .cta .btn .ic{display:none}
  .cta-row{gap:6px 16px}
  .cta .btn.big{padding:0 24px}
}
/* the hero runs straight into the sample night: one gap, not two */
.hero + .sec{padding-top:clamp(40px,5vw,72px)}