/* ==========================================================================
   home-allwork-tabs · THE ALL WORK BAND IN THE "OUR CLIENTS" GRAMMAR
   LIVE on index.html since 2026-09-22 (built and approved as the preview /doctor/home-hero-tabs-p3r.html). A verbatim copy of home-work-clients-v4n/band.css
   (the All Work UI the user approved), loaded by
   /doctor/index.html together with frame.css and tabs.css, which puts the
   Google Ads hero frame round the hero and stands this band on its bottom
   edge.

   The reference is the live Google Ads page's client section
   (google-ads.html → #q7, dressed by gads-hero-rail/hero-rail.css).
   Its values, read from the rendered page at 1440 and 390, are the only
   vocabulary used here:

     sheet     #C6D9F4, flat, square, no edge, no shadow, 12 / 26 / 26 padding
     card      #FFFFFF, square, no edge, no shadow, 60px (58 on phones)
     mark      32px square in the business's own colour, 11px/800 initials
     name      14px/700 #0E1E35 · line 12px/500 #505C6C, 6px apart
     action    a 14px #0760C6 arrow; its words stay for screen readers
     hover     #F7FAFE and the arrow steps 2px
     chosen    2px #5E8FD3 inset ring, #004594 name, the 7px #1F8FEA light
     rail      two rows that move together; whole columns and the next
               column's mark at the edge (band.js sizes the columns)

   The tab row is the band's own and keeps its six tabs, icons, words and
   behaviour. It sits in the sheet's top margin, where "Our Clients" sits,
   and follows the header's state rules: the selected tab is the one filled
   surface in the row, a hover is a line, focus is a ring.

   Nothing here changes what the band holds or does: the same doors, the same
   18-card rails, the same Google Ads detail panel, the same tab switching,
   hero pin and fade. Every selector starts at the band and carries eight ids
   through :has(#lane…), which outranks the page's heaviest layer on this band
   (a six-id !important rule on the selected tab).
   ========================================================================== */

/* ---- 0 · tokens ------------------------------------------------------------ */
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
  --bw-ground:#FFFFFF;
  --bw-sheet:#C6D9F4;
  --bw-card:#FFFFFF;     --bw-card-h:#F7FAFE;
  --bw-ink:#0E1E35;      --bw-ink-2:#24364F;   --bw-ink-3:#505C6C;
  --bw-act:#0760C6;      --bw-on:#004594;      --bw-ring:#5E8FD3;
  --bw-dot:#1F8FEA;      --bw-focus:#003F8A;   --bw-plate:#E3EDFA;
  --bw-rule:#5E7596;     --bw-ink-h:#00285E;
  --bw-lane:var(--grid-edge, 18px);
  --bw-top:12px;  --bw-sp:26px;  --bw-gap:10px;  --bw-ch:60px;  --bw-tabs:44px;  --bw-under:14px;
  --bw-font:-apple-system, "system-ui", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}
@media (max-width:900px){
  html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
    --bw-top:10px; --bw-sp:12px; --bw-gap:8px; --bw-ch:58px; --bw-under:10px;
  }
}
@media (max-width:760px){
  html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){ --bw-lane:18px; }
}

/* ---- 1 · the ground and the sheet --------------------------------------------
   The white plate (.stage::before) and the pale ground go. The band is now
   one closed blue sheet on the header's lane, on white, like the Google Ads
   page below its hero. The sheet hugs what it holds, so the rails, the doors
   and an opened business all end on the same 26px of blue. */
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane){
  background:var(--bw-ground) !important;
  background-color:var(--bw-ground) !important;
  box-shadow:none !important;
  padding:0 0 var(--r9-base, 36px) !important;
}
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .stage{
  position:relative !important; isolation:isolate;
  display:flex !important; flex-direction:column !important; flex-grow:0 !important;
  gap:0 !important;
  margin:16px var(--bw-lane) 0 !important;
  padding:var(--bw-top) var(--bw-sp) var(--bw-sp) !important;
  background:var(--bw-sheet) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  font-family:var(--bw-font);
}
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .stage::before,
html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .stage::after{
  content:none !important; display:none !important;
}
@media (max-width:900px){
  html body .screen .tail.show:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .stage{ margin-top:12px !important; }
}

/* ---- 2 · the tab row, in the sheet's top margin -------------------------------
   Inactive: ink on the blue. Selected: the one white surface, #004594, and
   the site's "this one" light. Hover: a 2px line under the words. Focus: a
   ring. The Google Ads tab's two lines stack like a card's name and line. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs{
  display:flex !important; flex-wrap:nowrap !important;
  justify-content:space-between !important; align-items:stretch !important;
  gap:6px !important;
  width:auto !important; max-width:none !important; min-height:var(--bw-tabs) !important;
  margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
  scrollbar-width:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs::-webkit-scrollbar{ display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs::after{ content:none !important; display:none !important; }

html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:first-child{
  position:relative !important;
  flex:0 0 auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:10px !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  height:var(--bw-tabs) !important; min-height:var(--bw-tabs) !important;
  margin:0 !important; padding:0 14px 0 12px !important;
  background:transparent !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0;
  color:var(--bw-ink-2) !important;
  font-family:var(--bw-font) !important; font-size:14px !important; line-height:16.8px !important;
  font-weight:650 !important; letter-spacing:-.01em !important; white-space:nowrap !important;
  text-align:left !important; transform:none !important; opacity:1 !important;
  cursor:pointer; transition:color .15s ease, background-color .15s ease;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button svg{
  flex:none !important; width:18px !important; height:18px !important; margin:0 !important;
  fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round; stroke-linejoin:round;
  color:var(--bw-act) !important; opacity:1 !important; transform:none !important;
}
/* the Google Ads mark keeps its own three colours */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button svg:has([fill]){ stroke:none !important; }

/* the two-line tab: "Google Ads" over "Success Stories" */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button .gah-tabw{
  display:flex !important; flex-direction:column !important; align-items:flex-start !important;
  gap:1px !important; margin:0 !important; padding:0 !important; line-height:1 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button .gah-tabname{
  display:block !important; font:inherit !important; font-size:14px !important; line-height:16.8px !important;
  font-weight:650 !important; color:inherit !important; letter-spacing:-.01em !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button .gah-tabsub{
  display:block !important; margin:0 !important; font-style:normal !important;
  font-size:11.5px !important; line-height:14px !important; font-weight:500 !important; letter-spacing:0 !important;
  color:var(--bw-ink-3) !important; opacity:1 !important;
}

/* selected: the one filled surface in the row */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button[aria-selected="true"],
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button[aria-selected="true"]:hover{
  background:var(--bw-card) !important;
  background-image:radial-gradient(circle 3.5px at calc(100% - 10.5px) 10.5px, var(--bw-dot) 0 3.5px, rgba(0,0,0,0) 3.6px) !important;
  color:var(--bw-on) !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button[aria-selected="true"] :is(.gah-tabname){ color:var(--bw-on) !important; }

/* hover: a line under the words, never a second box */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button::before{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button::after{
  content:"" !important; display:block !important; position:absolute !important;
  left:12px !important; right:14px !important; top:auto !important; bottom:6px !important;
  width:auto !important; height:2px !important; border-radius:2px !important;
  background:var(--bw-rule) !important; opacity:0 !important; transform:none !important;
  transition:opacity .15s ease; pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:not([aria-selected="true"]):hover{
    color:var(--bw-ink-h) !important; background:transparent !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:not([aria-selected="true"]):hover::after{ opacity:1 !important; }
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:active:not([aria-selected="true"]){
  background:transparent !important; transform:none !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:focus-visible{
  outline:2px solid var(--bw-focus) !important; outline-offset:-2px !important; box-shadow:none !important;
}

/* ---- 3 · the drawer ------------------------------------------------------------
   One view at a time, 14px under the tabs. The floor measure() computes for
   the old cards is not needed: every view here is the same two-row height. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .drawer{
  display:block !important;
  width:auto !important; min-height:0 !important;
  margin:var(--bw-under) 0 0 !important; padding:0 !important;
  background:none !important; border:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .drawer > .head{ display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) > .drawer.wk-anim{ overflow:clip !important; clip-path:none !important; }

/* ---- 4 · All Work: the five doors -----------------------------------------------
   An Our Clients card two rows tall: the category's mark, its name and line,
   the arrow; the sentence underneath. Five whole cards, never a rail. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important; grid-auto-flow:row !important;
  grid-template-rows:none !important; grid-auto-columns:auto !important;
  gap:var(--bw-gap) !important;
  width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  overflow:visible !important; background:none !important;
}
/* the lane is hidden (the [hidden] attribute) whenever a rail tab is open */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane[hidden]{ display:none !important; }
/* where five whole doors no longer fit at 200px (phones, and desktops under
   about 1180px) band.js marks the lane and the doors become a rail of their
   own: whole cards and the next one's mark, like every other tab */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane[data-bw="rail"]{
  grid-template-columns:none !important; grid-auto-flow:column !important; grid-auto-columns:var(--cw, 214px) !important;
  overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane[data-bw="rail"]::-webkit-scrollbar{ display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane[data-bw="rail"] > .card.door{ scroll-snap-align:start; }

/* ---- 4b · THE FIRST FRAME IS ALREADY THE RAIL (2026-09-23) ----------------
   The three rules above are what band.js turns on by setting data-bw="rail",
   and until that script has run the lane paints as the five-column grid in
   rule 4 — which on a phone is five doors deep instead of one card tall. The
   band was therefore ~160px deeper in the first frame than in the settled one,
   and because .hero is the flexible child of .screen, everything above it (the
   label, the headline, the audit field) sat ~80px high and then dropped. That
   was the page's worst load jump, and it is not something script order can
   fix: the browser paints partway through the first screen whatever we do
   (rel="expect" is released ~110ms before #svc3 is parsed, measured).

   band.js's choice is a pure function of the lane's own width — a rail as soon
   as five 200px doors plus their four 10px gaps no longer fit, i.e. a lane
   under 1040px, which is this page's lane at a 1242px viewport — so the same
   choice is made here, in CSS, where it costs no script. band.js still sets
   the attribute a moment later; the declarations are identical, so nothing
   moves, and it still owns the switch on resize and rotation.
   If band.js's `5 * 200 + 4 * 10` ever changes, change this breakpoint too. */
@media (max-width: 1241px){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane{
    grid-template-columns:none !important; grid-auto-flow:column !important; grid-auto-columns:var(--cw, 214px) !important;
    overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane::-webkit-scrollbar{ display:none !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door{ scroll-snap-align:start; }
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door{
  position:relative !important;
  display:grid !important;
  grid-template-columns:32px minmax(0, 1fr) 14px !important;
  grid-template-rows:auto 1fr !important;
  column-gap:10px !important; row-gap:12px !important;
  align-items:center !important; align-content:start !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  height:auto !important; min-height:calc(2 * var(--bw-ch) + var(--bw-gap)) !important;
  margin:0 !important; padding:14px 12px 14px 12px !important;
  background:var(--bw-card) !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0;
  color:var(--bw-ink) !important; text-align:left !important; transform:none !important;
  font-family:var(--bw-font) !important;
  cursor:pointer; transition:background-color .15s ease;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door::after{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .ic{
  grid-column:1 !important; grid-row:1 !important;
  display:grid !important; place-items:center !important;
  width:32px !important; height:32px !important; margin:0 !important; padding:0 !important;
  background-color:var(--bw-plate) !important;   /* only the plate: the page paints four of these icons as coloured images */
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:var(--bw-act) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .ic svg{
  width:18px !important; height:18px !important; margin:0 !important;
  fill:none !important; stroke:currentColor !important; stroke-width:1.8 !important; stroke-linecap:round; stroke-linejoin:round;
  color:var(--bw-act) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .ic svg:has([fill]){ stroke:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door h3{
  grid-column:2 !important; grid-row:1 !important;
  display:block !important; margin:0 !important; padding:0 !important; min-width:0;
  font-family:var(--bw-font) !important; font-size:14px !important; line-height:16.8px !important;
  font-weight:700 !important; letter-spacing:-.03em !important; color:var(--bw-ink) !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door h3 > span{
  display:block !important; margin:6px 0 0 !important;
  font-size:12px !important; line-height:15px !important; font-weight:500 !important;
  letter-spacing:-.005em !important; color:var(--bw-ink-3) !important; text-transform:none !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .say{
  grid-column:1 / -1 !important; grid-row:2 !important; align-self:start !important;
  display:block !important; margin:0 !important; padding:4px 0 0 !important; border:0 !important;
  font-family:var(--bw-font) !important; font-size:13px !important; line-height:19px !important;
  font-weight:500 !important; letter-spacing:-.005em !important; color:var(--bw-ink-3) !important;
  white-space:normal !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .go{
  grid-column:3 !important; grid-row:1 !important; justify-self:end !important;
  display:grid !important; place-items:center !important;
  width:14px !important; height:24px !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:var(--bw-act) !important; font-family:var(--bw-font) !important;
  font-size:15px !important; line-height:1 !important; font-weight:700 !important;
  transition:translate .15s ease;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .go svg{
  width:14px !important; height:14px !important; fill:none; stroke:currentColor; stroke-width:2;
}
@media (hover:hover) and (pointer:fine){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door:hover{
    background:var(--bw-card-h) !important; box-shadow:none !important; transform:none !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door:hover .go{ translate:2px 0; }
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door:focus-visible{
  outline:2px solid var(--bw-focus) !important; outline-offset:2px !important; box-shadow:none !important;
}

/* ---- 5 · the five rails: Google Ads, Client Wall, Landing Pages, Websites, Meta Ads ---- */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah{
  margin:0 !important; padding:0 !important; background:none !important; border:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah > section.cc{
  display:block !important; width:auto !important; max-width:none !important;
  margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  font-family:var(--bw-font) !important; color:var(--bw-ink);
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah > section.cc::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah > section.cc::after{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp{
  width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-head{ display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wrap{
  position:relative !important; overflow:visible !important;
  margin:0 !important; padding:0 !important; background:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
}
/* no fades and no arrows at the ends: the next column's mark is the cue */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wrap::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wrap::after{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .dk-btn{ display:none !important; }

html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row{
  display:grid !important; grid-auto-flow:column !important;
  grid-template-columns:none !important; grid-template-rows:repeat(2, auto) !important;
  grid-auto-columns:var(--cw, 228px) !important;
  gap:var(--bw-gap) !important;
  width:auto !important; max-width:none !important; height:auto !important;
  margin:0 !important; padding:0 !important;
  overflow-x:auto !important; overflow-y:hidden !important; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:0 !important; scroll-behavior:smooth;
  scrollbar-width:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  background:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row::-webkit-scrollbar{ display:none !important; }

/* ---- 6 · the card ------------------------------------------------------------------
   One object for every rail: .mp-i (the Google Ads buttons) and the four
   tabs' .card (static, as they are live — so no arrow and no hover). */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > :is(.mp-i, .card){
  position:relative !important;
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important;
  gap:9px !important;
  flex:none !important; width:auto !important; min-width:0 !important; max-width:none !important;
  height:auto !important; min-height:var(--bw-ch) !important;
  margin:0 !important; padding:9px 8px 9px 9px !important;
  background:var(--bw-card) !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; outline:0;
  color:var(--bw-ink) !important; text-align:left !important;
  transform:none !important; opacity:1 !important;
  scroll-snap-align:start; scroll-snap-stop:normal;
  font-family:var(--bw-font) !important;
  transition:background-color .15s ease;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .card{ cursor:default; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > :is(.mp-i, .card)::before{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > :is(.mp-i, .card):not(.is-sel)::after{ content:none !important; display:none !important; }

/* the mark: the business's own colour (--k), its initials */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.mp-m, .chip, .bw-m){
  position:relative !important;
  flex:none !important; display:grid !important; place-items:center !important;
  width:32px !important; height:32px !important; margin:0 !important; padding:0 !important;
  background:var(--k, #0E7C86) !important; background-image:none !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:#FFFFFF !important; font-family:var(--bw-font) !important;
  font-size:11px !important; line-height:normal !important; font-weight:800 !important; letter-spacing:.02em !important;
  font-style:normal !important; text-transform:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * .mp-m .mp-v{ display:none !important; }

/* the words */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.mp-w, .txt, .cap){
  flex:1 1 auto !important; min-width:0 !important;
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:3px !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; position:static !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.cc-nm, .txt > b, .cap > b){
  display:block !important; margin:0 !important; padding:0 !important; max-width:none !important;
  font-family:var(--bw-font) !important; font-size:14px !important; line-height:16.8px !important;
  font-weight:700 !important; letter-spacing:-.03em !important; color:var(--bw-ink) !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.mp-w > .mp-s, .txt > i, .cap > i){
  display:block !important; margin:3px 0 0 !important; padding:0 !important;
  font-family:var(--bw-font) !important; font-style:normal !important;
  font-size:12px !important; line-height:15px !important; font-weight:500 !important;
  letter-spacing:-.005em !important; color:var(--bw-ink-3) !important; text-transform:none !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
/* Meta Ads: the result on its own line, in the "after" blue */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * .cap > i > b{
  display:block !important; margin:2px 0 0 !important;
  font-size:12px !important; line-height:15px !important; font-weight:700 !important;
  letter-spacing:-.005em !important; color:var(--bw-on) !important;
  white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:break-word;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .bw-sep{
  position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important;
}
/* the picture placeholders (grey wireframes) carry no information: the mark does their job */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * .win{ display:none !important; }

/* the action: an arrow, its words for screen readers */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .cc-cue{
  position:static !important; flex:none !important;
  display:grid !important; place-items:center !important;
  width:14px !important; height:24px !important; margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  color:var(--bw-act) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .cc-tx{
  position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .cc-ar{
  display:block !important; width:14px !important; height:14px !important; margin:0 !important;
  fill:none !important; stroke:currentColor !important; stroke-width:2 !important;
  stroke-linecap:round; stroke-linejoin:round;
  transform:none !important; rotate:none; translate:none; transition:translate .15s ease, rotate .15s ease;
  color:var(--bw-act) !important;
}

/* states — the Google Ads buttons only; the four static tabs have none */
@media (hover:hover) and (pointer:fine){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i:hover{
    background:var(--bw-card-h) !important; box-shadow:none !important; border:0 !important; transform:none !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i:hover:not(.is-sel) .cc-ar{ translate:2px 0; }
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel:hover,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i[aria-expanded="true"]{
  background:var(--bw-card) !important; box-shadow:inset 0 0 0 2px var(--bw-ring) !important; border:0 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel .cc-nm{ color:var(--bw-on) !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel .cc-ar{ rotate:90deg; translate:none; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i.is-sel::after{
  content:"" !important; display:block !important; position:absolute !important;
  top:7px !important; right:7px !important; left:auto !important; bottom:auto !important;
  width:7px !important; height:7px !important; margin:0 !important;
  border-radius:50% !important; background:var(--bw-dot) !important; border:0 !important; box-shadow:none !important;
  opacity:1 !important; transform:none !important; transition:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i:focus-visible{
  outline:2px solid var(--bw-focus) !important; outline-offset:2px !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i:active{ transform:none !important; }

/* ---- 7 · an opened business (the Google Ads tab) --------------------------------
   The Google Ads page's detail, value for value: one white card under the
   rows, inside the sheet — no frame in a frame, no notch. */
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-panel{
  position:relative !important; margin:14px 0 0 !important; padding:0 !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-panel::before,
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-panel::after{ content:none !important; display:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-in{ padding:0 !important; margin:0 !important; background:none !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-card{
  margin:0 !important; padding:0 !important; background:var(--bw-card) !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:clip !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb{
  display:flex !important; align-items:center !important; gap:10px !important;
  min-height:50px !important; margin:0 !important; padding:0 22px !important;
  background:none !important; border:0 !important; box-shadow:none !important;
  font-family:var(--bw-font) !important; font-size:14px !important; font-weight:400 !important; color:var(--bw-ink-3) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb button{
  min-height:44px !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important;
  color:var(--bw-act) !important; font-family:var(--bw-font) !important; font-size:14px !important; font-weight:650 !important;
  cursor:pointer;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb button:hover{ text-decoration:underline !important; text-underline-offset:3px; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb i{ font-style:normal !important; color:#9DB0C9 !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb b{ color:var(--bw-ink) !important; font-weight:700 !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-body{
  display:grid !important; grid-template-columns:minmax(0, 1fr) minmax(0, 330px) !important;
  gap:26px !important; align-items:start !important;
  margin:0 !important; padding:2px 22px 22px !important; background:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-who{
  display:flex !important; align-items:center !important; gap:14px !important; margin:0 0 16px !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wm{
  flex:none !important; display:grid !important; place-items:center !important;
  width:46px !important; height:46px !important; margin:2px 0 0 !important;
  border-radius:0 !important; box-shadow:none !important;
  background:var(--k, #0E7C86) !important; color:#FFFFFF !important;
  font-size:15px !important; font-weight:800 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-who h3{
  margin:0 !important; font-family:var(--bw-font) !important;
  font-size:22px !important; line-height:26.4px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  color:var(--bw-ink) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-meta{ display:block !important; margin:0 !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-trade{
  display:block !important; font-size:14px !important; line-height:18.9px !important; font-weight:400 !important; color:var(--bw-ink-3) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip{
  display:grid !important; grid-template-columns:1.35fr 1fr 1fr !important; gap:8px !important;
  margin:0 !important; padding:0 !important;
  background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s{
  display:flex !important; flex-direction:column !important; gap:4px !important;
  margin:1px 0 0 !important; padding:13px 16px 14px !important;
  background:#F3F7FC !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  white-space:normal !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s{
  font-family:var(--bw-font) !important; font-size:16px !important; line-height:19.2px !important;
  font-weight:500 !important; letter-spacing:-.01em !important; color:#6B7788 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s.is-now{ background:#E3EDFA !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s em{
  display:block !important; margin:0 !important; font-style:normal !important;
  font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size:13px !important; line-height:15.6px !important; font-weight:600 !important;
  letter-spacing:.16em !important; text-transform:uppercase !important; color:var(--bw-ink-3) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s b{
  display:block !important; margin:7px 0 0 !important;
  font-size:26px !important; line-height:28.6px !important; font-weight:800 !important; letter-spacing:-.02em !important;
  color:var(--bw-ink) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s.is-txt b{
  margin:8px 0 0 !important; font-size:15.5px !important; line-height:20.925px !important; font-weight:700 !important; letter-spacing:normal !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s.is-now b{ color:var(--bw-on) !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s i{
  display:block !important; margin:5px 0 0 !important; font-style:normal !important;
  font-size:13px !important; line-height:15.6px !important; font-weight:500 !important; letter-spacing:-.16px !important;
  color:var(--bw-ink-3) !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-foot{
  display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:space-between !important;
  gap:10px 16px !important; margin:16px 0 0 !important; padding:0 !important; border:0 !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .q7-story{
  display:inline-flex !important; align-items:center !important; gap:8px !important; min-height:44px !important;
  color:var(--bw-act) !important; font-size:15px !important; font-weight:700 !important; text-decoration:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .q7-story:hover{ text-decoration:underline !important; text-underline-offset:4px; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-x{
  min-height:42px !important; padding:0 18px !important; margin-left:auto !important;
  border:0 !important; border-radius:6px !important; box-shadow:none !important;
  background:#EEF4FC !important; color:var(--bw-ink-2) !important;
  font-family:var(--bw-font) !important; font-size:14.5px !important; font-weight:650 !important; cursor:pointer;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-x:hover{ background:#DDE9F9 !important; color:var(--bw-on) !important; }
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-side{
  margin:0 !important; padding:12px !important; background:#F3F7FC !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .q7-shot{ margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; }

/* ---- 8 · phones and tablets --------------------------------------------------------
   The Google Ads page's phone values: 58px cards, 8px gaps, 12px of sheet;
   the tab row and every rail swipe; nothing is cut — a long name or line
   takes a second line instead. */
@media (max-width:900px){
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs{ justify-content:flex-start !important; gap:4px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button,
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button:first-child{ padding:0 12px 0 10px !important; gap:8px !important; font-size:13.5px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #tabs#tabs > button::after{ left:10px !important; right:12px !important; }

  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door{ padding:12px 10px 12px 10px !important; row-gap:10px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) #lane#lane > .card.door .say{ padding-top:2px !important; font-size:12.5px !important; line-height:18px !important; }

  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > :is(.mp-i, .card){ padding:9px 10px 9px 9px !important; gap:10px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > * :is(.cc-nm, .txt > b, .cap > b, .mp-w > .mp-s, .txt > i, .cap > i, .cap > i > b){
    white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .q7-nS{ display:none !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-row > .mp-i .q7-nF{ display:inline !important; }

  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-panel{ margin-top:10px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-crumb{ padding:0 14px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-body{ grid-template-columns:minmax(0, 1fr) !important; gap:14px !important; padding:2px 14px 14px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-side{ order:-1 !important; padding:8px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-wm{ width:40px !important; height:40px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-who h3{ font-size:19px !important; line-height:22.8px !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s.is-txt{ grid-column:1 / -1 !important; }
  html body .screen .tail.show .stage:has(#lane#lane#lane#lane#lane#lane#lane#lane) .drawer > .gah .mp-strip .mp-s:not(.is-txt) b{ font-size:22px !important; line-height:24.2px !important; }
}