/* ─────────────────────────────────────────────────────────────
   FIELD REPORT — MARKETING SITE (retro console skin, 2026-09-02)
   Shared by index, privacy, terms, delete-account, 404.
   Tokens come from tokens/field-report-tokens.css.
   The six hardware treatments below match the mobile handoff README
   and field-report-web/src/index.css exactly — change them there first.
   ───────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fr-bg); font-family: var(--fr-sans); color: var(--fr-ink); -webkit-font-smoothing: antialiased; }
a { color: var(--fr-accent); text-decoration: none; }
a:hover { color: var(--fr-accent-deep); }
:focus-visible { outline: 2px solid var(--fr-led-blue); outline-offset: 2px; }

.fr-wrap { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.fr-eyebrow { font-family: var(--fr-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fr-accent); }
.fr-meta { font-family: var(--fr-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fr-ink-faint); }

/* 1. Console housing */
.fr-housing {
  background: linear-gradient(180deg, var(--fr-housing-top) 0%, var(--fr-housing-mid) 60%, var(--fr-housing-bot) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12);
  color: #fff;
}
.fr-housing--hero {
  border-radius: 16px 16px 30px 16px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), inset 0 -6px 12px rgba(0,0,0,.5), 0 10px 22px rgba(15,23,42,.3);
}
.fr-housing--panel {
  border-radius: 20px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), inset 0 -4px 10px rgba(0,0,0,.4), 0 6px 16px rgba(15,23,42,.22);
}

/* Service stripes — 3px gold over 3px blue (the console signature) */
.fr-stripes { height: 6px; background: linear-gradient(180deg, var(--fr-gold) 0 50%, var(--fr-accent) 50% 100%); }

/* Masthead — housing with the stripes drawn beneath it */
.fr-masthead {
  position: relative; z-index: 2;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 3px 0 var(--fr-gold), 0 6px 0 var(--fr-accent), 0 10px 18px rgba(15,23,42,.25);
}
.fr-masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; flex-wrap: wrap; }
.fr-masthead__nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.fr-nav-lk { font-family: var(--fr-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(226,232,240,.72); transition: color .15s ease; }
.fr-nav-lk:hover { color: #fff; }

/* 2. Arcade key — dark well wrapping a domed gradient face (two-layer markup) */
.fr-key {
  display: inline-flex; padding: 3px; border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--fr-well);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.35), 0 4px 8px rgba(15,23,42,.4);
  font: inherit; text-decoration: none; vertical-align: middle;
}
.fr-key__face {
  position: relative; display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 9999px; cursor: pointer;
  padding: 12px 24px; font-family: var(--fr-sans); font-weight: 700; font-size: 15px; line-height: 1; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg, var(--fr-key-top) 0%, var(--fr-key-mid) 55%, var(--fr-key-bot) 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,.32), inset 0 -3px 5px rgba(0,0,0,.42);
  transition: transform .08s ease, filter .12s ease;
}
.fr-key__face::before { content: ""; position: absolute; top: 3px; left: 14px; right: 14px; height: 7px; border-radius: 5px; background: rgba(255,255,255,.2); pointer-events: none; }
.fr-key__face > * { position: relative; }
.fr-key--sm .fr-key__face { padding: 9px 17px; font-size: 13px; gap: 8px; }
.fr-key--lg .fr-key__face { padding: 15px 28px; font-size: 15px; }
.fr-key:hover .fr-key__face { filter: brightness(1.06); color: #fff; }
.fr-key:active .fr-key__face, .fr-key .fr-key__face:active { transform: translateY(1px); }
.fr-key:active .fr-key__face::before, .fr-key .fr-key__face:active::before { background: rgba(255,255,255,.12); }
.fr-key__face:disabled { opacity: .6; cursor: default; }
.fr-key svg { flex-shrink: 0; }

/* 3. Domed round key (department numbers) */
.fr-dome {
  position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, var(--fr-key-top), var(--fr-key-mid) 58%, var(--fr-key-bot));
  box-shadow: 0 0 0 3px var(--fr-well), inset 0 2px 2px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.4), 0 4px 8px rgba(15,23,42,.35);
  font-family: var(--fr-mono); font-weight: 700; font-size: 15px; color: #fff;
}

/* 5. LED — always sits next to a text label, never hue-only */
.fr-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fr-led--green { background: var(--fr-led-green); box-shadow: 0 0 6px rgba(34,197,94,.8); }
.fr-led--amber { background: var(--fr-led-amber); box-shadow: 0 0 6px rgba(232,181,79,.85); }
.fr-led--blue  { background: var(--fr-led-blue);  box-shadow: 0 0 6px rgba(120,170,235,.8); }
.fr-led--red   { background: var(--fr-led-red);   box-shadow: 0 0 6px rgba(220,38,38,.8); }

/* 6. LCD — key moments only (spec readout, form confirmation) */
.fr-lcd {
  position: relative; border-radius: 8px; padding: 14px 18px; font-family: var(--fr-mono); color: var(--fr-lcd-ink);
  background-color: var(--fr-lcd);
  background-image: repeating-linear-gradient(rgba(15,23,42,.1) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.4);
}
.fr-lcd--vignette {
  background-image: radial-gradient(circle at 50% 40%, transparent 55%, rgba(15,23,42,.18)), repeating-linear-gradient(rgba(15,23,42,.1) 0 1px, transparent 1px 3px);
}
.fr-lcd__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(37,48,31,.16); }
.fr-lcd__row:last-child { border-bottom: 0; }
.fr-lcd__row span:first-child { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fr-lcd-ink-muted); white-space: nowrap; }
.fr-lcd__row span:last-child { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--fr-lcd-ink); text-align: right; }

/* Flat ghost button — everything that is not a commit action */
.fr-btn-flat {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; border-radius: 9999px;
  background: var(--fr-paper); border: 1px solid var(--fr-rule-strong); color: var(--fr-ink);
  font-family: var(--fr-mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: var(--fr-shadow-soft); transition: border-color .15s ease, color .15s ease;
}
.fr-btn-flat:hover { border-color: var(--fr-accent); color: var(--fr-accent); }

/* Form fields on a housing — recessed like a control track */
.fr-field { display: flex; flex-direction: column; gap: 7px; }
.fr-field label { font-family: var(--fr-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(226,232,240,.62); }
.fr-field input, .fr-field textarea {
  font-family: var(--fr-sans); font-size: 15px; color: #fff; width: 100%; box-sizing: border-box; outline: none;
  background: var(--fr-track); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 12px 13px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.12);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fr-field textarea { resize: vertical; min-height: 84px; }
.fr-field input:focus, .fr-field textarea:focus { border-color: var(--fr-led-blue); box-shadow: inset 0 2px 4px rgba(0,0,0,.55), 0 0 0 3px rgba(156,192,240,.25); }
.fr-field input::placeholder, .fr-field textarea::placeholder { color: rgba(226,232,240,.28); }
.fr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Footer — ink band, service stripes on its top edge */
.fr-footer { background: var(--fr-ink); border-top: 3px solid var(--fr-accent); box-shadow: inset 0 3px 0 var(--fr-gold); }
.fr-footer__inner { max-width: 1080px; margin: 0 auto; padding: 56px 40px 48px; }
.fr-f-lk { color: rgba(226,232,240,.74); transition: color .15s ease; }
.fr-f-lk:hover { color: var(--fr-gold-soft); }
.fr-f-so { color: rgba(226,232,240,.74); border: 1px solid rgba(255,255,255,.17); transition: border-color .15s ease, color .15s ease; }
.fr-f-so:hover { border-color: var(--fr-gold-soft); color: var(--fr-gold-soft); }

/* Legal body */
.fr-legal { max-width: 760px; margin: 0 auto; padding: 56px 40px 80px; font-size: 16px; line-height: 1.65; color: var(--fr-ink-mute); }
.fr-legal h1 { font-family: var(--fr-sans); font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1.06; letter-spacing: -.03em; color: var(--fr-ink); margin: 0 0 8px; }
.fr-legal h2 { font-family: var(--fr-sans); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--fr-ink); margin: 40px 0 12px; padding-top: 20px; border-top: 1px solid var(--fr-rule); }
.fr-legal h3 { font-family: var(--fr-sans); font-weight: 600; font-size: 17px; color: var(--fr-ink); margin: 22px 0 8px; }
.fr-legal p, .fr-legal li { margin: 0 0 12px; }
.fr-legal ul, .fr-legal ol { padding-left: 22px; }
.fr-legal strong { color: var(--fr-ink); font-weight: 600; }
.fr-legal .effective-date { font-family: var(--fr-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fr-ink-faint); margin: 0 0 28px; }
.fr-legal .intro { font-size: 17px; color: var(--fr-ink); }
.fr-legal a { color: var(--fr-accent); }

/* Contact modal — console dialog (slate strip + stripes head, paper body) */
.fr-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 50; }
.fr-modal-overlay.open { display: flex; }
.fr-modal { position: relative; width: 100%; max-width: 520px; background: var(--fr-paper); border-radius: 12px; box-shadow: var(--fr-shadow-drop); max-height: calc(100vh - 48px); overflow-y: auto; }
.fr-modal__head { position: relative; z-index: 1; padding: 14px 44px 14px 20px; margin-bottom: 6px; border-radius: 12px 12px 0 0; color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 3px 0 var(--fr-gold), 0 6px 0 var(--fr-accent); }
.fr-modal__head h2 { margin: 0; font-family: var(--fr-sans); font-size: 16px; font-weight: 600; color: #fff; }
.fr-modal__head .subtitle { margin: 3px 0 0; font-size: 12.5px; color: rgba(203,213,225,.72); }
.fr-modal__close { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: rgba(203,213,225,.72); font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.fr-modal__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.fr-modal__body { padding: 18px 20px 22px; }
.fr-modal__body .contact-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fr-modal__body label { font-family: var(--fr-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fr-ink-faint); }
.fr-modal__body input, .fr-modal__body textarea { font-family: var(--fr-sans); font-size: 15px; color: var(--fr-ink); background: #fff; border: 1px solid var(--fr-rule-strong); border-radius: 8px; padding: 11px 12px; width: 100%; box-sizing: border-box; outline: none; }
.fr-modal__body input:focus, .fr-modal__body textarea:focus { border-color: var(--fr-accent); box-shadow: 0 0 0 3px rgba(30,77,143,.15); }
.fr-modal__body input.error, .fr-modal__body textarea.error { border-color: var(--fr-error); }
.fr-modal__body .error-msg { display: none; color: var(--fr-error-fg); font-size: 12.5px; }
.fr-modal__body .contact-error-banner { display: none; background: var(--fr-error-bg); color: var(--fr-error-fg); border: 1px solid #FCA5A5; border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.fr-modal__body textarea { min-height: 96px; resize: vertical; }
.fr-modal .contact-success { padding: 36px 20px; text-align: center; }
.fr-modal .contact-success .checkmark { width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: var(--fr-success); color: #fff; font-size: 24px; }
.fr-modal .contact-success h3 { margin: 0 0 6px; font-size: 20px; color: var(--fr-ink); }
.fr-modal .contact-success p { margin: 0; color: var(--fr-ink-mute); }

/* Responsive */
@media (max-width: 640px) {
  .fr-wrap { padding: 0 20px; }
  .fr-footer__inner { padding: 44px 20px 40px; }
  .fr-legal { padding: 40px 20px 64px; }
}