/* Served by @fastify/static at /ui/styles.css. External rather than an inline
   <style> block: the CSP is `default-src 'self'` with no `unsafe-inline`, so
   inline styles would be blocked (SAD KAN-253 #13). Same for /ui/grain.svg —
   every asset these pages load is same-origin, and no webfonts, so the type
   stack is system faces only.

   These pages ship NO JavaScript and NO motion. Both are deliberate: the page
   exists to be read by Google's OAuth branding review, and every mechanism that
   defers content — scroll reveal, collapsed <details>, `color: transparent`
   gradient text — is a way for a reviewer to see nothing. There is no `.js`
   hook, no transition and no hover transform in this file. Keep it that way. */

:root {
  color-scheme: dark;

  --bg: #07090d;
  --bg-2: #0b0e14;
  --surface: rgba(255, 255, 255, 0.035);
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-2: rgba(255, 255, 255, 0.16);
  --sheen: rgba(255, 255, 255, 0.07);
  --text: #f2f4f8;
  --muted: #98a2b4;
  --faint: #667084;
  --accent: #ffb545;
  --accent-2: #ff8a3d;
  --violet: #7c86ff;
  --glow: rgba(255, 181, 69, 0.3);
  --shadow: 0 24px 70px -24px rgba(0, 0, 0, 0.85);
  --grain-opacity: 0.3;
  --grain-blend: overlay;

  --sans:
    ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI Variable Display', 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --rail: clamp(1.25rem, 5vw, 6rem);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f7f8fa;
    --bg-2: #ffffff;
    --surface: rgba(255, 255, 255, 0.85);
    --hairline: rgba(9, 12, 20, 0.1);
    --hairline-2: rgba(9, 12, 20, 0.18);
    --sheen: rgba(255, 255, 255, 0.9);
    --text: #0b0e14;
    --muted: #515c6e;
    --faint: #7c8798;
    --accent: #b26a00;
    --accent-2: #c2410c;
    --violet: #4f46e5;
    --glow: rgba(178, 106, 0, 0.16);
    --shadow: 0 20px 50px -22px rgba(9, 12, 20, 0.3);
    --grain-opacity: 0.14;
    --grain-blend: multiply;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url('/ui/grain.svg');
}

a {
  color: inherit;
}

.rail {
  padding-inline: var(--rail);
}

.wrap {
  max-width: 78rem;
  margin-inline: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 660;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  padding: 0.75rem 1.25rem;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---------------- nav ---------------- */

.nav-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
}

.nav-shell.bordered {
  border-bottom-color: var(--hairline);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.125rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.0625rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
}

.mark {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 22px var(--glow);
}

.mark::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--bg);
  opacity: 0.85;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.nav-links a {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--text);
}

.nav-cta {
  padding: 0.5rem 0.9375rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-2);
  background: var(--surface);
  color: var(--text);
}

.nav-cta:hover {
  border-color: var(--accent);
}

.nav .back {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}

.nav .back:hover {
  color: var(--text);
}

@media (max-width: 46rem) {
  .nav-links a.optional {
    display: none;
  }
}

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  z-index: -2;
  top: -30vh;
  left: 50%;
  width: min(120rem, 190vw);
  height: 105vh;
  transform: translateX(-50%);
  background:
    radial-gradient(46% 44% at 28% 42%, var(--glow) 0%, transparent 68%),
    radial-gradient(
      40% 40% at 74% 26%,
      color-mix(in srgb, var(--violet) 26%, transparent) 0%,
      transparent 70%
    );
  filter: blur(26px);
}

.hero-inner {
  padding-block: clamp(4.5rem, 15vh, 9rem) clamp(5rem, 16vh, 10rem);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-size: 0.8125rem;
  color: var(--muted);
  box-shadow: inset 0 1px 0 var(--sheen);
}

.dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--glow);
}

/* The <h1> is the product name, deliberately, and the slogan sits beneath it as
   a styled paragraph. Google's OAuth branding review rejected this page three
   times for "does not explain the purpose of your app" and "the app name does
   not match the app name on your home page" while the <h1> was the slogan and
   "Roo" appeared only in the title, the badge and body copy. A reviewer — human
   or automated — reads headings first. Do not promote the slogan back into the
   h1. */
.hero h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-block: 1.5rem 0.5rem;
}

.hero-tagline {
  margin: 0 0 1.75rem;
  max-width: 15ch;
  font-size: clamp(2.5rem, 6.8vw, 5.5rem);
  font-weight: 660;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero-sub {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  color: var(--muted);
  max-width: 38rem;
  margin: 0 0 2.75rem;
  line-height: 1.55;
}

.actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.375rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary {
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: #16100a;
  box-shadow:
    0 10px 34px -10px var(--glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-primary:hover {
  box-shadow: 0 18px 44px -12px var(--glow);
}

.btn-ghost {
  border-color: var(--hairline-2);
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--sheen);
}

.btn-ghost:hover {
  border-color: var(--accent);
}

/* ---------------- sections ---------------- */

.band {
  position: relative;
  padding-block: clamp(4rem, 10vh, 7.5rem);
}

.band + .band {
  border-top: 1px solid var(--hairline);
}

.band-head {
  max-width: 42rem;
}

.band-head h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.04;
  margin-block: 1rem 1.125rem;
}

.band-head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

/* ---------------- cards ---------------- */

.bento,
.trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.card {
  position: relative;
  padding: 1.75rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--sheen);
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
}

.card:hover {
  border-color: var(--hairline-2);
}

.card:hover::before {
  opacity: 0.75;
}

.card h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.625rem;
  letter-spacing: -0.025em;
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

.glyph {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  margin-bottom: 1.25rem;
  background: linear-gradient(
    150deg,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent
  );
  border: 1px solid var(--hairline);
  color: var(--accent);
}

.glyph svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ---------------- plain statement list ---------------- */

/* Used by the "What Roo does with your Google data" band. Deliberately plain
   prose rather than feature cards: an OAuth reviewer is checking that the page
   states the app's purpose and its handling of Google user data, and a grid of
   styled tiles reads as marketing to that audience where sentences read as an
   answer. */
.plain {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  max-width: 46rem;
}

.plain li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--muted);
  font-size: 1rem;
}

.plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
}

.plain strong {
  color: var(--text);
  font-weight: 600;
}

.plain a {
  color: var(--accent);
}

/* ---------------- roadmap ---------------- */

/* Dashed and dimmed on purpose. A Google reviewer reads this page to judge
   whether the app's described function matches the scopes it requests, so
   planned capability has to be unmistakably distinct from shipped capability —
   in the design, not only in the tense of the sentence. */
.card.upcoming {
  border-style: dashed;
  background: none;
  box-shadow: none;
}

.card.upcoming:hover {
  border-color: var(--hairline);
}

.card.upcoming::before {
  content: none;
}

.card.upcoming .tag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.1875rem 0.5rem;
  border: 1px solid var(--hairline-2);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------------- how it works ---------------- */

/* An ordered list because the steps are a real sequence — connect, import, ask —
   not three parallel features dressed up with numbers. */
.steps {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  counter-reset: step;
}

.step-n {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
}

/* ---------------- faq ---------------- */

.faq {
  margin-top: 3rem;
  border-top: 1px solid var(--hairline);
}

/* The marker is drawn rather than a glyph so it can rotate on open. */

/* ---------------- access demo ---------------- */

.demo {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 60rem) {
  .demo {
    grid-template-columns: 0.95fr 1.05fr;
  }
}

.panel {
  padding: 1.75rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow:
    inset 0 1px 0 var(--sheen),
    var(--shadow);
}

.who button[aria-pressed='true'] {
  background: linear-gradient(145deg, var(--accent), var(--accent-2));
  color: #16100a;
  box-shadow: 0 6px 18px -6px var(--glow);
}

.ask {
  font-size: 1.1875rem;
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1.32;
  margin: 0 0 1.375rem;
  padding-bottom: 1.375rem;
  border-bottom: 1px solid var(--hairline);
}

.reply {
  margin: 0;
  font-size: 0.9375rem;
  min-height: 8rem;
  color: var(--text);
}

.meta {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--faint);
}

#chipnote {
  margin-top: 1.25rem;
}

/* Replaces the old persona toggle: both answers render at once, so the point —
   same question, different answer, bounded by access — is visible without a
   click. */
.who-label {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Replaces the collapsed <details> FAQ. Answers are always on screen: content a
   reviewer has to click to reveal is content they will not see. */
.faq-item {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--hairline);
}

.faq-item h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.faq-item p {
  margin: 0;
  max-width: 46rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.faq-item p a {
  color: var(--accent);
}

/* ---------------- sources ---------------- */

.sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 2.5rem;
}

.source {
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--sheen);
  font-size: 0.875rem;
  font-weight: 520;
}

.source.soon {
  color: var(--faint);
  border-style: dashed;
  box-shadow: none;
}

.readonly {
  margin-top: 2rem;
  color: var(--muted);
  max-width: 42rem;
  font-size: 1rem;
}

.readonly strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------------- close ---------------- */

.close {
  position: relative;
  overflow: hidden;
}

.close-inner {
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: radial-gradient(70% 130% at 12% 0%, var(--glow) 0%, transparent 62%), var(--surface);
  box-shadow:
    inset 0 1px 0 var(--sheen),
    var(--shadow);
  padding: clamp(2.5rem, 6vw, 4.5rem);
}

.close h2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  line-height: 1.02;
  max-width: 20ch;
  margin-bottom: 2.25rem;
}

/* ---------------- policy document ---------------- */

.doc {
  max-width: 74rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 8vh, 5rem) 5rem;
}

.doc-head {
  max-width: 44rem;
  margin-bottom: 3.5rem;
}

.doc-head h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  line-height: 1.02;
  margin: 0 0 1rem;
}

.dates {
  margin: 0 0 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.lede {
  margin: 0;
  font-size: 1.125rem;
  color: var(--muted);
}

.cols {
  display: grid;
  gap: 3rem;
}

@media (min-width: 62rem) {
  .cols {
    grid-template-columns: 15rem 1fr;
    gap: 4rem;
    align-items: start;
  }
}

.toc {
  position: sticky;
  top: 6rem;
}

.toc p {
  margin: 0 0 0.875rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  counter-reset: toc;
}

.toc a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8125rem;
}

.toc a::before {
  counter-increment: toc;
  content: counter(toc) '. ';
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.toc a:hover {
  color: var(--text);
}

@media (max-width: 61.99rem) {
  .toc {
    display: none;
  }
}

article {
  max-width: 44rem;
}

article section {
  padding-top: 2.75rem;
}

article section + section {
  border-top: 1px solid var(--hairline);
  margin-top: 2.75rem;
}

article h2 {
  font-size: 1.5rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0 0 1rem;
  scroll-margin-top: 6rem;
}

article h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 1.75rem 0 0.5rem;
}

article p {
  margin: 0 0 1rem;
}

article ul {
  margin: 0 0 1rem;
  padding-left: 1.125rem;
  display: grid;
  gap: 0.5rem;
}

article li::marker {
  color: var(--accent);
}

article a {
  color: var(--accent);
  text-underline-offset: 3px;
}

strong {
  font-weight: 600;
}

.callout {
  border-left: 2px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 0 0 1rem;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1rem;
  border-radius: 14px;
  border: 1px solid var(--hairline);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 40rem;
  font-size: 0.875rem;
  background: var(--surface);
}

th,
td {
  text-align: left;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

th {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------------- footer ---------------- */

footer {
  border-top: 1px solid var(--hairline);
  padding-block: 2.25rem 3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  align-items: center;
}

footer nav {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

footer a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
}

footer a:hover {
  color: var(--text);
}

.colophon {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--faint);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* No motion section. There are no transitions, no animations and no hidden
   initial states in this file, so there is nothing for a
   prefers-reduced-motion block to switch off. */