/* ==========================================================================
   Wolfpack Public Rates — wolfstrategyllc.com brand
   Navy #000B29 · coral #F95954 (rationed) · Roboto 700 headings · Montserrat body
   Derived from wp-rates-page/css/rates.css (the pattern library) under
   docs/public-rates-consistency-contract.md — evergreen public sibling of the
   quarter-stamped direct-link page.

   Coral discipline, in one place so it can't drift: coral is allowed on the
   nav CTA, the hero CTA, the featured tier (border + badge), the call-section
   CTA, the coaching ghost CTA, the contact CTA, link hover, and the focus
   ring. Nothing else — the hero kicker is deliberately NOT coral here (unlike
   the Q3 page). Where coral is a FILL, text on it is navy (5.8:1), never
   white (fails AA).
   ========================================================================== */

:root {
  --navy:      #000B29;
  --coral:     #F95954;
  --white:     #FFFFFF;
  --muted:     #BFC2CA;
  --faint:     #808594;   /* 5.3:1 on navy — AA for normal text, labels only */
  --surface:   #0A1435;
  --surface-2: #101B3F;
  --line:      #222E52;
  --radius:    4px;
  --measure:   1100px;
  --mono:      ui-monospace, "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* The path cards (below) make smooth scrolling a primary navigation path — honor a
   reduced-motion preference for the jump itself and for the affordances that signal it. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .path__link::after, .path__shot { transition: none; }
  .path__link:hover::after { transform: none; }
}

body {
  background: var(--navy);
  color: var(--white);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;         /* never smaller: 16px stops iOS zooming on focus */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--white); }
a:hover { color: var(--coral); }
a:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

h1, h2, h3 { font-family: 'Roboto', system-ui, sans-serif; font-weight: 700; line-height: 1.15; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Small monospace labels — the "engineering document" voice */
.k {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ==========================================================================
   Sticky nav
   ========================================================================== */

.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(0, 11, 41, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  max-width: var(--measure); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px; height: 58px;
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto;
}
.nav__brand:hover { color: var(--white); }
.nav__logo { width: 30px; height: 30px; }
.nav__wordmark {
  font-family: 'Roboto', sans-serif; font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.nav__links { display: flex; gap: 22px; list-style: none; }
.nav__links a {
  font-size: 0.8125rem; font-weight: 600; text-decoration: none; color: var(--muted);
}
.nav__links a:hover { color: var(--white); }
.nav__cta {
  font-size: 0.8125rem; font-weight: 700; text-decoration: none;
  background: var(--coral); color: var(--navy) !important;
  padding: 8px 16px; border-radius: var(--radius);
}
.nav__cta:hover { filter: brightness(1.08); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .wrap { position: relative; }
.hero__watermark {
  position: absolute; right: 0; top: 24px;
  width: 380px; height: 380px; opacity: 0.14; pointer-events: none;
  user-select: none;
}
.hero__inner { position: relative; padding: 96px 0 72px; max-width: 720px; }
.hero__kicker { font-size: 0.9375rem; letter-spacing: 0.18em; margin-bottom: 20px; }
.hero__title { font-size: clamp(2.3rem, 5.4vw, 3.5rem); margin-bottom: 22px; }
.hero__lede { font-size: 1.0625rem; color: var(--muted); max-width: 58ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 38px; }
.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  font-size: 0.9375rem; padding: 13px 26px; border-radius: var(--radius);
}
.btn--solid { background: var(--coral); color: var(--navy); }
.btn--solid:hover { color: var(--navy); filter: brightness(1.08); }
.btn--ghost { border: 1px solid var(--line); color: var(--white); }
.btn--ghost:hover { border-color: var(--coral); color: var(--coral); }
.btn--coral-ghost { border: 1px solid var(--coral); color: var(--coral); }
.btn--coral-ghost:hover { background: var(--coral); color: var(--navy); }
.hero__stats { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; }
.hero__stats li {
  font-family: var(--mono); font-size: 0.9375rem; letter-spacing: 0.06em;
  color: var(--muted);
}
.hero__stats li::before { content: "▸ "; color: var(--faint); }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding: 76px 0; scroll-margin-top: 70px; }
.section--line { border-top: 1px solid var(--line); }
.section__head { max-width: 680px; margin-bottom: 44px; }
.section__kicker { display: block; margin-bottom: 12px; }
.section__title { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 14px; }
.section__lede { color: var(--muted); }
.section__cta { margin-top: 36px; }

/* ==========================================================================
   Who this is for — the two paths, before any price
   ========================================================================== */

.paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.path {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 30px;
}
.path h3 { font-size: 1.05rem; margin-bottom: 10px; }
.path p { font-size: 0.9375rem; color: var(--muted); }

/* Each card is an entry point to its own section — heading and image both jump there.
   The heading link is the single tab stop (the image link is aria-hidden/tabindex="-1"),
   and the trailing arrow is the rest-state cue that the heading is clickable. */
.path__link { text-decoration: none; }
.path__link::after {
  content: "\2193";                /* ↓ — jumps down-page, not off-site (that's ↗) */
  margin-left: 0.35em;             /* a leading space in generated content collapses away */
  color: var(--faint);
  transition: transform 0.15s ease, color 0.15s ease;
  display: inline-block;
}
.path__link:hover::after { color: var(--coral); transform: translateY(2px); }
.path__link:hover { text-decoration: underline; text-underline-offset: 3px; }

.path__shot-link { display: block; margin-bottom: 14px; }
.path__shot {
  width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;               /* zoom-to-fit the frame, aspect ratio intact */
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, filter 0.15s ease;
}
.path__shot-link:hover .path__shot { border-color: var(--faint); filter: brightness(1.06); }
.fit__note { margin-top: 26px; font-size: 0.9375rem; color: var(--muted); max-width: 72ch; }
.fit__note strong { color: var(--white); font-weight: 600; }

/* ==========================================================================
   Hourly rail — the low-friction entry point
   ========================================================================== */

.rail {
  display: grid; grid-template-columns: 1.1fr 1fr 1.3fr; gap: 32px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 32px 34px;
}
.rail h3 { font-size: 1.05rem; margin-bottom: 2px; }
.rail__price { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2.1rem; margin: 6px 0 4px; }
.rail__price span { font-size: 1rem; font-weight: 400; color: var(--muted); font-family: 'Montserrat', sans-serif; }
.rail__tag { font-size: 0.875rem; color: var(--muted); }
.rail__facts, .rail__perks { list-style: none; font-size: 0.875rem; color: var(--muted); }
.rail__facts li, .rail__perks li { padding: 5px 0 5px 20px; position: relative; }
.rail__facts li::before { content: "—"; position: absolute; left: 0; color: var(--faint); }
.rail__perks li::before { content: "✓"; position: absolute; left: 0; color: var(--white); }
.rail__col-label { margin-bottom: 8px; display: block; }

/* ==========================================================================
   Project tier cards
   ========================================================================== */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.tier {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px;
  display: flex; flex-direction: column;
}
.tier--featured { border-color: var(--coral); background: var(--surface-2); }
.tier__badge {
  position: absolute; top: -11px; left: 24px;
  font-family: var(--mono); font-size: 0.625rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius);
  background: var(--navy); border: 1px solid var(--faint); color: var(--muted);
}
.tier--featured .tier__badge { background: var(--coral); border-color: var(--coral); color: var(--navy); font-weight: 700; }
.tier__name { font-size: 1.05rem; margin-bottom: 14px; }
.tier__name span { color: var(--faint); font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 0.875rem; }
.tier__price { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2rem; }
.tier__price span { font-size: 0.9375rem; font-weight: 400; color: var(--muted); font-family: 'Montserrat', sans-serif; }
.tier__eff { font-size: 0.875rem; color: var(--muted); margin: 4px 0 20px; }
.tier__eff strong { color: var(--white); font-weight: 600; }
.tier__meta { border-top: 1px solid var(--line); font-size: 0.875rem; }
.tier__meta div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tier__meta dt { color: var(--faint); }
.tier__meta dd { text-align: right; font-weight: 600; }
.tier__foot { margin-top: auto; padding-top: 16px; font-size: 0.8125rem; color: var(--faint); }
.tiers__caption { margin-top: 18px; font-size: 0.875rem; color: var(--muted); }

/* ==========================================================================
   The pilot band — spec R15

   `.bridge` ported from the pattern library (wp-rates-page/css/rates.css),
   where it is the coupon bridge. ONE DECLARATION DIFFERS, deliberately: the
   left edge is `--faint` here, not `--coral`. Upstream that coral edge marks
   the coupon perk; this page does not carry the coupon bridge (contract D8),
   so there is no perk for it to mark — and the coral ration enumerated in this
   sheet's header is fully spent. Porting a coral declaration that never paints
   would falsify that header, which is the one thing it must never do.

   Upstream the pilot band therefore carries a `bridge--pilot` modifier to
   neutralise the edge. There is nothing here for that modifier to override, so
   it is not ported and the markup omits it. If the coupon bridge is ever
   ported down (reversing D8), bring the modifier with it.

   `.bridge__fig` matches the upstream second selector: the slot holds a dollar
   figure here rather than a percentage, and `__pct` would be a lie.
   ========================================================================== */

.bridge {
  background: var(--surface-2);
  border: 1px solid var(--line); border-left: 3px solid var(--faint);
  border-radius: var(--radius); padding: 30px 34px;
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  margin-top: 32px;
}
/* The `.bridge ` prefix is load-bearing: the figure is a `<p>` inside
   `.bridge`, so a bare `.bridge__fig` (0,1,0) would lose to `.bridge p`
   (0,1,1) two lines down and the price would render at body size. That is
   exactly what happened upstream to the coupon bridge's "25%" from v1.0.0
   until 2026-08-18 (wp-rates-page#42), where it is now fixed the same way. */
.bridge .bridge__fig { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 2.6rem; line-height: 1; }
.bridge .bridge__fig span { display: block; font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-top: 6px; }
.bridge h3 { font-size: 1.05rem; margin-bottom: 6px; }
.bridge p { font-size: 0.9375rem; color: var(--muted); max-width: 68ch; }
.bridge p strong { color: var(--white); font-weight: 600; }
.bridge__cta { margin-top: 16px; }

/* ==========================================================================
   The Wolfpack Advantage
   ========================================================================== */

.split { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: start; }
.split h3 { font-size: 1rem; margin-bottom: 14px; }
.check-list { list-style: none; }
.check-list li { padding: 7px 0 7px 26px; position: relative; color: var(--muted); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--white); }
.advantage-shot {
  align-self: center;              /* vertically centered against the list */
  justify-self: center;            /* narrower than the column once height-capped */
  display: block;
  width: auto; height: auto;       /* keep the intrinsic ratio under the max caps */
  max-width: 100%;
  max-height: 560px;               /* full graphic shown, no crop */
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ==========================================================================
   Process steps
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 22px;
}
.steps li::before {
  content: "0" counter(step);
  display: block; font-family: var(--mono); font-size: 0.9375rem;
  letter-spacing: 0.14em; color: var(--faint); margin-bottom: 14px;
}
.steps h3 { font-size: 0.9375rem; margin-bottom: 8px; }
.steps p { font-size: 0.8125rem; color: var(--muted); }

/* ==========================================================================
   Coaching wing
   ========================================================================== */

.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 18px; }
.pack {
  background: var(--surface-2); border: 1px solid var(--line); border-top: 2px solid var(--faint);
  border-radius: var(--radius); padding: 24px 22px;
  display: flex; flex-direction: column;
}
.pack__name { font-size: 0.9375rem; margin-bottom: 12px; }
.pack__price { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.7rem; }
.pack__per { font-size: 0.8125rem; color: var(--muted); margin: 2px 0 14px; }
.pack__note { margin-top: auto; font-size: 0.8125rem; color: var(--faint); padding-top: 10px; border-top: 1px solid var(--line); }
.coaching__foot { font-size: 0.8125rem; color: var(--faint); margin-bottom: 28px; max-width: 72ch; }
.coaching__foot strong { color: var(--muted); font-weight: 600; }
.coaching__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   About Ryan
   ========================================================================== */

.about {
  display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 34px;
}
.about__photo { border-radius: var(--radius); aspect-ratio: 1 / 1; object-fit: cover; }
.about h3 { font-size: 1.2rem; margin-bottom: 4px; }
.about__roles {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 16px;
}
.about p { font-size: 0.9375rem; color: var(--muted); }
.about p + p { margin-top: 10px; }
.about__link { display: inline-block; margin-top: 16px; font-size: 0.875rem; font-weight: 600; }

/* ==========================================================================
   Terms grid — condensed
   ========================================================================== */

.terms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.term {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px;
}
.term h3 { font-size: 0.875rem; margin-bottom: 10px; }
.term ul { list-style: none; }
.term li { font-size: 0.8125rem; color: var(--muted); padding: 3px 0; }
.term a { color: var(--muted); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact-list { display: flex; flex-wrap: wrap; gap: 8px 30px; list-style: none; margin-top: 26px; }
.contact-list a { font-size: 0.9375rem; color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { border-top: 1px solid var(--line); padding: 36px 0 48px; }
.foot__inner {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  justify-content: space-between; align-items: baseline;
}
.foot__wordmark {
  font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.foot__meta { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--faint); }
.foot__meta a { color: var(--muted); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 960px) {
  .tiers, .steps, .terms-grid { grid-template-columns: repeat(2, 1fr); }
  .packs { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-template-columns: 1fr; gap: 20px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .paths { grid-template-columns: 1fr; }
  .hero__watermark { width: 300px; height: 300px; right: -90px; }
}

@media (max-width: 640px) {
  .nav__links { display: none; }
  .hero__inner { padding: 64px 0 52px; }
  .section { padding: 56px 0; }
  .tiers, .steps, .packs, .terms-grid { grid-template-columns: 1fr; }
  .tier--featured { order: -1; }
  .bridge { grid-template-columns: 1fr; gap: 14px; }
  .about { grid-template-columns: 1fr; }
  .about__photo { width: 170px; }
}