/* The features page /nl/features/ and /en/features/, from the design of #2595414 (blocks "held", "inhoud +
   inhoudsopgave", "Wat is Ergates", "tabellen", "binnenkort", "slot" and "Smal"). Every class has the fp- prefix;
   the header and footer are the site's own (site.css). Tokens are shared.css's --tm-*; the design's --amber and
   --deploy-green, which shared.css does not have, are their values from design/tokens.json. */
.fp{background:var(--tm-paper);color:var(--tm-ink);font-family:var(--tm-sans);line-height:1.5;overflow-x:clip}
.fp-wrap{max-width:1200px;margin:0 auto;padding-inline:var(--tm-gutter);box-sizing:border-box}
.fp :focus-visible{outline:2px solid var(--tm-honey);outline-offset:3px;border-radius:4px}

/* held */
.fp-hero{position:relative;overflow:hidden;background:var(--tm-forest);color:var(--tm-cream);border-bottom:1px solid var(--tm-line-dark)}
.fp-hero-in{position:relative;z-index:1;padding-block:88px 76px}
.fp-h1{margin:14px 0 0;max-width:12ch;font-size:clamp(40px,6vw,68px);line-height:1.03;font-weight:600;text-wrap:balance}

/* inhoud + inhoudsopgave */
.fp-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;padding-block:64px var(--tm-section)}
.fp-toc{align-self:start;position:sticky;top:110px}
.fp-toc h2{margin:0 0 14px;font-family:var(--tm-mono);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:2px;text-transform:uppercase;color:var(--tm-honey-ink)}
.fp-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--tm-line)}
.fp-toc a{display:block;margin-left:-1px;padding:7px 0 7px 14px;border-left:2px solid transparent;color:var(--tm-ink-2);font-size:14px;line-height:1.35;text-decoration:none}
.fp-toc a:hover{color:var(--tm-ink);border-left-color:var(--tm-honey)}
.fp-toc .fp-soon a{color:var(--tm-honey-ink)}

.fp-sections{display:grid;min-width:0}
.fp section.fp-sec{scroll-margin-top:110px}
.fp-sec{display:grid;gap:28px;min-width:0;padding-block:56px;border-top:1px solid var(--tm-line)}
.fp-sec:first-child{border-top:0;padding-top:0}
.fp-sec-head{display:grid;gap:10px;max-width:68ch}
.fp-sec-meta{display:flex;align-items:center;gap:10px}
.fp-cell{width:14px;height:16px;flex:none;background:var(--tm-honey);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fp-sec:target .fp-cell{animation:fp-pulse 1.4s ease-out 1}
@keyframes fp-pulse{0%{transform:scale(1.8)}100%{transform:scale(1)}}
.fp-h2{margin:0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:600;color:var(--tm-ink);text-wrap:balance}
.fp-intro{margin:0;max-width:62ch;font-size:19px;line-height:1.5;color:var(--tm-ink-2)}

.fp-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.fp-points li{position:relative;padding:16px 0 16px 26px;border-top:1px solid var(--tm-line);color:var(--tm-ink-2);line-height:1.55;overflow-wrap:anywhere}
.fp-points li::before{content:"";position:absolute;left:0;top:22px;width:10px;height:11.5px;background:var(--tm-honey-soft);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fp-points .fp-lead,.fp-para .fp-lead{color:var(--tm-ink);font-weight:600}
.fp-points li.fp-wide{grid-column:1/-1}

/* Wat is Ergates */
.fp-what{display:grid;gap:26px}
.fp-big{margin:0;max-width:34ch;font-family:var(--tm-display);font-size:clamp(22px,2.4vw,28px);font-weight:400;line-height:1.4;letter-spacing:-.01em;color:var(--tm-ink);text-wrap:pretty}
.fp-what-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.fp-para{margin:0;padding:20px 22px;background:var(--tm-ivory);border:1px solid var(--tm-line);border-radius:var(--tm-r-md);color:var(--tm-ink-2)}
.fp-flow{grid-column:1/-1;padding:24px 26px;background:var(--tm-forest);border-color:var(--tm-forest);color:var(--tm-mist)}
.fp-flow .fp-lead{display:block;margin-bottom:12px;font-family:var(--tm-mono);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:2px;text-transform:uppercase;color:var(--tm-honey)}
.fp-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:16px;color:var(--tm-cream)}
.fp-step{padding:7px 12px;background:var(--tm-panel);border:1px solid var(--tm-line-dark-2);border-radius:12px}
.fp-step:last-child{background:#1F5A40;border-color:#2C7553}
.fp-arr{font-family:var(--tm-mono);color:var(--tm-honey)}
.fp-name{display:flex;align-items:flex-start;gap:16px;font-size:15px}
.fp-gr{padding-top:1px;font-family:var(--tm-display);font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.01em;color:var(--tm-honey-ink);white-space:nowrap}

/* tabellen */
.fp-tbl{overflow:hidden;background:var(--tm-ivory);border:1px solid var(--tm-line);border-radius:var(--tm-r-md)}
.fp-tbl table{width:100%;border-collapse:collapse}
.fp-tbl thead th{padding:14px 22px;background:var(--tm-paper);border-bottom:1px solid var(--tm-line);font-family:var(--tm-mono);font-size:12px;font-weight:500;line-height:1.3;letter-spacing:2px;text-transform:uppercase;color:var(--tm-honey-ink);text-align:left}
.fp-tbl tbody th,.fp-tbl tbody td{padding:16px 22px;border-top:1px solid var(--tm-line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.fp-tbl tbody tr:first-child th,.fp-tbl tbody tr:first-child td{border-top:0}
.fp-tbl tbody th{width:30%;font-family:var(--tm-display);font-size:16px;font-weight:600;line-height:1.35;color:var(--tm-ink)}
.fp-tbl tbody th span{display:inline-flex;align-items:center;gap:10px}
.fp-tbl tbody th span::before{content:"";width:10px;height:11.5px;flex:none;background:var(--tm-honey);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fp-tbl tbody td{color:var(--tm-ink-2)}
.fp-tbl tbody tr:hover{background:var(--tm-paper)}
.fp-closing{display:flex;align-items:flex-start;gap:12px;max-width:72ch;margin:0;padding:16px 20px;border:1px dashed var(--tm-line-dash);border-radius:var(--tm-r-md);color:var(--tm-ink);font-weight:500}
.fp-closing::before{content:"";flex:none;margin-top:4px;width:14px;height:16px;background:var(--tm-forest);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* binnenkort */
.fp-soon-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fp-soon-list li{display:grid;align-content:space-between;gap:18px;padding:22px;background:var(--tm-paper);border:1.5px dashed var(--tm-line-dash);border-radius:var(--tm-r-md);color:var(--tm-ink);font-family:var(--tm-display);font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.fp-chip{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:7px 10px;background:var(--tm-honey-soft);border-radius:var(--tm-r-pill);color:var(--tm-honey-ink-2);font-family:var(--tm-mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:1.5px;text-transform:uppercase}
.fp-chip::before{content:"";width:8px;height:9px;background:linear-gradient(90deg,var(--tm-honey-ink) 50%,transparent 50%);border:1px solid var(--tm-honey-ink);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* slot */
.fp-cta{position:relative;overflow:hidden;background:var(--tm-forest);color:var(--tm-cream)}
.fp-cta-in{position:relative;z-index:1;display:grid;justify-items:start;gap:22px;padding-block:var(--tm-section) calc(var(--tm-section) + 40px)}
.fp-cta h2{margin:0;max-width:16ch;font-size:clamp(32px,5vw,52px);line-height:1.05;font-weight:600;text-wrap:balance}
.fp-cta p{margin:0;max-width:48ch;font-size:19px;color:var(--tm-mist)}
.fp-giant{position:absolute;left:-.04em;bottom:-.2em;font-family:var(--tm-display);font-size:21vw;font-weight:600;line-height:.82;letter-spacing:-.045em;color:var(--tm-giant);white-space:nowrap;pointer-events:none;user-select:none}

/* The site header is only sticky from 768 px (site.css): below that an anchor need not clear it. */
@media (max-width:767px){
  .fp section.fp-sec{scroll-margin-top:16px}
}

/* ——— narrow ("Smal" in the design) ——— */
@media (max-width:880px){
  .fp-body{grid-template-columns:minmax(0,1fr);gap:8px;padding-top:36px}
  .fp-toc{position:static;padding:18px 18px 12px;background:var(--tm-ivory);border:1px solid var(--tm-line);border-radius:var(--tm-r-md)}
  .fp-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;border-left:0}
  .fp-toc a{margin-left:0;padding:8px 0;border-left:0;border-top:1px solid var(--tm-line)}
  .fp-toc li:nth-child(-n+2) a{border-top:0}
  .fp-sec:first-child{padding-top:48px}
  .fp-soon-list{grid-template-columns:minmax(0,1fr)}
  .fp-hero .hr-deco{opacity:.55}
}
@media (max-width:640px){
  .fp-wrap{padding-inline:16px}
  .fp-hero-in{padding-block:56px 120px}
  .fp-h1{font-size:40px}
  .fp-h2{font-size:30px}
  .fp-intro{font-size:17px}
  .fp-points{grid-template-columns:minmax(0,1fr)}
  .fp-what-grid{grid-template-columns:minmax(0,1fr)}
  .fp-toc ol{grid-template-columns:minmax(0,1fr)}
  .fp-toc li:nth-child(2) a{border-top:1px solid var(--tm-line)}
  .fp-sec{gap:22px;padding-block:44px}
  .fp-flow{padding:20px}
  .fp-name{flex-direction:column;gap:4px}
  /* the tables stack row by row */
  .fp-tbl{overflow:visible;background:transparent;border:0;border-radius:0}
  .fp-tbl table,.fp-tbl tbody,.fp-tbl tr,.fp-tbl th,.fp-tbl td{display:block;width:auto}
  .fp-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .fp-tbl tbody{display:grid;gap:10px}
  .fp-tbl tbody tr{padding:16px 16px 14px;background:var(--tm-ivory);border:1px solid var(--tm-line);border-radius:var(--tm-r-md)}
  .fp-tbl tbody tr:hover{background:var(--tm-ivory)}
  .fp-tbl tbody th,.fp-tbl tbody td{width:auto;padding:0;border:0}
  .fp-tbl tbody th{margin-bottom:6px}
  .fp-cta p{font-size:17px}
  .fp-cta-in{padding-block:72px 96px}
}

@media (prefers-reduced-motion:reduce){
  .fp-sec:target .fp-cell{animation:none}
}