/* Gamma Light customer theme. Pricing, admin and stored data are unchanged. */
@media screen {
  :root {
    color-scheme: light;
    --bg: var(--gamma-page);
    --card: var(--gamma-paper);
    --surface: var(--gamma-surface);
    --text: var(--gamma-ink);
    --text-light: var(--gamma-muted);
    --text-lighter: var(--gamma-subtle);
    --border: var(--gamma-line);
    --accent: var(--gamma-blue);
    --accent-hover: var(--gamma-hover);
    --accent-bg: var(--gamma-selected);
    --good: var(--accent);
    --standard: var(--accent);
    --better: var(--accent);
    --best: var(--accent);
    --good-bg: var(--accent-bg);
    --standard-bg: var(--accent-bg);
    --better-bg: var(--accent-bg);
    --best-bg: var(--accent-bg);
    --good-border: var(--border);
    --standard-border: var(--border);
    --better-border: var(--border);
    --best-border: var(--border);
    --none-bg: var(--surface);
    --red: #a52a20;
    --radius: var(--gamma-section-radius);
    --radius-sm: 12px;
    --radius-xs: 8px;
    --shadow: none;
    --shadow-lg: 0 12px 36px #0005;
  }
  body, button, input, select, textarea { font-family: 'Poppins', system-ui, sans-serif; }
  button, input, select, textarea { color: var(--text); }
  button:focus-visible, [role="button"]:focus-visible, [role="checkbox"]:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px;
  }
  header { background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: none; padding: 22px 32px; }
  header .header-inner { position:relative; padding-right:52px; }
  header .total-amount { font-weight: 600; color: var(--text); }
  header .total-label, header .subtitle, .summary-stats .stat-label { opacity: 1; color: var(--text-light); }
  header #logoutBtn { min-height: 44px; }
  /* Reserve separate space for identity/actions and the investment on phones.
     A shrinking flex brand left its logo/subtitle painting beneath the total. */
  @media (max-width: 700px) {
    header .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px 8px; padding-right:0; }
    header .brand { grid-column: 1; grid-row: 1; min-width: 0; }
    header .brand > div { min-width: 0; }
    header .subtitle { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
    header #logoutBtn { grid-column: 2; grid-row: 1; margin-left: 0 !important; }
    header .total-display {
      grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap;
      align-items: baseline; justify-content: space-between; gap: 4px 12px; text-align: left;
    }
    header .total-amount { font-size: 26px; white-space: nowrap; }
  }
  /* Short phone viewports cannot accommodate three pinned regions. Keep the
     investment/actions visible while allowing the option panel to scroll. */
  @media (max-width: 640px) and (max-height: 900px) {
    .category-card.open .comparison-mobile-panel { position: static; }
  }
  .project-details, .extras-section, .pm-section, .presets { border: 1px solid var(--border); padding: 24px; }
  .project-details h2, .extras-section h2, .categories-header h2, .category-name, .modal-header h2 { font-weight: 600; letter-spacing: -.4px; }
  .section-header h3 { color: var(--text); border: 0; font-size: 14px; text-transform: none; font-weight: 600; letter-spacing: 0; }
  .category-card { border: 1px solid var(--border); }
  .category-card:not(.open) .category-header,
  .category-card.has-selection:not(.open) .category-header { background: var(--card); }
  .category-header { gap: 18px; }
  .category-info { min-width: 0; }
  .category-price { color: var(--text) !important; font-weight: 600; }
  .category-price.no-selection { color: var(--text-light) !important; }
  .category-selection { color: var(--text-light); font-size: 11px; margin-top: 5px; }
  .category-chevron { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; color: var(--text-light); }
  .category-chevron svg { width: 16px; height: 16px; transition: transform .15s ease; }
  .category-card.open .category-chevron svg { transform: rotate(180deg); }
  .form-group input, .form-group select, textarea, .preset-btn, .tier-btn, .comparison-skip-btn,
  .comparison-mobile-tab, .comparison-mobile-panel, .comparison-desktop-panel,
  .comparison-table th, .comparison-table th.matrix-tier-heading, .mobile-feature-compare-card,
  .modal, .design-approval-confirm { background: var(--card); }
  .comparison-matrix, .comparison-matrix-header { background: var(--card); box-shadow: none; }
  .comparison-matrix-header { padding: 16px; }
  .comparison-matrix-title, .matrix-feature-label, .comparison-desktop-feature-heading,
  .mobile-feature-compare-title { font-weight: 500; }
  .comparison-desktop-feature-heading { text-transform: none; letter-spacing: 0; }
  .comparison-desktop-feature-heading, .comparison-desktop-tier-heading { border-right: 0; padding: 12px 6px; }
  .comparison-tier-card { background: var(--surface); border: 1px solid var(--border) !important; font-weight: 500; }
  .comparison-desktop-panel .comparison-tier-card .comparison-tier-name,
  .comparison-desktop-panel .comparison-tier-card .comparison-tier-price,
  .comparison-table .comparison-tier-card .comparison-tier-name,
  .comparison-table .comparison-tier-card .comparison-tier-price { color: var(--text); }
  .comparison-tier-card .comparison-tier-name { font-weight: 500; }
  .comparison-tier-card .comparison-tier-price { font-weight: 600; }
  .comparison-tier-card.selected { border-color: var(--accent) !important; box-shadow: inset 0 2px var(--accent); }
  .comparison-desktop-panel .comparison-tier-card.selected .comparison-tier-name,
  .comparison-table .comparison-tier-card.selected .comparison-tier-name { color: var(--accent); }
  .comparison-tier-tag { font-weight: 500; text-transform: none; letter-spacing: 0; }
  .comparison-tier-state { font-size: 10px; padding-top: 6px; margin-top: 5px; border-top: 1px solid var(--border); color: var(--text-light); font-weight: 500; }
  .selected .comparison-tier-state { color: var(--accent); }
  .comparison-tier-badge { border-radius: 3px; font-weight: 600; background: var(--accent-bg); }
  .comparison-tier-card.skip, .comparison-mobile-active-tier.skip,
  .comparison-mobile-tab.skip.active, .comparison-table .selected-col.skip-col,
  .comparison-desktop-panel .selected-col.skip-col, .mobile-feature-status.selected.skip-col { background: var(--surface); }
  .tier-btn:hover, .comparison-tier-card:hover, .matrix-addon-toggle:hover, .btn:hover { transform: none; }
  .comparison-mobile-tab { border-radius: 5px; min-height: 44px; font-weight: 600; }
  .comparison-mobile-active-tier { border-width: 1px; }
  .comparison-mobile-active-name, .comparison-mobile-active-price { font-weight: 600; }
  .comparison-mobile-focus { padding: 0 12px; }
  .mobile-feature-comparison-list { gap: 0; }
  .mobile-feature-compare-card { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 0; }
  .mobile-feature-status, .comparison-mobile-focus .mobile-feature-status.selected { background: transparent; border-radius: 4px; padding: 4px 0; }
  .matrix-feature-popover, .matrix-feature-popover::after { background: var(--surface); color: var(--text); }
  .matrix-feature-popover { border: 1px solid var(--border); }
  .matrix-check, .mobile-feature-status .matrix-check { background: none; color: var(--accent); border-radius: 0; width: 24px; height: 24px; }
  .selected-col .matrix-check, .mobile-feature-status.selected .matrix-check { color: var(--accent); }
  .matrix-included-label { color: var(--text); font-weight: 600; }
  .matrix-addon { border-radius: 5px; background: transparent; border: 0; color: var(--text-light); font-weight: 500; text-transform: none; letter-spacing: 0; }
  .matrix-addon-toggle, .mobile-feature-status .matrix-addon-toggle { min-height: 44px; border: 1px solid var(--accent); color: var(--accent); padding: 8px; gap: 4px; flex-wrap: wrap; font-weight: 600; }
  .matrix-addon-toggle.is-added { background: var(--accent); color: #fff; }
  .matrix-addon-muted { opacity: 1; }
  .matrix-addon-toggle .customer-check { width: 14px; height: 14px; }
  .extras-grid { grid-template-columns: 1fr; gap: 10px; }
  .extra-item { border-width: 1px; padding: 18px; }
  .extra-info { min-width: 0; }
  .extra-item .extra-price { color: var(--text); white-space: nowrap; }
  .extra-toggle { width: 22px; height: 22px; border: 1px solid var(--text-light); background: transparent; border-radius: 4px; }
  .extra-toggle::after { display: none; }
  .extra-toggle .customer-check { display: none; width: 19px; height: 19px; }
  .extra-item.active .extra-toggle { border-color: var(--accent); background: var(--accent); color: #fff; }
  .extra-item.active .extra-toggle .customer-check { display: block; }
  .summary-bar { background: var(--card); border-top: 1px solid var(--border); box-shadow: none; }
  .btn { font-weight: 600; border-radius: 5px; }
  .btn-primary, .btn-success, .shared-banner .btn-save { background: var(--accent); color: #fff; }
  .btn-primary:hover, .btn-success:hover { background: var(--accent-hover); }
  .btn-outline { border: 1px solid var(--border); color: var(--text); }
  .modal-overlay { background: #000a; backdrop-filter: none; }
  .modal { border: 1px solid var(--border); border-radius: 10px; }
  .modal-close { border-radius: 5px; }
  .summary-table td { border-color: var(--border); }
  .summary-table .summary-footer-row td, .summary-table .grand-total-row td { border-color: var(--border); }
  .summary-table .tier-badge { border-radius: 3px; font-weight: 500; }
  #summaryBody .sm-2 { fill: var(--text); }
  #summaryBody .sm-3 { fill: var(--accent); }
  #loginGate path[fill="#0F2F44"] { fill: var(--text); }
  .required-badge, .required-selection-bar { background: var(--surface); color: var(--text-light); border-radius: 4px; font-weight: 500; }
  .shared-banner, .design-approval-pill { background: var(--accent-bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; }
  .toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
  .expired-budget h1 { color: var(--text); }
  #loginGate { background: var(--bg) !important; }
  #loginGate > div, #linkShareModal > div { background: var(--card) !important; border: 1px solid var(--border); }
  #loginGate h2, #linkShareModal > div > div { color: var(--text) !important; }
  #loginGate p, #loginGate label { color: var(--text-light) !important; }
  #loginGate input, #linkShareInput { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
  #gateBtn, #linkShareModal button, #summaryBody button { background: var(--accent) !important; color: #fff !important; }
  #gateError, #designApprovalError { color: #a52a20 !important; background: #fff0ed !important; }
  #emailStatus { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border); }
  #budgetSaveStatus { background: #fff6df !important; color: #704b12 !important; border-color: #c9a461 !important; }
  #budgetSaveStatus button { background: var(--surface); border: 1px solid var(--border); }
  #modifiersContainer input { min-width: 0; }
  @media (min-width: 641px) and (max-width: 1100px) {
    .comparison-desktop-feature-heading, .comparison-desktop-tier-heading { padding: 7px 5px; }
    .comparison-tier-state { font-size: 9px; padding-top: 3px; margin-top: 2px; }
  }
  @media (max-width: 1100px) and (orientation: landscape) {
    header { padding: 10px 18px; }
  }
  @media (max-width: 640px) {
    header { padding: 16px 18px; }
    .category-header { padding: 18px 14px; gap: 10px; }
    .category-name { font-size: 15px; }
    .category-price { min-width: 72px; font-size: 17px; }
    .category-chevron { width: 26px; height: 26px; }
    .project-details, .extras-section { padding: 20px 16px; }
    .category-body { padding: 0 12px 16px; }
    .summary-table th, .summary-table td { padding: 8px 5px; font-size: 12px; overflow-wrap: anywhere; }
    .summary-table .summary-footer-row td { font-size: 14px; }
  }
  /* Readable customer typography, including the compact tablet/phone layouts.
     Allow wrapping instead of shrinking important pricing and feature text. */
  body { font-size: 16px; padding-bottom: calc(var(--customer-footer-height, 160px) + 24px); }
  header .subtitle, header .total-label { font-size: 14px; }
  .project-details h2, .extras-section h2, .categories-header h2, .presets h2, .pm-section h2 { font-size: 22px; }
  .section-header h3, .category-name { font-size: 20px; }
  .category-desc, .category-selection, .required-badge, .required-selection-bar,
  .form-group label, .preset-btn, .tier-btn .tier-tag, .tier-details .brands,
  .comparison-matrix-note, .comparison-skip-btn, .comparison-tier-tag,
  .comparison-tier-state, .comparison-tier-badge, .comparison-mobile-guide,
  .comparison-mobile-active-kicker, .extra-item .extra-note,
  .summary-stats, .summary-project-info .info-label, .disclaimer,
  .preset-btn .preset-desc, .preset-btn .preset-range, .shared-banner .shared-text small,
  .design-approval-pill { font-size: 14px; line-height: 1.45; }
  .form-group input, .form-group select, textarea, .btn, .tier-btn .tier-label,
  .tier-details h4, .tier-details ul li, .comparison-matrix-title,
  .comparison-desktop-feature-heading, .comparison-table th, .comparison-table td,
  .matrix-feature-label, .mobile-feature-compare-title, .comparison-mobile-tab,
  .extra-item .extra-name, .extra-item .extra-price, .pm-row label,
  .summary-project-info .info-value, .summary-table td, .preset-btn .preset-name,
  .shared-banner .shared-text, .shared-banner .btn-save, .design-approval-confirm { font-size: 16px; line-height: 1.5; }
  .category-price, .tier-btn .tier-price { font-size: 24px; }
  .category-price.no-selection { font-size: 16px; }
  .comparison-tier-name { font-size: 16px; line-height: 1.3; }
  .comparison-tier-price { font-size: 20px; line-height: 1.3; }
  .comparison-tier-tag { display: block; overflow: visible; -webkit-line-clamp: unset; }
  .comparison-tier-name, .comparison-tier-price, .comparison-tier-tag { overflow-wrap: anywhere; }
  .comparison-mobile-active-name { font-size: 22px; line-height: 1.3; }
  .comparison-mobile-active-price { font-size: 26px; line-height: 1.3; }
  .matrix-addon, .mobile-feature-status .matrix-addon { font-size: 14px; line-height: 1.4; }
  .matrix-included-label, .mobile-feature-status .matrix-included-label {
    font-size: 14px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere;
  }
  .matrix-included-label.size-medium, .mobile-feature-status .matrix-included-label.size-medium { font-size: 16px; }
  .matrix-included-label.size-large, .mobile-feature-status .matrix-included-label.size-large { font-size: 20px; }
  .matrix-feature-popover {
    font-size: 16px; line-height: 1.5; padding: 12px 16px;
    max-width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px); overflow-y: auto; overflow-wrap: anywhere;
  }
  .summary-table th, .summary-table .tier-badge { font-size: 14px; }
  .summary-table .summary-footer-row td { font-size: 18px; }
  /* These dialogs and adjustment fields predate the theme and use inline sizes. */
  .modal-body p, .modal-body input, .modal-body textarea, #linkShareModal input,
  #linkShareModal button, #linkShareModal p, #modifiersContainer input,
  .category-body input, #loginGate input, #gateBtn { font-size: 16px !important; }
  #summaryBody .features-row div, #summaryBody .features-row li,
  #summaryBody td[style*="font-size:12px"], #loginGate p, #loginGate label,
  .extras-section > p, .category-body span[style*="font-size:12px"] { font-size: 14px !important; }
  @media (min-width: 641px) and (max-width: 1100px) {
    .comparison-table th, .comparison-table td { padding: 10px 5px; }
    .comparison-tier-name, .comparison-tier-tag, .comparison-tier-state { font-size: 14px; }
    .comparison-tier-price { font-size: 18px; }
    .comparison-tier-card { padding: 8px 4px; }
  }
  @media (max-width: 640px) {
    header .subtitle, header .total-label { font-size: 13px; }
    .category-name { font-size: 18px; }
    .category-price { font-size: 22px; }
    .summary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
    .summary-actions .btn { font-size: 14px; line-height: 1.35; padding: 8px; }
    .summary-stats { flex-wrap: wrap; gap: 4px 14px; }
    .summary-table th, .summary-table td { font-size: 14px; }
    .summary-table .summary-footer-row td { font-size: 16px; }
  }
  /* Approved Gamma Light treatment: same geometry, lighter surfaces and softer controls. */
  h1,h2,h3,.category-name,.total-amount,.comparison-tier-price { font-family:'Poppins',system-ui,sans-serif; }
  header { background:var(--card); border:0; }
  header .total-amount { font-size:38px; font-weight:600; letter-spacing:-1.5px; }
  header .hdr-2 { fill:#aeb0b2; } header .hdr-3 { fill:#017ed7; }
  .project-details,.extras-section { border:0; background:transparent; }
  .project-details h2,.categories-header h2,.extras-section h2 { font-size:25px; font-weight:600; letter-spacing:-.8px; }
  .categories-header h2 { text-decoration:underline; text-decoration-color:#9ad3f5; text-decoration-thickness:7px; text-underline-offset:3px; text-decoration-skip-ink:none; }
  .section-header h3 { color:var(--accent); font-size:16px; font-weight:600; }
  .form-group label { text-transform:none; letter-spacing:0; }
  .form-group input,.form-group select,textarea { border:1px solid var(--border); border-radius:var(--gamma-control-radius); background:var(--card); }
  .category-card { border:0; border-radius:var(--radius); box-shadow:0 7px 22px #0f2f4409; }
  .category-header { border-radius:var(--radius) var(--radius) 0 0; border-bottom:1px solid #e5eff5; }
  .category-card:not(.open) .category-header { border-bottom:0; border-radius:var(--radius); }
  .category-name { font-size:23px; font-weight:600; letter-spacing:-.65px; }
  .category-desc { line-height:1.65; }
  .category-chevron { border:0; background:var(--surface); color:var(--accent); }
  .comparison-matrix { border:0; border-radius:0; }
  .comparison-matrix-header,.comparison-desktop-panel { border-bottom:0; }
  .comparison-tier-card { border-radius:14px; border-color:transparent !important; background:var(--surface); }
  :root .comparison-tier-card.selected { background:var(--accent); box-shadow:none; border-color:var(--accent) !important; }
  :root .comparison-tier-card.skip.selected { background:var(--surface); color:var(--text-light); border-color:var(--border) !important; }
  .comparison-desktop-panel .comparison-tier-card.selected :is(.comparison-tier-name,.comparison-tier-price,.comparison-tier-tag,.comparison-tier-state,.comparison-tier-badge),
  .comparison-table .comparison-tier-card.selected :is(.comparison-tier-name,.comparison-tier-price,.comparison-tier-tag,.comparison-tier-state,.comparison-tier-badge) { color:#fff; }
  .comparison-tier-card.selected .comparison-tier-state { border-top-color:#ffffff55; }
  .comparison-tier-price { font-size:24px; letter-spacing:-.6px; }
  .comparison-tier-badge { background:transparent; color:var(--accent); border-radius:0; font-size:12px; }
  :root .comparison-tier-card .comparison-tier-badge { background:transparent; }
  .comparison-mobile-tab,.comparison-mobile-active-tier,.tier-btn { border-radius:12px; }
  .tier-details { border-radius:16px; }
  .btn { border-radius:var(--gamma-control-radius); }
  .summary-stats .stat-value { color:var(--text); }
  .modal { border-radius:20px; }
  @media(max-width:640px) {
    header .total-amount { font-size:28px; }
    .category-name { font-size:19px; }
    .categories-header h2 { font-size:24px; }
    .category-desc { font-size:14px; }
    .comparison-mobile-panel { border-radius:16px 16px 0 0; }
  }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
}
.customer-check { display: inline-block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; }
.scope-notes { margin: 12px 16px; font-size: 14px; line-height: 1.5; }
.scope-notes ul { margin: 6px 0; padding-left: 20px; }
@media print {
  .scope-notes { break-inside: avoid; }
  :root { color-scheme: light; }
  .modal-overlay:not(#summaryModal), #loginGate, #linkShareModal, #budgetSaveStatus { display: none !important; }
  #summaryModal .modal { background: white; color: #393939; }
  #summaryBody button, .category-chevron { display: none !important; }
}

/* Polish pass: website marker highlight on headings, calmer category rows and tier choices. */
@media screen {
  :root { --gamma-marker: rgba(1,126,215,.2); --gamma-marker-soft: rgba(1,126,215,.14); }
  .categories-header { margin: 40px 0 6px; align-items: flex-end; }
  .categories-header h2 {
    display: inline; font-size: 28px; letter-spacing: -.9px; text-decoration: none;
    background-image: linear-gradient(transparent 60%, var(--gamma-marker) 0);
    padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
  .section-header { display: flex; align-items: baseline; gap: 16px; margin: 34px 0 14px; padding: 0 4px; }
  .section-header::after { content: ""; flex: 1; height: 1px; background: var(--border); align-self: center; }
  .section-header h3 {
    color: var(--text); font-size: 21px; font-weight: 600; letter-spacing: -.5px; line-height: 1.25;
    background-image: linear-gradient(transparent 62%, var(--gamma-marker-soft) 0);
    padding: 0 .12em; margin: 0; border: 0; text-transform: none;
  }
  .category-card { margin-bottom: 10px; border-radius: 16px; box-shadow: 0 1px 2px #0f2f440a, 0 6px 18px #0f2f4408; }
  .category-header { padding: 18px 22px; gap: 16px; border-radius: 16px 16px 0 0; }
  .category-card:not(.open) .category-header { border-radius: 16px; }
  .category-card:not(.open):hover { box-shadow: 0 1px 2px #0f2f440f, 0 10px 24px #0f2f4412; }
  .category-name { font-size: 18px; font-weight: 600; letter-spacing: -.3px; line-height: 1.3; }
  .category-name .category-emoji { font-size: 1em; margin-right: .5em; }
  .category-desc { font-size: 14px; line-height: 1.5; margin-top: 3px; }
  .category-selection { color: var(--accent); font-size: 13px; font-weight: 600; margin-top: 6px; }
  .category-price { font-size: 21px; font-weight: 600; letter-spacing: -.4px; }
  .category-price.no-selection { font-size: 14px; font-weight: 500; }
  .category-chevron { width: 32px; height: 32px; }
  .category-body { padding: 4px 22px 22px; }
  /* List-mode tier choices mirror the table's solid selected package. */
  .tier-selector { gap: 8px; margin-top: 18px; }
  .tier-btn { border: 1px solid var(--border); border-radius: 12px; background: var(--card); padding: 14px 10px; }
  .tier-btn:hover { transform: none; box-shadow: none; border-color: var(--accent); }
  .tier-btn .tier-label { font-size: 15px; font-weight: 600; }
  .tier-btn .tier-price { font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
  .tier-btn .tier-tag { font-size: 11px !important; letter-spacing: .12em; font-weight: 600; color: var(--text-light); }
  :root .tier-btn.selected:not(.none-btn) :is(.tier-label,.tier-price,.tier-tag) { color: #fff !important; }
  .tier-btn.none-btn.selected { background: var(--surface); border-color: var(--border); }
  .tier-details { background: var(--surface); border-radius: 14px; padding: 18px 22px; }
  .tier-details h4 { font-size: 15px; letter-spacing: -.2px; }
  .cat-modifier { border-top: 1px solid var(--border) !important; margin-top: 14px; padding: 14px 0 0 !important; }
  .comparison-tier-card.skip { filter: none; }
  @media (max-width: 640px) {
    .categories-header h2 { font-size: 24px; }
    .section-header { margin: 28px 0 12px; gap: 12px; }
    .section-header h3 { font-size: 19px; }
    .category-header { padding: 16px 14px; gap: 10px; }
    .category-name { font-size: 16px; }
    .category-desc { font-size: 14px; }
    .category-price { font-size: 18px; min-width: 64px; }
    .category-body { padding: 4px 12px 16px; }
  }
}

/* Tier colors from production: Good is green, higher tiers step into deeper Gamma blues. */
@media screen {
  :root {
    --good:#2e7d32; --good-bg:#edf7ee; --good-border:#9fd0a4; --good-strong:#2e7d32;
    --standard:#1976d2; --standard-bg:#e9f2fc; --standard-border:#92bdea; --standard-strong:#1976d2;
    --better:#0580d4; --better-bg:#e8f5fe; --better-border:#7cc5f5; --better-strong:#0474c0;
    --best:#0069af; --best-bg:#e7eff6; --best-border:#5d86a8; --best-strong:#133f5c;
  }
  .category-card { border: 1.5px solid transparent; }
  .category-card.tier-good { border-color: var(--good-border); }
  .category-card.tier-standard { border-color: var(--standard-border); }
  .category-card.tier-better { border-color: var(--better-border); }
  .category-card.tier-best { border-color: var(--best-border); }
  :root .category-card.tier-good:not(.open) .category-header { background: var(--good-bg); }
  :root .category-card.tier-standard:not(.open) .category-header { background: var(--standard-bg); }
  :root .category-card.tier-better:not(.open) .category-header { background: var(--better-bg); }
  :root .category-card.tier-best:not(.open) .category-header { background: var(--best-bg); }
  .category-card.tier-good :is(.category-price,.category-selection) { color: var(--good) !important; }
  .category-card.tier-standard :is(.category-price,.category-selection) { color: var(--standard) !important; }
  .category-card.tier-better :is(.category-price,.category-selection) { color: var(--better) !important; }
  .category-card.tier-best :is(.category-price,.category-selection) { color: var(--best) !important; }
  .category-card.tier-good .category-chevron { color: var(--good); }
  .category-card.tier-standard .category-chevron { color: var(--standard); }
  .category-card.tier-better .category-chevron { color: var(--better); }
  .category-card.tier-best .category-chevron { color: var(--best); }
  /* List-mode choices */
  .tier-btn .tier-label { color: var(--text) !important; }
  .tier-btn.good-btn .tier-price { color: var(--good) !important; }
  .tier-btn.standard-btn .tier-price { color: var(--standard) !important; }
  .tier-btn.better-btn .tier-price { color: var(--better) !important; }
  .tier-btn.best-btn .tier-price { color: var(--best) !important; }
  :root .tier-btn.good-btn.selected { background: var(--good-strong); border-color: var(--good-strong); }
  :root .tier-btn.standard-btn.selected { background: var(--standard-strong); border-color: var(--standard-strong); }
  :root .tier-btn.better-btn.selected { background: var(--better-strong); border-color: var(--better-strong); }
  :root .tier-btn.best-btn.selected { background: var(--best-strong); border-color: var(--best-strong); }
  /* Comparison table choices, selected column and checks */
  .comparison-desktop-panel .comparison-tier-card.good .comparison-tier-price, .comparison-table .comparison-tier-card.good .comparison-tier-price { color: var(--good); }
  .comparison-desktop-panel .comparison-tier-card.standard .comparison-tier-price, .comparison-table .comparison-tier-card.standard .comparison-tier-price { color: var(--standard); }
  .comparison-desktop-panel .comparison-tier-card.better .comparison-tier-price, .comparison-table .comparison-tier-card.better .comparison-tier-price { color: var(--better); }
  .comparison-desktop-panel .comparison-tier-card.best .comparison-tier-price, .comparison-table .comparison-tier-card.best .comparison-tier-price { color: var(--best); }
  :root .comparison-tier-card.good.selected { background: var(--good-strong); border-color: var(--good-strong) !important; }
  :root .comparison-tier-card.standard.selected { background: var(--standard-strong); border-color: var(--standard-strong) !important; }
  :root .comparison-tier-card.better.selected { background: var(--better-strong); border-color: var(--better-strong) !important; }
  :root .comparison-tier-card.best.selected { background: var(--best-strong); border-color: var(--best-strong) !important; }
  :root .comparison-tier-card.selected:not(.skip) :is(.comparison-tier-name,.comparison-tier-price,.comparison-tier-tag,.comparison-tier-state,.comparison-tier-badge) { color: #fff; }
  .selected-col.good-col .matrix-check, .mobile-feature-status.good-col .matrix-check { color: var(--good); }
  .selected-col.standard-col .matrix-check, .mobile-feature-status.standard-col .matrix-check { color: var(--standard); }
  .selected-col.better-col .matrix-check, .mobile-feature-status.better-col .matrix-check { color: var(--better); }
  .selected-col.best-col .matrix-check, .mobile-feature-status.best-col .matrix-check { color: var(--best); }
}

/* Carried from production: icon tiles, add-on toggles, check badges and tier-coded summary. */
@media screen {
  .project-details h2, .extras-section h2 {
    display: inline-block; text-decoration: none;
    background-image: linear-gradient(transparent 60%, var(--gamma-marker) 0); padding: 0 .1em;
  }
  .category-info:has(> .category-name .category-emoji) { position: relative; padding-left: 58px; min-height: 44px; }
  .category-name .category-emoji {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%); margin: 0;
    width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 12px; background: var(--surface); font-size: 22px; line-height: 1;
  }
  .category-card.has-selection:not(.open) .category-name .category-emoji { background: var(--card); }
  .extras-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .extra-item { border: 1px solid var(--border); border-radius: 14px; background: var(--card); padding: 16px 18px; gap: 14px; }
  .extra-item:hover { border-color: var(--accent); }
  .extra-item.active { border-color: var(--accent); background: var(--accent-bg); }
  .extra-item .extra-price { color: var(--accent); font-weight: 600; }
  .extra-toggle { position: relative; width: 40px; height: 24px; border: 0; border-radius: 12px; background: var(--border); transition: background .15s ease; }
  .extra-toggle::after { display: block; content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #0f2f4433; transition: transform .15s ease; }
  .extra-toggle .customer-check, .extra-item.active .extra-toggle .customer-check { display: none; }
  .extra-item.active .extra-toggle { background: var(--accent); }
  .extra-item.active .extra-toggle::after { transform: translateX(16px); }
  .matrix-check, .mobile-feature-status .matrix-check {
    display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent-bg); color: var(--accent);
  }
  .matrix-check .customer-check { width: 15px; height: 15px; stroke-width: 3; }
  :root .selected-col.good-col .matrix-check, :root .mobile-feature-status.good-col .matrix-check { background: var(--good-strong); color: #fff; }
  :root .selected-col.standard-col .matrix-check, :root .mobile-feature-status.standard-col .matrix-check { background: var(--standard-strong); color: #fff; }
  :root .selected-col.better-col .matrix-check, :root .mobile-feature-status.better-col .matrix-check { background: var(--better-strong); color: #fff; }
  :root .selected-col.best-col .matrix-check, :root .mobile-feature-status.best-col .matrix-check { background: var(--best-strong); color: #fff; }
  .comparison-tier-card.good { border-color: var(--good-border) !important; }
  .comparison-tier-card.standard { border-color: var(--standard-border) !important; }
  .comparison-tier-card.better { border-color: var(--better-border) !important; }
  .comparison-tier-card.best { border-color: var(--best-border) !important; }
  @media (max-width: 1100px) { .extras-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .extras-grid { grid-template-columns: 1fr; }
    .category-info:has(> .category-name .category-emoji) { padding-left: 46px; }
    .category-name .category-emoji { width: 36px; height: 36px; font-size: 18px; border-radius: 10px; }
  }
}
#summaryBody .summary-tier, #summaryBody .summary-package { font-weight: 600; }
#summaryBody :is(.summary-tier,.summary-package).tier-good { color: var(--good); }
#summaryBody :is(.summary-tier,.summary-package).tier-standard { color: var(--standard); }
#summaryBody :is(.summary-tier,.summary-package).tier-better { color: var(--better); }
#summaryBody :is(.summary-tier,.summary-package).tier-best { color: var(--best); }
.summary-table .summary-footer-row td { font-weight: 600; }
.summary-table .grand-total-row td { font-weight: 700; }

/* Landscape phones: the header scrolls away and the comparison header and totals bar
   compact, leaving most of the short screen for the feature rows. */
@media screen and (orientation: landscape) and (max-height: 500px) {
  header { position: relative; padding: 8px 20px; }
  header .header-inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; }
  header .brand { flex: 1; min-width: 0; }
  header .brand .logo-img, header .brand .logo-img svg { height: 26px; }
  header .subtitle { font-size: 12px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  header .total-display { display: flex; align-items: baseline; gap: 10px; text-align: right; flex-shrink: 0; }
  header .total-label { font-size: 11px; }
  header .total-amount { font-size: 24px; letter-spacing: -.6px; }
  .comparison-matrix-header { padding: 8px 14px; }
  .comparison-desktop-feature-heading, .comparison-desktop-tier-heading { padding: 5px 4px; }
  .comparison-tier-card { padding: 6px 4px; border-radius: 10px; }
  .comparison-tier-badge, .comparison-tier-state { display: none !important; }
  .comparison-tier-name { font-size: 13px; line-height: 1.2; }
  .comparison-tier-price { font-size: 18px; line-height: 1.2; }
  .comparison-tier-tag { font-size: 13px; line-height: 1.25; }
  .category-card.open .comparison-desktop-panel { box-shadow: 0 6px 12px #0f2f4414; }
  .summary-bar { padding: 6px 16px; }
  .summary-bar .btn { min-height: 38px; padding: 6px 14px; font-size: 14px; }
  .summary-actions { gap: 8px; }
}
@media screen {
  :root :is(.comparison-desktop-panel,.comparison-table) .comparison-tier-card.skip.selected :is(.comparison-tier-name,.comparison-tier-price,.comparison-tier-tag,.comparison-tier-state) { color: var(--text-light); }
}