/* reply.OS landing · "Conversa das 3h" */

@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-latin.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/bricolage-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Hanken Grotesk"; src: url(fonts/hanken-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Hanken Grotesk"; src: url(fonts/hanken-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* night: WhatsApp dark */
  --night-0: #0a1014;
  --night-1: #0f181d;
  --panel: #111b21;
  --panel-2: #202c33;
  --bubble-out: #005c4b;
  --ink: #e9edef;
  --ink-2: #c3ccd1;
  --ink-3: #8f9ea6;
  --line: rgba(233, 237, 239, .09);
  --line-2: rgba(233, 237, 239, .16);

  /* signals */
  --go: #25d9a6;
  --go-hi: #5ff0c4;
  --go-ink: #04261d;
  --tick: #53bdeb;
  --lost: #f28b7d;
  --amber: #f5b544;

  /* day */
  --day-0: #eef4f2;
  --day-1: #ffffff;
  --day-ink: #0b141a;
  --day-ink-2: #3c4d53;
  --day-line: #d2dfdb;
  --day-go: #0a7462;

  /* dusk */
  --dusk-0: #0e1c22;
  --dusk-1: #142830;

  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wa: -apple-system, "Segoe UI", Helvetica, Arial, system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 12vw, 168px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 18px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night-0);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  caret-color: var(--go);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
p, h1, h2, h3, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--go); color: var(--go-ink); }
:focus-visible { outline: 2px solid var(--tick); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: #2b3b43 var(--night-0); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--night-0); }
::-webkit-scrollbar-thumb { background: #2b3b43; border-radius: 10px; border: 2px solid var(--night-0); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--go); color: var(--go-ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* ---------- type ---------- */
.display {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.9rem, 6.4vw, 5.75rem);
  line-height: .96;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.muted-ink { color: var(--ink-3); }
.h2 {
  font-family: var(--display);
  font-weight: 650;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  text-wrap: balance;
  max-width: 20ch;
}
.h3 {
  font-family: var(--display);
  font-weight: 620;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 42ch; text-wrap: pretty; }
.sub { margin-top: 20px; font-size: 1.15rem; color: var(--ink-2); max-width: 56ch; text-wrap: pretty; }
.fineprint { font-size: .9rem; color: var(--ink-3); }
.fineprint--center { text-align: center; margin-top: 18px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--go); color: var(--go-ink);
  font-weight: 650; font-size: 1.05rem; letter-spacing: -.005em;
  padding: 15px 18px 15px 24px; border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -12px rgba(0, 0, 0, .55);
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn__arrow { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--go-ink); stroke: var(--go); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.btn:hover { background: var(--go-hi); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 14px 30px -12px rgba(0, 0, 0, .6); }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--small { font-size: .95rem; padding: 10px 18px; box-shadow: none; }
.btn--big { font-size: 1.15rem; padding: 18px 20px 18px 28px; }
.link { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: var(--go); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(10, 16, 20, .72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s;
}
.nav__inner { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; height: 68px; display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 30px; height: 30px; }
.brand__name { font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -.03em; }
.brand__name span { color: var(--go); }
.clock {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  font-family: var(--display); font-weight: 600; font-size: .95rem; font-variant-numeric: tabular-nums;
  overflow: hidden;
}
.clock [data-clock] { display: inline-block; }
.clock [data-clock].is-flip { animation: flip .5s var(--ease); }
@keyframes flip { from { transform: translateY(70%); opacity: 0; filter: blur(3px); } to { transform: none; opacity: 1; filter: none; } }
.clock__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tick); box-shadow: 0 0 0 3px rgba(83, 189, 235, .18); }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: .97rem; }
.nav__links a { text-decoration: none; color: var(--ink-2); transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
.nav .btn--small { margin-left: 8px; }
.nav[data-theme="day"] { background: rgba(238, 244, 242, .8); color: var(--day-ink); border-bottom-color: var(--day-line); }
.nav[data-theme="day"] .nav__links a { color: var(--day-ink-2); }
.nav[data-theme="day"] .nav__links a:hover { color: var(--day-ink); }
.nav[data-theme="day"] .clock { border-color: var(--day-line); }
.nav[data-theme="day"] .clock__dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(245, 181, 68, .25); }
.nav[data-theme="day"] .brand__name span { color: var(--day-go); }

/* ---------- section grounds ---------- */
.night { background: var(--night-0); color: var(--ink); }
.day { background: var(--day-0); color: var(--day-ink); color-scheme: light; }
.day .sub, .day .lede { color: var(--day-ink-2); }
.day ::selection { background: var(--day-go); color: #fff; }
.dusk { background: var(--dusk-0); color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; padding: 124px 0 calc(var(--section) * .55); overflow: clip; }
.hero::before {
  content: ""; position: absolute; inset: auto -10% -20% 35%; height: 90%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--go) 16%, transparent), rgba(83, 189, 235, .06) 55%, transparent 75%);
  pointer-events: none;
}
.hero__grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(40px, 6vw, 88px); align-items: center; min-height: min(calc(100svh - 190px), 760px); }
.hero__copy .lede { margin-top: 30px; }
.hero__copy .fineprint { margin-top: 22px; }

/* ---------- chat ---------- */
.chat-stage { position: relative; justify-self: end; width: min(100%, 440px); }
.chat {
  position: relative;
  background: #0b141a;
  border: 1px solid var(--line-2);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 40px 90px -30px rgba(0, 0, 0, .8);
  font-family: var(--wa);
}
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--panel-2); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #0b6a5c; color: #fff; font-weight: 700; }
.chat__name { font-weight: 600; font-size: .98rem; }
.chat__status { font-size: .8rem; color: var(--ink-3); min-height: 1.2em; }
.chat__status.is-typing { color: var(--go); }
.chat__body {
  display: flex; flex-direction: column; gap: 6px;
  height: 420px; overflow-y: auto; scroll-behavior: smooth;
  padding: 18px 14px 22px;
  background-color: #0b141a;
  background-image: radial-gradient(rgba(233,237,239,.07) 1px, transparent 1.3px), radial-gradient(rgba(37,217,166,.05) 1px, transparent 1.3px);
  background-position: 0 0, 8px 8px;
  -webkit-mask-image: linear-gradient(transparent 0, rgba(0,0,0,.25) 22px, #000 56px); mask-image: linear-gradient(transparent 0, rgba(0,0,0,.25) 22px, #000 56px);
  background-size: 16px 16px;
  scrollbar-width: none;
}
.chat__body::-webkit-scrollbar { display: none; }
.msg { position: relative; max-width: 84%; padding: 7px 10px 6px; border-radius: 10px; font-size: .94rem; line-height: 1.38; box-shadow: 0 1px .5px rgba(0,0,0,.25); }
.msg p { display: inline; }
.msg__meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -3px 10px; font-size: .7rem; color: rgba(233,237,239,.6); }
.msg--in { align-self: flex-start; background: var(--panel-2); border-top-left-radius: 3px; }
.msg--out { align-self: flex-end; background: var(--bubble-out); border-top-right-radius: 3px; }
.msg + .msg--in, .msg + .msg--out { margin-top: 4px; }
.ticks { width: 16px; height: 10px; fill: none; stroke: rgba(233,237,239,.6); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s var(--ease); }
.is-read .ticks, .stamp .ticks { stroke: var(--tick); }
.slots { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.slots span { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(233,237,239,.22); font-size: .85rem; font-weight: 600; color: #d9fdd3; }
.slots .is-picked.is-on { background: #d9fdd3; color: #04261d; border-color: transparent; }
.typing { display: none; gap: 4px; align-self: flex-start; padding: 11px 12px; border-radius: 10px; border-top-left-radius: 3px; background: var(--panel-2); }
.typing.is-on { display: flex; }
.typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: dot 1.1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.typing--out { align-self: flex-end; border-top-left-radius: 10px; border-top-right-radius: 3px; background: var(--bubble-out); }

.ad { display: flex; gap: 12px; align-items: center; padding: 9px 18px; background: #182329; border-bottom: 1px solid var(--line); font-family: var(--wa); }
.ad__thumb { flex: none; width: 38px; height: 38px; border-radius: 6px; background: radial-gradient(circle at 70% 30%, #ffd66b 0 18%, transparent 19%), linear-gradient(160deg, #3f8fd6 0 55%, #1d4f86 55% 100%); }
.ad__label { display: block; font-size: .72rem; color: rgba(233,237,239,.6); }
.ad__title { display: block; font-size: .84rem; font-weight: 600; line-height: 1.25; }
.voice { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 2px 0; }
.voice__play { flex: none; width: 22px; height: 22px; fill: var(--ink-2); }
.voice__wave { display: flex; align-items: center; gap: 2px; height: 26px; flex: 1; }
.voice__wave i { flex: 1; max-width: 3px; border-radius: 2px; background: rgba(233,237,239,.55); height: 30%; }
.voice__wave i:nth-child(3n) { height: 70%; } .voice__wave i:nth-child(4n+1) { height: 45%; } .voice__wave i:nth-child(5n+2) { height: 90%; } .voice__wave i:nth-child(7n) { height: 55%; }
.voice__wave i:nth-child(-n+6) { background: var(--tick); }
.voice__len { font-size: .72rem; color: rgba(233,237,239,.6); }
.msg--voice .msg__meta { margin-top: 0; }

/* JS-driven reveal: content stays visible without JS */
.js .msg.is-pending { display: none; }
.msg.is-new { animation: msgIn .45s var(--ease) both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* pills */
.pills { position: absolute; inset: 0; pointer-events: none; }
.pill {
  position: absolute; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px 9px 11px; border-radius: 999px;
  background: rgba(17, 27, 33, .9); border: 1px solid var(--line-2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .88rem; font-weight: 600; white-space: nowrap; color: var(--ink);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.7);
  transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .6s;
}
.pill svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(37,217,166,.14); stroke: var(--go); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pill { right: calc(100% - 10px); }
.pill--a { top: 78px; }
.pill--b { top: 200px; }
.pill--c { bottom: 168px; }
.pill--d { bottom: 92px; }
.js .pill { opacity: 0; transform: translateY(8px) scale(.96); }
.js .pill.is-on { opacity: 1; transform: none; border-color: rgba(37, 217, 166, .4); }
.replay { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .22em; cursor: pointer; }
.replay:hover { color: var(--ink); }

/* ---------- problem ---------- */
.problem { padding: calc(var(--section) * .7) 0 calc(var(--section) * .55); border-top: 1px solid var(--line); }
.night-line { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 1px solid var(--line-2); }
.night-line li { position: relative; padding: 26px 24px 0 0; }
.night-line li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-3); }
.night-line time { font-family: var(--display); font-weight: 650; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.night-line p { margin-top: 8px; color: var(--ink-2); max-width: 24ch; }
.night-line .is-lost::before { background: var(--lost); box-shadow: 0 0 0 4px rgba(242, 139, 125, .18); }
.night-line .is-lost time, .night-line .is-lost p { color: var(--lost); }
.evidence { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px 72px; margin-top: clamp(72px, 9vw, 120px); align-items: end; }
.evidence__big { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 3.2vw, 2.75rem); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.evidence__big strong { color: var(--go); font-weight: 750; }
.evidence__list { display: grid; gap: 18px; color: var(--ink-2); }
.evidence__list li { padding-top: 16px; border-top: 1px solid var(--line); }
.evidence__list strong { color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.2rem; }
.evidence__list a { color: var(--ink-3); font-size: .88rem; white-space: nowrap; }
.evidence__note { grid-column: 1 / -1; font-size: 1.15rem; color: var(--ink); }

/* ---------- how ---------- */
.how { padding: calc(var(--section) * .55) 0 calc(var(--section) * .35); }
.how__grid { display: grid; grid-template-columns: 200px 1fr; gap: 56px; margin-top: 72px; }
.rail ol { position: sticky; top: 112px; display: grid; gap: 4px; border-left: 1px solid var(--line-2); }
.rail a { display: block; padding: 8px 0 8px 18px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-3); text-decoration: none; font-weight: 600; transition: color .3s, border-color .3s; }
.rail a:hover { color: var(--ink); }
.rail a[aria-current="step"] { color: var(--ink); border-left-color: var(--go); }
.step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; padding-top: 0; }
.step__text p { margin-top: 16px; color: var(--ink-2); max-width: 46ch; }
.step__visual { display: grid; gap: 14px; justify-items: start; min-height: 240px; align-content: center; }

.notif { width: 100%; padding: 14px 16px; border-radius: 16px; background: #1b262c; border: 1px solid var(--line); box-shadow: 0 12px 28px -14px rgba(0,0,0,.8); }
.notif__app { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-3); }
.notif__app svg { width: 18px; height: 18px; }
.notif__title { margin-top: 8px; font-weight: 650; }
.notif__body { color: var(--ink-2); font-size: .95rem; }
.stamp { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(83, 189, 235, .12); color: #a9dcf3; font-weight: 650; font-size: .92rem; }

.fields { width: 100%; display: grid; gap: 0; }
.fields div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.fields dt { color: var(--ink-3); }
.fields dd { font-weight: 600; text-align: right; }
.fields__verdict { border-bottom: 0 !important; }
.fields__verdict dd { color: var(--go); }

.cal { width: 100%; }
.cal__title { font-weight: 650; }
.cal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cal__grid span { padding: 10px 6px; text-align: center; border-radius: 10px; border: 1px solid var(--line-2); font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal__grid .is-picked { background: var(--go); color: var(--go-ink); border-color: transparent; }
.cal__grid .is-off { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(143,158,166,.6); border-style: dashed; }
.cal__ok { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--go); font-weight: 600; font-size: .95rem; }
.cal__ok svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.card-lead { width: 100%; padding: 18px; border-radius: 14px; background: #f7faf9; color: var(--day-ink); box-shadow: 0 18px 40px -18px rgba(0,0,0,.8); }
.card-lead__col { font-size: .78rem; font-weight: 700; color: var(--day-go); }
.card-lead__name { margin-top: 6px; font-family: var(--display); font-weight: 650; font-size: 1.2rem; letter-spacing: -.01em; }
.card-lead__sum { margin-top: 6px; color: var(--day-ink-2); font-size: .95rem; }
.card-lead__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.card-lead__tags span { padding: 4px 10px; border-radius: 999px; background: #e3eeeb; font-size: .8rem; font-weight: 600; color: var(--day-ink-2); }
.card-lead__tags span:last-child { background: #d1f3e8; color: #075c4d; }

.cadence { width: 100%; display: grid; gap: 0; position: relative; }
.cadence li { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cadence li:last-child { border-bottom: 0; }
.cadence time { color: var(--ink-3); font-size: .9rem; font-variant-numeric: tabular-nums; }
.cadence .is-now span { color: var(--go); font-weight: 650; }

/* ---------- dawn ---------- */
.dawn {
  position: relative; height: clamp(260px, 42vh, 460px); overflow: hidden;
  background: linear-gradient(180deg, var(--night-0) 0%, #0f2a30 28%, #2a6262 50%, #9cc7b9 72%, #e7d9b8 86%, #f6e7c6 100%);
}
.dawn::after {
  content: ""; position: absolute; inset: auto 0 0; height: 64px; z-index: 1;
  background: linear-gradient(180deg, #f3efe2, var(--day-0));
  border-top: 1px solid rgba(255, 250, 235, .9);
  box-shadow: 0 -18px 40px -8px rgba(255, 228, 163, .55);
}
.dawn__sun {
  position: absolute; left: 50%; bottom: -60px; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0%, #ffe9b0 42%, rgba(255, 214, 140, .45) 62%, transparent 72%);
}
@supports (animation-timeline: view()) {
  .dawn__sun { animation: rise linear both; animation-timeline: view(); animation-range: entry 10% cover 70%; }
  @keyframes rise { from { transform: translateY(110px); opacity: .4; } to { transform: translateY(-30px); opacity: 1; } }
}

/* ---------- team / day ---------- */
.team { padding: 24px 0 var(--section); }
.team__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.checks { display: grid; gap: 18px; margin-top: 40px; }
.checks li { position: relative; padding-left: 34px; color: var(--day-ink-2); max-width: 56ch; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--day-go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checks strong { color: var(--day-ink); font-weight: 650; }
.checks--light li { color: var(--ink-2); }
.checks--light li::before { background-color: var(--go); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304261d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }

.board {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 16px; border-radius: 22px; background: #e2ebe8; border: 1px solid var(--day-line);
  box-shadow: 0 18px 36px -24px rgba(11, 40, 36, .35);
}
.board__col { display: grid; align-content: start; gap: 10px; padding: 6px 4px; }
.board__head { display: flex; justify-content: space-between; font-size: .82rem; font-weight: 700; color: var(--day-ink-2); padding: 2px 4px 4px; }
.board__head span { color: var(--day-ink-2); font-variant-numeric: tabular-nums; opacity: .7; }
.kcard { padding: 12px; border-radius: 10px; background: var(--day-1); box-shadow: 0 1px 2px rgba(11,20,26,.08), 0 6px 14px -10px rgba(11,20,26,.25); }
.kcard p { font-weight: 650; font-size: .95rem; }
.kcard span { display: block; margin-top: 2px; font-size: .8rem; color: var(--day-ink-2); }
.kcard--hot { outline: 2px solid var(--day-go); outline-offset: -2px; }
.board__col--hot .board__head { color: var(--day-go); }
.board__note { grid-column: 1 / -1; font-size: .8rem; color: var(--day-ink-2); padding: 2px 4px 0; }

/* ---------- who ---------- */
.who { padding: 0 0 var(--section); }
.who__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 40px; margin-top: 64px; }
.who__list li { padding-top: 22px; border-top: 1px solid var(--day-ink); }
.who__list h3 { font-family: var(--display); font-weight: 650; font-size: 1.3rem; letter-spacing: -.015em; }
.who__list q {
  display: inline-block; margin-top: 14px; padding: 8px 12px; border-radius: 10px; border-top-left-radius: 3px;
  background: var(--day-1); font-family: var(--wa); font-size: .95rem; quotes: none;
  box-shadow: 0 1px .5px rgba(11,20,26,.12);
}
.who__list p { margin-top: 14px; color: var(--day-ink-2); }

/* ---------- compare ---------- */
.compare { padding: 0 0 var(--section); }
.table-scroll { margin-top: 56px; overflow-x: auto; border-radius: 20px; border: 1px solid var(--day-line); background: var(--day-1); }
.compare__table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: .97rem; }
.compare__table th, .compare__table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--day-line); }
.compare__table tbody tr:last-child > * { border-bottom: 0; }
.compare__table thead th { font-family: var(--display); font-weight: 650; font-size: 1.02rem; color: var(--day-ink-2); }
.compare__table tbody th { font-weight: 600; color: var(--day-ink); width: 22%; position: sticky; left: 0; background: var(--day-1); z-index: 1; }
.compare__table thead th:first-child { position: sticky; left: 0; background: var(--day-1); z-index: 1; }
.compare__table td { color: var(--day-ink-2); }
.compare__table .is-us { background: #e4f6f0; color: var(--day-ink); font-weight: 650; }
.compare__table thead .is-us { color: var(--day-go); }
.compare__table a { color: var(--day-ink-2); font-size: .85rem; }

/* ---------- proof (placeholders) ---------- */
.proof { padding: 0 0 calc(var(--section) * .5); }
.proof__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; margin-top: 56px; }
.placeholder { padding: 26px; border-radius: 18px; border: 1.5px dashed #a9bcb6; background: rgba(255,255,255,.5); color: var(--day-ink-2); }
.placeholder__tag { display: inline-block; margin-bottom: 14px; padding: 3px 10px; border-radius: 999px; background: #fdf0d2; color: #7a5300; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.placeholder blockquote { font-family: var(--display); font-size: 1.3rem; line-height: 1.3; color: var(--day-ink); }
.placeholder figcaption { margin-top: 14px; font-size: .9rem; }

/* ---------- plans (dusk) ---------- */
.plans {
  padding: 0 0 var(--section);
  background: linear-gradient(180deg, var(--day-0) 0, #f2e3c6 40px, #e8b386 90px, #a8675e 140px, #4a3446 190px, #1d2433 240px, var(--dusk-0) 290px);
}
.plans__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: start; padding-top: 150px; }
.price { color: var(--go); white-space: nowrap; }
.plans .checks { margin: 36px 0 40px; }
.setup { padding: 32px; border-radius: 22px; background: var(--dusk-1); border: 1px solid var(--line); }
.setup__lead { margin-top: 12px; color: var(--ink-2); }
.setup__steps { counter-reset: s; display: grid; gap: 18px; margin-top: 28px; }
.setup__steps li { counter-increment: s; position: relative; padding-left: 44px; color: var(--ink-2); }
.setup__steps li::before { content: counter(s); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); font-family: var(--display); font-weight: 650; font-size: .9rem; color: var(--ink); }
.setup__steps strong { color: var(--ink); font-weight: 650; }

/* ---------- faq ---------- */
.faq { padding: 0 0 var(--section); background: var(--dusk-0); }
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .h2 { position: sticky; top: 112px; }
.faq__list { border-top: 1px solid var(--line-2); }
details { border-bottom: 1px solid var(--line-2); }
summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -.01em;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2);
  background: linear-gradient(var(--ink), var(--ink)) center / 11px 1.6px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.6px 11px no-repeat;
  transition: transform .35s var(--ease), background-color .3s;
}
details[open] summary::after { transform: rotate(45deg); background-color: rgba(37,217,166,.14); }
summary:hover { color: #fff; }
details p { padding: 0 48px 24px 0; color: var(--ink-2); max-width: 64ch; }

/* ---------- closing ---------- */
.closing { position: relative; padding: calc(var(--section) * 1.1) 0; text-align: center; overflow: clip; border-top: 1px solid var(--line); }
.closing::before { content: ""; position: absolute; left: 50%; bottom: -260px; width: 900px; height: 520px; margin-left: -450px; background: radial-gradient(closest-side, color-mix(in srgb, var(--go) 18%, transparent), transparent 70%); pointer-events: none; }
.closing__inner { position: relative; display: grid; justify-items: center; gap: 30px; }
.display--closing { font-size: clamp(2.4rem, 5.2vw, 4.5rem); max-width: 17ch; }
.closing .lede { margin: 0 auto; }

/* ---------- footer ---------- */
.footer { padding: 48px 0 56px; border-top: 1px solid var(--line); }
.footer__inner { display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; align-items: center; color: var(--ink-3); font-size: .95rem; }
.footer__meta { grid-column: 1 / -1; margin-top: 18px; font-size: .85rem; }
.footer__meta a { color: var(--ink-3); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .pills { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
  .pill { position: static; }
}
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .clock { margin-left: auto; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .chat-stage { justify-self: center; margin-top: 8px; }
  .how__grid { grid-template-columns: 1fr; margin-top: 48px; }
  .rail { display: none; }
  .team__grid, .plans__grid, .faq__grid { grid-template-columns: 1fr; }
  .faq .h2 { position: static; }
  .who__list { grid-template-columns: repeat(2, 1fr); }
  .proof__grid { grid-template-columns: 1fr 1fr; }
  .proof__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  body { font-size: 1rem; }
  .nav__inner { height: 60px; gap: 12px; }
  .brand__name { font-size: 1.15rem; }
  .clock { padding: 4px 10px; font-size: .85rem; }
  .btn--small { padding: 9px 14px; font-size: .88rem; }
  .hero { padding-top: 104px; }
  .chat__body { height: 400px; }
  .night-line { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line-2); margin-left: 4px; }
  .night-line li { padding: 0 0 28px 26px; }
  .night-line li::before { top: 10px; left: -5px; }
  .evidence { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
  .step__visual { min-height: 0; }
  .who__list { grid-template-columns: 1fr; gap: 36px; }
  .board { grid-template-columns: 1fr 1fr; }
  .board__col:first-child { display: none; }
  .proof__grid { grid-template-columns: 1fr; }
  .setup { padding: 24px; }
  details p { padding-right: 0; }
  .footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .table-scroll { overflow: visible; border: 0; background: none; border-radius: 0; }
  .compare__table { min-width: 0; display: block; }
  .compare__table thead { display: none; }
  .compare__table tbody { display: grid; gap: 14px; }
  .compare__table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 16px; overflow: hidden; background: var(--day-1); border: 1px solid var(--day-line); }
  .compare__table tbody th { position: static; grid-column: 1 / -1; width: auto; font-family: var(--display); font-size: 1.05rem; padding: 14px 16px 10px; border-bottom: 0; }
  .compare__table td { padding: 10px 16px 12px; border-bottom: 0; border-top: 1px solid var(--day-line); font-size: .92rem; }
  .compare__table td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 700; color: var(--day-ink-2); opacity: .8; }
  .compare__table td.is-us { grid-column: 1 / -1; }
  .compare__table td.is-us::before { color: var(--day-go); opacity: 1; }
  .compare__table td:nth-child(odd):not(.is-us) { border-left: 1px solid var(--day-line); }
}
@media (max-width: 420px) {
  .nav .btn--small { display: none; }
  .msg { max-width: 90%; }
}


/* =========================================================
   Shared additions (support page + hub)
   ========================================================= */
[hidden] { display: none !important; }
/* dark artifacts keep night ink on any ground */
.chat, .screen, .notif, .step__visual { color: var(--ink); }
.day .display, .day .h2, .day .h3 { color: var(--day-ink); }
.day .muted-ink { color: #6f8187; }
.day .fineprint { color: var(--day-ink-2); }
.day .link, .day .replay { color: var(--day-ink); text-decoration-color: #a9bcb6; }
.day .link:hover, .day .replay:hover { text-decoration-color: var(--day-go); color: var(--day-ink); }
.link--button { display: inline-block; margin-top: 30px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; cursor: pointer; }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: rgba(233, 237, 239, .1); color: var(--ink-2); font-size: .76rem; font-weight: 650; white-space: nowrap; }
.tag--hot { background: rgba(245, 181, 68, .16); color: #f8cf7d; }
.tag--good { background: rgba(37, 217, 166, .14); color: var(--go); }

/* ---------- support: hero on day ground ---------- */
.hero--day::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--go) 14%, transparent), rgba(83, 189, 235, .06) 55%, transparent 75%); }
.hero--day .lede { color: var(--day-ink-2); }

.lenses { justify-self: end; width: min(100%, 460px); }
.lenses__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #dbe7e3; border: 1px solid var(--day-line); }
.lenses__tabs [role="tab"] {
  flex: 1; padding: 9px 8px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 650 .92rem/1.1 var(--body); color: var(--day-ink-2);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lenses__tabs [role="tab"]:hover { color: var(--day-ink); }
.lenses__tabs [role="tab"][aria-selected="true"] { background: var(--night-0); color: var(--ink); box-shadow: 0 4px 12px -6px rgba(10, 16, 20, .5); }
.lens { margin-top: 14px; }
.lens:not([hidden]) { animation: lensIn .45s var(--ease) both; }
@keyframes lensIn { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }
.lens .chat__body { height: auto; min-height: 600px; overflow: visible; -webkit-mask-image: none; mask-image: none; }

.msg--sys { align-self: center; max-width: 92%; margin: 6px 0; padding: 5px 12px; border-radius: 8px; background: rgba(233, 237, 239, .08); color: var(--ink-2); font-size: .78rem; text-align: center; box-shadow: none; }
.msg__who { display: block; margin-bottom: 2px; font-size: .74rem; font-weight: 700; color: #9fe7cf; }
.photo { display: block; width: calc(100% + 12px); max-width: none; height: auto; margin: -3px -6px 7px; border-radius: 7px; }
.photo--thumb { width: 200px; margin: 0; border-radius: 10px; }
.lens .photo { width: 230px; margin: -2px -4px 7px; }
.lens .pill--c { top: 468px; bottom: auto; }
.lens .pill--d { bottom: 84px; }

.screen {
  padding: 22px; border-radius: 24px;
  background: #0b141a; border: 1px solid var(--line-2); color: var(--ink);
  box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 40px 90px -30px rgba(0, 0, 0, .55);
  display: grid; align-content: start; gap: 16px;
}
.screen--lens { min-height: 668px; }
.screen__title { display: flex; align-items: center; gap: 12px; justify-content: space-between; font-family: var(--display); font-weight: 650; font-size: 1.05rem; }
.screen__title span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.screen--split { grid-template-columns: .9fr 1.1fr; gap: 14px; align-content: stretch; }
.inbox__list { display: grid; gap: 4px; margin-top: 12px; }
.inbox__list li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 10px; border-radius: 12px; }
.inbox__list li.is-active { background: var(--panel-2); }
.inbox__name { font-weight: 650; font-size: .92rem; }
.inbox__line { grid-row: 2; font-size: .8rem; color: var(--ink-3); }
.inbox__time { font-size: .74rem; color: var(--ink-3); }
.inbox__list li.is-active .inbox__time { color: var(--go); }
.case { display: grid; align-content: start; gap: 10px; padding-left: 14px; border-left: 1px solid var(--line); }
.case__state { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink-3); }
.case__state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.case__label { font-size: .74rem; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.case__summary, .case__note { padding: 12px; border-radius: 12px; font-size: .88rem; line-height: 1.45; }
.case__summary { background: rgba(83, 189, 235, .1); }
.case__note { background: rgba(245, 181, 68, .1); }
.case__note b { color: #f8cf7d; font-weight: 650; }
.case__thread { display: grid; gap: 6px; }
.case__msg { justify-self: start; max-width: 90%; padding: 6px 10px; border-radius: 10px; border-top-left-radius: 3px; background: var(--panel-2); font-family: var(--wa); font-size: .86rem; }
.case__msg--sys { justify-self: center; border-radius: 8px; background: rgba(233, 237, 239, .08); color: var(--ink-2); font-family: var(--body); font-size: .76rem; }
.composer--lens { grid-template-columns: 1fr; }
.case__quick { display: flex; flex-wrap: wrap; gap: 6px; }
.case__quick span { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line-2); font-size: .8rem; color: var(--ink-2); }

.queue { width: 100%; border-collapse: collapse; font-size: .9rem; }
.queue th, .queue td { padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.queue thead th { font-size: .74rem; font-weight: 700; color: var(--ink-3); }
.queue tbody th { font-weight: 650; }
.queue td { color: var(--ink-2); }
.queue .is-ai { color: var(--go); font-weight: 650; }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(245, 181, 68, .1); font-size: .88rem; }
.alert svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.alert p + p { color: var(--ink-3); }
.tasks { display: grid; gap: 8px; font-size: .88rem; color: var(--ink-2); }
.tasks li { display: flex; align-items: center; gap: 10px; }

.mood { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; }
.mood span { width: var(--w); }
.mood__pos { background: var(--go); } .mood__neu { background: #5d6d74; } .mood__neg { background: var(--lost); }
.mood__legend { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-3); margin-top: -8px; }

/* ---------- support: sections ---------- */
.problem--day { padding: calc(var(--section) * .7) 0 calc(var(--section) * .6); border-top: 1px solid var(--day-line); }
.day-line { border-top-color: var(--day-line); }
.day-line li::before { background: var(--day-ink-2); }
.day-line time { color: var(--day-ink); }
.day-line p { color: var(--day-ink-2); }
.day-line .is-lost::before { background: #c2493a; box-shadow: 0 0 0 4px rgba(194, 73, 58, .15); }
.day-line .is-lost time, .day-line .is-lost p { color: #b13d2f; }
.problem__close { margin-top: clamp(56px, 7vw, 88px); font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; max-width: 30ch; text-wrap: balance; }

.crosslink { padding: 0 0 calc(var(--section) * .5); }
.crosslink__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; padding-top: 36px; border-top: 1px solid var(--day-ink); }
.crosslink .h3 { max-width: 34ch; }


/* ---------- support: role sections (screen + numbered notes) ---------- */
.mark { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--go); color: var(--go-ink); font: 700 .74rem/1 var(--body); font-variant-numeric: tabular-nums; vertical-align: middle; }
.screen span.mark, .cadence span.mark, .export span.mark { display: inline-grid; color: var(--go-ink); }
.day .notes .mark { background: var(--day-go); color: #fff; }
.role { padding: calc(var(--section) * .6) 0; border-top: 1px solid var(--day-line); }
.role__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.role--flip .role__text { order: 2; }
.role__screen .fineprint { margin-top: 12px; }
.notes { display: grid; gap: 14px; margin-top: 32px; }
.notes li { display: flex; gap: 12px; align-items: flex-start; color: var(--day-ink-2); max-width: 52ch; }
.notes .mark { margin-top: 1px; }

.chatlist li { position: relative; display: grid; grid-template-columns: 36px 1fr auto; column-gap: 12px; row-gap: 2px; padding: 12px 34px 12px 2px; border-bottom: 1px solid var(--line); }
.chatlist li:last-child { border-bottom: 0; }
.chatlist__av { grid-row: span 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); font-weight: 700; color: var(--ink-2); }
.chatlist__name { font-weight: 650; }
.chatlist__time { font-size: .76rem; color: var(--ink-3); }
.chatlist__q, .chatlist__a { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; font-family: var(--wa); font-size: .88rem; }
.chatlist__q { color: var(--ink); }
.chatlist__a { color: var(--ink-3); }
.chatlist .ticks { flex: none; stroke: var(--tick); }
.chatlist .is-human .chatlist__a { color: #f8cf7d; font-family: var(--body); font-weight: 650; }
.chatlist li > .mark { position: absolute; right: 2px; top: 50%; translate: 0 -50%; }
.ico { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.screen--desk { grid-template-columns: 170px 1fr; gap: 16px; }
.desk__list { display: grid; align-content: start; gap: 4px; padding-right: 14px; border-right: 1px solid var(--line); }
.desk__item { padding: 9px 10px; border-radius: 10px; font-weight: 650; font-size: .9rem; }
.desk__item span { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-3); }
.desk__item.is-active { background: var(--panel-2); }
.desk__conv { display: grid; align-content: start; gap: 10px; }
.desk__conv .case__label { display: flex; align-items: center; gap: 8px; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line-2); font-size: .9rem; }
.composer__cmd { color: var(--go); font-weight: 650; font-size: .82rem; }
.composer__text { grid-column: 1; color: var(--ink-2); }
.composer .mark { grid-row: 1 / 3; grid-column: 2; }

.labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cadence--inline { padding: 4px 0; }
.cadence--inline li { grid-template-columns: 64px 1fr; }
.cadence--inline span { display: inline-flex; align-items: center; gap: 8px; }
.mini-board { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.role .mini-board { padding-right: 30px; }
.mini-board div { padding: 10px; border-radius: 10px; background: var(--night-1); border: 1px solid var(--line); }
.mini-board p { font-size: .74rem; font-weight: 700; color: var(--ink-3); }
.mini-board div span { display: block; margin-top: 6px; font-size: .82rem; color: var(--ink-2); }
.mini-board .is-hot { color: #f8cf7d; }
.mini-board > .mark { position: absolute; right: 0; top: 50%; translate: 0 -50%; }
.queue thead th .mark { margin-left: 6px; }
.export { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-family: var(--body); font-size: .8rem; font-weight: 650; color: var(--ink-2); }

.lead-figure { display: grid; gap: 4px; padding: 6px 0 4px; }
.lead-figure__num { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 5vw, 4rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lead-figure__label { color: var(--ink-2); max-width: 40ch; }
.rows { display: grid; }
.rows li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: .88rem; }
.rows__name { font-weight: 650; }
.rows__sum { color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.mood__legend .mark { width: 18px; height: 18px; font-size: .66rem; margin-left: 4px; }

/* ---------- hub ---------- */
.hub { padding: 112px 0 calc(var(--section) * .5); position: relative; overflow: clip; }
.hub__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 4.5vw, 64px); align-items: center; min-height: calc(100svh - 170px); }
.hub::before { content: ""; position: absolute; inset: 30% -10% auto; height: 70%; background: radial-gradient(closest-side, color-mix(in srgb, var(--go) 12%, transparent), transparent 70%); pointer-events: none; }
.hub .wrap { position: relative; }
.hub__title { max-width: 13ch; font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
.hub__lede { margin-top: 24px; max-width: 44ch; }
.hub__copy .actions { margin-top: 30px; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.door {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  min-height: 400px; padding: 26px; border-radius: 26px; text-decoration: none; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.door--night { background: var(--night-1); border: 1px solid var(--line-2); color: var(--ink); }
.door--day { background: var(--day-0); border: 1px solid var(--day-line); color: var(--day-ink); }
.door:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.door--night:hover { border-color: rgba(37, 217, 166, .5); }
.door--day:hover { border-color: var(--day-go); }
.door__time { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.door--night .door__time { color: var(--ink-3); }
.door--day .door__time { color: #6f8187; }
.door__name { font-family: var(--display); font-weight: 650; font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -.02em; line-height: 1.05; }
.door__line { max-width: 34ch; font-size: 1.05rem; }
.door--night .door__line { color: var(--ink-2); }
.door--day .door__line { color: var(--day-ink-2); }
.door__bubble { display: inline-flex; align-items: flex-end; gap: 6px; max-width: 86%; padding: 7px 10px; border-radius: 10px; font-family: var(--wa); font-size: .9rem; line-height: 1.35; }
.door__bubble--in { border-top-left-radius: 3px; }
.door__bubble--out { align-self: flex-end; border-top-right-radius: 3px; }
.door--night .door__bubble--in { background: var(--panel-2); }
.door--night .door__bubble--out { background: var(--bubble-out); }
.door--day .door__bubble--in { background: var(--day-1); box-shadow: 0 1px .5px rgba(11,20,26,.12); }
.door--day .door__bubble--out { background: #d9fdd3; color: var(--day-ink); }
.door__bubble .ticks { flex: none; stroke: var(--tick); }
.door__go { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 14px; font-weight: 650; }
.door__go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.door:hover .door__go svg { transform: translateX(4px); }
.door--night .door__go { color: var(--go); }
.door--day .door__go { color: var(--day-go); }
.door__now { position: absolute; top: 26px; right: 26px; display: none; padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.door.is-now .door__now { display: inline-block; }
.door--night .door__now { background: rgba(83, 189, 235, .16); color: #a9dcf3; }
.door--day .door__now { background: #fdf0d2; color: #7a5300; }

.shared { padding: calc(var(--section) * .6) 0; border-top: 1px solid var(--line); }
.shared__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.shared__list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.shared__list li { padding-top: 16px; border-top: 1px solid var(--line-2); color: var(--ink-2); }
.shared__list strong { display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 650; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); }
.closing--hub .h2 { max-width: 24ch; margin-inline: auto; }

/* ---------- responsive (additions) ---------- */
@media (max-width: 1024px) {
  .lenses { justify-self: center; margin-top: 8px; }
  .role__grid, .shared__grid { grid-template-columns: 1fr; }
  .role--flip .role__text { order: 0; }
  .hub__grid { grid-template-columns: 1fr; min-height: 0; }
  .doors { grid-template-columns: 1fr 1fr; margin-top: 16px; }
  .door { min-height: 0; }
}
@media (max-width: 760px) {
  .lenses__tabs [role="tab"] { font-size: .82rem; padding: 8px 4px; }
  .screen { padding: 16px; min-height: 0; }
  .screen--split { grid-template-columns: 1fr; }
  .case { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .screen--desk { grid-template-columns: 1fr; }
  .desk__list { display: none; }
  .mini-board { grid-template-columns: 1fr; }
  .rows li { grid-template-columns: 1fr auto; }
  .rows__sum { grid-column: 1 / -1; grid-row: 2; }
  .screen--lens { min-height: 0; }
  .shared__list { grid-template-columns: 1fr; }
  .hub { padding-top: 96px; }
  .doors { grid-template-columns: 1fr; }
  .door { padding: 22px; }
}


/* ---------- web chat page ---------- */
.nav--chat .nav__back { margin-left: auto; color: var(--ink-2); }
.talk { min-height: 100svh; padding: 108px 0 56px; position: relative; overflow: clip; }
.talk::before { content: ""; position: absolute; inset: 20% -10% auto 40%; height: 80%; background: radial-gradient(closest-side, color-mix(in srgb, var(--go) 10%, transparent), transparent 70%); pointer-events: none; }
.talk__grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; min-height: calc(100svh - 164px); }
.talk__title { max-width: 14ch; }
.talk__copy .lede { margin-top: 22px; }
.talk__steps { display: grid; gap: 14px; margin-top: 32px; }
.talk__steps li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.talk__steps .mark { margin-top: 2px; }
.talk__privacy { margin-top: 32px; max-width: 44ch; }
.talk__privacy a { color: var(--ink-2); }
.talk__stage { justify-self: end; width: min(100%, 460px); }
.talk__chat {
  --vw-inline-height: min(720px, calc(100svh - 150px));
  min-height: var(--vw-inline-height); border-radius: 20px;
  background: #efeae2; box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.talk__chat:focus { outline: none; }
.talk__fallback { padding: 28px; border-radius: 20px; background: var(--night-1); border: 1px solid var(--line-2); color: var(--ink-2); }
.talk__fallback-title { font-family: var(--display); font-weight: 650; font-size: 1.3rem; color: var(--ink); margin-bottom: 8px; }
.talk__fallback a { color: var(--go); }

@media (max-width: 900px) {
  .talk { padding: 76px 0 32px; }
  .talk__grid { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
  .talk__stage { order: -1; justify-self: stretch; width: 100%; }
  .talk__chat { --vw-inline-height: calc(100svh - 92px); }
  .talk__title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}