/* ══════════════════════════════════════════════════════════════════════
   TAVVLO HOME — Attio-style system
   Ported from the attio-recreation template, adapted to Tavvlo's palette.

   Everything is namespaced: the source template uses bare class names
   (.hero, .btn, .section, .stat, .logo, .sidebar, .content, .footer) that
   collide head-on with the Webflow stylesheet driving this site's nav and
   footer. Every rule here is scoped under #tv-home and every class carries a
   tvh- prefix, so the two systems cannot reach each other.
   ══════════════════════════════════════════════════════════════════════ */

#tv-home{
  --ink:#0d0d0f;
  --muted:#6f7178;
  --line:#e7e7e9;
  --line-strong:#d7d8dc;
  --panel:#f7f7f8;
  --panel2:#fbfbfc;
  /* The template's blue becomes Tavvlo green. Two values, because the brand
     neon is a fill colour - it fails contrast as text on white. */
  --accent:#2f8f16;
  --accent-neon:#88ef56;
  --accent-wash:rgba(136,239,86,.13);
  --max:1240px;

  background:#fff;
  color:var(--ink);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
#tv-home *{box-sizing:border-box}
#tv-home a{color:inherit;text-decoration:none}
#tv-home ::selection{background:var(--accent-wash)}

/* ── shared ─────────────────────────────────────────────────────── */
#tv-home .tvh-grid-bg{
  background-image:
    linear-gradient(to right,rgba(15,15,20,.038) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,15,20,.038) 1px,transparent 1px);
  background-size:72px 72px;
}
#tv-home .tvh-eyebrow{
  font-size:12px;font-weight:650;letter-spacing:.02em;color:#6b6d74;
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:7px 12px;margin-bottom:24px;
}
#tv-home .tvh-pulse{
  width:6px;height:6px;border-radius:999px;background:var(--accent-neon);
  box-shadow:0 0 0 5px var(--accent-wash);
}
#tv-home .tvh-btn{
  border:1px solid var(--line-strong);background:#fff;border-radius:8px;
  height:40px;padding:0 16px;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;font-weight:600;font-size:14px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
#tv-home .tvh-btn:hover{transform:translateY(-1px);border-color:#bfc1c7;box-shadow:0 5px 15px rgba(0,0,0,.05)}
#tv-home .tvh-btn.is-dark{background:#111;color:#fff;border-color:#111}
#tv-home .tvh-btn.is-dark:hover{border-color:#111}
#tv-home .tvh-btn.is-green{background:var(--accent-neon);color:#10210a;border-color:var(--accent-neon)}

/* ── top strip + hero ───────────────────────────────────────────────
   Metrics measured off the reference template and rebuilt here: a 48px black
   announcement row above the nav, then a centred hero whose pill, headline
   and button row sit on its vertical rhythm. Written from those measurements
   rather than copied - the reference is a capture of a live commercial site,
   and its markup, bundles, fonts and copy belong to its owner. */
#tv-topbar{
  height:48px;background:#000;display:flex;align-items:center;justify-content:center;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
#tv-topbar a{
  color:#fff;font-size:15px;font-weight:500;letter-spacing:-.01em;text-decoration:none;
  padding:0 18px;text-align:center;
}
#tv-topbar a:hover{opacity:.82}
/* 18px control on the right, matching the reference's placement. */
#tv-topbar #tv-topbar-x{
  position:absolute;right:31px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;padding:0;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;opacity:.7;
}
#tv-topbar #tv-topbar-x:hover{opacity:1}
#tv-topbar #tv-topbar-x svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
#tv-topbar{position:relative}
/* Dismissing the strip has to take the nav's offset with it - the nav is
   absolutely positioned, so without this it would keep a 48px gap above it. */
html.tv-strip-closed #tv-topbar{display:none}
html.tv-strip-closed [role="banner"]{top:0}
/* The site nav is position:absolute; top:0, so it lands on top of this strip
   unless it is pushed down by exactly the strip's height. That means the
   strip needs a KNOWN height at every breakpoint - an auto height would leave
   the offset guessing, and the logo would sit inside the black bar again. */
[role="banner"]{top:48px}

/* ── nav row ─────────────────────────────────────────────────────────
   Metrics taken off the reference and applied to our own nav: 36px pill
   targets on a 10px radius, 15px/500 links, a 72px page gutter, and the
   action pair at 14px/500 - the smaller of the two sizes, which is what
   separates a button from a nav link there. */
[role="banner"] .container{max-width:1440px;padding:0 72px}
/* The banner adds 24px top and bottom on top of the 67px row, making the
   header 115px instead of 67. The row already has the right height. */
[role="banner"]{padding:0}
[role="banner"] .navbar-content-wrap{min-height:67px;height:67px;align-items:center}
/* The logo's wrapper was 259px wide against a 109px mark, and that dead space
   was what pushed the links out past the middle of the bar. */
[role="banner"] .nav-logo-wrap{width:auto;flex:0 0 auto}
/* The reference groups logo and links together on the left and pushes the
   action pair to the far right, rather than centring the menu. margin-right
   auto on the menu is what creates that split. */
[role="banner"] .nav-menu{gap:6px;margin-right:auto;margin-left:10px;justify-content:flex-start}
[role="banner"] .nav-logo-wrap{flex:0 0 auto}
[role="banner"] .nav-link{
  display:inline-flex;align-items:center;height:36px;padding:0 12px;
  border-radius:10px;border:1px solid transparent;
  font-size:15px;font-weight:500;letter-spacing:-.01em;color:#2f3237;
  transition:background .16s ease,color .16s ease;
}
[role="banner"] .nav-link:hover{background:rgba(15,17,20,.045);color:#14161a}
[role="banner"] .nav-link-text{font-size:15px;font-weight:500;letter-spacing:-.01em}
/* the dropdown parent keeps a tighter right inset for its chevron */
[role="banner"] .nav-link-dropdown .nav-link{padding:0 8px 0 12px}

/* action pair, right-aligned */
[role="banner"] .nav-button-wrap-desktop{display:flex;align-items:center;gap:8px}
[role="banner"] .nav-button-wrap-desktop .secondary-button{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 12px;border-radius:10px;
  font-size:14px;font-weight:500;letter-spacing:-.006em;
  background:#1f2125;color:#f4f4f5;border:1px solid #4b525d;
  transition:background .18s ease,border-color .18s ease;
}
[role="banner"] .nav-button-wrap-desktop .secondary-button:hover{background:#2b2e33;border-color:#5c646f}
[role="banner"] .nav-button-wrap-desktop .secondary-button-text{font-size:14px;font-weight:500}

@media (max-width:991px){
  [role="banner"] .container{padding:0 20px}
}

@media (max-width:640px){
  #tv-topbar{height:44px}
  #tv-topbar a{
    font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;padding:0 40px 0 12px;
  }
  #tv-topbar #tv-topbar-x{right:12px}
  [role="banner"]{top:44px}
}

#tv-home .tvh-hero{
  max-width:var(--max);margin:auto;position:relative;text-align:center;
  /* The pinned layer already starts below the nav, so this is just the 96px
     of air above the pill - adding the nav's height again would double it. */
  padding:96px 58px 0;
}
/* 30px tall, 13px radius, 16px/500 on a hairline border - the reference's
   pill sits above the headline with 27px of air under it. */
#tv-home .tvh-hero .tvh-eyebrow{
  display:inline-flex;align-items:center;height:30px;padding:0 13px;
  border:1px solid #ebedf0;border-radius:13px;background:transparent;
  font-size:16px;font-weight:500;letter-spacing:-.01em;color:#1b1d20;
  margin:0 0 27px;
}
#tv-home .tvh-hero .tvh-eyebrow:hover{border-color:#d9dde3}
#tv-home .tvh-hero h1{
  margin:0 auto;max-width:900px;
  font-size:64px;font-weight:600;line-height:.95;letter-spacing:-.02em;color:#1b1d20;
}
#tv-home .tvh-hero p{
  max-width:640px;margin:28px auto 0;color:#5b6068;
  font-size:17px;font-weight:400;line-height:1.5;letter-spacing:-.011em;
}
#tv-home .tvh-hero-actions{display:flex;gap:10px;justify-content:center;margin-top:36px;flex-wrap:wrap}
/* 36px tall, 10px radius, 14px/500, 12px of side padding. */
#tv-home .tvh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 12px;border-radius:10px;
  font-size:14px;font-weight:500;letter-spacing:-.006em;
  background:#fff;color:#2f3237;border:1px solid #cdd1d8;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
#tv-home .tvh-btn:hover{border-color:#b6bcc6;background:#fafafb}
#tv-home .tvh-btn.is-dark{background:#1f2125;color:#f4f4f5;border-color:#4b525d}
#tv-home .tvh-btn.is-dark:hover{background:#2b2e33;border-color:#5c646f}
#tv-home .tvh-btn.is-green{background:var(--accent-neon);color:#10210a;border-color:var(--accent-neon)}

@media (max-width:1100px){ #tv-home .tvh-hero h1{font-size:clamp(38px,5.4vw,64px)} }
@media (max-width:640px){
  /* Below the pinning breakpoint the hero flows normally under an absolute
     nav, so here it does have to clear the nav itself. */
  #tv-home .tvh-hero{padding:calc(67px + 40px) 18px 0}
  #tv-home .tvh-hero .tvh-eyebrow{font-size:13.5px;height:28px;padding:0 11px;margin-bottom:20px}
  #tv-home .tvh-hero h1{font-size:36px;letter-spacing:-.025em}
  #tv-home .tvh-hero p{font-size:15.5px;margin-top:20px}
  #tv-home .tvh-hero-actions{margin-top:26px}
}

/* ── product shell ──────────────────────────────────────────────────
   Frame metrics measured off the reference: 75% of the viewport capped at
   1440, a 16px-radius bezel with 6px of padding on the sides and bottom only
   (so the window chrome sits flush at the top), and a five-step shadow rather
   than one big blur - that is what keeps the panel sitting on the page
   instead of floating over it. */
#tv-home .tvh-stage{
  /* 75% at rest; the 0.95 settle below takes it to 1026. Vertical placement
     comes from the pinned layer now, so no margin here. */
  width:75%;max-width:1440px;margin:0 auto;padding:0;
  position:relative;
  /* One shared scale for the whole composition, flipped once when scrolling
     starts - not a per-frame scrub. Every panel is a child, so they shrink
     together and their relative offsets never need recalculating. */
  transform:scale(1);
  transform-origin:50% 50%;
  transition:transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#tv-home .tvh-stage.is-settled{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){
  #tv-home .tvh-stage,#tv-home .tvh-stage.is-settled{transform:none;transition:none}
}
#tv-home .tvh-shell{
  background:rgba(246,247,248,.8);
  border:0;border-radius:16px;padding:0 6px 6px;overflow:hidden;position:relative;
  box-shadow:
    0 0 0 1px rgba(11,13,24,.06),
    0 1px 2px rgba(11,13,24,.024),
    0 3px 6px rgba(11,13,24,.03),
    0 8px 14px rgba(11,13,24,.035),
    0 16px 28px rgba(11,13,24,.04);
}
/* The screen inside the bezel keeps square corners; the frame's own radius
   plus overflow:hidden rounds what shows. */
#tv-home .tvh-hub{
  border-radius:0;background:#fff;overflow:hidden;
  /* Cropped to the reference's window height. Taller than this and the
     floating panels sit over the middle of the screen rather than its edges. */
  /* 619 is the whole window; the chrome bar and the bezel's bottom edge come
     out of it so the frame totals the reference's height, not 619 plus trim. */
  height:calc(619px - 44px - 6px);min-height:0;
}
@media (max-width:1200px){ #tv-home .tvh-stage{width:88%} }
@media (max-width:900px){ #tv-home .tvh-stage{width:auto;margin:64px 16px 72px} }

/* ── pinned hero layers ─────────────────────────────────────────────
   The section is one viewport plus 307px of travel. Inside it the ground and
   the headline pin under the nav while the composition pins to the very top,
   so the composition rides up over the headline as you scroll rather than
   pushing it away. All three are separate layers; only the headline takes
   pointer events. */
#tv-home .tvh-hero-sec{position:relative;min-height:calc(100vh + 307px)}
#tv-home .tvh-hero-layers{position:relative;z-index:10}
#tv-home .tvh-hero-pin{position:sticky;top:115px;height:366px}
/* 366 + 900 stacks to 1266 in flow; the reference's section is 1207, so the
   composition layer overlaps the headline layer by the 59px difference. */
#tv-home .tvh-comp-pin{position:sticky;top:0;height:100vh;margin-top:-59px;pointer-events:none}

#tv-home .tvh-ground{
  position:sticky;top:115px;height:784px;z-index:0;overflow:hidden;pointer-events:none;
  margin-bottom:-784px;
}
#tv-home .tvh-ground i{position:absolute;inset:0;display:block}
/* the tint rising from the bottom, held well back at 70% */
#tv-home .tvh-g-glow{
  opacity:.7;
  background-image:radial-gradient(90% 80% at 50% 100%, #ecf7e6 0%, #cfe9c2 45%, #a3cf8d 100%);
}
/* hairline columns on an 8px pitch - fine enough to read as paper texture
   rather than as a grid */
#tv-home .tvh-g-rules{
  opacity:.4;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.78) 0px, rgba(255,255,255,.78) 1px,
    rgba(255,255,255,0) 1px, rgba(255,255,255,0) 8px);
}
/* an oversized white radial that keeps the top of the hero on paper */
#tv-home .tvh-g-fade{
  left:-50%;right:-50%;width:200%;
  background-image:radial-gradient(70% 106.667% at 50% 0%, #fff 32%, rgba(255,255,255,0) 64%);
}

#tv-home .tvh-float-win{
  position:absolute;overflow:hidden;border-radius:16px;
  background:rgba(246,247,248,.8);
  box-shadow:
    0 0 0 1px rgba(11,13,24,.06),
    0 1px 2px rgba(11,13,24,.024),
    0 3px 6px rgba(11,13,24,.03),
    0 8px 14px rgba(11,13,24,.035),
    0 16px 28px rgba(11,13,24,.04);
}
#tv-home .tvh-float-win.is-dark{background:rgba(0,0,0,.82)}
#tv-home .tvh-win-top{
  display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;
}
#tv-home .tvh-win-top .tvh-dot{width:7px;height:7px}
#tv-home .tvh-win-top.is-dark .tvh-dot{background:rgba(255,255,255,.28)}
#tv-home .tvh-win-body{
  background:#fff;border-radius:9px;margin:0 6px 6px;padding:12px 13px;
  min-height:0;
}
#tv-home .tvh-float-win.is-dark .tvh-win-body{background:#0c0e0b}

/* proportions measured against the main window */
#tv-home .tvh-float-win.is-tl{left:-17.0%;top:-22px;width:24.9%;z-index:2}
#tv-home .tvh-float-win.is-r {left:91.7%;top:43px;width:25.1%;z-index:1}
#tv-home .tvh-float-win.is-bl{left:-13.6%;top:256px;width:27.8%;z-index:4}

#tv-home .tvh-fw-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#9aa197;font-weight:650}
#tv-home .tvh-fw-big{margin-top:7px;font-size:26px;font-weight:700;letter-spacing:-.04em;color:#171a16;line-height:1}
#tv-home .tvh-fw-delta{margin-top:5px;font-size:11px;color:#3f7d3f;font-weight:600}
#tv-home .tvh-fw-rows{
  display:flex;justify-content:space-between;gap:10px;margin-top:9px;
  font-size:11.5px;color:#676d64;
}
#tv-home .tvh-fw-rows b{color:#171a16}
#tv-home .tvh-fw-item{padding:8px 0;border-top:1px solid rgba(20,26,18,.08)}
#tv-home .tvh-fw-item:first-of-type{border-top:0}
#tv-home .tvh-fw-item b{display:block;font-size:11.5px;color:#171a16}
#tv-home .tvh-fw-item span{display:block;margin-top:2px;font-size:10.5px;color:#8c9488}
#tv-home .tvh-log{
  font-family:"Roboto Mono",ui-monospace,monospace;font-size:10px;line-height:1.9;
  color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#tv-home .tvh-log i{font-style:normal;color:rgba(255,255,255,.32);margin-right:8px}
#tv-home .tvh-log.is-ok{color:#88ef56}
#tv-home .tvh-log.is-cursor{color:#88ef56}

/* Below the point where the main window still has room either side, the
   floats would cover it rather than frame it. */
@media (max-width:1200px){
  #tv-home .tvh-float-win.is-tl,#tv-home .tvh-float-win.is-bl{display:none}
  #tv-home .tvh-float-win.is-r{left:82%;width:22%}
}
@media (max-width:900px){
  /* Mobile viewport units shift as the browser chrome hides, which makes a
     100vh pinned layer jump. Below this width the stack flows normally. */
  #tv-home .tvh-hero-sec{min-height:0}
  #tv-home .tvh-hero-pin,#tv-home .tvh-comp-pin{position:static;height:auto;margin-top:0}
  #tv-home .tvh-ground{position:absolute;inset:0;height:auto;margin-bottom:0}
  #tv-home .tvh-float-win{display:none}
  #tv-home .tvh-ground{padding-bottom:0}
}

#tv-home .tvh-shell-top{
  height:44px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  padding:0 13px;gap:7px;background:var(--panel2);
}
#tv-home .tvh-dot{width:8px;height:8px;border-radius:50%;background:#d9dade}
#tv-home .tvh-shell-label{font-size:10px;color:#999;margin-left:8px}
#tv-home .tvh-shell-body{display:grid;grid-template-columns:205px 1fr;min-height:520px}
#tv-home .tvh-side{border-right:1px solid var(--line);background:var(--panel2);padding:14px 10px}
#tv-home .tvh-side-title{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#9a9ba1;margin:10px 8px 7px}
#tv-home .tvh-side-item{
  font-size:13px;padding:7px 9px;border-radius:8px;color:#4a4c53;
  display:flex;align-items:center;gap:8px;
}
#tv-home .tvh-side-item.is-active{background:#eef0f2;color:#111;font-weight:600}
#tv-home .tvh-main{padding:14px 16px 18px;min-width:0}
#tv-home .tvh-main-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
#tv-home .tvh-main-bar h3{margin:0;font-size:15px;letter-spacing:-.02em}
#tv-home .tvh-mini{
  border:1px solid var(--line);background:#fff;border-radius:7px;
  padding:6px 10px;font-size:12px;font-weight:600;
}
#tv-home .tvh-mini.is-dark{background:#111;color:#fff;border-color:#111}

/* table */
#tv-home .tvh-table{border:1px solid var(--line);border-radius:11px;overflow:hidden;font-size:12.5px}
#tv-home .tvh-tr{display:grid;grid-template-columns:1.7fr 1fr .8fr .9fr .8fr;align-items:center;
  padding:11px 13px;border-bottom:1px solid var(--line)}
#tv-home .tvh-tr:last-child{border-bottom:0}
#tv-home .tvh-tr.is-head{background:var(--panel2);font-size:11px;color:#8b8d94;text-transform:uppercase;letter-spacing:.05em}
#tv-home .tvh-co{display:flex;align-items:center;gap:9px;font-weight:600;min-width:0}
#tv-home .tvh-avatar{
  width:22px;height:22px;border-radius:6px;background:#eef0f2;color:#5c5e66;
  display:grid;place-items:center;font-size:11px;font-weight:700;flex:0 0 auto;
}
#tv-home .tvh-pill{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:650;
  background:#f0f1f3;color:#54565d;
}
#tv-home .tvh-pill.is-green{background:var(--accent-wash);color:#2c7a17}
#tv-home .tvh-pill.is-warn{background:#fdf0e6;color:#b4621c}

/* floating cards over the shell */
#tv-home .tvh-float{
  position:absolute;background:#fff;border:1px solid var(--line-strong);
  border-radius:13px;box-shadow:0 18px 46px rgba(0,0,0,.14);padding:14px;width:270px;
}
#tv-home .tvh-float-title{font-size:12px;font-weight:700;margin-bottom:6px}
#tv-home .tvh-float p{margin:0;font-size:12px;color:#6b6d74;line-height:1.45}
#tv-home .tvh-float.is-ask{right:26px;top:96px}
#tv-home .tvh-float.is-reply{left:150px;bottom:34px}
#tv-home .tvh-bar{height:4px;border-radius:3px;background:#111;width:64px;margin:10px 0}

/* ══ HUB RECREATION ═════════════════════════════════════════════════
   Not a generic dashboard: this is the hub's own Reviews screen, rebuilt in
   markup. The palette, the 34px platform badges with the mark knocked out to
   white, the row grid and the per-platform star colour are all lifted from
   reputation.html so the mockup and the product cannot drift apart.
   Nothing here is a control - no button, no input, no href - so there is
   nothing to click and nothing to tab into. */
#tv-home .tvh-hub{
  --rv-bg:#f4f8f2; --rv-line:rgba(20,26,18,.08);
  --rv-ink:#171a16; --rv-muted:#676d64; --rv-muted-2:#8c9488;
  --rv-green:#4a7c52; --rv-star-off:#d8dcd4;
  /* 64px is the hub's own collapsed rail width. */
  display:grid;grid-template-columns:64px minmax(0,1fr);min-height:0;
  user-select:none;cursor:default;
}
#tv-home .tvh-hub *{pointer-events:none}

/* ── window views ───────────────────────────────────────────────────
   The window cycles through three product screens. They are stacked rather
   than swapped in and out of the DOM, so the frame never reflows as one
   replaces another and the crossfade has something to fade between. */
#tv-home .tvh-hub-views{position:relative;min-width:0}
#tv-home .tvh-view{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .55s ease, visibility 0s linear .55s;
}
#tv-home .tvh-view.is-on{
  opacity:1;visibility:visible;
  transition:opacity .55s ease, visibility 0s linear 0s;
}
/* With the script absent the first view still renders in normal flow, so the
   window is never blank. */
#tv-home .tvh-hub-views:not([data-cycling]) .tvh-view[data-view="reviews"]{
  position:relative;opacity:1;visibility:visible;
}

/* report rows carry a letter instead of a platform mark */
#tv-home .tvh-badge.is-rep{
  background:rgba(20,26,18,.06);color:var(--rv-muted);
  font-size:13px;font-weight:700;
}

/* per-outlet bars in the reports view */
#tv-home .tvh-bars{margin-top:4px}
#tv-home .tvh-bar-row{
  display:grid;grid-template-columns:96px minmax(0,1fr) 68px;
  align-items:center;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--rv-line);font-size:11.5px;color:var(--rv-muted);
}
#tv-home .tvh-bar-row:last-child{border-bottom:0}
#tv-home .tvh-bar-row i{
  display:block;height:7px;border-radius:4px;width:var(--v,50%);
  background:linear-gradient(90deg, rgba(136,239,86,.55), rgba(74,124,82,.85));
}
#tv-home .tvh-bar-row b{text-align:right;color:var(--rv-ink);font-size:12px}

#tv-home .tvh-rail{
  border-right:1px solid var(--rv-line);background:var(--rv-bg);
  padding:14px 0;display:flex;flex-direction:column;align-items:center;gap:2px;
}
#tv-home .tvh-rail-mark{padding:2px 0 14px}
#tv-home .tvh-rail-mark img{width:26px;height:26px;border-radius:7px;display:block}
#tv-home .tvh-rail-item{
  width:40px;height:38px;border-radius:9px;display:grid;place-items:center;color:var(--rv-muted-2);
}
#tv-home .tvh-rail-item.is-active{background:#fff;color:var(--rv-green);box-shadow:0 1px 2px rgba(20,26,18,.06)}
/* Same stroke treatment the hub's own rail uses. */
#tv-home .tvh-rail .tvh-sb{width:18px;height:18px}

/* reviews2's own shape: a page header, three KPI cards, then ONE rounded
   surface split 40/60 into list and detail with a single rule between them -
   not two floating boxes. */
#tv-home .tvh-hub-main{padding:20px 22px;min-width:0;background:var(--rv-bg);display:flex;flex-direction:column}
#tv-home .tvh-rv-top-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
#tv-home .tvh-rv-top-bar h4{margin:0;font-size:19px;letter-spacing:-.03em;color:var(--rv-ink);font-weight:650}
#tv-home .tvh-rv-top-bar p{margin:5px 0 0;font-size:12.5px;color:var(--rv-muted)}
#tv-home .tvh-rv-controls{display:flex;gap:8px;flex:0 0 auto}
#tv-home .tvh-control{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;
  background:#fff;border:1px solid var(--rv-line);font-size:12.5px;font-weight:500;color:var(--rv-muted);
}
#tv-home .tvh-caret{
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.55;margin-left:2px;
}
#tv-home .tvh-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
#tv-home .tvh-kpi{background:#fff;border:1px solid var(--rv-line);border-radius:14px;padding:14px 16px}
#tv-home .tvh-kpi span{display:block;font-size:11px;color:var(--rv-muted-2);letter-spacing:.02em}
#tv-home .tvh-kpi b{display:block;margin-top:6px;font-size:26px;letter-spacing:-.04em;color:var(--rv-ink);font-weight:680;line-height:1}
#tv-home .tvh-kpi i{display:block;margin-top:6px;font-style:normal;font-size:11px;color:var(--rv-muted-2)}
#tv-home .tvh-kpi i.is-ok{color:var(--rv-green)}
#tv-home .tvh-kpi i.is-bad{color:#bd5340}

#tv-home .tvh-lower{
  flex:1 1 auto;min-height:0;margin-top:18px;
  display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  background:#fff;border:1px solid var(--rv-line);border-radius:18px;overflow:hidden;
}
#tv-home .tvh-list-pane{padding:14px 8px 18px;border-right:1px solid var(--rv-line);min-width:0}
#tv-home .tvh-detail-pane{padding:22px 24px;min-width:0}
#tv-home .tvh-listbar{display:flex;align-items:center;gap:8px;padding:0 8px 12px}
#tv-home .tvh-search{
  flex:1 1 auto;display:inline-flex;align-items:center;gap:8px;min-width:0;
  padding:8px 11px;border-radius:9px;background:rgba(20,26,18,.03);border:1px solid var(--rv-line);
  font-size:12px;color:var(--rv-muted-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#tv-home .tvh-sort{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  font-size:12px;color:var(--rv-muted);
}
#tv-home .tvh-rv{
  display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:12px;
  padding:12px 8px;border-top:1px solid var(--rv-line);
}
#tv-home .tvh-rv:first-of-type{border-top:0}
/* The hub marks the open row on its edge rather than by fill alone. */
#tv-home .tvh-rv.is-sel{background:var(--rv-bg);box-shadow:inset 2.5px 0 0 var(--rv-muted)}
#tv-home .tvh-rv-main{min-width:0;display:flex;flex-direction:column;gap:5px}
#tv-home .tvh-rv-top{display:flex;align-items:baseline;gap:10px}
#tv-home .tvh-rv-bot{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
#tv-home .tvh-rv-text{
  font-size:12.5px;line-height:1.45;color:var(--rv-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#tv-home .tvh-outlet{font-size:11px;color:var(--rv-muted-2)}
#tv-home .tvh-outlet:before{content:"·";margin-right:9px}
/* .tvh-who is the chat avatar circle further up this file - a 22px black dot.
   The reviewer name needs its own name or it inherits that shape. */
#tv-home .tvh-name{font-size:13.5px;color:var(--rv-ink);font-weight:500;flex:1 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tv-home .tvh-name.is-strong{font-size:15px;font-weight:600}
#tv-home .tvh-when{font-size:11.5px;color:var(--rv-muted-2);flex:0 0 auto}

#tv-home .tvh-badge{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
}
#tv-home .tvh-badge.is-swiggy{background:#fc8019}
#tv-home .tvh-badge.is-zomato{background:#cb202d}
/* Both marks are single-colour SVGs knocked out to white on the brand fill,
   and both are sized by WIDTH - webflow.css puts max-width:100% on every
   image, so sizing by height leaves the mark full-width and unchanged. */
#tv-home .tvh-badge img{filter:brightness(0) invert(1);display:block;height:auto}
#tv-home .tvh-badge.is-swiggy img{width:17px}
#tv-home .tvh-badge.is-zomato img{width:27px}

#tv-home .tvh-stars{font-size:12px;letter-spacing:1px;color:var(--rv-star-off);flex:0 0 auto}
#tv-home .tvh-stars.is-swiggy{color:#fc8019}
#tv-home .tvh-stars.is-zomato{color:#e23744}
#tv-home .tvh-state{font-size:11px;color:var(--rv-muted-2)}
#tv-home .tvh-state.is-ok{color:var(--rv-green);font-weight:600}
#tv-home .tvh-state.is-warn{color:#b07f28;font-weight:600}
#tv-home .tvh-state.is-bad{color:#bd5340;font-weight:600}

#tv-home .tvh-d-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
#tv-home .tvh-d-head > div{flex:1 1 auto;min-width:0}
#tv-home .tvh-quote{
  margin:0;font-size:15px;line-height:1.55;color:var(--rv-ink);
  background:#fff;border:1px solid var(--rv-line);border-radius:11px;padding:14px 16px;
}
#tv-home .tvh-d-label{
  margin:18px 0 8px;font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--rv-muted-2);font-weight:650;
}
#tv-home .tvh-answer{
  margin:0;font-size:14px;line-height:1.55;color:var(--rv-ink);
  background:#fff;border:1px solid var(--rv-line);border-left:2.5px solid var(--rv-green);
  border-radius:11px;padding:14px 16px;
}
#tv-home .tvh-d-foot{margin-top:10px;font-size:11.5px;color:var(--rv-muted-2)}
#tv-home .tvh-d-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
#tv-home .tvh-d-fact{background:#fff;border:1px solid var(--rv-line);border-radius:10px;padding:10px 12px}
#tv-home .tvh-d-fact span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--rv-muted-2)}
#tv-home .tvh-d-fact b{display:block;margin-top:4px;font-size:13px;color:var(--rv-ink)}

/* ══ HUB CHAT PAGE ══════════════════════════════════════════════════
   The hub's own Chat screen (reputation.html #page-chat), rebuilt in markup:
   the outlet picker and New chat topbar, the 780px centred thread, the 32px
   accent avatar, the two bubble treatments (AI tinted with a squared
   top-left, user accent-tinted with a squared bottom-right) and the composer
   with its footnote. Static - no textarea, no buttons. */
#tv-home .tvh-wc{
  --wc-bg:#fff; --wc-line:rgba(20,26,18,.10); --wc-ink:#171a16;
  --wc-muted:#676d64; --wc-accent:136,239,86; --wc-green:#3f7d3f;
  border:1px solid var(--line);border-radius:13px;overflow:hidden;background:var(--wc-bg);
  display:flex;flex-direction:column;user-select:none;cursor:default;
}
#tv-home .tvh-wc *{pointer-events:none}
#tv-home .tvh-sb{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

#tv-home .tvh-wc-top{
  display:flex;align-items:center;gap:8px;padding:14px 20px;
  border-bottom:1px solid var(--wc-line);
}
#tv-home .tvh-wc-rest,#tv-home .tvh-wc-new{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;
  background:rgba(20,26,18,.03);border:1px solid var(--wc-line);
  font-size:13px;font-weight:500;color:var(--wc-muted);
}
#tv-home .tvh-wc-new{margin-left:auto}
#tv-home .tvh-wc-chev{width:13px;height:13px}

#tv-home .tvh-wc-scroll{flex:1 1 auto;min-height:0}
#tv-home .tvh-wc-inner{
  max-width:780px;margin:0 auto;padding:28px 24px 12px;
  display:flex;flex-direction:column;gap:18px;
}
#tv-home .tvh-wc-row{display:flex;align-items:flex-start;gap:12px}
#tv-home .tvh-wc-row.is-user{justify-content:flex-end}
#tv-home .tvh-wc-av{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;margin-top:2px;
  background:rgba(var(--wc-accent),.20);border:1px solid rgba(var(--wc-accent),.45);
  display:grid;place-items:center;color:var(--wc-green);
  font-family:Geist,Inter,sans-serif;font-size:13px;font-weight:700;
}
#tv-home .tvh-wc-bubble{
  max-width:78%;padding:12px 16px;border-radius:16px;
  font-size:14px;line-height:1.7;color:rgba(23,26,22,.82);
}
#tv-home .tvh-wc-bubble p{margin:0 0 10px;font-size:14px;line-height:1.7;color:inherit}
#tv-home .tvh-wc-bubble p:last-child{margin-bottom:0}
#tv-home .tvh-wc-bubble b{color:var(--wc-ink);font-weight:600}
#tv-home .tvh-wc-bubble.is-ai{
  background:rgba(20,26,18,.03);border:1px solid var(--wc-line);border-top-left-radius:6px;
}
#tv-home .tvh-wc-bubble.is-user{
  background:rgba(var(--wc-accent),.20);border:1px solid rgba(var(--wc-accent),.42);
  border-bottom-right-radius:6px;color:rgba(23,26,22,.9);
}

#tv-home .tvh-wc-composer-wrap{padding:12px 20px 16px}
#tv-home .tvh-wc-composer{
  display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;
  border:1px solid var(--wc-line);border-radius:14px;background:rgba(20,26,18,.02);
}
#tv-home .tvh-wc-input{flex:1 1 auto;font-size:14px;color:#9aa197}
#tv-home .tvh-wc-send{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(20,26,18,.06);color:#9aa197;
}
#tv-home .tvh-wc-send .tvh-sb{width:16px;height:16px}
#tv-home .tvh-wc-foot{margin-top:9px;text-align:center;font-size:11.5px;color:#9aa197}

/* ── section frame ──────────────────────────────────────────────── */
#tv-home .tvh-section{border-top:1px solid var(--line);padding:88px 0}
#tv-home .tvh-section.is-panel{background:var(--panel2)}
#tv-home .tvh-wrap{max-width:var(--max);margin:auto;padding:0 18px}
#tv-home .tvh-kicker{
  font-size:11px;text-transform:uppercase;letter-spacing:.13em;
  color:#9a9ba1;font-weight:650;margin-bottom:16px;
}
#tv-home .tvh-section h2{
  font-size:clamp(32px,4.4vw,54px);line-height:1.02;letter-spacing:-.05em;
  font-weight:720;margin:0;max-width:900px;
}
#tv-home .tvh-lead{max-width:660px;margin:20px 0 0;color:#63656d;font-size:17px;line-height:1.55;letter-spacing:-.012em}

/* ── tabs ───────────────────────────────────────────────────────── */
#tv-home .tvh-tabs{display:flex;gap:26px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:38px 0 34px}
#tv-home .tvh-tab{
  background:transparent;border:0;padding:0 0 12px;font-size:14px;font-weight:600;
  color:#8b8d94;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;
}
#tv-home .tvh-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
#tv-home .tvh-tabgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
#tv-home .tvh-tabgrid h3{font-size:30px;letter-spacing:-.035em;margin:0 0 12px;font-weight:700}
#tv-home .tvh-tabgrid p{margin:0;color:#63656d;font-size:15.5px;line-height:1.6}
#tv-home .tvh-checks{margin-top:22px;display:grid;gap:11px}
#tv-home .tvh-check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#3f4147}
#tv-home .tvh-check span{
  width:18px;height:18px;border-radius:50%;background:#111;color:#fff;flex:0 0 auto;
  display:grid;place-items:center;font-size:10px;margin-top:1px;
}
#tv-home .tvh-panel{display:none}
#tv-home .tvh-panel.is-on{display:block}

/* ── bento ──────────────────────────────────────────────────────── */
#tv-home .tvh-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:40px}
#tv-home .tvh-card{
  border:1px solid var(--line);border-radius:15px;background:#fff;padding:24px;
}
#tv-home .tvh-card h3{margin:0 0 8px;font-size:19px;letter-spacing:-.03em}
#tv-home .tvh-card p{margin:0;color:#6b6d74;font-size:14px;line-height:1.55}
#tv-home .tvh-s7{grid-column:span 7}
#tv-home .tvh-s5{grid-column:span 5}
#tv-home .tvh-s6{grid-column:span 6}
#tv-home .tvh-s4{grid-column:span 4}
#tv-home .tvh-mini-rows{margin-top:20px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
#tv-home .tvh-mini-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line);font-size:12px}
#tv-home .tvh-mini-row:last-child{border-bottom:0}
#tv-home .tvh-mini-row span{padding:9px 12px;border-right:1px solid var(--line);color:#54565d}
#tv-home .tvh-mini-row span:last-child{border-right:0}

/* chat bubbles inside a card */
#tv-home .tvh-chat{margin-top:18px;border:1px solid var(--line);border-radius:11px;padding:13px;background:var(--panel2)}
#tv-home .tvh-ask{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 11px;font-size:12.5px;color:#8b8d94}
#tv-home .tvh-msg{display:flex;gap:9px;margin-top:11px;align-items:flex-start}
#tv-home .tvh-who{
  width:22px;height:22px;border-radius:50%;background:#111;color:#fff;flex:0 0 auto;
  display:grid;place-items:center;font-size:10px;font-weight:700;
}
#tv-home .tvh-msg.is-me .tvh-who{background:var(--accent-neon);color:#10210a}
#tv-home .tvh-bubble{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;line-height:1.5}

/* ── list ───────────────────────────────────────────────────────── */
#tv-home .tvh-list{margin-top:40px;border-top:1px solid var(--line)}
#tv-home .tvh-list-item{
  display:grid;grid-template-columns:.9fr 1.4fr;gap:34px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
#tv-home .tvh-list-item b{font-size:18px;letter-spacing:-.025em}
#tv-home .tvh-list-item p{margin:0;color:#6b6d74;font-size:15px;line-height:1.55}

/* ── logo cloud ─────────────────────────────────────────────────── */
#tv-home .tvh-cloud{
  margin-top:40px;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  display:grid;grid-template-columns:repeat(6,1fr);
}
#tv-home .tvh-cell{
  display:grid;place-items:center;padding:26px 12px;
  border-right:1px solid var(--line);
  font-size:13.5px;font-weight:650;color:#54565d;
}
#tv-home .tvh-cell:last-child{border-right:0}
/* Square marks and wide wordmarks in one row: a single 26px cap sized the
   square icons correctly and shrank Zomato's 92x20 wordmark to a 6px sliver.
   Capping height instead lets each logo find its own width. */
#tv-home .tvh-cell img{max-width:76px;max-height:24px;width:auto;height:auto;margin-bottom:9px;display:block;object-fit:contain}

/* ── stats ──────────────────────────────────────────────────────── */
#tv-home .tvh-stats{
  margin-top:40px;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  display:grid;grid-template-columns:repeat(3,1fr);
}
#tv-home .tvh-stat{padding:28px 24px;border-right:1px solid var(--line)}
#tv-home .tvh-stat:last-child{border-right:0}
#tv-home .tvh-stat strong{display:block;font-size:38px;letter-spacing:-.05em;font-weight:730;line-height:1}
#tv-home .tvh-stat span{display:block;margin-top:7px;font-size:13px;color:#7c7e86}

/* ── story / feature split ──────────────────────────────────────── */
#tv-home .tvh-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;margin-top:44px}
#tv-home .tvh-split img{width:100%;height:auto;border-radius:14px;display:block;border:1px solid var(--line)}
#tv-home .tvh-split h3{font-size:28px;letter-spacing:-.035em;margin:0 0 14px;font-weight:700}
#tv-home .tvh-split p{margin:0 0 14px;color:#63656d;font-size:16px;line-height:1.6}
#tv-home .tvh-note{font-size:13px;color:#8b8d94}

/* report trio — layered, daily furthest back
   Three flex children with no gap, each pulled inward by its own transform, so
   the overlap comes from the transforms rather than negative margins and the
   row stays centred at any width. */
#tv-home .tvh-stack{display:flex;justify-content:center;align-items:flex-end;margin-top:52px}
#tv-home .tvh-stack .tvh-report{flex:0 0 auto;width:min(300px,25vw);transition:transform .45s ease}
#tv-home .tvh-stack .is-back {transform:translateX(122px) rotate(-6deg) scale(.9);z-index:1}
#tv-home .tvh-stack .is-mid  {transform:rotate(-1.5deg) scale(.96);z-index:2}
#tv-home .tvh-stack .is-front{transform:translateX(-122px) rotate(5deg);z-index:3}
/* The fan opens on hover so the two behind become readable. */
#tv-home .tvh-stack:hover .is-back {transform:translateX(58px) rotate(-8deg) scale(.92)}
#tv-home .tvh-stack:hover .is-front{transform:translateX(-58px) rotate(7deg)}
/* Each card's own description would be buried under the card in front, so the
   stack keeps only the label. */
#tv-home .tvh-stack .tvh-report-cap p{display:none}
#tv-home .tvh-stack .tvh-report-cap{padding:11px 14px}
#tv-home .tvh-report{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
/* The daily sample is a redacted skeleton - almost pure white - while the
   weekly and monthly covers are near-black. Dropped straight onto a white
   card the first reads as an empty box beside two dark ones. Standing all
   three on a grey shelf with a page border and shadow makes the white one
   read as a document and keeps the set consistent. */
#tv-home .tvh-shot{background:#eceef0;padding:20px 20px 0}
#tv-home .tvh-report img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line-strong);border-bottom:0;border-radius:7px 7px 0 0;
  box-shadow:0 10px 26px rgba(10,18,35,.14);
}
#tv-home .tvh-report-cap{padding:15px 17px}
#tv-home .tvh-report-cap b{font-size:15px;letter-spacing:-.02em}
#tv-home .tvh-report-cap p{margin:4px 0 0;font-size:13px;color:#7c7e86;line-height:1.5}

/* ── faq ────────────────────────────────────────────────────────── */
#tv-home .tvh-faq{margin-top:40px;border-top:1px solid var(--line)}
#tv-home .tvh-q{border-bottom:1px solid var(--line)}
#tv-home .tvh-q summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-size:17px;font-weight:640;letter-spacing:-.02em;
}
#tv-home .tvh-q summary::-webkit-details-marker{display:none}
#tv-home .tvh-q summary:after{
  content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:400;color:#8b8d94;
}
#tv-home .tvh-q[open] summary:after{content:"\2013"}
#tv-home .tvh-q p{margin:0 0 22px;color:#63656d;font-size:15px;line-height:1.65;max-width:760px}

/* ── final cta ──────────────────────────────────────────────────── */
#tv-home .tvh-final{text-align:center;border-top:1px solid var(--line);padding:96px 18px 104px}
#tv-home .tvh-final h2{margin:0 auto;max-width:820px}
#tv-home .tvh-final .tvh-hero-actions{margin-top:28px}

/* ── reveal ─────────────────────────────────────────────────────── */
#tv-home .tvh-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
#tv-home .tvh-reveal.is-in{opacity:1;transform:none}

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width:1100px){
  /* Detail pane goes first as the shell narrows; rail and list carry it. */
  #tv-home .tvh-detail-pane{display:none}
  #tv-home .tvh-lower{grid-template-columns:1fr}
  #tv-home .tvh-list-pane{border-right:0}
  #tv-home .tvh-tabgrid{grid-template-columns:1fr;gap:34px}
  #tv-home .tvh-split{grid-template-columns:1fr;gap:32px}
  #tv-home .tvh-cloud{grid-template-columns:repeat(3,1fr)}
  #tv-home .tvh-cell{border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  #tv-home .tvh-shell-body{grid-template-columns:1fr;min-height:0}
  #tv-home .tvh-side{display:none}
  /* Three panes will not fit a phone. The rail goes first - it is the least
     informative - then the detail pane, leaving the review list, which is what
     the screen is actually about. */
  #tv-home .tvh-hub{grid-template-columns:1fr;min-height:0}
  #tv-home .tvh-rail{display:none}
  #tv-home .tvh-hub-main{padding:16px}
  #tv-home .tvh-kpis{grid-template-columns:1fr}
  #tv-home .tvh-rv-top-bar{flex-direction:column;gap:12px}
  /* With the sidebar gone the shell's desktop min-height left a tall empty
     band under the table, and the header buttons wrapped mid-word. */
  #tv-home .tvh-mini{white-space:nowrap}
  #tv-home .tvh-main-bar h3{font-size:14px}
  #tv-home .tvh-float{display:none}
  #tv-home .tvh-s7,#tv-home .tvh-s5,#tv-home .tvh-s6,#tv-home .tvh-s4{grid-column:span 12}
  /* A vertical pile on small screens, nudged left and right so the edges of
     the covers behind stay visible. */
  #tv-home .tvh-stack{flex-direction:column;align-items:center}
  #tv-home .tvh-stack .tvh-report{width:min(250px,64vw)}
  #tv-home .tvh-stack .is-back {transform:translateX(-12px) rotate(-2deg)}
  #tv-home .tvh-stack .is-mid  {transform:translateX(10px) rotate(1.5deg);margin-top:-88px}
  #tv-home .tvh-stack .is-front{transform:translateX(-4px) rotate(-1deg);margin-top:-88px}
  #tv-home .tvh-stack:hover .is-back {transform:translateX(-12px) rotate(-2deg)}
  #tv-home .tvh-stack:hover .is-front{transform:translateX(-4px) rotate(-1deg)}
  #tv-home .tvh-list-item{grid-template-columns:1fr;gap:8px}
  #tv-home .tvh-stats{grid-template-columns:1fr}
  #tv-home .tvh-stat{border-right:0;border-bottom:1px solid var(--line)}
  #tv-home .tvh-stat:last-child{border-bottom:0}
}
@media (max-width:640px){
  #tv-home .tvh-section{padding:64px 0}
  #tv-home .tvh-wrap{padding:0 16px}
  #tv-home .tvh-tr{grid-template-columns:1.6fr .9fr .9fr;font-size:12px}
  #tv-home .tvh-tr > :nth-child(n+4){display:none}
  #tv-home .tvh-cloud{grid-template-columns:repeat(2,1fr)}
}
/* Same selector as the animation so the guard cannot lose a specificity tie. */
@media (prefers-reduced-motion:reduce){
  #tv-home .tvh-reveal{opacity:1;transform:none;transition:none}
  #tv-home .tvh-stack .tvh-report{transition:none}
}