), so it
takes the summary treatment. */
.hl-dacc > .hl-mobile-nav__toggle{
display:flex; align-items:center; justify-content:space-between; width:100%;
padding:18px 0; font:600 1.05rem/1 var(--hl-ff-display); color:#fff;
letter-spacing:-.015em; text-align:left;
}
.hl-dacc > .hl-mobile-nav__toggle[aria-expanded="true"] .hl-caret{ transform:rotate(-135deg) translateY(-1px); }
.hl-dacc__body[hidden]{ display:none; }
/* About and Why are separate CMS blocks in production — each can be reordered,
disabled or dropped on its own — so the padding that joined them in the
prototype moves onto the sections instead of the inner wrappers. */
.hl-hero--highline{ padding-bottom:0; }
.hl-story{ padding-block:var(--hl-sec-pad-sm); background:linear-gradient(180deg,var(--hl-paper) 0%,#fff 55%,#fff 100%); }
.hl-story__about{ padding-bottom:0; }
.hl-story__cta{ margin-top:var(--hl-s-8); }
.hl-why-sec{
position:relative; overflow:hidden; padding-block:0 var(--hl-sec-pad);
background:linear-gradient(180deg,#fff 0%,#fff 60%,var(--hl-paper) 100%);
}
.hl-why{ border-top:1px solid var(--hl-line); padding-top:var(--hl-sec-pad-sm); }
/* Funding carries its own disclaimer; it is content, not decoration. */
.hl-fund__disclaimer{
margin:var(--hl-s-6) 0 0; font-size:var(--hl-fs-micro); line-height:1.6;
color:var(--hl-text-light-4); max-width:60ch;
}
/* The partner rail's speed is a CMS setting, so the duration is a variable. */
.hl-marquee__track{ animation-duration:var(--hl-marquee-speed,38s); }
.hl-marquee--static{ mask-image:none; -webkit-mask-image:none; justify-content:center; flex-wrap:wrap; }
.hl-marquee--static .hl-marquee__track{ animation:none; flex-wrap:wrap; justify-content:center; }
.hl-plogo__img{ max-height:34px; width:auto; opacity:.72; filter:grayscale(1); flex:none; }
.hl-marquee:hover .hl-plogo__img{ opacity:1; filter:none; }
/* Reviews are real quotes in production; the prototype only had reserved slots. */
.hl-rev__text{
margin:var(--hl-s-5) 0 auto; padding:0; border:0; font-size:var(--hl-fs-body);
line-height:1.65; color:var(--hl-text-body);
}
.hl-rev__stars{ display:flex; gap:4px; }
.hl-rev__stars b{
width:16px; height:16px; background:var(--hl-brand-red);
-webkit-mask:var(--hl-star) center/contain no-repeat; mask:var(--hl-star) center/contain no-repeat;
}
.hl-final__lede{
max-width:56ch; margin:0 auto var(--hl-s-10); font-size:var(--hl-fs-lede);
color:var(--hl-text-light-2);
}
/* Screen-reader-only text inside the approved burger. */
.hl-burger .hl-sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* E8 · grid columns that cannot be forced open ---------------------------
A `1fr` track floors at min-content, so a wide child (the hardware lead's
button + financing note sitting on one row) can push a column past the
viewport, where the section's own overflow:hidden silently clips it. The
fix is minmax(0,1fr) plus min-width:0 on the children — the same defect and
the same fix as the industry prototype's stacked panels. */
.hl-shead--split{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
.hl-hw .hl-shead--split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.hl-shead--split > *{ min-width:0; }
.hl-hw__lead, .hl-hw__leadcta{ min-width:0; }
.hl-finnote{ max-width:100%; }
@media (max-width:1024px){
.hl-shead--split,
.hl-hw .hl-shead--split{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
/* On a phone the button and the note stack rather than competing for a row. */
.hl-hw__leadcta{ flex-direction:column; align-items:stretch; }
.hl-hw__leadcta .hl-btn{ width:100%; }
.hl-finnote{ max-width:none; }
}
/* E9 · the mega panel is a full-bleed band, not a floating card -----------
The approved panel spans the viewport under the header. Production's
`.hl-header__inner` is `position: relative` (it used to be the panel's
positioning context), which cropped the band to the 1280px shell and
inset it by the gutter. The header itself is the context now — it is
`position: sticky`, so it already establishes one. */
.hl-header__inner{ position:static; }
/* The open-item marker moves from the ITEM to the LINK.
The approved design draws a red bar under the open nav item. In the
prototype that pseudo-element sits on the item, which is `position:
relative`; here the item must be `position: static` so the panel can span
the header, which would stretch the bar across the whole viewport. The link
carries it instead — same geometry, because the bar is inset by exactly the
link's horizontal padding — and the older accent underline is replaced
rather than left to compete with it. */
.hl-nav__item.is-open::after{ content:none; }
.hl-nav__link{ position:relative; }
.hl-nav__link::after{
content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
border-radius:2px; background:var(--hl-red-500); opacity:0; transform:none;
transition:opacity var(--hl-t-med) var(--hl-e-out);
}
.hl-nav__item.is-open > .hl-nav__link::after{ opacity:1; }
/* A link-style button is text with a rule under it — production's base button
would otherwise give it a filled surface. */
.hl-btn--link,
.hl-btn--link:hover{
background:none; border:0; box-shadow:none;
--hl-btn-bg:transparent; --hl-btn-border:transparent;
}
/* ── F · SERVICE LAYER (inner pages) ──────────────────────────────────────
SOURCE OF TRUTH: public/prototype/service/service.css (approved).
Ported by the same rules as section C — `.foo` → `.hl-foo`, `--foo` →
`--hl-foo`, `@keyframes foo` → `hls-foo`, `is-*`/`has-*` unchanged — with
four families renamed onto the production component that already does the
job, so there is one component rather than two:
prototype `.hcard` (hardware insert) → `.hl-hcard` (section 09's card)
prototype `.fitem` → `.hl-faq__item` (a
)
prototype `.fitem__q button` → `.hl-faq__question` (a )
prototype `.fitem__a` → `.hl-faq__answer`
The prototype loads homepage/styles.css first and adds only what an inner
page needs; the same holds here — everything above this line still applies,
and nothing is duplicated.
F0 · route family (short-path variant)
F1 · wayfinding (breadcrumb, current-branch)
F2 · service hero + acceptance diagram
F3 · page rail
F4 · inner section head
F5 · acceptance switchboard
F6 · process track
F7 · compact industries
F8 · hardware insert
F9 · steps chapter
F10 · why — feature panel + rows
F11 · FAQ chapter
F12 · responsive
F13 · reduced motion */
:root{ --hl-rail-h:58px; }
/* The sticky rail sits under the sticky header, so an anchor jump has to clear
both. Only on a page that actually has a rail — :has() keeps the default
(header only) everywhere else instead of reserving space for nothing. */
html:has(.hl-rail){ scroll-padding-top:calc(var(--hl-nav-h) + var(--hl-rail-h) + 20px); }
/* Off-screen holder for the gradient defs a page's diagrams share. */
.hl-svgdefs{ position:absolute; width:0; height:0; overflow:hidden; }
/* ── F0 · ROUTE FAMILY (short-path variant) ─────────────────────────────── */
/* `.hl-rte__amb` / `.hl-rte__flow` dash values are tuned for very long ambient
section routes and read as almost empty on a short diagram path. Diagram
routes get their own pair — same colours, same idea, different arithmetic.
Every path carries pathLength="300", so one dash setting fits every shape
and all signals travel at the same speed regardless of the path's length. */
.hl-sroute{ stroke:rgba(255,255,255,.14); stroke-width:1.4; fill:none; }
.hl-sroute--dim{ stroke:rgba(255,255,255,.07); stroke-dasharray:3 5; }
.hl-infra--light .hl-sroute,
.hl-acc .hl-sroute, .hl-binds .hl-sroute, .hl-why2 .hl-sroute{ stroke:rgba(42,45,124,.16); }
.hl-spulse{
stroke:url(#hl-sgrad); stroke-width:2.4; fill:none; stroke-linecap:round;
stroke-dasharray:26 300; stroke-dashoffset:326;
animation:hls-spulse 4.4s var(--hl-e-inout) infinite; animation-delay:var(--hl-d,0s);
filter:drop-shadow(0 0 6px rgba(122,130,255,.6));
}
.hl-why2 .hl-spulse{ stroke:url(#hl-sgradl); filter:none; }
@keyframes hls-spulse{ 0%{ stroke-dashoffset:326 } 62%,100%{ stroke-dashoffset:0 } }
@keyframes hls-spulseSlow{ 0%{ stroke-dashoffset:340 } 62%,100%{ stroke-dashoffset:0 } }
.hl-spulse--slow{ animation-name:hls-spulseSlow; animation-duration:7s;
stroke-dasharray:40 300; stroke-dashoffset:340; }
/* ── F1 · WAYFINDING ────────────────────────────────────────────────────── */
.hl-crumb{ margin-bottom:var(--hl-s-6); }
.hl-crumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:0;
list-style:none; font:500 var(--hl-fs-micro)/1 var(--hl-ff-body);
letter-spacing:.1em; text-transform:uppercase; }
.hl-crumb li{ display:flex; align-items:center; gap:8px; color:var(--hl-text-light-4); }
.hl-crumb li + li::before{ content:""; width:4px; height:4px; border-radius:50%;
background:currentColor; opacity:.5; }
.hl-crumb a{ color:var(--hl-text-light-3); transition:color var(--hl-t-fast); }
.hl-crumb a:hover{ color:#fff; }
.hl-crumb [aria-current="page"]{ color:var(--hl-red-300); }
/* Current-branch markers. An inner page should always say where it sits.
Production carries `is-current` on the nav LINK (bridge E9), so the marker
hangs off the link rather than off the item. */
.hl-nav__link.is-current{ color:#fff; }
.hl-nav__item:not(.is-open) > .hl-nav__link.is-current::after{
opacity:1; background:linear-gradient(90deg,var(--hl-red-500),rgba(207,41,39,0));
}
.hl-mega__card.is-current{ border-color:rgba(207,41,39,.45); background:rgba(207,41,39,.07); }
.hl-footer a[aria-current="page"],
.hl-dacc__body a[aria-current="page"]{ color:#fff; }
/* ── F2 · SERVICE HERO ──────────────────────────────────────────────────── */
/* Pulled up under the sticky header exactly like the homepage hero, so the
transparent nav sits on the dark chapter instead of on white. Not optional
on any dark-hero page. */
.hl-shero{
position:relative; isolation:isolate; overflow:hidden;
background:
radial-gradient(1100px 640px at 82% 4%, #1B2166 0%, transparent 62%),
radial-gradient(820px 560px at 4% 92%, #191E58 0%, transparent 60%),
linear-gradient(168deg,#0B0E28 0%,#080A1D 55%,#05060F 100%);
margin-top:calc(var(--hl-nav-h) * -1); padding-top:var(--hl-nav-h);
}
.hl-shero__shell{
position:relative; z-index:1;
display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center;
gap:clamp(36px,4vw,72px);
padding-block:clamp(48px,5vw,84px) var(--hl-hero-air);
}
.hl-shero__copy{ max-width:600px; min-width:0; }
/* The token is the whole closing distance, so the last group in a hero column
stands its own trailing margin down. Without this a hero that happens to end
in a chip list adds the list's 24px on top and the contract becomes a floor
instead of a value — which is how 86px became 110px on six pages. */
.hl-hero__shell > * > :last-child,
.hl-shero__shell > * > :last-child{ margin-bottom:0; }
/* ── HEADING LINE BREAKS ───────────────────────────────────────────────────
`text-wrap:balance` evens the lines of a short display heading instead of
filling greedily and leaving an orphan. The Cash Discount hero broke as
"One Posted / Price, and a / Discount for Cash." — a four-word middle line
splitting a noun phrase (audit M-03). Balancing is the fix that does not
require authoring a break per heading per width.
`hyphens:manual` is the other half. The Pay-at-Pump product H1 broke on its
OWN hyphen — "Pay-at- / Pump Terminal" — because a hyphen is a break
opportunity by default. The product name is one token and now stays one
(audit M-02 / PD-09).
Both degrade to today's behaviour where unsupported; neither changes a
heading that already fits. */
:where(.hl-hero__h1, .hl-shero__h1, .hl-heroblock__title, .hl-ihead__title,
.hl-price__title, .hl-h2, .hl-ioffer__title){
text-wrap:balance; hyphens:manual;
}
.hl-shero__h1{
font:800 clamp(2.3rem,4.2vw,3.6rem)/1.05 var(--hl-ff-display);
color:#fff; letter-spacing:-.035em; margin-bottom:var(--hl-s-6);
}
/* the italic overhang eats the following word space — give it back */
.hl-shero__h1 em{ font-style:italic; font-weight:700; color:var(--hl-navy-300); margin-right:.08em; }
.hl-shero__lede{ font-size:var(--hl-fs-lede); line-height:1.68; color:var(--hl-text-light-2);
max-width:52ch; margin-bottom:var(--hl-s-8); }
.hl-shero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hl-shero__chips{ margin-bottom:0; }
.hl-shero__chips li{ font-size:var(--hl-fs-micro); letter-spacing:.05em; text-transform:uppercase; }
.hl-shero__viz{ min-width:0; }
/* Acceptance diagram: channels converging on one system, then out to
authorization and settlement. The stage holds a fixed aspect ratio so the
SVG wires and the CSS-positioned nodes can never drift apart at any width. */
.hl-accv{
position:relative; padding:20px 20px 16px; border-radius:var(--hl-r-2xl);
background:linear-gradient(160deg,rgba(42,45,124,.34),rgba(10,12,34,.72));
border:1px solid var(--hl-line-dark-2); box-shadow:var(--hl-sh-glass);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hl-accv__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.hl-accv__label{ font:600 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wider);
text-transform:uppercase; color:var(--hl-text-light-4); }
.hl-accv__live{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px;
border-radius:var(--hl-r-pill); background:rgba(47,214,163,.10); border:1px solid rgba(47,214,163,.28);
font:500 var(--hl-fs-micro)/1 var(--hl-ff-mono); letter-spacing:.06em; color:var(--hl-ok); }
.hl-accv__live i{ width:5px; height:5px; border-radius:50%; background:var(--hl-ok);
box-shadow:0 0 8px var(--hl-ok); animation:hls-blip 2.2s var(--hl-e-inout) infinite; }
@keyframes hls-blip{ 0%,100%{ opacity:1 } 50%{ opacity:.28 } }
.hl-accv__stage{ position:relative; width:100%; aspect-ratio:460/340; }
.hl-accv__routes{ position:absolute; inset:0; width:100%; height:100%; }
.hl-accv__in{
position:absolute; left:0; top:5.6%; width:32.2%; height:60.6%;
display:grid; grid-template-rows:repeat(var(--hl-accv-rows,4),1fr);
margin:0; padding:0; list-style:none;
}
/* grid, not flex: the icon spans both rows so the label sits above the caption */
.hl-cnode{
display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
column-gap:9px; margin:3px 0; padding:0 11px;
border-radius:var(--hl-r-sm); background:rgba(255,255,255,.05);
border:1px solid var(--hl-line-dark); min-width:0;
animation:hls-cnodeLit 4.4s var(--hl-e-inout) infinite; animation-delay:calc(var(--hl-i,0) * .55s);
}
@keyframes hls-cnodeLit{
0%,88%,100%{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09) }
6%,20%{ background:rgba(90,97,204,.22); border-color:rgba(144,150,228,.5) }
}
.hl-cnode__ico{ grid-row:1/span 2; width:16px; height:16px; color:var(--hl-navy-300); }
.hl-cnode b{ grid-column:2; font:600 var(--hl-fs-xs)/1.15 var(--hl-ff-display); color:#fff;
letter-spacing:-.015em; white-space:nowrap; }
.hl-cnode i{ grid-column:2; margin-top:2px; font-size:var(--hl-fs-micro); color:var(--hl-text-light-4);
line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hl-accv .hl-sroute{ stroke:rgba(255,255,255,.2); }
.hl-accv__out{ position:absolute; left:56.1%; right:0; top:0; bottom:0; }
.hl-corenode{
position:absolute; left:0; right:0; top:22.4%; height:29.4%;
display:flex; flex-direction:column; justify-content:center; padding:0 14px;
border-radius:var(--hl-r-md);
background:linear-gradient(150deg,rgba(207,41,39,.16),rgba(42,45,124,.5));
border:1px solid rgba(229,84,78,.34);
box-shadow:0 18px 40px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.hl-corenode__tag{ font:700 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-red-300); }
.hl-corenode b{ margin-top:5px; font:700 var(--hl-fs-sm)/1.2 var(--hl-ff-display); color:#fff;
letter-spacing:-.02em; }
.hl-corenode__rows{ display:flex; gap:12px; margin-top:9px; flex-wrap:wrap; }
.hl-corenode__rows li{ display:inline-flex; align-items:center; gap:5px;
font:400 var(--hl-fs-micro)/1 var(--hl-ff-mono); color:var(--hl-text-light-3); }
.hl-corenode__rows i{ width:5px; height:5px; border-radius:1.5px; background:var(--hl-text-light-4);
transition:background var(--hl-t-med), box-shadow var(--hl-t-med); }
.hl-corenode__rows li.is-on i{ background:var(--hl-ok); box-shadow:0 0 8px rgba(47,214,163,.8); }
.hl-corenode__rows li.is-on{ color:#fff; }
.hl-onode{
position:absolute; left:0; right:0; height:11.76%;
display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 13px;
border-radius:var(--hl-r-sm); background:rgba(255,255,255,.045);
border:1px solid var(--hl-line-dark); min-width:0;
}
.hl-onode--0{ top:63.5%; }
.hl-onode--1{ top:84.1%; }
.hl-onode__k{ font:600 var(--hl-fs-xs)/1 var(--hl-ff-display); color:#fff; white-space:nowrap; }
.hl-onode__v{ font:400 var(--hl-fs-micro)/1 var(--hl-ff-mono); color:var(--hl-text-light-4);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hl-onode--ok{ background:rgba(47,214,163,.09); border-color:rgba(47,214,163,.3); }
.hl-onode--ok .hl-onode__v{ color:var(--hl-ok); }
.hl-accv__foot{ margin:12px 0 0; padding-top:11px; border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); color:var(--hl-text-light-4); }
/* ── F3 · PAGE RAIL ─────────────────────────────────────────────────────── */
/* The main structural difference between an inner page and the homepage: the
whole page is visible at a glance and the reader always knows where they are. */
.hl-rail{
position:sticky; top:var(--hl-nav-h); z-index:40;
background:rgba(7,9,25,.92); -webkit-backdrop-filter:blur(16px) saturate(140%);
backdrop-filter:blur(16px) saturate(140%);
border-bottom:1px solid var(--hl-line-dark);
}
.hl-rail__shell{ display:flex; align-items:center; gap:var(--hl-s-6); height:var(--hl-rail-h); }
.hl-rail__title{
display:inline-flex; align-items:center; gap:9px; flex:none;
font:700 var(--hl-fs-xs)/1 var(--hl-ff-display); color:#fff; letter-spacing:-.01em;
padding-right:var(--hl-s-6); border-right:1px solid var(--hl-line-dark);
}
.hl-rail__title::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--hl-red-500);
box-shadow:0 0 10px rgba(207,41,39,.8); }
.hl-rail__list{ display:flex; align-items:center; gap:2px; min-width:0; flex:1;
overflow-x:auto; scrollbar-width:none; margin:0; padding:0; list-style:none; }
.hl-rail__list::-webkit-scrollbar{ display:none; }
/* ── GROUP H · A HIDDEN SCROLLER IS NOT A NAVIGATION ───────────────────────
`overflow-x:auto` with the scrollbar suppressed is invisible. On `/terms` at
1536 the rail's content is 1,563px inside an 865px viewport — 698px and 8 of
14 chapters unreachable unless the reader guesses that the strip drags — and
the item at the boundary is cut mid-word against the CTA (audit LG-02). The
same pattern hides 719px of the switchboard's channels at 768 (CH-10).
`.hl-scrollcue` is the shared answer: the scroller is masked so its content
fades out at whichever edge still has content beyond it. Without JavaScript
the right-hand fade is always on, which is the honest default for a strip
that is nearly always longer than its box; `highline.js` then adds
`is-cue-start` / `is-cue-end` so the fade disappears at a real end and
appears on the left once the reader has scrolled. Nothing is hidden that was
not hidden before — the point is that the reader can now SEE that it moves. */
.hl-scrollcue{
--hl-cue-l:0px; --hl-cue-r:44px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--hl-cue-l),
#000 calc(100% - var(--hl-cue-r)), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 var(--hl-cue-l),
#000 calc(100% - var(--hl-cue-r)), transparent 100%);
}
.hl-scrollcue.is-cue-start{ --hl-cue-l:44px; }
.hl-scrollcue.is-cue-end{ --hl-cue-r:0px; }
/* A scroller that fits needs no cue at all. */
.hl-scrollcue.is-cue-none{ --hl-cue-l:0px; --hl-cue-r:0px; }
.hl-rail__list a{
position:relative; display:block; padding:9px 13px; border-radius:var(--hl-r-sm); white-space:nowrap;
font:500 var(--hl-fs-xs)/1 var(--hl-ff-display); color:var(--hl-text-light-3);
transition:color var(--hl-t-fast), background var(--hl-t-fast);
}
.hl-rail__list a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.hl-rail__list a.is-active{ color:#fff; }
.hl-rail__list a.is-active::after{
content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px;
background:var(--hl-red-500);
}
.hl-rail__cta{ flex:none; }
/* ── F4 · INNER SECTION HEAD — THE CHAPTER SPINE ────────────────────────── */
/* Outlined numerals give a long inner page a spine and read as documentation
rather than marketing. The figure is derived by the renderer from the page's
own rail order, so it can never disagree with the navigation.
── ONE SPINE, AND WHY IT IS THIS ONE ─────────────────────────────────────
This head used to put the numeral in a grid column BESIDE the eyebrow, while
six other compositions — `content · steps`, `why · compact`, `faq · chapter`,
`cash_discount`, `products · insert` and `promotion · offer` — drew the same
numeral as a free-standing block ABOVE it. Both were defensible on their own
and the site mixed them, so a reader going down one page met the numeral in
the margin, then above the eyebrow, then centred inside a card.
Measured before the change (`docs/SITE-WIDE-VISUAL-AUDIT.md` GROUP A): the
numeral's offset from its eyebrow was −10px in the grid head and −61 to −72px
in the stacked one, and — the larger consequence — the chapter HEADINGS on a
single page started at up to six different left edges, spanning 210px on an
industry page and 88–90px on a service page.
The spine is now the flush one. The numeral is a block above the eyebrow at
every width, so every chapter heading on a page starts at the same left edge
as the chapter body underneath it. Two reasons for choosing this direction
over insetting everything into a numeral gutter:
1. `/savings-calculator` already used one treatment throughout and was the
only page in the audit with a 0px spread — the flush spine is the one
the site already proves reads correctly.
2. Below 900px `.hl-ihead` has ALWAYS collapsed to exactly this. The change
extends the mobile behaviour upward rather than inventing a third
arrangement, which is why the markup did not have to move.
`--inline` is kept as a no-op alias: six views still emit it, it now means
the same thing the base rule means, and removing it from those views would
be churn with no rendered difference. */
.hl-ihead{
display:grid; grid-template-columns:minmax(0,1fr); gap:0;
margin-bottom:var(--hl-s-14); max-width:1020px;
}
.hl-ihead > *{ min-width:0; }
/* The numeral. `display:block` and a fixed line box are what keep the spine
straight: a block-level numeral cannot push the heading sideways, and
`tabular-nums` stops "01" and "04" reserving different widths — the 12px
heading drift the audit measured on product pages (PD-08). */
.hl-ihead__n,
.hl-ihead__n--inline{
display:block; margin:0 0 var(--hl-s-6); font-variant-numeric:tabular-nums;
font:800 clamp(2rem,3.2vw,3rem)/.9 var(--hl-ff-display); letter-spacing:-.05em;
color:var(--hl-cn-fill, transparent); -webkit-text-stroke:1.6px var(--hl-cn-ink, var(--hl-numeral-ink));
}
/* Legibility, not decoration. The outline used to be 1.4px of `--hl-line-2`
(#D3DBEA) on white, which on the light and alt bands read as a smudge rather
than a number (audit HR-02). `--hl-numeral-ink` is a touch darker and the
stroke a touch heavier; it is still an outline, still quiet, and it is now
legible on every band the design system paints. */
:root{ --hl-numeral-ink:#B9C4DB; }
.hl-ihead--light .hl-ihead__n,
.hl-ihead__n--light{ -webkit-text-stroke-color:var(--hl-cn-ink, rgba(255,255,255,.30)); }
/* The numeral-to-eyebrow gap has to be the SAME on every chapter, and left to
itself it is not: an eyebrow is `inline-flex`, so it sits in a line box whose
height comes from the PARENT's strut. In a block copy column that added ~11px
of half-leading above it (measured gap 31px); inside `.hl-rwhy__lead`, which
is a flex column, the eyebrow is blockified and there is none (20px). Same
markup, same intent, two values.
Blockifying `.hl-eyebrow` globally would move ~200 eyebrows the site does not
want moved, so this is scoped to exactly the two shapes a chapter head takes:
the eyebrow as the numeral's next sibling (the six copy-column compositions),
and the eyebrow opening the wrapper that follows the numeral (the grid head).
Both now measure the numeral's own margin and nothing else. */
.hl-ihead__n + .hl-eyebrow,
.hl-ihead__n + * > .hl-eyebrow:first-child{ display:flex; width:fit-content; }
.hl-ihead__title{ font-size:var(--hl-fs-h2); color:var(--hl-hd-ink, inherit); }
.hl-ihead--light .hl-ihead__title{ color:var(--hl-hd-ink, #fff); }
.hl-ihead__lede{ margin:var(--hl-s-5) 0 0; font-size:var(--hl-fs-lede); line-height:1.7;
color:var(--hl-text-muted); max-width:62ch; }
.hl-ihead--light .hl-ihead__lede{ color:var(--hl-text-light-2); }
/* ── The split head: a chapter head that carries an action on the right ────
`align-items:end` used to put that action on the bottom of the whole head
block. With a one-line heading that looked nearly right; with a two-line
heading plus a lede it landed 101–119px below the heading and about a
thousand pixels to its right, attached to nothing (audit GROUP G). And
because "the bottom of the block" moves with the type scale, the same
one-line relationship measured 5px at 1024, 18px at 1280 and 26px at 1440.
The action now belongs to the HEADING's row and nothing else is allowed into
it. The numeral takes a full-width row above; the lede takes a full-width row
below (`funding-strip.php` had it inside the heading wrapper, which is what
dragged the action down — it is now a sibling). What is left in the middle
row is the eyebrow-plus-heading block and the action, bottom-aligned to each
other, which is the relationship the variant was drawn for. A two-line
heading now lands the action on its second line instead of 119px below the
whole composition.
The rows are placed EXPLICITLY. Auto-placement will not do it: the lede
spans both columns, so the cursor moves past the heading row and the action
lands in a row of its own underneath — which is the bug, one row lower. */
.hl-ihead--split{ grid-template-columns:minmax(0,1fr) auto; align-items:end; max-width:none; }
.hl-ihead--split > .hl-ihead__n{ grid-row:1; grid-column:1 / -1; align-self:start; }
.hl-ihead--split > :not(.hl-ihead__n):not(.hl-ihead__action):not(.hl-ihead__lede){ grid-row:2; grid-column:1; }
.hl-ihead--split > .hl-ihead__action{ grid-row:2; grid-column:2; justify-self:end; }
.hl-ihead--split > .hl-ihead__lede{ grid-row:3; grid-column:1 / -1; align-self:start; margin-top:0; }
.hl-ihead__action{ margin-left:var(--hl-s-8); white-space:nowrap; }
/* On a phone the action cannot sit beside anything, so it stacks under the
heading at the flow contract's distance rather than wherever the grid left
it. */
@media (max-width:768px){
.hl-ihead--split{ grid-template-columns:minmax(0,1fr); }
.hl-ihead--split > .hl-ihead__lede{ grid-row:3; }
.hl-ihead--split > .hl-ihead__action{ grid-row:4; grid-column:1; justify-self:start;
margin:var(--hl-flow) 0 0; }
}
/* The `why` chapter's action, at the foot of its lead column. `margin-top:auto`
pins it to the bottom of the column whatever the copy does, so two `why`
chapters on one page agree with each other. */
.hl-rwhy__cta{ margin-top:var(--hl-s-6); align-self:flex-start; }
.hl-rwhy__lead{ display:flex; flex-direction:column; }
/* ── F5 · ACCEPTANCE SWITCHBOARD ────────────────────────────────────────── */
/* Not six cards: one switchboard. The rail on the left is the system, the panel
on the right is the detail, and the active row physically connects to it. */
.hl-acc{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad);
background:linear-gradient(180deg,#fff,var(--hl-paper) 78%); }
.hl-acc .hl-shell{ position:relative; z-index:1; }
.hl-switch{
display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(20px,2.4vw,36px);
}
/* The rail's spine is drawn on the rail's own box, and the rail is a grid item
stretched to the row height — which on `/funding` (four channels beside a
tall panel) left the line running ~210px past the last row into nothing
(audit GROUP E). Standing the rail down to its content ties the spine to the
rows that justify it. */
.hl-switch__rail{ display:grid; align-content:start; align-self:start; gap:8px; position:relative; }
/* the rail is the system: one continuous line behind the rows */
.hl-switch__rail::before{
content:""; position:absolute; left:26px; top:22px; bottom:22px; width:1px;
background:linear-gradient(180deg,transparent,var(--hl-line-2) 12%,var(--hl-line-2) 88%,transparent);
}
.hl-srow{
position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
align-items:center; gap:14px; text-align:left; padding:15px 16px;
border-radius:var(--hl-r-lg); border:1px solid transparent; background:transparent;
transition:background var(--hl-t-med) var(--hl-e-soft), border-color var(--hl-t-med),
box-shadow var(--hl-t-med), transform var(--hl-t-med) var(--hl-e-out);
}
.hl-srow__ico{ width:20px; height:20px; color:var(--hl-text-muted); flex:none;
transition:color var(--hl-t-med); }
.hl-srow__txt{ min-width:0; }
.hl-srow__txt b{ display:block; font:600 var(--hl-fs-body)/1.25 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.015em; }
.hl-srow__txt i{ display:block; margin-top:3px; font-size:var(--hl-fs-xs); color:var(--hl-text-muted); }
.hl-srow__arrow{
width:8px; height:8px; flex:none; opacity:0;
border-right:1.6px solid var(--hl-brand-red); border-top:1.6px solid var(--hl-brand-red);
transform:rotate(45deg) translateX(-4px);
transition:opacity var(--hl-t-med), transform var(--hl-t-med) var(--hl-e-out);
}
.hl-srow:hover{ background:#fff; border-color:var(--hl-line); box-shadow:var(--hl-sh-sm); }
.hl-srow.is-active{ background:#fff; border-color:var(--hl-line); box-shadow:var(--hl-sh-md); }
.hl-srow.is-active .hl-srow__ico{ color:var(--hl-brand-red); }
.hl-srow.is-active .hl-srow__arrow{ opacity:1; transform:rotate(45deg) translateX(0); }
/* the active row physically connects to the panel */
.hl-srow.is-active::after{
content:""; position:absolute; right:-1px; top:50%; width:calc(clamp(20px,2.4vw,36px) + 2px);
height:1px; background:var(--hl-brand-red); opacity:.5;
}
.hl-switch__panels{ position:relative; }
.hl-spanel{
--hl-spanel-pad:clamp(24px,2.6vw,38px);
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,2.4vw,34px);
align-items:center; height:100%; padding:var(--hl-spanel-pad);
border-radius:var(--hl-r-2xl); background:#fff; border:1px solid var(--hl-line);
box-shadow:var(--hl-sh-lg); overflow:hidden;
}
.hl-spanel[hidden]{ display:none; }
.hl-spanel.is-active{ animation:hls-spanelIn 460ms var(--hl-e-out) both; }
@keyframes hls-spanelIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.hl-spanel__body{ min-width:0; }
.hl-spanel__body h3{ font-size:var(--hl-fs-h3); margin-bottom:var(--hl-s-4); }
.hl-spanel__body p{ font-size:var(--hl-fs-sm); line-height:1.72; color:var(--hl-text-body);
margin-bottom:var(--hl-s-6); max-width:52ch; }
.hl-slist{ display:grid; gap:1px; margin:0; padding:0; list-style:none; }
.hl-slist li{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px; align-items:baseline;
padding:12px 0; border-top:1px solid var(--hl-line); }
.hl-slist li:last-child{ border-bottom:1px solid var(--hl-line); }
.hl-slist b{ font:600 var(--hl-fs-micro)/1.5 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-muted); }
.hl-slist span{ font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-dark); }
/* The row's optional destination. Only the Services index sets one; on a
service page the channels are parts of one page and nothing renders here. */
.hl-spanel__go{ margin-top:var(--hl-s-6); }
/* ── The channel's media ───────────────────────────────────────────────────
One fixed 210px frame used to hold both a photograph and a CSS silhouette.
For the silhouette that frame is right — illustrative artwork wants a stage
and a controlled size. For a photograph it was wrong twice over: the picture
rendered at 188×141 inside a 659×660 panel (6.1% of it), and the frame's own
white card sat on the panel's white card, so the photograph read as a
thumbnail taped to an empty panel rather than as the panel's content
(audit PP-02 / GROUP E).
Two treatments now, chosen by whether the channel actually has a photograph
— `blocks/switchboard.php` sets the modifier. */
.hl-spanel__art{
position:relative; display:grid; grid-template-rows:1fr auto; justify-items:center;
align-items:center; gap:14px; flex:none;
}
/* Illustrative device art: the framed stage, kept. */
.hl-spanel--art{
width:210px; padding:22px 10px; border-radius:var(--hl-r-xl);
background:linear-gradient(170deg,var(--hl-paper),#fff);
border:1px solid var(--hl-line);
}
/* Real photography: roughly the right half of the panel, bled to the panel's
own edges so it is part of the card, with the panel's radius carried on the
outer corners and a white-to-transparent fade on the inside edge so the
picture hands off to the copy instead of butting against it. */
.hl-spanel--haspic{ grid-template-columns:minmax(0,1fr) clamp(220px,34%,400px); gap:0; }
.hl-spanel--photo{
width:auto; align-self:stretch; gap:0; display:block;
margin:calc(var(--hl-spanel-pad) * -1) calc(var(--hl-spanel-pad) * -1) calc(var(--hl-spanel-pad) * -1) 0;
border-radius:0 var(--hl-r-2xl) var(--hl-r-2xl) 0; overflow:hidden;
background:var(--hl-paper);
}
/* The picture is taken out of flow so it can fill the panel without ever
DRIVING its height: a percentage height on an
)
prototype `.fitem__a` → `.hl-faq__answer`
The prototype loads homepage/styles.css first and adds only what an inner
page needs; the same holds here — everything above this line still applies,
and nothing is duplicated.
F0 · route family (short-path variant)
F1 · wayfinding (breadcrumb, current-branch)
F2 · service hero + acceptance diagram
F3 · page rail
F4 · inner section head
F5 · acceptance switchboard
F6 · process track
F7 · compact industries
F8 · hardware insert
F9 · steps chapter
F10 · why — feature panel + rows
F11 · FAQ chapter
F12 · responsive
F13 · reduced motion */
:root{ --hl-rail-h:58px; }
/* The sticky rail sits under the sticky header, so an anchor jump has to clear
both. Only on a page that actually has a rail — :has() keeps the default
(header only) everywhere else instead of reserving space for nothing. */
html:has(.hl-rail){ scroll-padding-top:calc(var(--hl-nav-h) + var(--hl-rail-h) + 20px); }
/* Off-screen holder for the gradient defs a page's diagrams share. */
.hl-svgdefs{ position:absolute; width:0; height:0; overflow:hidden; }
/* ── F0 · ROUTE FAMILY (short-path variant) ─────────────────────────────── */
/* `.hl-rte__amb` / `.hl-rte__flow` dash values are tuned for very long ambient
section routes and read as almost empty on a short diagram path. Diagram
routes get their own pair — same colours, same idea, different arithmetic.
Every path carries pathLength="300", so one dash setting fits every shape
and all signals travel at the same speed regardless of the path's length. */
.hl-sroute{ stroke:rgba(255,255,255,.14); stroke-width:1.4; fill:none; }
.hl-sroute--dim{ stroke:rgba(255,255,255,.07); stroke-dasharray:3 5; }
.hl-infra--light .hl-sroute,
.hl-acc .hl-sroute, .hl-binds .hl-sroute, .hl-why2 .hl-sroute{ stroke:rgba(42,45,124,.16); }
.hl-spulse{
stroke:url(#hl-sgrad); stroke-width:2.4; fill:none; stroke-linecap:round;
stroke-dasharray:26 300; stroke-dashoffset:326;
animation:hls-spulse 4.4s var(--hl-e-inout) infinite; animation-delay:var(--hl-d,0s);
filter:drop-shadow(0 0 6px rgba(122,130,255,.6));
}
.hl-why2 .hl-spulse{ stroke:url(#hl-sgradl); filter:none; }
@keyframes hls-spulse{ 0%{ stroke-dashoffset:326 } 62%,100%{ stroke-dashoffset:0 } }
@keyframes hls-spulseSlow{ 0%{ stroke-dashoffset:340 } 62%,100%{ stroke-dashoffset:0 } }
.hl-spulse--slow{ animation-name:hls-spulseSlow; animation-duration:7s;
stroke-dasharray:40 300; stroke-dashoffset:340; }
/* ── F1 · WAYFINDING ────────────────────────────────────────────────────── */
.hl-crumb{ margin-bottom:var(--hl-s-6); }
.hl-crumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; padding:0;
list-style:none; font:500 var(--hl-fs-micro)/1 var(--hl-ff-body);
letter-spacing:.1em; text-transform:uppercase; }
.hl-crumb li{ display:flex; align-items:center; gap:8px; color:var(--hl-text-light-4); }
.hl-crumb li + li::before{ content:""; width:4px; height:4px; border-radius:50%;
background:currentColor; opacity:.5; }
.hl-crumb a{ color:var(--hl-text-light-3); transition:color var(--hl-t-fast); }
.hl-crumb a:hover{ color:#fff; }
.hl-crumb [aria-current="page"]{ color:var(--hl-red-300); }
/* Current-branch markers. An inner page should always say where it sits.
Production carries `is-current` on the nav LINK (bridge E9), so the marker
hangs off the link rather than off the item. */
.hl-nav__link.is-current{ color:#fff; }
.hl-nav__item:not(.is-open) > .hl-nav__link.is-current::after{
opacity:1; background:linear-gradient(90deg,var(--hl-red-500),rgba(207,41,39,0));
}
.hl-mega__card.is-current{ border-color:rgba(207,41,39,.45); background:rgba(207,41,39,.07); }
.hl-footer a[aria-current="page"],
.hl-dacc__body a[aria-current="page"]{ color:#fff; }
/* ── F2 · SERVICE HERO ──────────────────────────────────────────────────── */
/* Pulled up under the sticky header exactly like the homepage hero, so the
transparent nav sits on the dark chapter instead of on white. Not optional
on any dark-hero page. */
.hl-shero{
position:relative; isolation:isolate; overflow:hidden;
background:
radial-gradient(1100px 640px at 82% 4%, #1B2166 0%, transparent 62%),
radial-gradient(820px 560px at 4% 92%, #191E58 0%, transparent 60%),
linear-gradient(168deg,#0B0E28 0%,#080A1D 55%,#05060F 100%);
margin-top:calc(var(--hl-nav-h) * -1); padding-top:var(--hl-nav-h);
}
.hl-shero__shell{
position:relative; z-index:1;
display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center;
gap:clamp(36px,4vw,72px);
padding-block:clamp(48px,5vw,84px) var(--hl-hero-air);
}
.hl-shero__copy{ max-width:600px; min-width:0; }
/* The token is the whole closing distance, so the last group in a hero column
stands its own trailing margin down. Without this a hero that happens to end
in a chip list adds the list's 24px on top and the contract becomes a floor
instead of a value — which is how 86px became 110px on six pages. */
.hl-hero__shell > * > :last-child,
.hl-shero__shell > * > :last-child{ margin-bottom:0; }
/* ── HEADING LINE BREAKS ───────────────────────────────────────────────────
`text-wrap:balance` evens the lines of a short display heading instead of
filling greedily and leaving an orphan. The Cash Discount hero broke as
"One Posted / Price, and a / Discount for Cash." — a four-word middle line
splitting a noun phrase (audit M-03). Balancing is the fix that does not
require authoring a break per heading per width.
`hyphens:manual` is the other half. The Pay-at-Pump product H1 broke on its
OWN hyphen — "Pay-at- / Pump Terminal" — because a hyphen is a break
opportunity by default. The product name is one token and now stays one
(audit M-02 / PD-09).
Both degrade to today's behaviour where unsupported; neither changes a
heading that already fits. */
:where(.hl-hero__h1, .hl-shero__h1, .hl-heroblock__title, .hl-ihead__title,
.hl-price__title, .hl-h2, .hl-ioffer__title){
text-wrap:balance; hyphens:manual;
}
.hl-shero__h1{
font:800 clamp(2.3rem,4.2vw,3.6rem)/1.05 var(--hl-ff-display);
color:#fff; letter-spacing:-.035em; margin-bottom:var(--hl-s-6);
}
/* the italic overhang eats the following word space — give it back */
.hl-shero__h1 em{ font-style:italic; font-weight:700; color:var(--hl-navy-300); margin-right:.08em; }
.hl-shero__lede{ font-size:var(--hl-fs-lede); line-height:1.68; color:var(--hl-text-light-2);
max-width:52ch; margin-bottom:var(--hl-s-8); }
.hl-shero__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hl-shero__chips{ margin-bottom:0; }
.hl-shero__chips li{ font-size:var(--hl-fs-micro); letter-spacing:.05em; text-transform:uppercase; }
.hl-shero__viz{ min-width:0; }
/* Acceptance diagram: channels converging on one system, then out to
authorization and settlement. The stage holds a fixed aspect ratio so the
SVG wires and the CSS-positioned nodes can never drift apart at any width. */
.hl-accv{
position:relative; padding:20px 20px 16px; border-radius:var(--hl-r-2xl);
background:linear-gradient(160deg,rgba(42,45,124,.34),rgba(10,12,34,.72));
border:1px solid var(--hl-line-dark-2); box-shadow:var(--hl-sh-glass);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hl-accv__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.hl-accv__label{ font:600 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wider);
text-transform:uppercase; color:var(--hl-text-light-4); }
.hl-accv__live{ display:inline-flex; align-items:center; gap:7px; padding:5px 10px;
border-radius:var(--hl-r-pill); background:rgba(47,214,163,.10); border:1px solid rgba(47,214,163,.28);
font:500 var(--hl-fs-micro)/1 var(--hl-ff-mono); letter-spacing:.06em; color:var(--hl-ok); }
.hl-accv__live i{ width:5px; height:5px; border-radius:50%; background:var(--hl-ok);
box-shadow:0 0 8px var(--hl-ok); animation:hls-blip 2.2s var(--hl-e-inout) infinite; }
@keyframes hls-blip{ 0%,100%{ opacity:1 } 50%{ opacity:.28 } }
.hl-accv__stage{ position:relative; width:100%; aspect-ratio:460/340; }
.hl-accv__routes{ position:absolute; inset:0; width:100%; height:100%; }
.hl-accv__in{
position:absolute; left:0; top:5.6%; width:32.2%; height:60.6%;
display:grid; grid-template-rows:repeat(var(--hl-accv-rows,4),1fr);
margin:0; padding:0; list-style:none;
}
/* grid, not flex: the icon spans both rows so the label sits above the caption */
.hl-cnode{
display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center;
column-gap:9px; margin:3px 0; padding:0 11px;
border-radius:var(--hl-r-sm); background:rgba(255,255,255,.05);
border:1px solid var(--hl-line-dark); min-width:0;
animation:hls-cnodeLit 4.4s var(--hl-e-inout) infinite; animation-delay:calc(var(--hl-i,0) * .55s);
}
@keyframes hls-cnodeLit{
0%,88%,100%{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09) }
6%,20%{ background:rgba(90,97,204,.22); border-color:rgba(144,150,228,.5) }
}
.hl-cnode__ico{ grid-row:1/span 2; width:16px; height:16px; color:var(--hl-navy-300); }
.hl-cnode b{ grid-column:2; font:600 var(--hl-fs-xs)/1.15 var(--hl-ff-display); color:#fff;
letter-spacing:-.015em; white-space:nowrap; }
.hl-cnode i{ grid-column:2; margin-top:2px; font-size:var(--hl-fs-micro); color:var(--hl-text-light-4);
line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hl-accv .hl-sroute{ stroke:rgba(255,255,255,.2); }
.hl-accv__out{ position:absolute; left:56.1%; right:0; top:0; bottom:0; }
.hl-corenode{
position:absolute; left:0; right:0; top:22.4%; height:29.4%;
display:flex; flex-direction:column; justify-content:center; padding:0 14px;
border-radius:var(--hl-r-md);
background:linear-gradient(150deg,rgba(207,41,39,.16),rgba(42,45,124,.5));
border:1px solid rgba(229,84,78,.34);
box-shadow:0 18px 40px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.hl-corenode__tag{ font:700 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-red-300); }
.hl-corenode b{ margin-top:5px; font:700 var(--hl-fs-sm)/1.2 var(--hl-ff-display); color:#fff;
letter-spacing:-.02em; }
.hl-corenode__rows{ display:flex; gap:12px; margin-top:9px; flex-wrap:wrap; }
.hl-corenode__rows li{ display:inline-flex; align-items:center; gap:5px;
font:400 var(--hl-fs-micro)/1 var(--hl-ff-mono); color:var(--hl-text-light-3); }
.hl-corenode__rows i{ width:5px; height:5px; border-radius:1.5px; background:var(--hl-text-light-4);
transition:background var(--hl-t-med), box-shadow var(--hl-t-med); }
.hl-corenode__rows li.is-on i{ background:var(--hl-ok); box-shadow:0 0 8px rgba(47,214,163,.8); }
.hl-corenode__rows li.is-on{ color:#fff; }
.hl-onode{
position:absolute; left:0; right:0; height:11.76%;
display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 13px;
border-radius:var(--hl-r-sm); background:rgba(255,255,255,.045);
border:1px solid var(--hl-line-dark); min-width:0;
}
.hl-onode--0{ top:63.5%; }
.hl-onode--1{ top:84.1%; }
.hl-onode__k{ font:600 var(--hl-fs-xs)/1 var(--hl-ff-display); color:#fff; white-space:nowrap; }
.hl-onode__v{ font:400 var(--hl-fs-micro)/1 var(--hl-ff-mono); color:var(--hl-text-light-4);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hl-onode--ok{ background:rgba(47,214,163,.09); border-color:rgba(47,214,163,.3); }
.hl-onode--ok .hl-onode__v{ color:var(--hl-ok); }
.hl-accv__foot{ margin:12px 0 0; padding-top:11px; border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); color:var(--hl-text-light-4); }
/* ── F3 · PAGE RAIL ─────────────────────────────────────────────────────── */
/* The main structural difference between an inner page and the homepage: the
whole page is visible at a glance and the reader always knows where they are. */
.hl-rail{
position:sticky; top:var(--hl-nav-h); z-index:40;
background:rgba(7,9,25,.92); -webkit-backdrop-filter:blur(16px) saturate(140%);
backdrop-filter:blur(16px) saturate(140%);
border-bottom:1px solid var(--hl-line-dark);
}
.hl-rail__shell{ display:flex; align-items:center; gap:var(--hl-s-6); height:var(--hl-rail-h); }
.hl-rail__title{
display:inline-flex; align-items:center; gap:9px; flex:none;
font:700 var(--hl-fs-xs)/1 var(--hl-ff-display); color:#fff; letter-spacing:-.01em;
padding-right:var(--hl-s-6); border-right:1px solid var(--hl-line-dark);
}
.hl-rail__title::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--hl-red-500);
box-shadow:0 0 10px rgba(207,41,39,.8); }
.hl-rail__list{ display:flex; align-items:center; gap:2px; min-width:0; flex:1;
overflow-x:auto; scrollbar-width:none; margin:0; padding:0; list-style:none; }
.hl-rail__list::-webkit-scrollbar{ display:none; }
/* ── GROUP H · A HIDDEN SCROLLER IS NOT A NAVIGATION ───────────────────────
`overflow-x:auto` with the scrollbar suppressed is invisible. On `/terms` at
1536 the rail's content is 1,563px inside an 865px viewport — 698px and 8 of
14 chapters unreachable unless the reader guesses that the strip drags — and
the item at the boundary is cut mid-word against the CTA (audit LG-02). The
same pattern hides 719px of the switchboard's channels at 768 (CH-10).
`.hl-scrollcue` is the shared answer: the scroller is masked so its content
fades out at whichever edge still has content beyond it. Without JavaScript
the right-hand fade is always on, which is the honest default for a strip
that is nearly always longer than its box; `highline.js` then adds
`is-cue-start` / `is-cue-end` so the fade disappears at a real end and
appears on the left once the reader has scrolled. Nothing is hidden that was
not hidden before — the point is that the reader can now SEE that it moves. */
.hl-scrollcue{
--hl-cue-l:0px; --hl-cue-r:44px;
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 var(--hl-cue-l),
#000 calc(100% - var(--hl-cue-r)), transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 var(--hl-cue-l),
#000 calc(100% - var(--hl-cue-r)), transparent 100%);
}
.hl-scrollcue.is-cue-start{ --hl-cue-l:44px; }
.hl-scrollcue.is-cue-end{ --hl-cue-r:0px; }
/* A scroller that fits needs no cue at all. */
.hl-scrollcue.is-cue-none{ --hl-cue-l:0px; --hl-cue-r:0px; }
.hl-rail__list a{
position:relative; display:block; padding:9px 13px; border-radius:var(--hl-r-sm); white-space:nowrap;
font:500 var(--hl-fs-xs)/1 var(--hl-ff-display); color:var(--hl-text-light-3);
transition:color var(--hl-t-fast), background var(--hl-t-fast);
}
.hl-rail__list a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.hl-rail__list a.is-active{ color:#fff; }
.hl-rail__list a.is-active::after{
content:""; position:absolute; left:13px; right:13px; bottom:3px; height:2px; border-radius:2px;
background:var(--hl-red-500);
}
.hl-rail__cta{ flex:none; }
/* ── F4 · INNER SECTION HEAD — THE CHAPTER SPINE ────────────────────────── */
/* Outlined numerals give a long inner page a spine and read as documentation
rather than marketing. The figure is derived by the renderer from the page's
own rail order, so it can never disagree with the navigation.
── ONE SPINE, AND WHY IT IS THIS ONE ─────────────────────────────────────
This head used to put the numeral in a grid column BESIDE the eyebrow, while
six other compositions — `content · steps`, `why · compact`, `faq · chapter`,
`cash_discount`, `products · insert` and `promotion · offer` — drew the same
numeral as a free-standing block ABOVE it. Both were defensible on their own
and the site mixed them, so a reader going down one page met the numeral in
the margin, then above the eyebrow, then centred inside a card.
Measured before the change (`docs/SITE-WIDE-VISUAL-AUDIT.md` GROUP A): the
numeral's offset from its eyebrow was −10px in the grid head and −61 to −72px
in the stacked one, and — the larger consequence — the chapter HEADINGS on a
single page started at up to six different left edges, spanning 210px on an
industry page and 88–90px on a service page.
The spine is now the flush one. The numeral is a block above the eyebrow at
every width, so every chapter heading on a page starts at the same left edge
as the chapter body underneath it. Two reasons for choosing this direction
over insetting everything into a numeral gutter:
1. `/savings-calculator` already used one treatment throughout and was the
only page in the audit with a 0px spread — the flush spine is the one
the site already proves reads correctly.
2. Below 900px `.hl-ihead` has ALWAYS collapsed to exactly this. The change
extends the mobile behaviour upward rather than inventing a third
arrangement, which is why the markup did not have to move.
`--inline` is kept as a no-op alias: six views still emit it, it now means
the same thing the base rule means, and removing it from those views would
be churn with no rendered difference. */
.hl-ihead{
display:grid; grid-template-columns:minmax(0,1fr); gap:0;
margin-bottom:var(--hl-s-14); max-width:1020px;
}
.hl-ihead > *{ min-width:0; }
/* The numeral. `display:block` and a fixed line box are what keep the spine
straight: a block-level numeral cannot push the heading sideways, and
`tabular-nums` stops "01" and "04" reserving different widths — the 12px
heading drift the audit measured on product pages (PD-08). */
.hl-ihead__n,
.hl-ihead__n--inline{
display:block; margin:0 0 var(--hl-s-6); font-variant-numeric:tabular-nums;
font:800 clamp(2rem,3.2vw,3rem)/.9 var(--hl-ff-display); letter-spacing:-.05em;
color:var(--hl-cn-fill, transparent); -webkit-text-stroke:1.6px var(--hl-cn-ink, var(--hl-numeral-ink));
}
/* Legibility, not decoration. The outline used to be 1.4px of `--hl-line-2`
(#D3DBEA) on white, which on the light and alt bands read as a smudge rather
than a number (audit HR-02). `--hl-numeral-ink` is a touch darker and the
stroke a touch heavier; it is still an outline, still quiet, and it is now
legible on every band the design system paints. */
:root{ --hl-numeral-ink:#B9C4DB; }
.hl-ihead--light .hl-ihead__n,
.hl-ihead__n--light{ -webkit-text-stroke-color:var(--hl-cn-ink, rgba(255,255,255,.30)); }
/* The numeral-to-eyebrow gap has to be the SAME on every chapter, and left to
itself it is not: an eyebrow is `inline-flex`, so it sits in a line box whose
height comes from the PARENT's strut. In a block copy column that added ~11px
of half-leading above it (measured gap 31px); inside `.hl-rwhy__lead`, which
is a flex column, the eyebrow is blockified and there is none (20px). Same
markup, same intent, two values.
Blockifying `.hl-eyebrow` globally would move ~200 eyebrows the site does not
want moved, so this is scoped to exactly the two shapes a chapter head takes:
the eyebrow as the numeral's next sibling (the six copy-column compositions),
and the eyebrow opening the wrapper that follows the numeral (the grid head).
Both now measure the numeral's own margin and nothing else. */
.hl-ihead__n + .hl-eyebrow,
.hl-ihead__n + * > .hl-eyebrow:first-child{ display:flex; width:fit-content; }
.hl-ihead__title{ font-size:var(--hl-fs-h2); color:var(--hl-hd-ink, inherit); }
.hl-ihead--light .hl-ihead__title{ color:var(--hl-hd-ink, #fff); }
.hl-ihead__lede{ margin:var(--hl-s-5) 0 0; font-size:var(--hl-fs-lede); line-height:1.7;
color:var(--hl-text-muted); max-width:62ch; }
.hl-ihead--light .hl-ihead__lede{ color:var(--hl-text-light-2); }
/* ── The split head: a chapter head that carries an action on the right ────
`align-items:end` used to put that action on the bottom of the whole head
block. With a one-line heading that looked nearly right; with a two-line
heading plus a lede it landed 101–119px below the heading and about a
thousand pixels to its right, attached to nothing (audit GROUP G). And
because "the bottom of the block" moves with the type scale, the same
one-line relationship measured 5px at 1024, 18px at 1280 and 26px at 1440.
The action now belongs to the HEADING's row and nothing else is allowed into
it. The numeral takes a full-width row above; the lede takes a full-width row
below (`funding-strip.php` had it inside the heading wrapper, which is what
dragged the action down — it is now a sibling). What is left in the middle
row is the eyebrow-plus-heading block and the action, bottom-aligned to each
other, which is the relationship the variant was drawn for. A two-line
heading now lands the action on its second line instead of 119px below the
whole composition.
The rows are placed EXPLICITLY. Auto-placement will not do it: the lede
spans both columns, so the cursor moves past the heading row and the action
lands in a row of its own underneath — which is the bug, one row lower. */
.hl-ihead--split{ grid-template-columns:minmax(0,1fr) auto; align-items:end; max-width:none; }
.hl-ihead--split > .hl-ihead__n{ grid-row:1; grid-column:1 / -1; align-self:start; }
.hl-ihead--split > :not(.hl-ihead__n):not(.hl-ihead__action):not(.hl-ihead__lede){ grid-row:2; grid-column:1; }
.hl-ihead--split > .hl-ihead__action{ grid-row:2; grid-column:2; justify-self:end; }
.hl-ihead--split > .hl-ihead__lede{ grid-row:3; grid-column:1 / -1; align-self:start; margin-top:0; }
.hl-ihead__action{ margin-left:var(--hl-s-8); white-space:nowrap; }
/* On a phone the action cannot sit beside anything, so it stacks under the
heading at the flow contract's distance rather than wherever the grid left
it. */
@media (max-width:768px){
.hl-ihead--split{ grid-template-columns:minmax(0,1fr); }
.hl-ihead--split > .hl-ihead__lede{ grid-row:3; }
.hl-ihead--split > .hl-ihead__action{ grid-row:4; grid-column:1; justify-self:start;
margin:var(--hl-flow) 0 0; }
}
/* The `why` chapter's action, at the foot of its lead column. `margin-top:auto`
pins it to the bottom of the column whatever the copy does, so two `why`
chapters on one page agree with each other. */
.hl-rwhy__cta{ margin-top:var(--hl-s-6); align-self:flex-start; }
.hl-rwhy__lead{ display:flex; flex-direction:column; }
/* ── F5 · ACCEPTANCE SWITCHBOARD ────────────────────────────────────────── */
/* Not six cards: one switchboard. The rail on the left is the system, the panel
on the right is the detail, and the active row physically connects to it. */
.hl-acc{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad);
background:linear-gradient(180deg,#fff,var(--hl-paper) 78%); }
.hl-acc .hl-shell{ position:relative; z-index:1; }
.hl-switch{
display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(20px,2.4vw,36px);
}
/* The rail's spine is drawn on the rail's own box, and the rail is a grid item
stretched to the row height — which on `/funding` (four channels beside a
tall panel) left the line running ~210px past the last row into nothing
(audit GROUP E). Standing the rail down to its content ties the spine to the
rows that justify it. */
.hl-switch__rail{ display:grid; align-content:start; align-self:start; gap:8px; position:relative; }
/* the rail is the system: one continuous line behind the rows */
.hl-switch__rail::before{
content:""; position:absolute; left:26px; top:22px; bottom:22px; width:1px;
background:linear-gradient(180deg,transparent,var(--hl-line-2) 12%,var(--hl-line-2) 88%,transparent);
}
.hl-srow{
position:relative; z-index:1; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
align-items:center; gap:14px; text-align:left; padding:15px 16px;
border-radius:var(--hl-r-lg); border:1px solid transparent; background:transparent;
transition:background var(--hl-t-med) var(--hl-e-soft), border-color var(--hl-t-med),
box-shadow var(--hl-t-med), transform var(--hl-t-med) var(--hl-e-out);
}
.hl-srow__ico{ width:20px; height:20px; color:var(--hl-text-muted); flex:none;
transition:color var(--hl-t-med); }
.hl-srow__txt{ min-width:0; }
.hl-srow__txt b{ display:block; font:600 var(--hl-fs-body)/1.25 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.015em; }
.hl-srow__txt i{ display:block; margin-top:3px; font-size:var(--hl-fs-xs); color:var(--hl-text-muted); }
.hl-srow__arrow{
width:8px; height:8px; flex:none; opacity:0;
border-right:1.6px solid var(--hl-brand-red); border-top:1.6px solid var(--hl-brand-red);
transform:rotate(45deg) translateX(-4px);
transition:opacity var(--hl-t-med), transform var(--hl-t-med) var(--hl-e-out);
}
.hl-srow:hover{ background:#fff; border-color:var(--hl-line); box-shadow:var(--hl-sh-sm); }
.hl-srow.is-active{ background:#fff; border-color:var(--hl-line); box-shadow:var(--hl-sh-md); }
.hl-srow.is-active .hl-srow__ico{ color:var(--hl-brand-red); }
.hl-srow.is-active .hl-srow__arrow{ opacity:1; transform:rotate(45deg) translateX(0); }
/* the active row physically connects to the panel */
.hl-srow.is-active::after{
content:""; position:absolute; right:-1px; top:50%; width:calc(clamp(20px,2.4vw,36px) + 2px);
height:1px; background:var(--hl-brand-red); opacity:.5;
}
.hl-switch__panels{ position:relative; }
.hl-spanel{
--hl-spanel-pad:clamp(24px,2.6vw,38px);
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,2.4vw,34px);
align-items:center; height:100%; padding:var(--hl-spanel-pad);
border-radius:var(--hl-r-2xl); background:#fff; border:1px solid var(--hl-line);
box-shadow:var(--hl-sh-lg); overflow:hidden;
}
.hl-spanel[hidden]{ display:none; }
.hl-spanel.is-active{ animation:hls-spanelIn 460ms var(--hl-e-out) both; }
@keyframes hls-spanelIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.hl-spanel__body{ min-width:0; }
.hl-spanel__body h3{ font-size:var(--hl-fs-h3); margin-bottom:var(--hl-s-4); }
.hl-spanel__body p{ font-size:var(--hl-fs-sm); line-height:1.72; color:var(--hl-text-body);
margin-bottom:var(--hl-s-6); max-width:52ch; }
.hl-slist{ display:grid; gap:1px; margin:0; padding:0; list-style:none; }
.hl-slist li{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:16px; align-items:baseline;
padding:12px 0; border-top:1px solid var(--hl-line); }
.hl-slist li:last-child{ border-bottom:1px solid var(--hl-line); }
.hl-slist b{ font:600 var(--hl-fs-micro)/1.5 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-muted); }
.hl-slist span{ font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-dark); }
/* The row's optional destination. Only the Services index sets one; on a
service page the channels are parts of one page and nothing renders here. */
.hl-spanel__go{ margin-top:var(--hl-s-6); }
/* ── The channel's media ───────────────────────────────────────────────────
One fixed 210px frame used to hold both a photograph and a CSS silhouette.
For the silhouette that frame is right — illustrative artwork wants a stage
and a controlled size. For a photograph it was wrong twice over: the picture
rendered at 188×141 inside a 659×660 panel (6.1% of it), and the frame's own
white card sat on the panel's white card, so the photograph read as a
thumbnail taped to an empty panel rather than as the panel's content
(audit PP-02 / GROUP E).
Two treatments now, chosen by whether the channel actually has a photograph
— `blocks/switchboard.php` sets the modifier. */
.hl-spanel__art{
position:relative; display:grid; grid-template-rows:1fr auto; justify-items:center;
align-items:center; gap:14px; flex:none;
}
/* Illustrative device art: the framed stage, kept. */
.hl-spanel--art{
width:210px; padding:22px 10px; border-radius:var(--hl-r-xl);
background:linear-gradient(170deg,var(--hl-paper),#fff);
border:1px solid var(--hl-line);
}
/* Real photography: roughly the right half of the panel, bled to the panel's
own edges so it is part of the card, with the panel's radius carried on the
outer corners and a white-to-transparent fade on the inside edge so the
picture hands off to the copy instead of butting against it. */
.hl-spanel--haspic{ grid-template-columns:minmax(0,1fr) clamp(220px,34%,400px); gap:0; }
.hl-spanel--photo{
width:auto; align-self:stretch; gap:0; display:block;
margin:calc(var(--hl-spanel-pad) * -1) calc(var(--hl-spanel-pad) * -1) calc(var(--hl-spanel-pad) * -1) 0;
border-radius:0 var(--hl-r-2xl) var(--hl-r-2xl) 0; overflow:hidden;
background:var(--hl-paper);
}
/* The picture is taken out of flow so it can fill the panel without ever
DRIVING its height: a percentage height on an ![]()
inside an auto-height
grid item resolves against the image's intrinsic size, and the panel grew to
2,132px the first time this was written with `height:100%`. */
.hl-spanel--photo .hl-pslot{ position:absolute; inset:0; display:block; height:auto; }
.hl-spanel--photo .hl-pslot img{
position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none;
object-fit:cover; object-position:center; padding:0; margin:0;
}
.hl-spanel--photo::after{
content:""; position:absolute; inset:0 auto 0 0; width:clamp(40px, 22%, 96px);
background:linear-gradient(90deg, #fff, rgba(255,255,255,0));
pointer-events:none;
}
/* The banner treatment begins where the PANEL goes single-column, which is
1120px (below), not 900px. While these two disagreed there was a 220px band —
901 to 1120, and 1024 sits in it — where the panel had already stacked but
the photograph was still being laid out as a side column. It kept
`align-self:stretch` in a row whose height was auto, and its `.hl-pslot` is
`position:absolute`, so nothing inside it contributed any height at all: the
picture collapsed to a 53px strip in a 530px panel (5.6% of it — worse than
the 6.1% letterbox this whole treatment was written to replace). Measured on
`/services/payment-processing` at 1024: Online Payments 280x53, Mobile
Payments 280x80. */
@media (max-width:1120px){
/* Stacked: the photograph becomes a banner across the top of the panel and
the negative margins flip with it. */
.hl-spanel--photo{
/* `order:-1` is load-bearing and belongs HERE rather than being inherited
from the device-stage rule below: the media is the panel's last child in
the markup, and this treatment is a banner across the TOP — negative top
margin, top-only radius, and a fade rising from its bottom edge. Without
it the photograph renders at the foot of the panel with the top of a
banner drawn on it, upside down at the wrong end. */
order:-1;
width:auto; height:200px; grid-template-rows:1fr;
margin:calc(var(--hl-spanel-pad) * -1) calc(var(--hl-spanel-pad) * -1) 0;
border-radius:var(--hl-r-2xl) var(--hl-r-2xl) 0 0;
}
.hl-spanel--photo::after{ inset:auto 0 0 0; width:auto; height:56px;
background:linear-gradient(0deg, #fff, rgba(255,255,255,0)); }
}
.hl-spanel__art .hl-pslot{ height:100%; }
.hl-spanel__art .hl-dev{ --hl-k:.86; transform:scale(.86); margin-block:-14px;
animation:hls-hover 7s var(--hl-e-inout) infinite; }
.hl-spanel__art .hl-dev--smart{ --hl-k:.8; transform:scale(.8); margin-block:-21px; }
.hl-spanel__art .hl-dev--counter{ --hl-k:.86; transform:scale(.86); margin-block:-9px; }
.hl-spanel__art .hl-dev--invoice{ --hl-k:.9; transform:scale(.9); margin-block:-7px; }
.hl-spanel__art .hl-pslot__ph{ --hl-ph-name:var(--hl-text-dark); --hl-ph-note:var(--hl-text-muted); }
/* ── The panel with no image at all ────────────────────────────────────────
`Show image` off in Admin, or a channel that has neither an upload nor a
device silhouette to stand in for one. Either way the artwork element is not
in the markup — `blocks/switchboard.php` does not render it — and this rule
removes what the markup alone cannot.
Both declarations are load-bearing, and the second is the one that is easy to
miss. `grid-template-columns` still declares a second track, and an empty
declared track is still a track: the `clamp(20px,2.4vw,34px)` column gap is
laid out beside it whether or not anything ever lands there. Measured on
`/funding`, whose four channels have never had artwork, the body was 549px
inside a 584px content box — 34px of reserved gutter with nothing on the far
side of it. That is the "empty reserved column" this state exists to not
have, so the TRACK goes, not just the item.
The copy keeps `.hl-spanel__body p{max-width:52ch}`, which is the measure the
`/funding` panels already read at: the point of the extra width is that the
detail rows and the heading get it, not that the lede runs to 90 characters.
This is deliberately the same composition — a text-only panel here and a
text-only panel there should not be two designs. */
.hl-spanel--textonly{ grid-template-columns:minmax(0,1fr); gap:0; }
/* ── F6 · PROCESS TRACK ─────────────────────────────────────────────────── */
/* Always-visible stops, not a stepper: the reader should understand the journey
without clicking. The lit stage advances on its own so it reads as a journey,
and any hover or focus takes over and stops the rotation. */
.hl-flow{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad);
background:linear-gradient(178deg,var(--hl-ink-900),var(--hl-ink-850) 55%,var(--hl-ink-900)); }
.hl-flow .hl-shell{ position:relative; z-index:1; }
.hl-track{ position:relative; }
.hl-track__line{ position:absolute; left:0; right:0; top:52px; height:40px; z-index:0; }
.hl-track__stops{
position:relative; z-index:1; margin:0; padding:0; list-style:none;
display:grid; grid-template-columns:repeat(var(--hl-track-cols,6),minmax(0,1fr));
gap:clamp(10px,1.1vw,16px);
}
.hl-stop{
position:relative; padding:22px 16px 20px; border-radius:var(--hl-r-lg);
background:rgba(255,255,255,.035); border:1px solid var(--hl-line-dark);
transition:background var(--hl-t-med), border-color var(--hl-t-med), transform var(--hl-t-med) var(--hl-e-out);
}
.hl-stop::before{
content:""; position:absolute; left:16px; top:-5px; width:9px; height:9px; border-radius:50%;
background:var(--hl-ink-800); border:1.5px solid var(--hl-line-dark-2);
transition:background var(--hl-t-med), border-color var(--hl-t-med), box-shadow var(--hl-t-med);
}
.hl-stop__n{ display:block; margin-bottom:12px;
font:700 var(--hl-fs-micro)/1 var(--hl-ff-mono); letter-spacing:.14em; color:var(--hl-text-light-4); }
.hl-stop__t{ font:700 var(--hl-fs-h4)/1.2 var(--hl-ff-display); color:#fff; letter-spacing:-.02em;
margin-bottom:9px; }
.hl-stop p{ font-size:var(--hl-fs-xs); line-height:1.62; color:var(--hl-text-light-3); margin:0; }
.hl-stop:hover,.hl-stop:focus-within,.hl-stop.is-lit{
background:rgba(90,97,204,.12); border-color:rgba(144,150,228,.34); transform:translateY(-4px);
}
.hl-stop:hover::before,.hl-stop:focus-within::before,.hl-stop.is-lit::before{
background:var(--hl-red-500); border-color:var(--hl-red-400);
box-shadow:0 0 0 4px rgba(207,41,39,.18), 0 0 14px rgba(207,41,39,.7);
}
.hl-stop--end{ background:rgba(47,214,163,.06); border-color:rgba(47,214,163,.22); }
.hl-stop--end .hl-stop__n{ color:var(--hl-ok); }
/*
* The qualification under the track.
*
* It is a CALLOUT, not body copy — one sentence that belongs with the sequence
* above it — so it is measured by its panel rather than by a reading measure.
* `max-width:82ch` used to cap the paragraph at 724px inside a panel 1192px
* wide, which wrapped a line that had 420px of room left to two, and the extra
* line took the panel from 54px to 90px. The panel is already bounded by the
* shell; a second bound inside it was the whole defect.
*
* Padding is 14px rather than 20px for the same reason: 40px of vertical
* padding around a single line reads as a block, and this is a footnote.
* Nothing else moved — the accent rule, the ground, the type ramp and the
* emphasis colour are the approved treatment.
*
* Narrower viewports wrap it naturally, which is correct: the sentence is not
* shortened to fit and nothing is clipped.
*/
.hl-track__note{
margin-top:var(--hl-s-10); padding:14px 22px; border-radius:var(--hl-r-lg);
background:rgba(255,255,255,.04); border:1px solid var(--hl-line-dark);
border-left:3px solid var(--hl-red-500);
}
.hl-track__note p{ margin:0; font-size:var(--hl-fs-sm); line-height:1.7; color:var(--hl-text-light-2); }
.hl-track__note b, .hl-track__note strong{ color:#fff; font-weight:600; }
/* ── F7 · COMPACT INDUSTRIES ────────────────────────────────────────────── */
/* Deliberately compact — one row of pills and one panel. This is supporting
content; the homepage owns the full industries experience. */
.hl-binds{ position:relative; padding-block:var(--hl-sec-pad-sm); background:var(--hl-paper); }
.hl-binds__more{ align-self:end; padding-bottom:6px; }
.hl-binds__tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--hl-s-8); }
.hl-btab{
display:inline-flex; align-items:center; gap:9px; padding:11px 17px; border-radius:var(--hl-r-pill);
background:#fff; border:1px solid var(--hl-line);
font:600 var(--hl-fs-sm)/1 var(--hl-ff-display); color:var(--hl-text-muted); letter-spacing:-.01em;
transition:color var(--hl-t-med), border-color var(--hl-t-med), box-shadow var(--hl-t-med),
background var(--hl-t-med), transform var(--hl-t-med) var(--hl-e-out);
}
.hl-btab [data-ico]{ width:16px; height:16px; }
.hl-btab:hover{ color:var(--hl-text-dark); border-color:var(--hl-line-2); transform:translateY(-2px); }
.hl-btab.is-active{
color:#fff; background:linear-gradient(168deg,var(--hl-ink-750),var(--hl-ink-850));
border-color:transparent; box-shadow:var(--hl-sh-navy);
}
.hl-bpanel{
padding:clamp(24px,2.6vw,36px); border-radius:var(--hl-r-2xl);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
}
.hl-bpanel[hidden]{ display:none; }
.hl-bpanel.is-active{ animation:hls-spanelIn 420ms var(--hl-e-out) both; }
.hl-bpanel__lead{ margin:0 0 var(--hl-s-6); font-size:var(--hl-fs-lede); line-height:1.55;
color:var(--hl-text-dark); font-family:var(--hl-ff-display); font-weight:600;
letter-spacing:-.02em; max-width:56ch; }
.hl-bpanel__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
background:var(--hl-line); border:1px solid var(--hl-line); border-radius:var(--hl-r-md);
overflow:hidden; margin:0; }
.hl-bpanel__cols > div{ background:#fff; padding:18px 20px; }
.hl-bpanel__cols dt{ font:600 var(--hl-fs-micro)/1.5 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-brand-red); margin-bottom:7px; }
.hl-bpanel__cols dd{ margin:0; font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-dark); }
.hl-bpanel__link{ margin-top:var(--hl-s-6); }
/* ── F8 · HARDWARE INSERT ───────────────────────────────────────────────── */
.hl-hw2{ position:relative; padding-block:var(--hl-sec-pad); background:#fff; }
.hl-hw2__shell{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:clamp(32px,3.6vw,64px); align-items:center; }
.hl-hw2__copy{ min-width:0; }
.hl-hw2__copy .hl-ihead__title{ margin-bottom:var(--hl-s-5); }
.hl-hw2__lede{ font-size:var(--hl-fs-sm); line-height:1.72; color:var(--hl-text-body); max-width:44ch; }
.hl-hw2__note{
margin:var(--hl-s-5) 0 var(--hl-s-8); padding:14px 16px; border-radius:var(--hl-r-md);
background:var(--hl-paper); border:1px solid var(--hl-line); border-left:3px solid var(--hl-brand-red);
font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-dark);
}
/*
* `grid-auto-rows:1fr` — the same correction `.hl-pgrid` already carries, and
* for the same reason. This grid is two columns and two rows at every width, and
* auto rows size to their own tallest item, so the row holding the longest
* description was 396px while the row under it was 376px. Nothing was wrong
* with either card; the rows were simply independent, and the result was four
* "View details" controls at four different heights down the page.
*
* In a grid whose own height is indefinite, `1fr` rows all resolve to the
* tallest row's max-content height. No fixed height, no JavaScript, and the
* spare height lands under the caption where `.hl-hcard__link{margin-top:auto}`
* is waiting for it.
*/
.hl-hw2__grid{ display:grid; grid-template-columns:repeat(var(--hl-row-n, 2), minmax(0,1fr)); grid-auto-rows:1fr;
gap:clamp(14px,1.4vw,20px); margin:0; padding:0; list-style:none; }
/* the route into the full catalog, under the chapter's own action rather than
beside it — see `.hl-rhw__all` for why it is flex rather than inline-flex */
.hl-hw2__all{ display:flex; width:fit-content; margin-top:var(--hl-s-5); }
/* .hl-pslot__ph defaults to light-on-dark, and this section is white. */
.hl-hw2 .hl-pslot__ph{ --hl-ph-name:var(--hl-text-dark); --hl-ph-note:var(--hl-text-muted); }
.hl-hw2 .hl-hcard__meta b{ display:block; font:700 var(--hl-fs-h4)/1.2 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.02em; margin-bottom:6px; }
.hl-hw2 .hl-hcard__meta i{ display:block; font-size:var(--hl-fs-xs); line-height:1.55;
color:var(--hl-text-muted); margin-top:0; }
/* dev--smart has no .hl-hcard scale in the homepage system — give it one.
A scaled device still reserves full layout height, so margin-block claws the
difference back and keeps the four cards the same height. */
.hl-hw2 .hl-hcard .hl-dev--smart{ --hl-k:.72; transform:scale(.72); margin-block:-30px; }
.hl-hw2 .hl-hcard .hl-dev--counter{ --hl-k:.86; transform:scale(.86); margin-block:-9px; }
.hl-hw2 .hl-hcard .hl-dev--portable{ --hl-k:.86; transform:scale(.86); margin-block:-13px; }
/* Fixed slot height rather than flex:1 — otherwise a card with a shorter
caption gives its spare height to the slot and the placeholders stop
aligning across the row. */
.hl-hw2 .hl-hcard{ --hl-hcard-media:200px; }
/* The slot is fixed here, so the CAPTION is the child that grows — which is
what gives `.hl-hcard__link{margin-top:auto}` something to push against and
holds "View details" on the card's bottom edge whatever the description does. */
.hl-hw2 .hl-hcard__meta{ flex:1; }
/* ── F9 · STEPS CHAPTER ─────────────────────────────────────────────────── */
/* "Here is what it depends on, and here is the method" — a copy column beside
numbered steps. On Payment Processing it carries pricing, and shows no rate:
pricing is a statement-analysis outcome, not a number on a marketing page. */
.hl-price{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad);
background:linear-gradient(172deg,var(--hl-ink-850),var(--hl-ink-950)); }
.hl-price__shell{ position:relative; z-index:1;
display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
gap:clamp(32px,3.6vw,68px); align-items:start; }
/* The copy column opens the chapter, so it stays pinned to the top — the
numeral has to sit on the section's spine. The step cards are the shorter
column (353 against 514 on Payment Processing, 475 against 789 on Cash
Discount), and left at `start` they stopped 161–314px above the copy's
last line. Centred, the difference is shared top and bottom and reads as a
composition rather than as a column that ran out. */
.hl-price__steps{ align-self:center; }
.hl-price__copy{ min-width:0; }
.hl-price__title{ font:800 clamp(2rem,3.4vw,3rem)/1.06 var(--hl-ff-display); color:#fff;
letter-spacing:-.04em; margin-bottom:var(--hl-s-4); }
.hl-price__lede{ font-size:var(--hl-fs-lede); color:#fff; font-weight:500; margin-bottom:var(--hl-s-5);
max-width:44ch; }
.hl-price__body{ font-size:var(--hl-fs-sm); line-height:1.75; color:var(--hl-text-light-2); max-width:56ch;
margin-bottom:var(--hl-s-8); }
.hl-price__body p{ margin:0 0 1em; }
.hl-price__body p:last-child{ margin-bottom:0; }
.hl-price__body strong{ color:#fff; }
.hl-price__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hl-price__disc{ margin:var(--hl-s-5) 0 0; padding-top:var(--hl-s-4); border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); color:var(--hl-text-light-4); max-width:52ch; }
.hl-price__steps{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.hl-price__steps li{
position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px;
padding:20px 22px; border-radius:var(--hl-r-lg);
background:rgba(255,255,255,.04); border:1px solid var(--hl-line-dark);
transition:background var(--hl-t-med), border-color var(--hl-t-med);
}
.hl-price__steps li:hover{ background:rgba(255,255,255,.07); border-color:var(--hl-line-dark-2); }
.hl-pstep__n{ grid-row:1/span 2;
font:700 var(--hl-fs-micro)/1 var(--hl-ff-mono); letter-spacing:.12em; color:var(--hl-red-400);
padding-top:3px; }
.hl-price__steps b{ font:700 var(--hl-fs-h4)/1.2 var(--hl-ff-display); color:#fff; letter-spacing:-.02em; }
.hl-price__steps span:last-child{ font-size:var(--hl-fs-xs); line-height:1.62; color:var(--hl-text-light-3); }
/* ── F10 · WHY — FEATURE PANEL + ROWS ───────────────────────────────────── */
/* One feature panel carries the argument; the rest are compact rows. Six equal
cards would say nothing about what matters most. */
.hl-why2{ position:relative; padding-block:var(--hl-sec-pad-sm); background:var(--hl-paper); }
.hl-why2__grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(18px,2vw,30px); align-items:start; }
.hl-wfeat{
position:relative; overflow:hidden; padding:clamp(26px,2.8vw,38px);
border-radius:var(--hl-r-2xl);
background:linear-gradient(162deg,var(--hl-ink-750),var(--hl-ink-900) 62%,var(--hl-ink-950));
border:1px solid var(--hl-line-dark-2); box-shadow:var(--hl-sh-lg);
}
.hl-wfeat h3{ font-size:var(--hl-fs-h3); color:#fff; margin-bottom:var(--hl-s-4); }
.hl-wfeat p{ font-size:var(--hl-fs-sm); line-height:1.72; color:var(--hl-text-light-2);
margin-bottom:var(--hl-s-8); }
.hl-wfeat__viz{ position:relative; height:74px; }
.hl-wfeat__viz svg{ position:absolute; inset:0; width:100%; height:100%; }
.hl-wfeat__viz .hl-sroute{ stroke:rgba(255,255,255,.16); }
.hl-wfeat__viz .hl-spulse{ stroke:url(#hl-sgrad); }
.hl-wfeat__node{
position:absolute; top:50%; left:var(--hl-x); transform:translate(-50%,-50%);
padding:7px 12px; border-radius:var(--hl-r-pill); white-space:nowrap;
background:var(--hl-ink-800); border:1px solid var(--hl-line-dark-2);
font:600 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:.06em; text-transform:uppercase;
color:#fff;
}
.hl-wfeat__node:last-child{ border-color:rgba(229,84,78,.45); background:rgba(207,41,39,.18); }
.hl-wlist{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-content:start;
margin:0; padding:0; list-style:none; }
.hl-wlist li{
display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 14px; padding:20px 22px;
border-radius:var(--hl-r-lg); background:#fff; border:1px solid var(--hl-line);
transition:transform var(--hl-t-med) var(--hl-e-out), box-shadow var(--hl-t-med), border-color var(--hl-t-med);
}
.hl-wlist li:hover{ transform:translateY(-4px); box-shadow:var(--hl-sh-md); border-color:var(--hl-line-2); }
/* an odd number of rows: the last one spans, so the block ends square */
.hl-wlist li:last-child:nth-child(odd){ grid-column:1/-1; }
.hl-wlist__ico{ grid-row:1/span 2; width:20px; height:20px; color:var(--hl-brand-red); padding-top:2px; }
.hl-wlist b{ font:700 var(--hl-fs-h4)/1.25 var(--hl-ff-display); color:var(--hl-text-dark); letter-spacing:-.02em; }
.hl-wlist span:last-child{ font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-muted); }
/* ── F11 · FAQ CHAPTER ──────────────────────────────────────────────────── */
/* The approved treatment applied to the production FAQ block, which is
/: every answer is real crawlable text, it opens and closes
with no JavaScript at all, and keyboard and screen-reader semantics come from
the elements rather than from ARIA that has to be kept in step by hand. */
.hl-faq-sec{ position:relative; padding-block:var(--hl-sec-pad); background:#fff; }
.hl-faq-sec .hl-shell{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
gap:clamp(32px,3.6vw,72px); align-items:start; }
/* ── TWO-COLUMN BALANCE ────────────────────────────────────────────────────
`--hl-sticky-top` is the offset a travelling column needs to clear the
sticky header AND the sticky page rail. `.hl-faq__lead` invented it inline
and it works — measured on `/services/ach-echeck`, the lead pins at 186px
and holds there through 450px of scrolling — so the FAQ chapter's "void" is
a screenshot artefact rather than dead space a reader ever sees.
The token is named here so the other short columns can use the same
behaviour instead of each inventing a number. See the balance decisions
recorded beside `.hl-price__steps`, `.hl-check` and `.hl-formsec__aside`. */
:root{ --hl-sticky-top: calc(var(--hl-nav-h) + var(--hl-rail-h) + 28px); }
.hl-faq__lead{ position:sticky; top:var(--hl-sticky-top); min-width:0; }
html:not(:has(.hl-rail)) .hl-faq__lead{ top:calc(var(--hl-nav-h) + 28px); }
.hl-faq__copy{ margin:var(--hl-s-5) 0 var(--hl-s-8); font-size:var(--hl-fs-sm); line-height:1.7;
color:var(--hl-text-muted); max-width:38ch; }
.hl-faq-sec .hl-faq{ border-top:1px solid var(--hl-line); min-width:0; }
.hl-faq-sec .hl-faq__item{ border-bottom:1px solid var(--hl-line); }
.hl-faq-sec .hl-faq__question{
display:flex; align-items:center; justify-content:space-between; gap:20px;
width:100%; text-align:left; padding:22px 0; cursor:pointer; list-style:none;
font:700 clamp(1rem,1.25vw,1.18rem)/1.4 var(--hl-ff-display); color:var(--hl-text-dark);
letter-spacing:-.02em; transition:color var(--hl-t-fast);
}
.hl-faq-sec .hl-faq__question::-webkit-details-marker{ display:none; }
.hl-faq-sec .hl-faq__question:hover{ color:var(--hl-brand-red); }
/* Plus / minus drawn from two rules so it can rotate into a minus. */
.hl-faq-sec .hl-faq__icon{ position:relative; width:20px; height:20px; flex:none; }
.hl-faq-sec .hl-faq__icon::before,
.hl-faq-sec .hl-faq__icon::after{
content:""; position:absolute; left:50%; top:50%; width:13px; height:1.8px; border-radius:2px;
background:var(--hl-brand-red); transform:translate(-50%,-50%);
transition:transform var(--hl-t-med) var(--hl-e-out), opacity var(--hl-t-med);
}
.hl-faq-sec .hl-faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.hl-faq-sec .hl-faq__item[open] .hl-faq__icon::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; }
.hl-faq-sec .hl-faq__answer{ overflow:hidden; }
.hl-faq-sec .hl-faq__answer .hl-rich{ padding:0 60px 24px 0; font-size:var(--hl-fs-sm); line-height:1.75;
color:var(--hl-text-body); max-width:70ch; }
.hl-faq-sec .hl-faq__answer .hl-rich p{ margin:0 0 1em; }
.hl-faq-sec .hl-faq__answer .hl-rich p:last-child{ margin-bottom:0; }
/* ── F12 · RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:1280px){
.hl-track__stops{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hl-track__line{ display:none; }
.hl-stop::before{ display:none; }
}
@media (max-width:1120px){
.hl-switch{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
.hl-spanel{ grid-template-columns:minmax(0,1fr); }
/* `--art` and not `__art`: this centres a 280px device stage above the copy,
which is right for illustrative artwork and wrong for a photograph that is
meant to bleed to the panel's edges. Both variants carry `__art`, so the
unscoped selector was capping the photo at 280px too. */
.hl-spanel--art{ width:100%; max-width:280px; margin-inline:auto; order:-1; }
.hl-why2__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1024px){
:root{ --hl-rail-h:52px; }
.hl-shero__shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-12); }
.hl-shero__copy{ max-width:none; }
.hl-shero__viz{ max-width:560px; }
.hl-accv__stage{ aspect-ratio:460/320; }
.hl-hw2__shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-12); }
.hl-hw2__lede{ max-width:none; }
.hl-price__shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-10); }
.hl-faq-sec .hl-shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-10); }
.hl-faq__lead{ position:static; }
.hl-faq__copy{ max-width:none; }
.hl-rail__title{ display:none; }
}
@media (max-width:900px){
.hl-switch{ grid-template-columns:minmax(0,1fr); }
.hl-switch__rail::before{ display:none; }
.hl-switch__rail{ display:flex; overflow-x:auto; gap:8px; padding-bottom:6px; scrollbar-width:none; }
.hl-switch__rail::-webkit-scrollbar{ display:none; }
.hl-srow{ flex:none; width:232px; background:#fff; border-color:var(--hl-line);
grid-template-columns:auto minmax(0,1fr); }
.hl-srow__arrow{ display:none; }
.hl-srow.is-active::after{ display:none; }
.hl-srow.is-active{ border-color:var(--hl-brand-red); box-shadow:0 0 0 3px rgba(207,41,39,.1), var(--hl-sh-sm); }
/* The head is a single column at every width now (§F4), so the only thing
left to do here is step the numeral down with the rest of the type. The
`grid-template-columns` overrides that used to live here would have
reintroduced a second gap on top of the numeral's own margin. */
.hl-ihead__n{ font-size:2rem; }
.hl-binds__more{ align-self:start; }
.hl-bpanel__cols{ grid-template-columns:minmax(0,1fr); }
.hl-wlist{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:768px){
.hl-track__stops{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hl-hw2__grid{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); }
}
@media (max-width:640px){
/* Mobile hero diagram: the same story told as a vertical spine. The absolute
positioning and the SVG wires are dropped rather than squeezed. */
.hl-accv{ padding:16px 16px 14px; }
.hl-accv__stage{ aspect-ratio:auto; display:block; }
.hl-accv__routes{ display:none; }
/* grid-template-rows must be reset too, or the desktop rows keep stretching
and leave a dead band under the channels */
.hl-accv__in{ position:static; width:auto; height:auto;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; gap:8px; }
.hl-cnode{ margin:0; padding:10px; border-radius:var(--hl-r-sm); }
.hl-cnode i{ display:none; }
.hl-accv__out{ position:static; margin-top:14px; padding-top:16px;
display:grid; gap:10px; border-top:1px dashed var(--hl-line-dark-2); }
.hl-corenode,.hl-onode{ position:static; height:auto; }
.hl-corenode{ padding:14px; }
.hl-onode{ padding:12px 14px; }
.hl-shero__h1{ font-size:clamp(2rem,8.4vw,2.6rem); }
.hl-shero__cta .hl-btn{ flex:1 1 auto; justify-content:center; }
.hl-shero__chips li{ font-size:.62rem; padding:6px 10px; }
.hl-rail__shell{ gap:var(--hl-s-4); }
.hl-rail__cta{ display:none; }
.hl-rail__list{ margin-inline:calc(var(--hl-gutter) * -1); padding-inline:var(--hl-gutter); }
.hl-track__stops{ grid-template-columns:minmax(0,1fr); gap:10px; }
.hl-stop{ padding:18px; }
.hl-track__note{ padding:12px 16px; }
.hl-spanel{ padding:20px; }
.hl-slist li{ grid-template-columns:minmax(0,1fr); gap:4px; }
.hl-spanel__art{ max-width:220px; padding:16px 10px; }
.hl-hw2__grid{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); gap:10px; }
.hl-hw2 .hl-hcard{ padding:16px 12px; }
.hl-hw2 .hl-hcard{ --hl-hcard-media:172px; }
.hl-hw2 .hl-hcard .hl-pslot{ margin-bottom:12px; }
.hl-hw2 .hl-hcard .hl-dev--smart{ --hl-k:.56; transform:scale(.56); margin-block:-47px; }
.hl-hw2 .hl-hcard .hl-dev--counter{ --hl-k:.7; transform:scale(.7); margin-block:-20px; }
.hl-hw2 .hl-hcard .hl-dev--portable{ --hl-k:.72; transform:scale(.72); margin-block:-27px; }
.hl-hw2 .hl-hcard .hl-dev--reader{ --hl-k:.9; transform:scale(.9); margin-block:-6px; }
.hl-hw2 .hl-hcard__meta b{ font-size:.92rem; }
.hl-hw2 .hl-hcard__meta i{ font-size:.72rem; }
/* three pills will not sit on one route at phone width — drop the wire and
let them wrap as a plain row */
.hl-wfeat__viz{ height:auto; display:flex; flex-wrap:wrap; gap:8px;
align-items:center; justify-content:center; }
.hl-wfeat__viz svg{ display:none; }
.hl-wfeat__node{ position:static; transform:none; }
.hl-price__cta .hl-btn{ flex:1 1 auto; justify-content:center; }
.hl-price__steps li{ padding:16px 18px; }
.hl-faq-sec .hl-faq__question{ padding:18px 0; gap:14px; }
.hl-faq-sec .hl-faq__answer .hl-rich{ padding-right:0; padding-bottom:20px; }
}
@media (max-width:430px){
.hl-btab{ padding:10px 14px; font-size:var(--hl-fs-xs); }
.hl-srow{ width:214px; padding:13px 14px; }
.hl-crumb ol{ font-size:.62rem; gap:6px; }
}
@media (max-width:400px){
.hl-accv__in{ grid-template-columns:minmax(0,1fr); }
.hl-cnode i{ display:block; }
/* the device cards stay 2-up even at 360 — one column would double the
section height for no gain in legibility */
.hl-hw2__grid{ gap:8px; }
.hl-hw2 .hl-hcard{ padding:14px 10px; }
.hl-hw2 .hl-hcard{ --hl-hcard-media:166px; }
.hl-ihead__n{ font-size:1.75rem; }
}
/* ── F13 · REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.hl-spulse,.hl-cnode,.hl-accv__live i,.hl-spanel__art .hl-dev{ animation:none !important; }
.hl-spulse{ stroke-dashoffset:0; opacity:.55; }
.hl-cnode{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09); }
.hl-spanel.is-active,.hl-bpanel.is-active{ animation:none !important; }
}
/* ── G · INDUSTRY LAYER (industry pages) ──────────────────────────────────
SOURCE OF TRUTH: public/prototype/industry/industry.css (approved).
Layer 3 of 3. Ported by exactly the rules sections C and F already follow —
`.foo` → `.hl-foo`, `--foo` → `--hl-foo`, `@keyframes foo` → `hls-foo`,
`is-*`/`has-*` unchanged. Nothing above this line is redefined: the tokens,
the reset, the primitives, the infrastructure language, the device kit and
product slots, the nav/mega/drawer, the footer, the closing CTA and the
preloader all come from section C, and the page rail, the breadcrumb, the
chapter numerals, the short-path route family and the FAQ chapter all come
from section F.
Two deliberate deviations from a literal rename, both because production
already owns the name:
prototype `.offer` → `.hl-ioffer` `.hl-offer` is already the offer pill
inside the homepage industry panel
(section 11) and means something else.
prototype `@keyframes hover` / `bob` → reused as `hls-hover` / `hls-bob`,
which section C already defines with
identical values.
And one family renamed onto the component that already does the job, the
same way the service layer reused `.hl-hcard`:
prototype `.hcard` (hardware row) → `.hl-hcard` (section 09's card)
An industry page differs from a service page in one way that matters: it
sells an operating environment rather than a capability list. So the
centrepiece is the venue drawn as a payment system, and the supporting
chapters carry more texture.
G0 · industry hero + product stage
G1 · the floor (venue map)
G2 · hardware showcase
G3 · benefits bento
G4 · promotional offer band
G5 · cash discount + check visual
G6 · funding strip
G7 · why (compact)
G8 · responsive
G9 · reduced motion */
/* ── G0 · INDUSTRY HERO ─────────────────────────────────────────────────── */
/* `.hl-shero` already supplies the nav pull-up and the dark chapter; only the
mood and the artwork column change. */
.hl-ihero{
background:
radial-gradient(1150px 660px at 84% 2%, #221C4E 0%, transparent 60%),
radial-gradient(880px 600px at 2% 96%, #16194C 0%, transparent 58%),
linear-gradient(168deg,#0C0F2A 0%,#080A1E 55%,#05060F 100%);
}
.hl-ihero .hl-shero__shell{ grid-template-columns:1.04fr .96fr; align-items:center; }
/* An industry hero with NO stage device.
`hero-industry.php` renders no artwork column when the product slot produces
nothing — no media, no device key — so the two-column shell above would leave
its whole right half empty and squeeze the copy into 600px beside it. One
column, and the copy is allowed to use it; the measures below keep the
headline and lede readable rather than letting them run the full 1280px.
This applies to any page built on this hero without a stage device, not only
to the equipment catalog. */
.hl-ihero--nostage .hl-shero__shell{ grid-template-columns:minmax(0,1fr); }
.hl-ihero--nostage .hl-shero__copy{ max-width:none; }
.hl-ihero--nostage .hl-shero__h1{ max-width:24ch; }
.hl-ihero--nostage .hl-shero__lede{ max-width:62ch; }
/* Offer flag — the promotional claim restated inline, linking to the offer
chapter. Rendered only when the destination actually resolves. */
.hl-oflag{
display:inline-flex; align-items:center; gap:12px; margin-top:var(--hl-s-8);
padding:11px 16px 11px 12px; border-radius:var(--hl-r-pill);
background:rgba(207,41,39,.12); border:1px solid rgba(229,84,78,.34);
font-size:var(--hl-fs-xs); color:var(--hl-text-light-2);
transition:background var(--hl-t-med), border-color var(--hl-t-med),
transform var(--hl-t-med) var(--hl-e-out);
}
.hl-oflag:hover{ background:rgba(207,41,39,.2); border-color:rgba(229,84,78,.6);
transform:translateY(-2px); }
.hl-oflag__tag{ padding:4px 9px; border-radius:var(--hl-r-xs); background:rgba(207,41,39,.3);
color:#fff; font:700 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; }
.hl-oflag__txt em{ color:#fff; font-weight:700; font-style:normal; }
.hl-oflag .hl-arrow{ color:var(--hl-red-300); transition:transform var(--hl-t-med) var(--hl-e-out); }
.hl-oflag:hover .hl-arrow{ transform:translateX(3px); }
/* Product stage: the hero device with floating capability labels. This is the
industry equivalent of the service hero's abstract acceptance diagram — it
shows the thing rather than the flow. Kept darker than the device silhouette
on purpose: the devices paint in the same navy family and a navy card would
swallow them. */
.hl-rstage{
position:relative; padding:26px 22px 16px; border-radius:var(--hl-r-2xl); overflow:hidden;
background:linear-gradient(158deg,rgba(30,34,92,.5),rgba(4,5,14,.9) 72%);
border:1px solid var(--hl-line-dark-2); box-shadow:var(--hl-sh-glass);
backdrop-filter:blur(10px);
}
.hl-rstage__glow{
position:absolute; left:50%; top:46%; width:74%; aspect-ratio:1; transform:translate(-50%,-50%);
border-radius:50%; background:radial-gradient(circle, rgba(207,41,39,.2), transparent 62%);
filter:blur(34px); pointer-events:none;
}
.hl-rstage__routes{ position:absolute; inset:0; width:100%; height:100%; }
.hl-rstage__slot{ position:relative; z-index:2; min-height:250px; }
/* transform-scaled devices reserve full layout height; margin-block claws it back */
.hl-rstage__slot .hl-dev{ --hl-k:1.16; transform:scale(1.16);
margin-block:14px; animation:hls-hover 7s var(--hl-e-inout) infinite; }
.hl-rstage__slot::before{
content:""; position:absolute; left:50%; bottom:34px; width:52%; height:16px;
transform:translateX(-50%); border-radius:50%;
background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); filter:blur(6px);
}
.hl-rlabel{
position:absolute; z-index:3; padding:7px 12px; border-radius:var(--hl-r-sm); white-space:nowrap;
background:rgba(10,12,34,.84); border:1px solid var(--hl-line-dark-2);
backdrop-filter:blur(10px); box-shadow:0 14px 30px -14px rgba(0,0,0,.85);
font:500 var(--hl-fs-xs)/1 var(--hl-ff-body); color:#fff;
animation:hls-bob 7s var(--hl-e-inout) infinite;
}
.hl-rlabel::before{
content:""; position:absolute; top:50%; width:11px; height:1px; background:rgba(229,84,78,.7);
}
.hl-rlabel--1{ top:16%; left:2%; animation-delay:-.4s; }
.hl-rlabel--1::before{ right:-11px; }
.hl-rlabel--2{ top:30%; right:1%; animation-delay:-2.1s; }
.hl-rlabel--2::before{ left:-11px; }
.hl-rlabel--3{ bottom:30%; left:1%; animation-delay:-3.8s; }
.hl-rlabel--3::before{ right:-11px; }
.hl-rlabel--4{ bottom:19%; right:2%; animation-delay:-5.4s; }
.hl-rlabel--4::before{ left:-11px; }
.hl-rstage__foot{
position:relative; z-index:3; margin:10px 0 0; padding-top:11px;
border-top:1px solid var(--hl-line-dark); text-align:center;
font-size:var(--hl-fs-micro); color:var(--hl-text-light-4);
}
/* ── G1 · THE FLOOR ─────────────────────────────────────────────────────── */
/* The venue as a payment system. Same fixed-aspect-stage technique as the
service hero diagram: the SVG coordinate space is 720×420 and every hotspot
is placed with percentages derived from it, so the wires and the CSS boxes
cannot drift apart at any width. The renderer owns those coordinates — they
come from an approved plan chosen by station count, never from admin input. */
.hl-floor{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad);
background:linear-gradient(178deg,var(--hl-ink-900),var(--hl-ink-850) 55%,var(--hl-ink-900)); }
.hl-floor .hl-shell{ position:relative; z-index:1; }
/* minmax(0,…) on every track and min-width:0 on both children: a plain `1fr`
is minmax(auto,1fr), and the auto minimum would size the column to the widest
STACKED panel instead of the container. The section clips overflow, so that
failure is silent — the card just truncates. Bridge rule E8. */
.hl-floor__wrap{
display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
gap:clamp(20px,2.4vw,36px); align-items:start;
}
.hl-floor__stage,.hl-floor__panels{ min-width:0; }
/* `.hl-floor__map` is the fixed-aspect positioning context; `.hl-floor__stage`
is a plain block so the caption below the plan stays in normal flow. */
.hl-floor__stage{ position:relative; width:100%; }
.hl-floor__map{ position:relative; width:100%; aspect-ratio:720/460; }
.hl-floor__plan{ position:absolute; inset:0; width:100%; height:100%; }
.hl-floor__room{ stroke:rgba(255,255,255,.16); stroke-width:1.4; fill:rgba(255,255,255,.018); }
.hl-floor__div{ stroke:rgba(255,255,255,.07); stroke-width:1; stroke-dasharray:4 7; }
.hl-floor .hl-sroute{ stroke:rgba(255,255,255,.13); }
.hl-floor__roomtag{
position:absolute; left:4.2%; top:7.1%; transform:translateY(-140%);
font:600 var(--hl-fs-micro)/1 var(--hl-ff-mono); letter-spacing:.14em; text-transform:uppercase;
color:var(--hl-text-light-4);
}
.hl-floor__spots{ position:absolute; inset:0; }
.hl-spot{
position:absolute; left:var(--hl-x); top:var(--hl-y); transform:translate(-50%,-50%);
display:inline-flex; align-items:center; gap:9px; padding:9px 14px 9px 11px;
border-radius:var(--hl-r-pill); white-space:nowrap;
background:rgba(12,15,42,.9); border:1px solid var(--hl-line-dark-2);
backdrop-filter:blur(8px);
font:600 var(--hl-fs-xs)/1 var(--hl-ff-display); color:var(--hl-text-light-2); letter-spacing:-.01em;
transition:color var(--hl-t-med), background var(--hl-t-med), border-color var(--hl-t-med),
box-shadow var(--hl-t-med), transform var(--hl-t-med) var(--hl-e-out);
}
.hl-spot i{
width:8px; height:8px; border-radius:50%; flex:none;
background:var(--hl-text-light-4); transition:background var(--hl-t-med), box-shadow var(--hl-t-med);
}
.hl-spot:hover{ color:#fff; border-color:rgba(255,255,255,.3);
transform:translate(-50%,-50%) translateY(-2px); }
.hl-spot.is-active{
color:#fff; background:linear-gradient(160deg,rgba(207,41,39,.34),rgba(42,45,124,.7));
border-color:rgba(229,84,78,.55);
box-shadow:0 0 0 4px rgba(207,41,39,.14), 0 18px 36px -18px rgba(0,0,0,.9);
}
.hl-spot.is-active i{ background:var(--hl-red-400); box-shadow:0 0 12px rgba(229,84,78,.9); }
/* the destination node reads as the account, not as another station */
.hl-spot--end{ background:rgba(47,214,163,.09); border-color:rgba(47,214,163,.28); }
.hl-spot--end i{ background:var(--hl-ok); }
.hl-spot--end.is-active{ background:linear-gradient(160deg,rgba(47,214,163,.28),rgba(42,45,124,.68));
border-color:rgba(47,214,163,.6); box-shadow:0 0 0 4px rgba(47,214,163,.12),
0 18px 36px -18px rgba(0,0,0,.9); }
.hl-spot--end.is-active i{ background:var(--hl-ok); box-shadow:0 0 12px rgba(47,214,163,.9); }
/* The thesis line, under the plan. */
.hl-floor__foot{ margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none; }
.hl-floor__foot span{
padding:9px 15px; border-radius:var(--hl-r-pill);
background:rgba(255,255,255,.05); border:1px solid var(--hl-line-dark);
font:500 var(--hl-fs-xs)/1 var(--hl-ff-body); color:var(--hl-text-light-2);
}
/* Detail panel — dark glass, so the chapter stays dark. All panels stack in one
grid cell and hide with `visibility` rather than `display`, so the container
is always the height of the tallest station and switching never moves the
page. That matters more here than anywhere else: the switcher IS the
chapter. */
.hl-floor__panels{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
.hl-fpanel{
grid-area:1/1; min-width:0;
display:grid; grid-template-rows:auto auto; gap:var(--hl-s-6); align-content:start;
padding:clamp(22px,2.4vw,32px); border-radius:var(--hl-r-2xl);
background:linear-gradient(160deg,rgba(42,45,124,.3),rgba(10,12,34,.72));
border:1px solid var(--hl-line-dark-2); box-shadow:var(--hl-sh-glass);
backdrop-filter:blur(10px);
visibility:hidden; opacity:0; pointer-events:none; transform:translateY(9px);
transition:opacity 320ms var(--hl-e-out), transform 420ms var(--hl-e-out), visibility 320ms;
}
.hl-fpanel.is-active{ visibility:visible; opacity:1; pointer-events:auto; transform:none; }
.hl-fpanel__k{ display:block; margin-bottom:var(--hl-s-3);
font:700 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wider);
text-transform:uppercase; color:var(--hl-red-300); }
.hl-fpanel__body h3{ font-size:var(--hl-fs-h3); color:#fff; margin-bottom:var(--hl-s-4); }
.hl-fpanel__body p{ margin-bottom:var(--hl-s-6); font-size:var(--hl-fs-sm); line-height:1.72;
color:var(--hl-text-light-2); }
.hl-fspec{ display:grid; gap:1px; margin:0; padding:0; list-style:none; }
.hl-fspec li{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; align-items:baseline;
padding:11px 0; border-top:1px solid var(--hl-line-dark); }
.hl-fspec li:last-child{ border-bottom:1px solid var(--hl-line-dark); }
.hl-fspec b{ font:600 var(--hl-fs-micro)/1.5 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-light-4); }
.hl-fspec span{ font-size:var(--hl-fs-xs); line-height:1.6; color:#fff; }
/* The panel's device slot. `.hl-pslot` is a grid in section C; `display:contents`
lets the art frame own the two rows so artwork and caption keep the approved
vertical rhythm whether the slot renders a silhouette or a photograph. */
.hl-fpanel__art{
position:relative; display:grid; grid-template-rows:1fr auto; justify-items:center;
align-items:center; gap:12px; height:180px;
border-radius:var(--hl-r-xl); background:rgba(255,255,255,.03);
border:1px solid var(--hl-line-dark);
}
.hl-fpanel__art .hl-pslot{ display:contents; }
.hl-fpanel__art .hl-dev{ --hl-k:.8; transform:scale(.8); animation:hls-hover 7s var(--hl-e-inout) infinite; }
.hl-fpanel__art .hl-dev--rest{ --hl-k:.72; transform:scale(.72); margin-block:-23px; }
.hl-fpanel__art .hl-dev--counter{ --hl-k:.78; transform:scale(.78); margin-block:-15px; }
.hl-fpanel__art .hl-dev--portable{ --hl-k:.72; transform:scale(.72); margin-block:-27px; }
.hl-fpanel__art .hl-dev--reader{ --hl-k:.94; transform:scale(.94); margin-block:-4px; }
.hl-fpanel__art .hl-dev--invoice{ --hl-k:.74; transform:scale(.74); margin-block:-19px; }
.hl-fpanel__art .hl-dev--smart{ --hl-k:.6; transform:scale(.6); margin-block:-40px; }
.hl-fpanel__art .hl-dev--pump{ --hl-k:.6; transform:scale(.6); margin-block:-42px; }
.hl-fpanel__art img{ max-height:128px; width:auto; object-fit:contain; }
/* The station with no image at all — `Show image` off, or nothing to draw. The
same rule as `.hl-spanel--textonly` and for the same reason: the panel's
second track and the `--hl-s-6` gap beside it are laid out even when nothing
occupies them, so the track is removed rather than the item hidden. Declared
once here and re-declared in each responsive block below, because those
blocks re-state `grid-template-columns` on `.hl-fpanel` itself. */
.hl-fpanel--textonly{ grid-template-rows:auto; grid-template-columns:minmax(0,1fr); gap:0; }
/* ── G2 · HARDWARE SHOWCASE ─────────────────────────────────────────────── */
.hl-rhw{ position:relative; padding-block:var(--hl-sec-pad);
background:linear-gradient(180deg,#fff,var(--hl-paper) 82%); }
.hl-rhw__more{ align-self:end; padding-bottom:6px; }
.hl-rhw__feature{
display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(24px,3vw,54px); align-items:center;
padding:clamp(24px,2.6vw,40px); margin-bottom:clamp(14px,1.4vw,20px);
border-radius:var(--hl-r-2xl); background:#fff; border:1px solid var(--hl-line);
box-shadow:var(--hl-sh-lg);
}
.hl-rhw__art{
position:relative; display:grid; place-items:center; min-height:280px;
border-radius:var(--hl-r-xl);
background:radial-gradient(ellipse 70% 60% at 50% 42%, var(--hl-paper-2), var(--hl-paper) 70%);
border:1px solid var(--hl-line);
}
.hl-rhw__art::before{
content:""; position:absolute; left:50%; bottom:44px; width:46%; height:18px;
transform:translateX(-50%); border-radius:50%;
background:radial-gradient(ellipse, rgba(10,14,36,.22), transparent 70%); filter:blur(5px);
}
.hl-rhw__art .hl-pslot{ position:relative; z-index:1; }
.hl-rhw__art .hl-dev{ animation:hls-hover 6.5s var(--hl-e-inout) infinite; }
.hl-rhw__meta{ min-width:0; }
.hl-rhw__meta h3{ font-size:var(--hl-fs-h3); margin-bottom:var(--hl-s-4); }
.hl-rhw__meta p{ font-size:var(--hl-fs-sm); line-height:1.7; color:var(--hl-text-muted);
margin-bottom:var(--hl-s-6); max-width:46ch; }
.hl-rhw__meta .hl-hspec{ margin-bottom:var(--hl-s-8); }
/* Rows share one height for the same reason `.hl-hw2__grid` does — this grid is
four columns at desktop and two below, so the moment it has more than one row
the rows size independently and the cards' bottom edges stop agreeing. */
.hl-rhw__row{ display:grid; grid-template-columns:repeat(var(--hl-row-n, 4), minmax(0,1fr)); grid-auto-rows:1fr;
gap:clamp(12px,1.3vw,18px); margin:0; padding:0; list-style:none; }
.hl-rhw__row > li{ min-width:0; }
.hl-rhw .hl-hcard__meta b{ display:block; margin-bottom:6px;
font:700 var(--hl-fs-h4)/1.2 var(--hl-ff-display); color:var(--hl-text-dark);
letter-spacing:-.02em; }
.hl-rhw .hl-hcard__meta i{ display:block; margin:0; font-size:var(--hl-fs-xs); line-height:1.55;
color:var(--hl-text-muted); font-style:normal; }
/* `.hl-pslot__ph` defaults to light-on-dark; this chapter is white. */
.hl-rhw .hl-pslot__ph{ --hl-ph-name:var(--hl-text-dark); --hl-ph-note:var(--hl-text-muted); }
/* fixed slot height so the placeholders align across the row regardless of how
many lines each caption takes */
.hl-rhw .hl-hcard .hl-pslot{ flex:none; height:190px; min-height:0; }
/* Fixed slot, growing caption — see `.hl-hw2 .hl-hcard__meta`. */
.hl-rhw .hl-hcard__meta{ flex:1; }
.hl-rhw .hl-hcard .hl-dev--smart{ --hl-k:.7; transform:scale(.7); margin-block:-32px; }
.hl-rhw .hl-hcard .hl-dev--counter{ --hl-k:.84; transform:scale(.84); margin-block:-11px; }
.hl-rhw .hl-hcard .hl-dev--portable{ --hl-k:.84; transform:scale(.84); margin-block:-15px; }
.hl-rhw .hl-hcard .hl-dev--reader{ --hl-k:1; transform:scale(1); }
.hl-rhw .hl-hcard .hl-dev--rest{ --hl-k:.7; transform:scale(.7); margin-block:-34px; }
.hl-rhw .hl-hcard .hl-dev--pump{ --hl-k:.7; transform:scale(.7); margin-block:-34px; }
.hl-rhw .hl-hcard .hl-dev--invoice{ --hl-k:.8; transform:scale(.8); margin-block:-16px; }
.hl-rhw__note{
margin:clamp(16px,1.6vw,22px) 0 0; padding:15px 18px; border-radius:var(--hl-r-md);
background:#fff; border:1px solid var(--hl-line); border-left:3px solid var(--hl-brand-red);
font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-dark);
}
/* the route into the full catalog, after the range. `display:flex` rather than
the button's inline-flex so it takes its own line; `width:fit-content` so it
still hugs its text and `.hl-btn--link`'s underline stays the width of the
words rather than the column. */
.hl-rhw__all{ display:flex; width:fit-content; margin-top:clamp(16px,1.6vw,22px); }
/* ── G3 · BENEFITS BENTO ────────────────────────────────────────────────── */
.hl-ben{ position:relative; padding-block:var(--hl-sec-pad-sm); background:var(--hl-paper); }
.hl-bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.3vw,18px);
margin:0; padding:0; list-style:none; }
.hl-btile{
position:relative; min-width:0; padding:clamp(20px,2.2vw,30px); border-radius:var(--hl-r-2xl);
background:#fff; border:1px solid var(--hl-line);
transition:transform var(--hl-t-med) var(--hl-e-out), box-shadow var(--hl-t-med),
border-color var(--hl-t-med);
}
.hl-btile:hover{ transform:translateY(-5px); box-shadow:var(--hl-sh-md); border-color:var(--hl-line-2); }
.hl-btile__n{
display:block; margin-bottom:var(--hl-s-4);
font:700 var(--hl-fs-micro)/1 var(--hl-ff-mono); letter-spacing:.14em; color:var(--hl-brand-red);
}
.hl-btile h3{ font-size:var(--hl-fs-h4); margin-bottom:var(--hl-s-3); }
.hl-btile p{ margin:0; font-size:var(--hl-fs-xs); line-height:1.65; color:var(--hl-text-muted); }
.hl-btile--lead{ grid-column:span 4; }
.hl-btile--lead h3{ font-size:var(--hl-fs-h3); }
.hl-btile--lead p{ font-size:var(--hl-fs-sm); line-height:1.72; max-width:56ch; }
.hl-btile--dark{
grid-column:span 2; color:#fff;
background:linear-gradient(162deg,var(--hl-ink-750),var(--hl-ink-900) 62%,var(--hl-ink-950));
border-color:var(--hl-line-dark-2);
}
.hl-btile--dark h3{ color:#fff; }
.hl-btile--dark p{ color:var(--hl-text-light-2); }
.hl-btile--dark .hl-btile__n{ color:var(--hl-red-400); }
.hl-btile__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:var(--hl-s-5) 0 0; padding:0;
list-style:none; }
.hl-btile__chips li{
padding:5px 10px; border-radius:var(--hl-r-xs); background:rgba(255,255,255,.06);
border:1px solid var(--hl-line-dark); font-size:var(--hl-fs-micro); color:var(--hl-text-light-2);
}
.hl-bento > .hl-btile:not(.hl-btile--lead):not(.hl-btile--dark){ grid-column:span 2; }
/* The comparison visual on the lead tile — a COUNT, deliberately not a timing
claim, which is why its caption is rendered with it rather than optional. */
.hl-turn{ margin-top:var(--hl-s-6); padding-top:var(--hl-s-5); border-top:1px solid var(--hl-line); }
.hl-turn__row{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:14px; align-items:center;
margin-bottom:10px; }
.hl-turn__k{ font:600 var(--hl-fs-micro)/1.4 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-muted); }
.hl-turn__bar{ display:flex; gap:6px; }
.hl-turn__bar i{ height:10px; border-radius:5px; flex:0 0 46px;
background:linear-gradient(90deg,var(--hl-navy-600),var(--hl-navy-400)); }
.hl-turn__bar--fast i{ background:linear-gradient(90deg,var(--hl-red-600),var(--hl-red-400)); }
.hl-turn__note{ margin:12px 0 0 !important; font-size:var(--hl-fs-micro) !important;
color:var(--hl-text-muted); opacity:.8; }
/* ── G4 · PROMOTIONAL OFFER BAND ────────────────────────────────────────── */
/* `.hl-offer` is taken (the homepage industry panel's offer pill), so the
approved band is `.hl-ioffer`. */
.hl-ioffer{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad);
background:linear-gradient(172deg,var(--hl-ink-850),var(--hl-ink-950)); }
.hl-ioffer__shell{ position:relative; z-index:1; }
/* The offer chapter's numeral sits on the page spine, left-aligned with every
other chapter head, above the centred card rather than inside it. See the
note in `blocks/promotion-offer.php`. */
.hl-ioffer__n{ margin-bottom:var(--hl-s-8); text-align:left; }
.hl-ioffer__card{
max-width:860px; margin-inline:auto; text-align:center;
padding:clamp(30px,3.4vw,54px) clamp(24px,3vw,58px); border-radius:var(--hl-r-3xl);
background:linear-gradient(158deg,rgba(207,41,39,.14),rgba(42,45,124,.32) 52%,rgba(10,12,34,.6));
border:1px solid rgba(229,84,78,.3);
box-shadow:var(--hl-sh-xl), inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter:blur(12px);
}
.hl-ioffer__tag{
display:inline-block; margin-bottom:var(--hl-s-6); padding:6px 13px; border-radius:var(--hl-r-pill);
background:rgba(207,41,39,.26); border:1px solid rgba(229,84,78,.5); color:#fff;
font:700 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase;
}
.hl-ioffer__amt{ display:flex; align-items:baseline; justify-content:center; gap:14px;
margin:0 0 var(--hl-s-5); }
.hl-ioffer__amt span{ font:600 var(--hl-fs-sm)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-light-3); }
.hl-ioffer__amt b{
font:800 clamp(3rem,6vw,5rem)/.9 var(--hl-ff-display); color:#fff; letter-spacing:-.05em;
font-variant-numeric:tabular-nums; text-shadow:0 22px 54px rgba(0,0,0,.6);
}
.hl-ioffer__title{ font:700 clamp(1.3rem,2vw,1.8rem)/1.3 var(--hl-ff-display); color:#fff;
letter-spacing:-.025em; margin-bottom:var(--hl-s-4); }
.hl-ioffer__copy{ max-width:58ch; margin-inline:auto; font-size:var(--hl-fs-sm); line-height:1.72;
color:var(--hl-text-light-2); margin-bottom:var(--hl-s-8); }
.hl-ioffer__pts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
text-align:left; margin:0 0 var(--hl-s-8); padding:0; list-style:none;
background:var(--hl-line-dark); border:1px solid var(--hl-line-dark);
border-radius:var(--hl-r-md); overflow:hidden; }
.hl-ioffer__pts li{ padding:16px 18px; background:rgba(10,12,34,.42); min-width:0; }
.hl-ioffer__pts b{ display:block; margin-bottom:6px;
font:600 var(--hl-fs-micro)/1.5 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-red-300); }
.hl-ioffer__pts span{ font-size:var(--hl-fs-xs); line-height:1.6; color:#fff; }
.hl-ioffer__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.hl-ioffer__disc{ margin:var(--hl-s-8) 0 0; padding-top:var(--hl-s-5);
border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); line-height:1.6; color:var(--hl-text-light-4); }
/* ── G5 · CASH DISCOUNT ─────────────────────────────────────────────────── */
/* No rate, no percentage and no worked figures. A cash-vs-card pair with real
numbers publishes an effective rate, which is exactly what this site must
never do — so the amount cells are a fixed token and no field can hold a
number. */
.hl-cd{ position:relative; padding-block:var(--hl-sec-pad); background:#fff; }
.hl-cd__shell{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(30px,3.6vw,66px); align-items:start; }
.hl-cd__copy{ min-width:0; }
.hl-cd__lede{ font-size:var(--hl-fs-lede); line-height:1.65; color:var(--hl-text-dark);
margin:var(--hl-s-5) 0 var(--hl-s-8); max-width:52ch; }
.hl-cdlist{ display:grid; gap:1px; margin:0 0 var(--hl-s-8); padding:0; list-style:none; }
.hl-cdlist li{ padding:16px 0; border-top:1px solid var(--hl-line); }
.hl-cdlist li:last-child{ border-bottom:1px solid var(--hl-line); }
.hl-cdlist b{ display:block; margin-bottom:5px; font:700 var(--hl-fs-h4)/1.3 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.02em; }
.hl-cdlist span{ font-size:var(--hl-fs-xs); line-height:1.65; color:var(--hl-text-muted); }
.hl-cd__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--hl-s-6); }
/* The receipt is what the copy beside it is describing, and the copy is more
than twice as tall (893 against 334 on an industry page), so the receipt
travels with the reader instead of stopping 559px short. Same behaviour,
same offset token as the FAQ lead. */
.hl-check{
position:sticky; top:var(--hl-sticky-top); padding:24px 24px 20px; border-radius:var(--hl-r-lg);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-lg);
max-width:400px; margin-inline:auto; width:100%;
}
.hl-check::after{
content:""; position:absolute; left:0; right:0; bottom:-9px; height:10px;
background:repeating-linear-gradient(135deg,#fff 0 9px,transparent 9px 18px);
filter:drop-shadow(0 2px 1px rgba(10,14,36,.08));
}
.hl-check__head{ display:flex; justify-content:space-between; align-items:baseline;
padding-bottom:14px; border-bottom:1px dashed var(--hl-line-2);
font:600 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-muted); }
.hl-check__mono{ font-family:var(--hl-ff-mono); letter-spacing:.08em; }
.hl-check__items{ display:grid; gap:14px; padding:18px 0; margin:0; list-style:none; }
.hl-check__items li{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hl-check__items i{ height:8px; width:var(--hl-w); border-radius:4px; background:var(--hl-paper-2); }
.hl-check__items em{ font:400 var(--hl-fs-xs)/1 var(--hl-ff-mono); color:var(--hl-text-muted);
font-style:normal; }
.hl-check__rule{ height:1px; background:var(--hl-line); margin-bottom:4px; }
.hl-check__price{ display:flex; justify-content:space-between; align-items:baseline;
padding:12px 0; border-bottom:1px solid var(--hl-line); }
.hl-check__price span{ font:600 var(--hl-fs-sm)/1 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-check__price b{ font:700 1.1rem/1 var(--hl-ff-mono); color:var(--hl-text-muted); }
.hl-check__price--card{ border-bottom:0; }
.hl-check__price--card span,.hl-check__price--card b{ color:var(--hl-brand-red); }
.hl-check__foot{ margin-top:14px; padding-top:13px; border-top:1px dashed var(--hl-line-2);
font-size:var(--hl-fs-micro); line-height:1.55; color:var(--hl-text-muted); }
/* ── G6 · FUNDING STRIP ─────────────────────────────────────────────────── */
.hl-rfund{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad-sm);
background:linear-gradient(178deg,var(--hl-ink-850),var(--hl-ink-950) 70%); }
.hl-rfund .hl-shell{ position:relative; z-index:1; }
.hl-rfund__more{ align-self:end; padding-bottom:6px; }
.hl-rfund__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.3vw,18px); margin:0; padding:0; list-style:none; }
.hl-rfund__grid li{
min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px;
padding:22px 22px 24px; border-radius:var(--hl-r-lg);
background:rgba(255,255,255,.04); border:1px solid var(--hl-line-dark);
transition:background var(--hl-t-med), border-color var(--hl-t-med),
transform var(--hl-t-med) var(--hl-e-out);
}
.hl-rfund__grid li:hover{ background:rgba(255,255,255,.075); border-color:var(--hl-line-dark-2);
transform:translateY(-4px); }
.hl-rfund__ico{ grid-row:1/span 2; width:20px; height:20px; color:var(--hl-red-400); padding-top:2px; }
.hl-rfund__grid b{ font:700 var(--hl-fs-h4)/1.25 var(--hl-ff-display); color:#fff;
letter-spacing:-.02em; }
.hl-rfund__grid span:last-child{ font-size:var(--hl-fs-xs); line-height:1.6;
color:var(--hl-text-light-3); }
.hl-rfund__note{ margin:var(--hl-s-8) 0 0; padding-top:var(--hl-s-5);
border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); line-height:1.6; color:var(--hl-text-light-4); max-width:78ch; }
/* ── G7 · WHY (compact) ─────────────────────────────────────────────────── */
/* A hairline definition list rather than another card grid — this chapter sits
between two heavier ones and should read quickly. */
.hl-rwhy{ position:relative; padding-block:var(--hl-sec-pad-sm); background:var(--hl-paper); }
.hl-rwhy__shell{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(28px,3.4vw,64px); align-items:start; }
.hl-rwhy__lead{ min-width:0; }
.hl-rwhy__copy{ margin:var(--hl-s-5) 0 0; font-size:var(--hl-fs-sm); line-height:1.7;
color:var(--hl-text-muted); max-width:40ch; }
.hl-rwhy__list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:0 clamp(24px,2.6vw,44px); margin:0; }
.hl-rwhy__list > div{ min-width:0; padding:20px 0; border-top:1px solid var(--hl-line-2); }
.hl-rwhy__list dt{
display:flex; align-items:baseline; gap:10px; margin-bottom:8px;
font:700 var(--hl-fs-h4)/1.3 var(--hl-ff-display); color:var(--hl-text-dark);
letter-spacing:-.02em;
}
.hl-rwhy__list dt::before{
content:""; width:6px; height:6px; border-radius:2px; flex:none;
background:var(--hl-brand-red); transform:translateY(-2px);
}
.hl-rwhy__list dd{ margin:0; padding-left:16px; font-size:var(--hl-fs-xs); line-height:1.65;
color:var(--hl-text-muted); }
/* ── G8 · RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:1280px){
.hl-rhw__row{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); }
}
@media (max-width:1120px){
.hl-floor__wrap{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-8); }
.hl-fpanel{ grid-template-columns:minmax(0,1fr) 220px; grid-template-rows:auto;
align-items:center; align-content:center; }
.hl-fpanel--textonly{ grid-template-columns:minmax(0,1fr); }
.hl-fpanel__art{ height:100%; min-height:180px; }
.hl-bento{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.hl-btile--lead{ grid-column:span 4; }
.hl-btile--dark{ grid-column:span 4; }
.hl-bento > .hl-btile:not(.hl-btile--lead):not(.hl-btile--dark){ grid-column:span 2; }
.hl-bento > .hl-btile:last-child{ grid-column:span 4; }
.hl-rwhy__shell{ grid-template-columns:minmax(0,1fr); }
.hl-rwhy__copy{ max-width:none; }
}
@media (max-width:1024px){
.hl-ihero .hl-shero__shell{ grid-template-columns:minmax(0,1fr); }
.hl-shero__viz.hl-ihero__viz{ max-width:560px; }
.hl-rhw__feature{ grid-template-columns:minmax(0,1fr); }
.hl-rhw__art{ min-height:250px; order:-1; }
.hl-cd__shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-10); }
.hl-cd__lede{ max-width:none; }
.hl-rfund__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
.hl-ioffer__pts{ grid-template-columns:minmax(0,1fr); }
.hl-rwhy__list{ grid-template-columns:minmax(0,1fr); }
.hl-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hl-btile--lead,.hl-btile--dark{ grid-column:span 2; }
.hl-bento > .hl-btile:not(.hl-btile--lead):not(.hl-btile--dark){ grid-column:span 2; }
}
@media (max-width:768px){
.hl-rhw__row{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); }
}
@media (max-width:640px){
/* Mobile floor: the plan becomes a spine of stations. The room outline and
the wires are dropped rather than squeezed into an unreadable box. */
.hl-floor__map{ aspect-ratio:auto; }
.hl-floor__plan,.hl-floor__roomtag{ display:none; }
.hl-floor__spots{ position:static; display:flex; gap:8px; overflow-x:auto;
padding-bottom:6px; scrollbar-width:none; }
.hl-floor__spots::-webkit-scrollbar{ display:none; }
.hl-spot{ position:static; transform:none; flex:none; }
.hl-spot:hover{ transform:none; }
/* On mobile the foot sits between the station strip and the panel, so it
stops being three pills and becomes a caption that explains the strip. */
.hl-floor__foot{
display:block; margin:var(--hl-s-4) 0 0;
padding-top:12px; border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); line-height:1.5; color:var(--hl-text-light-4);
}
.hl-floor__foot span{ padding:0; background:none; border:0; font-size:inherit; color:inherit; }
.hl-floor__foot span + span::before{ content:" · "; opacity:.6; }
.hl-fpanel{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
.hl-fpanel--textonly{ grid-template-rows:auto; }
.hl-fpanel__art{ order:-1; height:170px; }
.hl-oflag{ width:100%; }
.hl-oflag__txt{ line-height:1.4; white-space:normal; }
.hl-rstage{ padding:18px 16px 12px; }
.hl-rstage__slot{ min-height:190px; }
.hl-rstage__slot .hl-dev{ --hl-k:.86; transform:scale(.86); margin-block:-6px; }
.hl-rstage__slot::before{ bottom:26px; }
/* four floating labels do not fit around a phone-width device */
.hl-rlabel--2,.hl-rlabel--3{ display:none; }
.hl-rlabel{ font-size:.68rem; padding:6px 10px; }
.hl-rlabel--1{ top:8%; left:0; }
.hl-rlabel--4{ bottom:12%; right:0; }
.hl-ihero .hl-shero__cta .hl-btn{ flex:1 1 auto; justify-content:center; }
.hl-bento{ grid-template-columns:minmax(0,1fr); }
/* Matching the SPAN rule's specificity on purpose. The prototype's plain
`.btile{grid-column:auto}` is outranked by
`.bento > .btile:not(--lead):not(--dark){grid-column:span 2}` from the 900
block, so a one-track grid still gets asked for two columns and browsers
add an implicit one. The tiles render full width either way — measured on
both — but a phantom track is the kind of thing that becomes a real bug the
next time this grid is touched, so the override is written to actually
win. */
.hl-bento > .hl-btile:not(.hl-btile--lead):not(.hl-btile--dark),
.hl-bento > .hl-btile--lead,
.hl-bento > .hl-btile--dark{ grid-column:auto; }
.hl-turn__row{ grid-template-columns:minmax(0,1fr); gap:6px; }
.hl-turn__bar i{ flex:1 1 auto; }
.hl-ioffer__card{ padding:26px 20px; border-radius:var(--hl-r-2xl); }
.hl-ioffer__amt{ gap:10px; }
.hl-ioffer__cta .hl-btn{ flex:1 1 auto; justify-content:center; }
.hl-rfund__grid{ grid-template-columns:minmax(0,1fr); }
.hl-rhw__feature{ padding:18px; }
.hl-rhw__row{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); gap:10px; }
.hl-rhw .hl-hcard{ padding:16px 12px; }
.hl-rhw .hl-hcard{ --hl-hcard-media:168px; }
.hl-rhw .hl-hcard .hl-pslot{ margin-bottom:12px; }
.hl-rhw .hl-hcard .hl-dev--smart{ --hl-k:.54; transform:scale(.54); margin-block:-49px; }
.hl-rhw .hl-hcard .hl-dev--counter{ --hl-k:.68; transform:scale(.68); margin-block:-21px; }
.hl-rhw .hl-hcard .hl-dev--portable{ --hl-k:.7; transform:scale(.7); margin-block:-29px; }
.hl-rhw .hl-hcard .hl-dev--reader{ --hl-k:.88; transform:scale(.88); margin-block:-7px; }
.hl-rhw .hl-hcard__meta b{ font-size:.92rem; }
.hl-rhw .hl-hcard__meta i{ font-size:.72rem; }
.hl-check{ padding:20px 18px 16px; }
.hl-cd__cta{ gap:var(--hl-s-4); }
.hl-cd__cta .hl-btn--lg{ width:100%; justify-content:center; }
}
@media (max-width:430px){
.hl-spot{ padding:8px 12px 8px 10px; font-size:.72rem; }
.hl-fspec li{ grid-template-columns:minmax(0,1fr); gap:3px; }
.hl-rwhy__list dd{ padding-left:0; }
}
@media (max-width:400px){
.hl-rhw__row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.hl-rhw .hl-hcard{ padding:14px 10px; }
.hl-rhw .hl-hcard{ --hl-hcard-media:158px; }
.hl-ioffer__amt b{ font-size:2.7rem; }
.hl-rstage__slot .hl-dev{ --hl-k:.76; transform:scale(.76); margin-block:-19px; }
}
/* ── G9 · REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.hl-rlabel,.hl-rstage__slot .hl-dev,.hl-fpanel__art .hl-dev,.hl-rhw__art .hl-dev{
animation:none !important; }
.hl-fpanel.is-active{ animation:none !important; }
.hl-spot,.hl-btile,.hl-rfund__grid li{ transition:none !important; }
}
/* ===========================================================================
H · FORM LAYER
===========================================================================
The one part of the site the approved prototypes could not hand over, because
none of the three had a form on it. So this is written FROM the approved
system rather than imported into it: the same ink ramp, the same radii, the
same hairline rules, the same 4px spacing scale, the same red used only for
signal. A form is the moment a visitor commits, and a stock admin-template
input in the middle of a designed page is exactly where that confidence
leaks away.
Three decisions worth stating:
* Labels sit ABOVE their input, always. Floating and placeholder-as-label
both lose the label at the moment it is needed — while typing — and both
read badly after an autofill.
* The invalid state is a red rule AND a message, never colour alone: the
message is what a colour-blind visitor and a screen-reader user both get.
* Focus is a visible ring on every control, and it is the same navy ring
the rest of the site uses. Removing an outline is how a keyboard becomes
unusable.
=========================================================================== */
.hl-formsec{ position:relative; padding-block:var(--hl-sec-pad-sm); background:var(--hl-white); }
.hl-formsec.hl-section--alt{ background:var(--hl-paper); }
.hl-formsec.hl-section--dark{ background:var(--hl-ink-850); }
.hl-formsec__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,3.4vw,56px); }
/* Every track minmax(0,.) with min-width:0 on the children — bridge rule E8.
A long unbroken email address in the aside must not widen the form column. */
.hl-formsec--split .hl-formsec__grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); align-items:start; }
/* "Other ways to reach us" answers questions a visitor has WHILE filling the
form, and the form is roughly twice its height, so it stayed beside the
fields rather than stopping 540px above them. */
@media (min-width:901px){
.hl-formsec--split .hl-formsec__aside{ position:sticky; top:var(--hl-sticky-top); }
}
.hl-formsec__main, .hl-formsec__aside{ min-width:0; }
.hl-formsec__head{ margin-bottom:var(--hl-s-8); }
.hl-formsec__head .hl-h2{ margin:var(--hl-s-4) 0 0; }
.hl-formsec__head .hl-lead{ margin:var(--hl-s-4) 0 0; max-width:60ch; }
/* -- H1 . THE FORM ------------------------------------------------------- */
.hl-form{ display:block; }
.hl-form__grid{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--hl-s-5) var(--hl-s-5);
}
.hl-ff{ min-width:0; display:flex; flex-direction:column; }
.hl-ff--full{ grid-column:1 / -1; }
.hl-ff--half{ grid-column:span 1; }
.hl-ff__label{
display:flex; align-items:baseline; gap:8px; margin-bottom:8px;
font:600 var(--hl-fs-sm)/1.3 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.01em;
}
.hl-ff__opt{ font:400 var(--hl-fs-micro)/1 var(--hl-ff-body); color:var(--hl-text-muted);
letter-spacing:0; text-transform:none; }
.hl-ff__input{
width:100%; min-width:0; padding:13px 15px;
font:400 var(--hl-fs-body)/1.5 var(--hl-ff-body); color:var(--hl-text-dark);
background:var(--hl-white); border:1px solid var(--hl-line-2);
border-radius:var(--hl-r-sm);
transition:border-color var(--hl-t-fast) var(--hl-e-soft),
box-shadow var(--hl-t-fast) var(--hl-e-soft);
appearance:none;
}
.hl-ff__input::placeholder{ color:var(--hl-text-muted); }
.hl-ff__input:hover{ border-color:var(--hl-navy-300); }
.hl-ff__input:focus{
outline:none; border-color:var(--hl-navy-500);
box-shadow:0 0 0 3px rgba(58,63,163,.16);
}
/* The keyboard ring is kept as a real outline as well as the glow, so it
survives a forced-colours mode where box-shadow does not paint. */
.hl-ff__input:focus-visible{ outline:2px solid var(--hl-navy-500); outline-offset:2px; }
.hl-ff__input--area{ resize:vertical; min-height:140px; line-height:1.62; }
.hl-ff__input--select{
padding-right:40px; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23767E96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 15px center; background-size:12px 8px;
}
.hl-ff.is-invalid .hl-ff__input{ border-color:var(--hl-red-500); }
.hl-ff.is-invalid .hl-ff__input:focus{ box-shadow:0 0 0 3px rgba(207,41,39,.16); }
.hl-ff__err{
display:flex; align-items:flex-start; gap:6px; margin:7px 0 0;
font-size:var(--hl-fs-xs); line-height:1.5; color:var(--hl-red-600); font-weight:500;
}
.hl-ff__err::before{
content:""; flex:none; width:5px; height:5px; margin-top:7px; border-radius:50%;
background:var(--hl-red-500);
}
.hl-ff__help{ margin:7px 0 0; font-size:var(--hl-fs-xs); line-height:1.5; color:var(--hl-text-muted); }
/* -- H2 . CONSENT -------------------------------------------------------- */
.hl-ff--consent{ margin-top:var(--hl-s-6); }
.hl-consent{
display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
cursor:pointer; font-size:var(--hl-fs-sm); line-height:1.6; color:var(--hl-text-body);
}
.hl-consent input[type="checkbox"]{
width:19px; height:19px; margin:2px 0 0; flex:none;
accent-color:var(--hl-navy-600); cursor:pointer;
}
.hl-consent input[type="checkbox"]:focus-visible{ outline:2px solid var(--hl-navy-500); outline-offset:2px; }
.hl-consent__links{ display:inline; }
.hl-consent__links a{
color:var(--hl-navy-500); font-weight:600;
text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.hl-consent__links a:hover{ color:var(--hl-red-500); }
.hl-ff--consent.is-invalid .hl-consent input[type="checkbox"]{ outline:2px solid var(--hl-red-500); outline-offset:2px; }
/* -- H3 . ACTIONS, NOTE AND STATUS --------------------------------------- */
.hl-form__actions{
display:flex; flex-wrap:wrap; align-items:center; gap:var(--hl-s-5);
margin-top:var(--hl-s-8);
}
.hl-form__note{ margin:0; flex:1 1 22ch; font-size:var(--hl-fs-xs); line-height:1.55;
color:var(--hl-text-muted); }
/* The live region is present in every state and empty in most of them, so it
must not reserve space or draw a box when it has nothing to say. */
.hl-form__status:empty{ display:none; }
.hl-form__alert{
display:flex; gap:10px; margin:0 0 var(--hl-s-6); padding:14px 16px;
border:1px solid rgba(207,41,39,.28); border-left:3px solid var(--hl-red-500);
border-radius:var(--hl-r-sm); background:rgba(207,41,39,.05);
font-size:var(--hl-fs-sm); line-height:1.55; color:var(--hl-red-700);
}
.hl-form__sent{
padding:clamp(28px,3vw,40px);
border:1px solid var(--hl-line); border-radius:var(--hl-r-lg);
background:var(--hl-white); box-shadow:var(--hl-sh-md);
}
.hl-form__tick{
display:grid; place-items:center; width:46px; height:46px; margin-bottom:var(--hl-s-5);
border-radius:50%; background:rgba(47,214,163,.14); color:#127A5C;
}
.hl-form__tick svg{ width:24px; height:24px; }
.hl-form__sent .hl-h3{ margin:0 0 var(--hl-s-3); }
.hl-form__sent p{ margin:0; font-size:var(--hl-fs-sm); line-height:1.7;
color:var(--hl-text-muted); max-width:56ch; }
/* -- H4 . THE HONEYPOT --------------------------------------------------- */
/* Hidden from sight, from the tab order (tabindex="-1" on the input) and from
the accessibility tree (aria-hidden on the wrapper). display:none alone is
avoided because some bots skip fields that are display:none — this is placed
off screen instead, which they fill. */
.hl-form__pot{
position:absolute !important; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; pointer-events:none;
}
/* -- H5 . CONTACT PANEL -------------------------------------------------- */
.hl-cpanel{
padding:clamp(22px,2.2vw,30px);
border:1px solid var(--hl-line); border-radius:var(--hl-r-lg);
background:var(--hl-paper);
}
.hl-section--alt .hl-cpanel{ background:var(--hl-white); }
.hl-cpanel__title{ margin:0; font:700 var(--hl-fs-h3)/1.2 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:var(--hl-ls-tight); }
.hl-cpanel__note{ margin:var(--hl-s-4) 0 0; font-size:var(--hl-fs-sm); line-height:1.7;
color:var(--hl-text-muted); }
.hl-cpanel__list{ margin:var(--hl-s-6) 0 0; }
.hl-cpanel__list > div{ padding:14px 0; border-top:1px solid var(--hl-line); }
.hl-cpanel__list > div:first-child{ border-top:0; padding-top:0; }
.hl-cpanel__list dt{
margin-bottom:4px; font:600 var(--hl-fs-micro)/1 var(--hl-ff-mono);
letter-spacing:var(--hl-ls-wide); text-transform:uppercase; color:var(--hl-text-muted);
}
.hl-cpanel__list dd{ margin:0; font-size:var(--hl-fs-sm); line-height:1.6;
color:var(--hl-text-dark); overflow-wrap:anywhere; }
.hl-cpanel__list dd a{ color:var(--hl-navy-500); font-weight:600; }
.hl-cpanel__list dd a:hover{ color:var(--hl-red-500); }
.hl-cpanel__list dd em{ font-style:normal; color:var(--hl-text-muted); font-size:var(--hl-fs-xs); }
.hl-cpanel__list address{ font-style:normal; }
.hl-cpanel__points{ margin:var(--hl-s-6) 0 0; padding:var(--hl-s-5) 0 0;
border-top:1px solid var(--hl-line); display:grid; gap:var(--hl-s-4); }
.hl-cpanel__points li{ display:grid; gap:3px; }
.hl-cpanel__points b{ font:700 var(--hl-fs-sm)/1.35 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.01em; }
.hl-cpanel__points span{ font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-muted); }
/* -- H6 . DARK CHAPTER --------------------------------------------------- */
/* A form is normally a light chapter, but the theme is an admin choice and the
choice must not be able to produce unreadable type. */
.hl-formsec.hl-section--dark .hl-ff__label{ color:#fff; }
.hl-formsec.hl-section--dark .hl-ff__opt,
.hl-formsec.hl-section--dark .hl-ff__help{ color:var(--hl-text-light-3); }
.hl-formsec.hl-section--dark .hl-ff__input{
color:#fff; background:rgba(255,255,255,.04); border-color:var(--hl-line-dark-2);
}
.hl-formsec.hl-section--dark .hl-ff__input:focus{ border-color:var(--hl-navy-300);
box-shadow:0 0 0 3px rgba(144,150,228,.22); }
.hl-formsec.hl-section--dark .hl-consent{ color:var(--hl-text-light-2); }
.hl-formsec.hl-section--dark .hl-consent__links a{ color:var(--hl-navy-300); }
.hl-formsec.hl-section--dark .hl-cpanel{ background:rgba(255,255,255,.03);
border-color:var(--hl-line-dark); }
.hl-formsec.hl-section--dark .hl-cpanel__title{ color:#fff; }
.hl-formsec.hl-section--dark .hl-cpanel__note,
.hl-formsec.hl-section--dark .hl-cpanel__points span{ color:var(--hl-text-light-3); }
.hl-formsec.hl-section--dark .hl-cpanel__list > div,
.hl-formsec.hl-section--dark .hl-cpanel__points{ border-color:var(--hl-line-dark); }
.hl-formsec.hl-section--dark .hl-cpanel__list dd,
.hl-formsec.hl-section--dark .hl-cpanel__points b{ color:#fff; }
.hl-formsec.hl-section--dark .hl-form__sent{ background:rgba(255,255,255,.04);
border-color:var(--hl-line-dark); box-shadow:none; }
.hl-formsec.hl-section--dark .hl-form__sent p{ color:var(--hl-text-light-2); }
/* -- H7 . RESPONSIVE ----------------------------------------------------- */
@media (max-width:1024px){
.hl-formsec--split .hl-formsec__grid{ grid-template-columns:minmax(0,1fr); }
/* The panel follows the form on a narrow screen: the form is the reason the
visitor is on the page, and the details beside it are supporting. */
.hl-formsec__aside{ order:2; }
}
@media (max-width:640px){
/* Two half-width fields side by side stop being two fields and start being
two cramped ones somewhere around here. */
.hl-form__grid{ grid-template-columns:minmax(0,1fr); }
.hl-ff--half{ grid-column:1 / -1; }
.hl-form__actions{ gap:var(--hl-s-4); }
.hl-form__actions .hl-btn{ width:100%; justify-content:center; }
.hl-form__note{ flex:1 1 100%; }
}
@media (max-width:430px){
.hl-ff__input{ padding:12px 13px; }
}
/* -- H8 . REDUCED MOTION ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.hl-ff__input{ transition:none !important; }
}
/* ===========================================================================
H9 · THE SYSTEM LAYOUT
===========================================================================
Chrome for `layouts/system` — the standalone shell the maintenance page uses.
Four rules and a footer, because the page's actual content is an ordinary
approved hero block and needs nothing from here.
The page is a single dark hero on a dark page, so the shell is dark too: a
white bar above a dark hero would be a seam that exists for no reason.
=========================================================================== */
body.hl-body--system{ background:var(--hl-ink-900); color:var(--hl-text-light-2); }
.hl-sysbar{ padding:clamp(20px,3vw,32px) 0; background:var(--hl-ink-900); }
.hl-sysbar__inner{ display:flex; align-items:center; justify-content:center; }
/* Not a link, by design — every destination is 503 while this page is up.
Size comes from the existing `.hl-logo img` rule; only the variable changes,
so the lockup's optical alignment is the same one the header uses. */
.hl-logo--sys{ --hl-logo-h:96px; }
.hl-sysempty{ padding-block:clamp(48px,6vw,96px); text-align:center; }
.hl-sysempty .hl-h2{ color:#fff; }
.hl-sysempty .hl-lead{ color:var(--hl-text-light-2); }
.hl-sysfoot{
padding:clamp(24px,3vw,40px) 0; text-align:center;
background:var(--hl-ink-950); border-top:1px solid var(--hl-line-dark);
}
.hl-sysfoot p{ margin:0; font-size:var(--hl-fs-xs); line-height:1.7; color:var(--hl-text-light-3); }
.hl-sysfoot__contact{ margin-bottom:8px !important; }
.hl-sysfoot__contact a{ color:var(--hl-navy-300); font-weight:600;
text-decoration:underline; text-underline-offset:2px; }
.hl-sysfoot__contact a:hover{ color:#fff; }
@media (max-width:600px){
.hl-logo--sys{ --hl-logo-h:68px; }
}
/* ===========================================================================
I · CATALOG LAYER
===========================================================================
The one part of this site the approved prototypes never drew, for the same
reason section H had to be written from scratch: there was no catalog to
draw. So this is built from the tokens above rather than invented beside
them — the same radii, the same shadow ramp, the same red eyebrow, the same
hover lift the hardware cards already use, and the same `.hl-ihead` chapter
head every inner-page section opens with.
The brief for it was: do not make it look like a generic storefront grid.
Two decisions do most of that work.
* The CARD is a device on its stage, not a photograph in a box. It reuses
`.hl-pslot` and the approved silhouettes, so an unfilled slot reads as
pending rather than as a missing image.
* The FILTER is a rail of chips in the site's own language, not a sidebar
of checkboxes. Underneath it is a radio group, so it is a real form.
Every grid track here is `minmax(0,1fr)` or `minmax(min(100%,N),1fr)` and
every card carries `min-width:0` — bridge rule E8. That is what stops a long
product name pushing the grid wider than the viewport, which is the single
most common way a card grid grows a horizontal scrollbar on a 360px phone.
=========================================================================== */
/* ── I0 · THE CHAPTER'S OWN PADDING ──────────────────────────────────────────
`.hl-cat` had no `padding-block` at all, and that is the whole of the
catalog page's compression.
The Spacing select on this block is set to "None — the composition sets its
own", which is the correct choice and the one nearly every block on this
site makes: `hl-section--none` is on every section of the home page too. The
contract that preset creates is that the BLOCK supplies the padding —
`.hl-sys`, `.hl-hw`, `.hl-ind`, `.hl-net-sec`, `.hl-calc` and `.hl-fund` all
declare `padding-block:var(--hl-sec-pad)` for exactly this reason.
`.hl-cat` never declared it. So the section computed to 0px top and 0px
bottom, "THE CATALOG" began at the literal top edge of its own section with
the hero directly above it, and the chapter ran straight into the closing
band underneath.
One declaration, the same token and the same value every other chapter on
the site already resolves to — 113.66px at 1536px, and it scales with the
viewport because the token is a clamp. The head-to-content gap inside the
chapter is NOT touched: it measures 56px here, and 56px on
`/pos-terminals #types` and `/industries/retail #floor`, so it is already
the site rhythm and moving it would make this page the odd one out. */
.hl-cat{ padding-block:var(--hl-sec-pad); }
/* ── I1 · THE FILTER RAIL ────────────────────────────────────────────────── */
.hl-catfilter{
display:grid; gap:clamp(16px,2vw,24px); margin-bottom:clamp(28px,3vw,44px);
padding:clamp(18px,2vw,26px); border-radius:var(--hl-r-xl);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
}
.hl-section--dark .hl-catfilter{
background:rgba(255,255,255,.04); border-color:var(--hl-line-dark); box-shadow:none;
}
.hl-catfilter__label{
display:block; margin-bottom:10px; padding:0;
font:600 var(--hl-fs-micro)/1 var(--hl-ff-body);
letter-spacing:var(--hl-ls-wider); text-transform:uppercase; color:var(--hl-text-muted);
}
.hl-section--dark .hl-catfilter__label{ color:var(--hl-text-light-3); }
.hl-catfilter__group{ border:0; padding:0; margin:0; min-width:0; }
.hl-catfilter__field{ display:flex; gap:8px; align-items:stretch; }
.hl-catfilter__input{
flex:1 1 auto; min-width:0; width:100%;
padding:11px 14px; border-radius:var(--hl-r-sm);
border:1px solid var(--hl-line-2); background:#fff;
font:400 var(--hl-fs-sm)/1.4 var(--hl-ff-body); color:var(--hl-text-dark);
transition:border-color var(--hl-t-fast) var(--hl-e-out), box-shadow var(--hl-t-fast) var(--hl-e-out);
}
.hl-catfilter__input:focus{
outline:none; border-color:var(--hl-navy-500); box-shadow:0 0 0 3px rgba(58,63,163,.14);
}
.hl-section--dark .hl-catfilter__input{
background:rgba(255,255,255,.06); border-color:var(--hl-line-dark-2); color:#fff;
}
.hl-section--dark .hl-catfilter__input:focus{ border-color:var(--hl-navy-300); }
/* The chips. A wrapping row rather than a horizontal scroller: a filter you
have to scroll to discover is a filter most people never find. */
.hl-catchips{ display:flex; flex-wrap:wrap; gap:8px; }
.hl-catchip{
position:relative; display:inline-flex; align-items:center; gap:8px;
padding:9px 14px; border-radius:var(--hl-r-pill); cursor:pointer;
border:1px solid var(--hl-line-2); background:var(--hl-paper);
font:600 var(--hl-fs-sm)/1 var(--hl-ff-body); color:var(--hl-text-body);
transition:background var(--hl-t-fast) var(--hl-e-out), border-color var(--hl-t-fast) var(--hl-e-out),
color var(--hl-t-fast) var(--hl-e-out);
}
.hl-catchip input{
/* Visually replaced by the chip, NOT removed. `display:none` would take the
radio out of the tab order and out of the accessibility tree, which would
make the whole filter unreachable from a keyboard. */
position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.hl-catchip b{
font:600 var(--hl-fs-micro)/1 var(--hl-ff-mono);
padding:3px 7px; border-radius:var(--hl-r-pill);
background:rgba(10,14,36,.06); color:var(--hl-text-muted);
}
/* The mask itself comes from `[data-ico]` above — the one icon system on this
site. These rules only size it and let it inherit the chip's colour, so a
selected chip's icon turns white with the rest of the chip. */
.hl-catchip__ico{ width:15px; height:15px; }
.hl-catchip:hover{ background:#fff; border-color:var(--hl-line); }
.hl-catchip:has(input:focus-visible){ outline:2px solid var(--hl-navy-500); outline-offset:3px; }
/* The same ring where `:has()` is not supported. The radio is a full-size
transparent overlay, so an outline on the input itself traces the chip's own
box — square rather than pill, and that is the entire difference. Scoped to
@supports so the two never draw at once, because the alternative to a
slightly different ring is no focus indicator at all on the filter. */
@supports not selector(:has(*)){
.hl-catchip input:focus-visible{ outline:2px solid var(--hl-navy-500); outline-offset:3px; }
}
.hl-catchip:has(input:checked), .hl-catchip.is-active{
background:var(--hl-brand-navy); border-color:var(--hl-brand-navy); color:#fff;
}
.hl-catchip:has(input:checked) b, .hl-catchip.is-active b{
background:rgba(255,255,255,.18); color:#fff;
}
.hl-section--dark .hl-catchip{
background:rgba(255,255,255,.05); border-color:var(--hl-line-dark-2); color:var(--hl-text-light-2);
}
.hl-section--dark .hl-catchip b{ background:rgba(255,255,255,.10); color:var(--hl-text-light-3); }
.hl-catfilter__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.hl-catcheck{
display:inline-flex; align-items:center; gap:9px; cursor:pointer;
font:500 var(--hl-fs-sm)/1 var(--hl-ff-body); color:var(--hl-text-body);
}
.hl-catcheck input{ width:17px; height:17px; accent-color:var(--hl-brand-navy); cursor:pointer; }
.hl-catcheck input:focus-visible{ outline:2px solid var(--hl-navy-500); outline-offset:2px; }
.hl-section--dark .hl-catcheck{ color:var(--hl-text-light-2); }
.hl-catfilter__clear{ margin-inline-start:auto; }
.hl-catcount{
margin-bottom:clamp(18px,2vw,26px);
font:500 var(--hl-fs-sm)/1.5 var(--hl-ff-body); color:var(--hl-text-muted);
}
.hl-section--dark .hl-catcount{ color:var(--hl-text-light-3); }
/* ── I2 · THE GRID AND THE CARD ──────────────────────────────────────────── */
/*
* `grid-auto-rows:1fr` is what makes "consistent card heights" true across the
* whole grid rather than only within a row. Auto rows size to their own tallest
* item, so one card wrapping one extra line takes its entire row with it: the
* shipped catalog measured 416.6px in row 1 against 391.5px in row 2, purely
* because "Smart Terminal" is the only product carrying a badge next to its
* category chip and that pair wraps to two lines. Nothing was wrong with the
* card; the rows were simply independent.
*
* In a grid whose own height is indefinite, `1fr` rows all resolve to the
* tallest row's max-content height, which is exactly the wanted behaviour and
* needs no JavaScript and no fixed height. The extra height lands as whitespace
* above the footer, because `.hl-pcard__foot{margin:auto 0 0}` already holds the
* price and the affordance against the bottom edge.
*/
.hl-pgrid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
grid-auto-rows:1fr;
gap:clamp(14px,1.6vw,22px); list-style:none; margin:0; padding:0;
}
.hl-pgrid--rel{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* `auto-fill` lays four tracks whatever the row holds, so a product with only
two siblings in its category rendered two cards and two empty tracks — half
a row of nothing (audit PD-05). The renderer knows the count, so the grid
uses it: the cards keep their size and the row simply ends, left-aligned on
the same spine as the chapter head above it. */
@media (min-width:901px){
.hl-pgrid--rel[data-count="1"]{ grid-template-columns:minmax(0,1fr); max-width:380px; }
.hl-pgrid--rel[data-count="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; }
.hl-pgrid--rel[data-count="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1040px; }
}
.hl-pcard{ min-width:0; display:flex; }
.hl-pcard__in{
position:relative; display:flex; flex-direction:column; width:100%; min-width:0;
padding:20px 18px 18px; border-radius:var(--hl-r-xl); overflow:hidden;
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
color:inherit; text-decoration:none;
transition:transform 420ms var(--hl-e-out), box-shadow 420ms var(--hl-e-out),
border-color 420ms var(--hl-e-out);
}
.hl-pcard__in::after{
content:""; position:absolute; inset:auto -30% -60% -30%; height:70%;
background:radial-gradient(ellipse at 50% 0%, rgba(42,45,124,.09), transparent 68%);
pointer-events:none;
}
a.hl-pcard__in:hover{ transform:translateY(-7px); box-shadow:var(--hl-sh-md); border-color:var(--hl-line-2); }
a.hl-pcard__in:focus-visible{ outline:2px solid var(--hl-brand-red); outline-offset:3px; }
.hl-section--dark .hl-pcard__in{
background:rgba(255,255,255,.04); border-color:var(--hl-line-dark); box-shadow:none;
}
/*
* The card's media frame. `--hl-pslot-h` is a fixed band rather than the
* `min-height` this used to be, and that single change is what makes a grid of
* cards line up: a `min-height` is a floor the artwork can push through, so the
* tallest silhouette in the row decided where every title started.
*
* 158px is not arbitrary — it is the smallest band that contains the largest
* PAINTED device. The silhouettes are scaled with `transform`, which does not
* reserve layout space, so `.hl-dev--smart` is a 214px-tall box painted at
* 154px and `.hl-dev--pump` a 242px box painted at 145px. Both fit; the layout
* boxes overflow the band and are clipped by `.hl-pcard__in{overflow:hidden}`,
* which is exactly what should happen to space nothing is drawn in.
*
* There is no `max-height` on the image any more. The 170px that used to be here
* was larger than the frame, so a portrait upload inflated the band it was
* supposed to fit inside — the 26px of card-height variation measured across
* upload shapes was entirely this declaration. `max-height:100%` on
* `.hl-pslot img` now resolves against a definite row instead.
*/
.hl-pcard__art{ display:flex; justify-content:center; margin-bottom:16px;
--hl-pslot-h:158px; --hl-pslot-inset:8px; }
.hl-pcard__art .hl-pslot{ width:100%; justify-content:center; }
.hl-pcard__art .hl-dev{ --hl-k:.78; transform:scale(.78); }
.hl-pcard__art .hl-dev--smart{ --hl-k:.72; transform:scale(.72); }
.hl-pcard__art .hl-dev--rest{ --hl-k:.66; transform:scale(.66); }
.hl-pcard__art .hl-dev--pump{ --hl-k:.6; transform:scale(.6); }
.hl-pcard__body{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.hl-pcard__tags{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.hl-pcard__cat, .hl-pcard__badge{
font:600 var(--hl-fs-micro)/1 var(--hl-ff-body);
letter-spacing:var(--hl-ls-wide); text-transform:uppercase;
padding:4px 8px; border-radius:var(--hl-r-xs);
}
.hl-pcard__cat{ background:var(--hl-paper-2); color:var(--hl-text-muted); }
.hl-pcard__badge{ background:rgba(207,41,39,.10); color:var(--hl-brand-red); }
.hl-section--dark .hl-pcard__cat{ background:rgba(255,255,255,.08); color:var(--hl-text-light-3); }
.hl-pcard__title{
margin:2px 0 0; font:700 var(--hl-fs-h4)/1.3 var(--hl-ff-display);
letter-spacing:-.02em; color:var(--hl-text-dark); overflow-wrap:anywhere;
}
.hl-section--dark .hl-pcard__title{ color:#fff; }
.hl-pcard__maker{ margin:0; font:500 var(--hl-fs-xs)/1.4 var(--hl-ff-mono); color:var(--hl-text-muted); }
.hl-pcard__text{ margin:0; font-size:var(--hl-fs-sm); line-height:1.6; color:var(--hl-text-body); }
.hl-section--dark .hl-pcard__text{ color:var(--hl-text-light-2); }
/* One supporting line under the copy — the financing note, where a block passes
one. Red would read as a warning and the body ramp would read as more prose,
so it takes the navy the rest of the system uses for "this is a term". */
.hl-pcard__note{
margin:2px 0 0; font:600 var(--hl-fs-xs)/1.5 var(--hl-ff-body); color:var(--hl-navy-600);
}
.hl-section--dark .hl-pcard__note{ color:var(--hl-navy-300); }
.hl-pcard__foot{
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
gap:8px; margin:auto 0 0; padding-top:14px;
}
.hl-pcard__price{ display:inline-flex; align-items:baseline; gap:6px; min-width:0; }
.hl-pcard__price i{ font-style:normal; font-size:var(--hl-fs-xs); color:var(--hl-text-muted); }
.hl-pcard__price s{ font-size:var(--hl-fs-xs); color:var(--hl-text-muted); }
.hl-pcard__price b{ font:700 var(--hl-fs-body)/1 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-pcard__call{ font:600 var(--hl-fs-xs)/1.3 var(--hl-ff-body); color:var(--hl-text-muted); }
.hl-section--dark .hl-pcard__price b{ color:#fff; }
.hl-pcard__go{
display:inline-flex; align-items:center; gap:6px; margin-inline-start:auto;
font:600 var(--hl-fs-xs)/1 var(--hl-ff-body); color:var(--hl-brand-red);
}
.hl-pcard__go .hl-arrow{ transition:transform var(--hl-t-fast) var(--hl-e-out); }
a.hl-pcard__in:hover .hl-pcard__go .hl-arrow{ transform:translateX(3px); }
/* ── I3 · EMPTY RESULT, PAGINATION AND THE CHAPTER FOOT ──────────────────── */
.hl-catempty{
padding:clamp(36px,5vw,64px) clamp(20px,3vw,40px); text-align:center;
border-radius:var(--hl-r-xl); border:1px dashed var(--hl-line-2); background:var(--hl-paper);
}
.hl-section--dark .hl-catempty{ background:rgba(255,255,255,.03); border-color:var(--hl-line-dark-2); }
.hl-catempty__title{ margin:0 0 8px; font:700 var(--hl-fs-h3)/1.3 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-catempty__text{
margin:0 auto var(--hl-s-6); max-width:46ch;
font-size:var(--hl-fs-sm); color:var(--hl-text-muted);
}
.hl-section--dark .hl-catempty__title{ color:#fff; }
.hl-section--dark .hl-catempty__text{ color:var(--hl-text-light-3); }
.hl-catpages{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:10px; margin-top:clamp(28px,3vw,44px);
}
.hl-catpages__list{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.hl-catpages a, .hl-catpages span.is-current, .hl-catpages__step{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
min-width:40px; height:40px; padding-inline:12px; border-radius:var(--hl-r-sm);
font:600 var(--hl-fs-sm)/1 var(--hl-ff-body); text-decoration:none;
border:1px solid var(--hl-line-2); background:#fff; color:var(--hl-text-body);
transition:background var(--hl-t-fast) var(--hl-e-out), border-color var(--hl-t-fast) var(--hl-e-out);
}
.hl-catpages a:hover{ border-color:var(--hl-navy-500); color:var(--hl-brand-navy); }
.hl-catpages a:focus-visible, .hl-catpages__step:focus-visible{ outline:2px solid var(--hl-brand-red); outline-offset:2px; }
.hl-catpages span.is-current{ background:var(--hl-brand-navy); border-color:var(--hl-brand-navy); color:#fff; }
.hl-catpages__gap{ padding-inline:4px; color:var(--hl-text-muted); }
.hl-section--dark .hl-catpages a, .hl-section--dark .hl-catpages__step{
background:rgba(255,255,255,.05); border-color:var(--hl-line-dark-2); color:var(--hl-text-light-2);
}
/* ── THE NOTE AND ITS ACTION ARE ONE COMPOSITION ──────────────────────────
`justify-content:space-between` across the full 1,192px content width pushed
the financing note hard left and its CTA hard right, leaving a 469px gap
between a sentence and the button that answers it — measured at every width
from 1,280px up. Technically it fitted; it read as two unrelated things.
The pair is now GROUPED rather than pushed apart: they sit together from the
left with a gap wide enough to separate them and no wider.
`max-width` on this element was the first attempt and it was wrong — the
element carries the chapter's dividing rule, so capping it left a rule that
stopped 232px short of the product grid it was dividing. One misalignment
traded for another. The rule keeps the full content width; only the
arrangement inside it changed.
Below the breakpoint `flex-wrap` still stacks them, which was always
correct. */
.hl-catfoot{
display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
gap:clamp(20px,3vw,64px); margin-top:clamp(28px,3vw,44px);
padding-top:clamp(20px,2.4vw,32px); border-top:1px solid var(--hl-line);
}
.hl-catfoot__note{ margin:0; max-width:64ch; font-size:var(--hl-fs-xs); line-height:1.7; color:var(--hl-text-muted); }
.hl-section--dark .hl-catfoot{ border-top-color:var(--hl-line-dark); }
.hl-section--dark .hl-catfoot__note{ color:var(--hl-text-light-3); }
/* ── I4 · THE PRODUCT DETAIL PAGE ────────────────────────────────────────── */
.hl-pdp__maker{
margin:-6px 0 var(--hl-s-4); font:500 var(--hl-fs-sm)/1 var(--hl-ff-mono);
color:var(--hl-text-light-3); letter-spacing:.02em;
}
.hl-pdp__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:0 0 var(--hl-s-6); }
.hl-pdp__price i{ font-style:normal; font-size:var(--hl-fs-sm); color:var(--hl-text-light-3); }
.hl-pdp__price s{ font-size:var(--hl-fs-body); color:var(--hl-text-light-4); }
.hl-pdp__price b{ font:800 clamp(1.5rem,2.4vw,2rem)/1 var(--hl-ff-display); color:#fff; letter-spacing:-.02em; }
.hl-pdp__price small{ flex:1 1 100%; font-size:var(--hl-fs-xs); color:var(--hl-text-light-3); }
.hl-pdp__call{ font:600 var(--hl-fs-body)/1 var(--hl-ff-body); color:var(--hl-navy-300); }
/* The gallery. Thumbnails under the stage — never a hover-only swap, which
would put every image after the first out of reach on a touch device. */
.hl-pgal{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:var(--hl-s-5); }
.hl-pgal__thumb{
width:56px; height:56px; padding:5px; border-radius:var(--hl-r-sm); cursor:pointer;
background:rgba(255,255,255,.06); border:1px solid var(--hl-line-dark-2);
transition:border-color var(--hl-t-fast) var(--hl-e-out), background var(--hl-t-fast) var(--hl-e-out);
}
.hl-pgal__thumb img{ width:100%; height:100%; object-fit:contain; }
.hl-pgal__thumb:hover{ background:rgba(255,255,255,.12); }
.hl-pgal__thumb:focus-visible{ outline:2px solid var(--hl-red-400); outline-offset:2px; }
.hl-pgal__thumb.is-active{ border-color:var(--hl-red-400); background:rgba(207,41,39,.14); }
.hl-pdp__grid{
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,4vw,64px); align-items:start;
}
.hl-pdp__copy{ min-width:0; }
.hl-pfeat{ list-style:none; margin:0; padding:0; display:grid; gap:12px; min-width:0; }
.hl-pfeat__row{
display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
padding:14px 16px; border-radius:var(--hl-r-md);
background:var(--hl-paper); border:1px solid var(--hl-line);
}
.hl-pfeat__tick{
position:relative; width:18px; height:18px; border-radius:50%; flex:none; margin-top:2px;
background:var(--hl-brand-navy);
}
.hl-pfeat__tick::after{
content:""; position:absolute; inset:0; margin:auto; width:8px; height:4px;
border-left:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(-45deg) translate(1px,-1px);
}
.hl-pfeat__txt b{ display:block; font:600 var(--hl-fs-body)/1.35 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-pfeat__txt i{
display:block; margin-top:3px; font-style:normal;
font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-muted);
}
.hl-pdp__video{
border-radius:var(--hl-r-xl); overflow:hidden;
border:1px solid var(--hl-line); background:var(--hl-ink-900);
}
.hl-pdp__video video{ display:block; width:100%; height:auto; }
/* Specifications — one definition list per group, on the dark chapter. */
/* ── Specification groups FLOW; they do not line up in rows ────────────────
A grid aligns rows, so a one-row group beside a six-row group left the
difference blank: on the Valor VP800 that was ~140px under CAMERA, ~190px
under COMPLIANCE, ~120px under ENVIRONMENT and ~140px under PRINTER — about
600px of dead space in a 1,700px chapter (audit PD-01 / GROUP J).
Multi-column layout has no rows to align. Each group is kept whole with
`break-inside:avoid`, the browser balances the columns, and a chapter is now
as tall as its content instead of as tall as its worst pairing. */
.hl-pspecs{
columns:2; column-gap:clamp(24px,3vw,52px);
}
.hl-pspecs__group{
min-width:0; break-inside:avoid; -webkit-column-break-inside:avoid;
margin:0 0 clamp(20px,2.4vw,32px);
}
.hl-pspecs__group:last-child{ margin-bottom:0; }
@media (max-width:760px){ .hl-pspecs{ columns:1; } }
.hl-pspecs__title{
margin:0 0 var(--hl-s-4); font:600 var(--hl-fs-micro)/1 var(--hl-ff-body);
letter-spacing:var(--hl-ls-wider); text-transform:uppercase; color:var(--hl-navy-300);
}
.hl-pspecs__list{ margin:0; }
.hl-pspecs__row{
display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:14px;
padding:11px 0; border-bottom:1px solid var(--hl-line-dark);
}
.hl-pspecs__row dt{ font-size:var(--hl-fs-sm); color:var(--hl-text-light-3); }
.hl-pspecs__row dd{ margin:0; font-size:var(--hl-fs-sm); color:#fff; overflow-wrap:anywhere; }
/* Where it fits. */
.hl-puse{
display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
gap:clamp(14px,1.6vw,22px); list-style:none; margin:0; padding:0;
}
.hl-puse__card{
min-width:0; padding:22px 20px; border-radius:var(--hl-r-xl);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
}
.hl-puse__ico{ width:22px; height:22px; margin-bottom:14px; color:var(--hl-brand-red); }
.hl-puse__title{ margin:0 0 6px; font:700 var(--hl-fs-h4)/1.3 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-puse__text{ margin:0; font-size:var(--hl-fs-sm); line-height:1.65; color:var(--hl-text-muted); }
/* Financing strip and the closing band. */
.hl-pdpfin{
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,3vw,48px);
align-items:center; padding:clamp(26px,3vw,44px); border-radius:var(--hl-r-2xl);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
}
.hl-pdpfin__title{ margin:0 0 var(--hl-s-4); font-size:var(--hl-fs-h3); letter-spacing:-.02em; }
.hl-pdpfin__note{ margin:0 0 var(--hl-s-3); font-size:var(--hl-fs-sm); line-height:1.7; color:var(--hl-text-body); }
.hl-pdpfin__disc{ margin:0; max-width:70ch; font-size:var(--hl-fs-xs); line-height:1.7; color:var(--hl-text-muted); }
.hl-pdpend{ max-width:640px; margin-inline:auto; text-align:center; }
.hl-pdpend__title{ margin:0 0 var(--hl-s-4); font-size:var(--hl-fs-h2); color:#fff; letter-spacing:-.02em; }
.hl-pdpend__text{ margin:0 0 var(--hl-s-8); font-size:var(--hl-fs-lede); color:var(--hl-text-light-2); }
.hl-pdpend__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
/* ── I5 · RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width:1024px){
.hl-pdp__grid{ grid-template-columns:minmax(0,1fr); }
.hl-pdpfin{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
.hl-catfilter{ padding:16px; }
.hl-catfilter__field{ flex-wrap:wrap; }
.hl-catfilter__submit{ width:100%; }
.hl-catfilter__clear{ margin-inline-start:0; }
.hl-catfilter__acts{ justify-content:space-between; }
/* The counts are the first thing to go when space runs out. The category
name is the label; the count was only ever supporting information. */
.hl-catchip b{ display:none; }
.hl-pgrid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
/*
* A shorter band on a phone, and the silhouettes scaled to match it. The band
* and the scale factors have to move together: 140px of frame with the desktop
* scales would paint a 154px device into it, which is how artwork ends up
* sitting on top of its own caption. Every value below is (band - 4px) / the
* device's layout height or less.
*/
.hl-pcard__art{ --hl-pslot-h:140px; }
.hl-pcard__art .hl-dev{ --hl-k:.69; transform:scale(.69); }
.hl-pcard__art .hl-dev--smart{ --hl-k:.63; transform:scale(.63); }
.hl-pcard__art .hl-dev--rest{ --hl-k:.6; transform:scale(.6); }
.hl-pcard__art .hl-dev--pump{ --hl-k:.56; transform:scale(.56); }
.hl-pspecs__row{ grid-template-columns:minmax(0,1fr); gap:2px; }
.hl-pspecs__row dd{ font-weight:600; }
.hl-catpages__step span{ display:none; }
}
@media (max-width:420px){
.hl-pgrid{ grid-template-columns:minmax(0,1fr); }
.hl-pcard__foot{ align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
.hl-pcard__in, .hl-pcard__go .hl-arrow{ transition:none; }
a.hl-pcard__in:hover{ transform:none; }
}
/* ── I6 · THE SHOWCASE ROW — the `products` block's Carousel and Grid ──────
The other four layouts of that block (hardware, showcase, insert, and the
hardware chapter) are finished compositions with their own views and their own
CSS above. These two were not: they carried a `.hl-product-card` vocabulary
that had no rules anywhere, so selecting either in Admin rendered an unstyled
bulleted list of names. They now render `partials/product-card` — the same
card as the catalog grid and the related-equipment row — which leaves only the
container to describe, and the container is the whole of this subsection.
Nothing here is reachable by an existing page: no live section currently
selects Carousel or Grid. It is the Admin-reachable hole behind that fact that
is being closed. */
.hl-products{ position:relative; }
/* Grid: the list already carries `.hl-pgrid`, the catalog's own grid, so there
is deliberately no rule for `.hl-products--grid`. Said out loud so the next
reader does not go hunting for a declaration that should not exist. */
/*
* Carousel: one scroll-snapping row that works with no JavaScript at all.
* modules/carousel.js has always opened with "the server renders a plain
* semantic that is already a usable, swipeable, scroll-snapping row via
* CSS alone" — true of `.hl-reviews`, and until now not true of this one. The
* arrows it wires drive `scrollBy` on exactly this element, and its step is the
* first child's width plus the gap, so the row has to be the scroll container
* and the cards have to be non-shrinking for the controls to page cleanly.
*
* `display:flex` overrides `.hl-pgrid`'s grid on the same element — two classes
* to one, so no !important and no restructuring of the markup. The gap comes
* from `.hl-pgrid` and applies unchanged in a flex row.
*/
.hl-products--carousel .hl-products__list{
display:flex; flex-wrap:nowrap;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding-inline-start:2px;
/*
* Making one axis scrollable makes the other a scroll container too, so the
* card's 7px hover lift and its 3px focus ring would be clipped by the row
* itself. The padding is reserved room for both, not decoration — remove it
* and hovering a card in a carousel visibly shaves its top edge.
*/
padding:10px 2px 16px;
scrollbar-width:thin; scrollbar-color:var(--hl-line-2) transparent;
}
/* A card in a grid sizes itself from the column. In a row it has to be told, and
it must not shrink — `flex:0 0` is what makes every snap position land on a
card of the same width. */
.hl-products--carousel .hl-pcard{ flex:0 0 clamp(232px, 76vw, 300px); scroll-snap-align:start; }
@media (min-width:48rem){
.hl-products--carousel .hl-pcard{ flex-basis:clamp(244px, 26vw, 304px); }
}
.hl-products--carousel .hl-products__list::-webkit-scrollbar{ height:8px; }
.hl-products--carousel .hl-products__list::-webkit-scrollbar-thumb{
background:var(--hl-line-2); border-radius:999px;
}
/* The scrollbar is an affordance — it is the only standing signal that there is
more row to the right — so it is thinned on dark bands, never hidden. */
.hl-section--dark .hl-products--carousel .hl-products__list,
.hl-section--brand .hl-products--carousel .hl-products__list{
scrollbar-color:rgba(255,255,255,.22) transparent;
}
.hl-section--dark .hl-products--carousel .hl-products__list::-webkit-scrollbar-thumb,
.hl-section--brand .hl-products--carousel .hl-products__list::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.22);
}
/* The hand-off line under either layout: "View all equipment →". Centred, since
both layouts above it are centred; the link's own colour and its hover come
from the J4 button layer, which is where the contrast rules live. */
.hl-section__more{ margin:var(--hl-s-8) 0 0; text-align:center; }
/* ===========================================================================
J · ADMIN-CONTROLLED SECTION ACCENTS, AND THE BUTTON/LINK CONTRAST LAYER
---------------------------------------------------------------------------
Section A's docblock used to say "nothing in this file is reachable from
Admin". That is no longer true, and the distinction that replaced it matters:
an administrator selects an APPROVED OPTION; the stylesheet decides what
that option looks like.
Every class below is emitted by section_classes() from a `select` whose
options are declared in BlockRegistry. There is still no CSS field, and the
single free-form control — a custom hex — is validated in the sanitiser and
arrives as a custom property on a scoped rule, never as inline CSS.
Nothing here changes an existing page. Every control's default is "automatic",
which emits no class at all, and every token falls back to the approved value
it replaced.
=========================================================================== */
/* ── J1 · CHAPTER NUMERAL INK ─────────────────────────────────────────────
The outlined 01 / 02 / 03. Its default is a hairline on light bands and a
20%-white stroke on dark ones, which is right for a page that alternates —
and wrong for six navy sections in a row, which is the problem these give an
administrator a way to solve. */
.hl-cn--hairline{ --hl-cn-ink:var(--hl-line-2); }
.hl-cn--navy { --hl-cn-ink:var(--hl-navy-400); }
.hl-cn--red { --hl-cn-ink:var(--hl-red-400); }
.hl-cn--ink { --hl-cn-ink:var(--hl-ink-700); }
.hl-cn--white { --hl-cn-ink:rgba(255,255,255,.34); }
.hl-cn--faint { --hl-cn-ink:rgba(255,255,255,.16); }
/* Filled rather than outlined — the same numeral at a weight that reads as a
decision rather than a watermark. Kept deliberately low-contrast: a chapter
number that competes with the heading is a bug, not a feature. */
.hl-cn--solid{ --hl-cn-fill:var(--hl-cn-ink, var(--hl-line-2)); }
.hl-cn--solid .hl-ihead__n{ -webkit-text-stroke-width:0; }
/* ── J2 · EYEBROW INK ─────────────────────────────────────────────────────
The eyebrow carries a small gradient bar; recolouring the text without the
bar would look like an oversight, so both move together. */
.hl-eb--red { --hl-eb-ink:var(--hl-brand-red);
--hl-eb-bar:linear-gradient(180deg,var(--hl-red-400),var(--hl-red-600));
--hl-eb-glow:0 0 12px rgba(207,41,39,.6); }
.hl-eb--navy { --hl-eb-ink:var(--hl-navy-500);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-400),var(--hl-navy-600));
--hl-eb-glow:0 0 12px rgba(42,45,124,.45); }
.hl-eb--light{ --hl-eb-ink:var(--hl-navy-300);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-300),var(--hl-navy-500));
--hl-eb-glow:0 0 12px rgba(144,150,228,.45); }
.hl-eb--white{ --hl-eb-ink:#fff;
--hl-eb-bar:linear-gradient(180deg,#fff,rgba(255,255,255,.5));
--hl-eb-glow:0 0 12px rgba(255,255,255,.35); }
.hl-eb--muted{ --hl-eb-ink:var(--hl-text-muted);
--hl-eb-bar:linear-gradient(180deg,var(--hl-line-2),var(--hl-text-muted));
--hl-eb-glow:none; }
/* ── J3 · HEADING INK ─────────────────────────────────────────────────────
Restricted to the section heading, and restricted to values that hold their
contrast on the band the option is offered for. There is no "any colour"
heading: a heading is the one element on a section that cannot be allowed to
fail legibility. */
.hl-hd--ink { --hl-hd-ink:var(--hl-text-dark); }
.hl-hd--navy { --hl-hd-ink:var(--hl-brand-navy); }
.hl-hd--white{ --hl-hd-ink:#fff; }
/* A custom hex is validated in PHP, then applied through these tokens by a
scoped rule PageRenderer emits — `.hl-s-{ --hl-cn-ink:#… }`. The
class is only emitted when a custom value exists, so a page that uses none
produces byte-identical markup to before. */
/* ===========================================================================
J4 · BUTTONS AND LINKS — EVERY VARIANT, EVERY STATE, BOTH BANDS
---------------------------------------------------------------------------
Two button systems reached the same element:
components.css paints .hl-btn from --hl-btn-bg / --hl-btn-fg /
--hl-btn-border, and re-asserts the FOREGROUND on :hover
(`.hl-btn:hover{ color:var(--hl-btn-fg) }`, default #fff).
this file sets `color` and `background` directly, per variant.
They agree at rest and disagree on hover, and that disagreement is a defect
that shipped: "View All Equipment" (.hl-btn--link, red) sits on a white
section and turned WHITE on hover, because the E-bridge reset for `--link`
neutralised --hl-btn-bg and --hl-btn-border and never reset --hl-btn-fg.
Auditing the rest of the family rather than patching that one call site found
three more instances of the same class of bug:
.hl-btn--secondary white background, ink label, and NO :hover rule at all
— so hover fell through to #fff on #fff.
.hl-btn--ghost `color:#fff` unconditionally, while the `content` and
`promotion` blocks render it on a LIGHT band.
every dark-band button layout.css's `.hl-section--dark a:hover` is more
specific than `.hl-btn:hover`, so hovering the primary
CTA repainted its label in --hl-accent-light — which is
the colour of its own background. Fixed at source there
with `:not(.hl-btn)`.
The mechanism below replaces the two-system fight with one token. Every
variant declares `--hl-btn-ink`; one rule re-asserts it on every state. A
variant can therefore never be handed a foreground it did not choose.
=========================================================================== */
.hl-btn{ --hl-btn-ink:currentColor; }
/* The single rule that outranks components.css's `.hl-btn:hover`: same
specificity, later file — so it wins, and it wins with the variant's own ink
rather than with #fff. */
.hl-btn:hover,
.hl-btn:focus,
.hl-btn:focus-visible,
.hl-btn:active{ color:var(--hl-btn-ink); }
/* The loading spinner is drawn from --hl-btn-fg by components.css; point it at
the same ink so a loading button does not flash a white ring on white. */
.hl-btn.is-loading::before{ color:var(--hl-btn-ink); border-top-color:transparent; }
/* Focus. base.css already rings every anchor and button; these make the ring
correct on a band whose class is `--dark` rather than `.hl-on-dark`, and stop
`overflow:hidden` from clipping it on the pill shapes. */
.hl-btn:focus-visible{
outline:3px solid var(--hl-brand-red); outline-offset:3px; overflow:visible;
}
.hl-section--dark .hl-btn:focus-visible,
.hl-section--brand .hl-btn:focus-visible,
.hl-ihero .hl-btn:focus-visible,
.hl-shero .hl-btn:focus-visible{
outline-color:#fff; box-shadow:0 0 0 6px rgba(207,41,39,.45);
}
/* ── J4.1 · PRIMARY / ACCENT — the red gradient ────────────────────────────
Reads on both bands, so it does not vary by section. */
.hl-btn--primary,
.hl-btn--accent{ --hl-btn-ink:#fff; }
/* ── J4.2 · DARK — the navy gradient ───────────────────────────────────── */
.hl-btn--dark{ --hl-btn-ink:#fff; }
/* ── J4.3 · LIGHT / SECONDARY — white ground, ink label ────────────────────
Identical treatment; `--secondary` is the vocabulary alias the page builder
offers. On a light band a white pill needs an edge or it is a floating label,
and it needs a hover that changes the background rather than the ink. */
.hl-btn--light,
.hl-btn--secondary{ --hl-btn-ink:var(--hl-ink-800); color:var(--hl-btn-ink); background:#fff; }
.hl-btn--light:hover,
.hl-btn--secondary:hover{ --hl-btn-ink:var(--hl-ink-900); background:var(--hl-paper); transform:translateY(-2px); }
.hl-btn--light:active,
.hl-btn--secondary:active{ background:var(--hl-paper-2); transform:translateY(0); }
.hl-section--light .hl-btn--light,
.hl-section--light .hl-btn--secondary,
.hl-section--alt .hl-btn--light,
.hl-section--alt .hl-btn--secondary{
border:1px solid var(--hl-line-2); box-shadow:var(--hl-sh-sm);
}
.hl-section--light .hl-btn--light:hover,
.hl-section--light .hl-btn--secondary:hover,
.hl-section--alt .hl-btn--light:hover,
.hl-section--alt .hl-btn--secondary:hover{ border-color:var(--hl-brand-navy); background:var(--hl-paper); }
/* ── J4.4 · GHOST — the quiet companion to a primary ───────────────────────
The approved treatment is a translucent white pill for a dark environment.
The `content`, `promotion` and `products` blocks all render it on a light one,
where `color:#fff` made the label vanish. On a light band it becomes the same
shape in ink on white — the design's own light-band treatment, not a new
button. */
.hl-btn--ghost{ --hl-btn-ink:#fff; color:var(--hl-btn-ink); }
.hl-btn--ghost:hover{ --hl-btn-ink:#fff; }
.hl-section--light .hl-btn--ghost,
.hl-section--alt .hl-btn--ghost{
--hl-btn-ink:var(--hl-text-dark);
color:var(--hl-btn-ink);
background:#fff; border-color:var(--hl-line-2); backdrop-filter:none;
}
.hl-section--light .hl-btn--ghost:hover,
.hl-section--alt .hl-btn--ghost:hover{
--hl-btn-ink:var(--hl-brand-navy);
background:var(--hl-paper); border-color:var(--hl-brand-navy);
}
/* ── J4.5 · OUTLINE ───────────────────────────────────────────────────────
E3 already gave this its light-band form; what it lacked was an ink token, so
hover still resolved through --hl-btn-fg. */
.hl-btn--outline{ --hl-btn-ink:#fff; color:var(--hl-btn-ink); }
.hl-btn--outline:hover{ --hl-btn-ink:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.34); }
.hl-section--light .hl-btn--outline,
.hl-section--alt .hl-btn--outline{ --hl-btn-ink:var(--hl-text-dark); color:var(--hl-btn-ink); }
.hl-section--light .hl-btn--outline:hover,
.hl-section--alt .hl-btn--outline:hover{ --hl-btn-ink:var(--hl-brand-navy); }
/* ── J4.6 · TEXT LINK — the reported bug, and its whole family ─────────────
Red on a light band, a lighter red on a dark one, and never white on either.
The hover deepens the red rather than replacing it, so the underline that
grows underneath is the state change — which is what the design intended. */
.hl-btn--link{ --hl-btn-ink:var(--hl-brand-red); color:var(--hl-btn-ink); }
.hl-btn--link:hover,
.hl-btn--link:active{ --hl-btn-ink:var(--hl-red-700); }
.hl-section--dark .hl-btn--link,
.hl-section--brand .hl-btn--link{ --hl-btn-ink:var(--hl-red-400); }
.hl-section--dark .hl-btn--link:hover,
.hl-section--brand .hl-btn--link:hover{ --hl-btn-ink:var(--hl-red-300); }
.hl-btn--link-light{ --hl-btn-ink:var(--hl-navy-300); color:var(--hl-btn-ink); }
.hl-btn--link-light:hover{ --hl-btn-ink:#fff; }
.hl-section--light .hl-btn--link-light,
.hl-section--alt .hl-btn--link-light{ --hl-btn-ink:var(--hl-navy-500); }
.hl-section--light .hl-btn--link-light:hover,
.hl-section--alt .hl-btn--link-light:hover{ --hl-btn-ink:var(--hl-brand-navy); }
/* The E-bridge reset neutralised --hl-btn-bg and --hl-btn-border for a text
link and stopped short of the foreground. Completed here. */
.hl-btn--link,
.hl-btn--link:hover,
.hl-btn--link:focus-visible,
.hl-btn--link:active{ --hl-btn-fg:var(--hl-btn-ink); --hl-btn-bg:transparent; --hl-btn-border:transparent; }
.hl-btn--link:focus-visible{ outline-offset:6px; }
/* ── J4.7 · DISABLED ──────────────────────────────────────────────────────
`opacity:.55` over a red gradient leaves white text at roughly 1.7:1, which is
the invisible-state failure the audit was looking for. A disabled control is a
flat neutral with a legible label instead: --hl-text-muted on --hl-paper-2 is
4.67:1, and 50%-white on a dark band clears AA too. */
.hl-btn[disabled],
.hl-btn[aria-disabled="true"],
.hl-btn.is-disabled{
opacity:1; cursor:not-allowed; pointer-events:none; transform:none;
--hl-btn-ink:var(--hl-text-muted); color:var(--hl-btn-ink);
background:var(--hl-paper-2); background-image:none;
border:1px solid var(--hl-line-2); box-shadow:none;
}
.hl-section--dark .hl-btn[disabled],
.hl-section--dark .hl-btn[aria-disabled="true"],
.hl-section--dark .hl-btn.is-disabled,
.hl-section--brand .hl-btn[disabled],
.hl-section--brand .hl-btn[aria-disabled="true"],
.hl-section--brand .hl-btn.is-disabled{
--hl-btn-ink:var(--hl-text-light-3); background:rgba(255,255,255,.07);
border-color:var(--hl-line-dark-2);
}
/* A disabled text link keeps its shape rather than becoming a grey pill. */
.hl-btn--link[disabled],
.hl-btn--link[aria-disabled="true"],
.hl-btn--link.is-disabled{ background:none; border:0; padding:0; }
/* ── J4.8 · THE OTHER LINK COMPONENTS ─────────────────────────────────────
`.hl-link-arrow` is components.css's tertiary link and predates the approved
family. It resolves to --hl-primary, and --hl-accent on hover, which is
correct on a light band — but on a dark SECTION (as opposed to a `.hl-on-dark`
container) it was navy on near-black. Same audit, same fix. */
.hl-section--dark .hl-link-arrow,
.hl-section--brand .hl-link-arrow{ color:var(--hl-text-on-dark,#f5f6fb); }
.hl-section--dark .hl-link-arrow:hover,
.hl-section--brand .hl-link-arrow:hover{ color:var(--hl-red-300); }
/* Footer links sit in a dark chrome that is not a `.hl-section`, so they are
checked here explicitly rather than assumed. */
.hl-footer a:not(.hl-btn):hover{ color:var(--hl-red-300); }
/* ===========================================================================
J5 · THE SECTION CTA VARIANT — ONE ADMIN SELECT, FIFTEEN VIEWS UNTOUCHED
---------------------------------------------------------------------------
`cta_variant` becomes a class on the SECTION (`hl-cta--v-outline`), not on the
button. That is what makes the control reachable without editing a view: every
block that renders a primary action already sits inside a section whose
classes come from section_classes(), so the fifteen existing views honour this
without a line of PHP, and a view added next year inherits it for free.
WHICH button it repaints, and why that needed deciding:
The views do not agree on what a primary action looks like. Fourteen call
sites render `.hl-btn--primary`, ten render `.hl-btn--dark`, two render
`.hl-btn--accent` — all three are the loud one, chosen per block by whoever
built it. Targeting only `--primary` would have left this control silently
inert on ten blocks, which is exactly the dead setting this pass exists to
remove. So all three are targeted, and the quiet companions (`--ghost`,
`--link`, `--light`, `--outline`, `--secondary`) are deliberately left
alone: a section whose two actions look identical has no primary action.
`--sm` is excluded. That size is what the design uses for utility controls
INSIDE a component — the catalog Search and Apply filters submits, a
testimonial card Trustpilot button, the page rail action. Those are not the
section call to action, and turning a form submit into a bare text link
because an editor set a section CTA variant would be a defect, not a
preference.
Every variant below is the SAME paint as its `.hl-btn--x` equivalent in J4,
band-aware wherever that equivalent is band-aware. This is a re-labelling of
the approved family, not a seventh button design. `:is()` carries the
specificity of one class, so each rule is (0,3,0) and each hover (0,4,0) —
above the variant rules they override, and above nothing else.
=========================================================================== */
/* ── J5.1 · PRIMARY — the red gradient ─────────────────────────────────── */
.hl-cta--v-primary :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:#fff; color:var(--hl-btn-ink);
background:linear-gradient(170deg,var(--hl-red-400),var(--hl-red-600));
border:0; box-shadow:var(--hl-sh-red), inset 0 1px 0 rgba(255,255,255,.28);
}
.hl-cta--v-primary :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
box-shadow:0 16px 38px -10px rgba(207,41,39,.65), inset 0 1px 0 rgba(255,255,255,.3);
transform:translateY(-2px);
}
/* ── J5.2 · DARK — the navy gradient ───────────────────────────────────── */
.hl-cta--v-dark :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:#fff; color:var(--hl-btn-ink);
background:linear-gradient(170deg,var(--hl-ink-750),var(--hl-ink-850));
border:0; box-shadow:var(--hl-sh-navy), inset 0 1px 0 rgba(255,255,255,.16);
}
.hl-cta--v-dark :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
box-shadow:0 18px 40px -12px rgba(42,45,124,.55), inset 0 1px 0 rgba(255,255,255,.2);
transform:translateY(-2px);
}
/* ── J5.3 · LIGHT — a white pill, for a dark band ───────────────────────── */
.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-ink-800); color:var(--hl-btn-ink);
background:#fff; background-image:none; border:0;
box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-ink-900); background:var(--hl-paper); transform:translateY(-2px);
}
/* On a LIGHT band a white pill with no edge is a floating label, so it takes the
same hairline J4.3 gives `.hl-btn--light` there. */
.hl-section--light.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm),
.hl-section--alt.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
border:1px solid var(--hl-line-2); box-shadow:var(--hl-sh-sm);
}
.hl-section--light.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover,
.hl-section--alt.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
border-color:var(--hl-brand-navy); background:var(--hl-paper);
}
/* ── J5.4 · SECONDARY — the same white pill, edged on every band ─────────
The distinction J4.3 already draws: `light` is the dark-band treatment,
`secondary` is the one that carries its own edge wherever it lands. */
.hl-cta--v-secondary :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-ink-800); color:var(--hl-btn-ink);
background:#fff; background-image:none;
border:1px solid var(--hl-line-2); box-shadow:var(--hl-sh-sm);
}
.hl-cta--v-secondary :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-brand-navy); background:var(--hl-paper);
border-color:var(--hl-brand-navy); transform:translateY(-2px);
}
/* ── J5.5 · OUTLINE — band-aware, because a transparent pill has to be ─── */
.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-text-dark); color:var(--hl-btn-ink);
background:#fff; background-image:none;
border:1px solid var(--hl-line-2); box-shadow:none;
}
.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-brand-navy); background:var(--hl-paper);
border-color:var(--hl-brand-navy); transform:translateY(-2px);
}
.hl-section--dark.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm),
.hl-section--brand.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:#fff; color:var(--hl-btn-ink);
background:rgba(255,255,255,.03); border-color:var(--hl-line-dark-2);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hl-section--dark.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover,
.hl-section--brand.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.34);
}
/* ── J5.6 · TEXT LINK — the pill geometry has to go, not just its paint ───
Mirrors `.hl-btn--link` exactly, including the underline that grows on hover,
so a section set to Text link produces the design's text link rather than a
button with its background removed. */
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-brand-red); color:var(--hl-btn-ink);
height:auto; padding:0; gap:7px; border:0; border-radius:0;
background:none; box-shadow:none; align-self:flex-start;
font-size:var(--hl-fs-sm);
}
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-red-700); background:none; box-shadow:none; transform:none;
}
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm)::after{
content:""; position:absolute; left:0; right:22px; bottom:-4px; height:1px;
background:currentColor; opacity:.28;
transition:opacity var(--hl-t-med), right var(--hl-t-med) var(--hl-e-out);
}
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover::after{
opacity:.7; right:0;
}
.hl-section--dark.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm),
.hl-section--brand.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-red-400);
}
.hl-section--dark.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover,
.hl-section--brand.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-red-300);
}
/* A text link keeps its focus ring clear of the underline it grows. */
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):focus-visible{
outline-offset:6px;
}
/* ── J6 · SECTION BAND OVERRIDE ────────────────────────────────────────────
The control that makes "alternate the sections" real.
THE PROBLEM. Twenty-eight of the approved compositions paint their own
ground: `.hl-price` is a navy gradient, `.hl-partners` is paper, the three
heroes are stacked radial glows. Each does it with a single-class selector in
THIS file, which loads after layout.css — so `.hl-section--light` (0,1,0,
earlier file) lost to `.hl-price` (0,1,0, later file) and four of the five
bands were inert wherever a composition was in play. An administrator could
set "Soft light" on the partner strip and watch nothing happen; worse, on the
chargeback page two adjacent sections set to `light` and `dark` rendered the
same navy ground with DIFFERENT accent colours, which looks like a bug in the
page rather than a limit of the control.
THE RULE. `section_classes()` compares the stored theme against
`BlockRegistry::defaultTheme()` and emits `.hl-section--reband` only when they
differ. So this whole section is dormant on every page nobody has touched —
and it is dormant by NOT MATCHING, not by resolving to the same value. None
of the twenty-eight rules below are edited; J6 only adds rules that outrank
them, which is why "existing pages retain their current appearance" is a
structural guarantee here and not a promise to be re-tested.
THE SPECIFICITY. Two classes on the section root plus the composition itself
inside `:is()`, (0,3,0), against the composition's own (0,1,0) — and last in
the last stylesheet, which settles navy against layout.css's equally-specific
`.hl-section--dark.hl-section--navy`. Sections with NO composition need
nothing here: layout.css's bands were never the losing side for them.
WHEN THE OVERRIDE IS *NOT* APPLIED, AND WHY THAT MATTERS MORE.
A composition drawn on paper does not need its ground replaced when the
selection is Light or Soft light. It already is that band — and its own
gradient (`.hl-hw` runs paper → white → paper to lift the product shots off
the fold) is a better rendering of the same answer than a flat fill. Likewise
a deep-navy composition asked for Deep navy. So those pairings keep the
artwork and the selection is satisfied rather than ignored.
Highline navy and Brand gradient always override, on all twenty-eight,
because they are not different renderings of a ground the composition already
has: they are the two bands an administrator reaches for precisely to make
one navy chapter read differently from the navy chapter above it, which is
the visual-rhythm problem this control exists to solve.
The effect on the live site, which is the test that counts: of the forty
sections whose stored theme differs from their block default, ten sit on a
composition, and all ten are same-family pairings — `hl-partners` + Soft
light, `hl-price` + Deep navy, `hl-hw` + Light. Every one keeps its artwork.
Nothing on twenty-six published pages moves by a pixel, and the control is
nonetheless live the moment anyone chooses across the divide. */
/* A composition drawn on paper, asked for a dark ground. */
.hl-section--reband.hl-section--dark:is(.hl-acc,.hl-ben,.hl-binds,.hl-calc,.hl-cd,
.hl-faq-sec,.hl-hw,.hl-hw2,.hl-partners,.hl-revs,.hl-rhw,.hl-rwhy,.hl-story,
.hl-why-sec,.hl-why2){
background:linear-gradient(178deg, var(--hl-ink-900) 0%, var(--hl-ink-850) 55%, var(--hl-ink-900) 100%);
}
/* A composition drawn on deep navy, asked for a paper ground. */
.hl-section--reband.hl-section--light:is(.hl-final,.hl-floor,.hl-flow,.hl-fund,
.hl-hero--highline,.hl-ihero,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-price,.hl-rfund,
.hl-shero,.hl-sys){
background:var(--hl-bg, #fff);
}
.hl-section--reband.hl-section--alt:is(.hl-final,.hl-floor,.hl-flow,.hl-fund,
.hl-hero--highline,.hl-ihero,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-price,.hl-rfund,
.hl-shero,.hl-sys){
background:var(--hl-paper, #f5f7fc);
}
/* The two that always win, on either family. */
.hl-section--reband.hl-section--navy:is(.hl-acc,.hl-ben,.hl-binds,.hl-calc,.hl-cd,
.hl-faq-sec,.hl-final,.hl-floor,.hl-flow,.hl-fund,.hl-hero--highline,.hl-hw,
.hl-hw2,.hl-ihero,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-partners,.hl-price,.hl-revs,
.hl-rfund,.hl-rhw,.hl-rwhy,.hl-shero,.hl-story,.hl-sys,.hl-why-sec,.hl-why2){
background:linear-gradient(178deg, var(--hl-primary-dark, #1b1e45) 0%, var(--hl-primary, #2a2d7c) 100%);
}
.hl-section--reband.hl-section--brand:is(.hl-acc,.hl-ben,.hl-binds,.hl-calc,.hl-cd,
.hl-faq-sec,.hl-final,.hl-floor,.hl-flow,.hl-fund,.hl-hero--highline,.hl-hw,
.hl-hw2,.hl-ihero,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-partners,.hl-price,.hl-revs,
.hl-rfund,.hl-rhw,.hl-rwhy,.hl-shero,.hl-story,.hl-sys,.hl-why-sec,.hl-why2){
background:var(--hl-gradient-brand);
}
/* ── J6.1 · THE LEGIBILITY GUARD — dark composition, light band ─────────────
Requirement 16 says a CMS selection must never produce invisible text, and
must fall back to the nearest safe design-system foreground on its own.
This is where that bites hardest. A composition drawn for a dark ground has
its ink written into its children — thirty-nine declarations across the
thirteen dark compositions, on a four-tier ladder plus one accent:
#fff the headline / the strong value
--hl-text-light-2 .74 the lede
--hl-text-light-3 .50 the supporting line
--hl-text-light-4 .34 the disclaimer
--hl-navy-300 the accent word, the contact link
Re-band the section to white and all five vanish. So the marker that raises
the band also remaps that ladder onto the light-ground ramp, tier for tier,
preserving the hierarchy the composition was designed with rather than
flattening everything to one ink. `:is()` keeps the lists readable and
carries the specificity of its most specific argument, so a descendant
selector like `.hl-final__stack em` is still outranked.
ONE EXCLUSION, AND IT IS THE WHOLE DIFFICULTY OF THIS GUARD. Ink only follows
the band if the band is what is actually behind it. Most of these panels are
either unpainted or painted in translucent white — `.hl-ind__aside` is 7%
white, `.hl-ioffer__card` is a red-over-navy wash — so on a paper band they
resolve to paper and their ink has to go dark with it. `.hl-sysfoot` does
not: it is `--hl-ink-950`, opaque, near-black, and it stays near-black no
matter what the section does. Flipping its ink would have produced exactly
the invisible text this guard exists to prevent, from inside the guard. It is
excluded here and re-asserted in J6.5 along with the other opaque islands. */
/* The SECTION HEADINGS are split out of the tier-1 list below, with one extra
condition: they step aside when the administrator has chosen a heading ink.
Everything else in that list — ledes, emphasised words, step labels — has no
control pointed at it and is remapped unconditionally.
Without the split, "Heading colour" was inert on every composition in this
list. `:is()` takes the specificity of its most specific argument, and
`.hl-sysempty .hl-h2` made the whole rule (0,4,0) — above anything the
control could reasonably assert. The same automatic-then-overridable order
as J6.4, and only for the inks that are safe on this ground (M11 decides
which). */
.hl-section--reband:is(.hl-section--light,.hl-section--alt):not([class*="hl-hd--"])
:is(.hl-final__title, .hl-ioffer__title, .hl-price__title, .hl-shero__h1){
color:var(--hl-ink-900);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__stack span, .hl-final__stack em,
.hl-ind__aside b, .hl-ioffer__tag, .hl-ioffer__amt b,
.hl-ioffer__pts span, .hl-price__lede,
.hl-price__body strong, .hl-price__steps b, .hl-rfund__grid b,
.hl-sysempty .hl-h2){
color:var(--hl-ink-900);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__lede, .hl-floor__foot span, .hl-ioffer__copy, .hl-price__body,
.hl-shero__lede, .hl-sysempty .hl-lead){
color:var(--hl-text-body);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__chips li, .hl-fund__note, .hl-ind__aside p, .hl-ioffer__amt span,
.hl-price__steps span:last-child, .hl-rfund__grid span:last-child){
color:var(--hl-text-muted);
}
/* The .34 tier is a disclaimer, not decoration — it stays quieter than body
copy but still has to clear AA, so it lands on the same audited muted token
rather than on a paler one invented for the purpose. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-floor__roomtag, .hl-fund__disclaimer, .hl-ioffer__disc,
.hl-net-sec__disc, .hl-price__disc, .hl-rfund__note){
color:var(--hl-text-muted);
}
/* The accent word. --hl-navy-300 is a pale lavender chosen to glow on navy; on
paper it is barely there, so it steps down the ramp to the brand navy. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-ind__aside-ico, .hl-shero__h1 em){
color:var(--hl-navy-600);
}
/* ── J6.2 · THE SAME GUARD FOR SURFACES AND HAIRLINES ──────────────────────
Text is the requirement, but a chip whose ground was `rgba(255,255,255,.05)`
and a card hairline that was `inset 0 1px 0 rgba(255,255,255,.12)` disappear
on white too — and a list of steps that loses its tiles reads as broken
markup rather than as a design choice. Same inversion, same ramp. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__stack span, .hl-final__stack em, .hl-floor__foot span,
.hl-ioffer__pts, .hl-price__steps li, .hl-rfund__grid li){
background:var(--hl-paper-2);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-price__steps li:hover, .hl-rfund__grid li:hover){
background:var(--hl-paper-3);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-ind__aside{
background:linear-gradient(155deg, var(--hl-paper), var(--hl-white));
border-color:var(--hl-line);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-ioffer__card{
box-shadow:var(--hl-sh-lg), inset 0 1px 0 var(--hl-white);
}
/* The decorative SVG layers. These are aria-hidden artwork, so the standard is
"still visible" rather than any contrast ratio — a route drawn in 9% white on
a white band is simply gone, and the section loses the infrastructure motif
that ties it to the rest of the site. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__conv .hl-rte__base, .hl-floor__div, .hl-floor .hl-sroute){
stroke:var(--hl-line-2);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-floor__room{
stroke:var(--hl-line-2); fill:rgba(42,45,124,.022);
}
/* The red glow behind the closing CTA is a light source. It has nothing to lift
off a white ground, and left in place it reads as a printing error. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-final__glow{
opacity:.14;
}
/* ── J6.3 · THE OTHER DIRECTION — light composition, dark band ──────────────
Cheaper, because the fifteen light compositions took their ink from tokens
rather than writing it down, and layout.css's `.hl-section--dark` already
flips those tokens for the whole subtree. What it does not flip is a panel
ground written as a literal white — those survive as white slabs on navy,
which is legible but reads as a different section pasted in. Every selector
below was taken from the stylesheet, not guessed: these are the only five
panels in those fifteen compositions that paint their own light ground. */
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand)
:is(.hl-calcbox, .hl-hw2__note, .hl-rhw__feature, .hl-rhw__note){
background:rgba(255,255,255,.045);
border-color:var(--hl-line-dark-2);
box-shadow:none;
}
/* The hardware stage is a lit alcove for a product shot. Inverted, it becomes a
pool of shadow instead — same gesture, opposite ground. */
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand) .hl-rhw__art{
background:radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255,255,255,.07), transparent 70%);
border-color:var(--hl-line-dark-2);
}
/* The product placeholder frame is drawn in the light hairline because the
three hardware chapters are light. On a dark band that edge disappears and
the silhouette floats. */
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand) .hl-pslot__ph{
--hl-ph-name:var(--hl-text-light-2); --hl-ph-note:var(--hl-text-light-4);
}
/* ── J6.4 · CHAPTER NUMERALS AND EYEBROWS FOLLOW THE BAND ──────────────────
Both already resolve through `--hl-cn-ink` / `--hl-eb-ink` (J1, J2), and both
have a per-section override an administrator may have set. So this supplies
only the DEFAULT for the new ground, and does it at the section root where an
explicit `.hl-cn--*` / `.hl-eb--*` class or the `.hl-s-` custom colour
both outrank it — the automatic answer, overridable, in that order. */
/* CORRECTED in the visual correction pass. The paragraph above says an explicit
`.hl-cn--*` / `.hl-eb--*` class outranks these defaults. It did not.
`.hl-section--reband:is(…)` is (0,2,0) and `.hl-cn--red` is (0,1,0), so the
automatic answer beat the administrator's on every re-banded section — which
is precisely the set of sections an editor is most likely to be tuning. A
control test that set all seven chapter inks and all five eyebrow inks on a
re-banded section measured ONE resulting colour.
Specificity cannot settle it — raising these would break the other direction
— so they now simply do not match when a choice has been made. The accent
classes carry unique prefixes, so `:not([class*="hl-cn--"])` is exact: the
automatic answer applies, is overridable, in that order, and now actually is. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt):not([class*="hl-cn--"]){
--hl-cn-ink:var(--hl-line-2);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt):not([class*="hl-eb--"]){
--hl-eb-ink:var(--hl-brand-red);
--hl-eb-bar:linear-gradient(180deg,var(--hl-red-400),var(--hl-red-600));
--hl-eb-glow:0 0 12px rgba(207,41,39,.6);
}
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand):not([class*="hl-cn--"]){
--hl-cn-ink:rgba(255,255,255,.16);
}
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand):not([class*="hl-eb--"]){
--hl-eb-ink:var(--hl-navy-300);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-300),var(--hl-navy-500));
--hl-eb-glow:0 0 12px rgba(144,150,228,.45);
}
/* Nothing further is needed for the numeral itself. `section_head_class()` and
the two views that hand-roll the same ternary all ask `section_is_dark()`,
which reads the SAME stored theme this class was emitted from — so a section
re-banded to light never carries `hl-ihead--light`, and one re-banded to dark
always does. The outline stroke already resolves through `--hl-cn-ink`, so the
two declarations above are the whole of it. Worth stating, because the
obvious-looking `-webkit-text-stroke-color` override here would be dead code
guarding a state the renderer cannot produce. */
/* ── J6.5 · THE OPAQUE ISLANDS ─────────────────────────────────────────────
Four panels paint an opaque dark ground of their own and keep it whatever the
section does: the catalog footer (`--hl-ink-950`), the why-panel feature card,
the calculator's result half, and the industry floor's detail panel. Three of
them already live inside LIGHT compositions, which is why their eyebrows are
marked `--light` unconditionally in the views — correct then, correct now.
What reaches them is inheritance, not a selector: J6.4 sets `--hl-eb-ink` on
the section root, and a custom property set on an ancestor does not stop at a
panel boundary. So a re-banded light section would hand these dark panels the
red-on-paper eyebrow meant for the band outside them. Re-asserting the
dark-ground values here is the whole fix, and it is the same shape as the
problem: one token, set closer to the element that reads it.
`.hl-sysfoot`'s ink is restated too, because J6.1 excludes it and its own
rules resolve to the light ramp only by virtue of not being overridden — that
is a guarantee worth writing down rather than inferring. */
.hl-section--reband
:is(.hl-sysfoot, .hl-wfeat, .hl-calcbox__result, .hl-fpanel){
--hl-eb-ink:var(--hl-navy-300);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-300),var(--hl-navy-500));
--hl-eb-glow:0 0 12px rgba(144,150,228,.45);
--hl-cn-ink:rgba(255,255,255,.16);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-sysfoot p{
color:var(--hl-text-light-3);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-sysfoot__contact a{
color:var(--hl-navy-300);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-sysfoot__contact a:hover{
color:#fff;
}
/* ===========================================================================
K · THE PRODUCT DETAIL TEMPLATE — hero discipline, gallery, chapter variants
---------------------------------------------------------------------------
The PDP is one shared template (resources/views/products/detail.php) built
from numbered chapters. This section carries what the chapters need that
the block vocabulary does not already provide:
K1 hero media discipline — a real photograph may not dominate the
viewport; it fits INTO the stage frame like everything else
K2 feature presentation variants — rows / checks / cards / tiles
K3 band inversions for chapters an administrator has re-banded
(the seeded rhythm is light overview / dark features / light specs /
navy built-for, and every component above was drawn for its seed)
K4 the light-hero guard — a hero re-banded to white must take its price,
maker and gallery chrome with it
Tokens that do NOT flip on `.hl-section--dark` (--hl-paper, --hl-line,
--hl-text-dark, --hl-text-body) are avoided in new components or given an
explicit dark override here — see layout.css for the flip list.
=========================================================================== */
/* ── K1 · HERO MEDIA DISCIPLINE ────────────────────────────────────────────
The stage is a fixed-height alcove, not a canvas the upload inflates. A
2000×1000 lifestyle shot and a 300×800 portrait both land inside the same
frame at comparable scale: contain behaviour, internal padding, and a hard
cap so no photograph ever pushes the hero past one viewport. */
.hl-pdphero .hl-rstage__frame{ position:relative; z-index:2; }
.hl-pdphero .hl-rstage__slot{ min-height:280px; }
.hl-pdphero .hl-rstage__slot img{ max-height:380px; }
.hl-pdphero .hl-shero__viz.hl-ihero__viz{ width:100%; max-width:520px; margin-inline:auto; }
/* ── K2 · FEATURE PRESENTATION VARIANTS ────────────────────────────────────
One structured list, four approved treatments. The admin enters label +
detail + optional icon; this decides what that becomes. */
.hl-pfeat--checks{
grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap:0 clamp(20px, 3vw, 44px);
}
.hl-pfeat--checks .hl-pfeat__row{
background:none; border:0; border-bottom:1px solid var(--hl-line-dark);
border-radius:0; padding:12px 2px;
}
.hl-pfeat--cards,
.hl-pfeat--tiles{
grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr));
gap:clamp(14px, 1.8vw, 22px);
}
.hl-pfeat__card{
min-width:0; padding:20px 18px; background:#fff;
border:1px solid var(--hl-line); border-radius:var(--hl-r-xl);
box-shadow:var(--hl-sh-sm);
}
.hl-pfeat__ico{ display:block; width:22px; height:22px; margin:0 0 12px; color:var(--hl-brand-red); }
.hl-pfeat__card b{ display:block; font:600 var(--hl-fs-body)/1.35 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-pfeat__card i{ display:block; margin-top:5px; font-style:normal; font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-muted); }
/* Tiles: the dense variant — quiet ground, a navy rule where the card's top
edge would be, no shadow. */
.hl-pfeat--tiles{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 215px), 1fr)); }
.hl-pfeat--tiles .hl-pfeat__card{
background:transparent; border:1px solid var(--hl-line);
border-top:2px solid var(--hl-brand-navy); border-radius:var(--hl-r-lg);
box-shadow:none; padding:16px;
}
/* The dark-band forms of every treatment. Features seed onto deep navy, so
these are the DEFAULTS in practice; the light forms above are what a
re-banded chapter gets. */
.hl-section--dark .hl-pfeat__row,
.hl-section--brand .hl-pfeat__row{
background:rgba(255,255,255,.045); border-color:var(--hl-line-dark-2);
}
.hl-section--dark .hl-pfeat__txt b,
.hl-section--brand .hl-pfeat__txt b{ color:#fff; }
.hl-section--dark .hl-pfeat__txt i,
.hl-section--brand .hl-pfeat__txt i{ color:var(--hl-text-light-3); }
.hl-section--dark .hl-pfeat__card,
.hl-section--brand .hl-pfeat__card{
background:rgba(255,255,255,.05); border-color:var(--hl-line-dark-2); box-shadow:none;
}
.hl-section--dark .hl-pfeat__card b,
.hl-section--brand .hl-pfeat__card b{ color:#fff; }
.hl-section--dark .hl-pfeat__card i,
.hl-section--brand .hl-pfeat__card i{ color:var(--hl-text-light-3); }
.hl-section--dark .hl-pfeat--tiles .hl-pfeat__card,
.hl-section--brand .hl-pfeat--tiles .hl-pfeat__card{
background:transparent; border-top-color:var(--hl-navy-300);
}
/* ── K3 · CHAPTER BAND INVERSIONS ───────────────────────────────────────────
Specifications seed onto light, Built For onto navy — the opposite of how
their components were first drawn. These overrides make each component
correct on EITHER family, which is what makes the per-chapter band selects
safe to offer at all. */
.hl-section--light .hl-pspecs__title,
.hl-section--alt .hl-pspecs__title{ color:var(--hl-brand-navy); }
.hl-section--light .hl-pspecs__row,
.hl-section--alt .hl-pspecs__row{ border-bottom-color:var(--hl-line); }
.hl-section--light .hl-pspecs__row dt,
.hl-section--alt .hl-pspecs__row dt{ color:var(--hl-text-muted); }
.hl-section--light .hl-pspecs__row dd,
.hl-section--alt .hl-pspecs__row dd{ color:var(--hl-text-dark); }
.hl-section--dark .hl-puse__card,
.hl-section--navy .hl-puse__card,
.hl-section--brand .hl-puse__card{
background:rgba(255,255,255,.05); border-color:var(--hl-line-dark-2); box-shadow:none;
}
.hl-section--dark .hl-puse__title,
.hl-section--navy .hl-puse__title,
.hl-section--brand .hl-puse__title{ color:#fff; }
.hl-section--dark .hl-puse__text,
.hl-section--navy .hl-puse__text,
.hl-section--brand .hl-puse__text{ color:var(--hl-text-light-3); }
.hl-section--dark .hl-puse__ico,
.hl-section--navy .hl-puse__ico,
.hl-section--brand .hl-puse__ico{ color:var(--hl-red-400); }
.hl-section--dark .hl-pdpfin,
.hl-section--navy .hl-pdpfin,
.hl-section--brand .hl-pdpfin{
background:rgba(255,255,255,.04); border-color:var(--hl-line-dark-2); box-shadow:none;
}
.hl-section--dark .hl-pdpfin__title,
.hl-section--navy .hl-pdpfin__title,
.hl-section--brand .hl-pdpfin__title{ color:#fff; }
.hl-section--dark .hl-pdpfin__note,
.hl-section--navy .hl-pdpfin__note,
.hl-section--brand .hl-pdpfin__note{ color:var(--hl-text-light-2); }
.hl-section--dark .hl-pdpfin__disc,
.hl-section--navy .hl-pdpfin__disc,
.hl-section--brand .hl-pdpfin__disc{ color:var(--hl-text-light-3); }
.hl-section--dark .hl-pdpfin .hl-eyebrow,
.hl-section--navy .hl-pdpfin .hl-eyebrow,
.hl-section--brand .hl-pdpfin .hl-eyebrow{ color:var(--hl-navy-300); }
/* ── K4 · THE LIGHT-HERO GUARD ──────────────────────────────────────────────
The product hero is drawn for deep navy. An administrator who re-bands it
to Light or Soft light gets these corrections with the band — the J6
mechanism covers the headline, lede and crumb; the price ladder, maker line
and gallery chrome are PDP-specific and live here instead. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-pdp__maker, .hl-pdp__price i, .hl-pdp__price small, .hl-rstage__foot){
color:var(--hl-text-muted);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-pdp__price b{ color:var(--hl-ink-900); }
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-pdp__call{ color:var(--hl-brand-navy); }
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-shero__h1 em{ color:var(--hl-navy-600); }
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-chips li{
color:var(--hl-text-body); background:var(--hl-paper); border-color:var(--hl-line);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-pgal__thumb{
background:var(--hl-paper); border-color:var(--hl-line);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-pgal__thumb:hover{ background:var(--hl-paper-2); }
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-infra{ opacity:.16; }
/* ── K5 · RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width:760px){
/* The stage shrinks WITH the phone rather than dominating it, and the
gallery stays thumb-sized enough to keep four in view. */
.hl-pdphero .hl-shero__viz.hl-ihero__viz{ max-width:440px; }
.hl-pdphero .hl-rstage__slot{ min-height:210px; }
.hl-pdphero .hl-rstage__slot img{ max-height:260px; }
.hl-pgal{ gap:6px; }
.hl-pgal__thumb{ width:48px; height:48px; }
/* Checks and tiles collapse to one column before they get cramped — a
check row needs its hairline to read, and two-up tiles under 215px
truncate labels. */
.hl-pfeat--checks{ grid-template-columns:minmax(0,1fr); }
.hl-pfeat--cards,
.hl-pfeat--tiles{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:420px){
.hl-pgal__thumb{ width:42px; height:42px; padding:4px; }
}
@media (prefers-reduced-motion:reduce){
.hl-pgal__thumb{ transition:none; }
}
/* ===========================================================================
L · PAGE START, INHERITED INK, AND THE BANDS BETWEEN CHAPTERS
---------------------------------------------------------------------------
Added by the visual correction pass. Three defect families, each fixed once
at the layer that causes it rather than at the places it showed up:
L1 headings that took body ink on a dark band and vanished
L2 the header's hairline sitting OUTSIDE the height every hero pulls up by
L3 chapter rhythm — the vertical space between a chapter head and its
content, which several sections had far too much of
Every rule here is either a token re-point or a spacing correction. Nothing
introduces a colour an administrator did not already have, and nothing adds
a control.
=========================================================================== */
/* ── L1 · HEADING INK FOLLOWS THE BAND ─────────────────────────────────────
`:where(body.hl-body) h1…h4` sets the heading colour for every heading that
does not carry a component class naming one. Its specificity (0,0,1) beats
INHERITANCE, so `.hl-section--dark { color: … }` never reached those
headings — and five published pages rendered an H1 in #0A0E24 on a #0A0B1F
hero at 1.02:1. /terms, /privacy-policy, /easysign, /system/404 and
/system/maintenance were all completely headless to a reader.
The base rule now resolves through `--hl-heading-ink`, so a band re-points
the token instead of fighting the cascade. A component that names its own
colour is untouched; a component that relies on inheritance now inherits
something correct. */
.hl-section--dark,
.hl-section--brand,
.hl-on-dark,
.hl-footer,
.hl-drawer,
.hl-announce,
.hl-promo-modal__card{ --hl-heading-ink:var(--hl-text-light); }
/* A light island inside a dark chapter keeps dark heading ink: the token
inherits across the panel boundary exactly the way J6.5 describes for
eyebrows, and a white heading on a white card is the same bug in the other
direction. Islands are named rather than guessed, and each one is a panel
that paints an opaque light ground of its own. */
.hl-section--dark :is(.hl-pcard, .hl-card, .hl-panel--light, .hl-mega, .hl-dropdown,
.hl-form, .hl-note--light, .hl-tile--light),
.hl-section--brand :is(.hl-pcard, .hl-card, .hl-panel--light, .hl-mega, .hl-dropdown,
.hl-form, .hl-note--light, .hl-tile--light){
--hl-heading-ink:var(--hl-text-dark);
}
/* The other direction: a section re-banded onto a light ground by an
administrator (J6) must take dark heading ink back, because the marker class
sits on the same element as the `--dark` class it replaced. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt){ --hl-heading-ink:var(--hl-text-dark); }
/* ── L2 · THE HEADER'S OWN HEIGHT ──────────────────────────────────────────
`.hl-header` is `position:sticky`, so it OCCUPIES flow space, and every dark
opening hero cancels that space with `margin-top:calc(var(--hl-nav-h) * -1)`
and gives it back as padding. The header's 1px bottom border made its border
box 1px TALLER than `--hl-nav-h`, so every one of those pull-ups landed a
pixel short and left a hairline of white page background across the top of
the hero, under the announcement bar, on every page.
Moving the hairline to a pseudo-element makes the border box exactly
`--hl-nav-h` — which is the number the rest of the stylesheet already
assumes — and paints the same line in the same place. */
.hl-header{ border-bottom-width:0; }
.hl-header::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
background:transparent; pointer-events:none;
transition:background-color var(--hl-t-med) var(--hl-e-soft);
}
.hl-header:not(.hl-header--over-hero)::after,
.hl-header.is-stuck::after{ background:var(--hl-line-dark); }
/* The mega panel hangs off `top:100%`, which is now 1px higher; the panel's own
top border keeps the join reading as one edge. */
/* ── L4 · THE GLASS PANELS RAISE THE FLOOR ─────────────────────────────────
The approved diagram panels are translucent surfaces floating ON a dark
chapter — `rgba(42,45,124,.34)` over navy, `rgba(255,255,255,.05)` nodes on
top of that. Their interior sits several steps lighter than the band around
them, so the two quiet inks that clear 4.5:1 against the band do NOT clear it
inside the panel: the acceptance diagram's captions measured 3.8:1 on every
service page, and the home page's payment-flow cards 3.2:1.
The token, not the rules, is what moves — the same shape as J6.5. Each panel
re-points the quiet inks for its own interior, so every caption, unit, index
and footnote inside it follows without a single one being named. */
.hl-accv,
.hl-corenode,
.hl-ipanel,
.hl-fchart,
.hl-mini,
.hl-pz{
--hl-text-light-3:rgba(255,255,255,.74);
--hl-text-light-4:rgba(255,255,255,.64);
}
/* The home page's floating payment cards sit on the lightest ground of the set
— a navy gradient that reaches #434891 — so they need one step more again. */
.hl-ecard{
--hl-text-light-3:rgba(255,255,255,.82);
--hl-text-light-4:rgba(255,255,255,.72);
}
/* Two accents inside those panels are hues rather than tints, so they cannot be
fixed by an alpha. The step index sits in a red-tinted chip on a violet card
at 3.92:1 in `--hl-red-300`; the chip keeps its brand tint and the numeral
takes the white the neighbouring card labels already use. */
.hl-ecard__step{ color:#fff; }
.hl-ipanel__kicker{ color:#B9BDF0; }
/* ── L5 · THE LAST TWO CONTRAST HOLD-OUTS ─────────────────────────────────
`.hl-btn--link-light` is the text-link button on a dark band. It was painted
in `--hl-red-400`, which is 4.19:1 on the navy panel it is used on — the same
family of defect J4.6 fixed for the light-band text link, one ramp step short.
`--hl-red-300` is the dark-band member of that pair and clears 7:1. */
.hl-btn--link-light{ --hl-btn-ink:var(--hl-red-300); color:var(--hl-red-300); }
.hl-btn--link-light:hover,
.hl-btn--link-light:focus-visible,
.hl-btn--link-light:active{ --hl-btn-ink:#fff; color:#fff; }
/* The product card's "Most requested" chip: brand red on a 6%-red ground is
4.49:1, which is a rounding error away from AA and reads as a pass in a
screenshot. One ramp step down on the ink clears it at 5.6:1 and is
indistinguishable at 11px. */
.hl-pcard__badge{ color:var(--hl-red-600); }
/* ===========================================================================
M · PRODUCT DETAIL COMPOSITION
---------------------------------------------------------------------------
The chapter architecture was right; its proportions were not. Every rule
below is a spacing or a track-count correction to a composition that already
existed — no new component, no new control, and nothing that changes what an
administrator can choose.
=========================================================================== */
/* ── M1 · THE CHAPTER HEAD ─────────────────────────────────────────────────
`.hl-ihead` reserves `--hl-s-14` under itself, which is right for a chapter
that opens with a wide diagram and far too much for one that opens with a
list. On the product page it read as a heading marooned above its own
content — the "very large empty area before the actual feature content" in
the review. The gap is now proportional and the numeral column stops eating
a third of the measure on a narrow chapter. */
.hl-pdp-chapter .hl-ihead{ margin-bottom:clamp(24px,2.6vw,40px); }
.hl-pdp-chapter .hl-ihead__lede{ margin-top:var(--hl-s-4); max-width:56ch; }
/* ── M2 · KEY FEATURES ─────────────────────────────────────────────────────
Two columns from 900px up, one below it, for every treatment. `rows` was a
single column at ANY width, so four short labels became four full-bleed bars
with a thousand pixels of empty space to the right of each one. */
@media (min-width:900px){
.hl-pfeat{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px clamp(18px,2vw,28px); }
.hl-pfeat--checks{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1280px){
/* Three columns only when the entries are short enough to keep a sane
measure — the check list — and never for detailed cards, whose paragraphs
need the width. */
.hl-pfeat--checks{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:899px){
.hl-pfeat,
.hl-pfeat--checks,
.hl-pfeat--cards,
.hl-pfeat--tiles{ grid-template-columns:minmax(0,1fr); }
}
/* A check row carries a label and nothing else, so it does not need a card's
padding; the hairline and the tick are the whole affordance. */
.hl-pfeat--checks .hl-pfeat__row{ align-items:center; }
.hl-pfeat--checks .hl-pfeat__txt b{ font-size:var(--hl-fs-sm); }
/* ── M3 · SPECIFICATIONS ───────────────────────────────────────────────────
The definition list ran the full width with the value column starting at
about 45%, so three specifications occupied a 1,200px band and left most of
it blank. Capped to a readable measure and paired up on desktop. */
.hl-pspecs{ max-width:960px; }
@media (min-width:900px){
.hl-pspecs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* One group on its own should not be stretched across both tracks. */
.hl-pspecs__group:only-child{ grid-column:1 / -1; max-width:640px; }
}
/* ── M4 · FINANCING ────────────────────────────────────────────────────────
The chapter now carries a standard head, so the card holds only the note,
the disclaimer and the action — and it no longer needs a heading's worth of
padding above them. */
.hl-pdpfin{ padding:clamp(22px,2.4vw,34px); align-items:center; }
.hl-pdpfin__copy{ max-width:70ch; }
.hl-pdpfin__note{ margin:0 0 var(--hl-s-3); }
/* ── M5 · RELATED EQUIPMENT ────────────────────────────────────────────────
`auto-fill` with a 280px track gives four columns at 1440px, so three
related devices sat in three of four tracks with an empty column beside
them. The related row is a fixed three-up on desktop: the repository asks
for three, so the grid should be built for three. */
@media (min-width:1024px){
.hl-pgrid--rel{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width:640px) and (max-width:1023px){
.hl-pgrid--rel{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* ── M6 · THE TERTIARY ACTION ──────────────────────────────────────────────
"The Account Behind It" leaves the device, so it is a text-arrow link under
the pair rather than a third pill wrapping onto its own line.
`.hl-link-arrow` predates the approved arrow glyph and animates a child
called `.hl-link-arrow__icon`; every other arrow on this site is
`.hl-arrow`, and that is what the views emit. Without this the tertiary
link would be the one arrow on the page that does not move. */
.hl-pdp__tertiary{ margin:var(--hl-s-6) 0 0; display:flex; flex-wrap:wrap; gap:var(--hl-s-6); }
.hl-pdp__tertiary--center{ justify-content:center; margin-top:var(--hl-s-6); }
.hl-link-arrow .hl-arrow{ transition:transform var(--hl-t-med) var(--hl-e-out); }
.hl-link-arrow:hover .hl-arrow{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
.hl-link-arrow .hl-arrow{ transition:none; }
.hl-link-arrow:hover .hl-arrow{ transform:none; }
}
/* ── M7 · THE HERO ─────────────────────────────────────────────────────────
Compact and balanced: the copy column keeps a readable measure, the chips
sit tight under the actions, and the stage never grows past the copy beside
it. */
.hl-pdphero .hl-shero__shell{ padding-block:clamp(36px,3.6vw,60px) var(--hl-hero-air); }
.hl-pdphero .hl-shero__h1{ margin-bottom:var(--hl-s-4); }
.hl-pdphero .hl-pdp__maker{ margin:0 0 var(--hl-s-4); }
.hl-pdphero .hl-shero__lede{ margin-bottom:var(--hl-s-6); max-width:46ch; }
/* The chips' own top margin used to be set here, for this hero only, because
the shared `.hl-chips` margin was being suppressed site-wide (see the list
reset near the top of this file). Section N now gives every chip list the
same `--hl-flow-tight` step, so the PDP-only patch is gone and this hero is
no longer a special case. */
/* ── M8 · THE CLOSING BAND ON EITHER FAMILY ────────────────────────────────
`.hl-pdpend` hard-coded `#fff` for its heading and a light-band ink for its
copy, which is correct on the deep navy it is pinned to and invisible the
moment the band is anything else. The band is an administrator's choice, so
the component has to work on both families — the same guarantee K3 gives the
specification list and the use-case cards. */
.hl-section--light .hl-pdpend__title,
.hl-section--alt .hl-pdpend__title{ color:var(--hl-text-dark); }
.hl-section--light .hl-pdpend__text,
.hl-section--alt .hl-pdpend__text{ color:var(--hl-text-body); }
/* The financing card is drawn for a light band; on a dark one it becomes the
translucent panel the rest of the dark chapters use. That rule already
existed for `--dark`/`--navy`/`--brand`; what it lacked was the disclaimer. */
.hl-section--dark .hl-pdpfin__disc,
.hl-section--navy .hl-pdpfin__disc,
.hl-section--brand .hl-pdpfin__disc{ color:var(--hl-text-light-4); }
/* ── M9 · THE CARD BADGE AS A FLAG ─────────────────────────────────────────
Pinned to the media stage so it costs no flow height and every card in a row
keeps its title, copy and affordance on the same baselines. The stage is
already a fixed alcove (`--hl-pslot-h`), so nothing here can change a card's
height whatever the artwork is. */
.hl-pcard__art{ position:relative; }
.hl-pcard__badge--flag{
position:absolute; top:0; left:0; z-index:2;
background:var(--hl-red-500); color:#fff;
box-shadow:0 6px 16px -8px rgba(207,41,39,.9);
}
.hl-section--dark .hl-pcard__badge--flag{ background:var(--hl-red-500); color:#fff; }
/* ── M10 · CHECKS ARE HAIRLINE ROWS ON EVERY BAND ──────────────────────────
K2 draws the compact list as hairline rows, and then the dark-band form of
`.hl-pfeat__row` — written for the `rows` treatment — re-filled them,
because the two selectors carry the same specificity and the dark one is
later in the file. So the same treatment was a filled chip on a dark chapter
and a hairline row on a light one. It is a hairline row on both. */
.hl-section--dark .hl-pfeat--checks .hl-pfeat__row,
.hl-section--brand .hl-pfeat--checks .hl-pfeat__row{
background:none; border:0; border-bottom:1px solid var(--hl-line-dark-2);
border-radius:0; padding:12px 2px;
}
/* ── M11 · HEADING INK REACHES EVERY SECTION HEADING ───────────────────────
J3 declares `--hl-hd-ink`, and exactly two classes read it:
`.hl-shead__title` and `.hl-ihead__title`. Every other section composition
names its own heading class and hard-codes a colour — `.hl-price__title` is
`#fff`, and there are a dozen more like it — so "Heading colour" was an
Admin control that did nothing on most of the site. A control test that set
all three values on a `content · steps` chapter measured one colour, three
times.
Two things have to be true at once, and that is why this is four rules
rather than one.
It has to WIN. A composition's own title class is (0,1,0), and on a
re-banded section J6.1's legibility remap is (0,3,0). So the pairs below are
(0,2,1) and (0,3,1) respectively — `:is(h1,h2)` contributes one element,
which is the cheapest way past both.
It has to stay SAFE. J3 offers three inks and no custom value precisely
because a heading is the one element that cannot be allowed to fail
legibility, so each rule matches only the ink that suits the band it is on:
ink and navy on a light ground, white on a dark one. An unsafe pairing
simply does not match, and the automatic answer — which is always legible —
stands. That is the same shape as J6.4: automatic, overridable, in that
order, and only where the override is sound.
Card headings are h3/h4 throughout the design system and are untouched;
this is the SECTION heading control. */
/* Light ground, dark ink. The exclusion list is the set of compositions that
paint a dark ground of their own: on those, `--light` without a re-band is a
label rather than a fact (J6 leaves their artwork alone by design), so dark
ink there would be dark-on-dark. Re-banded, they are genuinely light, which
is what the second rule is for. */
:is(.hl-section--light, .hl-section--alt):is(.hl-hd--ink, .hl-hd--navy):not(.hl-final,
.hl-floor,.hl-flow,.hl-fund,.hl-hero--highline,.hl-ihero,.hl-ind,.hl-ioffer,
.hl-net-sec,.hl-price,.hl-rfund,.hl-shero,.hl-sys) :is(h1, h2){
color:var(--hl-hd-ink, inherit);
}
.hl-section--reband:is(.hl-section--light, .hl-section--alt):is(.hl-hd--ink, .hl-hd--navy) :is(h1, h2){
color:var(--hl-hd-ink, inherit);
}
/* Dark ground, white ink. */
:is(.hl-section--dark, .hl-section--navy, .hl-section--brand).hl-hd--white :is(h1, h2){
color:var(--hl-hd-ink, inherit);
}
.hl-section--reband:is(.hl-section--dark, .hl-section--navy, .hl-section--brand).hl-hd--white :is(h1, h2){
color:var(--hl-hd-ink, inherit);
}
/* ── M12 · AN UNSAFE ACCENT CHOICE IS IGNORED, NOT OBEYED ──────────────────
J6.1 and J6.4 now step aside whenever an explicit accent class is present,
which is what makes those controls work at all. On its own that would hand
an editor a way to pick white type for a paper band — the exact failure
requirement 16 forbids, arriving through the door that was opened to fix a
different one.
So the pairings that cannot hold are neutralised here, on the band rather
than at the call site: the automatic answer is restored and the selection is
simply not applied. Nothing warns, because there is nothing to warn about —
a heading cannot be allowed to fail legibility, which is why J3 offers no
custom heading colour in the first place.
The chapter numeral is deliberately NOT filtered. It is `aria-hidden`
decoration drawn as a 1.4px outline at low contrast by design; a quiet one
is a quiet one, and there is no reading to fail. */
/* Eyebrow: the two light inks cannot sit on a paper band, and the three dark
ones cannot sit on navy — `--hl-navy-500` on the deep-navy band measures
2.22:1, which a control test found before anyone had to look at it. */
:is(.hl-section--light, .hl-section--alt):is(.hl-eb--light, .hl-eb--white){
--hl-eb-ink:var(--hl-brand-red);
--hl-eb-bar:linear-gradient(180deg,var(--hl-red-400),var(--hl-red-600));
--hl-eb-glow:0 0 12px rgba(207,41,39,.6);
}
:is(.hl-section--dark, .hl-section--navy, .hl-section--brand):is(.hl-eb--red, .hl-eb--muted, .hl-eb--navy){
--hl-eb-ink:var(--hl-navy-300);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-300),var(--hl-navy-500));
--hl-eb-glow:0 0 12px rgba(144,150,228,.45);
}
/* Heading: white on paper, and either dark ink on navy. The re-banded forms
carry a third class so they outrank J6.1's (0,4,0) remap list. */
:is(.hl-section--light, .hl-section--alt).hl-hd--white :is(h1, h2){ color:var(--hl-ink-900); }
.hl-section--reband:is(.hl-section--light, .hl-section--alt).hl-hd--white :is(h1, h2){ color:var(--hl-ink-900); }
:is(.hl-section--dark, .hl-section--navy, .hl-section--brand):is(.hl-hd--ink, .hl-hd--navy) :is(h1, h2){ color:var(--hl-text-light); }
.hl-section--reband:is(.hl-section--dark, .hl-section--navy, .hl-section--brand):is(.hl-hd--ink, .hl-hd--navy) :is(h1, h2){ color:var(--hl-text-light); }
/* ── M13 · THE GENERIC HERO'S HEADLINE ─────────────────────────────────────
`blocks/hero.php` now runs its heading through `approved_headline()` like
every other hero variant, so the `*emphasis*` and `//line break` conventions
this project's headline copy is written in finally reach it — the 404 page
read "That Page Is *Not Here*." until this pass.
`:where(body.hl-body) em{font-style:normal}` would have rendered the emphasis
identically to the words around it, which is a marker that has been removed
rather than honoured, so it takes the same accent the service hero gives it. */
.hl-heroblock__title em{ font-style:normal; color:var(--hl-navy-300); }
:is(.hl-section--light, .hl-section--alt) .hl-heroblock__title em{ color:var(--hl-brand-navy); }
.hl-heroblock__title .hl-line{ display:block; }
/* ── M14 · THE TEXT LINK ON THE TWO MID-NAVY BANDS ─────────────────────────
J4.6 treats every dark band as one case and gives them all `--hl-red-400`.
That is right on deep navy (#04050E–#0A0B1F) and wrong on the two bands that
climb into mid navy:
Highline navy #1B1E45 → #2A2D7C red-400 measures 3.24:1 at the top
Brand gradient #2A2D7C → #565AC2 worse again
And the next step up the ramp makes it worse rather than better — red-300 on
#565AC2 is 2.75:1 — because a light red and a mid navy converge instead of
separating. There is no member of the red family that holds here.
So on those two bands the text link is white. The underline the component
grows on hover is still the state change, so nothing about the interaction
moves; only the ink, to the one value that clears 5.7:1.
Found by `public/_review-buttons.php`, which renders every variant on every
band precisely because the site-wide sweep can only measure the combinations
that happen to be in use — and no live page currently puts a text link on
either of these two. */
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link,
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link:hover,
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link:focus-visible,
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link:active{ --hl-btn-ink:var(--hl-text-light); }
:is(.hl-section--navy, .hl-section--brand).hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm),
:is(.hl-section--navy, .hl-section--brand).hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-text-light);
}
/* The same two bands, the same reason, for the other red-on-navy link. */
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link-light{ --hl-btn-ink:var(--hl-text-light); color:var(--hl-text-light); }
/* ── M15 · THE TWO MID-NAVY BANDS CARRY LIGHTER QUIET INK ──────────────────
`--hl-text-light-3` and `--hl-text-light-4` are tuned for the deep-navy
family (#04050E–#12142E), where they clear AA comfortably. Highline navy
climbs to `--hl-primary` (#2A2D7C) and the brand gradient to
`--hl-secondary` (#565AC2), and a tint tuned for near-black does not survive
either: the product page's financing disclaimer measured 3.74:1 the moment
the automatic rhythm put that chapter on Highline navy.
Same shape as L4 — the band re-points the tokens for its own interior, so
every disclaimer, caption and unit inside it follows without one of them
being named. Brand is a step further again because it is a genuinely light
ground; a "quiet" ink there is quiet only by comparison.
The eyebrow is the same problem in a hue rather than a tint: `--hl-navy-300`
is 4.35:1 on #2A2D7C. It steps aside for an explicit `.hl-eb--*` class the
way J6.4 does, so the Admin control still wins — and M12 still stops an
unsafe choice. */
.hl-section--dark.hl-section--navy{
--hl-text-light-3:rgba(255,255,255,.76);
--hl-text-light-4:rgba(255,255,255,.66);
}
.hl-section--brand{
--hl-text-light-3:rgba(255,255,255,.90);
--hl-text-light-4:rgba(255,255,255,.84);
}
.hl-section--dark.hl-section--navy:not([class*="hl-eb--"]),
.hl-section--brand:not([class*="hl-eb--"]){
--hl-eb-ink:#B9BDF0;
--hl-eb-bar:linear-gradient(180deg,#B9BDF0,var(--hl-navy-400));
--hl-eb-glow:0 0 12px rgba(185,189,240,.45);
}
/* ── M16 · THE OVERVIEW HAS A MEASURE ──────────────────────────────────────
`.hl-pdp__copy--wide` was a class the template emitted and nothing styled,
so the overview ran the full 1,280px container — around 150 characters a
line, roughly twice what is comfortable to read, and the widest running text
anywhere on the site. Visible the moment a device had a real description:
five of the six had none, so nothing had ever filled that band.
The two measures follow the ones the rest of the system already uses: the
chapter lede is 62ch, so body prose sits a little wider and the "wide"
modifier a little wider again — a modifier that now means something. */
/* Corrected in the final composition pass. `68ch`/`78ch` measured 94 and 108
characters a line — see the note on --hl-measure-editorial in tokens.css for
why a ch-based measure at body size renders ~39% wider than it reads. These
two land at roughly 75 and 85 characters, which is the range the brief asks
for and the range the rest of the system's ledes already sit in. */
.hl-pdp__copy{ max-width:54ch; }
.hl-pdp__copy--wide{ max-width:61ch; }
/* ===========================================================================
N · VERTICAL RHYTHM CONTRACT
---------------------------------------------------------------------------
Where one content group ends and the next begins.
The section padding (`--hl-sec-pad`) governs the space around a chapter, and
the typography margins govern the space between lines of prose. Nothing
governed the space between GROUPS — a paragraph and the action row under it,
an action row and the chips under that — so every action row on the site was
`display:flex; gap:…` and nothing else, and its vertical position was
whatever the element above it happened to leave behind. That produced 32px in
nineteen places, 24px in six, 20px in three and 0px in seven, from the same
intended relationship.
So this is not a new scale. 32px is what the composition already used most
often; the contract names it and applies it where the accident produced less.
HOW THE FLOOR WORKS. In normal flow, adjacent siblings' vertical margins
collapse to the larger of the two. A `margin-top:var(--hl-flow)` on the lower
group therefore RAISES a 0 or 20px gap to 32px and LEAVES a deliberate 40px
or 48px alone — which is what a floor should do, and why the closing CTA
composition below keeps its wider setting without being listed as an
exception. Flex and grid parents do not collapse margins, so a container that
already spaces its children with `gap` owns the flow there and its children
opt out; those are named at the end.
=========================================================================== */
/* ── N1 · THE GROUP PRIMITIVES ─────────────────────────────────────────────
An action row — a row of buttons or button-styled links that acts on the
copy above it. This is the allowlist, in the same spirit as the section and
accent class allowlists: a component joins the rhythm by being named here,
not by matching a pattern.
Chrome is deliberately absent. The header, announcement bar, sticky rail,
promotional modal and mobile drawer lay their actions out horizontally
against a fixed height, and a 32px block margin would push them out of it. */
:is(
.hl-hero__cta, .hl-hero__actions, .hl-shero__cta, .hl-heroblock__actions,
.hl-content__actions, .hl-cta__actions, .hl-about__actions,
.hl-funding__actions, .hl-form__actions,
.hl-price__cta, .hl-cd__cta, .hl-ioffer__cta, .hl-fund__cta,
.hl-story__cta, .hl-pdpend__cta, .hl-ipanel__foot, .hl-hw__leadcta,
.hl-final__cta
):not(:first-child){
margin-top:var(--hl-flow);
}
/* ── N2 · SUBORDINATE GROUPS ───────────────────────────────────────────────
Chips, tags and the fine print that qualifies the group above them are not
peers of it — they are attached to it, and they read as a separate group at
a smaller step than two peers need. `.hl-chips` already declared exactly
this value; re-pointing it at the token leaves the rendering identical and
removes the second place the number was written down. */
.hl-chips{ margin:var(--hl-flow-tight) 0; }
:is(.hl-final__chips, .hl-btile__chips, .hl-wtile__chips, .hl-pcard__tags):not(:first-child){
margin-top:var(--hl-flow-tight);
}
/* A disclaimer that follows an action row is separated by a hairline, so the
space above the rule is the group step and the space below it belongs to the
rule. `.hl-price__disc` set 20px above its own border, which read as the
fine print crowding the buttons rather than closing the block. */
.hl-price__cta + .hl-price__disc{ margin-top:var(--hl-flow); }
/* ── N3 · CONTAINERS THAT OWN THEIR OWN FLOW ───────────────────────────────
`gap` does not collapse with a margin, it adds to it. In a column that
already spaces its children, the contract margin would produce 52px from a
20px gap and a 32px floor, so the container sets the step instead and its
children stand down.
`.hl-wtile` and `.hl-pcard` are cards: a tighter internal rhythm is correct
there and the card's own gap is left as designed. */
.hl-hw__lead{ row-gap:var(--hl-flow); }
.hl-hw__lead > :is(.hl-hw__leadcta, .hl-chips){ margin-top:0; }
/* `.hl-wtile` is a flex column too, and a card wants a tighter internal rhythm
than a chapter does: added on top of the card's own spacing, the chip margin
put 44px between the chips and the text they belong to, inside a 26px-padded
box. The card already spaces them the way it was drawn, so the chips stand
down here rather than the card being re-spaced around them. */
.hl-wtile > :is(.hl-chips, .hl-wtile__chips){ margin-block:0; }
/* ── N4 · THE CLOSING CTA KEEPS ITS WIDER SETTING ──────────────────────────
Recorded rather than enforced. `.hl-final__cta` sits 40px under its lede and
`.hl-final__chips` 48px under the buttons, both from the preceding element's
own margin. Margin collapsing means N1's 32px floor cannot reduce either, so
the closing composition needs no exception — but the intent is written down
here so a later change to the floor is understood to affect it. */
/* ===========================================================================
O · THE SPACING PRESET, APPLIED
---------------------------------------------------------------------------
Sixteen of the approved compositions set `padding-block:var(--hl-sec-pad)` on
their own component class — `.hl-faq-sec`, `.hl-price`, `.hl-flow`, `.hl-cd`,
`.hl-ioffer`, `.hl-fund`, `.hl-net-sec`, `.hl-acc`, `.hl-hw`, `.hl-hw2`,
`.hl-sys`, `.hl-ind`, `.hl-calc`, `.hl-revs`, `.hl-floor`, `.hl-rhw`. This
file loads after layout.css, so on a specificity tie those rules beat
`.hl-section--compact` and `.hl-section--roomy`, and the Spacing select did
nothing at all on any of them. It was a control that looked like it worked.
The correction is the one section J6 already makes for the band: the preset
wins where an administrator has CHANGED it, and nowhere else. `section_classes()`
emits `--respace` only when the stored value differs from the one the block
ships with, so an untouched page renders exactly the bytes it rendered
before — this section adds rules rather than editing the sixteen it beats.
`padding-block` is the only property touched. A composition's ground, glows,
rails and internal layout are its own.
=========================================================================== */
/* `none` is deliberately absent.
On a plain block it already means zero, from layout.css, because nothing
else declares padding there. On one of the sixteen it means "the composition
sets its own" — which is what the preset is labelled, and what these
sections have always done. Forcing zero here instead collapsed every FAQ
chapter on the site the moment the marker started being emitted, because the
seeds store `none` on exactly those sections: the value was chosen while the
control was inert, and it meant "leave this alone" then too. */
.hl-section--respace.hl-section--compact { padding-block:var(--hl-sec-pad-compact); }
.hl-section--respace.hl-section--normal { padding-block:var(--hl-sec-pad-normal); }
.hl-section--respace.hl-section--roomy { padding-block:var(--hl-sec-pad-roomy); }
.hl-section--respace.hl-section--spacious { padding-block:var(--hl-sec-pad-spacious); }
/* A hero puts its padding on the inner shell so the stage can bleed past it.
Re-spacing the section would add to that rather than replace it, so the
shell stands down and the preset owns the band — but only where a preset is
actually being applied, which `none` is not. */
.hl-section--respace:not(.hl-section--none) :is(.hl-shero__shell, .hl-hero__shell){
padding-block:0;
}
/* ── N4.1 · THE RE-SPACED HERO STILL HAS TO CLEAR THE HEADER ───────────────
The header is transparent and sticky, and a dark opening hero deliberately
sits UNDER it: `.hl-heroblock--under-header` (section E5) pulls the section
up by the header's height and pays it back as padding, so the breadcrumb and
the H1 start below the nav rather than behind it.
That padding is a single class, (0,1,0). The preset rules immediately above
are (0,2,0) and land later in the file, so on any hero whose Spacing has
been changed from its default the preset REPLACED the offset instead of
adding to it — and the section kept its negative margin. The result was a
breadcrumb rendering 28px above the bottom of the header at 1440 and 20px at
390: not clipped, not overlapped, simply behind it.
Seven pages were affected, all of them `hero · centered` with a stored
Spacing — the four legal documents, the 404 and the maintenance page (the
two a lost visitor is most likely to see), and one draft landing page.
The fix restates each preset WITH the header offset added, at (0,3,0) so it
outranks the preset it is correcting. `none` is included because a hero
carrying `none` still needs to clear the header — it just adds nothing else. */
.hl-section--respace.hl-heroblock--under-header.hl-section--none{
padding-top:var(--hl-header-height, 4.5rem);
}
.hl-section--respace.hl-heroblock--under-header.hl-section--compact{
padding-top:calc(var(--hl-header-height, 4.5rem) + var(--hl-sec-pad-compact));
}
.hl-section--respace.hl-heroblock--under-header.hl-section--normal{
padding-top:calc(var(--hl-header-height, 4.5rem) + var(--hl-sec-pad-normal));
}
.hl-section--respace.hl-heroblock--under-header.hl-section--roomy{
padding-top:calc(var(--hl-header-height, 4.5rem) + var(--hl-sec-pad-roomy));
}
.hl-section--respace.hl-heroblock--under-header.hl-section--spacious{
padding-top:calc(var(--hl-header-height, 4.5rem) + var(--hl-sec-pad-spacious));
}
/* ── N5 · RICH TEXT HAS A FLOOR ────────────────────────────────────────────
The editor writes prose; it should never have to write SPACE.
Paragraphs, lists, headings, quotes and tables all carry a margin, so an
editor typing normally gets a normal rhythm. What has no margin at all is
anything the reset flattened — an image or a figure, which `body.hl-body`
sets to `display:block; margin:0` — and anything the browser gives no
default to. Put an image between two paragraphs and it touches both, and the
only tool an editor has to fix that from inside a rich-text field is a run of
empty lines. That is the `
` hack, and it is a hack because the system
left a hole, not because the editor was careless.
This closes it the same way section N1 does: a `margin-top` on the following
sibling collapses with whatever the previous one already reserved, so it
RAISES a zero gap to one line and cannot reduce a deliberate 1.5em. The
heading rule in base.css is `.hl-rich h2` at (0,1,1) and still wins its
larger step; `:first-child` never matches `* + *`.
No stored content currently uses a doubled `
`; this is here so none ever
needs to. */
.hl-rich > * + *{ margin-top:1em; }
/* ===========================================================================
P · THE ENLARGED PRODUCT GALLERY
---------------------------------------------------------------------------
A `
: every answer is real crawlable text, it opens and closes
with no JavaScript at all, and keyboard and screen-reader semantics come from
the elements rather than from ARIA that has to be kept in step by hand. */
.hl-faq-sec{ position:relative; padding-block:var(--hl-sec-pad); background:#fff; }
.hl-faq-sec .hl-shell{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
gap:clamp(32px,3.6vw,72px); align-items:start; }
/* ── TWO-COLUMN BALANCE ────────────────────────────────────────────────────
`--hl-sticky-top` is the offset a travelling column needs to clear the
sticky header AND the sticky page rail. `.hl-faq__lead` invented it inline
and it works — measured on `/services/ach-echeck`, the lead pins at 186px
and holds there through 450px of scrolling — so the FAQ chapter's "void" is
a screenshot artefact rather than dead space a reader ever sees.
The token is named here so the other short columns can use the same
behaviour instead of each inventing a number. See the balance decisions
recorded beside `.hl-price__steps`, `.hl-check` and `.hl-formsec__aside`. */
:root{ --hl-sticky-top: calc(var(--hl-nav-h) + var(--hl-rail-h) + 28px); }
.hl-faq__lead{ position:sticky; top:var(--hl-sticky-top); min-width:0; }
html:not(:has(.hl-rail)) .hl-faq__lead{ top:calc(var(--hl-nav-h) + 28px); }
.hl-faq__copy{ margin:var(--hl-s-5) 0 var(--hl-s-8); font-size:var(--hl-fs-sm); line-height:1.7;
color:var(--hl-text-muted); max-width:38ch; }
.hl-faq-sec .hl-faq{ border-top:1px solid var(--hl-line); min-width:0; }
.hl-faq-sec .hl-faq__item{ border-bottom:1px solid var(--hl-line); }
.hl-faq-sec .hl-faq__question{
display:flex; align-items:center; justify-content:space-between; gap:20px;
width:100%; text-align:left; padding:22px 0; cursor:pointer; list-style:none;
font:700 clamp(1rem,1.25vw,1.18rem)/1.4 var(--hl-ff-display); color:var(--hl-text-dark);
letter-spacing:-.02em; transition:color var(--hl-t-fast);
}
.hl-faq-sec .hl-faq__question::-webkit-details-marker{ display:none; }
.hl-faq-sec .hl-faq__question:hover{ color:var(--hl-brand-red); }
/* Plus / minus drawn from two rules so it can rotate into a minus. */
.hl-faq-sec .hl-faq__icon{ position:relative; width:20px; height:20px; flex:none; }
.hl-faq-sec .hl-faq__icon::before,
.hl-faq-sec .hl-faq__icon::after{
content:""; position:absolute; left:50%; top:50%; width:13px; height:1.8px; border-radius:2px;
background:var(--hl-brand-red); transform:translate(-50%,-50%);
transition:transform var(--hl-t-med) var(--hl-e-out), opacity var(--hl-t-med);
}
.hl-faq-sec .hl-faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.hl-faq-sec .hl-faq__item[open] .hl-faq__icon::after{ transform:translate(-50%,-50%) rotate(0deg); opacity:0; }
.hl-faq-sec .hl-faq__answer{ overflow:hidden; }
.hl-faq-sec .hl-faq__answer .hl-rich{ padding:0 60px 24px 0; font-size:var(--hl-fs-sm); line-height:1.75;
color:var(--hl-text-body); max-width:70ch; }
.hl-faq-sec .hl-faq__answer .hl-rich p{ margin:0 0 1em; }
.hl-faq-sec .hl-faq__answer .hl-rich p:last-child{ margin-bottom:0; }
/* ── F12 · RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:1280px){
.hl-track__stops{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.hl-track__line{ display:none; }
.hl-stop::before{ display:none; }
}
@media (max-width:1120px){
.hl-switch{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
.hl-spanel{ grid-template-columns:minmax(0,1fr); }
/* `--art` and not `__art`: this centres a 280px device stage above the copy,
which is right for illustrative artwork and wrong for a photograph that is
meant to bleed to the panel's edges. Both variants carry `__art`, so the
unscoped selector was capping the photo at 280px too. */
.hl-spanel--art{ width:100%; max-width:280px; margin-inline:auto; order:-1; }
.hl-why2__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:1024px){
:root{ --hl-rail-h:52px; }
.hl-shero__shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-12); }
.hl-shero__copy{ max-width:none; }
.hl-shero__viz{ max-width:560px; }
.hl-accv__stage{ aspect-ratio:460/320; }
.hl-hw2__shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-12); }
.hl-hw2__lede{ max-width:none; }
.hl-price__shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-10); }
.hl-faq-sec .hl-shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-10); }
.hl-faq__lead{ position:static; }
.hl-faq__copy{ max-width:none; }
.hl-rail__title{ display:none; }
}
@media (max-width:900px){
.hl-switch{ grid-template-columns:minmax(0,1fr); }
.hl-switch__rail::before{ display:none; }
.hl-switch__rail{ display:flex; overflow-x:auto; gap:8px; padding-bottom:6px; scrollbar-width:none; }
.hl-switch__rail::-webkit-scrollbar{ display:none; }
.hl-srow{ flex:none; width:232px; background:#fff; border-color:var(--hl-line);
grid-template-columns:auto minmax(0,1fr); }
.hl-srow__arrow{ display:none; }
.hl-srow.is-active::after{ display:none; }
.hl-srow.is-active{ border-color:var(--hl-brand-red); box-shadow:0 0 0 3px rgba(207,41,39,.1), var(--hl-sh-sm); }
/* The head is a single column at every width now (§F4), so the only thing
left to do here is step the numeral down with the rest of the type. The
`grid-template-columns` overrides that used to live here would have
reintroduced a second gap on top of the numeral's own margin. */
.hl-ihead__n{ font-size:2rem; }
.hl-binds__more{ align-self:start; }
.hl-bpanel__cols{ grid-template-columns:minmax(0,1fr); }
.hl-wlist{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:768px){
.hl-track__stops{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hl-hw2__grid{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); }
}
@media (max-width:640px){
/* Mobile hero diagram: the same story told as a vertical spine. The absolute
positioning and the SVG wires are dropped rather than squeezed. */
.hl-accv{ padding:16px 16px 14px; }
.hl-accv__stage{ aspect-ratio:auto; display:block; }
.hl-accv__routes{ display:none; }
/* grid-template-rows must be reset too, or the desktop rows keep stretching
and leave a dead band under the channels */
.hl-accv__in{ position:static; width:auto; height:auto;
display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; gap:8px; }
.hl-cnode{ margin:0; padding:10px; border-radius:var(--hl-r-sm); }
.hl-cnode i{ display:none; }
.hl-accv__out{ position:static; margin-top:14px; padding-top:16px;
display:grid; gap:10px; border-top:1px dashed var(--hl-line-dark-2); }
.hl-corenode,.hl-onode{ position:static; height:auto; }
.hl-corenode{ padding:14px; }
.hl-onode{ padding:12px 14px; }
.hl-shero__h1{ font-size:clamp(2rem,8.4vw,2.6rem); }
.hl-shero__cta .hl-btn{ flex:1 1 auto; justify-content:center; }
.hl-shero__chips li{ font-size:.62rem; padding:6px 10px; }
.hl-rail__shell{ gap:var(--hl-s-4); }
.hl-rail__cta{ display:none; }
.hl-rail__list{ margin-inline:calc(var(--hl-gutter) * -1); padding-inline:var(--hl-gutter); }
.hl-track__stops{ grid-template-columns:minmax(0,1fr); gap:10px; }
.hl-stop{ padding:18px; }
.hl-track__note{ padding:12px 16px; }
.hl-spanel{ padding:20px; }
.hl-slist li{ grid-template-columns:minmax(0,1fr); gap:4px; }
.hl-spanel__art{ max-width:220px; padding:16px 10px; }
.hl-hw2__grid{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); gap:10px; }
.hl-hw2 .hl-hcard{ padding:16px 12px; }
.hl-hw2 .hl-hcard{ --hl-hcard-media:172px; }
.hl-hw2 .hl-hcard .hl-pslot{ margin-bottom:12px; }
.hl-hw2 .hl-hcard .hl-dev--smart{ --hl-k:.56; transform:scale(.56); margin-block:-47px; }
.hl-hw2 .hl-hcard .hl-dev--counter{ --hl-k:.7; transform:scale(.7); margin-block:-20px; }
.hl-hw2 .hl-hcard .hl-dev--portable{ --hl-k:.72; transform:scale(.72); margin-block:-27px; }
.hl-hw2 .hl-hcard .hl-dev--reader{ --hl-k:.9; transform:scale(.9); margin-block:-6px; }
.hl-hw2 .hl-hcard__meta b{ font-size:.92rem; }
.hl-hw2 .hl-hcard__meta i{ font-size:.72rem; }
/* three pills will not sit on one route at phone width — drop the wire and
let them wrap as a plain row */
.hl-wfeat__viz{ height:auto; display:flex; flex-wrap:wrap; gap:8px;
align-items:center; justify-content:center; }
.hl-wfeat__viz svg{ display:none; }
.hl-wfeat__node{ position:static; transform:none; }
.hl-price__cta .hl-btn{ flex:1 1 auto; justify-content:center; }
.hl-price__steps li{ padding:16px 18px; }
.hl-faq-sec .hl-faq__question{ padding:18px 0; gap:14px; }
.hl-faq-sec .hl-faq__answer .hl-rich{ padding-right:0; padding-bottom:20px; }
}
@media (max-width:430px){
.hl-btab{ padding:10px 14px; font-size:var(--hl-fs-xs); }
.hl-srow{ width:214px; padding:13px 14px; }
.hl-crumb ol{ font-size:.62rem; gap:6px; }
}
@media (max-width:400px){
.hl-accv__in{ grid-template-columns:minmax(0,1fr); }
.hl-cnode i{ display:block; }
/* the device cards stay 2-up even at 360 — one column would double the
section height for no gain in legibility */
.hl-hw2__grid{ gap:8px; }
.hl-hw2 .hl-hcard{ padding:14px 10px; }
.hl-hw2 .hl-hcard{ --hl-hcard-media:166px; }
.hl-ihead__n{ font-size:1.75rem; }
}
/* ── F13 · REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.hl-spulse,.hl-cnode,.hl-accv__live i,.hl-spanel__art .hl-dev{ animation:none !important; }
.hl-spulse{ stroke-dashoffset:0; opacity:.55; }
.hl-cnode{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.09); }
.hl-spanel.is-active,.hl-bpanel.is-active{ animation:none !important; }
}
/* ── G · INDUSTRY LAYER (industry pages) ──────────────────────────────────
SOURCE OF TRUTH: public/prototype/industry/industry.css (approved).
Layer 3 of 3. Ported by exactly the rules sections C and F already follow —
`.foo` → `.hl-foo`, `--foo` → `--hl-foo`, `@keyframes foo` → `hls-foo`,
`is-*`/`has-*` unchanged. Nothing above this line is redefined: the tokens,
the reset, the primitives, the infrastructure language, the device kit and
product slots, the nav/mega/drawer, the footer, the closing CTA and the
preloader all come from section C, and the page rail, the breadcrumb, the
chapter numerals, the short-path route family and the FAQ chapter all come
from section F.
Two deliberate deviations from a literal rename, both because production
already owns the name:
prototype `.offer` → `.hl-ioffer` `.hl-offer` is already the offer pill
inside the homepage industry panel
(section 11) and means something else.
prototype `@keyframes hover` / `bob` → reused as `hls-hover` / `hls-bob`,
which section C already defines with
identical values.
And one family renamed onto the component that already does the job, the
same way the service layer reused `.hl-hcard`:
prototype `.hcard` (hardware row) → `.hl-hcard` (section 09's card)
An industry page differs from a service page in one way that matters: it
sells an operating environment rather than a capability list. So the
centrepiece is the venue drawn as a payment system, and the supporting
chapters carry more texture.
G0 · industry hero + product stage
G1 · the floor (venue map)
G2 · hardware showcase
G3 · benefits bento
G4 · promotional offer band
G5 · cash discount + check visual
G6 · funding strip
G7 · why (compact)
G8 · responsive
G9 · reduced motion */
/* ── G0 · INDUSTRY HERO ─────────────────────────────────────────────────── */
/* `.hl-shero` already supplies the nav pull-up and the dark chapter; only the
mood and the artwork column change. */
.hl-ihero{
background:
radial-gradient(1150px 660px at 84% 2%, #221C4E 0%, transparent 60%),
radial-gradient(880px 600px at 2% 96%, #16194C 0%, transparent 58%),
linear-gradient(168deg,#0C0F2A 0%,#080A1E 55%,#05060F 100%);
}
.hl-ihero .hl-shero__shell{ grid-template-columns:1.04fr .96fr; align-items:center; }
/* An industry hero with NO stage device.
`hero-industry.php` renders no artwork column when the product slot produces
nothing — no media, no device key — so the two-column shell above would leave
its whole right half empty and squeeze the copy into 600px beside it. One
column, and the copy is allowed to use it; the measures below keep the
headline and lede readable rather than letting them run the full 1280px.
This applies to any page built on this hero without a stage device, not only
to the equipment catalog. */
.hl-ihero--nostage .hl-shero__shell{ grid-template-columns:minmax(0,1fr); }
.hl-ihero--nostage .hl-shero__copy{ max-width:none; }
.hl-ihero--nostage .hl-shero__h1{ max-width:24ch; }
.hl-ihero--nostage .hl-shero__lede{ max-width:62ch; }
/* Offer flag — the promotional claim restated inline, linking to the offer
chapter. Rendered only when the destination actually resolves. */
.hl-oflag{
display:inline-flex; align-items:center; gap:12px; margin-top:var(--hl-s-8);
padding:11px 16px 11px 12px; border-radius:var(--hl-r-pill);
background:rgba(207,41,39,.12); border:1px solid rgba(229,84,78,.34);
font-size:var(--hl-fs-xs); color:var(--hl-text-light-2);
transition:background var(--hl-t-med), border-color var(--hl-t-med),
transform var(--hl-t-med) var(--hl-e-out);
}
.hl-oflag:hover{ background:rgba(207,41,39,.2); border-color:rgba(229,84,78,.6);
transform:translateY(-2px); }
.hl-oflag__tag{ padding:4px 9px; border-radius:var(--hl-r-xs); background:rgba(207,41,39,.3);
color:#fff; font:700 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; }
.hl-oflag__txt em{ color:#fff; font-weight:700; font-style:normal; }
.hl-oflag .hl-arrow{ color:var(--hl-red-300); transition:transform var(--hl-t-med) var(--hl-e-out); }
.hl-oflag:hover .hl-arrow{ transform:translateX(3px); }
/* Product stage: the hero device with floating capability labels. This is the
industry equivalent of the service hero's abstract acceptance diagram — it
shows the thing rather than the flow. Kept darker than the device silhouette
on purpose: the devices paint in the same navy family and a navy card would
swallow them. */
.hl-rstage{
position:relative; padding:26px 22px 16px; border-radius:var(--hl-r-2xl); overflow:hidden;
background:linear-gradient(158deg,rgba(30,34,92,.5),rgba(4,5,14,.9) 72%);
border:1px solid var(--hl-line-dark-2); box-shadow:var(--hl-sh-glass);
backdrop-filter:blur(10px);
}
.hl-rstage__glow{
position:absolute; left:50%; top:46%; width:74%; aspect-ratio:1; transform:translate(-50%,-50%);
border-radius:50%; background:radial-gradient(circle, rgba(207,41,39,.2), transparent 62%);
filter:blur(34px); pointer-events:none;
}
.hl-rstage__routes{ position:absolute; inset:0; width:100%; height:100%; }
.hl-rstage__slot{ position:relative; z-index:2; min-height:250px; }
/* transform-scaled devices reserve full layout height; margin-block claws it back */
.hl-rstage__slot .hl-dev{ --hl-k:1.16; transform:scale(1.16);
margin-block:14px; animation:hls-hover 7s var(--hl-e-inout) infinite; }
.hl-rstage__slot::before{
content:""; position:absolute; left:50%; bottom:34px; width:52%; height:16px;
transform:translateX(-50%); border-radius:50%;
background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%); filter:blur(6px);
}
.hl-rlabel{
position:absolute; z-index:3; padding:7px 12px; border-radius:var(--hl-r-sm); white-space:nowrap;
background:rgba(10,12,34,.84); border:1px solid var(--hl-line-dark-2);
backdrop-filter:blur(10px); box-shadow:0 14px 30px -14px rgba(0,0,0,.85);
font:500 var(--hl-fs-xs)/1 var(--hl-ff-body); color:#fff;
animation:hls-bob 7s var(--hl-e-inout) infinite;
}
.hl-rlabel::before{
content:""; position:absolute; top:50%; width:11px; height:1px; background:rgba(229,84,78,.7);
}
.hl-rlabel--1{ top:16%; left:2%; animation-delay:-.4s; }
.hl-rlabel--1::before{ right:-11px; }
.hl-rlabel--2{ top:30%; right:1%; animation-delay:-2.1s; }
.hl-rlabel--2::before{ left:-11px; }
.hl-rlabel--3{ bottom:30%; left:1%; animation-delay:-3.8s; }
.hl-rlabel--3::before{ right:-11px; }
.hl-rlabel--4{ bottom:19%; right:2%; animation-delay:-5.4s; }
.hl-rlabel--4::before{ left:-11px; }
.hl-rstage__foot{
position:relative; z-index:3; margin:10px 0 0; padding-top:11px;
border-top:1px solid var(--hl-line-dark); text-align:center;
font-size:var(--hl-fs-micro); color:var(--hl-text-light-4);
}
/* ── G1 · THE FLOOR ─────────────────────────────────────────────────────── */
/* The venue as a payment system. Same fixed-aspect-stage technique as the
service hero diagram: the SVG coordinate space is 720×420 and every hotspot
is placed with percentages derived from it, so the wires and the CSS boxes
cannot drift apart at any width. The renderer owns those coordinates — they
come from an approved plan chosen by station count, never from admin input. */
.hl-floor{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad);
background:linear-gradient(178deg,var(--hl-ink-900),var(--hl-ink-850) 55%,var(--hl-ink-900)); }
.hl-floor .hl-shell{ position:relative; z-index:1; }
/* minmax(0,…) on every track and min-width:0 on both children: a plain `1fr`
is minmax(auto,1fr), and the auto minimum would size the column to the widest
STACKED panel instead of the container. The section clips overflow, so that
failure is silent — the card just truncates. Bridge rule E8. */
.hl-floor__wrap{
display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
gap:clamp(20px,2.4vw,36px); align-items:start;
}
.hl-floor__stage,.hl-floor__panels{ min-width:0; }
/* `.hl-floor__map` is the fixed-aspect positioning context; `.hl-floor__stage`
is a plain block so the caption below the plan stays in normal flow. */
.hl-floor__stage{ position:relative; width:100%; }
.hl-floor__map{ position:relative; width:100%; aspect-ratio:720/460; }
.hl-floor__plan{ position:absolute; inset:0; width:100%; height:100%; }
.hl-floor__room{ stroke:rgba(255,255,255,.16); stroke-width:1.4; fill:rgba(255,255,255,.018); }
.hl-floor__div{ stroke:rgba(255,255,255,.07); stroke-width:1; stroke-dasharray:4 7; }
.hl-floor .hl-sroute{ stroke:rgba(255,255,255,.13); }
.hl-floor__roomtag{
position:absolute; left:4.2%; top:7.1%; transform:translateY(-140%);
font:600 var(--hl-fs-micro)/1 var(--hl-ff-mono); letter-spacing:.14em; text-transform:uppercase;
color:var(--hl-text-light-4);
}
.hl-floor__spots{ position:absolute; inset:0; }
.hl-spot{
position:absolute; left:var(--hl-x); top:var(--hl-y); transform:translate(-50%,-50%);
display:inline-flex; align-items:center; gap:9px; padding:9px 14px 9px 11px;
border-radius:var(--hl-r-pill); white-space:nowrap;
background:rgba(12,15,42,.9); border:1px solid var(--hl-line-dark-2);
backdrop-filter:blur(8px);
font:600 var(--hl-fs-xs)/1 var(--hl-ff-display); color:var(--hl-text-light-2); letter-spacing:-.01em;
transition:color var(--hl-t-med), background var(--hl-t-med), border-color var(--hl-t-med),
box-shadow var(--hl-t-med), transform var(--hl-t-med) var(--hl-e-out);
}
.hl-spot i{
width:8px; height:8px; border-radius:50%; flex:none;
background:var(--hl-text-light-4); transition:background var(--hl-t-med), box-shadow var(--hl-t-med);
}
.hl-spot:hover{ color:#fff; border-color:rgba(255,255,255,.3);
transform:translate(-50%,-50%) translateY(-2px); }
.hl-spot.is-active{
color:#fff; background:linear-gradient(160deg,rgba(207,41,39,.34),rgba(42,45,124,.7));
border-color:rgba(229,84,78,.55);
box-shadow:0 0 0 4px rgba(207,41,39,.14), 0 18px 36px -18px rgba(0,0,0,.9);
}
.hl-spot.is-active i{ background:var(--hl-red-400); box-shadow:0 0 12px rgba(229,84,78,.9); }
/* the destination node reads as the account, not as another station */
.hl-spot--end{ background:rgba(47,214,163,.09); border-color:rgba(47,214,163,.28); }
.hl-spot--end i{ background:var(--hl-ok); }
.hl-spot--end.is-active{ background:linear-gradient(160deg,rgba(47,214,163,.28),rgba(42,45,124,.68));
border-color:rgba(47,214,163,.6); box-shadow:0 0 0 4px rgba(47,214,163,.12),
0 18px 36px -18px rgba(0,0,0,.9); }
.hl-spot--end.is-active i{ background:var(--hl-ok); box-shadow:0 0 12px rgba(47,214,163,.9); }
/* The thesis line, under the plan. */
.hl-floor__foot{ margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none; }
.hl-floor__foot span{
padding:9px 15px; border-radius:var(--hl-r-pill);
background:rgba(255,255,255,.05); border:1px solid var(--hl-line-dark);
font:500 var(--hl-fs-xs)/1 var(--hl-ff-body); color:var(--hl-text-light-2);
}
/* Detail panel — dark glass, so the chapter stays dark. All panels stack in one
grid cell and hide with `visibility` rather than `display`, so the container
is always the height of the tallest station and switching never moves the
page. That matters more here than anywhere else: the switcher IS the
chapter. */
.hl-floor__panels{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
.hl-fpanel{
grid-area:1/1; min-width:0;
display:grid; grid-template-rows:auto auto; gap:var(--hl-s-6); align-content:start;
padding:clamp(22px,2.4vw,32px); border-radius:var(--hl-r-2xl);
background:linear-gradient(160deg,rgba(42,45,124,.3),rgba(10,12,34,.72));
border:1px solid var(--hl-line-dark-2); box-shadow:var(--hl-sh-glass);
backdrop-filter:blur(10px);
visibility:hidden; opacity:0; pointer-events:none; transform:translateY(9px);
transition:opacity 320ms var(--hl-e-out), transform 420ms var(--hl-e-out), visibility 320ms;
}
.hl-fpanel.is-active{ visibility:visible; opacity:1; pointer-events:auto; transform:none; }
.hl-fpanel__k{ display:block; margin-bottom:var(--hl-s-3);
font:700 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wider);
text-transform:uppercase; color:var(--hl-red-300); }
.hl-fpanel__body h3{ font-size:var(--hl-fs-h3); color:#fff; margin-bottom:var(--hl-s-4); }
.hl-fpanel__body p{ margin-bottom:var(--hl-s-6); font-size:var(--hl-fs-sm); line-height:1.72;
color:var(--hl-text-light-2); }
.hl-fspec{ display:grid; gap:1px; margin:0; padding:0; list-style:none; }
.hl-fspec li{ display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; align-items:baseline;
padding:11px 0; border-top:1px solid var(--hl-line-dark); }
.hl-fspec li:last-child{ border-bottom:1px solid var(--hl-line-dark); }
.hl-fspec b{ font:600 var(--hl-fs-micro)/1.5 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-light-4); }
.hl-fspec span{ font-size:var(--hl-fs-xs); line-height:1.6; color:#fff; }
/* The panel's device slot. `.hl-pslot` is a grid in section C; `display:contents`
lets the art frame own the two rows so artwork and caption keep the approved
vertical rhythm whether the slot renders a silhouette or a photograph. */
.hl-fpanel__art{
position:relative; display:grid; grid-template-rows:1fr auto; justify-items:center;
align-items:center; gap:12px; height:180px;
border-radius:var(--hl-r-xl); background:rgba(255,255,255,.03);
border:1px solid var(--hl-line-dark);
}
.hl-fpanel__art .hl-pslot{ display:contents; }
.hl-fpanel__art .hl-dev{ --hl-k:.8; transform:scale(.8); animation:hls-hover 7s var(--hl-e-inout) infinite; }
.hl-fpanel__art .hl-dev--rest{ --hl-k:.72; transform:scale(.72); margin-block:-23px; }
.hl-fpanel__art .hl-dev--counter{ --hl-k:.78; transform:scale(.78); margin-block:-15px; }
.hl-fpanel__art .hl-dev--portable{ --hl-k:.72; transform:scale(.72); margin-block:-27px; }
.hl-fpanel__art .hl-dev--reader{ --hl-k:.94; transform:scale(.94); margin-block:-4px; }
.hl-fpanel__art .hl-dev--invoice{ --hl-k:.74; transform:scale(.74); margin-block:-19px; }
.hl-fpanel__art .hl-dev--smart{ --hl-k:.6; transform:scale(.6); margin-block:-40px; }
.hl-fpanel__art .hl-dev--pump{ --hl-k:.6; transform:scale(.6); margin-block:-42px; }
.hl-fpanel__art img{ max-height:128px; width:auto; object-fit:contain; }
/* The station with no image at all — `Show image` off, or nothing to draw. The
same rule as `.hl-spanel--textonly` and for the same reason: the panel's
second track and the `--hl-s-6` gap beside it are laid out even when nothing
occupies them, so the track is removed rather than the item hidden. Declared
once here and re-declared in each responsive block below, because those
blocks re-state `grid-template-columns` on `.hl-fpanel` itself. */
.hl-fpanel--textonly{ grid-template-rows:auto; grid-template-columns:minmax(0,1fr); gap:0; }
/* ── G2 · HARDWARE SHOWCASE ─────────────────────────────────────────────── */
.hl-rhw{ position:relative; padding-block:var(--hl-sec-pad);
background:linear-gradient(180deg,#fff,var(--hl-paper) 82%); }
.hl-rhw__more{ align-self:end; padding-bottom:6px; }
.hl-rhw__feature{
display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(24px,3vw,54px); align-items:center;
padding:clamp(24px,2.6vw,40px); margin-bottom:clamp(14px,1.4vw,20px);
border-radius:var(--hl-r-2xl); background:#fff; border:1px solid var(--hl-line);
box-shadow:var(--hl-sh-lg);
}
.hl-rhw__art{
position:relative; display:grid; place-items:center; min-height:280px;
border-radius:var(--hl-r-xl);
background:radial-gradient(ellipse 70% 60% at 50% 42%, var(--hl-paper-2), var(--hl-paper) 70%);
border:1px solid var(--hl-line);
}
.hl-rhw__art::before{
content:""; position:absolute; left:50%; bottom:44px; width:46%; height:18px;
transform:translateX(-50%); border-radius:50%;
background:radial-gradient(ellipse, rgba(10,14,36,.22), transparent 70%); filter:blur(5px);
}
.hl-rhw__art .hl-pslot{ position:relative; z-index:1; }
.hl-rhw__art .hl-dev{ animation:hls-hover 6.5s var(--hl-e-inout) infinite; }
.hl-rhw__meta{ min-width:0; }
.hl-rhw__meta h3{ font-size:var(--hl-fs-h3); margin-bottom:var(--hl-s-4); }
.hl-rhw__meta p{ font-size:var(--hl-fs-sm); line-height:1.7; color:var(--hl-text-muted);
margin-bottom:var(--hl-s-6); max-width:46ch; }
.hl-rhw__meta .hl-hspec{ margin-bottom:var(--hl-s-8); }
/* Rows share one height for the same reason `.hl-hw2__grid` does — this grid is
four columns at desktop and two below, so the moment it has more than one row
the rows size independently and the cards' bottom edges stop agreeing. */
.hl-rhw__row{ display:grid; grid-template-columns:repeat(var(--hl-row-n, 4), minmax(0,1fr)); grid-auto-rows:1fr;
gap:clamp(12px,1.3vw,18px); margin:0; padding:0; list-style:none; }
.hl-rhw__row > li{ min-width:0; }
.hl-rhw .hl-hcard__meta b{ display:block; margin-bottom:6px;
font:700 var(--hl-fs-h4)/1.2 var(--hl-ff-display); color:var(--hl-text-dark);
letter-spacing:-.02em; }
.hl-rhw .hl-hcard__meta i{ display:block; margin:0; font-size:var(--hl-fs-xs); line-height:1.55;
color:var(--hl-text-muted); font-style:normal; }
/* `.hl-pslot__ph` defaults to light-on-dark; this chapter is white. */
.hl-rhw .hl-pslot__ph{ --hl-ph-name:var(--hl-text-dark); --hl-ph-note:var(--hl-text-muted); }
/* fixed slot height so the placeholders align across the row regardless of how
many lines each caption takes */
.hl-rhw .hl-hcard .hl-pslot{ flex:none; height:190px; min-height:0; }
/* Fixed slot, growing caption — see `.hl-hw2 .hl-hcard__meta`. */
.hl-rhw .hl-hcard__meta{ flex:1; }
.hl-rhw .hl-hcard .hl-dev--smart{ --hl-k:.7; transform:scale(.7); margin-block:-32px; }
.hl-rhw .hl-hcard .hl-dev--counter{ --hl-k:.84; transform:scale(.84); margin-block:-11px; }
.hl-rhw .hl-hcard .hl-dev--portable{ --hl-k:.84; transform:scale(.84); margin-block:-15px; }
.hl-rhw .hl-hcard .hl-dev--reader{ --hl-k:1; transform:scale(1); }
.hl-rhw .hl-hcard .hl-dev--rest{ --hl-k:.7; transform:scale(.7); margin-block:-34px; }
.hl-rhw .hl-hcard .hl-dev--pump{ --hl-k:.7; transform:scale(.7); margin-block:-34px; }
.hl-rhw .hl-hcard .hl-dev--invoice{ --hl-k:.8; transform:scale(.8); margin-block:-16px; }
.hl-rhw__note{
margin:clamp(16px,1.6vw,22px) 0 0; padding:15px 18px; border-radius:var(--hl-r-md);
background:#fff; border:1px solid var(--hl-line); border-left:3px solid var(--hl-brand-red);
font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-dark);
}
/* the route into the full catalog, after the range. `display:flex` rather than
the button's inline-flex so it takes its own line; `width:fit-content` so it
still hugs its text and `.hl-btn--link`'s underline stays the width of the
words rather than the column. */
.hl-rhw__all{ display:flex; width:fit-content; margin-top:clamp(16px,1.6vw,22px); }
/* ── G3 · BENEFITS BENTO ────────────────────────────────────────────────── */
.hl-ben{ position:relative; padding-block:var(--hl-sec-pad-sm); background:var(--hl-paper); }
.hl-bento{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(12px,1.3vw,18px);
margin:0; padding:0; list-style:none; }
.hl-btile{
position:relative; min-width:0; padding:clamp(20px,2.2vw,30px); border-radius:var(--hl-r-2xl);
background:#fff; border:1px solid var(--hl-line);
transition:transform var(--hl-t-med) var(--hl-e-out), box-shadow var(--hl-t-med),
border-color var(--hl-t-med);
}
.hl-btile:hover{ transform:translateY(-5px); box-shadow:var(--hl-sh-md); border-color:var(--hl-line-2); }
.hl-btile__n{
display:block; margin-bottom:var(--hl-s-4);
font:700 var(--hl-fs-micro)/1 var(--hl-ff-mono); letter-spacing:.14em; color:var(--hl-brand-red);
}
.hl-btile h3{ font-size:var(--hl-fs-h4); margin-bottom:var(--hl-s-3); }
.hl-btile p{ margin:0; font-size:var(--hl-fs-xs); line-height:1.65; color:var(--hl-text-muted); }
.hl-btile--lead{ grid-column:span 4; }
.hl-btile--lead h3{ font-size:var(--hl-fs-h3); }
.hl-btile--lead p{ font-size:var(--hl-fs-sm); line-height:1.72; max-width:56ch; }
.hl-btile--dark{
grid-column:span 2; color:#fff;
background:linear-gradient(162deg,var(--hl-ink-750),var(--hl-ink-900) 62%,var(--hl-ink-950));
border-color:var(--hl-line-dark-2);
}
.hl-btile--dark h3{ color:#fff; }
.hl-btile--dark p{ color:var(--hl-text-light-2); }
.hl-btile--dark .hl-btile__n{ color:var(--hl-red-400); }
.hl-btile__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:var(--hl-s-5) 0 0; padding:0;
list-style:none; }
.hl-btile__chips li{
padding:5px 10px; border-radius:var(--hl-r-xs); background:rgba(255,255,255,.06);
border:1px solid var(--hl-line-dark); font-size:var(--hl-fs-micro); color:var(--hl-text-light-2);
}
.hl-bento > .hl-btile:not(.hl-btile--lead):not(.hl-btile--dark){ grid-column:span 2; }
/* The comparison visual on the lead tile — a COUNT, deliberately not a timing
claim, which is why its caption is rendered with it rather than optional. */
.hl-turn{ margin-top:var(--hl-s-6); padding-top:var(--hl-s-5); border-top:1px solid var(--hl-line); }
.hl-turn__row{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:14px; align-items:center;
margin-bottom:10px; }
.hl-turn__k{ font:600 var(--hl-fs-micro)/1.4 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-muted); }
.hl-turn__bar{ display:flex; gap:6px; }
.hl-turn__bar i{ height:10px; border-radius:5px; flex:0 0 46px;
background:linear-gradient(90deg,var(--hl-navy-600),var(--hl-navy-400)); }
.hl-turn__bar--fast i{ background:linear-gradient(90deg,var(--hl-red-600),var(--hl-red-400)); }
.hl-turn__note{ margin:12px 0 0 !important; font-size:var(--hl-fs-micro) !important;
color:var(--hl-text-muted); opacity:.8; }
/* ── G4 · PROMOTIONAL OFFER BAND ────────────────────────────────────────── */
/* `.hl-offer` is taken (the homepage industry panel's offer pill), so the
approved band is `.hl-ioffer`. */
.hl-ioffer{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad);
background:linear-gradient(172deg,var(--hl-ink-850),var(--hl-ink-950)); }
.hl-ioffer__shell{ position:relative; z-index:1; }
/* The offer chapter's numeral sits on the page spine, left-aligned with every
other chapter head, above the centred card rather than inside it. See the
note in `blocks/promotion-offer.php`. */
.hl-ioffer__n{ margin-bottom:var(--hl-s-8); text-align:left; }
.hl-ioffer__card{
max-width:860px; margin-inline:auto; text-align:center;
padding:clamp(30px,3.4vw,54px) clamp(24px,3vw,58px); border-radius:var(--hl-r-3xl);
background:linear-gradient(158deg,rgba(207,41,39,.14),rgba(42,45,124,.32) 52%,rgba(10,12,34,.6));
border:1px solid rgba(229,84,78,.3);
box-shadow:var(--hl-sh-xl), inset 0 1px 0 rgba(255,255,255,.12);
backdrop-filter:blur(12px);
}
.hl-ioffer__tag{
display:inline-block; margin-bottom:var(--hl-s-6); padding:6px 13px; border-radius:var(--hl-r-pill);
background:rgba(207,41,39,.26); border:1px solid rgba(229,84,78,.5); color:#fff;
font:700 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase;
}
.hl-ioffer__amt{ display:flex; align-items:baseline; justify-content:center; gap:14px;
margin:0 0 var(--hl-s-5); }
.hl-ioffer__amt span{ font:600 var(--hl-fs-sm)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-light-3); }
.hl-ioffer__amt b{
font:800 clamp(3rem,6vw,5rem)/.9 var(--hl-ff-display); color:#fff; letter-spacing:-.05em;
font-variant-numeric:tabular-nums; text-shadow:0 22px 54px rgba(0,0,0,.6);
}
.hl-ioffer__title{ font:700 clamp(1.3rem,2vw,1.8rem)/1.3 var(--hl-ff-display); color:#fff;
letter-spacing:-.025em; margin-bottom:var(--hl-s-4); }
.hl-ioffer__copy{ max-width:58ch; margin-inline:auto; font-size:var(--hl-fs-sm); line-height:1.72;
color:var(--hl-text-light-2); margin-bottom:var(--hl-s-8); }
.hl-ioffer__pts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;
text-align:left; margin:0 0 var(--hl-s-8); padding:0; list-style:none;
background:var(--hl-line-dark); border:1px solid var(--hl-line-dark);
border-radius:var(--hl-r-md); overflow:hidden; }
.hl-ioffer__pts li{ padding:16px 18px; background:rgba(10,12,34,.42); min-width:0; }
.hl-ioffer__pts b{ display:block; margin-bottom:6px;
font:600 var(--hl-fs-micro)/1.5 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-red-300); }
.hl-ioffer__pts span{ font-size:var(--hl-fs-xs); line-height:1.6; color:#fff; }
.hl-ioffer__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.hl-ioffer__disc{ margin:var(--hl-s-8) 0 0; padding-top:var(--hl-s-5);
border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); line-height:1.6; color:var(--hl-text-light-4); }
/* ── G5 · CASH DISCOUNT ─────────────────────────────────────────────────── */
/* No rate, no percentage and no worked figures. A cash-vs-card pair with real
numbers publishes an effective rate, which is exactly what this site must
never do — so the amount cells are a fixed token and no field can hold a
number. */
.hl-cd{ position:relative; padding-block:var(--hl-sec-pad); background:#fff; }
.hl-cd__shell{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(30px,3.6vw,66px); align-items:start; }
.hl-cd__copy{ min-width:0; }
.hl-cd__lede{ font-size:var(--hl-fs-lede); line-height:1.65; color:var(--hl-text-dark);
margin:var(--hl-s-5) 0 var(--hl-s-8); max-width:52ch; }
.hl-cdlist{ display:grid; gap:1px; margin:0 0 var(--hl-s-8); padding:0; list-style:none; }
.hl-cdlist li{ padding:16px 0; border-top:1px solid var(--hl-line); }
.hl-cdlist li:last-child{ border-bottom:1px solid var(--hl-line); }
.hl-cdlist b{ display:block; margin-bottom:5px; font:700 var(--hl-fs-h4)/1.3 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.02em; }
.hl-cdlist span{ font-size:var(--hl-fs-xs); line-height:1.65; color:var(--hl-text-muted); }
.hl-cd__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--hl-s-6); }
/* The receipt is what the copy beside it is describing, and the copy is more
than twice as tall (893 against 334 on an industry page), so the receipt
travels with the reader instead of stopping 559px short. Same behaviour,
same offset token as the FAQ lead. */
.hl-check{
position:sticky; top:var(--hl-sticky-top); padding:24px 24px 20px; border-radius:var(--hl-r-lg);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-lg);
max-width:400px; margin-inline:auto; width:100%;
}
.hl-check::after{
content:""; position:absolute; left:0; right:0; bottom:-9px; height:10px;
background:repeating-linear-gradient(135deg,#fff 0 9px,transparent 9px 18px);
filter:drop-shadow(0 2px 1px rgba(10,14,36,.08));
}
.hl-check__head{ display:flex; justify-content:space-between; align-items:baseline;
padding-bottom:14px; border-bottom:1px dashed var(--hl-line-2);
font:600 var(--hl-fs-micro)/1 var(--hl-ff-body); letter-spacing:var(--hl-ls-wide);
text-transform:uppercase; color:var(--hl-text-muted); }
.hl-check__mono{ font-family:var(--hl-ff-mono); letter-spacing:.08em; }
.hl-check__items{ display:grid; gap:14px; padding:18px 0; margin:0; list-style:none; }
.hl-check__items li{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hl-check__items i{ height:8px; width:var(--hl-w); border-radius:4px; background:var(--hl-paper-2); }
.hl-check__items em{ font:400 var(--hl-fs-xs)/1 var(--hl-ff-mono); color:var(--hl-text-muted);
font-style:normal; }
.hl-check__rule{ height:1px; background:var(--hl-line); margin-bottom:4px; }
.hl-check__price{ display:flex; justify-content:space-between; align-items:baseline;
padding:12px 0; border-bottom:1px solid var(--hl-line); }
.hl-check__price span{ font:600 var(--hl-fs-sm)/1 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-check__price b{ font:700 1.1rem/1 var(--hl-ff-mono); color:var(--hl-text-muted); }
.hl-check__price--card{ border-bottom:0; }
.hl-check__price--card span,.hl-check__price--card b{ color:var(--hl-brand-red); }
.hl-check__foot{ margin-top:14px; padding-top:13px; border-top:1px dashed var(--hl-line-2);
font-size:var(--hl-fs-micro); line-height:1.55; color:var(--hl-text-muted); }
/* ── G6 · FUNDING STRIP ─────────────────────────────────────────────────── */
.hl-rfund{ position:relative; overflow:hidden; padding-block:var(--hl-sec-pad-sm);
background:linear-gradient(178deg,var(--hl-ink-850),var(--hl-ink-950) 70%); }
.hl-rfund .hl-shell{ position:relative; z-index:1; }
.hl-rfund__more{ align-self:end; padding-bottom:6px; }
.hl-rfund__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(12px,1.3vw,18px); margin:0; padding:0; list-style:none; }
.hl-rfund__grid li{
min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px;
padding:22px 22px 24px; border-radius:var(--hl-r-lg);
background:rgba(255,255,255,.04); border:1px solid var(--hl-line-dark);
transition:background var(--hl-t-med), border-color var(--hl-t-med),
transform var(--hl-t-med) var(--hl-e-out);
}
.hl-rfund__grid li:hover{ background:rgba(255,255,255,.075); border-color:var(--hl-line-dark-2);
transform:translateY(-4px); }
.hl-rfund__ico{ grid-row:1/span 2; width:20px; height:20px; color:var(--hl-red-400); padding-top:2px; }
.hl-rfund__grid b{ font:700 var(--hl-fs-h4)/1.25 var(--hl-ff-display); color:#fff;
letter-spacing:-.02em; }
.hl-rfund__grid span:last-child{ font-size:var(--hl-fs-xs); line-height:1.6;
color:var(--hl-text-light-3); }
.hl-rfund__note{ margin:var(--hl-s-8) 0 0; padding-top:var(--hl-s-5);
border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); line-height:1.6; color:var(--hl-text-light-4); max-width:78ch; }
/* ── G7 · WHY (compact) ─────────────────────────────────────────────────── */
/* A hairline definition list rather than another card grid — this chapter sits
between two heavier ones and should read quickly. */
.hl-rwhy{ position:relative; padding-block:var(--hl-sec-pad-sm); background:var(--hl-paper); }
.hl-rwhy__shell{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(28px,3.4vw,64px); align-items:start; }
.hl-rwhy__lead{ min-width:0; }
.hl-rwhy__copy{ margin:var(--hl-s-5) 0 0; font-size:var(--hl-fs-sm); line-height:1.7;
color:var(--hl-text-muted); max-width:40ch; }
.hl-rwhy__list{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:0 clamp(24px,2.6vw,44px); margin:0; }
.hl-rwhy__list > div{ min-width:0; padding:20px 0; border-top:1px solid var(--hl-line-2); }
.hl-rwhy__list dt{
display:flex; align-items:baseline; gap:10px; margin-bottom:8px;
font:700 var(--hl-fs-h4)/1.3 var(--hl-ff-display); color:var(--hl-text-dark);
letter-spacing:-.02em;
}
.hl-rwhy__list dt::before{
content:""; width:6px; height:6px; border-radius:2px; flex:none;
background:var(--hl-brand-red); transform:translateY(-2px);
}
.hl-rwhy__list dd{ margin:0; padding-left:16px; font-size:var(--hl-fs-xs); line-height:1.65;
color:var(--hl-text-muted); }
/* ── G8 · RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:1280px){
.hl-rhw__row{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); }
}
@media (max-width:1120px){
.hl-floor__wrap{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-8); }
.hl-fpanel{ grid-template-columns:minmax(0,1fr) 220px; grid-template-rows:auto;
align-items:center; align-content:center; }
.hl-fpanel--textonly{ grid-template-columns:minmax(0,1fr); }
.hl-fpanel__art{ height:100%; min-height:180px; }
.hl-bento{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.hl-btile--lead{ grid-column:span 4; }
.hl-btile--dark{ grid-column:span 4; }
.hl-bento > .hl-btile:not(.hl-btile--lead):not(.hl-btile--dark){ grid-column:span 2; }
.hl-bento > .hl-btile:last-child{ grid-column:span 4; }
.hl-rwhy__shell{ grid-template-columns:minmax(0,1fr); }
.hl-rwhy__copy{ max-width:none; }
}
@media (max-width:1024px){
.hl-ihero .hl-shero__shell{ grid-template-columns:minmax(0,1fr); }
.hl-shero__viz.hl-ihero__viz{ max-width:560px; }
.hl-rhw__feature{ grid-template-columns:minmax(0,1fr); }
.hl-rhw__art{ min-height:250px; order:-1; }
.hl-cd__shell{ grid-template-columns:minmax(0,1fr); gap:var(--hl-s-10); }
.hl-cd__lede{ max-width:none; }
.hl-rfund__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
.hl-ioffer__pts{ grid-template-columns:minmax(0,1fr); }
.hl-rwhy__list{ grid-template-columns:minmax(0,1fr); }
.hl-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hl-btile--lead,.hl-btile--dark{ grid-column:span 2; }
.hl-bento > .hl-btile:not(.hl-btile--lead):not(.hl-btile--dark){ grid-column:span 2; }
}
@media (max-width:768px){
.hl-rhw__row{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); }
}
@media (max-width:640px){
/* Mobile floor: the plan becomes a spine of stations. The room outline and
the wires are dropped rather than squeezed into an unreadable box. */
.hl-floor__map{ aspect-ratio:auto; }
.hl-floor__plan,.hl-floor__roomtag{ display:none; }
.hl-floor__spots{ position:static; display:flex; gap:8px; overflow-x:auto;
padding-bottom:6px; scrollbar-width:none; }
.hl-floor__spots::-webkit-scrollbar{ display:none; }
.hl-spot{ position:static; transform:none; flex:none; }
.hl-spot:hover{ transform:none; }
/* On mobile the foot sits between the station strip and the panel, so it
stops being three pills and becomes a caption that explains the strip. */
.hl-floor__foot{
display:block; margin:var(--hl-s-4) 0 0;
padding-top:12px; border-top:1px solid var(--hl-line-dark);
font-size:var(--hl-fs-micro); line-height:1.5; color:var(--hl-text-light-4);
}
.hl-floor__foot span{ padding:0; background:none; border:0; font-size:inherit; color:inherit; }
.hl-floor__foot span + span::before{ content:" · "; opacity:.6; }
.hl-fpanel{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
.hl-fpanel--textonly{ grid-template-rows:auto; }
.hl-fpanel__art{ order:-1; height:170px; }
.hl-oflag{ width:100%; }
.hl-oflag__txt{ line-height:1.4; white-space:normal; }
.hl-rstage{ padding:18px 16px 12px; }
.hl-rstage__slot{ min-height:190px; }
.hl-rstage__slot .hl-dev{ --hl-k:.86; transform:scale(.86); margin-block:-6px; }
.hl-rstage__slot::before{ bottom:26px; }
/* four floating labels do not fit around a phone-width device */
.hl-rlabel--2,.hl-rlabel--3{ display:none; }
.hl-rlabel{ font-size:.68rem; padding:6px 10px; }
.hl-rlabel--1{ top:8%; left:0; }
.hl-rlabel--4{ bottom:12%; right:0; }
.hl-ihero .hl-shero__cta .hl-btn{ flex:1 1 auto; justify-content:center; }
.hl-bento{ grid-template-columns:minmax(0,1fr); }
/* Matching the SPAN rule's specificity on purpose. The prototype's plain
`.btile{grid-column:auto}` is outranked by
`.bento > .btile:not(--lead):not(--dark){grid-column:span 2}` from the 900
block, so a one-track grid still gets asked for two columns and browsers
add an implicit one. The tiles render full width either way — measured on
both — but a phantom track is the kind of thing that becomes a real bug the
next time this grid is touched, so the override is written to actually
win. */
.hl-bento > .hl-btile:not(.hl-btile--lead):not(.hl-btile--dark),
.hl-bento > .hl-btile--lead,
.hl-bento > .hl-btile--dark{ grid-column:auto; }
.hl-turn__row{ grid-template-columns:minmax(0,1fr); gap:6px; }
.hl-turn__bar i{ flex:1 1 auto; }
.hl-ioffer__card{ padding:26px 20px; border-radius:var(--hl-r-2xl); }
.hl-ioffer__amt{ gap:10px; }
.hl-ioffer__cta .hl-btn{ flex:1 1 auto; justify-content:center; }
.hl-rfund__grid{ grid-template-columns:minmax(0,1fr); }
.hl-rhw__feature{ padding:18px; }
.hl-rhw__row{ grid-template-columns:repeat(var(--hl-row-sm, 2), minmax(0,1fr)); gap:10px; }
.hl-rhw .hl-hcard{ padding:16px 12px; }
.hl-rhw .hl-hcard{ --hl-hcard-media:168px; }
.hl-rhw .hl-hcard .hl-pslot{ margin-bottom:12px; }
.hl-rhw .hl-hcard .hl-dev--smart{ --hl-k:.54; transform:scale(.54); margin-block:-49px; }
.hl-rhw .hl-hcard .hl-dev--counter{ --hl-k:.68; transform:scale(.68); margin-block:-21px; }
.hl-rhw .hl-hcard .hl-dev--portable{ --hl-k:.7; transform:scale(.7); margin-block:-29px; }
.hl-rhw .hl-hcard .hl-dev--reader{ --hl-k:.88; transform:scale(.88); margin-block:-7px; }
.hl-rhw .hl-hcard__meta b{ font-size:.92rem; }
.hl-rhw .hl-hcard__meta i{ font-size:.72rem; }
.hl-check{ padding:20px 18px 16px; }
.hl-cd__cta{ gap:var(--hl-s-4); }
.hl-cd__cta .hl-btn--lg{ width:100%; justify-content:center; }
}
@media (max-width:430px){
.hl-spot{ padding:8px 12px 8px 10px; font-size:.72rem; }
.hl-fspec li{ grid-template-columns:minmax(0,1fr); gap:3px; }
.hl-rwhy__list dd{ padding-left:0; }
}
@media (max-width:400px){
.hl-rhw__row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.hl-rhw .hl-hcard{ padding:14px 10px; }
.hl-rhw .hl-hcard{ --hl-hcard-media:158px; }
.hl-ioffer__amt b{ font-size:2.7rem; }
.hl-rstage__slot .hl-dev{ --hl-k:.76; transform:scale(.76); margin-block:-19px; }
}
/* ── G9 · REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.hl-rlabel,.hl-rstage__slot .hl-dev,.hl-fpanel__art .hl-dev,.hl-rhw__art .hl-dev{
animation:none !important; }
.hl-fpanel.is-active{ animation:none !important; }
.hl-spot,.hl-btile,.hl-rfund__grid li{ transition:none !important; }
}
/* ===========================================================================
H · FORM LAYER
===========================================================================
The one part of the site the approved prototypes could not hand over, because
none of the three had a form on it. So this is written FROM the approved
system rather than imported into it: the same ink ramp, the same radii, the
same hairline rules, the same 4px spacing scale, the same red used only for
signal. A form is the moment a visitor commits, and a stock admin-template
input in the middle of a designed page is exactly where that confidence
leaks away.
Three decisions worth stating:
* Labels sit ABOVE their input, always. Floating and placeholder-as-label
both lose the label at the moment it is needed — while typing — and both
read badly after an autofill.
* The invalid state is a red rule AND a message, never colour alone: the
message is what a colour-blind visitor and a screen-reader user both get.
* Focus is a visible ring on every control, and it is the same navy ring
the rest of the site uses. Removing an outline is how a keyboard becomes
unusable.
=========================================================================== */
.hl-formsec{ position:relative; padding-block:var(--hl-sec-pad-sm); background:var(--hl-white); }
.hl-formsec.hl-section--alt{ background:var(--hl-paper); }
.hl-formsec.hl-section--dark{ background:var(--hl-ink-850); }
.hl-formsec__grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(28px,3.4vw,56px); }
/* Every track minmax(0,.) with min-width:0 on the children — bridge rule E8.
A long unbroken email address in the aside must not widen the form column. */
.hl-formsec--split .hl-formsec__grid{ grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); align-items:start; }
/* "Other ways to reach us" answers questions a visitor has WHILE filling the
form, and the form is roughly twice its height, so it stayed beside the
fields rather than stopping 540px above them. */
@media (min-width:901px){
.hl-formsec--split .hl-formsec__aside{ position:sticky; top:var(--hl-sticky-top); }
}
.hl-formsec__main, .hl-formsec__aside{ min-width:0; }
.hl-formsec__head{ margin-bottom:var(--hl-s-8); }
.hl-formsec__head .hl-h2{ margin:var(--hl-s-4) 0 0; }
.hl-formsec__head .hl-lead{ margin:var(--hl-s-4) 0 0; max-width:60ch; }
/* -- H1 . THE FORM ------------------------------------------------------- */
.hl-form{ display:block; }
.hl-form__grid{
display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--hl-s-5) var(--hl-s-5);
}
.hl-ff{ min-width:0; display:flex; flex-direction:column; }
.hl-ff--full{ grid-column:1 / -1; }
.hl-ff--half{ grid-column:span 1; }
.hl-ff__label{
display:flex; align-items:baseline; gap:8px; margin-bottom:8px;
font:600 var(--hl-fs-sm)/1.3 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.01em;
}
.hl-ff__opt{ font:400 var(--hl-fs-micro)/1 var(--hl-ff-body); color:var(--hl-text-muted);
letter-spacing:0; text-transform:none; }
.hl-ff__input{
width:100%; min-width:0; padding:13px 15px;
font:400 var(--hl-fs-body)/1.5 var(--hl-ff-body); color:var(--hl-text-dark);
background:var(--hl-white); border:1px solid var(--hl-line-2);
border-radius:var(--hl-r-sm);
transition:border-color var(--hl-t-fast) var(--hl-e-soft),
box-shadow var(--hl-t-fast) var(--hl-e-soft);
appearance:none;
}
.hl-ff__input::placeholder{ color:var(--hl-text-muted); }
.hl-ff__input:hover{ border-color:var(--hl-navy-300); }
.hl-ff__input:focus{
outline:none; border-color:var(--hl-navy-500);
box-shadow:0 0 0 3px rgba(58,63,163,.16);
}
/* The keyboard ring is kept as a real outline as well as the glow, so it
survives a forced-colours mode where box-shadow does not paint. */
.hl-ff__input:focus-visible{ outline:2px solid var(--hl-navy-500); outline-offset:2px; }
.hl-ff__input--area{ resize:vertical; min-height:140px; line-height:1.62; }
.hl-ff__input--select{
padding-right:40px; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23767E96' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 15px center; background-size:12px 8px;
}
.hl-ff.is-invalid .hl-ff__input{ border-color:var(--hl-red-500); }
.hl-ff.is-invalid .hl-ff__input:focus{ box-shadow:0 0 0 3px rgba(207,41,39,.16); }
.hl-ff__err{
display:flex; align-items:flex-start; gap:6px; margin:7px 0 0;
font-size:var(--hl-fs-xs); line-height:1.5; color:var(--hl-red-600); font-weight:500;
}
.hl-ff__err::before{
content:""; flex:none; width:5px; height:5px; margin-top:7px; border-radius:50%;
background:var(--hl-red-500);
}
.hl-ff__help{ margin:7px 0 0; font-size:var(--hl-fs-xs); line-height:1.5; color:var(--hl-text-muted); }
/* -- H2 . CONSENT -------------------------------------------------------- */
.hl-ff--consent{ margin-top:var(--hl-s-6); }
.hl-consent{
display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
cursor:pointer; font-size:var(--hl-fs-sm); line-height:1.6; color:var(--hl-text-body);
}
.hl-consent input[type="checkbox"]{
width:19px; height:19px; margin:2px 0 0; flex:none;
accent-color:var(--hl-navy-600); cursor:pointer;
}
.hl-consent input[type="checkbox"]:focus-visible{ outline:2px solid var(--hl-navy-500); outline-offset:2px; }
.hl-consent__links{ display:inline; }
.hl-consent__links a{
color:var(--hl-navy-500); font-weight:600;
text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.hl-consent__links a:hover{ color:var(--hl-red-500); }
.hl-ff--consent.is-invalid .hl-consent input[type="checkbox"]{ outline:2px solid var(--hl-red-500); outline-offset:2px; }
/* -- H3 . ACTIONS, NOTE AND STATUS --------------------------------------- */
.hl-form__actions{
display:flex; flex-wrap:wrap; align-items:center; gap:var(--hl-s-5);
margin-top:var(--hl-s-8);
}
.hl-form__note{ margin:0; flex:1 1 22ch; font-size:var(--hl-fs-xs); line-height:1.55;
color:var(--hl-text-muted); }
/* The live region is present in every state and empty in most of them, so it
must not reserve space or draw a box when it has nothing to say. */
.hl-form__status:empty{ display:none; }
.hl-form__alert{
display:flex; gap:10px; margin:0 0 var(--hl-s-6); padding:14px 16px;
border:1px solid rgba(207,41,39,.28); border-left:3px solid var(--hl-red-500);
border-radius:var(--hl-r-sm); background:rgba(207,41,39,.05);
font-size:var(--hl-fs-sm); line-height:1.55; color:var(--hl-red-700);
}
.hl-form__sent{
padding:clamp(28px,3vw,40px);
border:1px solid var(--hl-line); border-radius:var(--hl-r-lg);
background:var(--hl-white); box-shadow:var(--hl-sh-md);
}
.hl-form__tick{
display:grid; place-items:center; width:46px; height:46px; margin-bottom:var(--hl-s-5);
border-radius:50%; background:rgba(47,214,163,.14); color:#127A5C;
}
.hl-form__tick svg{ width:24px; height:24px; }
.hl-form__sent .hl-h3{ margin:0 0 var(--hl-s-3); }
.hl-form__sent p{ margin:0; font-size:var(--hl-fs-sm); line-height:1.7;
color:var(--hl-text-muted); max-width:56ch; }
/* -- H4 . THE HONEYPOT --------------------------------------------------- */
/* Hidden from sight, from the tab order (tabindex="-1" on the input) and from
the accessibility tree (aria-hidden on the wrapper). display:none alone is
avoided because some bots skip fields that are display:none — this is placed
off screen instead, which they fill. */
.hl-form__pot{
position:absolute !important; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; pointer-events:none;
}
/* -- H5 . CONTACT PANEL -------------------------------------------------- */
.hl-cpanel{
padding:clamp(22px,2.2vw,30px);
border:1px solid var(--hl-line); border-radius:var(--hl-r-lg);
background:var(--hl-paper);
}
.hl-section--alt .hl-cpanel{ background:var(--hl-white); }
.hl-cpanel__title{ margin:0; font:700 var(--hl-fs-h3)/1.2 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:var(--hl-ls-tight); }
.hl-cpanel__note{ margin:var(--hl-s-4) 0 0; font-size:var(--hl-fs-sm); line-height:1.7;
color:var(--hl-text-muted); }
.hl-cpanel__list{ margin:var(--hl-s-6) 0 0; }
.hl-cpanel__list > div{ padding:14px 0; border-top:1px solid var(--hl-line); }
.hl-cpanel__list > div:first-child{ border-top:0; padding-top:0; }
.hl-cpanel__list dt{
margin-bottom:4px; font:600 var(--hl-fs-micro)/1 var(--hl-ff-mono);
letter-spacing:var(--hl-ls-wide); text-transform:uppercase; color:var(--hl-text-muted);
}
.hl-cpanel__list dd{ margin:0; font-size:var(--hl-fs-sm); line-height:1.6;
color:var(--hl-text-dark); overflow-wrap:anywhere; }
.hl-cpanel__list dd a{ color:var(--hl-navy-500); font-weight:600; }
.hl-cpanel__list dd a:hover{ color:var(--hl-red-500); }
.hl-cpanel__list dd em{ font-style:normal; color:var(--hl-text-muted); font-size:var(--hl-fs-xs); }
.hl-cpanel__list address{ font-style:normal; }
.hl-cpanel__points{ margin:var(--hl-s-6) 0 0; padding:var(--hl-s-5) 0 0;
border-top:1px solid var(--hl-line); display:grid; gap:var(--hl-s-4); }
.hl-cpanel__points li{ display:grid; gap:3px; }
.hl-cpanel__points b{ font:700 var(--hl-fs-sm)/1.35 var(--hl-ff-display);
color:var(--hl-text-dark); letter-spacing:-.01em; }
.hl-cpanel__points span{ font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-muted); }
/* -- H6 . DARK CHAPTER --------------------------------------------------- */
/* A form is normally a light chapter, but the theme is an admin choice and the
choice must not be able to produce unreadable type. */
.hl-formsec.hl-section--dark .hl-ff__label{ color:#fff; }
.hl-formsec.hl-section--dark .hl-ff__opt,
.hl-formsec.hl-section--dark .hl-ff__help{ color:var(--hl-text-light-3); }
.hl-formsec.hl-section--dark .hl-ff__input{
color:#fff; background:rgba(255,255,255,.04); border-color:var(--hl-line-dark-2);
}
.hl-formsec.hl-section--dark .hl-ff__input:focus{ border-color:var(--hl-navy-300);
box-shadow:0 0 0 3px rgba(144,150,228,.22); }
.hl-formsec.hl-section--dark .hl-consent{ color:var(--hl-text-light-2); }
.hl-formsec.hl-section--dark .hl-consent__links a{ color:var(--hl-navy-300); }
.hl-formsec.hl-section--dark .hl-cpanel{ background:rgba(255,255,255,.03);
border-color:var(--hl-line-dark); }
.hl-formsec.hl-section--dark .hl-cpanel__title{ color:#fff; }
.hl-formsec.hl-section--dark .hl-cpanel__note,
.hl-formsec.hl-section--dark .hl-cpanel__points span{ color:var(--hl-text-light-3); }
.hl-formsec.hl-section--dark .hl-cpanel__list > div,
.hl-formsec.hl-section--dark .hl-cpanel__points{ border-color:var(--hl-line-dark); }
.hl-formsec.hl-section--dark .hl-cpanel__list dd,
.hl-formsec.hl-section--dark .hl-cpanel__points b{ color:#fff; }
.hl-formsec.hl-section--dark .hl-form__sent{ background:rgba(255,255,255,.04);
border-color:var(--hl-line-dark); box-shadow:none; }
.hl-formsec.hl-section--dark .hl-form__sent p{ color:var(--hl-text-light-2); }
/* -- H7 . RESPONSIVE ----------------------------------------------------- */
@media (max-width:1024px){
.hl-formsec--split .hl-formsec__grid{ grid-template-columns:minmax(0,1fr); }
/* The panel follows the form on a narrow screen: the form is the reason the
visitor is on the page, and the details beside it are supporting. */
.hl-formsec__aside{ order:2; }
}
@media (max-width:640px){
/* Two half-width fields side by side stop being two fields and start being
two cramped ones somewhere around here. */
.hl-form__grid{ grid-template-columns:minmax(0,1fr); }
.hl-ff--half{ grid-column:1 / -1; }
.hl-form__actions{ gap:var(--hl-s-4); }
.hl-form__actions .hl-btn{ width:100%; justify-content:center; }
.hl-form__note{ flex:1 1 100%; }
}
@media (max-width:430px){
.hl-ff__input{ padding:12px 13px; }
}
/* -- H8 . REDUCED MOTION ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
.hl-ff__input{ transition:none !important; }
}
/* ===========================================================================
H9 · THE SYSTEM LAYOUT
===========================================================================
Chrome for `layouts/system` — the standalone shell the maintenance page uses.
Four rules and a footer, because the page's actual content is an ordinary
approved hero block and needs nothing from here.
The page is a single dark hero on a dark page, so the shell is dark too: a
white bar above a dark hero would be a seam that exists for no reason.
=========================================================================== */
body.hl-body--system{ background:var(--hl-ink-900); color:var(--hl-text-light-2); }
.hl-sysbar{ padding:clamp(20px,3vw,32px) 0; background:var(--hl-ink-900); }
.hl-sysbar__inner{ display:flex; align-items:center; justify-content:center; }
/* Not a link, by design — every destination is 503 while this page is up.
Size comes from the existing `.hl-logo img` rule; only the variable changes,
so the lockup's optical alignment is the same one the header uses. */
.hl-logo--sys{ --hl-logo-h:96px; }
.hl-sysempty{ padding-block:clamp(48px,6vw,96px); text-align:center; }
.hl-sysempty .hl-h2{ color:#fff; }
.hl-sysempty .hl-lead{ color:var(--hl-text-light-2); }
.hl-sysfoot{
padding:clamp(24px,3vw,40px) 0; text-align:center;
background:var(--hl-ink-950); border-top:1px solid var(--hl-line-dark);
}
.hl-sysfoot p{ margin:0; font-size:var(--hl-fs-xs); line-height:1.7; color:var(--hl-text-light-3); }
.hl-sysfoot__contact{ margin-bottom:8px !important; }
.hl-sysfoot__contact a{ color:var(--hl-navy-300); font-weight:600;
text-decoration:underline; text-underline-offset:2px; }
.hl-sysfoot__contact a:hover{ color:#fff; }
@media (max-width:600px){
.hl-logo--sys{ --hl-logo-h:68px; }
}
/* ===========================================================================
I · CATALOG LAYER
===========================================================================
The one part of this site the approved prototypes never drew, for the same
reason section H had to be written from scratch: there was no catalog to
draw. So this is built from the tokens above rather than invented beside
them — the same radii, the same shadow ramp, the same red eyebrow, the same
hover lift the hardware cards already use, and the same `.hl-ihead` chapter
head every inner-page section opens with.
The brief for it was: do not make it look like a generic storefront grid.
Two decisions do most of that work.
* The CARD is a device on its stage, not a photograph in a box. It reuses
`.hl-pslot` and the approved silhouettes, so an unfilled slot reads as
pending rather than as a missing image.
* The FILTER is a rail of chips in the site's own language, not a sidebar
of checkboxes. Underneath it is a radio group, so it is a real form.
Every grid track here is `minmax(0,1fr)` or `minmax(min(100%,N),1fr)` and
every card carries `min-width:0` — bridge rule E8. That is what stops a long
product name pushing the grid wider than the viewport, which is the single
most common way a card grid grows a horizontal scrollbar on a 360px phone.
=========================================================================== */
/* ── I0 · THE CHAPTER'S OWN PADDING ──────────────────────────────────────────
`.hl-cat` had no `padding-block` at all, and that is the whole of the
catalog page's compression.
The Spacing select on this block is set to "None — the composition sets its
own", which is the correct choice and the one nearly every block on this
site makes: `hl-section--none` is on every section of the home page too. The
contract that preset creates is that the BLOCK supplies the padding —
`.hl-sys`, `.hl-hw`, `.hl-ind`, `.hl-net-sec`, `.hl-calc` and `.hl-fund` all
declare `padding-block:var(--hl-sec-pad)` for exactly this reason.
`.hl-cat` never declared it. So the section computed to 0px top and 0px
bottom, "THE CATALOG" began at the literal top edge of its own section with
the hero directly above it, and the chapter ran straight into the closing
band underneath.
One declaration, the same token and the same value every other chapter on
the site already resolves to — 113.66px at 1536px, and it scales with the
viewport because the token is a clamp. The head-to-content gap inside the
chapter is NOT touched: it measures 56px here, and 56px on
`/pos-terminals #types` and `/industries/retail #floor`, so it is already
the site rhythm and moving it would make this page the odd one out. */
.hl-cat{ padding-block:var(--hl-sec-pad); }
/* ── I1 · THE FILTER RAIL ────────────────────────────────────────────────── */
.hl-catfilter{
display:grid; gap:clamp(16px,2vw,24px); margin-bottom:clamp(28px,3vw,44px);
padding:clamp(18px,2vw,26px); border-radius:var(--hl-r-xl);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
}
.hl-section--dark .hl-catfilter{
background:rgba(255,255,255,.04); border-color:var(--hl-line-dark); box-shadow:none;
}
.hl-catfilter__label{
display:block; margin-bottom:10px; padding:0;
font:600 var(--hl-fs-micro)/1 var(--hl-ff-body);
letter-spacing:var(--hl-ls-wider); text-transform:uppercase; color:var(--hl-text-muted);
}
.hl-section--dark .hl-catfilter__label{ color:var(--hl-text-light-3); }
.hl-catfilter__group{ border:0; padding:0; margin:0; min-width:0; }
.hl-catfilter__field{ display:flex; gap:8px; align-items:stretch; }
.hl-catfilter__input{
flex:1 1 auto; min-width:0; width:100%;
padding:11px 14px; border-radius:var(--hl-r-sm);
border:1px solid var(--hl-line-2); background:#fff;
font:400 var(--hl-fs-sm)/1.4 var(--hl-ff-body); color:var(--hl-text-dark);
transition:border-color var(--hl-t-fast) var(--hl-e-out), box-shadow var(--hl-t-fast) var(--hl-e-out);
}
.hl-catfilter__input:focus{
outline:none; border-color:var(--hl-navy-500); box-shadow:0 0 0 3px rgba(58,63,163,.14);
}
.hl-section--dark .hl-catfilter__input{
background:rgba(255,255,255,.06); border-color:var(--hl-line-dark-2); color:#fff;
}
.hl-section--dark .hl-catfilter__input:focus{ border-color:var(--hl-navy-300); }
/* The chips. A wrapping row rather than a horizontal scroller: a filter you
have to scroll to discover is a filter most people never find. */
.hl-catchips{ display:flex; flex-wrap:wrap; gap:8px; }
.hl-catchip{
position:relative; display:inline-flex; align-items:center; gap:8px;
padding:9px 14px; border-radius:var(--hl-r-pill); cursor:pointer;
border:1px solid var(--hl-line-2); background:var(--hl-paper);
font:600 var(--hl-fs-sm)/1 var(--hl-ff-body); color:var(--hl-text-body);
transition:background var(--hl-t-fast) var(--hl-e-out), border-color var(--hl-t-fast) var(--hl-e-out),
color var(--hl-t-fast) var(--hl-e-out);
}
.hl-catchip input{
/* Visually replaced by the chip, NOT removed. `display:none` would take the
radio out of the tab order and out of the accessibility tree, which would
make the whole filter unreachable from a keyboard. */
position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.hl-catchip b{
font:600 var(--hl-fs-micro)/1 var(--hl-ff-mono);
padding:3px 7px; border-radius:var(--hl-r-pill);
background:rgba(10,14,36,.06); color:var(--hl-text-muted);
}
/* The mask itself comes from `[data-ico]` above — the one icon system on this
site. These rules only size it and let it inherit the chip's colour, so a
selected chip's icon turns white with the rest of the chip. */
.hl-catchip__ico{ width:15px; height:15px; }
.hl-catchip:hover{ background:#fff; border-color:var(--hl-line); }
.hl-catchip:has(input:focus-visible){ outline:2px solid var(--hl-navy-500); outline-offset:3px; }
/* The same ring where `:has()` is not supported. The radio is a full-size
transparent overlay, so an outline on the input itself traces the chip's own
box — square rather than pill, and that is the entire difference. Scoped to
@supports so the two never draw at once, because the alternative to a
slightly different ring is no focus indicator at all on the filter. */
@supports not selector(:has(*)){
.hl-catchip input:focus-visible{ outline:2px solid var(--hl-navy-500); outline-offset:3px; }
}
.hl-catchip:has(input:checked), .hl-catchip.is-active{
background:var(--hl-brand-navy); border-color:var(--hl-brand-navy); color:#fff;
}
.hl-catchip:has(input:checked) b, .hl-catchip.is-active b{
background:rgba(255,255,255,.18); color:#fff;
}
.hl-section--dark .hl-catchip{
background:rgba(255,255,255,.05); border-color:var(--hl-line-dark-2); color:var(--hl-text-light-2);
}
.hl-section--dark .hl-catchip b{ background:rgba(255,255,255,.10); color:var(--hl-text-light-3); }
.hl-catfilter__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.hl-catcheck{
display:inline-flex; align-items:center; gap:9px; cursor:pointer;
font:500 var(--hl-fs-sm)/1 var(--hl-ff-body); color:var(--hl-text-body);
}
.hl-catcheck input{ width:17px; height:17px; accent-color:var(--hl-brand-navy); cursor:pointer; }
.hl-catcheck input:focus-visible{ outline:2px solid var(--hl-navy-500); outline-offset:2px; }
.hl-section--dark .hl-catcheck{ color:var(--hl-text-light-2); }
.hl-catfilter__clear{ margin-inline-start:auto; }
.hl-catcount{
margin-bottom:clamp(18px,2vw,26px);
font:500 var(--hl-fs-sm)/1.5 var(--hl-ff-body); color:var(--hl-text-muted);
}
.hl-section--dark .hl-catcount{ color:var(--hl-text-light-3); }
/* ── I2 · THE GRID AND THE CARD ──────────────────────────────────────────── */
/*
* `grid-auto-rows:1fr` is what makes "consistent card heights" true across the
* whole grid rather than only within a row. Auto rows size to their own tallest
* item, so one card wrapping one extra line takes its entire row with it: the
* shipped catalog measured 416.6px in row 1 against 391.5px in row 2, purely
* because "Smart Terminal" is the only product carrying a badge next to its
* category chip and that pair wraps to two lines. Nothing was wrong with the
* card; the rows were simply independent.
*
* In a grid whose own height is indefinite, `1fr` rows all resolve to the
* tallest row's max-content height, which is exactly the wanted behaviour and
* needs no JavaScript and no fixed height. The extra height lands as whitespace
* above the footer, because `.hl-pcard__foot{margin:auto 0 0}` already holds the
* price and the affordance against the bottom edge.
*/
.hl-pgrid{
display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
grid-auto-rows:1fr;
gap:clamp(14px,1.6vw,22px); list-style:none; margin:0; padding:0;
}
.hl-pgrid--rel{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
/* `auto-fill` lays four tracks whatever the row holds, so a product with only
two siblings in its category rendered two cards and two empty tracks — half
a row of nothing (audit PD-05). The renderer knows the count, so the grid
uses it: the cards keep their size and the row simply ends, left-aligned on
the same spine as the chapter head above it. */
@media (min-width:901px){
.hl-pgrid--rel[data-count="1"]{ grid-template-columns:minmax(0,1fr); max-width:380px; }
.hl-pgrid--rel[data-count="2"]{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px; }
.hl-pgrid--rel[data-count="3"]{ grid-template-columns:repeat(3,minmax(0,1fr)); max-width:1040px; }
}
.hl-pcard{ min-width:0; display:flex; }
.hl-pcard__in{
position:relative; display:flex; flex-direction:column; width:100%; min-width:0;
padding:20px 18px 18px; border-radius:var(--hl-r-xl); overflow:hidden;
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
color:inherit; text-decoration:none;
transition:transform 420ms var(--hl-e-out), box-shadow 420ms var(--hl-e-out),
border-color 420ms var(--hl-e-out);
}
.hl-pcard__in::after{
content:""; position:absolute; inset:auto -30% -60% -30%; height:70%;
background:radial-gradient(ellipse at 50% 0%, rgba(42,45,124,.09), transparent 68%);
pointer-events:none;
}
a.hl-pcard__in:hover{ transform:translateY(-7px); box-shadow:var(--hl-sh-md); border-color:var(--hl-line-2); }
a.hl-pcard__in:focus-visible{ outline:2px solid var(--hl-brand-red); outline-offset:3px; }
.hl-section--dark .hl-pcard__in{
background:rgba(255,255,255,.04); border-color:var(--hl-line-dark); box-shadow:none;
}
/*
* The card's media frame. `--hl-pslot-h` is a fixed band rather than the
* `min-height` this used to be, and that single change is what makes a grid of
* cards line up: a `min-height` is a floor the artwork can push through, so the
* tallest silhouette in the row decided where every title started.
*
* 158px is not arbitrary — it is the smallest band that contains the largest
* PAINTED device. The silhouettes are scaled with `transform`, which does not
* reserve layout space, so `.hl-dev--smart` is a 214px-tall box painted at
* 154px and `.hl-dev--pump` a 242px box painted at 145px. Both fit; the layout
* boxes overflow the band and are clipped by `.hl-pcard__in{overflow:hidden}`,
* which is exactly what should happen to space nothing is drawn in.
*
* There is no `max-height` on the image any more. The 170px that used to be here
* was larger than the frame, so a portrait upload inflated the band it was
* supposed to fit inside — the 26px of card-height variation measured across
* upload shapes was entirely this declaration. `max-height:100%` on
* `.hl-pslot img` now resolves against a definite row instead.
*/
.hl-pcard__art{ display:flex; justify-content:center; margin-bottom:16px;
--hl-pslot-h:158px; --hl-pslot-inset:8px; }
.hl-pcard__art .hl-pslot{ width:100%; justify-content:center; }
.hl-pcard__art .hl-dev{ --hl-k:.78; transform:scale(.78); }
.hl-pcard__art .hl-dev--smart{ --hl-k:.72; transform:scale(.72); }
.hl-pcard__art .hl-dev--rest{ --hl-k:.66; transform:scale(.66); }
.hl-pcard__art .hl-dev--pump{ --hl-k:.6; transform:scale(.6); }
.hl-pcard__body{ display:flex; flex-direction:column; gap:6px; min-width:0; flex:1; }
.hl-pcard__tags{ display:flex; flex-wrap:wrap; gap:6px; margin:0; }
.hl-pcard__cat, .hl-pcard__badge{
font:600 var(--hl-fs-micro)/1 var(--hl-ff-body);
letter-spacing:var(--hl-ls-wide); text-transform:uppercase;
padding:4px 8px; border-radius:var(--hl-r-xs);
}
.hl-pcard__cat{ background:var(--hl-paper-2); color:var(--hl-text-muted); }
.hl-pcard__badge{ background:rgba(207,41,39,.10); color:var(--hl-brand-red); }
.hl-section--dark .hl-pcard__cat{ background:rgba(255,255,255,.08); color:var(--hl-text-light-3); }
.hl-pcard__title{
margin:2px 0 0; font:700 var(--hl-fs-h4)/1.3 var(--hl-ff-display);
letter-spacing:-.02em; color:var(--hl-text-dark); overflow-wrap:anywhere;
}
.hl-section--dark .hl-pcard__title{ color:#fff; }
.hl-pcard__maker{ margin:0; font:500 var(--hl-fs-xs)/1.4 var(--hl-ff-mono); color:var(--hl-text-muted); }
.hl-pcard__text{ margin:0; font-size:var(--hl-fs-sm); line-height:1.6; color:var(--hl-text-body); }
.hl-section--dark .hl-pcard__text{ color:var(--hl-text-light-2); }
/* One supporting line under the copy — the financing note, where a block passes
one. Red would read as a warning and the body ramp would read as more prose,
so it takes the navy the rest of the system uses for "this is a term". */
.hl-pcard__note{
margin:2px 0 0; font:600 var(--hl-fs-xs)/1.5 var(--hl-ff-body); color:var(--hl-navy-600);
}
.hl-section--dark .hl-pcard__note{ color:var(--hl-navy-300); }
.hl-pcard__foot{
display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
gap:8px; margin:auto 0 0; padding-top:14px;
}
.hl-pcard__price{ display:inline-flex; align-items:baseline; gap:6px; min-width:0; }
.hl-pcard__price i{ font-style:normal; font-size:var(--hl-fs-xs); color:var(--hl-text-muted); }
.hl-pcard__price s{ font-size:var(--hl-fs-xs); color:var(--hl-text-muted); }
.hl-pcard__price b{ font:700 var(--hl-fs-body)/1 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-pcard__call{ font:600 var(--hl-fs-xs)/1.3 var(--hl-ff-body); color:var(--hl-text-muted); }
.hl-section--dark .hl-pcard__price b{ color:#fff; }
.hl-pcard__go{
display:inline-flex; align-items:center; gap:6px; margin-inline-start:auto;
font:600 var(--hl-fs-xs)/1 var(--hl-ff-body); color:var(--hl-brand-red);
}
.hl-pcard__go .hl-arrow{ transition:transform var(--hl-t-fast) var(--hl-e-out); }
a.hl-pcard__in:hover .hl-pcard__go .hl-arrow{ transform:translateX(3px); }
/* ── I3 · EMPTY RESULT, PAGINATION AND THE CHAPTER FOOT ──────────────────── */
.hl-catempty{
padding:clamp(36px,5vw,64px) clamp(20px,3vw,40px); text-align:center;
border-radius:var(--hl-r-xl); border:1px dashed var(--hl-line-2); background:var(--hl-paper);
}
.hl-section--dark .hl-catempty{ background:rgba(255,255,255,.03); border-color:var(--hl-line-dark-2); }
.hl-catempty__title{ margin:0 0 8px; font:700 var(--hl-fs-h3)/1.3 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-catempty__text{
margin:0 auto var(--hl-s-6); max-width:46ch;
font-size:var(--hl-fs-sm); color:var(--hl-text-muted);
}
.hl-section--dark .hl-catempty__title{ color:#fff; }
.hl-section--dark .hl-catempty__text{ color:var(--hl-text-light-3); }
.hl-catpages{
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:10px; margin-top:clamp(28px,3vw,44px);
}
.hl-catpages__list{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.hl-catpages a, .hl-catpages span.is-current, .hl-catpages__step{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
min-width:40px; height:40px; padding-inline:12px; border-radius:var(--hl-r-sm);
font:600 var(--hl-fs-sm)/1 var(--hl-ff-body); text-decoration:none;
border:1px solid var(--hl-line-2); background:#fff; color:var(--hl-text-body);
transition:background var(--hl-t-fast) var(--hl-e-out), border-color var(--hl-t-fast) var(--hl-e-out);
}
.hl-catpages a:hover{ border-color:var(--hl-navy-500); color:var(--hl-brand-navy); }
.hl-catpages a:focus-visible, .hl-catpages__step:focus-visible{ outline:2px solid var(--hl-brand-red); outline-offset:2px; }
.hl-catpages span.is-current{ background:var(--hl-brand-navy); border-color:var(--hl-brand-navy); color:#fff; }
.hl-catpages__gap{ padding-inline:4px; color:var(--hl-text-muted); }
.hl-section--dark .hl-catpages a, .hl-section--dark .hl-catpages__step{
background:rgba(255,255,255,.05); border-color:var(--hl-line-dark-2); color:var(--hl-text-light-2);
}
/* ── THE NOTE AND ITS ACTION ARE ONE COMPOSITION ──────────────────────────
`justify-content:space-between` across the full 1,192px content width pushed
the financing note hard left and its CTA hard right, leaving a 469px gap
between a sentence and the button that answers it — measured at every width
from 1,280px up. Technically it fitted; it read as two unrelated things.
The pair is now GROUPED rather than pushed apart: they sit together from the
left with a gap wide enough to separate them and no wider.
`max-width` on this element was the first attempt and it was wrong — the
element carries the chapter's dividing rule, so capping it left a rule that
stopped 232px short of the product grid it was dividing. One misalignment
traded for another. The rule keeps the full content width; only the
arrangement inside it changed.
Below the breakpoint `flex-wrap` still stacks them, which was always
correct. */
.hl-catfoot{
display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;
gap:clamp(20px,3vw,64px); margin-top:clamp(28px,3vw,44px);
padding-top:clamp(20px,2.4vw,32px); border-top:1px solid var(--hl-line);
}
.hl-catfoot__note{ margin:0; max-width:64ch; font-size:var(--hl-fs-xs); line-height:1.7; color:var(--hl-text-muted); }
.hl-section--dark .hl-catfoot{ border-top-color:var(--hl-line-dark); }
.hl-section--dark .hl-catfoot__note{ color:var(--hl-text-light-3); }
/* ── I4 · THE PRODUCT DETAIL PAGE ────────────────────────────────────────── */
.hl-pdp__maker{
margin:-6px 0 var(--hl-s-4); font:500 var(--hl-fs-sm)/1 var(--hl-ff-mono);
color:var(--hl-text-light-3); letter-spacing:.02em;
}
.hl-pdp__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin:0 0 var(--hl-s-6); }
.hl-pdp__price i{ font-style:normal; font-size:var(--hl-fs-sm); color:var(--hl-text-light-3); }
.hl-pdp__price s{ font-size:var(--hl-fs-body); color:var(--hl-text-light-4); }
.hl-pdp__price b{ font:800 clamp(1.5rem,2.4vw,2rem)/1 var(--hl-ff-display); color:#fff; letter-spacing:-.02em; }
.hl-pdp__price small{ flex:1 1 100%; font-size:var(--hl-fs-xs); color:var(--hl-text-light-3); }
.hl-pdp__call{ font:600 var(--hl-fs-body)/1 var(--hl-ff-body); color:var(--hl-navy-300); }
/* The gallery. Thumbnails under the stage — never a hover-only swap, which
would put every image after the first out of reach on a touch device. */
.hl-pgal{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:var(--hl-s-5); }
.hl-pgal__thumb{
width:56px; height:56px; padding:5px; border-radius:var(--hl-r-sm); cursor:pointer;
background:rgba(255,255,255,.06); border:1px solid var(--hl-line-dark-2);
transition:border-color var(--hl-t-fast) var(--hl-e-out), background var(--hl-t-fast) var(--hl-e-out);
}
.hl-pgal__thumb img{ width:100%; height:100%; object-fit:contain; }
.hl-pgal__thumb:hover{ background:rgba(255,255,255,.12); }
.hl-pgal__thumb:focus-visible{ outline:2px solid var(--hl-red-400); outline-offset:2px; }
.hl-pgal__thumb.is-active{ border-color:var(--hl-red-400); background:rgba(207,41,39,.14); }
.hl-pdp__grid{
display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,4vw,64px); align-items:start;
}
.hl-pdp__copy{ min-width:0; }
.hl-pfeat{ list-style:none; margin:0; padding:0; display:grid; gap:12px; min-width:0; }
.hl-pfeat__row{
display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start;
padding:14px 16px; border-radius:var(--hl-r-md);
background:var(--hl-paper); border:1px solid var(--hl-line);
}
.hl-pfeat__tick{
position:relative; width:18px; height:18px; border-radius:50%; flex:none; margin-top:2px;
background:var(--hl-brand-navy);
}
.hl-pfeat__tick::after{
content:""; position:absolute; inset:0; margin:auto; width:8px; height:4px;
border-left:2px solid #fff; border-bottom:2px solid #fff;
transform:rotate(-45deg) translate(1px,-1px);
}
.hl-pfeat__txt b{ display:block; font:600 var(--hl-fs-body)/1.35 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-pfeat__txt i{
display:block; margin-top:3px; font-style:normal;
font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-muted);
}
.hl-pdp__video{
border-radius:var(--hl-r-xl); overflow:hidden;
border:1px solid var(--hl-line); background:var(--hl-ink-900);
}
.hl-pdp__video video{ display:block; width:100%; height:auto; }
/* Specifications — one definition list per group, on the dark chapter. */
/* ── Specification groups FLOW; they do not line up in rows ────────────────
A grid aligns rows, so a one-row group beside a six-row group left the
difference blank: on the Valor VP800 that was ~140px under CAMERA, ~190px
under COMPLIANCE, ~120px under ENVIRONMENT and ~140px under PRINTER — about
600px of dead space in a 1,700px chapter (audit PD-01 / GROUP J).
Multi-column layout has no rows to align. Each group is kept whole with
`break-inside:avoid`, the browser balances the columns, and a chapter is now
as tall as its content instead of as tall as its worst pairing. */
.hl-pspecs{
columns:2; column-gap:clamp(24px,3vw,52px);
}
.hl-pspecs__group{
min-width:0; break-inside:avoid; -webkit-column-break-inside:avoid;
margin:0 0 clamp(20px,2.4vw,32px);
}
.hl-pspecs__group:last-child{ margin-bottom:0; }
@media (max-width:760px){ .hl-pspecs{ columns:1; } }
.hl-pspecs__title{
margin:0 0 var(--hl-s-4); font:600 var(--hl-fs-micro)/1 var(--hl-ff-body);
letter-spacing:var(--hl-ls-wider); text-transform:uppercase; color:var(--hl-navy-300);
}
.hl-pspecs__list{ margin:0; }
.hl-pspecs__row{
display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:14px;
padding:11px 0; border-bottom:1px solid var(--hl-line-dark);
}
.hl-pspecs__row dt{ font-size:var(--hl-fs-sm); color:var(--hl-text-light-3); }
.hl-pspecs__row dd{ margin:0; font-size:var(--hl-fs-sm); color:#fff; overflow-wrap:anywhere; }
/* Where it fits. */
.hl-puse{
display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr));
gap:clamp(14px,1.6vw,22px); list-style:none; margin:0; padding:0;
}
.hl-puse__card{
min-width:0; padding:22px 20px; border-radius:var(--hl-r-xl);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
}
.hl-puse__ico{ width:22px; height:22px; margin-bottom:14px; color:var(--hl-brand-red); }
.hl-puse__title{ margin:0 0 6px; font:700 var(--hl-fs-h4)/1.3 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-puse__text{ margin:0; font-size:var(--hl-fs-sm); line-height:1.65; color:var(--hl-text-muted); }
/* Financing strip and the closing band. */
.hl-pdpfin{
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,3vw,48px);
align-items:center; padding:clamp(26px,3vw,44px); border-radius:var(--hl-r-2xl);
background:#fff; border:1px solid var(--hl-line); box-shadow:var(--hl-sh-sm);
}
.hl-pdpfin__title{ margin:0 0 var(--hl-s-4); font-size:var(--hl-fs-h3); letter-spacing:-.02em; }
.hl-pdpfin__note{ margin:0 0 var(--hl-s-3); font-size:var(--hl-fs-sm); line-height:1.7; color:var(--hl-text-body); }
.hl-pdpfin__disc{ margin:0; max-width:70ch; font-size:var(--hl-fs-xs); line-height:1.7; color:var(--hl-text-muted); }
.hl-pdpend{ max-width:640px; margin-inline:auto; text-align:center; }
.hl-pdpend__title{ margin:0 0 var(--hl-s-4); font-size:var(--hl-fs-h2); color:#fff; letter-spacing:-.02em; }
.hl-pdpend__text{ margin:0 0 var(--hl-s-8); font-size:var(--hl-fs-lede); color:var(--hl-text-light-2); }
.hl-pdpend__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
/* ── I5 · RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width:1024px){
.hl-pdp__grid{ grid-template-columns:minmax(0,1fr); }
.hl-pdpfin{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px){
.hl-catfilter{ padding:16px; }
.hl-catfilter__field{ flex-wrap:wrap; }
.hl-catfilter__submit{ width:100%; }
.hl-catfilter__clear{ margin-inline-start:0; }
.hl-catfilter__acts{ justify-content:space-between; }
/* The counts are the first thing to go when space runs out. The category
name is the label; the count was only ever supporting information. */
.hl-catchip b{ display:none; }
.hl-pgrid{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
/*
* A shorter band on a phone, and the silhouettes scaled to match it. The band
* and the scale factors have to move together: 140px of frame with the desktop
* scales would paint a 154px device into it, which is how artwork ends up
* sitting on top of its own caption. Every value below is (band - 4px) / the
* device's layout height or less.
*/
.hl-pcard__art{ --hl-pslot-h:140px; }
.hl-pcard__art .hl-dev{ --hl-k:.69; transform:scale(.69); }
.hl-pcard__art .hl-dev--smart{ --hl-k:.63; transform:scale(.63); }
.hl-pcard__art .hl-dev--rest{ --hl-k:.6; transform:scale(.6); }
.hl-pcard__art .hl-dev--pump{ --hl-k:.56; transform:scale(.56); }
.hl-pspecs__row{ grid-template-columns:minmax(0,1fr); gap:2px; }
.hl-pspecs__row dd{ font-weight:600; }
.hl-catpages__step span{ display:none; }
}
@media (max-width:420px){
.hl-pgrid{ grid-template-columns:minmax(0,1fr); }
.hl-pcard__foot{ align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
.hl-pcard__in, .hl-pcard__go .hl-arrow{ transition:none; }
a.hl-pcard__in:hover{ transform:none; }
}
/* ── I6 · THE SHOWCASE ROW — the `products` block's Carousel and Grid ──────
The other four layouts of that block (hardware, showcase, insert, and the
hardware chapter) are finished compositions with their own views and their own
CSS above. These two were not: they carried a `.hl-product-card` vocabulary
that had no rules anywhere, so selecting either in Admin rendered an unstyled
bulleted list of names. They now render `partials/product-card` — the same
card as the catalog grid and the related-equipment row — which leaves only the
container to describe, and the container is the whole of this subsection.
Nothing here is reachable by an existing page: no live section currently
selects Carousel or Grid. It is the Admin-reachable hole behind that fact that
is being closed. */
.hl-products{ position:relative; }
/* Grid: the list already carries `.hl-pgrid`, the catalog's own grid, so there
is deliberately no rule for `.hl-products--grid`. Said out loud so the next
reader does not go hunting for a declaration that should not exist. */
/*
* Carousel: one scroll-snapping row that works with no JavaScript at all.
* modules/carousel.js has always opened with "the server renders a plain
* semantic that is already a usable, swipeable, scroll-snapping row via
* CSS alone" — true of `.hl-reviews`, and until now not true of this one. The
* arrows it wires drive `scrollBy` on exactly this element, and its step is the
* first child's width plus the gap, so the row has to be the scroll container
* and the cards have to be non-shrinking for the controls to page cleanly.
*
* `display:flex` overrides `.hl-pgrid`'s grid on the same element — two classes
* to one, so no !important and no restructuring of the markup. The gap comes
* from `.hl-pgrid` and applies unchanged in a flex row.
*/
.hl-products--carousel .hl-products__list{
display:flex; flex-wrap:nowrap;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding-inline-start:2px;
/*
* Making one axis scrollable makes the other a scroll container too, so the
* card's 7px hover lift and its 3px focus ring would be clipped by the row
* itself. The padding is reserved room for both, not decoration — remove it
* and hovering a card in a carousel visibly shaves its top edge.
*/
padding:10px 2px 16px;
scrollbar-width:thin; scrollbar-color:var(--hl-line-2) transparent;
}
/* A card in a grid sizes itself from the column. In a row it has to be told, and
it must not shrink — `flex:0 0` is what makes every snap position land on a
card of the same width. */
.hl-products--carousel .hl-pcard{ flex:0 0 clamp(232px, 76vw, 300px); scroll-snap-align:start; }
@media (min-width:48rem){
.hl-products--carousel .hl-pcard{ flex-basis:clamp(244px, 26vw, 304px); }
}
.hl-products--carousel .hl-products__list::-webkit-scrollbar{ height:8px; }
.hl-products--carousel .hl-products__list::-webkit-scrollbar-thumb{
background:var(--hl-line-2); border-radius:999px;
}
/* The scrollbar is an affordance — it is the only standing signal that there is
more row to the right — so it is thinned on dark bands, never hidden. */
.hl-section--dark .hl-products--carousel .hl-products__list,
.hl-section--brand .hl-products--carousel .hl-products__list{
scrollbar-color:rgba(255,255,255,.22) transparent;
}
.hl-section--dark .hl-products--carousel .hl-products__list::-webkit-scrollbar-thumb,
.hl-section--brand .hl-products--carousel .hl-products__list::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.22);
}
/* The hand-off line under either layout: "View all equipment →". Centred, since
both layouts above it are centred; the link's own colour and its hover come
from the J4 button layer, which is where the contrast rules live. */
.hl-section__more{ margin:var(--hl-s-8) 0 0; text-align:center; }
/* ===========================================================================
J · ADMIN-CONTROLLED SECTION ACCENTS, AND THE BUTTON/LINK CONTRAST LAYER
---------------------------------------------------------------------------
Section A's docblock used to say "nothing in this file is reachable from
Admin". That is no longer true, and the distinction that replaced it matters:
an administrator selects an APPROVED OPTION; the stylesheet decides what
that option looks like.
Every class below is emitted by section_classes() from a `select` whose
options are declared in BlockRegistry. There is still no CSS field, and the
single free-form control — a custom hex — is validated in the sanitiser and
arrives as a custom property on a scoped rule, never as inline CSS.
Nothing here changes an existing page. Every control's default is "automatic",
which emits no class at all, and every token falls back to the approved value
it replaced.
=========================================================================== */
/* ── J1 · CHAPTER NUMERAL INK ─────────────────────────────────────────────
The outlined 01 / 02 / 03. Its default is a hairline on light bands and a
20%-white stroke on dark ones, which is right for a page that alternates —
and wrong for six navy sections in a row, which is the problem these give an
administrator a way to solve. */
.hl-cn--hairline{ --hl-cn-ink:var(--hl-line-2); }
.hl-cn--navy { --hl-cn-ink:var(--hl-navy-400); }
.hl-cn--red { --hl-cn-ink:var(--hl-red-400); }
.hl-cn--ink { --hl-cn-ink:var(--hl-ink-700); }
.hl-cn--white { --hl-cn-ink:rgba(255,255,255,.34); }
.hl-cn--faint { --hl-cn-ink:rgba(255,255,255,.16); }
/* Filled rather than outlined — the same numeral at a weight that reads as a
decision rather than a watermark. Kept deliberately low-contrast: a chapter
number that competes with the heading is a bug, not a feature. */
.hl-cn--solid{ --hl-cn-fill:var(--hl-cn-ink, var(--hl-line-2)); }
.hl-cn--solid .hl-ihead__n{ -webkit-text-stroke-width:0; }
/* ── J2 · EYEBROW INK ─────────────────────────────────────────────────────
The eyebrow carries a small gradient bar; recolouring the text without the
bar would look like an oversight, so both move together. */
.hl-eb--red { --hl-eb-ink:var(--hl-brand-red);
--hl-eb-bar:linear-gradient(180deg,var(--hl-red-400),var(--hl-red-600));
--hl-eb-glow:0 0 12px rgba(207,41,39,.6); }
.hl-eb--navy { --hl-eb-ink:var(--hl-navy-500);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-400),var(--hl-navy-600));
--hl-eb-glow:0 0 12px rgba(42,45,124,.45); }
.hl-eb--light{ --hl-eb-ink:var(--hl-navy-300);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-300),var(--hl-navy-500));
--hl-eb-glow:0 0 12px rgba(144,150,228,.45); }
.hl-eb--white{ --hl-eb-ink:#fff;
--hl-eb-bar:linear-gradient(180deg,#fff,rgba(255,255,255,.5));
--hl-eb-glow:0 0 12px rgba(255,255,255,.35); }
.hl-eb--muted{ --hl-eb-ink:var(--hl-text-muted);
--hl-eb-bar:linear-gradient(180deg,var(--hl-line-2),var(--hl-text-muted));
--hl-eb-glow:none; }
/* ── J3 · HEADING INK ─────────────────────────────────────────────────────
Restricted to the section heading, and restricted to values that hold their
contrast on the band the option is offered for. There is no "any colour"
heading: a heading is the one element on a section that cannot be allowed to
fail legibility. */
.hl-hd--ink { --hl-hd-ink:var(--hl-text-dark); }
.hl-hd--navy { --hl-hd-ink:var(--hl-brand-navy); }
.hl-hd--white{ --hl-hd-ink:#fff; }
/* A custom hex is validated in PHP, then applied through these tokens by a
scoped rule PageRenderer emits — `.hl-s-{ --hl-cn-ink:#… }`. The
class is only emitted when a custom value exists, so a page that uses none
produces byte-identical markup to before. */
/* ===========================================================================
J4 · BUTTONS AND LINKS — EVERY VARIANT, EVERY STATE, BOTH BANDS
---------------------------------------------------------------------------
Two button systems reached the same element:
components.css paints .hl-btn from --hl-btn-bg / --hl-btn-fg /
--hl-btn-border, and re-asserts the FOREGROUND on :hover
(`.hl-btn:hover{ color:var(--hl-btn-fg) }`, default #fff).
this file sets `color` and `background` directly, per variant.
They agree at rest and disagree on hover, and that disagreement is a defect
that shipped: "View All Equipment" (.hl-btn--link, red) sits on a white
section and turned WHITE on hover, because the E-bridge reset for `--link`
neutralised --hl-btn-bg and --hl-btn-border and never reset --hl-btn-fg.
Auditing the rest of the family rather than patching that one call site found
three more instances of the same class of bug:
.hl-btn--secondary white background, ink label, and NO :hover rule at all
— so hover fell through to #fff on #fff.
.hl-btn--ghost `color:#fff` unconditionally, while the `content` and
`promotion` blocks render it on a LIGHT band.
every dark-band button layout.css's `.hl-section--dark a:hover` is more
specific than `.hl-btn:hover`, so hovering the primary
CTA repainted its label in --hl-accent-light — which is
the colour of its own background. Fixed at source there
with `:not(.hl-btn)`.
The mechanism below replaces the two-system fight with one token. Every
variant declares `--hl-btn-ink`; one rule re-asserts it on every state. A
variant can therefore never be handed a foreground it did not choose.
=========================================================================== */
.hl-btn{ --hl-btn-ink:currentColor; }
/* The single rule that outranks components.css's `.hl-btn:hover`: same
specificity, later file — so it wins, and it wins with the variant's own ink
rather than with #fff. */
.hl-btn:hover,
.hl-btn:focus,
.hl-btn:focus-visible,
.hl-btn:active{ color:var(--hl-btn-ink); }
/* The loading spinner is drawn from --hl-btn-fg by components.css; point it at
the same ink so a loading button does not flash a white ring on white. */
.hl-btn.is-loading::before{ color:var(--hl-btn-ink); border-top-color:transparent; }
/* Focus. base.css already rings every anchor and button; these make the ring
correct on a band whose class is `--dark` rather than `.hl-on-dark`, and stop
`overflow:hidden` from clipping it on the pill shapes. */
.hl-btn:focus-visible{
outline:3px solid var(--hl-brand-red); outline-offset:3px; overflow:visible;
}
.hl-section--dark .hl-btn:focus-visible,
.hl-section--brand .hl-btn:focus-visible,
.hl-ihero .hl-btn:focus-visible,
.hl-shero .hl-btn:focus-visible{
outline-color:#fff; box-shadow:0 0 0 6px rgba(207,41,39,.45);
}
/* ── J4.1 · PRIMARY / ACCENT — the red gradient ────────────────────────────
Reads on both bands, so it does not vary by section. */
.hl-btn--primary,
.hl-btn--accent{ --hl-btn-ink:#fff; }
/* ── J4.2 · DARK — the navy gradient ───────────────────────────────────── */
.hl-btn--dark{ --hl-btn-ink:#fff; }
/* ── J4.3 · LIGHT / SECONDARY — white ground, ink label ────────────────────
Identical treatment; `--secondary` is the vocabulary alias the page builder
offers. On a light band a white pill needs an edge or it is a floating label,
and it needs a hover that changes the background rather than the ink. */
.hl-btn--light,
.hl-btn--secondary{ --hl-btn-ink:var(--hl-ink-800); color:var(--hl-btn-ink); background:#fff; }
.hl-btn--light:hover,
.hl-btn--secondary:hover{ --hl-btn-ink:var(--hl-ink-900); background:var(--hl-paper); transform:translateY(-2px); }
.hl-btn--light:active,
.hl-btn--secondary:active{ background:var(--hl-paper-2); transform:translateY(0); }
.hl-section--light .hl-btn--light,
.hl-section--light .hl-btn--secondary,
.hl-section--alt .hl-btn--light,
.hl-section--alt .hl-btn--secondary{
border:1px solid var(--hl-line-2); box-shadow:var(--hl-sh-sm);
}
.hl-section--light .hl-btn--light:hover,
.hl-section--light .hl-btn--secondary:hover,
.hl-section--alt .hl-btn--light:hover,
.hl-section--alt .hl-btn--secondary:hover{ border-color:var(--hl-brand-navy); background:var(--hl-paper); }
/* ── J4.4 · GHOST — the quiet companion to a primary ───────────────────────
The approved treatment is a translucent white pill for a dark environment.
The `content`, `promotion` and `products` blocks all render it on a light one,
where `color:#fff` made the label vanish. On a light band it becomes the same
shape in ink on white — the design's own light-band treatment, not a new
button. */
.hl-btn--ghost{ --hl-btn-ink:#fff; color:var(--hl-btn-ink); }
.hl-btn--ghost:hover{ --hl-btn-ink:#fff; }
.hl-section--light .hl-btn--ghost,
.hl-section--alt .hl-btn--ghost{
--hl-btn-ink:var(--hl-text-dark);
color:var(--hl-btn-ink);
background:#fff; border-color:var(--hl-line-2); backdrop-filter:none;
}
.hl-section--light .hl-btn--ghost:hover,
.hl-section--alt .hl-btn--ghost:hover{
--hl-btn-ink:var(--hl-brand-navy);
background:var(--hl-paper); border-color:var(--hl-brand-navy);
}
/* ── J4.5 · OUTLINE ───────────────────────────────────────────────────────
E3 already gave this its light-band form; what it lacked was an ink token, so
hover still resolved through --hl-btn-fg. */
.hl-btn--outline{ --hl-btn-ink:#fff; color:var(--hl-btn-ink); }
.hl-btn--outline:hover{ --hl-btn-ink:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.34); }
.hl-section--light .hl-btn--outline,
.hl-section--alt .hl-btn--outline{ --hl-btn-ink:var(--hl-text-dark); color:var(--hl-btn-ink); }
.hl-section--light .hl-btn--outline:hover,
.hl-section--alt .hl-btn--outline:hover{ --hl-btn-ink:var(--hl-brand-navy); }
/* ── J4.6 · TEXT LINK — the reported bug, and its whole family ─────────────
Red on a light band, a lighter red on a dark one, and never white on either.
The hover deepens the red rather than replacing it, so the underline that
grows underneath is the state change — which is what the design intended. */
.hl-btn--link{ --hl-btn-ink:var(--hl-brand-red); color:var(--hl-btn-ink); }
.hl-btn--link:hover,
.hl-btn--link:active{ --hl-btn-ink:var(--hl-red-700); }
.hl-section--dark .hl-btn--link,
.hl-section--brand .hl-btn--link{ --hl-btn-ink:var(--hl-red-400); }
.hl-section--dark .hl-btn--link:hover,
.hl-section--brand .hl-btn--link:hover{ --hl-btn-ink:var(--hl-red-300); }
.hl-btn--link-light{ --hl-btn-ink:var(--hl-navy-300); color:var(--hl-btn-ink); }
.hl-btn--link-light:hover{ --hl-btn-ink:#fff; }
.hl-section--light .hl-btn--link-light,
.hl-section--alt .hl-btn--link-light{ --hl-btn-ink:var(--hl-navy-500); }
.hl-section--light .hl-btn--link-light:hover,
.hl-section--alt .hl-btn--link-light:hover{ --hl-btn-ink:var(--hl-brand-navy); }
/* The E-bridge reset neutralised --hl-btn-bg and --hl-btn-border for a text
link and stopped short of the foreground. Completed here. */
.hl-btn--link,
.hl-btn--link:hover,
.hl-btn--link:focus-visible,
.hl-btn--link:active{ --hl-btn-fg:var(--hl-btn-ink); --hl-btn-bg:transparent; --hl-btn-border:transparent; }
.hl-btn--link:focus-visible{ outline-offset:6px; }
/* ── J4.7 · DISABLED ──────────────────────────────────────────────────────
`opacity:.55` over a red gradient leaves white text at roughly 1.7:1, which is
the invisible-state failure the audit was looking for. A disabled control is a
flat neutral with a legible label instead: --hl-text-muted on --hl-paper-2 is
4.67:1, and 50%-white on a dark band clears AA too. */
.hl-btn[disabled],
.hl-btn[aria-disabled="true"],
.hl-btn.is-disabled{
opacity:1; cursor:not-allowed; pointer-events:none; transform:none;
--hl-btn-ink:var(--hl-text-muted); color:var(--hl-btn-ink);
background:var(--hl-paper-2); background-image:none;
border:1px solid var(--hl-line-2); box-shadow:none;
}
.hl-section--dark .hl-btn[disabled],
.hl-section--dark .hl-btn[aria-disabled="true"],
.hl-section--dark .hl-btn.is-disabled,
.hl-section--brand .hl-btn[disabled],
.hl-section--brand .hl-btn[aria-disabled="true"],
.hl-section--brand .hl-btn.is-disabled{
--hl-btn-ink:var(--hl-text-light-3); background:rgba(255,255,255,.07);
border-color:var(--hl-line-dark-2);
}
/* A disabled text link keeps its shape rather than becoming a grey pill. */
.hl-btn--link[disabled],
.hl-btn--link[aria-disabled="true"],
.hl-btn--link.is-disabled{ background:none; border:0; padding:0; }
/* ── J4.8 · THE OTHER LINK COMPONENTS ─────────────────────────────────────
`.hl-link-arrow` is components.css's tertiary link and predates the approved
family. It resolves to --hl-primary, and --hl-accent on hover, which is
correct on a light band — but on a dark SECTION (as opposed to a `.hl-on-dark`
container) it was navy on near-black. Same audit, same fix. */
.hl-section--dark .hl-link-arrow,
.hl-section--brand .hl-link-arrow{ color:var(--hl-text-on-dark,#f5f6fb); }
.hl-section--dark .hl-link-arrow:hover,
.hl-section--brand .hl-link-arrow:hover{ color:var(--hl-red-300); }
/* Footer links sit in a dark chrome that is not a `.hl-section`, so they are
checked here explicitly rather than assumed. */
.hl-footer a:not(.hl-btn):hover{ color:var(--hl-red-300); }
/* ===========================================================================
J5 · THE SECTION CTA VARIANT — ONE ADMIN SELECT, FIFTEEN VIEWS UNTOUCHED
---------------------------------------------------------------------------
`cta_variant` becomes a class on the SECTION (`hl-cta--v-outline`), not on the
button. That is what makes the control reachable without editing a view: every
block that renders a primary action already sits inside a section whose
classes come from section_classes(), so the fifteen existing views honour this
without a line of PHP, and a view added next year inherits it for free.
WHICH button it repaints, and why that needed deciding:
The views do not agree on what a primary action looks like. Fourteen call
sites render `.hl-btn--primary`, ten render `.hl-btn--dark`, two render
`.hl-btn--accent` — all three are the loud one, chosen per block by whoever
built it. Targeting only `--primary` would have left this control silently
inert on ten blocks, which is exactly the dead setting this pass exists to
remove. So all three are targeted, and the quiet companions (`--ghost`,
`--link`, `--light`, `--outline`, `--secondary`) are deliberately left
alone: a section whose two actions look identical has no primary action.
`--sm` is excluded. That size is what the design uses for utility controls
INSIDE a component — the catalog Search and Apply filters submits, a
testimonial card Trustpilot button, the page rail action. Those are not the
section call to action, and turning a form submit into a bare text link
because an editor set a section CTA variant would be a defect, not a
preference.
Every variant below is the SAME paint as its `.hl-btn--x` equivalent in J4,
band-aware wherever that equivalent is band-aware. This is a re-labelling of
the approved family, not a seventh button design. `:is()` carries the
specificity of one class, so each rule is (0,3,0) and each hover (0,4,0) —
above the variant rules they override, and above nothing else.
=========================================================================== */
/* ── J5.1 · PRIMARY — the red gradient ─────────────────────────────────── */
.hl-cta--v-primary :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:#fff; color:var(--hl-btn-ink);
background:linear-gradient(170deg,var(--hl-red-400),var(--hl-red-600));
border:0; box-shadow:var(--hl-sh-red), inset 0 1px 0 rgba(255,255,255,.28);
}
.hl-cta--v-primary :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
box-shadow:0 16px 38px -10px rgba(207,41,39,.65), inset 0 1px 0 rgba(255,255,255,.3);
transform:translateY(-2px);
}
/* ── J5.2 · DARK — the navy gradient ───────────────────────────────────── */
.hl-cta--v-dark :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:#fff; color:var(--hl-btn-ink);
background:linear-gradient(170deg,var(--hl-ink-750),var(--hl-ink-850));
border:0; box-shadow:var(--hl-sh-navy), inset 0 1px 0 rgba(255,255,255,.16);
}
.hl-cta--v-dark :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
box-shadow:0 18px 40px -12px rgba(42,45,124,.55), inset 0 1px 0 rgba(255,255,255,.2);
transform:translateY(-2px);
}
/* ── J5.3 · LIGHT — a white pill, for a dark band ───────────────────────── */
.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-ink-800); color:var(--hl-btn-ink);
background:#fff; background-image:none; border:0;
box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-ink-900); background:var(--hl-paper); transform:translateY(-2px);
}
/* On a LIGHT band a white pill with no edge is a floating label, so it takes the
same hairline J4.3 gives `.hl-btn--light` there. */
.hl-section--light.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm),
.hl-section--alt.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
border:1px solid var(--hl-line-2); box-shadow:var(--hl-sh-sm);
}
.hl-section--light.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover,
.hl-section--alt.hl-cta--v-light :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
border-color:var(--hl-brand-navy); background:var(--hl-paper);
}
/* ── J5.4 · SECONDARY — the same white pill, edged on every band ─────────
The distinction J4.3 already draws: `light` is the dark-band treatment,
`secondary` is the one that carries its own edge wherever it lands. */
.hl-cta--v-secondary :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-ink-800); color:var(--hl-btn-ink);
background:#fff; background-image:none;
border:1px solid var(--hl-line-2); box-shadow:var(--hl-sh-sm);
}
.hl-cta--v-secondary :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-brand-navy); background:var(--hl-paper);
border-color:var(--hl-brand-navy); transform:translateY(-2px);
}
/* ── J5.5 · OUTLINE — band-aware, because a transparent pill has to be ─── */
.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-text-dark); color:var(--hl-btn-ink);
background:#fff; background-image:none;
border:1px solid var(--hl-line-2); box-shadow:none;
}
.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-brand-navy); background:var(--hl-paper);
border-color:var(--hl-brand-navy); transform:translateY(-2px);
}
.hl-section--dark.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm),
.hl-section--brand.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:#fff; color:var(--hl-btn-ink);
background:rgba(255,255,255,.03); border-color:var(--hl-line-dark-2);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.hl-section--dark.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover,
.hl-section--brand.hl-cta--v-outline :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.34);
}
/* ── J5.6 · TEXT LINK — the pill geometry has to go, not just its paint ───
Mirrors `.hl-btn--link` exactly, including the underline that grows on hover,
so a section set to Text link produces the design's text link rather than a
button with its background removed. */
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-brand-red); color:var(--hl-btn-ink);
height:auto; padding:0; gap:7px; border:0; border-radius:0;
background:none; box-shadow:none; align-self:flex-start;
font-size:var(--hl-fs-sm);
}
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-red-700); background:none; box-shadow:none; transform:none;
}
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm)::after{
content:""; position:absolute; left:0; right:22px; bottom:-4px; height:1px;
background:currentColor; opacity:.28;
transition:opacity var(--hl-t-med), right var(--hl-t-med) var(--hl-e-out);
}
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover::after{
opacity:.7; right:0;
}
.hl-section--dark.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm),
.hl-section--brand.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm){
--hl-btn-ink:var(--hl-red-400);
}
.hl-section--dark.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover,
.hl-section--brand.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-red-300);
}
/* A text link keeps its focus ring clear of the underline it grows. */
.hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):focus-visible{
outline-offset:6px;
}
/* ── J6 · SECTION BAND OVERRIDE ────────────────────────────────────────────
The control that makes "alternate the sections" real.
THE PROBLEM. Twenty-eight of the approved compositions paint their own
ground: `.hl-price` is a navy gradient, `.hl-partners` is paper, the three
heroes are stacked radial glows. Each does it with a single-class selector in
THIS file, which loads after layout.css — so `.hl-section--light` (0,1,0,
earlier file) lost to `.hl-price` (0,1,0, later file) and four of the five
bands were inert wherever a composition was in play. An administrator could
set "Soft light" on the partner strip and watch nothing happen; worse, on the
chargeback page two adjacent sections set to `light` and `dark` rendered the
same navy ground with DIFFERENT accent colours, which looks like a bug in the
page rather than a limit of the control.
THE RULE. `section_classes()` compares the stored theme against
`BlockRegistry::defaultTheme()` and emits `.hl-section--reband` only when they
differ. So this whole section is dormant on every page nobody has touched —
and it is dormant by NOT MATCHING, not by resolving to the same value. None
of the twenty-eight rules below are edited; J6 only adds rules that outrank
them, which is why "existing pages retain their current appearance" is a
structural guarantee here and not a promise to be re-tested.
THE SPECIFICITY. Two classes on the section root plus the composition itself
inside `:is()`, (0,3,0), against the composition's own (0,1,0) — and last in
the last stylesheet, which settles navy against layout.css's equally-specific
`.hl-section--dark.hl-section--navy`. Sections with NO composition need
nothing here: layout.css's bands were never the losing side for them.
WHEN THE OVERRIDE IS *NOT* APPLIED, AND WHY THAT MATTERS MORE.
A composition drawn on paper does not need its ground replaced when the
selection is Light or Soft light. It already is that band — and its own
gradient (`.hl-hw` runs paper → white → paper to lift the product shots off
the fold) is a better rendering of the same answer than a flat fill. Likewise
a deep-navy composition asked for Deep navy. So those pairings keep the
artwork and the selection is satisfied rather than ignored.
Highline navy and Brand gradient always override, on all twenty-eight,
because they are not different renderings of a ground the composition already
has: they are the two bands an administrator reaches for precisely to make
one navy chapter read differently from the navy chapter above it, which is
the visual-rhythm problem this control exists to solve.
The effect on the live site, which is the test that counts: of the forty
sections whose stored theme differs from their block default, ten sit on a
composition, and all ten are same-family pairings — `hl-partners` + Soft
light, `hl-price` + Deep navy, `hl-hw` + Light. Every one keeps its artwork.
Nothing on twenty-six published pages moves by a pixel, and the control is
nonetheless live the moment anyone chooses across the divide. */
/* A composition drawn on paper, asked for a dark ground. */
.hl-section--reband.hl-section--dark:is(.hl-acc,.hl-ben,.hl-binds,.hl-calc,.hl-cd,
.hl-faq-sec,.hl-hw,.hl-hw2,.hl-partners,.hl-revs,.hl-rhw,.hl-rwhy,.hl-story,
.hl-why-sec,.hl-why2){
background:linear-gradient(178deg, var(--hl-ink-900) 0%, var(--hl-ink-850) 55%, var(--hl-ink-900) 100%);
}
/* A composition drawn on deep navy, asked for a paper ground. */
.hl-section--reband.hl-section--light:is(.hl-final,.hl-floor,.hl-flow,.hl-fund,
.hl-hero--highline,.hl-ihero,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-price,.hl-rfund,
.hl-shero,.hl-sys){
background:var(--hl-bg, #fff);
}
.hl-section--reband.hl-section--alt:is(.hl-final,.hl-floor,.hl-flow,.hl-fund,
.hl-hero--highline,.hl-ihero,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-price,.hl-rfund,
.hl-shero,.hl-sys){
background:var(--hl-paper, #f5f7fc);
}
/* The two that always win, on either family. */
.hl-section--reband.hl-section--navy:is(.hl-acc,.hl-ben,.hl-binds,.hl-calc,.hl-cd,
.hl-faq-sec,.hl-final,.hl-floor,.hl-flow,.hl-fund,.hl-hero--highline,.hl-hw,
.hl-hw2,.hl-ihero,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-partners,.hl-price,.hl-revs,
.hl-rfund,.hl-rhw,.hl-rwhy,.hl-shero,.hl-story,.hl-sys,.hl-why-sec,.hl-why2){
background:linear-gradient(178deg, var(--hl-primary-dark, #1b1e45) 0%, var(--hl-primary, #2a2d7c) 100%);
}
.hl-section--reband.hl-section--brand:is(.hl-acc,.hl-ben,.hl-binds,.hl-calc,.hl-cd,
.hl-faq-sec,.hl-final,.hl-floor,.hl-flow,.hl-fund,.hl-hero--highline,.hl-hw,
.hl-hw2,.hl-ihero,.hl-ind,.hl-ioffer,.hl-net-sec,.hl-partners,.hl-price,.hl-revs,
.hl-rfund,.hl-rhw,.hl-rwhy,.hl-shero,.hl-story,.hl-sys,.hl-why-sec,.hl-why2){
background:var(--hl-gradient-brand);
}
/* ── J6.1 · THE LEGIBILITY GUARD — dark composition, light band ─────────────
Requirement 16 says a CMS selection must never produce invisible text, and
must fall back to the nearest safe design-system foreground on its own.
This is where that bites hardest. A composition drawn for a dark ground has
its ink written into its children — thirty-nine declarations across the
thirteen dark compositions, on a four-tier ladder plus one accent:
#fff the headline / the strong value
--hl-text-light-2 .74 the lede
--hl-text-light-3 .50 the supporting line
--hl-text-light-4 .34 the disclaimer
--hl-navy-300 the accent word, the contact link
Re-band the section to white and all five vanish. So the marker that raises
the band also remaps that ladder onto the light-ground ramp, tier for tier,
preserving the hierarchy the composition was designed with rather than
flattening everything to one ink. `:is()` keeps the lists readable and
carries the specificity of its most specific argument, so a descendant
selector like `.hl-final__stack em` is still outranked.
ONE EXCLUSION, AND IT IS THE WHOLE DIFFICULTY OF THIS GUARD. Ink only follows
the band if the band is what is actually behind it. Most of these panels are
either unpainted or painted in translucent white — `.hl-ind__aside` is 7%
white, `.hl-ioffer__card` is a red-over-navy wash — so on a paper band they
resolve to paper and their ink has to go dark with it. `.hl-sysfoot` does
not: it is `--hl-ink-950`, opaque, near-black, and it stays near-black no
matter what the section does. Flipping its ink would have produced exactly
the invisible text this guard exists to prevent, from inside the guard. It is
excluded here and re-asserted in J6.5 along with the other opaque islands. */
/* The SECTION HEADINGS are split out of the tier-1 list below, with one extra
condition: they step aside when the administrator has chosen a heading ink.
Everything else in that list — ledes, emphasised words, step labels — has no
control pointed at it and is remapped unconditionally.
Without the split, "Heading colour" was inert on every composition in this
list. `:is()` takes the specificity of its most specific argument, and
`.hl-sysempty .hl-h2` made the whole rule (0,4,0) — above anything the
control could reasonably assert. The same automatic-then-overridable order
as J6.4, and only for the inks that are safe on this ground (M11 decides
which). */
.hl-section--reband:is(.hl-section--light,.hl-section--alt):not([class*="hl-hd--"])
:is(.hl-final__title, .hl-ioffer__title, .hl-price__title, .hl-shero__h1){
color:var(--hl-ink-900);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__stack span, .hl-final__stack em,
.hl-ind__aside b, .hl-ioffer__tag, .hl-ioffer__amt b,
.hl-ioffer__pts span, .hl-price__lede,
.hl-price__body strong, .hl-price__steps b, .hl-rfund__grid b,
.hl-sysempty .hl-h2){
color:var(--hl-ink-900);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__lede, .hl-floor__foot span, .hl-ioffer__copy, .hl-price__body,
.hl-shero__lede, .hl-sysempty .hl-lead){
color:var(--hl-text-body);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__chips li, .hl-fund__note, .hl-ind__aside p, .hl-ioffer__amt span,
.hl-price__steps span:last-child, .hl-rfund__grid span:last-child){
color:var(--hl-text-muted);
}
/* The .34 tier is a disclaimer, not decoration — it stays quieter than body
copy but still has to clear AA, so it lands on the same audited muted token
rather than on a paler one invented for the purpose. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-floor__roomtag, .hl-fund__disclaimer, .hl-ioffer__disc,
.hl-net-sec__disc, .hl-price__disc, .hl-rfund__note){
color:var(--hl-text-muted);
}
/* The accent word. --hl-navy-300 is a pale lavender chosen to glow on navy; on
paper it is barely there, so it steps down the ramp to the brand navy. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-ind__aside-ico, .hl-shero__h1 em){
color:var(--hl-navy-600);
}
/* ── J6.2 · THE SAME GUARD FOR SURFACES AND HAIRLINES ──────────────────────
Text is the requirement, but a chip whose ground was `rgba(255,255,255,.05)`
and a card hairline that was `inset 0 1px 0 rgba(255,255,255,.12)` disappear
on white too — and a list of steps that loses its tiles reads as broken
markup rather than as a design choice. Same inversion, same ramp. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__stack span, .hl-final__stack em, .hl-floor__foot span,
.hl-ioffer__pts, .hl-price__steps li, .hl-rfund__grid li){
background:var(--hl-paper-2);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-price__steps li:hover, .hl-rfund__grid li:hover){
background:var(--hl-paper-3);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-ind__aside{
background:linear-gradient(155deg, var(--hl-paper), var(--hl-white));
border-color:var(--hl-line);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-ioffer__card{
box-shadow:var(--hl-sh-lg), inset 0 1px 0 var(--hl-white);
}
/* The decorative SVG layers. These are aria-hidden artwork, so the standard is
"still visible" rather than any contrast ratio — a route drawn in 9% white on
a white band is simply gone, and the section loses the infrastructure motif
that ties it to the rest of the site. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-final__conv .hl-rte__base, .hl-floor__div, .hl-floor .hl-sroute){
stroke:var(--hl-line-2);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-floor__room{
stroke:var(--hl-line-2); fill:rgba(42,45,124,.022);
}
/* The red glow behind the closing CTA is a light source. It has nothing to lift
off a white ground, and left in place it reads as a printing error. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-final__glow{
opacity:.14;
}
/* ── J6.3 · THE OTHER DIRECTION — light composition, dark band ──────────────
Cheaper, because the fifteen light compositions took their ink from tokens
rather than writing it down, and layout.css's `.hl-section--dark` already
flips those tokens for the whole subtree. What it does not flip is a panel
ground written as a literal white — those survive as white slabs on navy,
which is legible but reads as a different section pasted in. Every selector
below was taken from the stylesheet, not guessed: these are the only five
panels in those fifteen compositions that paint their own light ground. */
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand)
:is(.hl-calcbox, .hl-hw2__note, .hl-rhw__feature, .hl-rhw__note){
background:rgba(255,255,255,.045);
border-color:var(--hl-line-dark-2);
box-shadow:none;
}
/* The hardware stage is a lit alcove for a product shot. Inverted, it becomes a
pool of shadow instead — same gesture, opposite ground. */
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand) .hl-rhw__art{
background:radial-gradient(ellipse 70% 60% at 50% 42%, rgba(255,255,255,.07), transparent 70%);
border-color:var(--hl-line-dark-2);
}
/* The product placeholder frame is drawn in the light hairline because the
three hardware chapters are light. On a dark band that edge disappears and
the silhouette floats. */
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand) .hl-pslot__ph{
--hl-ph-name:var(--hl-text-light-2); --hl-ph-note:var(--hl-text-light-4);
}
/* ── J6.4 · CHAPTER NUMERALS AND EYEBROWS FOLLOW THE BAND ──────────────────
Both already resolve through `--hl-cn-ink` / `--hl-eb-ink` (J1, J2), and both
have a per-section override an administrator may have set. So this supplies
only the DEFAULT for the new ground, and does it at the section root where an
explicit `.hl-cn--*` / `.hl-eb--*` class or the `.hl-s-` custom colour
both outrank it — the automatic answer, overridable, in that order. */
/* CORRECTED in the visual correction pass. The paragraph above says an explicit
`.hl-cn--*` / `.hl-eb--*` class outranks these defaults. It did not.
`.hl-section--reband:is(…)` is (0,2,0) and `.hl-cn--red` is (0,1,0), so the
automatic answer beat the administrator's on every re-banded section — which
is precisely the set of sections an editor is most likely to be tuning. A
control test that set all seven chapter inks and all five eyebrow inks on a
re-banded section measured ONE resulting colour.
Specificity cannot settle it — raising these would break the other direction
— so they now simply do not match when a choice has been made. The accent
classes carry unique prefixes, so `:not([class*="hl-cn--"])` is exact: the
automatic answer applies, is overridable, in that order, and now actually is. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt):not([class*="hl-cn--"]){
--hl-cn-ink:var(--hl-line-2);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt):not([class*="hl-eb--"]){
--hl-eb-ink:var(--hl-brand-red);
--hl-eb-bar:linear-gradient(180deg,var(--hl-red-400),var(--hl-red-600));
--hl-eb-glow:0 0 12px rgba(207,41,39,.6);
}
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand):not([class*="hl-cn--"]){
--hl-cn-ink:rgba(255,255,255,.16);
}
.hl-section--reband:is(.hl-section--dark,.hl-section--navy,.hl-section--brand):not([class*="hl-eb--"]){
--hl-eb-ink:var(--hl-navy-300);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-300),var(--hl-navy-500));
--hl-eb-glow:0 0 12px rgba(144,150,228,.45);
}
/* Nothing further is needed for the numeral itself. `section_head_class()` and
the two views that hand-roll the same ternary all ask `section_is_dark()`,
which reads the SAME stored theme this class was emitted from — so a section
re-banded to light never carries `hl-ihead--light`, and one re-banded to dark
always does. The outline stroke already resolves through `--hl-cn-ink`, so the
two declarations above are the whole of it. Worth stating, because the
obvious-looking `-webkit-text-stroke-color` override here would be dead code
guarding a state the renderer cannot produce. */
/* ── J6.5 · THE OPAQUE ISLANDS ─────────────────────────────────────────────
Four panels paint an opaque dark ground of their own and keep it whatever the
section does: the catalog footer (`--hl-ink-950`), the why-panel feature card,
the calculator's result half, and the industry floor's detail panel. Three of
them already live inside LIGHT compositions, which is why their eyebrows are
marked `--light` unconditionally in the views — correct then, correct now.
What reaches them is inheritance, not a selector: J6.4 sets `--hl-eb-ink` on
the section root, and a custom property set on an ancestor does not stop at a
panel boundary. So a re-banded light section would hand these dark panels the
red-on-paper eyebrow meant for the band outside them. Re-asserting the
dark-ground values here is the whole fix, and it is the same shape as the
problem: one token, set closer to the element that reads it.
`.hl-sysfoot`'s ink is restated too, because J6.1 excludes it and its own
rules resolve to the light ramp only by virtue of not being overridden — that
is a guarantee worth writing down rather than inferring. */
.hl-section--reband
:is(.hl-sysfoot, .hl-wfeat, .hl-calcbox__result, .hl-fpanel){
--hl-eb-ink:var(--hl-navy-300);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-300),var(--hl-navy-500));
--hl-eb-glow:0 0 12px rgba(144,150,228,.45);
--hl-cn-ink:rgba(255,255,255,.16);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-sysfoot p{
color:var(--hl-text-light-3);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-sysfoot__contact a{
color:var(--hl-navy-300);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-sysfoot__contact a:hover{
color:#fff;
}
/* ===========================================================================
K · THE PRODUCT DETAIL TEMPLATE — hero discipline, gallery, chapter variants
---------------------------------------------------------------------------
The PDP is one shared template (resources/views/products/detail.php) built
from numbered chapters. This section carries what the chapters need that
the block vocabulary does not already provide:
K1 hero media discipline — a real photograph may not dominate the
viewport; it fits INTO the stage frame like everything else
K2 feature presentation variants — rows / checks / cards / tiles
K3 band inversions for chapters an administrator has re-banded
(the seeded rhythm is light overview / dark features / light specs /
navy built-for, and every component above was drawn for its seed)
K4 the light-hero guard — a hero re-banded to white must take its price,
maker and gallery chrome with it
Tokens that do NOT flip on `.hl-section--dark` (--hl-paper, --hl-line,
--hl-text-dark, --hl-text-body) are avoided in new components or given an
explicit dark override here — see layout.css for the flip list.
=========================================================================== */
/* ── K1 · HERO MEDIA DISCIPLINE ────────────────────────────────────────────
The stage is a fixed-height alcove, not a canvas the upload inflates. A
2000×1000 lifestyle shot and a 300×800 portrait both land inside the same
frame at comparable scale: contain behaviour, internal padding, and a hard
cap so no photograph ever pushes the hero past one viewport. */
.hl-pdphero .hl-rstage__frame{ position:relative; z-index:2; }
.hl-pdphero .hl-rstage__slot{ min-height:280px; }
.hl-pdphero .hl-rstage__slot img{ max-height:380px; }
.hl-pdphero .hl-shero__viz.hl-ihero__viz{ width:100%; max-width:520px; margin-inline:auto; }
/* ── K2 · FEATURE PRESENTATION VARIANTS ────────────────────────────────────
One structured list, four approved treatments. The admin enters label +
detail + optional icon; this decides what that becomes. */
.hl-pfeat--checks{
grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap:0 clamp(20px, 3vw, 44px);
}
.hl-pfeat--checks .hl-pfeat__row{
background:none; border:0; border-bottom:1px solid var(--hl-line-dark);
border-radius:0; padding:12px 2px;
}
.hl-pfeat--cards,
.hl-pfeat--tiles{
grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr));
gap:clamp(14px, 1.8vw, 22px);
}
.hl-pfeat__card{
min-width:0; padding:20px 18px; background:#fff;
border:1px solid var(--hl-line); border-radius:var(--hl-r-xl);
box-shadow:var(--hl-sh-sm);
}
.hl-pfeat__ico{ display:block; width:22px; height:22px; margin:0 0 12px; color:var(--hl-brand-red); }
.hl-pfeat__card b{ display:block; font:600 var(--hl-fs-body)/1.35 var(--hl-ff-display); color:var(--hl-text-dark); }
.hl-pfeat__card i{ display:block; margin-top:5px; font-style:normal; font-size:var(--hl-fs-xs); line-height:1.6; color:var(--hl-text-muted); }
/* Tiles: the dense variant — quiet ground, a navy rule where the card's top
edge would be, no shadow. */
.hl-pfeat--tiles{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 215px), 1fr)); }
.hl-pfeat--tiles .hl-pfeat__card{
background:transparent; border:1px solid var(--hl-line);
border-top:2px solid var(--hl-brand-navy); border-radius:var(--hl-r-lg);
box-shadow:none; padding:16px;
}
/* The dark-band forms of every treatment. Features seed onto deep navy, so
these are the DEFAULTS in practice; the light forms above are what a
re-banded chapter gets. */
.hl-section--dark .hl-pfeat__row,
.hl-section--brand .hl-pfeat__row{
background:rgba(255,255,255,.045); border-color:var(--hl-line-dark-2);
}
.hl-section--dark .hl-pfeat__txt b,
.hl-section--brand .hl-pfeat__txt b{ color:#fff; }
.hl-section--dark .hl-pfeat__txt i,
.hl-section--brand .hl-pfeat__txt i{ color:var(--hl-text-light-3); }
.hl-section--dark .hl-pfeat__card,
.hl-section--brand .hl-pfeat__card{
background:rgba(255,255,255,.05); border-color:var(--hl-line-dark-2); box-shadow:none;
}
.hl-section--dark .hl-pfeat__card b,
.hl-section--brand .hl-pfeat__card b{ color:#fff; }
.hl-section--dark .hl-pfeat__card i,
.hl-section--brand .hl-pfeat__card i{ color:var(--hl-text-light-3); }
.hl-section--dark .hl-pfeat--tiles .hl-pfeat__card,
.hl-section--brand .hl-pfeat--tiles .hl-pfeat__card{
background:transparent; border-top-color:var(--hl-navy-300);
}
/* ── K3 · CHAPTER BAND INVERSIONS ───────────────────────────────────────────
Specifications seed onto light, Built For onto navy — the opposite of how
their components were first drawn. These overrides make each component
correct on EITHER family, which is what makes the per-chapter band selects
safe to offer at all. */
.hl-section--light .hl-pspecs__title,
.hl-section--alt .hl-pspecs__title{ color:var(--hl-brand-navy); }
.hl-section--light .hl-pspecs__row,
.hl-section--alt .hl-pspecs__row{ border-bottom-color:var(--hl-line); }
.hl-section--light .hl-pspecs__row dt,
.hl-section--alt .hl-pspecs__row dt{ color:var(--hl-text-muted); }
.hl-section--light .hl-pspecs__row dd,
.hl-section--alt .hl-pspecs__row dd{ color:var(--hl-text-dark); }
.hl-section--dark .hl-puse__card,
.hl-section--navy .hl-puse__card,
.hl-section--brand .hl-puse__card{
background:rgba(255,255,255,.05); border-color:var(--hl-line-dark-2); box-shadow:none;
}
.hl-section--dark .hl-puse__title,
.hl-section--navy .hl-puse__title,
.hl-section--brand .hl-puse__title{ color:#fff; }
.hl-section--dark .hl-puse__text,
.hl-section--navy .hl-puse__text,
.hl-section--brand .hl-puse__text{ color:var(--hl-text-light-3); }
.hl-section--dark .hl-puse__ico,
.hl-section--navy .hl-puse__ico,
.hl-section--brand .hl-puse__ico{ color:var(--hl-red-400); }
.hl-section--dark .hl-pdpfin,
.hl-section--navy .hl-pdpfin,
.hl-section--brand .hl-pdpfin{
background:rgba(255,255,255,.04); border-color:var(--hl-line-dark-2); box-shadow:none;
}
.hl-section--dark .hl-pdpfin__title,
.hl-section--navy .hl-pdpfin__title,
.hl-section--brand .hl-pdpfin__title{ color:#fff; }
.hl-section--dark .hl-pdpfin__note,
.hl-section--navy .hl-pdpfin__note,
.hl-section--brand .hl-pdpfin__note{ color:var(--hl-text-light-2); }
.hl-section--dark .hl-pdpfin__disc,
.hl-section--navy .hl-pdpfin__disc,
.hl-section--brand .hl-pdpfin__disc{ color:var(--hl-text-light-3); }
.hl-section--dark .hl-pdpfin .hl-eyebrow,
.hl-section--navy .hl-pdpfin .hl-eyebrow,
.hl-section--brand .hl-pdpfin .hl-eyebrow{ color:var(--hl-navy-300); }
/* ── K4 · THE LIGHT-HERO GUARD ──────────────────────────────────────────────
The product hero is drawn for deep navy. An administrator who re-bands it
to Light or Soft light gets these corrections with the band — the J6
mechanism covers the headline, lede and crumb; the price ladder, maker line
and gallery chrome are PDP-specific and live here instead. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt)
:is(.hl-pdp__maker, .hl-pdp__price i, .hl-pdp__price small, .hl-rstage__foot){
color:var(--hl-text-muted);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-pdp__price b{ color:var(--hl-ink-900); }
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-pdp__call{ color:var(--hl-brand-navy); }
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-shero__h1 em{ color:var(--hl-navy-600); }
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-chips li{
color:var(--hl-text-body); background:var(--hl-paper); border-color:var(--hl-line);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-pgal__thumb{
background:var(--hl-paper); border-color:var(--hl-line);
}
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-pgal__thumb:hover{ background:var(--hl-paper-2); }
.hl-section--reband:is(.hl-section--light,.hl-section--alt) .hl-infra{ opacity:.16; }
/* ── K5 · RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width:760px){
/* The stage shrinks WITH the phone rather than dominating it, and the
gallery stays thumb-sized enough to keep four in view. */
.hl-pdphero .hl-shero__viz.hl-ihero__viz{ max-width:440px; }
.hl-pdphero .hl-rstage__slot{ min-height:210px; }
.hl-pdphero .hl-rstage__slot img{ max-height:260px; }
.hl-pgal{ gap:6px; }
.hl-pgal__thumb{ width:48px; height:48px; }
/* Checks and tiles collapse to one column before they get cramped — a
check row needs its hairline to read, and two-up tiles under 215px
truncate labels. */
.hl-pfeat--checks{ grid-template-columns:minmax(0,1fr); }
.hl-pfeat--cards,
.hl-pfeat--tiles{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:420px){
.hl-pgal__thumb{ width:42px; height:42px; padding:4px; }
}
@media (prefers-reduced-motion:reduce){
.hl-pgal__thumb{ transition:none; }
}
/* ===========================================================================
L · PAGE START, INHERITED INK, AND THE BANDS BETWEEN CHAPTERS
---------------------------------------------------------------------------
Added by the visual correction pass. Three defect families, each fixed once
at the layer that causes it rather than at the places it showed up:
L1 headings that took body ink on a dark band and vanished
L2 the header's hairline sitting OUTSIDE the height every hero pulls up by
L3 chapter rhythm — the vertical space between a chapter head and its
content, which several sections had far too much of
Every rule here is either a token re-point or a spacing correction. Nothing
introduces a colour an administrator did not already have, and nothing adds
a control.
=========================================================================== */
/* ── L1 · HEADING INK FOLLOWS THE BAND ─────────────────────────────────────
`:where(body.hl-body) h1…h4` sets the heading colour for every heading that
does not carry a component class naming one. Its specificity (0,0,1) beats
INHERITANCE, so `.hl-section--dark { color: … }` never reached those
headings — and five published pages rendered an H1 in #0A0E24 on a #0A0B1F
hero at 1.02:1. /terms, /privacy-policy, /easysign, /system/404 and
/system/maintenance were all completely headless to a reader.
The base rule now resolves through `--hl-heading-ink`, so a band re-points
the token instead of fighting the cascade. A component that names its own
colour is untouched; a component that relies on inheritance now inherits
something correct. */
.hl-section--dark,
.hl-section--brand,
.hl-on-dark,
.hl-footer,
.hl-drawer,
.hl-announce,
.hl-promo-modal__card{ --hl-heading-ink:var(--hl-text-light); }
/* A light island inside a dark chapter keeps dark heading ink: the token
inherits across the panel boundary exactly the way J6.5 describes for
eyebrows, and a white heading on a white card is the same bug in the other
direction. Islands are named rather than guessed, and each one is a panel
that paints an opaque light ground of its own. */
.hl-section--dark :is(.hl-pcard, .hl-card, .hl-panel--light, .hl-mega, .hl-dropdown,
.hl-form, .hl-note--light, .hl-tile--light),
.hl-section--brand :is(.hl-pcard, .hl-card, .hl-panel--light, .hl-mega, .hl-dropdown,
.hl-form, .hl-note--light, .hl-tile--light){
--hl-heading-ink:var(--hl-text-dark);
}
/* The other direction: a section re-banded onto a light ground by an
administrator (J6) must take dark heading ink back, because the marker class
sits on the same element as the `--dark` class it replaced. */
.hl-section--reband:is(.hl-section--light,.hl-section--alt){ --hl-heading-ink:var(--hl-text-dark); }
/* ── L2 · THE HEADER'S OWN HEIGHT ──────────────────────────────────────────
`.hl-header` is `position:sticky`, so it OCCUPIES flow space, and every dark
opening hero cancels that space with `margin-top:calc(var(--hl-nav-h) * -1)`
and gives it back as padding. The header's 1px bottom border made its border
box 1px TALLER than `--hl-nav-h`, so every one of those pull-ups landed a
pixel short and left a hairline of white page background across the top of
the hero, under the announcement bar, on every page.
Moving the hairline to a pseudo-element makes the border box exactly
`--hl-nav-h` — which is the number the rest of the stylesheet already
assumes — and paints the same line in the same place. */
.hl-header{ border-bottom-width:0; }
.hl-header::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
background:transparent; pointer-events:none;
transition:background-color var(--hl-t-med) var(--hl-e-soft);
}
.hl-header:not(.hl-header--over-hero)::after,
.hl-header.is-stuck::after{ background:var(--hl-line-dark); }
/* The mega panel hangs off `top:100%`, which is now 1px higher; the panel's own
top border keeps the join reading as one edge. */
/* ── L4 · THE GLASS PANELS RAISE THE FLOOR ─────────────────────────────────
The approved diagram panels are translucent surfaces floating ON a dark
chapter — `rgba(42,45,124,.34)` over navy, `rgba(255,255,255,.05)` nodes on
top of that. Their interior sits several steps lighter than the band around
them, so the two quiet inks that clear 4.5:1 against the band do NOT clear it
inside the panel: the acceptance diagram's captions measured 3.8:1 on every
service page, and the home page's payment-flow cards 3.2:1.
The token, not the rules, is what moves — the same shape as J6.5. Each panel
re-points the quiet inks for its own interior, so every caption, unit, index
and footnote inside it follows without a single one being named. */
.hl-accv,
.hl-corenode,
.hl-ipanel,
.hl-fchart,
.hl-mini,
.hl-pz{
--hl-text-light-3:rgba(255,255,255,.74);
--hl-text-light-4:rgba(255,255,255,.64);
}
/* The home page's floating payment cards sit on the lightest ground of the set
— a navy gradient that reaches #434891 — so they need one step more again. */
.hl-ecard{
--hl-text-light-3:rgba(255,255,255,.82);
--hl-text-light-4:rgba(255,255,255,.72);
}
/* Two accents inside those panels are hues rather than tints, so they cannot be
fixed by an alpha. The step index sits in a red-tinted chip on a violet card
at 3.92:1 in `--hl-red-300`; the chip keeps its brand tint and the numeral
takes the white the neighbouring card labels already use. */
.hl-ecard__step{ color:#fff; }
.hl-ipanel__kicker{ color:#B9BDF0; }
/* ── L5 · THE LAST TWO CONTRAST HOLD-OUTS ─────────────────────────────────
`.hl-btn--link-light` is the text-link button on a dark band. It was painted
in `--hl-red-400`, which is 4.19:1 on the navy panel it is used on — the same
family of defect J4.6 fixed for the light-band text link, one ramp step short.
`--hl-red-300` is the dark-band member of that pair and clears 7:1. */
.hl-btn--link-light{ --hl-btn-ink:var(--hl-red-300); color:var(--hl-red-300); }
.hl-btn--link-light:hover,
.hl-btn--link-light:focus-visible,
.hl-btn--link-light:active{ --hl-btn-ink:#fff; color:#fff; }
/* The product card's "Most requested" chip: brand red on a 6%-red ground is
4.49:1, which is a rounding error away from AA and reads as a pass in a
screenshot. One ramp step down on the ink clears it at 5.6:1 and is
indistinguishable at 11px. */
.hl-pcard__badge{ color:var(--hl-red-600); }
/* ===========================================================================
M · PRODUCT DETAIL COMPOSITION
---------------------------------------------------------------------------
The chapter architecture was right; its proportions were not. Every rule
below is a spacing or a track-count correction to a composition that already
existed — no new component, no new control, and nothing that changes what an
administrator can choose.
=========================================================================== */
/* ── M1 · THE CHAPTER HEAD ─────────────────────────────────────────────────
`.hl-ihead` reserves `--hl-s-14` under itself, which is right for a chapter
that opens with a wide diagram and far too much for one that opens with a
list. On the product page it read as a heading marooned above its own
content — the "very large empty area before the actual feature content" in
the review. The gap is now proportional and the numeral column stops eating
a third of the measure on a narrow chapter. */
.hl-pdp-chapter .hl-ihead{ margin-bottom:clamp(24px,2.6vw,40px); }
.hl-pdp-chapter .hl-ihead__lede{ margin-top:var(--hl-s-4); max-width:56ch; }
/* ── M2 · KEY FEATURES ─────────────────────────────────────────────────────
Two columns from 900px up, one below it, for every treatment. `rows` was a
single column at ANY width, so four short labels became four full-bleed bars
with a thousand pixels of empty space to the right of each one. */
@media (min-width:900px){
.hl-pfeat{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px clamp(18px,2vw,28px); }
.hl-pfeat--checks{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1280px){
/* Three columns only when the entries are short enough to keep a sane
measure — the check list — and never for detailed cards, whose paragraphs
need the width. */
.hl-pfeat--checks{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:899px){
.hl-pfeat,
.hl-pfeat--checks,
.hl-pfeat--cards,
.hl-pfeat--tiles{ grid-template-columns:minmax(0,1fr); }
}
/* A check row carries a label and nothing else, so it does not need a card's
padding; the hairline and the tick are the whole affordance. */
.hl-pfeat--checks .hl-pfeat__row{ align-items:center; }
.hl-pfeat--checks .hl-pfeat__txt b{ font-size:var(--hl-fs-sm); }
/* ── M3 · SPECIFICATIONS ───────────────────────────────────────────────────
The definition list ran the full width with the value column starting at
about 45%, so three specifications occupied a 1,200px band and left most of
it blank. Capped to a readable measure and paired up on desktop. */
.hl-pspecs{ max-width:960px; }
@media (min-width:900px){
.hl-pspecs{ grid-template-columns:repeat(2, minmax(0,1fr)); }
/* One group on its own should not be stretched across both tracks. */
.hl-pspecs__group:only-child{ grid-column:1 / -1; max-width:640px; }
}
/* ── M4 · FINANCING ────────────────────────────────────────────────────────
The chapter now carries a standard head, so the card holds only the note,
the disclaimer and the action — and it no longer needs a heading's worth of
padding above them. */
.hl-pdpfin{ padding:clamp(22px,2.4vw,34px); align-items:center; }
.hl-pdpfin__copy{ max-width:70ch; }
.hl-pdpfin__note{ margin:0 0 var(--hl-s-3); }
/* ── M5 · RELATED EQUIPMENT ────────────────────────────────────────────────
`auto-fill` with a 280px track gives four columns at 1440px, so three
related devices sat in three of four tracks with an empty column beside
them. The related row is a fixed three-up on desktop: the repository asks
for three, so the grid should be built for three. */
@media (min-width:1024px){
.hl-pgrid--rel{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (min-width:640px) and (max-width:1023px){
.hl-pgrid--rel{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
/* ── M6 · THE TERTIARY ACTION ──────────────────────────────────────────────
"The Account Behind It" leaves the device, so it is a text-arrow link under
the pair rather than a third pill wrapping onto its own line.
`.hl-link-arrow` predates the approved arrow glyph and animates a child
called `.hl-link-arrow__icon`; every other arrow on this site is
`.hl-arrow`, and that is what the views emit. Without this the tertiary
link would be the one arrow on the page that does not move. */
.hl-pdp__tertiary{ margin:var(--hl-s-6) 0 0; display:flex; flex-wrap:wrap; gap:var(--hl-s-6); }
.hl-pdp__tertiary--center{ justify-content:center; margin-top:var(--hl-s-6); }
.hl-link-arrow .hl-arrow{ transition:transform var(--hl-t-med) var(--hl-e-out); }
.hl-link-arrow:hover .hl-arrow{ transform:translateX(4px); }
@media (prefers-reduced-motion:reduce){
.hl-link-arrow .hl-arrow{ transition:none; }
.hl-link-arrow:hover .hl-arrow{ transform:none; }
}
/* ── M7 · THE HERO ─────────────────────────────────────────────────────────
Compact and balanced: the copy column keeps a readable measure, the chips
sit tight under the actions, and the stage never grows past the copy beside
it. */
.hl-pdphero .hl-shero__shell{ padding-block:clamp(36px,3.6vw,60px) var(--hl-hero-air); }
.hl-pdphero .hl-shero__h1{ margin-bottom:var(--hl-s-4); }
.hl-pdphero .hl-pdp__maker{ margin:0 0 var(--hl-s-4); }
.hl-pdphero .hl-shero__lede{ margin-bottom:var(--hl-s-6); max-width:46ch; }
/* The chips' own top margin used to be set here, for this hero only, because
the shared `.hl-chips` margin was being suppressed site-wide (see the list
reset near the top of this file). Section N now gives every chip list the
same `--hl-flow-tight` step, so the PDP-only patch is gone and this hero is
no longer a special case. */
/* ── M8 · THE CLOSING BAND ON EITHER FAMILY ────────────────────────────────
`.hl-pdpend` hard-coded `#fff` for its heading and a light-band ink for its
copy, which is correct on the deep navy it is pinned to and invisible the
moment the band is anything else. The band is an administrator's choice, so
the component has to work on both families — the same guarantee K3 gives the
specification list and the use-case cards. */
.hl-section--light .hl-pdpend__title,
.hl-section--alt .hl-pdpend__title{ color:var(--hl-text-dark); }
.hl-section--light .hl-pdpend__text,
.hl-section--alt .hl-pdpend__text{ color:var(--hl-text-body); }
/* The financing card is drawn for a light band; on a dark one it becomes the
translucent panel the rest of the dark chapters use. That rule already
existed for `--dark`/`--navy`/`--brand`; what it lacked was the disclaimer. */
.hl-section--dark .hl-pdpfin__disc,
.hl-section--navy .hl-pdpfin__disc,
.hl-section--brand .hl-pdpfin__disc{ color:var(--hl-text-light-4); }
/* ── M9 · THE CARD BADGE AS A FLAG ─────────────────────────────────────────
Pinned to the media stage so it costs no flow height and every card in a row
keeps its title, copy and affordance on the same baselines. The stage is
already a fixed alcove (`--hl-pslot-h`), so nothing here can change a card's
height whatever the artwork is. */
.hl-pcard__art{ position:relative; }
.hl-pcard__badge--flag{
position:absolute; top:0; left:0; z-index:2;
background:var(--hl-red-500); color:#fff;
box-shadow:0 6px 16px -8px rgba(207,41,39,.9);
}
.hl-section--dark .hl-pcard__badge--flag{ background:var(--hl-red-500); color:#fff; }
/* ── M10 · CHECKS ARE HAIRLINE ROWS ON EVERY BAND ──────────────────────────
K2 draws the compact list as hairline rows, and then the dark-band form of
`.hl-pfeat__row` — written for the `rows` treatment — re-filled them,
because the two selectors carry the same specificity and the dark one is
later in the file. So the same treatment was a filled chip on a dark chapter
and a hairline row on a light one. It is a hairline row on both. */
.hl-section--dark .hl-pfeat--checks .hl-pfeat__row,
.hl-section--brand .hl-pfeat--checks .hl-pfeat__row{
background:none; border:0; border-bottom:1px solid var(--hl-line-dark-2);
border-radius:0; padding:12px 2px;
}
/* ── M11 · HEADING INK REACHES EVERY SECTION HEADING ───────────────────────
J3 declares `--hl-hd-ink`, and exactly two classes read it:
`.hl-shead__title` and `.hl-ihead__title`. Every other section composition
names its own heading class and hard-codes a colour — `.hl-price__title` is
`#fff`, and there are a dozen more like it — so "Heading colour" was an
Admin control that did nothing on most of the site. A control test that set
all three values on a `content · steps` chapter measured one colour, three
times.
Two things have to be true at once, and that is why this is four rules
rather than one.
It has to WIN. A composition's own title class is (0,1,0), and on a
re-banded section J6.1's legibility remap is (0,3,0). So the pairs below are
(0,2,1) and (0,3,1) respectively — `:is(h1,h2)` contributes one element,
which is the cheapest way past both.
It has to stay SAFE. J3 offers three inks and no custom value precisely
because a heading is the one element that cannot be allowed to fail
legibility, so each rule matches only the ink that suits the band it is on:
ink and navy on a light ground, white on a dark one. An unsafe pairing
simply does not match, and the automatic answer — which is always legible —
stands. That is the same shape as J6.4: automatic, overridable, in that
order, and only where the override is sound.
Card headings are h3/h4 throughout the design system and are untouched;
this is the SECTION heading control. */
/* Light ground, dark ink. The exclusion list is the set of compositions that
paint a dark ground of their own: on those, `--light` without a re-band is a
label rather than a fact (J6 leaves their artwork alone by design), so dark
ink there would be dark-on-dark. Re-banded, they are genuinely light, which
is what the second rule is for. */
:is(.hl-section--light, .hl-section--alt):is(.hl-hd--ink, .hl-hd--navy):not(.hl-final,
.hl-floor,.hl-flow,.hl-fund,.hl-hero--highline,.hl-ihero,.hl-ind,.hl-ioffer,
.hl-net-sec,.hl-price,.hl-rfund,.hl-shero,.hl-sys) :is(h1, h2){
color:var(--hl-hd-ink, inherit);
}
.hl-section--reband:is(.hl-section--light, .hl-section--alt):is(.hl-hd--ink, .hl-hd--navy) :is(h1, h2){
color:var(--hl-hd-ink, inherit);
}
/* Dark ground, white ink. */
:is(.hl-section--dark, .hl-section--navy, .hl-section--brand).hl-hd--white :is(h1, h2){
color:var(--hl-hd-ink, inherit);
}
.hl-section--reband:is(.hl-section--dark, .hl-section--navy, .hl-section--brand).hl-hd--white :is(h1, h2){
color:var(--hl-hd-ink, inherit);
}
/* ── M12 · AN UNSAFE ACCENT CHOICE IS IGNORED, NOT OBEYED ──────────────────
J6.1 and J6.4 now step aside whenever an explicit accent class is present,
which is what makes those controls work at all. On its own that would hand
an editor a way to pick white type for a paper band — the exact failure
requirement 16 forbids, arriving through the door that was opened to fix a
different one.
So the pairings that cannot hold are neutralised here, on the band rather
than at the call site: the automatic answer is restored and the selection is
simply not applied. Nothing warns, because there is nothing to warn about —
a heading cannot be allowed to fail legibility, which is why J3 offers no
custom heading colour in the first place.
The chapter numeral is deliberately NOT filtered. It is `aria-hidden`
decoration drawn as a 1.4px outline at low contrast by design; a quiet one
is a quiet one, and there is no reading to fail. */
/* Eyebrow: the two light inks cannot sit on a paper band, and the three dark
ones cannot sit on navy — `--hl-navy-500` on the deep-navy band measures
2.22:1, which a control test found before anyone had to look at it. */
:is(.hl-section--light, .hl-section--alt):is(.hl-eb--light, .hl-eb--white){
--hl-eb-ink:var(--hl-brand-red);
--hl-eb-bar:linear-gradient(180deg,var(--hl-red-400),var(--hl-red-600));
--hl-eb-glow:0 0 12px rgba(207,41,39,.6);
}
:is(.hl-section--dark, .hl-section--navy, .hl-section--brand):is(.hl-eb--red, .hl-eb--muted, .hl-eb--navy){
--hl-eb-ink:var(--hl-navy-300);
--hl-eb-bar:linear-gradient(180deg,var(--hl-navy-300),var(--hl-navy-500));
--hl-eb-glow:0 0 12px rgba(144,150,228,.45);
}
/* Heading: white on paper, and either dark ink on navy. The re-banded forms
carry a third class so they outrank J6.1's (0,4,0) remap list. */
:is(.hl-section--light, .hl-section--alt).hl-hd--white :is(h1, h2){ color:var(--hl-ink-900); }
.hl-section--reband:is(.hl-section--light, .hl-section--alt).hl-hd--white :is(h1, h2){ color:var(--hl-ink-900); }
:is(.hl-section--dark, .hl-section--navy, .hl-section--brand):is(.hl-hd--ink, .hl-hd--navy) :is(h1, h2){ color:var(--hl-text-light); }
.hl-section--reband:is(.hl-section--dark, .hl-section--navy, .hl-section--brand):is(.hl-hd--ink, .hl-hd--navy) :is(h1, h2){ color:var(--hl-text-light); }
/* ── M13 · THE GENERIC HERO'S HEADLINE ─────────────────────────────────────
`blocks/hero.php` now runs its heading through `approved_headline()` like
every other hero variant, so the `*emphasis*` and `//line break` conventions
this project's headline copy is written in finally reach it — the 404 page
read "That Page Is *Not Here*." until this pass.
`:where(body.hl-body) em{font-style:normal}` would have rendered the emphasis
identically to the words around it, which is a marker that has been removed
rather than honoured, so it takes the same accent the service hero gives it. */
.hl-heroblock__title em{ font-style:normal; color:var(--hl-navy-300); }
:is(.hl-section--light, .hl-section--alt) .hl-heroblock__title em{ color:var(--hl-brand-navy); }
.hl-heroblock__title .hl-line{ display:block; }
/* ── M14 · THE TEXT LINK ON THE TWO MID-NAVY BANDS ─────────────────────────
J4.6 treats every dark band as one case and gives them all `--hl-red-400`.
That is right on deep navy (#04050E–#0A0B1F) and wrong on the two bands that
climb into mid navy:
Highline navy #1B1E45 → #2A2D7C red-400 measures 3.24:1 at the top
Brand gradient #2A2D7C → #565AC2 worse again
And the next step up the ramp makes it worse rather than better — red-300 on
#565AC2 is 2.75:1 — because a light red and a mid navy converge instead of
separating. There is no member of the red family that holds here.
So on those two bands the text link is white. The underline the component
grows on hover is still the state change, so nothing about the interaction
moves; only the ink, to the one value that clears 5.7:1.
Found by `public/_review-buttons.php`, which renders every variant on every
band precisely because the site-wide sweep can only measure the combinations
that happen to be in use — and no live page currently puts a text link on
either of these two. */
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link,
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link:hover,
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link:focus-visible,
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link:active{ --hl-btn-ink:var(--hl-text-light); }
:is(.hl-section--navy, .hl-section--brand).hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm),
:is(.hl-section--navy, .hl-section--brand).hl-cta--v-link :is(.hl-btn--primary,.hl-btn--accent,.hl-btn--dark):not(.hl-btn--sm):hover{
--hl-btn-ink:var(--hl-text-light);
}
/* The same two bands, the same reason, for the other red-on-navy link. */
:is(.hl-section--navy, .hl-section--brand) .hl-btn--link-light{ --hl-btn-ink:var(--hl-text-light); color:var(--hl-text-light); }
/* ── M15 · THE TWO MID-NAVY BANDS CARRY LIGHTER QUIET INK ──────────────────
`--hl-text-light-3` and `--hl-text-light-4` are tuned for the deep-navy
family (#04050E–#12142E), where they clear AA comfortably. Highline navy
climbs to `--hl-primary` (#2A2D7C) and the brand gradient to
`--hl-secondary` (#565AC2), and a tint tuned for near-black does not survive
either: the product page's financing disclaimer measured 3.74:1 the moment
the automatic rhythm put that chapter on Highline navy.
Same shape as L4 — the band re-points the tokens for its own interior, so
every disclaimer, caption and unit inside it follows without one of them
being named. Brand is a step further again because it is a genuinely light
ground; a "quiet" ink there is quiet only by comparison.
The eyebrow is the same problem in a hue rather than a tint: `--hl-navy-300`
is 4.35:1 on #2A2D7C. It steps aside for an explicit `.hl-eb--*` class the
way J6.4 does, so the Admin control still wins — and M12 still stops an
unsafe choice. */
.hl-section--dark.hl-section--navy{
--hl-text-light-3:rgba(255,255,255,.76);
--hl-text-light-4:rgba(255,255,255,.66);
}
.hl-section--brand{
--hl-text-light-3:rgba(255,255,255,.90);
--hl-text-light-4:rgba(255,255,255,.84);
}
.hl-section--dark.hl-section--navy:not([class*="hl-eb--"]),
.hl-section--brand:not([class*="hl-eb--"]){
--hl-eb-ink:#B9BDF0;
--hl-eb-bar:linear-gradient(180deg,#B9BDF0,var(--hl-navy-400));
--hl-eb-glow:0 0 12px rgba(185,189,240,.45);
}
/* ── M16 · THE OVERVIEW HAS A MEASURE ──────────────────────────────────────
`.hl-pdp__copy--wide` was a class the template emitted and nothing styled,
so the overview ran the full 1,280px container — around 150 characters a
line, roughly twice what is comfortable to read, and the widest running text
anywhere on the site. Visible the moment a device had a real description:
five of the six had none, so nothing had ever filled that band.
The two measures follow the ones the rest of the system already uses: the
chapter lede is 62ch, so body prose sits a little wider and the "wide"
modifier a little wider again — a modifier that now means something. */
/* Corrected in the final composition pass. `68ch`/`78ch` measured 94 and 108
characters a line — see the note on --hl-measure-editorial in tokens.css for
why a ch-based measure at body size renders ~39% wider than it reads. These
two land at roughly 75 and 85 characters, which is the range the brief asks
for and the range the rest of the system's ledes already sit in. */
.hl-pdp__copy{ max-width:54ch; }
.hl-pdp__copy--wide{ max-width:61ch; }
/* ===========================================================================
N · VERTICAL RHYTHM CONTRACT
---------------------------------------------------------------------------
Where one content group ends and the next begins.
The section padding (`--hl-sec-pad`) governs the space around a chapter, and
the typography margins govern the space between lines of prose. Nothing
governed the space between GROUPS — a paragraph and the action row under it,
an action row and the chips under that — so every action row on the site was
`display:flex; gap:…` and nothing else, and its vertical position was
whatever the element above it happened to leave behind. That produced 32px in
nineteen places, 24px in six, 20px in three and 0px in seven, from the same
intended relationship.
So this is not a new scale. 32px is what the composition already used most
often; the contract names it and applies it where the accident produced less.
HOW THE FLOOR WORKS. In normal flow, adjacent siblings' vertical margins
collapse to the larger of the two. A `margin-top:var(--hl-flow)` on the lower
group therefore RAISES a 0 or 20px gap to 32px and LEAVES a deliberate 40px
or 48px alone — which is what a floor should do, and why the closing CTA
composition below keeps its wider setting without being listed as an
exception. Flex and grid parents do not collapse margins, so a container that
already spaces its children with `gap` owns the flow there and its children
opt out; those are named at the end.
=========================================================================== */
/* ── N1 · THE GROUP PRIMITIVES ─────────────────────────────────────────────
An action row — a row of buttons or button-styled links that acts on the
copy above it. This is the allowlist, in the same spirit as the section and
accent class allowlists: a component joins the rhythm by being named here,
not by matching a pattern.
Chrome is deliberately absent. The header, announcement bar, sticky rail,
promotional modal and mobile drawer lay their actions out horizontally
against a fixed height, and a 32px block margin would push them out of it. */
:is(
.hl-hero__cta, .hl-hero__actions, .hl-shero__cta, .hl-heroblock__actions,
.hl-content__actions, .hl-cta__actions, .hl-about__actions,
.hl-funding__actions, .hl-form__actions,
.hl-price__cta, .hl-cd__cta, .hl-ioffer__cta, .hl-fund__cta,
.hl-story__cta, .hl-pdpend__cta, .hl-ipanel__foot, .hl-hw__leadcta,
.hl-final__cta
):not(:first-child){
margin-top:var(--hl-flow);
}
/* ── N2 · SUBORDINATE GROUPS ───────────────────────────────────────────────
Chips, tags and the fine print that qualifies the group above them are not
peers of it — they are attached to it, and they read as a separate group at
a smaller step than two peers need. `.hl-chips` already declared exactly
this value; re-pointing it at the token leaves the rendering identical and
removes the second place the number was written down. */
.hl-chips{ margin:var(--hl-flow-tight) 0; }
:is(.hl-final__chips, .hl-btile__chips, .hl-wtile__chips, .hl-pcard__tags):not(:first-child){
margin-top:var(--hl-flow-tight);
}
/* A disclaimer that follows an action row is separated by a hairline, so the
space above the rule is the group step and the space below it belongs to the
rule. `.hl-price__disc` set 20px above its own border, which read as the
fine print crowding the buttons rather than closing the block. */
.hl-price__cta + .hl-price__disc{ margin-top:var(--hl-flow); }
/* ── N3 · CONTAINERS THAT OWN THEIR OWN FLOW ───────────────────────────────
`gap` does not collapse with a margin, it adds to it. In a column that
already spaces its children, the contract margin would produce 52px from a
20px gap and a 32px floor, so the container sets the step instead and its
children stand down.
`.hl-wtile` and `.hl-pcard` are cards: a tighter internal rhythm is correct
there and the card's own gap is left as designed. */
.hl-hw__lead{ row-gap:var(--hl-flow); }
.hl-hw__lead > :is(.hl-hw__leadcta, .hl-chips){ margin-top:0; }
/* `.hl-wtile` is a flex column too, and a card wants a tighter internal rhythm
than a chapter does: added on top of the card's own spacing, the chip margin
put 44px between the chips and the text they belong to, inside a 26px-padded
box. The card already spaces them the way it was drawn, so the chips stand
down here rather than the card being re-spaced around them. */
.hl-wtile > :is(.hl-chips, .hl-wtile__chips){ margin-block:0; }
/* ── N4 · THE CLOSING CTA KEEPS ITS WIDER SETTING ──────────────────────────
Recorded rather than enforced. `.hl-final__cta` sits 40px under its lede and
`.hl-final__chips` 48px under the buttons, both from the preceding element's
own margin. Margin collapsing means N1's 32px floor cannot reduce either, so
the closing composition needs no exception — but the intent is written down
here so a later change to the floor is understood to affect it. */
/* ===========================================================================
O · THE SPACING PRESET, APPLIED
---------------------------------------------------------------------------
Sixteen of the approved compositions set `padding-block:var(--hl-sec-pad)` on
their own component class — `.hl-faq-sec`, `.hl-price`, `.hl-flow`, `.hl-cd`,
`.hl-ioffer`, `.hl-fund`, `.hl-net-sec`, `.hl-acc`, `.hl-hw`, `.hl-hw2`,
`.hl-sys`, `.hl-ind`, `.hl-calc`, `.hl-revs`, `.hl-floor`, `.hl-rhw`. This
file loads after layout.css, so on a specificity tie those rules beat
`.hl-section--compact` and `.hl-section--roomy`, and the Spacing select did
nothing at all on any of them. It was a control that looked like it worked.
The correction is the one section J6 already makes for the band: the preset
wins where an administrator has CHANGED it, and nowhere else. `section_classes()`
emits `--respace` only when the stored value differs from the one the block
ships with, so an untouched page renders exactly the bytes it rendered
before — this section adds rules rather than editing the sixteen it beats.
`padding-block` is the only property touched. A composition's ground, glows,
rails and internal layout are its own.
=========================================================================== */
/* `none` is deliberately absent.
On a plain block it already means zero, from layout.css, because nothing
else declares padding there. On one of the sixteen it means "the composition
sets its own" — which is what the preset is labelled, and what these
sections have always done. Forcing zero here instead collapsed every FAQ
chapter on the site the moment the marker started being emitted, because the
seeds store `none` on exactly those sections: the value was chosen while the
control was inert, and it meant "leave this alone" then too. */
.hl-section--respace.hl-section--compact { padding-block:var(--hl-sec-pad-compact); }
.hl-section--respace.hl-section--normal { padding-block:var(--hl-sec-pad-normal); }
.hl-section--respace.hl-section--roomy { padding-block:var(--hl-sec-pad-roomy); }
.hl-section--respace.hl-section--spacious { padding-block:var(--hl-sec-pad-spacious); }
/* A hero puts its padding on the inner shell so the stage can bleed past it.
Re-spacing the section would add to that rather than replace it, so the
shell stands down and the preset owns the band — but only where a preset is
actually being applied, which `none` is not. */
.hl-section--respace:not(.hl-section--none) :is(.hl-shero__shell, .hl-hero__shell){
padding-block:0;
}
/* ── N4.1 · THE RE-SPACED HERO STILL HAS TO CLEAR THE HEADER ───────────────
The header is transparent and sticky, and a dark opening hero deliberately
sits UNDER it: `.hl-heroblock--under-header` (section E5) pulls the section
up by the header's height and pays it back as padding, so the breadcrumb and
the H1 start below the nav rather than behind it.
That padding is a single class, (0,1,0). The preset rules immediately above
are (0,2,0) and land later in the file, so on any hero whose Spacing has
been changed from its default the preset REPLACED the offset instead of
adding to it — and the section kept its negative margin. The result was a
breadcrumb rendering 28px above the bottom of the header at 1440 and 20px at
390: not clipped, not overlapped, simply behind it.
Seven pages were affected, all of them `hero · centered` with a stored
Spacing — the four legal documents, the 404 and the maintenance page (the
two a lost visitor is most likely to see), and one draft landing page.
The fix restates each preset WITH the header offset added, at (0,3,0) so it
outranks the preset it is correcting. `none` is included because a hero
carrying `none` still needs to clear the header — it just adds nothing else. */
.hl-section--respace.hl-heroblock--under-header.hl-section--none{
padding-top:var(--hl-header-height, 4.5rem);
}
.hl-section--respace.hl-heroblock--under-header.hl-section--compact{
padding-top:calc(var(--hl-header-height, 4.5rem) + var(--hl-sec-pad-compact));
}
.hl-section--respace.hl-heroblock--under-header.hl-section--normal{
padding-top:calc(var(--hl-header-height, 4.5rem) + var(--hl-sec-pad-normal));
}
.hl-section--respace.hl-heroblock--under-header.hl-section--roomy{
padding-top:calc(var(--hl-header-height, 4.5rem) + var(--hl-sec-pad-roomy));
}
.hl-section--respace.hl-heroblock--under-header.hl-section--spacious{
padding-top:calc(var(--hl-header-height, 4.5rem) + var(--hl-sec-pad-spacious));
}
/* ── N5 · RICH TEXT HAS A FLOOR ────────────────────────────────────────────
The editor writes prose; it should never have to write SPACE.
Paragraphs, lists, headings, quotes and tables all carry a margin, so an
editor typing normally gets a normal rhythm. What has no margin at all is
anything the reset flattened — an image or a figure, which `body.hl-body`
sets to `display:block; margin:0` — and anything the browser gives no
default to. Put an image between two paragraphs and it touches both, and the
only tool an editor has to fix that from inside a rich-text field is a run of
empty lines. That is the `
` hack, and it is a hack because the system
left a hole, not because the editor was careless.
This closes it the same way section N1 does: a `margin-top` on the following
sibling collapses with whatever the previous one already reserved, so it
RAISES a zero gap to one line and cannot reduce a deliberate 1.5em. The
heading rule in base.css is `.hl-rich h2` at (0,1,1) and still wins its
larger step; `:first-child` never matches `* + *`.
No stored content currently uses a doubled `
`; this is here so none ever
needs to. */
.hl-rich > * + *{ margin-top:1em; }
/* ===========================================================================
P · THE ENLARGED PRODUCT GALLERY
---------------------------------------------------------------------------
A `
` hack, and it is a hack because the system left a hole, not because the editor was careless. This closes it the same way section N1 does: a `margin-top` on the following sibling collapses with whatever the previous one already reserved, so it RAISES a zero gap to one line and cannot reduce a deliberate 1.5em. The heading rule in base.css is `.hl-rich h2` at (0,1,1) and still wins its larger step; `:first-child` never matches `* + *`. No stored content currently uses a doubled `
`; this is here so none ever needs to. */ .hl-rich > * + *{ margin-top:1em; } /* =========================================================================== P · THE ENLARGED PRODUCT GALLERY --------------------------------------------------------------------------- A `