/* INFOBUDO - wspolny CSS */

/* ===== styles.css ===== */
:root {
  color-scheme: light;
  --bg: #f6f8fc;
  --bg-2: #e8eef8;
  --panel: rgba(255, 255, 255, 0.76);
  --panel-strong: rgba(255, 255, 255, 0.94);
  --panel-border: rgba(16, 24, 40, 0.08);
  --rail-bg: #f7f9fe;
  --rail-bg-2: #edf3fb;
  --rail-text: #173049;
  --text: #102033;
  --muted: #62748b;
  --accent: #2f79ff;
  --accent-2: #0fb2a7;
  --danger: #d65a5a;
  --shadow: 0 22px 48px rgba(20, 34, 58, 0.12);
  --radius: 24px;
  --sticky-top: 112px;
  font-family:
    "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    sans-serif;
}

.manufacturer-category-strip button {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 58px;
    border: 0;
    border-left: 1px solid #e0e8eb;
    background: transparent;
    color: #4d6774;
    cursor: pointer;
    font: inherit;
    font-size: max(14px, .78rem);
    font-weight: 800;
    line-height: 1.3;
    padding: 15px;
    text-align: left;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.manufacturer-category-strip button:first-child {
    border-left: 0;
}

.manufacturer-category-strip button:hover,
.manufacturer-category-strip button:focus-visible {
    background: #eef8f6;
    color: #0b637d;
    outline: 3px solid rgba(14, 116, 144, .18);
    outline-offset: -3px;
}

.manufacturer-category-strip button i {
    color: var(--studio, #d71920);
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
}

.interior-pro-page {
    --pro-bg: #071619;
    --pro-panel: rgba(255,255,255,.92);
    --pro-text: #10272d;
    background:
        radial-gradient(circle at 12% 4%, rgba(21, 142, 150, .22), transparent 34rem),
        radial-gradient(circle at 82% 9%, rgba(255, 214, 142, .26), transparent 31rem),
        linear-gradient(180deg, #f7fbfb 0%, #eef5f3 48%, #f7f1e8 100%);
    color: var(--pro-text);
    min-height: 100vh;
    padding: clamp(18px, 3vw, 44px);
}

.interior-pro-page :is(button, a, input, select) {
    min-height: 44px;
}

.interior-pro-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 22px;
    align-items: stretch;
    max-width: 1500px;
    margin: 0 auto 22px;
}

.interior-pro-hero > div,
.interior-pro-hero > aside,
.interior-pro-workspace,
.interior-pro-flow article {
    border: 1px solid rgba(10, 48, 54, .12);
    border-radius: 28px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 28px 70px rgba(19, 47, 55, .12);
    backdrop-filter: blur(20px);
}

.interior-pro-hero > div {
    padding: clamp(28px, 4vw, 58px);
}

.interior-pro-hero span,
.interior-toolbar span,
.interior-pro-panel header span,
.interior-cost-panel header span,
.interior-plan-card header span,
.interior-walk-card header span {
    color: #0b7b80;
    font-size: max(14px, .78rem);
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.interior-pro-hero h1 {
    max-width: 980px;
    margin: 12px 0;
    font-size: clamp(2.5rem, 6vw, 6.7rem);
    line-height: .88;
    letter-spacing: -.08em;
}

.interior-pro-hero p {
    max-width: 820px;
    color: #49656b;
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    line-height: 1.55;
}

.interior-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.interior-hero-actions :is(button, a),
.interior-cost-panel > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 999px;
    padding: 0 20px;
    color: #fff;
    background: linear-gradient(135deg, #092d33, #0b7b80);
    box-shadow: 0 16px 30px rgba(11, 123, 128, .22);
    cursor: pointer;
    font-weight: 900;
    text-decoration: none;
}

.interior-hero-actions a {
    color: #09353b;
    background: #fff;
    border: 1px solid rgba(9, 53, 59, .13);
    box-shadow: none;
}

.interior-pro-hero > aside {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.interior-pro-hero article {
    display: grid;
    align-content: center;
    min-height: 118px;
    border-radius: 22px;
    padding: 20px;
    color: #fff;
    background: linear-gradient(135deg, #103941, #082024);
}

.interior-pro-hero article strong {
    font-size: clamp(1.7rem, 3vw, 3rem);
    letter-spacing: -.05em;
}

.interior-pro-hero article span {
    color: rgba(255,255,255,.72);
    letter-spacing: 0;
}

.interior-pro-workspace {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 320px;
    gap: 16px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 16px;
}

.interior-pro-panel,
.interior-cost-panel,
.interior-plan-card,
.interior-walk-card {
    border-radius: 22px;
    background: var(--pro-panel);
    box-shadow: inset 0 0 0 1px rgba(11, 63, 70, .08);
    padding: 16px;
}

.interior-pro-panel,
.interior-cost-panel {
    display: grid;
    align-content: start;
    gap: 16px;
}

.interior-pro-panel header,
.interior-cost-panel header,
.interior-plan-card header,
.interior-walk-card header,
.interior-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.interior-room-list,
.interior-style-list,
.interior-material-list {
    display: grid;
    gap: 10px;
}

.interior-room-list button,
.interior-style-list button {
    border: 1px solid rgba(10, 48, 54, .1);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    padding: 13px;
    text-align: left;
}

.interior-room-list button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.interior-room-list button.active,
.interior-style-list button.active {
    border-color: rgba(11, 123, 128, .48);
    background: #edfafa;
    box-shadow: 0 14px 24px rgba(11, 123, 128, .12);
}

.interior-style-list button {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 3px 10px;
}

.interior-style-list i {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}

.interior-style-list span,
.interior-material-list small,
.interior-offer-total small {
    color: #657b80;
    font-size: 14px;
}

.interior-pro-stage {
    display: grid;
    gap: 16px;
}

.interior-toolbar {
    border-radius: 20px;
    background: #082024;
    color: #fff;
    padding: 12px 14px;
}

.interior-toolbar span {
    color: #8fe8e8;
}

.interior-toolbar nav {
    display: flex;
    gap: 8px;
}

.interior-toolbar button {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.08);
    cursor: pointer;
    padding: 0 16px;
    font-weight: 900;
}

.interior-toolbar button.active {
    color: #062126;
    background: #c8fbef;
}

.interior-design-grid {
    display: grid;
    grid-template-columns: minmax(360px, .9fr) minmax(420px, 1.1fr);
    gap: 16px;
}

.interior-plan-card svg {
    width: 100%;
    min-height: 420px;
    margin-top: 12px;
    border-radius: 20px;
    background: #f9fcfc;
    box-shadow: inset 0 0 0 1px rgba(9, 53, 59, .1);
}

.room-shape {
    stroke: #102c33;
    stroke-width: 5;
    cursor: pointer;
    filter: drop-shadow(0 10px 14px rgba(14, 39, 45, .08));
    transition: filter .18s ease, stroke .18s ease;
}

.room-shape.active {
    stroke: #0b8c91;
    stroke-width: 7;
    filter: drop-shadow(0 15px 18px rgba(11, 123, 128, .22));
}

.interior-plan-card text {
    fill: #123137;
    font-size: 18px;
    font-weight: 900;
    pointer-events: none;
}

.interior-plan-card .room-area {
    fill: #577178;
    font-size: 15px;
}

.interior-wall-lines {
    fill: none;
    stroke: #071619;
    stroke-width: 9;
    stroke-linejoin: round;
    pointer-events: none;
}

.interior-openings {
    fill: none;
    stroke: #fff;
    stroke-width: 12;
    stroke-linecap: round;
    pointer-events: none;
}

.interior-perspective {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    margin-top: 12px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 52% 18%, rgba(255,255,255,.92), transparent 18%),
        linear-gradient(180deg, #dff4ff 0 18%, var(--wall) 18% 58%, var(--floor) 58%);
    box-shadow: inset 0 -80px 140px rgba(0,0,0,.23), 0 24px 46px rgba(15, 47, 55, .16);
    perspective: 900px;
}

.interior-walk-card.walking .interior-perspective {
    animation: interior-camera 8s ease-in-out infinite;
}

.interior-back-wall,
.interior-floor,
.interior-side-wall {
    position: absolute;
    inset: 0;
}

.interior-floor {
    top: 58%;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 74px),
        repeating-linear-gradient(0deg, rgba(64,31,12,.15) 0 2px, transparent 2px 70px),
        linear-gradient(135deg, var(--floor), #6d4b30);
    transform-origin: top;
    transform: rotateX(60deg) scaleY(1.85);
}

.interior-side-wall.left,
.interior-side-wall.right {
    width: 38%;
    background: linear-gradient(90deg, rgba(0,0,0,.18), transparent);
    clip-path: polygon(0 18%, 100% 58%, 100% 100%, 0 100%);
}

.interior-side-wall.right {
    right: 0;
    left: auto;
    transform: scaleX(-1);
}

.interior-window {
    position: absolute;
    left: 58%;
    top: 17%;
    width: 25%;
    height: 26%;
    border: 10px solid rgba(255,255,255,.8);
    border-radius: 18px;
    background: linear-gradient(135deg, #bceaff, #fff7c2);
    box-shadow: 0 0 70px rgba(255, 244, 193, .8), 0 26px 58px rgba(255, 226, 141, .32);
}

.interior-sofa,
.interior-table,
.interior-rug {
    position: absolute;
    transform-style: preserve-3d;
}

.interior-sofa {
    left: 13%;
    bottom: 18%;
    width: 34%;
    height: 18%;
    border-radius: 26px 26px 12px 12px;
    background: linear-gradient(135deg, var(--accent), #051a1e);
    box-shadow: 0 34px 45px rgba(0,0,0,.28);
}

.interior-table {
    left: 46%;
    bottom: 20%;
    width: 18%;
    height: 9%;
    border-radius: 999px;
    background: linear-gradient(135deg, #e6c69a, #8a5f36);
    box-shadow: 0 26px 34px rgba(0,0,0,.25);
}

.interior-rug {
    left: 33%;
    bottom: 4%;
    width: 44%;
    height: 22%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.52), rgba(255,255,255,.08));
    filter: blur(.2px);
}

.interior-walk-hud {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 18px;
    background: rgba(4, 17, 20, .72);
    color: #fff;
    padding: 12px;
    backdrop-filter: blur(16px);
}

.interior-walk-hud kbd {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-left: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,.16);
    font-weight: 900;
}

.interior-material-list article {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-radius: 18px;
    background: #fff;
    padding: 14px;
}

.interior-material-list span {
    color: #0b7b80;
    font-size: 14px;
    font-weight: 900;
}

.interior-material-list strong {
    display: block;
    margin: 3px 0;
}

.interior-material-list b {
    white-space: nowrap;
}

.interior-offer-total {
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #0a2b31, #0b7377);
    padding: 18px;
}

.interior-offer-total span,
.interior-offer-total small {
    color: rgba(255,255,255,.72);
}

.interior-offer-total strong {
    display: block;
    margin: 6px 0;
    font-size: 2rem;
    letter-spacing: -.05em;
}

.interior-pro-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 1500px;
    margin: 22px auto 0;
}

.interior-pro-flow article {
    padding: 20px;
}

.interior-pro-flow i {
    color: #d71920;
    font-style: normal;
    font-weight: 950;
}

.interior-pro-flow strong {
    display: block;
    margin: 8px 0;
    font-size: 1.05rem;
}

.interior-pro-flow p {
    margin: 0;
    color: #5e747a;
    line-height: 1.45;
}

@keyframes interior-camera {
    0%, 100% { transform: translate3d(0,0,0) scale(1); filter: saturate(1.06) contrast(1.02); }
    45% { transform: translate3d(-1.5%, -1%, 0) scale(1.035); filter: saturate(1.14) contrast(1.05); }
    70% { transform: translate3d(1%, .8%, 0) scale(1.02); }
}

@media (max-width: 1180px) {
    .interior-pro-page {
        padding: 18px;
        padding-bottom: 92px;
    }
    .interior-pro-hero,
    .interior-pro-workspace {
        grid-template-columns: 1fr;
    }
    .interior-pro-workspace {
        padding: 12px;
    }
    .interior-design-grid {
        grid-template-columns: 1fr;
    }
    .interior-pro-panel,
    .interior-cost-panel {
        position: static;
    }
    .interior-room-list,
    .interior-style-list,
    .interior-material-list,
    .interior-pro-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .portal-page-interiorCreator {
        padding-bottom: 84px;
    }
    .interior-pro-page {
        padding: 10px 10px 92px;
        margin-inline: -12px;
    }
    .interior-pro-hero {
        gap: 10px;
    }
    .interior-pro-hero > div,
    .interior-pro-hero > aside,
    .interior-pro-workspace,
    .interior-pro-panel,
    .interior-cost-panel,
    .interior-plan-card,
    .interior-walk-card {
        border-radius: 18px;
    }
    .interior-pro-hero > div {
        padding: 24px 18px;
    }
    .interior-pro-hero h1 {
        font-size: clamp(2.35rem, 14vw, 4.1rem);
    }
    .interior-hero-actions,
    .interior-toolbar,
    .interior-plan-card header,
    .interior-walk-card header {
        align-items: stretch;
        flex-direction: column;
    }
    .interior-hero-actions :is(button, a),
    .interior-toolbar button,
    .interior-cost-panel > button {
        width: 100%;
        min-height: 52px;
    }
    .interior-toolbar nav,
    .interior-room-list,
    .interior-style-list,
    .interior-material-list,
    .interior-pro-flow {
        grid-template-columns: 1fr;
        display: grid;
    }
    .interior-plan-card svg {
        min-height: 330px;
    }
    .interior-perspective {
        min-height: 390px;
    }
    .interior-walk-hud {
        align-items: flex-start;
        flex-direction: column;
    }
    .interior-pro-page::after {
        content: "Plan  ·  Style  ·  Spacer  ·  Oferta";
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 80;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 58px;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 22px;
        color: #fff;
        background: rgba(5, 25, 29, .92);
        box-shadow: 0 20px 44px rgba(0,0,0,.28);
        backdrop-filter: blur(18px);
        font-size: 14px;
        font-weight: 950;
        letter-spacing: .03em;
    }
}

@media (max-width: 1180px) {
    .portal-header {
        position: sticky;
        top: 0;
        z-index: 90;
        min-height: 72px;
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 10px 14px;
    }
    .portal-header nav {
        grid-column: 1 / -1;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 4px 0 2px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .portal-header nav::-webkit-scrollbar {
        display: none;
    }
    .portal-header nav a {
        flex: 0 0 auto;
        min-height: 44px;
        border-radius: 999px;
        padding-inline: 14px;
        font-size: 14px !important;
    }
    .portal-header-actions {
        gap: 8px;
    }
    .portal-header-actions :is(button, a) {
        min-height: 44px;
    }
    .portal-content {
        overflow-x: clip;
    }
    .standalone-product-header {
        grid-template-columns: 1fr auto;
        gap: 10px;
        padding: 10px 14px;
    }
    .standalone-product-header nav {
        grid-column: 1 / -1;
        justify-content: flex-start;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 3px;
    }
    .standalone-product-header nav a,
    .product-header-cta {
        min-height: 44px;
        border-radius: 999px;
        padding: 0 14px;
        background: #eef6fb;
        font-size: 14px !important;
    }
    .standalone-product-hero,
    .standalone-product-project,
    .standalone-product-related,
    .marketplace-product-hero {
        width: calc(100% - 24px) !important;
    }
    .standalone-product-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .construction-portal {
        padding-bottom: 78px;
    }
    .portal-header {
        border-radius: 0 0 22px 22px;
        box-shadow: 0 16px 34px rgba(15, 35, 45, .12);
    }
    .portal-header-actions .portal-continue,
    .portal-header-actions .portal-creator-button {
        width: 44px;
        padding: 0;
        overflow: hidden;
        white-space: nowrap;
        text-indent: -999px;
    }
    .portal-header-actions .portal-continue::after {
        content: "↻";
        display: grid;
        place-items: center;
        text-indent: 0;
        font-size: 20px;
    }
    .portal-header-actions .portal-creator-button::after {
        content: "+";
        display: grid;
        place-items: center;
        text-indent: 0;
        font-size: 24px;
        font-weight: 900;
    }
    .portal-content :is(button, a),
    .standalone-product-page :is(button, a) {
        min-height: 48px;
    }
    .portal-detail-hero,
    .systems-visual-hero,
    .catalog-market-hero,
    .marketplace-list-hero,
    .brand-hub-hero,
    .manufacturer-studio-hero,
    .standalone-product-hero,
    .standalone-product-project,
    .standalone-product-related {
        width: calc(100% - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 20px !important;
    }
    .portal-detail-hero,
    .systems-visual-hero,
    .catalog-market-hero,
    .brand-hub-hero,
    .manufacturer-studio-hero {
        grid-template-columns: 1fr !important;
    }
    .detail-hero-copy h1,
    .catalog-market-copy h1,
    .systems-visual-hero h1,
    .brand-hub h1,
    .manufacturer-studio-copy h1 {
        font-size: clamp(2.2rem, 12vw, 4rem) !important;
        line-height: .95 !important;
    }
    .detail-hero-actions,
    .catalog-market-copy > div,
    .brand-hub-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .detail-layer-track,
    .detail-brand-grid,
    .detail-system-grid,
    .brand-product-list,
    .marketplace-offer-list,
    .standalone-product-metrics {
        grid-template-columns: 1fr !important;
    }
    .product-breadcrumbs {
        width: calc(100% - 20px);
        overflow-x: auto;
        white-space: nowrap;
    }
    .standalone-product-copy h1 {
        font-size: clamp(1.9rem, 9vw, 3.2rem) !important;
        line-height: 1;
    }
    .standalone-product-actions,
    .standalone-product-related > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }
    .construction-portal::after {
        content: "Home · Systemy · Katalog · Kreator";
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 95;
        display: grid;
        place-items: center;
        min-height: 58px;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 22px;
        color: #fff;
        background: rgba(8, 25, 30, .94);
        box-shadow: 0 20px 44px rgba(0,0,0,.28);
        backdrop-filter: blur(18px);
        font-size: 14px;
        font-weight: 950;
        letter-spacing: .03em;
        pointer-events: none;
    }
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  min-height: 100%;
  height: auto;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 18% 10%, rgba(47, 121, 255, 0.14), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(15, 178, 167, 0.1), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.9), transparent 28%),
    linear-gradient(180deg, #f9fbff 0%, #e8eef8 100%);
  color: var(--text);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  width: 100%;
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

.start-screen {
  width: 100%;
  min-height: 100vh;
  height: auto;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.start-hero {
  width: min(1120px, 100%);
  padding: 34px;
  border-radius: 34px;
  background:
    linear-gradient(180deg, rgba(16, 22, 31, 0.92), rgba(10, 14, 20, 0.96)),
    linear-gradient(135deg, rgba(94, 168, 255, 0.08), rgba(70, 212, 163, 0.06));
  border: 1px solid var(--panel-border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  position: relative;
}

.start-hero::before {
  content: "";
  position: absolute;
  inset: 16px auto auto 16px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 168, 255, 0.08), transparent 70%);
  pointer-events: none;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 24px;
  align-items: stretch;
}

.hero-copy-column {
  display: grid;
  gap: 18px;
  align-content: start;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #d7e3f1;
  font-size: 0.8rem;
  box-shadow: 0 10px 20px rgba(20, 34, 58, 0.08);
}

.hero-preview {
  min-height: 100%;
  display: grid;
  align-items: stretch;
}

.hero-preview-card {
  display: grid;
  gap: 18px;
  padding: 18px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(14, 18, 26, 0.96), rgba(10, 14, 20, 0.98)),
    linear-gradient(135deg, rgba(94, 168, 255, 0.06), rgba(70, 212, 163, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.preview-pill,
.preview-status,
.brand-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-pill {
  background: rgba(94, 168, 255, 0.12);
  color: #b9d8ff;
}

.preview-status {
  background: rgba(70, 212, 163, 0.1);
  color: #8be8c7;
}

.hero-preview-visual {
  position: relative;
  height: 280px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(18, 24, 35, 0.96), rgba(9, 13, 19, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-floor,
.preview-room,
.preview-furniture {
  position: absolute;
}

.preview-floor {
  inset: auto 16px 18px 16px;
  height: 94px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(174, 128, 84, 0.92), rgba(133, 92, 58, 0.96)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 14px, rgba(24, 36, 54, 0.08) 14px 15px);
  box-shadow: 0 30px 50px rgba(20, 34, 58, 0.12);
}

.preview-room {
  inset: 34px 46px 36px 46px;
  border-radius: 16px;
  border: 2px solid rgba(94, 168, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(20, 24, 30, 0.92), rgba(12, 16, 22, 0.96)),
    radial-gradient(circle at top, rgba(255, 255, 255, 0.06), transparent 38%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.preview-wall {
  position: absolute;
  background: rgba(94, 168, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.preview-wall.top {
  inset: 0 0 auto 0;
  height: 12px;
}

.preview-wall.right {
  inset: 0 0 0 auto;
  width: 12px;
}

.preview-wall.bottom {
  inset: auto 0 0 0;
  height: 14px;
}

.preview-wall.left {
  inset: 0 auto 0 0;
  width: 12px;
}

.preview-openings {
  position: absolute;
  width: 62px;
  height: 16px;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  background: rgba(39, 54, 76, 0.82);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 6px 12px rgba(22, 29, 39, 0.1);
}

.preview-furniture {
  border-radius: 16px;
  box-shadow: 0 14px 24px rgba(20, 34, 58, 0.14);
}

.preview-sofa {
  width: 150px;
  height: 56px;
  left: 44px;
  bottom: 58px;
  background:
    linear-gradient(180deg, rgba(154, 167, 181, 0.98), rgba(125, 139, 155, 0.98));
}

.preview-table {
  width: 92px;
  height: 34px;
  left: 215px;
  bottom: 74px;
  background:
    linear-gradient(180deg, rgba(215, 187, 151, 0.98), rgba(184, 147, 106, 0.98));
}

.preview-lamp {
  width: 26px;
  height: 26px;
  right: 40px;
  bottom: 82px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 216, 1), rgba(255, 246, 216, 0.2));
  box-shadow:
    0 0 0 10px rgba(255, 241, 201, 0.2),
    0 0 28px rgba(255, 230, 177, 0.42);
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.hero-metrics > div {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 4px;
}

.hero-metrics strong {
  font-size: 0.95rem;
}

.hero-metrics span {
  color: var(--muted);
  font-size: 0.82rem;
}

.eyebrow {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  font-size: 0.75rem;
}

.eyebrow.compact {
  margin-bottom: 6px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1.02;
  margin-bottom: 16px;
}

h2 {
  font-size: 1.02rem;
}

.hero-copy,
.muted {
  color: var(--muted);
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-grid {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hero-tile,
.details-card,
.stats-card,
.preview-panel,
.summary-panel,
.canvas-card,
.panel,
.top-toolbar,
.workspace-dock {
  border: 1px solid var(--panel-border);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.hero-tile {
  padding: 16px;
  display: grid;
  gap: 8px;
  min-height: 108px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(94, 168, 255, 0.05), rgba(70, 212, 163, 0.04));
}

.tile-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(94, 168, 255, 0.12);
  color: var(--accent);
}

.hero-tile span {
  color: var(--muted);
  font-size: 0.88rem;
}

.hero-tile strong {
  font-size: 1.05rem;
}

.primary-button,
.secondary-button,
.tool-button,
.toolbar-chip,
.icon-button,
.danger-button,
.rail-item,
.dock-tab,
.structure-tile,
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 14px;
  padding: 12px 16px;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

.primary-button {
  background: linear-gradient(135deg, #2569f3, #53a6ff);
  color: #f8fbff;
  font-weight: 700;
}

.secondary-button,
.tool-button,
.toolbar-chip,
.icon-button,
.danger-button,
.dock-tab,
.structure-tile {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.danger-button {
  background: rgba(255, 127, 127, 0.08);
  border-color: rgba(255, 127, 127, 0.16);
  color: #ffb3b3;
}

.secondary-button:hover,
.primary-button:hover,
.tool-button:hover,
.toolbar-chip:hover,
.icon-button:hover,
.danger-button:hover,
.rail-item:hover,
.dock-tab:hover,
.structure-tile:hover,
.brand-mark:hover {
  transform: translateY(-1px);
}

.secondary-button:disabled,
.rail-item:disabled,
.structure-tile.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.small {
  padding: 9px 12px;
  border-radius: 12px;
}

.full-width {
  width: 100%;
}

.editor-shell {
  width: 100%;
  min-height: calc(100vh - 84px);
  height: auto;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 320px;
  gap: 14px;
  padding: 14px;
  align-items: stretch;
  overflow: visible;
}

.editor-shell.sidebar-collapsed {
  grid-template-columns: 84px minmax(0, 1fr);
}

.editor-shell.sidebar-open {
  grid-template-columns: 84px minmax(0, 1fr) 320px;
}

.rail-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 245, 252, 0.98)),
    linear-gradient(180deg, var(--rail-bg), var(--rail-bg-2));
  color: var(--rail-text);
  border-radius: 22px;
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 20px 42px rgba(20, 34, 58, 0.08);
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
  max-height: calc(100vh - var(--sticky-top) - 16px);
  overflow: auto;
}

.rail-logo {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(47, 121, 255, 0.16);
  background: rgba(47, 121, 255, 0.08);
  color: var(--accent);
  display: grid;
  place-items: center;
}

.rail-stack {
  width: 100%;
  display: grid;
  gap: 8px;
}

.rail-item {
  width: 100%;
  min-height: 70px;
  flex-direction: column;
  padding: 10px 8px;
  gap: 6px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  border-color: rgba(16, 24, 40, 0.08);
}

.rail-item.active {
  background: rgba(47, 121, 255, 0.12);
  border-color: rgba(47, 121, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(47, 121, 255, 0.12);
}

.rail-item span {
  display: block;
  font-size: 0.63rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-align: center;
  max-width: 64px;
  color: var(--muted);
}

.rail-item svg {
  width: 18px;
  height: 18px;
}

.workspace-column {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  min-height: 0;
}

.right-column {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  min-height: 0;
  position: sticky;
  top: var(--sticky-top);
  align-self: start;
  max-height: calc(100vh - var(--sticky-top) - 16px);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  margin: 14px 14px 0;
  border-radius: 26px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 255, 0.96)),
    linear-gradient(135deg, rgba(47, 121, 255, 0.05), rgba(15, 178, 167, 0.04));
  box-shadow: 0 20px 48px rgba(20, 34, 58, 0.08);
  backdrop-filter: blur(20px);
}

.app-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-header-mark {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(47, 121, 255, 0.1);
  border: 1px solid rgba(47, 121, 255, 0.16);
  flex: 0 0 auto;
}

.app-header-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.app-header-copy strong {
  font-size: 1.02rem;
}

.app-header-copy span {
  color: var(--muted);
  font-size: 0.78rem;
}

.app-header-tabs {
  display: inline-flex;
  gap: 6px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(242, 246, 252, 0.9);
  border: 1px solid rgba(16, 24, 40, 0.08);
}

.app-header-tab {
  padding: 10px 14px;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
}

.app-header-tab.active {
  background: rgba(47, 121, 255, 0.12);
  color: var(--accent);
}

.app-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  flex-wrap: wrap;
}

.workspace-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.75fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  border-radius: 28px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 255, 0.96)),
    linear-gradient(135deg, rgba(47, 121, 255, 0.06), rgba(15, 178, 167, 0.04));
  box-shadow: 0 20px 48px rgba(20, 34, 58, 0.08);
  backdrop-filter: blur(18px);
}

.workspace-hero-copy {
  display: grid;
  gap: 8px;
}

.workspace-hero-copy h2 {
  margin-bottom: 0;
  font-size: clamp(1.6rem, 2vw, 2.3rem);
}

.workspace-hero-text {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.55;
}

.workspace-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.workspace-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.workspace-hero-stat {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(16, 24, 40, 0.08);
}

.workspace-hero-stat span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.workspace-hero-stat strong {
  font-size: 1rem;
}

.workspace-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-self: end;
  min-width: 152px;
}

.top-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(14, 18, 26, 0.94), rgba(10, 13, 19, 0.96)),
    linear-gradient(135deg, rgba(94, 168, 255, 0.05), rgba(70, 212, 163, 0.04));
  position: sticky;
  top: calc(var(--sticky-top) - 18px);
  z-index: 40;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.top-toolbar::after {
  content: "";
  position: absolute;
  inset: auto 16px 0 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(47, 121, 255, 0.22), transparent);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  border: 1px solid rgba(94, 168, 255, 0.18);
  background: rgba(94, 168, 255, 0.12);
  color: var(--accent);
}

.title-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.project-name {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 700;
  outline: none;
  padding: 0;
  width: min(320px, 100%);
}

.brand-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.brand-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.brand-note {
  color: var(--muted);
  font-size: 0.8rem;
}

.floor-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 24, 40, 0.08);
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  padding: 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(16, 24, 40, 0.08);
}

.zoom-pill {
  min-width: 72px;
  text-align: center;
  color: var(--muted);
}

.canvas-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.96)),
    linear-gradient(180deg, rgba(246, 249, 255, 1), rgba(240, 245, 252, 1));
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.canvas-topline,
.details-header,
.canvas-footer,
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.canvas-topline {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.35));
}

.canvas-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.status-badge,
.panel-chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(94, 168, 255, 0.12);
  border: 1px solid rgba(94, 168, 255, 0.18);
  color: var(--accent);
  font-size: 0.84rem;
}

.canvas-stage {
  position: relative;
  min-height: 0;
}

.editor-svg {
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(circle at center, rgba(94, 168, 255, 0.08), transparent 35%),
    linear-gradient(180deg, rgba(250, 252, 255, 1), rgba(233, 240, 248, 1));
}

.wall-polygon {
  cursor: crosshair;
}

.wall-label,
.draft-label {
  fill: #17324d;
  font-size: 0.12px;
  paint-order: stroke;
  stroke: rgba(247, 250, 253, 0.96);
  stroke-width: 0.04px;
  stroke-linejoin: round;
}

.canvas-hint {
  position: absolute;
  inset: auto 18px 18px 18px;
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(16, 24, 40, 0.08);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 32px rgba(20, 34, 58, 0.08);
}

.canvas-hint strong {
  font-size: 1rem;
}

.canvas-footer {
  padding: 12px 16px 14px;
  color: var(--muted);
  font-size: 0.84rem;
  border-top: 1px solid var(--panel-border);
}

.palette-panel,
.side-panel,
.preview-panel,
.summary-panel {
  display: grid;
  gap: 14px;
}

.palette-panel {
  padding: 14px;
  overflow: hidden;
  min-height: 0;
}

.panel-head {
  align-items: flex-start;
}

.structure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  overflow: auto;
  padding-right: 2px;
}

.structure-tile {
  min-height: 104px;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(94, 168, 255, 0.05), rgba(70, 212, 163, 0.04));
  box-shadow: 0 14px 24px rgba(20, 34, 58, 0.08);
}

.structure-tile.active {
  border-color: rgba(94, 168, 255, 0.42);
  background: linear-gradient(180deg, rgba(94, 168, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.structure-tile strong {
  font-size: 0.95rem;
  line-height: 1.05;
}

.structure-tile span {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
}

.structure-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(94, 168, 255, 0.12);
  color: var(--accent);
}

.panel {
  padding: 14px;
}

.panel-stack {
  display: grid;
  gap: 14px;
  min-height: 0;
}

.side-panel {
  overflow: auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.panel-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(242, 246, 252, 0.9);
  border: 1px solid rgba(16, 24, 40, 0.08);
}

.panel-tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 9px 13px;
  border-radius: 12px;
  font-weight: 600;
  min-height: 40px;
}

.panel-tab.active {
  background: rgba(94, 168, 255, 0.16);
  color: var(--accent);
}

.details-card,
.stats-card {
  padding: 14px;
  display: grid;
  gap: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 18px;
}

.details-note {
  color: var(--muted);
  font-size: 0.86rem;
}

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: var(--muted);
  font-size: 0.85rem;
}

.field input,
.field select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  padding: 12px 14px;
  outline: none;
}

.field input:focus,
.field select:focus {
  border-color: rgba(94, 168, 255, 0.46);
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.room-card,
.metric-tile,
.stat-tile,
.summary-row,
.empty-state {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 24, 40, 0.08);
}

.room-card,
.metric-tile,
.stat-tile {
  padding: 14px;
  display: grid;
  gap: 6px;
}

.room-card span,
.metric-tile span,
.stat-tile span,
.summary-name span {
  color: var(--muted);
  font-size: 0.84rem;
}

.summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.summary-table {
  display: grid;
  gap: 10px;
}

.summary-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(94, 168, 255, 0.08);
}

.summary-name {
  display: grid;
  gap: 4px;
}

.empty-state {
  padding: 18px;
  color: var(--muted);
  border: 1px dashed rgba(16, 24, 40, 0.16);
}

.catalog-block {
  display: grid;
  gap: 10px;
}

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

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

.catalog-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: left;
  border-radius: 18px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 255, 0.92)),
    linear-gradient(135deg, rgba(47, 121, 255, 0.04), rgba(15, 178, 167, 0.03));
  box-shadow: 0 12px 22px rgba(20, 34, 58, 0.08);
}

.catalog-card.active {
  border-color: rgba(94, 168, 255, 0.42);
  background: linear-gradient(180deg, rgba(94, 168, 255, 0.12), rgba(255, 255, 255, 0.04));
}

.catalog-card strong {
  font-size: 0.95rem;
  line-height: 1.05;
}

.catalog-card span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.catalog-preview {
  height: 64px;
  border-radius: 14px;
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: inset 0 1px 8px rgba(255, 255, 255, 0.7);
}

.surface-plaster {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 40%);
}

.surface-paint {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent);
}

.surface-image {
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 50%),
    repeating-linear-gradient(90deg, rgba(24, 36, 54, 0.14) 0 6px, rgba(255, 255, 255, 0.08) 6px 12px);
}

.workspace-dock {
  display: grid;
  grid-template-rows: auto minmax(300px, 390px);
  gap: 8px;
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.96));
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.workspace-dock.expanded {
  grid-template-rows: auto minmax(360px, 1fr);
}

.dock-tabs-wide {
  padding-right: 0;
}

.dock-tabs {
  display: flex;
  gap: 10px;
}

.dock-tab {
  min-width: 78px;
  border-radius: 12px;
  padding: 10px 12px;
}

.dock-tab.active {
  border-color: rgba(94, 168, 255, 0.42);
  background: rgba(94, 168, 255, 0.16);
}

.dock-body {
  min-height: 0;
}

.preview-panel {
  grid-template-rows: auto minmax(220px, 1fr) auto;
  min-height: 0;
}

.preview-panel-pro {
  padding: 0;
}

.workspace-dock.expanded .preview-panel-pro {
  grid-template-rows: auto minmax(260px, 1fr) auto;
}

.preview-header {
  padding: 14px 16px 10px;
}

.preview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mode-switch {
  display: inline-flex;
  gap: 8px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(242, 246, 252, 0.9);
  border: 1px solid rgba(16, 24, 40, 0.08);
}

.mode-chip {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 9px 13px;
  border-radius: 12px;
  font-weight: 600;
}

.mode-chip.active {
  background: rgba(94, 168, 255, 0.16);
  color: var(--accent);
}

.mode-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.preview-canvas {
  min-height: 220px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.08);
  background:
    radial-gradient(circle at center, rgba(47, 121, 255, 0.08), transparent 46%),
    linear-gradient(180deg, rgba(250, 252, 255, 1), rgba(233, 240, 248, 1));
}

.preview-note {
  margin: 0;
}

.preview-canvas-pro {
  position: relative;
  min-height: 390px;
  margin: 0 14px;
  border-radius: 20px;
}

.workspace-dock.expanded .preview-canvas-pro {
  min-height: 480px;
}

.preview-surface {
  position: absolute;
  inset: 0;
}

.cinema-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 38%, rgba(5, 10, 18, 0.16) 92%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(15, 23, 35, 0.08));
  mix-blend-mode: screen;
}

.walk-overlay {
  position: absolute;
  inset: auto 16px 16px 16px;
  display: grid;
  gap: 8px;
  max-width: 340px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(16, 24, 40, 0.08);
  box-shadow: 0 18px 34px rgba(20, 34, 58, 0.08);
  backdrop-filter: blur(10px);
}

.walk-overlay strong {
  font-size: 1.05rem;
}

.walk-overlay span {
  color: var(--muted);
  line-height: 1.45;
}

.walk-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.compact-copy {
  margin: 0;
}

.section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.section-title svg {
  color: var(--accent);
}

@media (max-width: 860px) {
  .editor-shell {
    grid-template-columns: minmax(0, 1fr) 282px;
    grid-template-areas:
      "workspace right";
    gap: 12px;
    padding: 12px;
  }

  .rail-panel {
    grid-area: rail;
    display: none;
  }

  .workspace-column {
    grid-area: workspace;
  }

  .right-column {
    grid-area: right;
  }

  .workspace-column {
    grid-template-rows: auto minmax(250px, 1fr) auto;
  }

  .workspace-dock {
    grid-template-rows: auto minmax(210px, 270px);
  }

  .structure-grid {
    grid-template-columns: 1fr;
  }

  .preview-canvas-pro {
    min-height: 260px;
  }
}

@media (max-width: 980px) {
  .brand-meta {
    display: none;
  }

  .project-name {
    width: auto;
    max-width: 100%;
    font-size: 1.08rem;
  }

  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-preview-visual {
    height: 240px;
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .workspace-hero {
    grid-template-columns: 1fr;
  }

  .workspace-hero-actions {
    flex-direction: row;
    justify-self: start;
    min-width: 0;
    flex-wrap: wrap;
  }

  .workspace-hero-stats {
    grid-template-columns: 1fr 1fr;
  }

  .preview-canvas-pro {
    min-height: 260px;
  }

  .palette-panel {
    padding: 12px;
  }

  .structure-grid {
    max-height: 280px;
  }
}

@media (max-width: 720px) {
  .editor-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "workspace"
      "right";
    gap: 12px;
    padding: 12px;
  }

  .rail-panel {
    display: none;
  }

  .start-hero {
    padding: 20px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .top-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-block {
    flex-wrap: wrap;
  }

  .toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .canvas-topline,
  .details-header,
  .canvas-footer,
  .panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .canvas-badges {
    width: 100%;
  }

  .structure-grid {
    grid-template-columns: 1fr;
  }

  .workspace-column,
  .right-column {
    gap: 12px;
  }

  .workspace-hero {
    display: none;
  }

  .preview-header {
    gap: 10px;
  }

  .mode-switch {
    width: 100%;
    justify-content: space-between;
  }

  .mode-chip {
    flex: 1;
  }

  .preview-canvas-pro {
    margin: 0 12px;
    min-height: 250px;
  }

  .workspace-dock {
    grid-template-rows: auto minmax(180px, 240px);
  }
}

@media (max-width: 900px) {
  html,
  body,
  #root {
    min-height: 100%;
    height: auto;
    overflow: auto;
  }

  .app-shell {
    min-height: 100%;
    height: auto;
    overflow: auto;
  }

  .editor-shell {
    height: auto;
    min-height: 100%;
    padding: 10px;
    gap: 10px;
  }

  .editor-shell-mobile {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    align-items: start;
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }

  .editor-shell-mobile .rail-panel,
  .editor-shell-mobile .right-column {
    display: none;
  }

  .editor-shell-mobile .workspace-column {
    min-height: 0;
    gap: 10px;
    grid-template-rows: auto minmax(280px, 42vh) auto;
  }

  .mobile-topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 2px 0;
  }

  .mobile-brand {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .mobile-brand .eyebrow {
    margin-bottom: 0;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
  }

  .mobile-brand strong {
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  .mobile-icon-button {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #eff5fb;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }

  .mobile-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    margin-top: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .mobile-view-tab {
    height: 44px;
    border-radius: 13px;
    background: transparent;
    color: #d9e4ef;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .mobile-view-tab.active {
    background: rgba(94, 168, 255, 0.18);
    color: #eef5fc;
    box-shadow: inset 0 0 0 1px rgba(94, 168, 255, 0.18);
  }

  .mobile-workspace .canvas-card {
    min-height: 0;
  }

  .mobile-workspace .canvas-stage {
    min-height: 290px;
  }

  .mobile-workspace .canvas-hint {
    inset: auto 12px 12px 12px;
  }

  .mobile-workspace .workspace-dock {
    padding: 10px;
    gap: 8px;
    grid-template-rows: auto minmax(260px, 1fr);
  }

  .mobile-workspace .workspace-dock.expanded {
    grid-template-rows: auto minmax(290px, 1fr);
  }

  .mobile-workspace .preview-canvas-pro {
    min-height: 300px;
    margin: 0;
  }

  .mobile-workspace .workspace-dock.expanded .preview-canvas-pro {
    min-height: 320px;
  }

  .mobile-workspace .mode-switch {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  .mobile-workspace .mode-chip {
    flex: 1;
  }

  .mobile-workspace .preview-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-workspace .secondary-button.small {
    justify-content: center;
  }

  .mobile-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .mobile-metrics > div {
    padding: 12px 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: grid;
    gap: 4px;
  }

  .mobile-metrics strong {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #7f96ae;
  }

  .mobile-metrics span {
    font-size: 0.9rem;
    color: #eef5fc;
    white-space: nowrap;
  }

  .mobile-bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: rgba(8, 10, 14, 0.94);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
  }

  .mobile-bottom-item {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 14px;
    color: #c7d3e0;
    font-size: 0.74rem;
    background: transparent;
  }

  .mobile-bottom-item.active {
    color: #1f78ff;
    background: rgba(31, 120, 255, 0.12);
  }

  .mobile-bottom-item svg {
    flex-shrink: 0;
  }

  .mobile-bottom-add {
    width: 56px;
    height: 56px;
    justify-self: center;
    align-self: start;
    margin-top: -18px;
    border-radius: 50%;
    background: linear-gradient(180deg, #1f78ff, #0f5ed4);
    color: #fff;
    box-shadow: 0 18px 32px rgba(31, 120, 255, 0.42);
  }

  .mobile-bottom-add svg {
    width: 24px;
    height: 24px;
  }

  .mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    border: 0;
    background: rgba(4, 7, 12, 0.48);
    backdrop-filter: blur(6px);
  }

  .mobile-drawer {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    z-index: 55;
    max-height: min(70vh, 680px);
    overflow: hidden;
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(18, 22, 30, 0.98), rgba(12, 15, 20, 0.98)),
      linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.44);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 12px;
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.24s ease,
      opacity 0.24s ease;
  }

  .mobile-drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 12px;
  }

  .mobile-drawer-head strong {
    display: block;
    color: #f4f8fc;
    font-size: 1rem;
    line-height: 1.2;
  }

  .mobile-drawer-close {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #f4f8fc;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-drawer-body {
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
  }

  .mobile-drawer .palette-panel,
  .mobile-drawer .side-panel {
    height: auto;
    max-height: none;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .mobile-drawer .panel-stack {
    gap: 12px;
  }

  .mobile-drawer .panel-head {
    padding-top: 0;
  }

  .mobile-drawer .structure-grid {
    max-height: none;
  }

  .mobile-drawer .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Light theme refresh */
.start-screen::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(47, 121, 255, 0.11), transparent 16%),
    radial-gradient(circle at 80% 30%, rgba(15, 178, 167, 0.08), transparent 18%),
    linear-gradient(120deg, transparent 0 38%, rgba(255, 255, 255, 0.25) 40%, transparent 43% 100%);
  opacity: 0.9;
}

.start-hero,
.top-toolbar,
.canvas-card,
.palette-panel,
.side-panel,
.workspace-dock,
.preview-panel,
.summary-panel,
.details-card,
.stats-card,
.catalog-card,
.room-card,
.metric-tile,
.stat-tile,
.summary-row,
.empty-state {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(16, 24, 40, 0.08);
  box-shadow: 0 20px 48px rgba(20, 34, 58, 0.1);
}

.start-hero {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 250, 255, 0.92)),
    linear-gradient(135deg, rgba(47, 121, 255, 0.08), rgba(15, 178, 167, 0.05));
}

.hero-preview-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(243, 247, 252, 0.92)),
    linear-gradient(135deg, rgba(47, 121, 255, 0.05), rgba(15, 178, 167, 0.04));
  border-color: rgba(16, 24, 40, 0.08);
}

.hero-preview-visual {
  background:
    radial-gradient(circle at 50% 35%, rgba(47, 121, 255, 0.16), transparent 24%),
    linear-gradient(180deg, rgba(243, 247, 252, 0.98), rgba(228, 236, 246, 0.98));
  border-color: rgba(16, 24, 40, 0.08);
}

.preview-room {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 248, 252, 0.96)),
    radial-gradient(circle at top, rgba(47, 121, 255, 0.08), transparent 38%);
  border-color: rgba(47, 121, 255, 0.2);
}

.preview-wall {
  background: rgba(47, 121, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.preview-openings {
  background: rgba(39, 54, 76, 0.82);
}

.hero-badge,
.preview-pill,
.preview-status {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(16, 24, 40, 0.08);
  color: #48617b;
}

.hero-tile,
.details-card,
.stats-card,
.preview-panel,
.summary-panel,
.canvas-card,
.panel,
.top-toolbar,
.workspace-dock,
.palette-panel,
.side-panel,
.catalog-card,
.room-card,
.metric-tile,
.stat-tile,
.summary-row {
  backdrop-filter: blur(18px);
}

.hero-tile,
.catalog-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 250, 255, 0.92)),
    linear-gradient(135deg, rgba(47, 121, 255, 0.04), rgba(15, 178, 167, 0.03));
}

.tile-icon,
.structure-icon,
.status-badge,
.panel-chip {
  background: rgba(47, 121, 255, 0.12);
  color: var(--accent);
}

.primary-button {
  background: linear-gradient(135deg, #2667f1, #4fa1ff);
  color: #f8fbff;
  box-shadow: 0 14px 28px rgba(47, 121, 255, 0.24);
}

.secondary-button,
.tool-button,
.toolbar-chip,
.icon-button,
.danger-button,
.dock-tab,
.structure-tile,
.brand-mark,
.panel-tab,
.mode-chip {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(16, 24, 40, 0.08);
  color: var(--text);
}

.danger-button {
  background: rgba(214, 90, 90, 0.08);
  border-color: rgba(214, 90, 90, 0.16);
  color: #9e3f3f;
}

.top-toolbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 249, 255, 0.96)),
    linear-gradient(135deg, rgba(47, 121, 255, 0.04), rgba(15, 178, 167, 0.03));
}

.brand-mark {
  background: rgba(47, 121, 255, 0.08);
  color: var(--accent);
  border-color: rgba(47, 121, 255, 0.16);
}

.floor-pill,
.toolbar-actions,
.panel-tabs,
.mode-switch {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(16, 24, 40, 0.08);
}

.project-name {
  color: var(--text);
}

.brand-divider {
  background: rgba(16, 24, 40, 0.18);
}

.brand-note,
.hero-copy,
.muted,
.hero-metrics span,
.hero-tile span,
.catalog-card span,
.room-card span,
.metric-tile span,
.stat-tile span,
.summary-name span,
.details-note,
.canvas-footer,
.walk-overlay span {
  color: var(--muted);
}

.canvas-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 255, 0.94)),
    linear-gradient(180deg, rgba(246, 249, 255, 1), rgba(240, 245, 252, 1));
}

.canvas-topline {
  border-bottom-color: rgba(16, 24, 40, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.35));
}

.editor-svg {
  background:
    radial-gradient(circle at center, rgba(47, 121, 255, 0.08), transparent 35%),
    linear-gradient(180deg, rgba(250, 252, 255, 1), rgba(233, 240, 248, 1));
}

.wall-label,
.draft-label {
  fill: #193047;
  stroke: rgba(255, 255, 255, 0.96);
}

.canvas-hint {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(16, 24, 40, 0.08);
  box-shadow: 0 18px 32px rgba(20, 34, 58, 0.08);
}

.panel-tabs {
  background: rgba(242, 246, 252, 0.9);
}

.panel-tab.active,
.dock-tab.active,
.mode-chip.active {
  background: rgba(47, 121, 255, 0.12);
  color: var(--accent);
  border-color: rgba(47, 121, 255, 0.2);
}

.field input,
.field select {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(16, 24, 40, 0.1);
  color: var(--text);
}

.field input:focus,
.field select:focus {
  border-color: rgba(47, 121, 255, 0.42);
  box-shadow: 0 0 0 4px rgba(47, 121, 255, 0.08);
}

.mobile-topbar,
.mobile-view-switch,
.mobile-metrics > div,
.mobile-bottom-nav,
.mobile-drawer,
.mobile-drawer-close,
.mobile-icon-button {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(16, 24, 40, 0.08);
}

.mobile-topbar {
  box-shadow: 0 16px 36px rgba(20, 34, 58, 0.08);
}

.mobile-icon-button {
  color: var(--text);
}

.mobile-view-tab,
.mobile-bottom-item {
  color: var(--muted);
}

.mobile-view-tab.active,
.mobile-bottom-item.active {
  background: rgba(47, 121, 255, 0.12);
  color: var(--accent);
}

.mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.92);
}

.mobile-bottom-add {
  background: linear-gradient(180deg, #2f79ff, #1e5fe6);
  color: #fff;
}

.mobile-backdrop {
  background: rgba(20, 34, 58, 0.22);
}

.mobile-drawer {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.98)),
    linear-gradient(180deg, rgba(47, 121, 255, 0.04), rgba(15, 178, 167, 0.03));
  box-shadow: 0 24px 72px rgba(20, 34, 58, 0.18);
}

.mobile-drawer-head strong,
.mobile-drawer-close {
  color: var(--text);
}

.mobile-drawer-close {
  background: rgba(255, 255, 255, 0.92);
}

.mobile-drawer .palette-panel,
.mobile-drawer .side-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mobile-metrics strong {
  color: #70839b;
}

.mobile-metrics span {
  color: #16273d;
}

/* Professional application shell */
:root {
  --studio-bg: #edf1f5;
  --studio-panel: #ffffff;
  --studio-line: #dce3eb;
  --studio-line-strong: #cbd5e1;
  --studio-ink: #142338;
  --studio-muted: #6c7e92;
  --studio-blue: #1675e8;
  --studio-blue-soft: #e8f2ff;
  --studio-green: #1b9a71;
  --studio-header: 68px;
  --shadow-soft: 0 10px 28px rgba(24, 40, 63, 0.07);
  font-family: Bahnschrift, "Aptos Display", "Segoe UI Variable", sans-serif;
}

html,
body,
#root {
  background: var(--studio-bg);
  color: var(--studio-ink);
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(22, 117, 232, 0.2);
  outline-offset: 2px;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  margin: 0;
  border-radius: 0;
  min-height: var(--studio-header);
  display: grid;
  grid-template-columns: minmax(230px, 0.8fr) auto minmax(300px, 0.8fr);
  align-items: center;
  gap: 22px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--studio-line);
  box-shadow: 0 3px 14px rgba(28, 45, 68, 0.05);
  backdrop-filter: blur(18px);
}

.app-header-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.app-header-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #0c64ca, #238aff);
  box-shadow: 0 8px 20px rgba(22, 117, 232, 0.24);
}

.app-header-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.app-header-copy strong {
  color: #132238;
  font-size: 0.91rem;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.app-header-copy strong span {
  color: var(--studio-blue);
}

.app-header-copy small {
  color: var(--studio-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--studio-line);
  border-radius: 11px;
  background: #f5f7fa;
}

.app-header-tab {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  color: #63758a;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 650;
}

.app-header-tab.active {
  color: #0f64c4;
  background: #fff;
  box-shadow: 0 2px 8px rgba(26, 43, 66, 0.08);
}

.app-header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.app-header-actions .small {
  min-height: 42px;
  border-radius: 10px;
  padding: 0 14px;
}

.editor-shell {
  width: 100%;
  min-height: calc(100vh - var(--studio-header));
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px;
  overflow: visible;
}

.editor-shell.sidebar-open {
  grid-template-columns: 76px minmax(0, 1fr) minmax(300px, 336px);
}

.rail-panel {
  position: sticky;
  top: calc(var(--studio-header) + 10px);
  z-index: 20;
  max-height: calc(100vh - var(--studio-header) - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 9px 7px;
  overflow-y: auto;
  border: 1px solid var(--studio-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.rail-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #0d68d1, #268dff);
}

.rail-stack {
  width: 100%;
  display: grid;
  gap: 5px;
}

.rail-item {
  width: 100%;
  min-height: 56px;
  padding: 7px 3px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #65778b;
  background: transparent;
}

.rail-item span {
  display: block;
  max-width: 62px;
  overflow: hidden;
  color: inherit;
  font-size: 0.64rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-item:hover {
  color: #184e87;
  background: #f3f7fb;
}

.rail-item.active {
  color: #0d68d1;
  border-color: #bedcff;
  background: var(--studio-blue-soft);
}

.rail-item:disabled {
  opacity: 0.34;
}

.workspace-column {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(560px, 68vh) auto;
  align-content: start;
  gap: 10px;
}

.top-toolbar {
  position: sticky;
  top: calc(var(--studio-header) + 10px);
  z-index: 30;
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(190px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 7px 9px;
  border: 1px solid var(--studio-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 7px 22px rgba(24, 40, 63, 0.06);
  backdrop-filter: blur(16px);
}

.editor-mode-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: #edf1f5;
}

.editor-mode-tab {
  min-width: 52px;
  height: 38px;
  padding: 0 13px;
  border-radius: 7px;
  color: #63758a;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 650;
}

.editor-mode-tab.active {
  color: #fff;
  background: var(--studio-blue);
  box-shadow: 0 5px 12px rgba(22, 117, 232, 0.22);
}

.toolbar-project {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.toolbar-project .floor-pill {
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  color: #354961;
  background: #fff;
  white-space: nowrap;
}

.toolbar-project .project-name {
  min-width: 110px;
  max-width: 210px;
  height: 38px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--studio-ink);
  background: transparent;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.toolbar-project .project-name:hover,
.toolbar-project .project-name:focus {
  border-color: var(--studio-line);
  background: #f7f9fb;
}

.toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
}

.toolbar-actions .icon-button,
.toolbar-new-button,
.toolbar-save-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  color: #40556d;
  background: #fff;
}

.toolbar-save-button {
  color: #fff;
  border-color: var(--studio-blue);
  background: var(--studio-blue);
}

.toolbar-actions .secondary-button.small {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  box-shadow: none;
}

.zoom-pill {
  min-width: 54px;
  color: #556b82;
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.canvas-card,
.workspace-dock,
.palette-panel,
.side-panel {
  border: 1px solid var(--studio-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  backdrop-filter: none;
}

.canvas-card {
  min-height: 560px;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr) 32px;
  overflow: hidden;
}

.canvas-topline {
  padding: 8px 13px;
  border-bottom: 1px solid var(--studio-line);
  background: #fff;
}

.canvas-topline .eyebrow {
  margin-bottom: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
}

.canvas-topline h2 {
  margin: 0;
  font-size: 0.93rem;
}

.canvas-badges {
  gap: 7px;
}

.status-badge {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  color: #0e62bc;
  background: #eaf4ff;
  font-size: 0.76rem;
}

.canvas-badges .secondary-button.small {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  box-shadow: none;
}

.canvas-stage {
  min-height: 0;
  background: #f7fafd;
}

.editor-svg {
  min-height: 100%;
  background: #f8fbfd;
}

.canvas-footer {
  min-height: 32px;
  padding: 0 13px;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border-top: 1px solid var(--studio-line);
  color: #76889b;
  background: #fff;
  font-size: 0.68rem;
  white-space: nowrap;
}

.workspace-dock {
  min-height: 304px;
  display: grid;
  grid-template-rows: 48px minmax(240px, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.workspace-dock.expanded {
  grid-template-rows: 48px minmax(520px, 1fr);
}

.dock-tabs-wide {
  align-items: center;
  gap: 3px;
  padding: 6px 9px;
  border-bottom: 1px solid var(--studio-line);
  background: #f8fafc;
}

.dock-tab {
  min-width: 92px;
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 7px;
  color: #61758a;
  background: transparent;
  box-shadow: none;
}

.dock-tab.active {
  color: #0e65c7;
  border: 0;
  background: #e8f2ff;
}

.preview-panel,
.summary-panel {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
}

.preview-header {
  min-height: 56px;
  padding: 9px 13px;
  border-bottom: 1px solid #e8edf2;
}

.preview-header .eyebrow {
  margin-bottom: 2px;
  font-size: 0.62rem;
}

.preview-header strong {
  font-size: 0.9rem;
}

.mode-switch {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--studio-line);
  border-radius: 9px;
  background: #f2f5f8;
}

.mode-chip {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  font-size: 0.74rem;
}

.mode-chip.active {
  color: #0e65c7;
  border: 0;
  background: #fff;
  box-shadow: 0 2px 7px rgba(25, 43, 66, 0.08);
}

.preview-canvas-pro,
.workspace-dock.expanded .preview-canvas-pro {
  min-height: 420px;
  margin: 10px;
  border-radius: 9px;
  border: 1px solid #d7e0e9;
}

.preview-note {
  padding: 0 13px 12px;
  font-size: 0.73rem;
}

.right-column {
  position: sticky;
  top: calc(var(--studio-header) + 10px);
  z-index: 20;
  max-height: calc(100vh - var(--studio-header) - 20px);
  display: grid;
  grid-template-rows: minmax(260px, 42%) minmax(0, 1fr);
  gap: 10px;
  overflow: hidden;
}

.palette-panel,
.side-panel {
  min-height: 0;
  padding: 12px;
  overflow: auto;
}

.panel-head.compact {
  align-items: center;
  margin-bottom: 10px;
}

.panel-head .eyebrow,
.side-panel .eyebrow {
  margin-bottom: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.panel-head h2,
.side-panel h2 {
  margin-bottom: 0;
  font-size: 0.94rem;
}

.panel-chip {
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 0.66rem;
}

.structure-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: none;
  overflow: visible;
}

.structure-tile {
  min-height: 76px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: start;
  column-gap: 8px;
  padding: 9px;
  border: 1px solid var(--studio-line);
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}

.structure-tile .structure-icon {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  border-radius: 7px;
}

.structure-tile strong {
  font-size: 0.76rem;
}

.structure-tile > span:last-child {
  font-size: 0.64rem;
}

.structure-tile.active {
  color: #0b5db3;
  border-color: #8fc3ff;
  background: #edf6ff;
}

.structure-tile.disabled {
  display: none;
}

.panel-stack {
  gap: 12px;
}

.panel-tabs {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--studio-line);
  border-radius: 9px;
  background: #f2f5f8;
}

.panel-tab {
  min-height: 34px;
  border-radius: 7px;
  font-size: 0.76rem;
}

.panel-tab.active {
  color: #0e65c7;
  background: #fff;
  box-shadow: 0 2px 7px rgba(25, 43, 66, 0.08);
}

.details-card,
.stats-card,
.catalog-card,
.room-card,
.stat-tile,
.summary-row {
  border-color: var(--studio-line);
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}

.details-card,
.stats-card {
  padding: 11px;
}

.field input,
.field select {
  min-height: 38px;
  border-radius: 8px;
  background: #fff;
}

/* Start dashboard */
.start-screen {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) 48px;
  place-items: stretch;
  padding: 0;
  overflow: visible;
  background:
    radial-gradient(circle at 86% 12%, rgba(31, 132, 244, 0.11), transparent 28%),
    linear-gradient(135deg, #f8fafc 0%, #eef3f8 55%, #f7f9fb 100%);
}

.start-screen::after {
  display: none;
}

.start-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 76px);
  border-bottom: 1px solid rgba(190, 203, 216, 0.72);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(18px);
}

.start-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.start-brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #0c64ca, #238aff);
  box-shadow: 0 8px 20px rgba(22, 117, 232, 0.23);
}

.start-brand strong {
  color: #15253a;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
}

.start-brand em {
  color: var(--studio-blue);
  font-style: normal;
}

.start-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.start-version {
  padding: 7px 10px;
  border-radius: 999px;
  color: #60748a;
  background: #edf2f7;
  font-size: 0.69rem;
  letter-spacing: 0.08em;
}

.start-help {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--studio-line);
  border-radius: 8px;
  color: #40556d;
  background: #fff;
}

.start-dashboard {
  width: min(1380px, calc(100% - 48px));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(560px, 1.22fr);
  align-items: center;
  gap: clamp(44px, 6vw, 96px);
  padding: 48px 0;
}

.start-welcome {
  display: grid;
  align-content: center;
  gap: 34px;
}

.start-welcome .eyebrow {
  margin-bottom: 15px;
  color: var(--studio-blue);
  font-size: 0.73rem;
  font-weight: 700;
}

.start-welcome h1 {
  max-width: 660px;
  margin: 0 0 18px;
  color: #132338;
  font-size: clamp(2.6rem, 4.7vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.start-welcome h1 span {
  color: #7b8da1;
  font-weight: 430;
}

.start-lead {
  max-width: 590px;
  margin: 0;
  color: #66798f;
  font-size: 1.03rem;
  line-height: 1.65;
}

.start-actions {
  max-width: 560px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.start-primary,
.start-action {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 15px;
  border-radius: 11px;
  text-align: left;
}

.start-primary {
  grid-column: 1 / -1;
  color: #fff;
  background: linear-gradient(135deg, #0d69d5, #238bff);
  box-shadow: 0 16px 30px rgba(22, 117, 232, 0.22);
}

.start-primary > span:first-child {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}

.start-action {
  min-width: 0;
  color: #334a63;
  border: 1px solid var(--studio-line);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 20px rgba(24, 40, 63, 0.04);
}

.start-action:hover {
  border-color: #a8cfff;
  transform: translateY(-1px);
}

.start-action:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.start-primary > span:last-child,
.start-action > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.start-primary strong,
.start-action strong {
  font-size: 0.9rem;
}

.start-primary small,
.start-action small {
  color: inherit;
  font-size: 0.72rem;
  opacity: 0.72;
}

.start-project-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #d7e0e9;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 70px rgba(27, 45, 70, 0.13);
}

.project-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 13px;
}

.project-card-head > div {
  display: grid;
  gap: 4px;
}

.project-card-head span {
  color: #7a8da1;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
}

.project-card-head strong {
  font-size: 1.02rem;
}

.project-card-head button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: #0d68d1;
  background: #e8f2ff;
  font-size: 0.78rem;
  font-weight: 700;
}

.project-card-head button span {
  margin-left: 5px;
  color: inherit;
  font-size: 1rem;
  letter-spacing: 0;
}

.blueprint-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid #ced9e4;
  border-radius: 11px;
  background: #f5f9fc;
}

.blueprint-preview > svg {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9.5;
}

.blueprint-toolbar {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 14px rgba(24, 40, 63, 0.08);
}

.blueprint-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #aebdcb;
}

.blueprint-dot.active {
  background: #1681ef;
}

.blueprint-zoom {
  margin-left: 5px;
  color: #5e7287;
  font-size: 0.61rem;
}

.blueprint-status {
  position: absolute;
  right: 11px;
  bottom: 11px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 10px;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  color: #5b6f84;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 5px 14px rgba(24, 40, 63, 0.08);
  font-size: 0.65rem;
}

.blueprint-status span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blueprint-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22a978;
}

.blueprint-status strong {
  color: #1c334b;
  font-size: 0.72rem;
}

.project-card-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 10px;
}

.project-card-meta div {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #f4f7fa;
}

.project-card-meta span {
  color: #8191a2;
  font-size: 0.62rem;
}

.project-card-meta strong {
  font-size: 0.72rem;
}

.project-card-meta .ready {
  color: var(--studio-green);
}

.start-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 5vw, 76px);
  color: #8291a0;
  border-top: 1px solid rgba(190, 203, 216, 0.66);
  font-size: 0.7rem;
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .app-header {
    grid-template-columns: minmax(205px, 0.7fr) auto minmax(250px, 0.7fr);
    gap: 10px;
    padding-inline: 12px;
  }

  .app-header-tab {
    padding-inline: 11px;
  }

  .app-header-actions .secondary-button:first-child {
    display: none;
  }

  .editor-shell.sidebar-open {
    grid-template-columns: 68px minmax(0, 1fr) 300px;
  }

  .editor-shell {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .rail-item span {
    font-size: 0.59rem;
  }

  .editor-mode-tab:nth-child(n + 4) {
    display: none;
  }
}

@media (max-width: 1024px) {
  .app-shell {
    background: #edf1f5;
  }

  .editor-shell-mobile {
    width: min(100%, 860px);
    margin: 0 auto;
    display: grid;
    grid-template-areas: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding: 10px 10px calc(94px + env(safe-area-inset-bottom));
    gap: 10px;
    background: #edf1f5;
  }

  .editor-shell-mobile > *,
  .editor-shell-mobile .workspace-column,
  .editor-shell-mobile .mobile-workspace {
    grid-area: auto;
    min-width: 0;
    width: 100%;
  }

  .mobile-topbar {
    position: sticky;
    top: 8px;
    z-index: 40;
    min-height: 60px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px;
    border: 1px solid var(--studio-line);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(24, 40, 63, 0.08);
    backdrop-filter: blur(16px);
  }

  .mobile-brand .eyebrow {
    color: var(--studio-blue);
  }

  .mobile-brand {
    display: grid;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }

  .mobile-brand strong {
    color: var(--studio-ink);
  }

  .mobile-icon-button {
    width: 40px;
    height: 40px;
    color: #31475e;
    border: 1px solid var(--studio-line);
    border-radius: 9px;
    background: #fff;
    box-shadow: none;
  }

  .mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
  }

  .mobile-view-switch {
    margin-top: 0;
    padding: 4px;
    border: 1px solid var(--studio-line);
    border-radius: 11px;
    background: #f7f9fb;
  }

  .mobile-view-tab {
    height: 40px;
    border-radius: 8px;
    color: #60758a;
    font-size: 0.82rem;
  }

  .mobile-view-tab.active {
    color: #fff;
    background: var(--studio-blue);
    box-shadow: 0 5px 12px rgba(22, 117, 232, 0.2);
  }

  .editor-shell-mobile .workspace-column {
    grid-template-rows: minmax(420px, 62vh) auto;
    gap: 10px;
  }

  .mobile-workspace .canvas-card {
    min-height: 420px;
  }

  .mobile-workspace .canvas-stage {
    min-height: 330px;
  }

  .mobile-workspace .workspace-dock,
  .mobile-workspace .workspace-dock.expanded {
    grid-template-rows: 48px minmax(420px, auto);
    padding: 0;
  }

  .mobile-workspace .preview-canvas-pro,
  .mobile-workspace .workspace-dock.expanded .preview-canvas-pro {
    min-height: 390px;
    margin: 10px;
  }

  .mobile-workspace .preview-actions {
    flex-direction: row;
    align-items: center;
  }

  .mobile-workspace .mode-switch {
    width: auto;
  }

  .mobile-metrics > div {
    padding: 10px;
    border: 1px solid var(--studio-line);
    border-radius: 10px;
    background: #fff;
  }

  .mobile-bottom-nav {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--studio-line);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 28px rgba(24, 40, 63, 0.08);
  }

  .mobile-bottom-item {
    color: #60758a;
    border-radius: 9px;
  }

  .mobile-bottom-add {
    color: #fff;
    background: var(--studio-blue);
  }

  .mobile-drawer {
    border: 1px solid var(--studio-line);
    border-radius: 16px;
    background: #fff;
  }

  .mobile-drawer .structure-tile.disabled {
    display: none;
  }

  .start-dashboard {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 40px 0;
  }

  .start-welcome {
    gap: 24px;
  }

  .start-welcome h1 {
    font-size: clamp(2.8rem, 9vw, 5rem);
  }
}

@media (max-width: 640px) {
  .start-screen {
    grid-template-rows: 64px auto 44px;
  }

  .start-nav {
    padding: 0 14px;
  }

  .start-brand-mark {
    width: 38px;
    height: 38px;
  }

  .start-brand strong {
    font-size: 0.78rem;
  }

  .start-version {
    display: none;
  }

  .start-dashboard {
    width: calc(100% - 28px);
    gap: 30px;
    padding: 30px 0;
  }

  .start-welcome h1 {
    font-size: clamp(2.45rem, 13vw, 4rem);
  }

  .start-lead {
    font-size: 0.92rem;
  }

  .start-actions {
    grid-template-columns: 1fr;
  }

  .start-primary {
    grid-column: auto;
  }

  .project-card-meta {
    grid-template-columns: 1fr 1fr;
  }

  .project-card-meta div:last-child {
    display: none;
  }

  .blueprint-status span {
    display: none;
  }

  .start-footer {
    padding: 0 14px;
  }

  .start-footer span:last-child {
    display: none;
  }

  .editor-shell-mobile {
    padding-inline: 7px;
  }

  .mobile-actions {
    gap: 4px;
  }

  .mobile-icon-button {
    width: 36px;
    height: 36px;
  }

  .editor-shell-mobile .workspace-column {
    grid-template-rows: minmax(350px, 55vh) auto;
  }

  .mobile-workspace .canvas-card {
    min-height: 350px;
  }

  .canvas-topline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 7px 9px;
  }

  .canvas-badges .secondary-button {
    display: none;
  }

  .canvas-footer span:nth-child(n + 2) {
    display: none;
  }

  .mobile-workspace .preview-header {
    align-items: stretch;
  }

  .mobile-workspace .preview-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mobile-workspace .mode-switch {
    width: 100%;
  }

  .mobile-workspace .mode-chip {
    min-width: 0;
    padding-inline: 6px;
  }

  .mobile-workspace .preview-canvas-pro,
  .mobile-workspace .workspace-dock.expanded .preview-canvas-pro {
    min-height: 330px;
  }
}

/* Full product landing page */
.landing-page.start-screen {
  display: block;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  color: #14263a;
  background: #f6f8fa;
}

.landing-page * {
  scroll-margin-top: 92px;
}

.landing-page a {
  color: inherit;
  text-decoration: none;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 76px;
  padding: 0 clamp(24px, 4.5vw, 76px);
  border-bottom: 1px solid rgba(201, 210, 220, 0.82);
  background: rgba(250, 252, 253, 0.9);
  backdrop-filter: blur(22px);
}

.landing-nav .start-brand {
  flex: 0 0 auto;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.7vw, 42px);
}

.landing-nav-links a {
  position: relative;
  color: #52677c;
  font-size: 0.76rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.landing-nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background: #1878e8;
  transition: transform 0.22s ease;
}

.landing-nav-links a:hover::after {
  transform: scaleX(1);
}

.landing-nav-actions {
  gap: 8px;
}

.landing-continue,
.landing-open {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 9px;
  font-size: 0.76rem;
  font-weight: 700;
}

.landing-continue {
  color: #40566d;
  border: 1px solid #d8e0e8;
  background: #fff;
}

.landing-open {
  color: #fff;
  background: #1675e8;
  box-shadow: 0 9px 20px rgba(22, 117, 232, 0.22);
}

.landing-open span,
.landing-primary-cta span,
.landing-inline-cta span,
.landing-final-cta button span {
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.2s ease;
}

.landing-open:hover span,
.landing-primary-cta:hover span,
.landing-inline-cta:hover span,
.landing-final-cta button:hover span {
  transform: translateX(4px);
}

.landing-hero {
  min-height: 790px;
  display: grid;
  grid-template-columns: minmax(420px, 0.83fr) minmax(620px, 1.17fr);
  align-items: center;
  gap: clamp(34px, 4vw, 70px);
  padding: 74px clamp(24px, 4.5vw, 76px) 92px;
  background:
    radial-gradient(circle at 79% 20%, rgba(33, 132, 242, 0.13), transparent 28%),
    radial-gradient(circle at 12% 74%, rgba(23, 146, 111, 0.07), transparent 27%),
    linear-gradient(135deg, #f9fbfc 0%, #eef3f7 100%);
}

.landing-hero-copy {
  position: relative;
  z-index: 5;
  max-width: 670px;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: #49657e;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-kicker span {
  width: 25px;
  height: 2px;
  background: #1675e8;
}

.landing-hero h1 {
  margin: 0 0 25px;
  color: #102238;
  font-size: clamp(3.8rem, 5.65vw, 6.9rem);
  font-weight: 690;
  line-height: 0.93;
  letter-spacing: -0.06em;
}

.landing-hero h1 em {
  color: #1675e8;
  font-style: normal;
  font-weight: 690;
}

.landing-hero-copy > p {
  max-width: 590px;
  margin: 0;
  color: #61768c;
  font-family: "Aptos", "Segoe UI Variable", sans-serif;
  font-size: 1.06rem;
  line-height: 1.68;
}

.landing-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
}

.landing-primary-cta,
.landing-secondary-cta,
.landing-inline-cta,
.landing-light-cta {
  min-height: 52px;
  padding: 0 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
}

.landing-primary-cta {
  color: #fff;
  background: linear-gradient(135deg, #116bd5, #2188f6);
  box-shadow: 0 15px 28px rgba(22, 117, 232, 0.24);
}

.landing-secondary-cta {
  color: #344c65;
  border: 1px solid #d1dbe5;
  background: rgba(255, 255, 255, 0.84);
}

.landing-trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 590px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid #d5dee7;
}

.landing-trust-row div {
  display: grid;
  gap: 3px;
  padding-right: 16px;
}

.landing-trust-row div + div {
  padding-left: 18px;
  border-left: 1px solid #d5dee7;
}

.landing-trust-row strong {
  color: #1e344b;
  font-size: 0.83rem;
}

.landing-trust-row span {
  color: #7b8fa2;
  font-family: "Aptos", "Segoe UI Variable", sans-serif;
  font-size: 0.68rem;
}

.landing-hero-visual {
  position: relative;
  min-width: 0;
  padding: 18px 0 42px 24px;
}

.landing-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0 -90px -20px 11%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 117, 232, 0.16), transparent 67%);
  filter: blur(10px);
}

.hero-studio-window {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(199, 210, 222, 0.92);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 36px 80px rgba(18, 37, 58, 0.2);
  transform: perspective(1600px) rotateY(-2.5deg) rotateX(0.6deg);
  transform-origin: left center;
}

.studio-window-bar {
  height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid #dce3ea;
  background: #f9fbfc;
}

.studio-window-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #1a344f;
  font-size: 0.68rem;
  font-weight: 700;
}

.studio-window-brand svg {
  color: #1675e8;
}

.studio-window-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: #edf2f6;
}

.studio-window-tabs span {
  padding: 7px 12px;
  border-radius: 6px;
  color: #6b7e91;
  font-size: 0.61rem;
  font-weight: 700;
}

.studio-window-tabs .active {
  color: #fff;
  background: #1675e8;
}

.studio-window-action {
  justify-self: end;
  padding: 8px 10px;
  border-radius: 7px;
  color: #fff;
  background: #15283d;
  font-size: 0.59rem;
  font-weight: 700;
}

.studio-render-frame {
  position: relative;
  aspect-ratio: 16 / 10.25;
  overflow: hidden;
  background: #1b2228;
}

.studio-render-frame > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.studio-render-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 12, 18, 0.06), transparent 45%, rgba(6, 12, 18, 0.16));
}

.render-mode-chip {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 8px;
  color: #fff;
  background: rgba(8, 14, 20, 0.66);
  backdrop-filter: blur(12px);
  font-size: 0.57rem;
  letter-spacing: 0.08em;
}

.render-mode-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38d59a;
  box-shadow: 0 0 0 4px rgba(56, 213, 154, 0.14);
}

.render-controls {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(8, 14, 20, 0.72);
  backdrop-filter: blur(12px);
}

.render-controls span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.hero-plan-float {
  position: absolute;
  z-index: 4;
  left: -34px;
  bottom: -17px;
  width: min(330px, 43%);
  overflow: hidden;
  border: 1px solid #d3dde7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(18, 37, 58, 0.2);
}

.hero-plan-head,
.hero-plan-foot {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 11px;
  color: #6b7f92;
  font-size: 0.55rem;
  letter-spacing: 0.08em;
}

.hero-plan-head {
  border-bottom: 1px solid #e1e7ed;
}

.hero-plan-head strong {
  color: #20384f;
  font-size: 0.68rem;
  letter-spacing: 0;
}

.hero-plan-foot {
  min-height: 34px;
  border-top: 1px solid #e1e7ed;
  letter-spacing: 0;
}

.hero-plan-foot span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-plan-foot i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #20a779;
}

.landing-plan {
  position: relative;
  overflow: hidden;
  background: #f7fafc;
}

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

.landing-plan.compact {
  aspect-ratio: 16 / 8.9;
}

.hero-cost-float {
  position: absolute;
  z-index: 5;
  right: -18px;
  bottom: 28px;
  width: 190px;
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  color: #fff;
  background: rgba(13, 27, 42, 0.88);
  box-shadow: 0 18px 40px rgba(18, 37, 58, 0.22);
  backdrop-filter: blur(16px);
}

.hero-cost-float > span {
  color: #9eb0c2;
  font-size: 0.54rem;
  letter-spacing: 0.12em;
}

.hero-cost-float strong {
  font-size: 1rem;
}

.hero-cost-float small {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #91dac0;
  font-size: 0.57rem;
}

.hero-cost-float i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38d59a;
}

.landing-logo-strip {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 54px);
  padding: 15px 24px;
  overflow: hidden;
  color: #77899a;
  border-top: 1px solid #d9e1e8;
  border-bottom: 1px solid #d9e1e8;
  background: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  white-space: nowrap;
}

.landing-logo-strip i {
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b7c3ce;
}

.landing-section {
  padding: 118px clamp(24px, 5.8vw, 96px);
}

.landing-section-heading {
  max-width: 730px;
  margin-bottom: 48px;
}

.landing-section-heading.centered {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.section-number {
  display: inline-block;
  margin-bottom: 15px;
  color: #1675e8;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.17em;
}

.landing-section-heading h2,
.studio-copy h2,
.render-showcase-copy h2,
.landing-final-cta h2 {
  margin: 0 0 18px;
  color: #12263b;
  font-size: clamp(2.6rem, 4.2vw, 5.1rem);
  font-weight: 670;
  line-height: 0.99;
  letter-spacing: -0.048em;
}

.landing-section-heading p,
.studio-copy > p,
.render-showcase-copy > p {
  margin: 0;
  color: #667b90;
  font-family: "Aptos", "Segoe UI Variable", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
}

.feature-overview {
  background:
    radial-gradient(circle at 90% 12%, rgba(22, 117, 232, 0.07), transparent 22%),
    #f6f8fa;
}

.feature-overview-grid {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.feature-overview-card {
  position: relative;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  padding: 23px;
  overflow: hidden;
  border: 1px solid #d9e1e8;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(23, 42, 64, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.feature-overview-card:hover {
  transform: translateY(-4px);
  border-color: #b9d4ef;
  box-shadow: 0 22px 46px rgba(23, 42, 64, 0.1);
}

.feature-overview-card.featured {
  grid-column: span 2;
  padding-right: 45%;
}

.feature-overview-card.visual-card {
  color: #fff;
  background: #172431;
}

.feature-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 34px;
  border-radius: 10px;
  color: #116bd5;
  background: #e8f3ff;
}

.visual-card .feature-card-icon {
  position: relative;
  z-index: 2;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.feature-status {
  position: absolute;
  top: 24px;
  right: 23px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-status.live {
  color: #187754;
  background: #e5f7f0;
}

.feature-status.next {
  color: #8a6522;
  background: #fbf2df;
}

.visual-card .feature-status {
  z-index: 2;
  color: #d5e8ff;
  background: rgba(15, 29, 43, 0.7);
}

.feature-overview-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 10px;
  font-size: 1.08rem;
}

.feature-overview-card p {
  position: relative;
  z-index: 2;
  max-width: 530px;
  margin: 0;
  color: #718397;
  font-family: "Aptos", "Segoe UI Variable", sans-serif;
  font-size: 0.83rem;
  line-height: 1.55;
}

.visual-card p {
  color: #c1cfdb;
}

.feature-mini-plan {
  position: absolute;
  top: 78px;
  right: -22px;
  bottom: -18px;
  width: 46%;
  overflow: hidden;
  border: 1px solid #d6e0e9;
  border-radius: 12px 0 0 0;
  box-shadow: -12px 18px 36px rgba(23, 42, 64, 0.12);
}

.visual-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}

.visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 23, 34, 0.22), rgba(12, 23, 34, 0.92));
}

.material-swatches-row {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
}

.material-swatches-row i {
  width: 38px;
  height: 38px;
  border: 3px solid #fff;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(23, 42, 64, 0.13);
}

.material-swatches-row i:nth-child(1) { background: #d9c5aa; }
.material-swatches-row i:nth-child(2) { background: #e7e3db; }
.material-swatches-row i:nth-child(3) { background: #9ba28f; }
.material-swatches-row i:nth-child(4) { background: #b47d51; }
.material-swatches-row i:nth-child(5) { background: #3f4b55; }

.mini-cost-bars {
  height: 65px;
  display: grid;
  align-content: end;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
}

.mini-cost-bars span {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1778e8, #61aaf8);
}

.mini-history {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 30px;
}

.mini-history i {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1675e8;
  box-shadow: 0 0 0 2px #8fc1f7;
}

.mini-history span {
  height: 2px;
  flex: 1;
  background: #bfd6ec;
}

.mini-docs {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
}

.mini-docs span {
  width: 56px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid #d9e2ea;
  border-radius: 8px;
  color: #52718f;
  background: #f5f8fa;
  font-size: 0.63rem;
  font-weight: 750;
}

.studio-showcase {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(650px, 1.28fr);
  align-items: center;
  gap: clamp(45px, 6vw, 100px);
  background: #fff;
}

.studio-copy {
  max-width: 570px;
}

.feature-points {
  display: grid;
  gap: 12px;
  margin: 28px 0 31px;
  padding: 0;
  list-style: none;
}

.feature-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #405972;
  font-family: "Aptos", "Segoe UI Variable", sans-serif;
  font-size: 0.84rem;
}

.feature-points li span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #1675e8;
  background: #e7f2fe;
  font-family: Bahnschrift, sans-serif;
  font-size: 0.7rem;
}

.landing-inline-cta {
  color: #fff;
  background: #152b42;
}

.editor-product-shot {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #cad5df;
  border-radius: 16px;
  background: #eef2f6;
  box-shadow: 0 35px 80px rgba(20, 39, 60, 0.16);
}

.editor-shot-top {
  min-height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border-bottom: 1px solid #d5dee7;
  background: #fff;
}

.editor-shot-top > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
}

.editor-shot-top > div:first-child svg {
  color: #1675e8;
}

.editor-shot-top > div:nth-child(2) {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: #eef2f6;
}

.editor-shot-top > div:nth-child(2) span {
  padding: 8px 12px;
  border-radius: 6px;
  color: #718396;
  font-size: 0.59rem;
}

.editor-shot-top > div:nth-child(2) .active {
  color: #fff;
  background: #1675e8;
}

.editor-shot-top button {
  min-height: 34px;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 7px;
  color: #fff;
  background: #1675e8;
  font-size: 0.6rem;
}

.editor-shot-body {
  height: clamp(410px, 40vw, 560px);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 190px;
  gap: 7px;
  padding: 7px;
}

.editor-shot-rail,
.editor-shot-properties,
.editor-shot-body > .landing-plan {
  border: 1px solid #d4dde6;
  border-radius: 10px;
  background: #fff;
}

.editor-shot-rail {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 7px;
}

.editor-shot-rail span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #60768b;
}

.editor-shot-rail span.active {
  color: #fff;
  background: #1675e8;
}

.editor-shot-body > .landing-plan {
  min-width: 0;
}

.editor-shot-properties {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px 11px;
}

.editor-shot-properties > strong {
  color: #1675e8;
  font-size: 0.57rem;
  letter-spacing: 0.14em;
}

.editor-shot-properties label {
  display: grid;
  gap: 5px;
  color: #75889a;
  font-size: 0.57rem;
}

.editor-shot-properties label span {
  min-height: 36px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid #d9e1e8;
  border-radius: 7px;
  color: #283f56;
  background: #fafcfd;
  font-size: 0.61rem;
}

.property-colors {
  display: flex;
  gap: 7px;
}

.property-colors i {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 7px;
  box-shadow: 0 0 0 1px #d2dce5;
}

.property-colors i:nth-child(1) { background: #e6dfd2; }
.property-colors i:nth-child(2) { background: #b0a58f; }
.property-colors i:nth-child(3) { background: #64706d; }

.editor-shot-status {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  border-top: 1px solid #d5dee7;
  color: #6f8295;
  background: #fff;
  font-size: 0.58rem;
}

.render-showcase {
  position: relative;
  min-height: min(840px, 76vw);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #101820;
}

.render-showcase > img,
.render-showcase-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.render-showcase > img {
  object-fit: cover;
}

.render-showcase-shade {
  background:
    linear-gradient(90deg, rgba(9, 17, 24, 0.86) 0%, rgba(9, 17, 24, 0.5) 42%, rgba(9, 17, 24, 0.03) 75%),
    linear-gradient(180deg, rgba(9, 17, 24, 0.12), rgba(9, 17, 24, 0.4));
}

.render-showcase-copy {
  position: relative;
  z-index: 2;
  width: min(630px, 48%);
  margin-left: clamp(24px, 7vw, 118px);
  color: #fff;
}

.section-number.light {
  color: #83bdff;
}

.render-showcase-copy h2 {
  color: #fff;
}

.render-showcase-copy > p {
  max-width: 510px;
  color: #d1dae2;
}

.render-showcase-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 30px 0 18px;
}

.render-showcase-modes span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: #dbe5ed;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(12px);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
}

.landing-light-cta {
  color: #14263a;
  background: #fff;
}

.walkthrough-hud {
  position: absolute;
  z-index: 3;
  right: clamp(22px, 5vw, 82px);
  bottom: 38px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #fff;
  background: rgba(7, 14, 20, 0.62);
  backdrop-filter: blur(14px);
}

.walkthrough-hud > div {
  display: flex;
  gap: 3px;
}

.walkthrough-hud kbd {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
  font-family: inherit;
  font-size: 0.58rem;
}

.walkthrough-hud > span {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.materials-showcase {
  background: #f5f7f9;
}

.materials-showcase > .landing-section-heading {
  max-width: 760px;
}

.materials-dashboard {
  width: min(1320px, 100%);
  min-height: 610px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #ccd7e1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(21, 40, 61, 0.13);
}

.materials-catalog {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 20px;
  border-right: 1px solid #d7e0e8;
  background: #fbfcfd;
}

.materials-search {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #d7e0e8;
  border-radius: 8px;
  color: #8292a2;
  background: #fff;
  font-family: "Aptos", sans-serif;
  font-size: 0.72rem;
}

.catalog-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border-radius: 8px;
  background: #eef2f5;
}

.catalog-tabs span {
  padding: 8px 4px;
  border-radius: 6px;
  color: #738698;
  font-size: 0.61rem;
  text-align: center;
}

.catalog-tabs .active {
  color: #126acc;
  background: #fff;
  box-shadow: 0 2px 7px rgba(20, 39, 60, 0.08);
}

.materials-catalog > strong {
  color: #7a8da0;
  font-size: 0.61rem;
  letter-spacing: 0.13em;
}

.catalog-material-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.catalog-material-grid > div {
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 1px solid #dbe3ea;
  border-radius: 9px;
  background: #fff;
}

.catalog-material-grid i {
  width: 100%;
  aspect-ratio: 1.6;
  display: block;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(20, 39, 60, 0.07);
}

.catalog-material-grid span {
  color: #40586f;
  font-size: 0.62rem;
}

.tone-sand { background: linear-gradient(135deg, #e1d0b9, #c4ac90); }
.tone-white { background: linear-gradient(135deg, #f3f2ed, #d9d8d1); }
.tone-stone { background: linear-gradient(135deg, #bbb9b0, #8e8d87); }
.tone-wood { background: repeating-linear-gradient(100deg, #a9774f 0 9px, #b9885e 9px 16px); }
.tone-green { background: linear-gradient(135deg, #aab4a1, #7f8e79); }
.tone-graphite { background: linear-gradient(135deg, #555d62, #2f373d); }

.cost-summary-card {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto minmax(190px, 1fr) auto;
  padding: 25px 28px;
  background:
    radial-gradient(circle at 90% 10%, rgba(22, 117, 232, 0.08), transparent 25%),
    #fff;
}

.cost-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cost-summary-head > div {
  display: grid;
  gap: 5px;
}

.cost-summary-head span,
.cost-total > span {
  color: #7a8da0;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.cost-summary-head strong {
  font-size: 1rem;
}

.cost-live {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 999px;
  color: #18805a !important;
  background: #e8f7f1;
  font-size: 0.56rem !important;
}

.cost-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22a979;
}

.cost-total {
  display: grid;
  gap: 6px;
  margin-top: 30px;
}

.cost-total strong {
  color: #132a42;
  font-size: clamp(2rem, 3.2vw, 3.8rem);
  letter-spacing: -0.045em;
}

.cost-total small {
  color: #be7b31;
  font-size: 0.64rem;
}

.cost-chart {
  min-height: 210px;
  display: flex;
  align-items: end;
  gap: clamp(12px, 2vw, 30px);
  padding: 35px 10px 32px;
  border-bottom: 1px solid #dbe3ea;
}

.cost-chart > div {
  position: relative;
  flex: 1;
  min-width: 30px;
  border-radius: 8px 8px 2px 2px;
  background: linear-gradient(180deg, #2a8cf6, #1268cf);
  box-shadow: 0 9px 20px rgba(22, 117, 232, 0.15);
}

.cost-chart span {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  color: #728598;
  font-size: 0.55rem;
  white-space: nowrap;
}

.cost-table {
  display: grid;
  margin-top: 16px;
}

.cost-table > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px 110px;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid #e4e9ee;
  color: #556c82;
  font-family: "Aptos", sans-serif;
  font-size: 0.68rem;
}

.cost-table strong {
  color: #233c54;
  text-align: right;
}

.platform-grid-section {
  background: #fff;
}

.platform-grid {
  width: min(1340px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.platform-grid article {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  padding: 22px;
  overflow: hidden;
  border: 1px solid #d9e1e8;
  border-radius: 14px;
  background: #f8fafb;
}

.platform-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border-radius: 10px;
  color: #1675e8;
  background: #e7f2fe;
}

.platform-grid h3 {
  margin: 0 0 9px;
  font-size: 1rem;
}

.platform-grid article > p {
  margin: 0 0 28px;
  color: #718397;
  font-family: "Aptos", sans-serif;
  font-size: 0.79rem;
  line-height: 1.55;
}

.platform-history {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid #dce4eb;
}

.platform-history i {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #1675e8;
}

.platform-history span {
  display: grid;
  gap: 3px;
}

.platform-history strong {
  font-size: 0.68rem;
}

.platform-history small {
  color: #8191a1;
  font-size: 0.62rem;
}

.platform-files {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: auto;
}

.platform-files span {
  min-height: 90px;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 1px solid #d8e1e9;
  border-radius: 9px;
  color: #1675e8;
  background: #fff;
  font-size: 0.7rem;
  font-weight: 750;
  text-align: center;
}

.platform-files small {
  color: #76899b;
  font-size: 0.53rem;
  font-weight: 500;
}

.platform-floors {
  display: grid;
  gap: 7px;
  margin-top: auto;
}

.platform-floors span {
  padding: 11px;
  border: 1px solid #d9e2e9;
  border-radius: 8px;
  color: #687d90;
  background: #fff;
  font-size: 0.59rem;
  letter-spacing: 0.07em;
}

.platform-floors span.active {
  color: #fff;
  border-color: #1675e8;
  background: #1675e8;
  box-shadow: 0 9px 18px rgba(22, 117, 232, 0.17);
}

.platform-devices {
  position: relative;
  min-height: 150px;
  margin-top: auto;
}

.platform-devices span {
  position: absolute;
  display: block;
  border: 3px solid #31485f;
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(22, 117, 232, 0.13), transparent 52%),
    repeating-linear-gradient(0deg, #fff 0 8px, #eef3f7 8px 9px);
  box-shadow: 0 11px 24px rgba(21, 40, 61, 0.13);
}

.device-desktop {
  left: 2%;
  bottom: 8px;
  width: 78%;
  height: 120px;
}

.device-tablet {
  right: 4%;
  bottom: 0;
  width: 41%;
  height: 100px;
  border-width: 5px !important;
}

.device-phone {
  right: 30%;
  bottom: -3px;
  width: 23%;
  height: 79px;
  border-width: 4px !important;
}

.workflow-section {
  background: #f4f7f9;
}

.workflow-steps {
  width: min(1340px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.workflow-steps article {
  min-height: 150px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
  border: 1px solid #d8e1e8;
  border-radius: 12px;
  background: #fff;
}

.workflow-steps article > span {
  color: #1675e8;
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.09em;
}

.workflow-steps article > div {
  display: grid;
  gap: 7px;
}

.workflow-steps strong {
  font-size: 0.9rem;
}

.workflow-steps p {
  margin: 0;
  color: #74879a;
  font-family: "Aptos", sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
}

.workflow-steps > i {
  color: #9badbd;
  font-style: normal;
}

.landing-final-cta {
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  padding: 80px clamp(24px, 7vw, 118px);
  color: #fff;
  background:
    radial-gradient(circle at 80% 30%, rgba(37, 137, 244, 0.32), transparent 28%),
    linear-gradient(135deg, #11263b 0%, #172d43 62%, #0c2033 100%);
}

.landing-final-cta > div:first-child {
  max-width: 800px;
}

.landing-final-cta > div:first-child > span {
  display: inline-block;
  margin-bottom: 18px;
  color: #7dbaff;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
}

.landing-final-cta h2 {
  color: #fff;
}

.landing-final-cta p {
  max-width: 600px;
  margin: 0;
  color: #b8c7d4;
  font-family: "Aptos", sans-serif;
  line-height: 1.6;
}

.final-cta-actions {
  min-width: 220px;
  display: grid;
  gap: 9px;
}

.final-cta-actions button {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
}

.final-cta-actions button:first-child {
  color: #14263a;
  background: #fff;
}

.final-cta-actions button:last-child {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
}

.landing-footer {
  min-height: 100px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 20px clamp(24px, 4.5vw, 76px);
  color: #687d90;
  border-top: 1px solid #d9e1e8;
  background: #fff;
}

.landing-footer .start-brand-mark {
  width: 36px;
  height: 36px;
}

.landing-footer p {
  margin: 0;
  font-family: "Aptos", sans-serif;
  font-size: 0.68rem;
  text-align: center;
}

.landing-footer > span {
  justify-self: end;
  font-size: 0.61rem;
}

@media (max-width: 1180px) {
  .landing-nav-links {
    display: none;
  }

  .landing-hero {
    grid-template-columns: minmax(340px, 0.8fr) minmax(500px, 1.2fr);
    padding-top: 60px;
  }

  .landing-hero h1 {
    font-size: clamp(3.8rem, 6.4vw, 5.6rem);
  }

  .studio-showcase {
    grid-template-columns: 1fr;
  }

  .studio-copy {
    max-width: 750px;
  }

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

  .workflow-steps {
    grid-template-columns: 1fr 1fr;
  }

  .workflow-steps > i {
    display: none;
  }
}

/* Internal product detail and creator links */
.estimate-product-image-button { width: 92px; height: 92px; display: grid; place-items: center; overflow: hidden; padding: 0; border-radius: 10px; background: #f1f4f5; }
.estimate-product-image-button img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s ease; }
.estimate-product-image-button:hover img { transform: scale(1.05); }
.estimate-detail-link { padding: 0; color: #1675e8; background: transparent; font-size: .58rem; font-weight: 750; }
.catalog-results .retail-product-body h3 button,.catalog-results .retail-product-body h3 a { padding: 0; color: inherit; background: transparent; font: inherit; text-align: left; text-decoration:none; }
.catalog-results .retail-product-body h3 button:hover,.catalog-results .retail-product-body h3 a:hover { color: #0e68ca; }
.retail-product-actions .retail-product-link { padding: 0; border: 0; background: transparent; }

.product-detail-backdrop { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 22px; background: rgba(8,18,28,.58); backdrop-filter: blur(12px); }
.product-detail-modal { width: min(1080px,100%); max-height: min(880px,calc(100dvh - 44px)); overflow: auto; color: #17283a; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; background: #f7f9fb; box-shadow: 0 40px 100px rgba(5,14,23,.38); }
.product-detail-header { position: sticky; top: 0; z-index: 5; min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 16px 11px 22px; color: #fff; background: linear-gradient(110deg,#0d1720,#172a38); }
.product-detail-header > div { display: grid; gap: 3px; }
.product-detail-header span { color: #78b9ff; font-size: .66rem; font-weight: 850; letter-spacing: .13em; }
.product-detail-header strong { font-size: 1rem; }
.product-detail-header button { width: 42px; height: 42px; display: grid; place-items: center; color: #e8f0f6; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; background: rgba(255,255,255,.07); }
.product-detail-layout { display: grid; grid-template-columns: minmax(330px,.9fr) minmax(0,1.1fr); gap: 0; border-bottom: 1px solid #dce4ea; background: #fff; }
.product-detail-media { min-width: 0; display: grid; align-content: start; gap: 9px; padding: 24px; border-right: 1px solid #e0e7ec; background: linear-gradient(145deg,#f8fafb,#edf1f4); }
.product-detail-media > div { position: relative; min-height: 360px; display: grid; place-items: center; overflow: hidden; border: 1px solid #dbe3e9; border-radius: 16px; background: #fff; }
.product-detail-media img { width: 100%; height: 100%; max-height: 390px; object-fit: contain; }
.product-detail-media div span { position: absolute; top: 14px; left: 14px; padding: 7px 10px; color: #087660; border-radius: 99px; background: #e7f7f1; font-size: .7rem; font-weight: 850; }
.product-detail-media > small { color: #7b8c9b; font-size: .67rem; letter-spacing: .05em; }
.product-detail-copy { min-width: 0; padding: 32px; }
.product-detail-copy > span { color: #1675e8; font-size: .7rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.product-detail-copy h2 { margin: 9px 0 12px; font-size: clamp(1.65rem,2.5vw,2.55rem); line-height: 1.08; }
.product-detail-copy > p { margin: 0; color: #617589; font-size: .9rem; line-height: 1.65; }
.product-detail-price { display: flex; align-items: baseline; gap: 7px; margin: 22px 0; }
.product-detail-price strong { color: #0a725f; font-size: 1.75rem; }
.product-detail-price span { color: #738698; font-size: .75rem; }
.product-detail-copy dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; border: 1px solid #dce4ea; border-radius: 12px; }
.product-detail-copy dl div { min-width: 0; display: grid; gap: 5px; padding: 12px; }
.product-detail-copy dl div:nth-child(even) { border-left: 1px solid #e0e6eb; }
.product-detail-copy dl div:nth-child(n+3) { border-top: 1px solid #e0e6eb; }
.product-detail-copy dt { color: #7c8e9e; font-size: .64rem; }
.product-detail-copy dd { overflow: hidden; margin: 0; color: #263c50; font-size: .76rem; font-weight: 750; text-overflow: ellipsis; }
.product-detail-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.product-detail-actions button { min-height: 44px; padding: 0 20px; color: #fff; border-radius: 10px; background: #1675e8; font-size: .76rem; font-weight: 850; box-shadow: 0 10px 22px rgba(22,117,232,.22); }
.product-detail-actions a { color: #4f6c85; font-size: .72rem; font-weight: 750; text-decoration: none; }
.product-project-usage,.product-related-creators { margin: 16px; padding: 20px; border: 1px solid #d9e2e8; border-radius: 16px; background: #fff; }
.product-project-usage > div:first-child,.product-related-creators > div:first-child { display: grid; gap: 4px; margin-bottom: 14px; }
.product-project-usage > div:first-child span,.product-related-creators > div:first-child span { color: #1675e8; font-size: .64rem; font-weight: 850; letter-spacing: .12em; }
.product-project-usage > div:first-child strong,.product-related-creators h3 { margin: 0; color: #1b3044; font-size: 1.08rem; }
.product-usage-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); overflow: hidden; border: 1px solid #dce4ea; border-radius: 11px; }
.product-usage-grid article { min-width: 0; display: grid; gap: 5px; padding: 12px; }
.product-usage-grid article + article { border-left: 1px solid #e0e6eb; }
.product-usage-grid span { color: #728698; font-size: .62rem; }
.product-usage-grid strong { color: #1c3348; font-size: .83rem; }
.product-usage-grid .deduction { background: #fff7f5; }
.product-usage-grid .deduction strong { color: #b64c36; }
.product-usage-grid .net { background: #eff9f5; }
.product-usage-grid .net strong { color: #087861; }
.product-related-creators > div:last-child { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.product-related-creators > div:last-child > a { min-width: 0; min-height: 82px; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px; color: inherit; border: 1px solid #dce4ea; border-radius: 12px; background: #f8fafb; text-decoration: none; }
.product-related-creators a:hover { border-color: #9cc8f7; background: #eef6ff; }
.product-related-creators a > i { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: #172b3b; font-size: .65rem; font-style: normal; font-weight: 850; }
.product-related-creators a > span { min-width: 0; display: grid; gap: 4px; }
.product-related-creators a strong { font-size: .76rem; }
.product-related-creators a small { overflow: hidden; color: #788b9b; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.product-related-creators a b { color: #1675e8; font-size: .62rem; white-space: nowrap; }
.product-related-creators > p,.product-project-usage > p { margin: 0; color: #6d8092; font-size: .78rem; }

@media (max-width: 860px) {
  .product-detail-backdrop { padding: 8px; }
  .product-detail-modal { max-height: calc(100dvh - 16px); border-radius: 16px; }
  .product-detail-layout { grid-template-columns: 1fr; }
  .product-detail-media { padding: 14px; border-right: 0; border-bottom: 1px solid #e0e7ec; }
  .product-detail-media > div { min-height: 230px; }
  .product-detail-media img { max-height: 260px; }
  .product-detail-copy { padding: 20px; }
  .product-usage-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .product-usage-grid article:nth-child(4) { border-left: 0; }
  .product-usage-grid article:nth-child(n+4) { border-top: 1px solid #e0e6eb; }
  .product-related-creators > div:last-child { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .estimate-product-image-button { width: 68px; height: 68px; }
  .product-detail-header { min-height: 58px; padding: 8px 10px 8px 14px; }
  .product-detail-media > div { min-height: 190px; }
  .product-detail-copy h2 { font-size: 1.55rem; }
  .product-detail-copy dl { grid-template-columns: 1fr; }
  .product-detail-copy dl div:nth-child(even) { border-left: 0; }
  .product-detail-copy dl div + div { border-top: 1px solid #e0e6eb; }
  .product-detail-actions { align-items: stretch; flex-direction: column; }
  .product-detail-actions button,.product-detail-actions a { width: 100%; text-align: center; }
  .product-usage-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-usage-grid article:nth-child(odd) { border-left: 0; }
  .product-usage-grid article:nth-child(n+3) { border-top: 1px solid #e0e6eb; }
}

/* Manufacturer UX: larger type, clear hit areas and the interactive 3D material studio. */
.manufacturer-studio,
.manufacturer-visualization { font-size: 16px; }
.manufacturer-studio a:focus-visible,
.manufacturer-studio button:focus-visible,
.manufacturer-studio input:focus-visible,
.manufacturer-studio select:focus-visible,
.manufacturer-visualization a:focus-visible,
.manufacturer-visualization button:focus-visible,
.manufacturer-visualization input:focus-visible,
.manufacturer-visualization select:focus-visible { outline: 3px solid #1675e8; outline-offset: 3px; }
.manufacturer-category-strip { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
.manufacturer-category-strip span { min-height: 58px; align-items:center; cursor:pointer; font-size: .78rem; line-height:1.3; transition:background .18s,color .18s; }
.manufacturer-category-strip span:hover,
.manufacturer-category-strip span:focus-visible { color:#0b637d; background:#eef8f6; }
.manufacturer-studio-copy > span,.manufacturer-studio-products header span,.manufacturer-calculator-form > span,.manufacturer-calculator-result > span,.manufacturer-studio-docs header span { font-size:.72rem; }
.manufacturer-studio-copy p,.manufacturer-studio-products article p,.manufacturer-calculator-form label,.manufacturer-calculator-result > p,.manufacturer-studio-docs > p { font-size:.9rem; }
.manufacturer-studio-products h3 { font-size:1.08rem; }
.manufacturer-studio-products article > a,.manufacturer-studio-copy > div:last-child a,.manufacturer-calculator-form button { min-height:52px; font-size:.78rem; }

.manufacturer-visualization { width:min(1440px,calc(100% - 48px)); margin:58px auto 72px; padding:clamp(25px,4vw,58px); color:#17343d; border:1px solid #ccdcdf; border-radius:25px; background:linear-gradient(145deg,#f8fbfa,#eaf3f2); box-shadow:0 22px 70px rgba(20,48,63,.1); scroll-margin-top:24px; }
.manufacturer-visualization-head { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:24px; }
.manufacturer-visualization-head > div:first-child { max-width:780px; }
.manufacturer-visualization-head > div:first-child > span { color:#147c8c; font-size:.72rem; font-weight:900; letter-spacing:.16em; }
.manufacturer-visualization-head h2 { margin:8px 0 10px; font:500 clamp(2.2rem,4vw,4.2rem)/.98 Georgia,serif; letter-spacing:-.05em; }
.manufacturer-visualization-head p { max-width:700px; margin:0; color:#617a82; font-size:1rem; line-height:1.6; }
.manufacturer-visualization-badge { min-width:190px; display:grid; gap:6px; padding:16px 18px; border:1px solid #bed6d4; border-radius:13px; background:#fff; }
.manufacturer-visualization-badge strong { color:#0a6d7d; font-size:1rem; }
.manufacturer-visualization-badge small { color:#738a90; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.manufacturer-visualization-badge a { color:#137486; font-size:.78rem; font-weight:850; line-height:1.35; text-decoration:none; }
.manufacturer-visualization-badge a:hover { text-decoration:underline; }
.manufacturer-3d-categories { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.manufacturer-3d-categories button { min-height:46px; padding:0 16px; color:#456770; border:1px solid #c7d9da; border-radius:99px; background:#fff; font-size:.82rem; font-weight:800; cursor:pointer; transition:background .18s,color .18s,border-color .18s,transform .18s; }
.manufacturer-3d-categories button:hover { transform:translateY(-1px); border-color:#158092; }
.manufacturer-3d-categories button.active { color:#fff; border-color:#126f7d; background:#126f7d; }
.manufacturer-visualization-workspace { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); overflow:hidden; border:1px solid #c8dadd; border-radius:18px; background:#fff; }
.manufacturer-visualization-canvas { min-height:470px; display:grid; place-items:stretch; background:#12353e; }
.manufacturer-3d-model { width:100%; height:100%; min-height:470px; display:block; }
.manufacturer-3d-model text { fill:#b3d7d1; font:700 13px/1 sans-serif; letter-spacing:.12em; }
.manufacturer-3d-model .model-material-label { fill:#fff; font-size:18px; letter-spacing:.01em; }
.manufacturer-3d-model .model-kind-label { fill:#8acbc0; font-size:10px; }
.manufacturer-visualization-controls { display:grid; align-content:start; gap:16px; padding:25px; background:#fff; }
.manufacturer-3d-selected { display:grid; gap:6px; padding-bottom:13px; border-bottom:1px solid #e1ebea; }
.manufacturer-3d-selected span { color:#158092; font-size:.68rem; font-weight:900; letter-spacing:.13em; }
.manufacturer-3d-selected strong { color:#183d46; font-size:1.22rem; line-height:1.15; }
.manufacturer-3d-selected small { color:#71878c; font-size:.78rem; line-height:1.45; }
.manufacturer-visualization-controls label { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:9px; color:#527078; font-size:.82rem; font-weight:800; }
.manufacturer-visualization-controls label span { grid-column:1/-1; }
.manufacturer-visualization-controls select { grid-column:1/-1; width:100%; min-height:48px; padding:0 12px; color:#193943; border:1px solid #c8d9da; border-radius:9px; background:#fff; font-size:.86rem; }
.manufacturer-visualization-controls input[type=range] { width:100%; accent-color:#147c8c; }
.manufacturer-visualization-controls label b { color:#137486; font-size:.9rem; }
.manufacturer-3d-actions,.manufacturer-3d-save { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.manufacturer-3d-actions button,.manufacturer-3d-save button { min-height:48px; padding:0 10px; color:#28606b; border:1px solid #c7d9da; border-radius:9px; background:#f4f9f8; font-size:.76rem; font-weight:850; cursor:pointer; }
.manufacturer-3d-save { grid-template-columns:1fr; padding-top:3px; }
.manufacturer-3d-save button:first-child { color:#fff; border-color:#147c8c; background:#147c8c; }
.manufacturer-3d-save button:last-child { color:#fff; border-color:#173f49; background:#173f49; }
.manufacturer-visualization-note { margin:17px 0 0; color:#688087; font-size:.78rem; line-height:1.55; }
.manufacturer-visualization-note strong { color:#345d66; }

@media (max-width: 900px) {
  .manufacturer-visualization { width:calc(100% - 20px); margin-top:38px; padding:22px 16px; border-radius:17px; }
  .manufacturer-visualization-head { align-items:start; flex-direction:column; }
  .manufacturer-visualization-badge { width:100%; }
  .manufacturer-visualization-workspace { grid-template-columns:1fr; }
  .manufacturer-visualization-canvas,.manufacturer-3d-model { min-height:360px; }
}
@media (max-width: 560px) {
  .manufacturer-category-strip span { min-height:64px; padding:12px 10px; font-size:.72rem; }
  .manufacturer-3d-categories { display:grid; grid-template-columns:1fr 1fr; }
  .manufacturer-3d-categories button { min-height:50px; padding:0 8px; font-size:.72rem; }
  .manufacturer-visualization-head h2 { font-size:2.45rem; }
  .manufacturer-visualization-head p { font-size:.9rem; }
  .manufacturer-visualization-canvas,.manufacturer-3d-model { min-height:290px; }
  .manufacturer-visualization-controls { padding:18px 14px; }
}

/* Strong, consistent keyboard focus for the foundation wizard. The shared
   focus rule is intentionally scoped here because the compact wizard inputs
   reset their own outline and the product links are anchors rather than
   buttons. */
.foundation-wizard a:focus-visible,
.foundation-wizard button:focus-visible,
.foundation-wizard input:focus-visible,
.foundation-wizard select:focus-visible {
  outline: 3px solid #1675e8;
  outline-offset: 3px;
}

.foundation-fields label > div:focus-within,
.thermal-row label > div:focus-within {
  border-color: #1675e8;
  box-shadow: 0 0 0 3px rgba(22, 117, 232, .18);
}

.foundation-price-input input:focus-visible {
  border-color: #1675e8;
  outline: 3px solid #1675e8;
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(22, 117, 232, .18);
}

.build-stage-nav button:not(.active) {
  color: #5d747d;
}

@media (max-width: 920px) {
  .landing-nav {
    height: 68px;
  }

  .landing-continue {
    display: none;
  }

  .landing-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 55px;
    padding-top: 56px;
  }

  .landing-hero-copy {
    max-width: 760px;
  }

  .landing-hero h1 {
    font-size: clamp(4rem, 10vw, 6rem);
  }

  .landing-hero-visual {
    width: min(830px, 100%);
    margin: 0 auto;
    padding-left: 22px;
  }

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

  .feature-overview-card.featured {
    grid-column: span 2;
  }

  .materials-dashboard {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .materials-catalog {
    padding: 14px;
  }

  .cost-summary-card {
    padding: 20px;
  }

  .render-showcase {
    min-height: 680px;
  }

  .render-showcase-copy {
    width: min(590px, 72%);
  }

  .landing-footer {
    grid-template-columns: 1fr 1fr;
  }

  .landing-footer p {
    display: none;
  }
}

@media (max-width: 700px) {
  .landing-nav {
    padding: 0 14px;
  }

  .landing-open {
    min-height: 40px;
    padding: 0 12px;
  }

  .landing-open span {
    display: none;
  }

  .landing-hero {
    gap: 45px;
    padding: 44px 16px 70px;
  }

  .landing-kicker {
    margin-bottom: 17px;
    font-size: 0.61rem;
  }

  .landing-hero h1 {
    font-size: clamp(3.25rem, 15.2vw, 5rem);
  }

  .landing-hero-copy > p {
    font-size: 0.94rem;
  }

  .landing-hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .landing-primary-cta,
  .landing-secondary-cta {
    width: 100%;
  }

  .landing-trust-row {
    margin-top: 32px;
  }

  .landing-trust-row div {
    padding-right: 8px;
  }

  .landing-trust-row div + div {
    padding-left: 9px;
  }

  .landing-trust-row span {
    font-size: 0.56rem;
  }

  .landing-hero-visual {
    padding: 0 0 68px;
  }

  .hero-studio-window {
    transform: none;
  }

  .studio-window-bar {
    height: 45px;
    grid-template-columns: 1fr auto;
  }

  .studio-window-brand span,
  .studio-window-action {
    display: none;
  }

  .studio-window-tabs span {
    padding: 6px 9px;
  }

  .hero-plan-float {
    left: 10px;
    bottom: 4px;
    width: 48%;
  }

  .hero-plan-head,
  .hero-plan-foot {
    min-height: 29px;
    padding: 0 7px;
  }

  .hero-plan-head > span,
  .hero-plan-foot span:first-child {
    display: none;
  }

  .hero-cost-float {
    right: 9px;
    bottom: 12px;
    width: 150px;
    padding: 10px;
  }

  .hero-cost-float strong {
    font-size: 0.82rem;
  }

  .landing-logo-strip {
    justify-content: flex-start;
    overflow-x: auto;
  }

  .landing-section {
    padding: 82px 16px;
  }

  .landing-section-heading {
    margin-bottom: 34px;
  }

  .landing-section-heading h2,
  .studio-copy h2,
  .render-showcase-copy h2,
  .landing-final-cta h2 {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .feature-overview-grid {
    grid-template-columns: 1fr;
  }

  .feature-overview-card,
  .feature-overview-card.featured {
    grid-column: auto;
    min-height: 300px;
    padding: 20px;
  }

  .feature-overview-card.featured {
    padding-right: 20px;
    padding-bottom: 160px;
  }

  .feature-mini-plan {
    top: auto;
    right: 18px;
    bottom: -25px;
    left: 18px;
    width: auto;
    height: 175px;
    border-radius: 10px 10px 0 0;
  }

  .feature-card-icon {
    margin-bottom: 30px;
  }

  .studio-showcase {
    gap: 44px;
  }

  .editor-shot-top {
    grid-template-columns: 1fr auto;
  }

  .editor-shot-top > div:nth-child(2) {
    display: none;
  }

  .editor-shot-body {
    height: 400px;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .editor-shot-properties {
    display: none;
  }

  .editor-shot-rail {
    padding: 4px;
  }

  .editor-shot-rail span {
    width: 32px;
    height: 32px;
  }

  .editor-shot-status span:nth-child(2) {
    display: none;
  }

  .render-showcase {
    min-height: 660px;
  }

  .render-showcase > img {
    object-position: 63% center;
  }

  .render-showcase-shade {
    background: linear-gradient(180deg, rgba(9, 17, 24, 0.45), rgba(9, 17, 24, 0.88));
  }

  .render-showcase-copy {
    width: auto;
    margin: auto 16px 88px;
    align-self: end;
  }

  .walkthrough-hud {
    right: 16px;
    bottom: 17px;
    left: 16px;
    justify-content: center;
  }

  .materials-dashboard {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .materials-catalog {
    border-right: 0;
    border-bottom: 1px solid #d7e0e8;
  }

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

  .cost-summary-card {
    grid-template-rows: auto auto 200px auto;
    padding: 18px 14px;
  }

  .cost-total strong {
    font-size: 2.2rem;
  }

  .cost-chart {
    min-height: 180px;
    gap: 9px;
  }

  .cost-chart span {
    font-size: 0.48rem;
  }

  .cost-table > div {
    grid-template-columns: minmax(0, 1fr) 78px;
  }

  .cost-table > div span:nth-child(2) {
    display: none;
  }

  .platform-grid {
    grid-template-columns: 1fr;
  }

  .platform-grid article {
    min-height: 330px;
  }

  .workflow-steps {
    grid-template-columns: 1fr;
  }

  .landing-final-cta {
    min-height: 540px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 70px 18px;
  }

  .final-cta-actions {
    width: 100%;
  }

  .landing-footer {
    min-height: 112px;
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 18px 16px;
  }

  .landing-footer > span {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .landing-hero-copy,
  .landing-hero-visual {
    animation: landing-reveal 0.7s ease both;
  }

  .landing-hero-visual {
    animation-delay: 0.12s;
  }

  @keyframes landing-reveal {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* Product catalog is a dense comparison list, not a promotional card grid. */
.catalog-results .retail-product-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.catalog-results .retail-product-card { display: grid; grid-template-columns: 150px minmax(0,1fr); min-height: 154px; overflow: hidden; border: 1px solid #d8e2e9; border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(24,40,60,.045); transition: border-color .18s ease, box-shadow .18s ease; }
.catalog-results .retail-product-card:hover { transform: none; border-color: #a8c8e7; box-shadow: 0 10px 26px rgba(24,40,60,.09); }
.catalog-results .retail-product-image { width: 150px; height: 100%; min-height: 154px; padding: 12px; border-right: 1px solid #e2e8ed; background: linear-gradient(145deg,#f8fafb,#edf2f5); }
.catalog-results .retail-product-image img { width: 100%; height: 100%; max-height: 128px; object-fit: contain; }
.catalog-results .retail-product-image span { top: 8px; left: 8px; padding: 5px 7px; font-size: .6rem; }
.catalog-results .retail-product-image > i { right: 8px; bottom: 7px; font-size: .48rem; }
.catalog-results .retail-product-body { position: relative; display: grid; grid-template-columns: minmax(240px,1fr) minmax(260px,.9fr) 118px; grid-template-rows: auto auto 1fr; gap: 5px 18px; align-items: center; padding: 15px 16px; }
.catalog-results .retail-product-category { grid-column: 1; grid-row: 1; color: #1872d5; font-size: .61rem; font-weight: 850; letter-spacing: .07em; }
.catalog-results .retail-product-body h3 { grid-column: 1; grid-row: 2; min-height: 0; margin: 0; font-size: .88rem; line-height: 1.3; }
.catalog-results .retail-product-body p { grid-column: 1; grid-row: 3; height: auto; max-height: 3em; overflow: hidden; margin: 0; color: #63778a; font-size: .65rem; line-height: 1.5; }
.catalog-results .retail-product-specs { grid-column: 2; grid-row: 1 / 4; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-self: stretch; overflow: hidden; border: 1px solid #e0e7ec; border-radius: 9px; }
.catalog-results .retail-product-specs > span { min-width: 0; display: grid; align-content: center; gap: 5px; padding: 9px; }
.catalog-results .retail-product-specs > span + span { border-left: 1px solid #e0e7ec; }
.catalog-results .retail-product-specs small { color: #8292a0; font-size: .52rem; }
.catalog-results .retail-product-specs strong { overflow: hidden; color: #23394c; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.catalog-results .retail-product-specs > span:last-child strong { color: #087660; }
.catalog-results .retail-product-price { grid-column: 3; grid-row: 1 / 3; align-self: end; justify-self: end; display: grid; justify-items: end; gap: 1px; }
.catalog-results .retail-product-price strong { color: #142c40; font-size: 1.04rem; }
.catalog-results .retail-product-price span { color: #7b8d9c; font-size: .54rem; }
.catalog-results .retail-product-actions { grid-column: 3; grid-row: 3; grid-template-columns: 1fr; align-self: end; gap: 5px; margin: 0; }
.catalog-results .retail-product-actions button { min-height: 32px; width: 100%; }
.catalog-results .retail-product-actions .retail-product-link { min-height: 26px; color: #47647f; text-align: center; }

@media (max-width: 1120px) {
  .catalog-results .retail-product-body { grid-template-columns: minmax(210px,1fr) minmax(220px,.8fr); }
  .catalog-results .retail-product-price { grid-column: 2; grid-row: 1; align-self: start; }
  .catalog-results .retail-product-specs { grid-column: 2; grid-row: 2 / 4; margin-top: 24px; }
  .catalog-results .retail-product-actions { grid-column: 1 / 3; grid-row: 4; grid-template-columns: auto auto; justify-content: start; }
  .catalog-results .retail-product-actions button { width: auto; min-width: 130px; }
}

@media (max-width: 720px) {
  .catalog-results .retail-product-card { grid-template-columns: 92px minmax(0,1fr); min-height: 0; }
  .catalog-results .retail-product-image { width: 92px; min-height: 132px; padding: 8px; }
  .catalog-results .retail-product-image img { max-height: 105px; }
  .catalog-results .retail-product-image > i { display: none; }
  .catalog-results .retail-product-body { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto auto auto; gap: 5px 8px; padding: 11px; }
  .catalog-results .retail-product-category { grid-column: 1 / 3; }
  .catalog-results .retail-product-body h3 { grid-column: 1 / 3; font-size: .78rem; }
  .catalog-results .retail-product-body p { display: none; }
  .catalog-results .retail-product-specs { grid-column: 1 / 3; grid-row: 3; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 2px 0 0; }
  .catalog-results .retail-product-specs > span:nth-child(2) { display: none; }
  .catalog-results .retail-product-price { grid-column: 1; grid-row: 4; align-self: center; justify-self: start; justify-items: start; }
  .catalog-results .retail-product-actions { grid-column: 1 / 3; grid-row: 5; grid-template-columns: 1fr 1fr; width: 100%; }
  .catalog-results .retail-product-actions button { min-width: 0; }
}

/* Premium editor workspace v3 */
@media (min-width: 1025px) {
  .app-shell:has(> .app-header) {
    height: 100dvh;
    min-height: 720px;
    overflow: hidden;
    background: #e9edf1;
  }

  .app-header {
    height: 68px;
    min-height: 68px;
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, .08);
    background: linear-gradient(110deg, #0d151e 0%, #121f2b 62%, #0e1822 100%);
    box-shadow: 0 12px 30px rgba(9, 18, 28, .22);
  }

  .app-header-copy strong { color: #f7fafc; font-size: 1rem; }
  .app-header-copy small { color: #91a3b5; font-size: .78rem; }
  .app-header-mark { background: linear-gradient(145deg, #1279ef, #1d95ff); }
  .app-header-tabs { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.05); }
  .app-header-tab { color: #a8b7c5; font-size: .9rem; }
  .app-header-tab:hover { color: #fff; background: rgba(255,255,255,.06); }
  .app-header-tab.active { color: #fff; background: #1675e8; box-shadow: 0 8px 20px rgba(22,117,232,.28); }
  .app-header-actions .secondary-button { color: #d6e0e8; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }

  .editor-shell,
  .editor-shell.sidebar-open {
    height: calc(100dvh - 68px);
    min-height: 652px;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    overflow: hidden;
  }

  .editor-shell { grid-template-columns: 82px minmax(0, 1fr); }
  .editor-shell.sidebar-open { grid-template-columns: 82px minmax(0, 1fr) minmax(320px, 354px); }
  .rail-panel,
  .right-column { position: static; top: auto; max-height: none; height: 100%; }
  .rail-panel { padding: 10px 8px; border-radius: 16px; background: #101b25; border-color: #1d2c39; box-shadow: 0 18px 36px rgba(13,24,34,.18); }
  .rail-logo { width: 54px; height: 54px; flex-basis: 54px; border-radius: 13px; }
  .rail-stack { gap: 6px; }
  .rail-item { min-height: 62px; color: #91a5b6; border-radius: 12px; }
  .rail-item svg { width: 20px; height: 20px; }
  .rail-item span { max-width: 68px; font-size: .72rem; }
  .rail-item:hover { color: #fff; background: rgba(255,255,255,.06); }
  .rail-item.active { color: #fff; border-color: rgba(75,158,255,.35); background: linear-gradient(145deg, #116fd5, #238eff); }

  .workspace-column {
    height: 100%;
    grid-template-rows: 62px minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
  }

  .top-toolbar {
    position: static;
    top: auto;
    min-height: 62px;
    border-radius: 15px;
    padding: 8px 10px;
    box-shadow: 0 12px 28px rgba(25, 42, 62, .08);
  }

  .editor-mode-tabs { gap: 4px; padding: 4px; border-radius: 11px; background: #e9eef3; }
  .editor-mode-tab { min-width: 72px; height: 40px; font-size: .88rem; }
  .editor-mode-tab:last-child { min-width: 94px; }
  .toolbar-project .project-name { max-width: 260px; font-size: 1rem; }
  .toolbar-project .floor-pill { min-height: 40px; font-size: .9rem; }
  .toolbar-actions .icon-button,
  .toolbar-new-button,
  .toolbar-save-button { width: 40px; height: 40px; }

  .workspace-stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    overflow: hidden;
    border-radius: 16px;
  }

  .workspace-stage > .canvas-card,
  .workspace-stage > .workspace-dock {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 16px;
  }

  .canvas-card { grid-template-rows: 64px minmax(0, 1fr) 38px; }
  .canvas-topline { padding: 10px 17px; }
  .canvas-topline .eyebrow { font-size: .69rem; }
  .canvas-topline h2 { font-size: 1.08rem; }
  .status-badge { min-height: 36px; font-size: .82rem; }
  .canvas-badges .secondary-button.small { min-height: 36px; font-size: .82rem; }
  .canvas-footer { min-height: 38px; padding-inline: 17px; font-size: .76rem; }
  .wall-label { font-size: .2px; font-weight: 800; stroke-width: .065px; }

  .workspace-stage .workspace-dock,
  .workspace-stage .workspace-dock.expanded {
    grid-template-rows: minmax(0, 1fr);
    box-shadow: 0 18px 40px rgba(25,42,62,.1);
  }
  .workspace-stage .dock-tabs-wide { display: none; }
  .workspace-stage .dock-body { min-height: 0; overflow: auto; }
  .workspace-stage-preview .dock-body { overflow: hidden; }
  .workspace-stage .preview-panel-pro { height: 100%; display: grid; grid-template-rows: 66px minmax(0, 1fr) auto; }
  .workspace-stage .preview-canvas-pro,
  .workspace-stage .workspace-dock.expanded .preview-canvas-pro { min-height: 0; height: auto; margin: 12px; }
  .preview-header strong { font-size: 1.02rem; }
  .preview-header .eyebrow { font-size: .68rem; }
  .mode-chip { min-height: 36px; padding-inline: 13px; font-size: .8rem; }
  .preview-note { padding: 0 16px 14px; font-size: .78rem; }

  .right-column { grid-template-rows: minmax(245px, 40%) minmax(0, 1fr); gap: 12px; }
  .palette-panel,
  .side-panel { padding: 15px; border-radius: 16px; box-shadow: 0 12px 28px rgba(25,42,62,.08); }
  .panel-head .eyebrow,
  .side-panel .eyebrow { font-size: .69rem; }
  .panel-head h2,
  .side-panel h2 { font-size: 1.06rem; }
  .structure-tile { min-height: 88px; padding: 11px; border-radius: 11px; }
  .structure-tile .structure-icon { width: 36px; height: 36px; }
  .structure-tile strong { font-size: .86rem; }
  .structure-tile > span:last-child { font-size: .71rem; }
}

@media (max-width: 1024px) {
  .app-shell:has(.editor-shell-mobile) { height: 100dvh; overflow: hidden; }
  .editor-shell-mobile {
    width: 100%;
    height: 100dvh;
    max-width: none;
    grid-template-rows: 66px 50px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 8px calc(78px + env(safe-area-inset-bottom));
    overflow: hidden;
    background: #e7ebef;
  }
  .mobile-topbar { position: static; top: auto; min-height: 66px; color: #fff; border-color: #243443; background: linear-gradient(110deg,#0d151e,#152532); box-shadow: 0 12px 28px rgba(10,20,30,.18); }
  .mobile-brand strong { color: #fff; font-size: 1rem; }
  .mobile-brand .eyebrow { color: #61adff; font-size: .67rem; }
  .mobile-icon-button { color: #d7e2eb; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
  .mobile-view-switch { display: grid; grid-template-columns: repeat(3, 1fr); background: #f7f9fb; }
  .mobile-view-tab { font-size: .88rem; font-weight: 750; }
  .editor-shell-mobile .workspace-column,
  .mobile-workspace { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .mobile-workspace > .canvas-card,
  .mobile-workspace > .workspace-dock,
  .mobile-workspace > .workspace-dock.expanded { width: 100%; height: 100%; min-height: 0; margin: 0; }
  .mobile-workspace .canvas-card { grid-template-rows: 58px minmax(0,1fr) 34px; }
  .mobile-workspace .canvas-stage { min-height: 0; }
  .mobile-workspace .workspace-dock,
  .mobile-workspace .workspace-dock.expanded { grid-template-rows: minmax(0,1fr); }
  .mobile-workspace .dock-tabs-wide { display: none; }
  .mobile-workspace .dock-body { min-height: 0; overflow: auto; }
  .mobile-workspace .preview-panel-pro { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
  .mobile-workspace .preview-canvas-pro,
  .mobile-workspace .workspace-dock.expanded .preview-canvas-pro { min-height: 0; height: auto; }
  .mobile-metrics { display: none; }
  .mobile-bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    min-height: 68px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(24,40,63,.1);
    background: rgba(250,252,253,.96);
    box-shadow: 0 -10px 30px rgba(18,31,46,.12);
    backdrop-filter: blur(18px);
  }
  .mobile-bottom-item { min-height: 48px; display: grid; place-items: center; gap: 3px; padding: 5px; color: #61758a; border-radius: 11px; font-size: .7rem; }
  .mobile-bottom-item.active { color: #0d6ed8; background: #e8f2ff; }
  .mobile-bottom-add { width: 52px; height: 52px; min-height: 52px; justify-self: center; margin-top: -18px; color: #fff; border-radius: 50%; background: linear-gradient(145deg,#1675e8,#2695ff); box-shadow: 0 12px 24px rgba(22,117,232,.3); }
  .canvas-topline h2 { font-size: 1rem; }
  .canvas-topline .eyebrow { font-size: .67rem; }
  .status-badge { font-size: .76rem; }
  .wall-label { font-size: .2px; font-weight: 800; stroke-width: .065px; }
}

/* Larger catalog typography */
.construction-portal .manufacturer-library-head p,
.construction-portal .manufacturer-product-copy p { font-size: max(1rem, 16px); }
.construction-portal .manufacturer-product-copy h3 { font-size: 1.35rem; }
.construction-portal .manufacturer-product-copy > span,
.construction-portal .manufacturer-filters label > span,
.construction-portal .manufacturer-documents small { font-size: .82rem; }
.construction-portal .manufacturer-product-copy small,
.construction-portal .manufacturer-product-copy a,
.construction-portal .manufacturer-documents a { font-size: .88rem; }

/* Professional product departments */
.product-estimator-panel { display: flex; flex-direction: column; }
.product-estimator-panel > .product-estimator-head { order: 1; }
.product-estimator-panel > .material-section-tabs { order: 2; }
.product-estimator-panel > .catalog-browser-head-pro { order: 3; }
.product-estimator-panel > .catalog-marketplace { order: 4; }
.product-estimator-panel > .catalog-legal-note { order: 5; }
.product-estimator-panel > .product-metrics { order: 6; margin-top: 18px; }
.product-estimator-panel > .foundation-material-summary { order: 7; }
.product-estimator-panel > .estimate-lines { order: 8; }
.product-estimator-panel > .raw-material-details { order: 9; }
.material-section-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 18px 0 4px; padding: 5px; border: 1px solid #d9e2e9; border-radius: 13px; background: #eef2f5; }
.material-section-tabs button { min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 9px; padding: 8px 12px; color: #62768a; border-radius: 9px; background: transparent; text-align: left; }
.material-section-tabs button > span { grid-row: 1/3; width: 32px; height: 32px; display: grid; place-items: center; color: #607589; border: 1px solid #d3dce4; border-radius: 8px; background: #fff; font-size: .66rem; font-weight: 850; }
.material-section-tabs button strong { color: #26394c; font-size: .82rem; }
.material-section-tabs button small { color: #7b8c9c; font-size: .66rem; }
.material-section-tabs button.active { background: #fff; box-shadow: 0 4px 12px rgba(24,40,60,.08); }
.material-section-tabs button.active > span { color: #fff; border-color: #1675e8; background: #1675e8; }
.material-section-tabs button.active strong { color: #0d64c2; }
.material-section-estimate > .catalog-browser-head-pro,
.material-section-estimate > .catalog-marketplace,
.material-section-estimate > .catalog-legal-note { display: none; }
.material-section-catalog > .product-metrics,
.material-section-catalog > .foundation-material-summary,
.material-section-catalog > .estimate-lines,
.material-section-catalog > .raw-material-details { display: none; }
.catalog-browser-head-pro { align-items: center; margin: 34px 0 16px; padding-top: 24px; border-top: 1px solid #dfe6eb; }
.catalog-browser-head-pro > div { display: grid; gap: 3px; }
.catalog-browser-head-pro h2 { font-size: 1.35rem; }
.catalog-browser-head-pro > div > span { color: #718396; font-size: .78rem; }
.catalog-search { width: min(390px, 42%); display: grid; gap: 5px; }
.catalog-search span { color: #687b8f; font-size: .72rem; font-weight: 750; }
.catalog-search input { width: 100%; height: 44px; padding: 0 14px; color: #17283a; border: 1px solid #cfd9e2; border-radius: 10px; background: #fff; font-size: .85rem; }
.catalog-search input:focus { border-color: #1675e8; box-shadow: 0 0 0 4px rgba(22,117,232,.1); outline: 0; }
.catalog-marketplace { min-height: 560px; display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 14px; align-items: start; }
.catalog-departments { position: sticky; top: 0; overflow: hidden; border: 1px solid #d9e2e9; border-radius: 14px; background: #f7f9fb; }
.catalog-departments > div:first-child { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #64798d; border-bottom: 1px solid #dfe6ec; background: #eef2f5; font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.catalog-departments > div:first-child strong { min-width: 27px; height: 27px; display: grid; place-items: center; color: #fff; border-radius: 8px; background: #122333; font-size: .72rem; }
.catalog-departments > button { width: 100%; min-height: 68px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 9px 12px; color: #53687c; border-bottom: 1px solid #e1e7ec; background: transparent; text-align: left; }
.catalog-departments > button i { width: 30px; height: 30px; display: grid; place-items: center; color: #5e7183; border: 1px solid #d5dee6; border-radius: 8px; background: #fff; font-size: .65rem; font-style: normal; font-weight: 800; }
.catalog-departments > button > span { min-width: 0; display: grid; gap: 3px; }
.catalog-departments > button strong { color: #1c2d3e; font-size: .77rem; }
.catalog-departments > button small { overflow: hidden; color: #7b8c9c; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.catalog-departments > button b { min-width: 24px; height: 24px; display: grid; place-items: center; color: #687b8d; border-radius: 7px; background: #e8edf1; font-size: .66rem; }
.catalog-departments > button:hover { background: #fff; }
.catalog-departments > button.active { color: #0b65c9; background: #eaf4ff; box-shadow: inset 3px 0 #1675e8; }
.catalog-departments > button.active i { color: #fff; border-color: #1675e8; background: #1675e8; }
.catalog-departments > button.active b { color: #0c63bd; background: #d5eaff; }
.catalog-next-departments { display: flex; flex-wrap: wrap; gap: 5px; padding: 13px 12px 15px; }
.catalog-next-departments > span { width: 100%; margin-bottom: 3px; color: #8898a6; font-size: .58rem; font-weight: 850; letter-spacing: .1em; }
.catalog-next-departments small { padding: 5px 7px; color: #738495; border: 1px solid #dce4ea; border-radius: 6px; background: #fff; font-size: .6rem; }
.catalog-results { min-width: 0; }
.catalog-results-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; padding: 0 12px; border: 1px solid #dce4ea; border-radius: 10px; background: #fff; }
.catalog-results-head > div { display: flex; align-items: baseline; gap: 9px; }
.catalog-results-head strong { color: #17283a; font-size: .85rem; }
.catalog-results-head span { color: #77899a; font-size: .68rem; }
.catalog-results .retail-product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.catalog-results .retail-product-card { border-radius: 13px; box-shadow: 0 8px 22px rgba(24,40,60,.06); transition: transform .2s ease, box-shadow .2s ease; }
.catalog-results .retail-product-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(24,40,60,.12); }
.catalog-results .retail-product-image { height: 190px; padding: 10px; background: linear-gradient(145deg,#f8fafb,#eef2f5); }
.catalog-results .retail-product-image span { top: 10px; left: 10px; padding: 5px 7px; font-size: .62rem; }
.catalog-results .retail-product-image > i { position: absolute; right: 10px; bottom: 9px; color: #315271; font-size: .52rem; font-style: normal; font-weight: 900; letter-spacing: .1em; }
.catalog-results .retail-product-body { gap: 8px; padding: 13px; }
.catalog-results .retail-product-category { font-size: .63rem; letter-spacing: .06em; }
.catalog-results .retail-product-body h3 { min-height: 2.7em; font-size: .88rem; line-height: 1.35; }
.catalog-results .retail-product-body p { height: 3.9em; font-size: .68rem; line-height: 1.45; }
.catalog-results .retail-product-package { font-size: .65rem; }
.catalog-results .retail-product-price strong { font-size: 1.08rem; }
.catalog-results .retail-product-price span { font-size: .65rem; }
.retail-product-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 2px; }
.retail-product-actions button { min-height: 34px; padding: 0 9px; color: #fff; border-radius: 8px; background: #1675e8; font-size: .66rem; font-weight: 800; }
.retail-product-actions .retail-product-link { color: #47647f; font-size: .62rem; white-space: nowrap; }
.catalog-empty { min-height: 320px; display: grid; place-content: center; gap: 5px; color: #6e8295; border: 1px dashed #cbd7e0; border-radius: 14px; background: #f8fafb; text-align: center; }
.catalog-empty strong { color: #203448; font-size: 1rem; }

@media (max-width: 1280px) {
  .catalog-results .retail-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .catalog-browser-head-pro { align-items: stretch; }
  .catalog-search { width: 100%; }
  .catalog-marketplace { grid-template-columns: 1fr; }
  .catalog-departments { position: static; display: flex; overflow-x: auto; border-radius: 11px; scrollbar-width: none; }
  .catalog-departments > div:first-child,.catalog-next-departments { display: none; }
  .catalog-departments > button { min-width: 165px; border-bottom: 0; border-right: 1px solid #e1e7ec; }
  .catalog-departments > button.active { box-shadow: inset 0 -3px #1675e8; }
  .catalog-results .retail-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 520px) {
  .catalog-results .retail-product-grid { grid-template-columns: 1fr; }
  .catalog-results .retail-product-image { height: 220px; }
}

/* Net wall-area and opening deductions */
.product-metrics .metric-tile.deduction { border-color: #efd8d2; background: #fff8f6; }
.product-metrics .metric-tile.deduction strong { color: #b54d37; }
.product-metrics .metric-tile.net { border-color: #cbe5dc; background: #f1faf7; }
.product-metrics .metric-tile.net strong { color: #087a66; }
.estimate-calculation { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.estimate-calculation .deduction { background: #fff8f6; }
.estimate-calculation .deduction strong { color: #b54d37; }
.estimate-calculation .net { background: #f0faf6; }
.estimate-calculation .net strong { color: #087a66; }
.estimate-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 8px 10px; color: #6b7f91; border: 1px dashed #d5dee5; border-radius: 8px; background: #f8fafb; font-size: .62rem; }
.estimate-formula strong { color: #263d52; }
.estimate-formula b { color: #1675e8; font-size: .76rem; }

@media (max-width: 1180px) {
  .estimate-calculation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .estimate-calculation div:nth-child(4) { border-left: 0; border-top: 1px solid #e0e6e9; }
  .estimate-calculation div:nth-child(n+5) { border-top: 1px solid #e0e6e9; }
}

/* Premium system catalog, brand profiles and chimney configurator */
.construction-portal { font-size: 17px; }
.portal-main-nav a { font-size: .8rem; }
.portal-continue, .portal-creator-button { font-size: .76rem; }
.system-navigation span { font-size: .72rem; }
.system-navigation i { font-size: .78rem; }
.detail-hero-copy > p, .portal-subhero > p, .portal-section-heading p { font-size: .94rem; }
.detail-system-grid p, .journey-card p, .commerce-grid p { font-size: .8rem; }
.detail-system-grid ul { font-size: .72rem; }

.systems-visual-hero {
  min-height: 670px;
  display: grid;
  grid-template-columns: minmax(430px, .82fr) minmax(0, 1.18fr);
  align-items: stretch;
  overflow: hidden;
  background: #e9eeea;
}
.systems-visual-hero > div:first-child { display:flex; flex-direction:column; justify-content:center; padding:90px max(28px,6vw) 110px; }
.systems-visual-hero > div:first-child > span, .chimney-config-hero > div > span, .brand-profile-hero > span { color:var(--portal-green); font-size:.7rem; font-weight:850; letter-spacing:.16em; }
.systems-visual-hero h1 { margin:20px 0; font:400 clamp(3.7rem,5.8vw,6.8rem)/.94 Georgia,serif; letter-spacing:-.065em; }
.systems-visual-hero h1 em { color:var(--portal-green); }
.systems-visual-hero p { max-width:650px; margin:0; color:var(--portal-muted); line-height:1.75; }
.systems-visual-hero > div:first-child > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:32px; }
.systems-visual-hero > div:first-child > div strong { padding:9px 12px; border:1px solid #cfdbd7; border-radius:999px; background:rgba(255,255,255,.56); font-size:.68rem; }
.systems-visual-hero figure { min-width:0; min-height:670px; margin:0; position:relative; overflow:hidden; }
.systems-visual-hero figure::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#e9eeea 0,transparent 18%); }
.systems-visual-hero figure img { width:100%; height:100%; object-fit:cover; }
.systems-visual-hero figcaption { position:absolute; right:24px; bottom:34px; z-index:2; padding:9px 11px; color:#fff; border-radius:7px; background:rgba(14,39,47,.82); font-size:.58rem; font-weight:800; letter-spacing:.08em; }

.systems-overview-grid > a { min-height:540px; padding:0; overflow:hidden; }
.systems-card-media { height:245px; margin:0 !important; position:relative; overflow:hidden; background:#dfe7e2; }
.systems-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(11,35,42,.6)); }
.systems-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.systems-overview-grid > a:hover .systems-card-media img { transform:scale(1.035); }
.systems-card-media > span { position:absolute; left:20px; top:18px; z-index:2; color:#fff !important; font:500 1rem Georgia,serif !important; }
.systems-card-media > i { width:55px; height:55px; display:grid; place-items:center; position:absolute; right:18px; bottom:17px; z-index:2; color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:15px; background:rgba(11,42,49,.72); backdrop-filter:blur(10px); }
.systems-card-body { flex:1; display:flex !important; flex-direction:column; margin:0 !important; padding:25px; }
.systems-overview-grid .systems-card-body h2 { margin:0 0 12px; font-size:1.65rem; }
.systems-card-body > div { display:flex; flex-wrap:wrap; gap:5px; margin-top:20px; }
.systems-card-body > strong { margin-top:auto; padding-top:22px; color:var(--portal-green); font-size:.72rem; }

.system-visual-story { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:70px max(24px,5vw); background:#eef2ee; }
.system-visual-story article { padding:10px 10px 22px; border:1px solid #d6e0dc; border-radius:15px; background:#fff; }
.system-visual-story article > div { height:240px; position:relative; overflow:hidden; border-radius:10px; background:#dfe6e2; }
.system-visual-story img { width:100%; height:100%; object-fit:cover; }
.system-visual-story article > div span { position:absolute; left:12px; top:12px; padding:7px 9px; color:#fff; border-radius:7px; background:rgba(13,42,49,.8); font:500 .72rem Georgia,serif; }
.system-visual-story h3 { margin:19px 12px 7px; font:500 1.25rem Georgia,serif; }
.system-visual-story p { margin:0 12px; color:var(--portal-muted); font-size:.76rem; line-height:1.55; }

.brand-wordmark { display:flex; align-items:center; gap:11px; }
.brand-wordmark i { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; color:#fff; border-radius:11px; background:#173640; font-style:normal; font-size:.66rem; font-weight:900; letter-spacing:.05em; }
.brand-wordmark strong { font:700 1rem Georgia,serif; }
.brand-wordmark.tone-1 i { background:#0c776a; }.brand-wordmark.tone-2 i { background:#b76f3f; }.brand-wordmark.tone-3 i { background:#2e6990; }.brand-wordmark.tone-4 i { background:#766143; }
.brand-wordmark.compact i { width:39px; height:39px; }.brand-wordmark.compact strong { font-size:.88rem; }
.detail-brand-grid a { min-height:112px; display:flex; flex-direction:column; justify-content:center; padding:17px; color:var(--portal-ink); border:1px solid #d6dfdc; border-radius:10px; background:rgba(255,255,255,.75); text-decoration:none; transition:transform .2s,box-shadow .2s; }
.detail-brand-grid a:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(20,52,59,.1); }
.detail-brand-grid a > span:last-child { margin:8px 0 0 55px; color:#778a90; font-size:.62rem; }
.brand-catalog-grid > article > section > a { min-height:140px; display:flex; flex-direction:column; justify-content:center; padding:16px; color:var(--portal-ink); border-left:1px solid #e0e7e4; border-bottom:1px solid #e0e7e4; text-decoration:none; }
.brand-catalog-grid > article > section > a:hover { background:#f0f7f3; }
.brand-catalog-grid > article > section > a > span { margin-top:10px; color:var(--portal-green); font-size:.62rem; font-weight:800; }
.brand-catalog-grid > article > section > a > small { margin-top:3px; color:#849398; font-size:.56rem; }

.department-calculator { padding:100px max(24px,6vw); background:#f7f9f6; }
.calculator-heading { max-width:850px; margin-bottom:38px; }
.calculator-heading > span, .investment-summary-head > div:first-child > span { color:var(--portal-green); font-size:.67rem; font-weight:850; letter-spacing:.15em; }
.calculator-heading h2, .investment-summary h2 { margin:13px 0; font:400 clamp(2.8rem,4.6vw,5rem)/1 Georgia,serif; letter-spacing:-.055em; }
.calculator-heading p { color:var(--portal-muted); line-height:1.65; }
.calculator-workspace { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(310px,.75fr); gap:12px; }
.calculator-fields { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:18px; border:1px solid #d7e0dd; border-radius:14px; background:#fff; }
.calculator-fields label { display:grid; gap:8px; padding:13px; border-radius:9px; background:#f1f5f2; }
.calculator-fields label > span { color:#5e7279; font-size:.7rem; font-weight:750; }
.calculator-fields label > div { height:48px; display:grid; grid-template-columns:1fr auto; align-items:center; border:1px solid #d4dedb; border-radius:8px; background:#fff; }
.calculator-fields input { min-width:0; height:100%; padding:0 12px; border:0; background:transparent; font-size:.9rem; font-weight:800; }
.calculator-fields b { padding:0 12px; color:#71868b; font-size:.65rem; }
.calculator-result { display:flex; flex-direction:column; padding:28px; color:#fff; border-radius:14px; background:linear-gradient(145deg,#173842,#0b7165); }
.calculator-result > span { color:#83ddcd; font-size:.62rem; font-weight:850; letter-spacing:.13em; }
.calculator-result > strong { margin:45px 0 8px; font:500 clamp(2.1rem,3.5vw,3.7rem) Georgia,serif; }
.calculator-result p { margin:0; color:#d5e5e3; font-size:.78rem; }.calculator-result small { margin-top:7px; color:#9fbab9; font-size:.6rem; }
.calculator-result button { height:50px; display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding:0 15px; color:#113139; border-radius:9px; background:#fff; font-size:.7rem; font-weight:850; }
.calculator-result button i { font-style:normal; }.calculator-result a { margin-top:13px; color:#83ddcd; font-size:.62rem; text-align:center; }

.investment-summary { padding:95px max(24px,6vw); background:#112c35; color:#fff; }
.investment-summary-head { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-bottom:35px; }
.investment-summary-head p { color:#a9bcbf; }.investment-summary-head > div:last-child { min-width:260px; display:grid; gap:6px; padding:22px; border-radius:12px; background:rgba(255,255,255,.06); }
.investment-summary-head > div:last-child small { color:#9fb4b7; }.investment-summary-head > div:last-child strong { color:#7cdbc9; font:500 2rem Georgia,serif; }
.investment-summary-lines { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.investment-summary-lines a { min-height:88px; display:grid; grid-template-columns:48px 1fr auto 20px; align-items:center; gap:12px; padding:14px; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.04); text-decoration:none; }
.summary-glyph { width:45px;height:45px;display:grid;place-items:center;color:#73d3c1;border-radius:10px;background:rgba(115,211,193,.08); }.investment-summary-lines div { display:grid;gap:4px; }.investment-summary-lines small { color:#9fb2b5;font-size:.58rem; }.investment-summary-lines b { color:#d5e4e3;font-size:.7rem; }.investment-summary-lines i { color:#70d2c0;font-style:normal; }

.catalog-chimney-banner { display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; padding:65px max(25px,7vw); color:#fff; background:linear-gradient(120deg,#17353f,#0b6f63); }
.catalog-chimney-banner > div { display:grid; grid-template-columns:75px 1fr; column-gap:20px; align-items:center; }.catalog-chimney-banner svg { grid-row:1/5; color:#79dbc9; }.catalog-chimney-banner span { color:#81dfce;font-size:.65rem;font-weight:850;letter-spacing:.14em; }.catalog-chimney-banner h2 { margin:8px 0;font:500 clamp(2rem,3.4vw,3.6rem) Georgia,serif; }.catalog-chimney-banner p { max-width:760px;margin:0;color:#bfd0d1;line-height:1.6; }.catalog-chimney-banner > a { min-height:52px;display:flex;align-items:center;gap:35px;padding:0 18px;color:#123039;border-radius:9px;background:#fff;font-size:.72rem;font-weight:850;text-decoration:none; }

.chimney-catalog-preview { background:#eef2ee; }.chimney-taxonomy { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:28px; }.chimney-taxonomy article { min-height:150px;padding:20px;border:1px solid #d4dfdb;border-radius:12px;background:#fff; }.chimney-taxonomy strong { color:var(--portal-green);font:500 1.4rem Georgia,serif; }.chimney-taxonomy h3 { margin:24px 0 7px;font:600 1rem Georgia,serif; }.chimney-taxonomy p { margin:0;color:var(--portal-muted);font-size:.66rem;line-height:1.5; }
.chimney-filter { display:flex;align-items:center;gap:7px;margin:35px 0 22px;padding:10px;border:1px solid #d5dedb;border-radius:12px;background:#fff; }.chimney-filter > span { padding:0 12px;color:#64777d;font-size:.65rem;font-weight:800; }.chimney-filter button { min-height:38px;padding:0 12px;border-radius:8px;background:#edf2ef;color:#526970;font-size:.64rem;font-weight:800; }.chimney-filter button.active { color:#fff;background:var(--portal-green); }.chimney-filter a { margin-left:auto;padding:11px 13px;color:#fff;border-radius:8px;background:#15333d;font-size:.65rem;font-weight:800;text-decoration:none; }
.chimney-system-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }.chimney-system-card { min-width:0;display:flex;flex-direction:column;padding:22px;border:1px solid #d5dfdc;border-radius:14px;background:#fff;box-shadow:0 8px 28px rgba(19,48,55,.04); }.chimney-system-card.selected { border-color:#0d8977;box-shadow:0 0 0 3px rgba(13,137,119,.12); }.chimney-system-top { display:flex;align-items:center;justify-content:space-between; }.chimney-system-top > span { color:#75878b;font-size:.55rem;font-weight:850;letter-spacing:.11em; }.chimney-tech-icon { width:47px;height:47px;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:2px;padding:8px;color:#fff;border-radius:11px;background:#173640; }.chimney-tech-icon i { display:block;border-radius:2px 2px 0 0;background:currentColor;opacity:.88; }.chimney-tech-icon i:nth-child(1){height:55%}.chimney-tech-icon i:nth-child(2){height:100%}.chimney-tech-icon i:nth-child(3){height:72%}.chimney-tech-icon.steel{background:#52727c}.chimney-tech-icon.hybrid{background:#a46d42}.chimney-tech-icon.ventilation{background:#247867}.chimney-system-brand { margin-top:25px;color:var(--portal-green);font-size:.63rem;font-weight:850; }.chimney-system-card h3 { margin:7px 0 12px;font:500 1.55rem Georgia,serif; }.chimney-system-card > p { min-height:64px;margin:0;color:var(--portal-muted);font-size:.72rem;line-height:1.55; }.chimney-system-card dl { display:grid;gap:0;margin:20px 0;border-top:1px solid #e1e7e5; }.chimney-system-card dl div { display:grid;grid-template-columns:100px 1fr;gap:8px;padding:9px 0;border-bottom:1px solid #e1e7e5;font-size:.61rem; }.chimney-system-card dt{color:#819095}.chimney-system-card dd{margin:0;color:#29424b;font-weight:750}.chimney-pros-cons { display:grid;grid-template-columns:1fr 1fr;gap:7px; }.chimney-pros-cons > div { display:grid;align-content:start;gap:5px;padding:10px;border-radius:8px;background:#f1f5f2; }.chimney-pros-cons strong{font-size:.61rem}.chimney-pros-cons span{color:#64787e;font-size:.55rem;line-height:1.35}.chimney-system-card footer { display:flex;align-items:end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:22px; }.chimney-system-card footer > div{display:grid;gap:3px}.chimney-system-card footer small{color:#859397;font-size:.52rem}.chimney-system-card footer strong{font:500 1.08rem Georgia,serif}.chimney-system-card footer a,.chimney-system-card footer button{padding:10px;color:#fff;border-radius:7px;background:#15343e;font-size:.59rem;font-weight:800;text-decoration:none}.chimney-system-card footer button{background:var(--portal-green)}.chimney-data-note{margin:19px 0 0;color:#78898e;font-size:.59rem;line-height:1.55}

.chimney-config-cta { display:grid;grid-template-columns:80px 1fr auto;align-items:center;gap:25px;padding:65px max(25px,7vw);color:#fff;background:#122f39; }.chimney-config-cta svg{color:#72d5c2}.chimney-config-cta span{color:#70d4c1;font-size:.65rem;font-weight:850;letter-spacing:.13em}.chimney-config-cta h2{margin:8px 0;font:500 clamp(2rem,3.2vw,3.3rem) Georgia,serif}.chimney-config-cta p{margin:0;color:#a9bdc0}.chimney-config-cta a{padding:16px 18px;color:#12323a;border-radius:8px;background:#fff;font-size:.7rem;font-weight:850;text-decoration:none}

.chimney-config-hero { min-height:540px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:80px max(24px,6vw);color:#fff;background:radial-gradient(circle at 76% 45%,rgba(81,211,186,.19),transparent 25%),linear-gradient(135deg,#102a34,#173d47); }.chimney-config-hero h1 { max-width:850px;margin:19px 0;font:400 clamp(3.4rem,5.6vw,6.2rem)/.95 Georgia,serif;letter-spacing:-.06em}.chimney-config-hero p{max-width:700px;color:#b6c8ca;line-height:1.7}.chimney-hero-visual{justify-self:end;min-width:360px;display:flex;align-items:center;gap:18px;padding:25px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(255,255,255,.06);backdrop-filter:blur(12px)}.chimney-hero-visual .chimney-tech-icon{width:75px;height:75px;padding:14px}.chimney-hero-visual div{display:grid;gap:5px}.chimney-hero-visual small{color:#79d7c6;font-size:.56rem;letter-spacing:.1em}.chimney-hero-visual strong{font:500 1.25rem Georgia,serif}.chimney-hero-visual div span{color:#a9bfc1;font-size:.65rem}
.chimney-configurator { display:grid;grid-template-columns:190px minmax(0,1fr) 340px;align-items:start;gap:18px;padding:65px max(22px,4vw);background:#edf2ee}.chimney-steps{display:grid;grid-template-columns:34px 1fr;gap:0;position:sticky;top:100px}.chimney-steps span{height:52px;display:grid;place-items:center;color:var(--portal-green);border-right:1px solid #cbd8d3;font:500 .7rem Georgia,serif}.chimney-steps strong{display:flex;align-items:center;padding-left:13px;color:#62767d;font-size:.65rem}.chimney-form{display:grid;gap:10px}.config-block{padding:27px;border:1px solid #d4dfdb;border-radius:14px;background:#fff}.config-block>span{color:var(--portal-green);font-size:.61rem;font-weight:850;letter-spacing:.13em}.config-block h2{margin:10px 0 20px;font:500 1.55rem Georgia,serif}.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.choice-grid button{min-height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;color:#3d565e;border:1px solid #d7e0dd;border-radius:9px;background:#f5f7f5;font-size:.68rem;font-weight:750}.choice-grid button.active{color:#087466;border-color:#51ad9f;background:#e7f4f0}.choice-grid i{font-style:normal}.chimney-dimensions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.chimney-dimensions label{display:grid;gap:8px}.chimney-dimensions label>span{color:#65787e;font-size:.63rem;font-weight:750}.chimney-dimensions label>div,.chimney-dimensions select{height:48px;border:1px solid #d4ddda;border-radius:8px;background:#f7f9f7}.chimney-dimensions label>div{display:grid;grid-template-columns:1fr auto;align-items:center}.chimney-dimensions input{min-width:0;height:100%;padding:0 12px;border:0;background:transparent;font-weight:800}.chimney-dimensions b{padding:0 12px;color:#708188;font-size:.64rem}.chimney-dimensions select{padding:0 10px;font-size:.67rem;font-weight:750}.chimney-result-panel{display:flex;flex-direction:column;padding:25px;position:sticky;top:95px;color:#fff;border-radius:15px;background:linear-gradient(150deg,#163640,#0c7165);box-shadow:0 20px 45px rgba(16,48,55,.16)}.chimney-result-panel>span{color:#7fdac9;font-size:.6rem;font-weight:850;letter-spacing:.13em}.chimney-result-panel>.chimney-tech-icon{margin:28px 0 20px}.chimney-result-panel>small{color:#85daca;font-size:.62rem;font-weight:800}.chimney-result-panel h2{margin:6px 0 11px;font:500 1.75rem Georgia,serif}.chimney-result-panel>p{margin:0;color:#c4d3d3;font-size:.68rem;line-height:1.55}.chimney-result-panel dl{display:grid;gap:0;margin:20px 0}.chimney-result-panel dl div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.62rem}.chimney-result-panel dt{color:#9fb7b8}.chimney-result-panel dd{margin:0;font-weight:800}.configured-price{display:grid;gap:4px;padding:16px;margin-top:5px;border-radius:9px;background:rgba(255,255,255,.07)}.configured-price small,.configured-price span{color:#a9bebf;font-size:.55rem}.configured-price strong{font:500 1.65rem Georgia,serif}.chimney-result-panel>button{height:48px;margin-top:12px;color:#113038;border-radius:8px;background:#fff;font-size:.68rem;font-weight:850}.chimney-ranked{background:#f7f9f6}.chimney-safety-note{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:35px max(25px,6vw);color:#fff;background:#132f39}.chimney-safety-note strong{color:#79d9c7}.chimney-safety-note p{margin:0;color:#b3c5c7;font-size:.68rem;line-height:1.5}.chimney-safety-note a{color:#78d9c7;font-size:.65rem;font-weight:800}

.brand-profile-hero{min-height:560px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:90px max(25px,8vw);background:radial-gradient(circle at 80% 45%,rgba(13,137,119,.14),transparent 25%),#eef2ee}.brand-profile-hero>.brand-wordmark{margin-bottom:42px}.brand-profile-hero>.brand-wordmark i{width:72px;height:72px;font-size:1rem}.brand-profile-hero h1{margin:14px 0;font:400 clamp(4rem,7vw,7rem) Georgia,serif;letter-spacing:-.06em}.brand-profile-hero p{max-width:720px;color:var(--portal-muted);line-height:1.7}.brand-profile-hero button{min-height:49px;margin-top:20px;padding:0 18px;color:#fff;border-radius:8px;background:var(--portal-green);font-size:.7rem;font-weight:850}.brand-profile-content{background:#f7f9f6}.brand-profile-content>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.brand-profile-content a{min-height:320px;display:flex;flex-direction:column;padding:25px;color:var(--portal-ink);border:1px solid #d5dfdc;border-radius:13px;background:#fff;text-decoration:none}.brand-profile-content a svg{color:var(--portal-green)}.brand-profile-content a>span{margin:45px 0 8px;color:var(--portal-green);font-size:.64rem}.brand-profile-content h3{margin:0 0 12px;font:500 1.3rem Georgia,serif}.brand-profile-content p{margin:0;color:var(--portal-muted);font-size:.72rem;line-height:1.55}.brand-profile-content strong{margin-top:auto;color:var(--portal-green);font-size:.65rem}

.drawing-live-panel { min-width:210px;display:grid;gap:3px;padding:12px 15px;position:absolute;left:18px;top:18px;z-index:7;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:11px;background:rgba(9,42,69,.92);box-shadow:0 15px 35px rgba(8,38,60,.23);backdrop-filter:blur(10px);pointer-events:none}.drawing-live-panel span{color:#78d6ff;font-size:.55rem;font-weight:900;letter-spacing:.13em}.drawing-live-panel strong{font-size:1.22rem}.drawing-live-panel small{color:#bfd9e6;font-size:.62rem}.draft-label{font-size:.28px!important;font-weight:900!important;paint-order:stroke;stroke:#fff;stroke-width:.08px;fill:#075fce!important}

@media (max-width: 1100px) {
  .chimney-system-grid{grid-template-columns:repeat(2,1fr)}
  .chimney-configurator{grid-template-columns:1fr 320px}.chimney-steps{display:none}
  .systems-visual-hero{grid-template-columns:minmax(380px,.9fr) 1.1fr}
}
@media (max-width: 900px) {
  .systems-visual-hero,.chimney-config-hero{grid-template-columns:1fr}.systems-visual-hero figure{min-height:520px}.system-visual-story{grid-template-columns:1fr}.system-visual-story article>div{height:330px}
  .calculator-workspace,.investment-summary-head,.chimney-configurator{grid-template-columns:1fr}.investment-summary-lines{grid-template-columns:1fr}.chimney-result-panel{position:static}.chimney-hero-visual{justify-self:stretch;min-width:0}
  .catalog-chimney-banner,.chimney-config-cta{grid-template-columns:1fr}.chimney-taxonomy{grid-template-columns:repeat(2,1fr)}.chimney-filter{flex-wrap:wrap}.chimney-filter a{width:100%;margin-left:0;text-align:center}.brand-profile-content>div:last-child{grid-template-columns:1fr 1fr}
}
@media (max-width: 620px) {
  .systems-visual-hero>div:first-child{padding:65px 18px 80px}.systems-visual-hero h1,.chimney-config-hero h1{font-size:clamp(3.1rem,14vw,4.5rem)}.systems-visual-hero figure{min-height:390px}.systems-card-media{height:215px}.systems-overview-grid>a{min-height:510px}
  .system-visual-story{padding:55px 12px}.system-visual-story article>div{height:230px}.calculator-fields{grid-template-columns:1fr}.department-calculator,.investment-summary{padding:70px 15px}.investment-summary-lines a{grid-template-columns:44px 1fr 16px}.investment-summary-lines b{grid-column:2}.calculator-result{min-height:330px}
  .chimney-system-grid{grid-template-columns:1fr}.chimney-taxonomy{grid-template-columns:1fr}.chimney-config-hero{padding:65px 18px}.chimney-hero-visual{padding:18px}.chimney-configurator{padding:35px 12px}.config-block{padding:20px 15px}.choice-grid,.chimney-dimensions{grid-template-columns:1fr}.chimney-pros-cons{grid-template-columns:1fr}.chimney-safety-note{grid-template-columns:1fr;padding:30px 18px}.catalog-chimney-banner{padding:50px 18px}.catalog-chimney-banner>div{grid-template-columns:1fr}.catalog-chimney-banner svg{grid-row:auto}.chimney-config-cta{padding:50px 18px}.brand-profile-content>div:last-child{grid-template-columns:1fr}.brand-profile-hero{padding:70px 20px}.brand-catalog-grid>article>section>a:nth-child(odd){border-left:0}
  .drawing-live-panel{left:10px;top:10px;min-width:175px;padding:9px 11px}.drawing-live-panel strong{font-size:1rem}
}

/* Creator Studio v4: one canvas, route-based workspaces and overlay drawers. */
.studio-drawer,
.studio-drawer-backdrop {
  display: none;
}

@media (min-width: 1025px) {
  .app-shell:has(> .app-header) {
    height: 100dvh;
    min-height: 680px;
    overflow: hidden;
    background:
      radial-gradient(circle at 78% 0, rgba(32, 142, 255, .08), transparent 28%),
      linear-gradient(145deg, #e7edf2, #f2f5f7 48%, #e8edf1);
  }

  .app-shell:has(> .app-header) > .app-header {
    width: 100%;
    height: 72px;
    min-height: 72px;
    position: relative;
    z-index: 120;
    grid-template-columns: 226px minmax(0, 1fr) auto;
    gap: 18px;
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: 0;
    background:
      radial-gradient(circle at 88% -80%, rgba(40, 142, 255, .32), transparent 34%),
      linear-gradient(105deg, #0b141d 0%, #101e29 54%, #102632 100%);
    box-shadow: 0 8px 28px rgba(8, 18, 27, .26);
  }

  .app-header-brand { gap: 11px; }
  .app-header-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 13px;
    background: linear-gradient(145deg, #0875dc, #2a9bff);
    box-shadow: 0 8px 22px rgba(20, 126, 232, .3);
  }
  .app-header-copy { min-width: 0; display: grid; gap: 3px; }
  .app-header-copy strong { font-size: 14px; letter-spacing: .06em; }
  .app-header-copy strong span { color: #54afff; }
  .app-header-copy small { overflow: hidden; color: #91a6b8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

  .app-header-tabs {
    width: max-content;
    max-width: 100%;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .045);
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  }
  .app-header-tab {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    color: #a6b5c1;
    border-radius: 9px;
    background: transparent;
    font-size: 13px;
    font-weight: 760;
    white-space: nowrap;
  }
  .app-header-tab svg { width: 16px; height: 16px; }
  .app-header-tab:hover { color: #f7fbff; background: rgba(255, 255, 255, .065); }
  .app-header-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #086ed5, #168df2);
    box-shadow: 0 7px 18px rgba(8, 110, 213, .32), inset 0 1px rgba(255, 255, 255, .18);
  }

  .app-header-actions { display: flex; align-items: center; gap: 7px; }
  .app-header-actions .secondary-button,
  .app-header-actions .primary-button {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 780;
  }
  .app-header-actions .secondary-button.active {
    color: #fff;
    border-color: rgba(69, 165, 255, .5);
    background: rgba(22, 126, 226, .28);
  }
  .app-header-actions .primary-button { background: linear-gradient(135deg, #118775, #20aa92); box-shadow: 0 8px 20px rgba(17, 135, 117, .25); }

  .studio-editor-shell,
  .studio-editor-shell.sidebar-collapsed {
    width: 100%;
    height: calc(100dvh - 72px);
    min-height: 608px;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
    overflow: hidden;
  }

  .studio-editor-shell .rail-panel {
    width: 70px;
    height: 100%;
    min-height: 0;
    padding: 8px 7px;
    gap: 8px;
    overflow: hidden;
    border: 1px solid #1a2d3a;
    border-radius: 15px;
    background: linear-gradient(180deg, #10202b, #0c1822);
    box-shadow: 0 14px 36px rgba(11, 24, 34, .2);
  }
  .studio-editor-shell .rail-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
  }
  .studio-editor-shell .rail-stack { min-height: 0; align-content: start; gap: 5px; }
  .studio-editor-shell .rail-item {
    position: relative;
    min-height: 51px;
    padding: 6px 3px;
    gap: 4px;
    color: #8fa5b6;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
  }
  .studio-editor-shell .rail-item:hover { color: #fff; background: rgba(255,255,255,.055); }
  .studio-editor-shell .rail-item.active { color: #fff; border-color: rgba(71, 165, 255, .38); background: linear-gradient(145deg, #0c6dce, #168cf1); }
  .studio-editor-shell .rail-item-divider { margin-top: 6px; }
  .studio-editor-shell .rail-item-divider::before { content: ""; width: 32px; height: 1px; position: absolute; margin-top: -13px; background: rgba(255,255,255,.1); }
  .studio-editor-shell .rail-item span { max-width: 60px; color: inherit; font-size: 10px; font-weight: 700; letter-spacing: 0; }
  .studio-editor-shell .rail-item svg { width: 18px; height: 18px; }

  .studio-editor-shell .workspace-column {
    height: 100%;
    min-height: 0;
    grid-template-rows: 58px minmax(0, 1fr);
    gap: 10px;
    overflow: hidden;
  }
  .studio-editor-shell .top-toolbar {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.2fr) auto;
    align-items: center;
    gap: 14px;
    padding: 6px 8px 6px 10px;
    border: 1px solid #d5dfe6;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 24px rgba(20, 42, 58, .075);
    backdrop-filter: blur(18px);
  }
  .toolbar-context { min-width: 0; display: flex; align-items: center; gap: 10px; }
  .toolbar-context > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #0d78dd; border-radius: 10px; background: #e8f3fc; }
  .toolbar-context > span svg { width: 18px; height: 18px; }
  .toolbar-context > div { min-width: 0; display: grid; gap: 1px; }
  .toolbar-context small { color: #7a8d9c; font-size: 9px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
  .toolbar-context strong { overflow: hidden; color: #172a39; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .studio-editor-shell .toolbar-project { justify-content: center; }
  .studio-editor-shell .toolbar-project .floor-pill { min-height: 38px; padding: 0 11px; border-radius: 9px; font-size: 12px; }
  .studio-editor-shell .toolbar-project .project-name { max-width: 250px; height: 38px; font-size: 14px; }
  .studio-editor-shell .toolbar-actions { gap: 5px; }
  .studio-editor-shell .toolbar-actions .icon-button,
  .studio-editor-shell .toolbar-new-button,
  .studio-editor-shell .toolbar-save-button { width: 38px; height: 38px; border-radius: 9px; }
  .studio-editor-shell .toolbar-actions .secondary-button { min-height: 38px; padding: 0 10px; border-radius: 9px; font-size: 11px; }

  .studio-editor-shell .workspace-stage {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(24, 51, 70, .08);
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(24, 43, 58, .09);
  }
  .studio-editor-shell .workspace-stage > .canvas-card,
  .studio-editor-shell .workspace-stage > .workspace-dock { border: 0; border-radius: 15px; box-shadow: none; }
  .studio-editor-shell .canvas-card { grid-template-rows: 56px minmax(0, 1fr) 32px; }
  .studio-editor-shell .canvas-topline { padding: 8px 15px; }
  .studio-editor-shell .canvas-topline h2 { font-size: 15px; }
  .studio-editor-shell .canvas-footer { min-height: 32px; padding-inline: 15px; font-size: 10px; }

  .studio-editor-shell .workspace-stage .dock-body {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .studio-editor-shell .workspace-stage .dock-body::-webkit-scrollbar { display: none; }
  .studio-editor-shell .workspace-stage-preview .dock-body { overflow: hidden; }

  .studio-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 72px 0 0;
    z-index: 140;
    background: rgba(8, 18, 27, .28);
    backdrop-filter: blur(2px);
  }
  .studio-drawer {
    width: min(430px, calc(100vw - 100px));
    display: grid;
    grid-template-rows: 76px minmax(0, 1fr);
    position: fixed;
    top: 72px;
    right: 0;
    bottom: 0;
    z-index: 150;
    overflow: hidden;
    border-left: 1px solid #d3dde4;
    background: #f7f9fa;
    box-shadow: -24px 0 70px rgba(10, 27, 39, .22);
    animation: studioDrawerIn .24s cubic-bezier(.2,.8,.2,1) both;
  }
  .studio-drawer-none { display: none; }
  .studio-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 13px 20px;
    color: #eef7fb;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(circle at 90% 0, rgba(35, 157, 255, .28), transparent 38%),
      linear-gradient(110deg, #102631, #153b46);
  }
  .studio-drawer-head > div { min-width: 0; display: grid; gap: 3px; }
  .studio-drawer-head span { color: #70d9c7; font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
  .studio-drawer-head strong { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
  .studio-drawer-head > button { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: #e7f2f6; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.07); }
  .studio-drawer-body {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    scrollbar-width: none;
  }
  .studio-drawer-body::-webkit-scrollbar { display: none; }
  .studio-drawer-body > .panel,
  .studio-drawer-body .palette-panel,
  .studio-drawer-body .side-panel {
    width: 100%;
    min-width: 0;
    min-height: 100%;
    overflow: visible;
    padding: 14px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(28, 53, 68, .07);
  }
  .studio-drawer-body .panel-stack { overflow: visible; }
  .studio-drawer-body .plan-library-results,
  .studio-drawer-body .opening-preset-library > div,
  .studio-drawer-body .roof-preset-library > div,
  .studio-drawer-body .furniture-library-grid { max-height: none; overflow: visible; }

  @keyframes studioDrawerIn {
    from { opacity: .45; transform: translateX(34px); }
    to { opacity: 1; transform: translateX(0); }
  }
}

@media (max-width: 1280px) and (min-width: 1025px) {
  .app-shell:has(> .app-header) > .app-header { grid-template-columns: 190px minmax(0, 1fr) auto; gap: 9px; padding-inline: 10px; }
  .app-header-copy strong { font-size: 12px; }
  .app-header-tab { padding-inline: 9px; font-size: 11px; }
  .app-header-actions .secondary-button { width: 42px; padding: 0; font-size: 0; }
  .app-header-actions .secondary-button svg { width: 17px; height: 17px; }
  .studio-editor-shell .top-toolbar { grid-template-columns: minmax(170px, .7fr) minmax(250px, 1fr) auto; }
}

@media (max-width: 1024px) {
  .editor-shell-mobile { grid-template-rows: 62px 46px minmax(0, 1fr); gap: 7px; padding: 7px 7px calc(74px + env(safe-area-inset-bottom)); }
  .mobile-topbar { min-height: 62px; border-radius: 14px; }
  .mobile-view-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 46px; padding: 3px; border-radius: 12px; }
  .mobile-view-tab { min-width: 0; padding: 0 5px; font-size: 12px; }
  .mobile-workspace > .canvas-card,
  .mobile-workspace > .workspace-dock { border-radius: 14px; }
  .mobile-workspace .dock-body {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .mobile-workspace .dock-body::-webkit-scrollbar { display: none; }
  .mobile-workspace .workspace-stage-preview .dock-body { overflow: hidden; }
  .mobile-bottom-nav { min-height: 66px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); }

  .editor-shell-mobile .mobile-drawer {
    width: min(430px, 94vw);
    max-width: 94vw;
    height: 100dvh;
    max-height: none;
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    grid-template-rows: 68px minmax(0, 1fr);
    border: 0;
    border-left: 1px solid #d6e0e7;
    border-radius: 0;
    transform: translateX(105%);
    box-shadow: -24px 0 70px rgba(8, 25, 38, .22);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
  }
  .editor-shell-mobile .mobile-drawer.open { transform: translateX(0); }
  .editor-shell-mobile .mobile-drawer-head {
    min-height: 68px;
    padding: 11px 13px 11px 17px;
    color: #fff;
    border: 0;
    background: linear-gradient(110deg, #102631, #15404b);
  }
  .editor-shell-mobile .mobile-drawer-head .eyebrow { color: #67d5c1; }
  .editor-shell-mobile .mobile-drawer-head strong { color: #fff; }
  .editor-shell-mobile .mobile-drawer-close { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
  .editor-shell-mobile .mobile-drawer-body { padding: 9px; overflow-y: auto; scrollbar-width: none; }
  .editor-shell-mobile .mobile-drawer-body::-webkit-scrollbar { display: none; }
  .editor-shell-mobile .mobile-drawer .plan-library-results,
  .editor-shell-mobile .mobile-drawer .opening-preset-library > div,
  .editor-shell-mobile .mobile-drawer .roof-preset-library > div,
  .editor-shell-mobile .mobile-drawer .furniture-library-grid { max-height: none; overflow: visible; }
}

@media (max-width: 520px) {
  .mobile-brand .eyebrow { display: none; }
  .mobile-view-tab { font-size: 11px; }
  .editor-shell-mobile .mobile-drawer { width: 96vw; max-width: 96vw; left: auto; right: 0; bottom: 0; height: 100dvh; border-radius: 0; }
}

/* Official manufacturer product and document library */
.manufacturer-library { padding:105px max(24px,5vw);background:#f4f7f4; }
.manufacturer-library-head { display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.8fr);gap:60px;align-items:end;margin-bottom:45px; }
.manufacturer-library-head > div:first-child > span { color:var(--portal-green);font-size:.68rem;font-weight:850;letter-spacing:.15em; }
.manufacturer-library-head h2 { max-width:820px;margin:14px 0 17px;font:400 clamp(3rem,5vw,5.4rem)/.96 Georgia,serif;letter-spacing:-.055em; }
.manufacturer-library-head p { max-width:760px;margin:0;color:var(--portal-muted);line-height:1.7; }
.manufacturer-library-stats { display:grid;grid-template-columns:1fr 1fr;border:1px solid #d4dfda;border-radius:14px;background:#fff;overflow:hidden; }
.manufacturer-library-stats article { min-height:110px;display:flex;flex-direction:column;justify-content:center;padding:18px; }
.manufacturer-library-stats article:nth-child(even){border-left:1px solid #dce4e1}.manufacturer-library-stats article:nth-child(n+3){border-top:1px solid #dce4e1}
.manufacturer-library-stats strong { color:var(--portal-green);font:500 1.45rem Georgia,serif; }.manufacturer-library-stats span { margin-top:5px;color:#73858b;font-size:.62rem; }
.manufacturer-filters { display:grid;grid-template-columns:1.5fr .65fr .65fr 100px;gap:8px;align-items:end;margin-bottom:18px;padding:13px;border:1px solid #d4dedb;border-radius:13px;background:#fff;box-shadow:0 12px 35px rgba(20,49,56,.05); }
.manufacturer-filters label { display:grid;gap:7px; }.manufacturer-filters label > span { color:#60737a;font-size:.61rem;font-weight:800; }.manufacturer-filters input,.manufacturer-filters select { width:100%;height:46px;padding:0 12px;border:1px solid #d4ddda;border-radius:8px;background:#f7f9f7;color:#213d46;font-size:.7rem;font-weight:700; }.manufacturer-filters > div { height:46px;display:flex;align-items:baseline;justify-content:center;gap:5px;color:#fff;border-radius:8px;background:#17353f; }.manufacturer-filters > div strong { font:500 1.1rem Georgia,serif; }.manufacturer-filters > div span { font-size:.55rem; }
.manufacturer-product-grid { display:grid;gap:12px; }
.manufacturer-product-card { min-height:310px;display:grid;grid-template-columns:280px minmax(280px,.8fr) minmax(360px,1.2fr);overflow:hidden;border:1px solid #d5dfdb;border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(18,49,57,.04); }
.manufacturer-product-image { min-height:310px;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#e8eee9,#dbe5df); }.manufacturer-product-image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,37,44,.34))}.manufacturer-product-image img{width:100%;height:100%;object-fit:contain;padding:20px;mix-blend-mode:multiply}.manufacturer-product-image>span{width:100px;height:100px;display:grid;place-items:center;color:#fff;border-radius:24px;background:#153640;font:700 1.7rem Georgia,serif}.manufacturer-product-image>i{position:absolute;left:14px;bottom:14px;z-index:2;padding:7px 9px;color:#fff;border-radius:6px;background:rgba(13,46,54,.83);font-size:.56rem;font-style:normal;font-weight:800}
.manufacturer-product-copy { display:flex;flex-direction:column;padding:27px;border-right:1px solid #e0e7e4; }.manufacturer-product-copy>span{color:var(--portal-green);font-size:.62rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.manufacturer-product-copy h3{margin:8px 0 13px;font:500 1.55rem Georgia,serif}.manufacturer-product-copy p{margin:0;color:var(--portal-muted);font-size:.72rem;line-height:1.55}.manufacturer-product-copy>div{display:flex;flex-wrap:wrap;gap:5px;margin-top:20px}.manufacturer-product-copy small{padding:6px 8px;color:#526a71;border-radius:6px;background:#eef3ef;font-size:.56rem}.manufacturer-product-copy>a{margin-top:auto;padding-top:20px;color:var(--portal-green);font-size:.63rem;font-weight:850;text-decoration:none}
.manufacturer-documents { display:flex;flex-direction:column;padding:18px 20px; }.manufacturer-documents>div:first-child{display:flex;justify-content:space-between;align-items:center;padding:2px 0 13px}.manufacturer-documents>div:first-child strong{font:600 .9rem Georgia,serif}.manufacturer-documents>div:first-child span{color:#7b8d91;font-size:.57rem}.manufacturer-documents>a{min-height:61px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;padding:9px;color:var(--portal-ink);border-top:1px solid #e1e7e5;text-decoration:none}.manufacturer-documents>a:hover{background:#f3f7f4}.manufacturer-documents>a>i{width:36px;height:36px;display:grid;place-items:center;color:#fff;border-radius:7px;background:#b64e40;font-size:.53rem;font-style:normal;font-weight:900}.manufacturer-documents>a>div{display:grid;gap:3px}.manufacturer-documents>a strong{font-size:.66rem}.manufacturer-documents>a small{color:#809094;font-size:.53rem}.manufacturer-documents>a>span{color:var(--portal-green);font-size:.57rem;font-weight:850}
.manufacturer-source-note { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;margin-top:18px;padding:20px 22px;color:#d7e3e3;border-radius:12px;background:#15323c; }.manufacturer-source-note strong{color:#74d5c3;font-size:.72rem}.manufacturer-source-note p{margin:0;color:#afc1c3;font-size:.62rem;line-height:1.5}.manufacturer-source-note code{padding:10px 12px;color:#d7e9e6;border-radius:7px;background:rgba(255,255,255,.07);font-size:.6rem}

@media (max-width: 1100px) {
  .manufacturer-library-head{grid-template-columns:1fr}.manufacturer-product-card{grid-template-columns:240px 1fr}.manufacturer-documents{grid-column:1/-1;border-top:1px solid #e0e7e4}.manufacturer-product-copy{border-right:0}
}
@media (max-width: 760px) {
  .manufacturer-library{padding:75px 15px}.manufacturer-filters{grid-template-columns:1fr 1fr}.manufacturer-filters label:first-child{grid-column:1/-1}.manufacturer-product-card{grid-template-columns:1fr}.manufacturer-product-image{min-height:260px}.manufacturer-product-copy{min-height:280px}.manufacturer-documents{grid-column:auto}.manufacturer-source-note{grid-template-columns:1fr}.manufacturer-source-note code{width:100%;overflow:auto}.manufacturer-library-head{gap:30px}
}
@media (max-width: 480px) {
  .manufacturer-library-head h2{font-size:clamp(2.8rem,13vw,4rem)}.manufacturer-library-stats{grid-template-columns:1fr 1fr}.manufacturer-library-stats article{min-height:90px;padding:13px}.manufacturer-filters{grid-template-columns:1fr}.manufacturer-filters label:first-child{grid-column:auto}.manufacturer-product-image{min-height:230px}.manufacturer-product-copy{padding:22px 18px}.manufacturer-documents{padding:15px 10px}.manufacturer-documents>a{grid-template-columns:38px 1fr}.manufacturer-documents>a>span{grid-column:2}
}

/* Foundation-first configurator */
.foundation-wizard {
  --foundation-ink: #132a36;
  --foundation-teal: #0e8879;
  --foundation-teal-dark: #08685e;
  --foundation-warm: #d9a764;
  min-height: 100vh;
  padding-bottom: 44px;
  background:
    radial-gradient(circle at 12% 4%, rgba(39, 151, 136, 0.1), transparent 25%),
    radial-gradient(circle at 92% 20%, rgba(217, 167, 100, 0.11), transparent 23%),
    linear-gradient(180deg, #f8faf9 0, #eef3f2 100%);
  color: var(--foundation-ink);
}

.foundation-header {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  padding: 10px clamp(20px, 4vw, 72px);
  border-bottom: 1px solid rgba(19, 42, 54, 0.1);
  background: rgba(250, 252, 251, 0.9);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.foundation-brand {
  color: var(--foundation-ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  justify-self: start;
}

.foundation-brand > span {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, var(--foundation-teal), #18a38e);
  box-shadow: 0 10px 24px rgba(14, 136, 121, 0.22);
}

.foundation-brand strong {
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

.foundation-brand em {
  color: var(--foundation-teal);
  font-style: normal;
}

.foundation-project-name {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.foundation-project-name span {
  color: #809098;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.foundation-project-name strong {
  font-size: 0.9rem;
}

.foundation-header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.build-stage-nav {
  width: min(1360px, calc(100% - 40px));
  min-height: 86px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 20px auto 0;
  padding: 8px;
  border: 1px solid rgba(19, 42, 54, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 16px 40px rgba(28, 57, 65, 0.06);
}

.build-stage-nav button {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  color: #829198;
  border-radius: 14px;
  background: transparent;
  text-align: left;
}

.build-stage-nav button + button {
  border-left: 1px solid rgba(19, 42, 54, 0.08);
  border-radius: 0;
}

.build-stage-nav button.active {
  color: white;
  border-left: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--foundation-teal-dark), var(--foundation-teal));
  box-shadow: 0 12px 24px rgba(14, 136, 121, 0.22);
}

.build-stage-nav button i {
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  font-style: normal;
}

.build-stage-nav button span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.build-stage-nav button strong,
.build-stage-nav button small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-stage-nav button strong {
  font-size: 0.78rem;
}

.build-stage-nav button small {
  font-size: 0.62rem;
  font-weight: 500;
  opacity: 0.72;
}

.foundation-hero {
  width: min(1360px, calc(100% - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 36px;
  margin: 0 auto;
  padding: 52px 4px 38px;
}

.foundation-hero .eyebrow {
  margin: 0 0 14px;
  color: var(--foundation-teal);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.foundation-hero h1 {
  max-width: 830px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.65rem, 5vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.foundation-hero h1 em {
  color: var(--foundation-teal);
  font-style: italic;
}

.foundation-lead {
  max-width: 700px;
  margin: 22px 0 0;
  color: #657981;
  font-size: 1rem;
  line-height: 1.75;
}

.foundation-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  border: 1px solid rgba(19, 42, 54, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
}

.foundation-hero-metrics div {
  min-width: 130px;
  display: grid;
  gap: 6px;
  padding: 17px 18px;
}

.foundation-hero-metrics div + div {
  border-left: 1px solid rgba(19, 42, 54, 0.1);
}

.foundation-hero-metrics span {
  color: #7a8d95;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foundation-hero-metrics strong {
  font-family: Georgia, serif;
  font-size: 1.28rem;
  font-weight: 500;
}

.foundation-layout {
  width: min(1360px, calc(100% - 40px));
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(390px, 0.75fr);
  gap: 22px;
  align-items: start;
  margin: 0 auto;
}

.foundation-form-column,
.foundation-summary-column {
  min-width: 0;
  display: grid;
  gap: 18px;
}

.foundation-summary-column {
  position: sticky;
  top: 96px;
}

.foundation-card,
.foundation-system-visual,
.foundation-estimate-card {
  overflow: hidden;
  border: 1px solid rgba(19, 42, 54, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.83);
  box-shadow: 0 20px 55px rgba(26, 55, 63, 0.07);
}

.foundation-card {
  padding: 24px;
}

.foundation-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.foundation-card-head > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.step-badge {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--foundation-teal);
  border: 1px solid rgba(14, 136, 121, 0.22);
  border-radius: 12px;
  background: #ebf6f3;
  font-family: Georgia, serif;
  font-size: 0.83rem;
}

.foundation-card-head h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.foundation-card-head p {
  margin: 4px 0 0;
  color: #7a8c94;
  font-size: 0.72rem;
}

.calculation-live,
.manufacturer-chip {
  flex: 0 0 auto;
  color: var(--foundation-teal);
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf7f5;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.calculation-live i,
.system-status i {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  background: #16b18e;
  box-shadow: 0 0 0 4px rgba(22, 177, 142, 0.12);
}

.foundation-dimension-layout {
  display: grid;
  grid-template-columns: minmax(290px, 0.95fr) minmax(250px, 1.05fr);
  gap: 24px;
}

.foundation-blueprint {
  min-height: 270px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background-color: #edf5f3;
  background-image:
    linear-gradient(rgba(14, 136, 121, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 136, 121, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
}

.foundation-plan-shape {
  width: 66%;
  aspect-ratio: 1.35;
  position: relative;
  border: 12px solid #324a53;
  box-shadow: 0 10px 28px rgba(20, 49, 58, 0.15);
}

.foundation-core {
  position: absolute;
  inset: 7px;
  border: 3px solid var(--foundation-warm);
}

.foundation-core i {
  position: absolute;
  background: rgba(217, 167, 100, 0.32);
}

.foundation-core i:nth-child(1),
.foundation-core i:nth-child(2) { width: 2px; top: 0; bottom: 0; }
.foundation-core i:nth-child(1) { left: 34%; }
.foundation-core i:nth-child(2) { right: 27%; }
.foundation-core i:nth-child(3) { height: 2px; left: 0; right: 0; top: 45%; }
.foundation-core i:nth-child(4) { width: 22%; height: 2px; right: 0; bottom: 24%; }

.dimension-x,
.dimension-y {
  position: absolute;
  z-index: 2;
  padding: 4px 8px;
  color: var(--foundation-teal-dark);
  border-radius: 5px;
  background: white;
  font-size: 0.64rem;
  font-weight: 800;
  box-shadow: 0 5px 14px rgba(22, 57, 65, 0.12);
}

.dimension-x { left: 50%; bottom: -38px; transform: translateX(-50%); }
.dimension-y { top: 50%; right: -48px; transform: translateY(-50%) rotate(90deg); }
.north-mark { position: absolute; top: 14px; right: 16px; color: #75918e; font: 700 0.67rem Georgia, serif; }

.foundation-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-content: center;
}

.foundation-fields label,
.thermal-row label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.foundation-fields label > span,
.thermal-row label > span {
  color: #687c84;
  font-size: 0.68rem;
  font-weight: 700;
}

.foundation-fields label > div,
.thermal-row label > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d5e0df;
  border-radius: 11px;
  background: #fafcfb;
}

.foundation-fields input,
.thermal-row input {
  min-width: 0;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  color: var(--foundation-ink);
  border: 0;
  outline: 0;
  background: transparent;
  font-weight: 750;
}

.foundation-fields b,
.thermal-row b {
  padding: 0 12px;
  color: #819198;
  font-size: 0.7rem;
}

.foundation-choice-grid {
  display: grid;
  gap: 10px;
}

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

.foundation-choice,
.foundation-system-choice {
  min-width: 0;
  display: grid;
  justify-items: start;
  position: relative;
  color: var(--foundation-ink);
  border: 1px solid #dae3e2;
  border-radius: 14px;
  background: #fbfcfc;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.foundation-choice {
  min-height: 124px;
  padding: 17px 15px 15px 44px;
}

.choice-radio {
  width: 17px;
  height: 17px;
  position: absolute;
  top: 17px;
  left: 16px;
  border: 1.5px solid #a6b5b8;
  border-radius: 50%;
  background: white;
}

.foundation-choice.active,
.foundation-system-choice.active {
  border-color: var(--foundation-teal);
  background: #edf8f5;
  box-shadow: inset 0 0 0 1px rgba(14, 136, 121, 0.15);
}

.foundation-choice.active .choice-radio::after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--foundation-teal);
}

.foundation-choice strong,
.foundation-system-choice strong {
  margin-bottom: 7px;
  font-family: Georgia, serif;
  font-size: 0.93rem;
  font-weight: 600;
}

.foundation-choice small,
.foundation-system-choice small {
  color: #74878f;
  font-size: 0.68rem;
  line-height: 1.45;
}

.foundation-warning,
.technical-note {
  margin-top: 12px;
  padding: 11px 13px;
  color: #7d5625;
  border: 1px solid rgba(192, 126, 43, 0.22);
  border-radius: 10px;
  background: #fff7e9;
  font-size: 0.7rem;
  line-height: 1.5;
}

.foundation-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px;
  border-radius: 12px;
  background: #f3f6f5;
  cursor: pointer;
}

.foundation-switch input { position: absolute; opacity: 0; pointer-events: none; }
.foundation-switch > span { width: 38px; height: 22px; flex: 0 0 auto; position: relative; border-radius: 20px; background: #b7c3c5; transition: 0.2s; }
.foundation-switch > span::after { content: ""; width: 16px; height: 16px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 7px rgba(0,0,0,.18); transition: 0.2s; }
.foundation-switch input:checked + span { background: var(--foundation-teal); }
.foundation-switch input:checked + span::after { transform: translateX(16px); }
.foundation-switch div { display: grid; gap: 3px; }
.foundation-switch strong { font-size: 0.76rem; }
.foundation-switch small { color: #7a8c93; font-size: 0.66rem; }

.foundation-system-choice {
  min-height: 174px;
  padding: 18px;
}

.foundation-system-choice:hover,
.foundation-choice:hover { transform: translateY(-2px); }
.system-tag { margin-bottom: 26px; color: var(--foundation-teal); font-size: 0.57rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.foundation-system-choice i { margin-top: auto; padding-top: 16px; color: var(--foundation-teal); font-size: 0.67rem; font-style: normal; font-weight: 800; }

.compact-card { padding-bottom: 20px; }
.thermal-row { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.thermal-options { display: flex; gap: 8px; }
.thermal-options button { min-width: 84px; height: 44px; color: #61777e; border: 1px solid #d5e1df; border-radius: 11px; background: #fafcfb; font-size: 0.74rem; font-weight: 800; }
.thermal-options button.active { color: white; border-color: var(--foundation-teal); background: var(--foundation-teal); }
.thermal-row label { width: 145px; }

.foundation-system-visual {
  background: #152b34;
  color: white;
}

.system-visual-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.system-visual-head div { display: grid; gap: 4px; }
.system-visual-head span { color: #7fbeb5; font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.system-visual-head strong { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 500; }
.system-status { padding: 7px 9px; border-radius: 999px; background: rgba(255,255,255,.07); white-space: nowrap; }

.foundation-cutaway {
  height: 330px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #25414b, #172d36);
}
.ground-fill { position: absolute; inset: 0 0 0 55%; background-color: #a48662; background-image: radial-gradient(circle, rgba(72,52,36,.25) 1px, transparent 1.5px); background-size: 13px 13px; }
.concrete-wall { width: 105px; position: absolute; top: 30px; bottom: 65px; left: 155px; background: linear-gradient(90deg, #a8b0af, #d4d7d4); box-shadow: inset 0 0 0 2px rgba(35,50,52,.2); }
.primer-layer { width: 5px; position: absolute; top: 32px; bottom: 63px; left: 260px; background: #d8a65f; }
.sbs-layer { width: 12px; position: absolute; top: 32px; bottom: 63px; left: 265px; background: #171c1d; }
.thermal-layer { width: 48px; position: absolute; top: 32px; bottom: 63px; left: 277px; background: repeating-linear-gradient(135deg, #dfe9d8 0 9px, #c7d9bf 9px 18px); }
.drainage-layer { width: 22px; position: absolute; top: 32px; bottom: 63px; left: 325px; background: radial-gradient(circle at 5px 5px, #64777a 3px, transparent 4px) 0 0 / 11px 11px, #202d30; }
.foundation-footing { width: 230px; height: 58px; position: absolute; bottom: 34px; left: 92px; background: linear-gradient(#bec4c1, #929c9a); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); }
.cutaway-label { position: absolute; padding: 5px 8px; color: #e7f1ef; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; background: rgba(10,23,28,.75); font-size: .57rem; }
.cutaway-label::before { content: ""; width: 34px; height: 1px; position: absolute; top: 50%; right: 100%; background: rgba(255,255,255,.3); }
.label-concrete { top: 63px; right: 22px; }
.label-sbs { top: 121px; right: 22px; }
.label-thermal { top: 178px; right: 22px; }
.label-drain { top: 235px; right: 22px; }
.system-layer-legend { display: flex; flex-wrap: wrap; gap: 15px; padding: 13px 18px 16px; color: #b5c8ca; font-size: .58rem; }
.system-layer-legend span { display: flex; align-items: center; gap: 6px; }
.system-layer-legend i { width: 8px; height: 8px; border-radius: 2px; }
.system-layer-legend .primer { background: #d8a65f; }
.system-layer-legend .sbs { background: #06090a; border: 1px solid #526166; }
.system-layer-legend .thermal { background: #cadcbf; }
.system-layer-legend .drain { background: #65777a; }

.foundation-estimate-card { background: rgba(255,255,255,.92); }
.foundation-estimate-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid #e2e8e6; }
.foundation-estimate-head span { color: var(--foundation-teal); font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.foundation-estimate-head h2 { margin: 4px 0 0; font-family: Georgia, serif; font-size: 1.3rem; font-weight: 500; }
.foundation-estimate-head > strong { width: 38px; height: 38px; display: grid; place-items: center; color: var(--foundation-teal); border-radius: 11px; background: #e9f5f2; font-family: Georgia, serif; }
.foundation-product-list { display: grid; }
.foundation-product-row { min-width: 0; display: grid; grid-template-columns: 58px minmax(0, 1fr) 84px; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid #e5eae9; }
.foundation-product-thumb { width: 58px; height: 58px; display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; padding: 0; border: 1px solid transparent; border-radius: 10px; background: #eff3f1; cursor: pointer; }
.foundation-product-thumb:hover { border-color: #8bbef7; box-shadow: 0 7px 18px rgba(22,117,232,.13); }
.foundation-product-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.foundation-product-copy > button,.foundation-product-copy > a { width: fit-content; padding: 0; color: inherit; border: 0; background: transparent; font: inherit; font-weight: 800; text-align: left; text-decoration:none; cursor: pointer; }
.foundation-product-copy > button:hover,.foundation-product-copy > a:hover { color: #1675e8; }
.foundation-detail-modal .product-detail-media img { padding: 22px; }
.foundation-usage-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.foundation-product-copy { min-width: 0; display: grid; gap: 3px; }
.foundation-product-copy strong { overflow: hidden; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.foundation-product-copy span { color: var(--foundation-teal); font-size: .64rem; font-weight: 700; }
.foundation-product-copy small { color: #87969b; font-size: .55rem; }
.foundation-price-input { display: grid; gap: 3px; text-align: right; }
.foundation-price-input span { color: #8b999e; font-size: .52rem; }
.foundation-price-input input { width: 84px; height: 32px; padding: 0 7px; border: 1px solid #d8e1df; border-radius: 7px; outline: 0; background: #fafcfb; font-size: .67rem; text-align: right; }
.foundation-estimate-total { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 20px; background: #f0f6f4; }
.foundation-estimate-total div { display: grid; gap: 3px; }
.foundation-estimate-total span { font-size: .69rem; font-weight: 800; }
.foundation-estimate-total small { color: #7b8c92; font-size: .58rem; }
.foundation-estimate-total > strong { color: var(--foundation-teal-dark); font-family: Georgia, serif; font-size: 1.2rem; font-weight: 500; text-align: right; }
.foundation-source-note { margin: 0; padding: 13px 18px 17px; color: #839298; font-size: .58rem; line-height: 1.5; }

.foundation-footer-action {
  width: min(1360px, calc(100% - 40px));
  min-height: 95px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 22px auto 0;
  padding: 15px 16px 15px 24px;
  color: white;
  border-radius: 20px;
  background: linear-gradient(120deg, #152c35, #1c3a43);
  box-shadow: 0 22px 50px rgba(20, 44, 53, .18);
}
.foundation-footer-action > div { display: grid; gap: 6px; }
.foundation-footer-action > div span { color: #6fd2c1; font-size: .58rem; font-weight: 800; letter-spacing: .12em; }
.foundation-footer-action > div strong { font-family: Georgia, serif; font-size: 1rem; font-weight: 500; }
.foundation-next-button { min-width: 255px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 17px 0 21px; color: white; border-radius: 13px; background: linear-gradient(135deg, var(--foundation-teal), #13a08c); box-shadow: 0 12px 26px rgba(4, 25, 29, .25); text-align: left; }
.foundation-next-button span { display: grid; gap: 2px; font-size: .76rem; font-weight: 800; }
.foundation-next-button small { color: #9ce2d5; font-size: .5rem; letter-spacing: .11em; }
.foundation-next-button b { font-size: 1.35rem; font-weight: 400; }

/* Product estimator */
.product-estimator-panel { padding: 18px; }
.product-estimator-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.product-estimator-head h2, .catalog-browser-head h2 { margin: 3px 0 0; font-size: 1rem; }
.product-estimator-head > div > span { color: var(--muted); font-size: .63rem; }
.estimate-total-card { min-width: 205px; display: grid; gap: 2px; padding: 12px 15px; border: 1px solid #cfe0da; border-radius: 13px; background: #eff8f5; text-align: right; }
.estimate-total-card span, .estimate-total-card small { color: #6f8580; font-size: .58rem; }
.estimate-total-card strong { color: #0c7a6c; font-size: 1.15rem; }
.product-metrics { margin-bottom: 15px; }
.estimate-lines { display: grid; gap: 9px; }
.foundation-material-summary { margin-bottom: 15px; overflow: hidden; border: 1px solid #cadfd9; border-radius: 13px; background: #f0f8f5; }
.foundation-material-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid #d4e4df; }
.foundation-material-head > div { display: grid; gap: 3px; }
.foundation-material-head span { color: #0c8171; font-size: .52rem; font-weight: 800; letter-spacing: .09em; }
.foundation-material-head strong { font-size: .7rem; }
.foundation-material-head > b { color: #0c7668; font-size: .8rem; white-space: nowrap; }
.foundation-material-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foundation-material-products button,.foundation-material-products a { min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 7px; padding: 8px 10px; color: inherit; border: 0; background: transparent; text-align: left; text-decoration:none; cursor: pointer; }
.foundation-material-products button:hover,.foundation-material-products a:hover { background: #eef8f5; }
.foundation-material-products button + button,.foundation-material-products a + a { border-left: 1px solid #d8e5e1; }
.foundation-material-products img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: white; }
.foundation-material-products button > span,.foundation-material-products a > span { min-width: 0; display: grid; gap: 2px; }
.foundation-material-products strong, .foundation-material-products small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foundation-material-products strong { font-size: .56rem; }
.foundation-material-products small { color: #6f8580; font-size: .49rem; }
.estimate-line { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 13px; padding: 11px; border: 1px solid #dde5e9; border-radius: 13px; background: rgba(255,255,255,.76); }
.estimate-line > img, .estimate-product-placeholder { width: 92px; height: 92px; object-fit: contain; border-radius: 10px; background: #f1f4f5; }
.estimate-product-placeholder { display: grid; place-items: center; color: var(--muted); font-size: .6rem; }
.estimate-line-main { min-width: 0; display: grid; gap: 8px; }
.estimate-line-title { display: flex; justify-content: space-between; gap: 10px; }
.estimate-line-title > div { min-width: 0; display: grid; gap: 2px; }
.estimate-line-title span { color: var(--muted); font-size: .57rem; }
.estimate-line-title strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.stock-chip { height: fit-content; padding: 4px 7px; color: #08766a !important; border-radius: 99px; background: #e7f6f1; font-weight: 700; }
.stock-chip.warning { color: #a76b20 !important; background: #fff3de; }
.estimate-product-select { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; }
.estimate-product-select span { color: var(--muted); font-size: .58rem; }
.estimate-product-select select { min-width: 0; height: 32px; padding: 0 8px; border: 1px solid #d9e2e7; border-radius: 8px; background: white; font-size: .62rem; }
.estimate-calculation { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid #e0e6e9; border-radius: 9px; }
.estimate-calculation div { min-width: 0; display: grid; gap: 2px; padding: 7px 9px; }
.estimate-calculation div + div { border-left: 1px solid #e0e6e9; }
.estimate-calculation span { color: var(--muted); font-size: .52rem; }
.estimate-calculation strong { overflow: hidden; font-size: .65rem; text-overflow: ellipsis; }
.estimate-product-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .55rem; }
.estimate-product-meta a, .retail-product-link { color: var(--accent); text-decoration: none; }
.catalog-browser-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin: 26px 0 12px; }
.catalog-filter-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.catalog-filter-tabs button { padding: 6px 9px; color: var(--muted); border: 1px solid #dce4e8; border-radius: 8px; background: white; font-size: .58rem; }
.catalog-filter-tabs button.active { color: white; border-color: var(--accent); background: var(--accent); }
.retail-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.retail-product-card { min-width: 0; overflow: hidden; border: 1px solid #dce4e8; border-radius: 12px; background: white; }
.retail-product-image { height: 135px; display: grid; place-items: center; position: relative; background: #f1f4f5; }
.retail-product-image img { width: 100%; height: 100%; object-fit: contain; }
.retail-product-image span { position: absolute; top: 8px; left: 8px; padding: 4px 6px; color: #30485a; border-radius: 6px; background: rgba(255,255,255,.9); font-size: .52rem; font-weight: 800; }
.retail-product-body { display: grid; gap: 6px; padding: 11px; }
.retail-product-category { color: var(--accent); font-size: .5rem; font-weight: 800; text-transform: uppercase; }
.retail-product-body h3 { min-height: 2.4em; margin: 0; font-size: .68rem; line-height: 1.2; }
.retail-product-body p { height: 3.9em; overflow: hidden; margin: 0; color: var(--muted); font-size: .55rem; line-height: 1.3; }
.retail-product-package { color: var(--muted); font-size: .54rem; }
.retail-product-price { display: flex; align-items: baseline; gap: 4px; }
.retail-product-price strong { font-size: .9rem; }
.retail-product-price span, .retail-product-link { font-size: .53rem; }
.catalog-legal-note { margin-top: 13px; padding: 11px; color: #6d7e85; border: 1px solid #dde5e6; border-radius: 9px; background: #f5f8f7; font-size: .55rem; line-height: 1.5; }
.raw-material-details { margin-top: 12px; }
.raw-material-details summary { cursor: pointer; font-size: .65rem; font-weight: 750; }

@media (max-width: 1180px) {
  .foundation-header { grid-template-columns: 1fr auto; }
  .foundation-project-name { display: none; }
  .foundation-layout { grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr); }
  .foundation-dimension-layout { grid-template-columns: 1fr; }
  .foundation-blueprint { min-height: 225px; }
  .foundation-choice-grid.three, .system-grid { grid-template-columns: 1fr; }
  .foundation-choice { min-height: 92px; }
  .foundation-system-choice { min-height: 130px; }
  .system-tag { margin-bottom: 13px; }
  .retail-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .foundation-header { min-height: 66px; padding: 9px 14px; }
  .foundation-brand strong { display: none; }
  .foundation-header-actions .secondary-button { display: none; }
  .foundation-header-actions .primary-button { min-width: 0; padding-inline: 12px; font-size: .7rem; }
  .build-stage-nav { width: calc(100% - 24px); min-height: 65px; margin-top: 12px; display: flex; overflow-x: auto; scrollbar-width: none; }
  .build-stage-nav button { min-width: 58px; justify-content: center; padding: 9px; }
  .build-stage-nav button span { display: none; }
  .build-stage-nav button + button { border-left: 0; }
  .build-stage-nav button.active { min-width: 58px; }
  .foundation-hero { width: calc(100% - 28px); grid-template-columns: 1fr; gap: 24px; padding: 34px 0 26px; }
  .foundation-hero h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
  .foundation-lead { font-size: .86rem; }
  .foundation-hero-metrics { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foundation-hero-metrics div { min-width: 0; padding: 13px 10px; }
  .foundation-hero-metrics span { font-size: .48rem; }
  .foundation-hero-metrics strong { font-size: .9rem; }
  .foundation-layout { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .foundation-summary-column { position: static; }
  .foundation-card { padding: 17px; border-radius: 17px; }
  .foundation-card-head { align-items: flex-start; margin-bottom: 17px; }
  .calculation-live, .manufacturer-chip { display: none; }
  .foundation-dimension-layout { gap: 18px; }
  .foundation-blueprint { min-height: 210px; }
  .foundation-fields { grid-template-columns: 1fr 1fr; }
  .foundation-choice-grid.three, .system-grid { grid-template-columns: 1fr; }
  .thermal-row { align-items: stretch; flex-direction: column; }
  .thermal-options { display: grid; grid-template-columns: repeat(3, 1fr); }
  .thermal-options button { min-width: 0; }
  .thermal-row label { width: 100%; }
  .foundation-summary-column { grid-template-columns: 1fr; }
  .foundation-footer-action { width: calc(100% - 24px); align-items: stretch; flex-direction: column; padding: 18px; }
  .foundation-next-button { width: 100%; min-width: 0; }
  .product-estimator-head, .catalog-browser-head { align-items: stretch; flex-direction: column; }
  .estimate-total-card { min-width: 0; text-align: left; }
  .catalog-filter-tabs { justify-content: flex-start; }
  .estimate-line { grid-template-columns: 68px minmax(0, 1fr); }
  .estimate-line > img, .estimate-product-placeholder { width: 68px; height: 68px; }
  .estimate-product-select { grid-template-columns: 1fr; }
  .estimate-calculation { grid-template-columns: 1fr 1fr; }
  .estimate-calculation div:nth-child(3) { border-left: 0; border-top: 1px solid #e0e6e9; }
  .estimate-calculation div:nth-child(4) { border-top: 1px solid #e0e6e9; }
  .retail-product-grid { grid-template-columns: 1fr; }
  .foundation-material-head { align-items: flex-start; flex-direction: column; }
  .foundation-material-products { grid-template-columns: 1fr 1fr; }
  .foundation-material-products button:nth-child(odd),.foundation-material-products a:nth-child(odd) { border-left: 0; }
  .foundation-material-products button:nth-child(n+3),.foundation-material-products a:nth-child(n+3) { border-top: 1px solid #d8e5e1; }
}

@media (max-width: 460px) {
  .foundation-header-actions .primary-button span { display: none; }
  .foundation-hero-metrics { grid-template-columns: 1fr 1fr; }
  .foundation-hero-metrics div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(19,42,54,.1); border-left: 0; }
  .foundation-card-head p { display: none; }
  .foundation-fields { grid-template-columns: 1fr; }
  .foundation-blueprint { min-height: 190px; }
  .foundation-product-row { grid-template-columns: 48px minmax(0, 1fr); }
  .foundation-product-thumb { width: 48px; height: 48px; }
  .foundation-price-input { grid-column: 2; width: 100%; grid-template-columns: auto 84px; align-items: center; justify-content: end; }
  .foundation-cutaway { height: 290px; }
  .concrete-wall { left: 82px; }
  .primer-layer { left: 187px; }
  .sbs-layer { left: 192px; }
  .thermal-layer { left: 204px; }
  .drainage-layer { left: 252px; }
  .foundation-footing { left: 28px; }
  .ground-fill { left: 48%; }
  .cutaway-label { right: 10px; }
  .foundation-material-products { grid-template-columns: 1fr; }
  .foundation-material-products button,.foundation-material-products a { border-left: 0 !important; border-top: 1px solid #d8e5e1; }
  .foundation-material-products button:first-child,.foundation-material-products a:first-child { border-top: 0; }
}

/* Multi-page construction systems portal */
.construction-portal {
  --portal-ink: #142a34;
  --portal-muted: #667a82;
  --portal-line: #dce4e2;
  --portal-green: #0d8977;
  --portal-green-dark: #076659;
  --portal-lime: #c6d985;
  --portal-warm: #c89a62;
  min-height: 100vh;
  color: var(--portal-ink);
  background: #f5f7f4;
}

.portal-header {
  height: 76px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 38px;
  padding: 0 clamp(22px, 4vw, 70px);
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(20, 42, 52, .1);
  background: rgba(249, 250, 247, .92);
  backdrop-filter: blur(22px);
}

.portal-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--portal-ink);
  text-decoration: none;
}

.portal-brand > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(145deg, #102d39, #0c7c6c);
  box-shadow: 0 9px 22px rgba(12, 73, 67, .2);
}

.portal-brand strong {
  font-size: .84rem;
  letter-spacing: .075em;
  white-space: nowrap;
}

.portal-brand em {
  color: var(--portal-green);
  font-style: normal;
}

.portal-main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.portal-main-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  color: #586d75;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
}

.portal-main-nav a svg { color: #7d908f; transition: color .2s, transform .2s; }
.portal-main-nav a:hover svg,
.portal-main-nav a.active svg { color: var(--portal-green); transform: translateY(-1px); }

.portal-main-nav a:hover,
.portal-main-nav a.active {
  color: var(--portal-ink);
  background: #e9efec;
}

.portal-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portal-continue,
.portal-creator-button {
  height: 46px;
  padding: 0 17px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
}

.portal-continue {
  color: var(--portal-ink);
  border: 1px solid var(--portal-line);
  background: transparent;
}

.portal-creator-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: var(--portal-ink);
  box-shadow: 0 10px 23px rgba(20, 42, 52, .17);
}

.portal-hero {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(460px, .8fr) minmax(600px, 1.2fr);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 15%, rgba(13, 137, 119, .12), transparent 27%),
    linear-gradient(110deg, #f7f9f5 0 46%, #e9ede8 46% 100%);
}

.portal-hero-copy {
  max-width: 700px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 84px 4vw 80px max(28px, 6vw);
  position: relative;
  z-index: 5;
}

.portal-overline,
.portal-subhero > span,
.detail-hero-copy > span,
.portal-section-heading > span,
.portal-model-copy > span,
.partner-section > div > span,
.portal-final-cta > span,
.detail-brand-section > div > span,
.detail-calculator > div > span,
.catalog-monetization > div > span {
  color: var(--portal-green);
  font-size: .63rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.portal-overline {
  display: flex;
  align-items: center;
  gap: 9px;
}

.portal-overline i {
  width: 28px;
  height: 1px;
  background: var(--portal-green);
}

.portal-hero h1,
.portal-subhero h1,
.portal-detail-hero h1,
.portal-final-cta h2 {
  margin: 24px 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 6vw, 7rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .94;
}

.portal-hero h1 em,
.portal-subhero h1 em {
  color: var(--portal-green);
  font-style: italic;
}

.portal-hero-copy > p {
  max-width: 580px;
  margin: 0;
  color: var(--portal-muted);
  font-size: 1rem;
  line-height: 1.75;
}

.portal-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}

.portal-hero-actions button,
.portal-model-copy button,
.portal-subhero button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 0 20px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--portal-green-dark), var(--portal-green));
  box-shadow: 0 13px 28px rgba(13, 137, 119, .19);
  font-size: .73rem;
  font-weight: 800;
}

.portal-hero-actions a {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  padding: 0 19px;
  color: var(--portal-ink);
  border: 1px solid #cfd9d6;
  border-radius: 10px;
  background: rgba(255,255,255,.63);
  font-size: .72rem;
  font-weight: 800;
  text-decoration: none;
}

.portal-proof {
  display: flex;
  margin-top: 53px;
}

.portal-proof div {
  min-width: 112px;
  display: grid;
  gap: 4px;
  padding-right: 21px;
}

.portal-proof div + div {
  padding-left: 21px;
  border-left: 1px solid #cfd8d5;
}

.portal-proof strong {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.portal-proof span {
  color: #7a8c92;
  font-size: .57rem;
}

.portal-hero-image {
  min-width: 0;
  min-height: 680px;
  position: relative;
  overflow: hidden;
}

.portal-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f3f6f2 0, transparent 16%, transparent 77%, rgba(9,27,34,.12));
  pointer-events: none;
}

.portal-hero-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% center;
  filter: saturate(.9) contrast(1.02);
}

.hero-system-marker {
  min-width: 146px;
  display: grid;
  grid-template-columns: 30px 1fr;
  padding: 10px 12px;
  position: absolute;
  z-index: 4;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(14, 34, 42, .86);
  box-shadow: 0 14px 30px rgba(11, 28, 34, .2);
  backdrop-filter: blur(12px);
}

.hero-system-marker::before {
  content: "";
  width: 70px;
  height: 1px;
  position: absolute;
  top: 50%;
  right: 100%;
  background: rgba(255,255,255,.58);
}

.hero-system-marker > span {
  grid-row: 1 / span 2;
  color: #74d4c4;
  font: 500 .86rem Georgia, serif;
}

.hero-system-marker strong {
  font-size: .65rem;
}

.hero-system-marker small {
  color: #b9c9cc;
  font-size: .48rem;
}

.marker-roof { top: 18%; right: 7%; }
.marker-wall { top: 47%; right: 5%; }
.marker-foundation { bottom: 12%; right: 15%; }

.hero-live-chip {
  position: absolute;
  left: 10%;
  bottom: 5%;
  z-index: 4;
  padding: 9px 12px;
  color: #dce8e6;
  border-radius: 999px;
  background: rgba(12, 32, 39, .84);
  font-size: .58rem;
  font-weight: 750;
  letter-spacing: .05em;
  backdrop-filter: blur(10px);
}

.hero-live-chip i {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 7px;
  border-radius: 50%;
  background: #38d7b8;
  box-shadow: 0 0 0 5px rgba(56,215,184,.14);
}

.portal-brand-marquee {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 30px;
  padding: 0 5vw;
  overflow-x: auto;
  color: #66777d;
  border-top: 1px solid #dbe2df;
  border-bottom: 1px solid #dbe2df;
  background: #eff2ee;
}

.portal-brand-marquee span {
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-size: .88rem;
  font-weight: 600;
}

.portal-section {
  padding: 110px max(24px, 5vw);
}

.portal-section-heading {
  max-width: 820px;
  margin-bottom: 48px;
}

.portal-section-heading h2,
.portal-model-copy h2,
.partner-section h2,
.detail-brand-section h2,
.detail-calculator h2,
.catalog-monetization h2 {
  margin: 14px 0 17px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 4.5vw, 5rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1;
}

.portal-section-heading p,
.detail-brand-section > div > p {
  max-width: 690px;
  margin: 0;
  color: var(--portal-muted);
  line-height: 1.7;
}

.system-journey {
  background: #f8f9f6;
}

.journey-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.journey-card {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: var(--portal-ink);
  border: 1px solid #d9e3df;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(20, 42, 52, .06);
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
}

.journey-card:hover {
  z-index: 2;
  transform: translateY(-5px);
  box-shadow: 0 24px 50px rgba(22, 49, 55, .11);
}

.journey-card::after {
  content: "";
  width: 190px;
  height: 190px;
  position: absolute;
  right: -70px;
  bottom: -70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,137,119,.1), transparent 68%);
}

.journey-card-media {
  height: 218px;
  position: relative;
  overflow: hidden;
  background: #dce8e4;
}

.journey-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,35,43,.02), rgba(10,35,43,.74));
}

.journey-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.journey-card:hover .journey-card-media img { transform: scale(1.045); }

.journey-number {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  color: #fff;
  font: 700 14px Georgia, serif;
}

.journey-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 17px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 16px;
  background: rgba(8,74,68,.76);
  backdrop-filter: blur(12px);
}

.journey-card-media > em {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 22px;
  color: #e4f6f2;
  font-size: 14px;
  font-style: normal;
  font-weight: 750;
}

.journey-card-copy { flex: 1; display: flex; flex-direction: column; padding: 26px; }

.journey-card h3 {
  margin: 0 0 12px;
  font-family: Georgia, serif;
  font-size: clamp(1.55rem, 2vw, 2rem);
  font-weight: 500;
}

.journey-card p {
  margin: 0;
  color: var(--portal-muted);
  font-size: 15px;
  line-height: 1.65;
}

.journey-brands {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 20px;
}

.journey-brands span {
  padding: 7px 9px;
  color: #718287;
  border-radius: 7px;
  background: #f0f3f1;
  font-size: 14px;
}

.journey-card-copy > strong {
  margin-top: auto;
  padding-top: 25px;
  color: var(--portal-green);
  font-size: 14px;
}

.journey-card-copy > strong i { float: right; font-style: normal; font-size: 20px; }

.portal-model-section {
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr);
  padding: 22px;
  background: radial-gradient(circle at 70% 25%, rgba(42,179,157,.15), transparent 26%), #102831;
  color: #fff;
}

.portal-model-visual {
  min-height: 716px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: #18333c;
}

.portal-model-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(11,28,35,.04) 40%, rgba(11,28,35,.45) 100%);
}

.portal-model-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% center;
}

.model-scan-line {
  width: 2px;
  position: absolute;
  z-index: 2;
  top: 8%;
  bottom: 8%;
  left: 58%;
  background: linear-gradient(transparent, #45dbc1, transparent);
  box-shadow: 0 0 25px rgba(69,219,193,.7);
}

.model-visual-toolbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  left: 18px;
  padding: 0 16px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: rgba(11,31,38,.76);
  backdrop-filter: blur(16px);
}
.model-visual-toolbar span { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; letter-spacing:.08em; }
.model-visual-toolbar span i,
.model-copy-kicker em i { width:8px; height:8px; border-radius:50%; background:#59d4bb; box-shadow:0 0 0 5px rgba(89,212,187,.13); }
.model-visual-toolbar strong { margin-left:auto; font-size:14px; }
.model-visual-toolbar em { padding:7px 9px; color:#79dfcc; border-radius:7px; background:rgba(62,201,177,.12); font-size:14px; font-style:normal; font-weight:850; }

.model-data-pin {
  min-width: 174px;
  display: flex;
  align-items: center;
  gap: 11px;
  position: absolute;
  z-index: 4;
  padding: 10px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 12px;
  background: rgba(13,42,49,.82);
  box-shadow: 0 14px 35px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}
.model-data-pin::after { content:""; width:42px; height:1px; position:absolute; right:100%; background:rgba(100,221,199,.8); }
.model-data-pin b { width:34px; height:34px; display:grid; place-items:center; color:#7ae0cc; border-radius:9px; background:rgba(72,199,177,.14); font-size:14px; }
.model-data-pin span { display:grid; gap:3px; font-size:14px; color:#bcd0d1; }
.model-data-pin strong { color:#fff; font-size:15px; }
.pin-roof { top:22%; right:5%; }
.pin-wall { top:47%; right:7%; }
.pin-foundation { right:10%; bottom:24%; }

.model-live-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  left: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(10,30,37,.84);
  backdrop-filter: blur(18px);
}
.model-live-metrics article { display:grid; gap:5px; padding:15px 17px; }
.model-live-metrics article + article { border-left:1px solid rgba(255,255,255,.12); }
.model-live-metrics span { color:#9eb5b8; font-size:14px; }
.model-live-metrics strong { color:#fff; font-size:17px; }

.portal-model-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px clamp(30px, 4.5vw, 76px);
}

.model-copy-kicker { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.model-copy-kicker > span { color:#61c9b8; font-size:14px; font-weight:850; letter-spacing:.14em; }
.model-copy-kicker em { display:flex; align-items:center; gap:9px; color:#87dccc; font-size:14px; font-style:normal; font-weight:800; }
.portal-model-copy h2 i { color:#71d8c5; font-style:normal; }
.portal-model-copy > p { margin:0; color:#b8c9cb; font-size:16px; line-height:1.75; }
.model-flow-list { display:grid; gap:8px; margin:28px 0; }
.model-flow-list article { min-height:70px; display:grid; grid-template-columns:28px 42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid rgba(255,255,255,.1); border-radius:12px; background:rgba(255,255,255,.035); transition:background .2s,border-color .2s,transform .2s; }
.model-flow-list article:hover { transform:translateX(4px); border-color:rgba(94,215,193,.34); background:rgba(81,194,174,.08); }
.model-flow-list article > b { color:#64cdbb; font:500 14px Georgia,serif; }
.model-flow-list article > i { width:40px; height:40px; display:grid; place-items:center; color:#72d8c5; border-radius:10px; background:rgba(76,198,176,.1); }
.model-flow-list article > span { display:grid; gap:4px; }
.model-flow-list article strong { color:#f1f7f6; font-size:15px; }
.model-flow-list article small { color:#91a9ad; font-size:14px; }
.model-flow-list article > em { color:#7bdac8; font-size:14px; font-style:normal; font-weight:800; white-space:nowrap; }
.model-copy-footer { display:flex; align-items:center; gap:20px; }
.model-copy-footer button { width:fit-content; min-height:50px; padding:0 18px; color:#0d2b32; border-radius:10px; background:#68d3bf; font-size:14px; font-weight:850; }
.model-copy-footer small { color:#a9bcbe; font-size:14px; }
.model-copy-footer small b { color:#6bd4c0; }

.commerce-section { background: radial-gradient(circle at 92% 4%,rgba(36,156,137,.11),transparent 24%),#edf2ee; }
.commerce-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; background:transparent; }
.commerce-grid article { min-height:310px; display:flex; flex-direction:column; padding:24px; overflow:hidden; position:relative; border:1px solid #d3dfdb; border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 13px 35px rgba(18,48,53,.055); transition:transform .25s,box-shadow .25s; }
.commerce-grid article:hover { transform:translateY(-5px); box-shadow:0 22px 48px rgba(18,48,53,.11); }
.commerce-grid article > div { display:flex; justify-content:space-between; align-items:center; }
.commerce-grid article > div > i { color:var(--portal-green); font:600 14px Georgia,serif; }
.commerce-grid article > div > span { width:48px; height:48px; display:grid; place-items:center; color:var(--portal-green); border:1px solid #d2e5df; border-radius:14px; background:#edf7f3; }
.commerce-grid article > strong { display:block; margin:40px 0 12px; font:500 clamp(1.35rem,1.8vw,1.7rem) Georgia,serif; }
.commerce-grid article > p { margin:0; color:var(--portal-muted); font-size:15px; line-height:1.65; }
.commerce-grid footer { display:flex; align-items:flex-end; gap:9px; margin-top:auto; padding-top:22px; border-top:1px solid #e0e7e4; }
.commerce-grid footer b { color:var(--portal-ink); font:500 1.45rem Georgia,serif; }
.commerce-grid footer small { padding-bottom:3px; color:#6f8388; font-size:14px; }

.partner-section {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr);
  gap: 70px;
  align-items: center;
  padding: 90px max(28px, 7vw);
  color: #fff;
  background:
    radial-gradient(circle at 80% 30%, rgba(60, 194, 172, .14), transparent 28%),
    linear-gradient(135deg, #0f2630, #172f38);
}

.partner-section h2 { max-width: 740px; }
.partner-section p { color:#afc0c3; font-size:16px; line-height:1.75; }
.partner-metrics { display: grid; gap: 1px; background: rgba(255,255,255,.12); }
.partner-metrics article { display: grid; gap: 6px; padding: 20px; background: rgba(15,38,48,.88); }
.partner-metrics strong { color: #6fd0bf; font-family: Georgia, serif; font-size: 1.15rem; }
.partner-metrics span { color:#b8c7c9; font-size:14px; }
.partner-section > a { grid-column:2; width:fit-content; color:#6bd0bd; font-size:14px; font-weight:800; text-decoration:none; }

.portal-final-cta {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
  background: radial-gradient(circle, #fff 0, #edf2ed 68%);
}
.portal-final-cta h2 { font-size: clamp(3.4rem, 6.5vw, 7rem); }
.portal-final-cta > div { display: flex; gap: 9px; }
.portal-final-cta button, .portal-final-cta a { min-height: 52px; display: inline-flex; align-items: center; gap: 44px; padding: 0 20px; border-radius: 10px; font-size: .7rem; font-weight: 800; text-decoration: none; }
.portal-final-cta button { color: #fff; background: var(--portal-green); }
.portal-final-cta a { color: var(--portal-ink); border: 1px solid #ced9d5; background: #fff; }

.portal-footer {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 35px;
  padding: 55px max(24px, 5vw) 35px;
  color: #c8d4d5;
  background: #10262f;
}
.portal-footer > div:not(.portal-brand) { display: grid; align-content: start; gap: 9px; }
.portal-footer > div > strong { color:#fff; margin-bottom:7px; font-size:15px; }
.portal-footer a { color:#aababc; font-size:14px; text-decoration:none; }
.portal-footer .portal-brand { color: #fff; align-self: start; }
.portal-footer p { grid-column:1/-1; margin:25px 0 0; padding-top:22px; color:#82969a; border-top:1px solid rgba(255,255,255,.09); font-size:14px; }

.system-navigation {
  width: min(1320px, calc(100% - 40px));
  min-height: 82px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: -24px auto 0;
  position: relative;
  z-index: 10;
  overflow: hidden;
  border: 1px solid #d8e0dd;
  border-radius: 14px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 18px 46px rgba(21,48,55,.11);
}
.system-navigation a { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #718187; text-decoration: none; }
.system-navigation a + a { border-left: 1px solid #dde4e1; }
.system-navigation a.active { color: #fff; background: var(--portal-green); }
.system-navigation i { color: var(--portal-green); font: 400 .7rem Georgia, serif; }
.system-navigation a.active i { color: #8de0d1; }
.system-navigation span { font-size: .63rem; font-weight: 800; }

.portal-subhero {
  min-height: 570px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 110px 24px 90px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(13,137,119,.13), transparent 30%),
    linear-gradient(#f8faf7, #e9eeea);
}
.portal-subhero h1 { font-size: clamp(4rem, 7vw, 7rem); }
.portal-subhero > p { max-width: 760px; margin: 0; color: var(--portal-muted); line-height: 1.7; }
.portal-subhero button { margin-top: 28px; }

.systems-overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; background: #f5f7f4; }
.systems-overview-grid > a { min-height: 390px; display: flex; flex-direction: column; padding: 32px; color: var(--portal-ink); border: 1px solid #dbe3e0; border-radius: 17px; background: #fff; text-decoration: none; }
.systems-overview-grid > a > span { color: var(--portal-green); font: 400 .75rem Georgia, serif; }
.systems-overview-grid h2 { margin: 60px 0 14px; font: 500 1.7rem Georgia, serif; }
.systems-overview-grid p { margin: 0; color: var(--portal-muted); font-size: .72rem; line-height: 1.6; }
.systems-overview-grid > a > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 22px; }
.systems-overview-grid i { padding: 6px 8px; color: #667a81; border-radius: 5px; background: #eff3f0; font-size: .53rem; font-style: normal; }
.systems-overview-grid > a > strong { margin-top: auto; padding-top: 24px; color: var(--portal-green); font-size: .64rem; }

.portal-detail-hero {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(450px, .82fr) minmax(0, 1.18fr);
  background: #e9eeea;
}
.detail-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px 5vw 105px max(30px, 7vw); }
.detail-hero-copy h1 { margin-bottom: 11px; font-size: clamp(3.5rem, 5.4vw, 6.4rem); }
.detail-hero-copy h2 { margin: 0 0 21px; color: var(--portal-green); font: italic 400 clamp(1.35rem,2vw,2rem) Georgia, serif; }
.detail-hero-copy > p { max-width: 620px; margin: 0; color: var(--portal-muted); line-height: 1.7; }
.detail-facts { display: flex; margin: 34px 0; }
.detail-facts div { min-width: 115px; display: grid; gap: 4px; padding-right: 18px; }
.detail-facts div + div { padding-left: 18px; border-left: 1px solid #cad5d1; }
.detail-facts strong { font: 500 1.25rem Georgia, serif; }
.detail-facts small { color: #788b91; font-size: .53rem; }
.detail-hero-copy > button { width: fit-content; min-height: 49px; display: flex; align-items: center; gap: 40px; padding: 0 18px; color: #fff; border-radius: 9px; background: var(--portal-green); font-size: .68rem; font-weight: 800; }
.detail-hero-copy > button i { font-style: normal; }
.detail-hero-image { min-height: 680px; position: relative; overflow: hidden; }
.detail-hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#e9eeea 0,transparent 18%,transparent 100%); }
.detail-hero-image img { width:100%; height:100%; object-fit:cover; object-position:center; }
.detail-hero-image > span { position:absolute; z-index:2; right:24px; bottom:35px; padding:8px 10px; color:#fff; border-radius:6px; background:rgba(11,31,38,.78); font-size:.53rem; font-weight:800; letter-spacing:.08em; backdrop-filter:blur(10px); }
.detail-foundations .detail-hero-image img { object-position: 56% center; }
.detail-walls .detail-hero-image img, .detail-insulation .detail-hero-image img { object-position: 69% center; }
.detail-roofs .detail-hero-image img { object-position: 59% 20%; }
.detail-chimneys .detail-hero-image img { object-position: 72% 20%; }
.detail-interiors .detail-hero-image img { object-position: center; }

.detail-layers-section { background: #f8f9f6; }
.detail-layer-track { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--portal-line); }
.detail-layer-track article { min-height: 180px; display: flex; flex-direction: column; padding: 18px; background:#fff; }
.detail-layer-track article + article { border-left: 1px solid var(--portal-line); }
.detail-layer-track i { color:var(--portal-green); font:400 .65rem Georgia,serif; }
.detail-layer-track strong { margin:auto 0; font:500 .89rem Georgia,serif; }
.detail-layer-track span { color:#9dadae; align-self:flex-end; }

.detail-systems-section { color:#fff; background:#142d37; }
.detail-systems-section .portal-section-heading > span { color:#67cdbb; }
.detail-system-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:10px; }
.detail-system-grid article { min-height:430px; display:flex; flex-direction:column; padding:27px; border:1px solid rgba(255,255,255,.1); border-radius:15px; background:#193640; }
.detail-system-grid article.featured { background:linear-gradient(145deg,#0d7668,#0b5e55); box-shadow:0 25px 55px rgba(5,24,28,.26); }
.detail-system-grid article > span { color:#74d3c2; font-size:.55rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.detail-system-grid h3 { margin:55px 0 14px; font:500 1.45rem Georgia,serif; }
.detail-system-grid p { margin:0; color:#b1c2c4; font-size:.7rem; line-height:1.6; }
.detail-system-grid ul { display:grid; gap:8px; margin:24px 0; padding:0; color:#cedbdb; list-style:none; font-size:.62rem; }
.detail-system-grid button { margin-top:auto; height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:8px; background:rgba(255,255,255,.06); font-size:.62rem; font-weight:800; }
.detail-system-grid button i { font-style:normal; }

.detail-brand-section { display:grid; grid-template-columns:minmax(320px,.68fr) minmax(0,1.32fr); gap:65px; align-items:center; padding:105px max(24px,6vw); background:#edf1ed; }
.detail-brand-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.detail-brand-grid article { min-height:102px; display:flex; flex-direction:column; justify-content:center; padding:17px; border:1px solid #d6dfdc; border-radius:10px; background:rgba(255,255,255,.7); }
.detail-brand-grid strong { font:600 .95rem Georgia,serif; }
.detail-brand-grid span { margin-top:6px; color:#778a90; font-size:.54rem; }

.detail-calculator { display:grid; grid-template-columns:.65fr 1fr auto; gap:40px; align-items:center; background:#f8f9f6; }
.detail-calculator h2 { font-size:clamp(2.4rem,3.8vw,4rem); }
.detail-calculator > div:nth-child(2) { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#d6dfdc; }
.detail-calculator article { display:flex; align-items:center; gap:10px; padding:14px; background:#fff; }
.detail-calculator article i { color:var(--portal-green); font:400 .64rem Georgia,serif; }
.detail-calculator article strong { font-size:.64rem; }
.detail-calculator > button { min-width:190px; height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; color:#fff; border-radius:9px; background:var(--portal-green); font-size:.66rem; font-weight:800; }

.related-systems { background:#eef2ee; }
.related-systems > div:last-child { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.related-systems a { min-height:100px; display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:12px; padding:17px; color:var(--portal-ink); border:1px solid #d3ddda; border-radius:10px; background:#fff; text-decoration:none; }
.related-systems a span { color:var(--portal-green); font:400 .67rem Georgia,serif; }
.related-systems a strong { font-size:.67rem; }
.related-systems a i { color:var(--portal-green); font-style:normal; }

.catalog-business-strip { width:min(1220px,calc(100% - 40px)); min-height:115px; display:grid; grid-template-columns:repeat(4,1fr); margin:-35px auto 0; position:relative; z-index:5; border-radius:13px; background:#132d37; box-shadow:0 20px 48px rgba(15,39,47,.2); }
.catalog-business-strip div { display:flex; flex-direction:column; justify-content:center; padding:20px 27px; color:#fff; }
.catalog-business-strip div + div { border-left:1px solid rgba(255,255,255,.1); }
.catalog-business-strip strong { color:#6ed1bf; font:500 1.35rem Georgia,serif; }
.catalog-business-strip span { margin-top:5px; color:#b6c5c6; font-size:.57rem; }

.brand-catalog-grid { display:grid; gap:18px; background:#f6f8f5; }
.brand-catalog-grid > article { display:grid; grid-template-columns:280px minmax(0,1fr); overflow:hidden; border:1px solid #d9e2df; border-radius:16px; background:#fff; }
.brand-catalog-grid > article > div { display:flex; flex-direction:column; padding:25px; color:#fff; background:#17333d; }
.brand-catalog-grid > article > div span { color:#69d0bd; font:400 .7rem Georgia,serif; }
.brand-catalog-grid h2 { margin:45px 0 15px; font:500 1.35rem Georgia,serif; }
.brand-catalog-grid > article > div a { margin-top:auto; color:#6bd1be; font-size:.6rem; font-weight:800; text-decoration:none; }
.brand-catalog-grid > article > section { display:grid; grid-template-columns:repeat(4,1fr); }
.brand-catalog-grid > article > section > div { min-height:130px; display:flex; flex-direction:column; justify-content:center; padding:15px; border-left:1px solid #e0e7e4; border-bottom:1px solid #e0e7e4; }
.brand-catalog-grid > article > section strong { font:600 .9rem Georgia,serif; }
.brand-catalog-grid > article > section span { margin-top:10px; color:var(--portal-green); font-size:.54rem; font-weight:800; }
.brand-catalog-grid > article > section small { margin-top:3px; color:#849398; font-size:.49rem; }

.catalog-monetization { min-height:560px; display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; padding:90px max(25px,7vw); color:#fff; background:#132d37; }
.catalog-monetization > div:last-child { display:grid; gap:8px; }
.catalog-monetization article { padding:20px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.04); }
.catalog-monetization article strong { color:#6ed0be; font:500 1rem Georgia,serif; }
.catalog-monetization article p { margin:8px 0 0; color:#afc0c2; font-size:.64rem; line-height:1.5; }

@media (max-width: 1160px) {
  .portal-header { gap:15px; }
  .portal-main-nav a:nth-child(4) { display:none; }
  .portal-hero { grid-template-columns:minmax(390px,.75fr) minmax(500px,1.25fr); }
  .portal-hero h1 { font-size:clamp(3.7rem,6vw,6rem); }
  .journey-grid { grid-template-columns:repeat(2,1fr); }
  .commerce-grid { grid-template-columns:1fr 1fr; }
  .portal-model-section { grid-template-columns:1fr 430px; }
  .system-navigation { width:calc(100% - 28px); }
  .portal-detail-hero { grid-template-columns:minmax(390px,.8fr) minmax(0,1.2fr); }
  .detail-layer-track { grid-template-columns:repeat(3,1fr); }
  .detail-layer-track article:nth-child(4) { border-left:0; }
  .detail-layer-track article:nth-child(n+4) { border-top:1px solid var(--portal-line); }
  .brand-catalog-grid > article > section { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 900px) {
  .portal-header { height:68px; grid-template-columns:auto 1fr; padding:0 14px; }
  .portal-main-nav { display:none; }
  .portal-header-actions { justify-self:end; }
  .portal-continue { display:none; }
  .portal-hero { min-height:0; grid-template-columns:1fr; }
  .portal-hero-copy { max-width:none; padding:70px 22px 48px; }
  .portal-hero-image { min-height:560px; }
  .portal-hero-image::after { background:linear-gradient(180deg,#f3f6f2 0,transparent 17%,transparent 100%); }
  .portal-brand-marquee { justify-content:flex-start; }
  .portal-section { padding:80px 20px; }
  .portal-model-section { grid-template-columns:1fr; }
  .portal-model-visual { min-height:560px; }
  .portal-model-visual::after { background:linear-gradient(180deg,transparent 68%,#142d37 100%); }
  .portal-model-copy { padding:55px 23px 75px; }
  .partner-section { grid-template-columns:1fr; gap:30px; padding:75px 24px; }
  .partner-section > a { grid-column:1; }
  .portal-footer { grid-template-columns:1fr 1fr; }
  .portal-footer .portal-brand { grid-column:1/-1; }
  .system-navigation { display:flex; overflow-x:auto; }
  .system-navigation a { min-width:125px; min-height:68px; }
  .portal-detail-hero { grid-template-columns:1fr; }
  .detail-hero-copy { padding:70px 22px 60px; }
  .detail-hero-image { min-height:520px; }
  .detail-hero-image::after { background:linear-gradient(180deg,#e9eeea 0,transparent 20%,transparent); }
  .detail-system-grid { grid-template-columns:1fr; }
  .detail-system-grid article { min-height:340px; }
  .detail-brand-section { grid-template-columns:1fr; gap:35px; padding:80px 22px; }
  .detail-calculator { grid-template-columns:1fr; gap:25px; }
  .detail-calculator > button { width:100%; }
  .brand-catalog-grid > article { grid-template-columns:1fr; }
  .brand-catalog-grid > article > div { min-height:210px; }
  .brand-catalog-grid > article > section > div:first-child { border-left:0; }
  .catalog-monetization { grid-template-columns:1fr; gap:35px; padding:75px 23px; }
}

@media (min-width: 1025px) and (max-width: 1300px) {
  .editor-view-materials.sidebar-open .top-toolbar {
    grid-template-columns: auto minmax(90px, 1fr) auto;
    gap: 6px;
  }
  .editor-view-materials.sidebar-open .toolbar-project .floor-pill,
  .editor-view-materials.sidebar-open .toolbar-actions .zoom-pill { display: none; }
  .editor-view-materials.sidebar-open .toolbar-project .project-name {
    min-width: 0;
    width: 100%;
    max-width: 150px;
    padding-inline: 5px;
    font-size: 12px;
  }
  .editor-view-materials.sidebar-open .toolbar-actions { gap: 3px; }
  .editor-view-materials.sidebar-open .toolbar-actions .secondary-button.small {
    width: 38px;
    padding: 0;
    overflow: hidden;
    font-size: 0;
  }
  .editor-view-materials.sidebar-open .toolbar-actions .secondary-button.small svg { margin: 0; }
}

@media (max-width: 620px) {
  .portal-brand strong { display:none; }
  .portal-creator-button { width:42px; padding:0; justify-content:center; font-size:0; }
  .portal-creator-button svg { width:18px; height:18px; }
  .portal-hero-copy { padding-top:54px; }
  .portal-hero h1,.portal-subhero h1 { font-size:clamp(3.25rem,15vw,4.6rem); }
  .portal-hero-actions { align-items:stretch; flex-direction:column; }
  .portal-hero-actions button,.portal-hero-actions a { width:100%; }
  .portal-proof { display:grid; grid-template-columns:repeat(3,1fr); }
  .portal-proof div { min-width:0; padding-right:8px; }
  .portal-proof div + div { padding-left:9px; }
  .portal-proof strong { font-size:.92rem; }
  .portal-proof span { font-size:.47rem; }
  .portal-hero-image { min-height:450px; }
  .hero-system-marker { min-width:128px; padding:8px; }
  .hero-system-marker::before { width:35px; }
  .marker-roof { top:12%; right:4%; }
  .marker-wall { top:43%; right:3%; }
  .marker-foundation { bottom:10%; right:7%; }
  .hero-live-chip { left:10px; bottom:10px; }
  .portal-section-heading h2,.portal-model-copy h2,.partner-section h2,.detail-brand-section h2,.detail-calculator h2,.catalog-monetization h2 { font-size:clamp(2.5rem,12vw,3.5rem); }
  .journey-grid { grid-template-columns:1fr; }
  .journey-card { min-height:360px; padding:22px; }
  .commerce-grid { grid-template-columns:1fr; }
  .portal-model-visual { min-height:430px; }
  .portal-final-cta h2 { font-size:clamp(3rem,14vw,4.5rem); }
  .portal-final-cta > div { width:100%; flex-direction:column; }
  .portal-final-cta button,.portal-final-cta a { width:100%; justify-content:center; }
  .portal-footer { grid-template-columns:1fr; }
  .portal-footer .portal-brand { grid-column:auto; }
  .portal-footer p { grid-column:auto; }
  .portal-subhero { min-height:500px; padding:90px 17px 80px; }
  .systems-overview-grid { grid-template-columns:1fr; padding:70px 14px; }
  .systems-overview-grid > a { min-height:340px; padding:23px; }
  .portal-detail-hero h1 { font-size:clamp(3rem,14vw,4.5rem); }
  .detail-facts { display:grid; grid-template-columns:repeat(3,1fr); }
  .detail-facts div { min-width:0; padding-right:7px; }
  .detail-facts div + div { padding-left:8px; }
  .detail-hero-image { min-height:410px; }
  .detail-layer-track { grid-template-columns:1fr 1fr; }
  .detail-layer-track article { min-height:135px; }
  .detail-layer-track article:nth-child(odd) { border-left:0; }
  .detail-layer-track article:nth-child(n+3) { border-top:1px solid var(--portal-line); }
  .detail-brand-grid { grid-template-columns:1fr; }
  .detail-calculator > div:nth-child(2) { grid-template-columns:1fr; }
  .related-systems > div:last-child { grid-template-columns:1fr; }
  .catalog-business-strip { width:calc(100% - 24px); grid-template-columns:1fr 1fr; }
  .catalog-business-strip div:nth-child(3) { border-left:0; border-top:1px solid rgba(255,255,255,.1); }
  .catalog-business-strip div:nth-child(4) { border-top:1px solid rgba(255,255,255,.1); }
  .brand-catalog-grid { padding:70px 12px; }
  .brand-catalog-grid > article > section { grid-template-columns:1fr 1fr; }
  .brand-catalog-grid > article > section > div:nth-child(odd) { border-left:0; }
}

@media (prefers-reduced-motion: no-preference) {
  .portal-hero-copy { animation: portal-fade-up .7s ease both; }
  .portal-hero-image { animation: portal-fade-in .9s ease .1s both; }
  .model-scan-line { animation: model-scan 3.6s ease-in-out infinite alternate; }
  @keyframes portal-fade-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }
  @keyframes portal-fade-in { from { opacity:0; } to { opacity:1; } }
  @keyframes model-scan { from { left:43%; } to { left:67%; } }
}

.full-marketplace { width:min(1440px,calc(100% - 48px)); margin:30px auto 0; overflow:hidden; border:1px solid var(--portal-line); border-radius:22px; background:#fff; box-shadow:0 22px 70px rgba(15,40,52,.08); }
.full-marketplace-head { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(430px,.8fr); align-items:end; gap:36px; padding:38px; color:#edf8f7; background:radial-gradient(circle at 92% 10%,rgba(30,167,145,.2),transparent 36%),linear-gradient(120deg,#102931,#173c45); }
.full-marketplace-head > div:first-child > span { color:#65d5c1; font-size:.64rem; font-weight:900; letter-spacing:.17em; }
.full-marketplace-head h2 { margin:8px 0 10px; font-family:Georgia,serif; font-size:clamp(2.2rem,4vw,4rem); font-weight:500; letter-spacing:-.04em; }
.full-marketplace-head p { max-width:720px; margin:0; color:#a9c1c4; font-size:.78rem; line-height:1.65; }
.full-marketplace-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(255,255,255,.04); }
.full-marketplace-stats article { display:grid; gap:5px; padding:17px; }
.full-marketplace-stats article + article { border-left:1px solid rgba(255,255,255,.12); }
.full-marketplace-stats strong { color:#fff; font-size:1.13rem; }
.full-marketplace-stats span { color:#91afb3; font-size:.56rem; }
.full-marketplace-search { display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px; padding:24px 30px; border-bottom:1px solid #dce6e8; background:#f5f8f8; }
.full-marketplace-search label { display:grid; gap:7px; }
.full-marketplace-search label span { color:#597178; font-size:.61rem; font-weight:800; }
.full-marketplace-search input { min-height:48px; padding:0 16px; color:#17323b; border:1px solid #cbdadd; border-radius:10px; background:#fff; font-size:.78rem; outline:none; }
.full-marketplace-search input:focus { border-color:#168c7a; box-shadow:0 0 0 3px rgba(22,140,122,.12); }
.full-marketplace-search > div { min-width:120px; display:grid; justify-items:end; gap:2px; }
.full-marketplace-search > div strong { color:#143943; font-size:1.2rem; }
.full-marketplace-search > div span { color:#768d92; font-size:.58rem; }
.full-marketplace-list { display:grid; min-height:220px; padding:10px 18px; transition:opacity .16s ease; }
.full-marketplace-list.loading { opacity:.48; }
.full-marketplace-list > article { min-width:0; display:grid; grid-template-columns:62px minmax(280px,1fr) 180px 190px; align-items:center; gap:16px; padding:13px 12px; border-bottom:1px solid #e0e8ea; }
.marketplace-index-icon { width:54px; height:54px; position:relative; display:grid; place-items:center; border-radius:11px; background:linear-gradient(145deg,#edf5f5,#dfeceb); }
.marketplace-index-icon > span { color:#1d5a5f; font-size:.75rem; font-weight:900; }
.marketplace-index-icon > img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:10px; background:#fff; mix-blend-mode:multiply; }
.marketplace-index-icon small { position:absolute; right:-4px; bottom:-4px; padding:3px 5px; color:#fff; border-radius:5px; background:#168c7a; font-size:.42rem; font-weight:900; }
.marketplace-index-copy { min-width:0; display:grid; gap:4px; }
.marketplace-index-copy > span { color:#168c7a; font-size:.52rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.marketplace-index-copy h3 { overflow:hidden; margin:0; font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.marketplace-index-copy h3 a { color:#1b3540; text-decoration:none; }
.marketplace-index-copy h3 a:hover { color:#0d796a; }
.marketplace-index-copy small { color:#87989d; font-size:.52rem; }
.marketplace-index-state { min-width:0; display:grid; gap:6px; }
.marketplace-index-state span { width:max-content; padding:5px 7px; color:#7a6a2f; border-radius:99px; background:#f7f0d8; font-size:.49rem; font-weight:850; }
.marketplace-index-state strong { color:#526a71; font-size:.59rem; }
.marketplace-index-actions { display:grid; grid-template-columns:1fr auto; align-items:center; gap:9px; }
.marketplace-index-actions a { min-height:34px; display:flex; align-items:center; justify-content:center; padding:0 10px; color:#fff; border-radius:8px; background:#167b6d; font-size:.56rem; font-weight:850; text-decoration:none; }
.marketplace-index-actions a:last-child { color:#536d74; border:1px solid #d2dfe1; background:#fff; }
.full-marketplace-pagination { display:flex; align-items:center; justify-content:center; gap:20px; padding:20px; background:#f5f8f8; }
.full-marketplace-pagination button { min-height:38px; padding:0 14px; color:#1b5c5c; border:1px solid #cadbdd; border-radius:8px; background:#fff; font-size:.6rem; font-weight:800; }
.full-marketplace-pagination button:disabled { opacity:.4; }
.full-marketplace-pagination span { color:#73898f; font-size:.61rem; }
.full-marketplace > footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 24px; color:#789096; border-top:1px solid #dce6e8; background:#edf4f4; font-size:.55rem; }
.full-marketplace > footer code { color:#205e60; }
.full-marketplace-error { margin:14px 20px 0; padding:12px; color:#9b3d3d; border-radius:8px; background:#fff0f0; font-size:.65rem; }
.full-marketplace-categories { display:flex; align-items:center; gap:7px; overflow-x:auto; padding:13px 24px; border-bottom:1px solid #dce6e8; background:#fff; scrollbar-width:none; }
.full-marketplace-categories::-webkit-scrollbar { display:none; }
.full-marketplace-categories button { min-height:34px; flex:0 0 auto; padding:0 12px; color:#597278; border:1px solid #d4e0e2; border-radius:99px; background:#fff; font-size:.56rem; font-weight:850; }
.full-marketplace-categories button.active { color:#fff; border-color:#168c7a; background:#168c7a; }
.full-marketplace-categories .enrich-visible { margin-left:auto; color:#11675d; border-color:#9bcac2; background:#eaf7f4; }
.full-marketplace-categories .enrich-visible:disabled { opacity:.55; }

@media (max-width:900px) {
  .full-marketplace { width:calc(100% - 20px); }
  .full-marketplace-head { grid-template-columns:1fr; padding:26px 20px; }
  .full-marketplace-list > article { grid-template-columns:54px minmax(0,1fr) 150px; }
  .marketplace-index-state { display:none; }
  .marketplace-index-actions { grid-template-columns:1fr; }
  .marketplace-index-actions a:last-child { display:none; }
}

@media (max-width:560px) {
  .full-marketplace-head { gap:22px; }
  .full-marketplace-stats { grid-template-columns:1fr; }
  .full-marketplace-stats article + article { border-top:1px solid rgba(255,255,255,.12); border-left:0; }
  .full-marketplace-search { grid-template-columns:1fr; padding:18px 14px; }
  .full-marketplace-search > div { display:none; }
  .full-marketplace-categories { padding:10px; }
  .full-marketplace-categories .enrich-visible { margin-left:0; }
  .full-marketplace-list { padding:5px 10px; }
  .full-marketplace-list > article { grid-template-columns:46px minmax(0,1fr); gap:10px; padding:11px 4px; }
  .marketplace-index-icon { width:44px; height:44px; }
  .marketplace-index-actions { grid-column:2; grid-template-columns:auto; justify-content:start; }
  .marketplace-index-actions a { min-height:30px; }
  .full-marketplace-pagination { gap:8px; }
  .full-marketplace-pagination button { padding:0 9px; }
  .full-marketplace > footer { align-items:flex-start; flex-direction:column; }
}

/* Final catalog layout override: one comparable product per row at every width. */
.product-estimator-panel { min-width:0; max-width:100%; overflow-x:hidden; container-type:inline-size; }
.product-estimator-panel .catalog-marketplace,
.product-estimator-panel .catalog-results,
.product-estimator-panel .catalog-results .retail-product-grid,
.product-estimator-panel .catalog-results .retail-product-card,
.product-estimator-panel .catalog-results .retail-product-body { min-width:0; max-width:100%; }
.product-estimator-panel .catalog-results .retail-product-grid { display:grid; grid-template-columns:1fr; gap:9px; }
.product-estimator-panel .catalog-results .retail-product-card { display:grid; grid-template-columns:150px minmax(0,1fr); min-height:154px; overflow:hidden; border:1px solid #d8e2e9; border-radius:13px; background:#fff; box-shadow:0 5px 18px rgba(24,40,60,.045); transform:none; }
.product-estimator-panel .catalog-results .retail-product-card:hover { transform:none; border-color:#a8c8e7; box-shadow:0 10px 26px rgba(24,40,60,.09); }
.product-estimator-panel .catalog-results .retail-product-image { width:150px; height:100%; min-height:154px; padding:12px; border-right:1px solid #e2e8ed; background:linear-gradient(145deg,#f8fafb,#edf2f5); }
.product-estimator-panel .catalog-results .retail-product-image img { max-height:128px; }
.product-estimator-panel .catalog-results .retail-product-body { display:grid; grid-template-columns:minmax(220px,1fr) minmax(240px,.85fr) 118px; grid-template-rows:auto auto 1fr; gap:5px 16px; align-items:center; padding:15px 16px; }
.product-estimator-panel .catalog-results .retail-product-category { grid-column:1; grid-row:1; font-size:.61rem; }
.product-estimator-panel .catalog-results .retail-product-body h3 { grid-column:1; grid-row:2; min-height:0; font-size:.88rem; line-height:1.3; }
.product-estimator-panel .catalog-results .retail-product-body p { grid-column:1; grid-row:3; height:auto; max-height:3em; font-size:.65rem; line-height:1.5; }
.product-estimator-panel .catalog-results .retail-product-specs { grid-column:2; grid-row:1 / 4; }
.product-estimator-panel .catalog-results .retail-product-price { grid-column:3; grid-row:1 / 3; }
.product-estimator-panel .catalog-results .retail-product-price strong { font-size:1.04rem; }
.product-estimator-panel .catalog-results .retail-product-actions { grid-column:3; grid-row:3; }
.product-estimator-panel .catalog-results .retail-product-price,
.product-estimator-panel .catalog-results .retail-product-actions { min-width:0; max-width:100%; }
.product-estimator-panel .catalog-results .retail-product-price strong { max-width:100%; overflow-wrap:anywhere; }
.product-estimator-panel .catalog-results .retail-product-actions button,
.product-estimator-panel .catalog-results .retail-product-actions a { min-width:0; max-width:100%; white-space:normal; }

@container (max-width:1100px) {
  .product-estimator-panel .catalog-marketplace { grid-template-columns:190px minmax(0,1fr); gap:10px; }
  .product-estimator-panel .catalog-results .retail-product-card { grid-template-columns:112px minmax(0,1fr); }
  .product-estimator-panel .catalog-results .retail-product-image { width:112px; min-height:172px; padding:9px; }
  .product-estimator-panel .catalog-results .retail-product-image img { max-height:116px; }
  .product-estimator-panel .catalog-results .retail-product-body { grid-template-columns:minmax(0,1fr) 112px; grid-template-rows:auto auto auto auto auto; gap:5px 10px; padding:12px; }
  .product-estimator-panel .catalog-results .retail-product-category { grid-column:1 / 3; grid-row:1; }
  .product-estimator-panel .catalog-results .retail-product-body h3 { grid-column:1 / 3; grid-row:2; }
  .product-estimator-panel .catalog-results .retail-product-body p { grid-column:1 / 3; grid-row:3; }
  .product-estimator-panel .catalog-results .retail-product-specs { grid-column:1 / 3; grid-row:4; align-self:auto; margin:2px 0; }
  .product-estimator-panel .catalog-results .retail-product-price { grid-column:1; grid-row:5; align-self:center; justify-self:start; justify-items:start; }
  .product-estimator-panel .catalog-results .retail-product-actions { grid-column:2; grid-row:5; grid-template-columns:1fr; }
}

@container (max-width:760px) {
  .product-estimator-panel .catalog-marketplace { grid-template-columns:1fr; }
  .product-estimator-panel .catalog-departments { max-height:230px; overflow:auto; }
  .product-estimator-panel .catalog-results-head { align-items:flex-start; flex-direction:column; }
}

@container (max-width:560px) {
  .product-estimator-panel .catalog-results .retail-product-card { grid-template-columns:88px minmax(0,1fr); }
  .product-estimator-panel .catalog-results .retail-product-image { width:88px; min-height:128px; padding:7px; }
  .product-estimator-panel .catalog-results .retail-product-body { grid-template-columns:minmax(0,1fr) auto; padding:10px; }
  .product-estimator-panel .catalog-results .retail-product-body p { display:none; }
  .product-estimator-panel .catalog-results .retail-product-specs > span:nth-child(2) { display:none; }
  .product-estimator-panel .catalog-results .retail-product-actions { grid-column:1 / 3; grid-row:6; grid-template-columns:1fr 1fr; }
}

@media (max-width:1240px) {
  .product-estimator-panel .catalog-results .retail-product-card { grid-template-columns:112px minmax(0,1fr); }
  .product-estimator-panel .catalog-results .retail-product-image { width:112px; min-height:172px; padding:9px; }
  .product-estimator-panel .catalog-results .retail-product-image img { max-height:116px; }
  .product-estimator-panel .catalog-results .retail-product-body { grid-template-columns:minmax(0,1fr) 116px; grid-template-rows:auto auto auto auto auto; gap:5px 10px; padding:12px; }
  .product-estimator-panel .catalog-results .retail-product-category { grid-column:1 / 3; grid-row:1; }
  .product-estimator-panel .catalog-results .retail-product-body h3 { grid-column:1 / 3; grid-row:2; }
  .product-estimator-panel .catalog-results .retail-product-body p { grid-column:1 / 3; grid-row:3; }
  .product-estimator-panel .catalog-results .retail-product-specs { grid-column:1 / 3; grid-row:4; align-self:auto; margin:2px 0; }
  .product-estimator-panel .catalog-results .retail-product-price { grid-column:1; grid-row:5; align-self:center; justify-self:start; justify-items:start; }
  .product-estimator-panel .catalog-results .retail-product-actions { grid-column:2; grid-row:5; grid-template-columns:1fr; }
}

@media (max-width:720px) {
  .product-estimator-panel .catalog-results .retail-product-card { grid-template-columns:88px minmax(0,1fr); }
  .product-estimator-panel .catalog-results .retail-product-image { width:88px; min-height:128px; padding:7px; }
  .product-estimator-panel .catalog-results .retail-product-body { padding:10px; }
  .product-estimator-panel .catalog-results .retail-product-body p { display:none; }
  .product-estimator-panel .catalog-results .retail-product-specs > span:nth-child(2) { display:none; }
  .product-estimator-panel .catalog-results .retail-product-actions { grid-column:1 / 3; grid-row:6; grid-template-columns:1fr 1fr; }
}

.standalone-product-page { min-height:100dvh; color:#15283a; background:radial-gradient(circle at 80% 8%,rgba(70,164,255,.13),transparent 28%),linear-gradient(180deg,#f7fafc,#eef3f6 66%,#e8eef2); }
.standalone-product-header { position:sticky; top:0; z-index:30; min-height:72px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; padding:0 clamp(18px,4vw,64px); border-bottom:1px solid rgba(187,202,213,.76); background:rgba(255,255,255,.9); backdrop-filter:blur(18px); box-shadow:0 7px 24px rgba(25,45,62,.06); }
.standalone-product-header > a:first-child { display:flex; align-items:center; gap:11px; color:#15283a; text-decoration:none; }
.standalone-product-header > a:first-child > span { width:42px; height:42px; display:grid; place-items:center; color:#fff; border-radius:12px; background:linear-gradient(145deg,#0b76e8,#1059b6); box-shadow:0 9px 20px rgba(11,118,232,.22); }
.standalone-product-header strong { font-size:.82rem; letter-spacing:.06em; }
.standalone-product-header strong em { color:#1476e8; font-style:normal; }
.standalone-product-header nav { display:flex; justify-content:center; gap:30px; }
.standalone-product-header nav a { color:#5e7182; font-size:.72rem; font-weight:750; text-decoration:none; }
.standalone-product-header nav a:hover { color:#0e6fd8; }
.product-header-cta { min-height:40px; display:flex; align-items:center; padding:0 17px; color:#fff; border-radius:10px; background:#1375e5; font-size:.7rem; font-weight:850; text-decoration:none; box-shadow:0 9px 20px rgba(19,117,229,.2); }
.product-breadcrumbs { width:min(1240px,calc(100% - 36px)); display:flex; align-items:center; gap:9px; margin:0 auto; padding:24px 0 18px; color:#8a9aa7; font-size:.66rem; }
.product-breadcrumbs a { color:#607587; text-decoration:none; }
.product-breadcrumbs strong { overflow:hidden; color:#1c3447; text-overflow:ellipsis; white-space:nowrap; }
.standalone-product-hero { width:min(1240px,calc(100% - 36px)); display:grid; grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr); overflow:hidden; margin:0 auto; border:1px solid rgba(202,214,222,.9); border-radius:22px; background:#fff; box-shadow:0 25px 70px rgba(24,45,62,.1); }
.standalone-product-media { position:relative; min-height:540px; display:grid; grid-template-rows:1fr auto; place-items:center; padding:42px; border-right:1px solid #dfe7ec; background:linear-gradient(145deg,#f7f9fa,#eaf0f3); }
.standalone-product-media > span { position:absolute; top:22px; left:22px; padding:8px 11px; color:#087660; border-radius:99px; background:#e2f6ee; font-size:.66rem; font-weight:850; }
.standalone-product-media img { width:100%; height:100%; max-height:440px; object-fit:contain; mix-blend-mode:multiply; }
.standalone-product-media small { justify-self:start; color:#8798a5; font-size:.62rem; letter-spacing:.07em; }
.standalone-product-copy { min-width:0; display:grid; align-content:center; padding:clamp(34px,5vw,76px); }
.standalone-product-copy > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#1476e8; font-size:.67rem; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.standalone-product-copy > div:first-child b { padding:6px 9px; color:#62788a; border-radius:7px; background:#edf2f5; font-size:.58rem; }
.standalone-product-copy h1 { max-width:760px; margin:14px 0 16px; font-family:"Trebuchet MS",sans-serif; font-size:clamp(2rem,3.3vw,3.6rem); line-height:1.02; letter-spacing:-.04em; }
.standalone-product-copy > p { max-width:740px; margin:0; color:#627789; font-size:.84rem; line-height:1.7; }
.standalone-product-price { display:flex; align-items:baseline; gap:8px; margin:26px 0; }
.standalone-product-price strong { color:#0b705f; font-size:2rem; letter-spacing:-.03em; }
.standalone-product-price span { color:#7b8d9b; font-size:.7rem; }
.standalone-product-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; border:1px solid #dce5ea; border-radius:12px; }
.standalone-product-facts > div { min-width:0; display:grid; gap:6px; padding:13px; }
.standalone-product-facts > div + div { border-left:1px solid #dce5ea; }
.standalone-product-facts small { color:#8797a4; font-size:.56rem; }
.standalone-product-facts strong { overflow:hidden; font-size:.69rem; text-overflow:ellipsis; white-space:nowrap; }
.standalone-product-actions { display:flex; align-items:center; gap:14px; margin-top:28px; }
.standalone-product-actions a { min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 20px; border:1px solid #d4dee5; border-radius:10px; color:#466277; font-size:.7rem; font-weight:850; text-decoration:none; }
.standalone-product-actions a:first-child { color:#fff; border-color:#1375e5; background:#1375e5; box-shadow:0 10px 24px rgba(19,117,229,.22); }
.standalone-product-project,.standalone-product-related { width:min(1240px,calc(100% - 36px)); margin:20px auto 0; padding:30px; border:1px solid #d7e1e7; border-radius:19px; background:rgba(255,255,255,.82); box-shadow:0 13px 40px rgba(27,47,62,.055); }
.standalone-product-project > header { display:flex; align-items:end; justify-content:space-between; gap:20px; padding-bottom:22px; }
.standalone-product-project > header span,.standalone-product-related > div:first-child > span { color:#1476e8; font-size:.6rem; font-weight:900; letter-spacing:.16em; }
.standalone-product-project h2,.standalone-product-related h2 { margin:6px 0 0; font-size:1.3rem; }
.standalone-product-project > header b { padding:8px 11px; color:#087660; border-radius:99px; background:#e5f5ef; font-size:.61rem; }
.standalone-product-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; border:1px solid #dbe4e9; border-radius:12px; background:#fff; }
.standalone-product-metrics article { min-width:0; display:grid; gap:8px; padding:17px; }
.standalone-product-metrics article + article { border-left:1px solid #dbe4e9; }
.standalone-product-metrics article.active { background:#eaf5ff; }
.standalone-product-metrics span { color:#7b8e9e; font-size:.61rem; }
.standalone-product-metrics strong { font-size:.8rem; }
.indexed-usage-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.indexed-usage-metrics article:nth-child(4),.indexed-usage-metrics article:nth-child(7) { border-left:0; }
.indexed-usage-metrics article:nth-child(n+4) { border-top:1px solid #dbe4e9; }
.indexed-usage-formula { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; margin-top:13px; padding:17px 19px; color:#17384d; border:1px solid #cfe1e8; border-radius:12px; background:linear-gradient(120deg,#f2f9f8,#f4f8ff); }
.indexed-usage-formula > svg { color:#0a8876; }
.indexed-usage-formula > span { min-width:0; display:grid; gap:4px; }
.indexed-usage-formula small { color:#0a8876; font-size:.61rem; font-weight:900; letter-spacing:.13em; }
.indexed-usage-formula strong { font-size:.78rem; }
.indexed-usage-formula em { color:#667f8f; font-size:.66rem; font-style:normal; }
.indexed-usage-formula a { padding:10px 13px; color:#fff; border-radius:9px; background:#0b7d70; font-size:.66rem; font-weight:850; text-decoration:none; white-space:nowrap; }
.standalone-product-empty { min-height:130px; display:grid; place-items:center; align-content:center; gap:7px; border:1px dashed #bfd0dc; border-radius:12px; color:#6d8191; text-align:center; }
.standalone-product-empty strong { color:#233d51; }
.standalone-product-empty span { font-size:.7rem; }
.standalone-product-empty a { color:#1476e8; font-size:.7rem; font-weight:850; text-decoration:none; }
.standalone-product-related { margin-bottom:42px; }
.standalone-product-related > div:last-child { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:20px; }
.standalone-product-related a { min-height:115px; display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; gap:5px 12px; align-content:center; padding:18px; color:#1b3448; border:1px solid #dce5ea; border-radius:12px; background:#fff; text-decoration:none; }
.standalone-product-related a:hover { border-color:#94bee8; box-shadow:0 10px 24px rgba(25,62,93,.08); }
.standalone-product-related i { grid-row:1 / 3; width:34px; height:34px; display:grid; place-items:center; color:#1476e8; border-radius:9px; background:#e8f3ff; font-size:.63rem; font-style:normal; font-weight:900; }
.standalone-product-related strong { font-size:.76rem; }
.standalone-product-related small { color:#728696; font-size:.62rem; }
.product-not-found { width:min(900px,calc(100% - 36px)); min-height:620px; display:grid; place-items:center; align-content:center; gap:15px; margin:30px auto; padding:50px; border:1px solid #d8e2e8; border-radius:22px; background:#fff; text-align:center; }
.product-not-found > span { color:#1476e8; font-size:.65rem; font-weight:900; letter-spacing:.15em; }
.product-not-found h1 { max-width:700px; margin:0; font-size:clamp(2rem,5vw,4rem); }
.product-not-found p { max-width:620px; color:#65798a; line-height:1.7; }
.product-not-found img { width:min(380px,90%); height:260px; object-fit:contain; }
.product-not-found > strong { color:#087660; }
.product-not-found > div { display:flex; gap:10px; }
.product-not-found > div a { padding:12px 16px; color:#fff; border-radius:9px; background:#1476e8; font-size:.7rem; font-weight:800; text-decoration:none; }
.product-sync-loader { width:min(420px,100%); display:grid!important; grid-template-columns:28px 1fr; align-items:center; gap:12px!important; padding:14px 18px; color:#406173; border:1px solid #d7e4eb; border-radius:12px; background:#f5f9fb; text-align:left; }
.product-sync-loader i { width:24px; height:24px; border:3px solid #c8dcf0; border-top-color:#1476e8; border-radius:50%; animation:product-sync-spin .8s linear infinite; }
.product-sync-loader span { font-size:.68rem; font-weight:800; }
@keyframes product-sync-spin { to { transform:rotate(360deg); } }
.marketplace-product-placeholder { width:min(360px,80%); aspect-ratio:1; display:grid; place-items:center; align-content:center; gap:14px; padding:40px; color:#617887; border:1px dashed #b9cad4; border-radius:24px; background:radial-gradient(circle at 50% 40%,#fff,#e8eff3); text-align:center; }
.marketplace-product-placeholder strong { width:92px; height:92px; display:grid; place-items:center; color:#fff; border-radius:22px; background:linear-gradient(145deg,#173f4a,#0c7568); box-shadow:0 18px 38px rgba(14,77,77,.2); font-family:Georgia,serif; font-size:2rem; }
.marketplace-product-placeholder span { max-width:220px; font-size:.65rem; line-height:1.55; }
.marketplace-documents { margin-top:22px; }
.marketplace-document-list { display:grid; gap:8px; }
.marketplace-document-list > a { min-height:68px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:13px; padding:11px 15px; color:#193447; border:1px solid #dce6eb; border-radius:11px; background:#fff; text-decoration:none; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.marketplace-document-list > a:hover { transform:translateY(-2px); border-color:#8ebae4; box-shadow:0 10px 24px rgba(31,70,101,.08); }
.marketplace-document-list > a > svg { width:20px; color:#1476e8; }
.marketplace-document-list > a > span { min-width:0; display:grid; gap:5px; }
.marketplace-document-list strong { overflow:hidden; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.marketplace-document-list small { color:#7a8e9c; font-size:.58rem; }
.marketplace-document-list b { padding:7px 9px; color:#11695d; border-radius:7px; background:#e6f5f1; font-size:.59rem; }
.marketplace-offer-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.marketplace-offer-list article { display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center; padding:16px; border:1px solid #dce5ea; border-radius:11px; background:#fff; }
.marketplace-offer-list article > span { color:#1476e8; font-size:.61rem; font-weight:900; text-transform:uppercase; }
.marketplace-offer-list article > strong { justify-self:end; color:#0b705f; font-size:.82rem; }
.marketplace-offer-list article > small { color:#7a8e9b; font-size:.57rem; }
.marketplace-offer-list article > a { justify-self:end; color:#1476e8; font-size:.58rem; font-weight:850; text-decoration:none; }
@media (max-width:800px) { .marketplace-offer-list { grid-template-columns:1fr; } }

@media (max-width:820px) {
  .standalone-product-header { grid-template-columns:1fr auto; min-height:64px; padding:0 14px; }
  .standalone-product-header nav { display:none; }
  .product-header-cta { min-height:38px; padding:0 12px; }
  .standalone-product-hero { grid-template-columns:1fr; }
  .standalone-product-media { min-height:360px; padding:28px; border-right:0; border-bottom:1px solid #dfe7ec; }
  .standalone-product-copy { padding:28px; }
  .standalone-product-facts { grid-template-columns:1fr 1fr; }
  .standalone-product-facts > div:nth-child(3) { border-left:0; border-top:1px solid #dce5ea; }
  .standalone-product-facts > div:nth-child(4) { border-top:1px solid #dce5ea; }
  .standalone-product-metrics { grid-template-columns:1fr 1fr; }
  .standalone-product-metrics article + article { border-left:0; border-top:1px solid #dbe4e9; }
  .standalone-product-metrics article:nth-child(even) { border-left:1px solid #dbe4e9; }
  .indexed-usage-metrics { grid-template-columns:1fr 1fr; }
  .indexed-usage-metrics article:nth-child(n) { border-left:0; border-top:1px solid #dbe4e9; }
  .indexed-usage-metrics article:nth-child(-n+2) { border-top:0; }
  .indexed-usage-metrics article:nth-child(even) { border-left:1px solid #dbe4e9; }
  .indexed-usage-formula { grid-template-columns:auto 1fr; }
  .indexed-usage-formula a { grid-column:1 / -1; justify-self:stretch; text-align:center; }
  .standalone-product-related > div:last-child { grid-template-columns:1fr; }
}

@media (max-width:520px) {
  .standalone-product-header strong { font-size:.69rem; }
  .product-header-cta { font-size:.59rem; }
  .product-breadcrumbs,.standalone-product-hero,.standalone-product-project,.standalone-product-related { width:calc(100% - 20px); }
  .product-breadcrumbs { padding-top:15px; }
  .standalone-product-hero { border-radius:16px; }
  .standalone-product-media { min-height:300px; padding:20px; }
  .standalone-product-copy { padding:22px 18px; }
  .standalone-product-copy h1 { font-size:1.8rem; }
  .standalone-product-actions { align-items:stretch; flex-direction:column; }
  .standalone-product-project,.standalone-product-related { padding:20px 14px; }
  .standalone-product-project > header { align-items:start; flex-direction:column; }
  .standalone-product-metrics { grid-template-columns:1fr; }
  .standalone-product-metrics article:nth-child(even) { border-left:0; }
  .indexed-usage-metrics { grid-template-columns:1fr; }
  .indexed-usage-metrics article:nth-child(n) { border-left:0; border-top:1px solid #dbe4e9; }
  .indexed-usage-metrics article:first-child { border-top:0; }
  .indexed-usage-formula { grid-template-columns:1fr; padding:16px; }
  .indexed-usage-formula > svg { display:none; }
  .product-not-found { width:calc(100% - 20px); min-height:540px; padding:30px 18px; }
  .product-not-found > div { align-items:stretch; flex-direction:column; }
}

/* Manufacturer studios */
.manufacturer-studio { --studio:#0c7394; color:#142c3b; background:linear-gradient(180deg,#edf3f5,#fafbfb 650px,#edf2f4); }
.studio-ytong { --studio:#1763ae; }.studio-balex-metal { --studio:#b54c2c; }.studio-atlas { --studio:#cf3c31; }.studio-fakro { --studio:#15854c; }.studio-knauf { --studio:#0876c5; }.studio-wkret-met { --studio:#c92e37; }
.manufacturer-studio-hero { width:min(1440px,calc(100% - 48px)); min-height:560px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; margin:28px auto 0; border:1px solid #d4dfe4; border-radius:25px; background:#fff; box-shadow:0 28px 80px rgba(20,48,63,.12); }
.manufacturer-studio-copy { display:grid; align-content:center; padding:clamp(38px,6vw,86px); }
.manufacturer-studio-copy > span,.manufacturer-studio-products header span,.manufacturer-calculator-form > span,.manufacturer-calculator-result > span,.manufacturer-studio-docs header span { color:var(--studio); font-size:.62rem; font-weight:900; letter-spacing:.16em; }
.manufacturer-studio-logo { display:flex; align-items:center; gap:12px; margin:23px 0 14px; }.manufacturer-studio-logo i { min-width:62px; height:40px; display:grid; place-items:center; padding:0 10px; color:#fff; border-radius:8px; background:var(--studio); font-size:.68rem; font-style:normal; font-weight:900; }.manufacturer-studio-logo strong { font-size:1rem; }
.manufacturer-studio-copy h1 { max-width:720px; margin:0; font-family:Georgia,serif; font-size:clamp(2.7rem,5vw,5.5rem); font-weight:500; line-height:.95; letter-spacing:-.055em; }.manufacturer-studio-copy p { max-width:670px; margin:23px 0 29px; color:#627b87; font-size:.8rem; line-height:1.7; }
.manufacturer-studio-copy > div:last-child { display:flex; flex-wrap:wrap; gap:9px; }.manufacturer-studio-copy > div:last-child a { min-height:46px; display:flex; align-items:center; padding:0 18px; color:#3d5b6b; border:1px solid #cfdae0; border-radius:9px; background:#fff; font-size:.66rem; font-weight:850; text-decoration:none; }.manufacturer-studio-copy > div:last-child a:first-child { color:#fff; border-color:var(--studio); background:var(--studio); }
.manufacturer-system-visual { position:relative; min-height:560px; overflow:hidden; display:grid; align-content:end; padding:48px; color:#fff; background:radial-gradient(circle at 75% 15%,rgba(255,255,255,.18),transparent 34%),linear-gradient(145deg,color-mix(in srgb,var(--studio) 80%,#17333c),#142c35); isolation:isolate; }.manufacturer-system-visual .visual-grid { position:absolute; inset:0; opacity:.14; background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:34px 34px; }
.manufacturer-system-visual .visual-layer { position:absolute; left:14%; right:13%; height:19%; border:1px solid rgba(255,255,255,.25); box-shadow:0 24px 50px rgba(0,0,0,.22); transform:skewY(-7deg); }.manufacturer-system-visual .layer-one { top:18%; background:linear-gradient(110deg,#edf1f0,#94a6aa); }.manufacturer-system-visual .layer-two { top:34%; left:22%; right:9%; background:linear-gradient(110deg,color-mix(in srgb,var(--studio) 58%,#fff),var(--studio)); }.manufacturer-system-visual .layer-three { top:50%; left:9%; right:23%; background:repeating-linear-gradient(90deg,#dce6e2 0 20px,#b9c7c2 20px 40px); }
.manufacturer-system-visual > span,.manufacturer-system-visual > b,.manufacturer-system-visual > small { position:relative; z-index:2; justify-self:start; }.manufacturer-system-visual > span { margin-top:335px; color:#78d7c7; font-size:.61rem; font-weight:900; letter-spacing:.13em; }.manufacturer-system-visual > b { margin:7px 0 3px; font-family:Georgia,serif; font-size:1.55rem; }.manufacturer-system-visual > small { color:#a9c0c5; font-size:.59rem; }
.manufacturer-category-strip { width:min(1440px,calc(100% - 48px)); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); overflow:hidden; margin:15px auto 0; border:1px solid #d4dfe4; border-radius:13px; background:#fff; }.manufacturer-category-strip span { min-width:0; display:grid; grid-template-columns:auto 1fr; gap:8px; padding:15px; color:#4d6774; font-size:.58rem; font-weight:800; }.manufacturer-category-strip span + span { border-left:1px solid #e0e8eb; }.manufacturer-category-strip i { color:var(--studio); font-size:.51rem; font-style:normal; }
.manufacturer-studio-products,.manufacturer-calculator,.manufacturer-studio-docs { width:min(1440px,calc(100% - 48px)); margin:46px auto 0; }.manufacturer-studio-products > header,.manufacturer-studio-docs > header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:19px; }.manufacturer-studio-products h2,.manufacturer-studio-docs h2,.manufacturer-calculator h2 { margin:7px 0 0; font-family:Georgia,serif; font-size:clamp(2rem,3.4vw,3.6rem); font-weight:500; letter-spacing:-.045em; }.manufacturer-studio-products > header > strong { padding:8px 11px; color:var(--studio); border:1px solid #d1dfe3; border-radius:99px; background:#fff; font-size:.58rem; }
.manufacturer-studio-products > div { overflow:hidden; border:1px solid #d5e0e4; border-radius:16px; background:#fff; }.manufacturer-studio-products article { min-width:0; display:grid; grid-template-columns:68px minmax(0,1fr) auto; align-items:center; gap:18px; padding:17px 19px; }.manufacturer-studio-products article + article { border-top:1px solid #e0e8eb; }.studio-product-symbol { width:60px; height:60px; display:grid; place-items:center; align-content:center; gap:3px; color:#fff; border-radius:13px; background:linear-gradient(145deg,var(--studio),#17343e); }.studio-product-symbol span { font-size:.58rem; font-weight:900; }.studio-product-symbol i { opacity:.7; font-size:.48rem; font-style:normal; }
.manufacturer-studio-products article section { min-width:0; }.manufacturer-studio-products article section > span { color:var(--studio); font-size:.53rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.manufacturer-studio-products h3 { margin:4px 0; font-size:.84rem; }.manufacturer-studio-products article p { margin:0; color:#6b808b; font-size:.62rem; line-height:1.5; }.manufacturer-studio-products article section > div { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }.manufacturer-studio-products article small { padding:5px 7px; color:#59727e; border-radius:5px; background:#eef3f5; font-size:.5rem; }.manufacturer-studio-products article > a { padding:9px 11px; color:var(--studio); border:1px solid #d5e0e4; border-radius:8px; font-size:.55rem; font-weight:850; text-decoration:none; }
.manufacturer-calculator { display:grid; grid-template-columns:.85fr 1.15fr; overflow:hidden; border:1px solid #cfdbdf; border-radius:21px; background:#fff; box-shadow:0 18px 55px rgba(22,47,61,.08); }.manufacturer-calculator-form { display:grid; gap:12px; align-content:center; padding:clamp(30px,5vw,66px); background:linear-gradient(145deg,#f8fafb,#edf3f5); }.manufacturer-calculator-form h2 { margin-bottom:13px; }.manufacturer-calculator-form label { position:relative; display:grid; gap:7px; color:#5a727f; font-size:.57rem; font-weight:800; }.manufacturer-calculator-form input,.manufacturer-calculator-form select { width:100%; min-height:48px; padding:0 46px 0 13px; color:#173341; border:1px solid #cddade; border-radius:9px; background:#fff; font-size:.72rem; outline:none; }.manufacturer-calculator-form label b { position:absolute; right:13px; bottom:16px; color:#78909b; font-size:.55rem; }.manufacturer-calculator-form button { min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; margin-top:7px; color:#fff; border:0; border-radius:9px; background:var(--studio); font-size:.64rem; font-weight:900; }
.manufacturer-calculator-result { display:grid; align-content:center; padding:clamp(35px,6vw,78px); color:#eaf7f5; background:radial-gradient(circle at 85% 10%,color-mix(in srgb,var(--studio) 40%,transparent),transparent 42%),linear-gradient(135deg,#112e38,#183d45); }.manufacturer-calculator-result > span { color:#6bd4c1; }.manufacturer-calculator-result > strong { margin:12px 0 8px; color:#fff; font-family:Georgia,serif; font-size:clamp(2.1rem,4.2vw,4.5rem); font-weight:500; line-height:1; }.manufacturer-calculator-result > p { margin:0 0 20px; color:#9eb5ba; font-size:.61rem; line-height:1.6; }.manufacturer-calculator-result > div { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:10px; }.manufacturer-calculator-result article { display:grid; gap:5px; padding:13px; }.manufacturer-calculator-result article:nth-child(even) { border-left:1px solid rgba(255,255,255,.12); }.manufacturer-calculator-result article:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.12); }.manufacturer-calculator-result article span { color:#8ea9af; font-size:.52rem; }.manufacturer-calculator-result article b { color:#fff; font-size:.68rem; }
.manufacturer-studio-docs { margin-bottom:56px; padding:32px; border:1px solid #d5e0e4; border-radius:17px; background:#fff; }.manufacturer-studio-docs > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.manufacturer-studio-docs a { min-width:0; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:11px; padding:13px; color:#183443; border:1px solid #dce5e9; border-radius:9px; text-decoration:none; }.manufacturer-studio-docs a > i { width:40px; height:40px; display:grid; place-items:center; color:#fff; border-radius:8px; background:var(--studio); font-size:.54rem; font-style:normal; font-weight:900; }.manufacturer-studio-docs a > span { min-width:0; display:grid; gap:4px; }.manufacturer-studio-docs a strong { overflow:hidden; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }.manufacturer-studio-docs a small,.manufacturer-studio-docs a > b { color:#788f9a; font-size:.52rem; }.manufacturer-studio-docs a > b { color:var(--studio); }.manufacturer-studio-docs > p { margin:16px 0 0; color:#7b9099; font-size:.54rem; line-height:1.55; }
@media (max-width:1050px) { .manufacturer-studio-hero { grid-template-columns:1fr; }.manufacturer-system-visual { min-height:450px; }.manufacturer-category-strip { grid-template-columns:repeat(3,1fr); }.manufacturer-category-strip span:nth-child(4) { border-left:0; }.manufacturer-category-strip span:nth-child(n+4) { border-top:1px solid #e0e8eb; }.manufacturer-calculator { grid-template-columns:1fr; }.manufacturer-studio-docs > div { grid-template-columns:1fr; } }
@media (max-width:680px) { .manufacturer-studio-hero,.manufacturer-category-strip,.manufacturer-studio-products,.manufacturer-calculator,.manufacturer-studio-docs { width:calc(100% - 20px); }.manufacturer-studio-hero { margin-top:10px; border-radius:16px; }.manufacturer-studio-copy { padding:32px 19px; }.manufacturer-studio-copy h1 { font-size:2.45rem; }.manufacturer-studio-copy > div:last-child { flex-direction:column; }.manufacturer-studio-copy > div:last-child a { justify-content:center; }.manufacturer-system-visual { min-height:360px; padding:25px; }.manufacturer-system-visual > span { margin-top:250px; }.manufacturer-category-strip { grid-template-columns:1fr 1fr; }.manufacturer-category-strip span:nth-child(3),.manufacturer-category-strip span:nth-child(5) { border-left:0; }.manufacturer-category-strip span:nth-child(n+3) { border-top:1px solid #e0e8eb; }.manufacturer-studio-products { margin-top:32px; }.manufacturer-studio-products > header { align-items:start; flex-direction:column; }.manufacturer-studio-products article { grid-template-columns:50px minmax(0,1fr); gap:11px; padding:13px 10px; }.studio-product-symbol { width:48px; height:48px; }.manufacturer-studio-products article > a { grid-column:2; justify-self:start; }.manufacturer-calculator-form,.manufacturer-calculator-result { padding:28px 17px; }.manufacturer-calculator-result > div { grid-template-columns:1fr; }.manufacturer-calculator-result article:nth-child(even) { border-left:0; }.manufacturer-calculator-result article + article { border-top:1px solid rgba(255,255,255,.12); }.manufacturer-studio-docs { padding:22px 13px; }.manufacturer-studio-docs a { grid-template-columns:36px minmax(0,1fr); }.manufacturer-studio-docs a > i { width:36px; height:36px; }.manufacturer-studio-docs a > b { grid-column:2; } }

/* Linked product departments and complete brand profiles */
.detail-layer-track a { min-height:190px; display:flex; flex-direction:column; padding:19px; color:var(--portal-ink); background:#fff; text-decoration:none; transition:background .18s ease,color .18s ease,transform .18s ease; }
.detail-layer-track a + a { border-left:1px solid var(--portal-line); }
.detail-layer-track a:hover { z-index:2; color:#fff; background:linear-gradient(145deg,#126f66,#18434a); transform:translateY(-4px); box-shadow:0 18px 38px rgba(18,66,70,.17); }
.detail-layer-track a i { color:var(--portal-green); font:400 .65rem Georgia,serif; }
.detail-layer-track a:hover i { color:#7ee0d0; }
.detail-layer-track a strong { margin:auto 0 5px; font:500 1rem Georgia,serif; }
.detail-layer-track a small { color:#7e9192; font-size:.55rem; }
.detail-layer-track a:hover small { color:#b7d0d0; }
.detail-layer-track a span { margin-top:18px; align-self:flex-end; color:#9dadae; }

.subcategory-page,.brand-hub { color:#183440; background:linear-gradient(180deg,#edf3f3,#f9fbfa 720px,#edf3f2); }
.subcategory-hero,.brand-hub-hero { width:min(1440px,calc(100% - 48px)); min-height:500px; display:grid; grid-template-columns:minmax(0,1.25fr) 360px; gap:44px; align-items:center; margin:28px auto 0; padding:clamp(34px,6vw,82px); overflow:hidden; border:1px solid #d1dfdf; border-radius:25px; background:radial-gradient(circle at 85% 12%,rgba(41,172,148,.16),transparent 32%),#fff; box-shadow:0 28px 75px rgba(20,54,61,.1); }
.subcategory-hero nav { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:42px; color:#819296; font-size:.58rem; }.subcategory-hero nav a { color:#3d6c70; text-decoration:none; }.subcategory-hero > div > span,.brand-hub-hero > div > span,.brand-system-catalog header > span,.brand-knowledge header > span,.subcategory-system-section header > span,.subcategory-brand-section header > span,.subcategory-products header span { color:#118b78; font-size:.62rem; font-weight:900; letter-spacing:.16em; }
.subcategory-hero h1,.brand-hub-hero h1 { margin:10px 0 18px; font:500 clamp(3rem,6.2vw,6.4rem)/.94 Georgia,serif; letter-spacing:-.06em; }.subcategory-hero p,.brand-hub-hero p { max-width:780px; margin:0; color:#637b81; font-size:.78rem; line-height:1.75; }
.subcategory-hero > div > div,.brand-hub-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }.subcategory-hero button,.subcategory-hero > div > div a,.brand-hub-actions button,.brand-hub-actions a { min-height:46px; display:flex; align-items:center; padding:0 18px; color:#fff; border:0; border-radius:9px; background:#118474; font-size:.64rem; font-weight:850; text-decoration:none; }.subcategory-hero > div > div a,.brand-hub-actions a { color:#365b64; border:1px solid #cedbdd; background:#fff; }
.subcategory-hero > aside,.brand-hub-hero > aside { display:grid; overflow:hidden; border:1px solid #d5e1e1; border-radius:15px; background:rgba(244,249,248,.92); }.subcategory-hero > aside > small { padding:15px 19px; color:#73888c; border-bottom:1px solid #dbe5e5; font-size:.53rem; font-weight:900; }.subcategory-hero > aside article,.brand-hub-hero > aside article { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:13px; padding:20px; }.subcategory-hero > aside article + article,.brand-hub-hero > aside article + article { border-top:1px solid #dbe5e5; }.subcategory-hero > aside strong,.brand-hub-hero > aside strong { color:#0f776b; font:500 1.85rem Georgia,serif; }.subcategory-hero > aside span,.brand-hub-hero > aside span { color:#6f8488; font-size:.61rem; }
.subcategory-system-section,.subcategory-brand-section,.subcategory-products,.brand-system-catalog,.brand-product-catalog,.brand-knowledge { width:min(1440px,calc(100% - 48px)); margin:54px auto 0; }.subcategory-system-section header,.subcategory-brand-section header,.brand-system-catalog header,.brand-knowledge header { max-width:840px; margin-bottom:22px; }.subcategory-system-section h2,.subcategory-brand-section h2,.subcategory-products h2,.brand-system-catalog h2,.brand-product-catalog h2,.brand-knowledge h2 { margin:7px 0; font:500 clamp(2rem,3.7vw,4rem) Georgia,serif; letter-spacing:-.045em; }.subcategory-system-section > div,.brand-system-catalog > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }.subcategory-system-section article,.brand-system-catalog article { position:relative; min-height:330px; display:flex; flex-direction:column; padding:25px; overflow:hidden; border:1px solid #d4e0e0; border-radius:14px; background:#fff; }.subcategory-system-section article > span,.brand-system-catalog article > span { color:#128575; font-size:.55rem; font-weight:900; }.subcategory-system-section h3,.brand-system-catalog h3 { margin:45px 0 10px; font:500 1.28rem Georgia,serif; }.subcategory-system-section article p,.brand-system-catalog article p { margin:0 0 14px; color:#6a7f85; font-size:.65rem; line-height:1.6; }.subcategory-system-section article > div,.brand-system-catalog article > div { display:flex; flex-wrap:wrap; gap:5px; }.subcategory-system-section article small,.brand-system-catalog article small { padding:5px 7px; color:#536f74; border-radius:5px; background:#edf4f3; font-size:.5rem; }.subcategory-system-section article button,.brand-system-catalog article a { min-height:39px; display:flex; align-items:center; justify-content:center; margin-top:auto; color:#fff; border:0; border-radius:8px; background:#147e70; font-size:.58rem; font-weight:850; text-decoration:none; }
.subcategory-brand-section > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }.subcategory-brand-section > div > a { min-height:150px; display:grid; grid-template-columns:1fr auto; align-content:center; gap:8px; padding:20px; color:#183740; border:1px solid #d4e1e1; border-radius:12px; background:#fff; text-decoration:none; }.subcategory-brand-section .brand-wordmark { grid-column:1/-1; }.subcategory-brand-section > div > a > span { color:#71868b; font-size:.56rem; }.subcategory-brand-section > div > a > strong { color:#0f806f; font-size:.54rem; }
.subcategory-products { margin-bottom:48px; overflow:hidden; border:1px solid #d4e0e0; border-radius:18px; background:#fff; }.subcategory-products > header,.brand-product-catalog > header { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:28px; border-bottom:1px solid #dbe5e5; }.subcategory-products > header > strong { color:#117d6e; font-size:.65rem; }.subcategory-products > div { padding:9px 18px; }.subcategory-products article,.brand-product-list article { min-width:0; display:grid; grid-template-columns:58px minmax(280px,1fr) 170px 140px; align-items:center; gap:15px; padding:13px 10px; border-bottom:1px solid #e0e8e8; }.subcategory-products article > div:first-child,.brand-product-photo { width:54px; height:54px; position:relative; display:grid; place-items:center; overflow:hidden; color:#19635f; border-radius:10px; background:#e7f1ef; font-size:.65rem; font-weight:900; }.subcategory-products article img,.brand-product-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }.subcategory-products article section { min-width:0; }.subcategory-products article section > span,.brand-product-list article > div:nth-child(2) > span { color:#118675; font-size:.52rem; font-weight:850; text-transform:uppercase; }.subcategory-products article h3,.brand-product-list h3 { overflow:hidden; margin:4px 0; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }.subcategory-products article small,.brand-product-list small { color:#829396; font-size:.51rem; }.subcategory-products article aside,.brand-product-list aside { display:grid; gap:6px; }.subcategory-products article aside span,.brand-product-list aside span { color:#6c8387; font-size:.51rem; }.subcategory-products article aside strong,.brand-product-list aside strong { font-size:.64rem; }.subcategory-products article > a,.brand-product-list article > a { padding:10px; color:#fff; border-radius:8px; background:#147e70; font-size:.55rem; font-weight:850; text-align:center; text-decoration:none; }
.subcategory-next { width:min(1440px,calc(100% - 48px)); display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 auto 56px; padding:24px; border-radius:14px; background:#173a42; }.subcategory-next a { color:#b4cdcd; font-size:.61rem; text-decoration:none; }.subcategory-next button { min-height:42px; padding:0 15px; color:#fff; border:0; border-radius:8px; background:#14917e; font-size:.61rem; font-weight:850; }

.brand-hub-logo { align-self:start; display:grid; justify-items:center; gap:8px; }.brand-hub-logo i { width:92px; height:92px; display:grid; place-items:center; color:#fff; border-radius:22px; background:linear-gradient(145deg,#118d79,#173f47); font:500 1.45rem Georgia,serif; box-shadow:0 20px 38px rgba(17,91,88,.2); }.brand-hub-logo span { color:#6d8588; font-size:.48rem; font-weight:900; }.brand-hub-hero { grid-template-columns:130px minmax(0,1fr) 310px; }.brand-hub-tabs { width:min(1440px,calc(100% - 48px)); display:flex; gap:5px; position:sticky; top:72px; z-index:10; margin:14px auto 0; padding:7px; border:1px solid #d3e0e0; border-radius:13px; background:rgba(255,255,255,.94); backdrop-filter:blur(18px); }.brand-hub-tabs button { min-height:43px; padding:0 17px; color:#60777d; border:0; border-radius:8px; background:transparent; font-size:.63rem; font-weight:850; }.brand-hub-tabs button.active { color:#fff; background:#147e70; }.brand-hub-tabs b { margin-left:7px; opacity:.7; }.brand-system-catalog header p,.brand-knowledge header p { color:#6d8387; font-size:.68rem; }.brand-system-catalog article > i { position:absolute; right:18px; top:16px; color:#d4e3e1; font:500 1.5rem Georgia,serif; }.brand-product-catalog { margin-bottom:50px; overflow:hidden; border:1px solid #d4e0e0; border-radius:18px; background:#fff; }.brand-product-catalog label { display:grid; gap:6px; }.brand-product-catalog label span { color:#70868a; font-size:.53rem; font-weight:850; }.brand-product-catalog input { width:min(360px,50vw); min-height:44px; padding:0 13px; border:1px solid #ccdada; border-radius:8px; font-size:.65rem; }.brand-product-list { padding:9px 18px; }.brand-product-list h3 a { color:#18343d; text-decoration:none; }.brand-catalog-status,.brand-catalog-empty { min-height:250px; display:grid; place-items:center; align-content:center; gap:9px; padding:34px; color:#678084; text-align:center; }.brand-catalog-empty strong { color:#173840; font:500 1.3rem Georgia,serif; }.brand-catalog-empty p { max-width:650px; margin:0; font-size:.65rem; line-height:1.65; }.brand-catalog-empty button { min-height:40px; padding:0 14px; color:#fff; border:0; border-radius:8px; background:#147e70; font-size:.6rem; font-weight:850; }.brand-knowledge { padding-bottom:56px; }.brand-knowledge > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }.brand-knowledge a { min-height:280px; display:grid; grid-template-columns:1fr auto; align-content:start; padding:25px; color:#193740; border:1px solid #d4e0e0; border-radius:14px; background:#fff; text-decoration:none; }.brand-knowledge a > span { color:#118776; font-size:.54rem; font-weight:900; }.brand-knowledge a > i { color:#b9cac8; font:500 1.2rem Georgia,serif; }.brand-knowledge h3 { grid-column:1/-1; margin:55px 0 10px; font:500 1.2rem Georgia,serif; }.brand-knowledge p { grid-column:1/-1; margin:0; color:#6a8085; font-size:.64rem; line-height:1.6; }.brand-knowledge strong { grid-column:1/-1; align-self:end; margin-top:24px; color:#118474; font-size:.58rem; }

@media (max-width:1050px) { .subcategory-hero,.brand-hub-hero { grid-template-columns:1fr; }.brand-hub-logo { justify-self:start; }.subcategory-system-section > div,.brand-system-catalog > div,.subcategory-brand-section > div { grid-template-columns:repeat(2,1fr); }.brand-knowledge > div { grid-template-columns:repeat(2,1fr); }.subcategory-products article,.brand-product-list article { grid-template-columns:54px minmax(0,1fr) 150px; }.subcategory-products article > a,.brand-product-list article > a { grid-column:2; justify-self:start; }.detail-layer-track a:nth-child(4) { border-left:0; }.detail-layer-track a:nth-child(n+4) { border-top:1px solid var(--portal-line); } }
@media (max-width:680px) { .subcategory-hero,.brand-hub-hero,.subcategory-system-section,.subcategory-brand-section,.subcategory-products,.subcategory-next,.brand-hub-tabs,.brand-system-catalog,.brand-product-catalog,.brand-knowledge { width:calc(100% - 20px); }.subcategory-hero,.brand-hub-hero { min-height:0; margin-top:10px; padding:31px 18px; border-radius:16px; }.subcategory-hero nav { margin-bottom:28px; }.subcategory-hero h1,.brand-hub-hero h1 { font-size:2.7rem; }.subcategory-hero > div > div,.brand-hub-actions { align-items:stretch; flex-direction:column; }.subcategory-hero button,.subcategory-hero > div > div a,.brand-hub-actions button,.brand-hub-actions a { justify-content:center; }.brand-hub-tabs { top:60px; overflow-x:auto; }.brand-hub-tabs button { flex:0 0 auto; }.subcategory-system-section > div,.brand-system-catalog > div,.subcategory-brand-section > div,.brand-knowledge > div { grid-template-columns:1fr; }.subcategory-system-section article,.brand-system-catalog article { min-height:285px; }.subcategory-products > header,.brand-product-catalog > header { align-items:stretch; flex-direction:column; padding:21px 15px; }.brand-product-catalog input { width:100%; }.subcategory-products > div,.brand-product-list { padding:7px 10px; }.subcategory-products article,.brand-product-list article { grid-template-columns:46px minmax(0,1fr); gap:10px; }.subcategory-products article > div:first-child,.brand-product-photo { width:44px; height:44px; }.subcategory-products article aside,.brand-product-list aside { grid-column:2; }.subcategory-products article h3,.brand-product-list h3 { white-space:normal; }.subcategory-next { align-items:stretch; flex-direction:column; }.detail-layer-track a { min-height:150px; }.detail-layer-track a:nth-child(odd) { border-left:0; }.detail-layer-track a:nth-child(n+3) { border-top:1px solid var(--portal-line); } }

.brand-family-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:20px; }
.brand-family-list article { min-height:260px; display:flex; flex-direction:column; padding:22px; border:1px solid #d7e2e2; border-radius:12px; background:#f9fbfb; }
.brand-family-list article > span { color:#118675; font-size:.54rem; font-weight:900; }
.brand-family-list h3 { margin:42px 0 9px; font:500 1.15rem Georgia,serif; }
.brand-family-list p { margin:0; color:#697f84; font-size:.64rem; line-height:1.6; }
.brand-family-list small { margin-top:auto; color:#819295; font-size:.51rem; }
.brand-family-list a { margin-top:12px; color:#118373; font-size:.57rem; font-weight:850; text-decoration:none; }
.manufacturer-editorial { width:min(1440px,calc(100% - 48px)); margin:0 auto 56px; }
.manufacturer-editorial > header { max-width:820px; margin-bottom:20px; }
.manufacturer-editorial > header > span { color:var(--studio); font-size:.62rem; font-weight:900; letter-spacing:.16em; }
.manufacturer-editorial h2 { margin:7px 0; font:500 clamp(2rem,3.7vw,4rem) Georgia,serif; letter-spacing:-.045em; }
.manufacturer-editorial header p { color:#70848d; font-size:.66rem; }
.manufacturer-editorial > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.manufacturer-editorial a { min-height:290px; display:grid; grid-template-columns:1fr auto; align-content:start; padding:25px; color:#183541; border:1px solid #d5e0e4; border-radius:14px; background:#fff; text-decoration:none; }
.manufacturer-editorial a > span { color:var(--studio); font-size:.53rem; font-weight:900; }
.manufacturer-editorial a > i { color:#c3d1d4; font:500 1.25rem Georgia,serif; }
.manufacturer-editorial h3 { grid-column:1/-1; margin:56px 0 10px; font:500 1.2rem Georgia,serif; }
.manufacturer-editorial a p { grid-column:1/-1; margin:0; color:#6b8089; font-size:.63rem; line-height:1.6; }
.manufacturer-editorial a strong { grid-column:1/-1; align-self:end; margin-top:26px; color:var(--studio); font-size:.58rem; }
@media (max-width:1050px) { .brand-family-list,.manufacturer-editorial > div { grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px) { .manufacturer-editorial { width:calc(100% - 20px); }.brand-family-list,.manufacturer-editorial > div { grid-template-columns:1fr; }.brand-family-list { padding:12px; } }

/* Editable 2D wall geometry */
.wall-hit-target { cursor:pointer; pointer-events:stroke; }
.wall-edit-handles { filter:drop-shadow(0 3px 5px rgba(13,82,146,.24)); }
.wall-handle-halo { fill:rgba(30,126,239,.16); stroke:#ffffff; stroke-width:.035; vector-effect:non-scaling-stroke; pointer-events:none; }
.wall-handle { fill:#ffffff; stroke:#1675e8; stroke-width:.055; vector-effect:non-scaling-stroke; cursor:grab; touch-action:none; }
.wall-handle:active { fill:#1675e8; stroke:#ffffff; cursor:grabbing; }
.wall-geometry-fields { margin-bottom:10px; padding-bottom:12px; border-bottom:1px solid #dce5eb; }
.wall-coordinate-section { display:grid; gap:10px; margin:12px 0; padding:12px; border:1px solid #d9e4ec; border-radius:12px; background:linear-gradient(145deg,#f8fbfd,#eef5fa); }
.wall-coordinate-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.wall-coordinate-grid .field { gap:5px; }
.wall-coordinate-grid .field span { font-size:.64rem; }
.wall-coordinate-grid .field input { min-width:0; height:38px; padding:0 9px; background:#fff; }
.wall-designer-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.wall-designer-tools button { min-width:0; min-height:36px; padding:7px 8px; color:#31506a; border:1px solid #cbdbe7; border-radius:8px; background:#fff; font-size:.67rem; font-weight:800; line-height:1.2; }
.wall-designer-tools button:hover { color:#066bd4; border-color:#8fc2f2; background:#edf6ff; }
.wall-designer-tools button:last-child { grid-column:1 / -1; color:#fff; border-color:#1477e7; background:#1477e7; }

/* Openings anchored to walls */
.editor-svg .opening { cursor:grab; touch-action:none; }
.editor-svg .opening:active { cursor:grabbing; }
.editor-svg .opening > rect { transition:fill .16s,stroke .16s; }
.editor-svg .opening-selected > rect { filter:drop-shadow(0 .025px .035px rgba(12,103,202,.34)); }
.door-swing-symbol { pointer-events:none; }
.door-swing-symbol line,.door-swing-symbol path { stroke:#1675e8; stroke-width:.035; stroke-linecap:round; opacity:.9; }
.door-swing-symbol path { stroke-dasharray:.08 .045; opacity:.68; }
.door-swing-symbol circle { fill:#fff; stroke:#1675e8; stroke-width:.025; }
.window-symbol,.garage-symbol { pointer-events:none; }
.window-symbol line { stroke:#087d69; stroke-width:.025; }
.garage-symbol line { stroke:#f2c17d; stroke-width:.022; opacity:.78; }
.opening-edit-indicator { pointer-events:none; filter:drop-shadow(0 .025px .035px rgba(8,78,148,.28)); }
.opening-edit-indicator circle { fill:#fff; stroke:#1675e8; stroke-width:.035; }
.opening-edit-indicator line { stroke:#1675e8; stroke-width:.025; stroke-linecap:round; }
.opening-edit-indicator text { fill:#173b5d; font-size:.17px; font-weight:850; paint-order:stroke; stroke:#fff; stroke-width:.045px; }

.opening-properties-card { gap:12px; border-color:#cddfec; background:linear-gradient(145deg,#fff,#f5f9fc); }
.opening-position-control { padding:11px 12px; border:1px solid #d8e4ec; border-radius:10px; background:#f7fafc; }
.opening-position-control input[type="range"] { width:100%; height:22px; padding:0; border:0; accent-color:#1675e8; box-shadow:none; cursor:ew-resize; }
.opening-clearance-fields { padding-bottom:11px; border-bottom:1px solid #dce6ed; }
.door-direction-fields { padding:11px; border:1px solid #cfe0ed; border-radius:10px; background:#edf6ff; }
.opening-position-actions { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:6px; }
.opening-position-actions button { min-height:38px; padding:6px; color:#31506a; border:1px solid #cbdbe7; border-radius:8px; background:#fff; font-size:.66rem; font-weight:850; }
.opening-position-actions button:nth-child(2) { color:#fff; border-color:#1675e8; background:#1675e8; }
.opening-position-actions button:hover { border-color:#77b5ee; background:#edf6ff; color:#0967c7; }
.opening-position-actions button:nth-child(2):hover { color:#fff; background:#0d68cc; }
.opening-takeoff-note { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; color:#54706b; border:1px solid #cce2db; border-radius:10px; background:#eef8f5; }
.opening-takeoff-note span { font-size:.65rem; }
.opening-takeoff-note strong { color:#087663; font-size:.78rem; white-space:nowrap; }

@media (max-width:520px) {
  .opening-position-actions { grid-template-columns:1fr 1fr; }
  .opening-position-actions button:nth-child(2) { grid-row:2; grid-column:1 / -1; }
}

/* Calculator dedicated to the current system subcategory */
.subcategory-calculator { width:min(1440px,calc(100% - 48px)); display:grid; grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr); overflow:hidden; margin:54px auto 0; border:1px solid #cfdede; border-radius:20px; background:#fff; box-shadow:0 22px 65px rgba(20,57,63,.1); }
.subcategory-calculator-form { display:grid; align-content:center; padding:clamp(30px,5vw,64px); background:linear-gradient(145deg,#f9fbfb,#edf4f3); }
.subcategory-calculator-form > span,.subcategory-calculator-result > span { color:#118675; font-size:.6rem; font-weight:900; letter-spacing:.15em; }
.subcategory-calculator-form h2 { margin:8px 0 12px; font:500 clamp(2.1rem,3.8vw,4rem)/1 Georgia,serif; letter-spacing:-.045em; }
.subcategory-calculator-form > p { max-width:680px; margin:0 0 23px; color:#677e83; font-size:.67rem; line-height:1.65; }
.calculator-input-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.calculator-input-grid label { min-width:0; display:grid; gap:7px; color:#60777c; font-size:.55rem; font-weight:850; }
.calculator-input-grid label > div { position:relative; }
.calculator-input-grid input { width:100%; min-height:48px; padding:0 68px 0 13px; color:#17363d; border:1px solid #cbdada; border-radius:9px; background:#fff; font-size:.72rem; outline:none; }
.calculator-input-grid input:focus { border-color:#128875; box-shadow:0 0 0 3px rgba(18,136,117,.12); }
.calculator-input-grid b { position:absolute; right:12px; top:17px; color:#7e9296; font-size:.51rem; }
.calculator-source { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:17px; color:#73898d; font-size:.52rem; }.calculator-source a { color:#107d6e; font-weight:850; text-decoration:none; }
.subcategory-calculator-result { display:grid; align-content:center; padding:clamp(34px,6vw,76px); color:#eaf7f4; background:radial-gradient(circle at 85% 10%,rgba(34,174,149,.22),transparent 35%),linear-gradient(135deg,#112f37,#18444a); }
.subcategory-calculator-result > span { color:#6fd9c5; }.subcategory-calculator-result > strong { margin:13px 0 22px; color:#fff; font:500 clamp(2.4rem,5vw,5rem)/.95 Georgia,serif; letter-spacing:-.045em; }.subcategory-calculator-result > strong small { color:#9fbdbe; font:700 .82rem sans-serif; }
.subcategory-calculator-result > div { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid rgba(255,255,255,.13); border-radius:11px; }.subcategory-calculator-result article { display:grid; gap:5px; padding:14px; }.subcategory-calculator-result article:nth-child(even) { border-left:1px solid rgba(255,255,255,.13); }.subcategory-calculator-result article:nth-child(n+3) { border-top:1px solid rgba(255,255,255,.13); }.subcategory-calculator-result article span { color:#93afb1; font-size:.51rem; }.subcategory-calculator-result article b { color:#fff; font-size:.67rem; }
.subcategory-calculator-result button { min-height:46px; margin-top:17px; color:#fff; border:0; border-radius:9px; background:#138e7a; font-size:.62rem; font-weight:900; }.subcategory-calculator-result > p { margin:13px 0 0; color:#91aaad; font-size:.52rem; line-height:1.55; }
@media (max-width:900px) { .subcategory-calculator { grid-template-columns:1fr; }.calculator-input-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:680px) { .subcategory-calculator { width:calc(100% - 20px); border-radius:15px; }.subcategory-calculator-form,.subcategory-calculator-result { padding:28px 17px; }.calculator-input-grid,.subcategory-calculator-result > div { grid-template-columns:1fr; }.subcategory-calculator-result article:nth-child(even) { border-left:0; }.subcategory-calculator-result article + article { border-top:1px solid rgba(255,255,255,.13); } }

/* Shared drawing workspace for every system creator */
.system-sketch-board { min-width:0; margin:18px 0 24px; padding:15px; overflow:hidden; border:1px solid #cbded9; border-radius:15px; background:rgba(255,255,255,.9); box-shadow:0 14px 35px rgba(18,73,67,.07); }
.system-sketch-board > header { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:12px; }.system-sketch-board > header > div:first-child { display:grid; gap:4px; }.system-sketch-board > header span { color:#118675; font-size:.54rem; font-weight:900; letter-spacing:.13em; }.system-sketch-board > header strong { color:#173d42; font:500 1.2rem Georgia,serif; }.system-sketch-board > header > div:last-child { display:flex; gap:5px; padding:4px; border-radius:9px; background:#eaf2f0; }.system-sketch-board > header button { min-height:34px; padding:0 10px; color:#58736f; border:0; border-radius:7px; background:transparent; font-size:.59rem; font-weight:900; }.system-sketch-board > header button.active { color:#fff; background:#118675; }
.system-sketch-library { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-bottom:9px; }.system-sketch-library > button { min-width:0; min-height:62px; display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:7px; padding:8px; color:#274b4d; border:1px solid #d5e2df; border-radius:9px; background:#f8fbfa; text-align:left; }.system-sketch-library > button:hover { border-color:#7dc1b4; background:#edf7f4; }.system-sketch-library i { width:24px; height:24px; position:relative; display:block; border:2px solid #168674; border-radius:5px; background:#dff1ed; }.system-sketch-library i.opening { border-color:#247aa1; background:#e1f1f8; }.system-sketch-library i.line { height:5px; border:0; border-radius:99px; background:#d37b42; }.system-sketch-library i.point { border-radius:50%; background:#f1e4d9; }.system-sketch-library span { min-width:0; display:grid; gap:2px; }.system-sketch-library strong { overflow:hidden; font-size:.57rem; text-overflow:ellipsis; white-space:nowrap; }.system-sketch-library small { overflow:hidden; color:#7b8e8c; font-size:.45rem; text-overflow:ellipsis; white-space:nowrap; }.system-sketch-library b { color:#128372; font-size:.9rem; }
.system-sketch-paper { overflow:hidden; border:1px solid #c7dcd7; border-radius:12px; background:#fbfdfc; }.system-sketch-paper.draw { cursor:crosshair; }.system-sketch-paper svg { width:100%; height:auto; min-height:320px; display:block; touch-action:none; user-select:none; }.system-sketch-grid { stroke:#bed8d2; stroke-width:1.5; }
.system-sketch-element { cursor:grab; filter:drop-shadow(0 4px 4px rgba(20,69,65,.14)); }.system-sketch-element:active { cursor:grabbing; }.system-sketch-element rect { fill:rgba(199,232,224,.72); stroke:#177e70; stroke-width:3; vector-effect:non-scaling-stroke; }.system-sketch-element.opening rect { fill:#fff; stroke:#247aa1; stroke-dasharray:7 4; }.system-sketch-element.line rect { fill:#d9854f; stroke:#b96734; }.system-sketch-element.point rect { fill:#f4e2d5; stroke:#9e613c; }.system-sketch-element.selected rect { stroke:#f07b31; stroke-width:5; stroke-dasharray:none; }.system-sketch-element text { fill:#254b4c; font-size:11px; font-weight:900; text-anchor:middle; pointer-events:none; paint-order:stroke; stroke:#fff; stroke-width:3px; }.system-sketch-element text.dimension { fill:#174a4d; font-size:12px; }.system-sketch-element .resize { fill:#f07b31; stroke:#fff; stroke-width:4; cursor:nwse-resize; }.system-sketch-element .remove circle { fill:#c94a3b; stroke:#fff; stroke-width:3; cursor:pointer; }.system-sketch-element .remove path { fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; }.system-sketch-preview { fill:rgba(38,151,129,.16); stroke:#118675; stroke-width:3; stroke-dasharray:8 5; }
.system-sketch-paper > footer { display:flex; flex-wrap:wrap; align-items:center; gap:13px; padding:10px 12px; color:#69807d; border-top:1px solid #d4e2df; background:#fff; font-size:.52rem; }.system-sketch-paper > footer strong { margin-left:auto; color:#147b6d; }.system-sketch-paper > footer em { color:#0a8876; font-style:normal; font-weight:850; }
.system-sketch-editor { display:grid; grid-template-columns:minmax(130px,1fr) repeat(3,minmax(68px,90px)); align-items:end; gap:7px; margin-top:9px; padding:11px; border:1px solid #8ac4b8; border-radius:10px; background:#edf8f5; }.system-sketch-editor > span { display:grid; gap:3px; }.system-sketch-editor small { color:#168372; font-size:.47rem; font-weight:900; letter-spacing:.11em; }.system-sketch-editor strong { font:500 .9rem Georgia,serif; }.system-sketch-editor label { display:grid; gap:4px; color:#66807b; font-size:.48rem; font-weight:850; }.system-sketch-editor input { min-width:0; width:100%; height:34px; padding:0 7px; border:1px solid #c6d9d5; border-radius:7px; background:#fff; font-size:.62rem; font-weight:900; }.system-sketch-editor button { min-height:34px; padding:0 9px; color:#167c6e; border:1px solid #b9d4ce; border-radius:7px; background:#fff; font-size:.54rem; font-weight:900; }.system-sketch-editor button:first-of-type { grid-column:3; }.system-sketch-editor button:last-child { grid-column:4; color:#a13f31; border-color:#e0beb8; background:#fff4f2; }
.system-sketch-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:10px; }.system-sketch-actions p { margin:0; color:#728783; font-size:.54rem; line-height:1.5; }.system-sketch-actions button { flex:0 0 auto; min-height:39px; padding:0 13px; color:#fff; border:0; border-radius:8px; background:#118675; font-size:.58rem; font-weight:900; }

@media (max-width:1100px) { .system-sketch-library { grid-template-columns:1fr 1fr; }.system-sketch-editor { grid-template-columns:1fr 1fr 1fr; }.system-sketch-editor > span { grid-column:1 / -1; }.system-sketch-editor button:first-of-type,.system-sketch-editor button:last-child { grid-column:auto; } }
@media (max-width:680px) { .system-sketch-board { margin-left:-5px; margin-right:-5px; padding:10px 8px; }.system-sketch-board > header { align-items:stretch; flex-direction:column; }.system-sketch-board > header > div:last-child { align-self:stretch; }.system-sketch-board > header > div:last-child button { flex:1; }.system-sketch-library { grid-template-columns:1fr 1fr; }.system-sketch-library > button { grid-template-columns:22px minmax(0,1fr) auto; padding:7px 6px; }.system-sketch-paper svg { min-height:270px; }.system-sketch-paper > footer strong { width:100%; margin-left:0; }.system-sketch-editor { grid-template-columns:1fr 1fr; }.system-sketch-editor > span { grid-column:1 / -1; }.system-sketch-editor button { min-height:39px; }.system-sketch-actions { align-items:stretch; flex-direction:column; }.system-sketch-actions button { width:100%; }.system-sketch-library small { display:none; } }

.chimney-system-visual { min-width:0; margin:18px 0 24px; overflow:hidden; border:1px solid #c7d9d5; border-radius:17px; background:#f7faf9; box-shadow:0 18px 45px rgba(16,67,64,.09); }
.chimney-system-visual > header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:17px 20px; color:#fff; background:linear-gradient(115deg,#153e43,#0c7468); }
.chimney-system-visual > header > div { display:grid; gap:4px; }.chimney-system-visual > header span { color:#7fe0cf; font-size:.57rem; font-weight:900; letter-spacing:.13em; }.chimney-system-visual > header strong { font:500 1.24rem Georgia,serif; }.chimney-system-visual > header em { padding:8px 11px; color:#dff8f2; border:1px solid rgba(255,255,255,.15); border-radius:99px; background:rgba(255,255,255,.08); font-size:.56rem; font-style:normal; font-weight:850; }
.chimney-visual-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr); min-width:0; }
.chimney-section-stage { min-width:0; overflow:hidden; border-right:1px solid #d5e2df; background:#e8f0ee; }.chimney-section-stage svg { width:100%; height:auto; min-height:410px; display:block; }.chimney-building { fill:#dedbd2; }.chimney-roof-line { fill:none; stroke:#344b52; stroke-width:17; stroke-linejoin:round; }.chimney-body { stroke:#7c8986; stroke-width:3; }.chimney-body.steel { fill:#b8c3c7; stroke:#65767c; }.chimney-block-joint { stroke:#9aa49f; stroke-width:1.5; }.chimney-flue { fill:#b45d3d; stroke:#783a29; stroke-width:4; }.chimney-flue.steel { fill:#9caeb5; stroke:#53666e; }.chimney-flue.ventilation { fill:#65797d; stroke:#344b4e; }.chimney-flue-top { fill:#243b3e; stroke:#e1e7e5; stroke-width:3; }.chimney-connection { fill:#b45d3d; stroke:#743825; stroke-width:4; }.chimney-cleanout { fill:#2d4548; stroke:#e2e9e7; stroke-width:3; }.chimney-condensate { fill:none; stroke:#167eaf; stroke-width:5; stroke-linecap:round; }.chimney-roof-seal { fill:#197e72; stroke:#0f5c55; stroke-width:2; }.chimney-cap { fill:#30494c; stroke:#132f32; stroke-width:3; }.chimney-callout { fill:#183c41; font-size:11px; font-weight:900; letter-spacing:.06em; }.chimney-dimension { stroke:#285961; stroke-width:2; marker-start:none; }.chimney-dimension-text { fill:#173f45; font-size:13px; font-weight:900; text-anchor:middle; }.chimney-legend rect { fill:rgba(15,55,60,.92); }.chimney-legend text { fill:#76d9c8; font-size:10px; font-weight:900; letter-spacing:.08em; }.chimney-legend text:nth-of-type(2) { fill:#fff; font:600 16px Georgia,serif; letter-spacing:0; }.chimney-legend text:nth-of-type(3) { fill:#b7cfcb; letter-spacing:0; }
.chimney-section-stage > footer { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:11px 15px; color:#637c78; border-top:1px solid #cfddda; background:#fff; font-size:.52rem; }.chimney-section-stage > footer span { display:flex; align-items:center; gap:6px; }.chimney-section-stage > footer i { width:12px; height:12px; border-radius:3px; background:#d6d8d1; }.chimney-section-stage > footer i.flue { background:#b45d3d; }.chimney-section-stage > footer i.insulation { background:#e4dca7; }.chimney-section-stage > footer strong { margin-left:auto; color:#17766b; }
.chimney-visual-controls { min-width:0; display:flex; flex-direction:column; gap:10px; padding:20px; background:#fff; }.chimney-visual-controls > span { color:#128071; font-size:.56rem; font-weight:900; letter-spacing:.13em; }.chimney-visual-controls h3 { margin:0 0 5px; color:#183c41; font:500 1.35rem Georgia,serif; }.chimney-visual-controls > label { display:grid; gap:5px; color:#536c69; font-size:.57rem; font-weight:800; }.chimney-visual-controls > label > div { height:42px; display:grid; grid-template-columns:1fr auto; align-items:center; overflow:hidden; border:1px solid #d4e0dd; border-radius:8px; background:#f9fbfa; }.chimney-visual-controls input { min-width:0; height:100%; padding:0 10px; border:0; outline:0; background:transparent; font-weight:850; }.chimney-visual-controls label b { padding-right:10px; color:#81928f; font-size:.54rem; }
.chimney-option-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:3px; }.chimney-option-grid button { min-height:48px; display:grid; grid-template-columns:23px minmax(0,1fr); align-items:center; gap:6px; padding:6px 8px; color:#536d69; border:1px solid #d8e3e0; border-radius:8px; background:#f8faf9; text-align:left; }.chimney-option-grid button.active { color:#126e63; border-color:#83c9bb; background:#e9f6f2; }.chimney-option-grid i { width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#e5eeec; font-size:.65rem; font-style:normal; font-weight:900; }.chimney-option-grid button.active i { color:#fff; background:#128071; }.chimney-option-grid span { font-size:.52rem; font-weight:850; }
.chimney-live-summary { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; margin-top:3px; border:1px solid #d8e3e0; border-radius:9px; }.chimney-live-summary article { min-width:0; display:grid; gap:4px; padding:9px 7px; border-left:1px solid #d8e3e0; }.chimney-live-summary article:first-child { border-left:0; }.chimney-live-summary span { color:#7b8e8a; font-size:.45rem; }.chimney-live-summary strong { color:#173f43; font-size:.64rem; }.chimney-apply { min-height:44px; margin-top:auto; padding:0 12px; color:#fff; border:0; border-radius:8px; background:#108071; font-size:.58rem; font-weight:900; }
@media (max-width:1050px) { .chimney-visual-layout { grid-template-columns:1fr; }.chimney-section-stage { border-right:0; border-bottom:1px solid #d5e2df; }.chimney-visual-controls { display:grid; grid-template-columns:1fr 1fr; }.chimney-visual-controls > span,.chimney-visual-controls h3,.chimney-option-grid,.chimney-live-summary,.chimney-apply { grid-column:1 / -1; } }
@media (max-width:680px) { .chimney-system-visual > header { align-items:flex-start; flex-direction:column; padding:14px; }.chimney-system-visual > header em { align-self:flex-start; }.chimney-section-stage svg { min-height:300px; }.chimney-section-stage > footer strong { width:100%; margin-left:0; }.chimney-visual-controls { grid-template-columns:1fr; padding:14px 10px; }.chimney-visual-controls > span,.chimney-visual-controls h3,.chimney-option-grid,.chimney-live-summary,.chimney-apply { grid-column:auto; }.chimney-live-summary { grid-template-columns:1fr; }.chimney-live-summary article { border-left:0; border-top:1px solid #d8e3e0; }.chimney-live-summary article:first-child { border-top:0; } }

/* Producer partnership and data onboarding */
.partner-portal-page { --partner-ink:#15343b; --partner-green:#0c806f; --partner-lime:#c7f36d; padding-bottom:80px; color:var(--partner-ink); background:linear-gradient(180deg,#eaf1ef 0,#f8faf9 620px,#e8efed 100%); }
.partner-portal-hero { width:min(1500px,calc(100% - 40px)); min-height:660px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(350px,.7fr); gap:54px; align-items:center; margin:20px auto 0; padding:clamp(42px,6vw,90px); overflow:hidden; color:#eef8f5; border-radius:28px; background:radial-gradient(circle at 80% 8%,rgba(199,243,109,.18),transparent 27%),radial-gradient(circle at 8% 92%,rgba(41,176,149,.18),transparent 34%),#102e35; box-shadow:0 34px 90px rgba(15,48,54,.2); }
.partner-portal-copy > span,.partner-data-standard > div > span,.partner-packages > header > span,.partner-roi-form > span,.partner-roi-result > span,.partner-contact > div > span { color:#74d9c2; font-size:.76rem; font-weight:900; letter-spacing:.16em; }
.partner-portal-copy > span i { width:8px; height:8px; display:inline-block; margin-right:9px; border-radius:50%; background:var(--partner-lime); box-shadow:0 0 0 7px rgba(199,243,109,.1); }
.partner-portal-copy h1 { max-width:900px; margin:22px 0 25px; color:#fff; font:500 clamp(3.4rem,6.7vw,7.4rem)/.9 Georgia,serif; letter-spacing:-.065em; }
.partner-portal-copy p { max-width:760px; margin:0; color:#bad0cf; font-size:1.03rem; line-height:1.75; }
.partner-portal-copy > div { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.partner-portal-copy > div a { min-height:52px; display:flex; align-items:center; gap:28px; padding:0 21px; color:#11323a; border:1px solid var(--partner-lime); border-radius:9px; background:var(--partner-lime); font-size:.9rem; font-weight:900; text-decoration:none; }
.partner-portal-copy > div a + a { color:#d4e5e2; border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }
.partner-live-card { overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:rgba(4,23,28,.42); backdrop-filter:blur(12px); }
.partner-live-card > span { display:block; padding:20px 24px; color:#7fe0ca; border-bottom:1px solid rgba(255,255,255,.12); font-size:.72rem; font-weight:900; letter-spacing:.14em; }
.partner-live-card article { display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:17px; padding:25px; }
.partner-live-card article + article { border-top:1px solid rgba(255,255,255,.1); }
.partner-live-card article strong { color:#fff; font:500 2.15rem Georgia,serif; }
.partner-live-card article small { color:#a7bfbd; font-size:.82rem; }
.partner-live-card > p { margin:0; padding:20px 24px; color:#8fa9a7; border-top:1px solid rgba(255,255,255,.1); font-size:.78rem; line-height:1.6; }

.partner-value-grid { width:min(1400px,calc(100% - 48px)); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:50px auto 0; }
.partner-value-grid article { min-height:360px; display:flex; flex-direction:column; padding:27px; border:1px solid #cedddb; border-radius:16px; background:#fff; box-shadow:0 15px 38px rgba(20,57,61,.06); }
.partner-value-grid article > span { color:#83a09c; font:500 1.1rem Georgia,serif; }
.partner-value-grid article > svg { width:42px; height:42px; margin:54px 0 22px; color:var(--partner-green); }
.partner-value-grid h2 { margin:0 0 12px; font:500 1.55rem Georgia,serif; }
.partner-value-grid p { margin:0; color:#68807f; font-size:.86rem; line-height:1.7; }

.partner-data-standard { width:min(1400px,calc(100% - 48px)); display:grid; grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr); gap:65px; align-items:center; margin:70px auto 0; padding:clamp(40px,6vw,80px); border-radius:24px; background:#fff; box-shadow:0 25px 70px rgba(17,55,59,.08); }
.partner-data-standard > div > span,.partner-packages > header > span,.partner-roi-form > span,.partner-contact > div > span { color:var(--partner-green); }
.partner-data-standard h2,.partner-packages h2,.partner-roi h2,.partner-contact h2 { margin:12px 0 20px; font:500 clamp(2.5rem,4.7vw,5.2rem)/.98 Georgia,serif; letter-spacing:-.05em; }
.partner-data-standard > div p,.partner-contact > div > p { margin:0; color:#687f80; font-size:.95rem; line-height:1.75; }
.partner-data-standard ol { margin:0; padding:0; list-style:none; border:1px solid #d3dfdd; border-radius:16px; }
.partner-data-standard li { display:grid; grid-template-columns:58px 1fr; gap:18px; padding:24px; }
.partner-data-standard li + li { border-top:1px solid #dbe5e3; }
.partner-data-standard li i { width:45px; height:45px; display:grid; place-items:center; color:#fff; border-radius:10px; background:#143b42; font-style:normal; font-size:.72rem; font-weight:900; }
.partner-data-standard li div { display:grid; gap:6px; }
.partner-data-standard li strong { font-size:1rem; }
.partner-data-standard li span { color:#718685; font-size:.82rem; line-height:1.55; }

.partner-packages { width:min(1400px,calc(100% - 48px)); margin:80px auto 0; }
.partner-packages > header { max-width:850px; margin-bottom:28px; }
.partner-packages > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.partner-packages article { min-height:520px; display:flex; flex-direction:column; padding:34px; border:1px solid #cbdad7; border-radius:18px; background:#fff; }
.partner-packages article.featured { color:#f1faf7; border-color:#153a41; background:radial-gradient(circle at 90% 5%,rgba(199,243,109,.14),transparent 28%),#153a41; transform:translateY(-12px); box-shadow:0 25px 65px rgba(16,58,63,.2); }
.partner-packages article > span { color:#168675; font-size:.72rem; font-weight:900; letter-spacing:.14em; }
.partner-packages article.featured > span { color:var(--partner-lime); }
.partner-packages h3 { margin:52px 0 12px; font:500 2rem Georgia,serif; }
.partner-packages article > p { margin:0; color:#6d8282; font-size:.88rem; line-height:1.65; }
.partner-packages article.featured > p { color:#aac1bf; }
.partner-packages ul { display:grid; gap:14px; margin:30px 0; padding:0; list-style:none; }
.partner-packages li { position:relative; padding-left:24px; color:#516d6c; font-size:.84rem; }
.partner-packages li::before { content:"✓"; position:absolute; left:0; color:#168675; font-weight:900; }
.partner-packages article.featured li { color:#d2e2df; }
.partner-packages article.featured li::before { color:var(--partner-lime); }
.partner-packages article a { min-height:48px; display:flex; align-items:center; justify-content:center; margin-top:auto; color:#fff; border-radius:9px; background:var(--partner-green); font-size:.86rem; font-weight:900; text-decoration:none; }
.partner-packages article.featured a { color:#14343a; background:var(--partner-lime); }

.partner-roi { width:min(1400px,calc(100% - 48px)); display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.82fr); overflow:hidden; margin:75px auto 0; border-radius:24px; background:#fff; box-shadow:0 26px 70px rgba(15,52,57,.1); }
.partner-roi-form { display:grid; gap:15px; padding:clamp(38px,6vw,78px); }
.partner-roi h2 { font-size:clamp(2.4rem,4vw,4.4rem); }
.partner-roi-form label { display:grid; gap:8px; color:#526d6d; font-size:.8rem; font-weight:800; }
.partner-roi-form label > div { position:relative; }
.partner-roi-form input { width:100%; min-height:52px; padding:0 110px 0 15px; border:1px solid #cbd9d7; border-radius:9px; font-size:1rem; outline:none; }
.partner-roi-form input:focus { border-color:var(--partner-green); box-shadow:0 0 0 4px rgba(12,128,111,.12); }
.partner-roi-form label b { position:absolute; right:14px; top:18px; color:#758b89; font-size:.74rem; }
.partner-roi-result { display:grid; align-content:center; padding:clamp(38px,6vw,78px); color:#e8f5f2; background:radial-gradient(circle at 90% 10%,rgba(199,243,109,.16),transparent 31%),#102f36; }
.partner-roi-result > span { color:#79dac4; }
.partner-roi-result > strong { margin:18px 0 4px; color:#fff; font:500 clamp(3rem,5.5vw,5.8rem)/.95 Georgia,serif; letter-spacing:-.055em; }
.partner-roi-result > p { margin:0 0 28px; color:#8fa9a7; font-size:.76rem; }
.partner-roi-result > div { overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:12px; }
.partner-roi-result article { display:grid; gap:6px; padding:18px; }
.partner-roi-result article + article { border-top:1px solid rgba(255,255,255,.12); }
.partner-roi-result article small { color:#91aaa8; font-size:.72rem; }
.partner-roi-result article b { color:#fff; font-size:1rem; }

.partner-contact { width:min(1400px,calc(100% - 48px)); display:grid; grid-template-columns:minmax(0,.78fr) minmax(540px,1.22fr); gap:60px; margin:75px auto 0; padding:clamp(38px,6vw,78px); border:1px solid #cad9d6; border-radius:24px; background:#f9fbfa; }
.partner-contact-promise { display:grid; gap:10px; margin-top:30px; padding:22px; border-radius:12px; background:#e9f2ef; }
.partner-contact-promise strong { margin-bottom:3px; }
.partner-contact-promise span { color:#5f7876; font-size:.82rem; }
.partner-contact-promise span::before { content:"✓"; margin-right:9px; color:var(--partner-green); font-weight:900; }
.partner-contact form { position:relative; display:grid; gap:14px; padding:28px; border:1px solid #d0ddda; border-radius:17px; background:#fff; box-shadow:0 18px 45px rgba(16,54,58,.07); }
.partner-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.partner-contact form label { display:grid; gap:7px; color:#526d6c; font-size:.76rem; font-weight:800; }
.partner-contact input,.partner-contact select,.partner-contact textarea { width:100%; min-height:48px; padding:0 13px; color:#18383e; border:1px solid #cbd9d6; border-radius:8px; background:#fff; font:inherit; outline:none; }
.partner-contact textarea { min-height:112px; padding-top:12px; resize:vertical; }
.partner-contact input:focus,.partner-contact select:focus,.partner-contact textarea:focus { border-color:var(--partner-green); box-shadow:0 0 0 4px rgba(12,128,111,.1); }
.partner-consent { grid-template-columns:20px 1fr!important; align-items:start; gap:10px!important; font-weight:600!important; line-height:1.5; }
.partner-consent input { width:18px; min-height:18px; margin-top:2px; accent-color:var(--partner-green); }
.partner-honeypot { position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.partner-contact form > button { min-height:52px; color:#fff; border:0; border-radius:9px; background:var(--partner-green); font-size:.9rem; font-weight:900; }
.partner-contact form > button:disabled { opacity:.58; }
.partner-form-message { margin:0; padding:12px; border-radius:8px; font-size:.8rem; }
.partner-form-message.sent { color:#126a5d; background:#e0f4ed; }
.partner-form-message.error { color:#a53b31; background:#f9e5e2; }

.brand-ownership-strip,.manufacturer-partner-bar { width:min(1440px,calc(100% - 48px)); display:flex; align-items:center; justify-content:space-between; gap:24px; margin:14px auto 0; padding:19px 23px; color:#d9ebe7; border-radius:12px; background:#153940; }
.brand-ownership-strip > div,.manufacturer-partner-bar > div { display:grid; gap:5px; }
.brand-ownership-strip span,.manufacturer-partner-bar span { color:#79d6c1; font-size:.65rem; font-weight:900; letter-spacing:.12em; }
.brand-ownership-strip strong,.manufacturer-partner-bar strong { font-size:.88rem; }
.brand-ownership-strip a,.manufacturer-partner-bar a { flex:0 0 auto; min-height:42px; display:flex; align-items:center; padding:0 15px; color:#14343a; border-radius:8px; background:var(--partner-lime,#c7f36d); font-size:.76rem; font-weight:900; text-decoration:none; }
.brand-hub-actions .brand-claim-link { color:#fff; border-color:#153940; background:#153940; }
.catalog-monetization > div:first-child > a { display:inline-flex; min-height:43px; align-items:center; margin-top:18px; padding:0 15px; color:#fff; border-radius:8px; background:#118474; font-size:.72rem; font-weight:900; text-decoration:none; }

@media (max-width:1050px) {
  .partner-portal-hero,.partner-data-standard,.partner-roi,.partner-contact { grid-template-columns:1fr; }
  .partner-value-grid { grid-template-columns:1fr 1fr; }
  .partner-packages > div { grid-template-columns:1fr; }
  .partner-packages article.featured { transform:none; }
}

@media (max-width:680px) {
  .partner-portal-page { padding-bottom:50px; }
  .partner-portal-hero,.partner-value-grid,.partner-data-standard,.partner-packages,.partner-roi,.partner-contact,.brand-ownership-strip,.manufacturer-partner-bar { width:calc(100% - 20px); }
  .partner-portal-hero { min-height:0; grid-template-columns:1fr; gap:32px; margin-top:10px; padding:34px 20px; border-radius:18px; }
  .partner-portal-copy h1 { font-size:3.35rem; }
  .partner-portal-copy p { font-size:.93rem; }
  .partner-portal-copy > div { align-items:stretch; flex-direction:column; }
  .partner-portal-copy > div a { justify-content:center; }
  .partner-value-grid { grid-template-columns:1fr; }
  .partner-value-grid article { min-height:300px; }
  .partner-data-standard,.partner-contact { gap:34px; padding:30px 18px; border-radius:16px; }
  .partner-data-standard h2,.partner-packages h2,.partner-contact h2 { font-size:2.65rem; }
  .partner-data-standard li { grid-template-columns:44px 1fr; padding:17px; }
  .partner-packages article { min-height:460px; padding:26px; }
  .partner-roi-form,.partner-roi-result { padding:31px 18px; }
  .partner-form-grid { grid-template-columns:1fr; }
  .partner-contact form { padding:18px 14px; }
  .brand-ownership-strip,.manufacturer-partner-bar { align-items:stretch; flex-direction:column; }
  .brand-ownership-strip a,.manufacturer-partner-bar a { justify-content:center; }
}

/* Qualified product requests */
.product-quote-panel { width:min(1380px,calc(100% - 48px)); display:grid; grid-template-columns:minmax(0,.78fr) minmax(540px,1.22fr); gap:56px; margin:22px auto 0; padding:clamp(34px,5vw,68px); overflow:hidden; color:#17363d; border-radius:22px; background:linear-gradient(135deg,#e9f2ef,#f9fbfa); box-shadow:0 20px 60px rgba(19,56,61,.08); }
.product-quote-copy > span { color:#0d8472; font-size:.72rem; font-weight:900; letter-spacing:.15em; }
.product-quote-copy h2 { margin:13px 0 17px; font:500 clamp(2.6rem,4.6vw,5rem)/.96 Georgia,serif; letter-spacing:-.05em; }
.product-quote-copy > p { margin:0; color:#667e7e; font-size:.92rem; line-height:1.7; }
.product-quote-copy > div { display:grid; gap:5px; margin-top:27px; padding:19px; border-left:4px solid #0d8472; border-radius:0 10px 10px 0; background:#fff; }
.product-quote-copy > div strong { font-size:1rem; }.product-quote-copy > div span { color:#4e6a6a; font-size:.82rem; }.product-quote-copy > div small { color:#869897; font-size:.7rem; }
.product-quote-panel form { position:relative; display:grid; gap:13px; padding:26px; border:1px solid #cfddda; border-radius:16px; background:#fff; }
.product-quote-panel form > div { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.product-quote-panel form label { display:grid; gap:7px; color:#526d6d; font-size:.76rem; font-weight:800; }
.product-quote-panel input,.product-quote-panel select,.product-quote-panel textarea { width:100%; min-height:47px; padding:0 12px; color:#17363d; border:1px solid #cbd9d6; border-radius:8px; background:#fff; font:inherit; outline:none; }
.product-quote-panel textarea { min-height:94px; padding-top:11px; resize:vertical; }
.product-quote-panel input:focus,.product-quote-panel select:focus,.product-quote-panel textarea:focus { border-color:#0d8472; box-shadow:0 0 0 4px rgba(13,132,114,.1); }
.product-quote-panel .quote-consent { grid-template-columns:19px 1fr; align-items:start; gap:10px; font-weight:600; line-height:1.5; }
.product-quote-panel .quote-consent input { width:18px; min-height:18px; margin-top:2px; accent-color:#0d8472; }
.quote-honeypot { position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.product-quote-panel form > button { min-height:51px; color:#fff; border:0; border-radius:9px; background:#0d8472; font-size:.87rem; font-weight:900; }.product-quote-panel form > button:disabled { opacity:.55; }
.quote-error { margin:0; padding:11px; color:#a23b32; border-radius:8px; background:#f8e5e2; font-size:.76rem; }
.product-quote-success { display:grid; place-items:center; align-content:center; min-height:420px; padding:35px; border:1px solid #c9ddd7; border-radius:16px; background:#fff; text-align:center; }.product-quote-success i { width:62px; height:62px; display:grid; place-items:center; color:#fff; border-radius:50%; background:#0d8472; font:normal 900 1.4rem sans-serif; }.product-quote-success strong { margin-top:17px; font:500 1.55rem Georgia,serif; }.product-quote-success p { color:#64807b; font-size:.82rem; }.product-quote-success a { min-height:42px; display:flex; align-items:center; margin-top:8px; padding:0 15px; color:#fff; border-radius:8px; background:#153a41; font-size:.76rem; font-weight:900; text-decoration:none; }
@media (max-width:900px) { .product-quote-panel { grid-template-columns:1fr; } }
@media (max-width:680px) { .product-quote-panel { width:calc(100% - 20px); gap:30px; padding:29px 17px; border-radius:16px; }.product-quote-copy h2 { font-size:2.8rem; }.product-quote-panel form { padding:17px 13px; }.product-quote-panel form > div { grid-template-columns:1fr; } }

/* Brand-neutral system comparison */
.system-tradeoffs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:16px 0; }
.system-tradeoffs section { display:grid; align-content:start; gap:6px; padding:11px; border-radius:9px; background:#edf5f2; }
.system-tradeoffs section + section { background:#f6f1e8; }
.system-tradeoffs strong { color:#147e70; font-size:.61rem; }
.system-tradeoffs section + section strong { color:#8b6638; }
.system-tradeoffs small { color:#5d7477; font-size:.55rem; line-height:1.45; }
.system-calculation-scope { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:13px; padding:18px; border:1px solid #d4e1df; border-radius:12px; background:#f6f9f8; }
.system-calculation-scope strong { margin-right:9px; font-size:.72rem; }
.system-calculation-scope span { padding:7px 9px; color:#466763; border-radius:7px; background:#e4efec; font-size:.6rem; font-weight:800; }

/* Directory of all system calculators */
.creator-directory-page { --creator-green:#0d826f; width:100%; min-width:0; min-height:80vh; padding:20px 0 75px; overflow-x:clip; color:#16353d; background:linear-gradient(180deg,#e9f1ef,#f8faf9 650px,#edf2f1); }
.creator-directory-hero { width:min(1500px,calc(100% - 40px)); min-height:430px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:50px; align-items:center; margin:0 auto; padding:clamp(40px,6vw,82px); color:#e9f6f3; border-radius:26px; background:radial-gradient(circle at 84% 12%,rgba(150,237,205,.18),transparent 26%),#12343c; box-shadow:0 30px 80px rgba(18,52,60,.2); }
.creator-directory-hero > div > span,.creator-directory-browser header > div > span,.creator-directory-active > div > span { color:#71dac3; font-size:.74rem; font-weight:900; letter-spacing:.15em; }
.creator-directory-hero h1 { max-width:940px; margin:17px 0 20px; color:#fff; font:500 clamp(3rem,5.7vw,6.5rem)/.93 Georgia,serif; letter-spacing:-.06em; }
.creator-directory-hero p { max-width:780px; margin:0; color:#aec5c3; font-size:1rem; line-height:1.75; }
.creator-directory-hero aside { display:grid; padding:28px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(2,22,27,.34); }
.creator-directory-hero aside strong { color:#fff; font:500 4.5rem Georgia,serif; line-height:1; }
.creator-directory-hero aside span { margin-bottom:25px; color:#a8c0be; font-size:.82rem; }
.creator-directory-hero aside b { color:#8fe2cf; font:500 2.5rem Georgia,serif; }
.creator-directory-hero aside small { color:#8ca5a3; font-size:.74rem; }
.creator-directory-browser { width:min(1500px,calc(100% - 40px)); margin:32px auto 0; padding:28px; border:1px solid #cedcda; border-radius:22px; background:#fff; box-shadow:0 22px 65px rgba(18,52,58,.09); }
.creator-directory-browser > header { display:flex; align-items:end; justify-content:space-between; gap:28px; padding:8px 6px 24px; }
.creator-directory-browser h2 { margin:7px 0 0; font:500 clamp(2.2rem,3.6vw,4rem) Georgia,serif; letter-spacing:-.045em; }
.creator-directory-browser > header label { width:min(430px,42vw); display:grid; gap:7px; color:#607775; font-size:.72rem; font-weight:850; }
.creator-directory-browser > header input { width:100%; min-height:49px; padding:0 14px; border:1px solid #cbd9d6; border-radius:9px; font-size:.85rem; outline:none; }
.creator-directory-browser > header input:focus { border-color:var(--creator-green); box-shadow:0 0 0 4px rgba(13,130,111,.1); }
.creator-directory-browser > nav { min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:6px; padding:10px; overflow:visible; border-radius:12px; background:#eef4f2; }
.creator-directory-browser > nav a { min-width:0; min-height:39px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 11px; color:#526c69; border-radius:8px; background:transparent; font-size:.67rem; font-weight:850; text-decoration:none; }
.creator-directory-browser > nav a b { flex:0 0 auto; min-width:22px; padding:4px 5px; border-radius:99px; background:#dae7e3; font-size:.58rem; text-align:center; }
.creator-directory-browser > nav a.active { color:#fff; background:var(--creator-green); }
.creator-directory-browser > nav a.active b { background:rgba(255,255,255,.18); }
.creator-directory-layout { min-width:0; display:grid; grid-template-columns:minmax(380px,.7fr) minmax(620px,1.3fr); gap:13px; margin-top:13px; }
.creator-directory-list { max-height:920px; overflow:auto; border:1px solid #d5e1df; border-radius:14px; }
.creator-directory-list > button { width:100%; min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:13px; padding:17px; color:#17373e; border:0; border-bottom:1px solid #dbe5e3; background:#fff; text-align:left; }
.creator-directory-list > button:hover,.creator-directory-list > button.active { background:#edf7f4; }
.creator-directory-list > button.active { box-shadow:inset 4px 0 var(--creator-green); }
.creator-directory-list > button > i { width:37px; height:37px; display:grid; place-items:center; color:#6d8582; border-radius:9px; background:#e8efed; font-style:normal; font-size:.62rem; font-weight:900; }
.creator-directory-list > button > span { min-width:0; display:grid; gap:4px; }
.creator-directory-list small { color:#0f8875; font-size:.54rem; font-weight:850; text-transform:uppercase; }
.creator-directory-list strong { font-size:.82rem; }
.creator-directory-list em { overflow:hidden; color:#728583; font-size:.66rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.creator-directory-list > button > b { color:#0d826f; font-size:.6rem; }
.creator-page-list { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:13px; }
.creator-page-list > a { min-width:0; min-height:132px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:13px; padding:18px; color:#17373e; border:1px solid #d5e1df; border-radius:12px; background:#fff; text-decoration:none; }
.creator-page-list > a:hover { border-color:#94cbbb; background:#edf7f4; box-shadow:0 10px 26px rgba(17,73,66,.08); }
.creator-page-list > a > i { width:37px; height:37px; display:grid; place-items:center; color:#6d8582; border-radius:9px; background:#e8efed; font-style:normal; font-size:.62rem; font-weight:900; }
.creator-page-list > a > span { min-width:0; display:grid; gap:5px; }
.creator-page-list small { color:#0f8875; font-size:.54rem; font-weight:850; text-transform:uppercase; }
.creator-page-list strong { font-size:.84rem; }
.creator-page-list em { overflow:hidden; color:#728583; font-size:.66rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.creator-page-list > a > b { color:#0d826f; font-size:.59rem; white-space:nowrap; }
.creator-directory-empty { min-height:260px; display:grid; place-items:center; align-content:center; gap:7px; color:#788b89; }
.creator-directory-active { min-width:0; padding:18px; border-radius:14px; background:#eff5f3; }
.creator-directory-active > div { display:grid; gap:6px; padding:7px 7px 15px; }
.creator-directory-active > div > strong { font:500 1.7rem Georgia,serif; }
.creator-directory-active > div > small { color:#6c827f; font-size:.7rem; }
.creator-directory-active .subcategory-calculator { width:100%; grid-template-columns:1fr; margin:0; border-radius:14px; }
.creator-directory-active .subcategory-calculator-form { padding:28px; }
.creator-directory-active .subcategory-calculator-form h2 { font-size:2.25rem; }
.creator-directory-active .subcategory-calculator-result { padding:30px; }
.creator-detail-hero { width:min(1500px,calc(100% - 40px)); min-width:0; margin:0 auto; padding:clamp(34px,5vw,72px); color:#e9f6f3; border-radius:25px; background:radial-gradient(circle at 86% 10%,rgba(150,237,205,.18),transparent 28%),#12343c; box-shadow:0 30px 80px rgba(18,52,60,.19); }
.creator-detail-hero nav { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:42px; color:#8da9a6; font-size:.7rem; }.creator-detail-hero nav a { color:#87dac7; text-decoration:none; }.creator-detail-hero nav strong { color:#d9eae6; }
.creator-detail-hero > div { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:45px; align-items:end; }.creator-detail-hero > div > span { grid-column:1; color:#71dac3; font-size:.73rem; font-weight:900; letter-spacing:.15em; }.creator-detail-hero h1 { grid-column:1; max-width:930px; margin:8px 0 13px; color:#fff; font:500 clamp(3rem,5.5vw,6rem)/.94 Georgia,serif; letter-spacing:-.055em; }.creator-detail-hero p { grid-column:1; max-width:760px; margin:0; color:#abc2bf; font-size:.95rem; line-height:1.7; }.creator-detail-hero aside { grid-column:2; grid-row:1 / 4; display:grid; gap:7px; padding:25px; border:1px solid rgba(255,255,255,.14); border-radius:15px; background:rgba(1,23,28,.35); }.creator-detail-hero aside small { margin-top:8px; color:#88a6a3; font-size:.65rem; }.creator-detail-hero aside strong { color:#fff; font-size:.9rem; }
.creator-detail-calculator { width:min(1500px,calc(100% - 40px)); min-width:0; margin:28px auto 0; }.creator-detail-calculator .subcategory-calculator { width:100%; margin:0; }
.creator-related-tools { width:min(1500px,calc(100% - 40px)); min-width:0; margin:52px auto 0; }.creator-related-tools header > span { color:#118675; font-size:.68rem; font-weight:900; letter-spacing:.14em; }.creator-related-tools h2 { margin:8px 0 20px; font:500 clamp(2.2rem,3.6vw,4rem) Georgia,serif; letter-spacing:-.045em; }.creator-related-tools > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }.creator-related-tools > div a { min-width:0; min-height:190px; display:flex; flex-direction:column; padding:20px; color:#17373e; border:1px solid #d2dfdc; border-radius:12px; background:#fff; text-decoration:none; }.creator-related-tools a small { color:#118675; font-size:.56rem; font-weight:850; }.creator-related-tools a strong { margin:38px 0 15px; font:500 1.05rem Georgia,serif; }.creator-related-tools a span { margin-top:auto; color:#107e6e; font-size:.61rem; font-weight:900; }.creator-related-tools footer { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }.creator-related-tools footer a { min-height:42px; display:flex; align-items:center; padding:0 14px; color:#fff; border-radius:8px; background:#147e70; font-size:.66rem; font-weight:850; text-decoration:none; }
.creator-directory-cta { width:min(1440px,calc(100% - 48px)); display:flex; align-items:center; justify-content:space-between; gap:30px; margin:24px auto 0; padding:30px; color:#e9f5f2; border-radius:16px; background:#153941; }
.creator-directory-cta span { color:#78d9c3; font-size:.66rem; font-weight:900; letter-spacing:.13em; }
.creator-directory-cta h2 { margin:6px 0; color:#fff; font:500 2rem Georgia,serif; }
.creator-directory-cta p { margin:0; color:#9eb6b4; font-size:.78rem; }
.creator-directory-cta a { flex:0 0 auto; min-height:47px; display:flex; align-items:center; padding:0 17px; color:#12343b; border-radius:9px; background:#b9ef8a; font-size:.76rem; font-weight:900; text-decoration:none; }

/* Professional roofing calculator */
.construction-portal,.roof-pro-page { max-width:100%; overflow-x:clip; }
.roof-pro-page { --roof-blue:#176ea8; --roof-ink:#16323f; width:100%; min-width:0; padding:20px 0 75px; color:var(--roof-ink); background:linear-gradient(180deg,#e9f0f3,#f8fafb 660px,#ebf0f2); }
.roof-pro-hero,.roof-cover-comparison,.roof-calculator,.roof-estimate { width:min(1500px,calc(100% - 40px)); margin-left:auto; margin-right:auto; }
.roof-pro-hero { min-height:560px; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:55px; align-items:center; padding:clamp(42px,6vw,86px); color:#eaf3f7; border-radius:27px; background:radial-gradient(circle at 83% 12%,rgba(68,170,229,.25),transparent 28%),linear-gradient(135deg,#102c3a,#174b64); box-shadow:0 34px 90px rgba(15,49,65,.22); }
.roof-pro-hero > div > span,.roof-cover-comparison header > span,.roof-calculator-form > span,.roof-price-editor > span,.roof-estimate header span { color:#7bcdf4; font-size:.73rem; font-weight:900; letter-spacing:.15em; }
.roof-pro-hero h1 { max-width:920px; margin:18px 0 23px; color:#fff; font:500 clamp(3.3rem,6vw,6.7rem)/.92 Georgia,serif; letter-spacing:-.06em; }
.roof-pro-hero p { max-width:780px; margin:0; color:#b3c9d2; font-size:1rem; line-height:1.75; }
.roof-pro-hero > div > div { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.roof-pro-hero a { min-height:50px; display:flex; align-items:center; padding:0 18px; color:#123241; border-radius:9px; background:#91d7f6; font-size:.82rem; font-weight:900; text-decoration:none; }
.roof-pro-hero a + a { color:#e5f2f7; border:1px solid rgba(255,255,255,.2); background:transparent; }
.roof-pro-hero aside { display:grid; padding:28px; border:1px solid rgba(255,255,255,.15); border-radius:18px; background:rgba(5,28,39,.34); }
.roof-pro-hero aside strong { color:#fff; font:500 2.8rem Georgia,serif; }
.roof-pro-hero aside span { margin-bottom:23px; color:#a8c2cb; font-size:.76rem; }
.roof-pro-hero aside small { color:#8faab4; font-size:.68rem; line-height:1.55; }
.roof-cover-comparison { margin-top:55px; }
.roof-cover-comparison header { max-width:870px; margin-bottom:23px; }
.roof-cover-comparison h2,.roof-calculator h2,.roof-estimate h2 { margin:8px 0; font:500 clamp(2.3rem,4vw,4.5rem) Georgia,serif; letter-spacing:-.05em; }
.roof-cover-comparison > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.roof-cover-comparison > div > button { min-height:370px; display:flex; flex-direction:column; align-items:stretch; padding:27px; color:var(--roof-ink); border:1px solid #cedce2; border-radius:16px; background:#fff; text-align:left; }
.roof-cover-comparison > div > button.active { color:#edf7fb; border-color:#174b64; background:linear-gradient(145deg,#163b4d,#17648a); box-shadow:0 22px 55px rgba(22,77,102,.18); }
.roof-cover-comparison button > span { color:#1b7eb5; font-size:.63rem; font-weight:900; letter-spacing:.1em; }
.roof-cover-comparison button.active > span { color:#8cd5f5; }
.roof-cover-comparison h3 { margin:36px 0 18px; font:500 1.5rem Georgia,serif; }
.roof-cover-comparison button > div { display:grid; gap:6px; margin-bottom:14px; }
.roof-cover-comparison button > div strong { font-size:.7rem; }.roof-cover-comparison button small { color:#667d87; font-size:.66rem; }.roof-cover-comparison button.active small { color:#b8ced6; }
.roof-cover-comparison button > b { margin-top:auto; font-size:.75rem; }
.roof-calculator { display:grid; grid-template-columns:minmax(0,1fr) 390px; overflow:hidden; margin-top:55px; border:1px solid #ccdae0; border-radius:22px; background:#fff; box-shadow:0 25px 70px rgba(18,54,70,.09); }
.roof-calculator-form { min-width:0; padding:clamp(34px,5vw,68px); }
.roof-calculator-form > span,.roof-price-editor > span,.roof-estimate header span { color:var(--roof-blue); }
.roof-type-current { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:22px 0 10px; padding:13px 15px; border:1px solid #c9dbe4; border-radius:11px; background:linear-gradient(110deg,#edf7fb,#fff); }
.roof-type-current > span { min-width:0; display:grid; gap:3px; }.roof-type-current small { color:#6d8792; font-size:.55rem; font-weight:900; letter-spacing:.12em; }.roof-type-current strong { color:#174d68; font-size:.88rem; }
.roof-type-current button { flex:0 0 auto; min-height:38px; padding:0 13px; color:#176ea8; border:1px solid #b9d4e2; border-radius:8px; background:#fff; font-size:.67rem; font-weight:900; }
.roof-type-required { margin:20px 0; padding:15px; border:1px solid #c9dbe4; border-radius:12px; background:#f1f7f9; }.roof-type-required > span { color:#176ea8; font-size:.6rem; font-weight:900; letter-spacing:.12em; }.roof-type-required > p { margin:5px 0 0; color:#6c838d; font-size:.65rem; }.roof-type-required .roof-type-tabs { margin-bottom:0; }
.roof-type-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:22px 0; padding:6px; border-radius:11px; background:#edf3f6; }
.roof-type-tabs button { min-height:42px; color:#58717c; border:0; border-radius:8px; background:transparent; font-size:.72rem; font-weight:850; }.roof-type-tabs button.active { color:#fff; background:var(--roof-blue); }
.roof-plan-paper { min-width:0; margin:0 0 22px; overflow:hidden; border:1px solid #c8dae4; border-radius:15px; background:#f8fcfe; box-shadow:inset 0 0 45px rgba(80,150,186,.08); }
.roof-plan-paper-head { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:17px 19px; border-bottom:1px solid #d5e4eb; background:rgba(255,255,255,.94); }
.roof-plan-paper-head > div { display:grid; gap:4px; }.roof-plan-paper-head span { color:#1675aa; font-size:.61rem; font-weight:900; letter-spacing:.12em; }.roof-plan-paper-head strong { font:500 1.25rem Georgia,serif; }.roof-plan-paper-head p { max-width:480px; margin:0; color:#6e858f; font-size:.65rem; line-height:1.5; text-align:right; }
.roof-plan-paper svg { width:100%; height:auto; max-height:570px; display:block; touch-action:none; user-select:none; }
.roof-plan-outline { fill:rgba(223,239,247,.78); stroke:#183f54; stroke-width:5; filter:drop-shadow(0 8px 8px rgba(28,71,93,.12)); }
.roof-plan-ridge { fill:none; stroke:#d47b38; stroke-width:8; stroke-linecap:round; }.roof-plan-hip { fill:none; stroke:#3185b3; stroke-width:5; stroke-linecap:round; }.roof-plan-valley { fill:none; stroke:#15957f; stroke-width:7; stroke-dasharray:12 7; stroke-linecap:round; }.roof-plan-break { fill:none; stroke:#7f6d9f; stroke-width:5; stroke-dasharray:10 6; }.roof-plan-slope { fill:none; stroke:#4a87aa; stroke-width:4; stroke-dasharray:10 8; }.roof-plan-slope.muted,.roof-plan-hip.muted { opacity:.55; }.roof-plan-drain { fill:#fff; stroke:#176f9e; stroke-width:5; }.roof-custom-vertex { fill:#fff; stroke:#15957f; stroke-width:6; cursor:move; filter:drop-shadow(0 3px 5px rgba(10,87,75,.3)); }
.roof-plan-dimension { stroke:#67828f; stroke-width:2; }.roof-plan-measure { fill:#294c5d; font-size:18px; font-weight:900; text-anchor:middle; }.roof-plan-label rect { fill:rgba(17,51,68,.9); }.roof-plan-label text { fill:#fff; font-size:14px; font-weight:850; text-anchor:middle; }.roof-plan-label text + text { fill:#8dd4f5; font-size:11px; }
.roof-plan-handle { fill:#fff; stroke:#1581bd; stroke-width:7; cursor:ew-resize; filter:drop-shadow(0 4px 5px rgba(15,87,125,.28)); }.roof-plan-handle:nth-last-child(2) { cursor:ns-resize; }.roof-plan-handle.corner { fill:#1581bd; stroke:#fff; cursor:nwse-resize; }
.roof-feature-marker { cursor:grab; filter:drop-shadow(0 4px 4px rgba(21,63,82,.2)); }.roof-feature-marker:active { cursor:grabbing; }.roof-feature-marker rect,.roof-feature-marker path,.roof-feature-marker circle { vector-effect:non-scaling-stroke; }.roof-feature-marker line,.roof-feature-marker path { fill:none; stroke:currentColor; stroke-width:3; }.roof-feature-marker .roof-feature-hit { fill:#fff; stroke:currentColor; stroke-width:3; }.roof-feature-marker.roofWindows { color:#1681bd; }.roof-feature-marker.chimneys { color:#9a5436; }.roof-feature-marker.chimneys .roof-feature-hit { fill:#d79473; }.roof-feature-marker.chimneys path { fill:#79412c; stroke:#79412c; }.roof-feature-marker.roofHatches { color:#237b70; }.roof-feature-marker.dormers { color:#735e9d; }.roof-feature-marker.dormers .roof-feature-hit { fill:#e9e4f3; }.roof-feature-marker.roofVents { color:#5f7480; }.roof-feature-marker.solarModules { color:#17628c; }.roof-feature-marker.solarModules .roof-feature-hit { fill:#c9e8f5; }.roof-feature-marker.selected .roof-feature-hit { stroke:#f07b31; stroke-width:5; filter:drop-shadow(0 0 5px rgba(240,123,49,.45)); }.roof-feature-resize-handle { fill:#f07b31!important; stroke:#fff!important; stroke-width:4!important; cursor:nwse-resize; }.roof-feature-delete-handle { color:#fff; cursor:pointer; }.roof-feature-delete-handle circle { fill:#c94838!important; stroke:#fff!important; stroke-width:3!important; }.roof-feature-delete-handle path { fill:none!important; stroke:#fff!important; stroke-width:2.5!important; stroke-linecap:round; }.roof-feature-size { fill:#133d51; font-size:13px; font-weight:900; text-anchor:middle; paint-order:stroke; stroke:#fff; stroke-width:4px; stroke-linejoin:round; }
.roof-plan-paper footer { display:flex; flex-wrap:wrap; align-items:center; gap:15px; padding:13px 17px; color:#657d88; border-top:1px solid #d5e4eb; background:#fff; font-size:.59rem; }.roof-plan-paper footer span { display:flex; align-items:center; gap:6px; }.roof-plan-paper footer i { width:19px; height:3px; display:inline-block; background:#d47b38; }.roof-plan-paper footer i.hip { background:#3185b3; }.roof-plan-paper footer i.valley { height:0; border-top:3px dashed #15957f; background:transparent; }.roof-plan-paper footer i.slope { border-top:2px dashed #4a87aa; background:transparent; }.roof-plan-paper footer i.feature { width:12px; height:12px; border:2px solid #1681bd; border-radius:2px; background:#d8f0fb; }.roof-plan-paper footer kbd { min-width:25px; padding:3px 5px; color:#8e3d32; border:1px solid #dfc2bd; border-radius:4px; background:#fff5f3; font:800 .52rem sans-serif; text-align:center; }.roof-plan-paper footer strong { margin-left:auto; color:#315a6e; }
.roof-feature-panel { margin:0 0 22px; padding:17px; border:1px solid #cadce4; border-radius:14px; background:#f3f8fa; }
.roof-feature-panel > header { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:13px; }.roof-feature-panel > header > div { display:grid; gap:4px; }.roof-feature-panel > header span { color:#176ea8; font-size:.57rem; font-weight:900; letter-spacing:.12em; }.roof-feature-panel > header strong { font:500 1.1rem Georgia,serif; }.roof-feature-panel > header small { max-width:430px; color:#708792; font-size:.62rem; line-height:1.45; text-align:right; }
.roof-feature-panel > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }.roof-feature-panel article { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px; align-items:center; padding:10px; border:1px solid #d6e2e7; border-radius:10px; background:#fff; }.roof-feature-panel article.active { border-color:#79b9d7; background:#eaf6fb; box-shadow:inset 3px 0 #1780ba; }.roof-feature-panel article > span { min-width:0; display:grid; gap:2px; }.roof-feature-panel article > span strong { overflow:hidden; font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }.roof-feature-panel article > span small { color:#718690; font-size:.53rem; }
.roof-feature-icon { width:32px; height:32px; position:relative; display:block; color:#176ea8; border-radius:8px; background:#e6f1f6; }.roof-feature-icon::before,.roof-feature-icon::after { content:""; position:absolute; inset:8px; border:2px solid currentColor; }.roof-feature-icon.chimneys { color:#9a5436; }.roof-feature-icon.chimneys::before { inset:7px 9px 5px; background:#d79473; }.roof-feature-icon.chimneys::after { inset:4px 7px 23px; background:#7e4631; }.roof-feature-icon.roofHatches { color:#237b70; }.roof-feature-icon.roofHatches::after { border-width:0 0 2px 2px; transform:rotate(-45deg) scale(.7); }.roof-feature-icon.dormers { color:#735e9d; }.roof-feature-icon.dormers::before { inset:9px 7px 5px; }.roof-feature-icon.dormers::after { inset:5px 8px 14px; border-width:2px 2px 0 0; transform:rotate(-45deg); }.roof-feature-icon.roofVents { color:#5f7480; }.roof-feature-icon.roofVents::before { inset:6px 10px 15px; border-radius:50%; }.roof-feature-icon.roofVents::after { inset:15px 12px 5px; border-top:0; }.roof-feature-icon.solarModules { color:#17628c; }.roof-feature-icon.solarModules::before { inset:7px 5px; background:linear-gradient(90deg,transparent 47%,currentColor 48% 52%,transparent 53%),linear-gradient(transparent 47%,currentColor 48% 52%,transparent 53%); }
.roof-feature-panel article > div { grid-column:1 / -1; display:grid; grid-template-columns:31px 1fr 31px; overflow:hidden; border:1px solid #cbdce4; border-radius:7px; background:#fff; }.roof-feature-panel article > div button { min-height:30px; color:#176ea8; border:0; background:#edf5f8; font-size:1rem; font-weight:900; }.roof-feature-panel article > div input { min-width:0; width:100%; border:0; background:#fff; font-size:.7rem; font-weight:900; text-align:center; outline:none; }
.roof-element-editor { margin-top:12px; padding:15px; border:1px solid #86bfd9; border-radius:12px; background:#fff; box-shadow:0 12px 28px rgba(20,92,126,.08); }.roof-element-editor > header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:12px; border-bottom:1px solid #dce8ed; }.roof-element-editor > header > span { display:grid; gap:3px; }.roof-element-editor > header small { color:#1777a9; font-size:.55rem; font-weight:900; letter-spacing:.12em; }.roof-element-editor > header strong { font:500 1.15rem Georgia,serif; }.roof-element-editor > header > b { max-width:260px; overflow:hidden; color:#80929a; font-size:.53rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }.roof-element-editor > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-top:13px; }.roof-element-editor label { display:grid; gap:6px; color:#617984; font-size:.6rem; font-weight:850; }.roof-element-editor label > div { display:grid; grid-template-columns:1fr auto; align-items:center; overflow:hidden; border:1px solid #ccdae0; border-radius:8px; }.roof-element-editor input { min-width:0; width:100%; height:39px; padding:0 9px; border:0; outline:none; font-size:.72rem; font-weight:900; }.roof-element-editor label b { padding:0 9px; color:#7b9098; font-size:.56rem; }.roof-element-editor footer { display:flex; justify-content:flex-end; gap:7px; margin-top:12px; }.roof-element-editor footer button { min-height:38px; padding:0 13px; color:#176ea8; border:1px solid #bfd5df; border-radius:8px; background:#eef6f9; font-size:.64rem; font-weight:900; }.roof-element-editor footer button:last-child { color:#a33d2e; border-color:#e3c0ba; background:#fff4f2; }
.roof-input-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.roof-input-grid label,.roof-price-editor label { display:grid; gap:7px; color:#526c77; font-size:.71rem; font-weight:800; }
.roof-input-grid label > div,.roof-price-editor label > div { display:grid; grid-template-columns:1fr auto; align-items:center; overflow:hidden; border:1px solid #cbd9df; border-radius:9px; background:#fff; }
.roof-input-grid input,.roof-price-editor input { min-width:0; height:48px; padding:0 13px; border:0; background:transparent; font-size:.86rem; font-weight:800; outline:none; }.roof-input-grid b,.roof-price-editor b { padding:0 12px; color:#788e97; font-size:.62rem; }
.roof-geometry-summary { display:grid; grid-template-columns:repeat(3,1fr); overflow:hidden; margin-top:18px; border:1px solid #d5e1e5; border-radius:11px; }.roof-geometry-summary article { display:grid; gap:7px; padding:15px; }.roof-geometry-summary article + article { border-left:1px solid #dce6ea; }.roof-geometry-summary article:nth-child(4) { border-left:0; }.roof-geometry-summary article:nth-child(n+4) { border-top:1px solid #dce6ea; }.roof-geometry-summary span { color:#72868e; font-size:.62rem; }.roof-geometry-summary strong { font-size:.88rem; }
.roof-price-editor { display:grid; align-content:center; gap:12px; padding:34px; color:#e7f2f6; background:#163b4c; }.roof-price-editor > span { color:#85d2f5; }.roof-price-editor h2 { color:#fff; font-size:2.5rem; }.roof-price-editor > p { margin:0 0 12px; color:#9db5be; font-size:.76rem; line-height:1.6; }.roof-price-editor label { color:#bed0d6; }.roof-price-editor label > div { border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.08); }.roof-price-editor input { color:#fff; }.roof-price-editor b { color:#9cb3bc; }
.roof-estimate { overflow:hidden; margin-top:26px; border:1px solid #ccdbe0; border-radius:20px; background:#fff; box-shadow:0 22px 60px rgba(18,52,66,.08); }.roof-estimate > header { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:30px; border-bottom:1px solid #d8e3e7; }.roof-estimate > header > strong { color:#176ea8; font:500 2.3rem Georgia,serif; }.roof-estimate-head,.roof-estimate > article { display:grid; grid-template-columns:minmax(300px,1fr) 150px 150px 170px; align-items:center; gap:15px; padding:14px 24px; }.roof-estimate-head { color:#738891; background:#edf3f5; font-size:.62rem; font-weight:900; }.roof-estimate > article { border-top:1px solid #e0e8eb; }.roof-estimate > article > div { min-width:0; display:grid; gap:5px; }.roof-estimate > article > div strong { font-size:.8rem; }.roof-estimate > article small { color:#72858d; font-size:.64rem; }.roof-estimate > article > span { font-size:.72rem; }.roof-estimate > article > label { display:grid; grid-template-columns:1fr auto; align-items:center; overflow:hidden; border:1px solid #d2dee3; border-radius:8px; }.roof-estimate > article input { min-width:0; height:39px; padding:0 9px; border:0; background:#f8fafb; }.roof-estimate > article label b { padding:0 9px; color:#758991; font-size:.59rem; }.roof-estimate > article > strong { justify-self:end; font-size:.8rem; }.roof-estimate footer { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:23px; border-top:1px solid #d9e4e8; }.roof-estimate footer button { min-height:44px; padding:0 15px; color:#315665; border:1px solid #c8d9df; border-radius:8px; background:#f5f8f9; font-size:.7rem; font-weight:850; }.roof-estimate footer button:first-child { color:#fff; border-color:var(--roof-blue); background:var(--roof-blue); }

@media (max-width:1050px) {
  .creator-directory-hero,.roof-pro-hero { grid-template-columns:1fr; }
  .creator-directory-layout { grid-template-columns:1fr; }
  .creator-directory-list { max-height:500px; }
  .creator-page-list { grid-template-columns:1fr; }
  .creator-detail-hero > div { grid-template-columns:1fr; }.creator-detail-hero aside { grid-column:1; grid-row:auto; }.creator-related-tools > div { grid-template-columns:repeat(2,1fr); }
  .roof-cover-comparison > div { grid-template-columns:repeat(2,1fr); }
  .roof-calculator { grid-template-columns:1fr; }
  .roof-plan-paper svg { max-height:520px; }
  .roof-feature-panel > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .roof-element-editor > div { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .roof-price-editor { grid-template-columns:repeat(2,1fr); }
  .roof-price-editor > span,.roof-price-editor h2,.roof-price-editor > p { grid-column:1 / -1; }
  .roof-estimate-head,.roof-estimate > article { grid-template-columns:minmax(240px,1fr) 120px 130px 140px; }
}

@media (max-width:680px) {
  .system-tradeoffs { grid-template-columns:1fr; }
  .creator-directory-page,.roof-pro-page { padding-top:10px; }
  .creator-directory-hero,.creator-directory-browser,.roof-pro-hero,.roof-cover-comparison,.roof-calculator,.roof-estimate { width:calc(100% - 20px); }
  .creator-directory-hero,.roof-pro-hero { min-height:0; gap:30px; padding:34px 20px; border-radius:18px; }
  .creator-directory-hero h1,.roof-pro-hero h1 { font-size:3.25rem; }
  .creator-directory-browser { min-width:0; padding:15px 11px; border-radius:16px; }
  .creator-directory-browser > header { align-items:stretch; flex-direction:column; }.creator-directory-browser > header label { width:100%; }
  .creator-directory-browser > nav { grid-template-columns:repeat(2,minmax(0,1fr)); padding:7px; }.creator-directory-browser > nav a { padding:7px 9px; font-size:.63rem; }
  .creator-page-list { grid-template-columns:1fr; }.creator-page-list > a { grid-template-columns:38px minmax(0,1fr); }.creator-page-list > a > b { grid-column:2; white-space:normal; }
  .creator-directory-layout { grid-template-columns:1fr; }.creator-directory-list { max-height:430px; }.creator-directory-list > button { grid-template-columns:38px minmax(0,1fr); }.creator-directory-list > button > b { grid-column:2; }.creator-directory-active { padding:9px; }.creator-directory-active .subcategory-calculator-form,.creator-directory-active .subcategory-calculator-result { padding:24px 16px; }
  .creator-detail-hero,.creator-detail-calculator,.creator-related-tools { width:calc(100% - 20px); }.creator-detail-hero { padding:29px 18px; border-radius:17px; }.creator-detail-hero nav { margin-bottom:30px; }.creator-detail-hero > div { gap:25px; }.creator-detail-hero h1 { font-size:3rem; }.creator-related-tools > div { grid-template-columns:1fr; }.creator-related-tools > div a { min-height:160px; }
  .creator-directory-cta { width:calc(100% - 20px); align-items:stretch; flex-direction:column; }.creator-directory-cta a { justify-content:center; }
  .roof-cover-comparison > div { grid-template-columns:1fr; }.roof-cover-comparison > div > button { min-height:330px; }.roof-calculator-form,.roof-price-editor { padding:28px 13px; }.roof-type-current { margin-top:16px; }.roof-type-tabs { grid-template-columns:1fr 1fr; }.roof-plan-paper-head { align-items:flex-start; flex-direction:column; padding:14px; }.roof-plan-paper-head p { text-align:left; }.roof-plan-paper svg { min-height:310px; max-height:none; }.roof-plan-paper footer { gap:9px; }.roof-plan-paper footer strong { width:100%; margin-left:0; }.roof-feature-panel { padding:13px 10px; }.roof-feature-panel > header { align-items:flex-start; flex-direction:column; gap:8px; }.roof-feature-panel > header small { text-align:left; }.roof-feature-panel > div { grid-template-columns:1fr; }.roof-element-editor > header { align-items:flex-start; flex-direction:column; gap:6px; }.roof-element-editor > div { grid-template-columns:1fr 1fr; }.roof-element-editor footer { align-items:stretch; flex-direction:column; }.roof-input-grid,.roof-price-editor { grid-template-columns:1fr; }.roof-price-editor > span,.roof-price-editor h2,.roof-price-editor > p { grid-column:auto; }.roof-geometry-summary { grid-template-columns:1fr 1fr; }.roof-geometry-summary article { border-left:0!important; border-top:1px solid #dce6ea; }.roof-geometry-summary article:nth-child(even) { border-left:1px solid #dce6ea!important; }.roof-geometry-summary article:nth-child(-n+2) { border-top:0; }.roof-estimate > header { align-items:flex-start; flex-direction:column; padding:23px 16px; }.roof-estimate-head { display:none; }.roof-estimate > article { grid-template-columns:1fr auto; gap:10px; padding:17px 14px; }.roof-estimate > article > div { grid-column:1 / -1; }.roof-estimate > article > label { width:120px; }.roof-estimate > article > strong { align-self:center; }.roof-estimate footer { justify-content:stretch; }.roof-estimate footer button { flex:1 1 100%; }
}

@media print {
  .roof-pro-hero,.roof-cover-comparison,.roof-calculator,.portal-header,.portal-footer { display:none!important; }
  .roof-estimate { width:100%; margin:0; border:0; box-shadow:none; }
  .roof-estimate footer { display:none; }
}

/* Creator directory: photographic sidebar and system sections */
.creator-browser-layout { min-width:0; display:grid; grid-template-columns:275px minmax(0,1fr); gap:18px; margin-top:4px; }
.creator-category-sidebar { min-width:0; align-self:start; overflow:hidden; border:1px solid #d2dfdc; border-radius:16px; background:#f4f8f7; }
.creator-category-sidebar > header { display:grid; gap:5px; padding:20px; color:#dff5ef; background:linear-gradient(145deg,#123e43,#0c6f63); }
.creator-category-sidebar > header span { color:#7edbc8; font-size:.58rem; font-weight:900; letter-spacing:.14em; }
.creator-category-sidebar > header strong { font:500 1.35rem Georgia,serif; }
.creator-category-sidebar nav { display:grid; padding:8px; }
.creator-category-sidebar nav a { min-width:0; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 10px; color:#294a4f; border-radius:10px; text-decoration:none; }
.creator-category-sidebar nav a:hover { background:#e7f1ee; }
.creator-category-sidebar nav a.active { color:#fff; background:#0d826f; box-shadow:0 10px 24px rgba(13,130,111,.2); }
.creator-category-sidebar nav a > i { width:36px; height:36px; display:grid; place-items:center; color:#0d826f; border-radius:9px; background:#dfece9; font-style:normal; }
.creator-category-sidebar nav a.active > i { color:#fff; background:rgba(255,255,255,.16); }
.creator-category-sidebar nav a > span { min-width:0; display:grid; gap:3px; }
.creator-category-sidebar nav a strong { font-size:.72rem; }
.creator-category-sidebar nav a small { overflow:hidden; color:#78908c; font-size:.54rem; text-overflow:ellipsis; white-space:nowrap; }
.creator-category-sidebar nav a.active small { color:#bfe3db; }
.creator-category-sidebar nav a > b { min-width:25px; padding:5px; color:#55716d; border-radius:99px; background:#dfe9e7; font-size:.56rem; text-align:center; }
.creator-category-sidebar nav a.active > b { color:#fff; background:rgba(255,255,255,.16); }
.creator-results-panel { min-width:0; }
.creator-results-heading { min-height:78px; display:grid; grid-template-columns:1fr auto; align-content:center; gap:4px 20px; padding:3px 3px 15px; }
.creator-results-heading > span { color:#0d826f; font-size:.6rem; font-weight:900; letter-spacing:.13em; }
.creator-results-heading > strong { grid-column:2; grid-row:1 / 3; align-self:center; color:#173b40; font:500 1.7rem Georgia,serif; }
.creator-results-heading > small { color:#718783; font-size:.66rem; }
.creator-results-panel .creator-page-list { margin-top:0; }
.creator-page-list > a { position:relative; grid-template-columns:150px minmax(0,1fr) auto; min-height:152px; padding:0 17px 0 0; overflow:hidden; }
.creator-page-list > a > .creator-card-media { position:relative; width:150px; height:100%; min-height:152px; display:flex; align-items:flex-start; justify-content:space-between; padding:15px; color:#fff; border-radius:0; background-size:400% 300%; background-repeat:no-repeat; box-shadow:inset -45px 0 50px rgba(10,39,42,.13); }
.creator-card-media::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(6,32,36,.16),rgba(4,28,32,.82)); }
.creator-card-media > span,.creator-card-media > svg { position:relative; z-index:1; }
.creator-card-media > span { min-width:31px; padding:6px; border:1px solid rgba(255,255,255,.27); border-radius:8px; background:rgba(5,26,30,.38); font-size:.56rem; font-weight:900; text-align:center; backdrop-filter:blur(8px); }
.creator-card-media > svg { margin-top:auto; align-self:flex-end; }
.creator-page-list > a:hover .creator-card-media { filter:saturate(1.08) contrast(1.03); }
.creator-page-list strong { font-size:.88rem; line-height:1.25; }
.creator-page-list em { white-space:normal; line-height:1.5; }
.creator-system-visual { position:relative; min-height:315px; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:18px; background-size:400% 300%; background-repeat:no-repeat; box-shadow:0 22px 55px rgba(2,18,21,.28); }
.creator-detail-hero aside.creator-system-visual { display:block; padding:0; background-color:#0d3035; }
.creator-system-visual::before { content:""; position:absolute; inset:0; background:linear-gradient(145deg,rgba(4,29,33,.25),rgba(5,30,34,.86)); }
.creator-section-card { position:absolute; inset:22px; display:grid; grid-template-rows:auto 1fr auto; padding:18px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(5,29,33,.6); backdrop-filter:blur(10px); }
.creator-section-card header,.creator-section-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.creator-section-card header span { color:#79ddc6; font-size:.55rem; font-weight:900; letter-spacing:.12em; }
.creator-section-card header strong { overflow:hidden; color:#fff; font-size:.67rem; text-overflow:ellipsis; white-space:nowrap; }
.creator-section-layers { display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:4px; padding:22px 0 14px; }
.creator-section-layers span { min-width:0; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; color:#c7dbd7; font-size:.47rem; text-align:center; }
.creator-section-layers i { min-height:75px; border:1px solid rgba(255,255,255,.18); border-radius:4px; background:linear-gradient(180deg,#d8dfd5,#8fa79f); box-shadow:inset 0 0 20px rgba(255,255,255,.26); }
.creator-section-layers span:nth-child(2) i { min-height:118px; background:repeating-linear-gradient(135deg,#c79b64 0 7px,#ad8050 7px 14px); }
.creator-section-layers span:nth-child(3) i { min-height:98px; background:repeating-linear-gradient(135deg,#dce9cc 0 8px,#bad4ad 8px 16px); }
.creator-section-layers span:nth-child(4) i { min-height:130px; background:linear-gradient(90deg,#6e7f82,#bac6c4); }
.creator-section-card footer { padding-top:10px; border-top:1px solid rgba(255,255,255,.13); }
.creator-section-card footer small { color:#88aaa4; font-size:.5rem; }
.creator-section-card footer b { color:#fff; font-size:.56rem; }
.calculator-price-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:10px; padding-top:16px; border-top:1px solid #d4e1de; }
.calculator-price-grid label { display:grid; gap:6px; color:#526e70; font-size:.61rem; font-weight:850; }
.calculator-price-grid label > div { display:grid; grid-template-columns:1fr auto; align-items:center; overflow:hidden; border:1px solid #cbdad7; border-radius:8px; background:#fff; }
.calculator-price-grid input { min-width:0; height:43px; padding:0 11px; border:0; background:transparent; font-size:.76rem; font-weight:850; outline:none; }
.calculator-price-grid b { padding:0 11px; color:#718784; font-size:.58rem; }
.subcategory-calculator-result > .calculator-cost-total { display:grid; grid-template-columns:1fr auto; gap:5px 15px; margin-top:14px; padding:15px; border-color:rgba(111,217,197,.34); background:rgba(17,126,109,.2); }
.calculator-cost-total span { color:#9fc8c0; font-size:.58rem; }
.calculator-cost-total strong { color:#fff; font:500 1.35rem Georgia,serif; }
.calculator-cost-total small { grid-column:1 / -1; color:#86aaa5; font-size:.5rem; }
.calculator-portfolio-total { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:9px; padding:11px 13px; color:#a8c7c2; border:1px solid rgba(255,255,255,.1); border-radius:9px; background:rgba(2,24,28,.22); }
.calculator-portfolio-total span { font-size:.53rem; }
.calculator-portfolio-total strong { color:#8ce1ce; font-size:.78rem; }

@media (max-width:1050px) {
  .creator-browser-layout { grid-template-columns:240px minmax(0,1fr); }
}

@media (max-width:760px) {
  .creator-browser-layout { grid-template-columns:1fr; }
  .creator-category-sidebar nav { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:290px; overflow-y:auto; }
  .creator-category-sidebar nav a { grid-template-columns:34px minmax(0,1fr) auto; padding:8px 7px; }
  .creator-category-sidebar nav a > i { width:32px; height:32px; }
  .creator-category-sidebar nav a small { display:none; }
  .creator-results-heading { grid-template-columns:1fr; padding-top:6px; }
  .creator-results-heading > strong { grid-column:1; grid-row:auto; }
  .creator-results-heading > small { line-height:1.45; }
  .creator-page-list > a { grid-template-columns:102px minmax(0,1fr); min-height:132px; padding-right:10px; }
  .creator-page-list > a > .creator-card-media { width:102px; min-height:132px; }
  .creator-page-list > a > b { grid-column:2; white-space:normal; }
  .creator-page-list em { display:none; }
  .calculator-price-grid { grid-template-columns:1fr; }
}

/* Premium creator detail pages */
.creator-detail-page { background:radial-gradient(circle at 88% 9%,rgba(29,144,123,.12),transparent 26%),linear-gradient(180deg,#e6efed,#f8faf9 720px,#edf3f1); }
.creator-detail-hero { min-height:570px; overflow:hidden; background:radial-gradient(circle at 75% 15%,rgba(44,173,149,.2),transparent 30%),linear-gradient(135deg,#0d3037,#123f43 58%,#0b292f); }
.creator-detail-hero > div { grid-template-columns:minmax(0,1fr) minmax(350px,430px); gap:clamp(35px,5vw,75px); align-items:center; }
.creator-detail-hero h1 { max-width:830px; }
.creator-detail-hero p { max-width:690px; font-size:1rem; }
.creator-detail-hero aside.creator-system-visual { min-height:370px; background-size:400% 300%; }
.creator-system-visual.roof-tile-system-visual { background-size:cover; background-position:center; }
.creator-system-visual::before { background:linear-gradient(135deg,rgba(3,25,29,.12),rgba(3,25,29,.2) 45%,rgba(3,25,29,.78)); }
.creator-photo-system-card { position:absolute; inset:0; display:grid; grid-template-rows:auto 1fr auto; padding:22px; }
.creator-photo-system-card header,.creator-photo-system-card footer { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(4,28,31,.55); backdrop-filter:blur(12px); }
.creator-photo-system-card header span { color:#8ae2cf; font-size:.55rem; font-weight:900; letter-spacing:.13em; }
.creator-photo-system-card header strong { overflow:hidden; color:#fff; font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
.creator-photo-callouts { position:relative; z-index:2; width:min(210px,70%); display:grid; align-content:center; gap:7px; margin-left:auto; }
.creator-photo-callouts span { display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:8px; min-height:40px; padding:5px 9px 5px 5px; color:#eaf7f4; border:1px solid rgba(255,255,255,.17); border-radius:9px; background:rgba(4,28,31,.69); box-shadow:0 8px 20px rgba(1,15,18,.2); backdrop-filter:blur(11px); }
.creator-photo-callouts i { width:29px; height:29px; display:grid; place-items:center; color:#89e3d0; border-radius:7px; background:rgba(90,211,185,.14); font-style:normal; font-size:.51rem; font-weight:900; }
.creator-photo-callouts b { overflow:hidden; font-size:.59rem; text-overflow:ellipsis; white-space:nowrap; }
.creator-photo-system-card footer { align-self:end; }
.creator-photo-system-card footer small { color:#a6c0ba; font-size:.51rem; }
.creator-photo-system-card footer b { color:#fff; font-size:.57rem; }
.creator-detail-scope { width:min(1500px,calc(100% - 40px)); margin:28px auto 0; padding:30px; border:1px solid #cfddda; border-radius:20px; background:rgba(255,255,255,.88); box-shadow:0 18px 50px rgba(20,58,62,.08); }
.creator-detail-scope > header { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,430px); gap:35px; align-items:end; margin-bottom:22px; }
.creator-detail-scope > header span { color:#118675; font-size:.61rem; font-weight:900; letter-spacing:.14em; }
.creator-detail-scope h2 { margin:7px 0 0; font:500 clamp(1.7rem,2.8vw,2.8rem) Georgia,serif; letter-spacing:-.04em; }
.creator-detail-scope > header p { margin:0; color:#69817d; font-size:.72rem; line-height:1.65; }
.creator-detail-scope > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.creator-detail-scope article { min-width:0; min-height:120px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:13px; align-items:start; padding:18px; border:1px solid #d8e3e0; border-radius:13px; background:linear-gradient(145deg,#fff,#f2f7f5); }
.creator-detail-scope article > i { width:40px; height:40px; display:grid; place-items:center; color:#0d836f; border-radius:10px; background:#dff0eb; font-style:normal; }
.creator-detail-scope article > span { min-width:0; display:grid; gap:4px; }
.creator-detail-scope article small { color:#15927d; font-size:.52rem; font-weight:900; }
.creator-detail-scope article strong { overflow:hidden; font-size:.76rem; text-overflow:ellipsis; white-space:nowrap; }
.creator-detail-scope article em { color:#718581; font-size:.58rem; font-style:normal; line-height:1.45; }
.creator-detail-calculator { margin-top:28px; }
.creator-detail-calculator .subcategory-calculator {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 23px;
    box-shadow: 0 28px 80px rgba(15, 50, 54, .14);
}.creator-detail-calculator .subcategory-calculator-form { position:relative; overflow:hidden; background-color:#f8fbfa; background-image:linear-gradient(rgba(17,134,117,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(17,134,117,.045) 1px,transparent 1px),linear-gradient(145deg,rgba(255,255,255,.96),rgba(237,245,242,.94)); background-size:28px 28px,28px 28px,100% 100%; }
.creator-detail-calculator .subcategory-calculator-result { background:radial-gradient(circle at 88% 9%,rgba(67,211,181,.2),transparent 33%),linear-gradient(145deg,#0c3037,#124c4d); }
.calculator-step-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0 0 22px; padding:6px; border:1px solid #d5e3df; border-radius:11px; background:rgba(255,255,255,.75); }
.calculator-step-row span { display:flex; align-items:center; gap:7px; color:#6a817d; font-size:.58rem; font-weight:850; }
.calculator-step-row i { width:26px; height:26px; display:grid; place-items:center; color:#118675; border-radius:7px; background:#e3f2ee; font-style:normal; font-size:.5rem; }
.creator-related-tools > div a { padding:0 18px 18px; overflow:hidden; }
.creator-related-media { position:relative; height:105px; display:flex; align-items:flex-end; justify-content:flex-end; margin:0 -18px 16px; padding:13px; color:#fff; background-size:400% 300%; background-repeat:no-repeat; }
.creator-related-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(5,28,31,.08),rgba(5,28,31,.7)); }
.creator-related-media svg { position:relative; z-index:1; }
.creator-related-tools a strong { margin:14px 0 15px; }

@media (max-width:1050px) {
  .creator-detail-hero > div { grid-template-columns:1fr; }
  .creator-detail-hero aside.creator-system-visual { min-height:440px; }
  .creator-detail-scope > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .creator-detail-calculator .subcategory-calculator { grid-template-columns:1fr; }
}

@media (max-width:680px) {
  .creator-detail-hero { min-height:0; }
  .creator-detail-hero aside.creator-system-visual { min-height:360px; }
  .creator-photo-system-card { padding:13px; }
  .creator-photo-callouts { width:72%; }
  .creator-detail-scope { width:calc(100% - 20px); padding:20px 14px; border-radius:16px; }
  .creator-detail-scope > header { grid-template-columns:1fr; gap:12px; }
  .creator-detail-scope > div { grid-template-columns:1fr 1fr; }
  .creator-detail-scope article { grid-template-columns:34px minmax(0,1fr); min-height:112px; gap:9px; padding:13px 10px; }
  .creator-detail-scope article > i { width:34px; height:34px; }
  .creator-detail-scope article strong { white-space:normal; }
  .calculator-step-row { grid-template-columns:1fr 1fr; }
}

/* Compact creator headers with larger working typography */
.creator-directory-page { padding-top:12px; }
.creator-directory-hero { min-height:345px; gap:38px; padding:44px 58px; }
.creator-directory-hero h1 { max-width:880px; margin:12px 0 16px; font-size:clamp(3rem,4.5vw,5rem); line-height:.94; }
.creator-directory-hero p { font-size:1.08rem; line-height:1.65; }
.creator-directory-hero aside { padding:22px; }
.creator-directory-browser { margin-top:22px; padding:22px; }
.creator-directory-browser > header { padding-bottom:18px; }
.creator-directory-browser h2 { font-size:clamp(2.1rem,3vw,3.35rem); }
.creator-category-sidebar nav a strong { font-size:.79rem; }
.creator-category-sidebar nav a small { font-size:.61rem; }
.creator-page-list small { font-size:.61rem; }
.creator-page-list strong { font-size:.96rem; }
.creator-page-list em { font-size:.73rem; }
.creator-page-list > a > b { font-size:.66rem; }
.creator-detail-hero { min-height:425px; padding:32px 52px; }
.creator-detail-hero nav { margin-bottom:20px; font-size:.8rem; }
.creator-detail-hero > div { grid-template-columns:minmax(0,1fr) minmax(320px,370px); gap:42px; }
.creator-detail-hero > div > span { font-size:.79rem; }
.creator-detail-hero h1 { margin:5px 0 10px; font-size:clamp(3.2rem,4.7vw,5.15rem); line-height:.94; }
.creator-detail-hero p { font-size:1.08rem; line-height:1.55; }
.creator-detail-hero aside.creator-system-visual { min-height:300px; }
.creator-photo-system-card { padding:15px; }
.creator-photo-system-card header,.creator-photo-system-card footer { padding:9px 11px; }
.creator-photo-system-card header span { font-size:.62rem; }
.creator-photo-system-card header strong { font-size:.73rem; }
.creator-photo-callouts { width:min(205px,72%); gap:5px; }
.creator-photo-callouts span { min-height:35px; grid-template-columns:27px minmax(0,1fr); }
.creator-photo-callouts i { width:26px; height:26px; font-size:.56rem; }
.creator-photo-callouts b { font-size:.66rem; }
.creator-photo-system-card footer small,.creator-photo-system-card footer b { font-size:.6rem; }
.creator-detail-scope { margin-top:18px; padding:23px; }
.creator-detail-scope > header { gap:26px; margin-bottom:16px; }
.creator-detail-scope > header span { font-size:.69rem; }
.creator-detail-scope h2 { font-size:clamp(1.8rem,2.5vw,2.55rem); }
.creator-detail-scope > header p { font-size:.82rem; }
.creator-detail-scope article { min-height:105px; padding:15px; }
.creator-detail-scope article small { font-size:.59rem; }
.creator-detail-scope article strong { font-size:.86rem; }
.creator-detail-scope article em { font-size:.67rem; }
.creator-detail-calculator { margin-top:18px; }
.subcategory-calculator-form { padding:42px 48px; }
.subcategory-calculator-form > p { font-size:.79rem; }
.calculator-step-row span { font-size:.66rem; }
.calculator-input-grid label,.calculator-price-grid label { font-size:.7rem; }
.calculator-input-grid input,.calculator-price-grid input { font-size:.86rem; }
.subcategory-calculator-result { padding:44px 50px; }
.subcategory-calculator-result article span { font-size:.59rem; }
.subcategory-calculator-result article b { font-size:.75rem; }
.subcategory-calculator-result button { font-size:.71rem; }
.creator-related-tools { margin-top:38px; }
.creator-related-tools h2 { font-size:clamp(2.1rem,3.1vw,3.45rem); }
.creator-related-tools a small { font-size:.64rem; }
.creator-related-tools a strong { font-size:1.14rem; }
.creator-related-tools a span { font-size:.7rem; }

@media (max-width:1050px) {
  .creator-detail-hero { min-height:0; }
  .creator-detail-hero aside.creator-system-visual { min-height:350px; }
}

@media (max-width:680px) {
  .creator-directory-hero,.creator-detail-hero { padding:25px 17px; }
  .creator-directory-hero h1,.creator-detail-hero h1 { font-size:2.65rem; }
  .creator-directory-hero p,.creator-detail-hero p { font-size:.95rem; }
  .creator-detail-hero nav { margin-bottom:16px; font-size:.7rem; }
  .creator-detail-hero aside.creator-system-visual { min-height:295px; }
  .creator-photo-callouts { width:76%; }
  .creator-detail-scope { margin-top:12px; padding:17px 12px; }
  .creator-detail-scope h2 { font-size:1.8rem; }
  .creator-detail-scope > header p { font-size:.76rem; }
  .creator-detail-scope article { min-height:104px; padding:12px 9px; }
  .creator-detail-scope article strong { font-size:.76rem; }
  .creator-detail-scope article em { font-size:.62rem; }
  .subcategory-calculator-form,.subcategory-calculator-result { padding:27px 16px; }
  .creator-related-tools { margin-top:28px; }
}

/* Premium navigation and creator readability pass */
.creator-detail-copy { min-width:0; display:grid; align-content:center; }
.creator-detail-copy > span { color:#79ddc6; font-size:13px; font-weight:900; letter-spacing:.14em; }
.creator-detail-assurances { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.creator-detail-assurances > span { min-height:39px; display:inline-flex; align-items:center; gap:8px; padding:0 12px; color:#dceeea; border:1px solid rgba(255,255,255,.16); border-radius:99px; background:rgba(3,28,32,.34); font-size:13px; font-weight:800; backdrop-filter:blur(10px); }
.creator-detail-assurances svg { color:#7de0ca; }
.creator-category-sidebar nav a { min-height:63px; }
.creator-category-sidebar nav a strong { font-size:14px; }
.creator-category-sidebar nav a small { font-size:12px; line-height:1.35; }
.creator-results-heading > span { font-size:12px; }
.creator-results-heading > small { font-size:14px; }
.creator-page-list small { font-size:12px; }
.creator-page-list strong { font-size:16px; }
.creator-page-list em { font-size:14px; }
.creator-page-list > a > b { min-height:38px; display:flex; align-items:center; font-size:13px; }
.creator-detail-scope > header span { font-size:12px; }
.creator-detail-scope > header p { font-size:15px; }
.creator-detail-scope article small { font-size:12px; }
.creator-detail-scope article strong { font-size:15px; }
.creator-detail-scope article em { font-size:13px; }
.creator-related-tools a small { font-size:12px; }
.creator-related-tools a span { font-size:13px; }
.creator-detail-calculator .calculator-step-row span,
.creator-detail-calculator .calculator-input-grid label,
.creator-detail-calculator .calculator-price-grid label { font-size:13px; }
.creator-detail-calculator .calculator-input-grid input,
.creator-detail-calculator .calculator-price-grid input { font-size:15px; }
.creator-detail-calculator .subcategory-calculator-form > p,
.creator-detail-calculator .subcategory-calculator-result article b,
.creator-detail-calculator .subcategory-calculator-result button { font-size:14px; }

@media (max-width:1050px) {
  .creator-detail-hero > div { grid-template-columns:1fr; gap:24px; }
  .creator-detail-hero aside.creator-system-visual { min-height:360px; }
}

@media (max-width:900px) {
  .construction-portal { padding-bottom:74px; }
  .portal-header { background:#f9faf7; backdrop-filter:none; }
  .portal-main-nav { height:68px; display:grid; grid-template-columns:repeat(4,1fr); gap:3px; position:fixed; z-index:120; right:8px; bottom:7px; left:8px; padding:6px; border:1px solid rgba(120,145,142,.22); border-radius:17px; background:rgba(248,250,248,.94); box-shadow:0 16px 45px rgba(14,43,49,.22); backdrop-filter:blur(20px); }
  .portal-main-nav a { min-width:0; min-height:54px; display:flex; flex-direction:column; justify-content:center; gap:3px; padding:5px 3px; border-radius:11px; font-size:11px; line-height:1.05; text-align:center; }
  .portal-main-nav a svg { width:19px; height:19px; }
  .portal-main-nav a:nth-child(n+5) { display:none; }
  .portal-main-nav a.active { color:#fff; background:linear-gradient(145deg,#123842,#0b7667); box-shadow:0 7px 18px rgba(10,104,91,.22); }
  .portal-main-nav a.active svg { color:#8ce4d0; }
  .portal-footer { padding-bottom:98px; }
}

@media (max-width:680px) {
  .portal-header { box-shadow:0 8px 24px rgba(18,48,55,.08); }
  .portal-brand strong { display:block; font-size:12px; letter-spacing:.05em; }
  .portal-brand > span { width:42px; height:42px; }
  .creator-detail-hero > div { grid-template-columns:minmax(0,1fr); gap:22px; }
  .creator-detail-copy { width:100%; }
  .creator-detail-hero h1 { max-width:100%; margin:10px 0 14px; font-size:clamp(2.7rem,13vw,3.5rem); line-height:.92; overflow-wrap:normal; word-break:normal; }
  .creator-detail-hero p { max-width:100%; font-size:16px; line-height:1.65; }
  .creator-detail-assurances { gap:6px; margin-top:18px; }
  .creator-detail-assurances > span { min-height:36px; padding:0 10px; font-size:12px; }
  .creator-detail-hero aside.creator-system-visual { width:100%; min-height:270px; border-radius:14px; }
  .creator-directory-hero { gap:20px; }
  .creator-directory-hero h1 { font-size:clamp(2.55rem,12vw,3.15rem); }
  .creator-directory-hero aside { grid-template-columns:1fr 1fr; gap:4px 18px; padding:17px; }
  .creator-directory-hero aside strong,.creator-directory-hero aside b { font-size:2.45rem; }
  .creator-directory-hero aside span { margin:0; font-size:13px; }
  .creator-directory-hero aside small { font-size:12px; }
  .creator-directory-browser > header label { font-size:14px; }
  .creator-category-sidebar nav a { min-height:55px; }
  .creator-category-sidebar nav a strong { font-size:13px; }
  .creator-page-list > a { min-height:138px; }
  .creator-page-list > a > .creator-card-media { min-height:138px; }
  .creator-page-list strong { font-size:15px; }
  .creator-page-list > a > b { min-height:36px; font-size:12px; }
  .creator-detail-scope > div { grid-template-columns:1fr; }
  .creator-detail-scope article { min-height:92px; padding:14px; }
  .creator-detail-scope article strong { font-size:15px; }
  .creator-detail-scope article em { font-size:13px; }
}

/* Roof geometry entry point from roof-system calculators */
.creator-roof-launcher { width:min(1500px,calc(100% - 40px)); margin:18px auto 0; padding:23px; overflow:hidden; color:#eaf5f7; border-radius:20px; background:radial-gradient(circle at 88% 8%,rgba(74,180,228,.2),transparent 28%),linear-gradient(145deg,#123541,#174f62); box-shadow:0 20px 55px rgba(18,52,65,.14); }
.creator-roof-launcher > header { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,470px); gap:30px; align-items:end; margin-bottom:17px; }
.creator-roof-launcher > header span { color:#83d4f5; font-size:.69rem; font-weight:900; letter-spacing:.14em; }
.creator-roof-launcher h2 { margin:6px 0 0; color:#fff; font:500 clamp(1.9rem,2.7vw,2.8rem) Georgia,serif; letter-spacing:-.04em; }
.creator-roof-launcher > header p { margin:0; color:#abc5ce; font-size:.82rem; line-height:1.6; }
.creator-roof-launcher > div { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.creator-roof-launcher > div > a { min-width:0; min-height:170px; display:grid; grid-template-rows:92px 1fr auto; gap:7px; padding:11px; color:#183945; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:#f8fbfc; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.creator-roof-launcher > div > a:hover { transform:translateY(-3px); border-color:#8bd3f2; box-shadow:0 15px 30px rgba(4,29,40,.22); }
.creator-roof-launcher svg { width:100%; height:92px; color:#315f73; border-radius:8px; background-color:#edf5f8; background-image:linear-gradient(#dcebf1 1px,transparent 1px),linear-gradient(90deg,#dcebf1 1px,transparent 1px); background-size:10px 10px; }
.creator-roof-launcher svg path { fill:rgba(179,216,231,.38); stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.creator-roof-launcher svg path.ridge { fill:none; stroke:#d9793e; stroke-width:5; }
.creator-roof-launcher svg path.muted { fill:none; stroke:#5795b2; stroke-dasharray:5 4; }
.creator-roof-launcher > div > a > span { min-width:0; display:grid; gap:2px; }
.creator-roof-launcher > div > a strong { font-size:.83rem; }
.creator-roof-launcher > div > a small { color:#718992; font-size:.65rem; }
.creator-roof-launcher > div > a > b { color:#1874a0; font-size:.66rem; }
.creator-roof-launcher footer { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:15px; padding-top:15px; border-top:1px solid rgba(255,255,255,.13); }
.creator-roof-launcher footer a { flex:0 0 auto; min-height:42px; display:flex; align-items:center; padding:0 14px; color:#123b4c; border-radius:8px; background:#8bd5f5; font-size:.72rem; font-weight:900; text-decoration:none; }
.creator-roof-launcher footer span { max-width:680px; color:#9eb9c3; font-size:.68rem; line-height:1.5; text-align:right; }

@media (max-width:1050px) {
  .creator-roof-launcher > div { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:680px) {
  .creator-roof-launcher { width:calc(100% - 20px); margin-top:12px; padding:18px 12px; border-radius:16px; }
  .creator-roof-launcher > header { grid-template-columns:1fr; gap:10px; }
  .creator-roof-launcher h2 { font-size:1.85rem; }
  .creator-roof-launcher > header p { font-size:.76rem; }
  .creator-roof-launcher > div { grid-template-columns:1fr 1fr; }
  .creator-roof-launcher > div > a { min-height:158px; grid-template-rows:82px 1fr auto; }
  .creator-roof-launcher svg { height:82px; }
  .creator-roof-launcher footer { align-items:stretch; flex-direction:column; }
  .creator-roof-launcher footer a { justify-content:center; }
  .creator-roof-launcher footer span { text-align:left; }
}

/* Premium marketplace landing and product listing */
.catalog-market-hero {
  min-height: 690px;
  display: grid;
  grid-template-columns: minmax(540px, .9fr) minmax(0, 1.1fr);
  overflow: hidden;
  color: #eef8f6;
  background: radial-gradient(circle at 72% 18%, rgba(50,196,170,.18), transparent 27%), linear-gradient(132deg,#102a34,#153b43 68%,#0d292f);
}
.catalog-market-copy { display:flex; flex-direction:column; justify-content:center; padding:72px 4vw 74px max(28px,6vw); position:relative; z-index:3; }
.catalog-market-copy > span { display:flex; align-items:center; gap:9px; color:#6dd9c4; font-size:14px; font-weight:900; letter-spacing:.14em; }
.catalog-market-copy > span i { width:30px; height:2px; background:#61cdb8; }
.catalog-market-copy h1 { max-width:760px; margin:20px 0; font:400 clamp(3.6rem,5.6vw,6.5rem)/.93 Georgia,serif; letter-spacing:-.065em; }
.catalog-market-copy h1 em { color:#79dfcb; font-style:italic; }
.catalog-market-copy > p { max-width:680px; margin:0; color:#b5cacc; font-size:17px; line-height:1.7; }
.catalog-market-copy form { min-height:62px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin:30px 0 16px; padding:7px 7px 7px 18px; color:#587078; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#fff; box-shadow:0 18px 50px rgba(0,0,0,.18); }
.catalog-market-copy input { min-width:0; height:100%; color:#15313a; border:0; outline:0; background:transparent; font-size:15px; }
.catalog-market-copy form button { height:48px; padding:0 22px; color:#fff; border-radius:10px; background:#0d8977; font-size:14px; font-weight:850; }
.catalog-market-copy > div { display:flex; align-items:center; gap:10px; }
.catalog-market-copy > div > a,.catalog-market-copy > div > button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:24px; padding:0 18px; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.05); font-size:14px; font-weight:800; text-decoration:none; }
.catalog-market-copy > div > .market-primary-cta { color:#102c34; border-color:#73d9c6; background:#73d9c6; }
.catalog-market-visual { min-height:690px; position:relative; overflow:hidden; }
.catalog-market-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#15343d 0,transparent 24%,transparent 80%,rgba(9,29,35,.2)); }
.catalog-market-visual > img { width:100%; height:100%; object-fit:cover; object-position:56% center; filter:saturate(.82) contrast(1.04); }
.catalog-market-visual > div { min-width:240px; display:grid; gap:5px; position:absolute; z-index:3; right:28px; bottom:28px; padding:16px 18px; border:1px solid rgba(255,255,255,.2); border-radius:13px; background:rgba(9,34,40,.78); backdrop-filter:blur(15px); }
.catalog-market-visual > div span { color:#8eaaaE; font-size:14px; }
.catalog-market-visual > div strong { color:#fff; font-size:16px; }
.market-visual-label { min-width:164px; display:grid; gap:4px; position:absolute; z-index:3; padding:11px 14px; border:1px solid rgba(255,255,255,.22); border-radius:11px; background:rgba(11,46,51,.78); backdrop-filter:blur(12px); }
.market-visual-label b { color:#85e0cf; font-size:14px; }
.market-visual-label strong { color:#fff; font-size:15px; }
.label-roof { top:19%; right:10%; }.label-wall { top:48%; left:12%; }.label-foundation { bottom:18%; left:22%; }

.catalog-category-section { padding:90px max(22px,5vw); background:#f4f7f4; }
.catalog-category-section > header { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:34px; }
.catalog-category-section > header span { color:var(--portal-green); font-size:14px; font-weight:900; letter-spacing:.14em; }
.catalog-category-section > header h2 { max-width:920px; margin:10px 0 0; font:500 clamp(2.7rem,4.4vw,5rem)/1 Georgia,serif; letter-spacing:-.055em; }
.catalog-category-section > header > a { color:var(--portal-green-dark); font-size:14px; font-weight:850; text-decoration:none; }
.catalog-category-section > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.catalog-category-section > div > a { min-height:330px; position:relative; overflow:hidden; color:#fff; border-radius:20px; background:#17333b; box-shadow:0 15px 38px rgba(20,45,51,.1); text-decoration:none; }
.catalog-category-section > div > a::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,28,34,.02) 20%,rgba(9,28,34,.9) 100%); }
.catalog-category-section > div > a > img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.catalog-category-section > div > a:hover > img { transform:scale(1.045); }
.catalog-category-section > div > a > div { display:grid; grid-template-columns:auto 1fr; gap:7px 12px; align-items:center; position:absolute; z-index:2; right:20px; bottom:20px; left:20px; }
.catalog-category-section > div i { width:45px; height:45px; display:grid; grid-row:1/3; place-items:center; color:#75ddc8; border:1px solid rgba(255,255,255,.22); border-radius:12px; background:rgba(13,88,79,.58); }
.catalog-category-section > div span { color:#bed1d2; font-size:14px; }
.catalog-category-section h3 { margin:0; font:500 1.65rem Georgia,serif; }
.catalog-category-section > div strong { grid-column:1/-1; margin-top:8px; color:#7addc9; font-size:14px; }

.catalog-trust-row { display:grid; grid-template-columns:repeat(4,1fr); width:min(1440px,calc(100% - 48px)); margin:28px auto; overflow:hidden; border:1px solid #d6e1de; border-radius:17px; background:#fff; box-shadow:0 14px 38px rgba(15,40,48,.06); }
.catalog-trust-row article { display:flex; align-items:center; gap:13px; padding:22px; }
.catalog-trust-row article + article { border-left:1px solid #dfe7e4; }
.catalog-trust-row svg { flex:0 0 auto; color:var(--portal-green); }
.catalog-trust-row div { display:grid; gap:4px; }
.catalog-trust-row strong { font-size:15px; }.catalog-trust-row span { color:#71858a; font-size:14px; }

.marketplace-list-hero { width:min(1440px,calc(100% - 48px)); min-height:330px; display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:center; gap:40px; margin:30px auto 0; padding:45px; color:#eef9f6; border-radius:24px; background:radial-gradient(circle at 82% 18%,rgba(74,212,187,.2),transparent 25%),linear-gradient(135deg,#102b34,#17444a); box-shadow:0 22px 65px rgba(15,45,52,.14); }
.marketplace-list-hero > div > span { color:#6cdbc6; font-size:14px; font-weight:900; letter-spacing:.14em; }
.marketplace-list-hero h1 { margin:10px 0; font:500 clamp(2.8rem,4.7vw,5rem) Georgia,serif; letter-spacing:-.05em; }
.marketplace-list-hero p { max-width:780px; margin:0; color:#b6cacc; font-size:16px; line-height:1.7; }
.marketplace-list-hero aside { display:grid; gap:8px; padding:22px; border:1px solid rgba(255,255,255,.14); border-radius:15px; background:rgba(255,255,255,.05); }
.marketplace-list-hero aside strong { color:#76deca; font:500 1.55rem Georgia,serif; }.marketplace-list-hero aside span { color:#b5c8ca; font-size:14px; }.marketplace-list-hero aside a { margin-top:18px; color:#fff; font-size:14px; font-weight:800; text-decoration:none; }

.full-marketplace { margin-top:20px; }
.full-marketplace-head p,.full-marketplace-head span,.full-marketplace-search label span,.full-marketplace-search > div span,.full-marketplace-categories button,.full-marketplace > footer { font-size:14px; }
.full-marketplace-search input { font-size:15px; }
.full-marketplace-list { gap:12px; padding:18px; background:#f3f6f5; }
.full-marketplace-list > article { grid-template-columns:150px minmax(300px,1fr) 210px 190px; gap:22px; padding:16px; border:1px solid #d9e3e0; border-radius:16px; background:#fff; box-shadow:0 8px 22px rgba(16,43,49,.045); }
.marketplace-index-icon { width:142px; height:124px; border-radius:12px; }
.marketplace-index-icon > span { font-size:20px; }.marketplace-index-icon > img { border-radius:11px; }.marketplace-index-icon small { right:6px; bottom:6px; padding:5px 7px; font-size:12px; }
.marketplace-index-copy > span { font-size:14px; }.marketplace-index-copy h3 { overflow:visible; font-size:17px; line-height:1.35; white-space:normal; }.marketplace-index-copy small { color:#73878c; font-size:14px; }
.marketplace-index-copy > div { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }.marketplace-index-copy > div b { padding:5px 7px; color:#47636a; border-radius:6px; background:#edf3f1; font-size:12px; }
.marketplace-index-state span { font-size:13px; }.marketplace-index-state strong { color:#17343d; font-size:20px; }.marketplace-index-state small { color:#7c9094; font-size:13px; }
.marketplace-index-actions a { min-height:44px; font-size:14px; }
.full-marketplace-categories button { min-height:42px; padding:0 15px; }

@media (max-width:1100px) {
  .catalog-market-hero { grid-template-columns:1fr; }.catalog-market-visual { min-height:570px; }.catalog-market-visual::after { background:linear-gradient(180deg,#15363e 0,transparent 24%); }
  .catalog-category-section > div { grid-template-columns:1fr 1fr; }.catalog-trust-row { grid-template-columns:1fr 1fr; }.catalog-trust-row article:nth-child(3) { border-left:0; border-top:1px solid #dfe7e4; }.catalog-trust-row article:nth-child(4) { border-top:1px solid #dfe7e4; }
  .full-marketplace-list > article { grid-template-columns:120px minmax(0,1fr) 180px; }.marketplace-index-icon { width:112px; height:104px; }.marketplace-index-actions { grid-column:2/4; grid-template-columns:auto auto; justify-content:start; }
}

@media (max-width:700px) {
  .catalog-market-copy { padding:58px 18px 48px; }.catalog-market-copy h1 { font-size:clamp(3.1rem,14vw,4.3rem); }.catalog-market-copy > div { align-items:stretch; flex-direction:column; }.catalog-market-copy form { grid-template-columns:auto minmax(0,1fr); }.catalog-market-copy form button { grid-column:1/-1; }.catalog-market-visual { min-height:460px; }.market-visual-label { min-width:138px; }.label-wall { left:4%; }.label-foundation { left:10%; }
  .catalog-category-section { padding:68px 12px; }.catalog-category-section > header { align-items:flex-start; flex-direction:column; }.catalog-category-section > div { grid-template-columns:1fr; }.catalog-category-section > div > a { min-height:310px; }
  .catalog-trust-row { width:calc(100% - 24px); grid-template-columns:1fr; }.catalog-trust-row article + article { border-left:0; border-top:1px solid #dfe7e4; }
  .marketplace-list-hero { width:calc(100% - 20px); grid-template-columns:1fr; gap:22px; margin-top:14px; padding:28px 20px; border-radius:18px; }
  .full-marketplace { width:calc(100% - 20px); }.full-marketplace-head { grid-template-columns:1fr; padding:25px 18px; }.full-marketplace-list { padding:10px; }
  .full-marketplace-list > article { grid-template-columns:92px minmax(0,1fr); gap:13px; padding:12px; }.marketplace-index-icon { width:86px; height:92px; }.marketplace-index-state { display:grid; grid-column:2; }.marketplace-index-actions { grid-column:1/-1; grid-template-columns:1fr; }.marketplace-index-actions a:last-child { display:none; }
}

/* Wall department: readable content and a working graph-paper takeoff */
.detail-hero-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.detail-hero-actions > button,
.detail-hero-actions > a { min-height:50px; display:inline-flex; align-items:center; justify-content:space-between; gap:32px; padding:0 18px; border-radius:10px; font-size:14px; font-weight:850; text-decoration:none; }
.detail-hero-actions > button { color:#fff; background:var(--portal-green); }
.detail-hero-actions > a { color:var(--portal-green-dark); border:1px solid #bcd6cf; background:rgba(255,255,255,.72); }
.detail-hero-actions i { font-style:normal; }
.detail-hero-copy > button { display:none; }

.portal-page-walls .detail-hero-copy > span,
.portal-page-walls .portal-section-heading > span { font-size:14px; }
.portal-page-walls .detail-hero-copy > p { font-size:17px; line-height:1.75; }
.portal-page-walls .detail-facts small { font-size:14px; line-height:1.35; }
.portal-page-walls .system-navigation a span { font-size:14px; }
.portal-page-walls .system-visual-story h3 { font-size:1.55rem; }
.portal-page-walls .system-visual-story p { font-size:15px; line-height:1.65; }
.portal-page-walls .detail-layer-track a i,
.portal-page-walls .detail-layer-track a small { font-size:14px; }
.portal-page-walls .detail-layer-track a strong { font-size:1.12rem; }
.portal-page-walls .detail-system-grid article > span,
.portal-page-walls .detail-system-grid p,
.portal-page-walls .detail-system-grid ul,
.portal-page-walls .detail-system-grid button,
.portal-page-walls .system-tradeoffs strong,
.portal-page-walls .system-tradeoffs small,
.portal-page-walls .system-calculation-scope strong,
.portal-page-walls .system-calculation-scope span,
.portal-page-walls .detail-brand-grid a > span:last-child { font-size:14px; }
.portal-page-walls .detail-system-grid h3 { margin-top:38px; font-size:1.7rem; }

.wall-department-drawing { margin:0 0 24px; padding:22px; border:1px solid #cfddd9; border-radius:22px; background:linear-gradient(145deg,#fafdF9,#eef5f2); box-shadow:0 20px 55px rgba(17,65,67,.08); }
.wall-drawing-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; padding:8px 7px 20px; }
.wall-drawing-heading > div { max-width:820px; }
.wall-drawing-heading span { color:var(--portal-green); font-size:14px; font-weight:900; letter-spacing:.14em; }
.wall-drawing-heading h3 { margin:8px 0; font:500 clamp(2rem,3.6vw,3.6rem)/1 Georgia,serif; letter-spacing:-.045em; }
.wall-drawing-heading p { margin:0; color:var(--portal-muted); font-size:16px; line-height:1.65; }
.wall-drawing-heading > a { min-height:48px; flex:0 0 auto; display:flex; align-items:center; padding:0 16px; color:#fff; border-radius:10px; background:#143943; font-size:14px; font-weight:850; text-decoration:none; }
.wall-department-drawing .system-sketch-board { margin:0; padding:18px; border-radius:17px; box-shadow:none; }
.wall-department-drawing .system-sketch-board > header span,
.wall-department-drawing .system-sketch-board > header button,
.wall-department-drawing .system-sketch-library strong,
.wall-department-drawing .system-sketch-library small,
.wall-department-drawing .system-sketch-paper > footer,
.wall-department-drawing .system-sketch-editor small,
.wall-department-drawing .system-sketch-editor label,
.wall-department-drawing .system-sketch-editor input,
.wall-department-drawing .system-sketch-editor button,
.wall-department-drawing .system-sketch-actions p,
.wall-department-drawing .system-sketch-actions button { font-size:14px; }
.wall-department-drawing .system-sketch-board > header strong { font-size:1.5rem; }
.wall-department-drawing .system-sketch-board > header button { min-height:42px; padding:0 14px; }
.wall-department-drawing .system-sketch-library > button { min-height:76px; grid-template-columns:34px minmax(0,1fr) auto; padding:10px; }
.wall-department-drawing .system-sketch-library i { width:31px; height:31px; }
.wall-department-drawing .system-sketch-library span { gap:4px; }
.wall-department-drawing .system-sketch-library strong,
.wall-department-drawing .system-sketch-library small { overflow:visible; text-overflow:clip; white-space:normal; }
.wall-department-drawing .system-sketch-paper { background:#fbfefd; box-shadow:inset 0 0 0 1px rgba(17,134,117,.03); }
.wall-department-drawing .system-sketch-paper svg { min-height:460px; }
.wall-department-drawing .system-sketch-paper > footer { padding:13px 15px; }
.wall-department-drawing .system-sketch-editor { grid-template-columns:minmax(170px,1fr) repeat(3,minmax(100px,130px)); padding:14px; }
.wall-department-drawing .system-sketch-editor input { height:42px; }
.wall-department-drawing .system-sketch-actions { padding-top:4px; }
.wall-department-drawing .system-sketch-actions button { min-height:48px; padding:0 17px; }
.portal-page-walls .department-calculator { padding-top:74px; }
.portal-page-walls .calculator-heading > span,
.portal-page-walls .calculator-heading p,
.portal-page-walls .calculator-fields label > span,
.portal-page-walls .calculator-fields b,
.portal-page-walls .calculator-result > span,
.portal-page-walls .calculator-result p,
.portal-page-walls .calculator-result small,
.portal-page-walls .calculator-result button,
.portal-page-walls .calculator-result a { font-size:14px; }

@media (max-width:900px) {
  .wall-drawing-heading { align-items:stretch; flex-direction:column; }.wall-drawing-heading > a { justify-content:center; }
  .wall-department-drawing .system-sketch-editor { grid-template-columns:1fr 1fr; }.wall-department-drawing .system-sketch-editor > span { grid-column:1/-1; }
}

@media (max-width:620px) {
  .detail-hero-actions { align-items:stretch; flex-direction:column; }.detail-hero-actions > button,.detail-hero-actions > a { width:100%; }
  .portal-page-walls .department-calculator { padding:56px 10px; }.wall-department-drawing { padding:10px; border-radius:16px; }
  .wall-drawing-heading { padding:8px 5px 18px; }.wall-drawing-heading h3 { font-size:2.2rem; }
  .wall-department-drawing .system-sketch-board { padding:10px 8px; }.wall-department-drawing .system-sketch-library { grid-template-columns:1fr; }
  .wall-department-drawing .system-sketch-library small { display:block; }.wall-department-drawing .system-sketch-paper svg { min-height:300px; }
  .wall-department-drawing .system-sketch-editor { grid-template-columns:1fr 1fr; }.wall-department-drawing .system-sketch-actions { align-items:stretch; flex-direction:column; }
}

/* Unified project estimate: departments and all system creators */
.investment-summary-head p,
.investment-summary-head small,
.investment-summary-head span,
.investment-summary-lines small,
.investment-summary-lines b { font-size:14px; }
.investment-creators { margin-top:34px; padding-top:28px; border-top:1px solid rgba(255,255,255,.13); }
.investment-creators > header { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:16px; }
.investment-creators > header span { color:#70d4c1; font-size:14px; font-weight:900; letter-spacing:.13em; }
.investment-creators > header h3 { margin:7px 0 0; color:#fff; font:500 clamp(1.8rem,3vw,3rem) Georgia,serif; }
.investment-creators > header > strong { color:#83dfcd; font:500 clamp(1.7rem,2.7vw,2.7rem) Georgia,serif; }
.investment-creators > div { display:grid; gap:7px; }
.investment-creators article { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.investment-creators article > a { min-width:0; min-height:92px; display:grid; grid-template-columns:48px minmax(0,1fr) auto auto; align-items:center; gap:13px; padding:14px; color:#fff; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:rgba(255,255,255,.045); text-decoration:none; }
.investment-creators article > a > div { min-width:0; display:grid; gap:4px; }
.investment-creators article > a small { color:#73d4c2; font-size:14px; font-weight:850; text-transform:uppercase; }
.investment-creators article > a strong { overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
.investment-creators article > a em { color:#9fb4b7; font-size:14px; font-style:normal; }
.investment-creators article > a > b { color:#e2eeec; font-size:15px; white-space:nowrap; }
.investment-creators article > a > i { color:#72d5c2; font-size:14px; font-style:normal; white-space:nowrap; }
.investment-creators article > button { min-width:76px; color:#e4aaa1; border:1px solid rgba(226,128,112,.24); border-radius:10px; background:rgba(157,54,43,.12); font-size:14px; font-weight:800; }
.investment-creators article > button:hover { color:#fff; background:#a94436; }
.investment-creators-empty { min-height:120px; display:flex!important; align-items:center; gap:16px; padding:22px; color:#94aeaf; border:1px dashed rgba(255,255,255,.17); border-radius:12px; }
.investment-creators-empty svg { flex:0 0 auto; color:#65cdb9; }
.investment-creators-empty p { flex:1; margin:0; font-size:15px; line-height:1.6; }
.investment-creators-empty a { color:#7bdac7; font-size:14px; font-weight:850; text-decoration:none; }
.calculator-summary-link { min-height:40px; display:flex; align-items:center; justify-content:center; margin-top:9px; color:#89dfce; border:1px solid rgba(137,223,206,.22); border-radius:8px; font-size:14px; font-weight:850; text-decoration:none; }

@media (max-width:760px) {
  .investment-creators > header { align-items:flex-start; flex-direction:column; }.investment-creators article { grid-template-columns:1fr; }
  .investment-creators article > a { grid-template-columns:45px minmax(0,1fr); }.investment-creators article > a > b,.investment-creators article > a > i { grid-column:2; }
  .investment-creators article > button { min-height:44px; }.investment-creators-empty { align-items:flex-start; flex-direction:column; }
}

/* Standalone material estimate */
.estimate-page { min-height:100vh; padding-bottom:90px; background:#eef3f0; }
.estimate-hero { min-height:570px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.42fr); align-items:center; gap:55px; padding:75px max(28px,7vw); color:#eff8f6; background:radial-gradient(circle at 78% 17%,rgba(73,212,185,.18),transparent 29%),linear-gradient(135deg,#102a34,#174249); }
.estimate-hero > div > span { display:flex; align-items:center; gap:10px; color:#70d8c4; font-size:14px; font-weight:900; letter-spacing:.14em; }
.estimate-hero > div > span i { width:31px; height:2px; background:#68d3bf; }
.estimate-hero h1 { margin:20px 0; font:400 clamp(3.7rem,6vw,7rem)/.93 Georgia,serif; letter-spacing:-.065em; }
.estimate-hero h1 em { color:#76ddc9; font-style:italic; }
.estimate-hero > div > p { max-width:760px; margin:0; color:#b5c8ca; font-size:17px; line-height:1.75; }
.estimate-hero > div > div { display:flex; flex-wrap:wrap; gap:9px; margin-top:30px; }
.estimate-hero > div > div > a,.estimate-hero > div > div > button { min-height:50px; display:inline-flex; align-items:center; gap:28px; padding:0 18px; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.05); font-size:14px; font-weight:850; text-decoration:none; }
.estimate-hero > div > div > a { color:#123139; border-color:#72d8c5; background:#72d8c5; }
.estimate-hero > aside { display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.055); box-shadow:0 22px 55px rgba(0,0,0,.13); }
.estimate-hero > aside article { min-height:135px; display:grid; align-content:center; gap:9px; padding:22px; }
.estimate-hero > aside article:first-child { grid-column:1/-1; border-bottom:1px solid rgba(255,255,255,.12); }
.estimate-hero > aside article:nth-child(3) { border-left:1px solid rgba(255,255,255,.12); }
.estimate-hero > aside span { color:#a8bec0; font-size:14px; }
.estimate-hero > aside strong { color:#7ddfcd; font:500 clamp(1.8rem,3.2vw,3.2rem) Georgia,serif; }
.estimate-hero > aside small { grid-column:1/-1; padding:15px 21px; color:#9db3b5; border-top:1px solid rgba(255,255,255,.12); font-size:14px; }

.estimate-category-totals { width:min(1500px,calc(100% - 48px)); display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; margin:-34px auto 32px; position:relative; z-index:3; }
.estimate-category-totals button { min-height:122px; display:grid; align-content:center; justify-items:start; gap:6px; padding:19px; color:#17373e; border:1px solid #d1dfda; border-radius:14px; background:#fff; box-shadow:0 16px 38px rgba(18,52,57,.08); text-align:left; }
.estimate-category-totals button.active { color:#fff; border-color:#118473; background:linear-gradient(145deg,#118473,#14575a); }
.estimate-category-totals span { font-size:14px; font-weight:850; }.estimate-category-totals strong { font:500 1.35rem Georgia,serif; }.estimate-category-totals small { color:#718689; font-size:14px; }.estimate-category-totals button.active small { color:#b6d8d2; }

.estimate-materials { width:min(1500px,calc(100% - 48px)); margin:0 auto; overflow:hidden; border:1px solid #d4e0dc; border-radius:22px; background:#fff; box-shadow:0 24px 65px rgba(18,49,56,.08); }
.estimate-materials > header { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,.7fr); align-items:end; gap:35px; padding:32px; border-bottom:1px solid #dce5e2; }
.estimate-materials > header > div:first-child > span { color:var(--portal-green); font-size:14px; font-weight:900; letter-spacing:.14em; }
.estimate-materials h2 { margin:8px 0 0; font:500 clamp(2.4rem,4vw,4rem) Georgia,serif; letter-spacing:-.05em; }
.estimate-tools { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:8px; }
.estimate-tools label { min-height:48px; display:flex; align-items:center; gap:9px; padding:0 13px; color:#66807f; border:1px solid #cfddda; border-radius:9px; background:#f8faf9; }
.estimate-tools input { min-width:0; width:100%; border:0; outline:0; background:transparent; font-size:14px; }
.estimate-tools select { min-height:48px; padding:0 12px; color:#294b4d; border:1px solid #cfddda; border-radius:9px; background:#fff; font-size:14px; font-weight:800; }
.estimate-table-head { display:grid; grid-template-columns:minmax(320px,1.45fr) .55fr .9fr .55fr .55fr; gap:16px; padding:13px 24px; color:#667e82; border-bottom:1px solid #dce5e2; background:#f0f5f3; font-size:14px; font-weight:850; }
.estimate-table-head span:last-child { text-align:right; }
.estimate-rows { display:grid; }
.estimate-rows > a { min-width:0; min-height:92px; display:grid; grid-template-columns:minmax(320px,1.45fr) .55fr .9fr .55fr .55fr; align-items:center; gap:16px; padding:14px 24px; color:#17343d; border-bottom:1px solid #e0e8e5; text-decoration:none; transition:background .18s; }
.estimate-rows > a:hover { background:#f1f8f5; }
.estimate-rows > a > div { min-width:0; display:flex; align-items:center; gap:13px; }
.estimate-rows > a > div > i { width:45px; height:45px; flex:0 0 auto; display:grid; place-items:center; color:#118675; border-radius:11px; background:#e8f3f0; }
.estimate-rows > a > div > span { min-width:0; display:grid; gap:5px; }
.estimate-rows small { overflow:hidden; color:#168473; font-size:13px; font-weight:850; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.estimate-rows strong { overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.estimate-rows > a > span { color:#61777c; font-size:14px; line-height:1.45; }
.estimate-rows > a > b { color:#17353d; font-size:15px; text-align:right; }
.estimate-materials > footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 25px; color:#637a7e; background:#f1f5f3; font-size:14px; }
.estimate-materials > footer strong { color:#143840; font-size:17px; }
.estimate-empty { min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:35px; text-align:center; }
.estimate-empty svg { color:#15907c; }.estimate-empty h3 { margin:16px 0 7px; font:500 1.7rem Georgia,serif; }.estimate-empty p { margin:0; color:#6e8387; font-size:15px; }.estimate-empty a { margin-top:20px; color:#0e806f; font-size:14px; font-weight:850; }
.investment-full-link { width:fit-content; display:inline-flex; margin-top:17px; color:#79d8c6; font-size:14px; font-weight:850; text-decoration:none; }

@media (max-width:1000px) {
  .estimate-hero { grid-template-columns:1fr; }.estimate-hero > aside { max-width:650px; }
  .estimate-materials > header { grid-template-columns:1fr; }.estimate-table-head { display:none; }
  .estimate-rows > a { grid-template-columns:minmax(0,1fr) 1fr 1fr; gap:12px; }.estimate-rows > a > div { grid-column:1/-1; }.estimate-rows > a > b { align-self:end; }
  .estimate-rows > a > span::before { content:attr(data-label); display:block; margin-bottom:4px; color:#809194; font-size:12px; font-weight:800; text-transform:uppercase; }
}

@media (max-width:620px) {
  .estimate-page { padding-bottom:50px; }.estimate-hero { gap:35px; padding:58px 17px 62px; }.estimate-hero h1 { font-size:clamp(3.2rem,15vw,4.7rem); }.estimate-hero > div > div { align-items:stretch; flex-direction:column; }.estimate-hero > div > div > a,.estimate-hero > div > div > button { width:100%; justify-content:center; }
  .estimate-category-totals,.estimate-materials { width:calc(100% - 20px); }.estimate-category-totals { grid-template-columns:1fr 1fr; margin-top:-25px; }.estimate-category-totals button { min-height:112px; padding:14px; }
  .estimate-materials { border-radius:16px; }.estimate-materials > header { padding:23px 14px; }.estimate-tools { grid-template-columns:1fr; }.estimate-rows > a { grid-template-columns:1fr 1fr; padding:17px 14px; }.estimate-rows > a > div { grid-column:1/-1; }.estimate-rows > a > span:nth-of-type(2) { grid-column:1/-1; }.estimate-rows > a > b { text-align:left; }
  .estimate-materials > footer { align-items:flex-start; flex-direction:column; padding:18px 14px; }
}

@media print {
  .portal-page-estimate .portal-header,.portal-page-estimate + .portal-footer,.estimate-hero > div > div,.estimate-tools,.estimate-category-totals { display:none!important; }
  .estimate-page { background:#fff; }.estimate-hero { min-height:0; grid-template-columns:1fr auto; padding:25px; color:#142f37; background:#fff; }.estimate-hero h1 { font-size:3rem; }.estimate-hero h1 em { color:#142f37; }.estimate-hero > div > p { color:#536b70; }.estimate-materials { width:100%; border:0; box-shadow:none; }.estimate-rows > a { break-inside:avoid; }
}

/* Minimal system overview: compact cards instead of oversized banners. */
.system-navigation a { gap:12px; }
.system-navigation span {
  color:#536b71;
  font-size:15px;
  font-weight:800;
}
.system-navigation i {
  color:var(--portal-green);
  font:600 14px Georgia,serif;
}
.system-navigation a.active span { color:#fff; }

.portal-page-systems .systems-overview-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:48px max(20px,4vw) 64px;
}
.portal-page-systems .systems-overview-grid > a {
  min-width:0;
  min-height:0;
  padding:0;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(18,48,54,.045);
}
.portal-page-systems .systems-card-media {
  height:178px;
}
.portal-page-systems .systems-card-media > span {
  left:15px;
  top:14px;
  font-size:.88rem!important;
}
.portal-page-systems .systems-card-media > i {
  width:42px;
  height:42px;
  right:13px;
  bottom:12px;
  border-radius:10px;
}
.portal-page-systems .systems-card-body {
  width:100%;
  min-width:0;
  min-height:205px;
  overflow:hidden;
  box-sizing:border-box;
  padding:18px 19px 17px;
}
.portal-page-systems .systems-overview-grid .systems-card-body h2 {
  width:100%;
  max-width:100%;
  min-height:48px;
  display:-webkit-box;
  overflow:hidden;
  margin:0 0 8px;
  font-size:1.34rem;
  line-height:1.12;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.portal-page-systems .systems-card-body > p {
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  font-size:14px;
  line-height:1.5;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.portal-page-systems .systems-card-body > div {
  max-height:29px;
  flex-wrap:nowrap;
  gap:5px;
  margin-top:14px;
  overflow:hidden;
}
.portal-page-systems .systems-card-body > div i {
  overflow:hidden;
  padding:5px 7px;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.portal-page-systems .systems-card-body > div i:nth-child(n+4) { display:none; }
.portal-page-systems .systems-card-body > strong {
  padding-top:14px;
  font-size:13px;
}

@media (max-width:1180px) {
  .portal-page-systems .systems-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:700px) {
  .portal-page-systems .systems-overview-grid { grid-template-columns:1fr; gap:9px; padding:30px 10px 45px; }
  .portal-page-systems .systems-card-media { height:165px; }
  .portal-page-systems .systems-card-body { min-height:190px; padding:17px; }
}

/* Marketplace filters and product imagery. */
.full-marketplace-layout { min-width:0; display:grid; grid-template-columns:292px minmax(0,1fr); align-items:start; background:#f3f6f5; }
.full-marketplace-results { min-width:0; border-left:1px solid #dce5e2; background:#f3f6f5; }
.marketplace-filters { min-width:0; display:grid; align-content:start; position:sticky; top:72px; z-index:8; max-height:calc(100vh - 72px); overflow:auto; background:#fff; scrollbar-width:thin; }
.marketplace-filters > header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 18px; border-bottom:1px solid #dce5e2; }
.marketplace-filters > header > div { display:flex; align-items:center; gap:11px; color:#118675; }
.marketplace-filters > header span { display:grid; gap:2px; }.marketplace-filters > header strong { color:#173840; font-size:17px; }.marketplace-filters > header small { color:#71868a; font-size:13px; }
.marketplace-filters > header button { width:38px; height:38px; display:none; place-items:center; color:#647b80; border-radius:9px; background:#f0f4f2; }
.marketplace-filters > section { display:grid; gap:12px; padding:18px; border-bottom:1px solid #e0e8e5; }
.marketplace-filters h3 { margin:0; color:#183840; font-size:15px; }
.marketplace-filter-categories,.marketplace-brand-filter { display:grid; gap:4px; }
.marketplace-filter-categories button,.marketplace-brand-filter button { min-width:0; min-height:42px; display:flex; align-items:center; gap:10px; padding:5px 8px; color:#536b70; border:1px solid transparent; border-radius:8px; background:transparent; font-size:14px; text-align:left; }
.marketplace-filter-categories button:hover,.marketplace-brand-filter button:hover { background:#f1f6f3; }
.marketplace-filter-categories button.active,.marketplace-brand-filter button.active { color:#0c7667; border-color:#bcded6; background:#eaf6f2; font-weight:850; }
.marketplace-filter-categories i { width:31px; height:31px; display:grid; place-items:center; flex:0 0 auto; color:#168876; border-radius:8px; background:#edf4f2; }
.marketplace-filter-categories span,.marketplace-brand-filter span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.marketplace-filter-categories b { color:#128472; }.marketplace-brand-filter b { color:#809195; font-size:12px; }
.marketplace-price-filter { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.marketplace-price-filter label { min-width:0; height:47px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:5px; padding:0 9px; border:1px solid #cedbd8; border-radius:8px; background:#fff; }
.marketplace-price-filter span,.marketplace-price-filter b { color:#778b8e; font-size:12px; }.marketplace-price-filter input { min-width:0; width:100%; padding:0; border:0; outline:0; font-size:14px; font-weight:800; }
.marketplace-brand-filter { max-height:245px; overflow:auto; padding-right:3px; scrollbar-width:thin; }
.marketplace-check { min-height:52px; display:grid; grid-template-columns:20px 1fr; align-items:center; column-gap:10px; cursor:pointer; }
.marketplace-check input { position:absolute; opacity:0; pointer-events:none; }.marketplace-check > i { width:20px; height:20px; display:grid; place-items:center; border:1px solid #bfcfcb; border-radius:5px; background:#fff; }
.marketplace-check input:checked + i { border-color:#128674; background:#128674; }.marketplace-check input:checked + i::after { content:"✓"; color:#fff; font-size:13px; font-style:normal; font-weight:900; }
.marketplace-check > span { display:grid; gap:2px; }.marketplace-check strong { color:#344f55; font-size:14px; }.marketplace-check small { color:#809195; font-size:12px; }
.marketplace-filters > footer { display:grid; grid-template-columns:1fr; gap:7px; padding:15px 18px 21px; }
.marketplace-filters > footer button { min-height:43px; color:#526d70; border:1px solid #ccdad7; border-radius:8px; background:#fff; font-size:14px; font-weight:850; }.marketplace-filters > footer button:disabled { opacity:.4; }.marketplace-filters > footer button:last-child { display:none; color:#fff; border-color:#128574; background:#128574; }
.marketplace-results-toolbar { min-height:76px; display:grid; grid-template-columns:minmax(0,1fr) 200px auto; align-items:center; gap:10px; padding:13px 18px; border-bottom:1px solid #dce5e2; background:#fff; }
.marketplace-results-toolbar > div { display:grid; gap:3px; }.marketplace-results-toolbar > div strong { color:#173940; font-size:17px; }.marketplace-results-toolbar > div span { color:#72878a; font-size:13px; }
.marketplace-results-toolbar label { display:grid; gap:4px; color:#718589; font-size:12px; }.marketplace-results-toolbar select { min-height:42px; padding:0 10px; color:#304e53; border:1px solid #cedbd8; border-radius:8px; background:#fff; font-size:14px; font-weight:800; }
.marketplace-results-toolbar > button { min-height:42px; display:flex; align-items:center; gap:8px; padding:0 13px; color:#126c61; border:1px solid #abd3cb; border-radius:8px; background:#eaf7f3; font-size:13px; font-weight:850; }
.full-marketplace-results .full-marketplace-list { padding:12px; }
.full-marketplace-results .full-marketplace-list > article { grid-template-columns:112px minmax(220px,1fr) 155px 150px; gap:15px; padding:13px; }
.full-marketplace-results .marketplace-index-icon { width:104px; height:102px; }
.full-marketplace-results .marketplace-index-icon > img { object-fit:contain; }
.marketplace-mobile-controls,.marketplace-filter-backdrop { display:none; }

@media (max-width:1180px) {
  .full-marketplace-layout { grid-template-columns:260px minmax(0,1fr); }
  .full-marketplace-results .full-marketplace-list > article { grid-template-columns:92px minmax(200px,1fr) 145px; }
  .full-marketplace-results .marketplace-index-icon { width:86px; height:88px; }
  .full-marketplace-results .marketplace-index-actions { grid-column:2/4; grid-template-columns:auto auto; justify-content:start; }
}

@media (max-width:900px) {
  .marketplace-mobile-controls { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid #dbe5e2; background:#fff; }
  .marketplace-mobile-controls > button { min-height:43px; display:flex; align-items:center; gap:8px; padding:0 13px; color:#fff; border-radius:8px; background:#153840; font-size:14px; font-weight:850; }.marketplace-mobile-controls > button b { min-width:21px; padding:3px 5px; color:#124039; border-radius:99px; background:#79dac8; font-size:12px; }
  .marketplace-mobile-controls label { display:grid; gap:3px; color:#74888c; font-size:11px; }.marketplace-mobile-controls select { min-height:40px; padding:0 9px; border:1px solid #cedbd8; border-radius:8px; background:#fff; font-size:13px; font-weight:800; }
  .full-marketplace-layout { display:block; }.full-marketplace-results { border-left:0; }.marketplace-results-toolbar { display:none; }
  .marketplace-filters { width:min(360px,92vw); height:100dvh; max-height:none; display:block; position:fixed; left:0; top:0; z-index:101; overflow:auto; transform:translateX(-105%); box-shadow:22px 0 65px rgba(11,37,42,.22); transition:transform .24s ease; }.marketplace-filters.open { transform:translateX(0); }
  .marketplace-filters > header { position:sticky; top:0; z-index:3; background:#fff; }.marketplace-filters > header button { display:grid; }.marketplace-filters > footer { position:sticky; bottom:0; grid-template-columns:1fr 1fr; background:#fff; box-shadow:0 -10px 25px rgba(14,45,49,.08); }.marketplace-filters > footer button:last-child { display:block; }
  .marketplace-filter-backdrop { display:block; position:fixed; inset:0; z-index:100; opacity:0; visibility:hidden; border:0; background:rgba(7,29,34,.48); transition:.2s; }.marketplace-filter-backdrop.open { opacity:1; visibility:visible; }
}

@media (max-width:620px) {
  .full-marketplace-results .full-marketplace-list > article { grid-template-columns:84px minmax(0,1fr); }.full-marketplace-results .marketplace-index-icon { width:78px; height:86px; }
  .full-marketplace-results .marketplace-index-state { grid-column:2; }.full-marketplace-results .marketplace-index-actions { grid-column:1/-1; grid-template-columns:1fr; }.full-marketplace-results .marketplace-index-actions a:last-child { display:none; }
}

/* Consumption formulas need more room than a short package note. */
.estimate-table-head,.estimate-rows > a { grid-template-columns:minmax(300px,1.2fr) .45fr minmax(330px,1.4fr) .48fr .5fr; }
.estimate-rows > a > span:nth-of-type(2) { color:#4f6d70; font-size:14px; line-height:1.55; }
@media (max-width:1000px) { .estimate-rows > a { grid-template-columns:minmax(0,1fr) 1fr 1fr; } }

/* Final premium readability and keyboard-accessibility layer. */
:where(a,button,input,select,textarea):focus-visible { outline:3px solid rgba(25,154,132,.34); outline-offset:3px; }
.portal-page-catalog .catalog-business-strip span { font-size:13px; }
.portal-page-catalog .catalog-chimney-banner span { font-size:13px; }
.portal-page-catalog .catalog-chimney-banner > a { min-height:48px; font-size:14px; }
.portal-page-catalog .manufacturer-library-head > div:first-child > span { font-size:13px; }
.portal-page-catalog .manufacturer-library-stats span { font-size:13px; }
.portal-page-catalog .manufacturer-filters label > span { font-size:13px; }
.portal-page-catalog .manufacturer-filters input,
.portal-page-catalog .manufacturer-filters select { font-size:14px; }
.portal-page-catalog .manufacturer-filters > div span { font-size:12px; }
.portal-page-catalog .manufacturer-product-image > i { font-size:12px; }
.portal-page-catalog .manufacturer-product-copy > span { font-size:13px; }
.portal-page-catalog .manufacturer-product-copy small { font-size:12px; }
.portal-page-catalog .manufacturer-product-copy > a { min-height:40px; display:flex; align-items:center; font-size:14px; }
.portal-page-catalog .manufacturer-documents > div:first-child span { font-size:13px; }
.portal-page-catalog .manufacturer-documents > a { min-height:68px; }
.portal-page-catalog .manufacturer-documents > a strong { font-size:14px; }
.portal-page-catalog .manufacturer-documents > a small,
.portal-page-catalog .manufacturer-documents > a > span { font-size:12px; }
.portal-page-catalog .manufacturer-source-note p { font-size:14px; }
.portal-page-catalog .brand-catalog-grid > article > div a { min-height:40px; display:flex; align-items:center; font-size:13px; }
.portal-page-catalog .brand-catalog-grid > article > section > a > span,
.portal-page-catalog .brand-catalog-grid .brand-wordmark.compact { font-size:13px; }
.portal-page-catalog .brand-catalog-grid > article > section > a > small { font-size:12px; line-height:1.4; }
.roof-pro-page p { font-size:15px; }
.roof-pro-page button,
.roof-pro-page input,
.roof-pro-page select,
.roof-pro-page label { font-size:14px; }
.roof-pro-page small { font-size:12px; }
.roof-pro-page .roof-element-counter strong,
.roof-pro-page .roof-estimate article strong { font-size:14px; }

@media (max-width:680px) {
  .portal-page-catalog .catalog-business-strip div { min-height:94px; padding:15px; }
  .portal-page-catalog .catalog-business-strip span { font-size:12px; }
  .portal-page-catalog .manufacturer-library { padding-top:60px; }
  .portal-page-catalog .manufacturer-library-head h2 { font-size:clamp(2.45rem,12vw,3.3rem); }
  .portal-page-catalog .manufacturer-library-stats article { min-height:82px; }
  .portal-page-catalog .manufacturer-product-copy { min-height:0; }
  .portal-page-catalog .manufacturer-documents > a { grid-template-columns:36px minmax(0,1fr) auto; }
  .portal-page-catalog .manufacturer-documents > a > span { grid-column:auto; }
  .portal-main-nav a { font-size:12px; }
}
/* Creator PRO library: plans, openings, roofs and saved furniture */
.palette-panel-pro { min-width:0; overflow:hidden; }
.palette-panel-pro .panel-head { padding-bottom:12px; }
.structure-library-tabs { width:calc(100% - 24px); min-width:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin:0 12px 12px; padding:4px; border:1px solid #d8e2e7; border-radius:12px; background:#eef3f6; }
.structure-library-tabs button { min-width:0; min-height:54px; display:grid; place-items:center; align-content:center; gap:3px; padding:5px 2px; color:#64778a; border:0; border-radius:9px; background:transparent; font:700 11px/1.1 "Barlow Condensed",sans-serif; cursor:pointer; }
.structure-library-tabs button svg { width:18px; height:18px; }
.structure-library-tabs button.active { color:#075fce; background:#fff; box-shadow:0 4px 14px rgba(32,72,110,.12); }
.structure-grid-pro { padding-top:0; }
.structure-grid-pro .structure-tile { min-height:106px; }
.library-search { height:44px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; margin:0 12px 9px; padding:0 11px; border:1px solid #cedbe4; border-radius:10px; background:#fff; }
.library-search svg { color:#6a7d8e; }
.library-search input { min-width:0; height:100%; padding:0; border:0; outline:0; color:#183047; background:transparent; font:650 13px/1.2 "Barlow Condensed",sans-serif; }
.plan-library { width:100%; min-width:0; }
.library-filter-chips { width:100%; min-width:0; display:flex; flex-wrap:wrap; gap:5px; overflow:visible; padding:0 12px 9px; }
.library-filter-chips button { min-height:32px; flex:0 0 auto; padding:0 10px; color:#62768a; border:1px solid #d5e0e7; border-radius:999px; background:#fff; font:750 12px/1 "Barlow Condensed",sans-serif; cursor:pointer; }
.library-filter-chips button.active { color:#fff; border-color:#096cd9; background:#096cd9; }
.plan-library-results { width:100%; min-width:0; max-height:455px; display:grid; gap:6px; overflow-y:auto; overflow-x:hidden; padding:0 10px 12px 12px; scrollbar-width:thin; }
.plan-library-results > button { min-width:0; min-height:84px; display:grid; grid-template-columns:76px minmax(0,1fr) auto; align-items:center; gap:10px; padding:8px; color:#1a3045; text-align:left; border:1px solid #d8e2e8; border-radius:11px; background:linear-gradient(145deg,#fff,#f5f8fa); cursor:pointer; transition:border-color .16s,transform .16s,box-shadow .16s; }
.plan-library-results > button:hover { transform:translateY(-1px); border-color:#85bfff; box-shadow:0 8px 20px rgba(31,84,132,.1); }
.plan-library-results svg { width:76px; height:62px; overflow:visible; border-radius:8px; background:#eaf2f8; }
.plan-library-results svg polygon { fill:rgba(20,112,216,.12); stroke:#126fd5; stroke-width:2.5; stroke-linejoin:round; }
.plan-library-results > button > span { min-width:0; display:grid; gap:2px; }
.plan-library-results small { color:#0872d8; font:800 11px/1.1 "Barlow Condensed",sans-serif; }
.plan-library-results strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 15px/1.15 "Barlow Condensed",sans-serif; }
.plan-library-results i { overflow:hidden; color:#708294; font:600 12px/1.15 "Barlow Condensed",sans-serif; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.plan-library-results b { padding:6px 8px; color:#075fce; border-radius:7px; background:#e8f2ff; font:800 11px/1 "Barlow Condensed",sans-serif; }
.opening-preset-library,.roof-preset-library,.furniture-library { min-width:0; }
.opening-preset-library > header,.roof-preset-library > header { display:grid; gap:3px; padding:0 13px 11px; }
.opening-preset-library > header strong,.roof-preset-library > header strong { color:#172c41; font:800 16px/1.1 "Barlow Condensed",sans-serif; }
.opening-preset-library > header span,.roof-preset-library > header span { color:#6b7f91; font:600 12px/1.25 "Barlow Condensed",sans-serif; }
.opening-preset-library > div,.roof-preset-library > div { max-height:470px; display:grid; grid-template-columns:1fr 1fr; gap:7px; overflow-y:auto; padding:0 11px 12px; scrollbar-width:thin; }
.opening-preset-library > div > button,.roof-preset-library > div > button { min-width:0; min-height:108px; display:grid; align-content:start; gap:4px; padding:10px; color:#1d3348; text-align:left; border:1px solid #d7e1e8; border-radius:11px; background:#fff; cursor:pointer; }
.opening-preset-library > div > button.active,.roof-preset-library > div > button.active { border-color:#1679e8; background:#edf6ff; box-shadow:inset 0 0 0 1px rgba(22,121,232,.12); }
.opening-preset-library button strong,.roof-preset-library button strong { font:800 14px/1.15 "Barlow Condensed",sans-serif; }
.opening-preset-library button small,.roof-preset-library button small { color:#718496; font:650 11px/1.2 "Barlow Condensed",sans-serif; }
.opening-preset-symbol { width:35px; height:35px; display:grid; place-items:center; color:#0871d8; border-radius:8px; background:#e8f2ff; }
.opening-preset-symbol.garage { color:#9b5704; background:#fff0dc; }
.roof-miniature { height:46px; position:relative; display:block; overflow:hidden; border-radius:7px; background:linear-gradient(#dce9f3 0 66%,#ccd6d3 66%); }
.roof-miniature i,.roof-miniature b { width:52%; height:7px; position:absolute; top:21px; left:24%; border-radius:2px; background:#465665; transform:rotate(24deg); transform-origin:right center; }
.roof-miniature b { transform:rotate(-24deg); transform-origin:left center; }
.roof-miniature.roof-flat i { width:72%; left:14%; transform:none; }.roof-miniature.roof-flat b { display:none; }
.roof-miniature.roof-mono i { width:72%; left:14%; transform:rotate(-11deg); transform-origin:center; }.roof-miniature.roof-mono b { display:none; }
.roof-miniature.roof-hip i { transform:rotate(18deg) skewX(-18deg); }.roof-miniature.roof-hip b { transform:rotate(-18deg) skewX(18deg); }
.roof-miniature.roof-complex::after { content:""; width:46%; height:7px; position:absolute; top:25px; left:27%; border-radius:2px; background:#596a78; transform:rotate(90deg); }
.furniture-library-grid { max-height:465px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; overflow-y:auto; padding:0 11px 12px; scrollbar-width:thin; }
.furniture-library-grid > button { min-width:0; min-height:108px; display:grid; grid-template-rows:48px auto auto; gap:3px; padding:9px; color:#1e3347; text-align:left; border:1px solid #d8e2e8; border-radius:11px; background:#fff; cursor:pointer; }
.furniture-library-grid > button > span { display:grid; place-items:center; overflow:hidden; border-radius:7px; background:linear-gradient(145deg,#edf3f5,#dce7ea); }
.furniture-library-grid > button > span i { width:62%; height:48%; display:block; border:2px solid color-mix(in srgb,var(--furniture-color) 70%,#233a48); border-radius:5px; background:var(--furniture-color); box-shadow:5px 6px 0 rgba(25,50,60,.11); }
.furniture-library-grid strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:800 14px/1.15 "Barlow Condensed",sans-serif; }
.furniture-library-grid small { color:#718394; font:650 11px/1.15 "Barlow Condensed",sans-serif; }
.plan-object { cursor:pointer; filter:drop-shadow(0 .03px .03px rgba(15,35,50,.25)); }
.plan-object > rect:first-of-type { stroke:#30495b; stroke-width:.018; }
.plan-object-inset { fill:rgba(255,255,255,.2); stroke:rgba(255,255,255,.55); stroke-width:.012; }
.plan-object text { fill:#263b4b; font:700 .13px/1 "Barlow Condensed",sans-serif; pointer-events:none; }
.plan-object.selected > rect:first-of-type { stroke:#0878ef; stroke-width:.065; }

@media (max-width:1024px) {
  .mobile-drawer { width:auto; max-width:calc(100% - 20px); }
  .mobile-drawer-body { overflow-x:hidden; }
  .mobile-drawer .palette-panel-pro { width:100%; min-width:0; overflow:hidden; border:0; box-shadow:none; }
  .structure-library-tabs { width:100%; position:sticky; z-index:2; top:0; margin-right:0; margin-left:0; background:#eef3f6; }
  .library-search { width:calc(100% - 24px); }
  .plan-library-results,.opening-preset-library > div,.roof-preset-library > div,.furniture-library-grid { max-height:none; overflow:visible; }
  .plan-library-results { overflow-x:hidden; }
}

@media (max-width:520px) {
  .structure-library-tabs button { min-height:50px; font-size:10px; }
  .plan-library-results > button { grid-template-columns:66px minmax(0,1fr); }
  .plan-library-results > button > b { display:none; }
  .plan-library-results svg { width:66px; }
  .opening-preset-library > div,.roof-preset-library > div,.furniture-library-grid { grid-template-columns:1fr 1fr; }
}
/* Creator materials: verified take-off products plus the complete indexed catalog. */
.product-estimator-panel > .creator-catalog-scope { order: 4; }
.product-estimator-panel > .creator-full-catalog { order: 5; }
.product-estimator-panel > .catalog-marketplace { order: 5; }
.material-section-estimate > .creator-catalog-scope,
.material-section-estimate > .creator-full-catalog { display:none; }
.creator-catalog-scope { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 14px; }
.creator-catalog-scope > button { min-width:0; min-height:72px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; color:#50677a; border:1px solid #d8e2e8; border-radius:14px; background:#fff; text-align:left; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.creator-catalog-scope > button:hover { transform:translateY(-1px); border-color:#a9c9e8; box-shadow:0 10px 28px rgba(23,54,82,.08); }
.creator-catalog-scope > button > svg { width:42px; height:42px; padding:10px; color:#42617c; border-radius:11px; background:#edf3f7; }
.creator-catalog-scope > button > span { min-width:0; display:grid; gap:4px; }
.creator-catalog-scope strong { color:#172b3d; font-size:15px; }
.creator-catalog-scope small { overflow:hidden; color:#738798; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.creator-catalog-scope b { min-width:58px; padding:8px 10px; color:#42617c; border-radius:99px; background:#eef3f6; font-size:13px; text-align:center; white-space:nowrap; }
.creator-catalog-scope > button.active { color:#086b5f; border-color:#65b8ab; background:linear-gradient(135deg,#effaf7,#fff); box-shadow:0 10px 28px rgba(14,116,99,.1); }
.creator-catalog-scope > button.active > svg { color:#fff; background:#128a78; }
.creator-catalog-scope > button.active b { color:#08705f; background:#dff4ee; }

.creator-full-catalog { min-width:0; overflow:hidden; border:1px solid #d8e3e2; border-radius:17px; background:#f3f7f6; }
.creator-full-catalog-summary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:20px; padding:20px 22px; color:#eaf7f5; background:radial-gradient(circle at 88% 0,rgba(71,199,175,.22),transparent 40%),linear-gradient(120deg,#112c35,#17464c); }
.creator-full-catalog-summary > div:first-child { display:grid; gap:4px; }
.creator-full-catalog-summary > div:first-child > span { color:#65d6c1; font-size:12px; font-weight:900; letter-spacing:.14em; }
.creator-full-catalog-summary > div:first-child > strong { color:#fff; font-size:clamp(24px,3vw,36px); letter-spacing:-.035em; }
.creator-full-catalog-summary > div:first-child > small { color:#afc7c9; font-size:14px; }
.creator-full-catalog-summary > div:last-child { display:grid; grid-template-columns:repeat(2,minmax(130px,1fr)); overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.05); }
.creator-full-catalog-summary article { display:grid; gap:3px; padding:14px 17px; }
.creator-full-catalog-summary article + article { border-left:1px solid rgba(255,255,255,.14); }
.creator-full-catalog-summary article strong { color:#fff; font-size:18px; }
.creator-full-catalog-summary article span { color:#a8c1c3; font-size:12px; }
.creator-catalog-categories { display:flex; gap:8px; overflow-x:auto; padding:12px 14px; border-bottom:1px solid #d8e3e2; background:#fff; scrollbar-width:none; }
.creator-catalog-categories::-webkit-scrollbar { display:none; }
.creator-catalog-categories button { min-height:42px; flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:0 13px; color:#587177; border:1px solid #d8e3e2; border-radius:10px; background:#fff; font-size:14px; font-weight:750; }
.creator-catalog-categories button svg { color:#5a7c7c; }
.creator-catalog-categories button.active { color:#fff; border-color:#138876; background:#138876; box-shadow:0 6px 18px rgba(19,136,118,.2); }
.creator-catalog-categories button.active svg { color:#fff; }
.creator-full-results-head { min-height:54px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 17px; border-bottom:1px solid #dce6e4; background:#f7faf9; }
.creator-full-results-head > div { display:flex; align-items:baseline; gap:9px; }
.creator-full-results-head strong { color:#17333a; font-size:15px; }
.creator-full-results-head span { color:#71888d; font-size:13px; }
.creator-full-results-head > a { color:#087866; font-size:13px; font-weight:800; text-decoration:none; }
.creator-catalog-error { margin:14px; padding:13px 15px; color:#974646; border-radius:10px; background:#fff1f1; font-size:14px; }
.creator-indexed-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-height:260px; padding:14px; transition:opacity .18s ease; }
.creator-indexed-products.loading { opacity:.45; }
.creator-indexed-products > article { min-width:0; display:grid; grid-template-columns:118px minmax(0,1fr); grid-template-rows:1fr auto; overflow:hidden; border:1px solid #d9e3e1; border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(20,54,58,.045); }
.creator-indexed-image { position:relative; grid-row:1/3; min-height:158px; display:grid; place-items:center; padding:10px; border-right:1px solid #e1e9e7; background:linear-gradient(145deg,#f8faf9,#edf3f1); }
.creator-indexed-image img { width:calc(100% - 20px); height:128px; position:absolute; inset:10px; z-index:1; object-fit:contain; background:linear-gradient(145deg,#f8faf9,#edf3f1); }
.creator-indexed-placeholder { display:grid; place-items:center; gap:6px; color:#789097; text-align:center; }
.creator-indexed-placeholder svg { color:#8ba2a7; }
.creator-indexed-placeholder small { font-size:11px; line-height:1.25; }
.creator-indexed-image > span { position:absolute; left:8px; bottom:8px; padding:5px 7px; color:#116e61; border-radius:6px; background:rgba(230,247,242,.94); font-size:10px; font-weight:900; letter-spacing:.05em; }
.creator-indexed-image > .creator-indexed-placeholder { position:static; padding:0; color:#789097; background:transparent; font-weight:600; letter-spacing:0; }
.creator-indexed-image > span:last-child { z-index:2; }
.creator-indexed-copy { min-width:0; display:grid; align-content:start; gap:5px; padding:13px 14px 8px; }
.creator-indexed-copy > span { overflow:hidden; color:#128573; font-size:11px; font-weight:900; letter-spacing:.06em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.creator-indexed-copy h3 { display:-webkit-box; overflow:hidden; margin:0; color:#17303d; font-size:15px; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.creator-indexed-copy h3 a { color:inherit; text-decoration:none; }
.creator-indexed-copy > small { overflow:hidden; color:#73868e; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.creator-indexed-copy > div { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:5px; }
.creator-indexed-copy > div strong { color:#132f3a; font-size:16px; }
.creator-indexed-copy > div b { color:#087461; font-size:11px; }
.creator-indexed-actions { grid-column:2; display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; padding:8px 14px 12px; }
.creator-indexed-actions a { min-height:35px; display:grid; place-items:center; padding:0 11px; color:#fff; border-radius:8px; background:#128775; font-size:12px; font-weight:850; text-decoration:none; }
.creator-indexed-actions a:last-child { color:#536d73; border:1px solid #d3dfdc; background:#fff; }
.creator-catalog-pagination { display:flex; align-items:center; justify-content:center; gap:18px; padding:15px; border-top:1px solid #dbe5e3; background:#fff; }
.creator-catalog-pagination button { min-height:39px; padding:0 14px; color:#176b61; border:1px solid #ccdcda; border-radius:9px; background:#fff; font-size:13px; font-weight:800; }
.creator-catalog-pagination button:disabled { opacity:.38; }
.creator-catalog-pagination span { color:#6d8388; font-size:13px; }

@media (max-width:1100px) {
  .creator-indexed-products { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .creator-catalog-scope { grid-template-columns:1fr; }
  .creator-full-catalog-summary { grid-template-columns:1fr; padding:18px; }
  .creator-full-catalog-summary > div:last-child { width:100%; }
  .creator-full-results-head { align-items:flex-start; flex-direction:column; }
  .creator-indexed-products { padding:9px; }
  .creator-indexed-products > article { grid-template-columns:92px minmax(0,1fr); }
  .creator-indexed-image { min-height:138px; padding:7px; }
  .creator-indexed-image img { height:105px; }
  .creator-indexed-copy { padding:11px 10px 6px; }
  .creator-indexed-copy h3 { font-size:14px; }
  .creator-indexed-copy > small { font-size:11px; }
  .creator-indexed-copy > div { align-items:flex-start; flex-direction:column; }
  .creator-indexed-actions { padding:7px 10px 10px; }
  .creator-indexed-actions a:last-child { display:none; }
}
@media (max-width:430px) {
  .creator-catalog-scope > button { grid-template-columns:38px minmax(0,1fr); }
  .creator-catalog-scope > button > svg { width:38px; height:38px; }
  .creator-catalog-scope b { display:none; }
  .creator-full-catalog-summary > div:last-child { grid-template-columns:1fr 1fr; }
  .creator-full-catalog-summary article { padding:11px; }
  .creator-catalog-pagination { gap:8px; }
  .creator-catalog-pagination button { padding:0 9px; font-size:12px; }
}

/* Mobile drawers stay above navigation and keep their own stable header. */
@media (max-width:1024px) {
  .editor-shell-mobile .mobile-drawer {
    position:fixed;
    width:auto;
    height:min(74dvh,720px);
    max-width:none;
    max-height:calc(100dvh - 104px - env(safe-area-inset-bottom));
    left:10px;
    right:10px;
    bottom:calc(78px + env(safe-area-inset-bottom));
    grid-template-rows:64px minmax(0,1fr);
    padding:0;
    overflow:hidden;
    border:1px solid #d4dfe7;
    border-radius:18px;
    background:#fff;
    box-shadow:0 24px 70px rgba(17,35,52,.24);
    transform:translateY(120%);
    opacity:0;
    pointer-events:none;
    transition:transform .24s ease,opacity .24s ease;
  }
  .editor-shell-mobile .mobile-drawer.open {
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .editor-shell-mobile .mobile-drawer-head {
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) 42px;
    align-items:center;
    gap:12px;
    padding:10px 12px 10px 16px;
    border-bottom:1px solid #e0e7ec;
    background:linear-gradient(180deg,#fff,#f8fafb);
  }
  .editor-shell-mobile .mobile-drawer-head > div { min-width:0; display:grid; gap:2px; }
  .editor-shell-mobile .mobile-drawer-head .eyebrow { margin:0; color:#1675e8; font-size:11px; letter-spacing:.15em; }
  .editor-shell-mobile .mobile-drawer-head strong { overflow:hidden; color:#172a3d; font-size:17px; text-overflow:ellipsis; white-space:nowrap; }
  .editor-shell-mobile .mobile-drawer-close {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    color:#263a4d;
    border:1px solid #d8e1e8;
    border-radius:11px;
    background:#fff;
    box-shadow:0 4px 12px rgba(28,51,72,.07);
  }
  .editor-shell-mobile .mobile-drawer-body {
    min-width:0;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px 12px 24px;
    scroll-padding-bottom:28px;
  }
  .editor-shell-mobile .mobile-drawer .side-panel,
  .editor-shell-mobile .mobile-drawer .palette-panel { width:100%; min-width:0; padding:0; }
  .editor-shell-mobile .mobile-drawer .panel-stack { min-width:0; gap:13px; padding:0; }
  .editor-shell-mobile .mobile-drawer .panel-tabs { position:sticky; top:0; z-index:3; margin:0; background:#eef3f7; }
  .editor-shell-mobile .mobile-drawer .field input,
  .editor-shell-mobile .mobile-drawer .field select { width:100%; min-width:0; }
}

@media (max-width:520px) {
  .editor-shell-mobile .mobile-drawer { left:6px; right:6px; bottom:calc(74px + env(safe-area-inset-bottom)); height:min(78dvh,740px); border-radius:15px; }
  .editor-shell-mobile .mobile-drawer-body { padding:9px 9px 22px; }
}

/* Premium materials workspace */
.editor-view-materials .workspace-stage-materials {
  background:
    radial-gradient(circle at 92% 3%, rgba(37, 190, 164, .09), transparent 28%),
    linear-gradient(145deg, #f3f7f8, #edf3f5);
}
.editor-view-materials .product-estimator-panel {
  gap: 0;
  padding: 22px;
  background: rgba(255, 255, 255, .94);
}
.editor-view-materials .product-estimator-head {
  min-height: 112px;
  margin: 0 0 14px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(66, 124, 130, .26);
  border-radius: 18px;
  background:
    radial-gradient(circle at 82% 18%, rgba(60, 208, 181, .18), transparent 33%),
    linear-gradient(120deg, #102b36, #153d42 68%, #174c49);
  box-shadow: 0 16px 34px rgba(24, 60, 68, .13);
}
.editor-view-materials .product-estimator-head .eyebrow { color: #66d9c5; font-size: 11px; }
.editor-view-materials .product-estimator-head h2 {
  margin: 6px 0 5px;
  color: #fff;
  font-size: clamp(20px, 2vw, 25px);
  line-height: 1.15;
}
.editor-view-materials .product-estimator-head > div > span { color: #b9ced2; font-size: 12px; }
.editor-view-materials .estimate-total-card {
  min-width: 250px;
  padding: 14px 18px;
  border-color: rgba(139, 232, 213, .25);
  background: rgba(5, 28, 34, .32);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}
.editor-view-materials .estimate-total-card span,
.editor-view-materials .estimate-total-card small { color: #bad3d4; font-size: 11px; }
.editor-view-materials .estimate-total-card strong { color: #f7fffd; font-size: 25px; line-height: 1.2; }

.editor-view-materials .material-section-tabs {
  margin: 0 0 16px;
  padding: 6px;
  border: 1px solid #d8e3e6;
  border-radius: 14px;
  background: #edf2f4;
}
.editor-view-materials .material-section-tabs button { min-height: 66px; border-radius: 10px; }
.editor-view-materials .material-section-tabs button strong { font-size: 15px; }
.editor-view-materials .material-section-tabs button small { font-size: 12px; }
.editor-view-materials .material-section-tabs button > span { width: 32px; height: 32px; font-size: 11px; }

.editor-view-materials .product-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin: 0 0 16px;
}
.editor-view-materials .product-metrics .metric-tile {
  min-height: 88px;
  align-content: center;
  gap: 7px;
  padding: 15px 17px;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(32, 61, 75, .045);
}
.editor-view-materials .product-metrics .metric-tile span { font-size: 12px; }
.editor-view-materials .product-metrics .metric-tile strong { font-size: 20px; line-height: 1.15; }

.editor-view-materials .foundation-material-summary {
  margin-bottom: 16px;
  border-radius: 15px;
  background: linear-gradient(145deg, #f0faf6, #f6fbf9);
  box-shadow: 0 9px 22px rgba(24, 82, 70, .055);
}
.editor-view-materials .foundation-material-head { padding: 15px 17px; }
.editor-view-materials .foundation-material-head span { font-size: 10px; }
.editor-view-materials .foundation-material-head strong { font-size: 14px; }
.editor-view-materials .foundation-material-head > b { font-size: 13px; }
.editor-view-materials .foundation-material-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.editor-view-materials .foundation-material-products button,
.editor-view-materials .foundation-material-products a {
  min-height: 72px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 13px;
}
.editor-view-materials .foundation-material-products img { width: 46px; height: 46px; border-radius: 8px; }
.editor-view-materials .foundation-material-products strong { font-size: 12px; }
.editor-view-materials .foundation-material-products small { font-size: 10px; }

.editor-view-materials .estimate-lines { gap: 12px; }
.editor-view-materials .estimate-line {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding: 15px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(31, 57, 72, .05);
}
.editor-view-materials .estimate-product-image-button,
.editor-view-materials .estimate-line > img,
.editor-view-materials .estimate-product-placeholder { width: 112px; height: 112px; border-radius: 12px; }
.editor-view-materials .estimate-line-title span { font-size: 11px; }
.editor-view-materials .estimate-line-title strong { font-size: 15px; }
.editor-view-materials .stock-chip { padding: 6px 9px; font-size: 10px !important; }
.editor-view-materials .estimate-product-select { gap: 12px; }
.editor-view-materials .estimate-product-select span { font-size: 11px; }
.editor-view-materials .estimate-product-select select { height: 40px; padding: 0 11px; font-size: 12px; }
.editor-view-materials .estimate-calculation span { font-size: 10px; }
.editor-view-materials .estimate-calculation strong { font-size: 13px; }
.editor-view-materials .estimate-calculation div { padding: 10px 11px; }
.editor-view-materials .estimate-formula { padding: 10px 12px; font-size: 11px; }
.editor-view-materials .estimate-product-meta { font-size: 10px; }
.editor-view-materials .estimate-detail-link { font-size: 10px; }

@media (max-width: 1024px) {
  .editor-shell-mobile .product-estimator-panel { padding: 13px; }
  .editor-shell-mobile .product-estimator-head { min-height: 0; align-items: stretch; padding: 16px; }
  .editor-shell-mobile .estimate-total-card { min-width: 190px; }
  .editor-shell-mobile .product-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-shell-mobile .foundation-material-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-shell-mobile .foundation-material-products a:nth-child(odd) { border-left: 0; }
  .editor-shell-mobile .foundation-material-products a:nth-child(n + 3) { border-top: 1px solid #d8e5e1; }
}

@media (max-width: 620px) {
  .editor-shell-mobile .product-estimator-head { align-items: stretch; flex-direction: column; }
  .editor-shell-mobile .estimate-total-card { min-width: 0; text-align: left; }
  .editor-shell-mobile .material-section-tabs { grid-template-columns: 1fr; }
  .editor-shell-mobile .product-metrics { gap: 8px; }
  .editor-shell-mobile .product-metrics .metric-tile { min-height: 76px; padding: 12px; }
  .editor-shell-mobile .product-metrics .metric-tile strong { font-size: 17px; }
  .editor-shell-mobile .foundation-material-products { grid-template-columns: 1fr; }
  .editor-shell-mobile .foundation-material-products a { border-left: 0 !important; border-top: 1px solid #d8e5e1; }
  .editor-shell-mobile .foundation-material-products a:first-child { border-top: 0; }
  .editor-shell-mobile .estimate-line { grid-template-columns: 78px minmax(0, 1fr); gap: 10px; padding: 10px; }
  .editor-shell-mobile .estimate-product-image-button,
  .editor-shell-mobile .estimate-line > img,
  .editor-shell-mobile .estimate-product-placeholder { width: 78px; height: 78px; }
  .editor-shell-mobile .estimate-line-title strong { white-space: normal; }
  .editor-shell-mobile .estimate-product-select { grid-template-columns: 1fr; }
  .editor-shell-mobile .estimate-calculation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-shell-mobile .estimate-calculation div:nth-child(odd) { border-left: 0; }
  .editor-shell-mobile .estimate-calculation div:nth-child(n + 3) { border-top: 1px solid #e0e6e9; }
}

/* Final mobile drawer enforcement: one edge panel and no nested scrollbars. */
@media (max-width: 1024px) {
  .editor-shell-mobile { grid-template-rows: 62px 46px minmax(0, 1fr); gap: 7px; padding: 7px 7px calc(74px + env(safe-area-inset-bottom)); }
  .editor-shell-mobile .mobile-view-switch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .editor-shell-mobile .mobile-drawer {
    width: min(430px, 94vw);
    max-width: 94vw;
    height: 100dvh;
    max-height: none;
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    grid-template-rows: 68px minmax(0, 1fr);
    border: 0;
    border-left: 1px solid #d6e0e7;
    border-radius: 0;
    transform: translateX(105%);
    box-shadow: -24px 0 70px rgba(8, 25, 38, .22);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
  }
  .editor-shell-mobile .mobile-drawer.open { transform: translateX(0); }
  .editor-shell-mobile .mobile-drawer-head { min-height: 68px; padding: 11px 13px 11px 17px; color: #fff; border: 0; background: linear-gradient(110deg, #102631, #15404b); }
  .editor-shell-mobile .mobile-drawer-head .eyebrow { color: #67d5c1; }
  .editor-shell-mobile .mobile-drawer-head strong { color: #fff; }
  .editor-shell-mobile .mobile-drawer-close { color: #fff; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.08); }
  .editor-shell-mobile .mobile-drawer-body { padding: 9px; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
  .editor-shell-mobile .mobile-drawer-body::-webkit-scrollbar,
  .editor-shell-mobile .mobile-workspace .dock-body::-webkit-scrollbar { display: none; }
  .editor-shell-mobile .mobile-drawer .plan-library-results,
  .editor-shell-mobile .mobile-drawer .opening-preset-library > div,
  .editor-shell-mobile .mobile-drawer .roof-preset-library > div,
  .editor-shell-mobile .mobile-drawer .furniture-library-grid { max-height: none; overflow: visible; }
}

@media (max-width: 520px) {
  .editor-shell-mobile .mobile-drawer { width: 96vw; max-width: 96vw; left: auto; right: 0; bottom: 0; height: 100dvh; border-radius: 0; }
}

/* Secure account center */
.account-center { position: relative; display: inline-flex; }
.account-trigger {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  color: #254255;
  border: 1px solid #d2dee4;
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.account-trigger svg { width: 17px; height: 17px; }
.app-header .account-trigger { color: #d9e7ef; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.portal-header .account-trigger { min-height: 44px; }

.account-modal-layer { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 18px; }
.account-modal-backdrop { position: absolute; inset: 0; background: rgba(7, 18, 27, .62); backdrop-filter: blur(5px); }
.account-modal {
  width: min(460px, 100%);
  max-height: calc(100dvh - 36px);
  position: relative;
  z-index: 1;
  overflow-y: auto;
  color: #172b39;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  background: #f7f9fa;
  box-shadow: 0 34px 90px rgba(6, 20, 30, .38);
  scrollbar-width: none;
}
.account-modal::-webkit-scrollbar { display: none; }
.account-modal > header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; color: #fff; background: radial-gradient(circle at 86% 0,rgba(39,151,255,.3),transparent 40%),linear-gradient(115deg,#10232e,#153e49); }
.account-modal > header > div { min-width: 0; display: grid; gap: 4px; }
.account-modal > header span { color: #67d9c4; font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.account-modal > header strong { font-size: 22px; }
.account-modal > header button { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(255,255,255,.07); }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 18px 0; padding: 4px; border-radius: 11px; background: #e8eef1; }
.account-tabs button { min-height: 42px; color: #647987; border-radius: 8px; background: transparent; font-size: 14px; font-weight: 800; }
.account-tabs button.active { color: #fff; background: linear-gradient(135deg,#0d75da,#218fea); box-shadow: 0 7px 18px rgba(13,117,218,.2); }
.account-form { display: grid; gap: 13px; padding: 18px; }
.account-form label { display: grid; gap: 7px; }
.account-form label > span { color: #526b7b; font-size: 13px; font-weight: 800; }
.account-form input,
.account-form select { width: 100%; min-height: 48px; padding: 0 13px; color: #162c3a; border: 1px solid #cfdae0; border-radius: 10px; outline: 0; background: #fff; font-size: 16px; }
.account-form input:focus,
.account-form select:focus { border-color: #1887e9; box-shadow: 0 0 0 3px rgba(24,135,233,.12); }
.account-form > small { color: #708491; font-size: 12px; line-height: 1.45; }
.account-error { padding: 11px 12px; color: #9b3333; border: 1px solid #edcaca; border-radius: 9px; background: #fff0f0; font-size: 13px; line-height: 1.4; }
.account-message { padding: 11px 12px; color: #146b5a; border: 1px solid #bfe6dc; border-radius: 9px; background: #effbf7; font-size: 13px; line-height: 1.4; }
.account-back { margin: 16px 18px 0; color: #1479c9; font-size: 13px; font-weight: 800; text-align: left; }
.account-reset-link { justify-self: start; margin-top: -4px; color: #1479c9; font-size: 12px; font-weight: 800; }
.account-submit,
.account-logout { min-height: 48px; color: #fff; border-radius: 10px; background: linear-gradient(135deg,#108675,#20aa91); font-size: 14px; font-weight: 850; box-shadow: 0 9px 22px rgba(16,134,117,.2); }
.account-submit:disabled,
.account-logout:disabled { opacity: .6; cursor: wait; }
.account-profile { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 14px; padding: 20px; }
.account-avatar { width: 58px; height: 58px; display: grid; place-items: center; color: #fff; border-radius: 16px; background: linear-gradient(145deg,#0d75da,#1ea391); font-size: 24px; font-weight: 900; }
.account-profile > div:not(.account-error) { min-width: 0; display: grid; gap: 4px; }
.account-profile > div strong { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.account-profile > div small { overflow: hidden; color: #6c808d; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-profile > p,
.account-profile > .account-error,
.account-profile > .account-logout { grid-column: 1 / -1; }
.account-profile > p { margin: 4px 0; color: #607583; font-size: 13px; line-height: 1.55; }
.account-logout { background: #243946; box-shadow: none; }

@media (max-width: 1280px) and (min-width: 1025px) {
  .app-header .account-center.compact .account-trigger { width: 42px; padding: 0; }
  .app-header .account-center.compact .account-trigger span { display: none; }
}

@media (max-width: 1024px) {
  .mobile-actions .account-trigger { width: 44px; height: 44px; min-height: 44px; padding: 0; color: #d7e2eb; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
  .mobile-actions .account-trigger span { display: none; }
  .mobile-actions { gap: 5px; }
}

@media (max-width: 560px) {
  .account-modal-layer { padding: 8px; }
  .account-modal { max-height: calc(100dvh - 16px); border-radius: 16px; }
  .account-modal > header { min-height: 76px; padding: 14px 15px; }
  .account-modal > header strong { font-size: 19px; }
  .account-tabs { margin: 12px 12px 0; }
  .account-form { padding: 14px 12px 16px; }
}

/* Mobile QA pass: natural document scrolling, readable dimensions and touch-safe controls. */
@media (max-width: 1024px) {
  .mobile-icon-button,
  .mobile-drawer-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-view-tab,
  .mobile-bottom-item {
    font-size: 14px;
    line-height: 1.15;
  }

  .mobile-bottom-item {
    min-width: 0;
  }

  .mobile-bottom-item span {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .app-shell:has(.editor-view-materials),
  .app-shell:has(.mobile-drawer.open) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .editor-shell-mobile.editor-view-materials,
  .editor-shell-mobile:has(.mobile-drawer.open) {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .editor-shell-mobile.editor-view-materials {
    grid-template-rows: 62px 46px auto;
  }

  .editor-view-materials .mobile-workspace,
  .editor-view-materials .workspace-dock,
  .editor-view-materials .dock-body,
  .editor-view-materials .workspace-stage {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .editor-shell-mobile .mobile-drawer.open {
    position: absolute;
    top: 0;
    bottom: auto;
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 68px auto;
  }

  .editor-shell-mobile .mobile-drawer-body {
    max-height: none;
    overflow: visible !important;
  }

  /* Keep tablet layouts on one natural document scroll axis. */
  .editor-shell-mobile,
  .editor-shell-mobile .workspace-column,
  .editor-shell-mobile .mobile-workspace,
  .editor-shell-mobile .workspace-stage,
  .editor-shell-mobile .workspace-dock,
  .editor-shell-mobile .dock-body,
  .editor-shell-mobile .canvas-card,
  .editor-shell-mobile .canvas-stage,
  .editor-shell-mobile .mobile-drawer,
  .editor-shell-mobile .mobile-drawer-body,
  .studio-drawer,
  .studio-drawer-body {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible !important;
  }

  .editor-shell-mobile {
    grid-template-rows: auto auto auto auto;
  }

  .editor-shell-mobile .mobile-drawer.open {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    min-height: 100dvh;
    transform: none;
  }

  .editor-shell-mobile .mobile-drawer.open .mobile-drawer-body,
  .editor-shell-mobile .mobile-drawer.open .panel-stack,
  .editor-shell-mobile .mobile-drawer.open .structure-grid,
  .editor-shell-mobile .mobile-drawer.open .plan-library-results,
  .editor-shell-mobile .mobile-drawer.open .opening-preset-library > div,
  .editor-shell-mobile .mobile-drawer.open .roof-preset-library > div,
  .editor-shell-mobile .mobile-drawer.open .furniture-library-grid,
  .editor-shell-mobile .mobile-workspace .dock-body {
    overflow: visible !important;
    max-height: none;
  }

  .creator-catalog-categories {
    flex-wrap: wrap;
    overflow: visible;
  }

  .editor-shell-mobile button,
  .editor-shell-mobile [role="button"],
  .editor-shell-mobile select,
  .editor-shell-mobile input {
    min-height: 44px;
  }

  .editor-shell-mobile .mobile-view-switch button,
  .editor-shell-mobile .mobile-bottom-nav span,
  .editor-shell-mobile .mobile-drawer button,
  .editor-shell-mobile .mobile-drawer label,
  .editor-shell-mobile .mobile-drawer p,
  .editor-shell-mobile .mobile-drawer small,
  .editor-shell-mobile .dock-tab,
  .editor-shell-mobile .mode-chip {
    font-size: 14px;
  }

  .editor-shell-mobile .wall-label {
    font-size: .34px;
    font-weight: 900;
    stroke-width: .09px;
  }
}

.app-shell:has(.editor-view-materials) {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}

.editor-shell.editor-view-materials,
.editor-view-materials .workspace-column,
.editor-view-materials .workspace-stage-materials,
.editor-view-materials .workspace-dock,
.editor-view-materials .dock-body {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

@media (max-width: 520px) {
  .editor-shell-mobile .wall-label {
    font-size: .68px;
    stroke-width: .14px;
  }

  .editor-shell-mobile .creator-catalog-products a,
  .editor-shell-mobile .creator-catalog-filters label,
  .editor-shell-mobile .estimate-detail-link {
    min-height: 44px;
  }
}

/* Final manufacturer overrides keep the larger, keyboard-friendly treatment after the legacy portal rules. */
.manufacturer-category-strip { grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
.manufacturer-category-strip span { min-height:58px; align-items:center; cursor:pointer; font-size:.78rem; line-height:1.3; transition:background .18s,color .18s; }
.manufacturer-category-strip span:hover,
.manufacturer-category-strip span:focus-visible { color:#0b637d; background:#eef8f6; }
.manufacturer-studio-copy > span,.manufacturer-studio-products header span,.manufacturer-calculator-form > span,.manufacturer-calculator-result > span,.manufacturer-studio-docs header span { font-size:.72rem; }
.manufacturer-studio-copy p,.manufacturer-studio-products article p,.manufacturer-calculator-form label,.manufacturer-calculator-result > p,.manufacturer-studio-docs > p { font-size:.9rem; }
.manufacturer-studio-products h3 { font-size:1.08rem; }
.manufacturer-studio-products article > a,.manufacturer-studio-copy > div:last-child a,.manufacturer-calculator-form button { min-height:52px; font-size:.78rem; }
.manufacturer-studio a:focus-visible,.manufacturer-studio button:focus-visible,.manufacturer-studio input:focus-visible,.manufacturer-studio select:focus-visible,.manufacturer-visualization a:focus-visible,.manufacturer-visualization button:focus-visible,.manufacturer-visualization input:focus-visible,.manufacturer-visualization select:focus-visible { outline:3px solid #1675e8; outline-offset:3px; }
.manufacturer-visualization-canvas { min-height:0; height:clamp(420px, min(58vw, 600px), 620px); }
.manufacturer-three-frame { position:relative; width:100%; height:100%; min-height:0; overflow:hidden; }
.manufacturer-three-canvas { width:100%; height:100%; min-height:0; display:grid; place-items:stretch; }
.manufacturer-three-canvas canvas { width:100% !important; height:100% !important; min-height:0; display:block; cursor:grab; }
.manufacturer-three-canvas canvas:active { cursor:grabbing; }
.manufacturer-three-hint { position:absolute; right:18px; bottom:16px; z-index:2; padding:9px 12px; color:#d7f5ef; border:1px solid rgba(180,238,225,.25); border-radius:999px; background:rgba(10,45,53,.74); font-size:.72rem; line-height:1; pointer-events:none; }
@media (max-width:1050px) { .manufacturer-category-strip { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px) { .manufacturer-visualization-canvas { height:clamp(360px, 64vw, 520px); } }
@media (max-width:680px) { .manufacturer-category-strip { grid-template-columns:1fr 1fr; }.manufacturer-category-strip span { min-height:64px; font-size:.72rem; }.manufacturer-three-hint { right:10px; bottom:10px; font-size:.64rem; } }
@media (min-width:821px) {
  .portal-main-nav a { min-height:46px; padding-inline:15px; font-size:.9rem; }
  .portal-header-actions button { min-height:46px; font-size:.82rem; }
  .build-stage-nav { min-height:96px; }
  .build-stage-nav button { min-height:76px; padding:14px 18px; }
  .build-stage-nav button strong { font-size:.9rem; }
  .build-stage-nav button small { font-size:.72rem; }
  .system-navigation span { font-size:.84rem; }
  .system-navigation i { font-size:.86rem; }
  .portal-section-heading p,.detail-hero-copy p,.subcategory-hero p { font-size:1rem; line-height:1.65; }
}

/* 2D plan view: readable grid and technical annotations. */
.manufacturer-visualization-canvas { height:clamp(480px,55vw,660px); min-height:0; background:#edf6f3; }
.manufacturer-2d-model { width:100%; height:100%; display:block; }
.manufacturer-2d-model text { fill:#2a555b; font:700 14px/1.2 Arial,sans-serif; letter-spacing:.08em; }
.manufacturer-2d-model .plan-material { fill:#0c727b; font-size:20px; letter-spacing:.01em; }
.manufacturer-2d-model .plan-room-labels text { fill:#fff; font-size:16px; letter-spacing:.06em; }
.manufacturer-2d-model .plan-dimensions line { stroke:#147b80; stroke-width:2; }
.manufacturer-2d-model .plan-dimensions text { fill:#0b6d75; font-size:18px; letter-spacing:.01em; }
.manufacturer-2d-model .plan-footer text { font-size:14px; letter-spacing:.04em; }

/* UI copy never drops below 14 px. Headings keep their display scale. */
.construction-portal :where(a,button,input,select,label,p,small,span,strong,b,i,li,dt,dd,th,td),
.portal-header :where(a,button,input,select,label,p,small,span,strong,b,i),
.portal-footer :where(a,button,input,select,label,p,small,span,strong,b,i),
.foundation-wizard :where(a,button,input,select,label,p,small,span,strong,b,i),
.manufacturer-studio :where(a,button,input,select,label,p,small,span,strong,b,i),
.manufacturer-visualization :where(a,button,input,select,label,p,small,span,strong,b,i),
.app-shell :where(a,button,input,select,label,p,small,span,strong,b,i,li,dt,dd,th,td) { font-size:max(14px,1em) !important; }
.manufacturer-visualization-head h2,.manufacturer-studio-copy h1,.manufacturer-studio-products h2,.manufacturer-studio-docs h2,.manufacturer-calculator h2 { font-size:clamp(2.1rem,4vw,4.2rem); }
@media (max-width:900px) { .manufacturer-visualization-canvas { height:clamp(390px,70vw,540px); } }
.site-header .topbar {
    z-index: 999!important;
}
nav#global-department-navigation{
    z-index: 9;
}

.brand-media-library > div { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important; }
.brand-media-library a { min-height:310px; display:flex; flex-direction:column; }
.brand-media-library a small { display:block; margin:12px 0 18px; color:#60777d; font-size:14px; line-height:1.45; }
.brand-media-library a strong { margin-top:auto; }
.brand-media-library a span { color:#bf3238; }

.foundation-fields input { font-variant-numeric:tabular-nums; }
.foundation-range-note { color:#667d83; font-size:14px; line-height:1.45; }

/* Offer systems: manufacturer and merchant kits calculated from the project. */
.offer-system-section { margin:26px 0; padding:22px; border:1px solid #d6e6e6; border-radius:18px; background:#f8fcfb; box-shadow:0 18px 40px rgba(9,55,65,.08); }
.offer-system-section header { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:18px; }
.offer-system-section header span { color:#0f7779; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.offer-system-section header h2 { margin:.25rem 0 .35rem; color:#112d34; font-size:clamp(1.35rem,2.5vw,2rem); line-height:1.05; }
.offer-system-section header p { max-width:780px; margin:0; color:#4e6870; line-height:1.55; }
.offer-system-section header > strong { min-width:56px; min-height:56px; display:grid; place-items:center; color:#fff; border-radius:16px; background:#0b6e73; font-size:1.35rem; }
.offer-system-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }
.offer-system-grid article { display:grid; gap:16px; padding:18px; border:1px solid #d9e7e5; border-radius:16px; background:#fff; }
.offer-system-head span { color:#c53638; font-size:.8rem; font-weight:900; letter-spacing:.08em; }
.offer-system-head h3 { margin:.35rem 0; color:#102e35; font-size:1.15rem; line-height:1.2; }
.offer-system-head p { margin:0; color:#5f7378; line-height:1.5; }
.offer-system-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.offer-system-metrics span { padding:10px; border-radius:12px; background:#edf7f5; }
.offer-system-metrics small { display:block; color:#647b82; font-weight:800; }
.offer-system-metrics strong { display:block; margin-top:3px; color:#0d4f57; line-height:1.15; }
.offer-system-lines { display:grid; gap:8px; }
.offer-system-lines span { display:grid; grid-template-columns:auto 1fr; gap:2px 8px; align-items:center; padding:9px 10px; border-radius:12px; background:#f6f8f8; }
.offer-system-lines b { grid-row:span 2; width:32px; height:32px; display:grid; place-items:center; color:#fff; border-radius:10px; background:#143c44; }
.offer-system-lines small { color:#6f8388; }
.offer-system-lines strong { color:#183b42; line-height:1.2; }
.offer-system-grid footer { display:flex; gap:10px; align-items:center; justify-content:space-between; }
.offer-system-grid footer button,.offer-system-grid footer a { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:0 16px; border-radius:12px; font-weight:900; text-decoration:none; }
.offer-system-grid footer button { border:0; color:#fff; background:#0b7479; cursor:pointer; }
.offer-system-grid footer a { color:#0d6269; border:1px solid #cfe1df; background:#fff; }

@media (max-width:760px) {
  .product-estimator-panel { padding-bottom:86px; }
  .offer-system-section { margin:16px -2px; padding:16px; border-radius:14px; }
  .offer-system-section header { display:grid; gap:12px; }
  .offer-system-section header > strong { width:52px; min-height:52px; }
  .offer-system-grid { grid-template-columns:1fr; }
  .offer-system-grid article { padding:15px; border-radius:14px; }
  .offer-system-metrics { grid-template-columns:1fr; }
  .offer-system-grid footer { position:sticky; bottom:74px; z-index:5; padding-top:8px; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 35%); }
  .offer-system-grid footer button,.offer-system-grid footer a { flex:1; min-height:52px; padding-inline:12px; }
  .offer-system-grid footer a { font-size:14px !important; }
  .estimate-page .estimate-tools { display:grid; grid-template-columns:1fr; }
  .estimate-page .estimate-table-head { display:none; }
  .estimate-page .estimate-rows a { grid-template-columns:1fr; gap:10px; padding:16px; }
  .estimate-page .estimate-rows a > span::before { content:attr(data-label) ": "; color:#687f86; font-weight:800; }
}

.portal-mobile-nav {
  display: none;
}

@media (max-width: 760px) {
  .construction-portal::after,
  .interior-pro-page::after {
    content: none !important;
    display: none !important;
  }
  .construction-portal {
    padding-bottom: calc(86px + env(safe-area-inset-bottom)) !important;
  }
  .portal-mobile-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 300;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    min-height: 62px;
    padding: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 22px;
    background: rgba(5, 18, 22, .94);
    box-shadow: 0 20px 44px rgba(0,0,0,.30);
    backdrop-filter: blur(18px);
  }
  .portal-mobile-nav :is(a, button) {
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 50px;
    border: 0;
    border-radius: 17px;
    color: rgba(255,255,255,.74);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 950;
    text-decoration: none;
  }
  .portal-mobile-nav :is(a, button).active,
  .portal-mobile-nav :is(a, button):hover,
  .portal-mobile-nav :is(a, button):focus-visible {
    color: #062126;
    background: #c8fbef;
    outline: none;
  }
  .portal-mobile-nav span {
    overflow: hidden;
    max-width: 100%;
    font-size: 10px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* ============================================================
   COMMERCIAL KRS HERO — PRAWNIKOM PRO
   FINAL PREMIUM OVERRIDE
   ============================================================ */

.commercial-krs-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(360px, .62fr);
    grid-template-areas:
        "eyebrow stats"
        "title   stats"
        "meta    stats"
        "krs     stats";

    column-gap: clamp(32px, 4vw, 64px);
    align-items: center;

    min-height: 310px;

    padding: clamp(30px, 3.5vw, 52px);

    color: #fff;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(197,140,37,.24),
            transparent 23rem
        ),
        radial-gradient(
            circle at 8% 100%,
            rgba(22,109,164,.18),
            transparent 26rem
        ),
        linear-gradient(
            135deg,
            #04182f 0%,
            #082a4d 58%,
            #0a345b 100%
        );

    box-shadow:
        0 28px 70px rgba(4,26,53,.20);

    font-family: var(--sans);
}


/* subtelna faktura */

.commercial-krs-hero::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -2;

    pointer-events: none;

    background:
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        );

    background-size: 38px 38px;

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55),
            transparent 78%
        );
}


/* świetlna plama */

.commercial-krs-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 430px;
    height: 430px;

    right: -170px;
    top: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(240,203,122,.14),
            rgba(240,203,122,0) 67%
        );

    pointer-events: none;
}


/* ============================================================
   EYEBROW
   ============================================================ */

.commercial-krs-hero > small:first-child {
    grid-area: eyebrow;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: max-content;

    margin: 0 0 13px;

    color: #efcb7a;

    font-size: 11px;
    line-height: 1;
    font-weight: 800;

    letter-spacing: .15em;
    text-transform: uppercase;
}


.commercial-krs-hero > small:first-child::before {
    content: "";

    width: 24px;
    height: 1px;

    background: #d5a64a;
}


/* ============================================================
   TITLE
   ============================================================ */

.commercial-krs-hero > h1 {
    grid-area: title;

    max-width: 950px;

    margin: 0;

    color: #fff;

    font-family: var(--serif) !important;

    font-size:
        clamp(30px, 3.1vw, 48px);

    line-height: 1.04;

    font-weight: 600;

    letter-spacing: -.028em;

    text-wrap: balance;

    overflow-wrap: anywhere;
}


/* ============================================================
   META
   ============================================================ */

.commercial-krs-hero > p {
    grid-area: meta;

    max-width: 700px;

    margin: 15px 0 0;

    color: #adbecd;

    font-size: 13px;
    line-height: 1.55;

    font-weight: 500;
}


/* ============================================================
   KRS PILL
   ============================================================ */

.commercial-krs-hero .krs-pill {
    grid-area: krs;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    width: max-content;

    margin-top: 23px;

    padding: 9px 13px;

    color: #f8e1a7;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid rgba(240,203,122,.28);

    border-radius: 9px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.04);

    font-family: var(--mono) !important;

    font-size: 12px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: .025em;

    font-variant-numeric: tabular-nums;
}


.commercial-krs-hero .krs-pill::before {
    content: "▤";

    display: grid;
    place-items: center;

    width: 21px;
    height: 21px;

    border-radius: 6px;

    color: #f0cb7a;

    background:
        rgba(240,203,122,.1);

    font-family: var(--sans);
    font-size: 11px;
}


/* ============================================================
   RIGHT STATUS PANEL
   ============================================================ */

.commercial-krs-hero-grid {
    grid-area: stats;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0,1fr));

    align-self: stretch;

    overflow: hidden;

    min-width: 0;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.045)
        );

    box-shadow:
        inset 0 1px rgba(255,255,255,.045),
        0 18px 40px rgba(0,0,0,.08);

    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}


/* pojedyncza komórka */

.commercial-krs-hero-grid > article {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    min-height: 86px;

    padding: 17px 18px;

    border-right:
        1px solid rgba(255,255,255,.09);

    border-bottom:
        1px solid rgba(255,255,255,.09);

    background: transparent;
}


/* prawa kolumna */

.commercial-krs-hero-grid > article:nth-child(2n) {
    border-right: 0;
}


/* źródło — pełna szerokość */

.commercial-krs-hero-grid > article:last-child {
    grid-column: 1 / -1;

    min-height: 77px;

    border-right: 0;
    border-bottom: 0;

    background:
        rgba(0,0,0,.055);
}


/* ============================================================
   STATUS LABELS
   ============================================================ */

.commercial-krs-hero-grid article > small {
    display: block;

    margin: 0 0 7px;

    color: #91a9bb;

    font-size: 9px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: .12em;
    text-transform: uppercase;
}


.commercial-krs-hero-grid article > b {
    display: block;

    min-width: 0;

    color: #f4f7fa;

    font-size: 13px;
    line-height: 1.35;

    font-weight: 700;

    overflow-wrap: anywhere;
}


/* aktywny */

.commercial-krs-hero-grid article > b.positive {
    color: #6fddb1;
}


/* kolor kropki nie musi być częścią tekstu */

.commercial-krs-hero-grid article:first-child::after {
    content: "";

    position: absolute;

    right: 16px;
    top: 18px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #55d6a2;

    box-shadow:
        0 0 0 4px rgba(85,214,162,.1);
}


/* ============================================================
   Gdy nazwa zawiera "W UPADŁOŚCI"
   można dodać klasę JS/PHP .is-insolvency do hero
   ============================================================ */

.commercial-krs-hero.is-insolvency {
    background:
        radial-gradient(
            circle at 88% 10%,
            rgba(197,140,37,.24),
            transparent 23rem
        ),
        radial-gradient(
            circle at 5% 110%,
            rgba(151,49,49,.16),
            transparent 24rem
        ),
        linear-gradient(
            135deg,
            #04182f,
            #082a4d 62%,
            #0b304f
        );
}


.commercial-krs-hero.is-insolvency > h1::after {
    content: "W UPADŁOŚCI";

    display: inline-flex;

    margin-left: 10px;
    padding: 6px 8px;

    vertical-align: middle;

    border:
        1px solid rgba(241,183,99,.28);

    border-radius: 7px;

    color: #f0c978;

    background:
        rgba(197,140,37,.09);

    font-family: var(--sans);

    font-size: 9px;

    line-height: 1;

    font-weight: 850;

    letter-spacing: .09em;
}


/* ============================================================
   HOVER — delikatny
   ============================================================ */

.commercial-krs-hero-grid > article {
    transition:
        background .18s ease;
}


.commercial-krs-hero-grid > article:hover {
    background:
        rgba(255,255,255,.045);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1100px) {

    .commercial-krs-hero {
        grid-template-columns:
            minmax(0,1fr)
            minmax(320px,.72fr);

        column-gap: 28px;

        padding: 32px;
    }


    .commercial-krs-hero > h1 {
        font-size:
            clamp(29px,3.6vw,39px);
    }


    .commercial-krs-hero-grid > article {
        min-height: 80px;

        padding: 14px 15px;
    }
}


/* ============================================================
   MOBILE / SMALL TABLET
   ============================================================ */

@media (max-width: 820px) {

    .commercial-krs-hero {
        display: block;

        min-height: 0;

        padding: 25px 21px;

        border-radius: 19px;
    }


    .commercial-krs-hero > h1 {
        max-width: none;

        font-size:
            clamp(27px,7.5vw,36px);

        line-height: 1.07;
    }


    .commercial-krs-hero > p {
        margin-top: 12px;

        font-size: 12px;
    }


    .commercial-krs-hero .krs-pill {
        margin-top: 17px;
    }


    .commercial-krs-hero-grid {
        margin-top: 24px;
    }
}


/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 560px) {

    .commercial-krs-hero {
        padding: 21px 17px;

        border-radius: 16px;

        box-shadow:
            0 15px 36px rgba(4,26,53,.16);
    }


    .commercial-krs-hero > small:first-child {
        margin-bottom: 10px;

        font-size: 9px;
    }


    .commercial-krs-hero > h1 {
        font-size:
            clamp(24px,7.8vw,30px);

        line-height: 1.09;
    }


    .commercial-krs-hero > p {
        margin-top: 10px;
    }


    .commercial-krs-hero .krs-pill {
        margin-top: 15px;

        padding: 8px 10px;

        font-size: 11px;
    }


    .commercial-krs-hero-grid {
        grid-template-columns:
            1fr 1fr;

        margin-top: 19px;

        border-radius: 13px;
    }


    .commercial-krs-hero-grid > article {
        min-height: 72px;

        padding: 12px;
    }


    .commercial-krs-hero-grid article > small {
        margin-bottom: 5px;

        font-size: 8px;
    }


    .commercial-krs-hero-grid article > b {
        font-size: 11px;
    }


    .commercial-krs-hero-grid > article:last-child {
        min-height: 65px;
    }
}


/* ============================================================
   VERY SMALL
   ============================================================ */

@media (max-width: 390px) {

    .commercial-krs-hero-grid {
        grid-template-columns: 1fr;
    }


    .commercial-krs-hero-grid > article {
        border-right: 0;
    }


    .commercial-krs-hero-grid > article:last-child {
        grid-column: auto;
    }
}


/* ===== home-v4/style.css ===== */
:root{--navy:#10283b;--orange:#ff680d;--teal:#008b77;--line:#e6edf1;--muted:#627786}*{box-sizing:border-box}body{margin:0;color:var(--navy);font:13px/1.42 system-ui,-apple-system,'Segoe UI',Arial,sans-serif;background:#fff}a{color:inherit;text-decoration:none}button,input{font:inherit}.utility{height:29px;background:#f5f8fa;display:flex;align-items:center;gap:26px;padding:0 max(28px,calc((100vw - 1520px)/2));font-size:10px;font-weight:600;white-space:nowrap}.utility-right{margin-left:auto}.main-header{height:79px;display:flex;align-items:center;gap:36px;padding:0 max(28px,calc((100vw - 1520px)/2));border-bottom:1px solid var(--line)}.brand{font-size:28px;font-weight:950;letter-spacing:-1.5px;white-space:nowrap}.brand>span:last-child,.footer-brand span{color:var(--orange)}.brand-house{font-size:38px;color:var(--navy);vertical-align:middle}.search{display:flex;flex:1;max-width:730px;height:38px;border-radius:6px;background:#f3f7f9;overflow:hidden}.search input{flex:1;border:0;min-width:0;background:transparent;padding:0 15px;outline:none;font-size:12px}.search button{border:0;background:var(--orange);color:white;width:43px;font-size:24px;cursor:pointer}.header-actions{margin-left:auto;display:flex;gap:24px}.header-actions a{display:flex;flex-direction:column;align-items:center;font-size:25px;line-height:1}.header-actions small{font-size:10px;font-weight:700;margin-top:5px}main{max-width:1550px;margin:auto;padding:12px 24px 0}.intro-grid{display:grid;grid-template-columns:225px minmax(0,1fr) 225px;gap:17px;align-items:start}.side{border:1px solid var(--line);border-radius:7px;overflow:hidden;box-shadow:0 2px 10px #10283b08}.side-title{background:var(--orange);color:white;padding:12px 15px;font-weight:800}.side nav a{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid #edf1f4;font-size:11px;min-height:32px}.side nav a:last-child{border:0}.side nav a:hover{background:#fff4eb}.side .menu-icon{color:var(--navy);width:18px;min-width:18px;display:flex;align-items:center;justify-content:center}.side .menu-icon svg{width:15px;height:15px;stroke-width:2}.side .menu-arrow{margin-left:auto;color:#a8bac4}.intro-center{min-width:0}.hero{min-height:284px;border-radius:8px;overflow:hidden;display:flex;align-items:center;background:linear-gradient(90deg,#112a3c 0%,#102b3ce8 34%,#102b3c00 78%),url('/home-v4/assets/hero.webp') center 46%/cover}.hero-copy{padding:22px 26px;color:white;max-width:650px}.eyebrow{color:#60dfc4;letter-spacing:1.5px;font-weight:800;font-size:11px}.hero h1{font-size:clamp(26px,2.5vw,39px);letter-spacing:-1.1px;line-height:1.09;margin:12px 0}.hero h1 em{color:var(--orange);font-style:normal}.hero p{font-size:13px;max-width:450px;color:#e6f1f4}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.btn{padding:11px 15px;border-radius:5px;font-size:11px;font-weight:800;display:inline-block}.orange{background:var(--orange);color:#fff}.white{background:#fff;color:var(--navy)}.teal{background:#008b76;color:#fff}.benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 13px}.benefits>div{display:flex;align-items:center;gap:9px}.benefits b{font-size:24px;color:var(--orange)}.benefits strong,.benefits small{display:block}.benefits strong{font-size:10px}.benefits small{font-size:9px;color:var(--muted)}.quick{display:flex;flex-direction:column;background:#f8fafb;border:1px solid var(--line);border-radius:7px;overflow:hidden}.quick a{display:flex;gap:11px;padding:19px 14px;border-bottom:1px solid var(--line);min-height:73px}.quick a:last-child{border:0}.quick b{font-size:25px}.quick strong,.quick small{display:block}.quick strong{font-size:11px}.quick small{font-size:10px;color:var(--muted)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 11px}.section-heading h2{font-size:19px;letter-spacing:-.6px;margin:0}.section-heading>a{font-size:11px;color:#f36a12}.category-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:9px}.category-card{display:block;min-width:0;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .2s,box-shadow .2s}.category-card:hover,.creator-card:hover,.guide-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px #122b3c15}.category-card img{width:100%;height:72px;object-fit:cover;display:block;background:#eaf0f3}.category-card strong{font-size:10px;display:block;padding:7px 5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.categories-section{margin:8px 0 0}.digital-house{display:grid;grid-template-columns:43% 57%;min-height:405px;overflow:hidden;border-radius:13px;margin:21px 0 16px;background:#eaf5f2}.digital-copy{padding:46px 20px 34px 42px;z-index:1}.digital-eyebrow{color:#008b78;letter-spacing:1.2px;font-weight:800;font-size:12px}.digital-copy h2{font:normal clamp(34px,3.7vw,58px)/1.04 Georgia,'Times New Roman',serif;letter-spacing:-1.8px;margin:18px 0}.digital-copy h2 i{color:#008b78;font-style:normal}.digital-copy p{font-size:13px;line-height:1.8;color:#476475;max-width:440px}.house-visual{position:relative;min-height:405px;background:linear-gradient(90deg,#eaf5f2 0%,#eaf5f200 20%),url('/home-v4/assets/dom-przekroj.png') 63% center/cover no-repeat}.pin{position:absolute;display:flex;gap:7px;align-items:center;background:#0b2e3bdf;color:#fff;padding:9px 11px;border-radius:6px;box-shadow:0 5px 12px #0002}.pin b{background:#008e79;border-radius:50%;font-size:11px;padding:7px}.pin span{font-weight:800;font-size:12px}.pin small{display:block;font-weight:400;font-size:10px}.pin-roof{top:9%;left:19%}.pin-wall{top:34%;right:2%}.pin-heat{top:65%;right:4%}.pin-found{bottom:7%;left:29%}.live{position:absolute;bottom:10px;left:10px;background:#0b2e3bdc;color:#fff;border-radius:15px;padding:6px 11px;font-size:10px}.section{margin:17px 8px 21px}.creators,.guides{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:11px}.creator-card,.guide-card{border:1px solid var(--line);border-radius:7px;overflow:hidden;min-width:0;background:white;transition:.2s}.creator-card img{display:block;width:100%;height:92px;object-fit:cover}.creator-info{padding:10px}.creator-info b{font-size:13px}.creator-info small{display:block;color:var(--muted);font-size:10px}.creator-info .creator-icon{color:var(--orange);font-size:17px;margin-right:6px}.tabs{display:flex;gap:6px;margin:-3px 0 10px}.tabs button,.tabs a{padding:7px 12px;border:0;border-radius:5px;background:#eef3f5;color:#526b79;font-size:11px}.tabs button.active{background:var(--orange);color:white}.products{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.product-card{border:1px solid var(--line);border-radius:7px;padding:11px;display:flex;flex-direction:column;gap:6px;min-height:185px}.product-card img{height:95px;width:100%;object-fit:contain}.product-card strong{font-size:11px;line-height:1.35}.product-card small{color:#8a9ca8;font-size:10px}.product-card .price{font-size:13px;font-weight:800;margin-top:auto}.product-card .product-link{font-size:10px;color:var(--orange)}.loading{color:var(--muted)}.guide-card img{display:block;width:100%;height:89px;object-fit:cover}.guide-card strong{display:block;font-size:11px;line-height:1.35;padding:10px 10px 4px}.guide-card small{display:block;color:var(--muted);font-size:10px;padding:0 10px 11px}.brand-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}.brand-grid span{border:1px solid var(--line);border-radius:6px;padding:12px 5px;text-align:center;font-weight:900;color:#164b83;font-size:13px}.brand-grid span:nth-child(2),.brand-grid span:nth-child(6){color:#d82125}.brand-grid span:nth-child(4),.brand-grid span:nth-child(9){color:#333}.note{font-size:10px;color:var(--muted)}.bottom-benefits{display:grid;grid-template-columns:repeat(4,1fr);background:#f2f7f9;gap:16px;padding:21px 28px;margin-top:22px}.bottom-benefits>div{display:flex;align-items:center;gap:11px;font-size:22px}.bottom-benefits span b,.bottom-benefits span small{display:block}.bottom-benefits span b{font-size:11px}.bottom-benefits span small{font-size:10px;color:var(--muted)}footer{background:#10283b;color:white}.footer-inner{max-width:1550px;margin:auto;padding:33px 34px;display:grid;grid-template-columns:2fr repeat(4,1fr);gap:25px}.footer-brand{font-size:25px;font-weight:900}.footer-inner p{color:#bed0da}.footer-inner b,.footer-inner a{display:block;margin-bottom:9px;font-size:11px}.footer-inner a{color:#c1d0d8}
@media(max-width:1250px){.intro-grid{grid-template-columns:190px minmax(0,1fr)}.quick{display:none}.category-grid{grid-template-columns:repeat(6,1fr)}.creators,.guides,.products{grid-template-columns:repeat(3,1fr)}.brand-grid{grid-template-columns:repeat(5,1fr)}.utility{gap:12px}.utility-right{display:none}}
@media(max-width:760px){.utility{display:none}.main-header{height:auto;flex-wrap:wrap;gap:12px;padding:12px 16px}.brand{font-size:23px}.brand-house{font-size:27px}.header-actions{gap:12px}.header-actions a{font-size:18px}.header-actions small{font-size:9px}.search{order:3;flex-basis:100%;max-width:none}main{padding:12px}.intro-grid{display:flex;flex-direction:column}.side{width:100%}.side nav{display:grid;grid-template-columns:repeat(2,1fr);max-height:145px;overflow:auto}.intro-center{width:100%}.hero{min-height:260px}.hero-copy{padding:20px}.hero h1{font-size:29px}.benefits{grid-template-columns:repeat(2,1fr)}.category-grid{grid-template-columns:repeat(3,1fr)}.digital-house{grid-template-columns:1fr}.digital-copy{padding:30px 20px}.digital-copy h2{font-size:39px}.house-visual{min-height:310px}.creators,.guides,.products{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-benefits{grid-template-columns:repeat(2,1fr)}.footer-inner{grid-template-columns:repeat(2,1fr);padding:25px 18px}.brand-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.category-grid{grid-template-columns:repeat(2,1fr)}.section-heading h2{font-size:17px}.section-heading>a{font-size:10px}.pin{padding:6px}.pin span{font-size:10px}.pin small{font-size:8px}.pin b{padding:4px}.house-visual{min-height:265px}}

/* ==========================================
   INFOBUDO V4.2 — PEŁNA SZEROKOŚĆ KATEGORII
   ========================================== */

.categories-section {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.categories-section .section-heading {
    width: 100%;
}

/* Kafelki wypełniają całą szerokość */
#categories-grid {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    align-items: stretch;
}

#categories-grid .category-card {
    width: 100% !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2eaf0;
    transition: transform .2s, box-shadow .2s;
}

#categories-grid .category-card img {
    display: block;
    width: 100%;
    height: 125px;
    object-fit: cover;
    transition: transform .3s;
}

#categories-grid .category-card strong {
    display: block;
    padding: 12px 6px;
    font-size: 12px;
    font-weight: 750;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
}

#categories-grid .category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(10, 35, 55, .12);
}

#categories-grid .category-card:hover img {
    transform: scale(1.04);
}

/* Responsywność */
@media (max-width: 1400px) {
    #categories-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 900px) {
    #categories-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    #categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #categories-grid .category-card img {
        height: 115px;
    }
}


/* INFOBUDO V4 — KATEGORIE POZA INTRO-GRID */

.categories-section {
    width: 100%;
    max-width: none;
    margin: 22px 0 28px;
}

.categories-section #categories-grid {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100%;
}

.categories-section .category-card {
    min-width: 0;
    width: 100%;
}

.categories-section .category-card img {
    width: 100%;
    height: 145px;
    object-fit: cover;
}

@media (max-width: 1200px) {
    .categories-section #categories-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 800px) {
    .categories-section #categories-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 500px) {
    .categories-section #categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .categories-section .category-card img {
        height: 115px;
    }
}

/* INFOBUDO V4.3 — KATEGORIE POD BANNEREM,
   OBOK LEWEGO MENU, BEZ PUSTEJ PRZESTRZENI */

@media (min-width: 1251px) {

  /* Wspólna siatka dla intro i kategorii */
  .intro-grid {
    display: grid;
    grid-template-columns: 225px minmax(0, 1fr) 225px;
    gap: 20px;
    align-items: start;
  }

  /* Sekcja kategorii pozostaje w środkowej kolumnie */
  .intro-center {
    min-width: 0;
  }

  /* Menu nie rozciąga środkowej kolumny */
  .side {
    align-self: start;
  }

  /* Karty kategorii wypełniają całą dostępną szerokość */
  .categories-section #categories-grid {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .categories-section .category-card img {
    height: 95px;
  }
}




/* ===== home-v4/grid-final.css ===== */
/* INFOBUDO — naprawa głównej siatki */

@media (min-width: 1251px) {
  body main > section.intro-grid {
    display: grid !important;
    grid-template-areas:
      "sidebar hero quick"
      "sidebar categories categories" !important;
    grid-template-columns:
      280px minmax(0, 1fr) 280px !important;
    grid-template-rows: auto auto !important;
    column-gap: 20px !important;
    row-gap: 20px !important;
    align-items: start !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body main > section.intro-grid > aside.side {
    grid-area: sidebar !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body main > section.intro-grid > div.intro-center {
    grid-area: hero !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body main > section.intro-grid > aside.quick {
    grid-area: quick !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body main > section.intro-grid > section.categories-section {
    grid-area: categories !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    transform: none !important;
    justify-self: stretch !important;
  }

  body main > section.intro-grid > section.categories-section
  > .section-heading {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
    width: 100% !important;
  }

  body main > section.intro-grid > section.categories-section
  > #categories-grid {
    display: grid !important;
    grid-template-columns:
      repeat(9, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  body main > section.intro-grid > section.categories-section
  > #categories-grid > .category-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body main > section.intro-grid > section.categories-section
  > #categories-grid > .category-card img {
    display: block !important;
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
  }

  body main > section.intro-grid > section.categories-section
  > #categories-grid > .category-card strong {
    display: block !important;
    width: 100% !important;
    padding: 10px 4px !important;
    font-size: 12px !important;
    text-align: center !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
  }
}

@media (min-width: 701px) and (max-width: 1250px) {
  body main > section.intro-grid {
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr) !important;
    gap: 18px !important;
    height: auto !important;
  }

  body main > section.intro-grid > .side {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }

  body main > section.intro-grid > .intro-center {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  body main > section.intro-grid > .quick {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  body main > section.intro-grid > .categories-section {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body main > section.intro-grid > .categories-section
  > #categories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

@media (max-width: 700px) {
  body main > section.intro-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    height: auto !important;
  }

  body main > section.intro-grid > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  body main > section.intro-grid > .categories-section
  > #categories-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}