/* One control rhythm, independent of the historical page scaling. */
html #ser-design{
 --ser-control-joined:4px;
 --ser-control-gap:8px;
 --ser-control-related:12px;
 --ser-control-action:16px;
 --ser-control-touch:44px;
}

/* An icon belongs to its label; adjacent actions need more separation. */
html[data-ser-style] #ser-design[data-active-view] :is(.ser-pill,.ser-service-offers .ser-pill,.ser-release-actions .ser-pill,.sa-about .sa-cta,[data-ser-view="approach"] .sp-cta,.ser-site-header .ser-header-contact){gap:var(--ser-control-related)}
html[data-ser-style] #ser-design[data-active-view] [data-work-layout="04"]>.ser-work-cta .ser-pill{gap:var(--ser-control-related)}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-release-secondary,.ser-home-examples,.ser-link,.ser-offer-case-link,.sa-about .sa-text-link,[data-ser-view="approach"] .sp-example-link,.ser-numbers-choose,.ser-work-links a,.ser-work-visual-caption>a,.ser-barber-caption a){gap:var(--ser-control-gap)}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-release-actions,.sa-about .sa-about-actions,[data-ser-view="approach"] .sp-hero-actions){gap:var(--ser-control-related) var(--ser-control-action)}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-impact-actions,.ser-offer-actions){gap:var(--ser-control-related);flex-wrap:wrap}
html[data-ser-style] #ser-design[data-active-view] .ser-impact-actions>*{max-inline-size:100%}
html[data-ser-style] #ser-design[data-active-view] .ser-impact-actions .ser-numbers-trigger{min-inline-size:0;white-space:normal}

/* Country choices, quick replies and independent tabs share an 8 px gap. */
html[data-ser-style] #ser-design[data-active-view] :is(.ser-barber-market,.ser-home-barber-market)>div,
html[data-ser-style] #ser-design[data-active-view] .ser-offer-markets,
html[data-ser-style] #ser-design[data-active-view] .ser-offers-intro-side .ser-offer-markets>div,
html[data-ser-style] #ser-design[data-active-view] :is(.ser-chat-samples,.ser-demo-questions,.ser-barber-report-tabs,.ser-barber-chat-choices,.ser-numbers-tabs){gap:var(--ser-control-gap)}
html[data-ser-style] #ser-design[data-active-view] .ser-offers-intro-side .ser-offer-markets{gap:var(--ser-control-related)}
html[data-ser-style] #ser-design[data-active-view] .ser-work-barber .ser-barber-chat-choices{gap:var(--ser-control-gap)}
html[data-ser-style] #ser-design[data-active-view] .ser-work-selector :is(.ser-work-business-options,.ser-work-service-options,.ser-work-switch){gap:var(--ser-control-gap)}
html[data-ser-style] #ser-design[data-active-view] .ser-work-selector .ser-work-switch button{gap:var(--ser-control-gap)}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-sector-picker,.ser-service-picker){gap:var(--ser-control-joined)}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-sector-picker,.ser-service-picker) button{gap:var(--ser-control-gap)}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-workflow-tabs,.ser-barber-tabs,.ser-offer-view-switch,.sa-about .sa-scope-tabs){gap:var(--ser-control-joined);padding:var(--ser-control-joined)}
html[data-ser-style] #ser-design[data-active-view] [data-ser-view="approach"] .sp-stage-list{gap:var(--ser-control-gap)}

/* Keep disclosure symbols separate from wrapping titles. */
html[data-ser-style] #ser-design[data-active-view] :is(.sa-about .sa-faq-item summary,[data-ser-view="approach"] .sp-questions summary,.ser-service-offers details>summary){gap:var(--ser-control-action)}
html[data-ser-style] #ser-design[data-active-view] [data-ser-view="approach"] .sp-questions summary>span:last-child{flex:none}
html[data-ser-style] #ser-design[data-active-view] [data-work-layout="04"] :is(.ser-barber-details,.ser-work-details)>summary{gap:var(--ser-control-related)}

/* Forms and calculators use the same label and field spacing. */
html[data-ser-style] #ser-design[data-active-view] .ser-form[data-ser-form]{gap:24px}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-form label,.ser-phone-field,.ser-numbers-fields label,.ser-econ-fields label,.ser-chat-form label){gap:var(--ser-control-gap)}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-numbers-fields,.ser-econ-fields){gap:var(--ser-control-action)}
html[data-ser-style] #ser-design[data-active-view] .ser-chat-form{gap:var(--ser-control-related)}
html[data-ser-style] #ser-design[data-active-view] .ser-phone-caption{min-height:28px}
html[data-ser-style] #ser-design[data-active-view] .ser-phone-caption .ser-phone-mode{display:inline-flex;align-items:center;min-height:28px;min-width:44px;box-sizing:border-box}
html[data-ser-style] #ser-design[data-active-view] .ser-form[data-ser-form="contact"]>label:first-child{grid-template-rows:minmax(28px,auto) auto;align-content:start;align-items:center}
html[data-ser-style] #ser-design[data-active-view] :is(.ser-selector-heading button,.ser-numbers-edit-heading button){min-height:28px;min-width:28px}

/* Inline metric notes stay visually small, with a separate 24 px hit area. */
html[data-ser-style] #ser-design[data-active-view] [data-work-layout="04"] dt>.ser-metric-help{inline-size:24px;block-size:24px;min-inline-size:24px}
html[data-ser-style] #ser-design[data-active-view] [data-work-layout="04"] [data-work-focus-panel] :is(.ser-barber-outcome,.ser-work-outcome,.ser-creator-report) dt:has(>.ser-metric-help){gap:var(--ser-control-joined);min-height:24px}
html[data-ser-style] #ser-design[data-active-view] .ser-metric-popover .ser-metric-close{inline-size:32px;block-size:32px;margin:-4px -4px -4px 0}

/* Preserve the help target and number columns on the narrowest phones. */
@media(max-width:360px){
 html[data-ser-style] #ser-design[data-active-view] [data-work-layout="04"] [data-work-numeric] :is(.ser-work-comparison-labels,.ser-barber-comparison>header,.ser-work-operational-values>div,.ser-barber-comparison dl>div){column-gap:4px}
 html[data-ser-style] #ser-design[data-active-view] [data-work-layout="04"] [data-work-numeric] dt:has(>.ser-metric-help){overflow-wrap:anywhere}
}

/* Footer links already form a separate group; keep their rhythm consistent. */
html[data-ser-style] #ser-design[data-active-view] .ser-choice-footer :is(.ser-footer-contact-links,.ser-footer-navigation){gap:var(--ser-control-gap) 24px}
html[data-ser-style] #ser-design[data-active-view] .ser-choice-footer a{gap:var(--ser-control-gap)}

@media(max-width:620px){
 html[data-ser-style] #ser-design[data-active-view] .ser-form[data-ser-form]{gap:var(--ser-control-action)}
 html[data-ser-style] #ser-design[data-active-view] :is(.sa-about .sa-about-actions,[data-ser-view="approach"] .sp-hero-actions){gap:var(--ser-control-related)}
}
@media(max-width:380px){
 html[data-ser-style] #ser-design[data-active-view] .ser-choice-footer .ser-footer-contact-links{gap:var(--ser-control-gap)}
}
@media(pointer:coarse){
 /* Expand the actual button, never an overlapping invisible hit area. */
 html[data-ser-style] #ser-design[data-active-view] :is(.ser-pill,.ser-release-secondary,.ser-home-examples,.ser-selector-heading button,.ser-sector-picker button,.ser-service-picker button,.ser-workflow-tabs button,.ser-barber-tabs button,.ser-barber-report-tabs button,.ser-offer-view-switch button,.ser-offer-markets button,.ser-demo-nav button,.ser-demo-questions button,.ser-barber-chat-choices button,.ser-barber-chat-book,.ser-barber-chat-human,.ser-numbers-tabs button,.ser-numbers-edit-heading button,.ser-numbers-choose,.ser-econ-reset,.ser-back,.ser-minipill,.ser-room-button,.ser-choice-footer a){box-sizing:border-box;min-height:var(--ser-control-touch)}
 html[data-ser-style] #ser-design[data-active-view] .ser-work-barber .ser-barber-case-heading [data-barber-market],
 html[data-ser-style] #ser-design[data-active-view] [data-barber-market]{min-height:var(--ser-control-touch);min-width:var(--ser-control-touch)}
 html[data-ser-style] #ser-design[data-active-view] [data-work-layout="04"]>.ser-work-cta .ser-pill{min-height:var(--ser-control-touch)}
 html[data-ser-style] #ser-design[data-active-view] :is(.ser-numbers-close,.ser-work-stop){min-height:var(--ser-control-touch);min-width:var(--ser-control-touch)}
 html[data-ser-style] #ser-design[data-active-view] .ser-metric-popover .ser-metric-close{inline-size:var(--ser-control-touch);block-size:var(--ser-control-touch)}
 html[data-ser-style] #ser-design[data-active-view] .ser-phone-caption,
 html[data-ser-style] #ser-design[data-active-view] .ser-phone-caption .ser-phone-mode{min-height:var(--ser-control-touch)}
 html[data-ser-style] #ser-design[data-active-view] .ser-form[data-ser-form="contact"]>label:first-child{grid-template-rows:minmax(var(--ser-control-touch),auto) auto}

 /* These strips had fixed 26–38 px rows. Let the larger controls fit. */
 html[data-ser-style] #ser-design[data-active-view] [data-work-layout="04"]>.ser-work-selector{grid-template-rows:none;grid-auto-rows:minmax(56px,auto)}
 html[data-ser-style] #ser-design[data-active-view] .ser-work-selector :is(.ser-work-filters,.ser-work-services,.ser-work-examples){padding-block:4px}
 html[data-ser-style] #ser-design[data-active-view] .ser-work-selector :is(.ser-work-business-options,.ser-work-service-options,.ser-work-switch){block-size:48px;min-block-size:48px}
 html[data-ser-style] #ser-design[data-active-view] .ser-work-selector :is(.ser-work-business-options,.ser-work-service-options,.ser-work-switch) button{block-size:var(--ser-control-touch);min-height:var(--ser-control-touch)}
 html[data-ser-style] #ser-design[data-active-view] .ser-work-page [data-work-layout="04"] [data-work-numeric] :is(.ser-barber-outcome,.ser-work-outcome){grid-template-rows:minmax(44px,auto) var(--ser-work-primary-height) minmax(0,1fr) auto}
 html[data-ser-style] #ser-design[data-active-view] .ser-work-page [data-work-layout="04"] [data-work-numeric] :is(.ser-barber-case-heading,.ser-work-outcome-heading){height:auto;min-height:var(--ser-control-touch)}
}