/* ============================================================
   Conversion Engine homepage prototype
   Stylesheet: ce26.css
   Every class is prefixed ce26- and maps to a Webflow class.
   Variants use "is-" combo classes on the same element.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens (Webflow Variables, one to one)
   ------------------------------------------------------------ */
:root {
  /* Color */
  --ce26-navy: #0A1829;
  --ce26-navy-2: #111F33;
  --ce26-navy-3: #1A2A40;
  --ce26-mint: #00F0B5;
  --ce26-mint-2: #7FF7D9;
  --ce26-mint-3: #BFFBEC;
  --ce26-pink: #FD507E;
  --ce26-pink-2: #FDA7BE;
  --ce26-pink-3: #FED3DE;
  --ce26-ice: #E9F0FF;
  --ce26-white: #FFFFFF;
  --ce26-text: #3A4658;
  --ce26-muted: #6B7685;
  --ce26-border: #D8DEE8;

  /* Alpha helpers (same hues, used for glows, grids and dimmed text on dark) */
  --ce26-white-60: rgba(255, 255, 255, 0.6);
  --ce26-white-72: rgba(255, 255, 255, 0.72);
  --ce26-white-16: rgba(255, 255, 255, 0.16);
  --ce26-white-08: rgba(255, 255, 255, 0.08);
  --ce26-ice-25: rgba(233, 240, 255, 0.25);
  --ce26-ice-06: rgba(233, 240, 255, 0.06);
  --ce26-mint-glow: rgba(0, 240, 181, 0.22);
  --ce26-mint-glow-soft: rgba(0, 240, 181, 0.10);
  --ce26-pink-glow: rgba(253, 80, 126, 0.22);
  --ce26-navy-90: rgba(10, 24, 41, 0.9);
  --ce26-navy-shadow: rgba(10, 24, 41, 0.18);
  --ce26-navy-shadow-soft: rgba(10, 24, 41, 0.10);

  /* Type */
  --ce26-font-display: "Archivo Black", "Archivo", sans-serif;
  --ce26-font-body: "Archivo", sans-serif;
  --ce26-font-serif: "Instrument Serif", Georgia, serif;

  --ce26-size-hero: 4.75rem;      /* 76px */
  --ce26-size-h2: 3.25rem;        /* 52px */
  --ce26-size-h2-sm: 3rem;        /* 48px */
  --ce26-size-h3: 1.5rem;         /* 24px */
  --ce26-size-body: 1.125rem;     /* 18px */
  --ce26-size-body-sm: 1rem;      /* 16px */
  --ce26-size-small: 0.9375rem;   /* 15px */
  --ce26-size-eyebrow: 0.8125rem; /* 13px */
  --ce26-size-caption: 0.8125rem;

  /* Shape and depth */
  --ce26-radius: 16px;
  --ce26-radius-pill: 999px;
  --ce26-shadow-float: 0 18px 40px var(--ce26-navy-shadow);
  --ce26-shadow-float-soft: 0 10px 24px var(--ce26-navy-shadow-soft);

  /* Layout */
  --ce26-container: 1200px;
  --ce26-gutter: 2.5rem;
  --ce26-section-pad: 7.5rem;     /* 120px */
  --ce26-section-pad-sm: 4.5rem;  /* 72px */

  /* Brand DNA strip */
  --ce26-dna-height: 14px;
  --ce26-dna-height-mini: 6px;
  --ce26-dna-gap: 2px;

  /* Nav */
  --ce26-nav-height: 5.5rem;
}

/* ------------------------------------------------------------
   2. Reset and base typography (the only bare-tag styles)
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--ce26-font-body);
  font-size: var(--ce26-size-body);
  line-height: 1.6;
  color: var(--ce26-text);
  background: var(--ce26-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
fieldset { border: 0; min-width: 0; }
svg { display: block; }

/* Focus: 2px mint outline with 2px offset on dark, 2px navy on light */
:focus-visible { outline: 2px solid var(--ce26-navy); outline-offset: 2px; }
.is-dark :focus-visible,
.ce26-nav :focus-visible,
.ce26-menu :focus-visible,
.ce26-footer :focus-visible,
.ce26-card-navy :focus-visible,
.ce26-form :focus-visible { outline-color: var(--ce26-mint); }

/* Skip link */
.ce26-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--ce26-mint); color: var(--ce26-navy);
  padding: 0.75rem 1.25rem; border-radius: var(--ce26-radius-pill); font-weight: 600;
}
.ce26-skip:focus { top: 1rem; }

/* ------------------------------------------------------------
   3. Layout primitives
   ------------------------------------------------------------ */
.ce26-section {
  position: relative;
  padding-top: var(--ce26-section-pad);
  padding-bottom: var(--ce26-section-pad);
  background: var(--ce26-white);
  color: var(--ce26-text);
  overflow: hidden;
}
.ce26-section.is-dark { background: var(--ce26-navy); color: var(--ce26-white-72); }
.ce26-section.is-ice { background: var(--ce26-ice); }
.ce26-section.is-tight { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.ce26-section.is-flush-top { padding-top: 0; }
.ce26-section.is-visible { overflow: visible; }

.ce26-container {
  width: 100%;
  max-width: var(--ce26-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ce26-gutter);
  padding-right: var(--ce26-gutter);
  position: relative;
}

.ce26-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ce26-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ce26-split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
.ce26-split.is-middle { align-items: center; }

/* Section head: eyebrow + headline + optional side note */
.ce26-head { margin-bottom: 3.5rem; }
.ce26-head.is-center { text-align: center; }
.ce26-head.is-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: end; }
.ce26-head.is-row-between { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.ce26-head.is-compact { margin-bottom: 2.5rem; }
.ce26-head.is-center .ce26-sub { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------
   4. Typography classes
   ------------------------------------------------------------ */
.ce26-eyebrow {
  display: block;
  font-family: var(--ce26-font-body);
  font-weight: 600;
  font-size: var(--ce26-size-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ce26-pink);
  margin-bottom: 1.25rem;
}
.ce26-eyebrow.is-mint { color: var(--ce26-mint); }
.ce26-eyebrow.is-muted { color: var(--ce26-muted); }
.ce26-eyebrow.is-muted-dark { color: var(--ce26-white-60); }
.ce26-eyebrow.is-white { color: var(--ce26-white); }
.ce26-eyebrow.is-small { font-size: 0.6875rem; letter-spacing: 0.12em; margin-bottom: 0.5rem; }
.ce26-eyebrow.is-inline { display: inline-block; margin-bottom: 0; }

.ce26-h1 {
  font-family: var(--ce26-font-display);
  font-weight: 400;
  font-size: var(--ce26-size-hero);
  line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--ce26-white);
  margin-bottom: 1.75rem;
}
.ce26-h2 {
  font-family: var(--ce26-font-display);
  font-weight: 400;
  font-size: var(--ce26-size-h2);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ce26-navy);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.ce26-h2.is-sm { font-size: var(--ce26-size-h2-sm); }
.ce26-h2.is-white, .is-dark .ce26-h2 { color: var(--ce26-white); }
.ce26-h2.is-no-margin { margin-bottom: 0; }
.ce26-h3 {
  font-family: var(--ce26-font-body);
  font-weight: 700;
  font-size: var(--ce26-size-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ce26-navy);
  margin-bottom: 0.75rem;
}
.ce26-h3.is-white { color: var(--ce26-white); }
.ce26-h3.is-lg { font-size: 1.75rem; }
.ce26-h3.is-no-margin { margin-bottom: 0; }

/* The serif accent phrase inside every headline */
.ce26-serif {
  font-family: var(--ce26-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.12em;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--ce26-navy);
}
.is-dark .ce26-serif, .ce26-serif.is-mint { color: var(--ce26-mint); }
.ce26-serif.is-pink { color: var(--ce26-pink); }
.ce26-serif.is-white { color: var(--ce26-white); }
.ce26-serif.is-upright { font-style: normal; }

/* Headline line masks: each chunk is clipped and rises in */
.ce26-line { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; padding-right: 0.08em; margin-right: -0.08em; }
.ce26-line-inner { display: inline-block; }

.ce26-sub {
  font-size: var(--ce26-size-body);
  line-height: 1.6;
  max-width: 34rem;
  color: var(--ce26-text);
}
.is-dark .ce26-sub { color: var(--ce26-white-72); }
.ce26-sub.is-lg { font-size: 1.25rem; }
.ce26-sub.is-wide { max-width: 44rem; }

.ce26-body { font-size: var(--ce26-size-body); line-height: 1.6; }
.ce26-body.is-sm { font-size: var(--ce26-size-small); }
.ce26-body.is-dim { color: var(--ce26-white-72); }
.ce26-body.is-muted { color: var(--ce26-muted); }
.ce26-body.is-center { text-align: center; }
.ce26-body.is-strong { font-weight: 700; color: var(--ce26-navy); }
.ce26-close {
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--ce26-navy);
  max-width: 40rem;
}
.ce26-close.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.ce26-close.is-lg { font-size: 1.25rem; }
.ce26-serif-line {
  font-family: var(--ce26-font-serif);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ce26-navy);
}
.is-dark .ce26-serif-line, .ce26-serif-line.is-white { color: var(--ce26-white); }
.ce26-serif-line.is-mint { color: var(--ce26-mint); }
.ce26-serif-line.is-lg { font-size: 1.75rem; }
.ce26-serif-line.is-sm { font-size: 1.25rem; }
.ce26-serif-line.is-dim { color: var(--ce26-white-72); }
.ce26-caption { font-size: var(--ce26-size-caption); color: var(--ce26-muted); line-height: 1.5; }
.ce26-caption.is-dark { color: var(--ce26-white-60); }
.ce26-caption.is-center { text-align: center; }

/* Text link with an underline that draws in from the left */
.ce26-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--ce26-pink);
  padding-bottom: 2px;
}
.ce26-link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ce26-link:hover::after, .ce26-link:focus-visible::after { transform: scaleX(1); }
.ce26-link.is-mint { color: var(--ce26-mint); }
.ce26-link.is-sm { font-size: var(--ce26-size-small); }
.ce26-link-arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.ce26-link:hover .ce26-link-arrow { transform: translateX(3px); }

/* ------------------------------------------------------------
   5. Buttons and pills
   ------------------------------------------------------------ */
.ce26-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border-radius: var(--ce26-radius-pill);
  background: var(--ce26-pink);
  color: var(--ce26-navy);
  font-weight: 600;
  font-size: var(--ce26-size-body-sm);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s;
  will-change: transform;
}
/* Fill sweep on hover: a lighter pink disc grows from the left */
.ce26-btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--ce26-pink-2);
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ce26-btn:hover::before, .ce26-btn:focus-visible::before { transform: translateX(0); }
.ce26-btn-label { position: relative; z-index: 1; }
.ce26-btn.is-secondary { background: transparent; color: var(--ce26-navy); border: 1px solid var(--ce26-navy); }
.ce26-btn.is-secondary::before { background: var(--ce26-navy); }
.ce26-btn.is-secondary:hover, .ce26-btn.is-secondary:focus-visible { color: var(--ce26-white); }
.ce26-btn.is-small { min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }
.ce26-btn.is-block { width: 100%; }

.ce26-text-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.75rem; padding: 0 0.5rem;
  font-weight: 600; font-size: var(--ce26-size-small);
  color: var(--ce26-white-72);
  border-radius: var(--ce26-radius-pill);
  transition: color 0.2s;
}
.ce26-text-btn:hover { color: var(--ce26-white); }

.ce26-tag {
  display: inline-flex; align-items: center;
  min-height: 2.25rem; padding: 0 0.9rem;
  border-radius: var(--ce26-radius-pill);
  background: var(--ce26-mint-3);
  color: var(--ce26-navy);
  font-weight: 600; font-size: 0.875rem; line-height: 1;
}
.ce26-tag.is-lg { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.9375rem; }
.ce26-tag.is-solid { background: var(--ce26-mint); }
.ce26-tag-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }

/* ------------------------------------------------------------
   6. Cards
   ------------------------------------------------------------ */
.ce26-card {
  position: relative;
  background: var(--ce26-white);
  border: 1px solid var(--ce26-border);
  border-radius: var(--ce26-radius);
  padding: 2rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s;
  will-change: transform;
}
.ce26-card:hover { transform: translateY(-4px); border-color: var(--ce26-navy-3); }
.ce26-card.is-ice { background: var(--ce26-ice); border-color: var(--ce26-ice); }
.ce26-card.is-ice:hover { border-color: var(--ce26-border); }
.ce26-card.is-static:hover { transform: none; }
.ce26-card.is-flat { padding: 0; overflow: hidden; }
.ce26-card-navy {
  position: relative;
  background: var(--ce26-navy);
  border: 1px solid var(--ce26-navy-3);
  border-radius: var(--ce26-radius);
  padding: 2rem;
  color: var(--ce26-white-72);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s;
}
.ce26-card-navy:hover { transform: translateY(-4px); border-color: var(--ce26-mint); }
.ce26-card-navy.is-raised { background: var(--ce26-navy-2); }
.ce26-card-navy.is-static:hover { transform: none; border-color: var(--ce26-navy-3); }
.ce26-card-mint { background: var(--ce26-mint-3); border-radius: var(--ce26-radius); padding: 3.5rem 4rem; }
.ce26-card-num { display: block; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--ce26-pink); margin-bottom: 1rem; }
.ce26-card-num.is-mint { color: var(--ce26-mint); }

/* ------------------------------------------------------------
   7. Brand DNA strip (signature mark)
   Flex row of segment divs. Colors always mean the same gene.
   ------------------------------------------------------------ */
.ce26-dna {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ce26-dna-gap);
  width: 100%;
}
.ce26-dna-strand { display: flex; width: 100%; height: var(--ce26-dna-height); gap: 2px; }
.ce26-dna-strand.is-complement { height: calc(var(--ce26-dna-height) * 0.2); min-height: 2px; }
.ce26-dna-seg {
  flex-grow: 1; flex-basis: 0; min-width: 2px;
  border-radius: 2px;
  background: var(--ce26-navy-3);
  transform-origin: left center;
}
.ce26-dna-seg.is-w1 { flex-grow: 1; }
.ce26-dna-seg.is-w2 { flex-grow: 2; }
.ce26-dna-seg.is-w3 { flex-grow: 3; }
.ce26-dna-seg.is-w4 { flex-grow: 4; }
.ce26-dna-seg.is-feeling { background: var(--ce26-pink); }
.ce26-dna-seg.is-selling { background: var(--ce26-mint); }
.ce26-dna-seg.is-desire { background: var(--ce26-pink-2); }
.ce26-dna-seg.is-spacer { background: var(--ce26-navy-3); }
/* On light backgrounds spacers use the border color */
.ce26-dna.is-light .ce26-dna-seg.is-spacer { background: var(--ce26-border); }

/* Mini: 6px, no second strand */
.ce26-dna.is-mini { --ce26-dna-height: var(--ce26-dna-height-mini); }
.ce26-dna.is-mini .ce26-dna-strand.is-complement { display: none; }
.ce26-dna.is-mini .ce26-dna-seg { border-radius: 1px; }

/* Logic only: only the selling point segments are filled */
.ce26-dna.is-logic .ce26-dna-seg.is-feeling,
.ce26-dna.is-logic .ce26-dna-seg.is-desire {
  background: transparent;
  border: 1px dashed var(--ce26-pink-2);
  border-radius: 2px;
}
.ce26-dna.is-logic .ce26-dna-seg.is-feeling { border-color: var(--ce26-pink); }
/* Filled when JS adds is-complete (the closing-line moment in The insight) */
.ce26-dna.is-logic.is-complete .ce26-dna-seg.is-feeling { background: var(--ce26-pink); border-color: transparent; }
.ce26-dna.is-logic.is-complete .ce26-dna-seg.is-desire { background: var(--ce26-pink-2); border-color: transparent; }
.ce26-dna-fill {
  position: absolute; inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
}
.ce26-dna-seg.is-feeling .ce26-dna-fill { background: var(--ce26-pink); }
.ce26-dna-seg.is-desire .ce26-dna-fill { background: var(--ce26-pink-2); }
.ce26-dna.is-logic .ce26-dna-seg { position: relative; overflow: hidden; }

/* Partly read: the left 40 percent is filled, the rest shows as spacers */
.ce26-dna.is-partial .ce26-dna-seg.is-unread { background: var(--ce26-navy-3); }
.ce26-dna.is-partial.is-light .ce26-dna-seg.is-unread { background: var(--ce26-border); }
.ce26-dna.is-partial .ce26-dna-head { left: 40.7%; opacity: 1; }

/* Vertical: strands run top to bottom */
.ce26-dna.is-vertical {
  flex-direction: row;
  width: auto;
  height: 100%;
  align-self: stretch;
}
.ce26-dna.is-vertical .ce26-dna-strand { flex-direction: column; width: var(--ce26-dna-height); height: 100%; }
.ce26-dna.is-vertical .ce26-dna-strand.is-complement { width: calc(var(--ce26-dna-height) * 0.2); min-width: 2px; height: 100%; }
.ce26-dna.is-vertical .ce26-dna-seg { transform-origin: center top; min-width: 0; min-height: 2px; }
.ce26-dna.is-vertical .ce26-dna-head { top: 0; left: -6px; width: calc(100% + 12px); height: 1px; }
.ce26-dna.is-vertical .ce26-dna-head::before { left: 50%; top: -4px; transform: translateX(-50%) rotate(90deg); }

/* Read head: a 1px line with a small triangle on top */
.ce26-dna-head {
  position: absolute;
  top: -6px;
  left: 0;
  width: 1px;
  height: calc(100% + 12px);
  background: var(--ce26-white);
  opacity: 0;
  pointer-events: none;
}
.ce26-dna.is-light .ce26-dna-head { background: var(--ce26-navy); }
.ce26-dna-head::before {
  content: "";
  position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  color: var(--ce26-white);
}
.ce26-dna.is-light .ce26-dna-head::before { color: var(--ce26-navy); }

/* Placement helpers */
.ce26-dna-wrap { position: relative; }
.ce26-dna-wrap.is-center { max-width: 30rem; margin: 2.5rem auto 0; }
.ce26-dna-wrap.is-card-top { position: absolute; top: 0; left: 1.5rem; right: 1.5rem; }
.ce26-dna-wrap.is-card-bottom { margin-top: 1.5rem; }
.ce26-dna-wrap.is-edge { padding-left: 0; padding-right: 0; }

/* ------------------------------------------------------------
   8. Nav
   ------------------------------------------------------------ */
.ce26-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--ce26-nav-height);
  display: flex; align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s;
}
.ce26-nav.is-scrolled {
  background: var(--ce26-navy-90);
  border-bottom-color: var(--ce26-navy-3);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.ce26-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ce26-nav-logo { display: block; width: 168px; }
.ce26-nav-logo-img { width: 168px; height: auto; }
.ce26-nav-links { display: flex; align-items: center; gap: 2rem; }
.ce26-nav-link {
  position: relative;
  color: var(--ce26-white-72);
  font-weight: 500; font-size: var(--ce26-size-small);
  padding: 0.5rem 0;
  transition: color 0.25s;
}
.ce26-nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--ce26-mint); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ce26-nav-link:hover, .ce26-nav-link.is-active { color: var(--ce26-white); }
.ce26-nav-link:hover::after, .ce26-nav-link.is-active::after { transform: scaleX(1); }
.ce26-nav-cta { display: flex; align-items: center; gap: 1rem; }
.ce26-nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: var(--ce26-radius-pill);
}
.ce26-nav-toggle-bar { display: block; width: 22px; height: 2px; background: var(--ce26-white); border-radius: 1px; transition: transform 0.3s, opacity 0.3s; }
.ce26-nav-toggle-bar + .ce26-nav-toggle-bar { margin-top: 5px; }
.ce26-nav-toggle.is-open .ce26-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ce26-nav-toggle.is-open .ce26-nav-toggle-bar:nth-child(2) { opacity: 0; }
.ce26-nav-toggle.is-open .ce26-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen mobile menu */
.ce26-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--ce26-navy);
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 1.5rem 2.5rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}
.ce26-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s, visibility 0s; }
.ce26-menu-links { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 2.5rem; }
.ce26-menu-link {
  display: block; padding: 0.75rem 0;
  font-family: var(--ce26-font-display);
  font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ce26-white);
}
.ce26-menu-link:hover { color: var(--ce26-mint); }

/* ------------------------------------------------------------
   9. Hero
   ------------------------------------------------------------ */
.ce26-hero {
  padding-top: calc(var(--ce26-nav-height) + 4.5rem);
  padding-bottom: 3.5rem;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.ce26-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: center; flex: 1; }
.ce26-hero-grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(var(--ce26-ice-06) 1px, transparent 1px), linear-gradient(90deg, var(--ce26-ice-06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
  mask-image: radial-gradient(ellipse at 50% 40%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 80%);
  pointer-events: none;
}
.ce26-hero-glow {
  position: absolute; z-index: 0;
  width: 52rem; height: 52rem; right: -14rem; top: -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ce26-mint-glow) 0%, var(--ce26-mint-glow-soft) 30%, transparent 65%);
  pointer-events: none;
  will-change: transform;
}
.ce26-hero-copy { position: relative; z-index: 2; max-width: 42rem; }
.ce26-hero-sub { font-size: 1.25rem; line-height: 1.55; color: var(--ce26-white-72); margin-bottom: 2.25rem; max-width: 34rem; }

/* Decoded ad */
.ce26-decoded { position: relative; z-index: 1; width: 100%; max-width: 400px; margin-left: auto; }
.ce26-decoded-stage { position: relative; perspective: 1200px; }
.ce26-decoded-frame {
  position: relative;
  border-radius: var(--ce26-radius);
  overflow: hidden;
  background: var(--ce26-navy-2);
  transform-style: preserve-3d;
  will-change: transform;
}
.ce26-decoded-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.ce26-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--ce26-mint);
  box-shadow: 0 0 18px 2px var(--ce26-mint);
  opacity: 0;
  pointer-events: none;
}
.ce26-anchor {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--ce26-pink);
  border: 2px solid var(--ce26-white);
  z-index: 3;
}
.ce26-anchor.is-feeling { background: var(--ce26-pink); }
.ce26-anchor.is-selling { background: var(--ce26-mint); }
.ce26-anchor.is-desire { background: var(--ce26-pink-2); }
.ce26-anchor-pulse { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; color: inherit; }
.ce26-anchor.is-feeling .ce26-anchor-pulse { color: var(--ce26-pink); }
.ce26-anchor.is-selling .ce26-anchor-pulse { color: var(--ce26-mint); }
.ce26-anchor.is-desire .ce26-anchor-pulse { color: var(--ce26-pink-2); }
.ce26-leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.ce26-leader { stroke: var(--ce26-white); stroke-width: 1; fill: none; opacity: 0.9; vector-effect: non-scaling-stroke; }

.ce26-callout {
  position: absolute; z-index: 4;
  width: 230px;
  background: var(--ce26-white);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  box-shadow: var(--ce26-shadow-float);
  color: var(--ce26-navy);
  will-change: transform;
}
.ce26-callout.is-feeling { left: -16%; top: 4%; }
.ce26-callout.is-selling { right: -22%; top: 58%; }
.ce26-callout.is-desire { left: -20%; top: 84%; }
.ce26-callout-eyebrow { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce26-pink); margin-bottom: 0.3rem; }
.ce26-callout-text { font-size: 0.875rem; line-height: 1.4; font-weight: 500; }
.ce26-gene-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ce26-pink); flex-shrink: 0; }
.ce26-gene-dot.is-feeling { background: var(--ce26-pink); }
.ce26-gene-dot.is-selling { background: var(--ce26-mint); }
.ce26-gene-dot.is-desire { background: var(--ce26-pink-2); }
.ce26-callout-list { display: none; }

.ce26-decoded-dna { margin-top: 1.25rem; }
.ce26-decoded-caption { margin-top: 1rem; }
.ce26-decoded-note { margin-top: 0.75rem; font-size: 1.25rem; }

.ce26-platforms { position: relative; z-index: 1; display: flex; align-items: center; gap: 2rem; margin-top: 4rem; }
.ce26-platforms-label { margin-bottom: 0; white-space: nowrap; }
.ce26-platforms-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ce26-platforms-scroll::-webkit-scrollbar { display: none; }
.ce26-platforms-img { width: auto; max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   10. Proof strip
   ------------------------------------------------------------ */
.ce26-proof-label { text-align: center; margin-bottom: 2.25rem; }
.ce26-logo-row { display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-bottom: 2.5rem; }
.ce26-logo { opacity: 0.6; transition: opacity 0.3s, transform 0.3s; }
.ce26-logo:hover { opacity: 1; }
.ce26-logo-img { height: 40px; width: auto; max-width: 110px; object-fit: contain; }
.ce26-stats { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.ce26-stat { display: flex; align-items: baseline; gap: 1rem; }
.ce26-stat-num { font-family: var(--ce26-font-display); font-size: 2rem; line-height: 1; color: var(--ce26-navy); letter-spacing: -0.01em; }
.ce26-stat-label { font-size: var(--ce26-size-small); color: var(--ce26-muted); }
.ce26-stat-strong { font-weight: 700; font-size: 1.375rem; color: var(--ce26-navy); letter-spacing: -0.01em; }
.ce26-divider { width: 1px; height: 2.5rem; background: var(--ce26-border); }

/* ------------------------------------------------------------
   11. The insight
   ------------------------------------------------------------ */
.ce26-insight-body { max-width: 36rem; margin: 0 auto 1.75rem; text-align: center; }
.ce26-word { display: inline-block; }
.ce26-insight-strip { max-width: 30rem; margin: 2.5rem auto 0; }

/* ------------------------------------------------------------
   12. What you've tried
   ------------------------------------------------------------ */
.ce26-tried-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
.ce26-tried-card { padding: 1.5rem 1.5rem 1.75rem; }
.ce26-tried-card.is-way { padding-top: 2rem; }
.ce26-tried-body { font-size: var(--ce26-size-small); line-height: 1.6; }

/* ------------------------------------------------------------
   13. The standard
   ------------------------------------------------------------ */
.ce26-standard { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; }
.ce26-check-list { display: flex; flex-direction: column; gap: 1.25rem; }
.ce26-check-row { display: flex; align-items: center; gap: 1rem; color: var(--ce26-white); font-size: var(--ce26-size-body-sm); }
.ce26-check { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--ce26-mint); display: flex; align-items: center; justify-content: center; }
.ce26-check-svg { width: 14px; height: 14px; }
.ce26-check-path { stroke: var(--ce26-navy); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------
   14. How it works (sticky helix)
   Left: the steps, which pop in as the reader scrolls.
   Right: a sticky panel holding a long double helix. The helix
   moves up past a fixed read line; what has passed the line is
   lit in its gene colors, what is below it is still dim.
   ------------------------------------------------------------ */
.ce26-how-grid { display: grid; grid-template-columns: 1fr 380px; gap: 5rem; align-items: start; }
.ce26-how-steps { position: relative; padding-bottom: 12vh; }
.ce26-how-group { padding-top: 2rem; padding-bottom: 0.5rem; }
.ce26-how-group.is-ads { padding-top: 6rem; }
.ce26-how-group-title { font-family: var(--ce26-font-body); font-weight: 700; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ce26-white); margin-bottom: 0; }
.ce26-how-step {
  min-height: 34vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--ce26-white-08);
  transition: opacity 0.4s;
}
.ce26-how-step.is-last { border-bottom: 0; }
.ce26-js .ce26-how-step { opacity: 0.4; }
.ce26-js .ce26-how-step.is-active { opacity: 1; }
.ce26-how-num {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.14em;
  color: var(--ce26-white-60);
  margin-bottom: 0.9rem;
  transition: color 0.4s;
}
.ce26-how-step.is-active .ce26-how-num { color: var(--ce26-mint); }
.ce26-how-step.is-ads.is-active .ce26-how-num { color: var(--ce26-pink); }
.ce26-how-title { font-family: var(--ce26-font-body); font-weight: 700; font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ce26-white); margin-bottom: 0.6rem; }
.ce26-how-text { font-size: 1.125rem; line-height: 1.6; color: var(--ce26-white-72); max-width: 32rem; }

.ce26-how-helix-col { position: relative; align-self: stretch; }
.ce26-how-helix {
  position: sticky;
  top: 6.5rem;
  height: calc(100vh - 9rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.ce26-embed-helix { position: absolute; inset: 0; }
.ce26-helix-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.ce26-helix-layer { position: absolute; inset: 0; }
.ce26-helix-layer.is-lit { clip-path: inset(0 0 100% 0); }
.ce26-helix-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ce26-helix-strand { fill: none; stroke-linecap: round; }
.ce26-helix-strand.is-a { stroke: var(--ce26-mint); }
.ce26-helix-strand.is-b { stroke: var(--ce26-pink); }
.ce26-helix-strand.is-dim, .ce26-helix-rung.is-dim { stroke: var(--ce26-white-16); }
.ce26-helix-rung { stroke-width: 2; stroke-linecap: round; }
.ce26-helix-rung.is-feeling { stroke: var(--ce26-pink); }
.ce26-helix-rung.is-selling { stroke: var(--ce26-mint); }
.ce26-helix-rung.is-desire { stroke: var(--ce26-pink-2); }
.ce26-helix-node {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--ce26-mint);
  border: 2px solid var(--ce26-navy);
  z-index: 2;
}
.ce26-helix-node.is-ads { background: var(--ce26-pink); width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.ce26-helix-node-ring { position: absolute; inset: -9px; border-radius: 50%; background: var(--ce26-mint-glow); }
.ce26-helix-node.is-ads .ce26-helix-node-ring { background: var(--ce26-pink-glow); }
.ce26-helix-node-ping { position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--ce26-mint); opacity: 0; }
.ce26-helix-node.is-ads .ce26-helix-node-ping { border-color: var(--ce26-pink); }
.ce26-js .ce26-helix-node { opacity: 0; transform: scale(0.3); }
.ce26-how-readline {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ce26-white-60) 15%, var(--ce26-white-60) 85%, transparent);
  z-index: 3; pointer-events: none;
}
.ce26-how-readline::before {
  content: ""; position: absolute; left: 6%; top: -4px;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--ce26-white);
}
.ce26-how-readglow { position: absolute; left: 0; right: 0; top: 50%; height: 9rem; margin-top: -4.5rem; background: radial-gradient(ellipse at center, var(--ce26-mint-glow-soft) 0%, transparent 70%); pointer-events: none; z-index: 1; }

/* ------------------------------------------------------------
   15. With vs. Without
   ------------------------------------------------------------ */
.ce26-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 3rem; align-items: stretch; max-width: 60rem; margin: 0 auto; }
.ce26-compare-side { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ce26-compare-side.is-without { align-items: flex-end; text-align: right; }
.ce26-compare-side.is-with { align-items: flex-start; text-align: left; }
.ce26-compare-label { margin-bottom: 1rem; }
.ce26-compare-card { position: relative; width: 100%; max-width: 300px; border-radius: var(--ce26-radius); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.ce26-compare-card:hover { transform: translateY(-4px); }
.ce26-compare-card.is-with { border: 1px solid var(--ce26-mint); overflow: hidden; }
.ce26-compare-card.is-with::after {
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background: radial-gradient(circle, var(--ce26-mint-glow) 0%, transparent 60%);
  opacity: 0.5;
}
.ce26-compare-glow { position: absolute; inset: -30%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, var(--ce26-mint-glow) 0%, transparent 60%); opacity: 0.4; pointer-events: none; }
.ce26-compare-with-wrap { position: relative; width: 100%; max-width: 300px; }
.ce26-compare-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--ce26-radius); position: relative; z-index: 1; }
.ce26-compare-caption { margin-top: 1.25rem; }
.ce26-compare-dna { width: 100%; max-width: 300px; margin-top: 1rem; }
.ce26-mock {
  width: 100%; max-width: 300px;
  background: var(--ce26-muted); color: var(--ce26-navy-2);
  border-radius: var(--ce26-radius);
  padding: 1rem 1.1rem 1.1rem;
  text-align: left;
  opacity: 0.9;
}
.ce26-mock-eyebrow { font-weight: 600; font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce26-navy-3); margin-bottom: 0.6rem; }
.ce26-mock-img { width: 100%; aspect-ratio: 16 / 10; background: var(--ce26-text); border-radius: 8px; margin-bottom: 0.8rem; opacity: 0.8; }
.ce26-mock-title { font-weight: 700; font-size: 0.9375rem; color: var(--ce26-navy-2); margin-bottom: 0.3rem; }
.ce26-mock-line { font-size: 0.6875rem; line-height: 1.4; color: var(--ce26-navy-3); margin-bottom: 0.75rem; }
.ce26-mock-btn { display: inline-block; font-weight: 600; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.8rem; border-radius: var(--ce26-radius-pill); background: var(--ce26-text); color: var(--ce26-ice); }

.ce26-ring-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.ce26-ring { width: 64px; height: 64px; }
.ce26-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ce26-ring-track { fill: none; stroke: var(--ce26-navy-3); stroke-width: 6; }
.ce26-ring-fill { fill: none; stroke-width: 6; stroke-linecap: round; stroke: var(--ce26-muted); }
.ce26-ring-fill.is-mint { stroke: var(--ce26-mint); }
.ce26-ring-fill.is-navy { stroke: var(--ce26-navy); }
.ce26-ring-value { font-family: var(--ce26-font-display); font-size: 1.375rem; line-height: 1; color: var(--ce26-white-60); }
.ce26-ring-value.is-mint { color: var(--ce26-mint); }
.ce26-compare-divider { display: flex; align-items: stretch; justify-content: center; padding: 0.5rem 0; }
.ce26-compare-divider-h { display: none; }
.ce26-compare-foot { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-top: 4rem; max-width: 60rem; margin-left: auto; margin-right: auto; }
.ce26-compare-foot .ce26-serif-line { max-width: 40rem; }

/* ------------------------------------------------------------
   16. The work (ad wall)
   ------------------------------------------------------------ */
.ce26-work { padding-bottom: 6rem; }
.ce26-wall { position: relative; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0 3.5rem; overflow: hidden; }
.ce26-wall-row { position: relative; }
.ce26-wall-track { display: flex; gap: 1.5rem; width: max-content; will-change: transform; }
.ce26-ad-card {
  position: relative;
  width: 360px; height: 360px; flex-shrink: 0;
  border-radius: var(--ce26-radius);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--ce26-navy-2);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s;
  will-change: transform;
  display: block;
  text-align: left;
}
.ce26-ad-card:nth-child(6n+1) { transform: rotate(-1.5deg); }
.ce26-ad-card:nth-child(6n+2) { transform: rotate(1.2deg); }
.ce26-ad-card:nth-child(6n+3) { transform: rotate(-0.6deg); }
.ce26-ad-card:nth-child(6n+4) { transform: rotate(1.8deg); }
.ce26-ad-card:nth-child(6n+5) { transform: rotate(-1.1deg); }
.ce26-ad-card:nth-child(6n+6) { transform: rotate(0.8deg); }
.ce26-ad-card:hover, .ce26-ad-card:focus-visible, .ce26-ad-card.is-active { transform: translateY(-6px) scale(1.05) rotate(0deg); border-color: var(--ce26-mint); z-index: 5; }
.ce26-ad-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.ce26-ad-card:hover .ce26-ad-img { transform: scale(1.04); }

.ce26-hover-card {
  position: absolute; z-index: 20;
  width: 250px;
  background: var(--ce26-white);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: var(--ce26-shadow-float);
  color: var(--ce26-navy);
  opacity: 0; visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.ce26-hover-card.is-visible { opacity: 1; visibility: visible; }
.ce26-hover-eyebrow { margin-bottom: 0.5rem; }
.ce26-hover-brand { font-weight: 700; font-size: 1.125rem; margin-bottom: 0.4rem; }
.ce26-hover-insight { font-size: 0.9375rem; line-height: 1.5; color: var(--ce26-text); margin-bottom: 0.9rem; }
.ce26-hover-insight.is-placeholder { font-style: italic; color: var(--ce26-muted); }
.ce26-hover-tags { margin-bottom: 1rem; }
.ce26-hover-tags:empty { display: none; }
.ce26-hover-dna { margin-top: 0.25rem; }

/* ------------------------------------------------------------
   17. Results
   ------------------------------------------------------------ */
.ce26-case-card { display: flex; flex-direction: column; }
.ce26-case-media { position: relative; aspect-ratio: 380 / 300; overflow: hidden; background: var(--ce26-ice); }
.ce26-case-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.ce26-case-card:hover .ce26-case-img { transform: scale(1.04); }
.ce26-case-body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.ce26-case-before { font-size: 0.8125rem; color: var(--ce26-muted); margin-bottom: 0.9rem; }
.ce26-case-text { font-size: var(--ce26-size-small); line-height: 1.6; margin-bottom: 1.25rem; }
.ce26-case-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
.ce26-case-stat { background: var(--ce26-ice); border-radius: 10px; padding: 0.9rem 1rem; }
.ce26-case-stat-num { display: block; font-weight: 700; font-size: 1.25rem; color: var(--ce26-navy); line-height: 1.2; margin-bottom: 0.2rem; }
.ce26-case-stat-label { display: block; font-size: 0.75rem; line-height: 1.35; color: var(--ce26-muted); }
.ce26-case-quote { font-size: 0.8125rem; font-weight: 600; line-height: 1.5; color: var(--ce26-navy); margin-bottom: 1rem; }
.ce26-case-quote-name { font-weight: 400; color: var(--ce26-text); }
.ce26-case-link { margin-top: auto; }

/* ------------------------------------------------------------
   18. Pull quote
   ------------------------------------------------------------ */
.ce26-quote-wrap { max-width: 46rem; margin: 0 auto; text-align: center; }
.ce26-quote-mark { font-family: var(--ce26-font-serif); font-size: 4rem; line-height: 0.6; color: var(--ce26-pink); margin-bottom: 1.5rem; }
.ce26-quote-mark.is-sm { font-size: 2.5rem; margin-bottom: 1.25rem; text-align: left; line-height: 0.5; }
.ce26-quote-line { display: inline; }
.ce26-quote-text { font-family: var(--ce26-font-serif); font-size: 2.5rem; line-height: 1.2; color: var(--ce26-navy); margin-bottom: 1.5rem; }
.ce26-quote-attr { margin-bottom: 0; }

/* ------------------------------------------------------------
   19. Who it's for
   ------------------------------------------------------------ */
.ce26-who { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ce26-who-tags { margin-top: 1.5rem; }

/* ------------------------------------------------------------
   20. The offer and assessment form
   ------------------------------------------------------------ */
.ce26-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 3rem; }
.ce26-step-card { display: flex; flex-direction: column; }
.ce26-step-card-text { font-size: var(--ce26-size-small); line-height: 1.6; }
.ce26-step-card-dna { margin-top: auto; padding-top: 1.5rem; }

.ce26-form-wrap { max-width: 40rem; margin: 0 auto; }
.ce26-form { padding: 2rem 2rem 2.25rem; overflow: hidden; }
.ce26-progress { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.ce26-progress-seg { width: 3rem; height: 3px; border-radius: 2px; background: var(--ce26-white-16); transition: background-color 0.3s; }
.ce26-progress-seg.is-current { background: var(--ce26-mint); }
.ce26-progress-seg.is-done { background: var(--ce26-mint-2); opacity: 0.6; }
.ce26-form-steps { position: relative; }
.ce26-form-step { will-change: transform, opacity; }
.ce26-form-step.is-off { display: none; }
.ce26-form-legend { display: block; width: 100%; }
.ce26-form-question { display: block; font-weight: 700; font-size: 1.5rem; line-height: 1.25; color: var(--ce26-white); margin-bottom: 1.25rem; }
.ce26-form-hint { font-size: 0.8125rem; color: var(--ce26-white-60); margin-top: 1rem; }
.ce26-form-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.ce26-form-nav.is-hidden { display: none; }
.ce26-form-next.is-hidden { visibility: hidden; }
.ce26-form-back.is-hidden { visibility: hidden; }
.ce26-form-final { text-align: left; }
.ce26-form-final .ce26-form-question { margin-bottom: 1.25rem; }
.ce26-form-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Choice pills: real radio and checkbox inputs, styled as pills */
.ce26-choice { position: relative; display: inline-flex; }
.ce26-choice-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ce26-choice-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--ce26-white-60);
  color: var(--ce26-white);
  font-weight: 600; font-size: 0.9375rem; line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.ce26-choice-label:hover { border-color: var(--ce26-white); transform: translateY(-1px); }
.ce26-choice-input:checked + .ce26-choice-label { background: var(--ce26-mint); border-color: var(--ce26-mint); color: var(--ce26-navy); }
.ce26-choice-input:focus-visible + .ce26-choice-label { outline: 2px solid var(--ce26-mint); outline-offset: 2px; }
.ce26-choice-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.ce26-form-note { margin-top: 2rem; }

/* ------------------------------------------------------------
   21. Founder
   ------------------------------------------------------------ */
.ce26-founder { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; align-items: start; margin-bottom: 2.5rem; }
.ce26-founder-media { border-radius: var(--ce26-radius); overflow: hidden; }
.ce26-founder-img { width: 100%; height: auto; }
.ce26-founder-bio { font-size: var(--ce26-size-small); line-height: 1.65; margin-bottom: 1.75rem; }
.ce26-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.ce26-sig-rule { width: 1.5rem; height: 2px; background: var(--ce26-pink); margin-bottom: 0.9rem; transform-origin: left; }
.ce26-testimonial { padding: 2.25rem 2.5rem; }
.ce26-testimonial-text { font-size: var(--ce26-size-body-sm); line-height: 1.6; color: var(--ce26-navy); margin-bottom: 1.25rem; }
.ce26-testimonial-name { font-weight: 700; font-size: 0.875rem; color: var(--ce26-navy); }
.ce26-testimonial-company { font-size: 0.75rem; color: var(--ce26-muted); }

/* ------------------------------------------------------------
   22. Guarantee
   ------------------------------------------------------------ */
.ce26-guarantee { display: grid; grid-template-columns: 180px 1fr; gap: 3rem; align-items: center; }
.ce26-guarantee-num { position: relative; width: 160px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ce26-guarantee-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ce26-guarantee-ring-path { fill: none; stroke: var(--ce26-navy); stroke-width: 1.5; }
.ce26-guarantee-digits { font-family: var(--ce26-font-display); font-size: 4.5rem; line-height: 0.9; color: var(--ce26-navy); letter-spacing: -0.02em; }
.ce26-guarantee-days { font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ce26-navy); margin-top: 0.5rem; }
.ce26-guarantee-body { font-size: var(--ce26-size-body-sm); line-height: 1.6; color: var(--ce26-navy); }

/* ------------------------------------------------------------
   23. Questions (accordion)
   ------------------------------------------------------------ */
.ce26-faq-list { display: flex; flex-direction: column; }
.ce26-faq-item { border-bottom: 1px solid var(--ce26-border); }
.ce26-faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 0; text-align: left;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--ce26-navy);
}
.ce26-faq-btn:hover { color: var(--ce26-pink); }
.ce26-faq-icon { position: relative; width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.ce26-faq-icon::before, .ce26-faq-icon::after { content: ""; position: absolute; background: var(--ce26-pink); border-radius: 1px; }
.ce26-faq-icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.ce26-faq-icon::after { top: 0; left: 8px; width: 2px; height: 18px; }
.ce26-faq-btn[aria-expanded="true"] .ce26-faq-icon { transform: rotate(45deg); }
.ce26-faq-panel { overflow: hidden; }
.ce26-faq-panel.is-closed { height: 0; }
.ce26-faq-answer { font-size: var(--ce26-size-small); line-height: 1.65; padding-bottom: 1.5rem; max-width: 36rem; }

/* ------------------------------------------------------------
   24. Closing
   ------------------------------------------------------------ */
.ce26-closing { padding-top: 0; padding-bottom: 8rem; text-align: center; }
.ce26-closing-dna { margin-bottom: 7rem; }
.ce26-closing-inner { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; }
.ce26-closing-glow { position: absolute; width: 50rem; height: 50rem; border-radius: 50%; pointer-events: none; z-index: 0; will-change: transform, opacity; }
.ce26-closing-glow.is-teal { left: -20rem; top: -10rem; background: radial-gradient(circle, var(--ce26-mint-glow) 0%, transparent 60%); }
.ce26-closing-glow.is-pink { right: -20rem; bottom: -18rem; background: radial-gradient(circle, var(--ce26-pink-glow) 0%, transparent 60%); }
.ce26-closing-rings { position: absolute; left: 50%; top: 50%; width: 1px; height: 1px; z-index: 0; pointer-events: none; }
.ce26-closing-ring { position: absolute; left: 50%; top: 50%; width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem; border-radius: 50%; border: 1px solid var(--ce26-white-08); opacity: 0; transform: scale(0.2); }
.ce26-closing-body { font-size: var(--ce26-size-body); color: var(--ce26-white-72); max-width: 30rem; margin: 0 auto 2.25rem; }
.ce26-closing-btn-wrap { position: relative; display: inline-block; }

/* ------------------------------------------------------------
   25. Footer
   ------------------------------------------------------------ */
.ce26-footer { background: var(--ce26-navy); padding: 2rem 0; border-top: 1px solid var(--ce26-navy-3); }
.ce26-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.ce26-footer-logo-img { width: 150px; height: auto; }
.ce26-footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.ce26-footer-link { position: relative; color: var(--ce26-white-72); font-size: var(--ce26-size-small); padding: 0.25rem 0; transition: color 0.25s; }
.ce26-footer-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ce26-mint); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.ce26-footer-link:hover { color: var(--ce26-white); }
.ce26-footer-link:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   26. Motion start states
   Only applied after the script adds ce26-js to <html>, so the
   page is complete without JavaScript.
   ------------------------------------------------------------ */
.ce26-js [data-ce26="reveal"] { opacity: 0; }
.ce26-js [data-ce26="stagger"] > * { opacity: 0; }
.ce26-js [data-ce26="headline"] .ce26-line-inner { transform: translateY(110%); }
.ce26-js [data-ce26="hero-ad"] { opacity: 0; }
.ce26-js [data-ce26="callout"] { opacity: 0; }
.ce26-js [data-ce26="dna"] .ce26-dna-seg { transform: scaleX(0); }
.ce26-js [data-ce26="dna"].is-vertical .ce26-dna-seg { transform: scaleY(0); }
.ce26-js [data-ce26="dna"].is-partial .ce26-dna-seg { transform: none; }
.ce26-js [data-ce26="dna"].is-partial .ce26-dna-seg.is-read { transform: scaleX(0); }
.ce26-js [data-ce26="leader"] { opacity: 0; }
.ce26-js [data-ce26="anchor"] { opacity: 0; }
.ce26-js [data-ce26="word"] { opacity: 0.25; }
.ce26-js [data-ce26="check"] { transform: scale(0); }
.ce26-js [data-ce26="fade"] { opacity: 0; }
.ce26-js [data-ce26="case-media"] { clip-path: inset(100% 0 0 0); }
.ce26-js [data-ce26="founder-media"] { clip-path: inset(0 0 100% 0); }
.ce26-js [data-ce26="sig-rule"] { transform: scaleX(0); }
.ce26-js [data-ce26="quote-line"] { opacity: 0; }
.ce26-js [data-ce26="tag-pop"] > * { opacity: 0; transform: scale(0.6); }

/* Closing rings loop (CSS only, scale and opacity) */
@media (prefers-reduced-motion: no-preference) {
  .ce26-closing-ring { animation: ce26-ring-expand 6s linear infinite; }
  .ce26-closing-ring:nth-child(2) { animation-delay: -2s; }
  .ce26-closing-ring:nth-child(3) { animation-delay: -4s; }
  .ce26-closing-glow { animation: ce26-breathe 9s ease-in-out infinite; }
  .ce26-closing-glow.is-pink { animation-delay: -4.5s; }
  .ce26-compare-glow { animation: ce26-breathe 5s ease-in-out infinite; }
}
@keyframes ce26-ring-expand {
  0% { transform: scale(0.2); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes ce26-breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* Reduced motion: everything in its final state, nothing moves */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
  .ce26-closing-ring { opacity: 1; transform: scale(1); }
  .ce26-closing-ring:nth-child(2) { transform: scale(0.7); }
  .ce26-closing-ring:nth-child(3) { transform: scale(0.4); }
  .ce26-dna.is-logic .ce26-dna-seg.is-feeling { background: var(--ce26-pink); border-color: transparent; }
  .ce26-dna.is-logic .ce26-dna-seg.is-desire { background: var(--ce26-pink-2); border-color: transparent; }
  .ce26-wall-row { overflow-x: auto; scrollbar-width: none; }
  .ce26-js .ce26-how-step { opacity: 1; }
  .ce26-how-step .ce26-how-num { color: var(--ce26-mint); }
  .ce26-how-step.is-ads .ce26-how-num { color: var(--ce26-pink); }
  .ce26-helix-layer.is-lit { clip-path: none; }
  .ce26-js .ce26-helix-node { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   27. Breakpoints (desktop first, matching Webflow)
   ------------------------------------------------------------ */
@media (max-width: 1240px) {
  .ce26-callout.is-feeling { left: -8%; }
  .ce26-callout.is-selling { right: -10%; }
  .ce26-callout.is-desire { left: -10%; }
}

/* Tablet */
@media (max-width: 991px) {
  :root {
    --ce26-size-hero: 4rem;
    --ce26-size-h2: 2.75rem;
    --ce26-size-h2-sm: 2.5rem;
    --ce26-section-pad: 6rem;
    --ce26-gutter: 2rem;
    --ce26-nav-height: 4.5rem;
  }
  .ce26-nav-links { display: none; }
  .ce26-nav-cta .ce26-btn { display: none; }
  .ce26-nav-toggle { display: flex; }
  .ce26-hero { min-height: 0; padding-top: calc(var(--ce26-nav-height) + 3rem); }
  .ce26-hero-grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .ce26-hero-copy { max-width: 36rem; }
  .ce26-decoded { margin-left: 0; max-width: 420px; }
  .ce26-callout { display: none; }
  .ce26-leaders { display: none; }
  .ce26-anchor { display: none; }
  .ce26-callout-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
  .ce26-callout-item { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.6rem; align-items: start; background: var(--ce26-white); color: var(--ce26-navy); border-radius: 10px; padding: 0.75rem 0.9rem; box-shadow: var(--ce26-shadow-float-soft); }
  .ce26-callout-item .ce26-gene-dot { margin-top: 0.35rem; }
  .ce26-platforms { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 3rem; }
  .ce26-platforms-img { max-width: none; width: 700px; }
  .ce26-head.is-row, .ce26-head.is-row-between { display: block; }
  .ce26-head.is-row .ce26-sub { margin-top: 1rem; }
  .ce26-head.is-row-between .ce26-btn { margin-top: 1.25rem; }
  .ce26-logo-row { flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; }
  .ce26-tried-grid { grid-template-columns: 1fr 1fr; }
  .ce26-standard { grid-template-columns: 1fr; gap: 2rem; }
  .ce26-how-grid { grid-template-columns: 1fr 140px; gap: 2.5rem; }
  .ce26-how-title, .ce26-how-group-title { font-size: 1.5rem; }
  .ce26-compare { grid-template-columns: 1fr; gap: 2.5rem; max-width: 24rem; }
  .ce26-compare-side.is-without, .ce26-compare-side.is-with { align-items: flex-start; text-align: left; }
  .ce26-compare-divider { display: none; }
  .ce26-compare-divider-h { display: block; }
  .ce26-compare-foot { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .ce26-grid-3, .ce26-steps { grid-template-columns: 1fr 1fr; }
  .ce26-who { grid-template-columns: 1fr; gap: 2rem; }
  .ce26-founder { grid-template-columns: 240px 1fr; gap: 2rem; }
  .ce26-split { grid-template-columns: 1fr; gap: 2rem; }
  .ce26-quote-text { font-size: 2rem; }
}

/* Mobile landscape */
@media (max-width: 767px) {
  :root {
    --ce26-size-hero: 3rem;
    --ce26-size-h2: 2.25rem;
    --ce26-size-h2-sm: 2.125rem;
    --ce26-section-pad: var(--ce26-section-pad-sm);
    --ce26-gutter: 1.5rem;
    --ce26-size-body: 1.0625rem;
  }
  .ce26-head { margin-bottom: 2.5rem; }
  .ce26-grid-2, .ce26-grid-3, .ce26-tried-grid, .ce26-steps, .ce26-sigs { grid-template-columns: 1fr; }
  .ce26-hero-sub { font-size: 1.125rem; }
  .ce26-decoded { max-width: 100%; }
  .ce26-stats { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .ce26-stat { flex-direction: column; gap: 0.35rem; }
  .ce26-divider { width: 100%; height: 1px; }
  .ce26-logo-img { height: 30px; }
  .ce26-wall { gap: 0; padding: 0; }
  .ce26-wall-row { overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 1rem var(--ce26-gutter) 2rem; margin: 0 calc(-1 * var(--ce26-gutter)); scrollbar-width: none; }
  .ce26-wall-row::-webkit-scrollbar { display: none; }
  .ce26-wall-row.is-second { display: none; }
  .ce26-wall-track { gap: 1rem; }
  .ce26-ad-card { width: 290px; height: 290px; scroll-snap-align: center; }
  .ce26-ad-card:nth-child(n) { transform: none; }
  .ce26-hover-card { width: calc(100% - 3rem); max-width: 320px; }
  .ce26-case-stats { grid-template-columns: 1fr 1fr; }
  .ce26-quote-text { font-size: 1.75rem; }
  .ce26-quote-mark { font-size: 3rem; }
  .ce26-form { padding: 1.5rem 1.25rem 1.75rem; }
  .ce26-form-question { font-size: 1.25rem; }
  .ce26-choice-label { min-height: 2.75rem; }
  .ce26-founder { grid-template-columns: 1fr; }
  .ce26-founder-media { max-width: 320px; }
  .ce26-testimonial { padding: 1.75rem 1.5rem; }
  .ce26-card-mint { padding: 2.5rem 1.75rem; }
  .ce26-guarantee { grid-template-columns: 1fr; gap: 2rem; }
  .ce26-closing { padding-bottom: 5rem; }
  .ce26-closing-dna { margin-bottom: 4.5rem; }
  .ce26-closing-ring { width: 24rem; height: 24rem; margin: -12rem 0 0 -12rem; }
  .ce26-footer-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .ce26-footer-links { gap: 1.25rem; }
  .ce26-compare-card, .ce26-mock, .ce26-compare-with-wrap, .ce26-compare-dna { max-width: 100%; }
  .ce26-how-grid { grid-template-columns: 1fr 56px; gap: 1.25rem; }
  .ce26-how-helix { top: 5.5rem; height: calc(100vh - 7.5rem); }
  .ce26-how-step { min-height: 40vh; padding: 1.5rem 0; }
  .ce26-how-title, .ce26-how-group-title { font-size: 1.375rem; }
  .ce26-how-text { font-size: 1rem; }
  .ce26-how-group.is-ads { padding-top: 4rem; }
  .ce26-helix-node { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .ce26-helix-node.is-ads { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
  .ce26-how-readline::before { display: none; }
  .ce26-section.is-tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

/* Mobile portrait */
@media (max-width: 479px) {
  :root {
    --ce26-size-hero: 2.75rem;
    --ce26-size-h2: 2rem;
    --ce26-size-h2-sm: 1.875rem;
  }
  .ce26-nav-logo, .ce26-nav-logo-img { width: 140px; }
  .ce26-btn { min-height: 3rem; padding: 0 1.4rem; font-size: 0.9375rem; white-space: normal; text-align: center; }
  .ce26-hero-sub { font-size: 1.0625rem; }
  .ce26-logo-row { gap: 1.5rem 2rem; }
  .ce26-logo-img { height: 26px; max-width: 100px; }
  .ce26-quote-text { font-size: 1.5rem; }
  .ce26-ad-card { width: 270px; height: 270px; }
  .ce26-case-stats { grid-template-columns: 1fr; }
  .ce26-progress-seg { width: 2.25rem; }
  .ce26-guarantee-digits { font-size: 4rem; }
  .ce26-menu-link { font-size: 2rem; }
}