/** Shopify CDN: Minification failed

Line 1085:5 Expected identifier but found "["
Line 1452:0 Unexpected "}"
Line 2245:31 Unexpected "*"

**/
:root {
      --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    }
    html, body { overflow-x: clip; }
    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      letter-spacing: -0.011em;
      color: rgba(15,65,108,0.88);
      background: #ffffff;
      line-height: 1.6;
      /* Room for the sticky add-to-cart so it never covers the footer */
      padding-bottom: 80px;
    }
    @media (min-width: 768px) {
      body { padding-bottom: 84px; }
    }
    h1, h2, h3, h4, h5 {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.04;
      color: #0F416C;
    }
    h1 { font-weight: 900; }
    /* Brand uses DM Sans Bold throughout — kill any browser-default italics on display headings */
    h1 em, h2 em, h3 em, h4 em, h5 em,
    h1 i,  h2 i,  h3 i,  h4 i,  h5 i {
      font-style: normal;
      color: #3FA35B;
    }
    /* Brand accent — green pop on selected words inside headings (no italics, brand uses DM Sans Bold only) */
    .accent {
      color: #3FA35B;
      font-style: normal;
    }

    .grain { position: relative; isolation: isolate; }
    .grain::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      opacity: .35; mix-blend-mode: multiply; z-index: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    }
    .grain > * { position: relative; z-index: 1; }

    .gradient-cloud {
      background:
        radial-gradient(120% 80% at 80% 0%, rgba(15,65,108,0.32), transparent 60%),
        radial-gradient(90% 70% at 0% 100%, rgba(221,233,245,0.55), transparent 65%),
        linear-gradient(180deg, #eaf1f8 0%, #dbe9f5 100%);
    }
    .gradient-sky {
      background:
        radial-gradient(80% 80% at 10% 0%, rgba(255,255,255,0.4), transparent 60%),
        linear-gradient(160deg, #5e98c5 0%, #0a2e4d 100%);
    }
    .gradient-deep {
      background:
        radial-gradient(60% 80% at 50% 0%, rgba(15,65,108,0.25), transparent 70%),
        linear-gradient(180deg, #0a2e4d 0%, #082238 100%);
    }
    .gradient-soft {
      background: linear-gradient(180deg, #f6f9fc 0%, #e8f0f7 100%);
    }

    .photo { position: relative; overflow: hidden; border-radius: 1.2rem; isolation: isolate; }
    .photo > img {
      display: block; width: 100%; height: 100%; object-fit: cover;
      transition: transform .9s var(--ease-out);
    }
    .photo:hover > img { transform: scale(1.04); }

    .reveal {
      opacity: 0; transform: translateY(18px);
      transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
      will-change: transform, opacity;
    }
    .reveal.in { opacity: 1; transform: none; }
    .reveal[data-delay="1"] { transition-delay: .08s; }
    .reveal[data-delay="2"] { transition-delay: .16s; }
    .reveal[data-delay="3"] { transition-delay: .24s; }
    .reveal[data-delay="4"] { transition-delay: .32s; }
    .reveal[data-delay="5"] { transition-delay: .40s; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
      padding: 1.05rem 1.6rem;
      border-radius: 999px;
      font-weight: 600; letter-spacing: 0.005em;
      transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring),
                  background-color .2s var(--ease-out), color .2s var(--ease-out);
    }
    .btn-navy {
      background: #0F416C; color: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 24px -10px rgba(15,65,108,0.55);
    }
    .btn-navy:hover { transform: translateY(-2px); background: #0a2e4d; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 16px 32px -10px rgba(15,65,108,0.65); }
    .btn-navy:active { transform: translateY(0); }
    .btn-navy:focus-visible { outline: 2px solid #0F416C; outline-offset: 3px; }

    .btn-dark { background: #0F416C; color: #fff; }
    .btn-dark:hover { transform: translateY(-2px); background: #0a2e4d; }
    .btn-ghost { background: rgba(15,65,108,0.05); color: #0F416C; }
    .btn-ghost:hover { background: rgba(15,65,108,0.08); }
    .btn-outline { background: transparent; color: #0F416C; border: 1.5px solid rgba(15,65,108,0.22); }
    .btn-outline:hover { transform: translateY(-2px); border-color: rgba(15,65,108,0.5); }

    .num {
      flex: none;
      display: inline-flex; align-items: center; justify-content: center;
      width: 2.5rem; height: 2.5rem; border-radius: 999px;
      background: #0F416C; color: #fff;
      font-family: 'DM Serif Display', serif; font-weight: 400;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 6px 14px -6px rgba(15,65,108,0.55);
    }
    .stars { display: inline-flex; gap: 2px; color: #d99536; }

    .lift { transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring); }
    .lift:hover { transform: translateY(-4px); }

    .price-card {
      position: relative;
      border: 1.5px solid rgba(15,65,108,0.10);
      border-radius: 1.5rem;
      padding: .65rem .8rem .8rem;
      cursor: pointer;
      transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .25s var(--ease-spring), transform .25s var(--ease-spring);
      background: #fff;
      display: flex; flex-direction: column;
    }
    @media (min-width: 640px) {
      .price-card { padding: .85rem 1.2rem .95rem; }
    }
    .price-card:hover { transform: translateY(-2px); }
    .price-card-light { background: #DDE9F5; color: #0F416C; border-color: rgba(15,65,108,0.18); }
    .price-card-dark  { background: #0F416C; color: #fff;     border-color: rgba(255,255,255,0.14); }

    /* Radio dot: top-right corner, Lyvalign-style */
    .price-card .check {
      position: absolute; top: .75rem; right: .75rem;
      width: 1.15rem; height: 1.15rem; border-radius: 999px;
      border: 1.5px solid rgba(15,65,108,0.32);
      background: transparent;
      display: inline-flex; align-items: center; justify-content: center;
      transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
    }
    @media (min-width: 640px) {
      .price-card .check {
        top: 1rem; right: 1rem;
        width: 1.35rem; height: 1.35rem;
      }
    }
    .price-card-dark .check { border-color: rgba(255,255,255,0.45); }

    input[name="plan"]:checked + .price-card-light {
      border-color: #0F416C;
      box-shadow: 0 14px 32px -14px rgba(15,65,108,0.3);
    }
    input[name="plan"]:checked + .price-card-dark {
      border-color: #ffffff;
      box-shadow: 0 14px 32px -14px rgba(8,34,56,0.55);
    }
    input[name="plan"]:checked + .price-card-light .check {
      background: #0F416C; border-color: #0F416C;
    }
    input[name="plan"]:checked + .price-card-dark .check {
      background: #ffffff; border-color: #ffffff;
    }
    input[name="plan"]:checked + .price-card-light .check::after {
      content: ""; width: .48rem; height: .48rem; border-radius: 999px; background: #fff;
    }
    input[name="plan"]:checked + .price-card-dark .check::after {
      content: ""; width: .48rem; height: .48rem; border-radius: 999px; background: #0F416C;
    }

    /* Pricing card internals */
    .pc-brand {
      /* Reserve 2 lines on mobile so "Correctez Pro" wrap height matches
         "Correctez" — keeps the rows below in lockstep across both cards */
      min-height: 2.5em;
      display: flex;
      align-items: flex-start;
    }
    /* Reserve 2 lines of pc-sub on mobile so "BELT + PRO KIT" wrap (narrow
       viewports like 320px) doesn't push the dark card's image down */
    .pc-sub-wrap { min-height: 2.2em; }
    .pc-image-wrap {
      height: 12.75rem;
      display: flex; align-items: center; justify-content: center;
    }
    .pc-image-wrap img {
      max-height: 100%;
      max-width: 100%;
      height: auto;
      width: auto;
      object-fit: contain;
    }
    .pc-price-row { min-height: 2.25rem; }
    .pc-badge-row { min-height: 2.5rem; }
    @media (min-width: 640px) {
      .pc-brand { min-height: 0; }
      .pc-sub-wrap { min-height: 0; }
      .pc-image-wrap { height: 16rem; }
      .pc-price-row { min-height: 0; }
      .pc-badge-row { min-height: 0; }
    }
    .pc-sub { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
    .pc-strike { opacity: .55; text-decoration: line-through; font-weight: 600; }
    .price-card-dark .pc-strike { opacity: .55; }
    .pc-chip {
      display: inline-flex; align-items: center; gap: .35rem;
      padding: .45rem .75rem; border-radius: 999px;
      border: 1.5px solid rgba(15,65,108,0.32);
      color: inherit;
      font-size: .6rem; font-weight: 800; letter-spacing: .14em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    @media (min-width: 640px) {
      .pc-chip {
        gap: .45rem; padding: .5rem 1rem;
        font-size: .68rem; letter-spacing: .18em;
      }
    }
    .price-card-dark .pc-chip { border-color: rgba(255,255,255,0.4); }
    .pc-included-title { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .55; }
    .pc-check-bullet {
      width: .95rem; height: .95rem; border-radius: 999px;
      background: rgba(15,65,108,0.14); color: #0F416C;
      display: inline-flex; align-items: center; justify-content: center;
      flex: none;
    }
    @media (min-width: 640px) {
      .pc-check-bullet { width: 1.1rem; height: 1.1rem; }
    }
    .price-card-dark .pc-check-bullet {
      background: rgba(255,255,255,0.18); color: #fff;
    }

    /* Offset deep links to #planForm so the fixed navbar doesn't cover the
       pricing cards when scrolling into view */
    #planForm { scroll-margin-top: 96px; }

    /* Make both pricing cards stretch to the same height inside the grid
       so "Belt Only" matches "Belt + Pro Kit" on mobile */
    #planForm > label { display: flex; flex-direction: column; height: 100%; }
    #planForm > label > .price-card { flex: 1 1 auto; width: 100%; height: 100%; }

    .thumb {
      border-radius: .75rem; overflow: hidden; cursor: pointer;
      border: 2px solid transparent;
      transition: border-color .2s var(--ease-out), transform .25s var(--ease-spring);
    }
    .thumb:hover { transform: translateY(-2px); }
    .thumb.active { border-color: #0F416C; }
    .main-img { transition: opacity .35s var(--ease-out); }
    .main-img.swap { opacity: 0; }

    details.acc { border-top: 1px solid rgba(15,65,108,0.10); }
    details.acc:last-of-type { border-bottom: 1px solid rgba(15,65,108,0.10); }
    details.acc > summary {
      list-style: none; cursor: pointer;
      padding: 1.1rem 0;
      display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
      font-family: 'Inter', sans-serif; font-weight: 600;
      letter-spacing: -0.01em;
      font-size: 1rem;
      color: #0F416C;
    }
    details.acc > summary::-webkit-details-marker { display: none; }
    details.acc .ico {
      width: 1.6rem; height: 1.6rem; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #eef2f7;
      transition: transform .35s var(--ease-spring), background-color .2s var(--ease-out);
    }
    details.acc[open] .ico { transform: rotate(45deg); background: #0F416C; color: #fff; }
    details.acc .body {
      padding: 0 0 1.2rem 0;
      max-width: 60ch;
      color: rgba(15,65,108,0.7);
      font-size: .95rem;
      animation: fadeUp .35s var(--ease-out);
    }
    details.faq .ico-check {
      width: 1.6rem; height: 1.6rem; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      background: #eef2f7; color: #0F416C;
      transition: background-color .25s var(--ease-out), transform .35s var(--ease-spring);
    }
    details.faq[open] .ico-check { background: #0F416C; color: #fff; transform: scale(1.06); }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: none; }
    }

    .nav-scrolled {
      box-shadow: 0 1px 0 rgba(15,65,108,0.06);
      background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
    }

    .pcard .img-a, .pcard .img-b { transition: opacity .5s var(--ease-out); }
    .pcard .img-b { opacity: 0; }
    .pcard:hover .img-a { opacity: 0; }
    .pcard:hover .img-b { opacity: 1; }

    .status {
      width: .65rem; height: .65rem; border-radius: 999px; flex: none;
      box-shadow: 0 0 0 4px rgba(255,255,255,0.6);
    }

    .ring {
      --p: 92;
      width: 220px; height: 220px;
      border-radius: 999px;
      background:
        conic-gradient(#3FA35B calc(var(--p) * 1%), rgba(255,255,255,0.10) 0);
      display: grid; place-items: center;
      position: relative;
    }
    .ring::after {
      content: ""; position: absolute; inset: 14px; border-radius: 999px;
      background: #0a2e4d;
    }
    .ring .inner { position: relative; z-index: 2; text-align: center; color: #fff; }
    @media (max-width: 640px) {
      .ring { width: 160px; height: 160px; }
      .ring::after { inset: 10px; }
      .ring .inner .text-5xl { font-size: 2.5rem; }
    }

    .step { position: relative; padding-left: 4.5rem; }
    .step::before {
      content: ""; position: absolute; left: 1.225rem; top: 2.5rem; bottom: -2.5rem;
      width: 1.5px; background: rgba(15,65,108,0.10);
    }
    .step:last-child::before { display: none; }

    .promo[hidden] { display: none; }

    dialog.lb {
      border: none; padding: 0; background: transparent;
      max-width: min(92vw, 1100px); width: 100%;
    }
    dialog.lb::backdrop { background: rgba(10,19,34,0.85); backdrop-filter: blur(6px); }
    dialog.lb img { width: 100%; height: auto; border-radius: 1.2rem; }
    dialog.lb .close {
      position: absolute; top: -3rem; right: 0;
      background: rgba(255,255,255,0.1); color: #fff; border: none; cursor: pointer;
      width: 2.5rem; height: 2.5rem; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
    }

    /* Assessment modal — multi-step quiz */
    dialog.assessment-modal {
      border: none; padding: 0; background: #fff;
      border-radius: 1.5rem;
      max-width: min(94vw, 720px); width: 100%;
      max-height: 92vh; overflow: hidden;
      box-shadow: 0 30px 80px -20px rgba(8,34,56,0.5);
      color: #0F416C;
    }
    dialog.assessment-modal::backdrop { background: rgba(10,19,34,0.72); backdrop-filter: blur(6px); }
    @media (max-width: 640px) {
      dialog.assessment-modal {
        max-width: 100vw; width: 100vw;
        max-height: 100vh; height: 100vh; max-height: 100dvh; height: 100dvh;
        border-radius: 0;
        margin: 0;
      }
    }
    .assessment-shell {
      display: flex; flex-direction: column;
      height: 100%;
      max-height: 92vh;
    }
    @media (max-width: 640px) {
      .assessment-shell { max-height: 100vh; max-height: 100dvh; }
    }
    .assessment-header {
      display: flex; align-items: center; gap: 1rem;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid rgba(15,65,108,0.08);
    }
    .assessment-progress {
      flex: 1; height: 6px; border-radius: 999px;
      background: #eef2f7; overflow: hidden;
    }
    .assessment-progress-fill {
      height: 100%; background: #0F416C;
      width: 0%;
      border-radius: 999px;
      transition: width .35s var(--ease-out);
    }
    .assessment-step-label {
      font-size: .72rem; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: rgba(15,65,108,0.6);
      flex: none;
    }
    .assessment-close {
      background: rgba(15,65,108,0.08); color: #0F416C;
      border: none; cursor: pointer;
      width: 2.25rem; height: 2.25rem; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
      flex: none;
    }
    .assessment-close:hover { background: rgba(15,65,108,0.16); }

    .assessment-body {
      flex: 1; overflow-y: auto;
      padding: 1.75rem 1.5rem 1rem;
    }
    @media (min-width: 640px) {
      .assessment-body { padding: 2.5rem 2.5rem 1.5rem; }
    }
    .assessment-slide { display: none; animation: assessmentFade .35s var(--ease-out); }
    .assessment-slide.is-active { display: block; }
    @keyframes assessmentFade {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }
    .assessment-eyebrow {
      font-size: .72rem; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      color: #3FA35B;
    }
    .assessment-title {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800;
      font-size: 1.6rem; line-height: 1.15;
      letter-spacing: -0.02em;
      color: #0F416C;
      margin-top: .35rem;
    }
    @media (min-width: 640px) {
      .assessment-title { font-size: 2rem; }
    }
    .assessment-help {
      margin-top: .65rem; color: rgba(15,65,108,0.7);
      font-size: .95rem; line-height: 1.5;
      max-width: 38rem;
    }

    /* Sliders */
    .assessment-slider-wrap { margin-top: 2rem; }
    .assessment-slider-readout {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800;
      font-size: 3rem; line-height: 1;
      letter-spacing: -0.025em;
      color: #0F416C;
      text-align: center;
    }
    .assessment-slider-readout .unit {
      font-size: 1.1rem; font-weight: 700;
      color: rgba(15,65,108,0.55);
      margin-left: .35rem;
    }
    .assessment-slider {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 8px; border-radius: 999px;
      background: #DDE9F5; outline: none;
      margin-top: 1.5rem;
      cursor: pointer;
    }
    .assessment-slider::-webkit-slider-runnable-track {
      height: 8px; border-radius: 999px;
      background: linear-gradient(to right, #0F416C var(--fill, 50%), #DDE9F5 var(--fill, 50%));
    }
    .assessment-slider::-moz-range-track {
      height: 8px; border-radius: 999px;
      background: #DDE9F5;
    }
    .assessment-slider::-moz-range-progress {
      height: 8px; border-radius: 999px;
      background: #0F416C;
    }
    .assessment-slider::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 26px; height: 26px; border-radius: 999px;
      background: #0F416C;
      border: 4px solid #fff;
      margin-top: -9px;
      box-shadow: 0 6px 16px rgba(15,65,108,0.35);
      cursor: pointer;
    }
    .assessment-slider::-moz-range-thumb {
      width: 26px; height: 26px; border-radius: 999px;
      background: #0F416C; border: 4px solid #fff;
      box-shadow: 0 6px 16px rgba(15,65,108,0.35);
      cursor: pointer;
    }
    .assessment-slider-scale {
      display: flex; justify-content: space-between;
      margin-top: .65rem;
      font-size: 17px !important; color: rgba(15,65,108,0.55);
      font-weight: 600;
    }

    /* Chip-style multi/single choice */
    .assessment-chips {
      margin-top: 1.5rem;
      display: flex; flex-wrap: wrap; gap: .65rem;
    }
    .assessment-chip {
      padding: .7rem 1.15rem; border-radius: 999px;
      border: 1.5px solid rgba(15,65,108,0.18);
      background: #fff; color: #0F416C;
      font-size: .9rem; font-weight: 600;
      cursor: pointer;
      transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-spring);
      display: inline-flex; align-items: center; gap: .45rem;
    }
    .assessment-chip:hover { background: #f1f7fc; border-color: rgba(15,65,108,0.32); }
    .assessment-chip.is-selected {
      background: #0F416C; border-color: #0F416C; color: #fff;
    }
    .assessment-chip.is-selected svg { opacity: 1; transform: scale(1); }
    .assessment-chip svg { opacity: 0; width: 14px; height: 14px; transition: opacity .2s var(--ease-out), transform .2s var(--ease-spring); transform: scale(.6); }

    /* Textarea */
    .assessment-textarea {
      width: 100%; margin-top: 1.5rem;
      border: 1.5px solid rgba(15,65,108,0.18);
      border-radius: 1rem;
      padding: 1rem 1.1rem;
      font-family: 'DM Sans', sans-serif;
      font-size: .95rem; color: #0F416C;
      resize: vertical; min-height: 7rem;
      transition: border-color .2s var(--ease-out);
    }
    .assessment-textarea:focus { outline: none; border-color: #0F416C; }
    .assessment-textarea::placeholder { color: rgba(15,65,108,0.4); }

    /* Footer */
    .assessment-footer {
      display: flex; justify-content: space-between; align-items: center;
      gap: .75rem;
      padding: 1rem 1.25rem 1.25rem;
      border-top: 1px solid rgba(15,65,108,0.08);
    }
    @media (max-width: 639px) {
      .assessment-footer {
        flex-shrink: 0;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem));
      }
    }
    @media (min-width: 640px) {
      .assessment-footer { padding: 1.25rem 2.5rem 1.5rem; }
    }
    .assessment-back {
      background: transparent; border: none; cursor: pointer;
      color: rgba(15,65,108,0.6); font-weight: 600; font-size: .9rem;
      padding: .55rem .8rem; border-radius: 999px;
      transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
    }
    .assessment-back:hover { color: #0F416C; background: #eef2f7; }
    .assessment-back[disabled] { visibility: hidden; }
    .assessment-next {
      background: #0F416C; color: #fff;
      border: none; cursor: pointer;
      padding: .8rem 1.5rem; border-radius: 999px;
      font-weight: 700; font-size: .92rem;
      display: inline-flex; align-items: center; gap: .5rem;
      transition: background-color .2s var(--ease-out), transform .2s var(--ease-spring);
    }
    .assessment-next:hover { background: #0a2e4d; }
    .assessment-next[disabled] { background: rgba(15,65,108,0.25); cursor: not-allowed; }

    /* Result charts */
    .assessment-score-ring {
      width: 200px; height: 200px;
      margin: 1.5rem auto .5rem;
      border-radius: 999px;
      background: conic-gradient(#3FA35B calc(var(--score, 70) * 1%), #eef2f7 0);
      position: relative;
      isolation: isolate;
    }
    .assessment-score-ring::before {
      content: ""; position: absolute; inset: 14px;
      border-radius: 999px; background: #fff;
      z-index: 0;
    }
    .assessment-score-ring-inner {
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      text-align: center;
      width: 80%;
    }
    .assessment-score-ring-inner .num {
      font-family: 'DM Sans', sans-serif;
      font-weight: 800;
      font-size: 3.5rem; line-height: 1;
      letter-spacing: -0.025em;
      color: #0F416C;
    }
    .assessment-score-ring-inner .label {
      font-size: .68rem; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      color: rgba(15,65,108,0.6);
      margin-top: .4rem;
    }
    .assessment-bars {
      margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
    }
    .assessment-bar-row {
      display: grid;
      grid-template-columns: minmax(7rem, 9rem) 1fr auto;
      align-items: center; gap: .75rem;
      font-size: .88rem;
    }
    .assessment-bar-row .label {
      color: #0F416C; font-weight: 600;
    }
    .assessment-bar-track {
      height: 10px; background: #eef2f7; border-radius: 999px; overflow: hidden;
    }
    .assessment-bar-fill {
      display: block !important;
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #0F416C 0%, #3FA35B 100%);
      border-radius: 999px;
      transition: width 1s var(--ease-spring);
    }
    .assessment-bar-row .pct {
      font-weight: 700; color: #0F416C; font-variant-numeric: tabular-nums;
      min-width: 2.5rem; text-align: right;
    }

    /* Offer slide */
    .assessment-offer {
      text-align: center; padding: 1rem 0;
    }
    .assessment-offer-card {
      margin-top: 1.5rem;
      background: linear-gradient(160deg, #0a2e4d 0%, #0F416C 100%);
      color: #fff;
      border-radius: 1.5rem;
      padding: 2rem 1.5rem;
      position: relative; overflow: hidden;
    }
    .assessment-offer-card::after {
      content: ""; position: absolute;
      width: 18rem; height: 18rem; border-radius: 999px;
      background: rgba(63,163,91,0.25); filter: blur(60px);
      top: -6rem; right: -6rem; pointer-events: none;
    }
    .assessment-offer-claimed {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .72rem; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      color: #5cb87f;
      position: relative; z-index: 1;
    }
    .assessment-offer-big {
      font-family: 'DM Sans', sans-serif;
      font-weight: 900;
      font-size: 4.5rem; line-height: 1;
      letter-spacing: -0.03em;
      margin-top: 1rem;
      color: #fff;
      position: relative; z-index: 1;
    }
    .assessment-offer-big .pct { font-size: 2.5rem; vertical-align: top; }
    .assessment-offer-big .off { font-size: 2.25rem; }
    .assessment-offer-sub {
      margin-top: .5rem; color: rgba(255,255,255,0.75);
      font-size: .95rem;
      position: relative; z-index: 1;
    }
    .assessment-offer-cta {
      display: inline-flex; align-items: center; gap: .55rem;
      background: #3FA35B; color: #fff;
      border: none; cursor: pointer;
      padding: 1rem 1.75rem; border-radius: 999px;
      font-weight: 800; font-size: 1rem;
      margin-top: 1.5rem;
      position: relative; z-index: 1;
      transition: background-color .2s var(--ease-out), transform .2s var(--ease-spring);
    }
    .assessment-offer-cta:hover { background: #5cb87f; transform: translateY(-2px); }

    /* Sizing chart modal */
    dialog.size-modal {
      border: none; padding: 0; background: #fff;
      border-radius: 1.5rem;
      max-width: min(92vw, 640px); width: 100%;
      box-shadow: 0 30px 80px -20px rgba(8,34,56,0.4);
    }
    dialog.size-modal::backdrop { background: rgba(10,19,34,0.65); backdrop-filter: blur(4px); }
    dialog.size-modal .size-modal-body { padding: 1.25rem 1.25rem 1.5rem; }
    @media (min-width: 640px) {
      dialog.size-modal .size-modal-body { padding: 1.75rem 2rem 2rem; }
    }
    dialog.size-modal .size-modal-close {
      position: absolute; top: .75rem; right: .75rem; z-index: 2;
      background: rgba(15,65,108,0.08); color: #0F416C; border: none; cursor: pointer;
      width: 2.25rem; height: 2.25rem; border-radius: 999px;
      display: inline-flex; align-items: center; justify-content: center;
    }
    dialog.size-modal .size-modal-close:hover { background: rgba(15,65,108,0.16); }
    dialog.size-modal .size-modal-photo {
      width: 100%; aspect-ratio: 4/3; object-fit: cover;
      border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem;
      background: #f1f7fc;
    }
    .size-table {
      width: 100%; border-collapse: separate; border-spacing: 0;
      border-radius: .9rem; overflow: hidden;
      font-size: .85rem;
    }
    .size-table th {
      background: #0F416C; color: #fff;
      font-weight: 700; text-align: left;
      padding: .85rem 1rem; letter-spacing: 0.02em;
    }
    .size-table td {
      padding: .85rem 1rem; color: #0F416C; border-top: 1px solid rgba(15,65,108,0.08);
    }
    .size-table tr:nth-child(odd) td { background: #f1f7fc; }
    .size-table td:first-child { font-weight: 700; }

    /* Sizing chart trigger button */
    .size-chart-btn {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .55rem 1rem;
      border: 1.5px solid rgba(15,65,108,0.18);
      border-radius: 999px;
      background: #fff; color: #0F416C;
      font-size: .85rem; font-weight: 600;
      cursor: pointer;
      transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
    }
    .size-chart-btn:hover { background: #f1f7fc; border-color: rgba(15,65,108,0.32); }

    /* Per-card size selector (native <select> styled to match the card) */
    .pc-size {
      width: 100%; appearance: none; -webkit-appearance: none;
      border-radius: .75rem; padding: .55rem .85rem;
      padding-right: 2rem;
      font-size: .8rem; font-weight: 600;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F416C' stroke-width='2.4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right .7rem center;
      transition: border-color .2s var(--ease-out);
    }
    .price-card-light .pc-size {
      background-color: rgba(255,255,255,0.7);
      border: 1.25px solid rgba(15,65,108,0.18);
      color: #0F416C;
    }
    .price-card-dark .pc-size {
      background-color: rgba(255,255,255,0.10);
      border: 1.25px solid rgba(255,255,255,0.28);
      color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
    .price-card-dark .pc-size option { color: #0F416C; background: #fff; }
    .pc-size:focus { outline: 2px solid rgba(15,65,108,0.4); outline-offset: 2px; }

    /* Marquee scroll */
    @keyframes scroll-x {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .marquee { display: flex; gap: 4rem; animation: scroll-x 28s linear infinite; }
    .marquee:hover { animation-play-state: paused; }

    /* Before/After slider */
    .ba {
      position: relative; overflow: hidden; border-radius: 1.2rem;
      user-select: none; touch-action: none;
    }
    .ba .layer-after {
      position: absolute; inset: 0; clip-path: inset(0 0 0 50%);
      transition: clip-path .05s linear;
    }
    .ba .handle {
      position: absolute; top: 0; bottom: 0; left: 50%;
      width: 2px; background: #fff;
      box-shadow: 0 0 0 1px rgba(15,65,108,.2), 0 8px 24px rgba(15,65,108,.35);
      transform: translateX(-1px);
      pointer-events: none;
    }
    .ba .handle::after {
      content: "";
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 44px; height: 44px; border-radius: 999px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(15,65,108,.35), inset 0 0 0 1px rgba(15,65,108,.08);
    }
    .ba .handle::before {
      content: "\21C4";
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      color: #0F416C; font-weight: 700; font-size: 18px; z-index: 2;
    }
    .ba .tag {
      position: absolute; top: 1rem; padding: .35rem .7rem; border-radius: 999px;
      font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
      backdrop-filter: blur(6px);
    }

    /* table */
    .compare-row + .compare-row { border-top: 1px solid rgba(15,65,108,0.08); }
    .compare-row > div { padding: 1rem 1.2rem; }
    .compare-row > div:not(:first-child) { border-left: 1px solid rgba(15,65,108,0.06); }

    /* counters */
    .ticker { font-variant-numeric: tabular-nums; }

    /* Hover for condition cards */
    .cond {
      position: relative; isolation: isolate;
      border-radius: 1.4rem; overflow: hidden;
      transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring);
    }
    .cond:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -14px rgba(15,65,108,0.22); }
    .cond::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(15,65,108,0) 35%, rgba(15,65,108,0.85) 100%);
      pointer-events: none;
    }
    .cond .label {
      position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 2;
      color: #fff;
    }
    /* Beat the global h1-h5 { color: #0F416C } so condition card titles stay white */
    .cond .label h3 { color: #ffffff; }

    /* Doctor card pill */
    .doctor-card {
      background: #e8f0f7;
      border-radius: 1.4rem;
      overflow: hidden;
      transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring);
    }
    .doctor-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -16px rgba(15,65,108,0.20); }

    /* Doctor marquee — continuous slow horizontal scroll, pauses on hover/touch */
    @keyframes doc-marquee {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(-50%, 0, 0); }
    }
    .doc-marquee-mask {
      position: relative;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    .doc-marquee-track {
      display: flex;
      width: max-content;
      gap: 1.25rem;
      animation: doc-marquee 70s linear infinite;
      will-change: transform;
    }
    .doc-marquee-mask:hover .doc-marquee-track,
    .doc-marquee-mask.paused .doc-marquee-track {
      animation-play-state: paused;
    }
    .doc-marquee-card { flex: none; width: 360px; }
    @media (min-width: 640px) { .doc-marquee-card { width: 460px; } }
    @media (min-width: 1024px) { .doc-marquee-card { width: 540px; } }
    /* Hard-crop the source portrait to the doctor's face only — pushes the embedded
       text on the right of the source completely out of view via aggressive zoom.
       Each .doc-face uses inline `--bg`, `--bp` for image + per-doctor position. */
    .doc-face {
      flex: none;
      width: 42%;
      align-self: stretch;
      background-color: #DDE9F5;
      background-repeat: no-repeat;
      background-image: var(--bg);
      background-size: 280% auto;
      background-position: var(--bp, 8% 28%);
    }
    @media (prefers-reduced-motion: reduce) {
      .doc-marquee-track { animation: none; transform: none; }
      .doc-marquee-mask { overflow-x: auto; }
    }

    /* "It's more than relief" two-slide profile section */
    .recovery-stage {
      position: relative;
    }
    .recovery-slide {
      position: absolute; inset: 0;
      opacity: 0; pointer-events: none;
      transition: opacity .9s var(--ease-out);
    }
    .recovery-slide.is-active {
      position: relative; opacity: 1; pointer-events: auto;
    }
    .pill {
      background: rgba(15, 65, 108, 0.68);
      border: 1px solid rgba(255,255,255,0.12);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 999px;
      padding: .55rem 1.1rem;
      display: flex; align-items: center; justify-content: space-between; gap: .9rem;
      color: #fff;
      box-shadow: 0 10px 26px -14px rgba(8,34,56,0.55);
      transition: transform .8s var(--ease-spring), opacity .8s var(--ease-out);
    }
    .pill .pill-label {
      font-size: .72rem;
      letter-spacing: .02em;
      color: rgba(255,255,255,0.78);
      font-weight: 500;
      white-space: nowrap;
    }
    .pill .pill-value {
      font-size: .9rem;
      font-weight: 700;
      color: #ffffff;
      text-align: right;
      line-height: 1.2;
    }
    .pill-product {
      padding: .55rem 1rem .55rem 1.1rem;
    }
    .pill-product .product-title {
      font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.2;
    }
    .pill-product img {
      width: 46px; height: 46px; object-fit: cover; border-radius: 999px;
      background: #ffffff;
      flex: none;
    }
    /* Lyvalign-style overlay: pills float over the left/right edges of the centered photo on md+ */
    .recovery-photo-wrap { position: relative; }
    @media (min-width: 768px) {
      .pill-stack { position: absolute; top: 50%; transform: translateY(-50%); width: 36%; z-index: 5; }
      .pill-stack.left  { left: 0; }
      .pill-stack.right { right: 0; }
      .recovery-photo { margin: 0 auto; max-width: 58%; }
    }
    /* Mobile-only: reflow the section into a Lyvalign-style 2-col grid.
       Order: Name | Age, Primary Concern | Goal, History (full), Photo (full),
       Product (full), Sessions | Focus, Recovery (full). */
    @media (max-width: 767px) {
      .recovery-photo-wrap {
        display: grid;
        /* minmax(0, 1fr) prevents pill min-content from expanding columns
           past the wrap's width on narrow viewports (eg 320px) */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: .6rem;
      }
      /* Flatten the left/right stacks so their pills become direct grid items
         (extra specificity to beat Tailwind CDN's .flex which loads after) */
      .recovery-photo-wrap > .pill-stack { display: contents; }
      .pill-stack.left, .pill-stack.right { margin-top: 0; }

      .recovery-photo-wrap > .pill { grid-column: span 1; }
      .pill-stack.left  > .pill:nth-child(5),    /* History */
      .pill-stack.right > .pill-product,         /* Product card */
      .pill-stack.right > .pill:nth-child(4),    /* Recovery */
      .recovery-photo { grid-column: 1 / -1; }

      .pill-stack.left  > .pill:nth-child(1) { order: 1; } /* Name */
      .pill-stack.left  > .pill:nth-child(2) { order: 2; } /* Age */
      .pill-stack.left  > .pill:nth-child(3) { order: 3; } /* Primary Concern */
      .pill-stack.left  > .pill:nth-child(4) { order: 4; } /* Goal */
      .pill-stack.left  > .pill:nth-child(5) { order: 5; } /* History */
      .recovery-photo                        { order: 6; }
      .pill-stack.right > .pill-product      { order: 7; }
      .pill-stack.right > .pill:nth-child(2) { order: 8; } /* Sessions */
      .pill-stack.right > .pill:nth-child(3) { order: 9; } /* Focus */
      .pill-stack.right > .pill:nth-child(4) { order: 10; }/* Recovery */

      /* Rounded-rectangle card look on mobile (was capsule) */
      .pill {
        border-radius: 1.25rem;
        padding: .8rem 1rem;
        gap: .5rem;
      }
      .pill-product { padding: .65rem .95rem .65rem 1.05rem; }
      .pill .pill-label { white-space: normal; }

      /* Slide-in animations are tied to absolute-positioned stacks; mute them
         here so cards just fade in via the parent .recovery-slide */
      .slide-in-l, .slide-in-r { animation: none; }
    }
    .slide-in-l { animation: slideInL .7s var(--ease-spring) both; }
    .slide-in-r { animation: slideInR .7s var(--ease-spring) both; }
    @keyframes slideInL { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
    @keyframes slideInR { from { opacity: 0; transform: translateX( 22px); } to { opacity: 1; transform: none; } }
    .recovery-dot {
      width: 10px; height: 10px; border-radius: 999px;
      background: rgba(255,255,255,0.25);
      transition: background-color .25s var(--ease-out), transform .25s var(--ease-spring), width .4s var(--ease-spring);
      cursor: pointer;
    }
    .recovery-dot.is-active { background: #ffffff; width: 26px; }

    @media (prefers-reduced-motion: reduce) {
      .recovery-slide, .slide-in-l, .slide-in-r { transition: none; animation: none; }
    }

    /* Logo mark */
    .logo-svg {
      width: 36px; height: 36px;
    }

    /* Tabs */
    .tab-trigger {
      padding: .65rem 1.1rem; border-radius: 999px;
      font-size: .8rem; font-weight: 600; letter-spacing: .04em;
      color: rgba(15,65,108,0.6);
      transition: all .25s var(--ease-out);
      cursor: pointer;
    }
    .tab-trigger.active {
      background: #0F416C; color: #fff;
      box-shadow: 0 6px 16px -6px rgba(15,65,108,0.55);
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; animation: fadeUp .35s var(--ease-out); }


    /* ===== TAILWIND CLASS OVERRIDES FOR SHOPIFY ===== */
    /* These Tailwind utilities are used in correctez-product.liquid
       but Tailwind CDN is not loaded on Shopify — define them explicitly */

    /* Typography scale */
    .text-xs  { font-size: 0.75rem; line-height: 1rem; }
    .text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
    .text-base { font-size: 1rem; line-height: 1.5rem; }
    .text-lg  { font-size: 1.125rem; line-height: 1.75rem; }
    .text-xl  { font-size: 1.25rem; line-height: 1.75rem; }
    .text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .text-5xl { font-size: 3rem; line-height: 1; }
    .text-6xl { font-size: 3.75rem; line-height: 1; }
    .text-7xl { font-size: 4.5rem; line-height: 1; }

    @media (min-width: 768px) {
      .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
      .md\:text-5xl { font-size: 3rem; line-height: 1; }
      .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
    }
    @media (min-width: 1024px) {
      .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
      .lg\:text-5xl { font-size: 3rem; line-height: 1; }
      .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
      .lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
    }

    /* Font weight */
    .font-normal   { font-weight: 400; }
    .font-medium   { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-bold     { font-weight: 700; }
    .font-extrabold { font-weight: 800; }
    .font-black    { font-weight: 900; }

    /* Tracking (letter-spacing) */
    .tracking-tight   { letter-spacing: -0.025em; }
    .tracking-tighter { letter-spacing: -0.05em; }
    .tracking-wide    { letter-spacing: 0.025em; }
    .tracking-wider   { letter-spacing: 0.05em; }
    .tracking-widest  { letter-spacing: 0.1em; }

    /* Leading (line-height) */
    .leading-none   { line-height: 1; }
    .leading-tight  { line-height: 1.25; }
    .leading-snug   { line-height: 1.375; }
    .leading-normal { line-height: 1.5; }
    .leading-relaxed { line-height: 1.625; }
    .leading-loose  { line-height: 2; }
    .[leading-\[1\.05\]] { line-height: 1.05; }

    /* Colors */
    .text-white  { color: #fff; }
    .text-black  { color: #000; }
    .text-current { color: currentColor; }

    /* Opacity */
    .opacity-0   { opacity: 0; }
    .opacity-50  { opacity: 0.5; }
    .opacity-75  { opacity: 0.75; }
    .opacity-100 { opacity: 1; }

    /* Flex utilities */
    .flex         { display: flex; }
    .inline-flex  { display: inline-flex; }
    .flex-col     { flex-direction: column; }
    .flex-row     { flex-direction: row; }
    .flex-wrap    { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .items-start  { align-items: flex-start; }
    .items-end    { align-items: flex-end; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .justify-start { justify-content: flex-start; }
    .justify-end  { justify-content: flex-end; }
    .flex-1       { flex: 1 1 0%; }
    .flex-none    { flex: none; }
    .shrink-0     { flex-shrink: 0; }
    .grow         { flex-grow: 1; }

    /* Grid */
    .grid { display: grid; }
    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .col-span-1  { grid-column: span 1 / span 1; }
    .col-span-2  { grid-column: span 2 / span 2; }
    .col-span-3  { grid-column: span 3 / span 3; }
    .col-span-4  { grid-column: span 4 / span 4; }
    .col-span-5  { grid-column: span 5 / span 5; }
    .col-span-6  { grid-column: span 6 / span 6; }
    .col-span-7  { grid-column: span 7 / span 7; }
    .col-span-8  { grid-column: span 8 / span 8; }
    .col-span-12 { grid-column: span 12 / span 12; }
    @media (min-width: 1024px) {
      .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
      .lg\:col-span-5  { grid-column: span 5 / span 5; }
      .lg\:col-span-7  { grid-column: span 7 / span 7; }
      .lg\:col-span-4  { grid-column: span 4 / span 4; }
      .lg\:col-span-8  { grid-column: span 8 / span 8; }
      .lg\:col-span-6  { grid-column: span 6 / span 6; }
    }

    /* Gap */
    .gap-1  { gap: 0.25rem; }
    .gap-2  { gap: 0.5rem; }
    .gap-3  { gap: 0.75rem; }
    .gap-4  { gap: 1rem; }
    .gap-5  { gap: 1.25rem; }
    .gap-6  { gap: 1.5rem; }
    .gap-8  { gap: 2rem; }
    .gap-10 { gap: 2.5rem; }
    .gap-12 { gap: 3rem; }
    .gap-16 { gap: 4rem; }
    .gap-x-4 { column-gap: 1rem; }
    .gap-x-6 { column-gap: 1.5rem; }
    .gap-y-2 { row-gap: 0.5rem; }
    .gap-y-3 { row-gap: 0.75rem; }
    .gap-y-4 { row-gap: 1rem; }

    /* Spacing (padding / margin) */
    .p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; }
    .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; }
    .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; }
    .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
    .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .px-4 { padding-left: 1rem; padding-right: 1rem; }
    .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
    .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .px-8 { padding-left: 2rem; padding-right: 2rem; }
    .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
    .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
    .py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; }
    .pt-8 { padding-top: 2rem; } .pt-10 { padding-top: 2.5rem; }
    .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; }
    .pb-8 { padding-bottom: 2rem; } .pb-10 { padding-bottom: 2.5rem; }
    .pl-2 { padding-left: 0.5rem; } .pl-3 { padding-left: 0.75rem; }
    .pl-4 { padding-left: 1rem; } .pl-6 { padding-left: 1.5rem; }
    .pr-2 { padding-right: 0.5rem; } .pr-4 { padding-right: 1rem; }
    .m-0 { margin: 0; } .mx-auto { margin-left: auto; margin-right: auto; }
    .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; }
    .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
    .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; }
    .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; }
    .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; }
    .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
    .ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; }
    .mr-2 { margin-right: 0.5rem; } .mr-3 { margin-right: 0.75rem; }

    /* Width / height */
    .w-full  { width: 100%; }
    .w-auto  { width: auto; }
    .h-full  { height: 100%; }
    .h-auto  { height: auto; }
    .min-w-0 { min-width: 0; }
    .max-w-full { max-width: 100%; }

    /* Border radius */
    .rounded    { border-radius: 0.25rem; }
    .rounded-md { border-radius: 0.375rem; }
    .rounded-lg { border-radius: 0.5rem; }
    .rounded-xl { border-radius: 0.75rem; }
    .rounded-2xl { border-radius: 1rem; }
    .rounded-full { border-radius: 9999px; }

    /* Overflow */
    .overflow-hidden { overflow: hidden; }
    .overflow-auto   { overflow: auto; }

    /* Position */
    .relative { position: relative; }
    .absolute { position: absolute; }
    .sticky   { position: sticky; }
    .inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

    /* Display */
    .hidden  { display: none; }
    .block   { display: block; }
    .inline-block { display: inline-block; }
    .inline  { display: inline; }
    @media (min-width: 1024px) {
      .lg\:block  { display: block; }
      .lg\:hidden { display: none; }
      .lg\:flex   { display: flex; }
      .lg\:grid   { display: grid; }
      .lg\:pl-6   { padding-left: 1.5rem; }
      .lg\:px-10  { padding-left: 2.5rem; padding-right: 2.5rem; }
      .lg\:py-16  { padding-top: 4rem; padding-bottom: 4rem; }
      .lg\:pt-0   { padding-top: 0; }
    }
    @media (min-width: 768px) {
      .md\:block  { display: block; }
      .md\:hidden { display: none; }
      .md\:flex   { display: flex; }
    }

    /* Object fit */
    .object-cover   { object-fit: cover; }
    .object-contain { object-fit: contain; }
    .object-center  { object-position: center; }

    /* Aspect ratio */
    .aspect-square { aspect-ratio: 1 / 1; }
    .aspect-video  { aspect-ratio: 16 / 9; }

    /* Text align */
    .text-center { text-align: center; }
    .text-left   { text-align: left; }
    .text-right  { text-align: right; }

    /* Whitespace */
    .whitespace-nowrap { white-space: nowrap; }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Space between */
    .space-y-1 > * + * { margin-top: 0.25rem; }
    .space-y-2 > * + * { margin-top: 0.5rem; }
    .space-y-3 > * + * { margin-top: 0.75rem; }
    .space-y-4 > * + * { margin-top: 1rem; }
    .space-y-6 > * + * { margin-top: 1.5rem; }
    .space-y-8 > * + * { margin-top: 2rem; }
    .space-x-2 > * + * { margin-left: 0.5rem; }
    .space-x-3 > * + * { margin-left: 0.75rem; }
    .space-x-4 > * + * { margin-left: 1rem; }

    /* Border */
    .border   { border-width: 1px; }
    .border-0 { border-width: 0; }
    .border-t { border-top-width: 1px; }
    .border-b { border-bottom-width: 1px; }
    .border-l { border-left-width: 1px; }
    .border-r { border-right-width: 1px; }

    /* Cursor */
    .cursor-pointer { cursor: pointer; }

    /* Select */
    .select-none { user-select: none; }

    /* Pointer events */
    .pointer-events-none { pointer-events: none; }

    /* Z-index */
    .z-0  { z-index: 0; }
    .z-10 { z-index: 10; }
    .z-20 { z-index: 20; }
    .z-50 { z-index: 50; }

    /* Shadow */
    .shadow     { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1); }
    .shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1); }
    .shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1); }
    .shadow-none { box-shadow: none; }

    /* Transition */
    .transition { transition-property: color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
    .transition-colors { transition-property: color,background-color,border-color; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; }
    .duration-200 { transition-duration: .2s; }
    .duration-300 { transition-duration: .3s; }

    /* Specific max-width for shell */
    .max-w-shell { max-width: 1400px; }


    

    /* ===== TAILWIND FONT-SIZE OVERRIDES IN PX (Shopify root font-size is 10px not 16px) ===== */
    .correctez-page .text-xs   { font-size: 12px !important; }
    .correctez-page .text-sm   { font-size: 14px !important; }
    .correctez-page .text-base { font-size: 16px !important; }
    .correctez-page .text-lg   { font-size: 18px !important; }
    .correctez-page .text-xl   { font-size: 20px !important; }
    .correctez-page .text-2xl  { font-size: 24px !important; }
    .correctez-page .text-3xl  { font-size: 30px !important; }
    .correctez-page .text-4xl  { font-size: 36px !important; }
    .correctez-page .text-5xl  { font-size: 48px !important; }
    .correctez-page .text-6xl  { font-size: 60px !important; }
    .correctez-page .text-7xl  { font-size: 72px !important; }

    @media (min-width: 640px) {
      .correctez-page .sm\:text-3xl { font-size: 30px !important; }
      .correctez-page .sm\:text-4xl { font-size: 36px !important; }
      .correctez-page .sm\:text-5xl { font-size: 48px !important; }
    }
    @media (min-width: 768px) {
      .correctez-page .md\:text-4xl { font-size: 36px !important; }
      .correctez-page .md\:text-5xl { font-size: 48px !important; }
      .correctez-page .md\:text-6xl { font-size: 60px !important; }
    }
    @media (min-width: 1024px) {
      .correctez-page .lg\:text-4xl { font-size: 36px !important; }
      .correctez-page .lg\:text-5xl { font-size: 48px !important; }
      .correctez-page .lg\:text-6xl { font-size: 60px !important; }
      .correctez-page .lg\:text-7xl { font-size: 72px !important; }
    }


/* === ASSESSMENT TITLE FIX === */
.assessment-title { font-size: 32px !important; }
.assessment-offer h2 { font-size: 32px !important; }


/* === FAQ COLLAPSIBLE HEADING FIX === */
.collapsible-content__heading { font-size: 48px !important; line-height: 1.05 !important; }
.collapsible-content__row details summary { font-size: 16px !important; }


/* === RESPONSIVE H3 SIZE FIXES (md:text-3xl = 30px, sm:text-2xl = 24px) === */
@media (min-width: 640px) {
  .correctez-page .sm\:text-2xl { font-size: 24px !important; }
  .correctez-page .sm\:text-xl  { font-size: 20px !important; }
}
@media (min-width: 768px) {
  .correctez-page .md\:text-3xl { font-size: 30px !important; }
  .correctez-page .md\:text-2xl { font-size: 24px !important; }
}


/* === SMALL ELEMENT REM FIX (10px base vs 16px base) === */
/* Localhost values: pc-sub=11.2px, pc-included-title=10.88px, body=15.2px, pill-label=11.52px, pill-value=14.4px */
.correctez-page .pc-sub { font-size: 11px !important; }
.correctez-page .pc-included-title { font-size: 11px !important; }
.correctez-page .body { font-size: 15px !important; }
.correctez-page .pill-label { font-size: 12px !important; }
.correctez-page .pill-value { font-size: 14px !important; }


/* === PLAN CARD + ACCORDION + SIZE BTN: FULL REM→PX FIX (×1.6) === */

/* Plan card container */
.price-card { border-radius: 24px !important; padding: 10px 13px 13px !important; }
@media (min-width: 640px) {
  .price-card { padding: 14px 19px 15px !important; }
}

/* Radio dot */
.price-card .check {
  top: 12px !important; right: 12px !important;
  width: 18px !important; height: 18px !important;
}
@media (min-width: 640px) {
  .price-card .check { top: 16px !important; right: 16px !important; width: 22px !important; height: 22px !important; }
}
input[name="plan"]:checked + .price-card-light .check::after,
input[name="plan"]:checked + .price-card-dark .check::after {
  width: 8px !important; height: 8px !important;
}

/* Card image area */
.pc-image-wrap { height: 204px !important; }
@media (min-width: 640px) {
  .pc-image-wrap { height: 256px !important; }
}

/* Price + badge row minimums */
.pc-price-row { min-height: 36px !important; }
.pc-badge-row { min-height: 40px !important; }

/* Badge chip (Best Value / Most Popular) */
.pc-chip { gap: 6px !important; padding: 7px 12px !important; font-size: 10px !important; }
@media (min-width: 640px) {
  .pc-chip { gap: 7px !important; padding: 8px 16px !important; font-size: 11px !important; }
}

/* Check bullets in included list */
.pc-check-bullet { width: 15px !important; height: 15px !important; }
@media (min-width: 640px) {
  .pc-check-bullet { width: 18px !important; height: 18px !important; }
}

/* Size selector */
.pc-size { border-radius: 12px !important; padding: 9px 14px !important; padding-right: 32px !important; font-size: 13px !important; }

/* Sizing chart trigger button */
.size-chart-btn { gap: 8px !important; padding: 9px 16px !important; font-size: 14px !important; }

/* Accordion (Belt size guide / Shipping / Returns / Warranty) */
details.acc > summary { padding: 18px 0 !important; font-size: 16px !important; }
details.acc .ico { width: 26px !important; height: 26px !important; }
details.acc .body { padding-bottom: 19px !important; font-size: 15px !important; }


/* ============================================================
   SHOPIFY REM-BASE FIX OVERRIDES PART 2
   ============================================================ */

/* 1. GALLERY CAROUSEL: force two-column layout at sm+ breakpoint */
@media (min-width: 640px) {
  div:has(> #thumbs) {
    grid-template-columns: 88px 1fr !important;
  }
}

/* 2. CONDITIONS GRID: force 3 columns on desktop */
@media (min-width: 768px) {
  .crtz-conditions-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    justify-content: center !important;
    max-width: 540px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .crtz-condition-item {
    width: 100% !important;
  }
}
}

/* 3. PILL BOXES DESKTOP: larger padding at 1024px+ only */
@media (min-width: 1024px) {
  .pill {
    padding: 8.8px 17.6px !important;
  }
}

/* 4. SECTION INNER PADDING AND GAP FIX */
section.bg-paper > .max-w-shell.grid,
section.bg-cloud > .max-w-shell.grid {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
  gap: 48px !important;
}
@media (min-width: 1024px) {
  section.bg-paper > .max-w-shell.grid,
  section.bg-cloud > .max-w-shell.grid {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
}

/* Trust badge bar: py-6 = 15px live, fix to 24px */
section.bg-cloud2.border-y > .max-w-shell {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* Step number circles: 25px live, fix to 40px */
.num {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  font-size: 16px !important;
}


/* 5. GALLERY THUMB STRIP STRETCH FIX
   Shopify theme sets .grid { align-items: flex-start } which prevents
   the thumb strip column from stretching to match the main image height.
   Also fix thumb button size (w-20 = 5rem computes at 10px) and gap. */
@media (min-width: 640px) {
  div:has(> #thumbs) {
    align-items: stretch !important;
  }
  #thumbs {
    justify-content: flex-start !important;
    gap: 12px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #thumbs button.thumb {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    height: auto !important;
  }
}


/* ============================================================
   SECTION TYPOGRAPHY + SPACING FIXES (Part 3)
   ============================================================ */

/* A. H2 FONT WEIGHT FIX
   Shopify theme sets h1,h2,h3 { font-weight:800 }.
   Product page section headings need 400 to match localhost. */
section.bg-paper h2,
section.bg-cloud h2 {
  font-weight: 400 !important;
}

/* B. MAX-W-SHELL PADDING (non-grid sections: doctor, built, recovery etc.)
   My earlier fix targeted .max-w-shell.grid (assessment only).
   These sections have py-16 lg:py-24 on max-w-shell without .grid class.
   py-16 = 4rem = 40px at 10px base → fix to 64px.
   lg:py-24 = 6rem = 60px at 10px → fix to 96px. */
section.bg-paper > div[class*="py-16"],
section.bg-cloud > div[class*="py-16"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
@media (min-width: 1024px) {
  section.bg-paper > div[class*="py-16"],
  section.bg-cloud > div[class*="py-16"] {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
}

/* C. SUB-GRID GAP FIX
   gap-10 (2.5rem) = 25px at 10px → fix to 40px (correct at 16px).
   gap-12 (3rem) = 30px at 10px → fix to 48px (correct at 16px). */
section.bg-paper > div > div[class*="gap-10"],
section.bg-cloud > div > div[class*="gap-10"] {
  gap: 40px !important;
}
section.bg-paper > div > div[class*="gap-12"],
section.bg-cloud > div > div[class*="gap-12"] {
  gap: 48px !important;
}

/* D. .BTN PADDING FIX
   1.05rem 1.6rem = 10.5px 16px at 10px → fix to 16.8px 25.6px. */
section.bg-paper .btn,
section.bg-cloud .btn,
section.bg-paper .btn-outline,
section.bg-cloud .btn-outline {
  padding: 16.8px 25.6px !important;
  font-size: 16px !important;
}

/* E. RECOVERY SECTION SESSION BOXES
   li flex gap: gap-5 (1.25rem) = 12.5px at 10px → fix to 20px.
   space-y-5 margin between sessions: 1.25rem = 12.5px → fix to 20px.
   session heading row gap-3 (0.75rem) = 7.5px → fix to 12px.
   session box text-[0.96rem] = 9.6px → fix to 15px.
   session box padding: px-5 py-4 = 12.5px 10px → fix to 20px 16px. */
.space-y-5 > li.flex {
  gap: 20px !important;
}
.space-y-5 > li + li {
  margin-top: 20px !important;
}
.space-y-5 li .flex-1 > div.flex.items-center {
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.space-y-5 li .flex-1 > div:last-child {
  font-size: 15px !important;
  padding: 16px 20px !important;
}
/* recovery section top margin: mt-12 = 3rem = 30px → fix to 48px */
section .max-w-3xl.space-y-5 {
  margin-top: 48px !important;
}


/* PATCH: bg-cloud2 sections (built, recovery) missed by previous selectors */
section.bg-cloud2 h2 {
  font-weight: 400 !important;
}
section.bg-cloud2 > div[class*="py-16"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}
@media (min-width: 1024px) {
  section.bg-cloud2 > div[class*="py-16"] {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
}
section.bg-cloud2 > div > div[class*="gap-10"] {
  gap: 40px !important;
}
section.bg-cloud2 > div > div[class*="gap-12"] {
  gap: 48px !important;
}
section.bg-cloud2 .btn,
section.bg-cloud2 .btn-outline {
  padding: 16.8px 25.6px !important;
  font-size: 16px !important;
}


    /* H3/H4 FONT-WEIGHT FIX — Shopify theme sets h1–h5 { font-weight: 800 }.
       All h3/h4 inside our custom sections (bg-paper, bg-cloud, bg-cloud2)
       should be 400 to match the localhost reference. This covers:
       - Numbered list item titles in "Built specifically for" (h4, text-xl)
       - Recovery session headings: "Find your baseline." etc. (h4, text-2xl)
       - Conditions section labels: "Sciatica", "Lower back pain" etc. (h3)
       Excludes Shopify theme UI: cart items (.cart-item__name h4),
       menu drawer (.menu-drawer__title h3), related products. */
    section.bg-paper h3, section.bg-paper h4,
    section.bg-cloud  h3, section.bg-cloud  h4,
    section.bg-cloud2 h3, section.bg-cloud2 h4 {
      font-weight: 400 !important;
    }

    /* ================================================================
       MAX-W REM-BASE FIX — Shopify theme sets html { font-size: 10px }
       so all Tailwind rem-based max-width classes compute at 10px×rem
       instead of 16px×rem. Correcting each one found in custom sections.
       Formula: correct = rem × 16px
       ================================================================ */
    section.bg-paper .max-w-sm,
    section.bg-cloud  .max-w-sm,
    section.bg-cloud2 .max-w-sm  { max-width: 384px !important; }

    section.bg-paper .max-w-md,
    section.bg-cloud  .max-w-md,
    section.bg-cloud2 .max-w-md  { max-width: 448px !important; }

    section.bg-paper .max-w-lg,
    section.bg-cloud  .max-w-lg,
    section.bg-cloud2 .max-w-lg  { max-width: 512px !important; }

    section.bg-paper .max-w-xl,
    section.bg-cloud  .max-w-xl,
    section.bg-cloud2 .max-w-xl  { max-width: 576px !important; }

    section.bg-paper .max-w-2xl,
    section.bg-cloud  .max-w-2xl,
    section.bg-cloud2 .max-w-2xl { max-width: 672px !important; }

    section.bg-paper .max-w-3xl,
    section.bg-cloud  .max-w-3xl,
    section.bg-cloud2 .max-w-3xl { max-width: 768px !important; }

    /* ================================================================
       NUMBERED LIST SPACING FIX — "Built specifically for sciatica" section
       and any other ul.space-y-6 lists in our custom sections.
       All values use px instead of rem so they are unaffected by 10px base.
       ================================================================ */

    /* Horizontal gap between .num circle and text div (gap-4 = 1rem = 10px → 16px) */
    section.bg-paper li.flex.gap-4,
    section.bg-cloud  li.flex.gap-4,
    section.bg-cloud2 li.flex.gap-4 { gap: 16px !important; }

    /* Vertical spacing between list items (space-y-6 = 1.5rem = 15px → 24px) */
    section.bg-paper ul.space-y-6 > li + li,
    section.bg-cloud  ul.space-y-6 > li + li,
    section.bg-cloud2 ul.space-y-6 > li + li { margin-top: 24px !important; }

    /* UL top margin (mt-8 = 2rem = 20px → 32px) */
    section.bg-paper ul.space-y-6,
    section.bg-cloud  ul.space-y-6,
    section.bg-cloud2 ul.space-y-6 { margin-top: 32px !important; }

    /* h4 line-height: text-xl sets line-height:1.75rem = 17.5px → 28px */
    section.bg-paper li h4,
    section.bg-cloud  li h4,
    section.bg-cloud2 li h4 { line-height: 28px !important; }

    /* p margin-top inside li (mt-1 = 0.25rem = 2.5px → 4px) */
    section.bg-paper li p,
    section.bg-cloud  li p,
    section.bg-cloud2 li p { margin-top: 4px !important; }

    /* ================================================================
       DOCTOR SECTION — STACKING BREAKPOINT FIX
       Custom liquid stacks .crtz-doctor-inner at ≤768px.
       Reference (localhost) uses Tailwind lg: breakpoint (1024px).
       Between 769–1024px, both columns were only ~400px wide each,
       causing all text to wrap. Fix: stack at ≤1024px to match reference.
       ================================================================ */
    @media (max-width: 1024px) {
      .crtz-doctor-inner {
        flex-direction: column !important;
        gap: 48px !important;
      }
      .crtz-doctor-left,
      .crtz-doctor-right {
        width: 100% !important;
        max-width: 640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      .crtz-doctor-left {
        text-align: left !important;
      }
      .crtz-doctor-stat {
        text-align: left !important;
      }
    }

    /* ================================================================
       TWO FREE TOOLS SECTION — LEFT CARD HEIGHT FIX
       The left card has p-8 (2rem = 20px at 10px base, should be 32px)
       and a 260px phone image in normal flow (sm:block, not absolute).
       Because p-8 compresses padding, the card collapses to ~193px and
       overflow:hidden clips the phone. Fix: set explicit px padding and
       min-height so the phone mockup shows properly.
       Selector: first child of the lg:grid-cols-2 tools grid inside
       section.bg-paper — the backslash escapes the colon in the class name.
       ================================================================ */
    section.bg-paper [class*="lg:grid-cols-2"] > :first-child {
      padding: 40px !important;
      min-height: 420px !important;
    }
    section.bg-paper [class*="lg:grid-cols-2"] > :last-child {
      padding: 40px !important;
      min-height: 420px !important;
    }

    /* ================================================================
       WHAT'S INSIDE THE BELT — FEATURE GRID WIDTH FIX
       .crtz-features-grid uses repeat(3, 1fr) giving 3 columns of ~371px.
       Reference shows feature cards stacked in a wider single column (~448px).
       Changing to 2 columns doubles card width to ~568px at desktop,
       matching the reference proportions much more closely.
       ================================================================ */
    @media (min-width: 750px) {
      .crtz-features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
      }
    }

/* ===== What's inside: feature item fixes (space-y-4 list) ===== */
/* Fix p-4 padding (1rem = 10px → 16px) */
section.bg-paper ul.space-y-4 > li,
section.bg-cloud  ul.space-y-4 > li,
section.bg-cloud2 ul.space-y-4 > li {
  padding: 16px !important;
}
/* Fix w-9 h-9 icon size (2.25rem = 22.5px → 36px) */
section.bg-paper ul.space-y-4 .flex-none.w-9,
section.bg-cloud  ul.space-y-4 .flex-none.w-9,
section.bg-cloud2 ul.space-y-4 .flex-none.w-9 {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}
/* Fix h4 line-height inside space-y-4 (overrides the 28px rule from Built section) */
section.bg-paper ul.space-y-4 li h4,
section.bg-cloud  ul.space-y-4 li h4,
section.bg-cloud2 ul.space-y-4 li h4 {
  line-height: 1.25 !important;
}
/* Fix space-y-4 gap (1rem = 10px → 16px) */
section.bg-paper ul.space-y-4 > li + li,
section.bg-cloud  ul.space-y-4 > li + li,
section.bg-cloud2 ul.space-y-4 > li + li {
  margin-top: 16px !important;
}

/* ===== 1. Thermal Imaging section (section.gradient-cloud) — max-w-* rem fix ===== */
section.gradient-cloud .max-w-sm  { max-width: 384px !important; }
section.gradient-cloud .max-w-md  { max-width: 448px !important; }
section.gradient-cloud .max-w-lg  { max-width: 512px !important; }
section.gradient-cloud .max-w-xl  { max-width: 576px !important; }
section.gradient-cloud .max-w-2xl { max-width: 672px !important; }
section.gradient-cloud .max-w-3xl { max-width: 768px !important; }

/* Fix gap and spacing inside gradient-cloud sections */
section.gradient-cloud li.flex.gap-4 { gap: 16px !important; }
section.gradient-cloud ul.space-y-4 > li + li { margin-top: 16px !important; }
section.gradient-cloud ul.space-y-6 > li + li { margin-top: 24px !important; }

/* Fix stat grid gap (gap-3 = 0.75rem = 7.5px → 12px) */
section.gradient-cloud .gap-3 { gap: 12px !important; }
section.gradient-cloud .gap-4 { gap: 16px !important; }

/* ===== 2. Doctor photos: force .doc-face visible ===== */
.doc-face {
  display: block !important;
}

/* ===== 3. Review images: override Shopify hidden!important at responsive breakpoints ===== */
@media (min-width: 640px) {
  .correctez-page [class*="sm:block"] {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .correctez-page [class*="md:block"] {
    display: block !important;
  }
}
@media (min-width: 1024px) {
  .correctez-page [class*="lg:block"] {
    display: block !important;
  }
  /* Fix review image container width: lg:w-44 = 11rem = 176px (at 16px rem) */
  .correctez-page [class*="lg:w-44"] {
    width: 176px !important;
    min-width: 176px !important;
  }
}

/* Fix review image sm width: w-32 = 8rem = 128px (at 16px rem) */
.correctez-page [class*="w-32"] {
  width: 128px !important;
}

/* ===== Review card fixes ===== */
/* Review body text: text-[0.95rem] = 9.5px at 10px rem base, needs 15.2px */
.correctez-page [class*="text-[0.95rem]"] {
  font-size: 15.2px !important;
  line-height: 1.65 !important;
}

/* Review card inner padding: lg:p-8 = 20px at 10px rem, needs 32px */
@media (min-width: 1024px) {
  .correctez-page article [class*="lg:p-8"] {
    padding: 32px !important;
  }
}

/* Review card spacer margins: mt-5 = 12.5px at 10px rem, needs 20px */
.correctez-page article [class*="mt-5"] {
  margin-top: 20px !important;
}

/* Review image column: stretch to full article height */
.correctez-page article > div > [class*="lg:w-44"] {
  align-self: stretch !important;
}
.correctez-page article > div > [class*="lg:w-44"] img {
  height: 100% !important;
  object-fit: cover !important;
}


/* ===== Responsive text size fixes (md:/lg: prefixes not overridden by Shopify theme) ===== */
/* At 10px rem base: md:text-3xl=18.75px, md:text-4xl=22.5px, md:text-5xl=30px - all too small */
@media (min-width: 768px) {
  .correctez-page [class*="md:text-3xl"] { font-size: 30px !important; line-height: 1.25 !important; }
  .correctez-page [class*="md:text-4xl"] { font-size: 36px !important; line-height: 1.1 !important; }
  .correctez-page [class*="md:text-5xl"] { font-size: 48px !important; line-height: 1.05 !important; }
  .correctez-page .gradient-sky[class*="md:p-12"] { padding: 48px !important; }
}
@media (min-width: 1024px) {
  .correctez-page [class*="lg:text-4xl"] { font-size: 36px !important; line-height: 1.1 !important; }
  .correctez-page .gradient-sky[class*="lg:p-16"] { padding: 64px !important; }
}

/* ===== Phone mockup in Routine Guide card ===== */
/* sm:right-6 = 15px at 10px rem (should be 24px) */
.correctez-page article [class*="sm:right-6"] { right: 24px !important; }
/* sm:translate-y-6 = 15px at 10px rem (should be 24px) */
.correctez-page article [class*="sm:translate-y-6"] { transform: translateY(24px) !important; }
/* Phone border-radius: rounded-[2.5rem] = 25px (should be 40px) */
.correctez-page article [class*="rounded-[2.5rem]"] { border-radius: 40px !important; }

/* ===== 60-nights section ===== */
/* Border radius: rounded-[2rem] = 20px (should be 32px) */
.correctez-page .gradient-sky { border-radius: 32px !important; }
/* Try Correctez button: .btn-navy from Shopify theme overrides bg-white class */
.correctez-page .gradient-sky a.btn[class*="bg-white"] {
  background-color: #ffffff !important;
  color: #0F416C !important;
}
.correctez-page .gradient-sky a.btn[class*="bg-white"]:hover {
  background-color: #EFF6FF !important;
}


/* ===== Thermal Imaging "You can see the difference" ===== */
/* Heading: Shopify theme forces h2 to font-weight 800 — should be 400 */
section.gradient-cloud h2 { font-weight: 400 !important; }

/* Stat number line-height: Tailwind text-3xl sets line-height 2.25rem = 22.5px at 10px base (should be ~36px) */
section.gradient-cloud .font-display[class*="text-3xl"] { line-height: 1.2 !important; }

/* Stat box padding + border-radius: p-4 = 10px (should be 16px), rounded-2xl = 10px (should be 16px) */
section.gradient-cloud ul li {
  padding: 16px !important;
  border-radius: 16px !important;
}

/* UL top margin: mt-6 = 15px (should be 24px) */
section.gradient-cloud ul[class*="mt-6"] { margin-top: 24px !important; }

/* ===== Score section "Track what matters. Skip the rest." ===== */
/* Card border-radius: rounded-[2rem] = 20px at 10px rem (should be 32px) */
.correctez-page .gradient-deep { border-radius: 32px !important; }

/* Card padding: p-6 lg:p-12 = 15px/30px at 10px rem (should be 24px/48px) */
.correctez-page .gradient-deep { padding: 24px !important; }
@media (min-width: 1024px) {
  .correctez-page .gradient-deep { padding: 48px !important; }
  /* Inner grid gap: gap-10 = 25px (should be 40px) */
  .correctez-page .gradient-deep .grid[class*="gap-10"] { gap: 40px !important; }
}

/* Metric row padding: py-4 = 10px (should be 16px), px-4 = 10px (should be 16px) */
.correctez-page .gradient-deep [class*="py-4"] {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.correctez-page .gradient-deep [class*="px-4"] {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* gap-3 between metric rows: 7.5px (should be 12px) — already fixed globally but reinforce */
.correctez-page .gradient-deep .gap-3 { gap: 12px !important; }
/* space-y-3 between metric rows: 7.5px (should be 12px) */
.correctez-page .gradient-deep [class*="space-y-3"] > * + * { margin-top: 12px !important; }


/* =====================================================
   ROUND 4 — Review cards, FAQ, Quiz modal px fixes
   ===================================================== */

/* Review card (bg-cloud2) — fix collapsed rem line-heights */
.correctez-page figure[class*="bg-cloud2"] figcaption > div > div:first-child {
  line-height: 20px !important;
}
.correctez-page figure[class*="bg-cloud2"] figcaption > div > div:last-child {
  line-height: 16px !important;
  margin-top: 2px !important;
}

/* FAQ accordion — fix rem-based font & spacing */
details.acc > summary {
  font-size: 16px !important;
  padding: 17.6px 0 !important;
}
details.acc .body {
  padding-bottom: 19.2px !important;
}
details.acc .ico {
  width: 25.6px !important;
  height: 25.6px !important;
  flex: none !important;
}

/* Assessment (quiz) modal — fix all rem to px */
.assessment-header {
  padding: 16px 20px !important;
  gap: 16px !important;
}
.assessment-step-label {
  font-size: 11.52px !important;
}
.assessment-close {
  width: 36px !important;
  height: 36px !important;
}
.assessment-body {
  padding: 28px 24px 16px !important;
}
@media (min-width: 640px) {
  .assessment-body { padding: 40px 40px 24px !important; }
}
.assessment-eyebrow {
  font-size: 11.52px !important;
  margin-bottom: 8px !important;
}
.assessment-help {
  font-size: 15.2px !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}
.assessment-slider {
  margin-top: 24px !important;
}
.assessment-slider-readout {
  font-size: 48px !important;
  line-height: 1 !important;
}
.assessment-slider-readout .unit {
  font-size: 17.6px !important;
  margin-left: 5.6px !important;
}
.assessment-chips {
  gap: 8px !important;
  margin-top: 19.2px !important;
}
.assessment-chip {
  font-size: 14.4px !important;
  padding: 11.2px 19.2px !important;
  border-radius: 999px !important;
}
.assessment-textarea {
  margin-top: 24px !important;
  border-radius: 16px !important;
  padding: 16px 17.6px !important;
  font-size: 15.2px !important;
  min-height: 112px !important;
}
.assessment-footer {
  padding: 16px 24px !important;
}
@media (min-width: 640px) {
  .assessment-footer { padding: 16px 40px !important; }
}
.assessment-btn {
  font-size: 14.4px !important;
  padding: 10.4px 22.4px !important;
}
.assessment-score-ring-inner .num {
  font-size: 56px !important;
}
.assessment-score-ring-inner .label {
  font-size: 10.88px !important;
  margin-top: 6.4px !important;
}
.assessment-bars {
  margin-top: 24px !important;
  gap: 16px !important;
}
.assessment-bar-row {
  grid-template-columns: minmax(112px, 144px) 1fr auto !important;
  gap: 12px !important;
}


/* =====================================================
   ROUND 5 — Conditions grid + eyebrow line-height fixes
   ===================================================== */

/* "Six common causes" grid — md:grid-cols-3 not applying (Shopify rem/responsive issue) */
@media (min-width: 768px) {
  .correctez-page [class*="md:grid-cols-3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}
/* Base gap-4 = 1rem = 10px on Shopify (should be 16px) */
.correctez-page [class*="md:grid-cols-3"] {
  gap: 16px !important;
}

/* Eyebrow / kicker small-caps label — text-xs leading-4 line-height collapsed */
.correctez-page [class*="tracking-[0.22em]"] {
  line-height: 16px !important;
}


/* ROUND 5b — conditions grid gap correction at md+ (after base rule to win cascade) */
@media (min-width: 768px) {
  .correctez-page [class*="md:grid-cols-3"] {
    gap: 24px !important;
  }
}


/* =====================================================
   ROUND 6 — Numbered steps section rem → px fixes
   ===================================================== */

/* .step padding-left: 4.5rem = 45px on Shopify (should be 72px) */
.step {
  padding-left: 72px !important;
}
/* .step::before connecting line — all rem values */
.step::before {
  left: 19.6px !important;
  top: 40px !important;
  bottom: -40px !important;
}
/* space-y-10 between steps: 2.5rem = 25px (should be 40px) */
ol[class*="space-y-10"] > li + li {
  margin-top: 40px !important;
}
/* h4 text-2xl line-height: 2rem = 20px (should be 32px) */
.step h4 {
  line-height: 32px !important;
}
/* p mt-2: 0.5rem = 5px (should be 8px) */
.step p[class*="mt-2"] {
  margin-top: 8px !important;
  line-height: 24px !important;
}


/* ROUND 6b — step h4 line-height (Shopify theme override fight) */
.correctez-page ol.space-y-10 .step h4,
.correctez-page [class*="space-y-10"] .step h4 {
  line-height: 32px !important;
}


/* =====================================================
   ROUND 7 — h1 font-weight + mobile spacing fixes
   ===================================================== */

/* 1. Product title h1 — Shopify forces font-weight: 900, revert to 400 */
.correctez-page h1[class*="font-display"] {
  font-weight: 400 !important;
}

/* 2. Mobile: mt-* rem to px + line-height fixes for product info & four-step sections */
@media (max-width: 1023px) {
  /* Common mt-* margins (rem computes at 10px base on Shopify) */
  .correctez-page [class~="mt-1"] { margin-top: 4px !important; }
  .correctez-page [class~="mt-2"] { margin-top: 8px !important; }
  .correctez-page [class~="mt-3"] { margin-top: 12px !important; }
  .correctez-page [class~="mt-4"] { margin-top: 16px !important; }
  .correctez-page [class~="mt-5"] { margin-top: 20px !important; }
  .correctez-page [class~="mt-6"] { margin-top: 24px !important; }
  .correctez-page [class~="mt-8"] { margin-top: 32px !important; }
  .correctez-page [class~="mt-10"] { margin-top: 40px !important; }

  /* gap-2 = 0.5rem = 5px (should be 8px) */
  .correctez-page [class~="gap-2"] { gap: 8px !important; }

  /* text-sm line-height: 1.25rem = 12.5px (should be 20px) */
  .correctez-page [class~="text-sm"] { line-height: 20px !important; }

  /* text-xs line-height: 1rem = 10px (should be 16px) */
  .correctez-page [class~="text-xs"] { line-height: 16px !important; }

  /* Paragraph line-height: leading-[1.7] is unitless so correct, but leading-relaxed uses rem */
  .correctez-page p[class~="leading-relaxed"] { line-height: 26px !important; }
}


/* =====================================================
   ROUND 8 — Mobile layout: section padding + spacing
   ===================================================== */

/* Section vertical padding: py-16 = 4rem = 40px on Shopify (should be 64px) */
@media (max-width: 1023px) {
  .correctez-page [class~="py-16"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  /* Horizontal padding: px-6 = 1.5rem = 15px (should be 24px) */
  .correctez-page [class~="px-6"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* Grid gap: gap-12 = 3rem = 30px (should be 48px) */
  .correctez-page [class~="gap-12"] {
    gap: 48px !important;
  }
  /* gap-6 = 1.5rem = 15px (should be 24px) */
  .correctez-page [class~="gap-6"] {
    gap: 24px !important;
  }
  /* gap-4 = 1rem = 10px (should be 16px) */
  .correctez-page [class~="gap-4"] {
    gap: 16px !important;
  }
  /* gap-3 = 0.75rem = 7.5px (should be 12px) */
  .correctez-page [class~="gap-3"] {
    gap: 12px !important;
  }
  /* Eyebrow tracking on mobile — reduce to prevent single-word orphan lines */
  .correctez-page [class*="tracking-[0.22em]"] {
    letter-spacing: 0.1em !important;
    font-size: 10px !important;
  }
  /* py-6 = 1.5rem = 15px (should be 24px) - inner section padding */
  .correctez-page [class~="py-6"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* p-6 = 1.5rem = 15px (should be 24px) */
  .correctez-page [class~="p-6"] {
    padding: 24px !important;
  }
  /* p-4 = 1rem = 10px (should be 16px) */
  .correctez-page [class~="p-4"] {
    padding: 16px !important;
  }
}

/* Desktop: lg:px-10 = 2.5rem = 25px (should be 40px) */
@media (min-width: 1024px) {
  .correctez-page [class*="lg:px-10"] {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}


/* ROUND 9 — Global mt-* and gap-* fixes (all viewports) */
/* Shopify theme sets html{font-size:10px}, making Tailwind rem values 62.5% of correct */
.correctez-page [class~="mt-1"] { margin-top: 4px !important; }
.correctez-page [class~="mt-2"] { margin-top: 8px !important; }
.correctez-page [class~="mt-3"] { margin-top: 12px !important; }
.correctez-page [class~="mt-4"] { margin-top: 16px !important; }
.correctez-page [class~="mt-5"] { margin-top: 20px !important; }
.correctez-page [class~="mt-6"] { margin-top: 24px !important; }
.correctez-page [class~="mt-8"] { margin-top: 32px !important; }
.correctez-page [class~="mt-10"] { margin-top: 40px !important; }
.correctez-page [class~="mt-12"] { margin-top: 48px !important; }
.correctez-page [class~="mt-16"] { margin-top: 64px !important; }
.correctez-page [class~="gap-2"] { gap: 8px !important; }
.correctez-page [class~="gap-3"] { gap: 12px !important; }
.correctez-page [class~="gap-4"] { gap: 16px !important; }
.correctez-page [class~="gap-6"] { gap: 24px !important; }
.correctez-page [class~="gap-8"] { gap: 32px !important; }
.correctez-page [class~="gap-12"] { gap: 48px !important; }
.correctez-page [class~="text-sm"] { line-height: 20px !important; }
.correctez-page [class~="text-xs"] { line-height: 16px !important; }
.correctez-page p[class~="leading-relaxed"] { line-height: 26px !important; }
.correctez-page [class~="py-16"] { padding-top: 64px !important; padding-bottom: 64px !important; }
.correctez-page [class~="px-6"] { padding-left: 24px !important; padding-right: 24px !important; }
.correctez-page [class~="py-6"] { padding-top: 24px !important; padding-bottom: 24px !important; }
.correctez-page [class~="p-6"] { padding: 24px !important; }
.correctez-page [class~="p-4"] { padding: 16px !important; }
.correctez-page [class~="mb-2"] { margin-bottom: 8px !important; }
.correctez-page [class~="mb-3"] { margin-bottom: 12px !important; }
.correctez-page [class~="mb-4"] { margin-bottom: 16px !important; }
.correctez-page [class~="mb-6"] { margin-bottom: 24px !important; }
.correctez-page [class~="mb-8"] { margin-bottom: 32px !important; }
.correctez-page [class~="space-y-2"] > * + * { margin-top: 8px !important; }
.correctez-page [class~="space-y-3"] > * + * { margin-top: 12px !important; }
.correctez-page [class~="space-y-4"] > * + * { margin-top: 16px !important; }
.correctez-page [class~="space-y-6"] > * + * { margin-top: 24px !important; }


/* ROUND 10 — Mobile pt-*/pb-*/pl-*/pr-* fixes + leading-relaxed correction */

/* Fix leading-relaxed: use natural unitless ratio so all font sizes compute correctly */
/* (previous 26px override was too large for text-sm elements) */
.correctez-page [class~="leading-relaxed"] { line-height: 1.625 !important; }

/* Mobile-only pt-* pb-* pl-* pr-* fixes (Shopify 10px rem base → wrong values) */
/* lg: prefix rules handle desktop correctly so we only need mobile override */
@media (max-width: 1023px) {
  .correctez-page [class~="pt-1"] { padding-top: 4px !important; }
  .correctez-page [class~="pt-2"] { padding-top: 8px !important; }
  .correctez-page [class~="pt-3"] { padding-top: 12px !important; }
  .correctez-page [class~="pt-4"] { padding-top: 16px !important; }
  .correctez-page [class~="pt-5"] { padding-top: 20px !important; }
  .correctez-page [class~="pt-6"] { padding-top: 24px !important; }
  .correctez-page [class~="pt-8"] { padding-top: 32px !important; }
  .correctez-page [class~="pt-10"] { padding-top: 40px !important; }
  .correctez-page [class~="pt-12"] { padding-top: 48px !important; }
  .correctez-page [class~="pt-16"] { padding-top: 64px !important; }
  .correctez-page [class~="pb-1"] { padding-bottom: 4px !important; }
  .correctez-page [class~="pb-2"] { padding-bottom: 8px !important; }
  .correctez-page [class~="pb-3"] { padding-bottom: 12px !important; }
  .correctez-page [class~="pb-4"] { padding-bottom: 16px !important; }
  .correctez-page [class~="pb-5"] { padding-bottom: 20px !important; }
  .correctez-page [class~="pb-6"] { padding-bottom: 24px !important; }
  .correctez-page [class~="pb-8"] { padding-bottom: 32px !important; }
  .correctez-page [class~="pb-10"] { padding-bottom: 40px !important; }
  .correctez-page [class~="pb-12"] { padding-bottom: 48px !important; }
  .correctez-page [class~="pb-14"] { padding-bottom: 56px !important; }
  .correctez-page [class~="pb-16"] { padding-bottom: 64px !important; }
  .correctez-page [class~="pl-2"] { padding-left: 8px !important; }
  .correctez-page [class~="pl-3"] { padding-left: 12px !important; }
  .correctez-page [class~="pl-4"] { padding-left: 16px !important; }
  .correctez-page [class~="pl-6"] { padding-left: 24px !important; }
  .correctez-page [class~="pl-8"] { padding-left: 32px !important; }
  .correctez-page [class~="pr-2"] { padding-right: 8px !important; }
  .correctez-page [class~="pr-3"] { padding-right: 12px !important; }
  .correctez-page [class~="pr-4"] { padding-right: 16px !important; }
  .correctez-page [class~="pr-6"] { padding-right: 24px !important; }
  .correctez-page [class~="pr-8"] { padding-right: 32px !important; }
  .correctez-page [class~="text-2xl"] { font-size: 24px !important; line-height: 32px !important; }
  .correctez-page [class~="text-3xl"] { font-size: 30px !important; line-height: 36px !important; }
  .correctez-page [class~="text-4xl"] { font-size: 36px !important; line-height: 40px !important; }
  .correctez-page [class~="text-xl"] { font-size: 20px !important; line-height: 28px !important; }
  .correctez-page [class~="text-lg"] { font-size: 18px !important; line-height: 28px !important; }
  .correctez-page [class~="text-base"] { font-size: 16px !important; line-height: 24px !important; }
}


/* ROUND 11 — Before/After image slider */
.correctez-page .ba {
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}
.correctez-page .ba .handle {
  display: block !important;
  width: 2px !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  background: rgba(255,255,255,0.85) !important;
  cursor: ew-resize !important;
  z-index: 5 !important;
}
.correctez-page .ba .handle-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 14px rgba(0,0,0,0.32);
  pointer-events: none;
  flex-shrink: 0;
}

.correctez-page .ba .handle-knob {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230F416C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='8 5 3 12 8 19'/%3E%3Cpolyline points='16 5 21 12 16 19'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}