:root{
  --ink:#1C1814; --slate:#5C564E; --mute:#877F74; --line:#E8E2DA;
  --orange:#E8501A; --orange-deep:#C23E0E; --orange-soft:#FFF1E8; --orange-line:#F6CDB6;
  --cream:#FBF6F0; --cream-deep:#F5EBDF;
  --dark:#191512; --paper:#FFFFFF; --green:#1E8A5A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body h1,body h2,body h3,body h4,body .display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.12;letter-spacing:-0.015em}
.wrap{max-width:1150px;margin:0 auto;padding:0 24px}
section{padding:96px 0}
section[id]{scroll-margin-top:62px}
.sec-cream{background:var(--cream)}
.accent{color:var(--orange)}
a{color:inherit}

/* ---- section header: eyebrow, h2, one lede line. Nothing else. ---- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);background:var(--paper)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange)}
.h2{font-size:clamp(29px,3.7vw,42px);font-weight:800;margin:18px 0 0}
.lede{font-size:clamp(16.5px,1.75vw,19px);line-height:1.68;font-weight:400;color:var(--slate);max-width:62ch;margin-top:13px}
.lede strong{color:var(--ink);font-weight:600}
.sec-head{margin-bottom:44px;padding-bottom:26px;border-bottom:1.5px solid var(--line)}

/* ---- buttons ---- */
.btn{display:inline-block;font-weight:700;font-size:15.5px;border-radius:12px;padding:15px 28px;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.btn-primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(232,80,26,.28)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}

/* ---- callout strip ---- */
.callout{background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:14px;padding:17px 21px;font-size:14.6px;color:var(--ink);line-height:1.72;margin:18px 0}
.callout b{font-weight:700}
.callout.plain{background:var(--cream);border-color:var(--cream-deep)}
.sec-cream .callout.plain{background:var(--paper);border-color:var(--line)}

/* ============ STATS BAND ============
   Shared V2A component, copied verbatim from the live service pages.
   Do not restyle it here and do not rename the classes. */
.stats-band{background:var(--dark)}
.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}
.stat{padding:34px 30px;color:#fff}
.stat:nth-child(even){background:var(--orange)}
.stat .st-num{font-family:'Bricolage Grotesque',sans-serif;font-size:34px;font-weight:800;line-height:1.05}
.stat .st-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:8px}
.stat .st-sub{font-size:12.5px;margin-top:6px;color:rgba(255,255,255,.78);line-height:1.62}

/* ============ JUMP NAV ============ */
/* No horizontal scrolling anywhere on this nav. On desktop it is one sticky
   row. Below 900px it becomes a static grid so every option is visible on
   one screen without swiping sideways. */
.jump{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(9px);border-bottom:1.5px solid var(--line)}
.jump-in{display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.jump a{flex-shrink:1;min-width:0;padding:15px 13px;font-size:13px;font-weight:600;color:var(--slate);text-decoration:none;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s}
.jump a:hover{color:var(--ink);border-bottom-color:var(--orange)}
.jump .j-cta{margin-left:auto;background:var(--orange);color:#fff;border-radius:9px;padding:9px 16px;font-size:13px;font-weight:700;border-bottom:none}
.jump .j-cta:hover{border-bottom-color:transparent;color:#fff}

/* ============ QUOTE BAND ============ */
.quote-band{position:relative;background:var(--dark);color:#fff;padding:84px 0;text-align:center;overflow:hidden}
.quote-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px;opacity:.9}
.quote-band>.wrap{position:relative}
.quote-band .qm{font-family:'Bricolage Grotesque',sans-serif;font-size:60px;font-weight:800;color:var(--orange);line-height:.55;display:block;margin-bottom:16px}
.quote-band h2{font-size:clamp(28px,3.8vw,42px);font-weight:800;max-width:19ch;margin:0 auto 16px;color:#fff}
.quote-band p{color:#C9C2B8;max-width:54ch;margin:0 auto 28px;font-size:16px;line-height:1.75}
.quote-band p strong{color:#fff}
.quote-band cite{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#9A9288;margin-bottom:26px}

/* ============ FAQ ============ */
.qgroup{margin-bottom:26px}
.qgroup>h3{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding-bottom:9px;border-bottom:1.5px solid var(--line);font-family:'Inter',sans-serif}
.qflow{display:flex;flex-direction:column;gap:9px}
.qitem{background:var(--paper);border:1.5px solid var(--line);border-radius:14px;padding:17px 21px;transition:border-color .3s,box-shadow .3s,opacity .3s}
.qitem-head{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer}
.qitem-head h3{font-size:15.6px;font-weight:700;margin:0;color:var(--ink);line-height:1.4}
.qitem-mark{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);position:relative;transition:border-color .3s,background .3s}
.qitem-mark::before,.qitem-mark::after{content:"";position:absolute;background:var(--slate);transition:background .3s,transform .3s}
.qitem-mark::before{left:5px;right:5px;top:9px;height:2px}
.qitem-mark::after{top:5px;bottom:5px;left:9px;width:2px}
.qitem-body{max-height:1400px;overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .35s}
.qitem-body p{color:var(--slate);font-size:14.6px;margin:14px 0 0;line-height:1.8;max-width:76ch}
.qitem-body p+p{margin-top:11px}
.qitem-body p strong{color:var(--ink)}
.qitem-body p.pts{color:var(--ink);font-size:14.2px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:12px;padding:12px 15px;line-height:1.7}
.qitem-body p a{color:var(--orange-deep);font-weight:700;text-decoration:none}
.qitem-body p a:hover{text-decoration:underline}
.qflow-js .qitem{opacity:.72}
.qflow-js .qitem .qitem-body{max-height:0;opacity:0}
.qflow-js .qitem.active{opacity:1;border-color:var(--orange);box-shadow:0 14px 32px rgba(232,80,26,.1)}
.qflow-js .qitem.active .qitem-mark{border-color:var(--orange);background:var(--orange)}
.qflow-js .qitem.active .qitem-mark::before,.qflow-js .qitem.active .qitem-mark::after{background:#fff}
.qflow-js .qitem.active .qitem-mark::after{transform:rotate(90deg)}
.qflow-js .qitem.active .qitem-body{max-height:1400px;opacity:1}

/* ============ CONTACT ============ */
.cta-band{position:relative;background:var(--dark);color:#fff;padding:96px 0;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px}
.cta-grid{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.cta-band .eyebrow{background:transparent;border-color:#3A332C;color:#F1A07E}
.cta-band h2{font-size:clamp(29px,3.9vw,44px);margin:18px 0 14px;font-weight:800;color:#fff}
.cta-band h2 .accent{color:var(--orange)}
.cta-band .cta-sub{color:#C9C2B8;max-width:54ch;margin-bottom:24px;font-size:16px;line-height:1.75}
.cta-band .cta-sub strong{color:#fff}
.cta-list{list-style:none;margin-bottom:22px}
.cta-list li{position:relative;padding:8px 0 8px 30px;font-size:15px;color:#E8E2DA;line-height:1.65}
.cta-list li::before{content:"\2713";position:absolute;left:0;top:9px;width:20px;height:20px;border-radius:6px;background:rgba(232,80,26,.18);border:1.5px solid var(--orange);color:#F1A07E;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.cta-micro{font-size:13px;color:#9A9288;margin-top:18px;line-height:1.7}
.cta-micro a{color:#F1A07E;font-weight:700;text-decoration:none}
.cta-micro a:hover{text-decoration:underline}
.form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.32)}
.form-card h3{font-size:20px;font-weight:800;margin-bottom:6px}
.form-card .fc-sub{font-size:13.5px;color:var(--slate);margin-bottom:20px;line-height:1.6}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.f-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.f-field input,.f-field select,.f-field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-family:'Inter';font-size:14px;background:var(--cream);color:var(--ink)}
.f-field textarea{min-height:84px;resize:vertical}
.f-help{font-size:11.5px;color:var(--mute);margin-top:5px;line-height:1.55}
.form-card .btn{width:100%;text-align:center;margin-top:6px}
.form-note{text-align:center;font-size:12px;color:var(--mute);margin-top:12px;line-height:1.6}

/* footer. Copied from the live homepage so this page ends exactly as every
   other V2A page does: cream ground under the dark contact band, orange
   top rule, four column nav, ghost wordmark. Do not restyle it here. */
.ft{background:var(--cream);color:var(--slate);border-top:3px solid var(--orange);position:relative;overflow:hidden}
.ft-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:64px;align-items:end;padding:80px 0 60px}
.ft-say{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.042em;line-height:1.02;font-size:clamp(1.9rem,4vw,3.15rem);color:var(--ink);max-width:14ch;margin:0}
.ft-say em{font-style:normal;color:var(--orange)}
.ft-line{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.32rem,2.5vw,1.95rem);letter-spacing:-.042em;color:var(--ink);line-height:1.1;margin:0;max-width:19ch;background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:22px;padding:30px 32px 32px}
.ft-line em{font-style:normal;color:var(--orange);display:block}
.ft-line::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--orange);margin-bottom:16px}
.ft-em{display:inline-flex;align-items:center;gap:7px}
.ft-em a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--orange)}
.ft-em a:hover{color:var(--orange-deep)}
.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;padding:52px 0 56px;border-top:1.5px solid var(--cream-deep)}
.ft h4{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:'Bricolage Grotesque',sans-serif;font-size:.98rem;font-weight:700;letter-spacing:-.022em;text-transform:none;margin-bottom:22px;padding:0;border:0}
.ft h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}
.ft ul{list-style:none}
.ft li{margin-bottom:13px}
.ft-nav a{display:inline-block;font-size:.94rem;color:var(--slate);text-decoration:none;transition:color .2s,transform .2s}
.ft-nav a:hover{color:var(--orange-deep);transform:translateX(4px)}
.ft-base{border-top:1.5px solid var(--cream-deep);padding:24px 0;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--mute);position:relative;z-index:2}
.ft-base a{color:var(--mute);text-decoration:none}
.ft-base a:hover{color:var(--ink)}
.soc{display:flex;gap:9px}
.soc a{width:38px;height:38px;border:1.5px solid var(--cream-deep);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--slate);background:#fff;transition:all .2s}
.soc a:hover{border-color:var(--orange);color:#fff;background:var(--orange)}
.soc svg{width:17px;height:17px;fill:currentColor;display:block}
.ft-mark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.055em;font-size:clamp(3.6rem,15.5vw,13rem);line-height:.78;color:var(--cream-deep);white-space:nowrap;user-select:none;padding-bottom:.06em;margin-top:14px;overflow:hidden}

/* ============ SHARED RESPONSIVE ============ */
@media(max-width:880px){
  .cta-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  section{padding:66px 0}
}
@media(max-width:640px){
  .f-row{grid-template-columns:1fr}
}
/* ============================================================
   ADDITIONS FOR THE META ADS MANAGEMENT PAGE
   Everything above this line is the shared V2A stylesheet, copied
   verbatim from the live Google Ads page. Everything below is
   either reused component vocabulary or new to this page.
   NEW ON THIS PAGE ONLY: .mcards (the hero creative fan) and .loop
   (the creative testing section). Everything else is shared.
   ============================================================ */

/* ---- hero: text left, the feed ad right ---- */
.hero{position:relative;padding:70px 0 104px;background:linear-gradient(165deg,var(--cream) 0%,#FFF7F2 46%,#fff 100%);overflow:hidden;-webkit-clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px));clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 46px))}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--cream-deep) 1.2px,transparent 1.2px);background-size:24px 24px;opacity:.7;pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:44px;align-items:center}
.hero-grid>*{min-width:0}
/* Capped at 47px so the three written lines stay three lines on a laptop.
   Raising it pushes line two onto a fourth line and the headline loses its
   shape. If the wording changes, re-check at 1280 and 1440. */
.hero h1{font-size:clamp(35px,4.2vw,47px);font-weight:800;margin:22px 0 18px;color:var(--ink)}
.hero .kicker{color:var(--slate);font-size:17.5px;max-width:54ch;margin-bottom:24px;line-height:1.72}
.kicker mark{background:linear-gradient(180deg,transparent 58%,#FFDCC9 58%);color:var(--ink);font-weight:600;padding:0 2px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.hero-ctas .btn{padding:14px 22px;font-size:14.8px;white-space:nowrap}
.hero-terms{display:flex;flex-wrap:wrap;gap:8px}
.hero-terms span{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--cream-deep);background:rgba(255,255,255,.82);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink)}
.hero-terms span::before{content:"\2713";color:var(--orange);font-weight:800;font-size:10px}

/* ============================================================
   HERO VISUAL: THREE CREATIVES, FANNED. ONE IS RUNNING.
   A spread of three vertical Reels-format cards. The two behind are
   pale and hold a faint outline mark each. The one in front is
   raised and alive: a Sponsored tag, an abstract composition in
   orange, and a Learn more button. Three words in the whole drawing.

   WHY IT LOOKS LIKE THIS. Two earlier heroes were rejected here.
     v1  The Figma card. A performance dashboard: a bar chart
         climbing left to right and four metric readouts. Every
         figure on it is invented or unevidenced, and a chart that
         climbs is a results promise whatever the numbers say. It is
         also more text than an ad, not less.
     v2  A single horizontal feed post with a solid orange video
         frame and a white play triangle in the middle. Client
         rejected it on 4 September 2026 as basic, ordinary and not
         elegant, and specifically named the video block. The note
         worth keeping: A BIG FLAT COLOR SLAB WITH A PLAY BUTTON ON
         IT IS THE MOST ORDINARY IMAGE IN PAID SOCIAL. Do not bring
         it back in any form.
     v3  This one.

   WHAT CHANGED AND WHY IT WORKS:
     - Vertical, not horizontal. Reels and Stories format is the
       shape people actually see Meta ads in, and it is a different
       silhouette from the horizontal search result on /google-ads/,
       so the two pages read as siblings rather than one template.
     - Three cards, not one. The fan says creative testing without a
       word of explanation, which is this page's whole argument and
       the subject of the #creative section.
     - Line work carries it, not fill. The rejected version was
       mostly a solid orange rectangle. Here orange is a stroke, one
       small solid disc and one soft tint. The card stays white.
     - Depth does the ranking. The front card is upright, raised and
       detailed; the two behind are rotated, pale and nearly empty.
       That is one dominant element with support, not three
       competing ones.

   HARD RULES:
     - THREE WORDS TOTAL: Sponsored, Learn, more. That is the whole
       budget. No page name, no ad copy line, no headline, no
       caption underneath.
     - NO FIGURES, EVER. No currency value, no percentage, no like,
       view or follower count, no star rating. A number here becomes
       a performance claim we cannot evidence or social proof
       nobody checked. This is why there is no reaction row at all.
     - THE COMPOSITION STAYS ABSTRACT. Two overlapping circles, one
       accent disc, one sweeping arc. Never a photograph, never a
       stock person, never a product, and never a play triangle. A
       recognizable product implies a client we have not named.
     - THE BACK CARDS STAY NEARLY EMPTY. One pale outline mark each
       and nothing else. Give them content and the fan turns into
       three things fighting for attention, which is the failure
       mode the house rules call cheap.
     - THIS DEPICTS OUR OWN CREATIVE, NOT A RESULT. Never add a
       placement claim, a competitor name, "top of feed", a ranking
       or anything that reads as a delivery promise.
     - Everything fades in in sequence IN PLACE and stays. Nothing
       drifts, travels, pulses or loops. There is no looping
       animation on this page at all now, which is why the
       reduced-motion block only has to switch the fades off.
     - Re-check at 1440 and at 320, where it renders about 285px
       wide. The fan spans x 38 to 386 inside a 424 viewBox, so it
       has margin on both sides at every width.
   One inline SVG, no image assets. Classes are .mcards and below.
   ============================================================ */
.hstage{position:relative;min-width:0}
.mcards{position:relative;width:100%;max-width:482px;margin:0 auto}
.mcards svg{display:block;width:100%;height:auto}
.mcards .fade{opacity:0;animation:mcIn .5s ease-out forwards}
@keyframes mcIn{to{opacity:1}}
.mcards text{font-family:'Inter',system-ui,sans-serif}
/* the two creatives waiting their turn */
/* stroke is deliberately stronger than --cream-deep: the hero sits on a
   cream to white wash, and at --cream-deep these two cards disappeared
   into the background and the fan stopped reading as three things. */
.mcards .back{fill:var(--paper);stroke:#EBDFD1;stroke-width:1.5;filter:url(#mcSoft)}
/* the one that is running */
.mcards .front{fill:var(--paper);stroke:var(--orange-line);stroke-width:1.5;filter:url(#mcShadow)}
.mcards .tag{fill:var(--orange-soft);stroke:var(--orange-line);stroke-width:1.3}
.mcards .t-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;fill:var(--orange-deep);text-anchor:middle}
/* the composition: one shape, three turns. Orange is a stroke, one soft
   tint and one small accent disc. Never a solid slab. */
.mcards .lay3{fill:var(--orange-soft);stroke:none}
.mcards .lay2{fill:none;stroke:#EFA07C;stroke-width:1.7}
.mcards .lay1{fill:none;stroke:var(--orange);stroke-width:2.2}
.mcards .btn-pill{fill:var(--orange)}
.mcards .t-btn{font-size:12.5px;font-weight:700;fill:#fff;text-anchor:middle}

/* ---- #creative: the testing loop, then what we read on every asset ----
   NEW COMPONENT, not on any other V2A page. The four other pages in
   the paid set all explain process as a numbered rail of cards. This
   one is a loop with a readout panel beside it, because the thing
   being described genuinely is a loop: an asset either earns more
   budget or it gets cut, and then the cycle runs again.
   The right panel is where the operational nouns live. Keep it to
   metrics that are visible in Ads Manager, so every chip is
   checkable. Never put a target value on a chip. "Hook rate" is a
   thing we read. "Hook rate above 30%" is a promise. ---- */
/* align-items is stretch, not start: the dark panel is shorter than the
   four steps beside it, and left to size itself it floats halfway up the
   section with dead cream underneath. Stretched it reads as the anchor
   the section is built against. */
.loop{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:34px;align-items:stretch}
.lsteps{position:relative;padding-left:6px}
.lstep{position:relative;padding:0 0 26px 52px}
.lstep:last-child{padding-bottom:0}
.lstep::before{content:"";position:absolute;left:17px;top:34px;bottom:-4px;width:1.5px;background:var(--orange-line)}
.lstep:last-child::before{display:none}
.lstep i{position:absolute;left:0;top:0;width:35px;height:35px;border-radius:11px;background:var(--orange-soft);border:1.5px solid var(--orange-line);color:var(--orange-deep);font-family:'Bricolage Grotesque',sans-serif;font-style:normal;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.lstep b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:700;letter-spacing:-.015em;margin:5px 0 7px}
.lstep p{font-size:15.2px;color:var(--slate);line-height:1.68}
.lread{background:var(--dark);border-radius:20px;padding:32px 30px 30px;color:#fff;position:relative;overflow:hidden}
.lread::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:22px 22px;opacity:.9}
.lread>*{position:relative}
.lread em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.lread b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:700;line-height:1.24;margin-bottom:16px}
.lread ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.lread li{border:1.5px solid rgba(255,255,255,.2);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600;color:#F1EBE4}
.lread p{font-size:14.6px;color:#C9C2B8;line-height:1.68}
.lread p strong{color:#fff;font-weight:600}
/* ---- #basics: one definition panel, then three short cards ---- */
/* The definition panel is written to be lifted whole as a standalone
   answer, so it must stay complete without the heading above it. The
   right rail carries the alternate names for the same service, which is
   what lets an assistant match this page to a differently worded
   question. Do not delete the rail to save space. */
.defq{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:38px;align-items:start;background:var(--paper);border:1.5px solid var(--line);border-left:5px solid var(--orange);border-radius:20px;padding:38px 42px 34px;box-shadow:0 18px 46px rgba(28,24,20,.06)}
.defq .qmark{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:52px;font-weight:800;color:var(--orange-line);line-height:.5;margin-bottom:20px;pointer-events:none}
.defq p{position:relative;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.3vw,25px);font-weight:600;letter-spacing:-.018em;line-height:1.42;color:var(--ink);max-width:46ch}
.defq em{position:relative;display:block;font-style:normal;margin-top:18px;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);font-family:'Inter',sans-serif}
.defq .also{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:20px 20px 16px}
.defq .also strong{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.defq .also ul{list-style:none}
.defq .also li{font-size:14.2px;font-weight:600;color:var(--ink);line-height:1.45;padding:8px 0;border-bottom:1px solid var(--cream-deep)}
.defq .also li:last-child{border-bottom:none}
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.tri{background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 26px 24px;transition:border-color .2s,transform .2s,box-shadow .2s}
.tri:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 16px 34px rgba(232,80,26,.1)}
.tri span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:11px}
.tri h3{font-size:19px;margin-bottom:9px;line-height:1.26}
.tri p{font-size:15px;color:var(--slate);line-height:1.68}
.updoor{margin-top:18px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:20px 24px;font-size:15px;color:var(--slate);line-height:1.72}
.sec-cream .updoor{background:var(--paper);border-color:var(--line)}
.updoor strong{color:var(--ink);font-weight:600}
.updoor a{color:var(--orange-deep);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--orange-line)}
.updoor a:hover{border-bottom-color:var(--orange)}

/* ---- #leaks: four problem and fix cards, then a dark closing panel ---- */
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.reason{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:32px 30px 30px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.sec-cream .reason{background:var(--paper)}
.reason:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 16px 34px rgba(232,80,26,.1)}
.reason .gn{position:absolute;right:18px;top:4px;font-family:'Bricolage Grotesque',sans-serif;font-size:82px;font-weight:800;color:var(--cream);line-height:1;pointer-events:none;transition:color .2s}
.reason:hover .gn{color:var(--orange-soft)}
.reason .n{position:relative;display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;font-weight:800;color:var(--orange-deep);letter-spacing:.13em;text-transform:uppercase;margin-bottom:12px}
.reason h3{position:relative;font-size:22px;margin-bottom:14px;max-width:24ch}
.reason .pf{position:relative;padding-top:14px;border-top:1.5px solid var(--line)}
.reason .pf+.pf{margin-top:12px}
.reason .pf em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.reason .pf.fix em{color:var(--orange-deep)}
.reason .pf p{font-size:15px;color:var(--slate);line-height:1.7;max-width:52ch}
.reason .pf.fix p{color:var(--ink)}
.burn{position:relative;margin-top:26px;background:var(--dark);border-radius:22px;padding:44px 46px;color:#fff;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;overflow:hidden}
.burn::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#241E19 1.3px,transparent 1.3px);background-size:24px 24px}
.burn>*{position:relative}
.burn .display{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.1}
.burn .display em{font-style:normal;color:var(--orange)}
.burn p{font-size:16.5px;color:#C9C2B8;line-height:1.75;max-width:40ch}
.burn p strong{color:#fff}
.burn .btn-ghost{border-color:#5A5049;color:#fff;margin-top:18px}
.burn .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---- #surfaces: six campaign type cards ----
   Each card is a liftable definition: an H3 naming the campaign type,
   one "strongest when" line, and one short paragraph. That shape is
   what gets a single card retrieved as an answer to "what is
   Performance Max campaign management". Keep it. Do not merge two
   cards into one to save vertical space. */
.surf{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.scard{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:30px 28px 26px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.sec-cream .scard{background:var(--paper)}
.scard:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 18px 38px rgba(232,80,26,.1)}
.scard .glyph{position:absolute;right:-18px;top:-18px;width:104px;height:104px;border-radius:50%;background:var(--cream);pointer-events:none;transition:background .2s}
.scard:hover .glyph{background:var(--orange-soft)}
.scard .ic{position:relative;width:44px;height:44px;border-radius:13px;background:var(--orange-soft);border:1.5px solid var(--orange-line);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .2s,border-color .2s}
.scard:hover .ic{background:var(--orange);border-color:var(--orange)}
.scard .ic svg{width:21px;height:21px;fill:none;stroke:var(--orange-deep);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.scard:hover .ic svg{stroke:#fff}
.scard h3{position:relative;font-size:19.5px;margin-bottom:12px;line-height:1.26;max-width:20ch}
.scard .when{position:relative;display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
.scard .cond{position:relative;display:block;font-size:14.6px;font-weight:600;color:var(--ink);line-height:1.5;padding-bottom:13px;margin-bottom:13px;border-bottom:1.5px solid var(--line)}
.scard p{position:relative;font-size:15px;color:var(--slate);line-height:1.7}
.beyond{margin-top:20px;background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:16px;padding:20px 24px;font-size:15px;color:var(--slate);line-height:1.72}
.sec-cream .beyond{background:var(--paper);border-color:var(--line)}
.beyond strong{color:var(--ink);font-weight:600}
.beyond a{color:var(--orange-deep);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--orange-line)}
.beyond a:hover{border-bottom-color:var(--orange)}

/* ---- #approach: five cards on a numbered rail ----
   The content doc had five long paragraphs here. Long copy in a box is
   the one thing nobody reads, so each item is now a heading, one short
   paragraph and three chips. If a future edit puts a paragraph of four
   sentences back into an .apx card, this section has broken the brief. */
.apx-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.apx{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:20px;padding:30px 30px 26px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.sec-cream .apx{background:var(--paper)}
.apx:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 18px 38px rgba(232,80,26,.1)}
.apx .gn{position:absolute;right:16px;top:2px;font-family:'Bricolage Grotesque',sans-serif;font-size:76px;font-weight:800;color:var(--cream);line-height:1;pointer-events:none;transition:color .2s}
.apx:hover .gn{color:var(--orange-soft)}
.apx h3{position:relative;font-size:20px;margin-bottom:11px;line-height:1.26;max-width:24ch}
.apx p{position:relative;font-size:15px;color:var(--slate);line-height:1.7;max-width:50ch}
.apx .chips{position:relative;display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;padding-top:15px;border-top:1.5px solid var(--line)}
.apx .chips b{display:inline-flex;align-items:center;gap:6px;font-size:12.8px;font-weight:700;color:var(--orange-deep);background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:999px;padding:5px 12px;line-height:1.35}
.apx .chips b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.apx.wide{grid-column:1 / -1}
.apx.wide p{max-width:66ch}

/* ---- #fit: who it works for, who it does not ---- */
.fit{border:1.5px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 18px 46px rgba(28,24,20,.06);overflow:hidden}
.fit-row{display:grid;grid-template-columns:1fr 1fr}
.fit-row>div{padding:30px 32px 28px}
.fit-row>div:first-child{border-right:1.5px solid var(--line);background:#FFFAF6}
.fit-row>div:last-child{background:var(--cream)}
.fit-row em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:7px}
.fit-row>div:last-child em{color:var(--mute)}
.fit-row b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin-bottom:18px}
.fit-row ul{list-style:none}
.fit-row li{position:relative;padding:10px 0 10px 30px;font-size:15px;color:var(--slate);line-height:1.6;border-bottom:1px solid var(--cream-deep)}
.fit-row li:last-child{border-bottom:none}
.fit-row>div:first-child li::before{content:"\2713";position:absolute;left:0;top:11px;width:20px;height:20px;border-radius:6px;background:var(--orange);color:#fff;font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.fit-row>div:last-child li::before{content:"";position:absolute;left:0;top:19px;width:15px;height:2.5px;border-radius:2px;background:#C9BCAC}
.fit-tail{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--ink);padding:26px 32px;color:#fff}
.fit-tail b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(18px,2.1vw,22px);font-weight:800;letter-spacing:-.015em;max-width:38ch;line-height:1.3}
.fit-tail b em{font-style:normal;color:var(--orange)}
.fit-tail .btn-ghost{border-color:#5A5049;color:#fff;white-space:nowrap}
.fit-tail .btn-ghost:hover{background:#fff;color:var(--ink)}
/* the one routing strip for agency readers. Two mentions on the page in
   total, this and one FAQ. Do not add a third. */
.route{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:18px;padding:24px 30px}
.route b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(18px,2.1vw,22px);font-weight:800;letter-spacing:-.015em;max-width:42ch;line-height:1.3;color:var(--ink)}
.route b em{font-style:normal;color:var(--orange-deep)}
.route a{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:14.6px;font-weight:800;color:#fff;background:var(--orange);text-decoration:none;border-radius:12px;padding:13px 22px;transition:background .18s}
.route a:hover{background:var(--orange-deep)}

/* ---- #cost: the fee timeline, then three reasons there is no price list ----
   CRITICAL, DO NOT BREAK THIS: nothing here may imply the management fee
   stays the same figure while the ad budget grows. It does not. The
   wording lives in three places and all three must stay in sync: the
   .fee-base bar, the third .why card, and the cost FAQ answer. */
.fee{border:1.5px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 18px 46px rgba(28,24,20,.06);overflow:hidden}
.fee-row{display:grid;grid-template-columns:.92fr 1fr 1fr;border-bottom:1.5px solid var(--line)}
.fee-row>div{padding:24px 26px}
.fee-row>div:first-child{background:var(--cream);border-right:1.5px solid var(--line)}
.fee-row>div:nth-child(3){border-left:1.5px solid var(--line)}
.fee-head>div{padding:15px 26px!important;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.fee-head>div:first-child{background:var(--paper)!important}
.fee-head>div:last-child{background:#FFFAF6;color:var(--orange-deep)}
.fee-row>div:last-child{background:#FFFAF6}
.fee-when{font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--ink);line-height:1.25;display:block}
.fee-when small{display:block;font-family:'Inter',sans-serif;font-size:13.5px;font-weight:500;color:var(--slate);line-height:1.55;margin-top:7px}
.fee-chips{display:flex;flex-wrap:wrap;gap:8px}
.fee-chips b{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 15px;font-size:14px;font-weight:700;line-height:1.3}
.fee-chips b::before{content:"";width:8px;height:8px;border-radius:2px;flex:none}
.fc-set{background:var(--orange);color:#fff}
.fc-set::before{background:#fff}
.fc-mg{background:var(--paper);border:1.5px solid var(--orange-line);color:var(--orange-deep)}
.fc-mg::before{background:var(--orange);border-radius:50%}
.fc-no{background:var(--cream);border:1.5px solid var(--cream-deep);color:var(--mute)}
.fc-no::before{width:12px;height:2.5px;background:#C9BCAC;border-radius:2px}
.fee-base{display:flex;align-items:flex-start;gap:14px;padding:22px 26px;background:var(--ink);color:#fff;font-size:15.5px;line-height:1.65}
.fee-base::before{content:"";flex:none;margin-top:6px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.fee-base strong{color:#fff;font-weight:700}
.fee-base span{color:#C9C2B8}
.fee-lab{display:none}

/* the three reasons there is no published price. Short cards, not prose. */
.why{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why>div{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:26px 24px 24px;overflow:hidden}
.sec-cream .why>div{background:var(--paper)}
.why .gn{position:absolute;right:14px;top:2px;font-family:'Bricolage Grotesque',sans-serif;font-size:70px;font-weight:800;color:var(--cream);line-height:1;pointer-events:none}
.why b{position:relative;display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.25;margin-bottom:10px;max-width:20ch}
.why p{position:relative;font-size:15px;color:var(--slate);line-height:1.7}
.at-cost{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:var(--ink);border-radius:18px;padding:26px 32px;color:#fff}
.at-cost b{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.2vw,23px);font-weight:800;letter-spacing:-.015em;max-width:34ch;line-height:1.25}
.at-cost b em{font-style:normal;color:var(--orange)}
.at-cost .btn-ghost{border-color:#5A5049;color:#fff;white-space:nowrap}
.at-cost .btn-ghost:hover{background:#fff;color:var(--ink)}

/* ---- what sits OUTSIDE the management fee ----
   Added 4 September 2026 at the client's request, because it was
   missing and it is the most common source of an awkward
   conversation three months in: the reader assumes a landing page
   build was inside the fee. The three items match the same statement
   on /ppc-advertising/ word for word. Do not add a fourth without
   checking it against how the work is actually billed, and do not
   list Merchant Center feed work here, because #surfaces says feed
   fixes happen inside the fee.
   Keep this in sync with the "does Google Ads management include
   building landing pages" FAQ answer. */
.outside{margin-top:18px;background:var(--paper);border:1.5px solid var(--line);border-left:5px solid var(--orange);border-radius:20px;padding:28px 32px 26px}
.sec-cream .outside{background:var(--paper)}
.outside em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:8px}
.outside b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.2vw,23px);font-weight:800;letter-spacing:-.015em;line-height:1.25;color:var(--ink);margin-bottom:18px;max-width:34ch}
.ochips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:4px}
.ochips span{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--cream-deep);background:var(--cream);border-radius:999px;padding:9px 17px 9px 14px;font-size:14.2px;font-weight:600;color:var(--ink);line-height:1.35}
.ochips span::before{content:"";flex:none;width:13px;height:2.5px;border-radius:2px;background:#C9BCAC}
.outside p{font-size:15px;color:var(--slate);line-height:1.72;max-width:70ch;margin-top:20px;padding-top:17px;border-top:1.5px solid var(--line)}
.outside p strong{color:var(--ink);font-weight:600}

/* ---- the ordered start band. NO WEEK LABELS. See developer note 6. ---- */
.start{position:relative;background:linear-gradient(135deg,var(--orange) 0%,var(--orange-deep) 100%);color:#fff;padding:74px 0;overflow:hidden}
.start::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.13) 1.3px,transparent 1.3px);background-size:24px 24px}
.start>.wrap{position:relative}
.start .lab{display:block;font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:12px}
.start h2{font-size:clamp(27px,3.4vw,38px);font-weight:800;max-width:24ch;margin-bottom:36px;color:#fff}
.steps3{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.st3{background:rgba(255,255,255,.11);border:1.5px solid rgba(255,255,255,.28);border-radius:18px;padding:26px 24px 24px}
.st3 i{font-style:normal;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:#fff;color:var(--orange-deep);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;margin-bottom:16px}
.st3 b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:18.5px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px;line-height:1.25}
.st3 p{font-size:14.8px;color:rgba(255,255,255,.88);line-height:1.66}
.start .go{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.start .btn{background:#fff;color:var(--orange-deep);box-shadow:0 10px 26px rgba(0,0,0,.18);white-space:nowrap}
.start .go span{font-size:15px;color:rgba(255,255,255,.86);line-height:1.6}

/* ============================================================
   RESPONSIVE. Checked at 1440, 1280, 1024, 834, 768, 430, 414,
   393, 390, 375, 360 and 320. Nothing on this page may scroll
   sideways at any of them: the only scroll direction is up and
   down. Breakpoints run large to small so each one only overrides
   what the one above it left wrong.
   ============================================================ */

/* Nothing is allowed to push the page wider than the viewport.

   THE OVERFLOW GUARD IS ON html ONLY. DO NOT ADD overflow-x TO body.
   Found and fixed 4 September 2026. The other V2A pages carry
   "html,body{max-width:100%;overflow-x:hidden}". Putting overflow-x
   on BODY turns body into its own scroll container, and a
   position:sticky element whose containing block is that scroll
   container has nothing to stick to, so it silently scrolls away with
   the page. Measured in Chromium at 1440, 390 and 320: with the rule
   on both elements the jump nav never pins, at any width. With it on
   html alone the nav pins at all three and horizontal overflow is
   still zero.

   THIS BUG IS LIVE ON THE OTHER PAGES TOO. /google-ads/ and
   /ppc-advertising/ both carry the two element version, so their
   sticky jump navs are not actually sticking on desktop either.
   Worth fixing there in the same pass. overflow-x:clip on body also
   works if a future page needs it, because clip does not create a
   scroll container, but hidden on html alone is the version with
   universal browser support. */
html{max-width:100%;overflow-x:hidden}
body{max-width:100%}
img,svg,table{max-width:100%}
.wrap{width:100%}

/* ---- laptop and small desktop ---- */
@media(max-width:1180px){
  .surf{grid-template-columns:repeat(2,1fr)}
  .fee-row>div{padding:20px 22px}
}

/* ---- large tablet, landscape iPad ---- */
@media(max-width:1080px){
  section{padding:80px 0}
  .why{grid-template-columns:1fr}
  .burn{padding:36px 34px;gap:28px}
  .mcards{max-width:398px}
  .triad{grid-template-columns:1fr}
  .defq{padding:32px 34px 30px}
  .steps3{grid-template-columns:1fr 1fr}
  .loop{grid-template-columns:1fr;gap:30px}
}

/* ---- tablet portrait. The point every two column layout collapses. ---- */
@media(max-width:900px){
  .hero{padding:56px 0 74px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hstage{margin-top:4px}
  .mcards{max-width:406px}
  .reasons{grid-template-columns:1fr}
  .surf{grid-template-columns:1fr 1fr}
  .burn{grid-template-columns:1fr;padding:32px 26px}
  .cta-grid{grid-template-columns:1fr;gap:34px}
  .at-cost,.route,.fit-tail{padding:24px 26px}
  .defq{grid-template-columns:1fr;gap:26px}
  .defq p{max-width:100%}

  /* the fit panel and the fee timeline both stack into labeled blocks.
     Without this their second column sits off the right edge of a phone. */
  .fit{box-shadow:none}
  .fit-row{grid-template-columns:1fr}
  .fit-row>div:first-child{border-right:none;border-bottom:1.5px solid var(--orange-line)}
  .fee{box-shadow:none}
  .fee-row{grid-template-columns:1fr;border-bottom-width:6px;border-bottom-color:var(--cream)}
  .fee-row>div{padding:16px 24px}
  .fee-row>div:first-child{border-right:none;padding:22px 24px 10px;background:var(--paper)}
  .fee-row>div:nth-child(3){border-left:none}
  .fee-row>div:last-child{background:var(--paper);border-top:1.5px solid var(--orange-line);padding-bottom:22px}
  .fee-head{display:none}
  .fee-lab{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
  .fee-row>div:last-child .fee-lab{color:var(--orange-deep)}

  /* ---- THE JUMP NAV STAYS STICKY ON PHONES. See developer note 11.
     This is the one deliberate difference from /google-ads/, which
     drops the nav to position:static below this width. The client
     asked for a menu that stays reachable however far down the page
     you are, on every device.
     It becomes a two row grid of six so every option is visible at
     once and NOTHING SWIPES SIDEWAYS. Do not turn this back into a
     flex row: a horizontal scroller is the exact thing being
     designed out.
     The .j-cta is hidden here on purpose. Seven items do not divide
     into three columns, and the bar has to stay short enough to
     leave the page readable. Six other calls to action are on the
     page already.
     Selector is .jump .jump-in, not .jump-in. This element also
     carries .wrap, and the .wrap{padding:0 18px} shorthand in the
     phone block below is a later rule of equal specificity, so a
     weaker selector loses its vertical padding and the first row of
     buttons sits flush against the stats band. Do not weaken it. ---- */
  .jump{box-shadow:0 6px 18px rgba(28,24,20,.06)}
  /* TWELVE COLUMN GRID, TWO ROWS, SEVEN ITEMS INCLUDING THE CTA.
     Restored 4 September 2026. An earlier version hid .j-cta below
     900px to keep the bar short, and the client spotted the missing
     button on a phone straight away. Making it a seventh full-width
     row would have pushed the sticky bar past 120px, so instead the
     row is divided unevenly: the three long labels take four columns
     each on row one, then row two is Creative 3, The money 4, FAQ 2
     and the CTA 3. Twelve either way, two rows either way, and the
     bar stays at 93px with the button on it.
     THE SPANS ARE NOT EVEN BECAUSE THE LABELS ARE NOT. "The money"
     needs four columns and "FAQ" needs two. An even 3/3/2/4 split
     was measured first and wrapped "The money" onto two lines at
     375px, which added 16px to a bar that is pinned to the top of
     every screen. Do not tidy these back to equal spans.
     IF YOU ADD OR RENAME A LINK, re-do this arithmetic. The spans
     are positional, so inserting a link shifts every one of them,
     and each row still has to total twelve. */
  /* HORIZONTAL PADDING MUST BE STATED HERE, NOT INHERITED. This element
     also carries .wrap, but .wrap sets padding with a shorthand and so
     does this rule, so whichever lands later wins the WHOLE property.
     Writing "padding:9px 0" therefore zeroed the side padding and the
     chips ran flush to both screen edges while every other section on
     the page stayed inset. Keep the side value in sync with .wrap at
     every breakpoint: 24px here, 18px below 480, 15px below 360. */
  .jump .jump-in{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;padding:9px 24px;flex-wrap:wrap}
  .jump a{grid-column:span 4;padding:8px 5px;text-align:center;border:1.5px solid var(--line);border-radius:10px;font-size:12.5px;white-space:normal;line-height:1.26;border-bottom-width:1.5px;display:flex;align-items:center;justify-content:center;min-height:34px}
  .jump a:hover{border-color:var(--orange);border-bottom-color:var(--orange)}
  .jump a:nth-child(4){grid-column:span 3}   /* Creative  */
  .jump a:nth-child(5){grid-column:span 4}   /* The money */
  .jump a:nth-child(6){grid-column:span 2}   /* FAQ       */
  .jump .j-cta{display:flex;align-items:center;justify-content:center;grid-column:span 3;margin-left:0;border:1.5px solid var(--orange);border-radius:10px;padding:8px 5px;font-size:12.5px;min-height:34px}
  .jump .j-cta:hover{border-color:var(--orange-deep)}
  /* the sticky bar measures about 93px here, so anchored sections have to
     clear it or every jump lands with its heading hidden underneath. If
     the bar height changes, change this in the same edit. */
  section[id]{scroll-margin-top:100px}

  /* footer */
  .ft-top{grid-template-columns:1fr;gap:36px;align-items:start;padding:60px 0 44px}
  .ft-line{max-width:100%}
  .ft-nav{grid-template-columns:repeat(2,1fr);gap:32px;padding:44px 0 46px}
}

/* ---- large phones and small tablets ---- */
@media(max-width:680px){
  section{padding:60px 0}
  .surf{grid-template-columns:1fr}
  .steps3{grid-template-columns:1fr}
  .reason{padding:28px 24px}
  .reason h3{max-width:100%}
  .reason .gn{font-size:64px;right:14px}
  .f-row{grid-template-columns:1fr}
  .form-card{padding:26px 22px}
  .cta-band{padding:70px 0}
  .quote-band{padding:66px 0}
  .start{padding:60px 0}
  .at-cost,.route,.fit-tail{flex-direction:column;align-items:flex-start;gap:18px}
  .at-cost .btn,.route a,.fit-tail .btn{width:100%;text-align:center;justify-content:center}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:26px 22px}
  .stat .st-num{font-size:29px}
  .why>div{padding:26px 24px}
  .fit-row>div{padding:26px 24px 24px}
  .fee-base{padding:20px 22px;font-size:15px}
  .scard{padding:28px 24px 24px}
  .scard h3{max-width:100%}
  .lread{padding:28px 24px 26px}
  .lstep{padding-left:46px}
  .ft-base{justify-content:flex-start;gap:14px}
}

/* ---- phones. iPhone SE, 12, 13, 14, 15, 17, Galaxy S and A series. ---- */
@media(max-width:480px){
  .wrap{padding:0 18px}
  .jump .jump-in{padding:9px 18px}   /* stays level with .wrap above */
  /* type drops a step once .wrap narrows to 18px: the chips lose 36px of
     width here and "Where we start" wrapped onto a second line at 390px,
     which added 16px to a bar pinned to the top of every screen. */
  .jump a,.jump .j-cta{font-size:11.8px;padding:8px 3px}
  section{padding:52px 0}
  .hero{padding:44px 0 62px}
  .hero h1{font-size:clamp(29px,8.2vw,37px)}
  .hero .kicker{font-size:16px}
  .hero-ctas{gap:10px}
  .hero-ctas .btn{width:100%;text-align:center}
  .hero-terms span{font-size:12.4px;padding:6px 12px}

  .h2{font-size:clamp(25px,7.2vw,31px)}
  .lede{font-size:16px}
  .sec-head{margin-bottom:32px;padding-bottom:20px}
  .defq{padding:26px 24px 24px;border-left-width:4px}
  .defq .qmark{font-size:42px;margin-bottom:16px}
  .burn{padding:28px 22px}
  .burn .display{font-size:clamp(25px,7.4vw,31px)}
  .why b{font-size:18px}
  .fee-when{font-size:17px}
  .fee-chips b{font-size:13.4px;padding:7px 13px}
  .fit-row b{font-size:19px}
  .st3{padding:22px 22px 20px}
  .start h2{font-size:clamp(24px,7vw,30px);margin-bottom:26px}
  .start .go{gap:14px}
  .start .btn{width:100%;text-align:center}
  .quote-band h2{font-size:clamp(25px,7.2vw,31px)}
  .quote-band .btn{width:100%;text-align:center}
  .cta-band h2{font-size:clamp(26px,7.4vw,32px)}
  .qitem{padding:15px 17px}
  .qitem-head h3{font-size:15px}
  .qgroup>h3{font-size:11.5px}
  .stat{padding:22px 18px}
  .lstep b{font-size:18px}
  .lread b{font-size:19px}
  .ft-top{padding:48px 0 38px}
  .ft-nav{grid-template-columns:1fr;gap:26px;padding:36px 0 40px}
  .ft-line{padding:24px 24px 26px}
}

/* Micro-labels sit near 10.8px on desktop, which is fine for wide-tracked
   uppercase on a large screen but tight on a handset. Raise the floor on
   phones. Nothing on this page renders below 11.5px on mobile. */
@media(max-width:900px){
  .fee-head>div,.fee-lab,.fit-row em,.qgroup>h3,.scard .when,.reason .pf em,.tri span,.start .lab,.lread em{font-size:11.5px}
}
@media(max-width:680px){
  .f-help,.form-note{font-size:12.4px}
  .st3 i{font-size:15px}
}

/* ---- narrow phones, 320px class ----
   The nav STAYS at three columns here. An earlier version dropped it to
   two, which turned two rows into three and pushed the sticky bar to
   141px, roughly a sixth of the screen. Shortening the labels was the
   better fix. Three columns holds to 320px because no label is longer
   than "Where we start", which wraps to two lines at that width and
   nothing else does. ---- */
/* The nav type drops a step from 380px rather than 360px, because 375
   is a real device width (iPhone SE and the small iPhone bodies) and
   "The money" was wrapping there at 12.5px. Everything else in this
   block still starts at 360. */
@media(max-width:380px){
  .jump .jump-in{gap:5px}
  .jump a,.jump .j-cta{font-size:11.4px;padding:8px 2px;letter-spacing:-.01em}
}
@media(max-width:360px){
  .wrap{padding:0 15px}
  .stats-grid{grid-template-columns:1fr}
  .jump .jump-in{padding:9px 15px}
  /* 320px CLASS ONLY: "Where we start" takes two lines here and that is
     accepted rather than fixed. Measured: the label needs 91.5px and a
     third of a 320px screen offers 87.3px inside the chip. The ways to
     close a 4px gap were all worse than the gap. Dropping to 10.2px type
     puts the bar below the page's 11px floor and reads as broken on the
     one device class least able to spare legibility. Widening the first
     cell starves "What we run", which needs 72px of the 69px a three
     column span would leave it. A third row costs 30px where the wrap
     costs 11px. So at 320 the bar is 103px instead of 92px, all seven
     options are still on screen, and nothing scrolls sideways. From
     360px up it is a single line everywhere. */
  section[id]{scroll-margin-top:106px}
  .hero h1{font-size:27px}
  .fee-chips b{font-size:13px;padding:7px 11px}
  .lstep{padding-left:42px}
  .lstep i{width:31px;height:31px;font-size:13px}
  .lstep::before{left:15px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mcards .fade{animation:none!important;opacity:1!important}
  .scard,.reason,.tri,.lstep{transition:none}
}