#page-fixmydata .hero{padding-top:78px;padding-bottom:14px}
#page-fixmydata .hero h1{font-size:clamp(33px,5vw,48px);font-weight:700;max-width:780px}
#page-fixmydata .hero p.lead{font-size:19px;max-width:640px;margin-top:22px;color:var(--slate)}

#page-fixmydata .sec{padding-top:64px;padding-bottom:64px}
#page-fixmydata .sec>h2,#page-fixmydata .band-soft h2{font-size:clamp(26px,3.2vw,34px);font-weight:700;max-width:680px}
#page-fixmydata .sec>.sub,#page-fixmydata .band-soft .sub{font-size:16px;max-width:640px;margin-top:8px;color:var(--slate)}
#page-fixmydata p.body{font-size:15.5px;color:var(--slate);line-height:1.65;margin-top:16px;max-width:780px}
#page-fixmydata p.body b,#page-fixmydata p.body strong{color:var(--navy);font-weight:600}

/* In -> fix -> out flow, colour-keyed grey/cyan/navy per the ownership-colour story */
#page-fixmydata .fd-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin-top:44px}
#page-fixmydata .fd-step{flex:1 1 200px;min-width:180px;border:.5px solid var(--line);border-left:4px solid var(--c,var(--muted));border-radius:12px;background:var(--bg);padding:18px 20px}
#page-fixmydata .fd-step .fd-lab{display:block;font-family:var(--display);font-weight:700;color:var(--c,var(--navy));font-size:16px;margin-bottom:4px}
#page-fixmydata .fd-step .fd-txt{display:block;font-size:14px;color:var(--slate)}
#page-fixmydata .fd-arrow{display:flex;align-items:center;color:var(--muted);font-size:22px;font-weight:600}
/* Stacked, the 200px flex basis becomes a 200px HEIGHT, leaving each card
   half empty, so let the stacked cards size to their own text instead */
@media(max-width:760px){#page-fixmydata .fd-flow{flex-direction:column}#page-fixmydata .fd-step{flex:0 0 auto}#page-fixmydata .fd-arrow{transform:rotate(90deg);justify-content:center}}
/* The hand-over arrives in order, card then arrow then card, riding the shared
   .reveal transition in chrome.css. No JavaScript, or reduced motion set, and
   the whole sequence is simply drawn at once. */
#page-fixmydata .fd-flow>.reveal:nth-child(2){transition-delay:.12s}
#page-fixmydata .fd-flow>.reveal:nth-child(3){transition-delay:.24s}
#page-fixmydata .fd-flow>.reveal:nth-child(4){transition-delay:.36s}
#page-fixmydata .fd-flow>.reveal:nth-child(5){transition-delay:.48s}

/* Icon box shared by the secret-sauce pillars and the clean/enrich/maintain cards */
#page-fixmydata .fd-ic{width:38px;height:38px;border-radius:9px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--cyan-ink);margin-bottom:12px}
#page-fixmydata .fd-ic .gic{width:20px;height:20px}

/* Secret-sauce pillars */
/* 240px minimum caps the row at three columns inside the 976px wrap, so the
   five pillars read as 3 + 2 rather than a lopsided 4 + 1 */
#page-fixmydata .fd-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:22px}
#page-fixmydata .fd-pill{border:.5px solid var(--line);border-radius:12px;background:var(--bg);padding:18px 20px}
#page-fixmydata .fd-pill h3{font-size:15.5px;margin:2px 0 6px;color:var(--navy)}
#page-fixmydata .fd-pill p{font-size:13.5px;color:var(--slate);line-height:1.55}
#page-fixmydata .fd-pill .fd-ic{width:34px;height:34px;margin-bottom:10px}
#page-fixmydata .fd-pill .fd-ic .gic{width:18px;height:18px}