/* ==========================================================================
   THE ONE ACCOUNTANT — Design System
   Brand: monochrome slate (from brochure) + brass accent, modernised.
   Author note: every colour/size is a token below. Change once, applies site-wide.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand */
  --ink:        #12181F;   /* logo black / darkest */
  --slate:      #1D2731;   /* brochure dark slate */
  --slate-2:    #2B3742;   /* raised dark surface */
  --brass:      #C8A45D;   /* accent — CTAs, highlights */
  --brass-dk:   #A8873F;
  --brass-soft: #F6EEDD;
  /* Sampled from the logo mark. Red is used for the offer link in the nav;
     it is darkened just enough to clear 4.5:1 on white. */
  --brand-red:    #D81C23;
  --brand-red-dk: #A8141A;
  --brand-blue:   #0089D0;
  --brand-yellow: #FFC20E;
  --brand-green:  #39B54A;

  /* Neutrals */
  --white:      #FFFFFF;
  --paper:      #F7F8FA;   /* alt section background */
  --paper-2:    #EEF1F5;
  --line:       #E2E7EE;
  --line-dk:    rgba(255,255,255,.14);

  /* Text */
  --tx:         #1A222B;
  --tx-2:       #4B5A69;
  --muted:      #5C6B7A;
  --muted-dk:   #A9B4C0;   /* on dark bg */

  /* Utility */
  --green:      #17864B;
  --green-soft: #E6F4EC;
  --wa:         #25D366;
  --red:        #C0392B;

  /* Shape */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(18,24,31,.05), 0 1px 3px rgba(18,24,31,.06);
  --sh-2: 0 2px 4px rgba(18,24,31,.04), 0 12px 28px rgba(18,24,31,.08);
  --sh-3: 0 4px 8px rgba(18,24,31,.05), 0 24px 56px rgba(18,24,31,.12);

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --gut: 20px;           /* side gutter; 18px on phones, see the media query */
  --header-h: 76px;

  /* Type */
  --f-head: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.65;
  color:var(--tx);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
input,select,textarea{ font:inherit; color:var(--tx); background-color:#fff; }
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:1; }
h1,h2,h3,h4{ font-family:var(--f-head); font-weight:700; line-height:1.18; letter-spacing:-.02em; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.2em; }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
:focus-visible{ outline:3px solid var(--brass); outline-offset:2px; border-radius:4px; }

/* ---------- 3. TYPE SCALE ---------- */
.h-xl{ font-size:clamp(2.05rem, 1.25rem + 3.4vw, 3.65rem); }
.h-lg{ font-size:clamp(1.7rem, 1.15rem + 2.4vw, 2.75rem); }
.h-md{ font-size:clamp(1.35rem, 1.05rem + 1.3vw, 1.85rem); }
.h-sm{ font-size:clamp(1.1rem, 1rem + .5vw, 1.3rem); }
.lead{ font-size:clamp(1.03rem, .98rem + .35vw, 1.19rem); color:var(--muted); line-height:1.62; }
.eyebrow{
  font-family:var(--f-head); font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass-dk);
  margin:0 0 .75rem;
}
.eyebrow.on-dark{ color:var(--brass); }
.small{ font-size:.875rem; }
.tiny{ font-size:.78rem; }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:var(--wrap-narrow); }
/* Respect the notch and the curved edge on a phone held in landscape, where
   the safe area is wider than the gutter. */
@supports (padding: max(0px)) {
  .wrap{
    padding-inline:
      max(var(--gut), env(safe-area-inset-left))
      max(var(--gut), env(safe-area-inset-right));
  }
}
.section{ padding:clamp(48px, 4vw + 32px, 92px) 0; }
.section-sm{ padding:clamp(36px, 3vw + 22px, 64px) 0; }
.bg-paper{ background:var(--paper); }
.bg-dark{ background:var(--slate); color:#E9EDF2; }
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4{ color:#fff; }
.bg-dark .lead{ color:var(--muted-dk); }
.bg-ink{ background:var(--ink); color:#E9EDF2; }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:#fff; }

.grid{ display:grid; gap:22px; }
.g-2{ grid-template-columns:1fr; }
.g-3{ grid-template-columns:1fr; }
.g-4{ grid-template-columns:1fr 1fr; }
@media(min-width:700px){
  .g-2{ grid-template-columns:repeat(2,1fr); }
  .g-3{ grid-template-columns:repeat(2,1fr); }
  .g-4{ grid-template-columns:repeat(2,1fr); }
}
@media(min-width:1000px){
  .g-3{ grid-template-columns:repeat(3,1fr); }
  .g-4{ grid-template-columns:repeat(4,1fr); }
}
.center{ text-align:center; }
.sec-head{ max-width:680px; margin:0 auto clamp(28px,3vw,48px); }
.sec-head.left{ margin-inline:0; }

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-head); font-weight:600; font-size:.97rem;
  padding:.86em 1.5em; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-align:center; line-height:1.2; min-height:48px;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--brass); color:#1A1206; box-shadow:0 6px 18px rgba(200,164,93,.34); }
.btn-primary:hover{ background:#D6B571; }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--slate-2); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--tx); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--paper); }
.btn-ghost-light{ background:transparent; border-color:rgba(255,255,255,.3); color:#fff; }
.btn-ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn-wa{ background:var(--wa); color:#04331a; }
.btn-wa:hover{ background:#31E27A; }
.btn-lg{ font-size:1.03rem; padding:1em 1.9em; min-height:54px; }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }
.btn-row.center{ justify-content:center; }

/* ---------- 6. HEADER ---------- */
.announce{
  background:var(--ink); color:#EAD9B4; font-size:.82rem; text-align:center;
  padding:9px 44px 9px 16px; position:relative; line-height:1.45;
}
.announce a{ color:var(--brass); text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.announce-x{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:#8C97A3; font-size:1.3rem; line-height:1;
  cursor:pointer; padding:4px 9px; border-radius:6px;
}
.announce-x:hover{ color:#fff; background:rgba(255,255,255,.1); }

.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line);
}
.hdr{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--header-h); }
.nav{ display:none; }
.nav a{
  font-family:var(--f-head); font-size:.92rem; font-weight:500; color:var(--tx-2);
  padding:.5em .1em; position:relative;
}
.nav a:hover,.nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brass); border-radius:2px;
}
.hdr-cta{ display:none; }
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px; background:none; border:1px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer;
}
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }
.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); }

.mobile-nav{
  display:none; border-top:1px solid var(--line); background:#fff;
  max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
}
.mobile-nav.open{ display:block; }
.mobile-nav a{
  display:block; padding:15px 0; border-bottom:1px solid var(--line);
  font-family:var(--f-head); font-weight:500;
}
.mobile-nav .btn{ margin:16px 0 8px; }
.mnav-group{ padding:14px 0 4px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.mnav-sub a{ padding-left:14px; font-size:.93rem; color:var(--muted); font-weight:400; }

@media(min-width:1120px){
  .nav{ display:flex; align-items:center; gap:17px; }
  .hdr-cta{ display:flex; align-items:center; gap:9px; }
  .burger{ display:none; }
  .mobile-nav{ display:none !important; }
  .hdr-cta .btn{ font-size:.87rem; padding:.7em 1.1em; min-height:42px; }
  .hdr-phone .num{ display:none; }
  .hdr-portal{ display:none; }
}
@media(min-width:1200px){ .hdr-portal{ display:inline-flex; } }
@media(min-width:1360px){ .hdr-phone .num{ display:inline; margin-left:6px; } }

/* Logo — supplied brand artwork, used as-is */
.logo{ display:inline-flex; align-items:center; flex-shrink:0; }
.logo img{ height:58px; width:auto; display:block; }
/* Horizontal lockup — headers and the service bar, where the bar is short and wide. */
.logo-wide img{ height:46px; }
/* Dark grounds use the supplied white-wordmark colourway — no chip, no
   recolouring, same artwork. */
.logo-dark img{ height:58px; }
@media(max-width:520px){
  .logo img{ height:46px; }
  .logo-wide img{ height:36px; }
}

/* ---------- 7. HERO ---------- */
.hero{ position:relative; background:var(--slate); color:#fff; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 78% 10%, rgba(200,164,93,.16), transparent 60%),
    radial-gradient(700px 500px at 8% 92%, rgba(255,255,255,.06), transparent 62%);
  pointer-events:none;
}
.hero-mesh{ position:absolute; inset:0; opacity:.22; pointer-events:none; }
.hero-inner{ position:relative; z-index:2;
  padding-block:clamp(44px, 6vw, 84px) clamp(48px, 6vw, 88px); }
.hero-grid{ display:grid; gap:36px; align-items:center; }
@media(min-width:1000px){ .hero-grid{ grid-template-columns:1.08fr .92fr; gap:52px; } }
.hero h1{ color:#fff; margin-bottom:.45em; }
.hero h1 em{ font-style:normal; color:var(--brass); }
.hero .lead{ color:#C3CCD6; max-width:56ch; }

.trust-row{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; }
.trust-item{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:#BFC9D4; }
.trust-item svg{ flex-shrink:0; color:var(--brass); }

/* Stats strip */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-radius:var(--r); overflow:hidden; }
@media(min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:#fff; padding:24px 18px; text-align:center; }
.stat b{ display:block; font-family:var(--f-head); font-size:clamp(1.6rem,1.2rem + 1.6vw,2.3rem); font-weight:700; color:var(--ink); letter-spacing:-.03em; }
.stat span{ display:block; font-size:.82rem; color:var(--muted); margin-top:3px; }
.bg-dark .stats{ background:var(--line-dk); }
.bg-dark .stat{ background:var(--slate-2); }
.bg-dark .stat b{ color:#fff; }
.bg-dark .stat span{ color:var(--muted-dk); }

/* ---------- 8. CARDS ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; transition:.22s ease; height:100%;
  display:flex; flex-direction:column;
}
a.card:hover{ border-color:#CDD6E0; box-shadow:var(--sh-2); transform:translateY(-3px); }
.card h3{ font-size:1.09rem; margin-bottom:.4em; }
.card p{ color:var(--muted); font-size:.93rem; margin-bottom:1em; }
.card .card-link{ margin-top:auto; font-family:var(--f-head); font-weight:600; font-size:.89rem; color:var(--brass-dk); display:inline-flex; align-items:center; gap:6px; }
a.card:hover .card-link{ gap:10px; }
.card-ico{
  width:44px; height:44px; border-radius:11px; background:var(--brass-soft);
  display:grid; place-items:center; margin-bottom:16px; color:var(--brass-dk); flex-shrink:0;
}
.bg-dark .card{ background:var(--slate-2); border-color:var(--line-dk); }
.bg-dark .card p{ color:var(--muted-dk); }
.bg-dark .card-ico{ background:rgba(200,164,93,.16); color:var(--brass); }

/* ---------- 9. PRICING ---------- */
.price-toggle{
  display:inline-flex; background:var(--paper-2); border-radius:var(--r-pill); padding:5px; gap:4px; margin:0 auto 34px; border:1px solid var(--line);
}
.price-toggle button{
  border:0; background:transparent; padding:.6em 1.25em; border-radius:var(--r-pill);
  font-family:var(--f-head); font-weight:600; font-size:.88rem; cursor:pointer; color:var(--muted); white-space:nowrap;
}
.price-toggle button.on{ background:#fff; color:var(--ink); box-shadow:var(--sh-1); }
.save-chip{ background:var(--green-soft); color:var(--green); font-size:.7rem; padding:.15em .5em; border-radius:var(--r-pill); margin-left:6px; font-weight:700; }

.plans{ display:grid; gap:22px; align-items:stretch; }
@media(min-width:820px){ .plans{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Four monthly tiers: two-up on tablets, four-up only when there is room for
   them to stay readable. The featured scale-up is dropped at 4-up because the
   columns are already narrow. */
@media(min-width:760px) and (max-width:1139px){
  .plans-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1140px){
  .plans-4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
  .plans-4 .plan{ padding:28px 20px; }
  .plans-4 .plan.featured{ transform:none; }
  .plans-4 .plan-price .amt{ font-size:2.3rem; }
  /* Reserve two lines for the billing note so all four buttons sit on one
     baseline — Enterprise's note is longer than the rest. */
  .plans-4 .plan-note{ min-height:2.6em; }
  .plans-4 .amt-quote{ font-size:2.3rem; }
}
@media(min-width:760px){ .plans-2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(min-width:1140px){ .plans-2{ max-width:840px; margin-inline:auto; } }
/* Enterprise — a word where the others have a number */
.plan-price-quote .per::before{ content:'\200B'; }
.amt-quote{
  font-family:var(--f-head); font-size:2rem; font-weight:700;
  letter-spacing:-.03em; color:var(--ink); line-height:1;
}

/* ---------- Software partner pages ---------- */
/* Vendor logo on a dark hero. Supplied artwork sits in a white plate because
   most vendor marks are drawn for light backgrounds and recolouring someone
   else's logo is not ours to do. */
.sp-logo{ margin-bottom:18px; }
.sp-logo img{
  height:46px; width:auto; display:block; background:#fff;
  border-radius:10px; padding:10px 14px;
}
.sp-logo-text span{
  display:inline-block; font-family:var(--f-head); font-weight:700;
  font-size:1.18rem; letter-spacing:-.02em; color:var(--ink);
  background:#fff; border-radius:10px; padding:10px 16px;
}
.sp-badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head);
  font-weight:600; font-size:.82rem; letter-spacing:.02em;
  color:var(--brass); background:rgba(200,164,93,.12);
  border:1px solid rgba(200,164,93,.4); border-radius:var(--r-pill);
  padding:.42em .95em; margin-bottom:16px;
}
.sp-badge svg{ flex-shrink:0; }
.sp-strs{ display:grid; gap:22px; }
@media(min-width:820px){ .sp-strs{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sp-str{ border-top:2px solid var(--brass); padding-top:16px; }
.sp-str h3{ font-size:1.02rem; margin:0 0 .45em; }
.sp-str p{ font-size:.92rem; color:var(--tx-2); line-height:1.6; margin:0; }
.sp-steps{ display:grid; gap:20px; counter-reset:sp; }
@media(min-width:760px){ .sp-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.sp-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:24px 24px 22px; position:relative; counter-increment:sp;
}
.sp-step::before{
  content:counter(sp); position:absolute; top:22px; right:24px;
  font-family:var(--f-head); font-weight:700; font-size:1.5rem; color:var(--paper-2);
  line-height:1;
}
.sp-step h3{ font-size:1.02rem; margin:0 0 .45em; padding-right:2em; }
.sp-step p{ font-size:.92rem; color:var(--tx-2); line-height:1.6; margin:0; }

/* Switching offer — headline on the left, the terms beside it rather than in
   small print underneath, because the 4th/8th/12th detail is the whole offer. */
.switch-band{
  display:grid; gap:26px; background:var(--ink); color:#fff;
  border-radius:var(--r-lg); padding:clamp(26px, 3.4vw, 44px);
}
@media(min-width:900px){ .switch-band{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:44px; } }
.switch-main .eyebrow{ color:var(--brass); }
.switch-main h2{ color:#fff; margin-bottom:.45em; }
.switch-main p{ color:#C3CCD6; font-size:.96rem; line-height:1.65; margin:0; }
.switch-terms{
  background:rgba(255,255,255,.06); border:1px solid rgba(200,164,93,.34);
  border-radius:var(--r); padding:22px 24px;
}
.switch-terms h3{ color:#fff; font-size:1rem; margin:0 0 14px; }
.switch-terms ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.switch-terms li{ display:flex; gap:10px; font-size:.89rem; line-height:1.55; color:#C8D1DA; }
.switch-terms li svg{ flex-shrink:0; margin-top:3px; color:var(--brass); }
.switch-terms strong{ color:#fff; }
.switch-note{ margin:16px 0 0; font-size:.82rem; color:#93A0AD; line-height:1.55; }

.note-box{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--brass);
  border-radius:var(--r); padding:20px 22px; font-size:.9rem; color:var(--tx-2);
  max-width:840px; margin-inline:auto;
}
.note-box strong{ color:var(--tx); }
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 26px; display:flex; flex-direction:column; position:relative;
}
.plan.featured{ border:2px solid var(--brass); box-shadow:var(--sh-3); }
@media(min-width:820px){ .plan.featured{ transform:scale(1.035); z-index:2; } }
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--brass); color:#1A1206; font-family:var(--f-head); font-weight:700;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.42em 1em; border-radius:var(--r-pill); white-space:nowrap;
}
.plan h3{ font-size:1.22rem; margin-bottom:.25em; }
.plan .plan-for{ font-size:.87rem; color:var(--muted); margin-bottom:20px; min-height:2.6em; }
.plan-price{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.plan-price .cur{ font-family:var(--f-head); font-size:1rem; font-weight:600; color:var(--muted); }
.plan-price .amt{ font-family:var(--f-head); font-size:2.7rem; font-weight:700; letter-spacing:-.035em; color:var(--ink); line-height:1; }
.plan-price .per{ font-size:.88rem; color:var(--muted); }
.plan-note{ font-size:.8rem; color:var(--muted); margin-bottom:14px; }
/* Allowance chip — the one number people actually compare tiers on, and the
   only place the monthly/annual distinction is stated at a glance. */
.plan-cap{
  display:inline-block; font-family:var(--f-head); font-weight:600;
  /* #7A6128 rather than --brass-dk: 5.1:1 on the soft brass ground, where
     --brass-dk only reaches 2.93:1 */
  font-size:.79rem; line-height:1.3; color:#7A6128;
  background:var(--brass-soft); border-radius:var(--r-pill);
  padding:.42em .85em; margin:0 0 18px;
}
.plan .btn{ margin-bottom:22px; }
.feat{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.feat li{ display:flex; gap:10px; font-size:.9rem; line-height:1.5; align-items:flex-start; }
.feat li svg{ flex-shrink:0; margin-top:3px; color:var(--green); }
/* "Not included" rows still carry information — what the tier does NOT cover —
   so they stay de-emphasised but readable: 4.56:1 on white, above the AA floor.
   The cross stays lighter; it is decorative, not text. */
.feat li.off{ color:#6B7785; }
.feat li.off svg{ color:#AEB8C2; }
.feat-head{ font-family:var(--f-head); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:6px 0 -2px; }

/* Add-on price table */
.ptable{ width:100%; border-collapse:collapse; font-size:.93rem; }
.ptable th,.ptable td{ text-align:left; padding:14px 12px; border-bottom:1px solid var(--line); }
.ptable th{ font-family:var(--f-head); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.ptable td:last-child,.ptable th:last-child{ text-align:right; white-space:nowrap; font-weight:600; font-family:var(--f-head); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); }
.table-scroll .ptable{ min-width:520px; }
.table-scroll .ptable th:first-child,.table-scroll .ptable td:first-child{ padding-left:20px; }
.table-scroll .ptable th:last-child,.table-scroll .ptable td:last-child{ padding-right:20px; }
.table-scroll .ptable tr:last-child td{ border-bottom:0; }
/* Three-column tables: the last column is a sentence, not an amount, so undo
   the right-align and the nowrap that the two-column price tables want. Left
   as nowrap it produced a table several screens wide on a phone. */
.ptable-prose td:last-child,.ptable-prose th:last-child{
  text-align:left; white-space:normal; font-weight:400; font-family:inherit; }
.ptable-prose th:last-child{ font-family:var(--f-head); font-weight:600; }
.table-scroll .ptable-prose{ min-width:620px; }
/* A scrollable table with no edge cue reads as a truncated one, so people do
   not swipe and never see the last column. This is the shadow-scroll pattern:
   two white covers pinned to the content (background-attachment:local) sit on
   top of two shadows pinned to the box (scroll). When the content is scrolled
   to an edge its cover slides over that shadow and hides it, so a shadow shows
   only where there is genuinely more table in that direction — and neither
   shows at all when the table fits. No JavaScript. */
.table-scroll{
  background-image:
    linear-gradient(to right,  #fff, rgba(255,255,255,0)),
    linear-gradient(to left,   #fff, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0   50%, rgba(18,24,31,.16), rgba(18,24,31,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(18,24,31,.16), rgba(18,24,31,0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* ---------- 10. FORMS ---------- */
.form-card{
  background:#fff; color:var(--tx); border-radius:var(--r-lg); padding:clamp(22px,3vw,32px);
  box-shadow:var(--sh-3); border:1px solid var(--line);
}
.form-card h3{ font-size:1.25rem; margin-bottom:.3em; }
.form-card .form-sub{ font-size:.9rem; color:var(--muted); margin-bottom:20px; }
.fields{ display:grid; gap:14px; }
@media(min-width:560px){ .fields.two{ grid-template-columns:1fr 1fr; } .fields .full{ grid-column:1/-1; } }
.field label{ display:block; font-size:.82rem; font-weight:600; font-family:var(--f-head); margin-bottom:6px; color:var(--tx); }
.field label .req{ color:var(--red); }
.field input,.field select,.field textarea{
  width:100%; padding:.82em .9em; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:#fff; color:var(--tx); font-size:.97rem;
  transition:border-color .15s, box-shadow .15s; min-height:48px;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); opacity:1; }
.field textarea{ min-height:100px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--brass); box-shadow:0 0 0 3px rgba(200,164,93,.18);
}
.field input:user-invalid,.field select:user-invalid{ border-color:var(--red); }
.field .hint{ font-size:.76rem; color:var(--muted); margin-top:5px; }
.phone-wrap{ display:flex; min-width:0; }
.phone-wrap .cc{
  display:flex; align-items:center; padding:0 .8em; border:1.5px solid var(--line); border-right:0;
  border-radius:var(--r-sm) 0 0 var(--r-sm); background:var(--paper); font-size:.94rem; color:var(--muted); white-space:nowrap;
}
/* Country select is capped so a long country name cannot squeeze the number
   field; the full name is still readable in the open dropdown. */
/* The closed select must show the dial code in full — that is the only part a
   visitor needs to read back. Options lead with "+971 …" and the box is sized
   so the code clears the native arrow; the country name is read in the open
   list, where there is all the room in the world. */
.phone-wrap .cc-select{
  flex:0 0 7em; width:7em; min-width:0; max-width:7em;
  border-radius:var(--r-sm) 0 0 var(--r-sm); border-right-width:0;
  background-color:var(--paper); padding-left:.7em; padding-right:.3em;
}
.phone-wrap input{ border-radius:0 var(--r-sm) var(--r-sm) 0; flex:1 1 auto; min-width:0; }
.phone-wrap input[aria-invalid="true"]{ border-color:var(--red); }
.field-err{ font-size:.78rem; color:var(--red); margin:6px 0 0; line-height:1.45; }
.field-err[hidden]{ display:none; }
.opt-tag{
  font-family:var(--f-body); font-weight:500; font-size:.72rem; color:var(--muted);
  background:var(--paper-2); border-radius:var(--r-pill); padding:.18em .6em; margin-left:6px;
  text-transform:none; letter-spacing:0;
}
/* Both actions stay locked until the form validates, so a half-filled
   WhatsApp click can no longer produce a lead with no number in it. */
.btn[data-gate][disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.form-gate-hint{ font-size:.78rem; color:var(--muted); margin:10px 0 0; text-align:center; }
.form-gate-hint[hidden]{ display:none; }
/* Honeypot: invisible to people, irresistible to bots. Anything that fills it
   is discarded by Netlify before it reaches the inbox. Hidden with position
   rather than display:none, because some bots skip display:none fields. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:.8rem; color:var(--muted); line-height:1.5; }
.consent input{ width:18px; height:18px; min-height:0; margin-top:2px; flex-shrink:0; accent-color:var(--brass-dk); }
.form-actions{ display:grid; gap:10px; margin-top:20px; }
@media(min-width:560px){ .form-actions{ grid-template-columns:1fr auto; } }
.form-trust{ display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted); margin-top:14px; justify-content:center; }
.form-msg{ padding:13px 15px; border-radius:var(--r-sm); font-size:.9rem; margin-top:14px; display:none; }
.form-msg.ok{ display:block; background:var(--green-soft); color:var(--green); }
.form-msg.err{ display:block; background:#FDEDEC; color:var(--red); }

/* ---------- 11. ACCORDION / FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative;
  font-family:var(--f-head); font-weight:600; font-size:1.01rem; line-height:1.45;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--brass-dk); border-bottom:2px solid var(--brass-dk);
  transform:translateY(-70%) rotate(45deg); transition:transform .22s;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq .faq-body{ padding:0 8px 22px 0; color:var(--muted); font-size:.95rem; }
.faq .faq-body p:last-child{ margin-bottom:0; }

/* ---------- 12. STEPS / PROCESS ---------- */
.steps{ display:grid; gap:24px; counter-reset:s; }
@media(min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ position:relative; padding-top:52px; }
.step::before{
  counter-increment:s; content:counter(s);
  position:absolute; top:0; left:0; width:40px; height:40px; border-radius:50%;
  background:var(--ink); color:var(--brass); display:grid; place-items:center;
  font-family:var(--f-head); font-weight:700; font-size:1rem;
}
.step h3{ font-size:1.03rem; margin-bottom:.35em; }
.step p{ font-size:.9rem; color:var(--muted); margin:0; }
.bg-dark .step::before{ background:var(--brass); color:var(--ink); }
.bg-dark .step p{ color:var(--muted-dk); }

/* ---------- 13. LOGOS / SOFTWARE ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1px solid var(--line); border-radius:var(--r-pill); padding:.5em 1em;
  font-size:.86rem; font-family:var(--f-head); font-weight:500; color:var(--tx-2); background:#fff;
}
.bg-dark .chip{ border-color:var(--line-dk); background:rgba(255,255,255,.05); color:#D6DDE5; }
.chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- 14. TESTIMONIALS ---------- */
.quote{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; height:100%; display:flex; flex-direction:column; }
.quote .stars{ color:var(--brass); font-size:.95rem; letter-spacing:2px; margin-bottom:12px; }
.quote blockquote{ margin:0 0 18px; font-size:.97rem; line-height:1.6; color:var(--tx); }
.quote .who{ margin-top:auto; display:flex; align-items:center; gap:11px; }
.quote .av{ width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--brass); display:grid; place-items:center; font-family:var(--f-head); font-weight:700; font-size:.9rem; flex-shrink:0; }
.quote .who b{ display:block; font-size:.88rem; font-family:var(--f-head); }
.quote .who span{ display:block; font-size:.78rem; color:var(--muted); }

/* ---------- 15. DEADLINE / ALERT BOXES ---------- */
.callout{
  border-left:4px solid var(--brass); background:var(--brass-soft);
  padding:18px 20px; border-radius:0 var(--r) var(--r) 0; font-size:.93rem;
}
.callout strong{ color:var(--ink); }
.callout p:last-child{ margin-bottom:0; }
.callout.warn{ border-left-color:var(--red); background:#FDEDEC; }
.callout.info{ border-left-color:var(--slate); background:var(--paper); }

.deadline-grid{ display:grid; gap:14px; }
@media(min-width:700px){ .deadline-grid{ grid-template-columns:repeat(2,1fr); } }
.deadline{ display:flex; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.deadline .d-date{ font-family:var(--f-head); font-weight:700; color:var(--brass-dk); font-size:.82rem; letter-spacing:.04em; white-space:nowrap; text-align:center; line-height:1.3; flex-shrink:0; border-right:1px solid var(--line); padding-right:14px; min-width:78px; }
.deadline .d-date b{ display:block; font-size:1.35rem; color:var(--ink); }
.deadline p{ margin:0; font-size:.9rem; }
.deadline p b{ display:block; font-family:var(--f-head); font-size:.95rem; margin-bottom:2px; }
.deadline p span{ color:var(--muted); }
.bg-dark .deadline{ background:var(--slate-2); border-color:var(--line-dk); }
.bg-dark .deadline .d-date{ border-color:var(--line-dk); }
.bg-dark .deadline p b{ color:#fff; }
.bg-dark .deadline p span{ color:var(--muted-dk); }

/* ---------- 16. CTA BAND ---------- */
.cta-band{ background:var(--ink); color:#fff; border-radius:var(--r-lg); padding:clamp(30px,4vw,54px); text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band .lead{ color:#B8C2CD; max-width:52ch; margin-inline:auto; }

/* ---------- 17. FOOTER ---------- */
.site-footer{ background:var(--ink); color:#9AA6B2; padding:clamp(44px,5vw,68px) 0 0; font-size:.9rem; }
.foot-grid{ display:grid; gap:32px; padding-bottom:40px; }
@media(min-width:760px){ .foot-grid{ grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:30px; } }
.site-footer h4{ color:#fff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.site-footer a:hover{ color:var(--brass); }
.site-footer .foot-about{ max-width:34ch; line-height:1.65; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0 92px; display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; font-size:.8rem; }
@media(min-width:760px){ .foot-bottom{ padding-bottom:24px; } }
.foot-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-contact li{ display:flex; gap:9px; align-items:flex-start; }
.foot-contact svg{ flex-shrink:0; margin-top:3px; color:var(--brass); }
/* The street address on the contact page: set apart from the prose around it
   so a visitor scanning for "where are they" finds it without reading. */
.addr-block{ font-weight:600; color:var(--ink); line-height:1.6; margin-bottom:14px;
  border-left:3px solid var(--brass); padding-left:14px; }
.social{ display:flex; gap:10px; margin-top:18px; }
.social a{ width:36px; height:36px; border-radius:9px; border:1px solid rgba(255,255,255,.16); display:grid; place-items:center; }
.social a:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink); }

/* ---------- 18. STICKY MOBILE CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 8px; background:#fff; font-family:var(--f-head); font-weight:600; font-size:.92rem; min-height:54px;
}
.sticky-cta a.wa{ background:var(--wa); color:#04331a; }
.sticky-cta a.call{ background:var(--ink); color:#fff; }
@media(min-width:1120px){ .sticky-cta{ display:none; } }

/* Desktop floating WhatsApp */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:90; width:56px; height:56px; border-radius:50%;
  background:var(--wa); color:#04331a; display:none; place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4); transition:transform .2s;
}
.wa-float:hover{ transform:scale(1.08); }
@media(min-width:1120px){ .wa-float{ display:grid; } }

/* ---------- 19. LANDING PAGE (ads) ---------- */
.lp-header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:100; }
.lp-hdr{ display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:74px; }
.lp-phone{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:600; font-size:.93rem; }
.lp-phone .lbl{ display:none; }
@media(min-width:600px){ .lp-phone .lbl{ display:inline; } }

.lp-hero{ background:var(--slate); color:#fff; position:relative; overflow:hidden; }
.lp-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(800px 480px at 82% 4%, rgba(200,164,93,.2), transparent 62%);
}
.lp-hero-grid{ position:relative; z-index:2; display:grid; gap:32px;
  padding-block:clamp(34px, 4.5vw, 64px); align-items:start; }
@media(min-width:980px){ .lp-hero-grid{ grid-template-columns:1.05fr .95fr; gap:48px; } }
.lp-hero h1{ color:#fff; font-size:clamp(1.85rem,1.2rem + 2.9vw,3.05rem); }
.lp-hero .lead{ color:#C3CCD6; }
.lp-bullets{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px; }
.lp-bullets li{ display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color:#DCE3EA; }
.lp-bullets svg{ flex-shrink:0; margin-top:4px; color:var(--brass); }

.lp-strip{ background:var(--paper); border-bottom:1px solid var(--line); }
.lp-strip-in{ display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:center;
  padding-block:16px; font-size:.85rem; color:var(--muted); }
.lp-strip-in span{ display:flex; align-items:center; gap:7px; }
.lp-strip-in svg{ color:var(--green); flex-shrink:0; }

/* ---------- 20. BLOG ---------- */
.post-grid{ display:grid; gap:24px; }
@media(min-width:720px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .post-grid{ grid-template-columns:repeat(3,1fr); } }
.post-card{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; display:flex; flex-direction:column; transition:.22s; height:100%; }
.post-card:hover{ box-shadow:var(--sh-2); transform:translateY(-3px); border-color:#CDD6E0; }
.post-thumb{ aspect-ratio:16/9; background:var(--slate); position:relative; display:grid; place-items:center; padding:20px; }
.post-thumb .pt-tag{ font-family:var(--f-head); font-weight:700; color:var(--brass); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; text-align:center; }
.post-body{ padding:22px 20px; display:flex; flex-direction:column; flex:1; }
.post-body h3{ font-size:1.06rem; margin-bottom:.45em; }
.post-body p{ font-size:.9rem; color:var(--muted); }
.post-meta{ margin-top:auto; padding-top:14px; font-size:.78rem; color:var(--muted); display:flex; gap:12px; }

.article{ max-width:720px; margin-inline:auto; }
.article h2{ font-size:clamp(1.35rem,1.1rem + 1.1vw,1.75rem); margin-top:2em; }
.article h3{ font-size:1.15rem; margin-top:1.6em; }
.article p,.article li{ font-size:1.03rem; line-height:1.75; }
.article ul,.article ol{ margin-bottom:1.4em; }
.article li{ margin-bottom:.5em; }
.article .table-scroll{ margin:1.6em 0; }
.article .callout{ margin:1.6em 0; }
.crumbs{ font-size:.82rem; color:var(--muted); margin-bottom:18px; display:block; }
.crumbs a{ color:inherit; }
.crumbs a:hover{ color:var(--brass-dk); text-decoration:underline; }
.crumbs [aria-current="page"]{ color:var(--tx); font-weight:500; }
.crumbs .crumb-sep{ opacity:.55; padding:0 .15em; }
/* on the dark hero the trail inherits the muted-on-dark colour, and the
   current page needs to be white rather than near-black to stay readable */
.bg-dark .crumbs a:hover{ color:var(--brass); }
.bg-dark .crumbs [aria-current="page"]{ color:#fff; }
.byline{ display:flex; align-items:center; gap:12px; padding:16px 0; border-block:1px solid var(--line); margin:22px 0 30px; font-size:.86rem; }
.byline .av{ width:42px; height:42px; border-radius:50%; background:var(--ink); color:var(--brass); display:grid; place-items:center; font-family:var(--f-head); font-weight:700; flex-shrink:0; }
.byline b{ font-family:var(--f-head); display:block; }
.byline span{ color:var(--muted); }

/* ---------- 21. UTILITIES ---------- */
.mt-0{ margin-top:0; } .mt-1{ margin-top:8px; } .mt-2{ margin-top:16px; } .mt-3{ margin-top:24px; } .mt-4{ margin-top:34px; } .mt-5{ margin-top:48px; }
.mb-0{ margin-bottom:0; } .mb-2{ margin-bottom:16px; } .mb-3{ margin-bottom:24px; } .mb-4{ margin-bottom:34px; }
.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; }
.hide-sm{ display:none; }
@media(min-width:700px){ .hide-sm{ display:block; } }
.body-lock{ overflow:hidden; }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* Print */
@media print{
  .site-header,.sticky-cta,.wa-float,.announce,.site-footer,.form-card{ display:none !important; }
  body{ color:#000; }
}

/* ---------- 22. NAV OFFER + FLOATING OFFER ---------- */
/* Offer link in the nav — no outline, brand red, heavier weight, and a slow
   double-beat so the eye catches it without the header feeling busy. The pulse
   pauses on hover and for anyone who has asked for reduced motion. */
.nav a.nav-offer,.nav-offer{
  font-family:var(--f-head); font-size:.94rem; font-weight:700; color:var(--brand-red);
  letter-spacing:-.005em; white-space:nowrap; line-height:1.2;
  padding:.3em .2em; border:0; background:none;
  transform-origin:center; animation:toa-beat 3.2s ease-in-out infinite;
  transition:color .18s;
}
.nav a.nav-offer:hover,.nav a.nav-offer:focus-visible,.nav-offer:hover,.nav-offer:focus-visible{ color:var(--brand-red-dk); animation-play-state:paused; }
@keyframes toa-beat{
  0%,12%,100%{ transform:scale(1); }
  4%  { transform:scale(1.16); }
  8%  { transform:scale(1); }
  10% { transform:scale(1.16); }
}
/* Same treatment inside the mobile drawer, where the row is full-width. */
.mobile-nav .mnav-offer{
  color:var(--brand-red); font-weight:700;
  animation:toa-beat 3.2s ease-in-out infinite; transform-origin:left center;
}
@media(prefers-reduced-motion:reduce){
  .nav a.nav-offer,.nav-offer,.mobile-nav .mnav-offer,.mnav-offer{
    animation:none; transform:none;
  }
}

.offer{
  position:fixed; z-index:95; opacity:0; transform:translateY(12px);
  transition:opacity .26s ease, transform .26s ease;
  display:flex; flex-direction:column; gap:10px;
}
.offer.in{ opacity:1; transform:translateY(0); }
/* Each offer is its own box so it can be dismissed and animated alone. The
   transform origin sits at the bottom-left because that is where the stack is
   anchored — ringing from the centre makes the card look unmoored. */
.offer-item{
  position:relative; transform-origin:12% 100%;
  transition:opacity .24s ease, transform .24s ease;
}
.offer-item.out{ opacity:0; transform:translateY(8px) scale(.96); }
/* Bell ring: a quick tilt-and-settle, roughly 0.9s, then still until its turn
   comes round again. Deliberately short — a long shake reads as an error. */
@keyframes toa-ring{
  0%   { transform:rotate(0deg)    scale(1);    }
  8%   { transform:rotate(-7deg)   scale(1.035);}
  20%  { transform:rotate(6deg)    scale(1.035);}
  32%  { transform:rotate(-4.5deg) scale(1.025);}
  44%  { transform:rotate(3.5deg)  scale(1.02); }
  56%  { transform:rotate(-2deg)   scale(1.01); }
  68%  { transform:rotate(1deg)    scale(1.005);}
  100% { transform:rotate(0deg)    scale(1);    }
}
.offer-item.ring{ animation:toa-ring .9s cubic-bezier(.36,.07,.19,.97) both; }
.offer-item.ring .offer-ico{ animation:toa-ring-ico .9s ease both; }
@keyframes toa-ring-ico{
  0%,100%{ background:rgba(200,164,93,.18); color:var(--brass); }
  30%    { background:var(--brass);         color:var(--ink);   }
}
.offer-in{
  display:flex; align-items:center; gap:13px;
  background:var(--ink); color:#fff; border-radius:var(--r);
  padding:13px 16px; box-shadow:0 10px 34px rgba(18,24,31,.34);
  border:1px solid rgba(200,164,93,.4);
}
.offer-in:hover{ border-color:var(--brass); }
.offer-ico{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:rgba(200,164,93,.18); color:var(--brass);
  display:grid; place-items:center;
}
.offer-txt{ min-width:0; flex:1; }
.offer-txt b{
  display:block; font-family:var(--f-head); font-weight:600; font-size:.93rem;
  line-height:1.25; color:#fff;
}
.offer-txt span{ display:block; font-size:.76rem; color:#A9B4C0; margin-top:2px; }
.offer-go{ color:var(--brass); flex-shrink:0; }
.offer-in:hover .offer-go{ transform:translateX(3px); }
.offer-x{
  position:absolute; top:-9px; right:-9px; width:26px; height:26px; border-radius:50%;
  background:var(--slate-2); color:#C3CCD6; border:1px solid rgba(255,255,255,.22);
  font-size:1.05rem; line-height:1; cursor:pointer; display:grid; place-items:center; padding:0;
}
.offer-x:hover{ background:var(--brass); color:var(--ink); border-color:var(--brass); }

/* mobile: sit above the sticky call bar, never on top of it */
@media(max-width:1119px){
  .offer{ left:12px; right:12px; bottom:calc(54px + 12px + env(safe-area-inset-bottom)); }
  .offer-txt span{ font-size:.73rem; }
  /* two stacked cards plus the call bar is too much of a small screen, so the
     cards tighten rather than the stack being cut to one */
  .offer{ gap:8px; }
  .offer-in{ padding:11px 13px; }
  .offer-ico{ width:32px; height:32px; }
  .offer-txt b{ font-size:.87rem; }
}
/* desktop: bottom-left, clear of the WhatsApp bubble on the right */
@media(min-width:1120px){
  .offer{ left:22px; bottom:22px; max-width:340px; }
}
@media(prefers-reduced-motion:reduce){
  .offer{ transition:none; }
  .offer-in:hover .offer-go{ transform:none; }
  .offer-item, .offer-item.ring, .offer-item.ring .offer-ico{ animation:none; transition:none; }
}