/* hliss.com: ink sections by default, paper for pricing and FAQ. One accent: Signal Green,
   used only for the italic headline word, counters and the primary button. */
:root {
  --ink: #0B0B0C;
  --ink-2: #121214;
  --ink-3: #1A1A1D;
  --paper: #F4F1EA;
  --paper-card: #FAF8F3;
  --white: #FFFFFF;
  --muted: #9A978F;
  --muted-paper: #67635A;
  --green: #B6FF3B;
  --green-hover: #C6FF66;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.28);
  --line-paper: #E3DFD4;
  --display: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-btn: 14px;
  --r-card: 16px;
  --wrap: 1200px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--ink); z-index: 60; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.paper :focus-visible { outline-color: var(--ink); }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--green); color: var(--ink); padding: 10px 14px; border-radius: 10px; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.band { padding-block: clamp(72px, 9vw, 128px); }
.band + .band:not(.paper):not(.flush) { border-top: 1px solid var(--line); }
.paper { background: var(--paper); color: var(--ink); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 880px; }

/* ---------- type ---------- */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  font-optical-sizing: auto;
  letter-spacing: -0.032em;
  line-height: 0.96;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(50px, 8.6vw, 124px); }
h2 { font-size: clamp(38px, 5.6vw, 80px); }
h3 { font-size: clamp(22px, 2.1vw, 28px); letter-spacing: -0.025em; line-height: 1.08; }
em.a { font-style: italic; color: var(--green); padding-right: 0.06em; }
.paper em.a { color: var(--ink); background: var(--green); padding: 0 0.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.55; color: rgba(255, 255, 255, 0.84); max-width: 50ch; text-wrap: pretty; }
.paper .lede { color: #2B2A27; }
.muted { color: var(--muted); }
.paper .muted { color: var(--muted-paper); }
.small { font-size: 15px; line-height: 1.5; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.paper .eyebrow { color: var(--muted-paper); }
.num { font-family: var(--display); font-weight: 800; letter-spacing: -0.045em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 18px; }
.prose h2 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1.15; margin-top: 20px; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  border-radius: var(--r-btn); border: 1px solid transparent;
  font: 600 16px/1 var(--body); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary { background: var(--green); color: var(--ink); }
.btn-primary:hover { background: var(--green-hover); }
.btn-secondary { background: transparent; color: var(--white); border-color: var(--white); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }
.paper .btn-secondary { color: var(--ink); border-color: var(--ink); }
.paper .btn-secondary:hover { background: rgba(11, 11, 12, 0.06); }
.btn-sm { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.btn-block { width: 100%; }
.arrow { display: inline-block; transition: transform 0.25s ease; }
.textlink { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(11, 11, 12, 0.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo { display: block; flex: none; padding: 8px 0; }
.logo img { width: 104px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links > a:not(.btn), .dd > button { color: rgba(255, 255, 255, 0.84); text-decoration: none; font: 500 15px/1 var(--body); padding: 12px 12px; border-radius: 10px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nav-links > a:not(.btn):hover, .dd > button:hover, .nav-links > a[aria-current="page"]:not(.btn) { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.nav-links .btn { margin-left: 10px; }
.dd { position: relative; }
.dd > button svg { width: 12px; height: 12px; transition: transform 0.2s; }
.dd > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-menu { position: absolute; top: calc(100% + 10px); left: -12px; width: 340px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px; display: grid; gap: 2px; }
.dd-menu a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.dd-menu a:hover { background: rgba(255, 255, 255, 0.06); }
.dd-menu strong { font-weight: 600; font-size: 15px; }
.dd-menu span { font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--line-strong); color: var(--white); border-radius: 12px; height: 44px; padding: 0 14px; font: 600 15px var(--body); cursor: pointer; }
.mobile-panel { border-top: 1px solid var(--line); padding-block: 12px 24px; }
.mobile-panel nav { display: grid; gap: 2px; }
.mobile-panel a { display: block; padding: 13px 4px; text-decoration: none; font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-panel .label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 18px 4px 4px; }
.mobile-panel .btn { margin-top: 18px; }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(84px, 11vw, 168px) clamp(72px, 9vw, 128px); border-bottom: 1px solid var(--line); }
.hero-grid { position: absolute; z-index: -3; top: -30%; bottom: -30%; right: -6%; width: 72%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; transform: translate3d(0, var(--hp, 0px), 0) rotate(-6deg); align-items: start; }
.hero.paused .col, .marquee.paused .marquee-track { animation-play-state: paused; }
.hero-grid .col { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; will-change: transform; animation: feed 64s linear infinite; }
.hero-grid .col:nth-child(even) { animation-name: feed-down; animation-duration: 78s; }
.hero-grid .col:nth-child(3) { animation-duration: 56s; }
@keyframes feed { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes feed-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, var(--ink) 0%, var(--ink) 34%, rgba(11, 11, 12, 0.74) 56%, rgba(11, 11, 12, 0.42) 100%), linear-gradient(0deg, var(--ink) 0%, rgba(11, 11, 12, 0) 30%); }
.hero-content { display: flex; flex-direction: column; gap: 28px; max-width: 900px; }
.hero h1 { max-width: 11ch; }
@media (max-width: 760px) {
  .hero-grid { width: 190%; right: -95%; opacity: 0.7; }
  .hero::after { background: linear-gradient(180deg, rgba(11, 11, 12, 0.55) 0%, rgba(11, 11, 12, 0.86) 45%, var(--ink) 100%); }
}

/* Simple page hero (no grid) */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(72px, 10vw, 144px) clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.page-hero .inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
.page-hero .copy { display: flex; flex-direction: column; gap: 26px; }
.page-hero.solo .inner { grid-template-columns: minmax(0, 1fr); }
.page-hero.solo h1 { max-width: 14ch; }
.hero-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-self: center; }
.hero-tiles .tile { animation: bob 6s ease-in-out infinite alternate; }
.hero-tiles .tile:nth-child(2) { margin-top: -32px; margin-bottom: 32px; animation-delay: -2s; }
.hero-tiles .tile:nth-child(3) { animation-delay: -4s; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-16px); } }
@media (max-width: 860px) {
  .page-hero .inner { grid-template-columns: minmax(0, 1fr); }
  .hero-tiles { max-width: 440px; }
}

/* ---------- ad tiles (placeholder until the real 9:16 videos arrive) ---------- */
.tile { position: relative; aspect-ratio: 9 / 16; max-width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(162deg, #222226 0%, #141416 48%, #0E0E10 100%); }
.tile:nth-child(3n + 1) { background: linear-gradient(200deg, #26262A 0%, #151517 55%, #0D0D0F 100%); }
.tile:nth-child(4n + 2) { background: linear-gradient(150deg, #1C1C1F 0%, #29292D 42%, #101012 100%); }
.tile:nth-child(5n + 3) { background: radial-gradient(120% 70% at 30% 20%, #2C2C30 0%, #161618 60%, #0E0E10 100%); }
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile .fmt { position: absolute; left: 10px; top: 10px; font: 600 10.5px/1 var(--body); letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.82); }
.tile .play { position: absolute; left: 50%; top: 44%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.28); }
.tile .play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 0.38em 0 0.38em 0.62em; border-color: transparent transparent transparent rgba(255, 255, 255, 0.4); font-size: clamp(8px, 1vw, 14px); }
.tile .cap { position: absolute; left: 12px; right: 12px; bottom: 22px; display: grid; gap: 6px; }
.tile .cap i { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); }
.tile .cap i:nth-child(2) { width: 72%; }
.tile .cap i:nth-child(3) { width: 48%; background: rgba(255, 255, 255, 0.12); }
.tile .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.1); }
.tile .bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 40%); background: rgba(255, 255, 255, 0.55); }
.tile.has-video .fmt, .tile.has-video .play, .tile.has-video .cap, .tile.has-video .bar { display: none; }

/* ---------- trust bar ---------- */
.trust { border-bottom: 1px solid var(--line); }
.trust ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust li { display: flex; gap: 14px; align-items: flex-start; padding: 26px 24px 26px 0; font-size: 16px; line-height: 1.45; color: rgba(255, 255, 255, 0.88); }
.trust li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.trust svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
@media (max-width: 820px) {
  .trust ul { grid-template-columns: minmax(0, 1fr); }
  .trust li, .trust li + li { padding: 18px 0; border-left: 0; }
  .trust li + li { border-top: 1px solid var(--line); }
}

/* ---------- stats (oversized numerals) ---------- */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.stat { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.stat .num { font-size: clamp(64px, 9vw, 136px); color: var(--green); }
.stat .label { color: var(--muted); font-size: 16px; }
@media (max-width: 760px) { .stats { grid-template-columns: minmax(0, 1fr); } }

/* ---------- cards ---------- */
.card { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(22px, 2.4vw, 32px); min-width: 0; }
.paper .card { background: var(--paper-card); border-color: var(--line-paper); }
a.card { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; transition: transform 0.25s ease, border-color 0.25s ease; }
a.card:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.paper a.card:hover { border-color: #CFC9BA; }
a.card:hover .arrow { transform: translateX(4px); }
.card .more { margin-top: auto; padding-top: 10px; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }

/* Products: four pillars */
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pillar { min-height: 300px; }
.pillar .idx { font: 600 13px/1 var(--body); letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.pillar h3 { font-size: clamp(30px, 3.4vw, 46px); }
.pillar p { color: rgba(255, 255, 255, 0.8); max-width: 44ch; }
.pillar .price { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; }
.paper .pillar p { color: #34322E; }
.paper .pillar .price { border-top-color: var(--line-paper); }
@media (max-width: 760px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillar { min-height: 0; } }

/* Who we work with: seven tiles */
.verticals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.verticals .card:first-child { grid-column: span 2; }
.verticals .card h3 { font-size: 24px; }
.verticals .card p { color: rgba(255, 255, 255, 0.74); font-size: 16px; line-height: 1.5; }
@media (max-width: 1020px) { .verticals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .verticals .card:first-child { grid-column: span 2; } }
@media (max-width: 600px) { .verticals { grid-template-columns: minmax(0, 1fr); } .verticals .card:first-child { grid-column: auto; } }

/* Comparison (two columns) */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.compare .card { display: flex; flex-direction: column; gap: 22px; }
.compare h3 { font-size: 22px; }
.compare ul { list-style: none; display: grid; gap: 0; }
.compare li { display: flex; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; }
.compare li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.compare .them { background: transparent; }
.compare .them li { color: var(--muted); }
.compare .us { border-color: var(--line-strong); background: var(--ink-3); }
@media (max-width: 760px) { .compare { grid-template-columns: minmax(0, 1fr); } }

/* Numbered cards (standards) */
.numbered { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.numbered .card { display: flex; flex-direction: column; gap: 26px; min-height: 210px; }
.numbered .n { font: 800 15px/1 var(--display); letter-spacing: 0.02em; color: var(--muted); }
.numbered p { font-size: 17px; line-height: 1.5; }
@media (max-width: 960px) { .numbered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .numbered { grid-template-columns: minmax(0, 1fr); } .numbered .card { min-height: 0; } }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps .step { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.paper .steps .step { border-top-color: #CFC9BA; }
.steps .n { font: 800 clamp(44px, 5vw, 64px)/0.9 var(--display); letter-spacing: -0.04em; color: var(--muted); }
.paper .steps .n { color: #B5B0A3; }
.steps h3 { font-size: 26px; }
.steps p { color: rgba(255, 255, 255, 0.8); font-size: 17px; }
.paper .steps p { color: #34322E; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Founding 5 block */
.founding { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 5vw, 64px); border-color: var(--line-strong); }
.founding .copy { display: flex; flex-direction: column; gap: 24px; }
.founding .meter-wrap { display: flex; flex-direction: column; gap: 16px; }
.founding .count { font-size: clamp(88px, 12vw, 168px); color: var(--green); }
.founding .count small { font-size: 0.42em; color: var(--white); letter-spacing: -0.02em; }
.seats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.seats i { height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); }
.seats i.on { background: var(--white); }
@media (max-width: 860px) { .founding { grid-template-columns: minmax(0, 1fr); } }

/* Case study cards */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cases .big { font-size: clamp(56px, 6vw, 88px); color: var(--green); }
@media (max-width: 860px) { .cases { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq { border-top: 1px solid var(--line-paper); }
.band:not(.paper) .faq { border-top-color: var(--line); }
.faq details { border-bottom: 1px solid var(--line-paper); }
.band:not(.paper) .faq details { border-bottom-color: var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 24px 0; font: 600 clamp(18px, 1.6vw, 21px)/1.35 var(--body); letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; opacity: 0.6; transition: transform 0.25s ease; }
.faq details[open] summary .pm { transform: rotate(45deg); }
.faq .ans { padding: 0 48px 26px 0; color: #34322E; font-size: 17px; }
.band:not(.paper) .faq .ans { color: rgba(255, 255, 255, 0.78); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: minmax(0, 1fr); } .faq .ans { padding-right: 0; } }

/* Closing CTA */
.closing { text-align: left; }
.closing .inner { display: flex; flex-direction: column; gap: 32px; }
.closing h2 { font-size: clamp(44px, 7.4vw, 112px); max-width: 13ch; }
.email-line { font-size: 15px; color: var(--muted); }
.email-line span { color: var(--white); user-select: all; }

/* ---------- pricing ---------- */
.price-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.price-head h2 { font-size: clamp(32px, 4vw, 52px); }
.tablewrap { overflow-x: auto; border: 1px solid var(--line-paper); border-radius: var(--r-card); background: var(--paper-card); }
table.plans { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 16px; table-layout: fixed; }
table.plans col.c-label { width: 22%; }
table.plans th, table.plans td { padding: 18px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-paper); }
table.plans tr:last-child td { border-bottom: 0; }
table.plans thead th { vertical-align: bottom; }
table.plans tbody th { font-weight: 500; color: var(--muted-paper); }
table.plans .plan-name { font: 800 30px/1 var(--display); letter-spacing: -0.03em; display: flex; flex-direction: column; gap: 10px; }
table.plans .pick { display: inline-block; align-self: flex-start; font: 600 11.5px/1 var(--body); letter-spacing: 0.1em; text-transform: uppercase; background: var(--ink); color: var(--white); padding: 7px 10px; border-radius: 999px; }
table.plans .col-growth { background: #EFEBE1; }
table.plans .price-cell { font: 800 clamp(30px, 3vw, 40px)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
table.plans td .per { display: block; margin-top: 8px; font: 400 14px var(--body); color: var(--muted-paper); letter-spacing: 0; }
table.plans td.num-cell { font-variant-numeric: tabular-nums; font-weight: 600; }
.plan-cards { display: none; }
@media (max-width: 860px) {
  .tablewrap { display: none; }
  .plan-cards { display: grid; gap: 16px; }
}
.plan-card { display: flex; flex-direction: column; gap: 18px; }
.plan-card.growth { border-color: var(--ink); }
.plan-card dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.plan-card dt, .plan-card dd { margin: 0; padding: 11px 0; border-top: 1px solid var(--line-paper); font-size: 15.5px; }
.plan-card dt { color: var(--muted-paper); padding-right: 12px; }
.plan-card dd { text-align: right; font-weight: 600; }
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.offer-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer { display: flex; flex-direction: column; gap: 14px; }
.offer .tier { font: 600 13px/1 var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-paper); }
.band:not(.paper) .offer .tier { color: var(--muted); }
.offer .big { font: 800 clamp(40px, 4.4vw, 60px)/0.95 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.offer .price { font: 800 28px/1 var(--display); letter-spacing: -0.03em; }
.offer .fine { font-size: 15px; line-height: 1.5; color: var(--muted-paper); border-top: 1px solid var(--line-paper); padding-top: 14px; margin-top: auto; }
.band:not(.paper) .offer .fine { color: var(--muted); border-top-color: var(--line); }
.note { margin-top: 18px; font-size: 15.5px; color: var(--muted-paper); }
.band:not(.paper) .note { color: var(--muted); }
.wide-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.wide-card .price { font: 800 clamp(36px, 4vw, 56px)/1 var(--display); letter-spacing: -0.04em; white-space: nowrap; }
.need { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: 28px; padding-top: 32px; border-top: 1px solid #CFC9BA; }
@media (max-width: 860px) {
  .offer-grid, .offer-grid.two { grid-template-columns: minmax(0, 1fr); }
  .wide-card, .need { grid-template-columns: minmax(0, 1fr); }
}

/* Product page: what you get */
.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.counts .card { display: flex; flex-direction: column; gap: 12px; }
.counts dl { margin: 0; display: grid; gap: 0; }
.counts .row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 16px; }
.counts .row span:first-child { color: var(--muted); }
.counts .row span:last-child { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.guarantee { display: grid; grid-template-columns: minmax(0, 0.45fr) minmax(0, 1.55fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.guarantee .statement { font: 800 clamp(30px, 3.6vw, 52px)/1.04 var(--display); letter-spacing: -0.035em; text-wrap: balance; }
@media (max-width: 860px) { .guarantee { grid-template-columns: minmax(0, 1fr); } }

/* Vertical pages */
.lines { list-style: none; display: grid; gap: 0; max-width: 760px; }
.lines li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 18px 0; border-top: 1px solid var(--line); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; }
.lines li:last-child { border-bottom: 1px solid var(--line); }
.lines .n { font: 800 15px/1.6 var(--display); color: var(--muted); }
.callout { border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; max-width: 900px; }
.callout svg { width: 28px; height: 28px; }
.callout h3 { font-size: 22px; margin-bottom: 8px; }
.under-line { margin-top: 22px; color: var(--muted); max-width: 70ch; font-size: 16px; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > label, .field > .lab { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.9); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="number"], .field select {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: 12px;
  background: var(--ink); color: var(--white); border: 1px solid var(--line-strong);
  font: 400 16px var(--body);
}
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 23px, calc(100% - 16px) 23px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--white); }
.field input::placeholder { color: #6E6B64; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 15px; cursor: pointer; }
.chips input:checked + span { background: var(--white); color: var(--ink); border-color: var(--white); }
.chips input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.field .err { font-size: 13.5px; color: #FF8A7A; }
.form-card { max-width: 820px; }
.form-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.form-note { font-size: 13.5px; color: var(--muted); }
.thanks { display: flex; flex-direction: column; gap: 14px; }
.thanks h3 { font-size: clamp(26px, 3vw, 36px); }
@media (max-width: 680px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Call page */
.calendly-box { min-height: 680px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--ink-2); }
.fallback-box { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }

/* Case study template */
.cs-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cs-numbers .num { font-size: clamp(56px, 7vw, 104px); color: var(--green); }
.cs-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.cs-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cs-shots figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-shots img { border-radius: 12px; border: 1px solid var(--line); }
.quote { font: 800 clamp(26px, 3vw, 40px)/1.15 var(--display); letter-spacing: -0.03em; max-width: 26ch; }
.preview-flag { display: inline-flex; align-self: flex-start; padding: 8px 12px; border-radius: 999px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .cs-numbers { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 72px calc(36px + env(safe-area-inset-bottom, 0px)); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-brand { display: flex; flex-direction: column; gap: 20px; }
.foot-brand img { width: 120px; }
.foot-col h4 { margin: 0 0 14px; font: 600 12px/1 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.foot-col ul { list-style: none; display: grid; gap: 10px; }
.foot-col a { text-decoration: none; color: rgba(255, 255, 255, 0.82); font-size: 15px; }
.foot-col a:hover { color: var(--white); }
.foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 14px; color: var(--muted); }
.foot-bottom nav { display: flex; gap: 20px; }
.foot-bottom a { color: var(--muted); }
@media (max-width: 960px) { .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

/* Cookie line */
.cookie { position: fixed; z-index: 70; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 680px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 14px 12px 18px; border-radius: 14px; background: var(--ink-3); border: 1px solid var(--line-strong); font-size: 14.5px; }
.cookie .actions { gap: 8px; }

/* ============================================================
   Atmosphere and motion
   ============================================================ */

/* Film grain over the whole page */
.grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 80; pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.4s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -4%); } 60% { transform: translate(-3%, -2%); } 80% { transform: translate(4%, 4%); } 100% { transform: translate(0, 0); } }
@media (max-width: 760px) { .grain { inset: 0; width: 100%; height: 100%; animation: none; } }

/* Scroll progress line */
.progress { position: fixed; z-index: 90; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 2px; background: var(--green); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); pointer-events: none; }
.site-header { transition: background-color 0.3s ease; }
.site-header.scrolled { background: rgba(11, 11, 12, 0.95); }

/* Aurora glow and cursor spotlight behind heroes */
.aurora { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; animation: drift 20s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 52vw; height: 52vw; left: 38%; top: -34%; background: radial-gradient(circle, rgba(182, 255, 59, 0.2) 0%, rgba(182, 255, 59, 0) 62%); }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; left: 66%; top: 26%; background: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 62%); animation-duration: 26s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; left: -6%; top: 58%; background: radial-gradient(circle, rgba(182, 255, 59, 0.1) 0%, rgba(182, 255, 59, 0) 62%); animation-duration: 32s; animation-delay: -12s; }
@keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-7vw, 5vh, 0) scale(1.12); } 100% { transform: translate3d(4vw, -3vh, 0) scale(0.94); } }
.spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  background: radial-gradient(560px circle at var(--mx, 70%) var(--my, 30%), rgba(182, 255, 59, 0.08), rgba(182, 255, 59, 0) 60%); }
.hero:hover .spot, .page-hero:hover .spot { opacity: 1; }
.hero .aurora { z-index: -1; mix-blend-mode: screen; }
.hero .aurora i:nth-child(1) { left: 30%; top: -40%; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 70% 0%, #000 0%, transparent 75%); }

/* Faint grid behind some sections */
.band.gridbg { position: relative; isolation: isolate; }
.band.gridbg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 80%); }

/* Headline words rise in on load */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.08em 0.12em 0; margin: 0 -0.08em -0.12em 0; }
.split .w > span { display: inline-block; transform: translateY(108%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--wd, 0ms); }
.split.go .w > span { transform: none; }

/* Sections reveal as they scroll into view. Hidden only while motion JS is running (html.js-motion). */
.js-motion :is(.section-head, .pillar, .verticals > .card, .compare > .card, .numbered > .card, .steps > .step, .card.founding, .faq details, .closing h2, .closing .actions, .stats > .stat, .offer-grid > .card, .tablewrap, .plan-card, .counts > .card, .guarantee, .lines li, .callout, .form-card, .prose > *, .trust li, .wide-card, .need, .cases > .card, .marquee):not(.seen) { opacity: 0; transform: translateY(34px); }
.js-motion .reveal { transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--rd, 0ms); }
.js-motion :is(.hero h1, .page-hero h1):not(.split) { visibility: hidden; }

/* Marquee of formats */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding-block: clamp(22px, 3vw, 34px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-group { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); padding-right: clamp(22px, 3vw, 44px); }
.mq-item { font: 800 clamp(40px, 6.4vw, 92px)/1 var(--display); letter-spacing: -0.035em; white-space: nowrap; }
.mq-item.o { color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.5); }
.mq-dot { flex: none; width: clamp(12px, 1.4vw, 20px); aspect-ratio: 1; border-radius: 50%; background: var(--green); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Steps: a line fills across each step as it appears */
.steps .step { position: relative; }
.steps .step::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--green); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--rd, 0ms) + 200ms); }
.paper .steps .step::after { background: var(--ink); }
.steps .step.seen::after { transform: scaleX(1); }
html:not(.js-motion) .steps .step::after { transform: scaleX(1); }

/* Cards: soft light follows the pointer */
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0) 45%); }
.paper .card::after { background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(11, 11, 12, 0.05), rgba(11, 11, 12, 0) 45%); }
.card:hover::after { opacity: 1; }

/* Founding 5: a green light runs around the border */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.card.founding { border: 1px solid transparent;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    conic-gradient(from var(--ang), rgba(255, 255, 255, 0.16) 0deg, rgba(255, 255, 255, 0.16) 230deg, rgba(182, 255, 59, 0.95) 300deg, rgba(255, 255, 255, 0.16) 350deg) border-box;
  animation: ring 7s linear infinite; }
@keyframes ring { to { --ang: 360deg; } }

/* Closing: the glow breathes */
.closing { position: relative; overflow: hidden; isolation: isolate; }
.closing::before { content: ""; position: absolute; z-index: -1; width: min(1000px, 140vw); aspect-ratio: 1; left: 50%; bottom: -62%; pointer-events: none;
  background: radial-gradient(circle, rgba(182, 255, 59, 0.17) 0%, rgba(182, 255, 59, 0) 62%); animation: breathe 9s ease-in-out infinite alternate; transform: translateX(-50%); }
@keyframes breathe { from { opacity: 0.55; transform: translateX(-50%) scale(0.9); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }

/* Stat numerals glow softly */
.stat .num, .cases .big, .cs-numbers .num { text-shadow: 0 0 40px rgba(182, 255, 59, 0.25); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}