/* ==========================================================================
   Home page — patterns that appear only here.
   Wrapped in @layer pages so it slots into the cascade order declared in
   main.css (an unlayered stylesheet would override every layer).
   ========================================================================== */

@layer pages {

  /* ---- "One partnership, not six" comparison ------------------------- */

  .compare {
    display: grid;
    gap: var(--space-xl);
    max-width: 838px;
    margin-inline: auto;
    padding: clamp(1.25rem, 3.2vw, 46px);
    border-radius: var(--radius-lg);
    background: var(--gradient-depth);
  }

  @media (min-width: 720px) {
    .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .compare__figure {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-lg);
    min-height: 290px;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
  }

  .compare__caption {
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted-light);
  }

  /* Tiny node chips used inside both diagrams. */
  .node {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border-radius: var(--radius-pill);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
  }

  .node::before {
    content: "";
    inline-size: 4px;
    block-size: 4px;
    border-radius: 50%;
    background: currentColor;
  }

  .node--outline {
    border: 1px solid #ff8a3d;
    color: var(--text-ink);
  }

  .node--outline::before { background: var(--gradient-ember); }

  /* On the ember platform the chips sit where the gradient darkens, so a
     dark scrim + white text holds ≥4.5:1 along the whole gradient. */
  .node--glass {
    background: rgb(26 10 2 / 0.3);
    color: #fff;
  }

  .brand-tile {
    display: grid;
    place-items: center;
    inline-size: 50px;
    block-size: 50px;
    border-radius: var(--radius-md);
    background: linear-gradient(45deg, #08080c 14.644%, #3d1206 50%, #e24a08 85.356%);
    color: #fff;
    font-size: var(--fs-micro);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
  }

  /* Hub-and-spoke: fixed 230×152 canvas, positions from Figma. */
  .hub {
    position: relative;
    inline-size: 230px;
    block-size: 152px;
    margin-inline: auto;
  }

  .hub__lines {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
  }

  .hub .brand-tile {
    position: absolute;
    inset-inline-start: 93px;
    inset-block-start: 51px;
  }

  .hub__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }

  .hub__nodes li { position: absolute; }
  .hub__nodes li:nth-child(1) { inset-inline-start: 84px;  inset-block-start: 0; }     /* Pharmacies */
  .hub__nodes li:nth-child(2) { inset-inline-start: 0;     inset-block-start: 61px; }  /* Clinicians */
  .hub__nodes li:nth-child(3) { inset-inline-start: 175px; inset-block-start: 61px; }  /* Software */
  .hub__nodes li:nth-child(4) { inset-inline-start: 45px;  inset-block-start: 131px; } /* Support */
  .hub__nodes li:nth-child(5) { inset-inline-start: 141px; inset-block-start: 131px; } /* Compliance */

  /* "With Launch": brand → connector → platform */
  .bundle {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .bundle__connector {
    inline-size: 1px;
    block-size: 25px;
    background: var(--gradient-ember);
  }

  .bundle__platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) var(--space-xs);
    border-radius: var(--radius-md);
    background: var(--gradient-ember-row); /* white name ≥4.6:1 (ember-warm was 3–4:1) */
    color: #fff;
  }

  .bundle__name {
    font-size: var(--fs-micro);
    font-weight: 700;
    line-height: 1.2;
  }

  .bundle__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* ---- Callout -------------------------------------------------------- */

  .callout {
    margin-block-start: 56px;
    padding: clamp(1.5rem, 3.33vw, 48px);
    border-radius: var(--radius-lg);
    background: var(--brand-ember-tint-strong);
    text-align: center;
  }

  .callout p {
    max-width: 1144px;
    margin-inline: auto;
    font-size: var(--fs-l);
    font-weight: 700;
    line-height: var(--lh-l);
    letter-spacing: var(--tracking-l);
  }

  /* Second sentence reads as a separate beat (Figma breaks the line). */
  .callout .text-gradient--depth { display: block; }

  /* ---- Stack builder -------------------------------------------------- */

  .stack-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .stack-intro__text { color: var(--text-muted); }

  .stack-intro__cta-text {
    font-weight: 700;
    color: var(--text-primary);
  }

  .builder {
    display: grid;
    gap: var(--space-sm);
    margin-block-start: var(--space-sm);
  }

  @media (min-width: 960px) {
    .builder {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--space-sm);
    }

    /* Intro copy and the first group share the top row, as in Figma. */
    .builder__intro { padding-inline-end: 36px; }
  }

  .option-group {
    margin: 0;
    padding: 0;
    min-width: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--surface-card-dark);
    overflow: hidden;
  }

  .option-group__legend {
    display: block;
    float: left; /* lets the legend sit inside the rounded box like a header */
    width: 100%;
    padding: 14px var(--space-lg);
    background: var(--surface-subtle);
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: var(--lh-s);
    letter-spacing: var(--tracking-s);
  }

  .option-group__legend + * { clear: both; }

  .option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-block-start: 1px solid var(--border-subtle);
    cursor: pointer;
  }

  .option:hover { background: rgb(255 255 255 / 0.03); }

  .option__label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
  }

  .option__dot {
    flex-shrink: 0;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 3px;
    background: var(--dot);
  }

  .option__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .option__name {
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: var(--tracking-label);
    color: var(--text-primary);
  }

  .option__desc {
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted);
  }

  /* Always-included rows: standalone rounded tiles, no group header. */
  .option--locked {
    padding-block: 14px;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--surface-subtle);
    cursor: default;
  }

  .option--locked:hover { background: var(--surface-subtle); }

  .option--locked .option__name {
    font-size: var(--fs-s);
    font-weight: 700;
    color: #fff;
  }

  .option--featured {
    background: var(--surface-glass);
  }

  .option--featured .option__desc { color: #fff; }

  /* ---- Pricing meter -------------------------------------------------- */

  .meter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
    padding: var(--space-xl);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--surface-glass);
  }

  .meter__track {
    display: flex;
    inline-size: 100%;
    block-size: 12px;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    border-radius: 90px;
    background: var(--surface-glass);
  }

  .meter__segment {
    block-size: 100%;
    inline-size: 0;
    background: var(--seg);
    transition: inline-size var(--duration-slow) var(--ease-out);
  }

  @media (prefers-reduced-motion: reduce) {
    .meter__segment { transition: none; }
  }

  .meter__label {
    font-size: var(--fs-s);
    font-weight: 700;
    line-height: var(--lh-s);
    letter-spacing: var(--tracking-s);
  }

  .meter__action { display: none; }

  .meter__label-mobile { display: none; }

  /* Mobile: the meter is the builder's last child, so sticky-bottom pins it
     to the viewport while the switches scroll past and releases it at the
     end of the section — the bar stays visible as you toggle. */
  @media (max-width: 959.98px) {
    /* WCAG 2.4.11: when focus moves, keep the focused control clear of the
       sticky pricing bar (≈100px tall, 12px off the bottom). */
    :root { scroll-padding-block-end: 132px; }

    .meter {
      position: sticky;
      inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 12px);
      z-index: 20;
      padding: 14px var(--space-md);
      /* Without JS the bar can't tell whether it is floating, so it stays
         an opaque dark bar that reads over the switches throughout. */
      background: rgb(20 20 28 / 0.94);
      box-shadow: var(--shadow-pop);
    }

    /* With JS (main.js toggles .is-stuck): flat glass while docked in its
       place at the end of the builder; lifted onto the ember row gradient
       (as the highlighted panel rows) while it floats over the switches. The ember surface is on
       ::before so it can fade in and out. */
    .js .meter {
      background: var(--surface-glass);
      border-color: var(--border-subtle);
      box-shadow: none;
      transition:
        border-color var(--duration-base) var(--ease-out),
        box-shadow var(--duration-base) var(--ease-out);
    }

    .js .meter::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      border-radius: inherit;
      background: var(--gradient-ember-row);
      opacity: 0;
      transition: opacity var(--duration-base) var(--ease-out);
    }

    .js .meter :is(.meter__label, .meter__action, .meter__track, .meter__segment) {
      transition:
        color var(--duration-base) var(--ease-out),
        background-color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out),
        inline-size var(--duration-slow) var(--ease-out);
    }

    .js .meter.is-stuck {
      border-color: transparent;
      /* Lift: a soft shadow above (the bar sits at the screen's bottom
         edge) and an ember glow beneath. */
      box-shadow: 0 -10px 34px -10px rgb(0 0 0 / 0.55), 0 18px 48px -12px rgb(255 106 26 / 0.55);
    }

    .js .meter.is-stuck::before { opacity: 1; }

    .js .meter.is-stuck :focus-visible { outline-color: #fff; } /* 4.7:1 on ember (WCAG 1.4.11) */

    .js .meter.is-stuck .meter__label { color: #fff; }

    /* Dark button on ember, as .button--dark. */
    .js .meter.is-stuck .meter__action {
      background: var(--surface-canvas-raised);
      color: #fff;
      box-shadow: var(--shadow-hover);
    }

    /* The layer colours stay; a dark translucent track shows the empty
       share, so toggling a layer reads as the bar filling up or emptying.
       A hairline separates layers where two warm colours meet. */
    .js .meter.is-stuck .meter__track {
      background-color: rgb(20 6 0 / 0.45);
      border-color: rgb(255 255 255 / 0.28);
    }

    .js .meter.is-stuck .meter__segment { box-shadow: inset -1px 0 0 rgb(20 6 0 / 0.5); }

    @media (prefers-reduced-motion: reduce) {
      .js .meter,
      .js .meter::before,
      .js .meter :is(.meter__label, .meter__action, .meter__track, .meter__segment) { transition: none; }
    }

    /* Label + button on top, the track full width beneath. */
    .meter {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "label action" "track track";
      align-items: center;
      gap: 10px var(--space-sm);
    }

    .meter__track { grid-area: track; }

    .meter__label { grid-area: label; }

    .meter__label-desktop { display: none; }

    .meter__label-mobile { display: inline; }

    .meter__action {
      display: inline-flex;
      grid-area: action;
      padding: 10px var(--space-md);
      font-size: var(--fs-caption);
      white-space: nowrap;
    }

  }

  /* Home: segments continue the dark pill, so the stack band has no
     bottom padding and the segments band has no top radius. */
  .band--stack {
    padding-block-end: var(--space-2xl);
    background: var(--burst-violet), var(--surface-canvas-raised);
  }

  .band--segments {
    padding-block-start: var(--space-4xl);
    background: var(--burst-magenta), var(--surface-canvas-raised);
  }

  /* The comparison diagrams are drawn at Figma's 8px label size on a fixed
     canvas. zoom scales canvas and text together (≈10.8px at desktop)
     without re-plotting node positions. (UX C-5) */
  .hub,
  .bundle { zoom: 1.1; }

  @media (min-width: 1024px) {
    .hub,
    .bundle { zoom: 1.35; }
  }
}