/* Public tool pages (/seating-plan-maker, /random-name-picker, …).
   Same tokens and type as the landing page (kredits/start.html). */
:root{
  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-600:#2563EB; --blue-700:#1D4ED8;
  --green-50:#F0FDF4; --green-600:#16A34A;
  --amber-50:#FFFBEB; --amber-600:#D97706;
  --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB;
  --gray-400:#9CA3AF; --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151; --gray-900:#111827;
  --white:#FFFFFF;
  --font-heading:'Plus Jakarta Sans',sans-serif;
  --font-body:'Inter',sans-serif;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
  --radius-md:10px; --radius-lg:16px; --radius-full:9999px;
}
*{box-sizing:border-box;}
body{margin:0; font-family:var(--font-body); color:var(--gray-900); background:var(--white); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-heading); margin:0;}
p{margin:0;}
a{color:inherit;}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

/* ── TOP BAR ── */
header{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 24px; max-width:1080px; margin:0 auto;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:800; font-size:20px; text-decoration:none;}
.brand-mark{width:32px; height:32px; border-radius:9px; background:var(--blue-600); color:var(--white); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800;}

.btn{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-family:var(--font-heading); font-weight:700; font-size:15px; text-decoration:none; border-radius:var(--radius-full); padding:11px 22px; transition:background .15s ease, transform .15s ease;}
.btn-primary{background:var(--blue-600); color:var(--white);}
.btn-primary:hover{background:var(--blue-700); transform:translateY(-1px);}
.btn-ghost{color:var(--gray-700); border:1px solid var(--gray-200); background:var(--white);}
.btn-ghost:hover{border-color:var(--gray-300);}
.btn-lg{font-size:16px; padding:14px 28px;}

/* ── BREADCRUMB ── */
.crumbs{max-width:1080px; margin:0 auto; padding:0 24px; font-size:13px; color:var(--gray-500);}
.crumbs a{color:var(--gray-600); text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}

/* ── HERO ── */
.hero{max-width:1080px; margin:0 auto; padding:40px 24px 40px;}
.hero > div{max-width:720px;}
.eyebrow{display:inline-block; font-size:13px; font-weight:700; color:var(--blue-600); background:var(--blue-50); border-radius:var(--radius-full); padding:5px 12px; margin-bottom:18px;}
.hero h1{font-size:clamp(32px,5vw,48px); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:18px;}
.hero .sub{font-size:18px; line-height:1.6; color:var(--gray-600); margin-bottom:28px; max-width:640px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.fine-print{font-size:13px; color:var(--gray-500);}
/* ── SCREENSHOTS ── */
.shot{margin:0;}
.shot img{display:block; width:100%; height:auto; border:1px solid var(--gray-200); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.10);}
.shot figcaption{font-size:13px; line-height:1.5; color:var(--gray-500); margin-top:12px; text-align:center;}
.shot-main{max-width:1080px; margin:0 auto; padding:0 24px 72px;}
.split{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;}

/* ── SECTIONS ── */
.section{max-width:1080px; margin:0 auto; padding:56px 24px;}
.section-head{max-width:680px; margin-bottom:32px;}
.section-head h2{font-size:clamp(24px,3.5vw,30px); font-weight:800; letter-spacing:-.01em; margin-bottom:10px;}
.section-head p{font-size:16px; line-height:1.65; color:var(--gray-600);}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.card{background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);}
.card h3{font-size:16px; font-weight:700; margin-bottom:6px;}
.card p{font-size:14px; line-height:1.55; color:var(--gray-600);}

.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:step;}
.steps li{counter-increment:step; background:var(--gray-50); border-radius:var(--radius-lg); padding:22px;}
.steps li::before{content:counter(step); display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--blue-600); color:var(--white); font-family:var(--font-heading); font-weight:800; margin-bottom:12px;}
.steps h3{font-size:16px; font-weight:700; margin-bottom:6px;}
.steps p{font-size:14px; line-height:1.55; color:var(--gray-600);}

.prose{max-width:720px;}
.prose p{font-size:16px; line-height:1.7; color:var(--gray-600); margin-bottom:14px;}
.prose a{color:var(--blue-600); font-weight:600;}

/* ── FAQ ── */
.faq{max-width:760px;}
.faq details{border-bottom:1px solid var(--gray-200); padding:18px 0;}
.faq summary{font-family:var(--font-heading); font-weight:700; font-size:17px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; color:var(--blue-600); font-size:22px; line-height:1; flex-shrink:0;}
.faq details[open] summary::after{content:"−";}
.faq details p{font-size:15px; line-height:1.7; color:var(--gray-600); margin-top:10px;}

/* ── RELATED TOOLS ── */
.related{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;}
.related a{display:block; text-decoration:none; border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:16px; transition:border-color .15s ease, box-shadow .15s ease;}
.related a:hover{border-color:var(--blue-600); box-shadow:var(--shadow-md);}
.related b{display:block; font-family:var(--font-heading); font-size:15px; margin-bottom:4px;}
.related span{font-size:13px; color:var(--gray-600); line-height:1.5;}

/* ── CTA + FOOTER ── */
.cta-band{text-align:center; padding:64px 24px; background:var(--gray-900); color:var(--white); border-radius:var(--radius-lg); max-width:1080px; margin:24px auto 56px;}
.cta-band h2{font-size:clamp(24px,4vw,32px); font-weight:800; margin-bottom:12px; letter-spacing:-.01em;}
.cta-band p{color:var(--gray-300); font-size:16px; margin-bottom:26px;}
footer{text-align:center; padding:28px 24px 40px; font-size:13px; line-height:1.9; color:var(--gray-500);}
footer a{color:var(--gray-700); text-decoration:underline; font-weight:600;}

@media (max-width:860px){
  .hero{padding-top:28px;}
  .split{grid-template-columns:1fr; gap:28px;}
  .grid,.steps{grid-template-columns:1fr 1fr;}
  .related{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  header{padding:16px;}
  header .btn{padding:9px 16px; font-size:14px;}
  .wrap,.section,.hero,.crumbs,.shot-main{padding-left:16px; padding-right:16px;}
  .shot-main{padding-bottom:48px;}
  .grid,.steps,.related{grid-template-columns:1fr;}
  .cta-band{margin-left:16px; margin-right:16px; padding:48px 20px;}
}