:root {
  --attli-ink: #18211e;
  --attli-muted: #65706b;
  --attli-line: #dfe4e1;
  --attli-paper: #f7f8f6;
  --attli-surface: #ffffff;
  --attli-accent: #315f78;
  --attli-accent-soft: #e8f0f3;
}

.attli-public-shell {
  min-height: 100vh;
  color: var(--attli-ink);
  background: var(--attli-paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.attli-public-shell * { box-sizing: border-box; }
.attli-public-shell a { color: inherit; }

.attli-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--attli-ink);
  text-decoration: none;
}

.attli-brand-symbol {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 9px;
  color: var(--attli-accent);
  background: var(--attli-accent-soft);
}

.attli-brand-symbol svg { width: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.attli-brand-symbol circle { fill: currentColor; stroke: none; }
.attli-wordmark { font-size: 1.2rem; font-weight: 650; letter-spacing: -.055em; }

.attli-public-nav,
.attli-public-footer {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.attli-public-nav {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--attli-line);
}

.attli-public-nav nav,
.attli-public-footer nav { display: flex; align-items: center; gap: 26px; }
.attli-public-nav nav > a,
.attli-public-footer nav > a { color: var(--attli-muted); font-size: .82rem; text-decoration: none; }
.attli-public-nav nav > a:hover,
.attli-public-footer nav > a:hover { color: var(--attli-ink); }
.attli-public-nav .attli-nav-action,
.attli-nav-action { padding: 9px 13px; border: 1px solid var(--attli-line); border-radius: 9px; color: var(--attli-ink); background: var(--attli-surface); text-decoration: none; }

.attli-hero {
  display: grid;
  width: min(1180px, calc(100% - 48px));
  min-height: 650px;
  margin: 0 auto;
  padding: 92px 0 88px;
  grid-template-columns: minmax(0, .95fr) minmax(420px, .82fr);
  gap: 88px;
  align-items: center;
}

.attli-eyebrow,
.attli-section-kicker { margin: 0 0 18px; color: var(--attli-accent); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.attli-hero h1 { max-width: 720px; margin: 0; font-size: clamp(3.2rem, 6vw, 6.25rem); font-weight: 560; letter-spacing: -.07em; line-height: .94; }
.attli-hero-lede { max-width: 590px; margin: 30px 0 0; color: var(--attli-muted); font-size: 1.15rem; line-height: 1.65; }
.attli-hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.attli-primary-action { display: inline-flex; align-items: center; gap: 28px; padding: 13px 16px; border-radius: 9px; color: white !important; background: var(--attli-accent); font-size: .88rem; font-weight: 650; text-decoration: none; }
.attli-primary-action:hover { background: #264e65; }
.attli-text-action { color: var(--attli-accent) !important; font-size: .86rem; font-weight: 620; text-decoration: none; }
.attli-scope-note { margin: 22px 0 0; color: #7a827e; font-size: .76rem; }

.attli-signal-demo { position: relative; padding: 24px; border: 1px solid var(--attli-line); border-radius: 22px; background: rgba(255,255,255,.8); box-shadow: 0 24px 70px rgba(26,39,33,.08); }
.attli-demo-header { display: flex; align-items: center; justify-content: space-between; color: var(--attli-muted); font-size: .73rem; }
.attli-demo-status { display: flex; align-items: center; gap: 7px; }
.attli-demo-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--attli-accent); box-shadow: 0 0 0 4px var(--attli-accent-soft); }
.attli-noise-lines { display: grid; gap: 9px; margin: 35px 4px 25px; opacity: .7; }
.attli-noise-lines span { display: block; height: 7px; border-radius: 4px; background: #e8ebe9; }
.attli-noise-lines span:nth-child(1) { width: 78%; }
.attli-noise-lines span:nth-child(2) { width: 55%; }
.attli-noise-lines span:nth-child(3) { width: 68%; }
.attli-noise-lines span:nth-child(4) { width: 39%; }
.attli-attention-card { padding: 20px; border-left: 3px solid var(--attli-accent); border-radius: 4px 14px 14px 4px; background: white; box-shadow: 0 10px 30px rgba(26,39,33,.07); }
.attli-attention-card > div { display: flex; justify-content: space-between; gap: 12px; }
.attli-attention-label { color: var(--attli-accent); font-size: .7rem; font-weight: 700; }
.attli-attention-card time { color: var(--attli-muted); font-size: .7rem; }
.attli-attention-card h2 { margin: 15px 0 0; font-size: 1.03rem; font-weight: 650; letter-spacing: -.025em; }
.attli-attention-card p { margin: 7px 0 16px; color: var(--attli-muted); font-size: .84rem; line-height: 1.5; }
.attli-attention-card small { color: #7d8681; font-size: .67rem; }
.attli-demo-tally { display: grid; margin-top: 22px; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--attli-line); }
.attli-demo-tally span { padding: 18px 10px 2px; color: var(--attli-muted); font-size: .65rem; text-align: center; }
.attli-demo-tally strong { display: block; margin-bottom: 2px; color: var(--attli-ink); font-size: 1rem; }
.attli-demo-tally .is-signal strong { color: var(--attli-accent); }

.attli-principle,
.attli-watch-section,
.attli-privacy-section,
.attli-final-cta { width: min(1180px, calc(100% - 48px)); margin: 0 auto; border-top: 1px solid var(--attli-line); }
.attli-principle { padding: 104px 0; }
.attli-principle h2,
.attli-watch-section h2,
.attli-privacy-section h2,
.attli-final-cta h2 { max-width: 720px; margin: 0; font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 560; letter-spacing: -.055em; line-height: 1.05; }
.attli-section-intro { max-width: 550px; margin: 20px 0 58px; color: var(--attli-muted); line-height: 1.65; }
.attli-judgments { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr); list-style: none; border-top: 1px solid var(--attli-line); }
.attli-judgments li { display: grid; min-height: 180px; padding: 24px 28px 18px 0; grid-template-columns: 42px 1fr; gap: 8px; border-right: 1px solid var(--attli-line); }
.attli-judgments li + li { padding-left: 28px; }
.attli-judgments li:last-child { border-right: 0; }
.attli-judgments li > span { color: #9aa29e; font-size: .68rem; }
.attli-judgments h3 { margin: 0 0 9px; font-size: 1.02rem; font-weight: 650; }
.attli-judgments p { max-width: 250px; margin: 0; color: var(--attli-muted); font-size: .85rem; line-height: 1.55; }
.attli-judgments .is-interrupt h3 { color: var(--attli-accent); }

.attli-watch-section { display: grid; padding: 104px 0; grid-template-columns: 1fr 1fr; gap: 70px; }
.attli-watch-copy p { margin: 0 0 20px; color: var(--attli-muted); line-height: 1.7; }
.attli-source-line { display: flex; grid-column: 1 / -1; gap: 12px; flex-wrap: wrap; padding-top: 30px; }
.attli-source-line span { padding: 8px 12px; border: 1px solid var(--attli-line); border-radius: 999px; color: #8a928e; font-size: .75rem; }
.attli-source-line .is-live { color: var(--attli-accent); border-color: #c6d7df; background: var(--attli-accent-soft); }
.attli-source-line small { margin-left: 6px; font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }

.attli-privacy-section { display: grid; padding: 104px 0; grid-template-columns: .9fr 1.1fr; gap: 70px; }
.attli-privacy-section ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--attli-line); }
.attli-privacy-section li { padding: 16px 0; border-bottom: 1px solid var(--attli-line); color: var(--attli-muted); font-size: .85rem; }
.attli-privacy-section li strong { color: var(--attli-ink); }
.attli-privacy-section > .attli-text-action { grid-column: 2; }

.attli-final-cta { display: flex; padding: 110px 0; flex-direction: column; align-items: flex-start; }
.attli-final-cta .attli-primary-action { margin-top: 34px; }

.attli-public-footer { display: grid; padding: 34px 0 44px; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; border-top: 1px solid var(--attli-line); }
.attli-public-footer p { margin: 0; color: var(--attli-muted); font-size: .75rem; }
.attli-public-footer nav { justify-self: end; }

.attli-legal-page { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 90px 0 110px; }
.attli-legal-page > h1 { margin: 0; font-size: clamp(2.7rem, 6vw, 4.8rem); font-weight: 560; letter-spacing: -.065em; }
.attli-legal-updated { margin: 14px 0 55px; color: var(--attli-muted); font-size: .78rem; }
.attli-legal-page article { color: var(--attli-muted); font-size: .92rem; line-height: 1.75; }
.attli-legal-page article h2 { margin: 38px 0 8px; color: var(--attli-ink); font-size: 1rem; font-weight: 680; }
.attli-legal-page article p { margin: 0 0 18px; }
.attli-legal-page article a { color: var(--attli-accent); }

.attli-login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; color: var(--attli-ink); background: var(--attli-paper); }
.attli-login-card { width: min(410px, 100%); padding: 34px; border: 1px solid var(--attli-line); border-radius: 18px; background: white; box-shadow: 0 20px 60px rgba(26,39,33,.07); }
.attli-login-card h1 { margin: 44px 0 8px; font-size: 2rem; font-weight: 580; letter-spacing: -.045em; }
.attli-login-card > p { margin: 0 0 28px; color: var(--attli-muted); font-size: .88rem; line-height: 1.55; }
.attli-google-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: 11px; padding: 12px 15px; border: 1px solid var(--attli-line); border-radius: 9px; color: var(--attli-ink); background: white; font: inherit; font-size: .86rem; font-weight: 620; cursor: pointer; }
.attli-google-button:hover { background: #fafbfa; }
.attli-google-button svg { width: 18px; height: 18px; }
.attli-login-note { margin-top: 22px !important; font-size: .7rem !important; }
.attli-login-note a { color: var(--attli-accent); }

@media (max-width: 850px) {
  .attli-hero { min-height: auto; padding: 70px 0; grid-template-columns: 1fr; gap: 58px; }
  .attli-signal-demo { width: min(560px, 100%); }
  .attli-watch-section,
  .attli-privacy-section { grid-template-columns: 1fr; gap: 35px; }
  .attli-privacy-section > .attli-text-action { grid-column: 1; }
  .attli-public-footer { grid-template-columns: 1fr; }
  .attli-public-footer nav { justify-self: start; }
}

@media (max-width: 620px) {
  .attli-public-nav,
  .attli-public-footer,
  .attli-hero,
  .attli-principle,
  .attli-watch-section,
  .attli-privacy-section,
  .attli-final-cta { width: min(100% - 32px, 1180px); }
  .attli-public-nav nav > a:not(.attli-nav-action) { display: none; }
  .attli-hero { padding-top: 58px; }
  .attli-hero h1 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .attli-hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .attli-signal-demo { padding: 16px; }
  .attli-demo-tally span { padding-inline: 2px; }
  .attli-judgments { grid-template-columns: 1fr; }
  .attli-judgments li,
  .attli-judgments li + li { min-height: auto; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--attli-line); }
  .attli-principle,
  .attli-watch-section,
  .attli-privacy-section,
  .attli-final-cta { padding-block: 76px; }
}

@media (prefers-reduced-motion: no-preference) {
  .attli-attention-card { animation: attli-signal-in 600ms 180ms both cubic-bezier(.2,.8,.2,1); }
  .attli-noise-lines { animation: attli-noise-settle 700ms both ease-out; }
}

@keyframes attli-signal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes attli-noise-settle {
  from { opacity: 1; }
  to { opacity: .7; }
}