(up to "Demo page only") into the site CSS.
  - Copy the markup between "start hub: start" and "start hub: end".
  - All hrefs are placeholders: replace with the real category/article URLs.
  - Fonts are inherited; headings use the site's Fira Sans heading stack.
-->
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@600;700&family=Raleway:wght@400;500;600&display=swap" rel="stylesheet">
<style id="hb-start-css">
.hb-start{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:28px;padding:40px 32px 32px;background:#FBF8F6;border:1px solid #F1E6DE;border-radius:32px;color:#1F2A44}
.hb-start__bubbles{position:absolute;top:-10px;right:-10px;width:260px;height:auto;pointer-events:none}
.hb-start__bubbles .b1{animation:hbStartF 7s ease-in-out infinite}
.hb-start__bubbles .b2{animation:hbStartF 9s ease-in-out -3s infinite}
@keyframes hbStartF{50%{transform:translateY(-6px)}}
.hb-start__intro{position:relative;display:flex;flex-direction:column;gap:12px;max-width:640px}
.hb-start__eyebrow{margin:0;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#D9776A}
.hb-start__title{margin:0;font-family:'Fira Sans',sans-serif;font-weight:700;font-size:clamp(30px,4.2vw,44px);line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.hb-start__title em{font-style:normal;color:#7A8CAD}
.hb-start__lead{margin:0;font-size:17px;line-height:1.55;color:#4A5672;text-wrap:pretty}
.hb-start__grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.hb-path{display:flex;flex-direction:column;gap:18px;padding:24px;background:#fff;border:1px solid #EDE6DF;border-radius:24px;transition:border-color .2s,box-shadow .2s,transform .2s}
.hb-path:hover{border-color:#F98C84;box-shadow:0 10px 28px -16px rgba(31,42,68,.35);transform:translateY(-2px)}
.hb-path__head{display:flex;align-items:center;gap:14px}
.hb-path__tile{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--hb-tint,#FCE4DF);flex:none}
.hb-path__tile svg{width:28px;height:28px;fill:none;stroke:#1F2A44;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hb-path__tile .hb-dot{fill:#F98C84;stroke:none}
.hb-path__step{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#7A8CAD}
.hb-path__title{margin:2px 0 0;font-family:'Fira Sans',sans-serif;font-weight:600;font-size:22px;line-height:1.2}
.hb-path__title a{color:#1F2A44;text-decoration:none}
.hb-path__title a:hover{color:#D9776A}
.hb-path__text{margin:0;font-size:15px;line-height:1.55;color:#4A5672}
.hb-path__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.hb-path__chips a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:18px;background:var(--hb-tint,#FCE4DF);color:#1F2A44;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s}
.hb-path__chips a:hover,.hb-path__chips a:focus-visible{background:#1F2A44;color:#fff}
.hb-path__cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;font-weight:600;font-size:15px;color:#1F2A44;text-decoration:none;border-bottom:2px solid #F98C84}
.hb-path__cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hb-path__cta:hover{color:#D9776A}
.hb-path__cta:hover svg{transform:translateX(3px)}
.hb-start a:focus-visible{outline:2px solid #F98C84;outline-offset:3px;border-radius:8px}
@media (max-width:600px){.hb-start{padding:28px 18px 18px;border-radius:24px}.hb-start__bubbles{width:170px;opacity:.7}.hb-path{padding:20px}}
@media (prefers-reduced-motion:reduce){.hb-start__bubbles g{animation:none}.hb-path,.hb-path__cta svg{transition:none}.hb-path:hover{transform:none}}


/* Integration with the existing site theme and reduced motion. */
.hb-rr-home .hb-start { margin: 16px 0 28px; }
.hb-start__bubbles .b1, .hb-start__bubbles .b2 { animation-duration: 4s; animation-delay: 0s; animation-iteration-count: 1; }
.hb-start a:focus-visible { outline-color: #1F2A44; }
body.dark .hb-start { background: #FBF8F6; color: #1F2A44; }
body.dark .hb-start .hb-start__title, body.dark .hb-start .hb-path__title { color: #1F2A44; }
body.dark .hb-start .hb-start__title em { color: #7A8CAD; }
body.dark .hb-start .hb-path { background: #fff; }
body.dark .hb-start .hb-path a { color: #1F2A44; }
body.dark .hb-start .hb-path__chips a:hover, body.dark .hb-start .hb-path__chips a:focus-visible { color: #fff; }
@media (prefers-reduced-motion: reduce) { .hb-start__bubbles .b1, .hb-start__bubbles .b2 { animation: none; } }

/* Keep the introduction and illustration in normal flow, above the cards. */
.hb-rr-home .hb-start{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;column-gap:40px;row-gap:32px;align-items:center;border-bottom-right-radius:24px}
.hb-start__intro{grid-column:1;grid-row:1;max-width:640px;min-width:0}
.hb-start__art{grid-column:2;grid-row:1;display:block;position:static;width:260px;height:auto;max-width:100%;border-bottom-right-radius:24px;pointer-events:none;justify-self:end}
.hb-start__grid{grid-column:1/-1;grid-row:2;min-width:0}
@media(max-width:800px){
.hb-rr-home .hb-start{grid-template-columns:minmax(0,1fr);gap:24px}
.hb-start__intro{grid-column:1;grid-row:1;max-width:100%}
.hb-start__art{grid-column:1;grid-row:2;width:180px;justify-self:center;margin:0}
.hb-start__grid{grid-column:1;grid-row:3}
}