/* Shared base for the Grindin AI mockup: tokens from design/grindinai/v2 (d-rap), header, footer, buttons, forms. */
:root{
  --blood:#33050a;--ink:#4f070d;--red:#c8141e;--hi:#ff6a5c;--bone:#efe4d2;--gold:#e3b23c;--black:#120203;--mute:#dcc6b8;
  --f-body:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --f-black:"Pirata One",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--blood);color:var(--bone);font:17px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--gold);color:var(--black);padding:12px 16px;font-weight:900}
.skip:focus{top:12px}
.wrap{width:min(1280px,100% - 48px);margin-inline:auto}

/* type scale: condensed black caps for headings, mono for small labels */
.h1,.h2,.h3{font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.96;letter-spacing:-.005em;hyphens:auto;overflow-wrap:break-word}
.h1{font-size:clamp(2.35rem,7vw,6rem)}
.h2{font-size:clamp(2.1rem,5.4vw,4.6rem)}
.h3{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1}
.mono{font-family:var(--f-mono);font-weight:500;font-size:.86rem;letter-spacing:-.01em}
.lead{color:var(--mute);max-width:56ch;margin-top:18px}
.sec{padding:clamp(56px,8vw,112px) 0}
.paper{background:var(--bone);color:var(--black)}
.paper .lead{color:#4a2a2c}
.dark{background:var(--black)}
.deep{background:var(--ink)}

/* buttons: filled only, hard offset shadow from the brand */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:0;cursor:pointer;
  background:var(--red);color:var(--bone);font:900 1rem/1 var(--f-body);font-stretch:75%;text-transform:uppercase;letter-spacing:.07em;
  box-shadow:5px 5px 0 var(--black);transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--black)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--black)}
.btn.gold{background:var(--gold);color:var(--black)}
.btn.bone{background:var(--bone);color:var(--black)}
.btn.black{background:var(--black);color:var(--bone);box-shadow:5px 5px 0 var(--red)}
.btn.small{min-height:44px;padding:0 16px;font-size:.92rem}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:900;font-stretch:75%;text-transform:uppercase;letter-spacing:.07em;
  text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:7px;text-decoration-color:var(--red)}
.more:hover{color:var(--gold);text-decoration-color:var(--gold)}
.paper .more:hover{color:var(--red)}

/* header */
.top{position:sticky;top:0;z-index:40;background:var(--black)}
.top-in{display:flex;align-items:center;gap:28px;min-height:68px}
.logo{display:inline-flex;align-items:center;min-height:44px;font:500 1.18rem/1 var(--f-mono);letter-spacing:-.03em;color:var(--bone);white-space:nowrap}
.logo b{font-weight:800;color:var(--hi)}
.logo img{display:block;height:32px;width:auto}
.main{display:flex;align-items:center;gap:6px;margin-left:auto}
.main a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-weight:900;font-stretch:75%;text-transform:uppercase;letter-spacing:.08em;font-size:.9rem}
.main a:hover{color:var(--gold)}
.main a[aria-current="page"]{color:var(--gold);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
.main a.cta{background:var(--red);margin-left:10px;padding:0 18px}
.main a.cta:hover{background:var(--gold);color:var(--black)}
.crumbs{background:var(--ink);font-family:var(--f-mono);font-size:.82rem;color:var(--mute)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;min-height:44px}
.crumbs li+li::before{content:"/";margin:0 .7em;color:var(--hi)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--gold)}

/* mobile dock: own layout on phones */
.dock{display:none}

/* footer */
.foot{background:var(--black);color:var(--mute);padding:44px 0 40px;font-size:.95rem}
.foot-in{display:grid;grid-template-columns:1.3fr 1fr auto;gap:18px 40px;align-items:start}
.foot-brand{display:grid;gap:14px;align-content:start}
.foot-logo{display:inline-flex;align-items:center;min-height:44px}
.foot-logo img{display:block;height:32px;width:auto}
.foot-h{margin-bottom:4px;font-family:var(--f-mono);font-size:.8rem;color:var(--hi)}
.foot-col a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--bone);text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}
.foot-col a:hover{color:var(--gold)}
.foot-legal{margin-top:28px;font-family:var(--f-mono);font-size:.78rem;color:var(--mute)}
.foot .mock{color:var(--bone);font-family:var(--f-mono);font-size:.84rem;max-width:44ch}
.foot .mock b{color:var(--gold);font-weight:800}
.foot nav{display:flex;flex-direction:column}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:900;font-stretch:75%;text-transform:uppercase;letter-spacing:.08em;color:var(--bone)}
.foot nav a:hover{color:var(--gold)}

/* forms */
.form{display:grid;gap:16px}
.form label{display:grid;gap:7px;font-weight:700;font-size:.95rem;color:var(--black)}
.form input,.form select,.form textarea{font:inherit;color:var(--black);background:#fbf6ec;border:0;box-shadow:inset 0 0 0 2px #b9a68c;padding:12px 14px;min-height:48px;width:100%;border-radius:0}
.form textarea{min-height:110px;resize:vertical}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--red);outline-offset:0}
.form [aria-invalid="true"]{box-shadow:inset 0 0 0 3px var(--red);background:#fff1ee}
.err{min-height:1.2em;font-size:.88rem;font-weight:700;color:#9b0f18}
.fstatus{min-height:1.5em;font-weight:700;font-size:.95rem;color:#4a2a2c}
.fstatus.ok{color:#0d5a2a}

@media (max-width:980px){
  .foot-in{grid-template-columns:1fr 1fr}
  .main a:not(.cta){padding:0 10px}
}
@media (max-width:720px){
  html{scroll-padding-top:70px}
  body{font-size:16px;padding-bottom:68px}
  .wrap{width:min(1280px,100% - 32px)}
  .top-in{min-height:60px;gap:12px}
  .main a:not(.cta){display:none}
  .main a.cta{margin-left:0;min-height:44px}
  .dock{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--black);box-shadow:0 -3px 0 var(--red)}
  .dock a{display:flex;align-items:center;justify-content:center;min-height:60px;padding:6px 4px;text-align:center;font-weight:900;font-stretch:75%;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;line-height:1.1}
  .dock a[aria-current="page"]{background:var(--red)}
  .dock a.go{background:var(--gold);color:var(--black)}
  .foot-in{grid-template-columns:1fr}
  .btn{width:100%}
  .btn.small{width:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* offer banner and live countdowns (shared by both pages) */
.deal{display:block;margin-top:22px;max-width:56ch;background:var(--gold);color:var(--black);padding:12px 18px;font-weight:900;font-stretch:80%;text-transform:uppercase;letter-spacing:.05em}
.counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.counter{background:var(--black);padding:16px 18px;box-shadow:6px 6px 0 var(--red)}
.counter .lab{display:block;font-weight:900;font-stretch:75%;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
.counter .val{display:block;margin-top:6px;font-family:var(--f-mono);font-weight:800;font-size:clamp(1.2rem,1.9vw,1.65rem);color:var(--gold);letter-spacing:-.04em;line-height:1.15}
@media (max-width:480px){.counters{grid-template-columns:minmax(0,1fr)}}