/* ============================================================
   Opus Resume — design tokens + styles
   Palette: white/black editorial + electric-blue accent
   (from font-family-and-font-style reference images).
   Structure & discipline borrowed from Superhuman DESIGN.md:
   tight display type, single CTA per band, generous whitespace.
   ============================================================ */

:root {
  /* color */
  --ink:        #292827;   /* headlines — warm dark grey, never pure black (Superhuman) */
  --ink-body:   #3a3836;   /* body copy */
  --ink-mute:   #73706d;   /* secondary text */
  --ink-faint:  #9a9794;   /* tertiary */
  --accent:     #2d6bff;   /* electric blue (your brand) */
  --accent-deep:#1f4fcc;   /* pressed */
  --canvas:     #ffffff;
  --canvas-soft:#faf9f7;   /* barely-warm off-white bands (Superhuman) */
  --hairline:   #e8e4dd;   /* warm hairline (Superhuman) */
  --on-dark:    #ffffff;
  --dark:       #1b1938;   /* indigo navy — dark sections (Superhuman) */

  /* Superhuman accent palette */
  --indigo:       #1b1938;
  --indigo-deep:  #0e0c1f;
  --violet-soft:  #c9b4fa;  /* hero wash + soft fills */
  --violet-tint:  #efe8ff;  /* pale violet surface */
  --teal-deep:    #0e3030;  /* closing CTA band */
  --teal-mid:     #155555;
  --hairline-dark:#3f3a52;
  --on-dark-mute: #bcbac9;  /* secondar y text on dark surfaces */

  /* radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* spacing scale (8px base) */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 12px;
  --s-lg: 16px;
  --s-xl: 24px;
  --s-2xl: 32px;
  --s-3xl: 48px;
  --s-huge: 80px;

  --maxw: 1120px;
  --shadow-1: 0 1px 3px rgba(10,10,10,.06);
  --shadow-2: 0 12px 40px rgba(10,10,10,.10);
}
.d-none {display: none;}
/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-variation-settings: "wght" 460;
  color: var(--ink-body);
  background: var(--canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1,h2,h3,h4 { color: var(--ink); margin: 0; font-weight: 600; letter-spacing: -0.02em; }

/* unify all inline icon SVGs: same line style, round joins, consistent weight */
svg { stroke-linecap: round; stroke-linejoin: round; }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- announcement bar (promotion) ---------- */
/* indigo bar (DESIGN.md dark surface) — strong white-text contrast, on-brand */
.announce { background: var(--indigo); color: #fff; font-size: 14px; }
.announce.hidden { display: none; }
.announce__inner { display: flex; align-items: center; justify-content: center; gap: var(--s-sm); padding: 10px 44px; position: relative; min-height: 42px; }
.announce__txt { margin: 0; text-align: center; color: #fff; }
.announce__pill { background: var(--violet-soft); color: var(--indigo); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-full); margin-right: 8px; white-space: nowrap; }
.announce__txt a { color: var(--violet-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-left: 8px; white-space: nowrap; }
.announce__txt a:hover { color: #fff; }
.announce__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 15px; cursor: pointer; opacity: .85; padding: 6px 8px; line-height: 1; }
.announce__close:hover { opacity: 1; }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-xl); }
.section { padding: var(--s-huge) 0; }
/* offset anchor jumps so they clear the sticky nav + section-tab bar */
[id] { scroll-margin-top: 150px; }
.section--soft { background: var(--canvas-soft); }
/* Grouped surfaces — DESIGN.md three-canvas rule: only white + off-white.
   Sections in the same group share ONE flat surface (no gradient = no seam);
   consecutive same-surface sections collapse their touching padding so the
   group reads as a single block. */
.section--group { background: var(--canvas-soft); }
.section--group + .section--group { padding-top: 0; }   /* fuse the seam within a group */
.section--white { background: var(--canvas); }
.section--white + .section--white { padding-top: 0; }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s-md);
}
.lead { font-size: 19px; color: var(--ink-mute); max-width: 60ch; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* display type — tight editorial leading */
.display-xxl { font-size: clamp(40px, 6.5vw, 68px); font-weight: 600; line-height: .98; letter-spacing: -.03em; color: var(--ink); }
.display-xl  { font-size: clamp(30px, 4.5vw, 46px); font-weight: 600; line-height: 1.02; letter-spacing: -.025em; color: var(--ink); }
.display-lg  { font-size: clamp(24px, 3vw, 30px); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); }
.accent-text { color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-sm);
  font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none;
  padding: 14px 22px; border-radius: var(--r-full); border: 1px solid transparent;
  cursor: pointer; transition: background .15s ease, transform .05s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-deep); }
.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: #222; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--ink-faint); }
.btn--on-dark { background: #fff; color: var(--ink); }
.btn--on-dark:hover { background: #f0f0f0; }
.btn--lg { padding: 16px 28px; font-size: 17px; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: 18px; text-decoration: none; letter-spacing: -.01em; }
.brand__dot { width: 14px; height: 14px; border-radius: var(--r-full); background: var(--accent); }
.nav__links { display: flex; align-items: center; gap: var(--s-xl); list-style: none; margin: 0; padding: 0; }
.nav__links a { text-decoration: none; color: var(--ink-body); font-size: 15px; font-weight: 460; }
.nav__links a:hover { color: var(--ink); }
.nav__right { display: flex; align-items: center; gap: var(--s-lg); }
.nav__badge { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-mute); border: 1px solid var(--hairline); padding: 6px 12px; border-radius: var(--r-full); }
.nav__badge .pulse { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--accent); box-shadow: 0 0 0 0 rgba(45,107,255,.5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(45,107,255,0); } 100% { box-shadow: 0 0 0 0 rgba(45,107,255,0); } }
.nav__toggle { display: none; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--ink); }
.nav__cta { padding: 10px 18px; font-size: 15px; }

/* ---------- hero (single-frame editorial banner) ---------- */
.hero {
  position: relative; padding: var(--s-3xl) 0; overflow: hidden;
  /* violet-sky atmospheric wash (Superhuman signature) */
  background:
    radial-gradient(1100px 540px at 88% -8%, rgba(201,180,250,.55), transparent 60%),
    radial-gradient(760px 420px at 12% 8%, rgba(45,107,255,.10), transparent 60%),
    linear-gradient(180deg, #fbfaff, #ffffff 70%);
}
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: var(--s-lg); font-size: 18px; max-width: 46ch; }
.hero .lead strong { color: var(--ink); font-weight: 600; }

/* trust point chips — full-width row spanning both hero columns */
.hero__points { grid-column: 1 / -1; list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-sm); margin: var(--s-md) 0 0; padding: 0; }
.hpoint {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.7); border: 1px solid var(--hairline); border-radius: var(--r-full);
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink);
}
.hpoint__ico { width: 18px; height: 18px; border-radius: var(--r-full); background: var(--violet-tint); color: var(--indigo); display: grid; place-items: center; flex: none; }
.hpoint__ico svg { width: 11px; height: 11px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-md); margin-top: var(--s-xl); }
.hero__rated { display: flex; align-items: center; gap: var(--s-md); margin-top: var(--s-lg); font-size: 13.5px; color: var(--ink-mute); }
.hero__rated .avs { display: flex; flex: none; }
.hero__rated .avs img { width: 30px; height: 30px; border-radius: var(--r-full); border: 2px solid #fff; object-fit: cover; margin-left: -10px; }
.hero__rated .avs img:first-child { margin-left: 0; }
.hero__rated > span:last-child { flex: 1; min-width: 0; line-height: 1.45; }
.hero__rated .stars { color: #f5a623; letter-spacing: 1px; }

/* hero LinkedIn → portfolio illustration — horizontal, fits in frame */
.hero__visual { position: relative; }
.hero__cards { display: flex; align-items: center; justify-content: center; }
.hero__cap { text-align: center; color: var(--ink-mute); font-size: 13px; margin: var(--s-lg) auto 0; max-width: 42ch; }

/* LinkedIn card */
.li-card { width: 50%; max-width: 270px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-2); overflow: hidden; transform: rotate(-2deg); }
.li-card__top { background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; padding: 12px 18px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--hairline); }
.li-logo { background: #0a66c2; color: #fff; font-weight: 800; font-size: 12px; width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; flex: none; }
/* blue banner strip — the avatar overlaps THIS, like a real LinkedIn profile */
.li-card__banner { height: 46px; background: linear-gradient(120deg, #0a66c2, #378fe9); }
.li-card__body { padding: 0 18px 18px; }
.li-avatar { width: 58px; height: 58px; border-radius: var(--r-full); overflow: hidden; background: var(--teal-mid); display: grid; place-items: center; margin: -29px 0 12px; border: 4px solid #fff; position: relative; z-index: 2; }
.li-avatar img { width: 100%; height: 100%; object-fit: cover; }
.li-name { font-weight: 700; color: var(--ink); font-size: 18px; }
.li-role { color: var(--ink-mute); font-size: 13px; margin-top: 2px; }
.li-website { margin-top: 16px; border: 1.5px dashed #d98a6a; border-radius: var(--r-md); padding: 10px 12px; }
.li-website__label { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #c0653f; }
.li-website__url { display: flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--ink); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-website__url svg { flex: none; color: #c0653f; }

/* arrow between */
.hero__arrow { flex: none; width: 44px; height: 44px; border-radius: var(--r-full); background: #d2674a; color: #fff; display: grid; place-items: center; margin: 0 -10px; z-index: 4; box-shadow: var(--shadow-1); }

/* portfolio browser mock */
.pf-card { width: 56%; max-width: 320px; background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-2); overflow: hidden; transform: rotate(2deg); }
.pf-card__bar { background: var(--teal-deep); padding: 12px 14px; display: flex; gap: 6px; }
.pf-card__bar span { width: 9px; height: 9px; border-radius: var(--r-full); background: rgba(255,255,255,.5); }
.pf-card__body { padding: 20px; }
.pf-card__title { font-size: 19px; line-height: 1.15; letter-spacing: -.01em; }
.pf-card__title span { color: #d2674a; }
.pf-line { height: 6px; border-radius: 3px; background: var(--hairline); margin-top: 14px; }
.pf-line.short { width: 70%; margin-top: 8px; }
.pf-hero-img { height: 84px; border-radius: var(--r-md); background: linear-gradient(135deg, #efe8df, #e7d4cc); margin-top: 16px; position: relative; overflow: hidden; }
.pf-blob { position: absolute; right: 16px; bottom: -10px; width: 56px; height: 56px; border-radius: var(--r-full); background: #d9b3a6; }
.pf-nav { display: flex; gap: 8px; margin-top: 16px; }
.pf-nav span { font-size: 12px; color: var(--ink-mute); background: var(--canvas-soft); border: 1px solid var(--hairline); padding: 5px 12px; border-radius: var(--r-full); }

/* hero stat row — icon + bold claim + supporting line, card-style */
.hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); margin-top: var(--s-3xl); }
.hstat { display: flex; gap: var(--s-md); align-items: flex-start; background: rgba(255,255,255,.6); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-lg); }
.hstat__ico { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--violet-tint); color: var(--indigo); display: grid; place-items: center; flex: none; }
.hstat__num { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.hstat__num span { color: var(--accent); }
.hstat__lab { font-size: 13.5px; color: var(--ink-mute); margin-top: 3px; line-height: 1.4; }
/* legacy stat tokens kept for any other use */
.stat__num { font-size: 30px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.stat__num span { color: var(--accent); }
.stat__label { font-size: 14px; color: var(--ink-mute); margin-top: 4px; }

/* ---------- research strip (dark, sits under the hero) ---------- */
.rstrip { background: var(--indigo); color: #fff; }
.rstrip__inner { display: flex; align-items: center; gap: var(--s-2xl); padding-top: var(--s-xl); padding-bottom: var(--s-xl); flex-wrap: wrap; }
.rstrip__lead { flex: 1 1 220px; min-width: 0; }
.rstrip__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-soft); margin: 0 0 4px; }
.rstrip__title { font-size: 18px; font-weight: 600; color: #fff; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
.rstrip__title strong { color: var(--violet-soft); font-weight: 700; }
.rstrip__stats { display: flex; gap: var(--s-2xl); flex: 2 1 420px; }
.rstat { display: flex; flex-direction: column; gap: 2px; }
.rstat__num { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -.03em; line-height: 1; }
.rstat__num small { font-size: 15px; font-weight: 600; color: var(--violet-soft); margin-left: 1px; }
.rstat__lab { font-size: 12.5px; color: var(--on-dark-mute); line-height: 1.35; }
.rstrip__cta { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--violet-soft); color: var(--indigo); font-weight: 700; font-size: 14px; text-decoration: none; padding: 11px 18px; border-radius: var(--r-full); transition: background .15s ease, transform .1s ease; white-space: nowrap; }
.rstrip__cta:hover { background: #fff; transform: translateY(-1px); }

/* ---------- trust strip ---------- */
.trust-strip { background: var(--dark); color: var(--on-dark); }
.trust-strip .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-md) var(--s-2xl); padding-top: var(--s-xl); padding-bottom: var(--s-xl); }
.trust-strip__item { display: inline-flex; align-items: center; gap: var(--s-sm); font-size: 14.5px; color: #d9d9de; }
.trust-strip__item svg { color: var(--accent); flex: none; }

/* ---------- section tabs (sticky scrollspy — styled as clickable buttons) ---------- */
.sectabs {
  position: sticky; top: 68px; z-index: 40;
  background: rgba(255,255,255,.55);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.sectabs__inner { display: flex; gap: var(--s-sm); padding-top: var(--s-sm); padding-bottom: var(--s-sm); justify-content: center; }
/* compact button-looking chips — small, don't eat vertical space */
.sectab {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 7px 14px; text-decoration: none; color: var(--ink-body);
  background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-full);
  position: relative; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sectab:hover { background: #fff; border-color: var(--ink-faint); box-shadow: var(--shadow-1); color: var(--ink); }
.sectab__ico { width: 20px; height: 20px; display: grid; place-items: center; color: var(--accent); flex: none; transition: color .15s ease; }
.sectab__ico svg { width: 15px; height: 15px; }
.sectab__txt b { font-size: 13.5px; color: inherit; font-weight: 600; line-height: 1; }
.sectab__txt small { display: none; }  /* drop the sub-label — keeps the bar slim */
/* active state: filled accent pill */
.sectab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sectab.is-active .sectab__ico { color: #fff; }

/* ---------- profession switcher (Superhuman tab section) ---------- */
.switcher__head { text-align: center; margin-bottom: var(--s-3xl); }
.tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden; background: var(--canvas); box-shadow: var(--shadow-1);
}
.tab {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px;
  background: var(--canvas-soft); border: 0; border-right: 1px solid var(--hairline);
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink-mute); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tab:last-child { border-right: 0; }
.tab .ico { width: 26px; height: 26px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; font-size: 14px; flex: none; }
.tab[aria-selected="true"] { background: var(--canvas); color: var(--ink); }
.tab:hover { color: var(--ink); }

.switcher__hatch { height: 18px; background: repeating-linear-gradient(135deg, var(--hairline) 0 1px, transparent 1px 9px); border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.panel { display: none; border: 1px solid var(--hairline); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }
.panel.active { display: grid; grid-template-columns: 1fr 1fr; }
.panel__copy { padding: var(--s-3xl); }
.panel__copy .ptag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: var(--s-lg); }
.panel__copy h3 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.05; letter-spacing: -.02em; }
.panel__copy p { font-size: 16px; color: var(--ink-mute); margin: var(--s-lg) 0 var(--s-xl); }
.panel__copy .quote { border-left: 3px solid var(--violet-soft); padding-left: var(--s-lg); font-size: 15px; color: var(--ink-body); margin: var(--s-xl) 0; }
.panel__copy .quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 13px; color: var(--ink-faint); }
.panel__photo { position: relative; min-height: 380px; background: var(--violet-tint); }
.panel__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__photo .badge {
  position: absolute; left: 18px; bottom: 18px; background: rgba(27,25,56,.82); color: #fff;
  padding: 8px 14px; border-radius: var(--r-full); font-size: 13px; font-weight: 600; backdrop-filter: blur(6px);
}

/* ---------- reviews ---------- */
.reviews__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-lg); margin-bottom: var(--s-2xl); }
.tp-slot { border: 1px dashed var(--hairline); border-radius: var(--r-lg); padding: var(--s-2xl); text-align: center; background: var(--canvas); }
.tp-slot .tp-note { color: var(--ink-mute); font-size: 14px; margin-top: var(--s-md); }
.tp-logo { font-weight: 600; color: var(--ink); }
.tp-logo .star { color: #00b67a; }
.founding-note { margin-top: var(--s-xl); display: flex; gap: var(--s-md); align-items: flex-start; background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); }
.founding-note svg { color: var(--accent); flex: none; margin-top: 2px; }

/* ---------- video ---------- */
.video-frame {
  position: relative; aspect-ratio: 16/9; border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a, #1a2540 60%, #2d6bff);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-2);
}
.video-frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 50%); }
.play-btn { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: var(--r-full); background: rgba(255,255,255,.95); border: 0; display: grid; place-items: center; cursor: pointer; transition: transform .15s ease; }
.play-btn:hover { transform: scale(1.06); }
.play-btn svg { margin-left: 4px; color: var(--accent); }
.video-cap { position: absolute; bottom: 18px; left: 22px; z-index: 2; color: #fff; font-size: 14px; opacity: .85; }

/* ---------- research ---------- */
.research-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); margin-top: var(--s-3xl); }
.research-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-2xl); display: flex; flex-direction: column; }
.research-ico { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--violet-tint); color: var(--indigo); display: grid; place-items: center; margin-bottom: var(--s-lg); }
.research-card .big { font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1; letter-spacing: -.03em; }
.research-card h3 { font-size: 18px; margin: var(--s-sm) 0 var(--s-sm); }
.research-card p { font-size: 15px; color: var(--ink-mute); margin: 0; }
.research-card cite { display: block; margin-top: var(--s-lg); font-size: 12.5px; color: var(--ink-faint); font-style: normal; }
.research-link { margin-top: var(--s-md); font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; align-self: flex-start; }
.research-link:hover { text-decoration: underline; }
.research-foot { margin-top: var(--s-2xl); font-size: 13px; color: var(--ink-faint); text-align: center; }
.swipe-hint { display: none; }

/* ---------- samples ---------- */
.samples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); margin-top: var(--s-3xl); }
.samples-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sample-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; background: var(--canvas); transition: transform .15s ease, box-shadow .15s ease; display: block; }
.sample-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.sample-thumb { aspect-ratio: 3/2 ; display: flex; align-items: flex-end; justify-content: center; color: #fff; position: relative; overflow: hidden; }
.sample-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sample-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(27,25,56,.78)); }
.sample-thumb .label { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(27,25,56,.55); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-full); backdrop-filter: blur(4px); }
.sample-thumb .who { position: relative; z-index: 2; text-align: center; padding-bottom: 14px; }
.sample-thumb .mock-name { font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.sample-thumb .mock-role { font-size: 12.5px; opacity: .88; margin-top: 2px; }
/* custom catch-all card */
.sample-thumb--custom { background: linear-gradient(135deg, var(--violet-tint), #dfe9ff); }
.sample-thumb--custom::after { display: none; }
.sample-card--custom .custom-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 64px; height: 64px; border-radius: var(--r-full); background: #fff; color: var(--accent); display: grid; place-items: center; box-shadow: var(--shadow-1); }
.sample-card--custom .who { color: var(--indigo); }
.sample-card--custom .mock-role { opacity: .7; color: var(--ink-mute); }
.sample-body { padding: var(--s-xl); }
.sample-plan { display: block; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 6px; letter-spacing: .01em; }
.sample-plan strong { font-weight: 700; }
.sample-body h3 { font-size: 18px; }
.sample-body p { font-size: 14.5px; color: var(--ink-mute); margin: var(--s-sm) 0 0; }
.sample-body .view { color: var(--accent); font-weight: 600; font-size: 14px; margin-top: var(--s-lg); display: inline-flex; gap: 6px; align-items: center; }

/* ---------- process: interactive stepper rail + detail cards ---------- */
/* the rail — 4 nodes joined by a connector line, labels under each.
   Progress is driven by [data-active] on .stepper (set by JS on hover/focus,
   default 3). Nodes up to & including active fill accent; connectors up to
   active fill accent; the active node gets the pulsing ring. */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--s-3xl); position: relative; }
.stepper__node {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-md);
  position: relative; padding: var(--s-md) var(--s-sm) 0; background: none; border: 0;
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.stepper__node:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-md); }
/* connector segment to the next node — behind the circle, transitions colour */
.stepper__node::after {
  content: ""; position: absolute; top: calc(var(--s-md) + 24px); left: 50%; width: 100%; height: 3px;
  background: var(--hairline); z-index: 0; transition: background .25s ease;
}
.stepper__node:last-child::after { display: none; }

.node {
  width: 52px; height: 52px; border-radius: var(--r-full); display: grid; place-items: center;
  background: var(--violet-tint); color: var(--indigo); border: 2px solid var(--hairline);
  position: relative; z-index: 1; flex: none; transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
/* gentle lift on direct hover even before state changes */
.stepper__node:hover .node { transform: scale(1.06); }
.node__ico { display: block; }
.node__check { display: none; }
.node__label { font-size: 15px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.2; transition: color .25s ease; }

/* --- state machine: reached / active, by data-active level --- */
/* nodes & connectors at or before the active step turn accent */
.stepper[data-active="1"] .stepper__node:nth-child(-n+1) .node,
.stepper[data-active="2"] .stepper__node:nth-child(-n+2) .node,
.stepper[data-active="3"] .stepper__node:nth-child(-n+3) .node,
.stepper[data-active="4"] .stepper__node:nth-child(-n+4) .node {
  background: var(--accent); color: #fff; border-color: var(--accent);
}
.stepper[data-active="2"] .stepper__node:nth-child(-n+1)::after,
.stepper[data-active="3"] .stepper__node:nth-child(-n+2)::after,
.stepper[data-active="4"] .stepper__node:nth-child(-n+3)::after {
  background: var(--accent);
}
/* reached labels go dark */
.stepper[data-active="1"] .stepper__node:nth-child(-n+1) .node__label,
.stepper[data-active="2"] .stepper__node:nth-child(-n+2) .node__label,
.stepper[data-active="3"] .stepper__node:nth-child(-n+3) .node__label,
.stepper[data-active="4"] .stepper__node:nth-child(-n+4) .node__label {
  color: var(--ink);
}
/* steps strictly before active show the check; the active step keeps its own icon */
.stepper[data-active="2"] .stepper__node:nth-child(-n+1) .node__ico,
.stepper[data-active="3"] .stepper__node:nth-child(-n+2) .node__ico,
.stepper[data-active="4"] .stepper__node:nth-child(-n+3) .node__ico { display: none; }
.stepper[data-active="2"] .stepper__node:nth-child(-n+1) .node__check,
.stepper[data-active="3"] .stepper__node:nth-child(-n+2) .node__check,
.stepper[data-active="4"] .stepper__node:nth-child(-n+3) .node__check { display: block; }
/* the active node: pulsing ring + lift */
.stepper[data-active="1"] .stepper__node:nth-child(1) .node,
.stepper[data-active="2"] .stepper__node:nth-child(2) .node,
.stepper[data-active="3"] .stepper__node:nth-child(3) .node,
.stepper[data-active="4"] .stepper__node:nth-child(4) .node {
  box-shadow: 0 0 0 5px rgba(45,107,255,.18); transform: scale(1.06);
}
.stepper__node .node::before { content: none; }
.stepper[data-active="1"] .stepper__node:nth-child(1) .node::before,
.stepper[data-active="2"] .stepper__node:nth-child(2) .node::before,
.stepper[data-active="3"] .stepper__node:nth-child(3) .node::before,
.stepper[data-active="4"] .stepper__node:nth-child(4) .node::before {
  content: ""; position: absolute; inset: -8px; border-radius: var(--r-full);
  border: 2px dashed var(--violet-soft); animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .node::before { animation: none !important; }
  .node, .stepper__node::after, .node__label { transition: none; }
}

/* detail cards below the rail; the card matching the active step lifts */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg); margin-top: var(--s-xl); }
.step { background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease; }
.process[data-active="1"] .step:nth-child(1),
.process[data-active="2"] .step:nth-child(2),
.process[data-active="3"] .step:nth-child(3),
.process[data-active="4"] .step:nth-child(4) {
  background: var(--canvas); border-color: var(--accent); box-shadow: var(--shadow-2); transform: translateY(-3px);
}
.step__num { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-sm); }
.step h3 { font-size: 17px; margin: 0 0 var(--s-sm); }
.step p { font-size: 14px; color: var(--ink-mute); margin: 0; }

/* ---------- pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); margin-top: var(--s-3xl); align-items: start; }
.price-card { border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-2xl); background: var(--canvas); position: relative; }
.price-card--featured { background: var(--dark); color: #d9d9de; border-color: var(--dark); }
.price-card--featured h3, .price-card--featured .price__num { color: #fff; }
.price-card--featured .price__feat li { color: #d9d9de; }
.price-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-full); }
.price__plan { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.price-card--featured .price__plan { color: #7ea2ff; }
.price__tagline { font-size: 15px; margin: var(--s-md) 0 var(--s-lg); min-height: 44px; }
.price__num { font-size: 44px; font-weight: 600; color: var(--ink); letter-spacing: -.03em; }
.price__num .cur { font-size: 24px; vertical-align: top; }
.price__sub { font-size: 13px; color: var(--ink-faint); margin-top: 4px; }
.price-card--featured .price__sub { color: #9aa0b3; }
.price__feat { list-style: none; padding: 0; margin: var(--s-xl) 0; }
.price__feat li { display: flex; gap: var(--s-sm); font-size: 14.5px; padding: 7px 0; align-items: flex-start; }
.price__feat svg { color: var(--accent); flex: none; margin-top: 3px; }
.price-card .btn { width: 100%; justify-content: center; }
.price__norisk { text-align: center; font-size: 12.5px; color: var(--ink-faint); margin: var(--s-sm) 0 0; }
.price__norisk--light { color: #9aa0b3; }
.pricing-note { text-align: center; margin-top: var(--s-2xl); font-size: 14px; color: var(--ink-mute); }

/* ---------- after-launch: two paths + care plans + add-ons ---------- */
.afterlaunch { margin-top: var(--s-huge); border-top: 1px solid var(--hairline); padding-top: var(--s-3xl); }
.afterlaunch .display-lg { margin-top: var(--s-sm); }

/* two big choice cards */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-xl); margin-top: var(--s-2xl); }
.path { position: relative; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-2xl); }
.path--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.path__tag { position: absolute; top: -12px; left: var(--s-2xl); background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-full); }
.path__head { display: flex; align-items: center; gap: var(--s-lg); margin-bottom: var(--s-md); }
.path__ico { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--violet-tint); color: var(--indigo); display: grid; place-items: center; flex: none; }
.path__head h4 { font-size: 18px; }
.path__price { font-size: 24px; font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.path__price span { font-size: 14px; font-weight: 600; color: var(--ink-mute); }
.path p { font-size: 15px; color: var(--ink-mute); margin: 0; }

/* 3-months-free offer banner */
.freebanner {
  display: flex; align-items: center; gap: var(--s-lg); margin-top: var(--s-xl);
  background: linear-gradient(110deg, var(--violet-tint), #eaf0ff);
  border: 1px solid var(--violet-soft); border-radius: var(--r-lg); padding: var(--s-lg) var(--s-xl);
}
.freebanner__gift { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.freebanner strong { color: var(--ink); display: block; font-size: 15.5px; }
.freebanner span { color: var(--ink-mute); font-size: 14px; }

/* care plans */
.care { margin-top: var(--s-2xl); }
.care__intro { text-align: center; font-size: 15px; color: var(--ink-mute); margin: 0 0 var(--s-xl); }
.care-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.care-card { position: relative; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); }
.care-card--featured { border-color: var(--accent); }
.care-card__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 11px; border-radius: var(--r-full); white-space: nowrap; }
.care-card__name { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.care-card__price { font-size: 30px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; margin-top: 6px; }
.care-card__price span { font-size: 15px; font-weight: 600; color: var(--ink-mute); }
.care-card__sub { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
.care-card ul { list-style: none; padding: 0; margin: var(--s-lg) 0 0; }
.care-card li { display: flex; gap: var(--s-sm); align-items: flex-start; font-size: 14px; color: var(--ink-body); padding: 5px 0; }
.care-card li svg { color: var(--accent); flex: none; margin-top: 3px; }

/* add-ons */
.addons { margin-top: var(--s-2xl); background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl) var(--s-2xl); }
.addons__label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: .02em; margin-bottom: var(--s-md); }
.addons__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-md) var(--s-2xl); }
.addons__list li { display: flex; align-items: center; gap: var(--s-sm); font-size: 14.5px; color: var(--ink-mute); }
.addons__list li svg { color: var(--accent); flex: none; }
.addons__list strong { color: var(--ink); font-weight: 600; }
.afterlaunch__honest { text-align: center; font-size: 13.5px; color: var(--ink-faint); margin: var(--s-2xl) auto 0; max-width: 64ch; }

/* ---------- promo band ---------- */
.promo { background: linear-gradient(120deg, var(--accent), #5b86ff); color: #fff; border-radius: var(--r-xl); padding: var(--s-3xl); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-xl); }
.promo h2 { color: #fff; }
.promo p { color: rgba(255,255,255,.9); margin: var(--s-sm) 0 0; max-width: 52ch; }
.promo .promo__pill { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-full); margin-bottom: var(--s-lg); }

/* ---------- case study ---------- */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3xl); align-items: center; }
.case__visual { aspect-ratio: 3/2; border-radius: var(--r-lg); background: radial-gradient(120% 120% at 20% 10%, var(--violet-tint), #e7ecff 70%); border: 1px solid var(--hairline); display: grid; place-items: center; position: relative; overflow: hidden; padding: var(--s-xl); }
.case__visual .ba { display: flex; gap: 18px; align-items: center; }
.ba-mock { margin: 0; width: 132px; min-height: 168px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-2); padding: 12px; display: flex; flex-direction: column; gap: 7px; position: relative; }
.ba-mock--before { transform: rotate(-3deg); opacity: .92; }
.ba-mock--after { transform: rotate(3deg); }
.ba-tag { position: absolute; top: -9px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ink-faint); color: #fff; padding: 3px 8px; border-radius: var(--r-full); }
.ba-tag--after { background: var(--accent); }
.ba-mline.ba-line--blue { height: 18px; border-radius: 4px; background: #0a66c2; }
.ba-circle { width: 30px; height: 30px; border-radius: var(--r-full); background: var(--teal-mid); }
.ba-line { height: 6px; border-radius: 3px; background: var(--hairline); }
.ba-line.short { width: 60%; }
.ba-bar { height: 14px; border-radius: 4px; background: var(--teal-deep); }
.ba-hero { height: 40px; border-radius: 5px; background: linear-gradient(135deg, #efe8df, #e7d4cc); }
.ba-btn { height: 16px; width: 54px; border-radius: var(--r-full); background: var(--accent); margin-top: 2px; }
.ba-mock figcaption { font-size: 10.5px; color: var(--ink-mute); text-align: center; margin-top: auto; padding-top: 4px; font-weight: 600; }
.ba-arrow { color: var(--accent); flex: none; }
.process-video { max-width: 820px; margin: 0 auto; }
.case ul { padding-left: 18px; margin: var(--s-lg) 0 var(--s-xl); }
.case li { font-size: 15px; margin: 8px 0; color: var(--ink-body); }
.case .metrics { display: flex; gap: var(--s-2xl); margin-top: var(--s-xl); }
.case .metrics .m-num { font-size: 26px; font-weight: 600; color: var(--accent); }
.case .metrics .m-lab { font-size: 13px; color: var(--ink-mute); }

/* ---------- faq ---------- */
.faq { max-width: 760px; margin: var(--s-3xl) auto 0; display: grid; gap: var(--s-md); }
/* card-style FAQ items (not plain underlined rows) */
.faq__item { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 0 var(--s-xl); transition: border-color .15s ease, box-shadow .15s ease; }
.faq__item:hover { border-color: var(--ink-faint); }
.faq__item[open] { border-color: var(--accent); box-shadow: var(--shadow-1); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; padding: var(--s-lg) 0; font-size: 16.5px; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-lg); }
.faq__q .chev { transition: transform .2s ease; color: var(--accent); flex: none; }
.faq__item[open] .chev { transform: rotate(180deg); }
.faq__a { padding: 0 0 var(--s-lg); color: var(--ink-mute); font-size: 15px; line-height: 1.55; }
.guarantee { background: var(--canvas-soft); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: var(--s-xl); margin: 0 auto var(--s-2xl); max-width: 760px; }
.guarantee strong { color: var(--ink); }

/* ---------- contact / closing CTA band (indigo, matches nav & featured pricing) ---------- */
.cta-band { background: var(--indigo); color: #fff; }
.cta-band .wrap { padding-top: var(--s-huge); padding-bottom: var(--s-huge); }
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band .lead { color: var(--on-dark-mute); }
/* two-column contact: pitch left, form right */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3xl); align-items: center; }
.contact-intro h2 { margin-top: var(--s-xs); }
.contact-checks { list-style: none; padding: 0; margin: var(--s-xl) 0 0; display: grid; gap: var(--s-md); }
.contact-checks li { display: flex; align-items: center; gap: var(--s-sm); font-size: 15px; color: #d7d5e6; }
.contact-checks svg { flex: none; color: var(--violet-soft); }
.contact-card { background: #232047; border: 1px solid var(--hairline-dark); border-radius: var(--r-lg); padding: var(--s-2xl); }
.contact-card label { display: block; font-size: 13px; color: #c7c5da; margin-bottom: 6px; }
.contact-card input, .contact-card select, .contact-card textarea {
  width: 100%; background: #1a1838; border: 1px solid var(--hairline-dark); color: #fff; border-radius: var(--r-sm);
  padding: 11px 13px; font: inherit; font-size: 15px; margin-bottom: var(--s-lg);
}
.contact-card input:focus, .contact-card select:focus, .contact-card textarea:focus { outline: none; border-color: var(--violet-soft); }
.contact-card input::placeholder, .contact-card textarea::placeholder { color: #7d7a99; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
.contact-or { color: var(--on-dark-mute); font-size: 14px; margin-top: var(--s-lg); }
.contact-or a { color: var(--violet-soft); text-decoration: none; font-weight: 600; }

/* ---------- detail-page header ---------- */
.page-head { padding: var(--s-huge) 0 var(--s-3xl); background: linear-gradient(180deg, #fbfaff, #ffffff 80%); }
.page-head h1 { margin-top: var(--s-xs); }

/* ---------- "what you get" value cards (colorful + interactive) ---------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); margin-top: var(--s-3xl); text-align: left; }
.value-grid--6 { grid-template-columns: repeat(3, 1fr); }
.value-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }
.value-ico { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--s-md); transition: transform .15s ease; }
.value-card:hover .value-ico { transform: scale(1.08) rotate(-3deg); }
.value-card h3 { font-size: 17px; margin-bottom: 6px; }
.value-card p { font-size: 14.5px; color: var(--ink-mute); margin: 0; }
/* icon badges rotate only within the brand palette (DESIGN.md: indigo / violet-soft / teal / accent) */
.value-card:nth-child(3n+1) .value-ico { background: #eaf0ff; color: var(--accent); }
.value-card:nth-child(3n+2) .value-ico { background: var(--violet-tint); color: var(--indigo); }
.value-card:nth-child(3n+3) .value-ico { background: #e4f1f0; color: var(--teal-deep); }

/* ---------- research importance strip (home) ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-xl); margin-top: var(--s-3xl); }
.stat-pill { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-2xl) var(--s-xl); }
.stat-pill__num { font-size: 48px; font-weight: 700; color: var(--accent); letter-spacing: -.03em; line-height: 1; }
.stat-pill__num span { font-size: 22px; }
.stat-pill__lab { font-size: 14.5px; color: var(--ink-mute); margin-top: var(--s-sm); }

/* ---------- compact process (home) ---------- */
.process-simple { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-lg); margin-top: var(--s-3xl); max-width: 880px; margin-left: auto; margin-right: auto; }
.psimple { display: flex; gap: var(--s-lg); align-items: flex-start; background: var(--canvas-soft); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-xl); }
.psimple__num { width: 34px; height: 34px; border-radius: var(--r-full); background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; }
.psimple h3 { font-size: 16.5px; margin: 0 0 4px; }
.psimple p { font-size: 14px; color: var(--ink-mute); margin: 0; }

/* ---------- founding-50 lifetime-price banner ---------- */
.founding50 { display: inline-flex; align-items: center; gap: var(--s-md); flex-wrap: wrap; justify-content: center; max-width: 720px; margin: var(--s-xl) auto 0; background: var(--violet-tint); border: 1px solid var(--violet-soft); border-radius: var(--r-lg); padding: var(--s-md) var(--s-xl); font-size: 15px; color: var(--ink-body); }
.founding50 strong { color: var(--ink); }
.founding50__tag { flex: none; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-full); }

/* ---------- pricing teaser (home) ---------- */
.price-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); margin-top: var(--s-3xl); }
.pt-card { display: block; text-decoration: none; color: inherit; background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: var(--s-2xl) var(--s-xl); position: relative; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--ink-faint); }
.pt-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pt-card--featured:hover { box-shadow: 0 0 0 1px var(--accent), var(--shadow-2); }
.pt-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--r-full); white-space: nowrap; }
.pt-name { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pt-price { font-size: 40px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; margin: 6px 0 4px; }
.pt-price span { font-size: 22px; vertical-align: top; }
.pt-desc { font-size: 14px; color: var(--ink-mute); }
.pt-link { display: inline-block; margin-top: var(--s-md); font-size: 13px; font-weight: 600; color: var(--accent); }

/* ---------- footer ---------- */
.footer { background: var(--canvas); border-top: 1px solid var(--hairline); padding: var(--s-3xl) 0; }
.footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2xl); }
.footer__col h4 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-md); }
.footer__col a { display: block; color: var(--ink-mute); text-decoration: none; font-size: 14.5px; padding: 4px 0; }
.footer__col a:hover { color: var(--ink); }
.footer__legal { margin-top: var(--s-2xl); padding-top: var(--s-xl); border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-md); font-size: 13px; color: var(--ink-faint); }

/* ---------- mobile sticky cta ---------- */
.sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: #fff; border-top: 1px solid var(--hairline); padding: 12px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.06); }
.sticky-cta .btn { width: 100%; justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .research-grid, .samples-grid, .process-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .value-grid, .value-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .case { grid-template-columns: 1fr; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-2xl); }
  .hero__visual { max-width: 560px; margin: 0 auto; }
  .process-grid::before { display: none; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-2xl); }
}
@media (max-width: 767px) {
  .section { padding: var(--s-3xl) 0; }
  .hero { padding: var(--s-3xl) 0; }
  /* lighter reading load on mobile: smaller, tighter lead paragraphs */
  .lead { font-size: 16px; line-height: 1.45; }
  .hero .lead { font-size: 16.5px; }
  .nav__links, .nav__badge { display: none; }
  .nav__toggle { display: block; }
  .nav__cta { padding: 8px 14px; font-size: 13.5px; }
  .nav__inner { height: 60px; }
  .nav.open .nav__links { display: flex; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: flex-start; text-align: left; background: #fff; border-bottom: 1px solid var(--hairline); padding: var(--s-lg) var(--s-xl); gap: var(--s-lg); }
  .nav.open .nav__links a { width: 100%; }
  .hero__stats { grid-template-columns: 1fr; gap: var(--s-md); }
  .pricing-grid { grid-template-columns: 1fr; }
  /* hero chips: one per row, full width, sitting under the illustration (DOM order: text → visual → chips) */
  .hero__points { flex-direction: column; flex-wrap: nowrap; gap: 8px; margin-top: var(--s-lg); }
  .hpoint { font-size: 13px; padding: 10px 14px; gap: 8px; width: 100%; justify-content: flex-start; }
  .hpoint__ico { width: 18px; height: 18px; }
  /* research strip stacks cleanly on mobile */
  .rstrip__inner { flex-direction: column; align-items: stretch; gap: var(--s-lg); text-align: left; }
  .rstrip__lead { flex: none; }
  .rstrip__title { font-size: 17px; }
  .rstrip__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-md); flex: none; }
  .rstat { gap: 3px; }
  .rstat__num { font-size: 22px; }
  .rstat__lab { font-size: 11.5px; }
  .rstrip__cta { width: 100%; justify-content: center; }
  /* keep illustration in frame on small screens */
  .hero__cards { transform: scale(.92); transform-origin: center; }
  .li-card__top { font-size: 14px; padding: 11px 14px; }
  .li-avatar { width: 50px; height: 50px; font-size: 16px; margin-top: -26px; }
  .li-name { font-size: 15px; }
  .pf-card__title { font-size: 15px; }
  .hero__arrow { width: 34px; height: 34px; }

  /* stepper becomes a compact VERTICAL timeline on mobile (4-across is too cramped) */
  .stepper { grid-template-columns: 1fr; gap: 0; margin-top: var(--s-2xl); }
  .stepper__node {
    flex-direction: row; align-items: center; justify-content: flex-start;
    gap: var(--s-md); padding: var(--s-sm) 0; width: 100%;
  }
  /* vertical connector line down the left, through the node centres */
  .stepper__node::after {
    top: 50%; left: 21px; width: 3px; height: 100%; transition: background .25s ease;
  }
  .node { width: 42px; height: 42px; }
  .node__label { font-size: 15px; text-align: left; }
  .node__check, .node__ico { width: 17px; height: 17px; }
  /* process detail cards become a swipe slider on mobile */
  .process-grid {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--s-lg); padding-bottom: var(--s-md); margin-top: var(--s-2xl);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .process-grid::-webkit-scrollbar { display: none; }
  .process-grid > .step {
    flex: 0 0 78%; scroll-snap-align: start; min-width: 0;
  }

  /* samples + research become horizontal swipe sliders on mobile.
     No negative margins (those caused viewport overflow); the slider
     stays within .wrap padding and scrolls internally. */
  /* horizontal swipe sliders on mobile: samples, research, value-grid, pricing teaser */
  .samples-grid, .research-grid, .value-grid--6, .price-teaser {
    display: flex; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--s-lg); padding-bottom: var(--s-md);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    scroll-padding-left: var(--s-xs);
  }
  .samples-grid::-webkit-scrollbar, .research-grid::-webkit-scrollbar,
  .value-grid--6::-webkit-scrollbar, .price-teaser::-webkit-scrollbar { display: none; }
  .samples-grid > *, .research-grid > *, .value-grid--6 > * {
    flex: 0 0 85%; scroll-snap-align: start; min-width: 0;
  }
  /* pricing teaser cards: keep Starter→Pro→Premium order, each clickable, peek next */
  .price-teaser { padding-top: 16px; }   /* room so the "Most chosen" badge isn't clipped by overflow */
  .price-teaser > .pt-card { flex: 0 0 78%; scroll-snap-align: start; min-width: 0; }
  .pt-card--featured { order: 0; }       /* do NOT reorder — keep natural Starter/Pro/Premium */
  /* hint that there's more to swipe */
  .swipe-hint { display: block; text-align: center; font-size: 12.5px; color: var(--ink-faint); margin-top: var(--s-md); }
  .price-card--featured { order: -1; }
  .promo { flex-direction: column; align-items: flex-start; padding: var(--s-2xl); }
  .contact-row { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--s-2xl); }
  .founding50 { font-size: 14px; }
  /* after-launch blocks stack on mobile */
  .paths { grid-template-columns: 1fr; }
  .care-grid { grid-template-columns: 1fr; }
  .addons__list { grid-template-columns: 1fr; }
  .freebanner { flex-direction: row; align-items: flex-start; }
  /* other home grids stack */
  .value-grid { grid-template-columns: 1fr; }
  .process-simple { grid-template-columns: 1fr; }
  .page-head { padding: var(--s-3xl) 0 var(--s-xl); }
  .sticky-cta { display: block; }
  body { padding-bottom: 72px; }
  /* case study: more breathing room, metrics in a row that wraps cleanly */
  .case { gap: var(--s-2xl); }
  .case h3 { margin-top: var(--s-md); }
  .case p { font-size: 15px !important; }
  .case .metrics { gap: var(--s-xl) var(--s-2xl); flex-wrap: wrap; margin-top: var(--s-xl); }
  .case .metrics > div { flex: 1 0 40%; }
  .case .metrics .m-num { font-size: 22px; }
  .case__visual { aspect-ratio: auto; padding: var(--s-2xl) var(--s-lg); }
  .ba-mock { width: 116px; min-height: 152px; }
  /* hero illustration shrinks but stays as the "LinkedIn → portfolio" story */
  .hero__visual { min-height: 0; max-width: 100%; overflow: hidden; }
  .li-card__top { font-size: 15px; padding: 12px 14px; }
  .li-avatar { width: 52px; height: 52px; font-size: 16px; }
  .li-name { font-size: 16px; }
  .pf-card__title { font-size: 16px; }
  .hero__arrow { width: 36px; height: 36px; }
  /* announcement bar: compact, no overflow on mobile */
  .announce { font-size: 12px; }
  .announce__inner { padding: 8px 32px 8px 12px; min-height: 0; gap: 4px; flex-wrap: wrap; }
  .announce__pill { display: none; }
  .announce__txt { line-height: 1.35; }
  .announce__txt a { display: inline; margin-left: 4px; white-space: normal; }
  .announce__close { right: 6px; }
  /* trust strip: left-aligned stack on mobile */
  .trust-strip .wrap { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: var(--s-md); }
  /* section tabs → horizontal swipe row of button-chips on mobile (5 tabs) */
  .sectabs { top: 60px; }
  .sectabs__inner { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; justify-content: flex-start; scroll-padding: 0 var(--s-xl); }
  .sectabs__inner::-webkit-scrollbar { display: none; }
  .sectab { flex: 0 0 auto; gap: 7px; padding: 9px 13px; }
  .sectab__ico { width: 26px; height: 26px; }
  .sectab__txt b { font-size: 13px; }
  .sectab__txt small { display: none; }
  [id] { scroll-margin-top: 132px; }

  /* footer: stack neatly, legal column-wise */
  .footer__grid { flex-direction: column; gap: var(--s-2xl); }
  .footer__col { width: 100%; max-width: none !important; }
  .footer__legal { flex-direction: column; gap: var(--s-sm); text-align: left; }
}

/* Contain horizontal overflow WITHOUT breaking position:sticky.
   (overflow-x:hidden on html/body would disable the sticky section tabs,
   so we clamp width on body instead and let sliders self-contain.) */
body { max-width: 100%; }