/* Zolt Growth (ZT-260): the /growth pages, English and Spanish. Loaded only on those pages (after pages.css, before site.css
   and mobile.css), so nothing here can move another page. The look is the site's own: the night sections, the paper cream
   for prices (a rate card is a printed sheet), Fraunces headlines, figures in DM Sans 600 (.num) and gold
   only on figures and edges. Phones are handled here too, since these pages are new: every rule below 768 px is scoped to
   a .g- class and can't reach the rest of the site. */

/* ---------- The hero: the service pages' dark room, a two-level breadcrumb, the price as a ledger line ---------- */
/* Behind every Growth hero (Ivo, Oct 2: "for consistency" with the home hero): the marble photograph until Oct 4; now the
   2D layer's glow (ZT-433, no old renders), mint from the top left and blue from the right, on the dark base. */
.g-hero::after{content:"";position:absolute;inset:-8px;z-index:-2;pointer-events:none;background:radial-gradient(50% 70% at 0% 0%,rgba(46,230,166,.12),transparent 70%),radial-gradient(55% 75% at 100% 60%,rgba(0,163,224,.18),transparent 72%)}
.g-hero-grid{padding-top:calc(var(--head-h) + var(--s8));padding-bottom:var(--s8)}
.g-hero h1{max-width:13em;color:var(--paper);font-size:var(--t-ch);line-height:.98;letter-spacing:-.045em}
html[lang="es"] .g-hero h1{max-width:14em}
.g-hero .deck{max-width:32em;font-size:clamp(18px,.5vw + 14.5px,22px);line-height:1.45}
/* The price: a short pearl label, then the figure in the ledger face, in gold (the hero's one highlight), then its terms. */
.g-tag{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:var(--s5);padding-top:var(--s4);max-width:36em;border-top:1px solid var(--pearl-faint)}
.g-tag-k{color:var(--on-dark-2);font-size:var(--t-cap);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.g-tag-v{color:var(--on-dark);font-size:var(--t-small);line-height:1.4}
.g-tag-v .num{margin-right:4px;color:var(--gold-l);font-size:clamp(20px,.6vw + 16px,26px);letter-spacing:-.01em}
.g-hero .ctas{margin-top:var(--s6)}

/* The hub's starting prices beside the words: a small cream receipt, the figures in the ledger face, a double gold rule. */
@media (min-width:1061px){
  .g-hero-grid.has-side{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
  .g-hero-grid.has-side>*{grid-column:1/span 7}
  .g-hero-grid.has-side>.g-peek{grid-column:9/-1;grid-row:1/span 6;align-self:end}
}
.g-peek{--n:20px;margin-top:var(--s7);max-width:360px;padding:var(--s5) var(--s5) var(--s4);background:var(--cream) url(/nl/textures/paper.webp) 0 0/256px;background-blend-mode:multiply;color:var(--cream-ink);box-shadow:0 26px 50px -24px rgba(0,0,0,.9);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n) * .5) 100%,0 100%)}
.g-peek-h{color:var(--gold-ink);font-size:var(--t-cap);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.g-peek ul{margin:var(--s3) 0 0;padding:0;list-style:none;border-top:1px solid var(--cream-ink);border-bottom:3px double var(--gold-ink)}
.g-peek li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding:9px 0;border-bottom:1px solid var(--cream-line);font-size:var(--t-small);line-height:1.35}
.g-peek li:last-child{border-bottom:0}
.g-peek .num{color:var(--gold-ink);font-size:17px;white-space:nowrap}
.g-peek-a{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s2);color:var(--cream-ink);font-size:var(--t-small);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-paper);text-underline-offset:4px}
.g-peek-a:hover{text-decoration-color:var(--gold-ink)}
.g-peek-a:focus-visible{outline-color:var(--gold-ink)}

/* ---------- Two front doors (the hub): on the homepage's brushed graphite, cards that read before the metal ---------- */
.g-doors{padding-block:clamp(64px,7vw,112px)}
.g-doors-h{color:var(--paper);font-size:clamp(26px,1.6vw + 14px,40px);line-height:1.05;letter-spacing:-.035em}
.g-door-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin:var(--s6) 0 0;padding:0;list-style:none}
.g-door{display:flex;flex-direction:column;gap:var(--s2);height:100%;padding:var(--s6);border:1px solid rgba(212,165,60,.42);border-radius:20px;background:rgba(12,14,17,.84);box-shadow:inset 0 1px 0 rgba(251,250,247,.1),0 24px 48px -26px rgba(0,0,0,.95);color:var(--paper);text-decoration:none;transition:border-color var(--dur-ui) var(--ease-out),transform var(--dur-tap) var(--ease-out)}
.g-door:hover{border-color:rgba(212,165,60,.78)}
.g-door:active{transform:scale(.99)}
.g-door-k{color:var(--zolt-gold);font-size:var(--t-small);font-weight:600}
.g-door-t{font:600 clamp(24px,1.2vw + 16px,34px)/1.08 var(--f-display);letter-spacing:-.03em}
.g-door-p{max-width:30em;margin-top:var(--s2);color:var(--on-dark);font-size:var(--t-small);line-height:1.55}
/* The door's title underlines in gold on hover and focus, the site's link hover. */
.g-door-t{background:linear-gradient(var(--gold-l),var(--gold-l)) 0 100%/0 1px no-repeat;justify-self:start;width:fit-content;transition:background-size var(--dur-ui) var(--ease-out)}
.g-door:is(:hover,:focus-visible) .g-door-t{background-size:100% 1px}

/* ---------- The rate card: every public price on one cream sheet ---------- */
.g-rates,.g-plans{padding-block:clamp(72px,8vw,128px)}
.g-rates-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.g-rates-head{grid-column:1/span 4;position:sticky;top:calc(var(--head-h) + var(--s6))}
.g-rates-body{grid-column:6/-1}
.g-rates h2,.g-plans h2{color:var(--cream-ink);font-size:clamp(30px,2.4vw + 14px,56px);line-height:1.02;letter-spacing:-.045em}
.g-rates-head p,.g-plans-head p{margin-top:var(--s4);max-width:28em;color:var(--cream-mute);font-size:var(--t-lead);line-height:1.55}
/* The plans sit on the night now (Ivo, Oct 2: cards are frosted black glass). */
.g-plans h2{color:var(--paper)}
.g-plans-head p{color:var(--on-dark)}
.g-rate-group+.g-rate-group{margin-top:var(--s7)}
.g-rate-group h3{padding-bottom:var(--s3);color:var(--cream-ink);font:600 var(--t-cap)/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase}
.g-rate-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--cream-ink)}
.g-rate-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s5);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--cream-line)}
.g-rate-list a{display:grid;gap:2px;color:var(--cream-ink);text-decoration:none}
.g-rate-list a b{font:600 clamp(18px,.5vw + 15px,22px)/1.2 var(--f-display);letter-spacing:-.02em;background:linear-gradient(var(--gold-ink),var(--gold-ink)) 0 100%/0 1px no-repeat;width:fit-content;transition:background-size var(--dur-ui) var(--ease-out)}
.g-rate-list a:is(:hover,:focus-visible) b{background-size:100% 1px}
.g-rate-list a span{color:#3A362F;font-size:var(--t-small);line-height:1.5}
.g-rate-list a:focus-visible{outline:2px solid var(--gold-ink);outline-offset:4px}
.g-rate-p{display:grid;justify-items:end;text-align:right;white-space:nowrap}
.g-rate-p .num{color:var(--gold-ink);font-size:clamp(17px,.4vw + 15px,20px)}
.g-rate-p small{color:var(--cream-mute);font-size:12.5px;white-space:normal;max-width:12em}
/* Growth's commission, right under its price (Oct 3): never only in the fine print. */
.g-rate-p .g-rate-plus{color:var(--cream-ink);font-weight:600;max-width:14em}
.g-rates-note{margin-top:var(--s5);color:var(--cream-mute);font-size:var(--t-cap);line-height:1.55}

/* ---------- A service page's plans: one column per plan on the cream, the figure large ---------- */
.g-plans-head{max-width:46em}
.g-plan-list{display:grid;gap:var(--s5);margin:var(--s7) 0 0;padding:0;list-style:none}
.g-plan-list.g-n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-plan-list.g-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-plan-list.g-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-plan{display:flex;flex-direction:column;padding:var(--s5);color:var(--paper)}
.g-plan-fit{color:var(--gold-l);font-size:var(--t-cap);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.g-plan h3{margin-top:var(--s2);font-size:clamp(22px,.8vw + 17px,30px);letter-spacing:-.03em}
.g-plan-p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:var(--s4)}
.g-plan-p .num{color:var(--gold-l);font-size:clamp(26px,1.4vw + 16px,40px);letter-spacing:-.02em;line-height:1.05}
.g-plan-p span{color:var(--on-dark-2);font-size:var(--t-small)}
.g-plan-plus{margin-top:6px;color:var(--paper);font-size:var(--t-small);font-weight:600}
.g-plan-lead{margin-top:var(--s4);max-width:26em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.5}
.g-plan-lines{margin:var(--s4) 0 0;padding:0;list-style:none;border-top:1px solid var(--pearl-faint)}
.g-plan-lines li{position:relative;padding:10px 0 10px 20px;border-bottom:1px solid var(--pearl-faint);color:var(--on-dark);font-size:var(--t-small);line-height:1.45}
.g-plan-lines li::before{content:"";position:absolute;left:1px;top:1.05em;width:8px;height:12px;margin-top:-4px;background:var(--gold-l);clip-path:polygon(6px 0,8px 0,2px 12px,0 12px)}
.g-plan-lines a,.g-plans-foot a{color:var(--paper);text-underline-offset:3px;text-decoration-color:var(--gold-paper)}
.g-plan-cta{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:var(--s4);color:var(--paper);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-paper);text-underline-offset:5px;transition:text-decoration-color var(--dur-ui) var(--ease-out)}
.g-plan-cta:hover{text-decoration-color:var(--gold-l)}
.g-rates :focus-visible{outline-color:var(--gold-ink)}
.g-plans-foot{margin:var(--s7) 0 0;padding:var(--s4) 0 0;list-style:none;border-top:1px solid var(--pearl-faint);max-width:60em}
.g-plans-foot li{color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.55}
.g-plans-foot li+li{margin-top:6px}

/* ---------- Studio or Managed (the hub) ---------- */
.g-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin:var(--s7) 0 0;padding:0;list-style:none}
.g-two li{padding-top:var(--s5);border-top:1px solid var(--pearl-rule)}
.g-two-k{color:var(--zolt-gold);font:600 15px/1 var(--f-mark)}
.g-two h3{margin-top:var(--s3);color:var(--paper);font-size:clamp(22px,.8vw + 17px,30px);letter-spacing:-.03em}
.g-two p:not(.g-two-k){margin-top:var(--s3);max-width:30em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.5}
.g-two-foot{margin-top:var(--s6);color:var(--on-dark);font-size:var(--t-small)}
.g-teaser{padding-block:var(--s9)}
.g-teaser h2{color:var(--paper);font-size:clamp(32px,2.8vw + 14px,64px);line-height:1;letter-spacing:-.045em}

/* ---------- Your next step: the ways in, on the near-black ---------- */
.g-ways{padding-block:clamp(72px,8vw,120px)}
.g-ways-list{display:grid;gap:var(--s5);margin:var(--s7) 0 0;padding:0;list-style:none}
.g-ways-list.g-n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-ways-list.g-n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-ways-list li{display:flex;flex-direction:column;padding-top:var(--s5);border-top:1px solid var(--pearl-rule)}
.g-ways-list h3{color:var(--paper);font-size:clamp(20px,.6vw + 16px,26px);letter-spacing:-.02em}
.g-ways-list p{margin-top:var(--s3);max-width:24em;color:var(--on-dark);font-size:var(--t-small);line-height:1.55}
.g-way-a{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-top:auto;padding-top:var(--s3);color:var(--paper);font-weight:600;text-decoration:underline;text-decoration-color:var(--pearl-rule);text-underline-offset:5px;transition:text-decoration-color var(--dur-ui) var(--ease-out)}
.g-way-a:hover{text-decoration-color:var(--gold-l)}

/* ---------- Forms: the homepage form's fields (style.css .start-form) laid out for each Growth page ---------- */
.g-formsec{padding-block:clamp(64px,7vw,112px)}
.g-formsec-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.g-formsec-head{grid-column:1/span 4;position:sticky;top:calc(var(--head-h) + var(--s6))}
.g-formsec-head h2{color:var(--paper);font-size:clamp(30px,2.4vw + 14px,52px);line-height:1.02;letter-spacing:-.045em}
.g-formsec-head p{margin-top:var(--s4);color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}
.g-form{grid-column:6/-1;grid-row:auto;max-width:760px}
.g-form textarea{width:100%;min-width:0;margin:0;padding:12px 14px;border:1px solid rgba(251,250,247,.34);border-radius:0;background-color:rgba(251,250,247,.04);color:var(--paper);font:400 17px/1.45 var(--f-body);resize:vertical;transition:border-color var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out)}
.g-form textarea:hover{border-color:var(--pearl-line)}
.g-form textarea:focus{border-color:var(--paper);background-color:rgba(251,250,247,.07)}
.g-legend{color:var(--paper);font:600 clamp(19px,.5vw + 16px,22px)/1.2 var(--f-display);letter-spacing:-.02em}
.g-hint{margin:0}
.g-row-gap{margin-top:var(--s5)}
.g-lang .sf-opts{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-who{padding-top:var(--s5);border-top:1px solid var(--pearl-faint)}
.g-opts-1{grid-template-columns:1fr}
.g-note{padding:12px 14px;border:1px solid var(--pearl-rule);color:var(--on-dark);font-size:var(--t-small);line-height:1.5}

/* The form's states (the same as the homepage form's, chapters/start.css, scoped to the Growth forms). */
[data-gform] .sf-err{display:block;position:relative;margin:0;padding-left:16px;color:var(--paper);font-size:14px;font-weight:500;line-height:1.45}
[data-gform] .sf-err[hidden]{display:none}
[data-gform] .sf-err::before{content:"";position:absolute;left:1px;top:.2em;width:8px;height:12px;background:var(--paper);clip-path:polygon(6px 0,8px 0,2px 12px,0 12px)}
[data-gform] .sf-set>.sf-err{margin-top:10px}
[data-gform] :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea)[aria-invalid="true"]{border-color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)}
[data-gform] .sf-set[data-invalid] .sf-opt{border-color:#F2B8A0;box-shadow:inset 0 0 0 1px #F2B8A0}
[data-gform] .cf-turnstile[data-ts="flexible"]{min-height:65px}
[data-gform] .cf-turnstile[data-ts="compact"]{min-height:140px}
[data-gform] .cf-turnstile[data-ts]{line-height:0}
[data-gform] .start-error{position:relative;padding-left:34px;border-color:var(--pearl-line);background:rgba(251,250,247,.05)}
[data-gform] .start-error::before{content:"";position:absolute;left:14px;top:calc(12px + .3em);width:8px;height:12px;background:var(--paper);clip-path:polygon(6px 0,8px 0,2px 12px,0 12px)}
[data-gform] :is(.start-error,.sf-nokey) a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--pearl-line);text-underline-offset:2px}
[data-gform] .sf-nokey{position:relative;margin:0;padding:12px 14px 12px 34px;border:1px solid var(--pearl-rule);color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.55}
[data-gform] .sf-nokey::before{content:"";position:absolute;left:14px;top:calc(12px + .3em);width:8px;height:12px;background:var(--pearl);clip-path:polygon(6px 0,8px 0,2px 12px,0 12px)}
[data-gform][data-state="nokey"] .sf-send .btn{color:var(--on-dark-2);cursor:not-allowed}
[data-gform][data-state="nokey"] .sf-send .btn::before{background:var(--pearl-rule)}
[data-gform][data-state="nokey"] .sf-send .btn::after{--m:calc(var(--n) - .76px);inset:1px;background:var(--night)}
[data-gform][data-state="nokey"] .sf-send .btn>span::before{content:none}
[data-gform] .sf-send .btn[aria-busy="true"]{cursor:progress}
[data-gform] .sf-send .btn[aria-busy="true"]>span::after{content:"";position:absolute;top:50%;right:11px;width:14px;height:14px;margin-top:-7px;box-sizing:border-box;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;pointer-events:none;animation:g-spin .75s linear infinite}
@keyframes g-spin{to{transform:rotate(1turn)}}
[data-gform] :is(.sf-err,.start-error):not([hidden]){animation:g-arrive var(--dur-ui) var(--ease-out)}
@keyframes g-arrive{from{opacity:0;transform:translate(-3px,6px)}}

/* ---------- The plan builder: the choices left, the plan on a cream receipt right (sticky), the send under the choices ---------- */
.g-builder{padding-block:var(--s7) clamp(72px,8vw,128px)}
.g-plan-form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s8);max-width:none;align-items:start}
.g-pick{grid-column:1/span 7;grid-row:1;display:grid;gap:var(--s7);min-width:0}
.g-sum{grid-column:9/-1;grid-row:1/span 2;position:sticky;top:calc(var(--head-h) + var(--s5));min-width:0}
.g-send{grid-column:1/span 7;grid-row:2;display:grid;gap:var(--s6);min-width:0}
.g-group .sf-h{margin-top:-2px}
.g-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.g-opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:2px;align-content:start;min-height:52px;padding:14px 16px;border:1px solid var(--pearl-rule);background:rgba(251,250,247,.03);color:var(--on-dark);cursor:pointer;transition:border-color var(--dur-ui) var(--ease-out),background-color var(--dur-ui) var(--ease-out)}
.g-opt input{grid-row:1/span 4;width:18px;height:18px;margin:2px 0 0;accent-color:var(--zolt-gold);cursor:pointer}
.g-opt-n{color:var(--paper);font-weight:600;line-height:1.3}
/* Build your plan (Ivo, Oct 2): what it does first, then what's in it, then the price, small and last. */
.g-opt-v{margin-top:2px;color:var(--paper);font-size:var(--t-small);line-height:1.45}
.g-opt-i{margin-top:4px;color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.45}
.g-opt-p{margin-top:8px;color:var(--gold-l);font-size:13px;letter-spacing:.01em}
.g-opt-l{color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.45}
.g-opt-none{grid-column:1/-1}   /* "None" is one slim row across, the products pair up below it */
.g-opt:hover{border-color:var(--pearl-line)}
.g-opt:has(:checked){border-color:var(--zolt-gold);background:rgba(212,165,60,.08);box-shadow:inset 0 0 0 1px var(--zolt-gold)}
.g-opt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:3px}
.g-opt input:focus-visible{outline:none}
.g-opt[data-off]{opacity:.42;cursor:not-allowed}
.g-opt[data-off] input{cursor:not-allowed}
.g-patients{margin-top:0}
.g-fine{margin-top:2px;font-size:var(--t-cap)}
/* Get Ahead's one SEO option (Local or Organic), under the plans in Build your plan; the line over the build-your-own choices. */
.g-parts{display:grid;gap:8px;margin:var(--s3) 0 0;padding:0;border:0}
.g-parts[hidden]{display:none}
.g-parts legend{margin-bottom:6px}
.g-or{margin:0 0 calc(var(--s5) * -1);color:var(--gold-l);font:600 var(--t-cap)/1.3 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
/* The launch offer under every Growth hero (GHero): one short line, its small print under it. */
.g-offer{max-width:40em;margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--pearl-faint);color:var(--on-dark);font-size:var(--t-small);line-height:1.55}
.g-offer-k{color:var(--gold-l);font-size:var(--t-cap);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.g-offer b{color:var(--paper);font-weight:600}
.g-offer-fine{display:block;margin-top:4px;color:var(--on-dark-2);font-size:var(--t-cap)}
.g-sum-extra li.g-sum-fine{padding-left:0;color:var(--cream-mute);font-size:12px}
.g-sum-extra li.g-sum-fine::before{content:none}
.g-sum-extra a{color:var(--cream-ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-paper);text-underline-offset:3px}
.g-patients-h{color:var(--on-dark-2)}

/* The receipt: the plan as a ledger on the paper cream, the bolt notch at its corner, the totals over a double gold rule. */
.g-sum-in{--n:24px;position:relative;padding:var(--s6) var(--s5) var(--s5);background:var(--cream) url(/nl/textures/paper.webp) 0 0/256px;background-blend-mode:multiply;color:var(--cream-ink);box-shadow:0 26px 50px -24px rgba(0,0,0,.85);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n) * .5) 100%,0 100%)}
.g-sum-h{color:var(--cream-ink);font-size:clamp(24px,1vw + 16px,32px);letter-spacing:-.03em}
.g-sum-lines,.g-sum-extra{margin:var(--s4) 0 0;padding:0;list-style:none}
.g-sum-lines{border-top:1px solid var(--cream-ink)}
.g-sum-lines li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s3);padding:10px 0;border-bottom:1px solid var(--cream-line);font-size:var(--t-small);line-height:1.4}
.g-sum-lines li.g-sum-empty{display:block;color:var(--cream-mute)}
.g-sum-n{font-weight:600}
.g-sum-v{color:#3A362F;text-align:right}
.g-sum-tot{display:grid;gap:4px;margin:var(--s4) 0 0;padding:12px 0 10px;border-top:1px solid var(--gold-ink);border-bottom:3px double var(--gold-ink)}
.g-sum-tot[hidden],.g-sum-tot>[hidden]{display:none}
.g-sum-tot div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3)}
.g-sum-tot dt{font-weight:600}
.g-sum-tot dd{margin:0;color:var(--gold-ink);font-size:clamp(18px,.6vw + 14px,22px);text-align:right}
.g-sum-extra li{position:relative;padding:4px 0 4px 18px;color:#3A362F;font-size:var(--t-cap);line-height:1.45}
.g-sum-extra li::before{content:"";position:absolute;left:1px;top:.55em;width:7px;height:10px;background:var(--gold-ink);clip-path:polygon(5px 0,7px 0,2px 10px,0 10px)}
.g-sum-extra .g-sum-v{display:none}
.g-sum-note{margin-top:var(--s4);color:var(--cream-mute);font-size:12.5px;line-height:1.5}
.g-send-h{color:var(--paper);font-size:clamp(28px,2vw + 14px,48px);line-height:1.02;letter-spacing:-.045em}
.g-send-lead{margin-top:calc(var(--s5) * -1);color:var(--on-dark);font-size:var(--t-lead)}

/* ---------- The wizards (the free audit, Start your website): one step at a time on a plate, a thin progress line on top,
   the question as the heading, Back and Next under it; the last screen (the thank-you, the audit, the calendar) replaces
   the form in the same plate. growth-form.ts sets data-g-steps-on; without it every step shows, as one long form. ---------- */
.g-wizsec{padding-block:var(--s7) clamp(72px,8vw,128px)}
.g-wiz{--n:28px;position:relative;max-width:820px;margin-inline:auto;padding:clamp(24px,3.4vw,48px);background:var(--night-2);box-shadow:inset 0 0 0 1px var(--pearl-faint),0 30px 60px -36px rgba(0,0,0,.9);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--n)),calc(100% - var(--n) * .5) 100%,0 100%)}
.g-wiz .g-form{grid-column:auto;max-width:none;margin-top:var(--s6)}
.g-wiz .g-form[hidden]{display:none}
/* In a wizard the step's question already says what the contact fields are for: their group name stays for screen
   readers only, and the rule above them goes. */
.g-wiz .g-who{padding-top:0;border-top:0}
.g-wiz .g-who>.g-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.g-progress{display:none}
html.js .g-progress{display:flex;align-items:center;gap:var(--s4);color:var(--on-dark-2);font-size:var(--t-cap)}
.g-progress-bar{position:relative;flex:1;height:3px;background:var(--pearl-faint);overflow:hidden}
.g-progress-bar i{position:absolute;inset:0;background:var(--zolt-gold);transform-origin:0 50%;transform:scaleX(var(--p,.1667));transition:transform var(--dur-reveal) var(--ease-out)}
.g-progress-n{flex:none;min-width:6.5em;text-align:right;font-variant-numeric:tabular-nums}
.g-step{display:grid;gap:var(--s5)}
.g-step[hidden]{display:none}
.g-step-h{color:var(--paper);font:600 clamp(28px,2vw + 16px,44px)/1.04 var(--f-display);letter-spacing:-.04em;text-wrap:balance}
legend.g-step-h{float:left;width:100%;margin-bottom:var(--s4);padding:0}
.g-step-h:focus{outline:none}
.g-step .sf-field input:not([type="checkbox"]):not([type="radio"]){font-size:18px}
.g-step-nav{display:none}
[data-g-steps-on] .g-step-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s3);margin-top:var(--s3)}
[data-g-steps-on] .g-step-nav-last{justify-content:flex-start;margin-top:0}
.g-step+.g-step{padding-top:var(--s6);border-top:1px solid var(--pearl-faint)}
[data-g-steps-on] .g-step+.g-step{padding-top:0;border-top:0}
/* An answer with a line under its name (the kind of business). */
.g-tile>span{display:grid;gap:2px}
.g-tile b{font-weight:600}
.g-tile small{color:var(--cream-mute);font-size:13.5px}
/* The last screen. */
.g-done{display:grid;gap:var(--s5);margin-top:var(--s6)}
.g-done[hidden],.g-done [hidden]{display:none}
.g-done>div:not(.g-walk):not([hidden]){display:grid;gap:var(--s4)}
.g-done-p{max-width:36em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}
.g-done-note{margin-top:var(--s4);color:var(--on-dark-2);font-size:var(--t-cap)}
.g-walk{display:grid;gap:var(--s3);margin-top:var(--s4);padding-top:var(--s5);border-top:1px solid var(--pearl-faint)}
.g-walk h3{color:var(--paper);font-size:clamp(22px,1vw + 16px,30px);letter-spacing:-.03em}
.g-walk>p{color:var(--on-dark);font-size:var(--t-small)}
.g-walk .calwrap{margin-top:var(--s3)}
/* The audit on the page (AUDIT_LIVE): the score in the bezel ring (its figure the screen's gold), then two short lists. */
.g-audit{display:grid;gap:var(--s5)}
.g-audit-res{display:grid;gap:var(--s5)}
.g-score{position:relative;display:grid;place-items:center;width:200px;aspect-ratio:1;color:var(--pearl-line)}
.g-score-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-score-n{display:grid;justify-items:center;margin-top:-10px;color:var(--on-dark-2);font-size:var(--t-cap)}
.g-score-n .num{color:var(--gold-l);font-size:56px;line-height:1}
.g-score-k{position:absolute;bottom:22%;color:var(--on-dark-2);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.g-audit-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.g-audit-cols h3{padding-bottom:var(--s3);color:var(--paper);font-size:20px;letter-spacing:-.02em;border-bottom:1px solid var(--pearl-rule)}
.g-audit-list{margin:0;padding:0;list-style:none}
.g-audit-list li{padding:var(--s3) 0;border-bottom:1px solid var(--pearl-faint);color:var(--on-dark);font-size:var(--t-small);line-height:1.5}
.g-audit-list b{display:block;color:var(--paper);font-weight:600}
.g-audit-list p{margin-top:2px}
/* Stage 1, the free first look: Google's four PageSpeed scores as a small ledger, each figure in the ledger face. */
.g-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin:0}
.g-scores>div{display:grid;gap:6px;padding:var(--s4);border:1px solid var(--pearl-faint);border-radius:14px}
.g-scores>div[hidden]{display:none}
.g-scores dt{color:var(--on-dark-2);font-size:var(--t-cap)}
.g-scores dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;margin:0;color:var(--on-dark-2);font-size:12.5px}
.g-scores .num{color:var(--gold-l);font-size:34px;line-height:1}
.g-scores dd span{white-space:nowrap}
.g-audit-ts:empty{display:none}
@media (max-width:760px){.g-scores{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.g-audit-cols{grid-template-columns:1fr}.g-score{width:168px}.g-score-n .num{font-size:46px}}

/* ---------- Thank you ---------- */
.g-thanks{padding:calc(var(--head-h) + var(--s9)) 0 var(--s10);color:var(--paper)}
.g-thanks h1{max-width:14em;font-size:clamp(36px,3.6vw + 14px,72px);line-height:1;letter-spacing:-.045em}
.g-thanks h2{margin-top:var(--s7);font-size:clamp(22px,1vw + 16px,30px);letter-spacing:-.03em}
.g-thanks p{max-width:38em;margin-top:var(--s4);color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}
.g-thanks-lead{color:var(--paper)}
.g-thanks-list{max-width:44em;margin:var(--s4) 0 var(--s5);padding:0;list-style:none;border-top:1px solid var(--pearl-faint)}
.g-thanks-list li{padding:var(--s3) 0;border-bottom:1px solid var(--pearl-faint);color:var(--on-dark);font-size:var(--t-small);line-height:1.55}
.g-thanks-list b{color:var(--paper)}
.g-thanks .ctas{margin-top:var(--s5)}

/* The launch offer in full (OfferBand) and its three steps (OfferSteps), Ivo, Oct 2: on the cream, the steps in a row
   with gold arrows; on phones, one under the other. The compact steps sit on the night in Build your plan. */
.g-ob-k{margin-bottom:var(--s3);color:var(--gold-ink);font-size:var(--t-cap);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.g-offerband h2{max-width:22em;color:var(--cream-ink);font-size:clamp(28px,2vw + 14px,46px);line-height:1.05;letter-spacing:-.04em;text-wrap:balance}
.g-ob-p{max-width:40em;margin-top:var(--s4);color:#3A362F;font-size:var(--t-lead);line-height:1.55}
.g-ob-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:var(--s6)}
.g-offerband .in-link{color:var(--cream-ink);font-weight:600;text-decoration-color:var(--gold-paper)}
.g-offerband :focus-visible{outline-color:var(--gold-ink)}
.g-ob-fine{max-width:44em;margin-top:var(--s4);color:var(--cream-mute);font-size:var(--t-cap);line-height:1.55}
.g-steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin:var(--s6) 0 0;padding:0;list-style:none}
.g-steps3 li{position:relative;display:grid;gap:4px;align-content:start;padding-top:var(--s4);border-top:1px solid var(--cream-ink);color:var(--cream-ink)}
.g-steps3 li:not(:last-child)::after{content:"\2192" / "";position:absolute;top:calc(var(--s4) + 2px);right:calc(var(--s6) * -.7);color:var(--gold-ink);font-size:20px;line-height:1}
.g-steps3-n{color:var(--gold-ink);font-size:14px;font-weight:600}
.g-steps3 b{font:600 clamp(18px,.5vw + 15px,22px)/1.2 var(--f-display);letter-spacing:-.02em}
.g-steps3-s{color:#3A362F;font-size:var(--t-small);line-height:1.5}
.g-steps3.is-compact{gap:var(--s4);margin-top:var(--s3)}
.g-steps3.is-compact+.g-fine{margin-top:var(--s3)}
.g-steps3.is-compact li{padding-top:10px;border-top-color:var(--pearl-rule);color:var(--paper)}
.g-steps3.is-compact b{font:600 var(--t-small)/1.3 var(--f-body);letter-spacing:0}
.g-steps3.is-compact .g-steps3-n{color:var(--gold-l);font-size:12px}
.g-steps3.is-compact li:not(:last-child)::after{top:12px;right:calc(var(--s4) * -.8);color:var(--gold-l);font-size:15px}
@media (max-width:640px){
  .g-steps3:not(.is-compact){grid-template-columns:1fr;gap:var(--s5)}
  .g-steps3:not(.is-compact) li:not(:last-child)::after{content:"\2193" / "";top:var(--s4);right:0}
}

/* ---------- "Watch it build": the hub's hero stage (GrowthStage.astro; Ivo, Oct 2, 9:55 PM) ----------
   The copy on the left, the stage on the right (stacked on phones): a frosted-glass laptop and phone where an example site
   builds itself, and the Zolt dashboard card. The marble sits darker and calmer behind it so the glass reads. The mock
   site is sized in container units, so it scales with its screen; each trade brings its own colours. */
.g-hero-stage::after{filter:blur(6px) brightness(.58)}
.g-eyebrow{margin:0 0 var(--s4);color:var(--gold-l);font-size:var(--t-small);font-weight:600}
.g-hero-line{margin-top:var(--s4);color:var(--on-dark);font-size:var(--t-small)}
.g-hero-line b{color:var(--paper);font-weight:600}
.g-hero-line a{margin-left:4px;color:var(--paper);text-decoration:underline;text-decoration-color:var(--gold-l);text-underline-offset:4px}
.g-stage{--m-bg:#F6F3EE;--m-ink:#1E2A33;--m-accent:#A84A16;--m-on:#fff;--m-card:#fff;--m-p1:#2E4A5C;--m-p2:#F2E3CF;--m-p3:#A84A16;position:relative;margin-top:var(--s7)}
.g-stage[data-trade="salon"]{--m-bg:#FBF4F3;--m-ink:#3A2230;--m-accent:#93365F;--m-p1:#EBCFD5;--m-p2:#93365F;--m-p3:#F8E9E6}
.g-stage[data-trade="office"]{--m-bg:#F2F7F7;--m-ink:#15343A;--m-accent:#1D676C;--m-p1:#CFE5E6;--m-p2:#1D676C;--m-p3:#FFFFFF}
.g-stage[data-trade="food"]{--m-bg:#FBF6EE;--m-ink:#33231A;--m-accent:#8A3A20;--m-p1:#E7D2B5;--m-p2:#FFFFFF;--m-p3:#8A3A20}
.g-stage-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:var(--s5)}
.g-stage-pick{margin-right:4px;color:var(--on-dark-2);font-size:var(--t-cap)}
.g-chip{min-height:40px;padding:0 16px;border:1px solid var(--glass-edge);border-radius:999px;background:var(--glass-frost);color:var(--on-dark);font:600 14px/1 var(--f-body);cursor:pointer;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);transition:border-color .15s var(--ease-out),background-color .15s var(--ease-out),color .15s var(--ease-out)}
.g-chip:hover{border-color:rgba(251,250,247,.34);color:var(--paper)}
.g-chip[aria-pressed="true"]{border-color:var(--zolt-gold);background:rgba(212,165,60,.16);color:var(--paper)}
.g-chip:active{transform:scale(.97)}
.g-stage-set{position:relative;aspect-ratio:16/11;margin-bottom:4%;transition:opacity .45s var(--ease-out)}
.g-stage.is-reset .g-stage-set{opacity:0}
.g-laptop{position:absolute;top:0;left:6%;right:14%}
.g-screen{position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;border:1px solid rgba(251,250,247,.24);border-radius:14px 14px 4px 4px;background:var(--m-bg);box-shadow:0 0 0 7px rgba(22,25,29,.62),0 0 0 8px rgba(251,250,247,.16),0 34px 60px -30px rgba(0,0,0,.9)}
.g-base{height:12px;margin:8px -8% 0;border-radius:2px 2px 14px 14px;background:linear-gradient(rgba(251,250,247,.26),rgba(251,250,247,.07));box-shadow:0 20px 30px -16px rgba(0,0,0,.85)}
.g-ex{position:absolute;top:-12px;left:50%;z-index:1;transform:translateX(-50%);padding:4px 10px;border:1px solid var(--glass-edge);border-radius:99px;background:rgba(22,25,29,.7);color:var(--on-dark);font:600 11px/1.2 var(--f-body);letter-spacing:.02em}
.g-phone{position:absolute;bottom:2%;left:0;width:21%;aspect-ratio:9/18.5;padding:5px;border:1px solid rgba(251,250,247,.28);border-radius:24px;background:rgba(22,25,29,.66);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 44px -20px rgba(0,0,0,.9)}
.g-pscreen{height:100%;overflow:hidden;container-type:inline-size;border-radius:19px;background:var(--m-bg)}
.g-dash{position:absolute;right:0;bottom:-4%;width:40%;padding:16px 18px 18px;color:var(--on-dark)}
.g-dash-h{display:flex;justify-content:space-between;gap:8px;color:var(--paper);font:600 13px/1.3 var(--f-body)}
.g-dash-ex.g-ex{position:static;transform:none;flex:none;align-self:flex-start;padding:2px 8px}
.g-lead{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border:1px solid rgba(46,230,166,.35);border-radius:12px;background:rgba(46,230,166,.08)}
.g-lead-dot{flex:none;width:9px;height:9px;margin-top:5px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(46,230,166,.18)}
.g-lead b{display:block;color:var(--paper);font-size:13px;font-weight:600;line-height:1.35}
.g-lead small{color:var(--on-dark-2);font-size:11.5px}
.g-dash-n{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0}
.g-dash-n div{padding:8px 10px;border-radius:10px;background:rgba(251,250,247,.05)}
.g-dash-n dt{color:var(--on-dark-2);font-size:11.5px}
.g-dash-n dd{margin:2px 0 0;color:var(--paper);font-size:20px;font-weight:600}
.g-score-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:6px 10px;margin-top:12px}
.g-dash-k{color:var(--on-dark-2);font-size:11.5px}
.g-score-row b{color:var(--gold-l);font-size:24px;font-weight:600}
.g-meter{grid-column:1/-1;height:6px;overflow:hidden;border-radius:6px;background:rgba(251,250,247,.1)}
.g-meter i{display:block;width:100%;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--gold-l),var(--mint));transform:scaleX(var(--v,.87));transform-origin:0 50%}
/* The example site */
.m-site{display:grid;gap:2cqw;padding:2.4cqw 3.2cqw;color:var(--m-ink);font-family:var(--f-body)}
.m-nav{display:flex;align-items:center;gap:1.6cqw;font-size:1.9cqw}
.m-logo{flex:none;width:2.8cqw;height:2.8cqw;border-radius:.8cqw;background:var(--m-accent)}
.m-nav b{margin-right:auto;font-weight:700;white-space:nowrap}
.m-nav i{width:6cqw;height:.9cqw;border-radius:1cqw;background:var(--m-ink);opacity:.2}
.m-mini{padding:.8cqw 1.6cqw;border-radius:1cqw;background:var(--m-accent);color:var(--m-on);font-size:1.6cqw;font-weight:700}
.m-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:2.6cqw;align-items:center}
.m-photo{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:1.8cqw;background:var(--m-p1)}
.m-photo span{position:absolute;display:block}
.m-copy{display:grid;gap:1.3cqw}
.m-copy b{font:600 3.7cqw/1.06 var(--f-display);letter-spacing:-.02em}
.m-copy i{display:block;height:1cqw;border-radius:1cqw;background:var(--m-ink);opacity:.16}
.m-copy i.m-short{width:62%}
.m-btn{justify-self:start;margin-top:.6cqw;padding:1.1cqw 2.2cqw;border-radius:1.2cqw;background:var(--m-accent);color:var(--m-on);font-size:1.7cqw;font-weight:700}
.m-services{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw}
.m-tile{display:flex;align-items:center;gap:1.1cqw;padding:1.5cqw;border-radius:1.2cqw;background:var(--m-card);box-shadow:0 .4cqw 1.2cqw -.6cqw rgba(0,0,0,.2);font-size:1.75cqw;font-weight:600}
.m-dot{flex:none;width:2cqw;height:2cqw;border-radius:50%;background:var(--m-accent);opacity:.85}
.m-reviews{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw}
.m-review{display:flex;align-items:center;gap:1.2cqw;padding:1.3cqw 1.5cqw;border-radius:1.2cqw;background:var(--m-card);box-shadow:0 .4cqw 1.2cqw -.6cqw rgba(0,0,0,.2);font-size:1.65cqw;line-height:1.3}
.m-stars{color:#B5781C;font-size:1.5cqw;letter-spacing:.12em}
.m-review b{font-weight:500;opacity:.72}
.m-call{display:grid}
.m-call span{justify-self:center;padding:1.2cqw 5.4cqw;border-radius:99px;background:var(--m-accent);color:var(--m-on);font-size:1.9cqw;font-weight:700;box-shadow:0 1cqw 2.4cqw -1cqw var(--m-accent)}
.m-site-phone{gap:5cqw;padding:9cqw 6cqw}
.m-site-phone .m-nav{gap:3cqw;font-size:6.4cqw}
.m-site-phone .m-logo{width:8cqw;height:8cqw;border-radius:2.4cqw}
.m-site-phone .m-photo{aspect-ratio:4/3;border-radius:5cqw}
.m-ptag{font:600 9.5cqw/1.08 var(--f-display);letter-spacing:-.02em}
.m-site-phone .m-call span{padding:4cqw 11cqw;font-size:6.6cqw}
/* The "photos": shapes per trade, until our own stills exist. A house at dusk, a mirror and chair, an office front, a plate. */
.m-s1{left:30%;bottom:0;width:40%;height:42%;background:var(--m-p2)}
.m-s2{left:24%;bottom:41%;width:52%;height:30%;background:var(--m-p3);clip-path:polygon(50% 0,100% 100%,0 100%)}
.m-s3{left:44%;bottom:0;width:12%;height:24%;background:var(--m-p1)}
.g-stage[data-trade="salon"] .m-s1{left:16%;bottom:auto;top:12%;width:42%;height:auto;aspect-ratio:1;border:1.4cqw solid var(--m-p2);border-radius:50%;background:var(--m-p3)}
.g-stage[data-trade="salon"] .m-s2{left:56%;bottom:0;width:30%;height:44%;border-radius:40% 40% 8% 8%;background:var(--m-p2);clip-path:none}
.g-stage[data-trade="salon"] .m-s3{left:8%;bottom:0;width:84%;height:9%;border-radius:4px;background:var(--m-p2);opacity:.5}
.g-stage[data-trade="office"] .m-s1{left:14%;bottom:0;width:56%;height:78%;background:repeating-linear-gradient(90deg,transparent 0 14%,rgba(255,255,255,.75) 14% 26%),repeating-linear-gradient(0deg,var(--m-p2) 0 18%,#2D7F84 18% 30%)}
.g-stage[data-trade="office"] .m-s2{left:66%;bottom:0;width:22%;height:46%;background:#2D7F84;clip-path:none}
.g-stage[data-trade="office"] .m-s3{left:72%;bottom:auto;top:12%;width:14%;height:auto;aspect-ratio:1;border-radius:50%;background:var(--m-p3)}
.g-stage[data-trade="food"] .m-s1{left:20%;bottom:auto;top:12%;width:56%;height:auto;aspect-ratio:1;border-radius:50%;background:var(--m-p2);box-shadow:0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.35)}
.g-stage[data-trade="food"] .m-s2{left:33%;bottom:auto;top:30%;width:30%;height:auto;aspect-ratio:1;border-radius:50%;background:var(--m-p3);clip-path:none}
.g-stage[data-trade="food"] .m-s3{left:78%;bottom:auto;top:20%;width:13%;height:auto;aspect-ratio:1;border-radius:50%;background:var(--m-p2);opacity:.85}
/* Building: each part arrives (opacity and a short rise), the dashboard slides in, the lead lands. */
.g-stage.is-live [data-at]{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.g-stage.is-live [data-at]:not(.on){opacity:0;transform:translateY(10px)}
.g-stage.is-live .g-dash[data-at]:not(.on){transform:translateX(24px)}
.g-stage.is-live .g-lead[data-at]:not(.on){transform:translateY(-8px)}
@media (min-width:1061px){
  .g-hero-stage .g-hero-grid.has-side>*{grid-column:1/span 5}
  .g-hero-stage .g-hero-grid.has-side>.g-stage{grid-column:6/-1;grid-row:1/span 8;align-self:center;margin-top:0}
  .g-hero-stage .g-hero-grid{padding-bottom:var(--s9)}
  .g-hero-stage h1{max-width:none;font-size:clamp(44px,4.1vw,62px);line-height:1.02}
}
@media (min-width:1061px) and (max-width:1279px){
  .g-dash{bottom:-14%;width:38%}
}
@media (max-width:640px){
  .g-stage-set{aspect-ratio:auto;display:grid;gap:14px;margin-bottom:0;padding-top:28px}
  .g-laptop{position:relative;left:auto;right:auto;margin-left:16%}
  .g-phone{top:28px;bottom:auto;width:22%}
  .g-ex{top:-30px}
  .g-base{margin:8px -3% 0}
  .g-dash{position:relative;right:auto;bottom:auto;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .g-stage .g-stage-set,.g-stage [data-at],.g-chip{transition:none}
}
@media (prefers-reduced-transparency:reduce){
  .g-chip,.g-phone{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--night-2)}
}

/* ---------- Narrower screens ---------- */
@media (max-width:1060px){
  .g-rates-head,.g-formsec-head{position:static;grid-column:1/-1}
  .g-rates-body,.g-form{grid-column:1/-1;margin-top:var(--s6)}
  .g-plan-list.g-n3,.g-plan-list.g-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-ways-list.g-n4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-pick,.g-send{grid-column:1/-1}
  .g-sum{grid-column:1/-1;grid-row:2;position:static}
  .g-send{grid-row:3}
  .g-plan-form{row-gap:var(--s7)}
}
@media (max-width:860px){
  .g-door-list,.g-two{grid-template-columns:1fr}
  .g-ways-list.g-n3{grid-template-columns:1fr}
}
@media (max-width:640px){
  .g-hero-grid{padding-top:calc(var(--head-h) + var(--s6));padding-bottom:var(--s7)}
  .g-hero h1{font-size:clamp(34px,10vw,46px);line-height:1}
  .g-tag{margin-top:var(--s4)}
  .g-door{padding:var(--s5)}
  .g-plan-list.g-n2,.g-plan-list.g-n3,.g-plan-list.g-n4,.g-ways-list.g-n4{grid-template-columns:1fr}
  .g-plan-list{gap:var(--s7)}
  .g-rate-list li{grid-template-columns:1fr;row-gap:6px}
  .g-rate-p{justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;align-items:baseline;column-gap:8px}
  .g-rate-p:has(.g-rate-plus){grid-template-columns:auto 1fr}
  .g-rate-p .g-rate-plus{grid-row:2;grid-column:1 / span 2;max-width:none}
  .g-opts{grid-template-columns:1fr}
  .g-sum-in{padding:var(--s5) var(--s4) var(--s4)}
  [data-g-steps-on] .g-step-nav .btn{flex:1}
  .g-wiz{--n:20px;margin-inline:calc(var(--gutter) * -.5)}
}
@media (prefers-reduced-motion:reduce){
  .g-door,.g-door-t,.g-rate-list a b,.g-progress-bar i{transition:none}
  [data-gform] :is(.sf-err,.start-error):not([hidden]){animation:none}
  [data-gform] .sf-send .btn[aria-busy="true"]>span::after{animation:none}
}

/* ---------- A service's own price, and the way to the plans (Ivo, Oct 4, 2:29 PM: the plan cards live only on the plans page) ---------- */
.g-tag-all{font-size:var(--t-small);font-weight:600}
.sv-own-side p{max-width:32em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}
.sv-own-side .btn{margin-top:var(--s5)}
.sv-own-side .sv-note{margin-top:var(--s5)}
.sv-note{max-width:34em;color:var(--on-dark-2);font-size:var(--t-small);line-height:1.5}
.sv-note a,.sv-own-side a:not(.btn){color:var(--paper);text-decoration:underline;text-decoration-color:var(--pearl-rule);text-underline-offset:3px}