/* Tutrivo marketing site. Layout, type and colour follow the Systhems reference: a photo hero in a
   rounded frame, soft grey and near-black sections with large rounded edges, white cards, mono labels
   with an orange square, two-tone headlines, and pill buttons with a square arrow chip. */

:root {
  --bg: #F7F7F7;
  --surface: #FFFFFF;
  --surface-2: #F0F0F0;
  --ink: #0A0A0A;
  --text-2: #5E5E5E;
  --tone: #8A8A8A;
  --line: rgba(10, 10, 10, .08);
  --line-2: rgba(10, 10, 10, .16);

  --dark: #141414;
  --dark-2: #1C1C1C;
  --dark-3: #262626;
  --dline: rgba(255, 255, 255, .09);
  --dline-2: rgba(255, 255, 255, .2);
  --on-dark-2: #A3A3A3;
  --tone-dark: #7E7E7E;

  --accent: #FF4912;
  --accent-ink: #C23A0D;
  --accent-light: #FF8A63;
  --accent-soft: rgba(255, 73, 18, .12);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1360px;
  --gutter: clamp(16px, 2.8vw, 40px);
  --section: clamp(88px, 10vw, 150px);
  --r: 20px;
  --r-lg: 24px;
  --r-xl: 32px;
  --nav-h: 76px;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans); letter-spacing: -.011em;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 500; text-decoration: none; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Type ---------- */
h1, .h1 { font-size: clamp(40px, 5.2vw, 76px); line-height: 1.04; letter-spacing: -.045em; }
h2, .h2 { font-size: clamp(30px, 3.3vw, 48px); line-height: 1.12; letter-spacing: -.038em; }
h3, .h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.022em; }
.tone { color: var(--tone); }
.lede { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: var(--text-2); max-width: 54ch; }
.micro { font-size: 13.5px; color: var(--text-2); }
.mono { font-family: var(--mono); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1.2 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.eyebrow::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--accent); }

/* Dark surfaces */
.dark, .deep { background: var(--dark); color: #fff; }
:is(.dark, .deep, .site-footer, .band) :is(.eyebrow) { color: #fff; }
:is(.dark, .deep, .site-footer) .tone { color: var(--tone-dark); }
:is(.dark, .deep, .site-footer) :is(.lede, .micro) { color: var(--on-dark-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 48px; padding: 0 6px 0 18px; border-radius: 12px; border: 1px solid transparent;
  font: 500 15px/1 var(--sans); letter-spacing: -.012em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:not(:has(.arr)) { padding: 0 20px; justify-content: center; }
.btn .arr { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; font-size: 0; transition: transform .25s ease; }
.btn .arr::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; }
.btn:hover .arr { transform: translateX(2px); }
.btn-sm { height: 42px; font-size: 14px; padding-left: 16px; }
.btn-sm .arr { width: 30px; height: 30px; border-radius: 7px; }
.btn-block { width: 100%; }
.btn-light { background: #fff; color: var(--ink); }
.btn-light .arr { background: var(--ink); color: #fff; }
.btn-light:hover { background: #f2f2f2; }
.btn-dark, .btn-mint { background: var(--ink); color: #fff; }
.btn-dark .arr, .btn-mint .arr { background: #fff; color: var(--ink); }
.btn-dark:hover, .btn-mint:hover { background: #2a2a2a; }
:is(.dark, .deep, .site-footer, .hero) .btn-mint { background: #fff; color: var(--ink); }
:is(.dark, .deep, .site-footer, .hero) .btn-mint .arr { background: var(--ink); color: #fff; }
:is(.dark, .deep, .site-footer, .hero) .btn-mint:hover { background: #f2f2f2; }
.btn-ghost, .btn-outline { background: transparent; border-color: var(--line-2); color: inherit; }
.btn-ghost .arr, .btn-outline .arr { background: var(--ink); color: #fff; }
.btn-ghost:hover, .btn-outline:hover { background: rgba(10, 10, 10, .04); }
:is(.dark, .deep, .site-footer, .hero) :is(.btn-ghost, .btn-outline) { border-color: rgba(255, 255, 255, .28); color: #fff; }
:is(.dark, .deep, .site-footer, .hero) :is(.btn-ghost, .btn-outline) .arr { background: #fff; color: var(--ink); }
:is(.dark, .deep, .site-footer, .hero) :is(.btn-ghost, .btn-outline):hover { background: rgba(255, 255, 255, .08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.link-arrow:hover { text-decoration-color: currentColor; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--ink); background: rgba(247, 247, 247, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); transition: background-color .3s, box-shadow .3s, color .3s; }
body.has-hero .site-header { position: absolute; }
.js body.has-hero .site-header { position: fixed; }
body.has-hero .site-header:not(.solid) { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; top: 6px; }
.nav { display: flex; align-items: center; gap: 28px; height: var(--nav-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 22px; letter-spacing: -.045em; color: inherit; }
/* Logo SVGs use currentColor: near-black on light backgrounds, white over the photo and on dark sections. */
.logo-full { display: block; height: 28px; width: auto; }
.logo-mark { flex: none; display: block; height: 28px; width: auto; }
.nav-links { display: flex; gap: 2px; margin-left: auto; list-style: none; }
.nav-links a, .nav-contact { display: block; padding: 8px 12px; border-radius: 10px; text-decoration: none; font-size: 14.5px; font-weight: 500; opacity: .82; transition: opacity .2s, background-color .2s; }
.nav-links a:hover, .nav-contact:hover { opacity: 1; }
.nav-links a[aria-current], .nav-contact[aria-current] { opacity: 1; background: rgba(10, 10, 10, .06); }
body.has-hero .site-header:not(.solid) :is(.nav-links a, .nav-contact)[aria-current] { background: rgba(255, 255, 255, .14); }
.nav-cta { display: flex; align-items: center; gap: 6px; }
.nav-book { height: 42px; display: inline-flex !important; align-items: center; padding: 0 14px !important; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 28%, transparent); opacity: 1 !important; }
.site-header .nav-cta .btn { background: var(--ink); color: #fff; }
.site-header .nav-cta .btn .arr { background: #fff; color: var(--ink); }
body.has-hero .site-header:not(.solid) .nav-cta .btn { background: #fff; color: var(--ink); }
body.has-hero .site-header:not(.solid) .nav-cta .btn .arr { background: var(--ink); color: #fff; }
.menu-btn { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 30%, transparent); background: transparent; cursor: pointer; place-items: center; }
.menu-btn path { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transition: transform .25s; transform-origin: 10px 10px; }
.menu-btn[aria-expanded="true"] .l1 { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .l2 { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { margin-bottom: 12px; padding: 10px; background: #fff; color: var(--ink); border-radius: var(--r); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35); }
.mobile-menu ul { list-style: none; margin-bottom: 10px; }
.mobile-menu a:not(.btn) { display: flex; align-items: baseline; gap: 14px; padding: 14px 10px; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 22px; letter-spacing: -.03em; }
.mobile-menu a[aria-current]:not(.btn) { color: var(--accent-ink); }
.mobile-menu .num { font: 500 11px var(--mono); color: var(--text-2); }
.mobile-menu .btn { width: 100%; }
@media (max-width: 1060px) { .nav-links, .nav-contact, .nav-book { display: none !important; } .nav-cta { margin-left: auto; } .menu-btn { display: grid; } }
@media (min-width: 1061px) { .mobile-menu { display: none !important; } }
.show-sm { display: none; }
@media (max-width: 560px) { .hide-sm { display: none; } .show-sm { display: inline; } }
@media (max-width: 380px) { .logo-full { height: 24px; } }

/* ---------- Home hero ---------- */
.hero { padding: 6px; background: var(--bg); }
.hero-frame { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: min(calc(100svh - 12px), 920px); border-radius: var(--r-xl); overflow: hidden; color: #fff; background: #1b0f0c; }
.hero-frame .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-frame::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 8, 3, .82) 0%, rgba(14, 8, 3, .55) 42%, rgba(14, 8, 3, .08) 78%), linear-gradient(0deg, rgba(14, 8, 3, .65) 0%, transparent 55%); }
.hero-inner { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding: calc(var(--nav-h) + 48px) calc(var(--gutter) - 6px) clamp(28px, 4vw, 44px); max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; }
.hero h1 { font-size: clamp(40px, 5vw, 78px); max-width: 16ch; }
.hero h1:has(.h-line) { max-width: none; }
.hero h1 .h-line { display: block; }
@media (min-width: 760px) { .hero h1 .h-line { white-space: nowrap; } }
.hero h1 .t2 { color: rgba(255, 255, 255, .74); }
.hero .lede { color: rgba(255, 255, 255, .86); font-size: clamp(16px, 1.35vw, 20px); max-width: 40ch; margin-top: 20px; }
.hero .btn-row { margin-top: 30px; }
.hero-card { flex: none; display: flex; align-items: center; gap: 14px; width: 360px; padding: 8px 16px 8px 8px; background: #fff; color: var(--ink); border-radius: 20px; text-decoration: none; box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); transition: transform .25s; }
.hero-card:hover { transform: translateY(-2px); }
.hero-card img { width: 128px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-radius: 14px; border: 1px solid var(--line); }
.hero-card b { display: block; font-weight: 500; font-size: 16px; letter-spacing: -.02em; line-height: 1.3; }
.hero-card .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; font-weight: 500; }
.hero-card .go i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.hero-card .go i::before { content: ''; width: 10px; height: 10px; background: #fff; -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; }

/* Showcase agencies: tabs above one agency's real sign-in page, on a neutral surface so each brand's colours stand alone */
.showcase { display: grid; gap: 20px; }
.sc-bar { display: grid; gap: 10px; justify-items: start; }
.sc-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tabs button { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.sc-tabs button:hover { border-color: var(--ink); }
.sc-tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.sc-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sc-tabs .swatches i { box-shadow: 0 0 0 1px rgba(10, 10, 10, .15); }
.sc-tabs button[aria-pressed="true"] .swatches i { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.p-meter { width: min(320px, 100%); height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.p-meter i { display: block; height: 100%; width: 0; background: var(--ink); }
.p-meter.run i { animation: portal-fill 6s linear forwards; }
@keyframes portal-fill { to { width: 100%; } }
.sc-stage { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(240px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.sc-shot { display: block; padding: 8px; border-radius: 22px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -40px rgba(10, 10, 10, .45); transition: transform .3s; }
.sc-shot:hover { transform: translateY(-3px); }
.sc-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hero-shot-screen { position: relative; display: block; aspect-ratio: 1440 / 900; border-radius: 15px; overflow: hidden; background: #fff; }
.hero-shot-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .6s ease; }
.hero-shot-screen img.on { opacity: 1; }
.sc-info { display: grid; gap: 12px; align-content: center; }
.sc-info h3 { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.03em; }
.sc-style { font: 500 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.sc-desc { color: var(--text-2); font-size: 16px; line-height: 1.6; max-width: 36ch; }
.sc-links { display: grid; gap: 10px; justify-items: start; margin-top: 6px; font-size: 15px; }
@media (max-width: 900px) {
  .sc-stage { grid-template-columns: minmax(0, 1fr); }
  .sc-tabs { width: 100%; }
  .sc-tabs button { flex: 1; justify-content: center; padding: 0 12px; }
}
@media (max-width: 480px) { .sc-tabs { flex-wrap: nowrap; } .sc-tabs .swatches { display: none; } .sc-tabs button { min-width: 0; padding: 0 8px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hero-shot-screen img, .sc-shot { transition: none; } }

/* ---------- Inner-page hero ---------- */
.page-hero { padding: calc(var(--nav-h) + clamp(56px, 8vw, 120px)) 0 clamp(56px, 7vw, 100px); background: var(--bg); }
.page-hero h1 { font-size: clamp(40px, 4.8vw, 72px); max-width: 18ch; }
.page-hero .lede { margin-top: 4px; }

/* ---------- Two-column section heads ---------- */
.row-head, .section-head, .split-head, .group-head, .page-hero .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 40px; row-gap: 22px; align-items: start;
}
:is(.row-head, .section-head, .split-head, .group-head, .page-hero .wrap) > * { grid-column: 2; }
:is(.row-head, .section-head, .split-head, .group-head, .page-hero .wrap) > .eyebrow,
:is(.split-head, .group-head) > div > .eyebrow { grid-column: 1; grid-row: 1; padding-top: .9em; }
:is(.split-head, .group-head) > div { display: contents; }
:is(.row-head, .section-head, .split-head, .group-head) { margin-bottom: clamp(44px, 5.5vw, 80px); }
.page-hero .wrap > .eyebrow { padding-top: 1.6em; }
.head-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.section-head.left { display: block; }
.section-head.left > * + * { margin-top: 20px; }

/* ---------- Sections and surfaces ---------- */
.section { position: relative; padding-block: var(--section); background: var(--bg); }
.section.white { background: #fff; }
.section.deep, .section.dark { background: var(--dark); }
.section:not(.deep, .dark, .white) + .section:not(.deep, .dark, .white),
:is(.section.deep, .section.dark) + :is(.section.deep, .section.dark) { padding-top: 0; }
/* A light section that meets a dark one gets rounded bottom corners laid over the dark section. */
:is(.section, .page-hero, .hero):not(.deep, .dark):has(+ :is(.deep, .dark, .band)),
main > section:last-child:not(.deep, .dark) { border-radius: 0 0 var(--r-xl) var(--r-xl); position: relative; z-index: 1; }
:is(.section, .page-hero, .hero):not(.deep, .dark) + :is(.deep, .dark) { margin-top: calc(-1 * var(--r-xl)); padding-top: calc(var(--section) + var(--r-xl)); }
:is(.section, .page-hero, .hero):not(.deep, .dark) + .band { margin-top: calc(-1 * var(--r-xl)); }
main:has(> section:last-child:not(.deep, .dark)) + .site-footer { margin-top: calc(-1 * var(--r-xl)); padding-top: calc(clamp(80px, 9vw, 140px) + var(--r-xl)); }
.section > .wrap + .wrap { margin-top: clamp(64px, 8vw, 120px); }

.grid-2, .grid-3, .grid-4 { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 40px; }

.card { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--surface); border-radius: var(--r-lg); }
.card p { color: var(--text-2); font-size: 15px; }
.card-plain { padding: 28px; }
.card-body { display: grid; gap: 8px; padding: 4px; }
.card-num, .stage-num { font: 500 12px var(--mono); color: var(--text-2); text-transform: uppercase; }
.stage-num { color: var(--accent-ink); }
:is(.dark, .deep) .card { background: var(--dark-2); border: 1px solid var(--dline); }
:is(.dark, .deep) .card p { color: var(--on-dark-2); }
:is(.dark, .deep) :is(.card-num) { color: var(--on-dark-2); }
:is(.dark, .deep) .stage-num { color: var(--accent-light); }
.section.white .card { background: var(--bg); }

/* Fact cards (big number top, note bottom) */
.fact { justify-content: space-between; min-height: 220px; }
.fact .num { font-size: clamp(36px, 3.4vw, 48px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.fact p { font-size: 14px; max-width: 30ch; }
.aside-note { display: grid; gap: 16px; align-content: start; font-size: 16px; font-weight: 500; letter-spacing: -.02em; line-height: 1.45; }
.aside-note .micro { font-weight: 400; letter-spacing: 0; }

/* "Replaces" tiles, laid out like a logo wall */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; }
.tiles li { display: grid; place-items: center; min-height: 112px; padding: 16px; background: #fff; border-radius: var(--r); font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-align: center; }

/* ---------- Screenshots ---------- */
.screen { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
:is(.dark, .deep) .screen { border-color: var(--dline); }
.shot-card { margin: 0; display: flex; flex-direction: column; padding: 6px; background: #fff; border-radius: var(--r-lg); }
.shot-card .screen { border-radius: 18px; }
.shot-card figcaption { display: grid; gap: 4px; padding: 18px 14px 14px; }
.shot-card figcaption b { font-weight: 500; font-size: 16px; letter-spacing: -.02em; }
.shot-card figcaption span { font-size: 14px; color: var(--text-2); }
:is(.dark, .deep) .shot-card { background: var(--dark-2); border: 1px solid var(--dline); }
:is(.dark, .deep) .shot-card figcaption span { color: var(--on-dark-2); }
figure.with-caption { margin: 0; display: grid; gap: 14px; }

/* ---------- Dark service cards ---------- */
.svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: 40px; align-items: start; }
.svc-intro { display: grid; gap: 24px; align-content: space-between; min-height: 100%; }
.svc-intro h2 { max-width: 14ch; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.svc { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 280px; padding: 26px; background: transparent; border: 1px solid var(--dline); border-radius: var(--r); }
.svc .ico { width: 32px; height: 32px; color: #fff; }
.svc h3 { font-size: 18px; }
.svc p { margin-top: 8px; color: var(--on-dark-2); font-size: 14.5px; }
.svc ul { list-style: none; margin-top: 14px; display: grid; gap: 6px; color: var(--on-dark-2); font-size: 14px; }
.svc ul li::before { content: '– '; color: var(--tone-dark); }
.svc .link-arrow { margin-top: 18px; font-size: 14px; text-decoration-color: var(--dline-2); }
a.svc { color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s; }
a.svc:hover { border-color: var(--dline-2); background: rgba(255, 255, 255, .03); }
.svc .go { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 500; }
a.svc:hover .go { text-decoration: underline; text-underline-offset: 4px; }
/* Titles start at the same height in every card of a row; the link sits at the bottom. */
.svc { justify-content: flex-start; }
.svc > div { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.svc > div > :is(.go, .link-arrow) { margin-top: auto; padding-top: 18px; }
.ico { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Big band with photo ---------- */
.band { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #1d0e05; padding: clamp(80px, 10vw, 150px) 0 0; }
.band .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 20, 20, .82) 0%, rgba(20, 20, 20, .45) 45%, rgba(20, 20, 20, .9) 100%); }
.band-word { font-size: clamp(64px, 12.5vw, 200px); font-weight: 500; letter-spacing: -.06em; line-height: .9; }
.band-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 32px; align-items: start; margin-top: clamp(120px, 16vw, 260px); padding: 32px 0 40px; border-top: 1px solid var(--dline-2); }
.band-row p { max-width: 44ch; color: rgba(255, 255, 255, .86); }

/* ---------- Belief split ---------- */
.belief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: stretch; }
.belief-text { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.belief-text h2 { margin-top: 24px; }
.belief-text .lede { margin-top: 22px; }
.belief-text .btn-row { margin-top: 30px; }
.belief-sign { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.belief-sign .logo-mark { height: 38px; }
.belief-sign small { display: block; color: var(--on-dark-2); font-size: 13px; }
.belief-img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; border-radius: var(--r-lg); }
.brand-split { align-items: center; gap: clamp(32px, 6vw, 96px); }

/* ---------- Capability grid ---------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; list-style: none; padding: 0 16px; }
.caps li { display: grid; gap: 10px; align-content: start; }
.caps .ico { width: 30px; height: 30px; margin-bottom: 18px; }
.caps h3 { font-size: 17px; }
.caps p { font-size: 14.5px; color: var(--on-dark-2); max-width: 32ch; }
.caps a { font-size: 14px; margin-top: 4px; justify-self: start; }
:is(.dark, .deep) .link-arrow { text-decoration-color: var(--dline-2); }

/* ---------- Process list ---------- */
.process { list-style: none; display: grid; }
.process li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 24px; align-items: center; padding: 22px 0; }
.process li + li { border-top: 1px solid var(--line); }
.process .tile { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); }
.process .tile .ico { width: 24px; height: 24px; }
.process b { font-weight: 500; font-size: 17px; letter-spacing: -.02em; align-self: end; }
.process span { color: var(--text-2); font-size: 15px; align-self: start; }

/* ---------- Pills, tags, ticks ---------- */
.pill { display: inline-block; padding: 5px 9px; border-radius: 7px; background: var(--surface-2); color: var(--ink); font: 500 11px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill.warn, .pill.alert { background: var(--accent-soft); color: var(--accent-ink); }
:is(.dark, .deep) .pill { background: var(--dark-3); color: #fff; }
:is(.dark, .deep) :is(.pill.warn, .pill.alert) { background: rgba(255, 73, 18, .18); color: var(--accent-light); }
.tag-soon { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font: 500 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
:is(.dark, .deep) .tag-soon { background: rgba(255, 73, 18, .18); color: var(--accent-light); }
.ticks { list-style: none; display: grid; gap: 11px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.45; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) var(--check) center / 12px no-repeat; }
.x-list { list-style: none; display: grid; gap: 11px; }
.x-list li { position: relative; padding-left: 28px; color: var(--text-2); font-size: 15px; }
.x-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-2); }
.x-list li::after { content: '×'; position: absolute; left: 5px; top: -1px; color: var(--text-2); font-size: 15px; }
.note-strip { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 18px 24px; border-radius: var(--r); background: #fff; color: var(--text-2); font-size: 14.5px; text-align: center; }
.note-strip b { color: var(--ink); font-weight: 500; }
:is(.dark, .deep) .note-strip { background: transparent; border: 1px solid var(--dline); color: var(--on-dark-2); }
:is(.dark, .deep) .note-strip b { color: #fff; }

/* ---------- Pricing ---------- */
.notice { display: flex; gap: 12px; align-items: flex-start; max-width: 860px; margin: 0 0 32px; padding: 16px 20px; border-radius: 14px; background: #fff; color: var(--text-2); font-size: 15px; }
.notice::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 8px; background: var(--accent); }
.notice b { color: var(--ink); font-weight: 600; }
:is(.dark, .deep) .notice { background: var(--dark-2); color: var(--on-dark-2); border: 1px solid var(--dline); }
:is(.dark, .deep) .notice b { color: #fff; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.plan { position: relative; display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 2.6vw, 34px); }
.plan + .plan { border-left: 1px solid var(--line); }
.plan.featured { background: radial-gradient(110% 60% at 50% 0%, rgba(255, 73, 18, .14), transparent 65%), #fff; }
.plan .plan-flag { position: absolute; top: clamp(24px, 2.6vw, 34px); right: clamp(24px, 2.6vw, 34px); }
.plan h3 { font-size: 20px; }
.plan .for { margin-top: -10px; color: var(--text-2); font-size: 14.5px; }
.price { display: flex; align-items: baseline; gap: 10px; }
.price .amt { font-size: clamp(40px, 3.6vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.price .per { color: var(--text-2); font-size: 13.5px; line-height: 1.3; }
.plan .min { margin-top: -12px; font: 500 12px var(--mono); color: var(--text-2); text-transform: uppercase; }
.plan .btn { order: 0; }
.plan .ticks { padding-top: 22px; border-top: 1px solid var(--line); margin-top: auto; }
:is(.dark, .deep) .plans { background: var(--dark-2); border-color: var(--dline); }
:is(.dark, .deep) .plan + .plan { border-color: var(--dline); }
:is(.dark, .deep) .plan.featured { background: radial-gradient(120% 70% at 50% 0%, rgba(255, 73, 18, .32), transparent 62%), #1e1512; }
:is(.dark, .deep) :is(.plan .for, .price .per, .plan .min) { color: var(--on-dark-2); }
:is(.dark, .deep) .plan .ticks { border-color: var(--dline); }
.included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 32px; }
.plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Each card spans the same seven rows, so prices, buttons and both dividers line up whatever the text length. */
.plans.four .plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 20px; align-content: start; }
.plans.four .plan :is(.outcomes, .ticks) { align-content: start; }
.plans.four .ticks { margin-top: 0; }
.plans.four .ticks li { font-size: 14px; }
.plan .outcomes { list-style: none; display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.plan .outcomes li { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; }
.plan .outcomes + .ticks { padding-top: 18px; }
:is(.dark, .deep) .plan .outcomes { border-color: var(--dline); }
.plans-bar .micro b { color: #fff; font-weight: 500; }
.amt-text { font-size: clamp(30px, 2.6vw, 38px) !important; }
.price:has(.amt-text) { min-height: clamp(40px, 3.6vw, 52px); align-items: flex-end; }
.plan-cta { display: grid; gap: 10px; justify-items: center; }
.plan-cta .trial { font-size: 13.5px; color: var(--on-dark-2); text-decoration: underline; text-underline-offset: 3px; }
.plan-cta .trial:hover { color: #fff; }
.founding { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px; margin-bottom: 28px; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-lg); border: 1px solid rgba(255, 73, 18, .35); background: radial-gradient(90% 140% at 0% 0%, rgba(255, 73, 18, .22), transparent 60%), var(--dark-2); }
.founding > div { display: grid; gap: 14px; max-width: 640px; }
.founding h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.03em; }
.founding .founder-link { justify-self: start; color: #fff; font-size: 14.5px; text-decoration-color: var(--dline-2); }

/* For agencies: the founder's note, a quiet single column */
.section.founder { padding-top: 0; }
.founder-note { max-width: 660px; margin-inline: auto; display: grid; gap: 20px; }
.founder-note h2 { font-size: clamp(30px, 3.4vw, 46px); letter-spacing: -.035em; margin-bottom: 6px; }
.founder-note p { font-size: 18px; line-height: 1.7; color: var(--text-2); }
.founder-note p.founder-sign { color: var(--ink); font-weight: 500; font-size: 16px; margin-top: 8px; }
.founding p { color: var(--on-dark-2); }
.plans-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; }
.billing { display: none; padding: 4px; border-radius: 12px; background: var(--dark-2); border: 1px solid var(--dline); }
.js .billing { display: inline-flex; }
.bill-opt { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--on-dark-2); font: 500 14px var(--sans); cursor: pointer; }
.bill-opt span { padding: 3px 7px; border-radius: 6px; background: rgba(255, 73, 18, .18); color: var(--accent-light); font: 500 11px var(--mono); text-transform: uppercase; }
.bill-opt[aria-pressed="true"] { background: #fff; color: var(--ink); }
.plan-notes { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 32px; margin-top: 28px; color: var(--on-dark-2); font-size: 14px; }
.plan-notes b { color: #fff; font-weight: 500; }
.sole-trader { margin-top: clamp(56px, 6vw, 88px); padding-top: 24px; border-top: 1px solid var(--dline); color: var(--on-dark-2); font-size: 14.5px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.faq-wrap > .section-head { display: block; margin: 0; position: sticky; top: 110px; }
.faq-wrap > .section-head > * + * { margin-top: 20px; }
.faq-wrap > .section-head .eyebrow { padding: 0; }
.faq { display: grid; gap: 10px; }
.faq details { background: #fff; border-radius: 16px; padding: 0 22px; }
.section.white .faq details { background: var(--bg); }
:is(.dark, .deep) .faq details { background: var(--dark-2); border: 1px solid var(--dline); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 21px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 16px; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 300 24px/1 var(--sans); color: var(--text-2); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { display: grid; gap: 12px; padding: 0 30px 22px 0; color: var(--text-2); font-size: 15px; }
:is(.dark, .deep) .faq .answer { color: var(--on-dark-2); }
.faq .answer a { color: inherit; font-weight: 500; }

/* ---------- Closing CTA (white panel before the footer) ---------- */
.cta-band { padding-block: var(--section); background: #fff; }
.cta-band .head-actions { margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--dark); color: #fff; padding-top: clamp(80px, 9vw, 140px); }
.foot-statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 22px 40px; align-items: start; }
.foot-statement .eyebrow { padding-top: .9em; }
.foot-statement h2 { max-width: 26ch; }
.foot-statement .btn-row { grid-column: 2; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: clamp(64px, 8vw, 120px); }
.foot-h { margin-bottom: 20px; font: 500 12px var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--on-dark-2); }
.foot-col ul { list-style: none; display: grid; gap: 12px; }
.foot-col a { font-size: 14.5px; font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.foot-col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-col p { color: var(--on-dark-2); font-size: 14px; }
.foot-word { margin: clamp(56px, 7vw, 110px) 0 clamp(16px, 2vw, 28px); color: #262626; user-select: none; }
.foot-word .logo-full { width: 100%; height: auto; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 26px 0 30px; font-size: 13px; color: var(--on-dark-2); }
.foot-base a { color: inherit; }

/* ---------- Features page ---------- */
.jump { position: sticky; top: calc(var(--nav-h) + 10px); z-index: 20; margin-top: -24px; }
.jump ul { list-style: none; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; width: fit-content; margin-inline: auto; padding: 5px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 14px; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35); }
.jump a { display: block; padding: 9px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--text-2); }
.jump a:hover { color: var(--ink); }
.jump a.is-active { background: var(--ink); color: #fff; }
.group { padding-block: clamp(80px, 9vw, 130px); scroll-margin-top: 90px; border-bottom: 1px solid var(--line); }
.group:last-of-type { border-bottom: 0; }
.feat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin-top: 12px; }
.feat { display: grid; align-content: start; gap: 8px; padding: 24px; background: #fff; border-radius: var(--r); }
.feat h3 { font-size: 17px; }
.feat p { color: var(--text-2); font-size: 14.5px; }
:is(.dark, .deep) .feat { background: var(--dark-2); border: 1px solid var(--dline); }
:is(.dark, .deep) .feat p { color: var(--on-dark-2); }

/* Features page: the few things worth leading each group with, before the screenshots and the full list. */
.hl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.hl-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hl { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px; background: var(--surface); border: 1.5px solid rgba(255, 73, 18, .45); border-radius: var(--r); box-shadow: 0 0 0 4px rgba(255, 73, 18, .06); }
.hl h3 { font-size: 20px; letter-spacing: -.025em; line-height: 1.25; }
.hl p { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.hl-k { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; }
.tag-new { display: inline-block; vertical-align: middle; padding: 3px 7px; border-radius: 6px; background: var(--ink); color: #fff; font: 500 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* Features page: video lessons spotlight */
.spot-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.spot-copy { display: grid; gap: 24px; align-content: start; }
.spot-copy h2 { font-size: clamp(32px, 3.6vw, 52px); }
.spot-visual { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--dline); }
.spot-visual img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.spot-chip { position: absolute; left: 18px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; background: rgba(20, 20, 20, .78); backdrop-filter: blur(10px); color: #fff; font-size: 13.5px; font-weight: 500; }
.spot-chip.top { top: 18px; }
.spot-chip.bottom { bottom: 18px; background: #fff; color: var(--ink); }
.spot-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .2); }
.spot-points { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.spot-points li { display: grid; align-content: start; gap: 8px; padding: 24px; border-radius: var(--r); background: var(--dark-2); border: 1px solid var(--dline); }
.spot-points h3 { font-size: 17px; color: #fff; }
.spot-points p { color: var(--on-dark-2); font-size: 14.5px; }
.spot-note { margin-top: 22px; color: var(--on-dark-2); font-size: 14.5px; }
.spot-shot { margin: 0; }
.spot-shot .screen { border-radius: var(--r-lg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }

/* Features page: what one logged lesson turns into, as a left-to-right chain */
.flow { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 64px); counter-reset: none; }
.flow li { position: relative; display: grid; align-content: start; gap: 8px; padding: 24px 22px; border-radius: var(--r); background: var(--dark-2); border: 1px solid var(--dline); }
.flow li:not(:last-child)::after { content: ''; position: absolute; top: 34px; right: -12px; width: 12px; height: 1.5px; background: var(--accent); }
.flow-n { font: 500 12px/1 var(--mono); color: var(--accent-light); margin-bottom: 10px; }
.flow h3 { font-size: 17px; color: #fff; }
.flow p { color: var(--on-dark-2); font-size: 14.5px; }

/* Features page: the six reasons to switch. Copy on the left, screenshot on the right, the same size every time. */
.usps .wrap { display: grid; gap: clamp(64px, 8vw, 120px); }
.usp { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.usp-head { display: grid; gap: 18px; align-content: center; }
.usp.flip { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
.usp.flip .usp-head { order: 2; }
.usp-title { display: grid; gap: 16px; }
.usp-copy { display: grid; gap: 16px; justify-items: start; }
.usp h2, .usp-card h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; }
.usp p, .usp-card p { color: var(--text-2); font-size: 17px; line-height: 1.6; max-width: 52ch; }
.usp-n { font: 500 13px/1 var(--mono); color: var(--accent-ink); }
.usp .screen { box-shadow: 0 40px 80px -48px rgba(10, 10, 10, .4); }
.usp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.usp-card { gap: 18px; padding: clamp(28px, 3vw, 44px); align-items: flex-start; }
.usp-card h2 { font-size: clamp(26px, 2.6vw, 36px); }

/* Features page: the full list. One row per group: a label on the left, ticked features in two columns on the right. */
.ev { border-top: 1px solid var(--line-2); }
.ev-row { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 2.2fr); gap: clamp(24px, 4vw, 64px); padding-block: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.ev-label { display: grid; gap: 10px; align-content: start; justify-items: start; }
.ev-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 6px; }
.ev-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ev-label h3 { font-size: 22px; letter-spacing: -.03em; }
.ev-label p { color: var(--text-2); font-size: 15px; }
.ev-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 3vw, 48px); align-content: start; }
.ev-list li { position: relative; display: grid; gap: 3px; padding-left: 30px; align-content: start; }
.ev-list li::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent) var(--check) center / 12px no-repeat; }
.ev-list b { font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; }
.ev-list span { color: var(--text-2); font-size: 14.5px; line-height: 1.5; }

/* ---------- Audience pages ---------- */
.week { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.week li { display: grid; align-content: start; gap: 10px; padding: 22px; background: #fff; border-radius: var(--r); }
.week .day { font: 500 12px var(--mono); text-transform: uppercase; color: var(--accent-ink); }
.week b { font-weight: 500; font-size: 17px; letter-spacing: -.02em; }
.week p { color: var(--text-2); font-size: 14.5px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare .card { padding: 32px; gap: 18px; }
.compare .card .pill { align-self: flex-start; }
.compare .before h3 { color: var(--text-2); }
.vg { min-height: 172px; padding: 16px; border-radius: 16px; background: var(--bg); font: 400 12.5px/1.4 var(--mono); }
:is(.dark, .deep) .vg { background: #111; border: 1px solid var(--dline); }
.vg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
:is(.dark, .deep) .vg-head { border-color: var(--dline); color: var(--on-dark-2); }
.vg-rows { list-style: none; }
.vg-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--line); }
:is(.dark, .deep) .vg-rows li { border-color: var(--dline); }
.vg-rows li:last-child { border-bottom: 0; }
.vg-rows .m { color: var(--text-2); }
:is(.dark, .deep) .vg-rows .m { color: var(--on-dark-2); }
.feed { list-style: none; display: grid; gap: 8px; padding-top: 6px; }
.feed li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #fff; font: 400 12.5px/1.4 var(--mono); }
:is(.dark, .deep) .feed li { background: var(--dark-2); }
.ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; font: 600 11px/1 var(--mono); background: var(--accent-soft); color: var(--accent-ink); }
:is(.dark, .deep) .ic { background: rgba(255, 73, 18, .2); color: var(--accent-light); }

/* ---------- Demo page ---------- */
.brand-card { padding: 6px 6px 18px; gap: 16px; }
.brand-card .screen { border-radius: 18px; }
.brand-card .shot-link { display: block; border-radius: 18px; transition: transform .25s; }
.brand-card .shot-link:hover { transform: translateY(-2px); }
.brand-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 12px; }
.brand-meta h3 { font-size: 17px; }
.brand-meta p { color: var(--text-2); font-size: 14px; }
:is(.dark, .deep) .brand-meta p { color: var(--on-dark-2); }
.brand-card .btn { margin: auto 12px 0; }
.brand-card .site-link { align-self: center; margin-top: -4px; font-size: 13.5px; font-weight: 500; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.brand-card .site-link:hover { color: var(--ink); text-decoration-color: currentColor; }
:is(.dark, .deep) .brand-card .site-link { color: var(--on-dark-2); text-decoration-color: var(--dline-2); }
:is(.dark, .deep) .brand-card .site-link:hover { color: #fff; }
.swatches { display: flex; gap: 5px; }
.swatches i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); }
.roles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.role { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: var(--r); background: #fff; }
.role .pill { justify-self: start; }
.role .who { font: 400 12.5px/1.5 var(--mono); color: var(--text-2); }
.role p { font-size: 14.5px; color: var(--text-2); }
.role-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.role-links a { padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.role-links a:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
:is(.dark, .deep) .role { background: var(--dark-2); border: 1px solid var(--dline); }
:is(.dark, .deep) :is(.role p, .role .who) { color: var(--on-dark-2); }
:is(.dark, .deep) .role-links a { border-color: var(--dline-2); }
:is(.dark, .deep) .role-links a:hover { background: #fff; color: var(--ink); }
.tries { list-style: none; counter-reset: t; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tries li { counter-increment: t; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 22px; border-radius: var(--r); background: #fff; }
.tries li::before { content: counter(t, decimal-leading-zero); grid-row: span 2; font: 500 12px/1.9 var(--mono); color: var(--accent-ink); }
.tries b { font-weight: 500; letter-spacing: -.015em; }
.tries span { color: var(--text-2); font-size: 14.5px; }
:is(.dark, .deep) .tries li { background: var(--dark-2); border: 1px solid var(--dline); }
:is(.dark, .deep) .tries li::before { color: var(--accent-light); }
:is(.dark, .deep) .tries span { color: var(--on-dark-2); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.contact-side { display: grid; gap: 28px; }
.steps { list-style: none; display: grid; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; padding: 18px 0; }
.steps li + li { border-top: 1px solid var(--line); }
.steps .stage-num { grid-row: span 2; line-height: 1.9; }
.steps b { font-weight: 500; }
.steps span:not(.stage-num) { color: var(--text-2); font-size: 15px; }
.form { display: grid; gap: 18px; padding: clamp(22px, 3.2vw, 36px); background: #fff; border-radius: var(--r-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; }
.field .opt { color: var(--text-2); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid transparent; background: var(--bg); color: var(--ink); font: 400 16px/1.4 var(--sans); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-repeat: no-repeat; background-size: 14px; background-position: calc(100% - 14px) 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6L8 10.5 12.5 6' fill='none' stroke='%235E5E5E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(10, 10, 10, .08); }
.field input::placeholder, .field textarea::placeholder { color: #8f8f8f; }
.field [aria-invalid="true"] { border-color: var(--accent); }
.field-error { color: var(--accent-ink); font-size: 13.5px; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; }
.form-foot .micro { max-width: 36ch; }
.form-status { padding: 14px 16px; border-radius: 12px; background: var(--bg); font-size: 15px; }
.form-status.is-error { background: var(--accent-soft); color: var(--accent-ink); }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form button[disabled] { opacity: .6; cursor: progress; }

/* ---------- Legal pages ---------- */
.prose { max-width: 760px; margin-inline: auto; padding-bottom: var(--section); }
.prose h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -.03em; margin: 48px 0 14px; }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose p, .prose li { color: #303030; font-size: 16.5px; line-height: 1.7; }
.prose p + p { margin-top: 14px; }
.prose ul { padding-left: 22px; margin: 12px 0; display: grid; gap: 6px; }
.prose a { color: var(--ink); font-weight: 500; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; }
.page-light main { background: var(--bg); }
.page-light main > .prose { padding-top: 8px; }

/* ---------- Motion ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
  .hero-inner > *, .page-hero .wrap > * { animation: fadeUp .9s ease both; }
  .hero-inner > :nth-child(2) { animation-delay: .25s; }
  .hero-frame .bg { animation: heroZoom 14s ease-out both; }
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid-4, .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .week li:last-child { grid-column: span 2; }
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-intro h2 { max-width: 20ch; }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .plans.four, .plan-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans.four .plan:nth-child(3) { border-left: 0; }
  .plans.four .plan:nth-child(n+3) { border-top: 1px solid var(--dline); }
  .band-row .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 900px) {
  .row-head, .section-head, .split-head, .group-head, .page-hero .wrap, .foot-statement { grid-template-columns: minmax(0, 1fr); }
  :is(.row-head, .section-head, .split-head, .group-head, .page-hero .wrap, .foot-statement) > *,
  :is(.split-head, .group-head) > div > * { grid-column: 1 !important; grid-row: auto !important; }
  :is(.row-head, .section-head, .split-head, .group-head, .page-hero .wrap, .foot-statement) .eyebrow { padding-top: 0 !important; }
  .split, .belief, .faq-wrap, .contact-grid, .compare { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .plans, .tiles { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-list, .spot-points, .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev-row { grid-template-columns: minmax(0, 1fr); }
  .usp, .usp.flip, .usp-pair { grid-template-columns: minmax(0, 1fr); }
  .usp.flip .usp-head { order: 0; }
  .flow li::after { display: none; }
  .hl-grid { grid-template-columns: minmax(0, 1fr); }
  .spot-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-2, .tries { grid-template-columns: minmax(0, 1fr); }
  .included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  :is(.dark, .deep) .plan + .plan { border-top-color: var(--dline); }
  .faq-wrap > .section-head { position: static; }
  .hero-inner { flex-direction: column; align-items: flex-start; }
  .belief-img { min-height: 320px; }
  .band-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .band-row .btn { grid-column: 1; }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .ev-list { grid-template-columns: minmax(0, 1fr); }
  .grid-4, .roles, .feat-list, .spot-points, .flow, .hl-grid.two, .included, .week, .svc-grid, .caps, .plans.four, .plan-notes { grid-template-columns: minmax(0, 1fr); }
  .week li:last-child { grid-column: auto; }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .hero-frame { min-height: 640px; border-radius: 24px; }
  .hero-frame .bg { object-position: 72% 50%; }
  .hero-frame::before { background: linear-gradient(0deg, rgba(12, 6, 4, .9) 0%, rgba(12, 6, 4, .66) 55%, rgba(12, 6, 4, .3) 100%); }
  .fact { min-height: 150px; }
  .hero-card { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; }
  .svc { min-height: 0; }
  .jump { top: calc(var(--nav-h) + 6px); }
  .jump ul { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; justify-content: flex-start; scrollbar-width: none; }
  .jump a { white-space: nowrap; }
  .faq .answer { padding-right: 0; }
  .foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tiles li { min-height: 84px; font-size: 15px; }
  :root { --nav-h: 68px; --r-xl: 24px; }
}