/* Home page, direction A. Loaded only by index.html, so every other page renders
   exactly as before. Built on the tokens and components in style.css. Type sits
   close to the subpages' scale, with the first screen headline leading. */

/* first screen, words left and the layer map right, the pattern the trade
   software category uses (system headline, span in the sub line, product
   shown beside). No photo on file, so the map takes the picture slot. */
.home-hero{padding:72px 0 64px;text-align:left}
.home-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:56px;align-items:center}
.home-hero h1{font-size:40px;line-height:1.1;max-width:600px;margin:0 0 18px;text-wrap:balance}
.home-hero h1 .blue{color:var(--accent)}
.home-hero .lead{font-size:17.5px;max-width:560px;margin:0 0 22px;text-wrap:pretty}
.home-tagline{font-size:21px;font-weight:700;letter-spacing:-.02em;margin-bottom:26px}
.home-tagline .nb,.home-tagline .blue{white-space:nowrap}
.home-tagline .blue{color:var(--accent)}
.home-cta{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap}
.home-hero-pic{margin:0}
.home-hero-pic img{display:block;width:100%;height:auto;max-width:360px;margin:0 auto}
.home-hero-pic figcaption{font-size:13.5px;color:var(--ink-mute);text-align:center;margin-top:12px;line-height:1.55}
.home-addr{font-size:14.5px;color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}
.home-hero .home-reassure{margin-top:20px;font-size:15px;color:var(--ink-soft)}
.home-close .reassure{margin-top:16px}

/* sections */
.home-sec{padding:72px 0}
.home-sec.alt{background:var(--bg-2)}
.home-sec h2,.home-close h2{text-wrap:balance}
.home-sec h2{font-size:28px;letter-spacing:-.02em;font-weight:700;text-align:center;margin-bottom:28px}
.home-lede{font-size:16px;color:var(--ink-soft);text-align:center;max-width:640px;margin:0 auto 28px;text-wrap:pretty}
.home-after{margin:28px auto 18px}
.home-center{text-align:center}

/* numbered steps, so the journey reads at a glance */
.home-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
.home-steps.four{grid-template-columns:repeat(4,1fr)}
.home-steps li{
  counter-increment:step;background:var(--card);border:1px solid var(--line);
  border-radius:13px;padding:22px 20px;box-shadow:var(--shadow);
}
.home-steps li::before{
  content:counter(step);display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;margin-bottom:14px;
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(135deg,var(--accent),#4a90d9);box-shadow:0 5px 14px rgba(36,52,64,.26);
}
.home-steps p{font-size:14.5px;color:var(--ink-soft)}
.home-steps b{color:var(--ink)}

/* two stories */
.home-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.home-card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:24px 22px;box-shadow:var(--shadow)}
.home-card h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.home-card p{font-size:14.5px;color:var(--ink-soft)}

/* own businesses, the figures styled like the stat band on /system */
.home-figs{display:grid;grid-template-columns:repeat(2,minmax(0,240px));justify-content:center;gap:18px}
.home-fig{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:20px 18px;text-align:center;box-shadow:var(--shadow)}
.home-fig .n{display:block;font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:600;color:var(--accent-ink)}
.home-fig .l{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:4px;line-height:1.45;text-wrap:balance}

/* questions */
.home-faq{max-width:720px;margin:0 auto}
.home-faq div{padding:16px 0;border-bottom:1px solid var(--line)}
.home-faq div:first-child{border-top:1px solid var(--line)}
.home-faq dt{font-size:16px;font-weight:700;margin-bottom:4px}
.home-faq dd{font-size:15px;color:var(--ink-soft)}

/* text only sections, a narrower column, a bold lead line and one pull line */
.home-narrow{max-width:760px}
.home-big{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.45;text-align:center;max-width:640px;margin:0 auto 18px;text-wrap:balance}
.home-pull{font-size:18px;font-weight:600;color:var(--accent-ink);text-align:center;max-width:560px;margin:4px auto 0;text-wrap:balance}

/* built from layers, the picture beside the words */
.home-layers{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:48px;align-items:center;max-width:960px;margin:12px auto 0}
.home-layers-pic{margin:0}
.home-layers-pic figcaption{font-size:13.5px;color:var(--ink-mute);text-align:center;margin-top:12px;line-height:1.55}
.home-layers-copy p{font-size:15.5px;color:var(--ink-soft);margin-bottom:18px}
.home-examples{list-style:none;margin:0 0 22px}
.home-examples li{position:relative;padding:0 0 12px 18px;font-size:15px;color:var(--ink-soft)}
.home-examples li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.home-examples b{color:var(--ink)}

/* you own it */
.home-own{list-style:none;max-width:620px;margin:0 auto 26px}
.home-own li{position:relative;padding:12px 0 12px 30px;font-size:15.5px;border-bottom:1px solid var(--line)}
.home-own li:first-child{border-top:1px solid var(--line)}
.home-own li::before{content:"";position:absolute;left:4px;top:20px;width:10px;height:10px;border-radius:50%;background:var(--accent)}

/* close, keeps the #intake anchor the other pages link to, with the closing look from style.css */
#intake.home-close{padding:80px 0;background:none;scroll-margin-top:68px}
.home-close .closing-card{padding:52px 28px}
.home-close .closing-card h2{font-size:28px;margin-bottom:22px}

@media(max-width:900px){
  .home-hero{text-align:center}
  .home-hero-grid{grid-template-columns:1fr;gap:36px}
  .home-hero h1,.home-hero .lead{margin-left:auto;margin-right:auto}
  .home-hero h1{font-size:36px}
  .home-tagline{font-size:20px}
  .home-cta{justify-content:center}
  .home-hero-pic img{max-width:300px}
  .home-steps.four{grid-template-columns:1fr 1fr}
  .home-layers{grid-template-columns:1fr;gap:28px}
  .home-layers-copy{max-width:640px;margin:0 auto}
}
@media(max-width:640px){
  .home-hero{padding:56px 0 48px}
  .home-hero h1{font-size:30px;margin-bottom:16px}
  .home-hero .lead{font-size:16.5px;margin-bottom:20px}
  .home-tagline{font-size:19px;margin-bottom:24px}
  .home-hero-pic img{max-width:240px}
  .home-hero .home-reassure{font-size:14px}
  .home-sec{padding:56px 0}
  .home-sec h2{font-size:23px;margin-bottom:22px}
  .home-lede{font-size:15.5px}
  .home-big{font-size:18px}
  .home-pull{font-size:16.5px}
  .home-steps,.home-steps.four,.home-cards{grid-template-columns:1fr}
  .home-figs{grid-template-columns:1fr 1fr;gap:12px}
  .home-fig .n{font-size:22px}
  #intake.home-close{padding:56px 0}
  .home-close .closing-card{padding:40px 20px}
  .home-close .closing-card h2{font-size:23px}
}