/* ZAYD public website: the shared design system.

   Loaded inside the shadow root of every public marketing page: Home
   (<zayd-public-home>), How ZAYD Works (<zayd-company-profile>), About ZAYD
   (<zayd-about>) and the Guarantee terms (<zayd-guarantee>). Page-specific
   rules live in zayd-company-profile.css, zayd-about.css and
   zayd-guarantee.css. The Team & Review Check keeps zayd-public-ui.css.

   Principles: quiet solid navy and light reading surfaces, one blue action
   colour, one type system, readable product previews labelled "Demo data",
   no decorative texture or glow, brief motion that never hides content.
   Colour, type and geometry resolve through zayd-design-tokens.css. */

@font-face {
  font-family: 'ZAYD Inter';
  src: url('/assets/fonts/inter-latin-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:host {
  --night: var(--z-navy-950, #061436);
  --night-2: var(--z-navy-900, #081c4a);
  --night-3: var(--z-navy-850, #0b214d);
  --night-line: rgb(255 255 255 / 10%);
  --paper: var(--z-paper, #f6f8fc);
  --card: var(--z-white, #fff);
  --ink: var(--z-ink, #0b1d48);
  --ink-2: #33415d;
  --muted: #56637b;
  --line: var(--z-line, #dce4ef);
  --line-soft: var(--z-line-soft, #e9eef5);
  --ice: var(--z-ice-300, #9fc3ff);
  --on-night: var(--z-text-on-dark, #f7f9ff);
  --on-night-muted: var(--z-text-on-dark-muted, #b6c2d9);
  --action: var(--z-blue-600, #3565c8);
  --action-hover: #2b57b4;
  --success: var(--z-success, #1e7a57);
  --success-tint: var(--z-success-tint, #e7f6ef);
  --warn: var(--z-warning, #8a5a1b);
  --warn-bar: #c98a3c;
  --warn-tint: var(--z-warning-tint, #fdf4ea);
  --font: var(--z-font-sans, -apple-system, BlinkMacSystemFont, 'ZAYD Inter', 'Inter', 'Segoe UI', sans-serif);
  --ease: var(--z-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --gutter: 24px;
  --wrap: min(1120px, calc(100% - 2 * var(--gutter)));
  --header-h: 64px;
  --section-y: clamp(56px, 3rem + 3.4vw, 96px);
  --radius: 16px;
  --radius-s: 12px;

  display: block;
  min-height: 100svh;
  color: var(--ink);
  background: var(--night);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}

/* On navy surfaces the ring is ice blue. */
.site-header :focus-visible,
.section--night :focus-visible,
.hero :focus-visible,
.cta :focus-visible,
.site-footer :focus-visible,
.skip-link:focus-visible {
  outline-color: var(--ice);
}

/* Programmatic focus after an in-page jump: no ring on the section itself. */
[tabindex='-1']:focus {
  outline: none;
}

.i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: var(--ink);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  padding-top: env(safe-area-inset-top);
  color: var(--on-night);
  background: rgb(6 20 54 / 94%);
  /* The hairline is drawn inside the 64 px bar, so it adds no height. */
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 8%);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}

.site-header__inner {
  display: flex;
  width: var(--wrap);
  min-height: var(--header-h);
  margin: 0 auto;
  align-items: center;
  gap: 16px;
}

.site-header__brand {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  color: var(--on-night-muted);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__brand img {
  width: auto;
  height: 26px;
}

/* Optional page label beside the logo (How ZAYD Works, About ZAYD, ...). It
   is hidden well before it could meet the navigation. */
.site-header__page {
  padding-left: 12px;
  border-left: 1px solid rgb(255 255 255 / 18%);
  font-size: 13.5px;
  font-weight: 600;
}

.site-header__nav {
  display: flex;
  margin-left: auto;
  gap: 2px;
}

.site-header__nav a {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 12px;
  color: var(--on-night-muted);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
  transition: color var(--z-duration-fast, 140ms) ease, background var(--z-duration-fast, 140ms) ease;
}

.site-header__nav a:hover {
  color: #fff;
}

.site-header__nav a[aria-current='page'] {
  color: #fff;
  background: rgb(255 255 255 / 9%);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header__login {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 12px;
  color: var(--on-night-muted);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
}

.site-header__login:hover {
  color: #fff;
}

.site-menu-toggle,
.site-menu {
  display: none;
}

.site-menu-toggle {
  min-height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: var(--on-night);
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
}

.site-menu-toggle__icon {
  position: relative;
  display: block;
  width: 16px;
  height: 10px;
}

.site-menu-toggle__icon i {
  position: absolute;
  left: 0;
  display: block;
  width: 16px;
  height: 1.6px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 180ms ease, top 180ms ease;
}

.site-menu-toggle__icon i:first-child {
  top: 1px;
}

.site-menu-toggle__icon i:last-child {
  top: 7.4px;
}

.site-menu-toggle[aria-expanded='true'] .site-menu-toggle__icon i:first-child {
  top: 4.2px;
  transform: rotate(45deg);
}

.site-menu-toggle[aria-expanded='true'] .site-menu-toggle__icon i:last-child {
  top: 4.2px;
  transform: rotate(-45deg);
}

.site-menu ul {
  display: grid;
}

.site-menu a {
  display: flex;
  min-height: 48px;
  align-items: center;
  padding: 0 14px;
  color: rgb(255 255 255 / 88%);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.site-menu a:hover,
.site-menu a:focus-visible {
  color: #fff;
  background: rgb(255 255 255 / 8%);
  outline: none;
}

.site-menu a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--ice);
}

.site-menu a[aria-current='page'] {
  color: #fff;
  background: rgb(255 255 255 / 6%);
}

.btn__compact {
  display: none;
}

/* ── Buttons and links ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--z-duration-fast, 140ms) ease, border-color var(--z-duration-fast, 140ms) ease, color var(--z-duration-fast, 140ms) ease;
}

.btn .i {
  width: 19px;
  height: 19px;
}

.btn--primary {
  color: #fff;
  background: var(--action);
}

.btn--primary:hover {
  background: var(--action-hover);
}

/* Secondary on navy: an outline that never competes with the primary. */
.btn--ghost {
  color: var(--on-night);
  border-color: rgb(255 255 255 / 26%);
  background: transparent;
}

.btn--ghost:hover {
  border-color: rgb(255 255 255 / 48%);
}

/* Secondary on light surfaces. */
.btn--quiet {
  color: var(--ink);
  border-color: var(--line);
  background: #fff;
}

.btn--quiet:hover {
  border-color: #b9c6d8;
}

.btn--large {
  min-height: 52px;
  padding: 0 26px;
  font-size: 16px;
}

.btn--header {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 6px;
  color: var(--action);
  font-size: 15.5px;
  font-weight: 650;
  text-decoration: none;
}

.text-link .i {
  width: 18px;
  height: 18px;
  transition: transform var(--z-duration-fast, 140ms) ease;
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.text-link:hover .i {
  transform: translateX(2px);
}

.section--night .text-link {
  color: var(--ice);
}

/* ── Sections and type ──────────────────────────────────────────── */
.section {
  padding-block: var(--section-y);
  scroll-margin-top: var(--header-h);
}

.section--paper {
  background: var(--paper);
}

.section--white {
  background: #fff;
}

.section--night {
  color: var(--on-night);
  background: var(--night-2);
}

.section-head {
  max-width: 720px;
}

.eyebrow {
  margin-bottom: 12px;
  color: var(--action);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
}

.section--night .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta .eyebrow {
  color: var(--ice);
}

h1,
h2 {
  font-weight: 650;
  text-wrap: balance;
}

h2 {
  font-size: clamp(28px, 1.2rem + 2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.032em;
}

.section-head > p:not(.eyebrow) {
  max-width: 38em;
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(16px, 0.95rem + 0.25vw, 18.5px);
  line-height: 1.55;
}

.section--night .section-head > p:not(.eyebrow) {
  color: var(--on-night-muted);
}

/* Keeps each phrase of a two-part headline on its own line when it wraps. */
.keep-lines span {
  display: inline-block;
}

h3 {
  font-size: 18px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.note {
  display: flex;
  max-width: 44em;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.note .i {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--action);
}

.note--night {
  color: var(--on-night-muted);
}

.note--night .i {
  color: var(--ice);
}

.attribution {
  margin-top: clamp(40px, 5vw, 56px);
  color: #6b7790;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 2rem + 4vw, 88px) 0 clamp(56px, 3rem + 4vw, 104px);
  color: var(--on-night);
  background: var(--night);
  scroll-margin-top: var(--header-h);
}

.hero__inner {
  display: grid;
  width: var(--wrap);
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.hero__category {
  max-width: 24em;
  margin-bottom: 18px;
  color: var(--ice);
  font-size: clamp(15.5px, 0.85rem + 0.45vw, 19px);
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.hero h1 {
  max-width: 13em;
  font-size: clamp(34px, 1.3rem + 3.3vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.038em;
}

.hero__lede {
  max-width: 34em;
  margin-top: 20px;
  color: var(--on-night-muted);
  font-size: clamp(16.5px, 0.95rem + 0.35vw, 19px);
  line-height: 1.55;
}

.hero__actions {
  display: flex;
  margin-top: 30px;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__note {
  margin-top: 14px;
  color: var(--on-night-muted);
  font-size: 14px;
}

.hero__proof {
  display: flex;
  margin-top: 28px;
  padding-top: 22px;
  flex-wrap: wrap;
  gap: 12px 28px;
  border-top: 1px solid var(--night-line);
  color: var(--on-night);
  font-size: 14.5px;
  font-weight: 550;
}

.hero__proof li {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 10px;
}

.hero__proof .i {
  color: var(--ice);
}

/* The Google Business Profile artwork, unmodified, on a plain white tile so
   its colours stay true on navy. */
.gbp-tile {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border-radius: 8px;
  background: #fff;
}

.gbp-tile img {
  width: 24px;
  height: 24px;
}

.hero__visual {
  position: relative;
  z-index: 0;
  min-width: 0;
  padding-bottom: 28px;
}

/* The ZAYD Card supports the dashboard from behind it: it never covers a
   figure or the "Demo data" label. */
.hero__card {
  position: absolute;
  z-index: -1;
  bottom: -18px;
  left: -150px;
  width: 230px;
  filter: drop-shadow(0 18px 28px rgb(0 5 22 / 50%));
  transform: rotate(-8deg);
  pointer-events: none;
}

/* ── Product previews (labelled demo data) ──────────────────────── */
.dash,
.panel {
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.dash {
  padding: 14px;
  box-shadow: 0 24px 60px rgb(0 6 26 / 34%);
}

.dash--hero {
  position: relative;
  border-color: rgb(255 255 255 / 60%);
}

.dash__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 2px 4px 12px;
  border-bottom: 1px solid var(--line-soft);
}

.dash__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.dash__brand img {
  width: 24px;
  height: 24px;
}

.dash__controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dash__seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #edf1f7;
  font-size: 12px;
  font-weight: 650;
}

.dash__seg b,
.dash__seg span {
  padding: 4px 10px;
  border-radius: 999px;
}

.dash__seg b {
  background: #fff;
  box-shadow: 0 1px 2px rgb(8 28 74 / 12%);
}

.dash__seg span {
  color: var(--muted);
}

.dash__demo {
  padding: 3px 9px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.dash__grid {
  display: grid;
  margin-top: 12px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.dash__card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  background: #fbfcfe;
}

.dash__target,
.dash__board {
  grid-column: 1 / -1;
}

.dash__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.dash__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.dash__meta {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
}

.dash__value {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.dash__value strong {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.dash__value span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.dash__value b {
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dash__target .dash__meta {
  margin-top: 10px;
}

.dash__attention {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-block: 12px;
  border-color: #f1e2cc;
  background: var(--warn-tint);
}

.dash__attention .dash__label {
  color: var(--warn);
}

.dash__attention strong {
  color: var(--warn);
  font-size: 15px;
  font-weight: 700;
}

.chip {
  display: inline-flex;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.chip--good {
  color: var(--success);
  background: var(--success-tint);
}

.chip--warn {
  color: var(--warn);
  background: var(--warn-tint);
}

.bar {
  display: block;
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ecf5;
}

.bar b {
  display: block;
  width: var(--fill);
  height: 100%;
  border-radius: inherit;
  background: var(--action);
}

.bar--thin {
  height: 6px;
  margin: 0;
}

.bar--warn b {
  background: var(--warn-bar);
}

.board {
  margin-top: 6px;
}

.board li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) minmax(48px, 0.9fr) 30px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}

.board li:first-child {
  border-top: 0;
}

.board__rank {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--action);
  border-radius: 50%;
  background: #edf3fc;
  font-size: 12px;
  font-weight: 750;
}

.board__rank--lead {
  color: #8a5a12;
  background: #fbf0dc;
}

.board__who {
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
}

.board__who small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}

.board strong {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Panels: focused product views in light sections. */
.panel {
  padding: 18px 20px 20px;
}

.panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.panel__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.panel__meta {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
}

.panel__head .dash__demo {
  margin-left: auto;
}

.progress-list li,
.outlet-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    'name count chip'
    'bar bar bar';
  align-items: center;
  gap: 8px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.progress-list li:first-child,
.outlet-list li:first-child {
  border-top: 0;
}

.progress-list__name,
.outlet-list__name {
  grid-area: name;
  font-size: 14.5px;
  font-weight: 650;
}

.progress-list__n,
.outlet-list__n {
  grid-area: count;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.progress-list__n strong,
.outlet-list__n strong {
  font-weight: 700;
}

.outlet-list__n small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.progress-list .chip,
.outlet-list .chip {
  grid-area: chip;
  justify-self: end;
  min-width: 88px;
  justify-content: center;
}

.progress-list .bar,
.outlet-list .bar {
  grid-area: bar;
}

.panel-note {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* ── Benefit lists ──────────────────────────────────────────────── */
.benefits {
  display: grid;
  gap: 22px;
}

.benefits li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.benefits .i {
  width: 40px;
  height: 40px;
  padding: 9px;
  color: var(--action);
  border-radius: 50%;
  background: #eaf1fc;
}

.benefits h3 {
  font-size: 17px;
}

.benefits p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
}

/* ── Team Performance ───────────────────────────────────────────── */
.team__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'head panels'
    'list panels';
  align-content: start;
  column-gap: clamp(40px, 6vw, 88px);
}

.team__head {
  grid-area: head;
}

.team__panels {
  display: grid;
  grid-area: panels;
  align-content: start;
  gap: 14px;
}

.team__benefits {
  grid-area: list;
  margin-top: 36px;
}

/* ── Google Business Profile ────────────────────────────────────── */
.gbp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'head card'
    'body card';
  align-content: start;
  column-gap: clamp(40px, 6vw, 88px);
}

.gbp__head {
  grid-area: head;
}

.gbp__body {
  grid-area: body;
  margin-top: 32px;
}

.gbp__body .note {
  margin-top: 28px;
}

.gbp__body .text-link {
  margin-top: 10px;
}

.gbp-lockup {
  display: inline-flex;
  margin-bottom: 22px;
  align-items: center;
  gap: 14px;
}

.gbp-lockup img {
  width: 56px;
  height: 56px;
}

.gbp-lockup span {
  display: grid;
  color: var(--ink);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.25;
}

.gbp-lockup small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.gbp-card {
  grid-area: card;
  /* Centred against the longer text column for optical balance on desktop;
     in the single-column layout the card has its own row, so it is unaffected. */
  align-self: center;
  background: var(--paper);
}

.gbp-card__rows {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.gbp-card__row {
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-s);
  background: #fff;
}

.gbp-card__label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.gbp-card__value {
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.gbp-card__value strong {
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.gbp-card__value small {
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.gbp-card__meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.gbp-card__stats {
  display: grid;
  margin-top: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.gbp-card__stats dt {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.gbp-card__stats dd {
  display: flex;
  margin-top: 4px;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.gbp-card__stats dd i {
  font-style: normal;
}

.gbp-card__stats dd strong {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gbp-card__stats .gbp-card__growth {
  color: var(--success);
}

.gbp-card figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Customer journey ───────────────────────────────────────────── */
.journey__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.journey__card {
  width: 220px;
  margin-right: 12px;
  filter: drop-shadow(0 16px 24px rgb(0 5 22 / 45%));
  transform: rotate(-6deg);
}

.steps {
  display: grid;
  margin-top: clamp(32px, 4vw, 48px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.steps li {
  padding: 22px;
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 4%);
}

.steps__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--ice);
  border-radius: 50%;
  background: rgb(159 195 255 / 12%);
}

.steps__n {
  margin-top: 18px;
  color: var(--ice);
  font-size: 13px;
  font-weight: 650;
}

.steps h3 {
  margin-top: 2px;
  font-size: 20px;
}

.steps li > p:last-child {
  margin-top: 8px;
  color: var(--on-night-muted);
  font-size: 15px;
  line-height: 1.55;
}

.journey .note {
  margin-top: 28px;
}

/* ── Comparison ─────────────────────────────────────────────────── */
.compare__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}

.compare__table-wrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.compare__table th,
.compare__table td {
  padding: 14px 16px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  vertical-align: middle;
}

.compare__table thead th,
.compare__table thead td {
  border-top: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.compare__table tbody th {
  font-weight: 600;
  text-align: left;
}

.compare__table thead .compare__zayd {
  color: var(--action);
  font-size: 14px;
}

.compare__table .compare__zayd {
  width: 22%;
  background: #f3f7fd;
}

.compare__table td:not(.compare__zayd) {
  width: 26%;
}

.compare__table .i--yes {
  width: 22px;
  height: 22px;
  margin: 0 auto;
  color: var(--action);
  stroke-width: 2.2;
}

.compare__table td:not(.compare__zayd) .i--yes {
  color: #8592a8;
}

.i--no {
  display: block;
  width: 14px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: #b9c3d3;
}

/* ── Pricing ────────────────────────────────────────────────────── */
.pricing__layout {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.price-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
}

.price-card__main {
  padding: clamp(24px, 3.4vw, 40px);
  border-right: 1px solid var(--line);
}

.price-card__side {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--paper);
}

.price-card__name,
.price-card__item-name {
  color: var(--muted);
  font-size: 14px;
  font-weight: 650;
}

.price-card__amount {
  margin-top: 6px;
  font-size: clamp(48px, 2rem + 2.6vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.price-card__currency {
  margin-right: 4px;
  font-size: 0.42em;
  font-weight: 650;
  letter-spacing: -0.01em;
  vertical-align: 0.95em;
}

.price-card__included {
  display: inline-flex;
  margin-top: 18px;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  color: var(--success);
  border-radius: 999px;
  background: var(--success-tint);
  font-size: 15px;
  font-weight: 700;
}

.price-card__included .i {
  width: 18px;
  height: 18px;
  stroke-width: 2.2;
}

.price-card__list {
  display: grid;
  margin-top: 22px;
  gap: 12px;
}

.price-card__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.5;
}

.price-card__list .i {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--action);
  stroke-width: 2;
}

.price-card__item {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.price-card__item-price {
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.price-card__item-price strong {
  color: var(--ink);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.price-card__outlets {
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

.price-card__total {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
}

.price-card__actions {
  display: flex;
  margin-top: auto;
  padding-top: 24px;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Promise cards ──────────────────────────────────────────────── */
.promise-grid {
  display: grid;
  margin-top: clamp(28px, 4vw, 44px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.promise {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.promise__icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--action);
  border-radius: 50%;
  background: #eaf1fc;
}

.promise h3 {
  margin-top: 18px;
  font-size: 19px;
}

.promise p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}

.promise .text-link {
  margin-top: auto;
  padding-top: 10px;
}

/* The link to the guarantee terms reads as a link at rest, not only on hover. */
.promise .text-link,
.cp-promises .text-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(28px, 6vw, 88px);
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 4px;
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  width: 10px;
  height: 10px;
  flex: none;
  margin-right: 6px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  content: '';
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--z-duration-fast, 140ms) ease;
}

.faq__item[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.faq__item summary:hover {
  color: var(--action);
}

.faq__answer {
  padding: 0 4px 20px;
}

.faq__answer p {
  max-width: 40em;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}

.faq__answer a {
  color: var(--action);
  font-weight: 650;
}

/* ── Final call to action ───────────────────────────────────────── */
.cta {
  padding-block: clamp(64px, 3rem + 5vw, 112px);
  color: var(--on-night);
  background: var(--night);
  text-align: center;
}

.cta__inner {
  display: grid;
  justify-items: center;
}

.cta h2 {
  max-width: 16em;
}

.cta__inner > p:not(.cta__note) {
  max-width: 34em;
  margin-top: 16px;
  color: var(--on-night-muted);
  font-size: clamp(16px, 0.95rem + 0.3vw, 18.5px);
  line-height: 1.55;
}

.cta__actions {
  display: flex;
  margin-top: 30px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.cta__note {
  margin-top: 14px;
  color: var(--on-night-muted);
  font-size: 14px;
}

.cta__check {
  display: inline-flex;
  min-height: 44px;
  margin-top: 18px;
  align-items: center;
  color: var(--ice);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(159 195 255 / 45%);
  text-underline-offset: 4px;
}

.cta__check:hover {
  text-decoration-color: currentColor;
}

/* ── Footer (shadow-rooted pages; the homepage footer lives in index.html
   with the same links) ─────────────────────────────────────────── */
.site-footer {
  padding: 48px 0 calc(40px + env(safe-area-inset-bottom));
  color: var(--on-night-muted);
  border-top: 1px solid rgb(255 255 255 / 8%);
  background: var(--night);
  font-size: 14px;
}

.site-footer__inner {
  display: grid;
  width: var(--wrap);
  margin: 0 auto;
  gap: 20px;
}

.site-footer__brand img {
  width: auto;
  height: 24px;
}

.site-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.site-footer__brand p {
  font-size: 14px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
}

.site-footer nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--on-night-muted);
  text-decoration: none;
}

.site-footer nav a:hover,
.site-footer nav a[aria-current='page'] {
  color: #fff;
}

.site-footer__legal {
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 8%);
  color: #8e9bb4;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ── Page hero for the inner pages ──────────────────────────────── */
.page-hero {
  padding: clamp(48px, 2.5rem + 4vw, 96px) 0 clamp(48px, 2.5rem + 4vw, 88px);
  color: var(--on-night);
  background: var(--night);
}

.page-hero h1 {
  max-width: 15em;
  font-size: clamp(34px, 1.3rem + 3.1vw, 56px);
  line-height: 1.06;
  letter-spacing: -0.036em;
}

.page-hero__lede {
  max-width: 36em;
  margin-top: 18px;
  color: var(--on-night-muted);
  font-size: clamp(16.5px, 0.95rem + 0.35vw, 19px);
  line-height: 1.55;
}

.page-hero__actions {
  display: flex;
  margin-top: 28px;
  flex-wrap: wrap;
  gap: 12px;
}

.page-hero .hero__note {
  margin-top: 14px;
}

/* An inner-page hero with one supporting image on the right. */
.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 40px;
}

.page-hero__card {
  width: 300px;
  margin-right: 8px;
  filter: drop-shadow(0 22px 32px rgb(0 5 22 / 50%));
  transform: rotate(-7deg);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1179px) {
  .site-header__page {
    display: none;
  }
}

@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__copy {
    max-width: 680px;
  }

  .hero__visual {
    width: min(640px, 100%);
  }

  .hero__card {
    right: -64px;
    bottom: -18px;
    left: auto;
    width: 180px;
    transform: rotate(8deg);
  }
}

@media (max-width: 960px) {
  .page-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-hero__card {
    display: none;
  }

  .site-header__nav,
  .site-header__login {
    display: none;
  }

  .site-header__actions {
    margin-left: auto;
  }

  .site-menu-toggle {
    display: inline-flex;
  }

  .site-menu:not([hidden]) {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: block;
    width: var(--wrap);
    margin: 0 auto;
    padding: 8px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 18px;
    background: #0a1b45;
    box-shadow: 0 24px 60px rgb(0 6 26 / 45%);
  }

  .team__layout,
  .gbp__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'head'
      'panels'
      'list';
  }

  .gbp__layout {
    grid-template-areas:
      'head'
      'card'
      'body';
  }

  .team__panels,
  .gbp-card {
    margin-top: 32px;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare__layout,
  .faq__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-card__main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .promise-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .promise .text-link {
    margin-top: 6px;
    padding-top: 0;
  }

}

@media (max-width: 600px) {
  :host {
    --gutter: 16px;
    --header-h: 60px;
  }

  .hero__actions,
  .page-hero__actions,
  .cta__actions {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  .cta__actions {
    max-width: 420px;
  }

  .hero__proof {
    flex-direction: column;
    gap: 10px;
  }

  .hero__visual {
    padding-bottom: 0;
  }

  .hero__card {
    display: none;
  }

  .journey__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .journey__card {
    width: 150px;
    margin: 4px 0 0;
  }

  .dash {
    padding: 10px;
  }

  .dash__card {
    padding: 14px;
  }

  .dash__seg {
    display: none;
  }

  .dash__value strong {
    font-size: 34px;
  }

  .board li {
    grid-template-columns: 26px minmax(0, 1fr) 30px;
  }

  .board .bar {
    display: none;
  }

  .panel {
    padding: 16px;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .steps li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px;
  }

  .steps__icon {
    grid-row: span 3;
  }

  .steps__n {
    margin-top: 0;
  }

  .compare__table th,
  .compare__table td {
    padding: 12px 10px;
  }

  .compare__table {
    font-size: 14.5px;
  }

  .compare__table thead th,
  .compare__table thead td {
    font-size: 12px;
  }

  .gbp-card__stats {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .gbp-card__stats div:last-child {
    grid-column: 1 / -1;
  }

  .price-card__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .promise {
    padding: 22px;
  }
}

@media (max-width: 420px) {
  .btn__full {
    display: none;
  }

  .btn__compact {
    display: inline;
  }

  .btn--header {
    padding: 0 14px;
  }

  .site-menu-toggle {
    padding: 0 12px;
  }

  .site-header__inner {
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .site-header__brand img {
    height: 22px;
  }

  .progress-list .chip,
  .outlet-list .chip {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}