/* ==========================================================================
   Relationship Results funnel — Serene Authority
   --------------------------------------------------------------------------
   The type, spacing and shape tokens come from the Stitch DESIGN.md. The
   color is Ray's own: he asked for his blue from the previous site, so the
   original navy-and-sage palette was re-cut around #20315c and the sage
   accent replaced with two blues. Contrast ratios are noted where they
   matter. They are written as plain custom properties rather than a
   Tailwind build on purpose: these pages get pasted into GoHighLevel custom-
   code blocks, and a CDN <script> that rewrites classes after paint produces a
   visible flash of unstyled content on every step of the funnel.
   ========================================================================== */

:root {
  /* Surfaces — warm cream canvas, never pure white behind the page */
  --surface:                   #fbf9f8;
  --surface-bright:            #ffffff;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #f5f3f3;
  --surface-container:         #efeded;
  --surface-container-high:    #eae8e7;
  --surface-container-highest: #e4e2e2;

  /* Ink */
  --on-surface:                #1b1c1c;
  --on-surface-variant:        #44474c;
  --outline:                   #74777d;
  --outline-variant:           #c4c6cd;

  /* Primary — Ray's own blue, taken from his previous site.
     12.1:1 against the cream ground and 12.7:1 behind white text, so the one
     value works as heading ink, as a button, and as a full dark section. */
  --primary:                   #20315c;
  --primary-container:         #2c4174;   /* one step up, for hover */
  --on-primary:                #ffffff;
  --on-primary-container:      #9fb0d4;   /* body text on the blue */
  --primary-fixed:             #d2e0f7;

  /* Secondary — the accent, now blue rather than sage.
     --------------------------------------------------------------------
     This is deliberately two blues, not one. `--secondary` is used as TEXT
     (eyebrows, prices, links, tick marks) on the light ground, and a literal
     sky blue there measures 1.7:1 — invisible. So a readable mid-blue does
     the text work, and the sky blues are kept for fills and for text sitting
     on the dark blue.

       --secondary            6.0:1 on cream, 5.1:1 on the light fill
       --secondary-fixed-dim  7.3:1 on --primary
     -------------------------------------------------------------------- */
  --secondary:                 #2b6395;   /* readable accent — text weight */
  --secondary-container:       #d6e4f4;   /* chips, pale fills */
  --secondary-fixed:           #deeaf7;   /* the pale section ground */
  --secondary-fixed-dim:       #a9c7e6;   /* accent text on the dark blue */
  --on-secondary:              #ffffff;

  --error:                     #ba1a1a;
  --error-container:           #ffdad6;
  --on-error-container:        #93000a;

  /* Rhythm — 8px base unit */
  --stack-sm:        16px;
  --stack-md:        32px;
  --stack-lg:        80px;
  --gutter:          24px;
  --container-max:   1200px;
  --margin-mobile:   24px;
  --margin-desktop:  64px;

  --radius-sm:   0.25rem;
  --radius:      0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Ambient shadow — tinted with the brand blue, never black */
  --shadow-ambient: 0 10px 40px -10px rgba(32, 49, 92, 0.12);
  --shadow-lifted:  0 18px 50px -12px rgba(32, 49, 92, 0.20);
  --shadow-soft:    0 2px 8px -2px rgba(32, 49, 92, 0.10);

  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--secondary-container); color: var(--primary); }

img { max-width: 100%; display: block; }

/* --------------------------------------------------------------------------
   Typography scale
   -------------------------------------------------------------------------- */

.display, .headline-md, .headline-sm, h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--primary);
  margin: 0;
}

.display {
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -0.01em;
}

.headline-md { font-size: 28px; line-height: 36px; }
.headline-sm { font-size: 22px; line-height: 30px; }

@media (min-width: 768px) {
  .display     { font-size: 60px; line-height: 68px; letter-spacing: -0.02em; }
  .headline-md { font-size: 32px; line-height: 40px; }
  .headline-sm { font-size: 24px; line-height: 32px; }
}

.body-lg {
  font-size: 18px;
  line-height: 29px;
  color: var(--on-surface-variant);
}

.body-md { font-size: 16px; line-height: 25px; color: var(--on-surface-variant); }

.label-caps {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  display: block;
  margin-bottom: var(--stack-sm);
}

.quote {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 32px;
  color: var(--primary);
}

@media (min-width: 768px) {
  .quote { font-size: 23px; line-height: 36px; }
}

.muted { color: var(--on-surface-variant); }
.fine  { font-size: 14px; line-height: 22px; color: var(--on-surface-variant); }
.center { text-align: center; }

p { margin: 0 0 var(--stack-sm); }
p:last-child { margin-bottom: 0; }

a { color: var(--primary); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--margin-mobile);
  padding-right: var(--margin-mobile);
}

.wrap-narrow { max-width: 760px; }
.wrap-mid    { max-width: 940px; }

@media (min-width: 768px) {
  .wrap { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
}

.section { padding-top: 56px; padding-bottom: 56px; }

@media (min-width: 768px) {
  .section { padding-top: var(--stack-lg); padding-bottom: var(--stack-lg); }
}

.section--tint    { background: var(--surface-container-low); }
.section--contrast{ background: var(--primary); color: var(--on-primary); }
.section--sage    { background: var(--secondary-fixed); }

.section--contrast .display,
.section--contrast .headline-md,
.section--contrast .headline-sm { color: var(--on-primary); }
.section--contrast .body-lg,
.section--contrast .body-md     { color: rgba(255, 255, 255, 0.78); }
.section--contrast .eyebrow     { color: var(--secondary-fixed-dim); }

.stack-sm > * + * { margin-top: var(--stack-sm); }
.stack-md > * + * { margin-top: var(--stack-md); }

.rule {
  height: 3px;
  width: 56px;
  background: var(--secondary);
  border: 0;
  border-radius: var(--radius-full);
  margin: 20px 0 0;
}

.rule--center { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: var(--gutter); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
}

/* --------------------------------------------------------------------------
   Header / footer
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 249, 248, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--outline-variant);
}

.site-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 14px var(--margin-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
}

@media (min-width: 768px) {
  .site-header__inner { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
}

.brand {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.2;
  color: var(--primary);
  text-decoration: none;
}

.brand small {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-top: 3px;
}

.site-nav { display: none; gap: 28px; }

@media (min-width: 900px) {
  .site-nav { display: flex; }
}

.site-nav a {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color 0.25s ease;
}

.site-nav a:hover { color: var(--secondary); }

.site-footer {
  background: var(--primary);
  color: rgba(255, 255, 255, 0.7);
  padding: 40px var(--margin-mobile);
  font-size: 14px;
  line-height: 22px;
}

@media (min-width: 768px) {
  .site-footer { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
}

.site-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--stack-sm);
}

@media (min-width: 768px) {
  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.site-footer__brand {
  font-family: var(--serif);
  font-size: 20px;
  color: #fff;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }

.disclaimer {
  max-width: var(--container-max);
  margin: var(--stack-md) auto 0;
  padding-top: var(--stack-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12.5px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.55);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.12s ease, color 0.25s ease;
}

.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-ambient);
}

.btn--primary:hover { background: var(--primary-container); box-shadow: var(--shadow-soft); }

.btn--sage {
  background: var(--secondary-container);
  color: var(--primary);
  box-shadow: var(--shadow-soft);
}

.btn--sage:hover { background: var(--secondary-fixed-dim); }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn--ghost:hover { background: var(--primary); color: var(--on-primary); }

.section--contrast .btn--ghost { color: var(--on-primary); border-color: rgba(255, 255, 255, 0.5); }
.section--contrast .btn--ghost:hover { background: #fff; color: var(--primary); }

.btn--block { display: flex; width: 100%; }

.btn--lg { padding: 18px 34px; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--stack-sm); align-items: center; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-xl);
  padding: var(--stack-md);
  box-shadow: var(--shadow-ambient);
}

.card--sage   { background: var(--secondary-fixed); border-color: transparent; }
.card--tint   { background: var(--surface-container-low); border-color: transparent; }
.card--navy   { background: var(--primary); border-color: transparent; color: var(--on-primary); }
.card--navy .headline-sm, .card--navy .headline-md { color: var(--on-primary); }
.card--navy .body-md, .card--navy .body-lg { color: rgba(255, 255, 255, 0.78); }
.card--flat   { box-shadow: none; }

.chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--secondary-container);
  color: var(--primary);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

.badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--secondary-container);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Lists — sage marks rather than default bullets, airy line height */

.tick-list { list-style: none; margin: 0; padding: 0; }

.tick-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 14px;
  line-height: 27px;
  color: var(--on-surface-variant);
}

.tick-list li:last-child { margin-bottom: 0; }

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 18px;
  height: 10px;
  border-left: 2px solid var(--secondary);
  border-bottom: 2px solid var(--secondary);
  transform: rotate(-45deg);
  border-radius: 1px;
}

.card--navy .tick-list li { color: rgba(255, 255, 255, 0.82); }
.card--navy .tick-list li::before,
.section--contrast .tick-list li::before { border-color: var(--secondary-fixed-dim); }
.section--contrast .tick-list li { color: rgba(255, 255, 255, 0.82); }

.dot-list { list-style: none; margin: 0; padding: 0; }

.dot-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  line-height: 27px;
  color: var(--on-surface-variant);
}

.dot-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--secondary);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 20px; }

.field label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  background: var(--surface-bright);
  color: var(--on-surface);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 0 4px rgba(43, 99, 149, 0.18);
}

.field textarea { resize: vertical; min-height: 110px; }

.field__hint { font-size: 13px; line-height: 20px; color: var(--on-surface-variant); margin-top: 8px; }

.field__error {
  display: none;
  font-size: 13.5px;
  line-height: 20px;
  color: var(--on-error-container);
  margin-top: 8px;
}

.field.is-invalid input { border-color: var(--error); }
.field.is-invalid .field__error { display: block; }

@media (min-width: 640px) {
  .field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* --------------------------------------------------------------------------
   Discovery — progress + option cards
   -------------------------------------------------------------------------- */

.progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--stack-md);
}

.progress__track {
  flex: 1;
  height: 5px;
  background: var(--surface-container-highest);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  background: var(--secondary);
  border-radius: var(--radius-full);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.progress__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  white-space: nowrap;
}

.step { display: none; }
.step.is-active { display: block; animation: step-in 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .step.is-active { animation: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

.options { display: grid; gap: 12px; margin: var(--stack-md) 0; }

.option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-bright);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.option:hover { border-color: var(--secondary); box-shadow: var(--shadow-soft); }

.option input { position: absolute; opacity: 0; pointer-events: none; }

.option__mark {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-full);
  background: var(--surface-bright);
  transition: border-color 0.2s ease, background-color 0.2s ease;
  position: relative;
}

.option--multi .option__mark { border-radius: var(--radius-sm); }

.option__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: var(--secondary);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.option input:checked ~ .option__mark { border-color: var(--secondary); }
.option input:checked ~ .option__mark::after { opacity: 1; transform: scale(1); }

.option input:focus-visible ~ .option__mark { box-shadow: 0 0 0 4px rgba(43, 99, 149, 0.24); }

.option:has(input:checked) { border-color: var(--secondary); background: var(--secondary-fixed); }

.option__text { flex: 1; }
.option__title { display: block; color: var(--on-surface); line-height: 25px; }
.option__note  { display: block; font-size: 13.5px; line-height: 21px; color: var(--on-surface-variant); margin-top: 4px; }

.step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-sm);
  margin-top: var(--stack-md);
}

.link-back {
  background: none;
  border: 0;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--on-surface-variant);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.link-back:hover { color: var(--primary); }
.link-back[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */

.review { background: var(--surface-container-low); border-radius: var(--radius-xl); padding: var(--stack-md); }

.review__who { display: flex; align-items: center; gap: 14px; margin-top: 20px; }

.review__avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: var(--radius-full);
  background: var(--secondary-container);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
}

.review__name { font-weight: 600; color: var(--primary); line-height: 22px; }
.review__src  { font-size: 13px; color: var(--on-surface-variant); }

.stars { color: var(--secondary); letter-spacing: 4px; font-size: 17px; }

/* --------------------------------------------------------------------------
   Resource tiles
   -------------------------------------------------------------------------- */

.tile {
  display: flex;
  flex-direction: column;
  background: var(--surface-bright);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.18s ease, border-color 0.25s ease;
}

.tile:hover { box-shadow: var(--shadow-lifted); transform: translateY(-2px); border-color: var(--secondary); }

.tile__kind {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 10px;
}

.tile__title { font-family: var(--serif); font-size: 19px; line-height: 27px; color: var(--primary); }
.tile__meta  { font-size: 13px; color: var(--on-surface-variant); margin-top: auto; padding-top: 14px; }

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

.portrait {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-ambient);
  aspect-ratio: 4 / 5;
}

.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.price {
  font-family: var(--serif);
  font-size: 38px;
  line-height: 46px;
  color: var(--secondary);
}

.card--navy .price { color: var(--secondary-fixed-dim); }

.notice {
  border-left: 3px solid var(--secondary);
  background: var(--surface-container-low);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 24px;
  color: var(--on-surface-variant);
}

.notice--urgent { border-left-color: var(--error); background: var(--error-container); color: var(--on-error-container); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sticky mobile action bar — the "appointment bar" from the design system */

.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--primary);
  padding: 12px var(--margin-mobile);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -6px 24px -8px rgba(32, 49, 92, 0.38);
}

.sticky-bar .btn { flex: 1; padding: 14px 18px; }

@media (min-width: 900px) { .sticky-bar { display: none; } }

/* Where the sticky bar is present it already carries both actions, so the
   header's button is pure duplication on a small screen. */
@media (max-width: 899px) {
  body.has-sticky-bar .site-header .btn { display: none; }
}

body.has-sticky-bar { padding-bottom: 84px; }

@media (min-width: 900px) { body.has-sticky-bar { padding-bottom: 0; } }

/* The header's secondary phone link. On a narrow screen the "Rather talk?"
   prefix pushes the number onto a second line, so it drops away and the
   number — the part that matters — stays on one line. */
.header-aside {
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
  text-decoration: none;
  white-space: nowrap;
}

.header-aside strong { color: var(--primary); }
.header-aside:hover strong { color: var(--secondary); }

@media (max-width: 560px) {
  .header-aside__label { display: none; }
}

/* --------------------------------------------------------------------------
   Legal pages
   --------------------------------------------------------------------------
   Plain, readable, printable. These are documents someone has to actually get
   through before spending several thousand dollars, so the type is set for
   sustained reading rather than for scanning, and nothing on the page competes
   with the text.
   -------------------------------------------------------------------------- */

.legal { padding: 40px 0 80px; }

@media (min-width: 768px) { .legal { padding: 56px 0 96px; } }

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 20px 0 0;
  padding: 16px 0;
  border-top: 1px solid var(--outline-variant);
  border-bottom: 1px solid var(--outline-variant);
  font-size: 13.5px;
  color: var(--on-surface-variant);
}

.legal__meta strong { color: var(--primary); font-weight: 600; }

.legal__body { max-width: 68ch; margin-top: var(--stack-md); }

.legal__body h2 {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 29px;
  color: var(--primary);
  margin: 40px 0 12px;
}

.legal__body h2:first-child { margin-top: 0; }

.legal__body h3 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  margin: 24px 0 8px;
}

.legal__body p,
.legal__body li { color: var(--on-surface-variant); font-size: 15.5px; line-height: 26px; }

.legal__body ul, .legal__body ol { padding-left: 22px; margin: 0 0 16px; }
.legal__body li { margin-bottom: 8px; }
.legal__body strong { color: var(--primary); font-weight: 600; }

.legal__toc {
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  margin-top: var(--stack-md);
}

.legal__toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.legal__toc li { margin-bottom: 6px; font-size: 14px; }
.legal__toc a { color: var(--on-surface-variant); text-decoration: none; }
.legal__toc a:hover { color: var(--secondary); text-decoration: underline; }

@media (max-width: 640px) { .legal__toc ol { columns: 1; } }

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--stack-md);
  padding-top: var(--stack-sm);
  border-top: 1px solid var(--outline-variant);
}

.legal-nav a {
  font-size: 13.5px;
  padding: 8px 14px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--on-surface-variant);
}

.legal-nav a:hover { border-color: var(--secondary); color: var(--primary); }
.legal-nav a[aria-current="page"] { background: var(--secondary-container); color: var(--primary); border-color: transparent; }

.draft-flag {
  border-left: 3px solid var(--error);
  background: var(--error-container);
  color: var(--on-error-container);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: var(--stack-md);
}

@media print {
  .site-header, .site-footer, .legal-nav, .draft-flag { display: none; }
  body { background: #fff; }
  .legal__body { max-width: none; }
}

/* Consent block on the checkout page */

.consent {
  margin-top: var(--stack-md);
  padding: 20px 22px;
  background: var(--surface-container-low);
  border-radius: var(--radius-lg);
}

.consent__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}

.consent__row + .consent__row { margin-top: 14px; }

.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-sm);
  background: var(--surface-bright);
  cursor: pointer;
  position: relative;
}

.consent input[type="checkbox"]:checked { background: var(--secondary); border-color: var(--secondary); }

.consent input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.16s ease;
}

.consent input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

.consent__text { font-size: 14.5px; line-height: 23px; color: var(--on-surface-variant); }
.consent__text a { color: var(--secondary); }

.consent.is-invalid { outline: 2px solid var(--error); outline-offset: 3px; }