/* Teddo — one stylesheet for the public site and the app pages.
   World: the chief of staff's typed memo. White bond paper, one ink accent
   (ledger green), hairline rules, field labels, stamped states, tabular figures. */

:root {
  --paper: #fbfbf9;
  --paper-2: #f2f3ef;
  --ink: #15181a;
  --ink-2: #4c5359;
  --ink-3: #646b71;
  --rule: #d8dbd4;
  --rule-2: #e9ebe5;
  --accent: #0e6a4f;
  --accent-2: #0b5640;
  --on-accent: #ffffff;
  --tint: #e3f0e9;
  --tint-ink: #0a4d39;
  --warn: #9a5b00;
  --warn-tint: #fbefd8;
  --danger: #a3271b;
  --danger-tint: #fae3df;
  --shadow: 0 8px 24px -12px rgba(21, 24, 26, .28), 0 1px 2px rgba(21, 24, 26, .08);
  --slack-bg: #ffffff;
  --slack-side: #3f0e40;
  --font: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --measure: 66ch;
  --wrap: 72rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #101312; --paper-2: #171b19; --ink: #ecefea; --ink-2: #b2b9b3; --ink-3: #7f8781;
    --rule: #2b312d; --rule-2: #1f2522; --accent: #4cc79b; --accent-2: #6fd6b0; --on-accent: #07150f;
    --tint: #16291f; --tint-ink: #8fe1c1; --warn: #f0b458; --warn-tint: #2c2210; --danger: #f08a7e;
    --danger-tint: #331916; --shadow: 0 8px 24px -12px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
    --slack-bg: #1a1d21; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #101312; --paper-2: #171b19; --ink: #ecefea; --ink-2: #b2b9b3; --ink-3: #7f8781;
  --rule: #2b312d; --rule-2: #1f2522; --accent: #4cc79b; --accent-2: #6fd6b0; --on-accent: #07150f;
  --tint: #16291f; --tint-ink: #8fe1c1; --warn: #f0b458; --warn-tint: #2c2210; --danger: #f08a7e;
  --danger-tint: #331916; --shadow: 0 8px 24px -12px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5);
  --slack-bg: #1a1d21; color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font); font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased; accent-color: var(--accent);
}
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; border: 2px solid var(--paper); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); letter-spacing: -.03em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
p { margin: 0; }
p + p { margin-top: .8em; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-2); }
strong { font-weight: 600; }
small, .small { font-size: .875rem; }
.muted { color: var(--ink-2); }
.num, td.num, .table td:not(:first-child) { font-variant-numeric: tabular-nums; }
ul, ol { margin: 0; padding-left: 1.25em; }
img, svg { max-width: 100%; }
svg.i { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.measure { max-width: var(--measure); }
.field { display: inline-flex; gap: .5em; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.field b { color: var(--ink); }

/* ---------- buttons & controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 2.9rem; padding: .6rem 1.15rem; border-radius: .5rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--paper); }
.btn:active { transform: translateY(0); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn.sm { min-height: 2.25rem; padding: .35rem .8rem; font-size: .875rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn .slack-mark, svg.i.slack-mark { width: 1.05em; height: 1.05em; fill: currentColor; stroke: none; }

input, select, textarea, button { font: inherit; color: inherit; }
.input, select.input, textarea.input {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--rule); border-radius: .45rem; background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--ink-3); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
.input[aria-invalid="true"] { border-color: var(--danger); }
label.lbl { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }
.help { font-size: .8125rem; color: var(--ink-2); margin-top: .35rem; }
.form-row { margin-bottom: 1rem; }
.form-row.two { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 40rem) { .form-row.two { grid-template-columns: 1fr; } }
@media (min-width: 40.01rem) { .form-row.confirm { grid-template-columns: 1fr auto; } }

.pill { display: inline-flex; align-items: center; gap: .4em; padding: .2em .65em; border-radius: 999px; font-size: .8125rem; font-weight: 600; background: var(--tint); color: var(--tint-ink); }
.pill.warn { background: var(--warn-tint); color: var(--warn); }
.pill.danger { background: var(--danger-tint); color: var(--danger); }
.pill.neutral { background: var(--paper-2); color: var(--ink-2); }
.stamp {
  display: inline-block; padding: .1em .5em; border: 2px solid var(--accent); color: var(--accent); border-radius: .25em;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-4deg);
}

/* ---------- header / letterhead ---------- */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.top > .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4rem; }
.wordmark { font-weight: 700; font-size: 1.375rem; letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.wordmark span { color: var(--accent); }
.nav { display: none; gap: 1.5rem; margin-left: auto; align-items: center; }
.nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav .btn { margin-left: .5rem; }
.iconbtn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }
.iconbtn:hover { border-color: var(--ink); }
.top .iconbtn.menu { margin-left: auto; }
.theme .sun, :root[data-theme="dark"] .theme .moon { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .moon { display: none; } :root:not([data-theme="light"]) .theme .sun { display: block; } }
.mobile-nav { display: none; border-bottom: 1px solid var(--rule); background: var(--paper); box-shadow: var(--shadow); }
.mobile-nav.open { display: block; }
.mobile-nav .wrap { display: block; padding-bottom: 1rem; }
.mobile-nav a { display: block; padding: .9rem 0; border-top: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.0625rem; }
.mobile-nav a.btn { display: flex; margin-top: 1rem; border-top: 0; padding: .6rem 1.15rem; }
.mobile-nav .theme { display: inline-flex; align-items: center; gap: .6rem; width: auto; height: 2.5rem; padding: 0 .9rem; margin-top: .75rem; font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 52rem) { .nav { display: flex; } .top .iconbtn.menu, .mobile-nav { display: none !important; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 7rem); position: relative; }
.section + .section { border-top: 1px solid var(--rule-2); }
.section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); } .section-head h2::before { content: ""; display: block; width: 3rem; border-top: 2px solid var(--ink); margin-bottom: 1.25rem; }
.section-head p { margin-top: 1rem; color: var(--ink-2); font-size: 1.125rem; max-width: 60ch; }
.trust { font-size: .9375rem; color: var(--ink-2); }

/* ---------- scroll reveal: one staggered moment per chapter, off by default ---------- */
html.js-reveal .jr { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
html.js-reveal .jr.jr-seen { opacity: 1; transform: none; }

/* hero */
.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.hero .wrap { display: grid; gap: 3rem; align-items: center; }
.hero .lede { margin-top: 1.25rem; font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.hero .lede + .lede { margin-top: 1rem; }
/* Roles: the pen underlines one role at a time. Text stays static and readable. */
.role { position: relative; white-space: nowrap; transition: color .35s var(--ease); }
.role::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease), opacity .3s; opacity: 0; }
.role.is-on { color: var(--ink); }
.role.is-on::after { transform: scaleX(1); opacity: 1; }
.role.is-off::after { transform: scaleX(1); transform-origin: right; transform: scaleX(0); opacity: 0; }
@media (prefers-reduced-motion: reduce) { .role, .role::after { transition: none; } }
.hero .cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.cta .btn { flex: 1 1 auto; }
@media (min-width: 40.01rem) { .cta .btn { flex: 0 0 auto; } }
.hero .trust { margin-top: 1.25rem; display: flex; gap: .5em; align-items: flex-start; max-width: 40ch; }
.hero .trust svg { margin-top: .15em; color: var(--accent); }
@media (min-width: 62rem) { .hero { padding-block: 2.5rem 4rem; } .hero .wrap { grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: start; } .hero > .wrap > div:first-child { padding-top: 2rem; } }

/* ---------- Slack mock ---------- */
.slack { border: 1px solid var(--rule); border-radius: .75rem; background: var(--slack-bg); box-shadow: var(--shadow); overflow: hidden; font-size: .9375rem; }
.slack-bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--rule); font-weight: 600; }
.slack-bar .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #2bac76; }
.slack-bar .synthetic { margin-left: auto; font-weight: 500; font-size: .75rem; color: var(--ink-3); }
.slack-body { padding: .75rem 1rem 1rem; display: grid; gap: .9rem; position: relative; }
.msg { display: grid; grid-template-columns: 2.25rem 1fr; gap: .65rem; align-items: start; }
/* Content is fully present and visible with no JS / reduced motion: every message, its full
   typed text and its card/chart sit in normal flow from first paint. When JS decides to play
   the choreography, it flags #demo as animated, clears the typed/streamed text back out and
   clips .slack-body to an explicit height that JS grows continuously as each message is typed,
   streamed and revealed in turn, so the card's visible height tracks the conversation instead
   of being full height from the start. */
#demo.demo-js .slack-body { overflow: hidden; transition: height .9s ease-out; }
#demo.demo-js .msg:not(.is-shown) { opacity: 0; transform: translateY(6px); }
#demo.demo-js .msg.is-shown { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.msg .av { width: 2.25rem; height: 2.25rem; border-radius: .4rem; display: grid; place-items: center; font-weight: 700; font-size: .875rem; color: #fff; background: #5b6770; }
.msg.otto .av { background: var(--accent); color: var(--on-accent); }
.msg .who { font-weight: 700; }
.msg .app-badge { margin-left: .4em; padding: .05em .35em; border-radius: .25rem; background: var(--paper-2); color: var(--ink-3); font-size: .625rem; font-weight: 700; letter-spacing: .04em; vertical-align: middle; }
.msg .when { color: var(--ink-3); font-size: .75rem; margin-left: .4em; font-variant-numeric: tabular-nums; }
#demo.demo-js .msg .when { opacity: 0; transition: opacity .3s var(--ease); }
#demo.demo-js .msg.sent .when { opacity: 1; }
.msg .txt { margin: .1rem 0 0; }
/* The @-mention chip: instant, like Slack's autocomplete: soft accent tint, plain ink text. */
.mention { display: inline-block; background: var(--tint); color: var(--ink); border-radius: .3rem; padding: .05em .45em; font-weight: 600; }
/* Typing caret: only shown while JS marks a message .is-typing; hidden by default so the
   finished state (no-JS, reduced motion, or after sending) never carries a stray cursor. */
.caret { display: none; width: 2px; height: 1em; margin-left: 1px; background: var(--ink); vertical-align: text-bottom; }
#demo.demo-js .msg.is-typing .caret { display: inline-block; animation: blink .9s steps(1) infinite; }
/* Teddo's word-stream: each chunk fades in as it lands so the reply reads as a live stream. */
#demo.demo-js .chunk { opacity: 0; transition: opacity .25s var(--ease); }
#demo.demo-js .chunk.in { opacity: 1; }
.card { margin-top: .5rem; border: 1px solid var(--rule); border-radius: .4rem; padding: .6rem .8rem; background: var(--paper-2); font-size: .875rem; display: block; text-decoration: none; color: inherit; }
#demo.demo-js .card { opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
#demo.demo-js .card.is-shown { opacity: 1; transform: none; }
.card b { display: block; }
.card .row { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border-top: 1px solid var(--rule-2); font-variant-numeric: tabular-nums; }
.card .row:first-of-type { border-top: 0; }
.card .up { color: var(--accent); font-weight: 600; }
.msg .acts { display: flex; gap: .5rem; margin-top: .5rem; }
.msg .acts span { padding: .3rem .7rem; border: 1px solid var(--rule); border-radius: .35rem; font-size: .8125rem; font-weight: 600; }
.msg .acts span.go { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Card head: doc/sheet icon + title + Slack-unfurl-style meta line. */
.card-head { display: flex; align-items: flex-start; gap: .55rem; }
.card-head .card-icon { color: var(--ink-3); margin-top: .1rem; }
.card-head b { font-size: .9375rem; }
.card-head span { display: block; margin-top: .1rem; color: var(--ink-3); font-size: .75rem; }
/* Redlines: clause -> our term, struck/inserted in the one danger / accent ink. */
.redlines { list-style: none; margin: .6rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--rule-2); display: grid; gap: .35rem; }
.redlines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35em; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.redlines .clause { color: var(--ink-2); font-weight: 600; margin-right: .15em; }
.redlines .del { color: var(--danger); text-decoration: line-through; }
.redlines .ins { color: var(--accent); font-weight: 600; }
.redlines .ins::before { content: "\2192"; margin-right: .3em; color: var(--ink-3); }
/* Inline signups chart: memo palette, tabular week labels, one annotated headline figure. */
.chart { margin: .6rem 0 0; padding: .55rem 0 0; border-top: 1px solid var(--rule-2); }
.chart svg { display: block; width: 100%; height: auto; max-height: 90px; overflow: visible; }
.chart .chart-base { stroke: var(--rule); stroke-width: 1; }
.chart .chart-bars rect { fill: var(--accent); }
.chart .chart-bars rect:nth-last-child(-n+2) { fill: var(--ink-3); }
/* Bars draw in from the baseline once the card is on screen; each one a touch later than the
   last so the chart reads as being plotted, not popped in. */
#demo.demo-js .chart .chart-bars rect { transform: scaleY(0); transform-origin: center bottom; transform-box: fill-box; transition: transform .5s var(--ease); }
#demo.demo-js .chart.chart-in .chart-bars rect { transform: scaleY(1); }
#demo.demo-js .chart .chart-bars rect:nth-child(1) { transition-delay: 0ms; }
#demo.demo-js .chart .chart-bars rect:nth-child(2) { transition-delay: 35ms; }
#demo.demo-js .chart .chart-bars rect:nth-child(3) { transition-delay: 70ms; }
#demo.demo-js .chart .chart-bars rect:nth-child(4) { transition-delay: 105ms; }
#demo.demo-js .chart .chart-bars rect:nth-child(5) { transition-delay: 140ms; }
#demo.demo-js .chart .chart-bars rect:nth-child(6) { transition-delay: 175ms; }
#demo.demo-js .chart .chart-bars rect:nth-child(7) { transition-delay: 210ms; }
#demo.demo-js .chart .chart-bars rect:nth-child(8) { transition-delay: 245ms; }
.chart-labels { display: flex; justify-content: space-between; margin-top: .3rem; font-size: .6875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart figcaption { margin-top: .3rem; font-size: .8125rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Typing indicator: Teddo's own pending row (avatar + name are already shown; the dots sit
   where its text will land), so it never adds height of its own — the line is reserved and
   the dots simply swap for the streamed text within it, no jump. */
.msg.otto .txt { min-height: 1.55em; }
.dots { display: none; align-items: center; gap: .3rem; height: 1.55em; }
.msg.is-typing .dots { display: inline-flex; }
.msg.is-typing .stream { display: none; }
.dots i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--ink-3); animation: blink 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- steps ---------- */
.steps { display: grid; gap: 2rem; list-style: none; padding: 0; }
.step { border-top: 2px solid var(--ink); padding-top: 1rem; }
.step h3 { display: flex; align-items: center; gap: .6rem; }
.step h3 .k { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: .875rem; font-weight: 700; }
.step p { margin-top: .6rem; color: var(--ink-2); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* ---------- daily list (6 items, ruled) ---------- */
.daily { display: grid; border-top: 1px solid var(--rule); }
.daily article { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.daily svg.i { width: 1.5rem; height: 1.5rem; color: var(--accent); margin-top: .1rem; }
.daily p { margin-top: .4rem; color: var(--ink-2); }
.daily .ask { margin-top: .75rem; font-size: .9375rem; color: var(--ink); }
.daily .ask::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); margin-right: .55em; vertical-align: .05em; }
@media (min-width: 52rem) { .daily { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { display: inline-flex; align-items: center; gap: .55em; padding: .5rem .9rem; border: 1px solid var(--rule); border-radius: .5rem; font-weight: 500; background: var(--paper); transition: border-color .15s, color .15s; }
.chip.more { border-style: dashed; color: var(--ink-2); }
.chip:hover { border-color: var(--accent); }
.chip:hover .logo { color: var(--accent); }
.logo { width: 1.15em; height: 1.15em; flex: none; color: var(--ink-2); transition: color .15s; }
.logo-mono { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: .25em; background: var(--tint); color: var(--tint-ink); font-size: .75em; font-weight: 700; line-height: 1; }

/* promises */
.promises { display: grid; gap: 1.5rem; }
.promise { border-top: 2px solid var(--accent); padding-top: 1rem; }
.promise p { margin-top: .5rem; color: var(--ink-2); }
@media (min-width: 52rem) { .promises { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 1.25rem; }
.plan { border: 1px solid var(--rule); border-radius: .75rem; padding: 2rem 1.5rem; background: var(--paper); display: flex; flex-direction: column; gap: 1.25rem; position: relative; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan .price { font-size: 2.25rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: 1rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.plan .req { font-weight: 600; }
.plan .btn { margin-top: 1.5rem; }
.plan .tag { position: absolute; top: -.75rem; left: 1.5rem; }
@media (min-width: 52rem) { .plans { grid-template-columns: repeat(3, 1fr); } }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: .75rem; }
.table { width: 100%; border-collapse: collapse; min-width: 44rem; }
.table th, .table td { padding: .9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.table thead th { background: var(--paper-2); font-weight: 600; }
.table th:first-child, .table td:first-child { color: var(--ink-2); font-weight: 500; width: 22%; position: sticky; left: 0; background: var(--paper); border-right: 1px solid var(--rule); }
.table thead th:first-child { background: var(--paper-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .featured { background: color-mix(in srgb, var(--tint) 45%, transparent); }
@media (max-width: 52rem) {
  .table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .table { min-width: 0; }
  .table thead { display: none; }
  .table tr { display: block; border-top: 1px solid var(--rule); padding: .9rem 0 .5rem; }
  .table tbody tr:first-child { border-top: 0; }
  .table th, .table td { display: block; padding: 0; border: 0; width: auto; position: static; background: transparent; }
  .table th:first-child, .table td:first-child { border-right: 0; width: auto; position: static; }
  .table th[scope="row"] { color: var(--ink); font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .5rem; }
  .table td { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .35rem 0; }
  .table td::before { content: attr(data-label); color: var(--ink-2); }
  .table td.featured { background: transparent; color: var(--ink); font-weight: 600; }
  .table td.featured::before { color: var(--accent); font-weight: 600; }
}

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--rule); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 1.1rem 0; font-weight: 600; font-size: 1.0625rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 500; flex: none; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 0 1.25rem; color: var(--ink-2); max-width: var(--measure); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); padding: 3rem 0 2.5rem; font-size: .9375rem; color: var(--ink-2); }
.foot .wrap { display: grid; gap: 1.5rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--ink); }
@media (min-width: 52rem) { .foot .wrap { grid-template-columns: auto 1fr; align-items: start; } .foot nav { justify-content: flex-end; } }

/* ---------- doc pages (security, legal) ---------- */
.doc-layout { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.doc-nav { font-size: .9375rem; }
.doc-nav a { display: block; padding: .5rem 0; color: var(--ink-2); text-decoration: none; border-left: 2px solid transparent; padding-left: .75rem; margin-left: -.75rem; }
.doc-nav a:hover { color: var(--ink); }
.doc-nav a[aria-current="page"] { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }
.doc { max-width: var(--measure); }
.doc h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); margin-bottom: .5rem; }
.doc h2 { font-size: 1.5rem; margin-top: 2.5rem; margin-bottom: .75rem; }
.doc h3 { margin-top: 1.75rem; margin-bottom: .5rem; }
.doc p, .doc ul, .doc ol { margin-top: .75rem; color: var(--ink-2); }
.doc li + li { margin-top: .35rem; }
.doc strong { color: var(--ink); }
.doc table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9375rem; }
.doc th, .doc td { border-bottom: 1px solid var(--rule); padding: .6rem .5rem; text-align: left; vertical-align: top; }
.doc th { font-weight: 600; color: var(--ink); }
.doc .meta { color: var(--ink-3); font-size: .875rem; }
.doc hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
.doc code { font-size: .9em; background: var(--paper-2); padding: .1em .35em; border-radius: .25em; }
@media (min-width: 52rem) { .doc-layout { grid-template-columns: 13rem 1fr; gap: 4rem; } .doc-nav { position: sticky; top: 5.5rem; align-self: start; } }

.sec-list { display: grid; gap: 2rem; margin-top: 2.5rem; }
.sec-item { display: grid; grid-template-columns: 2rem 1fr; gap: 1rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.sec-item svg.i { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.sec-item p { margin-top: .4rem; color: var(--ink-2); }

/* ---------- app shell ---------- */
.app { padding-block: 2rem 4rem; }
.app-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; margin-bottom: 2rem; }
.app-head h1 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); }
.panels { display: grid; gap: 1.25rem; }
.panel { border: 1px solid var(--rule); border-radius: .75rem; background: var(--paper); padding: 1.5rem; }
.panel.tinted { background: var(--paper-2); }
.panel.danger { border-color: color-mix(in srgb, var(--danger) 50%, var(--rule)); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-head h2 { font-size: 1.25rem; }
.panel p.muted { color: var(--ink-2); }
@media (min-width: 62rem) { .panels { grid-template-columns: repeat(2, 1fr); } .panel.wide { grid-column: 1 / -1; } }

.meter { margin-top: 1rem; }
.meter .bar { height: .625rem; border-radius: 999px; background: var(--rule-2); overflow: hidden; }
.meter .bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.meter[data-level="warn"] .bar > i { background: var(--warn); }
.meter[data-level="stop"] .bar > i { background: var(--danger); }
.meter .legend { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.status { display: flex; align-items: center; gap: .75rem; }
.status .led { width: .75rem; height: .75rem; border-radius: 50%; background: var(--ink-3); flex: none; }
[data-state="connected"] .status .led { background: var(--accent); box-shadow: 0 0 0 4px var(--tint); }
[data-state="error"] .status .led { background: var(--danger); }
.status .name { font-weight: 600; }
[data-state] .only-connected, [data-state] .only-disconnected { display: none; }
[data-state="connected"] .only-connected, [data-state]:not([data-state="connected"]) .only-disconnected { display: inline; }

.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: .85rem 0; border-top: 1px solid var(--rule); }
.list li:first-child { border-top: 0; }
.list .grow { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.list .name { font-weight: 600; }
.list .sub { font-size: .875rem; color: var(--ink-2); }
.list .av { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper-2); font-weight: 700; font-size: .8125rem; flex: none; overflow: hidden; }
.empty { padding: 1.5rem; border: 1px dashed var(--rule); border-radius: .5rem; color: var(--ink-2); text-align: center; }
.list:has(li) + .empty { display: none; }

/* dialog */
dialog.modal { border: 1px solid var(--rule); border-radius: .75rem; padding: 0; width: min(100% - 2rem, 34rem); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
dialog.modal::backdrop { background: rgba(10, 12, 12, .5); backdrop-filter: blur(2px); }
.modal form { padding: 1.5rem; }
.modal h2 { font-size: 1.25rem; margin-bottom: 1.25rem; }
.modal .actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.modal .result { display: none; margin-top: 1rem; padding: .7rem .9rem; border-radius: .5rem; font-size: .9375rem; }
.modal .result.ok { display: block; background: var(--tint); color: var(--tint-ink); }
.modal .result.err { display: block; background: var(--danger-tint); color: var(--danger); }
.fields > fieldset { display: none; border: 0; padding: 0; margin: 0; }
.fields > fieldset.on { display: block; }

/* success page */
.center { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: 3rem; }
.center .tick { width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--tint); color: var(--tint-ink); display: grid; place-items: center; margin: 0 auto 1.5rem; }
.center .tick svg { width: 2rem; height: 2rem; }
.center p { margin-top: 1rem; color: var(--ink-2); font-size: 1.125rem; }
.center .cta { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Consent notice uses inline flex layout; hidden must win after either choice. */
#cookie-notice[hidden] { display: none !important; }
#cookie-notice { transition: bottom .2s var(--ease); bottom: var(--sticky-h, 0px); }

/* ---------- sticky "Add to Slack": always in thumb reach once the hero CTA scrolls away ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; justify-content: center; padding: .75rem 1rem calc(.6rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); transform: translateY(100%); transition: transform .25s var(--ease); }
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { width: 100%; max-width: 30rem; box-shadow: var(--shadow); }
@media (min-width: 52rem) {
  /* Desktop nav already carries an "Add to Slack" button; the floating pill is redundant. */
  .sticky-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }