/* ============================================================
   COMPONENTS
   One banner-commented block per component so each can be
   found and lifted into the page builder in isolation.
   Layout primitives (.container, .section), the type scale,
   .kicker, .subtitle and .lede live in base.css.
   Every value resolves to tokens.css.
   ============================================================ */


/* ============ BUTTONS ============ */
/* Ghost only. Transparent fill, 1px border, 0 radius. On hover
   the fill becomes mint and the text flips to the base bg.
   Primary carries a mint border and mint text at rest. */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 13px 22px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover{ border-color: var(--mint); color: var(--mint); transform: translateY(-1px); }
.btn--primary{ background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.btn--primary:hover{ background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(12,135,145,.55); }
.btn-row{ display: flex; gap: var(--s1); flex-wrap: wrap; margin-top: var(--s2); }


/* ============ HEADER ============ */
/* Sticky, backdrop blur, hairline bottom border. Off-canvas
   nav below 1025px, driven by js/site.js. */
.hdr{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding-block: 1rem;
  position: relative;
}
.logo{ display: inline-flex; align-items: center; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-size: 1.05rem; }
.logo img{ display: block; height: 220px; width: auto; }
.nav{ margin-left: auto; }
.nav__list{
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
}
.nav__item{ position: relative; }
.nav a{ color: var(--ink-mute); display: inline-flex; align-items: center; gap: 0.4rem; }
.nav a:hover,
.nav a[aria-current="page"]{ color: var(--ink); }
.has-sub > a::after{
  content: "";
  width: 0.42rem; height: 0.42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  opacity: 0.65;
}

/* Dropdown submenu, revealed on hover and keyboard focus. No JS. */
.nav__sub{
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 0.7rem);
  left: -0.75rem;
  min-width: 230px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 22px 50px -24px rgba(0,0,0,.7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
/* Invisible bridge so hover survives the gap above the panel */
.nav__sub::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -0.8rem;
  height: 0.8rem;
}
.nav__item.has-sub:hover > .nav__sub,
.nav__item.has-sub:focus-within > .nav__sub{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__sub a{
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--ink-mute);
  font-size: 0.9rem;
}
.nav__sub a:hover{ color: var(--mint); background: var(--surface-2); }

.navtoggle{
  display: none;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 0.55rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}
@media (max-width: 1024px){
  .nav{ display: none; }
  .nav.open{
    display: block;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg);
    padding: var(--s2) var(--gutter);
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .nav__list{ flex-direction: column; align-items: stretch; gap: var(--s1); }
  .nav__sub{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    background: transparent;
    border: none;
    border-left: 1px solid var(--line);
    border-radius: 0;
    margin: 0.4rem 0 0.2rem 0.4rem;
    padding: 0;
  }
  .nav__sub a{ padding: 0.4rem 0.9rem; }
  .navtoggle{ display: block; }
}


/* ============ HERO ============ */
/* Page opener: kicker, H1, italic subtitle, lede, two buttons,
   and the ascent line once at the end. */
.hero{ padding-block: var(--s5) var(--s3); position: relative; }
.hero h1{ margin-bottom: var(--s1); }
.hero__mark{ color: var(--mint); }
.hero .lede{ margin-top: 0; }


/* ============ ASCENT LINE ============ */
/* The signature device. A stepped gold path that climbs left to
   right, drawn on scroll into view, with a filled dot at the
   summit. One per page, at the end of the hero. */
.ascent{ display: block; width: 100%; height: 52px; overflow: visible; margin-top: var(--s3); }
.ascent path{
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
}
.ascent.is-visible path{ animation: climb 2.2s cubic-bezier(0.6, 0.05, 0.3, 1) forwards; }
.ascent circle{ fill: var(--gold); opacity: 0; }
.ascent.is-visible circle{ animation: peak 0.4s 1.9s forwards; }
@keyframes climb{ to{ stroke-dashoffset: 0; } }
@keyframes peak{ to{ opacity: 1; } }
/* Reduced motion: render the line complete and static. */
@media (prefers-reduced-motion: reduce){
  .ascent path{ stroke-dashoffset: 0; }
  .ascent circle{ opacity: 1; }
}


/* ============ SECTION HEADER ============ */
/* Section opener: kicker + H2 + optional lede. */
.section-header .lede{ margin-top: var(--s2); }


/* ============ CARD GRID ============ */
/* 3 or 4 across, 1px hairline gaps on --line, background shift
   on hover. */
.grid{
  display: grid;
  gap: 20px;
  margin-top: var(--s3);
}
.grid--2{ grid-template-columns: repeat(2, 1fr); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--4{ grid-template-columns: repeat(4, 1fr); }
/* Flow variant for odd counts (e.g. 5 cards): cards grow to fill the
   last row, so there is never an orphan empty cell. */
.grid--auto{ display: flex; flex-wrap: wrap; gap: 20px; }
.grid--auto .card{ flex: 1 1 260px; }
.card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.card:hover{ background: var(--surface); border-color: var(--line-2); box-shadow: 0 18px 40px -26px rgba(0,0,0,.6); transform: translateY(-3px); }
a.card{ display: block; color: inherit; text-decoration: none; }
a.card:hover{ color: inherit; }
a.card::after{ content: ""; }
.card h3,
.card h4{ font-size: var(--h4); font-weight: 700; margin-bottom: 0.6rem; color: var(--ink); }
.card p{ color: var(--ink-mute); font-size: 0.95rem; margin: 0; max-width: none; }
@media (max-width: 1024px){
  .grid--4{ grid-template-columns: repeat(2, 1fr); }
  .grid--3{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .grid--2, .grid--3, .grid--4{ grid-template-columns: 1fr; }
}


/* ============ STAGES ============ */
/* Numbered sequence. Only where content is genuinely ordered. */
.stages{ border-top: 1px solid var(--line); margin-top: var(--s3); }
.stage{
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.2s ease;
}
.stage:hover{ padding-left: 0.75rem; }
.stage__n{ font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--gold); }
.stage__name{ display: block; color: var(--mint); font-size: var(--h4); font-weight: 600; margin-bottom: 0.4rem; }
.stage__desc{ color: var(--ink-mute); font-size: 0.95rem; max-width: 60ch; margin: 0; }
@media (max-width: 768px){
  .stage{ grid-template-columns: 1fr; gap: 0.4rem; }
}


/* ============ OUTCOMES ============ */
/* Bulleted outcome list. Gold dash marker, bold lead-in then
   sentence. */
.outcomes{ list-style: none; padding: 0; margin: var(--s2) 0 0; max-width: 70ch; }
.outcomes li{ position: relative; padding-left: 1.9rem; margin-bottom: 1rem; color: var(--ink-mute); }
.outcomes li::before{
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.7rem; height: 1.5px;
  background: var(--gold);
}
.outcomes b{ color: var(--ink); font-weight: 600; }


/* ============ STAT BAND ============ */
/* Proof numbers, 3 across, mono uppercase labels. */
.stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.stat{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s2); text-align: left; }
.stat__n{ font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.03em; }
.stat__n span{ font-size: 0.42em; color: var(--teal); }
.stat__l{
  font-family: var(--display);
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-mute);
  margin-top: 0.8rem;
}
@media (max-width: 640px){ .stats{ grid-template-columns: 1fr; } }


/* ============ PULL QUOTE ============ */
/* 2px gold left border, italic, mono attribution. */
.quote{ border-left: 2px solid var(--gold); padding-left: var(--s2); max-width: 60ch; }
.quote p{
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-style: italic;
  color: var(--ink);
  line-height: 1.35;
  font-weight: 500;
  margin: 0 0 var(--s1);
  max-width: none;
}
.quote cite{
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  font-style: normal;
}


/* ============ CALLOUT ============ */
/* Inline emphasis box. Surface background, 2px mint left border. */
.callout{
  background: var(--surface);
  border-left: 2px solid var(--mint);
  border-radius: var(--radius);
  padding: var(--s2);
  max-width: none;
  margin-top: var(--s2);
}
.callout b{ color: var(--mint); font-weight: 600; display: block; margin-bottom: 0.4rem; }
.callout p{ margin: 0; color: var(--ink-mute); font-size: 0.96rem; max-width: none; }
.callout a{ display: inline-block; margin-top: var(--s1); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }


/* ============ LOGO STRIP ============ */
/* Client wordmarks. Text for now, real assets later. */
.logos{ display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; padding-block: var(--s2); opacity: 0.62; }
.logos span{ font-weight: 700; letter-spacing: 0.02em; color: var(--ink-mute); font-size: 1.05rem; }
.logos-label{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 0.5rem;
}


/* ============ TAGLINE ============ */
/* Mono, uppercase, gold utility line used under some section headers. */
.tagline{
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--s2);
}

/* ============ CTA BAND ============ */
/* Closing call to action. Surface background, centred, mono
   tagline line. */
.cta{ background: transparent; text-align: left; }
.cta > .container{ background: linear-gradient(135deg, var(--teal-dark), var(--teal)); border-radius: 20px; padding: clamp(40px, 6vw, 64px); position: relative; overflow: hidden; }
.cta .kicker{ color: #BFF0E8; }
.cta .kicker::before{ background: var(--gold); }
.cta h2{ color: #fff; }
.cta .lede{ margin-top: var(--s1); color: #D5EEEC; }
.cta .lede b{ color: #fff; }
.cta .btn-row{ justify-content: flex-start; }
.cta .btn.btn--primary{ background: #fff; border-color: #fff; color: var(--teal-dark); }
.cta .btn.btn--primary:hover{ background: #EAF2F1; border-color: #EAF2F1; color: var(--teal-dark); }
.cta .btn{ border-color: rgba(255,255,255,.5); color: #fff; }
.cta .btn:hover{ border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
.cta .tag{
  display: block;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #BFF0E8;
  margin-top: var(--s2);
}


/* ============ SPLIT ============ */
/* Text one side, media the other. Not in the reference file.
   Built to the same rhythm: hairline media slot, s5 gap. */
.split{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: center; margin-top: var(--s3); }
.split--flip{ direction: rtl; }
.split--flip > *{ direction: ltr; }
.split__body .lede{ margin-top: var(--s2); }
.split__body p{ color: var(--ink-body); }
@media (max-width: 768px){
  .split{ grid-template-columns: 1fr; gap: var(--s3); }
  .split--flip{ direction: ltr; }
}


/* ============ MEDIA SLOT ============ */
/* Photography placeholder. Real assets not yet supplied. */
.media-slot{
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  padding: var(--s2);
  text-align: center;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Fresh inline-SVG illustration, on the mountain / ascent motif.
   Copyright-free: built from scratch, no sourced imagery. */
.media-fig{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}


/* ============ FAQ ============ */
/* Accordion. Not in the reference file. Native <details>, no JS. */
.faq{ border-top: 1px solid var(--line); margin-top: var(--s3); max-width: 80ch; }
.faq details{ border-bottom: 1px solid var(--line); }
.faq summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) 0;
  font-size: var(--h4);
  font-weight: 600;
  color: var(--ink);
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq__a{ padding: 0 0 var(--s2); }
.faq__a p{ margin: 0; color: var(--ink-mute); max-width: 70ch; }


/* ============ FOOTER ============ */
/* Site footer. Hairline top border, multi-column site map. */
.ftr{ border-top: 1px solid var(--line); padding-block: var(--s5) var(--s3); color: var(--ink-mute); font-size: 0.9rem; }
.ftr__grid{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s3); }
@media (max-width: 900px){ .ftr__grid{ grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); } }
@media (max-width: 560px){ .ftr__grid{ grid-template-columns: 1fr; } }
.ftr__brand .logo img{ height: 44px; width: auto; }
.ftr__tag{ font-style: italic; color: var(--ink-mute); margin-top: var(--s1); max-width: 30ch; }
.ftr__brand p{ margin-top: 0.8rem; }
.ftr__h{ font-family: var(--mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s1); }
.ftr__col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.ftr a{ color: var(--ink-mute); }
.ftr a:hover{ color: var(--ink); }
.ftr__bar{ display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-dim); }
.ftr__legal{ display: flex; gap: var(--s2); flex-wrap: wrap; }


/* ============ MOTION / REVEAL ============ */
/* Reveal-on-scroll, wired by js/site.js. Hidden state applies
   only when JS is present; no-JS renders everything visible. */
.js [data-reveal]{ opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-visible{
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity: 1; transform: none; }
}


/* ============ FORM CONTROLS ============ */
.form-label{
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}
.field{ margin-bottom: var(--s2); }
.input,
.select{
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
}
.input::placeholder{ color: var(--ink-dim); }
.input:focus,
.select:focus{ outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--mint); }
.fieldset{ border: 0; padding: 0; margin: 0 0 var(--s3); }
.fieldset legend{
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s1);
  padding: 0;
}
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.form-grid .field--full{ grid-column: 1 / -1; }
@media (max-width: 560px){ .form-grid{ grid-template-columns: 1fr; } }
.form-note{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-top: 0.6rem;
}


/* ============ BOOKING ============ */
/* Date-selection panel that sits to the side of the page content. */
.booking{
  display: grid;
  grid-template-columns: 1fr minmax(320px, 380px);
  gap: var(--s5);
  align-items: start;
  margin-top: var(--s3);
}
@media (max-width: 900px){ .booking{ grid-template-columns: 1fr; gap: var(--s3); } }
.booking__panel{
  position: sticky;
  top: 6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
}
.date-opt{
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.date-opt:hover{ border-color: var(--ink-dim); }
.date-opt:has(input:checked){ border-color: var(--mint); background: var(--surface-2); }
.date-opt input{ accent-color: var(--mint); margin-top: 0.2rem; flex: none; }
.date-opt__d{ display: block; color: var(--ink); font-weight: 600; }
.date-opt__m{
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.2rem;
}
.price-line{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s1);
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 0.95rem;
}
.price-line--total{ color: var(--ink); font-weight: 700; font-size: 1.15rem; border-top-width: 2px; }
.price-line__v{ font-variant-numeric: tabular-nums; }
.booking__panel .btn,
.checkout__aside .btn{ width: 100%; text-align: center; justify-content: center; margin-top: var(--s2); }


/* ============ CHECKOUT ============ */
.checkout{
  display: grid;
  grid-template-columns: 1fr minmax(320px, 400px);
  gap: var(--s5);
  align-items: start;
  margin-top: var(--s3);
}
@media (max-width: 900px){ .checkout{ grid-template-columns: 1fr; gap: var(--s3); } }
.checkout__aside{
  position: sticky;
  top: 6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s2);
}
.summary-row{ display: flex; justify-content: space-between; gap: var(--s1); padding: 0.5rem 0; color: var(--ink-mute); font-size: 0.95rem; }
.summary-row b{ color: var(--ink); font-weight: 600; }


/* ============ STYLEGUIDE ONLY ============ */
/* Annotations for styleguide.html. Not for production blocks. */
.sg-label{
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-top: 1px solid var(--line);
  padding-top: var(--s1);
  margin-bottom: var(--s2);
}
.sg-label b{ color: var(--gold); font-weight: 500; }

/* Nav menu weight + size bump */
.nav__list > .nav__item > a { font-size: 17px; font-weight: 700; }

/* ==== FINAL AUTHORITATIVE — zip type scale for utility classes ==== */
.lede { font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.6; }
.subtitle { font-size: clamp(1.25rem, 2.4vw, 2rem); font-style: italic; }
.kicker { font-size: 0.75rem; text-transform: uppercase; }
.card p { font-size: 0.95rem; }
.nav__list > .nav__item > a { font-size: 0.92rem; font-weight: 500; }
.nav__sub li a { font-size: 0.9rem; }
.btn { font-size: 15px; }
.stat__l { font-size: 0.9rem; }
small { font-size: 0.82rem; }
.form-label { font-size: 0.72rem; text-transform: uppercase; }
input, select, textarea { font-size: 1rem; }
.form-note { font-size: 0.68rem; }

/* ==== FINAL — bigger utility text ==== */
.lede { font-size: clamp(1.3rem, 1.8vw, 1.7rem) !important; }
.subtitle { font-size: clamp(1.45rem, 2.6vw, 2.3rem) !important; }
.kicker { font-size: 0.9rem !important; }
.card p { font-size: 1.1rem !important; }
.nav__list > .nav__item > a { font-size: 1.05rem !important; font-weight: 600 !important; }
.nav__sub li a { font-size: 1rem !important; }
.btn { font-size: 17px !important; }
.stat__l { font-size: 1rem !important; }

/* ==== Mobile responsive — override my !important type bumps ==== */
@media (max-width: 900px) {
  .nav__list > .nav__item > a { font-size: 1rem !important; }
  .logo img { height: 96px !important; }
}
@media (max-width: 720px) {
  .container { padding: 0 20px !important; }
  .section { padding: 48px 0 !important; }
  .logo img { height: 80px !important; }
  .btn { padding: 12px 20px !important; }
}
@media (max-width: 560px) {
  .container { padding: 0 16px !important; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .grid--3, .grid--4 { grid-template-columns: 1fr !important; }
  .grid--2 { grid-template-columns: 1fr !important; }
  .stats { grid-template-columns: 1fr !important; }
}

/* ---- Header login button (added 2026-08-11) ---- */
.hdr__in .btn-login{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem 1.1rem;margin-left:.75rem;
  font-family:var(--display);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);background:transparent;
  border:1.5px solid var(--teal);border-radius:999px;
  text-decoration:none;transition:all .18s ease;
  white-space:nowrap;
}
.hdr__in .btn-login:hover,
.hdr__in .btn-login:focus-visible{
  background:var(--teal);color:#0A0A0C;border-color:var(--teal);
}
@media (max-width:900px){
  .hdr__in .btn-login{order:2;margin-left:auto;margin-right:.5rem;padding:.45rem .85rem;font-size:.85rem;}
  .hdr__in .navtoggle{order:3;}
}

/* ---- Home template nav login button (same skin) ---- */
.nav-end .btn-login{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem 1.1rem;margin-right:.6rem;
  font-family:var(--display);font-size:.95rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);background:transparent;
  border:1.5px solid var(--teal);border-radius:999px;
  text-decoration:none;transition:all .18s ease;
  white-space:nowrap;
}
.nav-end .btn-login:hover,
.nav-end .btn-login:focus-visible{
  background:var(--teal);color:#0A0A0C;border-color:var(--teal);
}
@media (max-width:900px){
  .nav-end .btn-login{padding:.45rem .85rem;font-size:.85rem;margin-right:.4rem;}
}

/* =============================================================
   /login/ page (branded sign-in)
   ============================================================= */
body.page-template-page-login,
body.page-template-default.page.pi-login-body{ background:var(--bg); color:var(--ink); }

.pi-login-page{
	min-height:calc(100vh - 120px);
	display:flex;align-items:center;justify-content:center;
	padding:clamp(3rem,8vw,6rem) var(--gutter);
	background:
		radial-gradient(1200px 500px at 15% 10%, rgba(34,167,178,.10), transparent 60%),
		radial-gradient(900px 500px at 90% 90%, rgba(35,186,164,.08), transparent 60%),
		var(--bg);
}
.pi-login-shell{ width:100%; max-width:440px; }
.pi-login-card{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:16px;
	padding:clamp(2rem, 4vw, 3rem);
	box-shadow:0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02);
	font-family:var(--display);
}
.pi-login-brand{ display:block; text-align:center; margin-bottom:1.75rem; }
.pi-login-brand img{ height:44px; width:auto; }
.pi-login-title{
	margin:0 0 .35rem;
	font-size:1.7rem; font-weight:600; letter-spacing:-.01em;
	color:var(--ink); text-align:center;
}
.pi-login-sub{
	margin:0 0 1.75rem;
	color:var(--ink-mute); font-size:.98rem;
	text-align:center;
}
.pi-login-error{
	background:rgba(220,80,80,.09);
	border:1px solid rgba(220,80,80,.35);
	color:#F4B8B8;
	padding:.75rem 1rem;
	border-radius:10px;
	font-size:.92rem;
	margin-bottom:1.25rem;
}
.pi-login-form{ display:flex; flex-direction:column; gap:1rem; }
.pi-login-field{ display:flex; flex-direction:column; gap:.4rem; }
.pi-login-label{ font-size:.82rem; color:var(--ink-mute); font-weight:500; letter-spacing:.02em; }
.pi-login-field input[type="text"],
.pi-login-field input[type="password"]{
	background:var(--bg);
	border:1px solid var(--line-2);
	color:var(--ink);
	font-size:1rem;
	font-family:var(--display);
	padding:.85rem 1rem;
	border-radius:10px;
	outline:none;
	transition:border-color .18s ease, box-shadow .18s ease;
}
.pi-login-field input:focus{
	border-color:var(--teal);
	box-shadow:0 0 0 3px rgba(34,167,178,.18);
}
.pi-login-row{
	display:flex; align-items:center; justify-content:space-between;
	margin-top:.25rem;
	font-size:.9rem;
}
.pi-login-remember{ display:inline-flex; align-items:center; gap:.5rem; color:var(--ink-body); cursor:pointer; }
.pi-login-remember input{ accent-color:var(--teal); width:16px; height:16px; }
.pi-login-forgot{ color:var(--teal); text-decoration:none; font-weight:500; }
.pi-login-forgot:hover{ color:var(--mint); text-decoration:underline; }
.pi-login-submit{
	margin-top:.75rem;
	background:var(--teal); color:#0A0A0C;
	border:none; border-radius:999px;
	font-family:var(--display); font-size:1rem; font-weight:600;
	padding:.95rem 1.25rem;
	cursor:pointer;
	transition:background .18s ease, transform .12s ease;
	letter-spacing:.01em;
}
.pi-login-submit:hover{ background:var(--mint); }
.pi-login-submit:active{ transform:translateY(1px); }
.pi-login-foot{
	margin:1.5rem 0 0;
	text-align:center;
	color:var(--ink-mute);
	font-size:.92rem;
}
.pi-login-foot a{ color:var(--teal); text-decoration:none; font-weight:500; }
.pi-login-foot a:hover{ color:var(--mint); text-decoration:underline; }

/* Hide theme chrome noise on login screen */
body.page-template-page-login .climb-nav,
body.page-template-page-login .progress,
body.page-template-page-login .loader,
body.page-template-page-login .cursor,
body.page-template-page-login .cursor-lbl{ display:none !important; }

/* Login page minimal footer */
.pi-login-footer{
	background:transparent;
	border-top:1px solid var(--line);
	padding:1.25rem var(--gutter);
	color:var(--ink-mute);
	font-family:var(--display);
	font-size:.85rem;
}
.pi-login-footer-in{
	max-width:var(--container);
	margin:0 auto;
	display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;
}
.pi-login-footer-links a{
	color:var(--ink-mute);text-decoration:none;margin-left:1.25rem;
}
.pi-login-footer-links a:hover{ color:var(--teal); }

/* Tighter card without logo — bump padding + title spacing */
body.pi-login-body .pi-login-card{ padding-top:clamp(2.25rem, 5vw, 3.25rem); }
body.pi-login-body .pi-login-title{ margin-top:0; }

/* --- Overrides: white button text + smaller login title (2026-08-11) --- */
.hdr__in .btn-login,
.nav-end .btn-login{ color:#ffffff !important; }
.hdr__in .btn-login:hover,
.nav-end .btn-login:hover,
.hdr__in .btn-login:focus-visible,
.nav-end .btn-login:focus-visible{ color:#0A0A0C !important; }

.pi-login-title{ font-size:1.25rem !important; letter-spacing:-.005em; }
.pi-login-sub{ font-size:.9rem; margin-bottom:1.5rem; }

/* Chloe feedback — inner page spacing only (no hero rules) */
.section h2{ margin-bottom: .75rem; }
.section h2 + p{ margin-top: .5rem; }
.section .lede + p, .section .subtitle + p{ margin-top: 1rem; }
.callout{ padding: clamp(1.25rem, 2.5vw, 2rem); }
.callout h2, .callout h3{ margin-bottom: .5rem; }
.callout p{ margin-top: .5rem; }


/* ===== Inner page header fixes (2026-08-11) ===== */
/* Put login button at far right (was appearing between logo and nav) */
.hdr__in .btn-login{ order: 99; margin-left: 12px; }
.hdr__in .navtoggle{ order: 98; }

/* Stop nav items wrapping to 2 lines */
.nav__list{ flex-wrap: nowrap; }
.nav__list > .nav__item > a{ white-space: nowrap; }

/* ===== Font sizes on non-home pages (Chloe For Business #1 + AI Discovery #1) ===== */
/* Scope: everything except homepage — safe, homepage hero is fragile */
body:not(.home) .hero .lede,
body:not(.home) .section .lede{
	font-size: clamp(1rem, 1.15vw, 1.2rem) !important;
	line-height: 1.55;
}
body:not(.home) .hero .subtitle,
body:not(.home) .section .subtitle{
	font-size: clamp(1.1rem, 1.4vw, 1.35rem) !important;
	font-style: normal;
	line-height: 1.4;
}

/* Bigger gap title -> lede/subtitle on inner-page heroes (AI Discovery) */
body:not(.home) .hero h1{ margin-bottom: 1.25rem !important; }
body:not(.home) .hero h1 + .lede,
body:not(.home) .hero h1 + .subtitle,
body:not(.home) .hero h1 + p{ margin-top: 1.25rem !important; }

/* ============ CONTRAST PATCH 2026-09-02 ============
   Kickers were --mint (#23BAA4) on near-black bg — too dim for many
   viewers. Bump to a brighter tint. Reinforce outcomes <b> so bold
   labels always read regardless of section background. */
.kicker,
.kicker--teal,
.on-dark .kicker,
[data-theme="dark"] .kicker,
[data-theme="dark"] .s-head .kicker { color: #7FE4D6 !important; }
.kicker::before,
[data-theme="dark"] .kicker::before { background: var(--gold) !important; }

.outcomes li { color: var(--ink-body); }
.outcomes b { color: #FFFFFF !important; font-weight: 700; }
.callout b { color: #FFFFFF; font-weight: 700; }

/* ============ QUOTE + SPACING PATCH 2026-09-02 ============
   .quote p was rendering dim italic on dark bg — bump to full white,
   drop italic weight assumption, add breathing room between blocks. */
.quote { margin: var(--s3) 0; }
.quote p {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-style: normal !important;
  opacity: 1 !important;
}
.quote cite { color: #BFF0E8 !important; margin-top: var(--s1); display: block; }

/* Block-to-block breathing room across all templates */
.section .grid + .quote,
.section .grid + .stats,
.section .stats + .quote,
.section .stages + .callout,
.section .outcomes + .callout,
.section .grid + .callout,
.section .quote + p,
.section .callout + p,
.section .stats + p { margin-top: var(--s3); }

.section .callout { margin-top: var(--s2); }
.section .stats { margin-top: var(--s3); }

/* Card grids: small headroom above them */
.section .lede + .grid,
.section h2 + .grid,
.section .subtitle + .grid { margin-top: var(--s2); }

/* ============ QUOTE COLOR HARDEN 2026-09-02 ============ */
body blockquote.quote p,
body .quote > p,
body section.section blockquote.quote p,
body section.hero blockquote.quote p {
  color: #FFFFFF !important;
  font-style: normal !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
body blockquote.quote cite,
body .quote cite {
  color: #BFF0E8 !important;
  opacity: 1 !important;
}

/* ============ BUTTON CONTRAST PATCH 2026-09-02 ============
   Secondary .btn (no --primary) rendered near-invisible: transparent bg + very
   dim border + inherited link teal made it unreadable on dark section bg.
   Force bright text, visible border, and subtle surface fill. */
body a.btn,
body a.btn:link,
body a.btn:visited {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  text-decoration: none !important;
}
body a.btn:hover,
body a.btn:focus-visible {
  color: #FFFFFF !important;
  background: rgba(35,186,164,0.15) !important;
  border-color: var(--mint) !important;
}
body a.btn.btn--primary,
body a.btn.btn--primary:link,
body a.btn.btn--primary:visited {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #FFFFFF !important;
}
body a.btn.btn--primary:hover,
body a.btn.btn--primary:focus-visible {
  background: var(--teal-dark) !important;
  border-color: var(--teal-dark) !important;
  color: #FFFFFF !important;
}
/* CTA band inversion (light band → dark buttons) */
body .cta a.btn.btn--primary,
body .cta a.btn.btn--primary:link,
body .cta a.btn.btn--primary:visited {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: var(--teal-dark) !important;
}
body .cta a.btn:not(.btn--primary),
body .cta a.btn:not(.btn--primary):link,
body .cta a.btn:not(.btn--primary):visited {
  background: transparent !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: #FFFFFF !important;
}

/* ============ TEAL-ON-DARK CONTRAST SWEEP 2026-09-02 ============
   Multiple elements inherit or set --teal (#22A7B2) as text color on the
   near-black bg. Ratio ~4.3:1 borderline; user reports unreadable. Sweep
   every place this shows up. */

/* Booking date-picker */
body .date-opt,
body .date-opt__d,
body .date-opt span,
body label.date-opt,
body label.date-opt span,
body label.date-opt .date-opt__d {
  color: #FFFFFF !important;
}
body .date-opt__m,
body label.date-opt .date-opt__m {
  color: var(--ink-body) !important;
}
body .date-opt legend,
body .booking__panel legend,
body .booking__panel fieldset legend {
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Any generic <a> that isn't a button, card, or nav link — brighten */
body .section a:not(.btn):not(.card):not(.date-opt):not(.callout a):not(.footer a),
body .hero a:not(.btn),
body .booking__panel a:not(.btn) {
  color: var(--mint) !important;
}

/* Kicker AVAILABLE DATES style (gold-ish already, but ensure readable) */
body .booking__panel .kicker,
body .booking__panel .form-label {
  color: #F9B138 !important;
}

/* Section body copy: force ink-body if inherited teal creeps in */
body .section p:not(.lede):not(.subtitle):not(.stage__desc):not(.stat__l) {
  color: var(--ink-body);
}

/* ============ FORM + TOTAL LINE CONTRAST 2026-09-02 ============ */
/* Number/text inputs — value color forced white (WooCommerce/Stripe/UA fill can win otherwise) */
body input.input,
body input[type='text'].input,
body input[type='number'].input,
body input[type='email'].input,
body input[type='tel'].input,
body select.select,
body textarea.input {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: var(--bg) !important;
  caret-color: #FFFFFF !important;
}
body input.input::placeholder,
body textarea.input::placeholder { color: var(--ink-dim) !important; -webkit-text-fill-color: var(--ink-dim) !important; }

/* Autofill safety (Chrome) */
body input.input:-webkit-autofill,
body input.input:-webkit-autofill:hover,
body input.input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  box-shadow: 0 0 0 1000px var(--bg) inset !important;
}

/* Price total line — force both label and value bright */
body .price-line,
body .price-line span,
body .price-line .price-line__v { color: var(--ink-body) !important; }
body .price-line--total,
body .price-line--total span,
body .price-line--total .price-line__v { color: #FFFFFF !important; font-weight: 700 !important; }

/* Form note under totals */
body .form-note { color: var(--ink-body) !important; }

/* ============ LOGIN PAGE CONTRAST 2026-09-02 ============ */
body .pi-login-field input[type='text'],
body .pi-login-field input[type='password'],
body .pi-login-field input[type='email'] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #FFFFFF !important;
}
body .pi-login-field input:-webkit-autofill,
body .pi-login-field input:-webkit-autofill:hover,
body .pi-login-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
}

/* Login links (Forgot password / Contact the team) */
body a.pi-login-forgot,
body .pi-login-foot a,
body .pi-login-footer-links a {
  color: #7FE4D6 !important;
}
body a.pi-login-forgot:hover,
body .pi-login-foot a:hover,
body .pi-login-footer-links a:hover {
  color: #BFF0E8 !important;
  text-decoration: underline;
}

/* Labels + remember-me row */
body .pi-login-label { color: #FFFFFF !important; font-weight: 500; }
body .pi-login-remember { color: var(--ink-body) !important; }

/* ============================================================
 *  WooCommerce checkout — dark theme override
 *  Applied inside .pi-checkout-wrap wrapper.
 * ============================================================ */
.pi-checkout-wrap { padding-top: 0; }

/* Kill "Basecamp has been added to your cart" notice + View cart link */
.pi-checkout-wrap .woocommerce-notices-wrapper .woocommerce-message,
.pi-checkout-wrap .woocommerce-message,
.pi-checkout-wrap .wc-block-components-notice-banner,
.pi-checkout-wrap .woocommerce-info:has(a[href*="/cart"]) { display: none !important; }

/* Kill "Returning customer? Click here to login" + coupon toggle */
.pi-checkout-wrap .woocommerce-form-login-toggle,
.pi-checkout-wrap .woocommerce-form-coupon-toggle,
.pi-checkout-wrap .checkout_coupon,
.pi-checkout-wrap form.login { display: none !important; }

/* Two-column layout */
.pi-checkout-wrap .woocommerce { max-width: 1200px; margin: 0 auto; }
.pi-checkout-wrap form.checkout,
.pi-checkout-wrap form.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 40px;
	align-items: start;
}
@media (max-width: 900px) {
	.pi-checkout-wrap form.checkout,
	.pi-checkout-wrap form.woocommerce-checkout { grid-template-columns: 1fr; gap: 24px; }
}
.pi-checkout-wrap #customer_details { grid-column: 1; }
.pi-checkout-wrap #order_review_heading,
.pi-checkout-wrap #order_review { grid-column: 2; }
@media (max-width: 900px) {
	.pi-checkout-wrap #customer_details,
	.pi-checkout-wrap #order_review_heading,
	.pi-checkout-wrap #order_review { grid-column: 1; }
}

/* Section cards on dark bg */
.pi-checkout-wrap .col-1,
.pi-checkout-wrap .col-2,
.pi-checkout-wrap #order_review,
.pi-checkout-wrap .woocommerce-additional-fields {
	background: var(--surface, #12141A);
	border: 1px solid var(--line, #2a2d38);
	border-radius: 12px;
	padding: 24px;
	margin: 0 0 20px;
	color: var(--ink, #EAF2F1);
}
.pi-checkout-wrap .col2-set { display: block; }
.pi-checkout-wrap .woocommerce-billing-fields > h3,
.pi-checkout-wrap .woocommerce-additional-fields > h3,
.pi-checkout-wrap #order_review_heading {
	color: var(--ink, #EAF2F1);
	font-family: var(--display, inherit);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 20px;
	letter-spacing: -0.01em;
}

/* Labels */
.pi-checkout-wrap label,
.pi-checkout-wrap .form-row label {
	color: var(--ink, #EAF2F1);
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
}
.pi-checkout-wrap .required { color: #F04B4B; }
.pi-checkout-wrap .optional { color: var(--ink-mute, #9199A8); font-weight: 400; }

/* Inputs + selects + textareas */
.pi-checkout-wrap input[type="text"],
.pi-checkout-wrap input[type="email"],
.pi-checkout-wrap input[type="tel"],
.pi-checkout-wrap input[type="password"],
.pi-checkout-wrap input[type="number"],
.pi-checkout-wrap select,
.pi-checkout-wrap textarea,
.pi-checkout-wrap .select2-selection {
	background: #0A0B10 !important;
	color: var(--ink, #EAF2F1) !important;
	border: 1px solid var(--line, #2a2d38) !important;
	border-radius: 8px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	width: 100% !important;
	min-height: 46px;
	box-sizing: border-box;
}
.pi-checkout-wrap input:focus,
.pi-checkout-wrap select:focus,
.pi-checkout-wrap textarea:focus {
	outline: none !important;
	border-color: var(--teal, #12A9B4) !important;
	box-shadow: 0 0 0 2px rgba(18,169,180,0.25) !important;
}
.pi-checkout-wrap .select2-selection__rendered { color: var(--ink, #EAF2F1) !important; line-height: 46px !important; padding-left: 0 !important; }
.pi-checkout-wrap .select2-selection__arrow { top: 12px !important; }
.pi-checkout-wrap .select2-dropdown {
	background: #0A0B10 !important;
	color: var(--ink, #EAF2F1) !important;
	border: 1px solid var(--line, #2a2d38) !important;
}
.pi-checkout-wrap .select2-results__option { color: var(--ink, #EAF2F1) !important; }
.pi-checkout-wrap .select2-results__option--highlighted { background: var(--teal, #12A9B4) !important; color: #fff !important; }

/* Two-col first/last name */
.pi-checkout-wrap .form-row-first,
.pi-checkout-wrap .form-row-last { width: calc(50% - 8px); display: inline-block; vertical-align: top; }
.pi-checkout-wrap .form-row-first { margin-right: 12px; }
.pi-checkout-wrap .form-row { margin: 0 0 16px; padding: 0; }
.pi-checkout-wrap .form-row-wide { clear: both; }

/* Checkbox */
.pi-checkout-wrap .woocommerce-form__input-checkbox,
.pi-checkout-wrap input[type="checkbox"] { width: auto !important; min-height: 0; margin-right: 8px; }
.pi-checkout-wrap .woocommerce-form__label-for-checkbox { display: inline-flex; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 14px; color: var(--ink-mute, #9199A8); }

/* Order table (Your order) */
.pi-checkout-wrap .shop_table,
.pi-checkout-wrap table.woocommerce-checkout-review-order-table {
	width: 100%;
	background: transparent;
	color: var(--ink, #EAF2F1);
	border-collapse: collapse;
	margin: 0 0 20px;
}
.pi-checkout-wrap .shop_table th,
.pi-checkout-wrap .shop_table td {
	border-bottom: 1px solid var(--line, #2a2d38);
	padding: 12px 8px;
	text-align: left;
	color: var(--ink, #EAF2F1);
}
.pi-checkout-wrap .shop_table th { font-weight: 600; }
.pi-checkout-wrap .shop_table tfoot .order-total .amount { color: var(--teal, #12A9B4); font-size: 1.25rem; font-weight: 700; }
.pi-checkout-wrap .cart_item .product-name { color: var(--ink, #EAF2F1); }
.pi-checkout-wrap .cart_item .product-quantity { color: var(--ink-mute, #9199A8); font-weight: 400; }

/* Payment box */
.pi-checkout-wrap #payment,
.pi-checkout-wrap .woocommerce-checkout-payment {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
}
.pi-checkout-wrap ul.payment_methods {
	background: #0A0B10 !important;
	border: 1px solid var(--line, #2a2d38) !important;
	border-radius: 8px !important;
	padding: 16px !important;
	list-style: none;
	margin: 0 0 20px !important;
}
.pi-checkout-wrap ul.payment_methods li { color: var(--ink, #EAF2F1); }
.pi-checkout-wrap ul.payment_methods li label { display: inline-block; margin-left: 6px; }
.pi-checkout-wrap .payment_box {
	background: #12141A !important;
	color: var(--ink-mute, #9199A8) !important;
	border-radius: 6px !important;
	margin: 12px 0 0 !important;
	padding: 14px !important;
	font-size: 14px;
}
.pi-checkout-wrap .payment_box::before { display: none !important; }
.pi-checkout-wrap #place_order,
.pi-checkout-wrap button[name="woocommerce_checkout_place_order"] {
	width: 100%;
	background: var(--teal, #12A9B4) !important;
	color: #fff !important;
	border: 1px solid var(--teal, #12A9B4) !important;
	border-radius: 8px !important;
	padding: 14px 24px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	cursor: pointer;
	margin-top: 12px !important;
	transition: background 0.2s ease, transform 0.2s ease;
}
.pi-checkout-wrap #place_order:hover { background: var(--teal-dark, #0d858e) !important; transform: translateY(-1px); }

/* Terms */
.pi-checkout-wrap .woocommerce-terms-and-conditions-wrapper { margin: 12px 0; color: var(--ink-mute, #9199A8); font-size: 14px; }
.pi-checkout-wrap .woocommerce-terms-and-conditions { background: #0A0B10; border: 1px solid var(--line, #2a2d38); padding: 14px; border-radius: 6px; }

/* Loader */
.pi-checkout-wrap .blockUI.blockOverlay { background: rgba(0,0,0,0.5) !important; }

/* Error / info messages */
.pi-checkout-wrap .woocommerce-error,
.pi-checkout-wrap .woocommerce-info {
	background: #12141A;
	border: 1px solid var(--line, #2a2d38);
	border-left: 3px solid var(--teal, #12A9B4);
	color: var(--ink, #EAF2F1);
	border-radius: 6px;
	padding: 12px 16px;
	list-style: none;
	margin: 0 0 16px;
}
.pi-checkout-wrap .woocommerce-error { border-left-color: #F04B4B; }
.pi-checkout-wrap .woocommerce-error a,
.pi-checkout-wrap .woocommerce-info a { color: var(--teal, #12A9B4); }

/* Hide standalone "Your order" duplicate at bottom */
.pi-checkout-wrap .woocommerce-cart-form,
.pi-checkout-wrap .cart-collaterals { display: none !important; }

/* ============================================================
 *  Checkout fixes v2 — force stack of col-1/col-2, kill Stripe Link,
 *  ensure header doesn't overlap.
 * ============================================================ */

/* Force billing + additional info to stack vertically (they were rendered side-by-side by WC .col2-set defaults) */
.pi-checkout-wrap .col2-set { display: block !important; }
.pi-checkout-wrap .col2-set .col-1,
.pi-checkout-wrap .col2-set .col-2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	display: block !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Kill Stripe Link / Payment Request "Pay with Link" button + OR separator (client wants clean layout) */
.pi-checkout-wrap #wc-stripe-payment-request-wrapper,
.pi-checkout-wrap #wc-stripe-payment-request-button,
.pi-checkout-wrap #wc-stripe-payment-request-button-separator,
.pi-checkout-wrap .wc-stripe-payment-request-button,
.pi-checkout-wrap .wc-block-components-express-payment,
.pi-checkout-wrap .wc-block-components-express-payment-continue-rule,
.pi-checkout-wrap [id*="stripe-payment-request"],
.pi-checkout-wrap [id*="StripePaymentRequest"],
.pi-checkout-wrap .wc-stripe-link-payment-method,
.pi-checkout-wrap [class*="LinkAuthentication"] { display: none !important; }

/* Push checkout below sticky header — avoid overlap */
.pi-checkout-wrap { padding-top: 40px; }

/* Extra padding-top on hero band already fine; ensure form spacing */
.pi-checkout-wrap .container { padding-top: 20px; }

/* Ensure "Your order" heading + review sit right column not below */
.pi-checkout-wrap #order_review_heading { margin-top: 0; }

/* ============================================================
 *  Checkout fixes v3 — tighten right-column stacking, kill Link inline autofill
 * ============================================================ */

/* Move heading INSIDE #order_review; hide standalone h3 that creates gap */
.pi-checkout-wrap #order_review_heading { display: none !important; }

/* Inject 'Your order' heading via ::before on the review card */
.pi-checkout-wrap #order_review::before {
	content: 'Your order';
	display: block;
	color: var(--ink, #EAF2F1);
	font-family: var(--display, inherit);
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 20px;
	letter-spacing: -0.01em;
}

/* Force grid alignment — right column items stick to top */
.pi-checkout-wrap form.checkout,
.pi-checkout-wrap form.woocommerce-checkout {
	align-items: start !important;
	align-content: start !important;
}
.pi-checkout-wrap #customer_details,
.pi-checkout-wrap #order_review { align-self: start !important; }

/* Hide inline Stripe Link autofill card inside card element */
.pi-checkout-wrap .wc-stripe-link-payment-method,
.pi-checkout-wrap .StripeElement--linkAutofillModal,
.pi-checkout-wrap iframe[title*=Link],
.pi-checkout-wrap iframe[name^=__privateStripeLink],
.pi-checkout-wrap [class*=LinkAutofill] { display: none !important; }

/* ============================================================
 *  Checkout v4 — wider container + brighter text
 * ============================================================ */
.pi-checkout-wrap .woocommerce,
.pi-checkout-wrap .container { max-width: 1440px !important; }

.pi-checkout-wrap form.checkout,
.pi-checkout-wrap form.woocommerce-checkout {
	grid-template-columns: minmax(0, 1fr) minmax(0, 480px) !important;
	gap: 48px !important;
}
@media (max-width: 900px) {
	.pi-checkout-wrap form.checkout,
	.pi-checkout-wrap form.woocommerce-checkout { grid-template-columns: 1fr !important; }
}

/* Brighter text — labels, headings, table, product names */
.pi-checkout-wrap,
.pi-checkout-wrap label,
.pi-checkout-wrap .form-row label,
.pi-checkout-wrap .woocommerce-billing-fields > h3,
.pi-checkout-wrap .woocommerce-additional-fields > h3,
.pi-checkout-wrap #order_review::before,
.pi-checkout-wrap .shop_table,
.pi-checkout-wrap .shop_table th,
.pi-checkout-wrap .shop_table td,
.pi-checkout-wrap .cart_item .product-name,
.pi-checkout-wrap ul.payment_methods li label,
.pi-checkout-wrap .woocommerce-form__label-for-checkbox {
	color: #F5F7FA !important;
}

/* Optional/secondary meta subtly dimmer for contrast */
.pi-checkout-wrap .optional,
.pi-checkout-wrap .form-note,
.pi-checkout-wrap small,
.pi-checkout-wrap .cart_item .product-quantity { color: #B8C0CC !important; }

/* Table header row + total emphasize */
.pi-checkout-wrap .shop_table th { font-weight: 700 !important; letter-spacing: 0.02em; }
.pi-checkout-wrap .shop_table tfoot .order-total th { color: #F5F7FA !important; }

/* ============================================================
 *  Checkout v5 — kill border on card panel + hide Link banner
 * ============================================================ */
.pi-checkout-wrap .payment_box,
.pi-checkout-wrap .payment_box.payment_method_stripe,
.pi-checkout-wrap #payment .payment_box {
	border: 0 !important;
	background: transparent !important;
	padding: 8px 0 0 !important;
}
.pi-checkout-wrap .wc-stripe-payments-checkout,
.pi-checkout-wrap .wc-stripe-payment-form,
.pi-checkout-wrap .wc-upe-form { border: 0 !important; background: transparent !important; padding: 0 !important; }

/* Hide Secure, fast checkout with Link banner + collapse chevron */
.pi-checkout-wrap [class*=LinkOptIn],
.pi-checkout-wrap [class*=LinkAuthentication],
.pi-checkout-wrap [id*=link-authentication],
.pi-checkout-wrap iframe[title*=Secure, fast checkout],
.pi-checkout-wrap iframe[title*=Link] { display: none !important; }

/* Remove-item link inside checkout review table */
.pi-checkout-wrap .product-name a.remove {
	display: inline-block;
	margin-left: 8px;
	width: 20px; height: 20px; line-height: 18px;
	color: #F04B4B !important;
	border: 1px solid #F04B4B;
	border-radius: 50%;
	text-align: center;
	font-weight: 700;
	text-decoration: none;
	font-size: 12px;
	vertical-align: middle;
	transition: background 0.2s ease, color 0.2s ease;
}
.pi-checkout-wrap .product-name a.remove:hover { background: #F04B4B; color: #fff !important; }