/**
 * RMAI Applications Stylesheet
 *
 * Styles for the four application-area templates:
 *   - showroom (archive)
 *   - sector (taxonomy: rmai_sector)
 *   - pattern (taxonomy: rmai_pattern)
 *   - app (single rmai_application)
 *
 * Plus reusable patterns: tile, empty-state, pattern-reusable-panel.
 *
 * All class names are namespaced with `rmai-` to avoid collisions.
 * Everything is scoped inside `.rmai-applications` (added via body_class filter).
 *
 * Source of truth: /staff/ellah/strategy-pivot/website-design/website-industry/project/styles.css
 * Design tokens extracted verbatim — do not guess values.
 */

/* -----------------------------------------------
   Design tokens (scoped locally so they don't
   collide with theme.json custom properties)
   ----------------------------------------------- */
.rmai-applications {
    --rmai-purple:   #A77ACD;
    --rmai-orange:   #F26541;
    --rmai-green:    #22C55E;
    --rmai-bg:       #FAFAFA;
    --rmai-white:    #FFFFFF;
    --rmai-stone:    #EDEBE8;
    --rmai-lavender: #F0EBF4;
    --rmai-fg-1:     #1A1B25;
    --rmai-fg-2:     #555555;
    --rmai-fg-mut:   #8D8D92;
    --rmai-border:   #E8E8EB;
}

/* -----------------------------------------------
   Typography helpers
   ----------------------------------------------- */
.rmai-applications .rmai-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rmai-purple);
}

.rmai-applications .rmai-h1-display {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--rmai-fg-1);
}

.rmai-applications .rmai-h1-page {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--rmai-fg-1);
}

.rmai-applications .rmai-lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--rmai-fg-2);
    max-width: 60ch;
}

.rmai-applications .rmai-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* -----------------------------------------------
   Breadcrumb
   ----------------------------------------------- */
.rmai-applications .rmai-breadcrumb {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--rmai-fg-mut);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rmai-applications .rmai-breadcrumb a {
    color: var(--rmai-fg-2);
    text-decoration: none;
}

.rmai-applications .rmai-breadcrumb a:hover {
    color: var(--rmai-fg-1);
}

.rmai-applications .rmai-breadcrumb .sep {
    color: var(--rmai-fg-mut);
}

.rmai-applications .rmai-breadcrumb .current {
    color: var(--rmai-fg-1);
}

/* -----------------------------------------------
   Chips
   ----------------------------------------------- */
.rmai-applications .rmai-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    color: var(--rmai-fg-2);
    white-space: nowrap;
}

.rmai-applications .rmai-chip--sector {
    background: var(--rmai-lavender);
    border-color: transparent;
    color: var(--rmai-purple);
    font-weight: 600;
}

.rmai-applications .rmai-chip--pattern {
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    color: var(--rmai-fg-2);
}

.rmai-applications .rmai-chip--soon {
    background: var(--rmai-stone);
    color: var(--rmai-fg-mut);
}

.rmai-applications .rmai-chip--live {
    background: #E9F8EF;
    color: #1A6E3A;
    border-color: transparent;
}

.rmai-applications .rmai-chip--live .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--rmai-green);
}

/* Shipped = a real app running in production (apps.realmindsai.com.au), not a
   dramatised demo. Solid green so it visibly outranks the pale "demo" chip. */
.rmai-applications .rmai-chip--shipped {
    background: var(--rmai-green, #22C55E);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}

.rmai-applications .rmai-chip--shipped .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #fff;
}

/* Concept = a design on the whiteboard, no live artifact yet. Muted stone so it
   reads quieter than the demo/shipped chips, and no dot (nothing is "live"). */
.rmai-applications .rmai-chip--concept {
    background: var(--rmai-stone);
    color: var(--rmai-fg-mut);
    border-color: transparent;
}

/* -----------------------------------------------
   Filter chip
   ----------------------------------------------- */
.rmai-applications .rmai-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    color: var(--rmai-fg-2);
    cursor: pointer;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.rmai-applications .rmai-filter-chip:hover {
    border-color: var(--rmai-fg-1);
    color: var(--rmai-fg-1);
}

.rmai-applications .rmai-filter-chip.is-active {
    background: var(--rmai-fg-1);
    color: var(--rmai-white);
    border-color: var(--rmai-fg-1);
}

.rmai-applications .rmai-filter-chip .count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: inherit;
    opacity: 0.7;
}

/* Faceted dead end — no cards under the current selection. Greyed and inert;
   applied by recountFacets() in applications-filter.js. */
.rmai-applications .rmai-filter-chip.is-faceted-empty {
    opacity: 0.4;
    pointer-events: none;
    background: var(--rmai-stone);
    border-color: var(--rmai-border);
    color: var(--rmai-fg-mut);
}

/* -----------------------------------------------
   Filter bar + summary
   ----------------------------------------------- */
.rmai-applications .rmai-filter-bar {
    padding: 20px 0 32px;
    border-bottom: 1px solid var(--rmai-border);
}

.rmai-applications .rmai-filter-bar .group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}

.rmai-applications .rmai-filter-bar .group:last-child {
    margin-bottom: 0;
}

.rmai-applications .rmai-filter-bar .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--rmai-fg-mut);
    text-transform: uppercase;
    width: 84px;
    flex-shrink: 0;
}

.rmai-applications .rmai-filter-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 28px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--rmai-fg-mut);
}

.rmai-applications .rmai-filter-summary .count strong {
    font-family: 'Epilogue', sans-serif;
    color: var(--rmai-fg-1);
    font-weight: 600;
}

/* -----------------------------------------------
   Container — full-width centering
   ----------------------------------------------- */
.rmai-applications .rmai-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

/* -----------------------------------------------
   App grid
   ----------------------------------------------- */
.rmai-applications .rmai-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.rmai-applications .rmai-app-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* -----------------------------------------------
   App card — atomic unit
   ----------------------------------------------- */
.rmai-applications .rmai-app-card {
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rmai-applications .rmai-app-card:hover {
    border-color: #c8c8cd;
    transform: translateY(-1px);
}

.rmai-applications .rmai-app-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--rmai-stone);
    border-top: 1px solid var(--rmai-border);
    border-bottom: 1px solid var(--rmai-border);
    overflow: hidden;
}

.rmai-applications .rmai-app-card__media-link {
    display: block;
    height: 100%;
}

.rmai-applications .rmai-app-card__media .rmai-app-card__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.rmai-applications .rmai-app-card__media .rmai-app-card__video {
    display: block;
    position: relative; /* stacks above the static poster <img> */
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A non-playing <video> renders as an opaque blank box that would hide the
       poster <img> behind it, so keep it transparent until it actually plays.
       applications-filter.js adds .is-playing when the IntersectionObserver
       starts playback; the opaque video frames then cover the poster. */
    opacity: 0;
    transition: opacity 0.25s ease;
}

.rmai-applications .rmai-app-card__media .rmai-app-card__video.is-playing {
    opacity: 1;
}

.rmai-applications .rmai-app-card__media .placeholder-stamp {
    position: absolute;
    top: 12px;
    right: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(26, 27, 37, 0.78);
    color: #fff;
    text-transform: lowercase;
    z-index: 2;
}

.rmai-applications .rmai-app-card__media .live-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.rmai-applications .rmai-app-card__body {
    padding: 16px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rmai-applications .rmai-app-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* Title leads the card, above the screenshot. */
.rmai-applications .rmai-app-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--rmai-fg-1);
    padding: 18px 22px 12px;
    margin: 0;
}
.rmai-applications .rmai-app-card__title a {
    color: inherit;
    text-decoration: none;
}
.rmai-applications .rmai-app-card__title a:hover {
    color: var(--rmai-purple);
}

.rmai-applications .rmai-app-card__desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--rmai-fg-2);
    margin-top: 8px;
    flex: 1;
}

.rmai-applications .rmai-app-card__foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rmai-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--rmai-fg-mut);
}

.rmai-applications .rmai-app-card__foot .arrow {
    color: var(--rmai-purple);
    font-size: 14px;
}

.rmai-applications .rmai-app-card__meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--rmai-fg-mut);
}

/* Sector tint variants on app cards — perceptibly distinct at a glance */
.rmai-applications .rmai-app-card.tint-health   .rmai-app-card__media { background: linear-gradient(135deg, #f0ebf4, #edebe8); }
.rmai-applications .rmai-app-card.tint-gov      .rmai-app-card__media { background: linear-gradient(135deg, #dde4ec, #edebe8); }
.rmai-applications .rmai-app-card.tint-nfp      .rmai-app-card__media { background: linear-gradient(135deg, #f5e8d8, #edebe8); }
.rmai-applications .rmai-app-card.tint-industry .rmai-app-card__media { background: linear-gradient(135deg, #dce5f0, #edebe8); }
.rmai-applications .rmai-app-card.tint-edu      .rmai-app-card__media { background: linear-gradient(135deg, #e5efd8, #edebe8); }
.rmai-applications .rmai-app-card.tint-sme      .rmai-app-card__media { background: linear-gradient(135deg, #ede4d6, #edebe8); }

/* -----------------------------------------------
   Hero sections (per page type)
   ----------------------------------------------- */

/* Showroom / sector hero */
.rmai-applications .rmai-page-hero {
    padding: 56px 0 40px;
}

.rmai-applications .rmai-page-hero .rmai-breadcrumb {
    margin-bottom: 24px;
}

.rmai-applications .rmai-page-hero h1 {
    margin-top: 8px;
}

.rmai-applications .rmai-page-hero .rmai-lead {
    margin-top: 18px;
}

/* Stat row inside page-hero */
.rmai-applications .rmai-page-hero .stat-row {
    display: flex;
    gap: 32px;
    margin-top: 32px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--rmai-fg-2);
    flex-wrap: wrap;
}

.rmai-applications .rmai-page-hero .stat-row .item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.rmai-applications .rmai-page-hero .stat-row .item .n {
    font-size: 18px;
    font-weight: 600;
    color: var(--rmai-fg-1);
    font-family: 'Epilogue', sans-serif;
}

.rmai-applications .rmai-page-hero .stat-row .sep {
    color: var(--rmai-border);
}

/* Per-app hero */
.rmai-applications .rmai-app-hero {
    padding: 48px 0 24px;
}

.rmai-applications .rmai-app-hero h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-top: 16px;
}

.rmai-applications .rmai-app-hero .one-line {
    font-size: 22px;
    line-height: 1.4;
    color: var(--rmai-fg-2);
    margin-top: 20px;
    max-width: 56ch;
}

/* Pattern page hero — lavender bg */
.rmai-applications .rmai-pattern-hero {
    background: var(--rmai-lavender);
    border-bottom: 1px solid #e0d6e8;
    padding: 64px 0 56px;
}

.rmai-applications .rmai-pattern-hero .rmai-breadcrumb a {
    color: var(--rmai-purple);
    opacity: 0.7;
}

.rmai-applications .rmai-pattern-hero .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(167, 122, 205, 0.18);
    border-radius: 999px;
    color: var(--rmai-purple);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    margin-top: 18px;
}

.rmai-applications .rmai-pattern-hero h1 {
    margin-top: 18px;
}

.rmai-applications .rmai-pattern-hero .rmai-lead {
    color: var(--rmai-fg-1);
    margin-top: 22px;
}

/* Skin row inside pattern hero */
.rmai-applications .rmai-skin-row {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(167, 122, 205, 0.25);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
}

.rmai-applications .rmai-skin-row .lab {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--rmai-purple);
    margin-right: 10px;
}

/* -----------------------------------------------
   See it / Demo frame
   ----------------------------------------------- */
.rmai-applications .rmai-see-it {
    padding: 24px 0 64px;
}

.rmai-applications .rmai-demo-frame {
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(26, 27, 37, 0.06);
}

.rmai-applications .rmai-demo-chrome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F5F4F2;
    border-bottom: 1px solid var(--rmai-border);
}

.rmai-applications .rmai-demo-chrome .dots {
    display: flex;
    gap: 6px;
}

.rmai-applications .rmai-demo-chrome .dots span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d6d3d0;
}

.rmai-applications .rmai-demo-chrome .url {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--rmai-fg-2);
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    border-radius: 4px;
    padding: 5px 10px;
    text-align: center;
}

.rmai-applications .rmai-demo-chrome .open-cta {
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--rmai-purple);
    white-space: nowrap;
}

.rmai-applications .rmai-demo-body {
    background: var(--rmai-bg);
    min-height: 480px;
    position: relative;
}

.rmai-applications .rmai-demo-body .demo-stamp {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(26, 27, 37, 0.85);
    color: #fff;
    z-index: 2;
}

/* -----------------------------------------------
   Section row (label/content 2-col layout)
   ----------------------------------------------- */
.rmai-applications .rmai-section-row {
    padding: 56px 0;
    border-top: 1px solid var(--rmai-border);
}

.rmai-applications .rmai-row-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 64px;
}

.rmai-applications .rmai-row-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rmai-purple);
}

.rmai-applications .rmai-section-row h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 20px;
    line-height: 1.2;
}

.rmai-applications .rmai-section-row p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--rmai-fg-1);
    max-width: 62ch;
}

.rmai-applications .rmai-section-row p + p {
    margin-top: 16px;
}

/* -----------------------------------------------
   How-it-works diagram
   ----------------------------------------------- */
.rmai-applications .rmai-how-diagram {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    border-radius: 10px;
    padding: 28px;
}

.rmai-applications .rmai-how-node {
    background: var(--rmai-bg);
    border: 1px solid var(--rmai-border);
    border-radius: 8px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rmai-applications .rmai-how-node .n-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--rmai-fg-mut);
    text-transform: uppercase;
}

.rmai-applications .rmai-how-node .n-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--rmai-fg-1);
}

.rmai-applications .rmai-how-node .n-detail {
    font-size: 12px;
    color: var(--rmai-fg-2);
    line-height: 1.45;
}

.rmai-applications .rmai-how-node.is-agent {
    background: var(--rmai-lavender);
    border-color: transparent;
}

.rmai-applications .rmai-how-node.is-agent .n-label {
    color: var(--rmai-purple);
}

.rmai-applications .rmai-how-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rmai-fg-mut);
    font-size: 18px;
}

/* -----------------------------------------------
   Build facts grid
   ----------------------------------------------- */
.rmai-applications .rmai-facts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 4px;
}

.rmai-applications .rmai-fact {
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    border-radius: 10px;
    padding: 22px 20px;
}

.rmai-applications .rmai-fact .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--rmai-fg-mut);
    text-transform: uppercase;
}

.rmai-applications .rmai-fact .value {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 700;
    color: var(--rmai-fg-1);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.rmai-applications .rmai-fact .value .unit {
    font-size: 14px;
    color: var(--rmai-fg-mut);
    font-weight: 500;
    margin-left: 4px;
}

.rmai-applications .rmai-fact .detail {
    margin-top: 8px;
    font-size: 13px;
    color: var(--rmai-fg-2);
    line-height: 1.5;
}

/* -----------------------------------------------
   Cost band
   ----------------------------------------------- */
.rmai-applications .rmai-cost-band {
    background: var(--rmai-stone);
    border-radius: 10px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
}

.rmai-applications .rmai-cost-band .heading {
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--rmai-fg-mut);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.rmai-applications .rmai-cost-band .range {
    font-size: 32px;
    font-weight: 700;
    color: var(--rmai-fg-1);
    letter-spacing: -0.01em;
}

.rmai-applications .rmai-cost-band .range .ccy {
    font-size: 18px;
    color: var(--rmai-fg-mut);
    margin-left: 8px;
    font-weight: 500;
}

.rmai-applications .rmai-cost-band .note {
    font-size: 13px;
    color: var(--rmai-fg-2);
    margin-top: 8px;
    max-width: 50ch;
    line-height: 1.5;
}

.rmai-applications .rmai-cost-band-scale {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 64px;
}

.rmai-applications .rmai-cost-band-scale .bar {
    width: 14px;
    background: var(--rmai-border);
    border-radius: 2px 2px 0 0;
}

.rmai-applications .rmai-cost-band-scale .bar.on {
    background: var(--rmai-purple);
}

/* -----------------------------------------------
   CTA strip
   ----------------------------------------------- */
.rmai-applications .rmai-cta-strip {
    background: var(--rmai-fg-1);
    color: var(--rmai-white);
    padding: 56px 0;
    margin-top: 32px;
}

.rmai-applications .rmai-cta-strip .rmai-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

.rmai-applications .rmai-cta-strip h3 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    max-width: 22ch;
}

.rmai-applications .rmai-cta-strip p {
    font-size: 15px;
    color: #B7B7BA;
    margin-top: 8px;
    max-width: 50ch;
}

.rmai-applications .rmai-cta-strip .btn--cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 6px;
    background: var(--rmai-orange);
    color: #fff;
    text-decoration: none;
    transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.rmai-applications .rmai-cta-strip .btn--cta:hover {
    background: #DA5939;
}

/* -----------------------------------------------
   Empty state
   ----------------------------------------------- */
.rmai-applications .rmai-empty-state {
    background: var(--rmai-white);
    border: 1px dashed #c8c8cd;
    border-radius: 10px;
    padding: 56px 40px;
    text-align: center;
}

.rmai-applications .rmai-empty-state .marker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--rmai-fg-mut);
    letter-spacing: 0.06em;
}

.rmai-applications .rmai-empty-state h3 {
    margin-top: 18px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.rmai-applications .rmai-empty-state .desc {
    margin: 12px auto 0;
    max-width: 48ch;
    color: var(--rmai-fg-2);
    line-height: 1.55;
}

.rmai-applications .rmai-empty-state .actions {
    margin-top: 28px;
    display: inline-flex;
    gap: 12px;
}

/* In-flight panel (inside empty state) */
.rmai-applications .rmai-in-flight {
    margin: 28px auto 0;
    max-width: 460px;
    background: var(--rmai-bg);
    border: 1px solid var(--rmai-border);
    border-radius: 8px;
    padding: 18px 20px;
    text-align: left;
}

.rmai-applications .rmai-in-flight .h {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--rmai-fg-mut);
    text-transform: uppercase;
    margin-bottom: 10px;
}

.rmai-applications .rmai-in-flight .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-top: 1px solid var(--rmai-border);
    font-size: 14px;
}

.rmai-applications .rmai-in-flight .row:first-of-type {
    border-top: 0;
}

.rmai-applications .rmai-in-flight .row .when {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--rmai-fg-mut);
}

/* -----------------------------------------------
   Sector tile
   ----------------------------------------------- */
.rmai-applications .rmai-sector-tile {
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    border-radius: 10px;
    padding: 24px;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 24px;
    align-items: center;
    transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.rmai-applications .rmai-sector-tile:hover {
    border-color: #c8c8cd;
}

.rmai-applications .rmai-sector-tile .rmai-eyebrow {
    margin-bottom: 10px;
}

.rmai-applications .rmai-sector-tile h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
}

.rmai-applications .rmai-sector-tile p {
    font-size: 14px;
    color: var(--rmai-fg-2);
    line-height: 1.5;
    max-width: 48ch;
}

.rmai-applications .rmai-sector-tile .link-row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--rmai-fg-mut);
}

.rmai-applications .rmai-sector-tile .link-row .cta {
    font-family: 'Epilogue', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--rmai-purple);
}

/* Thumb stack inside sector tile */
.rmai-applications .rmai-thumb-stack {
    position: relative;
    height: 110px;
}

.rmai-applications .rmai-thumb-stack .t {
    position: absolute;
    background: var(--rmai-bg);
    border: 1px solid var(--rmai-border);
    border-radius: 6px;
    width: 110px;
    height: 80px;
    overflow: hidden;
}

.rmai-applications .rmai-thumb-stack .t.t0 {
    right: 80px;
    top: 14px;
    transform: rotate(-3deg);
}

.rmai-applications .rmai-thumb-stack .t.t1 {
    right: 40px;
    top: 6px;
    transform: rotate(2deg);
    z-index: 1;
}

.rmai-applications .rmai-thumb-stack .t.t2 {
    right: 0;
    top: 18px;
    transform: rotate(-1deg);
    z-index: 2;
}

/* -----------------------------------------------
   Sector group (pattern page: apps grouped by sector)
   ----------------------------------------------- */
.rmai-applications .rmai-sector-group {
    padding-top: 48px;
}

.rmai-applications .rmai-sector-group:first-of-type {
    padding-top: 12px;
}

.rmai-applications .rmai-group-h {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rmai-border);
}

.rmai-applications .rmai-group-h h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-right: auto;
}

.rmai-applications .rmai-group-h .meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--rmai-fg-mut);
}

/* The "see everything for {industry}" link is the primary way into the rich
   sector page — make it prominent, not a tiny afterthought. */
.rmai-applications .rmai-group-cta {
    font-size: 15px;
    font-weight: 600;
    color: var(--rmai-purple);
    text-decoration: none;
    white-space: nowrap;
}

.rmai-applications .rmai-group-cta:hover { text-decoration: underline; }

/* Collapsed when filtering hides every card in the group (applications-filter.js). */
.rmai-applications .rmai-sector-group.is-hidden { display: none !important; }

/* -----------------------------------------------
   Author attribution (inside section rows)
   ----------------------------------------------- */
.rmai-applications .author-attrib {
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--rmai-fg-mut);
}

.rmai-applications .author-attrib .avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--rmai-lavender);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Epilogue', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--rmai-purple);
}

/* -----------------------------------------------
   Responsive
   ----------------------------------------------- */
@media (max-width: 900px) {
    .rmai-applications .rmai-app-grid,
    .rmai-applications .rmai-app-grid.cols-2 {
        grid-template-columns: 1fr;
    }

    .rmai-applications .rmai-facts-grid {
        grid-template-columns: 1fr;
    }

    .rmai-applications .rmai-how-diagram {
        grid-template-columns: 1fr;
    }

    .rmai-applications .rmai-how-arrow {
        transform: rotate(90deg);
        padding: 4px 0;
    }

    .rmai-applications .rmai-row-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rmai-applications .rmai-cost-band {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .rmai-applications .rmai-sector-tile {
        grid-template-columns: 1fr;
    }

    .rmai-applications .rmai-thumb-stack {
        display: none;
    }

    .rmai-applications .rmai-h1-display {
        font-size: 36px;
    }

    .rmai-applications .rmai-h1-page,
    .rmai-applications .rmai-app-hero h1 {
        font-size: 32px;
    }
}

.rmai-app-card.is-hidden { display: none !important; }
/* The "Also useful here" divider folds away with the cross-listed cards it
   introduces — under the showroom's default "All" view there are none, so it
   stays hidden until a sector is chosen (applications-filter.js toggles this). */
.rmai-also-useful.is-hidden { display: none !important; }

/* ── Phase 2: vertical narrative (NorthLink port) ───────────── */
.rmai-applications .rmai-vertical-intro {
    margin: 8px 0 40px;
}
.rmai-applications .rmai-vertical-lead {
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 60ch;
    color: var(--rmai-ink, #1a1a2e);
}
.rmai-applications .rmai-ways-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 24px;
}
.rmai-applications .rmai-way {
    border: 1px solid rgba(167, 122, 205, 0.25);
    border-radius: 12px;
    padding: 18px 20px;
    background: rgba(167, 122, 205, 0.04);
}
.rmai-applications .rmai-way h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    color: var(--rmai-purple, #A77ACD);
}
.rmai-applications .rmai-way p {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.5;
}

/* Cross-listed apps sit under a quiet divider beneath a sector's native apps (#45). */
.rmai-applications .rmai-also-useful {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8D8D92;
}
.rmai-applications .rmai-also-useful::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E8E8EB;
}

/* -----------------------------------------------
   Industry hub (/industries/) — one card per public sector
   ----------------------------------------------- */
.rmai-applications .rmai-industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 28px;
    margin: 8px 0 96px;
}

.rmai-applications a.rmai-industry-card {
    display: flex;
    flex-direction: column;
    background: var(--rmai-white);
    border: 1px solid var(--rmai-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rmai-applications a.rmai-industry-card:hover {
    border-color: var(--rmai-purple);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px -16px rgba(26, 27, 37, 0.35);
}

.rmai-applications .rmai-industry-card__body {
    padding: 24px 24px 20px;
}

.rmai-applications .rmai-industry-card__name {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--rmai-fg-1);
}

.rmai-applications .rmai-industry-card__problem {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--rmai-fg-1);
}

.rmai-applications .rmai-industry-card__promise {
    margin: 8px 0 0;
    padding-left: 14px;
    position: relative;
    font-size: 14px;
    line-height: 1.45;
    color: var(--rmai-fg-2);
}

.rmai-applications .rmai-industry-card__promise::before {
    content: '\21B3'; /* ↳ — promise follows the problem */
    position: absolute;
    left: 0;
    color: var(--rmai-purple);
}

/* Media sits at the foot of the card; .rmai-app-card__media (above) supplies the
   16/10 frame + the poster/lazy-video rules. Override only the corners so the
   video meets the rounded card edge cleanly, and drop the top border (the body
   padding already separates it). */
.rmai-applications .rmai-industry-card__media {
    border-top: none;
    border-bottom: none;
}

.rmai-applications .rmai-industry-card:hover .rmai-industry-card__name {
    color: var(--rmai-purple);
}