/*
 * Marketing site — the public landing page at the application root.
 *
 * Deliberately self-contained: it shares the product's colour family (the admin orange, a warm gold) but
 * none of the admin or customer stylesheets, so a change to an operational screen can never reshape the
 * public site, and the page ships without Bootstrap. Everything is scoped under .m-page.
 */

/* ---------------------------------------------------------------- reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* This stylesheet is only loaded by the marketing layout, so styling the root here is safe.
   overflow-x is `clip`, never `hidden`: `hidden` turns the element into a scroll container, which
   silently breaks position:sticky on the header. `clip` contains stray overflow without that cost. */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: clip;
}

body.m-page {
    margin: 0;
    background: var(--m-bg);
    color: var(--m-text);
    font-family: var(--m-font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

.m-page img {
    max-width: 100%;
    display: block;
}

/* Every selector in this reset is wrapped in :where() so it contributes NOTHING to specificity, leaving
   the whole block at the weight of `.m-page` alone.
   This is load-bearing, not a style preference. Written plainly, `.m-page p { margin: 0 }` scores one
   class + one element and quietly outranks every single-class component rule — `.m-pain__fix`,
   `.m-lede`, `.m-card__text`, `.m-pillar__list` and a dozen more all declared a margin that never
   applied, because a component class scores one class and nothing else. The page had been rendering
   with those gaps collapsed to zero: dividers sat against descenders and sub-headings against their
   headings. With :where(), the reset still wipes the browser defaults but loses to anything that comes
   after it, which is what a reset is supposed to do.
   Do not unwrap these selectors. If a reset entry ever needs to beat a component, fix the component. */
.m-page :where(h1, h2, h3, h4, p, ul, ol, figure) {
    margin: 0;
}

.m-page :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.m-page :where(a) {
    color: inherit;
    text-decoration: none;
}

.m-page :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.m-page :focus-visible {
    outline: 2px solid var(--m-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Announced to screen readers, never painted. */
.m-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Keyboard-only bypass link — off-canvas until it takes focus. */
.m-skip {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
    padding: 10px 18px;
    border-radius: var(--m-r-pill);
    background: var(--m-accent);
    color: #14060a;
    font-weight: 650;
    transform: translateY(-200%);
    transition: transform 0.18s var(--m-ease);
}

.m-skip:focus {
    transform: none;
}

/* ---------------------------------------------------------------- tokens */

/* The page is light, on warm paper rather than white. A pure #fff sheet under a hospitality product reads
   like a spreadsheet; the warm neutrals below keep the appetite cues of the orange and gold without the
   page ever looking tinted. Cards stay true white so they lift off the paper without needing heavy borders.

   Every colour below is a token because the phone mock in the hero deliberately stays dark — it is a
   picture of the customer app, which is a dark product — and the only way that stays honest is if page
   chrome and device screen never share a value. */
.m-page {
    --m-bg: #faf8f5;
    --m-bg-soft: #f2ede6;
    --m-surface: #ffffff;
    --m-surface-2: #f6f2ec;
    --m-line: #e7e0d6;
    --m-line-strong: #d5cbbd;

    /* Three text tiers, all of which have to survive being read on a phone in daylight. Measured on the
       worst of the three backgrounds they sit on (--m-bg-soft) these are 15.9:1, 6.3:1 and 4.9:1.
       --m-bg-soft is the one that governs: it backs the footer and the alternating sections, and the
       faint tier is what the footer is set in. At #756d64 that combination measured 4.4:1 and failed AA,
       so the tier is two steps darker than the dark theme's equivalent. Do not lighten it. */
    --m-text: #17130f;
    --m-muted: #5c554d;
    --m-faint: #6e665d;

    /* Two orange stops, and the distinction matters. --m-accent fills (buttons, pills, dots) where the
       colour is the background and contrast comes from the ink on top of it. --m-accent-ink is for the
       accent used AS text: the fill orange measures 2.9:1 on white and fails at the label sizes it is
       used at, while the ink stop clears 4.5:1. Same rule for gold, which is worse on light still. */
    --m-accent: #ef6620;
    --m-accent-ink: #b4470f;
    --m-accent-soft: rgba(239, 102, 32, 0.12);
    --m-gold: #e0a92a;
    --m-gold-ink: #8f6408;

    /* Both of these are used as text — the green on the saving figure and the inclusion ticks, the red on
       the cost-of-the-problem line — so they are set at text strength, not at the vivid values the dark
       theme could afford. The dark theme's #35d08a and #f2555a measure 3.8:1 and 4.2:1 on paper. */
    --m-green: #0c7a4c;
    --m-red: #bd322c;

    /* Raised-surface fills. On the dark theme these were white films at 2-5%; on paper they are warm
       ink films at the same weights, so a card, a chip and a hover state all still separate from the
       page by one step without any of them needing a heavier border. */
    --m-wash: rgba(23, 19, 15, 0.028);
    --m-wash-2: rgba(23, 19, 15, 0.05);
    --m-hover: rgba(23, 19, 15, 0.04);
    --m-card-bg: linear-gradient(180deg, #ffffff, #fdfbf9);
    --m-glass: rgba(250, 248, 245, 0.82);
    --m-float-bg: rgba(255, 255, 255, 0.9);

    /* Warm-tinted rather than neutral black: a grey shadow over cream turns the paper muddy. */
    --m-shadow-sm: 0 1px 2px rgba(23, 19, 15, 0.05);
    --m-shadow-md: 0 2px 4px rgba(23, 19, 15, 0.04), 0 10px 28px rgba(23, 19, 15, 0.06);
    --m-shadow-lg: 0 4px 8px rgba(23, 19, 15, 0.05), 0 24px 60px rgba(23, 19, 15, 0.10);

    /* Three faces, each with one job. Inter sets everything by default; the other two are opt-in and are
       applied in exactly the places listed against them below — a display face used for body copy is what
       makes a marketing page feel like a poster instead of a product. The platform stack trails each one
       so a failed font request degrades to a readable page rather than a broken one. */
    --m-font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* H1 and H2 only. */
    --m-font-display: 'Manrope', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Strap lines and section kickers only — the brand voice above a headline. Not UI micro-labels:
       footer column heads, module titles and the "includes" label are interface, and stay on Inter. */
    --m-font-tagline: 'Montserrat', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --m-r-sm: 10px;
    --m-r-md: 16px;
    --m-r-lg: 24px;
    --m-r-xl: 32px;
    --m-r-pill: 999px;

    /* Spacing scale. Every margin, padding and gap on this page comes from one of these ten steps —
       before this the page used 18, 20, 22, 26, 30, 34, 40, 44, 52 and 56px, near-duplicates that no
       one could hold in their head and that made two supposedly matching gaps differ by 2px. If a new
       value is needed, round to the nearest step rather than adding an eleventh. */
    --m-s-1: 4px;
    --m-s-2: 8px;
    --m-s-3: 12px;
    --m-s-4: 16px;
    --m-s-5: 20px;
    --m-s-6: 24px;
    --m-s-7: 32px;
    --m-s-8: 40px;
    --m-s-9: 56px;
    --m-s-10: 80px;

    /* Section rhythm, fluid rather than stepped. These used to be fixed at 112/80px and then overridden
       at three separate breakpoints, so changing the page's rhythm meant editing four places and the
       gaps jumped at each one. A clamp does it in a single declaration that scales continuously. */
    --m-section-y: clamp(68px, 8.5vw, 112px);
    --m-section-y-tight: clamp(56px, 6.5vw, 80px);
    --m-head-gap: clamp(40px, 4.5vw, 56px);

    /* Height of the sticky header. Anchor offsets below derive from it, so the two can never drift —
       before this the bar was 70px and the offset a bare 86px, and changing one silently broke the other. */
    --m-nav-h: 78px;

    --m-shell: 1180px;
    --m-gutter: 24px;

    --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------- layout */

.m-shell {
    width: 100%;
    max-width: var(--m-shell);
    margin: 0 auto;
    padding: 0 var(--m-gutter);
}

.m-section {
    position: relative;
    padding: var(--m-section-y) 0;
}

/* Anchor jumps must land below the sticky header, not behind it. */
.m-section[id],
.m-final[id],
#main {
    scroll-margin-top: calc(var(--m-nav-h) + var(--m-s-4));
}

.m-section--tight {
    padding: var(--m-section-y-tight) 0;
}

.m-section--alt {
    background: var(--m-bg-soft);
    border-top: 1px solid var(--m-line);
    border-bottom: 1px solid var(--m-line);
}

.m-head {
    max-width: 720px;
    margin: 0 auto var(--m-head-gap);
    text-align: center;
}

.m-head--left {
    margin-left: 0;
    text-align: left;
}

.m-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: var(--m-s-5);
    border: 1px solid var(--m-line-strong);
    border-radius: var(--m-r-pill);
    background: var(--m-wash);
    /* Montserrat is wider than Inter at the same size, so the tracking comes in slightly — the old 0.09em
       was compensating for a narrower face and would have pulled these labels apart. */
    font-family: var(--m-font-tagline);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    color: var(--m-muted);
}

.m-eyebrow__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-accent);
    box-shadow: 0 0 0 4px var(--m-accent-soft);
}

/* ---------------------------------------------------------------- type */

/* Manrope, and the tracking is looser than it was. The old values were cut against the platform UI stack,
   which is wider; Manrope already sets tight, so carrying -0.035em over would have jammed the display
   sizes. Line height comes down a touch to match — a narrower face needs less leading to look even. */
.m-h1 {
    font-family: var(--m-font-display);
    font-size: clamp(2.6rem, 6.2vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.028em;
    font-weight: 800;
}

.m-h2 {
    font-family: var(--m-font-display);
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.12;
    letter-spacing: -0.022em;
    font-weight: 700;
}

/* Card and panel titles, not section headings — these stay on the body face so a grid of cards reads as
   interface rather than as a page of small posters. */
.m-h3 {
    font-size: 1.125rem;
    line-height: 1.35;
    letter-spacing: -0.015em;
    font-weight: 650;
}

.m-lede {
    margin-top: 24px;
    font-size: clamp(1.02rem, 1.6vw, 1.18rem);
    line-height: 1.65;
    color: var(--m-muted);
}

.m-sub {
    margin-top: 16px;
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--m-muted);
}

/* Gradient headline text. It has to use the ink stops, not the fill stops: at display size the pale gold
   still measures under 3:1 on paper, and half the word disappears in daylight. */
.m-ink {
    background: linear-gradient(100deg, var(--m-gold-ink), var(--m-accent-ink) 62%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.m-nowrap {
    white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */

.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: var(--m-r-pill);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: transform 0.18s var(--m-ease), background-color 0.18s var(--m-ease),
                border-color 0.18s var(--m-ease), box-shadow 0.18s var(--m-ease);
}

.m-btn:hover {
    transform: translateY(-1px);
}

/* The ink stays near-black on the bright orange, which is the one thing about this button that did NOT
   need changing for a light page. White ink here measures 2.7:1 against the top of the gradient and
   3.2:1 against the bottom — both under AA for 15px text, on the single most important element on the
   page. Getting white to pass would mean darkening the orange to roughly #b4470f, which buys nothing and
   costs the brand its appetite. Near-black on orange measures 7.5:1 and 6.2:1. Leave it. */
.m-btn--primary {
    background: linear-gradient(180deg, #f97b34, var(--m-accent));
    color: #14060a;
    box-shadow: 0 6px 18px rgba(239, 102, 32, 0.26);
}

.m-btn--primary:hover {
    box-shadow: 0 10px 26px rgba(239, 102, 32, 0.34);
}

.m-btn--ghost {
    border: 1px solid var(--m-line-strong);
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: var(--m-shadow-sm);
}

.m-btn--ghost:hover {
    background: var(--m-surface-2);
    border-color: var(--m-faint);
}

.m-btn--lg {
    padding: 16px 30px;
    font-size: 1rem;
}

.m-btn--sm {
    padding: 9px 18px;
    font-size: 0.85rem;
}

.m-btn--block {
    width: 100%;
}

.m-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-s-3);
    margin-top: var(--m-s-7);
}

.m-cta-row--center {
    justify-content: center;
}

.m-cta-note {
    margin-top: 16px;
    font-size: 0.9rem;
    color: var(--m-muted);
}

/* ---------------------------------------------------------------- nav */

.m-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    border-bottom: 1px solid transparent;
    transition: background-color 0.25s var(--m-ease), border-color 0.25s var(--m-ease),
                backdrop-filter 0.25s var(--m-ease);
}

/* An open drawer needs the same solid backing as the stuck state, or its links sit on bare hero. */
.m-nav.is-stuck,
.m-nav.is-drawer-open {
    background: var(--m-glass);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom-color: var(--m-line);
}

.m-nav__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--m-nav-h);
}

.m-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.06rem;
    letter-spacing: -0.02em;
}

.m-brand__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--m-gold), var(--m-accent));
    color: #14060a;
    font-size: 15px;
    font-weight: 800;
}

/* A supplied square mark, standing in for the initial-in-a-tile. Sized to match .m-brand__mark exactly so
   the header's rhythm does not shift between a brand that ships artwork and one that does not. */
.m-brand__icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: none;
}

/* A supplied full lockup, replacing the mark and the name. Sized by height with width:auto so any aspect
   ratio is honoured rather than squashed.
   The height is pushed as far as the 70px header allows, because this artwork carries a strapline under
   the name that only resolves at size — at much under 40px it stops reading as words. That is why the
   footer copy below is larger: it has the room, so it gets it. The steps down at the two breakpoints are
   not cosmetic — the header also has to fit the call to action and the menu toggle on a phone, and a
   lockup that kept its desktop width would push both off the screen. */
/* Height is the single control, so every brand's lockup renders at the SAME height regardless of its
   proportions — that is what makes two brands look like the same size rather than one looking shrunken.
   The lockups are not the same shape (FitsNix 3.9:1, EMenuScan 5.2:1), so equal height means the flatter
   one is legitimately wider; the max-width below is only a safety stop for a future brand with an extreme
   ratio, set wide enough that it never binds for these two. width/height auto keeps the ratio intact.
   Every step down is chosen against what else has to fit on the same row: below 900px the header also
   carries the call to action and the menu toggle, and at 390px that leaves roughly 174px for the brand —
   which is what sets the smallest step, via the wider of the two lockups. */
/* Height is the single control and the ratio is left alone, so a lockup is never distorted. The max-width
   is only a safety stop for a future brand with an extreme ratio; it does not bind for the current two.

   --m-brand-scale is a per-brand nudge, set inline from configuration and defaulting to 1. It exists
   because these lockups spend their height differently: EMenuScan gives about 52% of its height to the
   name and FitsNix 53%, but FitsNix is much taller in proportion (3.9:1 against 5.2:1), so at one shared
   height FitsNix occupies a visibly smaller block. The multiplier corrects the block, and because it
   multiplies rather than replaces, one value covers every breakpoint below — there is no per-brand
   responsive table to keep in step. */
.m-brand__logo {
    display: block;
    width: auto;
    height: auto;
    max-height: calc(54px * var(--m-brand-scale, 1));
    max-width: 420px;
}

.m-brand--footer .m-brand__logo {
    max-height: calc(70px * var(--m-brand-scale, 1));
}

@media (max-width: 900px) {
    .m-brand__logo { max-height: calc(44px * var(--m-brand-scale, 1)); }
    .m-brand--footer .m-brand__logo { max-height: calc(60px * var(--m-brand-scale, 1)); }
}

/* The header also carries the call to action and the menu toggle at this width, which is what caps the
   base value here — a scaled-up lockup still has to leave room for both. */
@media (max-width: 480px) {
    .m-brand__logo { max-height: calc(33px * var(--m-brand-scale, 1)); }
    .m-brand--footer .m-brand__logo { max-height: calc(52px * var(--m-brand-scale, 1)); }
}

.m-nav__links {
    display: flex;
    align-items: center;
    gap: var(--m-s-1);
    margin-left: auto;
}

.m-nav__links a {
    padding: 8px 13px;
    border-radius: var(--m-r-sm);
    font-size: 0.9rem;
    color: var(--m-muted);
    transition: color 0.15s var(--m-ease), background-color 0.15s var(--m-ease);
}

.m-nav__links a:hover {
    color: var(--m-text);
    background: var(--m-hover);
}

.m-nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.m-nav__toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--m-line-strong);
    border-radius: var(--m-r-sm);
    color: var(--m-text);
}

.m-nav__toggle span,
.m-nav__toggle span::before,
.m-nav__toggle span::after {
    display: block;
    width: 17px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.22s var(--m-ease), opacity 0.15s linear;
}

.m-nav__toggle span {
    position: relative;
    margin: 0 auto;
}

.m-nav__toggle span::before,
.m-nav__toggle span::after {
    content: "";
    position: absolute;
    left: 0;
}

.m-nav__toggle span::before { top: -5.5px; }
.m-nav__toggle span::after  { top: 5.5px; }

.m-nav__toggle[aria-expanded="true"] span { background: transparent; }
.m-nav__toggle[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.m-nav__toggle[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.m-nav__drawer {
    display: none;
    padding: 8px 0 22px;
    border-top: 1px solid var(--m-line);
}

.m-nav__drawer.is-open {
    display: block;
}

/* Nav links only. Without :not(.m-btn) this rule outranks .m-btn and strips the call to action of its
   centring, padding and colour, leaving a left-aligned label on an orange bar. */
.m-nav__drawer a:not(.m-btn) {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid var(--m-line);
    font-size: 1rem;
    color: var(--m-muted);
}

.m-nav__drawer a:not(.m-btn):hover {
    color: var(--m-text);
}

.m-nav__drawer .m-btn {
    margin-top: 20px;
    padding-block: 15px;
}

/* The drawer carries a full-width call to action, so the compact one in the bar is just a duplicate. */
.m-nav.is-drawer-open .m-nav__actions .m-btn {
    display: none;
}

/* ---------------------------------------------------------------- hero */

.m-hero {
    position: relative;
    padding: clamp(48px, 6vw, 84px) 0 var(--m-section-y);
    overflow: hidden;
}

.m-hero__glow {
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 780px;
    pointer-events: none;
    /* Half the weight it carried on black. A glow is light emitted onto a dark ground; on paper the same
       alphas read as a stain, so these are washes of colour instead — enough to warm the top of the page
       and no more. */
    background:
        radial-gradient(48% 42% at 22% 28%, rgba(239, 102, 32, 0.11), transparent 68%),
        radial-gradient(42% 40% at 78% 18%, rgba(224, 169, 42, 0.10), transparent 66%),
        radial-gradient(40% 38% at 52% 62%, rgba(120, 86, 255, 0.05), transparent 70%);
    filter: blur(6px);
}

.m-hero__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(var(--m-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--m-line) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(70% 55% at 50% 22%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(70% 55% at 50% 22%, #000 20%, transparent 78%);
    opacity: 0.55;
}

.m-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(var(--m-s-8), 4vw, var(--m-s-9));
    align-items: center;
}

.m-hero__copy {
    max-width: 620px;
}

/* --- stat strip --- */

.m-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: var(--m-s-9);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-md);
    background: var(--m-line);
    overflow: hidden;
}

.m-stat {
    padding: 18px 16px;
    background: var(--m-surface);
}

.m-stat__value {
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--m-gold-ink);
}

/* The label is what makes the number mean anything — "₹699" alone says nothing. Sized and coloured to be
   read, not to be decoration under the figure. */
.m-stat__label {
    margin-top: 3px;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--m-muted);
}

/* --- phone mock --- */

.m-mock {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 560px;
}

/* The device stays dark, and everything inside .m-phone / .m-app with it. This is a picture of the customer
   ordering app, which is a dark-and-gold product — repainting the screen light to match the page would be
   showing visitors a product that does not exist. A dark handset on warm paper is also the stronger image.
   Only the bezel and the shadow are retuned: a black 60% shadow bruises cream. */
.m-phone {
    position: relative;
    width: 296px;
    padding: 11px;
    border: 1px solid rgba(23, 19, 15, 0.14);
    border-radius: 42px;
    background: linear-gradient(170deg, #2b2b34, #14141a);
    box-shadow: 0 30px 70px rgba(23, 19, 15, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.m-phone__screen {
    position: relative;
    border-radius: 32px;
    background: #0f0d10;
    overflow: hidden;
}

.m-phone__notch {
    position: absolute;
    top: 9px;
    left: 50%;
    width: 84px;
    height: 20px;
    transform: translateX(-50%);
    border-radius: var(--m-r-pill);
    background: #08080b;
    z-index: 3;
}

.m-app {
    padding: 38px 15px 16px;
}

.m-app__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.m-app__table {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--m-r-pill);
    background: rgba(245, 196, 81, 0.13);
    color: var(--m-gold);
    font-size: 11px;
    font-weight: 650;
}

.m-app__brand {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #efe9df;
}

.m-app__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 13px;
}

.m-chip {
    padding: 5px 11px;
    border-radius: var(--m-r-pill);
    border: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 10.5px;
    color: #8e8a95;
}

.m-chip.is-on {
    background: rgba(255, 106, 43, 0.16);
    border-color: rgba(255, 106, 43, 0.36);
    color: #ffb488;
}

.m-dish {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 10px;
    margin-bottom: 9px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.m-dish__thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 19px;
    background: linear-gradient(150deg, rgba(245, 196, 81, 0.20), rgba(255, 106, 43, 0.14));
}

.m-dish__body {
    min-width: 0;
    flex: 1;
}

.m-dish__name,
.m-dish__meta,
.m-dish__price,
.m-float__title,
.m-float__meta {
    display: block;
}

.m-dish__name {
    font-size: 12px;
    font-weight: 620;
    color: #efe9df;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-dish__meta {
    font-size: 10.5px;
    color: #7f7b88;
}

.m-dish__price {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--m-gold);
}

.m-dish__add {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255, 106, 43, 0.18);
    color: #ffb488;
    font-size: 14px;
    line-height: 1;
}

.m-app__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 13px;
    padding: 11px 13px;
    border-radius: 14px;
    background: linear-gradient(180deg, #ff7d43, var(--m-accent));
    color: #14060a;
    font-size: 11.5px;
    font-weight: 700;
}

/* --- floating cards around the phone --- */

.m-float {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    /* Page chrome, not part of the device — so unlike the screen behind them these flip to light glass.
       They sit half over the dark phone and half over paper, so they carry a real shadow to stay legible
       against both. */
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-md);
    background: var(--m-float-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--m-shadow-lg);
    animation: m-bob 6s ease-in-out infinite;
}

.m-float--order {
    top: 58px;
    left: -6px;
    animation-delay: -1.4s;
}

.m-float--kot {
    bottom: 122px;
    right: -14px;
    animation-delay: -3.2s;
}

.m-float--bill {
    bottom: 22px;
    left: 12px;
    animation-delay: -4.6s;
}

.m-float__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 14px;
    background: var(--m-wash-2);
}

.m-float__title {
    font-size: 12px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.m-float__meta {
    font-size: 10.5px;
    color: var(--m-faint);
}

.m-float__pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--m-green);
    box-shadow: 0 0 0 0 rgba(12, 122, 76, 0.5);
    animation: m-pulse 2.2s ease-out infinite;
}

@keyframes m-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

@keyframes m-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(12, 122, 76, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(12, 122, 76, 0); }
    100% { box-shadow: 0 0 0 0 rgba(12, 122, 76, 0); }
}

/* ---------------------------------------------------------------- cards */

/* One gap for every card grid on the page. These were 18px, 20px and 22px in three adjacent sections —
   differences too small to look deliberate and just large enough to look careless when you scroll past
   them in sequence. */
.m-grid {
    display: grid;
    gap: var(--m-s-5);
}

.m-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.m-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.m-card {
    position: relative;
    padding: var(--m-s-6);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    background: var(--m-card-bg);
    box-shadow: var(--m-shadow-sm);
    transition: border-color 0.22s var(--m-ease), transform 0.22s var(--m-ease),
                box-shadow 0.22s var(--m-ease);
}

/* On black a card lifted by going lighter. On paper it lifts by casting — the border alone gives a card
   that visibly rises 3px but stays flat on the page. */
.m-card:hover {
    transform: translateY(-3px);
    border-color: var(--m-line-strong);
    box-shadow: var(--m-shadow-md);
}

.m-card__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border: 1px solid var(--m-line);
    border-radius: 13px;
    background: var(--m-wash-2);
    font-size: 20px;
}

.m-card__title {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

/* Marks a block that is not in the subscription. Deliberately quiet — it is a fact the reader needs before they
   reach the pricing table, not a warning — but it sits on the title so it cannot be missed either. */
.m-tagpill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 8px;
    border: 1px solid var(--m-line-strong, var(--m-line));
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--m-accent-ink);
    white-space: nowrap;
}

.m-card__text {
    margin-top: 9px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--m-muted);
}

/* --- sales channels: two across, so four bullets each still breathe --- */

.m-channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-s-5);
}

.m-channel {
    padding: var(--m-s-7);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    background: var(--m-card-bg);
    box-shadow: var(--m-shadow-sm);
    transition: border-color 0.22s var(--m-ease), transform 0.22s var(--m-ease),
                box-shadow 0.22s var(--m-ease);
}

.m-channel:hover {
    transform: translateY(-3px);
    border-color: var(--m-line-strong);
    box-shadow: var(--m-shadow-md);
}

.m-channel__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--m-line);
}

/* The shared icon tile carries a bottom margin for stacked cards; here it sits inline. */
.m-channel__head .m-card__icon {
    margin-bottom: 0;
}

.m-channel__name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.m-channel__tagline {
    margin-top: 4px;
    font-family: var(--m-font-tagline);
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--m-gold-ink);
}

/* --- venue types --- */

/* ---------------------------------------------------------------- clients strip */

/* A single row drifting left. The track holds the list twice, so translating it
   exactly -50% lands on an identical frame and the loop has no seam. */
.m-clients {
    overflow: hidden;
    padding-block: 5px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.m-clients__track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: m-client-drift 60s linear infinite;
}

.m-clients:hover .m-clients__track {
    animation-play-state: paused;
}

@keyframes m-client-drift {
    to { transform: translateX(-50%); }
}

.m-client {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 18px 9px 9px;
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-pill);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
    white-space: nowrap;
    transition: border-color 0.2s var(--m-ease), transform 0.2s var(--m-ease);
}

.m-client:hover {
    border-color: var(--m-line-strong);
    transform: translateY(-2px);
}

.m-client__mono {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--m-accent), var(--m-gold));
    color: #1a1206;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.m-client b {
    display: block;
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.25;
}

.m-client span span,
.m-client > span > span {
    display: block;
    font-size: 0.74rem;
    color: var(--m-muted);
}

@media (prefers-reduced-motion: reduce) {
    .m-clients__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.m-venues {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--m-s-5);
}

.m-venue {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: var(--m-s-4);
    padding: var(--m-s-5);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-md);
    background: var(--m-surface);
}

.m-venue__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(224, 169, 42, 0.16);
    font-size: 17px;
}

.m-venue__name {
    font-size: 0.97rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.m-venue__fit {
    margin-top: 5px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--m-muted);
}

/* --- pain cards --- */

.m-pain__cost {
    margin-top: 9px;
    font-size: 0.92rem;
    color: var(--m-red);
}

.m-pain__fix {
    display: flex;
    gap: 9px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--m-line-strong);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--m-muted);
}

.m-pain__fix::before {
    content: "→";
    color: var(--m-green);
    font-weight: 700;
}

/* --- feature pillar list --- */

.m-pillar__list {
    margin-top: 22px;
    display: grid;
    gap: 9px;
}

.m-pillar__list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--m-muted);
}

.m-pillar__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 11px;
    height: 6px;
    border-left: 1.8px solid var(--m-green);
    border-bottom: 1.8px solid var(--m-green);
    transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- journey */

.m-journey {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-s-5);
}

.m-track {
    padding: var(--m-s-7);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-xl);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
}

.m-track--guest { background-image: linear-gradient(180deg, rgba(224, 169, 42, 0.10), transparent 55%); }
.m-track--staff { background-image: linear-gradient(180deg, rgba(239, 102, 32, 0.09), transparent 55%); }

/* The guest track is gold, the staff track orange — the tag dot carries that split. */
.m-track--guest .m-eyebrow__dot {
    background: var(--m-gold);
    box-shadow: 0 0 0 4px rgba(224, 169, 42, 0.18);
}

.m-track__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 6px 13px;
    border-radius: var(--m-r-pill);
    background: var(--m-wash-2);
    font-family: var(--m-font-tagline);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--m-muted);
}

.m-steps {
    display: grid;
    gap: var(--m-s-1);
}

.m-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--m-line);
}

.m-step:first-child {
    border-top: 0;
    padding-top: 0;
}

.m-step__no {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--m-line-strong);
    border-radius: 11px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--m-gold-ink);
}

.m-step__title {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.m-step__text {
    margin-top: 5px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--m-muted);
}

/* ---------------------------------------------------------------- modules */

.m-modules {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    background: var(--m-line);
    overflow: hidden;
}

.m-module {
    padding: var(--m-s-6) var(--m-s-5);
    background: var(--m-surface);
}

.m-module__title {
    margin-bottom: 14px;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--m-accent-ink);
}

.m-module li {
    padding: 5px 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--m-muted);
}

/* ---------------------------------------------------------------- compare */

.m-compare {
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
    overflow: hidden;
}

.m-compare__scroll {
    overflow-x: auto;
}

/* Only meaningful once the table is wider than its container. It is the only thing telling a phone visitor
   that three more columns exist, so it is not styled as fine print. */
.m-compare__hint {
    display: none;
    padding: 13px 18px;
    border-bottom: 1px solid var(--m-line);
    background: var(--m-surface-2);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--m-muted);
}

.m-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.m-table th,
.m-table td {
    padding: 16px 18px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--m-line);
}

.m-table thead th {
    position: sticky;
    top: 0;
    background: var(--m-surface-2);
    font-size: 0.8rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    color: var(--m-muted);
    white-space: nowrap;
}

.m-table thead th.is-ours {
    color: var(--m-text);
    background: linear-gradient(180deg, rgba(239, 102, 32, 0.18), var(--m-surface-2));
}

.m-table tbody tr:last-child th,
.m-table tbody tr:last-child td {
    border-bottom: 0;
}

.m-table tbody tr:hover td,
.m-table tbody tr:hover th {
    background: var(--m-wash);
}

.m-table th[scope="row"] {
    width: 26%;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--m-text);
}

.m-table td.is-ours {
    background: rgba(239, 102, 32, 0.06);
}

.m-cell {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.m-mark {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.m-mark--full    { background: rgba(12, 122, 76, 0.14);  color: var(--m-green); }
.m-mark--partial { background: rgba(224, 169, 42, 0.20); color: var(--m-gold-ink); }
.m-mark--none    { background: rgba(189, 50, 44, 0.12);  color: var(--m-red); }

.m-cell__note {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--m-muted);
}

/* The disclaimer under the table is doing trust work, not legal cover — a visitor who reads it thinks better
   of the comparison above it. Fine print would waste it. */
.m-compare__foot {
    padding: 16px 18px;
    background: var(--m-surface-2);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--m-muted);
}

.m-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m-s-5);
    justify-content: center;
    margin-bottom: var(--m-s-6);
    font-size: 0.82rem;
    color: var(--m-muted);
}

.m-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---------------------------------------------------------------- pricing */

/* The single plan: price and calls to action on the left, the full inclusion list on the right. */
.m-plan {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    border: 1px solid rgba(239, 102, 32, 0.42);
    border-radius: var(--m-r-xl);
    background:
        linear-gradient(180deg, rgba(239, 102, 32, 0.08), transparent 55%),
        var(--m-surface);
    box-shadow: 0 4px 10px rgba(23, 19, 15, 0.05), 0 26px 60px rgba(239, 102, 32, 0.14);
    overflow: hidden;
}

.m-plan__main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--m-s-8);
}

/* On the dark theme the inclusion list sat in a well cut into the card. Here it separates by going one
   step warmer than the white card rather than darker — a grey panel inside a white card reads as disabled. */
.m-plan__aside {
    padding: var(--m-s-8);
    border-left: 1px solid var(--m-line);
    background: var(--m-surface-2);
}

.m-plan__name {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.m-plan__slogan {
    margin-top: 10px;
    max-width: 46ch;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--m-muted);
}

.m-plan__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    margin: 30px 0 4px;
}

.m-plan__amount {
    font-size: 2.9rem;
    font-weight: 700;
    letter-spacing: -0.045em;
}

.m-plan__or {
    align-self: center;
    padding-top: 8px;
    font-size: 0.85rem;
    color: var(--m-faint);
}

.m-plan__save {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--m-green);
}

.m-plan__cta {
    margin-top: var(--m-s-7);
}

/* Extra-branch add-on — reads as a line item under the plan, not a competing tier. */
.m-addon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-s-6);
    margin-top: var(--m-s-5);
    padding: var(--m-s-6) var(--m-s-7);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
}

.m-addon__body {
    flex: 1 1 380px;
    max-width: 62ch;
}

/* Shrinkable, not fixed. This column holds whole sentences (the yearly-price notes), and `flex: 0 0 auto`
   sized it to max-content — one unbreakable line ~417px wide inside a 308px card on a phone, which the
   page's overflow:clip then quietly cut off rather than wrapped. min-width:0 is the other half of the
   fix: without it a flex item refuses to shrink below its min-content width regardless of flex-shrink. */
.m-addon__price {
    flex: 0 1 auto;
    min-width: 0;
    text-align: right;
}

.m-addon__amount {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.m-tier__flag {
    /* align-self keeps the pill hugging its text inside the flex column of .m-plan__main. */
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 16px;
    padding: 5px 12px;
    border-radius: var(--m-r-pill);
    background: var(--m-accent);
    color: #14060a;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.m-tier__suffix {
    font-size: 0.95rem;
    color: var(--m-faint);
}

/* Carries a price ("or ₹4,999 a year, per branch"), so it is a line of the price and not a caption. A figure
   a visitor has to lean in to read is a figure they will ask about on a call instead of deciding on here. */
.m-tier__note {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--m-muted);
}

/* A second price under the first — what the same add-on costs past the first branch. Separated by a hairline so
   it reads as another line of the price rather than as more of the sentence above it. */
.m-tier__note--extra {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--m-line);
}

.m-tier__includes {
    margin-bottom: 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--m-muted);
}

.m-tier__list {
    display: grid;
    gap: 10px;
}

.m-tier__list li {
    position: relative;
    padding-left: 24px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--m-muted);
}

.m-tier__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 11px;
    height: 6px;
    border-left: 1.8px solid var(--m-green);
    border-bottom: 1.8px solid var(--m-green);
    transform: rotate(-45deg);
}

/* The standard price, struck through beside what is actually charged. Deliberately smaller and quieter than
   the live figure — the price being charged must never be the harder of the two to read. */
.m-was {
    margin-right: 10px;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--m-faint);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.m-price-flash {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    font-size: 0.95rem;
    color: var(--m-muted);
}

.m-price-flash__pill {
    padding: 5px 13px;
    border-radius: var(--m-r-pill);
    background: var(--m-accent);
    color: #14060a;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The money-back promise sits between the price and the button, because that is where the hesitation is. */
.m-plan__trial {
    display: flex;
    gap: var(--m-s-3);
    margin-top: var(--m-s-6);
    padding: var(--m-s-4) var(--m-s-5);
    border: 1px solid rgba(12, 122, 76, 0.26);
    border-radius: var(--m-r-md);
    background: rgba(12, 122, 76, 0.06);
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--m-muted);
}

.m-plan__trial strong {
    color: var(--m-text);
}

.m-plan__trial-icon {
    flex: none;
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--m-green);
}

.m-price-foot {
    margin-top: var(--m-s-6);
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--m-muted);
}

.m-price-foot a {
    color: var(--m-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- faq */

.m-faq {
    max-width: 820px;
    margin: 0 auto;
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
    overflow: hidden;
}

.m-faq__item {
    border-bottom: 1px solid var(--m-line);
}

.m-faq__item:last-child {
    border-bottom: 0;
}

.m-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
    transition: background-color 0.16s var(--m-ease);
}

.m-faq__q::-webkit-details-marker {
    display: none;
}

.m-faq__q:hover {
    background: var(--m-hover);
}

.m-faq__sign {
    flex: 0 0 auto;
    position: relative;
    width: 18px;
    height: 18px;
    color: var(--m-accent-ink);
}

.m-faq__sign::before,
.m-faq__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.8px;
    background: currentColor;
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform 0.22s var(--m-ease), opacity 0.18s linear;
}

.m-faq__sign::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.m-faq__item[open] .m-faq__sign::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

.m-faq__a {
    padding: 0 24px 22px;
    max-width: 68ch;
    font-size: 0.94rem;
    line-height: 1.7;
    color: var(--m-muted);
}

/* ---------------------------------------------------------------- india strip */

.m-local {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-s-5);
}

.m-local__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--m-s-4);
    padding: var(--m-s-6);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
}

.m-local__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: rgba(224, 169, 42, 0.18);
    font-size: 20px;
}

/* ---------------------------------------------------------------- final cta */

.m-final {
    position: relative;
    padding: var(--m-section-y) 0;
    overflow: hidden;
    border-top: 1px solid var(--m-line);
}

.m-final__glow {
    position: absolute;
    inset: auto -20% -60% -20%;
    height: 620px;
    pointer-events: none;
    background: radial-gradient(50% 60% at 50% 40%, rgba(239, 102, 32, 0.13), transparent 70%);
}

.m-final__inner {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.m-final__foot {
    margin-top: 26px;
    font-size: 0.86rem;
    color: var(--m-faint);
}

/* The sales lead form inside the closing panel (brands that collect leads only). */

.m-lead {
    margin-top: var(--m-s-7);
    text-align: left;
}

.m-lead__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--m-s-4) var(--m-s-5);
}

.m-lead__label {
    display: block;
    margin-bottom: var(--m-s-2);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--m-muted);
}

.m-lead__input {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--m-text);
    background: var(--m-surface);
    border: 1px solid var(--m-line-strong);
    border-radius: var(--m-r-sm);
    box-shadow: var(--m-shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.m-lead__input:focus {
    outline: none;
    border-color: var(--m-accent);
    box-shadow: 0 0 0 3px var(--m-accent-soft);
}

.m-lead__referral {
    margin-top: var(--m-s-4);
}

.m-lead__referral-toggle {
    padding: 0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--m-accent-ink);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The honeypot is removed from sight and from the accessibility tree, but stays in the submitted form. */
.m-lead__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.m-lead__actions {
    margin-top: var(--m-s-6);
}

.m-lead__status {
    margin-top: var(--m-s-4);
    font-size: 0.9rem;
    color: var(--m-red);
    text-align: center;
}

.m-lead__status:empty {
    display: none;
}

.m-lead__done {
    margin-top: var(--m-s-7);
    padding: var(--m-s-7);
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-md);
    box-shadow: var(--m-shadow-md);
}

.m-lead__done-title {
    font-family: var(--m-font-display);
    font-size: 1.25rem;
    font-weight: 700;
}

.m-lead__done-text {
    margin-top: var(--m-s-2);
    color: var(--m-muted);
}

@media (max-width: 640px) {
    .m-lead__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------- footer */

.m-footer {
    padding: var(--m-s-9) 0 var(--m-s-7);
    border-top: 1px solid var(--m-line);
    background: var(--m-bg-soft);
}

/* The brand column is given room to say what the product is; the three link columns size to their content.
   Company details sit below the rule, where a visitor looks for them. */
/* 1.8fr rather than 1.6fr: this column now carries the brand lockup as artwork, not just a paragraph, and
   the widest of them needs ~362px at the footer size. At 1.6fr the column landed at ~352px and clipped it. */
.m-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
    gap: var(--m-s-8);
}

/* The measure that matters is the blurb's, not the column's — so the cap sits on the text, leaving the
   lockup free to use the full column. */
.m-footer__brand {
    max-width: 100%;
}

.m-footer__blurb,
.m-footer__made {
    max-width: 40ch;
}

.m-footer__blurb {
    margin-top: 16px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--m-muted);
}

.m-footer__made {
    margin-top: 14px;
    font-size: 0.88rem;
    color: var(--m-faint);
}

.m-footer__heart {
    color: var(--m-accent-ink);
}

.m-minihead {
    margin-bottom: 14px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--m-faint);
}

.m-footer__links {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 0.9rem;
    color: var(--m-muted);
}

.m-footer__links a {
    /* Keeps the tap target from spanning the whole column on a phone. */
    align-self: flex-start;
    transition: color 0.15s var(--m-ease);
}

.m-footer__links a:hover {
    color: var(--m-text);
}

.m-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--m-s-3) var(--m-s-6);
    margin-top: var(--m-s-8);
    padding-top: var(--m-s-6);
    border-top: 1px solid var(--m-line);
}

.m-footer__note {
    font-size: 0.86rem;
    color: var(--m-faint);
}

/* ---------------------------------------------------------------- legal pages */

/* A measure of roughly 70 characters — long-form terms are read, not scanned, and a full-width line is
   what makes people give up two paragraphs in. */
.m-shell--narrow {
    max-width: 800px;
}

/* Tighter at the top than a landing section: the sticky header already sits in flow above it, and a legal
   page should open like a document rather than like a hero. */
.m-legal {
    padding-top: 72px;
}

.m-legal__head {
    padding-bottom: 34px;
    border-bottom: 1px solid var(--m-line);
}

.m-legal__summary {
    margin-top: 20px;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--m-text);
}

.m-legal__date {
    margin-top: 14px;
    font-size: 0.88rem;
    color: var(--m-faint);
}

.m-legal__toc {
    margin: var(--m-s-7) 0 var(--m-s-2);
    padding: var(--m-s-6) var(--m-s-7);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-lg);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
}

.m-legal__toc ol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 28px;
    counter-reset: toc;
    list-style: none;
}

.m-legal__toc li {
    counter-increment: toc;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--m-muted);
}

.m-legal__toc li::before {
    content: counter(toc) ". ";
    color: var(--m-faint);
}

.m-legal__toc a:hover {
    color: var(--m-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.m-legal__section {
    margin-top: var(--m-s-8);
    scroll-margin-top: calc(var(--m-nav-h) + var(--m-s-6));
}

/* An empty anchor target for the friendly "#refunds" link, positioned so the browser lands on the heading
   rather than halfway up it. */
.m-legal__alias {
    display: block;
    height: 0;
    scroll-margin-top: calc(var(--m-nav-h) + var(--m-s-6));
}

.m-legal__heading {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    font-family: var(--m-font-display);
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--m-text);
}

/* No fixed column. The number sits flush against the left edge of the section, so it lines up with the
   paragraphs underneath it, and the heading follows one gap later. A padded column would either leave a
   hole after a single digit or push the digit off the margin — this does neither. Between a one- and a
   two-digit section the heading text starts a digit apart, which is how any numbered document reads. */
.m-legal__no {
    flex: none;
    color: var(--m-accent-ink);
    font-variant-numeric: tabular-nums;
}

.m-legal__section p {
    margin-bottom: 15px;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--m-muted);
}

.m-legal__list {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.m-legal__list li {
    position: relative;
    padding-left: 22px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--m-muted);
}

.m-legal__list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--m-accent);
}

.m-legal__foot {
    margin-top: var(--m-s-9);
    padding-top: var(--m-s-7);
    border-top: 1px solid var(--m-line);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--m-faint);
}

/* ---------------------------------------------------------------- reveal */

/* Scoped to .m-js — set by an inline script in the head and withdrawn on a timer if marketing.js never
   arrives. Nothing on this page may depend on JavaScript to become readable, so the hidden state only
   exists while something is alive to un-hide it. Never style .m-reveal without the .m-js guard. */
.m-js .m-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--m-ease), transform 0.6s var(--m-ease);
}

.m-js .m-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------------------------------------------------------------- responsive */

/* Layout only below this line. The vertical rhythm is handled by the clamps on --m-section-y and its
   siblings, so no breakpoint re-states section padding, head margins or the hero gap any more — what
   remains here is column counts and the handful of things that genuinely have to change shape. */

@media (max-width: 1080px) {
    .m-hero__inner { grid-template-columns: 1fr; }
    .m-hero__copy  { max-width: 700px; }
    .m-mock        { min-height: 520px; }
    .m-grid--4     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-modules     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-venues      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .m-nav__links   { display: none; }
    .m-nav__toggle  { display: grid; place-items: center; }
    .m-nav__inner   { gap: var(--m-s-4); }
    .m-nav__actions { margin-left: auto; }

    .m-grid--3      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-channels     { grid-template-columns: 1fr; }
    .m-venues       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m-journey      { grid-template-columns: 1fr; }
    .m-local        { grid-template-columns: 1fr; }

    .m-compare__hint { display: block; }
    .m-plan         { grid-template-columns: 1fr; }
    .m-plan__aside  { border-left: 0; border-top: 1px solid var(--m-line); }
    .m-addon        { justify-content: flex-start; }
    .m-addon__price { text-align: left; }

    /* Brand blurb across the top, then the link columns two-up beneath it. */
    .m-footer__top    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m-s-7); }
    .m-footer__brand  { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .m-page          { --m-gutter: var(--m-s-4); }
    .m-grid--2,
    .m-grid--3,
    .m-grid--4       { grid-template-columns: 1fr; }
    .m-modules       { grid-template-columns: 1fr; }
    .m-venues        { grid-template-columns: 1fr; }
    .m-channel       { padding: var(--m-s-6); }
    .m-stats         { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--m-s-8); }
    .m-card          { padding: var(--m-s-6); }
    .m-track         { padding: var(--m-s-6); }
    .m-plan__main,
    .m-plan__aside   { padding: var(--m-s-6); }
    .m-addon         { padding: var(--m-s-6); }
    .m-plan__amount  { font-size: 2.4rem; }
    .m-cta-row .m-btn { width: 100%; }
    .m-mock          { min-height: 470px; }
    .m-phone         { width: 258px; }
    /* Keep the floats inside the gutter — at this width a negative offset clips them on the screen edge. */
    .m-float--order  { left: 0; top: 40px; }
    .m-float--kot    { right: 0; }
    .m-float--bill   { display: none; }
    .m-final         { padding: 72px 0; }
    .m-footer        { padding: 48px 0 30px; }
    .m-footer__base  { flex-direction: column; align-items: flex-start; margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .m-page *,
    .m-page *::before,
    .m-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    /* Must carry the .m-js guard too, or it loses on specificity to the hidden state above. */
    .m-js .m-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   FitsNix ordering-screen replica  (.fx-*)
   --------------------------------------------------------------------------
   A static, pixel-faithful copy of the real customer ordering page in its
   left-category-rail layout. Every colour, radius and weight below is lifted
   from RestaurantOrdering.Web/wwwroot/css/customer.css so the marketing mock
   and the product cannot drift apart visually.

   Self-contained on purpose: it declares its own custom properties and never
   reads a host token, so the identical block can live in this site's
   stylesheet and in the product's marketing.css and render the same in both.

   It is decoration — nothing here is interactive, and the whole component is
   aria-hidden at the markup level.
   ========================================================================== */
.fx {
    --fx-bg: #0f0f11;
    --fx-surface: #1b1c21;
    --fx-elevated: #232429;
    --fx-app2: #17181d;
    --fx-border: #2c2d34;
    --fx-text: #f5f3ee;
    --fx-muted: #a29a8b;
    --fx-gold: #e6c15a;
    --fx-gold-fill: linear-gradient(135deg, #f0d375 0%, #c9992b 100%);
    --fx-gold-text: linear-gradient(135deg, #f4dc8a 0%, #d9ad42 100%);
    --fx-gold-soft: rgba(230, 193, 90, .12);
    --fx-gold-line: rgba(230, 193, 90, .28);
    --fx-ink-on-gold: #201a06;

    /* The screen stays dark for the same reason .m-phone does — it is a copy of the real ordering page,
       and the real ordering page is dark. Only the bezel and shadow are tuned for a paper background. */
    width: min(398px, 100%);
    border-radius: 26px;
    padding: 9px;
    background: linear-gradient(150deg, #3d3d46, #17171c);
    box-shadow: 0 40px 80px -40px rgba(23, 19, 15, .45);
    /* Inter, because the customer app is Inter. This block previously asked for Manrope, which was never
       loaded anywhere and quietly fell back to Segoe UI — so the "pixel-faithful replica" was set in a
       face the product does not use. Whatever --font-sans is, this must match it. */
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.fx-screen {
    border-radius: 19px;
    overflow: hidden;
    background: var(--fx-bg);
    color: var(--fx-text);
    line-height: 1.4;
}

/* ---- Menu hero ---- */
.fx-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--fx-border);
    background:
        radial-gradient(130% 140% at 15% -60%, var(--fx-gold-soft) 0%, transparent 60%),
        linear-gradient(180deg, var(--fx-app2) 0%, var(--fx-bg) 100%);
}

.fx-hero__name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.15;
    background: var(--fx-gold-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fx-hero__branch { font-size: .72rem; color: var(--fx-muted); margin-top: 2px; }

.fx-hero__table {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--fx-gold-soft);
    border: 1px solid var(--fx-gold-line);
    color: var(--fx-gold);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Sticky filter bar ---- */
.fx-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--fx-border);
    background: var(--fx-bg);
}

.fx-search {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: var(--fx-elevated);
    color: var(--fx-muted);
    font-size: .78rem;
    white-space: nowrap;
    overflow: hidden;
}

.fx-search svg { width: 15px; height: 15px; flex: none; color: var(--fx-gold); }

.fx-diet {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .72rem;
    font-weight: 600;
}

.fx-diet--veg { color: #4cc47f; background: color-mix(in srgb, #3aa657 20%, var(--fx-surface)); border-color: color-mix(in srgb, #3aa657 42%, transparent); }
.fx-diet--non { color: #ff7d80; background: color-mix(in srgb, #d1373a 20%, var(--fx-surface)); border-color: color-mix(in srgb, #d1373a 42%, transparent); }

/* ---- Split: left rail + dishes ---- */
.fx-split { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px 0; }

.fx-rail {
    flex: 0 0 auto;
    width: 72px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fx-rail__item {
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--fx-muted);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.25;
}

.fx-rail__item.is-active {
    background: var(--fx-gold-soft);
    border-color: var(--fx-gold-line);
    color: var(--fx-gold);
    font-weight: 800;
}

.fx-main { flex: 1 1 auto; min-width: 0; }

.fx-section {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .92rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}

.fx-section::before {
    content: '';
    width: 4px;
    height: 1.05em;
    border-radius: 999px;
    background: var(--fx-gold-fill);
}

/* ---- Compact dish card ---- */
.fx-item {
    padding: 11px;
    margin-bottom: 10px;
    border: 1px solid var(--fx-border);
    border-radius: 14px;
    background: var(--fx-surface);
}

.fx-item__head { display: flex; gap: 9px; align-items: flex-start; }

.fx-item__ph {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: var(--fx-elevated);
    border: 1px solid var(--fx-border);
}

.fx-item__body { flex: 1 1 auto; min-width: 0; }

.fx-item__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fx-item__name { font-size: .8rem; font-weight: 700; line-height: 1.25; }

.fx-tag {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .62rem;
    font-weight: 600;
}

.fx-tag--veg { color: #4cc47f; background: color-mix(in srgb, #3aa657 20%, var(--fx-surface)); border-color: color-mix(in srgb, #3aa657 42%, transparent); }
.fx-tag--non { color: #ff7d80; background: color-mix(in srgb, #d1373a 20%, var(--fx-surface)); border-color: color-mix(in srgb, #d1373a 42%, transparent); }

.fx-item__price { margin-top: 3px; font-size: .8rem; font-weight: 700; }
.fx-item__price del { color: var(--fx-muted); font-weight: 500; font-size: .68rem; margin-left: 5px; }
.fx-item__desc { margin-top: 3px; font-size: .68rem; color: var(--fx-muted); line-height: 1.4; }

.fx-item__foot { margin-top: 10px; }

.fx-add {
    display: block;
    width: 100%;
    padding: 8px;
    text-align: center;
    border-radius: 999px;
    background: var(--fx-gold-fill);
    color: var(--fx-ink-on-gold);
    font-size: .76rem;
    font-weight: 800;
    box-shadow: 0 8px 26px rgba(230, 193, 90, .26);
}

.fx-add::before { content: '＋'; margin-right: 3px; }

/* Item already in the cart shows the stepper instead of Add. */
.fx-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px;
    border: 1px solid var(--fx-border);
    border-radius: 999px;
    background: var(--fx-elevated);
}

.fx-stepper b {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--fx-gold);
    font-size: 1.05rem;
    line-height: 1;
}

.fx-stepper span { font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Floating cart bar ---- */
.fx-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 14px 14px;
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--fx-gold-fill);
    color: var(--fx-ink-on-gold);
    font-size: .78rem;
    font-weight: 800;
    box-shadow: 0 8px 26px rgba(230, 193, 90, .26);
}

@media (max-width: 420px) {
    .fx-rail { width: 62px; }
    .fx-rail__item { font-size: .63rem; padding: 6px; }
}


/* ================================================================
   Content pages
   ----------------------------------------------------------------
   The capability, company and legal-adjacent pages: one narrow prose
   column, a breadcrumb above the H1, an extractable answer block and
   a set of "read next" cards. Everything here reuses the tokens and
   the section rhythm defined above; nothing new is introduced.
   ================================================================ */

/* ---- Breadcrumbs ---- */
.m-crumbs {
    margin-bottom: 22px;
    font-size: .8rem;
    color: var(--m-faint);
}

.m-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.m-crumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.m-crumbs a {
    color: var(--m-muted);
    border-bottom: 1px solid transparent;
    transition: color .18s var(--m-ease), border-color .18s var(--m-ease);
}

.m-crumbs a:hover {
    color: var(--m-text);
    border-bottom-color: var(--m-line-strong);
}

.m-crumbs__sep { color: var(--m-line-strong); }

/* ---- Page head ---- */
.m-doc { padding-top: clamp(96px, 12vw, 150px); }

.m-doc__head { max-width: 46rem; }

/* Smaller than the landing page's H1: this one sits above prose rather than
   above a hero, and the hero's scale would swamp it. */
.m-h1--doc {
    margin: 14px 0 18px;
    font-size: clamp(2rem, 4.4vw, 3.05rem);
    line-height: 1.1;
    letter-spacing: -.022em;
}

.m-doc__cta { margin-top: 28px; }

/* ---- The extractable answer ---- */
/* Deliberately the most prominent block on the page after the H1. It is what a
   featured snippet or an assistant lifts, and what a visitor in a hurry reads. */
.m-answer {
    margin-top: var(--m-s-7);
    padding: var(--m-s-6) var(--m-s-7);
    border: 1px solid var(--m-line);
    border-left: 3px solid var(--m-accent);
    border-radius: var(--m-r-md);
    background: linear-gradient(180deg, var(--m-surface) 0%, var(--m-bg-soft) 100%);
}

.m-answer__label {
    margin-bottom: 10px;
    color: var(--m-accent-ink);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.m-answer__text {
    color: var(--m-text);
    font-size: 1.06rem;
    line-height: 1.62;
}

.m-answer__list {
    display: grid;
    gap: 8px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--m-line);
    font-size: .9rem;
    color: var(--m-muted);
}

.m-answer__list li {
    position: relative;
    padding-left: 20px;
}

.m-answer__list li::before {
    content: "";
    position: absolute;
    top: .55em;
    left: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--m-accent);
}

@media (min-width: 620px) {
    .m-answer__list { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
}

/* ---- Prose body ---- */
.m-prose { display: grid; gap: var(--m-s-8); }

.m-prose__heading {
    margin-bottom: 14px;
    font-family: var(--m-font-display);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.24;
    color: var(--m-text);
}

.m-prose__block p {
    max-width: 40rem;
    margin-bottom: 14px;
    color: var(--m-muted);
    font-size: 1rem;
    line-height: 1.72;
}

.m-prose__block p:last-child { margin-bottom: 0; }

.m-prose__block .m-pillar__list { margin-top: 18px; }

/* An honest limitation, set apart from the claim it qualifies. */
.m-note {
    max-width: 40rem;
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: var(--m-r-sm);
    background: var(--m-surface-2);
    border: 1px dashed var(--m-line-strong);
    color: var(--m-faint);
    font-size: .88rem;
    line-height: 1.6;
}

/* ---- An inline link inside body copy ---- */
.m-link {
    color: var(--m-text);
    border-bottom: 1px solid var(--m-accent);
    transition: color .18s var(--m-ease);
}

.m-link:hover { color: var(--m-accent-ink); }

/* ---- "More on this" line under a landing-page section ---- */
.m-section__more {
    margin-top: var(--m-s-7);
    color: var(--m-muted);
    font-size: .94rem;
    line-height: 1.7;
}

.m-head--spaced { margin-top: var(--m-s-10); }

/* ---- Read next ---- */
.m-related {
    display: grid;
    gap: var(--m-s-5);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .m-related { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
    .m-related { grid-template-columns: repeat(3, 1fr); }
}

.m-related__card {
    display: flex;
    flex-direction: column;
    gap: var(--m-s-2);
    padding: var(--m-s-5);
    border: 1px solid var(--m-line);
    border-radius: var(--m-r-md);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
    transition: border-color .2s var(--m-ease), transform .2s var(--m-ease), box-shadow .2s var(--m-ease);
}

.m-related__card:hover {
    border-color: var(--m-line-strong);
    box-shadow: var(--m-shadow-md);
    transform: translateY(-2px);
}

.m-related__label {
    color: var(--m-accent-ink);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.m-related__title {
    color: var(--m-text);
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.32;
}

.m-related__text {
    color: var(--m-faint);
    font-size: .86rem;
    line-height: 1.6;
}