/* Chairlift — shared styles for every page */

:root {
  --ink: #141B2A;
  --ink-2: #1E2638;
  --text: #141B2A;
  --muted: #55595F;
  --line: #E4E6EA;
  --soft: #F4F5F7;
  --page: #FFFFFF;
  --neon: #3DFFC1;
  --on-ink: #FFFFFF;
  --on-ink-muted: #B9C0CC;
  --on-ink-line: rgba(255, 255, 255, 0.14);
  --radius: 18px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
.nowrap { white-space: nowrap; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  border-top: 5px solid var(--ink);
}
img, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: inherit; font-weight: 800; text-transform: uppercase; line-height: 1.05; letter-spacing: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 16px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-line { border-color: currentColor; color: inherit; background: transparent; }
.btn-white { background: #FFFFFF; color: var(--ink); }
.link-arrow { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.link-arrow::after { content: " →"; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } .btn:hover { transform: none; } }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(8px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; text-transform: none; font-size: 19px; letter-spacing: -0.02em; }
.brand svg { flex: none; }
.nav { display: flex; align-items: center; gap: 26px; white-space: nowrap; font-size: 16px; font-weight: 600; }
.nav a:not(.btn) { text-decoration: none; color: var(--muted); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--ink); }
.menu-btn { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn .menu-close, .menu-btn[aria-expanded="true"] .menu-open { display: none; }
.menu-btn[aria-expanded="true"] .menu-close { display: inline; }
.mobile-menu { display: grid; padding: 4px 24px 20px; border-top: 1px solid var(--line); background: #fff; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 18px; }
.mobile-menu a[aria-current="page"] { color: var(--text); box-shadow: inset 4px 0 0 var(--ink); padding-left: 12px; }
.mobile-menu .btn { margin-top: 18px; }
@media (max-width: 1100px) {
  .nav .nav-link { display: none; }
  .nav { gap: 10px; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 1101px) { .mobile-menu { display: none !important; } }
@media (max-width: 420px) { .nav .nav-cta { display: none; } }

/* Hero (home) and page heroes */
.hero, .page-hero { position: relative; overflow: hidden; }
.hero-bg { position: absolute; right: 0; top: 24px; bottom: 0; width: 50%; max-width: 700px; pointer-events: none; }
.hero-bg svg { width: 100%; height: 100%; display: block; }
.hero .wrap, .page-hero .wrap { position: relative; z-index: 1; }
.hero .wrap { padding-top: 96px; padding-bottom: 88px; }
.hero h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.0; max-width: 13ch; }
.climb-arrow { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.1em; vertical-align: -0.04em; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: square; }
.lede { font-size: 21px; color: var(--muted); max-width: 40ch; margin-top: 24px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-note { margin-top: 26px; font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.hero-note::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--ink); flex: none; }
.page-hero .wrap { padding-top: 80px; padding-bottom: 72px; }
.page-hero h1 { font-size: clamp(38px, 5.4vw, 64px); max-width: 16ch; }
.page-hero .hero-bg { width: 40%; opacity: 0.9; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.rule { display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--ink); margin-bottom: 20px; }

/* Sections */
.section .wrap { padding-top: 104px; padding-bottom: 104px; }
.section--tight .wrap { padding-top: 72px; padding-bottom: 72px; }
.section--soft { background: var(--soft); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink .rule { background: var(--neon); }
.hero .rule { background: var(--neon); }
.section--ink .eyebrow { color: var(--on-ink-muted); }
.intro { max-width: 660px; display: grid; gap: 14px; margin-bottom: 52px; }
.intro .rule { margin-bottom: 4px; }
.intro h2 { font-size: clamp(32px, 4.4vw, 52px); }
.intro p { color: var(--muted); font-size: 19px; }
.section--ink .intro p { color: var(--on-ink-muted); }
.intro--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 40px; }
.intro--row > div { max-width: 660px; display: grid; gap: 14px; }
.section-foot { margin-top: 40px; }

/* Pain points */
.pains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.pains li { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); font-size: 19px; }
.pains li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.pains svg { width: 24px; height: 24px; margin-top: 3px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pains strong { display: block; }
.pains span { color: var(--muted); font-size: 17px; }
.pains-close { margin-top: 36px; font-size: 22px; font-weight: 600; max-width: 34ch; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--text); }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--ink); }
.card h3 { font-size: 24px; }
.card p { color: var(--muted); }
.card .card-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.card .card-foot { margin-top: auto; padding-top: 14px; }
.card--ink { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.card--ink p, .card--ink .card-label { color: var(--on-ink-muted); }
.section--ink .card { background: var(--ink-2); border-color: var(--ink-2); color: var(--on-ink); }
.section--ink .card::before { background: #fff; }
.section--ink .card p, .section--ink .card .card-label { color: var(--on-ink-muted); }
.stage .card-icon { display: block; margin-bottom: 14px; }
.card-icon { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 30px; border-radius: var(--radius); background: var(--ink-2); color: var(--on-ink); display: grid; gap: 10px; align-content: start; }
.step-num { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-muted); }
.step-num b { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; letter-spacing: 0; }
.step h3 { font-size: 26px; }
.step h3 em { font-style: italic; font-weight: 300; }
.step p { color: var(--on-ink-muted); }
.section:not(.section--ink) .step { background: #fff; color: var(--text); border: 1px solid var(--line); }
.section:not(.section--ink) .step p, .section:not(.section--ink) .step-num { color: var(--muted); }
.section:not(.section--ink) .step-num b { background: var(--ink); color: #fff; }

/* Detailed step rows (How it works page) */
.stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; padding: 56px 0; border-top: 1px solid var(--line); }
.stage:last-child { border-bottom: 1px solid var(--line); }
.stage h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 10px; }
.stage h2 em { font-style: italic; font-weight: 300; }
.stage .stage-sum { margin-top: 16px; color: var(--muted); font-size: 19px; }
.stage-detail { display: grid; gap: 22px; }
.stage-detail h3 { font-size: 15px; letter-spacing: 0.08em; margin-bottom: 8px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--muted); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 12px; height: 12px; border-radius: 3px; background: var(--ink); }
.section--ink .ticks li { color: var(--on-ink-muted); }
.section--ink .ticks li::before, .card--ink .ticks li::before { background: #FFFFFF; }
.card--ink .ticks li { color: var(--on-ink-muted); }

/* Who it's for */
.fit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(20, 27, 42, 0.14); }
.fit-item { padding: 28px 24px 0 0; display: grid; gap: 10px; align-content: start; }
.fit-item + .fit-item { padding-left: 24px; border-left: 1px solid rgba(20, 27, 42, 0.14); }
.fit-item h3 { font-size: 20px; }
.fit-item p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.fit-link { text-decoration: none; color: var(--text); padding-bottom: 28px; }
.fit-link .link-arrow { justify-self: start; }
.fit-link:hover h3 { text-decoration: underline; text-decoration-color: var(--ink); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.section-note { margin-top: 36px; color: var(--muted); }
.fit-icon { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Example (before / after) */
.example { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.example + .example { margin-top: 72px; padding-top: 72px; border-top: 1px solid var(--line); }
.example-head h2, .example-head h3 { font-size: clamp(28px, 3.6vw, 40px); margin-top: 6px; }
.example-head p { margin-top: 14px; color: var(--muted); }
.example-head p + p { margin-top: 8px; }
.example-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--muted); }
.ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ba > div { border-radius: var(--radius); padding: 26px; }
.ba-before { background: var(--soft); border: 1px solid var(--line); }
.ba-after { background: var(--ink); color: var(--on-ink); }
.ba h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ba-before h4 { color: var(--muted); }
.ba-after h4 { color: var(--neon); }
.ba ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; }
.ba-before ol { color: var(--muted); }
.ba-after ol { color: var(--on-ink-muted); }
.ba-after li::marker { color: #fff; font-weight: 700; }
.ba-wide { grid-column: 1 / -1; background: #fff !important; border: 1px dashed #C9CDD3; font-size: 16px; color: var(--muted); }
.ba-wide strong { color: var(--text); }

/* Founder note */
.founder { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.founder-mark { aspect-ratio: 1; border-radius: 24px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 64px; letter-spacing: 0.02em; position: relative; overflow: hidden; }
.founder-photo { position: relative; }
.founder-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 5px solid var(--neon); background: var(--ink); }
.founder blockquote { margin: 0; }
.founder blockquote p { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.4; font-weight: 500; }
.founder blockquote p + p { margin-top: 18px; font-size: 19px; color: var(--muted); font-weight: 400; line-height: 1.6; }
.founder-sign { margin-top: 26px; display: grid; gap: 2px; }
.founder-sign strong { font-size: 18px; }
.founder-sign span { color: var(--muted); font-size: 16px; }

/* Prose (About, Privacy) */
.prose { max-width: 68ch; }
.prose p, .prose li { color: var(--muted); font-size: 19px; }
.prose p + p { margin-top: 18px; }
.prose h2 { font-size: 26px; margin: 48px 0 14px; color: var(--text); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; display: grid; gap: 8px; margin: 14px 0 0; }
.prose a { color: var(--text); font-weight: 600; }
.prose strong { color: var(--text); }
.split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.split h2 { font-size: clamp(30px, 4vw, 46px); }
.lead-big { font-size: 26px; line-height: 1.35; font-weight: 500; margin-top: 18px; max-width: 26ch; }

/* Principles */
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.principle { padding: 28px 0; border-top: 1px solid var(--on-ink-line); display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.principle b { font-size: 14px; color: #FFFFFF; padding-top: 4px; font-weight: 700; letter-spacing: 0.06em; }
.principle h3 { font-size: 20px; margin-bottom: 8px; }
.principle p { color: var(--on-ink-muted); font-size: 17px; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 48px 24px 0; position: relative; font-weight: 700; font-size: 20px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -10px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details > div { padding: 0 48px 26px 0; color: var(--muted); max-width: 70ch; }
.faq details > div p + p { margin-top: 12px; }

/* Contact box and form */
.cta { padding: 96px 24px 104px; }
.cta--flush { padding-top: 0; }
.cta-box { position: relative; overflow: hidden; max-width: 1112px; margin: 0 auto; background: var(--ink); color: var(--on-ink); border-radius: 28px; padding: 64px 56px; display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: flex-start; }
.cta-box > div { position: relative; z-index: 1; flex: 1 1 320px; }
.cta-box h2 { font-size: clamp(32px, 4.2vw, 50px); }
.cta-box p { color: var(--on-ink-muted); margin-top: 14px; max-width: 42ch; }
.cta-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; color: var(--on-ink-muted); font-size: 16px; }
.cta-list li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; }
.cta-list b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--ink-2); color: #FFFFFF; font-size: 13px; }
.cta-direct { margin-top: 26px; font-size: 16px; color: var(--on-ink-muted); }
.cta-direct a { color: #fff; font-weight: 600; }
.cta-art { position: absolute; right: -10px; bottom: -14px; width: 260px; height: auto; fill: #FFFFFF; opacity: 0.05; }
.contact-form { position: relative; z-index: 1; flex: 1 1 420px; display: grid; gap: 14px; }
.contact-form .hp { position: absolute; left: -9999px; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.field { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: var(--on-ink); }
.field em { font-style: normal; font-weight: 400; color: var(--on-ink-muted); }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: #FFFFFF; border: 2px solid transparent; border-radius: 12px; padding: 12px 14px; min-height: 50px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: #FFFFFF; }
.contact-form .btn { justify-self: start; }
.contact-form .btn[disabled] { opacity: 0.6; cursor: wait; }
.form-fine { font-size: 14px; color: var(--on-ink-muted); }
.form-fine a { color: #fff; }
.form-status { font-size: 17px; color: #fff; }
.form-status:empty { display: none; }
.form-done .field, .form-done .field-row, .form-done .btn, .form-done .form-fine { display: none; }
.form-done .form-status { padding: 22px 24px; border-radius: 14px; background: var(--ink-2); border-left: 4px solid #FFFFFF; }

/* Footer */
.site-footer { background: var(--ink); color: var(--on-ink-muted); font-size: 16px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 48px; padding-top: 56px; padding-bottom: 40px; }
.footer-brand .brand { color: #fff; }
.footer-brand p { margin-top: 14px; max-width: 34ch; line-height: 1.55; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-block; padding: 6px 0; text-decoration: none; color: var(--on-ink-muted); }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--on-ink-line); }
.footer-bottom .wrap { padding-top: 22px; padding-bottom: 26px; font-size: 14px; }

/* Responsive */
@media (max-width: 960px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .section .wrap { padding-top: 72px; padding-bottom: 72px; }
  .cards, .steps { grid-template-columns: minmax(0, 1fr); }
  .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-item, .fit-item + .fit-item { padding: 24px 16px 24px 0; border-left: 0; border-bottom: 1px solid rgba(20, 27, 42, 0.14); }
  .fit-item:nth-child(even) { padding-left: 16px; border-left: 1px solid rgba(20, 27, 42, 0.14); }
  .example, .split, .stage { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .founder { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
  .founder-mark { font-size: 40px; border-radius: 18px; }
  .founder-mark::after { right: 10px; top: 10px; width: 12px; height: 12px; }
  .principles, .pains { grid-template-columns: minmax(0, 1fr); }
  .pains li:nth-last-child(2) { border-bottom: 0; }
  .hero-bg { width: 60%; height: 50%; top: auto; }
  .cta-box { padding: 48px 32px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .wrap { padding: 0 20px; }
  .mobile-menu { padding: 4px 20px 20px; }
  .hero .wrap { padding-top: 48px; padding-bottom: 56px; }
  .page-hero .wrap { padding-top: 48px; padding-bottom: 44px; }
  .lede { font-size: 18px; }
  .ctas { flex-direction: column; align-items: stretch; }
  .hero-bg { display: none; }
  .section .wrap { padding-top: 56px; padding-bottom: 56px; }
  .section--tight .wrap { padding-top: 44px; padding-bottom: 44px; }
  .intro { margin-bottom: 32px; }
  .intro p, .prose p, .prose li { font-size: 17px; }
  .card, .step { padding: 24px; }
  .pains li { font-size: 17px; }
  .pains span { font-size: 16px; }
  .pains-close { font-size: 19px; }
  .ba { grid-template-columns: minmax(0, 1fr); }
  .founder { grid-template-columns: minmax(0, 1fr); }
  .founder-photo { width: 160px; }
  .founder-photo img { border-width: 4px; }
  .lead-big { font-size: 21px; }
  .faq summary { font-size: 18px; }
  .faq details > div { padding-right: 0; }
  .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .fit-item, .fit-item + .fit-item, .fit-item:nth-child(even) { padding: 22px 0; border-left: 0; grid-template-columns: 28px 1fr; column-gap: 14px; }
  .fit-item .fit-icon { grid-row: 1 / 3; margin-top: 2px; }
  .cta { padding: 56px 16px; }
  .cta--flush { padding-top: 0; }
  .cta-box { padding: 36px 22px; border-radius: 22px; }
  .cta-art { display: none; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .contact-form .btn { justify-self: stretch; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 52px; padding-bottom: 36px; gap: 32px 20px; }
  .footer-bottom .wrap { flex-direction: column; }
}

/* Home headline: Night Ink up-right arrow */
.nowrap { white-space: nowrap; }
.climb-arrow { width: 0.72em; height: 0.72em; margin-left: 0.14em; fill: none; stroke: var(--neon); stroke-width: 3.4; stroke-linecap: square; stroke-linejoin: miter; vertical-align: -0.02em; }

/* Hero note: Night Ink check */
.hero-note::before { content: none; }
.hero-note svg { width: 22px; height: 22px; flex: none; }
.hero-note svg circle { fill: var(--ink); }
.hero-note svg path { fill: none; stroke: #FFFFFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* "Sound familiar?" on midnight ink */
.pains-band .pains li { border-color: var(--on-ink-line); }
.pains-band .pains span { color: var(--on-ink-muted); }
.pains-band .pains-close { color: #FFFFFF; }

/* Plain numbered stop label (How it works) */
.step-num--plain { color: var(--muted); }
.step-num--plain b { background: var(--ink); color: #FFFFFF; }

/* FAQ side note */
.faq-aside { margin-top: 18px; color: var(--muted); font-size: 19px; }
.faq-aside a { color: var(--text); font-weight: 600; }

/* ---------- Brand accents: Neon only on the logo, hero arrow and line, and small touches on Ink ---------- */
.hl { background: none; padding: 0; color: inherit; }
.dot { color: inherit; }
.link-arrow { border-bottom-color: currentColor; border-bottom-width: 2px; }
.section--ink .link-arrow { color: #FFFFFF; }
:focus-visible { outline-color: var(--ink); }
.section--ink :focus-visible, .cta-box :focus-visible, .site-footer :focus-visible { outline-color: #FFFFFF; }
/* Keep accents consistent */
.card--ink::before { background: #FFFFFF; }
.pains-band .pains svg { stroke: #FFFFFF; }
.step:first-child .step-num b { background: var(--ink); color: #FFFFFF; }

/* White boxes on dark sections (no dark-on-dark cards) */
.section--ink .card, .section--ink .step { background: #FFFFFF; border: 1px solid #FFFFFF; color: var(--text); }
.section--ink .card::before { background: var(--ink); }
.section--ink .card p, .section--ink .card .card-label, .section--ink .step p, .section--ink .step-num { color: var(--muted); }
.section--ink .step-num b { background: var(--ink); color: #FFFFFF; }
.section--ink .step h3 { color: var(--ink); }

/* "Sound familiar?": prominent uppercase statements */
.pains strong { display: block; text-transform: uppercase; font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: 0.01em; margin-bottom: 8px; }
.pains li { padding: 26px 0; }
@media (max-width: 640px) { .pains strong { font-size: 18px; } }

/* Slim call-to-action band (no form) */
.cta-band .cta-box { padding: 56px; align-items: center; }
.cta-band .cta-box > div { flex: 1 1 100%; }
.cta-band .btn { margin-top: 28px; }

/* Problem and fix cards (home) */
.card .problem { font-weight: 700; color: var(--text); font-size: 17px; line-height: 1.4; }
.section--ink .card .problem { color: var(--text); }
.section-link { margin-top: 32px; }

/* "On" in Onboard: light italic */
.lt { font-weight: 300; font-style: italic; }

/* Callout box */
.callout { margin-top: 24px; padding: 18px 22px; background: #FFFFFF; border-left: 4px solid var(--ink); border-radius: 10px; font-weight: 700; color: var(--text); }
.prose .link-arrow { display: inline-block; margin-top: 22px; }

/* Two side cards on Get in touch */
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 640px) {
  .cta-band .cta-box { padding: 40px 24px; }
  .cta-band .btn { width: 100%; }
  .footer-top { flex-direction: column; }
  .cards--two { grid-template-columns: minmax(0, 1fr); }
}
.section--ink .pains-close { color: #FFFFFF; }

/* Home "What we take off your team's plate": cards alternate white and lighter ink (white top bar) */
.section--ink .cards--mixed .card:nth-child(even) { background: var(--ink-2); border-color: var(--ink-2); color: #FFFFFF; }
.section--ink .cards--mixed .card:nth-child(even)::before { background: #FFFFFF; }
.section--ink .cards--mixed .card:nth-child(even) p, .section--ink .cards--mixed .card:nth-child(even) .card-label { color: var(--on-ink-muted); }
.section--ink .cards--mixed .card:nth-child(even) .problem { color: #FFFFFF; }
.section--ink .cards--mixed .card:nth-child(even) .card-icon { stroke: #FFFFFF; }

/* Swipe row: cards scroll sideways on phones and tablets instead of stacking */
@media (max-width: 860px) {
  .cards--swipe { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 0 24px 8px; scroll-padding: 0 24px; scrollbar-width: none; }
  .cards--swipe::-webkit-scrollbar { display: none; }
  .cards--swipe .card { flex: 0 0 82%; max-width: 360px; scroll-snap-align: start; }
}
.section:has(.cards--swipe) { overflow-x: clip; }
.stage-ask { grid-column: 1 / -1; }

/* Home hero: rounded Midnight Ink card, inset so white shows around it */
.hero .wrap { padding-top: 24px; padding-bottom: 72px; }
.hero-card { background: var(--ink); color: var(--on-ink); border-radius: 28px; padding: 88px 72px 80px; }
.hero-card h1 { text-wrap: balance; font-size: min(88px, calc((100vw - 192px) / 8.4)); max-width: 8.8em; letter-spacing: -0.01em; }
.hero-card .lede { color: #FFFFFF; font-size: 23px; font-weight: 500; max-width: 38ch; }
.hero-card .hero-note { color: #FFFFFF; }
.hero-card .hero-note svg circle { fill: #FFFFFF; }
.hero-card .hero-note svg path { stroke: var(--ink); }
.hero-card :focus-visible { outline-color: #FFFFFF; }
@media (max-width: 860px) {
  .hero-card { padding: 64px 40px 56px; }
  .hero-card h1 { font-size: min(88px, calc((100vw - 128px) / 8.4)); }
}
@media (max-width: 640px) {
  .hero .wrap { padding: 12px 12px 44px; }
  .hero-card { border-radius: 22px; padding: 44px 22px 40px; }
  .hero-card h1 { font-size: max(30px, calc((100vw - 68px) / 8.4)); }
  .hero-card .lede { font-size: 19px; }
}

/* Ink sections: rounded Midnight Ink cards inset from the page edges (matches the home hero) */
.section--ink { background: none; padding: 24px 24px; }
.section--ink > .wrap { max-width: 1112px; background: var(--ink); border-radius: 28px; padding: 96px 72px; overflow: hidden; }
.hero .wrap { padding-bottom: 24px; }
.hero + .section--ink { padding-top: 48px; }
@media (max-width: 860px) {
  .section--ink > .wrap { padding: 64px 40px; }
  .section--ink .cards--swipe { margin: 0 -40px; padding: 0 40px 8px; scroll-padding: 0 40px; }
}
@media (max-width: 640px) {
  .section--ink { padding: 12px; }
  .section--ink > .wrap { border-radius: 22px; padding: 44px 22px; }
  .section--ink .cards--swipe { margin: 0 -22px; padding: 0 22px 8px; scroll-padding: 0 22px; }
  .hero .wrap { padding-bottom: 12px; }
  .hero + .section--ink { padding-top: 32px; }
}

/* Service and stop rows (What we do, How it works): Ink panel with a Neon bar beside a light grey panel */
.stage { gap: 0; padding: 0; border: 0; border-radius: 28px; overflow: hidden; background: var(--soft); margin-bottom: 20px; }
.stage:last-child { border-bottom: 0; margin-bottom: 0; }
.stage > div:first-child { background: var(--ink); color: var(--on-ink); padding: 56px 48px; }
.stage > div:first-child::before { content: ""; display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--neon); margin-bottom: 22px; }
.stage > div:first-child .eyebrow, .stage > div:first-child .step-num { color: var(--on-ink-muted); }
.stage > div:first-child .stage-sum { color: var(--on-ink-muted); }
.stage-detail { padding: 56px 48px; align-content: start; }
.stage-detail .ticks li { color: var(--text); }

/* Light grey sections: rounded inset boxes like the Ink ones, so no thin white strips */
.section--soft { background: none; padding: 24px; }
.section--soft > .wrap { max-width: 1112px; background: var(--soft); border-radius: 28px; padding-left: 72px; padding-right: 72px; }
.cta { padding-top: 24px; padding-bottom: 72px; }
@media (max-width: 860px) {
  .stage > div:first-child, .stage-detail { padding: 40px 32px; }
  .section--soft > .wrap { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 640px) {
  .stage { border-radius: 22px; margin-bottom: 14px; }
  .stage > div:first-child, .stage-detail { padding: 32px 22px; }
  .section--soft { padding: 12px; }
  .section--soft > .wrap { border-radius: 22px; padding-left: 22px; padding-right: 22px; }
  .cta { padding-top: 12px; padding-bottom: 44px; }
}

/* What we do: the four service boxes swipe sideways on phones and tablets */
@media (max-width: 860px) {
  .stages--swipe { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 440px); grid-template-rows: auto auto; column-gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -24px; padding: 0 24px 8px; scroll-padding: 0 24px; scrollbar-width: none; }
  .stages--swipe::-webkit-scrollbar { display: none; }
  .stages--swipe .stage { grid-row: span 2; margin: 0; scroll-snap-align: start; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; gap: 0; }
  .section:has(.stages--swipe) { overflow-x: clip; }
}
@media (max-width: 640px) {
  .stages--swipe { margin: 0 -20px; padding: 0 20px 8px; scroll-padding: 0 20px; }
  .stages--swipe .stage-detail { gap: 18px; }
  .stages--swipe .stage h2 { font-size: 28px; }
  .stages--swipe .stage .stage-sum { font-size: 17px; }
}

/* Icons on light backgrounds sit in a small Ink square with a Neon line; on Ink they stay plain white */
/* Icons: full size line icons, never inside a box (Ryan, 2026-10-26) */
.fit-icon, .card .card-icon { width: 40px; height: 40px; padding: 0; background: none; border-radius: 0; stroke: var(--ink); stroke-width: 1.6; margin-bottom: 12px; align-self: start; }
.stage .card-icon, .section--ink .cards--mixed .card:nth-child(even) .card-icon { width: 40px; height: 40px; stroke: #FFFFFF; }
.pains svg { width: 32px; height: 32px; margin-top: 0; }
.pains li { grid-template-columns: 36px 1fr; }

/* Morning paper starter offer */
.paper-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.paper-split h2 { font-size: clamp(30px, 4vw, 46px); }
.paper-split .ticks { margin-top: 24px; }
.paper-lede { color: var(--muted); font-size: 19px; margin-top: 18px; max-width: 46ch; }
.paper-split .btn { margin-top: 28px; }
.paper-shot { margin: 0; max-width: 480px; justify-self: center; width: 100%; }
.paper-shot img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(20, 27, 42, 0.16); }
.paper-shot figcaption { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 860px) {
  .paper-split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .paper-shot { max-width: 420px; }
}
@media (max-width: 640px) { .paper-lede { font-size: 17px; } }
.reel-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 64px; align-items: center; }
.reel-hero .ctas { margin-top: 28px; }
.reel { margin: 0; justify-self: center; width: 100%; }
.reel video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: var(--ink); box-shadow: 0 24px 60px rgba(20, 27, 42, 0.18); }
@media (max-width: 860px) {
  .reel-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .reel { max-width: 320px; }
}

/* Build your own paper (/try/) */
.try-split { align-items: start; }
.try-form { display: grid; gap: 14px; margin-top: 24px; }
.try-form .btn { justify-self: start; margin-top: 6px; }
.try-split .form-fine { color: var(--on-ink-muted); font-size: 14px; }
.try-after { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--on-ink-line); }
.try-after h3 { font-size: 22px; margin-bottom: 8px; }
.try-after p { color: var(--on-ink-muted); }
.try-after[hidden] { display: none; }
.section--ink .paper-shot figcaption { color: var(--on-ink-muted); }
.try-link { margin-top: 20px; }

/* Time-back calculator (/time-back/) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.calc-form { background: var(--soft, #F3F4F6); border-radius: 28px; padding: 32px; display: grid; gap: 0; }
.calc-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px; gap: 14px; align-items: end; padding: 16px 0; border-bottom: 1px solid var(--line); }
.calc-task { font-weight: 700; align-self: center; }
.calc-row label, .calc-people { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted, #555); }
.calc-form input { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #FFFFFF; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 46px; }
.calc-form input:focus { outline: none; border-color: var(--ink); }
.calc-people { margin-top: 20px; font-size: 15px; color: var(--ink); }
.calc-people input { max-width: 120px; }
.calc-out { background: var(--ink); color: var(--on-ink); border-radius: 28px; padding: 40px 36px; position: sticky; top: 100px; }
.calc-label { color: var(--on-ink-muted); margin-top: 8px; }
.calc-big { font-size: clamp(40px, 5vw, 60px); font-weight: 800; line-height: 1.05; margin-top: 4px; }
.calc-sub { margin-top: 10px; }
.calc-note { color: var(--on-ink-muted); font-size: 14px; margin-top: 8px; }
.calc-out .btn { margin-top: 24px; }
.calc-after { color: var(--on-ink-muted); font-size: 15px; margin-top: 14px; }
.task-form textarea { min-height: 96px; }
@media (max-width: 900px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-out { position: static; }
  .calc-form { padding: 22px; border-radius: 22px; }
  .calc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calc-task { grid-column: 1 / -1; }
}

/* Who we are: Ink hero card sized for a page title, then alternating grey and Ink boxes */
.hero--page .hero-card { padding: 72px 72px 64px; }
.hero--page .hero-card h1 { font-size: clamp(36px, 5.4vw, 64px); max-width: 14ch; }
.hero--page .eyebrow { color: var(--on-ink-muted); display: block; }
.hero--page .rule { margin-bottom: 18px; }
.hero--page .lede { margin-top: 18px; }
.founder { align-items: center; }
@media (max-width: 860px) { .hero--page .hero-card { padding: 56px 40px 48px; } }
@media (max-width: 640px) {
  .hero--page .hero-card { padding: 40px 22px 36px; }
  .hero--page .hero-card h1 { font-size: 34px; }
}
.hero--page .ctas { margin-top: 28px; }
.hero--page .btn-ink { background: #FFFFFF; color: var(--ink); }
.hero--page .btn-line { color: #FFFFFF; }
.hero--page .lede a { color: #FFFFFF; }
@media (max-width: 640px) {
  .fit-item, .fit-item + .fit-item, .fit-item:nth-child(even) { grid-template-columns: 40px 1fr; column-gap: 16px; }
  .fit-item .fit-icon { margin: 0; }
}

/* Tightening pass (2026-10-26): one even rhythm on every page.
   Boxes sit 24px apart (12px on phones), the same as the white around them.
   Plain white sections keep 72px (44px on phones) to the boxes either side. */
.hero .wrap { padding-top: 24px; padding-bottom: 12px; }
.hero + .section--ink { padding-top: 12px; }
.section--ink, .section--soft, .cta, .cta--flush { padding: 12px 24px; }
.section:not(.section--ink):not(.section--soft) > .wrap { padding-top: 60px; padding-bottom: 60px; }
main > section:last-of-type { padding-bottom: 24px; }
main > .section:not(.section--ink):not(.section--soft):last-of-type { padding-bottom: 12px; }
.section--ink > .wrap, .section--soft > .wrap { padding-top: 80px; padding-bottom: 80px; }
.section--tight.section--soft > .wrap, .section--tight.section--ink > .wrap { padding-top: 64px; padding-bottom: 64px; }
.cta-box, .cta-band .cta-box { padding: 72px; }

/* Page headers: wider headline so it reads in two or three strong lines, not four */
.hero--page .hero-card { padding: 64px 72px 60px; }
.hero--page .hero-card h1 { max-width: 20ch; }
.hero--page .lede { max-width: 50ch; }

/* Stronger body text: a touch darker so copy doesn't look washed out */
:root { --muted: #474C54; --on-ink-muted: #C7CDD7; }
.card h3, .stage h3, .fit-item h3 { letter-spacing: 0; }

@media (max-width: 860px) {
  .section--ink > .wrap, .section--soft > .wrap { padding-top: 56px; padding-bottom: 56px; }
  .cta-box, .cta-band .cta-box { padding: 56px 40px; }
  .hero--page .hero-card { padding: 52px 40px 48px; }
}
@media (max-width: 640px) {
  .hero .wrap { padding: 12px 12px 6px; }
  .hero + .section--ink { padding-top: 6px; }
  .section--ink, .section--soft, .cta, .cta--flush { padding: 6px 12px; }
  .section:not(.section--ink):not(.section--soft) > .wrap { padding-top: 38px; padding-bottom: 38px; }
  main > section:last-of-type { padding-bottom: 12px; }
  main > .section:not(.section--ink):not(.section--soft):last-of-type { padding-bottom: 6px; }
  .section--ink > .wrap, .section--soft > .wrap, .section--tight.section--soft > .wrap, .section--tight.section--ink > .wrap { padding-top: 40px; padding-bottom: 40px; }
  .cta-box, .cta-band .cta-box { padding: 40px 22px; }
  .hero--page .hero-card { padding: 40px 22px 36px; }
}

/* Icon and its label share one line (Ryan, 2026-10-26) */
.card-top { display: flex; align-items: center; gap: 14px; }
.card-top .card-icon { margin: 0; flex: none; width: 40px; height: 40px; }
.card-top .card-label, .card-top .eyebrow { margin: 0; }
.stage .card-top { margin-bottom: 14px; }

/* Enhancement round (2026-10-26): hero split, proof strip, two-door closer, phone tap targets */
@media (max-width: 640px) { body { font-size: 17px; } }

/* Home hero: words left, before-and-after card right */
.hero-card--home { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; }
.hero-card--home h1 { font-size: clamp(40px, 4.9vw, 62px); max-width: none; }
.hero-card--home .hero-copy { min-width: 0; }
.proof .wrap { padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 640px) { .proof .wrap { padding-top: 6px; padding-bottom: 6px; } .hero-card--home h1 { font-size: max(30px, calc((100vw - 68px) / 8.4)); } }
.card p a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.hero-promise { margin-top: 14px; font-size: 16px; font-weight: 600; color: #FFFFFF; }
.hero-card .hero-note { margin-top: 18px; color: var(--on-ink-muted); }
.flip { position: relative; display: grid; min-height: 230px; }
.flip > div { grid-area: 1 / 1; background: var(--ink-2); border-radius: 22px; padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.flip p { font-size: clamp(20px, 2vw, 26px); font-weight: 700; line-height: 1.25; color: #FFFFFF; max-width: 18ch; }
.flip-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ink-muted); }
.flip-tag--after { color: var(--neon); }
.flip-after { opacity: 0; }
@keyframes flip-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes flip-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .flip-before { animation: flip-out 0.5s cubic-bezier(.2, .7, .2, 1) 1.6s both; }
  .flip-after { animation: flip-in 0.6s cubic-bezier(.2, .7, .2, 1) 1.9s both; }
}
@media (prefers-reduced-motion: reduce) {
  .flip > div { grid-area: auto; }
  .flip { gap: 12px; }
  .flip-after { opacity: 1; }
}
@media (max-width: 900px) {
  .hero-card--home { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .flip { min-height: 170px; }
  .flip > div { padding: 22px; }
  .flip p { font-size: 20px; }
}

/* Proof strip: a face, and two plain facts */
.proof-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; align-items: center; }
.proof-item { display: flex; align-items: center; gap: 16px; min-width: 0; }
.proof-item p { font-size: 16px; line-height: 1.5; color: var(--muted); }
.proof-item strong { color: var(--text); display: block; }
.proof-item a { color: var(--text); font-weight: 700; }
.proof-item--face img { width: 72px; height: 72px; flex: none; border-radius: 50%; object-fit: cover; border: 4px solid var(--neon); background: var(--ink); }
@media (max-width: 860px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .proof-item--face img { width: 64px; height: 64px; }
}

/* Paper teaser: smaller, clearly a side note */
.paper-teaser .paper-shot { max-width: 340px; }
.paper-teaser h2 { font-size: clamp(28px, 3.4vw, 40px); }
.paper-teaser .paper-lede { max-width: 42ch; }
.paper-teaser .eyebrow { display: block; }

/* Home closer with two doors */
.cta-box--doors { align-items: flex-start; }
.cta-or { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--on-ink-line); color: var(--on-ink-muted); max-width: 42ch; }
.cta-or strong { color: #FFFFFF; display: block; margin-bottom: 4px; }
.cta-box--doors .btn { margin-top: 24px; }

/* Three-step contact form */
.steps-form .form-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 14px; }
.steps-form legend { font-weight: 800; font-size: 22px; line-height: 1.2; text-transform: uppercase; margin-bottom: 14px; color: #FFFFFF; }
.steps-form .field-label { font-size: 14px; font-weight: 600; color: var(--on-ink-muted); margin-top: 6px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { position: relative; }
.pill input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.35); color: #FFFFFF; font-weight: 600; font-size: 15px; }
.pill input:checked + span { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.pill input:focus-visible + span { outline: 3px solid #FFFFFF; outline-offset: 2px; }
.form-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.form-nav .btn-line { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
.form-progress { display: grid; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: 18px; }
.form-progress-bar { display: block; height: 4px; border-radius: 2px; background: var(--on-ink-line); overflow: hidden; }
.form-progress-bar i { display: block; height: 100%; width: 33.3%; background: #FFFFFF; transition: width 0.3s ease; }
.steps-form.is-stepped .form-step { display: none; }
.steps-form.is-stepped .form-step.is-current { display: grid; }
.steps-form:not(.is-stepped) .form-progress, .steps-form:not(.is-stepped) [data-next], .steps-form:not(.is-stepped) [data-back] { display: none; }

/* Thumb-sized links everywhere (44px minimum) */
.link-arrow { display: inline-block; padding: 9px 0 7px; min-height: 44px; }
.footer-links a { padding: 11px 0; min-height: 44px; }
.mobile-menu a:not(.btn) { min-height: 52px; display: flex; align-items: center; }
.nav a:not(.btn) { padding: 12px 0; }
.cta-direct a, .form-fine a, .founder-sign a, .proof-item a, .faq-aside a, .section-note a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.ctas { gap: 12px; }
.section-link + .section-link { margin-top: 4px; }
@media (max-width: 640px) {
  .hero-card .ctas { gap: 12px; }
  .contact-form .field + .field, .contact-form .field-row + .field { margin-top: 0; }
}

/* Phone spacing and look (Ryan, 2026-10-26 4:20 AM): tighter, calmer, underlines hug the text */
.link-arrow { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; padding: 12px 0; min-height: 0; }
.link-arrow::after { text-decoration: none; display: inline-block; }
.section-link { margin-top: 12px; }
.section-link + .section-link { margin-top: 0; }
.pains-close { margin-top: 28px; }
@media (max-width: 640px) {
  .hero-card--home { gap: 22px; }
  .hero-card .lede { font-size: 18px; margin-top: 16px; }
  .hero-card .ctas { margin-top: 22px; }
  .hero-promise { margin-top: 12px; font-size: 15px; }
  .flip { min-height: 0; }
  .flip > div { padding: 18px 20px; gap: 8px; }
  .flip p { max-width: none; font-size: 19px; }
  .flip { display: none; }
}

/* Proof strip on phones: one calm grey box, items separated by thin lines */
@media (max-width: 860px) {
  .proof { padding: 6px 12px; }
  .proof .wrap { padding: 0; }
  .proof-grid { gap: 0; background: var(--soft); border-radius: 22px; padding: 6px 18px; }
  .proof-item { padding: 16px 0; }
  .proof-item + .proof-item { border-top: 1px solid var(--line); }
}

/* Cards and steps: tighter on phones */
@media (max-width: 640px) {
  .step { padding: 22px 20px; }
  .steps { gap: 10px; }
  .step h3 { font-size: 24px; margin: 4px 0 6px; }
  .intro { margin-bottom: 24px; }
  .section--ink .intro p, .section--soft .intro p { margin-top: 10px; }
  .paper-teaser .paper-shot { max-width: 100%; }
  .paper-teaser .paper-split { gap: 22px; }
}
.link-arrow::after { margin-left: 0.3em; }
@media (max-width: 860px) { .proof .proof-grid { padding: 6px 20px; } }
@media (max-width: 860px) { .proof { padding: 0 12px; } .section--ink { } }
@media (max-width: 640px) { .proof + .section--ink { padding-top: 12px; } }

/* Booking page: loading text, backup link above the calendar */
#cal-inline:empty::before { content: "Loading the calendar\2026"; display: block; padding: 24px 0; color: var(--muted); }
.section-note--top { margin: 0 0 12px; }
.section-note a { display: inline-block; padding: 12px 0; }

/* Tap targets: inline links and email addresses at least 44px tall */
.link-arrow, .proof-item a, .cta-direct a, .form-fine a, .founder-sign a, .faq-aside a, .cta-box a:not(.btn) { display: inline-block; min-height: 44px; line-height: 44px; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
.proof-item p a { line-height: 1.4; padding: 12px 0; min-height: 0; }
.form-fine a { line-height: 1.4; padding: 12px 0; min-height: 0; }

/* Client story */
.story-stat { display: grid; gap: 4px; margin: 20px 0 8px; }
.story-stat b { font-size: clamp(28px, 7vw, 40px); font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.story-stat span { font-size: 18px; color: var(--muted); }
.story-note { color: var(--muted); font-size: 15px; margin: 0; }
.story-quote { margin: 24px 0 0; padding-left: 20px; border-left: 4px solid var(--ink); }
.story-quote p { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.story-quote cite { font-style: normal; color: var(--muted); font-size: 15px; }
.story-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.story-logo { display: block; width: 84px; height: auto; margin: 0; }
.story-photos { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; align-items: stretch; margin-top: 8px; }
.story-photos img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; display: block; }
@media (max-width: 760px) { .story-photos { grid-template-columns: 1fr; gap: 12px; } .story-photos img { max-height: 280px; } }
.bring { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bring li { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; font-weight: 600; line-height: 1.35; }
@media (max-width: 640px) { .bring { grid-template-columns: minmax(0, 1fr); gap: 10px; } }
.proof-item--face a { display: block; margin-top: 4px; }

/* Build your own paper: live masthead, press slot, print-out reveal */
.try-live { margin-top: 22px; background: #F5F5F3; border-radius: 18px; padding: 14px 16px 10px; text-align: center; overflow: hidden; }
.try-live-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #5B6270; }
.try-live-mast { font-family: 'UnifrakturMaguntia', serif; font-size: 46px; line-height: 1.15; color: #111; white-space: nowrap; }
.try-form { margin-top: 18px; }
.press { position: relative; width: 100%; max-width: 480px; justify-self: center; }
.press .paper-shot { position: relative; z-index: 1; }
@media (min-width: 901px) { .try-split .press { position: sticky; top: 108px; } }
@media (min-width: 901px) { .try-live { display: none; } }
@media (max-width: 640px) { .try-live-mast { font-size: 38px; } }
.try-form .form-status { min-height: 1.4em; color: var(--on-ink-muted); font-size: 15px; }
.try-form .hp { position: absolute; left: -9999px; }
.try-form.form-done .btn, .try-form.form-done .field, .try-form.form-done .field-row { display: none; }

/* Get your own paper: paper first, form beside or below it */
.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); grid-template-areas: "intro paper" "form paper"; column-gap: 56px; row-gap: 32px; align-items: start; }
.hero--page .try-grid { padding: 64px 64px 56px; }
.try-intro { grid-area: intro; }
.try-intro h1 { max-width: 12ch; }
.try-paper { grid-area: paper; position: sticky; top: 108px; max-width: 460px; justify-self: end; }
.try-formcard { grid-area: form; background: #FFFFFF; color: var(--ink); border-radius: 22px; padding: 28px; }
.try-formcard h2 { font-size: 26px; margin-bottom: 4px; }
.try-formcard .try-form { margin-top: 16px; }
.try-formcard .field { color: var(--ink); }
.try-formcard .field input, .try-formcard .field textarea { background: #F3F4F6; border-color: transparent; }
.try-formcard .field input:focus, .try-formcard .field textarea:focus { border-color: var(--ink); background: #FFFFFF; }
.try-formcard .form-fine, .try-formcard .form-status { color: #4A5160; }
.try-formcard .form-fine a { color: var(--ink); }
.try-formcard .try-after { border-top-color: #E3E5EA; }
.try-formcard .try-after p { color: #4A5160; }
.try-formcard :focus-visible { outline-color: var(--ink); }
.try-paper .paper-shot figcaption { color: var(--on-ink-muted); }
@media (max-width: 900px) {
  .try-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "paper" "form"; row-gap: 24px; }
  .hero--page .try-grid { padding: 44px 24px 24px; }
  .try-paper { position: static; max-width: 420px; justify-self: center; }
  .try-paper .dp-frame { max-height: 360px; }
  .try-paper .paper-shot { -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .try-paper .paper-shot figcaption { display: none; }
  .try-formcard { padding: 22px 18px; }
}
.hero--page .try-formcard .btn-ink { background: var(--ink); color: #FFFFFF; }

.story-list { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 8px; }
.story-list + p { margin-top: 16px; }