/*
 * NearAxis console and public site: the one stylesheet.
 *
 * Ported from the approved canvas artboards (Main, Security, Request, NotFound),
 * whose styles were inline. They live here so the CSP can stay
 * `default-src 'self'` with no 'unsafe-inline' and no third-party origin.
 *
 * Brand: night ledger #0E1420, surface #151D2C, paper #EDEAE2, brass #D9A441
 * (the single accent), ledger green #5FB39A (confirmations only).
 *
 * Fonts are self-hosted (SIL Open Font License 1.1; licences beside the files
 * in fonts/). Latin subset only; anything outside it falls back to the system
 * font named after each family.
 */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/assets/fonts/schibsted-grotesk-latin-var.woff2) format('woff2');
  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: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/public-sans-latin-var.woff2) format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format('woff2');
  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;
}

/* ---- Base ---------------------------------------------------------------- */

body { margin: 0; background: #0E1420; }

/* In the artboards every classed link carried an inline colour, which beat
   `a:hover`. Only bare links change colour on hover here, for the same result. */
a { color: #D9A441; }
a:not([class]):hover { color: #F0C46E; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible { outline: 2px solid #D9A441; outline-offset: 3px; border-radius: 6px; }

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] .faq-sign { transform: rotate(45deg); }

.page { font-family: 'Public Sans', system-ui, sans-serif; color: #EDEAE2; background: #0E1420; min-height: 100vh; }
.page--fill { display: flex; flex-direction: column; }

.display { font-family: 'Schibsted Grotesk', sans-serif; }
.mono { font-family: 'IBM Plex Mono', monospace; }

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

/* The request form's honeypot: off-screen, not merely invisible, so a person
   using a screen reader is told to leave it, and a sighted one never sees it. */
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Header -------------------------------------------------------------- */

.site-header { border-bottom: 1px solid #1F2A3D; }
.site-header__inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #EDEAE2; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
.brand__name { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 15px; }
.nav-quiet { color: #9AA3B2; text-decoration: none; }
.nav-strong { color: #EDEAE2; text-decoration: none; font-weight: 600; }
.nav-button { background: #D9A441; color: #0E1420; text-decoration: none; padding: 10px 16px; border-radius: 8px; font-weight: 600; }

/* ---- Shared pieces ------------------------------------------------------- */

.btn { background: #D9A441; color: #0E1420; text-decoration: none; padding: 14px 22px; border-radius: 10px; font-weight: 600; font-size: 16px; }
.btn-outline { border: 1px solid #3A4760; color: #EDEAE2; text-decoration: none; padding: 12px 20px; border-radius: 12px; font-weight: 600; }
.arrow-link { color: #EDEAE2; text-decoration: none; padding: 13px 4px; font-weight: 600; font-size: 16px; border-bottom: 1px solid #3A4760; }
.h-section { margin: 0; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.rule-top { border-top: 1px solid #1F2A3D; }

.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid #1F2A3D; }
.steps li:last-child { border-bottom: 0; }
.steps__n { font-family: 'IBM Plex Mono', monospace; color: #D9A441; font-size: 15px; }
.steps__t { font-family: 'Schibsted Grotesk', sans-serif; font-size: 18px; }
.steps__d { color: #9AA3B2; line-height: 1.6; }

.rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; font-size: 16px; }
.rows li { padding: 11px 0; border-bottom: 1px solid #1F2A3D; }
.rows li:last-child { border-bottom: 0; }

/* ---- Landing: hero ------------------------------------------------------- */

.hero { max-width: 1200px; margin: 0 auto; padding: 72px 24px 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 56px; align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; }
.eyebrow { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.04em; color: #9AA3B2; }
.hero__title { margin: 0; font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.035em; }
.accent { color: #D9A441; }
.hero__lede { margin: 0; font-size: 19px; line-height: 1.6; color: #B9C0CC; max-width: 520px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* The illustrative conversation. Static markup, no script. */
.chat { margin: 0; background: #151D2C; border: 1px solid #26324A; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.chat__bar { display: flex; justify-content: space-between; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #7E889A; }
.chat__live { display: flex; align-items: center; gap: 6px; }
.chat__dot { width: 7px; height: 7px; border-radius: 50%; background: #5FB39A; }
.bubble { margin: 0; align-self: flex-end; max-width: 80%; background: #26324A; padding: 11px 15px; border-radius: 14px 14px 4px 14px; font-size: 15px; }
.chat__answer { display: flex; flex-direction: column; gap: 8px; }
.chat__lead { font-size: 15px; color: #B9C0CC; }
.chat__table { width: 100%; border-collapse: collapse; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.chat__table thead tr { color: #7E889A; text-align: left; }
.chat__table th { padding: 7px 8px; border-bottom: 1px solid #26324A; font-weight: 500; }
.chat__table tbody { color: #EDEAE2; }
.chat__table td { padding: 7px 8px; border-bottom: 1px solid #1F2A3D; }
.chat__table tbody tr:last-child td { border-bottom: 0; }
.chat__table .num { text-align: right; }
.chat__caption { font-size: 12px; color: #7E889A; font-family: 'IBM Plex Mono', monospace; }

.proposal { position: relative; background: #EDEAE2; color: #0E1420; border-radius: 10px; display: flex; flex-direction: column; }
.proposal__head { padding: 14px 18px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.proposal__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; }
.proposal__state { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #5A6273; }
.proposal__fields { margin: 0; padding: 0 18px 14px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.proposal__fields dt { color: #5A6273; }
.proposal__fields dd { margin: 0; font-weight: 600; }
.proposal__tear { height: 0; border-top: 2px dashed #B7B2A6; margin: 0 10px; }
.proposal__foot { padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.proposal__note { font-size: 13px; color: #5A6273; }
.proposal__buttons { display: flex; gap: 8px; justify-content: flex-end; }
.proposal__cancel { border: 1px solid #B7B2A6; padding: 7px 13px; border-radius: 7px; font-weight: 600; font-size: 14px; }
.proposal__confirm { background: #0E1420; color: #EDEAE2; padding: 8px 14px; border-radius: 7px; font-weight: 600; font-size: 14px; }

/* ---- Landing: sections --------------------------------------------------- */

.commitments { border-top: 1px solid #1F2A3D; border-bottom: 1px solid #1F2A3D; }
.commitments ul { max-width: 1200px; margin: 1em auto; padding: 0 24px; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.commitments li { padding: 22px 20px 22px 0; display: flex; flex-direction: column; gap: 4px; }
.commitments b { font-family: 'Schibsted Grotesk', sans-serif; font-size: 16px; }
.commitments span { color: #9AA3B2; font-size: 14px; line-height: 1.5; }

.do { max-width: 1200px; margin: 0 auto; padding: 80px 24px 40px; display: flex; flex-direction: column; gap: 36px; }
.do__head { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.do__title { font-size: 40px; }
.do__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.do__col { padding-top: 18px; display: flex; flex-direction: column; gap: 14px; }
.do__col--read { border-top: 2px solid #5FB39A; }
.do__col--write { border-top: 2px solid #D9A441; }
.do__col h3 { margin: 0; font-family: 'Schibsted Grotesk', sans-serif; font-size: 20px; }
.ask li { display: flex; justify-content: space-between; gap: 16px; }
.tag { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #7E889A; white-space: nowrap; }

.band { max-width: 1200px; margin: 0 auto; padding: 56px 24px 80px; }
.band__card { background: #151D2C; border: 1px solid #26324A; border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.band__copy { padding: 44px; display: flex; flex-direction: column; gap: 18px; }
.band__title { font-size: 36px; }
.band__text { margin: 0; color: #B9C0CC; font-size: 17px; line-height: 1.65; }
.band__link { align-self: flex-start; font-weight: 600; text-decoration: none; border-bottom: 1px solid #6B5530; padding-bottom: 2px; color: #D9A441; }
.band__img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; }

.how { max-width: 1200px; margin: 0 auto; padding: 72px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.how__head { display: flex; flex-direction: column; gap: 12px; }
.how__title { font-size: 36px; }
.how__sub { margin: 0; color: #9AA3B2; font-size: 16px; line-height: 1.6; }

.pilot { max-width: 1200px; margin: 0 auto; padding: 72px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 48px; align-items: center; }
.pilot__head { display: flex; flex-direction: column; gap: 14px; }
.pilot__title { font-size: 34px; }
.pilot__text { margin: 0; color: #B9C0CC; font-size: 17px; line-height: 1.65; }
.card { background: #151D2C; border: 1px solid #26324A; border-radius: 18px; padding: 32px; }
.pilot__card { display: flex; flex-direction: column; gap: 16px; }
.pilot__card h3 { font-size: 22px; }
.checks li { display: flex; gap: 12px; }
.check { color: #5FB39A; }

.faq { max-width: 860px; margin: 0 auto; padding: 72px 24px; display: flex; flex-direction: column; gap: 20px; }
.faq__title { font-size: 32px; }
.faq__list { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid #1F2A3D; padding: 18px 0; }
.faq summary { display: flex; justify-content: space-between; gap: 16px; font-size: 17px; font-weight: 600; }
.faq-sign { color: #D9A441; font-size: 22px; line-height: 1; transition: transform 0.2s; }
.faq details p { margin: 12px 0 0; color: #B9C0CC; line-height: 1.65; }

.cta { border-top: 1px solid #1F2A3D; background: #121A28; }
.cta__inner { max-width: 1200px; margin: 0 auto; padding: 64px 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta__copy { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.cta__title { font-size: 32px; }
.cta__text { margin: 0; color: #B9C0CC; font-size: 17px; line-height: 1.55; }

/* ---- Footer -------------------------------------------------------------- */

.site-footer { border-top: 1px solid #1F2A3D; }
.site-footer__grid { max-width: 1200px; margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; font-size: 14px; }
.site-footer__about { display: flex; flex-direction: column; gap: 10px; grid-column: span 2; min-width: 0; }
.site-footer__brand { display: flex; align-items: center; gap: 10px; }
.site-footer__brand img { width: 26px; height: 26px; border-radius: 6px; }
.site-footer__brand b { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 800; font-size: 18px; }
.site-footer__blurb { color: #9AA3B2; line-height: 1.6; max-width: 360px; }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer__label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #7E889A; letter-spacing: 0.04em; }
.site-footer nav a { text-decoration: none; color: #B9C0CC; }
.site-footer__legal { max-width: 1200px; margin: 0 auto; padding: 18px 24px 28px; border-top: 1px solid #1F2A3D; font-size: 13px; color: #7E889A; }

/* ---- Data security ------------------------------------------------------- */

.doc { max-width: 960px; margin: 0 auto; padding: 64px 24px 80px; display: flex; flex-direction: column; gap: 56px; }
.doc__head { display: flex; flex-direction: column; gap: 16px; }
.doc__title { font-size: clamp(38px, 4.4vw, 54px); }
.doc__lede { margin: 0; color: #B9C0CC; font-size: 19px; line-height: 1.6; max-width: 640px; }
.doc__img { width: 100%; height: auto; border-radius: 18px; border: 1px solid #1F2A3D; display: block; }
.doc__h2 { font-size: 30px; }
.flow { display: flex; flex-direction: column; gap: 8px; }
.flow .doc__h2 { margin-bottom: 8px; }
.flow .steps__n { font-size: inherit; }
.keep { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.keep .doc__h2 { grid-column: 1 / -1; }
.keep__col { padding-top: 14px; }
.keep__col--yes { border-top: 2px solid #5FB39A; }
.keep__col--no { border-top: 2px solid #3A4760; }
.keep__col h3 { margin: 0 0 6px; font-size: 17px; }
.keep__col .rows { color: #B9C0CC; font-size: inherit; }
.ai { display: flex; flex-direction: column; gap: 14px; }
.ai p { margin: 0; color: #B9C0CC; line-height: 1.6; }
.ai .ai__asof { color: #7E889A; font-size: 13px; }
.table-scroll { border: 1px solid #26324A; border-radius: 14px; overflow-x: auto; }
.plans { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 620px; }
.plans thead tr { text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #7E889A; letter-spacing: 0.04em; }
.plans th { padding: 14px 18px; border-bottom: 1px solid #26324A; font-weight: 500; }
.plans td { padding: 14px 18px; border-bottom: 1px solid #1F2A3D; }
.plans tbody tr:last-child td { border-bottom: 0; }

/* ---- Request access ------------------------------------------------------ */

.request { max-width: 1100px; margin: 0 auto; padding: 64px 24px 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 56px; align-items: start; }
.request__head { display: flex; flex-direction: column; gap: 16px; }
.request__title { font-size: 48px; }
.request__lede { margin: 0; font-size: 18px; line-height: 1.6; color: #B9C0CC; }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .group legend { font-weight: 600; font-size: 15px; }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid #3A4760; border-radius: 10px; background: #0E1420; color: #EDEAE2; }
.field textarea { min-height: 96px; resize: vertical; }
.field [aria-invalid="true"] { border-color: #F0C46E; }
.optional { font-weight: 400; color: #7E889A; }
.field-error { margin: 0; font-size: 14px; color: #F0C46E; }
.form-alert { margin: 0; padding: 12px 14px; border: 1px solid #6B5530; border-radius: 10px; color: #EDEAE2; font-size: 15px; line-height: 1.5; }
.group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.group legend { margin-bottom: 8px; padding: 0; }
.check-row { display: flex; gap: 10px; align-items: center; min-height: 32px; }
.check-row input { width: 18px; height: 18px; accent-color: #D9A441; }
.submit { font: inherit; font-weight: 600; font-size: 16px; background: #D9A441; color: #0E1420; border: 0; border-radius: 10px; padding: 14px 20px; min-height: 48px; cursor: pointer; }
.form__small { margin: 0; font-size: 13px; color: #7E889A; }
.received { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.received img { width: 200px; height: 200px; border-radius: 16px; object-fit: cover; border: 1px solid #1F2A3D; }
.received h2 { font-size: 28px; }
.received p { margin: 0; color: #B9C0CC; line-height: 1.6; max-width: 380px; }

/* ---- 404 ----------------------------------------------------------------- */

.lost { flex-grow: 1; max-width: 1000px; width: 100%; margin: 0 auto; padding: 56px 24px; box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.lost__img { width: 100%; max-width: 420px; justify-self: center; border-radius: 20px; border: 1px solid #1F2A3D; }
.lost__copy { display: flex; flex-direction: column; gap: 16px; }
.lost__code { font-family: 'IBM Plex Mono', monospace; color: #D9A441; font-size: 15px; }
.lost__title { font-size: 44px; }
.lost__text { margin: 0; color: #B9C0CC; font-size: 17px; line-height: 1.6; }
.lost .btn { padding: 13px 20px; border-radius: 12px; font-size: inherit; }

/* ---- Signed-in and notice pages ------------------------------------------ */

.notice { max-width: 720px; margin: 0 auto; padding: 64px 24px 80px; display: flex; flex-direction: column; gap: 24px; }
.notice__title { font-size: 48px; }
.notice p { margin: 0; color: #B9C0CC; font-size: 18px; line-height: 1.6; }
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; font-size: 16px; }
.facts dt { color: #9AA3B2; }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.button-secondary { font: inherit; font-weight: 600; background: transparent; color: #EDEAE2; border: 1px solid #3A4760; border-radius: 10px; padding: 12px 18px; min-height: 44px; cursor: pointer; }
.inline-form { margin: 0; }

/* ---- Console: account, sign-ins, delete, connect (Console / Guides canvas) - */

.muted { color: #7E889A; }
.nav-email { color: #B9C0CC; font-size: 14px; overflow-wrap: anywhere; }
.nav-signout { font: inherit; font-weight: 600; background: transparent; color: #EDEAE2; border: 0; padding: 8px 0; cursor: pointer; }
.console { display: flex; flex-wrap: wrap; flex-grow: 1; max-width: 1200px; margin: 0 auto; }
.console-nav { flex: 0 0 230px; padding: 24px 16px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid #1F2A3D; }
.console-nav__link { color: #B9C0CC; text-decoration: none; border-radius: 10px; padding: 12px 14px; min-height: 20px; }
.console-nav__link[aria-current="page"] { background: #1F2A3D; color: #EDEAE2; font-weight: 600; }
.console-main { flex: 1 1 520px; min-width: 0; padding: 32px 32px 56px; max-width: 900px; display: flex; flex-direction: column; gap: 24px; }
.console-title { font-size: 36px; }
.console-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.console-foot { margin: 0; font-size: 14px; }
.banner { background: #2A2111; border: 1px solid #6B5530; border-radius: 14px; padding: 16px 18px; line-height: 1.55; }
.notice-ok { margin: 0; color: #5FB39A; font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tile { background: #151D2C; border: 1px solid #1F2A3D; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.tile__label { font-size: 13px; color: #7E889A; text-transform: uppercase; letter-spacing: 0.06em; }
.tile__value { font-size: 20px; font-weight: 600; }
.tile__value--ok { color: #5FB39A; }
.tile__value--warn { color: #D9A441; }
.tile__help { font-size: 14px; color: #B9C0CC; }
.panel { background: #151D2C; border: 1px solid #1F2A3D; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.panel--danger { background: #1C1216; border-color: #5A2A2A; }
.panel__title { margin: 0; font-size: 20px; }
.panel__title--danger { color: #F2735F; }
.panel__text { margin: 0; color: #B9C0CC; line-height: 1.55; }
.panel__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.panel__copy { display: flex; flex-direction: column; gap: 4px; max-width: 560px; }
.panel__state { margin: 0; font-size: 14px; color: #B9C0CC; }
.panel__state--on { color: #5FB39A; }
.switch { position: relative; width: 56px; height: 32px; border-radius: 999px; border: 1px solid #3A4760; background: #0E1420; cursor: pointer; padding: 0; flex-shrink: 0; }
.switch--on { border-color: #5FB39A; background: #1F5F5A; }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #7E889A; }
.switch--on .switch__knob { left: 27px; background: #EDEAE2; }
.form--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.field__label { font-weight: 600; font-size: 15px; }
.field__static { padding: 12px 0; color: #B9C0CC; overflow-wrap: anywhere; }
.field__hint { font-size: 13px; color: #7E889A; }
.form__actions { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; }
.list { background: #151D2C; border: 1px solid #1F2A3D; border-radius: 16px; }
.list__row { padding: 18px 22px; border-bottom: 1px solid #1F2A3D; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.list__row:last-child { border-bottom: 0; }
.list__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.list__detail { color: #7E889A; font-size: 14px; }
.list__empty { margin: 0; padding: 18px 22px; color: #B9C0CC; }
.button-small { font: inherit; font-size: 14px; font-weight: 600; background: transparent; color: #D9A441; border: 1px solid #6B5530; border-radius: 8px; padding: 8px 12px; min-height: 40px; cursor: pointer; text-decoration: none; display: inline-block; }
.button-danger { font: inherit; font-weight: 600; background: transparent; color: #F2735F; border: 1px solid #F2735F; border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.button-warn { font: inherit; font-weight: 600; background: transparent; color: #D9A441; border: 1px solid #D9A441; border-radius: 10px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.button-approve { font: inherit; font-weight: 600; background: #5FB39A; color: #0E1420; border: 0; border-radius: 10px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.guide { display: flex; flex-direction: column; gap: 28px; }
.guide__head { display: flex; flex-direction: column; gap: 10px; }
.link-box { border: 1px solid #26324A; border-radius: 12px; padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.link-box__label { color: #9AA3B2; font-size: 14px; }
.link-box__url { font-family: 'IBM Plex Mono', monospace; font-size: 15px; background: #0E1420; border: 1px solid #26324A; padding: 8px 12px; border-radius: 8px; word-break: break-all; user-select: all; }
.guide__tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.guide__tabs a { color: #EDEAE2; text-decoration: none; border: 1px solid #3A4760; border-radius: 10px; padding: 11px 18px; }
.guide__tabs a[aria-current="true"] { background: #D9A441; color: #0E1420; border-color: #D9A441; font-weight: 600; }
.guide__section { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #1F2A3D; padding-top: 22px; }
.guide__steps { margin: 0; padding-left: 22px; line-height: 1.9; color: #D5D9E0; }
.guide__h3 { margin: 8px 0 0; font-size: 17px; }
.guide__pre { margin: 8px 0; font-family: 'IBM Plex Mono', monospace; font-size: 14px; background: #0E1420; border: 1px solid #26324A; padding: 14px; border-radius: 10px; white-space: pre-wrap; word-break: break-all; }
.guide__code, .grid code, .activity code { font-family: 'IBM Plex Mono', monospace; background: #0E1420; border: 1px solid #26324A; padding: 2px 6px; border-radius: 6px; }
.guide__note { margin: 0; color: #9AA3B2; font-size: 14px; }
.guide__section.faq { max-width: none; margin: 0; padding: 22px 0 0; gap: 0; }

/* ---- Admin (Admin canvas) ------------------------------------------------- */

.admin { max-width: 1240px; width: 100%; margin: 0 auto; padding: 28px 24px 56px; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px; }
.admin__bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.badge { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: #D9A441; color: #0E1420; padding: 4px 8px; border-radius: 6px; font-weight: 600; }
.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-tab { color: #B9C0CC; text-decoration: none; border: 1px solid #1F2A3D; border-radius: 10px; padding: 10px 16px; }
.admin-tab[aria-current="page"] { background: #1F2A3D; color: #EDEAE2; border-color: #3A4760; font-weight: 600; }
.search { display: flex; gap: 12px; flex-wrap: wrap; }
.search input { font: inherit; flex: 1 1 280px; padding: 11px 13px; border: 1px solid #3A4760; border-radius: 10px; background: #0E1420; color: #EDEAE2; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { color: #B9C0CC; text-decoration: none; border: 1px solid #3A4760; border-radius: 999px; padding: 8px 14px; font-size: 14px; }
.filter[aria-current="true"] { background: #D9A441; color: #0E1420; border-color: #D9A441; font-weight: 600; }
.grid { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 900px; }
.grid thead tr { text-align: left; color: #7E889A; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; }
.grid th { padding: 14px 18px; border-bottom: 1px solid #26324A; }
.grid td { padding: 13px 18px; border-bottom: 1px solid #1F2A3D; color: #B9C0CC; overflow-wrap: anywhere; }
.grid td b { color: #EDEAE2; }
.grid .unreadable td { color: #F0C46E; }
.pill { border: 1px solid #3A4760; color: #B9C0CC; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pill--ok { background: #12302A; color: #7FCBB4; border-color: #2A5A4E; }
.pill--warn { background: #2A2111; color: #D9A441; border-color: #6B5530; }
.admin__count { margin: 0; color: #7E889A; font-size: 14px; }
.admin__person { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; overflow-wrap: anywhere; }
.admin__pills { display: flex; gap: 8px; align-items: center; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.activity { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; color: #B9C0CC; font-size: 14px; }
.request-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.request-row__main { display: flex; flex-direction: column; gap: 4px; flex: 1 1 360px; min-width: 0; overflow-wrap: anywhere; }
.request-row__name { font-size: 17px; }
.request-row__notes { margin: 0; line-height: 1.5; white-space: pre-wrap; }
.request-row__actions { display: flex; gap: 10px; }
.empty { margin: 0; background: #151D2C; border: 1px dashed #3A4760; border-radius: 14px; padding: 28px; text-align: center; color: #B9C0CC; }

/* ---- Narrow screens ------------------------------------------------------ */

@media (max-width: 480px) {
  /* `span 2` would add an implicit second column on a phone and push the
     page wider than the screen. */
  .site-footer__about { grid-column: auto; }
  .site-nav { gap: 16px; }
  .band__copy { padding: 28px; }
  .card { padding: 24px; }
  .hero, .request, .pilot, .band__card { grid-template-columns: minmax(0, 1fr); }
  .console-nav { flex-basis: 100%; border-right: 0; border-bottom: 1px solid #1F2A3D; }
  .console-main { padding: 24px 16px 48px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
}