/* Shared components — header (N11 mega-menu), mobile sheet, screenshot slot,
 * code block, FAQ, footer (Ft3 index). Used by every page. */

/* ═════════════════════════ Header ═════════════════════════ */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  background: var(--color-paper);
  color: var(--color-ink);
  border-block-end: var(--rule-width) solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled,
.site-header:has(.mega.is-open) { border-block-end-color: var(--color-rule); }

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 4rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  white-space: nowrap;
}
/* Logo mark (icons/wasparks-icon.svg) + live-text wordmark in the logo's face.
 * The supplied lockup SVGs set the name as <text> in Space Grotesk, which an <img>
 * cannot load — so the mark is the image and the name is real, indexable text. */
.wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
.wordmark__mark { width: 1.6em; height: auto; flex: none; }

.primary-nav { display: none; }
.primary-nav__list { display: flex; align-items: center; gap: var(--space-3xs); }

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: 2.5rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--color-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.primary-nav__link:hover,
.primary-nav__link[aria-expanded="true"] { background: var(--color-paper-2); }
.primary-nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-accent); }

.caret {
  width: 0.4rem; height: 0.4rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease-out);
}
[aria-expanded="true"] > .caret { transform: rotate(225deg) translateY(-1px); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-inline-start: auto;
}
.site-header__signin {
  display: none;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  padding: var(--space-2xs) var(--space-xs);
}
.site-header__signin:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Below 60rem the header shows wordmark + menu only. */
.site-header__actions .btn { display: none; }

@media (min-width: 60rem) {
  .primary-nav { display: block; }
  .site-header__signin,
  .site-header__actions .btn { display: inline-flex; }
  .nav-sheet { display: none; }
}

/* ── Mega panels ───────────────────────────────────────── */
.mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--z-dropdown);
  background: var(--color-paper);
  border-block-end: var(--rule-width) solid var(--color-rule);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
.mega.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s;
}

.mega__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg) var(--space-xl);
}
.mega__inner--solutions { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr); }

.mega__col { display: grid; align-content: start; gap: var(--space-3xs); }
.mega__head { margin-block-end: var(--space-2xs); }

.mega-link {
  display: grid;
  gap: 0.1rem;
  padding: var(--space-2xs) var(--space-xs);
  margin-inline: calc(var(--space-xs) * -1);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.mega-link:hover { background: var(--color-paper-2); }
.mega-link__title {
  font-weight: var(--weight-strong);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.mega-link__desc { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }

.mega__feature {
  display: grid;
  align-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  color: var(--color-ink);
  border: var(--rule-width) solid var(--color-rule);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.mega__feature:hover { border-color: var(--color-control); }
.mega__feature-title { font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--weight-display); letter-spacing: -0.02em; }
.mega__feature-desc { font-size: var(--text-sm); color: var(--color-muted); }
.mega__feature .code { margin: 0; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sticky) - 1);
  background: var(--color-scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nav-scrim.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}

/* ── Mobile sheet (works without JS: <details>) ────────── */
.nav-sheet { margin-inline-start: var(--space-2xs); }
.nav-sheet__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-control);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}
.nav-sheet__toggle::-webkit-details-marker { display: none; }
.nav-sheet[open] .nav-sheet__toggle { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); }

.nav-sheet__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-paper);
  border-block-end: var(--rule-width) solid var(--color-rule);
  box-shadow: var(--shadow-2);
  padding: var(--space-sm) var(--gutter) var(--space-lg);
  display: grid;
  gap: var(--space-2xs);
}
.nav-sheet__group { border-block-end: var(--rule-width) solid var(--color-rule); }
.nav-sheet__group > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3rem;
  font-weight: var(--weight-strong);
  list-style: none;
  cursor: pointer;
}
.nav-sheet__group > summary::-webkit-details-marker { display: none; }
.nav-sheet__group[open] > summary .caret { transform: rotate(225deg) translateY(-1px); }
.nav-sheet__group ul { display: grid; gap: var(--space-3xs); padding-block-end: var(--space-sm); }
.nav-sheet__group a,
.nav-sheet__link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--text-base);
}
.nav-sheet__group a { color: var(--color-muted); }
.nav-sheet__link { font-weight: var(--weight-strong); border-block-end: var(--rule-width) solid var(--color-rule); }
.nav-sheet__cta { display: grid; gap: var(--space-2xs); padding-block-start: var(--space-sm); }
.nav-sheet__cta .btn { width: 100%; }

/* ═════════════════════ Screenshot slot ═════════════════════ *
 * Until real captures land, .shot__slot shows what goes here.
 * Swap the slot for: <img src width height alt loading decoding>. */
.shot { display: grid; gap: var(--space-sm); min-width: 0; }

.shot__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: var(--rule-width) solid var(--color-rule);
  background: var(--color-paper-2);
}
.shot__frame > img { width: 100%; height: auto; }

.shot__slot {
  display: grid;
  place-content: center;
  gap: var(--space-2xs);
  padding: var(--space-lg);
  text-align: center;
  aspect-ratio: 16 / 10;
  background-color: var(--color-paper-2);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    var(--color-paper-3) 14px 15px
  );
}
.shot--3x2 .shot__slot { aspect-ratio: 3 / 2; }
.shot__slot-title { font-weight: var(--weight-strong); max-width: 32ch; margin-inline: auto; }
.shot__slot-spec { font-size: var(--text-xs); color: var(--color-muted); max-width: none; }

.shot figcaption { font-size: var(--text-sm); color: var(--color-muted); }

/* ═════════════════════════ Code ═════════════════════════ *
 * Typographic frame (rule + label), never fake window chrome. */
.code {
  min-width: 0;
  border-block-start: var(--rule-width) solid var(--color-rule);
  border-block-end: var(--rule-width) solid var(--color-rule);
}
.code__label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.code pre {
  overflow-x: auto;
  padding-block: var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.65;
  tab-size: 2;
}
.code .tok-k { color: var(--color-accent-text); }
.code .tok-c { color: var(--color-muted); }

/* ═════════════════════════ FAQ ═════════════════════════ */
.faq { display: grid; border-block-start: var(--rule-width) solid var(--color-rule); }
.faq__item { border-block-end: var(--rule-width) solid var(--color-rule); }
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: var(--leading-snug);
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 0.6rem; height: 0.6rem;
  border-inline-end: 2px solid var(--color-ink);
  border-block-end: 2px solid var(--color-ink);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq__item[open] .faq__q::after { transform: rotate(225deg); }
.faq__q:hover { color: var(--color-accent-text); }
.faq__a { padding-block-end: var(--space-md); color: var(--color-muted); }
.faq__a p + p { margin-block-start: var(--space-2xs); }

/* ═════════════════════════ Footer · Ft3 index + mast wordmark ═════════════════════════ *
 * Night band (data-theme="dark" on <footer>). Link index on top, then the brand set huge
 * across the full container width and cropped by the page's bottom edge. */
.site-footer {
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-2xl);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-sm);
  overflow: clip;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg);
}
.site-footer__brand { grid-column: 1 / -1; display: grid; gap: var(--space-xs); align-content: start; }
.site-footer__brand p { color: var(--color-muted); max-width: 34ch; }
.site-footer__address { font-style: normal; color: var(--color-muted); line-height: 1.7; }
.site-footer__address a:hover { color: var(--color-accent-text); }
.site-footer__col h2 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
  margin-block-end: var(--space-sm);
}
.site-footer__col ul { display: grid; gap: var(--space-2xs); }
.site-footer__col a { white-space: nowrap; }
.site-footer__col a:hover { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 0.2em; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-width) solid var(--color-rule);
  color: var(--color-muted);
}
.site-footer__base p { max-width: none; }

/* The mast: fits the container width exactly via container query units. */
.site-footer__mast {
  container-type: inline-size;
  margin-block-start: var(--space-xl);
}
.site-footer__mast-word {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22cqi;
  line-height: 0.8;
  letter-spacing: -0.055em;
  color: var(--color-paper-3);
  margin-block-end: -0.12em;           /* cropped by the footer's bottom edge */
  white-space: nowrap;
  user-select: none;
}
.site-footer__mast-word .spark {
  width: 0.13em;
  height: 0.13em;
  margin-inline-start: 0.04em;
  margin-block-start: 0.04em;
}

@media (min-width: 40rem) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
 * Shared page sections — used by home, about, pricing, contact.
 * ════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════ Section rhythm (shared) ═════════════════════════ */
.section { padding-block: var(--space-3xl); }
.section__head { display: grid; gap: var(--space-sm); margin-block-end: var(--space-xl); max-width: 46rem; }
.section__head h2 { max-width: 22ch; }

/* ═════════════════════════ Metric tiles (shared) ═════════════════════════ */
.metric { display: grid; gap: var(--space-2xs); align-content: start; padding-block-start: var(--space-sm); border-block-start: 2px solid var(--color-ink); }
.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-display);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.metric__value--word { color: var(--color-accent-hover); }
.metric__label { font-size: var(--text-sm); color: var(--color-muted); max-width: 30ch; }

/* ═════════════════════════ Founder & company ═════════════════════════ */
.maker { padding-block: var(--space-3xl) var(--space-2xl); }
.maker__grid { display: grid; gap: var(--space-xl); align-items: start; }
.maker__intro { display: grid; gap: var(--space-sm); }
.maker__quote {
  margin: var(--space-sm) 0 0;
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-spark);
  font-size: var(--text-md);
  line-height: 1.55;
}
.maker__quote p { max-width: 58ch; }

.maker__card {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  border: var(--rule-width) solid var(--color-rule);
}
.maker__person { display: flex; align-items: center; gap: var(--space-md); margin: 0; }
.maker__photo {
  width: 5rem; height: 5rem;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}
.maker__photo--initials {
  display: grid;
  place-items: center;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
}
.maker__person figcaption { display: grid; gap: 0.15rem; }
.maker__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-display); letter-spacing: -0.02em; }
.maker__role { color: var(--color-muted); }
.maker__facts { display: grid; font-size: var(--text-sm); }
.maker__facts div {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  border-block-start: var(--rule-width) solid var(--color-rule);
}
.maker__facts dt { color: var(--color-muted); }
.maker__facts dd { font-weight: 500; }
.maker__more { display: flex; flex-wrap: wrap; gap: var(--space-md); }

@media (min-width: 60rem) {
  .maker__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
}

/* ═════════════════════════ FAQ ═════════════════════════ */
.faq-section { padding-block: var(--space-2xl); }
@media (min-width: 60rem) {
  .faq-section__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
  .faq-section__grid .section__head { position: sticky; inset-block-start: 6rem; }
}

/* ═════════════════════════ Closing CTA ═════════════════════════ */
.closer { padding-block: var(--space-2xl) 0; }
.closer__inner {
  display: grid;
  gap: var(--space-md);
  padding-block-start: var(--space-xl);
  border-block-start: 2px solid var(--color-ink);
}
.closer h2 { font-size: var(--text-display-s); max-width: 16ch; }
.closer p { color: var(--color-muted); }
.closer__action { display: grid; gap: var(--space-sm); justify-items: start; }
.closer__btns { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (min-width: 60rem) {
  .closer__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .closer__action { display: grid; gap: var(--space-sm); justify-items: start; }
}

/* ═════════════════════════ Inner-page hero (night band) ═════════════════════════ *
 * Every page except home opens with this. <section class="page-hero" data-theme="dark">. */
.page-hero {
  background: var(--color-paper);
  color: var(--color-ink);
  padding-block: var(--space-xl) var(--space-3xl);
}
.page-hero__inner { display: grid; gap: var(--space-md); justify-items: start; }
.page-hero h1 { font-size: clamp(2.25rem, 3.4vw + 1rem, 3.75rem); max-width: 18ch; }
.page-hero__lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-muted); max-width: 56ch; }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-start: var(--space-2xs); }
@media (min-width: 60rem) {
  .page-hero { padding-block: var(--space-2xl) var(--space-4xl); }
}

/* Breadcrumbs (mirrors BreadcrumbList JSON-LD) */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; }
.breadcrumb li + li::before { content: "/"; color: var(--color-rule); }
.breadcrumb a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.breadcrumb [aria-current="page"] { color: var(--color-ink); }

/* ═════════════════════════ Card grid (shared) ═════════════════════════ */
.cards { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.card {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  min-width: 0;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
  border: var(--rule-width) solid var(--color-rule);
  color: var(--color-ink);
}
.card h3 { font-size: var(--text-md); letter-spacing: -0.02em; }
.card p { font-size: var(--text-sm); color: var(--color-muted); }
.card__mark { width: 0.6rem; height: 0.6rem; border-radius: 1.5px; background: var(--color-spark); transform: rotate(45deg); }
a.card { transition: border-color var(--dur-fast) var(--ease-out); }
a.card:hover { border-color: var(--color-control); }
@media (min-width: 40rem) { .cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards { gap: var(--space-md); }
}

/* ═════════════════════════ Form fields (shared) ═════════════════════════ *
 * States: default · hover · focus-visible · invalid (after interaction) · disabled.
 * Border width never changes; focus uses outline; helper slot reserves its line. */
.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: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: var(--space-3xs); align-content: start; min-width: 0; }
.field__label { font-size: var(--text-sm); font-weight: var(--weight-strong); }
.field__label .field__opt { font-weight: var(--weight-body); color: var(--color-muted); }
.field__input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  border: var(--rule-width) solid var(--color-control);
  background: var(--color-paper);
  color: var(--color-ink);
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
textarea.field__input { min-height: 8rem; resize: vertical; line-height: 1.5; }
select.field__input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; padding-inline-end: var(--space-xl); }
.field__input::placeholder { color: var(--color-muted); }
.field__input:hover { border-color: var(--color-ink); }
.field__input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-focus); }
.field__input:user-invalid { border-color: var(--color-danger); background: var(--color-paper-2); }
.field__input:disabled { opacity: 0.55; cursor: not-allowed; }
.field__help { min-height: 1lh; font-size: var(--text-xs); color: var(--color-muted); }
.field__input:user-invalid + .field__help { color: var(--color-danger); }
.form__note { font-size: var(--text-xs); color: var(--color-muted); }

/* ═════════════════════════ Spam guard: phone control + "delivery ticks" chip ═════════════════════════ *
 * Markup: inc/form-markup.php · behaviour: js/form-guard.js (shared by /contact/ and the microsites). */

/* Country select + number read as one field. Country is text ("IN +91"), never flag emoji. */
/* Scoped to the form control: the template checker's phone preview (tool.css) reuses the .phone name. */
.phone:has(> .phone__cc) { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.phone .field__input:focus-visible,
.phone .field__input:hover { position: relative; z-index: 1; }
.phone__cc {
  width: 7.75rem; /* fits the longest label, e.g. "AE +971" */
  padding-inline: var(--space-xs) 1.75rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.65rem) 55%;
  text-overflow: clip;
}
.phone__num {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  margin-inline-start: calc(var(--rule-width) * -1);
}
.phone:has(.phone__num[aria-invalid="true"]) .phone__cc { border-color: var(--color-danger); }
.field:has(.phone__num[aria-invalid="true"]) .field__help { color: var(--color-danger); }

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); min-width: 0; }
.form .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Status chip, styled like WhatsApp delivery ticks. Hidden until JS runs. */
.tick-wrap { display: grid; gap: var(--space-2xs); min-width: 0; }
.tick {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-muted);
}
.tick__icon { flex: none; overflow: visible; color: var(--color-control); }
.tick__icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.tick__b { opacity: 0; }
.tick[data-state="checking"] .tick__icon { animation: tick-pulse 1.4s ease-in-out infinite; }
.tick[data-state="verified"] { color: var(--color-ink); }
.tick[data-state="verified"] .tick__icon { color: var(--color-spark); }
.tick[data-state="verified"] .tick__a { animation: tick-draw 0.35s var(--ease-out) both; }
.tick[data-state="verified"] .tick__b { opacity: 1; animation: tick-draw 0.35s var(--ease-out) 0.18s both; }
.tick[data-state="error"] { color: var(--color-ink); }
.tick[data-state="error"] .tick__icon { color: var(--color-warning); }
.tick__retry {
  min-height: 2.75rem;
  padding: 0 var(--space-2xs);
  border: 0;
  background: none;
  font: inherit;
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.tick__retry:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; border-radius: var(--radius-sm); }
.tick__nojs { font-size: var(--text-sm); color: var(--color-danger); }

/* Cloudflare's checkbox only appears when it is unsure; until then the slot takes no space. */
.tick__slot { height: 0; overflow: hidden; }
.tick-wrap.is-interactive .tick__slot {
  height: auto;
  max-width: 100%;
  overflow-x: auto;
  padding: var(--space-2xs);
  border: var(--rule-width) solid var(--color-control);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}

@keyframes tick-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes tick-pulse { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) {
  .tick__icon, .tick__a, .tick__b { animation: none !important; }
}

.section__more { margin-block-start: var(--space-lg); }
.section__more + .section__more { margin-block-start: var(--space-xs); }

/* ═════════════════════════ Copy button (shared) ═════════════════════════ *
 * Silent success: label swaps to "Copied" for ~1.8s. JS un-hides it only when the Clipboard API exists. */
.copy {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-control);
  background: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.copy[hidden] { display: none; }
.copy:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
.copy:active { transform: translateY(1px); }
.copy.is-done { border-color: var(--color-success); color: var(--color-success); }
@media (pointer: coarse) { .copy { min-height: 2.75rem; } }

/* ═════════════════════════ Chip button (shared) ═════════════════════════ */
.chip-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-control);
  background: var(--color-paper);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.chip-btn:hover { border-color: var(--color-ink); background: var(--color-paper-2); }
.chip-btn:active { transform: translateY(1px); }
.chip-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.chip-btn[hidden] { display: none; }
@media (pointer: coarse) { .chip-btn { min-height: 2.75rem; } }

/* ═════════════════════════ Long document (shared: legal pages, blog posts) ═════════════════════════ *
 * Sticky "on this page" + reading bar (js/reading.js), body set for long reading, copy-link per section. */
.ldoc { display: grid; gap: var(--space-xl); align-items: start; }
.ldoc > * { min-width: 0; }

.ltoc {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
}
.ltoc__title { font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.ltoc__bar { height: 3px; border-radius: var(--radius-pill); background: var(--color-paper-3); overflow: hidden; }
.ltoc__bar span {
  display: block;
  height: 100%;
  background: var(--color-accent-text);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform var(--dur-fast) linear;
}
.ltoc ol { display: grid; }
.ltoc__link {
  display: block;
  padding: var(--space-3xs) 0 var(--space-3xs) var(--space-sm);
  border-inline-start: 2px solid transparent;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ltoc__link:hover { color: var(--color-ink); }
.ltoc__link[aria-current="true"] { color: var(--color-ink); border-inline-start-color: var(--color-ink); font-weight: var(--weight-strong); }
.ltoc__print { justify-self: start; }

@media (min-width: 64rem) {
  .ldoc { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--space-3xl); }
  .ltoc { position: sticky; inset-block-start: 6rem; max-height: calc(100vh - 8rem); overflow-y: auto; background: none; padding: 0 0 0 var(--space-3xs); }
}

/* Body typography — set for long reading */
.ldoc__body { display: grid; gap: var(--space-md); max-width: 68ch; }
.ldoc__body p, .ldoc__body li { font-size: var(--text-base); line-height: 1.75; color: var(--color-ink); max-width: none; }
.ldoc__body strong { font-weight: var(--weight-strong); }
.ldoc__body ul { display: grid; gap: var(--space-xs); padding-inline-start: 0; list-style: none; }
.ldoc__body ol { display: grid; gap: var(--space-xs); padding-inline-start: var(--space-lg); }
.ldoc__body ol li { padding-inline-start: var(--space-2xs); }
.ldoc__body ol li::before { content: none; }
.ldoc__body li { position: relative; padding-inline-start: var(--space-lg); }
.ldoc__body li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.2rem;
  inset-block-start: 0.7em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  background: var(--color-accent-text);
  transform: rotate(45deg);
}

.lsec { display: grid; gap: var(--space-sm); padding-block-start: var(--space-lg); border-block-start: var(--rule-width) solid var(--color-rule); scroll-margin-block-start: 6rem; }
.lsec:first-child { border-block-start: 0; padding-block-start: 0; }
.lsec h2 { position: relative; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: var(--leading-snug); }
.lsec__anchor {
  position: absolute;
  inset-inline-start: -1.4em;
  padding-inline-end: 0.4em;
  color: var(--color-muted);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lsec__anchor[hidden] { display: none; }
.lsec h2:hover .lsec__anchor, .lsec__anchor:focus-visible { opacity: 1; }
.lsec__anchor:hover { color: var(--color-accent-text); }
.lsec__anchor[data-copied]::after {
  content: "Link copied";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -1.6rem;
  padding: 0.1rem var(--space-2xs);
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-body);
  letter-spacing: 0;
  white-space: nowrap;
}
.lsec__anchor[data-copied] { opacity: 1; }
@media (max-width: 40rem) { .lsec__anchor { display: none; } }

.lcontact {
  display: grid;
  gap: 0;
  margin-block-start: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-paper-2);
}
.lcontact__item { display: grid; gap: var(--space-3xs); padding-block: var(--space-sm); }
.lcontact__item + .lcontact__item { border-block-start: var(--rule-width) solid var(--color-rule); }
.lcontact dt { font-size: var(--text-xs); font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); }
.lcontact dd { font-size: var(--text-base); }

@media (prefers-reduced-motion: reduce) { .ltoc__bar span { transition: none; } }