/* Goofy Licenses house pages (homepage + coming-soon). Shared styles. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#F4EFE4; --card:#FFFDF8; --ink:#1D2140; --muted:#4E5270; --stamp:#C0392B;
  --on-ink:#F4EFE4; --on-ink-muted:#C9CBE0; --on-ink-accent:#F2B8B0;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gutter:96px;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}
a:hover{color:var(--stamp)}
img{display:block;max-width:100%}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.16em;color:var(--stamp);text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;font-size:18px;text-decoration:none;border-radius:10px;padding:17px 28px;border:2px solid var(--ink);cursor:pointer;min-height:48px}
.btn-solid{background:var(--ink);color:var(--on-ink)}
.btn-solid:hover{color:var(--on-ink);background:#2A2F5A}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:rgba(29,33,64,.06);color:var(--ink)}
.btn svg{flex:0 0 auto}
:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--gutter);border-bottom:2px solid var(--ink)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{flex:0 0 auto;display:block}
.brand-name{display:flex;flex-direction:column;gap:3px}
.brand-name b{font-family:var(--display);font-weight:800;font-size:24px;line-height:1;letter-spacing:.01em}
.brand-name span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--muted)}
.nav{display:flex;align-items:center;gap:34px;font-weight:500;font-size:16px}
.nav a{text-decoration:none}

/* Hero */
.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center;padding:76px var(--gutter) 92px}
.hero-copy{display:flex;flex-direction:column;gap:24px}
.hero h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(44px,5.4vw,78px);line-height:.98;letter-spacing:-.02em}
.hero p{margin:0;font-size:20px;line-height:1.55;color:var(--muted);max-width:560px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.hero-note{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.fan{position:relative;height:470px;perspective:1200px}
/* Hero cards. At rest the transform is exactly the old 2D rotate (tilt vars
   are 0); home.js springs --rx/--ry from 0 under the cursor, so the motion
   starts from the resting pose with no jump, and never straightens the card. */
.fan .card{position:absolute;display:block;width:440px;max-width:78%;aspect-ratio:1011/638;border-radius:20px;overflow:hidden;
  --rx:0deg;--ry:0deg;--sx:0px;--sy:0px;--g:0;--gx:50%;--gy:50%;
  transform:rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--base));
  box-shadow:var(--sx) calc(24px + var(--sy)) 48px rgba(29,33,64,.28)}
.fan .card img{width:100%;height:100%;object-fit:cover}
.fan .card .glare{position:absolute;inset:0;pointer-events:none;opacity:var(--g);
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.42),rgba(255,255,255,0) 58%)}
.fan .card:focus-visible{outline-offset:4px}
.fan .c1{left:0;top:36px;--base:-7deg}
.fan .c2{right:0;top:170px;--base:5deg}
.stamp{position:absolute;right:36px;top:30px;transform:rotate(-12deg);border:6px double var(--stamp);color:var(--stamp);font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:.1em;padding:6px 18px;border-radius:6px;background:rgba(244,239,228,.88);pointer-events:none}

/* License tiles */
.licenses{display:flex;flex-direction:column;gap:28px;padding:8px var(--gutter) 100px}
.lic-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;border-top:2px solid var(--ink);padding-top:44px}
.lic-head-copy{display:flex;flex-direction:column;gap:12px}
.lic-head h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.02em;max-width:820px}
.lic-head p{margin:0;font-size:18px;line-height:1.5;color:var(--muted);max-width:440px}
.grid-live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.grid-soon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.tile{display:flex;flex-direction:column;background:var(--card);border:2px solid var(--ink);border-radius:18px;overflow:hidden}
.tile.suggest{background:transparent;border-style:dashed}
.stub{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;border-bottom:2px dashed var(--ink);font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.stub b{font-weight:600}
.stub span{color:var(--muted);text-align:right}
.stub .soon{color:var(--stamp);font-weight:600}
.shot{height:300px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.shot img{width:390px;max-width:80%;aspect-ratio:1011/638;object-fit:cover;border-radius:16px;box-shadow:0 18px 36px rgba(0,0,0,.35)}
.shot.plc img{transform:rotate(-2deg)}
.shot.goat img{transform:rotate(2deg)}
.shot .star{position:absolute;background:var(--on-ink)}
.tile-body{display:flex;flex-direction:column;gap:14px;padding:24px 26px 28px;flex:1}
.tile-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.1em;padding:5px 10px;border-radius:6px;text-transform:uppercase}
.price{font-family:var(--mono);font-size:13px;color:var(--muted)}
.tile h3{margin:0;font-family:var(--display);font-weight:700;font-size:34px;line-height:1.05}
.tile p{margin:0;font-size:17px;line-height:1.5;color:var(--muted)}
.tile .go{justify-content:space-between;margin-top:auto;font-size:17px;padding:16px 20px}
.tile .fine{font-size:14px;color:var(--muted)}
.soon-title{display:flex;align-items:center;gap:16px}
.soon-icon{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.suggest .soon-icon{border:2px solid var(--ink)}
.soon-title h3{font-size:28px}
.grid-soon .tile-body{padding:24px 24px 26px}
.grid-soon p{font-size:16px}
.notify{display:flex;flex-direction:column;gap:8px;margin:auto 0 0}
.notify label{font-size:13px;font-weight:600}
.notify .row{display:flex;gap:8px}
.notify input[type=email],.notify input[type=text]{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:var(--ink)}
.notify button{font:inherit;font-weight:600;font-size:16px;padding:12px 16px;border:2px solid var(--ink);border-radius:10px;background:var(--ink);color:var(--on-ink);cursor:pointer;white-space:nowrap}
.suggest .notify button{background:transparent;color:var(--ink)}
.notify button[disabled]{opacity:.6;cursor:default}
.notify .msg{font-size:14px;min-height:1.2em;color:var(--muted)}
.notify .msg.ok{color:#14513D;font-weight:600}
.notify .msg.err{color:var(--stamp)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* How it works */
.how{background:var(--ink);color:var(--on-ink);padding:84px var(--gutter) 92px;display:flex;flex-direction:column;gap:44px}
.how .eyebrow{color:var(--on-ink-accent)}
.how h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(32px,3.6vw,48px);line-height:1.02;letter-spacing:-.02em}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin:0;padding:0;list-style:none}
.steps li{display:flex;flex-direction:column;gap:12px;border-top:2px solid var(--on-ink);padding-top:22px}
.steps .n{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:.1em}
.steps h3{margin:0;font-family:var(--display);font-weight:700;font-size:28px}
.steps p{margin:0;font-size:17px;line-height:1.55;color:var(--on-ink-muted)}

.fineprint{padding:26px var(--gutter);border-bottom:2px solid var(--ink);font-family:var(--mono);font-size:13px;line-height:1.6;letter-spacing:.04em;color:var(--muted);margin:0}
.foot{padding:52px var(--gutter) 60px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.foot > div{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot h4{margin:0;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--muted)}
.foot .wm{font-family:var(--display);font-weight:800;font-size:22px}
.foot .dim{color:var(--muted)}

@media (max-width:1100px){
  :root{--gutter:40px}
  .grid-soon{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-soon .suggest{grid-column:1 / -1}
}
@media (max-width:860px){
  :root{--gutter:20px}
  .nav a.hide-sm{display:none}
  .hero{grid-template-columns:1fr;gap:28px;padding-top:32px;padding-bottom:40px}
  .hero p{font-size:17px}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%}
  .fan{height:260px;order:2}
  .fan .card{width:270px;max-width:70%;border-radius:14px}
  .fan .c1{top:8px}
  .fan .c2{top:76px}
  .stamp{right:6px;top:4px;font-size:20px;border-width:5px;padding:4px 12px}
  .lic-head{flex-direction:column;align-items:flex-start;gap:10px;padding-top:32px}
  .lic-head p{font-size:16px}
  .licenses{gap:20px;padding-bottom:48px}
  .grid-live,.grid-soon{grid-template-columns:1fr;gap:20px}
  .shot{height:210px}
  .shot img{width:262px;border-radius:12px}
  .tile-body{padding:20px 18px 22px}
  .tile h3{font-size:28px}
  .soon-title h3{font-size:24px}
  .soon-icon{width:52px;height:52px}
  .stub{padding:12px 16px;font-size:12px}
  .how{padding:48px var(--gutter) 52px;gap:28px}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps h3{font-size:24px}
  .foot{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:32px var(--gutter) 40px}
  .foot > div:first-child{grid-column:1 / -1}
}
@media (max-width:420px){
  .brand-name span{display:none}
  .brand .mark{width:44px;height:32px}
  .nav{gap:16px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Coming-soon page */
.soon-wrap{padding:72px var(--gutter) 64px}
.soon-hero{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:720px}
.soon-hero h1{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(44px,6vw,84px);line-height:.98;letter-spacing:-.02em}
.soon-hero p{margin:0;font-size:20px;line-height:1.55;color:var(--muted)}
.soon-icon.big{width:96px;height:96px;border-radius:22px}
.soon-icon.big svg{width:60px;height:60px}
.soon-form{width:100%;max-width:520px;margin-top:6px}
@media (max-width:860px){
  .soon-wrap{padding:36px var(--gutter) 40px}
  .soon-hero p{font-size:17px}
  .soon-icon.big{width:72px;height:72px}
  .soon-icon.big svg{width:44px;height:44px}
}

/* Maker's note: deliberately quiet */
.foot .maker{grid-column:1 / -1;margin:6px 0 0;font-size:13px;font-style:italic;color:var(--muted);opacity:.85}