/* Opmaak voor de silo functies (v2). Enkel regels die de gedeelde stijl niet heeft. */

/* ---------- Nagetekend scherm in de hero ---------- */
.fx-hero-card { max-width: 440px; margin: 0 auto; }
.fx-hero-card .hw-dayline { margin-bottom: var(--space-2); }
.fx-hero-card .hw-ticks:last-child { margin-bottom: 0; }
.fx-card-sub { margin-top: var(--space-5); }
.fx-tap-gap { margin-top: var(--space-5); }
.fx-pill-done {
    display: inline-block;
    margin: var(--space-3) 0 0;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-done-soft);
    color: var(--color-done-strong);
    font-size: var(--text-sm);
    font-weight: 600;
}
/* Code van de app: vier rondjes, zoals de toegangscode van een gsm. */
.fx-pin { display: flex; gap: var(--space-3); }
.fx-pin span {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--color-border-strong);
}
.fx-pin span.is-on { background: var(--color-orange); border-color: var(--color-orange); }

/* ---------- Stappen van een functie ---------- */
.fx-steps {
    list-style: none;
    margin: var(--space-6) auto 0;
    padding: 0;
    max-width: 1080px;
    display: grid;
    gap: var(--space-4);
}
@media (min-width: 720px) { .fx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .fx-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fx-step {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.fx-step-num {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 0 var(--space-3);
    border-radius: 50%;
    background: var(--color-orange);
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: 700;
}
.fx-step h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--color-text); }
.fx-step p:last-child { margin: 0; color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.fx-notes { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ---------- Hub: de lijn ingepland, geregistreerd, doorgestuurd ---------- */
.fx-flow {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1080px;
    display: grid;
    gap: var(--space-7);
}
@media (min-width: 880px) { .fx-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.fx-flow-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.fx-flow-num {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-orange);
    color: var(--color-white);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-lg);
}
.fx-flow-title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-text); }
.fx-flow-lead { margin: 0 0 var(--space-4); color: var(--color-text-secondary); line-height: var(--leading-normal); }
.fx-flow-tiles { display: grid; gap: var(--space-4); }
.fx-under { max-width: 1080px; margin: var(--space-8) auto 0; }
.fx-under-label {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--color-text-muted);
}

/* ---------- Links naar de functies op de home en Hoe werkt het ---------- */
.fx-more { margin: var(--space-4) 0 0; font-weight: 600; }
.fx-more a { color: var(--color-orange); text-decoration: none; }
@media (hover: hover) { .fx-more a:hover { text-decoration: underline; } }
.pillar .fx-more { margin-top: var(--space-5); }
.hw-step-copy p.fx-more { margin-top: var(--space-4); }
.fx-trades-line { margin-top: var(--space-5); text-align: center; color: var(--color-text-secondary); }
.fx-trades-line a { color: var(--color-orange); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .fx-trades-line a:hover { text-decoration: underline; } }
.fx-groups { max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (min-width: 720px) { .fx-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .fx-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }