/* ============================================================================
   SENDABLE POLISH LAYER - relocated from the inline <style> in scripts/build-sendable.cjs
   (was sendable-only; here so the planner also inherits the polished look).
   Evaluated from the original template literal. Kept at the TOP so the rest of
   main.css still wins ties exactly as when this was inlined before ${mainCSS}.
   ============================================================================ */
    body[data-proposal-mode="sendable"] .announcement-bar { display: none !important; }
    body[data-proposal-mode="sendable"] { --announcement-height: 0px; }
    body[data-proposal-mode="sendable"] .price-bar { display: none !important; }
    body[data-proposal-mode="sendable"] :is(.compare-roi, .compare-roi-row, .compare-discount, .payment-discount,
    .roi-section, .roi-stats, .roi-chart, .compare-card-roi,
    .proposal-settings) { display: none !important; }
    .proposal-header { padding-top: 1rem; }
    body.has-breadcrumbs { padding-top: calc(var(--total-fixed-height, var(--header-height) + var(--breadcrumb-height) + var(--nav-height)) + 1rem); }
    .site-header { background: var(--shell, #fdfbf7); backdrop-filter: none; }
    .site-header .btn.primary { box-shadow: none !important; }
    .sendable-options { margin-top: auto; display: flex; flex-direction: column; gap: 0.75rem; padding-top: 1rem; }
    .sendable-option-pages { margin: 0.25rem 0 0; padding: 0.45rem 0.65rem; background: rgba(46,92,138,0.04); border-left: 2px solid var(--river, #2e5c8a); border-radius: 4px; font-size: 0.8rem; color: var(--slate); line-height: 1.5; font-style: italic; }
    .sendable-option-pages strong { color: var(--ink); font-style: normal; font-weight: 700; }
    .sendable-pkg-badge--varies { position: relative; cursor: help; outline: none; }
    .sendable-pkg-badge-asterisk { display: inline-block; margin-left: 0.15rem; font-weight: 900; line-height: 1; }
    .sendable-pkg-badge-tip { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; max-width: 280px; padding: 0.55rem 0.75rem; background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; font-style: normal; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 12; text-align: left; white-space: normal; }
    .sendable-pkg-badge-tip::after { content: ""; position: absolute; bottom: 100%; left: 12px; border: 5px solid transparent; border-bottom-color: var(--ink); }
    .sendable-pkg-badge--varies:hover .sendable-pkg-badge-tip, .sendable-pkg-badge--varies:focus-visible .sendable-pkg-badge-tip { opacity: 1; pointer-events: auto; }
    .sendable-options-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate); }
    .sendable-options-hint { font-weight: 400; text-transform: none; letter-spacing: 0; }
    .sendable-personal-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; margin-bottom: 2rem; display: flex; gap: 1.5rem; align-items: flex-start; }
    .sendable-personal-note img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
    .sendable-personal-note p { margin: 0; color: var(--ink); line-height: 1.7; font-size: 1rem; font-style: italic; }
    .sendable-note-sig { font-style: normal; margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; }
    .sendable-note-sig strong { font-size: 1rem; color: var(--ink); }
    .sendable-note-sig span { font-size: 0.85rem; color: var(--slate); }
    .sendable-option-row { padding: 1rem 1.25rem; background: var(--mist, #f0f2f5); border-radius: var(--radius-sm); }
    .sendable-option-row-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.25rem; }
    .sendable-option-row-header strong { font-size: 1rem; }
    .sendable-option-price { font-weight: 600; white-space: nowrap; color: var(--ink); }
    .sendable-option-desc { color: var(--slate); font-size: 0.95rem; margin: 0.25rem 0 0.5rem; line-height: 1.5; }
    .sendable-option-packages { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .sendable-pkg-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: #fff; }
    .sendable-pkg-badge--a { background: #64748b; }
    .sendable-pkg-badge--b { background: var(--river, #3b82f6); }
    .sendable-pkg-badge--c { background: var(--sage, #16a34a); }
    .sendable-pkg-badge--d { background: var(--gold, #d97706); }
    .sendable-pkg-badge--baseline { background: var(--sage, #57998e); color: #fff; padding: 0.25rem 0.7rem; font-weight: 700; }
    .sendable-pkg-badge--baseline-thin { background: rgba(87, 153, 142, 0.16); color: #2f5b54; font-weight: 600; }
    .services-subsection { margin: 0 0 2.5rem; }
    .services-subsection + .services-subsection { padding-top: 1.75rem; border-top: 1px solid var(--line); }
    .services-subsection-title { margin: 0 0 0.35rem; font-family: var(--font-title); font-size: 1.25rem; }
    .services-subsection-copy { color: var(--slate); margin: 0 0 1.5rem; line-height: 1.6; font-size: 0.95rem; }
    .sendable-static-card--baseline { border-color: rgba(87, 153, 142, 0.4); }
    .sendable-card-status { padding: 0.75rem 0 0; display: flex; }
    /* Collapsible service cards. The card itself is a <details>; the summary
       contains emoji, title, summary copy, and the A/B/C package chips. The
       body holds everything else (banners, features, option breakdown). */
    details.proposal-project-card.sendable-static-card { display: block; padding: 0; cursor: default; }
    details.proposal-project-card.sendable-static-card > summary.sendable-card-summary { list-style: none; padding: 1.1rem 1.25rem; cursor: pointer; display: grid; grid-template-columns: 36px 1fr auto auto; gap: 0.85rem; align-items: center; }
    details.proposal-project-card.sendable-static-card > summary.sendable-card-summary::-webkit-details-marker { display: none; }
    details.proposal-project-card.sendable-static-card > summary .proposal-project-card-emoji { font-size: 1.3rem; line-height: 1; }
    details.proposal-project-card.sendable-static-card > summary .proposal-project-card-name { font-size: 0.98rem; margin: 0 0 0.15rem; line-height: 1.3; }
    details.proposal-project-card.sendable-static-card > summary .proposal-project-card-summary { color: var(--slate); font-size: 0.82rem; line-height: 1.45; margin: 0; }
    .sendable-card-body { padding: 1rem 1.25rem 1.25rem; border-top: 1px dashed var(--line, #e2e2e2); margin-top: 0; }
    /* Suppress the features ul's own border-top when it is the first content
       inside the card body — otherwise it stacks under the body's dashed
       divider and renders as a double line. */
    .sendable-card-body > .proposal-project-card-features:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
    .sendable-card-toggle { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line, #e2e2e2); display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var(--slate); transition: background 0.15s, color 0.15s, border-color 0.15s; }
    details.proposal-project-card.sendable-static-card > summary:hover .sendable-card-toggle { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    /* Shared chevron icon: down when collapsed, rotates 180° up when open. */
    .toggle-chevron { transition: transform 0.2s ease; display: block; }
    details.proposal-project-card.sendable-static-card[open] .sendable-card-toggle .toggle-chevron,
    .problem-res-pair--collapsible[open] .problem-res-toggle .toggle-chevron,
    .proposal-nav-item--collapsible[open] .proposal-nav-toggle .toggle-chevron,
    .inspiration-list-details[open] .inspiration-list-toggle .toggle-chevron,
    .tech-stack-tool[open] .tech-stack-tool-toggle .toggle-chevron { transform: rotate(180deg); }
    /* Foundation-service hero card: full-width grid placement is handled by
       main.css [data-service-id="website-build"]; everything here is the
       visual emphasis that signals "this is the flagship," not just a wide
       card. */
    .sendable-static-card--hero { border-color: var(--river, #2e5c8a); border-width: 2px; box-shadow: 0 10px 32px rgba(46, 92, 138, 0.10); position: relative; overflow: hidden; }
    .sendable-static-card--hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--river, #2e5c8a), var(--sage, #57998e)); }
    details.proposal-project-card.sendable-static-card.sendable-static-card--hero > summary.sendable-card-summary { padding: 1.5rem 1.5rem 1.4rem; }
    details.proposal-project-card.sendable-static-card.sendable-static-card--hero > summary .proposal-project-card-emoji { font-size: 1.6rem; }
    details.proposal-project-card.sendable-static-card.sendable-static-card--hero > summary .proposal-project-card-name { font-size: 1.15rem; margin: 0 0 0.25rem; }
    details.proposal-project-card.sendable-static-card.sendable-static-card--hero > summary .proposal-project-card-summary { font-size: 0.92rem; line-height: 1.55; max-width: 70ch; }
    .sendable-hero-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--river, #2e5c8a); margin-bottom: 0.35rem; line-height: 1; }
    /* Combined Stack section: two-column narrative grid (editors | visitors)
       sits on top, and the actual tools list (.stack-tools-row) spans the
       full width below. Renders without the narrative grid when the project
       has no CMS foundation service. */
    .stack-editing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: stretch; }
    .stack-editing-grid--solo { grid-template-columns: minmax(0, 1fr); }
    .stack-editing-col { min-width: 0; }
    /* Card wrappers around each narrative column for clearer visual separation
       between the editors and visitors stories. Tools row stays uncarded so
       the section doesn't feel boxed-in everywhere. */
    .stack-editing-col--editing,
    .stack-editing-col--visitors { background: #fff; border: 1px solid var(--line, #e2e2e2); border-radius: var(--radius, 20px); padding: 1.85rem 1.85rem 1.6rem; box-shadow: 0 1px 2px rgba(15,23,42,0.04); display: flex; flex-direction: column; }
    .stack-editing-col--editing .stack-editing-anchor,
    .stack-editing-col--visitors .stack-editing-anchor { margin-top: auto; }
    .stack-tools-row { min-width: 0; }
    .stack-tools-row--has-narrative { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line, #e2e2e2); }
    .stack-editing-col-title { margin: 0 0 0.5rem; font-family: var(--font-title); font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
    .stack-editing-col-lead { color: var(--slate); line-height: 1.65; margin: 0 0 1.5rem; font-size: 0.95rem; }
    .editing-pillar-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; gap: 0; }
    .editing-pillar { display: grid; grid-template-columns: 36px 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line, #e2e2e2); align-items: start; }
    .editing-pillar:first-child { padding-top: 0; }
    .editing-pillar:last-child { border-bottom: none; }
    .editing-pillar-num { font-family: var(--font-title); font-size: 1.15rem; font-weight: 700; color: var(--river, #2e5c8a); line-height: 1; letter-spacing: 0.02em; }
    .editing-pillar-body h4 { margin: 0 0 0.35rem; font-family: var(--font-title); font-size: 1rem; line-height: 1.35; color: var(--ink); font-weight: 700; }
    .editing-pillar-body p { margin: 0; color: var(--slate); line-height: 1.6; font-size: 0.92rem; }
    .stack-editing-anchor { color: var(--slate); font-size: 0.9rem; line-height: 1.6; margin: 0; padding: 0.9rem 1.1rem; background: var(--mist, #f0f2f5); border-left: 3px solid var(--river, #2e5c8a); border-radius: 0 var(--radius-sm, 14px) var(--radius-sm, 14px) 0; }
    .stack-editing-anchor a { color: var(--river, #2e5c8a); font-weight: 600; }
    .stack-tools-lead { color: var(--slate); line-height: 1.65; margin: 0 0 1.5rem; font-size: 0.95rem; max-width: 70ch; }
    .stack-tools-help { margin-left: 0.4rem; }
    .stack-tools-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
    .stack-tools-grid--solo { grid-template-columns: minmax(0, 1fr); }
    .stack-tools-col { min-width: 0; }
    .stack-tools-col-title { margin: 0 0 0.85rem; font-family: var(--font-title); font-size: 1rem; color: var(--ink); }
    .stack-tools-col-title--secondary { color: var(--slate); }
    @media (max-width: 820px) {
      .stack-tools-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    }
    @media (max-width: 820px) {
      .stack-editing-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
      .stack-tools-row--has-narrative { margin-top: 2.5rem; padding-top: 2rem; }
    }
    /* A / B / C package chips on each service card */
    .sendable-svc-chips { display: inline-flex; gap: 0.22rem; align-items: center; }
    .sendable-svc-chip { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; font-family: var(--font-title, inherit); background: rgba(15,23,42,0.05); color: var(--slate); border: 1px solid var(--line, #e2e2e2); }
    .sendable-svc-chip.is-in { background: var(--ink, #1d2026); color: #fff; border-color: var(--ink, #1d2026); }
    .sendable-svc-chip.is-rec { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    /* Tooltip-style help icon next to the Service Details heading. Replaces
       the old permanent legend bar — filled vs outlined chip is explained on
       hover/focus instead of taking up real estate. */
    .chip-legend-help { display: inline-flex; position: relative; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line, #e2e2e2); color: var(--slate); margin-left: 0.5rem; cursor: help; vertical-align: middle; font-size: 0; }
    .chip-legend-help:hover, .chip-legend-help:focus-visible { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); outline: none; }
    .chip-legend-tip { position: absolute; top: calc(100% + 0.4rem); left: 50%; transform: translateX(-50%); width: max-content; max-width: 320px; padding: 0.85rem 1rem; background: #fff; color: var(--ink, #1d2026); font-size: 0.85rem; line-height: 1.5; border: 1px solid var(--line, #e2e2e2); border-radius: var(--radius-sm, 14px); box-shadow: 0 10px 28px rgba(15,23,42,0.12); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 30; text-align: left; display: flex; flex-direction: column; gap: 0.5rem; }
    .chip-legend-help:hover .chip-legend-tip, .chip-legend-help:focus-visible .chip-legend-tip { opacity: 1; }
    .chip-legend-tip-title { font-family: var(--font-title); font-weight: 700; font-size: 0.88rem; color: var(--ink, #1d2026); }
    .chip-legend-tip-row { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--slate); }
    @media (max-width: 600px) {
      details.proposal-project-card.sendable-static-card > summary.sendable-card-summary { grid-template-columns: 32px 1fr; gap: 0.6rem; padding: 0.85rem 1rem; }
      .sendable-svc-chips, .sendable-card-toggle { grid-column: 1 / 3; justify-self: end; }
      .sendable-card-toggle { margin-top: -1.4rem; }
    }
    .proposal-welcome-banner a { color: var(--river, #3b82f6); font-weight: 700; text-decoration: underline; }
    .sendable-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 2rem 0; }
    .sendable-legend-card { padding: 1.25rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; }
    .sendable-legend-card h4 { margin: 0 0 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
    .sendable-legend-card p { margin: 0; color: var(--slate); font-size: 0.95rem; line-height: 1.5; }
    .sendable-legend-intro { color: var(--slate); margin-bottom: 1.5rem; line-height: 1.7; }
    .sendable-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; align-items: center; }
    .sendable-filter-label { font-size: 0.85rem; font-weight: 700; color: var(--slate); margin-right: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.4rem; }
    .sendable-filter-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; color: var(--slate); cursor: help; outline: none; }
    .sendable-filter-help:hover, .sendable-filter-help:focus { color: var(--river, #3b82f6); }
    .sendable-filter-tip { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 280px; padding: 0.75rem 0.9rem; background: var(--ink, #141b2d); color: #fff; font-size: 0.8rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; border-radius: 8px; box-shadow: 0 8px 20px rgba(20,27,45,0.2); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 12; }
    .sendable-filter-tip strong { color: #fff; font-weight: 700; }
    .sendable-filter-tip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--ink, #141b2d); }
    .sendable-filter-help:hover .sendable-filter-tip,
    .sendable-filter-help:focus .sendable-filter-tip { opacity: 1; pointer-events: auto; }
    @media (max-width: 600px) { .sendable-filter-tip { left: 0; transform: none; width: min(280px, 80vw); } .sendable-filter-tip::before { left: 12px; transform: none; } }
    .sendable-option-row.is-dimmed { opacity: 0.4; transition: opacity 0.2s; }
    .sendable-lens-hint { display: none; padding: 0.5rem 0.85rem; margin: -1rem 0 1.5rem; background: rgba(46, 92, 138, 0.08); border-left: 3px solid var(--river, #3b82f6); border-radius: 4px; font-size: 0.85rem; color: var(--ink); }
    .sendable-lens-hint strong { color: var(--river, #3b82f6); }
    [data-lens] .sendable-lens-hint { display: block; }
    [data-lens] .services-subsection-copy { opacity: 0.6; }
    .sendable-lens-empty { padding: 2rem 1.5rem; text-align: center; background: var(--mist, #f0f2f5); border-radius: var(--radius-sm); border: 1px dashed var(--line); }
    .sendable-lens-empty p { margin: 0; color: var(--slate); font-size: 0.95rem; line-height: 1.6; }
    .sendable-lens-empty strong { color: var(--ink); }
    .sendable-lens-empty .btn-link { color: var(--river, #3b82f6); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-size: inherit; text-decoration: underline; }
    .sendable-filter-btn { padding: 0.5rem 1.25rem; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s; color: var(--ink); }
    .sendable-filter-btn:hover { border-color: var(--river); }
    .sendable-filter-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
    .sendable-filter-btn--a.is-active { background: #64748b; border-color: #64748b; }
    .sendable-filter-btn--b.is-active { background: var(--river, #3b82f6); border-color: var(--river, #3b82f6); }
    .sendable-filter-btn--c.is-active { background: var(--sage, #16a34a); border-color: var(--sage, #16a34a); }
    .sendable-static-card { transition: opacity 0.25s, transform 0.25s; position: relative; }
    .sendable-static-card.is-hidden { display: none; }
    .sendable-static-card.is-ghosted { opacity: 0.45; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(46, 92, 138, 0.025) 6px 12px); }
    .sendable-static-card.is-ghosted .proposal-project-card-name { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(100,116,139,0.5); }
    .sendable-static-card.is-ghosted::after { content: 'Not in this package'; position: absolute; top: 0.6rem; right: 0.6rem; padding: 0.18rem 0.55rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); background: #fff; border: 1px dashed var(--line); border-radius: 999px; }
    .sendable-static-card.is-ghosted:hover { opacity: 0.85; }
    .sendable-filter-empty { text-align: center; color: var(--slate); padding: 2rem 0; }
    .sendable-filter-empty .btn-link { color: var(--river); font-weight: 600; cursor: pointer; background: none; border: none; font-size: inherit; text-decoration: underline; }
    .compare-pkg--recommended { border: 2px solid var(--river, #3b82f6); }
    /* Lens-driven hiding for sitemap, navigation, total page counts.
       Items with class lens-ghostable collapse to a ghost summary
       instead of disappearing, so clients can see what they're missing. */
    body[data-proposal-mode="sendable"][data-lens="a"] [data-pkg-availability]:not([data-pkg-availability~="a"]):not(.lens-ghostable) { display: none !important; }
    body[data-proposal-mode="sendable"][data-lens="b"] [data-pkg-availability]:not([data-pkg-availability~="b"]):not(.lens-ghostable) { display: none !important; }
    body[data-proposal-mode="sendable"][data-lens="c"] [data-pkg-availability]:not([data-pkg-availability~="c"]):not(.lens-ghostable) { display: none !important; }
    body[data-proposal-mode="sendable"][data-lens="d"] [data-pkg-availability]:not([data-pkg-availability~="d"]):not(.lens-ghostable) { display: none !important; }
    /* Ghostable: hide regular contents, reveal ghost summary */
    .proposal-sitemap-ghost,
    .proposal-nav-ghost { display: none; }
    body[data-proposal-mode="sendable"][data-lens="a"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="a"]) > :not(.proposal-sitemap-ghost):not(.proposal-nav-ghost),
    body[data-proposal-mode="sendable"][data-lens="b"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="b"]) > :not(.proposal-sitemap-ghost):not(.proposal-nav-ghost),
    body[data-proposal-mode="sendable"][data-lens="c"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="c"]) > :not(.proposal-sitemap-ghost):not(.proposal-nav-ghost),
    body[data-proposal-mode="sendable"][data-lens="d"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="d"]) > :not(.proposal-sitemap-ghost):not(.proposal-nav-ghost) { display: none !important; }
    body[data-proposal-mode="sendable"][data-lens="a"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="a"]) > .proposal-sitemap-ghost,
    body[data-proposal-mode="sendable"][data-lens="b"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="b"]) > .proposal-sitemap-ghost,
    body[data-proposal-mode="sendable"][data-lens="c"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="c"]) > .proposal-sitemap-ghost,
    body[data-proposal-mode="sendable"][data-lens="d"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="d"]) > .proposal-sitemap-ghost { display: flex; }
    body[data-proposal-mode="sendable"][data-lens="a"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="a"]) > .proposal-nav-ghost,
    body[data-proposal-mode="sendable"][data-lens="b"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="b"]) > .proposal-nav-ghost,
    body[data-proposal-mode="sendable"][data-lens="c"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="c"]) > .proposal-nav-ghost,
    body[data-proposal-mode="sendable"][data-lens="d"] .lens-ghostable[data-pkg-availability]:not([data-pkg-availability~="d"]) > .proposal-nav-ghost { display: flex; }
    /* Ghost: collapse the parent group's border to dashed + faded skeleton */
    body[data-proposal-mode="sendable"][data-lens="a"] .lens-ghostable.proposal-sitemap-group:not([data-pkg-availability~="a"]),
    body[data-proposal-mode="sendable"][data-lens="b"] .lens-ghostable.proposal-sitemap-group:not([data-pkg-availability~="b"]),
    body[data-proposal-mode="sendable"][data-lens="c"] .lens-ghostable.proposal-sitemap-group:not([data-pkg-availability~="c"]),
    body[data-proposal-mode="sendable"][data-lens="d"] .lens-ghostable.proposal-sitemap-group:not([data-pkg-availability~="d"]) {
      border-top-style: dashed !important;
      border-color: var(--line) !important;
      background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(46, 92, 138, 0.025) 6px 12px) !important;
      padding: 0;
    }
    .proposal-sitemap-ghost { align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; font-size: 0.9rem; color: var(--slate); opacity: 0.7; transition: opacity 0.15s; }
    .proposal-sitemap-ghost:hover { opacity: 1; }
    .proposal-sitemap-ghost-color { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; opacity: 0.5; }
    .proposal-sitemap-ghost-text { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
    .proposal-sitemap-ghost-label { color: var(--slate); font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(100,116,139,0.5); }
    .proposal-sitemap-ghost-label strong { color: var(--ink); font-weight: 700; }
    .proposal-sitemap-ghost-explain { color: var(--slate); font-size: 0.78rem; line-height: 1.5; }
    .proposal-sitemap-ghost-explain strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
    .proposal-sitemap-ghost-active-pkg, .proposal-nav-ghost-active-pkg { color: var(--river, #3b82f6); font-weight: 700; white-space: nowrap; }
    .proposal-sitemap-ghost-reset { background: #fff; border: 1px solid var(--river, #3b82f6); color: var(--river, #3b82f6); font-size: 0.78rem; font-weight: 600; padding: 0.32rem 0.7rem; border-radius: 999px; cursor: pointer; flex-shrink: 0; white-space: nowrap; }
    .proposal-sitemap-ghost-reset:hover { background: var(--river, #3b82f6); color: #fff; }
    .proposal-nav-ghost { align-items: flex-start; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.9rem; background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(46, 92, 138, 0.025) 6px 12px); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: 0.82rem; }
    .proposal-nav-ghost strong { color: var(--slate); font-size: 0.9rem; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(100,116,139,0.5); }
    .proposal-nav-ghost span { color: var(--slate); font-size: 0.75rem; line-height: 1.5; }
    .proposal-nav-ghost span strong { color: var(--ink); font-weight: 600; font-size: 0.75rem; text-decoration: none; white-space: nowrap; }
    .proposal-architecture-lens-note { display: none; margin: 0.85rem 0 0; padding: 0.55rem 0.85rem; background: rgba(46, 92, 138, 0.08); border-left: 3px solid var(--river, #3b82f6); border-radius: 4px; font-size: 0.82rem; color: var(--ink); }
    .proposal-architecture-lens-note strong { color: var(--river, #3b82f6); }
    .proposal-architecture-lens-note .btn-link { color: var(--river, #3b82f6); font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-size: inherit; text-decoration: underline; }
    .proposal-architecture-lens-note.is-visible { display: block; }
    body[data-proposal-mode="sendable"][data-lens] [data-pkg-count="all"] { display: none; }
    body[data-proposal-mode="sendable"][data-lens="a"] [data-pkg-count="a"],
    body[data-proposal-mode="sendable"][data-lens="b"] [data-pkg-count="b"],
    body[data-proposal-mode="sendable"][data-lens="c"] [data-pkg-count="c"],
    body[data-proposal-mode="sendable"][data-lens="d"] [data-pkg-count="d"] { display: inline; }
    /* Lens highlight on the matching investment card */
    body[data-proposal-mode="sendable"][data-lens="a"] #investment-pkg-a,
    body[data-proposal-mode="sendable"][data-lens="b"] #investment-pkg-b,
    body[data-proposal-mode="sendable"][data-lens="c"] #investment-pkg-c,
    body[data-proposal-mode="sendable"][data-lens="d"] #investment-pkg-d {
      box-shadow: 0 0 0 3px var(--river, #3b82f6), 0 14px 32px rgba(46, 92, 138, 0.15);
      transform: translateY(-2px);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .proposal-from-service-badge { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.45rem; font-size: 0.7rem; font-weight: 600; color: var(--river, #3b82f6); background: rgba(46, 92, 138, 0.1); border-radius: 999px; vertical-align: middle; }
    .lens-pkg-pill-group { display: inline-flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; }
    .lens-pkg-pill { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; color: #fff; line-height: 1.4; white-space: nowrap; }
    .lens-pkg-pill--universal { background: var(--sage, #57998e); }
    .lens-pkg-pill--a { background: #64748b; }
    .lens-pkg-pill--b { background: var(--river, #3b82f6); }
    .lens-pkg-pill--c { background: #4ade80; color: #0d3b1f; }
    .lens-pkg-pill--d { background: var(--gold, #d97706); }
    .sitemap-template-tag { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; color: var(--slate); background: var(--mist, #f0f2f5); border: 1px dashed var(--line); line-height: 1.4; white-space: nowrap; font-style: italic; }
    .proposal-sitemap-list > li[data-layout-type="Template"], .proposal-sitemap-table tr[data-layout-type="Template"] { display: none; }
    .proposal-nav-top { flex-wrap: wrap; min-width: 0; }
    .proposal-nav-top .lens-pkg-pill-group--planner { flex-shrink: 1; min-width: 0; max-width: 100%; }
    .proposal-project-card-header { padding-right: calc(22px + 1rem + 0.5rem); flex-wrap: wrap; min-width: 0; }
    .proposal-project-card-header .lens-pkg-pill-group--planner { flex-shrink: 1; min-width: 0; max-width: 100%; }
    .cm-node.cm-node--filtered-out { opacity: 0.18 !important; transition: opacity 0.25s; }
    .cm-node.cm-node--filtered-out circle { stroke-dasharray: 4 4; }
    .compare-item--empty .compare-item-name { color: var(--line, #d4d4d4); font-weight: 400; }
    .compare-item--empty { background: transparent !important; }
    .compare-item--empty:hover { background: transparent !important; }
    .compare-item-subline { display: flex; justify-content: space-between; padding: 0.4rem 1.25rem 0.6rem 2.5rem; font-size: 0.82rem; color: var(--slate); font-style: italic; line-height: 1.4; border-bottom: 1px solid var(--line); }
    .compare-item-subline:last-child { border-bottom: none; }
    .compare-item-subline-price { font-weight: 600; font-style: normal; white-space: nowrap; }
    /* Absorbed sublines (Fold-content-into-Website-Build is on): the CT is
       in scope but its price was rolled into the foundation row, so the
       price field reads "Included in Website Build" instead of a dollar
       amount — lighter weight + italic to signal it's a pointer, not a
       number. */
    .compare-item-subline-price--included { font-weight: 500; font-style: italic; color: var(--slate); font-size: 0.78rem; opacity: 0.85; }
    /* Collapsed rollup display: subline prices and the foundation row's
       "expanded base price" are hidden by default; the lump price on the
       foundation row is what shows. Click-to-reveal (when enabled) flips
       the card into expanded view by adding .is-rollup-revealed. */
    .compare-pkg .rollup-price-expanded { display: none; }
    .compare-pkg--rollup-collapsed:not(.is-rollup-revealed) .compare-item-subline-price { visibility: hidden; }
    /* Absorbed-subline price text ("Included in Website Build") is a pointer,
       not a number — keep it visible even in collapsed mode so the client
       can see which CTs were folded into the foundation row. Overrides the
       blanket subline-price visibility:hidden rule above. */
    .compare-pkg--rollup-collapsed:not(.is-rollup-revealed) .compare-item-subline-price--included { visibility: visible; }
    .compare-pkg--rollup-collapsed.is-rollup-revealed .rollup-price-collapsed { display: none; }
    .compare-pkg--rollup-collapsed.is-rollup-revealed .rollup-price-expanded { display: inline; }
    .compare-foundation-reveal { display: inline-block; margin-top: 0.55rem; padding: 0.28rem 0.7rem; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
    .compare-foundation-reveal:hover { background: rgba(46, 92, 138, 0.05); border-color: var(--ink); }
    .compare-foundation-reveal:focus-visible { outline: 2px solid var(--river, #3b82f6); outline-offset: 2px; }
    .compare-pkg--rollup-revealable:not(.is-rollup-revealed) .compare-foundation-reveal-hide { display: none; }
    .compare-pkg--rollup-revealable.is-rollup-revealed .compare-foundation-reveal-show { display: none; }
    /* If reveal is not enabled, hide the button entirely (defensive — markup
       only emits the button when rollupReveal is true, but this guards
       against a stale style flash if the class were toggled by JS later). */
    .compare-pkg--rollup-collapsed:not(.compare-pkg--rollup-revealable) .compare-foundation-reveal { display: none; }
    .compare-item-meta { display: block; font-size: 0.78rem; font-weight: 400; color: var(--slate); margin-top: 0.18rem; }
    .compare-item-tagline { display: block; font-size: 0.78rem; font-weight: 400; font-style: italic; color: var(--slate); margin-top: 0.25rem; line-height: 1.45; }
    .compare-included-tier { display: inline-block; margin-left: 0.35rem; padding: 0.08rem 0.42rem; background: rgba(46, 92, 138, 0.08); color: var(--slate); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; vertical-align: middle; line-height: 1.4; }
    .compare-included-group { margin: 0.6rem 1.25rem 0.4rem; padding: 0.95rem 1rem 0.85rem; background: rgba(87, 153, 142, 0.06); border-radius: var(--radius-sm, 14px); }
    .compare-included-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage); margin-bottom: 0.6rem; }
    .compare-included-subhead { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--ink); margin: 0.85rem 0 0.4rem; letter-spacing: 0.02em; }
    .compare-included-subhead:first-of-type, .compare-included-label + .compare-included-subhead { margin-top: 0; }
    .compare-included-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: var(--slate); cursor: help; outline: none; border-radius: 50%; }
    .compare-included-info:hover, .compare-included-info:focus-visible { color: var(--river); }
    .compare-included-tip { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 220px; max-width: 280px; padding: 0.55rem 0.75rem; background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; border-radius: 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 10; }
    .compare-included-tip::after { content: ""; position: absolute; top: 100%; left: 8px; border: 5px solid transparent; border-top-color: var(--ink); }
    .compare-included-info:hover .compare-included-tip, .compare-included-info:focus-visible .compare-included-tip { opacity: 1; }
    .compare-included-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
    .compare-included-item { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.32rem 0; font-size: 0.84rem; color: var(--ink); border-bottom: 1px dashed rgba(46, 92, 138, 0.12); }
    .compare-included-item:last-child { border-bottom: none; }
    .compare-included-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); flex-shrink: 0; align-self: center; }
    .compare-included-name { flex: 1; }
    .compare-included-count { font-size: 0.78rem; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .compare-included-price { font-size: 0.84rem; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; min-width: 60px; text-align: right; }
    .compare-included-item { gap: 0.6rem; }
    .compare-included-item.is-sub .compare-included-price { font-size: 0.78rem; color: var(--slate); font-weight: 600; }
    .compare-included-item.is-missing .compare-included-price { color: rgba(15, 23, 42, 0.3); }
    .compare-included-item.is-missing { color: rgba(15, 23, 42, 0.35); }
    .compare-included-item.is-missing::before { background: transparent; border: 1px solid var(--line); }
    .compare-included-item.is-missing .compare-included-count { color: rgba(15, 23, 42, 0.3); }
    .compare-included-item.is-changed .compare-included-count { color: var(--gold, #d97706); font-weight: 700; }
    .compare-included-item.is-sub { padding-left: 1.1rem; font-size: 0.8rem; color: var(--slate); }
    .compare-included-item.is-sub::before { width: 4px; height: 4px; background: var(--slate); opacity: 0.55; }
    .compare-included-item.is-sub .compare-included-count { font-size: 0.74rem; }
    .compare-included-system { display: inline-block; margin-left: 0.45rem; padding: 0.08rem 0.45rem; background: rgba(46, 92, 138, 0.08); color: var(--river, #2e5c8a); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; border-radius: 4px; vertical-align: middle; line-height: 1.5; white-space: nowrap; }
    .compare-included-item.is-missing .compare-included-system { background: rgba(15, 23, 42, 0.05); color: rgba(15, 23, 42, 0.35); }
    /* Subgrid alignment: each card spans 8 rows on the parent grid so the
       header / intro / items / included / totals / calls / timeline / ctas
       sections lock to the same vertical position across packages. */
    /* Problem / Resolution pairs (blue palette) */
    .problem-res-intro { color: var(--slate); line-height: 1.7; max-width: 760px; margin: 0 0 2rem; font-size: 1rem; }
    .priorities-outcomes { display: block; margin: 0 0 3.5rem; padding: 1.1rem 1.35rem; background: rgba(108, 142, 110, 0.08); border-left: 3px solid var(--sage, #6c8e6e); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; max-width: 820px; }
    .priorities-outcomes-eyebrow { display: inline-block; font-family: var(--font-title); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage, #6c8e6e); margin-bottom: 0.35rem; }
    .priorities-outcomes-body { color: var(--ink); line-height: 1.7; font-size: 1rem; margin: 0; }
    .priorities-outcomes-body strong { color: var(--ink); font-weight: 700; }
    .proposal-hero-goal { display: block; margin: 1.25rem 0 1.75rem; padding: 1.1rem 1.35rem; background: rgba(108, 142, 110, 0.08); border-left: 3px solid var(--sage, #6c8e6e); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; max-width: 820px; }
    .proposal-hero-goal-eyebrow { display: inline-block; font-family: var(--font-title); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage, #6c8e6e); margin-bottom: 0.35rem; }
    .proposal-hero-goal-body { color: var(--ink); line-height: 1.7; font-size: 1rem; margin: 0; }
    .proposal-hero-goal-body strong { color: var(--ink); font-weight: 700; }
    .proposal-hero-goal-body a { color: var(--river, #2e5c8a); font-weight: 600; }
    .problem-res-grid { display: grid; gap: 1rem; }
    .problem-res-pair { display: grid; grid-template-columns: 1fr 1fr; border: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 8px 30px rgba(15,23,42,0.08); background: #fff; }
    .problem-res-side { padding: 1.75rem 2rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
    .problem-res-side--problem { background: #1f3650; color: #e8f0f9; }
    .problem-res-side--resolution { background: #f4f7fb; border-left: 3px solid var(--river, #2e5c8a); }
    .problem-res-num { font-family: var(--font-title, inherit); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; }
    .problem-res-side--problem .problem-res-num { color: rgba(232,240,249,0.55); }
    .problem-res-side--resolution .problem-res-num { color: var(--slate); }
    .problem-res-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; }
    .problem-res-eyebrow::before { content: ''; width: 14px; height: 1px; background: currentColor; opacity: 0.6; }
    .problem-res-side--problem .problem-res-eyebrow { color: rgba(232,240,249,0.7); }
    .problem-res-eyebrow--resolution { color: var(--river, #2e5c8a); }
    .problem-res-title { font-family: var(--font-title, inherit); font-size: 1.08rem; font-weight: 700; line-height: 1.35; margin: 0; }
    .problem-res-side--problem .problem-res-title { color: #fff; }
    .problem-res-side--resolution .problem-res-title { color: var(--ink); }
    .problem-res-detail { font-size: 0.92rem; line-height: 1.65; margin: 0; }
    .problem-res-side--problem .problem-res-detail { color: rgba(232,240,249,0.85); }
    .problem-res-side--resolution .problem-res-detail { color: var(--slate); }
    .problem-res-detail a { color: var(--river, #2e5c8a); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(46,92,138,0.35); transition: border-color 0.15s, color 0.15s; }
    .problem-res-detail a:hover { border-bottom-color: var(--river, #2e5c8a); color: #1f3650; }
    @media (max-width: 760px) { .problem-res-pair { grid-template-columns: 1fr; } .problem-res-side--problem { border-bottom: 0; } .problem-res-side--resolution { border-left: 0; border-top: 3px solid var(--river, #2e5c8a); } }
    /* Collapsible Problem/Resolution pairs - closed by default, prose + chips
       live inside the body and are revealed on click. The summary line shows
       the number, problem headline, and resolution headline.
       NOTE: !important on display + grid-template-columns because main.css
       still defines .problem-res-pair as a 2-col grid (legacy markup) and
       that would force summary+body into 50/50 columns otherwise. */
    .problem-res-pair--collapsible { display: block !important; grid-template-columns: none !important; background: #fff; padding: 0; box-shadow: 0 4px 14px rgba(15,23,42,0.05); border: 1px solid var(--line, #e2e2e2); transition: box-shadow 0.15s, border-color 0.15s; overflow: visible; }
    .problem-res-pair--collapsible[open] { box-shadow: 0 8px 30px rgba(15,23,42,0.09); border-color: rgba(46,92,138,0.35); }
    .problem-res-summary { display: grid; grid-template-columns: 48px 1fr 1fr 40px; gap: 1.25rem; align-items: center; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; }
    .problem-res-summary::-webkit-details-marker { display: none; }
    .problem-res-summary .problem-res-num { color: var(--slate); opacity: 0.75; font-size: 0.85rem; }
    .problem-res-summary-side { display: flex; flex-direction: column; gap: 0.35rem; }
    .problem-res-summary-side .problem-res-eyebrow { font-size: 0.62rem; }
    .problem-res-summary-side .problem-res-title { font-size: 0.95rem; color: var(--ink); }
    .problem-res-summary-side--resolution .problem-res-title { color: var(--river, #2e5c8a); }
    .problem-res-toggle { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--line, #e2e2e2); display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var(--slate); justify-self: end; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .problem-res-summary:hover .problem-res-toggle { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    .problem-res-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0 1.5rem 1.5rem; border-top: 1px dashed var(--line, #e2e2e2); margin-top: 0; }
    .problem-res-body-side { padding: 1.25rem 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; }
    .problem-res-body-side--resolution { padding-left: 1.5rem; padding-right: 0; border-left: 1px dashed var(--line, #e2e2e2); }
    .problem-res-body-side .problem-res-detail { color: var(--slate); font-size: 0.9rem; line-height: 1.65; margin: 0; }
    @media (max-width: 760px) {
      .problem-res-summary { grid-template-columns: 36px 1fr 28px; gap: 0.75rem; padding: 1rem 1.1rem; }
      .problem-res-summary-side--resolution { grid-column: 2 / 4; padding-top: 0.4rem; border-top: 1px dashed var(--line, #e2e2e2); }
      .problem-res-body { grid-template-columns: 1fr; padding: 0 1.1rem 1.1rem; }
      .problem-res-body-side--resolution { padding: 1rem 0 0; border-left: 0; border-top: 1px dashed var(--line, #e2e2e2); }
    }

    .inspiration-trio { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; margin: 0 0 1.5rem; align-items: stretch; }
    @media (max-width: 900px) { .inspiration-trio { grid-template-columns: 1fr; } }
    .inspiration-block--trio { padding: 1.1rem 1.25rem; height: 100%; }
    .inspiration-block--trio .inspiration-block-heading { margin: 0 0 0.6rem; font-size: 0.92rem; }
    .inspiration-block--trio .inspiration-block-copy { font-size: 0.88rem; line-height: 1.6; margin: 0 0 1rem; }
    .inspiration-subheading { margin: 1.25rem 0 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); font-family: var(--font-title, inherit); }
    .inspiration-disclaimer { margin: 0 0 0.75rem; font-size: 0.75rem; color: var(--slate); font-style: italic; line-height: 1.5; }
    .inspiration-mockup-lead { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--river, #2e5c8a); margin: 1rem 0 0.6rem; }

    .inspiration-mockup-cta { padding: 1.75rem 2rem; background: linear-gradient(135deg, rgba(46,92,138,0.06), rgba(87,153,142,0.04)); border: 1px solid rgba(46,92,138,0.18); border-radius: var(--radius); margin: 0 0 2rem; }
    .inspiration-mockup-cta--with-shot { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; align-items: center; }
    @media (max-width: 720px) { .inspiration-mockup-cta--with-shot { grid-template-columns: 1fr; gap: 1.25rem; } }
    .inspiration-mockup-cta-text { display: flex; flex-direction: column; gap: 0.85rem; }
    .inspiration-mockup-cta-shotwrap { display: block; line-height: 0; transition: transform 0.15s, box-shadow 0.15s; }
    .inspiration-mockup-cta-shotwrap:hover { transform: translateY(-2px); }
    .inspiration-mockup-cta-shot { width: 100%; height: auto; display: block; border-radius: var(--radius-sm, 14px); border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 8px 22px rgba(15,23,42,0.08); }
    .inspiration-mockup-cta-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--river, #2e5c8a); }
    .inspiration-mockup-cta-vision { margin: 0; color: var(--ink); font-size: 1rem; line-height: 1.65; }
    .inspiration-mockup-cta-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-title, inherit); font-size: 0.95rem; font-weight: 700; color: var(--river, #2e5c8a); text-decoration: none; padding: 0.55rem 1rem; border: 1px solid rgba(46,92,138,0.3); border-radius: 999px; background: #fff; transition: background 0.15s, border-color 0.15s, color 0.15s; }
    .inspiration-mockup-cta-link:hover { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    .inspiration-audiences { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
    .inspiration-audience { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.65rem; align-items: baseline; padding: 0.4rem 0; }
    .inspiration-audience + .inspiration-audience { border-top: 1px solid var(--line); padding-top: 0.7rem; }
    .inspiration-audience-emoji { font-size: 1.05rem; line-height: 1.4; }
    .inspiration-audience-text { color: var(--slate); font-size: 0.92rem; line-height: 1.55; }
    .inspiration-audience-text strong { color: var(--ink); font-weight: 700; }
    .inspiration-grid { display: grid; gap: 1.5rem; }
    .inspiration-block { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm, 14px); padding: 1.25rem 1.5rem; }
    .inspiration-block-heading { margin: 0 0 0.75rem; font-size: 1rem; font-family: var(--font-title, inherit); font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
    .inspiration-block-copy { margin: 0; color: var(--slate); line-height: 1.7; }
    .inspiration-swatches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
    .inspiration-swatch { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
    .inspiration-swatch + .inspiration-swatch { border-top: 1px solid var(--line); padding-top: 0.5rem; }
    .inspiration-swatch-chip { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(15,23,42,0.12); flex-shrink: 0; }
    .inspiration-swatch-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
    .inspiration-swatch-row { display: inline-flex; align-items: baseline; gap: 0.45rem; }
    .inspiration-swatch-meta strong { font-size: 0.82rem; color: var(--ink); font-weight: 700; }
    .inspiration-swatch-hex { font-size: 0.7rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--slate); }
    .inspiration-swatch-note { font-size: 0.75rem; color: var(--slate); line-height: 1.45; }
    .inspiration-refs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
    .inspiration-ref { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.5rem 0; }
    .inspiration-ref + .inspiration-ref { border-top: 1px solid var(--line); padding-top: 0.6rem; }
    .inspiration-ref-name { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--ink); font-family: var(--font-title, inherit); line-height: 1.35; }
    .inspiration-ref-name a { color: var(--ink); text-decoration: none; }
    .inspiration-ref-name a:hover { color: var(--river, #2e5c8a); }
    .inspiration-ref-notes { margin: 0; color: var(--slate); font-size: 0.78rem; line-height: 1.5; }
    .inspiration-ref-source { margin: 0; color: var(--slate); font-size: 0.7rem; font-style: italic; opacity: 0.85; }
    .inspiration-assets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.85rem; }
    .inspiration-asset { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; background: #fafafa; border: 1px solid var(--line); border-radius: 8px; }
    .inspiration-asset img { max-width: 100%; height: auto; border-radius: 4px; }
    .inspiration-asset-body { display: flex; flex-direction: column; gap: 0.2rem; }
    .inspiration-asset-body strong { color: var(--ink); font-size: 0.92rem; }
    .inspiration-asset-body a { color: var(--river, #2e5c8a); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
    .inspiration-asset-note { color: var(--slate); font-size: 0.8rem; line-height: 1.45; }
    .inspiration-extras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; color: var(--ink); }
    .inspiration-extras a { color: var(--river, #2e5c8a); font-weight: 600; text-decoration: none; }
    .inspiration-extras-note { color: var(--slate); font-size: 0.88rem; }

    /* New simplified inspiration section: vibe sentence + audiences (always
       visible titles, per-row expand) + mockup figure + palette swatches
       (always visible, hover for detail) + reference sites (title list). */
    .inspiration-vibe { color: var(--ink); font-size: 1rem; line-height: 1.65; margin: 0 0 1.5rem; max-width: 760px; }
    .inspiration-intro { color: var(--slate); font-size: 1rem; line-height: 1.7; margin: 0 0 2rem; max-width: 70ch; }
    .inspiration-mockup-note { margin: 0; color: var(--slate); font-size: 0.86rem; line-height: 1.55; font-style: italic; }
    .inspiration-palette-vibe { margin: 0 0 1rem; color: var(--slate); font-size: 0.88rem; line-height: 1.55; }
    .inspiration-block-hint { display: inline-block; margin-left: 0.5rem; color: var(--slate); font-weight: 500; font-size: 0.72rem; font-family: var(--font-body, inherit); text-transform: none; letter-spacing: 0; }
    .inspiration-block { margin-bottom: 1.5rem; }
    .inspiration-mockup { margin: 1.75rem 0 1.5rem; padding: 0; display: grid; gap: 0; }
    .inspiration-mockup-shotwrap { display: block; line-height: 0; transition: transform 0.15s; }
    .inspiration-mockup-shotwrap:hover { transform: translateY(-2px); }
    .inspiration-mockup-shot { width: 100%; max-width: 760px; height: auto; display: block; border-radius: var(--radius-sm, 14px); border: 1px solid rgba(15,23,42,0.08); box-shadow: 0 8px 22px rgba(15,23,42,0.08); }
    .inspiration-mockup-caption { padding: 0.85rem 0 0; max-width: 760px; }
    .inspiration-mockup-vision { margin: 0; color: var(--slate); font-size: 0.92rem; line-height: 1.65; }
    .inspiration-mockup-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.6rem; font-family: var(--font-title, inherit); font-size: 0.88rem; font-weight: 700; color: var(--river, #2e5c8a); text-decoration: none; padding: 0.4rem 0.9rem; border: 1px solid rgba(46,92,138,0.3); border-radius: 999px; background: #fff; transition: background 0.15s, color 0.15s; }
    .inspiration-mockup-link:hover { background: var(--river, #2e5c8a); color: #fff; }

    /* Shared title-list pattern (audiences + reference sites) */
    .inspiration-list { list-style: none; margin: 0; padding: 0; }
    .inspiration-list-item { border-bottom: 1px dashed var(--line); }
    .inspiration-list-item:last-child { border-bottom: 0; }
    .inspiration-list-details { padding: 0; }
    .inspiration-list-details > summary { list-style: none; cursor: pointer; padding: 0.65rem 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
    .inspiration-list-details > summary::-webkit-details-marker { display: none; }
    .inspiration-list-title { font-size: 0.92rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
    .inspiration-list-link { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
    .inspiration-list-link:hover { color: var(--river, #2e5c8a); }
    .inspiration-list-toggle { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line, #e2e2e2); display: inline-flex; align-items: center; justify-content: center; color: var(--slate); flex-shrink: 0; margin-left: 0.5rem; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .inspiration-list-details > summary:hover .inspiration-list-toggle { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    .inspiration-list-desc { padding: 0 0 0.85rem; color: var(--slate); font-size: 0.85rem; line-height: 1.6; }
    .inspiration-list-desc-body { margin: 0 0 0.4rem; }
    .inspiration-list-desc-source { margin: 0; font-size: 0.74rem; font-style: italic; color: var(--slate); opacity: 0.85; }

    /* Design section layout: mockup thumbnail on the left in a 50/50 split
       with palette + reference sites stacked on the right side. Uses the
       horizontal real estate so the design materials sit beside the mockup
       instead of stacking full-width below it. */
    .inspiration-row { display: grid; gap: 1.5rem; margin-bottom: 1.25rem; }
    .inspiration-row--mockup-stack { grid-template-columns: 1fr 1fr; align-items: start; }
    .inspiration-row--mockup-stack .inspiration-row-mockup { margin: 0; }
    .inspiration-row--mockup-stack .inspiration-row-mockup .inspiration-mockup { margin: 0; }
    .inspiration-row--mockup-stack .inspiration-row-mockup .inspiration-mockup-shot { max-width: 100%; }
    .inspiration-row--mockup-stack .inspiration-row-stack { display: flex; flex-direction: column; gap: 1rem; }
    .inspiration-row--mockup-stack .inspiration-row-stack > .inspiration-block { margin: 0; }
    @media (max-width: 880px) { .inspiration-row--mockup-stack { grid-template-columns: 1fr; } }

    /* Inside the supporting stack, blocks sit tight and don't need their
       own outer margin (the stack manages spacing via gap). */
    .inspiration-row-stack .inspiration-block { margin: 0; }

    /* Compact palette: row of circles, hover for tooltip with name/hex/note */
    .inspiration-swatches--compact { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; align-items: center; padding-top: 0.25rem; }
    .inspiration-swatch-hover { position: relative; display: inline-block; width: 36px; height: 36px; padding: 0; outline: none; cursor: help; border-top: 0; }
    .inspiration-swatch-hover + .inspiration-swatch-hover { border-top: 0; padding-top: 0; }
    .inspiration-swatch-hover .inspiration-swatch-chip { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line, #e2e2e2), 0 2px 4px rgba(0,0,0,0.06); display: block; transition: transform 0.15s; }
    .inspiration-swatch-hover:hover .inspiration-swatch-chip,
    .inspiration-swatch-hover:focus-visible .inspiration-swatch-chip { transform: scale(1.08); }
    .inspiration-swatch-hover::after { content: attr(data-name) ' ' attr(data-hex) attr(data-note-prefix) attr(data-note); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 0.45rem 0.7rem; border-radius: 6px; font-size: 0.72rem; line-height: 1.45; width: 220px; text-align: left; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 10; box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
    .inspiration-swatch-hover::before { content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); z-index: 10; opacity: 0; transition: opacity 0.15s; }
    .inspiration-swatch-hover:hover::after,
    .inspiration-swatch-hover:focus-visible::after,
    .inspiration-swatch-hover:hover::before,
    .inspiration-swatch-hover:focus-visible::before { opacity: 1; }
    /* Compose tooltip content: name (top), hex (mono), note (gray below) */
    .inspiration-swatch-hover[data-note]::after { content: attr(data-name) '\A' attr(data-hex) '\A' attr(data-note); white-space: pre-line; }
    .inspiration-swatch-hover:not([data-note])::after { content: attr(data-name) '\A' attr(data-hex); white-space: pre-line; }
    /* "Setup" is a cost-TYPE tag (this price is the one-time portion), a
       different kind of data from the filled, interactive tier-selection pill.
       Render it as an outlined gold chip so the two never read as the same
       thing: tier = solid blue selection, setup = ghost gold cost-type. */
    .compare-item-tag-setup { display: inline-block; margin-left: 0.4rem; padding: 0.08rem 0.45rem; background: transparent; color: var(--gold, #b8860b); border: 1px solid color-mix(in srgb, var(--gold, #b8860b) 45%, transparent); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 999px; vertical-align: middle; line-height: 1.5; }
    .compare-item-disclaimer { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; color: var(--slate); cursor: help; outline: none; border-radius: 50%; vertical-align: -2px; transition: color 0.15s; }
    .compare-item-disclaimer:hover, .compare-item-disclaimer:focus-visible { color: var(--river, #2e5c8a); }
    .compare-item-disclaimer-tip { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 200px; max-width: 260px; padding: 0.55rem 0.75rem; background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; font-style: normal; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 12; text-align: left; }
    .compare-item-disclaimer-tip::after { content: ""; position: absolute; top: 100%; left: 8px; border: 5px solid transparent; border-top-color: var(--ink); }
    .compare-item-disclaimer:hover .compare-item-disclaimer-tip, .compare-item-disclaimer:focus-visible .compare-item-disclaimer-tip { opacity: 1; pointer-events: auto; }
    .compare-item-distributed { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--river, #2e5c8a); cursor: help; outline: none; border-radius: 50%; background: rgba(46, 92, 138, 0.08); transition: background 0.15s, color 0.15s; }
    .compare-item-distributed:hover, .compare-item-distributed:focus-visible { background: rgba(46, 92, 138, 0.18); color: var(--ink); }
    .compare-item-distributed-tip { position: absolute; bottom: calc(100% + 8px); right: 0; min-width: 180px; padding: 0.55rem 0.75rem; background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; border-radius: 8px; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 10; white-space: normal; text-align: left; }
    .compare-item-distributed-tip::after { content: ""; position: absolute; top: 100%; right: 10px; border: 5px solid transparent; border-top-color: var(--ink); }
    .compare-item-distributed:hover .compare-item-distributed-tip, .compare-item-distributed:focus-visible .compare-item-distributed-tip { opacity: 1; }
    .compare-group-label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); font-family: var(--font-title, inherit); padding: 1rem 0 0.55rem; border-bottom: 2px solid var(--line); margin-bottom: 0.4rem; }
    .compare-group-label--ongoing { margin-top: 0.85rem; color: var(--river, #2e5c8a); border-bottom-color: var(--river, #2e5c8a); }
    .compare-group-label-text { line-height: 1; }
    .compare-group-label-info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--slate); cursor: help; outline: none; border-radius: 50%; transition: color 0.15s; }
    .compare-group-label-info:hover, .compare-group-label-info:focus-visible { color: var(--river, #2e5c8a); }
    .compare-group-label-tip { position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px; max-width: 280px; padding: 0.6rem 0.8rem; background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 12; text-align: left; }
    .compare-group-label-tip::after { content: ""; position: absolute; bottom: 100%; left: 8px; border: 5px solid transparent; border-bottom-color: var(--ink); }
    .compare-group-label-info:hover .compare-group-label-tip, .compare-group-label-info:focus-visible .compare-group-label-tip { opacity: 1; pointer-events: auto; }
    .compare-item--foundation { background: linear-gradient(135deg, rgba(46,92,138,0.05), rgba(87,153,142,0.04)); border-left: 3px solid var(--river, #2e5c8a); padding-left: 0.85rem !important; padding-right: 0.85rem !important; }
    .compare-item-price--note { font-weight: 600; font-style: italic; font-size: 0.85rem; color: var(--slate); }
    .compare-item--placeholder { opacity: 0.45; }
    .compare-item--placeholder .compare-item-name, .compare-item--placeholder .compare-item-price { color: var(--slate); }
    .compare-item--placeholder .compare-item-tagline { font-style: italic; }
    .compare-grid--aligned { grid-template-rows: repeat(8, auto); align-items: stretch; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .compare-grid--aligned > .compare-pkg--aligned { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 8; gap: 1rem; min-width: 0; overflow: hidden; }
    .compare-grid--aligned > .compare-pkg--aligned > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
    .compare-grid--aligned .compare-item { min-width: 0; }
    .compare-grid--aligned .compare-item-name { min-width: 0; overflow-wrap: anywhere; }
    .compare-grid--aligned .compare-included-group { min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
    .compare-grid--aligned .compare-included-list { min-width: 0; }
    .compare-grid--aligned .compare-included-item { min-width: 0; flex-wrap: wrap; }
    .compare-grid--aligned .compare-included-name { min-width: 0; overflow-wrap: anywhere; }
    .compare-section-placeholder { min-height: 0; }
    .compare-includes-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.85rem; margin-top: 0.5rem; background: rgba(231, 84, 128, 0.08); border-radius: var(--radius-sm); color: var(--ink); font-size: 0.9rem; }
    .compare-includes-row strong { font-weight: 700; }
    .compare-includes-icon { font-size: 1rem; line-height: 1; }
    .compare-includes-flex-note { display: block; margin-top: 0.35rem; font-size: 0.72rem; color: var(--slate); font-style: italic; line-height: 1.4; }
    .compare-includes-row { align-items: flex-start; }
    .compare-includes-body { display: flex; flex-direction: column; gap: 0.15rem; }
    .compare-includes-intro { font-size: 0.85rem; color: var(--slate); }
    .compare-includes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.05rem; }
    .compare-includes-list li { font-size: 0.9rem; color: var(--ink); line-height: 1.5; }
    .compare-includes-list strong { font-weight: 700; }
    .compare-includes-row--empty { background: rgba(20, 27, 45, 0.04); }
    .compare-includes-row--empty .compare-includes-list li { color: var(--slate); font-size: 0.85rem; font-style: italic; }
    /* Fixed min-height so the strategy-calls block aligns horizontally
       across packages whether the card has 0, 1, or 2 calls included. */
    .compare-includes-row { min-height: 4.5rem; }

    /* ─── Tier pip dots (cluster context indicator) ──────────────── */
    .tier-pips { display: inline-flex; gap: 5px; vertical-align: middle; margin-left: 0.45rem; position: relative; top: -2px; }
    .tier-pip { width: 8px; height: 8px; border-radius: 50%; background: rgba(20, 27, 45, 0.18); display: inline-block; }
    .tier-pip--filled { background: var(--sage, #6a8f7a); }

    /* ─── Tier compare disclosure (all-tier comparison) ──────────── */
    .tier-compare-disclosure { margin-top: 0.5rem; padding: 0 0.25rem; }
    .tier-compare-disclosure summary { cursor: pointer; list-style: none; font-family: var(--font-title); font-size: 0.85rem; font-weight: 600; color: var(--river, #2e5c8a); padding: 0.55rem 0.5rem; border-radius: var(--radius-sm); transition: background 0.15s; }
    .tier-compare-disclosure summary::-webkit-details-marker { display: none; }
    .tier-compare-disclosure summary:hover { background: rgba(46, 92, 138, 0.06); }
    .tier-compare-disclosure summary::after { content: " ▾"; font-size: 0.7rem; color: var(--slate); margin-left: 0.3rem; }
    .tier-compare-disclosure[open] summary::after { content: " ▴"; }
    .tier-compare-table { width: 100%; margin-top: 0.6rem; border-collapse: collapse; font-size: 0.85rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
    .tier-compare-table th, .tier-compare-table td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
    .tier-compare-table tr:last-child td { border-bottom: none; }
    .tier-compare-table th { font-family: var(--font-title); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); background: var(--mist); white-space: nowrap; }
    .tier-compare-table tr.is-used td { background: rgba(106, 143, 122, 0.06); }
    .tier-compare-table tr.is-used td:first-child { border-left: 3px solid var(--sage, #6a8f7a); }
    .tier-compare-table tr.is-unused td { color: var(--slate); opacity: 0.75; }
    .tier-compare-table tr.is-unused td:first-child { border-left: 3px solid transparent; }
    .tier-compare-flag { display: block; margin-top: 0.2rem; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; font-style: italic; color: var(--slate); text-transform: none; letter-spacing: 0; white-space: nowrap; }
    .tier-compare-name { white-space: nowrap; }
    .tier-compare-price { white-space: nowrap; }
    .tier-compare-pkg-cell { white-space: nowrap; }
    .tier-compare-pkg-badge { display: inline-block; padding: 0.12rem 0.5rem; background: rgba(106, 143, 122, 0.16); color: var(--sage, #6a8f7a); font-family: var(--font-body); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 999px; margin-right: 0.2rem; }
    .tier-compare-pkg-badge--a { background: rgba(46, 92, 138, 0.14); color: var(--river, #2e5c8a); }
    .tier-compare-pkg-badge--b { background: rgba(106, 143, 122, 0.16); color: var(--sage, #6a8f7a); }
    .tier-compare-pkg-badge--c { background: rgba(246, 197, 96, 0.22); color: #b07e16; }
    .tier-compare-pkg-none { color: var(--slate); font-style: italic; font-size: 0.85rem; opacity: 0.6; }
    .compare-includes-help { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 0.3rem; color: var(--slate); cursor: help; outline: none; border-radius: 50%; vertical-align: -2px; }
    .compare-includes-help:hover, .compare-includes-help:focus-visible { color: var(--river); }
    .compare-includes-help-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 240px; white-space: normal; padding: 0.65rem 0.8rem; background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 400; line-height: 1.5; letter-spacing: 0; border-radius: 8px; box-shadow: 0 8px 18px rgba(0,0,0,0.18); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 12; text-align: left; }
    .compare-includes-help-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); }
    .compare-includes-help:hover .compare-includes-help-tip, .compare-includes-help:focus-visible .compare-includes-help-tip { opacity: 1; pointer-events: auto; }
    @media (max-width: 600px) { .compare-includes-help-tip { left: 0; transform: none; width: min(240px, 80vw); } .compare-includes-help-tip::after { left: 12px; transform: none; } }
    /* End-anchored variant: tooltip opens leftward so an icon at a container's right edge isn't clipped. */
    .compare-includes-help--end .compare-includes-help-tip { left: auto; right: -2px; transform: none; }
    .compare-includes-help--end .compare-includes-help-tip::after { left: auto; right: 6px; transform: none; }
    .compare-total-subnote { margin: -0.25rem 0 0.4rem; padding: 0 0.25rem; font-size: 0.78rem; color: var(--slate); font-style: italic; text-align: right; }
    .compare-total-subnote span { display: inline-block; }
    .glance-pkg-link:hover { background: var(--shell, #f7f5f0) !important; transform: translateY(-2px); }
    .glance-pkg-link:hover > div:first-child { color: var(--river, #3b82f6); }
    .compare-pkg { scroll-margin-top: 1.5rem; }
    .compare-pkg-rec-badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: var(--river, #3b82f6); color: #fff; vertical-align: middle; margin-left: 0.5rem; }
    .compare-pkg-desc-badge { display: inline-block; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.68rem; font-weight: 600; background: transparent; color: var(--slate); border: 1px solid var(--line); letter-spacing: 0.02em; vertical-align: middle; margin-left: 0.5rem; }

    /* ── Zone 1: Universal floor ──────────────────────────────────────── */
    .universal-floor-block { background: linear-gradient(135deg, rgba(87,153,142,0.06), rgba(46,92,138,0.04)); border: 1px solid rgba(87,153,142,0.18); border-radius: var(--radius); padding: 1.75rem 2rem; margin-bottom: 2.5rem; }
    .universal-floor-header { margin-bottom: 1.25rem; }
    .universal-floor-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sage); padding: 0.25rem 0.6rem; background: rgba(87,153,142,0.1); border-radius: 4px; margin-bottom: 0.6rem; }
    .universal-floor-heading { margin: 0 0 0.4rem; font-size: 1.35rem; color: var(--ink); font-family: var(--font-title); }
    .universal-floor-intro { margin: 0; color: var(--slate); font-size: 0.95rem; line-height: 1.6; max-width: 640px; }
    .universal-floor-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
    .universal-floor-chips { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .universal-floor-chip { display: inline-block; padding: 0.4rem 0.85rem; background: rgba(255,255,255,0.75); border: 1px solid rgba(15,23,42,0.06); border-radius: 999px; font-size: 0.85rem; color: var(--ink); line-height: 1.3; }
    .universal-floor-totals-note { display: inline-block; margin-left: 0.5rem; font-size: 0.78rem; color: var(--slate); font-style: italic; font-weight: 400; }
    .universal-floor-row { display: grid; grid-template-columns: 1fr auto; gap: 1.25rem; align-items: start; padding: 0.85rem 1rem; background: rgba(255,255,255,0.7); border-radius: var(--radius-sm); border: 1px solid rgba(15,23,42,0.04); }
    .universal-floor-name { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
    .universal-floor-title { font-weight: 600; color: var(--ink); font-size: 0.98rem; line-height: 1.3; }
    .universal-floor-tier { display: inline-block; margin-left: 0.35rem; padding: 0.08rem 0.4rem; background: rgba(46, 92, 138, 0.08); color: var(--slate); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 4px; vertical-align: middle; line-height: 1.4; }
    .universal-floor-tag { display: inline-block; align-self: flex-start; font-size: 0.65rem; font-weight: 600; color: var(--slate); padding: 0.1rem 0.5rem; border: 1px solid var(--line); border-radius: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
    .universal-floor-tagline { color: var(--slate); font-size: 0.85rem; line-height: 1.5; margin-top: 0.15rem; }
    .universal-floor-prices { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end; flex-shrink: 0; }
    .universal-floor-cost { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; min-width: 90px; }
    .universal-floor-cost.is-empty { display: none; }
    .universal-floor-cost-label { font-size: 0.62rem; font-weight: 700; color: var(--slate); letter-spacing: 0.06em; text-transform: uppercase; }
    .universal-floor-cost strong { font-size: 0.95rem; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
    .universal-floor-cost--monthly strong { color: var(--river); }
    .universal-floor-totals { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid rgba(15,23,42,0.08); }
    .universal-floor-totals-label { font-size: 0.78rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; }
    .universal-floor-totals-values { font-size: 0.95rem; color: var(--ink); }
    .universal-floor-totals-values strong { font-variant-numeric: tabular-nums; }
    .universal-floor-totals-sep { color: var(--slate); margin: 0 0.5rem; }
    .universal-floor-sublines { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
    .universal-floor-subline { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: 0.82rem; color: var(--slate); padding: 0.15rem 0 0.15rem 0.85rem; border-left: 2px solid rgba(46,92,138,0.15); }
    .universal-floor-subline.is-sitemap { border-left-color: var(--gold, #d97706); }
    .universal-floor-subline.is-core { border-left-color: var(--river, #2e5c8a); }
    .universal-floor-subline-name { line-height: 1.4; }
    .universal-floor-subline-price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
    .compare-item--delta { background: rgba(217,119,6,0.05); border-left: 2px solid var(--gold, #d97706); padding-left: 0.85rem !important; }
    @media (max-width: 600px) { .universal-floor-block { padding: 1.25rem; } .universal-floor-row { grid-template-columns: 1fr; } .universal-floor-prices { flex-direction: row; align-items: center; gap: 1rem; } .universal-floor-cost { align-items: flex-start; } }

    /* ── Investment "what changes" header ────────────────────────────── */
    .investment-packages-header { margin: 0.5rem 0 1.5rem; }
    .investment-packages-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--river); padding: 0.25rem 0.6rem; background: rgba(46,92,138,0.08); border-radius: 4px; margin-bottom: 0.6rem; }
    .investment-packages-heading { margin: 0 0 0.4rem; font-size: 1.35rem; color: var(--ink); font-family: var(--font-title); }
    .investment-packages-intro { margin: 0; color: var(--slate); font-size: 0.95rem; line-height: 1.6; max-width: 640px; }
    .investment-toolbar { display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; margin: 0 0 1.5rem; }
    .investment-toggle { display: inline-flex; padding: 0.2rem; background: rgba(15,23,42,0.05); border-radius: 999px; gap: 0.15rem; margin: 0; }
    .investment-toggle-btn { appearance: none; border: 0; background: transparent; padding: 0.4rem 0.95rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--slate); cursor: pointer; transition: all 0.15s; font-family: inherit; }
    .investment-toggle-btn:hover { color: var(--ink); }
    .investment-toggle-btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15,23,42,0.08); }
    /* Detailed / Compact toggle - same visual style, separate group. */
    .investment-detail-toggle { display: inline-flex; padding: 0.2rem; background: rgba(46,92,138,0.08); border-radius: 999px; gap: 0.15rem; margin: 0; }
    .investment-detail-toggle-btn { appearance: none; border: 0; background: transparent; padding: 0.4rem 0.95rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: var(--slate); cursor: pointer; transition: all 0.15s; font-family: inherit; }
    .investment-detail-toggle-btn:hover { color: var(--ink); }
    .investment-detail-toggle-btn.is-active { background: var(--river, #2e5c8a); color: #fff; box-shadow: 0 2px 6px rgba(46,92,138,0.25); }
    /* Compact mode keeps parent line items + prices visible but hides:
        - per-item descriptions/taglines (the long explanatory text)
        - sub-line items rolled up under Website Build (Blog/People/etc.)
        - placeholder rows for items NOT in a given package (the faded
          em-dash rows that exist only to vertically align cards)
        - the cross-card row alignment itself (cards collapse to their
          natural heights so there's no dead space between rows)
        - package intro paragraphs, includes, timeline footers
       Parent items + prices + totals + CTAs stay visible. */
    .compare-grid--compact .compare-includes-row,
    .compare-grid--compact .compare-timeline-estimate,
    .compare-grid--compact .compare-item-tagline,
    .compare-grid--compact .compare-item-subline,
    .compare-grid--compact .compare-total-row--detail,
    .compare-grid--compact .compare-item--placeholder,
    body[data-proposal-mode="sendable"] .compare-grid--compact .compare-section-placeholder { display: none !important; }
    /* Group label that separates the One-time and Monthly totals in the
       expanded view, so one-time vs recurring credits read as distinct. */
    .compare-total-section-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--slate, #5a6470); padding: 0.55rem 0 0.15rem; margin-top: 0.35rem; border-top: 1px solid var(--line, #e5e7eb); }
    /* In-card "Show details" toggle: a mirror of the top Compact/Detailed
       control. It flips the whole grid, so the entire card expands (totals,
       payment plan, calls), not just the gray totals block. Label follows the
       grid state. */
    .compare-detail-toggle { appearance: none; border: 0; background: transparent; padding: 0.35rem 0; margin-top: 0.15rem; font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--river, #2e5c8a); cursor: pointer; align-self: flex-start; }
    .compare-detail-toggle:hover { text-decoration: underline; }
    .compare-detail-toggle-hide { display: none; }
    .compare-grid:not(.compare-grid--compact) .compare-detail-toggle-show { display: none; }
    .compare-grid:not(.compare-grid--compact) .compare-detail-toggle-hide { display: inline; }
    /* The one-time split reads as a parenthetical in Compact; in Detailed the
       timeline block states it, so hide the parenthetical there. */
    .compare-grid:not(.compare-grid--compact) .compare-split-note { display: none; }
    /* Keep the cross-card subgrid alignment intact in compact mode so the
       Recurring header, totals, and CTAs all line up at the same Y across
       Package A / B / C. With placeholders + sublines hidden, the aligned
       rows still distribute as if those items were there — that's what
       creates the consistent horizontal eye-line the reader scans on. */
    .compare-grid--compact .compare-section-placeholder { display: block !important; }
    .compare-grid--compact .compare-item--placeholder { display: block !important; visibility: hidden; }
    .compare-grid--compact .compare-items { display: flex !important; flex-direction: column; gap: 0.25rem; }
    .compare-grid--compact .compare-item { padding: 0.35rem 0.85rem !important; }
    .compare-grid--compact .compare-item--foundation { padding: 0.65rem 0.85rem !important; }
    .compare-grid--compact .compare-group-label { padding: 0.6rem 0 0.35rem !important; margin: 0 !important; }
    .compare-grid--compact .compare-pkg { padding-bottom: 1rem; }
    .compare-grid.is-deltas-only .compare-item[data-universal="true"] { display: none; }
    .compare-grid.is-deltas-only .compare-item-subline { display: none; }
    .compare-grid.is-deltas-only .compare-pkg .compare-items:empty::after { content: "Just the foundation - no add-ons in this package."; display: block; padding: 0.75rem 1rem; color: var(--slate); font-size: 0.88rem; font-style: italic; line-height: 1.5; background: rgba(46,92,138,0.04); border-radius: var(--radius-sm); margin: 0.5rem 1.25rem; }

    /* ── Compact = paired single-row view; Detailed = sectioned breakdown ──
       Only fires on cards that emit BOTH containers (pricingFlags.compactPairsRows).
       Compact shows one merged row per service (setup + monthly on one line);
       Detailed shows the full One-time / Recurring breakdown. */
    .compare-grid--compact .compare-items--sectioned { display: none !important; }
    .compare-grid:not(.compare-grid--compact) .compare-items--paired { display: none !important; }
    /* The merged price block: one-time in --ink, monthly in --river, "+" muted
       so it never reads as "then". */
    .compare-item--paired .pair-price { grid-column: 2; grid-row: 1 / 2; align-self: center; text-align: right; white-space: nowrap; font-weight: 700; font-size: 1rem; color: var(--ink); }
    .compare-item--paired .pair-price .setup { color: var(--ink); }
    .compare-item--paired .pair-price .plus { color: var(--slate); font-weight: 400; margin: 0 0.2rem; }
    .compare-item--paired .pair-price .mo { color: var(--ink); }
    .compare-item--paired .pair-price .only-mo { color: var(--ink); }
    .compare-item--paired .pair-price .pair-na { color: var(--slate); font-weight: 600; opacity: 0.55; }
    /* Struck gross price next to the credited net (e.g. ~$6,700~ $5,000). Used in
       both the Compact paired row and the Detailed foundation lump. */
    .pair-was { color: var(--slate); font-weight: 500; text-decoration: line-through; text-decoration-color: var(--slate); margin-right: 0.15rem; }
    /* Small uppercase clarifier under the name (e.g. "build + management"). */
    .compare-item--paired .pair-sub { display: block; margin-top: 0.25rem; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; color: var(--slate); text-transform: uppercase; }
    /* Placeholder paired row: a VISIBLE ghost (unlike the sectioned compact
       placeholder, which is hidden) so the cross-card comparison still reads. */
    .compare-item--paired-empty .compare-item-name { color: var(--slate); font-weight: 500; }
    .compare-item--paired-empty .pair-sub { font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; }

    /* ── Composition tags on card rows ───────────────────────────────── */
    .compare-item-comptag { display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.4rem; background: rgba(15,23,42,0.04); color: var(--slate); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 3px; vertical-align: middle; line-height: 1.5; white-space: nowrap; }

    /* ── Zone 3: Relationship spectrum ───────────────────────────────── */
    .relationship-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
    .relationship-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; position: relative; transition: transform 0.15s, box-shadow 0.15s; }
    .relationship-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,0.06); }
    .relationship-card--included { border-color: rgba(87,153,142,0.35); background: rgba(87,153,142,0.04); }
    .relationship-card--mid { border-color: rgba(46,92,138,0.25); }
    .relationship-card--top { border-color: rgba(217,119,6,0.3); background: rgba(217,119,6,0.03); }
    .relationship-card-header { display: flex; align-items: center; gap: 0.6rem; }
    .relationship-card-icon { font-size: 1.4rem; }
    .relationship-card-eyebrow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); }
    .relationship-card--included .relationship-card-eyebrow { color: var(--sage); }
    .relationship-card--top .relationship-card-eyebrow { color: var(--gold, #d97706); }
    .relationship-card-title { margin: 0; font-size: 1.2rem; font-family: var(--font-title); color: var(--ink); }
    .relationship-card-price { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(15,23,42,0.04); border-radius: var(--radius-sm); }
    .relationship-card--included .relationship-card-price { background: rgba(87,153,142,0.1); }
    .relationship-card--top .relationship-card-price { background: rgba(217,119,6,0.08); }
    .relationship-card-price-label { font-size: 0.7rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.05em; }
    .relationship-card-price-value { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
    .relationship-card-copy { margin: 0; color: var(--ink); font-size: 0.92rem; line-height: 1.6; flex: 1; }
    .relationship-card-note { margin: 0; padding: 0.7rem 0.85rem; background: rgba(15,23,42,0.03); border-left: 2px solid var(--sage, #57998e); border-radius: 4px; font-size: 0.78rem; line-height: 1.55; color: var(--slate); }
    .relationship-card-note strong { color: var(--ink); font-weight: 600; }
    .relationship-card-active { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.85rem; border-top: 1px dashed var(--line); }
    .relationship-card-active-label { font-size: 0.65rem; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; }
    .relationship-card-active-pkgs { display: inline-flex; gap: 0.3rem; }
    .relationship-pkg-pill { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(15,23,42,0.05); color: var(--slate); font-size: 0.72rem; font-weight: 700; }
    .relationship-pkg-pill.is-active { background: var(--ink); color: #fff; }
    .relationship-card--included .relationship-pkg-pill.is-active { background: var(--sage); }
    .relationship-card--top .relationship-pkg-pill.is-active { background: var(--gold, #d97706); }
    .sitemap-add-ct-bar, .sitemap-show-empty-toggle,
    [class*="sitemap-add"], [class*="sitemap-merge"],
    .sitemap-export-wrap, .sitemap-export-btn, .sitemap-reset-btn,
    .sitemap-add-ct-btn, #add-ct-bar,
    body[data-proposal-mode="sendable"] :is(.sitemap-actions, .sitemap-action, .sitemap-edit-wrap,
    .sitemap-action-edit, .sitemap-action-move, .sitemap-action-remove,
    .sitemap-table-actions, .sitemap-table-edit, .sitemap-table-th-actions,
    .sitemap-bucket-badge,
    .proposal-project-check, .compare-edit-controls, .compare-edit-add) { display: none !important; }
    /* Sendable does not break down content cost in the table view —
       hide the price column unconditionally so the JS-generated cells
       and the SSR Cost th drop out together without leaving an empty
       column slot. */
    body[data-proposal-mode="sendable"] :is(.sitemap-table-price, .sitemap-table-th-price) { display: none !important; }
    .sitemap-table-pkg-header { text-align: right; white-space: nowrap; padding-right: 0.6rem; }
    .sitemap-table-pkg-header .sendable-filter-help { margin-left: 0.3rem; vertical-align: middle; }
    /* Anchor the tooltip to the right edge of the icon so it doesn't overflow
       past the table when the help bubble lives in the rightmost column. */
    .sitemap-table-pkg-header .sendable-filter-tip { left: auto; right: 0; transform: none; }
    .sitemap-table-pkg-header .sendable-filter-tip::before { left: auto; right: 4px; transform: none; }
    .proposal-sitemap-table td.sitemap-table-packages { text-align: right; padding-right: 0.6rem; }
    .proposal-sitemap-table td.sitemap-table-packages .sitemap-pkg-pills { display: inline-flex; gap: 0.3rem; justify-content: flex-end; }
    /* Sendable is read-only: package pills in the table show availability
       at a glance but aren't editable. Kill pointer events + the hover
       affordances that hint at editability. */
    .sitemap-table-packages .sitemap-pkg-pill,
    .sitemap-pkg-pills .sitemap-pkg-pill {
      pointer-events: none !important;
      cursor: default !important;
    }
    /* Make the "linked to <service>" indicator obvious as a relationship
       rather than free text glued to the CT label. Stack it under the
       label, dim it, and surface the tooltip on hover via a dotted
       underline so readers know it's a hover affordance. */
    .proposal-sitemap-table .sitemap-table-ct + .proposal-from-service-badge,
    .sitemap-table-ct-row .proposal-from-service-badge,
    .sitemap-table-ct-child .proposal-from-service-badge {
      display: block;
      margin: 0.25rem 0 0;
      font-size: 0.68rem;
      font-weight: 500;
      color: var(--slate, #64748b);
      background: transparent;
      padding: 0;
      border-bottom: 1px dotted var(--slate, #64748b);
      width: max-content;
      cursor: help;
    }
    .proposal-from-service-badge:hover { color: var(--river, #3b82f6); border-bottom-color: var(--river, #3b82f6); }
    [contenteditable] { pointer-events: none; -webkit-user-modify: read-only; }
    .proposal-timeline-step { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; grid-template-columns: auto 1fr !important; }
    .proposal-timeline-owner--together { width: 100% !important; }
    .proposal-timeline-type-label { font-size: 0.75rem !important; }
    .proposal-timeline-step { opacity: 0; transform: translateY(12px); transition: opacity 0.35s ease-out, transform 0.35s ease-out; }
    .proposal-timeline-step.is-visible { opacity: 1; transform: none !important; }
    .proposal-timeline-connector { opacity: 0; transition: opacity 0.25s ease-out; }
    .proposal-timeline-connector.is-visible { opacity: 1; }
    /* Collapsible phase groups — collapsed by default. Summary shows week
       label + step count + toggle. Body holds the individual step cards. */
    .proposal-timeline-phases { display: flex; flex-direction: column; gap: 0.55rem; }
    .workflow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem; align-items: start; margin-top: 0.5rem; }
    .workflow-timeline-col { min-width: 0; }
    .workflow-side-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
    .workflow-side-card { padding: 1.1rem 1.25rem; background: #fff; border: 1px solid var(--line, #e2e2e2); border-radius: var(--radius, 20px); box-shadow: 0 1px 2px rgba(15,23,42,0.04); }
    .workflow-side-card-title { margin: 0 0 0.45rem; font-family: var(--font-title); font-size: 1rem; color: var(--ink); }
    .workflow-side-card p { margin: 0; color: var(--slate); font-size: 0.92rem; line-height: 1.6; }
    @media (max-width: 820px) {
      .workflow-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    }
    .proposal-timeline-phase { background: #fff; border: 1px solid var(--line, #e2e2e2); border-radius: var(--radius-sm, 14px); padding: 0; transition: box-shadow 0.15s, border-color 0.15s; }
    .proposal-timeline-phase[open] { box-shadow: 0 6px 20px rgba(15,23,42,0.06); border-color: rgba(46,92,138,0.35); }
    .proposal-timeline-phase-summary { list-style: none; cursor: pointer; padding: 0.95rem 1.25rem; display: grid; grid-template-columns: 7rem 1fr auto auto; gap: 0.85rem; align-items: center; }
    .proposal-timeline-phase-summary::-webkit-details-marker { display: none; }
    .proposal-timeline-phase-week { font-family: var(--font-title, inherit); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--river, #2e5c8a); }
    .proposal-timeline-phase-headline { font-family: var(--font-title, inherit); font-weight: 700; font-size: 0.95rem; color: var(--ink); line-height: 1.4; }
    .proposal-timeline-phase-count { color: var(--slate); font-size: 0.78rem; white-space: nowrap; }
    @media (max-width: 600px) {
      .proposal-timeline-phase-summary { grid-template-columns: 1fr auto; gap: 0.55rem; padding: 0.85rem 1rem; }
      .proposal-timeline-phase-week { grid-column: 1 / 3; font-size: 0.7rem; }
      .proposal-timeline-phase-headline { grid-column: 1 / 2; font-size: 0.9rem; }
      .proposal-timeline-phase-count { grid-column: 1 / 2; font-size: 0.74rem; margin-top: -0.3rem; }
      .proposal-timeline-phase-toggle { grid-column: 2; grid-row: 2; }
    }
    .proposal-timeline-phase-toggle { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line, #e2e2e2); display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var(--slate); justify-self: end; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .proposal-timeline-phase-summary:hover .proposal-timeline-phase-toggle { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    .proposal-timeline-phase[open] .proposal-timeline-phase-toggle .toggle-chevron { transform: rotate(180deg); }
    .proposal-timeline-phase-summary:hover .proposal-timeline-phase-toggle { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    .proposal-timeline-phase-body { padding: 1rem 1.25rem 1.25rem; border-top: 1px dashed var(--line, #e2e2e2); display: flex; flex-direction: column; gap: 0.75rem; }
    .proposal-timeline-phase-body .proposal-timeline-step { opacity: 1; transform: none; }
    /* Lock the left marker column to a fixed width so step titles start at
       the same X regardless of whether the row's marker is a wide
       REVIEW/REVISIONS/PAYMENT pill or just an emoji. */
    .proposal-timeline-phase-body .proposal-timeline-step { display: block !important; }
    .proposal-timeline-step-emoji { margin-right: 0.35rem; }

    /* Tech stack: one-line rows, collapsed by default. */
    .tech-stack-tool-list { display: flex; flex-direction: column; gap: 0.4rem; }
    .tech-stack-tool { background: #fff; border: 1px solid var(--line, #e2e2e2); border-radius: 10px; padding: 0; transition: border-color 0.15s, box-shadow 0.15s; }
    .tech-stack-tool[open] { border-color: rgba(46,92,138,0.35); box-shadow: 0 4px 14px rgba(15,23,42,0.05); }
    .tech-stack-tool-summary { list-style: none; cursor: pointer; padding: 0.7rem 1rem; display: grid; grid-template-columns: 24px auto 1fr auto auto; gap: 0.55rem; align-items: center; }
    .tech-stack-tool-summary::-webkit-details-marker { display: none; }
    .tech-stack-tool-emoji { font-size: 1.05rem; line-height: 1; }
    .tech-stack-tool-name { font-family: var(--font-title, inherit); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
    .tech-stack-tool-role { color: var(--slate); font-size: 0.82rem; }
    .tech-stack-tool-tier { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.18rem 0.45rem; border-radius: 999px; }
    .tech-stack-tool-tier--core { background: var(--river, #2e5c8a); color: #fff; }
    .tech-stack-tool-tier--secondary { background: var(--line, #e2e2e2); color: var(--slate); }
    .tech-stack-tool-toggle { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line, #e2e2e2); display: inline-flex; align-items: center; justify-content: center; color: var(--slate); flex-shrink: 0; margin-left: 0.4rem; transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .tech-stack-tool-summary:hover .tech-stack-tool-toggle { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    .tech-stack-tool-body { padding: 0.85rem 1rem 1rem; border-top: 1px dashed var(--line, #e2e2e2); color: var(--slate); font-size: 0.9rem; line-height: 1.6; }
    .tech-stack-tool-body p { margin: 0 0 0.4rem; }
    .tech-stack-tool-body p:last-child { margin-bottom: 0; }
    .tech-stack-tool-body strong { color: var(--ink); }

    /* Architecture intro is no longer split with the diagram - single column.
       Adds top margin so it visually separates from the navigation block
       above it (otherwise it reads as a continuation). */
    .proposal-architecture-intro { display: block !important; grid-template-columns: none !important; margin-top: 3rem !important; padding-top: 2rem !important; border-top: 1px solid var(--line, #e2e2e2) !important; }

    /* When all content types / nav items are universal, the runtime
       ensurePkgPillsOn() in proposal.js still injects pills onto each
       card after page load. Hide ANY pill/chip/lens element via CSS so
       the SSR-level suppression sticks regardless of how the runtime
       chooses to render (universal pill, per-pkg pills, A/B/C chips). */
    .proposal-sitemap-groups--cts-universal .proposal-sitemap-toggle [class*="lens-pkg-pill"],
    .proposal-sitemap-groups--cts-universal .proposal-sitemap-toggle [class*="sendable-svc-chip"],
    .proposal-sitemap-groups--cts-universal .proposal-sitemap-toggle [class*="pkg-pill"],
    body[data-proposal-mode="sendable"] .proposal-sitemap-groups--cts-universal .proposal-sitemap-toggle [class*="sitemap-pkg-pill"] { display: none !important; }
    .proposal-nav-section--all-universal [class*="lens-pkg-pill"],
    .proposal-nav-section--all-universal [class*="sendable-svc-chip"],
    body[data-proposal-mode="sendable"] .proposal-nav-section--all-universal [class*="pkg-pill"] { display: none !important; }

    /* Collapsible navigation items — 2-column grid override main.css */
    .proposal-nav-section .proposal-nav-tree { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; align-items: start; }
    @media (max-width: 720px) { .proposal-nav-section .proposal-nav-tree { grid-template-columns: 1fr !important; } }
    .proposal-nav-section .proposal-nav-item--collapsible { background: #fff; border: 1px solid var(--line, #e2e2e2); border-radius: 10px; padding: 0; transition: border-color 0.15s, box-shadow 0.15s; }
    .proposal-nav-item--collapsible[open] { border-color: rgba(46,92,138,0.35); box-shadow: 0 4px 14px rgba(15,23,42,0.05); }
    .proposal-nav-summary { list-style: none; cursor: pointer; padding: 0.75rem 1rem; display: flex; flex-wrap: nowrap; gap: 0.65rem; align-items: center; }
    .proposal-nav-summary .proposal-nav-label { flex: 1 1 auto; min-width: 0; }
    .proposal-nav-summary .proposal-nav-toggle { margin-left: auto; flex: 0 0 auto; }
    .proposal-nav-summary .proposal-nav-count,
    .proposal-nav-summary .proposal-nav-pkg-pill,
    .proposal-nav-summary [data-pkg-pill] { flex: 0 0 auto; }
    .proposal-nav-summary::-webkit-details-marker { display: none; }
    .proposal-nav-summary .proposal-nav-label { font-family: var(--font-title, inherit); font-weight: 700; font-size: 0.95rem; color: var(--ink); }
    .proposal-nav-summary .proposal-nav-count { color: var(--slate); font-size: 0.78rem; }
    .proposal-nav-count--none { opacity: 0.6; font-style: italic; }
    .proposal-nav-toggle { width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--line, #e2e2e2); display: inline-flex; align-items: center; justify-content: center; line-height: 1; color: var(--slate); transition: background 0.15s, color 0.15s, border-color 0.15s; }
    .proposal-nav-summary:hover .proposal-nav-toggle { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    .proposal-nav-body { padding: 0.85rem 1rem 1rem; border-top: 1px dashed var(--line, #e2e2e2); }
    .proposal-nav-body .proposal-nav-note { margin: 0 0 0.7rem; color: var(--slate); font-size: 0.85rem; line-height: 1.55; font-style: italic; }
    .proposal-nav-body .proposal-nav-children { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
    .proposal-nav-body .proposal-nav-children li { display: grid !important; grid-template-columns: 12px 1fr; column-gap: 0.5rem; align-items: baseline; padding: 0.25rem 0; }
    .proposal-nav-body .proposal-nav-children li::before { margin-top: 0.45em; }
    .proposal-nav-body .proposal-nav-child-label { font-size: 0.88rem; color: var(--ink); }
    .proposal-nav-body .proposal-nav-child-note { grid-column: 2; margin: 0.15rem 0 0; color: var(--slate); font-size: 0.78rem; line-height: 1.5; font-style: italic; }
    @media (max-width: 600px) {
      .proposal-nav-summary { gap: 0.5rem; padding: 0.7rem 0.85rem; }
      .proposal-nav-summary .proposal-nav-count { font-size: 0.72rem; }
    }
    .tech-stack-tool-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--river, #2e5c8a); text-decoration: none; }
    .tech-stack-tool-link:hover { text-decoration: underline; }
    @media (max-width: 600px) {
      .tech-stack-tool-summary { grid-template-columns: 24px 1fr auto; gap: 0.5rem; padding: 0.7rem 0.85rem; }
      .tech-stack-tool-role, .tech-stack-tool-tier { grid-column: 1 / 4; padding-left: 30px; font-size: 0.74rem; }
      .tech-stack-tool-tier { justify-self: start; }
      .tech-stack-tool-toggle { grid-row: 1; grid-column: 3; }
    }
    body[data-proposal-mode="sendable"] .sitemap-source-badge { display: none !important; }
    .proposal-sitemap-table th, .proposal-sitemap-table td { text-align: left; vertical-align: middle; }
    .proposal-sitemap-table th { font-weight: 700; }
    .sitemap-table-count-badge { font-variant-numeric: tabular-nums; }
    .tech-stack-mobile-note { display: none; }
    @media (max-width: 768px) {
      body[data-proposal-mode="sendable"] .tech-stack-diagram-wrap { display: none !important; }
      .tech-stack-mobile-note { display: block !important; }
    }
    .proposal-sitemap-group[data-collapsed="true"] .proposal-sitemap-body { display: none; }
    .proposal-sitemap-group:not([data-collapsed="true"]) .proposal-sitemap-chevron { transform: rotate(180deg); }
    .sendable-filter-bar.is-sticky { position: fixed; left: 0; right: 0; z-index: 9; background: rgba(253, 251, 247, 0.95); backdrop-filter: blur(12px); padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--line); display: flex; justify-content: center; gap: 0.5rem; }
    .sendable-option-row.is-dimmed { opacity: 0.25; }
    .sendable-static-card.is-flash { animation: sendable-flash 0.4s ease; }
    /* compare-request-* styles removed — the Request Package UI lives only
       in the planner now (public/css/main.css), not the client sendable. */
    @keyframes sendable-flash { 0% { opacity: 0.4; } 100% { opacity: 1; } }
    .sendable-static-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: #fff; }
    .sendable-static-card--combo { border-color: rgba(46,92,138,0.35); }
    .sendable-combo-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; margin: 0.85rem 0 0.25rem; background: linear-gradient(135deg, rgba(46,92,138,0.08), rgba(31,54,80,0.06)); border: 1px solid rgba(46,92,138,0.25); border-radius: 10px; }
    .sendable-combo-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--river, #2e5c8a); color: #fff; font-size: 0.85rem; font-weight: 700; }
    .sendable-combo-link-text { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.35; }
    .sendable-combo-link-text strong { font-size: 0.78rem; font-weight: 700; color: var(--river, #2e5c8a); letter-spacing: 0.02em; }
    .sendable-combo-link-text > span { font-size: 0.75rem; color: var(--slate); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; }
    .sendable-combo-link-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.55rem; font-size: 0.72rem; font-weight: 700; color: var(--river, #2e5c8a); background: #fff; border: 1px solid rgba(46,92,138,0.35); border-radius: 999px; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; white-space: nowrap; }
    .sendable-combo-link-chip:hover { background: var(--river, #2e5c8a); color: #fff; border-color: var(--river, #2e5c8a); }
    .sendable-combo-tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--river, #2e5c8a); background: rgba(46,92,138,0.1); border-radius: 999px; vertical-align: 2px; }
    .sendable-static-card .proposal-project-card-header { display: flex; gap: 1rem; align-items: flex-start; }
    .sendable-static-card .proposal-project-card-features { margin-top: 0.75rem; }
    body[data-proposal-mode="sendable"] :is(.compare-pkg-actions .btn-link[data-edit-toggle],
    .compare-pkg-actions .compare-remove,
    .compare-edit-controls,
    .compare-edit-add,
    .compare-header-actions) { display: none !important; }
    .sendable-help-cta { text-align: center; padding: 2rem 0; }
    .sendable-help-cta p { color: var(--slate); margin-bottom: 1rem; }
    .sendable-email { color: var(--slate); font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
    @media (max-width: 640px) {
      .sendable-email { display: none !important; }
    }


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Accessibility: minimum 16px (1rem) font size globally. Never use font-size below 1rem. */

.max-pkg-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--ink);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    font-size: 1rem;
    box-shadow: 0 8px 24px rgba(27, 35, 49, 0.25);
    z-index: 300;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    cursor: pointer;
}

.max-pkg-toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.max-pkg-toast a {
    color: var(--gold);
    text-decoration: underline;
}

:root {
    --ink: #1e3a5f;   /* headings + dark text: a clear dark navy blue (promoted from the homepage brand standard; was #141b2d, too dark to read as blue) */
    --slate: #353e58;
    --mist: #f3f4f6;
    --shell: #fdfbf7;
    --sage: #6a8f7a;
    --river: #2e5c8a;
    --gold: #d3a468;
    --line: rgba(27, 35, 49, 0.12);
    --shadow: 0 18px 50px rgba(27, 35, 49, 0.12);
    --radius: 22px;
    --radius-sm: 14px;
    --max-width: 1140px;
    --font-title: "Plus Jakarta Sans", sans-serif;
    --font-body: "Plus Jakarta Sans", sans-serif;
    --announcement-height: 0px;
    --header-height: 74px;
    --breadcrumb-height: 40px;
    --nav-height: 56px;
    --price-bar-height: 56px;
    --subhead-size: clamp(1rem, 1.1vw + 0.75rem, 1.25rem);
    --subhead-leading: 1.55;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-size: 112.5%;   /* 18px base (brand standard, promoted from homepage). rem + clamp() scale flows from here; respects the user's browser default for a11y */
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    line-height: 1.6;
    font-size: 1rem;      /* scales with the 18px html base (brand standard, promoted from homepage) */
    font-weight: 500;     /* base body weight - a touch bolder (brand standard) */
    overflow-x: hidden;
    background: radial-gradient(circle at 15% 10%, rgba(120, 150, 255, 0.06), transparent 50%),
        radial-gradient(circle at 85% 20%, rgba(118, 227, 214, 0.05), transparent 55%),
        linear-gradient(145deg, #ffffff 0%, #fafbfe 45%, #ffffff 100%);
    min-height: 100vh;
    padding-top: calc(var(--announcement-height) + var(--header-height) + var(--nav-height));
    /* sky-shift animation REMOVED: it animated background-position on the full-viewport body
       gradient = a per-frame main-thread repaint of the entire page, forever. Prime cause of
       the page-wide cursor flicker (cross-browser). The gradient is now static. */
}

body.has-breadcrumbs {
    padding-top: calc(var(--announcement-height) + var(--header-height) + var(--breadcrumb-height) + var(--nav-height));
}

/* When section-nav contains breadcrumb-tab, no standalone breadcrumb-bar renders.
   The breadcrumb-tab adds height inside the section-nav itself. */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(122, 160, 204, 0.2), transparent 40%),
        radial-gradient(circle at 85% 10%, rgba(211, 164, 104, 0.18), transparent 45%),
        radial-gradient(circle at 50% 70%, rgba(106, 143, 122, 0.16), transparent 55%);
    z-index: -1;
}

@keyframes sky-shift {
    0% {
        background-position: 0% 40%;
    }
    50% {
        background-position: 100% 60%;
    }
    100% {
        background-position: 0% 40%;
    }
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.site-header {
    position: relative;
    z-index: 10;
    background: rgba(253, 251, 247, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    min-height: var(--header-height);
    overflow: visible;
}

/* Smart header (brand standard, promoted from homepage): transparent at the top,
   solid on scroll-up, hidden on scroll-down. The /js/smart-header.js script
   toggles .hdr-solid / .hdr-hidden on <html>. Scoped to skip staticHeader pages
   (utility pages keep the solid frosted header above). */
body:not([data-static-header]) .site-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
    /* No glass. .site-header carries backdrop-filter: blur(16px) for the static/utility
       header, but on the smart header the background is TRANSPARENT here - so the blur had
       nothing to sit on and instead smeared a hard-edged rectangle across whatever drifted
       behind it (the clouds, visibly cut off at the header's bottom edge).
       It earns nothing in the solid state either: .hdr-solid uses an opaque --shell fill,
       so there is nothing showing through to blur. */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.fixed-top { transition: transform 0.35s ease; }
html.hdr-solid body:not([data-static-header]) .site-header {
    background: var(--shell, #fdfbf7) !important;
    box-shadow: 0 3px 16px rgba(18, 32, 66, 0.09) !important;
}
html.hdr-hidden .fixed-top { transform: translateY(-100%); }

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
    transition: transform 0.35s ease;
}

.fixed-top.is-hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.fixed-top.is-menu-expanded {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.announcement-bar {
    position: relative;
    z-index: 12;
    background: linear-gradient(120deg, #1c2f6b 0%, #2a3f8f 55%, #1b2448 100%);
    color: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.announcement-bar.is-dismissed {
    display: none;
}

.announcement-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-size: 1rem;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    padding: 0.65rem 3rem 0.65rem 1.5rem;
}

.announcement-close {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.announcement-close:hover,
.announcement-close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
    outline: none;
}

@media (max-width: 720px) {
    .announcement-inner {
        padding: 0.75rem 2.75rem 0.75rem 1rem;
        gap: 0.5rem;
        font-size: 0.92rem;
    }
    .announcement-close {
        right: 0.5rem;
    }
}

.announcement-pill {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 1rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.12);
}

.announcement-link {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-list {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.nav-link {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.nav-link--button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.nav-link--mobile-icon,
.nav-link--desc {
    display: none;
}

.nav-chevron {
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.nav-item.has-megamenu.is-open .nav-chevron,
.nav-item.has-megamenu:hover .nav-chevron {
    transform: rotate(180deg);
    opacity: 0.8;
}

.nav-item {
    position: relative;
}

.nav-item.has-megamenu {
    position: static;
}

/* Bridge the gap between nav button and megamenu so hover doesn't drop */
.nav-item.has-megamenu > .nav-link--button {
    position: relative;
}

.nav-item.has-megamenu > .nav-link--button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 20px;
    pointer-events: none;
}

.nav-item.has-megamenu:hover > .nav-link--button::after {
    pointer-events: auto;
}

.megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid var(--line);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 24px 60px rgba(27, 35, 49, 0.18);
    padding: 1.75rem 0 1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 50;
}

.megamenu-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

#industries-megamenu .megamenu-inner {
    grid-template-columns: repeat(4, 1fr);
    padding: 0 2rem;
}

.megamenu-group {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.megamenu-group-label {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    padding: 0 0.5rem 0.35rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.15rem;
}

.megamenu-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--ink);
    transition: background 0.15s ease, transform 0.15s ease;
}

.megamenu-card:hover,
.megamenu-card:focus-visible {
    background: var(--mist);
    transform: translateX(2px);
}

.megamenu-title {
    font-weight: 600;
    font-size: 1rem;
    display: block;
}

.megamenu-desc {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.82rem;
    line-height: 1.3;
    font-weight: 400;
    color: var(--slate);
}

.megamenu-card--featured {
    background: var(--mist);
    border: 1px solid var(--line);
    margin-bottom: 0.5rem;
    padding-bottom: 0.7rem;
    position: relative;
}

.megamenu-card--featured::after {
    content: '';
    position: absolute;
    left: 0.6rem;
    right: 0.6rem;
    bottom: -0.35rem;
    height: 1px;
    background: var(--line);
}

.megamenu-card--featured:hover,
.megamenu-card--featured:focus-visible {
    background: #eef3f8;
}

.megamenu-count {
    display: block;
    font-size: 1rem;
    color: var(--slate);
    opacity: 0.7;
    font-weight: 400;
}

.megamenu-text {
    font-size: 1rem;
    color: var(--slate);
    display: none;
}

.megamenu-badge {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15em 0.5em;
    border-radius: 4px;
    background: var(--river);
    color: #fff;
    margin-top: 0.2rem;
}

.megamenu-icon {
    width: 28px;
    height: 28px;
    color: var(--river);
}

.megamenu-emoji {
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.megamenu-footer {
    max-width: var(--max-width);
    margin: 0.75rem auto 0;
    padding: 0.75rem 2rem 0;
    text-align: center;
    border-top: 1px solid var(--line);
}

.megamenu-all-link {
    font-size: 1rem;
    font-weight: 600;
    color: var(--river);
    transition: color 0.2s ease;
}

.megamenu-all-link:hover {
    color: var(--ink);
}

.nav-item.has-megamenu:focus-within .megamenu,
.nav-item.has-megamenu.is-open .megamenu,
.nav-item.has-megamenu:hover .megamenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (min-width: 1081px) and (max-width: 1280px) {
    .megamenu-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1080px) {
    .megamenu {
        position: static;
        transform: none;
        min-width: 0;
        width: 100%;
        margin-left: 0;
        box-shadow: none;
        padding: 0.5rem 0 0;
        border: none;
        border-radius: 0;
        background: transparent;
        opacity: 1;
        visibility: visible;
    }

    .megamenu-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem 1.5rem;
        padding: 0;
    }

    .megamenu-group-label {
        padding-left: 0;
    }

    .megamenu-footer {
        padding: 0.5rem 0 0;
        grid-column: 1 / -1;
    }

    .nav-item.has-megamenu:hover .megamenu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (max-width: 600px) {
    .megamenu-inner {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.nav-link:hover,
.nav-link:focus-visible {
    background: rgba(46, 92, 138, 0.12);
    color: var(--river);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(46, 92, 138, 0.25);
    background: rgba(255, 255, 255, 0.85);
    color: var(--river);
    cursor: pointer;
}

.nav-toggle:focus-visible {
    outline: 2px solid rgba(46, 92, 138, 0.6);
    outline-offset: 3px;
}

.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.breadcrumb-bar {
    position: fixed;
    top: var(--fixed-top-height, calc(var(--announcement-height) + var(--header-height)));
    left: 0;
    right: 0;
    z-index: 9;
    background: rgba(253, 251, 247, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
}

.breadcrumb-inner {
    display: flex;
    align-items: center;
}

.breadcrumbs {
    list-style: none;
    display: flex;
    gap: 1rem;
    font-size: 1rem;
    color: var(--slate);
    align-items: center;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.breadcrumb-item::after {
    content: "/";
    color: rgba(27, 35, 49, 0.35);
}

.breadcrumb-item:last-child::after {
    content: "";
}

.breadcrumb-item a {
    color: var(--river);
    font-weight: 600;
}

.breadcrumb-item span[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
}

.section-nav {
    position: fixed;
    top: var(--fixed-top-height, calc(var(--announcement-height) + var(--header-height)));
    left: 0;
    right: 0;
    z-index: 11;
    background: rgba(253, 251, 247, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    display: block;
    margin-top: 0;
    transition: top 0.35s ease;
    overflow-x: hidden;
}

.fixed-top.is-hidden ~ .section-nav {
    top: 0;
}


.breadcrumb-tab {
    padding: 0.5rem 0 0;
    text-align: center;
}

.breadcrumb-tab .breadcrumbs {
    list-style: none;
    display: inline-flex;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--slate);
    align-items: center;
    padding: 0;
    margin: 0;
    justify-content: center;
}

main {
    padding-top: 0;
}

.price-bar {
    position: relative;
    z-index: 8;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(46, 92, 138, 0.1);
    backdrop-filter: blur(16px);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.price-bar.is-hidden {
    transform: translateY(-120%);
    opacity: 0;
    pointer-events: none;
}

.price-bar-inner {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    flex-wrap: wrap;
}

.price-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 1rem;
    color: var(--sage);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.price-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--river);
}

.price-link {
    font-weight: 600;
    color: var(--river);
}

.section-nav-inner {
    display: flex;
    gap: 0.5rem;
    padding: 1rem 0;
    align-items: center;
    justify-content: center;
}

.section-links {
    position: relative;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.35rem;
    border-radius: 999px;
    background: rgba(46, 92, 138, 0.08);
    border: 1px solid rgba(46, 92, 138, 0.12);
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
}

.section-links::-webkit-scrollbar {
    display: none;
}

.cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: var(--btn-radius);
    border: 1.5px solid rgba(46, 92, 138, 0.35);
    background: transparent;
    color: var(--river);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, background-image 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cta-link-icon {
    flex-shrink: 0;
    display: block;
}

.cta-link:hover {
    background-color: #2c5493;
    background-image: linear-gradient(180deg, #33599a 0%, #26497c 100%); /* top-lit navy, matches the Book CTA pill */
    border-color: transparent;
    color: #fff;
    transform: translateY(-1px); /* same rise as .cta-button:hover */
}

.cta-button {
    padding: 0.45rem 1rem;
    border-radius: var(--btn-radius);
    background: var(--river);
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
}

.section-nav-inner::-webkit-scrollbar {
    display: none;
}

.section-link {
    flex: 0 0 auto;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 1rem;
    font-weight: 600;
    color: var(--river);
    background: transparent;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
}

.section-link:hover {
    background: rgba(46, 92, 138, 0.1);
}

.section-link.is-active {
    color: #fff;
}

.section-pill {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    height: calc(100% - 0.7rem);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(130deg, var(--river), #223c6f);
    box-shadow: 0 12px 30px rgba(34, 60, 111, 0.35);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.35s ease;
    z-index: 0;
}

.section-scroll-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(46, 92, 138, 0.15);
    background: #fff;
    color: var(--river);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.section-scroll-arrow[hidden] {
    display: none;
}

.section-scroll-arrow:hover {
    background: rgba(46, 92, 138, 0.08);
    box-shadow: 0 2px 8px rgba(46, 92, 138, 0.15);
}

.section-select {
    display: none;
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--river);
    background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232e5c8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    border: 1px solid rgba(46, 92, 138, 0.2);
    border-radius: var(--radius-sm);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.section-select:focus {
    outline: 2px solid var(--river);
    outline-offset: 1px;
}

.header-inner {
    padding: 1.2rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-height);
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-ctas {
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.logo {
    height: 42px;
    width: auto;
    filter: drop-shadow(0 6px 14px rgba(27, 35, 49, 0.18));
}

.hero {
    padding: calc(6rem + var(--price-bar-height)) 0 5rem;
    display: flex;
    align-items: center;
    position: relative;
}

/* ── Atmospheric Cloud System ────────────────────────────────────
   Two fixed cloud layers span the full page.
   Back layer (z:0) behind most content, front layer (z:4) in front
   of some sections. Sections opt in/out via z-index classes.
   ─────────────────────────────────────────────────────────────── */

.atmosphere-back,
.atmosphere-front {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

/* Clouds are fully opaque — the "cloud" effect comes from fill colors
   being close to (but distinguishable from) the sky background. No
   transparency means no overlap artifacts at all. */
.atmosphere-back { z-index: 0; }
.atmosphere-front { z-index: 4; }

.sky-elements {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
    color: var(--sky-text, #1b2331);
    opacity: 0.5;
}

.sky-element {
    position: absolute;
    will-change: transform;
}

.sky-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sky-layer--celestial,
.sky-layer--stars {
    opacity: 0.9;
}

.sky-layer--transient {
    opacity: 0.7;
}

.sky-celestial {
    position: absolute;
    width: min(40vw, 40vh);
    height: min(40vw, 40vh);
    min-width: 240px;
    min-height: 240px;
    max-width: 440px;
    max-height: 440px;
    overflow: visible;
    filter: drop-shadow(0 0 22px rgba(168, 220, 255, 0.22));
}

.sky-celestial--sun {
    color: #fff3c7;
    filter: drop-shadow(0 0 28px rgba(255, 232, 163, 0.18));
    opacity: 1;
}

.sky-celestial--moon {
    color: #f6f9ff;
    filter: drop-shadow(0 0 24px rgba(189, 220, 255, 0.16));
    opacity: 1;
}

.sky-star {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: rgba(245, 250, 255, 0.92);
    box-shadow: 0 0 10px rgba(206, 232, 255, 0.28);
    transform-origin: center;
}

.sky-star.is-cross::before,
.sky-star.is-cross::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 150%;
    background: rgba(245, 250, 255, 0.85);
    transform: translate(-50%, -50%);
    border-radius: 999px;
}

.sky-star.is-cross::after {
    width: 150%;
    height: 1px;
}

.sky-element--flock,
.sky-element--plane,
.sky-element--contrail {
    color: rgba(230, 244, 255, 0.85);
    overflow: visible;
}

.sky-element--contrail {
    color: rgba(240, 248, 255, 0.7);
}

.atmo-cloud {
    /* will-change removed: 10 clouds each forcing a persistent GPU layer (plus backdrop-filter
       layers) can exceed Chrome's layer budget and make the clouds stop painting. GSAP promotes
       the layer during its transform tween anyway, so drift stays smooth. */
    transition: fill 2s ease;
}

/* Gradient mask for soft top/bottom fade on layers */
.atmosphere-back {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

.atmosphere-front {
    -webkit-mask-image: linear-gradient(to bottom, transparent 5%, black 20%, black 80%, transparent 95%);
    mask-image: linear-gradient(to bottom, transparent 5%, black 20%, black 80%, transparent 95%);
}

/* Hero curtain - homepage-only opening effect */
.hero-curtain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
}

.curtain-cloud {
    position: absolute;
    bottom: -6%;
    width: 60%;
    height: 15vw;
    will-change: transform;
    transition: fill 2s ease;
}

.curtain-cloud--left { left: -2%; }
.curtain-cloud--right { right: -2%; }

/* Section depth control */
.section {
    padding: 5rem 0;
    position: relative;
    z-index: 1;
}

.section--above-clouds {
    z-index: 5;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .atmo-cloud,
    .sky-element {
        animation: none !important;
        transition: none !important;
    }
    .hero-curtain { display: none; }
}

/* Mobile - hide sky elements */
@media (max-width: 768px) {
    .sky-elements { display: none; }
}

.hero-ornaments {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.grid-pattern {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: min(700px, 90vw);
    opacity: 0.6;
}

.dot-pattern {
    position: absolute;
    bottom: 30px;
    right: 12%;
    width: min(280px, 60vw);
    opacity: 0.8;
}

.cloud-morphs {
    position: fixed;
    top: calc(var(--header-height) + var(--nav-height) + var(--price-bar-height) + 40px);
    right: 6%;
    width: min(360px, 60vw);
    fill: rgba(255, 255, 255, 0.7);
    opacity: 0.8;
    z-index: 1;
}

.cloud-shape {
    fill: rgba(255, 255, 255, 0.78);
}

.benefits {
    padding-top: 2rem;
}

.includes {
    padding-top: 2rem;
}

.testimonials a {
    color: var(--river);
    font-weight: 600;
}

.cost-range {
    font-size: 2rem;
    font-weight: 700;
    color: var(--river);
    margin-bottom: 1rem;
}

.costs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-intro {
    max-width: 760px;
    margin: 0 auto 2rem;
    text-align: center;
    color: var(--slate);
    font-size: 1rem;
}

.cost-options {
    grid-column: span 2;
}

.addon-form {
    display: grid;
    gap: 1rem;
}

.addon-section {
    margin-top: 2rem;
    display: grid;
    gap: 1rem;
}

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

.competitiveness-panel {
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(46, 92, 138, 0.35);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(46, 92, 138, 0.08);
}

.cost-title {
    font-size: 1.6rem;
}

.cost-subtitle {
    font-size: 1.25rem;
}

.pill {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(46, 92, 138, 0.12);
    color: var(--river);
    font-weight: 600;
}

.pill.required {
    background: rgba(106, 143, 122, 0.16);
    color: var(--sage);
}

.addon-help {
    color: var(--slate);
    font-size: 1rem;
}

.addon-group {
    display: grid;
    gap: 0.6rem;
}

.addon-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sage);
    font-weight: 600;
}

.addon-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(46, 92, 138, 0.12);
    background: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.addon-item:hover {
    transform: translateY(-2px);
    border-color: rgba(46, 92, 138, 0.3);
    box-shadow: 0 12px 24px rgba(27, 35, 49, 0.08);
}

.maintenance-list {
    list-style: none;
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0.5rem;
    color: var(--slate);
    font-size: 1rem;
}

.maintenance-list li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.select-row {
    grid-template-columns: 1fr auto;
}

.addon-slider {
    border: 1px solid rgba(46, 92, 138, 0.12);
    border-radius: 12px;
    padding: 1rem 1rem;
    background: rgba(255, 255, 255, 0.85);
    display: grid;
    gap: 0.6rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.addon-slider:hover {
    transform: translateY(-2px);
    border-color: rgba(46, 92, 138, 0.3);
    box-shadow: 0 12px 24px rgba(27, 35, 49, 0.08);
}

.addon-slider-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-weight: 600;
}

.addon-slider-header .addon-price {
    margin-left: auto;
}

.toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--slate);
}

.toggle input {
    accent-color: var(--sage);
    width: 16px;
    height: 16px;
}

.addon-slider input[type="range"] {
    width: 100%;
}

.addon-slider-meta {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--slate);
}

.addon-tiers {
    display: grid;
    gap: 0.6rem;
}

.tier-options {
    display: grid;
    gap: 0.6rem;
}

.tier-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(46, 92, 138, 0.12);
    background: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tier-option:hover {
    transform: translateY(-2px);
    border-color: rgba(46, 92, 138, 0.3);
    box-shadow: 0 12px 24px rgba(27, 35, 49, 0.08);
}

.tier-desc {
    display: block;
    color: var(--slate);
    font-weight: 400;
    grid-column: 2 / -1;
    font-size: 1rem;
}

.tier-option input {
    accent-color: var(--sage);
}

.tier-descriptions {
    color: var(--slate);
    font-size: 1rem;
}

.addon-item select {
    border: 1px solid rgba(46, 92, 138, 0.2);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    font-family: var(--font-body);
    background: #fff;
}

.cost-summary {
    position: sticky;
    top: calc(var(--header-height) + var(--nav-height) + var(--price-bar-height) + 20px);
    align-self: start;
    display: grid;
    gap: 1.4rem;
    text-align: left;
}

.summary-header {
    padding: 0.25rem 0.25rem 0.5rem;
}

.summary-header h3 {
    font-family: var(--font-title);
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
}

.summary-header p {
    color: var(--slate);
    font-size: 1rem;
}

.summary-block {
    padding: 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(46, 92, 138, 0.12);
}

.summary-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 1rem;
    color: var(--sage);
    font-weight: 600;
}

.summary-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--river);
    margin: 0.6rem 0 0.3rem;
}

.summary-note {
    color: var(--slate);
    font-size: 1rem;
}

.summary-competitiveness {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.summary-competitiveness .summary-note {
    width: 100%;
    margin: 0;
}

.summary-competitiveness select {
    border: 1px solid rgba(46, 92, 138, 0.2);
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    font-size: 1rem;
    font-family: var(--font-body);
    background: #fff;
}

.addon-item input {
    accent-color: var(--sage);
    width: 16px;
    height: 16px;
}

.addon-price {
    font-weight: 600;
    color: var(--river);
}

.total-card {
    position: sticky;
    top: 148px;
    align-self: start;
    text-align: center;
}

.total-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--river);
    margin: 1rem 0 0.5rem;
}

.total-note {
    color: var(--slate);
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
    gap: 2.5rem;
    align-items: center;
}

.hero-copy {
    max-width: 680px;
}

/* Default hero H1 size. Smaller than the global h1 by design - hero copy
   should be confident, not shouty. Opt into bigger sizes with .hero--display
   on marquee/marketing pages that warrant it. */
.hero h1 {
    font-size: clamp(2.2rem, 3.6vw, 3.6rem);
    line-height: 1.1;
    margin-bottom: 1.1rem;
}
.hero .lead {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* --display: opt-in larger H1 for marquee/marketing heros (homepage,
   high-impact landing pages). Apply on the section element alongside .hero. */
.hero.hero--display h1 {
    /* Floor was 3.2rem - IDENTICAL to .section-heading h2's floor - so from 390px to
       ~1230px the page headline and every section heading rendered at the exact same
       57.6px and the hierarchy vanished. 57.6px was also far too big for a 390px phone.
       Floor now sits below the section floor's ceiling so the H1 outranks headings at
       EVERY width. Verify with both clamps together; they are a pair. */
    font-size: clamp(2.6rem, 5.2vw, 5.6rem);
    line-height: 1.0;
    margin-bottom: 1.5rem;
}

/* Info tip - reusable hover/focus affordance for inline caveats and footnotes.
   Markup: <button class="info-tip" type="button"><span class="info-tip-glyph" aria-hidden="true">?</span><span class="info-tip-content">Tooltip text</span><span class="visually-hidden">More info</span></button>
   Hover or keyboard/tap focus reveals the content. */
.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(46, 92, 138, 0.14);
    color: var(--river);
    border: 0;
    padding: 0;
    margin-left: 0.35rem;
    font: 700 0.72rem/1 var(--font-title);
    cursor: help;
    transition: background 0.18s ease, transform 0.18s ease;
    vertical-align: middle;
}
.info-tip:hover,
.info-tip:focus-visible {
    background: rgba(46, 92, 138, 0.28);
    transform: scale(1.08);
    outline: none;
}
.info-tip-glyph { pointer-events: none; }
.info-tip-content {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 280px;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    background: var(--ink);
    color: #fff;
    font: 500 0.85rem/1.5 var(--font-body);
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 14px 30px rgba(10, 20, 40, 0.28);
    z-index: 30;
}
.info-tip-content::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ink);
}
.info-tip:hover .info-tip-content,
.info-tip:focus-visible .info-tip-content,
.info-tip:focus .info-tip-content {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
/* When the tip is near the right edge, flip the bubble to the left */
.info-tip[data-tip-align="end"] .info-tip-content {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(4px);
}
.info-tip[data-tip-align="end"] .info-tip-content::before {
    left: auto;
    right: 6px;
    transform: none;
}
.info-tip[data-tip-align="end"]:hover .info-tip-content,
.info-tip[data-tip-align="end"]:focus-visible .info-tip-content,
.info-tip[data-tip-align="end"]:focus .info-tip-content {
    transform: translateX(0) translateY(0);
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Hero modifiers (composable). Apply on the section element alongside .hero. */

/* --wide: collapse the 2-col grid for hero sections that have no right-column
   diagram or image. Copy spans the full container width and the section gets
   extra top padding so the headline does not crowd the price bar. */
.hero.hero--wide .hero-inner { grid-template-columns: 1fr; }
.hero.hero--wide .hero-copy { max-width: 880px; }
.hero.hero--wide { padding-top: calc(9rem + var(--price-bar-height)); padding-bottom: 4rem; }
@media (max-width: 720px) {
    .hero.hero--wide { padding-top: calc(7rem + var(--price-bar-height)); }
}

/* --compact: smaller H1 size for guide-style heros where the headline is
   long, informational, or does not warrant the marketing display size. */
.hero.hero--compact h1 {
    font-size: clamp(2rem, 3.2vw, 3.2rem);
    line-height: 1.15;
    margin-bottom: 1.1rem;
}
.hero.hero--compact .lead {
    font-size: 1.1rem;
    line-height: 1.6;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 1rem;
    color: var(--ink);
    margin-bottom: 1.5rem;
    font-weight: 700;
    padding: 0.35rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(46, 92, 138, 0.18);
    background: rgba(255, 255, 255, 0.8);
    cursor: default;
    transition: color 0.25s ease;
}

.eyebrow-icon,
.section-tag-icon {
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    font-style: normal;
    letter-spacing: 0;
}

.audience-tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.6);
    color: var(--slate);
}

.audience-tag--peers {
    border-color: rgba(46, 92, 138, 0.35);
    background: rgba(46, 92, 138, 0.08);
    color: var(--river);
}

.audience-tag--prospects {
    border-color: rgba(106, 143, 122, 0.4);
    background: rgba(106, 143, 122, 0.1);
    color: var(--sage);
}

.audience-tag--clients {
    border-color: rgba(212, 168, 83, 0.45);
    background: rgba(212, 168, 83, 0.12);
    color: #8a6a2a;
}

.audience-tag--general {
    border-color: var(--line);
    background: rgba(255, 255, 255, 0.6);
    color: var(--slate);
}

/* Blog post meta row (date + audience tag) */
.post-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.post-meta-date {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--slate);
}

/* Tech-level meter (blog post hero) */
.tech-meter {
    margin-top: 1.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.6);
    max-width: 520px;
}
.tech-meter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.tech-meter-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--slate);
}
.tech-meter-bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 4px;
    height: 18px;
}
.tech-meter-bar {
    display: inline-block;
    width: 8px;
    border-radius: 2px;
    background: var(--line);
    transition: background 0.2s ease;
}
.tech-meter-bar[data-level="1"] { height: 30%; }
.tech-meter-bar[data-level="2"] { height: 50%; }
.tech-meter-bar[data-level="3"] { height: 70%; }
.tech-meter-bar[data-level="4"] { height: 85%; }
.tech-meter-bar[data-level="5"] { height: 100%; }
.tech-meter-bar.is-filled { background: var(--sage); }
.tech-meter-bar.is-current { background: var(--ink); }
.tech-meter-name {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
}
.tech-meter-name--1 { color: #2e7d4f; }
.tech-meter-name--2 { color: var(--sage); }
.tech-meter-name--3 { color: var(--river); }
.tech-meter-name--4 { color: #8a6a2a; }
.tech-meter-name--5 { color: #7a2e7a; }
.tech-meter-blurb {
    margin: 0.5rem 0 0;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--slate);
    font-style: italic;
}

/* Share row (below blog post body) */
.share-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.share-row-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate);
    margin-right: 0.25rem;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.share-btn svg { flex-shrink: 0; }
.share-btn:hover {
    transform: translateY(-1px);
    border-color: var(--ink);
}
.share-btn--twitter:hover { background: #000; color: #fff; border-color: #000; }
.share-btn--linkedin:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.share-btn--facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.share-btn--email:hover { background: var(--sage); color: #fff; border-color: var(--sage); }
.share-btn--copy.is-copied {
    background: var(--sage);
    color: #fff;
    border-color: var(--sage);
}

/* Author bio (about the author footer) */
.author-bio {
    padding: 3rem 0;
}
.author-bio-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.author-bio-avatar {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sage), var(--river));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.author-bio-copy { flex: 1; min-width: 0; }
.author-bio-copy h2 {
    margin: 0.3rem 0 0.6rem;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}
.author-bio-copy p {
    margin: 0 0 1rem;
    color: var(--slate);
}
.author-bio-links {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .author-bio-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.eyebrow .eyebrow-text,
.section-tag .section-tag-text {
    font-family: var(--font-body);
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
    color: inherit;
    text-transform: uppercase;
    letter-spacing: inherit;
    margin: 0;
}


h1, h2, h3, h4 {
    font-family: var(--font-title);
    text-wrap: balance;
}

/* Global widow prevention for body copy. `text-wrap: pretty` tells the browser
   to avoid short last lines (widows) and improves overall line breaking. */
p, li, blockquote, figcaption, dd {
    text-wrap: pretty;
}

h1 {
    font-size: clamp(3.8rem, 5.8vw, 6.2rem);
    line-height: 1.0;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

h2 {
    line-height: 1.1;
}

.gradient-text {
    /* Brand brighter-blue gradient (promoted from the homepage's --ps-word-grad).
       Homepage still overrides --ps-word-grad inline with its animated light angle;
       the fallback here gives every other page the same brighter blue. */
    background-image: var(--ps-word-grad, linear-gradient(180deg, #62a8f5 0%, #3f82e8 50%, #2b5fc7 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-hook {
    font-family: var(--font-title);
    text-wrap: balance;
    font-size: clamp(3.8rem, 5.8vw, 6.2rem);
    line-height: 1.0;
    margin-bottom: 1.5rem;
    font-weight: 800;
    color: var(--ink);
}

.hero-cycle-word {
    display: block;
    line-height: 1.15;
    padding-bottom: 0.08em;
    white-space: nowrap;   /* never wrap the cycling word; the fit-to-width JS scales it down instead */
}

.lead {
    font-size: var(--subhead-size);
    line-height: var(--subhead-leading);
    color: var(--slate);
    max-width: 720px;
    margin-bottom: 2rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

.hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    margin-bottom: 2.5rem;
    font-size: 0.85rem;
    color: var(--slate);
}
.hero-trust-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--gold);
}
.hero-trust-star { display: block; }
.hero-trust-text strong { color: var(--ink); font-weight: 700; }
.hero-trust-dot { color: var(--line); }

@media (max-width: 720px) {
    .hero-actions { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
    .section-cta { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .section-cta .btn { width: 100%; text-align: center; justify-content: center; }
    .cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .cta-actions .btn { width: 100%; text-align: center; justify-content: center; }
}

.hero-ecosystem {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-ecosystem-image,
.hero-ecosystem-diagram {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-width: 620px;
    filter: saturate(1.04);
}

.hero-ecosystem-diagram {
    overflow: visible;
}

.hero-ecosystem-cloud,
.hero-ecosystem-node {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
}

.hero-ecosystem-line {
    will-change: stroke-dashoffset;
}

/* ── Hero radial diagram (R3) ── */
.radial-hub-body { fill: #ffffff; stroke: #c9d3e0; stroke-width: 2; }
.radial-hub-chrome { fill: #f3f6fb; }
.radial-url-pill { fill: #e7edf5; }
.radial-dot-r { fill: #ff7a7a; }
.radial-dot-y { fill: #ffc94d; }
.radial-dot-g { fill: #5cd19b; }
.radial-wire { fill: #dbe3ee; }
.radial-wire--accent { fill: #b8c6d8; }
.radial-wire-img { fill: #eaeff6; stroke: #c9d3e0; stroke-width: 1.2; }
.radial-wire-img-shape { fill: #c9d3e0; }
.radial-hub-group { animation: radialHubBreathe 5.5s ease-in-out infinite; transform-origin: 460px 460px; }

@keyframes radialHubBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

@keyframes radialRingPulse {
    0%, 100% { stroke-opacity: 0.3; stroke-width: 2.5; }
    50%      { stroke-opacity: 0.55; stroke-width: 3.2; }
}

.radial-tile {
    filter: drop-shadow(0 4px 12px rgba(10, 25, 50, 0.12));
}
.radial-tile--light { stroke: #dde3ec; stroke-width: 1.5; }

/* Reactions are animated by GSAP in index.astro script. CSS only controls
   initial state and transform-origin so GSAP transforms apply from center. */
.radial-reaction {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    pointer-events: none;
    opacity: 0;
}
.radial-dot-r { fill: #ff7a7a; }
.radial-dot-y { fill: #ffc94d; }
.radial-dot-g { fill: #5cd19b; }
.radial-url-pill { fill: #e7edf5; }
.radial-url-text { font: 600 14px var(--font-body); fill: var(--river); }
.radial-ps-mark { font: 700 22px var(--font-title); fill: var(--river); text-anchor: middle; }
.radial-ps-url { font: 600 12px var(--font-body); fill: var(--slate); text-anchor: middle; }
.radial-spoke-line { fill: none; stroke: #2E5C8A; stroke-width: 3; stroke-linecap: round; opacity: 0.45; }
.radial-ring-line { fill: none; stroke: #2E5C8A; stroke-width: 2.5; stroke-linecap: round; opacity: 0.35; }
.radial-mono { fill: #2E5C8A; }
.radial-spark-main { filter: url(#heroRadGlow); opacity: 0; }
.radial-spark-trail { opacity: 0.6; }
.radial-spark-trail-2 { opacity: 0.35; }
.radial-spark-trail-3 { opacity: 0.18; }

@media (prefers-reduced-motion: reduce) {
    .radial-spark-main,
    .radial-spark-trail,
    .radial-spark-trail-2,
    .radial-spark-trail-3 { display: none; }
}

/* Global button radius - single source of truth. All buttons site-wide
   use pill shape for consistency with the header CTA. */
:root { --btn-radius: 999px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.3rem 2.5rem;
    border-radius: var(--btn-radius);
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    /* No text-transform: capitalize. It capitalises EVERY word, which title case does
       not do - it forced "Book A Strategy Call" when the label is written, correctly,
       as "Book a Strategy Call". Articles and short prepositions stay lowercase, and
       CSS cannot know which words those are. Labels are authored as they should read. */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Buttons read oversized because of PADDING, not type: 1.3rem/2.5rem computes to
   23.4px/34.2px at this site's 18px root. Trimming the padding is the right lever -
   the 1.15rem label (20.7px) must stay put, because at 20.7px + bold it clears WCAG's
   large-text threshold (>=18.66px bold), which is what lets the hover blue run at 3:1.
   Shrink the LABEL under 18.66px and it becomes normal text needing 4.5:1, and that
   blue starts failing. See feedback_hover_state_contrast. */
.btn {
    padding: 1rem 2rem;   /* 18px / 36px */
}

/* ─── Primary button hover: brand blue washes in (site-wide) ───────────────────
   Promoted here from the homepage's inline style, where it only ever applied to one
   page. The label goes 700 for a load-bearing reason: at 20.7px + bold it clears WCAG
   large text (>=18.66px AND bold), dropping the contrast bar 4.5:1 -> 3:1, which is
   what allows any real amount of blue. At weight 600 this whole effect has to stay
   under ~0.38 to stay legal.

   --btn-blue-max caps the overlay per button and is FAIL-SAFE: the default is the
   strict normal-text value, so a new button can only ever be too conservative. Buttons
   whose labels clear large text opt into more.

   Measured, white label on the blended top stop (holds for BOTH base fills - the
   homepage true-blue #33599a and the river #2e5c8a elsewhere, within 0.01):
       0.00 -> 6.92:1   0.55 -> 3.81:1  <- shipped   0.75 -> 3.13:1   1.00 -> 2.49:1 FAIL
   Do NOT raise 0.55 without re-running the maths, and do not drop the weight to 600. */
.btn.primary,
.cta-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    font-weight: 700;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    /* 0.35, not 0.38. 0.38 is the mathematical ceiling for 4.5:1 and lands at 4.54:1 -
       a 1% margin, which any future tweak to the base fill would silently break.
       0.35 gives 4.69:1 and costs nothing anyone can see. */
    --btn-blue-max: 0.35;
}

/* 20.7px + 700 = WCAG large text -> 3:1 bar -> deeper blue allowed. */
.btn.primary { --btn-blue-max: 0.55; }

/* Measured EXCEPTIONS - these labels are UNDER 18.66px, so bold does not make them
   large text and they stay on the 4.5:1 bar. Do not fold them in above.
       .cta-button (header) = 18px      .newsletter-submit = 17.64px */
.btn.primary.newsletter-submit { --btn-blue-max: 0.35; }

/* Brand blue, NOT white: a white wash lifts value by draining saturation and reads as a
   chalky, faded blue. Fading an overlay also avoids swapping background-image, which
   cannot interpolate and would snap instead of ease. */
.btn.primary::after,
.cta-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--ps-word-grad, linear-gradient(180deg, #62a8f5 0%, #3f82e8 50%, #2b5fc7 100%));
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: -1;   /* isolate: above the button's own fill, below its label */
}

@media (hover: hover) {
    /* Lift + lit rim + glow. Never a cast shadow - these sit on open sky, and nothing
       casts a shadow onto the air behind it. !important on transform: main.css's own
       `.callout .btn.primary:hover` is (0,4,0) - a pseudo-class counts in the CLASS
       column - and would otherwise win with translateY(-2px) and no scale. */
    .btn.primary:hover,
    .cta-button:hover {
        transform: translateY(-3px) scale(1.02) !important;
        box-shadow:
            0 0 0 1px rgba(160, 205, 255, 0.32) inset,
            0 0 10px rgba(63, 130, 232, 0.22),
            0 0 24px rgba(98, 168, 245, 0.12) !important;
    }
    .btn.primary:hover::after,
    .cta-button:hover::after { opacity: var(--btn-blue-max); }
}

.btn.primary {
    background: linear-gradient(130deg, var(--river), #223c6f);
    color: #fff;
    box-shadow: 0 12px 30px rgba(34, 60, 111, 0.3);
}

.btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(34, 60, 111, 0.35);
}

.btn.primary:focus-visible,
.cta-button:focus-visible,
.section-link:focus-visible,
.addon-item input:focus-visible,
.tier-option input:focus-visible,
.toggle input:focus-visible,
.next-cta-link:focus-visible {
    outline: 2px solid rgba(46, 92, 138, 0.6);
    outline-offset: 3px;
}

.btn.ghost {
    border-color: rgba(46, 92, 138, 0.4);
    color: var(--river);
    background: rgba(255, 255, 255, 0.6);
}

.btn.ghost:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(46, 92, 138, 0.15);
}

.hero-metrics {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.metric {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(46, 92, 138, 0.12);
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    min-width: 140px;
}

.metric-value {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--river);
}

.metric-label {
    color: var(--slate);
    font-size: 1rem;
}

.hero-visual {
    display: grid;
    gap: 1.5rem;
}

.visual-card {
    position: relative;
    border-radius: calc(var(--radius) + 8px);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(46, 92, 138, 0.25), rgba(118, 227, 214, 0.2));
    border: 1px solid rgba(46, 92, 138, 0.2);
    box-shadow: 0 24px 60px rgba(21, 37, 72, 0.25);
}

.visual-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    filter: saturate(0.9);
}

.visual-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--river);
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
}

.card--dark {
    background: linear-gradient(160deg, #141b35 0%, #101424 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(10, 14, 28, 0.45);
}

.card--dark p,
.card--dark li,
.card--dark .metric-label {
    color: rgba(255, 255, 255, 0.75);
}

.band {
    background: transparent;
}

.band--light {
    background: rgba(255, 255, 255, 0.65);
}

.band--muted {
    background: rgba(243, 244, 246, 0.8);
}

.band--dark {
    background: rgba(27, 35, 49, 0.92);
    color: #fff;
}

.band--dark {
    background: rgba(15, 23, 42, 0.08);
}

.hero-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius);
    padding: 2.2rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(27, 35, 49, 0.08);
}

.hero-card h2 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.hero-card ul {
    list-style: none;
    display: grid;
    gap: 1rem;
}

.hero-card li::before {
    content: "•";
    color: var(--gold);
    font-weight: 700;
    margin-right: 0.5rem;
}

section {
    padding: 4.5rem 0;
    scroll-margin-top: calc(var(--total-fixed-height, var(--announcement-height) + var(--header-height) + var(--nav-height)) + var(--price-bar-height) + 20px);
}

body.has-breadcrumbs section {
    scroll-margin-top: calc(var(--total-fixed-height, var(--announcement-height) + var(--header-height) + var(--breadcrumb-height) + var(--nav-height)) + var(--price-bar-height) + 20px);
}

.section-heading {
    text-align: center;
    margin-bottom: 2.8rem;
}

/* When the heading carries the h-tag, DOM order is heading-first for SEO/a11y;
   CSS order restores visual eyebrow-on-top layout. */
.section-heading.is-flipped {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-heading.is-flipped .section-tag { order: 1; }
.section-heading.is-flipped h1,
.section-heading.is-flipped h2,
.section-heading.is-flipped .section-hook { order: 2; }
.section-heading.is-flipped .section-subhead { order: 3; }

.section-heading--left {
    text-align: left;
}

.section-heading--left.is-flipped {
    align-items: flex-start;
}

.section-heading .section-subhead,
.section-subhead {
    color: var(--slate);
    max-width: 620px;
    margin: 2rem auto 0;
    font-size: var(--subhead-size);
    line-height: var(--subhead-leading);
}

.section-heading--left .section-subhead {
    margin: 0;
}

.why-discovery-heading {
    margin-top: 3rem;
}

.section-heading h2 {
    /* Floor lowered 3.2rem -> 2rem. At 3.2rem this tied .hero--display h1's floor, so
       section headings matched the page H1 from 390px to ~1230px. See the note on
       .hero.hero--display h1 - these two clamps are a matched pair. */
    font-size: clamp(2rem, 4.8vw, 4.4rem);
    margin-bottom: 0.8rem;
    font-weight: 800;
}

/* When the eyebrow pill IS the h2 (semantic heading), keep the pill styling
   and let .section-hook carry the large display type below it. */
.section-heading h2.section-tag {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-hook {
    font-family: var(--font-title);
    /* Matches .section-heading h2 - same role, same scale. */
    font-size: clamp(2rem, 4.8vw, 4.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 auto 0.8rem;
    max-width: none;
}

.section-heading p {
    color: var(--slate);
    max-width: 620px;
    margin: 0 auto;
}

.section-subcopy {
    margin-top: 0.6rem;
    font-weight: 600;
    color: var(--river);
}

.section-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.35rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(46, 92, 138, 0.18);
    font-family: var(--font-body);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}


.section-tag--light {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.section-cta {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.section-cta-lead {
    margin-top: 3rem;
    margin-bottom: 0;
    text-align: center;
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}

.section-cta-lead + .section-cta { margin-top: 1.25rem; }

.section-cta-tertiary {
    margin-top: 1rem;
    margin-bottom: 0;
    text-align: center;
    font-size: 0.95rem;
    color: var(--slate);
}

.section-card {
    border-radius: calc(var(--radius) + 6px);
    padding: clamp(2rem, 4vw, 3rem);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(46, 92, 138, 0.12);
    box-shadow: 0 24px 60px rgba(27, 35, 49, 0.12);
}

.section-card--dark {
    background: linear-gradient(135deg, #121a33 0%, #1b2344 55%, #0f1426 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
}

.section-card--dark .section-heading h2,
.section-card--dark .section-heading p {
    color: rgba(255, 255, 255, 0.85);
}

.section-card--dark .section-heading h2 {
    color: #fff;
}

.text-link {
    font-weight: 600;
    color: var(--river);
}

.text-link:hover {
    color: var(--ink);
}

.text-link--light {
    color: rgba(255, 255, 255, 0.85);
}

.text-link--light:hover {
    color: #fff;
}

.about-card {
    max-width: 760px;
    margin: 0 auto;
    padding: 3.25rem 3rem;
    background: linear-gradient(180deg, #fffdf7 0%, #fff 100%);
    border: 1px solid rgba(46, 92, 138, 0.15);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: 0 30px 70px rgba(27, 35, 49, 0.08);
}

.about-card > .section-tag {
    display: inline-block;
    margin-bottom: 1.25rem;
}

.about-card h2 {
    font-family: var(--font-title);
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    line-height: 1.08;
    margin: 0 0 1.5rem;
    color: var(--ink);
    letter-spacing: -0.015em;
}

.about-card > p {
    color: var(--slate);
    line-height: 1.7;
    margin: 0 0 1rem;
    font-size: 1.08rem;
}

.about-card > p:last-of-type { margin-bottom: 0; }

.about-stats {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.about-stat {
    background: var(--mist);
    border-radius: var(--radius-sm);
    padding: 0.9rem 0.75rem;
    text-align: center;
    border: 1px solid rgba(46, 92, 138, 0.08);
}

.about-stat-value {
    display: block;
    font-family: var(--font-title);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.about-stat-label {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--slate);
    line-height: 1.35;
}

.about-ctas {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 1.75rem 0 0;
    font-weight: 600;
}

.about-ctas-sep { display: none; }

.about-sep {
    border: 0;
    border-top: 1px dashed rgba(46, 92, 138, 0.25);
    margin: 2rem 0 1.5rem;
}

.about-sig-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.about-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(27, 35, 49, 0.2);
    background: var(--mist);
}

.about-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-sig-text strong {
    display: block;
    font-family: var(--font-title);
    color: var(--ink);
    font-size: 1rem;
}

/* 0.82rem = 14.76px at this site's 18px root - already over the 14px meta floor. */
.about-sig-text span {
    display: block;
    font-size: 0.82rem;
    color: var(--slate);
}

.about-stats-band {
    list-style: none;
    padding: 0;
    margin: 3.5rem auto 0;
    max-width: var(--max-width);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.about-stat-lg {
    text-align: center;
    padding: 0.5rem 0.5rem;
}

.about-stat-lg + .about-stat-lg {
    border-left: 1px solid rgba(46, 92, 138, 0.12);
}

.about-stat-lg-value {
    display: block;
    font-family: var(--font-title);
    font-size: clamp(2.8rem, 5vw, 4.4rem);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.025em;
    line-height: 1;
}

.about-stat-lg-label {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.95rem;
    color: var(--slate);
    line-height: 1.4;
}

@media (max-width: 720px) {
    .about-stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
    .about-stat-lg + .about-stat-lg { border-left: 0; }
    .about-stat-lg:nth-child(even) { border-left: 1px solid rgba(46, 92, 138, 0.12); }
}

@media (max-width: 560px) {
    .about-card { padding: 2.25rem 1.5rem; }
    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-ctas { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
    .about-ctas-sep { display: none; }
}

/* ── Legacy .about-panel rules (kept until all pages migrate) ── */
.about-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 2.5rem;
    align-items: center;
    padding: 2.5rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(46, 92, 138, 0.18);
    box-shadow: 0 20px 50px rgba(27, 35, 49, 0.12);
}

.about-panel h2 {
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    margin-bottom: 1rem;
}

.about-cta {
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.about-signature {
    margin-top: 1.5rem;
    font-weight: 700;
    color: var(--river);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 1rem;
}

.about-image img {
    border-radius: calc(var(--radius) - 6px);
    box-shadow: 0 18px 40px rgba(27, 35, 49, 0.18);
}

.specialties-grid .card {
    position: relative;
    padding-top: 3.2rem;
}

.offerings-legend {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.offerings-pill {
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.offerings-pill--skill {
    background: rgba(46, 92, 138, 0.14);
    color: var(--river);
}

.offerings-pill--good {
    background: rgba(217, 119, 6, 0.16);
    color: #a45306;
}

.offerings-skills .offerings-skill {
    background: rgba(255, 255, 255, 0.92);
}

.offerings-goods .offerings-good {
    background: rgba(255, 255, 255, 0.86);
}

.offerings-good ul {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    margin-top: 1rem;
    color: var(--slate);
}

.offerings-good ul li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.4rem;
}

.offerings-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.2rem;
}

.offerings-chip {
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(46, 92, 138, 0.1);
    color: var(--river);
    font-size: 1rem;
    font-weight: 600;
}

.offerings-skill-cards {
    align-items: stretch;
}

.offerings-skill-card {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    min-height: 320px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    background: #0f172a;
}

.offerings-skill-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05);
    transform: scale(1.02);
    transition: transform 0.6s ease, filter 0.6s ease;
}

.offerings-skill-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: end;
    gap: 0.6rem;
    padding: 1.5rem;
    color: #f8fafc;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.05) 10%, rgba(15, 23, 42, 0.85) 70%);
}

.offerings-skill-overlay h3 {
    margin: 0;
    font-size: 1.6rem;
}

.offerings-skill-overlay p {
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    color: rgba(248, 250, 252, 0.9);
}

.offerings-skill-tag {
    display: inline-flex;
    justify-self: start;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    background: rgba(15, 23, 42, 0.4);
    color: rgba(248, 250, 252, 0.9);
    border: 1px solid rgba(248, 250, 252, 0.35);
    backdrop-filter: blur(6px);
}

.offerings-skill-card:hover img,
.offerings-skill-card:focus-within img {
    transform: scale(1.08);
    filter: saturate(1.2);
}

.offerings-skill-card:hover .offerings-skill-overlay p,
.offerings-skill-card:focus-within .offerings-skill-overlay p {
    max-height: 140px;
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 900px) {
    .offerings-skill-card {
        min-height: 280px;
    }
}

.scenario-map {
    --dot-x: 20%;
    --dot-y: 35%;
}

.scenario-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2.5rem;
    align-items: center;
}

.scenario-panel {
    display: grid;
    gap: 1.8rem;
}

.scenario-buttons {
    display: grid;
    gap: 0.8rem;
}

.scenario-item {
    display: grid;
    gap: 0.4rem;
}

.scenario-button {
    text-align: left;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(46, 92, 138, 0.18);
    background: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.scenario-button:hover,
.scenario-button:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(46, 92, 138, 0.35);
    box-shadow: 0 14px 26px rgba(27, 35, 49, 0.12);
}

.scenario-button.is-active {
    background: linear-gradient(135deg, #1b2b4b, #2c4a7a);
    border-color: rgba(46, 92, 138, 0.6);
    color: #f8fafc;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.2);
}

.scenario-desc {
    padding: 0 1.1rem;
    color: var(--slate);
    font-size: 1rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.scenario-desc.is-open {
    max-height: 120px;
    opacity: 1;
}

.scenario-chart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* ── Diamond Radar Chart ── */
.diamond-chart {
    position: relative;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 1;
}

.diamond-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.diamond-shape {
    transition: d 0.5s ease, fill-opacity 0.5s ease;
}

.diamond-point {
    transition: cx 0.5s ease, cy 0.5s ease;
}

.diamond-label {
    position: absolute;
    font-size: 1rem;
    font-family: var(--font-title);
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.diamond-label--top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
}

.diamond-label--bottom {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 120%);
}

.diamond-label--left {
    left: 0;
    top: 50%;
    transform: translate(-120%, -50%);
}

.diamond-label--right {
    right: 0;
    top: 50%;
    transform: translate(120%, -50%);
}

.diamond-scores {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.diamond-scores span {
    display: block;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.5;
}

.diamond-max-circle {
    transition: fill-opacity 0.3s ease;
}

.diamond-coverage {
    text-align: center;
    margin-top: 1.2rem;
    font-family: var(--font-title);
    font-size: 1rem;
    color: var(--slate);
}

.diamond-coverage strong {
    font-size: 1.6rem;
    color: var(--river);
    font-weight: 700;
}

@media (max-width: 640px) {
    .diamond-chart {
        max-width: 280px;
        margin-top: 2rem;
    }

    .diamond-label {
        font-size: 1rem;
    }
}

/* ── Diamond Badge (mini, for project cards) ── */
.diamond-badge {
    width: 64px;
    height: 64px;
    position: relative;
    float: right;
    margin: 0 0 0.5rem 0.8rem;
}

.diamond-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.diamond-badge-pct {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--river);
    white-space: nowrap;
}

.diamond-badge--sm {
    width: 48px;
    height: 48px;
}

.diamond-badge--sm .diamond-badge-pct {
    font-size: 1rem;
}

.diamond-badge--lg {
    width: 96px;
    height: 96px;
    float: none;
    margin: 0 auto 0.8rem;
}

.diamond-badge--lg .diamond-badge-pct {
    font-size: 1rem;
}

.portfolio-client-name {
    display: block;
    font-size: 1rem;
    color: var(--slate);
    margin-top: -0.2rem;
    margin-bottom: 0.3rem;
}

.scored-project-card {
    text-align: center;
}

.icon-badge {
    position: absolute;
    top: 1.4rem;
    left: 1.4rem;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: var(--river);
    background: rgba(46, 92, 138, 0.12);
}

.portfolio-grid {
    gap: 2rem;
}

/* Case-study cards — homepage portfolio previews. Three-up on desktop,
   stacks on mobile. Image + title + success descriptor + highlights + link. */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    margin-top: 2rem;
}

@media (max-width: 960px) {
    .case-study-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .case-study-grid {
        grid-template-columns: 1fr;
    }
}

/* Text-only success-story grid: 2x2 on desktop so an even count (4 cards) reads as a
   balanced block. Capped width keeps the headline + paragraph at a comfortable line length. */
.case-study-grid--textonly {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
    margin-inline: auto;
}

@media (max-width: 640px) {
    .case-study-grid--textonly {
        grid-template-columns: 1fr;
    }
}

.case-study-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Text-only cards have no image to clip, so let content overflow - this lets the reach
   tooltip pop ABOVE the card without being cropped. Rounded corners still clip the card's
   own background (overflow only affects children). */
.case-study-card--textonly {
    overflow: visible;
}

.case-study-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px rgba(34, 60, 111, 0.12);
    border-color: rgba(46, 92, 138, 0.25);
}

.case-study-image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--mist);
}

.case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.case-study-card:hover .case-study-image img {
    transform: scale(1.03);
}

.case-study-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--river);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

.case-study-badge--inline {
    position: static;
    align-self: flex-start;
    background: var(--mist);
    backdrop-filter: none;
    margin-bottom: 0.25rem;
}

/* Industry tag + reach chip sit on one row. Reach = where the client operates
   (local / national / global) - a separate axis from industry. */
.case-study-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.case-study-tags .case-study-badge--inline {
    margin-bottom: 0;
}

/* Icon-only reach indicator (solid, no circle) sits BEFORE the industry tag. The word
   appears as a tooltip on hover/focus, so it stays clean next to the tag. */
.case-study-reach {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--slate);
    cursor: default;
}

.case-study-reach svg {
    display: block;
    flex-shrink: 0;
}

/* Local work gets the river accent so it pops - reinforces the local-SEO story. */
.case-study-reach--local {
    color: var(--river);
}

/* Tooltip bubble (the reach word) revealed on hover / keyboard focus. */
/* Sits ABOVE the icon (left-anchored so it can't clip at the card edge). The text-only
   card is overflow:visible, so it no longer crops. */
.case-study-reach::after {
    content: attr(data-reach-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 0;
    transform: translateY(4px);
    padding: 0.28rem 0.55rem;
    border-radius: 7px;
    background: var(--ink, #17223f);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 4;
}

.case-study-reach:hover::after,
.case-study-reach:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.case-study-card--textonly .case-study-body {
    padding: 1.75rem 1.75rem 1.85rem;
    gap: 0.7rem;
}

.case-study-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.5rem 1.5rem 1.6rem;
    flex: 1;
}

.case-study-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.case-study-title a {
    color: var(--ink);
    text-decoration: none;
    background: none;
}

.case-study-title a:hover {
    color: var(--river);
}

/* Faint company-name subtitle under the result headline. The headline
   carries the flex; the company name is discoverable but de-emphasized. */
.case-study-subtitle {
    margin: -0.4rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate);
    letter-spacing: 0.01em;
    opacity: 0.75;
}

/* Stats row — the visual flex. Big values, small labels underneath. */
.case-study-stats {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.case-study-stats li.case-study-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.6rem 0.7rem;
    border-radius: 12px;
    background: rgba(46, 92, 138, 0.05);
    border: 1px solid rgba(46, 92, 138, 0.08);
}

.case-study-stat-value {
    font-family: var(--font-title);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--river);
    letter-spacing: -0.02em;
}

.case-study-stat-label {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--slate);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Work descriptor — small muted meta line describing what we actually did. */
.case-study-work-meta {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.55;
}

.portfolio-nda-note {
    margin: 2.5rem auto 0;
    max-width: 640px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--slate);
    font-style: italic;
    line-height: 1.55;
}

.case-study-link {
    margin-top: auto;
    padding-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

/* ─── Case study detail page ─────────────────────────────────────────── */

.case-study-detail-container {
    max-width: 900px;
}

.case-study-detail-eyebrow {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.case-study-detail-eyebrow a {
    color: var(--slate);
    text-decoration: none;
}

.case-study-detail-eyebrow a:hover {
    color: var(--river);
}

.case-study-detail-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.case-study-detail-badge {
    position: static;
    display: inline-flex;
    margin-bottom: 1rem;
    backdrop-filter: none;
}

.case-study-detail-headline {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 auto 0.75rem;
    max-width: 20ch;
}

.case-study-detail-company {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--slate);
    margin: 0;
}

.case-study-detail-image {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    margin-bottom: 2.5rem;
    box-shadow: 0 30px 60px rgba(34, 60, 111, 0.12);
}

.case-study-detail-image img {
    display: block;
    width: 100%;
    height: auto;
}

.case-study-detail-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 640px) {
    .case-study-detail-stats {
        grid-template-columns: 1fr;
    }
}

.case-study-detail-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.4rem;
    border-radius: var(--radius-sm);
    background: rgba(46, 92, 138, 0.06);
    border: 1px solid rgba(46, 92, 138, 0.1);
}

.case-study-detail-stat-value {
    font-family: var(--font-title);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--river);
    letter-spacing: -0.02em;
}

.case-study-detail-stat-label {
    margin-top: 0.45rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.case-study-detail-stat-context {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--slate);
}

.case-study-detail-summary {
    max-width: 680px;
    margin: 0 auto 2.5rem;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--ink);
    text-align: center;
}

.case-study-detail-summary p {
    margin: 0;
}

.case-study-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    padding: 2rem;
    border-radius: var(--radius);
    background: var(--mist);
    margin-bottom: 2.5rem;
}

@media (max-width: 640px) {
    .case-study-detail-meta {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
}

.case-study-detail-meta-block h3 {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
    margin: 0 0 0.5rem;
}

.case-study-detail-meta-block p {
    margin: 0;
    color: var(--ink);
}

.case-study-detail-services {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.case-study-detail-services li {
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
}

.case-study-detail-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.portfolio-card {
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 4px 24px rgba(27, 35, 49, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(27, 35, 49, 0.14);
}

.portfolio-img-wrap {
    position: relative;
    overflow: hidden;
}

.portfolio-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.4s ease;
}

.portfolio-card:hover img {
    transform: scale(1.03);
}

.portfolio-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
    display: flex;
    align-items: flex-end;
}

.portfolio-industries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.portfolio-industry-badge {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    backdrop-filter: blur(4px);
}

.portfolio-meta {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.portfolio-meta h3 {
    font-size: 1.3rem;
}

.portfolio-meta p {
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.55;
}

.portfolio-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.portfolio-service-chip {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    background: rgba(46, 92, 138, 0.08);
    color: var(--river);
}

.portfolio-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

/* Review popover */
.portfolio-review-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--mist);
    color: var(--river);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.portfolio-review-trigger:hover {
    background: var(--river);
    color: #fff;
    border-color: var(--river);
}

.portfolio-review-popover {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 340px;
    z-index: 20;
    animation: popoverIn 0.2s ease;
}

.portfolio-review-trigger.is-active + .portfolio-review-popover {
    display: block;
}

@keyframes popoverIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.portfolio-review-popover-inner {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1rem;
    box-shadow: 0 12px 40px rgba(27, 35, 49, 0.16);
}

.portfolio-review-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 1rem;
}

.portfolio-review-popover blockquote {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0;
    border: none;
    padding: 0;
    max-height: 120px;
    overflow-y: auto;
}

.solutions-card {
    display: flex;
    flex-direction: column;
}

.solutions-industries {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.solutions-industry-pill {
    font-size: 1rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: 100px;
    background: var(--mist);
    color: var(--slate);
    white-space: nowrap;
}

.logo-grid {
    gap: 1.2rem;
}

.logo-card {
    padding: 1.25rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(46, 92, 138, 0.15);
    text-align: center;
    font-weight: 700;
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(27, 35, 49, 0.08);
    display: grid;
    gap: 0.6rem;
    text-align: left;
}

.logo-card h3 {
    font-size: 1.1rem;
}

.logo-card p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--slate);
    margin: 0;
}

/* Homepage testimonials */
section.testimonials .grid.three-up {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 961px) {
    section.testimonials .grid.three-up {
        flex-direction: row;
    }

    section.testimonials .grid.three-up > * {
        flex: 1 1 0;
        min-width: 0;
    }
}

.testimonials .review-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    background: #fff;
    border: 1px solid rgba(27, 35, 49, 0.12);
    box-shadow: 0 4px 24px rgba(27, 35, 49, 0.1);
}

.testimonials .review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(27, 35, 49, 0.15);
}

/* ── Carousel Testimonials (card style, matches bottom CTA) ── */
.testimonials--carousel {
    background: transparent;
    padding: 2rem 0;
}

/* ─── Review Marquee ─────────────────────────────────────────────
   Edge-to-edge single-row scroll. Duplicated cards in the DOM let the
   CSS keyframe translate -50% for a seamless loop. */
.review-marquee {
    display: flex;
    overflow: clip;
    overflow-clip-margin: 80px;
    padding: 2rem 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: transparent;
}

.review-marquee-row {
    display: flex;
    width: max-content;
    animation: review-marquee-scroll 90s linear infinite;
}

/* Use margin-right instead of flex gap so duplicated content concatenates
   seamlessly. With `gap`, the track is only gap-separated within a set, so
   the join between set 1 and set 2 is missing a gap — creating a visible jump. */
.review-marquee-card {
    margin-right: 1rem;
}

/* Hover no longer freezes the row. A script (see index.astro) eases the row's
   playbackRate down and runs the blue-gradient focus effect (inset wash + blur +
   pop are set inline by JS; these transitions smooth them in and out). */
.review-marquee-card { transition: filter 0.45s ease, transform 0.45s ease, box-shadow 0.45s ease; }

@media (max-width: 720px) {
    .review-marquee { padding: 1rem 0; }
    .testimonials.testimonials--marquee { padding: 1.5rem 0; }
}

@keyframes review-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .review-marquee-row { animation: none; }
}

.review-marquee-card {
    flex: 0 0 340px;
    padding: 1.75rem 1.75rem;
    /* Quieter navy field. Single deep base + one soft highlight radial in the
       top-left corner for atmosphere. No 3-stop diagonal slash. */
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(70, 120, 200, 0.35), transparent 55%),
        #152648;
    border-radius: var(--radius-card, 20px);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 2px rgba(9, 18, 40, 0.15),
        0 18px 40px rgba(9, 18, 40, 0.18);
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
}

/* Soft outer halo — a blurred color bloom behind each card, so the card feels
   like it's sitting on air instead of stamped onto the background. */
.review-marquee-card::before {
    content: "";
    position: absolute;
    inset: -12%;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 0%, rgba(60, 123, 255, 0.22), transparent 60%);
    filter: blur(28px);
    z-index: -1;
    opacity: 0.55;
    pointer-events: none;
}

.review-marquee-stars {
    display: flex;
    gap: 2px;
    margin-bottom: 0.75rem;
}

.review-marquee-star {
    color: rgba(255, 255, 255, 0.25);
}

.review-marquee-star.is-filled {
    color: #fbbf24;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.review-marquee-quote {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #fff;
    margin: 0 0 1.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: auto;
}

.review-marquee-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

.review-marquee-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.review-marquee-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.review-marquee-avatar span {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    letter-spacing: 0.02em;
}

.review-marquee-author cite {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    font-size: 0.85rem;
}

.review-marquee-author strong {
    color: #fff;
}

.review-marquee-author span {
    color: rgba(232, 240, 255, 0.75);
}

/* Per-client specific business phrase (e.g. "jewelry maker") - quieter, italic.
   Capitalized to match the Title Case name/role/company above it. */
.review-marquee-author .review-marquee-descriptor {
    color: rgba(232, 240, 255, 0.6);
    font-style: italic;
    font-size: 0.8rem;
    text-transform: capitalize;
}

/* Descriptor used as the main identity line (personal brands with no company). */
.review-marquee-author .review-marquee-descline {
    text-transform: capitalize;
}

/* Public-facing industry buckets as pills. */
.review-marquee-author .review-marquee-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.review-marquee-author .review-marquee-tag {
    color: rgba(232, 240, 255, 0.9);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.14rem 0.5rem;
}

.review-marquee-cta {
    margin-top: 2rem;
}

/* ─── Tool Logo Marquee ───────────────────────────────────────────
   Scrolling strip of tool/platform logos. Subtle horizontal hairline
   top + bottom that fade to transparent at the edges, so the strip
   reads as a quiet band of trust-builders, not a hard section. */
.tool-marquee-section {
    padding: 3rem 0 3.5rem;
    position: relative;
}

.tool-marquee-eyebrow {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(90, 104, 122, 0.72);
    margin-bottom: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
}

/* Elevate the eyebrow's container so the tooltip renders above the marquee.
   Without this, the .tool-marquee sibling (which has position:relative for
   the fade mask) stacks on top in document order and the scrolling icons
   bleed through the tooltip text. */
.tool-marquee-section > .container {
    position: relative;
    z-index: 3;
}

/* Info button + tooltip. Used throughout the site as an educational hover
   affordance - hover or keyboard-focus reveals a substantial tooltip.
   Intentionally larger and more prominent than a browser default so the
   educational content reads as a first-class UI element, not a footnote. */
.tool-marquee-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(46, 92, 138, 0.14);
    color: var(--river);
    font-family: var(--font-title);
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    cursor: help;
    transition: background 0.2s ease, transform 0.2s ease;
    opacity: 1;
    letter-spacing: 0;
}

.tool-marquee-info:hover,
.tool-marquee-info:focus-visible {
    background: rgba(46, 92, 138, 0.26);
    transform: scale(1.08);
    outline: none;
}

.tool-marquee-tooltip {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: max-content;
    max-width: 340px;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 18px 40px rgba(10, 20, 40, 0.3);
    z-index: 20;
}

/* Tooltip arrow */
.tool-marquee-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-bottom-color: var(--ink);
}

.tool-marquee-info:hover .tool-marquee-tooltip,
.tool-marquee-info:focus-visible .tool-marquee-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.tool-marquee {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 1.75rem 0;
    /* Edge fade so logos dissolve at the viewport edge instead of snapping off. */
    -webkit-mask: linear-gradient(90deg,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%);
            mask: linear-gradient(90deg,
        transparent 0,
        #000 8%,
        #000 92%,
        transparent 100%);
}

/* Fading hairline dividers (top + bottom). Thin 1px lines that fade out at
   the extreme left/right so the strip reads airy instead of bounded. */
.tool-marquee::before,
.tool-marquee::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0,
        rgba(15, 23, 42, 0.08) 20%,
        rgba(15, 23, 42, 0.08) 80%,
        transparent 100%);
    pointer-events: none;
}
.tool-marquee::before { top: 0; }
.tool-marquee::after { bottom: 0; }

.tool-marquee-row {
    display: flex;
    width: max-content;
    align-items: center;
    animation: tool-marquee-scroll 100s linear infinite;
}

@keyframes tool-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .tool-marquee-row { animation: none; }
}

/* One fixed sky gradient spans the viewport; every logo + label is a window onto it,
   so as items scroll they reveal different hues of the same gradient. `fixed` anchors
   it to the viewport (not the scrolling row), which is what creates the reveal. */
.tool-marquee {
    --tool-grad: linear-gradient(90deg, #3f82e8 0%, #62a8f5 28%, #76e3d6 52%, #62a8f5 76%, #3f82e8 100%);
}

.tool-marquee-item {
    /* Non-interactive for now - just a steadily scrolling logo strip. */
    padding: 0.35rem 0.5rem;
    cursor: default;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-right: 3rem;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Faint gray logo strip - static and cheap (no scroll-repaint effects). Logos are the
   SVG shape masking a flat gray fill; labels match. Secondary info by design.
   (The dynamic "spotlight" reveal can return later, built GPU-friendly.) */
.tool-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    -webkit-mask: var(--logo-mask) center / contain no-repeat;
            mask: var(--logo-mask) center / contain no-repeat;
    background-color: #97a4b6;
}

.tool-name {
    color: #97a4b6;
    -webkit-text-fill-color: #97a4b6;
}

.tool-marquee-item img {
    height: 24px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* ── Tool detail panel ─────────────────────────────────────────────
   Sits below the marquee, inside .container (z-index:3, not clipped by
   the marquee's overflow:hidden). Updates as you hover/focus/tap a tool. */
.tool-detail {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 620px;
    margin: 1.5rem auto 0;
    min-height: 3.5rem;
    padding: 0.9rem 1.15rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(15, 23, 42, 0.06);
    text-align: left;
}

.tool-detail-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: none;
    align-items: center;
    justify-content: center;
}

.tool-detail-icon img {
    width: 30px;
    height: 30px;
    display: block;
}

.tool-detail.has-tool .tool-detail-icon {
    display: flex;
}

.tool-detail-body {
    flex: 1;
    min-width: 0;
}

.tool-detail-prompt {
    margin: 0;
    color: rgba(90, 104, 122, 0.85);
    font-size: 0.95rem;
    font-style: italic;
}

.tool-detail-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.2rem;
    flex-wrap: wrap;
}

.tool-detail-name {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: -0.01em;
}

.tool-detail-badge {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tool-detail-badge[data-use="daily"] {
    background: rgba(75, 128, 92, 0.16);
    color: var(--sage);
}

.tool-detail-badge[data-use="client"] {
    background: rgba(46, 92, 138, 0.16);
    color: var(--river);
}

.tool-detail-badge[data-use="both"] {
    background: rgba(184, 142, 47, 0.18);
    color: var(--gold);
}

.tool-detail-desc {
    margin: 0;
    color: var(--slate);
    font-size: 0.95rem;
    line-height: 1.45;
}

/* Compact two-column audience strip for the #solutions section. */
.solutions-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    margin: 1.5rem auto 2rem;
    max-width: 1000px;
}

.fit-card {
    padding: 0.5rem 0;
}

.fit-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.fit-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(46, 92, 138, 0.08);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.fit-card-header h3 {
    margin: 0;
}

.fit-card > p {
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.6;
}

.fit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fit-list li {
    position: relative;
    padding-left: 2rem;
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.6;
}

.fit-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--sage, #6a9a7b);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.fit-honest {
    text-align: center;
    color: var(--slate);
    max-width: 720px;
    margin: 2rem auto 0;
    font-size: 0.95rem;
}

/* Shared fit criteria below the two persona columns - one list that speaks to
   every prospect regardless of team size. Reuses the .fit-list green checks. */
.fit-shared {
    max-width: 760px;   /* wide enough for the longest bullet to sit on one line, so all four read uniform on desktop */
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(46, 92, 138, 0.15);
    text-align: center;
}

.fit-shared-lead {
    color: var(--ink);
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1.35rem;
}

.fit-shared .fit-list {
    display: inline-flex;   /* shrink-wrap so the list centers while items stay left-aligned */
    text-align: left;
}

/* Vertical fading divider between the two fit cards. Mirrors the horizontal
   edge fade on the tool marquee so the strip reads airy, not boxed. */
.solutions-strip::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        transparent 0,
        rgba(46, 92, 138, 0.25) 15%,
        rgba(46, 92, 138, 0.25) 85%,
        transparent 100%);
    pointer-events: none;
}

@media (max-width: 640px) {
    .solutions-strip::before {
        display: none;
    }
}

.solutions-strip-col h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.solutions-strip-col p {
    color: var(--slate);
    margin: 0;
}

@media (max-width: 640px) {
    .solutions-strip {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.review-carousel-cta {
    margin-top: 1.5rem;
}

.review-carousel-link {
    color: var(--river);
    border-color: rgba(46, 92, 138, 0.3);
}

.review-carousel-link:hover {
    border-color: var(--river);
}

@media (max-width: 640px) {
    .review-carousel-quote {
        font-size: 1.1rem;
    }

    .review-carousel {
        min-height: 320px;
        padding: 2.25rem 1.25rem 1.75rem;
    }

    .testimonials--carousel {
        padding: 1.5rem 0;
    }
}

.grid {
    display: grid;
    gap: 1.8rem;
}

.two-up {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-up {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid rgba(27, 35, 49, 0.1);
    /* NO Y-offset. The offset is what makes a shadow read as a CAST shadow - object on a
       surface, lit from above - and these cards sit in open sky, where there is nothing
       behind them to catch one. Same reasoning that took the cast shadow off the buttons.
       A centred, spread halo reads as atmosphere instead, and the 1px border above is what
       actually defines the card's edge. */
    box-shadow: 0 0 34px rgba(27, 35, 49, 0.06);
}

.card h3 {
    margin-bottom: 0.8rem;
    font-size: 1.45rem;
}

/* Service cards (index + homepage) */
.service-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card:hover,
.service-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 20px 48px rgba(27, 35, 49, 0.14);
}

.service-card-emoji {
    font-size: 2rem;
    margin-bottom: 0.6rem;
    display: block;
}

.service-card .service-features {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    margin-top: 0.8rem;
    font-size: 1rem;
}

.service-card .service-features li::before {
    content: "\2192";
    margin-right: 0.5rem;
    color: var(--sage);
}

.service-card .btn {
    margin-top: 1.2rem;
}

/* Skills bar — compact inline row above service groups */
.skills-bar {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.skills-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem 0.4rem 0.4rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.02em;
}

.skills-bar-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

/* Grouped services layout */
.services-grouped {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* Service category cards — six high-level categories on the homepage.
   Full-bleed photographic background, category pill top-left, label +
   description + sub-service chips over a dark gradient at the bottom.
   Portrait aspect ratio. 3-up desktop → 2-up tablet → stacked mobile. */
.service-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

@media (max-width: 960px) {
    .service-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile service card overrides moved after base styles - see below */

/* V1b Balanced pan animation knobs (set on the grid, inherited by cards) */
.service-category-grid {
    --rest-speed: 14s;
    --hover-speed: 7s;
    --pan-distance: 240%;
    --base-angle: 135deg;
    --angle-jitter: 8deg;
    --delay-spread: 2.4s;
    --stop-1: #5a96e6;
    --stop-2: #3a6fc4;
    --stop-3: #1f3a78;
    --stop-4: #12275a;
    --stop-5: #0a1836;
}

.service-category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 300px;
    padding: 1.6rem 1.5rem 1.55rem;
    border-radius: var(--radius);
    overflow: hidden;
    background:
        linear-gradient(
            calc(var(--base-angle) + var(--card-angle, 0deg)),
            var(--stop-1) 0%,
            var(--stop-2) 25%,
            var(--stop-3) 55%,
            var(--stop-4) 80%,
            var(--stop-5) 100%
        );
    background-size: var(--pan-distance) var(--pan-distance);
    background-position: 0% 50%;
    animation: service-pan-drift var(--rest-speed) linear infinite;
    animation-delay: var(--card-delay, 0s);
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
    box-shadow: 0 10px 28px rgba(10, 25, 50, 0.16);
}

@keyframes service-pan-drift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.service-category-card:hover { animation-duration: var(--hover-speed); }

/* Per-card phase + angle jitter so the six cards read as a family, not clones */
.service-category-grid .service-category-card:nth-child(1) { --card-delay: 0s;                                --card-angle: 0deg; }
.service-category-grid .service-category-card:nth-child(2) { --card-delay: calc(var(--delay-spread) * -0.33); --card-angle: calc(var(--angle-jitter) *  0.75); }
.service-category-grid .service-category-card:nth-child(3) { --card-delay: calc(var(--delay-spread) * -0.66); --card-angle: calc(var(--angle-jitter) * -1); }
.service-category-grid .service-category-card:nth-child(4) { --card-delay: calc(var(--delay-spread) * -0.2);  --card-angle: calc(var(--angle-jitter) *  1.25); }
.service-category-grid .service-category-card:nth-child(5) { --card-delay: calc(var(--delay-spread) * -0.85); --card-angle: calc(var(--angle-jitter) * -0.5); }
.service-category-grid .service-category-card:nth-child(6) { --card-delay: calc(var(--delay-spread) * -0.45); --card-angle: calc(var(--angle-jitter) *  0.4); }

@media (prefers-reduced-motion: reduce) {
    .service-category-card { animation: none; }
}

.service-category-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.12), transparent 55%);
    z-index: 1;
    pointer-events: none;
}

.service-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 56px rgba(10, 25, 50, 0.28);
}

/* Oversized Planted Sky cloud anchored flush to card bottom. Flat-bottom
   viewBox on the inner SVG keeps the straight edge aligned with the card
   bottom, upright always. Per-card horizontal offsets add rhythm without
   breaking unity. Hover scales the cloud dramatically from bottom-center. */
.service-category-cloud {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 180%;
    height: 120%;
    transform: translateX(-50%);
    transform-origin: center bottom;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.service-category-cloud svg {
    display: block;
    width: 100%;
    height: 100%;
}

.service-category-cloud path {
    fill: rgba(255, 255, 255, 0.1);
}

/* Alternate clouds left/right so the flat base fills one corner fully */
.service-category-card:nth-child(odd)  .service-category-cloud { transform: translateX(-68%); }
.service-category-card:nth-child(even) .service-category-cloud { transform: translateX(-32%); }
/* Subtle per-card jitter within the left/right groupings */
.service-category-card:nth-child(1) .service-category-cloud { transform: translateX(-70%); }
.service-category-card:nth-child(3) .service-category-cloud { transform: translateX(-65%); }
.service-category-card:nth-child(5) .service-category-cloud { transform: translateX(-72%); }
.service-category-card:nth-child(2) .service-category-cloud { transform: translateX(-30%); }
.service-category-card:nth-child(4) .service-category-cloud { transform: translateX(-35%); }
.service-category-card:nth-child(6) .service-category-cloud { transform: translateX(-28%); }

.service-category-card:nth-child(1):hover .service-category-cloud { transform: translateX(-70%) scale(1.15); }
.service-category-card:nth-child(2):hover .service-category-cloud { transform: translateX(-30%) scale(1.15); }
.service-category-card:nth-child(3):hover .service-category-cloud { transform: translateX(-65%) scale(1.15); }
.service-category-card:nth-child(4):hover .service-category-cloud { transform: translateX(-35%) scale(1.15); }
.service-category-card:nth-child(5):hover .service-category-cloud { transform: translateX(-72%) scale(1.15); }
.service-category-card:nth-child(6):hover .service-category-cloud { transform: translateX(-28%) scale(1.15); }

/* Bottom gradient kept for text legibility */
.service-category-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        transparent 55%,
        rgba(8, 18, 42, 0.35) 100%
    );
    pointer-events: none;
}

.service-category-bottom {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-category-label {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.service-category-label a {
    color: inherit;
    text-decoration: none;
    background: none;
}

/* Stretched-link pattern: the heading anchor covers the entire card so the
   whole card is clickable, while item pills (at a higher z-index) stay
   independently interactive. */
.service-category-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
}

.service-category-sub {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.45;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

.service-category-items {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    position: relative;
    z-index: 5;
}

.service-category-items a {
    display: inline-flex;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.74rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.service-category-items a:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .service-category-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
        margin-top: 1.25rem;
    }
    .service-category-card {
        min-height: 0;
        padding: 1.25rem 1.1rem 1.25rem;
    }
}

.services-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.services-group-header {
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--line);
}

.services-group-label {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.services-group-tagline {
    display: block;
    font-size: 1rem;
    color: var(--slate);
    margin-top: 0.15rem;
}

.services-group-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.service-card-compact {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}

.service-card-compact:hover {
    background: #fff;
    border-color: var(--line);
    box-shadow: 0 4px 16px rgba(27, 35, 49, 0.08);
    transform: translateX(4px);
}

.service-card-compact .service-card-emoji {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin: 0;
    line-height: 1.4;
}

.service-card-compact strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.service-card-compact p {
    font-size: 1rem;
    color: var(--slate);
    margin: 0;
    line-height: 1.5;
}

/* Branding placeholder card */
.service-card-placeholder {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.5);
    border: 1px dashed var(--line);
    color: inherit;
}

.service-card-placeholder strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.service-card-placeholder p {
    font-size: 1rem;
    color: var(--slate);
    margin: 0;
    line-height: 1.5;
}

.service-card-soon {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(217, 119, 6, 0.12);
    color: #a45306;
}

@media (max-width: 760px) {
    .services-grouped {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .skills-bar {
        gap: 0.75rem;
    }

    .skills-bar-item {
        font-size: 1rem;
        padding: 0.3rem 0.75rem 0.3rem 0.3rem;
    }

    .skills-bar-item img {
        width: 24px;
        height: 24px;
    }
}

.stats-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid rgba(46, 92, 138, 0.15);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 34px rgba(27, 35, 49, 0.08);
}

.stat-item {
    text-align: left;
}

.stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--river);
}

.stat-label {
    color: var(--slate);
    font-size: 1rem;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.card-header h3 {
    margin-bottom: 0;
}

.icon {
    width: 32px;
    height: 32px;
    color: var(--sage);
}

.card p,
.card li {
    color: var(--slate);
}

.card ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.card li::before {
    content: "→";
    margin-right: 0.5rem;
    color: var(--sage);
}

.timeline-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.timeline-step {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(46, 92, 138, 0.15);
    box-shadow: 0 14px 32px rgba(27, 35, 49, 0.08);
}

.timeline-step ul {
    list-style: none;
    display: grid;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.timeline-step li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.step-number {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--river), #1f3c64);
    box-shadow: 0 10px 24px rgba(46, 92, 138, 0.3);
    margin-inline: auto;
}

.tabs {
    background: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius);
    padding: 1.8rem;
    border: 1px solid rgba(27, 35, 49, 0.1);
    box-shadow: 0 18px 38px rgba(27, 35, 49, 0.1);
}

.tab-list {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.tab-button {
    border: 1px solid rgba(46, 92, 138, 0.2);
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    font-weight: 600;
    color: var(--river);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-button.is-active {
    background: var(--river);
    color: #fff;
    box-shadow: 0 12px 24px rgba(46, 92, 138, 0.25);
}

.tab-panel {
    display: none;
}

.tab-panel.is-active {
    display: grid;
    gap: 0.8rem;
}

.tab-panel ul {
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.tab-panel li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.support {
    margin-top: 2rem;
    padding: 2rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.82);
    border: 1px dashed rgba(46, 92, 138, 0.3);
}

.support ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.support li::before {
    content: "✓";
    color: var(--sage);
    margin-right: 0.5rem;
}

.notice {
    margin-top: 2rem;
    padding: 2rem;
    border-radius: var(--radius);
    background: rgba(255, 250, 245, 0.9);
    border: 1px solid rgba(211, 164, 104, 0.4);
}

.notice ul {
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.notice li::before {
    content: "—";
    color: var(--gold);
    margin-right: 0.5rem;
}

.discovery-why {
    max-width: 860px;
    margin: 2rem auto 3rem;
}

.discovery-why ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0;
    color: var(--slate);
}

.discovery-why li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.discovery-unknowns {
    max-width: 860px;
    margin: 2.5rem auto 0;
}

.discovery-unknowns ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0;
    color: var(--slate);
}

.discovery-unknowns li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.deliverables-card {
    max-width: 960px;
    margin: 0 auto;
}

.deliverables-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.deliverables-header p {
    color: var(--slate);
    margin: 0.5rem 0 0;
}

.deliverables-layout {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
}

.deliverables-list {
    display: grid;
    gap: 0.8rem;
}

.deliverable-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(46, 92, 138, 0.14);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 24px rgba(27, 35, 49, 0.08);
    cursor: pointer;
}

.deliverable-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--river);
    margin-top: 0.2rem;
}

.deliverable-row.required input[type="checkbox"] {
    accent-color: #d97706;
}


.deliverable-row h4 {
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
}

.deliverable-row p {
    margin: 0;
    color: var(--slate);
    font-size: 1rem;
}

.deliverable-sample {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--river);
}

.deliverable-sample:hover {
    color: var(--ink);
}

.deliverable-input {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 1rem;
    color: var(--slate);
    max-width: 160px;
}

.deliverable-input input {
    border: 1px solid rgba(46, 92, 138, 0.2);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    font-size: 1rem;
    font-family: var(--font-body);
    background: #fff;
}

.deliverable-row.required {
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(217, 119, 6, 0.08);
}

.deliverable-impact {
    color: var(--river);
    display: grid;
    justify-items: end;
    gap: 0.2rem;
    white-space: nowrap;
}

.deliverable-impact-value {
    font-weight: 800;
    font-size: 1rem;
    color: var(--river);
}

.deliverable-impact-note {
    font-size: 1rem;
    color: var(--slate);
    display: none;
}

.deliverable-cost {
    font-weight: 700;
    color: var(--ink);
}

.deliverable-cost.prominent {
    font-size: 1.15rem;
    color: var(--river);
}

.proposal-row {
    border-color: rgba(217, 119, 6, 0.45);
    background: rgba(217, 119, 6, 0.08);
}

.proposal-range {
    margin-top: 0.6rem;
    color: var(--slate);
    font-size: 1rem;
}

.proposal-offset {
    margin-top: 0.3rem;
    color: var(--slate);
    font-size: 1rem;
}

.proposal-original {
    text-decoration: line-through;
    text-decoration-color: rgba(217, 119, 6, 0.7);
    text-decoration-thickness: 2px;
}

.proposal-items {
    list-style: none;
    display: grid;
    gap: 0.4rem;
    margin-top: 0.6rem;
    color: var(--slate);
    font-size: 1rem;
}

.proposal-items li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.deliverables-chart {
    padding: 1.2rem;
    border-radius: var(--radius);
    border: 1px solid rgba(46, 92, 138, 0.18);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 36px rgba(27, 35, 49, 0.12);
}

.deliverables-chart h4 {
    margin-bottom: 0.6rem;
}

#deliverables-impact-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

#deliverables-impact-chart {
    min-height: 220px;
}

.deliverables-legend {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--slate);
}

.deliverables-legend .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.6rem;
}

.deliverables-legend .swatch.required {
    background: #d97706;
}

.deliverables-legend .swatch.recommended {
    background: var(--river);
}

.deliverables-legend .swatch.selected {
    background: var(--river);
}

.deliverables-legend .swatch.base {
    background: #64748b;
}

.deliverables-legend .swatch.remaining {
    background: rgba(148, 163, 184, 0.45);
}

.deliverables-footnote {
    margin-top: 0.8rem;
    color: var(--slate);
    font-size: 1rem;
}

.deliverables-meter {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    color: var(--slate);
    gap: 1rem;
}

.deliverables-meter strong {
    color: var(--river);
    font-size: 1.6rem;
}

.deliverables-meter strong.is-complete {
    animation: confidencePulse 1.2s ease-in-out infinite;
}

@keyframes confidencePulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(34, 197, 94, 0.5);
    }
    50% {
        transform: scale(1.06);
        text-shadow: 0 0 12px rgba(34, 197, 94, 0.6);
    }
}

.deliverables-input {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.3rem;
}

.deliverables-input input[type="number"] {
    width: 70px;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    border: 1px solid rgba(46, 92, 138, 0.2);
    font-family: var(--font-body);
    font-size: 1rem;
}

.deliverables-input-suffix {
    font-weight: 600;
    color: var(--slate);
}

.deliverables-calculator {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.calculator-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius);
    border: 1px solid rgba(27, 35, 49, 0.12);
    padding: 1.5rem;
    box-shadow: 0 16px 34px rgba(27, 35, 49, 0.08);
}

.calculator-card h4 {
    margin-bottom: 1rem;
}

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.calculator-grid label {
    display: grid;
    gap: 0.4rem;
    font-size: 1rem;
    color: var(--slate);
}

.calculator-grid input {
    border: 1px solid rgba(46, 92, 138, 0.2);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    font-size: 1rem;
    font-family: var(--font-body);
    background: #fff;
}

.calculator-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.calculator-summary span {
    color: var(--slate);
    font-size: 1rem;
}

.calculator-summary strong {
    display: block;
    font-size: 1.4rem;
    color: var(--river);
}

.calculator-range {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.range-block {
    padding: 1rem;
    border-radius: var(--radius-sm);
    border: 1px dashed rgba(46, 92, 138, 0.2);
    background: rgba(255, 255, 255, 0.7);
}

.range-block h5 {
    margin-bottom: 0.6rem;
    font-size: 1rem;
}

.range-block p {
    margin: 0.3rem 0;
    color: var(--slate);
    font-size: 1rem;
}
.deliverables-note {
    margin-top: 1.2rem;
    color: var(--slate);
}

.phase-focus-card {
    margin: 0 auto 2.5rem;
    max-width: 860px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius);
    padding: 1.8rem 2rem;
    border: 1px solid rgba(46, 92, 138, 0.2);
    box-shadow: 0 18px 40px rgba(27, 35, 49, 0.12);
    text-align: center;
}

.phase-flow-chart {
    margin-bottom: 3rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 8px 16px rgba(27, 35, 49, 0.08);
    overflow-x: auto;
}

.phase-flow-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.phase-flow-chart text {
    dominant-baseline: middle;
}

.phase-flow-chart .phase-node.is-scoped {
    filter: blur(0.6px);
}

.phase-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.phase-panel {
    background: rgba(255, 255, 255, 0.9);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid rgba(27, 35, 49, 0.1);
    box-shadow: 0 8px 16px rgba(27, 35, 49, 0.08);
}

.phase-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.confidence-tag {
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.confidence-tag.low {
    background: rgba(217, 119, 6, 0.18);
    color: #a45306;
}

.confidence-tag.high {
    background: rgba(46, 92, 138, 0.18);
    color: var(--river);
}

.phase-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

.phase-tile {
    border: 2px solid rgba(27, 35, 49, 0.2);
    border-radius: 10px;
    padding: 1rem 0.6rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.92);
    display: grid;
    gap: 0.35rem;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.phase-tile.is-focus {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.18);
}

.phase-tile.is-scoped {
    opacity: 0.6;
    filter: blur(0.6px);
}

.phase-tile.is-confirmed {
    border-color: rgba(46, 92, 138, 0.4);
    background: rgba(46, 92, 138, 0.1);
}

.phase-count {
    font-weight: 700;
    font-size: 1.1rem;
}

.phase-label {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.8;
}

.phase-cost {
    font-weight: 700;
    font-size: 1rem;
    color: var(--river);
}

.phase-confidence {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    align-items: baseline;
    font-size: 1rem;
    color: var(--slate);
    margin-bottom: 0.6rem;
}

.phase-confidence strong {
    color: var(--river);
    font-size: 1.1rem;
}

.phase-note {
    text-align: center;
    font-size: 1rem;
    color: var(--slate);
}

.phase-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 0.6rem;
    font-weight: 600;
    color: var(--river);
}

.phase-cta:hover {
    color: var(--ink);
}

.benefits-callout ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0;
    color: var(--slate);
}

.benefits-callout li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.skip-discovery {
    margin: 3rem auto 0;
    max-width: 860px;
}

.skip-discovery ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0;
    color: var(--slate);
}

.skip-discovery li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.investment-layout {
    display: grid;
    gap: 2rem;
    justify-items: center;
}

.investment-card {
    max-width: 900px;
    width: 100%;
}

.investment-chart {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 1.5rem;
    align-items: center;
}

.investment-timeline {
    grid-template-columns: 1fr;
}

#investment-timeline-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

.investment-legend {
    display: grid;
    gap: 0.7rem;
    font-size: 1rem;
    color: var(--slate);
}

.investment-legend .swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 0.6rem;
}

.investment-legend .swatch.discovery { background: var(--river); }
.investment-legend .swatch.design { background: var(--sage); }
.investment-legend .swatch.development { background: var(--gold); }
.investment-legend .swatch.deployment { background: rgba(46, 92, 138, 0.4); }

.investment-note {
    margin-top: 1rem;
    color: var(--slate);
}

.manifesto-content {
    max-width: 720px;
    margin: 0 auto;
}

.manifesto-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--slate);
    margin-bottom: 1.5rem;
}

.manifesto-content p strong {
    color: var(--ink);
    font-weight: 700;
}

.permaculture-original {
    font-size: 1rem;
    color: var(--sage);
    margin-bottom: 0.75rem;
}

.review-inline {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.review-inline p {
    font-size: 1rem;
    font-style: italic;
    color: var(--slate);
    line-height: 1.6;
}

.review-inline cite {
    display: block;
    margin-top: 0.4rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    color: var(--river);
}

/* Blog preview - homepage */
.blog-preview {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.blog-featured {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-featured:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(27, 35, 49, 0.12);
}

.blog-featured-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius) var(--radius) 0 0;
}

.blog-featured-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mist) 0%, #e8ecf4 100%);
    font-size: 3rem;
}

.blog-featured-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-featured-body h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.blog-meta {
    font-size: 0.9rem;
    color: var(--slate);
    margin-bottom: 0.8rem;
}

.blog-excerpt {
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 1rem;
    flex: 1;
}

.blog-recent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-recent-card {
    text-decoration: none;
    color: inherit;
    padding: 1.2rem 1.4rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-recent-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 35, 49, 0.1);
}

.blog-recent-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.blog-recent-meta {
    font-size: 0.85rem;
    color: var(--slate);
    margin-bottom: 0.4rem;
}

.blog-recent-excerpt {
    font-size: 0.95rem;
    color: var(--slate);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-cta {
    text-align: center;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .blog-preview {
        grid-template-columns: 1fr;
    }
}

.callout {
    position: relative;
    /* Normal section rhythm - not a full-viewport takeover. The card flows in the
       content column like every other card (no background-section / full-height feel). */
    padding: clamp(4.5rem, 9vh, 7rem) 0 clamp(5.5rem, 11vh, 8rem);
    background: transparent;
    z-index: 1;
    color: #f4f8ff;
}

.callout .container {
    width: 100%;
}

.callout::before {
    display: none;
}

.callout-card {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 2.25rem;
    border-radius: 28px;
    /* Softer field: a deep navy base with a single top-center highlight
       instead of the old diagonal slash. Feels lit, not stamped. */
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(86, 142, 220, 0.35), transparent 65%),
        #17223f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 2px rgba(9, 18, 40, 0.2),
        0 40px 80px rgba(9, 18, 40, 0.35);
    position: relative;
    z-index: 2;
    transform: scale(0.98);
    transition: box-shadow 0.3s ease;
    isolation: isolate;
}

/* Bottom-up cloud reveal inside the CTA card. Wrapper clips the SVG to the
   card shape so the cloud never leaks outside the rounded rectangle (can't
   rely on .callout-card overflow:hidden because that would clip the halo
   bloom ::after which intentionally extends past the card edges). */
.callout-card-cloud {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.callout-card-cloud svg {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 130%;
    height: auto;
    transform: translate(-50%, 100%);
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    fill: rgba(255, 255, 255, 0.12);
}

.callout-card:hover .callout-card-cloud svg {
    transform: translate(-50%, 25%);
}

.callout-card > *:not(.callout-card-cloud) {
    position: relative;
    z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
    .callout-card-cloud svg {
        transition: none;
    }
    .callout-card:hover .callout-card-cloud svg {
        transform: translate(-50%, 100%);
    }
}

/* CTA callout: heading + subhead + 3-step sequence + primary CTA. */
.callout.section { padding: 2.5rem 0 4rem; }

.callout-card {
    padding: 3.25rem 3rem 3rem;
}

.callout-card h2 {
    font-family: var(--font-title);
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0 0 0.9rem;
}

.callout-sub {
    font-family: var(--font-body);
    font-size: 1.08rem;
    line-height: 1.6;
    color: rgba(232, 240, 255, 0.82);
    max-width: 620px;
    margin: 0 auto 2.25rem;
}

.callout-sequence {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    text-align: left;
}

.callout-sequence li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.85rem;
    row-gap: 0.35rem;
    padding: 1.25rem 1.25rem 1.35rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
}

.callout-seq-num {
    grid-row: 1 / 3;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1rem;
    color: #f4f8ff;
    background: rgba(86, 142, 220, 0.25);
    border: 1px solid rgba(154, 196, 255, 0.35);
}

.callout-seq-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.1rem;
    color: #f4f8ff;
    align-self: center;
}

.callout-seq-body {
    grid-column: 2;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(232, 240, 255, 0.72);
}

@media (max-width: 720px) {
    .callout-card { padding: 2.5rem 1.5rem; margin-inline: 1rem; }
    .callout-sequence { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Halo bloom behind the CTA card, matching the testimonial card treatment. */
.callout-card::after {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 0%, rgba(60, 123, 255, 0.25), transparent 60%);
    filter: blur(40px);
    z-index: -1;
    opacity: 0.7;
    pointer-events: none;
}

.callout-card h2,
.callout-card p {
    color: #f4f8ff;
}

.callout-card .btn.primary {
    margin-top: 1.2rem;
}

.callout-note {
    margin-top: 1rem;
    color: rgba(232, 240, 255, 0.8);
}

.callout .btn.primary {
    background: #3c7bff;
    color: #fff;
    box-shadow: 0 16px 36px rgba(60, 123, 255, 0.45);
}

.callout .btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(60, 123, 255, 0.55);
}

.callout .btn.ghost {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
    color: #e7f2ff;
}

.callout .btn.ghost:hover {
    box-shadow: 0 18px 34px rgba(8, 17, 37, 0.45);
}

.timeline-track {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.timeline-node {
    padding: 1.4rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(46, 92, 138, 0.15);
    text-align: center;
}

.timeline-node span {
    display: inline-block;
    font-size: 1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: 0.5rem;
}

.timeline-node h4 {
    font-size: 1.05rem;
}

.communication a {
    color: var(--river);
    font-weight: 600;
}

.site-footer {
    position: relative;
    padding: 10rem 0 3.5rem;
    border-top: none;
    background: #ffffff;
    overflow: hidden;
    z-index: 3;
    will-change: transform;
}

/* Roots decoration panel (BaseLayout footerRoots={true}). Fills the footer
   behind its content. These rules live here - not only in index.astro's inline
   style - so every page that opts into footerRoots renders it correctly. */
.footer-roots { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.footer-roots svg { width: 100%; height: 100%; display: block; }

/* Footer color treatment for the navy roots panel. Scoped with :has(.footer-roots)
   so it only applies on footerRoots pages and leaves plain footers alone. The
   footer goes transparent (cutout reveals the sky) and text flips light so it
   reads on navy. Mirrors the homepage's inline footerRoots styling. */
.site-footer:has(.footer-roots) { background: transparent !important; }
.site-footer:has(.footer-roots) .footer-cloud { display: none !important; }
.site-footer:has(.footer-roots) .site-footer .container,
.site-footer:has(.footer-roots) .container { position: relative; z-index: 1; }
.site-footer:has(.footer-roots) .footer-brand { --logo-text: #ffffff; }
.site-footer:has(.footer-roots) .footer-brand p,
.site-footer:has(.footer-roots) .footer-bottom,
.site-footer:has(.footer-roots) .footer-legal a,
.site-footer:has(.footer-roots) .footer-links a { color: rgba(224, 233, 247, 0.78) !important; }
.site-footer:has(.footer-roots) .footer-links h3 { color: #ffffff !important; }
.site-footer:has(.footer-roots) .footer-location { color: #8fb4e6 !important; }
.site-footer:has(.footer-roots) .footer-links a:hover,
.site-footer:has(.footer-roots) .footer-legal a:hover { color: #ffffff !important; }
.site-footer:has(.footer-roots) .footer-bottom { border-top-color: rgba(255, 255, 255, 0.14) !important; }
.site-footer:has(.footer-roots) .footer-column--newsletter { display: none !important; }

.footer-cloud {
    position: absolute;
    top: 0;
    left: 50%;
    width: 120%;
    height: auto;
    transform: translate(-50%, -64%);
    color: #ffffff;
    pointer-events: none;
    z-index: 5;
    filter: none;
}

.footer-cloud path {
    stroke: none;
}

.site-footer .container {
    position: relative;
    z-index: 1;
}

.footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 3.5rem;
    align-items: start;
}

.footer-links {
    display: grid;
    gap: 2.25rem;
}

.footer-brand .logo {
    height: 52px;
    width: auto;
    max-width: 100%;
}

.footer-brand p {
    color: var(--slate);
    margin-top: 1rem;
}

.footer-location {
    font-weight: 600;
    color: var(--river);
}

.footer-links h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.footer-links ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.footer-links a {
    color: var(--slate);
    font-weight: 600;
}

.footer-links a:hover {
    color: var(--river);
}

.footer-bottom {
    margin-top: 3.25rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(27, 35, 49, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--slate);
    font-size: 1rem;
}

@media (max-width: 900px) {
    .site-footer {
        padding-top: 9rem;
    }
}

@media (max-width: 600px) {
    .site-footer {
        padding-top: 8rem;
    }
}

.footer-legal {
    list-style: none;
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.footer-legal a {
    color: var(--slate);
}

.footer-legal a:hover {
    color: var(--river);
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1280px) {
    .nav-link {
        font-size: 1rem;
        padding: 0.3rem 0.5rem;
    }

    .header-ctas .cta-link {
        font-size: 1rem;
    }
}

@media (max-width: 1080px) {
    :root {
        --header-height: 96px;
        --nav-height: 64px;
        --price-bar-height: 64px;
    }

    .announcement-inner {
        font-size: 1rem;
    }

    .header-inner {
        padding: 0.8rem 1rem;
    }

    .header-right {
        gap: 0.5rem;
    }

    .main-nav {
        order: 2;
    }

    .header-ctas {
        order: 1;
    }

    .nav-toggle {
        display: flex;
    }

    .js .nav-list {
        display: none;
    }

    .main-nav.is-open .nav-list,
    #fixed-top > .nav-list.is-menu-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-height: none;
        overflow-y: visible;
        background: #fff;
        border-top: 1px solid rgba(27, 35, 49, 0.08);
        padding: 0.5rem 0 1rem;
        box-shadow: 0 12px 30px rgba(27, 35, 49, 0.15);
    }

    /* Mobile nav items - clean stacked layout */
    #fixed-top > .nav-list .nav-item,
    #fixed-top > .nav-list > li {
        border-bottom: 1px solid rgba(27, 35, 49, 0.06);
    }

    #fixed-top > .nav-list .nav-link,
    #fixed-top > .nav-list .nav-link--button {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        padding: 0.85rem 1.5rem;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--ink);
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        text-decoration: none;
    }

    /* Chevron rotation on expanded submenu */
    #fixed-top > .nav-list .nav-item.has-megamenu.is-open .nav-chevron {
        transform: rotate(180deg);
    }

    #fixed-top > .nav-list .nav-chevron {
        transition: transform 0.2s ease;
        margin-left: auto;
    }

    /* Parent emoji icons - mobile only */
    .nav-link--mobile-icon {
        display: none;
    }

    #fixed-top > .nav-list .nav-link--mobile-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
        background: rgba(46, 92, 138, 0.06);
        border-radius: 10px;
        flex-shrink: 0;
    }

    /* Label + descriptor */
    .nav-link--desc {
        display: none;
    }

    #fixed-top > .nav-list .nav-link--label {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 0;
    }

    #fixed-top > .nav-list .nav-link--desc {
        display: block;
        font-size: 0.82rem;
        font-weight: 400;
        color: var(--slate);
        line-height: 1.3;
        margin-top: 0.15rem;
    }

    /* Megamenus - collapsed by default on mobile */
    #fixed-top > .nav-list .megamenu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: rgba(246, 248, 252, 0.95);
        border-radius: 0;
        box-shadow: none;
        border-top: none;
        padding: 0;
        transition: none;
    }

    #fixed-top > .nav-list .nav-item.has-megamenu.is-open .megamenu {
        display: block;
    }

    /* Megamenu inner - single column on mobile */
    #fixed-top > .nav-list .megamenu-inner,
    #fixed-top > .nav-list #industries-megamenu .megamenu-inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        grid-template-columns: 1fr;
    }

    #fixed-top > .nav-list .megamenu-group {
        padding: 0;
        gap: 0;
    }

    #fixed-top > .nav-list .megamenu-group-label {
        padding: 0.6rem 1.5rem 0.4rem 2.5rem;
        font-size: 0.8rem;
        border-bottom: none;
        color: var(--slate);
        margin-bottom: 0;
    }

    #fixed-top > .nav-list .megamenu-card {
        padding: 0.6rem 1.5rem 0.6rem 2.5rem;
        border-radius: 0;
        gap: 0.5rem;
    }

    #fixed-top > .nav-list .megamenu-card:hover,
    #fixed-top > .nav-list .megamenu-card:focus-visible {
        background: rgba(46, 92, 138, 0.06);
        transform: none;
    }

    #fixed-top > .nav-list .megamenu-title {
        font-size: 0.95rem;
        font-weight: 500;
    }

    #fixed-top > .nav-list .megamenu-desc {
        font-size: 0.78rem;
    }

    #fixed-top > .nav-list .megamenu-emoji {
        font-size: 1rem;
        width: 22px;
        height: 22px;
    }

    #fixed-top > .nav-list .megamenu-footer {
        padding: 0.5rem 1.5rem 0.75rem 2.5rem;
        text-align: left;
        border-top: none;
        margin: 0;
    }

    #fixed-top > .nav-list .megamenu-all-link {
        font-size: 0.9rem;
    }

    #fixed-top > .nav-list .megamenu-badge {
        font-size: 0.65rem;
        padding: 0.1em 0.4em;
    }

    /* Bridge pseudo-element not needed on mobile */
    .nav-item.has-megamenu > .nav-link--button::after {
        display: none;
    }

    .header-ctas .cta-link {
        display: none;
    }

    .breadcrumb-tab .breadcrumbs {
        font-size: 0.9rem;
        gap: 0.4rem;
    }

    .breadcrumb-item {
        gap: 0.4rem;
    }

    .section-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }

    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: calc(8rem + var(--price-bar-height));
    }

    .hero-copy {
        max-width: 760px;
    }

    .eyebrow,
    .section-tag {
        width: fit-content;
    }

    .hero-ecosystem {
        max-width: 760px;
        width: 100%;
        margin-inline: auto;
    }

    .about-panel {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .stats-panel {
        grid-template-columns: 1fr;
    }

    .costs-grid {
        grid-template-columns: 1fr;
    }

    .cost-options {
        grid-column: auto;
    }

    .cost-summary {
        position: static;
    }

    .timeline-track {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .four-up {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scenario-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .two-up,
    .three-up,
    .four-up,
    .timeline-track {
        grid-template-columns: 1fr;
    }

    .scenario-axis-label--left,
    .scenario-axis-label--right {
        display: none;
    }

    .callout {
        margin-top: -100px;
        padding-top: 6rem;
    }

    .callout-cloud {
        width: 140%;
    }

    .timeline-flow {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .timeline-step {
        grid-template-columns: auto 1fr;
        text-align: left;
    }

    .step-number {
        margin-inline: 0;
    }

    .hero {
        padding: 4rem 0 3rem;
    }

    .hero-ecosystem-image,
    .hero-ecosystem-diagram {
        max-width: 560px;
    }

    .visual-image {
        height: 240px;
    }

    .portfolio-card img {
        height: 220px;
    }

    .portfolio-review-popover {
        width: 280px;
    }

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-metrics {
        gap: 0.8rem;
    }

    .metric {
        flex: 1 1 140px;
    }

    .phase-compare {
        grid-template-columns: 1fr;
    }

    .phase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .phase-flow-chart {
        padding: 1.5rem;
    }

    .investment-chart {
        grid-template-columns: 1fr;
    }

    .deliverables-layout {
        grid-template-columns: 1fr;
    }

    .deliverable-row {
        grid-template-columns: auto 1fr;
    }

    .deliverable-impact {
        grid-column: 2;
        justify-self: start;
        justify-items: start;
    }

    .deliverables-meter {
        flex-direction: column;
        align-items: flex-start;
    }

    .deliverables-calculator {
        grid-template-columns: 1fr;
    }

    .calculator-grid {
        grid-template-columns: 1fr;
    }

    .calculator-range {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    :root {
        --header-height: 56px;
    }

    .logo {
        height: 30px;
    }

    .container {
        padding: 0 1rem;
    }

    .site-header {
        overflow: hidden;
    }

    .header-inner {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        gap: 0.5rem;
    }

    .header-left {
        flex-shrink: 0;
    }

    .header-right {
        min-width: 0;
        gap: 0.5rem !important;
    }

    .header-ctas .cta-button {
        font-size: 0.85rem;
        padding: 0.35rem 0.7rem;
    }

    .btn-sm {
        padding: 0.35rem 0.6rem;
        font-size: 0.85rem;
    }

    .breadcrumb-tab {
        padding: 0.2rem 0 0;
    }

    .breadcrumb-tab .breadcrumbs {
        font-size: 0.8rem;
        gap: 0.3rem;
    }

    .breadcrumb-item {
        gap: 0.3rem;
    }

    .section-nav-inner {
        padding: 0.5rem 0;
    }

    .section-link {
        padding: 0.3rem 0.55rem;
        font-size: 0.8rem;
    }

    .section-links {
        display: none;
    }

    .section-scroll-arrow {
        display: none !important;
    }

    .section-select {
        display: block;
        margin: 0 1rem;
        width: calc(100% - 2rem);
    }

    .breadcrumb-item:last-child span,
    .breadcrumb-item:last-child a {
        max-width: none;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }

    .proposal-project-card {
        padding: 1.25rem;
    }

    .proposal-project-card-header {
        gap: 0.75rem;
    }

    .proposal-project-card-emoji {
        font-size: 1.5rem;
    }

    .proposal-review {
        padding: 2rem 1.5rem;
    }

    .proposal-review-mark {
        font-size: 2rem;
    }
}

.about a {
    color: var(--river);
    font-weight: 600;
}

.about {
    position: relative;
}

.approach-sub,
.approach-communication {
    margin-top: 3rem;
}

.approach-communication .section-heading {
    margin-bottom: 2rem;
}

.faq {
    overflow-x: hidden;
}

.faq-list {
    display: grid;
    gap: 1rem;
    max-width: 820px;
    margin: 0 auto;
    /* main.js slides .faq-item in from alternating sides with x: -48/+48 (GSAP sets an
       inline transform). Those 48px stick out of THIS box while the animation runs and
       briefly widen the page, so a scrollbar flashes mid-animation.
       overflow-x: clip stops that (clip never creates a scroll container). The margin is
       required with it: a bare clip cut the items' own box-shadow (0 12px 26px) off at
       the edges. 30px clears the 26px blur while still catching the 48px slide. */
    overflow-x: clip;
    overflow-clip-margin: 30px;
}

.faq-item {
    border: 1px solid rgba(46, 92, 138, 0.2);
    border-radius: var(--radius-sm);
    padding: 1rem 1.2rem;
    background: rgba(255, 255, 255, 0.85);
    /* Offset removed - see .card. Ambient halo, not a cast shadow. */
    box-shadow: 0 0 22px rgba(27, 35, 49, 0.05);
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    font-size: 1rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    float: right;
    color: var(--river);
    font-weight: 700;
}

.faq-item[open] summary::after {
    content: "−";
}

.faq-item p {
    margin-top: 0.8rem;
    color: var(--slate);
    font-size: 1rem;
}

.faq-body {
    padding-top: 0.4rem;
}

.faq-body p {
    color: var(--slate);
    margin-bottom: 0.75rem;
    max-width: 640px;
    line-height: 1.7;
    font-size: 1rem;
}

.faq-body p:last-child {
    margin-bottom: 0;
}

.faq-body ul {
    color: var(--slate);
    margin: 0.5rem 0 0.75rem 1.2rem;
    font-size: 1rem;
    line-height: 1.7;
}

.faq-category {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.faq-category:first-child {
    margin-top: 0;
}

.faq-inline-cta {
    font-weight: 600;
}

.faq-inline-cta a {
    color: var(--river);
}

.faq-inline-cta a:hover {
    color: var(--ink);
}

.next-note {
    margin-top: 1.5rem;
    color: var(--slate);
    font-size: 1rem;
    text-align: center;
}

/* ── Packages CTA (service page cross-sell) ── */
.packages-cta {
    padding: 0 0 2rem;
}

.packages-cta-card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(140deg, rgba(235, 244, 255, 0.6), rgba(255, 255, 255, 0.85));
    border: 1px dashed var(--line);
    padding: 2.5rem 2rem;
}

.packages-cta-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.packages-cta-card p {
    color: var(--slate);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
}

.next-grid {
    justify-content: center;
    grid-template-columns: minmax(0, 560px);
    justify-items: center;
}

.next-cta {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
    justify-self: center;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(235, 244, 255, 0.95));
    border: 1px solid rgba(46, 92, 138, 0.2);
    box-shadow: 0 24px 60px rgba(27, 35, 49, 0.18);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.next-cta .btn.primary {
    margin-top: 0.8rem;
}

.cta-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.cta-actions .btn {
    min-width: 200px;
    padding-inline: 1.9rem;
    min-height: 48px;
}

.cta-actions .btn.primary {
    margin-top: 0;
}

.steps-list {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    text-align: left;
}

.steps-list ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
    color: var(--slate);
}

.steps-list li::before {
    content: "•";
    color: var(--gold);
    margin-right: 0.5rem;
}

.next-cta.reveal {
    transform: translateY(24px) scale(0.94);
    box-shadow: 0 12px 30px rgba(27, 35, 49, 0.12);
}

.next-cta.reveal.is-visible {
    transform: translateY(0) scale(1);
    box-shadow: 0 30px 80px rgba(27, 35, 49, 0.26);
}

.next-cta:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(46, 92, 138, 0.35);
    box-shadow: 0 34px 90px rgba(27, 35, 49, 0.28);
}

.next-email {
    font-weight: 600;
    color: var(--river);
}

.section-nav-inner {
    flex-wrap: nowrap;
    justify-content: center;
}

.section-ctas {
    width: 100%;
    justify-content: center;
    padding-top: 0.5rem;
}

.hero-quote {
    text-align: center;
    padding: 2.5rem 2rem;
    margin: 0 auto 2.5rem;
    border-radius: var(--radius);
    border: 1px solid rgba(46, 92, 138, 0.2);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 50px rgba(27, 35, 49, 0.15);
    max-width: 900px;
}

.hero-quote p {
    font-family: var(--font-title);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.2;
    color: var(--ink);
    font-weight: 800;
    margin-bottom: 1rem;
}

.hero-quote span {
    display: inline-block;
    font-weight: 600;
    color: var(--river);
}

.pricing-table-wrap {
    padding: 2rem;
    overflow-x: auto;
}

.pricing-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    text-align: left;
}

.pricing-table th,
.pricing-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    vertical-align: top;
}

.pricing-table thead th {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    background: rgba(15, 23, 42, 0.04);
}

.pricing-table td:first-child,
.pricing-table th:first-child {
    font-weight: 600;
    color: var(--ink);
}

.pricing-emphasis td {
    font-weight: 700;
    color: var(--river);
}

.pricing-note {
    margin-top: 1.5rem;
    color: var(--slate);
    font-size: 1rem;
}

.pricing-secondary {
    display: block;
    font-size: 1rem;
    color: var(--slate);
    opacity: 0.7;
    margin-top: 0.15rem;
}

/* Budget estimator */
.budget-estimator {
    margin-top: 1.5rem;
    padding: 2rem;
}

.estimator-header {
    margin-bottom: 2rem;
}

.estimator-header h3 {
    margin: 0 0 0.5rem;
}

.estimator-header p {
    margin: 0;
    color: var(--slate);
}

.estimator-control {
    margin-bottom: 2rem;
}

.estimator-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.estimator-label-row label {
    font-weight: 600;
    color: var(--ink);
}

.estimator-label-right {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.estimator-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--river);
    white-space: nowrap;
}

.mode-toggle {
    display: flex;
    background: rgba(27, 35, 49, 0.06);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.mode-btn {
    background: none;
    border: none;
    border-radius: 6px;
    padding: 0.25rem 0.625rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--slate);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: var(--font-body);
}

.mode-btn.is-active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(27, 35, 49, 0.12);
}

.estimator-slider {
    width: 100%;
    accent-color: var(--river);
    cursor: pointer;
    height: 6px;
    display: block;
}

/* Tier indicator bar */
.estimator-tier-track {
    position: relative;
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: visible;
    margin-top: 0.625rem;
}

.tier-zone {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    opacity: 0.45;
    overflow: hidden;
}

.tier-zone--starter {
    background: var(--sage);
    border-radius: 5px 0 0 5px;
}

.tier-zone--growth {
    background: var(--river);
    border-radius: 0 5px 5px 0;
    flex: 1;
}

.tier-zone.is-active {
    opacity: 1;
}

.tier-zone-label {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    pointer-events: none;
    white-space: nowrap;
}

.tier-track-cursor {
    position: absolute;
    top: -3px;
    width: 3px;
    height: calc(100% + 6px);
    background: var(--ink);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: left 0.08s ease;
    pointer-events: none;
}

.estimator-range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--slate);
}

.estimator-results {
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

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

.estimator-amount {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.estimator-divider {
    border-top: 1px solid var(--line);
    margin: 0.25rem 0;
}

.estimator-total {
    font-weight: 700;
}

.estimator-total .estimator-amount {
    color: var(--river);
    font-size: 1.125rem;
}

.estimator-setup {
    padding-top: 0.25rem;
    color: var(--slate);
    font-size: 1rem;
}

.estimator-setup .estimator-amount {
    font-weight: 500;
    color: var(--slate);
}

.estimator-note {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--slate);
}

.estimator-industry {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.estimator-industry label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.estimator-industry-hint {
    font-weight: 400;
    color: var(--slate);
    font-size: 1rem;
}

.estimator-industry-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(27, 35, 49, 0.18);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.estimator-industry-input:focus {
    border-color: var(--river);
}

.estimator-leads-value {
    color: var(--sage);
}

/* ========================================
   Proposals
   ======================================== */

/* Scanner input */
.proposal-scanner-section {
    padding-top: 3rem;
    padding-bottom: 1rem;
}

.proposal-scanner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.proposal-scanner-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.proposal-scanner-sub {
    color: var(--slate);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.proposal-scanner-form {
    position: relative;
}

.proposal-scanner-input-wrap {
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid var(--line);
    border-radius: 60px;
    padding: 0.35rem 0.35rem 0.35rem 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.proposal-scanner-input-wrap:focus-within {
    border-color: var(--ink);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

.proposal-scanner-icon {
    flex-shrink: 0;
    color: var(--slate);
    opacity: 0.5;
    margin-right: 0.75rem;
}

.proposal-scanner-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--ink);
    min-width: 0;
}

.proposal-scanner-input::placeholder {
    color: var(--slate);
    opacity: 0.5;
}

.proposal-scanner-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 0.65rem 1.25rem;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.proposal-scanner-btn:hover {
    background: #2d3748;
    transform: translateX(2px);
}

.proposal-scanner-btn:active {
    transform: scale(0.97);
}

.proposal-scanner-btn.is-scanning {
    pointer-events: none;
    opacity: 0.7;
}

.proposal-scanner-btn.is-scanning .proposal-scanner-btn-label::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    margin-left: 0.5rem;
    animation: scanner-spin 0.6s linear infinite;
    vertical-align: middle;
}

.proposal-scanner-btn.is-scanning .proposal-scanner-btn-arrow {
    display: none;
}

@keyframes scanner-spin {
    to { transform: rotate(360deg); }
}

/* Progress bar */
.proposal-scanner-status {
    margin-top: 1.25rem;
    text-align: left;
}

.proposal-scanner-progress {
    height: 4px;
    background: var(--mist);
    border-radius: 4px;
    overflow: hidden;
}

.proposal-scanner-progress-bar {
    height: 100%;
    background: var(--ink);
    border-radius: 4px;
    width: 0%;
    transition: width 0.4s ease;
}

.proposal-scanner-status-text {
    font-size: 1rem;
    color: var(--slate);
    margin-top: 0.5rem;
}

/* Scanner meta results (CMS badge, page count) */
.proposal-scanner-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.proposal-scanner-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 20px;
    background: var(--mist);
    color: var(--ink);
}

.proposal-scanner-chip--cms {
    background: rgba(87, 153, 126, 0.12);
    color: var(--sage);
}

.proposal-scanner-chip--error {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

@media (max-width: 600px) {
    .proposal-scanner-heading {
        font-size: 1.5rem;
    }
    .proposal-scanner-input-wrap {
        padding: 0.25rem 0.25rem 0.25rem 1rem;
    }
    .proposal-scanner-input {
        font-size: 1rem;
    }
    .proposal-scanner-btn {
        padding: 0.55rem 1rem;
        font-size: 1rem;
    }
}

.proposal-welcome-banner {
    padding: 0.75rem 1rem;
    background: rgba(27, 35, 49, 0.06);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--slate);
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.proposal-welcome-banner p {
    margin: 0;
}

.proposal-settings {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 210;
}

.proposal-settings-trigger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(27, 35, 49, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.3s;
}

.proposal-settings-trigger:hover,
.proposal-settings-trigger[aria-expanded="true"] {
    background: rgba(27, 35, 49, 0.9);
    color: #fff;
}

.proposal-settings-trigger[aria-expanded="true"] {
    transform: rotate(60deg);
}

.proposal-settings-menu {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    background: var(--ink);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.proposal-settings-menu[hidden] {
    display: none;
}

.proposal-settings-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    user-select: none;
}

.proposal-settings-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.proposal-settings-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.proposal-settings-item input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.proposal-settings-item input[type="checkbox"]:checked {
    background: var(--sage);
}

.proposal-settings-item input[type="checkbox"]:checked::after {
    transform: translateX(12px);
    background: #fff;
}

/* Legacy proposal pages (pallcare, sample, deanna-carell-frozen) */
.proposal-price-toggle {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 201;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    background: rgba(27, 35, 49, 0.05);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.proposal-price-toggle:hover {
    background: rgba(27, 35, 49, 0.1);
    color: var(--ink);
}

.pricing-hidden .proposal-price-toggle {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.proposal-header {
    padding: 6rem 0 3rem;
    border-bottom: 1px solid var(--line);
}

.proposal-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.proposal-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--river);
    background: rgba(46, 92, 138, 0.08);
    padding: 0.25rem 0.8rem;
    border-radius: 999px;
}

.proposal-date {
    font-size: 1rem;
    color: var(--slate);
}

.proposal-header h1 {
    font-size: clamp(1.6rem, 5vw, 2.6rem);
    margin-bottom: 0.6rem;
}

.proposal-header .lead {
    max-width: 640px;
    color: var(--slate);
}

.proposal-mockup-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
    padding: 0.65rem 1.4rem;
    background: var(--river);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}
.proposal-mockup-cta:hover {
    background: #1e4a6e;
    transform: translateY(-1px);
}
.proposal-mockup-cta svg { opacity: 0.7; }
.proposal-mockup-cta--alt {
    background: transparent;
    color: var(--river);
    border: 1.5px solid var(--river);
}
.proposal-mockup-cta--alt:hover {
    background: rgba(46, 92, 138, 0.06);
    transform: translateY(-1px);
}
.proposal-mockup-ctas {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}
/* Planner-only control under the mockup CTAs: lets the client open the full
   interactive mockup, or restricts them to the thumbnail. */
.planner-mockup-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.45rem 0.7rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--slate);
    cursor: pointer;
    background: var(--mist);
}
.planner-mockup-toggle input { cursor: pointer; }

.proposal-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.proposal-party {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 1rem;
    color: var(--slate);
}

.proposal-party strong {
    font-size: 1.1rem;
    color: var(--ink);
}

.proposal-party-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--sage);
    margin-bottom: 0.3rem;
}

.proposal-section {
    padding: 3.5rem 0;
    border-bottom: 1px solid var(--line);
}

.proposal-section h2 {
    font-size: clamp(1.4rem, 3.5vw, 1.8rem);
    margin-bottom: 0.5rem;
}

.proposal-section > .container > p {
    color: var(--slate);
    margin-bottom: 1rem;
    max-width: 640px;
}

.proposal-overview-block + .proposal-overview-block {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--line);
}

/* ── Package economics (V1: rollup -> website vs services -> website options)
   Client-facing presentation for a package financed via a payment plan. Shared
   by build-sendable.cjs + ProposalShell. */
.pkg-econ { background: #fff; border: 1px solid var(--line); border-radius: var(--radius, 22px); box-shadow: 0 6px 22px rgba(27,35,49,0.08); overflow: hidden; }
.pkg-econ-top { padding: 1.6rem 1.7rem 1.4rem; background: linear-gradient(160deg, #fff, var(--mist, #eef0ea)); }
.pkg-econ-eyebrow { font-family: var(--font-title); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--slate); }
.pkg-econ-headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.6rem; margin: 0.55rem 0 0.2rem; }
.pkg-econ-fig { display: flex; flex-direction: column; }
.pkg-econ-fig .v { font-family: var(--font-title); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pkg-econ-fig .v small { font-size: 0.85rem; font-weight: 600; color: var(--slate); }
.pkg-econ-fig .l { font-size: 0.76rem; color: var(--slate); margin-top: 0.2rem; }
.pkg-econ-adnote { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--slate); }
.pkg-econ-adnote b { color: var(--ink); }
.pkg-econ details.pkg-econ-bd { border-top: 1px solid var(--line); }
.pkg-econ details.pkg-econ-bd > summary { list-style: none; cursor: pointer; padding: 0.9rem 1.7rem; display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-title); font-weight: 700; font-size: 0.86rem; color: var(--river, #3a6ea5); }
.pkg-econ details.pkg-econ-bd > summary::-webkit-details-marker { display: none; }
.pkg-econ details.pkg-econ-bd > summary .chev { font-size: 0.7rem; transition: transform 0.18s; }
.pkg-econ details.pkg-econ-bd[open] > summary .chev { transform: rotate(90deg); }
.pkg-econ-bd-body { padding: 0 1.7rem 1.5rem; }
.pkg-econ-block { border: 1px solid var(--line); border-radius: var(--radius-sm, 14px); padding: 1.05rem 1.2rem; }
.pkg-econ-block + .pkg-econ-block { margin-top: 0.85rem; }
.pkg-econ-block--web { border-left: 4px solid var(--river, #3a6ea5); }
.pkg-econ-block--svc { border-left: 4px solid var(--sage, #6a8f7a); }
.pkg-econ-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pkg-econ-block-title { font-family: var(--font-title); font-weight: 700; font-size: 1rem; }
.pkg-econ-block-sub { font-size: 0.8rem; color: var(--slate); margin: 0.1rem 0 0; }
.pkg-econ-block-amt { font-family: var(--font-title); font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
.pkg-econ-block-amt small { font-weight: 400; font-size: 0.78rem; color: var(--slate); }
.pkg-econ-group { margin-top: 0.7rem; border-top: 1px dashed var(--line); padding-top: 0.6rem; }
.pkg-econ-group-label { font-family: var(--font-title); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--slate); margin-bottom: 0.35rem; }
.pkg-econ-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.pkg-econ-row { display: flex; justify-content: space-between; font-size: 0.86rem; gap: 1rem; }
.pkg-econ-row .l { color: var(--slate); }
.pkg-econ-row .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.pkg-econ-row--credit .l, .pkg-econ-row--credit .v { color: var(--sage, #6a8f7a); }
.pkg-econ-row--total { border-top: 1px solid var(--line); margin-top: 0.2rem; padding-top: 0.35rem; }
.pkg-econ-row--total .l { color: var(--ink); font-weight: 700; }
.pkg-econ-row--total .v { color: var(--ink); font-weight: 800; }
.pkg-econ details.pkg-econ-webopts { margin-top: 0.7rem; border-top: 1px dashed var(--line); padding-top: 0.5rem; }
.pkg-econ details.pkg-econ-webopts > summary { list-style: none; cursor: pointer; font-family: var(--font-title); font-weight: 700; font-size: 0.78rem; color: var(--river, #3a6ea5); display: inline-flex; gap: 0.35rem; align-items: center; }
.pkg-econ details.pkg-econ-webopts > summary::-webkit-details-marker { display: none; }
.pkg-econ details.pkg-econ-webopts .chev { font-size: 0.65rem; transition: transform 0.18s; }
.pkg-econ details.pkg-econ-webopts[open] .chev { transform: rotate(90deg); }
.pkg-econ-webopt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.6rem 0.75rem; background: var(--mist, #eef0ea); border-radius: 9px; margin-top: 0.5rem; }
.pkg-econ-webopt.is-pref { background: rgba(106,143,122,0.12); outline: 1px solid var(--sage, #6a8f7a); }
.pkg-econ-webopt-name { font-family: var(--font-title); font-weight: 700; font-size: 0.85rem; }
.pkg-econ-webopt-name .pref { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #fff; background: var(--sage, #6a8f7a); border-radius: 999px; padding: 0.1rem 0.4rem; margin-left: 0.35rem; vertical-align: middle; }
.pkg-econ-webopt-amt { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; font-size: 0.86rem; }
.pkg-econ-webopt-amt small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--slate); }

/* ── In-card economics (Variation A: the cost summary for a payment-plan
   package - rollup + stacked breakdown, sized for a grid column). Shared by
   build-sendable.cjs + the planner. */
.iceco { margin-top: 1rem; background: var(--mist, #eef0ea); border-radius: var(--radius-sm, 14px); padding: 1rem 1.1rem; }
.iceco-roll-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.2rem 0; }
.iceco-roll-row .l { font-family: var(--font-title); font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.iceco-roll-row .l small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.72rem; color: var(--slate); }
.iceco-roll-row .v { font-family: var(--font-title); font-weight: 800; font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iceco-roll-row .v small { font-size: 0.7rem; font-weight: 600; color: var(--slate); }
.iceco-adnote { font-size: 0.74rem; color: var(--slate); margin: 0.5rem 0 0; }
.iceco details.iceco-bd { margin-top: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.5rem; }
.iceco details.iceco-bd > summary { list-style: none; cursor: pointer; font-family: var(--font-title); font-weight: 700; font-size: 0.78rem; color: var(--river, #3a6ea5); display: inline-flex; gap: 0.35rem; align-items: center; }
.iceco details.iceco-bd > summary::-webkit-details-marker { display: none; }
.iceco .chev { font-size: 0.65rem; transition: transform 0.18s; display: inline-block; }
.iceco details[open] > summary .chev { transform: rotate(90deg); }
.iceco-blk { margin-top: 0.7rem; border-left: 3px solid var(--river, #3a6ea5); padding-left: 0.7rem; }
/* Extra breathing room before Marketing so it reads as a distinct section
   from the website block above it. */
.iceco-blk--svc { border-left-color: var(--sage, #6a8f7a); margin-top: 1.6rem; }
.iceco-blk-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.iceco-blk-h .t { font-family: var(--font-title); font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.iceco-blk-h .a { font-weight: 700; font-size: 0.82rem; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.iceco-blk-h .a small { font-weight: 400; color: var(--slate); font-size: 0.72rem; }
.iceco-blk-line { font-size: 0.8rem; color: var(--slate); margin-top: 0.25rem; }
.iceco details.iceco-webalt { margin-top: 0.35rem; }
.iceco details.iceco-webalt > summary { list-style: none; cursor: pointer; font-size: 0.76rem; color: var(--river, #3a6ea5); font-weight: 700; font-family: var(--font-title); display: inline-flex; gap: 0.35rem; align-items: center; }
.iceco details.iceco-webalt > summary::-webkit-details-marker { display: none; }
/* Make the expand affordance obvious on the disclosure summaries: underline on
   hover/focus + a subtle nudge so it reads as a control, not a label. */
.iceco details.iceco-bd > summary:hover,
.iceco details.iceco-webalt > summary:hover { text-decoration: underline; color: var(--ink); }
.iceco details.iceco-bd > summary:hover .chev,
.iceco details.iceco-webalt > summary:hover .chev { transform: translateX(2px); }
.iceco details[open].iceco-bd > summary:hover .chev,
.iceco details[open].iceco-webalt > summary:hover .chev { transform: rotate(90deg); }
.iceco details.iceco-bd > summary:focus-visible,
.iceco details.iceco-webalt > summary:focus-visible { outline: 2px solid var(--river, #3a6ea5); outline-offset: 2px; border-radius: 4px; }
.iceco-alt { font-size: 0.78rem; color: var(--ink); padding: 0.25rem 0 0; }
.iceco-save { display: inline-block; margin-left: 0.3rem; padding: 0.02rem 0.4rem; background: rgba(106,143,122,0.15); color: var(--sage, #6a8f7a); font-weight: 700; font-size: 0.7rem; border-radius: 999px; white-space: nowrap; }
/* "Your payment plan" picker inside the website block of the economics card. */
.iceco-plan-pick { margin: 0.4rem 0 0.15rem; }
.iceco-plan-pick-label { display: block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--river, #3a6ea5); margin-bottom: 0.25rem; }
.iceco-plan-static { font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.iceco-plan-select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--river, #3a6ea5); border-radius: 8px; background-color: #fff; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232e5c8a' stroke-width='3'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 0.6rem center; padding: 0.4rem 1.8rem 0.4rem 0.6rem; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.iceco-plan-select:focus-visible { outline: 2px solid var(--river, #3a6ea5); outline-offset: 2px; }
.iceco-grp-label { font-family: var(--font-title); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--slate); margin: 0.45rem 0 0.15rem; }
.iceco-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.12rem 0; gap: 0.75rem; }
.iceco-row .l { color: var(--slate); }
.iceco-row .v { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iceco-row--credit .l, .iceco-row--credit .v { color: var(--sage, #6a8f7a); }
.iceco-row--total { border-top: 1px solid var(--line); margin-top: 0.2rem; padding-top: 0.3rem; }
.iceco-row--total .l, .iceco-row--total .v { color: var(--ink); font-weight: 800; }
.iceco-note { margin: 0.4rem 0 0; font-size: 0.72rem; font-style: italic; color: var(--slate); line-height: 1.4; }
/* Recurring/monthly sub-area boxed as its own panel (a card, not a stripe) so a
   closing one-time subtotal never reads as the monthly section's header. */
.iceco-sub--mo { background: #fff; border-radius: 10px; padding: 0.5rem 0.6rem; margin-top: 0.7rem; }
.iceco-sub--mo .iceco-grp-label { margin-top: 0; }
.iceco-sub--mo .iceco-note { margin-bottom: 0; }

/* ── Payment plan (client-facing) ────────────────────────────────────────
   Shared by the built sendable (build-sendable.cjs) and the planner/preview
   (ProposalShell.astro), so it lives in main.css. Client view shows flat
   installments only - no engine, no APR. */
.payplan-head { margin-bottom: 1.75rem; }
.payplan-intro { color: var(--slate); max-width: 60ch; }
.payplan-group + .payplan-group {
    margin-top: 2.5rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--line);
}
.payplan-group-title {
    font-family: var(--font-title);
    font-size: 1.05rem;
    color: var(--ink);
    margin: 0 0 1rem;
}
.payplan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.payplan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 4px solid var(--payplan-accent, var(--river));
    border-radius: var(--radius-sm, 14px);
    padding: 1.25rem 1.35rem 1.35rem;
    box-shadow: 0 1px 3px rgba(27, 35, 49, 0.05);
}
.payplan-card.is-recommended {
    box-shadow: 0 4px 18px rgba(27, 35, 49, 0.12);
    border-color: var(--payplan-accent, var(--river));
}
.payplan-badge {
    position: absolute;
    top: -0.7rem;
    right: 1rem;
    background: var(--payplan-accent, var(--river));
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}
.payplan-card-title {
    margin: 0 0 0.25rem;
    font-family: var(--font-title);
    font-size: 1.1rem;
    color: var(--ink);
}
.payplan-owns {
    font-size: 0.82rem;
    color: var(--slate);
    margin-bottom: 0.9rem;
}
.payplan-owns strong { color: var(--ink); }
.payplan-rows {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 0.75rem;
}
.payplan-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.3rem 0;
}
.payplan-row-label { font-size: 0.85rem; color: var(--slate); }
.payplan-row-val {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}
.payplan-foot {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    color: var(--slate);
    line-height: 1.5;
}
.payplan-chart {
    margin-top: 1.75rem;
    padding: 1.1rem 1.25rem 1rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 14px);
}
.payplan-chart-title {
    margin: 0 0 0.75rem;
    font-family: var(--font-title);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--ink);
}
.payplan-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
}
.payplan-leg {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
}
.payplan-leg i {
    width: 18px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
}
.payplan-leg-note { font-size: 0.74rem; color: var(--slate); }

/* ── Planner "Client view" toggle ────────────────────────────────────────
   Flips the planner into a clean sendable-like preview by hiding admin chrome.
   Default off. The pill stays visible so it can be toggled back. */
.planner-clientview-toggle {
    position: fixed;
    right: 16px;
    bottom: 60px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid rgba(27, 45, 80, 0.15);
    background: #fff;
    color: var(--ink, #1b2d50);
    font-family: var(--font-title, 'Plus Jakarta Sans', sans-serif);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(27, 35, 49, 0.18);
}
.planner-clientview-toggle:hover { border-color: var(--river, #3a6ea5); }
.planner-clientview-toggle__icon { font-size: 15px; line-height: 1; }
body.planner-client-view .planner-clientview-toggle {
    background: var(--sage, #6a8f7a);
    color: #fff;
    border-color: var(--sage, #6a8f7a);
}
/* What "client view" hides on the planner page. The pricing engine / payment
   config / contractor data is never client-safe, so it's first to go; the rest
   is editing chrome the client should not see. */
body.planner-client-view :is(
    .compare-pkg-actions,
    .compare-timeline-estimate,
    .compare-pkg-summary-stats,
    .compare-pkg-ctas,
    .compare-request-status,
    .planner-breakdown-control,
    #calcSummary, .calc-summary,
    #pkgBar, .pkg-bar,
    #payplanAdmin,
    #sectionVisibilityRail,
    #proposalSettings, .proposal-settings,
    #pricingPanel, #pricingPanelTrigger,
    .svr
) { display: none !important; }

/* Planner-only admin config panel (never shipped to the client). */
.payplan-admin {
    margin-bottom: 2rem;
    padding: 1.25rem 1.35rem 1.4rem;
    background: var(--shell, #faf9f6);
    border: 1px dashed var(--gold, #c79a3a);
    border-radius: var(--radius-sm, 14px);
}
.payplan-admin-bar {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}
.payplan-admin-tag {
    flex: none;
    background: var(--gold, #c79a3a);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.1rem;
}
.payplan-admin-note { margin: 0; font-size: 0.82rem; color: var(--slate); line-height: 1.55; }
.payplan-admin-pkgs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}
.payplan-pkg {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 14px);
    padding: 1rem 1.1rem 1.1rem;
}
.payplan-pkg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.payplan-pkg-head h3 { margin: 0; font-size: 1rem; color: var(--ink); }
.payplan-switch { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--ink); cursor: pointer; }
.payplan-switch input { width: 15px; height: 15px; accent-color: var(--gold, #c79a3a); }
.payplan-models {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-bottom: 0.85rem;
    font-size: 0.8rem;
    color: var(--slate);
}
.payplan-models-label { font-weight: 700; color: var(--ink); }
.payplan-models label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }

/* Preferred-option picker: which payment option leads the client card for this
   package (the rest fold under "other ways to pay"). Per package. */
.payplan-preferred {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.35rem 0 0.85rem;
    font-size: 0.8rem;
    color: var(--slate);
}
.payplan-preferred-label { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 700; color: var(--ink); }
.payplan-preferred-select {
    font: inherit;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 8px);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

/* Plan-type groups (the prototype's coloured sections). A coloured left rail
   ties each dial set to its plan; a group dims when its "Show" model is off. */
.payplan-gsec {
    margin-top: 0.9rem;
    padding: 0.5rem 0 0.5rem 0.75rem;
    border-left: 3px solid var(--gsec, var(--line));
    transition: opacity 0.15s;
}
.payplan-gsec-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin: 0 0 0.5rem;
    font-family: var(--font-title);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gsec, var(--ink));
}
.payplan-gsec-tag { font-weight: 600; font-size: 0.62rem; text-transform: none; letter-spacing: 0; color: var(--slate); opacity: 0.8; }
.payplan-gsec-off {
    margin-left: auto;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--slate);
    opacity: 0;
}
.payplan-gsec.is-off { opacity: 0.4; }
.payplan-gsec.is-off .payplan-gsec-off { opacity: 0.9; }
.payplan-gsec.is-off .payplan-fields,
.payplan-gsec.is-off .payplan-basis { pointer-events: none; }

/* Basis fields (B + hosting): derived value with an auto/manual override. */
.payplan-basis { margin-bottom: 0.4rem; }
.payplan-basis-field { margin-bottom: 0.55rem; }
.payplan-basis-toggle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.66rem; color: var(--slate); cursor: pointer; }
.payplan-basis-toggle input { width: 13px; height: 13px; accent-color: var(--river); }
.payplan-basis-auto {
    padding: 0.35rem 0.5rem;
    background: var(--mist, #eef0ea);
    border-radius: 7px;
}
.payplan-basis-val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; color: var(--ink); }
.payplan-basis-detail { margin: 0.15rem 0 0; font-size: 0.68rem; color: var(--slate); line-height: 1.4; }
.payplan-basis-detail--warn { color: #a05a2c; }

/* One field per row (single column) so the [input | rec | reset] line has the
   full card width and the rec hint never overflows. */
.payplan-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
}
.payplan-f { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.72rem; color: var(--slate); }
/* Label line: name + tooltip on the left, recommended-range hint on the right.
   Keeping the rec here (not next to the input) lets every input span the full
   width so the boxes + their right edges line up across all fields. */
.payplan-f-label { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.payplan-f-name { display: inline-flex; align-items: center; gap: 0.3rem; min-width: 0; }
.payplan-f em {
    font-style: normal;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--gold, #c79a3a);
    border: 1px solid currentColor;
    border-radius: 3px;
    padding: 0 0.2rem;
}
.payplan-rec { flex: none; font-size: 0.62rem; color: var(--sage, #6a8f7a); font-weight: 600; white-space: nowrap; }
.payplan-f-row { display: flex; align-items: center; gap: 0.4rem; }
.payplan-f-row input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    text-align: right;
}
.payplan-f-row input:focus { outline: none; border-color: var(--river); }
.payplan-reset {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--slate);
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
}
.payplan-reset:hover { border-color: var(--river); color: var(--river); }

/* CSS-only tooltip glyph (ported from the financing prototype's .fin-tip). */
.payplan-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--river, #3a6ea5);
    cursor: help;
    opacity: 0.7;
}
.payplan-tip:hover { opacity: 1; }
.payplan-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 230px;
    background: var(--ink, #1b2d50);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(27, 35, 49, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s, transform 0.12s;
    z-index: 50;
    pointer-events: none;
}
.payplan-tip:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* Per-plan summary chips - one card per offered plan, colour-coded. */
.payplan-summary { margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.payplan-sum {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 3px solid var(--c, var(--river));
    border-radius: 8px;
}
.payplan-sum-name {
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c, var(--ink));
}
.payplan-sum-detail { font-size: 0.76rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.payplan-sum-note { margin: 0.2rem 0 0; font-size: 0.72rem; font-style: italic; color: var(--slate); }

/* Collapsible modeler cards under each package config (planner only). */
.payplan-viz-stack { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.payplan-viz {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--shell, #faf9f6);
}
.payplan-viz > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.5rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.payplan-viz > summary::-webkit-details-marker { display: none; }
.payplan-viz > summary::before {
    content: '▸';
    font-size: 0.7rem;
    color: var(--slate);
    transition: transform 0.12s;
}
.payplan-viz[open] > summary::before { transform: rotate(90deg); }
.payplan-viz-body { padding: 0 0.7rem 0.75rem; }
.payplan-viz-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.payplan-viz-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.payplan-viz-chart { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 0.6rem 0.6rem 0.4rem; }
.payplan-viz-cross {
    margin: 0.6rem 0 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: #8a6418;
    background: rgba(199, 154, 58, 0.1);
    padding: 0.5rem 0.65rem;
    border-radius: 7px;
    line-height: 1.5;
}

.proposal-overview-block p {
    color: var(--slate);
    margin-bottom: 1rem;
    max-width: 640px;
}

.proposal-overview-block p:last-child {
    margin-bottom: 0;
}

/* Service cards in proposals */
.proposal-services {
    display: grid;
    gap: 1.5rem;
}

.proposal-service-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid rgba(27, 35, 49, 0.1);
    box-shadow: 0 8px 24px rgba(27, 35, 49, 0.06);
}

.proposal-service-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.proposal-service-emoji {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.proposal-service-header h3 {
    margin-bottom: 0.3rem;
}

.proposal-service-summary {
    color: var(--slate);
    font-size: 1rem;
}

.proposal-service-features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 1rem;
}

.proposal-service-features li::before {
    content: "\2192";
    margin-right: 0.5rem;
    color: var(--sage);
}

/* Scope & Investment - project service cards */
.proposal-project-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

/* Service group labels within the unified grid */
.proposal-service-group-label {
    grid-column: 1 / -1;
    margin-top: 1rem;
}
.proposal-service-group-label:first-child {
    margin-top: 0;
}
.proposal-service-group-label h3 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink);
    margin-bottom: 0.25rem;
}
.proposal-service-group-label p {
    font-size: 1rem;
    color: var(--slate);
}

.proposal-project-card[data-service-id="website-build"] {
    grid-column: 1 / -1;
}

.proposal-project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    padding: 1.75rem;
    border: 2px solid rgba(46, 92, 138, 0.25);
    box-shadow: 0 8px 24px rgba(27, 35, 49, 0.06);
    transition: opacity 0.2s, border-color 0.2s, border-style 0s;
}

/* Fee-type badges */
.proposal-fee-badges {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.proposal-fee-badge {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    line-height: 1.4;
}
.proposal-fee-badge--setup {
    background: rgba(46, 92, 138, 0.08);
    color: var(--river);
}
.proposal-fee-badge--monthly {
    background: rgba(106, 143, 122, 0.1);
    color: var(--sage);
}

/* Split pricing footer - pinned to bottom */
.proposal-project-card-pricing {
    display: flex;
    gap: 0;
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}
.proposal-price-lane {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.proposal-price-lane + .proposal-price-lane {
    border-left: 1px solid var(--line);
    padding-left: 1rem;
}
.proposal-price-lane-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
}
.proposal-price-lane-amount {
    font-size: 1.35rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: var(--ink);
}
.proposal-price-lane-amount .per {
    font-size: 1rem;
    font-weight: 500;
    color: var(--slate);
}

.proposal-project-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--river);
    background: var(--river);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.proposal-project-card.is-dismissed .proposal-project-check {
    border-color: var(--slate);
    background: rgba(255, 255, 255, 0.9);
    color: transparent;
}

.proposal-project-card-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    /* Reserve space for the absolute-positioned .proposal-project-check
       (22px + 1rem right inset) so the planner pill group doesn't slide
       under it. */
    padding-right: calc(22px + 1rem + 0.5rem);
    flex-wrap: wrap;
    min-width: 0;
}
.proposal-project-card-header .lens-pkg-pill-group--planner {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}

.proposal-project-card-emoji {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.proposal-project-card-name {
    margin-bottom: 0.3rem;
}
.proposal-card-service-link {
    display: inline-flex;
    margin-left: 0.4rem;
    color: var(--slate);
    opacity: 0.35;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.proposal-card-service-link:hover { opacity: 1; color: var(--river); }

.proposal-project-card-summary {
    color: var(--slate);
    font-size: 1rem;
}

.proposal-paired-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    margin: 0.85rem 0 0.25rem;
    background: linear-gradient(135deg, rgba(46,92,138,0.08), rgba(31,54,80,0.06));
    border: 1px solid rgba(46,92,138,0.25);
    border-radius: 10px;
}
.proposal-paired-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--river, #2e5c8a);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
}
.proposal-paired-link-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.35;
}
.proposal-paired-link-text strong {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--river, #2e5c8a);
    letter-spacing: 0.02em;
}
.proposal-paired-link-text > span {
    font-size: 0.75rem;
    color: var(--slate);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.proposal-paired-link-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--river, #2e5c8a);
    background: #fff;
    border: 1px solid rgba(46,92,138,0.35);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.proposal-paired-link-chip:hover {
    background: var(--river, #2e5c8a);
    color: #fff;
    border-color: var(--river, #2e5c8a);
}

.proposal-service-context {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0.85rem 0 0.25rem;
    padding: 1rem 1.1rem;
    background: var(--ink, #1a1a1a);
    color: #fff;
    border-radius: var(--radius-sm, 14px);
    overflow: hidden;
    isolation: isolate;
}
.proposal-service-context::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0) 60%);
    pointer-events: none;
    z-index: -1;
}
.proposal-service-context-body {
    flex: 1;
    min-width: 0;
}
.proposal-service-context-eyebrow {
    display: inline-block;
    font-family: var(--font-title, inherit);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold, #d4a85a);
    margin-bottom: 0.4rem;
}
.proposal-service-context-note {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #fff;
}
.proposal-service-context-logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: rgba(255,255,255,0.92);
    border-radius: 8px;
    padding: 6px;
    order: 2;
    align-self: flex-start;
}
@media (max-width: 480px) {
    .proposal-service-context {
        padding: 0.85rem;
        gap: 0.75rem;
    }
    .proposal-service-context-logo {
        width: 44px;
        height: 44px;
    }
}

.proposal-project-card-features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 1rem;
}

.proposal-linked-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--river);
    margin-top: 0.75rem;
    padding: 0.4rem 0.75rem;
    background: rgba(46, 92, 138, 0.06);
    border-radius: 8px;
    width: fit-content;
}

.proposal-project-card-features li::before {
    content: "\2713";
    margin-right: 0.5rem;
    color: var(--sage);
    font-weight: 700;
}

/* Option picker pills */
.proposal-project-card-options {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.proposal-pkg-option-picker {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.proposal-pkg-option-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(27, 35, 49, 0.03);
    color: var(--slate);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.proposal-pkg-option-pill:hover {
    background: rgba(27, 35, 49, 0.08);
    color: var(--ink);
}

.proposal-pkg-option-pill.is-active {
    background: var(--river);
    color: #fff;
    border-color: var(--river);
}

.proposal-pkg-option-pill-price {
    opacity: 0.7;
    font-weight: 500;
}

.proposal-pkg-option-pill-monthly {
    font-size: 1em;
    opacity: 0.8;
}

/* Per-tier ad spend hint on recurring service tier pills. Shows up to
   $X/mo so the admin sees the spend cap for each tier without selecting it. */
.proposal-pkg-option-pill-adspend {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.75;
    font-style: italic;
}

.proposal-pkg-option-pill.is-active .proposal-pkg-option-pill-price {
    opacity: 0.85;
}
.proposal-pkg-option-pill.is-active .proposal-pkg-option-pill-adspend {
    opacity: 0.9;
}

.proposal-pkg-option-rec {
    color: var(--gold);
    font-weight: 700;
}

/* Absorbed service features (linked services merged into parent card) */
.proposal-absorbed-features {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}
.proposal-absorbed-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.proposal-absorbed-summary {
    font-size: 1rem;
    color: var(--slate);
    margin-bottom: 0.75rem;
}

.proposal-pkg-option-pill.is-active .proposal-pkg-option-rec {
    color: rgba(255, 255, 255, 0.8);
}

/* Option detail panel */
.proposal-pkg-option-detail {
    animation: fadeIn 0.25s ease;
}

.proposal-pkg-option-desc {
    color: var(--slate);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.proposal-pkg-option-features {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

.proposal-pkg-option-features li::before {
    content: "\2713";
    margin-right: 0.5rem;
    color: var(--sage);
    font-weight: 700;
}

/* Pricing line items */
.proposal-pkg-option-price {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
}

.proposal-pkg-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.proposal-pkg-line-name {
    font-size: 1rem;
    color: var(--slate);
}

.proposal-pkg-line-amount {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--font-title);
}

.proposal-pkg-line.monthly .proposal-pkg-line-amount {
    color: var(--ink);
}

.proposal-pkg-upgrade-note {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--slate);
    font-style: italic;
}

.proposal-stack-callout {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--river);
    background: rgba(46, 92, 138, 0.04);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 1rem;
    color: var(--slate);
}

.proposal-stack-callout a {
    color: var(--river);
    font-weight: 600;
}

.proposal-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.proposal-approach-item {
    padding: 1.5rem;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.proposal-approach-item h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.proposal-approach-item p {
    font-size: 0.9rem;
    color: var(--slate);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 640px) {
    .proposal-approach-grid { grid-template-columns: 1fr; }
}

.proposal-content-notes {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.proposal-content-note {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--shell);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.proposal-content-note-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
}
.proposal-content-note strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1rem;
}
.proposal-content-note p {
    font-size: 0.9rem;
    color: var(--slate);
    line-height: 1.55;
    margin: 0;
}

/* ── Block library wireframe grid ─────────────────────────────────────
   Shared by /services/headless/content-editing-workflow/ and the
   proposal sendable's editing-approach section. Source data lives at
   src/_data/blockLibrary.json. 200x130 SVG coordinate space. */
.block-library-wrap {
    margin: 1.75rem 0 0.5rem;
}
.block-library-lead {
    margin: 0 0 1.25rem;
    color: var(--slate);
    line-height: 1.6;
    max-width: 720px;
}
.block-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}
@media (max-width: 900px) {
    .block-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .block-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Carousel mode: horizontal scroll, fixed tile width. Used in the
   proposal sendable to keep the block library visible but compact. */
.block-carousel {
    position: relative;
    margin-top: 0.25rem;
}
.block-grid--carousel {
    display: flex;
    grid-template-columns: none;
    gap: 0.85rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0.25rem 0.25rem 1rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
.block-grid--carousel::-webkit-scrollbar {
    height: 8px;
}
.block-grid--carousel::-webkit-scrollbar-track {
    background: transparent;
}
.block-grid--carousel::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 999px;
}
.block-grid--carousel .block-tile {
    flex: 0 0 200px;
    scroll-snap-align: start;
}
@media (max-width: 600px) {
    .block-grid--carousel .block-tile { flex-basis: 160px; }
}
.block-carousel-arrow {
    position: absolute;
    top: calc(50% - 24px);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.block-carousel-arrow:hover {
    transform: translateY(-50%) scale(1.05);
}
.block-carousel-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}
.block-carousel-arrow--left { left: -8px; }
.block-carousel-arrow--right { right: -8px; }
@media (max-width: 600px) {
    .block-carousel-arrow { display: none; }
}
.block-tile {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.block-thumb {
    aspect-ratio: 200 / 130;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.block-tile:hover .block-thumb {
    border-color: var(--sage);
    transform: translateY(-2px);
}
.block-thumb svg {
    width: 100%;
    height: 100%;
    display: block;
}
.block-label {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    text-align: center;
    line-height: 1.3;
}
.block-tile-plus .block-thumb-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--sage) 8%, #fff);
    border-style: dashed;
    border-color: color-mix(in oklab, var(--sage) 50%, var(--line));
    color: color-mix(in oklab, var(--sage) 75%, var(--slate));
    font: 800 2.6rem/1 var(--font-title);
    aspect-ratio: 200 / 130;
    border-radius: 10px;
    border-width: 1px;
    border-style: dashed;
}
/* Wireframe SVG color classes - shared between the headless page and the
   sendable. Hard-coded greys/sage to render identically in either context. */
.block-thumb .bs-bg { fill: #ffffff; stroke: rgba(27, 35, 49, 0.12); stroke-width: 0.6; }
.block-thumb .bs-card { fill: #eef1f6; stroke: none; }
.block-thumb .bs-card-accent { fill: #b9c8da; stroke: none; }
.block-thumb .bs-line { fill: #c9cdd4; }
.block-thumb .bs-line-strong { fill: #8b929d; }
.block-thumb .bs-accent { fill: #6b8c5f; }
.block-thumb .bs-accent-soft { fill: #b8c8af; }
.block-thumb .bs-grid { stroke: rgba(27, 35, 49, 0.18); stroke-width: 0.5; fill: none; }
.block-thumb .bs-quote {
    font: 800 28px/1 'Plus Jakarta Sans', sans-serif;
    fill: #6b8c5f;
}
.block-thumb .bs-quote-lg {
    font: 800 44px/1 'Plus Jakarta Sans', sans-serif;
    fill: #6b8c5f;
}

/* ── After launch: required banner + 2-up choice ──────────────────────
   Hosting & Management is required (top banner card). Flex Support and
   on-demand hourly are the actual choice (2-up below). No full-width
   color stripe - everything lives on white. */
.after-launch-required-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    align-items: start;
}
@media (max-width: 760px) {
    .after-launch-required-card {
        grid-template-columns: 1fr;
    }
}
.after-launch-required-card .after-launch-emoji {
    font-size: 2.2rem;
    line-height: 1;
}
.after-launch-required-card .after-launch-card-headline h3 {
    margin: 0 0 0.4rem;
    font-family: var(--font-title);
    font-size: 1.25rem;
}
.after-launch-required-card .after-launch-card-lead {
    margin: 0 0 1rem;
    color: var(--slate);
    line-height: 1.6;
}
.after-launch-required-body {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 2rem;
}
@media (max-width: 760px) {
    .after-launch-required-body {
        grid-column: 1;
        grid-template-columns: 1fr;
    }
}
.after-launch-choice-label {
    font-family: var(--font-title);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
    margin: 0.5rem 0 0.85rem;
}
.after-launch-choice-label .after-launch-choice-label-plus {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-right: 0.5rem;
    letter-spacing: 0.06em;
}
.after-launch-flex-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.75rem;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.after-launch-card-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.5rem;
}
.after-launch-card-header .after-launch-emoji {
    font-size: 2.2rem;
    line-height: 1;
}
.after-launch-card-header h3 {
    margin: 0 0 0.4rem;
    font-family: var(--font-title);
    font-size: 1.25rem;
}
.after-launch-card-header .after-launch-card-lead {
    margin: 0;
    color: var(--slate);
    line-height: 1.6;
}
.after-launch-list--inline {
    columns: 2;
    column-gap: 2rem;
    margin-bottom: 1rem;
}
@media (max-width: 600px) {
    .after-launch-list--inline {
        columns: 1;
    }
}
.after-launch-modes-label {
    margin-top: 0.5rem;
}
.after-launch-modes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}
@media (max-width: 720px) {
    .after-launch-modes-grid {
        grid-template-columns: 1fr;
    }
}
.after-launch-mode {
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.after-launch-mode--retainer {
    border-color: var(--sage);
    box-shadow: 0 0 0 1px var(--sage) inset;
}
.after-launch-mode-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.1rem;
}
.after-launch-mode-head h4 {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.05rem;
}
.after-launch-mode-rate {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
}
.after-launch-mode-rate strong {
    font-size: 1.15rem;
}
.after-launch-mode-rate-note {
    color: var(--slate);
    font-size: 0.85rem;
    margin-left: 0.35rem;
}
.after-launch-list--mode {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.55;
}
.after-launch-list--mode li {
    margin-bottom: 0.2rem;
}
.after-launch-mode-pick {
    margin: 0.3rem 0 0;
    color: var(--slate);
    font-size: 0.88rem;
    font-style: italic;
    line-height: 1.55;
}
.after-launch-tag--retainer {
    background: rgba(106, 143, 122, 0.15);
    color: var(--sage);
}
.after-launch-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.after-launch-tag--required {
    background: #f0f4f8;
    color: var(--ink);
}
.after-launch-tag--optional {
    background: rgba(106, 143, 122, 0.15);
    color: var(--sage);
}
.after-launch-tag--marketing {
    background: rgba(46, 92, 138, 0.12);
    color: var(--river);
}
.after-launch-required-card--marketing {
    border-left: 3px solid var(--river);
}
.after-launch-tag--paygo {
    background: rgba(212, 168, 83, 0.18);
    color: #8a6a2a;
}
.after-launch-card-lead {
    margin: 0;
    color: var(--slate);
    font-size: 0.93rem;
    line-height: 1.55;
}
.after-launch-section-label {
    font-family: var(--font-title);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
    margin-top: 0.4rem;
}
.after-launch-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.55;
}
.after-launch-list li {
    margin-bottom: 0.25rem;
}
.after-launch-list-prose {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.55;
}
.after-launch-list-prose strong {
    color: var(--ink);
}
.after-launch-footnote {
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
}
.after-launch-footnote p {
    margin: 0;
    color: var(--slate);
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ── Proposal FAQ ──────────────────────────────────────────────────────
   Random-access companion to the proposal body. Collapsed accordion;
   each answer links back up to the section with the full detail. */
.proposal-faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.proposal-faq--grouped {
    gap: 2rem;
}
.proposal-faq-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.proposal-faq-group-title {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.proposal-faq-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.proposal-faq-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.proposal-faq-item[open] {
    border-color: var(--sage);
}
.proposal-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-title);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
}
.proposal-faq-q::-webkit-details-marker {
    display: none;
}
.proposal-faq-chevron {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--line, #e2e2e2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slate);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.proposal-faq-q:hover .proposal-faq-chevron {
    background: var(--river, #2e5c8a);
    color: #fff;
    border-color: var(--river, #2e5c8a);
}
.proposal-faq-item[open] .proposal-faq-chevron .toggle-chevron {
    transform: rotate(180deg);
}
.proposal-faq-a {
    padding: 0 1.25rem 1.15rem;
}
.proposal-faq-a p {
    margin: 0;
    color: var(--slate);
    line-height: 1.6;
    font-size: 0.95rem;
}
.proposal-faq-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--river);
    text-decoration: none;
}
.proposal-faq-link:hover {
    text-decoration: underline;
}

/* ── Fathom call moments ──────────────────────────────────────────────── */
/* Inline chips deep-linking to a moment in a recorded discovery/review call.
   Shared by the planner and the client sendable; the modal below gives the
   quote + context before sending the reader to Fathom. */
.fathom-moment-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
}
/* The row label and chip both adapt to their surroundings via currentColor -
   light on the dark plan card, dark on the light FAQ - and stay deliberately
   low-contrast: the chip is a bonus, it should not compete with the card. */
.fathom-moment-row-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.7;
}
.fathom-moment {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    padding: 0.26rem 0.62rem 0.26rem 0.52rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: inherit;
    background: color-mix(in srgb, currentColor 8%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    cursor: pointer;
    scroll-margin-top: 140px;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.fathom-moment:hover {
    background: color-mix(in srgb, currentColor 15%, transparent);
    border-color: color-mix(in srgb, currentColor 38%, transparent);
}
.fathom-moment:active { transform: translateY(1px); }
.fathom-moment:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.fathom-moment-icon { flex: none; opacity: 0.7; }
.fathom-moment-label { white-space: nowrap; }
.fathom-moment-link-icon { flex: none; opacity: 0.5; margin-left: 0.15rem; transition: opacity 0.15s ease, transform 0.15s ease; }
.fathom-moment:hover .fathom-moment-link-icon { opacity: 1; transform: translateX(2px); }

/* Shared modal - quote + call context before opening Fathom. */
.fathom-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.fathom-modal[hidden] { display: none; }
.fathom-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 28, 38, 0.55);
    backdrop-filter: blur(2px);
}
.fathom-modal-card {
    position: relative;
    width: min(34rem, 100%);
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(20, 28, 38, 0.3);
    animation: fadeIn 0.18s ease;
}
.fathom-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    display: flex;
    padding: 0.35rem;
    color: var(--slate);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.fathom-modal-close:hover { background: var(--mist); color: var(--ink); }
.fathom-modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--river);
}
.fathom-modal-quote {
    margin: 0.85rem 0 0;
    padding: 0;
    border: none;
    font-family: var(--font-title);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--ink);
}
.fathom-modal-quote::before { content: '\201C'; }
.fathom-modal-quote::after { content: '\201D'; }
.fathom-modal-attr {
    margin: 0.7rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate);
}
.fathom-modal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.2rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
    background: var(--river);
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.fathom-modal-link:hover { background: var(--ink); }
.fathom-modal-link[hidden] { display: none; }
.fathom-modal-meta {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--slate);
    font-variant-numeric: tabular-nums;
}
.fathom-modal-note {
    margin: 1rem 0 0;
    padding: 0.7rem 0.85rem;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ink);
    background: color-mix(in srgb, var(--gold) 13%, #fff);
    border: 1px solid color-mix(in srgb, var(--gold) 32%, #fff);
    border-radius: var(--radius-sm);
}

/* Planner-only directory of every call moment, with anchor jumps to chips. */
.planner-moment-index {
    max-width: min(var(--max-width), calc(100% - 2rem));
    margin: 1.5rem auto;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.planner-moment-index > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding: 0.9rem 1.2rem;
    font-size: 0.92rem;
    cursor: pointer;
    list-style: none;
}
.planner-moment-index > summary::-webkit-details-marker { display: none; }
.planner-moment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: var(--river);
    border-radius: 999px;
}
.planner-moment-hint {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--slate);
}
.planner-moment-index-body {
    display: grid;
    gap: 1.2rem;
    padding: 0.3rem 1.2rem 1.2rem;
}
.planner-moment-grouphead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.7rem;
    margin-bottom: 0.55rem;
}
.planner-moment-group h4 {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
}
.planner-moment-group ul {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.planner-moment {
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.planner-moment--unplaced {
    border-style: dashed;
    border-color: var(--gold);
}
.planner-moment-jump {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--river);
    text-decoration: none;
}
.planner-moment-jump:hover .planner-moment-where { text-decoration: underline; }
.planner-moment-time {
    flex: none;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--slate);
}
.planner-moment-quote {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--ink);
}
.planner-moment-meta {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--slate);
}
.planner-moment-meta a { color: var(--river); }
.planner-moment-grouphead a {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--river);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Approach formula infographic */
/* Approach animation */
.proposal-approach-anim {
    max-width: 860px;
    margin: 2.5rem auto 2.5rem;
}

.proposal-approach-anim svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Approach tabs */
.proposal-approach-tabs {
    max-width: 640px;
}

.proposal-tab-list {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--line);
}

.proposal-tab {
    padding: 0.65rem 1.25rem;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.proposal-tab:hover {
    color: var(--ink);
}

.proposal-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

.proposal-tab-panel {
    display: none;
    padding: 1.25rem 0;
}

.proposal-tab-panel.is-active {
    display: block;
}

.proposal-tab-panel p {
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.7;
    margin: 0;
}

@media (max-width: 680px) {
    .proposal-tab {
        padding: 0.55rem 0.85rem;
        font-size: 1rem;
    }
}

/* Working with us stats */
.proposal-working-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.proposal-working-stat {
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.proposal-working-stat-value {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    font-family: var(--font-title);
    color: var(--ink);
    line-height: 1;
    margin-bottom: 0.35rem;
}

.proposal-working-stat-label {
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate);
    font-weight: 600;
}

@media (max-width: 640px) {
    .proposal-working-stats {
        grid-template-columns: 1fr;
    }
}

/* Pricing table */
.proposal-pricing {
    margin-bottom: 2rem;
}

.proposal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.proposal-table th {
    text-align: left;
    padding: 0.8rem 1rem;
    border-bottom: 2px solid var(--ink);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
}

.proposal-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.proposal-table .text-right {
    text-align: right;
}

.proposal-table-divider td {
    border-top: 2px solid var(--line);
}

.proposal-table tfoot td {
    border-bottom: none;
    border-top: 2px solid var(--ink);
    padding-top: 1rem;
    font-size: 1.1rem;
}

.proposal-badge {
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.proposal-badge.onetime {
    background: rgba(106, 143, 122, 0.12);
    color: var(--sage);
}

.proposal-badge.monthly {
    background: rgba(46, 92, 138, 0.1);
    color: var(--river);
}


/* Proposed Navigation tree */
.proposal-nav-tree {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.proposal-nav-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1rem;
}
.proposal-nav-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.proposal-nav-top .lens-pkg-pill-group--planner {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
}
.proposal-nav-label {
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
}
.proposal-nav-count {
    background: var(--mist);
    color: var(--slate);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
}
.proposal-nav-note {
    font-size: 0.78rem;
    color: var(--slate);
    font-style: italic;
    margin: 0.25rem 0 0;
}
.proposal-nav-child-note {
    font-size: 0.72rem;
    color: var(--slate);
    font-style: italic;
    margin: 0;
    padding-left: 0.9rem;
    width: 100%;
}
.proposal-nav-children {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.proposal-nav-children li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.4rem;
}
.proposal-nav-children li::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--river);
    flex-shrink: 0;
    margin-top: 0.45em;
}
.proposal-nav-child-label {
    font-size: 0.85rem;
    color: var(--ink);
}

/* Architecture intro — copy + map side by side */
.proposal-architecture-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-bottom: 2.5rem;
}

.proposal-architecture-copy h3 {
    font-size: 1.25rem;
    margin: 0 0 0.5rem;
    color: var(--ink);
}

.proposal-architecture-copy p {
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

.proposal-architecture-copy .proposal-stats-meta {
    justify-content: flex-start;
    margin-top: 0.5rem;
}

@media (max-width: 640px) {
    .proposal-architecture-copy .proposal-stats-meta {
        justify-content: center;
    }
}

.proposal-architecture-map {
    max-width: 100%;
    overflow: visible;
}

.proposal-architecture-map .proposal-content-map {
    overflow: visible;
}

@media (max-width: 768px) {
    .proposal-architecture-intro {
        grid-template-columns: 1fr;
    }
}

/* Total pages summary */
.proposal-stats-summary {
    text-align: center;
    margin-bottom: 2rem;
}

.proposal-stats-total-value {
    display: block;
    font-size: 4rem;
    font-weight: 800;
    font-family: var(--font-title);
    color: var(--ink);
    line-height: 1;
}

.proposal-stats-total-label {
    display: block;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
    font-weight: 700;
    margin-top: 0.25rem;
}

.proposal-stats-total-cost {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: var(--sage);
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.proposal-stats-total-desc {
    font-size: 1rem;
    color: var(--slate);
    opacity: 0.7;
    margin-top: 0.5rem;
}

.proposal-stats-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.proposal-stats-meta-pill {
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    background: rgba(27, 35, 49, 0.06);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
}

/* Filter section */
.proposal-filter-section {
    margin-bottom: 2rem;
}

.proposal-filter-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.proposal-filter-title {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
}

.proposal-filter-clear {
    font-size: 1rem;
    font-weight: 500;
    color: var(--river);
    margin-left: auto;
}

.proposal-filter-toggle {
    font-size: 1rem;
    color: var(--slate);
    transition: color 0.2s ease;
}

.proposal-filter-toggle:hover {
    color: var(--river);
}

/* Stat cards (shared) */
.proposal-sitemap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: rgba(27, 35, 49, 0.08);
    border-radius: var(--radius);
    overflow: hidden;
}

.proposal-stat {
    flex: 1 1 0;
    min-width: 120px;
    background: rgba(255, 255, 255, 0.85);
    padding: 1.2rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.proposal-stat-value {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: var(--font-title);
    color: var(--ink);
    line-height: 1.2;
}

.proposal-stat-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    font-weight: 600;
}

.proposal-stat-desc {
    font-size: 1rem;
    color: var(--slate);
    opacity: 0.7;
    line-height: 1.35;
    margin-top: 0.15rem;
}

/* Filter buttons */
.proposal-stat-filter {
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.proposal-stat-filter:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: inset 0 -3px 0 var(--sage);
}

.proposal-stat-filter.active {
    background: var(--ink);
    box-shadow: none;
}

.proposal-stat-filter.active .proposal-stat-value {
    color: #fff;
}

.proposal-stat-filter.active .proposal-stat-label {
    color: rgba(255, 255, 255, 0.95);
}

.proposal-stat-filter.active .proposal-stat-desc {
    color: rgba(255, 255, 255, 0.65);
}

.proposal-stat-cost {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sage);
    margin-top: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.proposal-stat-filter.active .proposal-stat-cost {
    color: rgba(255, 255, 255, 0.85);
}

/* View toggle */
.proposal-view-toggle {
    display: flex;
    gap: 0.25rem;
    background: var(--mist);
    border-radius: 10px;
    padding: 0.2rem;
    width: fit-content;
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
}

.proposal-view-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.proposal-view-btn:hover {
    color: var(--ink);
}

.proposal-view-btn.is-active {
    background: white;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Spreadsheet table view */
.proposal-sitemap-table-wrap {
    margin-top: 1.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.proposal-sitemap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
}

.proposal-sitemap-table thead {
    background: rgba(15, 23, 42, 0.03);
    position: sticky;
    top: 0;
    z-index: 1;
}

.proposal-sitemap-table th {
    padding: 0.65rem 1rem;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.proposal-sitemap-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    vertical-align: middle;
}

.proposal-sitemap-table tbody tr:hover {
    background: rgba(15, 23, 42, 0.015);
}

.sitemap-table-page {
    font-weight: 500;
    color: var(--ink);
}

.sitemap-table-ct {
    display: inline-block;
    padding-left: 0.5rem;
    font-size: 1rem;
    color: var(--slate);
}

.sitemap-table-url {
    color: var(--river);
    text-decoration: none;
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.sitemap-table-url:hover {
    opacity: 1;
    text-decoration: underline;
}

.sitemap-table-empty {
    color: var(--line);
}

.sitemap-table-count-row td {
    font-style: italic;
    color: var(--slate);
    background: rgba(15, 23, 42, 0.015);
}

.proposal-sitemap-table .sitemap-source-badge {
    font-size: 1rem;
}

/* Table tabs */
.sitemap-table-tabs {
    display: flex;
    border-bottom: 1px solid var(--line);
    padding: 0 0.5rem;
    background: rgba(15, 23, 42, 0.02);
}

.sitemap-table-tab {
    padding: 0.6rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.sitemap-table-tab:hover {
    color: var(--ink);
}

.sitemap-table-tab.is-active {
    color: var(--ink);
    border-bottom-color: var(--ink);
}

/* Content Types tab */
.sitemap-table-ct-row {
    cursor: pointer;
}

.sitemap-table-ct-row:hover {
    background: rgba(15, 23, 42, 0.025);
}

.sitemap-table-ct-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sitemap-table-color {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.sitemap-table-expand-icon {
    opacity: 0.4;
    transition: transform 0.2s, opacity 0.15s;
}

.sitemap-table-ct-row.is-expanded .sitemap-table-expand-icon {
    transform: rotate(180deg);
    opacity: 0.7;
}

.sitemap-table-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 6px;
    background: var(--mist);
    color: var(--ink);
}

.sitemap-table-ct-child td {
    padding-left: 2.5rem;
    background: rgba(15, 23, 42, 0.015);
    font-size: 1rem;
}

.sitemap-table-child-name {
    color: var(--slate);
}
.sitemap-table-link {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    color: var(--slate);
    opacity: 0.4;
    transition: opacity 0.15s;
    vertical-align: middle;
}
.sitemap-table-link:hover {
    opacity: 1;
    color: var(--river);
}

.sitemap-table-th-price,
.sitemap-table-price {
    text-align: right;
    color: var(--slate);
    font-size: 1rem;
}

/* Layouts tab expandable rows */
.sitemap-table-layout-row {
    cursor: pointer;
}

.sitemap-table-layout-row:hover {
    background: rgba(15, 23, 42, 0.025);
}

.sitemap-table-layout-child td {
    padding-left: 2rem;
    background: rgba(15, 23, 42, 0.015);
    font-size: 1rem;
    color: var(--slate);
}

/* Table inline actions */
.sitemap-table-actions {
    white-space: nowrap;
    text-align: right;
    position: relative;
}

.sitemap-table-action {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    width: 26px;
    height: 26px;
    font-size: 1rem;
    color: var(--slate);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

tr:hover .sitemap-table-action {
    opacity: 0.5;
}

.sitemap-table-action:hover {
    opacity: 1 !important;
    border-color: var(--line);
    color: var(--ink);
}

.sitemap-table-action--danger:hover {
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.3);
}

.sitemap-table-edit-input {
    width: 100%;
    border: 1px solid var(--river);
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.15);
}

.sitemap-table-move-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.35rem;
    min-width: 180px;
    max-height: 220px;
    overflow-y: auto;
}

.sitemap-table-move-dropdown .sitemap-move-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Sitemap groups */
.proposal-sitemap-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.proposal-sitemap-groups[hidden] {
    display: none;
    margin-top: 1.5rem;
}

/* Service-grouped sitemap headers. Each header spans the full grid row
   so the CTs that follow read as belonging to that service. The
   "Universal" header gets a slightly different treatment to set it
   apart from real services. */
.proposal-sitemap-service-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin-top: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(27, 35, 49, 0.12);
}

.proposal-sitemap-service-header:first-child {
    margin-top: 0;
}

.proposal-sitemap-service-header-title {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
}

.proposal-sitemap-service-header-sub {
    font-size: 0.78rem;
    color: var(--slate);
    font-style: italic;
}

.proposal-sitemap-service-header--universal .proposal-sitemap-service-header-title {
    color: var(--slate);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.proposal-from-service-badge--alt {
    opacity: 0.65;
}

.proposal-sitemap-group {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    padding: 1.5rem;
    border: 1px solid rgba(27, 35, 49, 0.1);
}

.proposal-sitemap-group h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--ink);
}

.proposal-sitemap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1rem;
}

.proposal-sitemap-list li {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(27, 35, 49, 0.06);
}

.proposal-sitemap-list li:last-child {
    border-bottom: none;
}

.proposal-sitemap-list .sitemap-archive {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    font-weight: 600;
}

.proposal-sitemap-list .sitemap-count-item {
    color: var(--slate);
    font-style: italic;
    border-bottom: none;
}

.sitemap-show-more {
    border-bottom: none;
}

.sitemap-show-more-btn {
    background: none;
    border: none;
    color: var(--river);
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: italic;
    cursor: pointer;
    padding: 0.25rem 0;
    transition: color 0.15s;
}

.sitemap-show-more-btn:hover {
    color: var(--ink);
}

.proposal-sitemap-list .sitemap-parent {
    font-weight: 700;
    padding-top: 0.8rem;
    border-bottom: 1px solid var(--line);
}

.proposal-sitemap-list .sitemap-parent ~ li:not(.sitemap-parent) {
    padding-left: 1.4rem;
}

/* Collapsible sitemap toggle.
   Two-row layout: row 1 has the title and the right-aligned metadata
   cluster (pkg pill, page count, chevron, and JS-appended A/B/C chips).
   Row 2 is the description spanning the full card width — gives the copy
   room to breathe instead of squeezing into a narrow left column. */
.proposal-sitemap-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0 0 0.75rem 0;
    border-bottom: 1px dashed var(--line);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: border-color 0.15s;
}

.proposal-sitemap-toggle-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
}

.proposal-sitemap-toggle-head h3 {
    flex: 1;
    min-width: 0;
}

.proposal-sitemap-toggle-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
    margin-left: auto;
}

.proposal-sitemap-toggle h3 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    border: none;
}
.proposal-sitemap-toggle-desc {
    font-size: 0.85rem;
    color: var(--slate);
    font-weight: 400;
    line-height: 1.55;
    margin: 0.5rem 0 0;
    max-width: none;
}

.proposal-sitemap-count {
    font-size: 1rem;
    color: var(--slate);
    font-weight: 500;
    white-space: nowrap;
}

.proposal-sitemap-toggle-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid var(--line, #e2e2e2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--slate);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.proposal-sitemap-toggle:hover .proposal-sitemap-toggle-icon {
    background: var(--river, #2e5c8a);
    color: #fff;
    border-color: var(--river, #2e5c8a);
}

.proposal-sitemap-group[data-collapsed="false"] .proposal-sitemap-toggle-icon .toggle-chevron {
    transform: rotate(180deg);
}

.proposal-sitemap-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.proposal-sitemap-group[data-collapsed="false"] .proposal-sitemap-body {
    overflow: visible;
}

.proposal-sitemap-body .proposal-sitemap-list {
    margin-top: 0.6rem;
}

.proposal-sitemap-usage {
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.6;
    margin: 0.6rem 0 0.4rem;
    padding: 0 0.6rem;
}

/* Interactive sitemap editor */
.proposal-sitemap-list li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sitemap-page-name {
    flex: 1;
    min-width: 0;
}

.sitemap-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.proposal-sitemap-list li:hover .sitemap-actions {
    opacity: 1;
}

.sitemap-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--slate);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.sitemap-action:hover {
    background: rgba(27, 35, 49, 0.06);
    color: var(--ink);
}

.sitemap-action-remove:hover {
    background: rgba(229, 62, 62, 0.08);
    color: #e53e3e;
}

.sitemap-action-confirm:hover {
    background: rgba(72, 187, 120, 0.1);
    color: #2f855a;
}

.sitemap-action-lock {
    cursor: default;
    opacity: 0.4;
}

.sitemap-action-lock:hover {
    background: transparent;
    color: var(--slate);
}

.sitemap-action--disabled {
    opacity: 0.12;
    cursor: default;
    pointer-events: none;
}

.sitemap-action-undo {
    color: var(--river);
}

.sitemap-action-undo:hover {
    background: rgba(66, 153, 225, 0.1);
    color: var(--river);
}

/* Edit input inline */
.sitemap-edit-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.sitemap-edit-input {
    flex: 1;
    font-family: inherit;
    font-size: 1rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    outline: none;
    background: var(--shell);
    color: var(--ink);
}

.sitemap-edit-input:focus {
    border-color: var(--river);
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.15);
}

/* External page link */
.sitemap-page-link {
    display: inline-flex;
    align-items: center;
    color: var(--slate);
    opacity: 0.4;
    margin-left: 0.25rem;
    transition: opacity 0.15s, color 0.15s;
    flex-shrink: 0;
}

.sitemap-page-link:hover {
    opacity: 1;
    color: var(--river);
}

/* Edited state */
.sitemap-edited .sitemap-page-name {
    color: var(--river);
    font-style: italic;
}

/* Removed state */
.sitemap-removed {
    opacity: 0.35;
    text-decoration: line-through;
    pointer-events: none;
}

.sitemap-removed .sitemap-actions {
    opacity: 1;
    pointer-events: auto;
}

.sitemap-removed .sitemap-action:not(.sitemap-action-undo) {
    display: none;
}

/* Added state */
.sitemap-added .sitemap-page-name {
    color: #2f855a;
}

.sitemap-added::before {
    content: "+";
    color: #2f855a;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 0.3rem;
}

/* Sitemap inline action buttons */
.sitemap-add-page,
.sitemap-merge-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--slate);
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s;
}

.sitemap-add-page:hover,
.sitemap-merge-btn:hover {
    opacity: 1;
}

.sitemap-add-page svg,
.sitemap-merge-btn svg {
    width: 13px;
    height: 13px;
}

/* Add content type bar */
.sitemap-add-ct-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.sitemap-add-ct-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    background: white;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sitemap-add-ct-btn:hover {
    border-color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sitemap-show-empty-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    color: var(--slate);
    cursor: pointer;
    margin-left: auto;
}

.sitemap-show-empty-toggle input {
    accent-color: var(--ink);
}

/* Add CT dropdown / library */
.sitemap-add-ct-dropdown {
    position: absolute;
    z-index: 20;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 0.75rem;
    width: 320px;
    max-height: 380px;
    overflow-y: auto;
}

.sitemap-add-ct-heading {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    padding: 0.25rem 0.5rem 0.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.35rem;
}

.sitemap-add-ct-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.45rem 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.12s;
}

.sitemap-add-ct-option:hover {
    background: var(--mist);
}

.sitemap-add-ct-option-desc {
    font-size: 1rem;
    color: var(--slate);
    margin-left: auto;
}

.sitemap-add-ct-option-service {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--river);
    background: rgba(46, 92, 138, 0.1);
    border-radius: 999px;
    margin-left: 0.5rem;
}

.sitemap-add-ct-option-service--alt {
    color: var(--slate);
    background: rgba(20, 27, 45, 0.06);
    margin-left: 0.25rem;
}

/* Service-grouped dropdown headers — bucket the library by the service
   each CT primarily pairs with, so adding the LMS-style multi-CT system
   reads visually as "these come with LMS". Universal group at the
   bottom for CTs with no service linkage. */
.sitemap-add-ct-group-header {
    padding: 0.6rem 0.65rem 0.3rem;
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink);
    border-top: 1px solid rgba(27, 35, 49, 0.08);
    margin-top: 0.25rem;
}

.sitemap-add-ct-group-header:first-of-type {
    border-top: none;
    margin-top: 0;
}

.sitemap-add-ct-group-header--universal {
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
}

.sitemap-add-ct-group-header--orphan {
    color: #c2410c;
    font-style: italic;
}

/* "From service" badge inside planner CT headers (mirrors the sendable) */
.proposal-from-service-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--river);
    background: rgba(46, 92, 138, 0.1);
    border-radius: 999px;
    vertical-align: middle;
}

/* Soft-link suggestion for unlinked CTs that match a catalog feature.
   Click to persist `requiredService` on the CT. */
.feature-link-suggest {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--river);
    background: rgba(46, 92, 138, 0.06);
    border: 1px dashed var(--river);
    border-radius: 999px;
    vertical-align: middle;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.feature-link-suggest:hover {
    background: var(--river);
    color: #fff;
}

.feature-link-suggest strong { font-weight: 700; }

/* Inline scaffold prompt — appears at top of sitemap section when a paired
   service isn't yet in the proposal */
.feature-pair-prompt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1.1rem;
    background: rgba(46, 92, 138, 0.08);
    border-left: 3px solid var(--river);
    border-radius: 4px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--ink);
}

.feature-pair-prompt strong {
    color: var(--river);
    font-weight: 700;
}

.feature-pair-dismiss {
    background: none;
    border: none;
    color: var(--slate);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
    margin-left: auto;
}

.feature-pair-dismiss:hover {
    color: var(--ink);
}

/* Templates are scaffolding (no URL, no real page) — hide from sitemap
   listings entirely. They surface in the Layouts tab grouped by type. */
.proposal-sitemap-list > li[data-layout-type="Template"],
.proposal-sitemap-table tr[data-layout-type="Template"] {
    display: none;
}

/* Layout scope chips — sit alongside the table tabs and only act on the
   Pages tab. CSS-hidden when the active tab isn't "pages" since the
   filter has no meaning on Content Types or Layouts views. */
.sitemap-table-scope {
    display: inline-flex;
    gap: 0.35rem;
    margin-left: auto;
    align-items: center;
    flex-wrap: wrap;
}
.sitemap-table-scope-chip {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--slate);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sitemap-table-scope-chip:hover {
    border-color: var(--river);
    color: var(--river);
}
.sitemap-table-scope-chip.is-active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.sitemap-table-tabs:has(.sitemap-table-tab[data-tab="content-types"].is-active) .sitemap-table-scope,
.sitemap-table-tabs:has(.sitemap-table-tab[data-tab="layouts"].is-active) .sitemap-table-scope {
    display: none;
}

/* Layout filter hides non-matching rows in the Pages tab table.
   Ghost/dim styling stays reserved for service-card filtering elsewhere —
   on a flat list of pages the dim version still asks the eye to scan past
   them, which the user explicitly didn't want. */
.proposal-sitemap-table-wrap[data-layout-filter] tbody tr[data-layout-type] {
    display: none;
}
.proposal-sitemap-table-wrap[data-layout-filter="Unique Layout"] tbody tr[data-layout-type="Unique Layout"],
.proposal-sitemap-table-wrap[data-layout-filter="First of Its Kind"] tbody tr[data-layout-type="First of Its Kind"],
.proposal-sitemap-table-wrap[data-layout-filter="Template"] tbody tr[data-layout-type="Template"],
.proposal-sitemap-table-wrap[data-layout-filter="Template Instance"] tbody tr[data-layout-type="Template Instance"],
.proposal-sitemap-table-wrap[data-layout-filter="Basic Text"] tbody tr[data-layout-type="Basic Text"] {
    display: table-row;
}

/* Template scaffolding tag — kept for legacy contexts where a template
   row still renders. */
.sitemap-template-tag {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--slate);
    background: var(--mist, #f0f2f5);
    border: 1px dashed var(--line);
    line-height: 1.4;
    white-space: nowrap;
    font-style: italic;
}

/* Live package availability pills rendered by JS on planner CT cards,
   nav items, and service cards so the user can see at a glance which
   packages each item belongs to (without entering edit mode). */
.lens-pkg-pill-group--planner {
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.lens-pkg-pill-group--planner .lens-pkg-pill {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.02em;
}

.lens-pkg-pill-group--planner .lens-pkg-pill--universal { background: var(--sage, #57998e); }
.lens-pkg-pill-group--planner .lens-pkg-pill--a { background: #64748b; }
.lens-pkg-pill-group--planner .lens-pkg-pill--b { background: var(--river, #3b82f6); }
.lens-pkg-pill-group--planner .lens-pkg-pill--c { background: #4ade80; color: #0d3b1f; }
.lens-pkg-pill-group--planner .lens-pkg-pill--d { background: var(--gold, #d97706); }
.lens-pkg-pill-group--planner .lens-pkg-pill--none {
    background: transparent;
    color: var(--slate);
    border: 1px dashed var(--line);
    font-style: italic;
}

/* Bucket badge in the Layout column — shows whether each page is engine-
   priced (Content), service-covered (Infrastructure), or a partial split.
   Helps the author see why a page costs what it does. Renders on its own
   line below the layout name so it's visible at table-row scan height. */
.sitemap-bucket-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1.5;
    cursor: help;
    white-space: nowrap;
}

.sitemap-table .sitemap-bucket-badge,
.proposal-sitemap-table td .sitemap-bucket-badge { display: block; width: max-content; }

.sitemap-bucket-badge--infra {
    background: rgba(46, 92, 138, 0.08);
    color: var(--river);
}

.sitemap-bucket-badge--mixed {
    background: rgba(217, 119, 6, 0.1);
    color: #b45309;
}

.sitemap-bucket-badge--content {
    background: rgba(87, 153, 142, 0.1);
    color: #2f5b54;
}

/* Pricing hide-by-default: pricing engine outputs are hidden until the
   user clicks the pricing toggle. This keeps the planner from looking
   like a quote sheet during scope discussions. */
body.is-pricing-hidden .sitemap-table-price,
body.is-pricing-hidden .sitemap-page-cost,
body.is-pricing-hidden .sitemap-ct-cost,
body.is-pricing-hidden .proposal-stats-total-cost,
body.is-pricing-hidden .proposal-stat-cost,
body.is-pricing-hidden .proposal-stats-meta-pill--cost,
body.is-pricing-hidden .sitemap-summary-cost,
body.is-pricing-hidden .proposal-stats-summary .proposal-stats-total-cost { display: none !important; }
/* Note: the floating pricing engine panel (#pricingPanel) and its trigger
   are NOT controlled by this toggle — they're a separate concern opened
   from the settings menu. The Show/Hide Pricing button only affects
   inline price values in the sitemap and tables. */

/* The pricing toggle button itself — sits next to the Cards/Table view
   toggle in the sitemap section header. */
.sitemap-pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    margin-left: 0.5rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sitemap-pricing-toggle:hover {
    border-color: var(--river);
    color: var(--river);
}

.sitemap-pricing-toggle.is-active {
    background: var(--river);
    border-color: var(--river);
    color: #fff;
}

.sitemap-pricing-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Per-row package pills in the planner's pages table view.
   Lit when the row is in that package, dim otherwise. Click to toggle
   (planner only — service-linked rows show a confirmation prompt). */
.sitemap-table-packages { width: 1%; white-space: nowrap; }

.sitemap-pkg-pills {
    display: inline-flex;
    gap: 0.25rem;
}

.sitemap-pkg-pill {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--slate);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, background 0.15s, border-color 0.15s, color 0.15s;
}

.sitemap-pkg-pill:hover { transform: scale(1.1); border-color: var(--river); }

.sitemap-pkg-pill.is-active { color: #fff; border-color: transparent; }
.sitemap-pkg-pill.is-active[data-pkg-pill="a"] { background: #64748b; }
.sitemap-pkg-pill.is-active[data-pkg-pill="b"] { background: var(--river, #3b82f6); }
.sitemap-pkg-pill.is-active[data-pkg-pill="c"] { background: #4ade80; color: #0d3b1f; }
.sitemap-pkg-pill.is-active[data-pkg-pill="d"] { background: var(--gold, #d97706); }

.sitemap-ct-pkg-pills {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: 0.6rem;
    align-items: center;
    flex-shrink: 0;
}

.sitemap-pkg-pill--ct {
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
}

/* Lens-driven hiding for sitemap, navigation, total page counts.
   Items with class lens-ghostable collapse to a ghost summary instead
   of disappearing. Mirrors the rules in the sendable so the planner can
   preview package edits live. */
body[data-proposal-mode="sendable"][data-lens="a"] [data-pkg-availability]:not([data-pkg-availability~="a"]):not(.lens-ghostable) { display: none !important; }
body[data-proposal-mode="sendable"][data-lens="b"] [data-pkg-availability]:not([data-pkg-availability~="b"]):not(.lens-ghostable) { display: none !important; }
body[data-proposal-mode="sendable"][data-lens="c"] [data-pkg-availability]:not([data-pkg-availability~="c"]):not(.lens-ghostable) { display: none !important; }
body[data-proposal-mode="sendable"][data-lens="d"] [data-pkg-availability]:not([data-pkg-availability~="d"]):not(.lens-ghostable) { display: none !important; }

/* Content-map nodes use lens-ghostable so they fade rather than disappear
   when filtered out — keeps the architecture diagram coherent at a glance. */
body[data-proposal-mode="sendable"][data-lens="a"] .cm-node[data-pkg-availability]:not([data-pkg-availability~="a"]),
body[data-proposal-mode="sendable"][data-lens="b"] .cm-node[data-pkg-availability]:not([data-pkg-availability~="b"]),
body[data-proposal-mode="sendable"][data-lens="c"] .cm-node[data-pkg-availability]:not([data-pkg-availability~="c"]),
body[data-proposal-mode="sendable"][data-lens="d"] .cm-node[data-pkg-availability]:not([data-pkg-availability~="d"]) {
    opacity: 0.18 !important;
    transition: opacity 0.25s ease;
}
body[data-proposal-mode="sendable"][data-lens="a"] .cm-node[data-pkg-availability]:not([data-pkg-availability~="a"]) circle,
body[data-proposal-mode="sendable"][data-lens="b"] .cm-node[data-pkg-availability]:not([data-pkg-availability~="b"]) circle,
body[data-proposal-mode="sendable"][data-lens="c"] .cm-node[data-pkg-availability]:not([data-pkg-availability~="c"]) circle,
body[data-proposal-mode="sendable"][data-lens="d"] .cm-node[data-pkg-availability]:not([data-pkg-availability~="d"]) circle {
    stroke-dasharray: 4 4;
}

/* Edit-mode banner: page-wide sticky bar telling the user which package
   they're editing. Engages the lens on the corresponding package so the
   sitemap below previews the pending edits live. Stays visible even
   when the user scrolls up to services or sitemap. */
.pkg-edit-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 0.7rem 1.25rem;
    background: linear-gradient(90deg, rgba(46, 92, 138, 0.96), rgba(46, 92, 138, 0.85));
    backdrop-filter: blur(6px);
    border: none;
    border-bottom: 1px solid rgba(46, 92, 138, 0.4);
    color: #fff;
    font-size: 0.92rem;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(20, 27, 45, 0.12);
}

.pkg-edit-banner[hidden] { display: none !important; }

.pkg-edit-banner svg {
    color: #fff;
    flex-shrink: 0;
}

.pkg-edit-banner-text { flex: 1; color: rgba(255, 255, 255, 0.95); }
.pkg-edit-banner-pkg { color: #fff; font-weight: 700; }
.pkg-edit-banner-text strong { color: #fff; }

.pkg-edit-banner-done {
    background: #fff;
    border: none;
    color: var(--river);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
}

.pkg-edit-banner-done:hover { background: rgba(255, 255, 255, 0.85); }

/* Body offset while the banner is visible so content isn't hidden under it */
body.has-pkg-edit-banner { padding-top: calc(var(--total-fixed-height, 0px) + 56px); }

/* "Includes pages" panel on each service card in the planner — reverse
   lookup from the contentMap so the dependency direction is visible */
.proposal-service-includes {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    background: rgba(87, 153, 142, 0.06);
    border-left: 3px solid var(--sage, #57998e);
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.proposal-service-includes-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sage, #57998e);
    margin-bottom: 0.4rem;
}

.proposal-service-includes ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--ink);
}

.proposal-service-includes ul li {
    padding: 0.1rem 0;
}

.proposal-service-includes-meta {
    color: var(--slate);
    font-size: 0.78rem;
}

.proposal-rollup-control {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
    font-size: 0.78rem;
    color: var(--slate);
}

.proposal-rollup-control label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.proposal-rollup-control select {
    flex: 1;
    min-width: 160px;
    padding: 0.3rem 0.5rem;
    font-size: 0.82rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-family: inherit;
}

.sitemap-add-ct-custom {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
}

.sitemap-add-ct-custom input {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
}

.sitemap-add-ct-custom input:focus {
    border-color: var(--ink);
}

.sitemap-add-ct-custom button {
    padding: 0.4rem 0.75rem;
    background: var(--ink);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

/* Empty content type card */
.proposal-sitemap-group.sitemap-empty-ct {
    opacity: 0.5;
}

.proposal-sitemap-group.sitemap-empty-ct[hidden] {
    display: none;
}

/* Feed content indicators */
.proposal-feed-badge {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(237, 137, 54, 0.12);
    color: #c05621;
    padding: 2px 8px;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1.4;
}

.proposal-feed-note {
    font-size: 1rem;
    color: #c05621;
    background: rgba(237, 137, 54, 0.06);
    border-left: 3px solid rgba(237, 137, 54, 0.4);
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0.6rem 0;
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

/* Source badges (crawl / recommended / client / ai) */
.sitemap-source-badge {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 7px;
    border-radius: 6px;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1.5;
}

.sitemap-source-badge--recommended {
    background: rgba(106, 143, 122, 0.12);
    color: var(--sage);
}

.sitemap-source-badge--client {
    background: rgba(46, 92, 138, 0.1);
    color: var(--river);
}

.sitemap-source-badge--ai {
    background: rgba(159, 122, 234, 0.12);
    color: #7c5cbf;
}

/* Pricing engine panel */
.pricing-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(720px, 90vw);
    min-width: 400px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -4px 0 20px rgba(0,0,0,0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
.pricing-panel.is-open {
    transform: translateX(0);
}
.pricing-panel-resize {
    position: absolute;
    top: 0;
    left: -3px;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}
.pricing-panel-resize:hover,
.pricing-panel-resize.is-dragging {
    background: var(--river);
    opacity: 0.3;
}
.pricing-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}
.pricing-panel-header h3 {
    margin: 0;
    font-size: 1rem;
}
.pricing-panel-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--slate);
    padding: 0.25rem;
    line-height: 1;
}
.pricing-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}
.pricing-panel-footer {
    border-top: 1px solid var(--line);
    padding: 0.75rem 1.25rem;
    flex-shrink: 0;
    background: var(--mist);
}
.pricing-panel-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pricing-panel-total {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--sage);
}
.pricing-panel-packages {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pricing-panel-pkg {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--slate);
}
.pricing-panel-pkg strong {
    color: var(--ink);
    font-size: 0.85rem;
}
.pricing-panel-invest-link {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--river);
    text-decoration: none;
    padding: 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.pricing-panel-invest-link:hover {
    background: rgba(46, 92, 138, 0.06);
}
.pricing-save-indicator {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.2s;
}
.pricing-save-indicator.is-dirty {
    opacity: 1;
    background: rgba(218, 165, 32, 0.15);
    color: var(--gold);
}
.pricing-save-indicator.is-saving {
    opacity: 1;
    background: rgba(106, 143, 122, 0.1);
    color: var(--slate);
}
.pricing-save-indicator.is-saved {
    opacity: 1;
    background: rgba(106, 143, 122, 0.15);
    color: var(--sage);
}
.pricing-save-indicator.is-error {
    opacity: 1;
    background: rgba(200, 50, 50, 0.12);
    color: #c44;
}

/* Section-visibility rail (planner-only). Fixed to the left edge: a collapsed
   handle that expands into a list of every section with an on/off switch +
   jump link. Toggling a section off makes it physically absent from the
   client sendable. See src/lib/sectionVisibility.ts + ProposalShell. */
.svr {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    font-family: var(--font-body);
}
.svr-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0.7rem 0.45rem;
    background: #fff;
    border: 1px solid var(--line);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow: 2px 2px 14px rgba(0,0,0,0.08);
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.svr-handle:hover { background: var(--mist); color: var(--sage); }
.svr-handle svg { width: 18px; height: 18px; }
.svr-handle-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.svr-handle-count {
    min-width: 16px;
    padding: 1px 4px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}
.svr-panel {
    width: 248px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    box-shadow: 4px 4px 22px rgba(0,0,0,0.12);
}
.svr-panel[hidden] { display: none; }
.svr.is-open .svr-handle {
    border-radius: 0;
    background: var(--mist);
}
.svr-head {
    padding: 0.85rem 0.95rem 0.65rem;
    border-bottom: 1px solid var(--line);
}
.svr-head h3 {
    margin: 0 0 0.25rem;
    font-family: var(--font-title);
    font-size: 0.95rem;
    color: var(--ink);
}
.svr-head p {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--slate);
}
.svr-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem 0.5rem;
}
.svr-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.45rem;
    border-radius: var(--radius-sm);
}
.svr-item:hover { background: var(--mist); }
.svr-jump {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    padding: 0.15rem 0;
}
.svr-jump:hover { color: var(--sage); }
.svr-item.is-off .svr-jump {
    color: var(--slate);
    text-decoration: line-through;
    text-decoration-color: var(--line);
}
.svr-locked {
    display: inline-flex;
    color: var(--slate);
    opacity: 0.55;
}
.svr-locked svg { width: 14px; height: 14px; }
/* Switch: on = sage track + thumb right; off = grey track + thumb left. */
.svr-switch {
    flex-shrink: 0;
    width: 36px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}
.svr-switch-track {
    display: block;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: var(--sage);
    transition: background 0.18s;
    position: relative;
}
.svr-switch-thumb {
    position: absolute;
    top: 2px;
    left: 18px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: left 0.18s;
}
.svr-switch[aria-checked="false"] .svr-switch-track { background: var(--line); }
.svr-switch[aria-checked="false"] .svr-switch-thumb { left: 2px; }
.svr-foot {
    margin: 0;
    padding: 0.6rem 0.95rem 0.85rem;
    border-top: 1px solid var(--line);
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--slate);
}
/* Planner-side cue: a section toggled off is dimmed with a dashed outline so
   Bobby can see at a glance it won't ship. Applied by JS on the live section. */
[data-svr-id].svr-section-off {
    position: relative;
    opacity: 0.5;
    outline: 2px dashed var(--line);
    outline-offset: -8px;
}
@media (max-width: 900px) {
    .svr { display: none; }
}

/* Fixed pricing ticker */
.pricing-ticker {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    background: var(--ink);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-variant-numeric: tabular-nums;
}
.pricing-ticker-label {
    opacity: 0.6;
    font-weight: 500;
}
.pricing-ticker-value {
    color: var(--sage);
    font-size: 1.1rem;
    font-weight: 800;
}
.pricing-section {
    margin-bottom: 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.pricing-section summary {
    padding: 0.6rem 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--shell);
    border-radius: var(--radius-sm);
    user-select: none;
}
.pricing-section[open] summary {
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.pricing-fields {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pricing-fields label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
}
.pricing-fields label span {
    flex-shrink: 0;
    color: var(--ink);
}
.pricing-fields input[type="number"],
.pricing-fields select {
    width: 90px;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.82rem;
    text-align: right;
}
.pricing-fields select {
    width: auto;
    min-width: 140px;
    text-align: left;
}
/* Teammates table */
.pricing-table--teammates td {
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}
.pc-teammate-type {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--slate);
}
.pc-teammate-owner {
    background: rgba(106, 143, 122, 0.05);
}
.pc-teammate-hours { text-align: right; }
.pc-teammate-agency { text-align: right; color: var(--slate); }
.pc-teammate-revenue { text-align: right; }
.pc-teammate-profit { text-align: right; font-weight: 700; color: var(--sage); }
.pc-profit-owner { color: var(--river); }
.pc-teammate-totals {
    background: var(--shell);
    font-weight: 700;
}
.pc-teammate-totals td { border-top: 2px solid var(--ink); }

/* Content Type Mapping expanded */
.pricing-ct-mapping {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pc-ct-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}
.pc-ct-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: var(--shell);
    font-size: 0.82rem;
}
.pc-ct-group-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pc-ct-group-count {
    font-size: 0.7rem;
    color: var(--slate);
    margin-right: auto;
}
.pc-ct-group-header select {
    width: auto;
    min-width: 120px;
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.pc-ct-pages {
    padding: 0.25rem 0;
}
.pc-ct-page-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem 0.2rem 1.4rem;
    font-size: 0.75rem;
}
.pc-ct-page-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
}
.pc-ct-page-layout {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
}
.pc-ct-page-layout--unique {
    background: rgba(27, 45, 80, 0.1);
    color: var(--ink);
}
.pc-ct-page-layout--foik {
    background: rgba(106, 143, 122, 0.15);
    color: var(--sage);
}
.pc-ct-page-layout--ti {
    background: rgba(0, 0, 0, 0.05);
    color: var(--slate);
}
.pc-ct-page-row select {
    width: auto;
    min-width: 100px;
    padding: 0.15rem 0.25rem;
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.pc-ct-instance-row {
    opacity: 0.6;
}
.pc-ct-instance-note {
    font-size: 0.65rem;
    color: var(--slate);
    font-style: italic;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.pricing-table th,
.pricing-table td {
    padding: 0.35rem 0.4rem;
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.pricing-table th {
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--slate);
    background: var(--shell);
}
.pc-role-name {
    display: block;
    font-size: 0.6rem;
    font-weight: 500;
    text-transform: none;
    opacity: 0.7;
    line-height: 1.2;
}
.pricing-table th:first-child,
.pricing-table td:first-child {
    text-align: left;
}
.pricing-table input[type="number"] {
    width: 52px;
    padding: 0.2rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.78rem;
    text-align: center;
}
.pricing-table--compact input[type="number"] {
    width: 42px;
}
.pricing-muted {
    color: var(--slate);
    font-size: 0.75rem;
}
.proposal-settings-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.35rem 0.5rem;
    width: 100%;
}
.proposal-settings-btn svg {
    stroke: rgba(255, 255, 255, 0.85);
}
.proposal-settings-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

/* Sitemap pricing */
.sitemap-ct-cost {
    font-weight: 600;
    color: var(--sage);
}
.sitemap-page-cost {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--slate);
    margin-left: auto;
    padding-left: 0.5rem;
    font-variant-numeric: tabular-nums;
}
.proposal-sitemap-list li {
    display: flex;
    align-items: center;
}
.sitemap-table-price {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--sage);
    font-weight: 600;
    white-space: nowrap;
}
.proposal-stats-meta-pill--cost {
    background: rgba(106, 143, 122, 0.12);
    color: var(--sage);
    font-weight: 700;
}

.sitemap-table-summary {
    background: var(--ink);
    position: sticky;
    top: 0;
    z-index: 2;
}
.sitemap-table-summary th {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.65rem 0.75rem;
    border-bottom: none;
}
.sitemap-table-summary strong {
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
}
.sitemap-table-summary .sitemap-table-price {
    color: rgba(255, 255, 255, 0.85);
}
.sitemap-table-summary .sitemap-table-price strong {
    color: #fff;
}

.sitemap-nav-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 4px;
    background: rgba(27, 45, 80, 0.08);
    color: var(--ink);
    opacity: 0.6;
}

/* Source legend */
.proposal-source-legend {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    font-size: 1rem;
    color: var(--slate);
    margin: 1rem 0 0.5rem;
    flex-wrap: wrap;
}

.proposal-source-legend-title {
    font-weight: 600;
    color: var(--ink);
    margin-right: 0.25rem;
}

.proposal-source-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sitemap-source-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.sitemap-source-dot--crawl {
    background: var(--ink);
    opacity: 0.35;
}

.sitemap-source-dot--recommended {
    background: var(--sage);
}

.sitemap-source-dot--client {
    background: var(--river);
}

.sitemap-source-dot--ai {
    background: #7c5cbf;
}

/* Move / Merge dropdowns */
.sitemap-move-dropdown,
.sitemap-merge-dropdown {
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    margin-top: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
}

.sitemap-move-heading {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    padding: 0.25rem 0.5rem 0.4rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.25rem;
}

.sitemap-move-option {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 1rem;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.15s;
}

.sitemap-move-option:hover {
    background: var(--mist);
}

.sitemap-move-cancel {
    color: var(--slate);
    font-style: italic;
    margin-top: 0.25rem;
    border-top: 1px solid var(--line);
    padding-top: 0.5rem;
}

.sitemap-group-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    margin-top: 0.25rem;
}

/* merge-btn styles consolidated above with sitemap-add-page */

.sitemap-group-merged {
    opacity: 0.35;
    pointer-events: none;
    position: relative;
}

.sitemap-group-merged::after {
    content: 'Merged';
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sage);
    background: rgba(255, 255, 255, 0.85);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

.sitemap-moved {
    animation: sitemap-flash 0.6s ease;
}

@keyframes sitemap-flash {
    0%   { background: rgba(87, 153, 126, 0.2); }
    100% { background: transparent; }
}

/* Content relationship map */
.proposal-content-map {
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius);
    border: 1px solid rgba(27, 35, 49, 0.1);
    margin-top: 1.5rem;
    overflow: visible;
    padding: 0.5rem;
}

.proposal-content-map svg {
    display: block;
}

.proposal-content-map svg text {
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    user-select: none;
}

/* Featured review */
.proposal-review {
    max-width: 860px;
    margin: 0 auto;
    padding: 3rem;
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(70, 120, 200, 0.35), transparent 55%),
      #152648;
    border-radius: var(--radius);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 1px 2px rgba(9, 18, 40, 0.15),
      0 18px 40px rgba(9, 18, 40, 0.18);
    color: #fff;
    text-align: center;
    position: relative;
    isolation: isolate;
}

.proposal-review::before {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 0%, rgba(60, 123, 255, 0.22), transparent 60%);
    filter: blur(32px);
    z-index: -1;
    opacity: 0.55;
    pointer-events: none;
}

.proposal-review-stars {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, 0.25);
}

.proposal-review-star.is-filled {
    color: var(--gold, #d3a468);
}

.proposal-review-quote {
    margin: 0 0 1.75rem;
    font-family: var(--font-body);
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.55;
    color: #fff;
    font-weight: 400;
    font-style: normal;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.proposal-review-mark {
    display: block;
    font-family: var(--font-title);
    font-size: 3rem;
    line-height: 0.6;
    color: rgba(255, 255, 255, 0.18);
    margin-bottom: 0.5rem;
}

.proposal-review-author {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0;
}

.proposal-review-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-title);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    font-weight: 700;
}

.proposal-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proposal-review-author cite {
    font-style: normal;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    text-align: left;
}

.proposal-review-author strong {
    font-family: var(--font-title);
    font-size: 1rem;
    color: #fff;
}

.proposal-review-author span {
    font-size: 0.86rem;
    color: rgba(255, 255, 255, 0.65);
}

.proposal-review-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--sage);
    font-weight: 600;
}

/* Similar projects */
.proposal-projects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.proposal-project-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    border: 1px solid rgba(27, 35, 49, 0.1);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.proposal-project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 35, 49, 0.1);
}

.proposal-project-image {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--mist);
}

.proposal-project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proposal-project-body {
    padding: 1.2rem 1.4rem;
}

.proposal-project-body h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.proposal-project-client {
    display: block;
    font-size: 1rem;
    color: var(--sage);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.proposal-project-body p {
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.5;
}

/* Notes card */
.proposal-note-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid rgba(27, 35, 49, 0.1);
}

.proposal-note-card h4 {
    margin-bottom: 0.8rem;
}

.proposal-note-card ul {
    list-style: none;
    display: grid;
    gap: 0.5rem;
}

.proposal-note-card li::before {
    content: "\2022";
    margin-right: 0.6rem;
    color: var(--sage);
    font-weight: 700;
}

.payment-discount {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.payment-discount-label {
    font-size: 1rem;
    color: var(--sage);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.payment-discount-amount {
    font-size: 1rem;
    color: var(--slate);
}

/* Timeline */
.proposal-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 780px;
    margin: 0 auto;
}

.proposal-timeline-step {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    width: 85%;
    transition: transform 0.2s ease;
}

/* Stagger by responsibility */
.proposal-timeline-owner--planted {
    border-left: 4px solid var(--ink);
    margin-right: auto;
}

.proposal-timeline-owner--client {
    border-left: none;
    border-right: 4px solid var(--sage);
    margin-left: auto;
}

.proposal-timeline-owner--together {
    border-left: none;
    border: 2px solid var(--river);
    width: 92%;
    margin: 0 auto;
}

.proposal-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.proposal-timeline-week {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--river);
    background: rgba(46, 92, 138, 0.08);
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.proposal-timeline-type-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.proposal-timeline-type-label--payment {
    color: var(--sage);
    background: rgba(106, 143, 122, 0.12);
}

.proposal-timeline-type-label--review {
    color: var(--river);
    background: rgba(46, 92, 138, 0.1);
}

.proposal-timeline-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.proposal-timeline-header h4 {
    margin: 0;
}

.proposal-timeline-body h4 {
    margin-bottom: 0.3rem;
}

.proposal-timeline-body {
    min-width: 0;
    overflow-wrap: break-word;
}

.proposal-timeline-body > p {
    color: var(--slate);
    font-size: 1rem;
}

/* Payment steps */
.proposal-timeline-payment {
    background: rgba(106, 143, 122, 0.05);
    border-color: rgba(106, 143, 122, 0.2);
}

.proposal-timeline-payment h4 {
    color: var(--sage);
}

/* Review steps */
.proposal-timeline-review {
    background: rgba(46, 92, 138, 0.04);
    border-color: rgba(46, 92, 138, 0.15);
}

.proposal-timeline-review h4 {
    color: var(--river);
}

/* Revision steps */
.proposal-timeline-revision {
    background: rgba(27, 35, 49, 0.03);
    border-color: rgba(27, 35, 49, 0.12);
    border-style: dashed;
    border-left-style: solid;
}

.proposal-timeline-type-label--revision {
    color: var(--ink);
    background: rgba(27, 35, 49, 0.08);
}

.proposal-timeline-loop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-size: 1rem;
    color: var(--slate);
    background: rgba(27, 35, 49, 0.04);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    width: fit-content;
}

.proposal-timeline-loop svg {
    color: var(--ink);
    flex-shrink: 0;
    opacity: 0.6;
}

.proposal-timeline-connector--loop {
    opacity: 0.4;
}

/* Included call callout in timeline steps */
.proposal-call-inline {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--ink);
    background: rgba(46, 92, 138, 0.06);
    border-left: 3px solid var(--river);
    padding: 0.5rem 0.75rem;
    border-radius: 0 6px 6px 0;
    line-height: 1.5;
}

/* Inline revision link in review steps */
.proposal-revision-inline {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--slate);
    font-style: italic;
}

.proposal-revision-inline a {
    color: var(--river);
    text-decoration: none;
}

/* Timeline owner indicators */
.proposal-timeline-legend {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
}

.proposal-timeline-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
}

.proposal-timeline-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.proposal-timeline-legend--client .proposal-timeline-legend-dot { background: var(--sage); }
.proposal-timeline-legend--planted .proposal-timeline-legend-dot { background: var(--ink); }
.proposal-timeline-legend--together .proposal-timeline-legend-dot { background: var(--river); }

/* Owner stagger styles are defined above with the step layout */

/* Owner badge pill */
.proposal-timeline-owner-badge {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-align: center;
}

.proposal-timeline-owner-badge--client {
    color: var(--sage);
    background: rgba(106, 143, 122, 0.12);
}

.proposal-timeline-owner-badge--planted {
    color: var(--ink);
    background: rgba(27, 35, 49, 0.08);
}

.proposal-timeline-owner-badge--together {
    color: var(--river);
    background: rgba(46, 92, 138, 0.1);
}

.proposal-revision-inline a:hover {
    text-decoration: underline;
}

/* Connector arrows between steps */
.proposal-timeline-connector {
    display: flex;
    justify-content: center;
    padding: 0.3rem 0;
    color: var(--slate);
    opacity: 0.35;
}

.proposal-timeline-dates {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.proposal-timeline-date {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.proposal-timeline-date-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate);
}

.proposal-timeline-date-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
}

.proposal-timeline-disclaimer {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--slate);
    font-style: italic;
}


/* CTA section */
.proposal-cta-section {
    border-bottom: none;
}

.proposal-cta-card {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius);
    padding: 3rem 2rem;
    border: 1px solid rgba(27, 35, 49, 0.1);
    box-shadow: 0 16px 40px rgba(27, 35, 49, 0.08);
}

.proposal-cta-card h2 {
    margin-bottom: 0.5rem;
}

.proposal-cta-card > p {
    color: var(--slate);
    margin-bottom: 1.5rem;
}

.proposal-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.proposal-cta-note {
    font-size: 1rem;
    color: var(--slate);
}

@media (max-width: 768px) {
    .proposal-parties {
        grid-template-columns: 1fr;
    }


    .proposal-sitemap-groups {
        grid-template-columns: 1fr;
    }

    .proposal-timeline-step {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem;
    }

    .proposal-timeline-marker {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .proposal-timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .proposal-timeline-owner-badge {
        white-space: normal;
        font-size: 0.75rem;
    }

    .proposal-table {
        font-size: 1rem;
    }

    .proposal-table th:nth-child(2),
    .proposal-table td:nth-child(2) {
        display: none;
    }
}

/* ============================================================
   ONGOING SUPPORT CALCULATOR
   ============================================================ */

.hero--slim {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.calc-section {
    padding: 2rem 0 8rem; /* bottom padding leaves room for sticky bar */
}

/* --- Card grid --- */
.calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.calc-grid--support {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
    margin: 0 auto;
}

.calc-grid--single {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin: 0 auto;
}

.calc-group-label {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--slate);
    margin: 2rem 0 0.25rem;
}

.calc-group-label:first-child {
    margin-top: 0;
}

.calc-group-note {
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.5;
    margin: 0 0 1rem;
    max-width: 600px;
}

.calc-support-divider {
    text-align: center;
    margin: 2.5rem 0 1.5rem;
    position: relative;
}

.calc-support-divider::before {
    content: '';
    position: absolute;
    top: 0.65em;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
}

.calc-support-label {
    position: relative;
    background: var(--shell);
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--slate);
}

.calc-support-note {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: var(--slate);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

.calc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid rgba(46, 92, 138, 0.15);
    border-radius: var(--radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
    user-select: none;
    outline: none;
    opacity: 0.55;
}

.calc-card:hover {
    border-color: rgba(46, 92, 138, 0.35);
    box-shadow: 0 6px 24px rgba(27, 35, 49, 0.08);
    transform: translateY(-2px);
    opacity: 0.8;
}

.calc-card:focus-visible {
    border-color: var(--river);
    box-shadow: 0 0 0 3px rgba(46, 92, 138, 0.18);
}

.calc-card.is-selected {
    border-color: rgba(46, 92, 138, 0.25);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 24px rgba(27, 35, 49, 0.06);
    opacity: 1;
}

/* Checkbox indicator */
.calc-card-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    background: #fff;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.calc-card.is-selected .calc-card-check {
    border-color: var(--river);
    background: var(--river);
    color: #fff;
}

/* Card body */
.calc-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
}

.calc-card-header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding-right: 2rem; /* avoid overlap with checkbox */
}

.calc-card-emoji {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.calc-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.calc-card-summary {
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.5;
}

/* Card footer: price + tier badge */
.calc-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
}

.calc-card-price {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.calc-price-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
}

.calc-price-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink);
    font-family: var(--font-title);
    line-height: 1;
}

.calc-price-period {
    font-size: 1rem;
    font-weight: 400;
    color: var(--slate);
}

.calc-price-adspend,
.calc-price-setup {
    font-size: 1rem;
    color: var(--slate);
    margin-top: 0.2rem;
    font-style: italic;
}

.calc-price-leads {
    display: block;
    font-size: 1rem;
    color: var(--sage);
    font-weight: 600;
    margin-top: 0.25rem;
}

.calc-card.is-selected .calc-price-amount {
    color: var(--river);
}

/* Tier picker container */
.calc-tier-picker {
    position: relative;
    flex-shrink: 0;
}

/* Tier badge */
.calc-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: inherit;
}

.calc-tier-badge:hover,
.calc-tier-badge[aria-expanded="true"] {
    background: rgba(46, 92, 138, 0.08);
    color: var(--river);
    border-color: rgba(46, 92, 138, 0.3);
}

.calc-tier-badge--single {
    cursor: default;
    opacity: 0.7;
}

.calc-tier-badge--single:hover {
    background: var(--mist);
    color: var(--slate);
    border-color: var(--line);
}

.calc-card.is-selected .calc-tier-badge {
    background: rgba(46, 92, 138, 0.08);
    color: var(--river);
    border-color: rgba(46, 92, 138, 0.2);
}

.calc-tier-arrow {
    opacity: 0.5;
    font-size: 1rem;
    display: inline-block;
    transition: transform 0.15s;
}

.calc-tier-badge[aria-expanded="true"] .calc-tier-arrow {
    transform: rotate(90deg);
    opacity: 0.8;
}

/* Tier dropdown */
.calc-tier-dropdown {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(27, 35, 49, 0.12);
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    z-index: 200;
}

.calc-tier-dropdown.is-open {
    display: block;
}

.calc-tier-option {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.2rem 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}

.calc-tier-option:hover {
    background: var(--mist);
}

.calc-tier-option.is-active {
    background: rgba(46, 92, 138, 0.07);
}

.calc-tier-option-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.calc-tier-option.is-active .calc-tier-option-name {
    color: var(--river);
}

.calc-tier-option-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.calc-tier-option-desc {
    grid-column: 1 / -1;
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.35;
    margin-top: 0.1rem;
}

.calc-tier-option-adspend {
    grid-column: 1 / -1;
    font-size: 1rem;
    font-style: italic;
    color: var(--slate);
    opacity: 0.8;
}

/* Chip tier label */
.calc-chip-tier {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.7;
    margin-left: 0.3rem;
}

/* Learn more link */
.calc-card-link {
    display: block;
    font-size: 1rem;
    color: var(--slate);
    text-decoration: none;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    transition: color 0.15s;
}

.calc-card-link:hover {
    color: var(--river);
}

/* --- Sticky summary bar --- */
.calc-summary {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--ink);
    color: #fff;
    padding: 0.75rem 0;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    box-shadow: 0 -4px 24px rgba(27, 35, 49, 0.18);
}

.calc-summary.is-active {
    transform: translateY(0);
}

.calc-summary-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.calc-summary-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    width: 100%;
}

.calc-summary-heading {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    width: 100%;
}

.calc-summary-empty {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Selected service chips */
.calc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 0.3rem 0.6rem 0.3rem 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.calc-chip-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.15rem;
    margin: -0.15rem;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.calc-chip-remove:hover {
    color: #fff;
}

.calc-chip--project {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
}

.calc-chip-clear {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 20px;
    padding: 0.25rem 0.6rem;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.calc-chip-clear:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

.proposal-project-card.is-dismissed {
    opacity: 0.55;
    border-style: dashed;
    cursor: pointer;
}

.proposal-project-card.is-dismissed:hover {
    opacity: 0.75;
}

@media (max-width: 720px) {
    .proposal-project-services {
        grid-template-columns: 1fr;
    }
}

/* Total + CTAs */
.calc-summary-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
}

.calc-summary-totals {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.calc-summary-total,
.calc-summary-adspend,
.calc-summary-setup {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.calc-summary-adspend[hidden] { display: none; }
.calc-summary-setup[hidden] { display: none; }
.calc-summary-calls[hidden] { display: none; }

.calc-summary-calls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.calc-summary-adspend,
.calc-summary-setup,
.calc-summary-calls {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    padding-left: 1rem;
}

.calc-summary-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

.calc-summary-amount {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: #fff;
    line-height: 1;
}

.calc-summary-amount--muted {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
}

.calc-summary-period {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 0.1rem;
}

.calc-summary-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}

.calc-summary-ctas .btn.primary:disabled {
    opacity: 0.4;
    cursor: default;
}

.calc-summary-ctas .btn.secondary:disabled {
    opacity: 1;
    cursor: default;
    background: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 1rem;
    pointer-events: none;
}

.btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 1rem;
}

/* Copy link button */
#btnCopyLink {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    font-size: 1rem;
}

#investment {
    scroll-margin-top: calc(var(--announcement-height) + var(--header-height) + var(--breadcrumb-height) + var(--nav-height) + var(--price-bar-height) + 20px);
}

.compare-empty {
    padding: 3rem 0;
    border-top: 1px solid var(--line);
    text-align: center;
}

.compare-empty h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.compare-empty p {
    color: var(--slate);
    max-width: 480px;
    margin: 0 auto;
}

/* ─── Comparison panel ──────────────────────────────────────────────────── */

.compare-section {
    padding: 3rem 0 4rem;
    border-top: 1px solid var(--line);
}

.compare-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.compare-heading {
    font-size: 1.4rem;
    font-family: var(--font-title);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.compare-header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.compare-clear,
.roi-toggle {
    font-size: 1rem;
    color: var(--slate);
}

/* ROI hidden state */
.compare-section.roi-hidden .roi-section,
.compare-section.roi-hidden .roi-explain-wrap,
.compare-section.roi-hidden .roi-disclaimer {
    display: none;
}

.calc-industry-section {
    padding: 2rem 0 0;
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.compare-pkg {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: grab;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.compare-pkg.is-dragging {
    opacity: 0.4;
}
.compare-pkg.drag-over {
    box-shadow: 0 0 0 2px var(--river);
}

.compare-pkg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.compare-pkg-label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.compare-pkg-actions {
    display: flex;
    gap: 0.6rem;
}

.compare-pkg-actions .btn-link {
    font-size: 1rem;
}

/* Per-package narrative copy from packageNotes[label]. Mirrors what
   the sendable shows under each package header so the operator has
   the same context in the planner without flipping between views. */
.compare-pkg-intro {
    margin: 0.25rem 0 1rem;
    color: var(--slate);
    font-size: 0.92rem;
    line-height: 1.55;
}

.compare-remove {
    color: var(--slate);
}

.compare-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.compare-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 0 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    min-height: 4.25rem;
    align-content: start;
}

.compare-item:last-child {
    border-bottom: none;
}

.compare-item-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
}

.compare-item-tier {
    display: block;
    width: fit-content;
    grid-column: 1;
    margin-left: 0;
    margin-top: 0.3rem;
    padding: 0.12rem 0.5rem;
    background: rgba(46, 92, 138, 0.08);
    color: var(--slate);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.4;
}

/* Tier badge with hover tooltip showing the other tiers + prices */
.compare-item-tier-wrap {
    position: relative;
    display: block;
    width: fit-content;
    margin-top: 0.3rem;
    vertical-align: middle;
}
.compare-item-tier-wrap .compare-item-tier {
    display: inline-block;
    margin-top: 0;
    cursor: help;
    border-bottom: 1px dotted var(--slate);
}
.compare-item-tier-wrap .compare-item-tier:hover,
.compare-item-tier-wrap .compare-item-tier:focus-visible {
    background: rgba(46, 92, 138, 0.16);
    outline: none;
}
.tier-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    /* Anchor to the badge's left edge and expand rightward. The tier badge
       lives in the far-left grid column, so a centered tooltip overflows the
       card's left edge and gets clipped (names + title disappear). Left-
       anchoring keeps the whole tooltip inside the card. */
    left: 0;
    transform: none;
    z-index: 30;
    min-width: 290px;
    padding: 0.65rem 0.85rem;
    background: var(--ink);
    color: #fff;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(20, 27, 45, 0.25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s, visibility 0.12s;
    white-space: nowrap;
}
.tier-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    /* Point the arrow at the badge (now that the tooltip is left-anchored)
       instead of the tooltip's center. */
    left: 1.5rem;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
}
.compare-item-tier-wrap:hover .tier-tooltip,
.compare-item-tier-wrap:focus-within .tier-tooltip {
    opacity: 1;
    visibility: visible;
}
.tier-tooltip-title {
    display: block;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.65);
    font-weight: 700;
}
.tier-tooltip ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tier-tip-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.18rem 0;
}
.tier-tip-row.is-current {
    font-weight: 700;
    color: var(--gold, #f6c560);
}
/* Put the check on the tier NAME, not the row. The row is a space-between
   flex container, so a ::before on the row becomes its own flex item and gets
   pushed far away from the tier label. Hanging it off the name keeps the check
   tight to the text. */
.tier-tip-row.is-current .tier-tip-name::before {
    content: "✓";
    margin-right: 0.35rem;
}
.tier-tip-name { font-weight: 600; white-space: nowrap; }
.tier-tip-price { color: rgba(255,255,255,0.85); text-align: right; }
.tier-tip-adspend { display: block; font-size: 0.66rem; font-weight: 600; color: rgba(255,255,255,0.55); margin-top: 1px; white-space: nowrap; }
.tier-tip-row.is-current .tier-tip-adspend { color: rgba(246, 197, 96, 0.8); }
.tier-tip-row.is-current .tier-tip-price { color: var(--gold, #f6c560); }

/* Click popover on tier chips - shows full compare table with descriptions */
button.compare-item-tier {
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
button.compare-item-tier:focus-visible {
    outline: 2px solid var(--river);
    outline-offset: 2px;
}
.tier-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 50;
    min-width: 320px;
    max-width: 480px;
    padding: 0.85rem 0.95rem;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(20, 27, 45, 0.14);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: normal;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.45;
}
.tier-popover[hidden] { display: none; }
.tier-popover-title {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-title);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    font-weight: 700;
}
.tier-popover-table {
    width: 100%;
    border-collapse: collapse;
}
.tier-popover-table th,
.tier-popover-table td {
    padding: 0.45rem 0.55rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.tier-popover-table tr:last-child td { border-bottom: none; }
.tier-popover-table th {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    background: var(--mist);
    white-space: nowrap;
}
.tier-popover-table tr.is-current td {
    background: rgba(106, 143, 122, 0.06);
}
.tier-popover-table tr.is-current td:first-child {
    border-left: 3px solid var(--sage);
    font-weight: 700;
}
.tier-popover-price {
    white-space: nowrap;
    font-weight: 600;
}
.tier-popover-adspend {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--slate);
    margin-top: 1px;
}
.tier-popover-flag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.06rem 0.4rem;
    background: var(--sage);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    vertical-align: middle;
}

/* Mobile: position popover so it stays in viewport */
@media (max-width: 640px) {
    .tier-popover {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: min(85vw, 360px);
        max-width: 90vw;
        max-height: 80vh;
        overflow: auto;
    }
    .tier-popover::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(20, 27, 45, 0.4);
        z-index: -1;
    }
}

.compare-item-price {
    grid-column: 2;
    grid-row: 1 / 2;
    align-self: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.compare-item-adspend {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: var(--slate);
    font-style: italic;
}

/* Inline rollup badge — shown on a project line when its cost is rolled into
   another service (e.g. Blog → Website Build). Lives in the planner so the
   admin sees the merge; build-sendable.cjs drops the row from client HTML. */
.compare-item-rollup-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--river) 12%, transparent);
    color: var(--river);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.compare-item--rolled-up .compare-item-price {
    color: var(--slate);
    font-weight: 500;
}
/* Paired-with badge — shown on a project line when its companion service is
   also in the package (e.g. Website Build ↔ Website Management). Both lines
   render their own price; the badge signals the dependency between them. */
.compare-item-paired-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sage) 14%, transparent);
    color: color-mix(in srgb, var(--sage) 70%, var(--ink));
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}
.compare-item--sitemap {
    border-top: 1px dashed var(--line);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
}

.compare-item--placeholder {
    opacity: 0.3;
}
.compare-item--placeholder .compare-item-name,
.compare-item--placeholder .compare-item-price {
    color: var(--slate);
    font-weight: 400;
    font-style: italic;
}
.compare-item--placeholder .compare-item-price {
    font-weight: 600;
    opacity: 0.6;
}
.compare-item--sitemap .compare-item-name {
    font-style: italic;
    color: var(--slate);
}

.compare-empty {
    font-size: 1rem;
    color: var(--slate);
    margin: 0;
}

.compare-totals {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: auto;  /* pins totals+CTA+chart to card bottom */
    background: var(--mist);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
}

.compare-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1rem;
    color: var(--slate);
}

.compare-total-row--primary {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.compare-total-row--primary span:last-child {
    color: var(--river);
}

.compare-total-row--sub {
    font-size: 0.85rem;
    padding-left: 0.75rem;
    color: var(--slate);
    opacity: 0.85;
}
.compare-total-row--sub span:last-child {
    font-weight: 500;
}

.compare-total-row--rollup {
    font-size: 0.8rem;
    color: var(--slate);
    font-style: italic;
    opacity: 0.7;
    border-top: 1px dashed var(--line);
    padding-top: 0.3rem;
    margin-top: 0.15rem;
}

.compare-total-note {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--slate);
    opacity: 0.8;
    font-style: italic;
}

.compare-totals-details {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--line);
    padding-top: 0.4rem;
}

.compare-totals-summary {
    font-size: 0.85rem;
    color: var(--slate);
    cursor: pointer;
    list-style: none;
    user-select: none;
    padding: 0.15rem 0;
}
.compare-totals-summary::-webkit-details-marker {
    display: none;
}
.compare-totals-summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 0.35rem;
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}
.compare-totals-details[open] .compare-totals-summary::before {
    transform: rotate(90deg);
}
.compare-totals-summary:hover {
    color: var(--ink);
}

.compare-totals-summary-hide { display: none; }
.compare-totals-details[open] .compare-totals-summary-show { display: none; }
.compare-totals-details[open] .compare-totals-summary-hide { display: inline; }

.compare-totals-detail-heading {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    opacity: 0.7;
    margin-top: 0.25rem;
}
.compare-totals-detail-heading:first-child {
    margin-top: 0;
}

.compare-total-footnote {
    display: block;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--slate);
    font-style: italic;
    opacity: 0.8;
    margin-top: 0.1rem;
    text-transform: none;
    letter-spacing: 0;
}

.compare-total-row--adspend-glance {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--slate);
    opacity: 0.75;
    padding-left: 0.75rem;
    margin-top: -0.15rem;
}

.compare-totals-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--line);
}

.compare-calls-box {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    background: var(--shell);
}

.compare-calls-box--empty,
.compare-timeline-estimate--empty {
    opacity: 0.4;
}
.compare-calls-box--empty .muted,
.compare-timeline-estimate--empty .muted {
    color: var(--slate);
    font-style: italic;
    font-weight: 400;
}
.compare-calls-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    color: var(--slate);
}
.compare-calls-row span:last-child {
    font-weight: 600;
    color: var(--ink);
}

.compare-payment-terms {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 0.75rem;
    margin-top: 0.5rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font-size: 1rem;
}
.compare-payment-term {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--slate);
}
.compare-payment-term span:last-child {
    font-weight: 600;
    color: var(--ink);
}
.compare-payment-term--note {
    padding-top: 0.25rem;
    border-top: 1px solid var(--line);
    margin-top: 0.15rem;
    font-size: 1rem;
}

.compare-timeline-estimate {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--line);
}

.compare-timeline-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

/* "Override" pill on the timeline row when pkg.timelineOverride is set —
   signals to the admin that this card is showing a manually entered week
   count rather than the auto-calc. */
.compare-timeline-override-badge {
    position: relative;
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    vertical-align: middle;
    background: rgba(176, 126, 22, 0.12);
    color: #7a5a10;
    border: 1px solid rgba(176, 126, 22, 0.3);
    cursor: help;
}

/* CSS-driven tooltip on elements with [data-tooltip]. Native title= tooltips
   have a 1s+ delay and can get clipped by overflow. This appears instantly
   on hover, sits above the trigger, and supports multi-word content. */
[data-tooltip] {
    position: relative;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(20, 27, 45, 0.18);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
    z-index: 100;
    pointer-events: none;
}
.compare-timeline-strike {
    color: var(--slate);
    text-decoration: line-through;
    text-decoration-color: rgba(20, 27, 45, 0.35);
    margin-right: 0.4rem;
    font-weight: 500;
    font-size: 0.85em;
    white-space: nowrap;
}
.compare-timeline-value {
    white-space: nowrap;
    text-align: right;
}

/* Sub-line clarifying that the timeline reflects the website launch only;
   marketing/ads setup is parallel work owned by a different teammate. */
.compare-timeline-note {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--slate);
    cursor: help;
}

/* Planner-only override input. Same edit-mode visibility pattern as the
   content/discount controls. */
.compare-timeline-edit {
    display: none;
}
body[data-proposal-mode="planner"] .compare-pkg.is-editing .compare-timeline-edit {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.5rem 0.65rem;
    background: var(--mist);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}
.compare-timeline-edit label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--slate);
    flex: 1;
    min-width: 0;
}
.compare-timeline-edit label > span {
    flex-shrink: 0;
}
.compare-timeline-edit input[type="number"] {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}
.compare-timeline-edit-hint {
    color: var(--slate);
    font-style: italic;
    flex-shrink: 0;
}

.compare-disclaimer {
    font-size: 1rem;
    font-style: italic;
    color: var(--slate);
    opacity: 0.7;
    line-height: 1.5;
    margin-top: 3rem;
    max-width: 720px;
}

/* Inline edit mode */
.compare-edit-controls {
    display: none;
    align-items: center;
    gap: 0.4rem;
    grid-column: 1 / -1;
    margin-top: 0.2rem;
}

.compare-pkg.is-editing .compare-edit-controls {
    display: flex;
}

.compare-edit-select {
    font-size: 1rem;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    max-width: 100%;
    min-width: 0;
}

.compare-edit-remove {
    background: none;
    border: none;
    color: var(--slate);
    font-size: 1rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
    opacity: 0.5;
}

.compare-edit-remove:hover {
    color: #c53030;
    opacity: 1;
}

/* Source badge on the planner's Content row — small inline label that
   tells the admin whether the cost came from the per-CT engine or a
   manual fixed-cost override. Doesn't render in the legacy sendable
   (the row is built by build-sendable.cjs which doesn't emit this). */
.compare-item-source-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    vertical-align: middle;
    cursor: help;
}

.compare-item-source-badge--engine {
    background: rgba(46, 92, 138, 0.1);
    color: #2e5c8a;
    border: 1px solid rgba(46, 92, 138, 0.25);
}

.compare-item-source-badge--fixed {
    background: rgba(176, 126, 22, 0.12);
    color: #7a5a10;
    border: 1px solid rgba(176, 126, 22, 0.3);
}

/* Dropped Content row — visible in the planner with a tagline noting
   that the sendable will hide it. The price still shows so the One-time
   total is visually traceable. */
.compare-item--dropped .compare-item-name {
    color: var(--slate);
}

.compare-item--dropped .compare-item-price {
    color: var(--slate);
    text-decoration: line-through;
    text-decoration-color: rgba(20, 27, 45, 0.3);
}

.compare-edit-add {
    display: none;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--line);
}

.compare-pkg.is-editing .compare-edit-add {
    display: block;
}

/* Per-package content controls (suppress + fixed cost). Edit-mode only. */
.compare-item--content-edit {
    display: none;
}

.compare-pkg.is-editing .compare-item--content-edit {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    margin-top: 0.5rem;
    background: var(--mist);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

.compare-content-toggle,
.compare-content-fixed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compare-content-toggle input[type="checkbox"] {
    flex-shrink: 0;
}

.compare-content-fixed > span {
    color: var(--slate);
    flex-shrink: 0;
}

.compare-content-fixed input[type="number"] {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    font: inherit;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.compare-content-fixed input[type="number"]:disabled {
    background: var(--mist);
    color: var(--slate);
    cursor: not-allowed;
}

/* Per-package discount totals — visible to clients on the package card.
   The original total is struck through, then a "− Discount" row, then the
   "After discount" / "First N months" / "After N months" rollup rows. */
.compare-total-row--discount {
    color: #c53030;
    font-size: 0.92em;
}
.compare-total-row--discount span:last-child {
    font-variant-numeric: tabular-nums;
}
.compare-total-strike {
    color: var(--slate);
    text-decoration: line-through;
    text-decoration-color: rgba(20, 27, 45, 0.35);
    margin-right: 0.4rem;
    font-weight: 500;
}
.compare-total-row--after-discount span:last-child {
    color: var(--ink);
    font-weight: 700;
}
.compare-total-row--after-discount-then {
    color: var(--slate);
    font-size: 0.88em;
    padding-left: 0.5rem;
}

/* Per-package discount admin block. Planner-only — hidden in sendable
   mode via the body[data-proposal-mode="planner"] gate. Same edit-mode
   visibility pattern as the content-cost controls. */
.compare-item--discount-edit {
    display: none;
}
body[data-proposal-mode="planner"] .compare-pkg.is-editing .compare-item--discount-edit {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    margin-top: 0.5rem;
    background: rgba(176, 126, 22, 0.06);
    border: 1px dashed rgba(176, 126, 22, 0.4);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.compare-discount-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #7a5a10;
}
.compare-discount-add {
    font-size: 0.8rem;
}
.compare-discount-empty {
    margin: 0;
    color: var(--slate);
    font-style: italic;
}
.compare-discount-row {
    padding: 0.65rem 0.75rem 0.75rem;
    background: #fff;
    border: 1px solid rgba(176, 126, 22, 0.3);
    border-radius: var(--radius-sm);
}
.compare-discount-row + .compare-discount-row {
    margin-top: 0.5rem;
}
.compare-discount-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed rgba(176, 126, 22, 0.25);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7a5a10;
}
.compare-discount-row-fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.compare-discount-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    min-width: 0;
}
.compare-discount-field select,
.compare-discount-field input,
.compare-discount-field textarea {
    padding: 0.4rem 0.55rem;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    width: 100%;
    min-width: 0;
}
.compare-discount-field textarea {
    resize: vertical;
    min-height: 2.4rem;
    font-family: var(--font-body);
    line-height: 1.4;
}
.compare-discount-field input:disabled {
    background: var(--mist);
    color: var(--slate);
    cursor: not-allowed;
}

/* One-time discount vesting controls. */
.compare-discount-field--vest {
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--shell, #faf9f6);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.compare-discount-vest-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}
.compare-discount-vest-toggle input {
    width: auto;
    flex: none;
    accent-color: var(--gold, #c79a3a);
    margin: 0;
}
.compare-discount-vest-months {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.compare-discount-vest-help {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.45;
    color: var(--slate);
}

/* Global save bar — sticky bottom strip when the proposal has unsaved
   sitemap or package edits. Single source of truth for "are there
   pending changes" + a single Save / Discard pair. Replaces the old
   inline Commit / Reset buttons that lived inside the sitemap section. */
.proposal-save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: linear-gradient(180deg, rgba(27, 45, 80, 0.97), rgba(27, 45, 80, 1));
    color: #fff;
    box-shadow: 0 -8px 24px rgba(20, 27, 45, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
}
.proposal-save-bar[hidden] { display: none; }
.proposal-save-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
}
.proposal-save-bar-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold, #d97706);
    box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.18);
    display: inline-block;
    font-size: 0;
    flex-shrink: 0;
    transition: background 0.2s, box-shadow 0.2s;
}
.proposal-save-bar[data-kind="saving"] .proposal-save-bar-icon { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18); animation: proposalSavePulse 0.9s ease-in-out infinite; }
.proposal-save-bar[data-kind="saved"] .proposal-save-bar-icon { background: var(--sage, #57998e); box-shadow: 0 0 0 4px rgba(87, 153, 142, 0.22); }
.proposal-save-bar[data-kind="err"] .proposal-save-bar-icon { background: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18); }
@keyframes proposalSavePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.proposal-save-bar-text {
    font-weight: 700;
    font-size: 0.95rem;
}
.proposal-save-bar-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    margin-right: auto;
}
.proposal-save-bar-discard,
.proposal-save-bar-save {
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.proposal-save-bar-discard {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.proposal-save-bar-discard:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.proposal-save-bar-save {
    background: var(--sage, #57998e);
    color: #fff;
}
.proposal-save-bar-save:hover {
    background: var(--ink, #1b2d50);
}
.proposal-save-bar[data-kind="saving"] .proposal-save-bar-save { opacity: 0.6; pointer-events: none; }

/* When the bar is visible, give the page a little extra bottom space
   so it doesn't cover the last section's content. */
body.has-proposal-save-bar { padding-bottom: 4.5rem; }

.compare-edit-add::before {
    content: 'Add another service to this package';
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.compare-edit-add-select {
    appearance: none;
    -webkit-appearance: none;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.65rem 2.4rem 0.65rem 1rem;
    border: 2px solid var(--sage);
    border-radius: 999px;
    background-color: rgba(87, 153, 142, 0.08);
    color: var(--sage);
    cursor: pointer;
    width: 100%;
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2357998e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 14px;
}

.compare-edit-add-select:hover {
    background-color: rgba(87, 153, 142, 0.18);
    color: var(--ink);
}

.compare-pkg-ctas {
    display: flex;
    gap: 0.5rem;
}

/* Request-package status row + email draft (planner only - the sendable
   intentionally does not surface this UI to clients). */
.compare-request-status {
    margin: 0.6rem 0 0;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm, 14px);
    font-size: 0.85rem;
    line-height: 1.5;
}
.compare-request-status.is-loading { background: var(--mist, #f0f2f5); color: var(--slate, #64748b); }
.compare-request-status.is-ok { background: rgba(22, 163, 74, 0.08); color: var(--ink, #1b2d50); border-left: 3px solid var(--sage, #16a34a); }
.compare-request-status.is-error { background: rgba(220, 38, 38, 0.08); color: #991b1b; border-left: 3px solid #dc2626; }
.compare-request-status a { color: var(--river, #3b82f6); font-weight: 600; word-break: break-all; }
.compare-request-warnings { margin-top: 0.4rem; font-size: 0.8rem; color: var(--slate, #64748b); }
.compare-request-email { margin-top: 0.7rem; }
.compare-request-email > summary { cursor: pointer; font-weight: 600; color: var(--river, #3b82f6); padding: 0.3rem 0; user-select: none; }
.compare-request-email-body { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; padding: 0.6rem; background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 6px; }
.compare-request-email-body label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--slate, #64748b); }
.compare-request-email-body input,
.compare-request-email-body textarea { font-family: inherit; font-size: 0.85rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line, #e2e8f0); border-radius: 4px; background: var(--mist, #f9fafb); color: var(--ink, #1b2d50); width: 100%; box-sizing: border-box; }
.compare-request-email-body textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.compare-request-email-body button.btn-link { align-self: flex-start; background: none; border: 1px solid var(--line, #e2e8f0); color: var(--river, #3b82f6); font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; }
.compare-request-email-body button.btn-link:hover { background: var(--river, #3b82f6); color: #fff; border-color: var(--river, #3b82f6); }
.compare-request-email-body a.btn-link { font-size: 0.8rem; font-weight: 600; }

/* ─── ROI inputs ────────────────────────────────────────────────────────── */

.roi-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: flex-end;
    margin-bottom: 1.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.roi-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.roi-input-group label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.roi-input-field {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mist);
}

.roi-input-field[hidden] { display: none; }

.roi-input-field span {
    padding: 0.45rem 0.6rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    background: var(--mist);
    border-right: 1px solid var(--line);
    line-height: 1;
}

.roi-input-field--suffix span {
    border-right: none;
    border-left: 1px solid var(--line);
}

.roi-input-field input {
    border: none;
    background: #fff;
    padding: 0.45rem 0.6rem;
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--ink);
    width: 90px;
    outline: none;
    appearance: textfield;
}

.roi-input-field input:focus {
    background: #fafeff;
}

.roi-select {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    padding: 0.45rem 2rem 0.45rem 0.65rem;
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--ink);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a5568' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    cursor: pointer;
    min-width: 160px;
}

.roi-select:focus { border-color: var(--river); }

.roi-cpl-values {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.roi-cpl-value {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.roi-cpl-tag {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: #fff;
    color: var(--slate);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}

/* ─── Industry-derived fields (unified group) ──────────────────────────── */

.roi-derived {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--mist);
    border: 1px dashed color-mix(in srgb, var(--river) 40%, var(--line));
    border-radius: 8px;
    flex-basis: 100%;
}

.roi-derived-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    align-items: flex-end;
    flex: 1;
    min-width: 0;
}

@media (max-width: 700px) {
    .roi-inputs {
        flex-direction: column;
        align-items: stretch;
    }
    .roi-select {
        width: 100%;
    }
    .roi-derived {
        flex-direction: column;
        align-items: stretch;
    }
    .roi-derived-fields {
        gap: 0.75rem 1rem;
    }
    .roi-override-btn {
        align-self: flex-end;
    }
}

.roi-derived-value {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    padding: 0.3rem 0.55rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    line-height: 1;
    white-space: nowrap;
}

.roi-derived-value[hidden] { display: none; }

.roi-derived-input {
    width: 58px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 1rem;
    font-family: var(--font-body);
    color: var(--ink);
    outline: none;
    appearance: textfield;
}

.roi-derived-input:focus { border-color: var(--river); }

.roi-override-btn {
    font-size: 1rem;
    color: var(--slate);
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.3rem 0.5rem;
    align-self: flex-start;
    margin-top: 1.2rem;
}

.roi-override-btn:hover { opacity: 1; }

.roi-fields-panel {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.85rem;
    background: var(--mist);
    border: 1px dashed color-mix(in srgb, var(--river) 40%, var(--line));
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.roi-fields-panel[hidden] { display: none; }

@media (max-width: 700px) {
    .roi-fields-panel {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ─── ROI chart and stats ────────────────────────────────────────────────── */

.roi-section {
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.roi-close-rate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.roi-close-rate label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
}

.roi-input-field--sm {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--shell);
}

.roi-input-field--sm input {
    width: 3.5rem;
    padding: 0.2rem 0.35rem;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    text-align: center;
    color: var(--ink);
}

.roi-input-field--sm input:focus {
    outline: none;
}

.roi-input-field--sm span {
    padding: 0.2rem 0.4rem;
    font-size: 1rem;
    color: var(--slate);
    background: var(--mist);
}

.roi-close-rate-hint {
    font-size: 1rem;
    color: var(--sage);
    font-style: italic;
}

.roi-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.roi-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.roi-stat-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    font-weight: 600;
}

.roi-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
}

.roi-stat-value--green {
    color: var(--sage);
}

.roi-chart {
    width: 100%;
    min-height: 60px;
}

.roi-no-chart {
    font-size: 1rem;
    color: var(--slate);
    font-style: italic;
    margin: 0.5rem 0 0;
}

/* ─── Mobile collapsible packages ───────────────────────────────────────── */

.compare-pkg-toggle {
    display: none;
}

.compare-pkg-summary {
    display: none;
}

@media (max-width: 600px) {
    .compare-pkg-toggle {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 1rem;
        color: var(--slate);
        cursor: pointer;
        padding: 0;
    }

    .compare-pkg-toggle .toggle-arrow {
        transition: transform 0.2s ease;
    }

    .compare-pkg.is-collapsed .compare-pkg-toggle .toggle-arrow {
        transform: rotate(-90deg);
    }

    .compare-pkg-summary {
        display: none;
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.5rem 0;
    }

    .compare-pkg.is-collapsed .compare-pkg-summary {
        display: flex;
    }

    .compare-pkg-summary-services {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .compare-pkg-summary-chip {
        font-size: 1rem;
        font-weight: 600;
        color: var(--slate);
        background: var(--mist);
        padding: 0.15rem 0.45rem;
        border-radius: 6px;
        white-space: nowrap;
    }

    .compare-pkg-summary-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .compare-pkg-summary-stat {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .compare-pkg-summary-stat .label {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--slate);
        font-weight: 600;
    }

    .compare-pkg-summary-stat .value {
        font-size: 1rem;
        font-weight: 700;
        color: var(--ink);
    }

    .compare-pkg-summary-stat .value--green {
        color: var(--sage);
    }

    .compare-pkg.is-collapsed .compare-items,
    .compare-pkg.is-collapsed .compare-totals,
    .compare-pkg.is-collapsed .compare-payment-terms,
    .compare-pkg.is-collapsed .compare-pkg-ctas,
    .compare-pkg.is-collapsed .roi-section {
        display: none;
    }
}

/* ─── ROI methodology panel ──────────────────────────────────────────────── */

.roi-explain-wrap {
    margin-top: 1.25rem;
}

.roi-explain-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.roi-explain-btn:hover { color: var(--ink); }

.roi-explain-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.roi-explain-panel {
    margin-top: 0.75rem;
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1rem 1.1rem;
    overflow-x: auto;
}

.roi-explain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1rem;
    color: var(--ink);
}

.roi-explain-table th {
    text-align: left;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--slate);
    font-weight: 700;
    padding: 0 0.6rem 0.5rem 0;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.roi-explain-table td {
    padding: 0.45rem 0.6rem 0.45rem 0;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    line-height: 1.4;
}

.roi-explain-table tr:last-child td { border-bottom: none; }

.roi-explain-table td:first-child { font-weight: 600; white-space: nowrap; }
.roi-explain-table td:nth-child(2) { color: var(--sage); white-space: nowrap; }

.roi-explain-note {
    margin-top: 0.75rem;
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.5;
}

/* ─── ROI legend ─────────────────────────────────────────────────────────── */

.roi-disclaimer {
    font-size: 1rem;
    color: var(--slate);
    opacity: 0.7;
    margin-top: 1.5rem;
    line-height: 1.5;
}

/* btn-link utility */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--river);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover {
    color: var(--ink);
}

/* Build sendable split-button — primary click overwrites current,
   chevron opens a menu with "Build new version" (date-stamped folder
   + source.json snapshot). */
.build-sendable-split {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    overflow: visible;
}
.build-sendable-split .btn-primary {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    white-space: nowrap;
    min-width: 11rem;
}
.build-sendable-chevron {
    background: var(--ink, #1b2d50);
    color: #fff;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    padding: 0 0.65rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s;
}
.build-sendable-chevron:hover { background: var(--river, #3b82f6); }
.build-sendable-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 12px);
    box-shadow: 0 10px 30px rgba(20, 27, 45, 0.12);
    padding: 0.35rem;
    min-width: 240px;
    z-index: 30;
}
.build-sendable-menu[hidden] { display: none; }
.build-sendable-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.55rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink, #1b2d50);
    border-radius: 8px;
    cursor: pointer;
}
.build-sendable-menu-item:hover {
    background: var(--mist, #f0f2f5);
    color: var(--ink, #1b2d50);
}
.build-sendable-status {
    margin-top: 0.65rem;
    padding: 0.6rem 0.85rem;
    background: var(--mist, #f0f2f5);
    border-left: 3px solid var(--sage, #16a34a);
    border-radius: var(--radius-sm, 14px);
    font-size: 0.85rem;
    color: var(--ink, #1b2d50);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
/* Hide the status pill until JS populates it. The element is created with
   hidden=true in calculator.js but display:flex above overrode that, leaving
   an empty crescent-shaped pill rendering before any build. */
.build-sendable-status[hidden],
.build-sendable-status:empty { display: none; }
.build-sendable-status a {
    color: var(--river, #3b82f6);
    font-weight: 600;
    word-break: break-all;
}
.build-sendable-copy {
    background: #fff;
    border: 1px solid var(--line, #e2e8f0);
    color: var(--slate, #64748b);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
}
.build-sendable-copy:hover {
    background: var(--river, #3b82f6);
    color: #fff;
    border-color: var(--river, #3b82f6);
}

/* Primary action button — used for "Build sendable" (the main flow that
   freezes current disk state into the standalone HTML output). */
.btn-primary {
    background: var(--ink, #1b2d50);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover {
    background: var(--river, #3b82f6);
}
.btn-primary:active { transform: translateY(1px); }

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

@media (max-width: 600px) {
    .calc-grid,
    .calc-grid--support {
        grid-template-columns: 1fr;
    }

    .calc-summary-inner {
        gap: 0.5rem;
    }

    .calc-summary-right {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .calc-summary-totals {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .calc-summary-total {
        align-items: flex-start;
    }
}

/* ─── Reviews / Testimonials ─── */

.review-stat-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

.review-stat-number {
    display: block;
    font-family: var(--font-title);
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}

.review-stat-label {
    display: block;
    font-size: 1rem;
    color: var(--slate);
    margin-top: 0.35rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid rgba(27, 35, 49, 0.1);
    box-shadow: 0 4px 20px rgba(27, 35, 49, 0.08);
}

.review-card--featured {
    padding: 2rem;
}

.review-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-card--featured .review-avatar {
    width: 48px;
    height: 48px;
}

.review-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--river);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    font-family: var(--font-title);
}

.review-name {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
}

.review-role {
    display: block;
    font-size: 1rem;
    color: var(--slate);
}

.review-meta-inline {
    margin-left: auto;
}

.review-stars {
    display: flex;
    gap: 0.1rem;
}

.review-star {
    color: var(--gold);
    font-size: 1.1rem;
}

.review-text {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    border: none;
    padding: 0;
    margin: 0;
}

.review-card--featured .review-text {
    font-size: 1.05rem;
}

.review-response {
    background: var(--mist);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.6;
}

.review-response p {
    margin: 0;
}

.review-response-label {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--river);
    margin-bottom: 0.35rem;
}

.review-response-toggle {
    background: var(--mist);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--slate);
    line-height: 1.6;
}

.review-response-toggle summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    color: var(--river);
    list-style: none;
}

.review-response-toggle summary::-webkit-details-marker {
    display: none;
}

.review-response-toggle summary::before {
    content: "+ ";
}

.review-response-toggle[open] summary::before {
    content: "- ";
}

.review-response-toggle p {
    margin: 0.5rem 0 0;
}

.review-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.review-project-link {
    font-size: 1rem;
    font-weight: 600;
    margin-left: auto;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.review-source {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: var(--mist);
    color: var(--slate);
}

.review-source--google {
    background: rgba(66, 133, 244, 0.1);
    color: #4285f4;
}

.review-source--facebook {
    background: rgba(24, 119, 242, 0.1);
    color: #1877f2;
}

.review-date {
    font-size: 1rem;
    color: var(--slate);
}

.review-filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.review-filter-btn {
    padding: 0.45rem 1rem;
    border-radius: 100px;
    border: 1px solid var(--line);
    background: white;
    color: var(--slate);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.review-filter-btn:hover {
    border-color: var(--river);
    color: var(--river);
}

.review-filter-btn.is-active {
    background: var(--river);
    border-color: var(--river);
    color: white;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

@media (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* ============================================================
   SKY TIME — Dynamic time-of-day theming (prototype)

   Everything below uses --sky-* variables set by sky-time.js.
   To remove this feature entirely: delete this block and
   remove the sky-time.js script tag from base.html.
   ============================================================ */

/* Body background — overrides the static gradient when sky vars exist */
[data-sky-mode] body,
body[data-sky-mode] {
    /* won't apply unless sky-time.js has set the data attribute on <html> */
}

html[data-sky-mode] body {
    background: var(--sky-bg, linear-gradient(145deg, #f7f9ff 0%, #eef3ff 45%, #f8f5ff 100%));
    color: var(--sky-text, var(--ink));
    transition: background 2s ease, color 1s ease;
}

html[data-sky-mode] body::before {
    background: radial-gradient(circle at 15% 10%, var(--sky-accent1, rgba(120,150,255,0.18)), transparent 50%),
        radial-gradient(circle at 85% 20%, var(--sky-accent2, rgba(118,227,214,0.16)), transparent 55%);
    transition: background 2s ease;
}

/* Cards */
html[data-sky-mode] .card {
    background: var(--sky-surface, rgba(255,255,255,0.85));
    border-color: var(--sky-surface-border, var(--line));
    transition: background 1.5s ease, border-color 1.5s ease;
}

html[data-sky-mode] .card h3 {
    color: var(--sky-text, var(--ink));
}

html[data-sky-mode] .card p {
    color: var(--sky-text-secondary, var(--slate));
}

/* Header */
html[data-sky-mode] .site-header {
    background: var(--sky-header, rgba(253,251,247,0.9));
    transition: background 1.5s ease;
}

html[data-sky-mode="dark"] .site-header {
    border-bottom-color: rgba(255,255,255,0.08);
}

html[data-sky-mode="dark"] .site-header a,
html[data-sky-mode="dark"] .site-header .nav-link {
    color: #f0f2f8;
}

/* Logo — icon always stays brand blue, only text adapts */
html[data-sky-mode="dark"] {
    --logo-text: #f0f2f8;
}

html[data-sky-mode] .logo {
    transition: filter 1.5s ease;
}

/* Section headings */
html[data-sky-mode] .section-heading h2 {
    color: var(--sky-text, var(--ink));
    transition: color 1.5s ease;
}

html[data-sky-mode] .lead,
html[data-sky-mode] .section-heading p {
    color: var(--sky-text-secondary, var(--slate));
}

/* Manifesto prose */
html[data-sky-mode] .manifesto-content p {
    color: var(--sky-text-secondary, var(--slate));
}

html[data-sky-mode] .manifesto-content p strong {
    color: var(--sky-text, var(--ink));
}

/* Hero */
html[data-sky-mode] .hero h1,
html[data-sky-mode] .hero .hero-hook {
    color: var(--sky-text, var(--ink));
    transition: color 1.5s ease;
}

html[data-sky-mode] .eyebrow {
    color: var(--sky-text-secondary, var(--slate));
}

/* Megamenu */
html[data-sky-mode] .megamenu {
    background: var(--sky-surface, rgba(255,255,255,1));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top-color: var(--sky-surface-border, var(--line));
    box-shadow: 0 24px 60px rgba(0,0,0,0.18);
    transition: background 1.5s ease, border-color 1.5s ease;
}

html[data-sky-mode] .megamenu-group-label {
    color: var(--sky-text-secondary, var(--slate));
    border-bottom-color: var(--sky-surface-border, var(--line));
}

html[data-sky-mode] .megamenu-card {
    color: var(--sky-text, var(--ink));
}

html[data-sky-mode] .megamenu-card:hover,
html[data-sky-mode] .megamenu-card:focus-visible {
    background: var(--sky-surface-border, var(--mist));
}

html[data-sky-mode] .megamenu-title {
    color: var(--sky-text, var(--ink));
}

html[data-sky-mode] .megamenu-count {
    color: var(--sky-text-secondary, var(--slate));
}

html[data-sky-mode] .megamenu-footer {
    border-top-color: var(--sky-surface-border, var(--line));
}

html[data-sky-mode] .megamenu-all-link {
    color: var(--sky-text-secondary, var(--slate));
}

/* Header CTA buttons */
html[data-sky-mode="dark"] .cta-link {
    color: #f0f2f8;
    border-color: rgba(240, 242, 248, 0.35);
}

html[data-sky-mode="dark"] .cta-link:hover {
    background: var(--river);
    border-color: var(--river);
    color: #fff;
}

html[data-sky-mode="dark"] .cta-button {
    background: var(--river);
    color: #fff;
}

html[data-sky-mode="dark"] .nav-chevron {
    color: #f0f2f8;
}

/* Announcement bar */
html[data-sky-mode] .announcement-bar {
    background: var(--sky-surface, rgba(27,35,49,0.95));
    transition: background 1.5s ease;
}

html[data-sky-mode="dark"] .announcement-bar {
    background: rgba(0,0,0,0.3);
}

/* Breadcrumbs */
html[data-sky-mode] .breadcrumb-bar {
    background: var(--sky-surface, rgba(255,255,255,0.6));
    border-color: var(--sky-surface-border, var(--line));
}

html[data-sky-mode] .breadcrumb-bar a,
html[data-sky-mode] .breadcrumb-bar span {
    color: var(--sky-text-secondary, var(--slate));
}

/* Section nav */
html[data-sky-mode] .section-nav {
    background: var(--sky-surface, rgba(255,255,255,0.85));
    border-color: var(--sky-surface-border, var(--line));
    transition: background 1.5s ease;
}

/* Footer */
html[data-sky-mode] .site-footer {
    background: var(--sky-surface, var(--ink));
    transition: background 1.5s ease;
}

html[data-sky-mode="dark"] .site-footer {
    background: rgba(0,0,0,0.3);
}

/* Callout */
html[data-sky-mode] .callout-card {
    background: var(--sky-surface, rgba(255,255,255,0.85));
    border-color: var(--sky-surface-border, var(--line));
}

html[data-sky-mode] .callout-card h2 {
    color: var(--sky-text, var(--ink));
}

html[data-sky-mode] .callout-card p {
    color: var(--sky-text-secondary, var(--slate));
}

/* Toggle widget */
.sky-time-toggle {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 210;
}

.sky-time-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--sky-surface-border, var(--line));
    background: var(--sky-surface, rgba(255,255,255,0.9));
    color: var(--sky-text, var(--ink));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.3s ease, transform 0.2s ease;
    backdrop-filter: blur(8px);
}

.sky-time-btn:hover {
    transform: scale(1.1);
}

.sky-time-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 280px;
    padding: 1rem;
    border-radius: var(--radius-sm);
    background: var(--sky-surface, rgba(255,255,255,0.95));
    border: 1px solid var(--sky-surface-border, var(--line));
    backdrop-filter: blur(16px);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sky-time-popup[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.sky-time-desc {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sky-text-secondary, var(--slate));
    margin-bottom: 0.75rem;
}

/* Slider track and labels */
.sky-time-slider-wrap {
    margin-bottom: 0.75rem;
}

.sky-time-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: var(--sky-text-secondary, var(--slate));
    opacity: 0.7;
    margin-bottom: 0.25rem;
    padding: 0 2px;
}

.sky-time-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    border-radius: 6px;
    background: var(--track-gradient, linear-gradient(to right, #1b2540, #f5a663, #b8dcf8, #f8f8f8, #b8dcf8, #f5a663, #1b2540));
    outline: none;
    cursor: pointer;
    border: 1px solid var(--sky-surface-border, var(--line));
}

.sky-time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--thumb-color, #fff);
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: grab;
    transition: transform 0.15s ease, background 0.3s ease;
}

.sky-time-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.sky-time-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.sky-time-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--thumb-color, #fff);
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: grab;
}

.sky-time-slider::-moz-range-track {
    height: 12px;
    border-radius: 6px;
    background: var(--track-gradient);
    border: 1px solid var(--sky-surface-border, var(--line));
}

.sky-time-slider-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;
    padding: 0 2px;
}

.sky-time-current-time {
    font-size: 1rem;
    font-weight: 700;
    font-family: var(--font-title);
    color: var(--sky-text, var(--ink));
}

.sky-time-current-label {
    font-size: 1rem;
    color: var(--sky-text-secondary, var(--slate));
    font-style: italic;
}

/* Auto button */
.sky-time-auto-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--sky-surface-border, var(--line));
    background: transparent;
    color: var(--sky-text-secondary, var(--slate));
    font-size: 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sky-time-auto-btn.is-active {
    background: var(--river);
    color: #fff;
    border-color: var(--river);
}

.sky-time-auto-btn:hover:not(.is-active) {
    border-color: var(--river);
    color: var(--sky-text, var(--ink));
}

.sky-time-auto-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.sky-time-auto-btn.is-active .sky-time-auto-dot {
    background: #6fe8b0;
    opacity: 1;
    animation: sky-auto-pulse 2s ease-in-out infinite;
}

@keyframes sky-auto-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ─── Blog post body ─── */

.blog-post-body {
    padding: 3rem 0 4rem;
}

.blog-post-content {
    max-width: 720px;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ink);
}

.blog-post-content h2 {
    font-family: var(--font-title);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2.5rem 0 0.75rem;
    color: var(--ink);
}

.blog-post-content h3 {
    font-family: var(--font-title);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 2rem 0 0.6rem;
    color: var(--ink);
}

.blog-post-content p {
    margin-bottom: 1.25rem;
}

.blog-post-content ul,
.blog-post-content ol {
    margin: 0 0 1.25rem 1.5rem;
}

.blog-post-content li {
    margin-bottom: 0.4rem;
}

.blog-post-content strong {
    font-weight: 700;
    color: var(--ink);
}

.blog-post-content a {
    color: var(--river);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-post-content a:hover {
    color: var(--sage);
}

.blog-post-content code {
    font-family: monospace;
    font-size: 1em;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.1em 0.4em;
}

.blog-post-cta {
    max-width: 720px;
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

/* ─── Blog: embedded blocks (Portable Text body) ─── */
/* Blog body sits directly on the page background - no enclosing card.
   Cards are reserved for high-impact blocks (quote, stats, CTA, comparison).
   These prose rules replace what the body used to inherit from `.card`. */

/* Shared reading measure for blog post pages. ~70ch at the body font size,
   which matches best-practice line length for long-form prose. The hero
   copy and the body share this measure so the column edges line up. */
:root { --blog-measure: 44rem; }

/* Constrain the hero's CONTAINER (not just the copy block) so its left edge
   lines up with the body container. The body container is centered at
   --blog-measure, so the hero must center at the same width or the body
   appears shifted right of the hero. */
.hero.hero--post > .container { max-width: var(--blog-measure); }
.hero.hero--post .hero-copy { max-width: 100%; }
.hero.hero--post { padding-bottom: 2rem; }
.hero.hero--post h1 {
    font-size: clamp(1.9rem, 2.8vw, 2.75rem);
    line-height: 1.15;
}
.hero.hero--post .lead {
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--slate);
    font-style: italic;
}

.post-body-section { padding-top: 0; }
.post-body-section > .container { max-width: var(--blog-measure); }

/* Topic chips - public-facing category tags shown in the hero meta row.
   Audience labels stay internal-only; these are the reader-friendly signal. */
.post-topics {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.topic-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--mist);
    border: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topic-chip:hover {
    background: var(--shell);
    border-color: var(--sage);
}

.post-meta-dot { color: var(--slate); opacity: 0.5; margin: 0 0.15rem; }
.post-meta-reading { color: var(--slate); font-size: 0.95rem; }

/* Tech-level info-tip nests inside the label and inherits its baseline. */
.tech-meter-label .info-tip { margin-left: 0.35rem; vertical-align: middle; }

/* Related services - shown at the bottom of a post if relatedServices is set
   on the Sanity blog post. Mirrors the next-steps grid styling. */
.related-services { padding-bottom: 2rem; }
.related-services > .container { max-width: var(--max-width); }
.related-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
.related-service-card {
    position: relative;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.related-service-card:hover {
    transform: translateY(-2px);
    border-color: var(--sage);
}
.related-service-emoji { font-size: 1.8rem; line-height: 1; margin-bottom: 0.3rem; }
.related-service-card h3 { margin: 0; font-size: 1.15rem; }
.related-service-card p { margin: 0; color: var(--slate); font-size: 0.95rem; line-height: 1.5; }
.related-service-arrow {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    color: var(--sage);
    font-size: 1.2rem;
    transition: transform 0.15s ease;
}
.related-service-card:hover .related-service-arrow { transform: translateX(3px); }

.blog-body {
    max-width: var(--blog-measure);
    margin-left: auto;
    margin-right: auto;
    font-size: 1.0625rem;
    line-height: 1.7;
}
/* Prose vertical rhythm. Headings get extra top margin to separate them from
   the preceding paragraph; paragraphs get bottom margin so consecutive prose
   does not run together. First/last child margins are zeroed so the body does
   not push the section edges outward. */
.blog-body p,
.blog-body li {
    color: var(--slate);
    margin: 0 0 1.1em;
}
.blog-body h2,
.blog-body h3,
.blog-body h4 {
    color: var(--ink);
    line-height: 1.25;
    margin: 2.2em 0 0.6em;
}
.blog-body h2 { font-size: 1.6rem; }
.blog-body h3 { font-size: 1.3rem; }
.blog-body h4 { font-size: 1.1rem; }
.blog-body > *:first-child { margin-top: 0; }
.blog-body > *:last-child { margin-bottom: 0; }
.blog-body ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    margin: 1rem 0;
}
.blog-body li::before {
    content: "→";
    margin-right: 0.5rem;
    color: var(--sage);
}

.blog-body .blog-block {
    margin: 2rem 0;
}
.blog-body .blog-block:first-child {
    margin-top: 0;
}
.blog-body .blog-block:last-child {
    margin-bottom: 0;
}

/* Pullquote */
.blog-body .blog-quote {
    border-left: 4px solid var(--sage);
    padding: 0.25rem 0 0.25rem 1.5rem;
    margin-left: 0;
    margin-right: 0;
}
.blog-body .blog-quote p {
    margin: 0;
    font-family: var(--font-title);
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 600;
    color: var(--ink);
}
.blog-body .blog-quote footer {
    margin-top: 0.75rem;
    font-size: 0.92rem;
    color: var(--slate);
}
.blog-body .blog-quote footer strong {
    color: var(--ink);
    font-weight: 700;
}
.blog-body .blog-quote-role::before {
    content: " · ";
}
.blog-body .blog-quote-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.blog-body .blog-quote-share-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--slate);
}
.blog-body .blog-quote-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--slate);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.blog-body .blog-quote-share-btn:hover {
    color: var(--ink);
    border-color: var(--slate);
}
.blog-body .blog-quote-copy {
    position: relative;
}
.blog-body .blog-quote-copied {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--ink);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.blog-body .blog-quote-copy.is-copied {
    color: var(--sage);
    border-color: var(--sage);
}
.blog-body .blog-quote-copy.is-copied .blog-quote-copied {
    display: block;
}

/* Stats panel */
.blog-body .blog-stats {
    background: var(--mist);
    border-radius: var(--radius-sm);
    padding: 1.6rem;
}
.blog-body .blog-stats-heading {
    margin: 0 0 1.1rem;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}
.blog-body .blog-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1.25rem;
}
.blog-body .blog-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.blog-body .blog-stat-value {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--sage);
}
.blog-body .blog-stat-label {
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--slate);
}

/* CTA */
.blog-body .blog-cta {
    background: var(--shell);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1.8rem;
    text-align: center;
}
.blog-body .blog-cta-headline {
    margin: 0 0 0.5rem;
    font-family: var(--font-title);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
}
.blog-body .blog-cta-text {
    margin: 0 auto 1.25rem;
    max-width: 48ch;
    color: var(--slate);
}

/* Figure */
.blog-body .blog-figure {
    margin-left: 0;
    margin-right: 0;
}
.blog-body .blog-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.blog-body .blog-figure figcaption {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.86rem;
    color: var(--slate);
}

/* Comparison table */
.blog-body .blog-comparison {
    background: var(--mist);
    border-radius: var(--radius-sm);
    padding: 1.6rem;
}
.blog-body .blog-comparison-heading {
    margin: 0 0 1.1rem;
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}
.blog-body .blog-comparison-scroll {
    overflow-x: auto;
}
.blog-body .blog-comparison-table {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.blog-body .blog-comparison-table th,
.blog-body .blog-comparison-table td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--line);
    background: #fff;
}
.blog-body .blog-comparison-table thead th {
    font-family: var(--font-title);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
}
.blog-body .blog-comparison-table tbody th {
    width: 26%;
    font-weight: 700;
    color: var(--ink);
}
.blog-body .blog-comparison-table tbody td {
    color: var(--slate);
}
.blog-body .blog-comparison-table td.is-winner {
    background: rgba(106, 143, 122, 0.2);
    color: var(--ink);
    font-weight: 600;
}
.blog-body .blog-comparison-win {
    /* Emitted on both cells; revealed only on the winning one. */
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
}
.blog-body .blog-comparison-table td.is-winner .blog-comparison-win {
    display: inline-flex;
}

/* Interactive comparison - priority triangle */
.blog-body .bc-perspective {
    margin-bottom: 1.6rem;
}
.blog-body .bc-perspective-intro {
    margin: 0 auto 1rem;
    max-width: 52ch;
    font-size: 0.88rem;
    color: var(--slate);
    text-align: center;
}
.blog-body .bc-perspective-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.2rem 2rem;
}
.blog-body .bc-triangle {
    width: 244px;
    height: 231px;
    flex: none;
    touch-action: none;
    cursor: crosshair;
}
.blog-body .bc-tri-area {
    stroke: var(--line);
    stroke-width: 1.5;
}
.blog-body .bc-tri-label {
    font-family: var(--font-title);
    font-size: 13px;
    font-weight: 700;
    fill: var(--ink);
}
.blog-body .bc-stop {
    fill: #fff;
    stroke: var(--slate);
    stroke-width: 1.5;
    cursor: pointer;
    transition: fill 0.12s ease, stroke 0.12s ease;
}
.blog-body .bc-stop:hover {
    stroke: var(--ink);
}
.blog-body .bc-stop.is-active {
    fill: var(--sage);
    stroke: var(--sage);
}
.blog-body .bc-handle {
    fill: var(--sage);
    stroke: #fff;
    stroke-width: 3;
    pointer-events: none;
}
.blog-body .bc-readout {
    flex: 1 1 240px;
    max-width: 330px;
}
.blog-body .bc-readout-eyebrow {
    margin: 0 0 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
}
.blog-body .bc-readout-name {
    margin: 0 0 0.5rem;
    font-family: var(--font-title);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--sage);
}
.blog-body .bc-readout-desc {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--slate);
}

/* ─── Legacy Cost Calculator ────────────────────────────────────────────── */

.legacy-calc {
    padding: 4rem 0;
}

.legacy-calc-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    align-items: start;
}

.legacy-input-group {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.legacy-input-group h3 {
    font-family: var(--font-title);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: var(--ink);
}

.legacy-input-row {
    margin-bottom: 1.2rem;
}

.legacy-input-row:last-child {
    margin-bottom: 0;
}

.legacy-input-row label {
    display: block;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.4rem;
}

.legacy-input-control {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.legacy-input-control input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--mist);
    border-radius: 3px;
    outline: none;
}

.legacy-input-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--river);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.legacy-input-control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--river);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.legacy-input-control output {
    min-width: 70px;
    text-align: right;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1rem;
    color: var(--river);
}

.legacy-input-hint {
    font-size: 1rem;
    color: var(--slate);
    margin-top: 0.3rem;
    line-height: 1.4;
}

.legacy-calc-results {
    position: sticky;
    top: calc(var(--header-height) + var(--breadcrumb-height) + var(--nav-height) + 1rem);
}

.legacy-result-card {
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.legacy-result-card h4 {
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--line);
}

.legacy-result-card--bad {
    background: #fef3cd;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.legacy-result-card--bad h4 {
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.2);
}

.legacy-result-card--good {
    background: rgba(106, 143, 122, 0.1);
    border: 1px solid rgba(106, 143, 122, 0.2);
}

.legacy-result-card--good h4 {
    color: var(--sage);
    border-color: rgba(106, 143, 122, 0.2);
}

.legacy-result-card--highlight {
    background: var(--river);
    color: white;
    border: none;
}

.legacy-result-card--highlight .legacy-result-label {
    color: rgba(255, 255, 255, 0.7);
}

.legacy-result-card--highlight .legacy-result-amount {
    color: white;
}

.legacy-result-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.legacy-result-stat:last-child {
    margin-bottom: 0;
}

.legacy-result-label {
    font-size: 1rem;
    color: var(--slate);
}

.legacy-result-amount {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
}

.legacy-result-amount--big {
    font-size: 1.3rem;
}

/* Chart section */

.legacy-chart-section {
    padding: 4rem 0;
    background: var(--mist);
}

.legacy-chart-wrap {
    margin-top: 2rem;
    background: white;
    border-radius: var(--radius);
    padding: 2rem;
    border: 1px solid var(--line);
}

.legacy-cost-chart {
    width: 100%;
    min-height: 340px;
}

.legacy-cost-chart .axis text {
    font-family: var(--font-body);
    font-size: 12px;
    fill: var(--slate);
}

.legacy-cost-chart .axis path,
.legacy-cost-chart .axis line {
    stroke: var(--line);
}

.legacy-chart-legend {
    display: flex;
    gap: 2rem;
    justify-content: center;
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--slate);
}

.legacy-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legacy-legend-swatch {
    display: inline-block;
    width: 16px;
    height: 4px;
    border-radius: 2px;
}

.legacy-legend-item--legacy .legacy-legend-swatch {
    background: #D97706;
}

.legacy-legend-item--rebuild .legacy-legend-swatch {
    background: #2E5C8A;
}

/* Responsive */

@media (max-width: 768px) {
    .legacy-calc-layout {
        grid-template-columns: 1fr;
    }

    .legacy-calc-results {
        position: static;
    }
}

/* ---------- Contact page layout ---------- */
.contact-header {
    padding: 4rem 0 2.4rem;
    text-align: center;
}

.contact-header-inner {
    max-width: 620px;
    margin: 0 auto;
}

.contact-header-inner .eyebrow {
    justify-content: center;
    margin: 0 auto 1.2rem;
}

.contact-header-hook {
    font-family: var(--font-title);
    font-weight: 800;   /* match the homepage hero weight (was 700 - read too thin) */
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 0.8rem;
}

.contact-header-lead {
    color: var(--slate);
    font-size: 1.1rem;
    line-height: 1.55;
    margin: 0 auto;
    max-width: 48ch;
}

.contact-main-section {
    padding-top: 1rem;
}

.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.contact-main-form {
    min-width: 0;
}

.contact-main-side {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 1.6rem;
    min-width: 0;
}

@media (max-width: 960px) {
    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }
    .contact-main-side {
        position: static;
    }
}

/* ---------- Book a strategy call (/book) ---------- */
/* Lift all page content above the fixed CloudAtmosphere (z-index 0/frost) */
.book-page {
    position: relative;
    z-index: 1;
}

.book-section {
    padding-top: 1rem;
}

.book-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 3rem;
    align-items: start;
    max-width: 980px;
    margin-inline: auto;
}

.book-layout .book-expect {
    position: sticky;
    top: 6rem;
}

/* Left column is open (not a card) so "What to expect" aligns with "Grab a time"
   on the right instead of being pushed down by card padding. Keeps the .side-card
   class only so the scoped .how-i-work bullet styling still applies. */
.book-expect.side-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Match the left heading to the right "Grab a time" heading so they read as peers */
.book-expect .side-card-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: none;   /* title case, like "Grab a time" (base .side-card-title is uppercase) */
    letter-spacing: normal;
    color: var(--ink);
    margin: 0 0 1.25rem;
}

.booking-panel {
    min-width: 0;
}

.booking-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--ink);
    margin: 0 0 1rem;
}

.booking-embed {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    padding: 2.5rem 1.5rem;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

/* When the Reclaim script embed injects its iframe, let it fill the panel */
.booking-embed iframe {
    width: 100%;
    min-height: 640px;
    border: 0;
}

.booking-cta {
    font-size: 1.05rem;
    padding: 0.95rem 1.8rem;
}

.booking-direct {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: var(--slate);
    text-align: center;
}

/* Reputation stop - social proof between the booking panel and the alt-contact */
.book-reputation {
    padding-top: 1rem;
}

.book-reputation-inner {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.book-reputation-stars {
    color: var(--gold, #f5b301);
    display: inline-flex;
    gap: 0.15rem;
}

.book-reputation-quote {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.35;
    color: var(--ink);
    margin: 0;
    max-width: 42ch;
    text-wrap: balance;
}

.book-reputation-attr {
    margin: 0;
    color: var(--slate);
    font-weight: 600;
    font-size: 0.95rem;
}

.book-reputation-meta {
    margin: 0.4rem 0 0;
    color: var(--slate);
    font-size: 0.92rem;
}

.book-reputation-meta strong {
    color: var(--ink);
}

.book-reputation-google {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    vertical-align: -0.22em;
    margin-right: 0.35rem;
    font-weight: 600;
    color: var(--slate);
    text-decoration: none;
}

.book-reputation-google:hover {
    color: var(--ink);
}

.book-reputation-google svg {
    display: block;
}

.book-alt-section {
    padding-top: 0;
}

.book-alt {
    max-width: 980px;
    margin-inline: auto;
    text-align: center;
    border-top: 1px solid var(--line);
    padding-top: 2rem;
    display: grid;
    justify-items: center;
    gap: 1rem;
}

.book-alt p {
    color: var(--slate);
    margin: 0;
}

/* Ways to reach me - compact contact preference card at the top of /book */
.book-reach-section {
    padding-top: 0.25rem;
    padding-bottom: 1.9rem;
}

.book-reach {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
}

/* Book = dominant; text/call sit together as a low-friction "reach out" line */
.book-reach-primary {
    margin: 0 0 0.4rem;
    font-family: var(--font-title);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
}

.book-reach-list {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    text-align: center;
    display: grid;
    gap: 0.4rem;
    font-size: 0.98rem;
    color: var(--ink);
    line-height: 1.45;
}

.book-reach-status {
    color: var(--slate);
    font-size: 0.9em;
    white-space: nowrap;
}

.book-reach-status.is-open {
    color: #3f8f5a;
    font-weight: 600;
}

/* "Why text?" tooltip on the text-or-call line - keeps the visible line short
   (protects the inverted-triangle shape) while explaining the preference on hover */
.reach-tip {
    position: relative;
    outline: none;
}

/* "Text" and "call" are their own action links (sms / tel) with dotted underlines,
   distinct from the solid river number link */
.book-reach a.reach-tip {
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dotted var(--slate);
    white-space: nowrap;
}

.book-reach a.reach-tip:hover,
.book-reach a.reach-tip:focus {
    color: var(--river);
    border-bottom-color: var(--river);
}

.reach-tip-bubble {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    width: 250px;
    white-space: normal;
    transform: translateX(-50%) translateY(4px);
    background: var(--ink);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 24, 48, 0.22);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    z-index: 6;
}

.reach-tip-bubble strong {
    color: #ffd54a;
}

.reach-tip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ink);
}

.reach-tip:hover .reach-tip-bubble,
.reach-tip:focus .reach-tip-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.book-reach a {
    color: var(--river);
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 960px) {
    .book-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .book-layout .book-expect {
        position: static;
    }
}

/* ---------- Contact shortcuts (call / book) ---------- */
.contact-shortcuts {
    display: grid;
    gap: 0.8rem;
    text-align: left;
}

.shortcut {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
    text-align: left;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    width: 100%;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.shortcut:hover {
    border-color: var(--river);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(34, 60, 111, 0.1);
}

.shortcut:focus-visible {
    outline: 2px solid rgba(46, 92, 138, 0.6);
    outline-offset: 3px;
}

.shortcut-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--mist, #eef2f6);
    color: var(--river);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shortcut:hover .shortcut-icon {
    background: var(--river);
    color: #fff;
}

.shortcut-body {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.shortcut-body strong {
    font-size: 0.98rem;
    line-height: 1.2;
}

.shortcut-body span {
    color: var(--slate);
    font-size: 0.85rem;
    line-height: 1.35;
}

/* ---------- Sidebar "How I work" card ---------- */
.side-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem 1.6rem 1.4rem;
    box-shadow: 0 18px 44px rgba(20, 27, 45, 0.04);
}

.side-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sage);
    margin: 0 0 1rem;
}

.side-card .how-i-work {
    margin: 0;
    gap: 0.9rem;
}

.side-card .how-item {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding-bottom: 0.9rem;
}

/* NOTE: root is 18px (html { font-size: 112.5% }), so 1rem = 18px here, NOT 16px.
   0.95rem = 17.1px and 0.9rem = 16.2px - both already clear the 16px body floor.
   Do not "fix" these by converting rem at 16px/rem; that maths does not apply on this site. */
.side-card .how-item dt {
    font-size: 0.95rem;
}

.side-card .how-item dd {
    font-size: 0.9rem;
    line-height: 1.5;
}

.side-card-link {
    margin: 1.1rem 0 0;
    font-size: 0.9rem;
}

/* ---------- Contact modal (text or call) ---------- */
.contact-modal {
    border: 0;
    border-radius: var(--radius);
    padding: 0;
    max-width: 420px;
    width: calc(100% - 2rem);
    background: #fff;
    box-shadow: 0 30px 80px rgba(20, 27, 45, 0.25);
    margin: auto;
    position: fixed;
    inset: 0;
}

.contact-modal::backdrop {
    background: rgba(20, 27, 45, 0.45);
    backdrop-filter: blur(2px);
}

.contact-modal-inner {
    position: relative;
    padding: 2.2rem 2rem 1.8rem;
    text-align: center;
}

.contact-modal-inner h2 {
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 0 0 0.5rem;
    color: var(--ink);
}

.contact-modal-lead {
    color: var(--slate);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.6rem;
}

.contact-modal-actions {
    display: grid;
    gap: 0.7rem;
}

.contact-modal-actions .btn {
    width: 100%;
    padding: 0.95rem 1.4rem;
    font-size: 1rem;
}

.contact-modal-phone {
    margin: 1.2rem 0 0;
    font-size: 0.9rem;
    color: var(--slate);
    letter-spacing: 0.02em;
}

.contact-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--slate);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
}

.contact-modal-close:hover {
    background: var(--mist, #eef2f6);
    color: var(--ink);
}

.contact-modal-close:focus-visible {
    outline: 2px solid rgba(46, 92, 138, 0.6);
    outline-offset: 2px;
}

.obf-email {
    cursor: pointer;
}

.contact-info-link {
    margin: 1.4rem 0 0;
}

/* ---------- Form signature row ---------- */
.contact-sig {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    max-width: 620px;
    margin: 0 auto 1.2rem;
    padding: 0.2rem 0.2rem;
}

.contact-sig .about-avatar {
    width: 44px;
    height: 44px;
}

.contact-sig .about-sig-text strong {
    font-size: 0.98rem;
    line-height: 1.2;
}

.contact-sig .about-sig-text span {
    font-size: 0.82rem;
}

/* Blog index author signature - anchors the first-person hero voice ("Thinking
   out loud") to a name + face so it clearly reads as Bobby, the author/founder. */
.blog-author {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.6rem;
}

/* Personal motto under the blog lead - its own line, styled as a humble
   signature aside rather than part of the descriptive lead sentence. */
.blog-tagline {
    margin: 0.5rem 0 0;
    font-family: var(--font-title);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--slate);
}

/* ---------- How I work list ---------- */
.how-i-work {
    margin: 1.6rem 0 0;
    display: grid;
    gap: 1.1rem;
}

.how-item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 1.4rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
}

.how-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.how-item dt {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.98rem;
    line-height: 1.35;
}

.how-item dd {
    margin: 0;
    color: var(--slate);
    font-size: 0.96rem;
    line-height: 1.55;
}

@media (max-width: 900px) {
    .how-item {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
}

.contact-alt {
    text-align: center;
    margin: 1.8rem auto 0;
    color: var(--slate);
    font-size: 0.98rem;
}

.contact-alt a {
    color: var(--ink);
    font-weight: 600;
}

.contact-alt .alt-sep {
    margin: 0 0.6rem;
    color: var(--line);
}

@media (max-width: 560px) {
    .contact-header {
        padding: 2.5rem 0 1.8rem;
    }
    .contact-alt .alt-sep {
        display: block;
        margin: 0.3rem 0;
        color: transparent;
    }
}

/* ---------- Contact info + map ---------- */
.contact-info {
    padding-top: 2rem;
}

.contact-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.contact-info-copy h2 {
    color: var(--ink);
    margin: 0 0 0.8rem;
}

.contact-info-lead {
    color: var(--slate);
    font-size: 1.05rem;
    line-height: 1.65;
    margin: 0 0 2rem;
    max-width: 48ch;
}

.nap-list {
    display: grid;
    gap: 1.4rem;
    margin: 0;
}

.nap-item {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1.4rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
}

.nap-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.nap-item dt {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sage);
    padding-top: 0.15rem;
}

.nap-item dd {
    margin: 0;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.55;
}

.nap-item address {
    font-style: normal;
}

.nap-item a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(46, 92, 138, 0.25);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.nap-item a:hover {
    text-decoration-color: var(--river);
}

.hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.hours-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.hours-list li span:first-child {
    color: var(--slate);
}

.social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--mist, #f1f4f7);
    color: var(--ink);
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.social-icon:hover {
    background: var(--river);
    color: #fff;
    transform: translateY(-2px);
}

.social-icon:focus-visible {
    outline: 2px solid rgba(46, 92, 138, 0.6);
    outline-offset: 3px;
}

.social-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.contact-map {
    position: sticky;
    top: 6rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px rgba(20, 27, 45, 0.06);
    aspect-ratio: 4 / 5;
    background: var(--mist);
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 900px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .contact-map {
        position: static;
        aspect-ratio: 4 / 3;
    }
    .nap-item {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }
}

/* ---------- Book a call form ---------- */
.book-call {
    max-width: 620px;
    margin: 0 auto;
}

.book-call-form {
    display: grid;
    gap: 1.6rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.4rem;
    box-shadow: 0 18px 44px rgba(20, 27, 45, 0.06);
}

.book-call-form[hidden] {
    display: none;
}

.book-call-form .field {
    display: grid;
    gap: 0.45rem;
}

.book-call-form label {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.98rem;
    letter-spacing: -0.005em;
}

.book-call-form .req {
    color: var(--river);
    margin-left: 0.15rem;
}

.book-call-form .optional {
    font-weight: 400;
    color: var(--slate);
    font-size: 0.9em;
    margin-left: 0.3rem;
}

.book-call-form input,
.book-call-form select,
.book-call-form textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: var(--shell, #fafbfc);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
}

.book-call-form textarea {
    resize: vertical;
    min-height: 7rem;
    line-height: 1.55;
}

.book-call-form select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23141b2d' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    background-size: 10px;
    padding-right: 2.4rem;
}

.book-call-form input:hover,
.book-call-form select:hover,
.book-call-form textarea:hover {
    border-color: rgba(46, 92, 138, 0.45);
}

.book-call-form input:focus-visible,
.book-call-form select:focus-visible,
.book-call-form textarea:focus-visible {
    outline: none;
    border-color: var(--river);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(46, 92, 138, 0.18);
}

.book-call-form [aria-invalid="true"] {
    border-color: #b84a3a;
    background: #fff6f4;
}

.book-call-form [aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(184, 74, 58, 0.2);
}

.book-call-form .field-hint {
    color: var(--slate);
    font-size: 0.88rem;
    margin: 0;
}

.book-call-form .field-err {
    color: #b84a3a;
    font-size: 0.88rem;
    margin: 0;
    min-height: 0;
}

.book-call-form .field-err:empty {
    display: none;
}

.book-call-form .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.book-call-form .turnstile-field {
    margin-top: 0.2rem;
}

.book-call-form .cf-turnstile {
    min-height: 65px;
}

.book-call-form .form-actions {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.4rem;
}

.book-call-form .btn {
    width: 100%;
    position: relative;
}

.book-call-form .btn[aria-busy="true"] .btn-label {
    opacity: 0.4;
}

.book-call-form .btn-spinner {
    display: none;
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bc-spin 0.7s linear infinite;
}

.book-call-form .btn[aria-busy="true"] .btn-spinner {
    display: block;
}

@keyframes bc-spin {
    to { transform: rotate(360deg); }
}

.book-call-form .form-status {
    color: var(--slate);
    font-size: 0.92rem;
    margin: 0;
    text-align: center;
    min-height: 1.2em;
}

.book-call-form .form-status.is-error {
    color: #b84a3a;
    font-weight: 500;
}

/* ---------- Accessibility utility ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---------- Newsletter signup ---------- */
.newsletter {
    display: grid;
    gap: 1rem;
}

.newsletter-heading {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 0.3rem;
}

.newsletter-lead {
    color: var(--slate);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
    max-width: 44ch;
}

.newsletter-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.newsletter-row input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    font: inherit;
    font-size: 0.98rem;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.85rem 1.2rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.newsletter-row input[type="email"]:focus-visible {
    outline: none;
    border-color: var(--river);
    box-shadow: 0 0 0 3px rgba(46, 92, 138, 0.18);
}

.newsletter-submit {
    padding: 0.85rem 1.6rem !important;
    font-size: 0.98rem !important;
}

.newsletter-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.newsletter-status {
    font-size: 0.88rem;
    color: var(--slate);
    margin: 0;
    min-height: 1.2em;
}

.newsletter-status.is-error {
    color: #b84a3a;
    font-weight: 500;
}

.newsletter--footer {
    background: var(--mist);
    border: 0;
    border-radius: var(--radius);
    padding: 1.85rem 1.9rem;
    max-width: 480px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 18px 40px rgba(20, 27, 45, 0.08);
}

.newsletter--footer .newsletter-heading {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.newsletter--footer .newsletter-lead {
    font-size: 0.94rem;
    max-width: 46ch;
}

.footer-cta-card {
    margin-top: 1.2rem;
    max-width: 480px;
    padding: 1.5rem 1.7rem;
    border-radius: var(--radius);
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(200, 160, 70, 0.22), transparent 55%),
        linear-gradient(135deg, #1f3550 0%, #2e5c8a 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
    box-shadow: 0 18px 40px rgba(20, 27, 45, 0.18);
    position: relative;
    overflow: hidden;
}

.footer-cta-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 100% at 100% 100%, rgba(255, 255, 255, 0.08), transparent 60%);
    pointer-events: none;
}

.footer-cta-copy {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 200px;
    position: relative;
    z-index: 1;
}

.footer-cta-eyebrow {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}

.footer-cta-heading {
    font-family: var(--font-title);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: #fff;
}

.footer-cta-lead {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.45;
}

.footer-cta-btn {
    position: relative;
    z-index: 1;
    background: #fff !important;
    color: var(--ink) !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.98rem !important;
    white-space: nowrap;
}

.footer-cta-btn:hover {
    background: var(--gold) !important;
    color: var(--ink) !important;
}

@media (max-width: 600px) {
    .footer-cta-card {
        padding: 1.3rem 1.4rem;
    }
    .footer-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Thank-you page ---------- */
.ty-hero {
    padding: 5rem 0 2.5rem;
    text-align: center;
}

.ty-inner {
    max-width: 620px;
    margin: 0 auto;
}

.ty-mark {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e8f3ec, #d7ebe0);
    color: var(--sage);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.6rem;
    box-shadow: 0 10px 28px rgba(106, 143, 122, 0.2);
}

.ty-mark svg {
    width: 32px;
    height: 32px;
}

.ty-hero .eyebrow {
    justify-content: center;
    margin: 0 auto 1rem;
}

.ty-hook {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 1rem;
}

.ty-lead {
    color: var(--slate);
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0 auto 2.2rem;
    max-width: 48ch;
}

.ty-sig {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1.2rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(20, 27, 45, 0.05);
    text-align: left;
}

.ty-next-card {
    max-width: 680px;
    margin: 0 auto;
    padding: 2.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 18px 44px rgba(20, 27, 45, 0.06);
    text-align: center;
}

.ty-next-card h2 {
    color: var(--ink);
    margin: 0 0 0.6rem;
}

.ty-next-card p {
    color: var(--slate);
    font-size: 1.02rem;
    line-height: 1.55;
    margin: 0 auto 1.6rem;
    max-width: 48ch;
}

.ty-next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

.ty-explore {
    max-width: 680px;
    margin: 3rem auto 0;
}

.ty-explore h3 {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sage);
    text-align: center;
    margin: 0 0 1.2rem;
}

.ty-explore-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.8rem;
}

.ty-explore-list a {
    display: block;
    padding: 1.1rem 1.4rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ty-explore-list a:hover {
    border-color: var(--river);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(34, 60, 111, 0.08);
}

.ty-explore-list strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.2rem;
}

.ty-explore-list span {
    color: var(--slate);
    font-size: 0.9rem;
    line-height: 1.45;
}

@media (max-width: 560px) {
    .ty-hero { padding: 3rem 0 2rem; }
    .ty-next-card { padding: 1.8rem 1.4rem; }
    .ty-next-actions .btn { width: 100%; text-align: center; justify-content: center; }
}

@media (max-width: 560px) {
    .book-call-form {
        padding: 1.6rem;
    }
    .book-call-thanks {
        padding: 2rem 1.4rem;
    }
    .book-call-thanks .thanks-actions .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .book-call-form .btn-spinner {
        animation: none;
    }
}

/* Portfolio + project + tool pages (Sanity-driven) */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.6rem;
    margin-top: 2rem;
}
.portfolio-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.portfolio-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
    border-color: var(--ink);
}
.portfolio-card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--mist);
}
.portfolio-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.portfolio-card-body {
    padding: 1.2rem 1.3rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.portfolio-card-client {
    margin: 0;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
}
.portfolio-card-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
}
.portfolio-card-descriptor {
    margin: 0.2rem 0 0;
    color: var(--slate);
    font-size: 0.92rem;
}
.portfolio-card-chips {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.portfolio-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--shell);
    font-size: 0.78rem;
    color: var(--ink);
    text-decoration: none;
    line-height: 1.4;
}
a.portfolio-chip:hover {
    border-color: var(--ink);
}

.project-detail-eyebrow {
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
}
.project-detail-eyebrow a {
    color: var(--slate);
    text-decoration: none;
}
.project-detail-eyebrow a:hover {
    color: var(--ink);
}
.project-detail-header {
    margin-bottom: 1.6rem;
}
.project-detail-client {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate);
}
.project-detail-title {
    margin: 0 0 0.4rem;
}
.project-detail-descriptor {
    margin: 0;
    font-size: 1.1rem;
    color: var(--slate);
}
.project-detail-image {
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.6rem 0;
    border: 1px solid var(--line);
}
.project-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}
.project-detail-summary {
    max-width: 720px;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.project-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem;
    padding: 1.6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--shell);
    margin-bottom: 2rem;
}
.project-detail-meta-block h3 {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate);
}
.project-detail-meta-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}
.project-detail-meta-head h3 {
    margin-bottom: 0;
}
.project-detail-meta-manage {
    font-size: 0.78rem;
    color: var(--slate);
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--shell);
    margin-bottom: 0.6rem;
    line-height: 1.4;
    white-space: nowrap;
}
.project-detail-meta-manage:hover {
    color: var(--ink);
    border-color: var(--ink);
}
/* Editor-only affordances are hidden for the public and revealed inside the
   Sanity Presentation iframe via the .is-in-editor class on <html>. */
.editor-only { display: none !important; }
.is-in-editor .editor-only { display: inline-flex !important; }
.project-detail-chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.project-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.tool-detail-header {
    text-align: center;
    margin-bottom: 2rem;
}
.tool-detail-icon {
    margin-bottom: 1rem;
}
.tool-detail-name {
    margin: 0 0 0.3rem;
}
.tool-detail-context {
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate);
}
.tool-detail-summary {
    max-width: 720px;
    margin: 0 auto 1.6rem;
}
.tool-detail-summary h3 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--slate);
}

/* ============================================================
   Page-builder bands (Sanity sections)
   ============================================================ */
.section-block { padding: 4rem 0; }
.section-block + .section-block { padding-top: 2rem; }

/* When a sectionGroup wraps its sections with a shared background, give
   the wrapper continuous color and let inner sections sit transparent
   so the group color reads as one unit. */
.section-group {
    padding: 3rem 0;
}
.section-group > .section-block,
.section-group > .section-block.section-block {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background: transparent;
}
.section-group > .section-block:first-child { padding-top: 0; }
.section-group > .section-block:last-child { padding-bottom: 0; }

.section-group--light { background: #eaf1ec; }
.section-group--muted { background: #f1ece1; }
.section-group--dark { background: var(--ink); color: var(--shell); }
.section-group--dark h1,
.section-group--dark h2,
.section-group--dark h3,
.section-group--dark p,
.section-group--dark .eyebrow,
.section-group--dark .lead { color: var(--shell); }
.section-group--dark .eyebrow { color: var(--gold); }
.section-group--dark .card,
.section-group--dark .pullquote {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--shell);
}
.section-group--dark .pullquote { border-left-color: var(--gold); }
.section-group--dark .quote-role { color: rgba(255, 255, 255, 0.7); }

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.two-column--image-left .two-column-copy { order: 2; }
.two-column--image-left .two-column-media { order: 1; }
.two-column-media img {
    width: 100%;
    border-radius: var(--radius);
    display: block;
}
@media (max-width: 768px) {
    .two-column { grid-template-columns: 1fr; gap: 1.5rem; }
    .two-column--image-left .two-column-copy { order: 1; }
    .two-column--image-left .two-column-media { order: 2; }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}
.stat-tile { text-align: center; padding: 2rem 1rem; }
.stat-value {
    font-family: var(--font-title);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--sage);
    line-height: 1;
    margin-bottom: 0.5rem;
}
.stat-label {
    font-size: 0.95rem;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pullquote {
    max-width: 820px;
    margin: 0 auto;
    padding: 2.5rem;
    border-left: 4px solid var(--gold);
    font-family: var(--font-title);
}
.pullquote p {
    font-size: 1.5rem;
    line-height: 1.4;
    margin: 0 0 1rem;
    font-style: italic;
}
.pullquote footer { font-size: 0.95rem; color: var(--slate); font-style: normal; }
.quote-role { color: var(--slate); }

.signup-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 2.5rem;
    align-items: center;
}
@media (max-width: 768px) { .signup-card { grid-template-columns: 1fr; gap: 1.5rem; } }
.signup-form { display: flex; flex-direction: column; gap: 0.85rem; }
.signup-field { display: flex; flex-direction: column; gap: 0.35rem; }
.signup-label {
    font-size: 0.85rem;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.signup-form input,
.signup-form textarea {
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--shell);
}
.signup-form input:focus,
.signup-form textarea:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.signup-form button { margin-top: 0.5rem; }
.signup-success {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--mist);
    color: var(--ink);
    font-weight: 600;
}

.related-blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.related-blog-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}
.related-blog-card:hover { transform: translateY(-3px); }
.related-blog-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
}
.related-blog-card h3 { margin: 0; font-size: 1.15rem; }
.related-blog-card p { margin: 0; color: var(--slate); font-size: 0.95rem; }
.related-blog-readmore {
    margin-top: auto;
    font-weight: 600;
    color: var(--sage);
    font-size: 0.9rem;
}

/* ─── Proposal: Links & sendables disclosure (planner header) ──────────────── */
.proposal-links-disclosure {
    position: relative;
    font-size: 0.9rem;
}
.proposal-links-disclosure summary {
    cursor: pointer;
    list-style: none;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--shell);
    color: var(--ink);
    font-weight: 500;
    transition: background 0.15s;
}
.proposal-links-disclosure summary::-webkit-details-marker { display: none; }
.proposal-links-disclosure summary::after {
    content: "▾";
    margin-left: 0.5rem;
    color: var(--slate);
    font-size: 0.8rem;
}
.proposal-links-disclosure[open] summary { background: var(--mist); }
.proposal-links-disclosure summary:hover { background: var(--mist); }
.proposal-links-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    min-width: 360px;
    max-width: 480px;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(20, 27, 45, 0.08);
}
.proposal-links-group { margin-bottom: 1rem; }
.proposal-links-group:last-of-type { margin-bottom: 0.5rem; }
.proposal-links-group h4 {
    font-family: var(--font-title);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    margin: 0 0 0.4rem;
    font-weight: 600;
}
.proposal-links-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.proposal-links-group li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(20, 27, 45, 0.05);
}
.proposal-links-group li:last-child { border-bottom: none; }
.proposal-links-group li.placeholder { color: var(--slate-2, var(--slate)); font-style: italic; }
.proposal-links-group li .meta {
    font-size: 0.78rem;
    color: var(--slate);
    font-family: var(--font-body);
}
.proposal-links-group li code {
    font-size: 0.78rem;
    background: var(--mist);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}
.proposal-links-hint {
    margin: 0.75rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    color: var(--slate);
}
.proposal-links-hint code {
    background: var(--mist);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

/* ─── Planner toolbar (Build / Seed / Clear) ──────────────────────────────
   Unified pill toolbar with hairline dividers between functional groups.
   Build is the only filled action; Clear is destructive (red on hover).
   The Links & sendables disclosure sits as a separate chip outside this
   toolbar so its count badge reads independently. */
.planner-toolbar {
    display: inline-flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}
.planner-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.planner-tool:hover { background: var(--mist); }
.planner-tool:disabled { opacity: 0.5; cursor: not-allowed; }
.planner-tool svg { width: 14px; height: 14px; flex-shrink: 0; }
.planner-tool--primary { background: var(--ink); color: #fff; }
.planner-tool--primary:hover { background: var(--river); color: #fff; }
.planner-tool--danger { color: #b91c1c; }
.planner-tool--danger:hover { background: rgba(185, 28, 28, 0.08); }
/* Hairline divider before each tool except the first. Margin keeps the
   line shorter than the toolbar height so it reads as a divider, not a
   border. */
.planner-tool + .planner-tool::before {
    content: "";
    width: 1px;
    background: var(--line);
    margin: 6px 6px 6px 4px;
    align-self: stretch;
}
/* The primary action's left edge needs no divider when it's the first tool.
   When Build is followed by Seed, we want the divider after Build (i.e. the
   normal rule above already covers it). */

/* Planner control: subline breakdown display. Sits between the toolbar
   and the compare grid; planner-only (rendered conditionally in the
   Astro template). Three radio options for breakdownDisplay flag. */
.planner-breakdown-control {
    margin: 1.25rem 0 1.5rem;
    padding: 0.85rem 1rem;
    background: var(--mist);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm, 14px);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.planner-breakdown-control-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--slate);
}
.planner-breakdown-control-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.planner-breakdown-option {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm, 14px);
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    min-width: 0;
    flex: 1 1 14rem;
}
.planner-breakdown-option:hover { border-color: var(--ink); }
.planner-breakdown-option input[type="radio"] {
    margin: 0.18rem 0 0;
    flex-shrink: 0;
    accent-color: var(--river, #2e5c8a);
}
.planner-breakdown-option input[type="radio"]:checked + .planner-breakdown-option-text strong { color: var(--river, #2e5c8a); }
.planner-breakdown-option:has(input:checked) { border-color: var(--river, #2e5c8a); background: rgba(46, 92, 138, 0.04); }
.planner-breakdown-option-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    font-size: 0.85rem;
    line-height: 1.35;
}
.planner-breakdown-option-text strong { font-weight: 700; color: var(--ink); }
.planner-breakdown-option-text span { color: var(--slate); font-size: 0.78rem; }
.planner-breakdown-control-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--slate);
    line-height: 1.45;
    font-style: italic;
}
.planner-breakdown-control--secondary {
    margin: -0.5rem 0 1.5rem;
    padding: 0.7rem 0.95rem;
    background: var(--mist);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm, 14px);
}
.planner-fold-content-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
}
.planner-fold-content-toggle input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0.2rem 0 0;
    accent-color: var(--river, #2e5c8a);
}

/* Count badge inside the Links & sendables summary */
.proposal-links-disclosure summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.proposal-links-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--gold);
    color: var(--ink);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
}

/* Per-row delete + seed actions in the Local sendables list. Hover-revealed
   so the row stays clean by default; revealed on row hover or keyboard
   focus-within for a11y. */
.proposal-links-row { position: relative; }
.proposal-links-row-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}
.proposal-links-row:hover .proposal-links-row-actions,
.proposal-links-row:focus-within .proposal-links-row-actions { opacity: 1; }
.proposal-row-action {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--slate);
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.proposal-row-action:hover { background: #fff; border-color: var(--line); color: var(--ink); }
.proposal-row-action:disabled { opacity: 0.4; cursor: not-allowed; }
.proposal-row-action svg { width: 14px; height: 14px; }
.proposal-row-action--seed:hover { color: var(--river); border-color: var(--river); }
.proposal-row-action--delete:hover { color: #b91c1c; border-color: #b91c1c; }

/* The action row inside Local sendables needs a flex layout so the actions
   can align to the right while the link + meta stay together. */
.proposal-links-group .proposal-links-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.proposal-links-group .proposal-links-row > a,
.proposal-links-group .proposal-links-row > span:first-child { flex: 0 0 auto; }
.proposal-links-group .proposal-links-row .meta { margin-left: auto; }
.proposal-links-group .proposal-links-row .proposal-links-row-actions { margin-left: 0.4rem; }

/* ─── Problem / Resolution pairs ──────────────────────────────────────────
   Replaces the older Requirements + Recommendation paragraph blocks with a
   side-by-side "What you need" / "How we solve it" grid. Source data:
   p.problemResolution = { heading, intro, pairs: [{ n, problem, ... }] }.
   Mirrors the styling baked into build-sendable.cjs so planner and sendable
   render the same. */
.problem-res-intro {
    color: var(--slate);
    line-height: 1.7;
    max-width: 760px;
    margin: 0 0 2rem;
    font-size: 1rem;
}
.problem-res-grid { display: grid; gap: 1rem; }
.problem-res-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
    background: #fff;
}
.problem-res-side {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}
.problem-res-side--problem { background: #1f3650; color: #e8f0f9; }
.problem-res-side--resolution {
    background: #f4f7fb;
    border-left: 3px solid var(--river, #2e5c8a);
}
.problem-res-num {
    font-family: var(--font-title);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.55;
}
.problem-res-side--problem .problem-res-num { color: rgba(232, 240, 249, 0.55); opacity: 1; }
.problem-res-side--resolution .problem-res-num { color: var(--slate); opacity: 1; }
.problem-res-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.problem-res-eyebrow::before {
    content: '';
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}
.problem-res-side--problem .problem-res-eyebrow { color: rgba(232, 240, 249, 0.7); }
.problem-res-eyebrow--resolution { color: var(--river, #2e5c8a); }
.problem-res-title {
    font-family: var(--font-title);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}
.problem-res-side--problem .problem-res-title { color: #fff; }
.problem-res-side--resolution .problem-res-title { color: var(--ink); }
.problem-res-detail {
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}
.problem-res-side--problem .problem-res-detail { color: rgba(232, 240, 249, 0.85); }
.problem-res-side--resolution .problem-res-detail { color: var(--slate); }
.problem-res-detail a {
    color: var(--river, #2e5c8a);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(46, 92, 138, 0.35);
    transition: border-color 0.15s, color 0.15s;
}
.problem-res-detail a:hover {
    border-bottom-color: var(--river, #2e5c8a);
    color: #1f3650;
}
@media (max-width: 760px) {
    .problem-res-pair { grid-template-columns: 1fr; }
    .problem-res-side--problem { border-bottom: 0; }
    .problem-res-side--resolution {
        border-left: 0;
        border-top: 3px solid var(--river, #2e5c8a);
    }
}