/* The middle of the page after the call cards: how a call sounds (#talk), what happens in it
   (#how), the team band (#calm) and why SiloV (#why). Same light surface and lavender cards as
   the rest; the one dark moment is the calm band, lit like the evening hero. */

/* Grounds, continuing the page rhythm in garage-hero.css (each blends from the one above). */
section#talk{background:linear-gradient(#fff,#f7f4ff 180px)}
section#how{background:linear-gradient(#f7f4ff,#fff 180px)}
section#calm{background:linear-gradient(#f7f4ff,#f7f4ff)}
section#why{background:linear-gradient(#f7f4ff,#fff 180px)}
section#faq.fm-sec{background:#fff}

/* ---- How it sounds: the copy beside one call, written out ---- */
#talk .talk-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:clamp(32px,6vw,96px); align-items:center}
#talk .talk-copy{display:flex; flex-direction:column; align-items:flex-start; gap:18px}
#talk .talk-copy h2{margin:0}
#talk .talk-hand{margin:0; padding:14px 18px; border-radius:14px; background:#fff; border:1px solid var(--lav-200); color:var(--ink); font-weight:600; line-height:1.55}
.talk-call{border-radius:22px; background:#fff; border:1px solid var(--lav-200); overflow:hidden;
  box-shadow:0 2px 4px rgba(30,26,51,.05), 0 30px 70px -24px rgba(40,24,90,.35)}
.tc-bar{display:flex; align-items:center; gap:10px; padding:14px 20px; background:#15121f; color:#fff; font-weight:700; font-size:.95rem}
.tc-bar time{margin-inline-start:auto; font-variant-numeric:tabular-nums; color:#CDB9FB; font-weight:600}
.tc-live{width:9px; height:9px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.22)}
.tc-lines{list-style:none; margin:0; padding:20px; display:flex; flex-direction:column; gap:12px}
.tc-line{display:flex; flex-direction:column; gap:4px; max-width:88%}
.tc-line p{margin:0; padding:12px 16px; border-radius:18px; font-size:1.02rem; line-height:1.55; color:var(--ink)}
.tc-who{font-size:.78rem; font-weight:700; color:var(--dim)}
.tc-them{align-self:flex-start}
.tc-them p{background:#f1eff5; border-start-start-radius:6px}
.tc-us{align-self:flex-end; align-items:flex-end}
.tc-us p{background:var(--lav-100); border-start-end-radius:6px}
.tc-act{align-self:center; display:flex; align-items:center; gap:8px; padding:5px 12px; border-radius:999px; background:#e7f6ec; color:#15803D; font-size:.84rem; font-weight:700}
.tc-act svg{width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.talk-call .day-note{margin:0; padding:0 20px 16px; text-align:center; font-size:.85rem; color:var(--dim)}

/* ---- What happens in a call: five steps on one line, then the systems it connects to ---- */
#how .how-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--g); position:relative}
/* The line runs from the first number to the last one: each circle sits 29px in from its column's start. */
#how .how-steps{--g:clamp(12px,1.6vw,20px)}
#how .how-steps::before{content:""; position:absolute; top:29px; inset-inline-start:29px; inset-inline-end:calc((100% - 4 * var(--g)) / 5 - 29px); height:2px; background:linear-gradient(to left,var(--lav-200),var(--lav),var(--lav-200))}
#how .how-step{position:relative; display:flex; flex-direction:column; gap:8px; padding:0 4px}
#how .how-num{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:#fff; border:2px solid var(--lav-200);
  color:var(--deep); font-weight:800; font-size:1.05rem; box-shadow:0 8px 20px -10px rgba(60,30,120,.4); margin-bottom:6px}
#how .how-step h3{margin:0; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.3}
#how .how-step p{margin:0; color:var(--dim); font-size:.98rem; line-height:1.55}
#how .how-sys{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 32px; align-items:center; margin-top:clamp(48px,6vw,80px);
  padding:clamp(22px,3vw,36px); border-radius:var(--radius); background:#fff; border:1px solid var(--lav-200);
  box-shadow:0 2px 4px rgba(30,26,51,.04),0 16px 40px -14px rgba(60,30,120,.18)}
#how .how-sys-copy h3{margin:0 0 6px; font-size:clamp(1.25rem,1.9vw,1.5rem)}
#how .how-sys-copy p{margin:0; color:var(--dim); line-height:1.6; max-width:56ch}
#how .how-chips{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width:420px}
#how .how-chips li{padding:7px 14px; border-radius:999px; background:var(--lav-050); border:1px solid var(--lav-200); font-weight:600; font-size:.92rem; color:var(--ink)}
#how .how-sys-note{grid-column:1 / -1; margin:0; font-size:.92rem; color:var(--deep); font-weight:600}

/* ---- The team band: dark, lit like the evening hall ---- */
#calm .calm-card{position:relative; overflow:hidden; isolation:isolate; max-width:1040px; margin:0 auto; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:clamp(48px,7vw,96px) clamp(22px,6vw,88px); border-radius:28px; background:#15121f; color:#fff;
  box-shadow:0 40px 90px -40px rgba(21,18,31,.6)}
#calm .calm-card::before{content:""; position:absolute; inset:0; z-index:-1; background:url("garage/hall-evening-v1.webp") center 42% / cover no-repeat; opacity:.38; filter:blur(3px) saturate(1.05)}
#calm .calm-card::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 90% at 50% 50%,rgba(21,18,31,.35),rgba(21,18,31,.85))}
#calm .calm-card h2{margin:0; color:#fff; font-size:clamp(2rem,3.6vw,3.2rem); font-weight:800; letter-spacing:-.03em; line-height:1.1}
#calm .calm-card .lede{margin:0; color:#E4DAFF; max-width:60ch}

/* ---- Why SiloV: the argument beside four pillars ---- */
#why .why-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,6vw,96px); align-items:start}
#why .why-copy{display:flex; flex-direction:column; align-items:flex-start; gap:18px}
#why .why-copy h2, #why .why-copy .lede{margin:0}
#why .why-pillars{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
#why .why-pillar{display:flex; flex-direction:column; gap:8px; padding:clamp(20px,2.4vw,28px); border-radius:var(--radius); background:#fff; border:1px solid var(--lav-200);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(30,26,51,.04),0 16px 40px -14px rgba(60,30,120,.18)}
#why .why-num{font-weight:800; color:var(--lav); font-size:.95rem}
#why .why-pillar h3{margin:0; font-size:clamp(1.1rem,1.6vw,1.3rem)}
#why .why-pillar p{margin:0; color:var(--dim); line-height:1.6}

@media (max-width:1100px){
  #how .how-steps{--g:10px}
  #how .how-step p{font-size:.92rem}
  #how .how-sys{grid-template-columns:1fr}
  #how .how-chips{justify-content:flex-start; max-width:none}
}
@media (max-width:900px){
  #talk .talk-grid, #why .why-grid{grid-template-columns:1fr}
  #how .how-steps{grid-template-columns:1fr; gap:0}
  #how .how-steps::before{top:29px; bottom:29px; inset-inline:28px auto; width:2px; height:auto; background:var(--lav-200)}
  #how .how-step{display:grid; grid-template-columns:58px minmax(0,1fr); column-gap:16px; row-gap:2px; padding:0 0 22px}
  #how .how-num{grid-row:span 2; margin:0}
  #how .how-step h3{align-self:end}
  #how .how-step p{align-self:start}
}
@media (max-width:600px){
  /* Phones: the form title right below says the offer, so the first field stays in the first screen. */
  .hero .lede-offer{display:none}
  #why .why-pillars{grid-template-columns:1fr}
  .tc-lines{padding:16px 14px}
  .tc-line{max-width:94%}
  #calm .calm-card{border-radius:22px}
}