/* ==========================================================================
   Deeta website — design system.

   Design tokens are the single source of truth, shared with
   docs/style-guide.html (DEE-711). @import MUST stay at the top of the file.

   ── What this file replaced ─────────────────────────────────────────────────
   The previous stylesheet centred `body` with flexbox and capped every page at
   `max-width: 600px`, so all 12 marketing pages rendered as one phone-width
   column at every viewport — the reason the site read as a mobile layout
   stretched onto a desktop. This is a full-width, grid-based system: fluid
   display type, banded sections, real desktop layouts, light + dark parity.

   Structure below:
     1  Fonts
     2  Reset + base
     3  Layout primitives (shell / band / grid)
     4  Typography
     5  Navigation
     6  Buttons + forms
     7  Hero
     8  Relationship-graph diagram (the signature visual)
     9  Content blocks (features, bento, steps, cards, claim, segments, FAQ)
    10  CTA band
    11  Footer
    12  Utility-page layouts (waitlist / TestFlight / feedback / auth / harvard)
    13  State gates (harvard campus-launch, auth callback)
    14  Motion + reveal
    15  Utilities
   ========================================================================== */

@import url('tokens.css');

/* ==========================================================================
   1  FONTS — self-hosted under `font-src 'self'` (see _headers CSP).
   Variable woff2, latin subset. `font-display: swap` so a slow font never
   blocks first paint (PRD-073 §9 LCP target).
   ========================================================================== */

@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono-var-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2  RESET + BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px; /* prevents iOS Safari auto-zoom on input focus */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchored FAQ / legal headings clear the sticky nav. */
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky nav + banded sections replace the old flex centring. */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img, svg, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Body links in the adaptive brand purple (DEE-801): accent TEXT on the page
   background, so it must use --color-accent-adaptive, not --color-accent. */
a {
  color: var(--color-accent-adaptive);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Accessibility — never remove an outline without a replacement. */
:focus-visible {
  outline: 2px solid var(--color-accent-adaptive);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   3  LAYOUT PRIMITIVES
   ========================================================================== */

/* Horizontal container. Every band's content sits in one of these, so the
   measure is consistent from nav to footer. */
.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: 900px; }

/* A full-bleed horizontal section. `--band-pt/pb` let a page tighten the
   rhythm between two related sections without a bespoke class. */
.band {
  padding-block: var(--band-pt, var(--space-section)) var(--band-pb, var(--space-section));
  position: relative;
}

.band--sunken { background: var(--color-bg-sunken); }

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

.band--tight { --band-pt: clamp(2.5rem, 5vw, 4rem); --band-pb: clamp(2.5rem, 5vw, 4rem); }

main { flex: 1 0 auto; }

/* Section header: mono eyebrow → h2 → optional lede. */
.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head > * + * { margin-top: var(--space-16); }

/* ==========================================================================
   4  TYPOGRAPHY
   ========================================================================== */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent-adaptive);
  display: flex;
  align-items: center;
  gap: 0.6em;
}

.section-head--center .eyebrow { justify-content: center; }

/* The amber dot from the Deeta mark, reused as the "live" tick on eyebrows. */
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-warm);
  flex: none;
}

.display {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -0.012em; }

.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: var(--lede-max);
  text-wrap: pretty;
}

.section-head--center .lede { margin-inline: auto; }

/* Legacy alias — `.subtitle` is the class the pre-rebuild pages used, and the
   utility pages (auth, harvard, testflight) still carry it. */
.subtitle {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: var(--lede-max);
}

.prose { max-width: var(--prose-max); }
.prose > * + * { margin-top: var(--space-16); }
.prose strong { font-weight: 600; color: var(--color-text); }

/* Inline accent: the one word in a headline that carries the point. */
.hl {
  color: var(--color-accent-adaptive);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5  NAVIGATION
   ========================================================================== */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

/* scripts/site.js adds .is-stuck once the page has scrolled, so the hairline
   only appears when there is content behind the bar. */
.site-nav.is-stuck {
  border-bottom-color: var(--color-hairline);
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  min-height: 4.25rem;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  border-radius: var(--radius-sm);
}

.nav-brand img {
  width: 104px;
  height: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  list-style: none;
}

.nav-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-small);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}

.nav-links a:hover,
.nav-links a[aria-current='page'] { color: var(--color-text); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex: none;
}

/* Theme toggle — two glyphs, one visible per mode. Hidden until
   scripts/site.js confirms JS, since without JS it cannot do anything. */
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

html.js .theme-toggle { display: inline-flex; }

.theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-hairline-strong);
}

.theme-toggle svg { width: 1.0625rem; height: 1.0625rem; }
.theme-toggle .icon-dark { display: none; }
html[data-theme='dark'] .theme-toggle .icon-dark { display: block; }
html[data-theme='dark'] .theme-toggle .icon-light { display: none; }

/* Mobile disclosure. `.nav-panel` is the same list, stacked. */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-actions .btn { display: none; }

  .nav-panel {
    display: none;
    border-top: 1px solid var(--color-hairline);
    padding-block: var(--space-16) var(--space-24);
  }
  .nav-panel.is-open { display: block; }
  .nav-panel ul { list-style: none; display: grid; gap: var(--space-4); }
  .nav-panel a {
    display: block;
    padding: var(--space-12) 0;
    color: var(--color-text);
    text-decoration: none;
    font-size: 1.0625rem;
    font-weight: 500;
    border-bottom: 1px solid var(--color-hairline);
  }
  .nav-panel .btn { margin-top: var(--space-16); width: 100%; }
}

@media (min-width: 861px) {
  .nav-panel { display: none !important; }
}

/* ==========================================================================
   6  BUTTONS + FORMS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8rem 1.35rem;
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 1px 2px rgba(20, 20, 28, 0.16), 0 8px 22px -8px var(--color-accent);
}

.btn--primary:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 1px 2px rgba(20, 20, 28, 0.2), 0 12px 30px -8px var(--color-accent);
}

.btn--ghost {
  background: transparent;
  border-color: var(--color-hairline-strong);
  color: var(--color-text);
}

.btn--ghost:hover {
  border-color: var(--color-text-tertiary);
  background: var(--color-surface-2);
}

.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }

.btn svg { width: 1em; height: 1em; flex: none; }

/* `.cta-button` is the pre-rebuild primary-CTA class, still used by
   /testflight and the /harvard launch-active state. Mapped onto .btn--primary
   so those pages inherit the new system without markup churn. */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 1rem 1.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-btn);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 20, 28, 0.16), 0 8px 22px -8px var(--color-accent);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.cta-button:hover { background: var(--color-accent-hover); }

/* One or more buttons on a row, wrapping on narrow viewports. */
.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
}

.hero--center .action-row,
.cta-band .action-row { justify-content: center; }

/* ---- Email capture ------------------------------------------------------ */

.capture-block { width: 100%; }

.hero--center .capture-block,
.cta-band .capture-block { display: flex; flex-direction: column; align-items: center; }

.capture-form { width: 100%; max-width: 30rem; }

.section-head--center .capture-form,
.hero--center .capture-form { margin-inline: auto; }

.form-row {
  display: flex;
  gap: var(--space-8);
  align-items: stretch;
}

.form-row input[type='email'],
.form-row input[type='text'] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.9rem 1.05rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-btn);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.form-row input::placeholder { color: var(--color-text-tertiary); }

.form-row input[type='email']:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-surface);
}

.form-row button[type='submit'] {
  flex: none;
  padding: 0.9rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.form-row button[type='submit']:hover { background: var(--color-accent-hover); }

.form-row button[type='submit']:disabled { opacity: 0.6; cursor: not-allowed; }

/* Narrow phones: stack the field above the button. Side by side, a 375px
   viewport leaves the email input around 150px wide — too narrow to see what
   you typed, and the button label starts truncating. */
@media (max-width: 560px) {
  .form-row { flex-direction: column; }
  .form-row button[type='submit'] { width: 100%; }
}

/* Proof / reassurance line directly under a capture form. */
.form-note {
  margin-top: var(--space-12);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

.form-note strong { color: var(--color-text-secondary); font-weight: 500; }

/* Honeypot — must be invisible to humans, reachable by bots. */
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Messages ---------------------------------------------------------- */

.message {
  max-width: 30rem;
  margin-top: var(--space-16);
  padding: var(--space-16);
  font-size: 1rem;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  animation: fadeIn var(--dur-base) var(--ease-out);
}

.hero--center .message,
.section-head--center .message { margin-inline: auto; }

.message:not(.message-error) {
  color: var(--color-success);
  border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
}

.message-error {
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
}

.retry-btn {
  display: inline-block;
  margin-top: var(--space-8);
  padding: 0.45rem 0.9rem;
  font-family: inherit;
  font-size: var(--text-small);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.subscriber-count {
  margin-top: var(--space-16);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ---- Feedback form (DEE-708) — stacked body + optional email ------------ */

.feedback-form { width: 100%; max-width: 34rem; text-align: left; }

.feedback-form .field { margin-bottom: var(--space-16); }

.feedback-form label {
  display: block;
  margin-bottom: var(--space-8);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text);
}

.feedback-form .field-optional {
  font-weight: 400;
  color: var(--color-text-tertiary);
}

.feedback-form textarea,
.feedback-form input[type='email'] {
  width: 100%;
  padding: 0.9rem 1.05rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.feedback-form textarea {
  min-height: 10rem;
  resize: vertical;
  line-height: var(--leading-body);
}

.feedback-form textarea:focus,
.feedback-form input[type='email']:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-surface);
}

.feedback-form button[type='submit'] {
  width: 100%;
  padding: 0.95rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.feedback-form button[type='submit']:hover { background: var(--color-accent-hover); }
.feedback-form button[type='submit']:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   7  HERO
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

/* Ambient accent glow. Two stops (purple + amber) so the canvas carries both
   halves of the brand rather than reading as a generic purple SaaS gradient. */
.hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 46rem;
  z-index: -2;
  background:
    radial-gradient(46% 42% at 22% 34%, var(--glow-accent) 0%, transparent 68%),
    radial-gradient(34% 34% at 82% 18%, var(--glow-warm) 0%, transparent 70%);
  pointer-events: none;
}

/* Engineering grid, faded out at the edges — the "infrastructure" register. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* Two-column hero: copy left, visual right. Collapses under 1000px. */
.hero-layout {
  display: grid;
  /* Copy column takes the larger share: the headline is the LCP element and the
     diagram reads fine at the smaller size, so the type gets the room. */
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-copy > * + * { margin-top: var(--space-24); }
.hero-copy .eyebrow + .display { margin-top: var(--space-16); }
.hero-copy .display + .lede { margin-top: var(--space-24); }

@media (max-width: 1000px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { order: 2; }
}

/* Centred variant — utility pages (auth callbacks, feedback, android). */
.hero--center { text-align: center; }
.hero--center .hero-copy { max-width: 46rem; margin-inline: auto; }
.hero--center .lede,
.hero--center .subtitle { margin-inline: auto; }

/* Trust strip under the hero form: short, factual, mono-labelled. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-24);
  margin-top: var(--space-32);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-hairline);
  list-style: none;
}

.hero--center .hero-trust { justify-content: center; }

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.hero-trust svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--color-accent-adaptive);
  flex: none;
}

/* Optional partner logo (Harvard page). */
.partner-logo {
  width: 150px;
  height: auto;
  margin-bottom: var(--space-16);
  opacity: 0.75;
}

.hero--center .partner-logo { margin-inline: auto; }

/* ==========================================================================
   8  RELATIONSHIP-GRAPH DIAGRAM — the signature hero visual.

   Abstract on purpose: it shows the mechanism (a self-maintaining record that
   propagates to a subscriber, and an agent reading through a relay it cannot
   decrypt) without a UI screenshot. Inline SVG + CSS animation only — no image
   request, no JS, and it scales to any viewport.
   ========================================================================== */

.graph-frame {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-2xl);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-surface) 90%, transparent),
      color-mix(in srgb, var(--color-bg) 88%, transparent));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.graph-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.graph-frame > * { position: relative; }

.graph-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.graph svg { width: 100%; height: auto; }

/* Node plates */
.graph .node-plate {
  fill: var(--color-surface);
  stroke: var(--color-hairline-strong);
}

.graph .node-plate--accent {
  fill: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface));
  stroke: var(--color-accent-border);
}

.graph .node-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--color-text-secondary);
}

.graph .node-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  fill: var(--color-text);
}

/* Attribute rows inside a record plate. `--live` is the amber "this just
   changed" bar. Font has to come from CSS, not an SVG presentation attribute:
   presentation attributes do not resolve var(). */
.graph .attr-row { fill: var(--color-text-tertiary); }

.graph .attr-row--live { fill: var(--color-warm); }

.graph .attr-key {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--color-accent-adaptive);
}

/* Edges. The live edge flows (amber, the same signal as the mark's dot); the
   agent edge is dashed and static — it reads, it does not push. */
.graph .edge {
  fill: none;
  stroke: var(--color-hairline-strong);
  stroke-width: 1.5;
}

.graph .edge--live {
  stroke: var(--color-warm);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  animation: edgeFlow 1.4s linear infinite;
}

/* The return leg. Same treatment, dashes marching the other way — sync is
   bidirectional and the diagram has to show both halves or it reads as
   broadcast. */
.graph .edge--live-back {
  fill: none;
  stroke: var(--color-warm);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  animation: edgeFlowBack 1.4s linear infinite;
}

@keyframes edgeFlowBack {
  to { stroke-dashoffset: 24; }
}

.graph .edge--agent {
  stroke: var(--color-accent-adaptive);
  stroke-dasharray: 2 5;
  opacity: 0.8;
}

@keyframes edgeFlow {
  to { stroke-dashoffset: -24; }
}

/* The travelling update. `cx` is animated as a CSS property (it is a geometry
   property on <circle>, so it is animatable without SMIL) — the start/end
   values must therefore match the live edge's endpoints in diagrams.js. */
.graph .pulse {
  fill: var(--color-warm);
  animation: pulseTravel 3.4s var(--ease-out) infinite;
}

/* Phased, not simultaneous: the outbound pulse runs in the first half of the
   cycle and the return in the second, so the pair reads as one round trip
   rather than two unrelated blips. Keyframe cx values must match the live
   edges' endpoints in diagrams.js. */
@keyframes pulseTravel {
  0%, 4%     { cx: 208px; opacity: 0; }
  10%        { opacity: 1; }
  38%        { cx: 312px; opacity: 1; }
  44%, 100%  { cx: 312px; opacity: 0; }
}

@keyframes pulseTravelBack {
  0%, 54%    { cx: 312px; opacity: 0; }
  60%        { opacity: 1; }
  88%        { cx: 208px; opacity: 1; }
  94%, 100%  { cx: 208px; opacity: 0; }
}

.graph .pulse--back { animation-name: pulseTravelBack; }

.graph .ring {
  fill: none;
  stroke: var(--color-warm);
  animation: ringOut 3.4s var(--ease-out) infinite;
}

/* Arrival rings, phased to land with their own pulse. */
@keyframes ringOut {
  0%, 32% { r: 5;  opacity: 0; }
  38%     { r: 5;  opacity: 0.75; }
  62%     { r: 22; opacity: 0; }
  100%    { r: 22; opacity: 0; }
}

@keyframes ringOutBack {
  0%, 82% { r: 5;  opacity: 0; }
  88%     { r: 5;  opacity: 0.75; }
  100%    { r: 22; opacity: 0; }
}

.graph .ring--back { animation-name: ringOutBack; }

/* ==========================================================================
   9  CONTENT BLOCKS
   ========================================================================== */

/* ---- Feature rows: alternating copy / visual ---------------------------- */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.feature-row + .feature-row { margin-top: clamp(3.5rem, 7vw, 6rem); }

.feature-row--flip .feature-copy { order: 2; }

@media (max-width: 900px) {
  .feature-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .feature-row--flip .feature-copy { order: 0; }
}

.feature-copy > * + * { margin-top: var(--space-16); }
.feature-copy h3 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }

/* A short list of specifics under a feature claim. */
.spec-list { list-style: none; display: grid; gap: var(--space-12); }

.spec-list li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
  color: var(--color-text-secondary);
}

.spec-list svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.2rem;
  color: var(--color-accent-adaptive);
}

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

/* ---- Bento / card grid -------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-16);
}

.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.band--sunken .card { background: var(--color-surface); }

.card p { color: var(--color-text-secondary); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--color-accent-surface);
  color: var(--color-accent-adaptive);
  border: 1px solid var(--color-accent-border);
}

.card-icon svg { width: 1.25rem; height: 1.25rem; }

/* Bento: a 6-column grid where items claim 2, 3, or 4 columns. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-16);
}

.bento > * { grid-column: span 6; }

@media (min-width: 760px) {
  .bento > .span-2 { grid-column: span 2; }
  .bento > .span-3 { grid-column: span 3; }
  .bento > .span-4 { grid-column: span 4; }
}

/* ---- Numbered steps ----------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-32);
  counter-reset: step;
  list-style: none;
}

.step { counter-increment: step; }

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--color-accent-adaptive);
}

.step h3 { margin-bottom: var(--space-8); }
.step p { color: var(--color-text-secondary); }

/* ---- Query examples: the "just ask" proof ------------------------------- */

.query-list { display: grid; gap: var(--space-12); list-style: none; }

.query-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  font-size: 1.0625rem;
  color: var(--color-text);
}

.query-list li::before {
  content: '›';
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--color-accent-adaptive);
  flex: none;
}

/* ---- Same question, three answers --------------------------------------
   Deliberately laid out as a chat exchange rather than a feature table: the
   point lands because you recognise the two refusals, and a table would flatten
   them into specs. */
.compare { margin-top: clamp(2rem, 4vw, 3rem); }

.compare-query {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-12);
  max-width: 44rem;
  margin-bottom: var(--space-24);
  padding: var(--space-16) var(--space-24);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-accent-surface);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-xl);
}

.compare-query-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-accent-adaptive);
  flex: none;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-16);
  align-items: start;
}

.answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: clamp(1.25rem, 2.4vw, 1.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-xl);
}

/* The one that can answer. Accent border + a touch of lift, so the eye lands
   there last and the contrast does the arguing. */
.answer--accent {
  border-color: var(--color-accent-border);
  background:
    linear-gradient(180deg, var(--color-accent-surface), transparent 60%),
    var(--color-surface);
  box-shadow: var(--shadow-card);
}

.answer-source {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.answer--accent .answer-source { color: var(--color-accent-adaptive); }

.answer-text {
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.answer--accent .answer-text { color: var(--color-text); }

/* Tappable chip standing in for the in-app jump to that person. */
.answer-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  align-self: flex-start;
  padding: 0.45rem 0.85rem;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-accent-adaptive);
  background: var(--color-accent-surface);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.answer-pill:hover {
  border-color: var(--color-accent-adaptive);
  transform: translateY(-1px);
}

.answer-pill svg { width: 0.85em; height: 0.85em; }

.compare-note {
  max-width: 44rem;
  margin-top: var(--space-24);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

/* ---- Claim / counter-claim block ---------------------------------------
   The "what we don't claim" panel. Precision is the credibility marker here
   (messaging playbook §8), so it gets a deliberate, quiet treatment rather
   than a badge. */
.claim {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-24);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-2xl);
}

.claim-col > * + * { margin-top: var(--space-12); }

.claim-col h3 {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.claim-col ul { list-style: none; display: grid; gap: var(--space-12); }

.claim-col li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--color-text-secondary);
}

.claim-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
}

.claim-col--do li::before { content: '✓'; color: var(--color-success); }
.claim-col--dont li::before { content: '×'; color: var(--color-text-tertiary); }

/* ---- Segment cross-link grid -------------------------------------------
   Also the fix for the site having had zero internal links between its 12
   pages — every marketing page renders this, so the cluster is crawlable. */
.segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-12);
}

.segment-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.segment-card:hover {
  border-color: var(--color-accent-border);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.segment-card span { font-weight: 500; }

.segment-card svg {
  width: 1rem;
  height: 1rem;
  color: var(--color-text-tertiary);
  flex: none;
}

.segment-card[aria-current='page'] {
  background: var(--color-accent-surface);
  border-color: var(--color-accent-border);
}

/* ---- FAQ — <details> so it works with JS disabled, and the same content
   feeds the FAQPage JSON-LD the pages emit. ------------------------------- */

.faq { max-width: 52rem; }

.faq details {
  border-bottom: 1px solid var(--color-hairline);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-24) 0;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1.5px solid var(--color-text-tertiary);
  border-bottom: 1.5px solid var(--color-text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq details > div {
  padding-bottom: var(--space-24);
  color: var(--color-text-secondary);
  max-width: var(--prose-max);
}

.faq details > div > * + * { margin-top: var(--space-12); }

/* ==========================================================================
   10  CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(70% 120% at 12% 0%, var(--glow-accent) 0%, transparent 62%),
    radial-gradient(50% 100% at 92% 100%, var(--glow-warm) 0%, transparent 60%),
    var(--color-surface);
  text-align: center;
}

.cta-band > * + * { margin-top: var(--space-24); }
.cta-band h2 { max-width: 34rem; margin-inline: auto; }
.cta-band .lede { margin-inline: auto; }
.cta-band .capture-form { margin-inline: auto; }

/* ==========================================================================
   11  FOOTER
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-hairline);
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--space-32);
  margin-top: auto;
  background: var(--color-bg);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: var(--space-40);
}

@media (max-width: 860px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

.footer-brand img { width: 108px; margin-bottom: var(--space-16); }

.footer-brand p {
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
  max-width: 22rem;
}

.footer-col h2 {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-16);
}

.footer-col ul { list-style: none; display: grid; gap: var(--space-12); }

.footer-col a {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-col a:hover { color: var(--color-text); text-decoration: underline; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12) var(--space-24);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-hairline);
}

.footer-bottom p {
  font-size: var(--text-micro);
  color: var(--color-text-tertiary);
  line-height: 1.6;
}

.footer-social { display: flex; gap: var(--space-8); list-style: none; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  color: var(--color-text-tertiary);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.footer-social a:hover {
  color: var(--color-text);
  border-color: var(--color-hairline-strong);
}

.footer-social svg { width: 1rem; height: 1rem; }

/* Privacy reassurance line under a form — kept from the pre-rebuild markup. */
.privacy-text {
  max-width: 30rem;
  margin-top: var(--space-24);
  font-size: var(--text-small);
  line-height: 1.55;
  color: var(--color-text-tertiary);
}

.hero--center .privacy-text,
.section-head--center .privacy-text { margin-inline: auto; }

/* ==========================================================================
   12  UTILITY-PAGE LAYOUTS
   Pre-rebuild class names kept so /testflight, /harvard, /feedback and the two
   auth callbacks keep the exact markup the Worker and the form scripts expect.
   ========================================================================== */

/* NOTE: the `.what-is` block (DEE-794) and `.partner-logo` rules were removed
   with the rebuild — the four-bullet "What is Deeta?" block it styled has been
   replaced by the feature rows and FAQ, and no page renders either class any
   more. `tools/build.js` renders from src/content, so a dead class here is dead
   everywhere; re-add only if a page actually uses it. */

/* TestFlight expectations + waitlist fallback (DEE-709). Also carries /support
   and /account, which reuse the same markup shape. */
.tf-expectations,
.tf-waitlist { max-width: 44rem; text-align: left; }

.hero--center .tf-expectations,
.hero--center .tf-waitlist { margin-inline: auto; }

.tf-expectations h2,
.tf-waitlist h2 { font-size: var(--text-h3); margin-bottom: var(--space-12); }

/* /support puts two headed lists in one .tf-expectations block, so the second
   heading needs its own top margin — the .hero-stack rhythm only spaces
   siblings, and these are not siblings. */
.tf-expectations ul + h2 { margin-top: var(--space-32); }

.tf-expectations ul { list-style: none; display: grid; gap: var(--space-12); }

.tf-expectations li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-text-secondary);
}

.tf-expectations li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-adaptive);
}

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

.tf-divider {
  border: none;
  border-top: 1px solid var(--color-hairline);
  max-width: 44rem;
  margin: var(--space-40) auto;
}

.tf-waitlist .subtitle { font-size: 1.0625rem; margin-bottom: var(--space-16); }

/* Vertical rhythm for the stacked utility-page hero contents. */
.hero-stack > * + * { margin-top: var(--space-32); }

/* The state-gated blocks are a single child of .hero-stack, so their own
   contents get no rhythm from the rule above — without this the <h1> and its
   subtitle sit flush against each other on /auth/verify and /auth/recover. */
.auth-state > * + *,
.launch-waitlist > .hero-copy > * + *,
.launch-active > .hero-copy > * + * { margin-top: var(--space-24); }

.auth-state h1 { margin-bottom: 0; }

/* ==========================================================================
   13  STATE GATES — server-flipped, fail-closed, work with JS disabled
   ========================================================================== */

/* Campus-launch gate (DEE-710): /harvard ships both states; worker/harvard.js
   flips data-launch-active at the edge. Default (and any degraded/failed read)
   leaves it "false" → the waitlist shows and the beta invite is hidden. */
.launch-active { display: none; }
[data-launch-active='true'] .launch-waitlist { display: none; }
[data-launch-active='true'] .launch-active { display: block; }

/* Auth callback pages (DEE-801): /auth/verify + /auth/recover ship every state
   in their markup; worker/auth.js flips `data-auth-state` (and
   `data-auth-error`) on <html> at the edge, so the right one shows with JS
   disabled — same mechanism as the /harvard gate.

   The default is `idle`, and idle claims nothing: if the flip never happens
   (Worker error, unexpected asset shape), the page says "nothing to confirm
   here" rather than asserting a confirmation or a failure that didn't occur. */
.auth-state { display: none; }
[data-auth-state='ready'] .auth-ready { display: block; }
[data-auth-state='error'] .auth-error { display: block; }
[data-auth-state='idle'] .auth-idle { display: block; }

/* Exactly one reason line shows inside the error state. */
.auth-reason { display: none; }
[data-auth-error='expired'] .auth-reason-expired,
[data-auth-error='denied'] .auth-reason-denied,
[data-auth-error='generic'] .auth-reason-generic { display: block; }

/* ==========================================================================
   14  MOTION + REVEAL
   ========================================================================== */

/* Scroll reveal. Gated on `html.js` — scripts/site.js sets that class before
   first paint, so with JS blocked or broken nothing is ever left invisible. */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children of a revealed group. */
html.js .reveal[data-delay='1'] { transition-delay: 70ms; }
html.js .reveal[data-delay='2'] { transition-delay: 140ms; }
html.js .reveal[data-delay='3'] { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js .reveal,
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .graph .edge--live,
  .graph .edge--live-back,
  .graph .pulse,
  .graph .ring { animation: none; }

  /* Static amber edges still read as "live" via colour, and the two arrowheads
     still read as bidirectional, so nothing is lost without the motion. */
  .graph .edge--live,
  .graph .edge--live-back { stroke-dasharray: none; }
  .graph .pulse { opacity: 1; cx: 312px; }
  .graph .pulse--back { cx: 208px; }
  .graph .ring { opacity: 0; }

  .message { animation: none; }
  .btn:active { transform: none; }
  .segment-card:hover { transform: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   15  UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link — visible only on focus. */
.skip-link {
  position: absolute;
  left: var(--space-16);
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus { top: var(--space-16); }

.stack-16 > * + * { margin-top: var(--space-16); }
.stack-24 > * + * { margin-top: var(--space-24); }
.stack-32 > * + * { margin-top: var(--space-32); }

.text-center { text-align: center; }
.center-block { margin-inline: auto; }