/** Shopify CDN: Minification failed

Line 1315:0 Unexpected "<"

**/
/* ════════════════════════════════════════════════════════════════════
   SKYFALL — Lenis scroll study, restyled to the house dark palette.
   Layout + motion ported 1:1 from the Claude Design handoff; only the
   colour system is remapped from the original cream/paper palette to
   Skyfall's dark damascus + champagne gold.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces — dark */
  --bg:         #0a0b0d;
  --bg-2:       #111317;
  --panel:      #131519;   /* lifted dark card surface (gallery frames) */
  --panel-deep: #050608;   /* deepest black (parallax band) */
  /* Ink — light on dark */
  --ink:        #ecedee;
  --ink-dim:    #c9ccd1;
  --ink-2:      #9fa3aa;
  --ink-3:      #6a6e75;
  --line:       rgba(236, 237, 238, 0.10);
  --line-2:     rgba(236, 237, 238, 0.18);
  /* Champagne gold */
  --gold:       #92bcdd;
  --gold-warm:  #6f9abf;
  --gold-soft:  #e0ecf7;
  --gold-deep:  #4c7197;
  /* Type */
  /* House typography — matches SEO / PMAX / SPECTRA. Playfair Display
     (display) + Cormorant Garamond (gold accents, used upright since
     this page is italic-free) + Manrope (body) + JetBrains Mono
     (labels, captions, chapter marks). */
  --f-disp: 'Playfair Display', Georgia, serif;
  --f-body: 'Manrope', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --f-acc:  'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --f-mark: 'Michroma', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
/* isolation creates a stacking context on body so the z-index:-1
   damascus pseudo-elements render above body's own background
   instead of being hidden behind it. */
body { isolation: isolate; }

/* ═══ Universal site backdrop — silver damascus at 0.12 opacity,
   matching the global #sk-damascus-bg from theme.liquid and the other
   Skyfall product pages. Every section sits on transparent backgrounds
   so this shows through the whole page. ═══ */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: #06070a;
  background-image: url('../assets/damascus-ref.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.12;
  filter: brightness(0.9) saturate(0.25) contrast(1.05);
}
/* Faint warm wash above the damascus to keep the surface from going flat */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 32%, rgba(146,188,221,0.05), transparent 72%);
}

a { color: inherit; text-decoration: none; }
/* No italics anywhere — em accents are distinguished by the gold
   gradient and weight, never by slant. */
em, i { font-style: normal; }

/* ── Scroll progress (small mono index at top right) ── */
.head-rail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 32px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--ink-3); text-transform: uppercase;
  pointer-events: none;
}
.head-rail .mark {
  font-family: var(--f-disp); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); text-transform: none;
}
.head-rail .mark em { font-family: var(--f-acc); font-style: normal; color: var(--gold); font-weight: 500; }
.head-rail .pct { display: inline-flex; align-items: baseline; gap: 6px; }
.head-rail .pct strong {
  font-family: var(--f-mono); font-weight: 500; font-size: 11px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════
   1) PINNED HERO — title stays pinned while content animates
   ════════════════════════════════════════════════ */
.hero {
  height: 100vh;
  min-height: 720px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 100px 32px 60px;
}
/* Engagement-ripple backdrop (driven by skyfall-social.js) + a vignette
   veil so the ripples sink into the frame edges and the title centre
   stays the brightest point of the composition. */
/* Fixed viewport backdrop — a ripple field behind all content (z-index -1,
   above the damascus body backdrop). Lifted to <body> by the JS and
   viewport-fixed so it is never clipped by a section box.
   SCOPED to the social hero only: in-section before the JS lift, and as a
   direct <body> child after it. Other product pages share the .hero__canvas
   class for their own contained hero canvases — this must NOT match those,
   or every hero would get fixed full-viewport and take over the page. */
.section-social-hero .hero__canvas,
body > .hero__canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: -1; pointer-events: none;
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 48%, rgba(10,11,13,0.55), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(6,7,10,0.6));
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: 1480px;
  width: 100%;
  text-align: center;
}
.hero__crumb {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 16px;
  margin-bottom: 40px;
}
.hero__crumb em { font-style: normal; color: var(--gold); }
.hero__crumb-rule { width: 36px; height: 1px; background: var(--ink-3); display: inline-block; }

.hero__title {
  font-family: var(--f-disp); font-weight: 400;
  /* Shared hero scale across SPECTRA / PMAX / Social — was 9.5vw/170
     which was both too big to fit and out of parity with the other
     two product pages. */
  font-size: clamp(48px, 7.5vw, 110px);
  line-height: 0.95; letter-spacing: -0.02em;
  color: var(--ink);
}
.hero__title em {
  font-family: var(--f-acc); font-style: normal; font-weight: 500;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: inline-block; will-change: transform; }

.hero__sub {
  margin-top: 56px;
  font-family: var(--f-acc); font-style: normal; font-weight: 400;
  font-size: clamp(20px, 1.9vw, 30px); line-height: 1.4;
  color: var(--ink-2);
  max-width: 42ch; margin-left: auto; margin-right: auto;
}
.hero__sub em { font-style: normal; color: var(--gold); }

.hero__meta {
  margin-top: 64px;
  display: inline-flex; gap: 64px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3);
}
.hero__meta strong {
  display: block; font-family: var(--f-disp); font-weight: 500;
  font-size: 34px; letter-spacing: -0.02em; text-transform: none;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  /* Gold gradient on the big numbers — adds visible gold to the hero. */
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__meta strong em { font-family: var(--f-acc); font-style: normal; color: var(--gold); font-weight: 500; font-size: 0.55em; vertical-align: super; }

.hero__floor {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2;
  display: flex; justify-content: space-between; padding: 0 32px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-3);
}
.hero__floor em { font-style: normal; color: var(--gold); }

/* ════════════════════════════════════════════════
   2) MANIFESTO — scrubbed word-by-word reveal as you scroll
   ════════════════════════════════════════════════ */
.manifesto {
  /* trimmed from 200vh — even with sticky working there was a long
     empty band after the word-by-word reveal finished. 180vh leaves
     enough pinned scroll for the reveal without dead tail. */
  min-height: 180vh;
  position: relative;
  padding: 0 32px;
}
/* Defend against Shopify / Dawn overflow / transform rules on
   ancestors that would silently kill position:sticky on
   .manifesto__inner and leave the section as a giant empty band. */
html, body, main, #MainContent,
.shopify-section.section-social-manifesto,
section.section-social-manifesto {
  /* Keep the VERTICAL axis visible so position:sticky on .manifesto__inner
     survives, but clip the HORIZONTAL axis so the oversized decorative
     watermarks (DOCTRINE / WORK / ENGINE / ENGAGE) can't push the page
     into horizontal scroll. overflow-x:clip + overflow-y:visible is a valid
     pair that does NOT coerce overflow-y to auto, so sticky still works. */
  overflow-x: clip !important;
  overflow-y: visible !important;
  transform: none !important;
  filter: none !important;
  contain: none !important;
}
.section-social-manifesto .manifesto__inner {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
}
.manifesto__inner {
  position: sticky; top: 0;
  isolation: isolate;
  height: 100vh;
  display: flex; align-items: center; justify-content: flex-start;
  /* Left-aligned within a centred max-width column, matching the SPECTRA /
     PMAX Chapter 01 statements ("centered left"). */
  max-width: 1200px; margin: 0 auto; width: 100%;
}
/* Ghosted background word — sticks with the inner content while the
   section is pinned, so it stays centred behind the manifesto text. */
.manifesto__inner::before {
  content: "DOCTRINE";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(160px, 24vw, 380px);
  letter-spacing: -0.05em; line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(146, 188, 221, 0.10);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
  text-transform: uppercase;
}
.manifesto__text {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(24px, 3.6vw, 50px);
  line-height: 1.25; letter-spacing: -0.02em;
  max-width: none; width: 100%; text-align: left;
}
.manifesto__text em {
  font-family: var(--f-acc); font-style: normal; font-weight: 500;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.manifesto__word {
  display: inline-block;
  opacity: 0.12;
  will-change: opacity;
  transition: opacity 0.3s ease;
}

.manifesto__num {
  position: absolute; top: 60px; left: 32px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.32em; color: var(--gold);
  text-transform: uppercase;
}
.manifesto__num em { font-style: normal; color: var(--ink-3); }

/* ════════════════════════════════════════════════
   3) CLIP REVEAL — images uncovered by expanding mask
   ════════════════════════════════════════════════ */
.gallery {
  padding: 160px 32px 200px;
  position: relative;
  isolation: isolate;
  max-width: 1180px;
  margin: 0 auto;
}
/* Ghosted background word — outlined gold-stroke, sits behind the
   pillars at very low opacity. Anchors the chapter visually so the
   scattered typography composes against something solid. */
.gallery::before {
  content: "WORK";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(180px, 26vw, 420px);
  letter-spacing: -0.05em; line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(146, 188, 221, 0.10);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
  text-transform: uppercase;
}
/* Closing rule — a small centered gold hairline below pillar 05's
   description, signalling the chapter is complete. */
.gallery::after {
  content: "";
  position: absolute;
  bottom: 90px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 1px;
  background: var(--gold);
}
.gallery__num {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.32em; color: var(--gold);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 32px;
}
.gallery__num em { font-style: normal; color: var(--ink-3); }
.gallery__num::after { content: ""; width: 60px; height: 1px; background: var(--gold); }

.gallery__head {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px;
  align-items: end; margin-bottom: 120px;
  padding-bottom: 32px; border-bottom: 1px solid var(--line);
}
.gallery__head h2 {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(36px, 5vw, 78px); line-height: 0.96; letter-spacing: -0.03em;
}
.gallery__head h2 em {
  font-family: var(--f-acc); font-style: normal; font-weight: 500;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gallery__head p {
  font-family: var(--f-acc); font-style: normal; font-size: 22px; line-height: 1.45;
  color: var(--ink-2); max-width: 36ch;
}

@media (max-width: 800px) {
  .gallery__head { grid-template-columns: 1fr; gap: 24px; }
}

/* Pillars are typography only — no cards, no boxes. They sit on a
   12-column grid with bespoke placement and y-offsets so the layout
   reads as scattered editorial typography rather than a uniform grid.
   Row gap kept tight so the 5 pillars feel like one composition. */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 50px 22px;
  padding: 20px 0 60px;
}
.pillar {
  display: flex; flex-direction: column; gap: 16px;
  will-change: transform, opacity;
  /* Cluster-wide hover: number / name / tag all warm in concert,
     a gold gradient underline draws under the name, and the em
     accent gains a soft drop-shadow glow. */
}
.pillar__num {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em;
  color: var(--gold); text-transform: uppercase;
  transition: color 0.45s cubic-bezier(0.2,0.7,0.2,1),
              letter-spacing 0.45s cubic-bezier(0.2,0.7,0.2,1);
}
.pillar:hover .pillar__num {
  color: var(--gold-soft);
  letter-spacing: 0.36em;
}
.pillar__name {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(40px, 5.8vw, 100px);
  line-height: 0.98; letter-spacing: -0.03em;
  color: var(--ink);
  position: relative;
  /* Prevent mid-word breaks (e.g. "Communi / ty"). Words wrap at
     whitespace only; long words can overflow rather than splitting. */
  hyphens: manual;
  word-break: keep-all;
  overflow-wrap: normal;
  transition: color 0.45s cubic-bezier(0.2,0.7,0.2,1),
              transform 0.55s cubic-bezier(0.2,0.7,0.2,1);
}
.pillar__name::after {
  content: "";
  position: absolute;
  left: 0; bottom: -12px;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold-deep), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
}
.pillar:hover .pillar__name {
  color: var(--gold-soft);
  /* transform is driven by the magnetic-pull script — handled in JS
     so it can track the cursor live instead of snapping to a fixed
     offset. */
}
.pillar:hover .pillar__name::after { transform: scaleX(1); }
/* Centered pillar — underline grows out from center, not left edge */
.pillar--05 .pillar__name::after { transform-origin: center; }
.pillar__name em {
  font-family: var(--f-acc); font-weight: 600;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: filter 0.5s cubic-bezier(0.2,0.7,0.2,1);
}
.pillar:hover .pillar__name em {
  filter: brightness(1.18) drop-shadow(0 0 14px rgba(146,188,221,0.32));
}
.pillar__tag {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-3); text-transform: uppercase;
  transition: color 0.45s cubic-bezier(0.2,0.7,0.2,1);
}
.pillar:hover .pillar__tag { color: var(--ink-dim); }

/* Scatter placement — pillars alternate left and right; their
   descriptions sit on the opposite side with a single-column gap so
   the pair reads as visually paired without crowding the pillar. */
.pillar--01      { grid-column: 1 / span 5;  grid-row: 1; }
.pillar__desc--01{ grid-column: 7 / span 4;  grid-row: 1; align-self: center; }

.pillar--02      { grid-column: 7 / span 5;  grid-row: 2; margin-top: -25px; }
.pillar__desc--02{ grid-column: 2 / span 4;  grid-row: 2; align-self: center; margin-top: -25px; }

.pillar--03      { grid-column: 2 / span 5;  grid-row: 3; margin-top: 10px; }
.pillar__desc--03{ grid-column: 8 / span 4;  grid-row: 3; align-self: center; margin-top: 10px; }

.pillar--04      { grid-column: 7 / span 5;  grid-row: 4; margin-top: -20px; }
.pillar__desc--04{ grid-column: 2 / span 4;  grid-row: 4; align-self: center; margin-top: -20px; }

.pillar--05      { grid-column: 3 / span 8;  grid-row: 5; text-align: center; align-items: center; margin-top: 30px; }
.pillar--05 .pillar__name {
  max-width: 18ch;
  /* Pillar 05 is the chapter close — size it noticeably bigger than
     the others so it reads as the finale, not a fifth pillar. */
  font-size: clamp(48px, 6.8vw, 120px);
}
.pillar__desc--05{ grid-column: 4 / span 6;  grid-row: 6; justify-self: center; text-align: center; }

/* Pillar descriptions — bigger, higher contrast, and anchored by a
   small gold rule above so they read as deliberately paired with
   their pillar rather than floating loose. Cormorant Garamond
   matches the house body voice from the other product pages. */
.pillar__desc {
  font-family: var(--f-acc); font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5; letter-spacing: 0.005em;
  color: var(--ink-dim);
  max-width: 36ch;
  position: relative;
  padding-top: 26px;
  will-change: transform, opacity;
}
.pillar__desc::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 48px; height: 1px;
  background: var(--gold);
}
.pillar__desc--05 {
  text-align: center;
}
.pillar__desc--05::before {
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .gallery__grid { gap: 40px 16px; padding: 16px 0 40px; }
  .pillar { grid-column: 1 / -1 !important; grid-row: auto !important;
            margin-top: 0 !important; text-align: left !important;
            align-items: flex-start !important; }
  .pillar__desc { grid-column: 1 / -1 !important; grid-row: auto !important;
                  margin-top: 0 !important; align-self: auto !important;
                  justify-self: auto !important; text-align: left !important; }
  .pillar--05 .pillar__name { max-width: 100%; }
}

/* ════════════════════════════════════════════════
   4) PARALLAX BAND — layers move at different speeds
   ════════════════════════════════════════════════ */
.parallax {
  position: relative;
  /* No fixed height + transparent background — the section now hugs
     its content and lets the page's damascus show through, so the
     dark strip below the headline is gone. */
  padding: 140px 32px 100px;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
}
.parallax__bg {
  position: absolute; inset: 0;
  /* Just a quiet warm radial glow now — no dark gradient band */
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(146,188,221,0.07), transparent 70%);
  will-change: transform;
}
.parallax__bg-text {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(140px, 22vw, 380px);
  letter-spacing: -0.05em; line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px rgba(146,188,221,0.18);
  white-space: nowrap;
  will-change: transform;
}
.parallax__mid {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  will-change: transform;
}
.parallax__mid h3 {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(44px, 7vw, 130px);
  line-height: 1.0; letter-spacing: -0.03em;
  text-align: center; max-width: 14ch;
  color: var(--ink);
}
.parallax__mid h3 em {
  font-family: var(--f-acc); font-style: normal; font-weight: 500;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.parallax__fg {
  position: relative;
  margin-top: 60px;
  display: flex; justify-content: space-between;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-3); z-index: 3;
  will-change: transform;
}
.parallax__fg em { font-style: normal; color: var(--gold-soft); }

/* ════════════════════════════════════════════════
   5) STAGGERED LINES — fade + rise on entry
   ════════════════════════════════════════════════ */
.lines {
  padding: 200px 32px;
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 2.2fr; gap: 80px;
  align-items: start;
  position: relative;
  isolation: isolate;
}
.lines::before {
  content: "ENGINE";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(180px, 26vw, 420px);
  letter-spacing: -0.05em; line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(146, 188, 221, 0.10);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
  text-transform: uppercase;
}
.lines__num {
  position: sticky; top: 100px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--gold); text-transform: uppercase;
}
.lines__num em { font-style: normal; color: var(--ink-3); }
.lines__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.lines__row {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(22px, 3.2vw, 48px);
  line-height: 1.18; letter-spacing: -0.02em;
  color: var(--ink);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 80px 1fr auto;
  align-items: baseline; gap: 28px;
  overflow: hidden;
}
.lines__row .n {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ink-3);
  text-transform: uppercase;
}
.lines__row .t em {
  font-family: var(--f-acc); font-style: normal; font-weight: 500;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lines__row .meta {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-3);
  text-transform: uppercase; align-self: end;
}
.lines__row > * { will-change: transform, opacity; }

@media (max-width: 800px) {
  .lines { grid-template-columns: 1fr; gap: 28px; padding: 100px 24px; }
  .lines__num { position: static; }
  .lines__row { grid-template-columns: 40px 1fr; gap: 14px; }
  .lines__row .meta { display: none; }
}

/* ════════════════════════════════════════════════
   7) FINAL CTA — universal pattern shared with SEO / PMAX / SPECTRA
   ════════════════════════════════════════════════ */
.final {
  position: relative; padding: 160px 32px 140px; text-align: center; overflow: hidden;
}
.final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70vw 50vh at 50% 50%, rgba(146,188,221,0.06), transparent 70%);
  pointer-events: none;
}
.final__overline {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
  display: inline-flex; align-items: center; gap: 14px;
}
.final__overline::before, .final__overline::after {
  content: ""; width: 40px; height: 1px; background: var(--gold-deep);
}
.final__h {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(48px, 7vw, 110px); line-height: 0.95; letter-spacing: -0.02em;
  max-width: 18ch; margin: 0 auto 30px;
  color: var(--ink);
}
.final__h em {
  font-family: var(--f-acc); font-weight: 500;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.final__sub {
  font-family: var(--f-acc); font-weight: 400;
  font-size: 21px; color: var(--ink-2);
  max-width: 56ch; margin: 0 auto 50px;
  line-height: 1.5;
}
.final__cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.btn-magnetic {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 20px 36px 20px 56px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  cursor: pointer; min-width: 280px;
  background: linear-gradient(180deg, rgba(36,38,42,0.85), rgba(10,11,13,0.92));
  color: var(--ink);
  border: 1px solid rgba(201,204,209,0.4);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 0 24px rgba(0,0,0,0.5);
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), border-color 0.3s, box-shadow 0.3s;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  will-change: transform;
}
.btn-magnetic::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(236,237,238,0.22) 50%, transparent 60%);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
}
.btn-magnetic::after {
  content: ""; position: absolute; left: 24px; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(103,144,183,0.15), 0 0 8px rgba(103,144,183,0.6);
  transform: translateY(-50%);
  animation: btn-pulse 2.2s ease-in-out infinite;
}
@keyframes btn-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(103,144,183,0.12), 0 0 6px rgba(103,144,183,0.45); }
  50%     { box-shadow: 0 0 0 4px rgba(103,144,183,0.22), 0 0 14px rgba(103,144,183,0.85); }
}
.btn-magnetic:hover {
  border-color: rgba(103,144,183,0.7);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 0 36px rgba(103,144,183,0.35);
}
.btn-magnetic:hover::before { transform: translateX(110%); }
.btn-magnetic--ghost { background: transparent; padding: 20px 36px; box-shadow: none; }
.btn-magnetic--ghost::after { display: none; }
.btn-magnetic--ghost:hover { color: var(--gold); }
@media (max-width: 800px) {
  .final { padding: 100px 24px 90px; }
  .btn-magnetic { min-width: 240px; }
}

/* ════════════════════════════════════════════════
   5) PACKAGES — three engagement tiers
   ════════════════════════════════════════════════ */
.packages {
  padding: 60px 32px 28px;
  max-width: 1320px; margin: 0 auto;
  position: relative;
  isolation: isolate;
}
.packages::before {
  content: "ENGAGE";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(180px, 26vw, 420px);
  letter-spacing: -0.05em; line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px rgba(146, 188, 221, 0.10);
  white-space: nowrap;
  pointer-events: none;
  z-index: -1;
  text-transform: uppercase;
}
.packages__num {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.32em; color: var(--gold); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 36px;
}
.packages__num em { color: var(--ink-3); }
.packages__num::after { content: ""; width: 60px; height: 1px; background: var(--gold); }
.packages__head {
  margin-bottom: 72px;
  padding-bottom: 32px; border-bottom: 1px solid var(--line);
}
.packages__head h2 {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(36px, 5vw, 78px); line-height: 0.96; letter-spacing: -0.03em;
  color: var(--ink);
}
.packages__head h2 em {
  font-family: var(--f-acc); font-weight: 600;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.packages__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
@media (max-width: 920px) {
  .packages__grid { grid-template-columns: 1fr; }
}
.pkg {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 40px 34px;
  display: flex; flex-direction: column;
  will-change: transform, opacity;
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.35s ease, background 0.35s ease;
}
/* Buy form — wraps only the hidden variant id input and the two
   CTAs. Direct flex child of .pkg, so it sits as a tight footer
   under the configurator drawer without forcing any layout
   contortion on the rest of the card. */
.pkg__buy { display: flex; flex-direction: column; gap: 10px; margin: 24px 0 0; }
.pkg--featured {
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, rgba(146,188,221,0.07), rgba(146,188,221,0) 55%), var(--panel);
}
/* Active / dim states. When any card in the section becomes active,
   it gains .pkg--active and the others get .pkg--dim. */
.pkg--dim {
  opacity: 0.42;
  transform: scale(0.985);
  filter: saturate(0.7);
}
.pkg--dim:hover { opacity: 0.7; }
.pkg--active {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(146,188,221,0.10), rgba(146,188,221,0) 55%), var(--panel);
  box-shadow: 0 0 0 1px rgba(146,188,221,0.35), 0 30px 60px rgba(0,0,0,0.45);
}
.pkg__tag {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
}
.pkg__name {
  font-family: var(--f-disp); font-weight: 500;
  font-size: 30px; letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 8px;
}
/* Tagline hook — the positioning line straight from the Shopify
   product page, between the tier name and the price. */
.pkg__hook {
  font-family: var(--f-acc); font-weight: 400;
  font-size: 16px; line-height: 1.45;
  color: var(--ink-dim);
  margin-bottom: 22px;
}
.pkg__price {
  font-family: var(--f-disp); font-weight: 400;
  font-size: 44px; letter-spacing: -0.03em; color: var(--ink);
  line-height: 1;
}
.pkg__price em {
  font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-3); font-weight: 400;
}
/* Custom / consult tier — shown instead of a live price (e.g. "By
   application"). Reads as an elegant label, not a number. */
.pkg__price--custom {
  font-family: var(--f-acc); font-weight: 500;
  font-size: 28px; letter-spacing: -0.005em; line-height: 1.1;
  color: var(--gold-soft); margin-bottom: 24px;
}
.pkg__per {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3); margin: 8px 0 4px;
}
.pkg__save {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); min-height: 14px; margin-bottom: 18px;
}
.pkg__rule { height: 1px; background: var(--line); margin: 0 -34px 26px; }
.pkg__list { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 30px; }
.pkg__list li {
  font-family: var(--f-body); font-size: 14px; line-height: 1.5; color: var(--ink-2);
  padding-left: 20px; position: relative;
}
.pkg__list li::before { content: "—"; position: absolute; left: 0; color: var(--gold-deep); }
.pkg__list li strong { color: var(--ink); font-weight: 600; }
.pkg__best {
  font-family: var(--f-acc); font-size: 16px; line-height: 1.45; color: var(--ink-3);
  padding-top: 22px; margin-top: auto; border-top: 1px solid var(--line);
}
/* Configurator drawer — folded into the card. Collapsed by default;
   reveals (height + opacity) when the card gains .pkg--active. */
.pkg__config {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.4s ease;
  margin-top: 0;
}
.pkg--active .pkg__config {
  max-height: 360px;
  opacity: 1;
  margin-top: 6px;
  margin-bottom: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.pkg__config-row {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.pkg__config-row:last-child { margin-bottom: 0; }
.pkg__config-lbl {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
}
.pkg__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.chip { position: relative; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.chip input {
  position: absolute; opacity: 0; pointer-events: none;
}
.chip span {
  display: block; text-align: center;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: rgba(10,11,13,0.4);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.chip:hover span {
  border-color: rgba(146,188,221,0.55);
  color: var(--ink);
}
.chip input:checked + span {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(146,188,221,0.18), rgba(146,188,221,0.04));
  color: var(--gold-soft);
  box-shadow: inset 0 0 0 1px rgba(146,188,221,0.35);
}
.chip input:focus-visible + span {
  outline: 1px solid var(--gold-soft); outline-offset: 2px;
}
/* A billing/term combo with no matching variant (e.g. Annual + 6-month) is
   disabled so it can't be selected and silently mapped to the wrong variant. */
/* pointer-events:none blocks label clicks entirely — some browsers still toggle
   a disabled radio via its wrapping label, which let Annual+6-month through. */
.chip--disabled { cursor: not-allowed; pointer-events: none; }
.chip--disabled span { opacity: 0.3; border-style: dashed; color: var(--ink-dim); }
.chip--disabled:hover span { border-color: var(--line); color: var(--ink-dim); }
.pkg__cta--buy:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* Per-card CTAs — same visual language as the .btn-magnetic primary
   button in the final CTA section (dark lifted gradient face, white-
   ish 40% border, pulsing gold dot at the left, shimmer sweep on
   hover). Configure is the default trigger; Add-to-cart replaces it
   once the card is active and stays in the same brand button family. */
.pkg__cta {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 20px 28px 20px 52px;       /* extra left padding for the dot */
  background: linear-gradient(180deg, rgba(36,38,42,0.85), rgba(10,11,13,0.92));
  color: var(--ink);
  border: 1px solid rgba(201,204,209,0.4);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.6),
    0 0 24px rgba(0,0,0,0.5);
  /* Cormorant Garamond — chosen from the side-by-side font comparison. */
  font-family: var(--f-acc); font-style: normal; font-weight: 500;
  font-size: 20px; letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  will-change: transform;
  transition:
    transform 0.25s cubic-bezier(0.2,0.7,0.2,1),
    border-color 0.3s,
    box-shadow 0.3s;
}
/* Shimmer sweep on hover (mirrors .btn-magnetic::before) */
.pkg__cta::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(236,237,238,0.22) 50%, transparent 60%);
  transform: translateX(-110%);
  transition: transform 0.7s cubic-bezier(0.2,0.7,0.2,1);
  pointer-events: none;
}
.pkg__cta:hover::before { transform: translateX(110%); }
/* Pulsing gold dot on the left (mirrors .btn-magnetic::after) */
.pkg__cta::after {
  content: ""; position: absolute; left: 24px; top: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(103,144,183,0.15), 0 0 8px rgba(103,144,183,0.6);
  transform: translateY(-50%);
  animation: btn-pulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
.pkg__cta:hover {
  border-color: rgba(103,144,183,0.7);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.6),
    0 0 36px rgba(103,144,183,0.35);
}
.pkg__cta-label  { position: relative; z-index: 1; }
.pkg__cta-arrow  { display: none; }    /* dot replaces the arrow; brand pattern has no trailing chevron */

/* State switching: only one CTA visible per card */
.pkg__cta--buy { display: none; }
.pkg--active .pkg__cta--select { display: none; }
.pkg--active .pkg__cta--buy { display: flex; }

/* Terms footer — billing frequency, commitment options, add-on. Sits
   below the three tier cards as the chapter's structural footnote. */
.packages__terms {
  margin-top: 64px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 22px;
}
.packages__term { display: flex; flex-direction: column; gap: 10px; }
.packages__term-label {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em;
  color: var(--gold); text-transform: uppercase;
}
.packages__term-val {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(16px, 1.2vw, 20px);
  color: var(--ink-dim); letter-spacing: -0.005em;
  line-height: 1.4;
}
.packages__term-val em { color: var(--gold); }
.packages__note {
  margin-top: 30px;
  font-family: var(--f-acc); font-weight: 400;
  font-size: 15px; line-height: 1.5;
  color: var(--ink-3);
  max-width: 60ch;
}
@media (max-width: 800px) {
  .packages__terms { grid-template-columns: 1fr; gap: 24px; }
}

/* ════════════════════════════════════════════════
   6) CONFIGURE / BUY — variant picker wired to live Shopify variants.
      Single centred column, ghosted "BEGIN" backdrop, same typographic
      vocabulary as the rest of the Social page (mono labels, Playfair
      display, Cormorant accents, gold-soft → gold-deep gradient).
   ════════════════════════════════════════════════ */
/* The buy section is rendered as the closing move of Chapter 05 —
   Engagements, not its own chapter. So: no ghost backdrop, no chapter
   mark, no big H2. A thin bridge rule + mono label hand off from the
   packages above, and the panel itself does the work. */
.sbuy {
  padding: 8px 32px 110px;
  max-width: 1320px; margin: 0 auto;
  position: relative;
}
.sbuy__bridge {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin: 0 auto 18px; max-width: 880px;
}
.sbuy__bridge-rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.sbuy__bridge-lbl {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em;
  color: var(--gold); text-transform: uppercase;
  white-space: nowrap;
}
.sbuy__sub {
  margin: 0 auto 36px;
  max-width: 56ch;
  text-align: center;
  font-family: var(--f-acc); font-style: normal; font-weight: 400;
  font-size: 18px; line-height: 1.5;
  color: var(--ink-2);
}

.sbuy__form { display: block; }

.sbuy__panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(146,188,221,0.04), rgba(146,188,221,0) 60%), var(--panel);
  padding: 56px clamp(28px, 4vw, 60px);
  max-width: 880px; margin: 0 auto;
  position: relative;
}
.sbuy__panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}

.sbuy__row { margin-bottom: 32px; }
.sbuy__row-label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px dashed rgba(201,204,209,0.12);
}
.sbuy__lbl {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em;
  color: var(--gold); text-transform: uppercase;
}
.sbuy__cur {
  font-family: var(--f-acc); font-style: italic; font-weight: 500;
  font-size: 18px; color: var(--ink-dim);
}
.sbuy__pills {
  display: grid; gap: 10px;
}
.sbuy__pills--3 { grid-template-columns: repeat(3, 1fr); }
.sbuy__pills--4 { grid-template-columns: repeat(4, 1fr); }

.sbuy__pill { position: relative; cursor: pointer; }
.sbuy__pill input {
  position: absolute; opacity: 0; pointer-events: none;
}
.sbuy__pill-face {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 18px 14px; min-height: 64px;
  border: 1px solid var(--line);
  background: rgba(10,11,13,0.4);
  text-align: center;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.sbuy__pill--slim .sbuy__pill-face { padding: 14px 10px; min-height: 56px; }
.sbuy__pill-name {
  font-family: var(--f-disp); font-weight: 500;
  font-size: 16px; letter-spacing: -0.01em; color: var(--ink);
}
.sbuy__pill--slim .sbuy__pill-name { font-size: 15px; }
.sbuy__pill-sub {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.24em;
  color: var(--ink-3); text-transform: uppercase;
}
.sbuy__pill:hover .sbuy__pill-face {
  border-color: rgba(146,188,221,0.5);
  background: rgba(146,188,221,0.05);
}
.sbuy__pill input:checked + .sbuy__pill-face {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(146,188,221,0.18), rgba(146,188,221,0.04));
  box-shadow: inset 0 0 0 1px rgba(146,188,221,0.4);
}
.sbuy__pill input:checked + .sbuy__pill-face .sbuy__pill-name { color: var(--gold-soft); }
.sbuy__pill input:checked + .sbuy__pill-face .sbuy__pill-sub  { color: var(--gold); }
.sbuy__pill input:focus-visible + .sbuy__pill-face {
  outline: 1px solid var(--gold-soft); outline-offset: 2px;
}

.sbuy__rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
  margin: 44px 0 28px;
}
.sbuy__price-block { text-align: center; margin-bottom: 36px; }
.sbuy__price-meta {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.32em;
  color: var(--gold); text-transform: uppercase;
  margin-bottom: 14px;
}
.sbuy__price-row {
  display: inline-flex; align-items: baseline; gap: 14px;
}
.sbuy__price {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(56px, 8vw, 96px); letter-spacing: -0.03em; line-height: 1;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sbuy__per {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.22em;
  color: var(--ink-3); text-transform: uppercase;
}
.sbuy__price-foot {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em;
  color: var(--ink-3); text-transform: uppercase;
  min-height: 16px;
}
.sbuy__save { color: var(--gold); }
.sbuy__cur-tag { color: var(--ink-3); }

.sbuy__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
  margin-bottom: 32px;
}
.sbuy__cta-primary { min-width: 260px; }
.sbuy__cta-ghost   { min-width: 240px; }

.sbuy__trust {
  text-align: center;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.28em;
  color: var(--ink-3); text-transform: uppercase;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.sbuy__trust-sep { color: var(--gold-deep); margin: 0 6px; }

.sbuy__note {
  margin: 30px auto 0;
  max-width: 60ch;
  text-align: center;
  font-family: var(--f-acc); font-weight: 400;
  font-size: 15px; line-height: 1.55;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .sbuy { padding: 8px 18px 80px; }
  .sbuy__panel { padding: 36px 18px; }
  .sbuy__pills--3, .sbuy__pills--4 { grid-template-columns: repeat(2, 1fr); }
  .sbuy__row-label { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sbuy__cur { font-size: 16px; }
  .sbuy__price-foot { flex-direction: column; gap: 6px; }
}

/* ════════════════════════════════════════════════
   FAQ — editorial dropdown rows. Ported 1:1 from the SPECTRA / PMAX /
   SEO FAQ, remapped to this page's tokens. Accents render upright in
   Cormorant to keep the page italic-free. First row open by default.
   ════════════════════════════════════════════════ */
.faq-chapter {
  position: relative;
  padding: 110px 32px 130px;
  max-width: 1240px;
  margin: 0 auto;
}
.faq-chapter__head {
  text-align: center;
  margin-bottom: 80px;
  max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.faq-chapter__mark {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 22px;
}
.faq-chapter__h {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 72px); line-height: 1.0;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 18px;
}
.faq-chapter__h em {
  font-family: var(--f-acc); font-style: normal; font-weight: 500;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.faq-chapter__lead {
  font-family: var(--f-disp); font-style: italic;
  font-size: 18px; color: var(--ink-2);
  max-width: 56ch; margin: 0 auto;
  line-height: 1.5;
}
.faq-list { display: flex; flex-direction: column; }
.faq-row {
  border-top: 1px solid var(--line);
  transition: background 0.25s;
}
.faq-row:last-child { border-bottom: 1px solid var(--line); }
.faq-row[open] { background: rgba(5, 6, 8, 0.5); }
.faq-row__sum {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 110px 1fr 32px;
  align-items: center;
  gap: 32px;
  padding: 28px 32px;
  transition: padding 0.3s;
}
.faq-row__sum::-webkit-details-marker { display: none; }
.faq-row__num {
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.faq-row__q {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  transition: color 0.2s;
}
.faq-row__sum:hover .faq-row__q { color: var(--gold); }
.faq-row__q em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(180deg,#ffffff 0%,#c9e0f2 19%,#6b96bc 45%,#446a90 51%,#91bbdc 64%,#dfebf7 84%,#ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.faq-row__toggle {
  font-family: var(--f-mono); font-size: 24px; font-weight: 300;
  color: var(--gold);
  text-align: right;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-row[open] .faq-row__toggle { transform: rotate(45deg); }
.faq-row__body {
  padding: 4px 32px 36px 174px;
  max-width: 80ch;
}
.faq-row__body p {
  font-family: var(--f-body);
  font-size: 15px; line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.faq-row__body p:last-child { margin-bottom: 0; }
.faq-row__body em {
  color: var(--gold); font-style: normal;
  font-family: var(--f-body); font-weight: 500;
}
.faq-row__body strong { color: var(--ink); font-weight: 500; }
@media (max-width: 800px) {
  .faq-chapter { padding: 70px 20px 90px; }
  .faq-chapter__head { margin-bottom: 56px; }
  .faq-row__sum { grid-template-columns: 70px 1fr 28px; gap: 18px; padding: 22px 18px; }
  .faq-row__num { font-size: 9px; letter-spacing: 0.22em; }
  .faq-row__body { padding: 0 18px 28px 106px; }
}
@media (max-width: 600px) {
  .faq-row__sum { grid-template-columns: 1fr 28px; }
  .faq-row__num { grid-column: 1; grid-row: 1; padding-bottom: 8px; }
  .faq-row__q { grid-column: 1; grid-row: 2; }
  .faq-row__toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .faq-row__body { padding: 0 18px 24px; }
}

/* ════════════════════════════════════════════════
   STATIC FALLBACK — applied when the motion libraries fail to load
   (CDN hiccup) or the visitor prefers reduced motion. Everything that
   GSAP would otherwise reveal is shown in place so the page is never
   blank. The .no-motion class is added by the script below.
   ════════════════════════════════════════════════ */
.no-motion .manifesto__word { opacity: 1 !important; }
.no-motion .pkg { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  /* Pure-CSS net in case the script itself never runs at all */
  html { scroll-behavior: auto !important; }
}
</style>

/* FAQ answer links — override the global a{color:inherit} reset so cross-links are visible */
.faq-row__body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.faq-row__body a:hover { opacity: 0.8; }

/* Fix: gradient heading accents cropping descenders/italic tails. Extend clip box, cancel layout. */
.hero__title em, .gallery__head h2 em, .pillar__name em, .parallax__mid h3 em,
.final__h em, .packages__head h2 em, .faq-chapter__h em {
  display: inline-block; padding: 0.02em 0.09em 0.18em; margin: -0.02em -0.09em -0.18em;
}