/* ===================================================================
   The smaller pages: thank-you, why it's free (arcade version), terms,
   privacy and the 404. Loaded after a.css or g.css.
   =================================================================== */
.pg .fr{min-height:0}
.motion .pg .rv{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .8s cubic-bezier(.22,1,.36,1)}
.motion .pg .rv.in{opacity:1;transform:none}

/* ---------- thank you ---------- */
[data-variant="a"] .f-ty{background:var(--cobalt);color:#fff}
[data-variant="a"] .f-ty::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 50% at 50% 40%,rgba(110,130,255,.5),transparent 70%)}
.ty-ticket{margin-top:36px}
.ty-ticket .t-main{display:grid;gap:12px;align-content:start;min-height:280px}
.ty-h{font-weight:850;font-size:clamp(2rem,4.6vw,3.6rem);line-height:.92;letter-spacing:-.055em;max-width:20ch}
.ty-biz{font:400 .875rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.ty-ticket .t-main{padding-bottom:clamp(70px,8vw,96px)}
.ty-ticket .ty-h{max-width:17ch}
.ty-stamp{display:block!important;top:auto;bottom:16px;left:auto;right:5%;transform:rotate(-7deg);font-size:clamp(1.6rem,3.2vw,2.5rem)}
.motion .ty-stamp{animation:tyStamp .55s .35s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tyStamp{from{opacity:0;transform:rotate(-18deg) scale(1.8)}to{opacity:1;transform:rotate(-7deg) scale(1)}}
@media (max-width:700px){.ty-ticket .t-main{padding-bottom:22px}.ty-stamp{position:relative;right:auto;bottom:auto;justify-self:start;margin-top:10px}}
.ty-g{display:grid;gap:14px;margin:30px auto 0;max-width:1000px;position:relative;z-index:1}
@media (min-width:900px){.ty-g{grid-template-columns:1.15fr .85fr}}
.ty-next{display:grid;border-radius:20px;padding:6px 22px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.ty-next li{display:grid;grid-template-columns:2.6rem 1fr;gap:8px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:1.0625rem;line-height:1.35}
.ty-next li:last-child{border-bottom:0}
.ty-next b{font-weight:720}
.ty-free{margin:12px 0 0;padding:14px 18px;border-radius:16px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-size:.9375rem;line-height:1.4}
.ty-free b{font-weight:760}
[data-variant="g"] .ty-free{background:var(--lemon,#FFE45C);color:#151312;border:3px solid #151312;box-shadow:4px 4px 0 #151312}
.ty-next .mono{opacity:.7;padding-top:3px}
.ty-contact{display:grid;gap:10px;align-content:start;border-radius:20px;padding:22px;background:#fff;color:#121110}
.ty-contact .mono{opacity:.6}
.ty-q{font-weight:750;font-size:1.3rem;letter-spacing:-.02em;line-height:1.2}
.ty-q a{color:inherit;white-space:nowrap}
.ty-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.ty-btns svg{flex:none}
.btn-wa{background:#1FA855;color:#fff;box-shadow:0 10px 22px -10px rgba(19,128,62,.8)}
@media (hover:hover){.btn-wa:hover{background:#17914A}}
[data-variant="a"] .ty-contact .btn-line{box-shadow:inset 0 0 0 1.5px #121110;color:#121110}
/* arcade */
[data-variant="g"] .f-ty{background:var(--sky,#7CC4FF)}
.ty-bezel{margin-top:28px}
.ty-p1{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,7vw,5.6rem);line-height:.9;color:var(--lemon);text-shadow:0 0 18px rgba(255,228,92,.45),4px 4px 0 var(--tomato)}
.ty-p1 span{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
[data-variant="g"] .ty-h{font-family:var(--disp);font-weight:800;color:#F3FFEF;font-size:clamp(1.5rem,3vw,2.2rem);letter-spacing:-.01em;line-height:1.1;margin-top:16px;max-width:26ch}
.ty-score{margin-top:18px;display:inline-grid;grid-template-columns:auto auto;gap:6px 22px;color:var(--phos,#B8FF9C);font:400 .875rem/1.4 var(--mono);text-transform:uppercase}
.ty-score b{font-weight:400;color:var(--lemon);text-align:right}
[data-variant="g"] .ty-next{background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
[data-variant="g"] .ty-next li{border-bottom:2px dashed var(--ink)}
[data-variant="g"] .ty-contact{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.ty-p1 span{animation:none}}

/* ---------- terms and privacy ---------- */
[data-variant="a"] .f-doc{background:var(--paper)}
[data-variant="g"] .f-doc{background:var(--cream)}
.doc{max-width:760px;margin:30px auto 10px;display:grid;gap:16px}
.doc .h2{margin-bottom:6px}
.doc .lead{margin-bottom:18px}
.doc h2{font-weight:780;font-size:clamp(1.3rem,2.2vw,1.65rem);letter-spacing:-.025em;margin-top:22px;padding-top:18px;border-top:1.5px solid currentColor}
[data-variant="g"] .doc h2{font-family:var(--disp);border-top:3px dashed var(--ink)}
.doc p,.doc li{font-size:1.0625rem;line-height:1.6;max-width:66ch}
.doc ul{list-style:disc;padding-left:22px;display:grid;gap:4px}
.doc a:not([class]){color:inherit;text-underline-offset:3px}
.doc .note{opacity:.7;margin-top:12px}
.doc-end{margin-top:26px}

/* ---------- 404 ---------- */
[data-variant="a"] .f-404{background:var(--red,#E3341C);color:#fff}
[data-variant="g"] .f-404{background:var(--tomato,#FF5B3A)}
.nf{display:grid;gap:clamp(24px,4vw,56px);align-items:center;margin-top:30px}
@media (min-width:900px){.nf{grid-template-columns:.9fr 1.1fr}}
.nf-shutter{position:relative;aspect-ratio:1.1;border-radius:14px 14px 4px 4px;overflow:hidden;
  background:repeating-linear-gradient(180deg,#3155C4 0,#1D3FA6 3px,#1D3FA6 22px,#17348D 26px,#0B1B55 28px);box-shadow:0 30px 50px -24px rgba(0,0,0,.6),inset 0 0 0 6px rgba(0,0,0,.15)}
[data-variant="g"] .nf-shutter{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.motion .nf-shutter::before{content:"";position:absolute;inset:0;background:inherit;animation:shutDown 1.1s cubic-bezier(.65,0,.35,1) both}
@keyframes shutDown{from{transform:translateY(-100%)}}
.nf-board{position:absolute;left:12%;right:12%;top:18%;display:grid;place-items:center;padding:14px;border-radius:6px;background:#F6B91A;color:#14110F;font:800 clamp(3rem,8vw,6rem)/1 var(--sans);font-style:normal;letter-spacing:-.04em;box-shadow:0 6px 0 rgba(0,0,0,.25)}
[data-variant="g"] .nf-board{font-family:var(--disp);border:3px solid var(--ink)}
.nf-lock{position:absolute;left:50%;bottom:7%;width:54px;height:20px;margin-left:-27px;border-radius:5px;background:linear-gradient(#D7D7D2,#9C9C96);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.nf-say .lead{margin-top:18px}
.nf-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
[data-variant="a"] .f-404 .btn-line{box-shadow:inset 0 0 0 1.5px #fff;color:#fff}
[data-variant="a"] .f-404 .btn-ink{background:#fff;color:#121110}

/* ---------- why it's free, arcade version ---------- */
.f-wtop{background:var(--lemon)}
.f-wwhy{background:var(--pink)}
.f-wscale{background:var(--mint)}
.f-wmoney{background:var(--sky)}
.f-wno{background:var(--cream)}
.w-hero{display:grid;gap:28px;align-items:center;margin:34px 0 18px}
@media (min-width:900px){.w-hero{grid-template-columns:1.3fr .7fr}}
.w-big{font-family:var(--disp);font-weight:800;font-size:clamp(3.4rem,10vw,9rem);line-height:.86;letter-spacing:-.035em}
.w-sticker{display:inline-block;background:var(--paper);border:3px solid var(--ink);border-radius:.18em;padding:0 .14em;box-shadow:.05em .05em 0 var(--ink);transform:rotate(-3deg)}
.w-tag{justify-self:center;width:min(280px,100%);background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:22px;box-shadow:7px 7px 0 var(--ink);transform:rotate(4deg);text-align:center;display:grid;gap:6px}
.w-zero{font-family:var(--disp);font-weight:800;font-size:5.4rem;line-height:.9;color:var(--tomato)}
.w-rows{display:grid;grid-template-columns:1fr auto;gap:6px 12px;text-align:left;margin-top:10px;padding-top:10px;border-top:2px dashed var(--ink);font-size:.9rem}
.w-cols{display:grid;gap:18px;margin-top:26px;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5}
@media (min-width:900px){.w-cols{grid-template-columns:repeat(3,1fr)}}
.w-cols p{background:var(--paper);border:3px solid var(--ink);border-radius:16px;padding:18px;box-shadow:5px 5px 0 var(--ink)}
.w-board{margin-top:28px;border:3px solid var(--ink);border-radius:18px;background:var(--crt,#141B17);color:var(--phos,#B8FF9C);overflow:hidden;box-shadow:7px 7px 0 var(--ink)}
.w-row{display:grid;grid-template-columns:4.4rem 1fr 1.3fr 1.2fr;gap:12px;padding:14px 18px;border-bottom:2px dashed rgba(184,255,156,.3);font-size:.98rem}
.w-row:last-child{border-bottom:0}
.w-row b{color:var(--lemon);font-weight:700}
.w-head{font:400 .6875rem/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#F3FFEF}
@media (max-width:700px){.w-row{grid-template-columns:3.4rem 1fr;}.w-row span:nth-child(3),.w-row span:nth-child(4){grid-column:2}.w-head span:nth-child(n+3){display:none}}
.w-cards{display:grid;gap:14px;margin-top:28px}
@media (min-width:900px){.w-cards{grid-template-columns:repeat(3,1fr)}}
.w-card{background:var(--c);border:3px solid var(--ink);border-radius:20px;padding:22px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;gap:8px;min-height:240px}
.w-card h3{font-family:var(--disp);font-weight:800;font-size:1.5rem;line-height:1.05}
.w-n{margin-top:auto;font-family:var(--disp);font-weight:800;font-size:3rem;line-height:.9}
.w-n small{font-size:.35em;font-family:var(--sans);font-weight:600}
.w-end{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.w-qa{margin-top:28px}
/* sample websites */
.doc .smps{list-style:none;margin:32px 0 0;padding:0;max-width:none;gap:18px;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.doc .smp{max-width:none;font-size:inherit;line-height:inherit}
.smp-a{display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 18px 40px -24px rgba(0,0,0,.45);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.smp-ph{display:block;aspect-ratio:16/9;overflow:hidden;background:#ddd}
.smp-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.smp-t{display:grid;gap:6px;padding:16px 18px 18px}
.smp-t b{font-size:1.25rem;letter-spacing:-.02em;line-height:1.1}
.smp-go{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:.9375rem;margin-top:4px}
@media (hover:hover){.smp-a:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 26px 50px -24px rgba(0,0,0,.5)}.smp-a:hover img{transform:scale(1.04)}}
.smp-a:focus-visible{outline:3px solid currentColor;outline-offset:3px}
[data-variant="g"] .smp-a{border-radius:16px;background:#fffdf5;box-shadow:0 0 0 3px #151515,6px 6px 0 #151515}
@media (prefers-reduced-motion:reduce){.smp-a,.smp-ph img{transition:none}}

/* thank-you sign-off */
.ty-sign{margin:12px 0 0;font-size:.9375rem;line-height:1.4;opacity:.92}
.ty-sign a{color:inherit;text-underline-offset:3px}
