/*
 * Journey Roadmap - ported verbatim from the pmwPlus design mockup
 * (html/index.html, style block lines 147-906).
 * Design tokens (--navy, --copper, --ecru, --sky, --copper-gradient, etc.)
 * are defined globally in assets/pmw-brand.css - not redefined here.
 * The persona-local custom properties (--p-c1, --p-accent, --p-glow-*) are
 * component-local and kept as-is. Selectors are intentionally unscoped.
 */
  /* ============================================================
     INTERACTIVE LIFECYCLE ROADMAP
     ============================================================ */
  .roadmap{
    padding:130px 48px 110px;
    background:var(--navy-deep);
    position:relative;overflow:hidden;
    /* Persona theme - default is Individual & Family (copper).
       .roadmap.persona-business and .persona-retiring override these vars. */
    --p-c1:#cb7f58;   /* light stop */
    --p-c2:#af5a2f;   /* mid stop */
    --p-c3:#a8572d;   /* dark stop */
    --p-accent:#d68e5f;                  /* strong accent (rings, active nums) */
    --p-glow-40:rgba(175,90,47,0.4);
    --p-glow-20:rgba(175,90,47,0.2);
    --p-glow-15:rgba(175,90,47,0.15);
    --p-glow-08:rgba(175,90,47,0.08);
  }
  /* Business Owner - sky/steel blue */
  .roadmap.persona-business{
    --p-c1:#8FA6C0;
    --p-c2:#5B7A9F;
    --p-c3:#3E5A7A;
    --p-accent:#A7B5C6;
    --p-glow-40:rgba(91,122,159,0.5);
    --p-glow-20:rgba(91,122,159,0.28);
    --p-glow-15:rgba(91,122,159,0.2);
    --p-glow-08:rgba(91,122,159,0.12);
  }
  /* Retiring / Retired - brand ecru (Pantone Warm Grey 1C #F1EDE2) */
  .roadmap.persona-retiring{
    --p-c1:#F1EDE2;
    --p-c2:#D9D3C3;
    --p-c3:#BEB7A4;
    --p-accent:#F1EDE2;
    --p-glow-40:rgba(241,237,226,0.45);
    --p-glow-20:rgba(241,237,226,0.25);
    --p-glow-15:rgba(241,237,226,0.18);
    --p-glow-08:rgba(241,237,226,0.1);
    /* On an ecru road, the ecru centre-dash / trail / GPS dot would vanish -
       switch them to navy so they read as ink on paper. */
    --p-dash:#2C3949;
    --p-trail:#2C3949;
    --p-uah:#2C3949;
    /* Ecru badge needs dark text */
    --p-badge-text:#2C3949;
  }
  /* Trail / centre-dash / GPS marker colours - default ecru, overridable */
  .roadmap .road-centre{stroke:var(--p-dash, #F1EDE2)}
  .roadmap .road-trail{stroke:var(--p-trail, #F1EDE2)}
  .roadmap .you-are-here .uah-dot{fill:var(--p-uah, #F1EDE2)}
  .roadmap .you-are-here .uah-ring{stroke:var(--p-uah, #F1EDE2)}
  .roadmap .you-are-here .uah-pulse{fill:var(--p-uah, #F1EDE2)}
  .roadmap::before{
    content:"";position:absolute;width:600px;height:600px;
    background:radial-gradient(circle, rgba(175,90,47,0.08), transparent 65%);
    top:-100px;right:-100px;pointer-events:none;
  }
  .roadmap-head{max-width:880px;margin-bottom:48px;position:relative;z-index:2}
  .roadmap-head h2 .copper-dot{
    background:var(--copper-gradient);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;display:inline-block;
  }
  .roadmap-lead{font-size:17px;color:rgba(241,237,226,0.72);line-height:1.7;margin:8px 0 32px;max-width:780px}

  /* Persona toggle - pill switcher */
  .persona-toggle{
    display:inline-flex;background:rgba(241,237,226,0.05);
    border:1px solid rgba(241,237,226,0.1);
    padding:4px;border-radius:60px;gap:2px;
  }
  .persona-btn{
    background:transparent;color:rgba(241,237,226,0.7);
    border:none;padding:11px 22px;border-radius:60px;
    font-size:13.5px;font-weight:500;letter-spacing:.02em;
    font-family:inherit;cursor:pointer;transition:all .35s;
    display:inline-flex;align-items:center;gap:9px;position:relative;
  }
  /* Every button carries its persona colour as a small leading dot so all
     three are visually distinct even when inactive. */
  .persona-btn::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:var(--btn-dot, #cb7f58);
    box-shadow:0 0 0 3px rgba(31,41,53,0.4);
    transition:box-shadow .25s;
  }
  .persona-btn[data-persona="individual"]{--btn-dot:#cb7f58}
  .persona-btn[data-persona="business"]  {--btn-dot:#5B7A9F}
  .persona-btn[data-persona="retiring"]  {--btn-dot:#F1EDE2}
  .persona-btn:hover{color:var(--ecru)}
  .persona-btn.active{color:var(--ecru)}
  /* Active state - each persona's own gradient */
  .persona-btn[data-persona="individual"].active{
    background:linear-gradient(225deg,#cb7f58 0%,#f3b491 25%,#af5a2f 50%,#f3b390 75%,#a8572d 100%);
    box-shadow:0 4px 12px rgba(175,90,47,0.4);
  }
  .persona-btn[data-persona="business"].active{
    background:linear-gradient(225deg,#8FA6C0 0%,#B4C6DA 25%,#5B7A9F 50%,#A7B5C6 75%,#3E5A7A 100%);
    box-shadow:0 4px 12px rgba(91,122,159,0.45);
  }
  /* Retiring - solid brand ecru with NAVY text (ecru text would vanish) */
  .persona-btn[data-persona="retiring"].active{
    background:linear-gradient(225deg,#F1EDE2 0%,#FBF8F0 25%,#D9D3C3 50%,#F1EDE2 75%,#BEB7A4 100%);
    box-shadow:0 4px 12px rgba(241,237,226,0.25);
    color:var(--navy);
  }
  .persona-btn.active::before{background:#F1EDE2;box-shadow:0 0 0 3px rgba(31,41,53,0.25)}
  .persona-btn[data-persona="retiring"].active::before{background:var(--navy);box-shadow:0 0 0 3px rgba(241,237,226,0.3)}
  .persona-icon{font-size:15px;line-height:1}

  /* Canvas wrapper - NO overflow:hidden here so the popover can extend
     beyond the rounded-rect bounds when a milestone is near the edge. */
  .roadmap-canvas{
    position:relative;margin-bottom:30px;
  }
  /* Inner clipping frame - rounded edges + shadow + overflow-hidden so the
     SVG, map texture and overlay gradient bars stay inside the rounded box. */
  .roadmap-canvas-frame{
    position:relative;
    background:linear-gradient(180deg, rgba(31,41,53,0.4) 0%, rgba(44,57,73,0.2) 100%);
    border:1px solid rgba(241,237,226,0.08);border-radius:18px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,0.3);
  }
  .roadmap-svg{
    display:block;width:100%;height:auto;
    aspect-ratio:1200/520; /* narrower than before (was 1200/700) */
  }
  /* Floating overlays inside the canvas frame */
  .canvas-overlay{
    position:absolute;left:0;right:0;z-index:3;
    pointer-events:none;
  }
  .canvas-overlay > *{pointer-events:auto}
  .canvas-overlay-top{
    top:0;padding:18px 22px;
    display:flex;align-items:center;justify-content:space-between;
    gap:18px;flex-wrap:wrap;
    background:linear-gradient(180deg, rgba(31,41,53,0.85) 0%, rgba(31,41,53,0.5) 60%, rgba(31,41,53,0) 100%);
  }
  .canvas-overlay-bottom{
    bottom:0;padding:14px 22px 18px;margin:0;
    background:linear-gradient(0deg, rgba(31,41,53,0.85) 0%, rgba(31,41,53,0.5) 60%, rgba(31,41,53,0) 100%);
  }
  .road-main{
    stroke-dasharray:1800;
    stroke-dashoffset:1800;
    animation:roadDraw 2.2s ease forwards 0.3s;
  }
  .road-centre{
    stroke-dasharray:10,14;
    animation:roadDashFade 1s ease forwards 2.5s;
    opacity:0;
  }
  @keyframes roadDraw{
    to{stroke-dashoffset:0}
  }
  @keyframes roadDashFade{
    to{opacity:0.45}
  }

  /* Milestone groups */
  .milestone{cursor:pointer;transition:transform .35s ease}
  .milestone:hover{transform:scale(1.08)}
  /* Suppress the browser's default focus box - it covers a much bigger area
     than the milestone because the SVG group's bounding box includes the
     label text. We provide our own focus indicator via .ms-ring-outer. */
  .milestone:focus{outline:none}
  .milestone:focus-visible .ms-ring-outer{
    stroke:var(--ecru);stroke-width:2;
    filter:drop-shadow(0 0 6px rgba(241,237,226,0.5));
  }
  .milestone .ms-ring-outer{
    fill:none;stroke:rgba(241,237,226,0.4);stroke-width:1.5;
    transform-origin:center;
    transition:all .3s;
  }
  .milestone:hover .ms-ring-outer,
  .milestone.active .ms-ring-outer{
    stroke:#F1EDE2;
    stroke-width:2;
  }
  .milestone .ms-pulse{
    fill:none;stroke:var(--p-accent);stroke-width:2;opacity:0;
    transform-origin:center;
  }
  .milestone.active .ms-pulse{
    animation:msPulse 1.8s ease-out infinite;
  }
  @keyframes msPulse{
    0%{transform:scale(1);opacity:0.7}
    100%{transform:scale(2.2);opacity:0}
  }
  .milestone .ms-bg{
    fill:#1f2935;stroke:var(--p-c1);stroke-width:2.5;transition:all .25s;
  }
  .milestone:hover .ms-bg,
  .milestone.active .ms-bg{
    fill:url(#roadGrad);
    stroke:#F1EDE2;
  }
  .milestone .ms-num{
    fill:var(--p-c1);font-family:Poppins,sans-serif;font-size:11px;font-weight:600;
    text-anchor:middle;dominant-baseline:central;transition:fill .25s;
  }
  .milestone:hover .ms-num,
  .milestone.active .ms-num,
  .milestone.visited .ms-num{fill:#F1EDE2}
  /* Visited state (already explored) */
  .milestone.visited:not(.active) .ms-bg{
    fill:var(--p-glow-15);stroke:var(--p-accent);
  }
  .milestone.visited:not(.active) .ms-num,
  .milestone.visited:not(.active) .ms-icon{stroke:var(--p-accent);fill:var(--p-accent)}
  /* Milestone line-icons */
  .milestone .ms-icon{
    fill:none;stroke:var(--p-c1);stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round;
    transition:stroke .25s;
    pointer-events:none;
  }
  .milestone:hover .ms-icon,
  .milestone.active .ms-icon{stroke:#F1EDE2}
  /* "You are here" dot - GPS pin that moves along the road */
  .you-are-here{
    pointer-events:none;
    transition:transform 1s cubic-bezier(.4,0,.2,1);
    opacity:0;
  }
  .you-are-here.show{opacity:1}
  .you-are-here .uah-pulse{
    fill:#F1EDE2;opacity:0.35;
    animation:uahPulse 1.6s ease-out infinite;transform-origin:center;
  }
  .you-are-here .uah-dot{
    fill:#F1EDE2;
  }
  .you-are-here .uah-ring{
    fill:none;stroke:#F1EDE2;stroke-width:2;
  }
  @keyframes uahPulse{
    0%{transform:scale(0.6);opacity:0.5}
    100%{transform:scale(2.4);opacity:0}
  }
  .milestone .ms-label{
    fill:rgba(241,237,226,0.75);font-family:Poppins,sans-serif;font-size:11.5px;
    font-weight:500;letter-spacing:0.01em;text-anchor:middle;
    transition:fill .25s;
  }
  .milestone:hover .ms-label,
  .milestone.active .ms-label{fill:#F1EDE2}

  /* Milestone entrance animation. Stagger is set per-milestone in JS via
     element.style.animationDelay so it survives outer-wrapper nesting. */
  .milestone{opacity:0;animation:msIn 0.5s ease forwards}
  /* Animate opacity ONLY - never CSS-transform here. Each milestone <g> has an
     inline SVG transform="translate(x,y)" that CSS transform would override,
     stacking every milestone at (0,0). */
  @keyframes msIn{
    from{opacity:0}
    to{opacity:1}
  }

  /* Tooltip on hover */
  .roadmap-tooltip{
    position:absolute;background:var(--navy);
    border:1px solid rgba(241,237,226,0.15);border-radius:8px;
    padding:10px 14px;pointer-events:none;
    box-shadow:0 12px 30px rgba(0,0,0,0.5);
    max-width:240px;z-index:5;
    transform:translate(-50%, -100%);margin-top:-12px;
  }
  .roadmap-tooltip strong{display:block;font-size:13.5px;font-weight:500;color:var(--ecru);letter-spacing:-0.01em;margin-bottom:2px}
  .roadmap-tooltip span{display:block;font-size:12px;color:rgba(241,237,226,0.65);line-height:1.45}
  .roadmap-tooltip::after{
    content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:6px solid transparent;border-top-color:var(--navy);
  }

  /* Floating popover anchored to a clicked milestone. Lives inside
     .roadmap-canvas so its absolute positioning is relative to the canvas.
     Border + halo use the active persona colour so the whole card matches. */
  .rmd-pop{
    position:absolute;z-index:5;
    width:320px;max-width:calc(100% - 24px);
    background:rgba(31,41,53,0.96);backdrop-filter:blur(12px);
    border:1px solid var(--p-glow-40);border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 0 4px var(--p-glow-08);
    padding:18px 20px 16px;
    opacity:0;transform:translateY(6px) scale(0.97);
    transition:opacity .25s ease, transform .25s ease;
    pointer-events:none;
  }
  .rmd-pop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  /* Pointer arrow back to the milestone - rendered as a rotated square. */
  .rmd-pop::before{
    content:"";position:absolute;width:14px;height:14px;
    background:rgba(31,41,53,0.96);border:1px solid var(--p-glow-40);
    transform:rotate(45deg);
  }
  /* Arrow horizontal position uses --arrow-x (set in JS) so it points at the
     milestone even when the popover is clamped against a canvas edge. */
  .rmd-pop[data-arrow="bottom"]::before{
    bottom:-8px;left:var(--arrow-x, 50%);margin-left:-7px;
    border-top:none;border-left:none;
  }
  .rmd-pop[data-arrow="top"]::before{
    top:-8px;left:var(--arrow-x, 50%);margin-left:-7px;
    border-bottom:none;border-right:none;
  }
  .rmd-pop[data-arrow="left"]::before{
    left:-8px;top:50%;margin-top:-7px;border-top:none;border-right:none;
  }
  .rmd-pop[data-arrow="right"]::before{
    right:-8px;top:50%;margin-top:-7px;border-bottom:none;border-left:none;
  }
  .rmd-pop-close{
    position:absolute;top:10px;right:10px;
    width:28px;height:28px;border-radius:50%;
    background:rgba(241,237,226,0.06);color:rgba(241,237,226,0.6);
    border:none;font-size:16px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:all .2s;
  }
  .rmd-pop-close:hover{background:var(--p-glow-20);color:var(--ecru)}
  .rmd-pop-badge{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(225deg,var(--p-c1) 0%,var(--p-c1) 25%,var(--p-c2) 50%,var(--p-c1) 75%,var(--p-c3) 100%);
    color:var(--p-badge-text, var(--ecru));
    padding:5px 12px 5px 5px;border-radius:30px;font-size:11px;letter-spacing:.04em;
    font-weight:500;margin-bottom:12px;
  }
  .rmd-pop-badge .pn{
    width:20px;height:20px;border-radius:50%;background:rgba(31,41,53,0.4);
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:10.5px;
    color:var(--ecru); /* chip bg is always dark - keep number ecru even on ecru badge */
  }
  .rmd-pop h4{
    font-size:17px;font-weight:600;color:var(--ecru);
    line-height:1.2;letter-spacing:-0.01em;margin:0 0 6px;padding-right:30px;
  }
  .rmd-pop-summary{
    font-size:12.5px;color:rgba(241,237,226,0.7);line-height:1.5;margin:0 0 10px;
  }
  .rmd-pop-services{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
  .rmd-pop-svc{
    display:inline-flex;align-items:center;gap:5px;
    padding:4px 9px;border-radius:30px;
    background:rgba(241,237,226,0.05);border:1px solid rgba(241,237,226,0.1);
    color:var(--ecru);font-size:11px;text-decoration:none;
    transition:all .2s;
  }
  .rmd-pop-svc:hover{
    background:rgba(175,90,47,0.15);border-color:var(--copper-light);color:var(--copper-light);
  }
  .rmd-pop-why{
    font-size:11px;line-height:1.5;color:rgba(241,237,226,0.6);
    padding:8px 10px;background:rgba(167,181,198,0.05);
    border-left:2px solid var(--sky);border-radius:0 6px 6px 0;margin-bottom:10px;
  }
  .rmd-pop-why b{color:var(--sky);font-weight:500;letter-spacing:.1em;
    text-transform:uppercase;font-size:9.5px;display:block;margin-bottom:2px}
  .rmd-pop-cta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
  .rmd-pop-cta .btn-pri{
    background:var(--copper-gradient);color:var(--ecru);text-decoration:none;
    padding:9px 16px;border-radius:30px;font-size:12.5px;font-weight:500;
    letter-spacing:.03em;flex:1;text-align:center;min-width:120px;
    transition:transform .2s;
  }
  .rmd-pop-cta .btn-pri:hover{transform:translateY(-1px)}
  .rmd-pop-cta .btn-next{
    background:transparent;color:rgba(241,237,226,0.7);text-decoration:none;
    padding:8px 12px;font-size:12px;letter-spacing:.02em;
    border:1px solid rgba(241,237,226,0.18);border-radius:30px;
    transition:all .2s;
  }
  .rmd-pop-cta .btn-next:hover{border-color:var(--copper-light);color:var(--copper-light)}

  /* Click-anywhere-else closer overlay */
  .rmd-pop-shield{
    position:absolute;inset:0;z-index:4;
    background:transparent;pointer-events:none;
  }
  .rmd-pop-shield.show{pointer-events:auto}

  /* Detail panel below map */
  .roadmap-detail{
    background:var(--navy);
    border:1px solid rgba(241,237,226,0.08);border-radius:14px;
    min-height:240px;overflow:hidden;
    transition:border-color .4s ease, box-shadow .4s ease;
    scroll-margin-top:120px; /* keep nav from covering the panel on scrollIntoView */
  }
  /* Brief glow when a new stage loads into the panel - draws the eye down */
  .roadmap-detail.flash{
    border-color:rgba(175,90,47,0.6);
    box-shadow:0 0 0 4px rgba(175,90,47,0.15), 0 24px 60px rgba(0,0,0,0.3);
  }
  /* Hint chip just under the canvas, only shown until first click */
  .rmd-hint{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin:-12px 0 22px;font-size:13px;color:rgba(241,237,226,0.55);
    letter-spacing:.04em;
  }
  .rmd-hint .rmd-hint-arrow{
    display:inline-block;width:18px;height:18px;border-radius:50%;
    background:rgba(175,90,47,0.18);color:var(--copper-light);
    display:inline-flex;align-items:center;justify-content:center;font-size:13px;
    animation:rmdHintBounce 1.6s ease-in-out infinite;
  }
  @keyframes rmdHintBounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(3px)}
  }
  .rmd-hint.hidden{display:none}
  .roadmap-detail-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;padding:60px 24px;text-align:center;color:rgba(241,237,226,0.5);min-height:240px;
  }
  .roadmap-detail-empty span{
    display:flex;width:54px;height:54px;border-radius:50%;
    background:rgba(241,237,226,0.06);color:var(--copper-light);
    align-items:center;justify-content:center;font-size:22px;
  }
  .roadmap-detail-empty p{font-size:14.5px;max-width:380px;margin:0}

  .rmd-inner{padding:44px 48px;animation:rmdFade .4s ease}
  @keyframes rmdFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .rmd-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
  .rmd-stage-badge{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--copper-gradient);color:var(--ecru);
    padding:6px 14px 6px 6px;border-radius:30px;font-size:12px;letter-spacing:.04em;
    font-weight:500;margin-bottom:18px;
  }
  .rmd-stage-badge .stage-num{
    width:24px;height:24px;border-radius:50%;background:rgba(31,41,53,0.4);
    display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11.5px;
  }
  .roadmap-detail h3{
    font-size:clamp(26px,3vw,38px);font-weight:600;color:var(--ecru);
    letter-spacing:-0.025em;line-height:1.1;margin:0 0 14px;
  }
  .roadmap-detail h3 em{font-style:normal;color:var(--sky);font-weight:300}
  .rmd-summary{font-size:16px;color:rgba(241,237,226,0.72);line-height:1.7;margin:0 0 22px}

  .rmd-services h6{
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--copper-light);font-weight:500;margin:14px 0 14px;
  }
  .rmd-service-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
  .rmd-service-link{
    display:flex;align-items:center;justify-content:flex-start;gap:12px;
    padding:12px 16px;background:rgba(241,237,226,0.04);
    border:1px solid rgba(241,237,226,0.08);border-radius:8px;
    color:var(--ecru);text-decoration:none;font-size:13.5px;font-weight:500;
    transition:all .25s;
  }
  .rmd-service-link:hover{background:rgba(241,237,226,0.07);border-color:var(--copper-light);transform:translateX(3px);color:var(--copper-light)}
  .rmd-service-link .rsl-name{flex:1}
  .rmd-service-link::after{content:"\2192";font-size:13px;opacity:0.5;margin-left:6px}
  .rmd-service-link:hover::after{opacity:1}
  /* Cluster colour dots */
  .cluster-dot{
    display:inline-block;width:10px;height:10px;border-radius:50%;
    flex-shrink:0;box-shadow:0 0 0 2px rgba(31,41,53,0.6);
  }
  .cluster-dot.cluster-fp{background:#cb7f58}     /* Financial Planning - copper */
  .cluster-dot.cluster-at{background:#f3b390}     /* Accounting & Tax - light copper */
  .cluster-dot.cluster-bs{background:#a7b5c6}     /* Business Strategy - sky */
  .cluster-dot.cluster-bk{background:#8794a4}     /* Bookkeeping & Automation - smoke-light */
  /* Cluster legend below services */
  .rmd-cluster-legend{
    margin:14px 0 24px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
    font-size:11.5px;color:rgba(241,237,226,0.55);
  }
  .rmd-cluster-legend .lg-label{letter-spacing:.16em;text-transform:uppercase;margin-right:6px}
  .rmd-cluster-pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 11px;border-radius:30px;
    background:rgba(241,237,226,0.04);border:1px solid rgba(241,237,226,0.08);
    color:var(--ecru);font-size:11.5px;letter-spacing:.01em;
  }

  /* Why these services panel */
  .rmd-why{
    margin:20px 0 0;padding:18px 22px;
    background:rgba(167,181,198,0.05);
    border-left:3px solid var(--sky);
    border-radius:0 8px 8px 0;
  }
  .rmd-why h6{
    font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--sky);font-weight:500;margin:0 0 10px;
  }
  .rmd-why p{
    font-size:14px;color:rgba(241,237,226,0.78);line-height:1.65;margin:0;
  }

  .rmd-cta{display:flex;gap:12px;flex-wrap:wrap}
  .rmd-cta .btn{
    background:var(--copper-gradient);color:var(--ecru);
    padding:13px 22px;border-radius:30px;font-size:13.5px;font-weight:500;
    letter-spacing:.04em;text-decoration:none;
    box-shadow:0 4px 12px rgba(175,90,47,0.3);transition:all .25s;
    display:inline-flex;align-items:center;gap:8px;
  }
  .rmd-cta .btn:hover{background:var(--copper-gradient-bright);transform:translateY(-2px)}
  .rmd-cta .btn-ghost{background:transparent;color:var(--ecru);border:1px solid rgba(241,237,226,0.25);box-shadow:none}
  .rmd-cta .btn-ghost:hover{border-color:var(--ecru);background:rgba(241,237,226,0.05);transform:none}

  .rmd-aside{
    background:var(--navy-deep);border-radius:12px;padding:26px;
    border-left:3px solid transparent;border-image:var(--copper-gradient) 1;
  }
  .rmd-aside-eyebrow{
    font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--copper-light);font-weight:500;display:block;margin-bottom:12px;
  }
  .rmd-aside p.aside-quote{
    font-size:15px;color:var(--ecru);line-height:1.6;font-style:italic;margin:0 0 16px;
  }
  .rmd-aside-advisor{
    display:flex;align-items:center;gap:14px;padding-top:14px;
    border-top:1px solid rgba(241,237,226,0.08);text-decoration:none;
  }
  .rmd-aside-photo{
    width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--navy-deep);flex-shrink:0;
  }
  .rmd-aside-photo img{width:100%;height:100%;object-fit:cover}
  .rmd-aside-name{display:block;font-size:14.5px;font-weight:500;color:var(--ecru);letter-spacing:-0.01em;line-height:1.2;margin-bottom:2px}
  .rmd-aside-role{font-size:11.5px;color:rgba(241,237,226,0.6);letter-spacing:.04em}

  /* Travelled trail - reveals as visited */
  .road-trail{
    transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1), opacity .4s ease;
    filter:drop-shadow(0 0 8px rgba(241,237,226,0.4));
  }

  /* Progress chip - shows X / 8 stages explored. Now lives inside the canvas
     overlay bar (top-right), so no outer margin. */
  .roadmap-controls{
    display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  }
  .controls-right{display:inline-flex;gap:12px;align-items:center;flex-wrap:wrap}
  .reset-btn{
    background:transparent;color:rgba(241,237,226,0.6);
    border:1px solid rgba(241,237,226,0.15);
    padding:10px 18px;border-radius:60px;
    font-size:13px;font-weight:500;letter-spacing:.04em;
    font-family:inherit;cursor:pointer;transition:all .25s;
    display:inline-flex;align-items:center;gap:8px;
  }
  .reset-btn:hover{border-color:var(--ecru);color:var(--ecru)}
  .reset-btn[disabled]{opacity:0.35;cursor:not-allowed}
  .reset-btn[disabled]:hover{border-color:rgba(241,237,226,0.15);color:rgba(241,237,226,0.6)}
  .reset-btn span{font-size:15px;line-height:1}

  /* Progress narrative - now floats at the bottom of the canvas */
  .progress-narrative{
    font-size:13.5px;color:rgba(241,237,226,0.7);line-height:1.5;
    letter-spacing:0.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    justify-content:center;
  }
  .progress-narrative::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--copper-gradient);
    box-shadow:0 0 0 3px rgba(175,90,47,0.15);
  }
  .progress-narrative strong{color:var(--ecru);font-weight:500}
  .progress-narrative em{font-style:normal;color:var(--copper-light)}
  .progress-chip{
    display:inline-flex;align-items:center;gap:14px;
    padding:10px 18px 10px 14px;
    background:rgba(241,237,226,0.04);
    border:1px solid rgba(241,237,226,0.1);
    border-radius:60px;
  }
  .progress-chip .pc-count{
    font-size:13px;color:var(--ecru);font-weight:500;letter-spacing:0.01em;
  }
  .progress-chip .pc-count strong{color:var(--p-accent);font-weight:600;font-size:14px}
  .progress-chip .pc-bar{
    width:120px;height:5px;background:rgba(241,237,226,0.1);
    border-radius:30px;overflow:hidden;
  }
  .progress-chip .pc-fill{
    display:block;height:100%;width:0;
    background:linear-gradient(225deg,var(--p-c1) 0%,var(--p-c1) 25%,var(--p-c2) 50%,var(--p-c1) 75%,var(--p-c3) 100%);
    border-radius:30px;
    transition:width .5s ease, background .4s ease;
  }
  .plan-toggle{
    background:transparent;color:var(--copper-light);
    border:1px solid rgba(214,142,95,0.4);
    padding:10px 20px;border-radius:60px;
    font-size:13px;font-weight:500;letter-spacing:.04em;
    font-family:inherit;cursor:pointer;transition:all .25s;
    display:inline-flex;align-items:center;gap:8px;
  }
  .plan-toggle:hover{border-color:var(--copper-light);color:var(--ecru);background:rgba(175,90,47,0.1)}
  .plan-toggle[disabled]{opacity:0.4;cursor:not-allowed}
  .plan-toggle .pt-count{
    background:var(--copper-gradient);color:var(--ecru);
    padding:2px 8px;border-radius:30px;font-size:11px;font-weight:600;
    min-width:20px;text-align:center;
  }

  /* Plan summary slide-out panel */
  .plan-summary{
    position:fixed;top:0;right:0;bottom:0;width:min(440px, 100vw);
    background:var(--navy-deep);border-left:1px solid rgba(241,237,226,0.1);
    box-shadow:-12px 0 40px rgba(0,0,0,0.5);
    z-index:200;transform:translateX(100%);visibility:hidden;
    /* visibility flips after the slide-out ends so the panel can't flash or
       slide on initial page load (it is off-canvas until .open is set). */
    transition:transform .4s cubic-bezier(.4,0,.2,1),visibility 0s .4s;
    display:flex;flex-direction:column;overflow:hidden;
  }
  .plan-summary.open{transform:translateX(0);visibility:visible;transition:transform .4s cubic-bezier(.4,0,.2,1),visibility 0s 0s}
  .plan-summary-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.5);
    z-index:199;opacity:0;visibility:hidden;
    transition:opacity .3s, visibility .3s;
  }
  .plan-summary-overlay.show{opacity:1;visibility:visible}
  .plan-header{
    padding:28px 30px 24px;border-bottom:1px solid rgba(241,237,226,0.08);
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  }
  .plan-header span.eyebrow-mini{
    font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--copper-light);font-weight:500;display:block;margin-bottom:6px;
  }
  .plan-header h3{
    font-size:22px;font-weight:600;color:var(--ecru);letter-spacing:-0.015em;margin:0 0 4px;line-height:1.2;
  }
  .plan-header p{font-size:13px;color:rgba(241,237,226,0.6);margin:0;line-height:1.5}
  .plan-close{
    background:transparent;color:rgba(241,237,226,0.7);border:1px solid rgba(241,237,226,0.15);
    width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;
    display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;
  }
  .plan-close:hover{border-color:var(--copper-light);color:var(--copper-light)}
  .plan-body{flex:1;overflow-y:auto;padding:24px 30px 30px}
  .plan-item{
    padding:18px 0;border-bottom:1px solid rgba(241,237,226,0.06);
  }
  .plan-item:last-child{border-bottom:none}
  .plan-item-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:24px;height:24px;border-radius:50%;background:var(--copper-gradient);color:var(--ecru);
    font-size:11px;font-weight:600;margin-right:10px;vertical-align:middle;
  }
  .plan-item h5{
    display:inline;font-size:15px;font-weight:500;color:var(--ecru);letter-spacing:-0.01em;margin:0;
  }
  .plan-item p{font-size:13px;color:rgba(241,237,226,0.65);line-height:1.55;margin:8px 0 10px;padding-left:34px}
  .plan-item ul{
    list-style:none;padding:0 0 0 34px;margin:0;
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .plan-item ul li{
    font-size:11.5px;color:var(--ecru);background:rgba(241,237,226,0.04);
    border:1px solid rgba(241,237,226,0.1);border-radius:20px;padding:4px 11px;letter-spacing:.01em;
  }
  .plan-share{
    padding:14px 30px;display:flex;gap:8px;
    border-top:1px solid rgba(241,237,226,0.06);
    background:rgba(31,41,53,0.5);
  }
  .share-btn{
    flex:1;background:transparent;color:rgba(241,237,226,0.75);
    border:1px solid rgba(241,237,226,0.12);
    padding:10px 14px;border-radius:30px;
    font-size:12px;font-weight:500;letter-spacing:.04em;
    font-family:inherit;cursor:pointer;transition:all .25s;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
  }
  .share-btn:hover{border-color:var(--copper-light);color:var(--copper-light)}
  .share-btn.copied{
    background:rgba(175,90,47,0.15);border-color:var(--copper-light);color:var(--ecru);
  }
  .share-btn span:first-child{font-size:14px;line-height:1}

  .plan-footer{
    padding:20px 30px;border-top:1px solid rgba(241,237,226,0.08);
    background:var(--navy);
    display:flex;gap:10px;
  }

  /* Suggested next - appears in detail panel after a stage is opened */
  .rmd-next{
    margin-top:24px;padding:18px 22px;
    background:rgba(241,237,226,0.04);
    border:1px dashed rgba(214,142,95,0.4);
    border-radius:10px;
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  }
  .rmd-next-text{font-size:13.5px;color:rgba(241,237,226,0.78);line-height:1.5}
  .rmd-next-text strong{color:var(--ecru);font-weight:500;letter-spacing:-0.01em}
  .rmd-next-text .rmd-next-label{
    display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--copper-light);font-weight:500;margin-bottom:4px;
  }
  .rmd-next-btn{
    background:var(--copper-gradient);color:var(--ecru);border:none;
    padding:10px 18px;border-radius:30px;font-size:12.5px;font-weight:500;
    letter-spacing:.04em;cursor:pointer;font-family:inherit;
    box-shadow:0 4px 10px rgba(175,90,47,0.3);transition:all .25s;
    display:inline-flex;align-items:center;gap:8px;
  }
  .rmd-next-btn:hover{background:var(--copper-gradient-bright);transform:translateY(-1px)}

  /* Print styles - clean A4 layout when printing the plan summary */
  @media print{
    body > *{display:none !important}
    .plan-summary{
      display:flex !important;position:static !important;
      transform:none !important;width:100% !important;
      box-shadow:none !important;border:none !important;
      background:#fff !important;color:#1f2935 !important;
    }
    .plan-summary-overlay,.plan-share,.plan-footer,.plan-close{display:none !important}
    .plan-header{border-color:#ddd !important}
    .plan-header span.eyebrow-mini{color:var(--copper-light) !important}
    .plan-header h3,.plan-header p,
    .plan-item h5,.plan-item p{color:#1f2935 !important}
    .plan-body{padding:24px 30px !important;overflow:visible !important}
    .plan-item{border-color:#ddd !important;page-break-inside:avoid}
    .plan-item ul li{background:#f5f1e8 !important;color:#1f2935 !important;border-color:#ddd !important}
    .plan-item-num{background:#AF5A2F !important;color:#fff !important}
  }
  .plan-footer .btn{
    flex:1;background:var(--copper-gradient);color:var(--ecru);
    padding:12px 16px;border-radius:30px;font-size:13px;font-weight:500;
    letter-spacing:.04em;text-decoration:none;
    display:flex;align-items:center;justify-content:center;gap:8px;
    box-shadow:0 4px 12px rgba(175,90,47,0.3);transition:all .25s;
  }
  .plan-footer .btn:hover{background:var(--copper-gradient-bright)}
  .plan-footer .btn-ghost{background:transparent;color:var(--ecru);border:1px solid rgba(241,237,226,0.2);box-shadow:none}
  .plan-footer .btn-ghost:hover{border-color:var(--copper-light);color:var(--copper-light)}
  /* Desktop - give the primary "Start a Conversation" button more presence */
  @media (min-width:768px){
    .plan-footer .btn:not(.btn-ghost){
      flex:1.8;padding:16px 24px;font-size:14.5px;
    }
    .plan-footer .btn-ghost{flex:1}
  }

  @media (max-width:1024px){
    .roadmap{padding:80px 24px}
    .rmd-inner{padding:32px 28px}
    .rmd-grid{grid-template-columns:1fr;gap:24px}
    .rmd-service-list{grid-template-columns:1fr}
    .persona-btn{padding:10px 14px;font-size:13px}
    .persona-btn span:not(.persona-icon){display:none}
    .persona-btn .persona-icon{font-size:18px}
    .progress-chip .pc-bar{width:80px}
    .roadmap-controls{justify-content:flex-start}
    .plan-summary{width:100vw}
  }