/* ===== TNN Streaming Solutions — site shell (proposal) ===== */
:root{
  color-scheme: light;
  --ink:#110C2E;          /* deep indigo, header/footer/dark bands */
  --ink-2:#1B1450;
  --ink-line:#2E2670;
  --violet:#5B45E0;       /* brand violet (matches current site buttons) */
  --violet-2:#7C5CF0;
  --blue:#3F8CF0;         /* second stop of the brand gradient */
  --on-air:#35D386;
  --paper:#F6F5FD;        /* light sections, hue-biased toward the brand */
  --white:#FFFFFF;
  --text:#1B1740;
  --text-2:#524D7A;
  --text-3:#7C77A3;
  --line:#E3E0F5;
  --on-ink:#F4F2FC;
  --on-ink-2:#B6B0DB;
  --max:1180px;
  --head:'Montserrat', 'Segoe UI', Arial, sans-serif;
  --body:'Fira Sans', 'Segoe UI', Arial, sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--head); margin:0; text-wrap:balance; letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; cursor:pointer; }
img{ max-width:100%; }
.wrap{ max-width:var(--max); margin:0 auto; padding-inline:24px; }
@media (max-width:640px){ .wrap{ padding-inline:18px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--head); font-weight:600; font-size:14.5px;
  padding:13px 22px; border-radius:10px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:transform .15s, background .15s, border-color .15s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--violet); color:#fff; }
.btn-primary:hover{ background:#6a54ec; }
.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.btn-ghost:hover{ border-color:#fff; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-outline{ background:transparent; color:var(--violet); border-color:var(--violet); }
.btn-small{ padding:9px 16px; font-size:13.5px; border-radius:9px; }
.btn:focus-visible, a:focus-visible, button:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:rgba(17,12,46,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ink-line);
  color:var(--on-ink);
}
.header-inner{
  max-width:var(--max); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:28px;
}
@media (max-width:640px){ .header-inner{ padding:10px 18px; gap:12px; } }
.logo{
  display:flex; align-items:flex-end; gap:6px; text-decoration:none; color:#fff; flex-shrink:0;
  background:none; border:0; padding:0;
}
.logo .tnn{ font-family:var(--head); font-weight:800; font-size:30px; letter-spacing:-0.04em; line-height:1; }
.logo .tag{ font-family:var(--body); font-style:italic; font-size:11.5px; line-height:1.05; color:var(--on-ink-2); padding-bottom:3px; }
.nav{ display:flex; align-items:center; gap:4px; margin-left:8px; }
.nav button, .nav a{
  background:none; border:0; color:var(--on-ink); font-family:var(--head); font-weight:500; font-size:14.5px;
  padding:10px 14px; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.nav button:hover, .nav a:hover, .nav .active{ background:rgba(255,255,255,.08); }
.nav .active{ color:#fff; }
.nav .caret{ width:10px; height:10px; transition:transform .2s; }
.nav-prod[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.header-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.lang{ display:flex; background:rgba(255,255,255,.08); border-radius:999px; padding:3px; }
.lang button{
  background:none; border:0; color:var(--on-ink-2); font-family:var(--head); font-weight:600; font-size:12px;
  padding:5px 10px; border-radius:999px;
}
.lang button.active{ background:var(--violet); color:#fff; }
.burger{ display:none; background:none; border:1px solid var(--ink-line); border-radius:8px; color:#fff; padding:7px 9px; }
.nav-wrap{ display:contents; }

/* mega menu */
.mega{
  position:absolute; left:0; right:0; top:100%;
  background:var(--ink); border-bottom:1px solid var(--ink-line);
  box-shadow:0 24px 40px rgba(0,0,0,.35);
  display:none;
}
.mega.open{ display:block; }
.mega-inner{ max-width:var(--max); margin:0 auto; padding:22px 24px 26px; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px 18px; }
.mega a{
  display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:var(--on-ink);
  padding:14px; border-radius:12px; cursor:pointer;
}
.mega a:hover{ background:rgba(255,255,255,.06); }
.mega .mi{ width:38px; height:38px; flex-shrink:0; border-radius:10px; background:var(--ink-2); display:grid; place-items:center; color:var(--violet-2); }
.mega .mi svg{ width:20px; height:20px; }
.mega strong{ display:flex; align-items:center; gap:8px; font-family:var(--head); font-size:14.5px; font-weight:600; }
.mega span.d{ display:block; font-size:13px; color:var(--on-ink-2); line-height:1.4; margin-top:2px; }
.badge-new{
  font-family:var(--head); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--on-air); color:#06251A; border-radius:999px; padding:2px 8px;
}
@media (max-width:980px){
  .burger{ display:inline-flex; }
  .header-right .btn-small{ display:none; }
  .nav-wrap{
    display:none; position:absolute; left:0; right:0; top:100%; background:var(--ink);
    border-bottom:1px solid var(--ink-line); padding:10px 18px 18px; max-height:calc(100vh - 60px); overflow:auto;
  }
  .nav-wrap.open{ display:block; }
  .nav{ flex-direction:column; align-items:stretch; margin:0; }
  .nav button, .nav a{ width:100%; justify-content:space-between; font-size:16px; padding:13px 12px; }
  .mega{ position:static; box-shadow:none; border:0; background:transparent; }
  .mega-inner{ grid-template-columns:1fr; padding:0 0 8px 8px; }
  .nav-wrap .btn-small{ display:inline-flex; margin-top:10px; width:100%; }
}

/* ---------- views ---------- */

/* ---------- common sections ---------- */
section.s{ padding-block:84px; }
@media (max-width:640px){ section.s{ padding-block:60px; } }
.s-paper{ background:var(--paper); }
.s-ink{ background:var(--ink); color:var(--on-ink); }
.eyebrow{
  font-family:var(--head); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--violet); margin-bottom:12px;
}
.s-ink .eyebrow{ color:var(--on-air); }
.h2{ font-size:clamp(28px, 3.4vw, 40px); font-weight:700; line-height:1.15; }
.lede{ font-size:18px; color:var(--text-2); max-width:62ch; margin-top:14px; }
.s-ink .lede{ color:var(--on-ink-2); }
.s-head{ margin-bottom:44px; }
.s-head.center{ text-align:center; }
.s-head.center .lede{ margin-inline:auto; }

/* ---------- hero (home) ---------- */
.hero{
  background:
    radial-gradient(900px 500px at 82% 10%, rgba(91,69,224,.55), transparent 60%),
    radial-gradient(700px 420px at 8% 100%, rgba(63,140,240,.28), transparent 60%),
    var(--ink);
  color:var(--on-ink); position:relative; overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding-block:76px 64px; }
@media (max-width:940px){ .hero-grid{ grid-template-columns:1fr; padding-block:48px 40px; } }
.hero h1{ font-size:clamp(34px, 4.6vw, 56px); line-height:1.08; font-weight:700; color:#fff; }
.hero h1 .grad{
  background:linear-gradient(90deg, #9d8bff, #5fb0ff); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.sub{ font-size:19px; color:var(--on-ink-2); margin-top:20px; max-width:54ch; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }

/* device constellation (CSS-drawn, no third-party imagery) */
.stage{ position:relative; aspect-ratio:1.18/1; width:100%; max-width:560px; margin-inline:auto; }
.tv{
  position:absolute; left:0; top:4%; width:86%; aspect-ratio:16/10;
  background:#0a0723; border:1px solid var(--ink-line); border-radius:14px; padding:2.2% 2.2% 2.2%;
  box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.03);
}
.tv-screen{ width:100%; height:100%; border-radius:8px; overflow:hidden; display:grid; grid-template-columns:9% 1fr; background:#130d3a; }
.tv-side{ background:#0e0a2b; display:flex; flex-direction:column; align-items:center; gap:14%; padding-top:18%; }
.tv-side i{ width:42%; aspect-ratio:1; border-radius:5px; background:#2a2268; display:block; }
.tv-side i:first-child{ background:var(--violet-2); }
.tv-main{ padding:4% 4% 3%; display:flex; flex-direction:column; gap:5%; min-width:0; }
.tv-hero{
  flex:1.5; border-radius:8px; position:relative; overflow:hidden;
  background:linear-gradient(120deg, #5B45E0 0%, #3F8CF0 55%, #35D3A8 120%);
}
.tv-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,7,35,.75), transparent 60%);
}
.tv-hero b{ position:absolute; left:6%; bottom:10%; z-index:1; font-family:var(--head); font-size:clamp(9px,1.3vw,14px); color:#fff; }
.tv-hero em{
  position:absolute; left:6%; top:10%; z-index:1; font-style:normal; font-family:var(--head); font-weight:700;
  font-size:clamp(7px,.9vw,10px); letter-spacing:.1em; background:#fff; color:var(--ink); padding:2px 7px; border-radius:99px;
}
.tv-row{ flex:1; display:grid; grid-template-columns:repeat(4,1fr); gap:4%; }
.tv-row i{ border-radius:6px; display:block; }
.tv-row i:nth-child(1){ background:linear-gradient(160deg,#7C5CF0,#2a2268); }
.tv-row i:nth-child(2){ background:linear-gradient(160deg,#3F8CF0,#1b1450); }
.tv-row i:nth-child(3){ background:linear-gradient(160deg,#a56bff,#3a1f7a); }
.tv-row i:nth-child(4){ background:linear-gradient(160deg,#35D3A8,#134a52); }
.phone{
  position:absolute; right:0; bottom:0; width:26%; aspect-ratio:9/18.5;
  background:#0a0723; border:1px solid var(--ink-line); border-radius:22px; padding:3%;
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.phone-screen{ width:100%; height:100%; border-radius:16px; background:#130d3a; padding:9% 8%; display:flex; flex-direction:column; gap:6%; }
.phone-screen .bar{ height:7%; border-radius:99px; background:#2a2268; width:55%; }
.phone-screen .p1{ flex:1.2; border-radius:8px; background:linear-gradient(150deg,#5B45E0,#3F8CF0); }
.phone-screen .pg{ flex:1; display:grid; grid-template-columns:1fr 1fr; gap:8%; }
.phone-screen .pg i{ border-radius:6px; background:#2a2268; display:block; }
.phone-screen .pg i:nth-child(2){ background:#3a2f86; }
.chip-float{
  position:absolute; z-index:2; display:flex; align-items:center; gap:8px;
  background:rgba(27,20,80,.92); border:1px solid var(--ink-line); border-radius:999px; padding:8px 14px;
  font-family:var(--head); font-weight:600; font-size:12px; color:#fff; box-shadow:0 12px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
.chip-float .dot{ width:8px; height:8px; border-radius:50%; background:var(--on-air); box-shadow:0 0 0 3px rgba(53,211,134,.2); }
.chip-1{ left:-2%; bottom:14%; }
.chip-2{ right:6%; top:0; }
.chip-3{ left:32%; bottom:-3%; }
@media (max-width:520px){ .chip-float{ font-size:11px; padding:6px 10px; } .chip-1{ left:0; } }

/* audience split */
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-bottom:64px; }
@media (max-width:760px){ .paths{ grid-template-columns:1fr; } }
.path{
  display:flex; flex-direction:column; gap:8px; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--ink-line); border-radius:16px; padding:24px 26px;
  color:var(--on-ink); transition:background .2s, border-color .2s, transform .2s;
}
.path:hover{ background:rgba(255,255,255,.09); border-color:var(--violet-2); transform:translateY(-2px); }
.path .k{ font-family:var(--head); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-2); display:flex; gap:10px; align-items:center; }
.path h3{ font-size:21px; font-weight:600; color:#fff; line-height:1.25; }
.path p{ font-size:15px; color:var(--on-ink-2); }
.path .go{ font-family:var(--head); font-weight:600; font-size:14px; color:#b9acff; margin-top:6px; }

/* ---------- product cards ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .pgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pgrid{ grid-template-columns:1fr; } }
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:12px; transition:box-shadow .2s, transform .2s, border-color .2s;
}
.pcard:hover{ box-shadow:0 18px 40px rgba(60,40,160,.12); transform:translateY(-3px); border-color:#cfc8f5; }
.pcard .pi{ width:46px; height:46px; border-radius:12px; background:var(--paper); color:var(--violet); display:grid; place-items:center; }
.pcard .pi svg{ width:24px; height:24px; }
.pcard h3{ font-size:19px; font-weight:700; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pcard p{ font-size:15.5px; color:var(--text-2); flex:1; }
.pcard .more{ font-family:var(--head); font-weight:600; font-size:14px; color:var(--violet); }
.pcard.featured{ background:var(--ink); border-color:var(--ink); color:var(--on-ink); position:relative; overflow:hidden; }
.pcard.featured h3{ color:#fff; }
.pcard.featured p{ color:var(--on-ink-2); }
.pcard.featured .pi{ background:var(--ink-2); color:var(--on-air); }
.pcard.featured .more{ color:#b9acff; }
.pcard.featured:hover{ border-color:var(--violet-2); }

/* media server spotlight band (home) */
.spot{ display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; }
@media (max-width:900px){ .spot{ grid-template-columns:1fr; gap:32px; } }
.spot h2{ color:#fff; }
.spot ul{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.spot li{ display:flex; gap:12px; color:var(--on-ink); font-size:16px; }
.spot li svg{ width:20px; height:20px; flex-shrink:0; margin-top:3px; color:var(--on-air); }
.spot-shot{
  border:1px solid var(--ink-line); border-radius:16px; overflow:hidden; background:#0a0723;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
}
.spot-shot .bar{ display:flex; gap:7px; padding:11px 14px; background:#0e0a2b; border-bottom:1px solid var(--ink-line); }
.spot-shot .bar i{ width:9px; height:9px; border-radius:50%; background:#2f2770; display:block; }
.spot-shot img{ display:block; width:100%; height:auto; }

/* capabilities */
.caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; }
@media (max-width:980px){ .caps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .caps{ grid-template-columns:1fr; } }
.cap .ci{ width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid var(--line); color:var(--violet); display:grid; place-items:center; margin-bottom:14px; }
.cap .ci svg{ width:22px; height:22px; }
.cap h4{ font-size:16.5px; font-weight:700; margin-bottom:6px; }
.cap p{ font-size:15px; color:var(--text-2); }

/* sectors */
.chips{ display:flex; flex-wrap:wrap; gap:12px; }
.chips > span{
  font-family:var(--head); font-weight:500; font-size:15px; padding:11px 20px; border-radius:999px;
  border:1px solid var(--ink-line); color:var(--on-ink); background:rgba(255,255,255,.04);
}
.chips.light > span{ border-color:var(--line); color:var(--text); background:#fff; }

/* proof */
.proof{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width:860px){ .proof{ grid-template-columns:1fr; } }
.logos-row{ display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; margin-top:8px; }
.logos-row span{ font-family:var(--head); font-weight:700; font-size:20px; color:var(--text-3); letter-spacing:-0.01em; }
.note-dash{
  margin-top:18px; border:1.5px dashed #c9c2f0; border-radius:12px; padding:14px 16px; font-size:14px; color:var(--text-2); background:#fff;
}

/* news */
.news{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .news{ grid-template-columns:1fr; } }
.ncard{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; text-align:left; }
.ncard .nimg{ height:150px; background:linear-gradient(135deg,#2a2268,#5B45E0 60%,#3F8CF0); position:relative; }
.ncard .nimg.b{ background:linear-gradient(135deg,#1b1450,#3F8CF0 70%,#35D3A8); }
.ncard .nimg.c{ background:linear-gradient(135deg,#110C2E,#7C5CF0 80%); }
.ncard .nimg > span{ position:absolute; left:16px; bottom:12px; font-family:var(--head); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.28); padding:4px 10px; border-radius:99px; }
.ncard .nb{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.ncard h3{ font-size:18px; line-height:1.3; font-weight:700; }
.ncard p{ font-size:15px; color:var(--text-2); flex:1; }
.ncard .more{ font-family:var(--head); font-weight:600; font-size:14px; color:var(--violet); }

/* abotts */
.abotts{ display:flex; gap:28px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.abotts h3{ color:#fff; font-size:22px; font-weight:600; max-width:30ch; }
.abotts p{ color:var(--on-ink-2); max-width:60ch; margin-top:8px; font-size:15.5px; }

/* ---------- products sub-nav + product pages ---------- */
.subnav{
  position:sticky; top:calc(env(safe-area-inset-top, 0px) + 58px); z-index:50;
  background:var(--white); border-bottom:1px solid var(--line);
}
.subnav-inner{ max-width:var(--max); margin:0 auto; padding:0 24px; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; }
.subnav-inner::-webkit-scrollbar{ display:none; }
@media (max-width:640px){ .subnav-inner{ padding:0 12px; } .subnav{ top:calc(env(safe-area-inset-top, 0px) + 54px); } }
.subnav button{
  background:none; border:0; border-bottom:3px solid transparent; font-family:var(--head); font-weight:600; font-size:14px;
  color:var(--text-2); padding:15px 14px 12px; white-space:nowrap; display:inline-flex; align-items:center; gap:8px;
}
.subnav button:hover{ color:var(--text); }
.subnav button.active{ color:var(--violet); border-bottom-color:var(--violet); }
.subnav.dark{ background:var(--ink); border-bottom-color:var(--ink-line); }
.subnav.dark button{ color:var(--on-ink-2); }
.subnav.dark button:hover{ color:#fff; }
.subnav.dark button.active{ color:#fff; border-bottom-color:var(--on-air); }

.phero{ background:var(--ink); color:var(--on-ink); padding-block:64px 70px; position:relative; overflow:hidden;
  background-image:radial-gradient(700px 380px at 90% 0%, rgba(91,69,224,.5), transparent 60%); }
.phero .crumb{ font-family:var(--head); font-size:12.5px; color:var(--on-ink-2); margin-bottom:14px; }
.phero h1{ font-size:clamp(32px, 4vw, 48px); color:#fff; font-weight:700; line-height:1.1; max-width:20ch; }
.phero p{ color:var(--on-ink-2); font-size:19px; max-width:58ch; margin-top:16px; }
.phero .hero-cta{ margin-top:26px; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:860px){ .two{ grid-template-columns:1fr; gap:28px; } }
.checks{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:12px; }
.checks li{ display:flex; gap:12px; font-size:16.5px; }
.checks li svg{ width:20px; height:20px; flex-shrink:0; color:var(--violet); margin-top:3px; }
.panel-v{
  border-radius:18px; padding:30px; color:#fff;
  background:linear-gradient(135deg, #3b2db0, #5B45E0 55%, #3F8CF0);
}
.panel-v h3{ font-size:20px; margin-bottom:14px; }
.panel-v ul{ margin:0; padding-left:18px; display:grid; gap:8px; font-size:15.5px; }
.cmp{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:15.5px; }
.cmp th, .cmp td{ text-align:left; padding:16px 20px; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp th{ font-family:var(--head); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); background:var(--paper); }
.cmp tr:last-child td{ border-bottom:0; }
.cmp td:first-child{ font-weight:600; font-family:var(--head); font-size:14.5px; }
.tbl-scroll{ overflow-x:auto; }
.tbl-scroll .cmp{ min-width:520px; }
.todo{
  border:1.5px dashed #c9c2f0; background:var(--paper); border-radius:14px; padding:18px 20px; font-size:15px; color:var(--text-2);
}
.todo b{ font-family:var(--head); color:var(--violet); }

/* services */
.svc{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:760px){ .svc{ grid-template-columns:1fr; } }
.svc > div{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; }
.svc h3{ font-size:19px; margin-bottom:8px; }
.svc p{ color:var(--text-2); font-size:15.5px; }

/* contact */
.contact{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:start; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; gap:36px; } }
.cform{ display:flex; flex-direction:column; gap:16px; }
.crow{ display:flex; gap:14px; flex-wrap:wrap; }
.cform > .cfield{ flex:none; }
.crow > .cfield{ flex:1 1 220px; }
.cfield{ flex:none; display:flex; flex-direction:column; gap:6px; min-width:0; }
.cfield label{ font-family:var(--head); font-size:12.5px; font-weight:600; color:var(--text-2); }
.cfield .opt{ font-weight:400; color:var(--text-3); }
.cfield input, .cfield textarea, .cfield select{
  width:100%; font:inherit; font-size:15.5px; color:var(--text); background:#fff;
  border:1.5px solid var(--line); border-radius:10px; padding:12px 14px;
}
.cfield input:focus, .cfield textarea:focus, .cfield select:focus{ outline:none; border-color:var(--violet); }
.cfield textarea{ min-height:96px; resize:vertical; }
.cfield .err{ display:none; font-size:13px; color:#C23B55; }
.cfield.has-error input, .cfield.has-error select{ border-color:#C23B55; }
.cfield.has-error .err{ display:block; }
.cstatus{ display:none; font-size:14.5px; color:#C23B55; }
.cstatus.show{ display:block; }
.consent{ display:flex; gap:10px; font-size:13.5px; color:var(--text-2); align-items:flex-start; }
.cfield .consent input{ width:auto; flex:none; margin:3px 0 0; padding:0; accent-color:var(--violet); }
.consent span{ line-height:1.5; font-weight:400; }
.cform .btn{ margin-top:6px; }
.csent{ display:none; gap:14px; align-items:flex-start; background:var(--paper); border-radius:16px; padding:26px; }
.csent svg{ width:26px; height:26px; color:#12a86a; flex-shrink:0; }
.cbox.is-sent .cform{ display:none; }
.cbox.is-sent .csent{ display:flex; }
.side-card{ background:var(--ink); color:var(--on-ink); border-radius:18px; padding:28px; display:grid; gap:18px; }
.side-card h3{ color:#fff; font-size:20px; }
.side-card .row{ display:flex; flex-direction:column; gap:3px; }
.side-card .row small{ font-family:var(--head); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--on-ink-2); }
.side-card .row > span, .side-card .row > a{ font-size:16.5px; color:#fff; text-decoration:none; word-break:break-word; }
.copy{ background:rgba(255,255,255,.1); color:#fff; border:0; border-radius:8px; padding:6px 12px; font-family:var(--head); font-size:12.5px; font-weight:600; margin-left:8px; }
.copy.copied{ background:var(--on-air); color:#06251A; }

/* footer */
.site-footer{ background:var(--ink); color:var(--on-ink-2); padding-block:56px 30px; border-top:1px solid var(--ink-line); }
.fgrid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
@media (max-width:860px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fgrid{ grid-template-columns:1fr; } }
.site-footer h5{ font-family:var(--head); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.site-footer a, .site-footer li button{ background:none; border:0; padding:0; color:var(--on-ink-2); text-decoration:none; font-size:15px; text-align:left; cursor:pointer; }
.site-footer a:hover, .site-footer li button:hover{ color:#fff; }
.fbottom{ margin-top:40px; padding-top:22px; border-top:1px solid var(--ink-line); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13.5px; }

/* media server host */
tnn-mediaserver{ display:block; min-height:60vh; background:#110C2E; }
.ms-loading{ padding:80px 24px; text-align:center; color:var(--on-ink-2); }

/* proposal ribbon */
.ribbon{
  background:#fff7d6; color:#5a4700; border-bottom:1px solid #ecd98a; font-size:13px; padding:8px 18px; text-align:center;
  font-family:var(--body);
}
.ribbon b{ font-family:var(--head); }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }
.ncard .more, .pcard .more, .path .go{ text-decoration:none; }
.site-footer li span{ font-size:15px; }

.logo img{ height:32px; width:auto; display:block; }
.site-footer .logo img{ height:34px; }
.pgrid-logos{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px; }
@media (max-width:420px){ .pgrid-logos{ grid-template-columns:repeat(2,1fr); } }
.pl{ background:#fff; border:1px solid var(--line); border-radius:12px; height:78px; padding:12px 16px; display:flex; align-items:center; justify-content:center; }
.pl img{ max-width:100%; max-height:46px; width:auto; height:auto; object-fit:contain; display:block; }
.pl img[alt="Bunny.net"]{ max-height:82px; margin-block:-12px; }

.pl-dark{ background:var(--ink); border-color:var(--ink); }
.pl-photo{ padding:0; overflow:hidden; }
.pl-photo img{ width:100%; height:100%; max-height:none; object-fit:cover; }
.pl-text{ font-family:var(--head); font-weight:700; font-size:18px; color:var(--text-2); letter-spacing:-0.01em; }

.pl-photo{ background:#2b8bd5; border-color:#2b8bd5; }
.pl-photo img{ width:auto; height:100%; max-width:100%; object-fit:contain; }

.ncard .nimg{ overflow:hidden; }
.ncard .nimg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ncard .nimg.contain{ background:#fff; border-bottom:1px solid var(--line); }
.ncard .nimg.contain img{ object-fit:contain; padding:12px; }
.ncard .nimg > span{ z-index:2; }

/* multi-page: links instead of buttons */
.subnav a{
  border-bottom:3px solid transparent; font-family:var(--head); font-weight:600; font-size:14px; color:var(--text-2);
  padding:15px 14px 12px; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.subnav a:hover{ color:var(--text); }
.subnav a.active{ color:var(--violet); border-bottom-color:var(--violet); }
.subnav.dark a{ color:var(--on-ink-2); }
.subnav.dark a:hover{ color:#fff; }
.subnav.dark a.active{ color:#fff; border-bottom-color:var(--on-air); }
.mega .mega-all{ grid-column:1/-1; justify-content:flex-start; font-family:var(--head); font-weight:600; font-size:14px; color:#b9acff; padding:6px 14px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.logo{ text-decoration:none; }

.s-cta{ background:linear-gradient(120deg,#3b2db0,#5B45E0 55%,#3F8CF0); color:#fff; }
.s-cta .h2{ color:#fff; }