/* ============================================================
   Utopia — fundraising agency
   ============================================================ */

:root{
  --ink:        #0d1117;
  --ink-2:      #1d2430;
  --body:       #4d5665;
  --paper:      #ffffff;
  /* Brand blue #cbd9ec, plus two lighter steps of the same hue.
     --paper-2 fills whole sections, --brand-soft separates panels
     sitting on top of them, --brand is the full-strength accent. */
  --brand:      #cbd9ec;
  --brand-soft: #e3ebf5;
  --paper-2:    #faf9f6;
  --line:       #dde6f1;
  --line-2:     #c3d3e6;
  /* brand periwinkle, taken off the guide cover */
  --accent:     #6c63ff;
  --accent-ink: #4f45e0;
  --good:       #0e7a55;
  --bad:        #b04a3a;

  /* deep navy of the cover, not near-black */
  --dark-bg:    #070d2b;
  --dark-line:  #1e2a5c;
  --dark-body:  #9aa5cc;

  --wrap: 1140px;
  --r: 14px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Outfit for display type — the geometric, slightly rounded face the
   guide cover uses. Inter stays on body copy and UI. */
h1,h2,h3{
  margin:0; font-family:var(--display); font-weight:600;
  letter-spacing:-0.025em; line-height:1.1;
}
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
/* Emphasis is colour, not italics and not an underline: the phrase drops
   into the accent blue while the rest of the line stays ink. */
em{
  font-style:normal; font-family:inherit; font-weight:inherit;
  color:var(--accent);
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

:where(a,button):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}

/* ── Nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav__inner{ position:relative; display:flex; align-items:center; gap:32px; height:70px; }

.logo{ display:inline-flex; align-items:center; flex-shrink:0; }
.logo img{ display:block; height:28px; width:auto; }

.nav__links{ display:flex; gap:22px; margin-left:auto; font-size:14.5px; color:var(--body); white-space:nowrap; }
.nav__links a{ position:relative; transition:color .15s ease; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1.5px;
  background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }

/* Hamburger toggle — hidden until the links collapse at 960px */
.nav__toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; padding:0; margin-left:4px; flex:0 0 auto;
  background:none; border:none; cursor:pointer;
}
.nav__toggle span{
  display:block; width:20px; height:1.5px; background:var(--ink);
  transition:transform .16s ease, opacity .12s ease;
}
.nav.menu-open .nav__toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav.menu-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.menu-open .nav__toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px; border-radius:100px;
  background:var(--ink); color:#fff;
  font-size:16px; font-weight:500; letter-spacing:-0.01em;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), background .16s ease, box-shadow .16s ease;
  box-shadow:0 1px 2px rgba(13,17,23,.16);
}
.btn:hover{ background:var(--accent-ink); transform:translateY(-2px); box-shadow:0 10px 24px rgba(108,99,255,.22); }
.btn:active{ transform:translateY(0); }

.btn--sm{ height:40px; padding:0 18px; font-size:14.5px; }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); box-shadow:none; }
.btn--ghost:hover{ background:var(--paper-2); color:var(--ink); border-color:var(--ink); box-shadow:none; }
.btn--light{ background:#fff; color:var(--ink); }
.btn--light:hover{ background:#fff; color:var(--accent-ink); box-shadow:0 10px 30px rgba(255,255,255,.16); }

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:112px 0 96px;
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(108,99,255,.10), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom:1px solid var(--line);
  text-align:center;
}
.hero > .wrap, .hero > .marquee{ position:relative; z-index:1; }
.eyebrow{
  font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent);
}
/* measure + size tuned together so the headline sets in three lines */
.hero__title{
  margin:22px auto 0; max-width:15.5ch;
  font-size:clamp(33px, 5.6vw, 70px); line-height:1.08; letter-spacing:-0.032em;
  text-wrap:balance;
}
.hero__sub{
  margin:26px auto 0; max-width:66ch;
  font-size:clamp(17px,1.6vw,19.5px); color:var(--body);
}
.hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:36px; }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin:76px auto 0; max-width:820px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.stat{ background:var(--paper); padding:24px 18px; }
.stat dt{ font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--body); }
.stat dd{ margin:6px 0 0; font-size:32px; font-weight:600; letter-spacing:-0.03em; }

/* ── Logo marquee ────────────────────────────────────────── */
.marquee{ margin-top:84px; padding-top:38px; border-top:1px solid var(--line); }
.marquee__label{
  text-align:center; margin-bottom:26px;
  font-size:12.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body);
}
.marquee__viewport{
  display:flex; overflow:hidden;
  /* fade the logos out at both edges instead of cutting them */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{
  flex:0 0 auto; display:flex; align-items:center; gap:26px; padding-right:26px;
  animation:marquee-scroll 70s linear infinite;   /* long track needs a long duration */
}
@keyframes marquee-scroll{ to{ transform:translateX(-100%); } }
.marquee__viewport:hover .marquee__track{ animation-play-state:paused; }

/* Every logo gets an identical box and is centred inside it, so wide wordmarks
   and compact marks all occupy the same footprint and read at the same size. */
.brand{
  flex:0 0 auto; width:190px; height:44px;
  display:grid; place-items:center;
  /* one grey tone across mixed-colour logos; drop the filter for full colour */
  filter:grayscale(1); opacity:.62;
  transition:opacity .2s ease, filter .2s ease;
}
.brand:hover{ filter:grayscale(0); opacity:1; }
.brand img{
  display:block; height:34px; width:auto;
  max-width:100%; max-height:100%; object-fit:contain;
}
/* Optical adjustments: very wide wordmarks carry more ink at a shared height,
   so they read larger than everything else. Trim them back by name. */
.brand img[src$="indilabs.svg"]{ height:26px; }

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; flex-wrap:wrap; justify-content:center; gap:40px; padding-right:0; }
  .marquee__track[aria-hidden]{ display:none; }
  .marquee__viewport{ -webkit-mask-image:none; mask-image:none; justify-content:center; }
}

/* ── Section scaffolding ─────────────────────────────────── */
.section{ padding:104px 0; border-bottom:1px solid var(--line); }
.section--problem{ background:var(--paper); }
.section--tint{ background:var(--paper-2); }

/* Centered section headers: eyebrow → title → one-line subtitle */
.sec-head{ max-width:740px; margin:0 auto 62px; text-align:center; }
.sec-head h2{ margin-top:16px; font-size:clamp(31px,3.8vw,48px); letter-spacing:-0.032em; }
.sec-head .eyebrow{ color:var(--accent); }
.sec-lede{ margin:20px auto 0; max-width:56ch; font-size:18px; color:var(--body); }
#system .sec-lede{ max-width:none; white-space:nowrap; }

/* ── Problem: the 5 steps, stacked as a sequence ───────────
   Each step is a card so the block has a defined right edge and reads
   as a centered column rather than left-aligned ragged text. */
.steps{ max-width:820px; margin-inline:auto; }
.step{
  position:relative; display:grid; grid-template-columns:56px 1fr; gap:22px;
  padding-bottom:18px;
}
.step:not(.step--last)::before{
  content:""; position:absolute; left:27.5px; top:56px; bottom:-4px; width:1px;
  background:var(--line);
}
/* Brand numeral: Outfit, tight, filled with the logo's periwinkle gradient.
   Used for step numbers, deliverable indices and method pillars so the
   numbering reads as ours rather than a generic ordered list. */
.step__n{
  position:relative; z-index:1;
  width:56px; height:56px; border-radius:17px;      /* echoes the logo's rounded forms */
  display:grid; place-items:center;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(13,17,23,.06);
  font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:-0.02em;
  color:var(--accent-ink);
}
.step__body{
  padding:22px 26px 24px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.step:hover .step__body{ border-color:var(--line-2); box-shadow:0 10px 30px rgba(13,17,23,.06); }
.step__body h3{ font-size:19.5px; letter-spacing:-0.022em; }
.step__body p{ margin-top:9px; color:var(--body); font-size:16px; }
.step--last{ padding-bottom:0; }
/* navy rather than near-black, so it belongs to the same family as the dark sections */
.step--last .step__n{ background:var(--ink); border-color:var(--ink); color:#fff; }
.step--last .step__body{ background:var(--dark-bg); border-color:var(--dark-bg); color:#fff; }
.step--last .step__body p{ color:var(--dark-body); }
.step:hover.step--last .step__body{ border-color:var(--ink); }

.pull{
  margin:56px auto 0; max-width:44ch;
  font-family:var(--display); font-size:clamp(20px,2.2vw,27px); line-height:1.35; letter-spacing:-0.015em;
  text-align:center;
}
.section--tint .pull{ max-width:38ch; }

.closing-line{
  margin:48px auto 0; text-align:center;
  font-family:var(--display); font-size:clamp(24px,2.6vw,32px); color:#fff;
}

/* ── Dark sections ───────────────────────────────────────── */
.section--dark{
  background:var(--dark-bg); color:#fff; border-bottom:none;
  background-image:radial-gradient(700px 340px at 82% 0%, rgba(108,99,255,.20), transparent 68%);
}
.section--dark .sec-lede{ color:var(--dark-body); }
.section--dark .sec-head .eyebrow{ color:#8ea0ff; }

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pillar{
  padding:34px 30px 32px; border:1px solid var(--dark-line); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  transition:border-color .2s ease, transform .2s ease;
}
.pillar:hover{ border-color:#3d4a63; transform:translateY(-3px); }
.pillar__idx{
  display:block; font-family:var(--display); font-size:30px; font-weight:700;
  letter-spacing:-0.03em; line-height:1;
  background:linear-gradient(135deg, #cfc9ff 0%, #8b82ff 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pillar h3{ margin:14px 0 20px; font-size:22px; }
.pillar ul{ display:grid; gap:14px; }
.pillar li{ position:relative; padding-left:28px; font-size:15.5px; color:var(--dark-body); line-height:1.55; }
.pillar li::before{
  content:"→"; position:absolute; left:0; top:0;
  font-family:var(--sans); font-size:16px; font-weight:500; line-height:1.55;
  color:var(--accent);
}

/* ── Deliverables ────────────────────────────────────────── */
.deliverables{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{
  padding:30px 26px 28px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--line-2); box-shadow:0 14px 40px rgba(13,17,23,.07); transform:translateY(-3px); }
.card__idx{
  display:block; font-family:var(--display); font-size:30px; font-weight:700;
  letter-spacing:-0.03em; line-height:1;
  background:linear-gradient(135deg, #9aa6ff 0%, var(--accent) 72%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.card h3{ margin:14px 0 10px; font-size:19.5px; }
.card p{ color:var(--body); font-size:15.5px; }
/* Bonuses sit in the same 3×3 grid, tinted so they read as a different tier. */
.card--bonus{
  background:linear-gradient(180deg, rgba(108,99,255,.10), rgba(108,99,255,.045));
  border-color:rgba(108,99,255,.30);
}
.card--bonus:hover{ border-color:rgba(108,99,255,.45); box-shadow:0 14px 40px rgba(108,99,255,.10); }
.tag{
  display:inline-block; padding:3px 10px; border-radius:100px;
  background:rgba(108,99,255,.09); color:var(--accent-ink);
  font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
}

/* ── Bonus value conclusion ──────────────────────────────── */
.value-note{ display:flex; justify-content:center; align-items:baseline; gap:.5em; flex-wrap:wrap; }
.value-note s{ color:var(--body); text-decoration-thickness:2px; font-weight:400; }
.value-note strong{ color:var(--accent); font-weight:600; }

/* ── Who we are ──────────────────────────────────────────── */
/* founders down one side, text + four numbers down the other — both columns same height */
#about .sec-head{ max-width:none; }
#about .sec-head h2{ white-space:nowrap; }

.team{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch; }
.team__people{ display:grid; gap:22px; align-content:space-between; }
.team__about{ display:flex; flex-direction:column; gap:18px; height:100%; }
.team__text{ font-size:16.5px; color:var(--body); }

.team__stats{
  flex:1; min-height:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.tstat{ background:var(--paper); padding:24px 22px; display:flex; flex-direction:column; justify-content:center; }
.tstat dd{
  margin:0; font-family:var(--display); font-size:34px; font-weight:600;
  letter-spacing:-0.035em; line-height:1; color:var(--accent-ink);
}
.tstat dt{
  margin-top:8px; font-size:12px; letter-spacing:.055em; text-transform:uppercase;
  color:var(--body); line-height:1.45;
}

.founder{
  display:grid; grid-template-columns:118px 1fr; gap:22px; align-items:start;
  padding:22px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.founder:hover{ border-color:var(--line-2); box-shadow:0 14px 40px rgba(7,13,43,.07); }
.founder__photo{ margin:0; overflow:hidden; border-radius:10px; }
.founder__photo img{
  display:block; width:100%; aspect-ratio:3/4; border-radius:0; object-fit:cover; object-position:center;
}
.founder__body h3{ font-size:19px; }
.founder__role{
  margin-top:5px; font-size:12.5px; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent);
}
.founder__bio{ margin-top:12px; font-size:15px; color:var(--body); }
.founder__link{
  display:inline-block; margin-top:14px; font-size:14.5px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:color .16s ease, border-color .16s ease;
}
.founder__link:hover{ color:var(--accent-ink); border-color:var(--accent); }

/* ── Video testimonials ──────────────────────────────────── */
.videos{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }

/* One continuous wall: filmed and written testimonials share three columns,
   so there is no seam between them. Columns are explicit (not CSS multicol)
   so each one can be led by a specific video. */
.wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.wall__col{ display:grid; gap:22px; align-content:start; }

/* video cards get the same surface as the written ones so the wall reads as one set */
.video{
  margin:0; padding:18px 18px 20px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper);
}
.video__frame{
  position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden;
  display:grid; place-items:center; gap:14px; align-content:center;
  background:linear-gradient(150deg, #1a2131 0%, #0d1117 60%, #16204a 100%);
  border:1px solid var(--line);
}
/* Real embeds dropped in here fill the frame edge to edge. */
.video__frame :is(iframe,video,img){
  position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}
.video__play{
  width:58px; height:58px; border-radius:50%;
  background:rgba(255,255,255,.94); box-shadow:0 8px 24px rgba(0,0,0,.28);
  display:grid; place-items:center;
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}
.video__play::after{
  content:""; margin-left:3px;
  border-left:15px solid var(--ink);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.video:hover .video__play{ transform:scale(1.07); }
.video__hint{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#7f8ba3; }
.video figcaption{ padding:16px 2px 0; }
/* marks the quote as a transcript of the clip above rather than a written one */
.video__from{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent);
}
.video__from::before{
  content:""; width:0; height:0;
  border-left:8px solid currentColor;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.video__quote{ margin:10px 0 0; }
.video__quote p{ font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.video__name{ margin-top:16px; font-weight:600; font-size:16.5px; letter-spacing:-0.015em; }
.video__meta{ margin-top:3px; color:var(--body); font-size:15px; }

/* ── Written testimonials ────────────────────────────────── */
.quotes{ columns:3; column-gap:22px; }
.quote{
  break-inside:avoid; margin:0;
  padding:28px 26px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper);
}
.quote p{ font-size:16.5px; color:var(--ink-2); line-height:1.6; }
.quote p::before{ content:"“"; font-family:var(--display); font-size:34px; line-height:0;
  color:var(--accent); margin-right:3px; vertical-align:-6px; }
.quote footer{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:14.5px; }
.quote footer b{ display:block; font-weight:600; }
.quote footer span{ color:var(--body); }

/* ── Pricing ─────────────────────────────────────────────── */
.price{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--dark-line); border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,.03);
}
.price__head{ padding:46px 42px; border-right:1px solid var(--dark-line); }
.price__amount{ font-size:clamp(44px,5vw,60px); font-weight:600; letter-spacing:-0.04em; line-height:1; }
.price__amount span{ font-size:19px; font-weight:400; letter-spacing:-0.01em; color:var(--dark-body); }
.price__note{ margin:16px 0 32px; color:var(--dark-body); font-size:16px; }
.price__foot{
  margin-top:28px; padding-top:24px; border-top:1px solid var(--dark-line);
  color:#6d7688; font-size:14.5px; line-height:1.6; max-width:38ch;
}
.price__list{ padding:40px 42px; display:grid; gap:15px; align-content:center; }
.price__list li{ position:relative; padding-left:30px; font-size:16px; color:#e7eaf0; }
.price__list li::before{
  content:""; position:absolute; left:0; top:7px; width:16px; height:9px;
  border-left:2px solid #8ea0ff; border-bottom:2px solid #8ea0ff;
  transform:rotate(-45deg);
}
/* bonuses read bold white — the dimmed grey buried them */
.price__list .is-free{ color:#fff; font-weight:600; }
.price__list .is-free b{ color:#fff; font-weight:600; }
.price__list .is-free span{ color:#fff; font-weight:600; }

/* ── Fit ─────────────────────────────────────────────────── */
.fit{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.fit__col{ padding:36px 32px; border:1px solid var(--line); border-radius:var(--r); }
.fit__col h3{ font-size:21px; margin-bottom:22px; }
.fit__col ul{ display:grid; gap:15px; }
.fit__col li{ position:relative; padding-left:32px; color:var(--body); font-size:16px; }
.fit__col--yes{ background:var(--paper); border-color:rgba(14,122,85,.28); }
.fit__col--yes li::before{
  content:""; position:absolute; left:2px; top:7px; width:14px; height:8px;
  border-left:2px solid var(--good); border-bottom:2px solid var(--good); transform:rotate(-45deg);
}
/* deeper brand step so the panel separates from the tinted section behind it */
.fit__col--no{ background:var(--brand-soft); border-color:var(--brand); }
.fit__col--no li::before{
  content:"✕"; position:absolute; left:2px; top:-1px; color:var(--bad); font-size:14px; font-weight:600;
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{ max-width:800px; margin-inline:auto; border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  padding:24px 44px 24px 0;
  font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:-0.02em;
  transition:color .16s ease;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary:hover{ color:var(--accent-ink); }
/* plus sign that rotates into a minus when the row opens */
.faq__item summary::before,
.faq__item summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:15px; height:2px; border-radius:1px; background:var(--accent);
  transition:transform .2s ease;
}
.faq__item summary::after{ transform:rotate(90deg); }
.faq__item[open] summary::after{ transform:rotate(0deg); }
.faq__a{ padding:0 44px 26px 0; }
.faq__a p{ color:var(--body); font-size:16.5px; max-width:66ch; }
@media (prefers-reduced-motion: reduce){
  .faq__item summary::before,.faq__item summary::after{ transition:none; }
}

/* ── Lead magnet ─────────────────────────────────────────── */
.lead{
  display:grid; grid-template-columns:262px 1fr; gap:56px; align-items:center;
  padding:52px 54px;
  border:1px solid rgba(108,99,255,.24); border-radius:20px;
  background:linear-gradient(140deg, rgba(108,99,255,.075), rgba(108,99,255,.02) 60%, var(--paper) 100%);
}
.lead__main{ display:grid; gap:30px; }

/* Cover art frame — portrait A4, so the real export drops straight in. */
.lead__cover{ margin:0; }
.lead__cover img,
.guide__cover img{
  /* no fixed ratio: the frame takes the artwork's own proportions, so a
     replacement cover of any shape drops in without being cropped */
  display:block; width:100%; height:auto; border-radius:12px;
  box-shadow:0 24px 60px rgba(7,13,43,.30), 0 4px 12px rgba(7,13,43,.16);
}
.lead__ph{
  display:grid; align-content:center; justify-items:center; gap:14px; padding:26px;
  text-align:center; color:#fff;
  background:
    radial-gradient(120% 80% at 20% 15%, rgba(108,99,255,.42), transparent 60%),
    radial-gradient(90% 70% at 85% 80%, rgba(43,86,214,.45), transparent 65%),
    linear-gradient(160deg, #0b1650 0%, #071033 55%, #050b22 100%);
}
.lead__ph-mark{
  width:26px; height:26px; border-radius:50%;
  background:conic-gradient(from 210deg, var(--accent), #9aa6ff 60%, #2b56d6 100%);
}
.lead__ph-title{
  font-family:var(--display); font-weight:600; font-size:19px; line-height:1.25;
  letter-spacing:-0.02em;
}
.lead__ph-note{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#8ea0ff;
}
.lead h2{ margin-top:14px; font-size:clamp(27px,3vw,38px); letter-spacing:-0.03em; }
.lead__sub{ margin-top:16px; color:var(--body); font-size:17px; }
.lead__list{ margin-top:24px; display:grid; gap:11px; }
.lead__list li{ position:relative; padding-left:26px; color:var(--body); font-size:16px; }
.lead__list li::before{
  content:""; position:absolute; left:1px; top:7px; width:13px; height:8px;
  border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.lead__form-wrap{
  padding:32px 30px; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 18px 50px rgba(13,17,23,.08);
}
.lead__fine{ margin-top:16px; color:var(--body); font-size:13.5px; line-height:1.55; }

/* ── Guide page (resource.html) ──────────────────────────── */
.guide{
  padding:96px 0 104px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(108,99,255,.10), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
}
/* title + subtitle centered above both columns, spanning the same width as
   the row below (and every other section on the page — no narrower wrapper) */
.guide__head{ margin-bottom:56px; text-align:center; }
.guide__title{ margin-top:14px; font-size:clamp(32px,4vw,52px); letter-spacing:-0.035em; }
.guide__sub{ margin:16px auto 0; font-size:19px; color:var(--body); }

/* cover takes a bigger, fixed-width column so it carries real visual weight
   against the benefits + form on the other side */
.guide__inner{ display:grid; grid-template-columns:1fr 440px; gap:64px; align-items:center; }
.guide__cover{ margin:0; position:relative; }
/* soft glow behind the cover so the enlarged image doesn't just float on white */
.guide__cover::before{
  content:""; position:absolute; inset:-10%;
  background:radial-gradient(60% 60% at 45% 40%, rgba(108,99,255,.20), transparent 72%);
  z-index:-1;
}
.guide__form{ margin-top:30px; max-width:440px; }
.guide__stats{ max-width:820px; margin-inline:auto; }

@media (max-width:960px){
  .guide{ padding:64px 0 72px; }
  .guide__inner{ grid-template-columns:1fr; gap:36px; justify-items:center; text-align:center; }
  .guide__cover{ width:100%; max-width:300px; }
  .guide__sub{ margin-inline:auto; }
  .guide__list,.lead__list{ text-align:left; }
  .guide__form{ text-align:left; width:100%; }
}

/* ── The math ────────────────────────────────────────────── */
.compare{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.compare__col{ padding:38px 34px; border-radius:var(--r); border:1px solid var(--line); background:var(--paper); }
.compare__col--fast{ background:var(--ink); color:#fff; border-color:var(--ink); }
.compare__label{ font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--body); }
.compare__col--fast .compare__label{ color:#8ea0ff; }
.compare__figure{ margin:12px 0 14px; font-size:clamp(38px,4.6vw,54px); font-weight:600; letter-spacing:-0.04em; line-height:1; }
.compare__sub{ color:var(--body); font-size:16px; max-width:44ch; }
.compare__col--fast .compare__sub{ color:var(--dark-body); }
.compare__col ul{ margin-top:26px; padding-top:24px; border-top:1px solid var(--line); display:grid; gap:13px; }
.compare__col--fast ul{ border-top-color:var(--dark-line); }
.compare__col li{ position:relative; padding-left:22px; font-size:15.5px; color:var(--body); }
.compare__col--fast li{ color:#e7eaf0; }
.compare__col li::before{
  content:""; position:absolute; left:0; top:10px; width:10px; height:1.5px; background:currentColor; opacity:.4;
}

/* ── Close ───────────────────────────────────────────────── */
.close{
  padding:110px 0 120px; background:var(--dark-bg); color:#fff; text-align:center;
  background-image:radial-gradient(760px 360px at 50% 110%, rgba(108,99,255,.26), transparent 70%);
}
.close__lede{ max-width:52ch; margin-inline:auto; color:var(--dark-body); font-size:18px; }
.close__key{
  max-width:22ch; margin:26px auto 0; font-weight:400;
  font-family:var(--display); font-size:clamp(34px,5vw,62px); line-height:1.1; letter-spacing:-0.01em;
}
.close__cta{ margin-top:44px; display:grid; gap:16px; justify-items:center; }
.close__cta p{ color:var(--dark-body); font-size:15px; }

/* ── Footer ──────────────────────────────────────────────── */
.footer{ background:var(--dark-bg); color:var(--dark-body); border-top:1px solid var(--dark-line); padding:34px 0; }
.footer__inner{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.footer .logo{ color:#fff; }
.footer__links{ display:flex; gap:24px; font-size:15px; flex-wrap:wrap; }
.footer__links a:hover{ color:#fff; }
.footer__meta{ margin-left:auto; font-size:14px; }

/* ── Reveal ──────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn:hover,.card:hover,.pillar:hover{ transform:none; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:960px){
  .deliverables{ grid-template-columns:repeat(2,1fr); }
  .videos{ grid-template-columns:repeat(2,1fr); }
  .quotes{ columns:2; }
  .wall{ display:block; columns:2; column-gap:22px; }
  .wall__col{ display:contents; }
  .wall .video,.wall .quote{ break-inside:avoid; margin:0 0 22px; }
  .team{ grid-template-columns:1fr; gap:34px; }
  #about .sec-head h2{ white-space:normal; }
  #system .sec-lede{ white-space:normal; max-width:56ch; }
  .lead{ grid-template-columns:1fr; gap:34px; padding:42px 38px; justify-items:center; }
  .lead__cover{ width:100%; max-width:230px; }
  .lead__main{ width:100%; }
  .pillars{ grid-template-columns:1fr; }
  .price{ grid-template-columns:1fr; }
  .price__head{ border-right:none; border-bottom:1px solid var(--dark-line); }
}

/* Nav collapses to the hamburger on its own, wider breakpoint: the full
   link row + button needs ~1000px to lay out without wrapping, so a plain
   960px cutoff still left it cramped on ~1024px devices (iPad Pro 12.9",
   Nest Hub). Give it real margin rather than tightening desktop spacing. */
@media (max-width:1080px){
  .nav__inner{ gap:10px; }
  .nav__toggle{ display:flex; }
  .nav__book{ margin-left:auto; flex-shrink:0; }
  .nav__links{
    flex-direction:column; align-items:stretch; gap:2px; white-space:normal;
    position:absolute; top:100%; left:0; right:0; margin:0;
    padding:10px 20px 22px; background:var(--paper); border-bottom:1px solid var(--line);
    box-shadow:0 16px 28px rgba(13,17,23,.08);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav__links a{ padding:12px 2px; }
  .nav__links a::after{ display:none; }
  .nav.menu-open .nav__links{
    opacity:1; visibility:visible; transform:none;
    transition:opacity .2s ease, transform .2s ease;
  }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .nav__inner{ gap:8px; }
  /* the desktop measure would squeeze the headline into 5–6 lines here */
  .hero__title{ max-width:none; }
  .hero{ padding:76px 0 68px; }
  .section{ padding:74px 0; }
  .sec-head{ margin-bottom:38px; }
  .stats{ grid-template-columns:1fr; margin-top:52px; }
  .marquee{ margin-top:56px; padding-top:32px; }
  .marquee__track{ gap:44px; padding-right:44px; }
  .brand{ font-size:15.5px; }
  .deliverables,.videos,.fit,.compare{ grid-template-columns:1fr; }
  /* photo stays beside the bio — stacking it here leaves a dead gap */
  .founder{ grid-template-columns:112px 1fr; gap:18px; }
  .value-note{ padding:24px 22px; }
  .quotes{ columns:1; }
  .wall{ columns:1; }
  .lead{ padding:34px 24px; gap:28px; }
  .lead__form-wrap{ padding:26px 22px; }
  .sec-head{ margin-bottom:44px; }
  .sec-head h2 br{ display:none; }   /* let the title wrap to the column, not the desktop break */
  .step{ grid-template-columns:42px 1fr; gap:18px; padding-bottom:32px; }
  .step__n{ width:44px; height:44px; border-radius:14px; font-size:16px; }
  .step:not(.step--last)::before{ left:20.5px; top:46px; }
  .step__body{ padding-top:7px; }
  .step__body h3{ font-size:19px; }
  .price__head,.price__list{ padding:34px 26px; }
  .close{ padding:80px 0 88px; }
  .footer__inner{ gap:18px; }
  .footer__links{ gap:14px 20px; width:100%; }
  .footer__meta{ margin-left:0; }
}

@media (max-width:520px){
  .founder{ grid-template-columns:1fr; }
  .founder__photo{ max-width:180px; }
  .footer__meta{ margin-left:0; }

  /* logo + book-a-call + hamburger get tight on the smallest phones */
  .logo img{ height:24px; }
  .nav__book{ padding:0 13px; font-size:13.5px; }
}

/* Folded foldables (e.g. Galaxy Z Fold5 cover screen, ~344px) are narrower
   than any phone the 520px tier assumes — squeeze the nav bar once more. */
@media (max-width:360px){
  .nav__inner{ gap:4px; }
  .logo img{ height:21px; }
  .nav__book{ padding:0 8px; font-size:12.5px; }
}