/* ════════════════════════════════════════════════════════════════════════
   ARA icon system + accent devices  (emoji-to-icon migration)
   Duotone geometric icons: green structure inherits currentColor, one gold
   accent stays fixed. Loaded globally so `icon()` output styles everywhere.
   ════════════════════════════════════════════════════════════════════════ */

/* ── The `.ico` drop-in wrapper — sizes to the text beside it ─────────────── */
.ico { display: inline-flex; align-items: center; justify-content: center;
    width: 1em; height: 1em; vertical-align: -0.14em; flex: none; line-height: 0; }
.ico svg { width: 100%; height: 100%; display: block; }
.ico--lg { width: 1.25em; height: 1.25em; }
.ico--xl { width: 1.6em; height: 1.6em; }
/* Structure follows text colour; the gold accent keeps the brand value unless a
   semantic tone recolours the whole icon (handled inline by the icon() helper). */
.ico svg [stroke="currentColor"] { stroke: currentColor; }

/* ── Star rating run ──────────────────────────────────────────────────────── */
.rating { display: inline-flex; align-items: center; gap: 2px; line-height: 0; }
.rating .ico { width: 1.05em; height: 1.05em; }
.review-stars, .testi-stars { display: inline-flex; align-items: center; gap: 2px; }

/* ── Accent devices from the logo (chevron + rising gold bar) ─────────────── */
.ara-chevron { display: inline-block; vertical-align: -0.12em; flex: none; }
.ara-rise-bar { display: block; width: 100%; height: .7em; transform-origin: left center; }
.ara-rise-bar.u { position: absolute; left: 0; bottom: -.14em; height: 11px; }
.headline-rise { position: relative; display: inline-block; }
/* A full-bleed, inert repeating chevron field for quiet section backgrounds. */
.ara-chevron-field { position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; }

/* ════════════════════════════════════════════════════════════════════════
   Icon-tile adaptations — the emoji glyphs these classes used to hold are now
   inline SVG. Keep the tile chrome; colour the structure per context.
   ════════════════════════════════════════════════════════════════════════ */

/* Hero trust chips: small icon + label */
.hero-chip { display: inline-flex; align-items: center; gap: 7px; }
.hero-chip .ico { color: var(--green-deep); width: 1.05em; height: 1.05em; }
[data-theme="dark"] .hero-chip .ico { color: var(--green-tint); }

/* Feature "journey" tiles: white structure on the coloured gradient tile */
.feature-tile { color: #fff; }
.feature-tile .ico { width: 28px; height: 28px; }
/* On the gold tile the gold accent would vanish — force it to the deep green. */
.feature-tile.tile-gold .ico { color: #14240f; }
.feature-tile.tile-gold .ico svg .accent { fill: #14240f; stroke: #14240f; }

/* Path (audience router) tiles: icon takes the persona colour */
.path-ico { color: var(--pc, var(--green-deep)); }
.path-ico .ico { width: 26px; height: 26px; }

/* Credibility pillars: green structure on the wash tile */
.cred-ico { color: var(--green-deep); }
[data-theme="dark"] .cred-ico { color: var(--green-tint); }
.cred-ico .ico { width: 26px; height: 26px; }

/* Give / sponsor persona chips */
.give-chip { display: inline-flex; align-items: center; gap: 7px; }
.give-chip .ico { color: var(--green-deep); width: 1.05em; height: 1.05em; }
[data-theme="dark"] .give-chip .ico { color: var(--green-tint); }

/* Verify chips (dark CTA band): semantic status colours */
.verify-chip { display: flex; align-items: center; gap: 10px; }
.verify-chip .ico { width: 1.2em; height: 1.2em; }
.verify-chip.ok   .ico { color: #7ee6a1; }
.verify-chip.warn .ico { color: #ffb0b0; }
.verify-chip.muted .ico { color: #cdd6cf; }

/* Pillar list markers + scholar/persona headings */
.pillar-card-ico { color: var(--green-deep); }
[data-theme="dark"] .pillar-card-ico { color: var(--green-tint); }
.pillar-card-ico .ico { width: 1.5em; height: 1.5em; }
.scholar-side h3 .ico { color: #ffe9a8; width: 1.1em; height: 1.1em; }

/* Reward / gamification pills carry a small badge icon */
.pill .ico { width: 1.05em; height: 1.05em; margin-right: 4px; vertical-align: -.16em; }
.level-badge .ico { width: 1em; height: 1em; }

/* ════════════════════════════════════════════════════════════════════════
   Anti-text-wall marvel patterns (new): stat blocks, numbered rows, feature
   panels with a chevron field, gold top-rule on cards.
   ════════════════════════════════════════════════════════════════════════ */

/* Gold rising top-rule on any card */
.rule-rise { position: relative; }
.rule-rise > .ara-rise-bar.top { position: absolute; top: 0; left: 0; right: 0;
    height: 3px; width: 100%; }

/* KPI / stat block with a mono numeral */
.stat-block { display: flex; flex-direction: column; gap: 8px; }
.stat-block .stat-k { display: flex; align-items: center; gap: 8px; color: var(--muted);
    font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-block .stat-k .ico { color: var(--green-deep); width: 1em; height: 1em; }
[data-theme="dark"] .stat-block .stat-k .ico { color: var(--green-tint); }
.stat-block .stat-v { font-family: var(--font-mono); font-size: 2rem; font-weight: 700;
    color: var(--green-deep); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
[data-theme="dark"] .stat-block .stat-v { color: var(--green-tint); }
.stat-block .stat-v .u { color: var(--gold); }

/* Numbered feature rows (icon + 3-word title + one line + index) */
.feat-rows { display: flex; flex-direction: column; }
.feat-row { display: flex; align-items: center; gap: 18px; padding: 20px 4px;
    border-bottom: 1px solid var(--line); }
.feat-row:last-child { border-bottom: none; }
.feat-row .feat-ico { width: 50px; height: 50px; border-radius: var(--r-md); flex: none;
    background: var(--green-wash); display: grid; place-items: center; color: var(--green-deep);
    transition: background var(--t), transform var(--t); }
[data-theme="dark"] .feat-row .feat-ico { color: var(--green-tint); }
.feat-row .feat-ico .ico { width: 26px; height: 26px; }
.feat-row:hover .feat-ico { transform: translateY(-2px); }
.feat-row .feat-body { flex: 1; min-width: 0; }
.feat-row .feat-body strong { display: block; font-size: 1.06rem; letter-spacing: -.01em; }
.feat-row .feat-body span { color: var(--muted); font-size: .9rem; }
.feat-row .feat-no { font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
    color: var(--line); flex: none; }

/* Chevron-field panel (dark green promo tile) */
.chev-panel { position: relative; overflow: hidden; border-radius: var(--r-xl);
    background: var(--green-deep); color: var(--cream); }
.chev-panel > * { position: relative; z-index: 1; }

/* Signature gold "rising bar" top-rule — angles up left→right on key bands. */
.trust-band { position: relative; }
.trust-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gold);
    -webkit-clip-path: polygon(0 100%, 100% 0, 100% 40%, 0 100%);
    clip-path: polygon(0 100%, 100% 0, 100% 40%, 0 100%); }

/* Section eyebrows carry a small gold chevron ascent marker */
.eyebrow-rise { display: inline-flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
    .feat-row:hover .feat-ico { transform: none; }
}