/* POPPINS, SELF-HOSTED — the page's last third-party request, now gone.
Everything else on this page is already inlined, so a to
fonts.googleapis.com was the one thing that made it not self-contained: it
renders in a fallback font on any network that blocks Google, it costs two DNS
lookups and two round trips on the critical path, and it is a third-party
connection somebody has to justify in a privacy review before handover.
These are the SAME latin subsets Google serves (from @fontsource/poppins),
31KB raw for all four weights — about 42KB of base64, which is 7% of a page
that is already 620KB. Poppins is SIL OFL 1.1, which permits this;
POPPINS-OFL-LICENSE.txt travels with the source kit.
font-display:swap is kept from the Google URL's &display=swap. The bytes are
in the document, so there is nothing to wait for and no flash of invisible
text either way — but if the @font-face is ever moved back out to a file, the
descriptor is already correct.
unicode-range is deliberately NOT declared. Google splits its CSS into subsets
and uses the range to pick one; with a single face per weight and no siblings
to choose between, a range only adds a way to get it wrong. Three glyphs in the
features list — U+2194, U+25AD, U+25C9 — are outside this subset and fall
through to system-ui, which is exactly what they did before. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;
font-display:swap;src:url(/assets/7d93459d86585bfcdbb7.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;
font-display:swap;src:url(/assets/cd36de204aca2d5fa263.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;
font-display:swap;src:url(/assets/f4e80d9dfd374d02989b.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;
font-display:swap;src:url(/assets/9338e65fc077355c7a87.woff2) format('woff2')}
/* ===========================================================================
BeHive landing page — ARCHITECTURE PROTOTYPE v4
Rough fidelity on purpose. This exists to judge FLOW, not finish.
WHAT CHANGED FROM v2, AND WHY. v2 had the right arc and the wrong motif. It
put the comb in a 112px column at a fixed x (64%), which produced three
defects visible in the first screenshot pass:
· the column ran straight THROUGH the four-up copy on the light zone —
hexagons sitting behind body text, unreadable
· it clipped to hard vertical edges on both sides, so it read as a stripe
pasted on rather than as part of the surface
· content sat left of it, so the right third of every dark screen was
simply empty
All three come from the same mistake: treating the motif as an OBJECT placed
on the page. In v3 it is the GROUND.
1 · THE FIELD. A full-bleed hexagonal lattice behind everything, at 7-9%
contrast. It never clips, because it has no edges. It never leaves dead
space, because it is everywhere. It is a texture, not a graphic.
2 · THE ROUTE. One lit path travels the whole page inside that lattice, and
its x position is a function of page depth — declared once, in ROUTE
below, as a set of keyframes. Continuity is not a coincidence: the same
function generates the path across all four zones AND the three seams
between them, so it is a single unbroken object from the hero to the
close, where it arrives at the mark.
The route is chosen against where the content ISN'T. It hugs the right
through the dark opening (content is left), crosses at the first seam,
runs the left margin through the light chamber (content is full width),
sweeps right for the card, and converges to centre for the close. That is
what "guide attention instead of distracting" means here: the light is
always in the room the copy leaves empty.
3 · OCCLUSION. Where the route does pass behind text, the lit cells and the
connecting line drop to a tenth of their brightness — measured from the
real layout, not guessed. So the motif can be bold in open space without
ever competing with a word.
4 · GEOMETRY IS STATIC, LIGHT MOVES. Nothing is scroll-driven. No pinning,
no hijack, no snap. The travelling pulse is a CSS animation with a
per-cell delay along the route, so the light descends. Under reduced
motion it stops and simply stays lit.
JS OFF: the four-zone arc, the three seams, all copy, all CTAs and the whole
layout are CSS. Only the lattice texture is missing. Nothing is gated.
Placeholders are marked PH. Real assets drop into those slots unchanged.
=========================================================================== */
:root{
/* the arc — one ramp, sampled at eight depths */
--d1:#0B2430; --d2:#081E29; --d3:#061520;
--d4:#F4F8F5; --d5:#FFFFFF;
--d6:#F7EEDC; --d6b:#F0E1C4; /* the retired warm pivot — see below */
--d7:#0A2030; --d8:#061520;
/* BAND COLOURS, from the client's "Section Band Colors" sheet. This replaced
the four-zone scheme, where each zone was ONE continuous surface with no
band edges inside it. The sheet asks for a colour per SECTION instead, so
the light run is now four flat bands rather than one gradient, and the card
band moves from warm cream to dark — which retires the warm zone entirely
and takes the page from three tonal transitions to five.
The hero is deliberately NOT changed; its suggestion was declined. */
--b-what:#F6FBF9; /* 02 how it works */
--b-bercor:#FFFFFF; /* 03 built on trust */
--b-inside:#F2F8F6; /* 04 you stay in control */
--b-why:#FFFFFF; /* 05 made for people */
--b-card1:#072C33; /* 06 bercor pay, top */
--b-card2:#0B3940; /* 06 bercor pay, bottom */
--b-faq:#FFFFFF; /* 07 good to know */
--green:#0C8F5B; --green-ui:#0B8656; --green-ink:#076B44;
--mint:#BFE5D3; --teal:#4AD3AC; --deep:#024427;
--honey:#E8A317; --navy:#0A202B;
--ink:#0A202B; --ink-60:rgba(10,32,43,.72); --ink-40:rgba(10,32,43,.44);
--lit:rgba(255,255,255,.88);
/* Secondary text on dark. This was white at 40%, which measures 3.66:1 on
--d1 and 3.77:1 on --d3 -- below AA for body copy on the plain background,
before any WebGL was involved. 62% clears it with margin on every dark
surface in the arc while still reading as clearly secondary to --lit. */
--lit-40:rgba(255,255,255,.62);
--maxw:75rem; --gut:clamp(1.25rem,5vw,2.5rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Poppins,system-ui,sans-serif;background:var(--d1);
color:var(--lit);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
position:relative;z-index:2}
/* ---------------------------------------------------------------------------
TYPE — six steps, and nothing off-scale. The old page had 20+ sizes between
12 and 18.5px and NOTHING between 19 and 42. Feature is the level it lacked.
--------------------------------------------------------------------------- */
.t-display{font-size:clamp(2.1rem,5.4vw,3.9rem);line-height:1.04;
letter-spacing:-.03em;font-weight:600;margin:0}
.t-section{font-size:clamp(1.72rem,3.5vw,2.65rem);line-height:1.12;
letter-spacing:-.022em;font-weight:600;margin:0}
.t-feature{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.2;
letter-spacing:-.015em;font-weight:600;margin:0}
.t-lede{font-size:clamp(1.02rem,1.55vw,1.2rem);line-height:1.6;margin:0;max-width:56ch}
.t-body{font-size:.95rem;line-height:1.62;margin:0;max-width:38ch}
.t-micro{font-size:.8rem;line-height:1.55;margin:0;letter-spacing:.01em}
.eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
margin:0 0 18px}
.hl{color:var(--teal)}
.lit .t-lede,.lit .t-body{color:var(--lit-40)}
.dim{color:var(--ink-60)}
/* ---------------------------------------------------------------------------
DEPTH — three padding tiers, so space carries information. v2's error here
was the opposite of the old page's: the old page used one clamp everywhere
(8,000px of uniform rhythm), v2 left 400px voids under short blocks.
--------------------------------------------------------------------------- */
.depth{position:relative;padding-block:clamp(64px,7.5vw,112px)}
.depth.tight{padding-block:clamp(44px,5vw,72px)} /* evidence */
.depth.open{padding-block:clamp(84px,10vw,150px)} /* arrival, close */
/* The zones. The hero and the close are still ONE continuous surface each; the
light run is now four flat bands from the colour sheet, and the pivot is a
two-stop dark gradient rather than warm cream. */
.zone{position:relative;isolation:isolate}
.zone-descent{background:linear-gradient(180deg,var(--d1) 0%,var(--d2) 44%,var(--d3) 100%)}
.zone-chamber{background:var(--b-bercor);color:var(--ink)}
.zone-pivot{background:linear-gradient(180deg,var(--b-card1) 0%,var(--b-card2) 100%);
color:#fff}
.zone-return{background:linear-gradient(180deg,var(--d7) 0%,var(--d8) 100%)}
/* PER-SECTION BANDS, drawn on a ::before at z-index -1 rather than as a
background on the section itself. The comb field is a child of the ZONE at
z-index 0, so a plain background on the section would paint over it and the
lattice would vanish from the light run. A negative-z pseudo-element sits
below the field and above the zone's own background, which is exactly the
layer a band colour wants. The zone's isolation:isolate keeps it contained.
Only the two bands that differ from the zone base are declared. */
#what::before,#inside::before{content:"";position:absolute;inset:0;z-index:-1;
background:var(--band)}
/* ─────────────────── THE MESH · the network lattice on white ────────────────
A second, quieter hexagon layer for the flat white bands. Those bands went
flat when the colour sheet replaced the chamber gradient — measured, the whole
light run carried 53 comb cells across 2,900px and they faded out inside the
first 520px, so below the first band there was nothing at all.
FLAT-TOP, and that is the one deliberate difference from the comb field.
Every other hexagon on this page was measured at vertex angle 30 (mod 60) —
pointy-top: the comb field's 231 cells, the four Why marks, the two card base
cells. The round-trip diagram's 267 polygons are at 0, flat-top. So the mesh
borrows the diagram's orientation rather than inventing a third angle, and
since the diagram sits in the band immediately above `#bercor`, the two read
as related. A small arbitrary rotation (12 was tried) reads as a misalignment
next to strong horizontals, not as a decision.
Drawn as a native flat-top lattice (step 1.5R x sqrt(3)R, odd columns offset
half a step) rather than by rotating the pointy-top one 30 degrees. Same
result, and it avoids generating a padded over-area to cover the corners.
z-index 0: above the band colour on ::before at -1, below .wrap at 2. */
.mesh{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mesh svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mx{fill:none;stroke:var(--green);stroke-linejoin:round;
stroke-opacity:var(--a,.06);stroke-width:var(--w,2px)}
/* ── THE MESH PULSES · a front that travels down and leaves nothing ─────────
The brief: hexagons light up, the lit band moves top to bottom, they fade out
behind it. A blinking path that does not stay lit.
WHY THIS REPLACED A DIP. The previous version dimmed each cell 35% below its
own resting value on a 22s left-to-right wave, and it was reported invisible
twice. It was. Measured on the real page: a full cycle moved a maximum of TEN
RGB LEVELS, across about a hundred pixels out of a million. The animation was
correct and the substrate could not carry it — a 1-2px stroke at 3-11% opacity
in green on near-white has nowhere to go. Raising the base 3.4x (in
buildMesh) is what made an animation possible at all; this keyframe is the
second half of that change, not a tweak to the first.
THE FRONT IS 10% OF THE CYCLE. Most of the lattice sits at rest at any moment
and a narrow band is lit — that is what the eye catches as movement. A wide
soft wave averages out into "general shimmer", which is what the old one was.
With a 6s cycle over the full band height, the lit band is about a tenth of
the height and crosses in six seconds.
OPACITY AND WIDTH TOGETHER, per the mesh's own rule. --a and --w are the
cell's resting values, set per element by the builder; the keyframes scale
both. Animating one alone gives a wash or a wireframe rather than a pulse.
THE PEAK IS A NEW STATE AND IT IS VERIFIED, NOT ASSUMED. The old keyframe
could never brighten past --a, so the frame contrast_v4 already passed was by
definition the worst case. That guarantee is gone the moment cells light UP —
so contrast_v4 now pins every mx animation to this peak frame and measures
there. Do not raise these multipliers without re-running it. */
@keyframes mxPulse{
0% {stroke-opacity:calc(var(--a,.06) * .55); stroke-width:var(--w,2px)}
1.5% {stroke-opacity:calc(var(--a,.06) * .55); stroke-width:var(--w,2px)}
5% {stroke-opacity:calc(var(--a,.06) * 1.55);
stroke-width:calc(var(--w,2px) * 1.45)}
11% {stroke-opacity:calc(var(--a,.06) * .55); stroke-width:var(--w,2px)}
100% {stroke-opacity:calc(var(--a,.06) * .55); stroke-width:var(--w,2px)}
}
/* THE FALL IS LONGER THAN THE RISE — 420ms up, 720ms down. A symmetric blink is
what reads as flicker; a light that arrives quickly and decays slowly reads as
something passing through. Same total lit time either way, and it is most of
what took the "distracting" edge off at the same brightness. */
[data-mesh] > .mesh .mx{
animation:mxPulse 12s linear infinite;
animation-delay:var(--md,0ms)}
/* Paused when the band is off-screen. A 6s period costs exactly what a 60s one
costs — animations tick every frame whatever their duration, so only the
element count matters, and neither stroke-opacity nor stroke-width is
compositor-accelerated.
POLARITY: running is the DEFAULT and script only ever adds the pause, so a
page with no JS keeps the motion and JS only removes work nobody is watching.
The inverse — animating only once a class is added — would leave the mesh dead
for every no-JS visitor. */
[data-mesh] > .mesh.mx-idle .mx{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
[data-mesh] > .mesh .mx{animation:none}
}
/* contrast_v4 adds this to freeze every cell at the brightest frame the pulse
ever reaches, so AA is measured against the actual worst case rather than
against whichever five moments the sampler happened to catch. */
html.mx-peak [data-mesh] > .mesh .mx{
animation:none;
stroke-opacity:calc(var(--a,.06) * 1.55);
stroke-width:calc(var(--w,2px) * 1.45)}
#what{--band:var(--b-what)}
#inside{--band:var(--b-inside)}
/* THE THREE TRANSITIONS. A 220px blend, not an edge — this is what makes the
page read as one surface rather than as stacked panels. The route runs
through these too, which is the point: the seam is where it crosses. */
.seam{height:220px;position:relative;margin-block:-1px;isolation:isolate}
/* The hero-to-light junction gets a longer ramp and tighter flats either side.
Net vertical distance goes DOWN while the colour change gets more room —
the complaint was both "too much space" and "too abrupt", and those only
look contradictory if you assume the gap has to be flat. */
.seam-1{height:200px}
.zone-descent .depth.open{padding-bottom:clamp(6px,1vw,16px)}
#what{padding-top:clamp(10px,1.4vw,22px)}
/* A two-stop ramp from near-black to near-white travels in a straight line
through desaturated mid-grey — which is why it read as a stark wipe rather
than a transition. These stops route the same journey through the brand
green, and cluster more of them in the middle where the eye notices the
change, so the ramp reads as light arriving rather than as a fade.
Stops are front-loaded so the light tone has fully arrived by ~78% of the
seam. A ramp that fills the entire height is what made a 300px seam feel
like dead space: the eye reads the transition as finished long before the
geometry agrees. */
.seam-1{background:linear-gradient(180deg,
var(--d3) 0%, #08222c 12%, #0d3339 26%, #1a4a44 38%,
#2f6459 48%, #58897a 58%, #8db0a1 67%, #bcd4c7 74%,
#e2ece5 78%, var(--b-what) 86%, var(--b-what) 100%)}
/* SEAM 2 AND 3 NOW CROSS TONE, so they cannot stay two-stop ramps. They used to
join white to cream and cream back to white — neighbouring tints, where a
straight interpolation is invisible. The card band is dark now, so these are
the same journey seam-1 makes, and they inherit its finding: a two-stop ramp
between a near-white and a near-black travels in a straight line through
desaturated mid-grey and reads as a stark wipe, not a transition. Both are
routed through the brand green instead, with the stops clustered where the
eye notices the change, and the destination fully arrived by ~80% so the
remaining height reads as the next band rather than as dead space.
ROUTED THROUGH TEAL, NOT THROUGH THE BRAND GREEN. Seam 1 goes through green
because its destination IS green-tinted white, so green is a waypoint between
the two ends. Here the destination is #072C33, a deep teal, and green sits
outside both ends — the first cut of these ramps put a hue in the middle that
neither neighbour has, and both seams read as a green stripe rather than as
the dark arriving. The waypoints now stay in the card band's own family. */
.seam-2{background:linear-gradient(180deg,
var(--b-why) 0%, #eef5f5 10%, #d3e5e6 22%, #a9c9cc 33%,
#7ba9ae 43%, #52868d 53%, #33686f 63%, #1d5058 72%,
#0e3b43 80%, var(--b-card1) 90%, var(--b-card1) 100%)}
.seam-3{background:linear-gradient(180deg,
var(--b-card2) 0%, #124349 12%, #1c555c 24%, #2f6d73 36%,
#528c90 46%, #7baaad 56%, #a6c8ca 66%, #cfe3e4 74%,
#edf5f5 81%, var(--b-faq) 90%, var(--b-faq) 100%)}
/* ---------------------------------------------------------------------------
THE FIELD + THE ROUTE. Full bleed, behind everything, never interactive.
--------------------------------------------------------------------------- */
.field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.field svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* THE FIELD IS NOT WALLPAPER.
One tiled pattern at a single opacity across 7,400px reads as exactly that:
a repeat. Two things fix it at once, which is why it is worth doing rather
than just dialling the opacity down. The base tile drops to a whisper, and a
sparse scatter of individually drawn cells sits on top at real strength —
some cells simply more present than others, the way a honeycomb photographed
at depth would be.
And because the scatter is placed by the SAME occlusion test the route uses,
the distinct cells never land on copy. So the field is busiest exactly where
there is nothing to read, and quietest under the words. One move, both jobs. */
/* NOT EVERY CELL. This is the difference between the hero's comb and a
wallpaper, and it is not opacity — it is COVERAGE. The hero lights a subset
of the lattice and leaves the rest empty, so the eye reads scattered
hexagons. Draw every cell of a complete lattice and it reads as a repeating
tile at any opacity you like, which is exactly what it looked like.
So the tiled background is gone. Cells are drawn individually, at about 45%
of positions, in three stroke weights, and the layer is softened by half a
pixel so the edges are not wiry.
fill:none is load-bearing: an SVG defaults to BLACK fill, so the
moment these stopped inheriting the old rule they rendered as solid black
hexagons across the page. */
/* NAMESPACED. These were called .cell, which the diagram's hub cluster has
used since it was ported — so `.cell{fill:none}` quietly stripped the fill
off all seven hub hexagons and they could never light. Two features, one
class name, and the older one lost. */
.cf{fill:none}
.cf-a{stroke-width:1.2} .cf-b{stroke-width:2} .cf-c{stroke-width:3}
.dark .cf{stroke:#8FE8C6} .light .cf{stroke:#0C8F5B} .warm .cf{stroke:#A8760B}
.field svg{filter:blur(.45px)}
/* ---------------------------------------------------------------------------
STATION — every depth attaches to the page the same way, so there is ONE
layout idea rather than a per-section recipe. Where a depth has a hero-scale
visual it becomes two columns; where it has a grid it goes full measure.
--------------------------------------------------------------------------- */
.station{max-width:52rem}
/* #what ONLY, and it is about two axes disagreeing rather than about alignment.
Measured at 1547: the wrap is 1200px centred, the diagram below spans it
(214..1334 — 214 clear left, 213 right), but .station is 52rem = 832px LEFT
aligned inside it, so the copy sat 40px from the left edge and 328px from the
right. Two stacked elements on different centres is what reads as "heavier on
the left" even though nothing is actually misaligned.
Centring the BLOCK, not the text. 52rem stays — that is the reading measure,
about 70 characters — and the text stays ragged-right. Only the block moves
onto the diagram's axis.
#why, #faq and #inside have the same bare .station in a .wrap and the same
left bias. Deliberately NOT changed here: a left-aligned accordion is the
convention and Malcom flagged this band alone. */
#what .station{margin-inline:auto}
.station .eyebrow{color:var(--teal)}
.zone-chamber .station .eyebrow{color:var(--green-ink)}
.zone-chamber .hl{color:var(--green-ink)}
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,5vw,72px);align-items:center}
/* The trustline is a direct child of .split now, not of .station, so mobile
gets the order it needs from source order alone: copy, visual, trustline.
The two-column placement below is DESKTOP ONLY — applied at every width it
clamped the visual into a 142px sliver and threw it above the store badges,
because at one column `grid-column:2` has nowhere to go. */
@media (min-width:1001px){
.depth.open .split{grid-template-rows:auto auto}
.depth.open .station{grid-column:1;grid-row:1}
.depth.open .visual{grid-column:2;grid-row:1 / span 2;align-self:center}
.depth.open .trustline{grid-column:1;grid-row:2}
}
.split .station{max-width:none}
/* ---------------------------------------------------------------------------
components — rough
--------------------------------------------------------------------------- */
.ph{border-radius:14px;display:grid;place-items:center;text-align:center;
font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
border:1px dashed currentColor;opacity:.55;padding:14px;line-height:1.5}
.ph.hexph{border:none;background:rgba(255,255,255,.045)}
.zone-chamber .ph.hexph{background:rgba(10,32,43,.05)}
.lit .ph{color:var(--lit-40)} .zone-chamber .ph{color:var(--ink-40)}
.badges{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;max-width:27rem}
.badge{display:inline-flex;align-items:center;gap:10px;background:#000;color:#fff;
border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 18px;
text-decoration:none;flex:0 0 auto}
/* The glyph must never let the badge stretch: a full-width store badge is a
standing brand rule on this project. */
.badge svg{width:22px;height:22px;flex:none}
.badge small{display:block;font-size:.6rem;opacity:.7}
.badge strong{display:block;font-size:.95rem;margin-top:-2px}
.trustline{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:26px 0 0;
padding:20px 0 0;border-top:1px solid rgba(255,255,255,.13)}
.trustline li{display:flex;align-items:center;gap:9px;font-size:.82rem;
color:var(--lit-40);line-height:1.4}
.trustline svg{width:17px;height:17px;flex:none;color:var(--teal)}
/* 1.2rem/700 is deliberate, not cosmetic. Honey on the teal-lit backgrounds
measures 4.1-4.4:1 — under AA for body text and awkward to fix by nudging the
colour, because the honey IS the brand accent. At 19.2px bold it is "large
text" under WCAG, where the threshold is 3.0, and it clears with room. It
also suits a call-out better than 16px did. */
.rally{margin:16px 0 0;font-weight:700;color:var(--honey);display:flex;
width:fit-content;align-items:center;gap:12px;font-size:1.2rem}
.rally::before,.rally::after{content:"";height:1px;width:26px;background:rgba(232,163,23,.5)}
.btn{display:inline-block;background:var(--green-ui);color:#fff;text-decoration:none;
font-weight:600;font-size:.95rem;padding:14px 26px;border-radius:999px;margin-top:26px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(22px,3vw,42px);margin-top:clamp(30px,3.5vw,46px)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(16px,2vw,26px);margin-top:clamp(30px,3.5vw,46px)}
.item .t-feature{margin-bottom:9px}
.tile{width:46px;height:51px;margin-bottom:16px;display:grid;place-items:center;
clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
font-size:.9rem;font-weight:700}
.lit .tile{background:rgba(74,211,172,.16);color:var(--teal)}
.zone-chamber .tile{background:rgba(12,143,91,.10);color:var(--green-ink)}
.phone{aspect-ratio:9/19.5;border-radius:18px;padding:5px;
background:linear-gradient(165deg,#274a58,#062434 55%,#03151f)}
/* The warp reveal (gl.js, moment 4). Everything here is opt-out: the canvas is
never drawn without JS + WebGL, and .warp-hide is only ever added by script,
so with either missing the four mockups are simply present and flat — which
is the shippable state. */
#insideRail{position:relative}
/* width/height explicit, NOT `inset:-8% -4%`: a