/* Hallmark · macrostructure: Marquee Hero · theme: Touchline brand · genre: modern-minimal
 * nav: N9 Edge-aligned · footer: Ft2 Inline-rule · enrichment: interactive example
 * audience: U.S. soccer referees · purpose: product discovery and platform availability
 * pre-emit critique: P4 H5 E4 S5 R5 V4 */
@font-face{font-family:'Touchline Display';src:url('/assets/display.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
:root{--paper:oklch(15% .025 250);--surface:oklch(20% .025 250);--ink:oklch(96% .008 250);--muted:oklch(76% .022 250);--accent:oklch(84% .10 235);--line:oklch(38% .025 250);--font-display:'Touchline Display',Impact,sans-serif;--font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--space:clamp(1.25rem,5vw,5rem);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html,body{overflow-x:clip}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6}a{color:inherit;text-underline-offset:5px}a,button,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button,a.nav-link,.foot-links a{white-space:nowrap}button{font:inherit;cursor:pointer}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.65;transform:none}p{max-width:62ch}h1,h2,h3{font-style:normal;line-height:1.08;overflow-wrap:anywhere;min-width:0}h1{font-family:var(--font-display);font-stretch:condensed;font-weight:800;letter-spacing:-.045em;font-size:clamp(3.4rem,8vw,6rem);margin:0;max-width:12ch}h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.035em;margin:0 0 1.5rem}h3{font-size:1.3rem;margin:0 0 .75rem}header,main,footer{max-width:1440px;margin-inline:auto;padding-inline:var(--space)}header{display:flex;justify-content:space-between;align-items:center;padding-block:1.25rem}.brand{display:inline-flex;align-items:center;gap:.65rem;font-size:1.3rem;font-weight:750;text-decoration:none;white-space:nowrap}.brand img{width:40px;height:40px;object-fit:contain}.nav-link{font-size:.95rem;min-height:44px;display:flex;align-items:center}.hero{min-height:70svh;display:flex;flex-direction:column;justify-content:center;padding-block:4rem}.eyebrow{color:var(--accent);font-size:.85rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.hero .eyebrow{margin-bottom:2rem}.hero h1 span{color:var(--accent)}.hero-foot{font-size:.9rem;color:var(--muted);margin-top:3rem}.intro{border-top:3px solid var(--accent);padding-block:4rem}.intro p{font-size:clamp(1.2rem,2vw,1.5rem)}section{scroll-margin-top:2rem}.tour{display:grid;gap:3rem;padding-block:2rem 5rem}.tour-copy p{color:var(--muted)}.demo{background:var(--surface);border:1px solid var(--line);padding:clamp(1.1rem,4vw,2.5rem);border-radius:12px;min-width:0}.demo-label{font-size:.8rem;color:var(--muted);margin:0 0 1.5rem}.score-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-variant-numeric:tabular-nums}.score-row span{font-size:.9rem}.score-row strong{font-size:clamp(2.5rem,8vw,4rem);line-height:1.2}.clock{font-variant-numeric:tabular-nums;color:var(--accent);font-size:clamp(3rem,10vw,5rem);font-weight:700;line-height:1.2;margin-block:1.5rem;text-align:center}.actions{display:flex;flex-wrap:wrap;gap:.65rem}.actions button,.outline{background:transparent;color:var(--ink);border:1px solid var(--line);padding:.65rem .9rem;min-height:48px;border-radius:6px;transition:background-color 140ms var(--ease)}.actions button:hover,.outline:hover{background:var(--line)}.actions button.primary{background:var(--accent);border-color:var(--accent);color:var(--paper)}#demo-status{min-height:3.2em;color:var(--muted);font-size:.9rem;margin-bottom:0}.platforms{border-top:1px solid var(--line);padding-block:4rem}.platform-row{display:grid;gap:1rem;border-bottom:1px solid var(--line);padding-block:2rem}.platform-row p{margin:.5rem 0;color:var(--muted)}.availability{font-size:.9rem;color:var(--accent)}.store-button{width:100%;max-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:.8rem 1.2rem;text-align:left;min-height:70px}.store-button span{display:block;font-size:.8rem}.store-button strong{font-size:1.15rem}.faq{padding-block:3rem 5rem;max-width:850px}.faq details{border-bottom:1px solid var(--line);padding-block:1rem}.faq summary{cursor:pointer;font-size:1.1rem;min-height:44px}.faq p{color:var(--muted)}footer{border-top:1px solid var(--line);padding-block:2rem;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.2rem;font-size:.9rem}.foot-links{display:flex;flex-wrap:wrap;gap:1.5rem}.foot-links a{min-height:44px;display:flex;align-items:center}.document{max-width:850px;padding-block:3rem 5rem}.document h1{font-family:var(--font-body);font-size:clamp(2rem,5vw,3.4rem);max-width:20ch}.document h2{font-size:1.5rem;margin-top:2.5rem}.document p{color:var(--muted)}.skip{position:absolute;top:-100px;left:20px;background:var(--accent);color:var(--paper);padding:10px}.skip:focus{top:10px}.goal-flash{animation:goal 350ms var(--ease)}@keyframes goal{50%{color:var(--accent)}}@media(min-width:48rem){.tour{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center}.platform-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 240px;align-items:center}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.goal-flash{animation:none}*{transition:none!important}}

/* Hallmark · component: optional cosmetics and tips · genre: modern-minimal · theme: Touchline
 * states: default, hover, focus, active, disabled, loading, error, success
 * pre-emit critique: P5 H4 E4 S5 R5 V4 */
:root{--color-sunset:oklch(83% .10 48);--color-mint:oklch(87% .11 160);--color-stadium:oklch(88% .13 90);--color-error:oklch(83% .12 25);--color-success:oklch(87% .11 160);--space-sm:.5rem;--space-md:1rem;--space-lg:2rem;--space-xl:4rem;--radius-extra:12px;--ease-out:cubic-bezier(.2,.7,.2,1);--dur-fast:120ms}
.extras{border-top:3px solid var(--accent);padding-block:var(--space-xl)}.extras-heading{max-width:760px;margin-bottom:var(--space-lg)}.cosmetic-workbench{display:grid;gap:var(--space-lg);align-items:center}.theme-options,.tip-amounts{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-block:var(--space-md)}.extra-button{min-height:48px;padding:.6rem 1rem;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;white-space:normal;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}.extra-button[aria-pressed=true]{border:2px solid var(--accent);background:var(--paper)}@media(hover:hover){.extra-button:hover,.extra-button.is-hover{border-color:var(--accent)}}.extra-button:focus-visible,.extra-button.is-focus{outline:3px solid var(--accent);outline-offset:4px}.extra-button:active,.extra-button.is-active{transform:translateY(1px);opacity:.8}.extra-button:disabled{opacity:.55;cursor:not-allowed}.extra-button[data-state=loading]{opacity:.65;cursor:progress}.extra-button[data-state=error]{border-color:var(--color-error)}.extra-button[data-state=success]{border-color:var(--color-success)}.pack-preview{--pack-accent:var(--accent);background:var(--surface);padding:var(--space-lg);border:1px solid var(--pack-accent);border-radius:var(--radius-extra);text-align:center;min-width:0}.pack-preview[data-look=sunset]{--pack-accent:var(--color-sunset)}.pack-preview[data-look=mint]{--pack-accent:var(--color-mint)}.pack-preview[data-look=stadium]{--pack-accent:var(--color-stadium)}.pack-preview .clock,.goal-decoration{color:var(--pack-accent)}.goal-decoration{font-size:2rem;font-weight:800}.pack-preview p{margin-inline:auto}.tip-panel{display:grid;gap:var(--space-lg);border-top:1px solid var(--line);margin-top:var(--space-xl);padding-top:var(--space-lg)}.zelle{background:var(--surface);padding:var(--space-lg);border-radius:var(--radius-extra)}.zelle h4{font-size:1.3rem;margin:0}.payment-address{font-weight:700;overflow-wrap:anywhere}.extra-note,#theme-description,#tip-instructions,#copy-status{font-size:.9rem;color:var(--muted)}#copy-status{min-height:1.6em}#copy-status[data-state=error]{color:var(--color-error)}#copy-status[data-state=success]{color:var(--color-success)}@media(min-width:48rem){.cosmetic-workbench{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.tip-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){.extra-button{transition:none}.extra-button:active{transform:none}}
.pack-preview .score-row{gap:var(--space-sm)}

.stripe-tip-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-height:48px}.stripe-tip-link:visited{color:var(--ink)}

/* Original themed artwork sits behind the score; no official club or competition marks. */
:root{--color-club:oklch(76% .145 18);--color-final:oklch(87% .05 275);--color-summer:oklch(86% .14 155)}
.palette-label{font-size:.7rem;font-weight:700;letter-spacing:.09em;color:var(--muted);margin-bottom:var(--space-sm)}
.theme-options{margin-top:var(--space-sm)}.theme-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.5rem}.dot-club{background:var(--color-club)}.dot-final{background:var(--color-final)}.dot-summer{background:var(--color-summer)}
.pack-preview{position:relative;isolation:isolate;overflow:hidden}.pack-preview>:not(.theme-art){position:relative;z-index:1}.theme-art{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.theme-art g{display:none}.pack-preview[data-look=club]{--pack-accent:var(--color-club)}.pack-preview[data-look=finalnight]{--pack-accent:var(--color-final)}.pack-preview[data-look=international]{--pack-accent:var(--color-summer)}
[data-look=club] .art-club{display:block;fill:var(--color-club);fill-opacity:.09}.club-sash{stroke:var(--color-club);stroke-width:8;stroke-opacity:.24;fill:none}
[data-look=finalnight] .art-final{display:block;fill:var(--color-final);fill-opacity:.07}.art-final circle{fill:none;stroke:var(--color-final);stroke-opacity:.17}.final-lights{fill:none;stroke:var(--color-final);stroke-width:3;stroke-linecap:round;stroke-opacity:.7}
[data-look=international] .art-summer{display:block;fill-opacity:.55}.art-summer path:nth-child(1){fill:var(--color-summer)}.art-summer path:nth-child(2){fill:var(--color-stadium)}.art-summer path:nth-child(3){fill:var(--color-sunset)}.art-summer path:nth-child(4){fill:var(--accent)}
#pack-symbol{display:inline-block}.celebrating #pack-symbol{animation:goal-pop .65s var(--ease-out)}.celebrating .theme-art{animation:goal-art .65s var(--ease-out)}@keyframes goal-pop{0%{transform:scale(.65) rotate(-20deg)}50%{transform:scale(1.3)}100%{transform:scale(1) rotate(0)}}@keyframes goal-art{0%,100%{opacity:1}40%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.celebrating #pack-symbol,.celebrating .theme-art{animation:none}}

/* Actual app captures: no generated interface imagery. */
.header-links{display:flex;align-items:center;gap:clamp(.8rem,3vw,2.5rem)}
.app-gallery{padding-block:clamp(3rem,7vw,6rem);border-top:1px solid var(--line);scroll-margin-top:1.5rem;display:grid;grid-template-columns:minmax(210px,.7fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,5rem)}
.gallery-heading h2{font-size:clamp(2.2rem,4.3vw,4rem)}.gallery-heading>p{color:var(--muted)}.gallery-heading .eyebrow{color:var(--accent)}.capture-note{font-size:.8rem;line-height:1.6;margin-top:2rem;max-width:32ch}
.gallery-shots{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}.app-shot{margin:0;min-width:0}.watch-shot{padding-top:4rem}.screenshot-link{display:block;width:100%;margin-inline:auto;background:#000;overflow:hidden;border:1px solid #52616b;box-shadow:0 18px 50px #0006;transition:border-color .2s}.screenshot-link:hover{border-color:var(--accent)}.screenshot-link img{display:block;width:100%;height:auto}.watch-capture{max-width:230px;border-radius:clamp(1.8rem,3vw,2.6rem);padding:8px}.phone-capture{max-width:278px;border-radius:clamp(1.6rem,3vw,2.4rem);padding:6px}.app-shot figcaption{margin-top:1.8rem;max-width:29ch}.shot-platform{color:var(--accent);font-size:.7rem;font-weight:700;letter-spacing:.09em}.app-shot h3{margin-top:.8rem;font-size:1.2rem;line-height:1.3}.app-shot p{font-size:.9rem;color:var(--muted);margin-block:.5rem}.shot-expand{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;font-size:.85rem}.screenshot-dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:16px;max-width:min(94vw,720px);max-height:94dvh;padding:1rem;overscroll-behavior:contain}.screenshot-dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}.screenshot-dialog-head{display:flex;gap:1.5rem;justify-content:space-between;align-items:center;position:sticky;top:-1rem;background:var(--paper);padding-block:.25rem .75rem}.screenshot-dialog h2{font-family:var(--font-body);font-size:1rem;letter-spacing:0;margin:0}.screenshot-close{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;min-height:44px;padding:.4rem .8rem}.screenshot-full{display:block;max-width:100%;width:auto;height:auto;max-height:calc(94dvh - 130px);margin:auto;object-fit:contain}.screenshot-dialog>p{font-size:.75rem;color:var(--muted);text-align:center;margin-bottom:0}
@media(max-width:850px){.app-gallery{grid-template-columns:1fr}.gallery-heading{max-width:580px}.capture-note{max-width:55ch;margin-top:1rem}.gallery-shots{max-width:660px;width:100%;margin:auto}.watch-shot{padding-top:3rem}}
@media(max-width:480px){header{align-items:flex-start}.header-links{flex-direction:column;align-items:flex-end;gap:0}.header-links .nav-link{font-size:.8rem;min-height:32px}.gallery-shots{gap:1rem}.watch-shot{padding-top:2rem}.app-shot h3{font-size:1rem}.app-shot p{font-size:.8rem}.shot-platform{font-size:.6rem}.watch-capture{padding:4px;border-radius:1.3rem}.phone-capture{padding:4px;border-radius:1.3rem}.app-shot figcaption{margin-top:1rem}.shot-expand{font-size:.75rem;gap:.35rem}}
@media(prefers-reduced-motion:reduce){.screenshot-link{transition:none}}