: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 GOOGLE ADS MANAGEMENT PAGE
   Everything above this line is the shared V2A stylesheet.
   Everything below is new to this page.
   ============================================================ */

/* ---- hero: text left, the query fan 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: THE FOUR SHAPES A GOOGLE AD COMES IN.
   Not a screenshot of anything. Four ad formats drawn as objects,
   in their real proportions, composed with depth: the wide search
   ad across the top, the tall display unit down the right, the
   16:9 video across the bottom, and the square shopping ad raised
   in the middle with a Sponsored tag on it. Each one carries a
   fine line-art glyph naming its surface. One word on the whole
   thing.

   WHY THIS IDEA. Google's actual difference from every other paid
   channel is that one budget runs across several completely
   different surfaces at once, which is the thing Performance Max
   exists to do and the thing #surfaces on this page is about. Four
   different frames says that instantly. It does not need our brand
   on it and it does not need to be a picture of a search page.

   EIGHT VERSIONS. Read this before touching it.
     v1  Concentric rings. Already the hero on /ppc-advertising/.
     v2  A fan of rays with numbered badges and a chip key.
     v3  A dark panel with a lit opening and a caption.
     v4  The account as a pruned tree, wordless.
     v5  A search page drawn entirely in gray bars, no text.
     v6  The same search page with the words back, but flat.
     v7  The same search page inside a browser frame with real
         depth and light. The craft was accepted. THE IDEA WAS NOT:
         showing our own ad in a search result was rejected outright
         on 5 Sept 2026, frame or no frame.
     v8  This one.
   WHAT THE SEVEN FAILURES ADD UP TO:
     a. Abstract metaphors (v1 to v4) do not tell a visitor what
        page they are on.
     b. A literal screenshot (v5 to v7) tells them, and bores them.
     c. What works is the ARTEFACT OF THE MEDIUM drawn as an
        elegant object: the ad units themselves, mostly empty, fine
        line art, real proportions, one raised in front. That is
        the same approach the Meta Ads hero landed on, and the two
        pages should stay siblings in language while using
        different arrangements. Meta fans its frames. This one
        composes four different frames with overlap and depth. DO
        NOT make this a fan, and do not make that one a mosaic.

   HARD RULES:
     - ONE WORD ON THE WHOLE VISUAL: the Sponsored tag. Everything
       else is shape. No headline, no URL, no caption, no numerals.
     - NO FIGURES, EVER. No currency value, no percentage, no
       count, no star rating. A price on the shopping tile would be
       the easiest mistake to make here. Do not add one.
     - NO BRAND. Our name does not appear in this visual. The
       client was explicit that the hero does not need to carry it.
     - NO REAL PRODUCT, LOGO OR PHOTOGRAPH. Every glyph is drawn
       line art of a generic object. Never drop in an image asset.
     - The four frames keep their true ad proportions: wide search
       unit, tall display unit, 16:9 video, square shopping tile.
       That is what makes them read as ad formats rather than as
       decorative rectangles.
     - Depth is a real light model: the two back frames sit pale
       and flat, the two front frames carry layered shadows, and
       the raised tile has the heaviest one.
     - Everything fades in in sequence IN PLACE, back frames first.
       Nothing drifts or travels. The pulse on the play triangle is
       the only loop and it stops under prefers-reduced-motion.
   No image assets. Classes are .fmt and below.
   ============================================================ */
.hstage{position:relative;min-width:0}
.fmt{position:relative;width:100%;max-width:474px;margin:0 auto;aspect-ratio:474/442}
.fmt-glow{position:absolute;inset:-10% -4% -12%;pointer-events:none;background:
  radial-gradient(48% 44% at 42% 40%, rgba(255,198,166,.5), rgba(255,241,232,.24) 58%, rgba(255,255,255,0) 78%),
  radial-gradient(36% 32% at 74% 78%, rgba(232,80,26,.12), rgba(255,255,255,0) 72%)}

/* every frame shares this. Only the proportions and the depth change. */
.fr{position:absolute;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;opacity:0;animation:fmtIn .55s ease-out forwards}
.fr svg{fill:none;stroke:#C9BCAC;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes fmtIn{to{opacity:1}}

/* back layer: the two that sit flat and pale. Paler fill, paler border
   and paler line art, so the raised pair in front actually reads as being
   in front. Do not give these the same white as the front frames. */
.fr-search,.fr-disp{background:#FDFAF6;border-color:#EEE7DD}
.fr-search svg,.fr-disp svg{stroke:#D3C8BA}
.fr-search{left:2%;top:7%;width:66%;height:15%;display:flex;align-items:center;gap:11px;padding:0 16px;animation-delay:.2s}
.fr-search svg{width:19px;height:19px;flex:none}
.fr-search i{display:block;height:6px;border-radius:3px;background:#E7E0D6}
.fr-search i:first-of-type{width:46%;margin-bottom:6px;background:#DCD2C6}
.fr-search i:last-of-type{width:30%}
.fr-search span{flex:1;min-width:0}

.fr-disp{right:1%;top:3%;width:19%;height:70%;display:flex;align-items:center;justify-content:center;animation-delay:.32s}
.fr-disp svg{width:34%;height:auto}

/* front layer: the two that are lifted off the page */
.fr-vid{right:3%;bottom:2%;width:50%;aspect-ratio:16/9;height:auto;display:flex;align-items:center;justify-content:center;
  box-shadow:-10px 20px 40px -14px rgba(28,24,20,.3), -3px 6px 14px -4px rgba(28,24,20,.12);animation-delay:.62s;z-index:3}
.fr-vid svg{width:17%;height:auto;stroke:var(--orange);stroke-width:1.9}
.fr-vid::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:1.5px solid var(--orange);opacity:0;animation:fmtPulse 5.4s ease-out 2.8s infinite}
@keyframes fmtPulse{0%{opacity:.34;transform:scale(.8)}70%{opacity:0;transform:scale(1.75)}100%{opacity:0;transform:scale(1.75)}}

/* the shopping tile, raised, the one thing the eye lands on */
.fr-shop{left:5%;top:19%;width:53%;height:52%;border-color:var(--orange-line);border-radius:20px;padding:13px 13px 0;display:flex;flex-direction:column;
  box-shadow:-20px 34px 62px -22px rgba(28,24,20,.4), -5px 10px 22px -6px rgba(28,24,20,.14), 0 1px 0 rgba(255,255,255,.8) inset;
  animation-delay:.48s;z-index:4}
.fr-shop .pane{flex:1;min-height:0;border-radius:13px;background:linear-gradient(168deg,#FFF6F0,#FFFBF8);border:1.5px solid var(--orange-line);display:flex;align-items:center;justify-content:center}
.fr-shop .pane svg{width:44%;height:auto;stroke:var(--orange);stroke-width:1.7}
.fr-shop .foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 3px 12px}
.fr-shop .foot i{display:block;flex:1;min-width:0;max-width:48%;height:7px;border-radius:3.5px;background:#E2DAD0}
.fr-shop .tag{flex:none;white-space:nowrap;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:999px;padding:4.5px 11px;line-height:1}

/* ---- #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. Tested at 1440, 1280, 1024, 834, 768, 430, 414, 393,
   390, 375 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 */
html,body{max-width:100%;overflow-x:hidden}
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}
  .fmt{max-width:420px}
  .triad{grid-template-columns:1fr}
  .defq{padding:32px 34px 30px}
  .steps3{grid-template-columns:1fr 1fr}
}

/* ---- tablet portrait. The point every two column layout collapses. ---- */
@media(max-width:900px){
  .hero{padding:60px 0 74px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hstage{margin-top:4px}
  .fmt{max-width:460px}
  .reasons{grid-template-columns:1fr}
  .surf{grid-template-columns:1fr 1fr}
  .apx-list{grid-template-columns:1fr}
  .apx.wide{grid-column:auto}
  .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)}
  section[id]{scroll-margin-top:14px}

  /* jump nav becomes a static grid. Every option visible on one screen,
     no sideways swiping, and it stops eating vertical space when sticky. */
  .jump{position:static}
  /* Selector is .jump .jump-in, not .jump-in, on purpose. This element also
     carries .wrap, and the .wrap{padding:0 18px} shorthand in the phone block
     further down is a later rule of equal specificity, so it was resetting the
     vertical padding to zero and the first row of buttons sat flush against
     the stats band above it. Do not weaken this selector. */
  .jump .jump-in{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:26px 0 18px;flex-wrap:wrap}
  .jump a{padding:11px 8px;text-align:center;border:1.5px solid var(--line);border-radius:11px;font-size:12.5px;white-space:normal;line-height:1.32;border-bottom-width:1.5px;display:flex;align-items:center;justify-content:center}
  .jump a:hover{border-color:var(--orange);border-bottom-color:var(--orange)}
  .jump .j-cta{grid-column:1 / -1;margin-left:0;border:none;padding:13px 16px}

  /* 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}
  .apx{padding:28px 24px 24px}
  .apx h3{max-width:100%}
  .apx p{max-width:100%}
  .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}
  .jump .jump-in{grid-template-columns:repeat(2,1fr)}
  .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%}
  .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}
  section{padding:52px 0}
  .hero{padding:48px 0 64px}
  .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}

  .ocap{font-size:16px;margin-top:14px}

  .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}
  .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{font-size:11.5px}
}
@media(max-width:680px){
  .f-help,.form-note{font-size:12.4px}
  .st3 i{font-size:15px}
  .apx .chips b{font-size:12.6px}
}

/* ---- narrow phones, 320px class ---- */
@media(max-width:360px){
  .wrap{padding:0 15px}
  .stats-grid{grid-template-columns:1fr}
  .jump .jump-in{grid-template-columns:1fr 1fr;gap:7px}
  .jump a{font-size:12px;padding:10px 6px}
  .hero h1{font-size:27px}
  .fee-chips b{font-size:13px;padding:7px 11px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fr{animation:none!important;opacity:1!important}
  .fr-vid::after{animation:none!important;opacity:0!important}
  .scard,.apx,.reason,.tri{transition:none}
}