/* 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{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:4.5rem;align-items:start}
.hero__dots{position:absolute;inset:0;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){
.hero{padding:4rem 0 5.5rem}
.hero__grid{grid-template-columns:1fr;gap:2.5rem}
/* One line, always. The bracketed eyebrow is a single typographic unit — broken
across two lines the stray "]" on its own row reads as a layout fault. It is
44 characters of monospace, so the width is arithmetic, not luck: nowrap
forbids the break, the tighter tracking buys back roughly one character in
eight, and the vw term shrinks the type in step with the viewport so it still
fits at 320px. The rem ceiling stops it growing past the desktop size. */
.hero__eyebrow{white-space:nowrap;letter-spacing:.1em;
font-size:clamp(0.5rem, 2.55vw, 0.71875rem)}
/* The headline and paragraph give up their last third of width so the
character has a column of his own on the right. This is the trade that
makes him properly visible on a phone: full-width copy and a bright
character cannot share one band at 390px, and dimming him until they can
turns him into a smudge — measured, at the brightness where he still reads
as a shark, text over him came out at 1.05:1. At 68% he clears the copy and
the h1 still measures 5.0:1 over his brightest highlight.
The type drops with the width. Keeping 2.625rem in a column a third
narrower breaks the headline into six lines, several of them one word —
the size and the measure have to move together. The buttons below keep the
full width: they are opaque blocks, so he passes behind them harmlessly. */
.hero h1{max-width:68%;font-size:2.125rem!important;letter-spacing:-.025em}
.hero__sub{font-size:0.9375rem;margin-top:1.5rem;max-width:68%}
.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. */
.hero__dad{position:absolute;right:0;bottom:-4rem;z-index:0;display:block;
pointer-events:none;
width:min(47rem, 42%);
aspect-ratio:3/2;
opacity:.75;
/* 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}
.hero__grid{position:relative;z-index:1} /* copy and panel stay above him */
@media (max-width:1100px){
.hero__dad{width:min(40rem,58%);opacity:.6}
}
/* ---------- iGaming Dad on a phone ----------
The desktop rule cannot survive the portrait hero. Stacked, the copy runs the
full width, so there is no empty half to put him in, and shrinking the whole
reclining pose to fit the width turns a character into a 40px thumbnail of a
sofa. He also stops being visible at all: the phone hero runs about 1.6
screens tall, and a bottom-anchored figure sits below everything anyone sees.
So on a phone he is cropped rather than scaled. object-fit switches from
contain to cover and the focal point moves to his face, so the frame holds
head, shades and shoulders at a readable size while the laptop, chips and
trainers fall outside it. He is anchored to the TOP right, bleeding off the
edge, which is the one place in the stacked layout with slack: the header
clears at 4rem and the headline's ragged right leaves usable gaps.
Legibility rules the opacity. His jacket is the same lime as --accent, so at
any real strength he competes with the primary button — the accent stops
reading as the accent when a second lime shape is on screen. Held at .3 and
faded out before the CTA, the button keeps the only saturated lime in the
viewport and the body copy keeps its contrast. */
@media (max-width:820px){
.hero__dad{
/* Starts BELOW the eyebrow line, not at the top of the hero. Measured over
his brightest highlight the eyebrow came out at 1.7:1 against the 4.5:1
it needs — it is small mono type in --dim, the one element on the page
with no contrast to spare, so nothing goes behind it. Dropped to here he
sits behind the h1 instead, which is heavy white type and holds 7.5:1
over the same highlight. */
top:6.5rem;bottom:auto;right:-48%;left:auto;
/* Capped, not just proportional. A plain 86% keeps growing with the
viewport, and by tablet width the frame is 660px tall — his grin lands
across the paragraph and the buttons. 22rem holds him at phone scale all
the way up to the desktop breakpoint. */
width:min(96%, 27rem);aspect-ratio:4/3;
overflow:hidden;
opacity:.9;
/* Kept bright. Dimming him with a brightness filter did hold the contrast
numbers, but a crushed dark-green blur is not "more visible" — it stops
reading as a shark at all. The room comes from the text column instead
(see .hero h1 / .hero__sub below), so he can stay at full strength.
A slight lift compensates for the 90% opacity over near-black. */
filter:saturate(1.12) contrast(1.04);
/* Fades down past the headline so the paragraph and the buttons below it sit
on flat background, and in from the left so he never runs under the start
of a line of text where the eye picks it up.
The downward fade has to finish EARLY — by 48%, not near the bottom. Run
it longer and the white "iGaming.Dad" script on his hoodie survives into
the copy as ghost text you can almost read, which is far more distracting
than the character himself. Ending it above his chest leaves head and
shoulders only, and keeps the paragraph clear. */
-webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 30%, transparent 48%),
linear-gradient(to right, transparent 0%, #000 24%);
-webkit-mask-composite:source-in;
mask-image:linear-gradient(to bottom, #000 0%, #000 30%, transparent 48%),
linear-gradient(to right, transparent 0%, #000 24%);
mask-composite:intersect}
/* object-fit can only scale to cover, never crop closer, so the img is
oversized inside an overflow-hidden frame instead. The artwork's face sits
at 47% across and 16% down; at 210% width that lands it near the top right
of the frame, holding the shades and the grin at a size you can actually
read on a 390px screen while the laptop, chips and trainers fall outside. */
/* max-width:none matters: the global img reset caps images at 100% of their
container, which silently clamped the 210% back to 100% and framed his
chest instead of his face. */
.hero__dad img{position:absolute;top:-14%;left:-46%;
width:210%;max-width:none;height:auto;object-fit:fill}
}
/* Between phone and desktop the -48% offset stops making sense: the frame is
capped at 27rem, so on a 768px tablet that offset parks almost all of him off
the right edge for no reason — there is plenty of room there. Pulled back to
-30%, which is the widest he goes before the headline loses contrast over
him (measured 8.05:1 at -30%, 1.26:1 at -22%). */
@media (min-width:561px) and (max-width:820px){
.hero__dad{right:-30%}
}