/* ============================================================
   AI Say What? - aisaywhat.com
   Navy-dominant, orange punch. Inter heavy. 10px radius.
   Mobile first. Only three colors on purpose.
   ============================================================ */

:root{
  /* brand tokens - see content/brand.md */
  --navy:      #0A2A66;
  --navy-deep: #071E4A;
  --navy-lift: #123878;
  --orange:    #F7931E;
  --orange-hi: #FFA83D;
  --white:     #FFFFFF;
  --dim:       rgba(255,255,255,.76);
  --line:      rgba(255,255,255,.16);

  --r: 10px;
  --shell: 1200px;

  /* fluid type, Utopia-style clamps */
  --fs-body: clamp(1rem, .95rem + .3vw, 1.1rem);
  --fs-lede: clamp(1.075rem, .98rem + .55vw, 1.35rem);
  --fs-h1:   clamp(2.25rem, 1.35rem + 4.2vw, 4rem);
  --fs-h2:   clamp(1.75rem, 1.28rem + 2.1vw, 2.75rem);
  --fs-h3:   clamp(1.125rem, 1.04rem + .38vw, 1.3rem);

  --pad-sec: clamp(3.5rem, 2.25rem + 5.5vw, 7rem);
  --gutter:  clamp(1rem, .5rem + 3vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--orange); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--orange-hi); }

:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px;
  background:var(--orange); color:var(--navy);
  padding:12px 20px; font-weight:800; border-radius:var(--r); z-index:100;
}
.skip:focus{ left:16px; top:16px; }

.wrap{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.wrap.narrow{ max-width:800px; }

h1,h2,h3{ margin:0 0 .5em; line-height:1.08; letter-spacing:-.02em; font-weight:900; }
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.01em; font-weight:800; }
p{ margin:0 0 1rem; max-width:68ch; }

/* ---------------- header ---------------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(10,42,102,.92);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.head-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:60px;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--white); text-decoration:none; font-weight:900;
  font-size:1.0625rem; letter-spacing:-.02em;
}
.brand-mark{
  display:grid; place-items:center;
  width:30px; height:30px; flex:none;
  background:var(--orange); color:var(--navy);
  border-radius:var(--r) var(--r) 3px var(--r);
  font-weight:900; font-size:1.125rem; line-height:1;
  padding-bottom:2px;
}
.q{ color:var(--orange); }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:52px; padding:14px 28px;
  border-radius:var(--r);
  font-weight:800; font-size:1.0625rem; letter-spacing:-.01em;
  text-decoration:none; text-align:center;
  border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
.btn-sm{ min-height:44px; padding:10px 18px; font-size:.9375rem; }
.btn-big{ min-height:60px; padding:18px 40px; font-size:1.1875rem; }

.btn-primary{ background:var(--orange); color:var(--navy); }
.btn-primary:hover{ background:var(--orange-hi); color:var(--navy); transform:translateY(-2px); }

.btn-outline{ border-color:var(--orange); color:var(--orange); background:transparent; }
.btn-outline:hover{ background:var(--orange); color:var(--navy); }

.btn-ghost{ border-color:var(--line); color:var(--white); background:transparent; }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); }

@media (prefers-reduced-motion: reduce){ .btn{ transition:none; } .btn:hover{ transform:none; } }

/* ---------------- hero ---------------- */
.hero{
  padding-block:clamp(2rem,1rem + 5vw,4.5rem) clamp(3rem,2rem + 5vw,6rem);
  background:
    radial-gradient(90% 70% at 85% 12%, rgba(247,147,30,.20), transparent 62%),
    var(--navy);
}
.hero-grid{ display:grid; gap:clamp(1.25rem,.9rem + 2.5vw,4rem); }

/* On phones the character leads, so the face is above the fold. */
.hero-art{ order:-1; }
.hero-art img{
  width:140px; height:140px;
  object-fit:cover; object-position:50% 16%;
  border-radius:50%;
  border:4px solid var(--orange);
}

.eyebrow{
  font-weight:800; font-size:.8125rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange); margin:0 0 12px;
}
.hl{ color:var(--orange); }
.lede{ font-size:var(--fs-lede); color:var(--dim); max-width:46ch; }

.cta-block{ margin-top:32px; }
.cta-sub{ margin:12px 0 0; font-size:.9375rem; color:var(--dim); font-weight:600; }

.alt-door{
  margin-top:28px; padding-top:20px;
  border-top:1px solid var(--line);
  font-size:.9375rem; color:var(--dim); max-width:46ch;
}

/* ---------------- proof strip ---------------- */
.strip{ background:var(--orange); color:var(--navy); padding-block:28px; }
.strip-grid{
  display:grid; gap:20px 24px;
  grid-template-columns:repeat(2,1fr);
  text-align:center;
}
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat .n{ font-weight:900; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem); line-height:1; letter-spacing:-.03em; }
.stat .l{ font-weight:600; font-size:.8125rem; line-height:1.3; }

/* ---------------- sections ---------------- */
.sec{ padding-block:var(--pad-sec); }
.sec-alt{ background:var(--navy-deep); }
.sec-lede{ font-size:var(--fs-lede); color:var(--dim); margin-bottom:40px; }

/* cards */
.cards{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
}
.card{
  background:var(--navy-lift);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:28px 24px;
}
.card h3{ color:var(--orange); }
.card p{ margin:0; color:var(--dim); font-size:.9688rem; }

/* for / not for */
.two-col{ display:grid; gap:40px; }
.h-yes,.h-no{ font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem); }
.h-yes{ color:var(--orange); }
.h-no{ color:var(--white); }

.ticks,.crosses{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.ticks li,.crosses li{
  position:relative; padding-left:34px; color:var(--dim); max-width:46ch;
}
.ticks li::before,.crosses li::before{
  position:absolute; left:0; top:-1px;
  font-weight:900; font-size:1.125rem;
}
.ticks li::before{ content:"\2713"; color:var(--orange); }
.crosses li::before{ content:"\2715"; color:rgba(255,255,255,.4); }

/* ted */
.ted-grid{ display:grid; gap:28px; }
.ted-pic img{
  width:160px; height:160px;
  object-fit:cover; object-position:50% 18%;
  border-radius:50%; border:4px solid var(--orange);
}
.ted-copy p{ color:var(--dim); }
.ted-copy strong{ color:var(--white); font-weight:800; }

/* secondary door */
.door{ background:var(--navy-deep); border-block:1px solid var(--line); }
.door-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }

/* faq */
.qa{ padding-block:24px; border-bottom:1px solid var(--line); }
.qa:last-child{ border-bottom:0; }
.qa h3{ color:var(--orange); margin-bottom:.35em; }
.qa p{ margin:0; color:var(--dim); }

/* final cta */
.final{
  background:var(--orange); color:var(--navy);
  padding-block:clamp(3.5rem,2.5rem + 4vw,5.5rem);
  text-align:center;
}
.final h2{ max-width:18ch; margin-inline:auto; margin-bottom:32px; }
.final .btn-primary{ background:var(--navy); color:var(--white); }
.final .btn-primary:hover{ background:var(--navy-lift); color:var(--white); }
.final .cta-sub{ color:rgba(10,42,102,.8); }

/* footer */
.site-foot{ background:var(--navy-deep); padding-block:40px; border-top:1px solid var(--line); }
.foot-inner{ display:grid; gap:16px; }
.foot-brand{ margin:0; font-weight:900; font-size:1.125rem; letter-spacing:-.02em; }
.foot-tag{ display:block; font-weight:600; font-size:.875rem; color:var(--dim); letter-spacing:0; margin-top:4px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:8px 24px; font-weight:700; font-size:.9375rem; }
.foot-fine{ margin:0; font-size:.8125rem; color:rgba(255,255,255,.55); }

/* ============================================================
   Breakpoints: added where the content breaks, not per device
   ============================================================ */

/* 560px: the stat strip fits on one row */
@media (min-width:560px){
  .strip-grid{ grid-template-columns:repeat(4,1fr); }
}

/* 900px: hero copy and art sit side by side; two-col splits */
@media (min-width:900px){
  .hero-grid{
    grid-template-columns:1.05fr .95fr;
    align-items:center;
  }
  .hero-art{ order:2; }
  .hero-art img{
    width:100%; height:auto;
    max-width:460px;
    margin-inline:auto;
    object-position:center;
    border-radius:var(--r);
    border-width:5px;
  }

  .two-col{ grid-template-columns:1fr 1fr; gap:56px; }

  .ted-grid{ grid-template-columns:200px 1fr; gap:48px; align-items:start; }
  .ted-pic img{ width:200px; height:200px; }

  .foot-inner{
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .foot-fine{ grid-column:1 / -1; }
}