/* ==========================================================================
   OUR SYSTEM + WHY CHOOSE US — the applied design (2026-09-20)
   --------------------------------------------------------------------------
   The picked version: "Checklist Foot" (final five · 5), from the shortlisted
   Blue Band, with the tab-row gutter.  Both sections are the same component,
   so this one file dresses both: #w8-system (Our System) and #wcu-ga (Why
   Choose Us).  Markup, scripts and every word are untouched — this is
   appearance only, and it is the LAST stylesheet on the page.

   TO UNDO: delete the single <link> to this file in google-ads.html.

   What it does, over the section as it was:
     · the "when" lines are plain readable text (was 10.5px mono caps at 2:1)
     · a hero-blue head band frames the module; the open stage is cut out of it
       in white and opens into the white page — no line, border or underline
     · every card's checklist sits in a pale-blue foot; on phones the points
       become tight rows, so each card is shorter
     · the cards fill the panel (no empty strip under a short stage)
     · the five-step stage shows ~120px of the next card (was 19px), 56px on
       phones (was 17px), and position squares under the cards on phones
     · phone stage keys are 46px tall (was 34px), inset from the container edge
     · "Get My Google Ads Audit" is the page's blue action link again
   Why Choose Us differs in three ways and is fitted for them at the foot of
   this file: its list items carry a label and a detail line, its tabs are
   categories (so they take no flow chevron), and its third tab name is long.
   ========================================================================== */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8{
  --u-ink:   #0E1E35;
  --u-ink2:  #26364D;
  --u-body:  #4A5A70;
  --u-mute:  #66758A;
  --u-faint: #8593A6;
  --u-blue:  #0760C6;
  --u-blue-h:#054FA6;
  --u-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
}

/* ---- 2 · 6 · square, and the old marks cleared ------------------------- */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-area{ border-radius:0; box-shadow:none; background:transparent; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-area::after{ content:none; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dock{ border:0; box-shadow:none; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab{
  border-radius:0; box-shadow:none; margin-bottom:0;
  transition:background-color .16s ease, color .16s ease;
}
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab::before,
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab::after,
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-t::before{ content:none; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-step{ border-radius:0; box-shadow:none; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li{ border-top:0; padding-top:0; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li::before,
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li::after{ content:none; }

/* ---- 1 · the tab words -------------------------------------------------- */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-n{
  font-family:var(--u-sans); font-size:17px; font-weight:750; letter-spacing:-.018em; line-height:1.2;
}
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-w{
  font-family:var(--u-sans); font-size:13px; font-weight:500; line-height:1.3;
  letter-spacing:0; text-transform:none;
}

/* ---- the card words ------------------------------------------------------ */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-sn{
  margin-top:0; font-family:var(--u-sans);
  font-size:20px; font-weight:800; letter-spacing:-.024em; line-height:1.2; color:var(--u-ink);
}
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-sl{
  margin-top:8px; font-size:15px; line-height:1.55; color:var(--u-body);
}
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li{ margin-top:20px; gap:11px; align-content:start; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li{
  padding-left:26px; font-size:14.8px; font-weight:600; line-height:1.38; letter-spacing:-.006em; color:var(--u-ink2);
}

/* ---- 3 · the cards fill the canvas -------------------------------------- */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-canvas{ display:flex; flex-direction:column; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel:not([hidden]){ flex:1 1 auto; display:flex; flex-direction:column; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-view{ flex:1 1 auto; display:flex; flex-direction:column; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-rail{ flex:1 1 auto; grid-template-rows:auto auto 1fr; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-step{ grid-row:span 3; }

/* ---- 4 · the five-step stage shows its fourth card ---------------------- */
@media (min-width: 1041px){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-view.is-slide .w8-rail{
    grid-auto-columns:calc((100% - 2 * var(--w8-gap)) / 3.28);
  }
}
@media (max-width: 1040px) and (min-width: 861px){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-view.is-slide .w8-rail{
    grid-auto-columns:calc((100% - var(--w8-gap)) / 2.28);
  }
}

/* ---- 5 · the audit link is an action ------------------------------------ */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-close{ border-top:0; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-close p{ font-size:15px; line-height:1.5; color:var(--u-ink2); }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-go{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15.5px; font-weight:750; letter-spacing:-.01em; color:var(--u-blue);
}
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-go svg{ width:16px; height:16px; stroke:currentColor; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-go:hover{ color:var(--u-blue-h); }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-band{ border-radius:0; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-btn{ border-radius:6px; }

/* ---- the phone ---------------------------------------------------------- */
@media (max-width: 860px){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-rail{ grid-auto-columns:min(80vw, 330px); }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-s{ font-family:var(--u-sans); font-size:14.5px; font-weight:750; letter-spacing:-.012em; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-pname{ font-family:var(--u-sans); font-size:20px; font-weight:800; letter-spacing:-.024em; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-sn{ font-size:19.5px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-sl{ font-size:15px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li{ font-size:15px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li{ margin-top:16px; gap:10px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-close{ margin-top:18px; gap:14px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-go{ padding-block:8px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-band-t b{ font-size:18px !important; line-height:1.25; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-band-t p{ font-size:14px; line-height:1.5; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-btn{ min-height:48px; padding:0 16px; font-size:15px; }
}
@media (max-width: 400px){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-rail{ grid-auto-columns:80vw; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-s{ font-size:14px; }
}

/* ==========================================================================
   ROUND 3 ADDITIONS — interaction feel, shared by all ten
   ========================================================================== */
/* the cards of a stage arrive one after another when the stage opens —
   the eye follows them left to right, in the order they happen */
@keyframes tIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel:not([hidden]){ animation:none; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel:not([hidden]) .w8-step{ animation:tIn .46s cubic-bezier(.2,.7,.2,1) both; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel:not([hidden]) .w8-step:nth-child(2){ animation-delay:.06s; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel:not([hidden]) .w8-step:nth-child(3){ animation-delay:.12s; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel:not([hidden]) .w8-step:nth-child(4){ animation-delay:.18s; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel:not([hidden]) .w8-step:nth-child(5){ animation-delay:.24s; }
/* keyboard focus is always visible, never a hover look */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab:focus-visible{ outline:2px solid var(--u-blue); outline-offset:-2px; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-btn:focus-visible,
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-go:focus-visible{ outline:2px solid var(--u-blue); outline-offset:3px; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab{ cursor:pointer; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab[aria-selected="true"]{ cursor:default; }
@media (prefers-reduced-motion: reduce){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel:not([hidden]) .w8-step{ animation:none; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 *{ transition:none !important; }
}


:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8{
  --w8-pad:32px; --w8-gap:16px;
  --b10:#C6D9F4; --b10-foot:#F2F6FC;
}
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-area{ position:relative; background:#FFFFFF; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-area::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--b10);
}

:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dock{ background:var(--b10); padding:10px 12px 0; gap:24px; align-items:stretch; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab{ background:transparent; padding:15px 22px 17px; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-t{ position:relative; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8--flow .w8-tab + .w8-tab .w8-tab-t::before{
  content:""; position:absolute; top:50%; left:-38px; width:8px; height:8px; margin-top:-5px;
  border-right:2px solid #3E5F90; border-top:2px solid #3E5F90; transform:rotate(45deg);
}
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-n{ color:#15335C; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-w{ color:#2F4E7C; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab:hover{ background:rgba(255,255,255,.42); }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab[aria-selected="true"]{ background:#FFFFFF; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab[aria-selected="true"] .w8-tab-n{ color:var(--u-ink); }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab[aria-selected="true"] .w8-tab-w{ color:var(--u-mute); }

:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-canvas{ background:#FFFFFF; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-step{ background:#FFFFFF; padding:26px 26px 0; box-shadow:inset 0 0 0 1px #D6E3F4; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li{ margin:22px -25px 1px; padding:20px 25px 24px; background:var(--b10-foot); transition:background-color .2s; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-step:hover .w8-li{ background:#E7EFFA; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li::after{
  content:""; position:absolute; left:5px; top:.2em; width:5px; height:10px;
  border-right:2px solid #3F6399; border-bottom:2px solid #3F6399; transform:rotate(45deg);
}

:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-close{ margin-top:18px; padding-top:0; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-band{ background:var(--b10); border:0; box-shadow:none; padding:32px 36px; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-band-t b{ font-size:20px; letter-spacing:-.022em; color:#0B2A55; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-band-t p{ color:#23406B; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-btn{ background:#FFFFFF; border:0; color:var(--u-ink); font-weight:750; transition:color .15s; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-btn:hover{ color:var(--u-blue); }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-note{ color:#2B4A77; }

/* PHONE SOLUTION — shorter cards you can scan.  Each phone card is the step's
   name and sentence on white, then its points as tight hairline rows in the
   blue foot — every card is about a fifth shorter, the list reads as a checklist,
   and square marks show where you are. */
@media (max-width: 860px){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-area{ border:0; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-area::after{ box-shadow:inset 0 -2px 0 var(--b10); }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dock{ padding:8px 8px 0; gap:2px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab{ padding:14px 4px 15px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab-s{ color:#15335C; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-tab[aria-selected="true"] .w8-tab-s{ color:var(--u-ink); }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-panel{ padding:18px 0 20px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-step{ padding:22px 20px 0; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li{ margin:18px -19px 1px; padding:18px 19px 22px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .gss-band{ padding:20px 18px 20px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-rail{ grid-auto-columns:78vw; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-sn{ font-size:19px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-sl{ font-size:14.5px; line-height:1.5; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li{ gap:0; margin-top:16px; padding-top:6px; padding-bottom:10px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li{ padding:8px 0 8px 26px; font-size:14.5px; box-shadow:inset 0 1px 0 rgba(21,51,92,.08); }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li:first-child{ box-shadow:none; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li::after{ top:calc(8px + .2em); }
  /* position marks: one square per step, the step in view inked — sysw8.js
     already sets .on on the pip of every card in view; only the look is new */
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dots{ display:flex; justify-content:center; gap:8px; margin-top:16px; padding-inline:var(--pad); }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dots i{ display:block; width:8px; height:8px; border-radius:0; background:#C6D9F4; box-shadow:none; transition:background-color .2s, transform .2s; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dots i.on{ background:#15335C; transform:scale(1.25); }
}

/* ==========================================================================
   TAB-ROW GUTTER (2026-09-20) — the first tab no longer starts on the
   container's edge.  The row takes the same inset as the cards below it, so
   the first tab's edge lines up with the first card's edge (desktop: the
   panel's --w8-pad; phone: the cards sit on the page gutter on a phone).  The same inset is
   kept on the right, so the row is balanced whatever the tab widths.
   Nothing else in the section changes.
   ========================================================================== */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dock{ padding-left:var(--w8-pad); padding-right:var(--w8-pad); }
@media (max-width: 860px){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dock{ padding-left:var(--pad); padding-right:var(--pad); }
}


/* ==========================================================================
   PHONE — keeping the sections at the height they were
   Both sections gained height on a phone from the checklist foot, the filled
   cards and the position marks.  This block gives it back without taking
   anything out: tighter foot, tighter rows, marks closer to the cards.
   ========================================================================== */
@media (max-width: 860px){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-step{ padding-top:18px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li{ margin-top:14px; padding:14px 19px 16px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li{ padding-top:7px; padding-bottom:7px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-li li::after{ top:calc(7px + .2em); }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8 .w8-dots{ margin-top:12px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-li li{ padding-top:6px; padding-bottom:6px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-li li::after{ top:calc(6px + .2em); }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-li li i{ font-size:13px; line-height:1.4; margin-top:2px; }
  /* a label with its own detail line does not need a rule between rows too */
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-li li{ box-shadow:none; padding-top:5px; padding-bottom:5px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-li li::after{ top:calc(5px + .2em); }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-li{ padding:12px 19px 14px; }
}


/* ==========================================================================
   WHY CHOOSE US — the three fittings
   ========================================================================== */
/* 1 · the detail line under a label, on the blue foot */
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-li li b{ display:block; }
:is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-li li i{ display:block; margin-top:3px; font-size:13.4px; font-weight:500; line-height:1.45; letter-spacing:0; color:#4A5A70; }
/* 2 · its tabs are categories, so they carry no flow chevron (scoped above to
      .w8--flow, which only Our System's dock has) — nothing to add here.
   3 · "Technical & Campaign Management" is a long name: give the three names
      room between 861 and 1180px so the row still fits on one line */
@media (max-width: 1180px) and (min-width: 861px){
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-tab-n{ font-size:15.5px; letter-spacing:-.02em; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-dock{ gap:2px; }
  :is(#w8-system,#wcu-ga):is(#w8-system,#wcu-ga).w8.wcs .w8-tab{ padding-inline:16px; }
}