/* ─── Tessera design tokens ─────────────────────────────────────────── */
:root{
  --paper:#ECEAE2; --paper-2:#F5F3EE; --white:#FFFFFF;
  --ink:#111111; --ink-2:#4B4A44; --ink-3:#7A786F;
  --line:rgba(17,17,17,.12); --line-soft:rgba(17,17,17,.07);
  --terra:#E84A1C; --terra-dark:#C93E15; --terra-soft:rgba(232,74,28,.08);
  --chrome:#1F4ED8; --chrome-soft:rgba(31,78,216,.08);
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.06);
  --font-display:"Space Grotesk",Inter,system-ui,sans-serif;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-audience="np"]{ --chrome:#0F7A55; --chrome-soft:rgba(15,122,85,.08); }
html[data-audience="b2b"] [data-np]{display:none!important}
html[data-audience="np"] [data-b2b]{display:none!important}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 1rem/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
section{padding:88px 0}
@media(max-width:720px){section{padding:56px 0}}

h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.12}
h1{font-size:clamp(2.3rem,5.2vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.7rem,3.4vw,2.35rem);font-weight:700;margin-bottom:14px}
h3{font-size:1.16rem;font-weight:600;line-height:1.3}
.lead{color:var(--ink-2);font-size:1.09rem;max-width:62ch}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome);margin-bottom:14px}
.center{text-align:center}
.center .lead{margin-inline:auto}

.btn{display:inline-block;background:var(--terra);color:#fff;font-weight:600;font-size:.98rem;padding:13px 24px;border-radius:var(--radius-sm);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--terra-dark)}
.btn-ghost{display:inline-block;background:var(--white);color:var(--ink);font-weight:600;font-size:.98rem;padding:13px 24px;border-radius:var(--radius-sm);text-decoration:none;border:1px solid var(--line);cursor:pointer}
.btn-ghost:hover{border-color:var(--ink)}
.microcopy{font-size:.84rem;color:var(--ink-3);margin-top:12px}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(236,234,226,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.18rem;margin-right:4px}
.brand-mark{width:30px;height:30px;border-radius:8px;background:var(--terra);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.02rem;font-weight:700}
.nav-links{display:flex;gap:22px;font-size:.93rem;font-weight:500;color:var(--ink-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta .signin{font-size:.93rem;font-weight:500;text-decoration:none;color:var(--ink-2)}
.nav-cta .btn{padding:9px 16px;font-size:.9rem}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:7px 11px;font-size:1rem;cursor:pointer}
.mobile-menu{display:none;border-top:1px solid var(--line-soft);padding:14px 24px 20px;background:var(--paper)}
.mobile-menu a{display:block;padding:9px 0;text-decoration:none;font-weight:500}
@media(max-width:880px){.nav-links,.nav-cta{display:none}.menu-btn{display:block}.mobile-menu.open{display:block}}

/* Audience toggle */
.aud-toggle{display:inline-flex;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.aud-toggle button{border:none;background:transparent;padding:8px 18px;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink-2);font-family:var(--font-body)}
html[data-audience="b2b"] .aud-toggle button[data-set-audience="b2b"],
html[data-audience="np"] .aud-toggle button[data-set-audience="np"]{background:var(--ink);color:var(--paper)}

/* Hero */
.hero{padding:72px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}}
.hero .eyebrow{color:var(--terra)}
.hero .lead{margin:18px 0 26px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.shot{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.shot-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:.78rem;color:var(--ink-3)}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block}
.shot-cap{font-size:.8rem;color:var(--ink-3);padding:9px 14px;border-top:1px solid var(--line-soft)}

/* Stats strip */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
@media(max-width:720px){.stats{grid-template-columns:1fr}}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.stat b{font-family:var(--font-display);font-size:1.85rem;font-weight:700;display:block;letter-spacing:-.02em}
.stat span{color:var(--ink-2);font-size:.92rem}

/* Tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 22px}
.tabs button{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:8px 16px;font-size:.88rem;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:var(--font-body)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.panel{display:none;grid-template-columns:.9fr 1.1fr;gap:36px;align-items:center}
.panel.active{display:grid}
@media(max-width:880px){.panel.active{grid-template-columns:1fr}}
.panel p{color:var(--ink-2);margin-top:10px}

/* Cards / grids */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media(max-width:880px){.grid3,.grid2{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card .num{font-family:var(--font-display);font-weight:700;color:var(--chrome);font-size:.95rem;margin-bottom:10px;display:block}
.card p{color:var(--ink-2);font-size:.95rem;margin-top:8px}

/* Ship strip */
.ships{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
@media(max-width:1000px){.ships{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ships{grid-template-columns:1fr}}
.ship{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:.9rem}
.ship time{display:block;font-size:.75rem;color:var(--ink-3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.ship b{font-weight:600}

/* Pricing */
.billing-toggle{display:inline-flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:999px;padding:5px;margin:8px 0 30px}
.billing-toggle button{border:none;background:transparent;padding:8px 18px;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;color:var(--ink-2);font-family:var(--font-body)}
.pricing[data-billing="annual"] .billing-toggle button[data-billing-set="annual"],
.pricing[data-billing="monthly"] .billing-toggle button[data-billing-set="monthly"]{background:var(--ink);color:var(--paper)}
.pricing[data-billing="annual"] [data-price-monthly]{display:none}
.pricing[data-billing="monthly"] [data-price-annual]{display:none}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
@media(max-width:940px){.plans{grid-template-columns:1fr}}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;position:relative}
.plan.popular{border-color:var(--ink);box-shadow:var(--shadow)}
.plan .flag{position:absolute;top:-12px;left:24px;background:var(--ink);color:var(--paper);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 12px}
.plan h3{font-size:1.25rem}
.plan .desc{color:var(--ink-2);font-size:.9rem;margin:6px 0 16px}
.price{font-family:var(--font-display);font-weight:700;font-size:2.2rem;letter-spacing:-.02em}
.price small{font-size:.95rem;color:var(--ink-3);font-weight:500;font-family:var(--font-body)}
.per{font-size:.82rem;color:var(--ink-3);margin-bottom:16px}
.plan ul{list-style:none;margin:18px 0 22px;display:grid;gap:9px}
.plan li{font-size:.9rem;color:var(--ink-2);padding-left:22px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--chrome);font-weight:700}
.plan .btn{width:100%;text-align:center}
.fee-note{font-size:.83rem;color:var(--ink-3);margin-top:18px;max-width:72ch}

/* Tables */
.tablewrap{overflow-x:auto;margin-top:30px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:760px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
thead th{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);background:var(--paper-2)}
tbody tr:last-child td{border-bottom:none}
td.you{font-weight:600}
.table-note{font-size:.82rem;color:var(--ink-3);margin-top:12px}

/* FAQ */
.faq{max-width:820px;margin:34px auto 0}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:0 20px}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:400;font-size:1.2rem}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);font-size:.94rem;padding-bottom:18px}

/* Final CTA + footer */
.final{background:var(--ink);color:var(--paper);border-radius:24px;padding:64px 40px;text-align:center}
.final h2{color:#fff}
.final .lead{color:rgba(236,234,226,.75);margin:0 auto 26px}
.final .microcopy{color:rgba(236,234,226,.55)}
footer{background:var(--ink);color:rgba(236,234,226,.8);margin-top:88px;padding:64px 0 40px;font-size:.9rem}
footer a{text-decoration:none;color:rgba(236,234,226,.8)}
footer a:hover{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:44px}
@media(max-width:880px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;font-family:var(--font-display)}
.foot-grid ul{list-style:none;display:grid;gap:9px}
.foot-tag{color:rgba(236,234,226,.6);max-width:34ch;margin-top:12px;line-height:1.55}
.foot-legal{border-top:1px solid rgba(236,234,226,.15);padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:rgba(236,234,226,.5);font-size:.82rem}
.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}

/* ─── shared additions (Phase 2 part 2) ───────────────────────────── */
.brand img{width:30px;height:30px;display:block}
footer .brand img{width:30px;height:30px}
.crumbs{font-size:.85rem;color:var(--ink-3);margin-bottom:18px}
.crumbs a{text-decoration:none;color:var(--ink-3)}
.crumbs a:hover{color:var(--ink)}
.page-hero{padding:64px 0 24px}
.int-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
@media(max-width:1000px){.int-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.int-grid{grid-template-columns:1fr}}
.int{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.int h4{font-family:var(--font-display);font-size:.92rem;margin-bottom:6px}
.int p{font-size:.85rem;color:var(--ink-2)}
.calc{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-top:30px}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media(max-width:880px){.calc-grid{grid-template-columns:1fr}}
.calc label{display:block;font-weight:600;font-size:.9rem;margin:16px 0 6px}
.calc select,.calc input[type=number]{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--paper-2)}
.calc input[type=range]{width:100%;accent-color:var(--terra)}
.calc-note{font-size:.8rem;color:var(--ink-3);margin-top:4px}
.result{background:var(--paper-2);border:1px solid var(--line-soft);border-radius:12px;padding:20px;margin-top:16px}
.result .big{font-family:var(--font-display);font-weight:700;font-size:2rem;letter-spacing:-.02em}
.result table{min-width:0;font-size:.88rem}
.result td{padding:7px 0;border:none}
.result td:last-child{text-align:right;font-weight:600}
.compare-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
@media(max-width:940px){.compare-cards{grid-template-columns:1fr}}
.ccard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px}
.ccard h3{font-size:1.08rem}
.ccard p{color:var(--ink-2);font-size:.9rem;flex:1}
.ccard a{font-weight:600;color:var(--chrome);text-decoration:none;font-size:.92rem}
.steps{counter-reset:s;display:grid;gap:14px;margin-top:30px}
.step{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:20px 22px;display:flex;gap:18px;align-items:flex-start}
.step .n{font-family:var(--font-display);font-weight:700;color:var(--chrome);font-size:1.1rem;min-width:26px}
.step p{color:var(--ink-2);font-size:.93rem;margin-top:4px}


/* ═══════════════════════════════════════════════════════════════════
   v2 polish layer — depth, motion, texture (applies sitewide)
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --glow-terra: rgba(232,74,28,.10);
  --glow-chrome: rgba(31,78,216,.07);
}
html[data-audience="np"]{ --glow-chrome: rgba(15,122,85,.08); }

body{
  background:
    radial-gradient(1000px 520px at 88% -80px, var(--glow-terra), transparent 62%),
    radial-gradient(820px 460px at -8% 22%, var(--glow-chrome), transparent 60%),
    var(--paper);
}

::selection{ background: rgba(232,74,28,.22); }
:focus-visible{ outline: 2px solid var(--chrome); outline-offset: 2px; border-radius: 4px; }

h1, h2{ text-wrap: balance; }
h1{ font-size: clamp(2.5rem, 5.6vw, 3.85rem); }
.lead{ font-size: 1.12rem; }

/* Nav: animated underline + slightly glassier bar */
.nav{ background: rgba(236,234,226,.88); }
.nav-links a{ position: relative; padding-bottom: 3px; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px;
  background: var(--terra); border-radius: 2px; transition: right .22s ease;
}
.nav-links a:hover::after{ right: 0; }

/* Buttons: gradient, glow, lift */
.btn{
  background: linear-gradient(180deg, #F0561F, var(--terra-dark));
  box-shadow: 0 6px 16px rgba(232,74,28,.26), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn:hover{
  background: linear-gradient(180deg, #F2601F, var(--terra-dark));
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(232,74,28,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-ghost{ transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.btn-ghost:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(17,17,17,.09); }

/* Cards and tiles: hover lift + Tessera corner accent */
.card, .int, .ship, .plan, .ccard, .stat, .step{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover, .int:hover, .ship:hover, .ccard:hover, .stat:hover, .step:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(17,17,17,.10);
  border-color: rgba(17,17,17,.20);
}
.plan:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(17,17,17,.12); }
.card{ position: relative; overflow: hidden; }
.card::before{
  content:""; position:absolute; top:16px; right:16px; width:13px; height:13px;
  border-radius: 4px; background: var(--terra); opacity:.13;
  transition: opacity .22s ease, transform .22s ease;
}
.card:hover::before{ opacity:.9; transform: rotate(9deg) scale(1.05); }

/* Stats: gradient numerals on soft gradient tiles */
.stat{ background: linear-gradient(180deg, #FFFFFF, #FAF8F4); }
.stat b{
  background: linear-gradient(120deg, var(--terra) 10%, var(--chrome) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Eyebrows get a brand tick */
.eyebrow{ display:inline-flex; align-items:center; gap:9px; }
.eyebrow::before{ content:""; width:16px; height:3px; border-radius:2px; background: var(--terra); }

/* Product screenshots: deeper float + colored window dots */
.shot{
  box-shadow: 0 2px 6px rgba(17,17,17,.05), 0 30px 60px -22px rgba(17,17,17,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.shot:hover{ transform: translateY(-3px); box-shadow: 0 4px 8px rgba(17,17,17,.05), 0 36px 70px -22px rgba(17,17,17,.32); }
.shot-bar i:nth-child(1){ background: rgba(232,90,74,.45); }
.shot-bar i:nth-child(2){ background: rgba(232,180,74,.45); }
.shot-bar i:nth-child(3){ background: rgba(63,160,106,.45); }

/* Hero: soft glow behind the product shot */
.hero-grid > div:last-child{ position: relative; }
.hero-grid > div:last-child::before{
  content:""; position:absolute; inset:-10% -8%; z-index:-1;
  background: radial-gradient(62% 62% at 62% 38%, var(--glow-terra), transparent 72%);
}

/* Audience + billing toggles: tactile */
.aud-toggle, .billing-toggle{ box-shadow: inset 0 1px 3px rgba(17,17,17,.06); }
html[data-audience="b2b"] .aud-toggle button[data-set-audience="b2b"],
html[data-audience="np"] .aud-toggle button[data-set-audience="np"]{ box-shadow: 0 4px 12px rgba(17,17,17,.24); }
.aud-toggle button, .billing-toggle button{ transition: background .18s ease, color .18s ease; }

/* Popular plan: stronger presence */
.plan.popular{ border-width: 2px; box-shadow: 0 10px 30px rgba(17,17,17,.10); }

/* Tables: row hover + accent on our column */
tbody tr{ transition: background .15s ease; }
tbody tr:hover td{ background: #FBFAF6; }
td.you{ box-shadow: inset 3px 0 0 var(--chrome); }

/* Feature tabs: lift on active */
.tabs button{ transition: transform .16s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.tabs button:hover{ transform: translateY(-1px); border-color: var(--ink); }

/* FAQ cards */
.faq details{ transition: box-shadow .2s ease, border-color .2s ease; }
.faq details[open]{ box-shadow: 0 10px 26px rgba(17,17,17,.08); border-color: rgba(17,17,17,.2); }

/* Final CTA: layered ink with a floating Tessera tile */
.final{
  background: radial-gradient(130% 170% at 82% -30%, #2B2823, var(--ink));
  box-shadow: inset 0 0 0 1px rgba(236,234,226,.08), 0 24px 60px -28px rgba(17,17,17,.5);
  position: relative; overflow: hidden;
}
.final::after{
  content:""; position:absolute; width:320px; height:320px; right:-110px; top:-130px;
  border-radius: 40px; background: var(--terra); opacity:.13; transform: rotate(14deg);
}
.final > *{ position: relative; z-index: 1; }

/* Footer: subtle vertical depth */
footer{ background: linear-gradient(180deg, #171612, var(--ink)); }


@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   v3 — comparison tables, finished (even columns, brand hierarchy)
   ═══════════════════════════════════════════════════════════════════ */
.tablewrap{
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 14px 34px -18px rgba(17,17,17,.16);
}
.tablewrap table{
  table-layout: fixed;
  width: 100%;
  min-width: 880px;
  font-size: .88rem;
}
.tablewrap th:first-child, .tablewrap td:first-child{ width: 17%; }
.tablewrap th:nth-child(2), .tablewrap td:nth-child(2){ width: 23%; }

.tablewrap thead th{
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 13px 18px;
  color: var(--ink-3);
  background: linear-gradient(180deg, #F3F1EB, #ECEAE3);
  border-bottom: 1px solid var(--line);
}
.tablewrap th.tcol{
  color: var(--ink);
  background: linear-gradient(180deg, #EEF1FB, #E7ECFA);
}
html[data-audience="np"] .tablewrap th.tcol{
  background: linear-gradient(180deg, #EAF5F0, #E2F0E9);
}
.tablewrap th.tcol::before{
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--terra);
  margin-right: 8px;
  vertical-align: -1px;
}

.tablewrap td{
  padding: 15px 18px;
  vertical-align: top;
  line-height: 1.5;
  color: var(--ink-2);
  word-wrap: break-word;
}
.tablewrap td:first-child{
  font-weight: 600;
  color: var(--ink);
  font-size: .84rem;
  line-height: 1.45;
}
.tablewrap tbody tr:nth-child(even) td{ background: #FBFAF6; }
.tablewrap tbody tr:hover td{ background: #F7F5EF; }

/* The Tormano column reads as the answer, not one option among many */
.tablewrap td.you{
  background: var(--chrome-soft) !important;
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--chrome);
}
.tablewrap tbody tr:hover td.you{ background: var(--chrome-soft) !important; }

/* Sticky label column when the table scrolls on small screens */
@media (max-width: 980px){
  .tablewrap td:first-child, .tablewrap th:first-child{
    position: sticky; left: 0; z-index: 2;
    background: var(--white);
    box-shadow: 2px 0 6px -2px rgba(17,17,17,.12);
  }
  .tablewrap thead th:first-child{ background: #F3F1EB; }
  .tablewrap tbody tr:nth-child(even) td:first-child{ background: #FBFAF6; }
}

/* Result panels in the ROI calculator pick up the same finish */
.result table{ min-width: 0; table-layout: auto; }
.result td{ padding: 7px 0; background: none !important; box-shadow: none; }


/* ═══════════════════════════════════════════════════════════════════
   v4 — icon system + animated hero
   ═══════════════════════════════════════════════════════════════════ */
.ic{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF, var(--paper-2));
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 2px rgba(17,17,17,.05);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  margin-bottom: 14px;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.ic svg{ width: 23px; height: 23px; display: block; }
.card:hover .ic{ transform: translateY(-2px) scale(1.04); border-color: rgba(17,17,17,.18); box-shadow: 0 6px 14px rgba(17,17,17,.10); }
.card:has(.ic)::before{ display: none; }         /* icon replaces the corner tile */
.card .num + .ic, .card .ic + .num{ display: inline-flex; } /* cards keep their step labels */
.card .num{ display: block; }
.card .num ~ .ic{ margin-top: 2px; }

/* Hero: gentle float on the product frame */
.hero .shot{ animation: heroFloat 9s ease-in-out infinite; will-change: transform; }
@keyframes heroFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }

/* Hero: entrance sequence */
.hero .eyebrow, .hero h1, .hero .lead, .hero .cta-row, .hero .microcopy{
  animation: heroEnter .65s ease both;
}
.hero h1{ animation-delay: .05s; }
.hero .lead{ animation-delay: .12s; }
.hero .cta-row{ animation-delay: .2s; }
.hero .microcopy{ animation-delay: .28s; }
@keyframes heroEnter{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }

/* Hero: live-activity chips cycling over the product frame */
.live-chip{
  position: absolute; left: 16px; bottom: 56px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: .8rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 10px 24px rgba(17,17,17,.16);
  opacity: 0; pointer-events: none;
  animation: chipCycle 12s ease-in-out infinite;
}
.live-chip .dot{ width: 8px; height: 8px; border-radius: 50%; background: #3FA06A; box-shadow: 0 0 0 3px rgba(63,160,106,.18); }
.live-chip.lc2{ animation-delay: 4s; }
.live-chip.lc3{ animation-delay: 8s; }
@keyframes chipCycle{
  0%   { opacity: 0; transform: translateY(10px); }
  3.5% { opacity: 1; transform: translateY(0); }
  29%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero .shot, .live-chip, .hero .eyebrow, .hero h1, .hero .lead, .hero .cta-row, .hero .microcopy{
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .live-chip{ display: none; }
}