:root {
    --paper: #fafaf9;
    --ink: #15181f;
    --mute: #505967;
    --line: #d9dce0;
    --accent: #a93e14;
    --foam: #f7eee7;
    --white: #fff;
    --night: #101319;
    --orange: #ff814c;
}
body { background: var(--paper); }
.bar, footer { background: var(--night); color: white; }
.bar { border-bottom: 1px solid #33373d; }
.mast { min-height: 68px; }
.mast .brand, .footer .brand { gap: .24em; letter-spacing: -.055em; color: #fff; font-weight: 650; }
.brand b { color: #ffa075; }
.brand .brandmark {
    border: 0; border-radius: 8px; background: var(--orange); color: #17191c;
    width: 32px; height: 32px; margin-right: 5px; transform: skewX(-8deg);
}
.brandmark svg { width: 17px; height: 17px; transform: skewX(8deg); }
.mast .nav-cta { border: 1px solid #7b7e84; padding: 9px 18px; }
.mast .nav-cta:hover { color: var(--night); background: var(--orange); }
.menu-button { color: white; border-color: #5f636a; }
.button, .hero-actions .button {
    background: var(--orange); color: var(--night); border: 1px solid transparent; border-radius: 7px;
    font-weight: 800; padding: 12px 19px; text-decoration: none;
}
.button:hover { background: #ffa378; color: var(--night); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #318ed3; outline-offset: 3px; }

.stadion { position: relative; isolation: isolate; overflow: hidden; background: #10131a; color: white; }
.wedstrijd, .wedstrijd img, .stadion::before { position: absolute; inset: 0; width: 100%; height: 100%; }
.wedstrijd { z-index: -2; }
.wedstrijd img { object-fit: cover; object-position: right 12%; }
.stadion::before {
    content: ""; z-index: -1;
    background: linear-gradient(90deg, #0c1018f5 0%, #0c1018dd 24%, #0c1018a3 43%, #0c101820 63%, transparent 78%);
}
.hero-tekst { padding-block: clamp(55px,7vw,106px); }
.hero-tekst h1 {
    max-width: 10.5ch; margin: 0; font-weight: 800; font-size: clamp(64px,6.5vw,104px);
    line-height: .99; letter-spacing: -.065em; text-wrap: balance;
}
.hero-tekst > p { max-width: 39ch; color: #f1f1f2; margin: 20px 0 0; font-size: clamp(16px,1.4vw,20px); }
.hero-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; align-items: center; }
.hero-actions .ghost { color: #fff; background: #141820ba; border: 1px solid #a3a4a9; }
.hero-actions .ghost:hover { background: #343a44; }
.hero-tekst .starting-price { font-size: 14px; color: #d5d7dc; margin-top: 16px; }
.starting-price strong { color: white; margin-left: 6px; }

.genre-section { background: var(--night); color: white; padding: 34px 0 42px; }
.shop-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px 28px; margin-bottom: 21px; }
.shop-heading h2, .home-help h2 {
    font: 800 clamp(28px,3.25vw,46px)/1.1 Manrope,Arial,sans-serif; letter-spacing: -.052em; margin: 0;
}
.shop-heading p { color: var(--mute); margin: 7px 0 0; }
.genre-section .shop-heading p, .trial-band .trial-steps p { color: #c8cbd2; }
.shop-heading .textlink { flex-shrink: 0; text-underline-offset: 5px; }
.genre-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.genre-tile { position: relative; display: block; aspect-ratio: 1.68; isolation: isolate;
    overflow: hidden; border-radius: 9px; background: #252931; color: #fff; text-decoration: none; }
.genre-tile img, .genre-tile::after { position: absolute; inset: 0; width: 100%; height: 100%; }
.genre-tile img { object-fit: cover; z-index: -2; transition: transform .25s ease; }
.genre-tile::after { z-index: -1; content: ""; background: linear-gradient(0deg,#060810ed, #090c1280 40%,transparent 85%); }
.genre-tile:hover img { transform: scale(1.035); }
.genre-label { position: absolute; left: 16px; bottom: 14px; right: 33px; line-height: 1.25; }
.genre-label strong { display: block; font-size: clamp(18px,1.65vw,25px); letter-spacing: -.04em; }
.genre-label small { display: block; margin-top: 3px; color: #ececf0; font-weight: 600; font-size: 12px; }
.genre-arrow { position: absolute; right: 13px; bottom: 14px; font-size: 19px; }

.shop-section { padding-block: clamp(40px,5vw,72px); }
.plan-picker { margin-block: 18px; }
.screen-choice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; font-weight: 750; margin-bottom: 16px; }
.screen-choice select { max-width: 100%; padding: 9px 26px 9px 12px; color: var(--ink); background: white; border: 1px solid #a7adb4; border-radius: 6px; }
.offers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.offer { background: #fff; border: 1px solid #cdd0d5; padding: clamp(17px,2vw,30px); border-radius: 11px; }
.offer.annual { border-top: 3px solid #f47841; padding-top: calc(clamp(17px,2vw,30px) - 2px); background: #fff7f2; }
.offer h3 { font-size: 23px; letter-spacing: -.045em; margin: 0; line-height: 1.15; }
.offer p, .offer small { color: var(--mute); font-size: 14px; }
.offer p { margin: 6px 0 17px; }
.offer-price { display: flex; gap: 8px; align-items: baseline; }
.offer-price strong { font-size: clamp(30px,3vw,46px); line-height: 1.1; letter-spacing: -.065em; }
.offer-price span, .price-note { color: var(--mute); font-size: 13px; }
.offer small { display: block; margin-top: 5px; }
.offer button { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 21px;
    padding: 10px 14px; min-height: 44px; background: var(--ink); color: white; border: 0; border-radius: 6px; font-weight: 750; }
.offer button:hover { background: #414550; }
.offer.annual button { background: var(--orange); color: var(--ink); }
.trial-band { padding-block: clamp(38px,5vw,64px); background: #20252d; color: white; }
.trial-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 0; margin: 19px 0 0; list-style: none; counter-reset: fase; }
.trial-steps li { counter-increment: fase; border-top: 1px solid #737a83; padding-top: 14px; }
.trial-steps li::before { content: counter(fase) "."; color: #a6421e; font-weight: 800; margin-right: 8px; }
.trial-band .trial-steps li::before { color: #ffa171; }
.trial-steps strong { font-size: 17px; }
.trial-steps p { margin: 5px 0 0; color: var(--mute); font-size: 14px; }
.trial-intro { margin-block: 20px 24px; }
.trial-intro > .textlink { margin-left: 12px; }
.inner h1 { font-family: Manrope,Arial,sans-serif; font-weight: 800; letter-spacing: -.06em; font-size: clamp(39px,5vw,67px); }
.inner .prose h2 { font-weight: 800; }
.device-guides .guide { border-radius: 9px; background: white; border-top: 3px solid #f59767; }
.device-guides .guide h3 { margin-top: 0; }
.home-help h2 { margin-bottom: 18px; }
.footer section { display: grid; align-content: start; gap: 7px; font-size: 14px; }
.footer section strong { color: #fbb18b; font-size: 13px; }
.footer { display: grid; grid-template-columns: 1.8fr 1fr 1fr; align-items: start; padding-block: 40px; }
.footer .brand { display: inline-flex; }
.footer p { color: #c1c6ce; }
.prose figure.wp-block-image { margin: 24px 0; }
.prose figure.wp-block-image img { display: block; max-width: 100%; height: auto; }

@media (max-width: 850px) {
    .genre-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 780px) {
    .mast { min-height: 60px; }
    .mast nav.open { background: var(--night); border-color: #444953; }
    .mast .nav-cta { border: 0; padding-left: 0; }
    .shop-heading { align-items: start; flex-wrap: wrap; }
    .offers { grid-template-columns: 1fr; gap: 10px; }
    .offer { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: start; }
    .offer h3, .offer p { grid-column: 1; }
    .offer p { margin-bottom: 0; }
    .offer-price { grid-column: 2; grid-row: 1; }
    .offer small { grid-column: 2; grid-row: 2; font-size: 12px; text-align: right; max-width: 17ch; }
    .offer button { grid-column: 1/-1; margin-top: 13px; }
    .trial-steps { grid-template-columns: 1fr; gap: 10px; }
    .trial-steps li { padding-top: 10px; }
    .footer { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer > div { grid-column: 1/-1; }
}
@media (max-width: 700px) {
    .hero-tekst { padding-block: clamp(172px,48vw,240px) 30px; }
    .hero-tekst h1 { max-width: 13ch; font-size: clamp(46px,10.8vw,66px); }
    .wedstrijd img { object-position: center top; height: 79%; }
    .stadion::before { background: linear-gradient(0deg,#10131a 4%,#10131afa 24%,#10131adb 39%,#10131a80 56%,transparent 76%); }
    .hero-tekst > p { margin-top: 10px; line-height: 1.45; }
    .hero-actions { gap: 8px; margin-top: 16px; }
    .hero-actions .button { font-size: 14px; padding: 10px 12px; min-height: 44px; gap: 6px; }
    .hero-tekst .starting-price { margin-top: 12px; }
    .genre-section { padding-block: 25px 30px; }
    .genre-section .shop-heading { margin-bottom: 14px; }
    .genre-grid { gap: 9px; }
    .genre-tile { aspect-ratio: 1.35; }
    .genre-label { left: 10px; right: 22px; bottom: 10px; }
    .genre-label small { font-size: 11px; }
    .genre-arrow { right: 7px; bottom: 8px; }
    .screen-choice { gap: 6px 12px; }
}
@media (max-width: 360px) {
    .inner h1 { font-size: 34px; hyphens: auto; overflow-wrap: anywhere; }
    .hero-actions .button { font-size: 13px; padding-inline: 9px; }
    .genre-label strong { font-size: 15px; }
    .genre-label small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .genre-tile img { transition: none; }
}

.offer-price strong{white-space:nowrap}