:root{
    color-scheme:light;
    --paper:#f2efe7; --surface:#fbf9f3; --surface-2:#e9e4d8;
    --line:#ded8c9; --line-strong:#c4bca8;
    --text:#23201b; --dim:#665f53; --faint:#706858;
    --seal:#b4432f; --seal-deep:#8e3223; --on-seal:#fdf8f0;
    --moss:#4f7043;
    --font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
    --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
    --radius:14px; --radius-lg:22px;
    --rake:rgba(120,108,84,.09);
    --shadow:0 1px 2px rgba(51,41,26,.05),0 8px 24px rgba(51,41,26,.07);
    /* Schaduwen dragen de kleur van het papier, niet zwart. */
    --lift:0 1px 2px rgba(51,41,26,.06),0 10px 28px rgba(51,41,26,.10);
    --lift-seal:0 1px 2px rgba(142,50,35,.22),0 8px 20px rgba(142,50,35,.18);
    --veil:rgba(242,239,231,.86);
  }
  /* De donkere stand op drie manieren: het systeem, en een expliciete keuze
     in beide richtingen. */
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      color-scheme:dark;
      --paper:#16150f; --surface:#1e1c15; --surface-2:#282419;
      --line:#332f26; --line-strong:#4a4435;
      --text:#ece5d6; --dim:#a79e8b; --faint:#8d8474;
      --seal:#d9563d; --seal-deep:#b4432f; --on-seal:#17120d;
      --moss:#7fa86a;
      --rake:rgba(220,205,170,.05);
      --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.34);
      --lift:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45);
      --lift-seal:0 1px 2px rgba(0,0,0,.45),0 8px 20px rgba(120,40,26,.42);
      --veil:rgba(22,21,15,.86);
          }
  }
  :root[data-theme="dark"]{
      color-scheme:dark;
      --paper:#16150f; --surface:#1e1c15; --surface-2:#282419;
      --line:#332f26; --line-strong:#4a4435;
      --text:#ece5d6; --dim:#a79e8b; --faint:#8d8474;
      --seal:#d9563d; --seal-deep:#b4432f; --on-seal:#17120d;
      --moss:#7fa86a;
      --rake:rgba(220,205,170,.05);
      --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.34);
      --lift:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.45);
      --lift-seal:0 1px 2px rgba(0,0,0,.45),0 8px 20px rgba(120,40,26,.42);
      --veil:rgba(22,21,15,.86);
        }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* Het geharkte grind van een droge tuin: twee harken uit tegenover-
     liggende hoeken. Vast, zodat de grond blijft liggen terwijl de tekst
     eroverheen schuift. Geen liniatuur: vaste horizontale lijnen botsen met
     de regels en scheidslijnen die er wel meescrollen. */
  body{margin:0;color:var(--text);background-color:var(--paper);
    background-image:
      repeating-radial-gradient(circle at 84% 8%,transparent 0 62px,var(--rake) 62px 63px),
      repeating-radial-gradient(circle at 8% 82%,transparent 0 46px,var(--rake) 46px 47px);
    background-attachment:fixed;
    font:400 17px/1.65 var(--font)}
  /* Pagina's om te lezen krijgen effen papier. */
  body:has(main.legal){background-image:none}
  .wrap{width:min(calc(100% - 32px),1080px);margin:0 auto}
  .wrap > *{min-width:0}
  h1,h2,h3,p,li,figcaption,footer{overflow-wrap:anywhere}
  h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;margin:0}
  p{margin:0;text-wrap:pretty}
  a{color:inherit}

  /* ------------------------------------------------------------ balk --- */
  header.top{position:sticky;top:0;z-index:20;
    background:var(--paper);
    border-bottom:1px solid var(--line)}
  @supports (backdrop-filter:blur(1px)){
    header.top{background:var(--veil);backdrop-filter:blur(10px) saturate(1.08)}
  }
  .top .wrap{display:flex;align-items:center;gap:12px;padding:6px 0}
  .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);
    font-size:1.15rem;font-weight:700;letter-spacing:.01em;
    color:inherit;text-decoration:none}
  .brand svg{width:26px;height:26px;flex:0 0 auto}
  .preferences{display:flex;flex:0 0 auto;gap:4px;margin-left:auto}
  .preference{appearance:none;display:grid;place-items:center;width:44px;height:44px;
    padding:0;border:1px solid transparent;border-radius:50%;background:transparent;
    color:var(--dim);font:600 .8rem/1 var(--font);letter-spacing:.04em;cursor:pointer}
  .preference:hover{background:var(--surface-2);color:var(--text)}
  .preference:focus-visible{outline:2px solid var(--seal);outline-offset:2px}
  .preference svg{width:19px;height:19px}

  /* ------------------------------------------------------------ hero --- */
  .hero{padding:72px 0 64px}
  .hero .wrap{display:grid;gap:46px;grid-template-columns:1fr;align-items:center}
  @media (min-width:900px){.hero .wrap{grid-template-columns:1.2fr .8fr}}
  .eyebrow{font:600 .78rem/1 var(--font);letter-spacing:.18em;text-transform:uppercase;
    color:var(--seal);margin-bottom:18px}
  .hero h1{font-size:clamp(2.5rem,5.5vw,4.25rem)}
  .lead{margin-top:20px;font-size:1.16rem;color:var(--dim);max-width:34em}
  .chips{margin-top:26px;display:flex;flex-wrap:wrap;gap:9px}
  .chip{display:flex;align-items:center;gap:8px;padding:8px 15px;font-size:.84rem;
    color:var(--dim);background:var(--surface);border:1px solid var(--line);
    border-radius:999px;box-shadow:var(--shadow)}
  .chip::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--seal)}
  
  .cta{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
  .store{display:inline-flex;align-items:center;gap:11px;color:var(--dim);
    padding:8px 0;font-size:.9rem;font-weight:500}
  .explore{display:inline-flex;align-items:center;justify-content:center;gap:16px;
    min-height:48px;padding:12px 20px;border-radius:6px;background:var(--seal);
    color:var(--on-seal);font-size:.9rem;font-weight:600;text-decoration:none;
    box-shadow:var(--lift-seal)}
  .explore:hover{background:var(--seal-deep)}
  .explore::after{content:"↓";font-size:1.1rem}
  
  .cta small{flex-basis:100%}
  .store{max-width:100%}
  .store svg{width:20px;height:20px;flex:0 0 auto}
  .store span{min-width:0;overflow-wrap:anywhere}
  a.store{color:var(--seal);text-decoration:none}
  a.store:hover span{text-decoration:underline}
  .cta small{color:var(--faint);font-size:.86rem}

  /* ---------------------------------------------------------- toestel --- */
  .phone{position:relative;margin:0 auto;width:min(74vw,290px);
    border:7px solid #2b2721;border-radius:26px;background:#2b2721;
    box-shadow:var(--lift);overflow:hidden;line-height:0}
  .phone img{width:100%;height:auto;display:block}
  .phones{display:flex;gap:26px 22px;justify-content:center;flex-wrap:wrap}
  .phones .phone{width:min(74vw,224px)}
  .phones figure{width:min(80vw,236px)}
  .phones figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
  .phones figcaption{font-size:.88rem;color:var(--dim);text-align:center;max-width:22em}
  .phones .shot-tier{align-self:center}

  /* --------------------------------------------------------- secties --- */
  section{padding:56px 0 66px}
  .section-head{max-width:36em;margin-bottom:34px}
  .section-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
  .section-head p{margin-top:14px;color:var(--dim)}
  .rule{border:0;border-top:1px solid var(--line);margin:0}

  .tiles{list-style:none;margin:0;padding:0;display:grid;gap:14px;
    grid-template-columns:repeat(auto-fill,minmax(min(255px,100%),1fr))}
  .tile > :last-child{min-width:0}
  .tile{display:flex;gap:15px;align-items:flex-start;padding:16px;
    background:var(--surface);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow)}
  .tile-mark{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;
    border-radius:11px;color:var(--pigment);
    background:color-mix(in srgb,var(--pigment) 12%,var(--surface))}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .tile-mark{color:var(--pigment-dark);
      background:color-mix(in srgb,var(--pigment-dark) 14%,var(--surface))}
  }
  :root[data-theme="dark"] .tile-mark{color:var(--pigment-dark);
    background:color-mix(in srgb,var(--pigment-dark) 14%,var(--surface))}
  .tile-mark svg{width:28px;height:28px}
  .tile h3{font-size:1.06rem;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .tile p{margin-top:5px;font-size:.92rem;color:var(--dim)}
  .tag{font:600 .62rem/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
    padding:5px 9px;border:1px solid transparent;border-radius:999px;
    background:var(--moss);color:var(--on-seal)}
  .tag-quiet{background:transparent;border-color:var(--line-strong);color:var(--faint)}

  .cols{display:grid;gap:0;grid-template-columns:1fr}
  .col{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 24px;
    padding:28px 0;border-top:1px solid var(--line)}
  .col .glyph{width:28px;height:28px;color:var(--seal);display:block;margin-bottom:12px}
  .col p{max-width:62ch}
  @media(min-width:900px){
    .col{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:start}
    .col .glyph{grid-column:1;grid-row:1}
    .col h3{grid-column:1;grid-row:2}
    .col p{grid-column:2;grid-row:1/span 2;margin-top:0}
  }
  .col h3{font-size:1.2rem}
  .col p{margin-top:11px;color:var(--dim);font-size:.97rem}

  .price{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(272px,100%),1fr))}
  .card{padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}
  .card.accent{background:var(--surface-2);border-color:var(--line-strong);
    border-top:3px solid var(--seal);box-shadow:var(--lift)}
  .card.accent h3{color:var(--seal)}
  .card h3{font-size:1.35rem}
  .card ul{margin:16px 0 0;padding:0;list-style:none;color:var(--dim)}
  .card li{position:relative;padding-left:22px;margin-top:9px}
  .card li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;
    border-radius:50%;background:var(--moss)}

  footer{padding:44px 0 60px;border-top:1px solid var(--line);color:var(--faint);font-size:.88rem}
  footer .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}

  @media (max-width:480px){
    .top .wrap{gap:8px}
    .brand{gap:8px}
    .hero{padding:36px 0 32px}
    .hero .wrap{gap:32px}
    .hero h1{font-size:clamp(2rem,9vw,2.7rem)}
    .eyebrow{line-height:1.45}
    .lead{font-size:1.05rem}
    section{padding:36px 0 44px}
    .section-head{margin-bottom:24px}
    .card{padding:20px}
    .col{gap:8px 16px}
    footer{padding:32px 0 40px}
  }
  .phones{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;padding:8px 4px 24px;
    scroll-snap-type:x proximity;scrollbar-color:var(--line-strong) var(--surface-2)}
  .phones figure{flex:0 0 min(72vw,236px);scroll-snap-align:start}
  .phones .phone{width:100%;max-width:224px}
  .gallery-hint{font-size:.85rem;color:var(--dim);margin-top:16px}
  section[id]{scroll-margin-top:88px}
  .skip{position:fixed;left:16px;top:8px;z-index:30;padding:12px 16px;
    background:var(--surface);color:var(--text);transform:translateY(-150%);
    border:1px solid var(--line-strong);border-radius:8px;box-shadow:var(--lift)}
  .skip:focus{transform:translateY(0)}
  a:focus-visible,.phones:focus-visible{outline:2px solid var(--seal);outline-offset:4px}
  .preference,.explore,.skip,.footer-links a,.legal a{
    transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,
      transform .18s ease,text-decoration-color .2s ease}
  .preference:active,.explore:active{transform:translateY(1px)}
  .explore:active{box-shadow:0 1px 2px rgba(142,50,35,.24)}
  @media(prefers-reduced-motion:reduce){
    .preference,.explore,.skip,.footer-links a,.legal a{transition:none}
  }
  /* ----------------------------------------------------------- komen --- */
  /* Alles staat er gewoon. Pas als het script besluit te bewegen zet het
     .settling op de pagina, en dan komen de delen rustig op hun plaats.
     Zonder script, of met reduced motion, gebeurt hier niets. */
  .settling [data-rise]{opacity:0;transform:translateY(10px)}
  .settling [data-rise].risen{opacity:1;transform:none;
    transition:opacity .7s cubic-bezier(.22,.61,.36,1) var(--delay,0ms),
      transform .7s cubic-bezier(.22,.61,.36,1) var(--delay,0ms)}
  /* De scheidingslijn wordt als een streek van links getrokken. */
  .settling .rule{transform:scaleX(0);transform-origin:left center}
  .settling .rule.risen{transform:none;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
  @media (prefers-reduced-motion:reduce){
    .settling [data-rise],.settling .rule{opacity:1;transform:none;transition:none}
  }

  [hidden]{display:none !important}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

  .legal{padding:48px 0 64px;max-width:46rem;min-height:60vh}
  .legal h1{font-size:clamp(2rem,5vw,3rem);margin:24px 0}
  .legal h2{font-size:1.4rem;margin:32px 0 12px}
  .legal p{margin:12px 0;max-width:65ch}
  .legal dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;margin:24px 0}
  .legal dt{color:var(--dim)}.legal dd{margin:0;overflow-wrap:anywhere}
  .legal nav{margin-top:30px}
  .footer-links{display:flex;gap:20px;flex-wrap:wrap}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px}
  .footer-links a,.legal a{text-decoration-color:var(--line-strong);
    text-decoration-thickness:1px;text-underline-offset:4px}
  .footer-links a:hover,.legal a:hover{color:var(--seal);text-decoration-color:var(--seal)}
  .footer-links a[aria-current="page"]{color:var(--text);text-decoration:none}
  main:focus{outline:none}