/* IBM Plex Sans, self-hosted (latin subset) so no visitor request goes to a third-party font CDN. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --ink: #0e1b19;
  --ink-soft: #29413d;
  --paper: #f8faf7;
  --surface: #ffffff;
  --sage: #dcebe5;
  --sage-deep: #91b9ae;
  --teal: #187d74;
  --teal-bright: #3fbfb2;
  --teal-deep: #10665d;
  --amber: #e8a23b;
  /* Accent role: `--accent` is the teal that carries eyebrows, section numbers, and small
     wayfinding marks on light surfaces (AA on paper, white, sage, and amber-pale). Dark
     sections remap it to the brighter teal, which only reaches AA against the ink ground. */
  --accent: var(--teal-deep);
  --amber-pale: #fff1d5;
  --line: #d9e2dd;
  --muted: #62746f;
  --danger: #a7382f;
  /* Ink-ground sections (hero, page hero, footer, dark evidence card): foreground ramp from
     primary text down to faint labels, all reading against the dark grounds below. */
  --on-dark: #e9f2ef;
  --on-dark-soft: #bccec8;
  --on-dark-muted: #93a9a2;
  --on-dark-faint: #73938c;
  /* Dark surfaces, separators, and chips used on those sections. */
  --surface-dark-top: #172a27;
  --surface-dark: #152622;
  --surface-dark-deep: #0b1715;
  --line-on-dark: #35514b;
  --chip-dark-bg: #20443e;
  --chip-dark-ink: #7fd4c9;
  --btn-outline-dark: #5a7f78;
  /* Warm (amber-pale) context: border and readable text on the university/credit surfaces. */
  --line-warm: #e8c984;
  --ink-warm: #79602f;
  --shadow: 0 18px 50px rgba(14, 27, 25, .09);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.6; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
/* One coherent keyboard focus ring for buttons and links. `--accent` is context-aware, so it stays
   legible on both light sections and the ink-ground hero/footer. Inputs keep their own focus ring. */
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-header {
  position: sticky; top: 0; z-index: 30; min-height: 72px; padding: 0 5vw;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-size: 1.35rem; font-weight: 750; letter-spacing: -.04em; }
.brand img { border-radius: 8px; }
.brand span span { color: var(--teal); }
.site-nav { display: flex; align-items: center; gap: 1.6rem; font-size: .93rem; font-weight: 620; }
.site-nav a { text-decoration: none; }
.site-nav > a:not(.button):hover { color: var(--teal); }
.nav-toggle { display: none; border: 0; background: transparent; color: var(--ink); font-weight: 700; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.25rem;
  border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: white; text-decoration: none;
  font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.button:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.button-secondary:hover { background: var(--sage); border-color: var(--sage-deep); }
.button-amber { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.button-amber:hover { background: #d8912a; border-color: #d8912a; }
.button-small { min-height: 44px; padding: .5rem .9rem; border-radius: 8px; }
.button-danger, .button-danger:hover { background: var(--danger); border-color: var(--danger); }
.link-button { border: 0; padding: .3rem 0; color: var(--teal); background: none; font-weight: 700; cursor: pointer; }

.hero { position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 9rem) 6vw 7rem; background: var(--ink); color: white; }
.hero-grid { position: relative; max-width: 1220px; margin: auto; display: grid; grid-template-columns: 1.18fr .82fr; gap: 6vw; align-items: center; }
.eyebrow { display: block; margin-bottom: .5rem; color: var(--accent); font-size: .95rem; font-weight: 600; }
/* Ink-ground sections remap the accent to the brighter teal, which needs the dark backdrop to pass AA. */
.hero, .page-hero, .site-license-card { --accent: var(--teal-bright); }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.03em; margin-top: 0; }
h1 { max-width: 850px; margin: 0 0 1.4rem; font-size: clamp(3rem, 6.5vw, 6.7rem); font-weight: 700; }
.hero-copy { max-width: 680px; color: var(--on-dark-soft); font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero .button-secondary { color: white; border-color: var(--btn-outline-dark); }
.hero .button-secondary:hover { background: var(--surface-dark-top); border-color: var(--on-dark-faint); }

/* `translateZ(0)` + `backface-visibility` force the card onto its own compositing layer so Firefox
   renders the text upright and then rotates the whole layer, instead of rasterising rotated glyphs
   directly (which looks jagged in Firefox). No visual change in other browsers. */
.evidence-card { position: relative; border: 1px solid var(--line-on-dark); border-radius: 12px; padding: 1.35rem; background: var(--surface-dark-deep); transform: rotate(1.5deg) translateZ(0); backface-visibility: hidden; }
.evidence-card::before { content: "Live evidence map"; display: block; color: var(--on-dark-faint); font-size: .8rem; font-weight: 600; margin-bottom: 1.1rem; }
.evidence-topic { padding: 1rem; border: 1px solid var(--line-on-dark); background: var(--surface-dark); border-radius: 8px; margin-bottom: .8rem; }
.evidence-topic strong { display: block; color: var(--on-dark); }
.evidence-topic p { margin: .35rem 0 0; color: var(--on-dark-muted); font-size: .86rem; }
.evidence-quote { margin: .6rem 0 0; color: var(--on-dark-soft); font-size: .9rem; }
.source-chip { display: inline-block; margin-top: .55rem; padding: .18rem .55rem; border-radius: 99px; background: var(--chip-dark-bg); color: var(--chip-dark-ink); font-size: .75rem; font-weight: 600; }

.section { max-width: 1220px; margin: auto; padding: clamp(4.5rem, 8vw, 8rem) 5vw; }
.section-heading { max-width: 760px; margin-bottom: 3rem; }
.section-heading h2 { margin: .65rem 0 1rem; font-size: clamp(2.25rem, 4.5vw, 4.5rem); }
.section-heading p { color: var(--muted); font-size: 1.08rem; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.feature-card { padding: 1.55rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
/* Home bento: a wide lead cell (span 4) and a full-width closer (span 6) break the uniform grid
   into three distinct row rhythms. */
.feature-grid-bento { grid-template-columns: repeat(6, 1fr); }
.feature-grid-bento .feature-card { grid-column: span 2; }
.feature-grid-bento .feature-card:nth-child(1) { grid-column: span 4; }
.feature-grid-bento .feature-card:nth-child(6) { grid-column: span 6; }
/* One primary feature: the lead cell is the only tinted tile and carries larger type. */
.feature-grid-bento .feature-card:nth-child(1) { background: var(--sage); }
.feature-grid-bento .feature-card:nth-child(1) h3 { font-size: 1.9rem; }
.feature-grid-bento .feature-card:nth-child(1) p { max-width: 36rem; font-size: 1.05rem; }
/* Features page: an editorial list (title column + description) rather than a wall of identical cards. */
.feature-list { border-top: 1px solid var(--line); }
.feature-list .feature-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 3rem; min-height: 0; padding: 1.8rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.feature-list .feature-card h2 { margin: 0; }
.feature-list .feature-card p { font-size: 1rem; }
.feature-card h2, .feature-card h3 { margin-bottom: .65rem; font-size: 1.35rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .94rem; }

.workflow { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.workflow-inner { max-width: 1220px; margin: auto; padding: 6rem 5vw; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.step { padding: 1.5rem 2rem 1.5rem 0; border-top: 1px solid var(--line); }
.step h3 { margin: 0 0 .55rem; font-size: 1.18rem; }
.step p { color: var(--muted); font-size: .9rem; }

.university { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5vw; align-items: center; padding: 3rem; border-radius: 12px; background: var(--amber-pale); }
.university h2 { font-size: clamp(2.2rem, 4vw, 4rem); margin-bottom: 1rem; }
.license-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.license-fact { padding: 1.2rem; border: 1px solid var(--line-warm); border-radius: 8px; background: rgba(255,255,255,.52); }
.license-fact strong { display: block; font-size: 1.05rem; }
.license-fact span { color: var(--ink-warm); font-size: .86rem; }

/* Left-aligned, with the text edge lined up with the 1220px content column of `.section` below. */
.page-hero { padding: 5.5rem max(5vw, calc((100% - 1220px) / 2 + 5vw)) 4rem; background: var(--ink); color: white; }
.page-hero h1 { max-width: 920px; font-size: clamp(2.8rem, 6vw, 5.8rem); }
.page-hero p { max-width: 680px; margin: 0; color: var(--on-dark-soft); font-size: 1.15rem; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: 1rem; align-items: start; }
.price-card { position: relative; padding: 1.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.price-card h3 { font-size: 1.55rem; margin-bottom: .4rem; }
.price { margin: 1.4rem 0; font-size: 3rem; font-weight: 780; letter-spacing: -.06em; }
.price small { font-size: .9rem; color: var(--muted); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 1.5rem; border-top: 1px solid var(--line); }
.price-card li { padding: .6rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .92rem; }
.site-license-card { margin-top: 1rem; padding: 2rem; display: flex; justify-content: space-between; gap: 2rem; align-items: center; border-radius: 12px; color: white; background: var(--ink); }

.auth-shell { min-height: 70vh; display: grid; place-items: center; padding: 4rem 5vw; }
.auth-card { width: min(100%, 470px); padding: 2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.auth-card h1 { font-size: 2.3rem; margin-bottom: .5rem; }
.auth-card > p { color: var(--muted); }
.form-stack { display: grid; gap: 1rem; margin-top: 1.5rem; }
label { display: grid; gap: .35rem; font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
input, select, textarea { width: 100%; padding: .72rem .85rem; border: 1px solid var(--line); border-radius: 6px; background: white; color: var(--ink); outline: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(24,125,116,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-help { color: var(--muted); font-size: .78rem; }
/* Inline, screen-reader-announced submission error. Spans the full width of any form grid and
   sits above the fields so the recovery message is where focus lands. */
.form-error {
  grid-column: 1 / -1; margin: 0; padding: .7rem .85rem; border-radius: 6px;
  border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface));
  color: var(--danger); font-size: .84rem; font-weight: 650; overflow-wrap: anywhere;
}
.form-error:focus { outline: 2px solid var(--danger); outline-offset: 2px; }

.portal-shell { max-width: 1320px; margin: auto; padding: 3rem 5vw 7rem; }
.portal-header { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; margin-bottom: 2rem; }
.portal-header h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); margin-bottom: .2rem; overflow-wrap: anywhere; }
.portal-header p { margin: 0; color: var(--muted); }
.portal-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1rem; }
.metric { padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.metric span { display: block; color: var(--muted); font-size: .85rem; font-weight: 600; }
.metric strong { display: block; margin-top: .3rem; font-size: 1.45rem; }
.panel-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; }
.panel { padding: 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.panel h2 { font-size: 1.3rem; margin-bottom: 1.2rem; }
.panel-full { grid-column: 1 / -1; }
.data-list { display: grid; gap: .5rem; }
.data-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .8rem; border-radius: 6px; background: var(--paper); }
.data-row > div { min-width: 0; }
.data-row p { margin: 0; overflow-wrap: anywhere; }
.data-row small { color: var(--muted); overflow-wrap: anywhere; }
.badge { display: inline-flex; padding: .2rem .52rem; border-radius: 99px; background: var(--sage); color: var(--teal-deep); font-size: .75rem; font-weight: 600; }
.badge-warn { background: var(--amber-pale); color: var(--ink-warm); }
/* Right-hand cluster of a data-row: a status badge plus one or more link-button
   actions (e.g. an invoice's status, PDF/UBL downloads, and its hosted-view link). */
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex-shrink: 0; }
/* Table summary row (per-workspace usage, admin listings): visually separated from the
   data rows above it without a second header. */
.totals-row td { border-top: 2px solid var(--line); font-weight: 700; }
.pagination { display: flex; align-items: center; gap: .8rem; }
.empty { padding: 2rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 8px; }
.credit-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.credit-pack { padding: 1rem; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: white; cursor: pointer; }
.credit-pack:hover { border-color: var(--teal); }
.credit-pack strong, .credit-pack span { display: block; }
.credit-pack span { color: var(--muted); font-size: .8rem; }

.admin-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.admin-tabs button { min-height: 44px; border: 1px solid var(--line); border-radius: 99px; padding: .45rem 1rem; background: var(--surface); cursor: pointer; font-weight: 700; }
.admin-tabs button.active { background: var(--ink); color: white; border-color: var(--ink); }
.admin-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.admin-form .wide { grid-column: 1 / -1; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .72rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }

.loading { min-height: 50vh; display: grid; place-items: center; color: var(--muted); }
.loading::before { content: ""; width: 28px; height: 28px; border: 3px solid var(--line); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; z-index: 80; right: 1.2rem; bottom: 1.2rem; max-width: min(420px, calc(100vw - 2.4rem)); padding: .8rem 1rem; border-radius: 8px; color: white; background: var(--ink); box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: none; }
.toast.error { background: var(--danger); }

.site-footer { padding: 3rem 5vw; display: grid; grid-template-columns: 1fr auto; gap: 1rem 3rem; align-items: start; color: var(--on-dark-muted); background: var(--ink); }
.brand-footer { color: white; }
.site-footer p { margin: .6rem 0 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .86rem; }
.footer-links a { text-decoration: none; }
.footer-note { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid var(--line-on-dark); font-size: .76rem; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 1.2rem 5vw; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); }
  .site-nav.open { display: flex; }
  .hero-grid, .university, .panel-grid { grid-template-columns: 1fr; }
  .evidence-card { max-width: 620px; min-height: auto; transform: none; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid-bento .feature-card,
  .feature-grid-bento .feature-card:nth-child(1),
  .feature-grid-bento .feature-card:nth-child(6) { grid-column: auto; }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 1rem 0; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .hero { padding-top: 4.5rem; }
  .feature-grid, .feature-list .feature-card, .steps, .license-facts, .metric-grid, .form-row, .admin-form { grid-template-columns: 1fr; }
  .site-license-card, .portal-header { align-items: stretch; flex-direction: column; }
  .admin-form .wide { grid-column: auto; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-note { grid-column: 1; }
}

/* Spacing utilities: separate a form or block from the content above it, replacing scattered
   inline margin styles so the spacing scale lives in one place. */
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 1.5rem; }
.mt-lg { margin-top: 2rem; }
.mt-xl { margin-top: 4rem; }

/* Reduced motion: drop the decorative transitions and the hover lift, and stop smooth-scrolling,
   while deliberately preserving the loading spinner (essential feedback) and the toast's own
   appearance (its opacity/position change is instant here, not lost). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .toast { transition: none; }
}