/* =============================================================================
   InvestProp — Roadmap / «نقشه راه» (stepper + spotlight)
   -----------------------------------------------------------------------------
   Used by `site/index/roadmap.blade.php`.

   THE SHAPE LANGUAGE IS THE LOGO'S
   --------------------------------
   The InvestProp mark is a square with its corners cut at 45°, and the wordmark
   repeats that cut on every letterform. So the section is built from that one
   device — `--rm-cut`, a polygon that chamfers the top-start and bottom-end
   corners — and it is used at every size: the rail tiles, the medallion, the
   spotlight panel, the count chip. Circles and soft rounded rectangles were
   what made an earlier cut of this section read as generic; there is not a
   `border-radius: 50%` left in here.

   Because `clip-path` cuts a border off along the diagonals, every chamfered
   surface is TWO layers: an outer that paints the edge and an inner (`__face`)
   inset from it that paints the face. A clipped box also cannot cast a
   `box-shadow`, so the active tile's glow is a `filter: drop-shadow`, which
   follows the clip.

   Palette is the house one — #007BFF with #1C8AFF, #5ED2EC and #3DD68C on the
   #020915 ground, and the CTA is the site's own gradient and glow. Nothing here
   introduces a hue from outside that set.

   Everything is scoped to `.rm-road`, the section's own root — NOT to a page
   body class — so the section can be dropped onto another public page later
   (same rule as bento.css / scorecard.css).

   Layout, in the order it is written
   ---------------------------------
   The STACKED timeline is the base: the rail is hidden and all six panes sit in
   flow as a plain numbered list. The rail/spotlight layout is an enhancement
   applied only under `.rm-road.is-live` (the script is running) at 992px and up.
   So a blocked script, a narrow viewport and a reduced-motion visitor all get
   the same complete, readable list rather than one pane and no way to move.

   Contract with roadmap.js
   ------------------------
     .rm-road.is-live  — the script is running, so the rail may take over.
     .rm-road.is-in    — the section has been scrolled to; the entrance runs.
     .rm-stop.is-active / .is-done  — where the walk has got to.
     .rm-pane.is-active             — the pane in the spotlight.
     --rm-fill on .rm-rail — how much of the line is filled (%), plus
                             --rm-fill-dk / --rm-fill-lt, the active accent in
                             each theme.
   ========================================================================== */

.rm-road {
    /* --- palette (dark = default) ----------------------------------------- */
    --rm-primary: #007BFF;
    --rm-primary-2: #1C8AFF;
    --rm-cyan: #5ED2EC;
    --rm-sky: #8DC4FF;
    --rm-mint: #3DD68C;

    --rm-surface: rgba(7, 19, 35, .72);
    --rm-surface-2: rgba(10, 26, 47, .94);
    --rm-line: rgba(141, 196, 255, .16);
    --rm-line-2: rgba(141, 196, 255, .3);
    --rm-text: #EAF2FF;
    --rm-text-2: #C3D4EA;
    --rm-muted: #8FA5C2;
    --rm-on-accent: #FFFFFF;

    --rm-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --rm-glow: 0 10px 40px -12px rgba(0, 123, 255, .55);
    --rm-shadow: 0 30px 80px -46px rgba(0, 0, 0, .9);

    position: relative;
    margin-top: 96px;
    isolation: isolate;
}

html:not(.dark) .rm-road {
    /* The brand cyan and mint sit at roughly 1.7:1 on white, so the light theme
       runs the same three hues darkened. */
    --rm-sky: #0B63D6;
    --rm-cyan: #0C7C9B;
    --rm-primary-2: #0B63D6;
    --rm-mint: #12885A;

    --rm-surface: #FFFFFF;
    --rm-surface-2: #FFFFFF;
    --rm-line: rgba(0, 72, 153, .14);
    --rm-line-2: rgba(0, 72, 153, .26);
    --rm-text: #0A1A30;
    --rm-text-2: #2B4463;
    --rm-muted: #5D7492;
    --rm-shadow: 0 26px 60px -42px rgba(10, 40, 80, .35);
}

/* =============================================================================
   0. The device
   -----------------------------------------------------------------------------
   One polygon, used at every size. `--ch` is the length of the cut and is set by
   each user; it is physical (top-LEFT and bottom-RIGHT), because the logo does
   not mirror and neither does its silhouette.
   ========================================================================== */

/* The chamfer stays on the section's OWN shapes — the step tiles, the
   medallion and the spotlight panel. It is not a control style: the button and
   the chips below follow the site's button and chip system instead (`.hx-btn`
   in home.css, and the eyebrow shared by bento / pricing / scorecard / atlas). */
.rm-road .rm-tile,
.rm-road .rm-tile__face,
.rm-road .rm-pane {
    clip-path: polygon(
        var(--ch) 0,
        100% 0,
        100% calc(100% - var(--ch)),
        calc(100% - var(--ch)) 100%,
        0 100%,
        0 var(--ch)
    );
}

/* A step's accent is inlined on the element as a pair, one per theme, because
   an inline custom property cannot be overridden from a stylesheet — only read
   from one. `--rm-accent` itself is never set inline, so this always wins. */
.rm-road .rm-stop,
.rm-road .rm-pane { --rm-accent: var(--rm-a-dk); }

html:not(.dark) .rm-road .rm-stop,
html:not(.dark) .rm-road .rm-pane { --rm-accent: var(--rm-a-lt); }

/* --- the tile: the mark's silhouette, at whatever size it is given --------- */
.rm-tile {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    /* The outer layer paints the edge; the face is inset from it. */
    background: var(--rm-edge, var(--rm-line-2));
    transition: background-color .3s, filter .3s;
}

.rm-tile__face {
    position: absolute;
    inset: var(--rm-edge-w, 1.5px);
    background: var(--rm-face, var(--rm-surface-2));
    transition: background-color .3s, opacity .3s;
}

.rm-tile__icon {
    position: relative;
    width: 1em;
    height: 1em;
    color: var(--rm-ink, var(--rm-muted));
    /* `stroke-width` is inherited, which is the only way into a <use> shadow
       tree — a presentation attribute in the sprite would beat anything said
       here, so the sprite deliberately sets none. */
    stroke-width: 1.6;
    transition: color .3s;
}

/* The sprite is a definition, not a picture. */
.rm-road .rm-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Latin numerals inside an RTL run must not reorder. */
.rm-road .rm-pane__count {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

/* One soft wash behind the section. */
.rm-road__glow {
    position: absolute;
    z-index: -1;
    top: 30px;
    inset-inline-start: 50%;
    width: min(1100px, 92%);
    height: 440px;
    translate: -50% 0;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .34;
    background: radial-gradient(circle, rgba(0, 123, 255, .55), rgba(0, 123, 255, 0) 70%);
    pointer-events: none;
}

html:not(.dark) .rm-road__glow { opacity: .16; }

/* =============================================================================
   1. Header
   ========================================================================== */

.rm-head {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.rm-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 14px;
    border: 1px solid var(--rm-line-2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--rm-primary) 10%, transparent);
    color: var(--rm-sky);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.rm-head__title {
    margin: 0;
    color: var(--rm-text);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.45;
}

.rm-head__desc {
    margin: 12px auto 0;
    max-width: 62ch;
    color: var(--rm-text-2);
    font-size: 15px;
    line-height: 2;
}

/* =============================================================================
   2. Base layout — the stacked timeline
   -----------------------------------------------------------------------------
   What mobile gets, and what anyone without the script gets at any width: the
   rail is not shown (its buttons would select nothing) and the six panes are a
   plain list down a single rail line.
   ========================================================================== */

.rm-rail { display: none; }

.rm-panes {
    position: relative;
    display: grid;
    gap: 12px;
}

/* The pane carries its own tile in flow rather than hanging it in a gutter: a
   `clip-path` clips absolutely-positioned descendants too, so a tile parked
   outside the pane's box was cut away entirely and the stacked list came out
   with no marks on it at all. */
.rm-pane {
    --ch: 18px;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 22px 24px;
    background: var(--rm-surface);
    box-shadow: var(--rm-shadow);
}

/* The panel's edge is drawn as an inset ring rather than a border, which a
   clip-path would cut off along the diagonals. */
.rm-pane::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px var(--rm-line);
}

.rm-pane__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.rm-pane__count {
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--rm-accent, #1C8AFF) 18%, transparent);
    color: var(--rm-accent, #1C8AFF);
    font-size: 12px;
    font-weight: 700;
}

.rm-pane__tag {
    padding: 5px 12px;
    border: 1px solid var(--rm-line-2);
    border-radius: 999px;
    color: var(--rm-muted);
    font-size: 11px;
    white-space: nowrap;
}

.rm-pane__title {
    margin: 0 0 8px;
    color: var(--rm-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

.rm-pane__desc {
    margin: 0;
    max-width: 62ch;
    color: var(--rm-text-2);
    font-size: 14px;
    line-height: 2;
}

/* In the stacked list the tile leads the card. */
.rm-pane__tile {
    --ch: 11px;
    --rm-edge: color-mix(in srgb, var(--rm-accent, #1C8AFF) 55%, transparent);
    --rm-ink: var(--rm-accent, #1C8AFF);
    order: -1;
    width: 46px;
    height: 46px;
    font-size: 24px;
}

/* =============================================================================
   3. Foot — the call to action, and the note under it
   ========================================================================== */

.rm-foot {
    margin-top: 34px;
    text-align: center;
}

/* The house CTA: 52px tall, 14px radius, the gradient, the glow and the 1px
   shine along the top-start edge — the same button as `.hx-btn--primary`. */
.rm-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding-inline: 26px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--rm-grad);
    box-shadow: var(--rm-glow);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease;
}

.rm-cta:hover,
.rm-cta:focus-visible {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 16px 46px -12px rgba(0, 123, 255, .75);
}

.rm-cta:active { transform: translateY(0); }

/* The 1px shine along the top-start edge is the house style for the CTA. */
.rm-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(106.61deg, #FFFFFF 2.5%, rgba(255, 255, 255, 0) 18.15%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.rm-cta i {
    font-size: 18px;
    transition: translate .25s cubic-bezier(.22, 1, .36, 1);
}

.rm-cta:hover i { translate: -4px 0; }
html[dir="ltr"] .rm-cta:hover i { translate: 4px 0; }

.rm-note {
    margin: 16px 0 0;
    color: var(--rm-muted);
    font-size: 13px;
}

/* =============================================================================
   4. The stepper layout
   -----------------------------------------------------------------------------
   From 992px up, and only while the script is running: the rail takes over the
   map and the panes collapse into one spotlight.
   ========================================================================== */

@media (min-width: 992px) {

    .rm-road .rm-head__title { font-size: 34px; }

    /* --- the rail --- */
    .rm-road.is-live .rm-rail {
        position: relative;
        display: grid;
        grid-template-columns: repeat(var(--rm-count, 6), 1fr);
        margin-bottom: 46px;
    }

    /* The track and its filled part, both pinned to the tile centres: the first
       and last tiles sit half a column in from the ends, so the line stops there
       rather than running off the edge. */
    .rm-rail__line,
    .rm-rail__fill {
        position: absolute;
        top: 25px;
        height: 2px;
        inset-inline-start: calc(50% / var(--rm-count, 6));
    }

    .rm-rail__line {
        width: calc(100% - 100% / var(--rm-count, 6));
        background: var(--rm-line);
    }

    .rm-rail__fill {
        width: calc((100% - 100% / var(--rm-count, 6)) * var(--rm-fill, 0) / 100);
        /* Both themes' colours are published by the script and chosen here, so a
           theme switch recolours the line without it having to run again. */
        background: var(--rm-fill-dk, var(--rm-primary-2));
        transition: width .55s cubic-bezier(.22, 1, .36, 1), background-color .55s;
    }

    html:not(.dark) .rm-rail__fill { background: var(--rm-fill-lt, var(--rm-primary-2)); }

    /* --- a stop --- */
    .rm-road.is-live .rm-stop {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 0 10px;
        border: 0;
        background: none;
        cursor: pointer;
    }

    .rm-stop__tile {
        --ch: 12px;
        /* 50px clears the 44px touch floor and gives the cut something to cut. */
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .rm-stop__label {
        color: var(--rm-muted);
        font-size: 13px;
        font-weight: 500;
        line-height: 1.7;
        text-align: center;
        transition: color .3s;
        /* Two lines is the whole budget: a stop that needs three is a title that
           belongs in the panel, not on the map. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rm-stop:hover .rm-stop__tile { --rm-edge: var(--rm-accent); }
    .rm-stop:hover .rm-stop__label { color: var(--rm-text-2); }

    .rm-stop:focus-visible {
        outline: 2px solid var(--rm-accent);
        outline-offset: 6px;
    }

    /* Reached already. */
    .rm-stop.is-done .rm-stop__tile {
        --rm-edge: color-mix(in srgb, var(--rm-accent) 55%, transparent);
        --rm-ink: var(--rm-accent);
    }

    .rm-stop.is-done .rm-stop__label { color: var(--rm-text-2); }

    /* Standing on it — the tile fills with the house gradient and carries the
       house glow, the same pairing the site's buttons use. */
    .rm-stop.is-active .rm-stop__tile {
        --rm-edge: var(--rm-accent);
        --rm-ink: var(--rm-on-accent);
        background: var(--rm-grad);
        filter: drop-shadow(3px 4px 16px rgba(0, 123, 255, .55));
    }

    .rm-stop.is-active .rm-tile__face { opacity: 0; }

    .rm-stop.is-active .rm-stop__label {
        color: var(--rm-text);
        font-weight: 700;
    }

    /* --- the spotlight --- */
    .rm-road.is-live .rm-panes {
        display: block;
        padding-inline-start: 0;
        /* The panes are stacked on top of each other, so the box cannot size
           itself from them. */
        min-height: 224px;
    }

    .rm-road.is-live .rm-panes::before { display: none; }

    .rm-road.is-live .rm-pane {
        --ch: 26px;
        position: absolute;
        inset: 0;
        display: grid;
        /* Copy on the leading edge, medallion on the far one: the panel is the
           full width of the rail and needs an anchor at each end. */
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 40px;
        padding: 36px 44px;
        opacity: 0;
        visibility: hidden;
        translate: 0 10px;
        backdrop-filter: blur(30px);
        transition: opacity .4s ease, translate .4s cubic-bezier(.22, 1, .36, 1), visibility .4s;
    }

    .rm-road.is-live .rm-pane.is-active {
        opacity: 1;
        visibility: visible;
        translate: 0 0;
    }

    /* The accent reaches the panel as one bar down its leading edge, stopped
       short of both cut corners. */
    .rm-road.is-live .rm-pane__body::before {
        content: "";
        position: absolute;
        inset-block: 36px;
        inset-inline-start: 0;
        width: 3px;
        background: var(--rm-accent, #1C8AFF);
    }

    .rm-road.is-live .rm-pane__body {
        position: relative;
        padding-inline-start: 26px;
    }

    .rm-road.is-live .rm-pane__tile { order: 0; }

    .rm-road.is-live .rm-pane__title {
        margin-bottom: 12px;
        font-size: 22px;
    }

    .rm-road.is-live .rm-pane__desc { font-size: 15px; }

    /* --- the medallion: the same tile at size, and filled ---
       The panel always shows the step the rail is standing on, so the medallion
       wears the active tile's dress: the house gradient and the house glow. As
       an outline it was a large empty box and gave the panel no focal point. */
    .rm-road.is-live .rm-pane__tile {
        --ch: 26px;
        --rm-ink: #FFFFFF;
        position: relative;
        top: auto;
        inset-inline-start: auto;
        width: 118px;
        height: 118px;
        font-size: 62px;
        background: var(--rm-grad);
        filter: drop-shadow(6px 8px 26px rgba(0, 123, 255, .45));
    }

    .rm-road.is-live .rm-pane__tile .rm-tile__face { opacity: 0; }

    .rm-road.is-live .rm-pane__tile .rm-tile__icon { stroke-width: 1.15; }

    /* Entrance: the stops arrive along the rail. */
    .rm-road.is-live .rm-stop {
        opacity: 0;
        translate: 0 10px;
        transition: opacity .45s ease, translate .45s cubic-bezier(.22, 1, .36, 1);
        transition-delay: calc(var(--rm-i, 0) * 70ms);
    }

    .rm-road.is-live.is-in .rm-stop {
        opacity: 1;
        translate: 0 0;
    }
}

@media (max-width: 991.98px) {
    .rm-road { margin-top: 64px; }
    .rm-head { margin-bottom: 28px; }
}

/* Nothing in the enhanced layout depends on motion to be usable, but the walk
   and the entrance do — roadmap.js does not start the walk for a visitor who
   asked for less of it. */
@media (prefers-reduced-motion: reduce) {
    .rm-road *,
    .rm-road *::before { transition: none !important; }
}