/* ============================================================
   LOOPZ MARKETING WEBSITE — COMPONENT & SECTION STYLES
   Class markup contract lives in templates/website/. Specs come
   from the design export (docs/website-design/): hairline
   borders do all separation, one ink band per page, pill
   buttons, no gradients, no scroll effects. Mono (IBM Plex) is
   reserved for numeric values and code; labels use the body font.
   ============================================================ */

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, .display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  margin: 0;
}
h2, .display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  letter-spacing: var(--track-display);
  margin: 0;
}
h3, .display-3 {
  font-family: var(--font-display);
  font-size: var(--fs-display-3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
  margin: 0;
}
h4, .title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  margin: 0;
}
p { margin: 0 0 12px 0; }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.5; }
.body-sm { font-size: var(--fs-body-sm); }
.caption { font-size: var(--fs-caption); color: var(--text-3); }
.muted { color: var(--text-muted); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--text-2);
}
.eyebrow--invert { color: var(--text-on-ink-2); }

.caption-label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-3);
}

.money, code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.94em; }
.money-large { font-family: var(--font-mono); font-size: 24px; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; display: inline-block;
  line-height: 1; letter-spacing: normal; text-transform: none;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  -webkit-font-smoothing: antialiased; font-variation-settings: "wght" 300;
  font-size: 24px;
}

.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 15px;
  padding: 10px 22px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid transparent; transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn .material-symbols-outlined { font-size: 19px; }
/* In-flight state (setBusy() in site.js): the label keeps its space but goes transparent, and a
   ring spins in its place. Track/ink colours come from the variant rules below. */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid var(--btn-spin-track); border-top-color: var(--btn-spin-ink);
  animation: btn-spin 700ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation-duration: 1.6s; } }
.btn--sm { font-size: 14px; padding: 6px 16px; }
.btn--sm .material-symbols-outlined { font-size: 18px; }
.btn--lg { font-size: 16px; padding: 14px 30px; }
.btn--lg .material-symbols-outlined { font-size: 20px; }
.btn--full { width: 100%; }

.btn--contained { background: var(--primary); color: var(--text-on-primary); --btn-spin-track: rgba(255, 255, 255, 0.35); --btn-spin-ink: var(--text-on-primary); }
.btn--contained:hover { background: var(--primary-dark); color: var(--text-on-primary); }

.btn--outlined { background: transparent; color: var(--ink); border-color: var(--hairline-strong); --btn-spin-track: var(--hairline); --btn-spin-ink: var(--ink); }
.btn--outlined:hover { background: var(--ink); color: var(--text-on-ink-1); border-color: var(--ink); }

.btn--text { background: transparent; color: var(--link); --btn-spin-track: var(--hairline); --btn-spin-ink: var(--link); }
.btn--text:hover { background: var(--primary-tint); color: var(--link); }

.btn--on-ink { color: var(--text-on-ink-1); border-color: var(--hairline-on-ink); }
.btn--on-ink:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Image CTA — badge-style link (e.g. app-market install button) in place of a button pair */
.image-cta { display: inline-flex; border-radius: 6px; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
.image-cta img { display: block; height: 52px; width: auto; }
.image-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }

/* ---------- Cards / badges / tags ---------- */
.card {
  background: var(--paper-raised);
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: 24px;
  color: var(--text-1);
}
.card--lg { border-radius: var(--radius-lg); }
.card--sunken { background: var(--paper-sunken); border-color: transparent; }
.card--ink { background: var(--ink-raised); border-color: var(--hairline-on-ink); color: var(--text-on-ink-1); }
.card--p0 { padding: 0; overflow: hidden; }
.card--p32 { padding: 32px; }
.card--p40 { padding: 40px; }

.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px;
  border-radius: var(--radius-sm); font-size: var(--fs-caption);
  font-weight: var(--fw-medium); white-space: nowrap;
  background: var(--paper-sunken); color: var(--text-2); border: 1px solid var(--hairline);
}
.badge--primary { background: var(--primary-tint); color: var(--primary-dark); border-color: transparent; }
.badge--success { background: var(--success-tint); color: var(--success); border-color: transparent; }

.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--hairline);
  font-family: var(--font-body); font-size: var(--fs-caption); color: var(--text-2);
  white-space: nowrap;
}
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Eyebrow chip — tinted pill above main titles ("chip" is taken by the card-pricer's
   selectable pack chips). Text and border share the tone color; the background is its tint. */
.eyebrow-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 14px;
  border-radius: var(--radius-pill); border: 1px solid currentColor;
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  text-transform: none; letter-spacing: normal; white-space: nowrap;
}
.eyebrow-chip--primary { color: var(--primary); background: var(--primary-tint); }
.eyebrow-chip--callout { color: var(--callout-dark); background: var(--callout-tint); }
.eyebrow-chip--success { color: var(--success); background: var(--success-tint); }
.eyebrow-chip--warning { color: var(--warning); background: var(--warning-tint); }
.eyebrow-chip--error   { color: var(--error); background: var(--error-tint); }
.eyebrow-chip--neutral { color: var(--text-2); background: var(--paper-sunken); }

/* ---------- Feature list / quote / stat / logo row ---------- */
.fl { display: flex; flex-direction: column; gap: 12px; }
.fl__item { display: flex; align-items: center; gap: 10px; color: var(--text-1); }
.fl__item .material-symbols-outlined { font-size: 20px; color: var(--primary); flex: none; }

.quote-card { display: flex; flex-direction: column; gap: 20px; padding: 32px; }
.quote-card__top { display: flex; justify-content: space-between; align-items: flex-start; height: 20px; }
.quote-card__mark { font-family: var(--font-display); font-size: 44px; line-height: 0.6; color: var(--callout); height: 20px; }
.quote-card__stars { color: var(--callout); font-size: 14px; line-height: 1; letter-spacing: 2px; }
.quote-card__text { font-size: var(--fs-body-lg); line-height: 1.5; margin: 0; flex: 1; }
.quote-card__who { border-top: 1px solid var(--hairline); padding-top: 16px; display: flex; align-items: center; gap: 14px; }
.quote-card__logo { height: 36px; width: auto; max-width: 132px; object-fit: contain; flex: none; }
.quote-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); }
.quote-card__who .caption a { color: inherit; text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.quote-card__who .caption a:hover { color: var(--text-1); }
.quotes__more { display: flex; justify-content: center; margin-top: 40px; }

.stat__value { font-family: var(--font-mono); font-size: 40px; line-height: 1.1; color: var(--text-1); }
.stat__label { font-size: var(--fs-body-sm); color: var(--text-2); margin-top: 8px; display: inline-block; }
.stat__label--help { text-decoration: underline dotted; text-underline-offset: 4px; cursor: help; }
.stat--invert .stat__value { color: var(--text-on-ink-1); }
.stat--invert .stat__label { color: var(--text-on-ink-2); }

/* ---------- Section header ---------- */
.section-header { text-align: left; margin-bottom: 48px; max-width: 640px; }
.section-header--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-header--wide { max-width: none; }
.section-header .eyebrow { margin-bottom: 16px; }
.section-header__lede { font-size: var(--fs-body-lg); line-height: 1.5; margin: 16px 0 0; color: var(--text-2); }
.section-header--invert h2 { color: var(--text-on-ink-1); }
.section-header--invert .section-header__lede { color: var(--text-on-ink-2); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper); box-shadow: var(--shadow-nav); height: 68px;
}
.nav__inner {
  max-width: var(--container-max); margin: 0 auto; padding: 0 40px; height: 100%;
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 39px; width: auto; display: block; }
.nav__links { display: flex; gap: clamp(14px, 2vw, 26px); align-items: center; height: 100%; }
.nav__link {
  display: inline-flex; align-items: center; gap: 4px; height: 100%;
  font-size: var(--fs-body-sm); color: var(--text-2); background: none; border: none;
  padding: 0; font-family: inherit; cursor: pointer; white-space: nowrap; text-decoration: none;
}
.nav__link:hover { color: var(--text-1); text-decoration: none; }
.nav__link.is-active { color: var(--text-1); font-weight: var(--fw-semibold); }
.nav__link .material-symbols-outlined {
  font-size: 18px; color: var(--text-3);
  transition: transform 180ms var(--ease-out);
}
.nav__item { display: flex; align-items: center; height: 100%; }
.nav__item.is-open .nav__link { color: var(--text-1); }
.nav__item.is-open .nav__link .material-symbols-outlined { transform: rotate(180deg); }
.nav__actions { display: flex; gap: 12px; align-items: center; flex-shrink: 0; margin-left: auto; }

.nav__menu {
  position: absolute; top: 68px; left: 0; right: 0;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.nav__item.is-open .nav__menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav__menu-sheet {
  background: var(--paper); border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow-dialog);
}
.nav__menu-inner {
  max-width: var(--container-max); margin: 0 auto; padding: 36px 40px 40px;
  display: flex; gap: 48px; align-items: flex-start;
}
.nav__menu-main { flex: 1 1 auto; }
.nav__menu-title {
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 20px;
}
.nav__menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.nav__menu-grid--pairs { grid-template-columns: repeat(2, minmax(230px, 1fr)); }
.nav__menu-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  border-radius: var(--radius-md); text-decoration: none; transition: background 140ms;
}
.nav__menu-item:hover { background: var(--paper-sunken); text-decoration: none; }
.nav__menu-item > .material-symbols-outlined { font-size: 24px; color: var(--callout); margin-top: 1px; flex: none; }
.nav__menu-item img { display: block; height: 22px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.nav__menu-item-title { display: block; font-family: var(--font-display); font-size: 16px; font-weight: var(--fw-medium); color: var(--text-1); }
.nav__menu-item-blurb { display: block; font-size: 13px; line-height: 1.5; color: var(--text-2); margin-top: 3px; text-wrap: pretty; }
.nav__promo { flex: 0 0 280px; background: var(--ink); border-radius: var(--radius-md); padding: 28px; }
.nav__promo-eyebrow {
  font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-light); margin-bottom: 12px;
}
.nav__promo-title { font-family: var(--font-display); font-size: 20px; line-height: 1.25; color: var(--text-on-ink-1); letter-spacing: -0.01em; }
.nav__promo p { font-size: 13px; line-height: 1.55; color: var(--text-on-ink-2); margin: 10px 0 18px; }

.nav__burger { display: none; background: none; border: none; cursor: pointer; color: var(--text-1); padding: 8px; }
.nav__burger .material-symbols-outlined { font-size: 26px; }

/* Mobile drawer */
.nav__drawer { display: none; }
body.drawer-open { overflow: hidden; }

@media (max-width: 920px) {
  .nav__links, .nav__actions .btn--text { display: none; }
  .nav__burger { display: flex; margin-left: auto; }
  .nav__actions { margin-left: 0; }
  .nav__drawer.is-open {
    display: block; position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
    background: var(--paper); z-index: 55; overflow-y: auto; padding: 12px 20px 40px;
  }
  .nav__drawer-group { border-bottom: 1px solid var(--hairline); }
  .nav__drawer-group > summary {
    list-style: none; display: flex; justify-content: space-between; align-items: center;
    padding: 16px 4px; font-size: var(--fs-body); font-weight: var(--fw-medium); cursor: pointer;
  }
  .nav__drawer-group > summary::-webkit-details-marker { display: none; }
  .nav__drawer-group[open] > summary .material-symbols-outlined { transform: rotate(180deg); }
  .nav__drawer-link { display: block; padding: 12px 4px; color: var(--text-1); text-decoration: none; }
  .nav__drawer-sub { display: block; padding: 10px 16px; color: var(--text-2); text-decoration: none; }
  .nav__drawer-cta { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
}

/* ---------- Footer ---------- */
.footer { background: var(--paper); border-top: 1px solid var(--hairline); padding: 64px 40px 40px; }
.footer__inner { max-width: var(--container-max); margin: 0 auto; }
.footer__top { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.footer__brand { max-width: 480px; }
.footer__logo img { height: 40px; width: auto; display: block; }
.footer__tagline { margin: 20px 0 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-2); }
.footer__stores { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.footer__stores .image-cta img { height: 40px; }
.footer__stores .image-cta:hover { box-shadow: 0 4px 14px rgba(21, 22, 27, 0.16); }
.footer__cols { display: flex; flex-wrap: wrap; gap: 64px; }
.footer__col-title { font-family: var(--font-body); font-size: 11px; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--text-2); margin-bottom: 14px; }
.footer__col-links { display: flex; flex-direction: column; gap: 10px; }
.footer__col-links a { font-size: var(--fs-body-sm); color: var(--text-2); text-decoration: none; }
.footer__col-links a:hover { color: var(--text-1); }

/* Live status dot on the System Status link, fed by status.loopz.io/index.json */
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-left: 7px; vertical-align: middle; position: relative; top: -1px;
}
.status-dot--operational { background: var(--success); }
.status-dot--degraded, .status-dot--maintenance { background: var(--warning); }
.status-dot--downtime { background: var(--error); }
.footer__legal {
  border-top: 1px solid var(--hairline); margin-top: 48px; padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: var(--fs-caption); color: var(--text-3);
}

/* ---------- Dialog & toast ---------- */
.dialog-overlay {
  position: fixed; inset: 0; background: rgba(21, 22, 27, 0.5);
  display: none; align-items: center; justify-content: center; z-index: 100; padding: 24px;
}
.dialog-overlay.is-open { display: flex; }
.dialog {
  background: var(--paper-raised); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog); width: 480px; max-width: 100%; padding: 32px;
}
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dialog__title { font-family: var(--font-display); font-size: 24px; font-weight: var(--fw-medium); letter-spacing: -0.01em; margin: 0; }
.dialog__close { background: none; border: none; cursor: pointer; color: var(--text-2); padding: 4px; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.dialog form { display: flex; flex-direction: column; gap: 16px; }

.toast-holder { position: fixed; bottom: 24px; left: 0; right: 0; display: flex; justify-content: center; z-index: 200; pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--ink); color: var(--text-on-ink-1); border-radius: var(--radius-md);
  font-size: var(--fs-body-sm); box-shadow: var(--shadow-dialog); pointer-events: auto;
}
.toast .material-symbols-outlined { font-size: 20px; }
.toast--success .material-symbols-outlined { color: #81c784; }
.toast--error .material-symbols-outlined { color: #e57373; }
.toast__close { background: none; border: none; cursor: pointer; color: var(--text-on-ink-2); padding: 0; margin-left: 6px; display: flex; }
.toast__close .material-symbols-outlined { font-size: 18px; }

/* ---------- Form fields ---------- */
.field { display: block; text-align: left; }
.field__label { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); margin-bottom: 6px; color: var(--text-1); }
.field.has-error .field__label { color: var(--error); }
.field__input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font-family: var(--font-body);
  font-size: var(--fs-body); color: var(--text-1); background: var(--paper-raised);
  border-radius: var(--radius-md); outline: none; border: var(--border-input);
}
.field textarea { line-height: 1.55; resize: vertical; display: block; }
.field__input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint);
}
.field.has-error .field__input, .field.has-error textarea { border-color: var(--error); box-shadow: none; }
.field__meta { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-caption); margin-top: 5px; color: var(--text-3); }
.field__error { color: var(--error); font-size: var(--fs-caption); margin-top: 5px; display: none; }
.field.has-error .field__error { display: block; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; padding-right: 40px; cursor: pointer; }
.select-wrap .material-symbols-outlined {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 20px; color: var(--text-2);
}

/* ---------- Sections: shared rhythm ---------- */
.section { padding: 96px 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--half { padding: 48px 0; }
.section--sunken { background: var(--paper-sunken); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.section--ink { background: var(--ink); }
.section--hairline-top { border-top: 1px solid var(--hairline); }

/* ---------- Gift card visual ---------- */
.gift-card {
  width: 300px; aspect-ratio: 1.586; border-radius: 14px; background: var(--primary);
  color: #fff; padding: 20px; display: flex; flex-direction: column;
  justify-content: space-between; box-shadow: 0 12px 32px rgba(21, 22, 27, 0.22);
}
.gift-card--ink { background: var(--ink); }
.gift-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.gift-card__name { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: 17px; letter-spacing: 0.04em; }
.gift-card__balance {
  background: rgba(255, 255, 255, 0.95); color: var(--ink); font-family: var(--font-mono);
  font-weight: var(--fw-medium); font-size: 15px; padding: 4px 10px; border-radius: var(--radius-pill);
}
.gift-card__number { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.1em; opacity: 0.85; }

/* ---------- Hero (home) ----------
   Angled primary-tint band + Stripe-style device composite. Device outlines
   ported from the dashboard Checkout Page editor preview (CheckoutPanel.jsx). */
.hero { position: relative; overflow: hidden; padding: 84px 0 96px; }
.hero__band { position: absolute; top: 0; left: 0; right: 0; height: 740px; z-index: 0; }
.hero__band svg { display: block; width: 100%; height: 100%; }
.hero__inner { position: relative; z-index: 1; display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.hero__copy { flex: 1 1 460px; min-width: 320px; max-width: 560px; }
.hero__copy .eyebrow { margin-bottom: 20px; }
.hero__copy h1 { font-size: 58px; }
.hero__lede { color: var(--text-2); margin: 24px 0 0; max-width: 500px; }
.hero__ctas { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero__works-with {
  display: grid; grid-template-columns: repeat(4, max-content);
  justify-content: center; align-items: center; gap: 16px 32px; margin-top: 36px;
}
.hero__works-with .caption-label { grid-column: 1 / -1; justify-self: center; }
.hero__works-with a { display: flex; align-items: center; justify-self: center; opacity: 0.75; transition: opacity 140ms; }
.hero__works-with a:hover { opacity: 1; }
.hero__works-with img { height: 22px; width: auto; max-width: 120px; object-fit: contain; }

.hero__stage { flex: 1 1 480px; position: relative; min-height: 580px; }
.hero__browser {
  position: absolute; top: 0; left: 130px; width: 720px; max-width: none;
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(50, 50, 93, 0.12), 0 -1px 32px rgba(50, 50, 93, 0.06), 0 3px 12px rgba(0, 0, 0, 0.08);
}
.hero__browser-bar {
  background: #fcfeff; height: 30px; box-shadow: 0 0.5px 0 #ecf2f7;
  padding: 6px 12px; border-radius: 8px 8px 0 0;
  display: flex; align-items: center; box-sizing: border-box;
}
.hero__browser-dots { display: flex; margin-right: 32px; }
.hero__browser-dots i { width: 8px; height: 8px; margin-right: 8px; border-radius: 100%; background: #ecf2f7; display: block; }
.hero__url-pill {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(236, 242, 247, 0.4); border-radius: 10px;
  font-weight: 600; font-size: 9px; color: #0a2540;
  padding: 4px 14px; height: 20px; box-sizing: border-box; margin: 0 auto;
}
.hero__url-pill--browser { position: relative; left: -22px; border-radius: 12px; width: 300px; padding: 4px 0; }
.hero__browser > img { display: block; width: 100%; height: 480px; object-fit: cover; object-position: top; }
.hero__browser-mock { display: flex; flex-direction: column; min-height: 384px; }
.hero__browser-mock .sellch__product { flex: 1; }
.hero__phone {
  position: absolute; left: 0; bottom: 0; width: 272px; z-index: 2;
  background: #fff; border-radius: 33px; padding: 6px;
  box-shadow: 0 20px 44px rgba(50, 50, 93, 0.12), 0 -1px 32px rgba(50, 50, 93, 0.06), 0 3px 12px rgba(0, 0, 0, 0.08), inset 0 -2px 5px rgba(10, 37, 64, 0.35);
}
.hero__phone-inner {
  border-radius: 30px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 0 2px rgba(10, 37, 64, 0.10);
}
.hero__phone-bar {
  background: rgba(236, 242, 247, 0.4); box-shadow: 0 0.5px 0 #ecf2f7;
  padding: 6px 12px; display: flex; align-items: center;
}
/* height:auto so the CLS-reserving height attribute doesn't fix the height literally
   (the CSS width would otherwise stretch the image out of its aspect ratio). */
.hero__phone img { display: block; width: 100%; height: auto; }

@media (max-width: 1180px) {
  .hero__browser { left: 70px; width: 640px; }
}
@media (max-width: 960px) {
  .hero { padding: 64px 0 80px; }
  .hero__stage { min-height: 0; width: 100%; padding-bottom: 40px; }
  .hero__browser { position: static; width: 100%; }
  .hero__browser > img { height: 340px; }
  .hero__phone { bottom: -24px; left: -6px; width: 210px; }
}

/* ---------- Page hero (features / solutions / integrations) ---------- */
.page-hero { padding: 72px 0 88px; overflow: hidden; }
.page-hero .eyebrow { margin-bottom: 20px; }
.page-hero__split { display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start; }
.page-hero__copy { flex: 1 1 560px; min-width: 320px; }
.page-hero__copy .badge { margin-bottom: 20px; }
.page-hero__copy h1 { font-size: 56px; }
.page-hero__lede { color: var(--text-2); margin: 24px 0 0; max-width: 560px; font-size: var(--fs-body-lg); line-height: 1.5; }
.page-hero__ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.page-hero__tags { margin-top: 26px; }
.page-hero__stats { flex: 0 1 340px; display: flex; flex-direction: column; gap: 28px; padding: 36px; }

/* Optional hero stage: dashboard browser frame (shared .hero__browser styles)
   with an overlapping POS device render. */
.page-hero__stage { flex: 1 1 480px; position: relative; min-height: 560px; min-width: 320px; }
.page-hero__stage .hero__browser { top: 16px; }
.page-hero__stage .hero__browser--mock { width: 540px; }
/* Phone-frame variant (deviceVariant="phone"): same composite as the home hero. */
.page-hero__stage .hero__phone { bottom: -24px; }
.page-hero__device {
  position: absolute; left: 48px; bottom: -36px; width: 248px; z-index: 2;
  filter: drop-shadow(0 24px 36px rgba(50, 50, 93, 0.22));
}
.page-hero__device--panel {
  left: -20px; bottom: 92px; width: 440px; filter: none;
  background: #fff; border-radius: 10px;
  box-shadow: 0 24px 44px rgba(50, 50, 93, 0.25), 0 3px 12px rgba(0, 0, 0, 0.08);
}
/* WooCommerce hero: the popup panel sits a little further left and narrower than the Shopify
   one so it covers only the product-page mock's image column, leaving the buy column clear. */
.page-hero__stage--woocommerce .page-hero__device--panel { left: -44px; width: 424px; }

/* WooCommerce hero: gift card product page inside the browser frame (Coffee House demo merchant) */
.woostore__product { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; padding: 24px; align-items: start; flex: 1; }
.woostore__media { border-radius: 12px; min-height: 100%; background: #f4f4f5; display: flex; align-items: center; justify-content: center; padding: 18px; align-self: stretch; }
.woostore__buy { padding: 4px 4px 0; color: #1e1e1e; }
.woostore__buy h4 { font-family: var(--font-body); font-size: 21px; font-weight: var(--fw-bold); margin: 0; }
.woostore__price { font-size: 15px; margin-top: 8px; }
.woostore__label { display: block; font-size: 14px; margin: 22px 0 10px; }
.woostore__amounts { display: flex; gap: 6px; flex-wrap: wrap; }
.woostore__amount {
  font-size: 12px; padding: 7px 8px; border-radius: 4px; background: #d9d9d9; color: #4a4a4a;
  border: 1px solid #b9b9b9; white-space: nowrap;
}
.woostore__amount.is-active { background: #a78bfa; border-color: #a78bfa; color: #fff; }
.woostore__send-gift {
  margin-top: 24px; background: #9370e6; color: #fff; text-align: center; border-radius: 999px;
  font-size: 12.5px; font-weight: var(--fw-bold); padding: 11px 16px; white-space: nowrap;
}
.woostore__info { display: block; font-size: 13px; font-weight: var(--fw-semibold); margin: 26px 0 12px; }
.woostore__skeleton { display: flex; flex-direction: column; gap: 9px; }
.woostore__skeleton i { display: block; height: 9px; border-radius: 5px; background: #d9d9d9; }
.woostore__skeleton i:nth-child(1) { width: 100%; }
.woostore__skeleton i:nth-child(2) { width: 86%; }
.woostore__skeleton i:nth-child(3) { width: 86%; }
@media (max-width: 960px) {
  .page-hero__stage--woocommerce .page-hero__device--panel { left: -6px; width: 320px; }
  .woostore__product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
@media (max-width: 640px) { .woostore__product { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .page-hero__stage { min-height: 0; width: 100%; padding-bottom: 40px; }
  .page-hero__stage .hero__browser { position: static; width: 100%; }
  .page-hero__stage .hero__browser > img { height: 340px; }
  .page-hero__stage .hero__browser-mock { min-height: 340px; }
  .page-hero__device { left: -6px; bottom: -24px; width: 190px; }
  .page-hero__device--panel { left: -6px; width: 320px; }
}
@media (max-width: 720px) {
  .page-hero__device { display: none; }
}

/* Pill nav (sibling pages switcher) */
.pillnav { display: flex; gap: 10px; margin-bottom: 48px; flex-wrap: wrap; }
.pillnav__item {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: var(--radius-pill); font-size: var(--fs-body-sm); text-decoration: none;
  color: var(--text-2); border: 1px solid var(--hairline-strong); transition: background 140ms, color 140ms;
}
.pillnav__item:hover { text-decoration: none; color: var(--text-1); }
.pillnav__item .material-symbols-outlined { font-size: 19px; color: var(--callout); }
.pillnav__item.is-active { background: var(--ink); color: var(--text-on-ink-1); border-color: var(--ink); }
.pillnav__item.is-active .material-symbols-outlined { color: var(--primary-light); }

/* Tab strip (integrations): button group of platform logos.
   The active button shows the logo in full color; the rest are greyed out. */
.tabstrip { display: flex; gap: 12px; max-width: 100%; margin-bottom: 56px; overflow-x: auto; }
.tabstrip__btn {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  padding: 12px 22px; border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--surface-card); text-decoration: none;
  transition: background 140ms, border-color 140ms;
}
.tabstrip__btn img {
  height: 22px; width: auto; max-width: 120px; object-fit: contain; display: block;
  filter: grayscale(1); opacity: 0.45; transition: filter 140ms, opacity 140ms;
}
.tabstrip__btn:hover { background: var(--paper-sunken); }
.tabstrip__btn:hover img { opacity: 0.7; }
.tabstrip__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tabstrip__btn.is-active { background: var(--paper-sunken); border-color: var(--hairline-strong); }
.tabstrip__btn.is-active img { filter: none; opacity: 1; }

/* ---------- Logo strip / stats band ---------- */
.logo-strip { padding: 40px 0; }
.logo-strip .caption-label { display: block; text-align: center; margin-bottom: 28px; }

.logo-marquee {
  display: flex; overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.logo-marquee__group {
  display: flex; align-items: center; flex-shrink: 0; min-width: 100%;
  justify-content: space-around; gap: 72px; padding: 0 36px;
  margin: 0; list-style: none;
  animation: logo-marquee 45s linear infinite;
}
.logo-marquee li { display: flex; }
.logo-marquee a { display: flex; border-radius: 4px; }
.logo-marquee a:focus-visible { outline: 2px solid var(--primary); outline-offset: 6px; }
.logo-marquee img {
  height: 38px; width: auto; max-width: 170px; object-fit: contain;
  filter: grayscale(1); opacity: 0.55;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.logo-marquee a:hover img,
.logo-marquee a:focus-visible img { filter: none; opacity: 1; transform: scale(1.05); }
.logo-marquee:hover .logo-marquee__group { animation-play-state: paused; }
/* Separate rule: a browser without :has() must not drop the :hover pause above. */
.logo-marquee:has(a:focus-visible) .logo-marquee__group { animation-play-state: paused; }
@keyframes logo-marquee {
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-marquee__group { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 24px; }
  .logo-marquee__group[aria-hidden="true"] { display: none; }
}

.stats-band { padding: 64px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stats-band__headline { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.stats-band__headline .material-symbols-outlined { font-size: 0.9em; color: var(--callout); vertical-align: -0.12em; margin-right: 4px; }
.stats-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stats-band__cell { text-align: center; padding: 8px 32px; }
.stats-band__cell + .stats-band__cell { border-left: 1px solid var(--hairline); }
.stats-band .stat__value { font-size: 56px; }
.stats-band__unit { color: var(--callout); }
.stats-band .stat__label { color: var(--text-2); margin-top: 12px; }
.stats-band__footnote { font-style: italic; font-size: var(--fs-body-sm); color: var(--text-3); text-align: center; margin: 40px 0 0; }
@media (max-width: 860px) {
  .stats-band__grid { grid-template-columns: 1fr; }
  .stats-band__cell { padding: 20px 16px; }
  .stats-band__cell + .stats-band__cell { border-left: none; border-top: 1px solid var(--hairline); }
  .stats-band .stat__value { font-size: 44px; }
}

/* ---------- Sell channels (in-store / online split) ---------- */
.sellch { padding: 96px 0 48px; }
.sellch__header { text-align: center; max-width: 1100px; margin: 0 auto 56px; }
.sellch__header h2 { margin: 14px 0 0; }
.sellch__header p { color: var(--text-2); margin: 14px auto 0; max-width: 560px; }
@media (min-width: 1000px) { .sellch__header h2 { white-space: nowrap; } }

.sellch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); align-items: stretch; }
.sellch__card {
  position: relative; border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--paper); padding: 32px; display: flex; flex-direction: column;
}
.sellch__card h3 { font-family: var(--font-display); font-size: var(--fs-title); font-weight: var(--fw-medium); margin: 0 0 6px; }
.sellch__card > p { color: var(--text-2); margin: 0 0 24px; font-size: var(--fs-body-sm); max-width: 400px; }
.sellch__tag {
  position: absolute; top: 0; right: 0; height: 32px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); color: var(--text-2);
  background: var(--paper); border-left: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  border-radius: 0 var(--radius-lg) 0 calc(var(--radius-lg) / 2);
}
.sellch__tag .material-symbols-outlined { font-size: 17px; color: var(--callout); }

/* shared gift-card artwork: photo + "Gift Card" type + tinted top gradient */
.sellch__art { position: relative; width: 100%; height: 0; padding-bottom: 63%; }
.sellch__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.sellch__art::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(24, 48, 34, 0.55) 0%, rgba(24, 48, 34, 0.18) 45%, rgba(21, 22, 27, 0) 70%);
}
.sellch__art-type {
  position: absolute; top: 14px; left: 16px; z-index: 2; color: #fff;
  font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1.08;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* in-store: POS with floating card */
.sellch__pos-stage {
  flex: 1; position: relative; display: flex; align-items: flex-end; justify-content: center;
  background: var(--paper-sunken); border-radius: var(--radius-md); min-height: 0; overflow: hidden;
}
.sellch__pos { width: 265px; height: auto; display: block; margin-bottom: -150px; position: relative; left: 20px; }
.sellch__float-card {
  position: absolute; top: 30px; left: calc(50% - 60px); transform: translateX(-50%) rotate(-5deg); z-index: 1;
  width: 290px; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 48px rgba(21, 22, 27, 0.28);
}
.sellch__float-card .sellch__art-type { font-size: 30px; top: 18px; left: 20px; }

/* online: storefront product-page mock (Coffee House demo palette) */
.sellch__browser {
  flex: 1; border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column; background: #f7f2e8; box-shadow: 0 12px 32px rgba(21, 22, 27, 0.08);
}
.sellch__browser-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.sellch__browser-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(21, 22, 27, 0.14); }
.sellch__browser-url {
  margin-left: 10px; flex: 1; max-width: 320px; height: 22px; border-radius: 11px;
  background: var(--paper-sunken); font-size: 11px; color: var(--text-2);
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.sellch__shop-header { display: flex; align-items: center; gap: 16px; padding: 12px 16px; background: #fdfbf6; border-bottom: 1px solid rgba(33, 64, 44, 0.12); }
.sellch__shop-logo { height: 48px; width: auto; display: block; flex: none; mix-blend-mode: multiply; }
.sellch__shop-spacer { flex: 1; }
.sellch__shop-btn {
  background: #21402c; color: #fff; font-size: 10.5px; font-weight: var(--fw-bold); white-space: nowrap;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 14px; border-radius: 8px;
}
.sellch__shop-cart {
  font-size: 12px; font-weight: var(--fw-semibold); color: #2c2c28; white-space: nowrap;
  border: 1px solid rgba(33, 64, 44, 0.18); border-radius: 8px; padding: 8px 12px; background: #fff; margin-right: 8px;
}
.sellch__product { display: grid; grid-template-columns: 1fr 1.05fr; gap: 20px; padding: 24px; align-items: stretch; }
.sellch__product-media { border-radius: 12px; min-height: 100%; background: #f4f4f5; display: flex; align-items: center; justify-content: center; padding: 18px; }
.sellch__tpl-card {
  width: 94%; flex: none; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 22px 40px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.08);
}
.sellch__tpl-card .sellch__art-type { font-size: 17px; top: 12px; left: 14px; }
.sellch__product-buy { background: #faf7ef; border-radius: 12px; padding: 28px; display: flex; flex-direction: column; }
.sellch__product-buy h4 { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: var(--fw-bold); margin: 0; color: #171713; white-space: nowrap; }
.sellch__price { font-size: 15px; font-weight: var(--fw-semibold); margin: 10px 0 0; color: #171713; }
.sellch__buy-label { font-size: 12.5px; font-weight: var(--fw-bold); color: #171713; display: block; margin: 14px 0 6px; }
.sellch__select {
  border: 1px solid rgba(33, 64, 44, 0.3); border-radius: 10px; background: #fff;
  font-size: 13px; padding: 11px 14px; display: flex; justify-content: space-between; align-items: center;
  color: #171713; margin-bottom: 18px;
}
.sellch__select::after { content: "\25BE"; color: #6b6b62; font-size: 11px; }
.sellch__send-gift {
  margin-top: auto; background: #21402c; color: #fff; text-align: center;
  font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 15px; border-radius: 10px;
}
@media (max-width: 980px) { .sellch__grid { grid-template-columns: 1fr; } .sellch__pos-stage { min-height: 420px; } }
@media (max-width: 640px) { .sellch__product { grid-template-columns: 1fr; } .sellch__product-media { min-height: 200px; } }

/* ---------- Store credit (alternating vignette rows) ---------- */
.storec { padding: 48px 0 96px; }
.storec__row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
.storec__row + .storec__row { margin-top: 56px; }
.storec__art svg { width: 100%; height: auto; display: block; }
.storec__copy h3 { font-family: var(--font-display); font-size: var(--fs-title); font-weight: var(--fw-medium); margin: 0 0 6px; }
.storec__copy p { color: var(--text-2); margin: 0; font-size: var(--fs-body-sm); max-width: 440px; }
.storec__copy .fl { margin-top: 16px; gap: 10px; }
.storec__copy .fl__item { font-size: var(--fs-body-sm); }
.storec__row--reverse { grid-template-columns: 1fr 1.05fr; }
.storec__row--reverse .storec__art { order: 2; }
@media (max-width: 980px) {
  .storec__row, .storec__row--reverse { grid-template-columns: 1fr; gap: 24px; }
  .storec__row + .storec__row { margin-top: 48px; }
  .storec__art { order: 2; }
}

/* ---------- Sync hub (copy + platform-hub vignette) ---------- */
.synchub { display: flex; gap: 64px; align-items: center; flex-wrap: wrap; }
.synchub--reverse { flex-direction: row-reverse; }
.synchub__copy { flex: 1 1 380px; min-width: 320px; }
/* Same type scale as .frow__copy (POS feature rows). */
.synchub__copy .eyebrow { margin-bottom: 14px; }
.synchub__copy p { color: var(--text-2); margin: 14px 0 22px; max-width: 440px; }
.synchub__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.synchub__art { flex: 1 1 440px; min-width: 320px; }
.synchub__art svg { width: 100%; height: auto; display: block; }
/* Dash period (3+9) must match the keyframe offset for a seamless march. */
.synchub-flow { stroke-dasharray: 3 9; animation: synchub-dash 1.4s linear infinite; }
@keyframes synchub-dash { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .synchub-flow { animation: none; } }

/* ---------- Digital & physical cards panel ---------- */
.dpcard {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 24px;
  background: var(--paper-sunken); border: var(--border-card);
  border-radius: var(--radius-lg); overflow: hidden;
}
.dpcard__copy { flex: 1 1 380px; min-width: 320px; padding: 56px; }
.dpcard__copy h2 { margin: 0 0 18px; }
.dpcard__copy p { color: var(--text-2); margin: 0; max-width: 460px; }
.dpcard__copy p + p { margin-top: 14px; }
.dpcard__media {
  flex: 1 1 440px; min-width: 320px; align-self: flex-end;
  display: flex; align-items: flex-end; justify-content: flex-end; padding-top: 32px;
}
.dpcard__media img { display: block; width: 100%; max-width: 680px; height: auto; }
@media (max-width: 720px) { .dpcard__copy { padding: 32px 24px; } }

/* ---------- Setup steps ---------- */
.steps {
  /* Two-column grid with one row per step; the artwork stage spans all rows but
     the last, and the CTA shares the last row so it matches the bottom tab's
     height exactly. --steps-count is set inline by the setupSteps macro. */
  display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
  border: var(--border-card);
  border-radius: var(--radius-md); overflow: hidden; background: var(--paper-raised);
}
.steps__list, .steps__panel { display: contents; }
.steps__item {
  grid-column: 1;
  font: inherit; text-align: left; cursor: pointer; padding: 26px 28px;
  display: flex; gap: 16px; align-items: flex-start; border: none; background: transparent;
  border-top: 1px solid var(--hairline); border-right: 3px solid transparent;
  transition: background-color 140ms;
}
.steps__item:first-child { border-top: none; }
.steps__item.is-active {
  border-right-color: var(--primary);
  background: var(--primary-tint) url(/website/images/step-active-bg.png) center/cover no-repeat;
}
.steps__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--text-3); }
.steps__title { font-family: var(--font-display); font-size: var(--fs-title); font-weight: var(--fw-medium); color: var(--text-1); }
.steps__item.is-active .steps__title { color: var(--primary); }
.steps__body { display: flex; flex-direction: column; gap: 6px; }
.steps__stage {
  grid-column: 2; grid-row: 1 / var(--steps-count, 4);
  background: var(--paper-sunken); border-left: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center; padding: 30px 44px; min-height: 0; overflow: hidden;
}
.steps__cta {
  grid-column: 2; grid-row: var(--steps-count, 4);
  background: var(--ink); border-left: 1px solid var(--hairline); padding: 26px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.steps__cta-copy { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; }
.steps__cta-text { color: var(--text-on-ink-1); font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-medium); }
.steps__cta-sub { color: var(--text-on-ink-2); font-size: var(--fs-body-sm); }
.steps__placeholder {
  width: 100%; aspect-ratio: 4 / 3; border: 1px dashed var(--hairline);
  border-radius: var(--radius-md); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; color: var(--text-3); background: var(--paper);
}
.steps__art { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.steps__art[hidden] { display: none; }
.steps__art svg { display: block; width: 100%; height: 100%; }
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; }
  .steps__stage { grid-column: 1; grid-row: auto; border-left: none; border-top: 1px solid var(--hairline); min-height: 380px; }
  .steps__cta { grid-column: 1; grid-row: auto; border-left: none; }
}

/* ---------- Feature rows ---------- */
.frow { display: flex; gap: 64px; align-items: center; flex-wrap: wrap; }
.frow--reverse { flex-direction: row-reverse; }
.frow + .frow { margin-top: 80px; }
.frow__copy { flex: 1 1 400px; min-width: 320px; }
.frow__copy .eyebrow { margin-bottom: 14px; }
.frow__copy p { color: var(--text-2); margin: 14px 0 22px; max-width: 440px; }
.fpanel {
  flex: 1 1 440px; background: var(--paper-sunken); border-radius: var(--radius-lg);
  border: 1px solid var(--hairline); padding: 32px; display: flex;
  align-items: center; justify-content: center; min-height: 320px;
}
.fpanel__cards { position: relative; height: 260px; width: 340px; max-width: 100%; }
.fpanel__cards > :first-child { position: absolute; top: 40px; left: 20px; transform: rotate(-6deg); }
.fpanel__cards > :last-child { position: absolute; top: 0; left: 0; transform: rotate(3deg); }

/* ---------- POS feature highlight (device render beside copy) ---------- */
.pos-feature { padding-top: 32px; }
.pos-feature__media { flex: 1 1 460px; min-width: 320px; }
.pos-feature__media--art svg { display: block; width: 100%; height: auto; }
.pos-feature__media img { display: block; width: 100%; max-width: 620px; height: auto; margin: 0 auto; }
.pos-feature + .pos-feature { padding-top: 0; }

/* Store credit ledger panel */
.ledger { width: 100%; max-width: 380px; padding: 0; overflow: hidden; }
.ledger__head { padding: 14px 18px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-semibold); font-size: 14px; }
.ledger__row { padding: 12px 18px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; font-size: 14px; }
.ledger__row span:first-child { color: var(--text-2); }
.ledger__row .is-credit { color: var(--success); }
.ledger__total { padding: 12px 18px; display: flex; justify-content: space-between; font-size: 14px; }
.ledger__total span:first-child { font-weight: var(--fw-semibold); }

/* Incentive ladder */
.incentive-ladder {
  display: flex; flex-direction: column; width: 100%; max-width: 340px;
  border: 1px solid var(--callout); border-radius: var(--radius-md); overflow: hidden;
}
.incentive-ladder__row {
  display: flex; justify-content: space-between; padding: 14px 18px; font-size: 14px;
  background: var(--paper-raised); color: var(--callout); border-bottom: 1px solid var(--callout);
  font-weight: var(--fw-medium);
}
.incentive-ladder__row:last-child { border-bottom: none; }
.incentive-ladder__row.is-active { background: var(--callout); color: #fff; }

/* ---------- Integration grid (home) ---------- */
.igrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.igrid__card {
  text-align: left; background: var(--paper-raised); border: var(--border-card);
  border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column;
  text-decoration: none; color: var(--text-1);
  transition: border-color 140ms, transform 140ms var(--ease-out);
}
.igrid__card:hover { border-color: var(--text-1); transform: translateY(-2px); text-decoration: none; color: var(--text-1); }
.igrid__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; min-height: 32px; }
.igrid__head img { height: 28px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }
.igrid__head .material-symbols-outlined { font-size: 20px; color: var(--text-3); flex-shrink: 0; }
.igrid__kind { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }
.igrid__card p { margin: 10px 0 18px; flex: 1; font-size: var(--fs-body-sm); color: var(--text-2); }
.igrid__trial { font-family: var(--font-body); font-size: 12px; color: var(--text-2); }

/* ---------- Ink band ---------- */
.ink-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.ink-card { background: var(--ink-raised); border: 1px solid var(--hairline-on-ink); border-radius: var(--radius-md); padding: 24px 28px; }
.ink-card > .material-symbols-outlined { font-size: 26px; color: var(--primary-light); }
.ink-card__title { color: var(--text-on-ink-1); margin: 14px 0 8px; }
.ink-card__body { font-size: var(--fs-body-sm); color: var(--text-on-ink-2); margin: 0; }
a.ink-card { display: block; text-decoration: none; transition: border-color 140ms; }
a.ink-card:hover { border-color: var(--primary-light); text-decoration: none; }

/* API snippet split (inside ink band) */
.api-split { border-top: 1px solid var(--hairline-on-ink); margin-top: 48px; padding-top: 40px; display: flex; gap: 48px; flex-wrap: wrap; align-items: center; }
.api-split__copy { flex: 1 1 380px; }
.api-split__copy h3 { color: var(--text-on-ink-1); }
.api-split__copy p { font-size: var(--fs-body-sm); color: var(--text-on-ink-2); margin: 12px 0 0; max-width: 440px; }
.api-split__logos { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.api-split__logos img { height: 32px; width: auto; display: block; }

.code-card {
  background: var(--ink-raised); border: 1px solid var(--hairline-on-ink); border-radius: var(--radius-md);
  padding: 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--text-on-ink-2); min-width: 300px;
}
.code-card__req { color: var(--primary-light); }
.code-card__ok { color: #81c784; }
.code-card__json { margin: 0; font: inherit; white-space: pre; }
.code-card div + div, .code-card pre + div, .code-card div + pre { margin-top: 8px; }

/* Setup steps (integrations ink variant) */
.ink-steps { display: flex; gap: 20px; flex-wrap: wrap; }
.ink-steps .ink-card { flex: 1 1 260px; padding: 28px; }
.ink-steps__num { font-family: var(--font-mono); font-size: 13px; color: var(--primary-light); margin-bottom: 12px; }

/* ---------- Tools / quotes / what-you-get grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.tool-card > .material-symbols-outlined { font-size: 24px; color: var(--primary); }
.tool-card h3 { margin: 12px 0 8px; }
.tool-card p { margin: 0; font-size: var(--fs-body-sm); color: var(--text-2); }

.wyg-card { padding: 32px; }
.wyg-card > .material-symbols-outlined { font-size: 28px; color: var(--callout); }
.wyg-card h3 { margin-top: 18px; }
.wyg-card p { margin: 8px 0 0; font-size: var(--fs-body-sm); color: var(--text-2); }

/* ---------- Workflow ---------- */
.workflow { display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start; }
.workflow__copy { flex: 1 1 420px; min-width: 320px; }
.workflow__copy .section-header { margin-bottom: 24px; }
.workflow .quote-card { flex: 1 1 380px; }

/* ---------- Sync band ---------- */
.sync { display: flex; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
.sync__copy { flex: 1 1 380px; }
.sync__copy .section-header { margin-bottom: 24px; }
.sync__badges { display: flex; gap: 8px; flex-wrap: wrap; }
.sync .quote-card { flex: 1 1 380px; }

/* ---------- FAQ ---------- */
.faq { display: flex; gap: 72px; flex-wrap: wrap; align-items: flex-start; }
.faq__side { flex: 0 1 320px; position: sticky; top: 96px; }
.faq__side .eyebrow { margin-bottom: 18px; }
.faq__side p { color: var(--text-2); margin: 16px 0 24px; }
.faq__list { flex: 1 1 480px; border-top: 1px solid var(--hairline); }
.faq__list--center { flex-basis: 100%; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 24px 4px; cursor: pointer; color: var(--text-1);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-family: var(--font-display); font-size: 19px; font-weight: var(--fw-medium); letter-spacing: -0.01em; }
.faq__item summary .material-symbols-outlined {
  font-size: 22px; color: var(--text-3); flex-shrink: 0;
  transition: transform 180ms var(--ease-out), color 180ms;
}
.faq__item[open] summary .material-symbols-outlined { transform: rotate(180deg); color: var(--callout); }
.faq__a { margin: 0; padding: 0 64px 26px 4px; color: var(--text-2); line-height: 1.6; text-wrap: pretty; }

/* ---------- CTA band ---------- */
/* Ink monument over the silk artwork (dim is baked into the SVG, anchored to the arc corner). */
.cta-band {
  background: var(--ink) url("/website/images/cta-band-silk.svg") left bottom / cover no-repeat;
  color: var(--text-on-ink-1); padding: 128px 40px 120px; text-align: center;
}
.cta-band h2 { color: var(--text-on-ink-1); font-size: var(--fs-display-1); max-width: 800px; margin: 0 auto; text-wrap: balance; }
.cta-band__lede {
  font-size: var(--fs-body-lg); line-height: 1.5; color: var(--text-on-ink-2);
  max-width: 520px; margin: 26px auto 0; text-wrap: pretty;
}
.cta-band__actions { display: flex; gap: 16px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }

/* Integration pages tint the band with the platform logo's color, mixed toward ink just far
   enough that the headline and lede keep AA contrast (the lede also runs above the 62%
   on-ink tier for the same reason). */
.cta-band--brand .cta-band__lede { color: rgba(247, 247, 245, 0.85); }
.cta-band--clover      { background-color: #1f7105; }
.cta-band--square      { background-color: #231f20; }
.cta-band--shopify     { background-color: #446432; }
.cta-band--woocommerce { background-color: #7b4e71; }
.cta-band--zapier      { background-color: #ad3b09; }

/* ---------- Pricing: plan cards ---------- */
.plans__picker { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.picker-tile {
  display: flex; align-items: center; justify-content: center; min-width: 176px; height: 64px;
  padding: 0 26px; cursor: pointer; background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.picker-tile img { height: 24px; width: auto; max-width: 132px; object-fit: contain; opacity: 0.62; transition: opacity 140ms var(--ease-out); }
.picker-tile.is-active { background: var(--paper-sunken); border: 1.5px solid var(--primary); }
.picker-tile.is-active img { opacity: 1; }

.region-toggle-holder { display: flex; justify-content: center; margin-bottom: 40px; }
.region-toggle { display: flex; gap: 4px; padding: 4px; background: var(--paper-sunken); border: 1px solid var(--hairline); border-radius: var(--radius-pill); }
.region-toggle button {
  display: flex; align-items: center; gap: 8px; padding: 9px 20px; cursor: pointer;
  border-radius: var(--radius-pill); border: none; font-size: var(--fs-body-sm);
  font-family: inherit; color: var(--text-2); background: transparent;
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.region-toggle button .money { font-size: 12px; color: var(--text-3); }
.region-toggle button.is-active { background: var(--paper); color: var(--text-1); font-weight: var(--fw-semibold); box-shadow: 0 1px 3px rgba(21,22,27,0.12); }

.plans__variant { display: none; }
.plans__variant.is-active { display: block; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 20px; align-items: stretch; }
.plan-card { display: flex; flex-direction: column; gap: 18px; padding: 28px; position: relative; }
.plan-card.is-featured { border-color: var(--primary); }
.plan-card .badge--primary { position: absolute; top: 24px; right: 24px; }
.plan-card__price { display: flex; align-items: baseline; gap: 8px; }
.plan-card__price .money-large { font-size: 40px; }
.plan-card__meta { display: flex; flex-direction: column; gap: 4px; }
.plan-card__plus { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.plan-card .fl { flex: 1; }
.plans__note { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; }
.plans__note .material-symbols-outlined { font-size: 20px; color: var(--callout); }
.plans__note span:last-child { font-size: var(--fs-body-sm); color: var(--text-2); }
.plans__ca-note { text-align: center; margin: 12px 0 0; }

/* ---------- Pricing: plan finder (platforms + volume -> suggested plan) ---------- */
.est { padding: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 360px; }
.est__inputs { padding: 32px; display: flex; flex-direction: column; gap: 32px; }
.est__step-label { display: block; margin-bottom: 14px; }
.est__platforms { display: grid; grid-template-columns: 1fr; gap: 12px; }
.est__platform {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; text-align: left;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-md);
  transition: background 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
.est__platform:hover { border-color: var(--hairline-strong); }
.est__platform:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.est__platform[aria-pressed="true"] { background: var(--paper-sunken); border-color: var(--primary); }
.est__logo { height: 22px; width: auto; max-width: 128px; object-fit: contain; object-position: left center; opacity: 0.55; transition: opacity 140ms var(--ease-out); }
.est__platform[aria-pressed="true"] .est__logo { opacity: 1; }
.est__from { margin-left: auto; }
.est__check {
  flex: none; width: 22px; height: 22px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--hairline-strong);
}
.est__check .material-symbols-outlined { font-size: 16px; color: #fff; display: none; }
.est__platform[aria-pressed="true"] .est__check { background: var(--primary); border-color: var(--primary); }
.est__platform[aria-pressed="true"] .est__check .material-symbols-outlined { display: block; }

.est__volume-label { font-family: var(--font-display); font-size: var(--fs-body-lg); font-weight: var(--fw-medium); margin-bottom: 10px; }
.est__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; margin: 0; cursor: pointer; --fill: 50%; }
.est__slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--primary) 0 var(--fill), var(--hairline) var(--fill) 100%);
}
.est__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; margin-top: -9px;
  background: var(--ink); border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--hairline-strong);
}
.est__slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--hairline); }
.est__slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--primary); }
.est__slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--hairline-strong); }
.est__slider:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.est__stops { position: relative; margin-top: 2px; height: 26px; }
.est__stops button {
  position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap;
  background: none; border: none; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-caption); color: var(--text-3); transition: color 140ms var(--ease-out);
}
.est__stops button:first-child { left: 0; transform: none; }
.est__stops button:last-child { left: auto; right: 0; transform: none; }
.est__stops button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.est__stops button.is-active { color: var(--text-1); font-weight: var(--fw-semibold); }

.est__panel { background: var(--ink); color: var(--text-on-ink-1); padding: 32px 28px; }
.est__plan-name { font-family: var(--font-display); font-size: 34px; font-weight: var(--fw-bold); margin-top: 10px; }
.est__tx { font-size: var(--fs-caption); color: var(--text-on-ink-2); margin-top: 6px; }
.est__tx .money { color: var(--text-on-ink-1); }
.est__receipt { border-top: 1px solid var(--hairline-on-ink); margin-top: 22px; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.est__line { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-body-sm); color: var(--text-on-ink-2); }
.est__line .money { color: var(--text-on-ink-1); }
.est__total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--hairline-on-ink); margin-top: 12px; padding-top: 16px; }
.est__total-row .money-large { font-size: 36px; color: var(--text-on-ink-1); }
.est__total-label { font-family: var(--font-display); font-size: var(--fs-body); }
.est__usd { color: var(--text-on-ink-2); }
.est__hint { font-size: var(--fs-caption); color: var(--text-on-ink-2); margin-top: 10px; min-height: 34px; }
.est__panel .btn { margin-top: 18px; }
.est__panel .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.est__fine { text-align: center; margin-top: 10px; color: var(--text-on-ink-2); }

@media (max-width: 860px) { .est { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .est__inputs { padding: 24px 20px; }
  .est__panel { padding: 28px 20px; }
}

/* ---------- Pricing: card order pricer ---------- */
.pricer { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .pricer { grid-template-columns: 1fr; } }
.pricer__form { display: flex; flex-direction: column; gap: 32px; padding: 32px; }
.pricer__group { display: flex; flex-direction: column; gap: 14px; }
/* Material and pack size sit side by side so the form is about as tall as the sticky summary;
   the material tiles stack in their column. */
.pricer__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
/* Both columns stretch to the same height: the material tiles and the pack-size chips (three per
   row) each fill their column with equal-height rows. */
.pricer__row .pricer__materials { grid-template-columns: 1fr; grid-auto-rows: 1fr; flex: 1; }
.pricer__row [data-pack-chips] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; flex: 1; }
.pricer__row [data-pack-chips] .chip { min-width: 0; justify-content: center; text-align: center; }
@media (max-width: 860px) { .pricer__row { grid-template-columns: 1fr; } }
.pricer__group-label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); }
.pricer__materials { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.material-tile {
  text-align: left; padding: 16px 18px; cursor: pointer; border-radius: var(--radius-md);
  background: var(--paper); border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px; font-family: inherit;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.material-tile.is-active { background: var(--paper-sunken); border: 1.5px solid var(--primary); }
.material-tile__name { font-family: var(--font-display); font-size: 17px; font-weight: var(--fw-medium); color: var(--text-1); }
.material-tile .caption { text-wrap: pretty; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row--fill .chip { flex: 1 1 0; }
.chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px;
  padding: 11px 14px; cursor: pointer; border-radius: var(--radius-sm); font-family: inherit;
  background: var(--paper); border: 1px solid var(--hairline); color: var(--text-1);
  transition: background 140ms var(--ease-out), color 140ms var(--ease-out);
}
.chip__label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 15px; }
/* Pack-size chips are bare numbers — numeric values render in mono */
.chip[data-pack] .chip__label { font-family: var(--font-mono); font-weight: var(--fw-regular); }
.chip__sub { font-size: 11px; color: var(--text-3); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink-1); }
.chip.is-active .chip__sub { color: var(--text-on-ink-2); }
.chip.is-disabled { cursor: not-allowed; opacity: 0.45; color: var(--text-3); }

.pricer__summary { padding: 0; overflow: hidden; position: sticky; top: 96px; }
.pricer__lines { padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; }
.pricer__lines-title { font-size: var(--fs-caption); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.pricer__line { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: var(--fs-body-sm); }
.pricer__line span:first-child { color: var(--text-2); }
.pricer__line span:last-child { font-weight: var(--fw-semibold); text-align: right; }
.pricer__rushline { display: none; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: var(--fs-caption); color: var(--text-3); }
.pricer__total { padding: 24px 28px; background: var(--ink); display: flex; flex-direction: column; gap: 16px; }
.pricer__total-amount { display: flex; align-items: baseline; gap: 8px; }
.pricer__total-amount .money-large { font-size: 36px; color: var(--text-on-ink-1); }
.pricer__total .caption { color: var(--text-on-ink-2); }

/* ---------- Contact ---------- */
.contact { padding: 96px 0 120px; }
.contact__inner { max-width: 680px; margin: 0 auto; padding: 0 40px; }
.contact__head { text-align: center; }
.contact__head p { color: var(--text-2); margin: 20px auto 0; max-width: 460px; text-wrap: pretty; }
.contact__form { margin-top: 56px; display: flex; flex-direction: column; gap: 24px; }
.contact__submit { display: flex; justify-content: center; margin-top: 4px; }
.contact__alt { margin: 0; text-align: center; }
/* reCAPTCHA v3: the floating badge is hidden, which Google permits when the forms carry the
   attribution note (components.ftl recaptchaNote). */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-note { margin: 12px 0 0; text-align: center; }
.recaptcha-note a { color: inherit; }
.contact__sent { text-align: center; padding: 48px 0; border-top: 1px solid var(--hairline); display: none; }
.contact__sent .material-symbols-outlined { font-size: 44px; color: var(--success); }
.contact__sent h3 { margin-top: 18px; }
.contact__sent p { color: var(--text-2); margin: 12px auto 28px; max-width: 360px; text-wrap: pretty; }
.contact.is-sent .contact__form { display: none; }
.contact.is-sent .contact__sent { display: block; }

/* ---------- Guides ---------- */
.guide-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }

/* Guide search (the /guides combobox; results are filled in by site.js). */
.guide-search { position: relative; margin: 32px 0 40px; }
.guide-search__box { display: flex; align-items: center; gap: 10px; border: var(--border-input); border-radius: var(--radius-md); padding: 12px 16px; background: var(--surface-card); transition: border-color 140ms; }
.guide-search__box:focus-within { border-color: var(--primary); }
.guide-search__box > .material-symbols-outlined { font-size: 20px; color: var(--text-2); }
.guide-search__input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text-1); }
.guide-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.guide-search__spinner { width: 16px; height: 16px; flex: none; border: 2px solid var(--hairline); border-top-color: var(--primary); border-radius: 50%; animation: guide-search-spin 700ms linear infinite; }
@keyframes guide-search-spin { to { transform: rotate(360deg); } }
.guide-search__clear { display: flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.guide-search__clear:hover { background: var(--paper-sunken); color: var(--text-1); }
.guide-search__clear .material-symbols-outlined { font-size: 18px; }
/* display:flex on the class would otherwise beat the UA's [hidden] rule. */
.guide-search__spinner[hidden], .guide-search__clear[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .guide-search__spinner { animation: none; } }
.guide-search__results { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: var(--shadow-dialog); max-height: 420px; overflow-y: auto; }
.guide-search__results li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; }
.guide-search__results li.is-active, .guide-search__results li:hover { background: var(--primary-tint); }
.guide-search__results li[data-empty] { color: var(--text-2); cursor: default; }
.guide-search__results li[data-empty]:hover { background: transparent; }
.guide-search__title { font-weight: var(--fw-semibold); }
.guide-search__snippet { font-size: var(--fs-body-sm); color: var(--text-2); }
.guide-search__snippet mark, .guide-search__title mark { background: transparent; color: var(--primary); font-weight: var(--fw-semibold); }
.guide-search__badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; height: 22px; padding: 0 9px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface-card); font-size: var(--fs-caption); color: var(--text-2); white-space: nowrap; }
.guide-search__badge img { height: 13px; width: auto; display: block; }
.guide-search__badge .material-symbols-outlined { font-size: 14px; color: var(--primary); }

/* Collection overview cards, mirroring the help-center home: two per row. */
.collection-overview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 640px) { .collection-overview { grid-template-columns: 1fr; } }
.collection-card { display: flex; flex-direction: column; gap: 8px; padding: 28px; text-decoration: none; color: var(--text-1); transition: border-color 140ms, transform 140ms var(--ease-out); }
.collection-card:hover { border-color: var(--text-1); transform: translateY(-2px); text-decoration: none; color: var(--text-1); }
.collection-card__logo { height: 26px; width: auto; align-self: flex-start; object-fit: contain; }
.collection-card__icon { font-size: 28px; color: var(--primary); }
.collection-card h3 { margin: 6px 0 0; }
.collection-card p { margin: 0; font-size: var(--fs-body-sm); color: var(--text-2); flex: 1; }

/* Collection pages share the article column; the list sits below the header block. */
.article-page .guide-list { margin-top: 32px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.guide-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; text-decoration: none; color: var(--text-1); transition: border-color 140ms, transform 140ms var(--ease-out); }
.guide-card:hover { border-color: var(--text-1); transform: translateY(-2px); text-decoration: none; color: var(--text-1); }
.guide-card__platforms { display: flex; gap: 6px; flex-wrap: wrap; }
.guide-card h3 { margin: 4px 0 0; }
.guide-card p { margin: 0; font-size: var(--fs-body-sm); color: var(--text-2); flex: 1; }
.guide-card__cta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body-sm); color: var(--primary); font-weight: var(--fw-semibold); }
.guide-card__cta .material-symbols-outlined { font-size: 18px; }

/* ---------- Article (guides + legal, rendered markdown) ---------- */
.article-page { padding: 72px 0 96px; }
.article-page__inner { max-width: 820px; margin: 0 auto; padding: 0 40px; }
.article-page__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0 0; }
.article-page h1 { font-size: 44px; margin-top: 16px; }
.article { margin-top: 40px; }
.article h2 { font-size: var(--fs-display-3); margin: 40px 0 12px; }
.article h3 { font-size: var(--fs-title); margin: 32px 0 10px; }
.article p { margin: 0 0 16px; color: var(--text-1); }
.article li { margin-bottom: 8px; }
.article ol, .article ul { padding-left: 24px; margin: 0 0 16px; }
.article img { border: 1px solid var(--hairline); border-radius: var(--radius-md); margin: 8px 0 16px; }
.article table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.article th, .article td { border: 1px solid var(--hairline); padding: 8px 12px; text-align: left; font-size: var(--fs-body-sm); }
.article th { font-family: var(--font-body); font-weight: var(--fw-semibold); text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; color: var(--text-2); }
.article blockquote { border-left: 3px solid var(--hairline-strong); margin: 0 0 16px; padding: 4px 0 4px 16px; color: var(--text-2); }

/* ---------- Customer stories (solutions) ---------- */
.story { display: flex; gap: 64px; flex-wrap: wrap; align-items: center; }
.story__copy { flex: 1 1 340px; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.story__logo { background: var(--ink); border-radius: var(--radius-md); padding: 20px 26px; }
.story__logo img { display: block; height: 52px; width: auto; }
.story__quote { margin: 0; text-wrap: pretty; }
.story__who { display: flex; flex-direction: column; gap: 4px; }
.story__who span:first-child { font-weight: var(--fw-semibold); }
.story__points { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.story__point { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-body-sm); }
.story__point .material-symbols-outlined { font-size: 20px; color: var(--primary); flex: none; }
.story__platforms { display: flex; align-items: center; gap: 20px; padding-top: 24px; border-top: 1px solid var(--hairline); width: 100%; }
.story__platforms img { height: 20px; width: auto; }
.story__visual { flex: 1 1 340px; position: relative; padding-bottom: 56px; padding-left: 40px; }
.story__visual-bg { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); box-shadow: 0 24px 60px rgba(21, 22, 27, 0.2); }
.story__visual-card { position: absolute; left: 0; bottom: 0; width: 56%; aspect-ratio: 1.586; object-fit: cover; border-radius: 14px; transform: rotate(-4deg); box-shadow: 0 22px 48px rgba(21, 22, 27, 0.3); }

.story-event { position: relative; overflow: hidden; padding: 88px 0 96px; background: var(--ink); }
.story-event__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.story-event__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,32,48,0.72) 0%, rgba(10,32,48,0.80) 45%, rgba(10,32,48,0.94) 100%); }
.story-event__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 44px; }
.story-event__logo { background: #fff; border-radius: var(--radius-md); padding: 22px 34px; box-shadow: 0 18px 48px rgba(4, 16, 26, 0.35); }
.story-event__logo img { display: block; height: 60px; width: auto; }
.story-event__cards { display: flex; justify-content: center; align-items: center; padding-top: 8px; }
.story-event__cards img { width: 300px; aspect-ratio: 1.586; object-fit: cover; border-radius: 14px; box-shadow: 0 22px 54px rgba(4, 16, 26, 0.48); position: relative; }
.story-event__cards img:nth-child(1) { transform: rotate(-11deg) translateY(-28px) scale(0.94); z-index: 1; }
.story-event__cards img:nth-child(2) { transform: scale(1.04); z-index: 3; margin-left: -26px; }
.story-event__cards img:nth-child(3) { transform: rotate(11deg) translateY(-28px) scale(0.94); z-index: 1; margin-left: -26px; }
.story-event__copy { max-width: 780px; text-align: center; display: flex; flex-direction: column; gap: 22px; align-items: center; }
.story-event__copy .caption-label { color: rgba(255, 255, 255, 0.62); }
.story-event__quote { margin: 0; color: #fff; text-wrap: pretty; }
.story-event__who { display: flex; flex-direction: column; gap: 4px; }
.story-event__who span:first-child { color: #fff; font-weight: var(--fw-semibold); }
.story-event__who span:last-child { font-size: var(--fs-body-sm); color: rgba(255, 255, 255, 0.66); }
.story-event__stats { display: flex; gap: 56px; flex-wrap: wrap; justify-content: center; padding-top: 8px; }
.story-event__stat { text-align: center; }
.story-event__stat div:first-child { font-family: var(--font-display); font-size: var(--fs-display-2); color: #fff; }
.story-event__stat div:last-child { font-size: var(--fs-body-sm); color: rgba(255, 255, 255, 0.62); }

/* ---------- Not found / styleguide ---------- */
.not-found { padding: 128px 0; text-align: center; }
.not-found .material-symbols-outlined { font-size: 48px; color: var(--text-3); }
.not-found h1 { font-size: var(--fs-display-2); margin-top: 20px; }
.not-found p { color: var(--text-2); margin: 16px auto 32px; max-width: 420px; }
.not-found__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.sg-section { border-top: 1px dashed var(--hairline-strong); padding-top: 24px; margin-top: 48px; }
.sg-label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 12px; color: var(--callout); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }

/* ---------- Responsive type & rhythm ---------- */
@media (max-width: 720px) {
  h1, .display-1 { font-size: 40px; }
  .page-hero__copy h1 { font-size: 38px; }
  h2, .display-2 { font-size: 32px; }
  h3, .display-3 { font-size: 24px; }
  .wrap { padding: 0 20px; }
  .section { padding: 64px 0; }
  .hero { padding: 56px 0 72px; }
  .hero__copy h1 { font-size: 40px; }
  .hero__phone { display: none; }
  .hero__works-with { grid-template-columns: repeat(2, max-content); }
  .contact__inner, .article-page__inner { padding: 0 20px; }
  .footer { padding: 48px 20px 32px; }
  .cta-band { padding: 88px 20px 80px; }
  .cta-band h2 { font-size: 36px; }
  .faq__side { position: static; }
  .est__logo { flex-basis: 100px; }
  .est__cost { margin-left: 0; text-align: left; width: 100%; }
  .fpanel__cards { height: 230px; width: 300px; }
  .fpanel__cards .gift-card { width: 250px; }
  .story-event__cards img { width: 200px; }
}