/* ==========================================================================
   styles.css — Fractional Syndicate
   --------------------------------------------------------------------------
   Loaded AFTER family.css, which owns the palette, type, spacing, and every
   base component. This file only sets what is specific to this site:

     1. the accent pair
     2. the light-led background rhythm
     3. a handful of page-specific components that have no equivalent on the
        Syndicate Systems site

   If a rule here would be useful to both sites, it belongs in family.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accent — burnt amber
   -------------------------------------------------------------------------- */

:root {
  --accent-on-light: #9c520a; /* 5.1:1 on steel, 5.7:1 on paper */
  --accent-on-navy: #e9a456;  /* 8.2:1 on ink, 7.0:1 on ink-2 */
}

/* --------------------------------------------------------------------------
   2. Navy inside a light page
   --------------------------------------------------------------------------
   A light-led site still needs navy bands and navy panels. A .section gets
   its background from .on-navy directly. A panel needs the override below,
   because .panel paints --surface (the raised ink-2) and these read better
   at full ink against a light page.
   -------------------------------------------------------------------------- */

.panel-navy {
  background: var(--ink);
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

/* The hero is not a .section, so it has to paint its own surface class. */
.hero {
  background: var(--bg);
  padding-block: 88px 104px;
}

h1 + .lede,
h2 + .lede {
  margin-top: 22px;
}

.hero-panel > h2 {
  font-size: 1.3125rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* The four "Sound familiar?" lines. Full-strength rather than muted: they
   are the voice of the buyer, not supporting copy. */
.quote-list > li {
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   4. Page-specific components
   -------------------------------------------------------------------------- */

/* Label introducing a .plain-list inside a panel, e.g. "You get". */
.list-label {
  margin: 20px 0 12px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--fg);
}

/* Engagement panels are equal-height columns with the price and button
   pinned to the bottom, so the three read as one row. The shared .grid
   aligns items to the start, so this grid has to opt back into stretch. */
.engagement-grid {
  align-items: stretch;
}

.engagement {
  display: flex;
  flex-direction: column;
}

.engagement > .tag {
  align-self: flex-start;
}

.engagement .panel-price {
  margin-top: auto;
  margin-bottom: 0;
}

.engagement .btn {
  margin-top: 18px;
}

/* The price line used to carry the bottom alignment. While it is commented
   out, the trailing button does, so the three buttons still line up. */
.engagement > .btn:last-child {
  margin-top: auto;
}

/* Closing line under a two-column comparison. */
.section-close {
  margin-top: 32px;
}

/* The single headline outcome under the case study steps. */
.result {
  margin-top: 40px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
}

.result > .eyebrow {
  margin-bottom: 8px;
}

.result > p {
  font-size: 1.1875rem;
  color: var(--fg);
}

.client-quote {
  margin-top: 32px;
}

/* The "never required" panel closing the Syndicate Systems section. */
.promise {
  margin-top: 24px;
}

/* Placeholder slots. Deliberately visible so they cannot ship unnoticed.
   Currently unused: every slot in the markup is commented out pending real
   content. Kept so restoring one is a markup change only. */
.slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-btn);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg-muted);
  white-space: nowrap;
}

.slot-headshot {
  width: 128px;
  height: 128px;
  margin-bottom: 22px;
  border-radius: var(--radius-panel);
  white-space: normal;
  text-align: center;
}

.brand .slot {
  padding: 4px 9px;
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */

.footer-inner {
  align-items: flex-start;
}

.footer-note {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  margin: 0;
  max-width: none;
}

@media (max-width: 960px) {
  .hero {
    padding-block: 56px 72px;
  }
}