/* public/css/my-coutts.css
   ============================================================================
   MY COUTTS — member environment.

   Every value is a Stage 4A/4B token. No new colour, type size, radius, shadow
   or spacing step is introduced: §40 asks for the existing approved system and
   rules out a generic SaaS dashboard, and the surest way to avoid one is to
   have no dashboard-specific design language at all.

   Restraint is deliberate — no coloured widgets, no large statistic tiles, no
   icon set. A member sees their own content, not a metrics display.
   ============================================================================ */

.mc-shell { padding: 0 0 var(--cx-section-feature); background: #FFF; }

/* ============================================================================
   1. BRANDED INTRODUCTION (§4)
   ----------------------------------------------------------------------------
   A compact navy panel, not a hero. §4 asks for elegance and restraint, and §32
   rules out giant typography and decorative dashboards — so this is one band of
   Coutts navy, a hairline of gold, and three lines of type.

   The gold is a 1px rule and an eyebrow. Nothing is filled with it (§7).
   ============================================================================ */
.mc-intro {
    background: var(--cx-navy);
    border-bottom: 1px solid rgba(217, 182, 90, .28);
    padding: var(--cx-section-standard) 0;
    margin-bottom: var(--cx-section-standard);
    position: relative;
}
/* A single hairline of gold across the foot of the panel — the detail that
   signals brand without spending colour. */
.mc-intro::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(to right,
    rgba(217,182,90,0) 0%, rgba(217,182,90,.55) 22%,
    rgba(217,182,90,.55) 78%, rgba(217,182,90,0) 100%);
}
.mc-intro-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--cx-gutter); }
.mc-intro-eyebrow {
    font-family: var(--cx-display); font-size: var(--cx-fs-label);
    font-weight: var(--cx-eyebrow-weight); letter-spacing: .18em; text-transform: uppercase;
    color: var(--cx-gold-soft); margin: 0 0 var(--cx-space-3);
}
.mc-intro-title {
    font-family: var(--cx-display); font-size: var(--cx-fs-h1); font-weight: 600;
    line-height: var(--cx-lh-heading); letter-spacing: -.02em;
    color: #FFF; margin: 0 0 var(--cx-space-3);
}
.mc-intro-lede {
    font-size: var(--cx-fs-body); line-height: var(--cx-lh-body);
    color: rgba(255,255,255,.76); margin: 0; max-width: 54ch;
}

/* §26 — the dashboard was leaving too much unused width on large screens.
   1320px with a slightly wider sidebar keeps the composition deliberate rather
   than compressed into the middle of the viewport. */
.mc-wrap {
    max-width: 1320px; margin: 0 auto; padding: 0 var(--cx-gutter);
    display: grid; grid-template-columns: 248px 1fr; gap: var(--cx-space-12);
    align-items: start;
}

/* ============================================================================
   2. MEMBER IDENTITY + NAVIGATION (§5, §6)
   ============================================================================ */
.mc-side { position: sticky; top: var(--cx-space-6); }

.mc-ident {
    padding-bottom: var(--cx-space-5); margin-bottom: var(--cx-space-5);
    border-bottom: 1px solid var(--cx-line);
}
.mc-ident-name {
    font-family: var(--cx-display); font-size: var(--cx-fs-h3); font-weight: 600;
    color: var(--cx-ink); margin: 0 0 var(--cx-space-1); line-height: var(--cx-lh-snug);
    letter-spacing: -.01em;
}
/* "My Coutts member" — a statement of fact. §6 forbids invented tiers, so there
   is no Gold/Platinum/Premier anywhere in this file. */
.mc-ident-role {
    font-size: var(--cx-fs-micro); font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: var(--cx-gold-ink); margin: 0;
}

.mc-side-nav { display: flex; flex-direction: column; }
.mc-side-nav a {
    display: flex; align-items: center; gap: var(--cx-space-3);
    /* §27 — was --cx-fs-sm (.88rem) and read as administrative. */
    font-size: var(--cx-fs-body); color: var(--cx-ink-soft); text-decoration: none;
    padding: 11px var(--cx-space-3) 11px var(--cx-space-4);
    border-left: 2px solid transparent; border-radius: 0 var(--cx-radius-sm) var(--cx-radius-sm) 0;
    transition: background var(--cx-t-fast), color var(--cx-t-fast), border-color var(--cx-t-fast);
}
.mc-side-nav a:hover { background: var(--cx-paper); color: var(--cx-ink); }
/* The selected page is unmistakable: paper ground, gold rule, ink text, weight. */
.mc-side-nav a.is-on {
    background: var(--cx-paper); color: var(--cx-ink);
    border-left-color: var(--cx-gold-ink); font-weight: 600;
}
.mc-side-nav a svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .5; }
.mc-side-nav a.is-on svg { opacity: 1; color: var(--cx-gold-ink); }

.mc-side-rule { display: block; height: 1px; background: var(--cx-line); margin: var(--cx-space-4) 0; }

.mc-side-out { margin-top: var(--cx-space-5); padding-left: var(--cx-space-4); }
/* The sidebar sign-out control. `font: inherit` is doing the work here that
   font-family does elsewhere — without one or the other a <button> falls back to
   the OS font (§35). */
.mc-side-out button, .mc-signout {
    background: none; border: 0; padding: 0;
    font: inherit; font-family: var(--cx-sans);
    font-size: var(--cx-fs-sm); font-weight: 600; color: var(--cx-muted);
    cursor: pointer; -webkit-appearance: none; appearance: none;
}
.mc-side-out button:hover { color: var(--cx-ink); text-decoration: underline; }

/* ============================================================================
   3. SECTIONS AND PANELS (§7)
   ============================================================================ */
.mc-h1 {
    font-family: var(--cx-display); font-size: var(--cx-fs-h1); font-weight: 600;
    line-height: var(--cx-lh-heading); color: var(--cx-ink); margin: 0 0 var(--cx-space-2);
    letter-spacing: -.015em;
}
.mc-lede {
    font-size: var(--cx-fs-body); line-height: var(--cx-lh-body);
    color: var(--cx-ink-soft); margin: 0 0 var(--cx-section-standard); max-width: var(--cx-measure);
}

.mc-section { margin-bottom: var(--cx-section-feature); }
.mc-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--cx-space-4); margin-bottom: var(--cx-space-5);
    padding-bottom: var(--cx-space-3);
    /* Navy rule rather than grey: sections separate crisply instead of merging (§3). */
    border-bottom: 1px solid rgba(11,22,38,.14);
}
.mc-h2 {
    font-family: var(--cx-display); font-size: var(--cx-fs-label); font-weight: var(--cx-eyebrow-weight);
    letter-spacing: .14em; text-transform: uppercase; color: var(--cx-ink); margin: 0;
}
.mc-section-head a {
    font-size: var(--cx-fs-sm); font-weight: 600; color: var(--cx-gold-ink);
    text-decoration: none; white-space: nowrap;
}
.mc-section-head a:hover { text-decoration: underline; }

.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--cx-space-4); }

/* Ivory ground, fine border, no shadow at rest — the shadow appears on hover so
   the page is calm until the member reaches for something (§7, §32). */
.mc-card {
    display: block; padding: var(--cx-card-pad-feature); background: #FFF;
    border: 1px solid var(--cx-line); border-radius: var(--cx-card-radius);
    text-decoration: none; position: relative; overflow: hidden;
    transition: border-color var(--cx-t-fast), box-shadow var(--cx-t-base), transform var(--cx-t-base);
}
/* A gold edge that appears on hover: accent, not fill. */
.mc-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--cx-gold-ink); opacity: 0; transition: opacity var(--cx-t-fast);
}
.mc-card:hover { border-color: #CFD6E0; box-shadow: var(--cx-shadow-2); transform: translateY(var(--cx-hover-lift)); }
.mc-card:hover::before { opacity: 1; }

.mc-card-eyebrow {
    display: block; font-size: var(--cx-fs-micro); font-weight: var(--cx-eyebrow-weight);
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--cx-gold-ink); margin-bottom: var(--cx-space-2);
}
.mc-card-title {
    display: -webkit-box; -webkit-line-clamp: var(--cx-card-title-lines); -webkit-box-orient: vertical;
    overflow: hidden; font-family: var(--cx-display); font-size: var(--cx-fs-sm);
    font-weight: 600; line-height: var(--cx-lh-snug); color: var(--cx-ink); margin: 0 0 var(--cx-space-2);
}
.mc-card-meta { font-size: var(--cx-fs-sm); color: var(--cx-muted); margin: 0; }

/* Jurisdiction card with imagery (§9) — reuses the Stage 4C focal system. */
.mc-card--media { padding: 0; }
.mc-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cx-paper); }
.mc-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos, 50% 50%); }
.mc-card--media .mc-card-body { padding: var(--cx-card-pad); }

.mc-rows { border-top: 1px solid var(--cx-line); }
.mc-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--cx-space-4);
    padding: var(--cx-space-4) 0; border-bottom: 1px solid var(--cx-line);
}
.mc-row-main { min-width: 0; }
.mc-row-title { font-size: var(--cx-fs-body); font-weight: 600; color: var(--cx-ink); margin: 0 0 2px; }
.mc-row-title a { color: inherit; text-decoration: none; }
.mc-row-title a:hover { color: var(--cx-gold-ink); }
.mc-row-meta  { font-size: var(--cx-fs-sm); color: var(--cx-muted); margin: 0; }
.mc-tag {
    font-size: var(--cx-fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    padding: var(--cx-badge-pad-y) var(--cx-badge-pad-x); border-radius: var(--cx-badge-radius);
    background: var(--cx-paper); color: var(--cx-ink-soft); white-space: nowrap;
    border: 1px solid var(--cx-line);
}

/* ============================================================================
   4. EMPTY STATES (§8)
   ----------------------------------------------------------------------------
   Purposeful, not apologetic: a title stating what the area is FOR, one line of
   explanation, one action. Tighter than before — §8 notes the old ones carried
   too much dead space.
   ============================================================================ */
.mc-empty {
    padding: var(--cx-space-8) var(--cx-card-pad-feature);
    background: var(--cx-paper);
    border: 1px solid var(--cx-line); border-radius: var(--cx-card-radius);
}
.mc-empty-title {
    font-family: var(--cx-display); font-size: var(--cx-fs-h3); font-weight: 600;
    color: var(--cx-ink); margin: 0 0 var(--cx-space-2); line-height: var(--cx-lh-snug);
}
.mc-empty p {
    font-size: var(--cx-fs-body); line-height: var(--cx-lh-body); color: var(--cx-ink-soft);
    margin: 0 0 var(--cx-space-5); max-width: 52ch;
}

/* ============================================================================
   5. CONCLUDING ADVISER CTA — REMOVED
   ----------------------------------------------------------------------------
   The "Need specialist assistance?" panel is gone from the dashboard: the global
   footer already closes every page with the same request, and asking twice on one
   page competes with itself. All .mc-cta rules removed rather than left orphaned.
   ============================================================================ */

/* ---- responsive (§39) ---------------------------------------------------
   The sidebar becomes a horizontal scroll rail rather than shrinking into an
   unreadable column, and the grid collapses to one card per row. No table is
   ever compressed into multiple columns on a phone. */
@media (max-width: 900px) {
    .mc-wrap { grid-template-columns: 1fr; gap: var(--cx-space-6); }

    /* §12 — the sidebar becomes a horizontal tab rail, not a cramped column.
       It is scrollable rather than wrapped, so the row height stays constant and
       the selected item never jumps to a second line. */
    .mc-side { position: static; }
    .mc-ident {
        display: flex; align-items: baseline; gap: var(--cx-space-3);
        padding-bottom: var(--cx-space-4); margin-bottom: var(--cx-space-4);
    }
    .mc-ident-name { margin: 0; font-size: var(--cx-fs-card-title); }
    .mc-side-nav {
        flex-direction: row; overflow-x: auto; gap: 0;
        border-bottom: 1px solid var(--cx-line);
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .mc-side-nav::-webkit-scrollbar { display: none; }
    .mc-side-nav a {
        white-space: nowrap; border-left: 0; border-radius: 0;
        border-bottom: 2px solid transparent; padding: var(--cx-space-3) var(--cx-space-4);
        background: none;
    }
    .mc-side-nav a.is-on {
        border-left: 0; border-bottom-color: var(--cx-gold-ink); background: none;
    }
    .mc-side-rule { display: none; }
    .mc-side-out { margin-top: var(--cx-space-4); padding-left: var(--cx-space-4); }

    .mc-intro { padding: var(--cx-section-compact) 0; margin-bottom: var(--cx-section-compact); }
}

@media (max-width: 599px) {
    .mc-grid { grid-template-columns: 1fr; }
    /* Rows stack rather than compressing into columns (§39/§12). */
    .mc-row { flex-direction: column; align-items: flex-start; gap: var(--cx-space-2); }
    .mc-form { max-width: none; }

    .mc-empty { padding: var(--cx-card-pad-feature) var(--cx-card-pad); }
    .mc-notice { flex-direction: column; align-items: flex-start; }
    .mc-notice-actions { width: 100%; }
    .mc-notice-actions .mc-btn { flex: 1 1 auto; }

    .mc-auth-shell { padding: var(--cx-section-standard) var(--cx-space-4); }
    .mc-auth-body, .mc-auth-head, .mc-auth-foot { padding-left: var(--cx-space-5); padding-right: var(--cx-space-5); }
}

/* ---- save control on public pages (§11, §13) ---------------------------- */
/* The control is wrapped in a <form> for CSRF. `display: inline` left that wrapper
   as an unpredictable flex item inside hero CTA rows (.cy-hero-cta is a flex
   container), so the button could sit off the shared baseline. inline-flex makes
   the wrapper align its child on the same line as the sibling buttons, and
   align-items:center keeps the label centred against them. */
.mc-save-form { display: inline-flex; align-items: center; vertical-align: middle; }

/* CONTEXT-DEPENDENT SPACING.
   .cy-hero-cta is a flex row with its own gap, so the wrapper must add nothing
   there or the control sits further out than the buttons beside it. The
   proposition hero lays its buttons out inline with no gap, so spacing has to
   come from here instead. Hence a default margin, reset inside the flex row. */
/* :has() deliberately avoided — support is good but not universal, and this is
   layout spacing rather than an enhancement. The margin sits on the control
   itself, which works in every browser. */
.mc-save--hero { margin-left: .55rem; }
.cy-hero-cta .mc-save-form, .cy-hero-cta .mc-save--hero { margin-left: 0; }
.mc-save {
    display: inline-flex; align-items: center; gap: var(--cx-space-2);
    min-height: var(--cx-btn-h-sm); padding: 0 var(--cx-btn-pad-x-sm);
    /* font-family is explicit: a <button> does not inherit it (§35). */
    font-family: var(--cx-sans); font-size: var(--cx-fs-meta); font-weight: 600;
    -webkit-appearance: none; appearance: none;
    color: var(--cx-ink-soft); background: transparent; text-decoration: none;
    border: var(--cx-border-strong); border-radius: var(--cx-btn-radius); cursor: pointer;
    transition: background var(--cx-t-fast), border-color var(--cx-t-fast), color var(--cx-t-fast);
}
.mc-save:hover { background: var(--cx-paper); color: var(--cx-ink); border-color: #CFD6E0; }

/* ---- dark-ground variant --------------------------------------------------
   For the jurisdiction and proposition heroes, where the control sits on a
   photograph beside the page's own buttons.

   THE DEFAULT STYLING WAS WRONG THERE ON THREE COUNTS: 34px against the hero
   buttons' 42px, 14px horizontal padding against their 20px, and dark ink text
   with a pale grey border — both effectively invisible over an image. The result
   read as loose gold text floating next to two proper buttons.

   Geometry is taken from .cy-btn / .mp-btn rather than re-invented, so the three
   controls share a baseline, a height and a radius. The treatment matches the
   ghost button beside it: transparent with a white hairline, because the gold
   fill belongs to the single primary action on the page. */
.mc-save--hero {
    /*
     * SECONDARY CTA over a photographic hero (§4).
     *
     * The previous treatment was transparent with a 35% white hairline. Over a bright hero —
     * the Dubai skyline, a sunlit streetscape — that border effectively vanished and the
     * control read as disabled rather than secondary. Three corrections:
     *
     *   1. a restrained dark backdrop, so the control has its own ground and does not depend
     *      on whatever happens to be behind it;
     *   2. the border raised to 55% white, clearly visible against any hero;
     *   3. text at full white.
     *
     * It is still unmistakably secondary: no fill, no gold background. The gold belongs to
     * the single primary action.
     */
    min-height: var(--cx-btn-h);
    padding: 0 var(--cx-btn-pad-x);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    color: #FFF;
    background: rgba(11, 22, 38, .55);
    /*
     * GOLD-TONED border, not white (§7, §9).
     *
     * On a jurisdiction hero this control sits beside .cy-btn-ghost, which is a white
     * outline. A white border here would have made the tertiary My Coutts action compete
     * with — and at this weight outrank — the secondary "Speak to an adviser". The gold
     * border marks it as a different FAMILY rather than a higher priority, so the hierarchy
     * reads gold fill > white outline > gold outline, and the same treatment works on a
     * proposition hero where no ghost button is present.
     */
    border: 1px solid rgba(217, 182, 90, .6);
    border-radius: var(--cx-btn-radius);
}
/* The icon carries the My Coutts gold accent — the family marker (§9) — while the label
   stays white so legibility never depends on the accent colour. */
.mc-save--hero .mc-save-icon { color: var(--cx-gold-soft); }
.mc-save--hero:hover {
    background: rgba(11, 22, 38, .78);
    border-color: var(--cx-gold-soft);
    color: #FFF;
}
/* Saved/following state: gold hairline, still not a fill. */
/*
 * SAVED / FOLLOWING (§5, §8).
 *
 * A successful action, not a dead control: gold label, gold border, gold-tinted dark ground.
 * Deliberately NOT greyed out and never disabled — the button stays live so the member can
 * unsave, and communicating success by graying out is exactly what the brief rules out.
 */
.mc-save--hero.mc-save--on {
    color: var(--cx-gold-soft);
    border-color: var(--cx-gold-soft);
    /*
     * The ground is DARK, not gold-tinted. A gold label on a gold wash measured 1.2:1 over a
     * sunlit hero — invisible. Gold on this dark ground is 4.8:1, and the gold border plus
     * gold label still read unmistakably as "saved" against the idle state's white border.
     */
    background: rgba(11, 22, 38, .72);
}
.mc-save--hero.mc-save--on .mc-save-icon { color: var(--cx-gold-soft); }
.mc-save--hero.mc-save--on:hover {
    background: rgba(11, 22, 38, .85);
    border-color: #E4C570;
    color: #E4C570;
}

/* Bookmark / tick icon inside the control. */
.mc-save-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.mc-save--hero.mc-save--on:hover {
    background: rgba(217, 182, 90, .1);
    border-color: var(--cx-gold-soft);
    color: var(--cx-gold-soft);
}
.mc-save--hero:focus-visible {
    outline: var(--cx-focus-w) solid var(--cx-gold-soft);
    outline-offset: 2px;
}
.mc-save--on { color: var(--cx-gold-ink); border-color: var(--cx-gold-ink); }

/* ---- publication download gate (§15) -----------------------------------
   Matches the Service Information disclosure: paper ground, single gold rule.
   An invitation, not an interstitial. */
.mc-gate {
    margin: var(--cx-section-compact) 0;
    padding: var(--cx-card-pad-feature);
    background: var(--cx-paper); border-left: 3px solid var(--cx-gold-ink);
    border-radius: var(--cx-radius);
}
.mc-gate-title {
    font-family: var(--cx-display); font-size: var(--cx-fs-h3); font-weight: 600;
    color: var(--cx-ink); margin: 0 0 var(--cx-space-2); line-height: var(--cx-lh-snug);
}
.mc-gate-text {
    font-size: var(--cx-fs-sm); line-height: var(--cx-lh-body); color: var(--cx-ink-soft);
    margin: 0 0 var(--cx-space-4); max-width: var(--cx-measure);
}
.mc-gate-actions { display: flex; flex-wrap: wrap; gap: var(--cx-space-3); }
.mc-gate-save { display: inline; margin-left: var(--cx-space-4); }

@media (max-width: 599px) {
    .mc-gate { padding: var(--cx-card-pad); }
    .mc-gate-actions { flex-direction: column; align-items: stretch; }
    .mc-gate-save { display: block; margin: var(--cx-space-3) 0 0; }
}

/* ============================================================================
   5b. FORM SYSTEM AND BUTTONS  (§5–§20)
   ----------------------------------------------------------------------------
   REBUILT. An earlier block replacement in this file removed the button and form
   rules outright, which is why controls were rendering as raw browser widgets —
   there were no rules left to apply. Restored here with the alignment,
   consistency and component requirements of the finishing pass.

   THE FONT-FAMILY LINE ON CONTROLS IS NOT OPTIONAL. <button>, <input>, <select>
   and <textarea> do NOT inherit font-family from their ancestors; they fall back
   to the operating-system UI font. Omitting it is the single most common reason a
   styled form still "looks like a browser form" (§35).
   ============================================================================ */

/* ---- one grid for every form (§6) --------------------------------------
   All labels share a left edge, all inputs share both edges, and the vertical
   rhythm between label, input, help text and the next field is fixed here rather
   than per-field. Nothing in a My Coutts form sets its own width. */
.mc-form { width: 100%; }

.mc-field { margin: 0 0 var(--cx-space-5); }

.mc-field > label {
    display: block;
    font-family: var(--cx-sans);
    font-size: var(--cx-fs-form-label);
    font-weight: 600;
    color: var(--cx-ink);
    margin: 0 0 var(--cx-space-2);
    line-height: var(--cx-lh-snug);
}

/* §8 — every control is full width. The form is short enough that a single
   column reads as more considered than a half-width grid. */
.mc-field input[type="text"],
.mc-field input[type="email"],
.mc-field input[type="password"],
.mc-field input[type="tel"],
.mc-field input[type="url"],
.mc-field select,
.mc-field textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;                        /* §9 — one height for every control */
    padding: 0 14px;
    font-family: var(--cx-sans);             /* see the note above */
    font-size: var(--cx-fs-input);           /* 1rem — below 16px iOS zooms on focus */
    line-height: 1.4;
    color: var(--cx-ink);
    background-color: #FFF;
    border: 1px solid #CFD6E0;
    border-radius: var(--cx-radius-sm);
    transition: border-color var(--cx-t-fast), box-shadow var(--cx-t-fast);
    -webkit-appearance: none;
    appearance: none;                        /* §10 — no native chrome */
}

.mc-field textarea {
    padding: 12px 14px;
    min-height: 130px;
    line-height: var(--cx-lh-body);
    resize: vertical;
}

/* §11 — the select must not look like a raw browser control. appearance:none
   removes the native arrow; this draws a restrained one back in, and the extra
   right padding stops long country names running under it. */
.mc-field select {
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%2355606E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 8px;
    cursor: pointer;
}

.mc-field input::placeholder, .mc-field textarea::placeholder { color: #8C97A4; }

/* §10 — a restrained focus state: gold border and a thin ring. No glow. */
.mc-field input:focus,
.mc-field select:focus,
.mc-field textarea:focus {
    outline: none;
    border-color: var(--cx-gold-ink);
    box-shadow: 0 0 0 3px rgba(138, 110, 18, .12);
}
/* Keyboard users additionally get the system-consistent ring from the global
   :focus-visible rule; this keeps that visible rather than suppressing it. */
.mc-field input:focus-visible,
.mc-field select:focus-visible,
.mc-field textarea:focus-visible {
    outline: var(--cx-focus-w) solid var(--cx-focus-color);
    outline-offset: 1px;
}

.mc-field input[aria-invalid="true"], .mc-field.has-error input { border-color: #A3231B; }

.mc-hint {
    font-size: var(--cx-fs-meta);
    line-height: var(--cx-lh-snug);
    color: var(--cx-muted);
    margin: var(--cx-space-2) 0 0;
}
.mc-error {
    font-size: var(--cx-fs-meta);
    line-height: var(--cx-lh-snug);
    color: #A3231B;                          /* 6.1:1 on white */
    margin: var(--cx-space-2) 0 0;
}

/* ---- grouped sections (§23) --------------------------------------------
   Subtle labels, not headings that compete with the page title. */
.mc-fieldset { border: 0; padding: 0; margin: 0 0 var(--cx-space-8); }
.mc-fieldset > legend {
    display: block;
    width: 100%;
    padding: 0 0 var(--cx-space-3);
    margin: 0 0 var(--cx-space-5);
    font-family: var(--cx-display);
    font-size: var(--cx-fs-micro);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cx-muted);
    border-bottom: 1px solid var(--cx-line);
}
.mc-fieldset > legend .mc-optional { color: #9AA6B6; font-weight: 400; letter-spacing: .08em; }

/* ---- checkboxes (§14, §15, §16) ----------------------------------------
   GRID, not flex. A two-column grid with the box in a fixed 18px track keeps the
   control aligned to the FIRST LINE of the label however many lines the label
   runs to — which is what stops the checkbox floating on a line of its own above
   its text. align-items:start plus a small top margin optically centres the box
   against the first line's cap height. */
.mc-check {
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: var(--cx-space-3);
    align-items: start;
    margin: 0 0 var(--cx-space-4);
}
.mc-check > input[type="checkbox"] {
    width: 18px; height: 18px; margin: 2px 0 0; flex: none;
    accent-color: var(--cx-gold-ink);        /* native control, brand tint */
    cursor: pointer;
}
.mc-check > label {
    margin: 0;
    font-family: var(--cx-sans);
    font-size: var(--cx-fs-sm);
    font-weight: 400;
    line-height: var(--cx-lh-body);
    color: var(--cx-ink-soft);
    cursor: pointer;
}
.mc-check > label strong { display: block; font-weight: 600; color: var(--cx-ink); margin-bottom: 2px; }
.mc-check > label a { color: var(--cx-gold-ink); font-weight: 600; }
.mc-check + .mc-error { margin: calc(var(--cx-space-3) * -1) 0 var(--cx-space-4) 30px; }

/* ---- legal note (§17) — supporting text, not competing with the form ---- */
.mc-legal-note {
    margin: var(--cx-space-6) 0;
    padding-top: var(--cx-space-5);
    border-top: 1px solid var(--cx-line);
    font-size: var(--cx-fs-meta);
    line-height: var(--cx-lh-body);
    color: var(--cx-muted);
}

/* ---- interest / jurisdiction pills -------------------------------------- */
.mc-pills { display: flex; flex-wrap: wrap; gap: var(--cx-space-2); }
.mc-pill { position: relative; display: inline-flex; }
.mc-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mc-pill span {
    display: inline-block; padding: 9px 16px;
    font-family: var(--cx-sans); font-size: var(--cx-fs-meta);
    border: 1px solid #CFD6E0; border-radius: var(--cx-radius-pill);
    color: var(--cx-ink-soft); background: #FFF;
    transition: background var(--cx-t-fast), border-color var(--cx-t-fast), color var(--cx-t-fast);
}
.mc-pill:hover span { border-color: var(--cx-gold-ink); color: var(--cx-ink); }
.mc-pill input:checked + span { background: var(--cx-navy); border-color: var(--cx-navy); color: #FFF; }
.mc-pill input:focus-visible + span { outline: var(--cx-focus-w) solid var(--cx-focus-color); outline-offset: 2px; }

/* ---- BUTTON SYSTEM (§18, §19, §20) -------------------------------------
   ONE component. font-family is declared explicitly — without it a <button>
   renders in the OS font while an <a class="mc-btn"> renders in Inter, which is
   exactly the mismatch reported.

   Casing follows the main site: sentence case, not shouty capitals (§20). */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cx-btn-gap);
    min-height: var(--cx-btn-h);
    padding: 0 var(--cx-btn-pad-x);
    font-family: var(--cx-sans);
    font-size: var(--cx-btn-fs);
    font-weight: var(--cx-btn-weight);
    line-height: 1;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--cx-btn-radius);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--cx-t-fast), border-color var(--cx-t-fast),
    color var(--cx-t-fast), box-shadow var(--cx-t-base), transform var(--cx-t-base);
}
.mc-btn:focus-visible { outline: var(--cx-focus-w) solid var(--cx-focus-color); outline-offset: 2px; }

.mc-btn--primary { background-color: var(--cx-gold-ink); border-color: var(--cx-gold-ink); color: #FFF; }
.mc-btn--primary:hover {
    background-color: #755D0F; border-color: #755D0F; color: #FFF;
    box-shadow: var(--cx-shadow-2); transform: translateY(var(--cx-hover-lift));
}

/* §19 — secondary: outlined navy. */
.mc-btn--ghost { background-color: transparent; border-color: #CFD6E0; color: var(--cx-ink); }
.mc-btn--ghost:hover { background-color: var(--cx-paper); border-color: var(--cx-navy); color: var(--cx-navy); }

.mc-btn--sm { min-height: var(--cx-btn-h-sm); padding: 0 var(--cx-btn-pad-x-sm); font-size: var(--cx-fs-micro); }
.mc-btn--block { width: 100%; }

.mc-btn--link {
    background: none; border: 0; padding: 0; min-height: 0;
    color: var(--cx-muted); font-size: var(--cx-fs-meta); font-weight: 600;
}
.mc-btn--link:hover { color: var(--cx-ink); text-decoration: underline; }

.mc-btn[disabled], .mc-btn.is-disabled {
    opacity: .55; cursor: not-allowed; pointer-events: none; box-shadow: none; transform: none;
}

/* ---- flash ------------------------------------------------------------- */
.mc-flash {
    padding: var(--cx-space-4) var(--cx-space-5);
    margin: 0 0 var(--cx-space-6);
    background: var(--cx-paper);
    border: 1px solid var(--cx-line);
    border-left: 3px solid var(--cx-gold-ink);
    border-radius: var(--cx-radius);
    font-size: var(--cx-fs-sm);
    line-height: var(--cx-lh-body);
    color: var(--cx-ink-soft);
}

/* ============================================================================
   6. PASSWORD FIELD WITH REVEAL (§14)
   ============================================================================ */
.mc-pw { position: relative; }
.mc-pw input { padding-right: 46px; }   /* room for the control, so text never runs under it */
.mc-pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0;
    background: none; border: 0; cursor: pointer; color: var(--cx-muted);
    border-radius: var(--cx-radius-sm); transition: color var(--cx-t-fast), background var(--cx-t-fast);
}
.mc-pw-toggle:hover { color: var(--cx-ink); background: var(--cx-paper); }
.mc-pw-toggle:focus-visible { outline: var(--cx-focus-w) solid var(--cx-focus-color); outline-offset: 1px; }
.mc-pw-toggle svg { width: 18px; height: 18px; }
/* Only one of the two icons is shown; the script flips the attribute. */
.mc-pw-toggle .icon-off { display: none; }
.mc-pw-toggle[data-shown="true"] .icon-on  { display: none; }
.mc-pw-toggle[data-shown="true"] .icon-off { display: inline; }

/* ---- password requirements (§15) ---------------------------------------
   Shown from the outset, not withheld until submission. Ticks fill in live.
   Deliberately not a strength meter — §15 rules out a complicated interface. */
.mc-pwreq { margin: var(--cx-space-3) 0 0; padding: 0; list-style: none; }
.mc-pwreq li {
    display: flex; align-items: center; gap: var(--cx-space-2);
    font-size: var(--cx-fs-meta); color: var(--cx-muted); line-height: 1.9;
}
.mc-pwreq li::before {
    content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
    border: 1px solid #CFD6E0; background: transparent;
    transition: background var(--cx-t-fast), border-color var(--cx-t-fast);
}
.mc-pwreq li.is-met { color: var(--cx-ink-soft); }
.mc-pwreq li.is-met::before {
    background: var(--cx-gold-ink) no-repeat center;
    border-color: var(--cx-gold-ink);
    /* Inline SVG tick — no icon font dependency for a live state indicator. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px 10px;
}

/* ---- honeypot (§18) -----------------------------------------------------
   Off-screen rather than display:none. A number of bots skip fields that are
   display:none precisely because it is the obvious trap; position/opacity is
   less detectable. aria-hidden + tabindex=-1 in the markup keep it away from
   assistive technology and keyboard order, so genuine users never meet it. */
.mc-hp {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

/* ---- Turnstile (§16) ---------------------------------------------------- */
.mc-turnstile { margin: var(--cx-space-5) 0; min-height: 65px; }

/* ============================================================================
   7. AUTH PAGES (§13)
   ----------------------------------------------------------------------------
   Not Laravel screens: a navy crest band above a bordered ivory card, using the
   same restraint as the member environment.
   ============================================================================ */
.mc-auth-shell {
    min-height: 60vh; background: var(--cx-paper);
    padding: var(--cx-section-feature) var(--cx-gutter);
}
/* §7 — 600px usable. The narrow 480px card made an eight-field form feel cramped.
   Sign-in and the shorter forms stay narrower via .mc-auth--narrow so a two-field
   card is not stranded in a wide box. */
.mc-auth {
    max-width: 600px; margin: 0 auto; background: #FFF;
    border: 1px solid var(--cx-line); border-radius: var(--cx-radius-xl);
    box-shadow: var(--cx-shadow-2); overflow: hidden;
}
.mc-auth-head {
    background: var(--cx-navy); padding: var(--cx-space-6) var(--cx-space-8);
    text-align: center; border-bottom: 2px solid var(--cx-gold-soft);
}
.mc-auth-head img { height: 44px; width: auto; margin: 0 auto var(--cx-space-3); display: block; }
.mc-auth-head .mc-auth-brand {
    font-family: var(--cx-display); font-size: var(--cx-fs-label); font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--cx-gold-soft); margin: 0;
}
.mc-auth--narrow { max-width: 480px; }
.mc-auth-body { padding: var(--cx-space-10) var(--cx-space-10) var(--cx-space-8); }
.mc-auth-body .mc-h1 { font-size: var(--cx-fs-h2); margin-bottom: var(--cx-space-3); }
.mc-auth-body .mc-lede { font-size: var(--cx-fs-sm); margin-bottom: var(--cx-space-6); }
.mc-auth-body .mc-form { max-width: none; }
.mc-auth-body .mc-btn--primary { width: 100%; }
.mc-auth-foot {
    padding: var(--cx-space-5) var(--cx-space-8); background: var(--cx-paper);
    border-top: 1px solid var(--cx-line); text-align: center;
    font-size: var(--cx-fs-meta); color: var(--cx-muted);
}
.mc-auth-foot a { color: var(--cx-gold-ink); font-weight: 600; }
.mc-auth-alt { font-size: var(--cx-fs-meta); color: var(--cx-muted); margin-top: var(--cx-space-4); text-align: center; }
.mc-auth-alt a { color: var(--cx-gold-ink); }

/* ---- first-use onboarding + verified success (§28, §29) ----------------- */
.mc-notice {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-space-4);
    justify-content: space-between;
    padding: var(--cx-card-pad) var(--cx-card-pad-feature); margin-bottom: var(--cx-section-compact);
    background: var(--cx-paper); border: 1px solid var(--cx-line);
    border-left: 3px solid var(--cx-gold-ink); border-radius: var(--cx-radius);
}
.mc-notice-title {
    font-family: var(--cx-display); font-size: var(--cx-fs-card-title); font-weight: 600;
    color: var(--cx-ink); margin: 0 0 2px;
}
.mc-notice p { font-size: var(--cx-fs-meta); color: var(--cx-ink-soft); margin: 0; }
.mc-notice-actions { display: flex; gap: var(--cx-space-3); flex-wrap: wrap; }

/* ============================================================================
   KNOWLEDGE CENTRE DOWNLOAD GATE (§3)
   ----------------------------------------------------------------------------
   Navy, white, restrained gold. Deliberately not a Bootstrap dialog and not a
   marketing pop-up: it appears only after the visitor has asked to download, it
   is dismissible, and it never appears on ordinary browsing.
   ============================================================================ */
.kc-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--cx-space-6);
}
.kc-modal[hidden] { display: none; }
body.kc-modal-open { overflow: hidden; }

.kc-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 22, 38, .62); }

.kc-modal-panel {
    position: relative; width: 100%; max-width: 460px;
    background: #FFF; border-radius: var(--cx-radius-xl);
    box-shadow: 0 24px 64px rgba(11, 22, 38, .34);
    overflow: hidden;
    /* A gold rule across the head — the Coutts marker, used once. */
    border-top: 3px solid var(--cx-gold-soft);
}

.kc-modal-x {
    position: absolute; top: 12px; right: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    background: none; border: 0; border-radius: var(--cx-radius-sm);
    color: var(--cx-muted); cursor: pointer; font-family: var(--cx-sans);
    -webkit-appearance: none; appearance: none;
}
.kc-modal-x:hover { background: var(--cx-paper); color: var(--cx-ink); }
.kc-modal-x:focus-visible { outline: var(--cx-focus-w) solid var(--cx-focus-color); outline-offset: 1px; }

.kc-modal-body { padding: var(--cx-space-8); }
.kc-modal-eyebrow {
    font-family: var(--cx-display); font-size: var(--cx-fs-label);
    font-weight: var(--cx-eyebrow-weight); letter-spacing: .18em; text-transform: uppercase;
    color: var(--cx-gold-ink); margin: 0 0 var(--cx-space-3);
}
.kc-modal-title {
    font-family: var(--cx-display); font-size: var(--cx-fs-h2); font-weight: 600;
    line-height: var(--cx-lh-heading); color: var(--cx-ink); margin: 0 0 var(--cx-space-4);
}
.kc-modal-text {
    font-size: var(--cx-fs-sm); line-height: var(--cx-lh-body);
    color: var(--cx-ink-soft); margin: 0 0 var(--cx-space-4); max-width: 46ch;
}
.kc-modal-actions { margin-top: var(--cx-space-6); }
.kc-modal-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    min-height: var(--cx-btn-h); padding: 0 var(--cx-btn-pad-x);
    font-family: var(--cx-sans); font-size: var(--cx-btn-fs); font-weight: var(--cx-btn-weight);
    line-height: 1; border: 1px solid transparent; border-radius: var(--cx-btn-radius);
    text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
    transition: background var(--cx-t-fast), box-shadow var(--cx-t-base);
}
.kc-modal-btn--primary { background: var(--cx-gold-ink); color: #FFF; }
.kc-modal-btn--primary:hover { background: #755D0F; color: #FFF; box-shadow: var(--cx-shadow-2); }
.kc-modal-btn:focus-visible { outline: var(--cx-focus-w) solid var(--cx-focus-color); outline-offset: 2px; }

.kc-modal-alt {
    font-size: var(--cx-fs-meta); color: var(--cx-muted);
    margin: var(--cx-space-4) 0 0; text-align: center;
}
.kc-modal-alt a { color: var(--cx-gold-ink); font-weight: 600; cursor: pointer; }

@media (max-width: 599px) {
    .kc-modal { padding: var(--cx-space-4); align-items: flex-end; }
    .kc-modal-panel { max-width: none; border-radius: var(--cx-radius-lg); }
    .kc-modal-body { padding: var(--cx-space-6); }
}

/* ---- international telephone control (§2, §13) --------------------------
   One bordered group containing the dialling select and the number input, so
   they read as a single field. The group carries the border; the two controls
   inside are borderless, which is what stops it looking like two fields that
   happen to be adjacent.

   grid-template-columns with a fixed first track keeps the code column a
   predictable width — flex would let a long country name push the number input
   until it was unusable. */
.mc-phone {
    display: grid;
    grid-template-columns: 148px 1fr;
    align-items: stretch;
    border: 1px solid #CFD6E0;
    border-radius: var(--cx-radius-sm);
    background: #FFF;
    overflow: hidden;
}
.mc-phone:focus-within {
    border-color: var(--cx-gold-ink);
    box-shadow: 0 0 0 3px rgba(138, 110, 18, .12);
}

.mc-field .mc-phone select.mc-phone-code,
.mc-field .mc-phone input.mc-phone-number {
    border: 0; border-radius: 0; box-shadow: none; min-height: 44px;
}
.mc-field .mc-phone select.mc-phone-code:focus,
.mc-field .mc-phone input.mc-phone-number:focus { box-shadow: none; border: 0; }

.mc-phone-code {
    /* The full country name is in the option text for type-ahead, but the closed
       control shows only the code — a 148px track cannot hold both. */
    border-right: 1px solid #E3E7EE !important;
    background-position: right 10px center;
    padding-right: 30px;
    color: var(--cx-ink);
}
.mc-phone-number { padding-left: 12px; }

@media (max-width: 420px) {
    /* The code track shrinks rather than the number input, which is the field
       people actually type into. */
    .mc-phone { grid-template-columns: 108px 1fr; }
}

/* ---- social sign-in buttons ---------------------------------------------
   White buttons with a hairline border, per Google's brand requirements for
   its mark, and consistent for Facebook so the pair reads as one group. They
   are deliberately NOT gold: the gold primary belongs to the member's own
   Coutts action on the page, not to a third-party provider. */
.mc-social { margin-bottom: var(--cx-space-6); }

.mc-social-btn {
    display: flex; align-items: center; justify-content: center; gap: var(--cx-space-3);
    width: 100%; min-height: var(--cx-btn-h); padding: 0 var(--cx-btn-pad-x);
    margin-bottom: var(--cx-space-3);
    font-family: var(--cx-sans); font-size: var(--cx-btn-fs); font-weight: 600;
    color: var(--cx-ink); background: #FFF; text-decoration: none;
    border: 1px solid #CFD6E0; border-radius: var(--cx-btn-radius);
    transition: background var(--cx-t-fast), border-color var(--cx-t-fast);
}
.mc-social-btn:hover { background: var(--cx-paper); border-color: var(--cx-navy); color: var(--cx-ink); }
.mc-social-btn:focus-visible { outline: var(--cx-focus-w) solid var(--cx-focus-color); outline-offset: 2px; }
.mc-social-btn svg { flex: 0 0 auto; }

/* "or" divider — a rule with the word centred on it. */
.mc-social-or {
    display: flex; align-items: center; gap: var(--cx-space-4);
    margin: var(--cx-space-5) 0 0;
}
.mc-social-or::before, .mc-social-or::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--cx-line);
}
.mc-social-or span {
    font-size: var(--cx-fs-meta); color: var(--cx-muted); text-transform: lowercase;
}

/* ---- .mc-cta REMOVED -------------------------------------------------------
   The "Need specialist assistance?" panel these rules styled has been deleted from
   the dashboard: the global footer already closes every page with the same request.
   Rules removed rather than left orphaned. */

/* ---- personalised state ----------------------------------------------------
   Replaces the setup prompt once preferences exist. Deliberately quieter than the
   prompt — it is a status line confirming something happened, not a call to act. */
.mc-personalised {
    display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
    align-items: center; justify-content: space-between;
    padding: .85rem 1.1rem; margin-bottom: 1.4rem;
    background: var(--cx-paper, #F7F5EF);
    border: 1px solid #E2DDD0;
    border-left: 3px solid var(--cx-gold-soft, #D9B65A);
    border-radius: 0 8px 8px 0;
}
.mc-personalised-title { margin: 0; font-size: .92rem; font-weight: 700; color: var(--cx-navy, #0B1626); }
.mc-personalised-sub   { margin: .15rem 0 0; font-size: .8rem; color: var(--cx-muted, #5A6472); }
.mc-personalised-link  { font-size: .8rem; font-weight: 700; color: var(--cx-gold-ink, #8A6E12); text-decoration: none; white-space: nowrap; }
.mc-personalised-link:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .mc-personalised { flex-direction: column; align-items: flex-start; }
}

/* ---- latest adviser shortlist ---------------------------------------------
   Compact by intent: names and two actions. A row of jurisdiction cards here would
   duplicate the followed-jurisdictions list directly beneath it and make the page
   read as two competing collections rather than one recent result and one library. */
.mc-shortlist {
    padding: 1.1rem 1.25rem 1.25rem; margin-bottom: 1.8rem;
    background: var(--cx-paper, #F7F5EF);
    border: 1px solid #E2DDD0; border-radius: var(--cx-radius-lg, 10px);
}
.mc-shortlist-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.mc-shortlist-eyebrow {
    margin: 0 0 .1rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--cx-gold-ink, #8A6E12);
}
.mc-shortlist .mc-h2 { margin: 0; }
.mc-shortlist-when { margin: 0; font-size: .76rem; color: var(--cx-muted, #5A6472); }

.mc-shortlist-list { list-style: none; margin: .9rem 0 1.1rem; padding: 0; display: grid; gap: .4rem; }
.mc-shortlist-list li { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: baseline; }
.mc-shortlist-list a { font-size: .92rem; font-weight: 700; color: var(--cx-navy, #0B1626); text-decoration: none; }
.mc-shortlist-list a:hover { text-decoration: underline; }
.mc-shortlist-band { font-size: .7rem; color: var(--cx-muted, #5A6472); }

.mc-shortlist-actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Separates the regenerated shortlist from the member's own followed jurisdictions —
   §10 asks that the two complement each other rather than merge. */
.mc-shortlist-divider { margin-top: 0; }

/* ---- recently viewed -------------------------------------------------------
   Compact by intent. This answers "take me back to what I was looking at", so the
   title and its type carry the weight; the thumbnail, where one exists, is a
   recognition aid rather than the subject. */
.mc-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

@media (min-width: 700px) { .mc-recent { grid-template-columns: repeat(2, 1fr); gap: .55rem .9rem; } }

.mc-recent-item a {
    display: flex; gap: .7rem; align-items: center;
    padding: .6rem .7rem; text-decoration: none;
    background: var(--cx-paper, #F7F5EF);
    border: 1px solid #E8E3D6; border-radius: 8px;
    transition: border-color .15s, background-color .15s;
}
.mc-recent-item a:hover { border-color: #C9B98A; background: #FBFAF6; }

.mc-recent-thumb {
    flex: 0 0 auto; width: 56px; height: 40px; border-radius: 5px;
    background: #E8E3D6 center/cover no-repeat;
}

.mc-recent-body { min-width: 0; }
.mc-recent-type {
    display: block; font-size: .62rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--cx-gold-ink, #8A6E12); margin-bottom: .12rem;
}
/* Two lines maximum: a proposition title can be long, and a ragged list of different
   heights makes six items harder to scan than a tidy one. */
.mc-recent-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: .84rem; font-weight: 700; line-height: 1.35; color: var(--cx-navy, #0B1626);
}

/* The empty state: a sentence, not a panel. */
.mc-empty-line { margin: 0; font-size: .84rem; color: var(--cx-muted, #5A6472); }

/* ---- MY RESEARCH -----------------------------------------------------------
   Jurisdiction-led and restrained: a heading with its work beneath it, not a
   dashboard of tables. No progress bars, no badges, no counters for their own sake. */

.mc-research-link {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 1.1rem; margin-bottom: 1.4rem; text-decoration: none;
    background: var(--cx-paper, #F7F5EF);
    border: 1px solid #E2DDD0; border-radius: var(--cx-radius-lg, 10px);
    transition: border-color .15s;
}
.mc-research-link:hover { border-color: #C9B98A; }
.mc-research-link-t  { display: block; font-size: .95rem; font-weight: 700; color: var(--cx-navy, #0B1626); }
.mc-research-link-s  { display: block; font-size: .8rem; color: var(--cx-muted, #5A6472); margin-top: .15rem; }
.mc-research-link-go { color: var(--cx-gold-ink, #8A6E12); font-weight: 700; }

/* ---- empty state ---- */
.mc-start { padding: 1.4rem 1.5rem; background: var(--cx-paper, #F7F5EF); border-radius: var(--cx-radius-lg, 10px); }
.mc-start p { font-size: .88rem; line-height: 1.6; color: var(--cx-ink-soft, #33404F); max-width: 56ch; }
.mc-start-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }

/* ---- compare picker ---- */
.mc-compare { margin: 0 0 2rem; }
.mc-compare fieldset { border: 0; padding: 0; margin: 0; }
.mc-compare-hint { font-size: .82rem; color: var(--cx-muted, #5A6472); margin: .3rem 0 .8rem; }
.mc-compare-opts { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-bottom: .9rem; }
.mc-compare-opt { display: flex; align-items: center; gap: .45rem; font-size: .85rem; cursor: pointer; }
.mc-compare-opt input { width: 16px; height: 16px; accent-color: var(--cx-gold-ink, #8A6E12); }
/* Dimmed at the limit, never disabled — a disabled input leaves the tab order. */
.mc-compare-opt.is-blocked { opacity: .5; }

/* ---- jurisdiction sections ---- */
.mc-res { padding-bottom: 1.6rem; margin-bottom: 1.6rem; border-bottom: 1px solid var(--cx-line, #E3E7EC); }
.mc-res:last-of-type { border-bottom: 0; }
.mc-res-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; }
.mc-res-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: baseline; }
.mc-res-actions a, .mc-res-remove {
    font-size: .8rem; font-weight: 700; color: var(--cx-gold-ink, #8A6E12);
    background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
}
.mc-res-actions a:hover, .mc-res-remove:hover { text-decoration: underline; }
.mc-res-actions form { display: inline; }

.mc-res-h3   { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
               color: var(--cx-muted, #5A6472); margin: 1.1rem 0 .5rem; }
.mc-res-none { font-size: .84rem; color: var(--cx-muted, #5A6472); margin: .6rem 0 0; }

.mc-res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.mc-res-item {
    display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
    padding: .6rem .8rem; background: var(--cx-paper, #F7F5EF); border-radius: 7px;
}
.mc-res-item-body { min-width: 0; }
.mc-res-kind  { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .09em;
                text-transform: uppercase; color: var(--cx-gold-ink, #8A6E12); margin-bottom: .1rem; }
.mc-res-title { font-size: .87rem; font-weight: 700; color: var(--cx-navy, #0B1626); text-decoration: none; }
.mc-res-title:hover { text-decoration: underline; }
.mc-res-help  { display: inline-block; margin-top: 1rem; font-size: .82rem; font-weight: 700;
                color: var(--cx-gold-ink, #8A6E12); text-decoration: none; }
.mc-res-help:hover { text-decoration: underline; }

@media (max-width: 560px) {
    /* Cards stack; the remove control drops beneath the title rather than competing with
       it for width. No horizontal scrolling is introduced. */
    .mc-res-item { flex-direction: column; align-items: flex-start; gap: .35rem; }
    .mc-research-link { align-items: flex-start; }
}

/* My Research footer actions: build (primary intent) and assistance (secondary). */
.mc-res-foot { display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: baseline; margin-top: 1rem; }
.mc-res-build { font-size: .84rem; font-weight: 700; color: var(--cx-navy, #0B1626); text-decoration: none; }
.mc-res-build:hover { text-decoration: underline; }

/* ---- my business requirements ---- */
.mc-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.mc-req {
    display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem; background: var(--cx-paper, #F7F5EF);
    border: 1px solid #E2DDD0; border-radius: var(--cx-radius-lg, 10px);
}
.mc-req-name { margin: 0 0 .2rem; font-size: 1rem; font-weight: 700; color: var(--cx-navy, #0B1626); }
.mc-req-meta { margin: 0; font-size: .8rem; color: var(--cx-muted, #5A6472); }
.mc-req-warn { color: #B3261E; }
.mc-req-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mc-req-actions form { margin: 0; }

@media (max-width: 560px) {
    /* Stacked, full-width actions — no table, no horizontal scrolling (§12). */
    .mc-req { flex-direction: column; align-items: stretch; }
    .mc-req-actions { flex-direction: column; align-items: stretch; }
    .mc-req-actions .mc-btn { width: 100%; justify-content: center; text-align: center; }
}