/* Draft homepage (Nov 3, from Neal's v3 deck). Adds to site.css; uses the same tokens. */

.hero h1{color:var(--ink)}
.hero h1 .r{color:var(--red)}
.hero .sub{font-size:20px;font-weight:700;margin-top:18px}

/* "What you walk out with": big red numerals */
.outs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.out{background:var(--card);border-top:4px solid var(--red);padding:22px 20px}
.out .big{display:block;font-size:56px;line-height:1;font-weight:800;color:var(--red);margin-bottom:12px}
.out h3{font-size:19px;margin-bottom:6px}
.out p{color:var(--mute);font-size:16px}
.callout{margin-top:24px;padding:18px 20px;background:var(--ink);color:#fff;font-weight:700;font-size:18px}

/* Why I'm doing this */
.why{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start}
.why .big-q{font-size:28px;line-height:1.3;font-weight:800}
.why .big-q span{color:var(--red)}
.why ul{display:grid;gap:18px}
.why li h3{font-size:18px;margin-bottom:4px}
.why li p{color:var(--mute)}

/* The two hours */
.parts{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--rule);margin-top:28px}
.part{padding:20px 16px 20px 0;border-right:1px solid var(--hair)}
.part:last-child{border-right:0}
.part+.part{padding-left:16px}
.part .k{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red-text)}
.part h3{font-size:20px;margin:4px 0 8px}
.part p{font-size:15px;color:var(--mute)}
.part .min{display:inline-block;margin-top:10px;font-weight:800;font-size:15px}
.sec-note{margin-top:20px;color:var(--soft);font-size:15px}

/* Ponds */
.ponds{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px;counter-reset:pond}
.pond{background:var(--card);padding:20px;border-radius:2px}
.pond .k{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--red-text)}
.pond h3{font-size:19px;margin:4px 0 8px}
.pond p{font-size:15px;color:var(--mute)}

/* Fish AI */
.ai{background:var(--ink);color:#fff}
.ai .sec-title,.ai h3{color:#fff}
.ai .sec-lead,.ai p{color:#D9D9D9}
.ai .eyebrow{color:#FF8A73}
.ai .pw{font-size:14px;color:#BDBDBD;margin-top:6px}
.ai-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.ai-steps li{border-top:2px solid var(--red);padding-top:14px}
.ai-steps .n{font-size:36px;font-weight:800;color:var(--red);line-height:1}
.ai-steps h3{font-size:18px;margin:8px 0 6px}
.ai-steps p{font-size:15px}
.ai .promise{margin-top:24px;font-weight:700;color:#fff}
.ai .soon{margin-top:8px;font-size:14px;color:#BDBDBD}

/* First ask */
.ask{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;margin-top:24px}
.ask blockquote{background:var(--card);padding:22px;border-left:4px solid var(--red);font-size:18px;line-height:1.5}
.ask ol{counter-reset:a;display:grid;gap:10px}
.ask ol li{counter-increment:a;padding-left:34px;position:relative}
.ask ol li::before{content:counter(a);position:absolute;left:0;top:0;font-weight:800;color:var(--red)}
.ask .never{margin-top:14px;font-weight:700}

/* Next step and after */
.nexts{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:28px}
.nx{background:var(--card);padding:18px}
.nx h3{font-size:17px;margin-bottom:6px}
.nx p{font-size:15px;color:var(--mute)}
.after{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.after li .k{font-weight:800;color:var(--red-text);font-size:15px}
.after li p{font-size:15px;color:var(--mute);margin-top:4px}
.rule-line{margin-top:22px;font-weight:700}

.close{text-align:left}
.close .sec-title{max-width:20ch}

@media (max-width:900px){
  .outs,.ponds,.ai-steps,.after{grid-template-columns:repeat(2,1fr)}
  .nexts{grid-template-columns:repeat(2,1fr)}
  .parts{grid-template-columns:1fr;border-top:0}
  .part,.part+.part{border-right:0;border-top:1px solid var(--hair);padding:16px 0}
  .why,.ask{grid-template-columns:1fr;gap:24px}
}
@media (max-width:520px){
  .outs,.ponds,.ai-steps,.after,.nexts{grid-template-columns:1fr}
  .why .big-q{font-size:23px}
  .out .big{font-size:44px}
}