/* ===== Cascade order: later layers win ===== */
@layer reset, tokens, base, layout, utilities, components, pages;

/* ========================= tokens ========================= */
@layer tokens {
  :root {
    /* Colors */
    --bg-00080F: #00080F;
    --bg-02060A: #02060A;
    --pattern-noise: #00000026;

    /* Borders */
    --border-transparent: #0C0C0C00;
    --border-0c: #0C0C0C;
    --border-contrast: #ffffff;

    /* Typography & theme */
    --font-ui: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
    --text: #ffffff;
    --muted: #8a8a8a;
    --accent: #ffd510;

    /* Spacing */
    --pad-v: 1.375rem;
    --pad-h: 2.125rem;

    /* Mini Section Kit scale */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;

    
    --alx-text: var(--text);
    --alx-accent: var(--accent);
  }
}

/* ========================= reset ========================= */
@layer reset {
  html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: auto !important;
    scrollbar-gutter: stable; 
  }
  *, *::before, *::after { box-sizing: border-box; }

  body { margin: 0; line-height: 1.4; }

  h1, h2, h3, h4, h5, h6, p, blockquote, figure { margin: 0; }
  ul, ol { margin: 0; padding-left: 1.25em; }

  /* Media */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    /* keep centering (you said “no” to removing it) */
    margin-left: auto;
    margin-right: auto;
  }

  /* Prevent horizontal scroll (keep once) */
  html, body { overflow-x: hidden; }
}

/* ========================= base ========================= */
@layer base {
  body {
    background: var(--bg-00080F);
    color: var(--text);
    font-size: 1rem;
    font-family: var(--font-ui);
  }
  .page {
    margin: 0 auto;
    max-width: 100%;
    padding: var(--pad-v) var(--pad-h);
    text-align: center;
  }
}

/* ========================= layout ========================= */
@layer layout {
  /* Full-bleed primitive */
  .full-bleed {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: calc(-50vw + (100vw - 100%) / 2);
    margin-right: calc(-50vw + (100vw - 100%) / 2);
    overflow-x: clip;
  }
  
  :where(.page) .full-bleed {
    margin-left: calc(-50vw + (100vw - 100%) / 2 - var(--pad-h));
    margin-right: calc(-50vw + (100vw - 100%) / 2 - var(--pad-h));
  }

  /* Section contract: structural, no padding (you said “go” on resolving contradiction) */
  .section {
    margin-top: 2.25rem;      /* Carrd mt-225 */
    margin-bottom: 1.875rem;  /* Carrd mb-1875 */
    padding: 0;
  }

  /* Wrapper system */
  .container { margin: var(--space-4) auto; padding: 0; background: transparent; }
  .container > .wrapper {
    max-width: min(1200px, 75vw);
    margin-inline: auto;
    padding: 0;
  }
  .container > .wrapper > .inner {
    padding: clamp(32px, 6vw, 80px) clamp(16px, 4vw, 40px);
  }
  .container > .wrapper > .inner > * { max-width: 100%; }

  /* Simple stack helper */
  .stack > * + * { margin-top: 0px; }

  /* Prose limiter */
  .prose { max-width: 60ch; margin-inline: auto; }

  /* Full-bleed inside container */
  .container .full-bleed {
    position: relative;
    left: 50%;
    width: 100vw;
    margin-left: calc(-50vw + (100vw - 100%) / 2);
    margin-right: calc(-50vw + (100vw - 100%) / 2);
    overflow-x: clip;
  }

  
}

/* ========================= utilities ========================= */
@layer utilities {
    .content-100 { max-width: 100%; width: 100%; }
  .content-75  { max-width: 75rem;  width: 100%; }
  .content-40  { max-width: 40rem;  width: 100%; }
  
  .mx-auto { margin-inline: auto; }
  .center { text-align: center; }

  .rounded-0375 { border-radius: 0.375rem; }

  .mb-3 { margin-bottom: 3rem; }
  .mb-1125 { margin-bottom: 1.125rem; }
  .mt-225 { margin-top: 2.25rem; }
  .mb-1875 { margin-bottom: 1.875rem; }
  .mt-1125 { margin-top: 1.125rem; }

  .pv-auto { padding-block: clamp(1rem, 4vw, 3rem); }
  .ph-auto { padding-inline: clamp(1rem, 4vw, 2rem); }
  .pv-325 { padding-block: 3.25rem; }

  .bg-00080F { background: var(--bg-00080F); }
  .bg-02060A { background: var(--bg-02060A); }
  .bg-00000091 { background-color: #00000091; }

  .border-1-solid-transparent { border: 1px solid var(--border-transparent); }
  .border-1-solid-0c { border: 1px solid var(--border-0c); }

  .shadow-none { box-shadow: none; }

  /* Noise */
  .pattern-noise {
    background-image:
      radial-gradient(1px 1px at 25% 20%, var(--pattern-noise) 50%, transparent 51%),
      radial-gradient(1px 1px at 60% 40%, var(--pattern-noise) 50%, transparent 51%),
      radial-gradient(1px 1px at 30% 80%, var(--pattern-noise) 50%, transparent 51%),
      radial-gradient(1px 1px at 80% 70%, var(--pattern-noise) 50%, transparent 51%);
    background-size: 64px 64px;
  }

  /* Grid lines */
  .pattern-lines {
    background-color: var(--bg-02060A);
    background-image: repeating-linear-gradient(0deg, #00000026 1px, transparent 1px);
    background-size: 100% 8px;
    border: none;
  }

  /* Scrollbars */
  ::-webkit-scrollbar { width: 18px; }
  ::-webkit-scrollbar-track { background: transparent !important; }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(68,68,68,.8);
    border-radius: 8px;
    border: 3px solid transparent;
  }
  ::-webkit-scrollbar-thumb:hover { background-color: rgba(102,102,102,.9); }

  /* Firefox */
  * { scrollbar-width: auto; scrollbar-color: rgba(68,68,68,.8) transparent; }
}

/* ========================= components ========================= */
@layer components {
  /* CTA button (global baseline) */
  .scroll-button {
    display: inline-block;
    margin-top: 17px;
    padding: 18px 30px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 0.6;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: padding .25s ease, box-shadow .25s ease;
    box-shadow: 0 0 22px color-mix(in oklab, var(--accent) 28%, transparent);
  }
  .scroll-button:hover {
    padding: 18px 28px;
    box-shadow: 0 0 32px color-mix(in oklab, var(--accent) 38%, transparent);
  }
  .scroll-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  /* Calendly */
  .calendly-inline-widget { overscroll-behavior: contain; user-select: none; }
  .calendly-inline-widget iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: none;
  }

  /* Desktop-only note */
  .desktop-only.disclaim {
    margin: 1rem auto;
    font-family: var(--font-ui);
    font-weight: 100;
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0;
    color: #5a5d61;
    text-align: center;
    max-width: 45%;
  }
  @media (max-width: 768px) { .desktop-only { display: none; } }

  /* Reveal Card (kept as-is) */
  .reveal-card {
    --collapsed-h: 78px;
    --max-open-h: 80vh;
    --radius: 16px;
    --t: 480ms cubic-bezier(.22, .61, .36, 1);

    position: relative;
    inline-size: min(100%, 560px);
    margin: 10px auto;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border-contrast);
    box-shadow:
      inset 0 0 0 0.5px rgba(255,255,255,.35),
      0 10px 30px rgba(0,0,0,.25);
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
    min-block-size: var(--collapsed-h);
    will-change: max-height;
    transition: max-height var(--t);
  }
  .reveal-card:not(.open) { max-height: var(--collapsed-h); }
  .reveal-card.open { max-height: var(--max-open-h); }

  .rc-media, .rc-media img { display: block; inline-size: 100%; }
  .rc-media img {
    block-size: auto;
    object-fit: cover;
    transform: scale(1.01);
    transition: filter var(--t), transform var(--t);
    pointer-events: none;
  }
  .reveal-card:not(.open) .rc-media img {
    filter: blur(3px) saturate(.92) brightness(.95);
    transform: scale(1.03);
  }

  .rc-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    transition: opacity var(--t);
    border-radius: inherit;
    opacity: 1;
  }
  .reveal-card.open .rc-overlay { opacity: 0; }

  .rc-icon-eye {
    inline-size: 30px;
    block-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
    opacity: .95;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-3a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>');
  }
  .reveal-card.open .rc-icon-eye { opacity: 0; }
    /* Shared video embed spacing */
  #container-2 wistia-player {
    display: block;
  }
  #container-2 wistia-player:first-of-type { margin-top: 15px; }
  #container-2 wistia-player:not(:first-of-type) { margin-top: 25px; }
  @media (max-width: 768px) {
    #container-2 wistia-player:first-of-type { margin-top: 0 !important; }
  }
  /* Generic logo protect (re-usable outside container-6) */
.logo-protect {
  position: relative;
  inline-size: 78px; /* matches your 78px width */
  margin: 18px auto 12px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.logo-protect img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  pointer-events: none; /* overlay catches all events */
}
.logo-protect .protect-guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: auto;
}

   @media (min-width: 1024px) {
    .scroll-button {
      padding: 22px 40px;
      font-size: 1.25rem;
      line-height: 1;
      border-radius: 10px;
      box-shadow: 0 0 28px color-mix(in oklab, var(--accent) 32%, transparent);
    }
    .scroll-button:hover {
      padding: 22px 38px;
      box-shadow: 0 0 40px color-mix(in oklab, var(--accent) 42%, transparent);
    }
  }
/* ===== Divider 1 (both-ends fade, centered, custom bottom margin) ===== */
.fade-divider{
  display:block;
  width:85%;
  height:1px;
  margin:24px auto 55px;
  background:linear-gradient(
    90deg,
    rgba(225,230,236,0) 0%,
    #e1e6ec 20%,
    #e1e6ec 80%,
    rgba(225,230,236,0) 100%
  );
}

/* ===== “Do you struggle with video editors…” ===== */
#alx-headline{
  margin:1.375rem auto;
  font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:500;
  font-size:2.4rem;
  line-height:1.125;
  letter-spacing:-0.1rem;
  color:var(--alx-text);
  text-align:center;
  max-width:100%;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease-out, transform .8s ease-out;
}
#alx-headline .alx-hl{ color:var(--alx-accent); }
#alx-headline .br-mobile{ display:none; }
#alx-headline.alx-visible{ opacity:1; transform:translateY(0); }

@media (max-width:768px){
  #alx-headline{
    font-size:1.8rem;
    letter-spacing:-0.04rem;
    margin-bottom:-0.01rem;
  }
  #alx-headline .br-mobile{ display:inline; }
}
@media (prefers-reduced-motion:reduce){
  #alx-headline{ transition:none; opacity:1; transform:none; }
}

/* ===== Features: “Containers” ===== */
#features{
  --card-bg:#00000091;
  --card-brd:#0C0C0C;

  display:flex;
  gap:15px;
  padding:20px;
  width:100%;
  max-width:1200px;
  margin:0 auto;

  font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  color:var(--alx-text);

  /* match Carrd’s inner base so body text lines up */
  font-size:0.9rem;

  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
#features *{ -webkit-user-drag:none; }

/* hard no-select inside the features block */
#features,
#features *:not(input, textarea){
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
#features a, #features img{
  -webkit-user-select:none !important;
  -webkit-touch-callout:none !important;
  pointer-events:auto;
}

.features__item{
  flex:1;
  background:var(--card-bg);
  padding:25px;
  border-radius:8px;
  border:1px solid var(--card-brd);
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  text-align:left;

  opacity:0;
  transform:translateY(30px);
  transition:
    border-color .3s ease-out,
    box-shadow .3s ease-out,
    opacity .8s ease-out,
    transform .8s ease-out;
}
.features__item.visible{ opacity:1; transform:translateY(0); }
.features__item:hover{
  border-color:#ffffff33;
  box-shadow:0 0 6px rgba(255,255,255,.04), 0 0 12px rgba(255,255,255,.02);
}

/* lock title to Carrd size */
.features__title{
  color:var(--alx-text);
  margin:0 0 15px;
  font-size:1.26rem;
  font-weight:700;
}

/* body text inherits 0.9rem base */
.features__text{
  color: #b3b8bd;
  line-height:1.6;
  font-weight:400;
  margin:0;
}

/* icons use a CSS custom prop set by JS */
.features__icon{
  width:40px;
  height:40px;
  margin:0 0 10px 0;
  display:block;
  --bg:none;
  background-image:var(--bg);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:left top;
  pointer-events:none;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  vertical-align:top;
}

/* mobile */
@media (max-width:768px){
  #features{ flex-direction:column; gap:20px; padding:15px; }
  .features__item{ padding:20px; }
  .features__text{ font-size:.95em; font-weight:500; }
}

/* desktop-only tweaks */
@media (min-width:769px){
  #features{ margin-bottom:40px; }
}

/* ===== Divider 2 (mobile-only fade divider) ===== */
#mobile-fade-divider{
  display:block;
  width:85%;
  height:1px;
  margin:24px auto 55px;
  background:linear-gradient(
    90deg,
    rgba(225,230,236,0) 0%,
    #e1e6ec 20%,
    #e1e6ec 80%,
    rgba(225,230,236,0) 100%
  );
}
@media (min-width:768px){
  #mobile-fade-divider{ display:none !important; }
}

/* ===== Long-form editing work (heading, mobile adds colon) ===== */
.headline{
  margin:auto;
  font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:500;
  font-size:44px;          /* Carrd computed */
  line-height:33px;        /* Carrd computed */
  letter-spacing:0;        /* Carrd computed 'normal' */
  color:#E1E6EC;
  text-align:center;
  max-width:100%;
  position:relative;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Desktop (no colon) */
@media (min-width:1024px){
  .headline{ margin-top:20px; margin-bottom:0; }
  .headline::after{ content:""; }
}
@media (max-width:1023px){
  .headline::after{ content:":"; }
}
@media (max-width:768px){
  .headline{
    line-height:38px !important;
  }
  .headline .hl{
    color:#ffd510; font-weight:500;
  }
}

/* ===== Credibility/measurable conversions (desktop-only blurb) ===== */
.trust-text{
  margin:.5rem auto;
  font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-weight:300;
  font-size:1.125rem;
  line-height:1.3;
  letter-spacing:0;
  color:#8a8a8a;
  text-align:center;
  max-width:100%;
}
@media (max-width:768px){
  .trust-text{ display:none; }
}


/* ========================= pages ========================= */
@layer pages {
  /* ===== Container 1 (moved from inline; 1:1 visuals) ===== */
  :is(#container-1, .container-1) {
    padding-top: 0;
    padding-bottom: 20.167px; /* exact */
    min-height: 22rem;
  }

  /* 1) Hero #1 text */
  :is(#container-1, .container-1) .hero-text { display: none; }
  @media (min-width: 601px) {
    :is(#container-1, .container-1) .hero-text{
      display:block;
      margin-top:70px; margin-bottom:27px;
      font-family: var(--font-ui);
      font-size:18px; line-height:1.5; text-align:center; color:#e1e6ec;
    }
    :is(#container-1, .container-1) .hero-text span{ font-weight:700; }
  }

  /* 2) Headline 1 */
  :is(#container-1, .container-1) #hl1 .hero-title,
  :is(#container-1, .container-1) #hl1 .mobile-title{
    font-family: var(--font-ui);
    font-weight:700; text-align:center; margin:0 auto; max-width:100%; color:#e1e6ec;
  }
  :is(#container-1, .container-1) #hl1 .hero-title{ font-size:clamp(20px,4vw,42px); line-height:1.2; }
  :is(#container-1, .container-1) #hl1 .mobile-title{
    display:none; font-size:clamp(22px,7vw,32px); line-height:1.25; margin-top:100px; margin-bottom:10px;
  }
  :is(#container-1, .container-1) #hl1 .hero-title .highlight{
    color:#ffd510; text-decoration:underline; text-decoration-color:#e1e6ec; text-underline-offset:4px; font-weight:800;
  }
  @media only screen and (max-width:820px){
    :is(#container-1, .container-1) #hl1 .hero-title{ display:none !important; }
    :is(#container-1, .container-1) #hl1 .mobile-title{ display:block !important; }
  }
   #container-1 #hl1 .hero-title {
    width: 100vw; /* span entire viewport width */
  max-width: none;
  margin-left: calc(-50vw + 50%); /* cancel wrapper centering */
  margin-right: calc(-50vw + 50%); 
  text-align: center; /* keep text centered */
  text-wrap: balance;
  }

  /* 3) Subheadline 1 (desktop only) */
  :is(#container-1, .container-1) .subhead-1{
    margin:1.125rem auto 30px auto;
    font-family: var(--font-ui);
    font-weight:300; font-size:1rem; line-height:1; letter-spacing:0; color:#9DA5B0; text-align:center; max-width:100%;
  }
  @media (max-width: 768px){ :is(#container-1, .container-1) .desktop-only{ display:none !important; } }

  /* 4) VSL embed */
  :is(#container-1, .container-1) .vsl-embed{
    position: relative; width: 100%; max-width: 1240px; margin: 0 auto 50px;
  }
  :is(#container-1, .container-1) .vsl-embed__frame{
    position: relative; padding-top: 56.25%;
  }
  :is(#container-1, .container-1) wistia-player{
    position:absolute; top:0; left:0; width:100%; height:100%;
  }
  :is(#container-1, .container-1) wistia-player[media-id='egx13g6ba1']:not(:defined){
    background:center/contain no-repeat url('https://fast.wistia.com/embed/medias/egx13g6ba1/swatch');
    display:block; filter:blur(5px); width:100%; height:100%;
  }

  /* 5) Headline 2 (mobile headline) */
  :is(#container-1, .container-1) .hl2-mobile-title{
    font-family: var(--font-ui);
    font-weight:500; text-align:center; margin:-30px auto 0 auto; max-width:100%;
    color:#e1e6ec; display:none; font-size:clamp(13px,4vw,18px); line-height:1.3;
  }
  :is(#container-1, .container-1) .hl2-highlight{ background-color:#ffd510; color:#000; padding:0 4px; border-radius:0.5px; font-weight:600; }
  @media only screen and (max-width:820px){
    :is(#container-1, .container-1) .hl2-mobile-title{ display:block !important; }
  }

  /* 6) Subheadline 2 (mobile only) */
  :is(#container-1, .container-1) .mobile-only { display: none; }
  :is(#container-1, .container-1) .subhead-2{
    margin:0.5rem auto 30px auto;
    font-family: var(--font-ui);
    font-weight:300; font-size:0.75rem; line-height:1.4; letter-spacing:0; color:#9DA5B0; text-align:center; max-width:100%;
  }
  @media (max-width:768px){
    :is(#container-1, .container-1) .mobile-only{ display:block; }
  }

  /* 7) CTA (preserve container-1 visual overrides) */
  :is(#container-1, .container-1) .scroll-button{
    background:#ffd510; color:#E1E6EC;
    box-shadow: 0 0 22px rgba(255,213,16,.28);
  }
  :is(#container-1, .container-1) .scroll-button:hover{
    box-shadow: 0 0 32px rgba(255,213,16,.38);
  }
  @media screen and (max-width:600px){
    :is(#container-1, .container-1) .scroll-button{
      color:#fff !important;
    }
  }
  .hide-on-mobile {
    line-height: 0.97; /* tighter rhythm */
  }
  /* ===== Container 2 ===== */
  #container-2 wistia-player[media-id='7fabk90kiw']:not(:defined),
  #container-2 wistia-player[media-id='ckjt9hifsx']:not(:defined),
  #container-2 wistia-player[media-id='rp8eiq1r14']:not(:defined),
  #container-2 wistia-player[media-id='sghn8kkn9p']:not(:defined) {
    display: block;
    filter: blur(5px);
    padding-top: 56.25%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
  #container-2 wistia-player[media-id='7fabk90kiw']:not(:defined) {
    background-image: url('https://fast.wistia.com/embed/medias/7fabk90kiw/swatch');
  }
  #container-2 wistia-player[media-id='ckjt9hifsx']:not(:defined) {
    background-image: url('https://fast.wistia.com/embed/medias/ckjt9hifsx/swatch');
  }
  #container-2 wistia-player[media-id='rp8eiq1r14']:not(:defined) {
    background-image: url('https://fast.wistia.com/embed/medias/rp8eiq1r14/swatch');
  }
  #container-2 wistia-player[media-id='sghn8kkn9p']:not(:defined) {
    background-image: url('https://fast.wistia.com/embed/medias/sghn8kkn9p/swatch');
  }

  /* ===== Container 3 (existing) ===== */
  :is(#container-3, .container-3){
    background: #02060A;
    color: #E1E6EC;
  }

  /* Typography */
  :is(#container-3, .container-3) .whoami{
    margin: auto;
    font-family: var(--font-ui);
    font-weight: 300;
    font-size: clamp(2rem, 4.5vw, 2.625rem);
    line-height: 1.125;
    letter-spacing: -0.1rem;
    text-align: center;
    max-width: 100%;
  }

  /* Slideshow safety */
  :is(#container-3, .container-3) img,
  :is(#container-3, .container-3) video,
  :is(#container-3, .container-3) .slideshow-container,
  :is(#container-3, .container-3) .slideshow-frame { max-width: 100%; }
  :is(#container-3, .container-3) .slideshow-frame { overflow: hidden; }
  :is(#container-3, .container-3) h1,
  :is(#container-3, .container-3) h2,
  :is(#container-3, .container-3) h3 { margin-top: 0; }

  /* Stack gap */
  :is(#container-3, .container-3) .whoami-block { --stack-gap: 14px; }
  :is(#container-3, .container-3) .inner > * { max-width: 100%; }

  /* Container 6 */
  :is(#container-6, .container-6) .content-75 { padding: 3.25rem var(--pad-h); }

  #container-6 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#container-6 .headline {
  margin: auto;
  font-family: var(--font-ui, 'SF Pro Display', -apple-system, BlinkMacSystemFont,'Segoe UI', Roboto,'Helvetica Neue', Arial, sans-serif);
  font-weight: 500;
  font-size: 2.75rem;
  line-height: .75;
  letter-spacing: 0;
  color: #e1e6ec;
  text-align: center;
  max-width: 100%;
}
#container-6 .headline-strong {
  font-weight: 700;
  color: #FFD510; /* (matches your brand accent) */
}

#container-6 .booking-label {
  margin: auto;
  font-family: var(--font-ui, 'SF Pro Display', -apple-system, BlinkMacSystemFont,'Segoe UI', Roboto,'Helvetica Neue', Arial, sans-serif);
  font-weight: 400;
  font-size: 1rem;
  line-height: .75;
  letter-spacing: 0;
  color: #e1e6ec;
  text-align: center;
  max-width: 100%;
}

#container-6 .desktop-only.disclaim {
  max-width: 50%;      /* override the global 45% just for container-6 */
  margin: 16px auto;   /* override the global 1rem auto just for container-6 */
  text-align: center;
}

#container-6 .logo-row {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 0;
  padding-bottom: 20px;
}

/* Logo-protect (scoped to container-6) */
#container-6 .logo-protect {
  position: relative;
  display: inline-block;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
#container-6 .logo-protect img {
  pointer-events: none; /* avoid dragging on the img itself */
}
#container-6 .logo-protect .protect-guard {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  pointer-events: auto; /* absorbs interactions to block menu/drag */
}  

  #container-6 #ge-logo img {
  max-width: 94px;
  height: auto;
  opacity: .8;
}

  /* Container margins/padding cleanup */
  :is(#container-3, .container-3),
  :is(#container-5, .container-5),
  :is(#container-6, .container-6) {
    padding: 0;
    margin: var(--space-4) auto;
  }

  /* Keep widths controlled by wrappers */
  :is(#container-3, .container-3) .whoami,
  :is(#container-3, .container-3) #gs-blurb { max-width: 100%; }

  @media (max-width: 768px) {
    #book-your-call { margin-bottom: 30px; }
    #container-6 .headline {
      margin-bottom: 20px !important;
    }
  }
  /* ===== Container 3 (moved inline → stylesheet, 1:1 visuals) ===== */

  /* Spacing fixes and margin collapse guards */
  :is(#container-3, .container-3) .inner.stack.whoami-block.center {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }
  :is(#container-3, .container-3) .inner.stack.whoami-block.center > :first-child { margin-top: 0; }
  :is(#container-3, .container-3) .inner.stack.whoami-block.center > :last-child  { margin-bottom: 0; }

  /* Text helpers (scoped) */
  #container-3 .muted { color: #8a8a8a; }
  #container-3 .mono { font-family: monospace; }

  /* Blurbs */
  #container-3 #gs-blurb {
    margin: auto;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.125;
    color: var(--muted);
    text-align: center;
    max-width: 57%;
  }
  #container-3 #gs-blurb-mobile {
    display: none;
    margin: auto;
    margin-bottom: 24px;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.125;
    color: var(--muted);
    text-align: center;
    max-width: 57%;
  }

  /* Mobile-only faded divider */
  #container-3 #mobile-fade-divider {
    display: block;
    width: 85%;
    height: 1px;
    margin: 24px auto 55px;
    background: linear-gradient(90deg,
      rgba(225,230,236,0) 0%,
      #e1e6ec 20%,
      #e1e6ec 80%,
      rgba(225,230,236,0) 100%);
  }

  /* Slideshow */
  #container-3 .slideshow-wrapper {
    all: initial;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 30px auto 190px;
  }
  #container-3 .slideshow-frame { width: 100%; display: flex; justify-content: center; }
  #container-3 .slideshow-container {
    position: relative; width: 100%; max-width: 700px; aspect-ratio: 16/9;
    display: flex; justify-content: center; align-items: center;
    overflow: visible; user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none; touch-action: pan-y;
  }
  #container-3 .slide-track { position: relative; width: 100%; height: 100%; pointer-events: none; }
  #container-3 .slide {
    position: absolute; inset: 0; background-position: center; background-size: cover;
    opacity: 0; transform: scale(.5); filter: blur(4px);
    transition: all .6s ease-in-out; pointer-events: none;
  }
  #container-3 .slide.active { opacity: 1; transform: scale(1); filter: none; z-index: 2; }
  #container-3 .slide.left  { opacity: .6; z-index: 1; transform: translateX(-40%) scale(.6); }
  #container-3 .slide.right { opacity: .6; z-index: 1; transform: translateX(40%)  scale(.6); }
  #container-3 .arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 30px; color: white; background: none; border: none; cursor: pointer; z-index: 9999;
    pointer-events: auto; user-select: none; -webkit-user-select: none; outline: none;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .15s ease;
  }
  #container-3 .arrow:active { transform: translateY(-50%) scale(.85); }
  #container-3 .arrow-left  { left:  clamp(10px, 3vw, 40px); }
  #container-3 .arrow-right { right: clamp(10px, 3vw, 40px); }
  #container-3 .protect-guard { position: absolute; inset: 0; z-index: 3; background: transparent; pointer-events: none; }
  #container-3 .slideshow-container, #container-3 .slideshow-container * { user-select: none; -webkit-user-select: none; }

  /* Section headline */
  #container-3 .responsive-text {
    margin: auto;
    font-weight: 300;
    font-size: 2.625rem;
    line-height: 1.125;
    letter-spacing: -0.0833rem;
    color: #E1E6EC;
    text-align: center;
    max-width: 100%;
  }

  /* Desktop helper line */
  #container-3 #hero-blurb {
    margin: auto; display: block;
    font-weight: 400; font-size: 1.125rem; line-height: 1.3;
    color: var(--muted); text-align: center; max-width: 57%; box-sizing: border-box;
  }

  /* Desktop-only dashboard note */
  #container-3 #no-select {
    display: flex; flex-direction: column; align-items: center;
    font-size: .65em; margin-bottom: 5px; margin-top: 18px; user-select: none;
  }
  #container-3 #no-select .note-surface {
    max-width: 300px; background: rgba(30,30,30,.7); border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px; padding: 8px 14px; color: #e1e6ec; font-style: italic;
    box-shadow: 0 0 8px rgba(255,255,255,.05); backdrop-filter: blur(5px); text-align: center;
  }
  #container-3 #no-select p { margin: 0; font-weight: 400; font-size: 9.36px; }
  #container-3 #no-select .arrow-up { font-size: 13px; color: #e1e6ec; margin-top: 6px; opacity: .6; }

  /* Desktop/tablet flow */
  #container-3 #steps-flow {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin-bottom: 48px; font-size: .75em; user-select: none;
    margin-top: 2px !important;
  }
  #container-3 #steps-flow .how-step {
    flex: 1; min-width: 160px; background: #00000091; border: 1px solid #0C0C0C; border-radius: 6px; padding: 12px; color: white;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1); transition: box-shadow .3s ease, border-color .3s ease;
    /* hover effect moved from inline JS */
  }
  #container-3 #steps-flow .how-step:hover {
    box-shadow: 0 0 6px rgba(255,255,255,0.04), 0 0 12px rgba(255,255,255,0.02);
    border-color: #ffffff33;
  }
  #container-3 #steps-flow .how-step h3 { margin-top: 0; margin-bottom: 8px; font-size: 1.05em; font-weight: 700; }
  #container-3 #steps-flow .how-step p  { margin: 0; color: #ccc; font-weight: 400; }

  #container-3 #steps-flow .how-note {
    flex: 0 0 auto; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; padding: 10px; color: #ddd;
    font-style: italic; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  }
  #container-3 #steps-flow .how-note p { margin: 0; font-weight: 400; }
  #container-3 #steps-flow .arrow-mid { font-size: 18px; color: white; align-self: center; }

  /* Mobile flow */
  #container-3 #steps-flow-mobile { display: none; }
  #container-3 #steps-flow-mobile .arrow-down { font-size: 14px; color: white; margin: 8px 0; line-height: 1; user-select: none; }
  #container-3 #steps-flow-mobile .step-box {
    width: 100%; max-width: 320px; background: #00000091; border: 1px solid #0C0C0C; border-radius: 6px; padding: 13.8px 12px; color: white;
    box-shadow: 0 1px 5px rgba(0,0,0,.1); transition: box-shadow .3s ease, border-color .3s ease;
  }
  #container-3 #steps-flow-mobile .step-box:hover { box-shadow: 0 0 6px rgba(255,255,255,.04), 0 0 12px rgba(255,255,255,.02); border-color: #ffffff33; }
  #container-3 #steps-flow-mobile .step-box h3 { margin-top: 0; margin-bottom: 8px; font-size: 13.86px; font-weight: 700; }
  #container-3 #steps-flow-mobile .step-box p  { margin: 0; color: #ccc; font-weight: 400; }

  #container-3 #steps-flow-mobile .note-box {
    width: 100%; max-width: 280px; background: #1a1a1a; border: 1px solid #333; border-radius: 6px; padding: 10px; color: #ddd;
    font-style: italic; box-shadow: 0 1px 4px rgba(0,0,0,.15);
  }
  #container-3 #steps-flow-mobile .note-box p { margin: 0; font-weight: 400; }

  /* Interactive step 2 (mobile) */
  #container-3 #steps-flow-mobile .step-2-wrapper { display: flex; gap: 6px; width: 100%; max-width: 320px; }
  #container-3 #steps-flow-mobile .step-2-left  { min-width: 0; flex: 0 0 calc(80% - 3px); transition: flex-basis 260ms ease; overflow: hidden; position: relative; }
  #container-3 #steps-flow-mobile .step-2-right { flex: 0 0 calc(20% - 3px); transition: flex-basis 260ms ease; }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanding .step-2-left,
  #container-3 #steps-flow-mobile .step-2-wrapper.expanded  .step-2-left { flex-basis: calc(20% - 3px); }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanding .step-2-right,
  #container-3 #steps-flow-mobile .step-2-wrapper.expanded  .step-2-right { flex-basis: calc(80% - 3px); }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanded .step-2-right { pointer-events: none; cursor: default; }

  #container-3 #steps-flow-mobile .step-2-content { opacity: 1; transform: translateY(0); transition: opacity 220ms ease, transform 240ms ease, max-height 220ms ease; }
  #container-3 #steps-flow-mobile .step-2-content.revealing { opacity: 0; transform: translateY(6px); }
  #container-3 #steps-flow-mobile .step-2-plus {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.9);
    transition: opacity 200ms ease, transform 220ms ease; background: none; border: none; color: inherit; cursor: pointer; pointer-events: none;
  }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanding .step-2-content{ opacity: 0; transform: translateY(4px); max-height: 0; transition: none; }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanding .step-2-plus   { opacity: 1; transform: none; pointer-events: auto; transition: none; }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanded .step-2-plus,
  #container-3 #steps-flow-mobile .step-2-wrapper.collapsing .step-2-plus { pointer-events: auto; }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanded .step-2-content { opacity: 0; transform: translateY(6px); max-height: 0; }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanded .step-2-plus    { opacity: 1; transform: scale(1); }
  #container-3 #steps-flow-mobile .step-2-wrapper.collapsing .step-2-content{ opacity: 0; transform: translateY(6px); max-height: 0; }

  #container-3 #steps-flow-mobile .diamond-icon,
  #container-3 #steps-flow-mobile .reveal-content { transition: opacity 200ms ease, transform 220ms ease; }
  #container-3 #steps-flow-mobile .diamond-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 1; }
 /* Glow effect for diamond icon */
#container-3 #steps-flow-mobile .diamond-icon .icon-diamond {
  stroke: #e1e6ec; /* base stroke color */
  filter: drop-shadow(0 0 6px rgba(225, 230, 236, 0.6));
  transition: filter 0.25s ease;
}

#container-3 #steps-flow-mobile .diamond-icon .icon-diamond:hover {
  filter: drop-shadow(0 0 10px rgba(225, 230, 236, 0.9));
}
  #container-3 #steps-flow-mobile .reveal-content {
    position: static; opacity: 0; transform: translateY(6px); white-space: normal; overflow-wrap: anywhere; word-break: break-word; display: none;
  }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanded .reveal-content { opacity: 1; transform: translateY(0); display: block; padding-top: 5px; padding-bottom: 4px; transition-delay: 0ms; /* no hold */}
  #container-3 #steps-flow-mobile .reveal-content p {
  margin: 0;
  font-weight: 400;
  font-size: 0.95em; /* slightly smaller */
  line-height: 1.52; /* tiny nudge to keep balance */
  color: #ccc;
  }

  #container-3 #steps-flow-mobile .reveal-content h3 {
  margin: 0 0 8px;
  }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanded .diamond-icon {
  opacity: 0;
  transform: translateY(-2px);
  }
  #container-3 #steps-flow-mobile .step-2-wrapper.expanding .diamond-icon {
  opacity: 0;
  transform: translateY(-2px);
  transition-delay: 0ms; /* start now */
  }


  #container-3 #steps-flow-mobile .extra-box {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.35);
    border-radius: 10px; padding: 12px; color: #e1e6ec; font-size: 0.92em;
    background: linear-gradient(120deg, rgba(28,28,28,.94), rgba(0,0,0,.9));
    background-size: 200% 200%; animation: rotateGradient 30s ease infinite; cursor: pointer; position: relative; overflow: hidden; display: block;
  }

  /* Desktop-only widths and visibility tweaks */
  @media (min-width: 768px) {
    #container-3 #steps-flow .how-step { max-width: 220px; }
    #container-3 #steps-flow .how-note { max-width: 200px; flex: 0 0 170px; }

    #container-3 #gs-blurb .mobile-only { display: none; }
    #container-3 #gs-blurb-mobile      { display: none !important; }
    #container-3 #mobile-fade-divider  { display: none !important; }
  }
/* ===== After container 3 (no-visual-change refactor) ===== */
#after-c3 { margin: 0 !important; padding: 0 !important; }
#after-c3 .hero-headline {
  margin: 0 !important;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 2.625rem;   /* desktop default */
  line-height: 1.125;
  letter-spacing: -0.1rem;
  color: #E1E6EC;
  text-align: center;
  max-width: 100%;
}
#after-c3 .hero-headline .accent { color: var(--accent); }

#after-c3 .subhead-desktop {
  margin: 0 !important;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.125;
  letter-spacing: 0;
  color: var(--muted);
  text-align: center;
  max-width: 100%;
}
/* Reuse existing desktop-only convention instead of a new .pc-only */
@media (max-width: 768px) {
  #after-c3 .desktop-only { display: none; }
}

  /* === Container 3 — all mobile rules merged === */
@media (max-width: 768px) {
  /* Blurb variants */
  #container-3 #gs-blurb {
    max-width: 90% !important;
    margin-top: 10px !important;
    font-size: 15px !important;  /* from type-size block */
    line-height: 1.35;           /* from type-size block */
  }
  #container-3 #gs-blurb .desktop-only { display: none !important; }
  #container-3 #gs-blurb .mobile-only  { display: inline !important; }
  #container-3 #gs-blurb-mobile {
    max-width: 90% !important;
    margin-top: 10px !important;
    display: block !important;
    font-size: 12px !important;  /* from type-size block */
    line-height: 1.4;            /* from type-size block */
  }

  /* Slideshow tweaks */
  #container-3 .slideshow-wrapper { margin: 30px auto; }
  #container-3 .slideshow-frame {
    padding-left:  calc(clamp(12px, 6vw, 24px) + env(safe-area-inset-left));
    padding-right: calc(clamp(12px, 6vw, 24px) + env(safe-area-inset-right));
    overflow: hidden;
  }
  #container-3 .slide.left  { transform: translateX(-30%) scale(.82); opacity: .6; z-index: 1; }
  #container-3 .slide.right { transform: translateX(30%)  scale(.82);  opacity: .6; z-index: 1; }
  #container-3 .arrow       { font-size: 24px; }
  #container-3 .arrow-left  { left:  clamp(6px, 3vw, 16px); }
  #container-3 .arrow-right { right: clamp(6px, 3vw, 16px); }

  /* Section headline text swap */
  #container-3 .responsive-text {
    font-size: 28px !important; /* keep stricter override from type-size block */
    line-height: 1.12;
    margin-bottom: 10px;
  }
  #container-3 .responsive-text::before { content: "Here’s how I work with you:"; display: block; }
  #container-3 .responsive-text span { display: none; }

  /* Hide desktop-only bits on mobile */
  #container-3 #hero-blurb { display: none !important; }
  #container-3 #no-select  { display: none !important; }
  #container-3 #steps-flow { display: none !important; }

  /* Mobile flow container */
  #container-3 #steps-flow-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 48px;
    font-size: 0.825em;
    user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  }

  /* Turn stack into flex + exact child order */
  #container-3 .whoami-block { display: flex; flex-direction: column; }
  #container-3 .whoami-block > h2.whoami            { order: 0; }
  #container-3 .whoami-block > #gs-blurb            { order: 1 !important; }
  #container-3 .whoami-block > .slideshow-wrapper   { order: 2 !important; }
  #container-3 .whoami-block > #gs-blurb-mobile     { order: 3; }
  #container-3 .whoami-block > #mobile-fade-divider { order: 4; }
  #container-3 .whoami-block > .responsive-text     { order: 5; }
  #container-3 .whoami-block > #steps-flow-mobile   { order: 6; }

  /* Who am I? heading size */
  #container-3 h2.whoami {
    font-size: 35px !important;
    line-height: 1.15;
  }
}

/* Keep this separate — accessibility preference */
@media (prefers-reduced-motion: reduce) {
  #container-3 * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}





  /* ===== Container 4 ===== */
  :is(#container-4, .container-4) {
    width: 48%;
    margin: 1.125rem auto;
    padding: 18.333px 26.666px;
    border: 1px solid #0c0c0c;
    border-radius: 0.375rem;
    background-color: #00000091;
    box-sizing: border-box;
  }
  @media (max-width: 768px) {
    :is(#container-4, .container-4) { width: 100%; }
  }

  /* Wistia placeholder blur while component loads */
  #container-4 wistia-player[media-id='w7pimxxfse']:not(:defined) {
    background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/w7pimxxfse/swatch');
    display: block;
    filter: blur(5px);
    padding-top: 56.25%;
  }

  /* Testimonial text */
  #container-4 .testimonial {
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
    color: grey;
    font-size: 1rem;
    line-height: 0.875;
    letter-spacing: 0px;
    max-width: 35.5rem;
    margin: 1rem auto 1rem 0 !important;
    text-align: left !important;
  }
  @media (max-width: 600px) {
    #container-4 .testimonial { font-size: 0.9rem; line-height: 0.95; }
  }

  /* Signature line */
  #container-4 .sf-text {
    font-family: 'SF Pro', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: #e1e6ec;
    text-align: left;
    letter-spacing: -0.8px;
  }
  @media screen and (min-width: 1024px) {
    #container-4 .sf-text { letter-spacing: -0.2px; }
  }

  /* Badge */
  #container-4 .alex-text {
    font-size: 0.5rem;
    font-family: 'SF Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 200;
    color: #e1e6ec;
    letter-spacing: -0.8px;
    margin: auto;
    text-align: left !important;
    display: block;
    width: 100%;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  @media screen and (min-width: 1024px) {
    #container-4 .alex-text { letter-spacing: -0.2px; }
  }
  /* Make the last page flush with the bottom */
.page--no-pad {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 1024px) {
  #container-6 .headline::after { content: none !important; }
}

@media (max-width: 768px) {
  /* container-2 */
  #container-2, .container-2 { padding: 0 !important; margin-top: 2rem !important; }
  #container-2 .wrapper, #container-2 .inner { padding-left: 0 !important; padding-right: 0 !important; }

  /* after-c3 */
  #after-c3 #hero-headline { font-size: 1.9rem !important; }

  /* container-5 */
  :is(#container-5, .container-5) .faq-section { padding-left: 0 !important; padding-right: 0 !important; }
  :is(#container-5, .container-5) .questions-title { margin-bottom: 30px !important; font-size: 1.75rem !important; line-height: 1.1; }

  /* container-6 */
  #container-6 .headline { font-size: 29px !important; line-height: 0.9 !important; }

  /* container-4 text */
  #container-4 .testimonial { font-size: 0.8rem; line-height: 0.95; }
  #container-4 .sf-text { font-size: 0.6rem; letter-spacing: -0.6px; }
}


/* ======================== CONTAINER #5 ======================== */
/* keep the section in-bounds and prevent horizontal spill */
#container-5 {
  display: block;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* if your .full-bleed utility uses negative margins, neutralize them here */
#container-5.full-bleed { 
  margin-inline: 0 !important; 
  width: 100% !important; 
}

/* center/constrain inner content */
#container-5 .inner-wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
  padding-top: 22px;   /* vertical rhythm */
  padding-bottom: 22px;
}

/* ensure no rogue transforms push content off-screen */
#container-5,
#container-5 .inner-wrap,
#container-5 .faq-section {
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

/* heading */
#container-5 .questions-title {
  margin: 1.375rem auto;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 1.125;
  letter-spacing: -0.1rem;
  color: #E1E6EC;
  text-align: center;
  max-width: 100%;
}

#container-5 a { 
  text-decoration: none; 
  color: #e1e6ec; 
}

/* accordion container */
#container-5 .accordion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0,0,0,0.55);
  color: #e1e6ec;
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 10px;
  font-weight: 500;
  border-radius: 10px;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
  user-select: none;
  overflow: hidden;
  flex-direction: column;
  box-sizing: border-box;
}

#container-5 .accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#container-5 .question {
  line-height: 1;
  font-size: 1.1rem;
  position: relative;
  top: 1.4px;
}

#container-5 .icon {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1;
  position: relative;
  transition: transform 0.23s ease-out;
  margin-left: 10px;
  flex-shrink: 0;
  transform: rotate(0deg);
}
#container-5 .icon.rotate { 
  transform: rotate(180deg); 
}

#container-5 .extra-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.25,0.8,0.5,1);
  width: 100%;
}

#container-5 .inner {
  padding-top: 20px;
  font-size: 0.9rem;
  font-weight: 400;
  text-align: left;
  color: #e1e6ec;
  line-height: 1.4;
  box-sizing: border-box;
}

#container-5 .bullet-list {
  list-style-type: disc;
  padding-left: 1.5em;
}
@media (max-width: 600px) {
  #container-5 .accordion {
    max-width: 100%;
    margin: 0 auto 12px;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.3s ease;
    background: linear-gradient(120deg, rgba(28,28,28,0.94), rgba(0,0,0,0.9));
    background-size: 200% 200%;
    animation: c5RotateGradient 30s ease infinite;
    user-select: none;
  }

  /* Slight background variation per item (kept exactly as provided) */
  #container-5 .accordion:nth-of-type(2) { 
    background: linear-gradient(160deg, rgba(27,27,27,0.93), rgba(0,0,0,0.89)); 
    animation: c5RotateGradient 35s ease infinite; 
  }
  #container-5 .accordion:nth-of-type(3) { 
    background: linear-gradient(200deg, rgba(26,26,26,0.92), rgba(0,0,0,0.88)); 
    animation: c5RotateGradient 32s ease infinite; 
  }
  #container-5 .accordion:nth-of-type(4) { 
    background: linear-gradient(135deg, rgba(25,25,25,0.93), rgba(0,0,0,0.89)); 
    animation: c5RotateGradient 34s ease infinite; 
  }
  #container-5 .accordion:nth-of-type(5) { 
    background: linear-gradient(180deg, rgba(26,26,26,0.92), rgba(0,0,0,0.87)); 
    animation: c5RotateGradient 31s ease infinite; 
  }
  #container-5 .accordion:nth-of-type(6) { 
    background: linear-gradient(100deg, rgba(25,25,25,0.93), rgba(0,0,0,0.88)); 
    animation: c5RotateGradient 36s ease infinite; 
  }
  #container-5 .accordion:nth-of-type(7) { 
    background: linear-gradient(150deg, rgba(24,24,24,0.92), rgba(0,0,0,0.89)); 
    animation: c5RotateGradient 33s ease infinite; 
  }

  #container-5 .accordion-header { 
    position: relative; 
    justify-content: center; 
    padding-right: 6px; 
  }
  #container-5 .accordion-header .question { 
    flex: 1; 
    text-align: center; 
  }
  #container-5 .accordion-header .icon { 
    display: none !important; 
  }
}
/* ======================== AFTER CONTAINER #5 ======================== */
#after-c5 .fade-divider {
  display: block;
  width: 85%;
  height: 1px;
  margin: 32px auto 55px;
  background: linear-gradient(
    90deg,
    rgba(225, 230, 236, 0) 0%,
    #e1e6ec 20%,
    #e1e6ec 80%,
    rgba(225, 230, 236, 0) 100%
  );
}

/* Headline (desktop only) — matches previous inline styles */
#after-c5 .after-c5-headline {
  margin: 0.875rem auto;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 0.96;
  letter-spacing: 0;
  color: #e1e6ec;
  text-align: center;
  max-width: 78%;
}
#after-c5 .after-c5-emph { font-style: italic; font-weight: 700; }
#after-c5 .after-c5-emph-yellow { color: #ffd510; }

/* Logo */
#after-c5 .after-c5-logo-wrap { text-align: center; }
#after-c5 .after-c5-logo {
  position: relative;
  display: inline-block;
  inline-size: 3.5%;      /* same visual size as before */
  aspect-ratio: 1 / 1;    /* keep it square */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
#after-c5 .after-c5-logo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
#after-c5 .after-c5-guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
  pointer-events: auto;  /* captures right-clicks etc */
}

/* Hide the desktop-only bits on small screens */
@media (max-width: 768px) {
  #after-c5 .desktop-only { display: none !important; }
}

/* Let wrapper expand naturally */
  #book-your-call {
    min-width: 320px;
  }

  /* Force the Calendly iframe tall enough to show full description */
  .calendly-inline-widget iframe {
    width: 100% !important;
    height: 820px !important; /* adjust until inner scroll disappears */
    display: block;
    border: none;
  }

  @media (max-width: 768px) {
    .calendly-inline-widget iframe {
      height: 1700px !important;
    }
  }
  /* Container 1 — opt out of full-bleed math */
  #container-1.full-bleed {
    left: auto;           /* cancel the 50% shift */
    width: 100%;          /* normal flow width */
    margin-left: 0;       /* cancel negative margins */
    margin-right: 0;
  }

  /* Keep background on the section itself */
  #container-1 {
    padding: 0; 
    background: var(--bg-00080F); /* matches Carrd */
    text-align: initial; 
  }

  #container-1.ph-auto { padding-inline: 0; }

  #container-1 > .content-100 {
     display: flex;
    flex-direction: column;
    align-items: center;   /* true horizontal centering */
    justify-content: flex-start;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
    text-align: center;    /* keep text centered, but flex does the heavy lifting */
  }

  #container-1 h1 { margin-top: 0; }
  #container-1 .scroll-button { display: inline-block; }

 /* Gradient motion (shared) */
  @keyframes rotateGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

/* keyframes live outside media to keep code organized */
@keyframes c5RotateGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}