/* =============================================================
   TrackVid comparison pages. Shared by /compare/ and every
   /compare/trackvid-vs-*.html page, so the tokens live in one
   file instead of being duplicated per page.

   Everything is scoped under .tvc, so it cannot collide with
   style.css, tailwind.min.css or the ca-* feature-page tokens.

   Palette note: --teal #0088A3 is the site's Tailwind bg_primary
   (tailwind.config.js), and --teal-line/--teal-wash are tints of
   it. Quicksand is self-hosted in style.css, so these pages load
   no Google Fonts stylesheet.

   .chip-uc is deliberately absent: standing rule 2 forbids a
   competitor-positive label, and standing rule 10 retires it.
   ============================================================= */

.tvc{--teal:#0088A3;--teal-ink:#005F75;--teal-wash:#E0F4F8;--teal-line:#B3E4ED;--ink:#1A1A1A;--body:#374151;--muted:#5B6472;--mist:#F5F7F9;--line:#E3E8EC;--green:#0E9F6E;--green-ink:#0A6B4A;--green-wash:#E6F6EE;--green-tint:#F3FBF7;--amber-ink:#8A4B00;--amber-wash:#FFF2D9;--grey-ink:#4B5563;--grey-wash:#EEF1F4;
  font-family:Quicksand,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--body);font-size:17px;line-height:1.65;background:#fff}
.tvc *{box-sizing:border-box}
.tvc .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.tvc h1,.tvc h2,.tvc h3{color:var(--ink);font-weight:700;line-height:1.18;letter-spacing:-0.01em;margin:0}
.tvc h1{font-size:clamp(2.05rem,3.3vw,2.95rem);max-width:20ch;margin-bottom:18px;text-wrap:balance}
.tvc h2{font-size:clamp(1.5rem,2.1vw,1.95rem);max-width:30ch;margin-bottom:10px;text-wrap:balance}
.tvc h3{font-size:1.15rem;margin-bottom:8px}
.tvc p{margin:0 0 14px;max-width:70ch}
.tvc a{color:var(--teal-ink);text-underline-offset:3px}
.tvc a:focus-visible,.tvc summary:focus-visible,.tvc .btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.tvc .band{padding:68px 0}
.tvc .band.slim{padding:8px 0}
.tvc .band.mist{background:var(--mist)}

/* hero. The top padding clears the site's fixed header, which the
   preview shell did not have. */
.tvc .hero{position:relative;padding:132px 0 56px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#F7FCFD 0%,#E8F5F8 55%,#DCEFF4 100%)}
.tvc .crumbs{font-size:14px;color:var(--muted);margin-bottom:22px}
.tvc .crumbs a{color:var(--muted)}
.tvc .crumbs span{margin:0 8px}
.tvc .hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:48px;align-items:start}
.tvc .lede{font-size:1.14rem;color:var(--body)}
.tvc .byline{font-size:14.5px;color:var(--muted);margin-top:4px}
.tvc .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.tvc .btn{display:inline-block;padding:14px 22px;border-radius:10px;font-weight:700;font-size:18px;text-decoration:none;line-height:1.2}
.tvc .btn-primary{background:var(--teal);color:#fff}
.tvc .btn-primary:hover{background:var(--teal-ink)}
.tvc .btn-ghost{background:#fff;color:var(--teal-ink);border:2px solid var(--teal-line)}
.tvc .btn-ghost:hover{border-color:var(--teal)}
.tvc .slip{background:#fff;border:1px solid var(--line);border-left:6px solid var(--green);border-radius:18px;padding:26px 28px 22px;box-shadow:0 24px 52px -34px rgba(4,58,70,.42)}
.tvc .slip h2{font-size:1.3rem;margin-bottom:10px}
.tvc .slip p{font-size:16px}

/* trust strip, section 7 of the plan. Facts only. */
.tvc .trust{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.tvc .trust span{display:inline-flex;align-items:center;gap:8px}
.tvc .trust svg{width:16px;height:16px;color:var(--green-ink);flex:none}
.tvc .trust a{color:var(--muted);text-decoration:underline}
.tvc .trust a:hover{color:var(--teal-ink)}

/* journey */
.tvc .journey{border:1px solid var(--line);border-radius:16px;padding:28px 24px 18px;background:#fff;margin-top:18px}
.tvc .jgrid{display:grid;grid-template-columns:130px 1fr;row-gap:6px;align-items:start}
.tvc .jlabel{font-weight:700;color:var(--ink);padding-top:3px}
.tvc .jlane{position:relative}
.tvc .jline{position:absolute;top:13px;height:3px;z-index:0}
.tvc .jline.full{left:10%;right:10%;background:#0E9F6E;border-radius:2px}
.tvc .jline.solid{left:10%;right:50%;background:#8B98A5}
.tvc .jline.dash{left:50%;right:10%;height:0;border-top:3px dashed #B8C2CC}
.tvc .jstops{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr)}
.tvc .jstop{position:relative;text-align:center;padding:38px 8px 8px;font-size:14.5px;color:var(--body)}
.tvc .jstop::before{content:"";position:absolute;top:1px;left:50%;margin-left:-14px;width:28px;height:28px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px #fff;z-index:1}
.tvc .jstop::after{content:"";position:absolute;top:8px;left:50%;margin-left:-3px;width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);z-index:2}
.tvc .uc .jstop::before{background:#8B98A5}
.tvc .uc .jstop.open::before{background:#fff;border:3px dashed #B8C2CC}
.tvc .uc .jstop.open::after{display:none}
.tvc .uc .jstop.open{color:var(--muted)}
.tvc .jstage{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tvc .jtop{display:grid;grid-template-columns:130px repeat(5,1fr);margin-bottom:4px}
.tvc .jtop div{font-weight:700;color:var(--ink);font-size:15px;text-align:center}
.tvc .jnote{font-size:13px;color:var(--muted);margin:10px 0 0}

/* tables */
.tvc .tablewrap{margin-top:18px}
.tvc .cmp{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15.5px;background:#fff;box-shadow:0 20px 44px -36px rgba(4,58,70,.45)}
.tvc .cmp thead th{background:var(--teal-ink);color:#fff;text-align:left;padding:14px 16px;font-size:15px;font-weight:700}
.tvc .cmp thead th.tvcol{background:#004B5D}
.tvc .hcheck{vertical-align:-3px;margin-right:6px}
.tvc .cmp th[scope=row]{width:25%;padding:16px;text-align:left;vertical-align:top;font-weight:700;color:var(--ink);border-top:1px solid var(--line);background:#fff}
.tvc .cmp td{padding:16px;vertical-align:top;border-top:1px solid var(--line)}
.tvc .cmp tbody tr:nth-child(even) th[scope=row],.tvc .cmp tbody tr:nth-child(even) td.uc{background:#FBFDFE}
.tvc .cmp tbody tr:hover th[scope=row],.tvc .cmp tbody tr:hover td.uc{background:var(--mist)}
.tvc .cmp td.tv{background:var(--green-tint);border-left:3px solid var(--green);width:40%}
.tvc .cmp td.uc{width:35%}
.tvc .cmp tbody tr:first-child th,.tvc .cmp tbody tr:first-child td{border-top:0}
.tvc .cell-main{color:var(--ink)}
.tvc .ns{display:inline-block;color:#6B7785;background:#F3F5F7;padding:3px 9px;border-radius:6px;font-size:14.5px}
.tvc .src{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.tvc .src a{color:var(--muted)}
.tvc .chip{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;line-height:1.5}
.tvc .chip-lead{background:var(--green-ink);color:#fff}
.tvc .chip-only{background:var(--green-wash);color:var(--green-ink);border:1px solid #A7DFC4}
.tvc .chip-even{background:var(--grey-wash);color:var(--grey-ink)}
.tvc .verified{font-size:14px;color:var(--muted);margin-bottom:0}
.tvc .why{margin-top:18px;padding:16px 18px;border-left:4px solid var(--teal);background:var(--teal-wash);border-radius:0 10px 10px 0}
.tvc .why p{margin:0}
.tvc .midcta{display:grid;grid-template-columns:auto 1fr auto;gap:8px 18px;align-items:center;border:1px solid var(--teal-line);background:var(--teal-wash);border-radius:14px;padding:18px 22px}
.tvc .midcta p{margin:0}
.tvc .midcta-q{font-weight:700;color:var(--ink)}

/* blocks */
.tvc .defs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px}
.tvc .def{border:1px solid var(--line);border-radius:14px;padding:22px}
.tvc .def.tv{border-left:5px solid var(--green)}
.tvc .def p{margin:0}
.tvc .pick{border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.tvc .pick.tv{border-left:5px solid var(--green);background:var(--green-tint)}
.tvc .pick ul{margin:8px 0 0;padding-left:20px}
.tvc .pick li{margin-bottom:8px}
.tvc .plain{width:100%;border-collapse:collapse;margin-top:18px;font-size:15.5px}
.tvc .plain th,.tvc .plain td{padding:14px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tvc .plain th{width:26%;color:var(--ink)}
.tvc .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.tvc .proof div{padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:14px}
.tvc .proof b{display:block;font-size:1.5rem;color:var(--teal-ink);line-height:1.2;margin-bottom:4px}
.tvc .proof span{font-size:14.5px;color:var(--muted)}
.tvc .faq{margin-top:14px;display:grid;gap:0 40px;align-content:start}
@media (min-width:1000px){.tvc .faq{grid-template-columns:1fr 1fr}}
.tvc details{border-bottom:1px solid var(--line);padding:16px 0}
.tvc summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
.tvc summary::-webkit-details-marker{display:none}
.tvc summary::after{content:"+";font-size:22px;line-height:1;color:var(--teal-ink);flex:none}
.tvc details[open] summary::after{content:"\2212"}
.tvc details p{margin:10px 0 0}
/* Sources. Tailwind's preflight sets menu,ol,ul{list-style:none} site-wide,
   which the preview design never had to allow for, so these rendered as a
   bare indented list of links. They are now link rows in a card, with the
   icon telling you whether a source leaves the site.

   The two groups are rarely the same length (7 competitor sources against
   14 TrackVid pages on this page), which left half the row empty. Any list
   of ten or more flows into two columns instead, so the cards balance.
   :has() is the test; where it is unsupported the list simply stays in one
   column, which is the old behaviour and still correct. */
.tvc .srcs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;font-size:15px;align-items:start}
.tvc .srcs > div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.tvc .srcs h3{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:12px}
.tvc .srcs ul{list-style:none;padding:0;margin:0}
.tvc .srcs ul:has(> li:nth-child(10)){columns:2;column-gap:22px}
.tvc .srcs li{margin:0;break-inside:avoid}
.tvc .srcs li a{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-radius:9px;color:var(--body);text-decoration:none;line-height:1.45;transition:background .2s,color .2s}
.tvc .srcs li a:hover{background:var(--teal-wash);color:var(--teal-ink)}
.tvc .srcs li a::before{content:"";flex:none;width:15px;height:15px;margin-top:3px;background-repeat:no-repeat;background-size:15px 15px;opacity:.65}
.tvc .srcs li a[target="_blank"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E")}
.tvc .srcs li a:not([target])::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230088A3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}

/* Tailwind's preflight also stripped the markers from every other list on
   these pages. Restore them where the design expects a bullet. */
.tvc .diffs,.tvc .pick ul,.tvc .safe,.tvc .custom{list-style:disc}
.tvc .diffs li,.tvc .pick li,.tvc .safe li,.tvc .custom li{list-style:inherit}
.tvc .diffs li::marker,.tvc .pick li::marker,.tvc .safe li::marker,.tvc .custom li::marker{color:var(--teal)}
/* Fine print. It was body-width text (70ch) stranded in a full-width white
   band, which read as unfinished rather than as a footnote. It is now a
   muted panel that spans the content, so it looks deliberate and sits
   visually below the source cards instead of floating beside them. */
.tvc .disclaimer{font-size:13.8px;line-height:1.72;color:var(--muted);max-width:none;margin-top:20px;background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
/* The "Last updated" line is a timestamp, not a disclaimer. Strip the panel
   back off it and mark it with a clock. */
.tvc .disclaimer:last-of-type{display:inline-flex;align-items:center;gap:8px;background:none;border:0;padding:0;margin-top:14px;font-size:13.2px;color:#7A949C}
.tvc .disclaimer:last-of-type::before{content:"";flex:none;width:14px;height:14px;background-repeat:no-repeat;background-size:14px 14px;opacity:.75;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A949C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.tvc .final{background:linear-gradient(135deg,#005F75 0%,#00485A 100%);color:#fff;border-radius:22px;padding:46px 42px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;box-shadow:0 30px 60px -34px rgba(0,72,90,.6)}
.tvc .final h2{color:#fff;max-width:26ch}
.tvc .final p{color:#E6F3F6;margin:6px 0 0}
.tvc .final .btn-primary{background:#fff;color:var(--teal-ink)}
.tvc .final .btn-primary:hover{background:var(--teal-wash)}
.tvc .diff-h{font-size:1.02rem;margin:16px 0 6px}
.tvc .diffs{margin:0;padding-left:18px;font-size:15.5px}
.tvc .diffs li{margin-bottom:8px}
.tvc .diffs b{color:var(--ink)}
.tvc .toc{position:sticky;top:76px;z-index:30;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.tvc .toc .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding-top:14px;padding-bottom:14px;font-size:14.5px}
.tvc .toc-h{font-weight:700;color:var(--ink);margin-right:4px}
.tvc .toc a{color:var(--muted);text-decoration:none;font-weight:600;padding:4px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.tvc .toc a.is-here{color:var(--teal-ink);border-bottom-color:var(--teal)}
.tvc .toc a:hover{text-decoration:underline}
/* Author box. A single run-on paragraph in a wide box read as filler. The
   avatar is decorative and CSS-only, so no page HTML changed. */
.tvc .author{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:14px;padding:20px 22px;margin:0 0 28px;background:#fff}
.tvc .author::before{content:"";flex:none;width:44px;height:44px;border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--teal),#45ACBB);background-repeat:no-repeat;background-position:center;background-size:22px 22px,100% 100%}
.tvc .author p{margin:0;max-width:78ch}

/* Sources sat in a 68px band and the call to action opened another, so the
   two stacked into roughly 136px of nothing. Close the pair up. */
.tvc #sources{padding-bottom:40px}
.tvc .band:has(.final){padding-top:24px}
.tvc .steps{counter-reset:s;list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.tvc .steps li{counter-increment:s;position:relative;padding:16px 18px 16px 58px;border:1px solid var(--line);border-radius:12px;background:#fff}
.tvc .steps li::before{content:counter(s);position:absolute;left:18px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.tvc .steps b{color:var(--ink)}
.tvc .safe{margin:18px 0 0;padding:20px 24px 20px 42px;border-left:5px solid var(--green);background:var(--green-tint);border-radius:14px}
.tvc .safe li{margin-bottom:8px}
.tvc .rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
.tvc .rel .card{border:1px solid var(--line);border-radius:16px;padding:20px 22px;background:#fff;transition:transform .3s,box-shadow .3s}
.tvc .rel .card:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(4,58,70,.45)}
.tvc .rel .card h3{font-size:1.05rem;margin-bottom:6px}
.tvc .rel .card p{font-size:15px;margin:0}
.tvc .custom{margin:18px 0 0;padding:22px 26px 22px 44px;border-left:5px solid var(--green);background:var(--green-tint);border-radius:14px}
.tvc .custom li{margin-bottom:10px}
.tvc .custom b{color:var(--ink)}

/* hub only */
.tvc .group-h{margin:30px 0 4px;font-size:1.2rem}
.tvc .group-nav{font-size:15px}
.tvc .group-nav a{margin-right:14px}
.tvc .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-top:18px}
.tvc .card{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:#fff}
.tvc .card h3 a{color:var(--ink);text-decoration:none}
.tvc .card h3 a:hover{color:var(--teal-ink);text-decoration:underline}
.tvc .card p{margin:6px 0 0;font-size:15.5px}
.tvc .steptbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15.5px;background:#fff;margin-top:18px}
.tvc .steptbl thead th{background:var(--teal-ink);color:#fff;text-align:left;padding:14px 16px;font-size:15px}
.tvc .steptbl th[scope=row]{width:24%;padding:16px;text-align:left;vertical-align:top;color:var(--ink);border-top:1px solid var(--line)}
.tvc .steptbl td{padding:16px;vertical-align:top;border-top:1px solid var(--line)}
.tvc .steptbl td:last-child{width:16%;white-space:nowrap}
.tvc .steptbl tbody tr:first-child th,.tvc .steptbl tbody tr:first-child td{border-top:0}
.tvc .steptbl tr.is-tv th,.tvc .steptbl tr.is-tv td{background:var(--green-tint)}
.tvc .steptbl tr.is-tv th{border-left:3px solid var(--green)}

/* mobile sticky bar, section 7 point 6. Hidden once the final band
   is on screen; the script that toggles .sticky-hide lives per page. */
.tvc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid #E3E8EC}
.tvc-sticky a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 14px;border-radius:10px;font-family:Quicksand,system-ui,sans-serif;font-weight:700;font-size:15px;text-decoration:none}
.tvc-sticky .s-demo{background:#0088A3;color:#fff}
.tvc-sticky .s-wa{background:#fff;color:#128C7E;border:1.5px solid #128C7E;flex:0 0 52px;padding:12px}
.tvc-sticky .s-wa svg{width:21px;height:21px}
.tvc-sticky.sticky-hide{display:none !important}
@media (max-width:760px){.tvc-sticky{display:flex}}

@media (max-width:980px){
  .tvc h1{font-size:2.5rem}
  .tvc h2{font-size:1.75rem}
  .tvc .hero-grid{grid-template-columns:1fr;gap:28px}
  .tvc .midcta{grid-template-columns:1fr}
  .tvc .final{grid-template-columns:1fr}
}
@media (max-width:760px){
  .tvc{font-size:16.5px}
  .tvc h1{font-size:2.05rem}
  .tvc h2{font-size:1.5rem}
  .tvc .hero{padding:112px 0 40px}
  .tvc .band{padding:42px 0}
  .tvc .defs,.tvc .srcs{grid-template-columns:1fr}
  .tvc .proof{grid-template-columns:1fr 1fr}
  .tvc .jtop{display:none}
  .tvc .jgrid{display:block}
  .tvc .jlabel{margin:14px 0 4px}
  .tvc .jline{display:none}
  .tvc .jstops{display:block}
  .tvc .jstop{text-align:left;padding:6px 0 10px 56px}
  .tvc .jstop::before{top:6px;left:14px;margin-left:0}
  .tvc .jstop::after{top:13px;left:25px;margin-left:0}
  .tvc .jstage{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;font-weight:700;color:var(--ink)}
  .tvc .cmp thead,.tvc .steptbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tvc .cmp,.tvc .cmp tbody,.tvc .cmp tr,.tvc .cmp th[scope=row],.tvc .cmp td{display:block;width:100%}
  .tvc .cmp tr{border-top:1px solid var(--line)}
  .tvc .cmp tbody tr:first-child{border-top:0}
  .tvc .cmp th[scope=row]{border-top:0;padding-bottom:6px}
  .tvc .cmp td{border-top:0;padding-top:10px}
  .tvc .cmp td.tv{border-left:0;border-radius:10px;margin:0 12px;width:auto}
  .tvc .cmp td.uc,.tvc .cmp td.tv{width:auto}
  .tvc .cmp td::before,.tvc .steptbl td::before{content:attr(data-label);display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:4px}
  .tvc .steptbl,.tvc .steptbl tbody,.tvc .steptbl tr,.tvc .steptbl th[scope=row],.tvc .steptbl td{display:block;width:auto}
  .tvc .steptbl tr{border-top:1px solid var(--line)}
  .tvc .steptbl tbody tr:first-child{border-top:0}
  .tvc .steptbl th[scope=row],.tvc .steptbl td{border-top:0}
  .tvc .steptbl td:last-child{white-space:normal}
  .tvc .final{padding:30px 24px}
  .tvc main{padding-bottom:78px}
  /* The contents row wrapped to three lines on a phone and ate the screen.
     One scrollable line instead, pinned under the mobile header. */
  .tvc .toc{top:64px}
  .tvc .toc .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tvc .toc .wrap::-webkit-scrollbar{display:none}
  .tvc .toc a{white-space:nowrap}
  .tvc .proof{grid-template-columns:1fr 1fr;gap:10px}
  .tvc .proof div{padding:16px}
}
@media (prefers-reduced-motion:reduce){.tvc *{transition:none!important;animation:none!important}}