/* SPDX-FileCopyrightText: 2026 ARES-SIGNUM Ltd.
 *
 * SPDX-License-Identifier: LicenseRef-ARES-SIGNUM-Proprietary
 */

/* ── ARES MOBILE MARKETING STYLES ─────────────────────────────────────────────
 *
 * Companion to token.css, which must load first — it provides the token set of
 * Frontend Architecture v2.2 §7.1. This file defines no colour of its own:
 * every value below resolves to one of those custom properties.
 *
 * /m/ does not load shared.css. Of that file's 25,043 bytes the mobile
 * marketing pages used 902, and exactly one of its classes (.btn-full)
 * overlapped with this vocabulary. token.css carries the 902 bytes that
 * mattered; see its header for the synchronisation obligation that creates.
 *
 * Written mobile-first and single-column throughout. There is no desktop branch
 * here and no counterpart to website.css's breakpoint ladder — this stylesheet
 * is only ever served under /m/, which Apache routes to on phones alone.
 *
 * The markup it styles is the desktop marketing markup carried over verbatim,
 * so the class vocabulary is website.css's. Only the layout differs.
 * ────────────────────────────────────────────────────────────────────────── */


/* ── BASE ─────────────────────────────────────────────────────────────────── */

/* Reset and base font. These were inherited from shared.css until /m/ stopped
   loading it; they are restated here rather than in token.css, which holds the
   palette and nothing else. */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Raleway', sans-serif;
    background: var(--cream);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

/* No overflow-x:hidden here, deliberately. The desktop stylesheet sets it on
   body, which is what stops its header overflow from being visible: the content
   is clipped rather than scrolled, so the fault never surfaces. Leaving it off
   means any horizontal overflow shows up as a scrollbar on a real device —
   which is the only way this layout gets checked. */

img { max-width: 100%; height: auto; }

a { color: var(--copper-dark); }

/* Replaces the desktop's JavaScript smooth scroll. Honours a reduced-motion
   preference, which the script version does not. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

:target { scroll-margin-top: 1rem; }


/* ── HEADER ───────────────────────────────────────────────────────────────────
 * Static, not fixed. A fixed bar costs 64px of a 667px viewport permanently and
 * forces a body offset; on a marketing page that scrolls once, it is not worth
 * the height. Two rows, so nothing has to shrink or be hidden — the failure the
 * desktop stylesheet has at this width, where nav children are flex-shrink:0
 * and simply overflow.
 * ────────────────────────────────────────────────────────────────────────── */

.m-head {
    background: var(--text-dark);
    border-bottom: 1px solid rgba(184,115,51,0.18);
    padding: 0.85rem 1.25rem 1rem;
}

.m-head-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}

.logo-container { display: flex; align-items: center; gap: 0.6rem; }
.logo-img { height: 30px; width: auto; }
.logo-text {
    font-family: 'Cinzel', serif; font-size: 0.95rem; font-weight: 700;
    color: var(--copper); letter-spacing: 3px; text-transform: uppercase;
    line-height: 1;
}

.lang-switcher {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 1.2px;
}
/* 0.55 rather than the desktop's 0.25: against --text-dark the lower alpha
   falls under the 4.5:1 contrast floor for text this size. */
.lang-link   { color: rgba(255,255,255,0.55); text-decoration: none; padding: 0.35rem 0.15rem; }
.lang-active { color: var(--copper); padding: 0.35rem 0.15rem; }
.lang-sep    { color: rgba(255,255,255,0.22); }

.m-head-actions {
    display: flex; gap: 0.6rem; margin-top: 0.85rem;
}
/* Tighter than the body buttons on purpose. At 375px this row is about 335px
   wide, so each button gets ~158px; "Request Access" at the body size needs
   more than that, and the French and German strings need more again. Reduced
   tracking and horizontal padding keep all three locales on one line. They
   wrap rather than overflow if a translation grows. */
.m-head-actions .sec-btn,
.m-head-actions .cta-btn {
    flex: 1; text-align: center;
    font-size: 0.72rem; letter-spacing: 0.4px;
    padding: 0.8rem 0.5rem;
}

/* ── SECTION MENU ─────────────────────────────────────────────────────────────
 * A <details> disclosure, not a scripted toggle. This surface runs no
 * JavaScript, and <details> is operable by keyboard and announced as expanded
 * or collapsed by assistive technology without any ARIA of its own — neither of
 * which a checkbox hack gives you for free.
 *
 * It does not close itself after a link is followed, because CSS cannot close
 * it. That is harmless here: the header is static, so following a link scrolls
 * it off screen entirely.
 * ────────────────────────────────────────────────────────────────────────── */

.m-nav {
    margin-top: 0.85rem;
    border-top: 1px solid rgba(184,115,51,0.18);
}

.m-nav-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 0.15rem;
    color: rgba(255,255,255,0.7);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer;
    list-style: none;                    /* removes the marker in Firefox   */
}
.m-nav-summary::-webkit-details-marker { display: none; }   /* and in WebKit */
.m-nav-summary:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

.m-nav-summary::after {
    content: '+';
    font-size: 1.1rem; line-height: 1; color: var(--copper);
    font-weight: 400;
}
.m-nav[open] .m-nav-summary::after { content: '\2212'; }    /* minus sign */

.m-nav .nav-links { list-style: none; padding: 0 0 0.6rem; margin: 0; }
.m-nav .nav-links li { border-top: 1px solid rgba(255,255,255,0.07); }
.m-nav .nav-links a {
    display: block; padding: 0.8rem 0.15rem;
    color: rgba(255,255,255,0.75); text-decoration: none;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.5px;
}
.m-nav .nav-links a:focus-visible { outline: 2px solid var(--copper); outline-offset: -2px; }

/* Overlay header — About and Terms, which are real pages here rather than the
   JS overlays the desktop uses. */
.m-head-ov { padding-bottom: 0.85rem; }
.m-head-ov .m-head-row { justify-content: space-between; }
.ov-back {
    color: var(--copper-light); text-decoration: none;
    font-size: 0.9rem; font-weight: 600; letter-spacing: 0.4px;
    padding: 0.4rem 0;
}
.ov-logo-sm { height: 28px; }
.ov-logo-md { height: 36px; flex-shrink: 0; }
.ov-logo-lg { height: 44px; margin-bottom: 1.1rem; }


/* ── BUTTONS ───────────────────────────────────────────────────────────────── */

.cta-btn, .sec-btn {
    display: inline-block; text-decoration: none;
    font-family: 'Raleway', sans-serif; font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase;
    padding: 0.85rem 1.25rem; border-radius: 2px;
    line-height: 1.2;
}
.cta-btn { background: var(--copper); color: var(--text-dark); border: 1px solid var(--copper); }
.sec-btn { background: transparent; color: var(--text-medium); border: 1px solid var(--border); }

.m-head .sec-btn { color: rgba(255,255,255,0.65); border-color: rgba(184,115,51,0.35); }

.sec-btn-dark { background: var(--text-dark); color: var(--copper-light); border-color: var(--text-dark); }
.cta-btn-t2   { background: linear-gradient(135deg, var(--copper-dark) 0%, var(--orange) 100%); border-color: transparent; color: var(--white); }
/* Padding is stated explicitly rather than inherited from .cta-btn/.sec-btn, so
   the full-width pricing buttons keep their size independently of rule order. */
.btn-full {
    display: block; width: 100%; text-align: center; box-sizing: border-box;
    padding: 0.85rem 1.25rem;
}


/* ── SECTIONS ─────────────────────────────────────────────────────────────── */

.sec       { padding: 3rem 1.25rem; }
.sec-cream { background: var(--cream); }
.sec-white { background: var(--white); }
.page-wrap { max-width: 100%; }

/* Dark sections keep the copper vignette but drop the desktop's animated
   crosshatch: a permanently animating 200% layer is a battery cost on a phone
   for an effect that is decorative only. */
.sec-dark { background: var(--text-dark); position: relative; overflow: hidden; }
.sec-dark::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 46%, transparent 30%, rgba(44,36,22,0.7) 100%);
}
.sec-dark .page-wrap { position: relative; z-index: 1; }
.sec-dark .sec-title { color: var(--white); }
.sec-dark .sec-desc  { color: rgba(255,255,255,0.5); }
.sec-dark .sec-lbl   { color: var(--copper); }

.sec-head  { margin-bottom: 2rem; }
.sec-lbl {
    font-size: 0.62rem; font-weight: 700; letter-spacing: 2.5px;
    text-transform: uppercase; color: var(--copper); margin-bottom: 0.75rem;
    display: flex; align-items: center; gap: 0.6rem;
}
.sec-lbl::before { content: ''; display: block; width: 18px; height: 1px; background: currentColor; }
.sec-title {
    font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 600;
    color: var(--text-dark); line-height: 1.3; margin-bottom: 0.85rem;
}
.sec-desc { font-size: 0.95rem; color: var(--text-light); line-height: 1.75; }

/* Every desktop grid collapses to one column. */
.g2, .g3,
.moments-grid, .method-grid, .mssp-grid,
.mdm-grid, .price-grid, .buyer-grid, .diff-grid, .ft-wrap {
    display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}


/* ── HERO ─────────────────────────────────────────────────────────────────── */

.hero { background: var(--cream); padding: 2.5rem 1.25rem 3rem; }
.hero-content { margin-bottom: 2.5rem; }

.hero h1 {
    font-family: 'Cinzel', serif; font-size: 1.75rem; font-weight: 700;
    color: var(--text-dark); line-height: 1.22; margin-bottom: 1.1rem;
}
/* German and French headline strings are materially longer than the English
   one. Set at the same specificity as the rule above and outside any media
   query, so the cascade order is the file order and nothing can shadow it. */
.lang-fr .hero h1 { font-size: 1.6rem; }
.lang-de .hero h1 { font-size: 1.55rem; }

.hero h1 .grad {
    display: block;
    background: linear-gradient(135deg, var(--copper-dark) 0%, var(--copper) 50%, var(--orange) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hero p { font-size: 1rem; color: var(--text-light); line-height: 1.8; margin-bottom: 1.5rem; }

.hero-conclusion {
    font-size: 1rem; font-weight: 700; color: var(--copper);
    line-height: 1.55; margin: 1.5rem 0 1.75rem; padding-top: 1rem;
    position: relative;
}
.hero-conclusion::before {
    content: ''; display: block; width: 72px; height: 2px;
    background: var(--copper); margin-bottom: 1rem;
}

/* Stacked, not side by side: two uppercase nowrap buttons do not fit a 375px
   line once padding is comfortable enough to tap. */
.hero-btns { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.hero-btns .cta-btn, .hero-btns .sec-btn { text-align: center; }

.trust-row { display: flex; flex-direction: column; gap: 0.6rem; }
/* Both trust rows wrap. The desktop stylesheet wraps only the framework row,
   which is why the meta row overflows and is clipped at this width. */
.trust-row-meta,
.trust-row-frameworks {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.4rem 0.7rem;
}
.trust-row-meta span       { font-size: 0.78rem; color: var(--text-light); font-weight: 500; }
.trust-row-frameworks span { font-size: 0.8rem;  color: var(--text-medium); font-weight: 500; }


/* ── HERO MOCKUP ──────────────────────────────────────────────────────────────
 * Carried over in full — no row, pill or figure is dropped. The desktop lays
 * the gap panel out as a fixed 112px label column beside a pill cluster, which
 * leaves roughly 150px for the pills at this width. Here each row stacks: the
 * control label takes its own line and the pills wrap beneath it.
 * ────────────────────────────────────────────────────────────────────────── */

.hero-visual { display: block; }

.mockup {
    background: var(--white); border: 1px solid rgba(184,115,51,0.25);
    padding: 1rem; position: relative; overflow: hidden;
}
.mockup::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--copper) 0%, var(--orange) 100%);
}

.dash-header {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: space-between; align-items: center; margin-bottom: 0.85rem;
}
.dash-title { font-family: 'Cinzel', serif; font-size: 0.85rem; font-weight: 600; color: var(--text-dark); }
.dash-title-org { font-family: 'Raleway', sans-serif; font-size: 0.72rem; color: var(--text-light); margin-left: 0.3rem; }
.dash-badge {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.68rem; font-weight: 700; color: var(--green);
    background: var(--green-bg); border: 1px solid var(--green-border);
    padding: 0.25rem 0.6rem; border-radius: 20px;
}
.dash-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

.dash-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 1.1rem; }
.dash-stat {
    text-align: center; padding: 0.55rem 0.3rem;
    background: var(--cream); border: 1px solid var(--border); border-radius: 8px;
}
.dash-stat-ok   { background: var(--green-bg); border-color: var(--green-border); }
.dash-stat-warn { background: var(--amber-bg); border-color: var(--amber-border); }
.dash-stat-val  { font-size: 1.15rem; font-weight: 700; color: var(--text-dark); line-height: 1; margin-bottom: 0.25rem; }
.dash-stat-ok   .dash-stat-val { color: var(--green); }
.dash-stat-warn .dash-stat-val { color: var(--amber); }
.dash-stat-lbl  { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); line-height: 1.3; }

.m-section-label {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
    color: var(--text-dark); margin-bottom: 0.6rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.m-fw-badge {
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.4px;
    background: linear-gradient(135deg, var(--copper-dark), var(--copper));
    color: var(--white); padding: 0.2rem 0.55rem; border-radius: 8px;
}

.dash-table { margin-bottom: 0.85rem; }
.dash-fw-summary { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.4rem 0; }
.dash-fw-item { display: flex; align-items: center; gap: 0.55rem; }
.dash-fw-name { font-size: 0.72rem; font-weight: 800; color: var(--text-dark); width: 62px; flex-shrink: 0; }
.dash-fw-bar  { flex: 1; height: 8px; background: var(--cream-dark); border-radius: 3px; overflow: hidden; display: block; }
.dash-fw-fill { display: block; height: 100%; border-radius: 3px; }
.dash-fw-fill-green  { background: var(--green); }
.dash-fw-fill-copper { background: var(--copper); }
.dash-fw-fill-orange { background: var(--orange); }
.dash-pct      { font-size: 0.72rem; font-weight: 700; width: 34px; text-align: right; flex-shrink: 0; }
.dash-pct-ok   { color: var(--green); }
.dash-pct-warn { color: var(--amber); }
.dash-w-92 { width: 92%; }
.dash-w-88 { width: 88%; }
.dash-w-81 { width: 81%; }
.dash-w-74 { width: 74%; }

.gap-panel {
    background: var(--cream); border: 1px solid var(--border);
    border-left: 3px solid var(--amber); border-radius: 7px;
    padding: 0.7rem 0.75rem; margin-top: 0.5rem;
}
.gap-panel-title {
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--amber); line-height: 1.45; margin-bottom: 0.4rem;
}
.gap-panel-title strong { color: var(--copper-dark); font-weight: 800; }
.gap-panel-sub {
    font-size: 0.62rem; font-weight: 600; color: var(--text-light); font-style: italic;
    line-height: 1.5; margin-bottom: 0.5rem; padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border);
}
.gap-row {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.45rem 0; border-bottom: 1px solid var(--border);
}
.gap-row:last-child { border-bottom: none; padding-bottom: 0; }
.gap-control,
.gap-control-action { width: auto; font-size: 0.7rem; font-weight: 700; line-height: 1.4; }
.gap-control        { color: var(--text-dark); }
.gap-control-action { color: var(--copper-dark); padding-left: 0.5rem; }
.gap-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.fw-pill {
    font-size: 0.6rem; font-weight: 700; white-space: nowrap;
    padding: 0.15rem 0.45rem; border-radius: 9px; border: 1px solid;
}
.fw-pill-fail { background: var(--red-bg);   color: var(--red);   border-color: var(--red-border); }
.fw-pill-warn { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-border); }
.gap-resolve  { font-size: 0.64rem; color: var(--green); font-weight: 600; font-style: italic; line-height: 1.5; }
.gap-resolve strong { font-style: normal; font-weight: 700; }
.gap-queue {
    font-size: 0.62rem; font-weight: 700; color: var(--copper);
    padding-top: 0.45rem; margin-top: 0.3rem; border-top: 1px solid var(--border);
    text-align: right;
}

.dash-footer {
    display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start;
    padding-top: 0.7rem; margin-top: 0.7rem; border-top: 1px solid var(--border);
}
.dash-updated { font-size: 0.62rem; color: var(--text-light); font-style: italic; line-height: 1.5; }
.dash-report-btn {
    font-size: 0.68rem; font-weight: 700; color: var(--white);
    background: linear-gradient(135deg, var(--copper-dark), var(--copper));
    padding: 0.5rem 0.85rem; border-radius: 5px; align-self: stretch; text-align: center;
}


/* ── CARDS ────────────────────────────────────────────────────────────────── */

.site-card, .layer, .fw-card, .moment-card, .method-item, .mssp-item, .out-card {
    background: var(--white); border: 1px solid var(--border);
    border-top: 3px solid var(--copper);
}
.site-card, .layer { padding: 1.5rem 1.25rem; }
.fw-card           { padding: 1.35rem 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; }
.moment-card       { padding: 1.5rem 1.25rem; }
.method-item, .mssp-item { padding: 1.35rem 1.25rem; }

.sec-dark .moment-card,
.sec-dark .mdm-col {
    background: rgba(255,255,255,0.04);
    border-color: rgba(184,115,51,0.2); border-top-color: var(--copper);
}
.sec-dark .moment-card h3 { color: var(--white); }
.sec-dark .moment-card p  { color: rgba(255,255,255,0.55); }

.card-icon {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(184,115,51,0.1) 0%, rgba(255,107,53,0.1) 100%);
    border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem;
}
.card-icon svg { width: 30px; height: 30px; }

.site-card h3, .layer h3, .out-body h3 {
    font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 600;
    color: var(--text-dark); margin-bottom: 0.6rem; line-height: 1.35;
}
.site-card p, .out-body p { color: var(--text-light); font-size: 0.9rem; line-height: 1.7; }

.site-card ul, .layer ul, .out-body ul, .price-feats, .mdm-list, .buyer-col ul {
    list-style: none; padding: 0; margin-top: 0.9rem;
}
.site-card ul li, .layer ul li, .buyer-col li {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.5rem 0; font-size: 0.88rem; color: var(--text-medium);
    line-height: 1.55; border-bottom: 1px solid var(--cream-dark);
}
.site-card ul li:last-child, .layer ul li:last-child, .buyer-col li:last-child { border-bottom: none; }
.site-card ul li::before, .layer ul li::before, .buyer-col li::before {
    content: '—'; color: var(--copper); font-weight: 700; flex-shrink: 0;
}

.layer-strip { height: 3px; margin-bottom: 1rem; }
.fw-strip-dark { background: linear-gradient(90deg, var(--copper-dark), var(--copper-light)); }
.fw-strip-nist { background: linear-gradient(90deg, var(--orange), var(--copper-light)); }
.layer-tag {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.2px; color: var(--copper); margin-bottom: 0.5rem;
}
.layer-sub  { font-size: 0.88rem; color: var(--text-light); font-style: italic; line-height: 1.7; margin-bottom: 1rem; }
.layer-text { font-size: 0.9rem; color: var(--text-medium); line-height: 1.7; }

.moment-num {
    font-family: 'Cinzel', serif; font-size: 0.62rem; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; color: var(--copper);
    margin-bottom: 0.7rem; line-height: 1.4;
}
.moment-card h3 {
    font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700;
    color: var(--text-dark); line-height: 1.35; margin-bottom: 0.7rem;
}
.moment-card p { font-size: 0.85rem; color: var(--text-medium); line-height: 1.7; }

.fw-strip     { height: 3px; background: linear-gradient(90deg, var(--copper) 0%, var(--orange) 100%); margin-bottom: 0.4rem; }
.fw-card-name { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: var(--text-dark); }
.fw-org       { font-size: 0.82rem; color: var(--text-light); font-style: italic; }
.fw-desc      { font-size: 0.87rem; color: var(--text-medium); line-height: 1.65; }
.fw-tag {
    display: inline-block; align-self: flex-start; margin-top: 0.2rem;
    font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: var(--copper-dark); background: rgba(184,115,51,0.08);
    border: 1px solid rgba(184,115,51,0.2); padding: 3px 8px;
}
.fw-tag-ebios { background: rgba(184,115,51,0.1);  color: var(--copper-dark); }
.fw-tag-nist  { background: rgba(255,107,53,0.12); color: var(--orange); }
.fw-tag-cmmc  { background: rgba(139,90,43,0.12);  color: var(--copper-dark); }

.out-card { overflow: hidden; }
.out-head {
    padding: 0.9rem 1.25rem; background: var(--text-dark);
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
}
.out-head-copper { color: var(--copper-light); }
.out-head-orange { color: var(--orange); }
.out-body { padding: 1.35rem 1.25rem; }
.out-body ul li {
    padding: 0.45rem 0; font-size: 0.86rem; color: var(--text-medium);
    line-height: 1.55; border-bottom: 1px solid var(--cream-dark);
}
.out-body ul li:last-child { border-bottom: none; }
.out-body ul li::before { content: '→ '; color: var(--copper); font-weight: 700; }

.method-num { font-family: 'Cinzel', serif; font-size: 0.65rem; font-weight: 700; color: var(--copper); letter-spacing: 2px; margin-bottom: 0.6rem; }
.method-item h3, .mssp-item h4 { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; line-height: 1.4; }
.method-item p, .mssp-item p   { font-size: 0.87rem; color: var(--text-medium); line-height: 1.7; }
.mssp-item { background: var(--cream); border-top-width: 2px; }


/* ── DEPLOYMENT DIFF / BUYERS / MDM ───────────────────────────────────────── */

.diff-grid, .buyer-grid { border: 1px solid var(--border); gap: 0; }
.buyer-grid { border-top: 3px solid var(--copper); }

.diff-col  { padding: 1.5rem 1.25rem; }
/* The MDM column is first in the markup, so stacked it sits on top. The divider
   therefore belongs on the ARES column's top edge — a bottom border would draw
   a second line against the grid's own outer border and leave the two panels
   touching with nothing between them. */
.diff-col-ares { background: var(--text-dark); border-top: 1px solid rgba(184,115,51,0.2); }
.diff-col-mdm  { background: var(--cream-dark); }
.diff-col-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1.1rem; }
.diff-col-ares .diff-col-label { color: var(--copper); }
.diff-col-mdm  .diff-col-label { color: var(--text-light); }
.diff-row { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: 1rem; font-size: 0.85rem; line-height: 1.6; }
.diff-icon     { flex-shrink: 0; margin-top: 2px; font-size: 0.95rem; line-height: 1; }
.diff-icon-ok  { color: var(--green); }
.diff-icon-bad { color: var(--text-light); }
.diff-col-ares .diff-row { color: rgba(255,255,255,0.72); }
.diff-col-mdm  .diff-row { color: var(--text-medium); }
.diff-result {
    margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(184,115,51,0.2);
    font-size: 0.82rem; font-weight: 700; color: var(--copper-light); line-height: 1.6;
}
.diff-col-mdm .diff-result { border-top-color: var(--border); color: var(--text-light); font-weight: 400; }

.buyer-col { padding: 1.5rem 1.25rem; }
.buyer-col + .buyer-col { border-top: 1px solid var(--border); }
.buyer-role { font-size: 0.6rem; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--copper); margin-bottom: 0.8rem; }
.buyer-col h3 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.7rem; line-height: 1.4; }

.mdm-col { padding: 1.35rem 1.25rem; background: var(--white); border: 1px solid var(--border); border-top: 3px solid var(--copper); }
.mdm-col-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--copper); margin-bottom: 1rem; }
.sec-dark .mdm-ares { background: rgba(184,115,51,0.08); border-top-color: var(--copper-light); }
.mdm-col h3 { font-size: 0.95rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.9rem; line-height: 1.4; }
.sec-dark .mdm-col h3 { color: var(--white); }
.mdm-list li {
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.45rem 0; font-size: 0.84rem; line-height: 1.6;
    border-bottom: 1px solid var(--cream-dark); color: var(--text-medium);
}
/* Scoped rather than assumed: .mdm-list only ever appears inside a dark section
   today, but a base rule painting it white would fail silently the day it
   doesn't. */
.sec-dark .mdm-list li { border-bottom-color: rgba(255,255,255,0.07); color: rgba(255,255,255,0.6); }
.mdm-list li:last-child { border-bottom: none; }
.sec-dark .mdm-ares .mdm-list li { color: rgba(255,255,255,0.78); }
.mdm-list .ok::before  { content: '✓'; color: var(--green);        font-weight: 700; flex-shrink: 0; }
.mdm-list .bad::before { content: '✗'; color: var(--red);          font-weight: 700; flex-shrink: 0; }
.mdm-list .add::before { content: '+'; color: var(--copper-light); font-weight: 700; flex-shrink: 0; }
.mdm-anchor {
    margin-top: 1.5rem; padding: 1rem 1.1rem;
    border-left: 3px solid var(--copper); background: rgba(184,115,51,0.06);
    border-top: 1px solid rgba(184,115,51,0.2); border-right: 1px solid rgba(184,115,51,0.2);
    border-bottom: 1px solid rgba(184,115,51,0.2);
    font-size: 0.84rem; font-style: italic; line-height: 1.75; color: rgba(255,255,255,0.55);
}


/* ── CALLOUT BAR / COOKIE TABLE ───────────────────────────────────────────── */

.callout-bar {
    margin-top: 1.5rem; padding: 1.1rem 1.25rem;
    border-left: 3px solid var(--copper); background: rgba(184,115,51,0.05);
    border-top: 1px solid var(--border); border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.callout-bar h3 { font-size: 0.9rem; font-weight: 700; color: var(--copper-dark); margin-bottom: 0.4rem; line-height: 1.4; }
.callout-bar p  { font-size: 0.86rem; color: var(--text-medium); line-height: 1.75; }
.sec-dark .callout-bar { background: rgba(184,115,51,0.07); border-color: rgba(184,115,51,0.2); }
.sec-dark .callout-bar h3 { color: var(--copper-light); }
.sec-dark .callout-bar p  { color: rgba(255,255,255,0.55); }

/* The cookie table is the only table on the page. Rows stack so the two cells
   read as label-then-value rather than being squeezed into two columns. */
.cookie-tbl { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.cookie-tbl tr { display: block; padding: 0.5rem 0; border-bottom: 1px solid var(--cream-dark); }
.cookie-tbl tr:last-child { border-bottom: none; }
.cookie-tbl td { display: block; font-size: 0.85rem; line-height: 1.6; }
.cookie-tbl td:first-child {
    font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-light); margin-bottom: 0.2rem;
}
.cookie-tbl td:last-child { color: var(--text-medium); }
.cookie-tbl code {
    font-size: 0.82rem; background: var(--cream-dark);
    padding: 0.1rem 0.35rem; border-radius: 3px; color: var(--copper-dark);
}


/* ── PRICING ──────────────────────────────────────────────────────────────── */

.price-card {
    background: var(--white); border: 1px solid var(--border);
    border-top: 3px solid var(--copper); padding: 1.75rem 1.35rem;
    position: relative; overflow: hidden;
}
.price-card.gap { background: var(--cream); }
.price-card.hi  { background: var(--text-dark); border-color: var(--copper); }
.price-card.hi2 { border-color: var(--orange); border-top-color: var(--orange); }

.price-badge {
    position: absolute; top: 0; right: 1rem;
    background: linear-gradient(135deg, var(--copper) 0%, var(--orange) 100%);
    color: var(--white); padding: 0.28rem 0.75rem;
    font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
}
.price-badge-t2 { background: linear-gradient(135deg, var(--copper-dark) 0%, var(--orange) 100%); }

.tier-lbl    { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: var(--copper); margin-bottom: 0.7rem; }
.tier-lbl-t2 { color: var(--orange); }
.price-card.gap .tier-lbl { color: var(--copper-dark); }
.price-card.hi  .tier-lbl { color: var(--copper-light); }

.price-amt { font-family: 'Cinzel', serif; font-size: 2rem; font-weight: 700; color: var(--text-dark); line-height: 1.1; margin-bottom: 0.25rem; }
.price-card.hi .price-amt { color: var(--white); }
.price-card.gap .price-amt { color: var(--copper); }
.price-amt-sub    { font-family: 'Raleway', sans-serif; font-size: 0.9rem; font-weight: 400; opacity: 0.65; }
.price-amt-sub-t2 { font-family: 'Raleway', sans-serif; font-size: 0.9rem; font-weight: 400; color: var(--text-light); }

.price-per  { font-size: 0.82rem; color: var(--text-light); margin-bottom: 1.1rem; line-height: 1.5; }
.price-card.hi .price-per { color: rgba(255,255,255,0.6); }
.price-desc { font-size: 0.86rem; color: var(--text-medium); font-style: italic; line-height: 1.65; margin-bottom: 1.1rem; }
.price-card.hi .price-desc { color: rgba(255,255,255,0.72); }
.price-div  { height: 1px; background: var(--border); margin-bottom: 1.1rem; }
.price-card.hi .price-div { background: rgba(255,255,255,0.15); }

.price-feats { margin-bottom: 1.4rem; }
.price-feats li {
    display: flex; align-items: flex-start; gap: 0.55rem;
    padding: 0.5rem 0; font-size: 0.86rem; color: var(--text-medium);
    line-height: 1.55; border-bottom: 1px solid var(--cream-dark);
}
.price-feats li:last-child { border-bottom: none; }
.price-feats li::before { content: '—'; color: var(--copper); font-weight: 700; flex-shrink: 0; }
.price-card.hi .price-feats li { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.1); }
.price-card.hi .price-feats li::before { color: var(--copper-light); }

.roi-box {
    display: flex; gap: 0.75rem; align-items: flex-start;
    background: var(--copper-pale); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.1rem 1.15rem; margin-top: 1.25rem;
}
.roi-arrow { font-size: 1.25rem; flex-shrink: 0; color: var(--copper); line-height: 1.2; }
.roi-box p { font-size: 0.86rem; color: var(--text-medium); line-height: 1.7; }
.roi-box strong { color: var(--copper-dark); }
.roi-footnote { display: block; margin-top: 0.6rem; opacity: 0.65; font-size: 0.75rem; line-height: 1.6; }

.price-note {
    background: var(--cream); border-left: 4px solid var(--copper);
    padding: 1rem 1.15rem; margin-top: 1.25rem;
    font-size: 0.85rem; color: var(--text-medium); line-height: 1.7;
}
.price-note-sm { font-size: 0.78rem; color: var(--text-light); font-style: italic; margin-top: 0.9rem; line-height: 1.6; }


/* ── CTA / PARTNERS ───────────────────────────────────────────────────────── */

.cta-sec  { padding: 3rem 1.25rem; background: var(--cream); }
.cta-wrap { text-align: center; }
.cta-wrap h2 {
    font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 600;
    color: var(--text-dark); line-height: 1.3; margin-bottom: 1.1rem;
}
.cta-wrap p { font-size: 0.95rem; color: var(--text-light); line-height: 1.8; margin-bottom: 1.25rem; }
.cta-sub  { font-size: 0.85rem; color: var(--text-light); line-height: 1.9; }
.cta-foot { font-size: 0.9rem; margin-top: 1.1rem; }
.cta-foot a { color: var(--copper); font-weight: 600; }

.text-center { text-align: center; }
.text-center .sec-btn { display: inline-block; margin-top: 0.5rem; }


/* ── FOOTER ───────────────────────────────────────────────────────────────── */

footer { background: var(--text-dark); color: rgba(255,255,255,0.8); padding: 2.5rem 1.25rem 1.75rem; }
.ft-wrap { gap: 2rem; margin-bottom: 2rem; }
.ft-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.ft-logo  { height: 52px; }
.ft-name  { font-family: 'Cinzel', serif; font-size: 1.5rem; color: var(--white); font-weight: 600; letter-spacing: 2px; }
.ft-desc  { font-size: 0.86rem; line-height: 1.75; opacity: 0.7; }
.ft-col h4 { font-family: 'Cinzel', serif; color: var(--white); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.9rem; }
.ft-links { list-style: none; padding: 0; }
.ft-links li { margin-bottom: 0.15rem; }
.ft-links a  { display: block; padding: 0.5rem 0; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.88rem; }

.ft-bottom {
    padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center; opacity: 0.6; font-size: 0.78rem; line-height: 1.7;
}
.ft-viewfull { margin-top: 1rem; }
.ft-viewfull a {
    display: inline-block; padding: 0.6rem 1rem;
    color: var(--copper-light); text-decoration: none;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.6px;
    border: 1px solid rgba(184,115,51,0.35); border-radius: 2px;
}


/* ── ABOUT / TERMS PAGES ──────────────────────────────────────────────────── */

.ov-body { background: var(--white); padding: 2rem 1.25rem 3.5rem; }

.ab-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--copper); margin-bottom: 0.85rem; }
.ab-hero    { margin-bottom: 2rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--border); }
.ab-hero h1 { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; margin-bottom: 1rem; }
.ab-hero p  { font-size: 0.95rem; color: var(--text-medium); line-height: 1.85; }
.ab-hero p + p { margin-top: 0.9rem; }
.ab-section { margin-bottom: 2rem; }
.ab-section h2 {
    font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 600; color: var(--text-dark);
    margin-bottom: 0.9rem; padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--copper); display: inline-block;
}
.ab-section p { font-size: 0.93rem; color: var(--text-medium); line-height: 1.85; margin-bottom: 0.8rem; }
.ab-contact   { margin-top: 2rem; padding: 1.35rem 1.25rem; background: var(--cream); border-left: 3px solid var(--copper); }
.ab-contact p { font-size: 0.9rem; color: var(--text-medium); margin-bottom: 0.35rem; line-height: 1.65; }
.ab-contact a { color: var(--copper); font-weight: 600; text-decoration: none; }

.tc-head    { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.tc-head h1 { font-family: 'Cinzel', serif; font-size: 1.35rem; font-weight: 700; color: var(--text-dark); margin-bottom: 0.5rem; }
.tc-meta    { font-size: 0.8rem; color: var(--text-light); font-style: italic; line-height: 1.7; }
.tc-section { margin-bottom: 1.85rem; }
.tc-section h2 {
    font-family: 'Cinzel', serif; font-size: 0.9rem; font-weight: 600; color: var(--text-dark);
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.8rem;
}
.tc-section p, .tc-section li { font-size: 0.9rem; color: var(--text-medium); line-height: 1.85; margin-bottom: 0.65rem; }
.tc-section ul { padding-left: 1.25rem; margin-bottom: 0.65rem; }
.tc-section strong { color: var(--text-dark); font-weight: 600; }
.tc-foot { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--text-light); font-style: italic; }

/* Copper dash lists. Overrides the browser disc markers that .tc-section ul
   would otherwise render. Scoped under .tc-section so it outranks the
   .tc-section ul padding rule above. */
.tc-section .dash-list { list-style: none; padding-left: 0; }
.tc-section .dash-list li { padding-left: 1rem; position: relative; }
.tc-section .dash-list li::before { content: '—'; position: absolute; left: 0; color: var(--copper); }

.ov-contact-row { display: flex; align-items: center; gap: 1rem; }


/* ── SLIGHTLY WIDER PHONES ────────────────────────────────────────────────────
 * The only breakpoint in this file. Below it nothing changes; above it the
 * two smallest card grids gain a second column, which fits from about 600px —
 * large phones in landscape, and the foldables that report as phones.
 * ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 600px) {
    .moments-grid, .mssp-grid, .method-grid, .g2 { grid-template-columns: 1fr 1fr; }
    .hero-btns { flex-direction: row; }
    .hero-btns .cta-btn, .hero-btns .sec-btn { flex: 1; }
    .sec, .cta-sec, .hero { padding-left: 2rem; padding-right: 2rem; }
    .ov-body { padding-left: 2rem; padding-right: 2rem; }
}

/* ── DIRECT DESKTOP VISITS ────────────────────────────────────────────────────
 * Apache only routes phones here, but /m/ is a real URL that anyone can open on
 * a desktop — from a shared link, or by typing it. Without a cap the copy runs
 * the full width of the window at unreadable line lengths. This does not make a
 * desktop layout; it just keeps the mobile one legible when it is not on a
 * phone. The canonical tags already point search engines at the desktop pages.
 * ────────────────────────────────────────────────────────────────────────── */

@media (min-width: 820px) {
    .m-head-row, .m-head-actions,
    .page-wrap, .cta-wrap, .ov-body, .ft-wrap, .ft-bottom {
        max-width: 720px; margin-left: auto; margin-right: auto;
    }
    .hero { max-width: 720px; margin: 0 auto; }
}