/* ============================================================
       Design tokens — pulled from the Figma file's dark theme
       (Join Page Experiment, node 1:1795)
       ============================================================ */
    :root {
      /* surfaces */
      --surface: #1A1C1E;
      --surface-variant: #000000;
      --state-layer: rgba(158, 202, 255, .08);
      --state-layer-hover: rgba(158, 202, 255, .13);
      --divider: #252A30;
      --divider-variant: #252A30;

      /* text */
      --on-background: #E2E2E6;
      --on-surface-variant: #C3C6CF;
      --on-primary-container: #D1E4FF;
      --neutral-50: #76777A;
      --price-note: #718091;

      /* accents */
      --primary-container: #007ACC;
      --primary-bright: #9ECAFF;
      --tertiary-container: #CC0000;
      --on-tertiary-container: #FFECEC;
      --outline: #8D9199;
      --outline-variant: #455261;
      --good: #009817;
      
      --nav-background: var(--surface);
      --option-container: var(--divider);

      --radius: 4px;
      --ease: cubic-bezier(.2, .7, .3, 1);

      /* Every icon on the page: Material Symbols (Outlined, weight 400), taken
         from fonts.gstatic.com and carried as masks rather than <img> or inline
         markup, so they take currentColor and can cross-fade between states.
         ~5.6KB total, and no icon font is loaded — only these glyphs.
         The first five have viewBoxes cropped to the glyph's ink bounds, so the
         box size IS the drawn size (that is what lets the caret match the
         label's cap height exactly). The rest keep Material's stock 960 grid,
         where the ink fills ~83% of the box, matching the 18/24px sizes the
         design uses them at. */
      --ic-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='320 -720 296 480'%3E%3Cpath d='M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z'/%3E%3C/svg%3E");
      --ic-radio-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='80 -880 800 800'%3E%3Cpath d='M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z'/%3E%3C/svg%3E");
      --ic-radio-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='80 -880 800 800'%3E%3Cpath d='M621.5-338.5Q680-397 680-480t-58.5-141.5Q563-680 480-680t-141.5 58.5Q280-563 280-480t58.5 141.5Q397-280 480-280t141.5-58.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z'/%3E%3C/svg%3E");
      --ic-check-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 -840 720 720'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Z'/%3E%3C/svg%3E");
      --ic-check-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 -840 720 720'%3E%3Cpath d='m424-312 282-282-56-56-226 226-114-114-56 56 170 170ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z'/%3E%3C/svg%3E");
      --ic-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
      --ic-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm296.5-143.5Q560-327 560-360t-23.5-56.5Q513-440 480-440t-56.5 23.5Q400-393 400-360t23.5 56.5Q447-280 480-280t56.5-23.5ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z'/%3E%3C/svg%3E");
      --ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 152-90.5 276.5T480-80Zm0-84q104-33 172-132t68-220v-189l-240-90-240 90v189q0 121 68 220t172 132Zm0-316Z'/%3E%3C/svg%3E");
      --ic-hd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M240-360h60v-80h80v80h60v-240h-60v100h-80v-100h-60v240Zm280 0h160q17 0 28.5-11.5T720-400v-160q0-17-11.5-28.5T680-600H520v240Zm60-60v-120h80v120h-80ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z'/%3E%3C/svg%3E");
      --ic-trophy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M280-120v-80h160v-124q-49-11-87.5-41.5T296-442q-75-9-125.5-65.5T120-640v-40q0-33 23.5-56.5T200-760h80v-80h400v80h80q33 0 56.5 23.5T840-680v40q0 76-50.5 132.5T664-442q-18 46-56.5 76.5T520-324v124h160v80H280Zm0-408v-152h-80v40q0 38 22 68.5t58 43.5Zm285 93q35-35 35-85v-240H360v240q0 50 35 85t85 35q50 0 85-35Zm115-93q36-13 58-43.5t22-68.5v-40h-80v152Zm-200-52Z'/%3E%3C/svg%3E");
      --ic-autorenew: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M204-318q-22-38-33-78t-11-82q0-134 93-228t227-94h7l-64-64 56-56 160 160-160 160-56-56 64-64h-7q-100 0-170 70.5T240-478q0 26 6 51t18 49l-60 60ZM481-40 321-200l160-160 56 56-64 64h7q100 0 170-70.5T720-482q0-26-6-51t-18-49l60-60q22 38 33 78t11 82q0 134-93 228t-227 94h-7l64 64-56 56Z'/%3E%3C/svg%3E");
      --ic-headphones: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M360-120H200q-33 0-56.5-23.5T120-200v-280q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480v280q0 33-23.5 56.5T760-120H600v-320h160v-40q0-117-81.5-198.5T480-760q-117 0-198.5 81.5T200-480v40h160v320Zm-80-240h-80v160h80v-160Zm400 0v160h80v-160h-80Zm-400 0h-80 80Zm400 0h80-80Z'/%3E%3C/svg%3E");

      /* Layout contract: the form is locked to its Figma width and never
         shrinks — below 608px the option rows wrap, the bundle logo strip
         clips and the toggle labels break. Slack is taken out of the image
         column instead, and we stack before the image gets too small.
         --img-max caps the image in the two-column layout only; once stacked,
         it fills the column so it stays flush with the form beneath it. */
      --form-w: 608px;
      --img-max: 640px;

      /* Channel-wall logo scale; see .ch img */
      --logo-scale: 1;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      background: var(--surface);
      color: var(--on-background);
      font-family: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: .25px;
      -webkit-font-smoothing: antialiased;
    }

    img {
      max-width: 100%;
    }

    /* Visually hidden, but present for screen readers and the heading outline */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }

    /* Shared plumbing for the masked Material Symbols above */
    .ic,
    .box::before,
    .box::after,
    .radio::before,
    .radio::after,
    .submit .caret {
      background-color: currentColor;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
    }

    .box::before,
    .box::after,
    .radio::before,
    .radio::after {
      content: '';
      position: absolute;
      inset: 0;
      transition: opacity .2s var(--ease);
    }

    /* One-shot icons. Size and colour come from the context that uses them. */
    .ic {
      display: block;
      flex: none;
    }

    .ic-check-circle {
      -webkit-mask-image: var(--ic-check-circle);
      mask-image: var(--ic-check-circle);
    }

    .ic-lock {
      -webkit-mask-image: var(--ic-lock);
      mask-image: var(--ic-lock);
    }

    .ic-shield {
      -webkit-mask-image: var(--ic-shield);
      mask-image: var(--ic-shield);
    }

    .ic-hd {
      -webkit-mask-image: var(--ic-hd);
      mask-image: var(--ic-hd);
    }

    .ic-trophy {
      -webkit-mask-image: var(--ic-trophy);
      mask-image: var(--ic-trophy);
    }

    .ic-autorenew {
      -webkit-mask-image: var(--ic-autorenew);
      mask-image: var(--ic-autorenew);
    }

    .ic-headphones {
      -webkit-mask-image: var(--ic-headphones);
      mask-image: var(--ic-headphones);
    }

    /* ============================================================
       Nav bar
       ============================================================ */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      height: 64px;
      padding: 0 46px;
      background: var(--nav-background);
      border-bottom: 2px solid var(--divider-variant);
    }

    .nav-logo {
      display: flex;
      align-items: center;
    }

    .nav-logo img {
      display: block;
      width: auto;
      height: 29px;
    }

    .nav-login {
      display: flex;
      align-items: center;
      align-self: stretch;
      padding: 0 24px;
      color: var(--primary-bright);
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      letter-spacing: .1px;
      text-decoration: none;
      border-radius: var(--radius);
      transition: background-color .2s var(--ease);
    }

    .nav-login:hover {
      background: var(--state-layer);
    }

    .nav-login:focus-visible {
      outline: 2px solid var(--primary-bright);
      outline-offset: -2px;
    }

    /* ============================================================
       Page shell
       ============================================================ */
    /* 1280px of content = image (640) + gap (32) + form (608) */
    .page {
      max-width: 1328px;
      margin: 0 auto;
      padding: 40px 24px 0;
    }

    /* Page-block heading (channels, benefits) — title/large. These are the
       page's only content headings, hence the only h2s. */
    .block-title {
      margin: 0;
      font-size: 22px;
      font-weight: 600;
      line-height: 28px;
      letter-spacing: 0;
      /* The section centres this as a flex item, which is invisible until the
         text wraps — then the box fills the width and the lines need centring
         of their own. */
      text-align: center;
      color: var(--on-background);
    }

    /* "1.Create Account" etc. are <legend>s, not headings: they name a group of
       form controls, which is what a legend is for, and keeping them out of the
       heading outline leaves only real topics in it. Typography unchanged
       (Desktop/title/medium). The period carries an unusually wide letter-space
       in the design — reproduced here. */
    .step-title {
      margin: 0 0 16px;
      padding: 0;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      letter-spacing: .15px;
      color: var(--on-background);
    }

    .step-title .dot {
      letter-spacing: 3.15px;
    }

    /* ============================================================
       Hero — image column + form column
       ============================================================ */
    /* Form track is rigid; the image track absorbs every bit of slack.
       ⚠ STACK BREAKPOINT = 1150px. It appears in three places that must stay
       in sync: the @media below, the .hero-media aspect-ratio swap, and the
       <picture> source's media attribute. If they drift, the layout stacks
       while the portrait crop is still loaded (or vice versa). */
    .hero {
      display: grid;
      grid-template-columns: minmax(0, var(--img-max)) var(--form-w);
      gap: 32px;
      align-items: start;
      justify-content: center;
    }
    .hero.hero-pg{
      display: flex;
    }
    .hero.hero-pg .hero-media{
      display: none;
    }

    /* Portrait on desktop, landscape on mobile. Never cropped: the whole
       frame stays visible at every width, so the image simply ends higher
       up than the form does. */
    .hero-media {
      display: block;
      border-radius: var(--radius);
      overflow: hidden;
      aspect-ratio: 960 / 1086;
      background: #2C3542;
    }

    .hero-media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .join-form {
      display: flex;
      flex-direction: column;
      gap: 40px;
      min-width: 0;
    }

    /* Each numbered step is a <fieldset>/<legend>, not a heading — see the
       note by .step-title. The flex layout lives on an inner wrapper because a
       rendered <legend> is not a reliable flex item across browsers. */
    .step {
      margin: 0;
      padding: 0;
      border: 0;
      min-width: 0;
    }

    .step-body {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }

    /* ============================================================
       1. Create account
       ============================================================ */
    .field-row {
      display: flex;
      gap: 24px;
    }

    /* Material-style outlined field with a notched label */
    .field {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
    }

    .field input {
      width: 100%;
      height: 42px;
      padding: 0 15px;
      font: inherit;
      font-size: 14px;
      letter-spacing: .25px;
      color: var(--on-background);
      background: transparent;
      border: 1px solid var(--outline);
      border-radius: var(--radius);
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    }

    /* Dimmed, as a placeholder should be — it was previously forced to full
       body-text colour, which read as a filled-in value. Set explicitly rather
       than left to the UA: Chrome's default (#757575) is within a shade of
       --neutral-50, but Firefox also applies opacity .54 on top, so the
       defaults don't agree. opacity:1 neutralises that. */
    .field input::placeholder {
      color: var(--neutral-50);
      opacity: 1;
    }

    .field input:hover {
      border-color: var(--on-surface-variant);
    }

    .field input:focus {
      outline: none;
      border-color: var(--primary-bright);
      box-shadow: 0 0 0 1px var(--primary-bright) inset;
    }

    .field label {
      position: absolute;
      top: -8px;
      left: 11px;
      padding: 0 4px;
      background: var(--surface);
      color: var(--on-surface-variant);
      font-size: 12px;
      line-height: 16px;
      letter-spacing: .4px;
      pointer-events: none;
      transition: color .2s var(--ease);
    }

    .field input:focus + label {
      color: var(--primary-bright);
    }

    /* Checkbox row */
    .check-row {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--neutral-50);
      font-size: 12px;
      line-height: 16px;
      letter-spacing: .4px;
      cursor: pointer;
      width: fit-content;
    }

    .check-row input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* check_box_outline_blank ⇄ check_box (filled) */
    .box {
      position: relative;
      flex: none;
      width: 16px;
      height: 16px;
      color: var(--neutral-50);
      transition: color .2s var(--ease);
    }

    .box::before {
      -webkit-mask-image: var(--ic-check-off);
      mask-image: var(--ic-check-off);
    }

    .box::after {
      -webkit-mask-image: var(--ic-check-on);
      mask-image: var(--ic-check-on);
      opacity: 0;
    }

    .check-row:hover .box {
      color: var(--on-surface-variant);
    }

    /* Checked state uses the same white as the section headings; the filled
       symbol carries the tick as a knock-out. */
    .check-row input:checked + .box {
      color: var(--on-background);
    }

    .check-row input:checked + .box::before {
      opacity: 0;
    }

    .check-row input:checked + .box::after {
      opacity: 1;
    }

    .check-row input:focus-visible + .box {
      box-shadow: 0 0 0 3px rgba(158, 202, 255, .35);
    }

    /* ============================================================
       2. Select deal — segmented toggle + bundle logo strip
       ============================================================ */
    .deal {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
    }

    .toggle {
      position: relative;
      display: flex;
      width: 100%;
      background: var(--state-layer);
      border: 1px solid var(--outline-variant);
      border-radius: 24px;
    }

    /* The filled pill slides between the two halves */
    .toggle-thumb {
      position: absolute;
      top: -1px;
      bottom: -1px;
      left: -1px;
      width: calc(50% + 1px);
      background: var(--primary-container);
      border-radius: 24px;
      box-shadow: 0 8px 12px 6px rgba(0, 0, 0, .15), 0 4px 4px 0 rgba(0, 0, 0, .3);
      transition: transform .32s var(--ease);
      transform: translateX(100%);
    }

    .toggle[data-deal="single"] .toggle-thumb {
      transform: translateX(0);
    }

    .toggle button {
      position: relative;
      z-index: 1;
      flex: 1 1 50%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2px 10px;
      min-width: 0;
      min-height: 42px;
      padding: 10px 24px;
      font: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      letter-spacing: .1px;
      color: var(--on-primary-container);
      background: none;
      border: 0;
      border-radius: 24px;
      cursor: pointer;
      opacity: .72;
      transition: opacity .25s var(--ease);
    }

    .toggle button[aria-pressed="true"] {
      opacity: 1;
    }

    .toggle button:hover {
      opacity: 1;
    }

    .toggle button:focus-visible {
      outline: 2px solid var(--primary-bright);
      outline-offset: 2px;
    }

    /* Keeps the deal name on one line; if the badge no longer fits beside it
       the badge drops to a second centred line instead of breaking the words. */
    .t-label {
      white-space: nowrap;
    }

    /* Compact alternative for the bundle label, swapped in at ≤480px */
    .t-short {
      display: none;
    }

    .badge-off {
      flex: none;
      padding: 2px 8px;
      background: var(--tertiary-container);
      color: var(--on-tertiary-container);
      font-size: 12px;
      font-weight: 700;
      line-height: 17px;
      letter-spacing: 0;
      border-radius: 24px;
    }

    /* --- Bundle logo strip: slides down when the bundle is selected --- */
    .logo-strip-wrap {
      display: grid;
      grid-template-rows: 1fr;
      width: 100%;
      transition: grid-template-rows .35s var(--ease), opacity .28s var(--ease);
    }

    .logo-strip-wrap[hidden] {
      display: grid;
      grid-template-rows: 0fr;
      opacity: 0;
    }

    .logo-strip-clip {
      overflow: hidden;
      min-height: 0;
      display: flex;
      justify-content: center;
    }

    .logo-strip {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 16px 48px;
      /* Kept transparent purely to preserve the box metrics — the visible rule
         is drawn by ::after so the sides can be gradient-faded. */
      border: 1px solid transparent;
      border-top: 0;
      border-bottom-width: 2px;
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
      transform: translateY(0);
      transition: transform .35s var(--ease);
    }

    /* The rule, masked so the side strokes fade out towards the top the way
       they do in the Figma. The mask is opaque at the bottom edge, so the
       bottom stroke and the two rounded corners stay at full strength.
       Absolutely positioned, so it is not a flex item of .logo-strip. */
    .logo-strip::after {
      content: '';
      position: absolute;
      top: 0;
      right: -1px;
      bottom: -2px;
      left: -1px;
      border: 1px solid var(--primary-container);
      border-top: 0;
      border-bottom-width: 2px;
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
      -webkit-mask-image: linear-gradient(to bottom, transparent 5%, #000 95%);
      mask-image: linear-gradient(to bottom, transparent 5%, #000 95%);
      pointer-events: none;
    }

    .logo-strip-wrap[hidden] .logo-strip {
      transform: translateY(-12px);
    }

    .logo-strip .sep {
      flex: none;
      width: 1px;
      height: 33px;
      background: var(--primary-container);
    }

    .ls-item {
      display: flex;
      align-items: center;
      flex: none;
    }

    .logo-strip img {
      display: block;
      width: auto;
      flex: none;
    }

    .logo-jpk {
      height: 19px;
    }

    .logo-cpl {
      height: 26px;
    }

    .logo-bls {
      height: 16px;
    }

    /* ============================================================
       3. Choose plan
       ============================================================ */
    .plan-sets {
      position: relative;
    }

    .plan-set {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 12px;
      /* room for the BEST VALUE chip straddling the first card's border */
      transition: opacity .25s var(--ease), transform .25s var(--ease);
    }

    .plan-set[hidden] {
      display: none;
    }

    .plan-set.is-entering {
      opacity: 0;
      transform: translateY(-6px);
    }

    .plan {
      position: relative;
      display: flex;
      align-items: center;
      /* price + radio vertically centred in the row */
      gap: 8px;
      padding: 20px 14px 16px;
      background: var(--option-container);
      border: 1px solid var(--outline-variant);
      border-radius: var(--radius);
      cursor: pointer;
      transition: border-color .22s var(--ease), background-color .22s var(--ease), box-shadow .22s var(--ease);
    }

    .plan:hover {
      border-color: #5C6C7E;
      background: #2C343D;
    }

    .plan input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* Selected: blue edge. Drawn as border-colour + a 1px inset ring so the
       2px look from the design costs no layout shift when switching. */
    /* Selected keeps the same fill as unselected — the blue edge carries the
       state. Restating the background also stops the hover colour sticking on
       a selected row. */
    .plan:has(input:checked) {
      border-color: var(--primary-container);
      box-shadow: 0 0 0 1px var(--primary-container) inset;
      background: var(--option-background);
    }

    .plan:has(input:focus-visible) {
      box-shadow: 0 0 0 1px var(--primary-container) inset, 0 0 0 3px rgba(158, 202, 255, .3);
    }

    /* Radio — takes the same blue as the selected outline */
    /* radio_button_unchecked ⇄ radio_button_checked, in the same blue as the
       selected card outline */
    .radio {
      position: relative;
      flex: none;
      width: 20px;
      height: 20px;
      color: var(--outline);
      transition: color .2s var(--ease);
    }

    .radio::before {
      -webkit-mask-image: var(--ic-radio-off);
      mask-image: var(--ic-radio-off);
    }

    .radio::after {
      -webkit-mask-image: var(--ic-radio-on);
      mask-image: var(--ic-radio-on);
      opacity: 0;
    }

    .plan:hover .radio {
      color: var(--on-surface-variant);
    }

    .plan input:checked ~ .radio {
      color: var(--primary-container);
    }

    .plan input:checked ~ .radio::before {
      opacity: 0;
    }

    .plan input:checked ~ .radio::after {
      opacity: 1;
    }

    .plan-body {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      flex: 1 1 auto;
      min-width: 0;
    }

    .plan-text {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    /* Titles are split on their "·" by script into [part][dot][part]. Flex so
       the dot is the only place a line can break — each part is nowrap, so the
       breaker can never pick some arbitrary space inside "180 Days Access". */
    .plan-name {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: .28em;
      row-gap: 0;
      font-size: 20px;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: .15px;
      color: var(--on-primary-container);
    }

    .pn-part {
      white-space: nowrap;
    }

    /* When it has to wrap: the dot becomes a full-width, zero-height flex line,
       which forces the break and clips the glyph away. The second part then
       starts a fresh line with no leading space to trim. */
    .plan-name.is-wrapped .pn-dot {
      flex: 0 0 100%;
      height: 0;
      overflow: hidden;
    }

    .plan-terms {
      font-size: 12px;
      font-weight: 500;
      line-height: 17px;
      letter-spacing: .5px;
      color: var(--price-note);
    }

    .badge-save {
      flex: none;
      margin-top: 4px;
      padding: 0 8px;
      background: var(--tertiary-container);
      color: var(--on-tertiary-container);
      font-size: 12px;
      font-weight: 700;
      line-height: 20px;
      text-transform: uppercase;
      border-radius: var(--radius);
      white-space: nowrap;
    }

    .badge-best {
      position: absolute;
      top: -12px;
      left: 14px;
      padding: 4px 8px;
      background: var(--primary-container);
      color: var(--on-primary-container);
      font-size: 12px;
      font-weight: 700;
      line-height: 16px;
      letter-spacing: .4px;
      border-radius: var(--radius);
    }

    .plan-price {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 3px;
      flex: none;
      color: var(--on-primary-container);
      white-space: nowrap;
    }

    .plan-price .dollars {
      font-size: 36px;
      font-weight: 800;
      line-height: 38px;
      letter-spacing: 0;
    }

    .plan-price .frac {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
      letter-spacing: .1px;
    }

    /* Figma stacks these two 20px lines 16px apart, not 20px, so the pair is
       36px tall against the big number's 38px and the two blocks read as the
       same height. Without the overlap the stack is 40px and hangs below. */
    .plan-price .frac span:first-child {
      margin-bottom: -4px;
    }

    /* ============================================================
       Submit + reassurance
       ============================================================ */
    .submit {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      width: 100%;
      height: 50px;
      font: inherit;
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      letter-spacing: .1px;
      color: var(--on-tertiary-container);
      background: var(--tertiary-container);
      border: 0;
      border-radius: var(--radius);
      cursor: pointer;
      transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease);
    }

    /* chevron_right, scaled so the glyph is exactly as tall as the capital C
       of the label: Inter's cap height is .727em, and the cropped viewBox is
       296:480, hence the width. Nudges right on hover. */
    .submit .caret {
      flex: none;
      width: .449em;
      height: .727em;
      -webkit-mask-image: var(--ic-chevron-right);
      mask-image: var(--ic-chevron-right);
      transition: translate .2s var(--ease);
    }

    .submit:hover {
      background: #D91111;
      box-shadow: 0 4px 14px rgba(204, 0, 0, .3);
    }

    .submit:hover .caret {
      translate: 2px 0;
    }

    .submit:active {
      transform: translateY(1px);
    }

    .submit:focus-visible {
      outline: 2px solid var(--primary-bright);
      outline-offset: 2px;
    }

    .trust {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      justify-content: center;
    }

    .trust-item {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      color: var(--neutral-50);
      font-size: 12px;
      line-height: 18px;
      letter-spacing: .25px;
    }

    .trust-item .ic {
      width: 18px;
      height: 18px;
      color: var(--good);
    }

    .fineprint {
      margin: 0;
      text-align: center;
      color: var(--neutral-50);
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0;
    }

    .fineprint strong {
      font-weight: 700;
    }

    .fineprint a {
      color: inherit;
      font-weight: 700;
      text-decoration: underline;
      transition: color .2s var(--ease);
    }

    .fineprint a:hover {
      color: var(--on-background);
    }
    .footer{
      font-size: 12px;
      margin-top: 56px;
      line-height: 16px;
      color: var(--neutral-50);
      background-color: var(--surface-variant);
      padding: 16px 24px;
    }
    .footer a{
      color: inherit;
      text-decoration: underline;
      transition: color .2s var(--ease);
    }
    .footer-links{
      display:inline-block;
      list-style:none;
      margin:10px 0 20px;
      padding:0;
      text-transform:uppercase;
    }
    .footer-links li{
      display:inline-block;
      zoom:1;vertical-align:
      middle;padding:0;
      margin:20px 0 0;
      height:100%;
      border-right:1px solid #8ba8b7;
      max-height: 20px;
    }
    .footer-links li:last-child{
      border-right:none;
    }
    .footer-links li a{
      display:block;
      white-space:nowrap;
      text-align:center;
      padding:1px 6px;
      text-decoration:none;
      color:#ffffff;
    }
    .footer-links li a:hover{
      color: var(--on-background);
    }


    /* ============================================================
       Channels included
       ============================================================ */
    .channels {
      margin-top: 64px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    .channel-rows {
      width: 100%;
    }

    /* The hairline is carried by each logo's own bottom border rather than by
       the row. Borders of everything sharing a visual line join into one
       continuous rule, so a row that wraps gets a rule per wrapped line for
       free — no width conditions to keep in sync. Horizontal spacing therefore
       has to come from the logos' padding, not a column gap, or the segments
       would dash instead of meeting. Rows are still authored to the Figma's
       groups, and each rule tracks the width of the line above it.

       That is also why items stretch rather than centre. The logos no longer
       share one height (see .ch img), and a centred item would carry its own
       bottom border to its own baseline, jogging the rule everywhere a line
       mixes a tall mark with a short one. Stretching gives every .ch on a line
       the full line height, so the borders meet; the logo itself is still
       centred inside it by .ch's own align-items. */
    .channel-row {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      width: fit-content;
      max-width: 100%;
      margin: 0 auto;
    }

    .channel-row:first-child {
      border-top: 1px solid var(--divider);
    }

    /* A floor on the logo box, not a height: it holds the row rhythm even
       though the marks themselves range from 13px to 24px tall, so the wall
       reads as evenly spaced lines instead of rows that breathe with whatever
       happens to sit in them. 24px clears every logo but Carnal Pups, whose
       mascot is 40px and does make its row taller — the alternative is
       cropping the mascot. */
    .ch {
      display: flex;
      align-items: center;
      flex: none;
      /* Opts out of the page-wide border-box so the floor below measures the
         logo box alone. Under border-box the padding already exceeds it and
         min-height would do nothing — and it would need rewriting for every
         breakpoint that changes the padding. */
      box-sizing: content-box;
      min-height: calc(24px * var(--logo-scale));
      padding: 17px 12px;
      border-bottom: 1px solid var(--divider);
    }

    /* Artwork is 3x, and unlike the previous set it is not normalised to a
       common canvas height — the design team sized each mark individually so
       they carry equal optical weight rather than equal height (a long thin
       wordmark has to sit shorter than a short chunky one). So the file's own
       dimensions ARE the spec, and the job here is purely to undo the 3x.
       zoom does that off the intrinsic size, which means an asset swapped in
       place at a new size needs no change here, and unlike transform it still
       affects layout, so .ch and the hairlines size to the scaled box.
       --logo-scale stays the single knob for shrinking the whole set.
       The marks are pure white, so weight comes from opacity: 30% at rest
       lands around #5F6062 on this background, close to how the previous
       tinted set read, and 60% lifts them to roughly #A3A4A5 on hover. */
    .ch img {
      display: block;
      width: auto;
      height: auto;
      zoom: calc(var(--logo-scale) / 3);
      opacity: .3;
      transition: opacity .25s var(--ease);
    }

    .ch:hover img,
    .ch:focus-within img {
      opacity: .6;
    }

    /* ============================================================
       Membership benefits
       ============================================================ */
    .benefits {
      margin-top: 56px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    .benefit-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
      width: 100%;
    }

    .benefit {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 16px 20px 16px 16px;
      background: var(--state-layer);
      border-radius: var(--radius);
      transition: background-color .25s var(--ease);
    }

    .benefit:hover {
      background: var(--state-layer-hover);
    }

    .benefit .ic {
      width: 24px;
      height: 24px;
      color: var(--primary-bright);
    }

    .benefit h3 {
      margin: 0 0 4px;
      font-size: 14px;
      font-weight: 500;
      line-height: 18px;
      letter-spacing: .25px;
      color: #fff;
    }

    .benefit p {
      margin: 0;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: .4px;
      color: var(--neutral-50);
    }

    /* ============================================================
       Stacked — ≤1150px  (must match the <picture> source media attribute)
       The page narrows to a fixed column and the image sits above the form as
       landscape. Capping the column keeps the option rows from stretching to
       the full viewport.
       ============================================================ */
    @media (max-width: 1150px) {
      .page {
        /* 704 of content + 32px gutters */
        max-width: 768px;
        padding: 32px 32px 0;
      }

      .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
      }

      /* Fills the column, so it stays flush with the form beneath it. The
         640px cap applies to the two-column layout only. */
      .hero-media {
        aspect-ratio: 1256 / 704;
      }

      .join-form {
        gap: 36px;
      }

      .benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .channels {
        margin-top: 48px;
      }

      .nav {
        padding: 0 24px;
      }
    }

    /* ============================================================
       ≤672px — trim the gutters (and the nav) so the form can hold its
       608px design width for another 32px of viewport. Nothing inside the
       form changes here.
       ============================================================ */
    @media (max-width: 672px) {
      .page {
        max-width: 640px;
        padding: 24px 16px 48px;
      }

      .nav {
        height: 56px;
        padding: 0 16px;
      }

      .nav-logo img {
        height: 24px;
      }

      .nav-login {
        padding: 0 12px;
        font-size: 15px;
      }
    }

    /* ============================================================
       Mobile — ≤639px
       The first width at which the viewport genuinely cannot hold the form
       at 608px, so this is the only place the form is allowed to adapt.
       ============================================================ */
    @media (max-width: 639px) {

      .field-row {
        flex-direction: column;
        gap: 26px;
      }

      .toggle button {
        padding: 10px 12px;
        font-size: 14px;
        gap: 6px;
      }

      .badge-off {
        padding: 1px 6px;
        font-size: 11px;
      }

      /* Tighter, but still one line with the separators intact — the strip
         only has to survive down to 561px, where the two-row mode takes over. */
      .logo-strip {
        gap: 12px;
        padding: 14px 20px;
      }

      .plan {
        padding: 18px 12px 14px;
        gap: 10px;
      }

      /* Deliberately NOT switching .plan-body to a column here: the title
         wrapping to two lines frees enough width to keep the SAVE badge
         beside it, which is where it belongs. Cards take over at 480px. */
      .plan-body {
        gap: 10px;
      }

      .plan-name {
        font-size: 17px;
        line-height: 22px;
      }

      .plan-price .dollars {
        font-size: 28px;
        line-height: 30px;
      }

      .plan-price .frac {
        font-size: 12px;
        line-height: 17px;
      }

      .trust {
        gap: 8px 16px;
      }

      .ch {
        padding: 14px 10px;
      }

      :root {
        --logo-scale: .85;
      }

      /* Stays 2x2 here — it only stacks below 400px, see further down */
      .benefit-grid {
        gap: 12px;
      }

      .channels,
      .benefits {
        margin-top: 40px;
      }
    }

    /* ============================================================
       Bundle logos — ≤560px
       One line no longer fits. Rather than let all three wrap arbitrarily,
       Carnal+ (the umbrella brand) takes the top line on its own and the two
       network logos share the line below. Sized so it is never three lines.
       ============================================================ */
    @media (max-width: 560px) {
      .logo-strip {
        width: 100%;
        flex-wrap: wrap;
        /* row gap = below Carnal+; column gap = between JockPack and BluStuds */
        gap: 8px 16px;
        padding: 16px;
      }

      .logo-strip .sep {
        display: none;
      }

      .ls-cpl {
        order: -1;
        flex: 0 0 100%;
        justify-content: center;
        /* On top of the 8px row gap, so Carnal+ gets 16px of clear space above
           the two network logos — up from the 10px it had before. */
        margin-bottom: 8px;
      }

      .logo-cpl {
        height: 22px;
      }

      .logo-jpk {
        height: 15px;
      }

      .logo-bls {
        height: 13px;
      }
    }

    /* ============================================================
       Small phones — ≤480px
       The plan options become vertical pricing cards: centred, no radio, the
       whole card is the control, and selection is carried by fill colour the
       same way the deal toggle carries it.
       ============================================================ */
    @media (max-width: 480px) {
      .page {
        padding: 20px 14px 0;
      }

      /* Short label, so the discount pill never drops below the deal name */
      .t-long {
        display: none;
      }

      .t-short {
        display: inline;
      }

      .toggle button {
        font-size: 13px;
        padding: 10px 8px;
        gap: 2px 6px;
      }

      .badge-off {
        padding: 1px 6px;
        font-size: 10px;
        line-height: 15px;
      }

      .plan-set {
        gap: 12px;
        padding-top: 14px;
      }

      .plan {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 22px 16px 18px;
        background: var(--option-background);
        /* border-color: transparent; */
      }

      /* Flatten the desktop wrappers so title / price / discount / terms can
         be ordered independently without a second markup tree. */
      .plan-body,
      .plan-text {
        display: contents;
      }

      /* The whole card is the hit target now */
      .plan .radio {
        display: none;
      }

      .plan-name {
        order: 1;
        justify-content: center;
        font-size: 17px;
        line-height: 23px;
      }

      .plan-price {
        order: 2;
        justify-content: center;
        /* +8px on the 8px flex gap = 16px clear below the title */
        margin-top: 8px;
      }

      /* The card's text-align:center would otherwise centre the cents over
         the wider "/Month" beneath it; keep them left-aligned as on desktop. */
      .plan-price .frac {
        text-align: left;
      }

      /* Price scaled up 25% for the cards — the whole block, so the cents and
         /Month keep their proportion to the number and the two stay aligned.
         That includes the Figma overlap, which is a ratio, not a constant. */
      .plan-price .dollars {
        font-size: 42.5px;
        line-height: 45px;
      }

      .plan-price .frac {
        font-size: 16.25px;
        line-height: 22.5px;
      }

      .plan-price .frac span:first-child {
        margin-bottom: -5px;
      }

      /* Discount sits directly under the price, which is what it qualifies */
      .badge-save {
        order: 3;
        margin: 0;
      }

      /* Same 16px clear below the price + savings group. Sitting on .plan-terms
         rather than the badge means the spacing survives on the options that
         have no savings badge. */
      .plan-terms {
        order: 4;
        margin-top: 8px;
      }

      .plan:hover:not(:has(input:checked)) {
        background: #2C343D;
        border-color: transparent;
      }

      /* Selected card takes the same fill as the selected toggle half */
      .plan:has(input:checked) {
        background: var(--primary-container);
        border-color: var(--primary-container);
      }

      .plan:has(input:checked) .plan-terms {
        color: rgba(209, 228, 255, .72);
      }

      /* Ribbon has to read on both the grey and the blue card */
      .badge-best {
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary-bright);
        color: #00325A;
      }

      .footer-links li{
        display:block;
        border-right:none;
        max-height:none;
      }
      .footer-links li a{
        white-space:normal;
      }

      :root {
        --logo-scale: .75;
      }
    }

    /* ============================================================
       Narrowest phones — <400px
       Two benefit cards side by side stop being readable below this.
       ============================================================ */
    @media (max-width: 399px) {
      .benefit-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        transition-duration: .01ms !important;
      }
    }