/* Generated by bin/build.mjs; do not edit. */
/* NeoBall homepage — v2 (October 2026). Tokens from the Drop 1 brand system.
   Served under a CSP of style-src 'self' 'unsafe-inline'; fonts and images are
   same-origin files under /neoball-home/. */
/* Type: the Shop 2 house faces. Switzer (text, buttons' fallback) and Berkeley Mono (labels) are
   licensed for web use and served from this folder. Söhne Breit (display) is NOT licensed: the only
   copies in the company are Klim's Test cuts, which may not be served to customers. So no Söhne file
   ships here. local() asks the visitor's own machine for it, and everyone else gets Switzer, which is
   what the rest of the store does (app/styles/neoball-tokens.css). When the web licence is bought,
   add url(...) after the local() entries and nothing else changes. */
@font-face{font-family:'Söhne Breit';font-style:normal;font-weight:700;font-display:swap;src:local('Söhne Breit Dreiviertelfett'),local('SoehneBreit-Dreiviertelfett'),local('Test Söhne Breit Bold'),local('TestSohneBrt-Dvft')}
@font-face{font-family:'Söhne Breit';font-style:normal;font-weight:600;font-display:swap;src:local('Söhne Breit Kräftig'),local('SoehneBreit-Kraftig'),local('Test Söhne Breit Kräftig'),local('TestSohneBrt-Kraftig')}
@font-face{font-family:'Switzer';font-style:normal;font-weight:100 900;font-display:swap;src:url(/neoball-home/switzer-variable.woff2) format('woff2')}
@font-face{font-family:'Berkeley Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/neoball-home/berkeley-mono-400.woff2) format('woff2')}
@font-face{font-family:'Berkeley Mono';font-style:normal;font-weight:700;font-display:swap;src:url(/neoball-home/berkeley-mono-700.woff2) format('woff2')}

:root{
  --canvas:#000000; --ink:#F5F7F5; --muted:#AAB5B1; --surface:#0B1110; --line:#25322E; --accent:#00f6e0; --pink:#FF1493;
  --display:'Söhne Breit','Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Switzer','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Berkeley Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px); --max:1280px; --header:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--canvas);scroll-padding-top:calc(var(--header) + 72px);scroll-padding-bottom:120px}
body{background:var(--canvas);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
summary::-webkit-details-marker{display:none}
summary{list-style:none}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:#000;padding:10px 14px;font-weight:600}
.skip:focus{top:12px}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.mono-accent{color:var(--accent)}
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;text-wrap:balance}
.h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,5.6vw,80px);line-height:.95;letter-spacing:-.005em;text-wrap:balance}
.h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(24px,2.6vw,34px);line-height:1;letter-spacing:.01em}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink);max-width:52ch;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.5;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec{border-top:1px solid var(--line);padding:clamp(56px,8vh,112px) 0;scroll-margin-top:calc(var(--header) + 16px)}
.sec-head{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:clamp(28px,4vh,48px)}
.sec-head .eyebrow{display:flex;align-items:center;gap:12px}
.sec-head .eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.grid2{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,64px)}
.grid2>*{min-width:0}
@media(min-width:760px){.grid2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.faq-grid{grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr)}}
.box{border:1px solid var(--line);background:var(--surface);padding:clamp(20px,3vw,32px)}
.ctarow{margin-top:clamp(28px,4vh,48px);display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;font-weight:600;font-size:16px;white-space:nowrap;border:1px solid transparent;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{background:var(--ink)}
.btn-primary[aria-disabled="true"]{background:var(--surface);color:var(--muted);border-color:var(--line)}
.btn-primary[disabled]{opacity:.6;cursor:progress}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm{min-height:44px;padding:0 16px;font-size:14px}
.link{color:var(--ink);border-bottom:1px solid var(--line);transition:border-color .2s,color .2s}
.link:hover{color:var(--accent);border-color:var(--accent)}
.small-link{font-size:13px}

html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}

.purchase-error{position:sticky;top:0;z-index:70;background:var(--ink);color:#000;text-align:center;padding:12px var(--gutter);font-weight:600}
.catalog-unavailable [data-cta],.catalog-unavailable #drawerCta{pointer-events:none}

/* The top bar: the drop and how scarce it is, running. Pink is the house signal colour (YP design
   system --pink) and on this page it is used here only, so it means one thing. */
.bar{background:var(--pink);color:#14000b;overflow:hidden;padding:10px 0;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.bar-track{display:flex;width:max-content;animation:bar 64s linear infinite;will-change:transform}
.bar:hover .bar-track{animation-play-state:paused}
.bar-track>div{display:flex;flex:none;align-items:center;white-space:nowrap}
.bar-track span{padding:0 14px}
.bar-track i{flex:none;font-style:normal;opacity:.5;letter-spacing:-.04em}
.bar-track b{font-weight:inherit;font-variant-numeric:tabular-nums}
@keyframes bar{to{transform:translateX(-50%)}}
/* asked for less motion: one group, standing still, wrapped and centred */
@media (prefers-reduced-motion:reduce){.bar-track{animation:none;display:block;width:auto}.bar-track>div{flex-wrap:wrap;justify-content:center;row-gap:4px;padding:0 var(--gutter)}.bar-track>div:not(:first-child){display:none}.bar-track>div>i:last-child{display:none}.bar-track span{white-space:nowrap}}

.hdr{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr .wrap{height:var(--header);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:baseline;gap:10px;flex-shrink:0}
.brand b{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
.nav{display:none;gap:28px;font-size:14px;color:var(--muted)}
.nav a:hover{color:var(--accent)}
@media(min-width:900px){.nav{display:flex}}
.hdr-actions{display:flex;align-items:center;gap:18px}
.hdr .bag{font-size:14px}
.hdr .btn{min-height:44px;padding:0 clamp(12px,3vw,18px);font-size:14px}

.fold{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);padding:clamp(20px,3vh,40px) 0 clamp(40px,6vh,72px);position:relative}
.fold>*{min-width:0}
@media(min-width:960px){.fold{grid-template-columns:minmax(0,1.15fr) minmax(400px,.95fr);align-items:start}}

.gal{position:relative;min-width:0}
.frames{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
.frames::-webkit-scrollbar{display:none}
.frame{flex:0 0 min(86vw,520px);aspect-ratio:1;scroll-snap-align:center;position:relative;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover}
.frame picture{display:block;width:100%;height:100%}
.frame .tag{position:absolute;left:12px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:rgba(0,0,0,.72);padding:5px 8px;border:1px solid var(--line)}
.frame-hero img{will-change:transform;transform-origin:50% 50%}
/* the turntable: a rendered loop on black, started by the script only while it is on screen */
.frame-spin{background:#000}
.frame video{display:block;width:100%;height:100%;object-fit:cover}
.spin-toggle{position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:rgba(0,0,0,.72);padding:5px 10px;border:1px solid var(--line);min-height:28px}
.spin-toggle:hover{border-color:var(--accent);color:var(--accent)}
.thumbs{display:flex;gap:8px;margin-top:12px}
.thumb{flex:0 0 56px;aspect-ratio:1;border:1px solid var(--line);background:var(--surface);position:relative;overflow:hidden;transition:border-color .2s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb[aria-current="true"]{border-color:var(--accent)}
.thumb[aria-current="true"]::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--accent)}
@media(min-width:960px){
  .frames{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:visible;margin:0;padding:0}
  .frame{flex:none;width:auto}
  .frame-hero{grid-column:1/-1}
  .thumbs{display:none}
}

.buy{position:relative}
@media(min-width:960px){.buy{position:sticky;top:calc(var(--header) + 16px)}}
.buy .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.buy .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tagle{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border:1px solid var(--accent);padding:4px 8px;margin-left:4px}
.le{font-size:15px;font-weight:500;color:var(--ink);border-left:2px solid var(--accent);padding-left:12px}
.h1{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.88;letter-spacing:-.01em}
.h1 .big{display:block;font-size:clamp(72px,10vw,124px)}
.h1 .term{display:block;font-size:clamp(26px,3.2vw,40px);font-weight:600;margin-top:10px;color:var(--ink);letter-spacing:.005em}
.sub{margin:20px 0 0;font-size:clamp(16px,1.25vw,18px);line-height:1.5;color:var(--muted);max-width:48ch;text-wrap:pretty}
.cue{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:14px;color:var(--ink)}
.cue svg{flex:none}
.price{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.price .amt{font-family:var(--display);font-weight:700;font-size:clamp(64px,7vw,88px);line-height:.9;letter-spacing:-.01em}
.price .amt small{font-size:.42em;font-weight:600;color:var(--muted);letter-spacing:.02em;margin-left:10px;vertical-align:.5em}
.price .line{margin-top:10px;font-size:16px;font-weight:500;color:var(--ink)}
.price .unit{margin-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}

.sizes,.termrow{margin-top:28px}
.lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.card{position:relative;text-align:left;border:1px solid var(--line);background:var(--surface);padding:16px 14px 14px;min-height:118px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.card:hover{border-color:var(--muted)}
.card[aria-pressed="true"]{border-color:var(--accent);background:#07110F}
.card .sz{font-family:var(--display);font-weight:700;font-size:clamp(34px,4vw,44px);line-height:1;text-transform:uppercase}
.card .wt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.card .who{font-size:13px;color:var(--ink);line-height:1.35;margin-top:auto}
.card .oos{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.card[data-available="false"]{color:var(--muted)}
.card[data-available="false"] .sz{color:var(--muted)}
.card[data-available="false"] .oos{display:block}
.card .chk{position:absolute;right:12px;top:12px;width:18px;height:18px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#000;transition:background .2s,border-color .2s}
.card[aria-pressed="true"] .chk{background:var(--accent);border-color:var(--accent)}
.card .chk svg{opacity:0}
.card[aria-pressed="true"] .chk svg{opacity:1}
.size-hint{margin-top:8px;font-size:13px;color:var(--accent);min-height:1.2em}
.sizes .note{margin-top:8px}
.terms-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.termc{text-align:left;border:1px solid var(--line);background:var(--surface);padding:14px;display:flex;flex-direction:column;gap:4px;min-height:84px;transition:border-color .2s}
.termc[aria-pressed="true"]{border-color:var(--accent)}
.termc .a{font-family:var(--display);font-weight:700;font-size:30px;line-height:1}
.termc .b{font-size:13px;color:var(--ink)}
.termc .c{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.gift{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.switch{display:flex;align-items:center;gap:12px;min-height:44px;width:100%;text-align:left}
.switch .track{flex:none;width:40px;height:22px;border:1px solid var(--line);border-radius:999px;position:relative;background:var(--surface);transition:background .2s,border-color .2s}
.switch .track::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .2s var(--ease),background .2s}
.switch[aria-checked="true"] .track{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked="true"] .track::after{transform:translateX(18px);background:#000}
.switch .t{font-size:15px;font-weight:500}
.switch .state{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}
.gift-body{display:none;margin-top:12px}
html[data-gift="on"] .gift-body{display:block}

.cta{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.cta .btn{width:100%;font-size:17px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.trio div{background:var(--canvas);padding:10px 8px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);line-height:1.4}
.terms{font-size:13px;color:var(--muted);line-height:1.55}
.terms b{color:var(--ink);font-weight:500}
.guar{font-size:13px;color:var(--muted);line-height:1.55;border-left:1px solid var(--accent);padding-left:12px}
.guar .mono{display:block;margin-bottom:4px}

.incl{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.incl{grid-template-columns:1fr 1fr}}
.incl>div{background:var(--canvas);padding:clamp(20px,3vw,32px)}
.incl ul{list-style:none;margin-top:16px;display:flex;flex-direction:column}
.incl li{padding:12px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.45}
.incl li.quiet{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.incl .one{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;background:var(--surface)}
.incl .one .amt{font-family:var(--display);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1}

.steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps>div{background:var(--canvas);padding:24px 20px 28px}
.steps .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent)}
.steps h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:28px;line-height:1;margin:14px 0 10px}
.steps p{font-size:14px;color:var(--muted);line-height:1.5}
.clause{margin-top:16px;border-left:2px solid var(--accent);padding:4px 0 4px 16px;font-size:18px;font-weight:500}

.phone{width:min(100%,320px);margin:0 auto;border:1px solid var(--line);background:var(--surface);padding:18px 16px 20px;position:relative}
.phone::before{content:"";display:block;width:56px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 18px}
.phone .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.phone .arch{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:34px;line-height:.95;margin:10px 0 14px}
.phone .ph{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:16px}
.phone .ph div{height:4px;background:var(--line)}
.phone .ph div.on{background:var(--accent)}
.phone .phl{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:-10px 0 18px}
.phone .cuebig{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:30px;line-height:1;margin:0 0 6px}
.phone .cuesm{font-size:13px;color:var(--muted);line-height:1.45}
.phone .fake{margin-top:18px;background:var(--accent);color:#000;text-align:center;padding:13px;font-weight:600;font-size:14px}

.tiles{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:700px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tiles{grid-template-columns:repeat(5,1fr)}}
.tiles>div{background:var(--canvas);padding:24px 20px 28px;display:flex;flex-direction:column;gap:12px;min-height:220px}
.tiles .q{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,2.2vw,30px);line-height:.95}
.tiles p{font-size:14px;line-height:1.5;color:var(--muted);margin-top:auto}
.tiles .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent)}

.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;vertical-align:top;padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.spec th{width:34%;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-right:16px}
.spec tr:last-child td,.spec tr:last-child th{border-bottom:1px solid var(--line)}
.spec .no{color:var(--muted)}
.fit{margin:12px 0 0 18px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:15px}

.finder{border:1px solid var(--line);background:var(--surface);padding:clamp(20px,3vw,28px)}
.finder .q{font-size:15px;font-weight:500;margin-bottom:10px}
.finder .opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.finder .opt{min-height:44px;padding:0 14px;border:1px solid var(--line);font-size:14px;display:inline-flex;align-items:center;transition:border-color .2s,color .2s}
.finder .opt[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.finder .out{margin-top:6px;border-top:1px solid var(--line);padding-top:18px;display:none}
.finder .out.show{display:block}
.finder .out .rec{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,4vw,48px);line-height:1}
.finder .out p{margin:10px 0 14px;font-size:15px;color:var(--muted);max-width:48ch}

.anchor{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.anchor{grid-template-columns:repeat(3,1fr)}}
.anchor>div{background:var(--canvas);padding:24px 20px 28px}
.anchor .big{font-family:var(--display);font-weight:700;font-size:clamp(40px,4.6vw,60px);line-height:.95;text-transform:uppercase}
.anchor p{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.5}
.shelf{width:100%;border-collapse:collapse;margin-top:8px}
.shelf th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 0 10px}
.shelf td{padding:12px 0;border-top:1px solid var(--line);font-size:15px;vertical-align:top}
.shelf td:last-child,.shelf th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.shelf tr.us td{color:var(--accent);font-weight:500;border-top:1px solid var(--accent)}

.m13{border:1px solid var(--accent);padding:clamp(24px,4vw,40px);display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:900px){.m13{grid-template-columns:1fr 1.3fr;align-items:center}}
.m13 .big{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(56px,8vw,120px);line-height:.85}
.m13 .big small{display:block;font-size:.22em;font-weight:600;letter-spacing:.08em;color:var(--accent);margin-top:12px}
.m13 p{font-size:clamp(16px,1.4vw,19px);line-height:1.5}

.three{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.three{grid-template-columns:repeat(3,1fr)}}
.three>div{background:var(--canvas);padding:22px 20px 26px}
.three .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent)}
.three h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:26px;line-height:1;margin:12px 0 8px}
.three p{font-size:14px;color:var(--muted);line-height:1.5}

.ladder{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.ladder{grid-template-columns:1.2fr 1fr}}
.ladder>div{background:var(--canvas);padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:12px}
.ladder .amt{font-family:var(--display);font-weight:700;font-size:clamp(44px,5vw,64px);line-height:1}
.ladder .amt small{font-size:.36em;color:var(--muted);font-weight:600;margin-left:8px}
.ladder .math{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);line-height:1.6}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font-size:17px;font-weight:500;display:flex;justify-content:space-between;gap:16px;min-height:44px;align-items:center}
.faq summary span{color:var(--accent);font-family:var(--mono);font-size:18px;flex:none;transition:transform .2s var(--ease)}
.faq details[open] summary span{transform:rotate(45deg)}
.faq p{margin:0 0 20px;font-size:15px;line-height:1.55;color:var(--muted);max-width:70ch}

.ftr{border-top:1px solid var(--line);padding:40px 0 140px;display:grid;gap:28px}
@media(min-width:760px){.ftr{grid-template-columns:1fr 1fr 1fr;padding-bottom:120px}}
.ftr p{font-size:14px;color:var(--muted);line-height:1.6}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px var(--gutter) max(12px,env(safe-area-inset-bottom));background:rgba(0,0,0,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;transform:translateY(110%);transition:transform .35s var(--ease)}
.sticky.show{transform:none}
.sticky .meta{display:none;flex:1;min-width:0;gap:14px;align-items:baseline}
.sticky .meta b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:22px;letter-spacing:.01em}
.sticky .meta .p{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted)}
.sticky .btn{flex:1}
@media(min-width:760px){
  .sticky{top:var(--header);bottom:auto;border-top:0;border-bottom:1px solid var(--line);transform:translateY(calc(-100% - var(--header) - 8px));padding:10px var(--gutter)}
  .sticky .meta{display:flex}
  .sticky .btn{flex:none;min-width:240px;min-height:48px}
}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--canvas);border-top:1px solid var(--line);max-height:92vh;overflow:auto;transform:translateY(100%);transition:transform .4s var(--ease);padding:16px var(--gutter) max(24px,env(safe-area-inset-bottom))}
.drawer.show{transform:none}
@media(min-width:760px){.drawer{left:auto;top:0;bottom:0;width:min(480px,100%);max-height:none;border-top:0;border-left:1px solid var(--line);transform:translateX(100%);padding:24px 28px}}
.drawer::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
@media(min-width:760px){.drawer::before{display:none}}
.drawer .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.drawer .top b{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:28px}
.drawer .x{width:44px;height:44px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
.drawer .block{margin-top:18px}
.drawer .lab{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between;gap:12px}
.notice{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--accent);border-left:1px solid var(--accent);padding-left:12px;line-height:1.5}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:100;background:var(--ink);color:#000;padding:12px 16px;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s var(--ease);max-width:min(92vw,520px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:760px){.toast{bottom:32px}}

.monu{position:relative;overflow:hidden}
/* Centred by a margin, not a transform: the reveal rules reset every .rv transform, which dropped the
   ring half its height and cut the ball in two on a wide screen. */
.monu .ring{position:absolute;right:-8%;top:50%;width:min(60vw,640px);aspect-ratio:1;margin-top:calc(min(60vw,640px) / -2);border-radius:50%;overflow:hidden;border:1px solid var(--line);background:var(--surface);opacity:.9}
/* Centred by its edges, never by a transform: the motion layer owns this image's transform (it scales
   and rolls it), and a transform-centred image slid out of the ring when the window changed size. */
.monu .ring img{position:absolute;left:-9%;top:-9%;width:118%;height:118%;max-width:none;object-fit:cover}
.monu .txt{position:relative;z-index:1;max-width:60%}
.monu .txt .display{font-size:clamp(64px,11vw,180px)}
@media(max-width:759px){.monu .ring{position:relative;right:auto;top:auto;width:min(70vw,320px);margin:28px 0 0}.monu .txt{max-width:100%}}

/* ── wordmark: the real NEOBALL mark, drawn as a mask so it takes the text colour ── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wm{display:block;aspect-ratio:5555/814;height:17px;background:currentColor;-webkit-mask:url(/neoball-home/neoball-wordmark.svg) center/contain no-repeat;mask:url(/neoball-home/neoball-wordmark.svg) center/contain no-repeat}
.brand{align-items:center}
.h1 .big .wm{height:auto;width:100%;max-width:540px;margin:4px 0 18px}
.sticky .meta{align-items:center}
.sticky .meta .wm{height:15px}

/* ── type scale for an extended display face ──
   Söhne Breit sets the same words 1.72x wider than Barlow Condensed (measured in the browser), so
   every display size is the old one x 0.58-0.62 and lines break where they did. 700 is
   Dreiviertelfett for heads and figures, 600 is Kräftig for sub-heads. Tracking follows
   app/styles/neoball-tokens.css: large type closes up, small capitals open out. */
.display,.h2,.h3,.h1 .term,.price .amt,.card .sz,.termc .a,.incl .one .amt,.steps h3,.phone .arch,.phone .cuebig,.tiles .q,.finder .out .rec,.anchor .big,.m13 .big,.three h3,.ladder .amt,.drawer .top b{font-synthesis-weight:none;word-spacing:.02em}
.display{letter-spacing:-.035em;line-height:.88}
.monu .txt .display{font-size:clamp(38px,6.6vw,108px)}
.h2{font-size:clamp(24px,3.4vw,48px);letter-spacing:-.028em;line-height:.96}
.h3{font-size:clamp(15px,1.6vw,20px);letter-spacing:.005em;line-height:1.12}
.h1 .term{font-size:clamp(15px,1.9vw,24px);letter-spacing:-.01em}
.price .amt{font-size:clamp(46px,5vw,64px);letter-spacing:-.035em}
.card .sz{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em}
.termc .a{font-size:19px;letter-spacing:-.02em}
.incl .one .amt{font-size:clamp(26px,3vw,40px);letter-spacing:-.03em}
.steps h3{font-size:17px;letter-spacing:.005em;line-height:1.1}
.phone .arch{font-size:21px;letter-spacing:-.025em;line-height:1}
.phone .cuebig{font-size:18px;letter-spacing:-.005em;line-height:1.06}
.tiles .q{font-size:clamp(16px,1.35vw,18px);letter-spacing:-.012em;line-height:1.06}
.tiles .n,.tiles .q{margin-top:0}   /* wider questions run to different line counts: numbers and questions share a top line, answers the bottom */
@media(max-width:699px){.tiles>div{min-height:0}}
.finder .out .rec{font-size:clamp(20px,2.4vw,28px);letter-spacing:-.025em}
.anchor .big{font-size:clamp(24px,2.8vw,36px);letter-spacing:-.03em;line-height:1}
.m13 .big{font-size:clamp(34px,4.8vw,72px);letter-spacing:-.035em;line-height:.9}
.three h3{font-size:16px;letter-spacing:.005em;line-height:1.1}
.ladder .amt{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em}
.ladder .amt small,.price .amt small{letter-spacing:.005em}
.drawer .top b{font-size:17px;letter-spacing:-.01em}
.spec .display{font-size:26px}

/* ── buttons (Mike, 2026-10-09): a two-part button. Label in Söhne Breit capitals on the left; price
   and arrow on the right behind a hairline. Hover darkens the signal and slides the arrow. A button
   that cannot add yet ("Select a size", an unavailable size, ordering down) is an outline with no
   arrow, so state is never colour alone. The header button is an outline whenever a filled one is
   already on screen. Corners stay square. */
.btn{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-synthesis-weight:none;transition:background-color .12s linear,color .12s linear,border-color .12s linear,transform .08s linear}
.btn:active{transform:translateY(1px)}
.btn-sm{font-size:11px}
.cta .btn{font-size:clamp(14px,4.4vw,17px)}
.btn-ghost{font-size:12px;padding:0 18px}
@media(max-width:359px){.btn-ghost{font-size:11px;padding:0 14px}}
a.btn[href^="mailto"]{font-family:var(--body);font-weight:500;font-size:14px;text-transform:none;letter-spacing:0}   /* an address stays as typed */
.btn-primary{color:#04100f;padding:0;gap:0;align-items:stretch;justify-content:space-between;text-align:left;border:1px solid var(--accent)}
.btn-primary:not(:has(.bl)){padding:0 24px;align-items:center;justify-content:center}   /* before the script paints it, and without JavaScript */
.btn-primary .bl{flex:1;min-width:0;display:flex;align-items:center;padding:0 20px;white-space:normal}
.btn-primary .br{flex:none;display:flex;align-items:center;gap:12px;padding:0 18px;border-left:1px solid color-mix(in srgb,currentColor 30%,transparent);font-variant-numeric:tabular-nums}
.btn-primary .br:has(.bp:empty){gap:0}
.btn-primary .br svg{flex:none;display:block;transition:transform .18s var(--ease)}
.btn-primary:hover{background:#00c2b2;border-color:#00c2b2}
.btn-primary:hover .br svg{transform:translateX(4px)}
.btn-primary.is-outline,.btn-primary.is-outline:hover{background:var(--accent);color:#04100f;border-color:var(--accent)}
.btn-primary.is-outline:hover{background:#00c2b2;border-color:#00c2b2}
.btn-primary.is-outline .br svg{display:none}
.btn-primary.is-outline .br:has(.bp:empty){display:none}
.hdr .btn{font-size:11px;letter-spacing:.03em}
.hdr .btn-primary .bl{padding:0 14px}
.hdr .btn-primary .br{padding:0 12px;gap:8px}
html[data-cta-onscreen="yes"] .hdr .btn-primary:not(.is-outline){background:transparent;color:var(--accent);border-color:var(--accent)}
html[data-cta-onscreen="yes"] .hdr .btn-primary:not(.is-outline):hover{background:var(--accent);color:#04100f}
/* phones: the header holds the wordmark, the bag link and a compact button */
@media(max-width:479px){.hdr .btn-primary .br{display:none}.hdr .btn-primary .bl{padding:0 12px}.hdr-actions{gap:12px}}
@media(max-width:374px){.hdr .brand .wm{height:15px}}
@media(max-width:479px){.catalog-unavailable .hdr .btn{display:none}}   /* the notice and the main button already say it; the long label does not fit a phone header */

/* ── motion layer (motion.js, October 2026) ──
   Inert until motion.js adds .has-motion, with one exception: the first-viewport gate below.
   Where scripts run and motion is welcome, the hero's words wait for the intro. If the motion
   file never arrives they are shown anyway after a moment; with scripts off, or reduced motion,
   they were never hidden. The buy box is not part of it: price, sizes and button paint at once. */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  html:not(.has-motion) .buy .eyebrow,html:not(.has-motion) #h1 .wm,html:not(.has-motion) #h1 .term,html:not(.has-motion) .fold .sub,html:not(.has-motion) .fold .cue{animation:m-wait .5s ease 1.5s both}
}
@keyframes m-wait{from{opacity:0}to{opacity:1}}
html.has-motion .rv{opacity:1;transform:none;transition:none}   /* GSAP owns the reveal from here */
html.lenis{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.frame-hero img{scale:var(--m-settle,1)}
.m-progress{position:absolute;left:0;right:0;top:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.m-wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .1em;margin:-.08em 0 -.1em}
.m-w{display:inline-block}
html.has-motion .sec-head .eyebrow::after{transform:scaleX(var(--m-rule,1));transform-origin:0 50%}
.steps{position:relative}
html.has-motion .steps::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:var(--accent);transform:scaleX(var(--m-run,0));transform-origin:0 50%;pointer-events:none}
.faq details.m-closing summary span{transform:none}
.m-mag{transition-property:background-color,color,border-color}
html.has-motion .btn-primary{overflow:hidden}
/* small answers to the pointer, where there is one */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .card,.termc{transition:border-color .2s var(--ease),background .2s var(--ease),transform .3s var(--ease)}
  .card:hover,.termc:hover{transform:translateY(-2px)}
  .card:active,.termc:active{transform:translateY(0)}
  .tiles>div,.steps>div,.three>div{transition:background-color .35s var(--ease)}
  .tiles>div:hover,.steps>div:hover,.three>div:hover{background:var(--surface)}
  .tiles .q,.steps h3,.three h3{transition:transform .4s var(--ease)}
  .tiles>div:hover .q,.steps>div:hover h3,.three>div:hover h3{transform:translateX(4px)}
  .frame:not(.frame-hero) img{transition:transform 1s var(--ease)}
  .frame:not(.frame-hero):hover img{transform:scale(1.03)}
  .faq summary{transition:color .2s var(--ease)}
  .faq summary:hover{color:var(--accent)}
  .faq details:not([open]) summary:hover span{transform:rotate(90deg)}
  .finder .opt{transition:border-color .2s,color .2s,transform .25s var(--ease)}
  .finder .opt:hover{transform:translateY(-1px)}
}

/* ── slanted tapes: the page's own short lines, running across the full width ──
   Full bleed out of the centred column; the padding is the room the slant needs, and the outer
   box clips the ends. The stylesheet alone keeps it moving; motion.js, when it is there, ties
   the speed and direction to the scroll. Still for reduced motion. */
.tape{margin:clamp(28px,5vh,60px) calc(50% - 50vw);padding:clamp(20px,3.2vw,40px) 0;overflow:hidden;pointer-events:none;user-select:none}
.tape-band{transform:rotate(-2.2deg) scale(1.06);background:var(--accent);color:#04100f}
.tape-b .tape-band{transform:rotate(2.2deg) scale(1.06);background:var(--canvas);color:var(--accent);border-block:1px solid var(--accent)}
.tape-track{display:flex;width:max-content;animation:tape 44s linear infinite;will-change:transform}
.tape-b .tape-track{animation-direction:reverse}
.tape-track>div{display:flex;align-items:center;flex:none;padding:clamp(10px,1.4vw,16px) 0;font-family:var(--display);font-weight:700;font-size:clamp(17px,2.5vw,32px);line-height:1;letter-spacing:-.012em;text-transform:uppercase;white-space:nowrap;font-synthesis-weight:none}
.tape-track span{padding:0 clamp(16px,2.4vw,34px)}
.tape-track i{flex:none;font-style:normal;font-weight:600;opacity:.5;letter-spacing:-.08em}
@keyframes tape{to{transform:translateX(-50%)}}
html.has-motion .tape-track{animation:none}   /* GSAP runs it from here */
@media (prefers-reduced-motion:reduce){.tape-track{animation:none}}
.cta .inside{margin-top:12px;padding:12px 14px;border:1px solid var(--line);background:var(--surface);font-size:14px;line-height:1.5;color:var(--ink)}
.cta .nosub{margin-top:14px;padding:16px 16px 14px;border:1px solid var(--accent);background:var(--surface)}
.cta .nosub .h3{color:var(--accent);margin-bottom:6px}
.cta .nosub p:not(.h3){font-size:14px;line-height:1.5;color:var(--ink);max-width:52ch}


/* ── the guarantee: a 30-day dial, the promise, and the three steps to use it ── */
.gt{border:1px solid var(--accent);background:var(--surface);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,48px);padding:clamp(24px,4vw,56px);position:relative;overflow:hidden}
.gt::before{content:"";position:absolute;inset:auto -20% -60% auto;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(0,246,224,.10),transparent);pointer-events:none}
.gt>*{min-width:0;position:relative}
.gt-dial{position:relative;width:min(100%,clamp(180px,24vw,300px));aspect-ratio:1;justify-self:start}
.gt-dial svg{display:block;width:100%;height:100%;overflow:visible}
.gt-dial circle{fill:none;stroke:var(--line);stroke-width:1}
.gt-dial path{stroke:var(--accent);stroke-width:2.5;stroke-linecap:square}
.gt-dial p{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px}
.gt-dial b{font-family:var(--display);font-weight:700;font-size:clamp(64px,9vw,112px);line-height:.8;font-variant-numeric:tabular-nums}
.gt-main .h2{margin:14px 0 18px}
.gt-steps{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.gt-steps li{background:var(--canvas);padding:20px 20px 24px;min-width:0}
.gt-steps .h3{margin:10px 0 8px}
.gt-steps p{font-size:14px;line-height:1.5;color:var(--muted)}
.gt-foot{margin:0}
@media(min-width:760px){.gt-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.gt{grid-template-columns:auto minmax(0,1fr);align-items:center}.gt-steps,.gt-foot{grid-column:1/-1}}

/* the Founders cap under the term cards; the theme adds what is claimed, read from stock */
.founders{margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted)}
.founders b,.founders-live b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}

/* On a wide screen the header already carries the button and the price, always in view. A second bar
   under it put two identical buttons one above the other. */
@media(min-width:760px){.sticky{display:none}}

/* ── a routed hook: one line between the name and the lede, present only on an ad's own URL (?view=) ── */
.buy .hook{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.4vw,32px);line-height:1.05;letter-spacing:-.01em;margin:14px 0 4px;text-wrap:balance;color:var(--accent)}
/* ── the list: Shopify's own customer form, in the footer ── */
.nbd-email{margin-top:22px;max-width:360px}
.nbd-email .row{display:flex;gap:8px;margin-top:8px}
.nbd-email .row>*{min-width:0}
.nbd-email input[type=email]{flex:1;background:var(--surface);border:1px solid var(--line);padding:10px 12px;font-size:14px;color:var(--ink)}
.nbd-email input[type=email]:focus{border-color:var(--accent);outline:0}
.nbd-email .btn{flex:none;min-height:40px;padding:0 14px;font-size:12px}
.nbd-email .small{margin-top:8px}

[data-static-style="0"][data-static-style]{margin-top:18px;color:var(--muted);max-width:52ch}
[data-static-style="1"][data-static-style]{text-align:center;margin-top:12px}
[data-static-style="2"][data-static-style]{margin-top:18px}
[data-static-style="3"][data-static-style]{margin:14px 0 12px}
[data-static-style="4"][data-static-style]{color:var(--muted);line-height:1.55}
[data-static-style="5"][data-static-style]{margin-top:18px}
[data-static-style="6"][data-static-style]{color:var(--ink)}
[data-static-style="7"][data-static-style]{color:var(--ink)}
[data-static-style="8"][data-static-style]{margin-top:24px}
[data-static-style="9"][data-static-style]{margin-top:12px;font-size:18px;line-height:1.45;font-weight:500}
[data-static-style="10"][data-static-style]{margin-top:14px}
[data-static-style="11"][data-static-style]{margin-top:24px}
[data-static-style="12"][data-static-style]{margin-top:12px}
[data-static-style="13"][data-static-style]{margin-bottom:16px}
[data-static-style="14"][data-static-style]{margin-top:clamp(28px,4vh,48px)}
[data-static-style="15"][data-static-style]{margin:10px 0 18px}
[data-static-style="16"][data-static-style]{margin:10px 0 18px}
[data-static-style="17"][data-static-style]{margin-top:14px}
[data-static-style="18"][data-static-style]{margin-bottom:14px}
[data-static-style="19"][data-static-style]{margin-top:14px}
[data-static-style="20"][data-static-style]{margin-bottom:28px}
[data-static-style="21"][data-static-style]{margin:14px 0 12px}
[data-static-style="22"][data-static-style]{color:var(--muted);line-height:1.55}
[data-static-style="23"][data-static-style]{margin-bottom:18px}
[data-static-style="24"][data-static-style]{margin-top:22px}
[data-static-style="25"][data-static-style]{margin-top:28px}
[data-static-style="26"][data-static-style]{margin-top:8px}
[data-static-style="27"][data-static-style]{margin-top:16px}
[data-static-style="28"][data-static-style]{margin-bottom:10px}
[data-static-style="29"][data-static-style]{margin-top:16px}