/* autoants Demo Room: shared tokens + layout. Mobile first, light and dark.
   Brand: night #0b1712, forest #0f5132, mint #3ddcae, stone #ebe8e2, ink #0f2a1d.
   No gold or warm accents (Lane's rule): banners and highlights stay in the greens. */
:root{
  --forest:#0f5132; --mint:#3ddcae; --stone:#ebe8e2; --ink-brand:#0f2a1d; --night:#0b1712;
  --ground:#f5f3ee; --card:#ffffff; --ink:#0f2a1d; --muted:#4f5e55; --line:#d9d5cc; --soft:#e7efe9;
  --accent:var(--forest); --on-accent:#ffffff; --accent-ink:var(--forest);
  --banner-bg:#dff3ea; --banner-ink:#0b3d26; --banner-line:#a9dcc6;
  --bubble-out:#0f5132; --bubble-out-ink:#ffffff; --bubble-in:#ebe8e2; --bubble-in-ink:#0f2a1d;
  --screen:#ffffff; --bezel:#0b1712; --chip:#eef2ef; --draft:#f1f7f3; --draft-line:#7cc7a8;
  --shadow:0 10px 30px rgba(11,23,18,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0b1712; --card:#13211a; --ink:#e6ece7; --muted:#a3b5a9; --line:#26372d; --soft:#17291f;
    --accent:#3ddcae; --on-accent:#0b1712; --accent-ink:#3ddcae;
    --banner-bg:#123326; --banner-ink:#bff0dc; --banner-line:#1f5a42;
    --bubble-out:#3ddcae; --bubble-out-ink:#0b1712; --bubble-in:#22352b; --bubble-in-ink:#e6ece7;
    --screen:#0f1c16; --bezel:#000000; --chip:#1a2c23; --draft:#132a20; --draft-line:#2f8c69;
    --shadow:0 10px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#0b1712; --card:#13211a; --ink:#e6ece7; --muted:#a3b5a9; --line:#26372d; --soft:#17291f;
  --accent:#3ddcae; --on-accent:#0b1712; --accent-ink:#3ddcae;
  --banner-bg:#123326; --banner-ink:#bff0dc; --banner-line:#1f5a42;
  --bubble-out:#3ddcae; --bubble-out-ink:#0b1712; --bubble-in:#22352b; --bubble-in-ink:#e6ece7;
  --screen:#0f1c16; --bezel:#000000; --chip:#1a2c23; --draft:#132a20; --draft-line:#2f8c69;
  --shadow:0 10px 30px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;background:var(--ground);color:var(--ink);font:500 16px/1.45 Onest,system-ui,-apple-system,sans-serif;-webkit-text-size-adjust:100%}
a{color:var(--accent-ink)}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:16px 16px 56px;display:flex;flex-direction:column;gap:16px}
.banner{margin:0;background:var(--banner-bg);color:var(--banner-ink);border:1px solid var(--banner-line);border-radius:12px;padding:10px 14px;font-size:14px;font-weight:700}
.back{font-size:15px;font-weight:700;text-decoration:none;align-self:flex-start;padding:6px 0}
.back:hover{text-decoration:underline}
.label{font:700 12px/1.2 Onest,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
header h1{margin:4px 0 0;font-size:clamp(28px,7vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
header .lede{margin:8px 0 0;font-size:18px;max-width:52ch}
.grid2{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (min-width:820px){.grid2{grid-template-columns:minmax(0,380px) minmax(0,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
.card h2{margin:0;font-size:17px;font-weight:800}
.card p{margin:0}
.facts p{font-size:15px}
.facts strong{font-weight:800}
.price{font-size:16px}
.muted,.note{color:var(--muted);font-size:14px}
.status{color:var(--muted);font-size:14px}
ul.plain{margin:0;padding-left:18px;font-size:15px}
ul.plain li+li{margin-top:4px}
footer{font-size:13px;color:var(--muted)}
.btn{font:inherit;font-weight:700;border-radius:12px;min-height:48px;padding:0 16px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.seg button{font:inherit;font-size:14px;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* ---------- phone frame (phone.js renders into .phone) ---------- */
.stage{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.phone{width:100%;max-width:360px;background:var(--bezel);border-radius:34px;padding:10px;box-shadow:var(--shadow)}
.phone .screen{background:var(--screen);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;height:min(560px,70vh);min-height:430px;position:relative}
.phone .bar{display:flex;justify-content:space-between;align-items:center;padding:8px 18px 4px;font-size:12px;font-weight:700;color:var(--ink)}
.phone .bar .dots{letter-spacing:2px}
.phone .head{display:flex;align-items:center;gap:10px;padding:6px 14px 10px;border-bottom:1px solid var(--line)}
.phone .avatar{width:34px;height:34px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.phone .who{min-width:0}
.phone .who b{display:block;font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone .who small{display:block;font-size:12px;color:var(--muted)}
.phone .log{flex:1;overflow-y:auto;padding:12px 10px 16px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.phone .empty{margin:auto;text-align:center;color:var(--muted);font-size:14px;padding:0 20px}
.msg{max-width:84%;padding:8px 12px;border-radius:18px;font-size:15px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.in{align-self:flex-start;background:var(--bubble-in);color:var(--bubble-in-ink);border-bottom-left-radius:6px}
.msg.out{align-self:flex-end;background:var(--bubble-out);color:var(--bubble-out-ink);border-bottom-right-radius:6px}
.msg .from{display:block;font-size:11px;font-weight:800;opacity:.8;margin-bottom:2px;letter-spacing:.02em}
.msg.out a,.msg.in a{color:inherit}
.phone .log .past{opacity:.6}
.chipline{align-self:center;background:var(--chip);color:var(--muted);font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;text-align:center;max-width:92%}
.event{align-self:stretch;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:10px 12px;font-size:14px;display:flex;flex-direction:column;gap:4px}
.event .k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.event b{font-size:15px}
.event.call b::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.event.missed b::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid var(--muted);margin-right:6px;vertical-align:0}
.event.notify{background:var(--soft);border-color:var(--draft-line)}
.event.draft{background:var(--draft);border:1.5px dashed var(--draft-line)}
.event .body{white-space:pre-wrap;overflow-wrap:anywhere}
.event .tag{align-self:flex-start;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:800;border-radius:6px;padding:2px 6px;letter-spacing:.04em}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.acts button{font:inherit;font-size:14px;font-weight:800;border-radius:10px;min-height:40px;padding:0 12px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer}
.acts button.ghost{background:transparent;color:var(--accent-ink)}
.acts button[disabled]{opacity:.55;cursor:default}
.acts button.chosen{outline:3px solid var(--mint);outline-offset:1px}
.typing{align-self:flex-start;background:var(--bubble-in);border-radius:18px;padding:10px 14px;display:flex;gap:4px}
.typing.out{align-self:flex-end;background:var(--bubble-out)}
.typing i{width:7px;height:7px;border-radius:50%;background:currentColor;color:var(--bubble-in-ink);opacity:.5;animation:blink 1s infinite}
.typing.out i{color:var(--bubble-out-ink)}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:1}}
.pop{animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.controls{display:flex;gap:8px;width:100%;max-width:360px}
.controls .btn{flex:1;min-height:48px}
.caption{width:100%;max-width:360px;min-height:2.9em;margin:0;font-size:15px;text-align:center;color:var(--ink)}
.progress{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .pop{animation:none}
  .typing i{animation:none;opacity:.8}
  .phone .log{scroll-behavior:auto}
}

/* ---------- chat skin (website-chat) ---------- */
.phone.web .head{background:var(--card)}
.webpage{padding:14px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line);background:var(--soft)}
.webpage b{font-size:18px}
.webpage span{font-size:13px;color:var(--muted)}

/* ---------- Demo Room index ---------- */
.group{display:flex;flex-direction:column;gap:10px}
.group h2{margin:8px 0 0;font-size:20px;font-weight:800;letter-spacing:-.01em}
.group > p{margin:0;color:var(--muted);font-size:15px}
.tiles{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:640px){.tiles{grid-template-columns:1fr 1fr}}
@media (min-width:940px){.tiles{grid-template-columns:1fr 1fr 1fr}}
a.tile{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;min-height:100%}
a.tile:hover{border-color:var(--accent)}
a.tile b{font-size:17px;font-weight:800}
a.tile b::after{content:" \2192";color:var(--accent-ink)}
a.tile span{font-size:15px}
a.tile small{font-size:13px;color:var(--muted)}

/* ---------- by-rung index and rung pages (2026-10-19) ---------- */
.rung{display:flex;flex-direction:column;gap:10px;padding-top:8px;border-top:1px solid var(--line)}
.rung .rhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.rung .step{font:800 12px/1.2 Onest,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.rung h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.01em}
.rung .rprice{margin:0;font-size:15px;font-weight:700}
.rung > p{margin:0;color:var(--muted);font-size:15px}
a.tile.feature{background:var(--soft);border-color:var(--draft-line)}
a.tile .new{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);border-radius:6px;padding:2px 6px}
.lead{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid var(--accent);border-radius:16px;padding:16px}
.lead b{font-size:20px;font-weight:800}
.lead b::after{content:" \2192";color:var(--accent-ink)}
.lead span{font-size:15px}
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.flow div{background:var(--soft);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:0}
.flow strong{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.1}
.flow small{font-size:12px;color:var(--muted)}
.morelink{font-size:14px;font-weight:700}
.sampletag{display:inline-block;align-self:flex-start;background:var(--soft);color:var(--accent-ink);font-size:12px;font-weight:800;border-radius:6px;padding:3px 8px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:8px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:12px;color:var(--muted);font-weight:800}
.tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .good{color:var(--accent-ink);font-weight:800}
.tbl .worse{color:var(--muted);font-weight:800}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:640px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{background:var(--soft);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kpi b{font-size:28px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.kpi span{font-size:13px;color:var(--muted)}
.kpi em{font-style:normal;font-size:12px;font-weight:800;color:var(--accent-ink)}
.kpi em.down{color:var(--muted)}
.funnel{display:flex;flex-direction:column;gap:8px}
.funnel .row{display:flex;flex-direction:column;gap:4px}
.funnel .top{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.funnel .top b{font-weight:800}
.funnel .bar{height:14px;border-radius:7px;background:var(--soft);overflow:hidden}
.funnel .bar i{display:block;height:100%;border-radius:7px;background:var(--accent)}
.shots{display:flex;flex-direction:column;gap:12px}
.shots figure{margin:0;display:flex;flex-direction:column;gap:6px}
.shots img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);display:block}
.shots figcaption{font-size:14px;color:var(--muted)}
.ba{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.ba{grid-template-columns:1fr 1fr}}
.ba > div{border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;background:var(--card)}
.ba .k{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ba blockquote{margin:0;padding:8px 10px;border-left:3px solid var(--line);font-size:14px;color:var(--ink)}
.ba blockquote mark{background:var(--soft);color:var(--accent-ink);font-weight:800;padding:0 2px;border-radius:3px}
.week{display:flex;flex-direction:column;gap:12px}
.day{display:grid;grid-template-columns:1fr;gap:8px;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--card)}
@media (min-width:720px){.day{grid-template-columns:150px minmax(0,1fr)}}
.day .when b{display:block;font-size:17px;font-weight:800}
.day .when span{font-size:13px;color:var(--muted)}
.post{display:flex;flex-direction:column;gap:8px;min-width:0}
.post .where{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.post p{margin:0;font-size:15px}
.photo{border-radius:10px;min-height:120px;display:grid;place-items:center;text-align:center;padding:12px;font-size:13px;font-weight:700;color:var(--muted);background:repeating-linear-gradient(135deg,var(--soft) 0 12px,var(--card) 12px 24px);border:1px dashed var(--line)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.okchip{align-self:flex-start;font-size:12px;font-weight:800;color:var(--accent-ink);background:var(--soft);border-radius:999px;padding:3px 10px}
.short{width:100%;max-width:220px;aspect-ratio:9/16;border-radius:22px;background:radial-gradient(120% 70% at 20% 10%,#14523a 0,transparent 60%),radial-gradient(90% 60% at 90% 90%,#0f5132 0,transparent 60%),#0b1712;color:#fff;position:relative;overflow:hidden;border:6px solid #000;box-shadow:var(--shadow)}
.short .ln{position:absolute;left:14px;right:14px;top:34%;font:800 21px/1.15 Onest,system-ui,sans-serif;letter-spacing:-.01em;opacity:0;animation:shortline 20s infinite}
.short .ln small{display:block;margin-top:8px;font-size:12px;font-weight:700;color:#3ddcae}
.short .ln:nth-child(1){animation-delay:0s}
.short .ln:nth-child(2){animation-delay:4s}
.short .ln:nth-child(3){animation-delay:8s}
.short .ln:nth-child(4){animation-delay:12s}
.short .ln:nth-child(5){animation-delay:16s}
.short .lab{position:absolute;left:10px;bottom:10px;font-size:10px;font-weight:700;background:rgba(0,0,0,.55);border-radius:6px;padding:2px 6px;color:#e6ece7}
@keyframes shortline{0%{opacity:0;transform:translateY(14px)}3%,17%{opacity:1;transform:none}20%,100%{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .short{aspect-ratio:auto;padding:14px 14px 34px}
  .short .ln{position:static;opacity:1;animation:none;margin:0 0 12px;font-size:16px}
}