/* ==========================================================================
   UmrahCore — showcase.css
   Animated product storytelling (src/showcase.php). Loaded only on pages
   that call use_showcase(). Built on main.css tokens; logical properties
   throughout so ar/ur RTL flips without overrides. Motion is transform /
   opacity only (compositor-friendly) and is switched off by the global
   prefers-reduced-motion block in main.css plus the explicit one below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Shared
   -------------------------------------------------------------------------- */
.sc { position: relative; }
.sc ol, .sc ul { list-style: none; margin: 0; padding: 0; }
.sc button { font: inherit; }

.sc--dark {
    overflow: clip;
    color: rgba(248, 243, 230, .86);
    background:
        radial-gradient(70rem 36rem at 88% -10%, rgba(168, 122, 38, .2), transparent 60%),
        radial-gradient(60rem 40rem at -10% 110%, rgba(12, 96, 73, .5), transparent 60%),
        linear-gradient(170deg, var(--primary-deep), var(--primary) 70%);
}
.sc--dark .heading { color: var(--paper); }
.sc--dark .heading em { color: var(--gold-soft); }
.sc--dark .eyebrow { color: var(--gold-soft); }
.sc--dark .eyebrow::before, .sc--dark .eyebrow::after { background: var(--gold-soft); }
.sc--dark .lede { color: rgba(248, 243, 230, .78); }
.sc--dark a { color: var(--gold-soft); }

.sc-flow__pattern {
    position: absolute; inset: 0; opacity: .05; pointer-events: none;
    mask-image: radial-gradient(100% 80% at 50% 0%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(100% 80% at 50% 0%, #000 20%, transparent 80%);
}
.sc-flow__inner { position: relative; }

.sc-label {
    font: 600 .68rem/1 var(--font-body);
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 .9rem;
}

/* Tone helpers (icon wells, dots) mirroring chip colours */
.sc-tone--primary { --tone: var(--primary); --tone-soft: var(--primary-soft); }
.sc-tone--gold    { --tone: var(--gold);    --tone-soft: var(--gold-soft); }
.sc-tone--violet  { --tone: var(--violet);  --tone-soft: var(--violet-soft); }
.sc-tone--teal    { --tone: var(--teal);    --tone-soft: var(--teal-soft); }
.sc-tone--info    { --tone: var(--info);    --tone-soft: var(--info-soft); }
.sc-tone--danger  { --tone: var(--danger);  --tone-soft: var(--danger-soft); }

/* Pause / play control */
.sc-toggle {
    place-items: center;
    width: 34px; height: 34px; padding: 0; flex: none;
    border-radius: 50%;
    border: var(--border-strong);
    background: var(--surface);
    color: var(--ink-3);
    cursor: pointer;
    transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.sc-toggle:hover { color: var(--primary); transform: scale(1.06); }
.sc-toggle__play { display: none; }
.sc-toggle[aria-pressed="true"] .sc-toggle__play { display: inline; }
.sc-toggle[aria-pressed="true"] .sc-toggle__pause { display: none; }
.sc-toggle--corner { position: absolute; inset-block-start: .8rem; inset-inline-end: .8rem; z-index: 3; }
.sc-toggle--light { background: rgba(248, 243, 230, .1); border-color: rgba(248, 243, 230, .22); color: var(--paper); }
.sc-toggle--light:hover { color: var(--gold-soft); }
.sc-toggle, .sc-replay { display: none; }
.js-sc .sc-toggle { display: inline-grid; }
.js-sc .sc-replay:not([hidden]) { display: inline-flex; }

/* --------------------------------------------------------------------------
   0b. Hero live preview — pipeline rail (.hero-flow) driving the card
   Desktop: vertical rail at inline-start, a wire runs from the active step
   into the card. ≤1100px: rail turns horizontal above the card.
   -------------------------------------------------------------------------- */
.hero-stage {
    --rail-w: 168px;
    --rail-gap: 22px;
    position: relative;
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--rail-gap);
    width: 100%;
}
.hero-stage__card {
    position: relative; z-index: 2;
    flex: 0 1 330px; min-width: 0;
    display: grid; place-items: center;
}
.hero-stage__card .hero-geo { inset: -70px; z-index: -1; }
.hero-stage__card .hero-geo__stack { width: min(430px, 100%); }
.hero-stage__card .hero-card { width: 100%; transition: box-shadow .5s var(--ease); }
.hero-card.is-ping { box-shadow: var(--shadow-lg), 0 0 0 3px rgba(240, 226, 191, .55); }

/* Rows the current step touches light up */
.hero-card__row { transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.hero-card__row.is-hot { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
[dir="rtl"] .hero-card__row.is-hot { box-shadow: inset -3px 0 0 var(--primary); }

/* Rail */
.hero-flow {
    position: relative; z-index: 1;
    flex: 0 0 var(--rail-w); min-width: 0;
    color: rgba(248, 243, 230, .62);
}
.hero-flow__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-block-end: .8rem; }
.hero-flow__label { margin: 0; font-size: .74rem; line-height: 1.35; font-weight: 600; color: var(--gold-soft); }
.hero-flow .sc-toggle { width: 28px; height: 28px; margin-block-start: -3px; }
.hero-flow .sc-toggle .icon { width: 13px; height: 13px; }

.hero-flow__body { position: relative; }
.hero-flow__rail { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.hero-flow__track {
    position: absolute;
    inset-inline-start: 14px; inset-block: 22px; width: 2px; margin-inline-start: -1px;
    background: rgba(248, 243, 230, .14); border-radius: 2px;
}
.hero-flow__fill {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--gold-soft), rgba(240, 226, 191, .55));
    border-radius: inherit;
    transform-origin: 50% 0;
    transform: scaleY(var(--p, 0));
    transition: transform .7s var(--ease);
}

.hero-flow__step {
    position: relative;
    display: flex; align-items: center; gap: .6rem;
    min-height: 44px;
    font-size: .8rem; line-height: 1.25;
    transition: color .4s var(--ease);
}
.hero-flow__dot {
    position: relative; z-index: 1; flex: none;
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: #0b4a39;
    border: 1px solid rgba(248, 243, 230, .24);
    color: rgba(248, 243, 230, .55);
    transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.hero-flow__name { flex: 0 1 auto; min-width: 0; }

.hero-flow__step.is-done { color: rgba(248, 243, 230, .86); }
.hero-flow__step.is-done .hero-flow__dot { background: #145a46; border-color: rgba(240, 226, 191, .6); color: var(--gold-soft); }
.hero-flow__step.is-active { color: var(--paper); font-weight: 600; }
.hero-flow__step.is-active .hero-flow__dot {
    background: var(--surface); border-color: var(--surface); color: var(--tone, var(--primary));
    transform: scale(1.1);
}
/* Ping ring — compositor-only (transform/opacity). ::before is the expanding
   ring, ::after repaints the dot's own fill + border above it so the ring
   only ever shows outside the dot, exactly like the old box-shadow halo. */
.hero-flow__step.is-active .hero-flow__dot::before,
.hero-flow__step.is-active .hero-flow__dot::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    z-index: -1; pointer-events: none;
}
.hero-flow__step.is-active .hero-flow__dot::before {
    background: rgba(240, 226, 191, .5);
    animation: hfPing 1.8s var(--ease) infinite;
}
.hero-flow__step.is-active .hero-flow__dot::after { background: inherit; border: inherit; }
.hero-flow__step.sc-tone--gold.is-active .hero-flow__dot,
.hero-flow.is-complete .hero-flow__step:last-child .hero-flow__dot {
    background: var(--gold-bright); border-color: var(--gold-bright); color: var(--surface);
}
@keyframes hfPing {               /* 28px dot → +9px halo: 46/28 */
    0%        { transform: scale(1);    opacity: 1; }
    70%, 100% { transform: scale(1.64); opacity: 0; }
}

/* The wire: grows from the active step's label into the card, a packet rides it */
.hero-flow__lead {
    position: relative; flex: 1 1 auto; align-self: center;
    min-width: 10px; height: 2px;
    margin-inline-end: calc(-1 * var(--rail-gap) - 26px);
    background: repeating-linear-gradient(90deg, rgba(240, 226, 191, .7) 0 5px, transparent 5px 9px);
    transform: scaleX(0); transform-origin: left center;
    opacity: 0;
    overflow-x: clip;
    transition: transform .5s var(--ease), opacity .3s var(--ease);
}
[dir="rtl"] .hero-flow__lead { transform-origin: right center; }
/* The packet is drawn as a glowing dot at the leading edge of a full-width
   strip; the strip slides with translateX (compositor) instead of animating
   inset-inline-start (layout on every frame). */
.hero-flow__lead::after {
    content: ""; position: absolute; inset-block-start: -11px; inset-inline-start: 0;
    width: 100%; height: 24px;
    background: radial-gradient(circle at 4px 50%, var(--gold-soft) 0 3.6px, rgba(240, 226, 191, .55) 4.4px, rgba(240, 226, 191, 0) 12px) no-repeat;
    opacity: 0; pointer-events: none;
}
[dir="rtl"] .hero-flow__lead::after { background-position: 100% 0; background-image: radial-gradient(circle at calc(100% - 4px) 50%, var(--gold-soft) 0 3.6px, rgba(240, 226, 191, .55) 4.4px, rgba(240, 226, 191, 0) 12px); }
[dir="rtl"] .js-sc .hero-flow__step.is-active .hero-flow__lead::after { animation-name: hfPacketRtl; }
.js-sc .hero-flow__step.is-active .hero-flow__lead { transform: scaleX(1); opacity: 1; }
.js-sc .hero-flow__step.is-active .hero-flow__lead::after { animation: hfPacket .75s .25s var(--ease) both; }
@keyframes hfPacket {
    0%   { transform: translateX(0); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(calc(100% - 8px)); opacity: 0; }
}
@keyframes hfPacketRtl {
    0%   { transform: translateX(0); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(calc(-100% + 8px)); opacity: 0; }
}
.hero-flow.is-complete .hero-flow__lead { opacity: 0 !important; }

.hero-flow__now { display: none; }

/* Card event feed */
.hero-feed {
    position: relative;
    display: flex; align-items: center; gap: .6rem;
    margin-top: .8rem; padding: .55rem .7rem;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: .76rem; font-weight: 600;
    overflow: hidden;
    transition: background-color .4s var(--ease), color .4s var(--ease);
}
.hero-feed.is-done { background: var(--gold-soft); color: var(--gold); }
.hero-feed.is-done .hero-feed__pulse { background: var(--gold); }
.hero-feed__pulse {
    flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary);
    position: relative;
}
.hero-feed__pulse::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: inherit; opacity: .45; pointer-events: none;
    animation: scPing 2s var(--ease) infinite;
}
.hero-feed__list { position: relative; flex: 1; min-width: 0; height: 1.3rem; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.hero-feed__item {
    position: absolute; inset: 0;
    line-height: 1.3rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transform: translateY(100%); visibility: hidden;
    /* Slide only — the list clips, so no opacity fade is needed (a fade left
       text at ~4:1 contrast mid-transition). visibility keeps parked items
       out of the a11y tree. */
    transition: transform .4s var(--ease);
}
.hero-feed__item.is-active { transform: none; visibility: visible; transition-delay: .12s; }
.hero-feed__item.is-leaving { transform: translateY(-100%); visibility: visible; transition-duration: .2s; }
@keyframes scPing {               /* 8px dot → +9px halo: 26/8 */
    0%        { transform: scale(1);    opacity: .45; }
    70%, 100% { transform: scale(3.25); opacity: 0; }
}

/* ≤1100px — rail goes horizontal above the card */
@media (max-width: 1100px) {
    .hero-stage { flex-direction: column; align-items: center; gap: 1.6rem; }
    .hero-flow { flex: none; width: min(100%, 380px); }
    .hero-stage__card { flex: none; width: min(100%, 330px); }
    .hero-flow__head { margin-block-end: .7rem; }
    .hero-flow__rail { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
    .hero-flow__step { justify-content: center; min-height: 0; }
    .hero-flow__name {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .hero-flow__lead { display: none; }
    .hero-flow__track {
        inset-block: auto; inset-block-start: 13px;
        inset-inline: calc(100% / 14); width: auto; height: 2px; margin: 0;
    }
    .hero-flow__fill {
        background: linear-gradient(90deg, var(--gold-soft), rgba(240, 226, 191, .55));
        transform-origin: left center; transform: scaleX(var(--p, 0));
    }
    [dir="rtl"] .hero-flow__fill { transform-origin: right center; }
    .hero-flow__now {
        display: block; margin: .75rem 0 0; text-align: center;
        font-size: .82rem; font-weight: 600; color: var(--paper);
    }
    .hero-flow__now .mono { color: var(--gold-soft); margin-inline-end: .35rem; font-size: .76rem; }
}
@media (max-width: 880px) {
    .hero-stage__card .hero-geo { inset: -40px; }
}

/* --------------------------------------------------------------------------
   1. Story strip
   -------------------------------------------------------------------------- */
.sc-story { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.sc-story__wrap {
    position: relative;
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
    padding-inline-end: calc(clamp(1rem, 3vw, 2rem) + 30px);
    box-shadow: var(--shadow-sm);
}
.sc-story__list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: .5rem;
    counter-reset: beat;
}
.sc-story__beat {
    position: relative;
    display: grid; justify-items: center; text-align: center;
    gap: .45rem; padding: .4rem .2rem;
    color: var(--muted);
    transition: color .4s var(--ease);
}
/* connector to the next beat */
.sc-story__beat:not(:last-child)::after {
    content: ""; position: absolute;
    inset-block-start: 1.55rem; inset-inline-start: calc(50% + 1.6rem); inset-inline-end: calc(-50% + 1.6rem);
    height: 2px; border-radius: 2px;
    background: linear-gradient(to right, var(--primary) 50%, rgba(13, 23, 20, .12) 50%) no-repeat;
    background-size: 200% 100%; background-position: 100% 0;
    transition: background-position .9s var(--ease);
}
[dir="rtl"] .sc-story__beat:not(:last-child)::after { background-image: linear-gradient(to left, var(--primary) 50%, rgba(13, 23, 20, .12) 50%); }
.sc-story__beat.is-done::after { background-position: 0 0; }
.sc-story__icon {
    display: grid; place-items: center;
    width: 3.1rem; height: 3.1rem; border-radius: 50%;
    background: var(--surface-2);
    border: 1.5px solid rgba(13, 23, 20, .1);
    color: var(--muted);
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.sc-story__num { font-size: .66rem; color: var(--gold); letter-spacing: .08em; }
.sc-story__text { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.sc-story__beat.is-done { color: var(--ink-2); }
.sc-story__beat.is-done .sc-story__icon { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.sc-story__beat.is-active { color: var(--ink); }
.sc-story__beat.is-active .sc-story__icon {
    background: var(--primary); color: var(--paper); border-color: var(--primary);
    transform: scale(1.12);
    box-shadow: 0 0 0 6px rgba(10, 79, 60, .12);
}
@media (max-width: 980px) {
    .sc-story__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1.4rem; }
    .sc-story__beat:nth-child(4)::after { display: none; }
}
@media (max-width: 520px) {
    .sc-story__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-story__beat:nth-child(2n)::after { display: none; }
    .sc-story__beat:nth-child(4)::after { display: none; }
}

/* --------------------------------------------------------------------------
   2. One platform — convergence
   -------------------------------------------------------------------------- */
.sc-platform__stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding-block-end: 3.6rem;
}
.sc-platform__tools, .sc-platform__modules { display: grid; gap: .55rem; position: relative; }

/* bus line between list and core */
.sc-platform__tools::after,
.sc-platform__modules::before {
    content: ""; position: absolute; inset-block: 1.1rem;
    width: 2px; border-radius: 2px;
}
.sc-platform__tools::after {
    inset-inline-end: -1.1rem;
    background: repeating-linear-gradient(to bottom, rgba(135, 22, 22, .35) 0 5px, transparent 5px 10px);
}
.sc-platform__modules::before {
    inset-inline-start: -1.1rem;
    background: linear-gradient(to bottom, transparent, var(--gold-bright), transparent);
    background-size: 100% 220%;
    animation: scBus 2.6s linear infinite;
}
@keyframes scBus { from { background-position: 0 100%; } to { background-position: 0 -120%; } }

.sc-tool, .sc-module {
    position: relative;
    display: flex; align-items: center; gap: .7rem;
    padding: .62rem .85rem;
    border-radius: var(--radius-sm);
    font-size: .9rem; font-weight: 500;
}
.sc-tool {
    background: var(--surface-2);
    border: 1px dashed rgba(135, 22, 22, .3);
    color: var(--ink-3);
    animation: scJitter 3.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * -.6s);
}
@keyframes scJitter {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    25%      { transform: translate3d(2px, -2px, 0) rotate(-.6deg); }
    75%      { transform: translate3d(-2px, 1px, 0) rotate(.5deg); }
}
.sc-tool__icon { color: var(--danger); display: grid; }
.sc-module {
    background: var(--primary-soft);
    color: var(--ink);
    font-weight: 600;
}
.sc-module__icon {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--primary); color: var(--paper); flex: none;
}
.sc-module__name { flex: 1; }
.sc-module::before {
    content: ""; position: absolute; inset-inline-start: -1.1rem; inset-block-start: 50%;
    width: 1.1rem; height: 2px; background: var(--gold-bright); opacity: .55;
}

/* Core */
.sc-platform__core { display: grid; justify-items: center; text-align: center; gap: .3rem; }
.sc-core { position: relative; width: 168px; height: 168px; display: grid; place-items: center; color: var(--primary); }
.sc-core__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-core__orbit { transform-origin: 100px 100px; animation: scSpin 7s linear infinite; stroke: var(--gold-bright); stroke-opacity: .9; stroke-width: 2.5; stroke-linecap: round; }
@keyframes scSpin { to { transform: rotate(360deg); } }
.sc-core__mark {
    display: grid; place-items: center;
    width: 104px; height: 104px; border-radius: 50%;
    background: var(--surface); box-shadow: var(--shadow-md);
    animation: scBreathe 4s ease-in-out infinite;
}
@keyframes scBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.sc-core__name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin: .4rem 0 0; color: var(--ink); }
.sc-core__name .lockup__core { color: var(--gold); }
.sc-core__sub { font-size: .78rem; color: var(--muted); margin: 0; }

/* JS-driven convergence states (data-sc="platform") */
.js-sc .sc-platform__stage[data-state="idle"] .sc-module,
.js-sc .sc-platform__stage[data-state="merging"] .sc-module { opacity: 0; transform: translateX(-14px) scale(.96); }
.js-sc[dir="rtl"] .sc-platform__stage[data-state="idle"] .sc-module,
.js-sc[dir="rtl"] .sc-platform__stage[data-state="merging"] .sc-module { transform: translateX(14px) scale(.96); }
.js-sc .sc-platform__stage .sc-module { transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i) * 90ms); }

.sc-platform__stage[data-state="merging"] .sc-tool {
    animation: none;
    transform: translate3d(var(--dx, 0), var(--dy, 0), 0) scale(.35);
    opacity: 0;
    transition: transform .9s cubic-bezier(.6, 0, .3, 1), opacity .9s ease-in;
    transition-delay: calc(var(--i) * 80ms);
}
.sc-platform__stage[data-state="merging"] .sc-core__mark { animation: scAbsorb .9s var(--ease) .55s both; }
@keyframes scAbsorb { 0% { transform: scale(1); } 45% { transform: scale(1.18); box-shadow: 0 0 0 18px rgba(168, 122, 38, .18); } 100% { transform: scale(1); } }

.sc-platform__stage[data-state="merged"] .sc-tool {
    animation: none;
    opacity: .5;
    text-decoration: line-through;
    text-decoration-color: rgba(135, 22, 22, .5);
    transition: opacity .6s var(--ease);
}

.sc-replay {
    position: absolute; inset-block-end: .8rem; inset-inline-end: .8rem;
    align-items: center; gap: .4rem;
    padding: .38rem .8rem; border-radius: 999px;
    border: var(--border-strong); background: var(--surface);
    font: 600 .76rem/1 var(--font-body); color: var(--ink-3); cursor: pointer;
}
.sc-replay:hover { color: var(--primary); }

@media (max-width: 880px) {
    .sc-platform__stage { grid-template-columns: 1fr; justify-items: stretch; padding-block-end: 3.6rem; }
    .sc-platform__tools::after, .sc-platform__modules::before, .sc-module::before { display: none; }
    .sc-platform__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-platform__modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sc-platform__core { position: relative; padding-block: .6rem; }
    .sc-platform__core::before, .sc-platform__core::after {
        content: ""; width: 2px; height: 1.6rem; margin-inline: auto;
        background: linear-gradient(var(--gold-bright), transparent);
    }
    .sc-platform__core::after { background: linear-gradient(transparent, var(--gold-bright)); order: 9; }
    .sc-core { width: 136px; height: 136px; }
    .sc-core__mark { width: 86px; height: 86px; }
}
@media (max-width: 480px) {
    .sc-platform__tools, .sc-platform__modules { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   3. Workflow — live operations console
   -------------------------------------------------------------------------- */
.sc-flow__app {
    position: relative;
    display: grid;
    grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: start;
}
.sc-flow__railwrap { position: relative; padding-block-end: 3.2rem; }
.sc-flow__track {
    position: absolute; inset-block: 1.3rem 4.5rem; inset-inline-start: 1.25rem;
    width: 2px; background: rgba(248, 243, 230, .14); border-radius: 2px;
}
.sc-flow__fill {
    position: absolute; inset-inline: 0; inset-block-start: 0;
    height: 100%;
    transform-origin: top; transform: scaleY(var(--flow-p, .09));
    background: linear-gradient(to bottom, var(--gold-soft), var(--gold-bright));
    border-radius: 2px;
    transition: transform .8s var(--ease);
}
.sc-flow__fill::after { /* travelling data packet at the head of the fill */
    content: ""; position: absolute; inset-inline-start: 50%; inset-block-end: -5px;
    width: 10px; height: 10px; margin-inline-start: -5px; border-radius: 50%;
    background: var(--gold-soft);
    box-shadow: 0 0 0 4px rgba(240, 226, 191, .2), 0 0 18px 4px rgba(240, 226, 191, .45);
    transform: scaleY(calc(1 / var(--flow-p, .09)));
}
.sc-flow__rail { display: grid; gap: .15rem; position: relative; }
.sc-node {
    display: flex; align-items: center; gap: .75rem;
    width: 100%; padding: .4rem .6rem .4rem 0;
    padding-inline-start: 0;
    background: none; border: 0; border-radius: var(--radius-sm);
    color: rgba(248, 243, 230, .58);
    font: 500 .9rem/1.2 var(--font-body);
    text-align: start; cursor: pointer;
    transition: color .3s var(--ease), background .3s var(--ease);
}
.sc-node:hover { color: var(--paper); background: rgba(248, 243, 230, .05); }
.sc-node__dot {
    position: relative; z-index: 1;
    display: grid; place-items: center; flex: none;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: #0b4535;
    border: 1.5px solid rgba(248, 243, 230, .18);
    transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease), color .35s var(--ease);
}
.sc-node__name { flex: 1; }
.sc-node.is-done { color: rgba(248, 243, 230, .82); }
.sc-node.is-done .sc-node__dot { background: var(--primary-2); border-color: rgba(240, 226, 191, .45); color: var(--gold-soft); }
.sc-node.is-active { color: var(--paper); font-weight: 600; }
.sc-node.is-active .sc-node__dot {
    background: var(--gold-soft); color: var(--primary-deep); border-color: var(--gold-soft);
    transform: scale(1.1);
}
.sc-node.is-active .sc-node__dot::before {
    content: ""; position: absolute; inset: -1.5px; border-radius: 50%;
    background: rgba(240, 226, 191, .5); z-index: -1; pointer-events: none;
    animation: scHalo 2s var(--ease) infinite;
}
@keyframes scHalo {               /* 40px dot → +12px halo: 64/40 */
    0%        { transform: scale(1);   opacity: 1; }
    80%, 100% { transform: scale(1.6); opacity: 0; }
}

.sc-console {
    background: var(--surface);
    color: var(--ink-2);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .14);
    overflow: hidden;
}
.sc-console__bar {
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1.1rem;
    background: var(--surface-2);
    border-block-end: var(--border);
}
.sc-console__dots { display: flex; gap: .35rem; }
.sc-console__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(13, 23, 20, .14); }
.sc-console__dots i:first-child { background: var(--gold-bright); }
.sc-console__title { flex: 1; font-size: .78rem; color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-console__progress {
    display: grid; grid-template-columns: 1fr auto; gap: .45rem .8rem;
    padding: 1rem 1.3rem .2rem;
    font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.sc-console__progress .mono { color: var(--primary); font-size: .8rem; }
.sc-meter { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.sc-meter > span {
    display: block; height: 100%; width: 100%;
    transform-origin: left center; transform: scaleX(var(--p, 0));
    position: relative; overflow: hidden;
    transition: transform .8s var(--ease);
}
.sc-meter > span::before {
    content: ""; position: absolute; inset-block: 0; left: 0; /* physical on purpose: the slide is LTR-only */
    width: calc(100% + 23px);
    background: repeating-linear-gradient(-45deg, var(--primary) 0 8px, var(--primary-2) 8px 16px);
    animation: scStripes 1.2s linear infinite;
}
[dir="rtl"] .sc-meter > span { transform-origin: right center; }
@keyframes scStripes { to { transform: translateX(-22.63px); } } /* one stripe period: 16px / sin 45° */

.sc-console__body { padding: 1.1rem 1.3rem .4rem; min-height: 15.5rem; position: relative; }
.sc-panel.is-active { animation: scPanelIn .55s var(--ease) both; }
@keyframes scPanelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.sc-panel__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; flex-wrap: wrap; }
.sc-panel__icon {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
    background: var(--tone-soft); color: var(--tone);
}
.sc-panel__step { font-size: .74rem; color: var(--muted); margin-inline-end: auto; }
.sc-panel__title { font-family: var(--font-display); font-weight: 580; font-size: 1.32rem; color: var(--ink); margin: 0 0 .35rem; letter-spacing: -.01em; }
.sc-panel__text { font-size: .92rem; color: var(--ink-3); margin: 0 0 1rem; }
.sc-panel__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0; }
.sc-panel__row {
    padding: .65rem .75rem; border-radius: var(--radius-sm); background: var(--surface-2);
    animation: scRowIn .5s var(--ease) both; animation-delay: calc(.15s + var(--r) * .1s);
}
.sc-panel__row dt { font-size: .7rem; color: var(--muted); margin-bottom: .2rem; }
.sc-panel__row dd { margin: 0; font-size: .86rem; color: var(--ink); font-weight: 500; }
@keyframes scRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.sc-console__log { padding: .4rem 1.3rem 1.1rem; }
.sc-console__logtitle {
    font: 600 .64rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); margin: .4rem 0 .55rem;
    padding-block-start: .8rem; border-block-start: var(--border);
}
.sc-log { display: grid; gap: .3rem; min-height: 5.4rem; align-content: start; }
.sc-log__line {
    font-size: .8rem; color: var(--ink-3);
    display: flex; gap: .6rem; align-items: baseline;
    animation: scLogIn .45s var(--ease) both;
}
.sc-log__line .mono { color: var(--gold); font-size: .74rem; flex: none; }
.sc-log__line:first-child { color: var(--ink); font-weight: 500; }
@keyframes scLogIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 880px) {
    .sc-flow__app { grid-template-columns: 1fr; }
    .sc-flow__railwrap { padding-block-end: 0; overflow-x: auto; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; }
    .sc-flow__railwrap::-webkit-scrollbar { display: none; }
    .sc-flow__track { display: none; }
    .sc-flow__rail { grid-auto-flow: column; grid-auto-columns: max-content; gap: .4rem; padding-block: .3rem .6rem; }
    .sc-node { flex-direction: column; gap: .35rem; padding: .3rem; font-size: .74rem; width: 5.6rem; text-align: center; }
        .sc-flow__item { position: relative; }
    .sc-panel__rows { grid-template-columns: 1fr; }
    .sc-console__body { min-height: 0; }
    .sc-flow .sc-flow__app > .sc-toggle--corner { inset-block-end: auto; inset-block-start: -2.9rem; inset-inline-end: 0; inset-inline-start: auto; }
}

.sc-flow__app > .sc-toggle--corner { inset-block-start: auto; inset-block-end: 0; inset-inline-end: auto; inset-inline-start: 0; }

/* --------------------------------------------------------------------------
   4. Single → batch bookings
   -------------------------------------------------------------------------- */
.sc-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: 1.6rem; }
.sc-tab {
    display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem;
    text-align: start; padding: .85rem 1rem;
    background: var(--surface); border: var(--border); border-radius: var(--radius);
    cursor: pointer; color: var(--ink-2);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.sc-tab:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sc-tab__label { font-weight: 600; color: var(--ink); }
.sc-tab__count { font-size: .8rem; color: var(--gold); align-self: center; }
.sc-tab__desc { grid-column: 1 / -1; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.sc-tab[aria-selected="true"] {
    border-color: var(--primary); background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.sc-tab[aria-selected="true"] .sc-tab__count { color: var(--primary); }
@media (max-width: 480px) { .sc-tabs { grid-template-columns: 1fr; } }

.sc-book__visual { display: grid; gap: 1rem; }
.sc-book__head .sc-toggle { margin-inline-start: .2rem; }
.sc-book__head .chip { margin-inline-start: auto; }
.sc-book__card {
    background: var(--surface); border: var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: 1.2rem 1.3rem 1.3rem;
}
.sc-book__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.sc-book__ref { font-size: .84rem; color: var(--ink-3); }
.sc-book__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1.1rem; }
.sc-book__stat { padding: .6rem .7rem; border-radius: var(--radius-sm); background: var(--surface-2); }
.sc-book__num { display: block; font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
.sc-book__lbl { font-size: .7rem; color: var(--muted); }

.sc-book__pax {
    display: flex; flex-wrap: wrap; gap: .6rem;
    min-height: 5.5rem; align-content: flex-start;
}
.sc-pax__group {
    display: flex; flex-wrap: wrap; gap: .3rem; align-content: flex-start;
    padding: .4rem; border-radius: var(--radius-sm);
    border: 1px dashed transparent;
    transition: border-color .4s var(--ease), background .4s var(--ease);
}
.sc-book__pax[data-groups="4"] .sc-pax__group { flex: 1 1 calc(50% - .6rem); border-color: rgba(10, 79, 60, .22); }
.sc-pax__gname { width: 100%; font-size: .66rem; color: var(--muted); margin-bottom: .1rem; }
.sc-pax__room {
    display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px;
    border-radius: 6px; border: 1px solid transparent;
    transition: border-color .4s var(--ease), background .4s var(--ease);
}
.sc-pax__room i {
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--primary);
    opacity: .85;
    transition: background .4s var(--ease), transform .4s var(--ease);
}
.sc-book__pax[data-groups="4"] .sc-pax__room i { width: 8px; height: 8px; }
.js-sc .sc-book__pax.is-filling .sc-pax__room i { animation: scPop .4s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes scPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: .85; } }
.sc-book__pax.is-roomed .sc-pax__room { border-color: rgba(10, 95, 92, .35); background: var(--teal-soft); }
.sc-book__pax.is-visa .sc-pax__room i { background: var(--violet); }
.sc-book__pax.is-done .sc-pax__room i { background: var(--primary); }

.sc-cascade {
    display: flex; flex-wrap: wrap; gap: .4rem;
}
.sc-cascade__step {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .75rem .38rem .4rem; border-radius: 999px;
    padding-inline: .4rem .75rem;
    font-size: .78rem; font-weight: 600;
    background: var(--surface); border: var(--border); color: var(--muted);
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.sc-cascade__dot {
    display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--surface-2); color: transparent;
    transition: background .35s var(--ease), color .35s var(--ease);
}
.sc-cascade__step.is-done { color: var(--primary); border-color: rgba(10, 79, 60, .25); background: var(--primary-soft); }
.sc-cascade__step.is-done .sc-cascade__dot { background: var(--primary); color: var(--paper); }
.sc-cascade__step.is-active { transform: scale(1.05); border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(168, 122, 38, .18); }
@media (max-width: 480px) { .sc-book__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   5. End-to-end journey (scroll-driven)
   -------------------------------------------------------------------------- */
.sc-journey__body { position: relative; --jp: 1; }
.sc-journey__track { position: relative; height: 2.4rem; margin-bottom: 1.2rem; }
.sc-journey__line {
    position: absolute; inset-inline: 0; inset-block-start: 50%;
    height: 2px; background: rgba(13, 23, 20, .1); border-radius: 2px; overflow: hidden;
}
.sc-journey__fill {
    position: absolute; inset: 0;
    background: linear-gradient(to right, var(--primary), var(--gold-bright));
    transform-origin: left center; transform: scaleX(var(--jp));
}
[dir="rtl"] .sc-journey__fill { transform-origin: right center; background: linear-gradient(to left, var(--primary), var(--gold-bright)); }
.sc-journey__plane {
    position: absolute; inset-block-start: 50%;
    inset-inline-start: calc(var(--jp) * (100% - 2.4rem));
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem; margin-block-start: -1.2rem;
    border-radius: 50%;
    background: var(--primary); color: var(--paper);
    box-shadow: 0 0 0 6px rgba(10, 79, 60, .12);
}
.sc-journey__plane .icon { transform: rotate(45deg); }
[dir="rtl"] .sc-journey__plane .icon { transform: scaleX(-1) rotate(45deg); }

.sc-journey__phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.sc-phase {
    background: var(--surface); border: var(--border); border-radius: var(--radius-lg);
    padding: 1.3rem 1.3rem 1.1rem; box-shadow: var(--shadow-sm);
    border-block-start: 3px solid var(--primary);
}
.sc-phase--during { border-block-start-color: var(--gold-bright); }
.sc-phase--after  { border-block-start-color: var(--teal); }
.sc-phase__head { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: 1rem; }
.sc-phase__num { font-size: .74rem; color: var(--gold); }
.sc-phase__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 580; color: var(--ink); margin: 0; margin-inline-end: auto; }
.sc-phase__steps { display: grid; gap: .4rem; position: relative; }
.sc-jstep {
    position: relative;
    display: flex; align-items: center; gap: .7rem;
    padding: .5rem .6rem; border-radius: var(--radius-sm);
    font-size: .88rem; color: var(--muted);
    background: transparent;
    transition: background .4s var(--ease), color .4s var(--ease);
}
.sc-jstep:not(:last-child)::after {
    content: ""; position: absolute; inset-inline-start: calc(.6rem + 15px); inset-block-start: calc(50% + 16px);
    width: 2px; height: calc(100% - 26px); background: rgba(13, 23, 20, .1);
    transition: background .4s var(--ease);
}
.sc-jstep__icon {
    position: relative; z-index: 1;
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
    background: var(--surface-2); color: var(--muted);
    transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.sc-jstep__text { flex: 1; }
.sc-jstep__check { color: var(--primary); opacity: 0; transform: scale(.5); transition: opacity .3s var(--ease), transform .3s var(--ease); display: grid; }
.sc-jstep.is-done { color: var(--ink); background: var(--surface-2); }
.sc-jstep.is-done::after { background: var(--primary); }
.sc-jstep.is-done .sc-jstep__icon { background: var(--primary); color: var(--paper); }
.sc-jstep.is-done .sc-jstep__check { opacity: 1; transform: none; }
.sc-jstep.is-current .sc-jstep__icon { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(168, 122, 38, .2); background: var(--gold-bright); }
@media (max-width: 880px) {
    .sc-journey__phases { grid-template-columns: 1fr; }
    .sc-journey__track { display: none; }
}

/* --------------------------------------------------------------------------
   6. Real-time support
   -------------------------------------------------------------------------- */
.sc-legend { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.3rem 0 0; }
.sc-support__stage {
    position: relative;
    padding: clamp(1.2rem, 3vw, 1.8rem);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--primary-deep), var(--primary));
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.sc-support__stage > .sc-toggle--corner { background: rgba(248, 243, 230, .1); border-color: rgba(248, 243, 230, .22); color: var(--paper); }
.sc-bubble {
    display: flex; gap: .7rem; align-items: flex-start;
    width: min(88%, 380px);
    padding: .8rem .95rem;
    background: var(--paper); border-radius: 16px; border-end-start-radius: 4px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.sc-bubble__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); flex: none; }
.sc-bubble__from { font-size: .7rem; color: var(--muted); margin: 0 0 .15rem; }
.sc-bubble__text { font-size: .88rem; color: var(--ink); margin: 0; }
.sc-support__stage.is-new .sc-bubble { animation: scBubble .6s var(--ease) both; }
@keyframes scBubble { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

.sc-ticket {
    background: var(--surface); border-radius: var(--radius); padding: 1rem 1.1rem;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .22);
}
.sc-ticket__head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sc-ticket__id { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--ink-3); margin-inline-end: auto; }
.sc-ticket__id .icon { color: var(--gold); }
[data-ticket-status] { transition: background .3s var(--ease), color .3s var(--ease); }

.sc-ticket__states {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    position: relative; margin-bottom: 1rem;
}
.sc-ticket__states::before {
    content: ""; position: absolute; inset-inline: 8%; inset-block-start: 6px; height: 2px;
    background: var(--surface-2);
}
.sc-state { display: grid; justify-items: center; gap: .35rem; text-align: center; position: relative; }
.sc-state__dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--surface-2); border: 2px solid rgba(13, 23, 20, .14);
    position: relative; z-index: 1;
    transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.sc-state__label { font-size: .66rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.sc-state.is-done .sc-state__dot { background: var(--primary); border-color: var(--primary); }
.sc-state.is-active .sc-state__dot { transform: scale(1.35); border-color: var(--gold-bright); background: var(--gold-soft); }
.sc-state.is-active .sc-state__dot::before,
.sc-state.is-active .sc-state__dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1; pointer-events: none; }
.sc-state.is-active .sc-state__dot::before { background: rgba(168, 122, 38, .45); animation: scHaloGold 1.6s var(--ease) infinite; }
.sc-state.is-active .sc-state__dot::after { background: inherit; border: inherit; }
.sc-state.is-active .sc-state__label { color: var(--ink); }
.sc-state[data-tone="danger"].is-active .sc-state__dot { background: var(--danger-soft); border-color: var(--danger); }
@keyframes scHaloGold { 0% { transform: scale(1); opacity: 1; } 80%, 100% { transform: scale(2.29); opacity: 0; } } /* 14px → +9px: 32/14 */

.sc-ticket__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0 0 .9rem; }
.sc-ticket__meta > div { padding: .5rem .65rem; border-radius: var(--radius-sm); background: var(--surface-2); min-width: 0; }
.sc-ticket__meta dt { font-size: .66rem; color: var(--muted); margin-bottom: .15rem; }
.sc-ticket__meta dd { margin: 0; font-size: .82rem; color: var(--ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-ticket__meta .chip { font-size: .68rem; padding: .18rem .55rem; }
[data-ticket-owner].is-changed { animation: scFlash .8s var(--ease); }
@keyframes scFlash { 0% { background: var(--gold-soft); } 100% { background: transparent; } }

.sc-feed { display: grid; gap: .3rem; border-block-start: var(--border); padding-block-start: .7rem; min-height: 4.6rem; align-content: start; }
.sc-feed__item { display: flex; gap: .55rem; align-items: center; font-size: .78rem; color: var(--ink-3); animation: scLogIn .4s var(--ease) both; }
.sc-feed__item:first-child { color: var(--ink); font-weight: 500; }
.sc-feed__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex: none; }
@media (max-width: 480px) {
    .sc-state__label { font-size: .56rem; }
    .sc-ticket__meta { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. Task management
   -------------------------------------------------------------------------- */
.sc-relay {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem;
    margin: 0 auto 1.8rem; max-width: 60rem;
}
.sc-relay__team {
    position: relative;
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .85rem; border-radius: 999px;
    background: var(--surface); border: var(--border);
    font-size: .8rem; font-weight: 600; color: var(--muted);
    transition: color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.sc-relay__team:not(:last-child) { margin-inline-end: 1.1rem; }
.sc-relay__team:not(:last-child)::after {
    content: "→"; position: absolute; inset-inline-end: -1.05rem;
    font-size: .8rem; color: var(--gold-bright); opacity: .7;
}
[dir="rtl"] .sc-relay__team:not(:last-child)::after { content: "←"; }
.sc-relay__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); opacity: .45; transition: opacity .3s var(--ease); }
.sc-relay__team.is-done { color: var(--ink-2); }
.sc-relay__team.is-done .sc-relay__dot { opacity: 1; }
.sc-relay__team.is-active { color: var(--tone); background: var(--tone-soft); border-color: transparent; transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.sc-board {
    position: relative;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem;
    padding: 1rem; padding-block-start: 1.2rem;
    background: var(--surface-2); border: var(--border); border-radius: var(--radius-lg);
}
.sc-board > .sc-toggle--corner { inset-block-start: -1.1rem; }
.sc-col { min-width: 0; display: flex; flex-direction: column; }
.sc-col__title {
    display: flex; align-items: center; justify-content: space-between;
    font: 600 .72rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 .7rem; padding-inline: .2rem;
}
.sc-col__count { font-size: .72rem; padding: .18rem .45rem; border-radius: 999px; background: var(--surface); color: var(--ink-3); }
.sc-col__list { display: grid; gap: .6rem; align-content: start; min-height: 11rem; flex: 1; border-radius: var(--radius-sm); }
.sc-col[data-col="done"] .sc-task { opacity: .78; }
.sc-col[data-col="done"] .sc-task__title { text-decoration: line-through; text-decoration-color: rgba(10, 79, 60, .45); }
.sc-task {
    background: var(--surface); border: var(--border); border-radius: var(--radius-sm);
    padding: .75rem .8rem; box-shadow: var(--shadow-sm);
    will-change: transform;
}
.sc-task.is-moving { box-shadow: var(--shadow-lg); z-index: 2; position: relative; }
.sc-task.is-arrived { animation: scArrive .7s var(--ease); }
@keyframes scArrive { 0% { box-shadow: 0 0 0 3px rgba(168, 122, 38, .45); } 100% { box-shadow: var(--shadow-sm); } }
.sc-task__top { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .5rem; }
.sc-task__top .chip { font-size: .64rem; padding: .18rem .5rem; }
.sc-prio { font: 600 .62rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: .2rem .4rem; border-radius: 4px; }
.sc-prio--high   { background: var(--danger-soft); color: var(--danger); }
.sc-prio--medium { background: var(--gold-soft);   color: var(--gold); }
.sc-prio--low    { background: var(--surface-2);   color: var(--muted); }
.sc-task__title { font-size: .84rem; font-weight: 600; color: var(--ink); margin: 0 0 .15rem; line-height: 1.3; }
.sc-task__for { font-size: .74rem; color: var(--muted); margin: 0 0 .55rem; }
.sc-task__meta { display: flex; align-items: center; justify-content: space-between; gap: .4rem; font-size: .72rem; color: var(--ink-3); }
.sc-task__owner { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-avatar { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: var(--paper); font-size: .62rem; font-weight: 700; flex: none; }
.sc-task__due { display: inline-flex; align-items: center; gap: .2rem; color: var(--ink-3); flex: none; }
@media (max-width: 980px) { .sc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    .sc-board { grid-template-columns: repeat(4, 78%); overflow-x: auto; scroll-snap-type: x mandatory; }
    .sc-col { scroll-snap-align: start; }
}

.sc-compare {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem; align-items: center; margin-top: 2.2rem;
}
.sc-compare__card { border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; height: 100%; }
.sc-compare__card--before { background: var(--surface); border: 1px dashed rgba(135, 22, 22, .3); }
.sc-compare__card--after { background: var(--primary); color: var(--paper); box-shadow: var(--shadow-md); }
.sc-compare__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 580; margin: 0 0 .9rem; color: var(--ink); }
.sc-compare__card--after .sc-compare__title { color: var(--paper); }
.sc-compare__card ul { display: grid; gap: .6rem; }
.sc-compare__card li { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; }
.sc-compare__card li .icon { flex: none; margin-top: .2rem; }
.sc-compare__card--before li { color: var(--ink-3); }
.sc-compare__card--before li .icon { color: var(--danger); }
.sc-compare__card--after li .icon { color: var(--gold-soft); }
.sc-compare__card.is-visible li { animation: scRowIn .5s var(--ease) both; animation-delay: calc(.2s + var(--i) * .12s); }
.sc-compare__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); }
[dir="rtl"] .sc-compare__arrow .icon { transform: scaleX(-1); }
@media (max-width: 880px) {
    .sc-compare { grid-template-columns: 1fr; }
    .sc-compare__arrow { margin-inline: auto; transform: rotate(90deg); }
    [dir="rtl"] .sc-compare__arrow { transform: rotate(90deg); }
}

/* --------------------------------------------------------------------------
   8. Revenue mechanism
   -------------------------------------------------------------------------- */
.sc-growth__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.sc-wheel { position: relative; display: grid; place-items: center; padding: 1rem; }
.sc-wheel__ring {
    position: relative;
    width: 100%; max-width: 420px; aspect-ratio: 1;
    color: var(--gold-soft);
    container-type: inline-size;
    --r: 160px;
    --r: 39cqi;
}
.sc-wheel__ring > svg { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; }
.sc-wheel__center .khatim { width: 40px; height: 40px; }
.sc-wheel__spin { transform-origin: 100px 100px; animation: scSpin 9s linear infinite; }
.sc-wheel__center {
    position: absolute; inset: 0; margin: auto;
    width: 34%; height: 34%; border-radius: 50%;
    display: grid; place-items: center; align-content: center; gap: .3rem; text-align: center;
    background: rgba(248, 243, 230, .06); border: 1px solid rgba(248, 243, 230, .14);
    font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-soft);
    padding: .5rem;
}
.sc-wheel__node {
    position: absolute; inset-block-start: 50%; left: 50%;
    width: 0; height: 0;
    transform: rotate(var(--a)) translate(calc(var(--r) * 1)) rotate(calc(var(--a) * -1));
}
.sc-wheel__label {
    /* explicit physical anchor: without it the static position follows the
       inline direction and RTL labels drift a half-width to the left */
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    display: inline-flex; align-items: center; gap: .35rem;
    white-space: nowrap;
    padding: .4rem .7rem; border-radius: 999px;
    background: #0b4535; border: 1px solid rgba(248, 243, 230, .16);
    font-size: .78rem; font-weight: 600; color: rgba(248, 243, 230, .7);
    transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.sc-wheel__label .mono { font-size: .66rem; color: var(--gold-soft); }
.sc-wheel__node.is-done .sc-wheel__label { color: var(--paper); border-color: rgba(240, 226, 191, .4); }
.sc-wheel__node.is-active .sc-wheel__label { background: var(--gold-soft); color: var(--primary-deep); transform: translate(-50%, -50%) scale(1.08); }
.sc-wheel__node.is-active .sc-wheel__label .mono { color: var(--gold); }
.sc-wheel__node--goal .sc-wheel__label { border-color: var(--gold-soft); }

.sc-chart {
    margin: 0;
    background: var(--surface); color: var(--ink-2);
    border-radius: var(--radius-lg); padding: 1.3rem 1.4rem 1.2rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}
.sc-chart__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.sc-chart__title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 580; color: var(--ink); }
.sc-chart__unit { font-size: .7rem; color: var(--muted); margin: .3rem 0 1rem; }
.sc-chart__bars {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem;
    height: 15rem; align-items: end;
    border-block-end: var(--border-strong); padding-block-end: 0;
    background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), rgba(13, 23, 20, .06) calc(25% - 1px) 25%);
}
.sc-bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.sc-bar__val { font-size: .78rem; color: var(--ink); margin-bottom: .3rem; }
.sc-bar__col {
    width: 100%; max-width: 54px; height: calc(var(--h) * (100% - 1.8rem)); flex: none;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(to top, var(--primary), var(--primary-2));
    transform-origin: bottom; transform: scaleY(1);
    transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 140ms);
}
.sc-bar:last-child .sc-bar__col { background: linear-gradient(to top, var(--gold), var(--gold-bright)); }
.sc-bar__lbl {
    position: absolute; inset-block-start: calc(100% + .5rem);
    font-size: .68rem; color: var(--muted); text-align: center; line-height: 1.25;
}
.sc-chart__bars { margin-bottom: 3rem; }
.js-sc .sc-chart:not(.is-visible) .sc-bar__col { transform: scaleY(0); }

.sc-growth__subhead {
    font-family: var(--font-display); font-weight: 560; font-size: 1.3rem;
    color: var(--paper); text-align: center; margin: clamp(2.5rem, 6vw, 4rem) 0 1.4rem;
}
.sc-upsell { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.sc-upsell__card {
    position: relative;
    padding: 1.1rem 1.1rem 1rem;
    border-radius: var(--radius);
    background: rgba(248, 243, 230, .06);
    border: 1px solid rgba(248, 243, 230, .12);
    transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.sc-upsell__card:hover { background: rgba(248, 243, 230, .1); transform: translateY(-4px); border-color: rgba(240, 226, 191, .35); }
.sc-upsell__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(240, 226, 191, .14); color: var(--gold-soft); margin-bottom: .7rem; }
.sc-upsell__plus {
    position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem;
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    font: 600 .9rem/1 var(--font-mono); color: var(--primary-deep); background: var(--gold-soft);
}
.sc-upsell__card.is-visible .sc-upsell__plus { animation: scPlus .6s var(--ease) both; animation-delay: calc(.3s + var(--i) * 90ms); }
@keyframes scPlus { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.2) rotate(0); } 100% { transform: scale(1); } }
.sc-upsell__title { font-weight: 600; color: var(--paper); margin: 0 0 .2rem; font-size: .95rem; }
.sc-upsell__text { font-size: .8rem; color: rgba(248, 243, 230, .66); margin: 0; }
.sc-disclaimer { margin: 1.6rem auto 0; max-width: 44rem; text-align: center; font-size: .78rem; color: rgba(248, 243, 230, .6); }
@media (max-width: 980px) {
    .sc-growth__grid { grid-template-columns: 1fr; }
    .sc-upsell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .sc-wheel__ring { --r: 37cqi; }
    .sc-wheel__center { width: 30%; height: 30%; }
    .sc-wheel__label { font-size: .64rem; padding: .3rem .5rem; white-space: normal; width: max-content; max-width: 6.6rem; text-align: center; line-height: 1.2; }
    .sc-wheel__center { font-size: .6rem; }
    .sc-upsell { grid-template-columns: 1fr; }
    .sc-chart__bars { gap: .35rem; }
    .sc-bar__lbl { font-size: .6rem; }
    .sc-chart__bars { margin-bottom: 3.6rem; height: 13rem; }
}

/* --------------------------------------------------------------------------
   9. Tagline
   -------------------------------------------------------------------------- */
.sc-tagline { padding-block: clamp(3.5rem, 8vw, 6rem); }
.sc-tagline__list { display: grid; gap: .4rem; justify-items: center; text-align: center; }
.sc-tagline__line {
    display: inline-flex; align-items: center; gap: .9rem;
    font-family: var(--font-display); font-weight: 520; letter-spacing: -.02em;
    font-size: clamp(1.5rem, 4.2vw, 2.7rem); line-height: 1.2;
    color: var(--ink);
    transition: color .5s var(--ease), opacity .5s var(--ease), transform .5s var(--ease);
}
.sc-tagline__line .khatim { transition: transform .6s var(--ease); }
.js-sc .sc-tagline__list[data-running] .sc-tagline__line { color: rgba(13, 23, 20, .28); }
.js-sc .sc-tagline__list[data-running] .sc-tagline__line.is-done { color: var(--ink); }
.js-sc .sc-tagline__list[data-running] .sc-tagline__line.is-active { color: var(--primary); }
.sc-tagline__line.is-active .khatim { transform: rotate(45deg) scale(1.15); }
.sc-tagline__line:last-child { font-style: italic; }
.sc-tagline__line:last-child span { color: var(--gold); }

/* --------------------------------------------------------------------------
   9b. RTL — main.css forces every .mono to LTR (right for pure numbers/IDs).
   These mono elements carry translated words mixed with numbers, so let the
   text pick its own direction instead of scrambling Arabic/Urdu word order.
   -------------------------------------------------------------------------- */
[dir="rtl"] .sc-console__title,
[dir="rtl"] .sc-panel__row dd,
[dir="rtl"] .sc-bubble__from,
[dir="rtl"] .sc-ticket__id,
[dir="rtl"] .sc-chart__unit { direction: rtl; unicode-bidi: plaintext; }
[dir="rtl"] .sc-ticket__id { display: inline-flex; }
[dir="rtl"] .sc-panel__row dd, [dir="rtl"] .sc-bubble__from, [dir="rtl"] .sc-chart__unit { display: block; }

/* --------------------------------------------------------------------------
   10. Reduced motion — static, complete states; no loops
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sc-tool, .sc-core__orbit, .sc-core__mark, .sc-wheel__spin,
    .sc-platform__modules::before, .sc-meter > span::before, .hero-feed__pulse::before, .hero-flow__step.is-active .hero-flow__dot::before,
    .hero-flow__step.is-active .hero-flow__lead::after,
    .sc-node.is-active .sc-node__dot::before, .sc-state.is-active .sc-state__dot::before { animation: none !important; }
    .hero-flow__step.is-active .hero-flow__dot::before, .hero-feed__pulse::before,
    .sc-node.is-active .sc-node__dot::before, .sc-state.is-active .sc-state__dot::before { opacity: 0; }
    .sc-task { will-change: auto; }
}

/* --------------------------------------------------------------------------
   11. Off-screen idle — showcase.js adds .sc-idle to a section while it is
   out of view, so its CSS loops (incl. SVG spins, which Chrome can't hand
   to the compositor) stop costing main-thread frames.
   -------------------------------------------------------------------------- */
.sc-idle *, .sc-idle *::before, .sc-idle *::after { animation-play-state: paused !important; }