/* Cuebit alert portal - WARM CONFIDENT direction.
   Simple, sharp human front; the elaborate machine (the live flow + matching)
   shows in the hero's right panel. One bold accent (the signal marigold), warm
   paper ground, type with a spine. Pairs with site.theme_color in alerts.yml
   (--accent) and the JSON-LD/SEO in templates/base.html.

   Tokens carry role names, not value names, so a brand retune is one edit here.
   The previous pastel theme is archived at legacy/design/style.css. */

:root {
  --display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* warm paper + ink */
  --bg: #fbf8f2;
  --paper: #fbf8f2;
  --surface: #ffffff;
  --surface-2: #f3ece0;
  --paper-2: #f3ece0;
  --ink: #1c1714;
  --muted: #4c443c;
  --ink-2: #4c443c;
  --faint: #b9af9e;
  --line: #e8dfd0;
  --line-2: #d9cfbc;

  /* the single bold accent: the signal / cue lights up */
  --accent: #e08a1e;
  --accent-hover: #b96c12;
  --accent-deep: #b96c12;
  --accent-ink: #2a1b07;       /* text on the marigold button */
  --accent-soft: #fbead0;      /* the highlight wash on a match */

  --watch: #5fa98a;            /* the calm "watching" status */
  --danger: #d9534f;
  --danger-soft: #fbeae9;
  --ok: #3e9e78;
  --ok-soft: #e8f4ee;

  --radius: 12px;
  --radius-sm: 8px;
  --nav-height: 70px;
  --shadow: 0 1px 2px rgba(28, 23, 20, 0.05), 0 10px 30px rgba(28, 23, 20, 0.07);
  --shadow-card: 0 1px 2px rgba(28, 23, 20, 0.05), 0 18px 40px rgba(28, 23, 20, 0.10);
  --shadow-lift: 0 2px 4px rgba(28, 23, 20, 0.06), 0 30px 70px rgba(28, 23, 20, 0.16);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display { font-family: var(--display); letter-spacing: -0.4px; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

/* The brand cue + key-line highlight: a warm marigold "highlighter" swipe, the
   same accent wash used on a match. It wraps the brand name in prose and the lead
   thesis line on /how-it-works. Rendered HTML-only (via the brandmark filter and
   the template), so the agent text surfaces stay plain prose. */
mark.cue {
  background-color: var(--accent-soft);
  color: inherit;
  border-radius: 4px;
  padding: 0.04em 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* --- Header / footer ----------------------------------------------------- */
.site-header {
  height: var(--nav-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: rgba(251, 248, 242, 0.8); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none; position: relative;
  background: var(--ink); display: grid; place-items: center;
}
.brand-mark::before { /* the "bit": a single lit cue */
  content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(224, 138, 30, 0.22);
}
.brand-text { display: inline-flex; flex-direction: column; line-height: 1.08; }
.brand-text b { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.4px; }
.brand-tagline { color: var(--muted); font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-header nav { display: flex; align-items: center; gap: 18px; }
.inline { display: inline; margin: 0; }
.nav-link { color: var(--muted); font-weight: 500; }
.nav-link:hover { color: var(--ink); text-decoration: none; }
.as-button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1rem; padding: 0; font-family: inherit; font-weight: 500; }
.as-button:hover { color: var(--ink); }

.site-main { max-width: 1120px; margin: 0 auto; padding: 0 28px 80px; }

.site-footer {
  border-top: 1px solid var(--line); color: var(--muted); font-size: 13px;
  max-width: 1120px; margin: 0 auto; padding: 22px 28px 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent-deep); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-spacer { flex: 1 1 auto; }
.footer-disclaimer { flex: 1 1 100%; margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); opacity: 0.85; }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent; border-radius: 10px;
  padding: 11px 18px; font-weight: 600; font-size: 15px; cursor: pointer;
  text-decoration: none; font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px rgba(224, 138, 30, 0.28); }
.btn-primary:hover { background: #ee9626; }
.btn-primary:disabled { background: #d9cfbc; color: #fff; cursor: not-allowed; box-shadow: none; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #2c2520; }
.btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: 11px; }

/* --- Hero (split: simple human front | the live machine) ----------------- */
.hero { padding: 74px 0 56px; }
.hero-grid { display: grid; grid-template-columns: 1.04fr 1fr; gap: 56px; align-items: center; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 22px;
}
.hero-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: relative; }
.hero-kicker .dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent); opacity: .5; animation: ping 2.4s ease-out infinite; }
.hero h1 {
  font-family: var(--display); font-weight: 600; font-size: 57px; line-height: 1.04;
  letter-spacing: -1.8px; margin: 0 0 20px; color: var(--ink);
}
.hero h1 .lit { color: var(--accent-deep); position: relative; white-space: nowrap; }
.hero h1 .lit::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: .05em; height: .30em; z-index: -1;
  background: var(--accent-soft); border-radius: 3px;
}
.lede { font-size: 19px; line-height: 1.6; color: var(--muted); margin: 0 0 30px; max-width: 30em; }

/* Calm value band between the hero and the edge cards: control of your flow of
   information (focused, disciplined, calm). */
.control { max-width: 760px; margin: 0 auto; padding: 64px 24px 36px; text-align: center; }
.control-line { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.6px; color: var(--ink); margin: 0 0 14px; }
.control-sub { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 640px) { .control { padding-top: 44px; } .control-line { font-size: 25px; } }
.cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* the flow panel: signal from noise */
.flow {
  position: relative; min-height: 540px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, var(--paper) 62%);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
  display: grid; place-items: center; padding: 46px 24px 40px;
}
.flow-label {
  position: absolute; top: 16px; left: 18px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint);
}
.flow-label .live { width: 7px; height: 7px; border-radius: 50%; background: var(--watch); animation: live 2s ease-out infinite; }

.stream { position: absolute; inset: 0; z-index: 1; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.stream-track { position: absolute; left: 0; right: 0; top: 0; padding: 18px 22px; animation: streamUp 38s linear infinite; }
.stream-row { display: flex; gap: 12px; align-items: baseline; padding: 7px 0; color: var(--faint); font-size: 12.5px; opacity: .5; }
.stream-row .t { color: var(--faint); flex: none; opacity: .8; }
.stream::after { content: ""; position: absolute; inset: 0; background: radial-gradient(64% 54% at 50% 52%, rgba(251, 248, 242, .9) 0%, rgba(251, 248, 242, .35) 70%, transparent 100%); }

/* the alert cards: plain-English prompts you create. One shows at a time and
   they cycle (script in landing.html), so the panel feels alive without crowding. */
.alerts-cycle { position: relative; z-index: 2; width: 100%; max-width: 404px; min-height: 200px; }
.acard {
  position: absolute; left: 0; right: 0; top: 50%;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 15px 17px;
  opacity: 0; transform: translate3d(0, calc(-50% + 16px), 0) scale(.985);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.acard.show { opacity: 1; transform: translate3d(0, -50%, 0) scale(1); pointer-events: auto; }
.acard.matched-card { border-left: 3px solid var(--accent); box-shadow: var(--shadow-lift); }
.acard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 9px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.status .sq { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.status.matched { color: var(--accent-deep); }
.status.watch { color: var(--muted); }
.status.watch .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--watch); }
.when { font-size: 11px; color: var(--faint); }
.prompt { font-family: var(--display); font-weight: 500; font-size: 17.5px; line-height: 1.32; letter-spacing: -0.2px; color: var(--ink); margin: 0 0 12px; }
.acard .chips { margin-top: 0; }
.acard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 13px; padding-top: 11px; }
.src { font-size: 12px; color: var(--faint); }
.read { font-size: 13px; font-weight: 600; color: var(--accent-deep); }

.dots { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 7px; }
.dot-btn { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: var(--line-2); cursor: pointer; transition: background .2s ease, width .2s ease; }
.dot-btn:hover { background: var(--faint); }
.dot-btn.active { background: var(--accent); width: 18px; }

/* --- "How it works" band: the PROCESS (say it -> understand -> the cue) -----
   Deliberately set apart from the open "Your edge" value pillars above: a
   contained, tinted panel whose steps are joined by flow arrows, so VALUE
   (what you get) and PROCESS (how it reaches you) read as two different things,
   graphically as well as in words. */
.steps {
  margin-top: 30px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 28px 34px 32px;
}
.steps-title {
  font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-deep); margin: 0 0 22px;
}
.steps-sub { color: var(--faint); letter-spacing: 0.08em; margin-left: 8px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: start; }
.step { padding: 2px 30px; position: relative; }
.step:first-child { padding-left: 0; }
.step:last-child { padding-right: 0; }
/* the marigold flow arrow between steps signals the sequence (1 -> 2 -> 3) */
.step + .step::before {
  content: "\2192"; position: absolute; left: -8px; top: 0;
  color: var(--accent); font-size: 17px; line-height: 1.2; font-weight: 700;
}
.step .n { font-size: 12px; color: var(--accent-deep); letter-spacing: 0.1em; }
.step h4 { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.4px; margin: 12px 0 8px; color: var(--ink); }
.step p { margin: 0; color: var(--muted); font-size: 15px; }
.step .ex { color: var(--ink); }

/* --- "Your edge" band: the investor/prediction-market value, three pillars --
   Three crisp cards (not the open columns it was): each led by an icon tile that
   lights up marigold on hover (the brand's "cue lights up" motif), a sharp title
   and one line. Still distinct from the single tinted "How it works" panel below,
   so VALUE (what you get) and PROCESS (how it reaches you) read as two things. */
.edge { border-top: 1px solid var(--line); margin-top: 0; padding: 36px 0 8px; }
.edge-head { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.edge-headline { font-family: var(--display); font-weight: 600; font-size: 30px; letter-spacing: -0.6px; color: var(--ink); margin: 0 0 10px; }
.edge-sub { font-size: 17px; line-height: 1.5; color: var(--muted); margin: 0; }
.edge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.edge-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 24px; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.edge-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-card); }
.edge-ic {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 12px; margin: 0 0 16px;
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid #ead9bc;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.edge-card:hover .edge-ic { background: var(--accent); color: var(--accent-ink); transform: scale(1.05); }
.edge-ic svg { width: 24px; height: 24px; display: block; }
.edge-card h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.4px; margin: 0 0 8px; color: var(--ink); }
.edge-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* --- Cards / forms ------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; max-width: 460px; margin: 48px auto; box-shadow: var(--shadow);
}
.auth-card h1, .message-card h1 { margin-top: 0; color: var(--ink); }
/* Center the submit button under the form (the get-started / sign-in card). */
.auth-card .stack .btn { align-self: center; }
.muted { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
input, select, textarea {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; padding: 10px 12px; font-size: 15px; font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); background: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.switch { margin-top: 6px; text-align: center; }
.cf-turnstile { display: flex; justify-content: center; }

/* --- Content pages (how-it-works / privacy) ------------------------------ */
.content { max-width: 720px; margin: 0 auto; padding-top: 40px; }
.content > h1 { font-size: 38px; letter-spacing: -1px; margin: 8px 0 14px; }
.content .lead { font-size: 19px; color: var(--muted); margin: 0 0 28px; }
.content section { margin: 0 0 22px; }
.content h2 { font-size: 20px; margin: 30px 0 8px; color: var(--ink); }
.content p { margin: 0 0 10px; color: #3a322b; }
.content h3 { font-size: 16px; margin: 20px 0 4px; color: var(--ink); }
.content .back { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 600; }

/* --- FAQ (a Q&A accordion, visually set apart from the prose sections) ---- */
.content .faq { margin-top: 44px; padding-top: 4px; border-top: 1px solid var(--line); }
.content .faq-title { font-size: 24px; letter-spacing: -0.5px; margin: 26px 0 16px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.faq-item:hover { border-color: var(--accent); }
.faq-item summary {
  list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 15px 20px; font-weight: 600; font-size: 16px; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; font-size: 22px; line-height: 1; font-weight: 400;
  color: var(--accent-deep); transition: transform .18s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent-deep); }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.content .faq-answer { padding: 14px 20px 18px; }
.content .faq-answer p { margin: 0; color: var(--muted); }

/* --- Account dashboard --------------------------------------------------- */
.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 40px; }
.account-head h1 { margin: 0 0 4px; }
.account-actions { display: flex; align-items: center; gap: 12px; }
.badge {
  display: inline-block; background: var(--accent-soft); border: 1px solid #ead9bc;
  border-radius: 999px; padding: 1px 10px; font-size: 12px; color: var(--accent-deep); text-transform: uppercase;
}

/* The system On/Off signal (top-right of the account head): green and live when
   Cuebit is working for you, calm and muted when it is off. Reuses the @keyframes
   live pulse from the hero's flow label. */
.system-status { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; text-align: right; }
.ss-pill {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px 8px 13px;
  background: var(--surface); color: var(--muted);
  font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.3px; line-height: 1;
}
.ss-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--faint); flex: none; }
.ss-note { font-size: 12.5px; color: var(--muted); max-width: 24em; }
.system-status.is-on .ss-pill { background: var(--ok-soft); border-color: #bfe6d2; color: #16623f; }
.system-status.is-on .ss-dot { background: var(--ok); animation: live 2s ease-out infinite; }

.flash { margin: 18px 0; padding: 12px 14px; border-radius: 9px; background: var(--ok-soft); border: 1px solid #bfe6d2; color: #16623f; }
.flash.error { background: var(--danger-soft); border-color: #f3c6c4; color: #9a2f2b; }

.alerts-list { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.alert-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.alert-card.disabled { opacity: 0.62; }
.alert-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alert-name { font-weight: 700; font-size: 16px; margin: 0; color: var(--ink); }
.alert-mode { font-size: 11px; color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.5px; }
.alert-desc { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; font-size: 11.5px; color: var(--muted); }
.chip.reg { color: var(--ink); background: var(--surface); border-color: var(--line-2); letter-spacing: 0.04em; }
.alert-buttons { display: flex; gap: 8px; }
.icon-btn { background: var(--surface); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 5px 10px; font-size: 13px; cursor: pointer; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent-deep); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* --- Cue sensitivity knob (top of the Cues tab) ------------------------- */
.sensitivity-slot { margin: 2px 0 18px; }
.sensitivity { padding: 16px 18px; }
.sens-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sens-title { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.sens-current { font-weight: 700; font-size: 13.5px; color: var(--accent-deep); }
.sens-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 16px 0 9px; border-radius: 999px; background: linear-gradient(90deg, var(--surface-2), var(--accent-soft)); border: 1px solid var(--line-2); cursor: pointer; }
.sens-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sens-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(28, 23, 20, 0.28); cursor: grab; }
.sens-range::-webkit-slider-thumb:active { cursor: grabbing; }
.sens-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 2px 8px rgba(28, 23, 20, 0.28); cursor: grab; }
.sens-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.sens-desc { margin: 11px 0 0; font-size: 13.5px; }
.sens-help { margin: 5px 0 0; font-size: 12px; opacity: 0.85; }

/* --- Dialog -------------------------------------------------------------- */
.dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; max-width: 560px; width: 92%; box-shadow: 0 20px 60px rgba(28, 23, 20, 0.18); }
.dialog::backdrop { background: rgba(28, 23, 20, 0.35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.dialog h2 { margin-top: 0; }
.filters { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.filters legend { color: var(--muted); font-size: 13px; padding: 0 6px; }
.form-hint { font-size: 13px; margin: -6px 0 2px; line-height: 1.45; }
.checks { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.chk { flex-direction: row !important; align-items: center; gap: 6px !important; color: var(--ink) !important; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.spacer { flex: 1; }
.form-error { color: var(--danger); font-size: 14px; margin: 0; }
[data-when] { display: flex; }
[data-when].hidden { display: none; }

/* --- Cue strength meter (New Cue dialog) -------------------------------- */
/* A filling bar (instant heuristic, settled by the AI read) that helps a user
   write a sharper Cue. The fill grows and shifts hue from a deep red (Vague)
   through the brand marigold (Clear) to green (Sharp); the label to its right
   carries the same hue, and the meaning reads three ways at once (the word, the
   fill length, the hue) so it works without relying on colour alone. */
.cue-meter { margin: -2px 0 2px; display: flex; flex-direction: column; gap: 7px; }
.cue-meter-row { display: flex; align-items: center; gap: 12px; }
.cue-meter-track {
  flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line-2); overflow: hidden;
}
.cue-meter-fill {
  height: 100%; width: 0; border-radius: 999px; background: var(--line-2);
  transition: width .35s cubic-bezier(.2, .7, .2, 1), background-color .35s ease;
}
.cue-meter-label {
  flex: none; min-width: 3.4em; text-align: right;
  font-family: var(--display); font-weight: 600; font-size: 13.5px; letter-spacing: -0.2px;
  color: var(--faint);
}
.cue-meter-tip { margin: 0; font-size: 13px; line-height: 1.45; min-height: 1.1em; }
.cue-meter-chips { margin-top: 2px; }
.cue-meter[data-level="weak"] .cue-meter-fill { background: #c0392b; }
.cue-meter[data-level="weak"] .cue-meter-label { color: #c0392b; }
.cue-meter[data-level="decent"] .cue-meter-fill { background: var(--accent); }
.cue-meter[data-level="decent"] .cue-meter-label { color: var(--accent-deep); }
.cue-meter[data-level="strong"] .cue-meter-fill { background: var(--ok); }
.cue-meter[data-level="strong"] .cue-meter-label { color: #1f7a52; }
/* While the AI read is in flight, the bar breathes gently. */
.cue-meter.pending .cue-meter-fill { animation: cuePulse 1.1s ease-in-out infinite; }
@keyframes cuePulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .cue-meter-fill { transition: none; }
  .cue-meter.pending .cue-meter-fill { animation: none; }
}

/* --- Account tabs + panels ---------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 22px 0 0; flex-wrap: wrap; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--muted);
  padding: 10px 14px; margin-bottom: -1px;
}
.tab:hover { color: var(--accent-deep); }
.tab.active { color: var(--accent-deep); border-bottom-color: var(--accent); }
.tab-panel { padding-top: 20px; }
.tab-panel[hidden] { display: none; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.panel-head h2 { margin: 0 0 4px; font-size: 20px; }
.panel-head p { margin: 0; }

/* --- Activity feed ------------------------------------------------------- */
.activity-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.activity-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; align-items: stretch; gap: 16px; }
/* Left rail: which Cue caught this (mirrors the alert email's "Your Cue" label). */
.activity-cue { flex: 0 0 10rem; display: flex; flex-direction: column; gap: 2px; padding-right: 15px; border-right: 1px solid var(--line); }
.activity-cue-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.activity-cue-name { font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--accent-deep); }
.activity-body { flex: 1 1 auto; min-width: 0; }
.activity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.activity-title { margin: 0; font-weight: 650; font-size: 15px; }
.activity-title a { color: var(--ink); }
.activity-title a:hover { color: var(--accent-deep); }
.activity-meta { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* --- pills --------------------------------------------------------------- */
.pill { flex: none; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; text-transform: capitalize; }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-wait { background: var(--accent-soft); color: var(--accent-deep); }
.pill-bad { background: var(--danger-soft); color: var(--danger); }

/* --- Subscription / plans ------------------------------------------------ */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.plan-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan-name { font-family: var(--display); font-weight: 600; font-size: 18px; }
.plan-price { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--accent-deep); }
.plan-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }
.plan-feats li::before { content: "\2713  "; color: var(--ok); font-weight: 700; }
.plan-tag { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--ok); }
/* Hug the label (content + padding), not the full card width. */
.plan-card .btn { margin-top: auto; align-self: flex-start; }
.sub-status { margin-top: 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sub-status p { margin: 0; }
.sub-warn { color: var(--danger); font-weight: 600; }
.upgrade-note { margin-top: 16px; }
.pay-history { margin-top: 24px; }
.pay-history h3 { font-size: 15px; margin: 0 0 8px; }
.pay-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.pay-row span:first-child { flex: 1; }

/* --- Tranzila iframe modal ----------------------------------------------- */
.pay-modal { position: fixed; inset: 0; background: rgba(28, 23, 20, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.pay-modal[hidden] { display: none; }
.pay-box { background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(28, 23, 20, 0.28); overflow: hidden; }
.pay-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 700; }
#tz-frame { width: 100%; height: 560px; border: 0; display: block; background: #fff; }

/* --- Settings ------------------------------------------------------------ */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.setting-label { font-weight: 650; color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { background: #c44440; }
.danger-zone { margin-top: 26px; border: 1px solid var(--danger-soft); background: #fff8f6; border-radius: var(--radius); padding: 18px 20px; }
.danger-zone .setting-label { color: var(--danger); }
.danger-zone p { margin: 6px 0 14px; }

/* --- toggle switch ------------------------------------------------------- */
.switch-toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-toggle .slider { position: absolute; inset: 0; background: #d9cfbc; border-radius: 999px; transition: background .15s ease; cursor: pointer; }
.switch-toggle .slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.switch-toggle input:checked + .slider { background: var(--accent); }
.switch-toggle input:checked + .slider::before { transform: translateX(20px); }

/* --- Ask an AI chooser (agent handoff, per agent_discoverability_principles 10) --- */
.ask-ai { margin: 44px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ask-ai-label { color: var(--muted); font-size: 14px; }
.ai-chooser { position: relative; display: inline-block; }
.ai-chooser > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 600;
}
.ai-chooser > summary::-webkit-details-marker { display: none; }
.ai-chooser > summary::after { content: "\25BE"; color: var(--muted); font-size: 12px; }
.ai-chooser[open] > summary { border-color: var(--accent); color: var(--accent-deep); }
.ai-menu {
  position: absolute; left: 50%; transform: translateX(-50%); margin-top: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: 6px; z-index: 20;
  /* Size to the widest item + the menu padding, never a fixed width. */
  width: max-content;
  display: flex; flex-direction: column;
}
.ai-menu a { display: block; padding: 9px 12px; border-radius: 7px; color: var(--ink); text-align: left; font-size: 14px; }
.ai-menu a:hover { background: var(--accent-soft); color: var(--accent-deep); text-decoration: none; }

/* --- Motion -------------------------------------------------------------- */
@keyframes streamUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes ping { 0% { transform: scale(.7); opacity: .6; } 80%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(95, 169, 138, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(95, 169, 138, 0); } }
@media (prefers-reduced-motion: reduce) {
  .stream-track, .hero-kicker .dot::after, .flow-label .live, .system-status.is-on .ss-dot { animation: none !important; }
  .stream-track { transform: translateY(-8%); }
  .acard { transition: opacity .25s ease; transform: translate3d(0, -50%, 0) scale(1); }
  .edge-card:hover { transform: none; }
  .edge-card:hover .edge-ic { transform: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 44px; letter-spacing: -1.2px; }
  .flow { min-height: 0; }
  .steps-grid { grid-template-columns: 1fr; gap: 28px; }
  .edge-grid { grid-template-columns: 1fr; gap: 16px; }
  .edge-headline { font-size: 26px; }
  .step { border-left: 0; padding: 0; border-top: 1px solid var(--line-2); padding-top: 22px; }
  .step:first-child { border-top: 0; padding-top: 0; }
  .steps { padding: 24px 22px 26px; }
  /* stacked: the 01/02/03 labels carry the sequence, so drop the inline arrow */
  .step + .step::before { display: none; }
}
@media (max-width: 560px) {
  .hero { padding: 48px 0 40px; }
  .hero h1 { font-size: 37px; }
  .content > h1 { font-size: 29px; }
  .grid-2 { grid-template-columns: 1fr; }
  /* Stack the Cue rail above the story instead of beside it. */
  .activity-item { flex-direction: column; gap: 10px; }
  .activity-cue { flex-basis: auto; flex-direction: row; align-items: baseline; gap: 8px; padding-right: 0; padding-bottom: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
}