/* ============================================================================
   Public marketing site.

   Kept OUT of app.css deliberately: the fleet rule is that app.css stays
   byte-identical across every app, with the palette living in config +
   head_theme.php. This file adds only the public-site surfaces (mega menu,
   service page, footer) and uses the SAME --sky/--blue/--sky-soft tokens, so it
   re-skins with the palette exactly like the rest of the app.
   ========================================================================= */

:root{
  --wrap:1240px;
  --ink:#101828; --ink-2:#475467; --ink-3:#667085;
  --line-2:#e4e7ec; --bg-2:#f8fafc;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(16,24,40,.06);
  --sh-2:0 4px 12px -2px rgba(16,24,40,.10);
  --sh-3:0 18px 40px -18px rgba(16,24,40,.28);
}

body.site{background:#fff;color:var(--ink);}
body.no-scroll{overflow:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.site .muted{color:var(--ink-3)}
.site h1,.site h2,.site h3,.site h4{color:var(--ink);letter-spacing:-.02em;margin:0}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue)}

/* ---- utility bar ---- */
.site-utility{background:var(--blue-dark);color:#fff;font-size:13px}
.site-utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;height:38px}
.site-utility a{color:rgba(255,255,255,.88);display:inline-flex;align-items:center;gap:6px;margin-right:16px}
.site-utility a:hover{color:#fff}
.site-utility .u-right a{margin:0 0 0 16px}
@media (max-width:768px){ .hide-sm{display:none!important} .site-utility{font-size:12px} }

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line-2);
  transition:box-shadow .18s ease, height .18s ease}
.site-header.shrink{box-shadow:var(--sh-2)}
.site-header .wrap{display:flex;align-items:center;gap:18px;height:68px}
.site-header.shrink .wrap{height:58px}
.burger{display:none;background:none;border:0;font-size:24px;color:var(--ink);padding:6px;cursor:pointer}
.site-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);white-space:nowrap}
.site-brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;
  font-size:20px;background:linear-gradient(135deg,var(--sky),var(--blue))}
.site-brand .name{font-size:16px;letter-spacing:-.02em;max-width:230px;overflow:hidden;text-overflow:ellipsis}

/* min-width:0 + overflow guard: a nav that grows past the viewport is what
   pushed the whole page into horizontal scroll. The breakpoint below hides it
   entirely, but this makes the failure impossible rather than merely unlikely. */
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto;min-width:0;flex-shrink:1}
.site-nav > .nav-item, .site-nav > .nav-link{flex-shrink:0}
body.site{overflow-x:clip}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:3px;padding:10px 12px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.nav-link:hover{background:var(--sky-soft);color:var(--blue)}
.nav-link i{font-size:16px;opacity:.6}

/* mega menu — opens on hover AND on keyboard focus, never hover-only */
.mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  width:min(760px,92vw);background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-3);padding:18px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease, transform .16s ease}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(4px)}
/* The rightmost triggers sit close to the viewport edge, so a centred panel
   spills past it and widens the document. Anchor those to the right instead —
   this is geometry, not a scrollbar quirk, so clipping alone would not fix it. */
.nav-item:nth-last-of-type(-n+2) .mega{left:auto;right:0;transform:translateX(0) translateY(8px)}
.nav-item:nth-last-of-type(-n+2):hover .mega,
.nav-item:nth-last-of-type(-n+2):focus-within .mega{transform:translateX(0) translateY(4px)}
.mega-inner{display:grid;grid-template-columns:1fr 232px;gap:18px}
.mega-groups{display:grid;gap:14px}
.mega-group h5{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 6px;padding:0 11px}
.mega-links{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-links a{display:block;padding:9px 11px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px}
.mega-links a:hover{background:var(--sky-soft);color:var(--blue)}
.mega-links a span{display:block;font-weight:600}
.mega-links a small{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
.mega-all{grid-column:1/-1;font-weight:700!important;color:var(--blue)!important;border-top:1px solid var(--line-2);
  border-radius:0!important;margin-top:6px;padding-top:11px!important}
.mega-promo{background:var(--sky-soft);border-radius:var(--r);padding:16px}
.mega-promo h4{font-size:15px;margin:6px 0 8px}
.mega-promo .price{font-size:13px;color:var(--ink-2);margin:0 0 4px}
.mega-promo .price strong{font-size:19px;color:var(--blue);display:block}
.mega-promo .price small{color:var(--ink-3)}
.mega-promo .muted{font-size:12.5px;margin:0 0 12px}

.site-actions{display:flex;align-items:center;gap:8px;margin-left:14px;flex-shrink:0}

/* The horizontal nav only appears where there is genuinely room for
   brand + 5 mega triggers + 2 buttons. Measured with Inter actually loaded:
   below ~1200px they collide, so the drawer takes over there, not at 1080. */
@media (max-width:1200px){
  .site-nav{display:none}
  .burger{display:block}
  .site-actions{margin-left:auto}
}
@media (max-width:1400px){
  .site-brand .name{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-link{padding:10px 9px;font-size:13.5px}
}
@media (max-width:900px){ .hide-md{display:none!important} }

/* ---- mobile drawer ---- */
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);background:#fff;z-index:90;
  transform:translateX(-100%);transition:transform .22s ease;display:flex;flex-direction:column;
  box-shadow:var(--sh-3)}
.drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:80;opacity:0;visibility:hidden;
  transition:opacity .2s ease}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line-2)}
.drawer-nav{flex:1;min-height:0;overflow-y:auto;padding:8px 10px}
.drawer-nav details{border-bottom:1px solid var(--line-2)}
.drawer-nav summary{padding:13px 8px;font-weight:700;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center;font-size:14.5px}
.drawer-nav summary::after{content:"\ea4e";font-family:remixicon;color:var(--ink-3)}
.drawer-nav details[open] summary::after{content:"\ea78"}
.drawer-nav details a{display:block;padding:10px 8px 10px 18px;color:var(--ink-2);font-size:14px}
.drawer-nav details a.all{color:var(--blue);font-weight:700}
.drawer-nav a.flat{display:block;padding:13px 8px;font-weight:700;font-size:14.5px;color:var(--ink);
  border-bottom:1px solid var(--line-2)}
.drawer-foot{padding:14px 16px;border-top:1px solid var(--line-2)}
.btn.block{display:flex;width:100%;justify-content:center}

/* ---- hero ---- */
.hero{background:linear-gradient(165deg,var(--sky-soft) 0%,rgba(255,255,255,.4) 62%,#fff 100%);
  border-bottom:1px solid var(--line-2);padding:56px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:46px;align-items:center}
.hero h1{font-size:clamp(30px,4.4vw,50px);line-height:1.08;margin-bottom:16px}
.hero h1 .accent{background:linear-gradient(120deg,var(--sky),var(--blue));-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero .sub{font-size:17px;color:var(--ink-2);line-height:1.6;max-width:56ch;margin-bottom:22px}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.trust-strip{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.trust-strip b{display:block;font-size:22px;color:var(--ink);letter-spacing:-.02em}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:30px} .hero{padding:36px 0 34px} }

/* lead form card */
.lead-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);padding:24px;
  box-shadow:var(--sh-3)}
.lead-card h3{font-size:19px;margin-bottom:5px}
.lead-card p.muted{font-size:13.5px;margin-bottom:16px}
.lead-card .field{margin-bottom:11px}
.lead-card label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.lead-card input,.lead-card select,.lead-card textarea{width:100%;padding:11px 13px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);font:inherit;font-size:15px;background:#fff}
.lead-card input:focus,.lead-card select:focus{outline:none;border-color:var(--sky);
  box-shadow:0 0 0 3px var(--sky-soft)}
.lead-note{font-size:11.5px;color:var(--ink-3);margin-top:10px;line-height:1.5}

/* ---- sections ---- */
.section{padding:56px 0}
.section.tint{background:var(--bg-2)}
.section-head{text-align:center;max-width:720px;margin:0 auto 34px}
.section-head h2{font-size:clamp(24px,3vw,34px);margin:8px 0 10px}
.section-head p{color:var(--ink-2);font-size:16px;line-height:1.6}
.section-head.left{text-align:left;margin-left:0}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .g2,.g3,.g4{grid-template-columns:1fr} }

/* service card */
.svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:20px;transition:border-color .16s, box-shadow .16s, transform .16s}
.svc-card:hover{border-color:var(--sky);box-shadow:var(--sh-2);transform:translateY(-2px)}
.svc-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:22px;
  background:var(--sky-soft);color:var(--blue);margin-bottom:12px}
.svc-card h3{font-size:16px;margin-bottom:6px;line-height:1.3}
.svc-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;flex:1;margin-bottom:14px}
.svc-card .meta{display:flex;justify-content:space-between;align-items:flex-end;
  border-top:1px solid var(--line-2);padding-top:12px}
.svc-card .from{font-size:12px;color:var(--ink-3)}
.svc-card .from b{display:block;font-size:18px;color:var(--blue);letter-spacing:-.02em}
.svc-card .time{font-size:12px;color:var(--ink-3);text-align:right}

/* category tile */
.cat-card{display:block;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px}
.cat-card:hover{border-color:var(--sky);box-shadow:var(--sh-2)}
.cat-card i{font-size:26px;color:var(--blue);display:block;margin-bottom:10px}
.cat-card h3{font-size:15.5px;margin-bottom:5px}
.cat-card p{font-size:13px;color:var(--ink-3)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.step{position:relative;padding:22px 18px;background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg)}
.step:before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:18px;width:30px;
  height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,var(--sky),var(--blue))}
.step h4{font-size:15px;margin:8px 0 6px}
.step p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* testimonial */
.quote{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:22px}
.quote .stars{color:#f5a524;font-size:14px;margin-bottom:10px}
.quote p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:14px}
.quote .who{display:flex;align-items:center;gap:11px}
.quote .who .av{width:38px;height:38px;border-radius:50%;background:var(--sky-soft);color:var(--blue);
  display:grid;place-items:center;font-weight:800}
.quote .who b{display:block;font-size:14px}
.quote .who small{color:var(--ink-3);font-size:12.5px}
.verified{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#0d9488}

/* ---- service detail page ---- */
.svc-hero{background:linear-gradient(165deg,var(--sky-soft),#fff);border-bottom:1px solid var(--line-2);
  padding:26px 0 34px}
.crumbs{font-size:13px;color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--ink-3)} .crumbs a:hover{color:var(--blue)}
.svc-layout{display:grid;grid-template-columns:1fr 372px;gap:34px;align-items:start;
  /* Horizontal padding must be RESTATED. This element is `class="wrap svc-layout"`,
     and .wrap's `padding:0 20px` is a shorthand that this shorthand overwrites — so
     writing `34px 0 60px` silently set the side gutters to zero. Invisible on a wide
     screen (max-width + margin:auto supplies the whitespace), but on mobile .wrap is
     full-bleed and every heading and paragraph sat flush against both edges. */
  padding:34px 20px 60px}
@media (max-width:1080px){ .svc-layout{grid-template-columns:1fr} }

.rail{position:sticky;top:96px}
@media (max-width:1080px){ .rail{position:static} }
.rail-card{background:#fff;border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  overflow:hidden}
.rail-card .body{padding:20px}
.pkg-tabs{display:flex;background:var(--bg-2);border-bottom:1px solid var(--line-2)}
.pkg-tab{flex:1;padding:12px 8px;text-align:center;font-size:13px;font-weight:700;color:var(--ink-3);
  cursor:pointer;border:0;background:none;border-bottom:2px solid transparent}
.pkg-tab.active{color:var(--blue);background:#fff;border-bottom-color:var(--blue)}
.price-rows{margin:4px 0 14px}
.price-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:14px;
  border-bottom:1px dashed var(--line-2)}
.price-row:last-child{border-bottom:0}
.price-row .lbl{color:var(--ink-2)} .price-row .val{font-weight:600;white-space:nowrap}
.price-row.total{border-top:2px solid var(--ink);margin-top:8px;padding-top:12px;font-size:17px;font-weight:800}
.price-row.total .val{color:var(--blue);font-size:20px}
.sample-flag{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:var(--r-sm);
  padding:9px 11px;font-size:12px;line-height:1.5;margin:10px 0}
.addon{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--line-2)}
.addon input{margin-top:3px}
.addon .a-name{font-size:13.5px;font-weight:600}
.addon .a-desc{font-size:12px;color:var(--ink-3);line-height:1.45}
.addon .a-price{margin-left:auto;font-size:13.5px;font-weight:700;white-space:nowrap}

.block{margin-bottom:34px}
.block h2{font-size:22px;margin-bottom:12px}
.block p{font-size:15px;line-height:1.72;color:var(--ink-2);margin-bottom:12px}
.block ul{margin:0 0 12px 18px} .block li{font-size:15px;line-height:1.7;color:var(--ink-2);margin-bottom:5px}

.matrix{width:100%;border-collapse:collapse;font-size:14px}
.matrix th,.matrix td{padding:11px 12px;border-bottom:1px solid var(--line-2);text-align:left}
.matrix th{background:var(--bg-2);font-weight:700;font-size:13px}
.matrix td.tick{text-align:center;width:110px}
.matrix .yes{color:#0d9488;font-size:17px} .matrix .no{color:var(--line-2);font-size:17px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-2);
  border-radius:var(--r);}
.table-scroll table{min-width:640px;margin:0}
/* NOTE on the package table's horizontal scroll (640px table, ~350px phone).
   The last price column is cut mid-number, which reads as a broken layout. Two
   affordances were tried and BOTH are recorded here so they are not retried:
     1. background-gradient scroll shadows — render nothing, because the cells
        paint their own opaque background over the scroller's.
     2. position:sticky on the first column — actively WORSE. Measured: that
        column is 310px inside a 350px scroller, so pinning it covers all three
        tick columns instead of revealing them.
   The table does scroll correctly and no data is unreachable. The real fix is to
   stack the packages as cards under ~720px rather than to decorate the table. */

.doclist{display:grid;gap:9px}
.docitem{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r)}
.docitem i{color:var(--blue);font-size:18px;margin-top:1px}
.docitem b{display:block;font-size:14px} .docitem small{color:var(--ink-3);font-size:12.5px;line-height:1.5}
.docitem .req{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);white-space:nowrap}

.tracker{display:flex;gap:0;overflow-x:auto;padding-bottom:6px}
.tracker .t{flex:1;min-width:150px;position:relative;padding:0 12px}
.tracker .t:before{content:"";position:absolute;top:13px;left:0;right:0;height:2px;background:var(--line-2)}
.tracker .t:first-child:before{left:50%} .tracker .t:last-child:before{right:50%}
.tracker .dot{position:relative;width:28px;height:28px;border-radius:50%;margin:0 auto 10px;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--sky),var(--blue))}
.tracker h5{font-size:13.5px;text-align:center;margin-bottom:4px}
.tracker p{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.45}
.tracker .day{display:block;font-size:11px;color:var(--blue);font-weight:700;text-align:center;margin-top:4px}

.faq{border:1px solid var(--line-2);border-radius:var(--r);margin-bottom:9px;background:#fff;overflow:hidden}
.faq summary{padding:15px 17px;font-weight:650;font-size:15px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\ea4e";font-family:remixicon;color:var(--ink-3);flex-shrink:0}
.faq[open] summary::after{content:"\ea78"}
.faq[open] summary{border-bottom:1px solid var(--line-2)}
.faq .a{padding:15px 17px;font-size:14.5px;line-height:1.7;color:var(--ink-2)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--blue),var(--blue-dark));border-radius:var(--r-xl);
  padding:40px 28px;text-align:center;color:#fff;box-shadow:var(--sh-3)}
.cta-band h2{color:#fff;font-size:clamp(21px,2.6vw,29px);margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.85);font-size:15.5px;margin-bottom:20px;max-width:56ch;
  margin-left:auto;margin-right:auto}
.cta-band .btn-light{background:#fff;color:var(--blue)}

/* ---- footer ---- */
.site-footer{background:var(--blue-dark);color:rgba(255,255,255,.72);padding:52px 0 26px;margin-top:56px}
.site-footer h4{color:#fff;font-size:14px;margin-bottom:14px;letter-spacing:.01em}
.site-footer a{color:rgba(255,255,255,.72);font-size:13.5px}
.site-footer a:hover{color:#fff}
.foot-cols{display:grid;grid-template-columns:1.5fr repeat(4,1fr) 1.2fr;gap:28px}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot-col li{margin-bottom:8px}
.foot-col.brandcol .site-brand{color:#fff;margin-bottom:12px}
.foot-col.brandcol .muted{color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.6}
.socials{display:flex;gap:8px;margin-top:14px}
.socials a{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;
  place-items:center;font-size:16px}
.socials a:hover{background:var(--sky);color:#fff}
address{font-style:normal;font-size:13.5px;line-height:1.65;margin-bottom:12px;color:rgba(255,255,255,.72)}
.contact{list-style:none;padding:0;margin:0}
.contact li{margin-bottom:8px;font-size:13.5px;display:flex;gap:7px;align-items:center}
@media (max-width:1100px){ .foot-cols{grid-template-columns:repeat(3,1fr)} }
@media (max-width:680px){ .foot-cols{grid-template-columns:repeat(2,1fr);gap:22px} }

.foot-band{border-top:1px solid rgba(255,255,255,.14);margin-top:34px;padding-top:24px}
.newsletter{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:center}
.newsletter p{font-size:13.5px;color:rgba(255,255,255,.6);margin-top:4px}
.nl-form{display:grid;grid-template-columns:1fr auto;gap:9px}
.nl-form input{padding:11px 13px;border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:14px}
.nl-form input::placeholder{color:rgba(255,255,255,.45)}
.nl-form .consent{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;font-size:11.5px;
  color:rgba(255,255,255,.6);line-height:1.5}
.nl-form .consent input{width:auto;flex-shrink:0;margin-top:2px}
@media (max-width:820px){ .newsletter{grid-template-columns:1fr} .nl-form{grid-template-columns:1fr} }

.trust{display:flex;gap:26px;flex-wrap:wrap;font-size:12.5px;color:rgba(255,255,255,.58)}
.trust span{display:inline-flex;align-items:center;gap:7px}
.disclaimer{margin-top:22px;font-size:11.5px;line-height:1.65;color:rgba(255,255,255,.5);
  border-left:2px solid rgba(255,255,255,.2);padding-left:12px}
.legal-bar{border-top:1px solid rgba(255,255,255,.14);margin-top:24px;padding-top:18px;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px}
.legal-bar p{margin:0;color:rgba(255,255,255,.5)}
.legal-bar nav{display:flex;gap:16px;flex-wrap:wrap}
.legal-bar a{font-size:12.5px}

/* ---- mobile sticky action bar (blueprint 7.3) ---- */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:#fff;
  border-top:1px solid var(--line-2);box-shadow:0 -6px 22px -10px rgba(16,24,40,.3);
  padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;padding:10px 4px;min-height:56px;font-size:11.5px;font-weight:700;color:var(--ink-2)}
.mobile-bar a i{font-size:20px}
.mobile-bar a.primary{background:linear-gradient(135deg,var(--sky),var(--blue));color:#fff}
.mobile-bar.hidden{transform:translateY(110%)}
@media (max-width:900px){
  .mobile-bar{display:flex;transition:transform .18s ease}
  body.site main{padding-bottom:64px}
}

/* ---- cookie banner ---- */
.cookie-banner{position:fixed;left:14px;right:14px;bottom:14px;z-index:95;background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:16px 18px;
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  max-width:760px;margin:0 auto}
.cookie-banner p{font-size:13px;color:var(--ink-2);margin:4px 0 0;line-height:1.55}
.cookie-actions{display:flex;gap:8px;flex-shrink:0}
@media (max-width:900px){ .cookie-banner{bottom:72px} }

/* ---- misc ---- */
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line-2);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--blue)}
.note{background:var(--sky-soft);border-radius:var(--r);padding:14px 16px;font-size:13.5px;
  line-height:1.6;color:var(--blue-dark)}
.note.warn{background:#fffbeb;color:#92400e}
.note.danger{background:#fef2f2;color:#991b1b}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0;font-weight:600}
.empty{text-align:center;padding:52px 20px;color:var(--ink-3)}
.empty i{font-size:38px;display:block;margin-bottom:12px;opacity:.4}

/* ---------------------------------------------------------------------------
   min-width:0 on every grid/flex child.

   A grid or flex item defaults to min-width:auto, which means it REFUSES to
   shrink below its content's min-content width. `.table-scroll table` sets
   min-width:640px so the table can scroll inside its own container — but that
   640px propagated up and forced the whole column to 750px at a 375px viewport,
   pushing the entire page into horizontal scroll.

   overflow-x:clip on body HIDES that; it does not fix it. This does.
   -------------------------------------------------------------------------- */
.svc-layout > *, .hero-grid > *, .grid > *, .foot-cols > *, .mega-inner > *,
.mega-groups > *, .newsletter > *, .steps > *, .price-row > *{ min-width:0 }
.table-scroll{ max-width:100% }

/* ---- mobile header: the brand name must not push the actions off-screen ---- */
@media (max-width:560px){
  .site-header .wrap{gap:10px}
  .site-brand .name{max-width:110px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .site-brand .logo{width:32px;height:32px;font-size:17px;border-radius:9px}
  .site-actions{gap:6px;margin-left:auto}
  .site-actions .btn{padding:8px 11px;font-size:13px}
}
@media (max-width:340px){
  /* Below this the name cannot fit at all; the logo still identifies the site.
     Was 400px, which hid the firm's name on EVERY common phone (360/390/414).
     That threshold was set when the brand string was the full product name;
     with the 110px ellipsis cap above, the name clears the actions with room
     to spare at 360px and up (measured: no collision, no overflow). A
     professional-services site should say whose site it is. */
  .site-brand .name{display:none}
}