/* Loaded only on: Products (TERO) page. Split out of the original theme.css; the base styles stay in ../theme.css. */
/* Products (TERO) page — ported from the supplied teroproductpagev2.html, styles kept
   close to the original. Everything is scoped under .products to avoid colliding with
   shared site classes (.moment, .tag, .device etc. are common words), and the page's own
   design tokens are scoped to .products instead of :root so they don't leak sitewide.
   The page's own <nav> markup/styles are dropped — this page uses the shared SiteHeader
   component instead, per the site's convention (see about.css / contact.css). */

.products{
  --cream:#F7F5EF;
  --cream-deep:#F1EEE6;
  --navy:#14161F;
  --navy-soft:#3C3F4C;
  --gray:#767A85;
  --red:#E14A2E;
  --red-dim:rgba(225,74,46,0.10);
  --white:#FFFFFF;
  --line:rgba(20,22,31,0.1);
  background:var(--cream);
  color:var(--navy);
  font-family:var(--font-inter),sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-top:92px;
}
@media (max-width:760px){ .products{padding-top:72px;} }

.products em.accent{font-family:var(--font-playfair),serif;font-style:italic;font-weight:500;color:var(--red);}
.products-crumb{padding:26px clamp(24px,6vw,110px) 0;max-width:1600px;margin:0 auto}

/* ---------- LAYOUT SHELL ---------- */
.products .shell{display:grid;grid-template-columns:56px 1fr 1fr;}

/* ---------- STEP RAIL ---------- */
/* Header height (92px / 72px on mobile) is added as the sticky offset so the rail and
   visual column stop below the fixed SiteHeader instead of underneath it. The shell only
   uses this sticky layout above 980px, where the header is always 92px tall, so a single
   fixed offset is safe here. */
.products .rail{
  position:sticky;top:92px;height:calc(100vh - 92px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;border-right:1px solid var(--line);
}
.products .rail-dot{
  appearance:none;-webkit-appearance:none;border:0;margin:0;padding:0;font:inherit;
  width:8px;height:8px;border-radius:50%;background:var(--line);
  position:relative;transition:all .3s ease;cursor:pointer;
}
.products .rail-dot .num{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  font-size:10px;font-weight:800;color:var(--gray);letter-spacing:1px;
  opacity:0;transition:opacity .3s ease;white-space:nowrap;
}
.products .rail-dot.active{background:var(--red);width:10px;height:10px;}
.products .rail-dot.active .num{opacity:1;color:var(--red);}
.products .rail-line{position:absolute;width:1px;background:var(--line);left:50%;top:0;bottom:0;z-index:-1;}

/* ---------- STICKY VISUAL (left content column) ---------- */
.products .visual-col{position:sticky;top:92px;height:calc(100vh - 92px);display:flex;align-items:center;justify-content:center;padding:40px;border-right:1px solid var(--line);}
.products .visual-stage{width:100%;max-width:420px;position:relative;}

.products .device{background:var(--white);border-radius:20px;border:1px solid var(--line);box-shadow:0 30px 60px rgba(20,22,31,.10);overflow:hidden;transition:box-shadow .4s ease;}
.products .device-bar{display:flex;align-items:center;gap:6px;padding:14px 18px;border-bottom:1px solid var(--line);}
.products .device-bar span{width:8px;height:8px;border-radius:50%;background:#E4E1D8;}
.products .device-body{padding:22px;}
.products .device-screenshot{display:block;width:100%;height:auto;}
.products .dv-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.products .dv-title{font-size:13px;font-weight:800;color:var(--navy);}
.products .dv-pill{font-size:10px;font-weight:700;color:var(--red);background:var(--red-dim);padding:4px 10px;border-radius:100px;transition:all .3s ease;}
.products .dv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px;}
.products .dv-chip{background:var(--cream-deep);border-radius:8px;padding:8px 6px;text-align:center;border:1.5px solid transparent;transition:all .35s ease;}
.products .dv-chip.hl{border-color:var(--red);background:var(--red-dim);}
.products .dv-chip .n{font-size:14px;font-weight:800;color:var(--navy);}
.products .dv-chip .l{font-size:9px;color:var(--gray);letter-spacing:.5px;text-transform:uppercase;margin-top:2px;}
.products .dv-panels{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;}
.products .dv-bars{background:var(--cream-deep);border-radius:12px;padding:16px;border:1.5px solid transparent;transition:all .35s ease;}
.products .dv-bars.hl{border-color:var(--red);}
.products .dv-bars .lbl{font-size:10px;font-weight:700;color:var(--navy-soft);margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;}
.products .bar-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.products .bar-row .track{flex:1;height:6px;background:#E9E5DA;border-radius:6px;overflow:hidden;}
.products .bar-row .fill{height:100%;background:var(--red);border-radius:6px;}
.products .dv-donut{background:var(--cream-deep);border-radius:12px;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid transparent;transition:all .35s ease;}
.products .dv-donut.hl{border-color:var(--red);}
.products .donut{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--navy) 0% 72%, var(--red) 72% 100%);display:flex;align-items:center;justify-content:center;margin-bottom:8px;position:relative;}
.products .donut::after{content:'';width:32px;height:32px;border-radius:50%;background:var(--cream-deep);position:absolute;}
.products .dv-donut .lbl{font-size:10px;font-weight:700;color:var(--navy-soft);text-transform:uppercase;letter-spacing:.5px;}

.products .visual-caption{
  margin-top:22px;text-align:center;font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--gray);
  transition:color .3s ease;
}
.products .visual-caption em{color:var(--red);font-style:normal;}

.products .dimmed{opacity:.25;filter:grayscale(.4);transition:opacity .5s ease, filter .5s ease;}

/* ---------- NARRATIVE COLUMN ---------- */
.products .narrative-col{padding:0 64px;}
.products .moment{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  max-width:520px;
  opacity:.25;
  transition:opacity .5s ease;
}
.products .moment.active{opacity:1;}
.products .moment .tag{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);font-weight:800;margin-bottom:18px;}
.products .moment h2{font-size:38px;line-height:1.15;font-weight:800;letter-spacing:-1px;margin:0 0 18px;}
.products .moment p{font-size:16px;color:var(--gray);line-height:1.65;margin:0 0 8px;}
.products .moment .stat-row{display:flex;gap:28px;margin-top:28px;flex-wrap:wrap;}
.products .moment .stat .n{font-size:26px;font-weight:800;color:var(--navy);}
.products .moment .stat .n span{color:var(--red);}
.products .moment .stat .l{font-size:12px;color:var(--gray);margin-top:2px;max-width:140px;line-height:1.4;}
.products .btn-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;}
.products .btn-primary{background:var(--red);color:var(--white);padding:15px 28px;border-radius:100px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:transform .2s ease, box-shadow .2s ease;}
.products .btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(225,74,46,.28);}
.products .btn-secondary{background:transparent;color:var(--navy);padding:15px 26px;border-radius:100px;font-size:14px;font-weight:700;border:1.5px solid var(--line);display:inline-flex;align-items:center;gap:8px;transition:border-color .2s ease;}
.products .btn-secondary:hover{border-color:var(--navy);}

.products .last-moment{min-height:80vh;}

.products .container{max-width:1280px;margin:0 auto;padding-left:84px;padding-right:64px;}

@media (max-width:980px){
  .products .container{padding-left:28px;padding-right:28px;}
  .products .shell{grid-template-columns:1fr;}
  .products .rail{display:none;}
  .products .visual-col{position:sticky;top:92px;height:auto;z-index:5;background:var(--cream);padding:20px 24px;border-right:none;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(20,22,31,.06);}
  .products .narrative-col{padding:0 24px;}
  .products .moment{min-height:auto;padding:56px 0;opacity:1;}
  .products .moment h2{font-size:28px;}
}

/* Extra pass for small phones: the ported breakpoint above targets tablets, but the
   device mockup, stat row and footer still needed room to breathe under ~480px. */
@media (max-width:760px){
  .products .visual-col{top:72px;}
}

@media (max-width:480px){
  .products .visual-col{padding:16px 18px;}
  .products .dv-panels{gap:10px;}
  .products .dv-bars,.products .dv-donut{padding:12px;}
  .products .dv-grid{gap:6px;}
  .products .dv-chip{padding:7px 4px;}
  .products .dv-chip .n{font-size:13px;}
  .products .dv-chip .l{font-size:8px;}
  .products .donut{width:56px;height:56px;}
  .products .donut::after{width:28px;height:28px;}
  .products .moment h2{font-size:24px;letter-spacing:-.5px;}
  .products .moment p{font-size:15px;}
  .products .moment .stat-row{gap:20px;}
  .products .moment .stat .l{max-width:120px;}
  .products .btn-primary,.products .btn-secondary{padding:13px 20px;font-size:13px;}
}

@media (prefers-reduced-motion:reduce){
  .products *{transition:none!important;animation:none!important;}
}

/* Deliberate keyboard-focus ring, matching the rest of the site. */
.products :is(a,button):focus-visible{outline:2px solid var(--navy);outline-offset:2px;}
#tero-top:focus-visible{outline:none;}

/* Above-the-fold hero must paint without waiting for JS (reveal-on-scroll would keep it at opacity:0 until main.js runs). */
.hero .reveal{opacity:1;transform:none}