/* Shared styles for product-area storyline pages. */
:root{padding-top:env(safe-area-inset-top, 0px); padding-bottom:env(safe-area-inset-bottom, 0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: the year is a call recording. A scrubber with chapter markers on top,
   then each chapter reads like a transcript: timestamp column (month), speaker tag (who it's for), line (what changed). */
/* Guide palette: violet/pink accents with lytesales.ai navy, logo and Barlow fonts. */
:root{
  --bg:#F7F5FC; --surface:#FFFFFF; --ink:#0D1C3E; --muted:#585377; --line:#E3DDF1;
  --accent:#6A3DC9; --accent-soft:#F0EAFC; --caution:#9A5800; --caution-soft:#FBF1E2;
  --wave:#DCD0F5; --band:#2A1A5E; --on-band:#FFFFFF; --btn:#C2357A; --on-btn:#FFFFFF; --brand-ink:#12235A;
  --font-display:"Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body:"Barlow", "Segoe UI", Arial, sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#130D30; --surface:#1D1546; --ink:#F1ECFB; --muted:#B8AEDB; --line:#30266A;
    --accent:#B79CF5; --accent-soft:#2A1F5E; --caution:#F0A64A; --caution-soft:#33260F;
    --wave:#30266A; --band:#2A1F5E; --on-band:#FFFFFF; --btn:#C2357A; --on-btn:#FFFFFF; --brand-ink:#F1ECFB;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#130D30; --surface:#1D1546; --ink:#F1ECFB; --muted:#B8AEDB; --line:#30266A;
  --accent:#B79CF5; --accent-soft:#2A1F5E; --caution:#F0A64A; --caution-soft:#33260F;
  --wave:#30266A; --band:#2A1F5E; --on-band:#FFFFFF; --btn:#C2357A; --on-btn:#FFFFFF; --brand-ink:#F1ECFB;
  color-scheme:dark;
}

*{box-sizing:border-box}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.wrap{max-width:880px; margin:0 auto; padding-block:48px 64px; display:flex; flex-direction:column; gap:56px}
a{color:var(--accent); text-underline-offset:3px}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0; line-height:1.1}
p{margin:0}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* Hero */
.hero{display:flex; flex-direction:column; gap:20px}
.hero h1{font-size:clamp(2.6rem, 6.4vw, 4.4rem); font-weight:900; letter-spacing:-.01em; color:var(--brand-ink)}
.hero h1 em{font-style:normal; color:var(--accent)}
.lede{font-size:1.15rem; max-width:62ch; color:var(--ink)}
.facts{display:flex; flex-wrap:wrap; gap:8px 28px; font-size:.95rem; color:var(--muted)}
.facts b{color:var(--ink); font-family:var(--font-display); font-size:1.25rem; font-weight:700; margin-right:4px}

/* Scrubber */
.scrubber{display:flex; flex-direction:column; gap:10px}
.wave{position:relative; height:84px; display:flex; align-items:center; gap:2px}
.wave span{flex:1 1 0; min-width:1px; background:var(--wave); border-radius:2px}
.wave span.on{background:var(--accent)}
.marks{display:grid; grid-template-columns:repeat(10, 1fr); font-family:var(--font-mono); font-size:11px; color:var(--muted)}
.marks a{color:var(--muted); text-decoration:none; text-align:center}
.marks a.has{color:var(--accent); font-weight:500}
.marks a.has:hover{text-decoration:underline}
.scrub-note{font-size:.85rem; color:var(--muted)}

/* Chapters */
.chapter{display:flex; flex-direction:column; gap:20px; scroll-margin-top:24px}
.chapter-head{display:flex; flex-direction:column; gap:8px}
.chapter-head h2{font-size:clamp(1.7rem, 3.8vw, 2.4rem); font-weight:800; color:var(--brand-ink)}
.chapter-head p{max-width:62ch; color:var(--muted)}
.transcript{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.row{display:grid; grid-template-columns:72px 1fr; gap:16px; padding-block:16px; border-bottom:1px solid var(--line)}
.ts{font-family:var(--font-mono); font-size:12px; color:var(--accent); padding-top:4px; font-variant-numeric:tabular-nums}
.row-body{min-width:0; display:flex; flex-direction:column; gap:4px}
.row-title{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px}
.row-title h3{font-size:1.1rem; font-weight:700}
.who{font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 8px}
.row.big h3{font-size:1.3rem}
.row.big .ts::after{content:" ●"; }
.more{font-size:.9rem}

/* Lyte take + caution */
.take, .caution{border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:6px}
.take{background:var(--accent-soft)}
.take .eyebrow{color:var(--accent)}
.take p{max-width:64ch}
.take .sig{font-size:.9rem; color:var(--muted); font-style:italic}
.caution{background:var(--caution-soft)}
.caution .eyebrow{color:var(--caution)}
.caution ul{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:6px}

/* CTA */
.cta{background:var(--band); color:var(--on-band); border-radius:14px; padding:32px 28px; display:flex; flex-direction:column; gap:14px}
.cta h2{font-size:clamp(1.5rem, 3.4vw, 2rem); color:var(--on-band)}
.cta p{max-width:58ch; opacity:.85}
.btn{align-self:flex-start; display:inline-block; background:var(--btn); color:var(--on-btn); font-family:var(--font-display); font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; text-decoration:none; padding:12px 22px; border-radius:6px}


.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--brand-ink); font-family:var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:.02em; text-transform:uppercase; align-self:flex-start}
.brand img{width:36px; height:36px}
.brand:hover span{text-decoration:underline}
.crumb{font-size:.9rem}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
footer{display:flex; flex-direction:column; gap:12px; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); padding-top:24px}
footer ul{margin:0; padding-left:1.1em}

@media (max-width:520px){
  body{font-size:16px}
  .row{grid-template-columns:1fr; gap:4px}
  .marks{font-size:9px}
  .cta{padding:24px 20px}
}
@media (prefers-reduced-motion: no-preference){
  .wave span{transition:background .2s}
}

/* Name-change table */
.renames{border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:10px}
.renames table{width:100%; border-collapse:collapse; font-size:.95rem}
.renames th, .renames td{text-align:left; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); vertical-align:top}
.renames th{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500}
.renames td:first-child{font-family:var(--font-mono); font-size:12px; color:var(--accent); white-space:nowrap}
.renames .was{color:var(--muted); text-decoration:line-through; text-decoration-thickness:1px}
.table-scroll{overflow-x:auto}

.updated{font-family:var(--font-mono); font-size:12px; color:var(--muted)}

.byline a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* Email gate on feature guides */
.guide-locked .gated{max-height:260px; overflow:hidden; position:relative; pointer-events:none; user-select:none}
.guide-locked .gated::after{content:""; position:absolute; inset:auto 0 0 0; height:200px; background:linear-gradient(to bottom, transparent, var(--bg))}
.gate{background:var(--surface); border:2px solid var(--accent); border-radius:14px; padding:26px 24px; display:flex; flex-direction:column; gap:12px}
.gate h2{font-size:clamp(1.5rem,3.4vw,2rem); color:var(--brand-ink)}
.gate p{max-width:60ch}
.gate form{display:flex; flex-direction:column; gap:14px}
.gate-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.gate-grid label{display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:.92rem; min-width:0}
.gate-grid .full{grid-column:1/-1}
.gate input{font:inherit; font-weight:400; padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink)}
.gate input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.gate .btn{border:0; cursor:pointer}
.gate .btn[disabled]{opacity:.7; cursor:wait}
.gate-error{color:var(--caution); font-weight:600; min-height:1em; margin:0}
.gate-note{font-size:.82rem; color:var(--muted)}
.gate-note a{color:inherit}
.gate-hp{position:absolute; left:-9999px}
@media (max-width:560px){ .gate-grid{grid-template-columns:1fr} }

.gated{display:flex; flex-direction:column; gap:44px}

.gated{display:flex; flex-direction:column; gap:56px}
.gate .eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* Floating "Talk to Lyte Sales" button */
.fab{position:fixed; z-index:50; right:calc(20px + env(safe-area-inset-right, 0px)); bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px;
  background:var(--btn); color:var(--on-btn); text-decoration:none; font-family:var(--font-display); font-weight:700;
  font-size:1rem; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 6px 20px rgba(13,28,62,.28);
  transition:transform .2s, opacity .2s}
.fab:hover{transform:translateY(-2px)}
.fab:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.fab.fab-hidden{opacity:0; pointer-events:none; transform:translateY(12px)}
@media (max-width:560px){ .fab{padding:12px; right:calc(16px + env(safe-area-inset-right, 0px)); bottom:calc(16px + env(safe-area-inset-bottom, 0px))} .fab span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)} }
@media (prefers-reduced-motion: reduce){ .fab{transition:none} .fab:hover{transform:none} }
body{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}