/* ==========================================================================
   The site
   --------------------------------------------------------------------------
   White canvas. Navy header, footer, and two full-width emphasis bands. Red as
   the single accent and the only button color. Mobile first: every rule here
   describes the phone, and the wider viewports add to it.

   Type: Oswald (display) / Inter (body).
   ========================================================================== */

@font-face {
  font-family: "Oswald";
  src: url("/assets/fonts/oswald-var.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* Fallback faces, adjusted so the swap shifts as little as possible. The
   adjustments are close approximations rather than measurements. */
@font-face {
  font-family: "Oswald Fallback";
  src: local("Arial Narrow"), local("Helvetica Neue Condensed"), local("Liberation Sans Narrow");
  size-adjust: 88%;
  ascent-override: 118%;
  descent-override: 30%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@layer layout {

  /* --- Shared shell ------------------------------------------------------- */

  .wrap {
    max-width: var(--wrapper-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .wrap--narrow {
    max-width: 46rem;
  }

  section {
    padding-block: var(--space-2xl);
  }

  section > .wrap > * + * {
    margin-top: var(--space-m);
  }

  .eyebrow {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent-display);
  }

  /* On the navy bands, red at this size is 3.91:1 against navy and fails AA.
     The eyebrow goes white there and keeps its red as a bar beside it, which
     is a fill and has no contrast requirement beyond 3:1 as a graphic. */
  .band-navy .eyebrow {
    color: var(--ink);
    padding-left: var(--space-xs);
    border-left: 4px solid var(--accent-fill);
  }

  .section__headline {
    font-size: var(--step-4);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    max-width: 20ch;
  }

  .section__headline--xl {
    font-size: var(--step-6);
    max-width: 16ch;
  }

  .lede {
    font-size: var(--step-1);
    color: var(--ink-muted);
  }

  /* A lede that carries the argument rather than supporting it. */
  .lede--strong {
    font-weight: var(--weight-bold);
    color: var(--ink);
  }

  .kicker,
  .providers__closing,
  .solution__closing {
    color: var(--ink-subtle);
  }

  /* The one button treatment on the site. Red, always. The chevron variant
     carries the angled slab shape from the ads. */
  .btn {
    display: inline-block;
    padding: var(--space-xs) var(--space-xl);
    background-color: var(--accent-fill);
    color: var(--accent-fill-ink);
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-s);
    transition: background-color var(--transition-fast);
  }

  .btn:hover {
    background-color: var(--accent-fill-hover);
  }

  .btn--chevron {
    border-radius: 0;
    padding-right: calc(var(--space-xl) + 1em);
    clip-path: polygon(0 0, 100% 0, calc(100% - 1em) 50%, 100% 100%, 0 100%);
  }

  /* The red flag banner from the ads: solid red, angled right edge. */
  .flag-banner {
    display: inline-block;
    padding: var(--space-3xs) calc(var(--space-s) + 0.7em) var(--space-3xs) var(--space-xs);
    background-color: var(--red-600);
    color: var(--white);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 100%, 0 100%);
  }

  /* The campaign name at scale, above the hero headline. */
  .flag-banner--lg {
    padding: var(--space-2xs) calc(var(--space-l) + 0.7em) var(--space-2xs) var(--space-s);
    font-size: var(--step-3);
    line-height: var(--leading-tight);
  }

  /* The rough brush underline. */
  .brush {
    display: block;
    width: clamp(9rem, 34%, 16rem);
    height: 0.7em;
    margin-top: var(--space-s);
    fill: var(--accent-fill);
  }

  .icon {
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
  }

  .icon__body {
    fill: var(--accent-fill);
  }

  .icon__mark {
    fill: var(--white);
    stroke: var(--accent-fill);
  }

  .icon--megaphone .icon__mark {
    fill: none;
    stroke: var(--accent-fill);
  }

  /* --- Navigation --------------------------------------------------------- */

  .nav {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-block: var(--space-2xs);
    border-bottom: 3px solid var(--accent-fill);
  }

  .nav__inner {
    max-width: var(--wrapper-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
  }

  .nav__flag {
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink);
  }

  .nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
    margin-left: auto;
  }

  .nav__list {
    display: none;
    gap: var(--space-m);
  }

  .nav__link {
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--ink-muted);
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
  }

  .nav__link:hover {
    color: var(--ink);
    border-bottom-color: var(--accent-fill);
  }

  .nav__cta {
    padding: var(--space-3xs) var(--space-s);
    background-color: var(--accent-fill);
    color: var(--accent-fill-ink);
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-s);
  }

  .nav__cta:hover {
    background-color: var(--accent-fill-hover);
  }

  @media (min-width: 58rem) {
    .nav__list {
      display: flex;
    }
  }

  /* --- Hero: the white canvas, with room around it ------------------------ */

  .hero {
    padding-block: var(--space-3xl);
  }

  .hero__flag {
    max-width: none;
  }

  .hero__headline {
    font-size: var(--step-6);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    max-width: 17ch;
  }

  .hero__supporting {
    font-size: var(--step-1);
    color: var(--ink-muted);
  }

  .hero__positioning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    font-size: var(--step-1);
    color: var(--ink);
  }

  .hero__actions {
    margin-top: var(--space-xl);
    max-width: none;
  }

  /* --- The problem: navy band, red numerals ------------------------------- */

  .steps {
    display: grid;
    gap: var(--space-m);
    margin-top: var(--space-l);
  }

  .step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-s);
    align-items: start;
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--rule);
  }

  /* Oversized red numerals with the period, as in the numbered ad. */
  .step__number {
    font-family: var(--font-display);
    font-size: var(--step-6);
    font-weight: var(--weight-display);
    line-height: 0.8;
    color: var(--accent-display);
  }

  .step__title {
    font-size: var(--step-2);
    text-transform: uppercase;
  }

  .step__body p {
    margin-top: var(--space-2xs);
    color: var(--ink-muted);
  }

  .step--break {
    padding: var(--space-m);
    border-bottom: none;
    border-left: 6px solid var(--accent-fill);
    background-color: var(--surface-raised);
  }

  .problem__note {
    font-family: var(--font-display);
    font-size: var(--step-2);
    text-transform: uppercase;
    max-width: 26ch;
  }

  /* Two up, then four across once there is room. Four narrow columns below
     that width squeeze the step titles onto too many lines. */
  @media (min-width: 44rem) {
    .steps {
      grid-template-columns: repeat(2, 1fr);
      align-items: stretch;
    }

    .step {
      grid-template-columns: 1fr;
      border-bottom: none;
      border-top: 4px solid var(--rule);
      padding-top: var(--space-s);
    }

    .step--break {
      padding: var(--space-s) 0 0;
      border-left: none;
      border-top: 4px solid var(--accent-fill);
      background-color: transparent;
    }
  }

  @media (min-width: 72rem) {
    .steps {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* --- Placeholder map ----------------------------------------------------- */

  .map {
    margin: var(--space-l) 0 0;
  }

  /* The supplied map sits on its own white ground, which matches the canvas of
     this section, so it needs no frame. */
  .map__img {
    width: 100%;
    max-width: 44rem;
    height: auto;
  }

  /* --- The outlier comparison --------------------------------------------- */

  .compare {
    display: grid;
    gap: var(--space-s);
    margin-top: var(--space-l);
  }

  .compare__side {
    padding: var(--space-m);
    background-color: var(--surface-raised);
    border-top: 6px solid var(--rule);
  }

  .compare__side--wi {
    border-top-color: var(--accent-fill);
  }

  .compare__label {
    font-size: var(--step--1);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--ink-subtle);
  }

  .compare__value {
    margin: var(--space-2xs) 0 0;
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: var(--leading-tight);
    text-transform: uppercase;
    color: var(--ink);
  }

  .compare__side--wi .compare__value {
    color: var(--accent-display);
  }

  @media (min-width: 44rem) {
    .compare {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-m);
    }
  }

  /* --- Patients ------------------------------------------------------------ */

  .quote {
    padding-left: var(--space-s);
    border-left: 4px solid var(--accent-fill);
  }

  .quote p {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: var(--leading-tight);
    max-width: 26ch;
  }

  /* --- Providers and solution lists ---------------------------------------- */

  .costs,
  .points {
    display: grid;
    gap: var(--space-m);
    margin-top: var(--space-l);
  }

  .cost,
  .point {
    padding-top: var(--space-s);
    border-top: 4px solid var(--accent-fill);
  }

  .cost__title,
  .point__title {
    font-size: var(--step-1);
    text-transform: uppercase;
  }

  .cost p,
  .point p {
    margin-top: var(--space-2xs);
    color: var(--ink-muted);
  }

  @media (min-width: 44rem) {
    .costs {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 68rem) {
    .costs {
      grid-template-columns: repeat(4, 1fr);
    }

    .points {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* --- The solution: the section the client asked to emphasize ------------- */

  .solution {
    padding-block: var(--space-3xl);
  }

  /* Three sentences, so it needs more room across than a headline of one. */
  .solution__headline {
    max-width: 24ch;
  }

  .solution .points {
    margin-top: var(--space-xl);
  }

  .solution__closing {
    font-size: var(--step-1);
    color: var(--ink-muted);
  }

  /* --- Signup: plenty of room around it ------------------------------------ */

  .signup {
    padding-block: var(--space-3xl);
  }

  .signup__headline {
    font-size: var(--step-5);
    text-transform: uppercase;
  }

  .signup__form {
    margin-top: var(--space-l);
  }

  /* --- Legal pages --------------------------------------------------------- */

  .legal {
    padding-block: var(--space-2xl);
  }

  .legal__title {
    font-size: var(--step-5);
    text-transform: uppercase;
  }

  .legal__meta {
    color: var(--ink-subtle);
    font-size: var(--step--1);
  }

  .legal__heading {
    margin-top: var(--space-xl);
    font-size: var(--step-2);
    text-transform: uppercase;
  }

  .legal__heading + p,
  .legal__heading + ul {
    margin-top: var(--space-xs);
  }

  .legal p + p,
  .legal p + ul,
  .legal ul + p {
    margin-top: var(--space-s);
  }

  .legal__list {
    padding-left: 1.25em;
    max-width: var(--measure);
  }

  .legal__list li + li {
    margin-top: var(--space-2xs);
  }

  .legal a:not(.btn) {
    color: var(--ink);
    text-decoration-color: var(--accent-fill);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }

  .legal__back {
    margin-top: var(--space-xl);
    max-width: none;
  }

  /* --- Not found ----------------------------------------------------------- */

  .notfound {
    padding-block: var(--space-3xl);
  }

  .notfound__actions {
    margin-top: var(--space-xl);
    max-width: none;
  }

  /* --- Footer -------------------------------------------------------------- */

  .footer {
    padding-block: var(--space-xl);
  }

  .footer__inner {
    max-width: var(--wrapper-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
    color: var(--ink-muted);
    font-size: var(--step--1);
  }

  .footer__inner > * + * {
    margin-top: var(--space-xs);
  }

  /* "Paid for by PAAW" sits centered and quiet at the foot of both ads. */
  .footer__inner {
    text-align: center;
  }

  .footer__inner p {
    max-width: none;
  }

  .footer__disclaimer {
    font-weight: var(--weight-bold);
    color: var(--ink);
  }

  .lawmakers .icon--megaphone {
    width: 3rem;
    height: 3rem;
  }

  /* Pre-launch only. See partials/footer.njk. */
  .footer__credit {
    margin-top: var(--space-m);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--rule);
    color: var(--ink-subtle);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
}