/* =============================================================
   DAC Training — Resource Sub-pages
   Loaded on: /start/, /funding/, /paypro/, /leadership/,
              /healthshare/, /logos/, /privacy-policy-2/
   Depends on: style.css (tokens, buttons, container, section-header)
               resources.css (dac-resources-hero, dac-support-banner,
                              dac-schedule-section)
   ============================================================= */

/* ── Steps Section (/start/) ──────────────────────────────── */
/* Structure: .dac-phases > .dac-phase (× 3) > .dac-phase__label + .dac-stepper
   .dac-stepper > .dac-step (× 7) > .dac-step__num + .dac-step__body
   A spine line (.dac-stepper::before) threads through the numbered nodes to
   read as a single sequential journey rather than a grid of equal-weight cards.
   Step 1 gets a featured treatment (green node + stat callout) since
   certification is the single gate gating 10% vs. 40%+ commission -- see
   wiki/business/dac-compensation-plan.md. */

.dac-steps-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--dac-blue-light) 0%, var(--dac-white) 22%);
    padding: 80px 0;
}

/* Soft blue decorative wash so this section isn't a flat white field — same
   "decorate the background" technique already used on the navy sections,
   just much lower-key for a light section. The matching green wash at the
   bottom of this section was removed per Tyler's request (2026-07-06) — it
   read as an unwanted faded-green tint behind the later steps. Sits behind
   normal content by source order (no z-index needed), but .dac-container
   gets an explicit stacking context to guarantee it. */
.dac-steps-section::before {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 72, 184, 0.12) 0%, transparent 70%);
    top: -320px;
    right: -260px;
    pointer-events: none;
}

.dac-steps-section .dac-container {
    position: relative;
    z-index: 1;
}

.dac-phases {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.dac-phase {
    display: flex;
    flex-direction: column;
}

.dac-phase__label {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: var(--dac-radius-pill, 999px);
    margin: 0 0 12px;
}

.dac-phase__label--1 { color: var(--dac-blue);        background: var(--dac-blue-light); }
.dac-phase__label--2 { color: var(--dac-green-hover);  background: var(--dac-green-pale); }
.dac-phase__label--3 { color: var(--dac-warning);      background: var(--dac-warning-bg); }

.dac-stepper {
    position: relative;
    display: flex;
    flex-direction: column;
}

.dac-stepper::before {
    content: '';
    position: absolute;
    top: 19px;
    bottom: 19px;
    left: 19px;
    width: 2px;
    background: var(--dac-border);
    z-index: 0;
}

.dac-step {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 18px 0;
}

.dac-step__num {
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--dac-blue);
    min-width: 38px;
    width: 38px;
    height: 38px;
    background: var(--dac-blue-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.dac-step__num--featured {
    background: var(--dac-green);
    color: #fff;
}

/* Step nodes match their phase's color (blue/green/amber), reinforcing the
   phase grouping visually beyond just the label text. */
.dac-step__num--phase2 { background: var(--dac-green-pale); color: var(--dac-green-hover); }
.dac-step__num--phase3 { background: var(--dac-warning-bg); color: var(--dac-warning); }

.dac-step__body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.dac-step__badge {
    display: block;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--dac-green-hover);
    margin: 0 0 4px;
}

.dac-step__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--dac-dark);
    margin: 0 0 8px;
    line-height: 1.3;
}

.dac-step__desc {
    font-size: 0.875rem;
    color: var(--dac-muted);
    line-height: 1.55;
    margin: 0;
}

.dac-step__desc a {
    color: var(--dac-blue);
    text-decoration: none;
}

.dac-step__desc a:hover {
    color: var(--dac-blue-hover);
    text-decoration: underline;
}

.dac-step__stat {
    margin: 12px 0 0;
    padding: 10px 14px;
    background: var(--dac-success-bg);
    border-left: 3px solid var(--dac-success);
    border-radius: var(--dac-radius-sm);
    font-size: 0.8125rem;
    color: var(--dac-success-text);
    line-height: 1.5;
}

.dac-step__stat strong {
    font-weight: 800;
}

/* ── Content Groups (/funding/, /paypro/, /leadership/, /logos/) ── */

.dac-content-groups {
    background: var(--dac-white);
    padding: 80px 0;
}

.dac-content-groups--alt {
    background: var(--dac-bg);
    border-top: 1px solid var(--dac-border);
}

/* /start/ page only — richer than the flat grey other subpages share via
   .dac-content-groups--alt above. Scoped to this extra class so /funding/,
   /paypro/, /leadership/, and /logos/ are untouched (see known_hazards.md
   H019 — shared classes styled page-specifically is exactly this trap). */
.dac-start-resources.dac-content-groups--alt {
    background: linear-gradient(160deg, var(--dac-blue-light) 0%, var(--dac-bg) 60%);
}

.dac-groups-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.dac-groups-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Support Banner component itself moved to resources.css (2026-07-06) so it
   can be reused on /resources/ too — resources.css loads on both /start/
   and /resources/, subpages.css only loads on the numbered step sub-pages.
   See resources.css for the full ruleset. */

.dac-group-card {
    background: var(--dac-white);
    border: 1.5px solid var(--dac-border);
    border-radius: var(--dac-radius-md);
    padding: 32px 28px;
    box-shadow: var(--dac-shadow);
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
}

/* Three of the four Key Resources cards (Enroller, Replicated Sites, Zoom
   Huddles) render via PHP shortcodes, which Bricks wraps in its own
   .brxe-shortcode div — a plain block element that does NOT stretch to fill
   its CSS Grid row on its own, even though .dac-groups-grid's row itself is
   already correctly sized to the tallest card (Quick Resources, an ordinary
   Bricks div, stretches fine by default). Making the wrapper a flex
   container and letting .dac-group-card grow into it is what makes every
   card in a row match height and stay matched as content changes -- fill,
   not a fixed pixel size, per Tyler's request (2026-07-06). */
.dac-groups-grid > .brxe-shortcode {
    display: flex;
}

.dac-groups-grid > .brxe-shortcode > .dac-group-card {
    flex: 1 1 auto;
    width: 100%;
}

/* Mobile overflow guard: grid/flex items default to min-width:auto, so a long
   unbreakable string (a replicated-site URL or enroller email) inside a card
   forces its track past the viewport and causes horizontal scroll at 390px.
   Let the tracks shrink and let the long strings wrap. */
.dac-groups-grid > *,
.dac-groups-grid > .brxe-shortcode > .dac-group-card {
    min-width: 0;
}

.dac-group-card__list a,
.dac-group-card__list code {
    overflow-wrap: anywhere;
}

.dac-content-groups--alt .dac-group-card {
    background: var(--dac-white);
}

.dac-group-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--dac-dark);
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--dac-blue-light);
    line-height: 1.3;
}

.dac-group-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dac-group-card__list li {
    font-size: 0.9375rem;
    color: var(--dac-text);
    line-height: 1.5;
    padding-left: 18px;
    position: relative;
}

.dac-group-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dac-blue);
    flex-shrink: 0;
}

.dac-group-card__list a {
    color: var(--dac-blue);
    text-decoration: none;
}

.dac-group-card__list a:hover {
    color: var(--dac-blue-hover);
    text-decoration: underline;
}

.dac-group-card__list code {
    font-size: 0.8125rem;
    background: var(--dac-blue-light);
    color: var(--dac-blue);
    padding: 2px 7px;
    border-radius: var(--dac-radius-xs);
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
}

/* ── Key Resources: Enroller / Huddle / Replicated Links cards ──────────── */
/* All three reuse .dac-group-card as their base (border/radius/shadow/padding)
   and are rendered by PHP shortcodes (start-page-resources.php) so they can
   read real per-broker data instead of static placeholder content. */

.dac-group-card__footnote {
    font-size: 0.8125rem;
    color: var(--dac-muted);
    line-height: 1.5;
    margin: 12px 0 0;
}

.dac-enroller-card__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.dac-enroller-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dac-dark);
}

.dac-enroller-card__contact {
    display: block;
    font-size: 0.9375rem;
    color: var(--dac-blue);
    text-decoration: none;
}

.dac-enroller-card__contact:hover {
    color: var(--dac-blue-hover);
    text-decoration: underline;
}

.dac-huddle-card__intro {
    margin: 4px 0 16px;
}

/* Join button, sized down from [dac_zoom_card]'s full-size .dac-zoom-join-btn
   to fit a card slot rather than a standalone component. */
.dac-huddle-card__join {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #2D8CFF;
    color: #fff !important;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    border-radius: 10px;
    margin-top: 16px;
    transition: background 0.15s ease;
}

.dac-huddle-card__join:hover {
    background: #1a75e8;
}

.dac-replicated-card__intro {
    margin: 4px 0 16px;
}

/* Broker ID callout, sits between the intro copy and the link list so the
   ID a broker is about to see highlighted throughout the links below is
   named plainly first. */
.dac-replicated-card__id-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--dac-text);
    background: var(--dac-green-pale);
    border-radius: var(--dac-radius-sm);
    padding: 8px 14px;
    margin: 0 0 18px;
}

.dac-replicated-card__id-value {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    font-weight: 800;
    color: var(--dac-green-hover);
}

/* Highlights the {id} portion inside each replicated link's displayed URL
   so it's obvious the link is personalized, not a shared/generic one. */
mark.dac-replicated-card__id-highlight {
    background: var(--dac-green-pale);
    color: var(--dac-green-hover);
    font-weight: 800;
    padding: 1px 3px;
    border-radius: 3px;
}

/* ── Card title icons ─────────────────────────────────────── */
/* All four Key Resources cards are Bricks-built (2026-07-06 — Enroller,
   Zoom Huddles, and Replicated Sites moved off full-card shortcodes so
   Tyler can edit them in the builder). None of the icon chips are DOM
   elements PHP has to render — every one is a CSS ::before background-image
   on the plain Bricks heading, same technique the Quick Resources card
   already used before this change. */

.dac-enroller-card .dac-group-card__title,
.dac-huddle-card .dac-group-card__title,
.dac-replicated-card .dac-group-card__title,
.dac-quicklinks-card .dac-group-card__title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dac-enroller-card .dac-group-card__title::before {
    content: '';
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    background-color: var(--dac-blue-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230048B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.dac-huddle-card .dac-group-card__title::before {
    content: '';
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    background-color: var(--dac-blue-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Crect x='2' y='6' width='14' height='12' rx='2' fill='%232D8CFF'/%3E%3Cpath d='M16 10.5L22 7v10l-6-3.5v-3z' fill='%232D8CFF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.dac-replicated-card .dac-group-card__title::before {
    content: '';
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    background-color: var(--dac-green-pale);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2322A85D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ── Colored top-border accents so the four Key Resources cards read as a
   distinct, branded set instead of four identical white boxes. ── */

.dac-enroller-card   { border-top: 4px solid var(--dac-blue); }
.dac-huddle-card      { border-top: 4px solid #2D8CFF; }
.dac-replicated-card  { border-top: 4px solid var(--dac-green-mid); }
.dac-quicklinks-card  { border-top: 4px solid var(--dac-warning); }

.dac-quicklinks-card .dac-group-card__title::before {
    content: '';
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9px;
    background-color: var(--dac-warning-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Quick Resources card: sitewide Quick Links nav menu ([dac_footer_menu],
   the same menu used in the footer) — the card's only content, per Tyler's
   call to drop the separate curated list (LMS Password Reset, etc.) rather
   than show a mix of "real nav" and "made-up" links side by side. */
/* 2-column grid so the 6 current Quick Links menu items read as three rows
   instead of one long column -- per Tyler's request (2026-07-06). The
   Enroller card next to it fills to match via the .brxe-shortcode flex
   fix above, so this stays visually balanced regardless of row count. */
.dac-quicklinks-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}

.dac-quicklinks-menu li {
    padding-left: 18px;
    position: relative;
}

.dac-quicklinks-menu li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dac-blue);
}

.dac-quicklinks-menu a {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--dac-blue);
    text-decoration: none;
}

.dac-quicklinks-menu a:hover {
    color: var(--dac-blue-hover);
    text-decoration: underline;
}

.dac-replicated-card__list a {
    line-height: 1.6;
}

/* ── Spotlight Section (/healthshare/) ───────────────────── */

.dac-spotlight-section {
    background: var(--dac-white);
    padding: 96px 0;
}

.dac-spotlight {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.dac-spotlight__icon {
    position: relative;
    width: 88px;
    height: 88px;
    background: var(--dac-error-bg);
    border-radius: 50%;
    color: transparent;
}

/* Drawn as two centered bars instead of relying on the "+" glyph -- font
   metrics never optically center a text character inside a flex box. */
.dac-spotlight__icon::before,
.dac-spotlight__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--dac-error);
    border-radius: 3px;
    transform: translate(-50%, -50%);
}

.dac-spotlight__icon::before {
    width: 34px;
    height: 7px;
}

.dac-spotlight__icon::after {
    width: 7px;
    height: 34px;
}

.dac-spotlight__heading {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--dac-dark);
    letter-spacing: -0.02em;
    margin: 0;
}

.dac-spotlight__body {
    font-size: 1.0625rem;
    color: var(--dac-muted);
    line-height: 1.75;
    margin: 0;
    max-width: 540px;
}

.dac-spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

/* ── Privacy Policy Page ──────────────────────────────────── */

.dac-policy-section {
    background: var(--dac-bg);
    padding: 120px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.dac-policy-card {
    background: var(--dac-white);
    border: 1.5px solid var(--dac-border);
    border-radius: var(--dac-radius-md);
    padding: 56px 48px;
    text-align: center;
    box-shadow: var(--dac-shadow-md);
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.dac-policy-card__icon {
    font-size: 3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    background: var(--dac-blue-light);
    border-radius: 50%;
    color: var(--dac-blue);
    margin-bottom: 4px;
}

.dac-policy-card__heading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--dac-dark);
    margin: 0;
    letter-spacing: -0.02em;
}

.dac-policy-card__body {
    font-size: 1rem;
    color: var(--dac-muted);
    line-height: 1.7;
    margin: 0;
    max-width: 440px;
}

/* ── Footer Link Button (Key Resources card footers) ──────── */

.dac-btn.dac-btn--footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--dac-blue) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin-top: 20px !important;
    width: auto !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.dac-btn.dac-btn--footer-link:hover {
    color: var(--dac-blue-hover) !important;
    text-decoration: underline !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── Placeholder Link Badge ───────────────────────────────── */

.dac-placeholder-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dac-muted);
    background: var(--dac-border);
    border: 1px dashed var(--dac-border);
    border-radius: 4px;
    padding: 2px 8px;
    vertical-align: middle;
    margin-left: 6px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* ── Document Link Items (replaces raw <li> in group cards) ─ */

.dac-btn.dac-btn--link-item {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--dac-blue);
    padding: 0 0 0 18px;
    font-weight: 500;
    font-size: 0.9375rem;
    text-align: left;
    text-decoration: none;
    display: block;
    width: 100%;
    line-height: 1.5;
    position: relative;
    cursor: pointer;
    border-radius: 0;
    transition: color 0.2s ease;
}

.dac-btn.dac-btn--link-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dac-blue);
    flex-shrink: 0;
}

.dac-btn.dac-btn--link-item:hover {
    color: var(--dac-blue-hover);
    text-decoration: underline;
    background: none;
    box-shadow: none;
    transform: none;
}

.dac-btn.dac-btn--link-item:focus-visible {
    outline: 2px solid var(--dac-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ── Logo Download Tiles (/logos/ only) ──────────────────────
   Individual real brand-asset files for one-click download, separate from
   the Marketing Materials document hub below it. Only ever add a tile here
   for a file that actually exists in the media library — see
   change_log.md 2026-07-06 for why the old 8-button filler grid was removed
   (every link pointed at the same generic Drive folder, nothing real). */

.dac-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.dac-logo-tile {
    background: var(--dac-white);
    border: 1.5px solid var(--dac-border);
    border-radius: var(--dac-radius-md);
    box-shadow: var(--dac-shadow);
    padding: 28px 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dac-logo-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--dac-shadow-md);
}

/* Preview is a real Bricks image element so Tyler can swap the logo file in
   the builder's Media picker. Bricks applies the element's CSS class directly
   to the <img> tag (no figure wrapper), so this styles the image itself.
   object-fit keeps every logo's aspect ratio inside one consistent box. */
.dac-logo-tile__preview {
    width: 100%;
    height: 120px;
    object-fit: contain;
    margin: 0 0 16px;
}

.dac-logo-tile__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--dac-dark);
    margin: 0;
    line-height: 1.35;
}

.dac-logo-tile__meta {
    font-size: 0.8125rem;
    color: var(--dac-muted);
    margin: 2px 0 16px;
}

.dac-logo-tile .dac-btn {
    width: 100%;
    margin-top: auto;
}

/* ── Logo Usage Notice (/logos/ only) ────────────────────────
   Compliance callout at the top of the page: the DAC Independent Agent logo
   brokers are required to use, plus the trademark-usage rule pulled from the
   DAC Company Booklet. Real Bricks elements (image + heading + text) so
   every line is editable in the builder. */
.dac-logo-notice {
    background: var(--dac-white);
    padding: 56px 0 8px;
}

/* Notice section layout: a row of Logo Variant Clicker boxes (DAC + BankBreezy)
   sits above the shared compliance card. The Bricks container is forced to a
   column so the clicker row stacks over the card; each clicker is its own
   self-contained card (own surface and shadow). */
.dac-logo-notice .dac-container {
    /* !important beats Bricks' own #brxe-{id}{flex-direction:row} ID rule so the
       logo row stacks above the compliance card. */
    flex-direction: column !important;
    align-items: stretch;
    gap: 32px;
}

/* Row of logo clicker boxes, equal width and centered. Each Bricks shortcode
   wrapper (.brxe-shortcode) is a flex item; the clicker inside fills it. */
.dac-logo-notice__logos {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.dac-logo-notice__logos .brxe-shortcode {
    flex: 1 1 320px;
    max-width: 440px;
    min-width: 0;
}

.dac-logo-notice .dac-lv {
    max-width: 100%;
    width: 100%;
}

/* Shared compliance card, full width below the logo boxes. */
.dac-logo-notice__card {
    background: var(--dac-blue-light);
    border: 1.5px solid var(--dac-border);
    border-left: 4px solid var(--dac-blue);
    border-radius: var(--dac-radius-lg);
    padding: 36px 40px;
    box-shadow: var(--dac-shadow);
}

.dac-logo-notice__body {
    max-width: 820px;
}

.dac-logo-notice__badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dac-blue);
    background: var(--dac-white);
    border: 1px solid var(--dac-blue);
    border-radius: var(--dac-radius-pill);
    padding: 4px 12px;
    margin-bottom: 14px;
}

.dac-logo-notice__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--dac-dark);
    margin: 0 0 12px;
    line-height: 1.25;
}

.dac-logo-notice__desc {
    font-size: 0.9375rem;
    color: var(--dac-text);
    line-height: 1.65;
    margin: 0;
}

/* Primary download button inside the notice card body — grabs the required
   blue lockup in one click, right where brokers read the usage rule. */
.dac-logo-notice__actions {
    margin-top: 22px;
}

/* Other color versions: a compact row of small download chips sitting directly
   beneath the notice card. Deliberately smaller than the main Download Logos
   grid tiles further down the page (Tyler's ask) — preview + name + small
   button. Two chips (White, Black) side by side. */
.dac-logo-notice__variants {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dac-logo-notice__variants-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dac-muted);
    margin: 0;
}

.dac-logo-variant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dac-logo-variant {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--dac-white);
    border: 1.5px solid var(--dac-border);
    border-radius: var(--dac-radius-md);
    padding: 14px 18px;
    box-shadow: var(--dac-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dac-logo-variant:hover {
    transform: translateY(-2px);
    box-shadow: var(--dac-shadow-md);
}

/* Preview thumbnail. Bricks applies the CSS class to the <img> itself (no
   figure wrapper), so this styles the image. The white logo is invisible on a
   light surface, so the --white modifier gives its preview a navy backdrop. */
.dac-logo-variant__preview {
    width: 92px;
    height: 58px;
    flex: none;
    object-fit: contain;
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--dac-blue-light);
}

.dac-logo-variant--white .dac-logo-variant__preview {
    background: var(--dac-navy);
}

.dac-logo-variant__caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.dac-logo-variant__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--dac-dark);
    margin: 0;
    line-height: 1.2;
}

.dac-logo-variant .dac-btn {
    padding: 7px 16px;
    font-size: 0.8125rem;
}

/* ── Brand Style Guide (/logos/ only) ────────────────────────
   Main brand colors + the Montserrat marketing typeface. Every swatch is a
   real Bricks div — its color set via the builder's own Background control
   (settings._background), so Tyler edits colors, labels, and hex text in
   Bricks with no code. Click-to-copy is display-layer only
   (brand-style-guide.js reads the hex from the .dac-swatch__hex text). */

.dac-style-guide__group {
    margin-bottom: 44px;
}

.dac-style-guide__group:last-child {
    margin-bottom: 0;
}

.dac-style-guide__group-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dac-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--dac-border);
}

/* Centered flex (not a stretch grid) so a partial colour row — e.g.
   BankBreezy's two swatches — sits centered rather than left-aligned, for
   both brand guides. Swatches keep a capped width and wrap/center on narrow
   screens. */
.dac-swatch-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

/* Background-color comes from each swatch's Bricks Background setting. The
   main brand colors shipped here (blue, green, navy) are all dark enough for
   white text; the surface fallback keeps a freshly-added swatch legible
   before its color is set in the builder. */
.dac-swatch {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1 1 200px;
    max-width: 260px;
    gap: 2px;
    padding: 16px;
    min-height: 120px;
    border-radius: var(--dac-radius-md);
    background: var(--dac-surface);
    cursor: pointer;
    box-shadow: var(--dac-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dac-swatch:hover {
    transform: translateY(-3px);
    box-shadow: var(--dac-shadow-md);
}

.dac-swatch__label,
.dac-swatch__hex {
    color: #FFFFFF;
    line-height: 1.3;
    margin: 0;
}

.dac-swatch__label {
    font-size: 0.9375rem;
    font-weight: 700;
}

.dac-swatch__hex {
    font-size: 0.8125rem;
    font-weight: 500;
    opacity: 0.9;
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    text-transform: uppercase;
}

/* Injected by brand-style-guide.js on copy — not authored in Bricks. */
.dac-swatch__copied {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.28);
    border-radius: var(--dac-radius-pill);
    padding: 3px 9px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.dac-swatch.is-copied .dac-swatch__copied {
    opacity: 1;
    transform: translateY(0);
}

/* ── Typography specimen — Montserrat ────────────────────────
   The DAC brand typeface for print/marketing materials (NOT the site's own
   Plus Jakarta Sans web font). Montserrat is loaded on /logos/ only, from
   the child theme functions.php. Each row's sample is an editable Bricks
   text element; the weight comes from the row modifier class. */
.dac-type-note {
    font-size: 0.9375rem;
    color: var(--dac-muted);
    line-height: 1.6;
    margin: 0 0 22px;
}

.dac-type-specimen {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.dac-type-row {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--dac-border);
}

.dac-type-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dac-type-row__label {
    flex: 0 0 120px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--dac-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.dac-type-row__sample {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    color: var(--dac-dark);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.dac-type-row--bold .dac-type-row__sample     { font-weight: 700; }
.dac-type-row--semibold .dac-type-row__sample { font-weight: 600; }
.dac-type-row--medium .dac-type-row__sample   { font-weight: 500; }
.dac-type-row--regular .dac-type-row__sample  { font-weight: 400; }

/* style.css forces --dac-font (Plus Jakarta Sans) on `body *:not(...)` with
   !important, which beats a plain-class font-family here. This 4-class
   selector clears (0,3,1) and re-applies Montserrat with !important so the
   specimen actually renders in the marketing typeface. Scoped tightly to the
   style-guide type sample — nothing else on the site is affected. */
.dac-content-groups .dac-style-guide__group .dac-type-row .dac-type-row__sample {
    font-family: 'Montserrat', sans-serif !important;
}

/* ── Brand eyebrow + BankBreezy guide accent ─────────────────
   DAC and BankBreezy each get their own Brand Style Guide on /logos/. A small
   uppercase eyebrow above each "Brand Style Guide" heading labels which brand
   the guide belongs to. The BankBreezy guide (.dac-style-guide--bb on its
   section) swaps the guide accent from DAC blue to BankBreezy's own blue
   (#25B0FF) on the eyebrow and the colour-group underline, so it reads as its
   own brand rather than a DAC sub-section. */
.dac-sg-eyebrow {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dac-blue);
    margin: 0 0 10px;
}

.dac-style-guide--bb .dac-sg-eyebrow {
    color: #25B0FF;
}

.dac-style-guide--bb .dac-style-guide__group-title {
    border-bottom-color: #25B0FF;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .dac-groups-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dac-groups-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dac-steps-section,
    .dac-content-groups,
    .dac-spotlight-section,
    .dac-policy-section {
        padding: 60px 0;
    }

    .dac-phases {
        gap: 36px;
    }

    .dac-groups-grid,
    .dac-groups-grid--3 {
        grid-template-columns: 1fr;
    }

    .dac-policy-card {
        padding: 40px 24px;
    }

    .dac-policy-section {
        min-height: auto;
    }

    .dac-logo-grid {
        grid-template-columns: 1fr;
    }

    .dac-logo-notice {
        padding: 44px 0 8px;
    }

    .dac-logo-notice .dac-container {
        gap: 28px;
    }

    /* Stack the two logo boxes vertically on mobile. */
    .dac-logo-notice__logos {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .dac-logo-notice__logos .brxe-shortcode {
        flex: none;
        max-width: 460px;
        width: 100%;
    }

    .dac-logo-notice__card {
        padding: 28px 24px;
    }

    .dac-logo-notice__body {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .dac-logo-variant-grid {
        grid-template-columns: 1fr;
    }

    .dac-type-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .dac-type-row__label {
        flex: none;
    }

    .dac-type-row__sample {
        font-size: 1.25rem;
    }
}