/* Hallmark · genre: modern-minimal · macrostructure: Split Studio · theme: Quiet (+ cobalt accent)
 * nav: N9 edge-aligned minimal · footer: Ft5 statement · enrichment: none (real screenshots only)
 * tone: utilitarian · anchor hue: 255 (accent 262) · design-system: design.md · designed-as-app
 * Shared by every page. Reads tokens from tokens.css — no raw colours or font names below.
 */

/* ── Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-head);
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display); line-height: 1.04; letter-spacing: var(--track-display); }
h2 { font-size: var(--text-2xl); line-height: 1.1; letter-spacing: var(--track-head); }
h3 { font-size: var(--text-lg); line-height: 1.2; letter-spacing: var(--track-head); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-accent-wash); }

.visually-hidden {
  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: var(--space-md); top: var(--space-md); z-index: var(--z-toast);
  background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-pill); transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* ── Language pairs ───────────────────────────────────── */
body:not(.show-es) .es { display: none !important; }
body.show-es .en { display: none !important; }

/* ── Layout ───────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
.section--sunk { background: var(--color-paper-2); }
.lede { color: var(--color-ink-2); max-width: var(--measure); }
.muted { color: var(--color-ink-2); }
.fine { font-size: var(--text-sm); color: var(--color-ink-3); }
.tabular { font-variant-numeric: tabular-nums; }

/* Split Studio — text half / proof half, alternating */
.split { display: grid; gap: var(--space-xl); align-items: start; }
.split > * { min-width: 0; }
.split__text { display: grid; gap: var(--space-md); align-content: start; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); }
  .split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--flip > :first-child { order: 2; }
  .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split__text--sticky { position: sticky; top: var(--space-xl); }
}

/* ── Logo ─────────────────────────────────────────────── */
.logo { display: inline-flex; color: var(--color-ink); text-decoration: none; border-radius: 4px; }
.logo svg { width: 10.1rem; height: auto; overflow: visible; }
.logo .logo__name { font-family: var(--font-display); font-weight: var(--weight-head); }
.logo .logo__sub { font-family: var(--font-mono); font-weight: var(--weight-body); }
.logo svg text { fill: currentColor; }
.logo .logo__cursor { fill: var(--color-accent); }

/* ── Nav · N9 edge-aligned minimal ────────────────────── */
.nav-edge {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-block: var(--space-lg);
}
.nav-edge__right { display: flex; align-items: center; gap: var(--space-sm); }
.lang {
  display: inline-flex; border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill); padding: var(--space-3xs);
}
.lang button {
  font: inherit; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em;
  min-width: 2.75rem; min-height: 2.25rem; padding-inline: var(--space-xs);
  border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--color-ink-2); cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.lang button:hover { color: var(--color-ink); }
.lang button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); }
@media (max-width: 26rem) {
  .logo svg { width: 8.25rem; }
  .nav-edge .btn--nav { display: none; }
}

/* ── Buttons · 8 states ───────────────────────────────── */
.btn {
  --btn-bg: var(--color-ink); --btn-fg: var(--color-on-ink); --btn-border: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 3rem; padding-inline: var(--space-lg);
  font: inherit; font-weight: 600; font-size: var(--text-base); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--btn-fg); background: var(--btn-bg);
  border: var(--rule-hair) solid var(--btn-border); border-radius: var(--radius-pill);
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { --btn-bg: var(--color-ink-2); --btn-border: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--color-ink); --btn-border: var(--color-ink); }
.btn--secondary:hover { --btn-bg: var(--color-paper-3); --btn-border: var(--color-ink); }
.btn--nav { min-height: 2.5rem; padding-inline: var(--space-md); font-size: var(--text-sm); }
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"] .btn__label { opacity: 0.7; }
.btn .spinner { display: none; }
.btn[data-state="loading"] .spinner { display: inline-block; }
.btn[data-state="error"] { --btn-bg: var(--color-poor); --btn-border: var(--color-poor); }
.btn[data-state="success"] { --btn-bg: var(--color-good); --btn-border: var(--color-good); }
.spinner {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link {
  color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em;
  text-decoration-thickness: 1px; font-weight: 600; white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.link:hover { color: var(--color-accent-2); text-decoration-thickness: 2px; }

/* ── Forms ────────────────────────────────────────────── */
.form { display: grid; gap: var(--space-md); }
.form__row { display: grid; gap: var(--space-md); }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label, .field .label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.field .hint { font-size: var(--text-sm); color: var(--color-ink-3); }
.input {
  width: 100%; min-height: 3rem; padding: var(--space-sm) var(--space-md);
  font: inherit; color: var(--color-ink); background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-ink-3); border-radius: var(--radius-input);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.input::placeholder { color: var(--color-ink-3); }
.input:hover { border-color: var(--color-ink-2); }
.input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-ink); }
.input:disabled { background: var(--color-paper-2); cursor: not-allowed; }
.input[aria-invalid="true"] { border-color: var(--color-poor); }
textarea.input { min-height: 7.5rem; resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-right: var(--space-xl);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
  background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.field-error { font-size: var(--text-sm); line-height: 1.4; color: var(--color-poor); min-height: 1lh; }
.form-alert {
  padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input);
  background: var(--color-poor-wash); color: var(--color-ink); font-size: var(--text-sm);
}
.form-done {
  display: grid; gap: var(--space-xs); padding: var(--space-lg);
  border-radius: var(--radius-card); background: var(--color-accent-wash);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hero preview form — C2 inline form-as-CTA, two fields */
.preview-form { display: grid; gap: var(--space-sm); }
.preview-form .btn { width: 100%; }
@media (min-width: 40rem) {
  .preview-form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .preview-form .btn { grid-column: 1 / -1; justify-self: start; width: auto; }
}

/* ── Hero ─────────────────────────────────────────────── */
.hero { padding-block: calc(var(--space-2xl) - 30px) var(--space-3xl); }
.hero__text { display: grid; gap: var(--space-lg); align-content: start; }
.hero__text h1 { max-width: 17ch; }
@media (min-width: 60rem) { .hero .split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.hero__note { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-3); }

/* Proof column: a real screenshot in a figure, hairline only */
.shot {
  margin: 0; display: grid; gap: var(--space-xs); min-width: 0;
}
.shot__frame {
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-paper-2); overflow: hidden; max-width: 100%;
}
.shot__frame--crop { aspect-ratio: 4 / 3; }
.shot__frame--crop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot__frame--scroll { height: min(70dvh, 40rem); overflow-y: auto; overscroll-behavior: contain; }
.shot figcaption { font-size: var(--text-sm); color: var(--color-ink-3); }

/* ── Scorecard (visitor's own site) ───────────────────── */
.scorecard { display: grid; gap: var(--space-lg); }
.scorecard__head { display: grid; gap: var(--space-2xs); }
.scorecard__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md) var(--space-lg); }
.meter { display: grid; gap: var(--space-2xs); }
.meter__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-xs); }
.meter__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.meter__score { font-family: var(--font-mono); font-size: var(--text-lg); font-variant-numeric: tabular-nums; line-height: 1; }
.meter__track { height: 6px; border-radius: var(--radius-pill); background: var(--color-rule); overflow: hidden; }
.meter__fill {
  height: 100%; width: 100%; border-radius: inherit; background: var(--color-ink-3);
  transform-origin: left; transform: scaleX(var(--score, 0));
  transition: transform var(--dur-long) var(--ease-out);
}
.meter__status { font-size: var(--text-sm); color: var(--color-ink-2); }
.meter[data-band="good"] .meter__fill { background: var(--color-good); }
.meter[data-band="warn"] .meter__fill { background: var(--color-warn); }
.meter[data-band="poor"] .meter__fill { background: var(--color-poor); }
.scorecard__wait { display: flex; gap: var(--space-sm); align-items: center; color: var(--color-ink-2); }

/* ── Steps (genuinely ordered) ────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }
.steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); }
.steps .steps__n {
  grid-row: span 2; font-family: var(--font-display); font-weight: var(--weight-head);
  font-size: var(--text-lg); line-height: 1.2; color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.steps p { color: var(--color-ink-2); max-width: var(--measure); }

/* ── Sample picker ────────────────────────────────────── */
.picker { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.picker button {
  font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  min-height: 2.5rem; padding-inline: var(--space-md); cursor: pointer;
  color: var(--color-ink-2); background: transparent;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.picker button:hover { color: var(--color-ink); border-color: var(--color-ink-3); }
.picker button[aria-pressed="true"] { color: var(--color-on-ink); background: var(--color-ink); border-color: var(--color-ink); }

/* ── Pricing · tabular plan rows ──────────────────────── */
.plans { display: grid; gap: var(--space-md); }
.plan {
  display: grid; gap: var(--space-md); padding-block: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.plan:first-child { border-top: 0; padding-top: 0; }
.plan--recommended {
  border: 0; border-radius: var(--radius-card); background: var(--color-accent-wash);
  padding: var(--space-xl) var(--space-lg);
}
.plan--recommended + .plan { border-top: 0; }
.plan__head { display: grid; gap: var(--space-2xs); }
.plan__tag { font-size: var(--text-sm); font-weight: 600; color: var(--color-accent-2); }
.plan__price { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; }
.plan__amount { font-family: var(--font-display); font-weight: var(--weight-head); font-size: var(--text-2xl); letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; line-height: 1; }
.plan__per { font-size: var(--text-sm); color: var(--color-ink-3); }
.plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.plan__list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: var(--space-xs); }
.plan__list li::before {
  content: ""; width: 0.45rem; height: 0.45rem; margin-top: 0.6em;
  background: var(--color-accent); border-radius: 1px;
}
.plan__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.plan__alt { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-ink-2); }
@media (min-width: 48rem) {
  .plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--space-xl); }
  .plan__head { grid-row: span 2; align-content: start; }
}

.ask-box {
  display: grid; gap: var(--space-sm); padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
}
.checkout-note {
  padding: var(--space-md); border-radius: var(--radius-input);
  background: var(--color-accent-wash); font-size: var(--text-sm);
}

/* ── Testimonials (hidden until real) ─────────────────── */
.quotes { display: grid; gap: var(--space-lg); }
@media (min-width: 48rem) { .quotes { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.quote { margin: 0; display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.quote p { font-size: var(--text-lg); line-height: 1.35; letter-spacing: var(--track-head); }
.quote cite { font-style: normal; font-size: var(--text-sm); color: var(--color-ink-2); }

/* ── FAQ ──────────────────────────────────────────────── */
.faq { display: grid; border-top: var(--rule-hair) solid var(--color-rule); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-md); min-height: 3.5rem; padding-block: var(--space-md);
  font-weight: 600; font-size: var(--text-base);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 0.75rem; height: 0.75rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
              linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform var(--dur-short) var(--ease-in-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--color-ink-2); }
.faq .faq__a { padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: var(--measure); }

/* ── Contact details ──────────────────────────────────── */
.contact-lines { display: grid; gap: var(--space-sm); margin: 0; }
.contact-lines dt { font-size: var(--text-sm); color: var(--color-ink-3); }
.contact-lines dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ── Footer · Ft5 statement ───────────────────────────── */
.foot { padding-block: var(--space-3xl) var(--space-xl); display: grid; gap: var(--space-xl); }
.foot__line { font-family: var(--font-display); font-weight: var(--weight-head); font-size: var(--text-2xl); line-height: 1.05; letter-spacing: var(--track-head); max-width: 20ch; }
.foot__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-md);
  padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule);
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.foot__links a { text-decoration: none; white-space: nowrap; }
.foot__links a:hover { color: var(--color-ink); text-decoration: underline; }

/* ── Long Document (welcome + legal) ──────────────────── */
.doc { max-width: 46rem; margin-inline: auto; padding-inline: var(--page-gutter); padding-block: var(--space-xl) var(--space-3xl); display: grid; gap: var(--space-lg); }
.doc h1 { font-size: var(--text-2xl); }
.doc h2 { font-size: var(--text-lg); margin-top: var(--space-lg); }
.doc p, .doc li { color: var(--color-ink-2); }
.doc ul, .doc ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-2xs); }
.doc a:not(.btn) { color: var(--color-accent); text-underline-offset: 0.2em; }

/* ── Reduced motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; animation-iteration-count: 1 !important; }
  .spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
  .btn:active { transform: none; }
}
@media (pointer: coarse) { .btn, .picker button, .lang button { min-height: 3rem; } }

/* ── Small utilities ──────────────────────────────────── */
.stack-top { margin-top: var(--space-xl); }
.checkout-note:not([hidden]) + .form { margin-top: var(--space-md); }
.scorecard__shot { max-width: 15rem; margin-inline: auto; }

/* ── Legal pages (Long Document) ──────────────────────── */
.legal-wrap { max-width: 46rem; margin-inline: auto; padding-inline: var(--page-gutter); padding-block: var(--space-xl) var(--space-3xl); }
.legal { display: grid; gap: var(--space-md); }
.legal h1 { font-size: var(--text-2xl); }
.legal h2 { font-size: var(--text-lg); margin-top: var(--space-xl); }
.legal p, .legal li { color: var(--color-ink-2); }
.legal ul, .legal ol { margin: 0; padding-left: 1.25rem; display: grid; gap: var(--space-xs); }
.legal a { color: var(--color-accent); text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.legal strong { color: var(--color-ink); font-weight: 600; }
.legal .lead { font-size: var(--text-base); color: var(--color-ink); }
.legal-card { padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.legal .updated { font-size: var(--text-sm); color: var(--color-ink-3); margin-top: var(--space-xl); }

/* Hero proof image: the 4:3 crop plus 170px of extra height at the bottom.
   Uses container units so the extra height is exact at every width. */
#hero-proof .shot { container-type: inline-size; }
@supports (height: 1cqi) {
  #hero-proof .shot__frame--crop { aspect-ratio: auto; height: calc(75cqi + 170px); }
}

/* Hero proof image auto-scroll: the image sits at natural height inside the
   cropped frame; site.js glides it up once on load (Web Animations API). */
#hero-proof .shot__frame--crop img { height: auto; object-fit: initial; will-change: auto; }
.shot figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.shot__toggle {
  font: inherit; font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap;
  background: none; border: 0; padding: var(--space-2xs) 0; min-height: 2rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em;
}
.shot__toggle:hover { color: var(--color-ink); }

/* Message buttons (text / WhatsApp) */
.msg-buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.ask-box__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }

/* Orphan control: browsers that support it rebalance the last lines of prose;
   every block also ends in a non-breaking space between its last two words. */
p, li, dd, dt, summary, figcaption, label, blockquote { text-wrap: pretty; }

/* Footer statement: two sentences per line on wider screens, one per line on phones. */
.foot__line { max-width: none; }
.foot__pair { display: block; }
.foot__beat { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .foot__beat { display: block; }
  .foot__line { font-size: clamp(var(--text-lg), 9vw, var(--text-2xl)); }
}

/* Desktop-only line breaks, placed by hand in specific copy. */
br.br-desk { display: none; }
@media (min-width: 64rem) { br.br-desk { display: inline; } }
/* Custom-project row: text spans both columns so it reads as one short paragraph. */
@media (min-width: 48rem) { .plan--wide .plan__head { grid-column: 1 / -1; grid-row: auto; } .plan--wide .plan__head p { max-width: var(--measure); } }
br.br-wide { display: none; }
@media (min-width: 75rem) { br.br-wide { display: inline; } }

/* Rebuild monthly note: give it the full row so it stays on one line. */
@media (min-width: 48rem) { .plan__alt { grid-column: 1 / -1; } }
@media (min-width: 22.5rem) { .plan__alt .fine { white-space: nowrap; } }
@media (max-width: 39.99rem) { .plan--recommended { padding-inline: var(--space-md); } }

/* ── Pay on phone / share sheet ───────────────────────── */
.linkbtn {
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2);
  background: none; border: 0; padding: var(--space-2xs) 0; min-height: 2.5rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap;
}
.linkbtn:hover { color: var(--color-ink); }
.pay-sheet {
  width: min(100% - 2 * var(--space-md), 46rem); max-height: calc(100dvh - 2 * var(--space-md));
  padding: 0; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-sheet);
}
.pay-sheet::backdrop { background: var(--color-scrim); }
.pay-sheet[open] { animation: sheet-in var(--dur-short) var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.pay-sheet__inner { position: relative; display: grid; gap: var(--space-lg); padding: var(--space-xl); }
.pay-sheet h2 { font-size: var(--text-lg); padding-right: var(--space-xl); }
.pay-sheet__x {
  position: absolute; top: var(--space-md); right: var(--space-md); width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; color: var(--color-ink-2);
  transition: background-color var(--dur-micro) var(--ease-out);
}
.pay-sheet__x:hover { background: var(--color-paper-3); color: var(--color-ink); }
.pay-sheet__x span, .pay-sheet__x span::after {
  position: absolute; left: 50%; top: 50%; width: 1rem; height: 2px; background: currentColor; content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}
.pay-sheet__x span::after { transform: translate(-50%, -50%) rotate(90deg); }
.pay-sheet__opts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pay-sheet__opts:empty { display: none; }
.pay-sheet__opts button {
  font: inherit; font-size: var(--text-sm); font-weight: 600; white-space: nowrap; cursor: pointer;
  min-height: 2.5rem; padding-inline: var(--space-md); border-radius: var(--radius-pill);
  border: var(--rule-hair) solid var(--color-rule); background: transparent; color: var(--color-ink-2);
}
.pay-sheet__opts button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); }
.pay-sheet__body { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 40rem) { .pay-sheet__body { grid-template-columns: auto minmax(0, 1fr); } }
.pay-sheet__qr { margin: 0; display: grid; gap: var(--space-sm); justify-items: center; max-width: 13rem; }
.pay-sheet__qr img { width: 10.625rem; height: 10.625rem; image-rendering: pixelated; padding: var(--space-xs); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); }
.pay-sheet__qr figcaption { font-size: var(--text-sm); color: var(--color-ink-2); text-align: center; }
.pay-sheet__send { display: grid; gap: var(--space-sm); min-width: 0; }
.pay-sheet__item { font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-sheet__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pay-sheet__actions .btn { min-height: 2.75rem; padding-inline: var(--space-md); font-size: var(--text-sm); }
.pay-sheet__url { overflow-wrap: anywhere; user-select: all; }
/* On touch phones the visitor is already on the device that pays: hide the QR. */
@media (hover: none) and (pointer: coarse) { .pay-sheet__qr { display: none; } }
@media (max-width: 39.99rem) { .pay-sheet__qr { display: none; } .pay-sheet__inner { padding: var(--space-lg); } }
.pay-sheet .t-phone { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 39.99rem) {
  .pay-sheet .t-desk { display: none; }
  .pay-sheet .t-phone { display: inline; }
}

/* Homepage footer follows a full section; drop its top padding so the gap is the section's own spacing. */
.foot--flush { padding-top: 0; }

/* Hero lede on desktop: a slightly narrower measure balances the four lines (EN and ES). */
@media (min-width: 60rem) { .hero .lede { max-width: 30rem; } }
@media (min-width: 75rem) { body:not(.show-es) .hero .lede { max-width: none; } }


/* Care plan: billing note sits on its own line under the price (both languages). */
.plan__per--below { flex-basis: 100%; }

/* Tax note under the plans: halve the space above it (56px → 28px). */
.plans > .fine { margin-top: calc(-1 * (var(--space-lg) + var(--space-2xs))); }
/* Footer statement: 5px between the two lines (pairs). */
.foot__pair + .foot__pair { margin-top: calc(var(--space-2xs) + 1px); }
/* Homepage footer: no rule above the logo row. */
.foot--flush .foot__meta { border-top: 0; }

/* Package bullets: tighter leading inside an item, a bit more space between items,
   so a two-line item reads as one bullet. */
.plan__list { gap: var(--space-xs); }
.plan__list li { line-height: 1.35; }
.plan__list li::before { margin-top: 0.47em; }

/* ── Client work: one featured case + two supporting ─── */
.work-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.cases { display: grid; gap: var(--space-xl) var(--space-lg); }
@media (min-width: 48rem) {
  .cases { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; }
  .case--feature { grid-row: span 2; }
}
.case { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.case__shot {
  display: block; overflow: hidden; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
  background: var(--color-paper-2); aspect-ratio: 16 / 10;
}
.case--feature .case__shot { aspect-ratio: 4 / 3; }
.case__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform var(--dur-long) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.case__shot:hover img { transform: scale(1.015); } }
.case__shot--empty { display: grid; place-items: center; padding: var(--space-lg); text-align: center; border-style: dashed; }
.case__meta { display: grid; gap: var(--space-2xs); }
.case__meta h3 { font-size: var(--text-lg); }
.case--feature .case__meta p.muted { max-width: var(--measure); }
/* Every billing note ("one-time", "per month…") sits on its own line under the price. */
.plan__price .plan__per { flex-basis: 100%; }
/* Section that follows another plain section: drop its top padding so the gap isn't doubled. */
.section--flush-top { padding-top: 0; }

/* ── Language dropdown ────────────────────────────────── */
.lang-switch { position: relative; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 2.5rem; padding-inline: var(--space-sm) var(--space-sm);
  font: inherit; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em;
  color: var(--color-ink); background: transparent; cursor: pointer;
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.lang-toggle:hover { background: var(--color-paper-3); border-color: var(--color-ink-3); }
.lang-toggle__globe { width: 1rem; height: 1rem; }
.lang-toggle__chev { width: 0.75rem; height: 0.75rem; transition: transform var(--dur-short) var(--ease-in-out); }
.lang-switch.is-open .lang-toggle { border-color: var(--color-ink); }
.lang-switch.is-open .lang-toggle__chev { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + var(--space-xs)); right: 0; z-index: var(--z-dropdown);
  display: none; flex-direction: column; gap: var(--space-3xs); min-width: 11rem; padding: var(--space-2xs);
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card); box-shadow: var(--shadow-sheet);
}
.lang-switch.is-open .lang-menu { display: flex; animation: menu-in var(--dur-short) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lang-opt {
  display: flex; align-items: center; gap: var(--space-sm); width: 100%;
  min-height: 2.5rem; padding-inline: var(--space-sm); border-radius: var(--radius-input);
  font: inherit; font-size: var(--text-sm); font-weight: 600; text-align: left; white-space: nowrap;
  color: var(--color-ink-2); background: none; border: 0; text-decoration: none; cursor: pointer;
}
.lang-opt__code { min-width: 1.6rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-ink-3); }
.lang-opt:hover { background: var(--color-paper-3); color: var(--color-ink); }
.lang-opt.is-active { background: var(--color-ink); color: var(--color-on-ink); }
.lang-opt.is-active .lang-opt__code { color: var(--color-on-ink); }
@media (pointer: coarse) { .lang-toggle, .lang-opt { min-height: 3rem; } }
/* Closing CTA line: even out the two lines when it wraps (Vietnamese, phones). */
#cta-title ~ .lede { text-wrap: balance; }
/* Vietnamese hero lede: measures chosen so the last line isn't a short fragment. */
@media (min-width: 60rem) { html[data-page-lang="vi"] .hero .lede { max-width: 27rem; } }
@media (min-width: 75rem) { html[data-page-lang="vi"] .hero .lede { max-width: 32rem; } }

/* ── "How Google sees your site" panel (inside the scorecard) ── */
.seo-panel { display: grid; gap: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.seo-panel__head { display: grid; gap: var(--space-3xs); }
.seo-panel h3 { font-size: var(--text-lg); }
.seo-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs) var(--space-lg); }
@media (min-width: 40rem) { .seo-checks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.seo-check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); line-height: 1.35; }
.seo-check__mark { width: 1.25rem; height: 1.25rem; border-radius: 50%; padding: 0.15rem; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seo-check[data-pass="true"] .seo-check__mark { stroke: var(--color-on-ink); background: var(--color-good); }
.seo-check[data-pass="false"] .seo-check__mark { stroke: var(--color-on-ink); background: var(--color-poor); }
.seo-check__label { color: var(--color-ink); min-width: 0; }
.seo-check__status { font-weight: 600; color: var(--color-ink-3); white-space: nowrap; }
.seo-check[data-pass="false"] .seo-check__status { color: var(--color-poor); }
/* Long footer beats may wrap on narrow phones instead of overflowing. */
.foot__beat--wrap { white-space: normal; }
@media (max-width: 39.99rem) {
  /* The long first sentence flows as one balanced sentence; short beats still stack. */
  .foot__pair:has(.foot__beat--wrap) .foot__beat { display: inline; }
  .foot__pair:has(.foot__beat--wrap) { text-wrap: balance; }
}