/* ============================================================
   AK Sales Page — systeme.io overrides for course landing pages.
   Scope: body.ak-sales-page (set by snippet in page head).
   Target page: /cultural-communication (and any future course landing
   that follows the same structure).

   Strategy: piggyback on systeme.io's emotion classes + element IDs.
   IDs are stable WITHIN a single page; if you DUPLICATE the page, the
   new IDs will differ — re-export the section IDs and swap them below.
   ============================================================ */

/* ---------- Tokens (mirror tokens.css for systeme isolation) -- */
body.ak-sales-page {
  --ak-forest:     #1A3C2F;
  --ak-forest-90:  rgba(26, 60, 47, 0.92);
  --ak-cream:      #F9F7F1;
  --ak-cream-soft: #F3F0E7;
  --ak-terracotta: #B46A3C;
  --ak-terracotta-warm: #E4B68A;
  --ak-ink:        #2D2D2D;
  --ak-ink-10:     rgba(45, 45, 45, 0.10);
  --ak-ink-50:     rgba(45, 45, 45, 0.50);
  --ak-sage:       #D7DDD8;
  --ak-ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   1. HERO — dark gradient overlay over August/Japan photo.
   The systeme section has the JPG as background-image. We add
   a gradient via the section's first child div so the text on
   top has consistent contrast across the photo's mid-tones.
   Target: section[id="section-d43d68a1"] (hero on cultural-comm page)
   ============================================================ */
body.ak-sales-page section[id^="section-"] {
  /* Generic: any section with a background image carries the gradient.
     We restrict to image-background sections by checking inline style. */
}

body.ak-sales-page section[id="section-d43d68a1"] {
  position: relative;
  isolation: isolate;
}
body.ak-sales-page section[id="section-d43d68a1"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      rgba(13, 32, 24, 0.78) 0%,
      rgba(13, 32, 24, 0.55) 35%,
      rgba(13, 32, 24, 0.22) 65%,
      rgba(13, 32, 24, 0.10) 100%
    ),
    linear-gradient(180deg, rgba(13, 32, 24, 0.35) 0%, transparent 35%, rgba(13, 32, 24, 0.45) 100%);
}
/* Lift the hero content above the gradient */
body.ak-sales-page section[id="section-d43d68a1"] > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  body.ak-sales-page section[id="section-d43d68a1"]::before {
    background:
      linear-gradient(180deg,
        rgba(13, 32, 24, 0.45) 0%,
        rgba(13, 32, 24, 0.60) 35%,
        rgba(13, 32, 24, 0.80) 100%);
  }
}

/* ============================================================
   2. EYEBROW — tighten typography only (no rule line below).
   Kacper preferred eyebrows without the underline.
   ============================================================ */
body.ak-sales-page .sc-iGgWBk[id^="text-"] p span[style*="color: rgb(180, 106, 60)"] {
  display: inline-block;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
}

/* ============================================================
   3. METHOD NUMBERS — 01 / 02 / 03 should read bigger and more
   editorial. Italic terracotta Caslon, larger.
   Target IDs: text-c5a1bde5 (01), text-084bfc66 (02), text-2fee1f0f (03)
   systeme.io applies font-size on the .sc-iGgWBk wrapper AND ignores
   inner p/span sizes — so we bump the wrapper itself and use html-prefix
   for higher specificity than systeme's inline styles.
   ============================================================ */
html body.ak-sales-page #text-c5a1bde5,
html body.ak-sales-page #text-084bfc66,
html body.ak-sales-page #text-2fee1f0f {
  font-size: 36px !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
}
html body.ak-sales-page #text-c5a1bde5 *,
html body.ak-sales-page #text-084bfc66 *,
html body.ak-sales-page #text-2fee1f0f * {
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--ak-terracotta) !important;
}
/* H3 labels "Operating skill / Specific / Practical" — uppercase tracked forest,
   slightly larger than tiny eyebrow for readability inside the card. */
html body.ak-sales-page #text-06ad408a,
html body.ak-sales-page #text-191b2aad,
html body.ak-sales-page #text-e82ad3f5 {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ak-forest) !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}
html body.ak-sales-page #text-06ad408a *,
html body.ak-sales-page #text-191b2aad *,
html body.ak-sales-page #text-e82ad3f5 * {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ak-forest) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
/* Body text in method cards — readable size, ink-70 color, comfy line-height */
html body.ak-sales-page #text-1ec6b045,
html body.ak-sales-page #text-0fc76125,
html body.ak-sales-page #text-35efacba {
  font-size: 15px !important;
  line-height: 1.6 !important;
}
html body.ak-sales-page #text-1ec6b045 *,
html body.ak-sales-page #text-0fc76125 *,
html body.ak-sales-page #text-35efacba * {
  font-size: 15px !important;
  line-height: 1.6 !important;
}
/* Bold inside method body — proper bold weight */
html body.ak-sales-page #text-1ec6b045 strong,
html body.ak-sales-page #text-0fc76125 strong,
html body.ak-sales-page #text-35efacba strong {
  font-weight: 700 !important;
  color: var(--ak-ink) !important;
}

/* ============================================================
   4. FAQ — terracotta chevron, hairline accordion borders.
   Target: faq-02ada463 wrapper + .sc-imwsjZ item rows.
   ============================================================ */
/* FAQ — use structural selectors. systeme's emotion classes regenerate on
   rebuilds (sc-dQEtJA → sc-dNsVcV → ...), so target via #faq-* + child
   position instead. The wrapper class .sc-imwsjZ is stable, plus:
   - first child div of each item = title bar
   - second child div = answer/content wrapper */
html body.ak-sales-page #faq-02ada463 {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  max-width: 760px !important;
  margin-inline: auto !important;
  box-shadow: none !important;
}
html body.ak-sales-page #faq-02ada463 > div {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ak-ink-10) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body.ak-sales-page #faq-02ada463 > div:first-child {
  border-top: 1px solid var(--ak-ink-10) !important;
}
/* Title bar — first div inside each FAQ item */
html body.ak-sales-page #faq-02ada463 > div > div:first-child {
  font-weight: 500 !important;
  font-size: 17px !important;
  padding: 20px 4px !important;
  color: var(--ak-ink) !important;
  transition: color 180ms var(--ak-ease);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  background: transparent !important;
}
html body.ak-sales-page #faq-02ada463 > div > div:first-child:hover {
  color: var(--ak-terracotta) !important;
}
/* Chevron icon — terracotta, smaller */
html body.ak-sales-page #faq-02ada463 > div > div:first-child > i {
  color: var(--ak-terracotta) !important;
  font-size: 14px !important;
  margin-left: 12px !important;
  flex-shrink: 0;
  transition: transform 180ms var(--ak-ease);
}
/* Answer wrapper — second div */
html body.ak-sales-page #faq-02ada463 > div > div:nth-child(2) {
  padding: 0 4px 22px !important;
  background: transparent !important;
}
html body.ak-sales-page #faq-02ada463 > div > div:nth-child(2) p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ============================================================
   5. PRICING CARD — terracotta top stripe + softer shadow.
   Target: row-3c3ada1d (the pricing card row).
   Use html-prefix + force overflow:hidden via !important so the
   stripe doesn't get clipped by systeme's default style.
   ============================================================ */
html body.ak-sales-page #row-3c3ada1d {
  position: relative !important;
  box-shadow: 0 8px 32px rgba(26, 60, 47, 0.09) !important;
  border-color: rgba(26, 60, 47, 0.20) !important;
  overflow: hidden !important;
  border-radius: 6px !important;
}
html body.ak-sales-page #row-3c3ada1d::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: var(--ak-terracotta) !important;
  z-index: 10 !important;
  display: block !important;
}

/* ============================================================
   6. TESTIMONIAL AVATARS — empty circles get a forest fallback
   with a "G" (Greta placeholder) glyph until real photos are uploaded.
   Target the 3-col layout: in each testimonial row, the first 25%
   column hosts an empty image div. We target that div by its inner
   empty image wrapper class .sc-jaXxmD (systeme's image container)
   plus the structural position (column size=3 = .ePKrGg follows).
   Avatar rows: row-7e171a25, row-722dc200, row-4b46e298
   But in the dumped HTML these rows have THREE columns inside (size 3/9
   for avatar + meta) — and the avatar column has class .glzjSf .
   ============================================================ */
/* Testimonial avatars — circular 44px, forced through ALL nested systeme
   wrappers (column → div.sc-jaXxmD → picture → img). systeme sets the
   inner div's width to the editor's image width (e.g., 530px), which
   would overflow our 44px column — we crush every descendant to 100%. */
html body.ak-sales-page .sc-eBMEMD.glzjSf {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  position: relative;
  border-radius: 50% !important;
  overflow: hidden;
  background: var(--ak-forest);
  /* Forest fallback colour shows through when no image uploaded yet */
}
html body.ak-sales-page .sc-eBMEMD.glzjSf > div,
html body.ak-sales-page .sc-eBMEMD.glzjSf picture,
html body.ak-sales-page .sc-eBMEMD.glzjSf img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  display: block !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* ============================================================
   7. METHOD 3-UP CARDS — subtle hover lift & top hairline.
   Cards: row-7caae451, row-37f23e4b, row-d68fecfe
   ============================================================ */
body.ak-sales-page #row-7caae451,
body.ak-sales-page #row-37f23e4b,
body.ak-sales-page #row-d68fecfe {
  transition: box-shadow 220ms var(--ak-ease), border-color 220ms var(--ak-ease), transform 220ms var(--ak-ease);
}
body.ak-sales-page #row-7caae451:hover,
body.ak-sales-page #row-37f23e4b:hover,
body.ak-sales-page #row-d68fecfe:hover {
  box-shadow: 0 6px 28px rgba(26, 60, 47, 0.14) !important;
  border-color: rgba(26, 60, 47, 0.30) !important;
  transform: translateY(-2px);
}

/* ============================================================
   8. FIT CARDS — same hover treatment as method cards.
   Cards: row-521edb5a (for you), row-7dc91164 (not for you)
   ============================================================ */
body.ak-sales-page #row-521edb5a,
body.ak-sales-page #row-7dc91164 {
  transition: box-shadow 220ms var(--ak-ease), border-color 220ms var(--ak-ease);
}
body.ak-sales-page #row-521edb5a:hover,
body.ak-sales-page #row-7dc91164:hover {
  box-shadow: 0 6px 28px rgba(26, 60, 47, 0.10) !important;
  border-color: rgba(26, 60, 47, 0.25) !important;
}

/* ============================================================
   9. WHAT YOU GET CARDS — same treatment + tighten icon.
   ============================================================ */
body.ak-sales-page #row-91624864,
body.ak-sales-page #row-bd18b786,
body.ak-sales-page #row-049130fc,
body.ak-sales-page #row-2e2e7498,
body.ak-sales-page #row-a7eeda50,
body.ak-sales-page #row-563245f5 {
  transition: box-shadow 220ms var(--ak-ease), border-color 220ms var(--ak-ease), transform 220ms var(--ak-ease);
}
body.ak-sales-page #row-91624864:hover,
body.ak-sales-page #row-bd18b786:hover,
body.ak-sales-page #row-049130fc:hover,
body.ak-sales-page #row-2e2e7498:hover,
body.ak-sales-page #row-a7eeda50:hover,
body.ak-sales-page #row-563245f5:hover {
  box-shadow: 0 6px 28px rgba(26, 60, 47, 0.12) !important;
  border-color: var(--ak-forest) !important;
  background-color: var(--ak-cream) !important;
  transform: translateY(-2px);
}
/* Default what-you-get card BG (slightly off-white so hover→cream is visible) */
html body.ak-sales-page #row-91624864,
html body.ak-sales-page #row-bd18b786,
html body.ak-sales-page #row-049130fc,
html body.ak-sales-page #row-2e2e7498,
html body.ak-sales-page #row-a7eeda50,
html body.ak-sales-page #row-563245f5 {
  background-color: var(--ak-cream-soft) !important;
  border-color: var(--ak-ink-10) !important;
}
/* Icon container — wrap the picture/img wrapper as a bordered tile.
   The wrapper has class .sc-jaXxmD and we scope via :has() on the inner icon ID. */
html body.ak-sales-page .sc-jaXxmD:has(#image-f10d4203),
html body.ak-sales-page .sc-jaXxmD:has(#image-602c5ddb),
html body.ak-sales-page .sc-jaXxmD:has(#image-277e2ae7),
html body.ak-sales-page .sc-jaXxmD:has(#image-fbf62f5c),
html body.ak-sales-page .sc-jaXxmD:has(#image-864382f3),
html body.ak-sales-page .sc-jaXxmD:has(#image-4ad0750d) {
  width: 56px !important;
  height: 56px !important;
  background: var(--ak-cream) !important;
  border: 1px solid var(--ak-ink-10) !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  margin-bottom: 22px !important;
  transition: border-color 220ms var(--ak-ease), color 220ms var(--ak-ease) !important;
}
/* On card hover, icon tile turns terracotta border */
html body.ak-sales-page #row-91624864:hover .sc-jaXxmD,
html body.ak-sales-page #row-bd18b786:hover .sc-jaXxmD,
html body.ak-sales-page #row-049130fc:hover .sc-jaXxmD,
html body.ak-sales-page #row-2e2e7498:hover .sc-jaXxmD,
html body.ak-sales-page #row-a7eeda50:hover .sc-jaXxmD,
html body.ak-sales-page #row-563245f5:hover .sc-jaXxmD {
  border-color: var(--ak-terracotta) !important;
}
/* Image inside the tile — shrink + forest tint */
html body.ak-sales-page #image-f10d4203,
html body.ak-sales-page #image-602c5ddb,
html body.ak-sales-page #image-277e2ae7,
html body.ak-sales-page #image-fbf62f5c,
html body.ak-sales-page #image-864382f3,
html body.ak-sales-page #image-4ad0750d {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}

/* ============================================================
   10. NAV "Start course" button — keep brand consistency.
   The button currently links to /pitching-home (likely a bug from
   master block reuse). Style-wise it stays forest. We make it
   consistent with rest of buttons.
   ============================================================ */
body.ak-sales-page #button-e9b03c0b {
  transition: background 180ms var(--ak-ease), transform 180ms var(--ak-ease) !important;
}
body.ak-sales-page #button-e9b03c0b:hover {
  background: #122e23 !important; /* darker forest */
  transform: translateY(-1px);
}

/* ============================================================
   11. SECTION HAIRLINES — soften the abrupt color jumps between
   sections by adding 1px hairlines at section boundaries.
   ============================================================ */
body.ak-sales-page #section-20999059,
body.ak-sales-page #section-2c9d14e6,
body.ak-sales-page #section-8d73d86f,
body.ak-sales-page #section-3a4cf41a,
body.ak-sales-page #section-6a4b99b4,
body.ak-sales-page #section-802759d8,
body.ak-sales-page #section-0a23378e,
body.ak-sales-page #section-39e4621b,
body.ak-sales-page #section-33385ffe {
  border-top: 1px solid rgba(45, 45, 45, 0.04);
}

/* ============================================================
   12. LOGO MARQUEE — ensure no extra margin around our embed
   when systeme wraps it. The marquee CSS itself lives in
   marquee.css — this just keeps the container tight.
   ============================================================ */
body.ak-sales-page #rawhtml-2b8de8bc {
  padding: 0 !important;
  margin: 0 !important;
}
body.ak-sales-page #section-fd2bfd64 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ============================================================
   13. HERO TITLE — slight tightening of letter-spacing on the
   big serif H1 (systeme's default 0 is too loose for Caslon at 88px).
   ============================================================ */
body.ak-sales-page #headline-48beb1b2 h1 {
  letter-spacing: -0.02em !important;
  line-height: 1.02 !important;
}

/* ============================================================
   14. PROBLEM CLOSING LINE — italic, balanced.
   #text-9b9e201b is the "You don't need to memorize 200 countries..."
   ============================================================ */
body.ak-sales-page #text-9b9e201b p em {
  text-wrap: balance;
  display: inline-block;
  max-width: 32ch;
  line-height: 1.35 !important;
}

/* ============================================================
   15. AUTHOR QUOTE — same italic balance.
   #text-4db96d8f is the August quote.
   ============================================================ */
body.ak-sales-page #text-4db96d8f p em {
  text-wrap: balance;
  display: inline-block;
  max-width: 36ch;
  line-height: 1.3 !important;
}

/* ============================================================
   16. CTA BUTTONS — unify hover state for all "Get instant access"
   ============================================================ */
body.ak-sales-page #button-c9add3ad,
body.ak-sales-page #button-84ddf280,
body.ak-sales-page #button-29d525d5 {
  transition: background 180ms var(--ak-ease), transform 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
}
body.ak-sales-page #button-c9add3ad:hover,
body.ak-sales-page #button-84ddf280:hover {
  background: #9A5832 !important; /* darker terracotta */
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(180, 106, 60, 0.30) !important;
}
body.ak-sales-page #button-29d525d5:hover {
  background: #122e23 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26, 60, 47, 0.30) !important;
}

/* ============================================================
   17. NAV — two variants, both sticky + blur.

   Variant A: dark-hero nav (#section-41315db6)
     Transparent + white text/logo over the dark hero.
     After scroll past 24px → cream bg + blur + ink text + dark logo.
     Used on the course/funnel landing pages where a dark hero sits
     right under the nav.

   Variant B: light-bg nav (#section-8f394858)
     Always in "final" state from the start: cream bg + blur + ink
     text + dark logo. Still fixed sticky + blur (just no color
     transition because nothing sits behind it).
     Used on light-bg funnel pages (thank-you, magnet landing, etc.)
     where there is no dark hero.

   Both require the snippet that adds body.ak-sales-page and toggles
   .is-scrolled on scroll.
   ============================================================ */

/* ---------- Variant A: dark-hero (transparent → cream on scroll) ---------- */
html body.ak-sales-page #section-41315db6 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding: 14px 40px !important;
  background: transparent !important;
  transition: background 180ms var(--ak-ease), backdrop-filter 180ms var(--ak-ease), padding 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
  border-bottom: 1px solid transparent;
}
html body.ak-sales-page.is-scrolled #section-41315db6 {
  background: rgba(249, 247, 241, 0.92) !important;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: rgba(45, 45, 45, 0.08);
  padding: 8px 40px !important;
  box-shadow: 0 4px 24px rgba(26, 60, 47, 0.06);
}
html body.ak-sales-page #section-41315db6 a.sc-hBtRBE {
  color: rgba(249, 247, 241, 0.92) !important;
  transition: color 180ms var(--ak-ease);
}
html body.ak-sales-page.is-scrolled #section-41315db6 a.sc-hBtRBE {
  color: var(--ak-ink) !important;
}
html body.ak-sales-page #section-41315db6 .sc-gEkIjA span {
  background: rgba(249, 247, 241, 0.92) !important;
  transition: background 180ms var(--ak-ease);
}
html body.ak-sales-page.is-scrolled #section-41315db6 .sc-gEkIjA span {
  background: var(--ak-ink) !important;
}
html body.ak-sales-page #section-41315db6 #image-f14191f6 {
  filter: brightness(0) invert(1);
  transition: filter 180ms var(--ak-ease);
}
html body.ak-sales-page.is-scrolled #section-41315db6 #image-f14191f6 {
  filter: none;
}
/* "Start course" CTA — terracotta in both states */
html body.ak-sales-page #button-2c1b50c9 {
  background: var(--ak-terracotta) !important;
  color: var(--ak-cream) !important;
  padding: 12px 22px !important;
  border-radius: 2px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
html body.ak-sales-page #button-2c1b50c9:hover {
  background: #9A5832 !important;
}
/* Hero needs to clear the fixed nav */
html body.ak-sales-page #section-d43d68a1 {
  padding-top: 80px !important;
}

/* ---------- Variant B: light-bg (always in "final" state) ----------
   Variant B IDs across funnel pages (same master block, different
   instance IDs per page):
   - Thank-you page: #section-05163fa3, logo #image-29857721, CTA #button-3ca0c6cb
   - Magnet/older:  #section-8f394858, logo #image-402e4457, CTA #button-e9b03c0b
   ------------------------------------------------------------------ */
html body.ak-sales-page #section-05163fa3,
html body.ak-sales-page #section-8f394858 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding: 8px 40px !important;
  background: rgba(249, 247, 241, 0.92) !important;
  backdrop-filter: saturate(1.4) blur(10px) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(10px) !important;
  border-bottom: 1px solid rgba(45, 45, 45, 0.08) !important;
  transition: box-shadow 180ms var(--ak-ease) !important;
  box-shadow: none !important;
}
html body.ak-sales-page.is-scrolled #section-05163fa3,
html body.ak-sales-page.is-scrolled #section-8f394858 {
  box-shadow: 0 4px 24px rgba(26, 60, 47, 0.06) !important;
}
/* Nav links — always ink */
html body.ak-sales-page #section-05163fa3 a.sc-hBtRBE,
html body.ak-sales-page #section-8f394858 a.sc-hBtRBE {
  color: var(--ak-ink) !important;
  transition: color 160ms var(--ak-ease);
}
html body.ak-sales-page #section-05163fa3 a.sc-hBtRBE:hover,
html body.ak-sales-page #section-8f394858 a.sc-hBtRBE:hover {
  color: var(--ak-terracotta) !important;
}
/* Burger bars — always ink */
html body.ak-sales-page #section-05163fa3 .sc-gEkIjA span,
html body.ak-sales-page #section-8f394858 .sc-gEkIjA span {
  background: var(--ak-ink) !important;
}
/* Logo — always original (no invert) */
html body.ak-sales-page #section-05163fa3 #image-29857721,
html body.ak-sales-page #section-8f394858 #image-402e4457 {
  filter: none !important;
}
/* CTA — terracotta, with hover */
html body.ak-sales-page #button-3ca0c6cb,
html body.ak-sales-page #button-e9b03c0b {
  background: var(--ak-terracotta) !important;
  color: var(--ak-cream) !important;
  padding: 12px 22px !important;
  border-radius: 2px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  transition: background 180ms var(--ak-ease), transform 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-3ca0c6cb:hover,
html body.ak-sales-page #button-e9b03c0b:hover {
  background: #9A5832 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(180, 106, 60, 0.30) !important;
}

/* ============================================================
   18. HERO EYEBROW — also catch the warm-cream tone used in hero
   (rgb(228, 182, 138)). Already uppercase + tracked above for
   terracotta, but hero uses different shade.
   ============================================================ */
body.ak-sales-page .sc-iGgWBk[id^="text-"] p span[style*="color: rgb(228, 182, 138)"] {
  display: inline-block;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
}

/* ============================================================
   19. HERO PHOTO — mirror horizontally + better focal point.
   The section's bg-image is set inline by systeme; we override it
   to transparent and recreate the photo via ::before with scaleX(-1),
   keeping our existing ::after gradient on top.
   Hero image URL: 6a0c1ebe6d52a0.47321559_3L3A3308.jpg (from systeme assets).
   ============================================================ */
html body.ak-sales-page #section-d43d68a1 {
  background-image: none !important;
  background-color: #0E2A20 !important;
  overflow: hidden;
}
/* Reuse ::before for gradient (kept from rule #1), redirect to ::after */
html body.ak-sales-page #section-d43d68a1::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url('https://d1yei2z3i6k35z.cloudfront.net/16369512/6a0c1ebe6d52a0.47321559_3L3A3308.jpg');
  background-size: cover;
  background-position: 30% 35%;
  transform: scaleX(-1);
  pointer-events: none;
}
html body.ak-sales-page #section-d43d68a1::before {
  z-index: -1;
}
@media (max-width: 760px) {
  html body.ak-sales-page #section-d43d68a1::after {
    background-position: 65% 35%;
  }
}

/* ============================================================
   20. BULLET LISTS — hairline dividers + tightened typography.
   Problem (bulletlist-86c388ec), Inside (bulletlist-e70646d8),
   Fit-for (bulletlist-b07c307b), Fit-not (bulletlist-bd18b09a),
   Pricing (bulletlist-f2677d28).
   ============================================================ */
html body.ak-sales-page [id^="bulletlist-"] ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body.ak-sales-page [id^="bulletlist-"] ul li {
  padding: 14px 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--ak-ink-10);
  align-items: baseline !important;
  gap: 14px;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}
html body.ak-sales-page [id^="bulletlist-"] ul li:first-child {
  border-top: 0;
  padding-top: 0;
}
html body.ak-sales-page [id^="bulletlist-"] ul li:last-child {
  padding-bottom: 0;
}
html body.ak-sales-page [id^="bulletlist-"] ul li i {
  color: var(--ak-terracotta) !important;
  font-size: 13px !important;
  margin-top: 6px !important;
  flex-shrink: 0;
  width: 16px;
  text-align: left;
}
html body.ak-sales-page [id^="bulletlist-"] ul li strong {
  color: var(--ak-ink) !important;
  font-weight: 700 !important;
}
html body.ak-sales-page [id^="bulletlist-"] ul li strong * {
  font-weight: 700 !important;
}
html body.ak-sales-page [id^="bulletlist-"] ul li > div {
  flex: 1;
}
/* "Not for you" list — keep X icons but tone them down to ink */
html body.ak-sales-page #bulletlist-bd18b09a ul li i {
  color: var(--ak-ink-50) !important;
}
/* Pricing list lives inside the pricing card — no top border on first
   item, but keep dividers between others, slightly tighter. */
html body.ak-sales-page #bulletlist-f2677d28 ul li {
  padding: 12px 0 !important;
  font-size: 15px !important;
}

/* ============================================================
   21. WHAT'S INCLUDED — H3 titles uppercase eyebrow style + smaller
   icons. Currently all icons are video-library SVG at 100px width.
   Titles: text-fca02eb9, text-fd0d65fb, text-eb46d8c6, text-26bcdbab,
           text-ccefb50e, text-a544af60
   Icons: image-f10d4203, image-602c5ddb, image-277e2ae7, image-fbf62f5c,
          image-864382f3, image-4ad0750d
   ============================================================ */
html body.ak-sales-page #text-fca02eb9,
html body.ak-sales-page #text-fd0d65fb,
html body.ak-sales-page #text-eb46d8c6,
html body.ak-sales-page #text-26bcdbab,
html body.ak-sales-page #text-ccefb50e,
html body.ak-sales-page #text-a544af60 {
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}
html body.ak-sales-page #text-fca02eb9 strong,
html body.ak-sales-page #text-fd0d65fb strong,
html body.ak-sales-page #text-eb46d8c6 strong,
html body.ak-sales-page #text-26bcdbab strong,
html body.ak-sales-page #text-ccefb50e strong,
html body.ak-sales-page #text-a544af60 strong {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--ak-ink) !important;
  letter-spacing: -0.005em;
}
/* Note: image sizing rules moved to section 9 to coexist with the tile wrapper */

/* ============================================================
   22. FIT CARDS — bold headers, ink-10 borders, tighter list padding.
   Headers: text-e4dccc87 (for you), text-94303200 (not for you)
   Boxes: row-521edb5a (for you), row-7dc91164 (not for you)
   ============================================================ */
html body.ak-sales-page #text-e4dccc87,
html body.ak-sales-page #text-94303200 {
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--ak-ink-10);
  margin-bottom: 4px !important;
}
html body.ak-sales-page #text-e4dccc87 strong,
html body.ak-sales-page #text-94303200 strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ak-forest) !important;
}
html body.ak-sales-page #text-94303200 strong {
  color: var(--ak-ink-70) !important;
}
/* Override box border color to brand ink-10 + comfortable inner padding */
html body.ak-sales-page #row-521edb5a,
html body.ak-sales-page #row-7dc91164 {
  border-color: var(--ak-ink-10) !important;
  padding: 36px 36px 32px !important;
}
/* Bullet list inside FIT — no hairlines (too busy in tight box), small left
   indent so checks don't touch box edge. */
html body.ak-sales-page #bulletlist-b07c307b ul,
html body.ak-sales-page #bulletlist-bd18b09a ul {
  padding-left: 0 !important;
  margin: 0 !important;
}
html body.ak-sales-page #bulletlist-b07c307b ul li,
html body.ak-sales-page #bulletlist-bd18b09a ul li {
  border-top: 0 !important;
  padding: 10px 0 !important;
  font-size: 15px !important;
  margin: 0 !important;
}
html body.ak-sales-page #bulletlist-b07c307b,
html body.ak-sales-page #bulletlist-bd18b09a {
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   23. PRICING HEADLINE — italic terracotta euro accent.
   #headline-449b4d61 contains H2 "Instant access:" + p "€49 (one-time)"
   ============================================================ */
/* "Instant access:" — full H2 size like the rest of the page */
html body.ak-sales-page #headline-449b4d61 h2 {
  font-size: 54px !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
  color: var(--ak-ink) !important;
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
}
/* "€49" — large italic terracotta accent */
html body.ak-sales-page #headline-449b4d61 p {
  font-style: italic !important;
  color: var(--ak-terracotta) !important;
  font-size: 72px !important;
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  line-height: 1 !important;
  margin: 0 !important;
}
/* "(one-time)" — small label under €49 */
html body.ak-sales-page #text-1e9b4b39 {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  text-align: center !important;
}
html body.ak-sales-page #text-1e9b4b39 p {
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  color: var(--ak-ink-50) !important;
  margin: 0 !important;
}

/* Pricing card — proper border, terracotta top stripe (in #5).
   Override systeme's empty border-color which renders as default dark line. */
html body.ak-sales-page #row-3c3ada1d {
  border-color: var(--ak-ink-10) !important;
  border-width: 1px !important;
  border-style: solid !important;
  padding: 36px 40px !important;
}
/* Pricing bullet list — no hairlines, proper indent inside the card */
html body.ak-sales-page #bulletlist-f2677d28 ul {
  padding-left: 0 !important;
  margin: 0 !important;
}
html body.ak-sales-page #bulletlist-f2677d28 ul li {
  border-top: 0 !important;
  padding: 10px 0 !important;
  margin: 0 !important;
}
html body.ak-sales-page #bulletlist-f2677d28 ul li strong {
  font-weight: 700 !important;
}
html body.ak-sales-page #bulletlist-f2677d28 {
  margin: 0 !important;
  padding: 0 !important;
}
/* "Secure checkout via systeme.io · cards & PayPal" — small print under button */
html body.ak-sales-page #text-1e027c48 {
  margin-top: 16px !important;
  text-align: center !important;
}
html body.ak-sales-page #text-1e027c48 p,
html body.ak-sales-page #text-1e027c48 span {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: var(--ak-ink-50) !important;
  letter-spacing: 0.02em !important;
}

/* ============================================================
   24. PROBLEM "you don't need to memorize..." italic accent.
   Already balanced in #14; bump color to forest for hierarchy.
   ============================================================ */
html body.ak-sales-page #text-9b9e201b p em {
  color: var(--ak-forest) !important;
  font-style: italic;
}

/* ============================================================
   25. AUTHOR QUOTE italic terracotta-warm accent.
   ============================================================ */
html body.ak-sales-page #text-4db96d8f p em {
  color: var(--ak-forest) !important;
}

/* ============================================================
   26. BODY TEXT COLOR — let systeme.io's inline color rules win
   (their default rgba(45, 45, 45, 0.7) gives the proper soft body
   tone). No global override here — too aggressive, fights inline.
   ============================================================ */

/* ============================================================
   26b. SECTION IMAGES — give Problem + Inside-course photos a
   tall portrait crop so they read as vertical anchors next to text.
   ============================================================ */
html body.ak-sales-page #image-400e16cf,
html body.ak-sales-page #image-179dbe57 {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 560px !important;
  max-height: 640px !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  border-radius: 4px;
}
/* Make the picture/image wrappers fill column properly */
html body.ak-sales-page .sc-jaXxmD:has(#image-400e16cf),
html body.ak-sales-page .sc-jaXxmD:has(#image-179dbe57) {
  width: 100% !important;
  max-width: 100% !important;
}

/* 26c. MAGNET LANDING image stretching — REVERTED in v32.
   Causes layout issues with systeme's alignSelf defaults. Images use
   their natural ratio; Kacper will tweak in the editor instead. */

/* ============================================================
   27. MAGNET LANDING — number badges (01/02/03) in "What's inside"
   cards. Different IDs from course landing — apply same Caslon
   italic terracotta 36px treatment for consistency.
   ============================================================ */
html body.ak-sales-page #text-9951bf73,
html body.ak-sales-page #text-9aae5176,
html body.ak-sales-page #text-a4c483ea {
  font-size: 36px !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
}
html body.ak-sales-page #text-9951bf73 *,
html body.ak-sales-page #text-9aae5176 *,
html body.ak-sales-page #text-a4c483ea * {
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--ak-terracotta) !important;
}

/* ============================================================
   28. MAGNET LANDING — H3 labels in "What's inside" cards +
   two-up "Who it's for / August Kjerland" cards.
   Uppercase tracked forest, matching method3 pattern.
   ============================================================ */
html body.ak-sales-page #text-1e8847ac,
html body.ak-sales-page #text-cd1c2882,
html body.ak-sales-page #text-754b3c2c,
html body.ak-sales-page #text-3bc00c89,
html body.ak-sales-page #text-9c5a0305 {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
}
html body.ak-sales-page #text-1e8847ac *,
html body.ak-sales-page #text-cd1c2882 *,
html body.ak-sales-page #text-754b3c2c *,
html body.ak-sales-page #text-3bc00c89 *,
html body.ak-sales-page #text-9c5a0305 * {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ak-forest) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* ============================================================
   29. MAGNET LANDING — card hover lift (3-up + 2-up).
   Cards: row-ad731254 (01), row-40f16b1e (02), row-49ef1b33 (03),
          row-58e1a13b (Who it's for), row-7a4c9a63 (August)
   ============================================================ */
html body.ak-sales-page #row-ad731254,
html body.ak-sales-page #row-40f16b1e,
html body.ak-sales-page #row-49ef1b33,
html body.ak-sales-page #row-58e1a13b,
html body.ak-sales-page #row-7a4c9a63 {
  transition: box-shadow 220ms var(--ak-ease),
              border-color 220ms var(--ak-ease),
              transform 220ms var(--ak-ease) !important;
}
html body.ak-sales-page #row-ad731254:hover,
html body.ak-sales-page #row-40f16b1e:hover,
html body.ak-sales-page #row-49ef1b33:hover,
html body.ak-sales-page #row-58e1a13b:hover,
html body.ak-sales-page #row-7a4c9a63:hover {
  box-shadow: 0 6px 28px rgba(26, 60, 47, 0.12) !important;
  border-color: rgba(26, 60, 47, 0.30) !important;
  transform: translateY(-2px);
}

/* ============================================================
   30. MAGNET LANDING — button hovers.
   button-1146e060  Start course (nav, forest)
   button-a29886a8  Hero "Send me the playbook" (forest)
   button-79e8c21d  Form submit "Send me the playbook" (forest)
   button-b4d9f586  "View the course" CTA (terracotta)
   ============================================================ */
html body.ak-sales-page #button-1146e060,
html body.ak-sales-page #button-a29886a8,
html body.ak-sales-page #button-79e8c21d,
html body.ak-sales-page #button-b4d9f586 {
  transition: background 180ms var(--ak-ease),
              transform 180ms var(--ak-ease),
              box-shadow 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-1146e060:hover,
html body.ak-sales-page #button-a29886a8:hover,
html body.ak-sales-page #button-79e8c21d:hover {
  background: #122e23 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(26, 60, 47, 0.30) !important;
}
html body.ak-sales-page #button-b4d9f586:hover {
  background: #9A5832 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(180, 106, 60, 0.30) !important;
}

/* ============================================================
   31. MAGNET LANDING — nav ALWAYS solid (no transparent-over-hero
   state). The magnet hero is a sage card sitting inside cream body,
   not a dark full-bleed photo, so the homepage-style transparent
   nav doesn't apply here.
   Magnet nav section: #section-6ddc3998
   Magnet nav logo:    #image-d65d7a4f
   ============================================================ */
html body.ak-sales-page #section-6ddc3998 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  margin: 0 !important;
  padding: 8px 40px !important;
  background: rgba(249, 247, 241, 0.94) !important;
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(45, 45, 45, 0.08) !important;
}
/* Nav links — dark ink from the start */
html body.ak-sales-page #section-6ddc3998 a.sc-hBtRBE {
  color: var(--ak-ink) !important;
  transition: color 180ms var(--ak-ease);
}
html body.ak-sales-page #section-6ddc3998 a.sc-hBtRBE:hover {
  color: var(--ak-terracotta) !important;
}
/* Logo — original (no white invert) */
html body.ak-sales-page #section-6ddc3998 #image-d65d7a4f {
  filter: none !important;
}
/* "Start course" CTA — terracotta brand */
html body.ak-sales-page #button-1146e060 {
  background: var(--ak-terracotta) !important;
  color: var(--ak-cream) !important;
  padding: 12px 22px !important;
  border-radius: 2px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
html body.ak-sales-page #button-1146e060:hover {
  background: #9A5832 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(180, 106, 60, 0.30) !important;
}

/* ============================================================
   27. SECTIONS spacing — soften the abrupt color boundaries.
   Add subtle hairline at top of each main section.
   ============================================================ */
html body.ak-sales-page #section-fd2bfd64,
html body.ak-sales-page #section-20999059 {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   28. THANK-YOU PAGE — "What to do next" section.
   Section #section-2b76d684 with three step boxes:
   - Big section headline (text-946dd6f9)
   - Step boxes (rows #row-8db88b96, #row-ebb764a3, #row-94aab3be)
   - Step numbers (text-74c0ec93, text-3661711a, text-d1765bce)
   - Step titles (text-ebc1a1a3, text-7358761b, text-14ed6e08)
   - Step body (text-5469324b, text-bfc757fa, text-6647923d)
   ============================================================ */

/* ---- Section headline: split into a tight stack visually ---- */
html body.ak-sales-page #text-946dd6f9 {
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto 56px !important;
}
html body.ak-sales-page #text-946dd6f9 p {
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: var(--ak-forest) !important;
  text-wrap: balance;
}
html body.ak-sales-page #text-946dd6f9 p span {
  color: var(--ak-forest) !important;
}

/* ---- Step box wrappers (rows) — hover lift + shadow ----
   Add every box-row ID here as new pages are built. Rows targeted
   by ID because systeme styled-components classes are unstable.

   Currently registered:
   - Thank-you steps (Open my email / Read foundations / Pick market):
     #row-8db88b96, #row-ebb764a3, #row-94aab3be
   - Magnet "Inside the guide" (Iceberg / Japan / U.S. playbook):
     #row-ac3bd733, #row-951b3fa3, #row-5aee5a48
   - Magnet "Who it's for" + "About August":
     #row-94027038, #row-3de40dbd
   ----------------------------------------------------- */
/* Background (cream-soft + border) only on the August bio card on magnet.
   Other step boxes stay plain — hover lift still applies to all of them. */
html body.ak-sales-page #row-3de40dbd {
  background: rgb(243, 240, 231) !important;
  border: 1px solid rgba(45, 45, 45, 0.10) !important;
  border-radius: 4px !important;
  padding: 28px 26px !important;
}

/* Hover lift on every registered step/box row */
html body.ak-sales-page #row-8db88b96,
html body.ak-sales-page #row-ebb764a3,
html body.ak-sales-page #row-94aab3be,
html body.ak-sales-page #row-ac3bd733,
html body.ak-sales-page #row-951b3fa3,
html body.ak-sales-page #row-5aee5a48,
html body.ak-sales-page #row-94027038,
html body.ak-sales-page #row-3de40dbd {
  transition: transform 220ms var(--ak-ease), box-shadow 220ms var(--ak-ease), border-color 220ms var(--ak-ease) !important;
  cursor: default;
}
html body.ak-sales-page #row-8db88b96:hover,
html body.ak-sales-page #row-ebb764a3:hover,
html body.ak-sales-page #row-94aab3be:hover,
html body.ak-sales-page #row-ac3bd733:hover,
html body.ak-sales-page #row-951b3fa3:hover,
html body.ak-sales-page #row-5aee5a48:hover,
html body.ak-sales-page #row-94027038:hover,
html body.ak-sales-page #row-3de40dbd:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26, 60, 47, 0.10) !important;
  border-color: rgba(180, 106, 60, 0.35) !important;
}

/* ---- Step numbers (thank-you 01/02/03) — bumped to 36px italic Caslon */
html body.ak-sales-page #text-74c0ec93 p,
html body.ak-sales-page #text-3661711a p,
html body.ak-sales-page #text-d1765bce p,
html body.ak-sales-page #text-74c0ec93 span,
html body.ak-sales-page #text-3661711a span,
html body.ak-sales-page #text-d1765bce span,
html body.ak-sales-page #text-74c0ec93 em,
html body.ak-sales-page #text-3661711a em,
html body.ak-sales-page #text-d1765bce em {
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  font-style: italic !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--ak-terracotta) !important;
}

/* ---- Step titles (Open my email / Read... / Pick one market) — eyebrow style */
html body.ak-sales-page #text-ebc1a1a3 p,
html body.ak-sales-page #text-7358761b p,
html body.ak-sales-page #text-14ed6e08 p,
html body.ak-sales-page #text-ebc1a1a3 strong,
html body.ak-sales-page #text-7358761b strong,
html body.ak-sales-page #text-14ed6e08 strong {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ak-forest) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* ============================================================
   29. THANK-YOU HERO buttons — hovers on "Download PDF" + "Back to site"
   Also hover on the "See the course" CTA in the soft-pitch section.
   ============================================================ */

/* Download PDF (cream, forest text) */
html body.ak-sales-page #button-c0cba054 {
  transition: background 180ms var(--ak-ease), transform 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-c0cba054:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

/* Back to site (transparent outline) */
html body.ak-sales-page #button-4bb97849 {
  transition: background 180ms var(--ak-ease), border-color 180ms var(--ak-ease), transform 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-4bb97849:hover {
  background: rgba(249, 247, 241, 0.10) !important;
  border-color: rgba(249, 247, 241, 0.85) !important;
  transform: translateY(-1px);
}

/* See the course (terracotta) — already terracotta by default systeme styling */
html body.ak-sales-page #button-da2b6df3 {
  background: var(--ak-terracotta) !important;
  transition: background 180ms var(--ak-ease), transform 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-da2b6df3:hover {
  background: #9A5832 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(180, 106, 60, 0.30) !important;
}

/* "Going deeper" eyebrow + headline tightening in soft-pitch section */
html body.ak-sales-page #headline-406b2394 h2 {
  text-wrap: balance;
}

/* ---- Mobile tweaks for steps ---- */
@media (max-width: 800px) {
  html body.ak-sales-page #text-946dd6f9 p {
    font-size: 28px !important;
  }
}

/* ============================================================
   30. CHECKOUT — Cross-Cultural Communication
   Section: #section-611e31fb
   Right column form card: #row-72f32b22
   Payment button: #paymentbutton-c8aeb783
   Guarantee row: #row-f9afb997
   Trust line text: #text-5fc74eb0
   Form field labels use inline rgb(39, 60, 99) for the label and
   rgb(208, 2, 27) for the required asterisk — both overridden below
   to match the AK palette.
   ============================================================ */

/* ----- Form field labels: switch dark-blue → ink, red * → terracotta */
html body.ak-sales-page #section-611e31fb [style*="rgb(39, 60, 99)"] {
  color: var(--ak-ink) !important;
}
html body.ak-sales-page #section-611e31fb [style*="rgb(208, 2, 27)"] {
  color: var(--ak-terracotta) !important;
  font-weight: 400 !important;
}

/* ----- Form inputs + select: cream bg, hairline border, forest focus */
html body.ak-sales-page #section-611e31fb input[type="text"],
html body.ak-sales-page #section-611e31fb input[type="email"],
html body.ak-sales-page #section-611e31fb input[type="tel"],
html body.ak-sales-page #section-611e31fb input[type="number"],
html body.ak-sales-page #section-611e31fb select {
  background-color: var(--ak-cream) !important;
  border: 1px solid rgba(45, 45, 45, 0.10) !important;
  border-radius: 4px !important;
  transition: border-color 160ms var(--ak-ease), box-shadow 160ms var(--ak-ease), background 160ms var(--ak-ease) !important;
}
html body.ak-sales-page #section-611e31fb input[type="text"]:hover,
html body.ak-sales-page #section-611e31fb input[type="email"]:hover,
html body.ak-sales-page #section-611e31fb select:hover {
  border-color: rgba(45, 45, 45, 0.20) !important;
}
html body.ak-sales-page #section-611e31fb input[type="text"]:focus,
html body.ak-sales-page #section-611e31fb input[type="email"]:focus,
html body.ak-sales-page #section-611e31fb select:focus {
  outline: none !important;
  border-color: var(--ak-forest) !important;
  box-shadow: 0 0 0 3px rgba(26, 60, 47, 0.08) !important;
  background-color: #ffffff !important;
}

/* ----- Customer type + payment method radios — forest accent */
html body.ak-sales-page #section-611e31fb input[type="radio"] {
  accent-color: var(--ak-forest) !important;
}

/* ----- "Individual / Company" toggle: tighten + brand the labels */
html body.ak-sales-page #section-611e31fb #customertype-993ed430 label,
html body.ak-sales-page #section-611e31fb [data-test-id^="customer-type"] {
  font-family: var(--ak-sans, 'NeueHaasDisplay-Roman42448762'), sans-serif !important;
  font-size: 14px !important;
  color: var(--ak-ink) !important;
}

/* ----- Payment method options: cream bg, hairline border */
html body.ak-sales-page #section-611e31fb [data-test-id^="payment-method"] {
  border: 1px solid rgba(45, 45, 45, 0.10) !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
  background: var(--ak-cream) !important;
  transition: border-color 160ms var(--ak-ease), background 160ms var(--ak-ease) !important;
  margin-bottom: 8px !important;
}
html body.ak-sales-page #section-611e31fb [data-test-id^="payment-method"]:hover {
  border-color: rgba(180, 106, 60, 0.35) !important;
}

/* ----- Horizontal divider in form card: softer */
html body.ak-sales-page #section-611e31fb #horizontalline-4f13fe53 {
  border-color: rgba(45, 45, 45, 0.08) !important;
}

/* ----- "Your details" eyebrow + "€49" price in card head ----- */
html body.ak-sales-page #section-611e31fb #text-3fc65725 p {
  font-family: var(--ak-sans, 'NeueHaasDisplay-Roman42448762'), sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ak-ink-70, rgba(45, 45, 45, 0.7)) !important;
}
html body.ak-sales-page #section-611e31fb #text-38559b5b p {
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  color: var(--ak-forest) !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

/* ----- Eyebrow "Final step — checkout" (already terracotta, tighten) */
html body.ak-sales-page #section-611e31fb #text-cf75bc4c p {
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-bottom: 4px;
}

/* ----- Headline "Read culture like a professional skill." */
html body.ak-sales-page #section-611e31fb #headline-458600a7 p {
  color: var(--ak-forest) !important;
  letter-spacing: -0.015em !important;
  text-wrap: balance;
}

/* ----- Trust line "Lifetime access | 14-day refund | Secure checkout" */
html body.ak-sales-page #section-611e31fb #text-5fc74eb0 p {
  font-family: var(--ak-sans, 'NeueHaasDisplay-Roman42448762'), sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
html body.ak-sales-page #section-611e31fb #text-5fc74eb0 p span {
  color: var(--ak-ink-50, rgba(45, 45, 45, 0.5)) !important;
}

/* ----- Guarantee row — star prefix on label, same look as magnet author card */
html body.ak-sales-page #row-f9afb997 {
  background: var(--ak-cream-soft, rgb(243, 240, 231)) !important;
  border: 1px solid rgba(45, 45, 45, 0.10) !important;
  border-radius: 4px !important;
  transition: transform 220ms var(--ak-ease), box-shadow 220ms var(--ak-ease), border-color 220ms var(--ak-ease) !important;
  box-shadow: 0 1px 2px rgba(26, 60, 47, 0.04) !important;
}
html body.ak-sales-page #row-f9afb997:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 60, 47, 0.08) !important;
  border-color: rgba(180, 106, 60, 0.30) !important;
}
html body.ak-sales-page #text-72c395e5 p {
  font-family: var(--ak-sans, 'NeueHaasDisplay-Roman42448762'), sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ak-forest) !important;
}
html body.ak-sales-page #text-72c395e5 p::before {
  content: "★ ";
  color: var(--ak-terracotta) !important;
}
html body.ak-sales-page #text-72c395e5 p strong {
  font-weight: 500 !important;
}
html body.ak-sales-page #text-b2684011 p,
html body.ak-sales-page #text-b2684011 p span {
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  font-style: italic !important;
  font-size: 16.5px !important;
  line-height: 1.5 !important;
  color: var(--ak-ink) !important;
}

/* ----- "Summary" label + offer-price block ----- */
html body.ak-sales-page #section-611e31fb #offerprice-698a1992 {
  background: var(--ak-cream, #F9F7F1) !important;
  border: 1px solid rgba(45, 45, 45, 0.10) !important;
  border-radius: 6px !important;
  padding: 14px 18px !important;
}
html body.ak-sales-page #section-611e31fb #offerprice-698a1992 span[data-testid$="-price"] {
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  color: var(--ak-forest) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
}

/* ----- Payment button — already forest, add hover lift + shadow */
html body.ak-sales-page #paymentbutton-c8aeb783 {
  border-radius: 4px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  transition: background 180ms var(--ak-ease), transform 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #paymentbutton-c8aeb783:hover {
  background: #122e23 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(26, 60, 47, 0.25) !important;
}

/* ----- Terms / Contact fine print ----- */
html body.ak-sales-page #text-16ca9005 p,
html body.ak-sales-page #text-cae3e787 p {
  font-size: 12.5px !important;
  line-height: 1.6 !important;
}
html body.ak-sales-page #text-16ca9005 a:hover span,
html body.ak-sales-page #text-cae3e787 a:hover span {
  color: var(--ak-terracotta) !important;
}

/* ----- Hide nav + footer master blocks on checkout for less distraction */
html body.ak-sales-page #section-611e31fb ~ section[id^="section-"]:not([id="section-611e31fb"]),
html body.ak-sales-page #section-611e31fb {
  /* keep just the checkout section — no-op for now, leave nav/footer toggle to systeme settings */
}

/* ============================================================
   32. WEBINAR PAGE (/webinar) — How to Pitch Across Cultures
   Added 2026-06-10. IDs are page-specific to /webinar, so this
   block is inert on magnet/course pages that share this file.
   Source mockup: redesign/webinar-landing.html
   ============================================================ */

/* ----- Hero: H1 → Forest (systeme inlines color on spans) ----- */
html body.ak-sales-page #headline-e5bc6f8e,
html body.ak-sales-page #headline-e5bc6f8e * {
  color: var(--ak-forest) !important;
}

/* ----- Hero badge pill: stronger bg + hairline + micro-label + dot ----- */
html body.ak-sales-page #row-bef67e36 {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(26, 60, 47, 0.15) !important;
}
html body.ak-sales-page #text-cee9f10f,
html body.ak-sales-page #text-cee9f10f * {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ak-forest) !important;
}
html body.ak-sales-page #text-cee9f10f p::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ak-terracotta);
  margin-right: 8px;
  vertical-align: 1px;
}

/* ----- Hero fine print under CTA ----- */
html body.ak-sales-page #text-df5b324f,
html body.ak-sales-page #text-df5b324f * {
  font-size: 13px !important;
  color: var(--ak-ink-50) !important;
}

/* ----- Hero photo: floating shadow (radius 4px already set in editor) ----- */
html body.ak-sales-page #image-05ba52b8 {
  box-shadow: 0 24px 60px rgba(26, 60, 47, 0.18) !important;
}

/* ----- Buttons: design-system radius 8px + hover lift.
   Canon per colors_and_type.css --radius-btn: 8px (homepage uses it).
   Nav CTA + hero CTA + form submit + final CTA. ----- */
html body.ak-sales-page #button-432ec8bd,
html body.ak-sales-page #button-e14c6387,
html body.ak-sales-page #button-dc8923b7,
html body.ak-sales-page #button-1119cf8c {
  border-radius: 8px !important;
  transition: background-color 180ms var(--ak-ease), transform 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-e14c6387:hover,
html body.ak-sales-page #button-dc8923b7:hover {
  background: #122e23 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26, 60, 47, 0.25) !important;
}
html body.ak-sales-page #button-432ec8bd:hover,
html body.ak-sales-page #button-1119cf8c:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(26, 60, 47, 0.20) !important;
}

/* ----- Facts strip (When / Length / Where / Price): labels as
   uppercase micro-labels; values stay Caslon (already set) ----- */
html body.ak-sales-page #text-b680a5bd *,
html body.ak-sales-page #text-e67d8d39 *,
html body.ak-sales-page #text-059b1c45 *,
html body.ak-sales-page #text-d29bc4ef * {
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-weight: 500 !important;
}

/* ----- Section H2s → Ink (hero H1 is the only Forest heading) ----- */
html body.ak-sales-page #headline-8381816b,
html body.ak-sales-page #headline-8381816b *,
html body.ak-sales-page #headline-5a5220dc,
html body.ak-sales-page #headline-5a5220dc *,
html body.ak-sales-page #headline-ddc5749b,
html body.ak-sales-page #headline-ddc5749b * {
  color: var(--ak-ink) !important;
}

/* ----- Three cards: numerki — same treatment as magnet landing
   (section 27): Caslon italic terracotta 36px ----- */
html body.ak-sales-page #text-b104d361,
html body.ak-sales-page #text-188a3e0a,
html body.ak-sales-page #text-06d265f0 {
  font-size: 36px !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 14px !important;
}
html body.ak-sales-page #text-b104d361 *,
html body.ak-sales-page #text-188a3e0a *,
html body.ak-sales-page #text-06d265f0 * {
  font-style: italic !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--ak-terracotta) !important;
}

/* ----- Three cards: titles as uppercase tracked labels ----- */
html body.ak-sales-page #text-7ba2f65e *,
html body.ak-sales-page #text-68fc0827 *,
html body.ak-sales-page #text-8b7a45da * {
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ak-forest) !important;
  line-height: 1.4 !important;
}

/* ----- Cards: hover lift, same values as magnet landing (section 29).
   Cards: row-ba31b918 (01), row-0113e043 (02), row-ccda3c39 (03),
          row-2e1200d2 (Who it's for), row-4bdb9391 (August) ----- */
html body.ak-sales-page #row-ba31b918,
html body.ak-sales-page #row-0113e043,
html body.ak-sales-page #row-ccda3c39,
html body.ak-sales-page #row-2e1200d2,
html body.ak-sales-page #row-4bdb9391 {
  transition: box-shadow 220ms var(--ak-ease),
              border-color 220ms var(--ak-ease),
              transform 220ms var(--ak-ease) !important;
}
html body.ak-sales-page #row-ba31b918:hover,
html body.ak-sales-page #row-0113e043:hover,
html body.ak-sales-page #row-ccda3c39:hover,
html body.ak-sales-page #row-2e1200d2:hover,
html body.ak-sales-page #row-4bdb9391:hover {
  box-shadow: 0 6px 28px rgba(26, 60, 47, 0.12) !important;
  border-color: rgba(26, 60, 47, 0.30) !important;
  transform: translateY(-2px);
}

/* ----- Two-up (Who it's for / August Kjerland): labels as
   uppercase Forest micro-labels, star before author ----- */
html body.ak-sales-page #text-c489e56b *,
html body.ak-sales-page #text-30eb9712 * {
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ak-forest) !important;
  line-height: 1.4 !important;
}
html body.ak-sales-page #text-30eb9712 p::before {
  content: "★ ";
  color: var(--ak-terracotta) !important;
}

/* ----- Form card: cream + hairline + soft shadow (was plain white) ----- */
html body.ak-sales-page #row-a74c7329 {
  background: var(--ak-cream) !important;
  border: 1px solid var(--ak-ink-10) !important;
  box-shadow: 0 18px 50px rgba(26, 60, 47, 0.10) !important;
}

/* ----- Form inputs: radius 8px, forest focus ----- */
html body.ak-sales-page #section-89f347ed input {
  border-radius: 8px !important;
  transition: border-color 180ms var(--ak-ease), background-color 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #section-89f347ed input:focus {
  outline: none !important;
  border-color: var(--ak-forest) !important;
  background: var(--ak-cream) !important;
}

/* ----- Form consent fine print ----- */
html body.ak-sales-page #text-c51f54be * {
  font-size: 12.5px !important;
  color: var(--ak-ink-50) !important;
}

/* ----- Section eyebrows ("What you'll leave with", "One session,
   recorded once"): uppercase tracked, same treatment as the generic
   sales-page eyebrow rule (section 2), which misses this page
   because its emotion class is sc-bypJrU, not sc-iGgWBk ----- */
html body.ak-sales-page #text-91860a20 *,
html body.ak-sales-page #text-2c00acfc * {
  display: inline-block;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* ============================================================
   33. WEBINAR THANK-YOU (/webinar-confirmed) — same treatment as
   cc-playbook-thanks (sections 28-29), new page IDs.
   Plus: uppercase eyebrows on BOTH thank-you pages (the generic
   eyebrow rule misses them — different emotion classes).
   Added 2026-06-10.
   ============================================================ */

/* ----- Eyebrows: uppercase tracked (both thank-you pages) -----
   /webinar-confirmed: "You're in" + "While you wait"
   /cc-playbook-thanks: "You're in" + "Going deeper" */
html body.ak-sales-page #text-6b213f38 *,
html body.ak-sales-page #text-b25ca5db *,
html body.ak-sales-page #text-1cac3927 *,
html body.ak-sales-page #text-45740cbe * {
  display: inline-block;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}

/* ----- Hero H1: Caslon italic cream (was black roman on forest bg) ----- */
html body.ak-sales-page #headline-976bde7f,
html body.ak-sales-page #headline-976bde7f * {
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  font-style: italic !important;
  color: var(--ak-cream) !important;
}

/* ----- Hero buttons: same hovers as cc-thanks (section 29) ----- */
/* Add to calendar (cream, forest text) */
html body.ak-sales-page #button-1df4e7e7 {
  background: var(--ak-cream) !important;
  transition: background 180ms var(--ak-ease), transform 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-1df4e7e7:hover {
  background: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}
/* Back to the site (transparent outline) */
html body.ak-sales-page #button-d83f0af9 {
  transition: background 180ms var(--ak-ease), border-color 180ms var(--ak-ease), transform 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-d83f0af9:hover {
  background: rgba(249, 247, 241, 0.10) !important;
  border-color: rgba(249, 247, 241, 0.85) !important;
  transform: translateY(-1px);
}
/* Get the free playbook (terracotta) */
html body.ak-sales-page #button-83c03eb1 {
  background: var(--ak-terracotta) !important;
  transition: background 180ms var(--ak-ease), transform 180ms var(--ak-ease), box-shadow 180ms var(--ak-ease) !important;
}
html body.ak-sales-page #button-83c03eb1:hover {
  background: #9A5832 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(180, 106, 60, 0.30) !important;
}

/* ----- "What to do next" lead: same as cc-thanks text-946dd6f9 ----- */
html body.ak-sales-page #text-0eeae616 {
  text-align: center !important;
  max-width: 760px !important;
  margin: 0 auto 56px !important;
}
html body.ak-sales-page #text-0eeae616 p {
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  color: var(--ak-forest) !important;
  text-wrap: balance;
}
html body.ak-sales-page #text-0eeae616 p span {
  color: var(--ak-forest) !important;
}
@media (max-width: 800px) {
  html body.ak-sales-page #text-0eeae616 p {
    font-size: 28px !important;
  }
}

/* ----- Step rows: hover lift + terracotta border (as section 28) ----- */
html body.ak-sales-page #row-34fad46c,
html body.ak-sales-page #row-46af48e8,
html body.ak-sales-page #row-80e3d619 {
  transition: transform 220ms var(--ak-ease), box-shadow 220ms var(--ak-ease), border-color 220ms var(--ak-ease) !important;
  cursor: default;
}
html body.ak-sales-page #row-34fad46c:hover,
html body.ak-sales-page #row-46af48e8:hover,
html body.ak-sales-page #row-80e3d619:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26, 60, 47, 0.10) !important;
  border-color: rgba(180, 106, 60, 0.35) !important;
}

/* ----- Step numbers 01/02/03: Caslon italic terracotta 36px ----- */
html body.ak-sales-page #text-08bcf509 *,
html body.ak-sales-page #text-d9e1a821 *,
html body.ak-sales-page #text-076b8054 * {
  font-family: 'AdobeCaslonPro42448745', Georgia, serif !important;
  font-style: italic !important;
  font-size: 36px !important;
  line-height: 1 !important;
  color: var(--ak-terracotta) !important;
}

/* ----- Step titles: uppercase tracked forest (as section 28) ----- */
html body.ak-sales-page #text-99e76733 *,
html body.ak-sales-page #text-b5b38366 *,
html body.ak-sales-page #text-4353c41d * {
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ak-forest) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}