/* ─────────────────────────────────────────────────────────────────────────
   styles.brand2.css — the Branding 2.0 identity, applied to the same pages.

   Source: branding2.0/sekura-branding-2-handoff.zip → project/Sekura Deck.html
   and project/Sekura Logo Directions.html. That bundle is the house system:
   cream ground, forest surfaces, coral accent, Inter Tight for everything
   structural, JetBrains Mono for eyebrows / figures / chips, Fraunces italic
   as the one expressive face, 16px radii and 1.5px borders.

   It loads as a second layer over styles.home.css rather than replacing it,
   so the page structure, spacing rhythm and responsive behaviour are shared
   and only the identity differs. Almost everything here is a token
   redefinition; the handful of real rules below are the places where the two
   systems disagree about form rather than colour — border weight, corner
   radius, and the eyebrow being mono rather than uppercase sans.

   Applied by app/page.jsx as `.ah.b2` when ?brand=2 is present.
   ───────────────────────────────────────────────────────────────────────── */

.ah.b2 {
  /* Inter Tight, JetBrains Mono and Fraunces are already loaded in
     index.template.html for the rest of the site. */
  --ah-display: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --ah-text: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --ah-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --ah-serif: 'Fraunces', Georgia, serif;

  /* palette — remapped to Apple-white (was the Branding-2.0 cream/forest/coral
     deck). The 1217 essay is the only .ah.b2 page; this brings it onto the
     same white system as the rest of the site. Dark full-bleed bands in the
     deck now read as ink rather than forest. */
  --ah-ground: #ffffff;
  --ah-tint: #f5f5f7;
  --ah-panel: #ffffff;
  --ah-ink: #1d1d1f;
  --ah-ink-2: #6e6e73;
  --ah-ink-3: #86868b;
  --ah-hair: #d2d2d7;
  --ah-hair-2: #e8e8ed;
  --ah-on-ink: #ffffff;

  --ah-forest: #1d1d1f;
  --ah-forest-deep: #1d1d1f;
  --ah-coral: #0071e3;
  --ah-orange: #0071e3;

  --ah-blue: #0071e3;
  --ah-link: #0066cc;

  /* Signal colours for the asymmetry chart, on white. */
  --ah-rise: #0071e3;
  --ah-flat: #86868b;

  /* Deck uses 1.5px borders and a 16px radius throughout. */
  --ah-bw: 1.5px;
  --ah-r: 16px;

  --ah-yes: #1d1d1f;
  --ah-meter: #0071e3;
}

/* ─── type: Inter Tight wants far tighter tracking than SF Pro ───────────
   The deck sets -0.025em on titles and -0.04em on the wordmark. Carrying the
   SF Pro values (-0.005em) over would leave the headlines looking loose. */
.ah.b2 .ah-h1 { letter-spacing: -0.035em; line-height: 1.02; }
.ah.b2 .ah-h2 { letter-spacing: -0.028em; line-height: 1.04; }
.ah.b2 .ah-h3 { letter-spacing: -0.022em; }
.ah.b2 .ah-sub { letter-spacing: -0.012em; line-height: 1.38; }
.ah.b2 .ah-body,
.ah.b2 .ah-small { letter-spacing: -0.006em; }
.ah.b2 .ah-plan-name,
.ah.b2 .ah-plan-price,
.ah.b2 .ah-tile-title,
.ah.b2 .ah-doc-title,
.ah.b2 .ah-proofpoint-t { letter-spacing: -0.028em; }

/* Eyebrows are mono with wide tracking in coral — the deck's signature. */
.ah.b2 .ah-eyebrow,
.ah.b2 .ah-lockup,
.ah.b2 .startpaths-eyebrow,
.ah.b2 .ah-tile-num,
.ah.b2 .ah-plan-flag {
  font-family: var(--ah-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ah-coral);
}
/* The lock-up is the first thing read on the page, so it breaks the eyebrow
   rule twice: larger, and in the deepened coral rather than true coral.
   #0071e3 on cream is 2.4:1 — acceptable for a decorative section eyebrow,
   not for the line carrying the company's category. #0071e3 is 4.6:1 and
   still unmistakably the same hue family. */
.ah.b2 .ah-lockup {
  /* 32 uppercase monospace characters plus tracking is a wide line — at 40px
     it needs ~880px, more than the 780px hero column. The column is the
     constraint, not the type, so this one element is allowed to span wider
     than its parent and the tracking tightens as the size grows. */
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 24px;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  /* Back under the 780px column at this size, so tracking can open up again —
     a lock-up wants the air; it was only tightened to buy horizontal room. */
  letter-spacing: 0.12em;
  color: var(--ah-rise);
  white-space: nowrap;
}
@media (max-width: 760px) {
  /* Below this it cannot hold one row at a readable size, so let it wrap on
     purpose rather than shrink into a caption again. */
  .ah.b2 .ah-lockup {
    width: auto;
    white-space: normal;
    text-wrap: balance;
    letter-spacing: 0.06em;
  }
}

/* Numerals are mono here — figures on tiles, prices, CVSS scores, metrics. */
.ah.b2 .ah-metric-value,
.ah.b2 .ah-asym-stat-v,
.ah.b2 .ah-chain-v,
.ah.b2 .ah-sizer-price,
.ah.b2 .ah-plan-price,
.ah.b2 .ah-doc-sec-n,
.ah.b2 .ah-field-val,
.ah.b2 .ah-bar-num,
.ah.b2 .ah-crow-amt {
  font-family: var(--ah-mono);
  letter-spacing: -0.01em;
}
.ah.b2 .ah-metric-value,
.ah.b2 .ah-asym-stat-v { color: var(--ah-forest); }

/* Fraunces italic is the one expressive face — reserved for emphasis inside
   headlines, exactly as the deck uses `.fr`. */
.ah.b2 .ah-h1 em,
.ah.b2 .ah-h2 em,
.ah.b2 .ah-asym-em {
  font-family: var(--ah-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ah-rise);
  letter-spacing: -0.01em;
}

/* ─── form: 16px radii, 1.5px borders, pill chips ───────────────────────── */
.ah.b2 .ah-tile,
.ah.b2 .ah-plan,
.ah.b2 .ah-proofpoint,
.ah.b2 .ah-gate,
.ah.b2 .ah-doc,
.ah.b2 .ah-meter-card,
.ah.b2 .ah-sizer,
.ah.b2 .ah-arith,
.ah.b2 .ah-chain-link,
.ah.b2 .startpath { border-radius: var(--ah-r); }
.ah.b2 .ah-gate-row,
.ah.b2 .ah-gate-bar,
.ah.b2 .ah-saving,
.ah.b2 .ah-nav-dropdown { border-radius: 10px; }

/* Cards in this system carry a visible edge rather than floating on tone. */
.ah.b2 .ah-tile,
.ah.b2 .ah-plan,
.ah.b2 .ah-proofpoint,
.ah.b2 .ah-gate,
.ah.b2 .ah-meter-card,
.ah.b2 .startpath {
  border: var(--ah-bw) solid var(--ah-hair);
}
.ah.b2 .ah-doc { border: var(--ah-bw) solid var(--ah-hair); box-shadow: none; }
.ah.b2 { --ah-net: #0071e3; }
.ah.b2 .ah-plan.is-group-first::after { border-color: var(--ah-net); border-radius: 22px; }

/* Buttons: coral fill, ink text — the site's existing primary CTA. */
.ah.b2 .ah-btn { color: #0b1a2b; font-weight: 500; border-radius: 999px; }
.ah.b2 .ah-btn:hover { background: #3d90ea; }
.ah.b2 .ah-btn--quiet { background: transparent; color: var(--ah-forest); border-color: var(--ah-hair); }
.ah.b2 .ah-btn--quiet:hover { background: var(--ah-tint); }

/* The scan field reads as a terminal input in this identity, matching
   .syr-form on the rest of the site: dark ink well, coral action. */
.ah.b2 .ah-field {
  background: var(--ah-ink);
  border: var(--ah-bw) solid #1F2826;
  border-radius: 999px;
}
.ah.b2 .ah-field:focus-within {
  background: var(--ah-ink);
  border-color: var(--ah-coral);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.22);
}
.ah.b2 .ah-field-input {
  font-family: var(--ah-mono);
  font-size: 15px;
  letter-spacing: 0;
  color: var(--ah-on-ink);
}
.ah.b2 .ah-field-input::placeholder { color: #5C6560; }
.ah.b2 .ah-scan-note { font-family: var(--ah-mono); font-size: 11.5px; letter-spacing: 0.02em; }

/* ─── nav ────────────────────────────────────────────────────────────────
   Cream and translucent rather than white; taller, to sit the v2 reticle
   wordmark properly. */
.ah.b2 { --ah-nav-h: 60px; }
.ah.b2 .hero-nav {
  background: rgba(255, 255, 255, 0.92);
  border-bottom: var(--ah-bw) solid var(--ah-hair);
}
.ah.b2 .hero-nav .nav-brand img { height: 30px; }
.ah.b2 .nav-links {
  font-family: var(--ah-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ah-ink-3);
}
.ah.b2 .nav-links .is-active { color: var(--ah-ink); }
.ah.b2 .nav-dropdown { background: rgba(255, 255, 255, 0.98); border-radius: 10px; }
.ah.b2 .nav-dropdown a { font-family: var(--ah-mono); font-size: 12.5px; letter-spacing: 0.02em; }

/* ─── forest surfaces ────────────────────────────────────────────────────
   The deck alternates cream against forest-deep rather than white against
   grey. The two darkest blocks on each page take that treatment. */
.ah.b2 .ah-chain-link--crit,
.ah.b2 .ah-arith,
.ah.b2 .startpath--enterprise {
  background: var(--ah-forest-deep);
  border-color: var(--ah-forest-deep);
}
.ah.b2 .ah-chain-link--crit .ah-chain-v { color: var(--ah-coral); }
.ah.b2 .ah-gate-bar {
  background: var(--ah-forest-deep);
  font-family: var(--ah-mono);
  letter-spacing: 0.14em;
}
.ah.b2 .ah-gate-row--out .ah-gate-n { color: var(--ah-forest); }

/* Chips and capability rows pick up the mono/pill treatment. */
.ah.b2 .ah-cap { font-size: 15px; }
.ah.b2 .ah-cap svg { color: var(--ah-forest); }
.ah.b2 .ah-wedge svg { color: var(--ah-forest); }
.ah.b2 .ah-doc-sec-n { color: var(--ah-coral); }

/* Severity keeps its own semantics — it is data, not brand. */
.ah.b2 .ah-meter-tag.is-unlimited { color: var(--ah-forest); }
.ah.b2 .ah-meter-tag.is-metered { color: var(--ah-orange); }

/* Footer follows the cream system rather than white. */
.ah.b2 .site-footer { background: var(--ah-tint); border-top: var(--ah-bw) solid var(--ah-hair); }
.ah.b2 .site-footer-col-title,
.ah.b2 .site-footer-copy,
.ah.b2 .site-footer-tagline {
  font-family: var(--ah-mono);
  letter-spacing: 0.08em;
  color: var(--ah-ink-3);
}
.ah.b2 .site-footer-col-links a,
.ah.b2 .site-footer-links a { font-family: var(--ah-mono); font-size: 13px; letter-spacing: 0.02em; }

/* Homepage price band — six-up. Featured tier matches the pricing table. */
.ah.b2 .startpath.is-featured { outline: none; border-color: var(--ah-coral); border-width: 2px; }
.ah.b2 .startpath-per { font-family: var(--ah-mono); }

/* /authorize/ — the typed signature takes the serif, as a signature should. */
.ah.b2 .ah-auth-signature { font-family: var(--ah-serif); font-style: italic; font-size: 22px; }
.ah.b2 .ah-auth-check input { accent-color: var(--ah-forest); }
.ah.b2 .ah-auth-roe svg { color: var(--ah-forest); }
.ah.b2 .ah-auth-letter { font-family: var(--ah-mono); }
.ah.b2 .ah-auth-input:focus { border-color: var(--ah-coral); box-shadow: 0 0 0 4px rgba(0, 113, 227,.22); }