/* AL landing (/) - page layout on top of /ds/al.css
   AL v2 r9/r10: warm paper and ink, one yolk accent (the primary button, live states and the logo's yolk dot), hairline
   rules only where there is a table, and the product itself (overlay, chat) as the only picture - drawn over a
   transparency checkerboard, not over an invented game. No glow, no gradient wash, no icon-card triplets, no numbered sections. */
body.home {
  --paper: #F3EEE4; --paper-2: #EAE3D6; --sheet: #FBF8F2;
  --ink: #17181C; --ink-2: #45474E; --ink-3: #5F6066;
  --rule: rgba(23, 24, 28, .14); --rule-strong: rgba(23, 24, 28, .34);
  --ochre: #8A5A00;
  /* the shared components (topbar, buttons) read these */
  --al-bg: var(--paper); --al-bg-deep: var(--paper-2); --al-surface-1: var(--sheet); --al-surface-2: #EFE9DE; --al-surface-3: #E5DED1;
  --al-surface-raised: var(--sheet); --al-border: var(--rule); --al-border-strong: var(--rule-strong);
  --al-text: var(--ink); --al-text-2: var(--ink-2); --al-text-3: var(--ink-3); --al-accent-text: var(--ochre); --al-link: #1F5FB8;
  background: var(--paper); color: var(--ink); font-size: 16px;
}
.home-top-cta { --al-gap: 14px; }
.home-login { display: none; color: var(--ink-2); font-weight: 650; font-size: 14px; }
@media (min-width: 640px) { .home-login { display: inline-block; } }
.home .al-topbar { border-bottom-color: var(--rule); }
.home .al-nav-links a:hover { background: transparent; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.home code { font-family: var(--al-font); font-size: .94em; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: rgba(23, 24, 28, .07); }

/* ------------------------------------------------------------------------------------------------ hero */
.hero { padding: 36px 0 44px; border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; gap: 32px; }
@media (min-width: 1040px) { .hero { padding: 64px 0 60px; } .hero-grid { grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); gap: 44px; align-items: start; } }
.hero-copy { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.hero-kicker { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 650; color: var(--ink-2); }
.hero-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--al-yolk); box-shadow: 0 0 0 3px var(--ink); flex: none; }   /* the logo's yolk */
.hero-title { font-size: clamp(38px, 6.4vw, 60px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; }
.hero-lead { font-size: clamp(16px, 1.9vw, 19px); line-height: 1.65; color: var(--ink-2); max-width: 31em; }
.hero-lead b { color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.hero-more { color: var(--ink); font-weight: 700; text-decoration: underline !important; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.hero-micro { font-size: 13px; color: var(--ink-3); }

/* the demo: a transparency checkerboard with the real overlay look, and a dark chat panel beside / below it */
.hero-demo { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .hero-demo { grid-template-columns: minmax(0, 1fr) 220px; } .demo-cap { grid-column: 1 / -1; }
  .demo-chatbox { contain: size; } }   /* the chat panel takes the stream's height, it never sets it */
@media (min-width: 1040px) { .hero-demo { grid-template-columns: minmax(0, 1fr) 240px; } }
.stream { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #24272D; container-type: inline-size; }
.stream-scene { position: absolute; inset: 0; background: #24272D url("/ds/demo-game.svg") center / cover no-repeat; }   /* the transparent slot, not a game */
.demo-bar { position: absolute; left: 4%; right: 4%; bottom: 5%; padding: 10px 12px; border-radius: 10px; background: rgba(14, 16, 20, .94); color: #fff; }
.demo-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.demo-q { font-weight: 800; font-size: clamp(13px, 3.2cqw, 20px); letter-spacing: -.02em; }
.demo-status { flex: none; padding: 3px 9px; border-radius: 4px; background: var(--al-yolk); color: var(--al-yolk-ink); font-weight: 800; font-size: clamp(10px, 1.9cqw, 13px); font-variant-numeric: tabular-nums; }
.demo-status.closed { background: #F5A524; color: #241600; }
.demo-status.settled { background: #3BC97A; color: #04140B; }
.demo-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo-opt { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; background: rgba(255, 255, 255, .08); overflow: hidden; isolation: isolate;
  outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .3s, opacity .3s; }
.demo-fill { position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1; transition: width .6s var(--al-ease); }
.demo-opt.o1 .demo-fill { background: rgba(77, 163, 255, .3); box-shadow: inset 0 -3px 0 #4DA3FF; } .demo-opt.o2 .demo-fill { background: rgba(255, 122, 89, .3); box-shadow: inset 0 -3px 0 #FF7A59; }
.demo-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; font-weight: 900; font-size: 12px; color: #0B0D12; flex: none; }
.demo-opt.o1 .demo-n { background: #4DA3FF; } .demo-opt.o2 .demo-n { background: #FF7A59; }
.demo-l { flex: 1; min-width: 0; font-weight: 800; font-size: clamp(12px, 2.6cqw, 17px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-c { font-weight: 900; font-size: clamp(13px, 3cqw, 20px); font-variant-numeric: tabular-nums; }
.demo-opt.win { outline-color: var(--al-yolk); }
.demo-opt.lose { opacity: .5; }
.demo-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: clamp(10px, 2cqw, 13px); font-weight: 700; }
.demo-hint { color: var(--al-yolk); }
/* r13: one card at a time in the small hero slot - the answer replaces the question bar (two stacked cards collided at 16:9) */
.stream:has(.demo-result:not([hidden])) .demo-bar { visibility: hidden; }
.demo-result { position: absolute; z-index: 2; left: 4%; right: 4%; bottom: 5%; width: auto; display: flex; gap: 12px; align-items: center; padding: 10px 14px;
  border-radius: 10px; background: rgba(14, 16, 20, .94); color: #fff; animation: al-rise .4s var(--al-ease) both; }
.demo-egg { width: clamp(44px, 11cqw, 68px); height: clamp(44px, 11cqw, 68px); flex: none; }
.demo-result-q { font-size: clamp(10px, 2cqw, 13px); color: rgba(255, 255, 255, .8); font-weight: 700; }
.demo-result-main { font-size: clamp(15px, 4cqw, 26px); font-weight: 900; letter-spacing: -.02em; }
.demo-badge { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-right: .32em; border-radius: .22em; background: var(--al-opt-2);
  color: #0B0D12; font-size: .82em; vertical-align: .08em; }   /* the number a viewer typed, as on the stream */
.demo-result-who { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.demo-result-who span { padding: 1px 7px; border-radius: 4px; background: rgba(255, 255, 255, .13); font-size: clamp(10px, 2cqw, 14px); font-weight: 800; animation: al-rise .4s var(--al-ease) both; }
.demo-result-who span.each { background: var(--al-yolk); color: var(--al-yolk-ink); }
/* the chat: dark like the platforms' own chat panels, coloured nicknames, nothing cut off */
.demo-chatbox { display: flex; flex-direction: column; min-height: 0; border-radius: 6px; background: #141517; overflow: hidden; }
.demo-chat-head { padding: 9px 12px; font-size: 12px; font-weight: 750; color: #9A9DA3; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.demo-chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; height: 170px; overflow: hidden; padding: 8px 12px 10px; font-size: 13px; }
@media (min-width: 640px) { .demo-chat { height: auto; } }
.demo-chat li { flex: none; line-height: 1.45; animation: al-rise .25s var(--al-ease) both; color: #E6E7E9; overflow-wrap: anywhere; }
.demo-chat .who { font-weight: 800; margin-right: 6px; color: #7DB4FF; }
.demo-chat .staff .who { color: #3FD68A; }
.demo-chat .bot, .demo-chat .bot .who { color: #FFD15C; }
.demo-cap { margin: 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 639px) { .stream { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------------------------------------------ sections */
.sheet { padding: 56px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .sheet { padding: 80px 0; } }
.sheet-title { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.18; letter-spacing: -0.028em; font-weight: 800; max-width: 22em; }
.sheet-lead { margin-top: 14px; max-width: 42em; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
.sheet-note { margin-top: 18px; max-width: 70ch; font-size: 13px; color: var(--ink-3); }

/* compare: a printed table */
.compare { margin-top: 32px; border-top: 2px solid var(--ink); }
.compare-row { display: grid; grid-template-columns: 76px 1fr 1fr; border-bottom: 1px solid var(--rule); }
.compare-row > span { padding: 13px 10px 13px 0; font-size: 14px; }
@media (min-width: 720px) { .compare-row { grid-template-columns: 120px 1fr 1fr; } .compare-row > span { padding: 16px 16px 16px 0; font-size: 16px; } }
.compare-row [role="rowheader"] { color: var(--ink-3); font-weight: 700; }
.compare-row span[role="cell"]:not(.us) { color: var(--ink-2); }
.compare-row .us { font-weight: 750; color: var(--ink); }
.compare-head > span { font-size: 13px; font-weight: 800; color: var(--ink-3); }
.compare-head .us { color: var(--ink); }

/* platforms: a question, three chats, one ranking - stacked on a phone, side by side on a laptop */
.mp { margin-top: 32px; display: grid; gap: 14px; }
@media (min-width: 1000px) { .mp { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto 1fr; } .mp-q { grid-column: 1 / -1; } }
.mp-label { font-size: 12px; font-weight: 800; color: var(--ink-3); }
.mp-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.mp-q b { font-size: 20px; letter-spacing: -.02em; }
.mp-opts { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.mp-chats { display: grid; gap: 10px; grid-template-columns: 1fr; align-self: start; }
@media (min-width: 640px) { .mp-chats { grid-template-columns: repeat(3, 1fr); } }
.mp-chat { padding: 10px 12px 12px; background: #141517; color: #E6E7E9; border-radius: 6px; }
.mp-chat-head { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.mp-chat-head b { font-size: 14px; }
.mp-state { margin-left: auto; font-size: 11px; font-weight: 750; color: #9A9DA3; }
.mp-state.on { color: #3FD68A; }
.mp-chat ol { display: grid; gap: 3px; font-size: 14px; }
.mp-chat li b { font-weight: 750; color: #7DB4FF; margin-right: 8px; }
.mp-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; display: inline-block; }
.mp-dot.chzzk { background: #19B868; } .mp-dot.soop { background: #2F6FE0; } .mp-dot.youtube { background: #E3342F; }
.mp-rank { display: grid; gap: 8px; align-content: start; padding: 12px 14px; background: #17181C; color: #F4F1EA; border-radius: 6px; }
.mp-rank .mp-label { color: #B9B6AE; }
.mp-rank ol { display: grid; }
.mp-rank li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.mp-rk { width: 18px; font-weight: 900; color: var(--al-yolk); font-variant-numeric: tabular-nums; }
.mp-pts { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.mp-foot { font-size: 12px; color: #B9B6AE; }
.mp-how { margin-top: 26px; display: grid; grid-template-columns: 74px 1fr; border-top: 1px solid var(--rule); }
.mp-how dt, .mp-how dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.mp-how dt { font-weight: 800; }
.mp-how dd { color: var(--ink-2); }

/* how: when / who / what, as a table */
.cue { margin-top: 32px; border-top: 2px solid var(--ink); }
.cue-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.7; }
.cue-head { display: none; }
.cue-when { font-weight: 800; }
.cue-who { color: var(--ink-3); font-size: 13px; font-weight: 700; }
@media (min-width: 900px) {
  .cue-head { display: grid; }
  .cue-row { grid-template-columns: 76px 112px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; }
  .cue-head > span { font-size: 13px; font-weight: 800; color: var(--ink-3); }
  .cue-who { font-size: 14px; }
}

/* obs: the on-air pieces on a transparency checkerboard */
.obs-grid { display: grid; gap: 32px; }
@media (min-width: 1000px) { .obs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.obs-list { margin-top: 22px; display: grid; border-top: 1px solid var(--rule); }
.obs-list li { padding: 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.obs-link { display: inline-block; margin-top: 20px; color: var(--ink); font-weight: 700; text-decoration: underline !important; text-underline-offset: 5px; }
.obs-canvas { position: relative; display: grid; gap: 14px; padding: 28px 22px 44px; border-radius: 6px; background: #24272D url("/ds/demo-game.svg") center / 400px auto; }
.obs-canvas-note { position: absolute; left: 12px; bottom: 10px; font-size: 11px; font-weight: 700; color: #9A9DA3; }
.obs-piece { background: rgba(14, 16, 20, .94); color: #fff; border-radius: 10px; padding: 12px 14px; }
.obs-bar-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.obs-bar-head b { font-size: 17px; letter-spacing: -.02em; }
.obs-bar-head span { font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 4px; background: var(--al-yolk); color: var(--al-yolk-ink); }
.obs-bar-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.obs-bar-opts span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; font-weight: 800; font-size: 14px; }
.obs-bar-opts .o1 { background: linear-gradient(90deg, rgba(77, 163, 255, .32) 62%, rgba(255, 255, 255, .08) 62%); box-shadow: inset 0 -3px 0 #4DA3FF; }
.obs-bar-opts .o2 { background: linear-gradient(90deg, rgba(255, 122, 89, .32) 38%, rgba(255, 255, 255, .08) 38%); box-shadow: inset 0 -3px 0 #FF7A59; }
.obs-bar-opts i, .obs-rank i { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 12px; font-weight: 900; color: #0B0D12; }
.obs-bar-opts .o1 i { background: #4DA3FF; } .obs-bar-opts .o2 i { background: #FF7A59; }
.obs-bar-opts em, .obs-rank em { margin-left: auto; font-style: normal; font-variant-numeric: tabular-nums; }
.obs-rank { width: min(100%, 260px); justify-self: end; }
.obs-rank p { font-size: 12px; font-weight: 800; color: #B9B6AE; margin-bottom: 4px; }
.obs-rank li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-weight: 700; font-size: 14px; }
.obs-rank i { background: var(--al-yolk); }

/* pricing: one paragraph and one button */
.price-later { margin-top: 14px; max-width: 42em; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
.price-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 24px; }

/* faq: a plain list */
.faq-list { margin-top: 24px; border-top: 2px solid var(--ink); max-width: 60em; }
.faq-list details { border-bottom: 1px solid var(--rule); }
.faq-list summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 750; font-size: 17px; display: flex; justify-content: space-between; gap: 12px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--ink-3); font-weight: 500; font-size: 22px; line-height: 1; transition: transform var(--al-dur-2) var(--al-ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 20px; color: var(--ink-2); max-width: 60em; }

/* closing + footer */
.closing { padding: 56px 0; background: var(--paper-2); }
.closing-inner { display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .closing-inner { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 28px; } }
.closing-egg { width: 88px; height: 88px; }
.closing-copy p { margin-top: 8px; color: var(--ink-2); }
.foot { padding: 32px 0 44px; background: var(--paper-2); border-top: 1px solid var(--rule); }
.foot-inner { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--ink-3); }
.foot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.foot-brand svg { width: 28px; height: 28px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.legal-links a { color: var(--ink-2); }
.biz, .fine { margin: 0; }