/* Shared visual system for the homepage and personal funnel pages. */
@font-face {
  font-family: 'Barlow Condensed';
  src: url(assets/barlow-condensed.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}

.premium-page {
  --paper: #f8f8f6;
  --ink: #080a08;
  --muted: #536176;
  --accent: #1630d3;
  --line: #d6dce5;
  overflow-x: clip;
  font-size: 17px;
  font-weight: 450;
  line-height: 1.65;
}

.premium-page h1,
.premium-page .written-step h2,
.premium-page .step-stat-number {
  font-family: 'Barlow Condensed', Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
}

.premium-page h3 { font-weight: 650; letter-spacing: -.035em; }
.premium-page .overline { font-weight: 650; letter-spacing: .12em; }
.premium-page .button { border-radius: 5px; font-weight: 650; padding: 13px 21px; }
.premium-page .text-link { font-weight: 650; }
.premium-page .masthead { min-height: 80px; }
.premium-page .masthead nav { gap: clamp(15px, 3vw, 34px); padding: 0; }
.premium-page .masthead nav .team-nav-link { font-size: .88rem; font-weight: 600; text-decoration: none; }

/* The opening funnel has its own stage, separate from the service sections. */
.premium-page .funnel-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  padding-block: clamp(56px, 7vw, 100px);
  color: #fff;
}

.premium-page .funnel-hero::before,
.premium-page .written-step::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset-block: 0;
  left: calc((100% - 100vw) / 2);
  right: calc((100% - 100vw) / 2);
  background: var(--section-bg, #0c0e0d);
}

.premium-page .funnel-intro { padding: 0; }
.premium-page .funnel-intro .overline { max-width: 30ch; color: #bfcce5; font-size: .72rem; margin-bottom: 24px; }
.premium-page h1 { font-size: clamp(4rem, 7.5vw, 7.4rem); line-height: .91; text-transform: uppercase; }
.premium-page h1 em { color: #9bb9ff; }
.premium-page .stage-nav { width: 100%; max-width: 800px; gap: 5px; margin: 0; }
.premium-page .funnel-tier { padding-block: 20px 22px; color: #121512; }
.premium-page .funnel-tier::before { background: #dfe9ff; box-shadow: none; }
.premium-page .funnel-tier-2::before { background: #b7ceff; }
.premium-page .funnel-tier-3::before { background: #8badfa; }
.premium-page .funnel-tier-4 { margin-top: 6px; color: #fff; }
.premium-page .funnel-tier-4::before { background: #1630d3; border-radius: 5px; }
.premium-page .funnel-tier-label { font-size: .58rem; font-weight: 700; color: inherit; letter-spacing: .13em; }
.premium-page .funnel-tier-caption { font-size: .76rem; line-height: 1.45; margin-top: 3px; }
.premium-page .funnel-tier-links { gap: 10px 25px; margin-top: 10px; }
.premium-page .funnel-tier .route-link {
  min-height: 36px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 750;
  color: inherit;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
}
.premium-page .funnel-tier .route-link:is(:hover, :focus-visible, [aria-current='step']) { background: transparent; box-shadow: none; text-decoration-thickness: 3px; }
.premium-page .funnel-tier-4 .route-link:focus-visible { outline-color: #fff; }
.premium-page .funnel-hero:has(.agent-intro) { grid-template-columns: 1fr; gap: 45px; }
.premium-page .agent-profile-copy h1 { font-size: clamp(3.3rem, 6.5vw, 6.7rem); }
.premium-page .agent-profile-copy .agent-bio { color: #ccd7ed; }
.premium-page .agent-funnel-intro h2 { color: #fff; }
.premium-page .funnel-hero:has(.agent-intro) .stage-nav { justify-self: center; }

/* Full-width color changes give each part of the offer its own presence. */
.premium-page .written-step {
  --section-bg: #f8f8f6;
  position: relative;
  isolation: isolate;
  column-gap: clamp(35px, 5vw, 76px);
  padding-block: clamp(68px, 8vw, 116px);
  border: 0;
  color: var(--ink);
}
.premium-page #meta-ads { --section-bg: #0c0e0d; --ink: #f5f8ff; --muted: #c0cce1; --accent: #a6c3ff; --line: #334563; }
.premium-page #get-found { --section-bg: #e9edff; }
.premium-page #follow-up { --section-bg: #1630d3; --ink: #fff; --muted: #d6e0ff; --accent: #fff; --line: #6b88e1; }
.premium-page .written-step h2 { font-size: clamp(3.4rem, 6vw, 5.8rem); line-height: .95; margin-bottom: 26px; text-transform: uppercase; color: var(--accent); }
.premium-page .written-step .summary-pain { margin-top: 0; font-size: clamp(1.22rem, 2vw, 1.5rem); line-height: 1.25; }
.premium-page .stage-copy h3 { margin-top: 26px; font-size: 1.1rem; }
.premium-page .stage-copy p { line-height: 1.65; }
.premium-page .deliverables { margin-top: 16px; list-style: none; padding: 0; }
.premium-page .deliverables li { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }
.premium-page .deliverables strong { font-weight: 700; }
.premium-page .written-step .summary-offer { margin-top: 30px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: .9rem; }
.premium-page .summary-offer strong { font-weight: 600; color: var(--ink); }
.premium-page .written-step .stage-actions { margin-top: 26px; }
.premium-page .detail-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 23px; border-radius: 5px; color: var(--section-bg); background: var(--accent); font-size: .92rem; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.premium-page .detail-link:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #0002; }
.premium-page .step-stat { padding: 0; border: 0; gap: 20px; margin-block: 30px 10px; align-items: center; }
.premium-page .step-stat-number { font-size: clamp(3.6rem, 6.3vw, 6rem); color: var(--accent); line-height: .9; }
.premium-page .stage-copy .step-stat .step-stat-label { font-weight: 700; }
.premium-page .team-cta { padding-block: 84px; }
.premium-page .team-cta h2, .premium-page .agent-next h2 { font-weight: 700; letter-spacing: -.045em; }

@media (max-width: 850px) {
  .premium-page .funnel-hero { grid-template-columns: 1fr; gap: 40px; }
  .premium-page .funnel-intro { max-width: 640px; }
  .premium-page h1 { max-width: 10ch; }
  .premium-page .funnel-hero .stage-nav { max-width: 640px; justify-self: center; }
}
@media (max-width: 650px) {
  .premium-page { font-size: 16px; }
  .premium-page .masthead { min-height: 68px; }
  .premium-page .masthead nav { gap: 11px; }
  .premium-page .masthead nav .team-nav-link { font-size: .77rem; }
  .premium-page .masthead nav .button { padding: 9px 11px; font-size: .74rem; }
  .premium-page .funnel-hero { padding-block: 45px; gap: 35px; }
  .premium-page .funnel-intro .overline { font-size: .64rem; margin-bottom: 18px; }
  .premium-page h1 { font-size: clamp(3.8rem, 17vw, 6rem); }
  .premium-page .funnel-tier { padding-block: 13px 15px; }
  .premium-page .funnel-tier-links { gap: 10px 18px; margin-top: 7px; }
  .premium-page .written-step { row-gap: 35px; padding-block: 55px; }
  .premium-page .written-step h2 { font-size: 3.8rem; }
  .premium-page .agent-profile-copy h1 { font-size: 3.6rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .premium-page .stage-nav.is-tracing .funnel-tier::before { animation: funnel-band 7.2s ease-in-out infinite; }
  .premium-page .funnel-tier-2::before { animation-delay: .8s !important; }
  .premium-page .funnel-tier-3::before { animation-delay: 1.6s !important; }
  .premium-page .funnel-tier-4::before { animation-delay: 2.4s !important; }
}
@keyframes funnel-band {
  0%, 45%, 100% { filter: brightness(1); }
  15%, 28% { filter: brightness(1.16); }
}