/* =========================================================================
   GroLayer LMS - product landing page
   THEME LOCK: dark. Deep navy ground the whole way down, sections separated
   by texture and elevation rather than by flipping to light.
   ACCENT LOCK: cyan. SHAPE LOCK: panels 18px, controls 12-14px, pills full.
   Icons: Phosphor (one family). Form lives in a modal, never in the hero.
   Loads AFTER landing.css and reuses its tokens, buttons and form fields.
   ========================================================================= */

:root {
    --d0: #050E20;   /* deepest ground */
    --d1: #081A35;   /* base */
    --d2: #0C2444;   /* raised panel */
    --d3: #113058;   /* hover / border-bright */
    --edge: rgba(255, 255, 255, .10);
    --edge-2: rgba(255, 255, 255, .17);
    --txt: #EAF0F8;
    --txt-2: rgba(234, 240, 248, .68);
    --txt-3: rgba(234, 240, 248, .45);
    --gold: #C9A227;
}

body.lms {
    background: var(--d0);
    color: var(--txt);
}

/* ---------- section grounds: texture, not theme flips ---------- */
.lms .sec { position: relative; padding: 76px 0; overflow: hidden; }
.lms .sec > .wrap { position: relative; z-index: 2; }

.lms .sec.g-base { background: var(--d1); }
.lms .sec.g-deep { background: var(--d0); }

/* soft cyan aurora, used sparingly to lift a section */
.lms .sec.g-glow::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 65%;
    height: 130%;
    background: radial-gradient(closest-side, rgba(0, 184, 212, .16), transparent 72%);
    filter: blur(20px);
    pointer-events: none;
}
.lms .sec.g-glow-l::before { right: auto; left: -12%; }

/* engraved lattice texture pulled from the real photograph */
.lms .sec.g-lattice::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/uploads/website-images/lms-lattice.webp') center/cover no-repeat;
    opacity: .08;
    mix-blend-mode: luminosity;
    /* uniform across the section, fading only at the two extreme edges so the
       texture does not cut off against the next ground */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
    pointer-events: none;
}

/* fine rule grid */
.lms .sec.g-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(80% 65% at 50% 40%, #000 25%, transparent 100%);
    mask-image: radial-gradient(80% 65% at 50% 40%, #000 25%, transparent 100%);
    pointer-events: none;
}

.lms .sec-top-rule { border-top: 1px solid rgba(255, 255, 255, .07); }

/* ---------- type ---------- */
.lms h2 { font-size: clamp(28px, 4.8vw, 46px); letter-spacing: -.032em; line-height: 1.1; color: var(--txt); }
.lms h3 { letter-spacing: -.015em; color: var(--txt); }
.lms .intro { font-size: clamp(16px, 2vw, 18.5px); color: var(--txt-2); line-height: 1.7; max-width: 60ch; margin-top: 15px; }
.lms .sec-head { max-width: 720px; margin-bottom: 44px; }
.lms .tag { color: var(--cyan); }

.lms i.ph { display: inline-block; line-height: 1; font-size: 20px; }

/* ---------- app bar ---------- */
.lms .appbar {
    background: rgba(5, 14, 32, .82);
    border-bottom: 1px solid var(--edge);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.lms .appbar img { height: 25px; }
.lms .appbar .icon-btn:hover { background: rgba(255, 255, 255, .13); }
.lms .appbar .icon-btn i.ph { font-size: 19px; }
.appbar-live {
    display: none;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--edge);
    background: rgba(255, 255, 255, .05);
    color: var(--txt);
    font-weight: 500;
    font-size: 14.5px;
    transition: background .2s, border-color .2s;
}
.appbar-live:hover { background: rgba(255, 255, 255, .12); border-color: var(--edge-2); }
.appbar-live i.ph { font-size: 16px; color: var(--cyan); }

/* ---------- hero ----------
   Fills the first screen under the 64px sticky bar and centres its content in
   whatever is left. Padding is symmetrical, so a short hero on a laptop is not
   pinned to the top with the next section already showing underneath. svh
   rather than vh, so a phone's collapsing address bar does not resize it. */
.lhero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
    padding: 56px 0;
    background: var(--d1);
    overflow: hidden;
}
.lhero > .wrap { width: 100%; }
.lhero-bg {
    position: absolute;
    inset: 0;
    background: url('/uploads/website-images/lms-pattern.webp') center 28%/cover no-repeat;
    opacity: .34;
    pointer-events: none;
}
/* UNIFORM SCRIM. Every overlaid image on this page is darkened by the same flat
   amount across its whole width - no side is lighter than another. The only
   variation allowed is the last stretch fading into the section ground. */
.lhero-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(5, 14, 32, .88) 0%,
        rgba(5, 14, 32, .88) 70%,
        rgba(5, 14, 32, .94) 87%,
        var(--d0) 100%);
    pointer-events: none;
}
/* grid at every width, so the stacked phone layout always keeps a gap between
   the copy and the signal panel instead of letting them touch */
.lhero-in { position: relative; z-index: 2; display: grid; gap: 44px; }

/* the product name, stated once above the headline */
.lhero-product {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 22px 0 0;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .01em;
    color: rgba(234, 240, 248, .55);
}
.lhero-product::after {
    content: "";
    flex: 1;
    height: 1px;
    max-width: 120px;
    background: linear-gradient(90deg, var(--edge-2), transparent);
}
.lhero-product span { color: #fff; }

.lhero h1 {
    font-size: clamp(36px, 6.6vw, 62px);
    line-height: 1.06;
    letter-spacing: -.045em;
    margin: 14px 0 0;
    max-width: 22ch;
    color: #fff;
}
/* the first line is the setup, the second is the claim */
.lhero h1 span { color: var(--cyan); }
.lhero-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; max-width: 460px; }
.lhero-cta .btn i.ph { font-size: 18px; }

/* ---------- hero signal panel: the mechanism, in miniature ---------- */
.signal-wrap { position: relative; }
.signal-wrap::before {
    content: "";
    position: absolute;
    inset: -14% -8%;
    background: radial-gradient(closest-side, rgba(0, 184, 212, .28), transparent 72%);
    filter: blur(24px);
    pointer-events: none;
}
/* The pattern behind the hero is deliberately bright, so this card carries its
   own opaque ground. A translucent panel here left the text unreadable. */
.signal-card {
    position: relative;
    border-radius: 22px;
    padding: 24px 22px 20px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .015)),
        linear-gradient(180deg, rgba(6, 18, 40, .95), rgba(5, 14, 32, .92));
    border: 1px solid var(--edge-2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .2),
        0 34px 70px -34px rgba(0, 0, 0, .85);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.sc-k {
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 18px;
}
.sc-row {
    display: grid;
    grid-template-columns: 1fr 20px auto;
    gap: 12px;
    align-items: center;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, .11);
}
.sc-row:first-of-type { border-top: 0; padding-top: 0; }
.sc-trigger {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #F0A58C;
    line-height: 1.35;
}
.sc-arrow { color: rgba(0, 184, 212, .75); font-size: 15px; display: grid; place-items: center; }
.sc-desk {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    letter-spacing: -.015em;
    color: #fff;
    white-space: nowrap;
}
.sc-desk i.ph { font-size: 17px; color: var(--cyan); }
.sc-foot {
    margin: 18px -22px -20px;
    padding: 15px 22px;
    border-top: 1px solid rgba(255, 255, 255, .11);
    background: rgba(0, 184, 212, .09);
    border-radius: 0 0 22px 22px;
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -.01em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sc-foot i.ph { font-size: 18px; color: var(--cyan); flex: 0 0 auto; }

/* ---------- commerce: same system, retail imagery ----------
   The LMS page's backgrounds are a mosque lattice and a madrasah interior,
   which say nothing about selling online. Only the three image sources change;
   every other token, spacing and component stays shared. */
body.lms.commerce .lhero-bg,
body.lms.commerce .closing::before {
    background-image: url('/uploads/website-images/commerce-pattern.webp');
    background-position: center 42%;
}
body.lms.commerce .sec.g-lattice::after {
    background-image: url('/uploads/website-images/commerce-lattice.webp');
}

/* live counters sitting on the hero floor */
.hstrip {
    position: relative;
    z-index: 2;
    margin-top: 52px;
    padding-top: 28px;
    border-top: 1px solid var(--edge);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 18px;
}
.hstrip div b {
    display: block;
    font-family: "Sora", sans-serif;
    font-size: clamp(24px, 4.4vw, 34px);
    font-weight: 700;
    letter-spacing: -.035em;
    color: #fff;
    line-height: 1;
}
.hstrip div span {
    display: block;
    margin-top: 8px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txt-3);
    line-height: 1.4;
}
.hstrip-note { grid-column: 1 / -1; font-size: 13px; color: var(--txt-3); }

/* ---------- panels ---------- */
.panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
    border: 1px solid var(--edge);
    border-radius: 18px;
    padding: 26px 24px;
}

/* ---------- problems: a before / after case panel ----------
   The left half is the institute without the system - neutral, dim, no accent.
   The right half is what the platform does - lifted ground, cyan, an icon.
   The contrast between the two halves is the whole point of the section, so
   nothing on the left is allowed to carry the accent colour. */
.probs { display: grid; gap: 16px; }
.pcase {
    position: relative;
    display: grid;
    border: 1px solid var(--edge);
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008));
    transition: border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.pcase:hover {
    border-color: rgba(0, 184, 212, .34);
    transform: translateY(-2px);
    box-shadow: 0 26px 54px -34px rgba(0, 0, 0, .9);
}

/* left: the complaint */
.pcase-was { position: relative; overflow: hidden; padding: 28px 24px; }
.pcase-n {
    position: absolute;
    right: 14px;
    bottom: -22px;
    font-family: "Sora", sans-serif;
    font-size: 96px;
    font-weight: 700;
    letter-spacing: -.06em;
    line-height: 1;
    color: rgba(255, 255, 255, .055);
    pointer-events: none;
    user-select: none;
}
.pcase-k {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.pcase-k i.ph { font-size: 14px; }
.pcase-q {
    position: relative;
    margin: 14px 0 0;
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(18.5px, 2.7vw, 24px);
    letter-spacing: -.028em;
    line-height: 1.32;
    color: var(--txt);
    max-width: 23ch;
}

/* the hinge between the two halves */
.pcase-arrow {
    position: relative;
    z-index: 3;
    justify-self: center;
    margin: -18px 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--d1);
    border: 1px solid rgba(0, 184, 212, .4);
    color: var(--cyan);
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.pcase-arrow i.ph { font-size: 17px; transform: rotate(90deg); }
.pcase:hover .pcase-arrow { background: var(--cyan); border-color: var(--cyan); color: #04222B; }

/* right: what the system does */
.pcase-now {
    position: relative;
    padding: 28px 24px;
    background: rgba(255, 255, 255, .045);
    border-top: 1px solid var(--edge);
}
.pcase-nh { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.pcase-ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    color: var(--cyan);
    background:
        radial-gradient(120% 120% at 30% 0%, rgba(0, 184, 212, .24), rgba(0, 184, 212, .05) 70%),
        rgba(255, 255, 255, .03);
    border: 1px solid rgba(0, 184, 212, .26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.pcase-ico i.ph { font-size: 24px; }
.pcase:hover .pcase-ico {
    transform: translateY(-2px);
    border-color: rgba(0, 184, 212, .52);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px -14px rgba(0, 184, 212, .7);
}
.pcase-desk {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan);
}
.pcase-a { margin: 0; font-size: 15.2px; color: var(--txt-2); line-height: 1.7; }
.pcase-a b { color: #fff; font-weight: 600; }
.pcase-proof {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(0, 184, 212, .1);
    border: 1px solid rgba(0, 184, 212, .22);
    border-radius: 999px;
    padding: 7px 14px;
}

/* ---------- diagram shell ---------- */
.diagram {
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    border: 1px solid var(--edge);
    border-radius: 20px;
    padding: 24px 20px 20px;
}
.diagram-k {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cyan);
    display: block;
    margin-bottom: 16px;
}
.diagram svg { width: 100%; height: auto; display: block; overflow: visible; }

/* On a phone a 780-wide viewBox squeezed into 300px makes the labels
   illegible, so the diagram scrolls sideways at a readable size instead. */
.dg-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
}
@media (min-width: 768px) {
    .dg-scroll { scrollbar-width: none; }
    .dg-scroll::-webkit-scrollbar { display: none; }
}
@media (max-width: 767px) {
    /* a phone cannot render a 780-unit viewBox at 300px and stay legible, so the
       diagram keeps its size and the rail scrolls instead of being cut off */
    .dg-scroll {
        padding-bottom: 12px;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 184, 212, .55) rgba(255, 255, 255, .07);
    }
    .dg-scroll::-webkit-scrollbar { display: block; height: 5px; }
    .dg-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, .07); border-radius: 999px; }
    .dg-scroll::-webkit-scrollbar-thumb { background: rgba(0, 184, 212, .55); border-radius: 999px; }
    .dg-scroll svg { min-width: 430px; }
    .diagram-wide .dg-scroll svg { min-width: 700px; }
}
.dg-hint {
    display: none;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txt-3);
}
.dg-hint i.ph { font-size: 14px; color: var(--cyan); }
/* NOTE: this has to come AFTER the base rule above. When it sat inside the
   earlier media block the later "display: none" won at equal specificity and
   the hint never appeared at any width. */
@media (max-width: 767px) { .dg-hint { display: flex; } }

/* SVG diagram primitives */
.dg-node { fill: var(--d2); stroke: var(--edge-2); stroke-width: 1; }
.dg-node-hero { fill: var(--cyan); stroke: none; }
.dg-label { font-family: "Sora", sans-serif; font-size: 13px; font-weight: 600; fill: #fff; }
.dg-label-dark { fill: #04222B; }
.dg-sub { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: .08em; fill: rgba(234, 240, 248, .55); text-transform: uppercase; }
.dg-sub-dark { fill: rgba(4, 34, 43, .72); }
.dg-link { fill: none; stroke: rgba(0, 184, 212, .5); stroke-width: 1.6; stroke-linecap: round; }
.dg-link-dash { stroke-dasharray: 4 6; }
.dg-ico { font-size: 15px; fill: var(--cyan); }
/* the point where a connector meets its node, so the join reads as a contact */
.dg-port { fill: var(--cyan); }

/* Draw-in on reveal. NOTE: .diagram carries .rv itself, so these must be
   ".diagram.in X" - a descendant selector like ".rv.in .diagram X" never
   matches and leaves every node stuck at opacity 0. */
/* Every connector carries pathLength="1", so the dash is measured in path
   fractions rather than user units. A fixed dasharray (300) left the longer
   curves short of their node - the line simply stopped in mid-air. */
.diagram .dg-link { stroke-dasharray: 1; stroke-dashoffset: 1; }
.diagram.in .dg-link { animation: dgdraw 1.1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms + .1s); }
.diagram .dg-link-dash { stroke-dasharray: 4 6; stroke-dashoffset: 0; }
.diagram.in .dg-link-dash { animation: dgflow 1.4s linear infinite; }
@keyframes dgdraw { to { stroke-dashoffset: 0; } }
@keyframes dgflow { to { stroke-dashoffset: -20; } }
.diagram .dg-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.diagram.in .dg-pop { animation: dgpop .5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes dgpop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

/* diagrams sit two-up on wide screens */
/* minmax(0, 1fr), not 1fr: an implicit auto track takes its size from the
   widest thing inside it, and the min-width we put on the diagram SVGs was
   stretching the whole column to 464px inside a 354px phone, which cut the
   cards off with nothing to scroll. */
.diag-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }

/* Same guard for every other grid on the page. A 1fr track is minmax(auto, 1fr)
   and that auto floor is the item's min-content width, so one wide child can
   push a whole column past the screen. Resetting the item minimum stops it. */
.diag-grid > *, .hstrip > *, .prog-grid > *, .bento > *, .incl-grid > *,
.feats > *, .proof-nums > *, .probs > *, .fee-grid > *, .fee-lower > *,
.split2 > *, .split2-narrow > *, .steps-2 > *, .closing-in > *, .refer > *,
.modal > *, .pcase > *, .lhero-in > * { min-width: 0; }

/* ---------- degree level: programme cards ---------- */
.prog-grid { display: grid; gap: 14px; margin-top: 26px; }
.prog {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
    border: 1px solid var(--edge);
    border-radius: 18px;
    padding: 26px 24px;
    transition: border-color .25s ease, transform .25s var(--ease);
}
.prog:hover { border-color: rgba(0, 184, 212, .4); transform: translateY(-3px); }
.prog-ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(0, 184, 212, .12);
    border: 1px solid rgba(0, 184, 212, .2);
    color: var(--cyan);
    margin-bottom: 18px;
}
.prog-ic i.ph { font-size: 22px; }
.prog-len {
    display: block;
    font-family: "Sora", sans-serif;
    font-size: clamp(28px, 5vw, 38px);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    color: #fff;
}
.prog h3 {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--cyan);
    margin: 12px 0 14px;
}
.prog p { font-size: 14.6px; color: var(--txt-2); line-height: 1.65; margin: 0; }
.prog.accent {
    background: linear-gradient(140deg, rgba(0, 184, 212, .2), rgba(0, 184, 212, .05));
    border-color: rgba(0, 184, 212, .36);
}
.prog.accent .prog-ic { background: rgba(0, 184, 212, .2); }
.deg-feats { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--edge); }

/* ---------- fee collection ---------- */
.fee-feats { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--edge); }

/* ---------- retention and referral ---------- */
.refer {
    position: relative;
    display: grid;
    gap: 26px;
    margin-top: 26px;
    padding: 32px 28px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(0, 184, 212, .16), rgba(255, 255, 255, .02) 62%);
    border: 1px solid rgba(0, 184, 212, .3);
}
.refer::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 184, 212, .22), transparent 66%);
    pointer-events: none;
}
.refer-l { position: relative; }
.refer-ic {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(0, 184, 212, .2);
    border: 1px solid rgba(0, 184, 212, .34);
    color: var(--cyan);
    margin-bottom: 20px;
}
.refer-ic i.ph { font-size: 26px; }
.refer-l h3 { font-size: clamp(20px, 3vw, 25px); margin: 0 0 13px; letter-spacing: -.025em; max-width: 20ch; }
.refer-l p { font-size: 15.2px; color: var(--txt-2); line-height: 1.7; margin: 0; max-width: 46ch; }
.refer-r { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.refer-r li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 13px;
    align-items: start;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.refer-r li:first-child { border-top: 0; padding-top: 0; }
.refer-r i.ph { font-size: 18px; color: var(--cyan); margin-top: 2px; }
.refer-r b { display: block; font-family: "Sora", sans-serif; font-weight: 600; font-size: 15.3px; letter-spacing: -.01em; color: #fff; margin-bottom: 4px; }
.refer-r span { font-size: 14.2px; color: var(--txt-2); line-height: 1.6; }

.stay-head { margin-top: 46px; padding-top: 32px; border-top: 1px solid var(--edge); }
.stay-head h3 { font-size: clamp(19px, 3vw, 25px); margin: 0; max-width: 34ch; letter-spacing: -.02em; }
.stay-feats { margin-top: 26px; }

/* ---------- the supervisor's week ---------- */
.week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 20px; }
.week-days div {
    text-align: center;
    padding: 12px 4px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--edge);
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--txt-3);
}
.week-days div.mark { background: rgba(0, 184, 212, .16); border-color: rgba(0, 184, 212, .4); color: var(--cyan); }
.week-days div b { display: block; font-family: "Sora", sans-serif; font-size: 13px; color: #fff; margin-bottom: 4px; letter-spacing: -.01em; }
.week-days div.mark b { color: var(--cyan); }
.risk { display: grid; gap: 10px; }
.risk-row { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; font-size: 14.2px; color: var(--txt-2); line-height: 1.5; }
.risk-tag {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    border-radius: 7px;
    color: #06131f;
    font-weight: 600;
}
.risk-row b { color: #fff; font-weight: 600; }

@media (min-width: 1000px) {
    .diag-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
}

/* ---------- fee ladder diagram ---------- */
.ladder { display: grid; gap: 10px; }
.rung {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--edge);
    border-left: 3px solid var(--step, var(--cyan));
    border-radius: 12px;
    padding: 16px 18px;
}
/* the tile picks up the step colour so the stage reads at a glance; a flat
   white-on-dark tile left these icons almost invisible */
.rung-n {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--step, var(--cyan)) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--step, var(--cyan)) 42%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    display: grid;
    place-items: center;
    color: var(--step, var(--cyan));
}
.rung-n i.ph { font-size: 21px; }
/* scoped to the text column. ".rung span" also matched the icon tile, which is
   a span, and being more specific it overrode its display:grid with block, so
   the glyph sat in the top-left corner instead of the centre. */
.rung > div > b { display: block; font-family: "Sora", sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 3px; }
.rung > div > span { display: block; font-size: 14.2px; color: var(--txt-2); line-height: 1.5; }
.ladder-out {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 15px 18px;
    border-radius: 12px;
    background: rgba(0, 184, 212, .1);
    border: 1px solid rgba(0, 184, 212, .25);
    font-size: 14.5px;
    color: var(--txt);
    line-height: 1.5;
}
.ladder-out i.ph { font-size: 20px; color: var(--cyan); flex: 0 0 auto; }

/* ---------- vertical flow: the mechanism diagrams, in HTML ----------
   These used to be SVG with a fixed viewBox, which meant a sideways scroll on
   a phone. As a flow they reflow instead, and can never be cut off. */
.flow { display: grid; }
.fstep {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 13px 0;
}
/* the rail that joins one step to the next */
.fstep::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(0, 184, 212, .45), rgba(0, 184, 212, .22));
}
.fstep:first-child::before { top: 35px; }
.fstep:last-child::before { bottom: calc(100% - 35px); }
.fstep-ic {
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    color: var(--cyan);
    background:
        radial-gradient(120% 120% at 30% 0%, rgba(0, 184, 212, .2), rgba(0, 184, 212, .05) 70%),
        var(--d1);
    border: 1px solid rgba(0, 184, 212, .28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.fstep-ic i.ph { font-size: 21px; }
.fstep-ic.accent { background: var(--cyan); border-color: var(--cyan); color: #04222B; box-shadow: 0 8px 22px -12px rgba(0, 184, 212, .9); }
.fstep-ic.warn { background: rgba(232, 139, 111, .16); border-color: rgba(232, 139, 111, .45); color: #E88B6F; }
.fstep-b { padding-top: 1px; }
.fstep-k {
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--txt-3);
    margin-bottom: 5px;
}
.fstep.is-warn .fstep-k { color: #E88B6F; }
.fstep-b b {
    display: block;
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -.02em;
    color: #fff;
}
.fstep-d { display: block; margin-top: 6px; font-size: 14.2px; color: var(--txt-2); line-height: 1.6; }
.fsplit { display: grid; gap: 7px; margin-top: 11px; }
.fsplit span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--edge);
    font-size: 13.4px;
    color: var(--txt-2);
}
.fsplit i.ph { font-size: 15px; color: var(--cyan); flex: 0 0 auto; }

/* ---------- module tiles ---------- */
.bento { display: grid; gap: 14px; }
.tile {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
    border: 1px solid var(--edge);
    border-radius: 18px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    transition: border-color .25s ease, transform .25s var(--ease), background .25s ease;
}
.tile:hover { border-color: rgba(0, 184, 212, .4); transform: translateY(-3px); }
.tile-ic {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: rgba(0, 184, 212, .12);
    border: 1px solid rgba(0, 184, 212, .2);
    color: var(--cyan);
    display: grid;
    place-items: center;
    margin-bottom: 17px;
}
.tile-ic i.ph { font-size: 22px; }
.tile h3 { font-size: 17.5px; margin: 0 0 9px; }
.tile p { font-size: 14.6px; color: var(--txt-2); line-height: 1.65; margin: 0; }
.tile-stat { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .09); display: flex; align-items: baseline; gap: 10px; }
.tile-stat b { font-family: "Sora", sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.tile-stat span { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); line-height: 1.4; }

.tile.accent {
    background: linear-gradient(140deg, rgba(0, 184, 212, .2), rgba(0, 184, 212, .05));
    border-color: rgba(0, 184, 212, .36);
}
.tile.accent .tile-ic { background: rgba(0, 184, 212, .2); }

/* ---------- role desks ---------- */
.desk-bar { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.desk-bar::-webkit-scrollbar { display: none; }
.desk-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--edge);
    background: rgba(255, 255, 255, .045);
    color: var(--txt-2);
    border-radius: 999px;
    padding: 11px 18px;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, color .2s, border-color .2s;
}
.desk-tab i.ph { font-size: 17px; }
.desk-tab b { font-family: "IBM Plex Mono", monospace; font-size: 11px; font-weight: 500; opacity: .6; }
.desk-tab:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.desk-tab.on { background: var(--cyan); border-color: var(--cyan); color: #04222B; }
.desk-panel { display: none; }
.desk-panel.on { display: block; animation: dgpop .45s var(--ease); }
.desk-screens { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.desk-screens span {
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: .06em;
    color: var(--txt-2);
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--edge);
    border-radius: 8px;
    padding: 7px 12px;
}
.feats { display: grid; gap: 18px 34px; }
.feat { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.feat i.ph { font-size: 16px; color: var(--cyan); margin-top: 3px; }
.feat b { display: block; font-family: "Sora", sans-serif; font-weight: 600; font-size: 15.3px; letter-spacing: -.01em; margin-bottom: 3px; color: #fff; }
.feat span { font-size: 14.4px; color: var(--txt-2); line-height: 1.55; }

/* ---------- catalogue ---------- */
.cluster { padding: 26px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.cluster:first-child { border-top: 0; padding-top: 0; }
.cluster-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cluster-h i.ph { font-size: 21px; color: var(--cyan); }
.cluster-h h3 { font-size: 17px; margin: 0; }
.cluster-h span { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); margin-left: auto; }
.chips2 { display: flex; flex-wrap: wrap; gap: 8px; }
.chips2 span {
    background: rgba(255, 255, 255, .045);
    border: 1px solid var(--edge);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13.8px;
    color: var(--txt-2);
}

/* ---------- pricing ---------- */
.fee-main {
    position: relative;
    background: linear-gradient(150deg, rgba(0, 184, 212, .14), rgba(255, 255, 255, .02) 60%);
    border: 1px solid rgba(0, 184, 212, .3);
    border-radius: 20px;
    padding: 32px 28px;
    overflow: hidden;
}
.fee-main::after {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 184, 212, .28), transparent 66%);
}
.fee-big {
    position: relative;
    font-family: "Sora", sans-serif;
    font-size: clamp(54px, 12vw, 88px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    color: #fff;
}
.fee-of { position: relative; font-size: 16.5px; color: var(--txt-2); margin: 14px 0 0; line-height: 1.6; max-width: 40ch; }
.fee-note {
    position: relative;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13.8px;
    color: var(--txt-3);
    line-height: 1.65;
}
.fee-note sup { color: var(--cyan); font-weight: 700; }

.fee-setup { background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); border-radius: 20px; padding: 30px 26px; }
.fee-setup .amt2 { font-family: "Sora", sans-serif; font-size: clamp(36px, 7vw, 48px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #fff; }
.fee-setup .amt2 small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); font-weight: 500; margin-bottom: 12px; }
.fee-setup p { font-size: 15px; color: var(--txt-2); margin: 16px 0 0; line-height: 1.6; }
.fee-setup .btn { margin-top: 24px; }

.receipt { background: rgba(255, 255, 255, .035); border: 1px solid var(--edge); border-radius: 18px; padding: 26px 24px; }
.receipt h3 { font-size: 17px; margin: 0 0 20px; }
.receipt-line { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--txt-2); padding: 10px 0; }
.receipt-line b { color: #fff; font-weight: 600; }
.receipt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.receipt-total span { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); }
.receipt-total b { font-family: "Sora", sans-serif; font-size: 31px; font-weight: 700; letter-spacing: -.035em; color: var(--cyan); }
.receipt-foot { margin-top: 18px; font-size: 13.4px; color: var(--txt-3); line-height: 1.6; }

.fee-table { display: grid; }
.fee-tr { display: grid; grid-template-columns: 1fr auto 84px; gap: 14px; align-items: baseline; padding: 13px 0; }
.fee-tr + .fee-tr { border-top: 1px solid rgba(255, 255, 255, .07); }
.fee-tr.head { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-3); padding-bottom: 11px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.fee-tr span:first-child { color: var(--txt-2); font-size: 15px; }
.fee-tr b { font-family: "Sora", sans-serif; font-weight: 600; color: #fff; font-size: 15.5px; }
.fee-tr em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-3); text-align: right; }

.incl-grid { display: grid; gap: 16px; }
.incl { background: rgba(255, 255, 255, .035); border: 1px solid var(--edge); border-radius: 18px; padding: 26px 24px; }
.incl h3 { font-size: 16.5px; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.incl h3 i.ph { font-size: 20px; }
.incl.yes h3 i.ph { color: #3FD69B; }
.incl.no h3 i.ph { color: #E88B6F; }
.incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.incl li { font-size: 14.7px; color: var(--txt-2); line-height: 1.55; display: grid; grid-template-columns: 17px 1fr; gap: 11px; align-items: start; }
.incl li i.ph { font-size: 15px; margin-top: 2px; }
.incl.yes li i.ph { color: #3FD69B; }
.incl.no li i.ph { color: #E88B6F; }
.incl li b { color: #fff; font-weight: 600; }

/* ---------- rollout ---------- */
.steps { display: grid; }
.stepx { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .08); align-items: start; }
.stepx:first-child { border-top: 0; }
.stepx-n {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: rgba(0, 184, 212, .12);
    border: 1px solid rgba(0, 184, 212, .28);
    display: grid;
    place-items: center;
    font-family: "Sora", sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.02em;
    color: var(--cyan);
}
.stepx h3 { font-size: 18px; margin: 0 0 6px; }
.stepx p { font-size: 15px; color: var(--txt-2); margin: 0; line-height: 1.6; max-width: 50ch; }

/* ---------- proof ---------- */
.proof-shot {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--edge);
    aspect-ratio: 5 / 4;
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.proof-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 14, 32, .22), rgba(5, 14, 32, .22));
}
.proof-cap {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(5, 14, 32, .62);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    padding: 7px 13px;
}
.proof-cap i { font-size: 13px; color: var(--cyan); }
.proof-nums { display: grid; gap: 1px; background: var(--edge); border: 1px solid var(--edge); border-radius: 16px; overflow: hidden; margin-top: 28px; }
.proof-nums div { background: rgba(255, 255, 255, .035); padding: 20px 18px; }
.proof-nums b { display: block; font-family: "Sora", sans-serif; font-size: clamp(23px, 4.4vw, 32px); font-weight: 700; letter-spacing: -.035em; color: #fff; }
.proof-nums span { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); display: block; margin-top: 6px; }

/* ---------- atmosphere image band ---------- */
.band {
    position: relative;
    min-height: 260px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 64px 0;
    overflow: hidden;
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(5, 14, 32, .8), rgba(5, 14, 32, .8)),
        linear-gradient(180deg, var(--d0), transparent 18%, transparent 82%, var(--d0));
}
.band .wrap { position: relative; z-index: 2; }
.band q {
    display: block;
    font-family: "Sora", sans-serif;
    font-weight: 600;
    font-size: clamp(21px, 3.8vw, 34px);
    letter-spacing: -.03em;
    line-height: 1.28;
    color: #fff;
    max-width: 20ch;
    margin: 0 auto;
    quotes: none;
    /* the scrim behind this band is deliberately light, so the type carries
       its own contrast */
    text-shadow: 0 2px 18px rgba(5, 14, 32, .85);
}
.band cite {
    display: block;
    margin-top: 18px;
    font-style: normal;
    font-family: "IBM Plex Mono", monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cyan);
    text-shadow: 0 2px 14px rgba(5, 14, 32, .9);
}

/* ---------- faq ---------- */
.lms .faq { background: rgba(255, 255, 255, .035); border-color: var(--edge); box-shadow: none; }
.lms .faq summary { color: #fff; font-size: 16px; }
.lms .faq summary::after { border-color: var(--txt-3); }
.lms .faq[open] summary { color: var(--cyan); }
.lms .faq-body { color: var(--txt-2); }

/* ---------- closing ---------- */
.closing { position: relative; padding: 84px 0; background: var(--d1); overflow: hidden; }
.closing::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/uploads/website-images/lms-pattern.webp') center/cover no-repeat;
    opacity: .34;
}
.closing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 14, 32, .88), rgba(5, 14, 32, .88));
}
.closing .wrap { position: relative; z-index: 2; }
.closing h2 { max-width: 17ch; }
.closing p { color: var(--txt-2); font-size: 17px; line-height: 1.65; max-width: 50ch; margin: 18px 0 0; }
.closing-cta { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; max-width: 440px; }
.closing-call { display: inline-flex; align-items: center; gap: 14px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--edge); color: #fff; }
.closing-call i.ph { font-size: 27px; color: var(--cyan); }
.closing-call small { display: block; font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 6px; }
.closing-call b { font-family: "Sora", sans-serif; font-size: clamp(21px, 4vw, 30px); font-weight: 700; letter-spacing: -.03em; }

.lms .foot { background: var(--d0); border-top: 1px solid var(--edge); }

/* mobile action bar, matched to the dark ground */
.lms .dock {
    background: rgba(8, 26, 53, .92);
    border-top: 1px solid var(--edge);
    box-shadow: 0 -10px 34px -18px rgba(0, 0, 0, .8);
}
.lms .dock .btn-wa { background: rgba(255, 255, 255, .07); border: 1px solid var(--edge); color: var(--txt); }
.lms .dock .btn-wa:hover { background: rgba(255, 255, 255, .14); }

/* The hero carries its own Book a demo button, so the dock stays down until
   that button has scrolled off. Without JS the dock is simply always there. */
.lms .dock { animation: none; transform: none; transition: transform .35s var(--ease); }
body.lms.dock-js .dock { transform: translateY(115%); }
body.lms.dock-js.dock-on .dock { transform: translateY(0); }

/* ---------- BOOK A DEMO: a two-panel dark dialog ----------
   landing.css ships this form on a white card. On a dark page that reads as a
   pasted-in widget, so everything below re-grounds it in the page's own theme:
   a branded rail on the left, the form on the right, dark fields throughout. */
.modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(2, 7, 16, .8);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
}
.modal {
    position: fixed;
    z-index: 90;
    left: 50%;
    top: 50%;
    width: min(900px, calc(100vw - 32px));
    max-height: min(92vh, 800px);
    overflow: hidden;
    display: grid;
    transform: translate(-50%, -46%) scale(.975);
    opacity: 0;
    visibility: hidden;
    transition: transform .34s var(--ease), opacity .26s ease, visibility .34s;
    border-radius: 24px;
    background: var(--d1);
    border: 1px solid var(--edge-2);
    box-shadow:
        0 60px 130px -40px rgba(0, 0, 0, .92),
        0 0 0 1px rgba(0, 184, 212, .07);
}
body.modal-open { overflow: hidden; }
body.modal-open .modal-scrim { opacity: 1; visibility: visible; }
body.modal-open .modal { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--edge);
    background: rgba(255, 255, 255, .06);
    color: var(--txt-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background .2s, color .2s, border-color .2s;
}
.modal-close:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: var(--edge-2); }
.modal-close i.ph { font-size: 18px; }
.modal-handle { display: none; }

/* left rail: who you are about to talk to, and what the call actually is */
.modal-aside { position: relative; background: var(--d0); overflow: hidden; }
.ma-bg {
    position: absolute;
    inset: 0;
    background: url('/uploads/website-images/lms-pattern.webp') center/cover no-repeat;
    opacity: .16;
    pointer-events: none;
}
.modal-aside::after {
    content: "";
    position: absolute;
    left: -30%;
    top: -25%;
    width: 130%;
    height: 90%;
    background: radial-gradient(closest-side, rgba(0, 184, 212, .3), transparent 72%);
    filter: blur(30px);
    pointer-events: none;
}
.ma-in { position: relative; z-index: 2; padding: 32px 28px; display: flex; flex-direction: column; height: 100%; }
.ma-brand { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.ma-brand img { height: 23px; width: auto; }
.ma-product {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid rgba(0, 184, 212, .3);
    background: rgba(0, 184, 212, .1);
    border-radius: 999px;
    padding: 5px 11px;
}
.ma-line {
    margin: 22px 0 0;
    font-family: "Sora", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.02em;
    color: #fff;
}
.ma-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
.ma-list li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; font-size: 14px; color: var(--txt-2); line-height: 1.5; }
.ma-list i.ph { font-size: 17px; color: var(--cyan); margin-top: 1px; }
.ma-foot { margin-top: auto; padding-top: 26px; display: grid; gap: 9px; }
.ma-k {
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--txt-3);
    padding-top: 20px;
    border-top: 1px solid var(--edge);
}
.ma-foot a { display: inline-flex; align-items: center; gap: 10px; color: var(--txt); font-size: 15px; font-weight: 500; transition: color .2s; }
.ma-foot a:hover { color: var(--cyan); }
.ma-foot a i.ph { font-size: 17px; color: var(--cyan); }

/* right: the form, re-grounded for the dark dialog */
.modal-main { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lms .modal .form-card {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 34px 32px;
    color: var(--txt);
}
/* the full pill lives here: landing.css has no .fc-tag rule of its own */
.lms .modal .form-card .fc-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "IBM Plex Mono", monospace;
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--cyan);
    background: rgba(0, 184, 212, .11);
    border: 1px solid rgba(0, 184, 212, .24);
    border-radius: 999px;
    padding: 7px 13px;
    margin-bottom: 16px;
}
.lms .modal .form-card .fc-tag i.ph { font-size: 14px; }
.lms .modal .form-card h3 {
    color: #fff;
    font-size: clamp(23px, 3.4vw, 28px);
    letter-spacing: -.03em;
    margin: 0 0 9px;
}
.lms .modal .form-card .fc-note { color: var(--txt-2); font-size: 14.5px; line-height: 1.6; margin-bottom: 24px; }

.lms .modal .form-row { display: grid; gap: 0 14px; }
.lms .modal .field { margin-bottom: 16px; }
.lms .modal .field label { color: var(--txt-3); font-size: 10px; letter-spacing: .15em; margin-bottom: 8px; }
/* background-COLOR, never the background shorthand: the shorthand would reset
   the select's chevron position and repeat, and the arrow would tile. */
.lms .modal .field input,
.lms .modal .field select {
    min-height: 54px;
    border-radius: 13px;
    background-color: rgba(255, 255, 255, .045);
    border: 1px solid var(--edge);
    color: var(--txt);
    font-size: 15.5px;
    transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.lms .modal .field input::placeholder { color: rgba(234, 240, 248, .3); }
.lms .modal .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300B8D4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
}
.lms .modal .field select option { background: var(--d2); color: var(--txt); }
.lms .modal .field input:focus,
.lms .modal .field select:focus {
    background-color: rgba(255, 255, 255, .08);
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(0, 184, 212, .16);
}
.lms .modal .field.has-error input,
.lms .modal .field.has-error select { border-color: #E88B6F; background-color: rgba(232, 139, 111, .09); }
.lms .modal .field .err { color: #E88B6F; font-size: 12.8px; }

.lms .modal .form-legal {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    text-align: left;
    color: var(--txt-3);
    font-size: 12.4px;
    margin-top: 16px;
}
.lms .modal .form-legal i.ph { font-size: 14px; color: var(--txt-3); margin-top: 1px; flex: 0 0 auto; }
.lms .modal #leadSubmit { margin-top: 6px; }

.lms .modal .form-success { padding: 18px 0 6px; }
.lms .modal .form-success h3 { color: #fff; margin-bottom: 10px; }
.lms .modal .form-success p { color: var(--txt-2); font-size: 15px; line-height: 1.65; }
.lms .modal .fs-icon {
    width: 66px;
    height: 66px;
    border-radius: 21px;
    background: rgba(63, 214, 155, .14);
    border: 1px solid rgba(63, 214, 155, .3);
    color: #3FD69B;
}

/* two panels once the dialog is wide enough to hold them */
@media (min-width: 760px) {
    .modal { grid-template-columns: .78fr 1.22fr; }
    .lms .modal .form-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 759px) {
    /* bottom sheet: the rail collapses to a branded header strip */
    .modal {
        left: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: none;
        max-height: 92vh;
        overflow-y: auto;
        transform: translateY(100%);
        border-radius: 22px 22px 0 0;
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    body.modal-open .modal { transform: translateY(0); }
    .modal-handle { display: block; width: 42px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .22); margin: 10px auto 0; }
    .modal-main { overflow: visible; }
    .ma-in { padding: 20px 20px 22px; }
    .ma-list, .ma-foot { display: none; }
    .ma-line { margin-top: 13px; font-size: 15px; }
    .lms .modal .form-card { padding: 26px 20px 24px; }
    .modal-close { top: 12px; right: 12px; width: 34px; height: 34px; }
}

/* ---------- reveal ---------- */
.lms .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s var(--ease); }
.lms .rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .lms .rv, .tile, .desk-tab, .modal, .modal-scrim { transition: none !important; }
    .lms .rv { opacity: 1; transform: none; }
    .diagram .dg-link { stroke-dashoffset: 0 !important; animation: none !important; }
    .diagram .dg-pop { opacity: 1 !important; animation: none !important; }
    .diagram .dg-link-dash { animation: none !important; }
}

/* ---------- breakpoints ---------- */

/* PHONE: treat the page like an app screen. One gutter, one rhythm, and a
   guaranteed gap between every stacked block so nothing sits on top of
   anything else. */
@media (max-width: 619px) {
    .lms .sec { padding: 58px 0; }
    .lms .sec-head { margin-bottom: 30px; }
    .lms .wrap { padding: 0 18px; }
    .lhero { padding: 44px 0; }
    .lhero h1 { font-size: 33px; line-height: 1.12; margin: 16px 0 0; }
    .hstrip { margin-top: 42px; padding-top: 26px; gap: 22px 16px; }

    .signal-card { padding: 20px 18px 18px; }
    .sc-foot { margin: 16px -18px -18px; padding: 14px 18px; }

    .diagram { padding: 20px 16px 16px; }
    .panel, .incl, .receipt, .tile, .prog { padding: 22px 18px; }
    .refer { padding: 24px 20px; gap: 22px; }
    .stay-head { margin-top: 36px; padding-top: 26px; }
    .fee-main { padding: 26px 20px; }
    .fee-setup { padding: 24px 20px; }
    .probs { gap: 14px; }
    .pcase-was, .pcase-now { padding: 24px 20px; }
    .pcase-n { font-size: 78px; bottom: -18px; }
    .stepx { grid-template-columns: 46px 1fr; gap: 15px; padding: 22px 0; }
    .stepx-n { width: 46px; height: 46px; border-radius: 13px; font-size: 18px; }
    .rung { padding: 15px 16px; gap: 14px; }
    .ladder-out { padding: 14px 16px; align-items: flex-start; }
    .proof-nums { margin-top: 24px; }
    .proof-nums div { padding: 18px 16px; }
    .cluster { padding: 22px 0; }
    .week-days { gap: 4px; }
    .week-days div { padding: 10px 2px; font-size: 10px; }
    .week-days div b { font-size: 12px; }
    .risk-row { grid-template-columns: 62px 1fr; gap: 11px; font-size: 13.8px; }
    .fee-tr { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
    .fee-tr em { grid-column: 2; text-align: right; }
    .fee-tr.head em { display: none; }

    /* ONE card gap for the whole phone layout, so no two boxes ever sit
       shoulder to shoulder with a hairline between them */
    .probs, .diag-grid, .bento, .prog-grid, .incl-grid, .diag-grid,
    .desk-screens + .feats { gap: 18px; }
    .ladder { gap: 12px; }
    .refer + .refer { margin-top: 18px; }

    /* vertical rhythm inside the stacked blocks */
    .feats { gap: 24px; }
    .deg-feats, .fee-feats { margin-top: 30px; padding-top: 26px; }
    .prog-grid, .refer { margin-top: 22px; }
    .stay-feats { margin-top: 22px; }
    .lhero-cta { margin-top: 28px; }
    .sec-head .intro { margin-top: 12px; }

    /* edge-to-edge rails: the gutter is 18px here, so the breakout matches it */
    .dg-scroll { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
    .desk-bar { margin: 0 -18px; padding: 2px 18px 18px; }

    .lms .appbar img { height: 22px; }
    .lms .appbar .icon-btn { width: 40px; height: 40px; }

    /* snap the horizontal rails, the way a native tab strip behaves */
    .desk-bar { scroll-snap-type: x proximity; }
    .desk-tab { scroll-snap-align: start; }
}

/* ---------- MOBILE OVERFLOW GUARD ----------
   .lms .sec clips its overflow so the decorative glows stay inside the section.
   That also means anything wider than the viewport is silently cut off with no
   way to scroll to it. A grid track of 1fr, and a flex item, both refuse to
   shrink below their content by default, which is what pushed rows past the
   edge on narrow phones. Resetting the minimum lets them shrink and wrap. */
@media (max-width: 899px) {
    /* block text only. Applying this to every b and span let a squeezed flex
       item snap a short word in half ("2 tracks" became "2 / track / s"). */
    .lms h1, .lms h2, .lms h3, .lms p, .lms li, .lms a { overflow-wrap: break-word; }

    .sc-row, .risk-row, .stepx, .rung, .feat, .incl li, .fee-tr, .refer-r li,
    .ma-list li, .pcase, .cluster-h, .receipt-line, .hstrip div,
    .ladder-out, .fstep, .fsplit span, .foot-links { min-width: 0; }

    .sc-row > *, .risk-row > *, .stepx > *, .rung > *, .feat > *, .incl li > *,
    .fee-tr > *, .refer-r li > *, .ma-list li > *, .cluster-h > *,
    .receipt-line > *, .hstrip div > *, .ladder-out > * { min-width: 0; }

    /* figures never break: they keep their own width and the label wraps */
    .tile-stat { flex-wrap: wrap; }
    .tile-stat b, .hstrip div b, .proof-nums b, .receipt-total b { flex: none; white-space: nowrap; overflow-wrap: normal; }
    .tile-stat span { min-width: 0; white-space: normal; }
    .pcase-proof { white-space: normal; }

    /* seven cells sized to fit a 320px screen rather than needing a scroll */
    .week-days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
    .week-days div { padding: 10px 1px; font-size: 9.5px; letter-spacing: 0; }
    .week-days div b { font-size: 11.5px; }
    .desk-bar { scrollbar-width: none; }

    /* anchors must not land under the sticky app bar */
    html { scroll-padding-top: 76px; }
}

@media (min-width: 620px) {
    .lhero-cta, .closing-cta { flex-direction: row; }
    .lhero-cta .btn, .closing-cta .btn { flex: 1; }
    .hstrip { grid-template-columns: repeat(3, 1fr); }
    .prog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .incl-grid { grid-template-columns: 1fr 1fr; }
    .feats { grid-template-columns: 1fr 1fr; }
    .proof-nums { grid-template-columns: repeat(3, 1fr); }
}

/* the case panel opens into two halves once there is room for both */
@media (min-width: 900px) {
    .pcase { grid-template-columns: .94fr 1.06fr; align-items: stretch; }
    .pcase-was, .pcase-now { padding: 32px 30px; }
    .pcase-now { border-top: 0; border-left: 1px solid var(--edge); }
    .pcase-arrow {
        position: absolute;
        left: 47%;
        top: 50%;
        margin: -18px 0 0 -18px;
        justify-self: auto;
    }
    .pcase-arrow i.ph { transform: none; }
    .pcase-n { font-size: 112px; right: 22px; }
}

@media (min-width: 1000px) {
    .lms .sec { padding: 112px 0; }
    .lms .sec-head { margin-bottom: 56px; }
    .appbar-live { display: inline-flex; }
    .lhero { padding: 72px 0; }
    .lhero-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
    .lhero h1 { font-size: clamp(46px, 5vw, 66px); }
    .hstrip { grid-template-columns: repeat(5, 1fr); margin-top: 64px; }
    .hstrip-note { grid-column: 1 / -1; }

    .split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
    .split2-narrow { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: start; }
    .bento { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .bento .tile.wide { grid-column: span 2; }
    .fee-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 20px; align-items: start; }
    .fee-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; align-items: start; }
    .closing-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
    .steps-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 52px; }
    .steps-2 .stepx:nth-child(2) { border-top: 0; }
    .fee-feats { grid-template-columns: repeat(3, 1fr); gap: 26px 34px; }
    .stay-feats { grid-template-columns: repeat(4, 1fr); gap: 24px 30px; }
    .prog-grid { grid-template-columns: repeat(4, 1fr); }
    .refer { grid-template-columns: 1fr 1fr; gap: 48px; padding: 38px 36px; align-items: center; }
}