/* Shared stylesheet for the static SEO pages (seo/data.js -> generated by
   scripts/build-seo-pages.js). Deliberately a subset of index.html's own
   design tokens/classes — same variables, same font stack, same card/button
   language — so these pages read as the same product, not a separate
   "marketing site" bolted on. Cacheable across every SEO page instead of
   duplicating a <style> block into each one. */
:root{
  --paper:#f7f5f0; --paper-dark:#ece8de; --ink:#1c1c1a; --ink-soft:#55534c;
  --rule:#cfc9ba; --red:#a8321f; --green:#2f5d3a; --amber:#a9720f; --yellow:#f5c518; --blue:#2b5b82;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper-dark);
  background-image:radial-gradient(circle at 1px 1px, rgba(28,28,26,0.06) 1px, transparent 0);
  background-size:14px 14px;
  font-family:'IBM Plex Sans',sans-serif; color:var(--ink);
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  padding:56px 16px 80px;
}
.wrap{width:100%; max-width:980px; background:#faf8f2; border:1px solid var(--rule); border-radius:28px;
  padding:clamp(24px,4vw,36px) clamp(20px,5vw,44px) clamp(28px,5vw,44px);
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 48px -28px rgba(28,28,26,0.3);}

a{color:inherit;}

/* nav */
.nav-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 clamp(28px,5vw,44px); flex-wrap:wrap;}
.nav-brand{display:flex; align-items:center; gap:9px; text-decoration:none;}
.nav-brand img{width:36px; height:auto; border-radius:8px; display:block;}
.nav-brand .nav-mark{font-family:'Poppins',sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.01em; text-transform:uppercase; color:var(--ink);}
.nav-btn{font-family:'IBM Plex Sans',sans-serif; font-size:13.5px; font-weight:600; padding:9px 16px; border-radius:10px;
  border:1.5px solid var(--ink); background:var(--ink); color:var(--paper); text-decoration:none; white-space:nowrap;}
.nav-btn:hover{opacity:0.88;}

/* breadcrumb */
.crumbs{font-size:12.5px; color:var(--ink-soft); margin:0 0 18px;}
.crumbs a{text-decoration:underline; text-underline-offset:2px;}
.crumbs a:hover{color:var(--ink);}

/* page hero */
.page-hero{margin-bottom:clamp(24px,4vw,36px);}
.page-hero h1{font-family:'Poppins',sans-serif; font-weight:800; font-size:clamp(28px,4vw,38px); line-height:1.15;
  letter-spacing:-0.01em; margin:0 0 12px;}
.page-hero p{font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:62ch; margin:0;}

.hero-btn{font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:14.5px; padding:14px 22px; border-radius:12px;
  border:1.5px solid var(--ink); display:inline-flex; align-items:center; gap:8px; text-decoration:none; margin-top:20px;}
.hero-btn.primary{background:var(--ink); color:var(--paper); box-shadow:0 4px 0 0 var(--yellow);}

/* section headings */
.section-title{font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:15px; margin:0 0 14px;}

/* idea / card grids — same visual language as the app's example cards */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:clamp(20px,4vw,32px);}
.idea-card,.link-card{display:block; border:1px solid var(--rule); border-radius:16px; padding:18px; background:#fffdf8;
  text-decoration:none; color:inherit;}
.idea-card .emoji,.link-card .emoji{font-size:22px; margin-bottom:10px;}
.idea-card h3,.link-card h3{font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:14.5px; line-height:1.3; margin:0 0 6px;}
.idea-card p,.link-card p{font-size:12px; color:var(--ink-soft); margin:0;}
.link-card{transition:transform 0.12s, border-color 0.12s;}
.link-card:hover{border-color:var(--ink); transform:translateY(-2px);}

.divider{border-top:1px dashed var(--rule); margin:clamp(24px,4vw,36px) 0;}

/* related links */
.related-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px;}
.related-list li a{display:inline-block; border:1px solid var(--rule); border-radius:999px; padding:7px 14px;
  font-size:13px; font-weight:600; text-decoration:none; background:#fffdf8;}
.related-list li a:hover{border-color:var(--ink);}

/* template page */
.tpl-hero{text-align:center;}
.tpl-emoji{font-size:44px; line-height:1; margin-bottom:10px;}
.tpl-hero p{margin-left:auto; margin-right:auto;}
.tpl-blurb{font-family:'Quicksand',sans-serif; font-weight:600; font-style:italic; font-size:15px; color:var(--ink-soft);
  text-align:center; max-width:56ch; margin:0 auto 24px; line-height:1.5;}

/* the "ticket preview" — same field/label/value language as the real
   in-app bet ticket, so a template page reads as "here's what you'll
   actually get," not just a spec sheet. */
.tpl-preview{background:#fffdf8; border:1px solid var(--rule); border-radius:20px;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 40px -22px rgba(28,28,26,0.28);
  padding:22px 24px; margin-bottom:22px;}
.tpl-preview-row{padding:12px 0; border-bottom:1px dotted var(--rule);}
.tpl-preview-row:last-child{border-bottom:none; padding-bottom:0;}
.tpl-preview-row:first-child{padding-top:0;}
.tpl-preview-label{display:block; font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:12.5px;
  color:var(--ink-soft); margin-bottom:4px;}
.tpl-preview-value{display:block; font-size:16px; line-height:1.4;}

/* mini 3-step strip — same idea as the homepage's "how it works," scaled
   down, so a template page still explains the product to a first-time
   visitor rather than assuming they already know how Betnowly works. */
.mini-steps{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 8px; padding:16px 18px;
  background:#fdf6da; border:1px solid #f0dfa0; border-radius:16px;}
.mini-step{flex:1 1 200px; display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink-soft); line-height:1.4;}
.mini-step-num{flex:none; width:20px; height:20px; border-radius:50%; background:var(--ink); color:var(--paper);
  font-family:'Poppins',sans-serif; font-weight:700; font-size:11px; display:flex; align-items:center; justify-content:center;}

/* footer */
.footer-strip{display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; margin-top:32px;
  padding-top:22px; border-top:1px dashed var(--rule); font-size:12.5px; color:var(--ink-soft);}
.footer-strip a{text-decoration:none;}
.footer-strip a:hover{color:var(--ink);}

@media (max-width:720px){
  .card-grid{grid-template-columns:1fr;}
}