at an inline 2.2rem - same fault */
.h2k{font-size:clamp(1.35rem,5vw,2.2rem);line-height:1.18}
/* 2. divider captions may wrap */
.rsplit span,.phour span{white-space:normal;text-align:center}
@media(max-width:760px){
.rsplit{gap:10px;margin:38px auto 22px}
.rsplit span{font-size:.62rem;letter-spacing:.1em}
.phour{gap:10px}
.phour span{font-size:.64rem;letter-spacing:.1em;padding:6px 14px}
}
/* 3. founder / feature cards */
.cards4>*{min-width:0}
@media(max-width:600px){ .cards4{grid-template-columns:1fr} }
/* 4. stat rows wrap instead of overflowing */
.jstat{flex-wrap:wrap}
/* 5. hop labels cannot sit beside a 3px connector on a phone.
IMPORTANT: .jseg em already carries transform:translateY(-50%) from the
v6 block, so this override MUST be translate(-50%,-50%) or the label
loses its vertical centring. The receipt token is hidden at this size
because a centred full-width label would sit on top of it - the receipts
are still described in the caption text below each chain. */
@media(max-width:600px){
.jseg{height:170px}
.jseg em{left:50%;transform:translate(-50%,-50%);width:calc(100vw - 40px);
max-width:none;text-align:center}
.jseg s{display:none}
}
/* ============================================================
RESPONSIVE FIXES, PART 2 (4 Aug 2026) - from Govinda's marked-up screens.
Two faults the first pass missed:
6. THE FACE-TAP INSET WAS SIMPLY SWITCHED OFF ON PHONES.
`@media(max-width:920px){ .ftap{display:none} }` was added back in v12
because there is no room BESIDE a 3px connector on a narrow screen.
But the Face-Tap is the single hardest idea on the page to convey in
words, so hiding it on the device most readers use was the wrong call.
It now stacks ABOVE the hop label instead of sitting beside the
connector. Safe to re-position: the ftapShow1/2/3 keyframes animate
OPACITY ONLY, so overriding `transform` here cannot break them.
7. TWO IMAGES COLLIDED ON THE ABOUT PAGE.
#story is [text][image] but #mission is [image][text] - neither uses
.sm.flip. Collapsed to one column that yields
text / image / image / text, so both photographs ended up adjacent and
"Our Story" sat BELOW its picture while "Our Mission" sat above its own.
Fixed structurally: on mobile any .sm child that is not .txt goes first,
so every section reads picture-then-words regardless of DOM order.
This block supersedes the max-width:600px .jseg rules in part 1 - it is
later in source, so it wins at every width where both apply.
============================================================ */
@media(max-width:920px){
/* 6. Face-Tap inset, centred above the label */
.ftap{display:block;left:50%;right:auto;top:12px;transform:translateX(-50%);width:170px}
.jseg{height:240px}
.jseg em{top:auto;bottom:6px;left:50%;transform:translateX(-50%);
width:calc(100vw - 40px);max-width:none;text-align:center}
/* the receipt token would sit under the centred label; the receipts are
still named in the caption under each chain */
.jseg s{display:none}
/* 7. picture first, then words, in every .sm section */
.sm{gap:30px}
.sm > :not(.txt){order:-1}
.sm.flip .txt{order:0}
}
/* ============================================================
MOBILE PART 3 (4 Aug 2026)
(a) REGRESSION I INTRODUCED YESTERDAY. capV1/2/3 translate the capsule a
FIXED 104px, which was sized for the old .jseg{height:118px}. Part 2
raised the connector to 240px to fit the stacked Face-Tap, so the
capsule was stopping less than halfway down. Mobile now has its own
keyframes with the travel matched to the taller connector.
LESSON: these chains animate in PIXELS, so any change to .jseg height
must be paired with new travel keyframes.
(b) Govinda: a capsule crossing the Face-Tap should go semi-transparent so
the contact bar and its glow show through, then return to solid.
Geometry: Face-Tap occupies y 12..96 of the 240px connector; the
capsule is 44px tall and travels -8px -> 226px across its 11% window.
It therefore clears the band at (96+8)/234 = 44.4% of its travel, i.e.
~4.9% of the cycle after it starts. Dip windows are exactly that.
Applied ONLY to segments that actually carry a Face-Tap - the two
secure-tunnel hops keep the plain keyframes.
(c) The capsule must sit ABOVE the inset for the fade to reveal anything.
============================================================ */
@media(max-width:920px){
/* (c) stacking: capsule over inset */
.jseg .ftap{z-index:1}
.jseg i{z-index:2}
/* (a) plain travel, matched to the 240px connector - no Face-Tap on these
two hops (both are the Board-Controlled Secure Tunnel) */
.jchain.live .jseg:nth-of-type(2) i{animation:capM1 20s linear infinite}
.jchain.rchain.live .jseg:nth-of-type(6) i{animation:capM3 20s linear infinite}
/* (b) Face-Tap hops: same travel, with the transparency dip */
.jchain.rchain.live .jseg:nth-of-type(2) i{animation:capM1d 20s linear infinite}
.jchain.live .jseg:nth-of-type(4) i{animation:capM2d 20s linear infinite}
.jchain.rchain.live .jseg:nth-of-type(4) i{animation:capM2d 20s linear infinite}
.jchain.live .jseg:nth-of-type(6) i{animation:capM3d 20s linear infinite}
/* response hop 2 never had a Face-Tap wired even though the design calls
for one; ftapShow2 is already the matching 35-50% window */
.jchain.rchain.live .jseg:nth-of-type(4) .ftap{animation:ftapShow2 20s linear infinite}
}
/* travel keyframes - transform is omitted mid-way on purpose so it keeps
interpolating linearly; only opacity is being shaped in the dip */
@keyframes capM1{0%,19.5%{transform:translateY(-14px);opacity:0}21%{transform:translateY(-8px);opacity:1}
32%{transform:translateY(226px);opacity:1}33.5%,100%{transform:translateY(226px);opacity:0}}
@keyframes capM2{0%,35.5%{transform:translateY(-14px);opacity:0}37%{transform:translateY(-8px);opacity:1}
48%{transform:translateY(226px);opacity:1}49.5%,100%{transform:translateY(226px);opacity:0}}
@keyframes capM3{0%,51.5%{transform:translateY(-14px);opacity:0}53%{transform:translateY(-8px);opacity:1}
64%{transform:translateY(226px);opacity:1}65.5%,100%{transform:translateY(226px);opacity:0}}
@keyframes capM1d{0%,19.5%{transform:translateY(-14px);opacity:0}
21%{transform:translateY(-8px);opacity:.28}24.6%{opacity:.28}26.4%{opacity:1}
32%{transform:translateY(226px);opacity:1}33.5%,100%{transform:translateY(226px);opacity:0}}
@keyframes capM2d{0%,35.5%{transform:translateY(-14px);opacity:0}
37%{transform:translateY(-8px);opacity:.28}40.6%{opacity:.28}42.4%{opacity:1}
48%{transform:translateY(226px);opacity:1}49.5%,100%{transform:translateY(226px);opacity:0}}
@keyframes capM3d{0%,51.5%{transform:translateY(-14px);opacity:0}
53%{transform:translateY(-8px);opacity:.28}56.6%{opacity:.28}58.4%{opacity:1}
64%{transform:translateY(226px);opacity:1}65.5%,100%{transform:translateY(226px);opacity:0}}
/* ------------------------------------------------------------
THREE-COLUMN CARD GRIDS ON /nexa/
page-nexa.php carried style="grid-template-columns:repeat(3,1fr)" INLINE,
which beats every media query - the same fault class as the inline
font-size on the headings. The inline style is removed and replaced by
.c3, so the grid can actually collapse.
------------------------------------------------------------ */
.cards4.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){ .cards4.c3{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .cards4.c3{grid-template-columns:1fr} }
/* ============================================================
VIDEO POSTERS (4 Aug 2026)
The two Google Drive /preview iframes were replaced by a poster image with
a play button. Three reasons, in order:
1. FIT. Drive's player has a minimum internal width, so at ~350px it
rendered wider than its frame and was clipped - the copyright card
was cut off at both edges on a phone. Nothing in CSS can fix that:
the overflow happens inside a cross-origin iframe. An with
object-fit:cover fits any container exactly.
2. WEIGHT. The homepage was loading two third-party embeds on every
visit. Now nothing loads from Drive until someone presses play,
which matters for the Lighthouse >= 85 mobile target.
3. LOOK. The poster is the film's own frame, so the card is legible
before playback instead of showing whatever frame Drive picked.
Pressing play swaps the iframe in, in place - it does not open a new tab.
============================================================ */
.vidbox{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;
border:1px solid rgba(255,255,255,.1);background:#0d0d13}
.vidbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* The player is rendered at a FIXED 640px-wide box and then scaled down to
fit. Drive's player has a minimum internal width - below roughly 500px it
lays out wider than its frame and gets clipped, which is what cut the
copyright card off at both edges on a phone. Scaling the IFRAME (not its
content) sidesteps that entirely and is allowed cross-origin. JS sets the
width/height/scale and re-fits on resize. */
.vidbox iframe{position:absolute;left:0;top:0;border:0;transform-origin:0 0}
.vidplay{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
background:radial-gradient(ellipse at center,rgba(10,10,14,.30),rgba(10,10,14,.55));
display:flex;align-items:center;justify-content:center;transition:background .25s}
.vidplay:hover{background:radial-gradient(ellipse at center,rgba(10,10,14,.18),rgba(10,10,14,.45))}
.vidplay:focus-visible{outline:3px solid var(--cy);outline-offset:-3px}
.vidplay i{position:relative;display:block;width:72px;height:72px;border-radius:50%;
background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(46,197,246,.95));
box-shadow:0 10px 34px rgba(0,0,0,.5);transition:transform .25s}
.vidplay i::after{content:"";position:absolute;left:50%;top:50%;margin:-12px 0 0 -6px;
border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.vidbox:hover .vidplay i{transform:scale(1.08)}
@media(max-width:600px){ .vidplay i{width:58px;height:58px}
.vidplay i::after{margin:-10px 0 0 -5px;border-left-width:16px;border-top-width:10px;border-bottom-width:10px} }
/* ============================================================
FORMS - wired 6 Aug 2026
The contact and subscribe blocks were
s of unnamed inputs with a dead
button: everything a visitor typed was discarded on click. They are real