/*!
 * MAHA Components v1.2.0
 * Design system + component library for The Official MAHA™ Movie
 *
 * Usage:
 *   <link rel="stylesheet" href="https://assets.mahamovie.com/claude/maha-components-v1.2.0.css">
 *   <script defer src="https://assets.mahamovie.com/claude/maha-components-v1.2.0.js"></script>
 *
 * v1.2.0 changes from v1.1.0:
 *   - VSL component pattern switched from native <video> + data-cta-at JS to
 *     Vidalytics embed + .vhide utility class. Vidalytics handles reveal
 *     timing inside its admin; page markup just tags reveal targets with
 *     .vhide. Old data-vsl / data-cta-at API removed.
 *
 * Full component inventory (same as v1.1.0 otherwise):
 *   - Design tokens, base typography, layout utilities
 *   - Phase 1 visual: dropcap, gradient text, highlight text, scribble
 *     highlight, fancy lists, progress bars, milestones, client marquee
 *   - Phase 2 interactive: tabs, toggle panels, fancy boxes, pricing table,
 *     testimonial grid
 *   - Phase 3 interactive: flip box, carousel, image comparison, scroll
 *     reveal, animated titles, rotating words
 *   - Phase 4 visual + VSL: shape dividers, bg textures, cascading images,
 *     VSL (Vidalytics + .vhide)
 *   - Sales-page: CTA, pull-quote, icon-list (default/numbered/nested),
 *     benefit-block, benefits-card, value-summary, trust cluster, badges,
 *     legal/fine-print text
 *
 * Per-component HTML patterns + usage guidelines: see CLAUDE.md.
 * Full visual showcase: components-demo.html
 *
 * © Uncensored Works, LLC. All rights reserved.
 */

:root {
  --black:        #050A06;
  --evergreen:    #1C3026;
  --pine-teal:    #325644;
  --muted-teal:   #728F81;
  --ash-grey:     #C2CFC9;
  --platinum:     #EBEFED;
  --white:        #FFFFFF;
  --hunter-green: #2B614A;
  --jungle-green: #03AD78;
  --amber-flame:  #FFB800;
  --punch-red:    #E7313D;

  --size1: 3.815em;
  --size2: 3.052em;
  --size3: 2.441em;
  --size4: 1.953em;
  --size5: 1.563em;
  --size6: 1.25em;
  --size7: 1em;
  --size8: 0.8em;
  --size9: 0.64em;

  --margin1: 60px;
  --margin2: 30px;
  --margin3: 15px;
  --margin4: 7.5px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: "Instrument Sans", sans-serif;
  font-size: calc(var(--size7) + 2pt);
  line-height: 1.5em;
  color: var(--platinum);
  background: var(--evergreen);
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  line-height: 1em;
  text-wrap: balance;
}

/* Serif no bold */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 400; }

p { line-height: 1.5em; text-wrap: pretty; }

.section { width: 100%; padding: 96px 0; }
.wrapper { width: 100%; padding: 0 var(--margin3); }
.container { width: 100%; max-width: 1100px; margin: 0 auto; }

/* Showcase structure */
.showcase-header {
  text-align: center;
  margin-bottom: var(--margin1);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.showcase-header h1 {
  font-size: var(--size1);
  margin-bottom: var(--margin3);
}

.showcase-header p {
  color: var(--ash-grey);
  font-size: var(--size6);
}

.component-demo {
  margin-bottom: var(--margin1);
  padding-bottom: var(--margin2);
  border-bottom: 1px solid rgba(235, 239, 237, 0.1);
}

.component-demo:last-child { border-bottom: none; }

.component-demo h3 {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size8);
  color: var(--jungle-green);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: var(--margin3);
}

.component-demo h3 em {
  font-style: normal;
  color: var(--muted-teal);
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT: DROPCAP
   ═══════════════════════════════════════════════════════════════════ */
.dropcap::first-letter {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 4.5em;
  line-height: 0.85em;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--jungle-green);
}

.dropcap-framed::first-letter {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 2.8em;
  line-height: 1em;
  float: left;
  padding: 0.22em 0.35em;
  margin: 0.08em 0.35em 0 0;
  background: var(--hunter-green);
  color: var(--platinum);
  border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT: GRADIENT TEXT
   ═══════════════════════════════════════════════════════════════════ */
.gradient-text {
  background: linear-gradient(135deg, var(--jungle-green), var(--hunter-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  /* Ascender/descender headroom — inline-block + background-clip:text + line-height:1em
     clips the tops and bottoms of serif letters. Give back a bit of vertical room. */
  line-height: 1.2;
  padding: 0.05em 0;
}

.gradient-text.warm {
  background: linear-gradient(135deg, var(--amber-flame), var(--punch-red));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text.ocean {
  background: linear-gradient(135deg, var(--ash-grey), var(--muted-teal));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT: HIGHLIGHT TEXT (marker effect)
   ═══════════════════════════════════════════════════════════════════ */
.highlight-text {
  background-color: var(--amber-flame);       /* full-height coverage */
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--black);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.highlight-text.green { background-color: var(--jungle-green); color: var(--white); }
.highlight-text.ash   { background-color: var(--ash-grey);   color: var(--black); }

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT: SCRIBBLE HIGHLIGHT (animated hand-drawn underline)
   ═══════════════════════════════════════════════════════════════════ */
.scribble {
  display: inline-block;
  position: relative;
  color: inherit;
}

.scribble svg {
  position: absolute;
  left: -3%;
  bottom: -10%;
  width: 106%;
  height: 0.5em;
  pointer-events: none;
  overflow: visible;
  color: var(--amber-flame);
}

.scribble svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: scribble-draw 1.1s 0.3s ease-out forwards;
}

@keyframes scribble-draw {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scribble svg path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT: FANCY UNORDERED LISTS
   ═══════════════════════════════════════════════════════════════════ */
.fancy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fancy-list li {
  padding-left: 34px;
  position: relative;
  margin-bottom: 12px;
  line-height: 1.5em;
}

.fancy-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Each variant uses an inline data-URL Lucide-style SVG so no extra network cost */
.fancy-list.arrow li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303AD78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>");
}

.fancy-list.star li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFB800' stroke='%23FFB800' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15 8.5 22 9.3 17 14.1 18.2 21 12 17.8 5.8 21 7 14.1 2 9.3 9 8.5 12 2'></polygon></svg>");
}

.fancy-list.diamond li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232B614A' stroke='%232B614A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 22 12 12 22 2 12 12 2'></polygon></svg>");
}

.fancy-list.check li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303AD78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>");
}

.fancy-list.x li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E7313D' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>");
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT: PROGRESS BARS
   ═══════════════════════════════════════════════════════════════════ */
.progress-bar { margin-bottom: var(--margin3); }

.progress-bar-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-family: "Instrument Sans", sans-serif;
}

.progress-bar-label {
  font-size: var(--size7);
  color: var(--platinum);
  font-weight: 600;
}

.progress-bar-percent {
  font-size: var(--size7);
  color: var(--jungle-green);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(235, 239, 237, 0.15);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pine-teal), var(--jungle-green));
  border-radius: 4px;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.amber .progress-bar-fill {
  background: linear-gradient(90deg, var(--hunter-green), var(--amber-flame));
}

.progress-bar.red .progress-bar-fill {
  background: linear-gradient(90deg, var(--pine-teal), var(--punch-red));
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT: MILESTONES (stat row)
   ═══════════════════════════════════════════════════════════════════ */
.milestones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--margin2);
  text-align: center;
}

.milestone { padding: var(--margin3) 0; }

.milestone-value {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: var(--size1);
  color: var(--jungle-green);
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.milestone-label {
  font-family: "Instrument Sans", sans-serif;
  font-size: var(--size8);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ash-grey);
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENT: CLIENTS / "AS SEEN ON" LOGO ROW
   ═══════════════════════════════════════════════════════════════════ */
.client-logos { text-align: center; }

.client-logos-label {
  font-family: "Instrument Sans", sans-serif;
  font-size: var(--size8);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted-teal);
  margin-bottom: var(--margin3);
}

/* Marquee — infinite horizontal scroll. Track contains 2 copies of the logo
   set (second copy added via JS on init); animation shifts -50% and loops. */
.client-logos-marquee {
  overflow: hidden;
  width: 100%;
  /* Soft fade at the edges so logos don't pop in/out abruptly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}

.client-logos-track {
  display: flex;
  gap: var(--margin2);
  align-items: center;
  width: max-content;
  animation: client-logos-scroll 40s linear infinite;
}

.client-logos-marquee:hover .client-logos-track {
  animation-play-state: paused;
}

@keyframes client-logos-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.client-logo {
  height: 32px;
  width: auto;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.client-logos.on-dark .client-logo { filter: brightness(0) invert(1); }
.client-logos.on-light .client-logo { filter: brightness(0); opacity: 0.55; }

.client-logo:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .client-logos-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .client-logos-marquee {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Wordmark fallback — use when actual logo SVGs aren't available */
.client-logo-wordmark {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: var(--size5);
  color: var(--platinum);
  opacity: 0.7;
  letter-spacing: -0.01em;
  padding: 0 10px;
}

.client-logos.on-light .client-logo-wordmark {
  color: var(--black);
  opacity: 0.55;
}

/* ═══════════════════════════════════════════════════════════════════
   Light-section overrides (4-scenario text rule)
   ═══════════════════════════════════════════════════════════════════ */
.section-light {
  background: var(--platinum);
  background: radial-gradient(at center top, var(--platinum), var(--ash-grey));
  color: var(--black);
}

.section-light .component-demo {
  border-bottom-color: rgba(5, 10, 6, 0.1);
}

.section-light .component-demo h3 { color: var(--hunter-green); }
.section-light .component-demo h3 em { color: var(--muted-teal); }
.section-light .showcase-header h1 { color: var(--black); }
.section-light .showcase-header p { color: var(--evergreen); }

.section-light .dropcap::first-letter { color: var(--hunter-green); }

.section-light .progress-bar-label { color: var(--black); }
.section-light .progress-bar-percent { color: var(--hunter-green); }
.section-light .progress-bar-track { background: var(--ash-grey); }

.section-light .milestone-value { color: var(--hunter-green); }
.section-light .milestone-label { color: var(--evergreen); }

.section-light .client-logos-label { color: var(--muted-teal); }

/* ═══════════════════════════════════════════════════════════════════
   ICON LIST (default + numbered + nested variants) — used in the
   Phase 1 Icon Lists demo block and nestable inside benefits-card.
   ═══════════════════════════════════════════════════════════════════ */

.icon-list {
  list-style: none;
  margin: var(--margin3) 0 0;
  padding: 0;
}

.icon-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--margin3);
  padding-bottom: var(--margin2);
}

.icon-list li:last-child { padding-bottom: 0; }

/* Vertical connector line running through the circles */
.icon-list li::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 23.25px;
  width: 1.5px;
  background: var(--platinum);
  opacity: 0.22;
}

.icon-list li:last-child::before { display: none; }

.icon-list .icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--platinum);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jungle-green);
  position: relative;
  z-index: 1;
}

.icon-list .icon svg {
  width: 22px;
  height: 22px;
}

.icon-list li > div {
  flex: 1;
  padding-top: 6px;
  text-align: left;
}

.icon-list li strong {
  display: block;
  color: var(--platinum);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size6);
  line-height: 1.3em;
  margin-bottom: 4px;
  text-align: left;
}

.icon-list li p {
  color: var(--ash-grey);
  font-size: var(--size7);
  line-height: 1.5em;
  margin: 0;
  text-align: left;
}

/* ── Benefits Card — light spotlight card that wraps the numbered list ── */
.benefits-card {
  background: var(--platinum);
  border: 1px solid var(--muted-teal);
  border-radius: 8px;
  padding: var(--margin2);
  margin-bottom: var(--margin2);
  box-shadow: 0 4px 12px rgba(5, 10, 6, 0.25);
}

/* ── Numbered variant (Level 1) ── */
.icon-list-numbered {
  list-style: none;
  margin: 0;
  padding: 0;
}

.icon-list-numbered > li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--margin3);
  padding-bottom: var(--margin2);
}

.icon-list-numbered > li:last-child { padding-bottom: 0; }

.icon-list-numbered > li::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 23.25px;
  width: 1.5px;
  background: var(--hunter-green);
  opacity: 0.25;
}

.icon-list-numbered > li:last-child::before { display: none; }

.icon-list-numbered .num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid var(--hunter-green);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hunter-green);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  font-size: var(--size5);
  line-height: 1;
  position: relative;
  z-index: 1;
}

.icon-list-numbered > li > div {
  flex: 1;
  padding-top: 10px;
  text-align: left;
}

.icon-list-numbered > li > div > strong {
  display: block;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size6);
  color: var(--black);
  line-height: 1.3em;
  margin-bottom: 8px;
}

.icon-list-numbered > li > div > p {
  color: var(--black);
  font-size: var(--size7);
  line-height: 1.5em;
  margin: 0 0 var(--margin3) 0;
}

.icon-list-numbered > li > div > p:last-child { margin-bottom: 0; }

/* Level-2 icon list nested inside a numbered item */
.icon-list-numbered .icon-list {
  margin-top: var(--margin3);
  margin-left: 0;
}

/* When .icon-list sits inside a light .benefits-card, switch to light-variant colors */
.benefits-card .icon-list .icon {
  border-color: var(--hunter-green);
  color: var(--jungle-green);
}

.benefits-card .icon-list li::before {
  background: var(--hunter-green);
  opacity: 0.25;
}

.benefits-card .icon-list li strong {
  color: var(--black);
}

.benefits-card .icon-list li p {
  color: var(--evergreen);
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tabs ── */
.tabs { max-width: 780px; margin: 0 auto; }

.tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--hunter-green);
  margin-bottom: var(--margin2);
  flex-wrap: wrap;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: var(--margin3) var(--margin2);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size7);
  color: var(--ash-grey);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  min-height: 48px;
}

.tab-btn:hover { color: var(--platinum); }

.tab-btn.active {
  color: var(--jungle-green);
  border-bottom-color: var(--jungle-green);
}

.tab-btn:focus-visible {
  outline: 2px solid var(--jungle-green);
  outline-offset: 2px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-panel h4 {
  font-size: var(--size4);
  margin-bottom: var(--margin3);
  color: var(--platinum);
}

.section-light .tabs-nav { border-bottom-color: var(--muted-teal); }
.section-light .tab-btn { color: var(--evergreen); }
.section-light .tab-btn:hover { color: var(--black); }
.section-light .tab-btn.active { color: var(--hunter-green); border-bottom-color: var(--hunter-green); }
.section-light .tab-panel h4 { color: var(--black); }

/* ── Toggle Panels (generic accordion) ── */
.toggle-group { max-width: 780px; margin: 0 auto; }

.toggle-panel {
  border-bottom: 1px solid rgba(235, 239, 237, 0.15);
  overflow: hidden;
}

.toggle-panel:last-child { border-bottom: none; }

.toggle-trigger {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--margin3) 0;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size6);
  color: var(--platinum);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--margin3);
  min-height: 48px;
}

.toggle-trigger:focus-visible {
  outline: 2px solid var(--jungle-green);
  outline-offset: 2px;
}

.toggle-trigger .chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.toggle-panel.is-open .toggle-trigger .chevron { transform: rotate(180deg); }

.toggle-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-panel.is-open .toggle-content { grid-template-rows: 1fr; }

.toggle-content-inner {
  overflow: hidden;
}

.toggle-content-inner p {
  padding: 0 0 var(--margin3) 0;
  color: var(--ash-grey);
}

.section-light .toggle-panel { border-bottom-color: rgba(5, 10, 6, 0.12); }
.section-light .toggle-trigger { color: var(--black); }
.section-light .toggle-content-inner p { color: var(--evergreen); }

/* ── Fancy Boxes ── */
.fancy-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--margin2);
}

.fancy-box {
  padding: var(--margin2);
  border-radius: 10px;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.fancy-box-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(3, 173, 120, 0.15);
  color: var(--jungle-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--margin3);
}

.fancy-box-icon svg { width: 22px; height: 22px; }

.fancy-box-title {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size5);
  margin-bottom: 8px;
  line-height: 1.2em;
}

.fancy-box-desc {
  font-size: var(--size7);
  line-height: 1.5em;
  margin: 0;
}

/* Variant: filled */
.fancy-box.filled {
  background: var(--hunter-green);
  color: var(--platinum);
}
.fancy-box.filled .fancy-box-icon { background: rgba(235, 239, 237, 0.15); color: var(--platinum); }
.fancy-box.filled .fancy-box-title { color: var(--platinum); }
.fancy-box.filled .fancy-box-desc { color: var(--ash-grey); }

/* Variant: outlined */
.fancy-box.outlined {
  background: transparent;
  border: 1px solid var(--hunter-green);
}
.fancy-box.outlined .fancy-box-title { color: var(--platinum); }
.fancy-box.outlined .fancy-box-desc { color: var(--ash-grey); }

/* Variant: hover-lift */
.fancy-box.hover-lift {
  background: var(--evergreen);
  box-shadow: 0 4px 12px rgba(5, 10, 6, 0.3);
}
.fancy-box.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(5, 10, 6, 0.5);
}
.fancy-box.hover-lift .fancy-box-title { color: var(--platinum); }
.fancy-box.hover-lift .fancy-box-desc { color: var(--ash-grey); }

/* Light-section fancy-box overrides */
.section-light .fancy-box.outlined { border-color: var(--muted-teal); }
.section-light .fancy-box.outlined .fancy-box-title { color: var(--black); }
.section-light .fancy-box.outlined .fancy-box-desc { color: var(--evergreen); }
.section-light .fancy-box.hover-lift { background: var(--white); box-shadow: 0 4px 12px rgba(5, 10, 6, 0.1); }
.section-light .fancy-box.hover-lift:hover { box-shadow: 0 12px 28px rgba(5, 10, 6, 0.2); }
.section-light .fancy-box.hover-lift .fancy-box-title { color: var(--black); }
.section-light .fancy-box.hover-lift .fancy-box-desc { color: var(--evergreen); }

@media (prefers-reduced-motion: reduce) {
  .fancy-box.hover-lift { transition: none; }
  .fancy-box.hover-lift:hover { transform: none; }
}

/* ── Pricing Table ── */
.pricing-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--margin2);
}

.price-plan {
  background: var(--white);
  border: 1px solid var(--muted-teal);
  border-radius: 10px;
  padding: var(--margin2);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
}

.price-plan.popular {
  border-color: var(--hunter-green);
  border-width: 2px;
  box-shadow: 0 8px 24px rgba(5, 10, 6, 0.2);
  transform: translateY(-8px);
}

.price-plan .popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--amber-flame);
  color: var(--black);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  font-size: var(--size9);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  padding: 4px 14px;
  border-radius: 3px;
  white-space: nowrap;
}

.price-plan .plan-name {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size8);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--evergreen);
  margin-bottom: var(--margin3);
}

.price-plan .plan-cost {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  color: var(--black);
  line-height: 1;
  margin-bottom: 4px;
}

.price-plan .plan-cost .amount { font-size: var(--size2); }
.price-plan .plan-cost .currency { font-size: var(--size4); vertical-align: top; margin-right: 2px; }
.price-plan .plan-cost .period {
  font-family: "Instrument Sans", sans-serif;
  font-size: var(--size7);
  color: var(--evergreen);
  font-weight: 400;
  margin-left: 4px;
}

.price-plan .plan-desc {
  font-size: var(--size8);
  color: var(--evergreen);
  margin-bottom: var(--margin3);
  min-height: 2.5em;
}

.price-plan .fancy-list {
  text-align: left;
  margin-bottom: var(--margin3);
}

.price-plan .fancy-list li {
  color: var(--black);
  font-size: var(--size7);
}

.price-plan .cta {
  margin-top: auto;
}

/* ── Testimonial Grid ── */
.testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--margin2);
}

.testimonial {
  padding: var(--margin2);
  background: var(--evergreen);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: var(--margin3);
}

.testimonial-stars {
  color: var(--amber-flame);
  font-size: var(--size6);
  letter-spacing: 2px;
  line-height: 1;
}

.testimonial-quote {
  font-family: "Instrument Sans", sans-serif;
  font-size: var(--size7);
  line-height: 1.55em;
  color: var(--platinum);
  margin: 0;
  quotes: none;
}

.testimonial-quote::before,
.testimonial-quote::after { content: none; }

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: var(--margin3);
  border-top: 1px solid rgba(235, 239, 237, 0.12);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--hunter-green);
  color: var(--platinum);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  font-size: var(--size8);
  flex-shrink: 0;
}

.testimonial-name {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size7);
  color: var(--platinum);
  line-height: 1.2em;
}

.testimonial-meta {
  font-size: var(--size8);
  color: var(--muted-teal);
  line-height: 1.2em;
  margin-top: 2px;
}

/* Light-section testimonial overrides */
.section-light .testimonial { background: var(--white); box-shadow: 0 2px 8px rgba(5, 10, 6, 0.1); }
.section-light .testimonial-quote { color: var(--black); }
.section-light .testimonial-author { border-top-color: rgba(5, 10, 6, 0.08); }
.section-light .testimonial-name { color: var(--black); }
.section-light .testimonial-meta { color: var(--pine-teal); }

/* ═══════════════════════════════════════════════════════════════════
   PHASE 3 COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Flip Box (CSS 3D) ── */
.flip-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--margin2);
}

.flip-box {
  perspective: 1200px;
  height: 280px;
  cursor: pointer;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner,
.flip-box:focus-within .flip-box-inner,
.flip-box.is-flipped .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: var(--margin2);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
}

.flip-box-front {
  background: var(--hunter-green);
  color: var(--platinum);
}

.flip-box-back {
  background: var(--evergreen);
  color: var(--platinum);
  transform: rotateY(180deg);
  border: 1px solid var(--jungle-green);
}

.flip-box-face h4 {
  font-family: "Instrument Serif", serif;
  font-size: var(--size4);
  font-weight: 400;
  color: var(--platinum);
}

.flip-box-face p {
  font-size: var(--size7);
  color: var(--ash-grey);
  line-height: 1.5em;
  margin: 0;
}

.flip-box-face .fancy-box-icon {
  background: rgba(235, 239, 237, 0.15);
  color: var(--platinum);
}

@media (prefers-reduced-motion: reduce) {
  .flip-box-inner { transition: none; }
}

/* ── Carousel (generic — images OR testimonials) ── */
.carousel {
  position: relative;
  padding: 0 var(--margin3);
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: var(--margin2);
  padding-bottom: var(--margin3);
  scroll-padding: 0 var(--margin3);
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-slide {
  flex: 0 0 86%;
  scroll-snap-align: start;
  min-width: 0;
}

@media (min-width: 640px) {
  .carousel-slide { flex: 0 0 calc((100% - var(--margin2)) / 2); }
}

@media (min-width: 960px) {
  .carousel-slide { flex: 0 0 calc((100% - var(--margin2) * 2) / 3); }
}

.carousel-prev, .carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(5, 10, 6, 0.7);
  color: var(--platinum);
  border: 1px solid var(--muted-teal);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.carousel-prev:hover, .carousel-next:hover {
  background: var(--black);
  border-color: var(--jungle-green);
}

.carousel-prev:focus-visible, .carousel-next:focus-visible {
  outline: 2px solid var(--jungle-green);
  outline-offset: 2px;
}

.carousel-prev { left: 0; }
.carousel-next { right: 0; }

.carousel-prev svg, .carousel-next svg { width: 18px; height: 18px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--margin3);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-teal);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, width 0.25s;
}

.carousel-dot.active {
  background: var(--jungle-green);
  width: 24px;
  border-radius: 4px;
}

.carousel-dot:focus-visible {
  outline: 2px solid var(--jungle-green);
  outline-offset: 3px;
}

/* Image slide (generic image card for carousel) */
.image-slide {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--evergreen);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--platinum);
  font-family: "Instrument Serif", serif;
  font-size: var(--size3);
}

.image-slide.slide-1 { background: linear-gradient(135deg, var(--hunter-green), var(--pine-teal)); }
.image-slide.slide-2 { background: linear-gradient(135deg, var(--pine-teal), var(--evergreen)); }
.image-slide.slide-3 { background: linear-gradient(135deg, var(--muted-teal), var(--hunter-green)); color: var(--black); }
.image-slide.slide-4 { background: linear-gradient(135deg, var(--evergreen), var(--black)); }
.image-slide.slide-5 { background: linear-gradient(135deg, var(--jungle-green), var(--hunter-green)); }

/* ── Image Comparison (before/after slider) ── */
.image-compare {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  --pos: 50;
  user-select: none;
  background: var(--black);
}

.image-compare img,
.image-compare .compare-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--platinum);
  font-family: "Instrument Serif", serif;
  font-size: var(--size2);
}

.image-compare .compare-before { background: linear-gradient(135deg, var(--evergreen), var(--black)); z-index: 1; }
.image-compare .compare-after  { background: linear-gradient(135deg, var(--jungle-green), var(--hunter-green)); z-index: 2; clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0); }

.image-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 1%);
  transform: translateX(-50%);
  width: 2px;
  background: var(--platinum);
  pointer-events: none;
  z-index: 3;
}

.image-compare-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--platinum);
  border: 2px solid var(--hunter-green);
  box-shadow: 0 2px 10px rgba(5, 10, 6, 0.4);
}

.image-compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  z-index: 1;
  /* Two chevrons side-by-side: ⟨ at x=4–10, ⟩ at x=14–20 */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B614A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='10 18 4 12 10 6'/><polyline points='14 6 20 12 14 18'/></svg>") no-repeat center / contain;
}

.image-compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  -webkit-appearance: none;
  appearance: none;
}

.image-compare-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 40px;
  cursor: ew-resize;
}

.image-compare-range::-moz-range-thumb {
  width: 40px;
  height: 40px;
  cursor: ew-resize;
  border: none;
  opacity: 0;
}

.image-compare-range:focus-visible + .image-compare-handle::before {
  box-shadow: 0 0 0 3px var(--jungle-green);
}

.image-compare-label {
  position: absolute;
  top: var(--margin3);
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size9);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--platinum);
  background: rgba(5, 10, 6, 0.7);
  padding: 4px 10px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}

.image-compare-label-before { left: var(--margin3); }
.image-compare-label-after  { right: var(--margin3); }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade           { transform: none; }
.reveal-slide-left     { transform: translateX(-30px); }
.reveal-slide-left.is-visible  { transform: translateX(0); }
.reveal-slide-right    { transform: translateX(30px); }
.reveal-slide-right.is-visible { transform: translateX(0); }
.reveal-scale          { transform: scale(0.92); }
.reveal-scale.is-visible       { transform: scale(1); }

/* Staggered children — delays cascade */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-stagger.is-visible > *           { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── Animated Titles ── */

/* Letter-by-letter fade-in */
.animated-title-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: atitle-letter-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes atitle-letter-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Rotating words — three-phase transition: fade out → width animates → fade in.
   JS pre-measures each word's width; container transitions width BETWEEN swaps.

   NOTE: no `overflow: hidden` — that would force the inline-block's baseline
   to the bottom margin edge (CSS2 visudet §10.8), misaligning the word with
   its surrounding text. Any mid-swap "overflowing" text is at opacity:0 so
   it's invisible anyway. `pointer-events: none` during fade prevents clicks
   on the invisible bits. */
.rotating-words {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  transition: opacity 0.3s ease, width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, width;
}

.rotating-words.is-fading {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rotating-words { transition: none; }
}

/* Gradient sweep */
.gradient-sweep {
  background: linear-gradient(90deg, var(--jungle-green) 0%, var(--amber-flame) 50%, var(--jungle-green) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  animation: gradient-sweep 4s linear infinite;
}

@keyframes gradient-sweep {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-title-char { opacity: 1; transform: none; animation: none; }
  .gradient-sweep { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 4 COMPONENTS — shape dividers, bg textures, cascading images, VSL
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shape Dividers ── */
.shape-divider {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.shape-divider-top    { top: 0; }
.shape-divider-bottom { bottom: 0; }
.shape-divider-flip   { transform: scaleX(-1); }
.shape-divider-top.shape-divider-flip    { transform: scaleX(-1) scaleY(-1); }
.shape-divider-top:not(.shape-divider-flip) { transform: scaleY(-1); }

.shape-divider svg {
  display: block;
  width: 100%;
  height: 80px;   /* override per-instance with inline style if needed */
}

.shape-divider path {
  fill: currentColor;   /* set `color:` on the section that OWNS the divider */
}

/* ── Background Textures ── */

/* Animated mesh gradient — slowly-shifting radial blobs */
.bg-mesh {
  background:
    radial-gradient(at 22% 30%, var(--hunter-green) 0%, transparent 55%),
    radial-gradient(at 80% 20%, var(--jungle-green) 0%, transparent 50%),
    radial-gradient(at 60% 80%, var(--pine-teal) 0%, transparent 55%),
    radial-gradient(at 25% 75%, var(--hunter-green) 0%, transparent 45%),
    var(--evergreen);
  background-size: 200% 200%, 180% 180%, 220% 220%, 190% 190%, 100% 100%;
  animation: bg-mesh-shift 28s ease-in-out infinite;
}

@keyframes bg-mesh-shift {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%, 0% 0%; }
  50%      { background-position: 100% 100%, 0% 80%, -20% 20%, 100% 0%, 0% 0%; }
}

/* SVG noise/grain overlay — adds film-grain texture without changing base color */
.bg-grain { position: relative; }

.bg-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* Subtle dot pattern */
.bg-dots {
  background-image:
    radial-gradient(circle, rgba(235, 239, 237, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bg-dots.on-light {
  background-image:
    radial-gradient(circle, rgba(5, 10, 6, 0.1) 1px, transparent 1px);
}

/* ── Cascading Images ── */
.cascading-images {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

.cascade-img {
  position: absolute;
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(5, 10, 6, 0.35);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  object-fit: cover;
}

.cascade-img-back  { top: 0;   left: 0;    width: 55%; aspect-ratio: 3/4; transform: rotate(-5deg); z-index: 1; }
.cascade-img-mid   { top: 18%; left: 35%;  width: 55%; aspect-ratio: 3/4; transform: rotate(2deg);  z-index: 2; }
.cascade-img-front { top: 42%; left: 12%;  width: 60%; aspect-ratio: 4/3; transform: rotate(-2deg); z-index: 3; }

.cascading-images:hover .cascade-img-back  { transform: rotate(-7deg) translateY(-6px); }
.cascading-images:hover .cascade-img-mid   { transform: rotate(3deg)  translateY(-3px); }
.cascading-images:hover .cascade-img-front { transform: rotate(-1deg) translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
  .cascade-img { transition: none; }
  .cascading-images:hover .cascade-img-back,
  .cascading-images:hover .cascade-img-mid,
  .cascading-images:hover .cascade-img-front { /* preserve resting rotation, no lift */ }
  .cascading-images:hover .cascade-img-back  { transform: rotate(-5deg); }
  .cascading-images:hover .cascade-img-mid   { transform: rotate(2deg); }
  .cascading-images:hover .cascade-img-front { transform: rotate(-2deg); }
}

/* ── VSL — Vidalytics embed + .vhide utility for CTA reveal.
   Reveal timing is configured in the Vidalytics admin panel; the player
   toggles the .vhide class on target elements when the configured
   timestamp is reached. No client-side timing JS needed from our side. ── */
.vsl {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

/* Utility: hide until Vidalytics (or other logic) removes the class */
.vhide { display: none !important; }

.vsl-cta-wrap { margin-top: var(--margin2); }

.vsl-label {
  display: block;
  font-family: "Instrument Sans", sans-serif;
  font-weight: 600;
  font-size: var(--size8);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--jungle-green);
  margin-bottom: var(--margin3);
}

/* CTA shared (used by pricing table) — matches the main sales-page CTA */
.cta {
  display: inline-block;
  background: var(--amber-flame);
  border: 1px solid #FFF500;
  color: var(--black);
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: var(--size5);
  line-height: 1em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 245, 0, 1);
  border-radius: 5px;
  padding: 0.55em 1.2em;
  box-shadow: 0 3px 6px rgba(5, 10, 6, 0.25);
  cursor: pointer;
  transition: background 0.2s;
  width: 100%;
}

.cta:hover, .cta:focus { background: #FFC637; }

/* Mobile */
@media (max-width: 768px) {
  :root {
    --size1: 2.986em;
    --size2: 2.488em;
    --size3: 2.074em;
    --size4: 1.728em;
    --size5: 1.44em;
    --size6: 1.2em;
    --size8: 0.833em;
    --size9: 0.694em;
  }
  .section { padding: 64px 0; }
}