/* Subpagina's in de opmaak van proef-landing v3: Strategies, Research, Tools.
   Wordt geladen ná proef-landing.css en proef-v2.css en pakt alleen wat op een
   pagina zonder machine-paneel anders moet. Cailean 4/9: "de strategies,
   research en tools met dezelfde opmaak". */

/* de hero: één kolom, compact, zonder kaarsen erachter (Cailean 5/9: de
   subpagina's blijven zoals ze waren, alleen in de opmaak van de landing) */
.hero { position: relative; z-index: 1; padding: 64px 0 40px; overflow: visible; }
.hero .omhulsel > * { max-width: 680px; }
.hero h1 { font-size: clamp(38px, 5.4vw, 64px); }
.hero .acties { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 780px) { .hero { padding: 40px 0 28px; } }
/* op deze pagina's begint de inhoud direct onder de hero, geen paneel ertussen */
.blok--eerst { padding-top: 24px; }

/* de balk op een subpagina laat zien waar je bent */
.balk__nav a.hier { color: var(--tekst); }

/* strategiekaarten: dezelfde kaart als de papers, met het jaarcijfer groot */
.strat { display: flex; flex-direction: column; text-decoration: none; color: inherit;
         border: 1px solid var(--rand); border-radius: 16px; padding: 18px; background: var(--opp);
         transition: transform var(--basis) var(--ease), border-color var(--basis) var(--ease); }
a.strat:hover { transform: translateY(-4px); border-color: var(--rand-licht); transition-duration: var(--snel); }
.strat h3 { font-family: var(--display); font-size: 15.5px; font-weight: 700; margin: 0 0 2px; line-height: 1.3; }
.strat__markt { font-family: var(--mono); font-size: 10.5px; color: var(--dof); }
.strat__ytd { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.02em;
              font-variant-numeric: tabular-nums; margin-top: 14px; line-height: 1; }
.strat__ytd.op { color: var(--op); } .strat__ytd.neer { color: var(--neer); }
.strat__label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
                color: var(--dof); margin-top: 6px; }
.strat__cijfers { display: flex; gap: 14px; font-family: var(--mono); font-size: 11.5px; color: var(--dof);
                  border-top: 1px solid var(--rand); padding-top: 10px; margin-top: 14px; }
.strat__cijfers b { color: #cfe3de; font-weight: 600; }
.strat__paper { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--accent); }
.strat__paper span { display: inline-block; transition: transform var(--snel) var(--ease); }
a.strat:hover .strat__paper span { transform: translateX(3px); }

/* research: een kop per groep, de kaartrij eronder */
.groep { margin-top: 44px; }
.groep:first-child { margin-top: 0; }
.groep__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap;
              margin-bottom: 16px; }
.groep__kop h3 { font-family: var(--display); font-size: 22px; font-weight: 700; }
.groep__kop p { color: var(--dof); font-size: 14.5px; margin: 0; }
.merkje--boek { color: var(--accent); }
.merkje--type { color: var(--dof); border-color: var(--rand-licht); text-transform: none; letter-spacing: .02em; }
.paper__kop .merkje + .merkje { margin-left: 6px; }
.paper__ytd { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.02em;
              font-variant-numeric: tabular-nums; margin-top: 6px; }
.paper__ytd small { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
                    color: var(--dof); font-weight: 500; margin-left: 8px; }
.paper__ytd.op { color: var(--op); } .paper__ytd.neer { color: var(--neer); }
.paper__cijfers { flex-wrap: wrap; row-gap: 6px; }
.paper__cijfers span:last-child { margin-left: auto; }

/* de tools: het simulator- en combiner-blok komt letterlijk van de huidige
   tools-pagina en gebruikt zijn eigen (inline) opmaak, plus combiner/app.css.
   Die stylesheet rekent op de tokens van site.css; hier de vertaling. */
:root {
  --muted: var(--dof); --border: var(--rand); --border-glow: var(--rand-licht);
  --cyan: var(--accent); --text: var(--tekst); --up: var(--op); --down: var(--neer);
}
.werkbank { margin-top: 8px; }
.werkbank .panel { background: rgba(255,255,255,.02); }
.werkbank select, .werkbank input, .werkbank button { font-family: inherit; }
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 780px) { .stappen { grid-template-columns: minmax(0,1fr); } }
.stap { border: 1px solid var(--rand); border-radius: 16px; padding: 20px; background: var(--opp); }
.stap b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
          color: var(--accent); margin-bottom: 8px; }
.stap h3 { font-family: var(--display); font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.stap p { color: var(--dof); font-size: 14px; margin: 0; }
.stap a { color: var(--tekst); font-weight: 600; text-decoration: none; }
.stap a:hover { color: var(--accent); }

/* tekst onder een kaartrij */
.noot { color: var(--dof); font-size: 13px; margin-top: 18px; }