/* Call & Close — marketing site.
   Utility/technical direction: Space Grotesk over IBM Plex Sans, one accent,
   off-white paper rather than pure white. */

:root{
  --ink:#12161C;
  --ink-soft:#565F6B;
  --paper:#FAF9F6;
  --surface:#FFFFFF;
  --line:#E3E0D9;
  --brand:#14324B;
  --brand-deep:#0C2033;
  --accent:#C2622C;

  --fs-hero:clamp(2.5rem,6.2vw,4.5rem);
  --fs-h2:clamp(1.85rem,3.6vw,2.75rem);
  --fs-h3:1.3125rem;
  --fs-body:1.0625rem;
  --fs-small:.875rem;

  --space-section:clamp(4rem,9vw,8rem);
  --container:1140px;
  --radius:10px;
  --shadow:0 1px 2px rgba(18,22,28,.04),0 14px 36px -10px rgba(18,22,28,.12);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:var(--fs-body)/1.7 "IBM Plex Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Space Grotesk","IBM Plex Sans",system-ui,sans-serif;font-weight:600}
h1{font-size:var(--fs-hero);line-height:1.06;letter-spacing:-.03em;margin:0 0 1.1rem}
h2{font-size:var(--fs-h2);line-height:1.14;letter-spacing:-.02em;margin:0 0 1rem}
h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em;margin:0 0 .5rem}
p{margin:0 0 1.05rem;max-width:65ch}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent)}

.wrap{max-width:var(--container);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:720px;margin:0 auto;padding:0 22px}
section{padding:var(--space-section) 0}

.eyebrow{
  font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:600;color:var(--ink-soft);margin:0 0 .9rem;
}

/* ---- header ---- */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(250,249,246,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;
  font-weight:600;font-size:1.0625rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.mark{width:30px;height:30px;border-radius:7px;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:.72rem;letter-spacing:.02em;flex:none}
.site-head nav{display:flex;gap:22px;align-items:center;font-size:.9375rem}
.site-head nav a{color:var(--ink-soft);text-decoration:none}
.site-head nav a:hover{color:var(--ink)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 22px;border-radius:8px;font-weight:600;
  font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,transform .1s;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#a9531f;color:#fff}
.btn-ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--ink-soft);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---- hero: asymmetric 7/5, not centered ---- */
.hero{padding:clamp(3.5rem,7vw,6rem) 0 var(--space-section)}
.hero-grid{display:grid;gap:clamp(2rem,5vw,4rem);align-items:start;
  grid-template-columns:1fr}
@media(min-width:900px){.hero-grid{grid-template-columns:7fr 5fr}}
.hero p.lede{font-size:clamp(1.0625rem,1.7vw,1.25rem);color:var(--ink-soft);max-width:56ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.9rem}

.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;
}
.transcript{font-size:.9375rem;line-height:1.6}
.turn{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line)}
.turn:last-child{border-bottom:0}
.who{font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--ink-soft);padding-top:4px;width:52px}
.who.ai{color:var(--brand)}

/* ---- dark band as punctuation ---- */
.band{background:var(--brand-deep);color:#EEF2F6}
.band h2{color:#fff}
.band p{color:#B9C6D3}
.band .eyebrow{color:#7F97AC}
.steps{display:grid;gap:26px;margin-top:2.4rem;grid-template-columns:1fr}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr);gap:34px 48px}}
.step{border-top:1px solid rgba(255,255,255,.16);padding-top:16px}
.step .n{font-family:"Space Grotesk",sans-serif;font-size:.8125rem;color:#7F97AC;
  letter-spacing:.08em;margin-bottom:6px}
.step h3{color:#fff;margin-bottom:.35rem}
.step p{margin:0;font-size:.9688rem}

/* ---- feature rows: alternating, not a card grid ---- */
.rows{display:grid;gap:clamp(2.5rem,5vw,4.5rem);margin-top:3rem}
.row{display:grid;gap:clamp(1.2rem,3vw,3rem);align-items:center;grid-template-columns:1fr}
@media(min-width:860px){
  .row{grid-template-columns:5fr 7fr}
  .row.flip>*:first-child{order:2}
}
.row h3{font-size:1.4375rem}
.row p{margin-bottom:0;color:var(--ink-soft)}
.stat{border-left:3px solid var(--accent);padding-left:18px}
.stat b{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.75rem;
  letter-spacing:-.02em;line-height:1.2}

/* ---- legal pages ---- */
.legal{padding:clamp(2.5rem,5vw,4rem) 0 var(--space-section)}
.legal h2{font-size:1.375rem;margin:2.4rem 0 .7rem;letter-spacing:-.01em}
.legal h3{font-size:1.0625rem;margin:1.6rem 0 .4rem}
.legal ul{padding-left:1.15rem;max-width:65ch}
.legal li{margin-bottom:.45rem}
.updated{font-size:var(--fs-small);color:var(--ink-soft);margin-bottom:2rem}
.callout{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:6px;padding:18px 20px;margin:1.6rem 0}
.callout p:last-child{margin-bottom:0}

/* ---- contact + footer ---- */
.contact-grid{display:grid;gap:26px;margin-top:2rem;grid-template-columns:1fr}
@media(min-width:700px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
.contact-grid dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin-bottom:3px}
.contact-grid dd{margin:0 0 1.2rem;font-size:1.0625rem}

.site-foot{border-top:1px solid var(--line);padding:38px 0 56px;font-size:.9375rem;
  color:var(--ink-soft)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between}
.site-foot a{color:var(--ink-soft)}
.site-foot nav{display:flex;gap:20px;flex-wrap:wrap}

@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(16px);
    transition:opacity .55s ease,transform .55s ease}
  .reveal.in{opacity:1;transform:none}
}