/* Subpagina's in de rustige stijl van granola.ai (9 nov 2026, Lucas: "goed voorbeeld voor de website. alles behalve de
   homepage moet anders", "vind hun animaties leuk en goed en alles is clean"). Eigen inhoud en eigen beeld, alleen de opbouw
   en het gevoel: veel wit, kaarten met een dunne rand, zachte ingangen, rijen met voorbeelden die langzaam voorbij schuiven.
   Kleuren via de tokens van site.css (--ink, --muted, --line, --soft, --action), dus de donkere modus komt mee.
   Beweging staat in assets/gr.js; bij "minder beweging" (prefers-reduced-motion) staat alles stil in de eindstand. */

:root { --gr-card: #fff; --gr-edge: rgba(0, 0, 0, .07); --gr-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -18px rgba(0, 0, 0, .18);
  --gr-tint-1: #e8f2ff; --gr-tint-2: #e9f8ee; --gr-tint-3: #fff4e0; --gr-tint-4: #f3ecff; --gr-tint-5: #ffe9ee;
  --gr-dot-1: #8cc0ff; --gr-dot-2: #8fdca8; --gr-dot-3: #ffcf7a; --gr-dot-4: #c2a8ff; --gr-dot-5: #ff9fb4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --gr-card: #1c1c1e; --gr-edge: rgba(255, 255, 255, .09); --gr-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 36px -18px rgba(0, 0, 0, .8);
    --gr-tint-1: #13284a; --gr-tint-2: #12301f; --gr-tint-3: #33280f; --gr-tint-4: #261d44; --gr-tint-5: #3a1822; }
}
:root[data-theme="dark"] { --gr-card: #1c1c1e; --gr-edge: rgba(255, 255, 255, .09); --gr-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 36px -18px rgba(0, 0, 0, .8);
  --gr-tint-1: #13284a; --gr-tint-2: #12301f; --gr-tint-3: #33280f; --gr-tint-4: #261d44; --gr-tint-5: #3a1822; }

/* ---------- Bouwstenen ---------- */
.gr-sec { max-width: 1180px; margin: 0 auto; padding: clamp(96px, 12vw, 168px) var(--gutter) 0; }
.gr-sec.gr-narrow { max-width: 860px; }
.gr-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px 6px 10px; border-radius: 999px;
  background: var(--soft); color: var(--muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.gr-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-bg); }
.gr-head { text-align: center; }
.gr-head h2 { max-width: 18ch; margin: 0 auto; }
.gr-head p { margin: 18px auto 0; max-width: 54ch; color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }
.gr-left { text-align: left; }
.gr-left h2, .gr-left h1 { text-align: left; margin-left: 0; }
.gr-left p { margin-left: 0; }

.gr-card { background: var(--gr-card); border-radius: 22px; box-shadow: var(--gr-shadow); border: 1px solid var(--gr-edge);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
a.gr-card { color: inherit; text-decoration: none; display: block; }
a.gr-card:hover, .gr-card.gr-lift:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 22px 44px -22px rgba(0, 0, 0, .28); }

/* Ingang: zacht omhoog en uit de blur (de bestaande .reveal van motion.js, met wat meer gevoel) */
.js .reveal.gr-in { transform: translateY(22px) scale(.985); filter: blur(6px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js .reveal.gr-in.in { transform: none; filter: none; }

.gr-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-weight: 600; font-size: 16px; text-decoration: none; transition: transform .3s var(--spring), opacity .2s; }
.gr-btn:hover { text-decoration: none; transform: translateY(-1px) scale(1.02); }
.gr-btn.ghost { background: var(--soft); color: var(--ink); }
.gr-ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.gr-left .gr-ctas { justify-content: flex-start; }
.gr-arrow::after { content: " →"; }

/* ---------- Hero (gecentreerd, zoals granola.ai/chat) ---------- */
.gr-hero { text-align: center; padding: clamp(40px, 6vw, 72px) var(--gutter) 0; }
.gr-hero h1 { font-size: clamp(44px, 7vw, 92px); font-weight: 600; letter-spacing: -.045em; line-height: .98; max-width: 14ch; margin: 0 auto; text-wrap: balance; }
.gr-hero .gr-lead { max-width: 40ch; margin: 22px auto 0; color: var(--muted); font-size: clamp(18px, 1.9vw, 22px); line-height: 1.45; text-wrap: pretty; }
.gr-hero .sp-note { margin-top: 16px; text-align: center; }

/* Het vlak met kaartjes en in het midden de vraagbalk */
.gr-stage { position: relative; margin: clamp(48px, 6vw, 80px) auto 0; height: clamp(420px, 40vw, 540px); max-width: 1500px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 74%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 74%, transparent);
  mask-composite: intersect; }
.gr-plane { position: absolute; inset: -6% -4% auto; display: grid; grid-template-columns: repeat(6, minmax(200px, 1fr)); gap: 18px;
  transform: perspective(1400px) rotateX(18deg) scale(1.04); transform-origin: 50% 0; }
.gr-col { display: grid; gap: 18px; align-content: start; }
.gr-col:nth-child(2n) { margin-top: 56px; }
.gr-col:nth-child(3n) { margin-top: 18px; }
.gr-tile { padding: 16px 18px; border-radius: 18px; background: var(--gr-card); border: 1px solid var(--gr-edge); box-shadow: var(--gr-shadow);
  font-size: 15px; line-height: 1.35; text-align: left; color: var(--ink); }
.gr-tile small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.gr-tile .gr-row { display: flex; align-items: center; gap: 12px; }
.gr-tile .gr-row + .gr-row { margin-top: 12px; }
.gr-date { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; text-align: center;
  font-size: 15px; font-weight: 600; line-height: 1; }
.gr-date i { display: block; font-style: normal; font-size: 8px; font-weight: 600; letter-spacing: .06em; color: var(--red); margin-bottom: 2px; }
.gr-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gr-dot-1); }
.gr-dot.d2 { background: var(--gr-dot-2); } .gr-dot.d3 { background: var(--gr-dot-3); } .gr-dot.d4 { background: var(--gr-dot-4); } .gr-dot.d5 { background: var(--gr-dot-5); }
.gr-ico { flex: none; width: 22px; height: 22px; color: var(--muted); }
.gr-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gr-doc .gr-lights { display: flex; gap: 6px; margin-bottom: 14px; }
.gr-doc .gr-lights span { width: 10px; height: 10px; border-radius: 50%; background: #ff8b80; }
.gr-doc .gr-lights span:nth-child(2) { background: #ffd36b; } .gr-doc .gr-lights span:nth-child(3) { background: #8fdca8; }
.gr-doc b { display: block; font-weight: 600; margin-bottom: 6px; }
.gr-doc ul { margin: 0; padding: 0 0 0 16px; color: var(--muted); font-size: 14px; }
.gr-doc li + li { margin-top: 4px; }
.gr-doc p { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.gr-pill-k { display: inline-block; margin-top: 10px; padding: 3px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green); font-size: 12px; font-weight: 600; }

/* Kaartjes drijven heel langzaam op en neer, elk in een eigen tempo */
.gr-float { animation: grFloat 9s ease-in-out infinite alternate; }
.gr-col:nth-child(2) .gr-float { animation-duration: 11s; animation-delay: -3s; }
.gr-col:nth-child(3) .gr-float { animation-duration: 10s; animation-delay: -6s; }
.gr-col:nth-child(4) .gr-float { animation-duration: 12s; animation-delay: -2s; }
.gr-col:nth-child(5) .gr-float { animation-duration: 9.5s; animation-delay: -5s; }
.gr-col:nth-child(6) .gr-float { animation-duration: 11.5s; animation-delay: -1s; }
@keyframes grFloat { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
.gr-stage .gr-tile { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.gr-stage.on .gr-tile { opacity: 1; transform: none; }
.gr-stage.on .gr-col:nth-child(2) .gr-tile { transition-delay: .08s; } .gr-stage.on .gr-col:nth-child(3) .gr-tile { transition-delay: .16s; }
.gr-stage.on .gr-col:nth-child(4) .gr-tile { transition-delay: .24s; } .gr-stage.on .gr-col:nth-child(5) .gr-tile { transition-delay: .32s; }
.gr-stage.on .gr-col:nth-child(6) .gr-tile { transition-delay: .4s; }
html:not(.js) .gr-stage .gr-tile { opacity: 1; transform: none; }

/* De vraagbalk */
.gr-stage::after { content: ""; position: absolute; left: 50%; top: 50%; width: min(1000px, 90%); height: 260px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--bg), transparent); opacity: .85; z-index: 1; pointer-events: none; }
.gr-ask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(820px, calc(100% - 2 * var(--gutter)));
  display: flex; align-items: center; gap: 16px; padding: 14px 14px 14px clamp(22px, 3vw, 40px); border-radius: 999px;
  background: color-mix(in srgb, var(--gr-card) 88%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--gr-edge); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .05); z-index: 2; }
.gr-ask-text { flex: 1; min-width: 0; text-align: left; font-family: var(--font-head); font-size: clamp(20px, 3vw, 38px); font-weight: 500; letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.25em; }
.gr-caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -.12em; background: var(--action); animation: grBlink 1.05s steps(1) infinite; }
@keyframes grBlink { 50% { opacity: 0; } }
.gr-send { flex: none; width: clamp(48px, 5vw, 72px); height: clamp(48px, 5vw, 72px); border-radius: 50%; display: grid; place-items: center;
  background: var(--action); color: #fff; transition: transform .4s var(--spring); }
.gr-send svg { width: 42%; height: 42%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gr-send.go { transform: scale(.9); }

/* ---------- Kaarten met een klein plaatje (zoals "Ask away") ---------- */
.gr-cards { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gr-cards.gr-3 { grid-template-columns: repeat(3, 1fr); }
.gr-cards.gr-2 { grid-template-columns: repeat(2, 1fr); }
.gr-cards > li { padding: 10px 10px 24px; }
.gr-cards h3 { margin: 18px 12px 0; font-size: 19px; }
.gr-cards p { margin: 8px 12px 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.gr-vis { height: 170px; border-radius: 15px; background: var(--gr-tint-1); display: grid; place-items: center; position: relative; overflow: hidden; }
.gr-vis.t2 { background: var(--gr-tint-2); } .gr-vis.t3 { background: var(--gr-tint-3); } .gr-vis.t4 { background: var(--gr-tint-4); } .gr-vis.t5 { background: var(--gr-tint-5); }
.gr-bubble { padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: var(--gr-card); box-shadow: var(--gr-shadow); font-size: 14px; max-width: 80%; text-align: left; }
.gr-bubble.me { border-radius: 16px 16px 6px 16px; background: var(--action); color: #fff; }
.gr-stack { display: grid; gap: 8px; justify-items: start; width: 78%; }
.gr-stack .me { justify-self: end; }
/* Actieknop: een zijkant van een telefoon met een knop die zacht pulseert */
.gr-side { width: 80px; height: 142px; border-radius: 22px; border: 3px solid var(--ink); position: relative; display: grid; place-items: center; }
.gr-side::before { content: ""; position: absolute; left: -9px; top: 34px; width: 5px; height: 28px; border-radius: 3px; background: var(--action); box-shadow: 0 0 0 0 rgba(10, 132, 255, .5); animation: grPulse 2.4s ease-out infinite; }
.gr-side::after { content: "Melo"; padding: 6px 12px; border-radius: 999px; background: var(--action); color: #fff; font: 600 13px/1 var(--font-head); letter-spacing: -.01em; }
@keyframes grPulse { 0% { box-shadow: 0 0 0 0 rgba(10, 132, 255, .45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(10, 132, 255, 0); } }
.gr-share { display: flex; gap: 12px; }
.gr-share span { width: 46px; height: 46px; border-radius: 12px; background: var(--gr-card); box-shadow: var(--gr-shadow); display: grid; place-items: center; font-size: 11px; color: var(--muted); }
.gr-share span.on { background: var(--action); color: #fff; font-weight: 600; transform: translateY(-6px); box-shadow: 0 12px 24px -10px rgba(10, 132, 255, .7); }
.gr-widget { width: 132px; height: 132px; border-radius: 28px; background: var(--gr-card); box-shadow: var(--gr-shadow); padding: 16px; text-align: left; display: grid; align-content: space-between; }
.gr-widget b { font: 600 15px/1.2 var(--font-head); }
.gr-widget span { font-size: 12px; color: var(--muted); }
.gr-widget i { display: block; height: 28px; border-radius: 999px; background: var(--soft); }

/* ---------- Rijen met voorbeeldvragen die voorbij schuiven ---------- */
.gr-marquee { margin-top: clamp(40px, 5vw, 60px); display: grid; gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.gr-track { display: flex; gap: 12px; width: max-content; list-style: none; margin: 0; padding: 0; }
.gr-track li { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; background: var(--gr-card);
  border: 1px solid var(--gr-edge); box-shadow: var(--gr-shadow); font-size: 16px; white-space: nowrap; }
.gr-track li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--gr-dot-1); }
.gr-track li:nth-child(5n+2)::before { background: var(--gr-dot-2); } .gr-track li:nth-child(5n+3)::before { background: var(--gr-dot-3); }
.gr-track li:nth-child(5n+4)::before { background: var(--gr-dot-4); } .gr-track li:nth-child(5n+5)::before { background: var(--gr-dot-5); }
.gr-marquee.live .gr-track { animation: grSlide var(--dur, 60s) linear infinite; }
.gr-marquee.live .gr-track.rev { animation-direction: reverse; }
.gr-marquee:hover .gr-track, .gr-marquee:focus-within .gr-track { animation-play-state: paused; }
@keyframes grSlide { to { transform: translateX(-50%); } }
html:not(.js) .gr-track, .gr-marquee:not(.live) .gr-track { flex-wrap: wrap; justify-content: center; width: auto; }

/* ---------- Drie momenten van de dag (zoals "Chat it through") ---------- */
.gr-moments { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gr-moments li { padding: 10px; }
.gr-shot { border-radius: 15px; background: var(--gr-tint-1); padding: 26px 26px 0; height: 360px; overflow: hidden; display: flex; justify-content: center; }
.gr-shot.t2 { background: var(--gr-tint-2); } .gr-shot.t3 { background: var(--gr-tint-3); } .gr-shot.t4 { background: var(--gr-tint-4); }
.gr-shot img { width: 72%; max-width: 230px; height: auto; align-self: flex-start; border-radius: 26px 26px 0 0; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .35);
  transition: transform .8s var(--ease); }
.gr-moments li:hover .gr-shot img { transform: translateY(-10px); }
.gr-tag { display: inline-block; margin: 20px 12px 0; padding: 4px 11px; border-radius: 999px; background: var(--soft); font-size: 13px; font-weight: 600; color: var(--muted); }
.gr-moments h3 { margin: 10px 12px 0; font-size: 21px; }
.gr-moments p { margin: 8px 12px 14px; color: var(--muted); font-size: 16px; line-height: 1.5; }

/* De video in een rustig kader */
.gr-film { margin: clamp(40px, 5vw, 60px) auto 0; max-width: 1080px; }

/* ---------- Slot met een handgetekende streep onder één woord ---------- */
.gr-final { text-align: center; padding: clamp(110px, 14vw, 190px) var(--gutter) clamp(90px, 10vw, 140px); }
.gr-final h2 { font-size: clamp(40px, 6vw, 76px); max-width: 15ch; margin: 0 auto; letter-spacing: -.04em; }
.gr-final p { margin: 20px auto 0; max-width: 46ch; color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); }
.gr-scribble { position: relative; display: inline-block; white-space: nowrap; }
.gr-scribble svg { position: absolute; left: -4%; bottom: -.16em; width: 108%; height: .34em; overflow: visible; pointer-events: none; }
.gr-scribble path { fill: none; stroke: var(--action); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1) .35s; }
.gr-scribble.in path, html:not(.js) .gr-scribble path { stroke-dashoffset: 0; }

/* ---------- Security (zoals granola.ai/security): links uitgelijnd, rustige blokken, vragen die openklappen ---------- */
.gr-doc-hero { max-width: 1000px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter) 0; }
.gr-doc-hero h1 { font-size: clamp(44px, 6.4vw, 84px); font-weight: 600; letter-spacing: -.045em; line-height: .98; max-width: 13ch; }
.gr-doc-hero .gr-lead { margin: 24px 0 0; max-width: 52ch; color: var(--muted); font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; }
.gr-doc-hero .gr-quiet { display: inline-block; margin-top: 18px; font-weight: 500; }
.gr-trust { max-width: 1000px; margin: clamp(44px, 5vw, 64px) auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gr-trust .gr-card { padding: clamp(24px, 3vw, 34px); display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; }
.gr-seal { grid-row: span 3; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--gr-tint-1); color: var(--action); }
.gr-seal.t2 { background: var(--gr-tint-2); color: var(--green); }
.gr-seal svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gr-trust h3 { font-size: 20px; }
.gr-trust p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.gr-trust .gr-more { font-size: 15px; font-weight: 500; margin-top: 6px; }

.gr-block { max-width: 1000px; margin: 0 auto; padding: clamp(80px, 9vw, 120px) var(--gutter) 0; }
.gr-block > h2 { text-align: left; max-width: 22ch; font-size: clamp(30px, 3.6vw, 44px); }
.gr-block > .gr-intro { margin: 14px 0 0; max-width: 60ch; color: var(--muted); font-size: 18px; line-height: 1.5; }
.gr-basics { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.gr-basics li { position: relative; padding: 18px 0 18px 40px; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.45; }
.gr-basics li::before { content: ""; position: absolute; left: 0; top: 18px; width: 24px; height: 24px; border-radius: 50%; background: var(--green-bg); }
.gr-basics li::after { content: ""; position: absolute; left: 7px; top: 25px; width: 9px; height: 5px; border: solid var(--green); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.gr-basics li span { display: block; color: var(--muted); font-size: 16px; margin-top: 2px; }

.gr-faq { margin: 30px 0 0; border-top: 1px solid var(--line); }
.gr-faq-group { margin: 44px 0 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--muted); text-transform: none; }
.gr-faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.gr-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0;
  font: 500 clamp(17px, 1.6vw, 20px)/1.35 var(--font-head); letter-spacing: -.01em; }
.gr-faq summary::-webkit-details-marker { display: none; }
.gr-faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(var(--muted), var(--muted)) center/14px 2px no-repeat, linear-gradient(var(--muted), var(--muted)) center/2px 14px no-repeat, var(--soft);

  transition: transform .4s var(--ease); }
.gr-faq details[open] summary::after { transform: rotate(45deg); }
.gr-faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.gr-faq details[open]::details-content { block-size: auto; }
.gr-faq .gr-a { padding: 0 54px 24px 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.gr-faq .gr-a p { margin: 0; }
.gr-faq .gr-a p + p { margin-top: 10px; }

.gr-links { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gr-links a { display: block; height: 100%; padding: 20px 22px; }
.gr-links b { display: block; color: var(--ink); font-weight: 600; font-size: 17px; }
.gr-links b::after { content: " ↗"; color: var(--muted); font-weight: 400; }
.gr-links span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.45; }

.gr-help { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: clamp(28px, 4vw, 44px); border-radius: 26px; background: var(--soft); }
.gr-help h2 { text-align: left; font-size: clamp(26px, 3vw, 36px); }
.gr-help p { margin: 10px 0 0; color: var(--muted); }
.gr-help .gr-ctas { margin: 0; }

/* De bestaande blokken van de securitypagina links uitlijnen binnen .gr-block */
.gr-block .sp-where, .gr-block .k-two, .gr-block .k-proof, .gr-block .k-table-wrap, .gr-block .k-req { margin-top: 30px; }
.gr-block .k-sub { text-align: left; max-width: 64ch; margin: 14px 0 0; color: var(--muted); font-size: 17px; }
.gr-block .k-link, .gr-block .sp-link { text-align: left; }

/* ---------- Telefoon en tablet ---------- */
@media (max-width: 1000px) {
  .gr-cards { grid-template-columns: repeat(2, 1fr); }
  .gr-links { grid-template-columns: 1fr 1fr; }
  .gr-plane { grid-template-columns: repeat(4, minmax(190px, 1fr)); inset: -6% -30% auto; }
  .gr-col:nth-child(n+5) { display: none; }
}
@media (max-width: 760px) {
  .gr-moments, .gr-trust, .gr-basics, .gr-links, .gr-cards.gr-3, .gr-cards.gr-2 { grid-template-columns: 1fr; }
  .gr-stage { height: 420px; }
  .gr-plane { grid-template-columns: repeat(3, 190px); gap: 14px; inset: -2% auto auto 50%; transform: translateX(-50%) perspective(1000px) rotateX(16deg) scale(.86); }
  .gr-tile { font-size: 14px; padding: 13px 14px; }
  .gr-col:nth-child(n+4) { display: none; }
  .gr-ask { padding: 10px 10px 10px 20px; }
  .gr-shot { height: 300px; }
  .gr-faq .gr-a { padding-right: 0; }
}
@media (max-width: 520px) {
  .gr-cards { grid-template-columns: 1fr; }
}

/* ---------- Minder beweging: alles staat stil in de eindstand ---------- */
@media (prefers-reduced-motion: reduce) {
  .gr-float, .gr-caret, .gr-side::before { animation: none !important; }
  .gr-stage .gr-tile { opacity: 1; transform: none; transition: none; }
  .gr-marquee .gr-track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto; }
  .gr-scribble path { stroke-dashoffset: 0; transition: none; }
  .js .reveal.gr-in { filter: none; transform: none; }
  .gr-faq details::details-content { transition: none; }
  a.gr-card:hover, .gr-moments li:hover .gr-shot img { transform: none; }
}

/* Wat al in het eerste scherm staat (motion.js geeft het meteen .now) komt toch zacht binnen, één voor één */
.js .reveal.gr-in.now { animation: grEnter 1s var(--ease) both; }
.js .reveal.gr-in.now[data-delay="1"] { animation-delay: .09s; } .js .reveal.gr-in.now[data-delay="2"] { animation-delay: .18s; }
.js .reveal.gr-in.now[data-delay="3"] { animation-delay: .27s; } .js .reveal.gr-in.now[data-delay="4"] { animation-delay: .36s; }
@keyframes grEnter { from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) { .js .reveal.gr-in.now { animation: none; } }

.gr-final .k-center { margin-top: 30px; }
.gr-final .k-cta { margin-top: 0; }
.gr-sec.gr-film-top { padding-top: clamp(44px, 5vw, 64px); }
.gr-film-top .gr-film { margin-top: 0; }

/* ---------- Juridische pagina's: rustig, links uitgelijnd, inhoud als vaste kolom (gr.js maakt .gr-toc) ---------- */
.gr-toc { display: none; }
@media (min-width: 1100px) {
  .page.gr-toc-on { max-width: 1120px; display: grid; grid-template-columns: 220px minmax(0, 720px); column-gap: 80px; justify-content: center; }
  .page.gr-toc-on > * { grid-column: 2; }
  .page.gr-toc-on > .gr-toc { display: block; grid-column: 1; grid-row: 1 / span 400; position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 130px); overflow-y: auto; }
  .page.gr-toc-on > nav[aria-label="Contents"] { display: none; }
  .gr-toc ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line); }
  .gr-toc a { display: block; padding: 6px 0; color: var(--muted); font-size: 14px; line-height: 1.35; transition: color .2s; position: relative; }
  .gr-toc a:hover { color: var(--ink); text-decoration: none; }
  .gr-toc a.on { color: var(--ink); font-weight: 500; }
  .gr-toc a.on::before { content: ""; position: absolute; left: -15px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--action); }
}
.page h1 { font-size: clamp(40px, 5.6vw, 64px); letter-spacing: -.04em; line-height: 1.02; }
.page .meta { margin-top: 14px; }
.page h2 { scroll-margin-top: 96px; }
.page p, .page li { line-height: 1.65; }

/* ---------- Overal op de subpagina's: zachte ingang uit de blur, ook voor wat al in beeld staat ---------- */
.js .reveal { filter: blur(5px); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.js .reveal.in { filter: none; }
.js .reveal.now:not(.gr-in) { animation: grEnter .9s var(--ease) both; }
main h1 { animation: grEnter 1s var(--ease) both; }
main h1 + p, main h1 + .meta, main .k-lead, main .sub { animation: grEnter 1s var(--ease) .1s both; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { filter: none; }
  .js .reveal.now:not(.gr-in), main h1, main h1 + p, main h1 + .meta, main .k-lead, main .sub { animation: none; }
}

/* ======================================================================================================================
   Tweede ronde (9 nov, Lucas: "en ombouwen"): de overige subpagina's in dezelfde stijl, zonder de teksten te veranderen
   (dan blijven de vertalingen kloppen). Grote rustige koppen, witte kaarten met een dunne rand en zachte schaduw,
   zwarte ronde knoppen, vragen met een rond plusje, slotblok zonder grijs vlak. Geldt alleen waar gr.css laadt (niet op home).
   ====================================================================================================================== */

/* Koppen bovenaan */
.doc-hero, .sx-hero { padding-top: clamp(64px, 8vw, 110px) !important; }
html body .doc-hero h1, html body .sx-hero h1, html body .so-hero h1, html body .pl-hero h1, html body .bl-hero h1, html body .cx-hero h1, html body .notfound h1 {
  font-size: clamp(44px, 6.6vw, 88px); font-weight: 600; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
html body .doc-hero .sub, html body .sx-hero p, html body .so-hero p, html body .pl-hero .k-lead, html body .bl-hero p, html body .cx-hero .k-lead {
  font-size: clamp(18px, 1.9vw, 22px); line-height: 1.45; color: var(--muted); }
.bl-hero { padding-top: clamp(70px, 9vw, 120px) !important; }
.pl-hero { padding-top: clamp(64px, 8vw, 110px) !important; }

/* Kaarten: wit, dunne rand, zachte schaduw, licht omhoog bij aanwijzen */
.sx-card, .plan, .who-card, .cards > a, .cards > div, .k-proof-card, .pl-tile {
  background: var(--gr-card) !important; border: 1px solid var(--gr-edge); box-shadow: var(--gr-shadow); border-radius: 22px !important;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
a.k-proof-card:hover, .cards > a:hover, .bl-tegel:hover, .plan:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 22px 44px -22px rgba(0, 0, 0, .28); }
.cards > a, .cards > div { padding: 10px 10px 22px; }
.cards .card-art { border-radius: 15px; }
.plan { padding: 30px 28px 32px !important; }

/* Knoppen: zwart en rond, de tweede licht */
html body .badge, html body .btn2 { border-radius: 999px; }
html body .k-btn, html body .btn2:not(.ghost), html body .bl-btn { background: var(--ink) !important; color: var(--bg) !important; border-radius: 999px; box-shadow: none; }
html body .k-btn:hover, html body .btn2:not(.ghost):hover, html body .bl-btn:hover { opacity: .86; text-decoration: none; }
html body .bl-link, html body .bl-label { color: var(--ink); }
html body .bl-pillen li { background: var(--soft); color: var(--ink); }
html body:has(main.bl) { --action: #0a84ff; }
html body:has(main.bl) .nav .nav-cta { background: var(--soft) !important; color: var(--ink) !important; }
html body:has(main.bl) .nav .nav-cta:hover { background: var(--line) !important; }

/* Vragen die openklappen: rond plusje, rustige regels */
.faq summary { padding: 22px 0; font-family: var(--font-head); font-size: clamp(17px, 1.6vw, 19px); }
.faq summary::after { width: 30px; height: 30px; border-radius: 50%; color: var(--muted);
  background: linear-gradient(currentColor, currentColor) center / 13px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 13px no-repeat, var(--soft); transition: transform .4s var(--ease); }
.faq summary:hover { color: var(--ink); }
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details p { padding-right: 54px; }

/* Slotblok: geen grijs vlak, grote kop zoals op /iphone */
html body .final-panel { background: none !important; padding: clamp(60px, 9vw, 120px) 20px !important; }
html body .final h2, html body .bl-slot h2, html body .biz-cta-sec h2 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -.04em; line-height: 1; max-width: 15ch; margin-left: auto; margin-right: auto; }

/* Nieuws: kaarten iets ronder en rustiger */
.nw-art { border-radius: 18px !important; }

@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; }
  a.k-proof-card:hover, .cards > a:hover, .bl-tegel:hover, .plan:hover { transform: none; }
}

/* Pilot: zwarte knop en witte stappen, zoals de rest */
html body .pl-go { background: var(--ink); color: var(--bg); border-radius: 999px; }
html body .pl-steps li { background: var(--gr-card); border: 1px solid var(--gr-edge); box-shadow: var(--gr-shadow); border-radius: 22px; }
html body .pl-when { color: var(--muted); }
/* Business is altijd licht (business-licht.css): de kaarten daar blijven ook in de donkere modus wit */
html body:has(main.bl) { --gr-card: #fff; --gr-edge: rgba(0, 0, 0, .07); --gr-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px -18px rgba(0, 0, 0, .18); }
html body:has(main.bl) .nav .nav-ghost { border-color: #e3e8f0; color: #1d1d1f; }
html body:has(main.bl) .nav .nav-cta { background: #f2f2f4 !important; color: #1d1d1f !important; }
/* Taalmelding op business (10 nov): business is altijd licht, dus ook in de donkere modus een lichte pil met donkere tekst */
:root body:has(main.bl) .lang-hint { background: rgba(255, 255, 255, .86); color: #1d1d1f; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 18px 40px -16px rgba(10, 30, 70, .35); }
:root body:has(main.bl) .lang-hint a { background: #1d1d1f; color: #fff; }
:root body:has(main.bl) .lang-hint button { color: #6e6e73; }
:root body:has(main.bl) .lang-hint button:hover { background: rgba(0, 0, 0, .06); }
/* Siri-kaart (10 nov): langere zinnen (NL/DE/FR) vallen niet meer onder de rand weg */
.gr-vis .gr-stack { width: 86%; gap: 6px; }
.gr-vis .gr-bubble { font-size: 13px; line-height: 1.35; padding: 8px 12px; max-width: 88%; }
/* "From morning to evening" (10 nov, Lucas: "maak hier gwn 3 phones van zonder die gehele blokken eromheen"):
   drie losse telefoons, helemaal in beeld, zonder kaart of gekleurd vlak; tekst eronder zonder kaart */
html body .gr-moments { gap: clamp(20px, 3vw, 40px); }
html body .gr-moments li.gr-card { background: none !important; border: 0; box-shadow: none; border-radius: 0 !important; padding: 0; text-align: center; transform: none; }
html body .gr-moments .gr-shot, html body .gr-moments .gr-shot.t2, html body .gr-moments .gr-shot.t3, html body .gr-moments .gr-shot.t4 { background: none; padding: 0; height: auto; overflow: visible; border-radius: 0; }
html body .gr-moments .gr-shot img { width: 100%; max-width: 250px; margin: 0 auto; align-self: auto; border-radius: 34px; box-shadow: 0 0 0 1px var(--gr-edge, rgba(0, 0, 0, .08)), 0 24px 48px -24px rgba(0, 0, 0, .35); }
html body .gr-moments li:hover .gr-shot img { transform: translateY(-6px); }
html body .gr-moments .gr-tag { margin: 26px 0 0; }
html body .gr-moments h3 { margin: 10px 0 0; }
html body .gr-moments p { margin: 8px auto 0; max-width: 30ch; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gr-moments .gr-shot img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 24px 48px -24px rgba(0, 0, 0, .8); } }
/* Telefoon: naast elkaar schuiven in plaats van drie hoge schermen onder elkaar */
@media (max-width: 760px) {
  html body .gr-moments { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: -20px; margin-right: -20px; padding: 0 20px 12px; scrollbar-width: none; }
  html body .gr-moments::-webkit-scrollbar { display: none; }
  html body .gr-moments li.gr-card { scroll-snap-align: center; }
  html body .gr-moments .gr-shot img { max-width: 230px; }
}