: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:5px;color:rgba(255,255,255,.78)}

/* ============ 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}

/* ============ 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:1000px;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 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:1000px;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}
.form-card{background:var(--paper);border-radius:20px;padding:32px;color:var(--ink);box-shadow:0 24px 60px rgba(0,0,0,.32)}
.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 WHITE LABEL PPC PAGE
   Everything above this line is the shared V2A stylesheet.
   Everything below is new to this page.
   ============================================================ */

/* ---- hero: text left, one account card 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.04fr) minmax(0,.96fr);gap:52px;align-items:center}
.hero-grid>*{min-width:0}
.hero h1{font-size:clamp(37px,4.7vw,54px);font-weight:800;margin:22px 0 18px;color:var(--ink)}
.hero .kicker{color:var(--slate);font-size:17.5px;max-width:56ch;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}

/* ============================================================
   THE HERO VISUAL. One dominant panel: the partner's own ad account.
   Three parts, in order of visual weight:
     1. a soft area chart, deliberately UNLABELED and with no figures on
        it, so it reads as activity rather than as a results claim. It
        must never gain an axis number, a percentage or a currency
        value: this page publishes no performance data.
     2. the access list, which is the actual differentiator. Your agency
        holds Admin in orange. Visual2Action sits underneath it, muted,
        at Manager. That single contrast is the whole pitch.
     2b. the header carries TWO platform tabs, Google Ads and Meta Ads.
        Do not reduce this to one name: an earlier draft said only
        "Google Ads Manager" here, which read as though Meta were not on
        offer. Paid search and paid social are both core.
     3. a base bar closing on "remove our access any time".
     There is deliberately NO floating badge or callout pinned to this
     panel. One was tried and removed: pinned tags read as a popup, and
     they cover the content underneath at small sizes.
   Class names here are deliberately unique (.hstage, .ccap): the page
   already uses .stage for the process rows and .cap for the capability
   cards, and reusing either silently inherits their layout.
   The chart line draws once on load and the optimization dots light in
   sequence in place. Nothing drifts or travels. All motion stops under
   prefers-reduced-motion. Pure CSS and inline SVG, no image assets.
   ============================================================ */
.hstage{position:relative;min-width:0}
.acct{position:relative;min-width:0;background:var(--paper);border:1.5px solid var(--line);border-radius:24px;box-shadow:0 30px 70px rgba(28,24,20,.15);max-width:min(500px,100%);margin:0 auto}
.acct-top{display:flex;align-items:center;gap:12px;min-width:0;padding:17px 22px;border-bottom:1.5px solid var(--line);background:var(--cream);border-radius:22px 22px 0 0}
.acct-top .dots{display:flex;gap:6px;flex:none}
.acct-top .dots i{width:9px;height:9px;border-radius:50%;background:var(--cream-deep);border:1px solid #E0D5C6}
.acct-top .dots i:first-child{background:var(--orange-line);border-color:var(--orange-line)}
/* Two tabs, not one platform name. Naming only Google here read as though
   Meta were not on offer. The active tab is Google because paid search is
   where most partner accounts start, but both are always visible. */
.acct-top .tabs{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;overflow:hidden}
.acct-top .tabs b{font-family:'Inter',sans-serif;font-size:12.8px;font-weight:700;letter-spacing:-.005em;color:var(--mute);white-space:nowrap;border-radius:999px;padding:6px 12px;border:1.5px solid transparent}
.acct-top .tabs b.on{color:var(--ink);background:var(--paper);border-color:var(--line);box-shadow:0 2px 6px rgba(28,24,20,.05)}
.acct-top .yours{flex:none;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border:1.5px solid var(--orange-line);border-radius:999px;padding:5px 11px;white-space:nowrap}

/* -- the chart. No numbers, ever. -- */
.acct-chart{padding:26px 24px 6px;position:relative;min-width:0}
.acct-chart .ccap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px;min-width:0}
.acct-chart .ccap b{min-width:0}
.acct-chart .ccap b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.018em;line-height:1.2;color:var(--ink)}
.acct-chart .ccap span{font-size:12.5px;font-weight:600;color:var(--mute);white-space:nowrap;flex:none}
.chart{display:block;width:100%;height:104px;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 5}
.chart .area{fill:url(#hg)}
.chart .line{fill:none;stroke:var(--orange);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520;animation:draw 1.6s cubic-bezier(.4,0,.2,1) .25s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .pt{fill:#fff;stroke:var(--orange);stroke-width:2.5;opacity:0;animation:ptIn .01s linear forwards}
.chart .pt.p1{animation-delay:.8s}
.chart .pt.p2{animation-delay:1.15s}
.chart .pt.p3{animation-delay:1.5s}
@keyframes ptIn{to{opacity:1}}
.chart .halo{fill:var(--orange);opacity:0;animation:haloPulse 4.2s ease-out 1.9s infinite}
@keyframes haloPulse{0%{opacity:.34;r:5}70%{opacity:0;r:15}100%{opacity:0;r:15}}
.acct-chart .note{display:flex;align-items:center;gap:8px;font-size:12.8px;color:var(--mute);padding:14px 0 0;border-top:1.5px solid var(--line);margin-top:14px}
.acct-chart .note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);flex:none}

/* -- the access list: the differentiator, stated as a UI fact -- */
.access{padding:4px 24px 22px;min-width:0}
.access em{display:block;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.who{display:flex;align-items:center;gap:13px;min-width:0;padding:13px 14px;border-radius:14px;border:1.5px solid var(--line);margin-bottom:9px;background:var(--paper)}
.who:last-child{margin-bottom:0}
.who .av{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:-.01em}
.who b{flex:1;min-width:0;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.who b small{display:block;font-size:12.4px;font-weight:500;color:var(--mute);margin-top:2px}
.who u{flex:none;max-width:100%;text-decoration:none;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:5px 11px;white-space:nowrap}
.who.you{border-color:var(--orange-line);background:#FFFAF6}
.who.you .av{background:var(--orange);color:#fff}
.who.you u{background:var(--orange);color:#fff}
.who.us .av{background:var(--cream);color:var(--mute);border:1.5px solid var(--line)}
.who.us b{color:var(--slate);font-weight:600}
.who.us u{background:var(--cream);color:var(--mute);border:1.5px solid var(--line)}

/* -- base bar. Closes the panel on the point the access list makes. -- */
.acct-base{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:15px 22px;border-top:1.5px solid var(--line);background:var(--cream);border-radius:0 0 22px 22px;font-size:12.8px;font-weight:600;color:var(--slate)}
.acct-base::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}

.acct-foot b{color:#fff;font-weight:700}
.acct-foot span{color:#9A9288}

/* ---- #reasons: four 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}
.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:12px;max-width:24ch}
.reason p{position:relative;font-size:15.5px;color:var(--slate);line-height:1.76;max-width:52ch}
.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)}

/* ---- #included: eight capability cards ---- */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cap{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:28px 24px 26px;transition:border-color .2s,transform .2s,box-shadow .2s}
.cap:hover{border-color:var(--orange);transform:translateY(-4px);box-shadow:0 16px 34px rgba(232,80,26,.1)}
.cap .ic{width:46px;height:46px;border-radius:13px;background:var(--orange-soft);border:1.5px solid var(--orange-line);display:flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;color:var(--orange-deep);margin-bottom:18px;transition:background .2s,color .2s,border-color .2s}
.cap:hover .ic{background:var(--orange);border-color:var(--orange);color:#fff}
.cap h3{font-size:18.5px;margin-bottom:10px;line-height:1.28}
.cap p{font-size:15px;color:var(--slate);line-height:1.7}
.cap.core{border-color:var(--orange-line);background:#FFFAF6}
.cap .tag{position:absolute;top:18px;right:18px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:999px;padding:4px 10px}

/* ---- #process: four wide stage rows ---- */
.stages{border-top:1.5px solid var(--line)}
.stage{position:relative;display:grid;grid-template-columns:120px 1fr 1fr;gap:0 40px;padding:44px 0;border-bottom:1.5px solid var(--line);align-items:start}
.stage::before{content:"";position:absolute;left:-24px;top:46px;width:4px;height:0;border-radius:3px;background:var(--orange);transition:height .35s ease}
.stage .num{font-family:'Bricolage Grotesque',sans-serif;font-size:72px;font-weight:800;line-height:.82;color:#C9BCAC;letter-spacing:-.045em;transition:color .3s ease}
.stage:first-child .num{color:var(--orange)}
.stages-js .stage:first-child .num{color:#C9BCAC}
.stages-js .stage.active .num{color:var(--orange)}
.stages-js .stage.active::before{height:58px}
.stage .when{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);background:var(--orange-soft);border:1px solid var(--orange-line);border-radius:999px;padding:3px 11px;margin-bottom:12px}
.stage h3{font-size:clamp(22px,2.5vw,27px);font-weight:800;margin-bottom:12px;max-width:20ch}
.stage p{font-size:16px;color:var(--slate);line-height:1.8;max-width:44ch}
.stage p strong{color:var(--ink);font-weight:600}
.checks{list-style:none;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:8px 22px;align-self:stretch}
.sec-cream .checks{background:var(--paper)}
.checks li{position:relative;padding:12px 0 12px 30px;font-size:15px;color:var(--ink);line-height:1.55;border-bottom:1.5px solid var(--line)}
.checks li:last-child{border-bottom:none}
.checks li::before{content:"\2713";position:absolute;left:0;top:12px;width:20px;height:20px;border-radius:6px;background:var(--orange-soft);border:1.5px solid var(--orange-line);color:var(--orange-deep);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.behind{margin-top:38px;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.4;max-width:30ch;margin-left:auto;margin-right:auto}
.behind em{font-style:normal;color:var(--orange)}

/* ---- #money: three flows and the commission model ---- */
.flows{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;position:relative}
.flow{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;padding:30px 26px 28px;overflow:hidden}
.flow .gn{position:absolute;right:16px;top:4px;font-family:'Bricolage Grotesque',sans-serif;font-size:78px;font-weight:800;color:var(--cream);line-height:1;pointer-events:none}
.flow .from{position:relative;display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.flow .to{position:relative;display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px}
.flow .to em{font-style:normal;color:var(--orange)}
.flow p{position:relative;font-size:15.5px;color:var(--slate);line-height:1.74}
.flow.you{background:var(--ink);border-color:var(--ink)}
.flow.you .gn{color:#241E19}
.flow.you .from{color:#9A9288}
.flow.you .to{color:#fff}
.flow.you p{color:#C9C2B8}
/* the two short panels under the fee cards: takeover, and the commission
   question. Deliberately short. No panel holds more than three sentences. */
.pair{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pane{background:var(--cream);border:1.5px solid var(--cream-deep);border-radius:18px;padding:30px 30px 28px}
.pane.ask{background:var(--orange-soft);border-color:var(--orange-line)}
.pane h3{font-size:21px;font-weight:800;margin-bottom:11px;max-width:26ch}
.pane p{font-size:15.5px;color:var(--slate);line-height:1.76}
.pane p+p{margin-top:11px}
.pane p strong{color:var(--ink);font-weight:600}
/* what the management fee covers and what sits outside it. This exists so a
   partner cannot reach the invoice stage still assuming creative and landing
   pages were included. Two columns, short items, no prose. */
.scope{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.scope>div{border:1.5px solid var(--line);border-radius:18px;padding:26px 28px 24px;background:var(--paper)}
.scope>div.out{background:var(--cream);border-color:var(--cream-deep)}
.scope em{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:6px}
.scope>div.out em{color:var(--mute)}
.scope b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:16px;line-height:1.25}
.scope ul{list-style:none}
.scope li{position:relative;padding:9px 0 9px 28px;font-size:15px;color:var(--slate);line-height:1.6;border-bottom:1px solid var(--line)}
.scope>div.out li{border-bottom-color:var(--cream-deep)}
.scope li:last-child{border-bottom:none}
.scope li::before{content:"\2713";position:absolute;left:0;top:9px;width:19px;height:19px;border-radius:6px;background:var(--orange-soft);border:1.5px solid var(--orange-line);color:var(--orange-deep);font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.scope>div.out li::before{content:"";top:16px;width:14px;height:2.5px;border-radius:2px;background:#C9BCAC;border:none}
.scope .tail{margin-top:16px;padding-top:14px;border-top:1.5px solid var(--cream-deep);font-size:14.5px;color:var(--slate);line-height:1.7}
.scope .tail strong{color:var(--ink);font-weight:600}

.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)}

/* ---- the three step start band, replaces the second headline CTA ---- */
.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(3,1fr);gap:18px;margin-bottom:34px}
.st3{background:rgba(255,255,255,.11);border:1.5px solid rgba(255,255,255,.28);border-radius:18px;padding:26px 26px 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:19px;font-weight:800;letter-spacing:-.015em;margin-bottom:8px;line-height:1.25}
.st3 p{font-size:15px;color:rgba(255,255,255,.88);line-height:1.68}
.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}

/* ---- #compare: the V2A column is a raised panel running through the table,
       not just a third column. Seven rows only. ---- */
.cmp{display:block;position:relative;border:1.5px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 18px 46px rgba(28,24,20,.06)}
.cmp-row{display:grid;grid-template-columns:.82fr 1fr 1.18fr;border-bottom:1.5px solid var(--line);align-items:stretch}
.cmp-row:last-child{border-bottom:none}
.cmp-row>div{padding:24px 26px;font-size:15.5px;line-height:1.7;color:var(--slate)}
.cmp-row>div:first-child{font-family:'Bricolage Grotesque',sans-serif;font-size:17.5px;font-weight:800;letter-spacing:-.015em;color:var(--ink);background:var(--cream);border-right:1.5px solid var(--line);display:flex;align-items:center}
.cmp-row>div:nth-child(2){position:relative;padding-left:52px}
.cmp-row>div:nth-child(2)::before{content:"";position:absolute;left:26px;top:31px;width:16px;height:2.5px;border-radius:2px;background:#C9BCAC}
.cmp-row>div:last-child{position:relative;background:#FFFAF6;color:var(--ink);font-weight:500;border-left:2px solid var(--orange);padding-left:56px}
.cmp-row>div:last-child::before{content:"\2713";position:absolute;left:26px;top:24px;width:22px;height:22px;border-radius:7px;background:var(--orange);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.cmp-row>div:last-child b{font-weight:700}
.cmp-head>div{font-size:11.5px!important;font-weight:800!important;letter-spacing:.13em;text-transform:uppercase;padding:17px 26px!important;font-family:'Inter',sans-serif!important;color:var(--mute)!important;background:var(--paper)!important;border-radius:20px 0 0 0}
.cmp-head>div:nth-child(2){padding-left:26px!important;border-radius:0}
.cmp-head>div:nth-child(2)::before{display:none}
.cmp-head>div:last-child{background:var(--orange)!important;color:#fff!important;border-left-color:var(--orange)!important;padding-left:26px!important;border-radius:0 20px 0 0}
.cmp-head>div:last-child::before{display:none}
.cmp-row .lab{display:none}

/* ============================================================
   RESPONSIVE. Tested at 1440, 1280, 1024, 834, 768, 430, 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){
  .caps{grid-template-columns:repeat(3,1fr)}
  .cmp-row{grid-template-columns:.9fr 1fr 1.15fr}
  .cmp-row>div{padding:20px 22px}
  .cmp-row>div:nth-child(2){padding-left:46px}
  .cmp-row>div:nth-child(2)::before{left:22px}
  .cmp-row>div:last-child{padding-left:50px}
  .cmp-row>div:last-child::before{left:22px;top:20px}
}

/* ---- large tablet, landscape iPad ---- */
@media(max-width:1080px){
  section{padding:80px 0}
  .flows{grid-template-columns:1fr}
  .stage{grid-template-columns:96px 1fr;gap:16px 28px}
  .stage .checks{grid-column:2}
  .stage p{max-width:60ch}
  .burn{padding:36px 34px;gap:28px}
}

/* ---- 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}
  .acct{margin-top:6px;max-width:100%}
  .reasons{grid-template-columns:1fr}
  .caps{grid-template-columns:1fr 1fr}
  .burn{grid-template-columns:1fr;padding:32px 26px}
  .pair,.scope{grid-template-columns:1fr}
  .steps3{grid-template-columns:1fr}
  .cta-grid{grid-template-columns:1fr;gap:34px}
  .stage{grid-template-columns:1fr;padding:34px 0}
  .stage .num{font-size:50px}
  .stage h3{max-width:100%}
  .stage p{max-width:100%}
  .stage .checks{grid-column:auto;margin-top:16px}
  .at-cost{padding:24px 26px}

  /* 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}
  .jump-in{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 0;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}
  section[id]{scroll-margin-top:14px}

  /* comparison table stacks into labeled blocks */
  .cmp{box-shadow:none}
  .cmp-row{grid-template-columns:1fr;border-bottom-width:6px;border-bottom-color:var(--cream)}
  .cmp-row:last-child{border-bottom:none}
  .cmp-row>div{padding:18px 22px}
  .cmp-row>div:first-child{border-right:none;padding:20px 22px 6px;font-size:19px;background:var(--paper)}
  .cmp-row>div:nth-child(2){padding-left:48px;background:var(--paper)}
  .cmp-row>div:nth-child(2)::before{top:25px;left:22px}
  .cmp-row>div:last-child{border-left:none;border-top:1.5px solid var(--orange-line);padding-left:52px}
  .cmp-row>div:last-child::before{top:18px;left:22px}
  .cmp-head{display:none}
  .cmp-row .lab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:5px}
  .cmp-row>div:last-child .lab{color:var(--orange-deep)}

  /* 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}
  .caps{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{flex-direction:column;align-items:flex-start;gap:18px}
  .at-cost .btn{width:100%;text-align:center}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:26px 22px}
  .stat .st-num{font-size:29px}
  .jump-in{grid-template-columns:repeat(2,1fr)}
  .model,.pane,.scope>div{padding:26px 24px}
  .flow{padding:26px 22px}
  .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.4vw,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}

  .acct{border-radius:20px}
  .acct-top{padding:15px 18px;gap:10px}
  .acct-top .yours{display:none}
  .acct-top .tabs{justify-content:flex-start}
  .acct-top .tabs b{font-size:12.2px;padding:5px 10px}
  .acct-chart{padding:22px 19px 4px}
  .acct-chart .ccap b{font-size:17.5px}
  .chart{height:88px}
  .access{padding:4px 19px 18px}
  .acct-base{padding:14px 18px;font-size:12.6px}
  .who{padding:12px 13px;gap:11px}

  .h2{font-size:clamp(25px,7.2vw,31px)}
  .lede{font-size:16px}
  .sec-head{margin-bottom:32px;padding-bottom:20px}
  .burn{padding:28px 22px}
  .burn .display{font-size:clamp(25px,7.4vw,31px)}
  .checks{padding:6px 18px}
  .checks li{font-size:14.4px;padding:11px 0 11px 28px}
  .flow .to,.pane h3{font-size:20px}
  .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}
  .cmp-row>div:first-child{font-size:18px}
  .cmp-row>div{font-size:15px}
  .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 at 10.5px 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){
  .cmp-row .lab,.stage .when,.cap .tag,.flow .from,.scope em,.qgroup>h3{font-size:11.5px}
}
@media(max-width:680px){
  .access em,.who u,.acct-top .yours{font-size:11.5px}
  .who b small,.acct-chart .note,.acct-chart .ccap span{font-size:12.6px}
  .f-help,.form-note{font-size:12.4px}
  .st3 i{font-size:15px}
}

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

  .who b small{display:none}
}

@media(prefers-reduced-motion:reduce){
  .chart .line{animation:none!important;stroke-dashoffset:0}
  .chart .pt{animation:none!important;opacity:1}
  .chart .halo{animation:none!important;opacity:0}
}