/* ==========================================================================
   FollowersZeal — homepage mockup
   Design tokens → base → components → sections → responsive
   Brand: red
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  --ink:        #1b1218;
  --ink-2:      #4a3b42;
  --muted:      #7b6b72;
  --muted-2:    #9b8c93;
  --line:       rgba(27, 18, 24, .09);
  --line-2:     rgba(27, 18, 24, .14);

  --bg:         #ffffff;
  --bg-soft:    #fdf8f8;
  --bg-tint:    #fdeef0;

  --red:        #f5233d;
  --red-d:      #d40f2c;
  --red-l:      #ff8f9a;
  --rose:       #ff4d6d;
  --orange:     #ff8a3d;
  --amber:      #ffb43d;
  --teal:       #22cfb8;
  --green:      #22c07a;

  --grad:       linear-gradient(98deg, #c40d28 0%, #f5233d 34%, #ff4d6d 66%, #ff8a3d 100%);
  --grad-btn:   linear-gradient(135deg, #e0132e 0%, #f5233d 48%, #ff6b4d 100%);

  --r-xs: 10px;
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;
  --r-xl: 36px;

  --sh-1: 0 1px 2px rgba(27,18,24,.05), 0 4px 12px rgba(27,18,24,.05);
  --sh-2: 0 2px 6px rgba(27,18,24,.05), 0 14px 34px rgba(27,18,24,.08);
  --sh-3: 0 4px 10px rgba(27,18,24,.06), 0 28px 66px rgba(27,18,24,.12);
  --sh-brand: 0 10px 28px rgba(245,35,61,.3);

  --shell: 1200px;
  --pad: clamp(18px, 4vw, 40px);
  --ease: cubic-bezier(.22,.8,.28,1);

  --hdr-h: 74px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The `hidden` attribute always wins. Without this, any component that sets its
   own display (.empty is a grid) stays visible after a script hides it — the
   cart showed "Your cart is empty" above a full cart. */
[hidden] { display: none !important; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 20px);
}

body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: var(--red-d); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; padding: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- type ---------- */
h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.022em;
}
h1 { font-size: clamp(2.3rem, 5.1vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.14rem; letter-spacing: -.012em; line-height: 1.32; }

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  display: inline-block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--red-d);
  margin-bottom: 14px;
}

/* ---------- layout utils ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sec { padding: clamp(64px, 9vw, 116px) 0; position: relative; }
.sec--soft { background: var(--bg-soft); }

.sechead { max-width: 660px; margin: 0 auto clamp(38px, 5vw, 62px); text-align: center; }
.sechead--left { text-align: left; margin-inline: 0; }
.sechead__sub { margin-top: 18px; font-size: 1.05rem; color: var(--muted); }

.sec__note { margin-top: 44px; text-align: center; color: var(--muted); font-size: .95rem; }

.ic { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -160%);
  z-index: 200; background: var(--ink); color: #fff;
  padding: 10px 20px; border-radius: 99px; font-weight: 700; font-size: .9rem;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); text-decoration: none; }

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { --d: 1; }
.reveal[data-delay="2"] { --d: 2; }
.reveal[data-delay="3"] { --d: 3; }
.reveal[data-delay="4"] { --d: 4; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px;
  border-radius: 99px;
  font-weight: 700; font-size: .95rem; letter-spacing: -.008em;
  white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--lg { padding: 15px 30px; font-size: 1rem; }
.btn--full { width: 100%; }

.btn--brand { background: var(--grad-btn); color: #fff; box-shadow: var(--sh-brand); }
.btn--brand:hover { box-shadow: 0 14px 34px rgba(245,35,61,.4); }
.btn--brand .ic { transition: transform .22s var(--ease); }
.btn--brand:hover .ic { transform: translateX(3px); }

.btn--line { border: 1.6px solid var(--line-2); color: var(--ink); background: #fff; }
.btn--line:hover { border-color: var(--red); color: var(--red-d); box-shadow: var(--sh-1); }

.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--bg-tint); }

.btn--white { background: #fff; color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.btn--ghostW { border: 1.6px solid rgba(255,255,255,.4); color: #fff; }
.btn--ghostW:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

/* ---------- pill / chip / stars ---------- */
.pill {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 7px 16px 7px 12px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 99px; box-shadow: var(--sh-1);
  font-size: .855rem; font-weight: 600; color: var(--ink-2);
  line-height: 1.45;
}
@media (max-width: 420px) {
  .pill { border-radius: var(--r); }
}
.pill strong { color: var(--ink); }
.pill__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 4px rgba(34,192,122,.18);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(34,192,122,.2); }
  50%     { box-shadow: 0 0 0 7px rgba(34,192,122,0); }
}

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 99px;
  font-size: .75rem; font-weight: 700;
  background: var(--bg-tint); color: var(--red-d);
}
.chip--live { background: rgba(34,192,122,.12); color: #12875a; }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2.4s infinite; }

.stars { display: inline-flex; gap: 2px; color: var(--amber); }
.stars .ic { width: 16px; height: 16px; stroke: none; }
.stars--sm .ic { width: 15px; height: 15px; }
.stars .is-off { color: #e2d8da; }

/* ---------- avatars ---------- */
.face svg, .crew__ava svg, .rev__ava svg, .help__ava svg, .mock__ava svg {
  width: 62%; height: 62%; fill: rgba(255,255,255,.9); stroke: none;
}
.a1 { background: linear-gradient(140deg,#ff9ea8,#ff4d6d); }
.a2 { background: linear-gradient(140deg,#ff8f8f,#d40f2c); }
.a3 { background: linear-gradient(140deg,#7ee0d2,#17b3a5); }
.a4 { background: linear-gradient(140deg,#ffcf7a,#f59027); }
.f1 { background: linear-gradient(140deg,#ff9ea8,#ff4d6d); }
.f2 { background: linear-gradient(140deg,#ff8f8f,#d40f2c); }
.f3 { background: linear-gradient(140deg,#7ee0d2,#17b3a5); }
.f4 { background: linear-gradient(140deg,#ffcf7a,#f59027); }

/* ==========================================================================
   announcement
   ========================================================================== */
.announce { background: var(--ink); color: #fff; font-size: .86rem; }
.announce.is-gone { display: none; }
.announce__in { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 42px; position: relative; }
.announce__txt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; color: rgba(255,255,255,.82); }
.announce__txt strong { color: #fff; }
.announce__tag {
  padding: 2px 9px; border-radius: 99px; background: var(--grad-btn);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.code {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.4);
  font-weight: 800; letter-spacing: .06em; color: #fff; font-size: .8rem;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.code:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.code .ic { width: 13px; height: 13px; }
.announce__x {
  position: absolute; right: 0; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%; color: rgba(255,255,255,.6);
}
.announce__x:hover { background: rgba(255,255,255,.12); color: #fff; }
.announce__x .ic { width: 14px; height: 14px; }

/* ==========================================================================
   header
   ========================================================================== */
.hdr {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hdr.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(27,18,24,.06); }
.hdr__in { display: flex; align-items: center; gap: 22px; min-height: var(--hdr-h); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { text-decoration: none; }

/* real site favicon, with a drawn fallback if it can't load */
.brand__mark {
  position: relative;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--sh-brand);
}
/* the icon (assets/img/fz-icon*.png) is itself the red disc, so it fills the
   mark; the gradient only backs the drawn "F" if the image fails to load */
.brand__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand__mark.is-fallback { background: var(--grad-btn); }
.brand__fallback { display: none; width: 24px; height: 24px; }
.brand__mark.is-fallback .brand__img { display: none; }
.brand__mark.is-fallback .brand__fallback { display: block; }

.brand__txt { font-weight: 800; font-size: 1.1rem; letter-spacing: -.026em; }
.brand__txt span { color: var(--red-d); }
.brand--dark { color: #fff; }
.brand--dark .brand__txt span { color: var(--red-l); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
  padding: 9px 13px; border-radius: 10px;
  font-size: .925rem; font-weight: 600; color: var(--ink-2); white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
/* longer languages (German, Russian …) — tighten the desktop header a little */
@media (min-width: 821px) and (max-width: 1240px) {
  .nav a { padding: 9px 9px; font-size: .88rem; }
  .hdr__cta .btn { padding-left: 14px; padding-right: 14px; }
}
.hdr__cta .btn { white-space: nowrap; }
/* translated labels run longer (German "Dienstleistungen durchsuchen"): below
   1440px the secondary Track-order button gives way so the cart and language
   switcher stay on screen; it is still in the footer and the mobile menu */
@media (min-width: 821px) and (max-width: 1440px) {
  html:not([lang="en"]) .hdr__cta .btn--ghost { display: none; }
}
.nav a:hover { background: var(--bg-tint); color: var(--ink); text-decoration: none; }

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

/* Language switcher — smmsumo's .langwrap / .langbtn / .langmenu, in this
   site's tokens. Opens on hover, keyboard focus, or a click (fz-chrome.js). */
.langwrap { position: relative; }
.langbtn {
  display: flex; align-items: center; gap: 7px; padding: 8px 11px;
  border: 1px solid var(--line-2); border-radius: 11px; background: #fff;
  color: var(--ink); cursor: pointer; font: inherit; font-weight: 700; font-size: .8rem;
}
.langbtn .ic { width: 15px; height: 15px; }
.langbtn .caret { width: 10px; height: 10px; opacity: .55; transform: rotate(90deg); }
.langbtn:hover, .langwrap.open .langbtn { border-color: var(--red); color: var(--red-d); }
.langmenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  min-width: 210px; padding: 7px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: .16s;
}
.langwrap.open .langmenu, .langwrap:hover .langmenu, .langwrap:focus-within .langmenu {
  opacity: 1; visibility: visible; transform: none;
}
.langmenu a {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 9px; font-size: .86rem; color: var(--ink-2); text-decoration: none;
}
.langmenu a:hover { background: var(--bg-soft); color: var(--red-d); }
.langmenu a .code {
  min-width: 30px; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 6px;
  font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-align: center; color: var(--muted);
}
.langmenu a[aria-current="page"] { color: var(--red-d); font-weight: 700; }
.langmenu a[aria-current="page"] .code { border-color: var(--red); color: var(--red-d); }

.burger { display: none; width: 42px; height: 42px; border-radius: 12px; padding: 11px 10px; }
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .28s var(--ease), opacity .2s var(--ease); }
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   hero
   ========================================================================== */
.hero { position: relative; padding: clamp(46px, 7vw, 86px) 0 clamp(70px, 9vw, 120px); overflow: hidden; }

.mesh { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.blob--1 { width: 46vw; height: 46vw; top: -16vw; left: -12vw; background: radial-gradient(circle, #ffbcc4, transparent 70%); }
.blob--2 { width: 40vw; height: 40vw; top: -8vw; right: -10vw; background: radial-gradient(circle, #ffd2bc, transparent 70%); }
.blob--3 { width: 34vw; height: 34vw; bottom: -14vw; left: 26vw; background: radial-gradient(circle, #ffe3b6, transparent 70%); }
.grid-fade {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  opacity: .8;
}

.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero__copy h1 { margin: 20px 0 0; }
.hero .lede { margin-top: 20px; font-size: clamp(1.02rem, 1.5vw, 1.15rem); color: var(--muted); max-width: 33ch; }
.hero__btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 30px; position: relative; }

.scribble { position: relative; display: inline-flex; align-items: flex-start; color: var(--red); margin-left: 2px; }
.scribble__txt { font-family: "Caveat", cursive; font-size: 1.32rem; line-height: 1; transform: rotate(-5deg); white-space: nowrap; }
.scribble svg { width: 44px; height: 28px; margin-top: 4px; }

.trustrow { display: flex; align-items: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.faces { display: flex; }
.face {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  border: 2.5px solid #fff; box-shadow: var(--sh-1);
  margin-left: -11px;
}
.face:first-child { margin-left: 0; }
.face--more {
  background: var(--ink); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: -.02em;
}
.trustrow__txt p { font-size: .88rem; color: var(--muted); }
.trustrow__txt strong { color: var(--ink); }

/* ---------- order calculator ---------- */
.hero__card { position: relative; }
.calc {
  position: relative; z-index: 2;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: clamp(22px, 3vw, 30px);
}
.calc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.calc__title { font-size: 1.16rem; }
.calc__field { margin-bottom: 20px; }

.lbl {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: .79rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 10px;
}
.lbl__out { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: var(--red-d); }

.segs { display: flex; gap: 8px; flex-wrap: wrap; }
.seg {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 12px;
  border: 1.4px solid var(--line-2); background: #fff;
  font-size: .875rem; font-weight: 600; color: var(--ink-2);
  transition: all .2s var(--ease);
}
.seg:hover { border-color: #f7b0b8; color: var(--ink); }
.seg.is-on {
  background: linear-gradient(135deg, rgba(245,35,61,.1), rgba(255,138,61,.1));
  border-color: var(--red); color: var(--red-d);
  box-shadow: 0 4px 12px rgba(245,35,61,.14);
}
.seg .ic { width: 16px; height: 16px; }
.segs--icons .seg { flex: 1 1 auto; justify-content: center; }

/* range */
.range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px; border-radius: 99px; background: var(--bg-tint);
  background-image: linear-gradient(90deg, var(--red-d), var(--orange));
  background-repeat: no-repeat;
  background-size: var(--fill, 4%) 100%;
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--red);
  box-shadow: 0 3px 10px rgba(245,35,61,.4);
  transition: transform .18s var(--ease);
}
.range::-webkit-slider-thumb:hover { transform: scale(1.14); }
.range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid var(--red);
  box-shadow: 0 3px 10px rgba(245,35,61,.4);
}
.range__ticks { display: flex; justify-content: space-between; margin-top: 8px; font-size: .72rem; color: var(--muted-2); font-weight: 600; }

.calc__total {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: 16px 18px; margin: 22px 0 16px;
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(245,35,61,.08), rgba(255,138,61,.08));
  border: 1px solid rgba(245,35,61,.16);
}
.calc__totalLbl { font-size: .76rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.calc__price { font-size: 2.05rem; font-weight: 800; letter-spacing: -.035em; color: var(--ink); line-height: 1.1; }
.calc__rate { font-size: .8rem; font-weight: 600; color: var(--muted); }

.calc__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 18px; }
.calc__meta li { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--muted); }
.calc__meta .ic { width: 14px; height: 14px; color: var(--red); }
.calc__fine { margin-top: 12px; text-align: center; font-size: .75rem; color: var(--muted-2); }

/* floating proof cards */
.float {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 15px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  font-size: .78rem; color: var(--muted);
  animation: bob 6s ease-in-out infinite;
}
.float strong { display: block; font-size: .84rem; color: var(--ink); letter-spacing: -.01em; }
.float--a { top: -22px; right: -8px; }
.float--b { bottom: -26px; left: -18px; animation-delay: -3s; }
.float--b strong { font-size: 1.1rem; color: var(--green); }
.float__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.float__ic--green { background: rgba(34,192,122,.14); color: #17925c; }
.float__ic .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.spark { width: 58px; height: 26px; color: var(--green); }

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

/* ==========================================================================
   logo marquee
   ========================================================================== */
.logos { padding: 34px 0 44px; border-block: 1px solid var(--line); background: var(--bg); }
.logos__lbl { text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 22px; }
.marquee {
  display: flex; gap: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; align-items: center; gap: clamp(34px, 5vw, 64px);
  padding-right: clamp(34px, 5vw, 64px);
  flex: none;
  animation: slide 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track li {
  font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 800; letter-spacing: -.03em;
  color: #c6bcbf; white-space: nowrap;
  transition: color .25s var(--ease);
}
.marquee__track li:hover { color: var(--ink); }
@keyframes slide { to { transform: translateX(-100%); } }

/* ==========================================================================
   services
   ========================================================================== */
/* ---------- platform / region tab rail ---------- */
.tabsrail {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 34px;
}
.tabs {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px 6px;
  margin-inline: auto;
}
.tabs::-webkit-scrollbar { height: 0; }
.tabs > * { scroll-snap-align: center; }
.tabs.is-grabbing { scroll-behavior: auto; cursor: grabbing; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 99px;
  border: 1.5px solid var(--line-2); background: #fff;
  font-size: .9rem; font-weight: 700; color: var(--ink-2);
  transition: all .22s var(--ease);
}
.tab { flex: none; }
.tab:hover { border-color: #f7b0b8; transform: translateY(-2px); }
.tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: var(--sh-2); }
.tab .ic { width: 17px; height: 17px; }
.tab small {
  display: inline-block; margin-left: 2px;
  padding: 1px 7px; border-radius: 99px;
  background: var(--bg-tint); color: var(--red-d);
  font-size: .68rem; font-weight: 800;
}
.tab.is-on small { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- horizontal package rail ---------- */
.rail { position: relative; }
.rail__track {
  display: flex; gap: 20px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* room for the cards' hover lift and focus rings */
  padding: 10px 4px 18px;
  margin: -10px -4px 0;
}
.rail__track::-webkit-scrollbar { height: 0; }
.rail__track > * { scroll-snap-align: start; flex: 0 0 clamp(244px, 74vw, 288px); }
.rail__track.is-grabbing { scroll-behavior: auto; cursor: grabbing; }
.rail__track.is-grabbing * { pointer-events: none; }

.rail__nav, .tabsrail .rail__nav {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line-2);
  color: var(--ink); box-shadow: var(--sh-2);
  transition: all .22s var(--ease);
}
.rail__nav:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.rail__nav:disabled { opacity: 0; pointer-events: none; }
.rail__nav .ic { width: 19px; height: 19px; stroke-width: 2.2; }
.rail__nav--prev .ic { transform: rotate(180deg); }

/* package rail arrows float over the edges */
.rail > .rail__nav {
  position: absolute; top: calc(50% - 14px); z-index: 4;
  transform: translateY(-50%);
}
.rail > .rail__nav--prev { left: -14px; }
.rail > .rail__nav--next { right: -14px; }

.rail__bar {
  height: 4px; border-radius: 99px;
  background: rgba(27,18,24,.08);
  overflow: hidden;
  max-width: 220px; margin: 4px auto 0;
}
.rail__bar span {
  display: block; height: 100%; width: 8%;
  border-radius: 99px; background: var(--grad-btn);
  transition: width .2s var(--ease);
}
.rail:not(.is-scrollable) .rail__bar { display: none; }

/* a rail that fits entirely needs no chrome */
.tabsrail:not(.is-scrollable) .rail__nav { display: none; }

.svc-views { min-width: 0; }
.svc-view { display: none; }
.svc-view.is-on { display: block; animation: fadeUp .45s var(--ease) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.pcard {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 24px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: rgba(245,35,61,.28); }
.pcard--hot { border-color: rgba(245,35,61,.4); box-shadow: 0 10px 34px rgba(245,35,61,.14); }
.pcard--hot::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.pcard__badge {
  position: absolute; top: -11px; left: 24px;
  padding: 4px 12px; border-radius: 99px;
  background: var(--grad-btn); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: var(--sh-brand);
}
.pcard__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pcard__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--bg-tint); color: var(--red-d); }
.pcard__ic .ic { width: 19px; height: 19px; }
.pcard__svc { font-size: 1.05rem; }
.pcard__qty { font-size: .8rem; color: var(--muted); font-weight: 600; }
.pcard__price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 16px; }
.pcard__price b { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink); line-height: 1; }
.pcard__price span { font-size: .82rem; color: var(--muted); font-weight: 600; }
.pcard__feats { display: grid; gap: 9px; margin-bottom: 22px; }
.pcard__feats li { display: flex; align-items: flex-start; gap: 9px; font-size: .875rem; color: var(--ink-2); }
.pcard__feats .ic { width: 15px; height: 15px; margin-top: 4px; color: var(--green); stroke-width: 2.8; }
.pcard .btn { margin-top: auto; }

/* ==========================================================================
   stats
   ========================================================================== */
.stats { background: var(--ink); color: #fff; padding: clamp(42px, 6vw, 68px) 0; position: relative; overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 20% 0%, rgba(245,35,61,.42), transparent 60%),
              radial-gradient(50% 120% at 85% 100%, rgba(255,138,61,.3), transparent 60%);
}
.stats__in { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.12); }
.stat__n { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1.1; }
.stat__l { font-size: .85rem; color: rgba(255,255,255,.62); margin-top: 6px; font-weight: 600; }

/* ==========================================================================
   steps
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
.step {
  position: relative;
  padding: 30px 26px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.step__n {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 18px;
  border-radius: 14px; background: var(--grad-btn); color: #fff;
  font-weight: 800; font-size: 1.1rem;
  box-shadow: var(--sh-brand);
}
.step h3 { margin-bottom: 10px; }
.step p { font-size: .935rem; color: var(--muted); }
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 46px; right: -14px;
  width: 22px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 5px, transparent 5px 9px);
}

/* ==========================================================================
   peace-of-mind panes
   ========================================================================== */
.panes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pane {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pane:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.pane__art { padding: 30px; display: grid; place-items: center; min-height: 260px; }
.pane__art--a { background: linear-gradient(150deg, #ffe0e4 0%, #ffe9dc 100%); }
.pane__art--b { background: linear-gradient(150deg, #ffeede 0%, #ffdfe3 100%); }

.mock {
  width: 100%; max-width: 280px;
  background: #fff; border-radius: var(--r);
  padding: 20px; box-shadow: 0 16px 40px rgba(27,18,24,.16);
  transform: rotate(-2deg);
  transition: transform .35s var(--ease);
}
.pane:hover .mock { transform: rotate(0deg) scale(1.02); }
.mock--dark { background: var(--ink); color: rgba(255,255,255,.7); transform: rotate(2deg); }
.mock__bar { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.mock__ava { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(140deg,#ff8f8f,#d40f2c); }
.mock__name { font-size: .8rem; font-weight: 700; color: var(--ink); }
.mock__kicker { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red-l); margin-bottom: 8px; }
.mock__big { font-size: 2.3rem; font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--rose); }
.mock__big--alt { background: linear-gradient(100deg,#ff8f9a,#ffcf9a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.mock__small { font-size: .82rem; margin-top: 8px; color: inherit; }
.mock:not(.mock--dark) .mock__small { color: var(--muted); }
.mock__row { display: flex; gap: 7px; margin-top: 16px; flex-wrap: wrap; }
.mock__tag { padding: 4px 10px; border-radius: 99px; background: var(--bg-tint); font-size: .7rem; font-weight: 700; color: var(--red-d); }
.mock__meter { height: 7px; border-radius: 99px; background: rgba(255,255,255,.16); margin-top: 16px; overflow: hidden; }
.mock__meter span { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg,#ff8f9a,#ffcf9a); }

.pane__body { padding: 26px 28px 30px; }
.pane__body h3 { font-size: 1.28rem; margin-bottom: 10px; }
.pane__body p { color: var(--muted); font-size: .95rem; }
.ticks { display: grid; gap: 8px; margin-top: 16px; }
.ticks li { display: flex; align-items: flex-start; gap: 9px; font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.ticks .ic { width: 15px; height: 15px; margin-top: 4px; color: var(--green); stroke-width: 2.8; }

/* ==========================================================================
   why-us cards
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card {
  padding: 28px 24px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.card__ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 18px; }
.card__ic .ic { width: 22px; height: 22px; }
.card__ic--red    { background: rgba(245,35,61,.12); color: var(--red-d); }
.card__ic--rose   { background: rgba(255,77,109,.14); color: #d81e42; }
.card__ic--amber  { background: rgba(255,180,61,.16); color: #cf8409; }
.card__ic--teal   { background: rgba(34,207,184,.14); color: #0f9e8d; }
.card h3 { margin-bottom: 9px; }
.card p { font-size: .91rem; color: var(--muted); }

/* ==========================================================================
   crew / people
   ========================================================================== */
.people { position: relative; overflow: hidden; }
.people::before {
  content: ""; position: absolute; z-index: -1;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  top: -18vw; right: -16vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,35,61,.12), transparent 68%);
  filter: blur(40px);
}

.crew { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.crew__c {
  text-align: center; padding: 30px 22px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.crew__c:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.crew__ava {
  width: 76px; height: 76px; margin: 0 auto 16px;
  border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 8px 20px rgba(27,18,24,.14);
}
.crew__role { font-size: .8rem; font-weight: 700; color: var(--red-d); margin-top: 4px; }
.crew__quote { font-family: "Caveat", cursive; font-size: 1.12rem; line-height: 1.4; color: var(--ink-2); margin-top: 14px; }

.support {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 30px; padding: 20px 26px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.support__l { display: flex; align-items: center; gap: 14px; }
.support__pulse {
  width: 11px; height: 11px; border-radius: 50%; background: var(--green); flex: none;
  box-shadow: 0 0 0 4px rgba(34,192,122,.18);
  animation: pulse 2.4s infinite;
}
.support__l strong { display: block; color: var(--ink); font-size: 1rem; }
.support__l span { font-size: .86rem; color: var(--muted); }
.support__r { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   reviews
   ========================================================================== */
.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rev {
  display: flex; flex-direction: column;
  padding: 28px 26px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease);
}
.rev:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.rev blockquote { margin: 16px 0 22px; }
.rev blockquote p { font-size: 1rem; color: var(--ink-2); line-height: 1.6; }
.rev figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.rev__ava { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none; }
.rev__who strong { display: block; font-size: .92rem; color: var(--ink); }
.rev__who span { font-size: .78rem; color: var(--muted); }

/* ==========================================================================
   promo band
   ========================================================================== */
.band { padding: clamp(40px, 6vw, 60px) 0; background: var(--ink); color: rgba(255,255,255,.76); position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 140% at 12% 0%, rgba(245,35,61,.5), transparent 62%),
              radial-gradient(60% 140% at 88% 100%, rgba(255,138,61,.34), transparent 62%);
}
.band__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.band__kick { font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.band__h { color: #fff; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.band__code {
  display: inline-block; padding: 2px 12px; border-radius: 12px;
  border: 2px dashed rgba(255,255,255,.45); letter-spacing: .04em;
}
.band__sub { margin-top: 12px; font-size: .95rem; }
.band__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq__wrap { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
.faq__main { min-width: 0; }

.acc { display: grid; gap: 12px; }
.acc__i {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-1);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.acc__i.is-open { border-color: rgba(245,35,61,.3); box-shadow: 0 8px 26px rgba(245,35,61,.12); }
.acc__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 19px 22px; text-align: left;
  font-size: 1.01rem; font-weight: 700; color: var(--ink); letter-spacing: -.012em;
}
.acc__x {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-tint); color: var(--red-d);
  transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.acc__x .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.acc__i.is-open .acc__x { transform: rotate(45deg); background: var(--grad-btn); color: #fff; }
.acc__a { overflow: hidden; height: 0; transition: height .34s var(--ease); }
.acc__a > div { padding: 0 22px 21px; }
.acc__a p { font-size: .95rem; color: var(--muted); }

.faq__aside { display: grid; gap: 18px; position: sticky; top: calc(var(--hdr-h) + 20px); }
.score {
  padding: 26px; border-radius: var(--r-lg);
  background: linear-gradient(160deg, #fff7ec, #ffeef0);
  border: 1px solid rgba(255,180,61,.28);
}
.score__n { font-size: 3rem; font-weight: 800; letter-spacing: -.05em; color: var(--ink); line-height: 1; }
.score__n span { font-size: 1.1rem; color: var(--muted); font-weight: 700; }
.score .stars { margin-top: 8px; }
.score__l { font-size: .84rem; color: var(--muted); margin-top: 6px; }
.score__bars { display: grid; gap: 7px; margin-top: 18px; }
.score__bars li { display: grid; grid-template-columns: 26px 1fr 34px; align-items: center; gap: 10px; font-size: .75rem; font-weight: 700; color: var(--muted); }
.bar { height: 7px; border-radius: 99px; background: rgba(27,18,24,.08); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--amber), var(--red)); }
.score__bars li span:last-child { text-align: right; }

.help {
  padding: 26px; border-radius: var(--r-lg);
  background: var(--ink); color: rgba(255,255,255,.72);
  box-shadow: var(--sh-2);
}
.help__ava { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; margin-bottom: 16px; }
.help h3 { color: #fff; margin-bottom: 10px; font-size: 1.2rem; }
.help p { font-size: .91rem; margin-bottom: 20px; }

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

.hero--svc { padding-top: clamp(24px, 3vw, 40px); }
.hero--svc .hero__in { align-items: start; }

/* breadcrumb */
.crumbs { margin-bottom: clamp(20px, 3vw, 32px); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .84rem; }
.crumbs li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--muted-2); opacity: .6; }
.crumbs a { color: var(--muted); font-weight: 600; }
.crumbs a:hover { color: var(--red-d); }
.crumbs [aria-current] { color: var(--ink); font-weight: 700; }

.pill .ic { width: 15px; height: 15px; color: var(--red-d); }

.hero__ticks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px; margin-top: 26px; max-width: 460px;
}
.hero__ticks li { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--ink-2); }
.hero__ticks .ic { width: 15px; height: 15px; margin-top: 4px; color: var(--green); stroke-width: 2.8; }

/* form fields */
.field {
  width: 100%; padding: 12px 16px;
  border-radius: 12px; border: 1.5px solid var(--line-2);
  background: var(--bg-soft); font-size: .95rem; color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field:focus { background: #fff; border-color: var(--red); outline: none; box-shadow: 0 0 0 3px rgba(245,35,61,.14); }
.field::placeholder { color: var(--muted-2); }

.field--select {
  appearance: none; -webkit-appearance: none;
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b6b72' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
}

.inputwrap { position: relative; }
.inputwrap__at {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  font-weight: 700; color: var(--muted-2); pointer-events: none;
}
.inputwrap .field { padding-left: 32px; }

.hint { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: .77rem; color: var(--muted-2); }
.hint .ic { width: 13px; height: 13px; color: var(--green); }

/* price table */
.tblwrap {
  overflow-x: auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 15px 18px; text-align: left;
  background: var(--bg-tint); color: var(--ink);
  font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.tbl tbody th, .tbl tbody td {
  padding: 14px 18px; text-align: left;
  border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-2);
}
.tbl tbody th { font-weight: 800; color: var(--ink); white-space: nowrap; }
.tbl tbody td:nth-child(2) { font-weight: 800; color: var(--ink); }
.tbl tbody tr:hover { background: rgba(245,35,61,.035); }
.tbl__act { text-align: right !important; white-space: nowrap; }
.btn--sm { padding: 8px 16px; font-size: .84rem; }

/* related cards */
.rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rel__c {
  display: flex; flex-direction: column;
  padding: 26px 24px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  color: inherit;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.rel__c:hover {
  transform: translateY(-6px); box-shadow: var(--sh-2);
  border-color: rgba(245,35,61,.28); text-decoration: none;
}
.rel__ic {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px; margin-bottom: 16px;
  background: var(--bg-tint); color: var(--red-d);
}
.rel__ic .ic { width: 21px; height: 21px; }
.rel__c h3 { margin-bottom: 8px; }
.rel__c p { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.rel__go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
  font-size: .88rem; font-weight: 700; color: var(--red-d);
}
.rel__c:hover .rel__go .ic { transform: translateX(3px); }
.rel__go .ic { width: 15px; height: 15px; transition: transform .22s var(--ease); }

/* ==========================================================================
   newsletter
   ========================================================================== */
.news {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(26px, 4vw, 48px); align-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
}
.news__copy p:last-child { margin-top: 16px; color: var(--muted); font-size: .96rem; }
.news__row { display: flex; gap: 10px; }
.news__row input {
  flex: 1; min-width: 0;
  padding: 13px 18px; border-radius: 99px;
  border: 1.5px solid var(--line-2); background: var(--bg-soft);
  font-size: .95rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.news__row input::placeholder { color: var(--muted-2); }
.news__row input:focus { background: #fff; border-color: var(--red); }
.news__row input[aria-invalid="true"] { border-color: #c00d26; }
.err { margin-top: 9px; font-size: .82rem; font-weight: 600; color: #c00d26; }
.news__fine { margin-top: 12px; font-size: .78rem; color: var(--muted-2); }

/* ==========================================================================
   final CTA
   ========================================================================== */
.final { text-align: center; }
.final__in { max-width: 700px; margin-inline: auto; }
.final p { margin-top: 16px; color: var(--muted); font-size: 1.04rem; }
.final__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.pays { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.pays li {
  padding: 8px 16px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-1);
  font-size: .78rem; font-weight: 800; letter-spacing: .02em; color: var(--muted);
}
.final__fine { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .82rem; color: var(--muted-2); }
.final__fine .ic { width: 14px; height: 14px; }

/* ==========================================================================
   footer
   ========================================================================== */
.ftr { background: var(--ink); color: rgba(255,255,255,.62); padding: clamp(48px, 6vw, 74px) 0 26px; }
.ftr__in { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 34px; }
.ftr__brand p { font-size: .92rem; margin-top: 16px; max-width: 34ch; }
.ftr__loc { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem !important; color: rgba(255,255,255,.45); }
.ftr__loc .ic { width: 15px; height: 15px; }
.ftr__col h2 { font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.ftr__col ul { display: grid; gap: 10px; }
.ftr__col a { font-size: .92rem; color: rgba(255,255,255,.62); }
.ftr__col a:hover { color: #fff; text-decoration: none; }

.ftr__bot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: clamp(34px, 5vw, 54px); padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .84rem;
}
.ftr__legal { display: flex; gap: 18px; }
.ftr__legal a { color: rgba(255,255,255,.55); font-size: .84rem; }
.ftr__legal a:hover { color: #fff; text-decoration: none; }
.ftr__social { display: flex; gap: 9px; }
.ftr__social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.72);
  transition: background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.ftr__social a:hover { background: var(--grad-btn); color: #fff; transform: translateY(-3px); text-decoration: none; }
.ftr__social .ic { width: 18px; height: 18px; }

/* ==========================================================================
   back-to-top + toast
   ========================================================================== */
.totop {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: #fff; box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: all .3s var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--red-d); }
.totop .ic { width: 19px; height: 19px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 300;
  transform: translate(-50%, 130%);
  padding: 13px 22px; border-radius: 99px;
  background: var(--ink); color: #fff;
  font-size: .9rem; font-weight: 600;
  box-shadow: var(--sh-3);
  transition: transform .4s var(--ease);
  max-width: calc(100% - 32px); text-align: center;
}
.toast.is-on { transform: translate(-50%, 0); }

/* ==========================================================================
   commerce — shared components
   --------------------------------------------------------------------------
   Cart, Checkout and Account_Area components. Every colour, space, radius,
   shadow and easing value below is either a Design_Token custom property or a
   literal that already appears above in this file (Requirement 10.1). Red text
   on white always uses --red-d; --red is only ever a fill, a border or a focus
   ring (Requirements 10.3, 11.14).

   Naming note: the checkout step indicator is NOT .steps/.step. Those two are
   the "How it works" section on the home and service pages — a 3-column grid of
   numbered cards with a dashed connector. The checkout indicator is a compact
   inline progress strip and the quantity control is a pill, so both take their
   own names: .cksteps for the indicator, .qstep for the stepper.
   ========================================================================== */

/* ---------- Prototype_Notice ---------- */
.pnote {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; margin-bottom: clamp(20px, 3vw, 32px);
  background: var(--bg-tint); border: 1px solid rgba(245,35,61,.16);
  border-radius: var(--r-sm);
  font-size: .88rem; color: var(--ink-2);
}
.pnote .ic { width: 17px; height: 17px; margin-top: 3px; flex: none; color: var(--red-d); }
.pnote strong { color: var(--ink); }
/* above an Auth_Screen form the notice sits tighter to what it qualifies */
.pnote--auth { margin-bottom: 18px; }

/* ---------- empty state ---------- */
.empty {
  display: grid; justify-items: center; gap: 14px;
  padding: clamp(36px, 6vw, 64px) 24px; text-align: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.empty__ic {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 18px;
  background: var(--bg-tint); color: var(--red-d);
}
.empty__ic .ic { width: 26px; height: 26px; }
.empty h2 { font-size: 1.32rem; }
.empty p { font-size: .95rem; color: var(--muted); max-width: 44ch; }

/* ---------- quantity stepper ---------- */
.qstep {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--bg-soft); border: 1.5px solid var(--line-2);
  border-radius: 99px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.qstep:focus-within { background: #fff; border-color: var(--red); }
.qstep__b {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.qstep__b:hover:not(:disabled) { background: var(--bg-tint); color: var(--red-d); }
.qstep__b:disabled { color: var(--muted-2); cursor: not-allowed; }
.qstep__b .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.qstep__in {
  width: 48px; padding: 4px 0; text-align: center;
  background: none; border: 0;
  font-size: .95rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
  appearance: textfield; -moz-appearance: textfield;
}
.qstep__in::-webkit-outer-spin-button,
.qstep__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- cart table variant ---------- */
.tbl.tbl--cart { min-width: 720px; }
.tbl--cart tbody th { white-space: normal; min-width: 190px; }
.tbl--cart tbody tr:hover { background: transparent; }
.tbl--cart .tbl__meta {
  display: block; margin-top: 4px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
}
.tbl--cart .tbl__qty { width: 150px; }
.tbl--cart .tbl__sum {
  text-align: right !important; white-space: nowrap;
  font-weight: 800; color: var(--ink);
}
.tbl__x {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--muted);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.tbl__x:hover { background: rgba(245,35,61,.12); color: var(--red-d); }
.tbl__x .ic { width: 16px; height: 16px; }

/* ---------- order table variant ---------- */
.tbl.tbl--orders { min-width: 780px; }
.tbl--orders .tbl__status { white-space: nowrap; }
.tbl--orders .tbl__num {
  text-align: right !important; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tbl--orders tbody th { font-variant-numeric: tabular-nums; }

/* ---------- promo code field ---------- */
.promo {
  display: grid; gap: 10px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1.5px dashed var(--line-2); border-radius: var(--r-sm);
}
.promo__lbl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .79rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-2);
}
.promo__lbl .ic { width: 14px; height: 14px; color: var(--red-d); }
.promo__row { display: flex; gap: 8px; }
.promo__row .field {
  flex: 1 1 auto; min-width: 0;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.promo.is-applied { border-style: solid; border-color: var(--green); background: #fff; }
/* the applied line reads as text first — the tick is a second signal, not the
   only one (Requirement 11.15) */
.promo__ok {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .87rem; font-weight: 700; color: var(--ink);
}
.promo__ok .ic { width: 15px; height: 15px; color: #12875a; stroke-width: 2.8; }

/* ---------- Order_Summary ---------- */
.summary { display: grid; gap: 12px; }
.summary__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: .94rem; color: var(--ink-2);
}
.summary__row dd { font-weight: 700; color: var(--ink); white-space: nowrap; }
/* the discount row toggles on `hidden`; .summary__row's display would otherwise
   override the attribute and leave a "-$0" row showing with no code applied */
.summary__row[hidden] { display: none; }
.summary__row--disc, .summary__row--disc dd { color: var(--red-d); }
.summary__row--total {
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 1.02rem; font-weight: 700; color: var(--ink);
}
.summary__row--total dd {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1;
}
.summary__meta {
  display: grid; gap: 8px;
  padding: 12px 14px; border-radius: var(--r-xs);
  background: var(--bg-soft);
  font-size: .84rem; color: var(--muted);
}
.summary__meta li { display: flex; align-items: flex-start; gap: 8px; }
.summary__meta .ic { width: 14px; height: 14px; margin-top: 4px; flex: none; color: var(--red-d); }
.summary__meta strong { color: var(--ink); font-weight: 700; }

/* ---------- inline undo row ---------- */
.undo { background: var(--bg-soft); }
.undo__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.undo__txt { display: inline-flex; align-items: flex-start; gap: 9px; font-size: .9rem; color: var(--ink-2); }
.undo__txt .ic { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--muted); }
.undo__r { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.undo__b {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 99px;
  background: #fff; border: 1.5px solid var(--line-2);
  font-size: .85rem; font-weight: 700; color: var(--ink);
  transition: border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.undo__b:hover { border-color: var(--red); color: var(--red-d); box-shadow: var(--sh-1); }
.undo__b .ic { width: 15px; height: 15px; }
/* the numeric countdown is always rendered, so the remaining time is carried by
   text and not only by the draining bar (Requirements 11.12, 11.15) */
.undo__count {
  font-size: .8rem; font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.undo__bar {
  width: 120px; height: 4px; border-radius: 99px;
  background: rgba(27,18,24,.08); overflow: hidden;
}
.undo__bar i {
  display: block; height: 100%; border-radius: 99px;
  background: var(--grad-btn);
  animation: undoDrain 10s linear forwards;
}
@keyframes undoDrain {
  from { width: 100%; }
  to   { width: 0; }
}

/* ---------- Cart_Page layout ----------
   The line-item table and its notices on the left, the promo field and the
   Order_Summary in a sticky aside on the right. Two columns here; the
   responsive block collapses it to one under 960px, where .faq__wrap and the
   others collapse too, and drops the sticky so the summary flows after the
   table on a phone. */
.cart {
  display: grid; align-items: start;
  gap: clamp(22px, 4vw, 40px);
  grid-template-columns: minmax(0, 1fr) 358px;
}
.cart__main { display: grid; gap: 18px; min-width: 0; }
.cart__aside { display: grid; gap: 16px; position: sticky; top: calc(var(--hdr-h) + 18px); }
.cart__box {
  display: grid; gap: 15px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.cart__box h2 { font-size: 1.06rem; }
.cart__keep { margin-top: 2px; }

/* ---------- Mini_Cart ---------- */
.minicart { position: relative; }
.minicart__t {
  position: relative;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  color: var(--ink);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.minicart__t:hover,
.minicart__t[aria-expanded="true"] { background: var(--bg-tint); color: var(--red-d); }
.minicart__t .ic { width: 20px; height: 20px; }
.minicart__n {
  position: absolute; top: 1px; right: -1px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 99px; background: var(--grad-btn); color: #fff;
  font-size: .66rem; font-weight: 800; line-height: 19px; text-align: center;
  box-shadow: var(--sh-brand);
}
.minicart__n:empty { display: none; }
.minicart__pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 120;
  width: 340px; max-width: calc(100vw - 32px);
  padding: 18px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh-3);
  animation: fadeUp .22s var(--ease) both;
}
.minicart__pop[hidden] { display: none; }
.minicart__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.minicart__h h2 { font-size: 1rem; }
.minicart__h span { font-size: .8rem; font-weight: 600; color: var(--muted); }
.minicart__list { display: grid; gap: 10px; max-height: 262px; overflow-y: auto; }
.minicart__li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.minicart__li:last-child { padding-bottom: 0; border-bottom: 0; }
.minicart__svc { font-size: .87rem; font-weight: 700; color: var(--ink); }
.minicart__qty { display: block; font-size: .76rem; font-weight: 600; color: var(--muted); }
.minicart__p { font-size: .9rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.minicart__more { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.minicart__foot {
  display: grid; gap: 10px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.minicart__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .94rem; color: var(--ink-2); }
.minicart__sub b { font-size: 1.18rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.minicart__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ---------- Checkout step indicator ---------- */
.cksteps {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(24px, 4vw, 38px);
}
.cksteps__i {
  flex: 1 1 170px;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--sh-1);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cksteps__n {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-tint); color: var(--red-d);
  font-size: .86rem; font-weight: 800;
}
.cksteps__i[aria-current="step"] { border-color: var(--red); box-shadow: 0 6px 18px rgba(245,35,61,.14); }
.cksteps__i[aria-current="step"] .cksteps__n { background: var(--grad-btn); color: #fff; box-shadow: var(--sh-brand); }
.cksteps__i.is-done .cksteps__n { background: rgba(34,192,122,.12); color: #12875a; }
.cksteps__lbl { display: grid; min-width: 0; }
/* "Step 2 of 3" as visible text — the filled circle is never the only carrier
   of position (Requirement 11.15) */
.cksteps__lbl span {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
}
.cksteps__lbl b { font-size: .9rem; font-weight: 800; letter-spacing: -.012em; color: var(--ink); }

/* one checkout stage per document, swapped in place */
.ckstage { animation: fadeUp .35s var(--ease) both; }
.ckstage[hidden] { display: none; }

/* ---------- validation summary ---------- */
.errsum {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; margin-bottom: 20px;
  background: var(--bg-tint);
  border: 1.5px solid var(--red); border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}
.errsum[hidden] { display: none; }
.errsum .ic { width: 19px; height: 19px; margin-top: 3px; flex: none; color: var(--red-d); }
.errsum h2 { font-size: 1rem; color: var(--red-d); }
.errsum ul { display: grid; gap: 6px; margin-top: 9px; }
.errsum li { font-size: .89rem; color: var(--ink-2); }
.errsum a { color: var(--red-d); font-weight: 700; text-decoration: underline; }
.errsum a:hover { color: var(--ink); }

/* ---------- Saved_Handle suggestions ---------- */
/* hosted inside .inputwrap, which is already position: relative */
.sugg {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 212px; overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); box-shadow: var(--sh-2);
}
.sugg[hidden] { display: none; }
.sugg__i {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 11px; border-radius: var(--r-xs);
  text-align: left; font-size: .89rem; color: var(--ink-2);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.sugg__i:hover, .sugg__i[aria-selected="true"] { background: var(--bg-tint); color: var(--ink); }
.sugg__i .ic { width: 16px; height: 16px; flex: none; color: var(--red-d); }
.sugg__i b { font-weight: 800; color: var(--ink); }
.sugg__i span { font-size: .78rem; color: var(--muted); }
.sugg__none { padding: 9px 11px; font-size: .84rem; color: var(--muted); }

/* ---------- order status badge ---------- */
/* Every badge carries a Sprite icon AND the status word. The word is the
   status; the tint and the icon colour are a second signal only, so a
   Delivered badge is never told apart from a Refunded one by colour alone
   (Requirement 11.15). Badge text stays --ink at every variant so contrast
   holds regardless of tint (Requirement 11.14). */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 99px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: .76rem; font-weight: 800; color: var(--ink);
  white-space: nowrap;
}
.badge .ic { width: 14px; height: 14px; flex: none; stroke-width: 2.4; color: var(--muted); }
.badge--pending { background: var(--bg-soft); border-color: var(--line-2); }
.badge--pending .ic { color: var(--muted); }
.badge--progress { background: rgba(34,207,184,.14); }
.badge--progress .ic { color: #0f9e8d; }
.badge--delivered { background: rgba(34,192,122,.12); }
.badge--delivered .ic { color: #12875a; }
.badge--partial { background: rgba(255,180,61,.16); }
.badge--partial .ic { color: #cf8409; }
.badge--refunded { background: rgba(255,77,109,.14); }
.badge--refunded .ic { color: #d81e42; }
.badge--cancelled { background: rgba(245,35,61,.12); }
.badge--cancelled .ic { color: var(--red-d); }

/* ---------- delivery progress bar ---------- */
/* borrows .rail__bar's token values, none of its behaviour */
.prog { display: grid; gap: 8px; }
.prog__bar {
  height: 8px; border-radius: 99px;
  background: rgba(27,18,24,.08); overflow: hidden;
}
.prog__fill {
  display: block; height: 100%; width: var(--w, 0%);
  border-radius: 99px; background: var(--grad-btn);
  transition: width .4s var(--ease);
}
/* a partial delivery is a different state, not a shorter bar */
.prog--part .prog__fill { background: linear-gradient(90deg, var(--amber), var(--orange)); }
/* the same numbers as text, next to the bar (Requirements 5.7, 11.15) */
.prog__txt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: .84rem; font-weight: 600; color: var(--muted);
}
.prog__txt b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- refill request timeline ---------- */
.tl { display: grid; }
.tl__i { position: relative; display: grid; gap: 3px; padding: 0 0 20px 32px; }
.tl__i::before {
  content: ""; position: absolute; left: 5px; top: 6px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--line-2);
}
.tl__i::after {
  content: ""; position: absolute; left: 10px; top: 21px; bottom: 0; width: 2px;
  background: repeating-linear-gradient(var(--line-2) 0 5px, transparent 5px 9px);
}
.tl__i:last-child { padding-bottom: 0; }
.tl__i:last-child::after { display: none; }
.tl__i.is-on::before { border-color: var(--red); box-shadow: 0 0 0 4px rgba(245,35,61,.12); }
.tl__i.is-done::before { background: var(--green); border-color: var(--green); }
.tl__when { font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.tl__what { font-size: .92rem; font-weight: 700; color: var(--ink); }
.tl__note { font-size: .86rem; color: var(--muted); }

/* ---------- focus (Requirement 11.7) ----------
   Every control above inherits the global :focus-visible ring. These four sit
   inside a rounded pill or a scrolling container where the global 3px offset
   would be clipped, so they restate the same ring at a tighter offset. */
.qstep__b:focus-visible,
.qstep__in:focus-visible,
.sugg__i:focus-visible,
.minicart__li .tbl__x:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 1px;
}

/* ==========================================================================
   admin — components
   --------------------------------------------------------------------------
   Admin_Area only: the Order_Queue, the Catalogue_Manager, the Approvals_Queue
   and the Revenue_Report. Same rules as the commerce block above — every
   colour, space, radius, shadow and easing value is a Design_Token custom
   property or a literal that already appears earlier in this file
   (Requirement 10.1); red text on white is always --red-d and --red is only
   ever a fill, a border or a focus ring (Requirements 10.3, 11.14).

   Reused unchanged, and deliberately not restyled here: .tbl, .tblwrap,
   .field, .field--select, .btn, .pcard, .badge, .toast, .sr-only, .empty and
   .pnote. Every table rule below is scoped through a .tbl--pick or .tbl--cat
   modifier, so the price table on the service page cannot be reached from the
   admin rules.

   Naming, same discipline as .cksteps / .qstep above: .filt, .queue, .dlg,
   .warn and .kpis are names no existing rule uses. .score--kpi is the one
   exception and it is deliberate — see the Revenue_Report block.

   No entry is added to the responsive block below. Every layout here is an
   auto-fit grid or a wrapping flex row, and the two tables sit inside
   .tblwrap, which already scrolls on the x-axis; nothing needs a breakpoint
   to survive a 360px viewport.
   ========================================================================== */

/* ---------- filter bar ---------- */
/* A <fieldset> with an .sr-only <legend> naming the group, holding two
   .field--select controls for status and platform and two <input type="date">
   for the range (Requirement 9.4). The two fieldset resets are load-bearing:
   a fieldset's default min-inline-size is min-content, so without the reset a
   grid child can never shrink below its widest option and the bar pushes out
   of the shell on a narrow viewport. */
.filt {
  min-inline-size: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  align-items: end; gap: 12px 14px;
  padding: 16px 18px; margin-bottom: clamp(18px, 3vw, 28px);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.filt__f { display: grid; gap: 6px; min-width: 0; }
.filt__f > label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2);
}
.filt__f > label .ic { width: 13px; height: 13px; color: var(--red-d); }
.filt__f .field { padding: 10px 14px; font-size: .9rem; }
.filt__f .field--select { padding-right: 38px; }
.filt__acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* The bar always states what it is currently showing — "40 of 40 orders" — so
   a filter that matches nothing is never read as an empty data set, and the
   count the bulk action will affect is on screen before it is taken. */
.filt__count {
  grid-column: 1 / -1;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.filt__count b { font-weight: 800; color: var(--ink); }

/* ---------- bulk-select table ---------- */
/* .tbl--pick adds one leading checkbox column. The header checkbox is labelled
   with the visible row count and toggles the filtered rows only (Requirement
   9.6), which is why .filt__count above and that label have to agree. */
.tbl.tbl--pick { min-width: 820px; }
.tbl--pick .tbl__pick { width: 46px; padding-right: 0; text-align: center; }
.tbl__cb {
  width: 17px; height: 17px; margin: 0;
  accent-color: var(--red); cursor: pointer;
}
/* A selected row is marked by its own checked checkbox, a solid left edge and
   a tint — three signals, one of which is colour (Requirement 11.15). */
.tbl--pick tbody tr.is-sel { background: rgba(245,35,61,.06); }
.tbl--pick tbody tr.is-sel:hover { background: rgba(245,35,61,.09); }
.tbl--pick tbody tr.is-sel > .tbl__pick { box-shadow: inset 3px 0 0 var(--red); }

/* Sortable header: a real <button> inside the <th>, with aria-sort on the th,
   so the direction is exposed to assistive technology and not only drawn. */
.tbl__sort {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.tbl__sort .ic { width: 13px; height: 13px; flex: none; color: var(--muted); stroke-width: 2.4; }
.tbl__sort:hover, .tbl__sort:hover .ic { color: var(--red-d); }
.tbl--pick th[aria-sort] .tbl__sort { color: var(--red-d); }
.tbl--pick th[aria-sort] .tbl__sort .ic { color: var(--red-d); }
.tbl--pick th[aria-sort="descending"] .tbl__sort .ic { transform: rotate(180deg); }

/* The strip above the table: the select-all label, the selection live region
   and the bulk action that opens .dlg naming the count. */
.tbl__bulk {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 10px;
  background: var(--bg-tint); border: 1px solid rgba(245,35,61,.16);
  border-radius: var(--r-xs);
}
.tbl__bulk p { font-size: .87rem; font-weight: 700; color: var(--ink); }
.tbl__bulk p:empty { display: none; }
.tbl__bulkacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tbl__bulkacts .field--select {
  width: auto; min-width: 186px;
  padding: 9px 38px 9px 14px; font-size: .88rem;
}

/* ---------- Catalogue_Manager table ---------- */
/* Read-only rows carrying quantity, price, per-1,000 rate, delivery and refill
   (Requirement 9.7). A price edit becomes a LOCAL override that changes this
   table and nothing a shopper pays (Requirement 9.11) — the surface says so in
   words; this block makes the changed rows findable.
   An overridden row carries four signals and only one of them is colour:
     · a solid left edge on the row,
     · the word "Override" in .tbl__ovr, with the i-alert glyph beside it,
     · the ORIGINAL price struck through under the new one, in .tbl__was,
     · the new price at a heavier weight than an untouched one.
   So an operator can scan the table and see which prices they changed without
   depending on the tint (Requirements 9.8, 11.15). */
.tbl.tbl--cat { min-width: 880px; }
.tbl--cat .tbl__num {
  text-align: right !important; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tbl--cat .tbl__rate { color: var(--muted); font-variant-numeric: tabular-nums; }
.tbl--cat .tbl__term { font-size: .86rem; color: var(--muted); }
.tbl--cat tbody tr.is-over { background: rgba(255,180,61,.1); }
.tbl--cat tbody tr.is-over:hover { background: rgba(255,180,61,.16); }
.tbl--cat tbody tr.is-over > *:first-child { box-shadow: inset 3px 0 0 var(--amber); }
.tbl--cat tbody tr.is-over .tbl__num { font-weight: 800; color: var(--ink); }
/* the Catalogue's own value, kept on screen beside the override */
.tbl__was {
  display: block; margin-top: 2px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.tbl__ovr {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line-2);
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.tbl__ovr .ic { width: 12px; height: 12px; flex: none; color: #cf8409; stroke-width: 2.6; }

/* ---------- ladder-violation warning ---------- */
/* Requirement 9.10: the warning names BOTH packages and the override still
   applies. It is a notice, not a block — nothing here disables a control, and
   .warn__note carries the sentence saying the edit took effect anyway, so the
   operator is not left guessing. */
.warn {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; margin-top: 12px;
  background: #fff;
  border: 1.5px solid var(--red); border-left-width: 4px;
  border-radius: var(--r-xs);
  font-size: .87rem; color: var(--ink-2);
}
.warn[hidden] { display: none; }
.warn .ic { width: 17px; height: 17px; margin-top: 2px; flex: none; color: var(--red-d); }
.warn h3 { font-size: .88rem; color: var(--red-d); }
.warn strong { color: var(--red-d); }
.warn b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.warn__note { margin-top: 5px; font-size: .82rem; color: var(--muted); }
/* the same shape at a lower temperature, for the export and regeneration
   statements — which are standing facts, not a broken ladder */
.warn--note { border-color: var(--line-2); border-left-color: var(--amber); }
.warn--note .ic { color: #cf8409; }
.warn--note h3, .warn--note strong { color: var(--ink); }

/* ---------- Approvals_Queue ---------- */
/* A list of .pcard rather than a table: each entry carries an action plus a
   reason field, and a table cell is a poor host for that. .pcard is reused
   unchanged — the rules below lay the card's contents out and drop the
   marketing hover lift, which has no business on a work queue.
   Each card shows reference, customer, requested action and age in days
   (Requirement 9.14); declining opens .dlg and requires a reason (9.15). */
.queue { display: grid; gap: 14px; }
.queue .pcard { gap: 12px; }
.queue .pcard:hover { transform: none; box-shadow: var(--sh-1); border-color: var(--line); }
.queue__hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.queue__ref {
  font-size: .95rem; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.queue__who { font-size: .85rem; color: var(--muted); }
.queue__who b { font-weight: 700; color: var(--ink-2); }
.queue__ask { display: grid; gap: 4px; }
.queue__ask dt {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2);
}
.queue__ask dd { font-size: .92rem; font-weight: 700; color: var(--ink); }
/* Age is a number of days in words. An old request is emphasised, but the
   number is the signal and the tint is not (Requirement 11.15). */
.queue__age {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 99px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: .76rem; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.queue__age .ic { width: 13px; height: 13px; flex: none; color: var(--muted); }
.queue__age.is-old { background: rgba(255,180,61,.16); border-color: rgba(255,180,61,.16); }
.queue__age.is-old .ic { color: #cf8409; }
.queue__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ---------- confirmation dialog ---------- */
/* A native <dialog> opened with showModal(). The focus trap, Escape and focus
   return that Requirement 11.13 asks for are all native behaviour, which is
   the entire reason for using the element instead of building a modal.
   FLAG, carried from the design: jsdom does not implement showModal(), so
   tools/check-runtime.mjs cannot exercise this component — opening, the trap
   and the focus return are untested by the harness and need either a current
   jsdom or a small shim. The CSS below is therefore verified by reading and by
   the static checks only.
   Two instances: the bulk-action confirmation naming the affected count (9.6),
   and the decline dialog, which will not submit without a reason (9.15). */
.dlg {
  width: 460px; max-width: calc(100vw - 32px);
  padding: 22px 24px 20px;
  background: #fff; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3);
}
/* a <dialog> is display:none until open; state it rather than inherit it */
.dlg:not([open]) { display: none; }
.dlg[open] { animation: fadeUp .22s var(--ease) both; }
/* ::backdrop inherits from nothing, so every value in it is a literal. The
   scrim is the --ink rgb triple the shadow tokens are built from, at a heavier
   alpha. */
.dlg::backdrop { background: rgba(27,18,24,.48); }
.dlg[open]::backdrop { animation: dlgVeil .22s var(--ease) both; }
@keyframes dlgVeil {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dlg__h { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; }
.dlg__h .ic { width: 20px; height: 20px; margin-top: 3px; flex: none; color: var(--red-d); }
.dlg__h h2 { font-size: 1.1rem; }
.dlg p { font-size: .91rem; color: var(--ink-2); }
/* The count, the order reference and the new status are named in the prose, so
   the dialog says what it is about to do instead of "Are you sure?". */
.dlg p b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.dlg__f { display: grid; gap: 7px; margin-top: 14px; }
.dlg__f label { font-size: .8rem; font-weight: 800; color: var(--ink); }
.dlg__f textarea.field { min-height: 84px; resize: vertical; font-family: inherit; }
.dlg__acts {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
}
/* Focus (Requirement 11.7). showModal() moves focus to the dialog itself when
   it holds no autofocus target, and the global ring sits 3px OUTSIDE the box —
   over the scrim, where it reads as a halo around the whole dialog rather than
   as a focus position. It is restated inward here, and the inner controls take
   a tighter offset because they sit against the dialog's own rounded edge. */
.dlg:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.dlg .btn:focus-visible,
.dlg .field:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* The blanket reduced-motion block under "preferences" targets *, *::before
   and *::after. A ::backdrop is matched by none of those three, so the veil
   animation above is the one motion in this file the blanket cannot reach and
   it needs its own rule. .dlg[open]'s own fadeUp is covered by the blanket:
   animation-fill-mode is both, so a .01ms duration lands it on its final
   state (Requirement 11.12). */
@media (prefers-reduced-motion: reduce) {
  .dlg[open]::backdrop { animation: none; }
}

/* ---------- Revenue_Report cards ---------- */
/* .score--kpi is a MODIFIER and composes with .score: the markup is
   <div class="score score--kpi">. That is the right call rather than a
   standalone class, because the two already agree on their internals —
   .score__n is the one big figure and .score__l is its caption, in both. What
   differs is skin and scale: the FAQ rating card is a single warm amber block
   sized for one 3rem figure in a sidebar, and the report needs six neutral
   cards in a grid at a size that survives "$1,234,567.89". So the modifier
   overrides the gradient, the border, the padding and the figure size, and
   inherits the markup contract. .score__bars is simply unused here.
   Six cards: gross revenue, discount given, refunds, net revenue, order count,
   average order value (Requirement 9.16). */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.score--kpi {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}
/* the caption sits above the figure in a report card, so the margin flips */
.score--kpi .score__l {
  margin: 0 0 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2);
}
.score--kpi .score__n {
  font-size: 1.85rem; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.score--kpi .score__n span { font-size: .9rem; }
/* net revenue is the figure the report is about */
.score--kpi.is-net { border-color: rgba(245,35,61,.28); box-shadow: 0 6px 18px rgba(245,35,61,.1); }
/* Discount given and refunds are money leaving. They read in --red-d on white,
   never as dark text on a red fill (Requirements 10.3, 11.14). */
.score--kpi.is-out .score__n { color: var(--red-d); }
/* Requirement 9.18: every figure is labelled demonstration data, through one
   suffix key rendered inside each card — not a single footnote under the grid
   that a screen reader reaches ten figures later. */
.score__demo {
  display: block; margin-top: 8px;
  font-size: .72rem; font-weight: 700; color: var(--muted-2);
}

/* ---------- radio group (Payment_Provider) ---------- */
/* Requirement 4.9 and the design's Checkout inventory list .field--group as a
   variant of .field. It appears in neither task 9.1's list nor 9.2's and task
   18.4 needs it, so it lands here with the other fieldset component.
   Applied to <fieldset class="field field--group"> with a VISIBLE <legend> —
   unlike .filt, whose legend is .sr-only, because a payment choice has to name
   itself on screen. Composing with .field is what makes the group read as one
   control, sharing the border, radius and soft fill of the inputs around it;
   the two resets below are the fieldset's padding and its min-content floor. */
.field--group {
  min-inline-size: 0;
  display: grid; gap: 5px;
  padding: 6px;
}
.field--group > legend {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 4px; margin-bottom: 2px;
  font-size: .79rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted-2);
}
.field--group > legend .ic { width: 14px; height: 14px; flex: none; color: var(--red-d); }
/* One <label> per provider, wrapping its own radio: the whole row is the hit
   target, and the radio stays real and visible rather than being replaced by a
   drawn glyph. */
.field--group label {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--r-xs);
  background: #fff; border: 1.5px solid var(--line);
  font-size: .92rem; font-weight: 700; color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field--group label:hover { border-color: var(--line-2); }
.field--group input[type="radio"] {
  width: 17px; height: 17px; margin: 0; flex: none;
  accent-color: var(--red); cursor: pointer;
}
/* The checked row is marked by the radio itself, by a heavier border and by
   the tint — the tint is the third signal, never the only one (11.15). The two
   selectors are separate rules on purpose: a browser without :has() drops that
   rule alone and the scripted .is-on class still works. */
.field--group label.is-on { border-color: var(--red); background: var(--bg-tint); }
.field--group label:has(input:checked) { border-color: var(--red); background: var(--bg-tint); }
.field--group input[type="radio"]:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.field--group p { font-size: .78rem; font-weight: 600; color: var(--muted); }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .cards, .crew { grid-template-columns: repeat(2, 1fr); }
  .nav a { padding: 9px 10px; font-size: .88rem; }
}

@media (max-width: 960px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero .lede { max-width: 48ch; }
  .hero__card { margin-top: 12px; }
  .float--a { right: 4px; }
  .float--b { left: 0; }
  .faq__wrap { grid-template-columns: 1fr; }
  .faq__aside { position: static; }
  .cart { grid-template-columns: 1fr; }
  .cart__aside { position: static; }
  .news { grid-template-columns: 1fr; }
  .steps, .revs, .rel { grid-template-columns: repeat(2, 1fr); }
  .rail > .rail__nav--prev { left: -6px; }
  .rail > .rail__nav--next { right: -6px; }
  .step:not(:last-child)::after { display: none; }
  .stats__in { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
  .stat:nth-child(3) { border-left: 0; }
  .panes { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .burger { display: block; }
  .hdr__cta > .btn { display: none; }   /* the language switcher stays, as on smmsumo */
  .langbtn { padding: 7px 9px; }
  .langmenu { min-width: 180px; }
  .nav {
    position: fixed; inset: var(--hdr-h) 0 auto; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 16px var(--pad) 24px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2);
    transform: translateY(-14px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease);
    /* cap to the space under the header and scroll — the open Services
       mega-menu can be taller than the screen inside this drawer */
    max-height: calc(100vh - var(--hdr-h)); overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav a { padding: 13px 14px; font-size: 1rem; border-radius: 12px; }
  .brand { margin-right: auto; }
}

@media (max-width: 680px) {
  :root { --hdr-h: 66px; }
  .hero__ticks { grid-template-columns: 1fr; }
  .tbl { min-width: 560px; }
  .steps, .revs, .cards, .crew, .rel { grid-template-columns: 1fr; }
  .rail > .rail__nav { display: none; }
  .rail__track { gap: 14px; }
  .stats__in { grid-template-columns: repeat(2, 1fr); }
  .scribble { display: none; }
  .hero__btns .btn { flex: 1 1 100%; }
  .news__row { flex-direction: column; }
  .news__row input, .news__row .btn { width: 100%; }
  .calc__total { flex-direction: column; align-items: flex-start; gap: 4px; }
  .band__in, .support { flex-direction: column; align-items: flex-start; }
  .support__r .btn, .band__btns .btn { flex: 1 1 auto; }
  .ftr__in { grid-template-columns: repeat(2, 1fr); }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr__bot { justify-content: center; text-align: center; }
  .float--a { top: -16px; right: -4px; font-size: .72rem; }
  .float--b { bottom: -18px; left: -4px; }
  .announce__x { display: none; }
  .minicart__pop { width: 300px; right: -8px; }
  .cksteps__i { flex: 1 1 100%; }
  .undo__in { align-items: flex-start; }
}

@media (max-width: 460px) {
  .stats__in { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; }
  .segs--icons .seg { flex: 1 1 100%; }
  .tab { font-size: .82rem; padding: 9px 14px; }
}

/* ==========================================================================
   preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* The blanket rule above already covers three of the four motions the
     commerce components use: the .prog__fill width transition, the
     .minicart__pop entry and the .ckstage step transition all either land on
     their final state instantly (animation-fill-mode: both) or simply do not
     move. Requirement 11.12 is met for those without a further rule.

     The undo countdown is the exception. Its bar carries ten seconds of
     information through motion, so a .01ms animation drains it instantly and
     reports that the window has closed when it has not. The bar goes, and the
     numeric countdown in .undo__count — which is rendered in both modes — is
     the remaining signal. */
  .undo__bar { display: none; }
}

@media print {
  .hdr, .announce, .totop, .toast, .marquee, .news__form { display: none !important; }
  body { color: #000; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   commerce backend — checkout, payment and tracking (PHP pages)
   The database-backed order flow reuses the .cart / .cart__box / .summary /
   .field / .btn / .badge / .tbl--orders furniture above; only the pieces below
   are new to those pages. Every value is a Design_Token or a literal already in
   this file, same rule as the rest.
   ========================================================================== */
.btn--block { width: 100%; }

.cofields { display: grid; gap: 20px; }
.cofield { display: grid; gap: 8px; }
.cofield__lbl { display: grid; gap: 2px; font-weight: 500; color: var(--ink); }
.cofield__lbl strong { font-weight: 800; }
.cofield__lbl span { font-size: .8rem; font-weight: 500; color: var(--muted); }
.cofield__hint { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }

.hint--err { color: var(--red-d); }
.hint--err::before { content: ""; }

/* payment method chooser: radio cards */
.paypick { display: grid; gap: 12px; }
.paypick__opt {
  display: block; cursor: pointer;
  border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.paypick__opt:hover { border-color: var(--red); }
.paypick__opt input { position: absolute; opacity: 0; pointer-events: none; }
.paypick__body { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; }
.paypick__body .ic { width: 20px; height: 20px; margin-top: 2px; flex: none; color: var(--red-d); }
.paypick__body b { display: block; font-size: .98rem; font-weight: 800; color: var(--ink); }
.paypick__body small { display: block; margin-top: 2px; font-size: .82rem; color: var(--muted); }
.paypick__opt:has(input:checked) { border-color: var(--red); background: var(--bg-tint); box-shadow: var(--sh-1); }
.paypick__opt input:focus-visible + .paypick__body { outline: 3px solid var(--red); outline-offset: 2px; border-radius: var(--r-sm); }

.payqr { display: grid; place-items: center; margin: 20px 0; }
.payqr img { border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 8px; }

/* landing-page spec strip (page.php) */
.pspecs {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; box-shadow: var(--sh-1);
}
.pspecs div { display: grid; gap: 2px; padding: 0 14px; border-right: 1px solid var(--line); }
.pspecs div:last-child { border-right: 0; }
.pspecs span { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pspecs b { font-size: 1.05rem; font-weight: 800; color: var(--ink); }

/* operator-authored long-form content from the DB (body/faq/how_to_buy) */
.prose { max-width: 760px; margin: 0 auto; color: var(--ink-2); font-size: 1rem; line-height: 1.7; }
.prose h1, .prose h2, .prose h3 { color: var(--ink); line-height: 1.25; margin: 1.6em 0 .5em; }
.prose h2 { font-size: 1.5rem; }
.prose h3 { font-size: 1.2rem; }
.prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3em; }
.prose li { margin: .35em 0; }
.prose a { color: var(--red-d); font-weight: 600; text-decoration: underline; }
.prose a:hover { color: var(--ink); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.prose th, .prose td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; }

/* all-services directory (all-services.php) */
.dirgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dircard {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; box-shadow: var(--sh-1); color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.dircard:hover { border-color: var(--red); box-shadow: var(--sh-2); transform: translateY(-2px); text-decoration: none; }
.dircard__name { font-weight: 700; font-size: .95rem; }
.dircard__meta { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.dircard__meta b { color: var(--red-d); font-weight: 800; }
.dircard__meta .ic { width: 14px; height: 14px; color: var(--red-d); }

/* reviews (page.php) — filled amber stars for "on", grey outline for "off" */
.rstar { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.rstar.is-on { fill: var(--amber); stroke: var(--amber); }

.revsum {
  display: grid; grid-template-columns: minmax(180px, 250px) 1fr; gap: 28px; align-items: center;
  padding: 22px; margin-bottom: 26px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.revscore { text-align: center; }
.revscore b { font-size: 3rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--ink); }
.revscore > span { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.revscore .stars { justify-content: center; margin: 10px 0 6px; }
.revscore small { font-size: .8rem; color: var(--muted); }
.revdist { display: grid; gap: 7px; }
.revdist__row { display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 10px; }
.revdist__lbl { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.revdist__lbl .rstar { width: 12px; height: 12px; }
.revdist__bar { height: 8px; border-radius: 99px; background: rgba(27,18,24,.08); overflow: hidden; }
.revdist__bar i { display: block; height: 100%; background: var(--amber); border-radius: 99px; }
.revdist__pct { font-size: .78rem; font-weight: 700; color: var(--muted); text-align: right; }

.revgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.rev { display: grid; gap: 10px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-1); }
.rev__txt { font-size: .92rem; color: var(--ink-2); line-height: 1.55; }
.rev__who { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.rev__av { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--bg-tint); color: var(--red-d); font-weight: 800; font-size: .9rem; }
.rev__id b { display: block; font-size: .88rem; color: var(--ink); }
.rev__id small { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; color: var(--muted); }
.rev__id small .ic { width: 12px; height: 12px; color: #12875a; }

.revform { max-width: 720px; margin-top: 34px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.revform h3 { font-size: 1.15rem; }
.revform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.rpick { display: inline-flex; gap: 4px; margin-top: 6px; }
.rpick__s { color: var(--line-2); padding: 2px; border-radius: var(--r-xs); }
.rpick__s svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rpick__s.is-on { color: var(--amber); }
.rpick__s.is-on svg { fill: var(--amber); stroke: var(--amber); }
.rpick__s:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
textarea.field { min-height: 96px; resize: vertical; line-height: 1.5; font-family: inherit; }

@media (max-width: 620px) {
  .revsum { grid-template-columns: 1fr; }
  .revform__grid { grid-template-columns: 1fr; }
}

/* ---------- Services mega-menu (fz-menu.js) ---------- */
.megawrap { position: relative; display: inline-flex; }
/* keep the label and its caret on one row — the global `svg { display:block }`
   reset would otherwise drop the caret onto a line of its own */
.megatrigger { display: inline-flex; align-items: center; }
.mega-caret { width: 11px; height: 11px; margin-left: 4px; flex: none; transition: transform .25s var(--ease); }
.megawrap.is-open .mega-caret { transform: rotate(180deg); }
.megawrap.is-open .megatrigger { color: var(--red-d); background: var(--bg-tint); }

/* A full-width sheet that drops from directly under the sticky header and
   spans the whole viewport. The header carries a backdrop-filter, which makes
   it the containing block for this fixed child, so top:100% / left:0 / right:0
   pin the sheet flush to the header's bottom edge across the full width. The
   inner grid and footer are then centred to the site shell so the menu lines
   up with the page content beneath it. */
.mega {
  position: fixed; top: 100%; left: 0; right: 0; z-index: 50;
  padding: 32px 0 36px;
  max-height: calc(100vh - var(--hdr-h)); overflow-y: auto;
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
  animation: megaIn .2s var(--ease) both;
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mega[hidden] { display: none; }

.mega__in {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 30px 46px;
  width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad);
}
.mega__col { break-inside: avoid; min-width: 0; }
.mega__h {
  display: block; padding: 0 10px 9px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--red-d);
}
.mega__col ul { display: grid; gap: 3px; }
.mega__link, .mega__more {
  display: block; padding: 8px 10px; border-radius: var(--r-xs);
  font-size: .8rem; font-weight: 600; color: var(--ink-2);
  /* one line per item — smaller type keeps names on a single row, and the rare
     very long name is truncated rather than wrapped */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s var(--ease), color .15s var(--ease), padding-left .15s var(--ease);
}
.mega__link:hover, .mega__more:hover { background: var(--bg-tint); color: var(--red-d); text-decoration: none; padding-left: 15px; }
.mega__more { font-weight: 700; color: var(--muted); }
.mega__foot {
  width: 100%; max-width: var(--shell); margin: 26px auto 0; padding: 18px var(--pad) 0;
  border-top: 1px solid var(--line); text-align: right;
}
.mega__foot a { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .9rem; color: var(--red-d); }
.mega__foot a:hover { color: var(--ink); }
.mega__foot .ic { width: 14px; height: 14px; }
.mega__empty { padding: 40px; text-align: center; color: var(--muted); font-size: .9rem; }

/* ---------- support tickets (support.php / ticket.php) ---------- */
.tklist { display: grid; gap: 8px; }
.tklist__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tklist__row:hover { border-color: var(--red); box-shadow: var(--sh-1); text-decoration: none; }
.tklist__sub { display: grid; gap: 2px; font-weight: 700; font-size: .9rem; min-width: 0; }
.tklist__sub small { font-weight: 600; color: var(--muted); font-size: .76rem; }

/* ---------- case studies (case-study.php / case-studies.php) ---------- */
.cshero { display: flex; gap: 22px; align-items: flex-start; }
.csavatar {
  display: grid; place-items: center; flex: none;
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--grad-btn); color: #fff; font-size: 2.2rem; font-weight: 800;
  box-shadow: var(--sh-brand);
}
.csavatar--sm { width: 48px; height: 48px; font-size: 1.2rem; box-shadow: none; }
.cshero__id h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.cshero__meta { color: var(--muted); font-weight: 600; margin: 4px 0 12px; font-size: .9rem; }

.growth { width: 100%; height: auto; display: block; margin-top: 6px; }
.growth__lbl { fill: var(--muted); font-size: 13px; font-weight: 700; }
.growth__lbl--end { fill: var(--red-d); }

.cscols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.cs__p { color: var(--ink-2); line-height: 1.65; font-size: .95rem; }

.csquote {
  display: grid; gap: 12px; margin: 34px auto 0; max-width: 760px; padding: 30px; text-align: center;
  background: var(--bg-tint); border: 1px solid rgba(245,35,61,.16); border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.csquote .ic { width: 26px; height: 26px; color: var(--amber); justify-self: center; fill: var(--amber); stroke: var(--amber); }
.csquote blockquote { font-size: 1.15rem; font-style: italic; color: var(--ink); line-height: 1.5; }
.csquote figcaption { font-weight: 800; color: var(--red-d); font-size: .9rem; }

.csgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.cscard {
  display: grid; gap: 12px; padding: 22px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.cscard:hover { border-color: var(--red); box-shadow: var(--sh-2); transform: translateY(-3px); text-decoration: none; }
.cscard__top { display: flex; align-items: center; gap: 12px; }
.cscard__top b { display: block; font-size: 1rem; }
.cscard__top span { font-size: .8rem; color: var(--muted); }
.cscard__sum { font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.cscard__stats { display: flex; gap: 18px; font-size: .82rem; color: var(--muted); }
.cscard__stats b { color: var(--red-d); font-weight: 800; }
.cscard__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .85rem; color: var(--red-d); }
.cscard__go .ic { width: 14px; height: 14px; }

@media (max-width: 700px) {
  .cscols { grid-template-columns: 1fr; }
  .cshero { flex-direction: column; align-items: center; text-align: center; }
}

.thread { display: grid; gap: 12px; }
.msg {
  padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: #fff; max-width: 88%; box-shadow: var(--sh-1);
}
.msg--you { justify-self: end; background: var(--bg-tint); border-color: rgba(245,35,61,.16); }
.msg--support { justify-self: start; }
.msg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 6px; }
.msg__who { font-weight: 800; font-size: .85rem; color: var(--ink); }
.msg__when { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.msg__body { font-size: .92rem; color: var(--ink-2); line-height: 1.55; word-wrap: break-word; }

/* On the mobile nav drawer the menu opens inline rather than as a full-width
   sheet: the fixed positioning and shell centring are unwound so it flows
   inside the drawer, which already supplies the side padding. */
@media (max-width: 820px) {
  .megawrap { display: block; width: 100%; }
  .megatrigger { display: flex; align-items: center; }
  .megatrigger .mega-caret { width: 14px; height: 14px; margin-left: auto; }
  .mega {
    position: static; width: 100%; max-height: none; margin-top: 8px; padding: 12px;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    box-shadow: none; background: var(--bg-soft); animation: none;
  }
  .mega__in { grid-template-columns: 1fr; gap: 6px; max-width: none; padding-inline: 0; }
  .mega__foot { max-width: none; margin-top: 14px; padding: 14px 0 0; text-align: left; }
}

/* ---------- free Instagram tools (tools hub + tool widgets) ---------- */
/* Tool hero: centred, and sized so a typical tool title sits on one line. */
.sechead--tool { max-width: 860px; }
.sechead--tool h1 { font-size: clamp(1.5rem, 3.3vw, 2.3rem); line-height: 1.12; }
.tool { margin-inline: auto; }
.tool--lede { max-width: 620px; margin: 0 auto 6px; text-align: center; }

/* combined reviews block (reuses .revsum/.revgrid/.rev from the page reviews) */
.rv-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-bottom: 22px; }
.rv-select { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; color: var(--ink-2); }
.rv-select select {
  font: 600 .92rem var(--font, inherit); color: var(--ink); background: #fff;
  border: 1.4px solid var(--line-2); border-radius: 10px; padding: 9px 34px 9px 14px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d40f2c' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.rv-select select:focus { outline: 0; border-color: var(--red); box-shadow: 0 0 0 3px var(--bg-tint); }
.rv-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.rv-pageno { font-weight: 700; font-size: .86rem; color: var(--muted); }
#rvGrid { transition: opacity .18s var(--ease); }
.toolgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 8px; }
.toolcard {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.toolcard:hover { border-color: var(--red); box-shadow: var(--sh-2); transform: translateY(-3px); text-decoration: none; }
.toolcard__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-tint); color: var(--red-d); }
.toolcard__ic .ic { width: 22px; height: 22px; }
.toolcard__tx { display: grid; gap: 2px; min-width: 0; }
.toolcard__tx b { font-size: .98rem; }
.toolcard__tx span { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.toolcard__go { margin-left: auto; flex: none; color: var(--muted); }
.toolcard__go .ic { width: 16px; height: 16px; }
.toolcard.is-soon { opacity: .62; pointer-events: none; }
.toolcard .soon { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* tool widget (input + result card) */
.tool { max-width: 640px; }
.tool__box {
  display: flex; gap: 8px; align-items: center; margin: 20px 0 10px; padding: 8px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-md, 16px); box-shadow: var(--sh-1);
}
.tool__box > .ic { width: 20px; height: 20px; margin-left: 8px; color: var(--red-d); flex: none; }
.tool__box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 1rem var(--font, inherit); color: var(--ink); }
.tool__box .btn { white-space: nowrap; }
.tool__trust { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--muted); }
.tool__trust .ic { width: 14px; height: 14px; color: #127a45; }

.tool__card { margin-top: 22px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); }
.tool__msg { text-align: center; color: var(--ink-2); }
.tool__load { text-align: center; }
.tool__load b { display: block; margin-bottom: 12px; }
.tool__load small { color: var(--muted); font-size: .82rem; }
.tool__bar { height: 10px; border-radius: 999px; background: var(--bg-tint); overflow: hidden; margin: 0 0 10px; }
.tool__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--red-d), var(--orange, var(--red))); transition: width .2s var(--ease); }
.tool__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.tool__head img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--bg-tint); flex: none; }
.tool__head b { font-size: 1.05rem; display: inline-flex; align-items: center; }
.tool__head small { color: var(--muted); font-size: .82rem; }
.tool__pill { display: inline-block; margin-top: 4px; font-size: .72rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.tool__pill--ok { background: rgba(18,122,69,.12); color: #127a45; }
.tool__pill--warn { background: var(--bg-tint); color: var(--red-d); }
.tool__bio { font-size: .88rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; }
.tool__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; margin: 4px 0 18px; }
.tool__stats b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.tool__stats small { color: var(--muted); font-size: .74rem; }
.tool__trustno { text-align: center; margin: 6px 0 16px; }
.tool__trustno .big { font-size: 2.2rem; font-weight: 800; color: var(--red-d); line-height: 1; }
.tool__trustno small { display: block; color: var(--muted); font-size: .78rem; margin-top: 4px; }
.tool__lbl { font-weight: 700; font-size: .86rem; margin-bottom: 6px; }
.tool__split { display: flex; height: 22px; border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.tool__split .r { background: #127a45; } .tool__split .f { background: var(--red); }
.tool__legend { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; }
.tool__legend .g { color: #127a45; } .tool__legend .b { color: var(--red-d); }
.tool__rows { margin-top: 16px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 14px; }
.tool__rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; font-size: .88rem; border-bottom: 1px solid var(--line); }
.tool__rows > div:last-child { border-bottom: 0; }
.tool__rows span { color: var(--muted); }
.tool__rows b { color: var(--ink); font-weight: 700; }
@media (max-width: 520px) { .tool__box { flex-wrap: wrap; } .tool__box input { flex: 1 1 100%; padding: 6px 10px; } }

/* Phones: the header row (logo, language, menu, cart) must fit a 360–390px
   screen, or the menu button is pushed off the edge. */
@media (max-width: 480px) {
  .hdr__in { gap: 8px; }
  .brand { gap: 8px; }
  .brand__txt { font-size: 1.02rem; }
  .langbtn .caret { display: none; }
}
/* Sign in / Sign up / Dashboard / Track order live in the header on desktop;
   on phones those buttons are hidden, so the drawer carries them instead. */
.nav__m { display: none; }
@media (max-width: 820px) {
  .nav .nav__m { display: block; }
  .nav .nav__m--first { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
}
/* Article text (policies, free-trial FAQ): the global list reset removes
   markers, which policy bullet lists need back. */
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--red); }

/* ---------------------------------------------------------------- blog */
.bl-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.bl-cat { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font-size: .85rem; font-weight: 600; }
.bl-cat:hover { border-color: var(--red); color: var(--red-d); text-decoration: none; }
.bl-cat.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 22px; }
.bl-card { display: flex; flex-direction: column; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.bl-card:hover { border-color: var(--red); box-shadow: var(--sh-2); transform: translateY(-3px); text-decoration: none; }
.bl-card__body { display: grid; gap: 8px; padding: 18px 20px 20px; }
.bl-card__body h2 { font-size: 1.08rem; line-height: 1.35; margin: 0; }
.bl-card__body p { font-size: .9rem; color: var(--ink-2); line-height: 1.55; margin: 0; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .78rem; color: var(--muted); }
.bl-meta b { color: var(--red-d); font-weight: 700; }
.bl-cover { position: relative; aspect-ratio: 16 / 9; background: var(--grad); display: grid; place-items: center; overflow: hidden; }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-cover .ic { width: 54px; height: 54px; color: #fff; opacity: .92; }
.bl-cover--lg { border-radius: var(--r-lg); margin: 22px 0 8px; }
.bl-cover--lg .ic { width: 80px; height: 80px; }
.bl-pager { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.bl-post { max-width: 760px; margin: 0 auto; }
.bl-post h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; margin: 6px 0 12px; }
.bl-post .lede { margin-bottom: 4px; }
.bl-toc { margin: 22px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft); }
.bl-toc b { display: block; margin-bottom: 6px; font-size: .9rem; }
.bl-toc ol { margin: 0; padding-left: 1.2em; font-size: .92rem; }
.bl-toc li { margin: .25em 0; }
.bl-post .prose { max-width: none; }
.bl-post .prose img { max-width: 100%; height: auto; border-radius: var(--r); }
.bl-post .prose blockquote { margin: 1.2em 0; padding: 4px 0 4px 16px; border-left: 4px solid var(--red); color: var(--ink); font-style: italic; }
.bl-post .prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .92rem; }
.bl-post .prose th, .bl-post .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.bl-post .prose th { background: var(--bg-soft); }
.bl-post .prose h2 { scroll-margin-top: 90px; }
.bl-cta { margin: 32px 0 0; padding: 22px 24px; border-radius: var(--r-lg); background: var(--ink); color: #fff; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.bl-cta p { margin: 0; color: #e5e7eb; max-width: 460px; }
.bl-cta b { color: #fff; display: block; font-size: 1.1rem; margin-bottom: 2px; }
.bl-share { display: flex; gap: 8px; align-items: center; margin-top: 26px; font-size: .85rem; color: var(--muted); }
.bl-share a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); }
.bl-share a:hover { border-color: var(--red); color: var(--red-d); }
.bl-share .ic { width: 16px; height: 16px; }
.bl-cover--icon { aspect-ratio: 4 / 1; }

/* ---------------------------------------------------------------- admin menu */
.adm-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 16px; }
.adm-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--red-d); font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.btn--line .adm-count { background: var(--red); color: #fff; }
@media (max-width: 900px) { .adm-nav { margin: 10px 0 0; width: 100%; } .hdr__in:has(.adm-nav) { flex-wrap: wrap; } }
.hint.adm-p { display: block; font-size: .85rem; color: var(--muted); line-height: 1.55; }