/* Template 07: the reference stylesheet (influencer-websites-templates/templates/07/css/style.css) after its :root block and base reset,
   with `--x` renamed `--t2-x`, white as a token, asset URLs rooted at ../assets/template-07/, and every photo read through a
   `--photo-*` custom property (the stylesheet's own photo is the fallback), so a content-supplied photo keeps the wash in front of it.
   Rules are in the reference's order. */

/* Gradient text: the primary-to-accent gradient on single words, titles and numbers. */
.g { background: var(--t2-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Big numbers carry the gradient too. */
.fc-num, .t-n, .mini-n, .fmt-n, .list-card-rows li b { background: var(--t2-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.t-n, .mini-n, .fmt-n { width: fit-content; }

/* ---------- header ---------- */
.header { position: sticky; top: 0; z-index: 50; margin-bottom: calc(var(--t2-head) * -1); background: transparent; transition: box-shadow var(--t2-t-slow) var(--t2-ease), background-color var(--t2-t-slow) var(--t2-ease), backdrop-filter var(--t2-t-slow) var(--t2-ease), -webkit-backdrop-filter var(--t2-t-slow) var(--t2-ease); }
.header.is-scrolled { background: rgba(var(--t2-ink-rgb),0.72); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 10px 30px -14px rgba(var(--t2-shade-rgb),0.8), inset 0 -1px 0 rgba(var(--t2-white-rgb),0.08); }
.header-inner { height: var(--t2-head); display: flex; align-items: center; gap: 16px; }
.logo { display: inline-flex; align-items: center; margin-right: auto; }
.logo-img { display: block; width: auto; height: 50px; }
.logo-w .logo-img { height: 64px; }
.header-nav { display: none; gap: 20px; align-items: center; }
.header-nav-link { font-size: 15.5px; font-weight: 500; color: var(--t2-soft); padding: 6px 0; transition: color var(--t2-t-fast) var(--t2-ease); white-space: nowrap; }
.header-nav-link:hover { color: var(--t2-white); }
.header-nav-link.is-current { color: var(--t2-accent); }
.header-cta-group { display: none; align-items: center; gap: 12px; }
.hamburger-button { width: 42px; height: 42px; border-radius: 6px; border: 1px solid rgba(var(--t2-white-rgb),0.16); background: rgba(var(--t2-white-rgb),0.08); display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color var(--t2-t-fast) var(--t2-ease); }
.hamburger-button:hover { background: rgba(var(--t2-white-rgb),0.16); }
.hb { width: 18px; height: 2px; background: var(--t2-white); border-radius: 2px; transition: transform var(--t2-t-fast) var(--t2-ease), opacity var(--t2-t-fast) var(--t2-ease); }
.hamburger-button.is-open .hb:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger-button.is-open .hb:nth-child(2) { opacity: 0; }
.hamburger-button.is-open .hb:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; background: var(--t2-ink-2); border-top: 1px solid var(--t2-line); padding-bottom: 20px; }
.mobile-menu.is-open { display: block; }
.mobile-menu-nav { display: flex; flex-direction: column; padding-top: 8px; }
.mobile-nav-link { padding: 14px 0; font-weight: 500; border-bottom: 1px solid var(--t2-line); transition: color var(--t2-t-fast) var(--t2-ease); }
.mobile-nav-link.is-current { font-weight: 700; color: var(--t2-accent); }
.mobile-nav-link:hover { color: var(--t2-accent); }
.mobile-menu-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.header-cta-group .btn, .mobile-menu-cta .btn, .btn-sm { white-space: nowrap; }

/* Scroll to top: a square button with 6px corners like every other button, bottom right, 15px from the edges. */
.fab { position: fixed; bottom: 15px; right: 15px; z-index: 40; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--t2-ink); display: grid; place-items: center; cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity var(--t2-t-slow) var(--t2-ease), transform var(--t2-t-slow) var(--t2-ease), visibility 0s linear var(--t2-t-slow); }
.fab.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--t2-t-slow) var(--t2-ease), transform var(--t2-t-slow) var(--t2-ease), visibility 0s; }
.fab::before { content: ''; position: absolute; inset: 7px; z-index: -1; border-radius: 6px; background: var(--t2-grad); box-shadow: 0 10px 22px -8px rgba(var(--t2-primary-rgb),0.6); transition: transform var(--t2-t-fast) var(--t2-ease); }
.fab svg { transition: transform var(--t2-t-fast) var(--t2-ease); }
@media (hover: hover) { .fab:hover::before { transform: scale(1.06); } .fab:hover svg { transform: translateY(-2px); } }
.fab:active::before { transform: scale(0.94); }
.fab:focus-visible { outline: none; }
.fab:focus-visible::before { box-shadow: 0 0 0 2px var(--t2-ink), 0 0 0 4px var(--t2-accent); }
@media (prefers-reduced-motion: reduce) { .fab, .fab.is-visible { transition: none; transform: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--t2-font-body); font-weight: 700; letter-spacing: 0.01em; font-size: 16.5px; border: none; border-radius: 6px; padding: 13px 22px; cursor: pointer; transition: box-shadow var(--t2-t-fast) var(--t2-ease), transform var(--t2-t-fast) var(--t2-ease), background-position var(--t2-t-slow) var(--t2-ease), filter var(--t2-t-fast) var(--t2-ease), color var(--t2-t-fast) var(--t2-ease); }
.btn-cta { background: var(--t2-grad); background-size: 140% 100%; background-position: 0 0; color: var(--t2-ink); box-shadow: 0 10px 24px -12px rgba(var(--t2-primary-rgb),0.8); }
.btn-cta:hover { background-position: 100% 0; box-shadow: 0 14px 28px -12px rgba(var(--t2-primary-rgb),0.95); }
.btn-light { background: var(--t2-white); color: var(--t2-ink); box-shadow: 0 8px 20px -10px rgba(var(--t2-shade-rgb),0.6); }
.btn-light:hover { box-shadow: 0 12px 26px -10px rgba(var(--t2-shade-rgb),0.8); }
.btn-sm { padding: 10px 20px; font-size: 15.5px; }
.btn-lg { padding: 13px 26px 13px 28px; font-size: 17.5px; }
.arr { width: auto; height: auto; display: grid; place-items: center; flex: 0 0 auto; }
.arr svg { width: 16px; height: 16px; }
.btn-cta .arr { color: var(--t2-ink); }
.btn-light .arr { color: var(--t2-primary-deep); }
.btn .arr svg { transition: transform 0.5s var(--t2-ease); }
@media (hover: hover) { .btn:hover .arr svg { transform: rotate(180deg) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .btn .arr svg { transition: none; } .btn:hover .arr svg { transform: none; } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Shine: a light band sweeps across the button on hover, and by itself at a random moment every 4-7 s per button (js/main.js adds .is-shining). */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; --shine: rgba(var(--t2-white-rgb),0.55); }
.btn-light.btn-shine { --shine: rgba(var(--t2-primary-rgb),0.25); }
.btn-shine::before, .btn-shine::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, var(--shine) 50%, transparent 100%); transform: translateX(-160%) skewX(-20deg); }
.btn-shine.is-shining::after { animation: shine-auto 0.85s var(--t2-ease) 1; }
@keyframes shine-auto { 0% { transform: translateX(-160%) skewX(-20deg); } 100% { transform: translateX(340%) skewX(-20deg); } }
@media (hover: hover) { .btn-shine:hover::before { transform: translateX(340%) skewX(-20deg); transition: transform 0.75s var(--t2-ease); } }
@media (prefers-reduced-motion: reduce) { .btn-shine.is-shining::after { animation: none; } .btn-shine:hover::before { transition: none; transform: translateX(-160%) skewX(-20deg); } }

/* ---------- landing (home) ---------- */
.hero { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: calc(var(--t2-head) + 16px) 0 0; overflow: clip; background: radial-gradient(110% 85% at 92% 8%, rgba(var(--t2-primary-rgb),0.55) 0, rgba(var(--t2-primary-rgb),0.16) 45%, rgba(var(--t2-primary-rgb),0) 75%), radial-gradient(90% 75% at 2% 100%, rgba(var(--t2-accent-rgb),0.34) 0, rgba(var(--t2-accent-rgb),0.1) 45%, rgba(var(--t2-accent-rgb),0) 75%), var(--t2-ink); }
/* Home landing: black-and-white arena photo under the glows, dissolving into cloud-like mist at the bottom. */
.hero::before, .hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero::before { background: linear-gradient(180deg, rgba(var(--t2-shade-rgb),0.7) 0, rgba(var(--t2-shade-rgb),0) 22%), linear-gradient(90deg, rgba(var(--t2-shade-rgb),0.55) 0, rgba(var(--t2-shade-rgb),0.1) 70%), var(--photo-hero, url('../assets/template-07/hero-bg.jpg')) center 30% / cover no-repeat; opacity: 0.6; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 98%); }
.hero::after { top: 58%; background: radial-gradient(38% 45% at 8% 75%, rgba(var(--t2-accent-rgb),0.5) 0, rgba(var(--t2-accent-rgb),0) 100%), radial-gradient(34% 40% at 34% 88%, rgba(var(--t2-shade-rgb),0.4) 0, rgba(var(--t2-shade-rgb),0) 100%), radial-gradient(40% 48% at 58% 70%, rgba(var(--t2-primary-rgb),0.38) 0, rgba(var(--t2-primary-rgb),0) 100%), radial-gradient(36% 42% at 82% 90%, rgba(var(--t2-shade-rgb),0.35) 0, rgba(var(--t2-shade-rgb),0) 100%), radial-gradient(30% 36% at 96% 62%, rgba(var(--t2-primary-rgb),0.45) 0, rgba(var(--t2-primary-rgb),0) 100%), radial-gradient(28% 34% at 48% 55%, rgba(var(--t2-accent-rgb),0.22) 0, rgba(var(--t2-accent-rgb),0) 100%); filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 78%, transparent 100%); }
/* Landing photo: upright, with a pink and a gold frame behind it, each turned a little. */
.hero-photo { position: relative; margin: 14px auto 18px; width: min(100%, 320px); aspect-ratio: 4 / 5; isolation: isolate; }
.hero-photo::before, .hero-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 24px; border: 3px solid var(--t2-primary); }
.hero-photo::before { transform: rotate(-5deg) scale(1.05); box-shadow: 0 0 28px -4px rgba(var(--t2-primary-rgb),0.55); }
.hero-photo::after { border-color: var(--t2-accent); transform: rotate(4deg) scale(1.05); box-shadow: 0 0 28px -4px rgba(var(--t2-accent-rgb),0.45); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 20px; box-shadow: var(--t2-shadow); }
.hero-grid { position: relative; display: grid; gap: 40px; align-items: center; align-content: center; flex: 1 1 auto; padding-bottom: 40px; z-index: 2; }
.hero-title { font-family: var(--t2-font-display); font-weight: 800; font-size: clamp(42px, 11.5vw, 72px); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 18px; }
.hero-sub { font-size: 19px; color: var(--t2-soft); max-width: 480px; margin-bottom: 28px; }
.hero-req { margin-top: 22px; font-size: 14px; color: var(--t2-soft); max-width: 460px; }
@media (max-width: 480px) { .hero .actions { gap: 10px; } .hero .actions .btn-lg { padding: 13px 20px 13px 22px; font-size: 16.5px; gap: 8px; } }
.sparkle { position: absolute; color: var(--t2-accent); pointer-events: none; z-index: 1; opacity: 0.9; animation: twinkle 4.8s ease-in-out infinite; }
.sparkle-b { color: var(--t2-primary); animation-delay: -1.6s; }
.sparkle-c { animation-delay: -3.1s; }
/* Home: sparkles scattered over the whole flowing background, behind the content. */
.flow > * { position: relative; z-index: 1; }
.flow > .flow-sparkles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.flow-sparkles .sparkle { z-index: 0; opacity: 0.7; }
@keyframes twinkle { 0%, 100% { transform: scale(0.8) rotate(0deg); opacity: 0.45; } 50% { transform: scale(1.1) rotate(12deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sparkle { animation: none; } }

/* Today's play card on the landing: a sample, labelled as one */

/* ---------- sections ---------- */
.sec { padding: 56px 0; }
.sec-alt { background: transparent; }
/* One gradient that keeps flowing down the page: gold on the left at the seams (the top one matches the landing's bottom glow exactly), pink on the right in between. */
.flow { position: relative; background-color: var(--t2-ink); background-image: radial-gradient(ellipse 90% 640px at 2% 0%, rgba(var(--t2-accent-rgb),0.34) 0, rgba(var(--t2-accent-rgb),0.1) 45%, rgba(var(--t2-accent-rgb),0) 75%), radial-gradient(ellipse 70% 560px at 100% 50%, rgba(var(--t2-primary-rgb),0.40) 0, rgba(var(--t2-primary-rgb),0.12) 50%, rgba(var(--t2-primary-rgb),0) 100%), radial-gradient(ellipse 90% 640px at 2% 100%, rgba(var(--t2-accent-rgb),0.34) 0, rgba(var(--t2-accent-rgb),0.1) 45%, rgba(var(--t2-accent-rgb),0) 75%); background-size: 100% 1500px; background-repeat: repeat-y; }
.sec-head { max-width: 600px; }
.sec-title { font-family: var(--t2-font-display); font-weight: 800; font-size: clamp(28px, 7vw, 42px); line-height: 1.08; letter-spacing: -0.025em; }
.rule { display: block; width: 52px; height: 4px; background: var(--t2-grad); margin: 14px 0 16px; border-radius: 2px; }
.sec-text { color: var(--t2-soft); font-size: 17.5px; }
.sec-text + .sec-text { margin-top: 12px; }
.sec-head + .sec-text { margin-top: 14px; }
.sec-text strong { color: var(--t2-white); }
.eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t2-accent); margin-bottom: 10px; }
.sec-cta { display: flex; justify-content: center; margin-top: 32px; }
.fine { margin-top: 18px; font-size: 14px; line-height: 1.55; color: var(--t2-soft); max-width: 760px; }
.fine-full { max-width: none; }
.sub-title { font-family: var(--t2-font-display); font-weight: 800; font-size: 25px; letter-spacing: -0.02em; margin: 44px 0 14px; }

/* cards */
.cards { display: grid; gap: 14px; }
.card { position: relative; background: var(--t2-card); border: 1px solid var(--t2-line); border-radius: var(--t2-radius); padding: 22px; box-shadow: var(--t2-shadow); display: flex; flex-direction: column; gap: 10px; transition: transform var(--t2-t-slow) var(--t2-ease), border-color var(--t2-t-slow) var(--t2-ease); }
@media (hover: hover) { .card.lift:hover { transform: translateY(-3px); border-color: rgba(var(--t2-accent-rgb),0.5); } }
.card-title { font-family: var(--t2-font-body); font-weight: 700; font-size: 19px; line-height: 1.25; }
.card-text { font-size: 16px; line-height: 1.55; color: var(--t2-soft); }
.ico { width: 28px; height: 28px; display: grid; place-items: center; color: var(--t2-accent); flex: 0 0 auto; }

/* stat numbers */
.t-n { font-family: var(--t2-font-mono); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.t-l { font-weight: 600; font-size: 15.5px; margin-top: 6px; }
.minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini { background: var(--t2-card); border: 1px solid var(--t2-line); border-radius: var(--t2-radius); padding: 16px 18px; }
.mini-n { font-family: var(--t2-font-mono); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; }
.mini-l { font-size: 14px; margin-top: 6px; color: var(--t2-soft); }
.split { display: grid; gap: 28px; align-items: center; }

/* feature rows */
.feats { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 24px 0; margin-top: 28px; border-top: 1px solid var(--t2-line); border-bottom: 1px solid var(--t2-line); }
.feat { display: flex; gap: 14px; align-items: flex-start; }
.feat-ico { width: 26px; height: 26px; flex: 0 0 auto; margin-top: 1px; display: grid; place-items: center; color: var(--t2-accent); }
.feat-t { font-weight: 700; font-size: 16.5px; }
.feat-x { font-size: 15px; color: var(--t2-soft); }

/* ---------- sportsbook offers ---------- */
.op-grid { display: grid; gap: 16px; }
.op-card { position: relative; background: var(--t2-card); border: 1px solid var(--t2-line); border-radius: var(--t2-radius); padding: 24px; box-shadow: var(--t2-shadow); display: flex; flex-direction: column; gap: 14px; transition: transform var(--t2-t-slow) var(--t2-ease), border-color var(--t2-t-slow) var(--t2-ease); }
@media (hover: hover) { .op-card:hover { transform: translateY(-3px); border-color: rgba(var(--t2-accent-rgb),0.5); } }
.op-head { display: flex; align-items: center; gap: 14px; }
/* Operator logo on a white plate. Placeholder images until the real logos arrive. */
.op-logo { flex: 0 0 auto; display: block; width: 96px; height: 44px; background: var(--t2-white); border-radius: 8px; overflow: hidden; }
.op-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.op-name { font-family: var(--t2-font-body); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; }
.op-offer { font-family: var(--t2-font-body); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 7px; }
.op-terms { font-size: 13.5px; line-height: 1.55; color: var(--t2-soft); }
.op-cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 639px) { .op-cta { align-self: center; } }
.op-featured { border: 1.5px solid transparent; background: linear-gradient(135deg, rgba(var(--t2-primary-rgb),0.18), rgba(var(--t2-accent-rgb),0.08)) padding-box, linear-gradient(var(--t2-card), var(--t2-card)) padding-box, var(--t2-grad) border-box; box-shadow: var(--t2-shadow), 0 0 50px -24px rgba(var(--t2-primary-rgb),0.6); }
.op-badge { position: absolute; top: -12px; left: 24px; background: var(--t2-grad); color: var(--t2-ink); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }

/* ---------- pick tiles ---------- */
.fancy-tile { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; min-height: 300px; padding: 24px; color: var(--t2-white); background: var(--t2-card); border: 1px solid var(--t2-line); border-radius: var(--t2-radius); overflow: hidden; transition: transform var(--t2-t-slow) var(--t2-ease), border-color var(--t2-t-slow) var(--t2-ease); }
.fancy-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; transition: opacity var(--t2-t-slow) var(--t2-ease); }
.fancy-tile.bg-1::before { background: radial-gradient(90% 70% at 100% 0, rgba(var(--t2-primary-rgb),0.34) 0, rgba(var(--t2-primary-rgb),0) 70%); }
.fancy-tile.bg-2::before { background: radial-gradient(90% 70% at 100% 0, rgba(var(--t2-accent-rgb),0.26) 0, rgba(var(--t2-accent-rgb),0) 70%); }
.fancy-tile.bg-4::before { background: radial-gradient(90% 70% at 100% 0, rgba(var(--t2-accent-rgb),0.28) 0, rgba(var(--t2-accent-rgb),0) 60%), radial-gradient(80% 60% at 0 100%, rgba(var(--t2-primary-rgb),0.24) 0, rgba(var(--t2-primary-rgb),0) 70%); }
.fancy-tile.bg-3::before { background: radial-gradient(90% 70% at 100% 0, rgba(var(--t2-primary-rgb),0.3) 0, rgba(var(--t2-primary-rgb),0) 60%), radial-gradient(80% 60% at 0 100%, rgba(var(--t2-accent-rgb),0.2) 0, rgba(var(--t2-accent-rgb),0) 70%); }
@media (hover: hover) { .fancy-tile:hover { transform: translateY(-3px); border-color: rgba(var(--t2-accent-rgb),0.5); } }
/* Home board: a greyscale photo behind each tile, under the colour wash (::before). On hover the photo comes up and settles in. */
.fancy-photo::after { content: ''; position: absolute; inset: 0; z-index: -2; background: no-repeat 50% 50% / cover; opacity: 0.18; transform: scale(1); transition: opacity var(--t2-t-slow) var(--t2-ease), transform 0.9s var(--t2-ease); }
.fancy-photo.ph-1::after { background-image: var(--photo-home-tile-1, url('../assets/template-07/tile-1.jpg')); background-position: 55% 50%; }
.fancy-photo.ph-2::after { background-image: var(--photo-home-tile-2, url('../assets/template-07/tile-2.jpg')); background-position: 25% 50%; }
.fancy-photo.ph-3::after { background-image: var(--photo-home-tile-3, url('../assets/template-07/tile-3.jpg')); }
.fancy-photo.ph-4::after { background-image: var(--photo-home-tile-4, url('../assets/template-07/tile-4.jpg')); background-position: 50% 45%; }
.fancy-photo .fc-title, .fancy-photo .fc-text, .fancy-photo .fc-unit, .fancy-photo .fc-foot { text-shadow: 0 1px 8px rgba(var(--t2-shade-rgb),0.6); }
@media (hover: hover) { .fancy-photo:hover::after { opacity: 0.32; transform: scale(1.07); } .fancy-photo:hover { box-shadow: 0 18px 36px -18px rgba(var(--t2-primary-rgb),0.55); } }
.fc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fc-meta { font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2-soft); }
.fc-emoji { display: grid; color: var(--t2-accent); line-height: 0; flex: 0 0 auto; }
.fc-num { font-family: var(--t2-font-mono); font-weight: 800; font-size: 54px; line-height: 1; letter-spacing: -0.04em; padding-top: 14px; width: fit-content; }
.fc-unit { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2-soft); padding-top: 6px; }
.fc-title { font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; padding-top: 12px; }
.fc-text { font-size: 15.5px; line-height: 1.55; color: var(--t2-soft); padding-top: 4px; }
.fc-foot { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--t2-line); font-size: 13px; color: var(--t2-soft); }
.fc-foot strong { color: var(--t2-white); font-weight: 600; }
.stage { position: relative; overflow: clip; }
.svc { display: grid; gap: 16px; margin-top: 28px; }
.big-tile { background: var(--t2-grad); color: var(--t2-ink); border-radius: var(--t2-radius); padding: 22px; display: flex; align-items: center; gap: 16px; box-shadow: var(--t2-shadow); }
.big-tile .big-ico { display: flex; flex: 0 0 auto; }
.big-label br { display: none; }
.big-label { font-family: var(--t2-font-display); font-weight: 800; font-size: clamp(26px, 7.4vw, 34px); line-height: 1.05; letter-spacing: -0.02em; }
.fancy-row { display: grid; gap: 14px; }
.fancy-grid { display: grid; gap: 14px; }

/* ---------- gradient banner ---------- */
.promo { position: relative; overflow: hidden; border-radius: var(--t2-radius); padding: 32px 24px; display: grid; gap: 24px; align-items: center; box-shadow: var(--t2-shadow); background: linear-gradient(120deg, var(--t2-primary) 0%, var(--t2-accent) 100%); color: var(--t2-ink); }
.promo::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(rgba(var(--t2-white-rgb),0.35) 0, rgba(var(--t2-white-rgb),0) 70%); pointer-events: none; }
.promo > * { position: relative; z-index: 1; }
.promo-tag { display: inline-block; background: rgba(var(--t2-ink-rgb),0.12); border: 1px solid rgba(var(--t2-ink-rgb),0.3); color: var(--t2-ink); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.promo-title { font-family: var(--t2-font-display); font-weight: 800; font-size: clamp(32px, 8vw, 48px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 12px; }
.promo-text { color: rgba(var(--t2-ink-rgb),0.88); max-width: 520px; font-size: 18px; }
.promo .btn-cta { background: var(--t2-ink); color: var(--t2-white); box-shadow: 0 10px 24px -12px rgba(var(--t2-shade-rgb),0.7); }
.promo .btn-cta:hover { background: var(--t2-deep); }
.promo .btn-cta .arr { color: var(--t2-white); }
.promo .btn-light .arr { color: var(--t2-primary-deep); }

/* ---------- closing band ---------- */
.news { position: relative; color: var(--t2-white); }
/* Home follow band: black-and-white photo seen through soft pink and gold clouds, fading into the page at top and bottom. */
.news-photo { isolation: isolate; overflow: hidden; }
.news-photo::before, .news-photo::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 28%, #000 72%, transparent 100%); }
.news-photo::before { background: var(--photo-news, url('../assets/template-07/follow-bg.jpg')) center 35% / cover no-repeat; opacity: 0.55; }
.news-photo::after { background: radial-gradient(45% 70% at 12% 85%, rgba(var(--t2-accent-rgb),0.55) 0, rgba(var(--t2-accent-rgb),0) 100%), radial-gradient(40% 60% at 38% 20%, rgba(var(--t2-primary-rgb),0.45) 0, rgba(var(--t2-primary-rgb),0) 100%), radial-gradient(50% 80% at 88% 30%, rgba(var(--t2-primary-rgb),0.6) 0, rgba(var(--t2-primary-rgb),0) 100%), radial-gradient(35% 55% at 62% 95%, rgba(var(--t2-accent-rgb),0.4) 0, rgba(var(--t2-accent-rgb),0) 100%), radial-gradient(30% 45% at 70% 55%, rgba(var(--t2-primary-rgb),0.3) 0, rgba(var(--t2-primary-rgb),0) 100%), linear-gradient(90deg, rgba(var(--t2-shade-rgb),0.5) 0, rgba(var(--t2-shade-rgb),0.15) 65%), linear-gradient(rgba(var(--t2-shade-rgb),0.3), rgba(var(--t2-shade-rgb),0.3)); filter: blur(14px); }
.news-photo .news-sub { color: rgba(var(--t2-white-rgb),0.9); }
.news-in { padding: 56px 20px; display: grid; gap: 28px; align-items: center; }
.news-tag { display: inline-block; background: rgba(var(--t2-white-rgb),0.1); border: 1px solid rgba(var(--t2-white-rgb),0.18); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; margin-bottom: 16px; }
.news .promo-title { color: var(--t2-white); margin-bottom: 0; }
.news-sub { margin-top: 12px; color: var(--t2-soft); font-size: 16.5px; max-width: 460px; }
.news-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.news-feats { max-width: 1180px; margin: 0 auto; padding: 56px 20px 0; }
.news-feats .feats { margin-top: 0; }
.news-feats + .news-in { padding-top: 40px; }
@media (min-width: 760px) { .news-feats { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1536px) { .news-feats { max-width: 1320px; } }
/* Phones under 400px: button groups that wrap onto several rows are centred. */
@media (max-width: 399px) { .actions, .news-actions { justify-content: center; } }
@media (min-width: 960px) { .news-actions { justify-content: flex-end; } }

/* ---------- main pick (picks page) ---------- */
.highlight { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--t2-radius); padding: 32px 24px; color: var(--t2-white); border: 1.5px solid transparent; background: linear-gradient(var(--t2-card), var(--t2-card)) padding-box, var(--t2-grad) border-box; box-shadow: var(--t2-shadow), 0 0 60px -26px rgba(var(--t2-primary-rgb),0.6); }
.highlight::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 100% 0, rgba(var(--t2-primary-rgb),0.3) 0, rgba(var(--t2-primary-rgb),0) 70%), radial-gradient(60% 80% at 0 100%, rgba(var(--t2-accent-rgb),0.16) 0, rgba(var(--t2-accent-rgb),0) 70%); }
.highlight-title { font-family: var(--t2-font-display); font-weight: 800; font-size: clamp(30px, 6.4vw, 44px); line-height: 1.05; letter-spacing: -0.03em; margin: 8px 0 14px; max-width: 640px; }
.highlight-text { color: var(--t2-soft); font-size: 18px; max-width: 640px; }
.highlight .actions { margin-top: 22px; }
.highlight-note { font-size: 14px; color: var(--t2-soft); }
@media (min-width: 960px) { .highlight { padding: 44px 48px; } }

/* ---------- inner page banner ---------- */
.page-hero { position: relative; margin-top: calc(var(--t2-head) * -1); padding: calc(var(--t2-head) + 52px) 0 64px; color: var(--t2-white); overflow: hidden; background: radial-gradient(60% 90% at 92% 0, rgba(var(--t2-primary-rgb),0.32) 0, rgba(var(--t2-primary-rgb),0) 70%), radial-gradient(50% 80% at 0 110%, rgba(var(--t2-accent-rgb),0.2) 0, rgba(var(--t2-accent-rgb),0) 70%), var(--t2-ink); }
.page-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(var(--t2-white-rgb),0.08) 1px, transparent 1.6px) 0 0 / 28px 28px; -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 90%); mask-image: linear-gradient(to bottom, #000 0, transparent 90%); }
.page-hero > .wrap { position: relative; }
.page-hero.bg-legal { background: linear-gradient(135deg, color-mix(in srgb, var(--t2-primary-deep) 70%, transparent) 0%, color-mix(in srgb, var(--t2-primary-deep) 12%, transparent) 55%, rgba(var(--t2-accent-rgb),0.14) 100%), var(--t2-ink); }
.pill { display: inline-block; background: rgba(var(--t2-white-rgb),0.08); border: 1px solid rgba(var(--t2-white-rgb),0.2); color: var(--t2-white); border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.page-hero-title { font-family: var(--t2-font-display); font-weight: 800; font-size: clamp(36px, 9vw, 60px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 14px; max-width: 760px; }
.page-hero-sub { font-size: 19px; line-height: 1.6; color: var(--t2-soft); max-width: 640px; }
.page-hero-sub strong { color: var(--t2-white); }
.age-note { margin-top: 20px; font-size: 15px; font-weight: 500; line-height: 1.4; color: rgba(var(--t2-white-rgb),0.9); }
.age-note strong { font-weight: 800; margin-right: 6px; color: var(--t2-accent); }
.stats-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 30px; max-width: 760px; }
.stat-box { background: rgba(var(--t2-white-rgb),0.06); border: 1px solid rgba(var(--t2-white-rgb),0.16); border-radius: var(--t2-radius); padding: 18px 20px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.stat-box .t-n { font-size: 40px; width: fit-content; }
.stat-box .t-l { color: var(--t2-soft); font-weight: 600; }

/* creator card: a monogram until the prospect supplies an avatar */
.portrait-mark { position: relative; margin: 0; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; border-radius: 20px; display: grid; place-items: center; overflow: hidden; border: 1.5px solid transparent; background: radial-gradient(70% 70% at 80% 10%, rgba(var(--t2-primary-rgb),0.4) 0, rgba(var(--t2-primary-rgb),0) 70%), radial-gradient(60% 60% at 10% 100%, rgba(var(--t2-accent-rgb),0.26) 0, rgba(var(--t2-accent-rgb),0) 70%), linear-gradient(var(--t2-card), var(--t2-card)) padding-box, var(--t2-grad) border-box; box-shadow: var(--t2-shadow); justify-self: center; }
.about-photo { position: relative; margin: 0; width: 100%; max-width: 380px; justify-self: center; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; border: 1.5px solid transparent; background: linear-gradient(var(--t2-card), var(--t2-card)) padding-box, var(--t2-grad) border-box; box-shadow: var(--t2-shadow); }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-mark b { font-family: var(--t2-font-display); font-weight: 800; font-size: 118px; line-height: 1; letter-spacing: -0.06em; }
.portrait-mark figcaption { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2-soft); }
.portrait-mark .sparkle { z-index: 1; }

/* ---------- about ---------- */
.timeline { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.tl-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; background: var(--t2-card); border: 1px solid var(--t2-line); border-radius: var(--t2-radius); font-size: 16px; }
.tl-row span:first-child { color: var(--t2-soft); }
.tl-row span:last-child { font-weight: 700; text-align: right; }
.bio-quote { margin: 22px 0 0; padding: 18px 20px; border-radius: var(--t2-radius); border-left: 4px solid var(--t2-primary); background: rgba(var(--t2-white-rgb),0.05); font-family: var(--t2-font-display); font-weight: 600; font-size: 20px; line-height: 1.35; letter-spacing: -0.01em; }
.bio-quote cite { display: block; margin-top: 8px; font-family: var(--t2-font-body); font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2-soft); }
.fmt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.fmt-n { font-family: var(--t2-font-mono); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.04em; grid-row: 1 / span 2; }

/* ---------- responsible gambling + legal ---------- */
.legal-grid { display: grid; gap: 28px; align-items: start; }
.legal-toc { display: none; }
.legal-toc-label { font-size: 13px; font-weight: 700; color: var(--t2-soft); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; }
.legal-toc-nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--t2-line); }
.legal-toc-link { padding: 9px 16px; font-size: 15.5px; color: var(--t2-soft); border-left: 2px solid transparent; margin-left: -1px; transition: color var(--t2-t-fast) var(--t2-ease), border-color var(--t2-t-fast) var(--t2-ease); }
.legal-toc-link:hover { color: var(--t2-white); }
.legal-toc-link.is-active { color: var(--t2-accent); border-left-color: var(--t2-accent); font-weight: 600; }
.legal-body { max-width: 760px; }
.legal-intro { font-size: 18.5px; line-height: 1.7; color: var(--t2-soft); margin-bottom: 36px; }
.legal-h { font-family: var(--t2-font-display); font-weight: 800; font-size: clamp(24px, 5vw, 31px); line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 14px; scroll-margin-top: calc(var(--t2-head) + 24px); }
.legal-text { font-size: 17px; line-height: 1.75; color: var(--t2-soft); margin-bottom: 20px; }
.legal-text a, .legal-intro a, .legal-list a { text-decoration: underline; text-underline-offset: 3px; color: var(--t2-white); font-weight: 600; }
.legal-text a:hover, .legal-intro a:hover, .legal-list a:hover { color: var(--t2-accent); }
.legal-list { padding-left: 22px; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 17px; line-height: 1.65; color: var(--t2-soft); }
.legal-list strong { color: var(--t2-white); }
.legal-block { margin-bottom: 52px; }
.tool-cards { display: grid; gap: 14px; margin: 18px 0 8px; }
.tool-card { background: var(--t2-card); border: 1px solid var(--t2-line); border-radius: var(--t2-radius); padding: 22px; box-shadow: var(--t2-shadow); display: flex; flex-direction: column; gap: 8px; }
.tool-card .ico { margin-bottom: 4px; }
.tool-card-link { margin-top: auto; padding-top: 8px; font-size: 15.5px; font-weight: 700; color: var(--t2-accent); text-decoration: underline; text-underline-offset: 3px; }
.helpline { border-radius: var(--t2-radius); padding: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 22px 0 0; border: 1.5px solid transparent; background: linear-gradient(135deg, rgba(var(--t2-primary-rgb),0.16), rgba(var(--t2-accent-rgb),0.08)) padding-box, linear-gradient(var(--t2-card), var(--t2-card)) padding-box, var(--t2-grad) border-box; }
.helpline-text { flex: 1; min-width: 220px; }
.helpline-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t2-accent); margin-bottom: 6px; }
.helpline-num { font-family: var(--t2-font-mono); font-weight: 800; font-size: 31px; letter-spacing: -0.03em; color: var(--t2-white); }
.helpline-note { font-size: 15.5px; line-height: 1.55; color: var(--t2-soft); max-width: 360px; }

/* ---------- multi-leg card (picks page) ---------- */
.list-card { margin-top: 56px; padding: 28px 20px; border-radius: var(--t2-radius); color: var(--t2-white); box-shadow: var(--t2-shadow); border: 1.5px solid transparent; background: radial-gradient(70% 60% at 100% 0, rgba(var(--t2-primary-rgb),0.26) 0, rgba(var(--t2-primary-rgb),0) 70%), radial-gradient(60% 60% at 0 100%, rgba(var(--t2-accent-rgb),0.16) 0, rgba(var(--t2-accent-rgb),0) 70%), linear-gradient(var(--t2-card), var(--t2-card)) padding-box, var(--t2-grad) border-box; }
.list-card-title { font-family: var(--t2-font-display); font-weight: 800; font-size: clamp(28px, 7vw, 42px); line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 12px; }
.list-card-text { color: var(--t2-soft); font-size: 17.5px; max-width: 980px; }
.list-card-pill { display: inline-block; margin: 16px 0 14px; padding: 8px 16px; border-radius: 999px; background: var(--t2-grad); color: var(--t2-ink); font-size: 14.5px; font-weight: 800; letter-spacing: 0.02em; }
.list-card-rows { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.list-card-rows li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; border-radius: 10px; background: rgba(var(--t2-white-rgb),0.06); border: 1px solid var(--t2-line); font-weight: 700; font-size: 17px; }
.list-card-rows li b { font-family: var(--t2-font-mono); font-weight: 800; font-size: 19px; }
.list-card-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 20px; }
.list-card-note { font-size: 14px; color: var(--t2-soft); }
@media (min-width: 760px) { .list-card { padding: 36px 32px; } }

/* ---------- footer ---------- */
.footer { background: var(--t2-deep); color: var(--t2-white); padding: 56px 0 84px; border-top: 1px solid var(--t2-line); }
.footer-cols { display: grid; gap: 28px; }
.footer-tag { margin-top: 14px; font-size: 15.5px; color: var(--t2-soft); max-width: 300px; }
.footer-h { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t2-accent); margin-bottom: 12px; }
.footer-link { display: block; padding: 4px 0; font-size: 16px; color: rgba(var(--t2-white-rgb),0.88); transition: color var(--t2-t-fast) var(--t2-ease); }
.footer-link:hover, .footer-link.is-current { color: var(--t2-accent); text-decoration: none; }
.rg { display: flex; gap: 18px; align-items: flex-start; margin-top: 36px; padding: 22px; border: 1px solid rgba(var(--t2-white-rgb),0.16); border-radius: var(--t2-radius); background: rgba(var(--t2-white-rgb),0.04); }
.rg-badge { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--t2-accent); color: var(--t2-accent); display: grid; place-items: center; font-weight: 800; font-size: 16.5px; }
.rg-text { font-size: 15px; line-height: 1.6; color: rgba(var(--t2-white-rgb),0.85); }
.rg-text strong { color: var(--t2-white); }
.rg-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.rg-todo { color: var(--t2-accent); font-size: 15px; }
.rg-line { margin-top: 10px; font-size: 15px; color: rgba(var(--t2-white-rgb),0.85); }
.powered-rule { height: 0; margin: 20px 0 0; border: 0; border-top: 1px solid rgba(var(--t2-white-rgb),0.16); }
.powered { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 14.5px; color: rgba(var(--t2-white-rgb),0.7); }
.powered-link { display: inline-flex; border-radius: 4px; transition: opacity var(--t2-t-fast) var(--t2-ease); }
.powered-link:hover { opacity: 0.8; }
.powered-link:focus-visible { outline: 2px solid var(--t2-white); outline-offset: 4px; }
.powered img { display: block; height: 24px; width: auto; }
.disclaimer { margin-top: 24px; font-size: 13px; line-height: 1.6; color: rgba(var(--t2-white-rgb),0.7); max-width: 900px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(var(--t2-white-rgb),0.14); font-size: 14px; color: rgba(var(--t2-white-rgb),0.7); }

/* ---------- tablet ---------- */
@media (min-width: 640px) {
  .wrap { padding: 0 32px; }
  .mobile-menu { padding-bottom: 32px; }
  .cards-2 { grid-template-columns: 1fr 1fr; }
  .minis { grid-template-columns: repeat(4, 1fr); }
  .feats { grid-template-columns: 1fr 1fr; }
  .footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .fancy-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .tool-cards { grid-template-columns: 1fr 1fr; }
  .news-in { padding: 72px 32px; }
  .promo { padding: 44px 40px; }
  .fancy-row { grid-template-columns: 1fr 1fr; }
  .fancy-row .fancy-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 760px) { .header-cta-group { display: flex; } .portrait-mark { justify-self: start; } }

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  .promo { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; }
  .hero { padding-top: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 64px; padding-top: calc(var(--t2-head) + 24px); padding-bottom: 56px; }
  .hero-copy { position: relative; z-index: 3; }
  .sec { padding: 84px 0; }
  .split { grid-template-columns: 1fr 1fr; gap: 56px; }
  .about-photo { justify-self: end; max-width: 400px; }
  .feats-4 { grid-template-columns: repeat(4, 1fr); }
  .feats-3 { grid-template-columns: repeat(3, 1fr); }
  .op-grid { grid-template-columns: 1fr 1fr; }
  .op-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px; grid-template-areas: "logo name cta" "logo body cta"; column-gap: 28px; row-gap: 4px; align-items: center; padding: 26px 28px; }
  .op-featured .op-head { display: contents; }
  .op-featured .op-logo { grid-area: logo; width: 150px; height: 64px; }
  .op-featured .op-name { grid-area: name; align-self: end; font-size: 23px; }
  .op-featured .op-body { grid-area: body; align-self: start; }
  .op-featured .op-cta { grid-area: cta; margin-top: 0; align-self: center; justify-self: center; }
  .fancy-grid { grid-template-columns: repeat(2, 1fr); }
  .fancy-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .news-in { grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1180px; margin: 0 auto; padding: 84px 32px; }
  .stats-grid { gap: 14px; }
  .legal-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; }
  .legal-toc { display: block; position: sticky; top: 100px; align-self: start; }
  .tool-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .about-split { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
  .page-hero { padding: calc(var(--t2-head) + 72px) 0 88px; }
}
@media (min-width: 1100px) {
  .header-nav { display: flex; margin-left: auto; margin-right: 8px; gap: 22px; }
  .hamburger-button, .mobile-menu, .mobile-menu.is-open { display: none; }
  .logo { margin-right: 0; }
  .logo-img { height: 56px; }
  .tool-cards-4 { grid-template-columns: repeat(4, 1fr); }
  .svc { grid-template-columns: 230px minmax(0, 1fr); }
  .svc .big-tile { min-height: 100%; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 22px; }
  .big-label br { display: inline; }
  .fancy-row { grid-template-columns: repeat(3, 1fr); }
  .fancy-row .fancy-tile:last-child:nth-child(odd) { grid-column: auto; }
}
@media (min-width: 1536px) { .wrap { max-width: 1320px; } .news-in { max-width: 1320px; } }

/* The narrowest phones (320 to 359px): a tighter header so the logo and the menu button fit on one line. */
@media (max-width: 359px) {
  .header-inner { gap: 8px; }
  .logo { min-width: 0; }
  .logo-img { height: 42px; }
  .hamburger-button { width: 40px; height: 40px; }
}

/* Home board: four tiles, 2 x 2 until there is room for a row of four. */
.fancy-row-4 { margin-top: 28px; }
@media (min-width: 1100px) { .fancy-row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Not in the reference: the name set as a wordmark when a site has no logo picture (the wizard's output), in the display face. */
.logo-wordmark { font-family: var(--t2-font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: 0.01em; color: var(--t2-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(60vw, 320px); }
@media (max-width: 479px) { .logo-wordmark { font-size: 20px; } }