/* ============================================================
   SureBetAffiliates — v4 "Betting Slip"
   Cream ticket paper / racing green felt / rubber-stamp red
   Type: Archivo variable CONDENSED (display) + Space Grotesk
   ============================================================ */

:root {
    --cream:      #FAF5E4;
    --paper:      #FFFDF2;
    --ink:        #131711;
    --ink-soft:   #4E5347;
    --ink-faint:  #83836F;
    --green:      #0B5138;   /* saturated racing green */
    --green-deep: #06352A;
    --green-soft: #9ED0B8;
    --red:        #FF4A21;   /* hot tangerine — stamps & alarms */
    --lime:       #D6FF2E;   /* acid lime — the wild one, cranked */
    --lime-hot:   #EBFF57;   /* highlight lime */
    --pink:       #FF4FB2;   /* electric magenta — rare pop */
    --cyan:       #34E5D0;   /* acid teal — rare pop */
    --gold:       var(--lime);
    --line:       rgba(19, 23, 17, .17);

    /* animated pattern tiles */
    --dots-ink:  radial-gradient(rgba(19,23,17,.14) 1.6px, transparent 1.7px);
    --dots-lime: radial-gradient(rgba(214,255,46,.16) 1.6px, transparent 1.7px);
    --grid-ink:  linear-gradient(rgba(19,23,17,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(19,23,17,.06) 1px, transparent 1px);

    --ease: cubic-bezier(.2, .6, .2, 1);
    --bounce: cubic-bezier(.34, 1.56, .64, 1);

    --font-disp: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-lab:  "Space Grotesk", "Archivo", Arial, sans-serif;

    --wrap: 1220px;
    --hdh: 74px;
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-disp);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip;
    padding-top: var(--hdh);
    -webkit-font-smoothing: antialiased;
}

/* paper grain over everything — one quiet film that ties the page together */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--lime); color: var(--ink); }

:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    z-index: 200; padding: 12px 18px;
    background: var(--ink); color: var(--cream);
    font-family: var(--font-lab); font-size: 12px;
    text-transform: uppercase; letter-spacing: .12em;
}
.skip-link:focus { left: 0; }

.wrap {
    width: min(100% - clamp(36px, 6vw, 84px), var(--wrap));
    margin-inline: auto;
}

/* ---------- highlight block ---------- */

.mk {
    position: relative;
    display: inline-block;
    background: var(--lime);
    color: var(--green-deep);
    padding: .01em .18em .07em;
    border-radius: 8px;
    transform: rotate(-1.2deg);
    box-shadow: 4px 5px 0 rgba(19, 23, 17, .22);
    overflow: hidden;
    isolation: isolate;
}
/* diagonal sheen that sweeps across every highlight forever */
.mk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 66%);
    transform: translateX(-120%);
    animation: sheen 4.2s var(--ease) infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 80%, 100% { transform: translateX(120%); } }

/* ---------- rubber stamp ---------- */

.stamp {
    display: inline-block;
    font-family: var(--font-lab);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red);
    border: 2px solid currentColor;
    border-radius: 9px;
    padding: 8px 13px 7px;
    outline: 1.5px solid currentColor;
    outline-offset: -6px;
    transform: rotate(-5deg);
    white-space: nowrap;
}
.stamp-corner {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 3;
    transform: rotate(7deg);
    background: rgba(251, 247, 234, .82);
}
.stamp-cashed {
    position: absolute;
    top: 18px; right: 18px;
    transform: rotate(-8deg);
    opacity: .9;
}

/* ---------- betting-slip ticket ---------- */

.ticket {
    --hole-bg: var(--cream);
    position: relative;
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 16px 34px -20px rgba(28, 23, 16, .3);
    padding: 24px 22px 16px;
}
.slab .ticket { --hole-bg: var(--green); }

/* clean perforation line only — no floating notch circles to misalign */
.ticket-tear {
    position: relative;
    height: 0;
    border-top: 2px dashed rgba(28, 23, 16, .28);
    margin: 18px -22px 0;
}

.ticket-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 13px;
}
.ticket-no {
    font-family: var(--font-lab);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(28, 23, 16, .55);
}
.barcode {
    width: 110px;
    height: 24px;
    flex: none;
    opacity: .75;
    background: repeating-linear-gradient(90deg,
        var(--ink) 0 2px, transparent 2px 4px,
        var(--ink) 4px 7px, transparent 7px 9px,
        var(--ink) 9px 10px, transparent 10px 14px,
        var(--ink) 14px 15px, transparent 15px 17px);
}

/* ---------- buttons (pill) ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 32px;
    font-family: var(--font-lab);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 2px solid transparent;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color .3s var(--ease), color .3s var(--ease),
                border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:hover { transform: translateY(-2px); }
.btn-s { padding: 10px 22px; font-size: 11px; }

.btn-green { background: var(--green); border-color: var(--green); color: var(--cream); }
.btn-green:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }

.btn-lime { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn-lime:hover { background: var(--green); border-color: var(--green); color: var(--lime); }

.btn-red { background: var(--red); border-color: var(--red); color: #FFF6EC; }
.btn-red:hover { background: var(--ink); border-color: var(--ink); color: var(--lime); }

.btn-line { background: transparent; border-color: rgba(28, 23, 16, .35); color: var(--ink); }
.btn-line:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ---------- logo (typographic) ---------- */

.logo { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; }
.logo-mark {
    width: 36px;
    height: auto;
    flex: none;
    filter: drop-shadow(2px 3px 0 rgba(19,23,17,.18));
    transition: transform .4s var(--bounce);
}
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.06); }
.logo-text { display: flex; flex-direction: column; gap: 3px; }
.logo-word {
    font-family: var(--font-disp);
    font-size: 21px;
    font-weight: 800;
    font-variation-settings: "wdth" 94, "wght" 830;
    letter-spacing: .02em;
    line-height: 1;
    color: var(--ink);
}
.logo-word i { font-style: normal; color: var(--red); margin-left: 1px; }
.logo-sub {
    font-family: var(--font-lab);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink-faint);
    line-height: 1;
}

/* ---------- header ---------- */

.hd {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 80;
    background: var(--cream);
    transition: box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.hd.scrolled {
    background: rgba(245, 239, 223, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 1.5px 0 var(--line);
}

.hd-inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.6vw, 32px);
    height: var(--hdh);
}

.hd-badges { display: flex; gap: 9px; margin-left: auto; }
.hd-badge {
    font-family: var(--font-lab);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 7px 13px 6px;
    white-space: nowrap;
}

.hd-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.hd-badges + .hd-actions { margin-left: clamp(16px, 2.6vw, 32px); }

.hd-login {
    font-family: var(--font-lab);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .25s var(--ease);
}
.hd-login:hover { text-decoration: underline 2.5px var(--red); text-underline-offset: 6px; }

/* menu-open: header melts into the menu, logo goes cream */
body.menu-open .hd { z-index: 95; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.menu-open .hd-badges,
body.menu-open .hd-login,
body.menu-open .hd .btn-green { opacity: 0; pointer-events: none; }
body.menu-open .logo-word { color: var(--cream); }
body.menu-open .logo-sub { color: var(--green-soft); }

/* ---------- burger (green chip) ---------- */

.burger {
    position: relative;
    width: 46px; height: 46px;
    flex: none;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 4px 0 rgba(19, 23, 17, .25);
    transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.burger:hover { transform: scale(1.08) rotate(6deg); box-shadow: 0 2px 0 rgba(19, 23, 17, .25); }
.burger span {
    position: absolute;
    left: 13px; right: 13px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform .35s var(--ease), top .35s var(--ease), background-color .3s var(--ease);
}
.burger span:nth-child(1) { top: 18px; }
.burger span:nth-child(2) { top: 26px; }

body.menu-open .burger { background: var(--red); }
body.menu-open .burger span { background: #FFF6EC; }
body.menu-open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

/* ---------- fullscreen circle menu ---------- */

.menu {
    position: fixed;
    inset: 0;
    z-index: 90;
    background:
        radial-gradient(90% 70% at 50% 115%, rgba(217, 247, 58, .16), transparent 60%),
        var(--green-deep);
    clip-path: circle(0px at var(--mx, calc(100% - 90px)) var(--my, 37px));
    visibility: hidden;
    transition: clip-path .75s cubic-bezier(.65, 0, .3, 1), visibility 0s linear .75s;
    overflow-y: auto;
}
body.menu-open .menu {
    clip-path: circle(150vmax at var(--mx, calc(100% - 90px)) var(--my, 37px));
    visibility: visible;
    transition: clip-path .75s cubic-bezier(.65, 0, .3, 1);
}
body.menu-open { overflow: hidden; }

.menu-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 110px 24px 48px;
}

.menu-links { counter-reset: m; }
.menu-links li {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s var(--ease), transform .45s var(--ease);
}
body.menu-open .menu-links li { opacity: 1; transform: none; }

.menu-links a {
    display: inline-flex;
    align-items: baseline;
    gap: 16px;
    padding: 6px 10px;
    font-family: var(--font-disp);
    font-size: clamp(29px, 6vw, 54px);
    font-weight: 800;
    font-variation-settings: "wdth" 78, "wght" 820;
    text-transform: uppercase;
    line-height: 1.12;
    color: var(--cream);
    transition: color .25s var(--ease), letter-spacing .25s var(--ease);
}
.menu-links a em {
    font-style: normal;
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .22em;
    color: var(--gold);
}
.menu-links a:hover { color: var(--gold); letter-spacing: .015em; }

.menu-foot {
    margin-top: clamp(28px, 4.5vh, 48px);
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
    justify-content: center;
}
.menu-foot a {
    font-family: var(--font-lab);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--green-soft);
    transition: color .25s var(--ease);
}
.menu-foot a:hover { color: var(--cream); }

/* ---------- hero ---------- */

.hero {
    position: relative;
    z-index: 1;                 /* let the bleed sit over the ticker below */
    min-height: clamp(560px, 82vh, 860px);
    display: flex;
    align-items: center;
    overflow: visible;          /* image flies out top & bottom */
    padding-block: clamp(28px, 4vw, 60px);
}
/* soft acid glow washing the whole hero */
.hero::before {
    content: "";
    position: absolute;
    inset: -20% -10% auto auto;
    width: 60vw; height: 60vw;
    max-width: 760px; max-height: 760px;
    background: radial-gradient(circle, rgba(214,255,46,.5), transparent 62%);
    filter: blur(30px);
    z-index: 0;
    pointer-events: none;
    animation: heroGlow 9s ease-in-out infinite alternate;
}
@keyframes heroGlow { to { transform: translate(-6%, 5%) scale(1.12); } }

.hero-art {
    position: absolute;
    z-index: 0;
    top: calc(-1 * var(--hdh) - 6px);   /* bleed up to the very top */
    bottom: clamp(-70px, -5vw, -44px);  /* bleed down into the ticker */
    right: 0;
    width: min(62vw, 900px);
    /* torn-paper left edge: the casino scene rips into the cream background.
       feTurbulence roughens the mask edge so it reads as a torn strip, not a box */
    -webkit-mask: var(--torn);
            mask: var(--torn);
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
:root {
    --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='800' preserveAspectRatio='none'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.032' numOctaves='2' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='72'/%3E%3C/filter%3E%3Crect x='78' y='-40' width='560' height='880' fill='%23fff' filter='url(%23t)'/%3E%3C/svg%3E");
}
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* soft feather so the torn edge melts rather than stamps */
.hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(100deg, var(--cream) 2%, rgba(250,245,228,0) 20%);
}
.stamp-hero {
    position: absolute;
    z-index: 3;
    top: clamp(90px, 12vh, 150px); right: clamp(20px, 3vw, 48px);
    background: rgba(251, 247, 234, .9);
    transform: rotate(9deg);
    animation: stampIn .6s var(--bounce) .5s both;
}
.hero-tag {
    position: absolute;
    z-index: 3;
    left: 22%; bottom: clamp(30px, 6vw, 70px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(19,23,17,.72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    padding: 11px 14px;
    border-radius: 10px;
}
.hero-tag .ticket-no { color: rgba(255,255,255,.86); }
.hero-tag .barcode { width: 130px; height: 22px; background: repeating-linear-gradient(90deg,
    #fff 0 2px, transparent 2px 4px, #fff 4px 7px, transparent 7px 9px,
    #fff 9px 10px, transparent 10px 14px, #fff 14px 15px, transparent 15px 17px); opacity: .85; }

.hero-star {
    position: absolute;
    z-index: 0;
    left: clamp(-10px, 2vw, 30px); top: clamp(40px, 8vh, 90px);
    font-size: clamp(120px, 16vw, 240px);
    line-height: 1;
    color: var(--lime);
    -webkit-text-stroke: 3px var(--ink);
    opacity: .9;
    pointer-events: none;
    animation: spinStar 26s linear infinite;
}
@keyframes spinStar { to { transform: rotate(360deg); } }

.hero-copy { position: relative; z-index: 2; max-width: 620px; }

.hero-title {
    margin-top: 22px;
    font-family: var(--font-disp);
    font-size: clamp(42px, 5.8vw, 86px);
    font-weight: 800;
    font-variation-settings: "wdth" 80, "wght" 830;
    text-transform: uppercase;
    line-height: .99;
    letter-spacing: .004em;
}

.hero-sub {
    margin-top: 24px;
    color: var(--ink-soft);
    font-size: 16.5px;
    line-height: 1.7;
    max-width: 50ch;
}

.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }

.hero-trust {
    margin-top: 26px;
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.hero-trust::before { content: "— "; color: var(--red); }

.hero-socials { display: flex; gap: 10px; margin-top: 26px; }
.hero-socials a {
    width: 40px; height: 40px;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.hero-socials a:hover { transform: translateY(-3px) rotate(-6deg); border-color: var(--ink); background: var(--paper); }
.soc-at { font-family: var(--font-disp); font-weight: 800; font-size: 16px; line-height: 1; }

@keyframes stampIn { from { opacity: 0; transform: rotate(-30deg) scale(1.8); } }

/* ---------- odds ticker ---------- */

.odds {
    background: var(--green);
    border-block: 2.5px solid var(--green-deep);
    overflow: hidden;
}
.odds-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.odds-group { display: flex; align-items: center; padding: 12px 0; }
.odds-item {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 clamp(18px, 2.4vw, 32px);
    font-family: var(--font-lab);
    font-size: 13px;
    font-weight: 500;
    color: #CFE3D6;
    white-space: nowrap;
}
.odds-item b {
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cream);
}
.odds-item i { font-style: normal; font-size: 10px; }
.odds-item i.up { color: var(--gold); }
.odds-item i.flat { color: var(--green-soft); }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */

.sec { padding-block: clamp(70px, 8.5vw, 114px); position: relative; }
.sec-alt {
    position: relative;
    isolation: isolate;
    background: #EDF7C8;
    overflow: hidden;
}
/* drifting ink dot-grid over the lime-tinted section */
.sec-alt::before {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -1;
    background-image: var(--dots-ink);
    background-size: 24px 24px;
    opacity: .6;
    animation: drift 30s linear infinite reverse;
    pointer-events: none;
}

.sec-title {
    font-family: var(--font-disp);
    font-size: clamp(30px, 3.8vw, 52px);
    font-weight: 800;
    font-variation-settings: "wdth" 80, "wght" 830;
    text-transform: uppercase;
    letter-spacing: .004em;
    margin-bottom: clamp(36px, 4.6vw, 58px);
}
/* heading entrance: skew settle with a springy easing */
.sec-title.rv { transform: translateY(24px) skewX(-6deg); }
.sec-title.rv.in {
    transform: none;
    transition: opacity .6s var(--ease), transform .85s var(--bounce);
}

.sec-cta { text-align: center; margin-top: clamp(36px, 4.5vw, 52px); }

/* ---------- the edge ---------- */

.edge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(44px, 5vw, 68px) clamp(28px, 3.4vw, 48px);
}

.edge-item { text-align: center; }

/* big pin-style icon: no border box, a fat colored ring + hard offset shadow.
   the enamel-pin art reads as a sticker; ring/shadow colors rotate per item */
.edge-icon {
    width: clamp(104px, 13vw, 138px);
    height: clamp(104px, 13vw, 138px);
    object-fit: cover;
    border-radius: 30% 70% 62% 38% / 42% 40% 60% 58%;   /* organic blob mask */
    margin: 0 auto clamp(18px, 2vw, 26px);
    box-shadow: 0 0 0 7px var(--paper), 0 0 0 10px var(--ring, var(--lime)),
                10px 12px 0 -1px var(--shade, rgba(214,255,46,.55));
    transform: rotate(var(--tilt, -3deg));
    transition: transform .4s var(--bounce), border-radius .5s var(--ease), box-shadow .4s var(--ease);
}
.edge-item:hover .edge-icon {
    transform: rotate(calc(var(--tilt, -3deg) * -1.6)) scale(1.06);
    border-radius: 50%;
    box-shadow: 0 0 0 7px var(--paper), 0 0 0 10px var(--ring, var(--lime)),
                14px 16px 0 -1px var(--shade, rgba(214,255,46,.7));
}
.edge-item:nth-child(1) { --ring: var(--lime);  --shade: rgba(214,255,46,.55); --tilt: -4deg; }
.edge-item:nth-child(2) { --ring: var(--red);   --shade: rgba(255,74,33,.45);  --tilt: 3deg;  }
.edge-item:nth-child(3) { --ring: var(--green); --shade: rgba(11,81,56,.4);     --tilt: -2deg; }
.edge-item:nth-child(4) { --ring: var(--cyan);  --shade: rgba(52,229,208,.5);   --tilt: 4deg;  }
.edge-item:nth-child(5) { --ring: var(--pink);  --shade: rgba(255,79,178,.4);   --tilt: -3deg; }
.edge-item:nth-child(6) { --ring: var(--lime);  --shade: rgba(214,255,46,.55);  --tilt: 3deg;  }

.edge-item h3 {
    font-size: 18px;
    font-weight: 780;
    font-variation-settings: "wdth" 90, "wght" 780;
    line-height: 1.2;
    margin: 0 auto 9px;
    max-width: 18ch;
}
.edge-body p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.62; max-width: 32ch; margin-inline: auto; }

/* ---------- green slab ---------- */

.slab {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(90% 70% at 88% -12%, rgba(214,255,46,.20), transparent 55%),
        radial-gradient(70% 60% at 6% 110%, rgba(52,229,208,.14), transparent 60%),
        var(--green);
    color: var(--cream);
    border-radius: clamp(20px, 3vw, 34px);
    margin-inline: clamp(8px, 1.4vw, 22px);
    padding-block: clamp(64px, 8vw, 100px);
    overflow: hidden;
}
/* drifting dot pattern so the fill is never flat */
.slab::before {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -1;
    background-image: var(--dots-lime);
    background-size: 26px 26px;
    opacity: .7;
    animation: drift 26s linear infinite;
    pointer-events: none;
}
/* huge ghosted word slid behind the content */
.slab::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px);
    pointer-events: none;
}
@keyframes drift { to { background-position: 260px 130px; } }
.on-green { color: var(--cream); }

/* ---------- counting room ---------- */

.stats-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: clamp(36px, 5vw, 76px);
    align-items: center;
}
.stats-art img {
    width: min(100%, 440px);
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    background: var(--paper);
    padding: 12px;
    box-shadow: 14px 16px 0 -2px var(--lime), 0 24px 44px -22px rgba(0,0,0,.5);
    transform: rotate(-2deg);
    transition: transform .5s var(--bounce);
}
.stats-art img:hover { transform: rotate(1deg) scale(1.02); }

.counters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(32px, 4vw, 52px) clamp(22px, 3vw, 40px);
}
.c-num {
    display: inline-flex;
    align-items: flex-end;
    font-family: var(--font-disp);
    font-size: clamp(44px, 4.4vw, 62px);
    font-weight: 800;
    font-variation-settings: "wdth" 82, "wght" 820;
    line-height: 1;
    color: var(--cream);
}
.c-suf { margin-left: 7px; color: var(--gold); }
.c-label {
    margin-top: 12px;
    font-family: var(--font-lab);
    font-size: 13px;
    font-weight: 500;
    color: var(--green-soft);
}

/* split-flap reels */
.c-val { display: inline-flex; gap: 5px; }
.reel {
    position: relative;
    display: block;
    height: 1.18em;
    padding: .09em .07em;
    overflow: hidden;
    background: var(--green-deep);
    color: var(--lime);
    border-radius: 9px;
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .08), 0 4px 8px -3px rgba(0, 0, 0, .45);
}
.reel::after {
    content: "";
    position: absolute;
    left: 3px; right: 3px;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: rgba(0, 0, 0, .38);
    border-radius: 1px;
    z-index: 2;
}
.reel-strip { display: block; transition: transform 2.3s cubic-bezier(.18, .75, .22, 1); }
.reel-strip b { display: block; height: 1em; line-height: 1; font-weight: inherit; }
.c-sep { display: block; height: 1em; line-height: 1; align-self: flex-end; }

/* ---------- the lines (ticket cards) ---------- */

.lines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.6vw, 30px);
    align-items: stretch;
}

.line-card { display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.line-card:nth-child(1) { transform: rotate(-1.1deg); }
.line-card:nth-child(2) { transform: rotate(.7deg); }
.line-card:nth-child(3) { transform: rotate(-.5deg); }
.line-card:hover {
    transform: rotate(0deg) translateY(-8px);
    box-shadow: 0 26px 44px -22px rgba(28, 23, 16, .4);
}

.lc-tag {
    font-family: var(--font-lab);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red);
}
.lc-name {
    margin-top: 6px;
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 800;
    font-variation-settings: "wdth" 82, "wght" 830;
    text-transform: uppercase;
}
.lc-value { margin: 16px 0 12px; }
.lc-pre {
    display: block;
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 4px;
}
.lc-value strong {
    font-family: var(--font-disp);
    font-size: clamp(38px, 3.6vw, 54px);
    font-weight: 850;
    font-variation-settings: "wdth" 80, "wght" 850;
    text-transform: uppercase;
    line-height: 1;
    color: var(--green);
}
.lc-desc { color: var(--ink-soft); font-size: 14.5px; line-height: 1.62; flex: 1; }
.line-card .ticket-tear { margin-top: 20px; }

.lines-note {
    margin-top: 30px;
    font-family: var(--font-lab);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    text-align: center;
}

/* ---------- today's card (runners) ---------- */

.card-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(30px, 4vw, 56px);
    align-items: start;
}

.runners { border-top: 2.5px solid var(--ink); }
.runner {
    width: 100%;
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    gap: 14px;
    align-items: center;
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1.5px solid var(--line);
    border-radius: 0;
    transition: background-color .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.runner:hover { background: rgba(14, 64, 52, .07); }
.runner.on { background: var(--green); color: var(--cream); transform: translateX(8px); }

.r-num {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--green);
    color: var(--cream);
    display: grid;
    place-items: center;
    font-family: var(--font-disp);
    font-size: 14px;
    font-weight: 800;
    font-variation-settings: "wdth" 84, "wght" 800;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}
.runner.on .r-num { background: var(--lime); color: var(--ink); }

.r-name {
    font-size: 17px;
    font-weight: 780;
    font-variation-settings: "wdth" 88, "wght" 780;
    text-transform: uppercase;
    letter-spacing: .01em;
}
.r-tags {
    font-family: var(--font-lab);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.runner.on .r-tags { color: var(--green-soft); }
.r-new {
    font-family: var(--font-lab);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red);
    border: 1.5px solid currentColor;
    border-radius: 6px;
    padding: 3px 7px 2px;
    transform: rotate(-4deg);
}
.runner.on .r-new { color: var(--gold); }

.card-detail { position: sticky; top: calc(var(--hdh) + 26px); padding: 26px 24px 16px; }
.card-detail.swap { opacity: .15; }
.card-detail { transition: opacity .18s ease; }
.cd-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 0 0 3px var(--ink), 8px 10px 0 -1px var(--lime);
    margin-bottom: 22px;
}
.cd-name {
    font-size: clamp(26px, 2.8vw, 38px);
    font-weight: 800;
    font-variation-settings: "wdth" 82, "wght" 830;
    text-transform: uppercase;
    padding-right: 120px;
}
.cd-desc { margin: 12px 0 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.68; }
.cd-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cd-meta dt {
    font-family: var(--font-lab);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.cd-meta dd {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 720;
    font-variation-settings: "wdth" 92, "wght" 720;
}

/* ---------- winning tickets ---------- */

.tickets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(22px, 3vw, 34px);
}

.quote-ticket { padding: 26px 24px 22px; }
.quote-ticket:nth-child(odd)  { transform: rotate(-1.1deg); }
.quote-ticket:nth-child(even) { transform: rotate(.9deg); }
.quote-ticket { transition: transform .35s var(--ease); }
.quote-ticket:hover { transform: rotate(0) translateY(-5px); }

.qt-no {
    font-family: var(--font-lab);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.quote-ticket p {
    margin: 12px 0 16px;
    font-size: 15.5px;
    line-height: 1.7;
    color: #3C362B;
    max-width: 54ch;
}
.qt-name { font-size: 15px; font-weight: 760; font-variation-settings: "wdth" 92, "wght" 760; }
.qt-role {
    display: block;
    margin-top: 3px;
    font-family: var(--font-lab);
    font-size: 12px;
    color: var(--ink-faint);
}

/* ---------- payout tape ---------- */

.tape {
    background: var(--lime);
    border-block: 2.5px solid var(--ink);
    overflow: hidden;
    transform: rotate(-.6deg) scale(1.01);
}
.tape-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.tape-group { display: flex; align-items: center; padding: 12px 0; }
.tape-group span {
    font-family: var(--font-lab);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
}
.tape-group i {
    font-style: normal;
    color: var(--green);
    margin: 0 22px;
}

/* ---------- rulebook (faq) ---------- */

.faq-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: clamp(30px, 4vw, 60px);
    align-items: start;
}
.faq-list { min-width: 0; }

.faq-side { position: sticky; top: calc(var(--hdh) + 26px); }
.faq-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 0 0 3px var(--ink), 12px 14px 0 -1px var(--lime);
    transform: rotate(1.4deg);
    transition: transform .5s var(--bounce);
}
.faq-card:hover { transform: rotate(-1deg); }
.faq-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.faq-stamp {
    position: absolute;
    left: 16px; bottom: 16px;
    background: rgba(251,247,234,.92);
    transform: rotate(-6deg);
}
.faq-ask {
    display: flex;
    margin-top: 20px;
    width: 100%;
}

.faq-item {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 13px;
    margin-bottom: 12px;
    transition: border-color .3s var(--ease);
}
.faq-item.open { border-color: rgba(14, 64, 52, .55); }

.faq-q {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 18px 20px;
}
.fq-num {
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    color: var(--red);
}
.fq-text {
    font-size: 16px;
    font-weight: 700;
    font-variation-settings: "wdth" 94, "wght" 700;
}
.fx { position: relative; width: 15px; height: 15px; flex: none; transition: transform .4s var(--ease); }
.fx::before, .fx::after { content: ""; position: absolute; background: var(--ink); border-radius: 2px; }
.fx::before { left: 0; right: 0; top: 6.5px; height: 2.5px; }
.fx::after  { top: 0; bottom: 0; left: 6.5px; width: 2.5px; }
.faq-item.open .fx { transform: rotate(45deg); }
.faq-item.open .fx::before, .faq-item.open .fx::after { background: var(--green); }

.faq-a { height: 0; overflow: hidden; transition: height .45s var(--ease); }
.faq-a-in { padding: 0 20px 20px 63px; }
.faq-a-in p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; max-width: 62ch; }

/* ---------- back yourself (apply) ---------- */

.apply-sub {
    margin: -26px 0 40px;
    font-size: 15.5px;
    line-height: 1.7;
    color: #D7E5DC;
    max-width: 52ch;
}

.apply-grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: clamp(34px, 4.5vw, 64px);
    align-items: start;
}

.apply-ticket { padding: 28px 26px 16px; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
}
.field.full { grid-column: 1 / -1; }

.field label {
    display: block;
    font-family: var(--font-lab);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 7px;
}
.field input,
.field select {
    width: 100%;
    background: #FFFEF8;
    border: 1.5px solid rgba(28, 23, 16, .25);
    border-radius: 9px;
    padding: 12px 13px;
    font-size: 15px;
    color: var(--ink);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
    appearance: none;
    -webkit-appearance: none;
}
.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3.5px rgba(14, 64, 52, .16);
}
.field select {
    cursor: pointer;
    padding-right: 34px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%230E4034' stroke-width='2.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}

.hp {
    position: absolute;
    left: -4000px; top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
}

.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
#leadSubmit { min-width: 180px; }
#leadSubmit:disabled { cursor: default; opacity: .8; }
#leadSubmit.is-sent { background: var(--green); border-color: var(--green); color: var(--cream); }

.form-msg { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); min-height: 1em; }
.form-msg.is-error { color: var(--red); }

.form-note {
    margin-top: 16px;
    font-family: var(--font-lab);
    font-size: 10.5px;
    color: var(--ink-faint);
}

.apply-side { display: flex; flex-direction: column; }
.apply-img {
    width: min(100%, 470px);
    margin-inline: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 20px;
    background: var(--paper);
    padding: 12px;
    box-shadow: -14px 16px 0 -2px var(--lime), 0 24px 44px -22px rgba(0,0,0,.5);
    transform: rotate(2deg);
    transition: transform .5s var(--bounce);
}
.apply-img:hover { transform: rotate(-1deg) scale(1.02); }
.apply-contacts {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 18px;
}
.apply-contacts a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-lab);
    font-size: 13px;
    font-weight: 600;
    color: #D7E5DC;
    border-bottom: 1.5px solid rgba(245, 239, 223, .35);
    padding-bottom: 3px;
    transition: border-color .25s var(--ease), color .25s var(--ease);
}
.apply-contacts a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.apply-contacts .soc-at { font-size: 14px; }

/* ---------- footer: the partner receipt ---------- */

.footer {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(80% 55% at 50% 118%, rgba(214,255,46,.16), transparent 60%),
        var(--green-deep);
    color: #D7E5DC;
    padding: clamp(58px, 7.5vw, 96px) 0 46px;
    margin-top: clamp(56px, 7vw, 96px);
    overflow: hidden;
}
.footer::before {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -1;
    background-image: var(--dots-lime);
    background-size: 28px 28px;
    opacity: .55;
    animation: drift 34s linear infinite;
    pointer-events: none;
}

.receipt {
    --s: 20px;                       /* tooth width */
    position: relative;
    width: 100%;
    margin-inline: auto;
    background: var(--paper);
    color: var(--ink);
    padding: clamp(26px, 3vw, 40px) clamp(24px, 3.5vw, 52px);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55);
    /* zigzag torn edges top & bottom, teeth point outward, always aligned */
    -webkit-mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--s) 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--s) 51% repeat-x;
    mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--s) 51% repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--s) 51% repeat-x;
}

.rc-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}
.rc-head .logo { align-items: flex-start; }
.rc-head-mid { text-align: center; }
.rc-title {
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
}
.rc-meta {
    margin-top: 5px;
    font-family: var(--font-lab);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.rc-sep { border-top: 2px dashed rgba(19, 23, 17, .3); margin: clamp(18px, 2vw, 26px) 0; }

.rc-band {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.rc-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px clamp(28px, 4vw, 56px);
}
.rc-links a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
    font-family: var(--font-lab);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .25s var(--ease);
}
.rc-links a i { flex: 1; border-bottom: 2px dotted rgba(19, 23, 17, .32); }
.rc-links a b { font-weight: 700; transition: transform .25s var(--ease); }
.rc-links a:hover { color: var(--green); }
.rc-links a:hover b { transform: translateX(4px); }

.rc-totals { display: flex; flex-direction: column; gap: 9px; }
.rc-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-lab);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.rc-row i { flex: 1; border-bottom: 2px dotted rgba(19, 23, 17, .25); }
.rc-row strong {
    font-family: var(--font-disp);
    font-weight: 800;
    font-variation-settings: "wdth" 86, "wght" 800;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--ink);
}
.rc-row.rc-row--total { font-size: 13.5px; color: var(--ink); }
.rc-row:last-of-type strong {
    font-size: 19px;
    background: var(--lime);
    padding: 2px 10px 4px;
    border-radius: 7px;
    transform: rotate(-1deg);
}
.rc-totals .barcode-wide { margin-top: 10px; }

.rc-socials { display: flex; justify-content: flex-end; gap: 10px; }
.rc-socials a {
    width: 37px; height: 37px;
    border: 1.5px solid rgba(19, 23, 17, .3);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.rc-socials a:hover { background: var(--lime); border-color: var(--ink); transform: rotate(-8deg); }

.rc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.rc-legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rc-legal a {
    font-family: var(--font-lab);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    transition: color .25s var(--ease);
}
.rc-legal a:hover { color: var(--ink); }

.barcode-wide { display: block; width: 100%; max-width: 220px; height: 26px; }

.rc-strip {
    display: flex;
    align-items: center;
    gap: 14px;
}
.rc-copy {
    font-family: var(--font-lab);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.f-seo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 4vw, 60px);
    margin-top: clamp(44px, 5.5vw, 64px);
    padding-top: 0;
}
.f-seo-col h4 {
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 13px;
}
.f-seo-col p { color: #93AC9F; font-size: 13px; line-height: 1.8; margin-bottom: 10px; }

.age-badge {
    width: 36px; height: 36px;
    flex: none;
    border: 2px solid var(--red);
    border-radius: 50%;
    color: var(--red);
    display: grid;
    place-items: center;
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 700;
    transform: rotate(-6deg);
}
.resp-line {
    font-family: var(--font-lab);
    font-size: 10.5px;
    letter-spacing: .06em;
    color: var(--ink-soft);
    line-height: 1.6;
    max-width: 40ch;
}

/* ---------- legal pages ---------- */

body.legal-body { background: var(--cream); padding-top: 0; }

.legal-nav { border-bottom: 1.5px solid var(--line); padding: 17px 0; }
.legal-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.eyebrow::before { content: ""; width: 26px; height: 4px; border-radius: 2px; background: var(--red); flex: none; }

.disp {
    font-family: var(--font-disp);
    font-weight: 800;
    font-variation-settings: "wdth" 80, "wght" 830;
    text-transform: uppercase;
    line-height: 1;
}

.mono {
    font-family: var(--font-lab);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.legal-main {
    max-width: 780px;
    margin-inline: auto;
    padding: clamp(52px, 8vw, 96px) clamp(20px, 5vw, 48px) 104px;
}
.legal-main h1 { font-size: clamp(36px, 5.4vw, 62px); margin: 18px 0 14px; }
.legal-updated {
    color: var(--ink-faint);
    font-size: 11px;
    display: block;
    margin-bottom: clamp(34px, 5vw, 52px);
    padding-bottom: 24px;
    border-bottom: 1.5px solid var(--line);
}
.legal-main h2 {
    font-family: var(--font-disp);
    font-size: 19px;
    font-weight: 780;
    font-variation-settings: "wdth" 86, "wght" 780;
    text-transform: uppercase;
    margin: 38px 0 12px;
}
.legal-main h2 .ls-num { color: var(--red); margin-right: 12px; font-family: var(--font-lab); font-size: 13px; }
.legal-main p { color: var(--ink-soft); font-size: 15px; line-height: 1.75; margin-bottom: 13px; }

.legal-footer { border-top: 1.5px solid var(--line); padding: 25px 0; }
.legal-footer .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.legal-footer a {
    font-family: var(--font-lab);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    transition: color .25s var(--ease);
}
.legal-footer a:hover { color: var(--ink); }
.legal-footer .copyright { margin-left: auto; font-size: 11px; color: var(--ink-faint); }

/* ---------- reveal ---------- */

.rv {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; }
.rv.d2 { transition-delay: .17s; transition-duration: .8s; }
.rv.d3 { transition-delay: .26s; }

/* keep the playful tilts once revealed */
.line-card.rv { transform: translateY(22px); }
.line-card.rv.in:nth-child(1) { transform: rotate(-1.1deg); }
.line-card.rv.in:nth-child(2) { transform: rotate(.7deg); }
.line-card.rv.in:nth-child(3) { transform: rotate(-.5deg); }
.quote-ticket.rv { transform: translateY(22px); }
.quote-ticket.rv.in:nth-child(odd)  { transform: rotate(-1.1deg); }
.quote-ticket.rv.in:nth-child(even) { transform: rotate(.9deg); }

/* ---------- responsive ---------- */

@media (max-width: 1120px) {
    .hd-badges { display: none; }
    .edge-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
    /* hero: full-bleed banner on top, copy below */
    .hero { display: block; min-height: 0; padding: 0 0 clamp(36px, 7vw, 56px); }
    .hero::before { display: none; }
    .hero-star { display: none; }
    .hero-art {
        position: relative;
        inset: auto;
        width: 100%;
        height: clamp(320px, 56vh, 480px);
        clip-path: polygon(0 0, 100% 0, 100% 90%, 88% 100%, 0 100%);
        margin-bottom: clamp(26px, 5vw, 40px);
        box-shadow: none;
    }
    .hero-art::before { left: 6%; }
    .hero-copy { max-width: none; }

    .stats-grid { grid-template-columns: 1fr; gap: 36px; }
    .stats-art img { width: min(100%, 340px); }

    .lines-grid { grid-template-columns: 1fr; }
    .line-card { max-width: 480px; }

    .card-grid { grid-template-columns: 1fr; }
    .card-detail { position: static; }

    .faq-grid { grid-template-columns: 1fr; }
    .faq-side { position: static; max-width: 420px; }

    .apply-grid { grid-template-columns: 1fr; }

    .rc-head { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
    .rc-head .logo { align-items: center; }
    .rc-band { grid-template-columns: 1fr; gap: 26px; }
    .rc-socials { justify-content: center; }

    .f-seo { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .edge-grid { grid-template-columns: 1fr; }
    .tickets-grid { grid-template-columns: 1fr; }
    .quote-ticket { max-width: 520px; }
    .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .hd-login { display: none; }
    .logo-sub { display: none; }
    .logo-word { font-size: 18px; }

    .r-tags { display: none; }
    .runner { grid-template-columns: 44px 1fr auto; }

    .faq-a-in { padding-left: 20px; }
    .fq-num { display: none; }
    .faq-q { grid-template-columns: 1fr auto; }

    .hero-cta .btn { flex: 1; }
    .counters { gap: 26px 14px; }
    .c-label { font-size: 12px; }

    .receipt { padding: 26px 20px; }
    .rc-links { grid-template-columns: 1fr; }
    .rc-foot { flex-direction: column; align-items: center; text-align: center; }
    .rc-legal { justify-content: center; }
    .rc-strip { flex-direction: column; text-align: center; }
    .edge-grid { grid-template-columns: 1fr; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .rv { opacity: 1; transform: none; }
    .menu-links li { opacity: 1; transform: none; }
    .odds-track, .tape-track { animation: none; }
}