/* Shared onboarding and roadmap additions; editable in Bootstrap Studio. */
.site-icon { width:1.35rem; height:1.35rem; flex:none; fill:none; stroke-width:1.8; }
a:focus-visible,summary:focus-visible { outline:3px solid #b34075; outline-offset:5px; border-radius:6px; }
.desktop-nav { gap:22px; }
.desktop-nav .nav-help { display:inline-flex; align-items:center; gap:6px; }
.mobile-nav .site-icon { width:1.2rem; height:1.2rem; margin-right:8px; vertical-align:middle; }
.testing-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; margin-bottom:20px; border:1px solid #e5b9cd; border-radius:30px; color:#963b66; background:#fff; font-size:.875rem; font-weight:700; }
.testing-badge .site-icon:first-child { width:1rem; height:1rem; }
.testing-badge .site-icon:last-child { width:.9rem; height:.9rem; }
.testing-badge:hover { color:#71294c; border-color:#b34075; }
.hero-support { display:flex; flex-wrap:wrap; align-items:center; gap:8px 25px; margin-top:20px; }
.hero-support a { display:inline-flex; align-items:center; gap:7px; min-height:44px; color:#625663; font-size:.875rem; font-weight:700; }
.hero-support a:hover { color:#a53e70; }
.hero-support .site-icon { width:1.15rem; height:1.15rem; }
.how-section { padding-block:54px 60px; border-bottom:1px solid #eadfe6; }
.how-section h2 { text-align:center; font-size:clamp(1.5rem,3vw,2rem); margin:0 0 32px; letter-spacing:-.025em; }
.how-steps { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:0 auto;padding:0;list-style:none;max-width:850px; }
.how-steps li { --step-ink:#63203f;--step-bg:#ee609f;--step-edge:#d5387c;position:relative;display:flex;flex-direction:column;align-items:center;gap:21px;text-align:center; }
.how-steps .how-step-invite { --step-ink:#064d3d;--step-bg:#20b68c;--step-edge:#087f65; }
.how-steps .how-step-record { --step-ink:#fff;--step-bg:var(--story-berry);--step-edge:var(--story-berry); }
.how-steps li:not(:last-child)::after { content:"";position:absolute;left:calc(50% + 58px);width:calc(100% - 84px);top:43px;border-top:2px dashed var(--story-pink); }
.how-steps li:nth-child(2)::after { border-color:var(--story-emerald); }
.how-step-icon { position:relative;display:grid;place-items:center;width:88px;height:88px;border-radius:30px;background:var(--step-bg);color:var(--step-ink);border:1px solid var(--step-edge);box-shadow:0 7px 0 -2px color-mix(in srgb,var(--step-bg) 45%,white);transition:transform .25s,border-radius .25s; }
.how-step-icon>.step-illustration { width:64px;height:64px;overflow:visible; }
.how-step-number { position:absolute;bottom:-6px;right:-6px;display:grid;place-items:center;width:27px;height:27px;border:3px solid #fff;border-radius:50%;background:var(--story-berry);color:#fff;font-size:.75rem;font-weight:700; }
.how-steps h3 { margin:0;font-size:1rem;font-weight:700;line-height:1.5; }
.how-step:hover .how-step-icon { transform:translateY(-4px) rotate(-3deg);border-radius:34px 24px 34px 24px; }
.step-receipt { color:#63203f; }
.step-door { transform-box:fill-box;transform-origin:left; }
.step-person-two,.step-heart,.step-record-check { transform-box:fill-box;transform-origin:center; }
.motion-scene .step-door { animation:step-welcome 8s ease-in-out infinite; }
.motion-scene .step-heart { animation:step-affection 9s ease-in-out infinite; }
.how-step-invite .step-heart { animation-delay:1.3s; }
.motion-scene .step-person-two { animation:step-join 8.7s ease-in-out infinite; }
.motion-scene .step-record-line { stroke-dasharray:20;animation:step-write 8.3s ease-in-out infinite; }
.motion-scene .line-two { animation-delay:.25s; }.motion-scene .line-three { animation-delay:.5s; }
.motion-scene .step-record-check { animation:step-saved 8.3s .8s ease-in-out infinite; }
.motion-scene:not(.scene-visible) * { animation-play-state:paused!important; }
@keyframes step-welcome { 0%,12%,42%,100%{transform:scaleX(1)}24%,32%{transform:scaleX(.25)} }
@keyframes step-affection { 0%,12%,50%,100%{transform:translateY(0) scale(1)}27%{transform:translateY(-3px) scale(1.12)}38%{transform:translateY(0) scale(1)} }
@keyframes step-join { 0%,10%,48%,100%{transform:translateX(0)}22%{transform:translateX(4px)}34%{transform:translateX(-2px)} }
@keyframes step-write { 0%,10%{stroke-dashoffset:20}32%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:20} }
@keyframes step-saved { 0%,12%,50%,100%{transform:scale(1)}27%{transform:scale(1.15)}38%{transform:scale(1)} }
@media(prefers-reduced-motion:reduce){.how-step-icon,.motion-scene *{animation:none!important;transition:none!important}.how-step:hover .how-step-icon{transform:none}}
.roadmap-page { padding-block:70px 85px; }
.roadmap-intro { max-width:720px; margin-bottom:58px; }
.roadmap-eyebrow { display:inline-flex; align-items:center; gap:9px; color:#a13e70; font-size:.9375rem; font-weight:700; }
.roadmap-intro h1 { font-size:clamp(2.5rem,5vw,4rem); line-height:1.12; letter-spacing:-.045em; margin:17px 0 18px; }
.roadmap-intro p { color:#655e6b; font-size:1.125rem; line-height:1.6; margin:0; }
.roadmap-journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:0; padding:0; list-style:none; }
.roadmap-stage { position:relative; min-width:0; scroll-margin-top:115px; --stage-ink:#914370; --stage-fill:#fbebf3; --stage-border:#e4bfd2; }
.roadmap-stage.current { --stage-ink:#216750; --stage-fill:#e9f5ed; --stage-border:#b9dcca; }
.roadmap-stage.later { --stage-ink:#696078; --stage-fill:#f0edf6; --stage-border:#d8d0e3; }
.roadmap-milestone { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-bottom:24px; }
.roadmap-stage:not(:last-child) .roadmap-milestone::after { position:absolute; top:26px; left:70px; width:calc(100% - 44px); border-top:2px dashed #d7c3d0; content:""; }
.roadmap-node { display:grid; place-items:center; width:54px; height:54px; border:2px solid var(--stage-border); background:var(--stage-fill); color:var(--stage-ink); border-radius:50%; box-shadow:0 0 0 6px #fff; }
.roadmap-stage.current .roadmap-node { color:#fff; background:#31765a; border-color:#31765a; }
.roadmap-node .site-icon { width:25px; height:25px; }
.roadmap-phase { color:var(--stage-ink); font-size:.9375rem; font-weight:700; }
.roadmap-stage-card { padding:26px 20px 15px; border:1px solid var(--stage-border); border-radius:24px; background:linear-gradient(180deg,var(--stage-fill),#fff 150px); min-height:310px; box-shadow:0 12px 30px #33203306; }
.roadmap-stage-card h2 { font-size:1.375rem; line-height:1.35; letter-spacing:-.02em; margin:0 0 22px; min-height:60px; }
.roadmap-feature { border-top:1px solid #e8e0e7; }
.roadmap-feature summary { display:flex; align-items:center; gap:10px; min-height:58px; padding:13px 0; cursor:pointer; list-style:none; font-size:1rem; font-weight:700; line-height:1.4; }
.roadmap-feature summary::-webkit-details-marker { display:none; }
.roadmap-feature summary > .site-icon:first-child { color:var(--stage-ink); }
.roadmap-feature summary > .site-icon:last-child { width:16px; height:16px; margin-left:auto; transition:transform .18s; }
.roadmap-feature[open] summary > .site-icon:last-child { transform:rotate(90deg); }
.roadmap-feature summary:hover { color:var(--stage-ink); }
.roadmap-feature p { color:#635c69; font-size:1rem; line-height:1.65; padding:0 0 17px 31px; margin:0; }
.roadmap-outro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:36px; }
.roadmap-outro p { color:#756879; font-size:.875rem; margin:0; }
.roadmap-outro .button { flex:none; font-size:.9375rem; }
.help-contact { display:flex; align-items:center; gap:25px; flex-wrap:wrap; margin-block:28px 40px; }
.help-contact a { display:inline-flex; align-items:center; gap:9px; }
.content-page .help-contact .button { color:#fff; text-decoration:none; }
@media(min-width:851px) and (max-width:1080px) { .desktop-nav { display:none; } .menu-button { display:flex; } .mobile-nav { display:flex; flex-direction:column; padding:16px 32px; gap:8px; } .mobile-nav a { padding:8px; } }
@media(max-width:850px) {
  .roadmap-journey { display:block; }
  .roadmap-stage { display:grid; grid-template-columns:62px minmax(0,1fr); column-gap:20px; padding-bottom:32px; }
  .roadmap-stage::before { content:""; position:absolute; top:58px; bottom:0; left:26px; border-left:2px dashed #d7c3d0; }
  .roadmap-stage:last-child::before { display:none; }
  .roadmap-stage:not(:last-child) .roadmap-milestone::after { display:none; }
  .roadmap-milestone { display:contents; }
  .roadmap-node { grid-column:1; grid-row:1 / span 2; z-index:1; }
  .roadmap-phase { grid-column:2; margin-bottom:12px; min-height:20px; }
  .roadmap-stage-card { grid-column:2; min-height:0; }
  .roadmap-stage-card h2 { min-height:0; }
  .roadmap-outro { align-items:flex-start; flex-direction:column; margin-top:12px; }
}
@media(max-width:600px) {
  .hero-support { justify-content:center; gap:6px 23px; }
  .testing-badge { margin-bottom:18px; }
  .how-section { padding-block:38px; }
  .how-steps { grid-template-columns:1fr; gap:26px; max-width:300px; }
  .how-steps li { flex-direction:row; text-align:left; gap:20px; }
  .how-step-icon { flex:none;width:72px;height:72px;border-radius:25px; }
  .how-step-icon>.step-illustration { width:54px;height:54px; }
  .how-step-icon > .site-icon { width:25px; height:25px; }
  .how-steps li:not(:last-child)::after { left:35px; top:81px; height:14px; width:0; border-top:0; border-left:2px dashed #d9bdcd; }
  .roadmap-page { padding-block:42px 60px; }
  .roadmap-intro { margin-bottom:36px; }
  .roadmap-stage { grid-template-columns:42px minmax(0,1fr); gap:0 12px; }
  .roadmap-node { width:40px; height:40px; }
  .roadmap-node .site-icon { width:20px; height:20px; }
  .roadmap-stage::before { left:19px; top:45px; }
  .roadmap-stage-card { padding:20px 16px 10px; border-radius:20px; }
  .roadmap-stage-card h2 { font-size:1.25rem; }
  .roadmap-feature summary { gap:8px; }
  .roadmap-feature p { padding-left:0; }
}
@media(prefers-reduced-motion:reduce) { .roadmap-feature summary > .site-icon:last-child { transition:none; } }

.how-step-copy p { margin:6px 0 0;font-size:.85rem;line-height:1.5;color:#716571; }