/* appiqon-ca.com
   Tokens overgenomen uit de styles.css van appiqon.com, zodat merkkleuren exact
   kloppen. De componenten eronder zijn van deze site: appiqon.com is een
   eenpagina-site, dit is een echte site met een pagina per wereld. */

:root{
  --pine:#0E5C4A; --pine-hover:#0A4739;
  --coral:#FF5B39; --coral-hover:#EF4A28;

  --canvas:#F6F3EC; --surface:#FFFFFF; --sunk:#EFEAE0; --hairline:#E2DCD0;

  --ink:#12211C; --ink-soft:#3C4B45; --ink-muted:#6E7C76; --meta:#5F6D67;

  --on-ink:#F6F3EC; --on-ink-body:#A9B8B2; --on-ink-meta:#7E948C;
  --on-ink-link:#DDE5E1; --on-ink-raised:#1C302A; --on-ink-rule:#25382F;
  --ink-deep:#0C1613; --ink-hairline:rgba(244,242,238,.10);

  --c-health:#16785E;       --c-lifestyle:#C05C2E;    --c-astrology:#6A4FCF;
  --c-audiobooks:#B23D63;   --c-podcasts:#1F6FB0;     --c-movies:#8E3BA6;
  --c-learning:#2E6E86;     --c-productivity:#5C7A1E; --c-utilities:#5A6470;

  --r-chip:8px; --r-tile:14px; --r-card:22px; --r-pill:999px;
  --shadow-hover:0 6px 20px rgba(18,33,28,.06);

  --sans:'Schibsted Grotesk',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1320px; --gutter:clamp(20px,5vw,80px); --section-y:clamp(56px,7vw,80px);
  --ease:cubic-bezier(.2,.7,.3,1); --t:.15s var(--ease);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.022em;line-height:1.1;text-wrap:balance}
p{margin:0 0 1em}
img{max-width:100%;display:block}
a{color:var(--pine)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:var(--r-chip)}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:4px}

/* ---- kop ---- */
.bar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--canvas) 93%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.bar-in{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.mark .dots{display:grid;grid-template-columns:repeat(2,9px);gap:3px;flex:none}
.mark .dots i{width:9px;height:9px;border-radius:2.5px;display:block}
.mark b{font-size:22px;font-weight:700;letter-spacing:-.04em}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--ink-soft);padding:7px 12px;border-radius:var(--r-chip)}
.nav a:hover{background:var(--sunk);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--pine);background:#0E5C4A12}
@media(max-width:1080px){.nav{order:3;width:100%;margin-left:0;border-top:1px solid var(--hairline);padding-top:10px}}

/* ---- categoriebalk ---- */
.catbar{background:var(--surface);border-bottom:1px solid var(--hairline)}
.catbar-in{display:flex;gap:8px;padding-block:12px;overflow-x:auto;scrollbar-width:none}
.catbar-in::-webkit-scrollbar{display:none}
.catpill{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;
  font-size:14px;font-weight:500;color:var(--ink-soft);background:var(--canvas);
  border:1px solid var(--hairline);border-radius:var(--r-pill);padding:7px 14px;transition:var(--t)}
.catpill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.catpill:hover,.catpill[aria-current="page"]{border-color:var(--c);color:var(--ink);background:var(--surface)}

/* ---- knoppen ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:600;text-decoration:none;
  border:1px solid transparent;border-radius:var(--r-pill);padding:13px 24px;cursor:pointer;transition:var(--t)}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:var(--coral-hover)}
.btn-pine{background:var(--pine);color:#fff}
.btn-pine:hover{background:var(--pine-hover)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--hairline)}
.btn-line:hover{border-color:var(--ink)}
.on-ink .btn-line,.hero .btn-line,.band .btn-line{color:var(--on-ink);border-color:rgba(246,243,236,.35)}
.on-ink .btn-line:hover,.hero .btn-line:hover,.band .btn-line:hover{border-color:var(--on-ink)}
.btn[aria-disabled="true"]{background:var(--sunk);color:var(--meta);border-color:var(--hairline);
  cursor:default;pointer-events:none}
.on-ink .btn[aria-disabled="true"],.hero .btn[aria-disabled="true"],.band .btn[aria-disabled="true"]{background:var(--on-ink-raised);color:var(--on-ink-meta);border-color:var(--on-ink-rule)}

/* ---- donkere panelen ---- */
.on-ink{background:var(--ink);color:var(--on-ink)}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--on-ink)}
.on-ink p{color:var(--on-ink-body)}
.on-ink a{color:var(--on-ink-link)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta);margin-bottom:14px}
.on-ink .eyebrow{color:var(--on-ink-meta)}

/* ---- hero ---- */
.hero{background:var(--ink);color:var(--on-ink);padding-block:clamp(48px,7vw,86px)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero .eyebrow{color:var(--on-ink-meta)}
@media(max-width:940px){.hero-in{grid-template-columns:1fr;gap:34px}}
.hero h1{font-size:clamp(36px,6vw,62px);max-width:14ch;color:var(--on-ink)}
.hero .lead{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--on-ink-body);max-width:48ch;margin-top:20px}
.hero .terms{border-top:1px solid var(--on-ink-rule);margin-top:26px;padding-top:18px;
  font-size:15px;color:var(--on-ink-body);max-width:46ch}
.hero .terms b{color:var(--on-ink)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:520px){.hero-grid{grid-template-columns:1fr}}
.hcard{background:var(--on-ink-raised);border:1px solid var(--on-ink-rule);border-radius:var(--r-card);
  padding:12px;text-decoration:none;display:block;transition:var(--t)}
.hcard:hover{transform:translateY(-2px);border-color:var(--c)}
.hcard img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-tile)}
.hcard b{display:block;font-size:17px;font-weight:600;color:var(--on-ink);margin:12px 4px 6px;line-height:1.25}
.hcard em{display:block;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c);margin:0 4px 4px}

/* ---- secties ---- */
.sec{padding-block:var(--section-y)}
.sec-surface{background:var(--surface);border-block:1px solid var(--hairline)}
.sec-head{max-width:62ch;margin-bottom:34px}
.sec-head h2{font-size:clamp(26px,3.8vw,40px)}
.sec-head p{margin:14px 0 0;color:var(--ink-soft);font-size:17px}
.prose{max-width:68ch}
.prose h2{font-size:clamp(22px,3vw,30px);margin:38px 0 12px}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p,.prose li{color:var(--ink-soft);font-size:17px;line-height:1.68}
.prose li{margin-bottom:8px}
.prose ul,.prose ol{padding-left:20px}
.prose strong{color:var(--ink)}
.lede{font-size:clamp(18px,2.2vw,21px);line-height:1.55;color:var(--ink);max-width:58ch}
.stamp{font-family:var(--mono);font-size:12px;color:var(--meta);letter-spacing:.04em}

/* ---- categorieraster ---- */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cats{grid-template-columns:1fr}}
.cat{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:var(--t)}
.cat:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);border-color:var(--c)}
.cat-media{aspect-ratio:4/3;overflow:hidden;background:var(--c)}
.cat-media img{width:100%;height:100%;object-fit:cover}
.cat-tile{width:100%;height:100%;display:grid;place-items:center;background:
  linear-gradient(140deg,color-mix(in srgb,var(--c) 92%,#000),color-mix(in srgb,var(--c) 70%,#fff))}
.cat-tile svg{width:74px;height:74px;opacity:.9}
.cat-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cat-rule{height:3px;width:44px;background:var(--c);border-radius:2px}
.cat h3{font-size:21px}
.cat p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.55}
.cat .go{margin-top:auto;padding-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c)}

/* ---- vier punten ---- */
.four{border-top:2px solid var(--ink)}
.pt{display:grid;grid-template-columns:56px 1fr 1.4fr;gap:clamp(14px,3vw,40px);align-items:start;
  padding-block:22px;border-bottom:1px solid var(--hairline)}
@media(max-width:760px){.pt{grid-template-columns:44px 1fr;gap:14px}.pt p{grid-column:2}}
.pt .n{font-family:var(--mono);font-size:13px;color:var(--pine);letter-spacing:.08em;padding-top:5px}
.pt h3{font-size:20px;margin:0;line-height:1.25}
.pt p{margin:0;color:var(--ink-soft);font-size:16px;line-height:1.6}

/* ---- prijskaart ---- */
.plan{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:clamp(22px,4vw,36px);display:grid;grid-template-columns:auto 1fr;gap:clamp(22px,4vw,48px)}
@media(max-width:800px){.plan{grid-template-columns:1fr}}
.plan-price .free{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--coral);margin-bottom:10px}
.plan-price .amt{font-size:clamp(34px,5vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1;color:var(--pine)}
.plan-price .per{font-family:var(--mono);font-size:12.5px;color:var(--meta);margin-top:10px;letter-spacing:.05em}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.plan li{position:relative;padding-left:26px;font-size:16px;color:var(--ink-soft);line-height:1.5}
.plan li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--pine)}
.plan-foot{grid-column:1/-1;border-top:1px solid var(--hairline);padding-top:20px;display:flex;
  gap:16px;align-items:center;flex-wrap:wrap}
.plan-foot .fine{font-size:14px;color:var(--meta);max-width:52ch;line-height:1.55}

/* ---- veelgestelde vragen ---- */
.qa{border-top:1px solid var(--hairline)}
.qa details{border-bottom:1px solid var(--hairline)}
.qa summary{cursor:pointer;padding:18px 0;font-size:18px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-family:var(--mono);color:var(--pine);font-size:20px;flex:none}
.qa details[open] summary::after{content:"\2212"}
.qa .a{padding:0 0 20px;color:var(--ink-soft);max-width:70ch}
.qa .a p:last-child{margin:0}

/* ---- band ---- */
.band{background:var(--ink-deep);color:var(--on-ink);border-radius:var(--r-card);
  padding:clamp(26px,4vw,44px);display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{font-size:clamp(23px,3vw,32px);color:var(--on-ink);max-width:22ch}
.band p{margin:10px 0 0;color:var(--on-ink-body);max-width:48ch}

/* ---- voet ---- */
.foot{background:var(--ink);color:var(--on-ink);padding-block:clamp(40px,5vw,60px) 28px;margin-top:var(--section-y)}
.foot-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(24px,4vw,48px)}
@media(max-width:900px){.foot-top{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-brand .mark{margin-bottom:14px}
.foot-brand .mark b{color:var(--on-ink)}
.foot-brand p{color:var(--on-ink-body);font-size:15px;max-width:34ch;margin:0 0 10px}
.foot-brand a{font-family:var(--mono);font-size:13.5px;color:var(--on-ink-link)}
.foot h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-ink-meta);margin-bottom:13px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{font-size:15px;color:var(--on-ink-body);text-decoration:none}
.foot ul a:hover{color:var(--on-ink)}
.foot-base{margin-top:34px;padding-top:24px;border-top:1px solid var(--ink-hairline);text-align:center}
.foot-base p{font-size:13px;line-height:1.7;color:var(--on-ink-meta);max-width:76ch;margin:0 auto 10px}
.foot-base .copy{font-family:var(--mono);font-size:12.5px;color:var(--on-ink-body)}
.big404{font-family:var(--mono);font-size:clamp(56px,12vw,120px);color:var(--coral);line-height:1;margin-bottom:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- verzamelingen: tekstkaart, geen foto ----
   Bewust zonder beeld. Er zijn maar zeven verschillende foto's en die zaten al
   in de categoriekaarten; een verzameling gaat bovendien over de regels, niet
   over een plaatje. De kaart laat het formaat meteen zien. */
.colgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1000px){.colgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.colgrid{grid-template-columns:1fr}}
.colcard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:var(--t);
  border-top:4px solid var(--c);padding:20px 21px 19px;gap:10px}
.colcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.colcard .tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.colcard h3{font-size:21px;line-height:1.2}
.colcard p{margin:0;color:var(--ink-soft);font-size:15px;line-height:1.5}
.colcard .peek{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:7px;
  border-top:1px solid var(--hairline);padding-top:13px}
.colcard .peek li{font-size:14px;color:var(--meta);line-height:1.4;position:relative;padding-left:15px}
.colcard .peek li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;
  border-radius:50%;background:var(--c)}
.colcard .n{margin-top:auto;padding-top:13px;font-family:var(--mono);font-size:12px;color:var(--c)}

/* ---- items in een verzameling ---- */
.items{border-top:1px solid var(--hairline);margin-top:8px}
.item{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--hairline)}
@media(max-width:620px){.item{grid-template-columns:1fr;gap:8px}}
.item .num{font-family:var(--mono);font-size:13px;color:var(--meta);padding-top:4px}
.item h3{font-size:20px;margin-bottom:7px;line-height:1.25}
.item .why{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0;max-width:66ch}
.item .cat-tag{display:inline-flex;align-items:center;gap:7px;margin-top:11px;font-family:var(--mono);
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--c);text-decoration:none}
.item .cat-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.item .cat-tag:hover{text-decoration:underline}

/* ---- waar je op let ---- */
.look{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.look{grid-template-columns:1fr}}
.look .q{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px;
  border-top:3px solid var(--c)}
.look .q h3{font-size:17.5px;margin-bottom:9px;line-height:1.3}
.look .q p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.55}

/* ---- gidsen ---- */
.gugrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:820px){.gugrid{grid-template-columns:1fr}}
.gucard{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:22px 24px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;
  transition:var(--t);border-left:4px solid var(--c)}
.gucard:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.gucard .meta{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--c)}
.gucard .meta span:last-child{color:var(--meta)}
.gucard h3{font-size:22px;line-height:1.2}
.gucard p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.55}
.gucard .go{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:12px;color:var(--c)}
.article{max-width:72ch}
.article h2{font-size:clamp(21px,2.8vw,27px);margin:36px 0 12px;color:var(--ink)}
.article h3{font-size:18.5px;margin:28px 0 8px;color:var(--ink)}
.article p,.article li{font-size:17.5px;line-height:1.7;color:var(--ink-soft)}
.article li{margin-bottom:9px}
.article ul,.article ol{padding-left:22px}
.article strong{color:var(--ink);font-weight:600}
.article > p:first-child{font-size:19.5px;line-height:1.6;color:var(--ink)}