/* Art scenes (art-scenes.js): the colours and type for the four "real thing" scenes, shared by the
   home hero board and the service art. Same visual language as service-art.css: site tokens only,
   one 2px line weight, paper panels. Opacity is driven from the script, so these rules set colour
   and type only. */
.hb-ink { fill: var(--text); }
.hb-lime { fill: var(--shape-lime); }
.hb-lilac { fill: var(--shape-lilac); }
.hb-soft { fill: var(--text); opacity: .28; }
.hb-soft-fill { fill: var(--text); opacity: .14; }
.hb-bar { fill: var(--panel); }
.hb-on-lilac { fill: var(--shape-on-accent); }
.hb-on-lilac-soft { fill: var(--shape-on-accent); opacity: .3; }
.hb-on-ink-soft { fill: var(--surface); opacity: .3; }
.hb-paper { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
/* Window bodies take their team's mist, as the service art does (service-art.css --art-lilac / --art-lime). */
.hb-body-lilac { fill: color-mix(in srgb, var(--shape-lilac) 60%, var(--surface)); stroke: var(--line); stroke-width: 2; }
.hb-body-lime { fill: color-mix(in srgb, var(--shape-lime) 28%, var(--surface)); stroke: var(--line); stroke-width: 2; }
[data-theme='dark'] .hb-body-lilac { fill: color-mix(in srgb, var(--shape-lilac) 14%, var(--surface)); }
[data-theme='dark'] .hb-body-lime { fill: color-mix(in srgb, var(--shape-lime) 12%, var(--surface)); }
.hb-tick { fill: none; stroke: var(--shape-on-accent); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; }
.hb-addr-bg { fill: var(--surface); }
.hb-addr { font: 400 14px/1 var(--shape-font); fill: var(--muted); }
.hb-chip { fill: var(--surface); stroke: var(--line); stroke-width: 2; transition: fill .3s; }
.hb-chip.is-fast { fill: var(--shape-lime); stroke: var(--shape-lime); }
.hb-chip-text { font: 500 14px/1 var(--shape-font); fill: var(--text); }
.hb-chip.is-fast + .hb-chip-text { fill: var(--shape-on-accent); }
.hb-btn-text { font: 500 16px/1 var(--shape-font); fill: var(--shape-on-accent); }

/* panels: shared chrome and the Automate, Assist and Creative pieces */
.hb-panel-title { font: 500 16px/1 var(--shape-font); fill: var(--text); }
.hb-tick-static { stroke-dasharray: none; }
.hb-lime-box { fill: var(--shape-lime); }
.hb-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hb-pulse { fill: var(--shape-lime); stroke: var(--text); stroke-width: 2; }
/* Automate: a real enquiry, sheet and email (panelAutomate) */
.hb-uname { font: 500 16px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--text); }
.hb-umuted { font: 400 13px/1 var(--shape-font); fill: var(--muted); }
.hb-ubody { font: 400 14.5px/1 var(--shape-font); letter-spacing: -.01em; fill: var(--text); }
.hb-ulabel { font: 500 11.5px/1 var(--shape-font); letter-spacing: .07em; fill: var(--muted); }
.hb-initials { font: 500 13px/1 var(--shape-font); fill: var(--shape-on-accent); }
.hb-new-text { font: 500 12px/1 var(--shape-font); fill: var(--shape-on-accent); }
.hb-chip-label { font: 500 14px/1 var(--shape-font); letter-spacing: -.01em; fill: var(--text); }
.hb-rule { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.hb-rule-soft { opacity: .55; }
.hb-row-hot { fill: var(--shape-lime); fill-opacity: .35; }
/* Digital: Rosa's site (panelDigital) */
.hb-site-logo { font: 500 22px/1 var(--shape-font); letter-spacing: -.04em; fill: var(--text); }
.hb-site-link { font: 500 14px/1 var(--shape-font); letter-spacing: -.01em; fill: var(--text); }
.hb-site-btn-ink { font: 500 13.5px/1 var(--shape-font); fill: var(--surface); }
.hb-site-h1 { font: 500 36px/1 var(--shape-font); letter-spacing: -.045em; fill: var(--text); }
.hb-site-sub { font: 400 15px/1 var(--shape-font); letter-spacing: -.01em; fill: var(--muted); }
.hb-uname-s { font: 500 15px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--text); }
.hb-spin { fill: none; stroke: var(--text); stroke-width: 3; stroke-linecap: round; opacity: .45; }
/* Assist: Rosa's inbox (panelAssist) */
.hb-inbox-title { font: 500 20px/1 var(--shape-font); letter-spacing: -.03em; fill: var(--text); }
.hb-count-text { font: 500 13px/1 var(--shape-font); fill: var(--surface); }
.hb-tag-ink { font: 500 12px/1 var(--shape-font); fill: var(--text); }
.hb-ureply { font: 400 13px/1 var(--shape-font); fill: var(--text); }
/* Creative: the brand at work (panelCreative) */
.hb-box-text { font: 500 22px/1 var(--shape-font); letter-spacing: -.04em; fill: var(--shape-on-accent); }
.hb-sticker-text { font: 500 17px/1 var(--shape-font); letter-spacing: -.02em; fill: var(--surface); }
.hb-old { fill: var(--text); fill-opacity: .16; }
.hb-old-name { font: italic 400 40px/1 Georgia, 'Times New Roman', serif; fill: var(--text); fill-opacity: .4; }
.hb-new-name { font: 500 40px/1 var(--shape-font); letter-spacing: -.04em; fill: var(--text); }
.hb-bar-edge { fill: var(--panel); stroke: var(--line); stroke-width: 2; }

/* Digital scenes: shop, booking, care plan (panelShop, panelBooking, panelCare) */
.hb-bignum { font: 500 30px/1 var(--shape-font); letter-spacing: -.04em; fill: var(--text); font-variant-numeric: tabular-nums; }
.hb-prod-title { font: 500 30px/1 var(--shape-font); letter-spacing: -.04em; fill: var(--text); }
.hb-dim { fill: var(--text); fill-opacity: .14; }
.hb-ring { fill: none; stroke: var(--line); stroke-width: 2; }
/* Assist and Creative scenes: chat, feedback, poster, planner, newsletter, mail-merge */
.hb-hugenum { font: 500 64px/1 var(--shape-font); letter-spacing: -.05em; fill: var(--text); font-variant-numeric: tabular-nums; }
.hb-poster-title { font: 500 40px/1 var(--shape-font); letter-spacing: -.045em; fill: var(--shape-on-accent); }
.hb-sel-box { fill: none; stroke: var(--text); stroke-width: 2; }
.hb-handle { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.hb-line-light { fill: none; stroke: var(--surface); stroke-width: 2.5; stroke-linecap: round; }