/* Shared styles for Kaia feature guides. 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;
  color-scheme:light;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@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}
img{max-width:100%}
[hidden]{display:none!important}
body{
  margin:0; 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:760px; margin:0 auto; padding-block:32px 64px; display:flex; flex-direction:column; gap:44px}
a{color:var(--accent); text-underline-offset:3px}
a: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.12}
p{margin:0}
.eyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.crumb{font-size:.9rem}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}

.hero{display:flex; flex-direction:column; gap:16px}
.hero h1{font-size:clamp(2.3rem, 5.8vw, 3.6rem); font-weight:900; letter-spacing:-.01em; color:var(--brand-ink)}
.hook{font-size:1.18rem; max-width:60ch}
.meta{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 10px}
.chip.acc{color:var(--accent); border-color:var(--accent)}

section{display:flex; flex-direction:column; gap:16px}
section > h2{font-size:clamp(1.5rem, 3.4vw, 2rem); font-weight:800; color:var(--brand-ink)}
.prose{display:flex; flex-direction:column; gap:14px; max-width:64ch}

.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.two > div{min-width:0; display:flex; flex-direction:column; gap:6px; border-top:2px solid var(--ink); padding-top:12px}
.two h3{font-size:1.05rem}

.evo{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.evo .r{display:grid; grid-template-columns:64px 1fr; gap:14px; padding-block:12px; border-bottom:1px solid var(--line)}
.evo .ts{font-family:var(--font-mono); font-size:12px; color:var(--accent); padding-top:3px}
.evo .r > div{min-width:0}

ol.steps{margin:0; padding:0; list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:18px}
ol.steps > li{counter-increment:s; display:grid; grid-template-columns:36px 1fr; gap:12px}
ol.steps > li::before{content:counter(s); font-family:var(--font-display); font-weight:800; font-size:1.05rem; width:32px; height:32px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center}
ol.steps > li > div{min-width:0; display:flex; flex-direction:column; gap:6px}
ol.steps h3{font-size:1.05rem}
.path{font-family:var(--font-mono); font-size:.82rem; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1px 6px; overflow-wrap:anywhere}
.src{font-size:.85rem; color:var(--muted)}

.box{border-radius:10px; padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.box ul{margin:0; padding-left:1.1em; display:flex; flex-direction:column; gap:6px}
.lic{background:var(--surface); border:1px solid var(--line)}
.lic .eyebrow{color:var(--ink)}
.caution{background:var(--caution-soft)}
.caution .eyebrow{color:var(--caution)}
.take{background:var(--accent-soft)}
.take p{max-width:64ch}
.take .sig{font-size:.9rem; color:var(--muted); font-style:italic}
.take .eyebrow{color:var(--accent)}

.cta{background:var(--band); color:var(--on-band); border-radius:14px; padding:28px 26px; display:flex; flex-direction:column; gap:12px}
.cta h2{font-size:clamp(1.4rem, 3.2vw, 1.8rem); color:var(--on-band)}
.cta p{max-width:56ch; opacity:.85}
.btn{align-self:flex-start; 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}
.cta .eyebrow{color:var(--on-band); opacity:.7}

.next{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.next a{min-width:0; display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:14px 16px; background:var(--surface)}
.next a:hover{border-color:var(--accent)}
.next b{font-family:var(--font-display); font-size:1.02rem}

footer{display:flex; flex-direction:column; gap:10px; font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); padding-top:22px}
footer ul{margin:0; padding-left:1.1em; overflow-wrap:anywhere}

@media (max-width:560px){
  body{font-size:16px}
  .two, .next{grid-template-columns:1fr}
  .evo .r{grid-template-columns:1fr; gap:2px}
}

.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}

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

/* Capability table (MCP Server guide) */
.table-scroll{overflow-x:auto}
.cap{width:100%; border-collapse:collapse; font-size:.95rem; min-width:560px}
.cap th, .cap td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--line)}
.cap thead th{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:500}
.cap tbody th{font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:var(--brand-ink); white-space:nowrap}
.cap .no{color:var(--muted)}
.prompts{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.prompts li{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-style:italic}

.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}

/* 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))}