/* =========================================================
   AUTHORITY DESIGN V3
   Main stylesheet
   Purpose: typography, layout, colour system, sections,
   image treatment, forms, cards, packages and responsiveness.
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   Shared colour palette and site max-width.
   ========================================================= */

:root {
  --black: #050505;
  --charcoal: #101010;
  --panel: #151315;
  --paper: #f4f0ec;
  --ink: #0b0b0d;
  --line: rgba(244, 240, 236, .14);

  --ivory: #f4f0ec;
  --muted: #b8b0b6;
  --mist: #c8c2c5;
  --cyan: #b8b3b0;
  --wine: #6d223d;
  --mauve: #b08ba7;

  --max: 1180px;
}


/* =========================================================
   2. GLOBAL RESET + BASE STYLES
   Normalises box sizing, page background, body typography,
   base link colour and scroll behaviour.
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--charcoal);
  color: var(--ivory);
  font-family: Lato, Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: inherit;
}


/* =========================================================
   3. HEADER + NAVIGATION
   Sticky site header, logo/wordmark, navigation links,
   and enquiry button styling.
   ========================================================= */

.site-header {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem clamp(1.2rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: rgba(16, 16, 16, .86);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
}

.brand {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  text-decoration: none;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.brand span {
  display: block;
  font-family: Lato, sans-serif;
  font-size: .62rem;
  letter-spacing: .42em;
  color: var(--muted);
  margin-top: -.35rem;
}

nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .18em;
}

nav a {
  text-decoration: none;
  color: var(--muted);
}

nav a:hover {
  color: var(--ivory);
}

.nav-cta {
  border: 1px solid var(--line);
  padding: .65rem .9rem;
  color: var(--ivory);
}


/* =========================================================
   4. SHARED SECTION WRAPPERS
   Controls max-width, horizontal padding and vertical rhythm
   for the main content sections.
   ========================================================= */

main {
  overflow: hidden;
}

.editorial-section,
.split-section,
.cards-section,
.process-section,
.page-hero,
.package-grid,
.contact-panel {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 8rem) clamp(1.2rem, 4vw, 2rem);
}


/* =========================================================
   5. HERO SECTION
   Homepage opening statement, CTA buttons and hand artwork.
   ========================================================= */

.hero {
  position: relative;
  min-height: calc(100vh - 86px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 2rem;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  color: var(--mist);
  font-weight: 900;
  margin: 0 0 1rem;
}

.hero h1,
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3.6rem, 8.6vw, 8.4rem);
  line-height: .88;
  letter-spacing: -.055em;
  margin: 0;
  max-width: 9ch;
}

.hero-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-style: italic;
  color: #8d6b78;
  margin: 1.2rem 0;
  line-height: 0.9em;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  max-width: 660px;
  color: #ddd6db;
}

.service-line {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--muted);
  margin-top: 2rem;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid var(--line);
  padding: .9rem 1.2rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  font-weight: 900;
}

.button.primary {
  background: var(--ivory);
  color: var(--black);
  border-color: var(--ivory);
}

.button.secondary {
  color: var(--ivory);
}

.button:hover {
  box-shadow: 0 0 22px rgba(184, 179, 176, .08), 0 0 44px rgba(109, 34, 61, .16);
  transform: translateY(-1px);
}


/* Hero hand artwork: monochrome/wine editorial treatment. */

.hero-art {
  position: relative;
  min-height: 440px;
  opacity: .82;
  filter: grayscale(.72) contrast(1.07) brightness(.82) saturate(.72);
  overflow: visible;
}

.hero-art::before {
  content: "";
  position: absolute;
  inset: 15% -30% 0 -20%;
  background:
    radial-gradient(circle at 45% 48%, rgba(244, 240, 236, .08), transparent 21%),
    radial-gradient(circle at 50% 48%, rgba(109, 34, 61, .38), transparent 28%);
  filter: blur(22px);
}

.hero-art img {
  position: absolute;
  width: min(880px, 76vw);
  max-width: none;
  right: -16vw;
  top: 50%;
  transform: translateY(-50%);
  mix-blend-mode: screen;
  transition: filter .35s ease, opacity .35s ease;
}

.hero:hover .hero-art img {
  filter:
    drop-shadow(0 0 18px rgba(244, 240, 236, .08))
    drop-shadow(0 0 30px rgba(109, 34, 61, .18));
  opacity: .95;
}


/* =========================================================
   6. SPLIT EDITORIAL SECTIONS
   Two-column editorial layout used for Audience, Premise,
   Packages preview and general page split content.
   ========================================================= */

.split-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem, 7vw, 6rem);
  border-top: 1px solid var(--line);
}

.statement,
.packages-preview {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 0 0 100vmax var(--paper);
  clip-path: inset(0 -100vmax);
}

.statement .eyebrow,
.packages-preview .eyebrow,
.statement .text-stack p,
.packages-preview p,
.packages-preview .text-link {
  color: #4f454b;
}

.statement h2,
.packages-preview h2,
.packages-preview h3 {
  color: var(--ink);
}

h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: .95;
  letter-spacing: -.04em;
  margin: 0 0 1.5rem;
}

.text-stack p {
  font-size: 1.08rem;
  color: #d9d2d7;
  margin-top: 0;
}

/* Supporting editorial subheads placed in the right column. */

.premise-subhead,
.audience-subhead {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem) !important;
  line-height: 1.15 !important;
  color: var(--wine) !important;
  margin: 0 0 2rem !important;
}


/* =========================================================
   7. CARD SECTIONS
   Card grids for "What We Design" and similar grouped content.
   ========================================================= */

.cards-section {
  border-top: 1px solid var(--line);
}

.card-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}

.card-grid.six {
  grid-template-columns: repeat(3, 1fr);
}

.card-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.card,
.package-mini,
.package-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .015));
  border: 1px solid var(--line);
  padding: 1.4rem;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.card:hover,
.package-mini:hover,
.package-card:hover {
  border-color: rgba(244, 240, 236, .28);
  box-shadow: 0 0 26px rgba(184, 179, 176, .05), 0 0 44px rgba(109, 34, 61, .10);
  transform: translateY(-2px);
}

.card h3,
.package-mini h3,
.package-card h2,
.package-card h3 {
  font-family: 'Playfair Display', serif;
  margin: .2rem 0 .6rem;
}

.card h3,
.package-mini h3 {
  font-size: 1.55rem;
}

.card p,
.package-mini p,
.package-card p,
.package-card li {
  color: #d7d0d5;
}



/* Core idea section: explains the implementation gap beneath What We Design. */

.core-idea-section {
  border-top: 1px solid var(--line);
}

.core-idea-copy {
  max-width: 760px;
}

.core-idea-copy p {
  color: #ddd6db;
  font-size: 1.08rem;
  margin: 0 0 1rem;
}

/* =========================================================
   8. METHOD / EDITORIAL BAND
   Subtle full-width wine wash behind constrained content.
   Used for the Method section and important notes.
   ========================================================= */

.editorial-band {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.2rem, 4vw, 2rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  background: transparent;
}

.editorial-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  background: linear-gradient(90deg, rgba(109, 34, 61, .08), rgba(184, 179, 176, .02), transparent);
}

.process-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2rem 0;
}

.process-line span {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .75rem;
  color: var(--ivory);
  border: 1px solid var(--line);
  padding: .75rem .9rem;
}

.process-line i {
  height: 1px;
  width: clamp(25px, 5vw, 80px);
  background: linear-gradient(90deg, var(--mauve), var(--wine));
}

.narrow {
  max-width: 720px;
  color: #ddd6db;
  font-size: 1.08rem;
}


/* =========================================================
   9. PACKAGES
   Homepage package previews and full package cards.
   ========================================================= */

.package-list {
  display: grid;
  gap: 1rem;
}

.package-mini.accent {
  border-color: rgba(109, 34, 61, .40);
}

.price {
  font-size: 1.2rem;
  color: var(--mist) !important;
  font-weight: 900;
  letter-spacing: .08em;
}

.text-link {
  color: var(--mist);
  text-decoration: none;
}

.page-hero {
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  max-width: 11ch;
}

.page-hero .lede {
  max-width: 760px;
}

.package-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.package-card {
  padding: clamp(1.4rem, 3vw, 2.2rem);
}

.package-card.featured {
  border-color: rgba(109, 34, 61, .40);
  box-shadow: 0 0 70px rgba(109, 34, 61, .08);
}

.package-card h2 {
  font-size: clamp(2.4rem, 4vw, 4rem);
}

ul {
  padding-left: 1.1rem;
}


/* =========================================================
   10. CONTACT PAGE + FORM
   Contact page panel layout and form field styling.
   ========================================================= */

.contact-panel {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 2rem;
}

.muted {
  color: var(--muted);
}

form {
  display: grid;
  gap: 1rem;
}

label {
  display: grid;
  gap: .4rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .72rem;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  background: #0b0b0d;
  border: 1px solid var(--line);
  color: var(--ivory);
  padding: .9rem;
  font: inherit;
}


/* =========================================================
   11. FOOTER
   Footer structure and small uppercase footer text.
   ========================================================= */

footer {
  border-top: 1px solid var(--line);
  padding: 2rem clamp(1.2rem, 4vw, 4rem);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}


/* =========================================================
   12. RESPONSIVE: TABLET
   Stacks columns, adjusts hero artwork, and reduces grid count.
   ========================================================= */

@media (max-width: 900px) {
  .hero,
  .split-section,
  .package-grid,
  .contact-panel {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .hero-art {
    min-height: 280px;
    order: -1;
    opacity: .58;
    overflow: hidden;
  }

  .hero-art img {
    width: min(820px, 145vw);
    right: auto;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
  }

  .card-grid.six,
  .card-grid.three {
    grid-template-columns: 1fr 1fr;
  }

  .site-header {
    align-items: flex-start;
    position: relative;
  }

  nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero h1,
  .page-hero h1 {
    max-width: 10ch;
  }
}


/* =========================================================
   13. RESPONSIVE: MOBILE
   Single-column layout, smaller hero heading, tighter nav,
   cropped hand artwork, and simplified process dividers.
   ========================================================= */

@media (max-width: 620px) {
  .site-header,
  footer {
    display: block;
  }

  .brand {
    display: inline-block;
    margin-bottom: 1rem;
  }

  nav {
    justify-content: flex-start;
    gap: .8rem;
  }

  .card-grid.six,
  .card-grid.three {
    grid-template-columns: 1fr;
  }

  .hero h1,
  .page-hero h1 {
    font-size: 3.05rem;
  }

  .service-line {
    letter-spacing: .12em;
  }

  .hero-art {
    min-height: 230px;
  }

  .hero-art img {
    width: 175vw;
    left: 52%;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .process-line i {
    display: none;
  }
}



/* =========================================================
   14. PACKAGE DETAIL + BOOKING PAGE ADDITIONS
   Extra sections for expanded package details, stack cards,
   founding client rate, and Amelia/Stripe booking placeholder.
   ========================================================= */

.package-overview {
  align-items: stretch;
}

.package-detail h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  margin: 1.6rem 0 .6rem;
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.founding-rate {
  color: var(--wine) !important;
  font-weight: 900;
}

.founding-rate span {
  color: #4f454b;
  font-weight: 700;
  font-size: .9rem;
}

.booking-box {
  margin-top: 2rem;
  border: 1px solid var(--line);
  padding: 1.4rem;
  background: rgba(255, 255, 255, .035);
}

.booking-box code {
  display: block;
  padding: .85rem;
  margin: .5rem 0 1rem;
  overflow-x: auto;
  background: #0b0b0d;
  border: 1px solid var(--line);
  color: var(--ivory);
}

@media (max-width: 900px) {
  .stack-grid {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   15. WHY NOW, ABOUT PORTRAIT, CALLOUTS, FAQ + FOOTER SITEMAP
   Homepage motivation section, About portrait treatment,
   package callouts, FAQ readability and expanded footer.
   ========================================================= */

.why-now-section .text-stack p:not(.premise-subhead) {
  margin-bottom: .35rem;
}

.package-callout {
  border: 1px solid rgba(109, 34, 61, .22);
  padding: 1.2rem;
  margin: 1.5rem 0;
  background: rgba(109, 34, 61, .045);
}

.package-callout h3 {
  margin-top: 0;
}

.faq-section h3,
.timeline-section h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.45rem;
  margin: 2rem 0 .6rem;
}

.about-portrait-section {
  align-items: center;
}

.portrait-frame {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  border: 1px solid var(--line);
  background: var(--charcoal);
}

.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(rgba(16, 16, 16, .28), rgba(16, 16, 16, .42)),
    radial-gradient(circle at 55% 75%, rgba(109, 34, 61, .18), transparent 58%);
  mix-blend-mode: multiply;
}

.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .12;
  background:
    linear-gradient(90deg, transparent 0%, rgba(109, 34, 61, .18) 48%, transparent 52%);
  transform: translateX(-2px);
}

.portrait-frame img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  filter: grayscale(.55) contrast(1.05) brightness(.78) sepia(.18);
  transform: scale(1.03);
}

.site-footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  border-top: 1px solid var(--line);
  padding: 2.5rem clamp(1.2rem, 4vw, 4rem);
  color: var(--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.site-footer a {
  display: block;
  text-decoration: none;
  margin: .45rem 0;
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--ivory);
}

.footer-brand,
.footer-heading {
  color: var(--ivory);
  font-weight: 900;
  margin-top: 0;
}

@media (max-width: 900px) {
  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .portrait-frame,
  .portrait-frame img {
    min-height: 380px;
  }
}

@media (max-width: 620px) {
  .site-footer {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   16. FAQ ACCORDION
   Clickable FAQ bars using native details/summary.
   Open items remain open until clicked again.
   ========================================================= */

.faq-section {
  max-width: var(--max);
}

.faq-item {
  border: 1px solid var(--line);
  margin: 1rem 0;
  background: rgba(255, 255, 255, .025);
}

.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 1.2rem;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
  color: var(--ivory);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-toggle {
  position: relative;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
}

.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--mist);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faq-toggle::before {
  width: 1rem;
  height: 1px;
}

.faq-toggle::after {
  width: 1px;
  height: 1rem;
}

.faq-item[open] .faq-toggle::after {
  display: none;
}

.faq-item[open] summary {
  color: var(--mist);
  border-bottom: 1px solid var(--line);
}

.faq-answer {
  padding: 1.1rem 1.2rem 1.25rem;
}

.faq-answer p {
  max-width: 760px;
  color: #ddd6db;
  font-size: 1.04rem;
  margin: 0 0 1rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   17. BLUEPRINT CTA EMPHASIS
   Makes the Blueprint CTA more obvious before hover.
   Border disappears into existing hover treatment.
   ========================================================= */

.package-detail .button.primary {
  border: 2px solid #0b0b0b;
}

.package-detail .button.primary:hover,
.package-detail .button.primary:focus {
  border-color: transparent;
}



/* =========================================================
   18. CONTACT FORM SPAM FIELD
   Hidden honeypot field for the PHP contact form.
   ========================================================= */

.hidden-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}



/* =========================================================
   19. HOMEPAGE HOW WE WORK SECTION
   Preserves the original split package layout while making
   the Strategy Session process clearer and more clickable.
   ========================================================= */

.how-we-work-section h2 {
  font-size: clamp(2rem, 3.8vw, 3.8rem);
}

.how-we-work-copy {
  margin-bottom: 1.4rem;
}

.how-we-work-copy p {
  color: #4f454b;
  font-size: 1.08rem;
  margin: 0 0 .85rem;
}

.how-we-work-copy .principle-line {
  font-family: 'Playfair Display', serif;
  color: var(--wine);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: .9;
  margin: 0 0 .35rem;
}

.visible-cta {
  border: 2px solid #0b0b0b;
}

.visible-cta:hover,
.visible-cta:focus {
  border-color: transparent;
}

.process-link {
  display: inline-block;
  margin: .85rem 0 1.2rem;
  font-weight: 900;
}



/* =========================================================
   20. LIGHT BACKGROUND CTA + METHOD DIVIDER REFINEMENT
   Darker CTA border on light sections and quieter Method
   separators to better match the charcoal/ivory/wine palette.
   ========================================================= */

.statement .button.primary,
.packages-preview .button.primary,
.how-we-work-section .button.primary,
.package-detail.statement .button.primary {
  border: 2px solid #4f454b;
}

.statement .button.primary:hover,
.statement .button.primary:focus,
.packages-preview .button.primary:hover,
.packages-preview .button.primary:focus,
.how-we-work-section .button.primary:hover,
.how-we-work-section .button.primary:focus,
.package-detail.statement .button.primary:hover,
.package-detail.statement .button.primary:focus {
  border-color: transparent;
}

.process-line i {
  background: linear-gradient(90deg, #4f454b, rgba(244, 240, 236, .55));
}



/* =========================================================
   21. EDITORIAL PRICE TREATMENT + STRATEGY CREDIT LINE
   Gives investment amounts a more premium typographic feel
   and lightens the Strategy Session credit reassurance.
   ========================================================= */

.price {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}

.price .currency,
.price .usd,
.founding-rate .currency,
.founding-rate .usd {
  font-size: .45em;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .82;
}

.strategy-credit {
  color: var(--mist) !important;
  opacity: .92;
}


/* =========================================================
   22. V19 REFINEMENTS
   Stronger package cards, darker prices, richer copy.
   ========================================================= */

.price {
  color: #4f454b !important;
  opacity: 1 !important;
}

.package-mini,
.package-card,
.pricing-card {
  border-color: #4f454b !important;
}

.package-mini p,
.package-card p,
.pricing-card p {
  color: #5a3f49 !important;
}



/* =========================================================
   23. PRIVATE SPEAKERS PAGE
   Form spacing for the private Speakers / HBE page.
   ========================================================= */

.speaker-form {
  margin-top: 2rem;
}

.speaker-form .button {
  margin-top: .5rem;
}



/* =========================================================
   24. V23 PRICE READABILITY + FOUNDING RATE
   Keeps the price treatment premium while making currency
   labels clear and founding-rate details easier to read.
   ========================================================= */

.price .currency,
.founding-rate .currency {
  font-size: .62em;
  letter-spacing: .06em;
  opacity: .9;
}

.price .currency-code,
.founding-rate .currency-code {
  font-family: Lato, Arial, sans-serif;
  font-size: .42em;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .95;
  vertical-align: baseline;
}

.founding-rate {
  color: #4f454b !important;
  font-weight: 900;
  line-height: 1.2;
}

.founding-label {
  display: inline-block;
  color: #4f454b;
  font-family: Lato, Arial, sans-serif;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}

.founding-price {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
  color: #4f454b;
  margin-bottom: .35rem;
}

.founding-note,
.founding-rate span.founding-note {
  display: inline-block;
  color: #8d8389 !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
  text-transform: none;
}

/* Keep old .usd spans readable if any remain after earlier versions. */
.price .usd,
.founding-rate .usd {
  font-size: .42em;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .95;
}



/* =========================================================
   25. SPEAKERS PAYMENT OPTION CARDS
   Two clear private-offer payment options for speakers.html.
   ========================================================= */

.speaker-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 2rem 0 1.5rem;
}

.speaker-payment-card {
  border: 1px solid #4f454b;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
}

.speaker-payment-card.featured-payment {
  box-shadow: 0 0 70px rgba(109, 34, 61, .10);
}

.speaker-price {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--ivory);
  margin: .75rem 0 1rem;
}

.speaker-price .currency {
  font-size: .42em;
  letter-spacing: .05em;
}

.speaker-price .currency-code {
  font-family: Lato, Arial, sans-serif;
  font-size: .22em;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.speaker-payment-card p {
  color: #ddd6db;
}

.speaker-spaces-note {
  color: var(--mist);
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: .04em;
  margin-top: 1.5rem;
}

@media (max-width: 900px) {
  .speaker-payment-grid {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   26. LIVE STRIPE BOOKING BLOCK
   Replaces old Amelia/Stripe placeholder with real checkout.
   ========================================================= */

.live-stripe-box {
  max-width: 520px;
}

.live-stripe-box .strategy-credit {
  margin-top: 1rem;
  color: var(--mist) !important;
  opacity: .92;
}



/* =========================================================
   27. V28 FINAL PRICE + STRATEGY CTA FIXES
   Restores readable pale wine pricing, fixes Strategy Session
   CTA placement, removes dark disappearing price treatment.
   ========================================================= */

.price,
.speaker-price,
.founding-price {
  color: #c9b8bf !important;
  opacity: 1 !important;
}

.price {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
}

.price .currency,
.speaker-price .currency,
.founding-price .currency {
  font-size: .55em;
  letter-spacing: .04em;
  opacity: .95;
}

.price .currency-code,
.speaker-price .currency-code,
.founding-price .currency-code,
.price .usd,
.speaker-price .usd,
.founding-price .usd {
  font-family: Lato, Arial, sans-serif;
  font-size: .5em;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .95;
}

.strategy-investment-section .price {
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  margin: 1rem 0 1.5rem;
}

.strategy-buy-button {
  margin: 1.4rem 0 1rem;
  max-width: 420px;
}

.strategy-credit,
.stack-cta-note {
  color: var(--mist) !important;
  opacity: .92;
  font-size: .95rem;
  letter-spacing: .05em;
}

.stack-cta {
  margin-top: 2.5rem;
  max-width: 520px;
}

.stack-cta-note {
  margin-top: 1rem;
}

.founding-rate {
  color: #c9b8bf !important;
  line-height: 1.25;
}

.founding-label {
  display: inline-block;
  color: var(--muted) !important;
  font-family: Lato, Arial, sans-serif;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}

.founding-price {
  display: inline-block;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  line-height: 1;
  margin-bottom: .35rem;
}

.founding-note,
.founding-rate span.founding-note {
  display: inline-block;
  color: var(--mist) !important;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .03em;
  text-transform: none;
}

.package-mini,
.package-card,
.card {
  border-color: rgba(79, 69, 75, .72);
}