/* Doelgroep- en prijspagina's: office managers, HR, klanten, prijzen, bespaarcalculator (tokens uit brand.css) */
.dg-hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--night)}
.dg-hero.low{min-height:62vh}
.dg-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.dg-hero .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,7,10,.5),rgba(7,7,10,0) 25%),linear-gradient(to top,rgba(7,7,10,1),rgba(7,7,10,0) 28%),linear-gradient(90deg,rgba(7,7,10,.6),rgba(7,7,10,.25) 40%,rgba(7,7,10,0) 62%)}
.dg-hero .wrap{position:relative;width:100%;padding-top:140px;padding-bottom:110px}
.dg-hero.low .wrap{padding-top:120px;padding-bottom:70px}
.dg-hero .copy{max-width:660px}
.dg-hero h1{font-size:clamp(2.3rem,4.4vw,4rem);margin-bottom:20px;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.dg-hero .lead{margin-bottom:30px}
.dg-hero .anchor{margin-top:22px;font-size:.92rem;color:var(--muted)}
.dg-hero .anchor b{color:#fff;font-weight:600}.dg-hero .anchor i{font-style:normal;margin:0 8px;opacity:.5}
.dg-hero .big{font-family:var(--display);font-weight:800;letter-spacing:-.05em;font-size:clamp(4.6rem,10vw,8.5rem);line-height:.9;margin:6px 0 6px}
.dg-hero .big sup{font-size:.4em;vertical-align:top;top:.2em;position:relative}

/* agenda (office managers) */
.dg-week{list-style:none;padding:0;margin:clamp(28px,4vw,48px) 0 0;border-top:1px solid var(--line-ink)}
.dg-week li{display:grid;grid-template-columns:120px 1fr 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line-ink);align-items:baseline}
.dg-week li.head{padding:0 0 12px;font:700 .74rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.dg-week .day{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.dg-week .zonder{color:#3a3a44}
.dg-week .met{font-weight:600}
.dg-week .met.none{color:var(--ink-muted);font-weight:400}
.dg-conclusie{margin-top:24px;font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.02em}

/* beeld van de rand + regels */
.dg-bleed{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.dg-bleed .media{position:relative;min-height:560px}
.dg-bleed .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dg-bleed .copy{padding:clamp(56px,7vw,110px) clamp(24px,5vw,80px) clamp(56px,7vw,110px) clamp(24px,4vw,64px);max-width:640px}
.dg-bleed.rev .media{order:2}
.dg-lines{list-style:none;padding:0;margin:28px 0 0;border-top:1px solid var(--line-ink)}
.dg-lines li{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--line-ink);align-items:baseline}
.dg-lines b{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.015em;white-space:nowrap}
.dg-lines span{color:var(--ink-muted);font-size:.95rem}
.dark .dg-lines{border-color:var(--line)}.dark .dg-lines li{border-color:var(--line)}.dark .dg-lines span{color:var(--muted)}

/* dashboard mockup */
.dg-dash{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:center}
.dg-screen{background:#0D0D11;border-radius:24px;padding:22px;box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.07)}
.dg-screen .top{display:flex;justify-content:space-between;align-items:center;font:700 .72rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:18px}
.dg-screen .tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dg-screen .tile{background:#15151B;border:1px solid var(--line);border-radius:14px;padding:16px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between}
.dg-screen .tile b{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.dg-screen .bars{display:flex;align-items:flex-end;gap:6px;height:46px}
.dg-screen .bars i{flex:1;border-radius:4px 4px 0 0;background:var(--c,#4DA3FF);opacity:.85}
.dg-screen .pie{display:flex;gap:6px;height:14px;border-radius:999px;overflow:hidden}
.dg-screen .pie i{display:block;height:100%}
.dg-screen .alert{display:flex;align-items:center;gap:10px;font-size:.85rem;color:rgba(255,255,255,.75)}
.dg-screen .alert i{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);flex:none}
.dg-screen .locs{display:flex;gap:8px;flex-wrap:wrap}
.dg-screen .locs span{font-size:.72rem;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}

/* beeldband met één regel */
.dg-band{position:relative;overflow:hidden;background:var(--night);color:var(--txt)}
.dg-band>img{width:100%;height:clamp(420px,46vw,620px);object-fit:cover;display:block}
.dg-band .over{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,7,10,.92),rgba(7,7,10,.35) 55%,rgba(7,7,10,.05));display:flex;align-items:flex-end}
.dg-band .over .wrap{width:100%;padding-bottom:clamp(36px,5vw,64px)}
.dg-band h2{max-width:22ch;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.dg-band .lead{color:rgba(244,244,246,.85)}
.dg-band .lines{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:14px;color:rgba(244,244,246,.85);font-size:.97rem}
.dg-band .lines span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle}

/* verhaalbeeld van de rand op donker (HR) */
.dg-story{background:var(--night);color:var(--txt);padding:0}
.dg-story .grid2{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.dg-story .media{position:relative;min-height:560px}
.dg-story .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dg-story .copy{padding:clamp(56px,7vw,110px) clamp(24px,4vw,64px) clamp(56px,7vw,110px) clamp(24px,5vw,80px);max-width:620px}
.dg-story .copy p{color:var(--muted2);font-size:1.08rem;line-height:1.7}

/* drie regels met groot woord */
.dg-three{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.dg-three ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-ink)}
.dg-three li{padding:22px 0;border-bottom:1px solid var(--line-ink)}
.dg-three li b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.025em;margin-bottom:6px}
.dg-three li span{color:var(--ink-muted)}
.dg-three img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}

/* suikerbalken (showstopper) */
.dg-sugar{list-style:none;padding:0;margin:clamp(28px,4vw,48px) 0 0}
.dg-sugar li{display:grid;grid-template-columns:200px 1fr 70px;gap:20px;align-items:center;padding:14px 0}
.dg-sugar .lbl{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.dg-sugar .track{height:34px;background:rgba(0,0,0,.07);border-radius:999px;overflow:hidden}
.dg-sugar .bar{height:100%;border-radius:999px;background:var(--c);width:var(--w);box-shadow:0 0 24px color-mix(in srgb,var(--c) 45%,transparent)}
.dg-sugar .val{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.03em;text-align:right}
.dg-sugar .val.zero{color:var(--accent-dark)}

/* grote getallen */
.dg-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px);margin-top:clamp(28px,4vw,48px);border-top:1px solid var(--line);padding-top:28px}
.dg-nums b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,5vw,4.6rem);letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.dg-nums span{color:var(--muted)}

/* MT-kaart / bonnen */
.dg-bon{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,32px);margin-top:clamp(28px,4vw,48px);align-items:stretch}
.dg-bon.three{grid-template-columns:repeat(3,1fr)}
.dg-bon>div{border-radius:var(--r);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column}
.dg-bon .los{background:#fff;border:1px solid var(--line-ink);color:var(--ink)}
.dark .dg-bon .los{background:var(--card);border-color:var(--line);color:var(--txt)}
.dg-bon h3{margin-bottom:16px}
.dg-bon .los h3{color:var(--ink-muted)}.dark .dg-bon .los h3{color:var(--muted)}
.dg-bon ul{list-style:none;padding:0;margin:0 0 auto}
.dg-bon li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed var(--line-ink);font-size:.98rem}
.dark .dg-bon li{border-color:var(--line)}
.dg-bon li span{color:var(--ink-muted);font-size:.9rem;white-space:nowrap;text-align:right}
.dark .dg-bon li span{color:var(--muted)}
.dg-bon .tot{border:0;padding-top:16px;font-family:var(--display);font-weight:700}
.dg-bon .h2yo{background:var(--night);color:var(--txt);box-shadow:0 30px 80px rgba(255,59,134,.18)}
.light2 .dg-bon .h2yo,.light .dg-bon .h2yo{background:var(--night)}
.dark .dg-bon .h2yo{background:#fff;color:var(--ink)}
.dg-bon .h2yo .big{font-family:var(--display);font-weight:800;letter-spacing:-.05em;font-size:clamp(3.2rem,6vw,5.2rem);line-height:.9;margin:8px 0 4px}
.dg-bon .h2yo .big sup{font-size:.4em;vertical-align:top;top:.2em;position:relative}
.dg-bon .h2yo p{color:var(--muted)}.dark .dg-bon .h2yo p{color:var(--ink-muted)}
.dg-bon .h2yo li{border-color:var(--line)}.dg-bon .h2yo li span{color:var(--muted)}
.dark .dg-bon .h2yo li{border-color:var(--line-ink)}.dark .dg-bon .h2yo li span{color:var(--ink-muted)}
.dg-bon .one{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.dark .dg-bon .one{border-color:var(--line-ink)}
.dg-voordelen{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.dg-voordelen li{padding-left:28px;position:relative;font-size:.97rem}
.dg-voordelen li::before{content:"";position:absolute;left:0;top:6px;width:17px;height:17px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%230B0B0F'/%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.8-5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* editorial rijen (sectoren, typen) */
.dg-rows{list-style:none;padding:0;margin:clamp(28px,4vw,48px) 0 0;border-top:1px solid var(--line-ink)}
.dg-rows li{display:grid;grid-template-columns:.8fr 1fr 1.2fr;gap:28px;padding:24px 0;border-bottom:1px solid var(--line-ink);align-items:start}
.dg-rows h3{margin:0}
.dg-rows p{margin:0;color:#3a3a44}
.dg-rows .pts{color:var(--ink-muted);font-size:.95rem}
.dg-rows .pts span{display:block;padding:2px 0}

/* vier grote woorden */
.dg-words{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,48px)}
.dg-words div{border-top:1px solid var(--line);padding-top:20px}
.dg-words b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.6vw,3.2rem);letter-spacing:-.035em;line-height:1;margin-bottom:10px}
.dg-words span{color:var(--muted)}

/* ladder */
.dg-ladder{list-style:none;padding:0;margin:clamp(28px,4vw,48px) 0 0;border-top:1px solid var(--line-ink)}
.dg-ladder li{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-ink);align-items:baseline}
.dg-ladder li.head{padding:0 0 10px;font:700 .74rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.dg-ladder b{font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.025em}
.dg-ladder span{color:var(--ink-muted)}.dg-ladder .plan{color:var(--ink);font-weight:600}
.dark .dg-ladder,.dark .dg-ladder li{border-color:var(--line)}.dark .dg-ladder span{color:var(--muted)}.dark .dg-ladder .plan{color:var(--txt)}

/* twee lijsten */
.dg-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:clamp(28px,4vw,48px)}
.dg-two h3{margin-bottom:12px}
.dg-two ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line-ink)}
.dg-two li{padding:12px 0;border-bottom:1px solid var(--line-ink)}
.dg-two li b{font-family:var(--display);font-weight:700;display:block;margin-bottom:2px}
.dg-two li span{color:var(--ink-muted);font-size:.95rem}

/* groot moment op beeld (per medewerker) */
.dg-moment{position:relative;overflow:hidden;background:var(--night);color:var(--txt)}
.dg-moment>img{width:100%;height:clamp(460px,52vw,680px);object-fit:cover;object-position:55% center;display:block}
.dg-moment .over{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,10,.9),rgba(7,7,10,.55) 40%,rgba(7,7,10,0) 62%);display:flex;align-items:center}
.dg-moment .over .wrap{width:100%}
.dg-moment .copy{max-width:560px}
.dg-moment h2{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.dg-moment p{color:rgba(244,244,246,.85);font-size:1.08rem}

/* vier feiten (voorwaarden) */
.dg-facts4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.5vw,32px);margin-top:clamp(28px,4vw,48px)}
.dg-facts4 div{border-top:1px solid var(--line);padding-top:18px}
.dg-facts4 b{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.025em;margin-bottom:6px}
.dg-facts4 span{color:var(--muted)}

/* calculator */
.dg-calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);align-items:start}
.dg-calc .in{background:#fff;border:1px solid var(--line-ink);border-radius:var(--r);padding:clamp(22px,3vw,36px);color:var(--ink)}
.dg-calc .in h3{margin-bottom:18px}
.dg-field{margin-bottom:18px}
.dg-field label{margin-bottom:8px}
.dg-field .form-input{background:#fff;color:var(--ink);border-color:rgba(0,0,0,.16)}
.dg-radios{display:grid;gap:8px}
.dg-radios label{display:flex;align-items:center;gap:12px;text-transform:none;letter-spacing:0;font:500 .95rem var(--body);color:var(--ink);padding:12px 14px;border:1.5px solid rgba(0,0,0,.14);border-radius:14px;cursor:pointer;margin:0}
.dg-radios label:has(input:checked){border-color:var(--ink);background:rgba(0,0,0,.03)}
.dg-radios input{accent-color:var(--accent);width:18px;height:18px;margin:0}
.dg-calc .out{background:var(--night);color:var(--txt);border-radius:var(--r);padding:clamp(22px,3vw,36px);box-shadow:0 30px 80px rgba(255,59,134,.14);position:sticky;top:96px}
.dg-calc .out h3{color:var(--muted);margin-bottom:14px}
.dg-out-big{font-family:var(--display);font-weight:800;letter-spacing:-.04em;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;margin:4px 0 2px}
.dg-out-rows{list-style:none;padding:0;margin:18px 0 0;border-top:1px solid var(--line)}
.dg-out-rows li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.97rem}
.dg-out-rows li span:first-child{color:var(--muted)}
.dg-out-rows li p{margin:0;font-family:var(--display);font-weight:700}
.dg-out-note{margin-top:14px;font-size:.9rem;color:var(--muted)}
.dg-calc .out .btn-primary{margin-top:20px;width:100%}
.dg-assump{margin-top:20px}
.dg-assump summary{cursor:pointer;font-family:var(--display);font-weight:700;list-style:none}
.dg-assump summary::-webkit-details-marker{display:none}
.dg-assump summary::after{content:" +";color:var(--ink-muted)}
.dg-assump[open] summary::after{content:" −"}
.dg-assump ul{margin:12px 0 0;color:var(--ink-muted);font-size:.95rem}

.dg-faq{background:var(--paper2);color:var(--ink)}
.dg-close{position:relative;overflow:hidden;background:var(--night);color:var(--txt)}
.dg-close .glow{position:absolute;left:50%;top:40%;width:900px;height:600px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,59,134,.2),rgba(255,59,134,0));pointer-events:none}
.dg-close .wrap{position:relative}
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

@media (max-width:1024px){
  .dg-dash,.dg-three,.dg-bon,.dg-bon.three,.dg-calc{grid-template-columns:1fr}.dg-facts4{grid-template-columns:1fr 1fr}.dg-rows li{grid-template-columns:1fr 1.4fr}.dg-rows .pts{grid-column:2}.dg-calc .out{position:static}
}
@media (max-width:820px){
  .dg-hero,.dg-hero.low{min-height:0;display:block}.dg-hero>img{position:relative;height:80vw;min-height:360px}.dg-hero .shade{display:none}.dg-hero .wrap,.dg-hero.low .wrap{padding-top:28px;padding-bottom:56px}
  .dg-week li{grid-template-columns:1fr;gap:4px}.dg-week li.head{display:none}.dg-week .zonder::before{content:"Zonder: ";color:var(--ink-muted)}.dg-week .met::before{content:"Met H2YO: ";color:var(--ink-muted);font-weight:400}
  .dg-bleed,.dg-bleed.rev,.dg-story .grid2{grid-template-columns:1fr}.dg-bleed .media,.dg-story .media{min-height:0;height:70vw}.dg-bleed .media img,.dg-story .media img{position:relative;height:100%}.dg-bleed .copy,.dg-story .copy{padding:36px var(--gutter)}.dg-bleed.rev .media{order:0}
  .dg-lines li{grid-template-columns:1fr}.dg-lines b{white-space:normal}
  .dg-screen .tiles{grid-template-columns:1fr}
  .dg-band>img{height:66vw;min-height:280px}.dg-band .over{position:static;background:none;display:block;padding:24px 0 40px}.dg-band h2{max-width:none}
  .dg-sugar li{grid-template-columns:1fr;gap:6px}.dg-sugar .val{text-align:left}
  .dg-nums,.dg-words,.dg-voordelen,.dg-two,.dg-facts4{grid-template-columns:1fr}
  .dg-rows li{grid-template-columns:1fr}.dg-rows .pts{grid-column:auto}
  .dg-ladder li{grid-template-columns:1fr;gap:2px}.dg-ladder li.head{display:none}
  .dg-moment>img{height:66vw;min-height:280px}.dg-moment .over{position:static;background:none;display:block;padding:24px 0 40px}
}