/* SectorBrief marketing landing. Standalone stylesheet sharing the
   product's token values (deep-blue field, slate panels, Georgia
   mastheads, masthead gold, azure text accent) so the page reads as the
   product, not as a template about it. The signature element is the memo
   itself: real renderer output on light "paper" over the dark desk. */

/* Self-hosted brand fonts (2026-07-16, owner pick round 3 option 1): Lora
   (Tiempos-class editorial serif, single-stroke dollar) + Libre Franklin (body). Variable woff2,
   latin subset, same-origin (CSP font-src 'self'). */
@font-face {
  font-family: "Lora";
  src: url("fonts/lora.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("fonts/libre-franklin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Dark-only page: native scrollbars render dark (the light memo paper
     inside keeps its own custom light thumbs below). */
  color-scheme: dark;
  /* Darkened a step (owner 2026-07-11) so card text reads more easily. */
  --field-a: #030A16;
  --field-b: #051428;
  --slate: #0D1B2A;
  --slate-2: #122537;
  --ink-on-dark: #EDF2F7;
  --body-on-dark: #C3D0DE;
  --muted-on-dark: #8494A6;
  --hairline-dark: #22344A;
  --azure: #82A8D3;
  --gold: #E4B95B;
  --paper: #FFFFFE;
  /* Brand logo tile: one fixed blue for the "SB" square, shared with the
     portal (styles.css --brand-logo) and the favicon hex (#0F2D52). */
  --brand-logo: #0F2D52;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Consolas", "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

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

/* Root scrollbar in the site's own palette (owner 2026-07-16): track sits
   between the field gradient stops, thumb is the hairline navy. Scoped to
   html so the light memo/sample thumbs below keep their own styling.
   scrollbar-color covers Firefox; the -webkit rules cover Chromium/Safari
   (Chromium ignores scrollbar-color when -webkit-scrollbar is styled). */
html {
  scrollbar-color: var(--hairline-dark) #040D1B;
}
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: #040D1B; }
html::-webkit-scrollbar-thumb {
  background: var(--hairline-dark);
  border-radius: 6px;
  border: 2px solid #040D1B;
}
html::-webkit-scrollbar-thumb:hover { background: #31486A; }

body {
  margin: 0;
  background: linear-gradient(180deg, var(--field-a) 0%, var(--field-b) 100%);
  background-attachment: fixed;
  color: var(--body-on-dark);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------- brand field ----------------------------- */
.field {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.field-map { display: block; width: 100%; height: 100%; }
#lp-dots circle { fill: #3D7BB8; }
.field-scan {
  position: absolute;
  top: 0; bottom: 0; left: -2px;
  width: 1.5px;
  background: rgba(122, 184, 255, 0.5);
  box-shadow: 0 0 7px 1.5px rgba(122, 184, 255, 0.18);
  opacity: 0;
  will-change: transform, opacity;
}
.field-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(150, 192, 236, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 192, 236, 0.07) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Cursor spotlight, SUBTLER than the portal's (owner 2026-07-08): smaller
   window, dimmer reveal. Same flashlight construction: the window and its
   full-viewport contents carry inverse composited transforms. */
.field-spot {
  position: absolute;
  top: 0; left: 0;
  width: 340px; height: 340px;
  border-radius: 50%;
  overflow: hidden;
  transform: translate(-1000px, -1000px);
  will-change: transform;
  -webkit-mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.35) 60%, transparent 100%);
}
.field-spot-inner {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  transform: translate(1000px, 1000px);
  will-change: transform;
}
.field-grid-hi {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(150, 192, 236, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 192, 236, 0.16) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* -------------------------------- nav ---------------------------------- */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  /* Brand logo tile: one fixed blue everywhere, matching the portal
     (styles.css --brand-logo) and the favicon (#2A72CE). */
  background: var(--brand-logo);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: #FFFFFF;
}
.nav-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-on-dark);
  letter-spacing: 0.01em;
}
.nav-signin {
  font-size: 13px;
  font-weight: 600;
  color: var(--body-on-dark);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
}
.nav-signin:hover { border-color: rgba(255, 255, 255, 0.45); }

/* ------------------------------- kickers ------------------------------- */
/* The memo's own section vocabulary, reused as the page's structure. */
.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hairline-dark);
}

/* -------------------------------- hero --------------------------------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 26fr);
  gap: 56px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px 40px;
}
.hero-copy { padding-top: 34px; }
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.12;
  font-weight: 700;
  color: var(--ink-on-dark);
  letter-spacing: 0.005em;
}
.hero-sub {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--gold);
}
.hero-lede {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: 17px;
  color: var(--body-on-dark);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.hero-trust {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted-on-dark);
}

.btn-primary {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 9px;
  background: linear-gradient(180deg, #2A4C71, #1F3C5C);
  border: 1px solid #3E5C7E;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.34);
}
.btn-primary:hover { background: linear-gradient(180deg, #33587F, #2A4C71); }
.btn-ghost {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 9px;
  border: 1px solid var(--azure);
  background: rgba(255, 255, 255, 0.06);
  color: var(--azure);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.btn-ghost:hover { border-color: var(--azure); background: rgba(255, 255, 255, 0.09); }

a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--azure);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------- the memo, as paper -------------------------- */
.hero-memo { min-width: 0; cursor: pointer; }
.memo-paper {
  position: relative;
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  /* The memo renderer emits var()-based colors; resolve them to the
     product's LIGHT theme here so the artifact matches the real email. */
  --ink: #1A1D23;
  --ink-body: #33373D;
  --muted: #5B6470;
  --hairline: #E4E7EC;
  --accent: #10457E;
  --policy: #B45309;
  --policy-tint: #FBF1E4;
  --policy-line: #EAD6BC;
  --gain: #157347;
  --loss: #B42318;
  --surface: #FFFFFE;
}
@media (prefers-reduced-motion: no-preference) {
  .memo-paper {
    animation: paperRise 0.9s cubic-bezier(0.3, 0.7, 0.3, 1) both;
    animation-delay: 0.15s;
  }
  @keyframes paperRise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
/* The sample tag sits ABOVE the paper (owner 2026-07-08: inside the
   sheet it clipped against the top edge), gold-on-dark like a kicker. */
.memo-sample-tag {
  display: block;
  text-align: right;
  margin: 0 2px 8px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
/* The report scrolls inside its frame (owner 2026-07-08). */
.memo-scroll {
  max-height: 640px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #C6CDD6 transparent;
}
.memo-scroll::-webkit-scrollbar { width: 8px; }
.memo-scroll::-webkit-scrollbar-thumb { background: #C6CDD6; border-radius: 4px; }
.memo-scroll::-webkit-scrollbar-track { background: transparent; }
.memo-fade {
  position: absolute;
  left: 0; right: 10px; bottom: 0;
  height: 70px;
  background: linear-gradient(180deg, rgba(255, 255, 254, 0) 0%, rgba(255, 255, 254, 0.92) 82%);
  pointer-events: none;
  border-radius: 0 0 6px 6px;
}

/* -------------------------------- bands -------------------------------- */
.band {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px 0;
}
.band h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink-on-dark);
}
.band p { margin: 0; }

.sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px 36px;
}
.sections-grid p { font-size: 15px; color: var(--body-on-dark); }

/* --------------------------- sample overlay ---------------------------- */
.sample-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  /* Backdrop fades in/out in step with the card's grow/shrink (JS FLIP). */
  background: rgba(3, 8, 18, 0);
  transition: background-color 0.42s ease;
}
.sample-modal.is-open {
  background: rgba(3, 8, 18, 0.74);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sample-modal[hidden] { display: none; }
/* The toolbar and the memo card are SEPARATE, stacked in a shell: the bar
   floats ABOVE the memo so the memo card keeps a constant shape that matches
   the hero preview. Only the memo card does the FLIP grow/shrink; the bar just
   fades + slides, so the memo never changes shape on open/close. */
.sample-modal-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  /* Reading width (owner-tuned). Height is viewport-bound (flex:1), so width is
     independent of it. 550px matched the hero paper's aspect exactly (clean
     merge-back) but read too narrow; 680px is a comfortable reading pane at the
     same height. Trade-off: wider than ~550 means the uniform-scale FLIP is
     width-limited on close, so the merge-back lands a little short of the hero's
     height. Owner accepted that for the wider read. */
  width: min(680px, 100%);
  max-height: 100%;
}
.sample-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #FFFFFE;
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  will-change: transform;
  /* LIGHT memo tokens (same set as .memo-paper) so the renderer resolves. */
  --ink: #1A1D23; --ink-body: #33373D; --muted: #5B6470; --hairline: #E4E7EC;
  --accent: #10457E; --policy: #B45309; --policy-tint: #FBF1E4;
  --policy-line: #EAD6BC; --gain: #157347; --loss: #B42318; --surface: #FFFFFE;
}
.sample-modal-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 12px 9px 16px;
  border: 1px solid #E6E9EE;
  border-radius: 12px;
  background: #F7F8FA;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  /* Floats above the memo; fades + slides. No delay when CLOSING (this base
     rule) so it leaves immediately as the card shrinks; a delay on the is-open
     rule holds it back until the card has grown into place, so it never floats
     disconnected while the card is still flying. */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.26s ease;
}
.sample-modal.is-open .sample-modal-bar {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}
.sample-modal-tag {
  margin-right: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6B7280;
}
.sample-zoom { display: inline-flex; align-items: center; gap: 7px; }
.sample-zoom button {
  width: 28px;
  height: 28px;
  border: 1px solid #D3D8E0;
  background: #fff;
  border-radius: 7px;
  color: #1A1D23;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.sample-zoom button:hover { background: #EEF1F5; }
.sample-zoom-level { font-size: 12px; color: #5B6470; min-width: 40px; text-align: center; }
.sample-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #5B6470;
  font-size: 24px;
  line-height: 1;
  border-radius: 7px;
  cursor: pointer;
}
.sample-modal-close:hover { background: #ECEEF2; color: #1A1D23; }
.sample-modal-scroll {
  flex: 1;
  min-height: 0; /* fill the freed space as the toolbar collapses */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #C6CDD6 transparent;
  background: #FFFFFE;
}
.sample-modal-scroll::-webkit-scrollbar { width: 9px; }
.sample-modal-scroll::-webkit-scrollbar-thumb { background: #C6CDD6; border-radius: 4px; }
#sample-modal-memo { zoom: var(--sample-zoom, 1); }

/* ------------------------------ configure ------------------------------ */
/* Presented as a stack of labeled, filled-in fields so it reads as
   configuration the user provides, not a static list. */
.band .config-lede {
  margin: 0 0 40px; /* beats .band p { margin: 0 } */
  font-size: 16px;
  line-height: 1.55;
  color: var(--body-on-dark);
  /* Spans the full band (owner 2026-07-11): the lede grew to two sentences,
     so it uses the band's width on wide screens instead of a 660px column. */
}
.config-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* The whole row is the field box now: the background sits behind the label on
   the left as well as the example value. */
.config-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
  background: rgba(13, 27, 42, 0.82);
  border: 1px solid var(--hairline-dark);
  border-radius: 8px;
  padding: 12px 16px;
}
.config-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azure);
}
.config-example {
  font-size: 14px;
  line-height: 1.4;
  color: var(--body-on-dark);
}

/* ------------------------ process flow (configure) ----------------------- */
/* How a brief gets built, inputs -> inbox: numbered step boxes connected by
   gold chevrons. Step 1 embeds the fillable config rows; step 3 shows sample
   score chips (one dimmed and struck: below the cut). */
.flow {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
}
.flow-step {
  background: rgba(13, 27, 42, 0.82);
  border: 1px solid var(--hairline-dark);
  border-radius: 10px;
  padding: 16px 20px 18px;
}
.flow-step .config-list { margin-top: 12px; }
.flow-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flow-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.flow-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: #EDF2F7;
  letter-spacing: 0.01em;
}
.flow-copy {
  margin: 7px 0 0 38px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body-on-dark);
}
.flow-chips {
  display: inline-flex;
  gap: 7px;
  margin-left: auto;
  /* Nudged up so the chips sit clear of the copy line below. */
  transform: translateY(-3px);
}
.flow-chip {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold);
  border: 1px solid rgba(228, 185, 91, 0.55);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.flow-chip-cut {
  color: #5B6B7E;
  border-color: rgba(91, 107, 126, 0.5);
  text-decoration: line-through;
}
/* ---------------------------- legal pages ------------------------------ */
/* Terms of Service and Privacy Policy: a readable single column in the
   landing's design language. */
.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 24px 70px;
}
.legal h1 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--ink-on-dark);
  letter-spacing: 0.01em;
}
.legal-date {
  margin: 0 0 30px;
  font-size: 13px;
  color: var(--muted-on-dark);
}
.legal h2 {
  margin: 32px 0 10px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.01em;
}
.legal p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--body-on-dark);
}
.legal a { color: var(--azure); }

.flow-arrow {
  align-self: center;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  opacity: 0.75;
  margin: 12px 0 14px;
}
@media (max-width: 620px) {
  .flow-chips { margin-left: 38px; width: 100%; }
  .flow-copy { margin-left: 0; }
}

/* ------------------------------- pricing ------------------------------- */
.price-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
  margin-top: 30px; /* wider gap below the Pricing headline */
}
.band-pricing .price-card {
  flex: 1 1 240px;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  background: rgba(13, 27, 42, 0.82);
  border: 1px solid var(--hairline-dark);
  border-radius: 14px;
  padding: 26px 30px 30px;
}
.price-card-featured { border-color: var(--gold); }
.price-name {
  margin: 0 0 12px;
  min-height: 22px; /* reserve the badge's height so all 3 name rows align */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #1B1206;
  background: var(--gold);
  border-radius: 999px;
  padding: 3px 9px;
}
.price-feature {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body-on-dark);
}
.price-card .btn-primary { margin-top: auto; text-align: center; }
.price-line { display: flex; align-items: baseline; gap: 8px; }
.price-figure {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 700;
  color: var(--ink-on-dark);
}
.price-unit { font-size: 16px; color: var(--muted-on-dark); }
.price-terms {
  margin: 10px 0 22px !important;
  font-size: 14px;
  color: var(--body-on-dark);
}

/* --------------------------------- faq --------------------------------- */
.band-faq details {
  border-bottom: 1px solid var(--hairline-dark);
  padding: 4px 2px;
}
.band-faq summary {
  cursor: pointer;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-on-dark);
  list-style-position: outside;
}
.band-faq details p {
  margin: 0 0 16px;
  max-width: 68ch;
  font-size: 15px;
  color: var(--body-on-dark);
}

/* ------------------------------ final cta ------------------------------ */
.band-final {
  text-align: center;
  padding-bottom: 8px;
}
.band-final h2 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--ink-on-dark);
}

/* -------------------------------- footer ------------------------------- */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px 36px;
  font-size: 13px;
  color: var(--muted-on-dark);
}
.footer a {
  color: var(--muted-on-dark);
  text-decoration: none;
  margin-left: 18px;
}
.footer a:hover { color: var(--azure); }

/* ------------------------------ responsive ----------------------------- */
@media (max-width: 940px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 28px;
  }
  .hero-copy { padding-top: 0; }
  .memo-paper { max-height: 520px; }
  .config-row { grid-template-columns: 1fr; gap: 4px; }
}