/* ============================================================================
   Tellervision — shared styles for the standalone pages
   (terms.html, thank-you.html). The homepage keeps its own inline styles.
   Tokens are copied from index.html so the pages match exactly.
   ========================================================================== */
:root{
  --ink:      oklch(0.155 0.014 248);
  --ink-2:    oklch(0.205 0.017 248);
  --hairline: oklch(0.34 0.02 248);
  --hairline-soft: oklch(0.28 0.018 248);
  --paper:    oklch(0.975 0.004 248);
  --paper-2:  oklch(0.935 0.007 248);
  --rule:     oklch(0.865 0.009 248);
  --on-dark:       oklch(0.965 0.005 248);
  --on-dark-mute:  oklch(0.745 0.012 248);
  --on-light:      oklch(0.215 0.019 248);
  --on-light-mute: oklch(0.435 0.019 248);
  --brand:       rgb(231 77 39);
  --brand-deep:  rgb(206 62 29);
  --brand-deeper:rgb(182 52 23);
  --brand-lift:  rgb(250 152 91);
  --accent:      var(--brand-lift);
  --accent-deep: var(--brand-deep);
  --accent-wash: rgb(231 77 39 / 0.16);
  --r-sm:5px; --r-md:8px; --r-lg:12px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --shell:1180px; --gutter:clamp(20px,5vw,56px);
  --sans:"Source Sans 3",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"Source Sans 3",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --display:"Source Serif 4",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--on-light); font-family:var(--sans);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0; font-weight:600; line-height:1.15; letter-spacing:-0.028em; text-wrap:balance}
h1,h2{font-family:var(--display); letter-spacing:-0.012em}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0}
a{color:inherit}
img{max-width:100%; height:auto; display:block}
.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter)}
.dark{background:var(--ink); color:var(--on-dark)}
.eyebrow{font-family:var(--mono); font-size:13.5px; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--accent-deep); margin:0 0 var(--sp-4)}
.dark .eyebrow{color:var(--accent)}
:where(a,button,summary):focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:var(--r-sm)}
.skip{position:absolute; left:var(--sp-4); top:-60px; z-index:300; background:var(--brand-deep); color:#fff;
  font-weight:600; padding:10px 16px; border-radius:var(--r-md); text-decoration:none; transition:top 160ms var(--ease-out)}
.skip:focus{top:var(--sp-4)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 22px;
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-0.01em; border-radius:var(--r-md);
  border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 120ms var(--ease-out)}
.btn:active{transform:scale(0.975)}
.btn svg{flex:none}
.btn--primary{background:var(--brand-deep); color:#fff; border-color:var(--brand-deep)}
.btn--primary:hover{background:var(--brand-deeper); border-color:var(--brand-deeper)}
.btn--ghost-light{background:transparent; color:var(--on-light); border-color:var(--rule)}
.btn--ghost-light:hover{background:var(--paper-2)}
.btn--ghost-dark{background:transparent; color:var(--on-dark); border-color:var(--hairline)}
.btn--ghost-dark:hover{background:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* slim header for sub-pages */
.subnav{background:var(--ink); border-bottom:1px solid var(--hairline-soft); position:sticky; top:0; z-index:100}
.subnav__row{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  min-height:72px; flex-wrap:wrap; padding-block:10px}
.subnav__brand img{height:clamp(30px,3.6vw,38px); width:auto}
.subnav__right{display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap}
.subnav__phone{font-family:var(--mono); font-size:14.5px; font-weight:600; color:var(--on-dark);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.subnav__phone:hover{color:var(--accent)}
.pip{width:6px; height:6px; border-radius:50%; background:var(--brand); flex:none; box-shadow:0 0 0 3px var(--accent-wash)}
@media (max-width:560px){.subnav__phone span{display:none}}

/* page shell */
.page{padding-block:clamp(44px,6vw,84px) clamp(56px,8vw,110px)}
.page__head{max-width:70ch; margin-bottom:clamp(32px,4.5vw,52px);
  padding-bottom:clamp(24px,3vw,36px); border-bottom:1px solid var(--rule)}
.page__head h1{font-size:clamp(30px,4.4vw,50px); letter-spacing:-0.035em; margin-bottom:var(--sp-4)}
.page__head p{font-size:clamp(16px,1.6vw,18.5px); color:var(--on-light-mute); max-width:62ch}
.page__updated{font-family:var(--mono); font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--on-light-mute); margin-top:var(--sp-4)}

/* legal body copy */
.legal{max-width:76ch}
.legal h2{font-size:clamp(20px,2.3vw,27px); letter-spacing:-0.03em; margin:clamp(34px,4vw,52px) 0 var(--sp-4);
  padding-top:var(--sp-5); border-top:1px solid var(--rule)}
.legal h2:first-child{margin-top:0; padding-top:0; border-top:0}
.legal h3{font-size:17px; font-weight:600; letter-spacing:-0.02em; margin:var(--sp-5) 0 var(--sp-2)}
.legal p{margin-bottom:var(--sp-4); color:var(--on-light-mute)}
.legal ul,.legal ol{margin:0 0 var(--sp-4); padding-left:0; list-style:none; display:grid; gap:10px}
.legal li{position:relative; padding-left:26px; color:var(--on-light-mute)}
.legal ul li::before{content:""; position:absolute; left:0; top:9px; width:8px; height:8px;
  border-radius:2px; border:1.5px solid var(--brand-deep)}
.legal ol{counter-reset:li}
.legal ol li{counter-increment:li}
.legal ol li::before{content:counter(li) "."; position:absolute; left:0; top:0;
  font-family:var(--mono); font-weight:700; color:var(--brand-deep)}
.legal a{color:var(--brand-deep); text-decoration:none; border-bottom:1px solid rgb(206 62 29 / 0.4)}
.legal a:hover{border-bottom-color:var(--brand-deep)}
.legal b,.legal strong{color:var(--on-light); font-weight:600}
.legal__toc{background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px); margin-bottom:clamp(34px,4vw,52px)}
.legal__toc p{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:0.11em;
  text-transform:uppercase; color:var(--on-light-mute); margin-bottom:var(--sp-4)}
.legal__toc ol{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:9px var(--sp-5)}
.legal__toc li{color:var(--on-light)}
.legal__toc a{border-bottom:0; font-weight:500}
.legal__toc a:hover{border-bottom:1px solid var(--brand-deep)}

/* placeholder callout — delete these from the page once the real wording is in */
.todo{background:rgb(231 77 39 / 0.08); border:1px dashed var(--brand-deep); border-radius:var(--r-md);
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-4)}
.todo p{margin:0; color:var(--brand-deeper); font-size:15px}
.todo b{color:var(--brand-deeper)}

/* confirmation page */
.done{max-width:660px; margin-inline:auto; text-align:center}
.done__mark{width:76px; height:76px; margin:0 auto var(--sp-5); border-radius:50%; display:grid; place-items:center;
  background:rgb(231 77 39 / 0.12); border:1px solid rgb(231 77 39 / 0.35); color:var(--brand-deep)}
.done h1{font-size:clamp(30px,4.4vw,48px); letter-spacing:-0.035em; margin-bottom:var(--sp-4)}
.done__lede{font-size:clamp(16.5px,1.7vw,19px); color:var(--on-light-mute); margin-bottom:var(--sp-6)}
.done__card{background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg);
  padding:clamp(22px,2.8vw,32px); text-align:left; margin-bottom:var(--sp-6);
  box-shadow:0 1px 2px rgb(8 11 15 / 0.05), 0 18px 40px -30px rgb(8 11 15 / 0.3)}
.done__card h2{font-size:19px; letter-spacing:-0.025em; margin-bottom:var(--sp-4); font-family:var(--sans); font-weight:600}
.done__steps{list-style:none; display:grid; gap:var(--sp-4); margin:0; padding:0}
.done__steps li{display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); align-items:start}
.done__n{font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.06em; color:#fff;
  background:var(--brand-deep); width:26px; height:26px; border-radius:50%; display:grid; place-items:center; margin-top:1px}
.done__steps p{font-size:15.5px; color:var(--on-light-mute)}
.done__steps b{display:block; color:var(--on-light); font-weight:600; font-size:16px; margin-bottom:2px}
.done__ref{font-family:var(--mono); font-size:14px; color:var(--on-light-mute);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:12px var(--sp-4); margin-bottom:var(--sp-6); word-break:break-all}
.done__ref b{color:var(--on-light)}
.done__actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center}
.done__help{margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--rule);
  font-size:15px; color:var(--on-light-mute)}
.done__help a{color:var(--brand-deep); text-decoration:none; border-bottom:1px solid rgb(206 62 29 / 0.4); font-weight:600}

/* footer */
.foot{background:oklch(0.125 0.014 248); color:var(--on-dark-mute); padding-block:var(--sp-7) var(--sp-6); font-size:14.5px}
.foot__top{display:flex; flex-wrap:wrap; gap:var(--sp-6); justify-content:space-between; align-items:flex-start;
  padding-bottom:var(--sp-6); border-bottom:1px solid var(--hairline-soft)}
.foot__top img{height:52px; width:auto}
.foot__links{display:flex; flex-wrap:wrap; gap:var(--sp-5); list-style:none}
.foot__links a{text-decoration:none}
.foot__links a:hover{color:var(--on-dark)}
.foot__bottom{display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between; padding-top:var(--sp-5);
  font-size:13.5px}
.foot__bottom a{color:var(--on-dark-mute); text-decoration:underline; text-underline-offset:2px}
.foot__bottom a:hover{color:var(--accent)}