/* Telvidian — porcelain / ink / cobalt / sunshine. Body: Atkinson Hyperlegible. */
:root{
  --porcelain:#F5F7FA; --ink:#182742; --cobalt:#2451C9; --cobalt-deep:#1B3E9C;
  --sun:#FFC53D; --coral:#E85D4A; --leaf:#3AA76D; --line:#D8DFEA; --white:#FFFFFF;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--body);font-size:1.125rem;line-height:1.6;
  color:var(--ink);background:var(--porcelain)}
img{max-width:100%}
a{color:var(--cobalt-deep)}
h1,h2,h3{font-family:var(--disp);line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6vw,4.4rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem);font-weight:800}
h3{font-size:1.25rem;font-weight:600}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--sun);color:var(--ink);
  padding:.7em 1.2em;border-radius:0 0 12px 0;font-weight:700;z-index:99}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:3px;border-radius:4px}

/* header */
.site-head{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;
  padding:1rem clamp(1rem,4vw,3rem);background:var(--white);border-bottom:2px solid var(--line);
  position:sticky;top:0;z-index:50}
.wordmark{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--ink);
  text-decoration:none;letter-spacing:-.02em}
.dot-i{position:relative}
.dot-i::before{content:"";position:absolute;top:.09em;left:50%;transform:translateX(-50%);
  width:.26em;height:.26em;border-radius:50%;background:var(--coral)}
.site-head nav{display:flex;gap:1.2rem;flex-wrap:wrap;margin-right:auto}
.site-head nav a{text-decoration:none;font-weight:700;color:var(--ink);padding:.5em .2em;min-height:44px;display:inline-flex;align-items:center}
.site-head nav a:hover{color:var(--cobalt-deep);text-decoration:underline}
.head-cta{margin-left:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:.7em 1.5em;border-radius:14px;font-weight:700;font-size:1.05rem;
  text-decoration:none;border:2.5px solid transparent;cursor:pointer}
.btn-primary{background:var(--cobalt);color:var(--white);box-shadow:0 4px 0 var(--cobalt-deep)}
.btn-primary:hover{background:var(--cobalt-deep)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cobalt-deep)}
.btn-quiet{background:var(--white);color:var(--ink);border-color:var(--ink)}
.btn-quiet:hover{background:var(--ink);color:var(--white)}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center;
  padding:clamp(2.5rem,7vw,5.5rem) clamp(1rem,4vw,3rem);max-width:1180px;margin:0 auto}
.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;
  color:var(--cobalt-deep);margin:0 0 1rem}
.lede{font-size:1.25rem;max-width:34em}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin:1.6rem 0 1rem}
.hero-note{font-size:.95rem;color:#44557A}

/* the pressable demo */
.demo{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.demo-tv{width:min(280px,80%)}
.tv-screen{aspect-ratio:16/10;border:6px solid var(--ink);border-radius:14px;
  background:#0E1526;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:1.6rem;color:#3B4B70;
  transition:background .3s, color .3s}
.tv-foot{width:40%;height:10px;background:var(--ink);margin:0 auto;border-radius:0 0 8px 8px}
.demo-tv.on .tv-screen{background:var(--sun);color:var(--ink)}
.big-button{background:none;border:none;padding:0;cursor:pointer;border-radius:50%}
.big-button-cap{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;
  background:var(--coral);color:var(--white);font-size:3rem;
  box-shadow:0 10px 0 #B03A2A, 0 14px 24px rgba(24,39,66,.25);
  transition:transform .08s, box-shadow .08s}
.big-button:active .big-button-cap,
.big-button.pressed .big-button-cap{transform:translateY(8px);box-shadow:0 2px 0 #B03A2A, 0 4px 10px rgba(24,39,66,.25)}
.cap-symbol{transform:translateX(3px)}
.demo-hint{font-weight:700;color:#44557A;min-height:1.5em;text-align:center}

/* bands */
.band{padding:clamp(2.5rem,6vw,4.5rem) clamp(1rem,4vw,3rem);max-width:1180px;margin:0 auto}
.band.alt{background:var(--white);max-width:none}
.band.alt > *{max-width:1180px;margin-left:auto;margin-right:auto}
.band.alt h2, .band.alt .band-lede{max-width:1180px}
.band-lede{font-size:1.15rem;max-width:40em}
.ethos{background:var(--ink);color:var(--porcelain);max-width:none;text-align:center}
.ethos h2{color:var(--sun)}
.ethos p{max-width:44em;margin:0 auto}
.ethos a{color:var(--sun)}

/* placeholders — deliberately temporary-looking */
.placeholder{border:3px dashed var(--cobalt);border-radius:14px;
  background:repeating-linear-gradient(45deg,#EDF1F8,#EDF1F8 14px,#E2E9F5 14px,#E2E9F5 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  text-align:center;color:#33456E;padding:1.2rem;font-size:.95rem}
.ph-video{aspect-ratio:16/9;max-width:820px;margin:1.5rem auto 0}
.ph-photo{aspect-ratio:4/3;margin-top:1rem}
.ph-portrait{aspect-ratio:3/4;max-width:320px}
.ph-icon{font-size:2rem}
.ph-note{max-width:26em}
.ph-inline{color:#8A5A00;background:#FFF3D6;padding:.1em .5em;border-radius:6px;font-size:.85em}
.video-band{text-align:center}

/* steps */
.steps{list-style:none;padding:0;margin:2rem 0 0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:2rem}
.step-mark{display:block;width:44px;height:44px;margin-bottom:1rem}
.mark-circle{border-radius:50%;background:var(--coral)}
.mark-square{border-radius:8px;background:var(--cobalt)}
.mark-triangle{width:0;height:0;background:none;border-left:24px solid transparent;
  border-right:24px solid transparent;border-bottom:42px solid var(--leaf)}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem;margin-top:2rem}
.card{background:var(--porcelain);border:2px solid var(--line);border-radius:18px;
  padding:1.4rem;display:flex;flex-direction:column;gap:.6rem}
.card .placeholder{margin-top:0}
.card .btn{margin-top:auto}
.price{font-family:var(--disp);font-weight:800;font-size:1.7rem;margin:0;color:var(--cobalt-deep)}

/* who */
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:1.5rem}

/* story */
.story{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:center}
.story-copy{font-size:1.2rem;max-width:36em}
.story-sign{font-weight:700}

/* footer */
.site-foot{padding:2.5rem clamp(1rem,4vw,3rem);border-top:2px solid var(--line);text-align:center}
.fine{font-size:.85rem;color:#44557A;max-width:52em;margin:.6em auto}

/* responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .story{grid-template-columns:1fr}
  .head-cta{margin-left:0}
}