/* Ported from GB AI Diagnosis (public/css/branded.css, live as of 25
   September 2026), which itself ported from GB Site (src/styles/tokens.css,
   fonts.css, Button.astro, InsightCard.astro). GB Site has no single file
   named branded.css; this is the destination filename each instrument uses
   for its own ported copy, per the standing rule that the live sibling file
   wins over any brief's description once it has drifted.

   Everything through the "Landing page" divider is carried over unchanged
   in tokens, geometry and treatment. The Opportunity Map's insight-card grid
   and its value/constraint/callout block variants are dropped, since Five
   Doors has neither a three-card grid nor those content shapes. The flow
   screens (door pick, follow-up, gate, reveal) below the second divider are
   net new: the Opportunity Map's own flow prototype used a disposable,
   unbranded stylesheet, so there was nothing to port for that part. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/archivo-latin.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: 'Archivo';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --colour-navy: #19234A;
  --colour-accent: #2F4F4F;
  --colour-muted: #696969;
  --colour-bg-light: #F5F6F8;
  --colour-bg-tint: #E8EBF0;
  --colour-white: #FFFFFF;
  --colour-level: #D4853A;

  --font-brand: 'Archivo', Arial, Helvetica, sans-serif;

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
}

.branded {
  font-family: var(--font-brand);
  background: var(--colour-bg-light);
  color: var(--colour-navy);
  min-height: 100vh;
  margin: 0;
}

.branded-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 4rem;
}

.branded-card {
  background: var(--colour-white);
  border: 1px solid var(--colour-bg-tint);
  border-radius: 0;
  padding: 2.5rem 2rem;
}

.branded-identity {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
}

.branded-logo {
  height: 28px; /* geometry, matches GB Site's nav__brand-logo */
  width: auto;
  margin-left: -6px;
}

.branded-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-sm);
}

.branded-header .branded-eyebrow {
  margin: 0;
}

.branded-hint {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--colour-muted);
  margin: var(--space-sm) 0 0;
}

.branded-eyebrow {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-accent);
  margin: 0 0 var(--space-sm);
}

.branded-heading {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--colour-navy);
  margin: 0 0 var(--space-lg);
}

.branded-body {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--colour-navy);
}

.branded-next-line {
  font-size: 0.9375rem;
  color: var(--colour-muted);
  margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
}

.branded-block {
  margin-bottom: 1.75rem;
}

.branded-block p {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--colour-navy);
  margin: 0 0 var(--space-md);
}

.branded-block p:last-child {
  margin-bottom: 0;
}

/* Lead treatment, ported from the Opportunity Map's report page (the
   opening/start blocks). Reused here for the write-up's `move` paragraph,
   the one piece the reveal screen sets apart from the surrounding prose,
   per Component 2 section 6. */
.branded-block--lead p {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--colour-accent);
}

/* The write-up's `move` paragraph: the live Opportunity Map report only
   combines the lead type treatment above with a background tint on its
   single most commercially important paragraph (the "start" field). This
   pairs the same two treatments for the equivalent paragraph here. */
.branded-block--move {
  padding: var(--space-md) var(--space-lg);
  margin: 0 calc(-1 * var(--space-md)) 1.75rem;
  background: color-mix(in srgb, var(--colour-level) 5%, var(--colour-white));
}

.branded-message {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--colour-muted);
  margin: 0;
}

/* Waiting-state indicator only. Functional, not decorative motion. */
.branded-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--colour-bg-tint);
  border-top-color: var(--colour-accent);
  border-radius: 50%;
  margin: 0 0 var(--space-md);
  animation: branded-spin 800ms linear infinite;
}

@keyframes branded-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .branded-spinner {
    animation: none;
  }
}

/* Form field, gate page */
.branded-field {
  margin: 0 0 var(--space-lg);
}

.branded-field label {
  display: block;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--colour-navy);
  margin: 0 0 var(--space-xs);
}

.branded-field input[type="email"],
.branded-field textarea {
  display: block;
  width: 100%;
  font-family: var(--font-brand);
  font-size: 1rem;
  color: var(--colour-navy);
  background: var(--colour-white);
  border: 1px solid var(--colour-bg-tint);
  border-radius: 0;
  padding: var(--space-sm) var(--space-md);
  box-sizing: border-box;
}

.branded-field textarea {
  resize: vertical;
  min-height: 7.5rem;
  line-height: 1.6;
  font-weight: 400;
}

.branded-field input[type="email"]:focus,
.branded-field textarea:focus {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

.branded-note {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--colour-level);
  margin: var(--space-sm) 0 0;
}

.branded-note[hidden] {
  display: none;
}

/* Primary button, ported from GB Site Button.astro .btn--primary */
.branded-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--colour-navy);
  border-radius: 0;
  padding: var(--space-sm) var(--space-lg);
  background: var(--colour-navy);
  color: var(--colour-white);
  transition: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.branded-btn:hover {
  background: color-mix(in srgb, var(--colour-navy) 82%, var(--colour-accent));
  border-color: color-mix(in srgb, var(--colour-navy) 82%, var(--colour-accent));
}

.branded-btn:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

.branded-btn:disabled {
  cursor: not-allowed;
  background: var(--colour-muted);
  border-color: var(--colour-muted);
}

.branded-btn:disabled:hover {
  background: var(--colour-muted);
  border-color: var(--colour-muted);
}

.branded-btn--compact {
  font-size: 0.875rem;
  padding: var(--space-xs) var(--space-md);
}

.branded-fineprint {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--colour-muted);
  margin: var(--space-md) 0 0;
}

/* Inverse button, for use on navy surfaces. Combine with .branded-btn for
   shared padding/geometry/transitions: class="branded-btn branded-btn--inverse". */
.branded-btn--inverse {
  background: var(--colour-white);
  border-color: var(--colour-white);
  color: var(--colour-navy);
}

.branded-btn--inverse:hover {
  background: color-mix(in srgb, var(--colour-white) 82%, var(--colour-navy));
  border-color: color-mix(in srgb, var(--colour-white) 82%, var(--colour-navy));
}

.branded-btn--secondary {
  background: transparent;
  border-color: var(--colour-bg-tint);
  color: var(--colour-navy);
}

.branded-btn--secondary:hover {
  background: var(--colour-bg-tint);
  border-color: var(--colour-bg-tint);
}

/* ==========================================================================
   Landing page. Full-width marketing page furniture, ported unchanged.
   A couple of fixed macro spacing steps, since the flow screens below use
   the card shell's fixed scale, not a fluid one. */

:root {
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --container-max: 1120px;
}

.lp-page {
  font-family: var(--font-brand);
  background: var(--colour-white);
  color: var(--colour-navy);
  margin: 0;
}

.lp-topbar {
  border-bottom: 1px solid var(--colour-bg-tint);
}

.lp-topbar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
}

.lp-logo {
  height: 28px;
  width: auto;
  display: block;
}

.lp-section {
  padding: var(--space-3xl) var(--space-lg);
}

.lp-section--tint {
  background: var(--colour-bg-tint);
}

.lp-section__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.lp-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.lp-hero__title {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--colour-navy);
  max-width: 22ch;
  margin: 0;
}

@media (min-width: 768px) {
  .lp-hero__title {
    font-size: 2.75rem;
  }
}

.lp-lead {
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--colour-accent);
  max-width: 60ch;
  margin: 0;
}

.lp-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-xs);
}

.lp-friction {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--colour-muted);
  margin: 0;
}

.lp-heading {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--colour-navy);
  max-width: 32ch;
  margin: 0 0 var(--space-md);
}

@media (min-width: 768px) {
  .lp-heading {
    font-size: 1.875rem;
  }
}

.lp-body {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--colour-navy);
  max-width: 65ch;
  margin: 0;
}

.lp-intro {
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--colour-navy);
  margin: 0 0 var(--space-lg);
}

/* Numbered "how it works" list. Net new: the Opportunity Map's landing page
   used a three-card grid for a different content shape (value props, not
   sequential steps), so there was nothing to port for this pattern. Built
   from the same tokens and geometry as everything else on this page. */
.lp-steps {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .lp-steps {
    flex-direction: row;
  }

  .lp-steps__item {
    flex: 1;
  }
}

.lp-steps__item {
  display: flex;
  gap: var(--space-md);
}

.lp-steps__number {
  flex: 0 0 auto;
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.1875rem;
  color: var(--colour-accent);
}

.lp-steps__body h3 {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--colour-navy);
  margin: 0 0 var(--space-xs);
}

.lp-steps__body p {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--colour-muted);
  margin: 0;
}

/* Closing band surface: solid navy background, white heading, body and
   friction-line text at reduced opacity against navy. */
.branded-band--inverse {
  background: var(--colour-navy);
  color: var(--colour-white);
}

.branded-band--inverse .branded-eyebrow {
  color: var(--colour-white);
}

.branded-band--inverse .lp-heading {
  color: var(--colour-white);
}

.branded-band--inverse .lp-body {
  color: color-mix(in srgb, var(--colour-white) 75%, transparent);
}

.branded-band--inverse .lp-friction {
  color: color-mix(in srgb, var(--colour-white) 60%, transparent);
}

.lp-footer {
  background: var(--colour-navy);
  border-top: 1px solid color-mix(in srgb, var(--colour-white) 20%, transparent);
}

.lp-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

.lp-footer__logo {
  height: 24px;
  width: auto;
}

.lp-footer a {
  color: color-mix(in srgb, var(--colour-white) 75%, transparent);
  text-decoration: none;
}

.lp-footer a:hover {
  color: var(--colour-white);
}

.lp-footer__copy {
  font-weight: 400;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--colour-white) 60%, transparent);
  margin: 0;
}

/* ==========================================================================
   Flow screens (door pick, follow-up, gate, reveal). Net new: the
   Opportunity Map's own 8-screen flow prototype ran on a disposable,
   unbranded stylesheet, so none of this had an equivalent to port. Built
   from the same tokens, geometry and card shell as the sections above. */

.branded-progress {
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--colour-muted);
  margin: 0 0 var(--space-md);
}

.branded-options {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.branded-option {
  display: block;
  position: relative;
}

.branded-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.branded-option label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 1rem;
  color: var(--colour-navy);
  background: var(--colour-white);
  border: 1px solid var(--colour-bg-tint);
  padding: var(--space-md);
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.branded-option input:checked + label {
  border-color: var(--colour-navy);
  background: color-mix(in srgb, var(--colour-navy) 5%, var(--colour-white));
}

.branded-option input:focus-visible + label {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

.branded-option__mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--colour-muted);
  background: var(--colour-white);
}

.branded-option input[type="radio"] + label .branded-option__mark {
  border-radius: 50%;
}

.branded-option input:checked + label .branded-option__mark {
  background: var(--colour-navy);
  border-color: var(--colour-navy);
  box-shadow: inset 0 0 0 3px var(--colour-white);
}

.branded-quiet-link {
  display: inline-block;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--colour-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.branded-quiet-link:hover,
.branded-quiet-link:focus-visible {
  color: var(--colour-navy);
}

.branded-nudge {
  border: 1px solid var(--colour-bg-tint);
  background: var(--colour-bg-light);
  padding: var(--space-md);
  margin: 0 0 var(--space-lg);
}

.branded-nudge p {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--colour-navy);
  margin: 0 0 var(--space-sm);
}

.branded-nudge__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}