/* ==========================================================================
   Amazonics UI — light design system
   Target: "UI Design.png". Hand-written because dist/tailwind.css is a
   pre-purged DARK-theme build with no light neutrals and no way to rebuild.
   Load order: logo.css -> effects.css -> chat-hide.css -> tailwind.css -> THIS
   Everything is prefixed .az- so it cannot collide with the legacy utilities.
   ========================================================================== */

:root {
  /* surfaces */
  --az-white:        #FFFFFF;
  --az-cream:        #FDF4E3;
  --az-cream-soft:   #FFFBF3;
  --az-paper:        #F7F8FA;
  --az-ink:          #0A0A0C;   /* black sections */
  --az-ink-2:        #121215;   /* cards on black */
  --az-ink-3:        #17171B;   /* raised card on black */

  /* text */
  --az-text:         #0B0B0F;
  --az-text-2:       #3F4650;
  --az-muted:        #6B7280;
  --az-muted-dark:   #A0A6B0;   /* muted text on black */
  --az-on-dark:      #FFFFFF;

  /* brand */
  --az-accent:       #F8B027;
  --az-accent-2:     #FF9900;
  --az-accent-soft:  rgba(248, 176, 39, .12);
  --az-accent-line:  rgba(248, 176, 39, .38);

  /* lines */
  --az-line:         #E7EAEF;
  --az-line-strong:  #D6DBE2;
  --az-line-dark:    rgba(255, 255, 255, .10);
  --az-line-dark-2:  rgba(255, 255, 255, .16);

  /* shape */
  --az-r-xs: 6px;
  --az-r-sm: 8px;
  --az-r:    10px;
  --az-r-lg: 14px;
  --az-r-xl: 18px;
  --az-r-pill: 999px;

  /* elevation */
  --az-shadow-sm: 0 1px 2px rgba(11, 11, 15, .05);
  --az-shadow:    0 8px 24px -12px rgba(11, 11, 15, .18);
  --az-shadow-lg: 0 28px 60px -30px rgba(11, 11, 15, .28);

  /* rhythm */
  --az-pad-x: 24px;
  --az-max:   1200px;
  --az-sec-y: 88px;
}

/* --------------------------------------------------------------------------
   1. Page base
   effects.css forces the families with !important (Inter body / Space Grotesk
   headings) — that already matches the mockup, so we do not fight it.
   -------------------------------------------------------------------------- */

body.az-page {
  background: var(--az-white);
  color: var(--az-text);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* effects.css sets white-on-gold selection, unreadable on white sections */
body.az-page ::selection { background: rgba(248, 176, 39, .32); color: #0B0B0F; }

.az-page h1, .az-page h2, .az-page h3, .az-page h4, .az-page h5, .az-page h6 { color: var(--az-text); }
.az-page p { color: var(--az-muted); }
.az-page a { color: inherit; text-decoration: none; }

.az-container {
  width: 100%;
  max-width: var(--az-max);
  margin-inline: auto;
  padding-inline: var(--az-pad-x);
}
.az-container--wide { max-width: 1320px; }

.az-section { padding-block: var(--az-sec-y); background: var(--az-white); position: relative; }
.az-section--paper { background: var(--az-paper); }
.az-section--cream { background: linear-gradient(180deg, var(--az-cream-soft) 0%, var(--az-white) 100%); }
.az-section--dark  { background: var(--az-ink); }
.az-section--tight { padding-block: 56px; }
.az-section--flush-bottom { padding-bottom: 0; }

.az-section--dark h1, .az-section--dark h2, .az-section--dark h3,
.az-section--dark h4, .az-section--dark h5, .az-section--dark h6 { color: var(--az-on-dark); }
.az-section--dark p { color: var(--az-muted-dark); }

/* --------------------------------------------------------------------------
   2. Type scale
   -------------------------------------------------------------------------- */

.az-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--az-accent-2);
  margin-bottom: 14px;
}
.az-eyebrow--center { display: block; text-align: center; }

.az-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--az-r-pill);
  background: var(--az-accent-soft);
  border: 1px solid var(--az-accent-line);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #A9741A;
}
.az-pill i { color: var(--az-accent-2); font-size: .78rem; }

.az-h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.35rem);
  line-height: 1.03;
  font-weight: 700;
  letter-spacing: -.035em;
  margin: 0 0 22px;
}
.az-h1 .az-accent-text { color: var(--az-accent); display: block; }

.az-h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.45rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.028em;
  margin: 0 0 12px;
}
.az-h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; }

.az-lead { font-size: 1rem; line-height: 1.72; color: var(--az-muted); margin: 0; max-width: 46ch; }
.az-lead strong { color: var(--az-text); font-weight: 600; }
.az-section--dark .az-lead strong { color: var(--az-on-dark); }

.az-head { margin-bottom: 44px; }
.az-head--center { text-align: center; margin-inline: auto; max-width: 720px; }
.az-head--center .az-lead { margin-inline: auto; }
.az-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.az-head--split .az-lead { max-width: 52ch; }

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.az-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--az-r-sm);
  font-size: .88rem;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.az-btn i { font-size: .78rem; }
.az-btn:hover { transform: translateY(-1px); }

.az-btn--dark   { background: var(--az-ink); color: #fff; box-shadow: var(--az-shadow-sm); }
.az-btn--dark:hover { background: #22242A; box-shadow: var(--az-shadow); }

.az-btn--ghost  { background: var(--az-white); color: var(--az-text); border-color: var(--az-line-strong); }
.az-btn--ghost:hover { border-color: var(--az-text); }

.az-btn--accent { background: var(--az-accent); color: #1A1204; }
.az-btn--accent:hover { background: var(--az-accent-2); }

.az-btn--accent-outline { background: transparent; color: var(--az-accent); border-color: var(--az-accent-line); }
.az-btn--accent-outline:hover { background: var(--az-accent); color: #1A1204; border-color: var(--az-accent); }

.az-btn--sm { padding: 11px 20px; font-size: .8rem; }
.az-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   4. Navigation
   The header is the mockup's white bar. #mobile-menu deliberately gets NO
   display property here — its state is Tailwind's .hidden and an id selector
   would outrank it, permanently jamming the menu open.
   -------------------------------------------------------------------------- */

.az-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;                      /* under #scroll-progress (9999) */
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--az-line);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.az-nav.scrolled { box-shadow: 0 6px 24px -16px rgba(11, 11, 15, .35); background: rgba(255, 255, 255, .97); }

.az-nav__bar { display: flex; align-items: center; gap: 28px; height: 74px; }
.az-nav__logo { flex: none; display: flex; align-items: center; }
.az-nav__logo img { height: 34px; width: auto; display: block; object-fit: contain; }

.az-nav__links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }

.az-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--az-text-2);
  border-radius: var(--az-r-xs);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color .2s ease;
}
.az-nav__link:hover { color: var(--az-text); }
.az-nav__link i { font-size: .62rem; opacity: .7; transition: transform .2s ease; }

/* active item: ink label with the mockup's short orange underline */
.az-nav__link.is-active { color: var(--az-text); font-weight: 600; }
.az-nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--az-accent);
}

.az-nav__cta { flex: none; }

/* dropdown — keeps the legacy .group > button + sibling panel structure */
.az-drop { position: relative; }
.az-drop__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 216px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-lg);
  box-shadow: var(--az-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Hover only where hovering is real. On touch, :hover sticks after a tap and
   leaves the panel hanging open, so those devices use the .is-open class the
   nav script toggles instead. */
@media (hover: hover) and (pointer: fine) {
  .az-drop:hover .az-drop__panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .az-drop:hover .az-nav__link i { transform: rotate(180deg); }
}
.az-drop:focus-within .az-drop__panel,
.az-drop.is-open .az-drop__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.az-drop.is-open .az-nav__link i { transform: rotate(180deg); }

/* The panel sits 6px below the button. Without this bridge the pointer
   crosses dead space on the way down and the panel closes under it. */
.az-drop__panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.az-drop__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--az-r-xs);
  font-size: .85rem;
  font-weight: 500;
  color: var(--az-text-2);
  transition: background-color .15s ease, color .15s ease;
}
.az-drop__panel a:hover { background: var(--az-paper); color: var(--az-text); }

/* Amazon-first grouping inside the Services dropdown */
.az-drop__group {
  display: block;
  padding: 10px 12px 5px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--az-muted);
}
.az-drop__group:first-child { padding-top: 4px; }
.az-drop__group:first-child + a { font-weight: 700; color: var(--az-text); }
.az-drop__sep { display: block; height: 1px; margin: 8px 6px 2px; background: var(--az-line); }

/* mobile header + drawer */
.az-nav__mobile { display: none; align-items: center; justify-content: space-between; height: 66px; }
.az-nav__burger {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--az-r-sm);
  border: 1px solid var(--az-line);
  background: #fff;
  color: var(--az-text);
  cursor: pointer;
}
.az-drawer { border-top: 1px solid var(--az-line); padding: 12px 0 20px; }
.az-drawer__label { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--az-muted); padding: 12px 4px 6px; }
.az-drawer a {
  display: block;
  padding: 11px 4px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--az-text-2);
  border-radius: var(--az-r-xs);
}
.az-drawer a:hover { color: var(--az-accent-2); }
.az-drawer__sub a { padding-left: 16px; font-size: .9rem; color: var(--az-muted); }
.az-drawer .az-btn { margin-top: 14px; }

/* every page offsets its first section by the fixed bar */
.az-page { padding-top: 74px; }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.az-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 520px at 88% 6%, var(--az-cream) 0%, rgba(253, 244, 227, 0) 62%),
    linear-gradient(180deg, #fff 0%, #fff 100%);
  padding-block: 72px 64px;
}
.az-hero__grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.az-hero__copy { max-width: 560px; }
.az-hero .az-lead { margin-bottom: 32px; }
.az-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }

.az-proof { display: flex; align-items: center; gap: 14px; }
.az-proof__faces { display: flex; }
.az-proof__face {
  width: 34px; height: 34px;
  margin-right: -10px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 800; color: #fff;
  box-shadow: var(--az-shadow-sm);
}
.az-proof__face:nth-child(1) { background: linear-gradient(140deg, #F8B027, #E08A0B); }
.az-proof__face:nth-child(2) { background: linear-gradient(140deg, #2E3846, #10151D); }
.az-proof__face:nth-child(3) { background: linear-gradient(140deg, #FF9900, #C96A00); }
.az-proof__face:nth-child(4) { background: linear-gradient(140deg, #4A5566, #232B36); }
.az-proof__text { font-size: .82rem; color: var(--az-muted); }
.az-proof__text b { color: var(--az-text); font-weight: 700; }

/* orbital brand stage — the mockup's ringed 'a' mark with floating chips */
.az-orbit { position: relative; display: grid; place-items: center; min-height: 480px; }
.az-orbit__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(248, 176, 39, .26);
  pointer-events: none;
}
.az-orbit__ring--1 { width: 462px; height: 462px; }
.az-orbit__ring--2 { width: 366px; height: 366px; border-style: dashed; border-color: rgba(248, 176, 39, .22); }
.az-orbit__ring--3 { width: 268px; height: 268px; border-color: rgba(248, 176, 39, .16); }
.az-orbit__glow {
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 153, 0, .12) 0%, rgba(255, 153, 0, 0) 65%);
  pointer-events: none;
}
.az-orbit__mark { position: relative; z-index: 2; width: min(300px, 74%); }
/* the Seller Central illustration is landscape (600x400), so it needs more
   room inside the rings than the square stacked lockup did */
.az-orbit__mark--wide { width: min(460px, 98%); }
.az-orbit__mark img { width: 100%; height: auto; display: block; object-fit: contain; }

.az-orbit__chip {
  position: absolute;
  z-index: 3;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--az-line);
  box-shadow: 0 14px 30px -16px rgba(11, 11, 15, .4);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  color: var(--az-text);
  animation: az-bob 6s ease-in-out infinite;
}
.az-orbit__chip i { background: linear-gradient(140deg, #F8B027, #FF9900); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.az-orbit__chip--tr { top: 6%;  right: 10%; animation-delay: -.6s; }
.az-orbit__chip--l  { top: 34%; left: 2%;   animation-delay: -2.1s; }
.az-orbit__chip--r  { top: 44%; right: 0;   animation-delay: -3.4s; }
.az-orbit__chip--b  { bottom: 12%; left: 34%; animation-delay: -4.7s; }

@keyframes az-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* --------------------------------------------------------------------------
   6. Trusted-by strip
   -------------------------------------------------------------------------- */

.az-trust {
  background: #fff;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-lg);
  box-shadow: var(--az-shadow);
  padding: 26px 32px;
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.az-trust__label {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* #FF9900 on white is only ~2.2:1 — too faint for an 11px label.
     This darker orange keeps the brand read and passes AA for small text. */
  color: #B47A0B;
  flex: none;
  max-width: 132px;
  line-height: 1.45;
}
.az-trust__marks {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  place-items: center;
  gap: 20px;
}

/* Every logo PNG carries a different amount of transparent padding, so an
   identical `height` renders wildly different optical sizes — the ink is 23%
   of the file height in amazon.webp but 98% in etsy.webp, i.e. a 4x difference.
   Each mark therefore gets a --s scale tuned from its measured alpha bounding
   box, so all five end up with ~25px of visible ink. Scale is applied as a
   transform (not height) so the strip's row height stays compact and the
   oversized transparent margins simply overhang into the grid gap. */
.az-trust__marks img {
  height: 46px;
  width: auto;
  object-fit: contain;
  opacity: .92;
  transform: scale(var(--s, 1));
  transform-origin: center;
}
.az-trust__marks img:hover { transform: scale(calc(var(--s, 1) * 1.05)); }

.az-mark--amazon  { --s: 2.35; }   /* ink 106/456 of file height */
.az-mark--walmart { --s: 1.63; }   /* ink 131/395 */
.az-mark--ebay    { --s: 1.65; }   /* ink 123/375 */
.az-mark--etsy    { --s: 0.57; }   /* ink 162/166 — almost no padding */
.az-mark--tiktok  { --s: 0.80; }   /* ink 161/240 */

/* amazon.webp and etsy.webp are PURE WHITE artwork — invert them on the light strip */
.az-trust__marks img.az-ink-mark { filter: brightness(0); opacity: .85; }

/* no shopify asset exists in the repo — Font Awesome's brand mark + wordmark,
   sized to sit at the same optical weight as the five image marks */
.az-trust__marks .az-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.035em;
  color: #0B0B0F;
  opacity: .92;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.az-trust__marks .az-wordmark i { font-size: 1.35rem; }
.az-trust__marks .az-wordmark:hover { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   7. Service cards (on black)
   -------------------------------------------------------------------------- */

.az-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.az-cards--4 { grid-template-columns: repeat(4, 1fr); }
.az-cards--3 { grid-template-columns: repeat(3, 1fr); }
.az-cards--2 { grid-template-columns: repeat(2, 1fr); }

.az-card {
  background: var(--az-ink-2);
  border: 1px solid var(--az-line-dark);
  border-radius: var(--az-r);
  padding: 24px 20px 26px;
  transition: border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.az-card:hover { border-color: var(--az-accent-line); background: var(--az-ink-3); transform: translateY(-3px); }
.az-card__icon { font-size: 1.45rem; color: var(--az-accent); margin-bottom: 30px; display: block; }
.az-card h3 { color: #fff; font-size: .96rem; font-weight: 700; margin: 0 0 8px; }
.az-card p  { color: var(--az-muted-dark); font-size: .8rem; line-height: 1.62; margin: 0; }
.az-card__more { display: inline-block; margin-top: 14px; font-size: .78rem; font-weight: 700; color: var(--az-accent); }
.az-card__more:hover { color: var(--az-accent-2); }

/* light variant for white sections */
.az-card--light { background: #fff; border-color: var(--az-line); box-shadow: var(--az-shadow-sm); }
.az-card--light:hover { border-color: var(--az-accent-line); background: #fff; box-shadow: var(--az-shadow); }
.az-card--light h3 { color: var(--az-text); }
.az-card--light p  { color: var(--az-muted); }

.az-ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.az-ticks li { position: relative; padding-left: 20px; font-size: .78rem; line-height: 1.5; color: var(--az-muted-dark); }
.az-ticks li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; font-size: .62rem; color: var(--az-accent); }
.az-card--light .az-ticks li { color: var(--az-muted); }

/* --------------------------------------------------------------------------
   8. Stats strip — the white slab that straddles the black section edge
   -------------------------------------------------------------------------- */

.az-statwrap { background: linear-gradient(180deg, var(--az-ink) 0%, var(--az-ink) 50%, var(--az-white) 50%, var(--az-white) 100%); }
.az-stats {
  background: #fff;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-lg);
  box-shadow: var(--az-shadow-lg);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
}
.az-stats--4 { grid-template-columns: repeat(4, 1fr); }
.az-stat { padding: 30px 18px; text-align: center; border-right: 1px solid var(--az-line); }
.az-stat:last-child { border-right: 0; }
.az-stat__icon {
  width: 36px; height: 36px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--az-accent);
  color: #241905;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
}
.az-stat__num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--az-text);
  line-height: 1.1;
}
.az-stat__label { display: block; margin-top: 5px; font-size: .76rem; color: var(--az-muted); }

/* --------------------------------------------------------------------------
   9. How it works — numbered timeline
   -------------------------------------------------------------------------- */

.az-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.az-steps::before {
  content: "";
  position: absolute;
  top: 46px;
  left: 12.5%; right: 12.5%;
  height: 1px;
  background: var(--az-line-strong);
}
.az-step { position: relative; text-align: center; padding-top: 12px; }
.az-step__badge {
  position: relative;
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--az-line);
  box-shadow: var(--az-shadow);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  color: var(--az-text);
}
.az-step__badge i { background: linear-gradient(140deg, #2C333D, #0B0B0F); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.az-step__n {
  position: absolute;
  top: -10px; left: -10px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--az-accent);
  color: #241905;
  font-size: .74rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.az-step h3 { font-size: .98rem; margin-bottom: 6px; }
.az-step p  { font-size: .8rem; line-height: 1.6; max-width: 24ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   10. Testimonials (on black)
   -------------------------------------------------------------------------- */

.az-quotes { position: relative; }
.az-quote {
  background: var(--az-ink-2);
  border: 1px solid var(--az-line-dark);
  border-radius: var(--az-r);
  padding: 24px 22px;
  height: 100%;
}
.az-quote__mark { font-size: 1.5rem; color: var(--az-accent); line-height: 1; margin-bottom: 10px; display: block; }
.az-quote__stars { color: var(--az-accent); font-size: .78rem; letter-spacing: 2px; margin-bottom: 12px; }
.az-quote__body { color: #C8CCD3; font-size: .82rem; line-height: 1.68; margin: 0 0 18px; }
.az-quote__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.az-quote__who { display: flex; align-items: center; gap: 10px; }
.az-quote__ava {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--az-accent);
  color: #241905;
  font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.az-quote__name { color: #fff; font-size: .82rem; font-weight: 600; }
.az-quote__role { color: var(--az-accent); font-size: .72rem; font-weight: 600; }

.az-quotes__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--az-line-dark-2);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .8rem;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.az-quotes__arrow:hover { border-color: var(--az-accent); color: var(--az-accent); }
.az-quotes__arrow--prev { left: -58px; }
.az-quotes__arrow--next { right: -58px; }

.az-dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.az-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(248,176,39,.3); cursor: pointer; padding: 0; transition: transform .2s ease, background-color .2s ease; }

/* --------------------------------------------------------------------------
   11. CTA banner
   -------------------------------------------------------------------------- */

.az-cta {
  border: 1px solid var(--az-accent);
  border-radius: var(--az-r-lg);
  background: linear-gradient(120deg, rgba(248,176,39,.06) 0%, rgba(248,176,39,.02) 100%), var(--az-ink-2);
  padding: 30px 34px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.az-cta__icon { font-size: 2rem; color: var(--az-accent); flex: none; }
.az-cta__text { flex: 1; min-width: 240px; }
.az-cta__text h2 { font-size: clamp(1.15rem, 2.2vw, 1.55rem); margin: 0 0 6px; color: #fff; letter-spacing: -.02em; }
.az-cta__text p  { margin: 0; font-size: .85rem; color: var(--az-muted-dark); }
.az-cta__note { width: 100%; margin: 4px 0 0; font-size: .76rem; color: var(--az-muted-dark); }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.az-footer { background: var(--az-ink); padding-block: 56px 0; }
.az-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 34px; }
.az-footer__brand img { height: 34px; width: auto; margin-bottom: 16px; display: block; object-fit: contain; }
.az-footer__brand p { font-size: .8rem; line-height: 1.7; color: var(--az-muted-dark); margin: 0 0 20px; max-width: 30ch; }

.az-social { display: flex; gap: 9px; }
.az-social a {
  width: 34px; height: 34px;
  border-radius: var(--az-r-xs);
  background: rgba(255,255,255,.07);
  border: 1px solid var(--az-line-dark);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.az-social a:hover { background: var(--az-accent); border-color: var(--az-accent); color: #241905; }

.az-fcol h4 {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--az-accent-2);
  margin: 0 0 16px;
}
.az-fcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.az-fcol a, .az-fcol li { font-size: .82rem; color: var(--az-muted-dark); }
.az-fcol a:hover { color: #fff; }
.az-fcol--contact li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.55; }
.az-fcol--contact i { color: var(--az-accent); font-size: .78rem; margin-top: 4px; flex: none; }

.az-footer__bar {
  margin-top: 44px;
  border-top: 1px solid var(--az-line-dark);
  padding-block: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.az-footer__bar small, .az-footer__bar a { font-size: .78rem; color: var(--az-muted-dark); }
.az-footer__bar a:hover { color: #fff; }
.az-footer__legal { display: flex; gap: 26px; flex-wrap: wrap; }

/* ==========================================================================
   12b. AMAZON-FIRST LAYER
   The brand is an Amazon agency: "Amazon" appears 11,151 times site-wide vs
   2,693 for the next marketplace, and 56 of 109 blog posts are Amazon. The
   other marketplaces stay (they are real SEO assets) but are demoted to a
   clearly secondary tier everywhere they appear beside Amazon.
   ========================================================================== */

/* Amazon orange leads on calls to action; the softer logo gold stays for
   surfaces, icons and rules so the lockup still ties in. */
.az-btn--accent { background: var(--az-accent-2); color: #21160A; }
.az-btn--accent:hover { background: #E68A00; }

/* --- the swoosh: the upward arrow from the Amazonics lockup, reused as the
       brand's signature rule. NOT Amazon's smile mark — that is their
       trademark; this is drawn from the client's own logo artwork. --------- */
.az-swoosh {
  display: block;
  width: 108px;
  height: 22px;
  margin-top: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 26'%3E%3Cpath d='M5 9c26 15 72 15 99-3' fill='none' stroke='%23FF9900' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M95 0l14 5-10 9z' fill='%23FF9900'/%3E%3C/svg%3E") no-repeat left center;
  background-size: contain;
}
.az-swoosh--center { margin-inline: auto; }
.az-head--center .az-swoosh { margin-inline: auto; }

/* --- "Amazon" tag for the services that are Amazon-only ------------------- */
.az-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  margin-bottom: 10px;
  border-radius: var(--az-r-pill);
  background: rgba(255, 153, 0, .14);
  border: 1px solid rgba(255, 153, 0, .42);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #C98A0C;
  transform: translateZ(8px);
}
.az-card--light .az-chip { color: #A8710A; }

/* --- trust strip, Amazon-first ------------------------------------------- */
.az-trust--lead { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 28px; }
.az-trust__primary { display: flex; flex-direction: column; gap: 8px; }
.az-trust__primary img { height: 56px; width: auto; transform: scale(2.35); transform-origin: left center; }
.az-trust__primary .az-trust__label { max-width: none; }
.az-trust__rule { width: 1px; align-self: stretch; min-height: 54px; background: var(--az-line); }
.az-trust__also { display: flex; flex-direction: column; gap: 10px; }
.az-trust__also .az-trust__label { font-size: .66rem; color: var(--az-muted); letter-spacing: .11em; max-width: none; }
/* the secondary marks sit at ~60% of Amazon's optical weight */
.az-trust__also .az-trust__marks { grid-template-columns: repeat(4, 1fr); gap: 14px; }
.az-trust__also .az-trust__marks img { height: 30px; opacity: .7; }
.az-trust__also .az-trust__marks .az-wordmark { font-size: 1rem; opacity: .7; }
.az-trust__also .az-trust__marks .az-wordmark i { font-size: .95rem; }

/* --- full-width statement band (the account-protection proof point) ------- */
.az-band {
  background: var(--az-ink);
  border-block: 1px solid rgba(255, 153, 0, .28);
  padding-block: 34px;
}
.az-band__inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; text-align: center; }
.az-band__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255, 153, 0, .13);
  border: 1px solid rgba(255, 153, 0, .4);
  color: var(--az-accent-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex: none;
  transform: translateZ(8px);
}
.az-band__text { text-align: left; }
.az-band__text strong {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
  line-height: 1.2;
}
.az-band__text span { display: block; margin-top: 5px; font-size: .86rem; color: var(--az-muted-dark); }

@media (max-width: 900px) {
  .az-trust--lead { grid-template-columns: 1fr; gap: 20px; }
  .az-trust__rule { width: 100%; height: 1px; min-height: 0; }
  .az-trust__primary img { transform: scale(2.35) translateX(2px); }
  .az-band__inner { flex-direction: column; }
  .az-band__text { text-align: center; }
}

/* --- scrollbars ------------------------------------------------------------
   The mobile drawer is white now, but its track was a translucent white left
   over from the dark theme, i.e. invisible. And only contact.html ever styled
   the page-level scrollbar (dark track + gold thumb); on a light page the gold
   thumb drops to 1.68:1 and disappears. Both are settled here so every page
   gets the same scrollbar instead of one page differing.                    */
.az-page #mobile-menu::-webkit-scrollbar-track { background: #EEF1F5; }
.az-page #mobile-menu::-webkit-scrollbar-thumb { background: #B47A0B; }        /* 3.30:1 */

body.az-page::-webkit-scrollbar { width: 12px; }
body.az-page::-webkit-scrollbar-track { background: #F1F3F6; }
body.az-page::-webkit-scrollbar-thumb { background: #B47A0B; border-radius: 6px; }
body.az-page::-webkit-scrollbar-thumb:hover { background: #8C5E07; }
.az-page { scrollbar-color: #B47A0B #F1F3F6; }                                 /* Firefox */

/* --------------------------------------------------------------------------
   13. Inner-page header (used by every non-home page)
   -------------------------------------------------------------------------- */

.az-phead {
  background:
    radial-gradient(760px 320px at 82% 0%, var(--az-cream) 0%, rgba(253,244,227,0) 66%),
    var(--az-white);
  border-bottom: 1px solid var(--az-line);
  padding-block: 64px 56px;
  text-align: center;
}
.az-phead .az-h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.az-phead .az-lead { margin-inline: auto; text-align: center; max-width: 62ch; }
.az-crumb { display: flex; justify-content: center; gap: 8px; font-size: .78rem; color: var(--az-muted); margin-bottom: 16px; }
.az-crumb a:hover { color: var(--az-accent-2); }
/* the grey is for the "/" separator ONLY — it is 1.39:1 on white, so a
   current-page label wearing it is invisible. Separators are aria-hidden. */
.az-crumb span[aria-hidden] { color: var(--az-line-strong); }
.az-crumb span[aria-current] { color: var(--az-text-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   14. Small helpers
   -------------------------------------------------------------------------- */

.az-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.az-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.az-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.az-center { text-align: center; }
.az-mt-l { margin-top: 40px; }
.az-only-desktop { display: block; }
.az-only-mobile  { display: none; }

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .az-quotes__arrow--prev { left: -12px; }
  .az-quotes__arrow--next { right: -12px; }
}

@media (max-width: 1024px) {
  :root { --az-sec-y: 68px; }
  .az-nav__links { gap: 0; }
  .az-nav__link { padding: 10px 10px; font-size: .82rem; }
  .az-cards { grid-template-columns: repeat(3, 1fr); }
  .az-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; row-gap: 38px; }
  .az-orbit { min-height: 400px; }
  .az-orbit__ring--1 { width: 380px; height: 380px; }
  .az-orbit__ring--2 { width: 300px; height: 300px; }
  .az-orbit__ring--3 { width: 220px; height: 220px; }
}

@media (max-width: 900px) {
  .az-nav__bar { display: none; }
  .az-nav__mobile { display: flex; }
  .az-page { padding-top: 66px; }
  .az-hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .az-hero__copy { max-width: none; }
  .az-hero .az-lead { max-width: none; }
  .az-steps { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .az-steps::before { display: none; }
  .az-stats { grid-template-columns: repeat(3, 1fr); }
  .az-stat { border-bottom: 1px solid var(--az-line); }
  .az-stat:nth-child(3n) { border-right: 0; }
  .az-grid-3, .az-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .az-head--split { align-items: flex-start; }
}

@media (max-width: 720px) {
  :root { --az-pad-x: 18px; --az-sec-y: 54px; }
  .az-cards { grid-template-columns: 1fr; }
  .az-trust { padding: 22px 16px; gap: 16px; justify-content: center; text-align: center; }
  .az-trust__label { max-width: none; width: 100%; text-align: center; }
  /* 5 across is far too tight on a phone — 3 then 2, with the scaled marks
     given enough cell room that their transparent overhang cannot collide */
  .az-trust__marks { grid-template-columns: repeat(3, 1fr); gap: 22px 10px; width: 100%; }
  .az-trust__marks img { height: 30px; }
  .az-trust__marks .az-wordmark { font-size: 1.15rem; }
  .az-trust__marks .az-wordmark i { font-size: 1.05rem; }
  .az-stats { grid-template-columns: repeat(2, 1fr); }
  .az-stat { border-right: 1px solid var(--az-line); }
  .az-stat:nth-child(2n) { border-right: 0; }
  .az-statwrap { background: linear-gradient(180deg, var(--az-ink) 0%, var(--az-ink) 40px, var(--az-white) 40px, var(--az-white) 100%); }
  .az-grid-2, .az-grid-3, .az-grid-4 { grid-template-columns: 1fr; }
  .az-cta { padding: 24px 20px; gap: 18px; }
  .az-footer__grid { grid-template-columns: 1fr 1fr; }
  .az-footer__brand { grid-column: 1 / -1; }
  .az-footer__bar { justify-content: center; text-align: center; }
  .az-orbit { min-height: 320px; }
  .az-orbit__ring--1 { width: 290px; height: 290px; }
  .az-orbit__ring--2 { width: 228px; height: 228px; }
  .az-orbit__ring--3 { width: 168px; height: 168px; }
  .az-orbit__chip { width: 44px; height: 44px; font-size: .88rem; }
  .az-only-desktop { display: none; }
  .az-only-mobile  { display: block; }
  .az-btn { padding: 13px 20px; }
}

@media (max-width: 420px) {
  .az-stats { grid-template-columns: 1fr; }
  .az-stat { border-right: 0; }
  .az-steps { grid-template-columns: 1fr; }
  .az-hero__actions .az-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   16. Motion + focus
   -------------------------------------------------------------------------- */

.az-page a:focus-visible,
.az-page button:focus-visible,
.az-page input:focus-visible,
.az-page textarea:focus-visible,
.az-page select:focus-visible {
  outline: 2px solid var(--az-accent-2);
  outline-offset: 3px;
  border-radius: var(--az-r-xs);
}

@media (prefers-reduced-motion: reduce) {
  .az-orbit__chip { animation: none; }
  .az-btn:hover, .az-card:hover { transform: none; }
  .az-page *, .az-page *::before, .az-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .az-nav, .az-cta, .az-quotes__arrow { display: none !important; }
  .az-section, .az-footer { background: #fff !important; }
}

/* ==========================================================================
   18. 3D LAYER
   Two sources of depth, deliberately combined:
   (a) js/main.js initCardTilt() already follows the mouse and writes an inline
       transform on any .tilt-3d / .premium-card element, and initHero3D() does
       the same for a .hero-3d-scene > .hero-3d-stage pair. Both already skip
       touch devices and prefers-reduced-motion. We opt the new components in by
       adding those classes rather than shipping a second script.
   (b) Everything below is pure CSS: perspective on the containers, real
       translateZ layering inside each card so children float ABOVE the surface
       while the JS tilts it, and 3D-rotating orbital rings in the hero.
   Because the JS writes transform inline, CSS must never set transform on the
   tilted element itself — only on its children.
   ========================================================================== */

/* --- perspective containers ------------------------------------------------ */
.az-cards,
.az-grid-2, .az-grid-3, .az-grid-4,
.az-stats,
.az-steps { perspective: 1200px; perspective-origin: 50% 30%; }

/* --- cards ----------------------------------------------------------------- */
.az-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow .3s ease, border-color .22s ease, background-color .22s ease;
}
.az-card > * { transform-style: preserve-3d; }

/* Children sit at a small FIXED depth so the card reads as layered while it
   tilts. They deliberately do NOT change depth on hover: animating each child
   a different distance made the card's contents visibly scatter apart under
   the cursor. The card tilts as one solid object; the layering is static. */
.az-card .az-card__icon { transform: translateZ(12px); }
.az-card h3             { transform: translateZ(7px); }
.az-card p              { transform: translateZ(3px); }
.az-card .az-ticks,
.az-card .az-card__more { transform: translateZ(2px); }

/* dark cards get a lifted glow, light cards a real cast shadow */
.az-card:hover {
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85), 0 0 0 1px var(--az-accent-line) inset;
}
.az-card--light:hover {
  box-shadow: 0 28px 52px -26px rgba(11, 15, 22, .38), 0 6px 14px -8px rgba(11, 15, 22, .16);
}

/* The icon sits on a subtle 3D plate. This MUST hang off ::after — Font
   Awesome draws its glyph through ::before, so putting content:"" there
   silently erased the icon on every card on the site. */
.az-card .az-card__icon { position: relative; }
.az-card .az-card__icon::after {
  content: "";
  position: absolute;
  inset: -12px -12px -10px -12px;
  border-radius: 12px;
  background: radial-gradient(closest-side, var(--az-accent-soft), transparent 72%);
  opacity: 0;
  transform: translateZ(-14px);
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: -1;
}
.az-card:hover .az-card__icon::after { opacity: .7; }

/* --- stat tiles ------------------------------------------------------------ */
.az-stat { transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.az-stat:hover { transform: translateZ(8px); }
.az-stat__icon {
  transform: translateZ(8px);
  box-shadow: 0 10px 18px -8px rgba(200, 130, 10, .7), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.az-stat:hover .az-stat__icon { transform: translateZ(14px); }

/* --- process steps --------------------------------------------------------- */
.az-step { transform-style: preserve-3d; }
.az-step__badge {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
  box-shadow: 0 16px 30px -16px rgba(11, 15, 22, .34), inset 0 -2px 0 rgba(11, 15, 22, .05);
}
.az-step:hover .az-step__badge {
  transform: translateZ(10px);
  box-shadow: 0 30px 46px -22px rgba(11, 15, 22, .42);
}
.az-step__badge i { transform: translateZ(6px); }
.az-step__n { transform: translateZ(10px); box-shadow: 0 8px 16px -8px rgba(200, 130, 10, .8); }

/* --- buttons: real press ---------------------------------------------------- */
.az-btn { transform-style: preserve-3d; }
.az-btn--dark  { box-shadow: 0 10px 20px -12px rgba(11, 11, 15, .75), inset 0 -2px 0 rgba(0, 0, 0, .35); }
.az-btn--dark:hover  { box-shadow: 0 18px 30px -14px rgba(11, 11, 15, .6), inset 0 -2px 0 rgba(0, 0, 0, .35); }
.az-btn--accent { box-shadow: 0 12px 22px -12px rgba(200, 130, 10, .85), inset 0 -2px 0 rgba(120, 78, 6, .35); }
.az-btn--ghost  { box-shadow: 0 6px 14px -10px rgba(11, 15, 22, .35); }
.az-btn:active  { transform: translateY(1px) scale(.995); }

/* --- hero orbit: rings on different 3D axes -------------------------------- */
/* .hero-3d-scene / .hero-3d-stage are the class names js/main.js initHero3D()
   looks for — reusing them means the orbit gets mouse-parallax with no new JS.
   The page's own inline <style> also matches .hero-3d-scene and sets
   perspective:900px + margin-top:-3rem, so both are re-stated here at (0,2,0). */
.az-orbit { perspective: 1400px; perspective-origin: 50% 45%; }
.az-orbit.hero-3d-scene { perspective: 1400px; margin-top: 0; }
.az-orbit .hero-3d-stage {
  position: relative;
  place-self: stretch;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  will-change: transform;
}
.az-orbit__mark { transform-style: preserve-3d; }

.az-orbit__ring { transform-style: preserve-3d; }
.az-orbit__ring--1 { animation: az-spin-x 26s linear infinite; }
.az-orbit__ring--2 { animation: az-spin-y 34s linear infinite reverse; }
.az-orbit__ring--3 { animation: az-spin-z 20s linear infinite; }

@keyframes az-spin-x { from { transform: rotateX(68deg) rotateZ(0deg); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes az-spin-y { from { transform: rotateY(70deg) rotateZ(0deg); } to { transform: rotateY(70deg) rotateZ(360deg); } }
@keyframes az-spin-z { from { transform: rotate3d(1, 1, 0, 55deg) rotateZ(0deg); } to { transform: rotate3d(1, 1, 0, 55deg) rotateZ(360deg); } }

.az-orbit__mark {
  transform: translateZ(70px);
  filter: drop-shadow(0 28px 34px rgba(11, 15, 22, .22));
}
.az-orbit__chip {
  transform-style: preserve-3d;
  box-shadow: 0 18px 32px -16px rgba(11, 15, 22, .45), inset 0 1px 0 #fff;
}
.az-orbit__chip--tr { animation: az-float-a 7s ease-in-out infinite; }
.az-orbit__chip--l  { animation: az-float-b 8s ease-in-out infinite; }
.az-orbit__chip--r  { animation: az-float-a 9s ease-in-out infinite reverse; }
.az-orbit__chip--b  { animation: az-float-b 7.5s ease-in-out infinite reverse; }

@keyframes az-float-a {
  0%, 100% { transform: translate3d(0, 0, 60px) rotateX(0deg); }
  50%      { transform: translate3d(0, -14px, 95px) rotateX(-10deg); }
}
@keyframes az-float-b {
  0%, 100% { transform: translate3d(0, 0, 40px) rotateY(0deg); }
  50%      { transform: translate3d(0, -11px, 78px) rotateY(12deg); }
}

/* --- testimonials + CTA ----------------------------------------------------- */
.az-quote { transform-style: preserve-3d; transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease; }
.az-quote:hover { box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .9); }
.az-quote__mark, .az-quote__stars { transform: translateZ(5px); }
.az-quote__ava { transform: translateZ(7px); box-shadow: 0 8px 16px -8px rgba(200, 130, 10, .8); }

.az-cta {
  transform-style: preserve-3d;
  box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .85), 0 0 40px -18px rgba(248, 176, 39, .35) inset;
}
.az-cta__icon { transform: translateZ(8px); }

/* --- trust strip + nav ------------------------------------------------------ */
.az-trust { transform-style: preserve-3d; perspective: 900px; }
.az-trust__marks img,
.az-trust__marks .az-wordmark { transition: transform .28s cubic-bezier(.2,.7,.3,1), filter .28s ease; }
.az-trust__marks img:hover,
.az-trust__marks .az-wordmark:hover { transform: translateZ(26px) scale(1.09); }

/* --- legacy cards inherit the same depth ------------------------------------ */
.az-page .premium-card { transform-style: preserve-3d; }
.az-page .premium-card:hover { box-shadow: 0 28px 52px -26px rgba(11, 15, 22, .38); }
.az-page #empire-simulator .premium-card:hover,
.az-page .az-section--dark .premium-card:hover { box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85); }

/* --- self-contained perspective ---------------------------------------------
   A card/stat/quote is not always inside one of the grids above, so each one
   also carries its own perspective. That way the translateZ layering of its
   children works wherever the component is dropped. */
.az-card { perspective: 900px; }
.az-stat { perspective: 800px; }

/* --- FAQ accordion (faq.html: .faq-item / .faq-toggle / .faq-arrow) --------- */
.az-page .faq-item {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .22s ease;
}
.az-page .faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 42px -24px rgba(11, 15, 22, .34);
}
.az-page .faq-toggle { transform-style: preserve-3d; }
.az-page .faq-arrow {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.az-page .faq-arrow.active { transform: rotateX(180deg); }
.az-page .faq-item:hover .faq-arrow { transform: none; }
.az-page .faq-item:hover .faq-arrow.active { transform: rotateX(180deg); }

/* --- review cards: perspective baked into the transform so they need no
       particular parent (reviews.html renders 45 of them) -------------------- */
.az-quote:hover { transform: perspective(900px) translateZ(6px); }

/* --- form panels (contact.html) --------------------------------------------- */
.az-page form,
.az-page .az-form,
.az-page .contact-card {
  transform-style: preserve-3d;
  transition: box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.az-page input:focus,
.az-page textarea:focus,
.az-page select:focus {
  box-shadow: 0 12px 24px -14px rgba(11, 15, 22, .3);
}

/* --- inner-page headers get a layered, floating feel ------------------------ */
.az-phead,
.az-page .az-nav + section:not(.az-hero) { perspective: 1200px; transform-style: preserve-3d; }
.az-phead .az-h1,
.az-page .az-nav + section:not(.az-hero) h1 {
  transform: translateZ(10px);
  text-shadow: 0 18px 34px rgba(11, 15, 22, .10);
}
.az-phead .az-lead,
.az-page .az-nav + section:not(.az-hero) > * > p { transform: translateZ(4px); }

/* --- flatten everything for reduced motion / touch -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .az-orbit__ring--1, .az-orbit__ring--2, .az-orbit__ring--3,
  .az-orbit__chip--tr, .az-orbit__chip--l, .az-orbit__chip--r, .az-orbit__chip--b { animation: none; }
  .az-card .az-card__icon, .az-card h3, .az-card p,
  .az-card .az-ticks, .az-card .az-card__more,
  .az-stat, .az-stat__icon, .az-step__badge, .az-step__badge i, .az-step__n,
  .az-quote, .az-quote__mark, .az-quote__stars, .az-quote__ava,
  .az-orbit__mark, .az-cta__icon,
  .az-page .faq-item, .az-page .faq-item:hover,
  .az-page .faq-item:hover .faq-arrow,
  .az-phead .az-h1, .az-phead .az-lead,
  .az-page .az-nav + section:not(.az-hero) h1,
  .az-page .az-nav + section:not(.az-hero) > * > p,
  .az-page input:focus, .az-page textarea:focus, .az-page select:focus { transform: none !important; }
  /* the arrow still has to flip — it is state, not decoration */
  .az-page .faq-arrow.active { transform: rotate(180deg) !important; }
}
@media (hover: none) {
  /* no mouse -> no tilt; keep the layout flat so nothing overlaps on touch */
  .az-cards, .az-grid-2, .az-grid-3, .az-grid-4, .az-stats, .az-steps,
  .az-card, .az-stat, .az-page .faq-item, .az-phead,
  .az-page .az-nav + section:not(.az-hero) { perspective: none; }
  .az-card .az-card__icon, .az-card h3, .az-card p,
  .az-card .az-ticks, .az-card .az-card__more,
  .az-stat__icon, .az-step__badge i, .az-step__n, .az-quote__mark,
  .az-quote__stars, .az-quote__ava, .az-cta__icon,
  .az-phead .az-h1, .az-phead .az-lead,
  .az-page .az-nav + section:not(.az-hero) h1,
  .az-page .az-nav + section:not(.az-hero) > * > p { transform: none; }
  .az-page .faq-arrow.active { transform: rotate(180deg); }
}

/* --------------------------------------------------------------------------
   16b. Anchor-reset override  — DO NOT DELETE
   `.az-page a { color: inherit }` above is (0,1,1). Any component colour
   written as a single class, e.g. `.az-btn--dark { color:#fff }`, is (0,1,0)
   and LOSES to it whenever the component is rendered on an <a>. That is what
   made the black hero button render black-on-black. Re-stating these with the
   .az-page prefix makes them (0,2,0), which beats the reset.
   Only base states need this — every :hover variant is already (0,2,0).
   -------------------------------------------------------------------------- */
.az-page .az-btn--dark           { color: #fff; }
.az-page .az-btn--ghost          { color: var(--az-text); }
.az-page .az-btn--accent         { color: #1A1204; }
.az-page .az-btn--accent-outline { color: var(--az-accent); }
.az-page .az-nav__link           { color: var(--az-text-2); }
.az-page .az-nav__link.is-active { color: var(--az-text); }
.az-page .az-card__more          { color: var(--az-accent); }
/* ...but the same class on a WHITE card measures 1.87:1 against #fff (and
   2.14:1 on hover). Full-strength accent only works on the ink cards, where it
   is 10:1. Light cards get the darkened accent used elsewhere on white. */
.az-page .az-card--light .az-card__more        { color: #B47A0B; }        /* 3.67:1 */
.az-page .az-card--light .az-card__more:hover  { color: #8C5E07; }        /* 5.65:1 */
.az-page .az-crumb a             { color: var(--az-muted); }
.az-page .az-card--light         { color: var(--az-text); }
.az-page .az-card                { color: var(--az-on-dark); }
/* same trap on <p>: .az-quote__body is (0,1,0) and loses to `.az-page p` (0,1,1) */
.az-page .az-quote__body         { color: #C8CCD3; }
.az-page .az-lead                { color: var(--az-muted); }
.az-page .az-section--dark .az-lead { color: var(--az-muted-dark); }

/* ==========================================================================
   17. LEGACY BRIDGE
   The other 126 pages were authored against a DARK Tailwind theme
   (text-white x8247, bg-primary, border-white/10 ...). Rewriting all that
   markup by hand is not viable, so the utilities are repainted here instead:
   .az-page .bg-primary is (0,2,0) and beats Tailwind's (0,1,0), and ui.css
   loads last. Adding class="az-page" to <body> flips a whole page to the
   light UI without touching a single utility in its body.

   Anything that is SUPPOSED to stay dark (#empire-simulator, .az-section--dark,
   .az-footer) is restored at the end of this block with a higher-specificity
   selector.
   ========================================================================== */

/* --- surfaces --- */
.az-page .bg-primary        { background-color: var(--az-white); }
.az-page .bg-secondary      { background-color: var(--az-paper); }
.az-page .bg-gray-900       { background-color: var(--az-paper); }
.az-page [class*="bg-white/"] { background-color: var(--az-paper); }
.az-page [class*="bg-primary/"],
.az-page [class*="bg-secondary/"] { background-color: var(--az-paper); }

/* dark gradients -> light. Tailwind 3 reads these back through --tw-gradient-stops */
.az-page [class*="from-primary"]  { --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position); }
.az-page [class*="via-primary"]   { --tw-gradient-via: #F7F8FA var(--tw-gradient-via-position); }
.az-page [class*="to-primary"]    { --tw-gradient-to: #F7F8FA var(--tw-gradient-to-position); }
.az-page [class*="from-gray-900"] { --tw-gradient-from: #F7F8FA var(--tw-gradient-from-position); }
.az-page [class*="to-gray-900"]   { --tw-gradient-to: #F7F8FA var(--tw-gradient-to-position); }

/* --- text --- */
.az-page .text-white          { color: var(--az-text); }
.az-page [class*="text-white/"] { color: var(--az-muted); }
.az-page .text-gray-300,
.az-page .text-gray-400       { color: var(--az-muted); }
/* the brand orange is too light for body copy on white — darken text only,
   icons keep the full-strength accent */
.az-page .text-accent         { color: #B47A0B; }
.az-page i.text-accent,
.az-page .text-accent i,
.az-page .az-eyebrow          { color: var(--az-accent-2); }

/* --- lines --- */
.az-page .border-white,
.az-page [class*="border-white/"] { border-color: var(--az-line); }

/* --- legacy components --- */
.az-page .premium-card {
  background: #fff;
  border: 1px solid var(--az-line);
  box-shadow: var(--az-shadow-sm);
}
.az-page .premium-card:hover { background: #fff; border-color: var(--az-accent-line); box-shadow: var(--az-shadow); }
.az-page .tilt-3d, .az-page .premium-card { box-shadow: var(--az-shadow-sm); }
.az-page .glassmorphism { background: #fff; border: 1px solid var(--az-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
.az-page .hero-section  { background: var(--az-white); }
.az-page .hero-bg-glow  { opacity: .35; }

/* .gradient-bg is a dark linear-gradient declared in 10 pages' inline <style> */
.az-page .gradient-bg { background: var(--az-paper); }

/* Every inner page opens with a hero section directly after the nav. Rather
   than surgically rewriting 15 of them, promote that section into the mockup's
   page header: cream wash, ink type, one hairline. Wins over both the Tailwind
   gradient utilities (0,1,0) and the inline-style .gradient-bg (0,1,0).
   index.html is excluded — it has the real .az-hero. */
.az-page .az-nav + section:not(.az-hero) {
  padding-top: 58px;
  padding-bottom: 52px;
  background:
    radial-gradient(760px 320px at 82% 0%, var(--az-cream) 0%, rgba(253, 244, 227, 0) 66%),
    var(--az-white);
  border-bottom: 1px solid var(--az-line);
}
.az-page .az-nav + section:not(.az-hero) h1 {
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.032em;
}
/* the old dark heroes stack blurred accent orbs behind the heading — on the
   cream wash they double up, so soften them */
.az-page .az-nav + section:not(.az-hero) .blur-3xl,
.az-page .az-nav + section:not(.az-hero) .blur-2xl { opacity: .4; }

/* blog article pages open with a <header>/<div> instead of a <section> */
.az-page .az-nav + header,
.az-page .az-nav + main > *:first-child { padding-top: 34px; }

/* --- blog articles ---------------------------------------------------------
   All 111 blog pages carry a `.blog-content` block in their own inline <style>
   with colours hardcoded for the dark theme (`color:#fff`,
   `rgba(255,255,255,.9)`). That <style> sits ABOVE the ui.css link in the head,
   but its selectors are only (0,1,1) — these (0,2,1) rules win, which is what
   stops the article text rendering white-on-white. Seven slightly different
   inline-style variants exist across the blog; all of them share these
   selectors, so one rule set covers every page. */
.az-page .blog-content h1 { color: var(--az-text); }
.az-page .blog-content h2 { color: #B47A0B; border-bottom-color: var(--az-line); }
.az-page .blog-content h3,
.az-page .blog-content h4 { color: var(--az-text); }
.az-page .blog-content,
.az-page .blog-content p,
.az-page .blog-content ul,
.az-page .blog-content ol,
.az-page .blog-content li,
.az-page .blog-content td,
.az-page .blog-content th { color: var(--az-text-2); }
.az-page .blog-content strong { color: var(--az-text); }
.az-page .blog-content a { color: #B47A0B; text-decoration-color: var(--az-accent-line); }
.az-page .blog-content a:hover { color: var(--az-accent-2); }

.az-page .blog-content .toc {
  background: var(--az-paper);
  border: 1px solid var(--az-line);
}
.az-page .blog-content .toc a { color: var(--az-text-2); }
.az-page .blog-content .toc a:hover { color: var(--az-accent-2); }
.az-page .blog-content .faq-section { border-top-color: var(--az-line); }
.az-page .blog-content blockquote {
  border-left: 3px solid var(--az-accent);
  background: var(--az-paper);
  color: var(--az-text-2);
}
/* comfortable measure for long-form reading */
.az-page .blog-content p,
.az-page .blog-content ul,
.az-page .blog-content ol { max-width: 72ch; }

/* blog listing page — cards and pagination (blog/index.html inline <style>).
   Deliberately no `display` here: .blog-card[data-page].active is toggled by
   that page's own pagination script with !important. */
.az-page .blog-card { background: #fff; border-color: var(--az-line); box-shadow: var(--az-shadow-sm); }
.az-page .blog-card:hover { background: #fff; border-color: var(--az-accent-line); box-shadow: var(--az-shadow); }
.az-page .pagination a { background: var(--az-paper); color: var(--az-text-2); border-color: var(--az-line); }
.az-page .pagination a:hover { background: var(--az-accent-soft); border-color: var(--az-accent); color: #B47A0B; }
.az-page .pagination .current { background: var(--az-accent); color: #241905; border-color: var(--az-accent); }

/* --- restore the zones that are meant to be dark --- */
.az-page #empire-simulator .text-white,
.az-page .az-section--dark .text-white,
.az-page .az-footer .text-white { color: #fff; }

.az-page #empire-simulator .text-gray-300,
.az-page #empire-simulator .text-gray-400,
.az-page #empire-simulator [class*="text-white/"],
.az-page .az-section--dark [class*="text-white/"],
.az-page .az-footer [class*="text-white/"] { color: var(--az-muted-dark); }

.az-page #empire-simulator .text-accent,
.az-page .az-section--dark .text-accent,
.az-page .az-footer .text-accent { color: var(--az-accent); }

.az-page #empire-simulator [class*="border-white/"],
.az-page #empire-simulator [class*="border-accent/"],
.az-page .az-section--dark [class*="border-white/"],
.az-page .az-footer [class*="border-white/"] { border-color: var(--az-line-dark); }

.az-page #empire-simulator [class*="bg-white/"],
.az-page .az-section--dark [class*="bg-white/"] { background-color: rgba(255,255,255,.05); }

.az-page #empire-simulator .premium-card,
.az-page .az-section--dark .premium-card {
  background: var(--az-ink-2);
  border-color: var(--az-line-dark);
  box-shadow: none;
}

/* ===================================================================
   Hero slider — the WHOLE hero rotates: heading, copy, buttons and
   visual all change per slide. Slides are stacked in one grid cell so
   the section is as tall as its tallest slide and nothing jumps when
   they swap. Deliberately frameless: the artwork is SVG and carries
   its own soft shadow, so nothing here adds a border or card edge.
   =================================================================== */
.az-heroslider { display: grid; }

.az-heroslider__slide {
  grid-area: 1 / 1;            /* every slide occupies the same cell */
  opacity: 0;
  visibility: hidden;          /* also keeps inactive links out of tab order */
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.az-heroslider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .6s ease, transform .6s ease, visibility 0s;
}

/* the slide artwork — SVG, sharp at any resolution, no frame of any kind */
.az-hero__visual {
  display: grid;
  place-items: center;
  min-height: 420px;
}
.az-hero__visual img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  border: 0;
  outline: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.az-heroslider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 26px;
}
.az-heroslider__dot {
  position: relative;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 11, 15, .18);
  overflow: hidden;              /* clips the timer fill to the pill shape */
  cursor: pointer;
  transition: width .3s ease, background .3s ease, border-radius .3s ease;
}
.az-heroslider__dot:hover { background: rgba(11, 11, 15, .34); }

/* the active dot becomes a track; the fill inside is the countdown to the
   next slide. Its duration is set from JS so the bar and the interval that
   actually advances the slider can never drift apart. */
.az-heroslider__dot.is-active {
  width: 40px;
  border-radius: 5px;
  background: rgba(248, 176, 39, .28);
}

.az-heroslider__fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: var(--az-accent);
  pointer-events: none;
}
.az-heroslider__dot.is-active .az-heroslider__fill {
  animation-name: az-dot-countdown;
  animation-timing-function: linear;
  animation-duration: 3000ms;   /* JS overrides this with the real interval */
  animation-fill-mode: forwards;
}
/* hovering the hero pauses the slider, so the countdown must stop with it */
.az-heroslider__dots.is-paused .az-heroslider__fill { animation-play-state: paused; }

@keyframes az-dot-countdown { from { width: 0; } to { width: 100%; } }

.az-heroslider__dot:focus-visible {
  outline: 2px solid var(--az-accent);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .az-hero__visual { min-height: 0; }
  .az-hero__visual img { max-width: 560px; }
  .az-heroslider__dots { margin-top: 20px; }
}

/* Reduced motion: slides still change, they just don't animate */
@media (prefers-reduced-motion: reduce) {
  .az-heroslider__slide,
  .az-heroslider__slide.is-active { transition: none; transform: none; }
}

/* ===================================================================
   Card grid tidy-up.
   .az-cards--fit is for counts that do not divide into the column
   count (the homepage services block is 7 across 5 columns, which left
   a three-slot hole). Flex instead of grid so the final row centres
   rather than hanging off to the left; cards keep their width because
   flex-grow stays 0. The --3/--2 grid variants are untouched.
   =================================================================== */
.az-cards--fit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.az-cards--fit > .az-card { flex: 0 1 calc((100% - 4 * 18px) / 5); }

@media (max-width: 1024px) {
  .az-cards--fit > .az-card { flex-basis: calc((100% - 2 * 18px) / 3); }
}
@media (max-width: 720px) {
  .az-cards--fit > .az-card { flex-basis: 100%; }
}

/* Bottom-align the "Learn More" link on every card. The cards in a row are
   already equal height, but their copy is not, so the links used to sit at
   five different heights. */
.az-card {
  display: flex;
  flex-direction: column;
}
.az-card .az-card__more {
  margin-top: auto;
  padding-top: 14px;
  align-self: flex-start;   /* keep the link hit area to its text width */
}

/* Cards without the Amazon chip started their title ~28px higher than the
   ones with it, so titles in the same row did not line up. Reserve the
   chip's space on the cards that have none. */
.az-cards--fit .az-card:not(:has(.az-chip)) .az-card__icon { margin-bottom: 64px; }

/* Making the card a flex column turned the chip into a full-width bar,
   because flex items stretch by default. Keep it at its text width. */
.az-card > .az-chip { align-self: flex-start; }

/* ===================================================================
   Reviews page — review-site layout (score + rating distribution +
   filtering), in the Amazonics amber. Deliberately NOT Trustpilot's
   green or marks: these reviews are collected and published by us, and
   dressing them in another company's identity would imply an outside
   party verified them.
   =================================================================== */

/* --- boxed stars --- */
.rv-stars { display: inline-flex; gap: 3px; }
.rv-star {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: #E3E5E9;                 /* empty */
  color: #fff;
  font-size: .68rem;
  overflow: hidden;
}
.rv-star.is-on { background: var(--az-accent-2); }
.rv-star.is-part::before {             /* partial star for a 4.6 style score */
  content: "";
  position: absolute; inset: 0;
  width: var(--fill, 50%);
  background: var(--az-accent-2);
}
.rv-star i { position: relative; z-index: 1; }
.rv-stars--lg .rv-star { width: 34px; height: 34px; border-radius: 6px; font-size: 1rem; }

/* --- score + distribution --- */
.rv-summary {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 34px;
  align-items: center;
  margin-top: 26px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-lg);
  box-shadow: var(--az-shadow-sm);
}
.rv-summary__num { margin-top: 12px; font-size: 1.05rem; color: var(--az-text-2); }
.rv-summary__num strong { font-family: 'Space Grotesk', Inter, sans-serif; font-size: 2rem; color: var(--az-text); }
.rv-summary__meta { margin-top: 2px; font-size: .82rem; color: var(--az-muted); }
.rv-summary__bars { display: grid; gap: 7px; }

.rv-bar {
  display: grid;
  grid-template-columns: 58px 1fr 44px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 3px 6px;
  border: 0;
  border-radius: var(--az-r-xs);
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease;
}
.rv-bar:hover { background: var(--az-paper); }
.rv-bar__label { font-size: .8rem; color: var(--az-text-2); }
.rv-bar__track { height: 9px; border-radius: 5px; background: #EDEFF2; overflow: hidden; }
.rv-bar__fill  { display: block; height: 100%; background: var(--az-accent-2); border-radius: 5px; }
.rv-bar__pct   { font-size: .78rem; color: var(--az-muted); text-align: right; }
.rv-bar:focus-visible { outline: 2px solid var(--az-accent); outline-offset: 2px; }

/* --- filter + sort toolbar --- */
.rv-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.rv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chip {
  padding: 7px 14px;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-pill);
  background: #fff;
  font-size: .82rem;
  font-weight: 600;
  color: var(--az-text-2);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.rv-chip b { font-weight: 700; color: var(--az-muted); }
.rv-chip:hover { border-color: var(--az-accent-line); }
.rv-chip.is-active { background: var(--az-ink); border-color: var(--az-ink); color: #fff; }
.rv-chip.is-active b { color: rgba(255,255,255,.7); }
.rv-chip:focus-visible { outline: 2px solid var(--az-accent); outline-offset: 2px; }

.rv-sort { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--az-muted); }
.rv-sort select {
  padding: 7px 10px;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-xs);
  background: #fff;
  font: inherit;
  color: var(--az-text);
  cursor: pointer;
}
.rv-count { margin: 0 0 18px; font-size: .82rem; color: var(--az-muted); }

/* --- the review cards, rearranged into the usual review-list order:
       who wrote it, then the rating, then what they said --- */
.rv-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
.rv-grid .az-quote { display: flex; flex-direction: column; }
.rv-grid .az-quote__mark { display: none; }
.rv-grid .az-quote__foot {
  order: -1;
  margin: 0 0 12px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--az-line);
}
.rv-grid .az-quote__stars { order: 0; margin-bottom: 10px; }
.rv-grid .az-quote__body  { order: 1; margin: 0; }
.rv-grid .rv-date { font-size: .78rem; color: var(--az-muted); white-space: nowrap; }
.az-quote[hidden] { display: none !important; }

@media (max-width: 900px) {
  .rv-summary { grid-template-columns: 1fr; gap: 22px; }
  .rv-grid { grid-template-columns: 1fr; }
  .rv-toolbar { justify-content: flex-start; }
}

/* card star rows use plain <i> with .rv-star-off for the empties — box them
   so they match the boxed stars in the score summary above */
.rv-grid .az-quote__stars { display: inline-flex; gap: 3px; letter-spacing: 0; }
.rv-grid .az-quote__stars i {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 3px;
  background: var(--az-accent-2);
  color: #fff;
  font-size: .56rem;
}
.rv-grid .az-quote__stars i.rv-star-off { background: #E3E5E9; }

/* ===================================================================
   Reviews page, part 2 — the rest of the review-site furniture:
   a verdict word, per-review titles, date of experience, and search.
   Stars are green here because that is what people read as a rating;
   the Amazonics amber stays on everything else. No third-party rating
   service's name or mark appears on this page — these reviews are ours.
   =================================================================== */
:root { --rv-star: #00B67A; --rv-star-off: #DCDFE4; }

.rv-star.is-on,
.rv-star.is-part::before,
.rv-bar__fill,
.rv-grid .az-quote__stars i { background: var(--rv-star); }
.rv-star,
.rv-grid .az-quote__stars i.rv-star-off { background: var(--rv-star-off); }

.rv-verdict {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--az-text);
  margin-bottom: 10px;
}

/* per-review headline, the way review sites lead each card */
.rv-title {
  margin: 0 0 6px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--az-text);
}
.rv-grid .az-quote__stars { order: 0; }
.rv-grid .rv-title        { order: 1; }
.rv-grid .az-quote__body  { order: 2; }
.rv-grid .rv-exp          { order: 3; }

.rv-exp {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--az-line);
  font-size: .76rem;
  color: var(--az-muted);
}
.rv-exp span { color: var(--az-text-2); font-weight: 600; }

/* search */
.rv-search { position: relative; flex: 1 1 220px; max-width: 300px; }
.rv-search i {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: .78rem;
  color: var(--az-muted);
  pointer-events: none;
}
.rv-search input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-pill);
  background: #fff;
  font: inherit;
  font-size: .84rem;
  color: var(--az-text);
}
.rv-search input:focus-visible { outline: 2px solid var(--az-accent); outline-offset: 1px; }

.rv-empty { padding: 40px 0; text-align: center; color: var(--az-muted); font-size: .9rem; }

@media (max-width: 900px) {
  .rv-search { max-width: none; }
}

/* ===================================================================
   Reviews page, part 3 — two-column layout: rating filters pinned on
   the left, search / sort / top mentions and the reviews on the right.
   =================================================================== */
.rv-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 46px;
  align-items: start;
  text-align: left;
}
.rv-side { position: sticky; top: 96px; }
.rv-side__score { display: flex; align-items: center; gap: 12px; }
.rv-side__num {
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--az-text);
  line-height: 1;
}
.rv-side__title {
  margin: 20px 0 4px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--az-text);
}
.rv-side__title span { color: var(--az-muted); font-weight: 500; }
.rv-side__recent { margin: 0 0 20px; font-size: .88rem; color: var(--az-text-2); }
.rv-side__recent strong { color: var(--az-text); }

/* distribution box with selectable rows */
.rv-dist {
  padding: 14px 16px;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-lg);
  background: #fff;
}
.rv-row {
  display: grid;
  grid-template-columns: 20px 56px 1fr 40px;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  cursor: pointer;
}
.rv-check {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--az-ink);
  cursor: pointer;
}
.rv-row__label { font-size: .86rem; color: var(--az-text); }
.rv-row__track { height: 12px; border-radius: 3px; background: #EFEDEA; overflow: hidden; }
.rv-row__fill  { display: block; height: 100%; background: var(--az-ink); border-radius: 3px; }
.rv-row__pct   { font-size: .86rem; color: var(--az-text); text-align: right; }
.rv-row:hover .rv-row__label { color: var(--az-accent-2); }

/* search */
.rv-search { position: relative; margin-bottom: 16px; }
.rv-search i {
  position: absolute; left: 20px; top: 50%;
  transform: translateY(-50%);
  color: var(--az-muted); font-size: .92rem; pointer-events: none;
}
.rv-search input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  border: 1px solid var(--az-line);
  border-radius: 14px;
  background: #fff;
  font: inherit; font-size: .95rem;
  color: var(--az-text);
}
.rv-search input::placeholder { color: var(--az-muted); }
.rv-search input:focus-visible { outline: 2px solid var(--az-accent); outline-offset: 1px; }

/* pill controls */
.rv-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.rv-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-pill);
  background: #fff;
  font-size: .88rem;
  font-weight: 500;
  color: var(--az-text);
  cursor: pointer;
}
.rv-pill:hover { border-color: var(--az-text-2); }
.rv-pill select {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
}
.rv-pill i { font-size: .7rem; color: var(--az-text-2); }
.rv-pill--clear { border-color: var(--az-accent-line); color: var(--az-accent-2); }

/* top mentions */
.rv-mentions { margin-bottom: 26px; }
.rv-mentions__title {
  margin: 0 0 12px;
  font-family: 'Space Grotesk', Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--az-text);
}
.rv-mentions__row { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-mention {
  padding: 10px 18px;
  border: 1px solid var(--az-line);
  border-radius: var(--az-r-pill);
  background: #fff;
  font-size: .86rem;
  color: var(--az-text);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.rv-mention:hover { border-color: var(--az-text-2); }
.rv-mention.is-active { background: var(--az-ink); border-color: var(--az-ink); color: #fff; }

/* the review list runs full width of the right column now */
.rv-layout .rv-grid { grid-template-columns: 1fr; gap: 16px; }
.rv-layout .az-quote { text-align: left; }

@media (max-width: 1000px) {
  .rv-layout { grid-template-columns: 1fr; gap: 30px; }
  .rv-side { position: static; }
}

/* .rv-pill sets display:inline-flex, which overrides the hidden attribute —
   the Clear filters button showed even with nothing filtered */
.rv-pill[hidden] { display: none !important; }

/* The 3D card layer pushes .az-quote__stars forward with translateZ(5px), and
   .az-quote carries preserve-3d. On the reviews list that made the star row
   paint on top of the review title instead of sitting above it. The reviews
   list is a flat layout, so drop the 3D on these cards entirely. */
.rv-grid .az-quote,
.rv-grid .az-quote__stars,
.rv-grid .az-quote__mark,
.rv-grid .az-quote__ava {
  transform: none;
  transform-style: flat;
}
.rv-grid .az-quote__stars {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 18px;
}