/* SportsAds design system, shared by index.html, app.html and admin.html.
   Bold and clean: warm neutrals, Clash Display headings, Satoshi body,
   square buttons. Red-orange (--accent) is for buttons and large type only;
   on beige it is ~3.2:1, so small text and small links stay --text.
   Motion: entrances move with transform only and never start invisible, so
   every page reads fine without JavaScript. The hero blob and the loading
   shimmer are the only loops, and both stop under prefers-reduced-motion. */

/* ---------- Tokens ---------- */
:root{
  /* colour */
  --bg:#E4E2DD;
  --text:#1E1E1E;
  --text-2:#444444;
  --accent:#DB4A2B;             /* buttons and large type only */
  --accent-2:#F8A348;           /* gradients, and small accents on dark */
  --accent-3:#FF89A9;           /* hover states (decoration, never text) */
  --surface:#D9D6D0;
  --footer:#1E1E1E;
  --white:#FFFFFF;
  --field:#F2F0EC;              /* inputs and the feed-ad mockup */
  --line:#C4C0B9;
  --line-strong:#8A857D;
  --placeholder:#66625B;
  --accent-soft:#F0D8C9;
  --accent-line:#E2B9A3;
  --good:#2f6b3a;
  --good-soft:#e8f4ea;
  --good-line:#cfe6d4;
  --bad:#a3271a;
  --bad-soft:#fbe9e7;
  --bad-line:#f3cbc5;
  --on-dark-muted:rgba(228,226,221,.72);

  /* old names, still used by app.html, admin.html and inline banner styles */
  --ink:var(--text);
  --ink-2:var(--text);
  --muted:var(--text-2);
  --accent-deep:var(--text);    /* was small orange text; small text is dark now */
  --accent-bright:var(--accent-2);
  --surface-2:var(--field);
  --paper:var(--bg);

  /* spacing (4px base) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;

  /* type */
  --font-display:'Clash Display',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'Satoshi',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:var(--font-body);
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.25rem;
  --fs-xl:1.5rem;
  --fs-btn:1.1667rem;
  --fs-h2:clamp(1.75rem,8vw,6rem);
  /* The 2rem floor keeps a 13-letter word like PROEFTRAINING inside 375px
     (and 320px); 48px would overflow by ~45px. */
  --fs-h1:clamp(2rem,10.6vw,10rem);

  /* radius: buttons are square; app cards and inputs keep a soft corner */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-pill:999px;

  --shadow-xs:0 1px 2px rgba(30,30,30,.05);
  --shadow-rest:0 1px 2px rgba(30,30,30,.04),0 8px 24px -12px rgba(30,30,30,.12);
  --shadow-lift:0 2px 4px rgba(30,30,30,.04),0 22px 44px -18px rgba(30,30,30,.24);

  /* motion */
  --dur-fast:150ms;
  --dur:250ms;
  --dur-btn:300ms;
  --dur-slow:400ms;
  --dur-enter:600ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--fs-base);font-weight:400;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--bg)}
img{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,.logo{font-family:var(--font-display);font-weight:700}
h1,h2,h3{text-wrap:balance;word-spacing:.08em}
.mono{font-family:var(--font-body);font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
.hidden{display:none}

/* Keyboard focus: always visible, never shown for mouse clicks. */
:focus-visible{outline:2.5px solid var(--text);outline-offset:3px;border-radius:2px}
.btn:focus-visible,.btn-save:focus-visible,.copy-btn:focus-visible,#generateBtn:focus-visible{border-radius:0}

.wrap{max-width:1160px;margin:0 auto;padding:0 var(--s-5)}
section[id]{scroll-margin-top:84px}

/* ---------- Nav ---------- */
/* The background layer fades in once the page scrolls (animations.js sets
   .is-scrolled). Without JS it simply stays visible. */
nav{position:sticky;top:0;z-index:50;padding:var(--s-4) 0}
nav::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);transition:opacity var(--dur) var(--ease-out);pointer-events:none}
html.js nav:not(.is-scrolled)::before{opacity:0}
nav > *{position:relative}
nav .wrap,nav .inner{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4)}
nav .inner{max-width:1180px;margin:0 auto;padding:0 var(--s-5)}
.logo{font-size:1.375rem;letter-spacing:-.03em;line-height:1;color:var(--text)}
.logo span{color:var(--accent)}  /* 22px bold: large text, so the accent passes */
.nav-links{display:flex;gap:var(--s-5);align-items:center}
/* Small links: dark and underlined; the underline turns pink on hover. */
.nav-links > a:not(.btn),.back{font-size:.95rem;color:var(--text);font-weight:500;padding:var(--s-1) 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--line-strong);transition:text-decoration-color var(--dur) var(--ease-out)}
.nav-links > a:not(.btn):hover,.back:hover{text-decoration-color:var(--accent-3);text-decoration-thickness:2px}
.nav-auth{display:flex;gap:var(--s-2);align-items:center}

/* ---------- Buttons ---------- */
/* Square, dark, light label. On hover a white fill slides in from the left
   (::before, transform only) and the label turns dark (16:1 on white). */
.btn,.btn-save,#generateBtn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);background:var(--text);color:var(--bg);border:none;border-radius:0;font-family:var(--font-body);font-weight:700;font-size:var(--fs-btn);letter-spacing:0;line-height:1.2;cursor:pointer;white-space:nowrap;transition:color var(--dur-btn) var(--ease-out),box-shadow var(--dur-btn) var(--ease-out)}
.btn::before,.btn-save::before,#generateBtn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-btn) var(--ease-out);pointer-events:none}
@media (hover:hover){
  .btn:hover,.btn-save:hover:not(:disabled),#generateBtn:hover:not(:disabled){color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
  .btn:hover::before,.btn-save:hover:not(:disabled)::before,#generateBtn:hover:not(:disabled)::before{transform:scaleX(1)}
}
.btn{padding:14px 28px;min-height:48px;max-width:100%}
.btn-sm{padding:9px 16px;font-size:1rem;min-height:40px}
.btn-lg{padding:18px 34px;min-height:58px}
.btn-accent{background:var(--text);color:var(--bg)}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--text)}
.btn:active,.btn-save:active:not(:disabled),#generateBtn:active:not(:disabled){transform:scale(.98)}

/* Quiet secondary action, e.g. "Bekijk prijzen" next to the main CTA. */
.text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-family:var(--font-body);font-weight:700;font-size:var(--fs-md);color:var(--text);text-decoration:underline;text-decoration-color:var(--text);text-underline-offset:6px;text-decoration-thickness:1.5px;transition:text-decoration-color var(--dur) var(--ease-out)}
.text-link::after{content:"\2192";display:inline-block;transition:transform var(--dur) var(--ease-out)}
.text-link:hover{text-decoration-color:var(--accent-3);text-decoration-thickness:2.5px}
.text-link:hover::after{transform:translateX(4px)}

/* ---------- Entrances ---------- */
/* Content is never hidden: with JS it sits 24px low and slides up when it
   scrolls into view (animations.js adds .in and a stagger delay). */
html.js .reveal:not(.in){transform:translateY(24px)}
.reveal{transition:transform var(--dur-enter) var(--ease-out) var(--reveal-delay,0ms)}

@keyframes rise{from{transform:translateY(24px)}to{transform:none}}
@keyframes slide-in{from{transform:translateY(14px)}to{transform:none}}
@keyframes blob-pulse{0%,100%{opacity:.4}50%{opacity:.65}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* =====================================================================
   HOME (index.html), mobile first
   ===================================================================== */
.page-home .wrap{max-width:1360px;padding:0 var(--s-4)}
/* Clash's narrow space nearly vanishes at -0.03em uppercase, so words get a little air back */
.page-home h1,.page-home h2,.page-home h3{text-transform:uppercase;letter-spacing:-.03em;word-spacing:.12em;line-height:.9;text-wrap:wrap}

/* small uppercase labels */
.badge,.eyebrow,.calc-top label,.cc-tag,.tier .nm,.tier .tag-hot{font-family:var(--font-body);font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3}

/* ---------- Nav (fixed: logo left, links centre, account right) ---------- */
.page-home nav{position:fixed;left:0;right:0;padding:var(--s-3) 0}
.page-home nav .wrap{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--s-4)}
.page-home .nav-links{display:contents}
.page-home .nav-links > a:not(.btn){display:none}
.page-home .nav-auth{justify-self:end}

/* ---------- Hero ---------- */
header.hero{position:relative;isolation:isolate;overflow-x:clip}
.page-home .hero-grid{display:block}
.hero-copy{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:96px 0 var(--s-8)}
.hero-copy > *{animation:rise var(--dur-enter) var(--ease-out) backwards}
.hero-copy > :nth-child(2){animation-delay:80ms}
.hero-copy > :nth-child(3){animation-delay:160ms}
.hero-copy > :nth-child(4){animation-delay:240ms}

/* One soft blob, low right, away from the red-orange headline line. Only
   its opacity pulses. The layer fades out at the bottom so it never meets
   the calculator band with a hard edge. */
.hero-bg{position:absolute;inset:0 0 auto;height:100vh;height:100svh;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.hero-bg span{display:none}
.hero-bg span:first-child{display:block;position:absolute;width:min(100vw,720px);aspect-ratio:1;right:-28%;bottom:-12%;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));filter:blur(clamp(70px,9vw,120px));opacity:.5;animation:blob-pulse 9s ease-in-out infinite}

.badge{display:inline-flex;align-items:center;gap:var(--s-3);color:var(--text);margin-bottom:var(--s-5)}
.badge::before{content:"";width:24px;height:2px;background:var(--accent)}
.page-home h1{font-size:var(--fs-h1);margin-bottom:var(--s-6)}
.page-home h1 span{color:var(--accent)}
.hero-copy .sub{font-size:var(--fs-md);line-height:1.5;color:var(--text-2);max-width:420px;margin-bottom:var(--s-6)}
.cta-row{display:flex;gap:var(--s-3) var(--s-6);flex-wrap:wrap;align-items:center}
/* very narrow phones: let the long CTA label wrap, shrink the nav */
@media (max-width:359px){
  .cta-row .btn-lg{white-space:normal;text-align:center;padding:16px 20px}
  .page-home .logo{font-size:1rem}
  .page-home .nav-auth .btn-sm{font-size:.875rem;padding:8px 12px}
  .page-home nav .wrap{padding:0 var(--s-3);column-gap:var(--s-2)}
}

/* calculator: a --surface band right below the first screen */
.hero-asset{position:relative;padding:var(--s-8) 0}
.hero-asset::before{content:"";position:absolute;inset:0 calc(50% - 50vw);z-index:-1;background:var(--surface)}
.calc{display:grid;gap:0}
.calc-head h3{font-size:clamp(2rem,5vw,4rem);margin-bottom:var(--s-4)}
.calc-head p{color:var(--text-2);font-size:var(--fs-md);max-width:420px;margin-bottom:var(--s-6)}
.calc-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-2)}
.calc-top label{color:var(--text)}
/* --surface is too dark for red-orange text (2.9:1), so values here stay dark */
.calc-val{font-family:var(--font-display);font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.calc-val span{font-size:1rem;font-weight:500;color:var(--text-2);font-family:var(--font-body);letter-spacing:0}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:0;background:var(--line-strong);margin:var(--s-4) 0 var(--s-2);padding:0;border:0;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid var(--bg);transition:transform var(--dur-fast) var(--ease-out)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:3px solid var(--bg);border-radius:50%;background:var(--accent)}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
input[type=range]:focus-visible{outline-offset:6px}
.range-ends{display:flex;justify-content:space-between;font-size:.875rem;color:var(--text-2);margin-bottom:var(--s-6)}

.calc-compare{display:grid;grid-template-columns:1fr 1px 1fr;gap:var(--s-4);align-items:stretch;margin-bottom:var(--s-4)}
.cc-divider{background:var(--line-strong)}
.cc-col{padding:var(--s-4) 0}
.cc-col.cc-hot{background:var(--bg);padding:var(--s-4)}
.cc-tag{display:block;color:var(--text-2);margin-bottom:var(--s-3)}
.cc-hot .cc-tag{color:var(--text)}
.cc-num{font-family:var(--font-display);font-size:3rem;font-weight:700;letter-spacing:-.03em;line-height:.9;margin-bottom:var(--s-2);color:var(--text);font-variant-numeric:tabular-nums}
.cc-hot .cc-num{color:var(--accent)}  /* 48px on --bg: large text */
.cc-cap{font-size:.875rem;color:var(--text-2)}

.calc-delta{background:var(--text);color:var(--bg);padding:var(--s-4) var(--s-5);font-size:1rem;line-height:1.5;display:flex;gap:var(--s-3);align-items:flex-start}
.calc-delta svg{flex-shrink:0;width:16px;height:16px;stroke:var(--accent-2);margin-top:4px}
.calc-delta b{color:var(--accent-2)}
.calc-src{margin-top:var(--s-4);font-size:.8125rem;color:var(--text-2);line-height:1.5}

/* ---------- Sections ---------- */
.page-home section{padding:var(--s-9) 0}
.section-head{margin:0 0 var(--s-7)}
.eyebrow{color:var(--text);margin-bottom:var(--s-4);display:flex;align-items:center;gap:var(--s-3)}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent)}
.page-home h2{font-size:var(--fs-h2);margin-bottom:var(--s-5)}
.lead-t{color:var(--text-2);font-size:var(--fs-md);max-width:480px}

/* steps: big numbers, a rule on top, no boxes */
.steps{display:grid;gap:var(--s-7)}
.stepcard{border-top:2px solid var(--text);padding-top:var(--s-5)}
.step-num{display:block;font-family:var(--font-display);font-size:clamp(4.5rem,9vw,8rem);font-weight:700;line-height:.9;letter-spacing:-.03em;color:var(--accent);margin-bottom:var(--s-5)}
.stepcard h3{font-size:1.75rem;margin-bottom:var(--s-4)}
.stepcard p{color:var(--text-2);font-size:1.0625rem}

/* features: a Swiss grid of rules and colour fields */
.bento{display:grid;gap:var(--s-4)}
.bento-item{border-top:2px solid var(--text);padding:var(--s-5) 0 var(--s-6)}
.bento-tint,.bento-dark{border-top-color:transparent;padding:var(--s-6)}
.bento-tint{background:var(--surface)}
.bento-dark{background:var(--text);color:var(--on-dark-muted)}
.bento-dark h3{color:var(--bg)}
.bento-item .icon{margin-bottom:var(--s-5)}
.bento-item .icon svg{display:block;width:32px;height:32px;stroke:var(--accent);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.bento-dark .icon svg{stroke:var(--accent-2)}
.bento-item h3{font-size:1.5rem;margin-bottom:var(--s-3)}
.bento-item p{font-size:1rem;line-height:1.5;max-width:56ch}
.bento-item:not(.bento-dark) p{color:var(--text-2)}

/* pricing */
.tiers{display:grid;gap:var(--s-4)}
.tier{position:relative;display:flex;flex-direction:column;border-top:2px solid var(--text);padding:var(--s-6) var(--s-5)}
.tier .nm{color:var(--text-2)}
.tier .pr{font-family:var(--font-display);font-size:4rem;font-weight:700;line-height:.9;letter-spacing:-.03em;margin:var(--s-4) 0 var(--s-3);font-variant-numeric:tabular-nums}
.tier .pr small{font-size:1rem;font-weight:500;color:var(--text-2);font-family:var(--font-body);letter-spacing:0}
.tier .who{font-size:1rem;color:var(--text-2);margin-bottom:var(--s-5);min-height:48px}
.tier ul{list-style:none;margin-bottom:var(--s-6);flex:1}
.tier li{padding:var(--s-2) 0;font-size:1rem;display:flex;gap:var(--s-3);align-items:flex-start;color:var(--text);border-bottom:1px solid var(--line)}
.tier li b{color:var(--text);flex-shrink:0;font-weight:700}
.tier li.off{color:var(--text-2);text-decoration:line-through;text-decoration-color:var(--text-2)}
.tier li.off b{color:var(--line-strong)}
.tier .btn{width:100%}
.soon{font-size:.75rem;background:var(--accent-soft);color:var(--text);padding:2px 8px;margin-left:6px;font-weight:700;white-space:nowrap}
.tier-action{display:flex;flex-direction:column;gap:var(--s-3)}
.tier-current{display:flex;justify-content:center;align-items:center;min-height:48px;padding:12px 26px;border:2px dashed var(--line-strong);color:var(--text-2);font-family:var(--font-body);font-weight:700;font-size:1rem}

/* the recommended plan: a dark colour field */
.tier.hot{background:var(--text);color:var(--bg);border-top-color:var(--text)}
.tier.hot .nm{color:var(--accent-2)}
.tier.hot .pr{color:var(--accent)}  /* 64px on near-black: large text, 4:1 */
.tier.hot .pr small,.tier.hot .who{color:var(--on-dark-muted)}
.tier.hot li{color:var(--bg);border-bottom-color:rgba(228,226,221,.16)}
.tier.hot li b{color:var(--accent-2)}
.tier.hot .btn{background:var(--bg);color:var(--text)}
.tier.hot .tier-current{border-color:var(--on-dark-muted);color:var(--bg)}
/* pinned top right so the three plans keep their rows aligned */
.tier .tag-hot{position:absolute;top:var(--s-6);right:var(--s-5);background:var(--accent-2);color:var(--text);padding:3px 8px}

/* faq */
.faq{max-width:880px}
.q{border-bottom:1px solid var(--line-strong)}
.q:first-child{border-top:2px solid var(--text)}
.q summary{padding:var(--s-5) 0;font-family:var(--font-body);font-weight:500;font-size:var(--fs-lg);line-height:1.35;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:2px;transition:text-decoration-color var(--dur) var(--ease-out)}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"";flex-shrink:0;width:20px;height:20px;background:linear-gradient(var(--text),var(--text)) center/20px 2px no-repeat,linear-gradient(var(--text),var(--text)) center/2px 20px no-repeat;transition:transform var(--dur) var(--ease-out)}
.q[open] summary::after{transform:rotate(135deg)}
@media (hover:hover){.q summary:hover{text-decoration-color:var(--accent-3)}}
.q p{padding:0 0 var(--s-5);color:var(--text-2);font-size:1.0625rem;max-width:62ch}
.q[open] p{animation:slide-in var(--dur) var(--ease-out) backwards}

/* closing call to action, on a --surface field */
.final{background:var(--surface);padding:var(--s-9) 0}
.final h2{color:var(--text)}
.final .lead-t{margin-bottom:var(--s-6)}

/* footer: dark, three columns */
footer{padding:var(--s-6) var(--s-5);text-align:center;color:var(--text-2);font-size:.875rem}
.page-home footer{background:var(--footer);color:var(--bg);text-align:left;font-size:1rem;padding:var(--s-8) 0}
.footer-grid{display:grid;gap:var(--s-5)}
.foot-brand{font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:-.03em;line-height:1}
.foot-made{color:var(--on-dark-muted)}
.page-home footer a{color:var(--bg);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;transition:text-decoration-color var(--dur) var(--ease-out)}
.page-home footer a:hover{text-decoration-color:var(--accent-3);text-decoration-thickness:2px}

/* ---------- Home: wider screens ---------- */
@media (min-width:640px){
  .page-home .wrap{padding:0 var(--s-6)}
  .footer-grid{grid-template-columns:repeat(3,1fr);align-items:baseline}
}
@media (min-width:900px){
  .page-home nav .wrap{grid-template-columns:1fr auto auto auto 1fr;column-gap:var(--s-6)}
  .page-home .nav-links > a:not(.btn){display:inline-block}
  .page-home section{padding:var(--s-10) 0}
  .hero-asset{padding:var(--s-9) 0}
  .calc{grid-template-columns:5fr 6fr;column-gap:var(--s-8);align-items:start}
  .calc > *{grid-column:2}
  .calc-head{grid-column:1;grid-row:1 / span 7}
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
  .bento{grid-template-columns:repeat(3,1fr)}
  .bento-item.span2{grid-column:span 2}
  .bento-item.span3{grid-column:span 3;display:flex;align-items:center;gap:var(--s-6)}
  .bento-item.span3 .icon{margin-bottom:0}
  .bento-item.span3 .bento-copy{flex:1}
  .tiers{grid-template-columns:repeat(3,1fr)}
  .final{padding:var(--s-10) 0}
}
/* second headline line indents on desktop only */
@media (min-width:1100px){
  .page-home h1 span{display:inline-block;padding-left:.6em}
}

/* =====================================================================
   APP (app.html)
   ===================================================================== */
.page-app{padding-bottom:100px}
.page-app .wrap{max-width:680px}
.page-app nav{margin-bottom:var(--s-8)}

.page-head{text-align:center;margin-bottom:var(--s-6);animation:slide-in var(--dur-slow) var(--ease-out) backwards}
.pill{display:inline-flex;align-items:center;gap:var(--s-2);background:var(--accent-soft);border:1px solid var(--accent-line);padding:6px 14px;border-radius:var(--r-pill);font-family:var(--font-body);font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:var(--s-5)}
.pill svg{width:13px;height:13px;stroke:var(--text)}
.page-app h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.6rem);line-height:1.1;margin-bottom:var(--s-3)}
.page-app .sub{color:var(--muted);font-size:var(--fs-md);max-width:420px;margin:0 auto}

.form-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:40px 38px;box-shadow:var(--shadow-rest)}
#generatorBox{animation:slide-in var(--dur-slow) var(--ease-out) 80ms backwards}

.group{margin-bottom:var(--s-6)}
.group:last-of-type{margin-bottom:28px}
.group-label{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:var(--s-3)}
.group-label::after{content:"";flex:1;height:1px;background:var(--line)}

.field{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:18px}
.field:last-child{margin-bottom:0}
label{font-size:.875rem;color:var(--ink-2);font-weight:700}

input,select,textarea{padding:13px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:.95rem;font-family:var(--font-body);width:100%}
textarea{resize:vertical}
input:hover:not(:focus):not(:disabled),select:hover:not(:focus):not(:disabled),textarea:hover:not(:focus):not(:disabled){border-color:var(--line-strong);background:var(--white)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--white);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
input[type=checkbox]:focus-visible,input[type=file]:focus-visible{outline:2.5px solid var(--text);outline-offset:2px}
input::placeholder,textarea::placeholder{color:var(--placeholder);font-weight:400}
input[type=file]{padding:10px 12px;font-size:.88rem}
input[type=file]::file-selector-button{font-family:var(--font-body);font-weight:700;border:0;border-radius:0;background:var(--text);color:var(--bg);padding:8px 16px;margin-right:12px;cursor:pointer}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 15px center;background-size:16px;padding-right:44px}
select option{background-color:var(--field)}
input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}

button#generateBtn{width:100%;min-height:56px;padding:var(--s-4)}
button#generateBtn svg{width:17px;height:17px;stroke:currentColor;transition:transform var(--dur) var(--ease-out)}
@media (hover:hover){button#generateBtn:hover:not(:disabled) svg{transform:translateX(3px)}}
button#generateBtn:disabled{opacity:.45;cursor:not-allowed}
.form-foot{text-align:center;margin-top:18px;font-size:.8rem;color:var(--muted)}

/* results: the three cards rise in one after another */
.output-box{margin-top:52px}
.output-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:22px}
.output-head h2{font-size:1.4rem;letter-spacing:-.03em;font-weight:700;margin:0}
/* Result cards slide in but never start invisible: if a browser skips the
   animation, the cards are simply there. */
.ad-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;margin-bottom:var(--s-4);box-shadow:var(--shadow-xs);animation:slide-in var(--dur-slow) var(--ease-out) backwards;transition:transform var(--dur) var(--ease-out)}
.ad-card:nth-child(2){animation-delay:90ms}
.ad-card:nth-child(3){animation-delay:180ms}
.ad-card:nth-child(n+4){animation-delay:270ms}
.ad-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:var(--shadow-lift);opacity:0;transition:opacity var(--dur) var(--ease-out);pointer-events:none}
@media (hover:hover){
  .ad-card:hover{transform:translateY(-3px)}
  .ad-card:hover::after{opacity:1}
}
.ad-num,.ad-card h3{font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--text);margin-bottom:var(--s-4);text-transform:uppercase}
.ad-card p{font-size:.96rem;color:var(--ink-2);margin-bottom:var(--s-2);line-height:1.6}
/* Small secondary button: square outline, dark label. */
.copy-btn{min-height:40px;padding:9px 20px;background:transparent;color:var(--text);border:0;box-shadow:inset 0 0 0 1.5px var(--line-strong);border-radius:0;cursor:pointer;font-family:var(--font-body);font-size:.875rem;font-weight:700;transition:box-shadow var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
@media (hover:hover){.copy-btn:hover{box-shadow:inset 0 0 0 2px var(--text);background:var(--white)}}
.choose-variant{margin-top:var(--s-4);width:100%}

/* loading: a skeleton in the shape of the result cards */
.loading{margin-top:52px;color:var(--muted);font-size:.9rem;text-align:center}
.loading p{margin-top:var(--s-4)}
.skeleton{display:grid;gap:var(--s-3)}
.skel-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;display:grid;gap:10px}
.skel-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--white) 55%,transparent),transparent);transform:translateX(-100%);animation:shimmer 1.4s ease-in-out infinite}
.skel-card:nth-child(2)::after{animation-delay:.15s}
.skel-card:nth-child(3)::after{animation-delay:.3s}
.skel-line{display:block;height:10px;border-radius:var(--r-pill);background:var(--line)}
.skel-line.short{width:28%;height:8px;background:var(--accent-line)}
.skel-line.mid{width:72%}

/* settings, publish and campaigns cards */
.settings-box{margin-bottom:40px}
.settings-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.settings-head h2{font-size:1.25rem;letter-spacing:-.03em;font-weight:700;margin:0}
.settings-summary{font-size:.92rem;color:var(--ink-2);line-height:1.7}
.hint{font-size:.8rem;color:var(--muted);line-height:1.5}
.notice{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-sm);padding:14px 16px;font-size:.88rem;color:var(--text);line-height:1.55}
.notice a{color:var(--text);font-weight:700;text-decoration:underline}
.confirm{display:flex;gap:var(--s-3);align-items:flex-start;font-size:.88rem;font-weight:500;line-height:1.55;cursor:pointer}
.confirm input{width:18px;height:18px;padding:0;margin-top:3px;flex-shrink:0;accent-color:var(--accent)}
.settings-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.btn-save{min-height:48px;padding:13px 26px}
.btn-save:disabled{opacity:.45;cursor:not-allowed}
.btn-text{background:none;border:none;padding:var(--s-1) 0;color:var(--text);font-family:var(--font-body);font-size:.9rem;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer;transition:text-decoration-color var(--dur) var(--ease-out)}
@media (hover:hover){.btn-text:hover:not(:disabled){text-decoration-color:var(--accent-3);text-decoration-thickness:2px}}
.btn-text:disabled{opacity:.5;cursor:wait}
.msg{font-size:.88rem;line-height:1.5;margin-top:14px}
.msg:empty{display:none}
.msg.error{color:var(--bad)}
.msg.ok{color:var(--good)}
.summary-list{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:.9rem;margin:0}
.summary-list dt{color:var(--muted)}
.summary-list dd{margin:0;font-weight:700;color:var(--ink-2);overflow-wrap:anywhere}
#pubPreview{display:block;max-width:240px;border-radius:var(--r-sm);margin-top:12px;border:1px solid var(--line)}
.campaign-item{border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;margin-bottom:14px;background:var(--surface)}
.campaign-item h3{font-size:1rem;margin-bottom:var(--s-2);overflow-wrap:anywhere}
.campaign-meta{font-size:.84rem;color:var(--muted);margin:var(--s-2) 0;line-height:1.55}
.reasons{font-size:.84rem;color:var(--bad);margin:var(--s-2) 0;line-height:1.55}
.status{display:inline-block;font-size:.76rem;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--line);color:var(--ink-2)}
.status.good{background:var(--good-soft);color:var(--good);border-color:var(--good-line)}
.status.bad{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.status.wait{background:var(--accent-soft);color:var(--text);border-color:var(--accent-line)}
.campaign-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:12px}
.activate-panel{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.activate-panel h4{font-size:.95rem;margin-bottom:12px}

/* ---------- Feed-ad preview ----------
   A neutral mockup of a feed ad: own greys, no platform logo or colours. */
.fb-ad{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-width:500px;margin:0 auto;color:var(--text);text-align:left;box-shadow:var(--shadow-xs)}
.fb-ad-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.fb-ad-logo{width:40px;height:40px;border-radius:50%;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.85rem;flex-shrink:0}
.fb-ad-who{display:flex;flex-direction:column;min-width:0;flex:1}
.fb-ad-page{font-weight:700;font-size:.92rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-ad-sponsored{font-size:.78rem;color:var(--text-2)}
.fb-ad-dots{color:var(--text-2);font-weight:700;letter-spacing:1px}
.fb-ad-text{padding:0 14px 12px;margin:0;font-size:.92rem;line-height:1.45;white-space:pre-line;overflow-wrap:anywhere}
.fb-ad-text:empty{display:none}
.fb-ad-media{aspect-ratio:1.91/1;background:var(--field)}
.fb-ad-media img{width:100%;height:100%;object-fit:cover;display:block}
.fb-ad-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-2);font-size:.85rem}
.fb-ad-placeholder svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fb-ad-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--field);border-top:1px solid var(--line)}
.fb-ad-foot-copy{display:flex;flex-direction:column;min-width:0}
.fb-ad-headline{font-weight:700;font-size:.95rem;line-height:1.3;overflow-wrap:anywhere}
.fb-ad-description{font-size:.82rem;color:var(--text-2);line-height:1.35;overflow-wrap:anywhere}
.fb-ad-cta{flex-shrink:0;background:var(--surface);color:var(--text);font-weight:700;font-size:.86rem;padding:8px 14px;border-radius:6px;white-space:nowrap}

/* ---------- Request form and list ---------- */
.request-preview{margin-bottom:var(--s-6)}
.notice-ok{background:var(--good-soft);border-color:var(--good-line);color:var(--good);font-weight:700}
.request-item-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3)}
.request-item-head h3{margin:0}
.request-item-head .status{flex-shrink:0}
.request-note{font-size:.86rem;color:var(--ink-2);background:var(--bad-soft);border-radius:var(--r-sm);padding:10px 12px;margin-top:var(--s-2);overflow-wrap:anywhere}

/* ---------- Admin page ---------- */
.page-admin .wrap{max-width:860px}
.admin-tag{font-family:var(--font-body);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:var(--accent-soft);border-radius:var(--r-pill);padding:3px 10px;margin-left:8px;vertical-align:middle}
.admin-toolbar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-5)}
.admin-toolbar select{width:auto}
.admin-item{margin-bottom:var(--s-5)}
.admin-item h2{font-size:1.15rem;margin:0}
.admin-item .group-label{margin:var(--s-5) 0 var(--s-3)}
.admin-row,.admin-actions,.admin-contact{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.admin-row input[type=text]{flex:1;min-width:200px}
.admin-row select{width:auto}
.admin-actions{flex-direction:column;align-items:flex-start}
.admin-image img{max-width:320px;border-radius:var(--r-sm);border:1px solid var(--line);margin-top:var(--s-2)}
.admin-danger{color:var(--bad)}

/* Panels the scripts show (hidden=false, or .hidden removed) rise into
   place. They only move, never fade, so a panel is readable even if a
   browser never runs the transition. Closing is instant. */
#instellingen,#aanvraag,#aanvragen,#settingsForm,#requestForm,#settingsSummary,#paymentNotice,
.form-box .notice,#loading,#output,.activate-panel{transition:transform var(--dur) var(--ease-out)}
@starting-style{
  #instellingen,#aanvraag,#aanvragen,#settingsForm,#requestForm,#settingsSummary,#paymentNotice,
  .form-box .notice,#loading,#output,.activate-panel{transform:translateY(8px)}
}

/* =====================================================================
   Small screens: app and admin (home is mobile first above)
   ===================================================================== */
@media (max-width:640px){
  .page-app .wrap,nav .inner{padding:0 var(--s-4)}
  .page-app nav{padding:var(--s-3) 0}
  .page-app nav .inner{flex-wrap:wrap;row-gap:var(--s-2)}
  .page-app .nav-links{gap:var(--s-2) var(--s-4);flex-wrap:wrap}
  .page-app nav{margin-bottom:var(--s-6)}
  .form-box{padding:28px 20px;border-radius:20px}
  .group{margin-bottom:28px}
  input,select,textarea{font-size:16px}
  .ad-card{padding:16px 14px}
}

/* =====================================================================
   Reduced motion: no movement and no loops; content is simply there.
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .hero-bg span,.skel-card::after{animation:none!important}
  html.js .reveal:not(.in){transform:none}
  .btn:active,.btn-save:active:not(:disabled),#generateBtn:active:not(:disabled),.ad-card:hover,.text-link:hover::after,button#generateBtn:hover:not(:disabled) svg{transform:none}
}