/* ============================================================
   KAVODA TV — kavoda.tv
   Single-page marketing / credibility site.
   No external fonts, no trackers, no build step.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --ink-900:#06080B;
  --ink-800:#090C10;
  --ink-700:#0E1218;
  --ink-600:#141922;
  --ink-500:#1A2029;

  /* warmed cream + warm neutrals */
  --cream:#F7EFDC;
  --text:#EBE5D9;
  --muted:#A7A398;
  --muted-2:#8A877E;

  --accent:#FF5A3C;
  --accent-soft:#FF8B6B;
  --accent-deep:#D93A20;
  --accent-ink:#1B0803;
  --amber:#FFB067;
  --violet:#7B4BFF;
  --violet-soft:#A98CFF;

  --line:rgba(247,239,220,.10);
  --line-2:rgba(247,239,220,.18);
  --line-3:rgba(247,239,220,.28);

  --font-sans:Inter,"SF Pro Text",-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;

  --shell:1180px;
  --pad:clamp(20px,5vw,40px);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --head-h:64px;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,ol,figure,form,dl{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 18px)}

body{
  font-family:var(--font-sans);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.68;
  color:var(--text);
  background:var(--ink-800);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}

h1,h2,h3{
  font-family:var(--font-serif);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--cream);
  text-wrap:balance;
}
p{text-wrap:pretty}

::selection{background:var(--accent);color:#fff}

/* focus */
:focus-visible{
  outline:2px solid var(--accent-soft);
  outline-offset:3px;
  border-radius:4px;
}
.skip-link{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);
  z-index:200;padding:.75rem 1.25rem;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--accent);color:var(--accent-ink);font-weight:650;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- 3. Shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.75rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.15rem;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(255,90,60,.16);flex:none;
}

.btn{
  --btn-bg:transparent;--btn-fg:var(--cream);--btn-bd:var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.92em 1.6em;
  font-size:.9375rem;font-weight:640;letter-spacing:.005em;line-height:1;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:999px;
  transition:transform .22s var(--ease),background-color .22s var(--ease),
             border-color .22s var(--ease),box-shadow .22s var(--ease),color .22s var(--ease);
}
.btn-accent{
  --btn-bg:var(--accent);--btn-fg:var(--accent-ink);--btn-bd:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 10px 30px -12px rgba(255,90,60,.75);
}
.btn-accent:hover{background:var(--accent-soft);transform:translateY(-2px)}
.btn-ghost{background:rgba(242,234,211,.035)}
.btn-ghost:hover{background:rgba(242,234,211,.08);border-color:var(--line-3);transform:translateY(-2px)}
.btn-sm{padding:.7em 1.15em;font-size:.875rem}
.btn-icon{width:1.05em;height:1.05em;flex:none}
.btn:active{transform:translateY(0)}

/* section rhythm */
.section{padding-block:clamp(76px,10vw,132px);position:relative}
.section-alt{background:var(--ink-700);border-block:1px solid var(--line)}
.section-head{max-width:44rem;margin-bottom:clamp(40px,5vw,64px)}
.section-head h2{font-size:clamp(1.85rem,1.15rem + 2.6vw,3rem)}
.section-lede{margin-top:1.1rem;color:var(--muted);font-size:clamp(1.03rem,1rem + .3vw,1.1875rem)}

/* ---------- 4. Header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(11,14,18,.72);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-head{background:rgba(11,14,18,.55);-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px)}
}
.site-head.is-scrolled{background:rgba(9,12,16,.86);border-bottom-color:var(--line)}

.head-inner{
  min-height:var(--head-h);
  display:flex;align-items:center;gap:1rem;
}

.brand{
  display:flex;align-items:center;gap:.62rem;
  text-decoration:none;color:var(--cream);
  margin-right:auto;
  transition:opacity .2s var(--ease);
}
.brand:hover{opacity:.84}
.brand-mark{width:auto;height:30px;color:var(--cream);flex:none}
.brand-word{width:auto;height:13px;color:var(--cream);flex:none}
/* "TV" is part of the lockup, not a badge stuck beside it: cap-height matched
   to the wordmark, divided by a coral hairline, same optical weight. */
.brand-tv{
  display:flex;align-items:center;gap:.62rem;
  font-family:var(--font-sans);
  font-size:.75rem;font-weight:600;letter-spacing:.26em;text-indent:.26em;
  line-height:1;color:var(--cream);
}
.brand-tv::before{
  content:"";display:block;width:1px;height:15px;
  background:linear-gradient(180deg,transparent,var(--accent) 32%,var(--accent) 68%,transparent);
  opacity:.85;
}

.site-nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.9rem)}
.site-nav a:not(.btn){
  font-size:.9375rem;font-weight:520;color:var(--muted);text-decoration:none;
  padding:.35rem 0;position:relative;transition:color .2s var(--ease);
}
.site-nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.site-nav a:not(.btn):hover{color:var(--cream)}
.site-nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav-cta{margin-left:.4rem}

.nav-toggle{
  display:none;width:42px;height:42px;flex:none;
  align-items:center;justify-content:center;
  background:rgba(242,234,211,.05);border:1px solid var(--line-2);
  border-radius:10px;cursor:pointer;
}
.nav-toggle-bars{display:block;width:17px}
.nav-toggle-bars i{
  display:block;height:1.5px;background:var(--cream);border-radius:2px;
  transition:transform .28s var(--ease),opacity .2s var(--ease);
}
.nav-toggle-bars i:first-child{margin-bottom:5px}
.nav-toggle[aria-expanded="true"] i:first-child{transform:translateY(3.25px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:last-child{transform:translateY(-3.25px) rotate(-45deg)}

@media (max-width:800px){
  .nav-toggle{display:flex}
  .site-nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem var(--pad) 1.4rem;
    background:rgba(9,12,16,.97);
    border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    clip-path:inset(0 0 100% 0);
    opacity:0;pointer-events:none;
    transition:clip-path .38s var(--ease),opacity .25s var(--ease);
  }
  .site-nav.is-open{clip-path:inset(0 0 0 0);opacity:1;pointer-events:auto}
  .site-nav a:not(.btn){padding:.95rem .2rem;border-bottom:1px solid var(--line);font-size:1.0625rem;color:var(--text)}
  .site-nav a:not(.btn)::after{display:none}
  .nav-cta{margin:1.1rem 0 0;align-self:flex-start}
}

/* ---------- 5. Hero ----------
   MOTIF: rising sun. A soft radial disc sitting on a horizon, coral core →
   violet mid → black. Deliberately NO discrete rays: a rayed rising sun is the
   Imperial Japanese flag, which is offensive across Korea and China — the
   exact audience this service is built for. The disc alone reads as sunrise. */
.hero{
  position:relative;isolation:isolate;
  padding-block:clamp(34px,4.4vw,54px) clamp(44px,5.5vw,70px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-canvas{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

.sun{
  position:absolute;left:50%;bottom:-42%;
  width:min(1020px,124vw);aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,122,74,.50) 0%,
      rgba(255,90,60,.34) 28%,
      rgba(190,68,116,.22) 50%,
      rgba(123,75,255,.15) 68%,
      rgba(123,75,255,.05) 84%,
      transparent 93%);
  filter:blur(26px);
}
.sun-core{
  position:absolute;left:50%;bottom:-30%;
  width:min(460px,58vw);aspect-ratio:1;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(255,178,132,.34),rgba(255,90,60,.16) 56%,transparent 74%);
  filter:blur(14px);
}
/* keep the sky above the sun dark so display type stays high-contrast */
.hero-canvas::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,12,16,.86) 0%,
    rgba(9,12,16,.58) 26%,
    rgba(9,12,16,.20) 46%,
    rgba(9,12,16,0) 64%);
}
.horizon{
  position:absolute;left:0;right:0;bottom:22%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(247,239,220,.14) 22%,rgba(255,120,80,.34) 50%,rgba(247,239,220,.14) 78%,transparent);
}
.hero-rails{
  position:absolute;inset:0;
  background-image:repeating-linear-gradient(90deg,rgba(247,239,220,.05) 0 1px,transparent 1px 108px);
  -webkit-mask-image:radial-gradient(120% 76% at 50% 40%,#000 8%,transparent 74%);
  mask-image:radial-gradient(120% 76% at 50% 40%,#000 8%,transparent 74%);
}
.grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* shorter hero on phones — lift the sun and lighten the vignette so the
   motif still reads instead of being cropped away */
@media (max-width:640px){
  .sun{bottom:-30%;width:158vw}
  .sun-core{bottom:-18%;width:74vw}
  .horizon{bottom:19%}
  .hero-canvas::after{
    background:linear-gradient(180deg,
      rgba(9,12,16,.84) 0%,
      rgba(9,12,16,.52) 24%,
      rgba(9,12,16,.14) 48%,
      rgba(9,12,16,0) 68%);
  }
}

.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center}

/* status pill */
.hero-status{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.42em .9em;border-radius:999px;
  border:1px solid rgba(255,90,60,.3);background:rgba(255,90,60,.08);
  font-size:.6875rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-soft);
}
.hero-status .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(255,90,60,.2)}

/* the mark now supports the headline rather than leading */
.hero-mark{
  width:auto;height:clamp(48px,6.4vw,64px);
  margin-top:clamp(20px,2.6vw,30px);
  color:var(--cream);
  filter:drop-shadow(0 10px 30px rgba(255,90,60,.28));
}

.hero-title{
  margin-top:clamp(18px,2.2vw,26px);
  font-size:clamp(2.1rem,1.05rem + 3.9vw,3.85rem);
  line-height:1.06;letter-spacing:-.025em;
  max-width:17ch;
}
.hero-title em{font-style:italic;color:var(--accent-soft)}
.hero-title-sub{
  display:block;margin-top:.55em;
  font-family:var(--font-sans);
  font-size:clamp(1rem,.9rem + .45vw,1.2rem);
  font-weight:450;line-height:1.45;letter-spacing:0;
  color:var(--muted);
}

.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:clamp(22px,2.8vw,32px)}

.hero-facts{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;margin-top:clamp(32px,4.4vw,52px);width:100%;max-width:860px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;backdrop-filter:blur(2px);
}
.hero-facts li{
  display:flex;flex-direction:column;gap:.35rem;
  padding:.95rem 1rem;background:rgba(9,12,16,.72);
  text-align:left;
}
.hero-facts span{font-size:.6875rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.hero-facts strong{font-size:.9375rem;font-weight:600;color:var(--cream)}
@media (max-width:640px){
  .hero-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:520px){
  .eyebrow{font-size:.6875rem;letter-spacing:.11em}
  .hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:330px;margin-inline:auto}
  .hero-actions .btn{width:100%}
}

/* ---------- 6. Cards ---------- */
.cards{
  display:grid;gap:clamp(16px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(276px,1fr));
}
/* keep icon / title / body on shared baselines — only while cards sit side by side */
@media (min-width:900px){
  @supports (grid-template-rows:subgrid){
    .cards{grid-template-rows:auto auto auto}
    .card{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
  }
}
.card{
  position:relative;isolation:isolate;
  padding:clamp(26px,2.4vw,34px);
  background:linear-gradient(168deg,rgba(26,32,43,.85),rgba(15,19,26,.85));
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.card::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(80% 60% at 20% 0%,rgba(255,90,60,.15),transparent 70%);
  opacity:0;transition:opacity .35s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.card:hover::before{opacity:1}
.card h3{font-size:1.28rem;margin-bottom:.7rem;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:.9875rem}

.card-icon{
  width:52px;height:52px;margin-bottom:1.35rem;
  display:grid;place-items:center;
  background:rgba(242,234,211,.045);
  border:1px solid var(--line);border-radius:14px;
}
.card-icon svg{width:27px;height:27px}
.s-fill{fill:var(--cream);opacity:.9}
.s-fill-c{fill:var(--cream);opacity:.75}
.s-line{fill:none;stroke:var(--cream);stroke-width:2.1;opacity:.62}
.s-line-stroke{fill:none;stroke:var(--cream);stroke-width:2.1;stroke-linecap:round}
.s-accent{fill:var(--accent)}
.s-accent-stroke{fill:none;stroke:var(--accent);stroke-width:2.1;stroke-linecap:round;opacity:.9}

/* ---------- 7. TV mockup (10-foot UI) ----------
   Pure HTML/CSS. Every tile is a gradient — no titles, no artwork, no logos. */
.tv{margin-top:clamp(44px,5.5vw,72px);position:relative}
.tv::before{ /* the sun motif again, smaller, behind the set */
  content:"";position:absolute;left:50%;top:-8%;
  width:min(760px,90%);aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(255,90,60,.16),rgba(123,75,255,.10) 52%,transparent 72%);
  filter:blur(40px);
}
.tv-frame{
  padding:clamp(8px,1vw,13px);
  background:linear-gradient(160deg,#232A34,#0D1116 55%,#171C24);
  border-radius:clamp(14px,1.6vw,22px);
  box-shadow:0 2px 0 rgba(247,239,220,.07) inset,0 44px 90px -46px rgba(0,0,0,.95),
             0 0 90px -30px rgba(255,90,60,.28);
}
.tv-screen{
  position:relative;overflow:hidden;
  border-radius:clamp(8px,1vw,13px);
  background:radial-gradient(120% 90% at 50% 0%,#141A24,#080B0F 70%);
  border:1px solid rgba(0,0,0,.6);
  padding:clamp(14px,1.9vw,26px);
  display:flex;flex-direction:column;gap:clamp(12px,1.5vw,20px);
  aspect-ratio:16/9.6;
}
.tv-stand{
  width:clamp(90px,12%,150px);height:8px;margin:0 auto;
  background:linear-gradient(180deg,#1D242E,#0C1014);
  border-radius:0 0 8px 8px;
}

/* screen chrome */
.ui-top{display:flex;align-items:center;gap:.8rem;flex:none}
.ui-brand{display:flex;align-items:center;gap:.42rem;color:var(--cream);opacity:.95}
.ui-brand svg{height:clamp(11px,1.25vw,16px);width:auto}
.ui-brand .ui-tv{
  font-size:clamp(.4rem,.5vw,.56rem);font-weight:700;letter-spacing:.2em;
  color:var(--accent);line-height:1;
}
.ui-tabs{display:flex;gap:clamp(.7rem,1.3vw,1.3rem);margin-left:clamp(.6rem,1.6vw,1.6rem)}
.ui-tabs span{
  font-size:clamp(.5rem,.72vw,.72rem);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap;
}
.ui-tabs .on{color:var(--cream);position:relative}
.ui-tabs .on::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;
  background:var(--accent);border-radius:2px;
}
.ui-clock{margin-left:auto;font-size:clamp(.5rem,.72vw,.72rem);color:var(--muted-2);white-space:nowrap}

/* channel guide rows */
/* rows split the screen height evenly and tiles size off row height, so the
   guide always fills a true 16:9 panel with no dead space above the now bar */
.ui-rows{display:flex;flex-direction:column;gap:clamp(9px,1.15vw,16px);flex:1 1 auto;min-height:0}
.ui-row{display:flex;flex-direction:column;gap:clamp(5px,.6vw,8px);min-width:0;flex:1 1 0;min-height:0}
.ui-row h4{
  font-family:var(--font-sans);
  font-size:clamp(.52rem,.75vw,.78rem);font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin:0;white-space:nowrap;
}
.ui-tiles{display:flex;gap:clamp(6px,.8vw,11px);overflow:hidden;flex:1 1 auto;min-height:0}
.ui-tile{
  flex:0 0 auto;height:100%;width:auto;
  aspect-ratio:16/9;border-radius:clamp(4px,.5vw,7px);
  position:relative;overflow:hidden;
  border:1px solid rgba(247,239,220,.09);
}
.ui-tile::after{ /* generic placeholder art — abstract gradient only */
  content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,var(--t1),var(--t2));
  opacity:.92;
}
.ui-tile.focus{
  outline:2px solid var(--accent);outline-offset:2px;
  transform:scale(1.045);
  box-shadow:0 0 26px -6px rgba(255,90,60,.75);
  z-index:2;
}
/* tile palettes — abstract, brand-derived, deliberately not evocative of any title */
.t-a{--t1:#3B2350;--t2:#8E3A6B}
.t-b{--t1:#123246;--t2:#2E7F86}
.t-c{--t1:#4A1E2A;--t2:#C05341}
.t-d{--t1:#1B2440;--t2:#5B4BC4}
.t-e{--t1:#2E1A38;--t2:#6C3E86}
.t-f{--t1:#3A2416;--t2:#B0703A}
.t-g{--t1:#14262E;--t2:#3D6E62}
.t-h{--t1:#301C2C;--t2:#8A4A70}

/* now-playing bar */
.ui-now{
  flex:none;display:flex;align-items:center;gap:clamp(.5rem,1vw,.9rem);
  padding:clamp(7px,.9vw,12px) clamp(9px,1.1vw,15px);
  border-radius:clamp(6px,.7vw,10px);
  background:linear-gradient(90deg,rgba(255,90,60,.16),rgba(123,75,255,.10));
  border:1px solid rgba(255,90,60,.28);
}
.ui-play{
  flex:none;width:clamp(16px,2vw,26px);aspect-ratio:1;border-radius:50%;
  background:var(--accent);display:grid;place-items:center;
  box-shadow:0 0 18px -4px rgba(255,90,60,.9);
}
.ui-play svg{width:42%;height:42%;fill:var(--accent-ink)}
.ui-now-meta{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.ui-now-label{
  font-size:clamp(.45rem,.62vw,.62rem);font-weight:650;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-soft);
}
.ui-bar{height:clamp(3px,.4vw,5px);border-radius:99px;background:rgba(247,239,220,.16);overflow:hidden}
.ui-bar i{display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--amber))}
.ui-now-time{font-size:clamp(.45rem,.62vw,.62rem);color:var(--muted-2);white-space:nowrap;flex:none}

.tv figcaption{
  margin-top:1.1rem;font-size:.8125rem;color:var(--muted-2);text-align:center;
  max-width:56ch;margin-inline:auto;
}

@media (max-width:640px){
  .tv-screen{aspect-ratio:auto;gap:12px}
  .ui-tabs{display:none}
  .ui-row{flex:0 0 auto}
  .ui-tiles{flex:0 0 auto}
  .ui-tile{flex:0 0 84px;height:auto;width:84px}
}

/* ---------- 8. Partner terms ---------- */
.terms{
  display:grid;gap:1px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
@media (max-width:760px){.terms{grid-template-columns:1fr}}
.term{
  padding:clamp(28px,2.8vw,40px);
  background:var(--ink-700);
  transition:background-color .3s var(--ease);
}
.term:hover{background:var(--ink-600)}
.term-no{
  display:block;margin-bottom:1rem;
  font-family:var(--font-sans);
  font-size:.75rem;font-weight:700;letter-spacing:.16em;
  color:var(--accent);
}
.term h3{font-size:1.22rem;margin-bottom:.65rem}
.term p{color:var(--muted);font-size:.9875rem}
.term-more{margin-top:.9rem}
.term-more a{
  font-size:.875rem;font-weight:600;color:var(--accent-soft);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .2s var(--ease);
}
.term-more a:hover{border-bottom-color:currentColor}

.steps{
  margin-top:clamp(30px,3.6vw,44px);
  padding:clamp(26px,2.6vw,36px);
  border:1px dashed var(--line-2);border-radius:var(--r-lg);
}
.steps-title{
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:1.4rem;
}
.steps-list{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps-list li{display:flex;gap:.9rem;align-items:flex-start;font-size:.9375rem;color:var(--muted)}
.steps-list strong{color:var(--cream);font-weight:620}
.step-n{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  font-size:.75rem;font-weight:700;
  color:var(--accent);border:1px solid rgba(255,90,60,.4);
  background:rgba(255,90,60,.08);
}

.cta-card{
  margin-top:clamp(30px,3.6vw,44px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.6rem;
  padding:clamp(28px,3vw,42px);
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 160% at 0% 0%,rgba(255,90,60,.16),transparent 58%),
    linear-gradient(150deg,rgba(26,32,43,.95),rgba(11,14,18,.95));
  border:1px solid var(--line-2);
}
.cta-card > div{max-width:46ch}
.cta-card h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.65rem);margin-bottom:.55rem}
.cta-card p{color:var(--muted);font-size:.9875rem}

/* ---------- 9. About ---------- */
.about-grid{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-main h2{font-size:clamp(1.85rem,1.15rem + 2.6vw,3rem);margin-bottom:1.15rem}
.about-lede{font-size:clamp(1.03rem,1rem + .3vw,1.1875rem);color:var(--cream);margin-bottom:1.15rem}
.about-main p + p{margin-top:1.05rem;color:var(--muted)}
.about-main strong{color:var(--cream);font-weight:620}

.platforms-label{
  margin-top:2.2rem !important;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2) !important;
}
.platforms{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.9rem}
.platforms li{
  padding:.5rem .95rem;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(242,234,211,.035);
  font-size:.875rem;font-weight:550;color:var(--cream);
}

.about-status{
  padding:clamp(26px,2.6vw,34px);
  background:var(--ink-700);border:1px solid var(--line);border-radius:var(--r-lg);
  position:sticky;top:calc(var(--head-h) + 24px);
}
@media (max-width:900px){.about-status{position:static}}
.about-status h3{font-size:1.15rem;margin-bottom:1.3rem}
.status-list{display:grid;gap:.9rem}
.status-list li{
  display:flex;gap:.75rem;align-items:flex-start;
  font-size:.9375rem;color:var(--muted);
  padding-bottom:.9rem;border-bottom:1px solid var(--line);
}
.status-list li:last-child{border-bottom:0;padding-bottom:0}
.pill{
  flex:none;min-width:52px;text-align:center;
  padding:.25rem .55rem;border-radius:6px;
  font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);background:rgba(242,234,211,.06);border:1px solid var(--line);
}
.pill-live{color:var(--accent);background:rgba(255,90,60,.1);border-color:rgba(255,90,60,.32)}
.status-note{margin-top:1.4rem;font-size:.8125rem;color:var(--muted-2);line-height:1.6}

/* ---------- 9b. Track record ----------
   A typographic credibility wall. Deliberately NOT third-party logos: these
   are the founder's past engagements, not KAVODA TV partners, and reproducing
   the marks of rights-holders we are about to pitch would imply a deal that
   does not exist. Names as text, relationships stated, disclaimer attached. */
.track{
  margin-top:clamp(48px,6vw,76px);
  padding:clamp(28px,3vw,44px);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(110% 150% at 100% 0%,rgba(255,90,60,.09),transparent 58%),
    linear-gradient(160deg,rgba(26,32,43,.7),rgba(15,19,26,.7));
}
.track-head{max-width:56ch;margin-bottom:clamp(26px,3vw,36px)}
.track-head h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);margin-bottom:.75rem}
.track-lede{color:var(--muted);font-size:.9875rem}

/* the names carry the weight — set as wordmarks, hairline-divided */
.track-names{
  display:grid;grid-template-columns:1fr;
  border-block:1px solid var(--line);
}
.track-names li{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(72px,7.5vw,98px);
  padding:1rem .8rem;
  font-family:var(--font-serif);
  font-size:clamp(1.15rem,.98rem + .7vw,1.5rem);
  font-weight:600;line-height:1.2;letter-spacing:-.01em;
  color:var(--cream);text-align:center;text-wrap:balance;
}
/* hairline between columns, never at the start of a row */
/* Logo wall.
   The text name is what renders by default; main.js swaps in the image only
   once it has actually loaded. So a missing or not-yet-added logo file shows
   the wordmark instead of a broken image, and the block still works with JS
   off. Drop files into assets/logos/ to turn each one into a real logo. */
.track-logo{
  display:none;
  height:clamp(22px,2.6vw,32px);width:auto;max-width:100%;
  /* normalise mixed full-colour marks into one cream-toned wall */
  filter:brightness(0) invert(1);
  opacity:.86;
  transition:opacity .25s var(--ease);
}
.track-names li:hover .track-logo{opacity:1}
.has-logo .track-logo{display:block}
.has-logo .track-fallback{display:none}
/* add class="track-names is-colour" in index.html to keep brand colours */
.track-names.is-colour .track-logo{filter:none;opacity:1}

.track-names li::before{
  content:"";position:absolute;left:0;top:18%;bottom:18%;
  width:1px;background:var(--line);
}

/* one column — stack, horizontal rules only */
@media (max-width:559px){
  .track-names li::before{display:none}
  .track-names li + li{border-top:1px solid var(--line)}
}
/* two columns — the fifth name takes the full width so no row is orphaned */
@media (min-width:560px) and (max-width:959px){
  .track-names{grid-template-columns:repeat(2,1fr)}
  .track-names li:nth-child(2n+1)::before{display:none}
  .track-names li:nth-child(n+3){border-top:1px solid var(--line)}
  .track-names li:nth-child(5){grid-column:1 / -1}
}
/* five across on desktop */
@media (min-width:960px){
  .track-names{grid-template-columns:repeat(5,1fr)}
  .track-names li:first-child::before{display:none}
}

.track-note{
  margin-top:clamp(20px,2.2vw,26px);
  font-size:.8125rem;line-height:1.65;color:var(--muted-2);max-width:74ch;
}
.track-note strong{color:var(--muted);font-weight:650}

/* ---------- 10. Updates / signup ---------- */
.updates{border-top:1px solid var(--line);background:var(--ink-700);position:relative;overflow:hidden}
.updates::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 82% 10%,rgba(255,90,60,.12),transparent 62%);
}
.updates-inner{
  position:relative;
  display:grid;gap:clamp(30px,4vw,60px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
@media (max-width:860px){.updates-inner{grid-template-columns:1fr}}
.updates h2{font-size:clamp(1.75rem,1.15rem + 2.2vw,2.6rem)}
.updates-copy p{margin-top:1.05rem;color:var(--muted)}

.signup{width:100%}
.signup-row{display:flex;gap:.7rem;align-items:flex-end;flex-wrap:wrap}
.signup-field{flex:1 1 260px;display:flex;flex-direction:column;gap:.5rem}
.signup-field label{
  font-size:.75rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
}
.signup input[type="email"]{
  width:100%;padding:.95rem 1.15rem;
  background:rgba(7,9,12,.6);
  border:1px solid var(--line-2);border-radius:999px;
  color:var(--cream);font-size:1rem;
  transition:border-color .22s var(--ease),background-color .22s var(--ease);
}
.signup input[type="email"]::placeholder{color:var(--muted-2)}
.signup input[type="email"]:hover{border-color:var(--line-3)}
.signup input[type="email"]:focus{border-color:var(--accent);background:rgba(7,9,12,.85)}
.signup input[type="email"]:focus-visible{outline-offset:2px}
.signup .btn{flex:0 0 auto;padding-block:1rem}
.signup-status{
  min-height:1.4em;margin-top:.85rem;font-size:.875rem;color:var(--muted);
}
.signup-status.is-ok{color:var(--accent-soft)}
.signup-status.is-err{color:#FF9A85}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 11. Footer ---------- */
.site-foot{
  background:var(--ink-900);border-top:1px solid var(--line);
  padding-block:clamp(52px,6vw,76px) 0;
}
.foot-inner{
  display:grid;gap:clamp(34px,4vw,56px);
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr);
}
@media (max-width:820px){.foot-inner{grid-template-columns:1fr}}
.brand-foot{margin-right:0}
.foot-tag{margin-top:1.15rem;color:var(--muted);font-size:.9375rem;max-width:34ch}

.foot-cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
/* the contact column carries full addresses, so it needs the extra width */
@media (min-width:620px){.foot-cols{grid-template-columns:1.4fr .85fr 1fr}}
.foot-col h2{
  font-family:var(--font-sans);
  font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:1rem;
}
.foot-col ul{display:grid;gap:.65rem}
.foot-col a{
  font-size:.9375rem;color:var(--text);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.foot-col a:hover{color:var(--accent-soft);border-bottom-color:currentColor}
.foot-legal li{font-size:.9375rem;color:var(--muted)}
.foot-legal .nowrap{white-space:nowrap}

/* labelled address list — a licensor should not have to guess which inbox */
.foot-contacts{display:grid;gap:1rem}
.foot-contacts li{display:flex;flex-direction:column;gap:.15rem}
.foot-contacts span{
  font-size:.75rem;letter-spacing:.02em;color:var(--muted-2);
}
.foot-contacts a{width:fit-content}

.foot-base{
  display:flex;flex-wrap:wrap;gap:.85rem 2rem;align-items:baseline;justify-content:space-between;
  margin-top:clamp(40px,5vw,60px);padding-block:1.7rem;
  border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--muted-2);
}
.foot-note{max-width:58ch}

/* ---------- 12. Motion (scroll reveal only) ---------- */
.reveal{opacity:0;transform:translateY(22px)}
.js-on .reveal{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
html:not(.js-on) .reveal{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 13. Print ---------- */
@media print{
  .site-head,.hero-canvas,.nav-toggle,.signup,.guide{display:none}
  body{background:#fff;color:#000}
  h1,h2,h3{color:#000}
}