/* The home page hero (public/index.html, js/home/): the pitch from behind the corner flag at sunset and under the
   floodlights in dark mode, or on a clear day in light mode, the laptop and phone showing the app in both its looks, and
   "Try your club's name and colours". Grant chose it on 15 Oct 2026 (round 10, design 4 in docs/design/home-options/).
   Everything here is scoped to .hh. Colours come from tokens.css; a few scene-only values (sky, sun, aluminium, grass)
   are written here because they belong to the picture, not the interface. Theme rules come in pairs: one for a theme
   the visitor chose, one for "match my phone" (no data-theme), so the scene is right before any script runs. */

.hh { --muted: var(--text-3); --font-body: var(--font-sans); --h1: 4.75rem; --h1-weight: 850; --h1-track: -0.02em;
  margin-top: calc(-1 * var(--hdr-h) - 1px); overflow: clip; }
:root[data-theme="dark"] .hh { --ph-bg: #0E1619; --ph-text: #E6EEF0; --ph-muted: #97AAB0; --ph-line: #25373E; --ph-card: #152227; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh { --ph-bg: #0E1619; --ph-text: #E6EEF0; --ph-muted: #97AAB0; --ph-line: #25373E; --ph-card: #152227; } }
:root[data-theme="light"] .hh { --ph-bg: #FFFFFF; --ph-text: #0F1A24; --ph-muted: #4D5C6A; --ph-line: #D3DCE5; --ph-card: #EDF1F5; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh { --ph-bg: #FFFFFF; --ph-text: #0F1A24; --ph-muted: #4D5C6A; --ph-line: #D3DCE5; --ph-card: #EDF1F5; } }

@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --ph-bg { syntax: "<color>"; inherits: true; initial-value: #0E1619; }
@property --ph-text { syntax: "<color>"; inherits: true; initial-value: #E6EEF0; }
@property --ph-muted { syntax: "<color>"; inherits: true; initial-value: #97AAB0; }
@property --ph-line { syntax: "<color>"; inherits: true; initial-value: #25373E; }
@property --ph-card { syntax: "<color>"; inherits: true; initial-value: #152227; }
@keyframes r4-wash { 0% { clip-path: circle(0px at 92% 0%); } 100% { clip-path: circle(150% at 92% 0%); } }
@keyframes r4-pitch { 0%, 30% { opacity: 0; } }
@keyframes r7-tw { 0% { opacity: 0.25; } 100% { opacity: 1; } }
@keyframes r8-lid { 0% { transform: translateZ(calc(var(--Db) / -2)) rotateX(-88deg); } 55% { transform: translateZ(calc(var(--Db) / -2)) rotateX(18deg); } 100% { transform: translateZ(calc(var(--Db) / -2)) rotateX(12deg); } }
@keyframes r8-sweep { 0% { background-position: 120% 0px; } 100% { background-position: -40% 0px; } }
@keyframes cl10 { 0% { translate: -4vw; opacity: 0; } 15% { opacity: var(--o, 1); } 85% { opacity: var(--o, 1); } 100% { translate: 10vw; opacity: 0; } }
.hh { position: relative; isolation: isolate; padding-top: 68px; }
@media (min-width: 1024px) { .hh { padding-top: 84px; } }
.hh__in { position: static; }
.hh__in > * { position: relative; z-index: 1; }
.hh__h1 { font-family: var(--font-display); font-size: clamp(2.75rem, 1.5rem + 5vw, var(--h1)); font-weight: var(--h1-weight, 750); line-height: 1; letter-spacing: var(--h1-track, -0.03em); text-wrap: balance; }
.hh__h1 span { display: block; }
/* The page sizes letters as the old font did (font-size-adjust in app.css). The headline, sized in the design review, and the
   little app screens in the laptop and phone keep their own sizes. */
.hh .hh__h1, .hh .lap3, .hh .dphone { font-size-adjust: none; }
.hh__note { margin-top: 14px; font-size: 0.875rem; color: var(--muted); }
@media (min-width: 1280px) { .hh__h1 { font-size: var(--h1); } }
.hh .dphone { --w: 280px; position: relative; width: var(--w); aspect-ratio: 9 / 19.5; flex: 0 0 auto; border-radius: calc(var(--w) * .16); padding: calc(var(--w) * .034); background: linear-gradient(155deg, rgb(74, 81, 78) 0%, rgb(26, 30, 28) 22%, rgb(10, 12, 11) 60%, rgb(37, 42, 40) 100%); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1.5px inset, rgba(0, 0, 0, 0.6) 0px 0px 0px 4px inset, rgba(0, 0, 0, 0.75) 0px 60px 100px -40px, rgba(0, 0, 0, 0.6) 0px 24px 40px -24px; }
.hh .dphone::before { content: ""; position: absolute; right: -2px; top: 22%; width: 3px; height: 12%; border-radius: 2px; background: rgb(43, 48, 46); }
.hh .dphone__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--w) * .13); background: var(--ph-bg); color: var(--ph-text); font: 400 12.5px/1.4 var(--font-body); display: flex; flex-direction: column; }
.hh .dphone__screen::after { content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 26%, transparent 40%); }
.hh .dphone__island { position: absolute; z-index: 3; top: 9px; left: 50%; translate: -50%; width: 30%; height: 22px; border-radius: 12px; background: rgb(5, 6, 6); }
.hh .dphone__status { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 11px 20px 4px; font-weight: 700; font-size: 11.5px; }
.hh .dphone__status i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid currentcolor; opacity: 0.85; position: relative; }
.hh .dphone__status i::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentcolor; border-radius: 1px; }
.hh .jp__band { position: relative; margin-top: -38px; padding: 46px 14px 14px; color: var(--on-club); overflow: hidden; transition: background-color 0.35s, color 0.35s; background: linear-gradient(160deg, color-mix(in srgb, var(--club) 82%, #fff) 0%, var(--club) 45%, color-mix(in srgb, var(--club) 75%, #000) 100%); }
/* The club's playing surface behind its name, the same line drawing the real join page uses (public/img/sports/<look>.svg, as a mask, so it
   takes the band's text colour). js/home/club-look.js swaps it for each club's sport, so a rugby club shows a rugby pitch. */
.hh .jp__pitch { position: absolute; right: -30px; bottom: -18px; width: 210px; aspect-ratio: 400 / 260; opacity: 0.2; background: var(--on-club); -webkit-mask: var(--pitch) center / 100% 100% no-repeat; mask: var(--pitch) center / 100% 100% no-repeat; }
.hh .jp__band::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 4px; background: var(--club-2); transition: background-color 0.35s; }
.hh .jp__top { position: relative; display: flex; align-items: center; gap: 9px; }
.hh .crest3d { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; font-weight: 800; font-size: 13px; color: var(--club); transition: background-color 0.35s, color 0.35s; background: linear-gradient(150deg, color-mix(in srgb, var(--club-2) 70%, #fff), var(--club-2) 55%, color-mix(in srgb, var(--club-2) 82%, #000)); box-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px inset, rgba(0, 0, 0, 0.18) 0px -2px 3px inset, rgba(0, 0, 0, 0.5) 0px 4px 10px -4px; }
.hh .jp__club { font-weight: 800; font-size: 13.5px; line-height: 1.2; overflow-wrap: anywhere; }
.hh .jp__club small { display: block; font-weight: 600; font-size: 11px; opacity: 0.85; }
.hh .jp__in { margin-left: auto; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.16); }
.hh .jp__body { padding: 14px 13px; display: grid; gap: 8px; }
.hh .jp__title { font: 800 18px/1.15 var(--font-display); overflow-wrap: anywhere; }
.hh .jp__lead { color: var(--ph-muted); font-size: 11.5px; }
.hh .jp__label { margin-top: 4px; font-size: 11px; font-weight: 800; }
.hh .jp__opt { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0px 11px; border: 1px solid var(--ph-line); border-radius: 11px; background: var(--ph-card); font-size: 12px; }
.hh .jp__opt b { margin-left: auto; font-size: 12px; }
.hh .jp__opt small { display: block; color: var(--ph-muted); font-size: 10.5px; }
.hh .jp__opt i { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ph-muted); flex: 0 0 auto; }
.hh .jp__opt--on { border: 2px solid var(--bw-ink); background: color-mix(in srgb, var(--bw-ink) 8%, var(--ph-card)); }
.hh .jp__opt--on i { border: 5px solid var(--bw-ink); }
.hh .jp__add { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0px 11px; border: 1.5px dashed var(--ph-line); border-radius: 11px; color: var(--ph-muted); font-size: 11.5px; font-weight: 700; }
.hh .jp__add b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bw-ink); color: var(--ph-bg); font-size: 13px; line-height: 1; }
.hh .jp__sel { display: flex; justify-content: space-between; align-items: center; min-height: 38px; padding: 0px 11px; border: 1px solid var(--ph-line); border-radius: 11px; font-size: 12px; }
.hh .jp__sel::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ph-muted); border-bottom: 2px solid var(--ph-muted); rotate: 45deg; translate: 0px -2px; }
.hh .jp__send { display: grid; place-items: center; min-height: 42px; margin-top: 4px; border-radius: 12px; color: var(--bw-on); font-weight: 800; font-size: 13px; background: var(--bw-fill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px var(--bw-fill); }
.hh .jp__small { text-align: center; color: var(--ph-muted); font-size: 10.5px; }
.hh .ap__stat { padding: 9px 10px; border-radius: 12px; background: var(--ph-card); border: 1px solid var(--ph-line); }
.hh .ap__stat small { display: block; color: var(--ph-muted); font-size: 10px; }
.hh .ap__stat b { font-variant-numeric: tabular-nums; }
.hh .ap__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 18%, var(--ph-card)); font-size: 10px; font-weight: 800; }
.hh .pill { font-style: normal; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 999px; }
/* The product's status marks (the same as the app: a ring with a cross, a plus, a bar; red is the one solid mark, half a ring is part paid), drawn small. */
.hh .mk { box-sizing: border-box; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid currentColor; font-style: normal; line-height: 0; }
.hh .mk svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.hh .mk--bad { color: #fff; background: rgb(200, 55, 45); border-color: rgb(200, 55, 45); }
.hh .mk--wait { color: rgb(154, 103, 0); }
:root[data-theme="dark"] .hh .mk--bad { color: #3A0905; background: #FF8A7D; border-color: #FF8A7D; }
:root[data-theme="dark"] .hh .mk--wait { color: rgb(252, 211, 141); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .mk--bad { color: #3A0905; background: #FF8A7D; border-color: #FF8A7D; } :root:not([data-theme]) .hh .mk--wait { color: rgb(252, 211, 141); } }
.hh .dev-dark .mk--bad { color: #3A0905; background: #FF8A7D; border-color: #FF8A7D; }
.hh .dev-dark .mk--wait { color: rgb(252, 211, 141); }
.hh .dev-light .mk--bad { color: #fff; background: rgb(200, 55, 45); border-color: rgb(200, 55, 45); }
.hh .dev-light .mk--wait { color: rgb(154, 103, 0); }
.hh .pill--ok { color: rgb(11, 125, 75); background: color-mix(in srgb, rgb(34, 197, 94) 16%, transparent); }
.hh .pill--bad { color: rgb(179, 38, 30); background: color-mix(in srgb, rgb(239, 68, 68) 14%, transparent); }
.hh .pill--wait { color: rgb(154, 103, 0); background: color-mix(in srgb, rgb(245, 158, 11) 16%, transparent); }
:root[data-theme="dark"] .hh .pill--ok { color: rgb(110, 231, 168); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .pill--ok { color: rgb(110, 231, 168); } }
:root[data-theme="dark"] .hh .pill--bad { color: rgb(252, 165, 165); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .pill--bad { color: rgb(252, 165, 165); } }
:root[data-theme="dark"] .hh .pill--wait { color: rgb(252, 211, 141); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .pill--wait { color: rgb(252, 211, 141); } }
.hh .win-wrap { position: relative; width: calc(820px * var(--s, 1)); height: calc(520px * var(--s, 1)); flex: 0 0 auto; }
.hh .win { position: absolute; left: 0px; top: 0px; width: 820px; height: 520px; transform: scale(var(--s, 1)); transform-origin: 0px 0px; border-radius: 14px; overflow: hidden; background: var(--ph-bg); color: var(--ph-text); font: 400 13px/1.4 var(--font-body); display: grid; grid-template-rows: 34px 1fr; box-shadow: inset 0 0 0 1px var(--ph-line), 0 70px 120px -40px rgba(0, 0, 0, .75), 0 20px 40px -20px rgba(0, 0, 0, .5); }
.hh .win__bar { display: flex; align-items: center; gap: 10px; padding: 0px 12px; background: color-mix(in srgb, var(--ph-card) 70%, var(--ph-bg)); border-bottom: 1px solid var(--ph-line); }
.hh .win__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ph-line); }
.hh .win__url { margin-left: 10px; flex: 1 1 0%; max-width: 320px; padding: 4px 12px; border-radius: 8px; background: var(--ph-bg); color: var(--ph-muted); font-size: 11.5px; }
.hh .win__body { display: grid; grid-template-columns: 170px 1fr; min-height: 0px; }
.hh .win__side { display: grid; align-content: start; gap: 3px; padding: 14px 10px; border-right: 1px solid var(--ph-line); background: var(--ph-card); }
.hh .win__club { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 8px 12px; border-radius: 10px; font-weight: 800; font-size: 12.5px; line-height: 1.2;
  color: var(--on-club); background: linear-gradient(160deg, var(--club) 0%, color-mix(in srgb, var(--club) 82%, #000) 100%); box-shadow: inset 0 -3px 0 var(--club-2); transition: background-color 0.35s, color 0.35s; }
.hh .win__side .nav-i { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; color: var(--ph-muted); font-weight: 600; }
.hh .nav-i__ico { width: 15px; height: 15px; flex: none; }
.hh .nav-i__n { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px; font: 800 10px/1.5 var(--font-body); text-align: center; color: #fff; background: #B42318; }
.hh .win__side .nav-i.on { color: var(--ph-text); background: color-mix(in srgb, var(--ph-text) 8%, transparent); box-shadow: inset 3px 0 0 var(--club-ink); }
.hh .win__main { padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-height: 0px; overflow: hidden; }
.hh .win__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.hh .win__head b { font: 800 21px/1.15 var(--font-display); }
.hh .win__head small { display: block; margin-top: 3px; color: var(--ph-muted); }
.hh .win__btn { padding: 7px 12px; border-radius: 9px; font-weight: 800; font-size: 12px; color: var(--bw-on); background: var(--bw-fill); }
.hh .win__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hh .win__table { display: grid; border: 1px solid var(--ph-line); border-radius: 12px; overflow: hidden; }
.hh .win__tr { display: grid; grid-template-columns: 28px minmax(0, 236px) auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--ph-line); }
.hh .win__tr .mk { justify-self: start; }
.hh .win__tr:last-child { border-bottom: 0px; }
.hh .win__tr b { font-size: 12.5px; }
.hh .win__tr small { color: var(--ph-muted); font-size: 11.5px; }
.hh .win__screen { display: grid; gap: 12px; align-content: start; }
.hh .jp__band { background: linear-gradient(160deg, color-mix(in srgb, var(--club-was, var(--club)) 82%, #fff) 0%, var(--club-was, var(--club)) 45%, color-mix(in srgb, var(--club-was, var(--club)) 75%, #000) 100%); }
.hh .jp__band::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(160deg, color-mix(in srgb, var(--club) 82%, #fff) 0%, var(--club) 45%, color-mix(in srgb, var(--club) 75%, #000) 100%); }
/* As in the real app, the club's colour is the frame (the phone's band, the laptop's band behind the crest and the bar beside its current menu
   item); buttons and chosen options stay Braidwood green on both devices (css/effects.css). */
.hh [data-club-scope] .win, .hh [data-club-scope] .dphone { --primary: var(--bw-fill, #3FBF6F); --on-primary: var(--bw-on, #03201A); }
.hh .win__club .crest3d { width: 36px; height: 36px; border-radius: 9px; font-size: 11px; }
/* The laptop shows the club's Money page as the app has it since 15 Oct 2026 (Grant, 16 Oct 2026: "payments is now money"): figure tiles,
   a heading in the club's colour over who owes, each with a status, the amount and a Remind button. */
.hh .win .ap__stat b { display: block; margin: 2px 0 1px; font: 800 19px/1.2 var(--font-display); }
.hh .win .ap__stat small + b + small { font-size: 9.5px; }
.hh .win__owed { color: #B42318; }
.hh .dev-dark .win__owed { color: #FCA5A5; }
.hh .win__sech { display: flex; align-items: center; gap: 10px; }
.hh .win__sech > span:nth-child(2) { flex: 1; min-width: 0; }
.hh .win__sech b { display: block; font: 800 16px/1.2 var(--font-display); color: var(--bw-ink); }
.hh .win__sech small { color: var(--ph-muted); font-size: 11px; }
.hh .win__secico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; font: 800 14px/1 var(--font-body); color: var(--bw-ink); box-shadow: inset 0 0 0 1.5px var(--bw-ink); background: color-mix(in srgb, var(--bw-ink) 10%, transparent); }
.hh .win__amt { font-variant-numeric: tabular-nums; text-align: right; }
.hh .win__act { padding: 4px 9px; border-radius: 8px; border: 1px solid var(--ph-line); font-size: 11px; font-weight: 700; white-space: nowrap; }
.hh .win__tr small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh .win__tr b + small { display: block; }
.hh .win__side .nav-i { transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; }
.hh { overflow: clip; }
.hh__in { position: relative; z-index: 1; display: grid; gap: 28px; padding-block: 112px 48px; }
/* On a computer the hero is as tall as the window allows (600px to 820px), with little below the devices, so the LED board under it
   is on the first screen of a laptop or desktop at 100% zoom (Grant, 16 Oct 2026: "it is just off screen"). A short laptop window
   also gets a slightly smaller laptop and phone (below, after their own sizes). */
@media (min-width: 1024px) { .hh__in { grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); gap: 40px; align-items: center; padding-block: 64px 40px;
  min-height: clamp(600px, calc(100vh - 160px), 820px); min-height: clamp(600px, calc(100svh - 160px), 820px); } }
@media (min-width: 1024px) and (max-height: 860px) { .hh__in { padding-top: 40px; } }
.hh__h1 { font-size: clamp(3rem, 1.8rem + 4vw, var(--h1)); line-height: 0.98; }
.hh .dev-dark { --ph-bg: #0E1619; --ph-text: #E6EEF0; --ph-muted: #97AAB0; --ph-line: #25373E; --ph-card: #152227; --club-ink: var(--club-ink-d, #6FD996); --bw-ink: #6FD996; --bw-fill: #3FBF6F; --bw-on: #03201A; }
.hh .dev-dark.dphone, .hh .dev-dark .win { --primary: var(--bw-fill); --on-primary: var(--bw-on); }
.hh .dev-dark .pill--ok { color: rgb(110, 231, 168); }
.hh .dev-dark .pill--bad { color: rgb(252, 165, 165); }
.hh .dev-dark .pill--wait { color: rgb(252, 211, 141); }
.hh .turf { position: absolute; inset: 0px; z-index: 0; pointer-events: none; }
.hh .turf canvas { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; }
.hh .turf__sky { position: absolute; inset: 0px; }
.hh .turf__photo { display: none; position: absolute; inset: 0px; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hh .sky7 { position: absolute; inset: 0px; overflow: hidden; --d: var(--dusk, 1); }
/* With scripts, the first paint is the start of the scene (sunset or morning), so it never flashes the finished sky first. */
.hh .sky7:where(.js *) { --d: var(--dusk, 0); }
.hh .sky7__night { position: absolute; inset: 0px; }
.hh .sky7__gold, .hh .sky7__blue { position: absolute; inset: 0px; }
.hh .sky7__gold { opacity: calc(1 - var(--d) * 1.6); }
.hh .sky7__blue { opacity: calc(1 - max(0, var(--d) - .5) * 2); }
:root[data-theme="dark"] .hh .sky7__night { background: linear-gradient(rgb(2, 6, 16) 0%, rgb(8, 21, 48) 46%, rgb(11, 27, 56) 49%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky7__night { background: linear-gradient(rgb(2, 6, 16) 0%, rgb(8, 21, 48) 46%, rgb(11, 27, 56) 49%); } }
:root[data-theme="dark"] .hh .sky7__blue { background: linear-gradient(rgb(11, 26, 68) 0%, rgb(58, 62, 122) 30%, rgb(140, 92, 134) 42%, rgb(194, 122, 112) 49%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky7__blue { background: linear-gradient(rgb(11, 26, 68) 0%, rgb(58, 62, 122) 30%, rgb(140, 92, 134) 42%, rgb(194, 122, 112) 49%); } }
:root[data-theme="dark"] .hh .sky7__gold { background: linear-gradient(#2A1B3A 0%, #C85A3C 30%, var(--sunset, #F2A25C) 44%, #F6C27A 49%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky7__gold { background: linear-gradient(#2A1B3A 0%, #C85A3C 30%, var(--sunset, #F2A25C) 44%, #F6C27A 49%); } }
.hh .sky7__stars { position: absolute; inset: 0px 0px 52%; opacity: calc(max(0, var(--d) - .55) * 2.2); }
.hh .sky7__stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgb(255, 255, 255) 0px 0px 4px; animation: 3s ease-in-out 0s infinite alternate none running r7-tw; }
@media (prefers-reduced-motion: reduce) { .hh .sky7__stars i { animation: auto ease 0s 1 normal none running none; } }
.hh .lap3 { --s: .4; --Wl: calc(820px * var(--s) + 22px); --Hl: calc(520px * var(--s) + 22px); --Tl: 7px; --Wb: calc(var(--Wl) + 22px); --Db: calc(var(--Hl) * .72); --Tb: 13px; --ry: -24deg; --rx: -15deg; position: relative; height: 340px; perspective: 1600px; perspective-origin: 50% 30%; }
.hh .lap3__view { position: absolute; left: 44%; top: 62%; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--spin, 0deg))); transition: transform 1.6s cubic-bezier(0.3, 0.8, 0.25, 1); }
.hh .lap3__base, .hh .lap3__lid { position: absolute; left: 0px; top: 0px; transform-style: preserve-3d; }
.hh .lap3 .f { position: absolute; left: 50%; top: 50%; backface-visibility: hidden; }
.hh .f--top { width: var(--Wb); height: var(--Db); margin: calc(var(--Db) / -2) 0 0 calc(var(--Wb) / -2); transform: rotateX(90deg); border-radius: 6px 6px 14px 14px; background: radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--club, #17663A) calc(var(--glowk, 0) * 30%), transparent), transparent 70%), linear-gradient(180deg, var(--al-2), var(--al-1) 70%, var(--al-3)); box-shadow: inset 0 0 0 1px var(--al-edge); }
.hh .f--top::before { content: ""; position: absolute; left: 6.5%; right: 6.5%; top: 8%; height: 52%; border-radius: 6px; padding: 0px; background: repeating-linear-gradient(0deg, var(--well) 0 3.2%, transparent 3.2% 16.66%), repeating-linear-gradient(90deg, var(--well) 0 .9%, var(--key) .9% 6.66%), var(--well); box-shadow: rgba(0, 0, 0, 0.55) 0px 1px 2px inset, rgba(255, 255, 255, 0.06) 0px 1px 0px; }
.hh .f--top::after { content: ""; position: absolute; left: 34%; right: 34%; bottom: 7%; height: 27%; border-radius: 7px; background: linear-gradient(170deg, var(--pad-1), var(--pad-2)); box-shadow: inset 0 0 0 1px var(--al-edge), inset 0 1px 0 rgba(255, 255, 255, .12); }
.hh .f--front { width: var(--Wb); height: var(--Tb); margin: calc(var(--Tb) / -2) 0 0 calc(var(--Wb) / -2); transform: translateY(calc(var(--Tb) / 2)) translateZ(calc(var(--Db) / 2)); border-radius: 0px 0px 12px 12px; background: linear-gradient(180deg, var(--al-hi), var(--al-3) 40%, var(--al-4)); }
.hh .f--front::after { content: ""; position: absolute; left: 44%; right: 44%; top: 0px; height: 4px; border-radius: 0px 0px 6px 6px; background: rgba(0, 0, 0, 0.35); }
.hh .f--back { width: var(--Wb); height: var(--Tb); margin: calc(var(--Tb) / -2) 0 0 calc(var(--Wb) / -2); transform: translateY(calc(var(--Tb) / 2)) translateZ(calc(var(--Db) / -2)) rotateY(180deg); background: var(--al-4); }
.hh .f--left, .hh .f--right { width: var(--Db); height: var(--Tb); margin: calc(var(--Tb) / -2) 0 0 calc(var(--Db) / -2); background: linear-gradient(180deg, var(--al-hi), var(--al-3) 45%, var(--al-4)); }
.hh .f--left { transform: translateX(calc(var(--Wb) / -2)) translateY(calc(var(--Tb) / 2)) rotateY(-90deg); }
.hh .f--right { transform: translateX(calc(var(--Wb) / 2)) translateY(calc(var(--Tb) / 2)) rotateY(90deg); }
.hh .lap3__shadow { position: absolute; left: 0px; top: 0px; width: calc(var(--Wb) * 1.15); height: calc(var(--Db) * 1.3); margin: calc(var(--Db) * -.65) 0 0 calc(var(--Wb) * -.575); transform: translateY(calc(var(--Tb) + 1px)) rotateX(90deg); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.35) 55%, transparent); filter: blur(6px); }
.hh .lap3__spill { position: absolute; left: 0px; top: 0px; width: calc(var(--Wb) * 1.6); height: calc(var(--Db) * 1.8); margin: calc(var(--Db) * -1.5) 0 0 calc(var(--Wb) * -.8); transform: translateY(calc(var(--Tb) + 2px)) rotateX(90deg); border-radius: 50%; opacity: calc(var(--glowk, 0) * .55); background: radial-gradient(closest-side, color-mix(in srgb, var(--club-ink, #6FD996) 60%, transparent), transparent); filter: blur(10px); transition: opacity 1s; }
.hh .lap3__lid { transform: translateZ(calc(var(--Db) / -2)) rotateX(var(--open, 12deg)); }
.hh .lap3 .f--screen, .hh .lap3 .f--lidback { top: 0px; width: var(--Wl); height: var(--Hl); margin: calc(var(--Hl) * -1) 0 0 calc(var(--Wl) / -2); border-radius: 12px 12px 3px 3px; }
.hh .f--screen { padding: 11px; background: rgb(7, 9, 14); box-shadow: inset 0 0 0 1.5px #2B3242, 0 0 0 1px var(--al-edge); }
.hh .f--screen::before { content: ""; position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgb(30, 37, 51); }
.hh .f--screen::after { content: ""; position: absolute; inset: 11px; border-radius: 4px; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 38%); }
.hh .f--screen .win { box-shadow: none; border-radius: 4px; }
.hh .f--lidback { transform: translateZ(calc(var(--Tl) * -1)) rotateY(180deg); display: grid; place-items: center; background: radial-gradient(90% 70% at 30% 20%, var(--al-hi), transparent 60%), linear-gradient(160deg, var(--al-2), var(--al-1) 55%, var(--al-3)); box-shadow: inset 0 0 0 1px var(--al-edge); }
.hh .lap3 .f--lidtop { top: 0px; width: var(--Wl); height: var(--Tl); margin: calc(var(--Hl) * -1 - var(--Tl) / 2) 0 0 calc(var(--Wl) / -2); transform: translateZ(calc(var(--Tl) / -2)) rotateX(90deg); background: linear-gradient(90deg, var(--al-3), var(--al-hi) 30%, #fff 50%, var(--al-hi) 70%, var(--al-3)); border-radius: 4px; }
.hh .lap3 .f--lidleft, .hh .lap3 .f--lidright { top: 0px; width: var(--Tl); height: var(--Hl); background: linear-gradient(90deg, var(--al-3), var(--al-hi)); }
.hh .lap3 .f--lidleft { margin: calc(var(--Hl) * -1) 0 0 calc(var(--Wl) / -2 - var(--Tl) / 2); transform: translateZ(calc(var(--Tl) / -2)) rotateY(-90deg); }
.hh .lap3 .f--lidright { margin: calc(var(--Hl) * -1) 0 0 calc(var(--Wl) / 2 - var(--Tl) / 2); transform: translateZ(calc(var(--Tl) / -2)) rotateY(90deg); }
.hh .lap3__logo { width: 30%; aspect-ratio: 616 / 482; background: linear-gradient(160deg, rgb(255, 255, 255), rgb(228, 255, 244) 60%, rgb(191, 245, 221)); mask: url("/img/brand/v2/braidwood-mark-white.svg") center center / contain no-repeat; opacity: 0.22; filter: none; transition: opacity 1.2s, filter 1.2s; }
.hh .lap3__logowrap { display: grid; place-items: center; width: 100%; height: 100%; transition: filter 1.2s; }
:root[data-theme="dark"] .hh .lap3 { --al-1: #3A4152; --al-2: #4A5266; --al-3: #2A303D; --al-4: #191D26; --al-hi: #6E788F; --al-edge: rgba(255, 255, 255, .08); --key: #1B1F28; --well: #252B37; --pad-1: #434B5E; --pad-2: #363D4D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .lap3 { --al-1: #3A4152; --al-2: #4A5266; --al-3: #2A303D; --al-4: #191D26; --al-hi: #6E788F; --al-edge: rgba(255, 255, 255, .08); --key: #1B1F28; --well: #252B37; --pad-1: #434B5E; --pad-2: #363D4D; } }
@media (prefers-reduced-motion: no-preference) { .hh .lap3[data-lid="wait"] .lap3__lid { transform: translateZ(calc(var(--Db) / -2)) rotateX(-88deg); } }
.hh .lap3 > .dphone { position: absolute; --w: 260px; zoom: 0.52; left: 64%; top: 14%; transform: rotateY(-10deg); }
@media (min-width: 640px) { .hh .lap3 { --s: .58; height: 470px; } }
@media (min-width: 640px) { .hh .lap3 > .dphone { zoom: 0.74; } }
@media (min-width: 1024px) { .hh .lap3 { --s: .62; height: 600px; } }
@media (min-width: 1024px) { .hh .lap3__view { left: 42%; top: 66%; } }
@media (min-width: 1024px) { .hh .lap3 > .dphone { zoom: 0.9; left: 67%; top: 11%; } }
@media (min-width: 1024px) and (max-height: 820px) { .hh .lap3 { --s: .54; height: 520px; } .hh .lap3 > .dphone { zoom: 0.78; } }
.hh [data-dev-mode] { transition: --ph-bg 0.9s, --ph-text 0.9s, --ph-muted 0.9s, --ph-line 0.9s, --ph-card 0.9s; }
.hh [data-dev-mode] { position: relative; }
.hh .f--screen[data-dev-mode]::after, .hh .dphone[data-dev-mode] .dphone__screen::after { transition: opacity 0.3s; }
.hh .devmode { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; justify-self: center; font-size: 0.8125rem; color: var(--muted); }
.hh .devmode__pause { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0px 12px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--text); font: 600 .8125rem/1 var(--font-body); cursor: pointer; }
.hh .devmode__now b { color: var(--text); }
.hh .devmode > span, .hh .devmode__now { color: var(--text); text-shadow: 0 1px 10px var(--page), 0 0 2px var(--page); }
.hh .devwrap { display: grid; }
@media (min-width: 1024px) { .hh .devwrap .devmode { position: absolute; z-index: 3; left: 4%; bottom: 4%; margin: 0px; } }
.hh .turf canvas[data-pitch] { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; }
.hh .sky7 { --d: var(--dusk, 1); }
:root[data-theme="dark"] .hh .sky7__night { background: linear-gradient(rgb(1, 4, 12) 0%, rgb(6, 18, 48) 40%, rgb(11, 27, 56) 49%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky7__night { background: linear-gradient(rgb(1, 4, 12) 0%, rgb(6, 18, 48) 40%, rgb(11, 27, 56) 49%); } }
:root[data-theme="dark"] .hh .sky7__gold { background: linear-gradient(rgb(42, 27, 58) 0%, rgb(200, 90, 60) 30%, rgb(242, 162, 92) 44%, rgb(246, 194, 122) 49%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky7__gold { background: linear-gradient(rgb(42, 27, 58) 0%, rgb(200, 90, 60) 30%, rgb(242, 162, 92) 44%, rgb(246, 194, 122) 49%); } }
:root[data-theme="dark"] .hh .sky7__stars { display: block; inset: 0px 0px 50%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky7__stars { display: block; inset: 0px 0px 50%; } }
.hh .sky7__stars { mask-image: linear-gradient(rgb(0, 0, 0) 26%, transparent 40%); }
@media (min-width: 1024px) { .hh .sky7__stars { mask-image: linear-gradient(90deg, transparent 38%, rgb(0, 0, 0) 52%); } }
.hh .sky7__stars i.big { width: 3px; height: 3px; box-shadow: rgb(255, 255, 255) 0px 0px 6px 1px; }
:root[data-theme="dark"] .hh .sky7__lampglow { opacity: var(--lit, 0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky7__lampglow { opacity: var(--lit, 0); } }
.hh .sun9 { position: absolute; left: var(--sun-x, 60%); top: var(--sun-y, 30%); width: clamp(34px, 6vmin, 64px); aspect-ratio: 1 / 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; }
.hh .sky9__halo { position: absolute; inset: 0px; pointer-events: none; background: radial-gradient(42vmax 26vmax at var(--sun-x, 60%) var(--sun-y, 30%), var(--halo, transparent), transparent 70%); }
:root[data-theme="dark"] .hh .sun9 { background: radial-gradient(circle, rgb(255, 246, 220) 0px, rgb(255, 246, 220) 36%, rgb(255, 208, 138) 62%, rgb(255, 159, 90) 100%); box-shadow: rgba(255, 150, 80, 0.55) 0px 0px 50px 22px, rgba(255, 120, 60, 0.28) 0px 0px 150px 70px; opacity: calc(1 - var(--d) * 1.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sun9 { background: radial-gradient(circle, rgb(255, 246, 220) 0px, rgb(255, 246, 220) 36%, rgb(255, 208, 138) 62%, rgb(255, 159, 90) 100%); box-shadow: rgba(255, 150, 80, 0.55) 0px 0px 50px 22px, rgba(255, 120, 60, 0.28) 0px 0px 150px 70px; opacity: calc(1 - var(--d) * 1.1); } }
:root[data-theme="dark"] .hh .sky9__halo { --halo: rgba(255, 140, 80, .5); opacity: calc(1 - var(--d)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky9__halo { --halo: rgba(255, 140, 80, .5); opacity: calc(1 - var(--d)); } }
:root[data-theme="dark"] .hh .sky9__clouds { opacity: calc(1 - var(--d) * 1.5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .sky9__clouds { opacity: calc(1 - var(--d) * 1.5); } }
.hh .sky9__clouds { position: absolute; inset: 0px; }
.hh .replay9 { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0px 12px; margin: 12px 0px 0px -12px; border: 0px; background: none; color: var(--muted); font: 600 .8125rem/1 var(--font-body); cursor: pointer; }
.hh .replay9 svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .hh .replay9 { display: none; } }
.hh .cu10 { position: absolute; left: var(--x); top: var(--y); width: var(--w); pointer-events: none; animation: cl10 var(--dur, 220s) linear var(--delay, 0s) infinite; }
.hh .cu10 { aspect-ratio: 2.6 / 1; --o: .95; filter: blur(7px); background: radial-gradient(20% 34% at 34% 50%, rgb(255, 255, 255) 45%, transparent 75%), radial-gradient(24% 42% at 52% 38%, rgb(255, 255, 255) 45%, transparent 75%), radial-gradient(18% 32% at 68% 52%, rgb(255, 255, 255) 45%, transparent 75%), radial-gradient(13% 22% at 21% 60%, rgb(255, 255, 255) 40%, transparent 75%), radial-gradient(40% 22% at 50% 66%, rgba(206, 220, 240, 0.95) 50%, transparent 78%); }
:root[data-theme="dark"] .hh .cu10 { filter: blur(4px) sepia(0.6) saturate(2.4) hue-rotate(-12deg) brightness(0.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .cu10 { filter: blur(4px) sepia(0.6) saturate(2.4) hue-rotate(-12deg) brightness(0.95); } }
.hh .turf__blur { position: absolute; inset: 0px; pointer-events: none; display: none; }
/* By day, the scene behind the words is softly out of focus and a little lighter, so the poles, lines and stand edges never run
   through the words (Grant, 16 Oct 2026: "still a little tricky to read"). Above the devices on a tablet, beside them on a computer. A
   phone has none: its words sit under the pitch window, not on it, and the window stays sharp. */
@media (min-width: 640px) { :root[data-theme="light"] .hh .turf__blur { display: block; -webkit-backdrop-filter: blur(9px) brightness(1.08); backdrop-filter: blur(9px) brightness(1.08);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 58%); mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 58%); } }
@media (min-width: 640px) and (prefers-color-scheme: light) { :root:not([data-theme]) .hh .turf__blur { display: block; -webkit-backdrop-filter: blur(9px) brightness(1.08); backdrop-filter: blur(9px) brightness(1.08);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 58%); mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 58%); } }
@media (min-width: 1024px) {
  :root[data-theme="light"] .hh .turf__blur { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 36%, transparent 54%); mask-image: linear-gradient(90deg, #000 0, #000 36%, transparent 54%); }
}
@media (min-width: 1024px) and (prefers-color-scheme: light) { :root:not([data-theme]) .hh .turf__blur { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 36%, transparent 54%); mask-image: linear-gradient(90deg, #000 0, #000 36%, transparent 54%); } }
@media (prefers-reduced-motion: reduce) { .hh .cu10 { animation: auto ease 0s 1 normal none running none; opacity: var(--o, 1); translate: 3vw; } }
.hh .win__sec { margin: 10px 10px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ph-muted); }
.hh .win__foot { margin-top: 12px; border-top: 1px solid var(--ph-line); border-radius: 0px !important; padding-top: 12px !important; }
:root[data-theme="dark"] .hh .turf__sky { background: radial-gradient(28% 20% at 12% 40%, rgba(205, 225, 255, calc(.06 + var(--lit, 1) * .26)), transparent 70%), radial-gradient(30% 22% at 88% 36%, rgba(205, 225, 255, calc(.06 + var(--lit, 1) * .3)), transparent 70%), linear-gradient(#030817 0%, #0A1934 46%, #0E1A1E 49%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .turf__sky { background: radial-gradient(28% 20% at 12% 40%, rgba(205, 225, 255, calc(.06 + var(--lit, 1) * .26)), transparent 70%), radial-gradient(30% 22% at 88% 36%, rgba(205, 225, 255, calc(.06 + var(--lit, 1) * .3)), transparent 70%), linear-gradient(#030817 0%, #0A1934 46%, #0E1A1E 49%); } }
:root[data-theme="dark"] .hh canvas[data-pitch] { --pg-a: #1B5A30; --pg-b: #236B3B; --pg-surround: #0A1712; --pg-paint: #F2F4EE; --pg-fog: #0E1A1E; --pg-stripe: .1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh canvas[data-pitch] { --pg-a: #1B5A30; --pg-b: #236B3B; --pg-surround: #0A1712; --pg-paint: #F2F4EE; --pg-fog: #0E1A1E; --pg-stripe: .1; } }
.hh .sky7__lampglow { position: absolute; inset: 0px; opacity: var(--lit, 0); background: radial-gradient(28% 20% at 12% 40%, rgba(205, 225, 255, 0.3), transparent 70%), radial-gradient(30% 22% at 88% 36%, rgba(205, 225, 255, 0.34), transparent 70%); }
.hh .devcol { position: relative; display: grid; }
@media (min-width: 1024px) { .hh .hh__in { grid-template-columns: minmax(0px, 5fr) minmax(0px, 7fr); } }
@media (min-width: 1024px) { .hh .hh__h1 { font-size: clamp(2.75rem, 1.4rem + 2.6vw, 4rem); } }
@media (min-width: 640px) { .hh .hh__h1 span { white-space: nowrap; } }
.hh .dev-light { --ph-bg: #FFFFFF; --ph-text: #0F1A24; --ph-muted: #4D5C6A; --ph-line: #D3DCE5; --ph-card: #EDF1F5; --club-ink: var(--club-ink-l, #17663A); --bw-ink: #17663A; --bw-fill: #1A7340; --bw-on: #FFFFFF; }
.hh .dev-light.dphone, .hh .dev-light .win { --primary: var(--bw-fill); --on-primary: var(--bw-on); }
.hh .dev-light .pill--ok { color: rgb(11, 125, 75); }
.hh .dev-light .pill--bad { color: rgb(179, 38, 30); }
.hh .dev-light .pill--wait { color: rgb(154, 103, 0); }
:root[data-theme="light"] .hh .sky7__stars { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .sky7__stars { display: none; } }
:root[data-theme="light"] .hh .lap3 { --al-1: #D3D8E0; --al-2: #E6E9EE; --al-3: #B9C0CC; --al-4: #9AA3B2; --al-hi: #F4F6F9; --al-edge: rgba(0, 0, 0, .1); --key: #2E333D; --well: #C7CDD6; --pad-1: #DCE0E7; --pad-2: #CDD2DA; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .lap3 { --al-1: #D3D8E0; --al-2: #E6E9EE; --al-3: #B9C0CC; --al-4: #9AA3B2; --al-hi: #F4F6F9; --al-edge: rgba(0, 0, 0, .1); --key: #2E333D; --well: #C7CDD6; --pad-1: #DCE0E7; --pad-2: #CDD2DA; } }
/* By day, a sunrise (Grant's choice, 16 Oct 2026): dawn gold and rose, then a soft blue, then the settled blue. */
:root[data-theme="light"] .hh .sky7__gold { background: linear-gradient(#36508F 0%, #C77E7E 30%, #F6B26B 44%, #FBD39A 49%); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .sky7__gold { background: linear-gradient(#36508F 0%, #C77E7E 30%, #F6B26B 44%, #FBD39A 49%); } }
:root[data-theme="light"] .hh .sky7__blue { background: linear-gradient(#4F7FCB 0%, #9DB5DD 30%, #F3D2A9 49%); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .sky7__blue { background: linear-gradient(#4F7FCB 0%, #9DB5DD 30%, #F3D2A9 49%); } }
:root[data-theme="light"] .hh .sky7__night { background: linear-gradient(#2F68C2 0%, #5A90D8 24%, #93BAE8 40%, #CFE0F2 49%); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .sky7__night { background: linear-gradient(#2F68C2 0%, #5A90D8 24%, #93BAE8 40%, #CFE0F2 49%); } }
:root[data-theme="light"] .hh .sky7__stars { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .sky7__stars { display: none; } }
:root[data-theme="light"] .hh .sun9 { display: block; background: radial-gradient(circle, #FFFDF4 0, #FFFDF4 38%, #FFE6AE 66%, rgba(255, 214, 150, 0) 100%); box-shadow: 0 0 60px 28px rgba(255, 236, 190, .5), 0 0 170px 80px rgba(255, 220, 160, .22); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .sun9 { display: block; background: radial-gradient(circle, #FFFDF4 0, #FFFDF4 38%, #FFE6AE 66%, rgba(255, 214, 150, 0) 100%); box-shadow: 0 0 60px 28px rgba(255, 236, 190, .5), 0 0 170px 80px rgba(255, 220, 160, .22); } }
:root[data-theme="light"] .hh .sky9__halo { background: radial-gradient(36vmax 26vmax at 100% -8%, rgba(255, 251, 228, 0.3), rgba(255, 246, 214, 0.08) 45%, transparent 70%); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .sky9__halo { background: radial-gradient(36vmax 26vmax at 100% -8%, rgba(255, 251, 228, 0.3), rgba(255, 246, 214, 0.08) 45%, transparent 70%); } }
:root[data-theme="light"] .hh .copy .hh__note, :root[data-theme="light"] .hh .replay9 { color: color-mix(in srgb, var(--text) 88%, var(--page)); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .copy .hh__note, :root:not([data-theme]) .hh .replay9 { color: color-mix(in srgb, var(--text) 88%, var(--page)); } }
:root[data-theme="light"] .hh .devmode__now { padding: 8px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); text-shadow: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .devmode__now { padding: 8px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(10px); text-shadow: none; } }
:root[data-theme="light"] .hh .turf__sky { background: radial-gradient(28% 20% at 12% 40%, rgba(255, 255, 255, 0.9), transparent 70%), radial-gradient(30% 22% at 88% 36%, rgba(255, 255, 255, 0.9), transparent 70%), linear-gradient(rgb(191, 210, 238) 0%, rgb(226, 235, 247) 48%, rgb(220, 231, 245) 49%); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .turf__sky { background: radial-gradient(28% 20% at 12% 40%, rgba(255, 255, 255, 0.9), transparent 70%), radial-gradient(30% 22% at 88% 36%, rgba(255, 255, 255, 0.9), transparent 70%), linear-gradient(rgb(191, 210, 238) 0%, rgb(226, 235, 247) 48%, rgb(220, 231, 245) 49%); } }
:root[data-theme="light"] .hh canvas[data-pitch] { --pg-a: #3A7D47; --pg-b: #468A52; --pg-surround: #5E7D63; --pg-paint: #F2F4EE; --pg-stripe: .08; --pg-fog: #CFE0F2; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh canvas[data-pitch] { --pg-a: #3A7D47; --pg-b: #468A52; --pg-surround: #5E7D63; --pg-paint: #F2F4EE; --pg-stripe: .08; --pg-fog: #CFE0F2; } }
:root[data-theme="light"] .hh .sky7__lampglow { opacity: calc(var(--lit, 0) * .4); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .sky7__lampglow { opacity: calc(var(--lit, 0) * .4); } }
.hh .lap3[data-wake] .lap3__logo { opacity: 1; }
.hh .lap3[data-wake] .lap3__logowrap { filter: drop-shadow(rgba(255, 255, 255, 0.9) 0px 0px 3px) drop-shadow(rgba(110, 240, 190, 0.85) 0px 0px 12px) drop-shadow(rgba(110, 240, 190, 0.55) 0px 0px 34px); }
.hh .lap3[data-wake] { --glowk: 1; }
@media (prefers-reduced-motion: no-preference) { .hh .lap3[data-lid="open"] .lap3__lid { animation: 2s cubic-bezier(0.25, 0.8, 0.25, 1) 0.15s 1 normal both running r8-lid; } }
.hh .is-switching .dphone__screen::before { content: ""; position: absolute; inset: 0px; z-index: 9; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 66%) 0% 0% / 260% 100%; animation: 0.9s ease 0s 1 normal both running r8-sweep; }
.hh.no-gl canvas { display: none; }
.hh.no-gl .turf__photo { display: block; }
/* A club's crest (each made-up club has one: public/img/crests/), shown as the app shows it, a shield with a soft glow in the club's colour. */
.hh .crest3d.has-img { color: transparent; border-radius: 0; box-shadow: none; background: var(--crest) center / contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)) drop-shadow(0 0 7px color-mix(in srgb, var(--club) 45%, transparent)); }
.hh .is-repaint .jp__band::before { animation: 0.9s cubic-bezier(0.5, 0, 0.2, 1) 0s 1 normal both running r4-wash; }
.hh .is-repaint .jp__pitch { animation: 0.9s ease 0s 1 normal both running r4-pitch; }
@media (prefers-reduced-motion: reduce) { .hh .is-repaint .jp__band::before, .hh .is-repaint .jp__pitch { animation: auto ease 0s 1 normal none running none; } }

/* The wash behind the words. At night: dark at the top and behind the words, clear over the lit pitch. By day: lighter,
   and only behind the words on a computer, so the sky shows on the right. Kept light by day so the sky stays blue and the
   grass is not washed out (Grant, 16 Oct 2026); every line of the words still reads at 4.5:1 or better from 390 to 1920 wide. */
.hh .turf__fade { position: absolute; inset: 0; pointer-events: none; }
:root[data-theme="dark"] .hh .turf__fade { background: linear-gradient(to bottom, color-mix(in srgb, var(--page) 56%, transparent), color-mix(in srgb, var(--page) 68%, transparent) 30%, color-mix(in srgb, var(--page) 62%, transparent) 48%, transparent 72%, var(--page)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .turf__fade { background: linear-gradient(to bottom, color-mix(in srgb, var(--page) 56%, transparent), color-mix(in srgb, var(--page) 68%, transparent) 30%, color-mix(in srgb, var(--page) 62%, transparent) 48%, transparent 72%, var(--page)); } }
:root[data-theme="light"] .hh .turf__fade { background: linear-gradient(to bottom, color-mix(in srgb, var(--page) 28%, transparent), color-mix(in srgb, var(--page) 44%, transparent) 24%, color-mix(in srgb, var(--page) 42%, transparent) 52%, color-mix(in srgb, var(--page) 12%, transparent) 74%, var(--page)); }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hh .turf__fade { background: linear-gradient(to bottom, color-mix(in srgb, var(--page) 28%, transparent), color-mix(in srgb, var(--page) 44%, transparent) 24%, color-mix(in srgb, var(--page) 42%, transparent) 52%, color-mix(in srgb, var(--page) 12%, transparent) 74%, var(--page)); } }
@media (min-width: 1024px) {
  :root[data-theme="dark"] .hh .turf__fade { background: linear-gradient(90deg, color-mix(in srgb, var(--page) 80%, transparent), color-mix(in srgb, var(--page) 34%, transparent) 42%, transparent 62%), linear-gradient(to top, var(--page), transparent 16%), linear-gradient(to bottom, color-mix(in srgb, var(--page) 40%, transparent), transparent 14%); }
  :root[data-theme="light"] .hh .turf__fade { background: linear-gradient(90deg, color-mix(in srgb, var(--page) 54%, transparent), color-mix(in srgb, var(--page) 38%, transparent) 36%, color-mix(in srgb, var(--page) 6%, transparent) 52%, transparent 60%), linear-gradient(to top, var(--page), transparent 12%); }
}
@media (min-width: 1024px) and (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .turf__fade { background: linear-gradient(90deg, color-mix(in srgb, var(--page) 80%, transparent), color-mix(in srgb, var(--page) 34%, transparent) 42%, transparent 62%), linear-gradient(to top, var(--page), transparent 16%), linear-gradient(to bottom, color-mix(in srgb, var(--page) 40%, transparent), transparent 14%); } }
@media (min-width: 1024px) and (prefers-color-scheme: light) { :root:not([data-theme]) .hh .turf__fade { background: linear-gradient(90deg, color-mix(in srgb, var(--page) 54%, transparent), color-mix(in srgb, var(--page) 38%, transparent) 36%, color-mix(in srgb, var(--page) 6%, transparent) 52%, transparent 60%), linear-gradient(to top, var(--page), transparent 12%); } }

/* The buttons are the site's own (components.css); here they only get their spacing. */
.hh .hero__cta { margin-top: 28px; gap: 12px; }
.hh .hero__cta .btn { flex: 1 1 150px; }
@media (min-width: 640px) { .hh .hero__cta .btn { flex: 0 0 auto; } }

/* The laptop's app has the Braidwood logo at the top of its sidebar, as the real app does, in the screen's own dark or light look. */
.hh .win__brand { display: block; padding: 2px 4px 14px; line-height: 0; }
.hh .win__brand img { display: block; width: 100%; height: auto; }
.hh .dev-light .win__brand-d, .hh .dev-dark .win__brand-l { display: none; }

/* Below desktop the hero is one column that is never wider than the screen: before this, the club bar's one-line text
   set the column's smallest width (371px), and on phones under 390px wide the right edge of everything was cut off.
   (The club bar is gone since 15 Oct 2026; the rule stays so nothing else can widen the column.) */
@media (max-width: 1023px) { .hh .hh__in { grid-template-columns: minmax(0, 1fr); } }
/* The laptop and phone are 420px across at phone size (with the 3D tilt) and 590px on a tablet. Below desktop they are
   centred, and on a phone scaled in steps to stay inside the page margins, so 360px and 320px wide phones see both whole. */
@media (max-width: 639px) { .hh .lap3__view { left: calc(50% - 7px); } }
@media (min-width: 640px) and (max-width: 1023px) { .hh .lap3__view { left: calc(50% - 11px); } }
/* From 1024px to 1280px wide the two columns are tight: the devices are scaled so the phone stays on the screen and the
   laptop clear of the words. */
@media (min-width: 1024px) and (max-width: 1139px) { .hh .lap3 { zoom: .82; } }
@media (min-width: 1140px) and (max-width: 1279px) { .hh .lap3 { zoom: .9; } }
/* The tilted lid rises above the laptop's box; below desktop this space keeps it clear of the words above. */
@media (max-width: 639px) { .hh .devcol { margin-top: 28px; } }
@media (min-width: 640px) and (max-width: 1023px) { .hh .devcol { margin-top: 48px; } }
@media (max-width: 451px) { .hh .lap3 { zoom: .9; } }
@media (max-width: 409px) { .hh .lap3 { zoom: .84; } }
@media (max-width: 384px) { .hh .lap3 { zoom: .8; } }
@media (max-width: 367px) { .hh .lap3 { zoom: .76; } }
@media (max-width: 350px) { .hh .lap3 { zoom: .68; } }

/* Phones and tablets (one column): the laptop and phone come straight after the two buttons, and the demo note and the replay
   button follow them, so the app is on the first screen of a phone (Grant, 15 Oct 2026). The words keep their order for screen
   readers; only the boxes move. On a phone the headline sits closer to the header and the paragraph keeps its first two
   sentences. */
@media (max-width: 1023px) {
  .hh .copy { display: contents; }
  .hh .hh__h1 { order: 1; } .hh .hh__sub { order: 2; } .hh .hero__cta { order: 4; } .hh .devcol { order: 5; } .hh .hh__note { order: 6; } .hh .replay9 { order: 7; }
  .hh .hh__note { margin-top: 0; } .hh .replay9 { margin-top: -20px; justify-self: start; }
}
@media (max-width: 639px) {
  .hh .hh__in { padding-top: 32px; row-gap: 20px; }
  .hh .devcol { margin-top: 26px; }
}

/* The line under the headline (Grant, 19 Oct 2026: "Your club, your way", then "no contract, no chasing, control from WhatsApp"). It is the
   second thing read, so it is set large and bold, with the last phrase in the accent colour. On a phone it takes the place of the
   longer paragraph, which is left out there so the devices and the LED board stay on the first screen. */
.hh__sub { margin: 16px 0 0; max-width: 23em; font: 600 clamp(1.125rem, 1rem + .6vw, 1.375rem)/1.35 var(--font-body); letter-spacing: -.01em; color: var(--text); text-wrap: balance; text-shadow: 0 1px 14px var(--page), 0 0 3px var(--page); }
/* The price, beside the line on a phone only (Grant chose round 9 option 1, 20 Oct 2026); a computer has it at the top of the list. The short
   panel lines are for the phone's two-column panel, and the longer lines for a tablet or computer. */
@media (min-width: 1024px) and (max-width: 1279px) { .hh__sub { font-size: 1.25rem; } } /* the narrow copy column of a small laptop: the board stays on its first screen */
/* The proof list under the line (Grant chose "Plain list", 19 Oct 2026): an icon and a line each, hairlines between, no boxes, so the scene
   shows through. The Apple Pay and Google Pay marks are shown here and nowhere else, as supplied. Since 20 Oct 2026 it leads on how simple
   payments are (Grant: "I don't think we are emphasising the simplicity of payments enough"): the price, the card line, nothing to manage in
   Stripe, runs on WhatsApp and email (Grant, 20 Oct 2026, in place of the fee line), paid into the club's bank. On a phone it becomes the "Payments, done for you" panel (below). */
@media (max-width: 639px) { .hh .hh__sub { margin-top: 0; } }

/* The LED board is on the first screen of a phone and of a short laptop window (Grant, 19 Oct 2026: "the LED scoreboard must be seen
   in the main hero screen on desktop and mobile"). A short laptop window gets a smaller laptop and phone and a hero that is no taller
   than they are.
   On a phone (Grant chose round 7 option 3, 20 Oct 2026) the pitch has its own window across the top, wider than it is tall, with its own
   camera (pitch.js, "win"), so the far goal, a floodlight and the sun are all in view, and the floodlights come on at sunset. The words sit
   under it on the plain page: the headline, the line, the buttons, then the "Payments, done for you" panel and the LED board, which
   index.js moves into the hero so it comes before the laptop and phone. "Watch the sunset again" is left out (it only replays the
   animation). Quick help is a round button there (help-chat.css), so it covers less of the LED board. */
@media (max-width: 639px) {
  /* The headline starts where the window ends. It follows the height the browser really shows (100svh: with its address bar and toolbars
     on screen, Grant, 20 Oct 2026: "Maybe you did not consider the browser URL section"), so the words, the payments panel and the LED
     board always fit on the first screen; on a tall phone the window is at most 300px; on a short one the spacing tightens and the window gives way first (at least 168px). */
  /* Since round 8 (Grant, 20 Oct 2026: "Now you cant see the pitch at all!") the window never goes below 210px, so the goal and a floodlight
     are always seen; the words are packed tighter instead, with the panel in two columns of short lines. */
  .hh { --hh-top: clamp(210px, calc(100vh - 485px), 260px); --hh-top: clamp(210px, calc(100svh - 485px), 260px); }
  .hh .turf { inset: 0 0 auto 0; height: calc(var(--hh-top) + 50px); -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .hh .turf::after { display: none; }
  :root[data-theme="light"] .hh .sun9 { width: clamp(46px, 11vmin, 76px); background: radial-gradient(circle, #FFFBEA 0, #FFFBEA 44%, #FFE3A0 66%, rgba(255, 208, 120, 0) 100%);
    box-shadow: 0 0 34px 14px rgba(255, 232, 160, .9), 0 0 120px 60px rgba(255, 214, 140, .45); }
  .hh .hh__in { padding-top: calc(var(--hh-top) - 68px); padding-bottom: 12px; row-gap: 12px; }
  /* The line under the headline, with the price on the right of its second part, just above Try the demo (round 9 option 1). */
  .hh .hh__sub { max-width: none; font-size: 1.1875rem; }
  .hh .hero__cta { margin-top: 0; }
  .hh .hh__in > .led-sec { order: 6; width: 100vw; margin-inline: calc(50% - 50vw); margin-block: 0; }
  .hh .devcol { order: 7; zoom: .9; margin-top: 8px; } .hh .hh__note { order: 8; }
  .hh .hh__note { font-size: .75rem; line-height: 1.3; }
  .hh .replay9 { display: none; }
}
@media (min-width: 1024px) and (max-height: 880px) { .hh .replay9 { display: none; } .hh__in { padding-top: 32px; } }
@media (min-width: 1024px) and (max-height: 760px) {
  .hh .lap3 { zoom: .8; }
  .hh__in { padding-block: 20px 46px; min-height: 480px; }
  .hh .hh__note { display: none; }
}

/* Soft focus (Grant, 16 Oct 2026): the far end of the ground slightly out of focus, as a camera sees it, under a faint mist
   (pale by day, lit by the floodlights at night), in both themes. */
.hh .turf::after { content: ""; position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 24%, #000 47%, transparent 62%); mask-image: linear-gradient(to bottom, transparent 6%, #000 24%, #000 47%, transparent 62%); }
.hh .turf__lamps::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 18%, var(--mist, rgba(240, 245, 250, .28)) 40%, transparent 62%); }
:root[data-theme="dark"] .hh .turf__lamps::before { --mist: rgba(150, 180, 230, calc(.06 + var(--lit, 0) * .16)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hh .turf__lamps::before { --mist: rgba(150, 180, 230, calc(.06 + var(--lit, 0) * .16)); } }

/* ---- The club look in the hero, as clubs now see it in the app (option A, Grant 18 Oct 2026; css/effects.css) ------------------------
   The side menu is one gradient from near black at its left edge to the club colour at its right edge, in light and dark alike, with
   light text; the club card is frosted glass; the current item is filled with the club colour and glows. The page picks the colour up
   where the menu ends and lets it fade, with a glow in the top left corner. On the phone the join page's top bar is the same dark
   gradient, and the club's colour glows down the page behind the title. Softer in light than in dark. Buttons stay Braidwood green. */
.hh .dev-dark { --hglow: 46%; --hglow-edge: 32%; }
.hh .dev-light { --hglow: 24%; --hglow-edge: 18%; }
.hh .win__side { --night: #02050E; border-right: 0; color: #F4F7FC;
  background: linear-gradient(90deg, color-mix(in srgb, var(--club) 5%, var(--night)) 0%, color-mix(in srgb, var(--club) 16%, var(--night)) 55%,
    color-mix(in srgb, var(--club) 34%, var(--night)) 100%); transition: background 0.35s; }
.hh .win__side .nav-i { color: #D5DEEE; }
.hh .win__side .win__sec { color: #BAC6DC; }
.hh .win__side .nav-i.on { color: var(--on-club); background: linear-gradient(160deg, var(--club) 0%, color-mix(in srgb, var(--club) 82%, #000) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), 0 0 16px color-mix(in srgb, var(--club) 55%, transparent); }
.hh .win__club { color: #F4F7FC; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 20px rgba(0, 0, 0, .28); }
/* the menu is dark in both looks, so its logo is always the on-dark one */
.hh .dev-light .win__side .win__brand-d { display: block; }
.hh .dev-light .win__side .win__brand-l { display: none; }
.hh .win__main { background:
  linear-gradient(90deg, color-mix(in srgb, var(--club) var(--hglow-edge), transparent) 0px, transparent 130px),
  radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--club) var(--hglow), transparent), transparent 70%); }
.hh .dphone__screen { background:
  linear-gradient(180deg, color-mix(in srgb, var(--club) var(--hglow-edge), transparent) 0px, transparent 300px),
  radial-gradient(160% 70% at 50% 0%, color-mix(in srgb, var(--club) var(--hglow), transparent), transparent 78%), var(--ph-bg); }
.hh .jp__band, .hh .jp__band::before { --night: #02050E;
  background: linear-gradient(90deg, color-mix(in srgb, var(--club) 5%, var(--night)) 0%, color-mix(in srgb, var(--club) 16%, var(--night)) 55%,
    color-mix(in srgb, var(--club) 34%, var(--night)) 100%); }
.hh .jp__band { color: #F4F7FC; padding-bottom: 12px; }
.hh .jp__band::after { display: none; }
.hh .jp__pitch { background: #F4F7FC; opacity: .1; }
.hh .jp__in { background: transparent; color: #6FD996; }
.hh .dphone__status { color: #F4F7FC; } /* the status bar sits on the dark top bar */

/* The first month free offer above the buttons (Grant, 27 Oct 2026): a pill and one short line, the same on a phone and a computer. */
.hh .hh__offer { order: 4; display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-top: 18px; }
.hh .hh__pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--bw-gold); color: #2A1C00; font: 800 .95rem/1 var(--font-display); white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.hh .hh__offer-text { font: 600 .8125rem/1.3 var(--font-body); color: var(--text-2); text-shadow: 0 1px 10px var(--page); }
@media (max-width: 639px) { .hh .hh__offer { margin-top: 0; } }
.hh .hh__trial { max-width: 34rem; color: var(--text-2); }
/* The two hero buttons on a phone: the free month button gets the wider share and tighter padding, so "Start free month" and its arrow sit centred and never touch the edges, down to 320px. */
@media (max-width: 639px) {
  .hh .hero__cta { flex-wrap: nowrap; }
  .hh .hero__cta .btn { padding-inline: 14px; font-size: 1rem; min-width: 0; }
  .hh .hero__cta .btn--primary { flex: 3 1 0; }
  .hh .hero__cta .btn--outline { flex: 2 1 0; }
}
@media (max-width: 340px) { .hh .hero__cta .btn--primary .ico--go { display: none; } }

/* The LED board stays on the first screen of a computer window (Grant, 28 Oct 2026: "the LED board is now off the screen"). The free month
   pill, its small print and the extra lines made the words taller than the devices, which pushed the board below the fold. On windows
   under 1000px tall the headline, list, offer and buttons are set closer together, and the "Watch the sunset again" button is left out. */
@media (min-width: 1024px) and (max-height: 999px) {
  .hh__in { padding-top: 36px; min-height: 0; }
  .hh__h1 { font-size: clamp(2.75rem, 7.4vh, var(--h1)); }
  .hh__sub { margin-top: 10px; }
  .hh .hh__offer { margin-top: 12px; }
  .hh .hero__cta { margin-top: 14px; }
  .hh .hh__note { margin-top: 8px; }
  .hh .replay9 { display: none; }
}
@media (min-width: 1024px) and (max-height: 820px) { .hh .hh__note:not(.hh__trial) { display: none; } }
@media (min-width: 1024px) and (max-height: 820px) {
  .hh__h1 { font-size: clamp(2.5rem, 6.4vh, var(--h1)); }
  .hh__sub { font-size: 1.25rem; }
  .hh .hero__cta .btn { min-height: 52px; }
}

/* The free month offer is a small flat gold circle at the end of the headline (Grant chose round 2 option 1, 30 Oct 2026: the old square
   was "far too big" and sat over the best part of the stadium). On a tablet or computer it sits in the gap between the headline and the
   laptop; on a phone it sits to the right of the headline, which leaves room for it, so the pitch window above stays clear. No glow, no
   shadow, no tilt. It is hidden from screen readers: the offer line under the buttons is read out instead. */
.hh .hh__h1 { position: relative; width: max-content; max-width: 100%; }
.hh .hh__h1 .hh__stk { --stk: 104px; position: absolute; z-index: 3; left: 100%; top: 50%; margin-left: 18px; transform: translateY(-50%); width: var(--stk); height: var(--stk);
  box-sizing: border-box; display: grid; align-content: center; justify-items: center; text-align: center; border-radius: 50%;
  background: var(--bw-gold); color: #2A1C00; font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: 0; text-shadow: none; white-space: nowrap; }
.hh .hh__stk i { font: 800 .75rem/1 var(--font-body); font-style: normal; }
.hh .hh__stk b { font-size: 1.625rem; line-height: 1; margin: 2px 0 3px; }
.hh .hh__stk small { font: 700 .6875rem/1.15 var(--font-body); }
@media (min-width: 640px) { .hh .hh__in > .copy { z-index: 2; } } /* above the laptop, so the sticker is never under it */
.hh .hh__offer { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 639px) {
  .hh .hh__h1 { width: auto; padding-right: calc(var(--stk-ph) + 10px); font-size: 2.5rem; --stk-ph: 90px; }
  .hh .hh__h1 .hh__stk { --stk: var(--stk-ph); left: auto; right: 0; margin-left: 0; }
  .hh .hh__stk i { font-size: .6875rem; } .hh .hh__stk b { font-size: 1.375rem; margin: 1px 0 2px; } .hh .hh__stk small { font-size: .625rem; }
  .hh .hh__in { row-gap: 10px; }
}
@media (max-width: 374px) { .hh .hh__h1 { font-size: 2.25rem; --stk-ph: 86px; } } /* a small phone: the headline keeps three lines beside the sticker */