/* m-sections — mobile/responsive layer.
Inline styles in index.html win on specificity, so overrides here generally
need !important. Loaded after checkout-modal.css.
OWNS: page-wide section rhythm baseline (.m-sec), payment strip, problem,
how-it-works, proof grid, compare, final CTA, footer.
Does NOT touch: .m-nav, .m-hero, .m-demo internals (other stylesheets).
── SHARED SCALE (other agents should match these) ─────────────────────────
width side pad section v-pad CTA v-pad h2 lede card pad
>=1100 32 88 96 50 18 24-30
<=1080 28 76 84 clamp 18 24-26
<=900 24 64 72 34 17 22-24
<=640 20 56 64 30 16 20-22
<=400 16 48 56 27 15.5 18-20
<=360 16 44 52 26 15.5 18-20
── COLUMN COUNTS (deliberate, not left to auto-fit) ───────────────────────
Every grid below desktop is pinned so the column count never depends on
where an auto-fit track happens to land, and no section ever renders a
ragged "2 + 1 with an empty half".
section >=1100 (desktop) 901-1099 641-900 <=640
.m-problem auto-fit 3-up auto-fit 3-up 1 column 1 column
.m-how auto-fit 2-up auto-fit 2-up 2 columns 1 column
.m-proof auto-fit 4-up 2-up then 4-up 2 columns 1 column
.m-compare auto-fit 2-up auto-fit 2-up 2 columns 1 column
Only .m-proof needs pinning above 900: it is the only section whose card
count (8) does not divide by the track count auto-fit picks there (3), so
it laid out 3 + 3 + 2 with a 312px hole beside the last card at 1024. The
other three have 2 or 3 cards and auto-fit lands on their own count. See
the 901-1099 block for the 1024 crossover.
── CARD GRAMMAR ──────────────────────────────────────────────────────────
Every card below 900 is a MEDIA OBJECT: a fixed icon column on the left,
copy on the right. Round 2 mixed icon-above and icon-left, so scrolling a
768 tablet you passed three different card treatments in a row.
.m-problem icon tile INLINE (media object) at every width <= 900
.m-proof icon INLINE beside the title at every width <= 900
(8 stacked icon-above cards is an absurd scroll)
.m-how icon tile INLINE at every width <= 900, with the step
numeral leading the title on the same line
.m-compare unchanged bullet list at every width
All three icon columns anchor the SAME way — tile top = title top, measured
at 0.0px in all three sections at every width <= 900 — so the icon reads as
belonging to the title everywhere. In .m-how the numeral shares the title's
row (baseline-aligned), which is what keeps that anchor true while giving
the numeral something to sit against; a row of its own left it floating in
column 2 beside an empty 42-46px square. The numeral HANGS: title and body
share one left edge and the numeral sits outside it, so all three sections
measure title.left - body.left = 0.0 and no card on the page has two left
edges inside its copy column.
Where the grammar is genuinely NOT identical, and why:
<= 699 one grammar everywhere. Every card is icon | (title above
body), one column of cards per section. In .m-how the
title line is "1. Title" — the numeral is part of the
title row, not a row of its own.
700-900 .m-problem is the only 1-column section, so its card is a
full-width band and gets a third column — 46px tile | title
| body, title BESIDE body. .m-how and .m-proof are 2-up
here, i.e. half-width cards with no room for a third
column, so they keep title ABOVE body. Two internal
treatments in this band, not one; that is a consequence of
the column counts, not an inconsistency in the cards, and
the media-object frame (fixed icon column, copy right) is
the same in all three.
── TABLET ARRANGEMENT (700-900) ──────────────────────────────────────────
700-900 is a tablet, not a stretched phone. Two blocks get width-specific
arrangements there rather than a centred phone column floating in 900px:
.m-strip 700-810 two lines (lead-in over the diagram), 811-900 one
line at the desktop proportion. Below 700 it does not render
at all — owner request, see the last block in this file. It
starts at 700, the same pixel .m-problem opens into its
three-column band, so the tablet layout arrives as one event;
round 5 said exactly that and then set 701, which put the
strip's first appearance one pixel after everything it was
supposed to arrive with.
.m-problem 46px tile | title | body — three columns across the band,
so the card is full rather than 224px of empty right side.
The title track is CONTENT-DRIVEN and SHARED: the card list
is the grid and each card is a `subgrid` of it, so one
`max-content` track is measured across all three titles at
once. It resolves to 185px — the longest title exactly — so
the body column still starts on one vertical line down the
whole section (a term column, which is what this band is)
while the fixed 200px it replaces left 83px of dead track
behind card 1 and 59px behind card 2, and would have wrapped
a title inside its own track the moment one grew past 185px.
The residual 68/44px behind the two shorter titles is the
ragged edge inherent to any shared term column; per-card
max-content closes it but pays with three ragged BODY edges,
and the body is the column you read down.
───────────────────────────────────────────────────────────────────────────
── COLOUR ────────────────────────────────────────────────────────────────
Colour-only accessibility corrections are applied GLOBALLY (see the first
block below), never inside a media query. Rounds 1-2 scoped every grey lift
to <= 900, which made the page accessible at 900 and not at 901 and — worse
— inverted the .m-compare hierarchy at exactly that boundary. Type size,
spacing and layout stay mobile-scoped; greys do not.
─────────────────────────────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════
GLOBAL — colour-only accessibility corrections, ALL widths
══════════════════════════════════════════════════════════════════════════
Nothing here changes geometry: no size, no spacing, no layout. Every rule
sets `color` only, so desktop renders pixel-identically and the 900/901
boundary is no longer a hierarchy cliff.
.m-compare light card — the inversion. Before: eyebrow 4.97 > bullets 4.91
> title 3.31, i.e. the 13px kicker was the DARKEST thing in the card and
the 20px headline the palest. Now the order matches the type scale, and the
card pairs with the dark one (whose eyebrow #8FB9A1 is 7.04 under a 15.9
white title) — eyebrow subordinate to title on BOTH sides.
eyebrow "CARD PROCESSORS" #A89C8E -> #726B62 on #fff 2.69 -> 4.94
title "The old way" #8A8F86 -> #15291D on #fff 3.31 -> 15.87
bullets (unchanged) #6E7269 4.91
Round 4 took that title to #565A52, which cleared AA at 7.05 but left it
the only card title on the page rendered in mid-grey — every other one,
in .m-problem, .m-how and .m-proof, is the page ink #15291D. Beside the
dark card's pure-white "The MOSS way" it read as faded rather than as
deliberate contrast. It is now the same ink as every other card title;
"the old way" is characterised by the red ✗ bullets and the grey eyebrow,
not by a washed-out headline.
Round 3 used #7F7365 for that eyebrow, which is a warm BROWN — a hue that
appears nowhere else in a palette of green, near-black and warm grey, and
reads muddy at phone sizes. #726B62 is the same value desaturated onto the
page's own warm-grey axis and holds 4.94:1.
.m-how step numerals — 16px/700 #5E9C7D on #fff was 3.22, below the 4.5
small-text floor and below the 18.66px bold large-text exemption. Moved off
the brand green onto the green already used by the icon tile in the same
card, so the fix costs nothing in identity and needs no size change.
"1." / "2." #5E9C7D -> #3F7357 on #fff 3.22 -> 5.52
.m-footer — round 2 flattened this instead of fixing it: tagline and legal
disclaimer both landed on 5.00, so a 12.5px demo disclaimer read exactly as
dark as the 14px brand line. Re-spread so reading weight tracks importance.
tagline 14px #8A8F86 -> #565952 on #EAE6E0 3.09 -> 5.73
"Secured by" 12.5 #8A8F86 -> #5F625B on #EAE6E0 3.09 -> 4.99
disclaimer 12.5px #A29A8E -> #646760 on #EAE6E0 2.24 -> 4.63
.m-strip transition mark — 2.24 on the desktop one-liner too, where the
strip still renders. Taken to the strip's own body colour so the band keeps
its rhythm; the mark is punctuation, so it gets a colour and nothing else.
"→" #A8A299 -> #5C6058 on #F3F1EC 2.24 -> 5.69 */
.m-compare .mz-rev:first-child > div:first-child { color: #726B62 !important; }
.m-compare .mz-rev:first-child > div:nth-child(2) { color: #15291D !important; }
.m-how .mz-rev > div:first-child { color: #3F7357 !important; }
.m-footer p { color: #565952 !important; }
.m-footer > div:first-child > div:last-child { color: #5F625B !important; }
.m-footer > div:last-child { color: #646760 !important; }
.m-strip > span:nth-child(5) { color: #5C6058 !important; }
/* ══════════════════════════════════════════════════════════════════════════
ANCHOR LANDING OFFSET — >= 901px (relayed from the m-nav owner)
══════════════════════════════════════════════════════════════════════════
m-nav.css sets a --nav-h-derived scroll-margin only at <= 900px. Above that
the sections kept their authored `scroll-margin-top: 64px` against a 70px
sticky bar, so at 1280 a click on "How it works" landed the section heading
6px UNDER the bar. Same for #demo, #compare and #cta.
This is a scroll offset, not rendered geometry: scroll-margin-top affects
only where a scroll-into-view stops, never layout, paint or measured box.
Desktop rendering is therefore still byte-identical.
Derived from --nav-h (m-nav.css, :root) so it tracks the real bar height,
with a 70px literal fallback; +16px of air so the heading clears the bar
rather than kissing it. m-sections.css loads after m-nav.css, so this is
scoped to >= 901 to leave the nav owner's mobile rule untouched.
Measured landings, heading top below the 70px bar: #how, #demo and
#compare land at 15.7 / 15.7 / 16.3px at 1024, 1280 and 1440 — the 16px
this rule asks for. #cta does NOT: it lands 46.3px below at 1280 and 89px
below at 1024, because #cta is the last section and the document runs out
of scrollable height before the offset can be honoured. That is a property
of the page end, not of the rule — scroll-margin-top cannot invent scroll
range — and the landing is still well clear of the bar. The claim to make
is "no anchor lands under the nav", not "every anchor lands 16px below
it". */
@media (min-width: 901px) {
#how, #demo, #compare, #cta {
scroll-margin-top: calc(var(--nav-h, 70px) + 16px) !important;
}
}
/* ══════════════════════════════════════════════════════════════════════════
<= 1080px — tighten desktop
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
.m-sec { padding-left: 28px !important; padding-right: 28px !important; }
.m-problem, .m-how, .m-proof, .m-compare { padding-top: 76px !important; padding-bottom: 76px !important; }
.m-cta { padding-top: 84px !important; padding-bottom: 84px !important; }
.m-strip { padding-left: 28px !important; padding-right: 28px !important; }
.m-footer { padding: 44px 28px !important; }
/* ── card padding: the tier that was never written. The scale table has
said "22-26" for this band since round 1 and nothing implemented it,
so the >= 1100 desktop values passed straight through and 1024 — an
iPad, not a desktop — rendered .m-how and .m-compare at 30px, 4px
over contract, and .m-problem at 28. The ladder is now continuous:
28-30 (desktop) -> 26 -> 24 (<=900) -> 20-22 (<=640) -> 18-20 (<=400).
.m-proof is already 24 at every width in this band and is left alone
rather than moved to make a number match. */
.m-problem .mz-rev, .m-how .mz-rev, .m-compare .mz-rev { padding: 26px !important; }
/* ── the strip's item gap, same ladder logic: 22 authored -> 12 at 700-900
was a 10px jump across one boundary with nothing in between, and the
one-line strip has room to spare here (it needs ~812px of an 845px
content box at 901). 22 -> 16 -> 12. */
.m-strip { column-gap: 16px !important; }
/* (the 902-1099 orphan band for .m-problem h2 — "Your money shouldn't take
days to reach you." breaking as "…take days to reach / you." — is handled
by the <= 1099 block below, together with the mailto tap target. Both are
properties that answer to their own content rather than to this shared
spacing tier, so both run one band wider than it does.) */
}
/* ══════════════════════════════════════════════════════════════════════════
<= 1099px — the two things that do NOT answer to the shared tier grid
══════════════════════════════════════════════════════════════════════════
1081-1099 was an unowned band: no balance, desktop padding, and a 199x25
mailto. It is NOT closed by moving the <= 1080 tier up, and deliberately so
— the side-padding tier is SHARED with m-nav.css, m-hero.css and
m-demo.css, so stepping this file's sections to 28px at 1081 while the rest
of the page is still on 32px would break the one rule that matters more
than the gap ("consistent side padding with the rest of the page at each
breakpoint"). A 4px tier boundary 19px early is invisible; four sections
4px out of line with the nav above them is not.
Two properties have no such cross-file dependency, and both run to 1099 —
the last pixel before desktop:
• The mailto's 44px tap target. A tap target is not a taste question, and
the argument this file makes for it ("1024 is a finger, not a mouse")
only runs out where desktop begins. 199x25 -> 227x49.
• .m-problem h2's `text-wrap: balance`. Text breaking aligns with nothing
outside its own element, and this band was the tail of the same orphan
the <= 1080 rule exists to kill: at 1081 the heading broke 679.7 / 205.2,
a 205px second line hanging off a 680px first.
Everything else in this block is the same kind of property: it belongs to
these four sections alone and lines up with nothing outside them, so it
runs to the last pixel before desktop rather than stopping at the shared
spacing tier.
>= 1100 is untouched by all of it — every rule here is geometry, and this
file's standing rule is that geometry never crosses into desktop while
colour always does. The eyebrow markers, the grid gaps and the two
one-off spacings below are therefore corrected up to 1099 and left as
authored at 1100+, where the fix belongs in the source inline styles and
has to be made for all five sections at once, .m-demo included. */
@media (max-width: 1099px) {
.m-problem h2 { text-wrap: balance; }
.m-cta a[href^="mailto:"] {
display: inline-block !important;
line-height: 1.25 !important;
padding: 12px 14px !important; /* 25 + 24 = 49px tall */
margin: -6px 0 !important;
}
/* ── the eyebrow marker squares. Identical 12x12 squares, identical 10px
flex gap, identical parent sitting on the gutter — and four different
inline `margin-left` values (3 / 3 / 1.5 / 0.5), so the FIRST INK of
each section's first line sat on four different vertical lines across
a 2.5px range while every h2 underneath started exactly on the gutter.
Nothing measured it because each section is internally consistent; it
only shows when you scroll from one to the next and the eyebrow row
shifts under a heading that does not. Zeroed: marker left == h2 left
== gutter, in all four sections, at every width. */
.m-problem > div > div:first-child > span:first-child,
.m-how > div > div:first-child > span:first-child,
.m-proof > div > div:first-child > span:first-child,
.m-compare > div > div:first-child > span:first-child {
margin-left: 0 !important;
}
/* ── one grid gap for the page. The four card lists were authored at 18 /
18 / 16 / 20 — three different values doing the same job, visible as
soon as two sections are on screen together. 18 is the value two of
the four already use and the one the widest cards (.m-problem's
full-width bands) were tuned against. */
.m-problem > div > div:last-child,
.m-how > div > div:last-child,
.m-proof > div > div:last-child,
.m-compare > div > div:last-child { gap: 18px !important; }
/* ── two spacings that were unique on the page: .m-how put 44px between
its lede and its card list where the other three put 42, and .m-cta
put 20px between h2 and lede where every other section puts 18. Both
are single-section deviations with no reason behind them, so both
join the page value. (.m-cta's `margin: 14px auto 0` at <= 640 keeps
the auto side margins that centre it; only the top is set here.) */
.m-how > div > div:last-child { margin-top: 42px !important; }
.m-cta p { margin-top: 18px !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
901-1099px — .m-proof column count: 2-up, then 4-up. Never 3.
══════════════════════════════════════════════════════════════════════════
Eight cards into `repeat(auto-fit, minmax(250px, 1fr))` resolves to THREE
tracks across this whole band, which lays 8 cards out as 3 + 3 + 2 and
leaves a 312px hole beside the last card at 1024. That is precisely the
"2 + 1 with an empty half" the column-count table at the top of this file
exists to prevent — the pinning just stopped at 900 and this band kept the
auto-fit it was meant to replace. 1024 is iPad Pro portrait and iPad
landscape, so the hole is on a real device, not a synthetic width.
The crossover is measured, not chosen: four tracks reach the ~230px the
card needs for a one-line title exactly at 1024 ((1024 - 56 padding - 48
gaps) / 4 = 230). Below that, four tracks would be 199px at 901 and the
titles would wrap twice; above it, two tracks would be 511px of card
holding three lines of 14px copy.
<= 640 1 column (phone)
641-1023 2 columns (continuous across the 900/901 boundary —
the CARD GRAMMAR changes there, the column
count no longer does)
>= 1024 4 columns (the arrangement the section is designed
for; >= 1100 reaches it on its own)
So the count now goes 1 -> 2 -> 4 with no remainder row anywhere, and the
only rule needed is the 2-up half: at 1024-1099 four tracks are pinned
because auto-fit would still choose three.
KNOWN AND LEFT: 1100-1111 still renders 3 + 3 + 2. Four 250px tracks plus
three 16px gaps need 1048px of content box and only get 1036 at 1100, so
auto-fit picks three for the last 12px before the section reaches its own
4-up at 1112. That band is DESKTOP, where this file does not move geometry
under any circumstances — the fix there is to relax the authored
`minmax(250px, 1fr)` in the three HTML files, which is a source change for
the page owner and changes desktop rendering. Stopping at 1099 is the
freeze line, not a tier gap. ──────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1023px) {
.m-proof > div > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) and (max-width: 1099px) {
.m-proof > div > div:last-child { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
<= 900px — tablet: pinned column counts, side padding 24
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.m-sec { padding-left: 24px !important; padding-right: 24px !important; }
.m-problem, .m-how, .m-proof, .m-compare { padding-top: 64px !important; padding-bottom: 64px !important; }
.m-cta { padding-top: 72px !important; padding-bottom: 72px !important; }
.m-footer { padding: 40px 24px !important; }
/* headings + lede */
.m-problem h2, .m-how h2, .m-proof h2, .m-compare h2 {
font-size: 34px !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
}
/* ── text-wrap: balance is NOT a no-op elsewhere — it is scoped to the two
headings it measurably improves, and OFF on .m-proof, which it makes
worse. Measured line widths across 22 widths:
.m-problem "Your money shouldn't take days to reach you."
changed at every width 360-766 and better everywhere:
269/288 balanced vs 330/227 greedy.
.m-how "Card in. Stablecoins out." changed at 320 only, and
better: 93/193 vs greedy 240/46 — it kills a 46px
"out." orphan.
.m-proof "Built for modern merchants." DEGRADED at 320-375. At
360 balance gives "Built for" 94px over "modern
merchants." 235px; a 94px stub over a 235px line at
26px/800 reads as a broken heading, not a balanced one.
Greedy gives 194/134. Left on `wrap`.
.m-compare "The MOSS difference" fits one line at every width in
this stylesheet's range, so it is left out rather than
carrying a declaration that does nothing.
.m-cta never receives it (computed `text-wrap: wrap`), which is
why its authored hard
is safe.
See also the <= 1080 block: .m-problem h2 needs balance above 900 too,
for the 902-1035 orphan band. ─────────────────────────────────────── */
.m-problem h2, .m-how h2 { text-wrap: balance; }
.m-cta h2 { font-size: 34px !important; line-height: 1.16 !important; }
.m-problem > div > p, .m-how > div > p, .m-cta p {
font-size: 17px !important;
line-height: 1.58 !important;
}
/* ── the CTA lede's one-word widow. "Familiar checkout. Instant,
self-custodial stablecoin settlement." is CENTRED and sits between the
CTA headline and the primary button, so a short last line is not a
ragged edge, it is a 79px word alone in the middle of the conversion
block. Measured greedy: 355.4 / 77.0 at 390, and the same shape at 414
and 430 — the band runs ~387-499, i.e. every current large phone.
`pretty` and not `balance`: balance re-flows the WHOLE paragraph to
even line lengths and it breaks at the existing hyphen in
"self-custodial", giving 217/219.6 at 320 — even, and hyphenated in a
display lede. `pretty` leaves the first lines greedy and only pulls a
word down to prevent the orphan, which is precisely the defect. Where
there is no widow (320-386, where the break already lands 279.9/152.5)
it is a no-op. ─────────────────────────────────────────────────────── */
.m-cta p { text-wrap: pretty; }
/* ── grids: pin the column counts (see table in the header) ─────────────
auto-fit was producing 2-of-3 + an empty half in .m-problem across most
of this band, and it flipped .m-proof between 2 and 3 tracks at ~856px.
Compare stays genuinely side-by-side here — it is the one section where
the two columns ARE the content. */
.m-problem > div > div:last-child { grid-template-columns: 1fr !important; }
.m-how > div > div:last-child,
.m-proof > div > div:last-child,
.m-compare > div > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.m-problem > div > div:last-child,
.m-how > div > div:last-child,
.m-proof > div > div:last-child,
.m-compare > div > div:last-child {
gap: 14px !important;
margin-top: 32px !important;
}
/* card interiors, one step tighter */
.m-problem .mz-rev, .m-how .mz-rev, .m-compare .mz-rev { padding: 24px !important; }
.m-proof .mz-rev { padding: 22px !important; }
/* ── .m-problem: one column of media-object bands, at every width <= 900 ──
Three 260px cards cannot survive a tablet (3-up would be 230px tracks at
768), and a full-width card with the icon tile stacked above the title
leaves the right two-thirds of every card empty. So the tile moves beside
the copy and each card becomes a compact band. Same grammar all the way
down to 320 — it never re-flows into a different card shape. */
.m-problem .mz-rev {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) !important;
column-gap: 16px !important;
align-content: start !important;
}
.m-problem .mz-rev > div:first-child {
grid-column: 1; grid-row: 1 / span 2;
align-self: start;
margin-bottom: 0 !important;
}
.m-problem .mz-rev > div:nth-child(2) { grid-column: 2; grid-row: 1; }
.m-problem .mz-rev > div:last-child {
grid-column: 2; grid-row: 2;
max-width: 62ch !important; /* measure control: the band is up to 850px wide */
}
/* ── .m-proof: icon inline with the title, at every width <= 900 ──────── */
.m-proof .mz-rev {
display: grid !important;
grid-template-columns: 26px minmax(0, 1fr) !important;
column-gap: 13px !important;
/* align-items MUST be start, not center: two of the eight titles wrap to
two lines ("Cards + Apple/Google Pay", "Feels like normal checkout"),
and centring the 26px icon against the whole title block dropped it
between the two lines — 8px out of line with its row neighbour. The
icon cell is instead capped to the height of line 1 and centres inside
that, so every icon sits on the first line whatever the title does. */
align-items: start !important;
/* rows must not stretch, or a short card's title drifts down out of line
with its taller neighbour in the same row */
align-content: start !important;
}
.m-proof .mz-rev > div:first-child {
grid-column: 1; grid-row: 1;
margin-bottom: 0 !important;
line-height: 0 !important;
height: 22px; /* = title line box, 17px x 1.3 */
display: flex; align-items: center; justify-content: center;
}
.m-proof .mz-rev > div:nth-child(2) {
grid-column: 2; grid-row: 1;
font-size: 17px !important;
line-height: 1.3 !important;
margin-bottom: 0 !important;
}
/* .m-proof is 8 cards and ~1233px of single-column scroll at 390 — the
longest undifferentiated stretch on the page. Considered and REJECTED:
merging the eight boxes into one hairline-divided list (saves ~180px but
makes .m-proof the only section on the page whose items are not cards —
the single card grammar is worth more than the scroll), and pairing the
three shortest cards 2-up (produces exactly the ragged "2 + 1 with an
empty half" this file pins its column counts to avoid). What IS taken is
the inline icon below: it turns each card from a 3-band stack into a
2-band one and takes ~40px off every card, ~320px off the section. The
remaining length is eight genuine claims at a comfortable size, not
padding. */
/* proof card copy is 14px in the source — below the 15px body-copy floor at
EVERY mobile width, so it is raised here rather than only on phones. */
.m-proof .mz-rev > div:last-child {
grid-column: 2; grid-row: 2;
font-size: 15px !important;
line-height: 1.5 !important;
margin-top: 7px !important;
}
/* ── .m-how: same media-object grammar as problem + proof, at every width
<= 900. Column 1 carries the icon tile; the numeral LEADS THE TITLE
INLINE in row 1, and the body runs full width beneath both.
Round 4 gave the numeral a row of its own above the title. That fixed
the icon anchor (tile top = title top, matching .m-problem and
.m-proof) but left "1." and "2." stranded in column 2 with a 42-46px
empty square to their left, aligned to nothing — not the card's left
content edge, not the tile. Putting the numeral back on the title's
line keeps the anchor (numeral and title now share row 1, so the row
top IS the title top) and gives the numeral something to align to: it
hangs to the left of the title like the marker of a numbered list,
with the body flush under it.
Three columns, tile | numeral | title. The column gap is 8px so the
numeral sits tight against its title; the tile's track is 8px wider
than the tile so the tile-to-copy gap stays the 16px the other two
sections use (46 + 8 + 8 = 62 = 46 + 16). Numeral and title are
baseline-aligned — 16px against 19px would otherwise sit on two
different lines of the same row.
Round 5 put the BODY under the numeral (grid-column 2/span 2) while
the title sat in column 3. That gave card 1 two left edges inside its
own column: card 1's title wraps at every phone width, and the
continuation line ("stablecoins") started 21.4px right of the body
beneath it. .m-problem and .m-proof both hold title.left ==
body.left exactly, so .m-how was the only card on the page reading
as two columns of copy.
The numeral is a MARKER, so it hangs and the copy block is flush:
title and body both start in column 3, the numeral alone occupies
column 2, and column 2 is empty in row 2 — the structure of a real
numbered list. Measured title.left - body.left = 0.0 at every width
<= 900. The body loses 21.4px of measure to the hang, which at 390
leaves 238.6px / ~44 characters — inside the comfortable range and
the same measure the title above it gets. ────────────────────────── */
.m-how .mz-rev {
display: grid !important;
grid-template-columns: 54px auto minmax(0, 1fr) !important;
column-gap: 8px !important;
align-content: start !important;
}
.m-how .mz-rev > div:nth-child(2) { /* icon tile */
grid-column: 1; grid-row: 1 / span 2;
align-self: start;
width: 46px !important; height: 46px !important;
margin-bottom: 0 !important;
}
.m-how .mz-rev > div:first-child { /* "1." / "2." */
grid-column: 2; grid-row: 1;
align-self: baseline;
margin-bottom: 0 !important;
}
.m-how .mz-rev > div:nth-child(3) { /* title */
grid-column: 3; grid-row: 1;
align-self: baseline;
margin-bottom: 0 !important;
}
.m-how .mz-rev > div:last-child { /* body — flush with the TITLE, with
the numeral hanging to its left */
grid-column: 3; grid-row: 2;
margin-top: 8px !important;
}
/* ── the money button. 16px/700 #fff on the brand green #5E9C7D is 3.22:1
— below the 4.5 small-text floor, and round 2 made it WORSE on phones
by dropping it to 15.5px. Fixed with SIZE, not colour: #5E9C7D is the
brand green and is used identically on desktop, so darkening it below
900 would make the primary CTA visibly different at 900 vs 901 — the
exact boundary trap that produced the .m-compare inversion. At 19px/700
the text clears the 18.66px bold large-text threshold, where 3:1 is the
requirement and 3.22:1 passes. A bigger primary button is the right
call on a phone anyway. Held at 19px all the way to 320.
⚠ DELIBERATE, OWNER-APPROVED DEVIATION — DO NOT "FIX" THIS.
At >= 901px the button returns to its authored 16px, where white on
#5E9C7D is 3.22:1 and therefore below the 4.5:1 small-text floor. A
round-4 review proposed darkening the brand green to #3F7357 site-wide
to clear AA. The site's owner was asked directly and chose to KEEP
#5E9C7D exactly as it is, everywhere — mobile, desktop, every element.
The green is the brand. It is not to be changed here, in the hero, in
the nav, or in any other stylesheet. The mobile size-up below is the
one accommodation, and it stays. ──────────────────────────────────── */
.m-cta a[href="#demo"] {
font-size: 19px !important;
padding: 17px 30px !important;
justify-content: center !important;
}
/* (the mailto's 44px tap target is set in the <= 1099 block above — it
covers this band and every band up to the desktop tier.) */
/* type sizes only — every colour that used to live here is now global,
above, and applies at 901 and beyond as well. */
.m-footer p { font-size: 14px !important; }
.m-footer > div:last-child { font-size: 12.5px !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
700-900px — tablet arrangements
══════════════════════════════════════════════════════════════════════════
Above 700 there is real width to spend, and the phone column was not
spending it: at 900 the strip was a 900px band holding ~300px of centred
content, and every .m-problem band was 852x103 with the copy capped at
517px and ~224px of empty card to the right of all three.
── @supports IS LOAD-BEARING HERE, not a formality ──────────────────────
`grid-template-columns: subgrid` is an INVALID VALUE without support, so a
UA that lacks it drops that one declaration and keeps every other rule in
the block. The result was not a degradation, it was a collision: the card
fell back to the <= 900 media object's `46px minmax(0,1fr)` while still
carrying `column-gap: 0`, `padding: 24px 0`, and children assigned to
columns 2/3/5 of a two-column grid. Simulated at 768: title and body butted
together at 0px gap ("Slow to settleCard payouts take 2-7…"), the card lost
its horizontal padding entirely, the three titles landed on three different
left edges (141/97/71), and card 3's title sat directly on top of its 46px
shield tile — same row, same top, a literal overlap. The 1fr absorbed the
excess so nothing overflowed and nothing was clipped, which is exactly why
it would have shipped unnoticed.
Support is Chrome 117+ / Safari 16+ / Firefox 71+, so the exposed device is
iPadOS <= 15 in portrait: a 768px tablet, precisely the device this
arrangement exists to serve. Guarded, that device falls back to the <= 900
media-object stack, which is a composed layout in its own right.
The same guard wraps the .m-how row-subgrid block below. */
@supports (grid-template-columns: subgrid) {
@media (min-width: 700px) and (max-width: 900px) {
/* (the strip's tablet row lives at the bottom of the PAYMENT STRIP block —
it has to come after that block's own max-width:900 rules to win) */
/* problem: 46px tile | title | body, one row across the full band.
The title track is CONTENT-DRIVEN and SHARED — see the note in the
header. The three cards are subgrids of the section's card list, so one
`max-content` track is measured across all three titles at once: no dead
space behind the short ones, no ragged body edge, and nothing to re-tune
if a title is ever rewritten longer.
The card's 24px horizontal padding is carried by the OUTER tracks rather
than by the card box. A subgrid's own padding is subtracted from the
space its inherited tracks have to fit into, which Chrome takes out of
the first and last tracks and the gutters: with padding on the card, the
46px tile track collapsed to 19px and the tile overlapped its own title
by 7px. Padding tracks instead, column-gap 0, and the 20px column gaps
expressed as track width — then the only inset left is the 1px border,
which the padding tracks absorb (25 -> 24) instead of the tile track. */
.m-problem > div > div:last-child {
grid-template-columns:
25px 66px max-content 20px minmax(0, 1fr) 25px !important;
column-gap: 0 !important;
row-gap: 14px !important;
}
.m-problem .mz-rev {
grid-column: 1 / -1 !important;
grid-template-columns: subgrid !important;
column-gap: 0 !important; /* a subgrid keeps its OWN gutters unless told
otherwise; the 16px inherited from the base
card rule was being inserted on top of the
parent's track positions */
padding: 24px 0 !important;
align-items: start !important;
}
.m-problem .mz-rev > div:first-child { grid-column: 2; grid-row: 1 !important; }
.m-problem .mz-rev > div:nth-child(2) { grid-column: 3; grid-row: 1; }
.m-problem .mz-rev > div:last-child {
grid-column: 5; grid-row: 1;
max-width: none !important;
}
}
}
/* ══════════════════════════════════════════════════════════════════════════
641-900px — .m-how: one shared title track across the 2-up row
══════════════════════════════════════════════════════════════════════════
In this band .m-how is two half-width cards side by side, title above body.
Card 1's title wraps to two lines and card 2's does not, so the two bodies
started at different heights — 24px apart at 768, card 2's body sitting
level with card 1's SECOND title line. Two cards in one row, reading as two
unrelated blocks.
.m-problem solved exactly this, in the same band, with a shared track; this
is the same instrument on the other axis. The card list gets two explicit
rows (title row, body row), each card spans both and subgrids them, so the
title row is measured across BOTH cards at once and the bodies start on one
line. Nothing is hard-coded: rewrite a title to three lines and both cards
follow.
row-gap goes to 0 on the list because the only row boundary in it is the
one INSIDE the cards, and the card's own 8px body margin-top already sets
that; a subgrid inherits its parent's gutters, so the list's 14px would
otherwise be added to every title-to-body gap. The 14px between the two
cards is a COLUMN gap and is kept.
Guarded for the same reason as the block above — without support the
`subgrid` declaration alone drops, leaving cards told to span two rows of a
grid that has two rows for the whole section. ─────────────────────────── */
@supports (grid-template-rows: subgrid) {
@media (min-width: 641px) and (max-width: 900px) {
.m-how > div > div:last-child {
grid-template-rows: max-content max-content !important;
row-gap: 0 !important;
column-gap: 14px !important;
}
.m-how .mz-rev {
grid-row: 1 / span 2 !important;
grid-template-rows: subgrid !important;
}
.m-how .mz-rev > div:nth-child(2) { grid-row: 1 / span 2 !important; } /* tile */
}
}
/* ══════════════════════════════════════════════════════════════════════════
<= 640px — phone
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
.m-sec { padding-left: 20px !important; padding-right: 20px !important; }
.m-problem, .m-how, .m-proof, .m-compare { padding-top: 56px !important; padding-bottom: 56px !important; }
.m-cta { padding-top: 64px !important; padding-bottom: 64px !important; }
.m-footer { padding: 36px 20px !important; }
/* ── type scale ─────────────────────────────────────────────────────── */
.m-problem h2, .m-how h2, .m-proof h2, .m-compare h2 {
font-size: 30px !important;
line-height: 1.1 !important;
letter-spacing: -0.018em !important;
}
/* balance stays scoped to the two headings it helps — see the note at
<= 900. .m-proof is deliberately absent: this is the band where balancing
"Built for modern merchants." produced the 94px stub. */
/* The authored break ("Start getting paid | in stablecoins.") is kept at
every width: at 30/27/26px the first line measures ~248/223/215px, which
still fits the 288px content box at 320px, so it never strands a third
line. The source now reads `paid
in` (a real space, applied to all
three HTML files) — trailing spaces before a break are collapsed away, so
desktop is unchanged, but `br { display:none }` would now degrade
correctly instead of fusing the words into "paidin". */
.m-cta h2 {
font-size: 30px !important;
line-height: 1.18 !important;
letter-spacing: -0.018em !important;
}
.m-problem > div > p, .m-how > div > p, .m-cta p {
font-size: 16px !important;
line-height: 1.55 !important;
margin-top: 14px !important;
}
.m-cta p { margin: 14px auto 0 !important; }
/* eyebrow row */
.m-problem > div > div:first-child,
.m-how > div > div:first-child,
.m-proof > div > div:first-child,
.m-compare > div > div:first-child { margin-bottom: 14px !important; }
/* ── grids: everything to one column ────────────────────────────────── */
.m-problem > div > div:last-child,
.m-how > div > div:last-child,
.m-proof > div > div:last-child,
.m-compare > div > div:last-child {
grid-template-columns: 1fr !important;
gap: 12px !important;
margin-top: 28px !important;
}
.m-problem .mz-rev, .m-how .mz-rev { padding: 22px !important; border-radius: 16px !important; }
.m-proof .mz-rev { padding: 20px !important; }
.m-compare .mz-rev { padding: 22px !important; border-radius: 18px !important; }
/* card icon tiles + titles */
.m-problem .mz-rev > div:first-child { width: 42px !important; height: 42px !important; }
.m-problem .mz-rev { grid-template-columns: 42px minmax(0, 1fr) !important; column-gap: 14px !important; }
.m-problem .mz-rev > div:last-child { max-width: none !important; }
.m-how .mz-rev {
grid-template-columns: 48px auto minmax(0, 1fr) !important; /* 42 + 6 */
column-gap: 8px !important;
}
.m-how .mz-rev > div:nth-child(2) {
width: 42px !important; height: 42px !important; /* 42 + 6 + 8 = the
14px tile gap .m-problem uses here */
margin-bottom: 0 !important;
}
.m-how .mz-rev > div:nth-child(3) { font-size: 18px !important; }
/* ── compare: make the stacked pair read as a deliberate pair ─────────
Both the 14px list gap and the dark card's extra 2px of vertical padding
were "a touch more air" for the pair, and both were wrong for the same
reason: this is the one place on the page where two cards must read as
IDENTICAL FRAMES, one light and one dark, stacked one above the other.
A 22px/24px padding difference between them is not air, it is a mismatch
you can see down the shared left edge, and it put the dark card 2px over
the <= 640 card-padding contract as well. The list gap joins the page
value (12) for the same reason: the pair is not a special case that
needs more room than every other card list, it is the case that needs
to look most deliberate. */
.m-compare .mz-rev > div:nth-child(2) { font-size: 20px !important; margin-bottom: 18px !important; }
.m-compare .mz-rev > div:last-child { gap: 13px !important; }
.m-compare .mz-rev > div:last-child > div { font-size: 15px !important; line-height: 1.42 !important; }
/* The body lift below is TASTE, not an accessibility fix — #D7E3DB on
#15291D is already 11.63:1 and #DDE8E1 is 12.22:1; both are ~2.5x over
AA. It holds the dark card's copy level with the light card's at this
size, which is the only difference the pair should have. */
.m-compare .mz-rev:last-child > div:last-child > div { color: #DDE8E1 !important; }
/* ── final CTA ──────────────────────────────────────────────────────── */
.m-cta > div > div:nth-child(3) { margin-top: 26px !important; }
/* size held at 19px — see the note at <= 900; it is the contrast fix and
must not be walked back on the smallest screens. Only the padding
tightens. */
.m-cta a[href="#demo"] { padding: 16px 26px !important; }
.m-cta > div > div:last-child { margin-top: 26px !important; }
.m-cta a[href^="mailto:"] {
font-size: 18px !important;
display: inline-block !important;
line-height: 1.25 !important;
padding: 14px 12px !important; /* 22 + 28 = 50px tall, comfortably >= 44 */
margin: -6px 0 !important;
word-break: break-word !important;
}
/* ── footer ─────────────────────────────────────────────────────────── */
.m-footer > div:first-child {
flex-direction: column !important;
align-items: flex-start !important;
gap: 20px !important;
}
.m-footer > div:first-child > div:first-child { max-width: none !important; }
.m-footer p { font-size: 14px !important; line-height: 1.55 !important; margin-top: 12px !important; }
.m-footer > div:last-child {
margin-top: 22px !important;
padding-top: 18px !important;
font-size: 12.5px !important;
line-height: 1.55 !important;
}
}
/* ══════════════════════════════════════════════════════════════════════════
<= 429px — "Built for modern merchants." holds one line
══════════════════════════════════════════════════════════════════════════
.m-proof h2 is the longest heading on the page, and it was the only element
that got TALLER as the viewport got WIDER: one line at 386-400 (27px, the
small-phone step), two lines at 401-429 where the 30px phone step returns
and needs ~386px of a 361-389px content box, then one line again at 430+
where the box finally catches up. Each state was fine on its own; the 27->30
step at 401 is what re-broke it, and 414 — a required width, iPhone Plus /
Pro Max class — sits in the middle of the pocket.
The heading's size step therefore follows the heading's own measure rather
than the shared 400px line: 27px holds until the content box can carry the
30px setting on one line. This is scoped to .m-proof alone deliberately —
.m-problem, .m-how, .m-compare and .m-cta all fit their 30px setting from
320 up, so moving the shared step for them would shrink four headings to
fix a fifth. Stated at 429 rather than as a 401-429 pocket so it reads as
one boundary, not an exception band; below 400 it restates the value the
small-phone tier already sets, and the <= 360 tier (26px) still wins after
it. ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 429px) {
.m-proof h2 { font-size: 27px !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
PAYMENT STRIP — 700-900px only
══════════════════════════════════════════════════════════════════════════
Desktop is one line: label · Apple Pay · Google Pay · Any card · → · payout.
That line needs ~876px of its own at the authored 14px/22px, which is why
it genuinely wraps between 880 and 900 and cannot simply be held down.
The strip does not exist below 700 at all — the site's owner asked for it
to go on phones (see the OWNER REQUEST block at the end of the file), so
the whole phone treatment this block used to carry is gone: the four-band
stack, the `font-size: 0` + `::after` swap of the source "→" for a
downward "↓", and the <= 640 / <= 400 / <= 360 type and padding steps. All
of it was unreachable — both tablet tiers below cancel the ↓ with
`content: none`, and everything narrower is `display: none`. It has been
deleted rather than left in place with a comment defending it.
What remains is two real compositions, both horizontal, both keeping the
source "→":
811-900 ONE line at 13px/12px (measured: needs 783px). ~59px tall —
the desktop proportion, and the sentence reads as one thought.
700-810 TWO lines: the label, then the whole transition beneath it —
chips → payout — so line 2 is the diagram and line 1 is its
lead-in. ~86px.
Measured widths for the whole line, padding included, at each step:
14px / 22px gap 876 (authored — desktop)
14px / 16px gap 846
13.5px/ 14px gap 815
13px / 12px gap 783
The gaps are deliberately unequal in the two-line tier — 12px between the
chips, 17px either side of the mark — so line 2 reads as two states rather
than as a four-item list.
700 rather than 641: the strip is the one band on the page with no phone
form at all, so it should not appear until the width where this stylesheet
starts composing FOR a tablet — 700, where .m-problem opens into its
three-column band. (Round 5 argued 700 and wrote 701, so the strip landed
one pixel late and 700 itself was a tablet without it.) At 641 it popped in as an 84px band with two hairline
borders one pixel above a width where the owner had judged it droppable,
60px below any other arrangement change, and 60px of tablet that had just
been tuned without it. It now arrives with the rest of the tablet layout.
(641/640 remains the phone-to-tablet line for the CARD GRIDS — 1-up to
2-up — which is a different question: those sections have a phone form.)
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 700px) and (max-width: 900px) {
.m-strip {
/* one value on both axes. The two-line tier below stacks the lead-in
over the diagram, and `row-gap: 0` left those two rows separated by
line-box leading alone — ~5px of ink-to-ink air under a 13px label,
which reads as a wrap rather than as two composed lines. 12px is the
gap already running between the chips beside it, so the composition
is spaced by one number in both directions. */
gap: 12px !important;
padding: 20px 24px !important;
font-size: 13px !important;
}
.m-strip > span:nth-child(n+2):nth-child(-n+4) {
gap: 7px !important; /* inside a chip: icon to label */
margin-bottom: 0 !important;
}
.m-strip > span:nth-child(5) { flex: 0 0 auto !important; font-size: 13px !important; }
.m-strip > span:nth-child(6) { flex: 0 0 auto !important; }
}
/* 811-900 — one line, desktop proportion */
@media (min-width: 811px) and (max-width: 900px) {
.m-strip { flex-wrap: nowrap !important; }
.m-strip > span:nth-child(1) {
flex: 0 0 auto !important;
margin-bottom: 0 !important;
white-space: nowrap;
}
.m-strip > span:nth-child(n+2):nth-child(-n+4) { white-space: nowrap; }
.m-strip > span:nth-child(5) { margin: 0 4px !important; } /* 12 + 4 = 16 */
.m-strip > span:nth-child(6) { white-space: nowrap; }
}
/* 700-810 — lead-in over the diagram */
@media (min-width: 700px) and (max-width: 810px) {
.m-strip > span:nth-child(1) {
flex: 0 0 100% !important;
text-align: center !important;
margin-bottom: 0 !important; /* the row gap carries it now */
}
.m-strip > span:nth-child(5) { margin: 0 5px !important; } /* 12 + 5 = 17 */
}
/* ══════════════════════════════════════════════════════════════════════════
<= 400px — small phone
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
.m-sec { padding-left: 16px !important; padding-right: 16px !important; }
.m-problem, .m-how, .m-proof, .m-compare { padding-top: 48px !important; padding-bottom: 48px !important; }
.m-cta { padding-top: 56px !important; padding-bottom: 56px !important; }
.m-footer { padding: 32px 16px !important; }
.m-problem h2, .m-how h2, .m-proof h2, .m-compare h2, .m-cta h2 { font-size: 27px !important; }
.m-problem > div > p, .m-how > div > p, .m-cta p { font-size: 15.5px !important; }
.m-problem .mz-rev, .m-how .mz-rev, .m-compare .mz-rev { padding: 20px !important; }
.m-proof .mz-rev { padding: 18px !important; }
.m-cta a[href^="mailto:"] { font-size: 17px !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
<= 360px — last-resort tightening
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
.m-problem, .m-how, .m-proof, .m-compare { padding-top: 44px !important; padding-bottom: 44px !important; }
.m-cta { padding-top: 52px !important; padding-bottom: 52px !important; }
.m-problem h2, .m-how h2, .m-proof h2, .m-compare h2, .m-cta h2 { font-size: 26px !important; }
.m-cta a[href^="mailto:"] { font-size: 16px !important; }
}
/* ══════════════════════════════════════════════════════════════════════════
OWNER REQUEST — hide the payment-method strip on phones
──────────────────────────────────────────────────────────────────────────
The site's owner asked for `.m-strip` to be removed on mobile. The section
is a supporting one-liner on desktop ("Customers onboard into stablecoins
with Apple Pay / Google Pay / Any card → You receive USDm"); its content is
restated by the `.m-how` section directly below, so dropping it on phones
costs no information and removes a band that never composed well stacked.
The cut-off is <= 699, not <= 640. The owner's judgement was that the strip
is droppable on a phone; where exactly "phone" ends was ours, and 641 put
the band's first appearance 60px below every other phone-to-tablet
boundary in this file — an 84px band with two hairline borders popping in
one pixel above a width where it had just been judged unnecessary. At 700
it appears together with the tablet arrangements it belongs with — the same
pixel .m-problem opens into its three-column band, which is the whole
argument — and the two composed tiers (700-810 two lines, 811-900 one line)
are both kept. Round 5 hid it to <= 700 and re-introduced it at 701, so 700
was a tablet everywhere except here; the boundary is now a single line.
The border-top/bottom on the wrapper are hidden too, or they collapse into
a stray 2px rule across the page.
Everything above 700 and all desktop rendering are untouched.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 699px) {
/* The strip's wrapper carries the border-top/bottom and the #F3F1EC band and
has no class of its own, so hide the wrapper via :has() — hiding only the
inner .m-strip would leave a stray 2px hairline band across the page. */
div:has(> .m-strip) { display: none !important; }
.m-strip { display: none !important; }
}