/* Page-specific composition: home (index.html) and partners (partners.html) */
/* ---------- hero ---------- */
.hero{position:relative;padding:var(--section) 0;overflow:hidden;border-top:0}
.hero__grid{display:grid;isolation:isolate;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:4.5rem;align-items:start}
.hero__dots{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.03;
background-image:radial-gradient(var(--text) 1px,transparent 1px);background-size:2rem 2rem;
-webkit-mask-image:linear-gradient(180deg,#000,transparent 88%);mask-image:linear-gradient(180deg,#000,transparent 88%)}
.hero__eyebrow{font-family:var(--font-mono);font-size:0.71875rem;letter-spacing:.16em;color:var(--dim);margin-bottom:1rem}
.hero h1{font-size:4.5rem;line-height:1.02;letter-spacing:-.03em}
.hero__sub{margin-top:1.25rem;font-size:1.0625rem;line-height:1.65;color:var(--muted);max-width:38.75rem;text-wrap:pretty}
.hero .btn-row{margin-top:var(--stack)}
/* ---------- inventory feed ---------- */
.feed__row{display:grid;grid-template-columns:minmax(0,1fr) 5.25rem 4.25rem 2.5rem;gap:0.625rem;align-items:center;
padding:0.8125rem 1.125rem;border-bottom:1px solid var(--line-soft);font-family:var(--font-mono);font-size:0.6875rem;color:var(--muted)}
.feed__row>*{min-width:0}
.feed__row .tg-link{overflow:hidden;text-overflow:ellipsis}
.feed__row--head{border-bottom-color:var(--line);font-size:0.59375rem;letter-spacing:.1em;color:var(--dim)}
.feed__row .price{text-align:right;color:var(--accent)}
.feed__row .rel{color:var(--text)}
.feed__row .tg-link{font-size:0.625rem}
/* ---------- order calculator ---------- */
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 23.75rem;gap:2rem;align-items:start;margin-top:var(--stack)}
/* One column: every one of these blocks gets taller when narrowed (the quantity
box wraps, the radio rows stack), so columns cost height rather than save it.
Height comes out of the gaps, and out of the section padding below. */
.order-layout>form{gap:clamp(0.875rem,1.8vh,1.375rem)}
/* The two densest sections give their vertical padding back to the content —
in a paged layout that whitespace is what pushes the last rows off-screen. */
#checkout{padding-block:0}
#network{padding-block:clamp(0.5rem,1.5vh,1.5rem)}
.qty-box{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:1.125rem;
display:grid;grid-template-columns:12.5rem 1fr;gap:1.5rem;align-items:center}
.qty-input{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
padding:0.875rem;font-family:var(--font-display);font-size:1.625rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qty-input:hover{border-color:var(--muted)}
.qty-note{margin-top:0.75rem;font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.06em;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.7}
.summary{position:sticky;top:6rem}
.summary__list{padding:1.25rem;display:flex;flex-direction:column;gap:0.625rem;font-family:var(--font-mono);font-size:0.78125rem;font-variant-numeric:tabular-nums}
.summary__list>div{display:flex;justify-content:space-between;gap:1rem}
.summary__list>div span:first-child{color:var(--muted)}
.summary__rule{padding-top:0.875rem;border-top:1px solid var(--line-soft)}
.summary__total{padding:1rem 1.5rem;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.summary__total b{font-family:var(--font-display);font-size:1.875rem;font-weight:600;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.summary__foot{padding:0 1.5rem 1.5rem}
.summary__foot p{margin-top:0.875rem;font-family:var(--font-mono);font-size:0.625rem;line-height:1.7;letter-spacing:.04em;color:var(--dim)}
/* ---------- price rail + pricing ---------- */
.rail{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--radius);
overflow:hidden;background:var(--surface);margin-top:var(--stack)}
.rail>div{padding:1.125rem 1.5rem;border-right:1px solid var(--line)}
.rail>div:last-child{border-right:0}
.rail>div:first-child{background:var(--surface-3)}
.rail b{display:block;font-family:var(--font-display);font-size:2.125rem;line-height:1;font-weight:600;letter-spacing:-.03em}
.rail span{display:block;margin-top:0.75rem;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--dim);line-height:1.6}
.rail>div:first-child b{color:var(--accent)}
.rail>div:first-child span{color:var(--text)}
.price-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:1.5rem;margin-top:var(--stack);align-items:stretch}
.price-card{display:flex;flex-direction:column}
.price-card__top{padding:1.5rem 2rem 0}
.price-card__fig{display:flex;align-items:baseline;gap:0.625rem;margin-top:1.25rem}
.price-card__fig b{font-family:var(--font-display);font-size:4rem;line-height:1;font-weight:600;letter-spacing:-.03em}
.price-card__fig span{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.08em;color:var(--accent)}
.price-card__top p{margin:0.875rem 0 1.25rem;font-size:0.90625rem;line-height:1.75;color:var(--muted)}
.spec{padding:0.625rem 2rem;border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.spec dt{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--dim)}
.spec dd{font-family:var(--font-mono);font-size:0.75rem;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
.price-card__cta{padding:1.25rem 2rem 1.5rem;border-top:1px solid var(--line-soft);margin-top:auto}
.worked{margin-top:auto;border-top:1px solid var(--line);padding:1.125rem 1.75rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.worked dt{font-family:var(--font-mono);font-size:0.59375rem;letter-spacing:.12em;color:var(--dim)}
.worked dd{margin-top:0.625rem;font-family:var(--font-mono);font-size:0.78125rem;line-height:1.7;color:var(--muted);font-variant-numeric:tabular-nums}
.worked>div:last-child{text-align:right}
.worked>div:last-child dd{margin-top:0.375rem;font-family:var(--font-display);font-size:2.125rem;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--accent)}
/* ---------- report ---------- */
.report-layout{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:3.5rem;align-items:start}
.report-layout p{margin-top:1rem;font-size:0.9375rem;line-height:1.8;color:var(--muted)}
.report-layout .btn{margin-top:var(--stack)}
.report__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.125rem;
border-top:1px solid var(--line);background:var(--surface-2);font-family:var(--font-mono);font-size:0.65625rem;
letter-spacing:.1em;color:var(--dim);font-variant-numeric:tabular-nums}
.net-note{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:1.25rem;
font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.06em;color:var(--dim)}
.net-note a{border-bottom:1px solid var(--line-strong);padding-bottom:2px;color:var(--text)}
.net-note a:hover{color:var(--accent);border-color:var(--accent)}
/* ---------- partners: code card, terms, calculator, dashboard ---------- */
.code-card__figure{padding:1.75rem 1.125rem;text-align:center;border-bottom:1px solid var(--line)}
.code-card__figure b{font-family:var(--font-display);font-size:2.125rem;font-weight:600;letter-spacing:.02em;color:var(--accent)}
.code-card__figure span{display:block;margin-top:0.625rem;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--dim)}
.flow{list-style:none;margin:0;padding:0}
.flow li{display:grid;grid-template-columns:1.625rem 1fr auto;gap:0.875rem;align-items:center;padding:1rem 1.125rem;border-bottom:1px solid var(--line-soft)}
.flow .n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--dim)}
.flow p{font-size:0.84375rem;line-height:1.6;color:var(--muted)}
.flow .v{font-family:var(--font-mono);font-size:0.75rem;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.flow .v--accent{color:var(--accent)}
.terms{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:var(--stack)}
.terms>div{padding:1.5rem 2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.terms>div:nth-child(2n){border-right:0}
.terms>div:nth-last-child(-n+2){border-bottom:0}
.terms>div:first-child{background:var(--surface)}
.terms .num{font-family:var(--font-mono);font-size:0.65625rem;letter-spacing:.14em;color:var(--dim)}
.terms h3{font-size:1.3125rem;margin:1rem 0 0.875rem}
.terms p{font-size:0.90625rem;line-height:1.8;color:var(--muted)}
.calc-layout{display:grid;grid-template-columns:minmax(0,1fr) 26.25rem;gap:2rem;align-items:start;margin-top:var(--stack)}
.sliders{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:1.75rem;display:flex;flex-direction:column;gap:1.75rem}
.slider__top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.slider__val{font-family:var(--font-display);font-size:1.5rem;line-height:1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.slider input[type=range]{width:100%;accent-color:var(--accent);height:0.25rem;cursor:pointer;margin:0.75rem 0}
.slider__ends{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:0.59375rem;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-top:var(--stack)}
.facts>div{padding:1.75rem 1.5rem;border-right:1px solid var(--line)}
.facts>div:last-child{border-right:0}
.facts dt{font-family:var(--font-mono);font-size:0.59375rem;letter-spacing:.12em;color:var(--dim)}
.facts dd{margin-top:0.75rem;font-family:var(--font-mono);font-size:0.9375rem;letter-spacing:.02em;color:var(--text);font-variant-numeric:tabular-nums}
.dash{margin-top:var(--stack);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);overflow:hidden}
.dash__head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.5rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dash__id{font-family:var(--font-mono);font-size:0.6875rem;letter-spacing:.1em;display:flex;align-items:center;gap:0.875rem}
.dash__stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:var(--surface)}
.dash__stats>div{padding:1.5rem;border-right:1px solid var(--line)}
.dash__stats>div:last-child{border-right:0}
.dash__stats dt{font-family:var(--font-mono);font-size:0.59375rem;letter-spacing:.12em;color:var(--dim)}
.dash__stats dd{margin-top:0.75rem;font-family:var(--font-display);font-size:1.75rem;line-height:1;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dash__stats .sub{margin-top:0.625rem;font-family:var(--font-mono);font-size:0.59375rem;letter-spacing:.08em;color:var(--dim)}
.dash__body{display:grid;grid-template-columns:minmax(0,1fr) 20rem}
.dash__main{border-right:1px solid var(--line);min-width:0}
.dash__caption{padding:1rem 1.5rem;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;color:var(--dim)}
.dash__side{padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem}
.dash__balance b{display:block;margin-top:0.625rem;font-family:var(--font-display);font-size:2.125rem;line-height:1;font-weight:600;letter-spacing:-.03em;color:var(--accent);font-variant-numeric:tabular-nums}
.btn--outline-accent{background:transparent;border-color:var(--accent);color:var(--accent)}
.apply-layout{display:grid;grid-template-columns:minmax(0,1fr) 26.25rem;gap:3.5rem;align-items:start}
.apply-layout>div>p{margin:1rem 0 var(--stack);font-size:0.9375rem;line-height:1.8;color:var(--muted);max-width:40rem}
.google-box{border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);padding:1.5rem;
display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.google-box p{margin-top:0.75rem;font-size:0.875rem;line-height:1.7;color:var(--muted);max-width:26.25rem}
.next{position:sticky;top:6rem}
.next ol{list-style:none;margin:0;padding:0}
.next li{padding:1.125rem 1.5rem;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:1.375rem 1fr;gap:0.875rem;align-items:start}
.next .n{font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.1em;color:var(--dim);padding-top:2px}
.next b{font-family:var(--font-mono);font-size:0.6875rem;font-weight:400;letter-spacing:.06em;color:var(--text)}
.next p{margin-top:0.5rem;font-size:0.84375rem;line-height:1.7;color:var(--dim)}
.next__cta{padding:1.5rem}
.next__cta .btn+.btn{margin-top:0.625rem}
.next__cta p{margin-top:0.875rem;font-family:var(--font-mono);font-size:0.625rem;line-height:1.7;letter-spacing:.04em;color:var(--dim)}
@media (max-width:1100px){
.order-layout,.calc-layout,.apply-layout,.report-layout,.price-layout{grid-template-columns:1fr;gap:2rem}
.summary,.next{position:static}
.rail{grid-template-columns:1fr 1fr}
.rail>div:nth-child(2n){border-right:0}
.rail>div:nth-child(-n+4){border-bottom:1px solid var(--line)}
.terms{grid-template-columns:1fr}
.terms>div{border-right:0}
.facts,.dash__stats{grid-template-columns:1fr 1fr}
.facts>div:nth-child(2n),.dash__stats>div:nth-child(2n){border-right:0}
.facts>div:nth-child(-n+2),.dash__stats>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.dash__body{grid-template-columns:1fr}
.dash__main{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width:820px){
/* 4rem of top padding left a 63px dead band between the header and the
eyebrow — the fold's scarcest space spent on nothing. 1.75rem keeps the
content clear of the sticky header without the hole. */
.hero{padding:1.75rem 0 5.5rem}
.hero__grid{grid-template-columns:1fr;gap:2.5rem}
/* Two words shorter is worth more than any amount of type engineering: the
square brackets came off the string, which is 4 characters, and the line
fits on one row from 380px up.
nowrap alone was not safe though — it makes the line an unbreakable 359px
box, so on a narrower phone the whole copy column stretched past the screen
and .hero{overflow:hidden} quietly cut the end off, taking the mascot with
it. Tightening the tracking buys the margin back down to 380px, and below
that one size step covers 320-379px, which is the last width anyone ships. */
.hero__eyebrow{white-space:nowrap;letter-spacing:.1em}
.hero__sub{font-size:0.96875rem;margin-top:1.5rem}
.hero .btn-row{margin-top:2rem}
.qty-box{grid-template-columns:1fr;gap:1.125rem;padding:1.25rem}
.rail{grid-template-columns:1fr}
.rail>div{border-right:0;border-bottom:1px solid var(--line)}
.rail>div:last-child{border-bottom:0}
.price-card__fig b{font-size:3.25rem}
.spec,.price-card__top,.price-card__cta{padding-left:1.375rem;padding-right:1.375rem}
.worked{grid-template-columns:1fr;padding:1.375rem}
.worked>div:last-child{text-align:left}
.feed__row{grid-template-columns:minmax(0,1fr) 4.625rem 2.125rem;gap:0.5rem;padding:0.75rem 0.875rem;font-size:0.625rem}
.feed__row .niche{display:none}
.sliders{padding:1.375rem}
.terms>div{padding:1.625rem 1.375rem}
.google-box{flex-direction:column;align-items:stretch}
.google-box .btn{width:100%}
}
/* ---------- order actions: Telegram + printable sheet ---------- */
.summary__ref{display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;
margin-bottom:0.75rem;font-family:var(--font-mono);font-size:0.625rem;letter-spacing:.12em;
color:var(--dim)}
.summary__ref b{font-size:0.8125rem;letter-spacing:.06em;color:var(--accent);font-weight:500}
.copied{margin-top:0.625rem;font-family:var(--font-mono);font-size:0.625rem;line-height:1.6;
letter-spacing:.04em;color:var(--muted)}
.copied--ok{color:var(--accent)}
.copied--warn{color:#E8B84B}
.copied[hidden]{display:none}
/* The printed order sheet. Hidden on screen; on paper it is the only thing that
prints — a light, selectable, one-page quote rather than a screenshot of a
dark website, which is what a "screenshot my order" button would have given. */
#order-sheet{display:none}
@media print{
/* html carries the site's near-black background. body going white is not
enough: body is only as tall as the sheet, so everything below it printed as
a solid black slab on any printer with background graphics turned on. */
html{font-size:11pt !important;scroll-snap-type:none !important;background:#fff !important}
body>*{display:none !important}
body{background:#fff !important;padding:0 !important}
#order-sheet{display:block !important;color:#111;font-family:Inter,system-ui,sans-serif}
@page{margin:16mm}
.sheet__head{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;
padding-bottom:10pt;border-bottom:1.5pt solid #111;margin-bottom:14pt}
.sheet__brand{margin:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13pt;
font-weight:600;letter-spacing:.02em}
.sheet__brand span{color:#777}
.sheet__sub{margin:2pt 0 0;font-size:9pt;color:#555;letter-spacing:.08em;text-transform:uppercase}
.sheet__ref{text-align:right}
.sheet__ref p{margin:0;font-size:7.5pt;letter-spacing:.14em;color:#777;text-transform:uppercase}
.sheet__ref b{display:block;margin:2pt 0;font-family:'JetBrains Mono',ui-monospace,monospace;
font-size:15pt;letter-spacing:.06em}
/* Referral banner. Boxed and tinted so it survives a black-and-white printout
and is the second thing the eye lands on after the order reference. */
.sheet__partner{margin:0 0 14pt;padding:7pt 10pt;border:1pt solid #111;background:#f4f4f4;
display:flex;align-items:baseline;gap:10pt;flex-wrap:wrap}
.sheet__partner p{margin:0;font-size:7.5pt;letter-spacing:.14em;color:#555;text-transform:uppercase}
.sheet__partner b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13pt;
letter-spacing:.06em;color:#111}
.sheet__table{width:100%;border-collapse:collapse;margin-bottom:14pt}
.sheet__table th,.sheet__table td{padding:5.5pt 0;border-bottom:0.5pt solid #ddd;
font-size:9.5pt;text-align:left;vertical-align:top}
.sheet__table th{font-weight:400;color:#555;width:52%}
.sheet__table td{text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace}
.sheet__total th,.sheet__total td{border-bottom:0;border-top:1.5pt solid #111;
padding-top:8pt;font-size:13pt;font-weight:600;color:#111}
.sheet__block{margin-bottom:12pt;break-inside:avoid}
.sheet__block h2{margin:0 0 4pt;font-size:8pt;letter-spacing:.14em;text-transform:uppercase;color:#777}
.sheet__block ul{margin:0;padding-left:14pt}
.sheet__block li{font-size:9pt;line-height:1.6;word-break:break-all}
.sheet__foot{margin-top:16pt;padding-top:8pt;border-top:0.5pt solid #ddd;
font-size:8pt;line-height:1.7;color:#555}
}
/* ---------- iGaming Dad: hero background ----------
He is the hero's background image, not an element in it. Full height of the
band, bled to the viewport's right edge rather than the shell's, sitting
behind every piece of content — the landing page is laid out exactly as it
was and he lives underneath it.
Two things keep a photographic character usable as a background:
1. The mask. A hard vertical edge where the artwork stops looks like a
pasted-in cutout, and worse, it lands straight across the headline. The
linear-gradient mask dissolves him into the page from about a third of the
way in, so the H1 and the paragraph sit on flat background and the shark
only resolves in the empty right half.
2. The opacity. At full strength the lime jacket competes with the accent
colour on the buttons and the panel figures. Held back, he reads as art
direction rather than as another thing to look at.
The size is not a taste call. His face has to land in the open area BELOW the
inventory panel, or the panel covers it and the background is a pair of legs.
The panel's bottom edge sits at ~60% of the hero at every desktop size, and
his head is ~25% down the artwork, so anything wider than about 42% of the
hero pushes his face up behind the panel. 42% with a small downward bleed
keeps the face clear with room to spare.
pointer-events:none so he can never swallow a click. */
/* The offset parent is now .hero__grid, not .hero, because the element moved
into the copy column so the phone layout could place it in the flow. Two
consequences, both handled here rather than left to chance:
The element lives inside .hero__grid, so .hero__grid must NOT be positioned
— otherwise every percentage and offset here resolves against the shell
instead of the hero (it measured 630px wide and 205px inboard before that
was caught), and the hero is min-height driven so its bottom is nowhere
near the grid's anyway.
Which leaves stacking. z-index:-1 alone made him VANISH on desktop: .hero
has no stacking context of its own, so a negative z-index sent him behind
the page background entirely. isolation:isolate on .hero__grid fixes it —
it creates a stacking context, so -1 now means "behind this grid's own
content" rather than "behind the page", and unlike transform or filter it
does NOT make the grid a containing block, so the offsets above still
resolve against .hero. */
.hero__dad{position:absolute;right:0;bottom:-4rem;
z-index:-1;display:block;
pointer-events:none;
width:min(47rem, 46%);
/* He is riding a rocket, so he hovers. Transform only — no width, top or
margin in the keyframes — so the whole loop runs on the compositor and
never triggers layout or repaint. The drift is a slow figure-of-eight
rather than a straight bob: a pure up-down on a 940px image reads as a
lift jerking, whereas a little lateral wander and under a degree of roll
reads as floating. */
animation:dad-drift 11s linear infinite, dad-roll 7.5s linear infinite;
will-change:transform, rotate;
aspect-ratio:1356/1024;
opacity:1;
/* Two fades composited together: from the left so he dissolves into the page
instead of ending on a cutout edge across the headline, and from the top so
his dorsal fin thins out before it reaches the panel's bottom rule rather
than being sliced by it. */
-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 28%),
linear-gradient(to bottom, transparent 0%, #000 18%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right, transparent 0%, #000 28%),
linear-gradient(to bottom, transparent 0%, #000 18%);
mask-composite:intersect}
.hero__dad img{width:100%;height:100%;display:block;
object-fit:contain;object-position:bottom right}
@media (max-width:1100px){
.hero__dad{width:min(40rem,58%);opacity:.6}
}
/* ---------- iGaming Dad on a phone: right-side hero ----------
He overlaps the headline band on the right at full strength, and a gradient
mask dissolves him westward so the copy keeps clean ground to sit on. The
copy is capped at 62% so the words themselves stay left of him; the mask
handles the soft middle where the two zones meet.
Absolute, not in the flow, so he costs the hero no height — the fold still
holds eyebrow, headline, paragraph, both buttons and the stats. */
@media (max-width:820px){
.hero__dad{
/* Tracks the headline, so it moves with the hero's top padding: the copy
came up 36px, so he does too. */
position:absolute;top:0.75rem;right:-16%;bottom:auto;left:auto;
width:86%;aspect-ratio:1356/1024;
overflow:hidden;
opacity:1;z-index:-1;
filter:none;
/* Same idea, smaller, and biased DOWNWARD: on a phone his top edge is the
one that matters — it sits just under the eyebrow line — so the resting
position is the highest he ever gets and the drift falls away from the
copy rather than creeping into it. */
animation:dad-drift-sm 13s linear infinite, dad-roll-sm 9s linear infinite;
will-change:transform, rotate;
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:0 0;mask-position:0 0;
-webkit-mask-size:100% 100%, 100% 100%;mask-size:100% 100%, 100% 100%;
/* West-facing fade is the one doing the work: it is what lets him run at
full opacity without the headline landing on his teeth. The second layer
softens the bottom so he ends on the paragraph rather than on an edge. */
-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 38%),
linear-gradient(to bottom, #000 58%, transparent 92%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right, transparent 0%, #000 38%),
linear-gradient(to bottom, #000 58%, transparent 92%);
mask-composite:intersect}
.hero__dad img{position:absolute;top:0;left:0;
width:100%;max-width:none;height:auto;object-fit:contain}
/* Only the headline is capped. He occupies the headline band and nothing
below it — his mask is fully transparent before the paragraph starts — so
the paragraph has no reason to give up a third of its measure, and reads
far better across the full width. The eyebrow is not capped either: it is
one unbreakable line of monospace and a cap would wrap it again. */
.hero h1{max-width:62%;font-size:2.125rem!important;letter-spacing:-.025em}
/* Action stack: full width, directly under the text + mascot band. */
.hero .btn-row{margin-top:1.75rem;flex-direction:column;align-items:stretch}
.hero .btn-row .btn{width:100%}
}
@media (max-width:379px){
.hero__eyebrow{font-size:0.625rem;letter-spacing:.08em}
}
/* ---------- merged-section density ----------
Pricing and Process each absorbed a second section, and in a paged layout the
only currency is vertical space. These two modifiers buy it back where it
costs least: the commitments strip is four short promises that do not need
1.8 line-height, and the report block sits directly under the timeline rather
than a full --stack away from it. */
.cards--compact{margin-top:0.75rem}
.cards--compact>div{padding:0.875rem 1.125rem}
.cards--compact h3{font-size:0.9375rem;margin-bottom:0.4375rem}
.cards--compact p{font-size:0.8125rem;line-height:1.55}
.section__eyebrow--inline{margin-top:clamp(0.75rem,1.8vh,1.25rem)!important}
#process .report-layout{margin-top:clamp(0.75rem,1.8vh,1.25rem)!important;gap:2.5rem}
#process .report-layout p{margin-top:0.625rem;font-size:0.875rem;line-height:1.65}
#process .report-layout .btn{margin-top:clamp(0.875rem,2vh,1.25rem)}
/* The two merged sections give their own vertical padding back to the content,
the same trade #checkout and #network already make above — in a paged layout
that outer whitespace is exactly what pushes the last row past the fold. */
#process,#pricing{padding-block:clamp(0.75rem,2vh,1.5rem)}
/* Pricing carries the most content of any section now, so its card chrome gives
back the padding rather than the copy losing lines. */
#pricing .price-card__top{padding-top:1.125rem}
#pricing .price-card__fig{margin-top:0.875rem}
#pricing .price-card__top p{margin:0.75rem 0 1rem}
#pricing .spec{padding-block:0.4375rem}
#pricing .price-card__cta{padding:1rem 2rem 1.125rem}
#pricing .worked{padding-block:0.875rem}
/* ---------- the hover ----------
A closed ELLIPSE walked at constant speed, not a bob. An ease-in-out bob
decelerates to zero at every keyframe and again at the 0%/100% seam — that
is the stutter at the endpoints. A closed path has no endpoints to stall at.
Two details make it actually constant rather than nearly so:
- the keyframe stops are spaced by equal ARC LENGTH, not equal angle. Equal
angle on an ellipse runs fast across the minor axis and slow along the
major one, measured at 83% of average speed at the slow point. Spaced by
arc length it holds ~100% everywhere.
- linear timing, because any easing re-introduces acceleration between
stops, which is the thing being removed.
Drift and roll run as two animations on two separate properties (transform
vs the standalone rotate) with periods that do not divide into each other,
11s against 7.5s, so they only realign every 165s and it never reads as a
loop. */
@keyframes dad-drift{
0%{transform:translate3d(11.00px, 0.00px, 0)}
3.57143%{transform:translate3d(10.79px, 2.90px, 0)}
7.14286%{transform:translate3d(10.15px, 5.78px, 0)}
10.7143%{transform:translate3d(9.07px, 8.49px, 0)}
14.2857%{transform:translate3d(7.50px, 10.97px, 0)}
17.8571%{transform:translate3d(5.44px, 13.04px, 0)}
21.4286%{transform:translate3d(2.89px, 14.47px, 0)}
25%{transform:translate3d(0.00px, 15.00px, 0)}
28.5714%{transform:translate3d(-2.87px, 14.48px, 0)}
32.1429%{transform:translate3d(-5.42px, 13.05px, 0)}
35.7143%{transform:translate3d(-7.49px, 10.98px, 0)}
39.2857%{transform:translate3d(-9.06px, 8.51px, 0)}
42.8571%{transform:translate3d(-10.14px, 5.81px, 0)}
46.4286%{transform:translate3d(-10.79px, 2.93px, 0)}
50%{transform:translate3d(-11.00px, 0.00px, 0)}
53.5714%{transform:translate3d(-10.79px, -2.90px, 0)}
57.1429%{transform:translate3d(-10.15px, -5.78px, 0)}
60.7143%{transform:translate3d(-9.07px, -8.49px, 0)}
64.2857%{transform:translate3d(-7.50px, -10.97px, 0)}
67.8571%{transform:translate3d(-5.44px, -13.04px, 0)}
71.4286%{transform:translate3d(-2.89px, -14.47px, 0)}
75%{transform:translate3d(-0.00px, -15.00px, 0)}
78.5714%{transform:translate3d(2.87px, -14.48px, 0)}
82.1429%{transform:translate3d(5.42px, -13.05px, 0)}
85.7143%{transform:translate3d(7.49px, -10.98px, 0)}
89.2857%{transform:translate3d(9.06px, -8.51px, 0)}
92.8571%{transform:translate3d(10.14px, -5.81px, 0)}
96.4286%{transform:translate3d(10.79px, -2.93px, 0)}
100%{transform:translate3d(11.00px, -0.02px, 0)}
}
@keyframes dad-roll{
0%{rotate:0.000deg}
3.57143%{rotate:0.200deg}
7.14286%{rotate:0.390deg}
10.7143%{rotate:0.561deg}
14.2857%{rotate:0.704deg}
17.8571%{rotate:0.811deg}
21.4286%{rotate:0.877deg}
25%{rotate:0.900deg}
28.5714%{rotate:0.877deg}
32.1429%{rotate:0.811deg}
35.7143%{rotate:0.704deg}
39.2857%{rotate:0.561deg}
42.8571%{rotate:0.390deg}
46.4286%{rotate:0.200deg}
50%{rotate:0.000deg}
53.5714%{rotate:-0.200deg}
57.1429%{rotate:-0.390deg}
60.7143%{rotate:-0.561deg}
64.2857%{rotate:-0.704deg}
67.8571%{rotate:-0.811deg}
71.4286%{rotate:-0.877deg}
75%{rotate:-0.900deg}
78.5714%{rotate:-0.877deg}
82.1429%{rotate:-0.811deg}
85.7143%{rotate:-0.704deg}
89.2857%{rotate:-0.561deg}
92.8571%{rotate:-0.390deg}
96.4286%{rotate:-0.200deg}
100%{rotate:-0.000deg}
}
/* Phone: the ellipse is centred one radius BELOW rest, so the top edge never
rises above where it sits statically — it is just under the eyebrow line and
has nowhere to go up into. */
@keyframes dad-drift-sm{
0%{transform:translate3d(5.00px, 6.00px, 0)}
3.57143%{transform:translate3d(4.89px, 7.23px, 0)}
7.14286%{transform:translate3d(4.58px, 8.42px, 0)}
10.7143%{transform:translate3d(4.04px, 9.53px, 0)}
14.2857%{transform:translate3d(3.29px, 10.51px, 0)}
17.8571%{transform:translate3d(2.34px, 11.30px, 0)}
21.4286%{transform:translate3d(1.22px, 11.82px, 0)}
25%{transform:translate3d(0.00px, 12.00px, 0)}
28.5714%{transform:translate3d(-1.21px, 11.82px, 0)}
32.1429%{transform:translate3d(-2.33px, 11.31px, 0)}
35.7143%{transform:translate3d(-3.29px, 10.52px, 0)}
39.2857%{transform:translate3d(-4.04px, 9.54px, 0)}
42.8571%{transform:translate3d(-4.57px, 8.43px, 0)}
46.4286%{transform:translate3d(-4.89px, 7.24px, 0)}
50%{transform:translate3d(-5.00px, 6.00px, 0)}
53.5714%{transform:translate3d(-4.89px, 4.77px, 0)}
57.1429%{transform:translate3d(-4.58px, 3.58px, 0)}
60.7143%{transform:translate3d(-4.04px, 2.47px, 0)}
64.2857%{transform:translate3d(-3.29px, 1.49px, 0)}
67.8571%{transform:translate3d(-2.34px, 0.70px, 0)}
71.4286%{transform:translate3d(-1.22px, 0.18px, 0)}
75%{transform:translate3d(-0.00px, 0.00px, 0)}
78.5714%{transform:translate3d(1.21px, 0.18px, 0)}
82.1429%{transform:translate3d(2.33px, 0.69px, 0)}
85.7143%{transform:translate3d(3.29px, 1.48px, 0)}
89.2857%{transform:translate3d(4.04px, 2.46px, 0)}
92.8571%{transform:translate3d(4.57px, 3.57px, 0)}
96.4286%{transform:translate3d(4.89px, 4.76px, 0)}
100%{transform:translate3d(5.00px, 5.99px, 0)}
}
@keyframes dad-roll-sm{
0%{rotate:0.000deg}
3.57143%{rotate:0.156deg}
7.14286%{rotate:0.304deg}
10.7143%{rotate:0.436deg}
14.2857%{rotate:0.547deg}
17.8571%{rotate:0.631deg}
21.4286%{rotate:0.682deg}
25%{rotate:0.700deg}
28.5714%{rotate:0.682deg}
32.1429%{rotate:0.631deg}
35.7143%{rotate:0.547deg}
39.2857%{rotate:0.436deg}
42.8571%{rotate:0.304deg}
46.4286%{rotate:0.156deg}
50%{rotate:0.000deg}
53.5714%{rotate:-0.156deg}
57.1429%{rotate:-0.304deg}
60.7143%{rotate:-0.436deg}
64.2857%{rotate:-0.547deg}
67.8571%{rotate:-0.631deg}
71.4286%{rotate:-0.682deg}
75%{rotate:-0.700deg}
78.5714%{rotate:-0.682deg}
82.1429%{rotate:-0.631deg}
85.7143%{rotate:-0.547deg}
89.2857%{rotate:-0.436deg}
92.8571%{rotate:-0.304deg}
96.4286%{rotate:-0.156deg}
100%{rotate:-0.000deg}
}
/* Decoration, so it goes entirely rather than being slowed. */
@media (prefers-reduced-motion:reduce){
.hero__dad{animation:none!important;rotate:none!important;will-change:auto}
}
/* ---------- section mascot ----------
The hero's character generalised so other sections can carry one. Same two
rules that made the hero work: he lives in the outer margin where there is
genuinely nothing, and a gradient mask dissolves him toward the content so he
can run at full opacity without the copy losing contrast.
--sec-dad-edge is the distance from the shell's edge out to the viewport's.
The shell is centred, so that is (100vw - 100%) / 2, and a negative offset of
that size puts him flush against the viewport edge from inside the shell —
the same trick the hero uses, expressed once. */
.sec-dad{position:absolute;z-index:-1;display:block;pointer-events:none;
/* Sits INSIDE the section, not hanging below it. At -2rem he overhung the
section's bottom edge, and because the clip below is x-only the overhang
was visible — so the order section's character appeared as a green smear at
the top of the SEO section, and the SEO one's at the top of the network
section. Raised clear of the boundary. */
bottom:clamp(1.5rem, 4vh, 3.5rem);
width:min(47rem, 46vw);
/* Read from the section, not hard-coded, because the three characters are not
the same shape: the beanbag is 1451x943 (1.54), the coffee one 1503x1003
(1.50) and the poker one 1197x927 (1.29). With one fixed ratio the odd one
out gets letterboxed by object-fit — a correct picture inside a box of the
wrong height, which on mobile then throws off the vertical reservation the
heading makes for him. Each section declares its own. */
aspect-ratio:var(--dad-ar, 1451/943);
opacity:1;
animation:dad-drift 11s linear infinite, dad-roll 7.5s linear infinite;
will-change:transform, rotate}
.sec-dad img{width:100%;height:100%;display:block;object-fit:contain}
/* Right-hand variant: the mirror image, for sections whose character sits on
the far side. Same gutter-derived sizing, fade running the other way. */
.sec-dad--right{
right:0;
width:var(--dad-gutter);
-webkit-mask-image:linear-gradient(to left, #000 0%, #000 var(--dad-fade-x, 46%), transparent 100%);
mask-image:linear-gradient(to left, #000 0%, #000 var(--dad-fade-x, 46%), transparent 100%)}
/* Left-hand variant. Unlike the hero, this section has no empty half — the form
fills the left column and the summary the right — so the only free ground is
the page margin outside the shell. He is therefore SIZED BY THAT MARGIN
rather than by the viewport: --gutter is the distance from the viewport edge
to the shell, and his box is that plus a small overhang, so he grows on a
wide monitor and shrinks rather than trampling the form on a narrow one.
The fade then ends exactly at the shell's content edge, which is where the
form's first label starts. Sizing and fade are both derived from the same
measurement, so there is nothing to re-tune when the breakpoint moves. */
.sec-dad--left{
left:0;
width:var(--dad-gutter);
-webkit-mask-image:linear-gradient(to right, #000 0%, #000 var(--dad-fade-x, 46%), transparent 100%);
mask-image:linear-gradient(to right, #000 0%, #000 var(--dad-fade-x, 46%), transparent 100%)}
/* Three things every section carrying a character needs, together in one class
so the next one cannot be shipped missing any of them:
position — it is the offset parent the character is placed against.
isolation — makes the section a stacking context, so z-index:-1 means
"behind this section's content" rather than "behind the page".
Without it he vanishes entirely; that cost the hero a round.
overflow — he bleeds past the edges by design, and unclipped that bleed
both widens the document (sideways scroll) and leaks him into
the neighbouring section. Clipped on BOTH axes, not just x.
It must be `clip`, not the `hidden` the hero uses: hidden
creates a scroll container, which silently kills the order
summary's position:sticky. clip does not. */
.has-dad{position:relative;isolation:isolate;overflow:clip;
/* NOTE the name: --dad-gutter, not --gutter. --gutter is already a token in
base.css and .shell uses it for its own horizontal padding, so defining it
here cascaded into the shell and blew its padding out to 505px, collapsing
the order form's grid column to zero. Custom properties inherit; picking a
name already in the system is a silent, page-breaking collision.
This is the page margin, and the character's whole allowance: he is sized to it and
never crosses into the shell, so he cannot land on text at any width.
Derived from 100% — the section's own width — and NOT from 100vw. 100vw
includes the scrollbar, so every vw-based calc sat ~8px further inward than
intended. Invisible on a wide monitor; at 1600px the margin is only 50px and
those 8px put him straight on the copy. 0.5rem of slack keeps him off the
shell's edge entirely. */
--dad-gutter:max(0px, calc((100% - var(--shell)) / 2 - 0.5rem))}
/* Per-section artwork shape, and the phone band that follows from it.
--dad-ar : the image's own aspect ratio (see .sec-dad).
--dad-band: how much vertical room the heading reserves for him on a phone.
He is 57% of the viewport wide there, so his height is
57vw / ratio; the band is that plus the offset from the heading's
top down to his. A squatter character needs a taller band, which
is why this cannot be one number for all three. */
#checkout{--dad-ar:1451/943; --dad-band:42vw}
#igaming {--dad-ar:1503/1003;--dad-band:42vw}
/* The poker artwork is not a character on a plain ground like the other two — it
is a whole scene (laptop, glass, chip stacks, cards, dice, his legs and
sneakers) spread right across the frame. Cropped to 57% of the phone's width
and hung off the right edge like the others, the only part still on screen was
his head: everything that makes the picture read was outside the viewport.
So on a phone he is placed to end AT the screen edge rather than past it
(50 + 54 = 104%, four percent of sole), and the heading's cap comes in to 48%
to make room. --dad-band:0 lets the lede rise into his faded lower edge
instead of being parked below an empty reservation. */
#network {--dad-ar:1520/1006;--dad-band:0;--dad-x:50%;--dad-w:54%;--dad-cap:48%;
--dad-fade-a:80%;--dad-fade-b:98%;--dad-fade-x:88%}
@media (max-width:820px){
/* Phone: the hero recipe, exactly — headline capped left, character absolute
over the right of the heading band at full opacity, same westward fade.
The one addition this section needs is the lede clearance below: the hero's
character is tall so the copy falls in his faded lower half, this artwork is
wide and short, so the lede is pushed past where his fade ends instead. */
/* Phone: the hero composition — heading capped left, character beside it on
the right, bleeding off the edge. The difference from the hero is that this
is enforced by GEOMETRY, not by a fade: the heading stops at 56% and his box
starts at 58%, so the two can never intersect. Tuning a mask to hold text
legible over him was tried across 9 cap/fade pairs and the best still put
66/255 of him on the glyphs; separated boxes measure 0.
The section still needs the vertical reservation below, because the heading
wraps to a different number of lines on every phone while his height is a
fixed share of the width. */
.sec-dad{position:absolute;top:2.25rem;bottom:auto;
left:var(--dad-x, 58%);right:auto;width:var(--dad-w, 57%);max-width:none;margin:0;
animation:dad-drift-sm 13s linear infinite, dad-roll-sm 9s linear infinite}
/* Two fades, intersected: one westward so he dissolves before reaching the
heading, one downward so the copy underneath never lands on solid artwork.
The downward one is per-section, because it is the thing that decides how
much of the picture survives: at 66/96 it erased the bottom third, which on
the poker scene is his legs, his sneakers and half the table. */
.sec-dad--left,
.sec-dad--right{
-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 22%),
linear-gradient(to bottom, #000 var(--dad-fade-a, 66%), transparent var(--dad-fade-b, 96%));
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to right, transparent 0%, #000 22%),
linear-gradient(to bottom, #000 var(--dad-fade-a, 66%), transparent var(--dad-fade-b, 96%));
mask-composite:intersect}
.sec-dad img{width:100%;height:100%}
.has-dad .section__head h2{max-width:var(--dad-cap, 56%);min-height:var(--dad-band, 42vw)
}
}
@media (prefers-reduced-motion:reduce){
.sec-dad{animation:none!important;rotate:none!important;will-change:auto}
}
/* ---------- narrow-phone header ----------
Pre-existing, found while auditing the sideways scroll: at 320px the header's
four controls (sign-in/ORDER, Telegram, menu) are 26px wider than the screen,
which is its own horizontal scroll independent of any character. The Telegram
icon is the one that goes — it is a duplicate of the MESSAGE button in the
hero and of the contact link in the footer, so nothing is lost. */
@media (max-width:359px){
.site-header__actions{gap:0.5rem}
.site-header__actions .icon-btn[data-site-href="telegram"]{display:none}
.site-header__actions .btn--sm{padding-inline:0.75rem}
}