:root {
    --site-font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
    --site-font-heading: "Outfit", "Plus Jakarta Sans", sans-serif;
    --bg-main: #F7F7FA;
    --text-primary: #2D3748;
    --accent-primary: #3f2be8;
    --accent-primary-strong: #2d1cc9;
    --border-neutral: #E2E8F0;
    --bg-editor: #1A202C;
    --site-ink-strong: #19356c;
    --site-ink: #2f4c7e;
    --site-ink-soft: #62779f;
    --site-line: rgba(183, 205, 240, 0.72);
    --site-line-strong: rgba(122, 156, 215, 0.34);
    --site-surface: rgba(255, 255, 255, 0.74);
    --site-surface-strong: rgba(255, 255, 255, 0.88);
    --site-surface-muted: rgba(245, 249, 255, 0.92);
    --site-blue: #245db3;
    --site-blue-strong: #1a4c98;
    --site-blue-soft: #eef5ff;
    --site-shadow: 0 26px 70px rgba(32, 70, 130, 0.10);
    --site-shadow-soft: 0 18px 40px rgba(32, 70, 130, 0.08);
}

.mermaid-export-choice {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1.15rem;
    border: 1px solid rgba(37, 99, 235, .28);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(239, 246, 255, .98), rgba(255, 255, 255, .98));
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.mermaid-export-choice__primary {
    display: grid;
    gap: .55rem;
}

.mermaid-export-choice__primary strong {
    color: #0f172a;
    font-size: 1.1rem;
}

.mermaid-export-choice__primary p {
    margin: 0;
    color: #475569;
}

.mermaid-export-choice__primary .btn {
    justify-self: start;
}

.mermaid-export-choice__recurring {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(148, 163, 184, .3);
}

.mermaid-export-choice__recurring > span {
    flex-basis: 100%;
    color: #475569;
    font-size: .9rem;
}

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

.mermaid-proof-example__source,
.mermaid-proof-example__result {
    display: grid;
    gap: .8rem;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 1rem;
    background: #fff;
}

.mermaid-proof-example pre {
    min-height: 9rem;
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    border-radius: .75rem;
    color: #dbeafe;
    background: #0f172a;
}

.mermaid-proof-example__result img {
    width: 100%;
    height: 12rem;
    object-fit: cover;
    border-radius: .75rem;
}

.mermaid-proof-example__result p {
    margin: .35rem 0 0;
    color: #475569;
}

@media (max-width: 767.98px) {
    .mermaid-proof-example {
        grid-template-columns: 1fr;
    }
}

/* CreationWare Labs product identities · 2026 */
.labs-portfolio {
    --labs-ink: #0b1220;
    --labs-muted: #536078;
    width: min(1240px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3.5rem) 0 4rem;
    color: var(--labs-ink);
}

.labs-portfolio-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.7fr);
    align-items: center;
    min-height: 480px;
    overflow: hidden;
    padding: clamp(2rem, 6vw, 5rem);
    border-radius: 36px;
    color: #fff;
    background:
        radial-gradient(circle at 76% 30%, rgba(115, 86, 255, 0.34), transparent 30%),
        radial-gradient(circle at 16% 90%, rgba(17, 190, 196, 0.2), transparent 34%),
        linear-gradient(135deg, #080d1a 0%, #111936 48%, #16114a 100%);
    box-shadow: 0 34px 80px rgba(20, 28, 58, 0.24);
}

.labs-portfolio-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.28;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent, #000);
}

.labs-portfolio-hero__copy { max-width: 720px; }
.labs-kicker { display: inline-flex; align-items: center; gap: .5rem; color: #7867ff; font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.labs-portfolio-hero .labs-kicker { color: #a9dcff; }
.labs-portfolio-hero h1 { margin: 1rem 0 1.15rem; color: #fff !important; font-size: clamp(3rem, 7vw, 6.4rem); line-height: .92; font-weight: 900; letter-spacing: -.055em; }
.labs-portfolio-hero h1 span { color: #a9a2ff; }
.labs-portfolio-hero p { max-width: 650px; margin: 0; color: #c8d2e6; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.7; }
.labs-portfolio-hero__signals { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.labs-portfolio-hero__signals span { padding: .48rem .78rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #e7ecf8; background: rgba(255,255,255,.07); font-size: .82rem; font-weight: 750; backdrop-filter: blur(12px); }

.labs-orbit { position: relative; width: min(380px, 34vw); aspect-ratio: 1; justify-self: end; }
.labs-orbit__ring { position: absolute; border: 1px solid rgba(180,192,255,.28); border-radius: 50%; animation: labsOrbitSpin 18s linear infinite; }
.labs-orbit__ring--one { inset: 8%; }
.labs-orbit__ring--two { inset: 24%; animation-direction: reverse; animation-duration: 12s; }
.labs-orbit__core { position: absolute; inset: 38%; display: grid; place-items: center; border-radius: 28%; color: #fff; background: linear-gradient(145deg, #735dff, #2dd4bf); box-shadow: 0 0 60px rgba(114,92,255,.6); font-size: 2.1rem; transform: rotate(12deg); }
.labs-orbit__core i { transform: rotate(-12deg); }
.labs-orbit__node { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.18); border-radius: 20px; color: #fff; background: rgba(255,255,255,.09); box-shadow: 0 18px 44px rgba(0,0,0,.22); backdrop-filter: blur(14px); font-size: 1.4rem; }
.labs-orbit__node--forms { top: 6%; right: 12%; }
.labs-orbit__node--music { bottom: 12%; right: 2%; }
.labs-orbit__node--diagram { top: 44%; left: 0; }
@keyframes labsOrbitSpin { to { transform: rotate(360deg); } }

.labs-product-section, .labs-experiments { padding-top: clamp(3.2rem, 7vw, 6rem); }
.labs-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.8rem; }
.labs-section-heading h2 { margin: .55rem 0 0; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.labs-section-heading > p { max-width: 480px; margin: 0; color: var(--labs-muted); line-height: 1.65; }
.labs-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.3rem; }
.labs-product-card { --product: #765bff; overflow: hidden; border: 1px solid #e5e9f1; border-radius: 26px; background: #fff; box-shadow: 0 18px 48px rgba(25,35,58,.09); transition: transform .25s ease, box-shadow .25s ease; }
.labs-product-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(25,35,58,.16); }
.labs-product-card--birthday { --product: #e5487c; --product-soft: #fff0f5; }
.labs-product-card--forms { --product: #2467ed; --product-soft: #eef5ff; }
.labs-product-card--mermaid { --product: #6d4cf5; --product-soft: #f2efff; }
.labs-product-card__visual { position: relative; display: block; height: 245px; overflow: hidden; background: #111827; }
.labs-product-card__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.labs-product-card:hover .labs-product-card__visual img { transform: scale(1.045); }
.labs-product-card__number, .labs-product-card__badge { position: absolute; top: 1rem; z-index: 1; color: #fff; background: rgba(11,18,32,.62); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(12px); }
.labs-product-card__number { left: 1rem; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; font-size: .75rem; font-weight: 900; }
.labs-product-card__badge { right: 1rem; padding: .45rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.labs-product-card__body { display: flex; flex-direction: column; gap: 1rem; min-height: 350px; padding: 1.35rem; }
.labs-product-card__brand { display: flex; align-items: center; gap: .8rem; }
.labs-product-card__mark { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 15px; color: var(--product); background: var(--product-soft); font-size: 1.2rem; }
.labs-product-card__brand span:not(.labs-product-card__mark) { color: var(--product); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.labs-product-card h3 { margin: .12rem 0 0; color: var(--labs-ink); font-size: 1.35rem; font-weight: 900; }
.labs-product-card__body > p { margin: 0; color: var(--labs-muted); line-height: 1.65; }
.labs-product-card__features { display: flex; flex-wrap: wrap; gap: .45rem; }
.labs-product-card__features span { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .58rem; border-radius: 999px; color: #46526a; background: #f5f7fa; font-size: .72rem; font-weight: 750; }
.labs-product-card__features i { color: var(--product); }
.labs-product-link { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 1rem; border-top: 1px solid #edf0f5; color: var(--product) !important; font-weight: 900; text-decoration: none; }
.labs-product-link i { transition: transform .2s ease; }
.labs-product-link:hover i { transform: translate(3px,-3px); }

.labs-experiment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.labs-experiment-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; min-height: 220px; padding: clamp(1.4rem,3vw,2rem); border-radius: 26px; color: #fff; box-shadow: 0 24px 54px rgba(25,35,58,.14); }
.labs-experiment-card--studio { background: linear-gradient(125deg, rgba(17,24,39,.88), rgba(67,36,112,.86)), url('/img/creative-studio-forest.webp') center/cover; }
.labs-experiment-card--nutri { background: linear-gradient(125deg, #064e3b, #0f766e); }
.labs-experiment-card__icon { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: rgba(255,255,255,.12); font-size: 1.6rem; }
.labs-experiment-card span { color: rgba(255,255,255,.7); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.labs-experiment-card h3 { margin: .25rem 0 .45rem; color: #fff; font-size: 1.35rem; font-weight: 900; }
.labs-experiment-card p { margin: 0; color: rgba(255,255,255,.82); line-height: 1.55; }
.labs-experiment-card .btn { white-space: nowrap; font-weight: 800; }

.product-back-link { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; color: inherit !important; opacity: .78; font-size: .78rem; font-weight: 850; text-decoration: none; }

/* Birthday Melody Albums identity */
.birthday-shell { max-width: 1240px; }
.birthday-hero { position: relative; isolation: isolate; display: grid; min-height: 500px; overflow: hidden; padding: 0; border: 0; border-radius: 30px; color: #fff; background: #3b1028; box-shadow: 0 30px 70px rgba(92,24,58,.24); }
.birthday-hero__art, .birthday-hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.birthday-hero__art { z-index: -2; object-fit: cover; }
.birthday-hero__veil { z-index: -1; background: linear-gradient(90deg, rgba(41,8,29,.97) 0%, rgba(66,14,42,.88) 43%, rgba(66,14,42,.15) 76%); }
.birthday-hero__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; width: min(58%, 680px); padding: clamp(2rem,6vw,5rem); }
.birthday-brand-pill, .forms-brand-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .48rem .72rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .76rem; font-weight: 850; backdrop-filter: blur(10px); }
.birthday-hero h1 { margin: 0; color: #fff; font-size: clamp(2.7rem,5.4vw,5.3rem); line-height: .95; font-weight: 900; letter-spacing: -.055em; }
.birthday-hero p { max-width: 610px; color: rgba(255,255,255,.82); font-size: clamp(1rem,1.6vw,1.2rem); line-height: 1.65; }
.birthday-hero__status { display: flex; flex-wrap: wrap; gap: .55rem; }
.birthday-hero__status span { padding: .45rem .65rem; border-radius: 999px; color: #fff; background: rgba(255,255,255,.1); font-size: .78rem; backdrop-filter: blur(10px); }
.birthday-journey { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .9rem; margin: 1.2rem 0; padding: 1.1rem 1.3rem; border: 1px solid #f1d8e2; border-radius: 22px; background: #fffafc; }
.birthday-journey > div { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; }
.birthday-journey div > span { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; color: #fff; background: linear-gradient(135deg,#e5487c,#8b3fd1); font-weight: 900; }
.birthday-journey strong { color: #321326; }
.birthday-journey small { color: #846476; }
.birthday-journey > i { color: #d7a7bd; }
.birthday-order-panel, .birthday-history-panel { border-radius: 22px; }
.birthday-package-card { border-radius: 18px; border-color: #f3d8e3; background: linear-gradient(180deg,#fff,#fff7fb); }
.birthday-package-card.is-selected, .birthday-package-card:hover { border-color: #e5487c; box-shadow: 0 16px 32px rgba(229,72,124,.14); }
.birthday-package-card em { color: #c52f68; }
.birthday-optional { margin-left: .35rem; color: #9c7a8b; font-size: .74rem; font-weight: 500; }
.birthday-upload-note { display: flex; gap: .55rem; margin-top: .5rem; padding: .7rem; border-radius: 12px; color: #78546a; background: #fff4f8; font-size: .82rem; line-height: 1.5; }
.birthday-upload-note i { color: #e5487c; font-size: 1.1rem; }

/* Claude Forms identity */
.cv-record-shell--forms-tool { max-width: 1240px; }
.forms-product-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, .95fr) minmax(400px, 1.05fr); min-height: 480px; overflow: hidden; padding: 0; border: 0; border-radius: 30px; color: #fff; background: #123d92; box-shadow: 0 30px 70px rgba(32,81,165,.2); }
.forms-product-hero__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.forms-product-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7,39,107,.98) 0%, rgba(12,72,157,.91) 42%, rgba(12,72,157,.12) 73%); }
.forms-product-hero__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1rem; width: min(64%,700px); padding: clamp(2rem,6vw,5rem); }
.forms-product-hero h1 { margin: 0; color: #fff; font-size: clamp(2.8rem,5.6vw,5.4rem); line-height: .94; font-weight: 900; letter-spacing: -.055em; }
.forms-product-hero p { max-width: 600px; margin: 0; color: rgba(255,255,255,.84); font-size: clamp(1rem,1.6vw,1.18rem); line-height: 1.65; }
.forms-product-hero .btn { min-height: 50px; border-radius: 14px; font-weight: 850; }
.forms-workflow-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin: 1.2rem 0; }
.forms-workflow-strip > span { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .55rem; padding: .9rem 1rem; border: 1px solid #d9e5f8; border-radius: 16px; color: #60708a; background: #f8fbff; font-size: .8rem; }
.forms-workflow-strip i { color: #2467ed; font-size: 1.15rem; }
.forms-workflow-strip strong { color: #102b59; }
.forms-list-panel, .forms-editor-panel, .forms-responses-panel { border-radius: 20px; }
.forms-list-item { border-radius: 14px; }

/* Mermaid2Visio identity artwork */
.mermaid-product-hero__artwork { position: relative; display: block; overflow: hidden; min-height: 430px; border-radius: 26px; background: #030b23; box-shadow: 0 30px 70px rgba(3,11,35,.26); }
.mermaid-product-hero__artwork > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mermaid-artwork-badge, .mermaid-artwork-proof { position: absolute; z-index: 1; display: flex; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.15); color: #fff; background: rgba(4,13,39,.72); backdrop-filter: blur(14px); }
.mermaid-artwork-badge { left: 1rem; bottom: 1rem; padding: .72rem .9rem; border-radius: 16px; }
.mermaid-artwork-badge i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: linear-gradient(135deg,#395dff,#8d52ff); }
.mermaid-artwork-badge span { display: grid; color: #aab9d8; font-size: .72rem; }
.mermaid-artwork-badge strong { color: #fff; font-size: .88rem; }
.mermaid-artwork-proof { right: 1rem; top: 1rem; padding: .52rem .68rem; border-radius: 999px; color: #c9d7f2; font-size: .7rem; font-weight: 750; }
.mermaid-artwork-proof i { color: #61e6bd; }

@media (max-width: 1050px) {
    .labs-product-grid { grid-template-columns: 1fr 1fr; }
    .labs-product-card--mermaid { grid-column: 1 / -1; }
    .labs-product-card--mermaid .labs-product-card__visual { height: 320px; }
    .labs-experiment-card { grid-template-columns: auto 1fr; }
    .labs-experiment-card .btn { grid-column: 1 / -1; width: fit-content; }
}

@media (max-width: 767.98px) {
    .labs-portfolio { width: min(100% - 1rem, 1240px); padding-top: .5rem; }
    .labs-portfolio-hero { grid-template-columns: 1fr; min-height: 560px; padding: 2rem 1.35rem; border-radius: 24px; }
    .labs-orbit { width: 270px; justify-self: center; }
    .labs-section-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
    .labs-product-grid, .labs-experiment-grid { grid-template-columns: 1fr; }
    .labs-product-card--mermaid { grid-column: auto; }
    .labs-product-card--mermaid .labs-product-card__visual { height: 245px; }
    .labs-experiment-card { grid-template-columns: 1fr; }
    .labs-experiment-card .btn { grid-column: auto; width: 100%; }
    .birthday-hero, .forms-product-hero { min-height: 590px; border-radius: 22px; }
    .birthday-hero__veil { background: linear-gradient(0deg,rgba(41,8,29,.98) 0%,rgba(55,11,35,.9) 58%,rgba(55,11,35,.18) 100%); }
    .forms-product-hero::after { background: linear-gradient(0deg,rgba(7,39,107,.98) 0%,rgba(10,60,139,.9) 58%,rgba(10,60,139,.12) 100%); }
    .birthday-hero__copy, .forms-product-hero__copy { align-self: end; width: 100%; padding: 1.5rem; }
    .birthday-journey, .forms-workflow-strip { grid-template-columns: 1fr; }
    .birthday-journey > i { display: none; }
    .mermaid-product-hero__artwork { min-height: 330px; }
    .mermaid-artwork-proof { display: none; }
}

/* Product identity cascade lock: keep the 2026 Labs presentation above legacy component rules. */
body .birthday-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 500px;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 30px;
    color: #fff;
    background: #3b1028;
    box-shadow: 0 30px 70px rgba(92,24,58,.24);
}

body .birthday-hero__status { display: flex; flex-wrap: wrap; gap: .55rem; }
body .birthday-hero__status span { color: #fff; }
body .birthday-package-card { border-radius: 18px; border-color: #f3d8e3; background: linear-gradient(180deg,#fff,#fff7fb); }
body .birthday-package-card.is-selected,
body .birthday-package-card:hover { border-color: #e5487c; box-shadow: 0 16px 32px rgba(229,72,124,.14); }
body .birthday-package-card em { color: #c52f68; }

body .forms-product-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0,.95fr) minmax(400px,1.05fr);
    justify-content: initial;
    align-items: stretch;
    min-height: 480px;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 30px;
    color: #fff;
    background: #123d92;
    box-shadow: 0 30px 70px rgba(32,81,165,.2);
}

body .mermaid-product-hero__proof.mermaid-product-hero__artwork {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 430px;
    border-radius: 26px;
    background: #030b23;
    box-shadow: 0 30px 70px rgba(3,11,35,.26);
}

@media (max-width: 767.98px) {
    body .birthday-hero,
    body .forms-product-hero { min-height: 590px; border-radius: 22px; }
    body .birthday-hero { display: grid; }
    body .forms-product-hero { display: grid; grid-template-columns: 1fr; }
    body .mermaid-product-hero__proof.mermaid-product-hero__artwork { min-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
    .labs-orbit__ring { animation: none; }
    .labs-product-card, .labs-product-card__visual img { transition: none; }
}

html,
body {
    min-height: 100%;
}

body {
    font-family: var(--site-font-body);
    color: var(--site-ink);
    background:
        radial-gradient(circle at top left, rgba(204, 221, 255, 0.95), transparent 36%),
        radial-gradient(circle at top right, rgba(223, 231, 255, 0.9), transparent 30%),
        radial-gradient(circle at 10% 92%, rgba(213, 229, 255, 0.85), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #f5f8fe 42%, #f8fbff 100%);
}

body,
.page {
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6,
.nav-brand-name,
.hero-title,
.page-title,
.home-title {
    font-family: var(--site-font-heading);
}

.page {
    min-height: 100vh;
    background: transparent;
    isolation: isolate;
}

.site-global-background {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background: #f8fbff url('/img/site-global/background-rectangular.webp') center center / cover no-repeat;
}

.site-global-background__video,
.site-global-background__fallback,
.site-global-background__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
}

.site-global-background__video {
    display: block;
    z-index: 1;
    object-fit: cover;
    opacity: 0.48;
}

.site-global-background__fallback {
    z-index: 0;
    background: url('/img/site-global/background-rectangular.webp') center center / cover no-repeat;
    opacity: 0.22;
}

.site-global-background__overlay {
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(248, 251, 255, 0.62), rgba(245, 249, 255, 0.58)),
        radial-gradient(circle at 12% 18%, rgba(181, 210, 255, 0.26), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(226, 232, 255, 0.34), transparent 24%);
}

.page::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 10% 20%, rgba(135, 174, 240, 0.16), transparent 32%),
        radial-gradient(circle at 90% 12%, rgba(220, 226, 255, 0.85), transparent 24%),
        radial-gradient(circle at 84% 82%, rgba(172, 208, 255, 0.14), transparent 24%);
    pointer-events: none;
    z-index: -1;
}

.page-header-shell,
.footer {
    position: relative;
}

.page-header-shell {
    z-index: 1200;
}

.page-main {
    position: relative;
    z-index: 1;
}

.footer {
    z-index: 1;
}

.page > main.page-main {
    margin-top: 0;
    padding: 4.15rem 0 1.8rem;
    display: flex;
}

.page > main.page-main.page-main--home {
    padding-bottom: 0.5rem;
}

.page-main {
    flex: 1;
}

.page-backdrop {
    opacity: 1;
    mix-blend-mode: normal;
    background: transparent !important;
}

.page-content {
    width: 100%;
    align-items: stretch;
}

.page-content-card {
    width: 100%;
    max-width: 1200px;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    border-radius: 15px;
    background: var(--site-surface);
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: var(--site-shadow);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
}

.page-content-card--inner {
    max-width: 1240px;
    padding: clamp(0.25rem, 0.65vw, 0.4rem);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow: 0 14px 34px rgba(30, 62, 114, 0.06);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.page-content-card--inner .inner-page {
    gap: 0.16rem;
}

.page-content-card--inner .inner-page__section.container,
.page-content-card--inner .inner-page__alerts.container,
.page-content-card--inner .container.py-5.inner-page__section {
    max-width: none;
    width: 100%;
    margin: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.page-content-card--inner .inner-page .hero-summary-wrapper,
.page-content-card--inner .inner-page .inner-page__body,
.page-content-card--inner .inner-page .info-wrap {
    width: 100%;
    max-width: none;
}

.page-content-card--inner .inner-page .hero-summary-wrapper {
    padding: clamp(0.15rem, 0.45vw, 0.28rem) clamp(0.35rem, 0.9vw, 0.55rem);
}

.page-content-card--inner .inner-page .hero-summary-wrapper .hero-bg {
    display: block;
    width: min(100%, 1020px);
    max-width: 100%;
    margin: -0.5rem auto -0.06rem;
    border-radius: 15px;
}

.page-content-card--inner .inner-page .inner-page__body,
.page-content-card--inner .inner-page .info-wrap {
    margin-top: -0.22rem;
    padding: clamp(0.18rem, 0.45vw, 0.32rem);
    background: rgba(255, 255, 255, 0.46);
    box-shadow: 0 6px 16px rgba(35, 69, 123, 0.04);
}

.inner-page--courses .cv-record-grid,
.inner-page--certifications .cv-record-grid {
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inner-page--about .cv-record-title-card,
.inner-page--admin-blog .cv-record-title-card,
.inner-page--contact .cv-record-title-card,
.inner-page--courses .cv-record-title-card,
.inner-page--file-tools .cv-record-title-card,
.inner-page--labs .cv-record-title-card,
.inner-page--management .cv-record-title-card,
.inner-page--mermaid-tool .cv-record-title-card,
.inner-page--privacy .cv-record-title-card,
.inner-page--visitor-analytics .cv-record-title-card,
.inner-page--certifications .cv-record-title-card,
.inner-page--experience .cv-record-title-card,
.inner-page--blog .cv-record-title-card,
.inner-page--booking .cv-record-title-card,
.inner-page--skills .cv-record-title-card,
.inner-page--qualifications .cv-record-title-card,
.inner-page--summary .cv-record-title-card {
    position: relative;
    width: min(980px, 100%);
    margin: -1.05rem auto 0;
    padding: 0;
    overflow: hidden;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.inner-page--about .cv-record-title-card__bg,
.inner-page--admin-blog .cv-record-title-card__bg,
.inner-page--contact .cv-record-title-card__bg,
.inner-page--courses .cv-record-title-card__bg,
.inner-page--file-tools .cv-record-title-card__bg,
.inner-page--labs .cv-record-title-card__bg,
.inner-page--management .cv-record-title-card__bg,
.inner-page--mermaid-tool .cv-record-title-card__bg,
.inner-page--privacy .cv-record-title-card__bg,
.inner-page--visitor-analytics .cv-record-title-card__bg,
.inner-page--certifications .cv-record-title-card__bg,
.inner-page--experience .cv-record-title-card__bg,
.inner-page--blog .cv-record-title-card__bg,
.inner-page--booking .cv-record-title-card__bg,
.inner-page--skills .cv-record-title-card__bg,
.inner-page--qualifications .cv-record-title-card__bg,
.inner-page--summary .cv-record-title-card__bg {
    display: block;
    width: 100%;
    margin: 0;
    border-radius: 15px;
    opacity: 0.35;
}

.inner-page--about .cv-record-title-card .hero-title,
.inner-page--admin-blog .cv-record-title-card .hero-title,
.inner-page--contact .cv-record-title-card .hero-title,
.inner-page--courses .cv-record-title-card .hero-title,
.inner-page--file-tools .cv-record-title-card .hero-title,
.inner-page--labs .cv-record-title-card .hero-title,
.inner-page--management .cv-record-title-card .hero-title,
.inner-page--mermaid-tool .cv-record-title-card .hero-title,
.inner-page--privacy .cv-record-title-card .hero-title,
.inner-page--visitor-analytics .cv-record-title-card .hero-title,
.inner-page--certifications .cv-record-title-card .hero-title,
.inner-page--experience .cv-record-title-card .hero-title,
.inner-page--blog .cv-record-title-card .hero-title,
.inner-page--booking .cv-record-title-card .hero-title,
.inner-page--skills .cv-record-title-card .hero-title,
.inner-page--qualifications .cv-record-title-card .hero-title,
.inner-page--summary .cv-record-title-card .hero-title {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.inner-page--about .cv-record-shell,
.inner-page--admin-blog .cv-record-shell,
.inner-page--contact .cv-record-shell,
.inner-page--courses .cv-record-shell,
.inner-page--file-tools .cv-record-shell,
.inner-page--labs .cv-record-shell,
.inner-page--management .cv-record-shell,
.inner-page--mermaid-tool .cv-record-shell,
.inner-page--privacy .cv-record-shell,
.inner-page--visitor-analytics .cv-record-shell,
.inner-page--certifications .cv-record-shell,
.inner-page--experience .cv-record-shell,
.inner-page--blog .cv-record-shell,
.inner-page--booking .cv-record-shell,
.inner-page--skills .cv-record-shell,
.inner-page--qualifications .cv-record-shell,
.inner-page--summary .cv-record-shell {
    width: min(980px, 100%);
    margin: 0.48rem auto 0;
    padding: 1rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.64);
    box-shadow: 0 14px 30px rgba(36, 66, 116, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.inner-page--courses .cv-record-card,
.inner-page--certifications .cv-record-card {
    padding: 0.78rem;
    border-radius: 15px !important;
}

.inner-page--about .alert,
.inner-page--admin-blog .alert,
.inner-page--contact .alert,
.inner-page--courses .alert,
.inner-page--file-tools .alert,
.inner-page--labs .alert,
.inner-page--management .alert,
.inner-page--mermaid-tool .alert,
.inner-page--privacy .alert,
.inner-page--visitor-analytics .alert,
.inner-page--certifications .alert,
.inner-page--experience .alert,
.inner-page--blog .alert,
.inner-page--booking .alert,
.inner-page--skills .alert,
.inner-page--qualifications .alert,
.inner-page--summary .alert {
    width: min(980px, 100%);
    margin: 0 auto;
}

.inner-page--experience .cv-experience-card {
    padding: 1rem 1.05rem;
    border-radius: 15px !important;
}

.inner-page--experience .cv-experience-meta {
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.inner-page--experience .cv-meta-item {
    padding: 0.72rem 0.82rem;
}

.cv-card-grid {
    display: grid;
    gap: 0.8rem;
    align-items: start;
}

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

.cv-card-uniform {
    height: 100%;
    min-height: 10.5rem;
}

.cv-card-uniform .e-card-content {
    height: 100%;
}

.inner-page--skills .cv-skills-grid,
.inner-page--qualifications .cv-qualifications-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inner-page--qualifications .cv-qualification-card {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.95rem 1rem;
    border-radius: 15px !important;
}

.inner-page--summary .summary-stack {
    display: grid;
    gap: 0.8rem;
}

.inner-page--summary .summary-block {
    padding: 0.95rem 1rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: inset 0 0 0 1px rgba(203, 219, 245, 0.82);
}

.inner-page--courses .cv-record-card .e-card-header,
.inner-page--certifications .cv-record-card .e-card-header {
    padding: 0 0 0.55rem;
}

.inner-page--courses .cv-record-card .e-card-header-title,
.inner-page--certifications .cv-record-card .e-card-header-title {
    font-size: 0.98rem !important;
    line-height: 1.3;
}

.inner-page--courses .cv-record-card .e-card-sub-title,
.inner-page--certifications .cv-record-card .e-card-sub-title {
    font-size: 0.82rem !important;
}

.inner-page--courses .cv-record-meta,
.inner-page--certifications .cv-record-meta {
    gap: 0.42rem;
}

.inner-page--courses .cv-record-meta-item,
.inner-page--certifications .cv-record-meta-item {
    gap: 0.35rem;
    padding: 0.38rem 0.62rem;
    font-size: 0.8rem;
}

.inner-page--courses .cv-record-meta-item strong,
.inner-page--certifications .cv-record-meta-item strong {
    font-size: 0.72rem;
}

@media (max-width: 991.98px) {
    .inner-page--courses .cv-record-grid,
    .inner-page--certifications .cv-record-grid {
        grid-template-columns: 1fr;
    }

    .inner-page--about .cv-record-title-card,
    .inner-page--admin-blog .cv-record-title-card,
    .inner-page--contact .cv-record-title-card,
    .inner-page--courses .cv-record-title-card,
    .inner-page--file-tools .cv-record-title-card,
    .inner-page--labs .cv-record-title-card,
    .inner-page--management .cv-record-title-card,
    .inner-page--mermaid-tool .cv-record-title-card,
    .inner-page--privacy .cv-record-title-card,
    .inner-page--visitor-analytics .cv-record-title-card,
    .inner-page--certifications .cv-record-title-card,
    .inner-page--experience .cv-record-title-card,
    .inner-page--booking .cv-record-title-card,
    .inner-page--skills .cv-record-title-card,
    .inner-page--qualifications .cv-record-title-card,
    .inner-page--summary .cv-record-title-card {
        margin-top: -0.55rem;
    }

    .inner-page--about .cv-record-shell,
    .inner-page--admin-blog .cv-record-shell,
    .inner-page--contact .cv-record-shell,
    .inner-page--courses .cv-record-shell,
    .inner-page--file-tools .cv-record-shell,
    .inner-page--labs .cv-record-shell,
    .inner-page--management .cv-record-shell,
    .inner-page--mermaid-tool .cv-record-shell,
    .inner-page--privacy .cv-record-shell,
    .inner-page--visitor-analytics .cv-record-shell,
    .inner-page--certifications .cv-record-shell,
    .inner-page--experience .cv-record-shell,
    .inner-page--booking .cv-record-shell,
    .inner-page--skills .cv-record-shell,
    .inner-page--qualifications .cv-record-shell,
    .inner-page--summary .cv-record-shell {
        padding: 0.7rem;
    }

    .inner-page--skills .cv-skills-grid {
        grid-template-columns: 1fr;
    }

    .cv-card-grid--uniform,
    .inner-page--skills .cv-skills-grid,
    .inner-page--qualifications .cv-qualifications-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cv-card-grid--uniform,
    .inner-page--skills .cv-skills-grid,
    .inner-page--qualifications .cv-qualifications-grid {
        grid-template-columns: 1fr;
    }
}

.inner-page--forms-tool,
.inner-page--forms-public {
    color: #111827;
}

.cv-record-shell--forms-tool,
.forms-public-shell {
    max-width: 1180px;
    margin-inline: auto;
}

.forms-product-hero,
.forms-public-card {
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.forms-product-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    margin-bottom: 1rem;
}

.forms-muted {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.forms-hero-actions,
.tool-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.forms-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(220px, 0.75fr) minmax(0, 1.45fr);
    gap: 1rem;
}

.forms-responses-panel {
    grid-column: 1 / -1;
}

.forms-list,
.forms-field-stack,
.forms-public-fields,
.forms-option-stack {
    display: grid;
    gap: 0.8rem;
}

.forms-list-item {
    width: 100%;
    min-height: 72px;
    padding: 0.75rem;
    text-align: left;
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: #ffffff;
    color: #111827;
}

.forms-list-entry {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1px solid #d8dee8;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.forms-list-entry .forms-list-item {
    min-width: 0;
    border: 0;
    border-radius: 0;
}

.forms-list-delete {
    width: 2.75rem;
    border: 0;
    border-left: 1px solid #e2e8f0;
    background: #fff;
    color: #b42318;
}

.forms-list-delete:hover,
.forms-list-delete:focus-visible {
    background: #fff1f2;
    color: #991b1b;
}

.forms-list-item strong,
.forms-list-item span {
    display: block;
}

.forms-list-item span,
.forms-plan-meter span,
.forms-public-link span {
    color: #64748b;
    font-size: 0.9rem;
}

.forms-list-entry.is-active,
.forms-list-entry:hover {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.2);
}

.forms-plan-meter,
.forms-public-link,
.forms-response-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.9rem;
    border-radius: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.forms-public-link a {
    overflow-wrap: anywhere;
    font-weight: 700;
}

.forms-share-workspace {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(239, 246, 255, .86), rgba(255, 255, 255, .98));
}

.forms-share-tools {
    display: grid;
    grid-template-columns: minmax(240px, .7fr) minmax(280px, 1.3fr);
    gap: 1.25rem;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, .1);
}

.forms-share-qr {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.forms-share-qr img {
    width: 148px;
    height: 148px;
    padding: .45rem;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
}

.forms-share-qr span {
    display: block;
    margin-top: .3rem;
    color: #475569;
    font-size: .9rem;
}

@media (max-width: 767.98px) {
    .forms-share-tools {
        grid-template-columns: 1fr;
    }

    .forms-share-qr {
        align-items: flex-start;
    }
}

.forms-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    font-size: 0.82rem;
    font-weight: 700;
}

.forms-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 1.4rem 0 0.75rem;
}

.forms-section-title h3 {
    margin: 0;
    font-size: 1.05rem;
}

.forms-section-hint {
    margin: 0.2rem 0 0;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.forms-add-field-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 124px;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.forms-add-field-button:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.16);
}

.forms-builder-feedback {
    display: flex;
    align-items: center;
    min-height: 42px;
    margin: 0 0 0.8rem;
    padding: 0.58rem 0.72rem;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: linear-gradient(180deg, #eff6ff, #f8fafc);
    color: #1d4ed8;
    font-size: 0.92rem;
    font-weight: 700;
}

.forms-builder-feedback span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.forms-visual-editor {
    display: grid;
    grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.9rem;
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: #ffffff;
}

.forms-image-preview {
    overflow: hidden;
    min-height: 220px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.forms-image-preview img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}

.forms-image-preview__empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    color: #64748b;
    text-align: center;
}

.forms-image-preview__empty i {
    display: block;
    font-size: 2rem;
    color: #2563eb;
}

.forms-visual-controls {
    display: grid;
    gap: 0.8rem;
}

.forms-donation-editor {
    display: grid;
    gap: 0.9rem;
    padding: 0.9rem;
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: #ffffff;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.forms-donation-editor.is-enabled {
    border-color: #86efac;
    background: linear-gradient(180deg, #ffffff, #f0fdf4);
    box-shadow: 0 16px 30px rgba(22, 163, 74, 0.1);
}

.forms-donation-editor__intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.forms-donation-editor__intro .form-check-label {
    font-weight: 800;
    color: #111827;
}

.forms-donation-editor__intro > span {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.forms-location-editor {
    display: grid;
    gap: 0.9rem;
    padding: 0.9rem;
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: #ffffff;
    transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.forms-location-editor.is-enabled {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.1);
}

.forms-location-editor__intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.forms-location-editor__intro .form-check-label {
    font-weight: 800;
    color: #111827;
}

.forms-location-editor__intro > span {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.forms-field-editor,
.forms-public-field {
    padding: 0.9rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.forms-field-editor {
    position: relative;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.forms-field-editor:hover,
.forms-field-editor:focus-within {
    border-color: #bfdbfe;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.forms-field-editor.is-new-field {
    animation: formsNewFieldEntrance 520ms ease-out both, formsNewFieldGlow 2200ms ease-out 120ms both;
    border-color: #2563eb;
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.18);
}

.forms-address-field-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-height: 38px;
    padding: 0.7rem 0.8rem;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.88rem;
    line-height: 1.45;
}

.forms-address-field-note i {
    margin-top: 0.12rem;
    color: #2563eb;
}

.forms-display-only-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    padding: 0.45rem 0.65rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #475569;
    background: #f8fafc;
    font-size: 0.82rem;
    font-weight: 700;
}

.forms-field-editor__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.forms-field-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 800;
}

.forms-new-field-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.2rem 0.58rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
    font-size: 0.78rem;
    font-weight: 800;
}

.forms-check-row {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.forms-public-shell {
    padding-block: clamp(1rem, 4vw, 3rem);
}

.forms-public-card {
    max-width: 780px;
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2rem);
}

.forms-public-hero-image {
    position: relative;
    overflow: hidden;
    margin: 0 0 1.25rem;
    border-radius: 8px;
    background: #0f172a;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.16);
}

.forms-public-hero-image img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}

.forms-public-heading {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.forms-public-heading .tool-panel__title {
    margin: 0;
}

.forms-public-card--success {
    text-align: center;
}

.forms-public-card--success > i {
    color: #16a34a;
    font-size: 2.6rem;
}

.forms-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 42px;
    padding: 0.58rem 0.7rem;
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: #f8fafc;
}

.forms-submit-button {
    width: 100%;
    min-height: 48px;
    margin-top: 1rem;
}

.forms-address-preview {
    display: grid;
    gap: 0;
    margin-top: 0.8rem;
    overflow: hidden;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    box-shadow: 0 12px 24px rgba(37, 99, 235, 0.1);
    animation: formsLocationCardIn 320ms ease-out both;
}

.forms-address-preview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.68rem 0.8rem;
    color: #1e3a8a;
    font-size: 0.86rem;
    font-weight: 800;
}

.forms-address-preview__header a {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
}

.forms-address-preview__header a:hover,
.forms-address-preview__header a:focus-visible {
    text-decoration: underline;
}

.forms-address-preview iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
    background: #dbeafe;
}

.forms-address-preview__header address {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: inherit;
    font-style: normal;
    line-height: 1.45;
}

.forms-address-preview--builder {
    max-width: 760px;
}

.forms-map-unavailable {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    color: #64748b;
    background: #f8fafc;
}

.forms-location-card {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(260px, 1.15fr);
    gap: 1rem;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: linear-gradient(180deg, #ffffff, #eff6ff);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.1);
    animation: formsLocationCardIn 420ms ease-out both;
}

.forms-location-card__content {
    display: grid;
    align-content: center;
    gap: 0.55rem;
    padding: clamp(1rem, 2.6vw, 1.25rem);
}

.forms-location-card h2 {
    margin: 0;
    color: #1e3a8a;
    font-size: clamp(1.18rem, 3vw, 1.45rem);
    line-height: 1.15;
}

.forms-location-card address,
.forms-location-card p {
    margin: 0;
    color: #334155;
    line-height: 1.58;
}

.forms-location-card address {
    font-style: normal;
    font-weight: 800;
}

.forms-location-card__directions {
    width: fit-content;
    margin-top: 0.15rem;
}

.forms-location-card__map {
    min-height: 260px;
    background: #dbeafe;
}

.forms-location-card__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    border: 0;
}

.forms-donation-card {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.1rem;
    padding: clamp(1rem, 2.6vw, 1.25rem);
    border-radius: 8px;
    border: 1px solid #bbf7d0;
    background: linear-gradient(180deg, #f0fdf4, #ffffff);
    box-shadow: 0 18px 36px rgba(22, 101, 52, 0.1);
    animation: formsDonationCardIn 420ms ease-out both;
}

.forms-donation-card__header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.forms-donation-card__header img,
.forms-donation-card__icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 8px;
}

.forms-donation-card__header img {
    object-fit: cover;
    border: 1px solid rgba(22, 101, 52, 0.18);
}

.forms-donation-card__icon {
    display: inline-grid;
    place-items: center;
    color: #166534;
    background: #dcfce7;
    font-size: 1.45rem;
}

.forms-donation-card h2 {
    margin: 0.08rem 0 0;
    color: #14532d;
    font-size: clamp(1.18rem, 3vw, 1.45rem);
    line-height: 1.15;
}

.forms-donation-card strong {
    display: block;
    margin-top: 0.2rem;
    color: #166534;
}

.forms-donation-card p {
    margin: 0;
    color: #334155;
    line-height: 1.6;
}

.forms-donation-card__goal {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.36rem 0.65rem;
    border-radius: 999px;
    color: #14532d;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    font-weight: 800;
}

.forms-donation-card__button {
    width: fit-content;
    min-height: 46px;
    padding-inline: 1rem;
    background: linear-gradient(135deg, #16a34a, #2563eb);
    border: 0;
}

.forms-donation-card small {
    color: #64748b;
    line-height: 1.45;
}

.forms-response-table th,
.forms-response-table td {
    min-width: 140px;
}

.forms-live-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .7rem;
    border: 1px solid #bbf7d0;
    border-radius: 999px;
    color: #166534;
    background: #f0fdf4;
    font-size: .78rem;
    font-weight: 800;
}

.forms-response-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
    margin-bottom: 1rem;
}

.forms-response-kpi {
    position: relative;
    overflow: hidden;
    min-width: 0;
    padding: 1rem 1.05rem;
    border: 1px solid #dce6f4;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #f8fbff);
    box-shadow: 0 12px 30px rgba(30, 64, 175, .06);
}

.forms-response-kpi--primary {
    border-color: #bfdbfe;
    background: linear-gradient(145deg, #eff6ff, #fff);
}

.forms-response-kpi span,
.forms-response-kpi small {
    display: block;
    color: #64748b;
}

.forms-response-kpi span {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.forms-response-kpi strong {
    display: block;
    margin: .25rem 0 .18rem;
    color: #102b59;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 900;
    line-height: 1;
}

.forms-response-kpi small { font-size: .78rem; }

.forms-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.forms-analytics-card,
.forms-response-grid-card,
.forms-response-detail {
    min-width: 0;
    border: 1px solid #dce6f4;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(30, 64, 175, .07);
}

.forms-analytics-card { padding: 1rem; }

.forms-analytics-card header,
.forms-response-grid-header,
.forms-response-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.forms-analytics-card header span,
.forms-response-grid-header span,
.forms-response-detail__header span {
    color: #2563eb;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.forms-analytics-card h3,
.forms-response-grid-header h3,
.forms-response-detail h3 {
    margin: .12rem 0 0;
    color: #102b59;
    font-size: 1.02rem;
    font-weight: 850;
}

.forms-analytics-card header small,
.forms-response-grid-header small,
.forms-response-detail__header small {
    color: #64748b;
    font-size: .76rem;
}

.forms-chart-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: .65rem;
    min-height: 280px;
    color: #64748b;
    text-align: center;
}

.forms-chart-empty i { color: #93c5fd; font-size: 2rem; }

.forms-response-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
}

.forms-response-grid-card { overflow: hidden; }
.forms-response-grid-header { padding: 1rem 1rem .8rem; }
.forms-response-grid-header small { display: inline-flex; align-items: center; gap: .35rem; text-align: right; }

.forms-response-grid-card .e-grid {
    border: 0;
    font-family: inherit;
}

.forms-response-grid-card .e-grid .e-toolbar,
.forms-response-grid-card .e-grid .e-gridheader {
    border-color: #e5edf8;
    background: #f8fbff;
}

.forms-response-grid-card .e-grid .e-headercell {
    color: #334155;
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.forms-response-grid-card .e-grid .e-rowcell {
    padding-top: .75rem;
    padding-bottom: .75rem;
    color: #334155;
    font-size: .86rem;
}

.forms-response-grid-card .e-grid .e-row:hover .e-rowcell,
.forms-response-grid-card .e-grid .e-selectionbackground {
    background: #eff6ff !important;
}

.forms-response-detail {
    overflow: hidden;
}

.forms-response-detail__empty {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 300px;
    padding: 2rem;
    color: #64748b;
    text-align: center;
}

.forms-response-detail__empty i { margin-bottom: .65rem; color: #60a5fa; font-size: 2rem; }
.forms-response-detail__empty p { max-width: 290px; margin: .5rem 0 0; line-height: 1.55; }
.forms-response-detail__header { padding: 1rem; border-bottom: 1px solid #e5edf8; background: linear-gradient(145deg, #f8fbff, #fff); }
.forms-response-detail__header h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forms-response-detail__header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }

.forms-response-answer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    max-height: 540px;
    overflow-y: auto;
    padding: .35rem 1rem;
}

.forms-response-answer { padding: .8rem 0; border-bottom: 1px solid #edf2f8; }
.forms-response-answer:last-child { border-bottom: 0; }
.forms-response-answer label { display: block; margin-bottom: .28rem; color: #64748b; font-size: .73rem; font-weight: 800; text-transform: uppercase; }
.forms-response-answer p { margin: 0; color: #172554; font-size: .94rem; font-weight: 650; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

.forms-response-edit-note {
    display: flex;
    gap: .45rem;
    margin: .4rem 1rem;
    padding: .65rem .75rem;
    border-radius: 10px;
    color: #854d0e;
    background: #fffbeb;
    font-size: .75rem;
    line-height: 1.45;
}

.forms-response-detail__actions { display: flex; gap: .5rem; padding: .7rem 1rem 1rem; }

.forms-response-delete-confirm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem;
    padding: .9rem 1rem;
    border: 1px solid #fecaca;
    border-radius: 12px;
    color: #991b1b;
    background: #fff7f7;
}

.forms-response-delete-confirm strong { display: flex; align-items: center; gap: .45rem; }
.forms-response-delete-confirm p { margin: .25rem 0 0; color: #7f1d1d; font-size: .82rem; line-height: 1.45; }
.forms-response-delete-confirm__actions { display: flex; flex: 0 0 auto; gap: .5rem; }

@media (max-width: 1199.98px) {
    .forms-response-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .forms-response-kpis,
    .forms-analytics-grid { grid-template-columns: 1fr; }
    .forms-response-grid-header,
    .forms-response-detail__header { flex-direction: column; }
    .forms-response-grid-header small { text-align: left; }
    .forms-response-detail__header-actions { justify-content: flex-start; }
    .forms-response-answer-list { grid-template-columns: 1fr; }
    .forms-response-delete-confirm { align-items: flex-start; flex-direction: column; }
    .forms-response-delete-confirm__actions { flex-wrap: wrap; }
}

@keyframes formsDonationCardIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes formsLocationCardIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes formsNewFieldEntrance {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes formsNewFieldGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.34), 0 18px 36px rgba(37, 99, 235, 0.18);
    }

    45% {
        box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.08), 0 18px 36px rgba(37, 99, 235, 0.18);
    }

    100% {
        box-shadow: 0 18px 36px rgba(37, 99, 235, 0.12);
    }
}

@media (max-width: 991.98px) {
    .forms-product-hero,
    .forms-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .forms-product-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .forms-hero-actions .btn {
        width: 100%;
    }

    .forms-visual-editor {
        grid-template-columns: 1fr;
    }

    .forms-donation-editor__intro,
    .forms-location-editor__intro,
    .forms-donation-card__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .forms-location-card {
        grid-template-columns: 1fr;
    }

    .forms-address-preview__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .forms-section-title {
        align-items: stretch;
        flex-direction: column;
    }

    .forms-add-field-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .forms-add-field-button,
    .forms-field-editor {
        transition: none;
    }

    .forms-field-editor.is-new-field {
        animation: none;
    }

    .forms-donation-card,
    .forms-location-card,
    .forms-address-preview {
        animation: none;
    }
}

/* Birthday Melody Albums */
.inner-page--birthday-songs {
    color: #111827;
}

.birthday-shell,
.birthday-delivery-shell {
    max-width: 1180px;
    margin-inline: auto;
}

.birthday-hero,
.birthday-delivery-card {
    border-radius: 8px;
    border: 1px solid #d8dee8;
    background: linear-gradient(180deg, #ffffff, #fff7ed);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.birthday-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    margin-bottom: 1rem;
}

.birthday-hero p,
.birthday-delivery-card p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.birthday-hero__status {
    display: grid;
    gap: 0.5rem;
}

.birthday-hero__status span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #9a3412;
    font-weight: 800;
}

.birthday-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 1rem;
}

.birthday-package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.birthday-package-card {
    display: grid;
    gap: 0.35rem;
    min-height: 150px;
    padding: 0.85rem;
    border-radius: 8px;
    border: 1px solid #fed7aa;
    background: #fff7ed;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.birthday-package-card input {
    width: fit-content;
}

.birthday-package-card strong,
.birthday-request-card strong {
    color: #111827;
}

.birthday-package-card span,
.birthday-request-card span {
    color: #64748b;
    line-height: 1.45;
}

.birthday-package-card em {
    color: #9a3412;
    font-style: normal;
    font-weight: 900;
}

.birthday-package-card.is-selected,
.birthday-package-card:hover {
    transform: translateY(-1px);
    border-color: #f97316;
    box-shadow: 0 16px 30px rgba(249, 115, 22, 0.14);
}

.birthday-request-list {
    display: grid;
    gap: 0.75rem;
}

.birthday-request-card {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
}

.birthday-request-card > div:first-child,
.birthday-request-card span {
    display: grid;
    gap: 0.2rem;
}

.birthday-request-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.birthday-request-card--admin {
    grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
}

.birthday-admin-fields {
    display: grid;
    gap: 0.55rem;
}

.birthday-delivery-card {
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(1rem, 3vw, 2rem);
}

.birthday-photo-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.55rem;
    margin: 1rem 0;
}

.birthday-photo-strip img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

.birthday-audio {
    width: 100%;
    margin: 1rem 0;
}

.birthday-lyrics {
    white-space: pre-wrap;
    padding: 1rem;
    border-radius: 8px;
    color: #111827;
    background: #fff7ed;
    border: 1px solid #fed7aa;
}

@media (max-width: 991.98px) {
    .birthday-hero,
    .birthday-grid,
    .birthday-request-card--admin {
        grid-template-columns: 1fr;
    }

    .birthday-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .birthday-package-grid {
        grid-template-columns: 1fr;
    }
}

/* NutriApexa product pages */
.nutri-page {
    width: min(1120px, 100%);
    margin: 0 auto;
    color: var(--site-ink);
}

.nutri-page a {
    color: var(--site-blue);
}

.nutri-hero,
.nutri-policy-hero,
.nutri-policy,
.nutri-band,
.nutri-panel {
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--site-shadow-soft);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nutri-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center;
    padding: clamp(1.2rem, 3vw, 2.4rem);
    overflow: hidden;
}

.nutri-eyebrow {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.42rem 0.76rem;
    border-radius: 999px;
    background: rgba(232, 248, 241, 0.96);
    border: 1px solid rgba(128, 206, 169, 0.48);
    color: #176449;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nutri-hero h1,
.nutri-policy-hero h1 {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1;
}

.nutri-hero h1:focus,
.nutri-policy-hero h1:focus {
    outline: none;
}

.nutri-hero__lede,
.nutri-policy-hero p,
.nutri-policy p,
.nutri-policy li,
.nutri-panel p,
.nutri-band p {
    color: var(--site-ink);
    line-height: 1.72;
}

.nutri-hero__lede {
    max-width: 62ch;
    margin: 1rem 0 0;
    font-size: clamp(1.02rem, 1.6vw, 1.2rem);
}

.nutri-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

.nutri-actions--inline {
    margin-top: 0;
}

.nutri-btn {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.72rem 1.08rem;
    border-radius: 12px;
    font-weight: 800;
}

.nutri-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, #1e8d6c, #245db3);
    border: 0;
}

.nutri-btn--secondary {
    color: var(--site-blue-strong) !important;
    background: rgba(238, 245, 255, 0.92);
    border: 1px solid rgba(173, 199, 238, 0.72);
}

.nutri-hero__visual {
    display: grid;
    gap: 1rem;
    justify-items: center;
    padding: 1.3rem;
    border-radius: 15px;
    background:
        linear-gradient(180deg, rgba(232, 248, 241, 0.92), rgba(238, 245, 255, 0.92));
    border: 1px solid rgba(150, 204, 183, 0.5);
    text-align: center;
}

.nutri-hero__visual img {
    width: min(210px, 58vw);
    aspect-ratio: 1;
    border-radius: 30px;
    box-shadow: 0 22px 44px rgba(25, 53, 108, 0.18);
}

.nutri-hero__visual strong,
.nutri-hero__visual span {
    display: block;
}

.nutri-hero__visual strong {
    color: var(--site-ink-strong);
    font-size: 1.15rem;
}

.nutri-hero__visual span {
    margin-top: 0.25rem;
    color: var(--site-ink-soft);
}

.nutri-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 0.9rem;
}

.nutri-panel {
    padding: 1.05rem;
}

.nutri-panel i {
    display: inline-grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    margin-bottom: 0.85rem;
    border-radius: 12px;
    background: rgba(232, 248, 241, 0.98);
    color: #1e8d6c;
    font-size: 1.25rem;
}

.nutri-panel h2,
.nutri-band h2,
.nutri-policy h2,
.nutri-policy h3 {
    color: var(--site-ink-strong);
}

.nutri-panel h2 {
    margin: 0 0 0.5rem;
    font-size: 1.08rem;
}

.nutri-panel p {
    margin: 0;
    font-size: 0.94rem;
}

.nutri-band {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.9rem;
    padding: clamp(1rem, 2.5vw, 1.6rem);
}

.nutri-band h2 {
    margin: 0 0 0.55rem;
}

.nutri-band p {
    max-width: 72ch;
    margin: 0;
}

.nutri-policy-hero {
    padding: clamp(1.2rem, 3vw, 2.2rem);
}

.nutri-back-link {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.nutri-policy-hero h1 {
    font-size: clamp(2.15rem, 5vw, 4rem);
}

.nutri-policy-callout,
.nutri-policy-note,
.nutri-policy-footer {
    padding: 1rem;
    border-radius: 12px;
    background: rgba(232, 248, 241, 0.85);
    border: 1px solid rgba(128, 206, 169, 0.42);
}

.nutri-policy-callout--warning {
    background: rgba(255, 247, 225, 0.9);
    border-color: rgba(230, 174, 65, 0.48);
}

.nutri-policy-callout--danger {
    background: rgba(255, 235, 235, 0.9);
    border-color: rgba(220, 92, 92, 0.42);
}

.nutri-cookie-settings {
    margin-top: 0.85rem;
}

.nutri-policy {
    margin-top: 0.9rem;
    padding: clamp(1rem, 2.4vw, 1.7rem);
}

.nutri-policy section + section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(183, 205, 240, 0.58);
}

.nutri-policy h2 {
    margin: 0 0 0.8rem;
    font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

.nutri-policy h3 {
    margin: 1.25rem 0 0.45rem;
    font-size: 1.05rem;
}

.nutri-policy ul {
    padding-left: 1.25rem;
}

.nutri-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 0.85rem 0;
    border-radius: 12px;
    border: 1px solid rgba(183, 205, 240, 0.68);
    background: rgba(255, 255, 255, 0.7);
}

.nutri-policy table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.nutri-policy th,
.nutri-policy td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid rgba(183, 205, 240, 0.52);
    vertical-align: top;
    text-align: left;
}

.nutri-policy th {
    color: var(--site-ink-strong);
    background: rgba(238, 245, 255, 0.9);
}

.nutri-policy tr:last-child th,
.nutri-policy tr:last-child td {
    border-bottom: 0;
}

.nutri-policy code {
    padding: 0.12rem 0.32rem;
    border-radius: 6px;
    background: rgba(25, 53, 108, 0.08);
    color: var(--site-ink-strong);
}

.nutri-policy-footer {
    margin-top: 2rem;
    color: var(--site-ink-soft);
}

@media (max-width: 991.98px) {
    .nutri-hero,
    .nutri-grid {
        grid-template-columns: 1fr;
    }

    .nutri-band {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767.98px) {
    .nutri-page {
        padding-inline: 0.15rem;
    }

    .nutri-hero,
    .nutri-policy-hero,
    .nutri-policy {
        padding: 1rem;
    }

    .nutri-actions,
    .nutri-actions .nutri-btn,
    .nutri-band .nutri-btn {
        width: 100%;
    }
}

.mermaid-account-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.2rem 0;
    padding: 1rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #dbe7f3;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07);
}

.mermaid-account-band > div {
    min-width: 0;
}

.mermaid-account-band strong {
    display: block;
    color: #0f172a;
    font-size: 1.1rem;
}

.mermaid-account-band p {
    margin: 0.25rem 0 0;
    color: #475569;
    line-height: 1.45;
}

.mermaid-account-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: 0;
}

.mermaid-account-band__actions .btn {
    flex: 0 1 auto;
    white-space: normal;
}

.mermaid-checkout-return {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 0.9rem;
    border-color: #93c5fd;
    background: #eff6ff;
}

.mermaid-checkout-return strong,
.mermaid-checkout-return span {
    display: block;
}

.mermaid-checkout-return span {
    margin-top: 0.15rem;
}

.page--mermaid-product-domain .tool-workbench-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.page--mermaid-product-domain .tool-panel--results {
    grid-column: 1 / -1;
}

.page--mermaid-product-domain .tool-panel--editor > .tool-panel__header {
    align-items: flex-start;
    flex-direction: column;
}

.page--mermaid-product-domain .tool-panel--editor .tool-editor-links {
    justify-content: flex-start;
    width: 100%;
}

.page--mermaid-product-domain .mermaid-account-band {
    margin: 0;
    padding: 0.8rem 1rem;
    box-shadow: none;
    background: rgba(248, 250, 252, 0.88);
}

.page--mermaid-product-domain .mermaid-account-band p {
    font-size: 0.9rem;
}

.page--mermaid-product-domain .tool-download-callout small {
    display: block;
    margin-top: 0.7rem;
    color: #475569;
    line-height: 1.45;
}

.tool-panel--preview {
    min-width: 0;
}

.tool-panel--preview .tool-panel__header--compact {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.7rem;
}

.mermaid-preview-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    flex-wrap: wrap;
    width: 100%;
}

.mermaid-preview-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.mermaid-preview-actions .btn-link {
    margin-left: auto;
}

.mermaid-preview-canvas {
    display: grid;
    align-items: center;
    justify-items: center;
    min-height: 460px;
    overflow: auto;
    padding: 1rem;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.88));
    border: 1px solid #dbe7f3;
}

.mermaid-preview-canvas svg {
    max-width: 100%;
    height: auto;
}

.mermaid-preview-canvas[data-state="error"] {
    min-height: 260px;
    background: #fff7ed;
    border-color: #fdba74;
}

.mermaid-preview-export-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 700;
}

.mermaid-preview-export-note i {
    color: #2563eb;
}

.mermaid-preview-export-status {
    margin-top: 0.75rem;
    margin-bottom: 0;
}

@media (max-width: 1399.98px) {
    .page--mermaid-product-domain .tool-workbench-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    }

    .page--mermaid-product-domain .tool-panel--results {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .mermaid-preview-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .mermaid-preview-actions .btn {
        width: 100%;
    }

    .mermaid-preview-actions .btn-link {
        grid-column: 1 / -1;
        margin-left: 0;
    }
}

.m2v-demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1.25rem;
}

.m2v-demo-card {
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 1rem;
    background: rgba(15, 23, 42, .72);
    box-shadow: 0 1rem 2.5rem rgba(2, 6, 23, .18);
}

.m2v-demo-card video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #081226;
}

.m2v-demo-card__body { padding: 1.1rem; }
.m2v-demo-card__body h3 { margin: .7rem 0 .5rem; }
.m2v-demo-card__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

@media (max-width: 1199.98px) {
    .page--mermaid-product-domain .mermaid-account-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .page--mermaid-product-domain .mermaid-account-band__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .page--mermaid-product-domain .tool-workbench-grid {
        grid-template-columns: 1fr;
    }

    .page--mermaid-product-domain .tool-panel--results {
        grid-column: auto;
    }

    .page--mermaid-product-domain .tool-panel--editor .tool-editor-links {
        gap: 0.45rem 0.7rem;
    }
}

@media (max-width: 991.98px) {
    .mermaid-account-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .mermaid-account-band__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .page--mermaid-product-domain .tool-workbench-grid {
        grid-template-columns: 1fr;
    }

    .page--mermaid-product-domain .tool-panel--results {
        grid-column: auto;
    }

    .mermaid-preview-canvas {
        min-height: 340px;
    }
}

.page-header-shell .site-navbar.navbar,
.site-navbar.navbar {
    padding: 1.35rem 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

.page-header-shell .site-navbar__inner,
.site-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.4rem;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 20px 55px rgba(40, 77, 138, 0.12) !important;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.nav-brand {
    gap: 0.95rem;
    margin-left: 0;
    padding: 0;
}

.nav-brand-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    border: 2px solid rgba(215, 228, 248, 0.95);
    box-shadow: 0 10px 25px rgba(43, 77, 130, 0.12);
    background: #f4f8ff;
}

.nav-brand-avatar-img {
    max-width: none;
    max-height: none;
}

.nav-brand-logo--product {
    display: block;
    width: clamp(172px, 16vw, 220px);
    height: auto;
    object-fit: contain;
}

.nav-brand-avatar--product {
    overflow: hidden;
    border-radius: 12px;
    border-color: rgba(15, 118, 110, 0.24);
    background: #f8fcfb;
}

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

.nav-brand-name {
    color: var(--site-ink-strong);
    font-size: clamp(1.2rem, 1.35vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0;
}

.nav-brand-role {
    color: var(--site-ink-soft);
    font-size: 0.88rem;
}

@media (max-width: 1399.98px) and (min-width: 992px) {
    .site-navbar__inner {
        gap: 0.65rem;
        padding: 0.8rem 1rem;
    }

    .nav-brand {
        gap: 0.72rem;
    }

    .nav-brand-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .nav-brand-name {
        font-size: 1.02rem;
    }

    .nav-brand-role {
        display: none;
    }

    .site-navbar__actions {
        gap: 0.35rem;
    }

    .site-navbar__actions .nav-link {
        gap: 0.45rem;
        min-height: 44px;
        padding: 0.68rem 0.78rem !important;
        font-size: 0.94rem;
    }

    .culture-switch {
        min-width: 46px;
        padding-inline: 0.75rem !important;
    }
}

.site-navbar__panel {
    flex: 1 1 auto;
    min-width: 0;
}

.site-navbar__menu {
    position: relative;
}

.site-navbar__actions {
    gap: 0.9rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.site-navbar__actions .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 0.75rem 1rem !important;
    border-radius: 6px !important;
    color: var(--site-ink) !important;
    font-weight: 600;
    line-height: 1;
    background: transparent !important;
}

.site-navbar__actions button.nav-link {
    border: none;
}

.site-navbar__actions .nav-link::after {
    display: none !important;
}

.site-navbar__actions .nav-link:hover,
.site-navbar__actions .nav-link:focus,
.site-navbar__actions .nav-link.active {
    color: var(--site-blue) !important;
    background: rgba(236, 244, 255, 0.96) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px rgba(190, 211, 243, 0.9) !important;
}

.nav-menu-trigger {
    background: rgba(244, 248, 255, 0.96) !important;
    box-shadow: inset 0 0 0 1px rgba(198, 215, 242, 0.95);
}

.nav-menu-trigger__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #dceaff, #edf4ff);
    color: var(--site-blue);
    font-size: 0.8rem;
}

.nav-contact-btn {
    background: transparent !important;
    box-shadow: none !important;
}

.nav-contact-btn:hover,
.nav-contact-btn:focus,
.nav-contact-btn.active {
    color: var(--site-blue) !important;
    background: rgba(236, 244, 255, 0.96) !important;
    border-radius: 6px !important;
    box-shadow: inset 0 0 0 1px rgba(190, 211, 243, 0.9) !important;
}

.admin-link {
    background: rgba(255, 243, 205, 0.9) !important;
    color: #7a5a00 !important;
    box-shadow: inset 0 0 0 1px rgba(234, 203, 111, 0.55);
}

.culture-switch-item {
    list-style: none;
}

.culture-switch {
    min-width: 52px;
    justify-content: center;
    border: 1px solid rgba(198, 215, 242, 0.95) !important;
    background: rgba(247, 250, 255, 0.95) !important;
    color: var(--site-blue) !important;
    font-weight: 800 !important;
}

.site-navbar .navbar-toggler {
    border: none;
    padding: 0.45rem;
    background: rgba(244, 248, 255, 0.96) !important;
    border-radius: 15px;
    box-shadow: inset 0 0 0 1px rgba(198, 215, 242, 0.95);
}

.site-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(93, 134, 203, 0.18);
}

.site-navbar .navbar-toggler-icon {
    width: 1.45rem;
    height: 1.45rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(26,76,152,1)' stroke-width='2.15' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.site-navbar .navbar-nav .dropdown-menu,
.site-navbar .cv-dropdown-menu,
.cv-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.7rem);
    right: 0;
    min-width: 290px !important;
    padding: 0.85rem !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border: 1px solid rgba(208, 222, 245, 0.9) !important;
    box-shadow: 0 26px 44px rgba(31, 63, 114, 0.14) !important;
}

.site-navbar .cv-dropdown-menu.show,
.cv-dropdown-menu.show {
    display: block;
}

.site-navbar .cv-dropdown-menu li,
.cv-dropdown-menu li {
    padding: 0 !important;
    margin-bottom: 0.3rem !important;
}

.site-navbar .cv-dropdown-menu li:last-child,
.cv-dropdown-menu li:last-child {
    margin-bottom: 0 !important;
}

.site-navbar .cv-dropdown-item,
.cv-dropdown-item {
    gap: 0.85rem !important;
    padding: 0.85rem 1rem !important;
    color: var(--site-ink) !important;
    border-radius: 15px !important;
    font-size: 0.97rem !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.site-navbar .cv-dropdown-item i,
.cv-dropdown-item i {
    color: var(--site-blue) !important;
    filter: none !important;
}

.site-navbar .cv-dropdown-item:hover,
.site-navbar .cv-dropdown-item:focus,
.site-navbar .cv-dropdown-item.active,
.cv-dropdown-item:hover,
.cv-dropdown-item:focus,
.cv-dropdown-item.active {
    color: var(--site-blue) !important;
    background: rgba(239, 246, 255, 0.95) !important;
    box-shadow: inset 0 0 0 1px rgba(198, 214, 241, 0.8) !important;
}

.main {
    gap: 1.5rem;
}

.inner-page {
    gap: 1.05rem;
}

.inner-page__section {
    position: relative;
}

.inner-page .hero-summary-wrapper {
    position: relative;
    overflow: hidden;
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: clamp(1.8rem, 4vw, 2.35rem) clamp(1.35rem, 3vw, 2rem);
    border-radius: 15px;
    box-shadow: 0 18px 42px rgba(37, 72, 126, 0.11);
}

.inner-page .hero-summary-wrapper .hero-bg {
    opacity: 0.035;
}

.inner-page .hero-summary-wrapper .hero-title,
.inner-page .hero-summary-wrapper .display-5 {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: clamp(1.95rem, 2.8vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.inner-page .hero-summary {
    padding: 0;
    max-width: none;
}

.inner-page .hero-subtitle {
    max-width: 720px;
    margin: 0.55rem auto 0;
}

.inner-page .inner-page__body {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 2.2vw, 1.45rem);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 16px 36px rgba(37, 72, 126, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.cv-record-grid,
.cv-experience-list {
    display: grid;
    gap: 1rem;
}

.cv-record-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cv-record-grid__item,
.cv-experience-list__item {
    min-width: 0;
}

.inner-page .cv-record-card,
.inner-page .cv-experience-card,
.inner-page .cv-skill-card,
.inner-page .cv-qualification-card,
.inner-page .booking-card {
    padding: 1rem;
    border-radius: 15px !important;
}

.inner-page .cv-record-card .e-card-header,
.inner-page .cv-experience-card .e-card-header,
.inner-page .cv-skill-card .e-card-header {
    padding: 0 0 0.85rem;
}

.inner-page .cv-record-card .e-card-content,
.inner-page .cv-experience-card .e-card-content,
.inner-page .cv-skill-card .e-card-content {
    padding: 0;
}

.inner-page .cv-record-card .e-card-header-title,
.inner-page .cv-experience-card .e-card-header-title {
    font-size: 1.02rem !important;
    line-height: 1.4;
}

.inner-page .cv-record-card .e-card-sub-title,
.inner-page .cv-experience-card .e-card-sub-title {
    color: var(--site-ink-soft) !important;
    font-size: 0.88rem !important;
}

.cv-record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.cv-record-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.78rem;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-ink);
    font-size: 0.86rem;
}

.cv-record-meta-item strong {
    color: var(--site-ink-strong);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.cv-record-description {
    margin: 0.85rem 0 0;
    color: var(--site-ink-soft);
    line-height: 1.7;
}

.cv-experience-list {
    grid-template-columns: 1fr;
}

.inner-page .cv-experience-card {
    padding: 1.15rem 1.2rem;
}

.cv-experience-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.cv-meta-item {
    padding: 0.8rem 0.9rem;
    border-radius: 15px;
    background: rgba(242, 247, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.92);
}

.cv-meta-label {
    display: block;
    margin-bottom: 0.28rem;
    color: var(--site-ink-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-meta-value {
    color: var(--site-ink-strong);
    font-weight: 700;
    line-height: 1.45;
}

.cv-experience-description {
    margin: 0 0 1rem;
    color: var(--site-ink-soft);
    line-height: 1.75;
}

.cv-experience-section + .cv-experience-section {
    margin-top: 0.95rem;
}

.cv-experience-section h5 {
    margin-bottom: 0.45rem;
    color: var(--site-ink-strong);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cv-experience-section p {
    margin-bottom: 0;
    color: var(--site-ink);
    line-height: 1.75;
}

.cv-responsibility-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--site-ink);
}

.inner-page .cv-skill-card {
    padding: 0.9rem 0.95rem;
}

.inner-page--skills .cv-skill-card {
    padding: 0.95rem 1rem;
    border-radius: 15px !important;
}

.cv-skill-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    height: 100%;
}

.cv-skill-card__topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.cv-skill-card__category {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 28px;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.cv-skill-card__category .category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--site-blue);
}

.cv-skill-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cv-skill-card__title {
    color: var(--site-ink-strong);
    font-weight: 800;
    line-height: 1.35;
}

.cv-skill-card__content {
    color: var(--site-ink);
}

.cv-skill-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.cv-skill-note {
    margin-top: 0.55rem;
    color: var(--site-ink-soft);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inner-page--qualifications .cv-qualification-card .e-card-content {
    padding: 0;
    height: 100%;
}

.inner-page--qualifications .cv-qualification-card__text {
    margin: 0;
    color: var(--site-ink);
    font-size: 0.93rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inner-page--qualifications .cv-qualification-card__text.cv-skill-note {
    margin-top: 0;
    color: var(--site-ink-soft);
}

.inner-page--qualifications .cv-qualification-card__category .qual-icon {
    display: block;
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.95;
}

.inner-page--qualifications .cv-qualification-card--highlighted {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 247, 255, 0.96)) !important;
    box-shadow:
        0 18px 42px rgba(40, 71, 125, 0.11) !important,
        inset 0 0 0 1px rgba(160, 194, 243, 0.55) !important;
}

.inner-page--booking {
    gap: 0.2625rem;
}

.inner-page--contact {
    gap: 0.2625rem;
}

.inner-page--labs {
    gap: 0.2625rem;
}

.inner-page--management,
.inner-page--privacy,
.inner-page--file-tools {
    gap: 0.2625rem;
}

.inner-page--management .cv-record-shell,
.inner-page--privacy .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inner-page--management .management-intro-card,
.inner-page--management .management-section-card,
.privacy-shell {
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid var(--border-neutral) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06) !important;
}

.inner-page--management .e-card-header,
.inner-page--management .e-card-content {
    padding: 1rem !important;
}

.inner-page--management .management-section-card {
    height: 100%;
}

.inner-page--management .management-section-card .e-card-header h5 {
    color: #111827;
    font-weight: 850;
    line-height: 1.25;
}

.inner-page--management .management-section-card .e-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.inner-page--management .management-section-card .e-card-content p {
    flex: 1;
    color: #475569;
    line-height: 1.55;
}

.privacy-shell {
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #334155;
    line-height: 1.78;
}

.privacy-shell h1 {
    display: none;
}

.privacy-shell h2 {
    margin: 1.35rem 0 0.55rem;
    color: #111827;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 850;
}

.privacy-shell h2:first-of-type {
    margin-top: 0.5rem;
}

.privacy-shell ul {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 0;
    padding-left: 1.25rem;
}

.page-content-card--inner > h1,
.page-content-card--inner > .row {
    width: min(980px, 100%);
    margin-inline: auto;
}

.page-content-card--inner > h1 {
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    color: #111827;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
}

.page-content-card--inner > .row {
    padding: clamp(1rem, 2.4vw, 1.6rem);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-neutral);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.page-content-card--inner > .row section h2,
.page-content-card--inner > .row section h3 {
    color: #111827;
    font-weight: 850;
    letter-spacing: 0;
}

.inner-page--account {
    width: 100%;
}

.account-shell {
    width: min(980px, 100%);
    margin-inline: auto;
    padding: clamp(1.1rem, 2.6vw, 1.8rem);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border-neutral);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.account-shell > h1 {
    margin: 0 0 0.9rem;
    color: #111827;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
    text-align: center;
}

.account-shell > .row {
    --bs-gutter-x: clamp(1rem, 3vw, 2rem);
    --bs-gutter-y: 1.25rem;
    align-items: flex-start;
    margin: 0;
}

.account-shell > .row > [class*="col-"] {
    min-width: 0;
}

.account-shell section {
    padding: 1rem;
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.76);
    border: 1px solid rgba(226, 232, 240, 0.95);
}

.account-shell h2,
.account-shell h3 {
    color: #111827;
    font-weight: 850;
    letter-spacing: 0;
}

.account-shell h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.account-shell h3 {
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
}

.account-shell p,
.account-shell a {
    overflow-wrap: anywhere;
}

.account-shell .form-control,
.account-shell .btn {
    width: 100%;
}

.account-shell .form-floating > label {
    color: #475569;
}

.inner-page--visitor-analytics {
    gap: 0.2625rem;
}

.inner-page--visitor-analytics .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

.analytics-summary-grid--wide {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.analytics-filter-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 220px) auto;
    align-items: end;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(223, 232, 247, 0.95);
    box-shadow: 0 18px 36px rgba(24, 56, 114, 0.08);
}

.analytics-filter-bar label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--site-ink-soft);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.analytics-refresh-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.analytics-summary-card,
.analytics-section-card {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 36px rgba(24, 56, 114, 0.09);
    border: 1px solid rgba(223, 232, 247, 0.95);
}

.analytics-summary-card {
    padding: 1.25rem 1.35rem;
    min-width: 0;
}

.analytics-summary-card__label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--site-ink-soft);
    font-size: 0.88rem;
    font-weight: 700;
}

.analytics-summary-card__value {
    display: block;
    color: var(--site-ink-strong);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.1;
}

.analytics-summary-card small {
    display: block;
    margin-top: 0.3rem;
    color: var(--site-ink-soft);
    font-size: 0.78rem;
    line-height: 1.35;
}

.analytics-section-card {
    padding: 1rem 1.1rem;
    min-width: 0;
    overflow: hidden;
}

.analytics-chart-grid,
.analytics-grid-two {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.95fr);
    gap: 1rem;
}

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

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

.analytics-section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.analytics-section-card__header h3 {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: 1.05rem;
    font-weight: 800;
}

.analytics-section-card__header span {
    color: var(--site-ink-soft);
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
}

.analytics-signal-list {
    display: grid;
    gap: 0.65rem;
}

.analytics-signal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border-radius: 8px;
    background: rgba(248, 251, 255, 0.96);
    border: 1px solid rgba(224, 233, 247, 0.9);
}

.analytics-signal span {
    color: var(--site-ink);
    font-size: 0.92rem;
    font-weight: 700;
}

.analytics-signal strong {
    color: var(--site-ink-strong);
    font-size: 1rem;
    font-weight: 900;
}

.sales-sprint-scoreboard {
    border-color: rgba(42, 108, 214, 0.26);
    background: linear-gradient(135deg, rgba(232, 241, 255, 0.98) 0%, rgba(255, 255, 255, 0.96) 72%);
}

.sales-sprint-scoreboard__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.sales-sprint-metric {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    border: 1px solid rgba(210, 222, 242, 0.96);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
}

.sales-sprint-metric > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.sales-sprint-metric > div:first-child span,
.sales-sprint-metric small {
    color: var(--site-ink-soft);
}

.sales-sprint-metric__track {
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(42, 108, 214, 0.14);
}

.sales-sprint-metric__track span {
    display: block;
    min-width: 0.2rem;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #245ec7, #1ca6a8);
}

.analytics-table {
    margin-bottom: 0;
}

.analytics-table thead th {
    color: var(--site-ink-soft);
    font-size: 0.84rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.analytics-table td {
    color: var(--site-ink);
    font-size: 0.94rem;
}

@media (max-width: 991.98px) {
    .analytics-summary-grid,
    .analytics-summary-grid--wide,
    .analytics-chart-grid,
    .analytics-chart-grid--thirds,
    .analytics-grid-two,
    .analytics-filter-bar {
        grid-template-columns: 1fr;
    }

    .analytics-section-card__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .analytics-section-card__header span {
        text-align: left;
    }

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

@media (max-width: 575.98px) {
    .sales-sprint-scoreboard__grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .analytics-summary-grid--wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

.inner-page--labs .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.labs-shell__intro {
    max-width: 780px;
    margin: 0 auto;
}

.labs-shell__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.labs-shell__intro-text {
    margin: 0.9rem 0 0;
    color: var(--site-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

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

.labs-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.2rem 1.3rem !important;
}

.labs-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 1.25rem;
}

.labs-card__title {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: 1.18rem;
    font-weight: 800;
}

.labs-card__text {
    margin: 0;
    color: var(--site-ink);
    line-height: 1.8;
}

.labs-card__tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.labs-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.38rem 0.72rem;
    border-radius: 999px;
    background: rgba(244, 248, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(198, 215, 242, 0.95);
    color: var(--site-blue);
    font-size: 0.82rem;
    font-weight: 700;
}

.labs-card__actions {
    margin-top: auto;
}

.labs-card__actions--stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.labs-youtube-btn {
    min-height: 48px;
    padding-inline: 1.1rem;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: 0 14px 24px rgba(196, 30, 58, 0.18);
}

.labs-card__subnote {
    color: var(--site-ink-soft);
    font-size: 0.92rem;
    line-height: 1.65;
}

.inner-page--mermaid-tool {
    gap: 0.2625rem;
}

.mermaid-product-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
    gap: clamp(1.2rem, 3vw, 2.25rem);
    align-items: center;
    width: min(1180px, 100%);
    margin: -0.35rem auto 0.8rem;
    padding: clamp(1rem, 3vw, 2.1rem) clamp(0.65rem, 2.4vw, 1.7rem);
}

.mermaid-product-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.mermaid-product-hero__copy h1 {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    line-height: 0.98;
    font-weight: 800;
    max-width: 820px;
}

.mermaid-product-hero__copy p {
    margin: 0;
    max-width: 680px;
    color: #31537f;
    font-size: clamp(1rem, 1.7vw, 1.22rem);
    line-height: 1.75;
}

.mermaid-product-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.3rem;
}

.mermaid-product-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.35rem;
}

.mermaid-product-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.78);
    color: #264a76;
    font-size: 0.86rem;
    font-weight: 800;
}

.mermaid-product-trust-row i {
    color: #14715f;
}

.mermaid-product-hero__preview {
    display: grid;
    gap: 0.9rem;
}

.mermaid-preview-window {
    overflow: hidden;
    border-radius: 8px;
    background: #172033;
    border: 1px solid rgba(111, 138, 182, 0.34);
    box-shadow: 0 24px 60px rgba(27, 54, 102, 0.22);
}

.mermaid-preview-window__bar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0 0.9rem;
    background: #202d45;
    color: #bfd0ea;
    font-size: 0.82rem;
}

.mermaid-preview-window__bar span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #58c59d;
}

.mermaid-preview-window__bar span:first-child {
    background: #ef6f76;
}

.mermaid-preview-window__bar span:nth-child(2) {
    background: #f4c15d;
}

.mermaid-preview-window__bar strong {
    margin-left: 0.4rem;
    font-weight: 800;
}

.mermaid-preview-window pre {
    margin: 0;
    padding: 1.1rem;
    color: #eef6ff;
    font-size: clamp(0.78rem, 1.4vw, 0.92rem);
    line-height: 1.75;
    white-space: pre-wrap;
}

.mermaid-preview-output {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.82), 0 14px 30px rgba(32, 70, 130, 0.08);
}

.mermaid-preview-output__node {
    display: grid;
    place-items: center;
    min-width: 116px;
    min-height: 52px;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    background: #f3f8ff;
    color: #245181;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(179, 203, 238, 0.88);
}

.mermaid-preview-output__node--strong {
    background: #e8f8f2;
    color: #12614f;
    box-shadow: inset 0 0 0 1px rgba(111, 192, 163, 0.72);
}

.inner-page--mermaid-tool .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mermaid-commercial-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
    gap: 1rem;
    align-items: stretch;
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 42px rgba(32, 70, 130, 0.09);
}

.mermaid-commercial-strip h2 {
    margin: 0.8rem 0 0.45rem;
    color: var(--site-ink-strong);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 800;
}

.mermaid-commercial-strip p {
    margin: 0;
    color: var(--site-ink-soft);
    line-height: 1.75;
}

.mermaid-plan-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    padding: 1rem;
    border-radius: 8px;
    background: #173454;
    color: #f7fbff;
    box-shadow: 0 16px 34px rgba(19, 49, 86, 0.18);
}

.mermaid-plan-card__label {
    color: #96ddcb;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mermaid-plan-card strong {
    font-size: 1.2rem;
    line-height: 1.3;
}

.mermaid-plan-card small {
    color: #d6e3f4;
    line-height: 1.55;
}

.tool-shell__intro {
    max-width: 760px;
    margin: 0 auto;
}

.tool-shell__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tool-shell__intro-text {
    margin: 0.9rem 0 0;
    color: var(--site-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

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

.tool-status-card {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
}

.tool-status-card__icon-wrap,
.tool-panel__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 1.18rem;
    flex: 0 0 48px;
}

.tool-status-card__label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--site-ink-soft);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tool-workbench-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.tool-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 1.25rem !important;
}

.tool-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tool-panel__header-main {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.tool-panel__title {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: 1.15rem;
    font-weight: 800;
}

.tool-panel__text {
    margin: 0.35rem 0 0;
    color: var(--site-ink-soft);
    line-height: 1.7;
}

.tool-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tool-upload-shell,
.tool-textarea-shell {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.tool-upload-label {
    color: var(--site-ink-strong);
    font-size: 0.92rem;
    font-weight: 700;
}

.tool-upload-help {
    margin: 0;
    color: var(--site-ink-soft);
    font-size: 0.88rem;
}

.tool-textarea {
    min-height: 320px;
    resize: vertical;
    font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
}

.tool-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tool-alert {
    margin: 0;
}

.tool-limit-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    background: #fff7e8;
    color: #80540f;
    box-shadow: inset 0 0 0 1px rgba(224, 174, 83, 0.52);
}

.tool-limit-callout i {
    margin-top: 0.15rem;
    color: #b36d00;
}

.tool-limit-callout div {
    display: grid;
    gap: 0.15rem;
}

.tool-placeholder-state {
    display: grid;
    place-items: center;
    gap: 0.85rem;
    min-height: 240px;
    padding: 1.2rem;
    text-align: center;
    border-radius: 20px;
    background: rgba(247, 250, 255, 0.82);
    box-shadow: inset 0 0 0 1px rgba(208, 222, 245, 0.9);
    color: var(--site-ink-soft);
}

.tool-panel__icon-wrap--placeholder {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    font-size: 1.35rem;
}

.tool-readiness-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-weight: 800;
}

.tool-readiness-badge--good {
    background: rgba(233, 248, 238, 0.95);
    color: #1f7a45;
    box-shadow: inset 0 0 0 1px rgba(131, 201, 155, 0.55);
}

.tool-readiness-badge--warn {
    background: rgba(255, 246, 229, 0.96);
    color: #9a6513;
    box-shadow: inset 0 0 0 1px rgba(232, 191, 119, 0.58);
}

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

.tool-result-item {
    padding: 0.9rem 0.95rem;
    border-radius: 16px;
    background: rgba(242, 247, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.92);
}

.tool-result-item__label {
    display: block;
    margin-bottom: 0.28rem;
    color: var(--site-ink-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tool-plan-meter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 8px;
    background: #eef9f5;
    color: #164f45;
    box-shadow: inset 0 0 0 1px rgba(121, 194, 169, 0.52);
}

.tool-plan-meter div {
    display: grid;
    gap: 0.2rem;
}

.tool-plan-meter span {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tool-list-block {
    padding: 0.95rem 1rem;
    border-radius: 16px;
}

.tool-list-block h4 {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    font-weight: 800;
}

.tool-list-block ul {
    margin: 0;
    padding-left: 1.1rem;
}

.tool-list-block--danger {
    background: rgba(255, 240, 242, 0.96);
    box-shadow: inset 0 0 0 1px rgba(226, 147, 164, 0.46);
    color: #8f3348;
}

.tool-list-block--warning {
    background: rgba(255, 249, 236, 0.98);
    box-shadow: inset 0 0 0 1px rgba(231, 199, 134, 0.52);
    color: #8b6214;
}

.tool-next-step-callout,
.tool-download-callout {
    padding: 0.95rem 1rem;
    border-radius: 16px;
    color: var(--site-ink);
    line-height: 1.7;
}

.tool-next-step-callout {
    background: rgba(240, 246, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.92);
}

.tool-download-callout {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: rgba(234, 247, 238, 0.96);
    box-shadow: inset 0 0 0 1px rgba(133, 199, 156, 0.44);
}

.tool-download-callout p {
    margin: 0;
}

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

.mermaid-growth-grid article {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 30px rgba(32, 70, 130, 0.07);
}

.mermaid-growth-grid i {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #eef9f5;
    color: #14715f;
    font-size: 1.12rem;
}

.mermaid-growth-grid h3 {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: 1rem;
    font-weight: 800;
}

.mermaid-growth-grid p {
    margin: 0;
    color: var(--site-ink-soft);
    line-height: 1.65;
    font-size: 0.92rem;
}

@media (max-width: 991.98px) {
    .mermaid-product-hero,
    .mermaid-commercial-strip,
    .tool-status-grid,
    .tool-workbench-grid,
    .tool-result-grid,
    .mermaid-growth-grid {
        grid-template-columns: 1fr;
    }

    .tool-panel__header,
    .tool-panel__header-main,
    .tool-status-card {
        flex-direction: column;
    }

    .mermaid-product-hero {
        margin-top: 0;
    }
}

@media (max-width: 767.98px) {
    .cv-card-grid--labs {
        grid-template-columns: 1fr;
    }

    .tool-mode-switch,
    .tool-actions-row {
        flex-direction: column;
    }

    .mermaid-product-hero__actions,
    .tool-plan-meter {
        align-items: stretch;
        flex-direction: column;
    }

    .mermaid-product-hero__actions .btn,
    .tool-plan-meter .btn {
        width: 100%;
    }

    .mermaid-preview-output {
        align-items: stretch;
        flex-direction: column;
    }

    .mermaid-preview-output i {
        transform: rotate(90deg);
    }
}

/* =========================================================
   Mermaid-to-Visio engineering product redesign
   ========================================================= */
.site-global-background--disabled,
.site-global-background--disabled .site-global-background__video,
.site-global-background--disabled .site-global-background__fallback,
.site-global-background--disabled .site-global-background__overlay {
    display: none !important;
}

.page--engineering-tool {
    --site-font-body: "Inter", "Segoe UI", system-ui, sans-serif;
    --site-font-heading: "Inter", "Segoe UI", system-ui, sans-serif;
    --site-ink-strong: var(--text-primary);
    --site-ink: #334155;
    --site-ink-soft: #64748b;
    --site-blue: var(--accent-primary);
    --site-blue-strong: var(--accent-primary-strong);
    color: var(--text-primary);
    background-color: var(--bg-main);
    background-image: none;
}

.page--engineering-tool::before {
    display: none;
}

.page-main--engineering-tool {
    padding-top: 4.35rem !important;
    padding-bottom: 0 !important;
}

.page-content--engineering-tool {
    max-width: 1280px;
}

.page--engineering-chrome .site-navbar.navbar,
.page--engineering-tool .site-navbar.navbar {
    padding-top: 1.1rem !important;
}

.page--engineering-chrome .site-navbar__inner,
.page--engineering-tool .site-navbar__inner {
    max-width: 1040px;
    min-height: 58px;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    background: rgba(247, 247, 250, 0.92) !important;
    border: 1px solid rgba(226, 232, 240, 0.92) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
}

.page--engineering-chrome .nav-brand,
.page--engineering-tool .nav-brand {
    gap: 0.65rem;
}

.page--engineering-chrome .nav-brand-avatar,
.page--engineering-tool .nav-brand-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    border-color: rgba(226, 232, 240, 0.98);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}

.page--engineering-chrome .nav-brand-name,
.page--engineering-tool .nav-brand-name {
    color: #111827;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: 0;
}

.page--engineering-chrome .nav-brand-role,
.page--engineering-tool .nav-brand-role {
    color: #475569;
    font-size: 0.78rem;
    font-weight: 500;
}

.page--engineering-chrome .site-navbar__actions .nav-link,
.page--engineering-tool .site-navbar__actions .nav-link {
    color: #111827 !important;
    border-radius: 6px;
    font-weight: 700;
}

.page--engineering-chrome .site-navbar__actions .nav-link:hover,
.page--engineering-chrome .site-navbar__actions .nav-link:focus,
.page--engineering-chrome .site-navbar__actions .nav-link.active,
.page--engineering-tool .site-navbar__actions .nav-link:hover,
.page--engineering-tool .site-navbar__actions .nav-link:focus,
.page--engineering-tool .site-navbar__actions .nav-link.active {
    color: var(--accent-primary) !important;
    background: rgba(63, 43, 232, 0.08) !important;
}

.inner-page--mermaid-tool {
    gap: clamp(2.2rem, 4.2vw, 4rem);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.inner-page--mermaid-tool .btn {
    border-radius: 7px !important;
    letter-spacing: 0;
}

.inner-page--mermaid-tool .btn-primary {
    color: #fff !important;
    border-color: var(--accent-primary) !important;
    background: var(--accent-primary) !important;
    box-shadow: 0 18px 34px rgba(63, 43, 232, 0.22);
}

.inner-page--mermaid-tool .btn-primary:hover,
.inner-page--mermaid-tool .btn-primary:focus {
    border-color: var(--accent-primary-strong) !important;
    background: var(--accent-primary-strong) !important;
}

.inner-page--mermaid-tool .btn-primary:disabled {
    opacity: 0.52;
    box-shadow: none;
}

.inner-page--mermaid-tool .btn-outline-primary {
    color: var(--accent-primary) !important;
    border-color: rgba(63, 43, 232, 0.38) !important;
    background: transparent !important;
}

.inner-page--mermaid-tool code,
.inner-page--mermaid-tool pre,
.inner-page--mermaid-tool textarea,
.tool-result-item strong,
.tool-plan-meter strong,
.tool-list-block,
.tool-file-chip {
    font-family: "Fira Code", "JetBrains Mono", "Source Code Pro", Consolas, monospace;
}

.mermaid-product-hero {
    grid-template-columns: minmax(300px, 0.92fr) minmax(520px, 1.08fr);
    gap: clamp(1.6rem, 3.4vw, 3.6rem);
    width: min(1120px, 100%);
    min-height: auto;
    margin: 0 auto;
    padding: clamp(0.65rem, 2.2vw, 1.65rem) 0 clamp(1.15rem, 2.6vw, 2rem);
    background: transparent !important;
}

.mermaid-product-hero__copy {
    gap: 1.35rem;
}

.tool-shell__eyebrow {
    min-height: auto;
    padding: 0;
    border-radius: 0;
    color: var(--accent-primary);
    background: transparent;
    box-shadow: none;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.mermaid-product-hero__copy h1 {
    max-width: 600px;
    color: #050505;
    font-size: clamp(2.55rem, 4.15vw, 4.45rem);
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: 0;
}

.mermaid-product-hero__copy p {
    max-width: 520px;
    color: #111827;
    font-size: clamp(1.02rem, 1.4vw, 1.22rem);
    line-height: 1.55;
}

.mermaid-product-hero__actions {
    margin-top: 0.25rem;
}

.mermaid-product-hero__actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 54px;
    padding: 0.95rem 1.45rem;
    font-weight: 850 !important;
}

.mermaid-product-trust-row {
    gap: 0.65rem;
}

.mermaid-product-trust-row span {
    min-height: 34px;
    padding: 0.42rem 0.68rem;
    border-radius: 999px;
    color: #334155;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.9);
}

.mermaid-product-trust-row i {
    color: #111827;
}

.mermaid-product-hero__proof {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    gap: 1rem;
    align-items: center;
}

.mermaid-code-proof,
.code-editor-shell {
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-editor);
    border: 1px solid rgba(148, 163, 184, 0.32);
    box-shadow: 0 26px 56px rgba(15, 23, 42, 0.18);
}

.mermaid-window-bar {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-height: 38px;
    padding: 0 0.9rem;
    color: #cbd5e1;
    background: #243047;
    font-family: "Fira Code", Consolas, monospace;
    font-size: 0.75rem;
}

.mermaid-window-bar .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.dot--red { background: #ef6b73; }
.dot--yellow { background: #f4c15d; }
.dot--green { background: #58c59d; }

.mermaid-window-bar strong {
    margin-left: 0.38rem;
    font-weight: 700;
}

.mermaid-window-bar em {
    margin-left: auto;
    color: #94a3b8;
    font-style: normal;
}

.mermaid-code-proof pre {
    margin: 0;
    padding: 1rem 1.05rem 1.15rem;
    color: #e2e8f0;
    font-size: clamp(0.74rem, 0.78vw, 0.9rem);
    line-height: 1.85;
    white-space: pre-wrap;
}

.mermaid-code-proof code span {
    display: inline-block;
    width: 2.2rem;
    color: #64748b;
    user-select: none;
}

.visio-proof {
    overflow: hidden;
    min-height: 310px;
    border: 8px solid #111827;
    border-radius: 9px;
    background: #2f3339;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.24);
}

.visio-proof__chrome,
.visio-proof__ribbon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 0 0.9rem;
    color: #cbd5e1;
    background: #171a1f;
    font-size: 0.72rem;
}

.visio-proof__chrome div {
    display: flex;
    gap: 0.75rem;
}

.visio-proof__ribbon {
    justify-content: flex-start;
    gap: 1rem;
    min-height: 36px;
    background: #22262c;
    color: #e5e7eb;
    font-size: 0.68rem;
}

.visio-proof__canvas {
    position: relative;
    height: 250px;
    margin: 0.75rem 1.05rem 1rem;
    background:
        linear-gradient(90deg, #f8fafc 0 68%, #55585d 68% 100%);
    border: 1px solid rgba(226, 232, 240, 0.12);
}

.visio-proof__canvas svg {
    position: absolute;
    inset: 0;
    width: 68%;
    height: 100%;
    fill: none;
    stroke: #475569;
    stroke-width: 2.5;
    z-index: 1;
}

.visio-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 110px;
    min-height: 42px;
    padding: 0.35rem 0.65rem;
    border-radius: 5px;
    color: #111827;
    background: #eeeefc;
    border: 1px solid #c7c9e9;
    font-size: 0.72rem;
    font-weight: 700;
}

.visio-node--start {
    top: 18px;
    left: 156px;
}

.visio-node--selected {
    top: 102px;
    left: 140px;
    background: #f5f3ff;
    border: 3px solid #6ea7be;
}

.visio-node--selected i {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 2px solid #4f9ab7;
}

.visio-node--selected i:nth-child(1) { top: -8px; left: -8px; }
.visio-node--selected i:nth-child(2) { top: -8px; right: -8px; }
.visio-node--selected i:nth-child(3) { bottom: -8px; left: -8px; }
.visio-node--selected i:nth-child(4) { bottom: -8px; right: -8px; }

.visio-node--side {
    bottom: 28px;
    left: 56px;
}

.visio-node--end {
    bottom: 28px;
    left: 220px;
}

.inner-page--mermaid-tool .cv-record-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
    gap: 1.35rem;
    padding: 0 0 clamp(2rem, 5vw, 4rem) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.security-proof-band {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--border-neutral);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.mermaid-support-band {
    display: grid;
    grid-template-columns: auto minmax(260px, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    background: #f8fcfb;
    border: 1px solid rgba(15, 118, 110, 0.22);
    box-shadow: 0 16px 36px rgba(15, 118, 110, 0.08);
}

.mermaid-support-band__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    color: #ffffff;
    background: #0f766e;
    font-size: 1.35rem;
}

.mermaid-support-band strong,
.mermaid-support-band span {
    display: block;
}

.mermaid-support-band strong {
    color: #0f2233;
    font-weight: 900;
}

.mermaid-support-band span {
    margin-top: 0.15rem;
    color: #52606d;
    line-height: 1.45;
}

.mermaid-commercial-ref {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-radius: 8px;
    color: #f8fafc;
    background:
        linear-gradient(135deg, rgba(17, 24, 39, 0.98), rgba(49, 46, 129, 0.94));
    border: 1px solid rgba(165, 180, 252, 0.34);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.18);
}

.mermaid-commercial-ref__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    color: #111827;
    background: #eef2ff;
    font-size: 1.45rem;
}

.mermaid-commercial-ref .tool-shell__eyebrow {
    color: #c4b5fd;
}

.mermaid-commercial-ref h2 {
    margin: 0.25rem 0 0;
    color: #ffffff;
    font-size: clamp(1.18rem, 1.7vw, 1.55rem);
    font-weight: 900;
    letter-spacing: 0;
}

.mermaid-commercial-ref p {
    max-width: 72ch;
    margin: 0.4rem 0 0;
    color: #dbeafe;
    line-height: 1.55;
}

.mermaid-commercial-ref .btn {
    white-space: nowrap;
}

.security-proof-band__icons {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #111827;
    font-size: 2rem;
}

.security-proof-band strong,
.security-proof-band span {
    display: block;
}

.security-proof-band strong {
    color: #050505;
    font-size: 1rem;
    font-weight: 900;
}

.security-proof-band span {
    color: #334155;
}

.diagram-type-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.9rem;
}

.diagram-type-strip span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #111827;
    font-size: 0.78rem;
    font-weight: 800;
}

.diagram-type-strip i {
    font-size: 1.35rem;
}

.tool-workbench-grid {
    grid-template-columns: minmax(0, 1.9fr) minmax(310px, 0.9fr);
    gap: 1rem;
}

.tool-panel {
    padding: 1.2rem !important;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--border-neutral);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
    min-width: 0;
}

.tool-panel--editor {
    background: rgba(255, 255, 255, 0.74);
}

.tool-panel__header--compact {
    align-items: flex-start;
}

.tool-panel__title {
    margin-top: 0.28rem;
    color: #050505;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 900;
    letter-spacing: 0;
}

.tool-editor-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    padding: 0.42rem;
    border: 1px solid rgba(99, 102, 241, 0.16);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(238, 242, 255, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(30, 41, 59, 0.06);
}

.tool-editor-links > * {
    max-width: 100%;
}

.mermaid-sample-control {
    position: relative;
    width: 10.5rem;
}

.mermaid-sample-control > i {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.9rem;
    color: #4f46e5;
    font-size: 0.95rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.mermaid-sample-select {
    width: 100%;
    min-height: 42px;
    padding: 0.55rem 2.35rem 0.55rem 2.45rem;
    border: 1px solid rgba(79, 70, 229, 0.22);
    border-radius: 10px;
    color: #312e81;
    background-color: rgba(255, 255, 255, 0.92);
    font-size: 0.88rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.05);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.mermaid-sample-select:hover {
    border-color: rgba(79, 70, 229, 0.5);
    box-shadow: 0 7px 16px rgba(79, 70, 229, 0.1);
}

.mermaid-sample-select:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 0.22rem rgba(79, 70, 229, 0.16);
}

.tool-editor-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 42px;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.tool-editor-action i {
    font-size: 1rem;
}

.tool-editor-action--clear {
    border: 1px solid rgba(71, 85, 105, 0.2);
    color: #334155;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.05);
}

.tool-editor-action--clear:hover {
    border-color: rgba(79, 70, 229, 0.38);
    color: #4338ca;
    background: #fff;
    box-shadow: 0 7px 16px rgba(79, 70, 229, 0.1);
    transform: translateY(-1px);
}

.tool-editor-action--check {
    margin-left: auto;
    border: 1px solid transparent;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 58%, #0ea5e9 135%);
    box-shadow: 0 8px 18px rgba(67, 56, 202, 0.24);
}

.tool-editor-action--check:hover:not(:disabled) {
    color: #fff;
    background: linear-gradient(135deg, #4338ca 0%, #1d4ed8 58%, #0284c7 135%);
    box-shadow: 0 11px 22px rgba(67, 56, 202, 0.3);
    transform: translateY(-1px);
}

.tool-editor-action--check:disabled {
    border-color: rgba(148, 163, 184, 0.2);
    color: #64748b;
    background: #e2e8f0;
    box-shadow: none;
    opacity: 1;
}

.tool-editor-action:focus-visible {
    outline: 3px solid rgba(79, 70, 229, 0.28);
    outline-offset: 2px;
}

.tool-analysis-toggle {
    padding: 0;
    color: #111827 !important;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none !important;
    white-space: normal;
}

.editor-upload-zone {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 76px;
    padding: 0.95rem 1rem;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    color: #111827;
    background: rgba(248, 250, 252, 0.86);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.editor-upload-zone:hover,
.editor-upload-zone:focus-within {
    border-color: var(--accent-primary);
    background: rgba(245, 243, 255, 0.94);
    box-shadow: 0 10px 24px rgba(63, 43, 232, 0.08);
}

.editor-upload-zone--locked {
    cursor: default;
    border-style: solid;
    border-color: rgba(99, 102, 241, 0.26);
    background: rgba(238, 242, 255, 0.92);
}

.editor-upload-zone--locked:hover,
.editor-upload-zone--locked:focus-within {
    border-color: rgba(99, 102, 241, 0.34);
    background: rgba(238, 242, 255, 0.92);
    box-shadow: none;
}

.editor-upload-zone--locked i {
    background: #111827;
}

.editor-upload-zone--locked a {
    color: var(--accent-primary);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.editor-upload-zone i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: #fff;
    background: var(--accent-primary);
    font-size: 1.2rem;
    flex: 0 0 42px;
}

.editor-upload-zone span,
.editor-upload-zone strong,
.editor-upload-zone em {
    display: block;
}

.editor-upload-zone strong {
    font-weight: 900;
}

.editor-upload-zone em {
    margin-top: 0.12rem;
    color: #64748b;
    font-style: normal;
    font-size: 0.82rem;
}

.code-editor-shell {
    min-height: 390px;
}

.code-editor-body {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 352px;
    background: #111827;
}

.code-line-numbers {
    display: grid;
    grid-template-rows: repeat(18, 1.4rem);
    gap: 0.1rem;
    padding: 1rem 0.75rem;
    color: #64748b;
    background: #101722;
    font-family: "Fira Code", Consolas, monospace;
    font-size: 0.82rem;
    text-align: right;
    user-select: none;
}

.tool-textarea {
    min-height: 352px;
    height: 100%;
    padding: 1rem 1.1rem;
    resize: vertical;
    color: #f8fafc !important;
    background: #111827 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    caret-color: #a5b4fc;
    font-size: 0.92rem;
    line-height: 1.55;
}

.tool-textarea::placeholder {
    color: #94a3b8;
}

.inner-page--mermaid-tool .code-editor-body textarea.form-control.tool-textarea {
    color: #f8fafc !important;
    background-color: #111827 !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.inner-page--mermaid-tool .code-editor-body textarea.form-control.tool-textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

.tool-actions-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.tool-generate-btn {
    width: min(520px, 100%);
    min-height: 48px;
    font-weight: 900 !important;
}

.tool-actions-row__hint {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 700;
}

.tool-upload-help {
    color: #475569;
    line-height: 1.65;
}

.tool-upload-help code,
.tool-upload-help span {
    color: #be185d;
}

.tool-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    border-radius: 8px;
}

.tool-limit-callout {
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
}

.visually-hidden-file {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The native file input covers only the visible picker action. This sends the
   trusted pointer gesture straight to Chromium instead of waiting for label
   default activation after Blazor's delegated event path. */
.converter-file-picker__native {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.converter-file-picker__native:disabled {
    cursor: not-allowed;
}

.converter-file-picker__name {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.converter-file-picker__size {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Shared file-selection workflow for every converter page. */
.reverse-converter__promise {
    align-self: center;
    display: grid;
    gap: 0.75rem;
    padding: 2rem;
    border: 1px solid rgba(92, 75, 255, 0.2);
    border-radius: 1.4rem;
    background: linear-gradient(145deg, rgba(92, 75, 255, 0.12), rgba(22, 163, 174, 0.08));
    box-shadow: 0 24px 60px rgba(30, 41, 59, 0.12);
}

.reverse-converter__promise strong { font-size: 1.35rem; }
.reverse-converter__promise span { font-size: 1.05rem; }
.reverse-converter__promise small { color: #64748b; line-height: 1.55; }

.reverse-converter__status {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
}

.reverse-converter__status.is-ready { color: #166534; background: #dcfce7; }
.reverse-converter__status.is-locked { color: #92400e; background: #fef3c7; }

.reverse-converter__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.reverse-converter__grid .tool-panel {
    padding: 1.4rem !important;
    border: 1px solid #e2e8f0;
    border-radius: 1.1rem;
    background: #fff;
}

.reverse-converter__drop {
    position: relative;
    min-height: 220px;
    margin: 1rem 0;
    padding: 1.5rem;
    border: 2px dashed #6d5dfc;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    text-align: center;
    cursor: pointer;
    color: #1e293b;
    background: linear-gradient(145deg, #fafaff, #f5f3ff);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.06);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.reverse-converter__drop:hover,
.reverse-converter__drop:focus-within {
    border-color: #4338ca;
    background: #f5f3ff;
    box-shadow: 0 12px 28px rgba(67, 56, 202, 0.16);
    transform: translateY(-1px);
}

.reverse-converter__select-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: min(260px, 100%);
    min-height: 48px;
    padding: 0.72rem 1.15rem;
    border-radius: 0.7rem;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    box-shadow: 0 9px 20px rgba(67, 56, 202, 0.28);
    font-weight: 900;
    line-height: 1.2;
}

.reverse-converter__select-action i { font-size: 1.15rem; }
.reverse-converter__select-spinner { display: none; }
.reverse-converter__drop.is-opening {
    border-color: #2563eb;
    background: #eef2ff;
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.2);
    transform: translateY(-1px);
}
.reverse-converter__drop.is-opening .reverse-converter__select-icon { display: none; }
.reverse-converter__drop.is-opening .reverse-converter__select-spinner { display: inline-block; }
.reverse-converter__drop > strong { font-size: 1rem; font-weight: 900; }
.reverse-converter__drop > span:last-child { color: #64748b; font-size: 0.88rem; line-height: 1.5; }

.reverse-converter__drop.is-disabled {
    cursor: not-allowed;
    border-style: solid;
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: none;
    transform: none;
}

.reverse-converter__drop.is-disabled .reverse-converter__select-action {
    color: #64748b;
    background: #e2e8f0;
    box-shadow: none;
}

.reverse-converter__next-step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.8rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #c7d2fe;
    border-radius: 0.75rem;
    color: #3730a3;
    background: #eef2ff;
    font-size: 0.86rem;
    line-height: 1.4;
}

.reverse-converter__next-step.is-ready {
    border-color: #a7f3d0;
    color: #166534;
    background: #ecfdf5;
}

.reverse-converter__step-number {
    display: inline-grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: #fff;
    background: #4f46e5;
    font-weight: 900;
}

.reverse-converter__next-step.is-ready .reverse-converter__step-number { background: #16a34a; }

.reverse-converter__primary-action {
    min-height: 48px;
    font-weight: 900 !important;
}

.reverse-converter__action-idle,
.reverse-converter__action-busy {
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}

.reverse-converter__action-idle { display: inline-flex; }
.reverse-converter__action-busy { display: none; }
.reverse-converter__primary-action.is-client-busy .reverse-converter__action-idle,
.reverse-converter__primary-action.is-server-busy .reverse-converter__action-idle { display: none; }
.reverse-converter__primary-action.is-client-busy .reverse-converter__action-busy,
.reverse-converter__primary-action.is-server-busy .reverse-converter__action-busy { display: inline-flex; }

.reverse-converter__primary-action:disabled {
    border-color: #cbd5e1;
    color: #475569;
    background: #e2e8f0;
    box-shadow: none;
    opacity: 1;
}

.reverse-converter__gate { display: flex; gap: 0.8rem; margin: 1rem 0; padding: 0.9rem; border-radius: 0.8rem; background: #fff7ed; color: #9a3412; }
.reverse-converter__gate div { display: grid; gap: 0.2rem; }
.reverse-converter__gate span { font-size: 0.88rem; }
.reverse-converter__example pre,
.reverse-converter__source { min-height: 285px; padding: 1rem; border-radius: 0.8rem; background: #111827; color: #e5e7eb; font: 500 0.86rem/1.65 "Fira Code", monospace; }
.reverse-converter__example > span { display: inline-flex; margin-bottom: 0.65rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: #ede9fe; color: #5b21b6; font-size: 0.78rem; font-weight: 800; }
.reverse-converter__metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.reverse-converter__metrics span { display: grid; padding: 0.7rem; border-radius: 0.7rem; background: #f8fafc; color: #64748b; font-size: 0.75rem; }
.reverse-converter__metrics strong { color: #1e293b; font-size: 1.05rem; }
.reverse-converter__actions { display: flex; justify-content: flex-end; gap: 0.65rem; margin-top: 0.8rem; }
.reverse-converter__preview { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px solid #e2e8f0; }
.reverse-converter__preview-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.reverse-converter__preview-header h4 { margin: 0.15rem 0 0; font-size: 1.05rem; }
.reverse-converter__preview .mermaid-preview-canvas { min-height: 360px; }
.reverse-converter__report { display: grid; gap: 0.4rem; margin-top: 1rem; padding: 1rem; border-radius: 0.8rem; background: #f8fafc; }
.reverse-converter__report ul { margin: 0.35rem 0 0; padding-left: 1.2rem; color: #64748b; }
.reverse-converter__commercial { margin-top: 1.4rem; padding: 1.4rem; border-radius: 1rem; background: linear-gradient(135deg, #eef2ff, #ecfeff); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.reverse-converter__commercial h2 { margin: 0.25rem 0 0.45rem; font-size: 1.35rem; }
.reverse-converter__commercial p { margin: 0; max-width: 780px; }
.reverse-converter__commercial-actions { display: flex; gap: 0.65rem; flex-shrink: 0; }

.editor-upload-zone__action {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.65rem 0.95rem;
    border-radius: 0.65rem;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    box-shadow: 0 8px 18px rgba(67, 56, 202, 0.24);
    font-weight: 900;
}

.editor-upload-zone__action i {
    display: inline-block;
    width: auto;
    height: auto;
    color: inherit;
    background: transparent;
    font-size: 1rem;
    flex: none;
}

.editor-upload-zone__details {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 900px) {
    .reverse-converter__grid { grid-template-columns: 1fr; }
    .reverse-converter__commercial { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 600px) {
    .reverse-converter__metrics { grid-template-columns: repeat(2, 1fr); }
    .reverse-converter__actions,
    .reverse-converter__commercial-actions { width: 100%; flex-direction: column; }
    .reverse-converter__preview-header { align-items: flex-start; flex-direction: column; }
    .reverse-converter__preview .mermaid-preview-canvas { min-height: 280px; }
    .editor-upload-zone { align-items: stretch; flex-direction: column; }
    .editor-upload-zone__action { width: 100%; }
}

.tool-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    color: #334155;
    background: #f8fafc;
    border: 1px solid var(--border-neutral);
    font-size: 0.82rem;
}

.tool-placeholder-state {
    min-height: 180px;
    border-radius: 8px;
    color: #475569;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px var(--border-neutral);
}

.tool-placeholder-state > i {
    color: #111827;
    font-size: 2.2rem;
}

.tool-readiness-badge {
    border-radius: 8px;
    justify-content: flex-start;
    font-family: "Fira Code", Consolas, monospace;
    font-size: 0.85rem;
}

.tool-readiness-badge--good {
    color: #065f46;
    background: #ecfdf5;
    box-shadow: inset 0 0 0 1px #a7f3d0;
}

.tool-readiness-badge--warn {
    color: #92400e;
    background: #fffbeb;
    box-shadow: inset 0 0 0 1px #fde68a;
}

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

.tool-result-item {
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px var(--border-neutral);
}

.tool-result-item__label {
    color: #64748b;
}

.tool-result-item strong {
    color: #111827;
}

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

.mermaid-help-steps {
    display: grid;
    gap: 0.8rem;
    margin: 0;
    padding-left: 1.2rem;
}

.mermaid-help-steps li {
    padding-left: 0.2rem;
    color: #334155;
}

.mermaid-help-steps strong,
.mermaid-help-steps span {
    display: block;
}

.mermaid-help-steps strong {
    color: #111827;
    font-weight: 900;
}

.mermaid-help-steps span {
    margin-top: 0.12rem;
    line-height: 1.55;
}

.mermaid-help-list {
    display: grid;
    gap: 0.75rem;
}

.mermaid-help-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.9rem;
    border-radius: 8px;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px var(--border-neutral);
}

.mermaid-help-list i {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: #fff;
    background: #111827;
    font-size: 1.1rem;
}

.mermaid-help-list strong,
.mermaid-help-list span {
    display: block;
}

.mermaid-help-list strong {
    color: #111827;
    font-weight: 900;
}

.mermaid-help-list span {
    margin-top: 0.12rem;
    color: #475569;
    line-height: 1.5;
}

.mermaid-help-accordion .accordion-item {
    border-color: var(--border-neutral);
}

.mermaid-help-accordion .accordion-button {
    color: #111827;
    font-weight: 800;
    letter-spacing: 0;
}

.mermaid-help-accordion .accordion-body {
    color: #475569;
    line-height: 1.65;
}

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

@media (max-width: 991.98px) {
    .mermaid-help-grid,
    .mermaid-management-grid {
        grid-template-columns: 1fr;
    }
}

.tool-plan-meter {
    border-radius: 8px;
    color: #1e293b;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px var(--border-neutral);
}

.tool-list-block {
    border-radius: 8px;
    font-size: 0.85rem;
}

.tool-next-step-callout,
.tool-download-callout {
    border-radius: 8px;
    color: #334155;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px var(--border-neutral);
}

.tool-download-callout {
    background: #ecfdf5;
}

.mermaid-commercial-strip {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
    padding: clamp(1.2rem, 2.4vw, 2rem);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--border-neutral);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.mermaid-commercial-strip h2 {
    color: #050505;
    font-weight: 900;
    letter-spacing: 0;
}

.mermaid-commercial-strip p {
    color: #475569;
}

.mermaid-plan-card {
    gap: 0.65rem;
    padding: 1.2rem;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #13243d, #0f335a);
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
}

.mermaid-plan-card__label {
    width: fit-content;
    padding: 0.34rem 0.58rem;
    border-radius: 999px;
    color: #0f172a;
    background: #dbeafe;
    letter-spacing: 0.05em;
}

.mermaid-plan-card strong {
    font-size: 1.35rem;
}

.mermaid-plan-card ul {
    display: grid;
    gap: 0.34rem;
    margin: 0.15rem 0 0.35rem;
    padding-left: 1.15rem;
    color: #e2e8f0;
}

.mermaid-plan-card .btn {
    width: 100%;
    box-shadow: 0 16px 30px rgba(63, 43, 232, 0.28);
}

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

.mermaid-growth-grid article {
    min-height: 230px;
    padding: 1.25rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--border-neutral);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.mermaid-growth-grid i {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    color: #111827;
    background: transparent;
    box-shadow: none;
    font-size: 2rem;
}

.mermaid-growth-grid h3 {
    color: #050505;
    font-size: 1.28rem;
    font-weight: 900;
}

.mermaid-growth-grid p {
    color: #334155;
    font-size: 0.98rem;
}

.mermaid-growth-grid--paid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(960px, 100%);
    margin-inline: auto;
}

.mermaid-growth-grid--launch {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1400px, 100%);
    margin-inline: auto;
}

.mermaid-pricing-header {
    align-items: flex-end;
    gap: 1.25rem;
}

.mermaid-billing-toggle {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0 1.25rem;
}

.mermaid-checkout-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.mermaid-checkout-steps li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    color: var(--bs-secondary-color);
}

.mermaid-checkout-steps strong {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--bs-secondary-bg);
}

.mermaid-checkout-steps .is-current,
.mermaid-checkout-steps .is-complete {
    border-color: #0f766e;
    color: var(--bs-body-color);
}

.mermaid-checkout-steps .is-current strong,
.mermaid-checkout-steps .is-complete strong {
    background: #0f766e;
    color: #fff;
}

@media (max-width: 575.98px) {
    .mermaid-checkout-steps { grid-template-columns: 1fr; }
}

.mermaid-billing-toggle .btn {
    min-width: 9rem;
}

.mermaid-pricing-card {
    position: relative;
}

.mermaid-pricing-card--recommended {
    border-color: rgba(63, 43, 232, 0.42) !important;
    box-shadow: 0 20px 48px rgba(63, 43, 232, 0.14) !important;
    transform: translateY(-0.2rem);
}

.mermaid-pricing-card__previous,
.mermaid-pricing-card__equivalent {
    min-height: 2.2rem;
    margin: -0.25rem 0 0.75rem;
    color: var(--bs-secondary-color);
    font-size: 0.88rem;
}

.mermaid-pricing-card__previous {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.mermaid-pricing-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.32rem 0.62rem;
    border-radius: 999px;
    color: #ffffff;
    background: #3f2be8;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.cw-footer__profile-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.85rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.92);
}

.cw-footer__profile-card img {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    object-fit: cover;
}

.cw-footer__profile-card strong,
.cw-footer__profile-card span {
    display: block;
}

.cw-footer__profile-card strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 900;
}

.cw-footer__profile-card span {
    color: #475569;
    font-size: 0.82rem;
    line-height: 1.3;
}

.cw-footer--engineering-tool {
    margin-top: 0;
    padding-bottom: 1rem;
    background: #e5e7eb;
}

.cw-footer--engineering-tool .cw-footer__shell {
    border-radius: 0;
    background: #e5e7eb;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.cw-footer--engineering-tool .cw-footer__shell::before,
.cw-footer--engineering-tool .cw-footer__privacy-art {
    display: none;
}

.cw-footer--engineering-tool .cw-footer__cta {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid #d1d5db;
    box-shadow: none;
}

.cw-footer--engineering-tool .cw-footer__cta h2,
.cw-footer--engineering-tool .cw-footer__col h4,
.cw-footer--engineering-tool .cw-footer__copyright strong {
    color: #111827 !important;
    letter-spacing: 0;
}

.cw-footer--engineering-tool .cw-footer__cta p,
.cw-footer--engineering-tool .cw-footer__eyebrow,
.cw-footer--engineering-tool .cw-footer__text,
.cw-footer--engineering-tool .cw-footer__links a,
.cw-footer--engineering-tool .cw-footer__contact-list a,
.cw-footer--engineering-tool .cw-footer__copyright {
    color: #334155;
}

.cw-footer--engineering-tool .cw-footer__cta-btn {
    border-radius: 8px !important;
    background: var(--accent-primary) !important;
    box-shadow: 0 16px 28px rgba(63, 43, 232, 0.18);
}

.cw-footer--engineering-tool .cw-footer__secondary-btn,
.cw-footer--engineering-tool .cw-footer__privacy-chip,
.cw-footer--engineering-tool .cw-footer__social-links a,
.cw-footer--engineering-tool .cw-footer__icon-badge {
    border-radius: 8px !important;
    color: #111827 !important;
    background: #f8fafc !important;
    box-shadow: inset 0 0 0 1px #d1d5db;
}

.cw-footer--engineering-tool .cw-footer__bottom {
    background: transparent;
    border-top-color: #d1d5db;
}

@media (max-width: 1199.98px) {
    .mermaid-growth-grid--launch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mermaid-product-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .mermaid-product-hero__proof {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .page-main--engineering-tool {
        padding-top: 4.15rem !important;
    }

    .security-proof-band,
    .mermaid-support-band,
    .mermaid-commercial-ref,
    .mermaid-commercial-strip,
    .tool-workbench-grid,
    .mermaid-growth-grid {
        grid-template-columns: 1fr;
    }

    .diagram-type-strip {
        justify-content: flex-start;
    }

    .tool-panel__header--compact {
        flex-direction: column;
    }

    .tool-editor-links {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .page--engineering-chrome .site-navbar__inner,
    .page--engineering-tool .site-navbar__inner {
        border-radius: 0;
    }

    .mermaid-product-hero {
        padding-top: 0.75rem;
    }

    .mermaid-product-hero__copy h1 {
        font-size: clamp(2.15rem, 11vw, 3.25rem);
    }

    .security-proof-band,
    .mermaid-support-band {
        align-items: flex-start;
    }

    .code-editor-body {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .code-line-numbers {
        padding-inline: 0.55rem;
        font-size: 0.72rem;
    }

    .tool-textarea {
        font-size: 0.82rem;
    }

    .visio-proof {
        border-width: 5px;
    }

    .visio-proof__canvas {
        transform-origin: top left;
        overflow: hidden;
    }

    .tool-plan-meter,
    .security-proof-band__icons {
        align-items: flex-start;
        flex-direction: column;
    }

    .tool-plan-meter .btn,
    .mermaid-plan-card .btn,
    .tool-generate-btn {
        width: 100%;
    }

    .tool-editor-links {
        display: grid;
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
        gap: 0.45rem;
    }

    .mermaid-sample-control {
        grid-column: 1 / -1;
        width: 100%;
    }

    .tool-editor-action {
        width: 100%;
        padding-inline: 0.65rem;
    }

    .tool-editor-action--check {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mermaid-sample-select,
    .tool-editor-action {
        transition: none;
    }

    .tool-editor-action--clear:hover,
    .tool-editor-action--check:hover:not(:disabled) {
        transform: none;
    }
}

/* =========================================================
   Creative Studio / channel-only landing page (not linked in main nav)
   ========================================================= */
.channel-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 16%, rgba(226, 138, 88, 0.26), transparent 25%),
        radial-gradient(circle at 86% 12%, rgba(113, 148, 218, 0.26), transparent 24%),
        radial-gradient(circle at 54% 78%, rgba(233, 187, 115, 0.17), transparent 30%),
        linear-gradient(180deg, #211923 0%, #2b2030 28%, #21304a 62%, #172232 100%);
    color: #f7f2eb;
}

.channel-page--card-shell {
    min-height: auto;
    width: min(100% - 2rem, 1480px);
    margin: 2rem auto 3rem;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 28px 70px rgba(5, 8, 18, 0.32);
}

.channel-page section,
.channel-page .section {
    background: transparent !important;
    color: inherit !important;
}

.channel-hero,
.channel-story,
.channel-mission,
.channel-playlist,
.channel-commission,
.channel-feedback,
.channel-cta-strip {
    position: relative;
}

.channel-hero {
    overflow: hidden;
    padding: clamp(4.8rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4rem);
}

.channel-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 12, 18, 0.28) 0%, rgba(18, 16, 25, 0.11) 38%, rgba(20, 22, 32, 0) 100%),
        linear-gradient(180deg, rgba(255, 246, 228, 0.16) 0%, rgba(86, 113, 155, 0.10) 100%),
        url('/img/creative-studio-forest.webp') center 28% / cover no-repeat;
    opacity: 1;
    filter: brightness(1.34) saturate(1.12);
    pointer-events: none;
}

.channel-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('/img/creative-studio-sacred-geometry.jpg') center / 680px auto repeat;
    opacity: 0.06;
    mix-blend-mode: screen;
    pointer-events: none;
}

.channel-hero__ambient {
    position: absolute;
    border-radius: 999px;
    filter: blur(50px);
    opacity: 0.55;
}

.channel-hero__ambient--one {
    top: 6rem;
    left: -4rem;
    width: 18rem;
    height: 18rem;
    background: rgba(92, 121, 240, 0.35);
}

.channel-hero__ambient--two {
    top: 2rem;
    right: -2rem;
    width: 15rem;
    height: 15rem;
    background: rgba(223, 76, 98, 0.25);
}

.channel-hero__ambient--three {
    bottom: 1rem;
    left: 34%;
    width: 20rem;
    height: 10rem;
    background: rgba(215, 171, 103, 0.18);
}

.channel-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 920px;
    padding: clamp(1.15rem, 2vw, 1.8rem);
    border-radius: 28px;
    background: linear-gradient(90deg, rgba(14, 12, 18, 0.36), rgba(14, 12, 18, 0.13) 64%, rgba(14, 12, 18, 0));
}

.channel-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    color: rgba(255, 248, 238, 0.84);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.channel-kicker--soft {
    background: rgba(231, 188, 118, 0.12);
    color: #f0dec1;
}

.channel-title {
    margin: 1.15rem 0 0.95rem;
    color: #fffaf3;
    font-size: clamp(2.5rem, 4vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.channel-subtitle {
    margin: 0;
    max-width: 760px;
    color: rgba(247, 239, 229, 0.86);
    font-size: 1.12rem;
    line-height: 1.9;
}

.channel-hero__quote {
    max-width: 720px;
    margin: 1.25rem 0 0;
    padding-left: 1rem;
    border-left: 2px solid rgba(226, 183, 116, 0.55);
    color: rgba(242, 221, 191, 0.94);
    font-size: 1.03rem;
    line-height: 1.85;
    font-style: italic;
}

.channel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.8rem;
}

.channel-btn-primary,
.channel-btn-secondary,
.channel-btn-support {
    min-height: 52px;
    padding-inline: 1.2rem;
    border-radius: 999px !important;
    font-weight: 800 !important;
}

.channel-btn-primary {
    box-shadow: 0 18px 32px rgba(179, 28, 52, 0.24);
}

.channel-btn-support {
    color: #2e1d0a !important;
    background: linear-gradient(135deg, #f5ddb1, #e8b96c) !important;
    border: 0 !important;
    box-shadow: 0 18px 38px rgba(210, 154, 66, 0.26);
}

.channel-btn-support:hover,
.channel-btn-support:focus {
    color: #241506 !important;
    background: linear-gradient(135deg, #f8e6c3, #efc580) !important;
}

.channel-story,
.channel-mission,
.channel-playlist,
.channel-commission,
.channel-feedback {
    padding: 0 0 2.5rem;
}

.channel-story__intro {
    max-width: 860px;
    margin-bottom: 1.5rem;
}

.channel-story__intro h2,
.channel-mission__panel h2,
.channel-commission__panel h2,
.channel-cta-strip__inner h3 {
    margin: 0 0 0.8rem;
    color: #fff8f0;
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    font-weight: 850;
    letter-spacing: -0.03em;
}

.channel-story__intro p,
.channel-mission__panel p,
.channel-commission__panel p,
.channel-cta-strip__inner p {
    margin: 0;
    color: rgba(241, 232, 219, 0.82);
    font-size: 1rem;
    line-height: 1.85;
}

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

.channel-card,
.channel-mission__panel,
.channel-commission__panel,
.channel-feedback__panel,
.channel-cta-strip__inner,
.channel-list-card {
    position: relative;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 40px rgba(6, 11, 22, 0.25);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.channel-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.35rem 1.4rem;
}

.channel-card--warm {
    background: linear-gradient(180deg, rgba(214, 154, 103, 0.16), rgba(255, 255, 255, 0.03));
}

.channel-card--romance {
    background: linear-gradient(180deg, rgba(153, 71, 88, 0.18), rgba(255, 255, 255, 0.03));
}

.channel-card--pulse {
    background: linear-gradient(180deg, rgba(88, 109, 180, 0.18), rgba(255, 255, 255, 0.03));
}

.channel-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #f5f7ff;
    font-size: 1.2rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.channel-card h3,
.channel-list-card h3 {
    margin: 0;
    color: #fff;
    font-size: 1.16rem;
    font-weight: 800;
}

.channel-card p {
    margin: 0;
    color: rgba(233, 238, 251, 0.8);
    line-height: 1.8;
}

.channel-mission__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr;
    gap: 1rem;
}

.channel-mission__panel,
.channel-commission__panel,
.channel-feedback__panel {
    padding: 1.55rem 1.6rem;
}

.channel-mission__panel--accent {
    background: linear-gradient(180deg, rgba(202, 149, 75, 0.18), rgba(255, 255, 255, 0.04));
}

.channel-mission__panel--accent::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(14, 11, 18, 0.08), rgba(14, 11, 18, 0.22)),
        url('/img/creative-studio-sacred-geometry.jpg') center / cover no-repeat;
    opacity: 0.10;
    pointer-events: none;
}

.channel-mission__panel > *,
.channel-commission__panel > *,
.channel-feedback__panel > *,
.channel-cta-strip__inner > * {
    position: relative;
    z-index: 1;
}

.channel-manifesto__chips,
.channel-commission__ideas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.15rem;
}

.channel-manifesto__chips span,
.channel-commission__ideas span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(244, 246, 255, 0.88);
    font-size: 0.84rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.channel-support__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.channel-support__note {
    color: rgba(245, 231, 208, 0.74);
    font-size: 0.94rem;
    line-height: 1.7;
}

.channel-list-card {
    padding: 1.3rem 1.35rem;
}

.channel-list-card h3 {
    margin: 0 0 0.85rem;
}

.channel-list-card ul {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.channel-list-card li {
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(237, 241, 251, 0.88);
    line-height: 1.65;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.channel-story__intro--feedback {
    max-width: 860px;
    margin-bottom: 1.15rem;
}

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

.channel-feedback__field {
    min-width: 0;
}

.channel-feedback__field--full {
    grid-column: 1 / -1;
}

.channel-feedback__field label {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: rgba(246, 248, 255, 0.9);
    font-size: 0.92rem;
    font-weight: 700;
}

.channel-feedback__input,
.channel-feedback__textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.channel-feedback__input {
    min-height: 52px;
    padding: 0.9rem 1rem;
}

.channel-feedback__textarea {
    min-height: 220px;
    padding: 1rem;
}

.channel-feedback__input::placeholder,
.channel-feedback__textarea::placeholder {
    color: rgba(235, 239, 250, 0.52);
}

.channel-feedback__input:focus,
.channel-feedback__textarea:focus {
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.08) !important;
}

.channel-feedback .validation-message,
.channel-feedback .field-validation-error {
    color: #ffb6c1;
    font-size: 0.84rem;
}

.channel-feedback__alert {
    margin-top: 1rem;
    border-radius: 14px;
}

.channel-feedback__actions,
.channel-cta-strip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.channel-feedback__actions {
    justify-content: flex-end;
    margin-top: 1rem;
}

.channel-cta-strip {
    padding: 0 0 4rem;
}

.channel-cta-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 1.4rem 1.5rem;
}

@media (max-width: 991.98px) {
    .channel-grid,
    .channel-playlist__grid,
    .channel-feedback__grid,
    .channel-mission__grid {
        grid-template-columns: 1fr;
    }

    .channel-cta-strip__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .channel-hero {
        padding: 4.6rem 0 3.1rem;
    }

    .channel-title {
        font-size: 2.5rem;
    }

    .channel-subtitle {
        font-size: 1rem;
    }

    .channel-actions,
    .channel-cta-strip__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .channel-btn-primary,
    .channel-btn-secondary,
    .channel-btn-support {
        width: 100%;
        justify-content: center;
    }
}

.inner-page--contact .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-shell__intro {
    max-width: 760px;
    margin: 0 auto;
}

.contact-shell__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.contact-shell__intro-text {
    margin: 0.9rem 0 0;
    color: var(--site-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.contact-shell__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
    gap: 1rem;
}

.contact-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.35rem 1.45rem !important;
}

.contact-panel__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 1.3rem;
}

.contact-panel__title {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: 1.25rem;
    font-weight: 800;
}

.contact-panel__text {
    margin: 0;
    color: var(--site-ink-soft);
    line-height: 1.8;
}

.contact-info-list {
    display: grid;
    gap: 0.9rem;
}

.contact-info-item {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: rgba(242, 247, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.92);
    color: var(--site-ink);
    text-decoration: none;
}

.contact-info-item:hover {
    color: var(--site-blue);
}

.contact-info-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: #fff;
    color: var(--site-blue);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.9);
}

.contact-info-item__content {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.contact-info-item__content strong {
    color: var(--site-ink-strong);
    font-size: 0.92rem;
}

.contact-panel__note {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.78rem 0.95rem;
    border-radius: 14px;
    background: rgba(249, 251, 255, 0.95);
    color: var(--site-ink-soft);
    box-shadow: inset 0 0 0 1px rgba(215, 226, 246, 0.9);
}

.contact-panel__note i {
    color: var(--site-blue);
}

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

.contact-field {
    min-width: 0;
}

.contact-field--full {
    grid-column: 1 / -1;
}

.contact-field label {
    display: inline-block;
    margin-bottom: 0.45rem;
    color: var(--site-ink-strong);
    font-size: 0.92rem;
    font-weight: 700;
}

.contact-panel--form .contact-input,
.contact-panel--form .contact-textarea,
.contact-panel--form .contact-textarea.e-input-group,
.contact-panel--form .contact-textarea .e-input,
.contact-panel--form .form-control {
    width: 100% !important;
    border: 1px solid rgba(194, 213, 243, 0.95) !important;
    border-radius: 16px !important;
    background: rgba(249, 251, 255, 0.98) !important;
    color: var(--site-ink-strong) !important;
    box-shadow: none !important;
}

.contact-panel--form .contact-input {
    min-height: 52px;
    padding: 0.9rem 1rem;
}

.contact-panel--form .contact-textarea,
.contact-panel--form .contact-textarea textarea,
.contact-panel--form .contact-textarea .e-input {
    min-height: 220px;
    font-size: 1rem !important;
}

.contact-panel--form .contact-input:focus,
.contact-panel--form .form-control:focus,
.contact-panel--form .contact-textarea:focus,
.contact-panel--form .contact-textarea .e-input:focus {
    border-color: rgba(83, 132, 212, 0.92) !important;
    box-shadow: 0 0 0 0.25rem rgba(75, 124, 206, 0.12) !important;
}

.contact-panel--form .validation-message,
.contact-panel--form .validation-errors,
.contact-panel--form .validation-message,
.contact-panel--form .field-validation-error {
    color: #c94b63;
    font-size: 0.85rem;
}

.contact-alert {
    margin-top: 1rem;
    border-radius: 14px;
}

.contact-actions {
    margin-top: 1rem;
}

.contact-submit-btn {
    min-width: 220px;
    min-height: 52px;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: 0 14px 26px rgba(40, 91, 176, 0.16);
}

@media (max-width: 991.98px) {
    .contact-shell__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .contact-submit-btn {
        width: 100%;
    }
}

.inner-page--booking .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.booking-shell__intro {
    max-width: 720px;
    margin: 0 auto;
}

.booking-shell__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.booking-shell__description {
    margin: 0.9rem auto 0;
    color: var(--site-ink-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.inner-page--booking .booking-panel {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(340px, 1.15fr);
    gap: 1rem;
    align-items: stretch;
}

.booking-panel__column {
    min-width: 0;
}

.inner-page--booking .booking-card {
    min-height: 100%;
    padding: 1.35rem;
}

.booking-card--calendar {
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-card--calendar .e-calendar,
.booking-card--calendar .e-calendar-container,
.booking-card--calendar .e-content {
    width: 100%;
}

.booking-card--slots {
    text-align: left !important;
    align-items: stretch !important;
}

.booking-card__title {
    color: var(--site-ink-strong) !important;
    font-size: 1.15rem;
    font-weight: 800;
}

.booking-card__subtitle {
    margin: 0 0 1rem;
    color: var(--site-ink-soft);
    line-height: 1.7;
}

.booking-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, max-content));
    gap: 0.75rem;
    justify-content: start;
    width: 100%;
}

.booking-slot-grid .e-btn,
.booking-slot-grid .btn-outline-primary {
    min-height: 44px;
}

.booking-confirmation-wrap {
    display: flex;
    justify-content: center;
}

.booking-confirmation-wrap .confirmation-card {
    width: min(620px, 100%);
}

.inner-page--blog {
    gap: 0.2625rem;
}

.inner-page--blog .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inner-page--blog .blog-shell__intro {
    margin: 0;
    text-align: center;
    color: var(--site-ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

.inner-page--blog .blog-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1rem;
}

.inner-page--blog .blog-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.inner-page--blog .blog-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(191, 209, 239, 0.9);
    background: rgba(248, 251, 255, 0.95);
    color: var(--site-blue);
    font-size: 0.92rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.inner-page--blog .blog-filter-chip:hover,
.inner-page--blog .blog-filter-chip.active {
    background: linear-gradient(135deg, #225bb0, #2f72d0);
    border-color: rgba(38, 88, 167, 0.9);
    color: #fff;
    box-shadow: 0 14px 24px rgba(40, 91, 176, 0.16);
}

.inner-page--blog .blog-toolbar__meta {
    color: var(--site-ink-soft);
    font-size: 0.9rem;
    font-weight: 600;
}

.inner-page--blog .blog-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inner-page--blog .blog-load-more {
    display: flex;
    justify-content: center;
    margin-top: 0.35rem;
}

.inner-page--about {
    gap: 0.2625rem;
}

.inner-page--admin-blog {
    gap: 0.2625rem;
}

.inner-page--admin-blog .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-shell__lead {
    max-width: 780px;
    margin: 0 auto;
}

.admin-shell__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.admin-shell__lead-text {
    margin: 0.9rem 0 0;
    color: var(--site-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

.admin-blog-section {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.admin-blog-section__header h3 {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: 1.15rem;
    font-weight: 800;
}

.inner-page--about .cv-record-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-shell__lead {
    max-width: 760px;
    margin: 0 auto;
}

.about-shell__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.38rem 0.78rem;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.about-shell__lead-text {
    margin: 0.9rem 0 0;
    color: var(--site-ink-soft);
    font-size: 1rem;
    line-height: 1.8;
}

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

.about-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    padding: 1.15rem 1.2rem !important;
}

.about-card__icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: rgba(241, 247, 255, 0.98);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
    color: var(--site-blue);
    font-size: 1.2rem;
}

.about-card__title {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: 1.2rem;
    font-weight: 800;
}

.about-card__text {
    margin: 0;
    color: var(--site-ink);
    line-height: 1.8;
}

.about-feature-list {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.82rem 0.9rem;
    border-radius: 15px;
    background: rgba(242, 247, 255, 0.96);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.92);
    color: var(--site-ink);
    line-height: 1.65;
}

.about-feature-list i {
    color: var(--site-blue);
    font-size: 1rem;
    margin-top: 0.08rem;
}

.about-card__actions {
    margin-top: auto;
}

@media (max-width: 767.98px) {
    .cv-card-grid--about {
        grid-template-columns: 1fr;
    }
}

.hero-summary-wrapper {
    padding: clamp(2.4rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: 15px;
    text-align: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.82)),
        url('/img/background_claudecv.webp') center center / cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--site-shadow-soft);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.hero-summary-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(170, 204, 255, 0.18), transparent 26%),
        radial-gradient(circle at 84% 24%, rgba(229, 237, 255, 0.72), transparent 20%);
    pointer-events: none;
}

.hero-summary-wrapper .hero-bg {
    opacity: 0.04;
}

.hero-summary-wrapper h1,
.hero-summary-wrapper .hero-title {
    margin: 0;
    color: var(--site-ink-strong);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    text-shadow: none;
}

.hero-summary-wrapper .hero-subtitle,
#welcome-text {
    color: var(--site-ink-soft);
    font-size: 1.06rem;
    line-height: 1.75;
}

.main > section.container.py-4,
.main > .container.py-5,
.main > section.container.p-4,
.main > section.container.py-4.d-flex {
    position: relative;
    padding-top: 0 !important;
}

.info-wrap,
.main > section.container.py-4 > :first-child,
.main > .container.py-5 > .row,
.main > section.container.p-4 > :first-child,
.privacy-shell {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: 15px;
    background: var(--site-surface);
    border: 1px solid rgba(255, 255, 255, 0.88);
    box-shadow: var(--site-shadow-soft);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.info-wrap > .row:last-child,
.info-wrap > .cv-section-grid:last-child,
.info-wrap > .category-section:last-child {
    margin-bottom: 0;
}

.e-card,
.blog-card,
.contact-form-wrap,
.booking-card,
.confirmation-card,
.main .card,
.main .alert,
.claude-dialog .e-dlg-content > div.bg-light,
.claude-dialog .e-dlg-content > div[class*="rounded"] {
    border-radius: 15px !important;
    border: 1px solid rgba(203, 219, 245, 0.88) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 42px rgba(40, 71, 125, 0.09) !important;
}

.e-card,
.blog-card,
.booking-card {
    overflow: hidden;
}

.e-card {
    padding: 0.9rem;
}

.e-card .e-card-header .e-card-header-title,
.blog-card .card-title,
.summary-section,
.category-section h4,
.footer h4 {
    color: var(--site-ink-strong) !important;
}

.e-card .e-card-content,
.blog-card .card-text,
.summary-content,
.contact-form-wrap,
.booking-card,
.footer p,
.footer li,
.footer span {
    color: var(--site-ink);
}

.blog-card {
    border: 1px solid rgba(203, 219, 245, 0.88) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

.inner-page--blog .blog-card {
    margin: 0 !important;
}

.inner-page--blog .blog-card .card-body {
    padding: 1.35rem 1.45rem;
}

.inner-page--blog .blog-card .card-title {
    margin-bottom: 0.8rem;
    color: var(--site-ink-strong) !important;
}

.inner-page--blog .blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1rem;
    margin-bottom: 0.8rem;
    color: var(--site-ink-soft);
    font-size: 0.88rem;
}

.inner-page--blog .blog-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.inner-page--blog .blog-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
}

.inner-page--blog .blog-card__tag-secondary {
    background: rgba(232, 244, 255, 0.95);
}

.inner-page--blog .blog-card__excerpt {
    font-size: 1rem;
    line-height: 1.7;
    cursor: pointer;
}

.inner-page--blog .blog-card__image-wrap {
    margin-top: 0.85rem;
    cursor: pointer;
}

.inner-page--blog .blog-card__image {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
    border-radius: 15px;
    border: 1px solid rgba(203, 219, 245, 0.88);
    transition: transform 0.3s ease;
}

.blog-card:hover,
.e-card:hover,
.booking-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(35, 70, 126, 0.12) !important;
}

.contact-form-wrap {
    max-width: 720px;
    padding: clamp(1.5rem, 3vw, 2.3rem);
}

.contact-form-wrap label,
.form-label {
    color: var(--site-ink-strong);
    font-weight: 700;
}

.form-control,
.contact-form-wrap .form-control,
.contact-form-wrap .full-width-textarea,
.claude-dialog .form-control {
    min-height: 50px;
    border-radius: 15px !important;
    border: 1px solid rgba(189, 209, 241, 0.9) !important;
    background: rgba(248, 251, 255, 0.96) !important;
    color: var(--site-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.full-width-textarea {
    min-height: 180px !important;
}

.form-control:focus,
.contact-form-wrap .form-control:focus,
.claude-dialog .form-control:focus,
.full-width-textarea:focus {
    border-color: rgba(82, 126, 198, 0.72) !important;
    box-shadow: 0 0 0 0.2rem rgba(92, 134, 202, 0.16) !important;
}

/* =========================================================
   Shared UI QA layer: consistent actions, focus, feedback
   ========================================================= */
:root {
    --ui-radius-control: 8px;
    --ui-radius-pill: 999px;
    --ui-focus-ring: 0 0 0 0.2rem rgba(63, 43, 232, 0.22);
    --ui-focus-ring-strong: 0 0 0 0.22rem rgba(63, 43, 232, 0.28);
    --ui-primary: var(--accent-primary);
    --ui-primary-hover: var(--accent-primary-strong);
    --ui-secondary-surface: rgba(255, 255, 255, 0.86);
    --ui-secondary-border: rgba(127, 164, 221, 0.5);
    --ui-control-shadow: 0 14px 26px rgba(41, 90, 168, 0.14);
}

a,
button,
.btn,
.e-btn,
.nav-link,
.cw-footer__social-links a,
.contact-info-item,
.blog-card__excerpt-button {
    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease,
        opacity 160ms ease;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.e-btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.e-input:focus-visible,
.e-control:focus-visible {
    outline: 2px solid var(--ui-primary) !important;
    outline-offset: 3px;
    box-shadow: var(--ui-focus-ring) !important;
}

h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus,
p:focus,
span:focus,
div:focus,
section:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn,
.btn-send,
.e-btn,
.footer-primary-btn,
.footer-secondary-btn,
.cw-footer__cta-btn,
.cw-footer__secondary-btn,
.cw-footer__privacy-chip,
.home-btn,
.channel-btn-primary,
.channel-btn-secondary,
.channel-btn-support,
.labs-youtube-btn,
.blog-detail__booking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    border-radius: var(--ui-radius-control) !important;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    touch-action: manipulation;
}

.btn-sm,
.e-small,
.e-btn.e-small {
    min-height: 36px;
    border-radius: var(--ui-radius-control) !important;
}

.btn-lg,
.e-btn.e-large {
    min-height: 52px;
}

.e-calendar .e-prev,
.e-calendar .e-next,
.e-calendar .e-title,
.e-calendar .e-header .e-btn,
.e-datepicker .e-prev,
.e-datepicker .e-next,
.e-datepicker .e-title,
.e-datepicker .e-header .e-btn {
    min-width: 40px !important;
    min-height: 40px !important;
}

.btn-primary,
.btn-send,
.footer-primary-btn,
.e-btn.e-primary,
button.btn-primary {
    color: #fff !important;
    border-color: transparent !important;
    background: var(--ui-primary) !important;
    box-shadow: 0 16px 28px rgba(63, 43, 232, 0.18);
}

.btn-primary:hover,
.btn-send:hover,
.footer-primary-btn:hover,
.e-btn.e-primary:hover,
button.btn-primary:hover {
    color: #fff !important;
    background: var(--ui-primary-hover) !important;
    border-color: transparent !important;
    box-shadow: 0 18px 34px rgba(63, 43, 232, 0.24);
}

.btn-outline-primary,
.footer-secondary-btn,
.e-btn.e-outline.e-primary,
.e-btn.btn-outline-primary {
    color: var(--ui-primary) !important;
    border-color: rgba(63, 43, 232, 0.38) !important;
    background: var(--ui-secondary-surface) !important;
    box-shadow: inset 0 0 0 1px rgba(63, 43, 232, 0.12);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible,
.footer-secondary-btn:hover,
.e-btn.e-outline.e-primary:hover,
.e-btn.btn-outline-primary:hover {
    color: #fff !important;
    border-color: var(--ui-primary) !important;
    background: var(--ui-primary) !important;
    box-shadow: 0 14px 26px rgba(63, 43, 232, 0.16);
}

.btn-danger {
    box-shadow: 0 14px 26px rgba(196, 30, 58, 0.16);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    box-shadow: 0 18px 32px rgba(196, 30, 58, 0.22);
}

.btn:hover:not(:disabled),
.btn-send:hover:not(:disabled),
.e-btn:hover:not(.e-disabled),
.footer-primary-btn:hover:not(:disabled),
.footer-secondary-btn:hover:not(:disabled),
.cw-footer__cta-btn:hover:not(:disabled),
.cw-footer__secondary-btn:hover:not(:disabled),
.cw-footer__privacy-chip:hover:not(:disabled),
.home-btn:hover:not(:disabled),
.channel-btn-primary:hover:not(:disabled),
.channel-btn-secondary:hover:not(:disabled),
.channel-btn-support:hover:not(:disabled),
.labs-youtube-btn:hover:not(:disabled),
.blog-detail__booking-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:active:not(:disabled),
.btn-send:active:not(:disabled),
.e-btn:active:not(.e-disabled),
.footer-primary-btn:active:not(:disabled),
.footer-secondary-btn:active:not(:disabled),
.cw-footer__cta-btn:active:not(:disabled),
.cw-footer__secondary-btn:active:not(:disabled),
.cw-footer__privacy-chip:active:not(:disabled),
.home-btn:active:not(:disabled),
.channel-btn-primary:active:not(:disabled),
.channel-btn-secondary:active:not(:disabled),
.channel-btn-support:active:not(:disabled),
.labs-youtube-btn:active:not(:disabled),
.blog-detail__booking-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.16) !important;
}

.btn:disabled,
.btn.disabled,
.btn-send:disabled,
.e-btn.e-disabled,
.footer-primary-btn:disabled,
.footer-secondary-btn:disabled,
.cw-footer__cta-btn:disabled,
.cw-footer__secondary-btn:disabled,
.home-btn:disabled,
.channel-btn-primary:disabled,
.channel-btn-secondary:disabled,
.channel-btn-support:disabled,
.blog-detail__booking-btn:disabled {
    cursor: not-allowed;
    opacity: 0.62 !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-link {
    min-height: 36px;
    border-radius: var(--ui-radius-control) !important;
    color: var(--ui-primary) !important;
    font-weight: 800 !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.btn-link:hover,
.btn-link:focus-visible {
    color: var(--ui-primary-hover) !important;
    background: rgba(63, 43, 232, 0.08) !important;
}

.cookie-banner {
    left: clamp(0.75rem, 2vw, 1.25rem) !important;
    bottom: clamp(0.75rem, 2vw, 1.25rem) !important;
    width: min(390px, calc(100vw - 1.5rem));
    max-width: none !important;
    padding: 0.9rem !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--border-neutral) !important;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16) !important;
    color: #334155;
}

.cookie-banner[hidden],
.cookie-modal[hidden] {
    display: none !important;
}

.cookie-content h6 {
    margin: 0 0 0.35rem;
    color: #111827;
    font-size: 0.98rem;
    font-weight: 850;
}

.cookie-title-button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: left;
    cursor: pointer;
}

.cookie-title-button:hover,
.cookie-title-button:focus-visible {
    color: #0f766e;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.cookie-content p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.45;
}

.cookie-banner .cookie-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem !important;
    margin-top: 0.7rem !important;
}

.cookie-actions .btn {
    min-height: 44px;
    padding: 0.48rem 0.7rem !important;
    border-radius: 7px !important;
    font-size: 0.84rem;
    font-weight: 800 !important;
}

.cookie-actions .btn-success {
    grid-column: 1 / -1;
    color: #111827 !important;
    background: #facc15 !important;
    box-shadow: none !important;
}

.cookie-actions .btn-success:hover,
.cookie-actions .btn-success:focus-visible {
    color: #111827 !important;
    background: #eab308 !important;
}

.cookie-modal .modal-body {
    width: min(560px, calc(100vw - 1.5rem)) !important;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    border-radius: 8px !important;
}

.cookie-modal .modal-footer {
    gap: 0.55rem !important;
}

.summary-section {
    margin-bottom: 0.45rem;
    font-size: 1.18rem;
    font-weight: 800;
}

.summary-content {
    margin-bottom: 0;
    line-height: 1.8;
}

.category-section + .category-section {
    margin-top: 1.7rem;
}

.category-section h4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
}

.cv-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.1rem;
}

.cv-qualifications-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.highlight-badge,
.hero-card__chips span,
.home-pill-band__inner span,
.e-badge,
.badge {
    border-radius: 999px;
}

.booking-panel {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) minmax(220px, 0.7fr) minmax(320px, 1.2fr);
    gap: 1.25rem;
}

.booking-card {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.92) !important;
}

.empty-slot {
    border-radius: 15px;
}

.claude-dialog .e-dlg-header-content,
.calendar-style-dialog .px-4.pt-3.pb-1.text-center.border-bottom.bg-info.rounded {
    background: linear-gradient(135deg, rgba(236, 244, 255, 0.95), rgba(247, 250, 255, 0.98)) !important;
    border-bottom: 1px solid rgba(204, 220, 245, 0.85) !important;
}

.claude-dialog .e-dialog,
.claude-dialog.e-dialog {
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 1px solid rgba(203, 219, 245, 0.88) !important;
    box-shadow: 0 26px 56px rgba(35, 70, 126, 0.16) !important;
}

.footer {
    padding: 0 0 2rem;
    background: transparent;
    box-shadow: none;
}

.footer::before {
    display: none;
}

.footer-surface {
    padding: clamp(1.15rem, 2.6vw, 1.7rem);
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 249, 255, 0.74));
    border: 1px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 56px rgba(38, 70, 122, 0.11);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.footer-newsletter {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.9fr);
    align-items: stretch;
    gap: 1.15rem;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border-top: none;
    border-bottom: none;
}

.footer-newsletter__copy {
    max-width: none;
}

.footer-newsletter__copy-card,
.footer-newsletter__action-card {
    height: 100%;
    padding: 1.2rem 1.3rem;
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(240, 247, 255, 0.9));
    box-shadow:
        inset 0 0 0 1px rgba(198, 216, 244, 0.82),
        0 14px 30px rgba(44, 75, 126, 0.06);
}

.footer-newsletter__action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
}

.footer-newsletter__action-card {
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(213, 228, 255, 0.72), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(237, 244, 255, 0.92));
}

.footer-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(239, 245, 255, 0.96);
    color: var(--site-blue);
    font-size: 0.88rem;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(192, 212, 243, 0.92);
}

.footer-newsletter h4 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 800;
}

.footer-newsletter p {
    margin-bottom: 0;
    color: var(--site-ink-soft);
    line-height: 1.75;
}

.footer-top {
    padding: 1.55rem 0 1.05rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.95fr 1.05fr 0.9fr;
    gap: 1.2rem;
    align-items: start;
}

.footer-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-column h4 {
    margin-bottom: 0;
    font-size: 1.04rem;
}

.footer-column p {
    margin-bottom: 0.95rem;
    line-height: 1.75;
}

.footer-panel {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.05rem 1.1rem;
    border-radius: 15px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(244, 248, 255, 0.86));
    box-shadow:
        inset 0 0 0 1px rgba(198, 216, 244, 0.82),
        0 12px 28px rgba(44, 75, 126, 0.05);
}

.footer-links ul {
    display: grid;
    gap: 0.72rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links li,
.footer-contact-list a {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.footer-links li {
    min-height: 32px;
}

.footer-links a,
.footer-links .nav-link {
    color: var(--site-ink);
    font-weight: 600;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links .nav-link:hover {
    color: var(--site-blue);
}

.footer-links i,
.footer-contact-list i {
    color: #8aaee3;
}

.footer-contact-block {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.footer-contact-card {
    display: grid;
    gap: 0.9rem;
}

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

.footer-contact-list a {
    color: var(--site-ink);
    font-weight: 600;
}

.footer-contact-card .footer-secondary-btn {
    width: fit-content;
    min-width: 190px;
    justify-self: start;
}

.footer-social-card {
    justify-content: space-between;
}

.footer-social-block .social-links {
    margin-top: 0.75rem;
}

.footer-social-card p {
    margin-bottom: 0;
}

.footer-privacy-card {
    justify-content: space-between;
    gap: 1rem;
    background:
        radial-gradient(circle at 82% 24%, rgba(214, 229, 255, 0.7), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(241, 247, 255, 0.88));
}

.footer-privacy-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(237, 245, 255, 0.98), rgba(220, 234, 255, 0.95));
    box-shadow: inset 0 0 0 1px rgba(192, 212, 243, 0.92);
    color: var(--site-blue);
    font-size: 1.25rem;
}

.footer-privacy-card__text {
    margin: 0;
    color: var(--site-ink-soft);
    line-height: 1.7;
}

.footer-privacy-btn {
    width: 100%;
    justify-content: center;
    gap: 0.5rem;
}

.footer .social-links {
    gap: 0.75rem;
    flex-wrap: wrap;
}

.footer .social-links a {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #edf4ff, #dceafe);
    color: var(--site-blue);
    box-shadow: inset 0 0 0 1px rgba(188, 210, 244, 0.9);
}

.footer .social-links a:hover {
    color: #fff;
    background: linear-gradient(135deg, #235bb0, #2d73d6);
    transform: translateY(-2px);
}

.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(210, 224, 246, 0.88);
}

.copyright p {
    margin: 0;
    color: var(--site-ink-soft);
    text-align: center;
}

.scroll-top {
    right: 1.2rem;
    bottom: 1.2rem;
    background: linear-gradient(135deg, #235bb0, #2d73d6);
    box-shadow: 0 18px 28px rgba(41, 90, 168, 0.18);
}

.scroll-top i {
    color: #fff;
}

@media (max-width: 991.98px) {
    .page > main.page-main {
        padding-top: 3.8rem;
    }

    .site-navbar__inner {
        padding: 0.85rem 1rem;
        border-radius: 15px;
    }

    .site-navbar__panel {
        width: 100%;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        background: linear-gradient(180deg, rgba(14, 23, 42, 0.96), rgba(15, 23, 42, 0.92));
        border-radius: 15px;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-bottom: 0.75rem;
        box-shadow: 0 24px 40px rgba(2, 8, 23, 0.28);
    }

    .site-navbar__actions {
        align-items: stretch !important;
    }

    .site-navbar__actions .nav-link,
    .culture-switch {
        width: 100%;
        justify-content: flex-start;
    }

    .site-navbar__actions .nav-link {
        color: rgba(248, 250, 252, 0.96) !important;
    }

    .page--engineering-chrome .site-navbar__panel .site-navbar__actions .nav-link {
        color: rgba(248, 250, 252, 0.96) !important;
    }

    .site-navbar__actions .nav-link:hover,
    .site-navbar__actions .nav-link:focus,
    .site-navbar__actions .nav-link.active {
        color: #ffffff !important;
        background: rgba(59, 130, 246, 0.22) !important;
        border-radius: 6px !important;
        box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35) !important;
    }

    .page--engineering-chrome .site-navbar__panel .site-navbar__actions .nav-link:hover,
    .page--engineering-chrome .site-navbar__panel .site-navbar__actions .nav-link:focus,
    .page--engineering-chrome .site-navbar__panel .site-navbar__actions .nav-link.active {
        color: #ffffff !important;
        background: rgba(59, 130, 246, 0.22) !important;
        box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35) !important;
    }

    .nav-brand-name {
        color: var(--site-ink-strong);
    }

    .nav-brand-role {
        color: var(--site-ink-soft);
    }

    .culture-switch {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
        color: #f8fafc !important;
    }

    .booking-panel {
        grid-template-columns: 1fr;
    }

    .footer-newsletter {
        grid-template-columns: 1fr;
    }

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

    .footer-newsletter__copy,
    .footer-newsletter__action {
        max-width: none;
        width: 100%;
    }

    .footer-newsletter__action-card {
        justify-content: flex-start;
    }

    .footer-bottom {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .page > main.page-main {
        padding-top: 3.45rem;
    }

    .page-content-card,
    .hero-summary-wrapper,
    .footer-surface,
    .info-wrap,
    .main > section.container.py-4 > :first-child,
    .main > .container.py-5 > .row,
    .main > section.container.p-4 > :first-child {
        border-radius: 15px;
    }

    .nav-brand-role {
        display: none;
    }

    .footer-surface {
        padding: 1.2rem;
    }

    .footer-newsletter {
        padding: 0.95rem;
    }

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

    .footer-newsletter__action-card {
        justify-content: center;
    }

    .footer-contact-card .footer-secondary-btn,
    .footer-privacy-btn,
    .footer-primary-btn {
        width: 100%;
    }
}

/* =========================================================
   ClaudeWebsite footer refresh (mockup-aligned, isolated)
   ========================================================= */
.cw-footer {
    margin-top: clamp(2rem, 5vw, 4.5rem);
    padding: 0 0 1rem;
    background: transparent;
    box-shadow: none;
}

.cw-footer.cw-footer--home {
    margin-top: clamp(0.75rem, 2vw, 1.5rem);
}

.cw-footer .container-xl {
    position: relative;
    z-index: 1;
}

.cw-footer__shell {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(228, 238, 255, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 60px rgba(40, 77, 138, 0.12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.cw-footer__shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.06)),
        url('/img/site-global/background-ribbon.webp') center center / cover no-repeat,
        radial-gradient(circle at 12% 20%, rgba(167, 198, 245, 0.18), transparent 28%),
        radial-gradient(circle at 88% 18%, rgba(214, 228, 255, 0.5), transparent 24%);
    opacity: 0.42;
    pointer-events: none;
}

.cw-footer__cta,
.cw-footer__main,
.cw-footer__bottom {
    position: relative;
    z-index: 1;
}

.cw-footer__cta {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(240px, 0.75fr);
    gap: 1.5rem;
    align-items: center;
    margin: 22px;
    padding: 1.7rem 1.8rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(246, 250, 255, 0.56));
    border: 1px solid rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 28px rgba(40, 77, 138, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.cw-footer__eyebrow {
    display: inline-block;
    margin-bottom: 0.55rem;
    color: #334e83;
    font-size: 0.98rem;
    font-weight: 500;
}

.cw-footer__cta h2 {
    margin: 0 0 0.55rem;
    color: #18336a;
    font-size: clamp(2rem, 2.7vw, 2.55rem);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cw-footer__cta p {
    margin: 0;
    color: #51678f;
    font-size: 1.08rem;
    line-height: 1.65;
}

.cw-footer__cta-action {
    display: flex;
    justify-content: center;
}

.cw-footer__cta-btn,
.cw-footer__secondary-btn,
.cw-footer__privacy-chip {
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cw-footer__cta-btn {
    min-width: 240px;
    min-height: 62px;
    padding: 0.95rem 1.75rem;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 1.18rem;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #235bb0, #2d73d6) !important;
    box-shadow: 0 14px 26px rgba(41, 90, 168, 0.18);
}

.cw-footer__cta-btn:hover,
.cw-footer__secondary-btn:hover,
.cw-footer__privacy-chip:hover {
    transform: translateY(-2px);
}

.cw-footer__cta-btn:disabled {
    opacity: 1 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #235bb0, #2d73d6) !important;
    box-shadow: 0 14px 26px rgba(41, 90, 168, 0.18);
}

.cw-footer__main {
    padding: 1.35rem 2rem 1.6rem;
}

.cw-footer__grid {
    display: grid;
    grid-template-columns: 1.65fr 1fr 1.05fr 0.8fr;
    gap: 1.6rem;
}

.cw-footer__col {
    position: relative;
    min-width: 0;
    color: var(--site-ink);
}

.cw-footer__col + .cw-footer__col {
    padding-left: 1.45rem;
}

.cw-footer__col + .cw-footer__col::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2.6rem;
    bottom: 0.4rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(165, 193, 237, 0.45), rgba(165, 193, 237, 0.08));
}

.cw-footer__col h4 {
    margin: 0 0 1.1rem;
    color: var(--site-ink-strong) !important;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cw-footer__links {
    display: grid;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.cw-footer__product-groups h5 {
    margin: 0 0 0.8rem;
    color: var(--site-ink-strong);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.cw-footer__links li {
    margin: 0;
}

.cw-footer__links a,
.cw-footer__logout-button,
.cw-footer__contact-list a {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    color: var(--site-ink);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    min-width: 0;
}

.cw-footer__logout-form {
    margin: 0;
}

.cw-footer__logout-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.cw-footer__links a:hover,
.cw-footer__logout-button:hover,
.cw-footer__contact-list a:hover {
    color: var(--site-blue);
}

.cw-footer__links i {
    color: rgba(79, 118, 184, 0.72);
    font-size: 0.9rem;
}

.cw-footer__contact-list {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.35rem;
}

.cw-footer__icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(241, 247, 255, 0.96);
    color: var(--site-blue);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.95);
}

.cw-footer__contact-list a {
    align-items: flex-start;
    min-height: 44px;
    font-size: 1.08rem;
    font-weight: 700;
}

.cw-footer__contact-list a span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cw-footer__secondary-btn {
    min-width: 220px;
    min-height: 54px;
    padding: 0.85rem 1.4rem;
    border-radius: 999px !important;
    color: var(--site-blue) !important;
    font-size: 1.02rem;
    font-weight: 800 !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 248, 255, 0.9)) !important;
    box-shadow: 0 10px 20px rgba(40, 77, 138, 0.1);
}

.cw-footer__text {
    margin: 0;
    color: var(--site-ink-soft);
    font-size: 1rem;
    line-height: 1.85;
}

.cw-footer__text--privacy {
    max-width: 240px;
}

.cw-footer__social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.5rem;
}

.cw-footer__social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 245, 255, 0.94));
    color: var(--site-blue);
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(40, 77, 138, 0.1);
}

.cw-footer__social-links a:hover {
    color: #163f84;
    background: linear-gradient(180deg, #ffffff, #f4f8ff);
    transform: translateY(-2px);
}

.cw-footer__privacy-btn {
    margin-bottom: 1.4rem;
}

.cw-footer__privacy-art {
    position: relative;
    min-height: 140px;
    margin-bottom: 0.55rem;
}

.cw-footer__privacy-cloud,
.cw-footer__privacy-shield {
    position: absolute;
    filter: drop-shadow(0 14px 26px rgba(13, 39, 92, 0.2));
}

.cw-footer__privacy-cloud {
    left: 0.25rem;
    bottom: 0;
    color: rgba(151, 186, 238, 0.5);
    font-size: 5.7rem;
}

.cw-footer__privacy-shield {
    right: 1rem;
    top: 0.35rem;
    color: rgba(185, 203, 241, 0.62);
    font-size: 3rem;
}

.cw-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.55rem 1.15rem;
    border-top: 1px solid rgba(181, 204, 239, 0.42);
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.52), rgba(238, 245, 255, 0.62));
}

.cw-footer__copyright {
    color: var(--site-ink-soft);
    font-size: 0.98rem;
}

.cw-footer__copyright strong {
    color: var(--site-ink-strong);
    font-weight: 800;
}

.cw-footer__privacy-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.7rem 1.15rem;
    border-radius: 999px;
    color: var(--site-blue);
    font-size: 0.98rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(194, 213, 243, 0.9);
}

.cw-footer__privacy-chip i {
    font-size: 1rem;
}

/* Mermaid2Visio's product footer is intentionally smaller than the shared
   portfolio footer: one conversion CTA, five operational workflows, and no
   duplicate contact/privacy destinations. */
.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 12000;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    color: #fff;
    background: #111827;
    transform: translateY(-160%);
    transition: transform 0.16s ease;
}

.skip-link:focus {
    color: #fff;
    transform: translateY(0);
}

.cw-product-footer {
    overflow: hidden;
    color: #334155;
    background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 58%, #f8fafc 100%);
    border: 1px solid #dbe3f0;
    border-radius: 18px;
}

.cw-product-footer__cta {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid #dbe3f0;
}

.cw-product-footer__cta h2 {
    margin: 0 0 0.35rem;
    color: #111827;
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
    font-weight: 850;
    letter-spacing: -0.025em;
}

.cw-product-footer__cta p,
.cw-product-footer__brand p {
    margin: 0;
    line-height: 1.55;
}

.cw-product-footer__cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.cw-product-footer__cta-actions .btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.1rem;
    border-radius: 8px;
    font-weight: 750;
}

.cw-product-footer__grid {
    display: grid;
    grid-template-columns: minmax(250px, 1.4fr) repeat(3, minmax(150px, 0.85fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding: 1.6rem 1.75rem 1.35rem;
}

.cw-product-footer__brand {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-content: start;
    gap: 0.75rem;
}

.cw-product-footer__brand > img {
    width: 48px;
    height: 48px;
}

.cw-product-footer__brand strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #111827;
    font-size: 1rem;
}

.cw-product-footer__brand p {
    font-size: 0.9rem;
}

.cw-product-footer__trust {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.55rem;
    padding-top: 0.65rem;
    color: #475569;
}

.cw-product-footer__trust i {
    flex: 0 0 auto;
    color: #4338ca;
}

.cw-product-footer__column h3 {
    margin: 0 0 0.65rem;
    color: #111827;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.cw-product-footer__column ul {
    display: grid;
    gap: 0.46rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cw-product-footer__column a {
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: none;
}

.cw-product-footer__column a:hover,
.cw-product-footer__column a:focus-visible {
    color: #3730a3;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.cw-product-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 58px;
    padding: 0.7rem 1.75rem;
    color: #64748b;
    border-top: 1px solid #dbe3f0;
    font-size: 0.85rem;
}

.cw-product-footer__bottom button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding: 0.55rem 0.8rem;
    color: #334155;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
}

.cw-product-footer__bottom button:hover,
.cw-product-footer__bottom button:focus-visible {
    color: #3730a3;
    background: #fff;
}

@media (max-width: 991.98px) {
    .cw-product-footer__cta {
        grid-template-columns: 1fr;
    }

    .cw-product-footer__cta-actions {
        justify-content: flex-start;
    }

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

    .cw-product-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .cw-footer--mermaid-product {
        margin-top: 1.5rem;
    }

    .cw-product-footer {
        border-radius: 12px;
    }

    .cw-product-footer__cta,
    .cw-product-footer__grid {
        padding: 1.15rem;
    }

    .cw-product-footer__cta-actions,
    .cw-product-footer__cta-actions .btn {
        width: 100%;
    }

    .cw-product-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.2rem 1rem;
    }

    .cw-product-footer__column:last-child {
        grid-column: 1 / -1;
    }

    .cw-product-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        padding-inline: 1.15rem;
    }
}

@media (max-width: 1399.98px) {
    .cw-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2rem;
    }

    .cw-footer__col:nth-child(3),
    .cw-footer__col:nth-child(4) {
        padding-left: 0;
    }

    .cw-footer__col:nth-child(3)::before,
    .cw-footer__col:nth-child(4)::before {
        display: none;
    }
}

@media (max-width: 1399.98px) and (min-width: 992px) {
    .cw-footer__main {
        padding: 1.15rem 1.6rem 1.45rem;
    }

    .cw-footer__grid {
        gap: 1.45rem;
    }

    .cw-footer__col h4 {
        font-size: 1.34rem;
        line-height: 1.1;
    }
}

@media (max-width: 991.98px) {
    .cw-footer__cta {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .cw-footer__cta-action {
        justify-content: flex-start;
    }

    .cw-footer__main {
        padding: 1rem 1.4rem 1.45rem;
    }

    .cw-footer__grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .cw-footer__col {
        padding-left: 0 !important;
    }

    .cw-footer__col::before {
        display: none;
    }

    .cw-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .cw-footer__product-groups {
        grid-template-columns: 1fr;
    }

    .cw-footer__shell {
        border-radius: 22px;
    }

    .cw-footer__cta {
        margin: 14px;
        padding: 1.35rem 1.2rem;
        border-radius: 20px;
    }

    .cw-footer__cta h2 {
        font-size: 1.9rem;
    }

    .cw-footer__cta p,
    .cw-footer__text,
    .cw-footer__contact-list a,
    .cw-footer__links a {
        font-size: 0.98rem;
    }

    .cw-footer__cta-btn,
    .cw-footer__secondary-btn,
    .cw-footer__privacy-chip {
        width: 100%;
        justify-content: center;
    }

    .cw-footer__privacy-art {
        min-height: 116px;
    }

    .cw-footer__privacy-cloud {
        font-size: 4.6rem;
    }

    .cw-footer__privacy-shield {
        right: 0.35rem;
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .page-content {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .page-content-card--inner {
        padding: 0.4rem;
    }

    .page-content-card--inner > .row {
        padding: 1rem;
    }

    .page-content-card--inner > .row > [class*="col-"] + [class*="col-"] {
        margin-top: 1rem;
    }

    .inner-page--management .row {
        --bs-gutter-y: 0.8rem;
    }

    .inner-page--management .e-card-header,
    .inner-page--management .e-card-content {
        padding: 0.9rem !important;
    }

    .privacy-shell {
        padding: 1rem;
    }

    .labs-card__actions,
    .labs-card__actions--stacked,
    .contact-actions,
    .booking-slot-grid,
    .channel-actions,
    .channel-feedback__actions,
    .channel-cta-strip__actions,
    .tool-actions-row,
    .mermaid-product-hero__actions,
    .blog-detail__actions {
        align-items: stretch;
        width: 100%;
    }

    .labs-card__actions .btn,
    .contact-actions .btn,
    .booking-slot-grid .e-btn,
    .channel-actions .btn,
    .channel-feedback__actions .btn,
    .channel-cta-strip__actions .btn,
    .tool-actions-row .btn,
    .mermaid-product-hero__actions .btn,
    .blog-detail__actions .btn {
        width: 100%;
    }

    .btn,
    .e-btn,
    .cw-footer__cta-btn,
    .cw-footer__secondary-btn,
    .cw-footer__privacy-chip {
        min-height: 46px;
    }

    .cookie-banner {
        left: 0.6rem !important;
        right: 0.6rem !important;
        bottom: 0.6rem !important;
        width: auto;
        padding: 0.72rem !important;
    }

    .cookie-content h6 {
        font-size: 0.92rem;
    }

    .cookie-content p {
        font-size: 0.78rem;
        line-height: 1.35;
    }

    .cookie-actions .btn {
        min-height: 44px;
        padding: 0.48rem 0.55rem !important;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .btn:hover:not(:disabled),
    .e-btn:hover:not(.e-disabled),
    .cw-footer__cta-btn:hover:not(:disabled),
    .cw-footer__secondary-btn:hover:not(:disabled),
    .cw-footer__privacy-chip:hover:not(:disabled),
    .home-btn:hover:not(:disabled),
    .channel-btn-primary:hover:not(:disabled),
    .channel-btn-secondary:hover:not(:disabled),
    .channel-btn-support:hover:not(:disabled),
    .labs-youtube-btn:hover:not(:disabled),
    .blog-detail__booking-btn:hover:not(:disabled) {
        transform: none;
    }
}

/* =========================================================
   Global engineering product skin
   ========================================================= */
body {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-main);
    background-image: none;
}

.page--engineering-tool {
    min-height: 100vh;
    background-color: var(--bg-main);
    background-image: none;
}

.page--engineering-tool::before,
.page-backdrop,
.page-blob {
    display: none !important;
}

.page > main.page-main.page-main--engineering-tool {
    padding-top: clamp(4.25rem, 7vw, 5.35rem) !important;
    padding-bottom: clamp(1.6rem, 3.5vw, 2.8rem) !important;
}

.page-content--engineering-tool {
    max-width: 1280px;
}

.page-content--engineering-tool > .content {
    width: 100%;
}

.inner-page {
    gap: clamp(1.6rem, 3vw, 2.6rem) !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.inner-page .cv-record-title-card,
.inner-page .hero-summary-wrapper {
    width: min(1120px, 100%) !important;
    margin: 0 auto !important;
    padding: clamp(1.2rem, 2.6vw, 2.1rem) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid var(--border-neutral) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.inner-page .cv-record-title-card__bg,
.inner-page .hero-summary-wrapper .hero-bg {
    display: none !important;
}

.inner-page .cv-record-title-card .hero-title,
.inner-page .hero-summary-wrapper h1,
.inner-page .hero-summary-wrapper .hero-title,
.inner-page .hero-summary-wrapper .display-5 {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    color: #050505 !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: clamp(2rem, 3.8vw, 3.65rem) !important;
    line-height: 1.08 !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}

.inner-page .hero-subtitle,
.inner-page .hero-summary-wrapper p,
.inner-page .inner-page__body,
.inner-page p {
    color: #334155;
}

.inner-page .cv-record-shell,
.inner-page .inner-page__body,
.info-wrap,
.privacy-shell,
.main > section.container.py-4 > :first-child,
.main > .container.py-5 > .row,
.main > section.container.p-4 > :first-child {
    width: min(1120px, 100%) !important;
    margin: 0 auto !important;
    padding: clamp(1rem, 2.2vw, 1.35rem) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid var(--border-neutral) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.inner-page--mermaid-tool .cv-record-shell--mermaid-tool {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0 !important;
}

.e-card,
.blog-card,
.contact-panel,
.booking-card,
.confirmation-card,
.labs-card,
.about-card,
.main .card,
.main .alert,
.tool-panel {
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid var(--border-neutral) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06) !important;
}

.labs-chip,
.blog-filter-chip,
.contact-shell__eyebrow,
.booking-shell__eyebrow,
.about-shell__eyebrow,
.admin-shell__eyebrow,
.tool-shell__eyebrow {
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--accent-primary) !important;
    font-family: "Fira Code", Consolas, monospace;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.btn-primary,
.btn.btn-primary,
.home-btn-primary,
.contact-submit-btn,
.tool-generate-btn,
.cw-footer__cta-btn {
    color: #fff !important;
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    border-radius: 7px !important;
    box-shadow: 0 16px 32px rgba(63, 43, 232, 0.18) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.home-btn-primary:hover,
.contact-submit-btn:hover,
.tool-generate-btn:hover,
.cw-footer__cta-btn:hover {
    background: var(--accent-primary-strong) !important;
    border-color: var(--accent-primary-strong) !important;
}

.btn-outline-primary,
.btn-link,
.cw-footer__secondary-btn,
.cw-footer__privacy-chip {
    color: #111827 !important;
    border-color: #cbd5e1 !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.72) !important;
    box-shadow: none !important;
}

.form-control,
.e-input,
.e-input-group,
.contact-panel--form .contact-input,
.contact-panel--form .contact-textarea {
    border-radius: 8px !important;
    border-color: #cbd5e1 !important;
    background: rgba(248, 250, 252, 0.92) !important;
}

.page--engineering-tool .site-navbar__inner {
    max-width: 1120px;
    min-height: 58px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 247, 250, 0.90)),
        radial-gradient(circle at 12% 18%, rgba(63, 43, 232, 0.08), transparent 28%) !important;
    border: 1px solid var(--border-neutral) !important;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.08) !important;
}

.site-navbar__mobile-console {
    display: none;
}

.site-navbar__actions .nav-link i:not(.nav-submenu-toggle__chevron) {
    font-size: 1rem;
    color: var(--accent-primary);
}

.nav-brand-avatar--product {
    display: grid;
    place-items: center;
    color: #ffffff;
    background:
        linear-gradient(135deg, #3f2be8, #111827),
        radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 60%);
    border-color: rgba(63, 43, 232, 0.28) !important;
}

.nav-brand-avatar--product i {
    font-size: 1.15rem;
}

.page--mermaid-product-domain .site-navbar__inner {
    max-width: min(1320px, calc(100% - 2rem));
}

.page--mermaid-product-domain .nav-brand {
    flex: 0 1 11.75rem;
    min-width: 0;
    overflow: hidden;
}

.page--mermaid-product-domain .nav-brand-text {
    min-width: 0;
    overflow: hidden;
}

.page--mermaid-product-domain .nav-brand-name,
.page--mermaid-product-domain .nav-brand-role {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.page--engineering-tool:not(.page--mermaid-product-domain) .site-navbar__inner {
    max-width: min(1240px, calc(100% - 2rem));
}

@media (min-width: 992px) {
    .page--mermaid-product-domain .site-navbar__panel {
        flex: 0 1 auto;
    }

    .page--mermaid-product-domain .site-navbar__actions {
        gap: clamp(0.28rem, 0.8vw, 0.72rem);
    }
}

@media (min-width: 992px) and (max-width: 1240px) {
    .page--mermaid-product-domain .site-navbar__inner {
        max-width: min(1120px, calc(100% - 2rem));
        gap: 0.72rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .page--mermaid-product-domain .nav-brand {
        flex-basis: 9.75rem;
    }

    .page--mermaid-product-domain .nav-brand-role {
        display: none;
    }

    .page--mermaid-product-domain .site-navbar__actions .nav-link {
        gap: 0.42rem;
        padding-right: 0.74rem !important;
        padding-left: 0.74rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1080px) {
    .page--mermaid-product-domain .nav-brand {
        flex-basis: 3rem;
    }

    .page--mermaid-product-domain .nav-brand-text {
        display: none;
    }
}

@media (min-width: 992px) {
    .page--engineering-tool:not(.page--mermaid-product-domain) .nav-brand {
        flex: 0 1 auto;
        min-width: 0;
    }

    .page--engineering-tool:not(.page--mermaid-product-domain) .nav-brand-text {
        min-width: 0;
    }

    .page--engineering-tool:not(.page--mermaid-product-domain) .nav-brand-name,
    .page--engineering-tool:not(.page--mermaid-product-domain) .nav-brand-role {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page--engineering-tool:not(.page--mermaid-product-domain) .site-navbar__actions {
        gap: 0.45rem;
    }

    .page--engineering-tool:not(.page--mermaid-product-domain) .site-navbar__actions .nav-link {
        gap: 0.45rem;
        padding-right: 0.82rem !important;
        padding-left: 0.82rem !important;
    }

    .page--engineering-tool:not(.page--mermaid-product-domain) .site-navbar__admin .admin-link {
        max-width: 7.2rem;
        justify-content: center;
        text-align: center;
    }
}

.page--mermaid-product-domain .nav-brand-name {
    font-family: "Fira Code", Consolas, monospace;
    text-transform: uppercase;
}

/* The product asset is a horizontal wordmark, not the former square mark. */
.page--mermaid-product-domain .nav-brand {
    flex: 0 0 auto;
    overflow: visible;
}

.page--mermaid-product-domain .nav-brand-logo--product {
    width: clamp(172px, 16vw, 220px);
}

.page--mermaid-product-domain .mermaid-product-hero__proof.mermaid-product-hero__artwork {
    align-self: center;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1024 / 559;
    background: #ffffff;
}

/* Converter homepage hero: keep the wider copy and product artwork in balance. */
@media (min-width: 1200px) {
    .page--mermaid-product-domain .mermaid-product-hero--converter {
        grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr);
        gap: clamp(1.5rem, 2.6vw, 2.4rem);
        width: min(1240px, 100%);
        margin-top: -3rem;
    }

    .page--mermaid-product-domain .mermaid-product-hero--converter .mermaid-product-hero__copy h1 {
        max-width: 690px;
        font-size: clamp(3.25rem, 4.45vw, 4.15rem);
        line-height: 1.02;
        text-wrap: balance;
    }

    .page--mermaid-product-domain .mermaid-product-hero--converter .mermaid-product-hero__copy p {
        max-width: 640px;
    }
}

@media (max-width: 1199.98px) {
    .page--mermaid-product-domain .mermaid-product-hero--converter {
        width: min(920px, 100%);
    }

    .page--mermaid-product-domain .mermaid-product-hero--converter .mermaid-product-hero__copy {
        width: min(820px, 100%);
        max-width: 820px;
        justify-self: center;
    }

    .page--mermaid-product-domain .mermaid-product-hero--converter .mermaid-product-hero__proof {
        width: min(820px, 100%);
        justify-self: center;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .page--mermaid-product-domain .mermaid-product-hero--converter {
        margin-top: -1.5rem;
    }
}

@media (max-width: 767.98px) {
    .page--mermaid-product-domain .mermaid-product-hero--converter .mermaid-product-hero__copy h1 {
        font-size: clamp(2.25rem, 10.5vw, 3.15rem);
        line-height: 1.04;
        text-wrap: pretty;
    }
}

.page--mermaid-product-domain .mermaid-product-hero__artwork > img {
    object-fit: cover;
    object-position: center;
    background: #ffffff;
}

/* Keep the embedded Mermaid2Visio wordmark along the lower edge unobstructed. */
.page--mermaid-product-domain .mermaid-artwork-badge {
    top: 1rem;
    bottom: auto;
}

@media (min-width: 992px) and (max-width: 1240px) {
    .page--mermaid-product-domain .nav-brand-logo--product {
        width: 168px;
    }
}

@media (min-width: 992px) and (max-width: 1080px) {
    .page--mermaid-product-domain .nav-brand-logo--product {
        width: 142px;
    }
}

.page--mermaid-product-domain .cw-footer__profile-card img {
    display: none;
}

.page--mermaid-product-domain .cw-footer__profile-card {
    padding-left: 1rem;
}

/* =========================================================
   Product account screens
   ========================================================= */
.inner-page--account {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.account-shell {
    width: 100%;
    margin-inline: auto;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.account-auth-page {
    --account-auth-accent: var(--accent-primary);
    --account-auth-accent-dark: #111827;
    --account-auth-accent-soft: rgba(63, 43, 232, 0.13);
    --account-auth-icon-shadow: rgba(63, 43, 232, 0.18);
    display: grid;
    gap: clamp(1rem, 2vw, 1.35rem);
}

.account-auth-page--forms {
    --account-auth-accent: #0f766e;
    --account-auth-accent-dark: #f97316;
    --account-auth-accent-soft: rgba(15, 118, 110, 0.13);
    --account-auth-icon-shadow: rgba(15, 118, 110, 0.2);
}

.account-auth-page--birthday {
    --account-auth-accent: #be185d;
    --account-auth-accent-dark: #7c2d12;
    --account-auth-accent-soft: rgba(190, 24, 93, 0.12);
    --account-auth-icon-shadow: rgba(190, 24, 93, 0.18);
}

.account-auth-page--portfolio {
    --account-auth-accent: #2563eb;
    --account-auth-accent-dark: #0f172a;
    --account-auth-accent-soft: rgba(37, 99, 235, 0.12);
    --account-auth-icon-shadow: rgba(37, 99, 235, 0.18);
}

.account-auth-page--mermaid {
    --account-auth-accent: #3f2be8;
    --account-auth-accent-dark: #111827;
    --account-auth-accent-soft: rgba(63, 43, 232, 0.13);
    --account-auth-icon-shadow: rgba(63, 43, 232, 0.18);
}

.account-auth-hero,
.account-auth-card {
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--account-auth-accent) 18%, var(--border-neutral));
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.86));
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
}

.account-auth-hero {
    padding: clamp(1.15rem, 2.4vw, 1.8rem);
}

.account-auth-hero h1 {
    max-width: 820px;
    margin: 0.34rem 0 0;
    color: #050505;
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
}

.account-auth-hero h1:focus,
.account-auth-hero h1:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.account-auth-hero p {
    max-width: 760px;
    margin: 0.74rem 0 0;
    color: #334155;
    font-size: clamp(1rem, 1.6vw, 1.12rem);
    line-height: 1.65;
}

.account-auth-hero__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.58rem;
    margin-top: 1rem;
}

.account-auth-hero__metrics span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 36px;
    padding: 0.48rem 0.7rem;
    border-radius: 7px;
    color: #1f2937;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid #e2e8f0;
    font-size: 0.86rem;
    font-weight: 800;
}

.account-auth-hero__metrics i {
    color: var(--account-auth-accent);
}

.account-auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: clamp(1rem, 2vw, 1.35rem);
    align-items: stretch;
}

.account-auth-card {
    padding: clamp(1rem, 2.1vw, 1.45rem);
}

.account-auth-card--primary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

.account-auth-card__header {
    display: flex;
    align-items: flex-start;
    gap: 0.82rem;
    margin-bottom: 1rem;
}

.account-auth-card__icon {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--account-auth-accent), var(--account-auth-accent-dark));
    box-shadow: 0 14px 26px var(--account-auth-icon-shadow);
}

.account-auth-card h1,
.account-auth-card h2 {
    margin: 0;
    color: #050505;
    font-size: clamp(1.18rem, 1.6vw, 1.45rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0;
}

.account-auth-card__header p {
    margin: 0.28rem 0 0;
    color: #64748b;
    font-size: 0.94rem;
    line-height: 1.5;
}

.account-auth-validation {
    margin: 0 0 0.8rem;
    padding-left: 1.2rem;
}

.account-form-floating {
    margin-bottom: 0.86rem;
}

.account-form-floating .form-control {
    min-height: 56px;
    font-weight: 700;
}

.account-form-floating label {
    color: #64748b;
    font-weight: 800;
}

.account-remember-option {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-height: 34px;
    margin: 0.15rem 0 0.9rem;
    color: #334155;
    font-size: 0.93rem;
    font-weight: 800;
}

.account-remember-option .form-check-input {
    margin: 0;
}

.account-primary-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    width: 100%;
    min-height: 50px;
    font-weight: 900 !important;
}

.account-support-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.86rem;
}

.account-support-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0.45rem 0.55rem;
    border-radius: 7px;
    color: #334155;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid #e2e8f0;
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.account-support-links a:hover,
.account-support-links a:focus {
    color: var(--account-auth-accent);
    border-color: color-mix(in srgb, var(--account-auth-accent) 34%, #ffffff);
    background: rgba(255, 255, 255, 0.94);
}

.account-provider-form,
.account-provider-list {
    display: grid;
    gap: 0.65rem;
}

.account-provider-list p {
    margin: 0;
}

.account-provider-guidance {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.7rem;
    border-radius: 8px;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.84rem;
    line-height: 1.45;
}

.account-provider-guidance i {
    flex: 0 0 auto;
    margin-top: 0.08rem;
    color: var(--account-auth-accent);
}

.account-provider-button {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 52px;
    padding: 0.55rem 0.68rem;
    border-radius: 8px;
    border: 1px solid #dbe3ef;
    color: #111827;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 900;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.account-provider-button i:first-child {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    color: #ffffff;
    background: #111827;
}

.account-provider-button i:last-child {
    justify-self: end;
    color: #64748b;
    font-size: 1.3rem;
}

.account-provider-button:hover,
.account-provider-button:focus {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--account-auth-accent) 36%, #ffffff);
    background: #ffffff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.account-provider-button--microsoft i:first-child {
    background: #5e5ce6;
}

.account-provider-button--linkedin i:first-child {
    background: #0a66c2;
}

.account-provider-button--google i:first-child {
    background: #ea4335;
}

.account-provider-empty {
    padding: 0.85rem;
    border-radius: 8px;
    color: #475569;
    background: rgba(248, 250, 252, 0.86);
    border: 1px solid #e2e8f0;
}

.account-provider-empty p {
    margin: 0;
}

.account-auth-note {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.88rem;
    padding: 0.74rem;
    border-radius: 8px;
    color: #475569;
    background: rgba(248, 250, 252, 0.9);
    border: 1px solid #e2e8f0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.account-auth-note i {
    color: var(--accent-primary);
    margin-top: 0.1rem;
}

.account-auth-note p {
    margin: 0.18rem 0 0;
}

@media (max-width: 991.98px) {
    .account-auth-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .account-auth-hero,
    .account-auth-card {
        padding: 1rem;
    }

    .account-auth-hero h1 {
        font-size: clamp(1.85rem, 10vw, 2.35rem);
    }

    .account-auth-hero__metrics,
    .account-support-links {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-auth-hero__metrics span {
        width: 100%;
    }

    .account-auth-card__header {
        align-items: center;
    }
}

.site-navbar__toggle {
    width: 46px;
    height: 46px;
}

.site-navbar__toggle-glyph {
    display: grid;
    gap: 4px;
    width: 22px;
}

.site-navbar__toggle-glyph i {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: #111827;
    box-shadow: 0 0 12px rgba(63, 43, 232, 0.25);
}

.site-navbar__toggle-glyph i:nth-child(2) {
    width: 70%;
    margin-left: auto;
}

.cw-footer {
    margin-top: clamp(1.4rem, 3vw, 2.5rem);
}

.cw-footer__shell {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid var(--border-neutral) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06) !important;
}

.cw-footer__shell::before {
    background-image: none !important;
    opacity: 0 !important;
}

.cw-footer__cta {
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.82) !important;
    border-color: #e2e8f0 !important;
}

.cw-footer__cta h2,
.cw-footer__col h4 {
    color: #050505 !important;
    letter-spacing: 0 !important;
}

.home-page--v2 .home-offer-cta-panel {
    border-radius: 8px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.82)) !important;
    border: 1px solid var(--border-neutral) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06) !important;
}

.home-page--v2 .home-offer-cta-panel::before,
.home-page--v2 .home-offer-cta-panel::after {
    display: none !important;
}

.home-page--v2 .home-offer-cta-panel__copy span,
.home-page--v2 .home-offer-cta-panel__copy p {
    color: #334155 !important;
}

.home-page--v2 .home-btn-secondary,
.home-page--v2 .home-btn-outline {
    color: #111827 !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    .page-header-shell .site-navbar.navbar,
    .site-navbar.navbar {
        padding-top: 0.75rem !important;
    }

    .page--engineering-tool .site-navbar__inner {
        align-items: center;
        padding: 0.72rem;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 247, 250, 0.9)) !important;
    }

    .site-navbar__panel {
        position: relative;
        width: 100%;
        max-height: calc(100vh - 7rem);
        margin-top: 0.55rem;
        padding: 0.45rem;
        overflow-x: hidden;
        overflow-y: auto;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.98) !important;
        border: 1px solid var(--border-neutral);
        box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
    }

    .site-navbar__panel::before {
        display: none;
    }

    .site-navbar__mobile-console {
        display: none;
    }

    .site-navbar__actions {
        position: relative;
        z-index: 1;
        gap: 0.2rem;
        align-items: stretch !important;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .site-navbar__actions .nav-link,
    .culture-switch {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        margin: 0 !important;
        padding: 0.58rem 0.68rem !important;
        border-radius: 7px !important;
        color: var(--site-ink) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        font-family: inherit;
        font-size: 0.95rem;
        text-transform: none;
    }

    .page--engineering-chrome .site-navbar__panel .site-navbar__actions .nav-link,
    .page--engineering-tool .site-navbar__panel .site-navbar__actions .nav-link,
    .page--engineering-chrome .site-navbar__panel .culture-switch,
    .page--engineering-tool .site-navbar__panel .culture-switch {
        color: var(--site-ink) !important;
    }

    .site-navbar__actions .nav-link i:not(.nav-submenu-toggle__chevron) {
        display: inline-grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 6px;
        color: var(--site-blue);
        background: rgba(236, 244, 255, 0.96);
    }

    .site-navbar__actions .nav-link:hover,
    .site-navbar__actions .nav-link:focus,
    .site-navbar__actions .nav-link.active,
    .culture-switch:hover,
    .culture-switch:focus {
        color: var(--site-blue) !important;
        background: rgba(236, 244, 255, 0.96) !important;
        border-color: rgba(190, 211, 243, 0.9) !important;
        box-shadow: none !important;
    }

    .page--engineering-chrome .site-navbar__panel .site-navbar__actions .nav-link:hover,
    .page--engineering-chrome .site-navbar__panel .site-navbar__actions .nav-link:focus,
    .page--engineering-chrome .site-navbar__panel .site-navbar__actions .nav-link.active,
    .page--engineering-tool .site-navbar__panel .site-navbar__actions .nav-link:hover,
    .page--engineering-tool .site-navbar__panel .site-navbar__actions .nav-link:focus,
    .page--engineering-tool .site-navbar__panel .site-navbar__actions .nav-link.active {
        color: var(--site-blue) !important;
        background: rgba(236, 244, 255, 0.96) !important;
        border-color: rgba(190, 211, 243, 0.9) !important;
        box-shadow: none !important;
    }

    .site-navbar__dropdown-menu {
        border-radius: 7px !important;
        background: #f8fafc !important;
        border-color: var(--border-neutral) !important;
    }

    .site-navbar__dropdown-link {
        border-radius: 7px;
        background: #ffffff;
        border: 1px solid var(--border-neutral);
    }

    .site-navbar__dropdown-link strong,
    .site-navbar__dropdown-link span {
        color: var(--site-ink) !important;
    }

    .nav-submenu-toggle__chevron {
        margin-left: auto;
    }

    .site-navbar__dropdown.is-open .nav-submenu-toggle__chevron {
        transform: rotate(180deg);
    }
}

@media (max-width: 767.98px) {
    .page > main.page-main.page-main--engineering-tool {
        padding-top: 4.1rem !important;
    }

    .page-content {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .inner-page .cv-record-title-card,
    .inner-page .hero-summary-wrapper,
    .inner-page .cv-record-shell,
    .inner-page .inner-page__body,
    .info-wrap,
    .privacy-shell {
        padding: 1rem !important;
    }

    .inner-page .cv-record-title-card .hero-title,
    .inner-page .hero-summary-wrapper h1,
    .inner-page .hero-summary-wrapper .hero-title,
    .inner-page .hero-summary-wrapper .display-5 {
        font-size: clamp(1.8rem, 9vw, 2.45rem) !important;
    }
}

/* Final product identity cascade lock. */
body .birthday-hero {
    position: relative; isolation: isolate; display: grid; min-height: 500px; overflow: hidden;
    padding: 0; border: 0; border-radius: 30px; color: #fff; background: #3b1028;
    box-shadow: 0 30px 70px rgba(92,24,58,.24);
}
body .birthday-hero__status { display: flex; flex-wrap: wrap; gap: .55rem; }
body .birthday-hero__status span { color: #fff; }
body .birthday-package-card { border-radius: 18px; border-color: #f3d8e3; background: linear-gradient(180deg,#fff,#fff7fb); }
body .birthday-package-card.is-selected,
body .birthday-package-card:hover { border-color: #e5487c; box-shadow: 0 16px 32px rgba(229,72,124,.14); }
body .birthday-package-card em { color: #c52f68; }
body .forms-product-hero {
    position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,.95fr) minmax(400px,1.05fr);
    justify-content: initial; align-items: stretch; min-height: 480px; overflow: hidden; padding: 0; border: 0;
    border-radius: 30px; color: #fff; background: #123d92; box-shadow: 0 30px 70px rgba(32,81,165,.2);
}
body .mermaid-product-hero__proof.mermaid-product-hero__artwork {
    position: relative; display: block; overflow: hidden; min-height: 430px; border-radius: 26px;
    background: #030b23; box-shadow: 0 30px 70px rgba(3,11,35,.26);
}
@media (max-width: 767.98px) {
    body .birthday-hero, body .forms-product-hero { min-height: 590px; border-radius: 22px; }
    body .birthday-hero { display: grid; }
    body .forms-product-hero { display: grid; grid-template-columns: 1fr; }
    body .mermaid-product-hero__proof.mermaid-product-hero__artwork { min-height: 330px; }
}

/* Commercial solutions */
.home-products,
.solutions-page {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto 2rem;
}

.home-products {
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid rgba(148, 163, 184, .3);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,246,255,.92));
    box-shadow: 0 22px 60px rgba(15, 23, 42, .09);
}

.home-products__header,
.solutions-consulting {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
}

.home-products__header h2,
.solutions-hero h1 { color: #0f172a; letter-spacing: -.035em; }
.home-products__header h2 { margin: .35rem 0; font-size: clamp(1.7rem, 3vw, 2.45rem); }
.home-products__header p { margin: 0; color: #475569; }
.home-products__eyebrow,
.solutions-eyebrow,
.solution-status,
.home-product-card__status {
    display: inline-flex;
    width: fit-content;
    padding: .36rem .7rem;
    border-radius: 999px;
    color: #1d4ed8;
    background: #dbeafe;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.home-products__grid,
.solutions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 1.4rem; }
.home-product-card,
.solution-card { overflow: hidden; border: 1px solid #dbe4f0; border-radius: 22px; background: #fff; }
.home-product-card__visual,
.solution-card__visual { min-height: 150px; display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.2rem; background: linear-gradient(135deg, #eff6ff, #f5f3ff); }
.home-product-card--nutri .home-product-card__visual,
.solution-card--nutri .solution-card__visual { background: linear-gradient(135deg, #ecfdf5, #eff6ff); }
.home-product-card__visual > img { width: 62px; height: 62px; object-fit: contain; border-radius: 14px; }
.home-product-card__visual > div { display: flex; align-items: center; gap: .65rem; }
.home-product-card__visual code,
.home-product-card__visual span { padding: .55rem .7rem; border: 1px solid #cbd5e1; border-radius: 10px; background: rgba(255,255,255,.88); color: #172554; }
.home-product-card__body,
.solution-card__body { display: grid; gap: .8rem; padding: 1.3rem; }
.home-product-card__body h3,
.solution-card__body h2 { margin: 0; color: #0f172a; }
.home-product-card__body p,
.solution-card__body p { margin: 0; color: #475569; line-height: 1.65; }
.home-product-card__actions,
.solution-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem; }

.solutions-page { padding-top: 1.5rem; }
.solutions-hero { max-width: 780px; padding: clamp(1.5rem, 4vw, 3rem) 0 1rem; }
.solutions-hero h1 { margin: .7rem 0; font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.04; }
.solutions-hero p { color: #475569; font-size: 1.08rem; line-height: 1.7; }
.solution-card__visual { min-height: 230px; }
.solution-card__visual > img { width: 92px; height: 92px; border-radius: 20px; }
.solution-code,
.solution-nutrition { padding: 1rem; border: 1px solid #bfdbfe; border-radius: 14px; background: #fff; color: #172554; }
.solution-diagram { display: grid; gap: .45rem; }
.solution-diagram span { display: block; width: 86px; height: 24px; border: 2px solid #6366f1; border-radius: 7px; background: #eef2ff; }
.solution-nutrition { display: grid; gap: .2rem; }
.solution-card__body ul { display: grid; gap: .45rem; margin: 0; padding-left: 1.15rem; color: #334155; }
.solutions-consulting { margin-top: 1.3rem; padding: 1.4rem; border-radius: 20px; background: #0f172a; color: #fff; }
.solutions-consulting h2 { margin: .45rem 0 0; color: #fff; }

@media (max-width: 780px) {
    .home-products__grid,
    .solutions-grid { grid-template-columns: 1fr; }
    .home-products__header,
    .solutions-consulting { align-items: stretch; flex-direction: column; }
    .solution-card__visual { min-height: 180px; }
}

/* --- Commercial solutions: presentation polish -------------------------------
   Presentation only. No markup, routing, localisation or behaviour depends on
   anything below. Grouped here so it can be reviewed or reverted as one unit. */

/* The legacy template rule `section, .section { background-color: … }` in
   assets/css/main.css paints every <section> opaque white. On /solutions that
   turned the 780px hero measure into a hard white block with a ragged right
   edge, and the grid into a second full-width white band. These sections are
   layout containers, not surfaces — the cards below carry the surface. */
.solutions-hero,
.solutions-grid { background: transparent; }

/* One radius for panel-level surfaces. Cards were 22px, the consulting band
   20px; a 2px difference reads as an accident rather than a scale. */
.solutions-consulting { border-radius: 22px; }

/* Equal-height cards were already correct, but the action rows floated with the
   text, so a 3-line description pushed one card's buttons 26px below its
   sibling's. Anchor the actions to the bottom of the body instead. */
.home-product-card,
.solution-card { display: flex; flex-direction: column; }

.home-product-card__body,
.solution-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.home-product-card__actions,
.solution-card__actions { margin-top: auto; }

/* Match both homepage products to one cinematic media ratio. The NutriApexa
   demo replaces its former icon strip, while Mermaid2Visio grows to the same
   proportional height so the two cards remain balanced. */
.home-product-card__visual,
.solution-card__visual {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.home-product-card__visual--video,
.solution-card__visual--video {
    display: block;
    padding: 0;
    background: #07110c url('/img/nutriapexa/home-card-promo-v1.webp') center / cover no-repeat;
}

.home-product-card__video,
.solution-card__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

.home-product-card__visual--mermaid,
.solution-card__visual--mermaid {
    position: relative;
    display: block;
    padding: 0;
    isolation: isolate;
    background: #f5f8ff;
}

.home-product-card__picture,
.home-product-card__artwork,
.solution-card__picture,
.solution-card__artwork {
    display: block;
    width: 100%;
    height: 100%;
}

.home-product-card__artwork,
.solution-card__artwork {
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease, filter .45s ease;
}

.home-product-card__media-overlay,
.solution-card__media-overlay {
    position: absolute;
    z-index: 1;
    left: clamp(.65rem, 2vw, 1rem);
    bottom: clamp(.65rem, 2vw, 1rem);
    display: flex;
    align-items: center;
    gap: clamp(.35rem, 1vw, .6rem);
    max-width: calc(100% - 1.3rem);
    padding: .42rem .55rem;
    border: 1px solid rgba(147, 171, 221, .55);
    border-radius: 13px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 24px rgba(40, 66, 130, .16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .35s ease, box-shadow .35s ease;
}

.home-product-card__media-overlay > img,
.solution-card__media-overlay > img {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    object-fit: contain;
}

.home-product-card__media-overlay code,
.home-product-card__media-overlay span,
.solution-card__media-overlay code,
.solution-card__media-overlay span {
    padding: .34rem .46rem;
    border: 1px solid rgba(148, 163, 184, .5);
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    color: #172554;
    font-size: clamp(.7rem, 1.5vw, .82rem);
    white-space: nowrap;
}

.home-product-card__flow-icon,
.solution-card__flow-icon {
    color: #4f46e5;
    transition: transform .35s ease, color .35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .home-product-card--mermaid:hover .home-product-card__artwork {
        transform: scale(1.025);
        filter: saturate(1.04) contrast(1.015);
    }

    .solution-card--mermaid:hover .solution-card__artwork {
        transform: scale(1.025);
        filter: saturate(1.04) contrast(1.015);
    }

    .home-product-card--mermaid:hover .home-product-card__media-overlay {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(79, 70, 229, .2);
    }

    .solution-card--mermaid:hover .solution-card__media-overlay {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(79, 70, 229, .2);
    }

    .home-product-card--mermaid:hover .home-product-card__flow-icon {
        transform: translateX(3px);
        color: #2563eb;
    }

    .solution-card--mermaid:hover .solution-card__flow-icon {
        transform: translateX(3px);
        color: #2563eb;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-product-card__artwork,
    .home-product-card__media-overlay,
    .home-product-card__flow-icon,
    .solution-card__artwork,
    .solution-card__media-overlay,
    .solution-card__flow-icon { transition: none; }
}

/* Give the flagship product the same visual weight as the free one: the
   Mermaid mark rendered smaller and lighter than the NutriApexa app icon. */
.home-product-card__visual > img,
.home-product-card__visual > svg { width: 72px; height: 72px; }

/* Three identical outlined pills read as a loading skeleton. Varying the widths
   makes them read as diagram shapes, which is what they represent. */
.solution-diagram span:nth-child(1) { width: 92px; }
.solution-diagram span:nth-child(2) { width: 74px; }
.solution-diagram span:nth-child(3) { width: 86px; }

@media (max-width: 780px) {
    /* Stacked CTAs were left-aligned at their intrinsic widths (≈225px above
       ≈155px), which reads as misalignment rather than a primary/secondary
       pair. Match widths once they stack. */
    .home-product-card__actions,
    .solution-card__actions { align-items: stretch; }

    .home-product-card__actions > .btn,
    .solution-card__actions > .btn {
        flex: 1 1 100%;
        justify-content: center;
        text-align: center;
    }
}

/* The consent card is fixed bottom-left and near-opaque, so on short pages it
   lands on top of content — including the product cards' purchase CTAs. Reserve
   scroll clearance while it is on screen so nothing can end up permanently
   unreachable beneath it. Guarded by @supports: where :has() is unavailable the
   previous behaviour is kept unchanged.

   This mitigates the overlap; it does not eliminate it. Whether the banner
   should stay a corner card or become a slim full-width bar is a design
   decision and is deliberately left open. */
@supports selector(body:has(*)) {
    body:has(.cookie-banner:not([hidden])) .page-content,
    body:has(.cookie-banner:not([hidden])) .solutions-page {
        padding-bottom: clamp(9rem, 20vh, 13rem);
    }
}

.mermaid-how {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto 1.2rem;
    padding: clamp(1.2rem, 3vw, 2rem);
    border: 1px solid #dbe4f0;
    border-radius: 24px;
    background: #fff;
}
.mermaid-how header h2 { max-width: 760px; margin: .4rem 0 1.2rem; color: #0f172a; }
.mermaid-how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.mermaid-how__grid article { position: relative; padding: 1.1rem; border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; }
.mermaid-how__grid article > span { position: absolute; top: .75rem; right: .75rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #dbeafe; color: #1d4ed8; font-weight: 800; }
.mermaid-how__grid article > i { color: #4f46e5; font-size: 1.45rem; }
.mermaid-how__grid h3 { margin: .7rem 0 .35rem; color: #172554; font-size: 1.05rem; }
.mermaid-how__grid p { margin: 0; color: #475569; line-height: 1.55; }
.mermaid-how__trust { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.mermaid-how__trust span { padding: .48rem .72rem; border-radius: 999px; background: #ecfdf5; color: #065f46; font-size: .86rem; font-weight: 650; }
@media (max-width: 780px) { .mermaid-how__grid { grid-template-columns: 1fr; } }
/* Shared converter workbench: source -> visual review -> output. */
.converter-output-actions {
    display: grid;
    gap: .7rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #dbe7f6;
}

.converter-visual-review {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.converter-visual-review.has-source-image {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.converter-visual-review__source,
.converter-source-preview {
    display: grid;
    min-width: 0;
    gap: .55rem;
    margin: 0;
    padding: .75rem;
    border: 1px solid #dbe7f6;
    border-radius: 14px;
    background: #f8fbff;
}

.converter-visual-review__source figcaption,
.converter-source-preview figcaption,
.converter-visual-review__result > strong {
    color: #334155;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.converter-visual-review__source img,
.converter-source-preview img {
    display: block;
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    border-radius: 10px;
    background: #fff;
}

.converter-visual-review__result {
    display: grid;
    min-width: 0;
    gap: .55rem;
}

.converter-source-preview {
    margin-bottom: 1rem;
}

@media (max-width: 767px) {
    .converter-visual-review.has-source-image {
        grid-template-columns: 1fr;
    }

    .reverse-converter__actions .btn,
    .converter-output-actions > .btn,
    .converter-output-actions > a.btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .page--mermaid-product-domain .security-proof-band {
        gap: .7rem;
        padding: .9rem;
    }

    .page--mermaid-product-domain .security-proof-band__icons {
        flex-direction: row;
    }

    .page--mermaid-product-domain .security-proof-band .diagram-type-strip {
        display: none;
    }
}
/* Persistent, first-party continuation for an unfinished Stripe journey. */
.m2v-resume-checkout {
    position: sticky;
    top: 0;
    z-index: 1025;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem max(1rem, calc((100vw - 1320px) / 2));
    color: #eaf2ff;
    background: linear-gradient(90deg, #172554, #1e3a8a);
    border-bottom: 1px solid rgba(147, 197, 253, .35);
    box-shadow: 0 .35rem 1rem rgba(15, 23, 42, .18);
}

.m2v-resume-checkout__copy,
.m2v-resume-checkout__actions {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.m2v-resume-checkout .btn-link {
    color: #dbeafe;
    padding-inline: .35rem;
}

@media (max-width: 575.98px) {
    .m2v-resume-checkout {
        align-items: flex-start;
        padding: .65rem .85rem;
    }

    .m2v-resume-checkout__copy span {
        display: grid;
    }
}

/* Cycle 4 — shared converter stepper (Components/Converters/ConverterStepper.razor) */
.converter-stepper { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1.25rem; }
.converter-stepper__steps { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.converter-stepper__step { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem 0.35rem 0.4rem; border-radius: 999px; border: 1px solid #d5d9e6; background: #fff; color: #6c757d; font-weight: 600; font-size: 0.9rem; }
.converter-stepper__number { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #e9ecf5; color: #4a5068; font-size: 0.85rem; font-weight: 700; }
.converter-stepper__step.is-current { border-color: #4f46e5; color: #1f2340; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }
.converter-stepper__step.is-current .converter-stepper__number { background: #4f46e5; color: #fff; }
.converter-stepper__step.is-done { border-color: #198754; color: #14532d; }
.converter-stepper__step.is-done .converter-stepper__number { background: #198754; color: #fff; }
.converter-stepper__step.is-blocked { border-color: #b45309; color: #7c2d12; }
.converter-stepper__step.is-blocked .converter-stepper__number { background: #b45309; color: #fff; }
.converter-stepper__status { display: flex; align-items: center; margin: 0; color: #1f2340; font-weight: 600; }
@media (max-width: 575px) { .converter-stepper__step { font-size: 0.82rem; padding-right: 0.55rem; } }

/* Cycle 4 — collapsed details (Components/Converters/ConverterDetails.razor) */
.converter-details { margin-top: 1rem; }
.converter-details__toggle { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid #d5d9e6; background: #fff; color: #1f2340; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.converter-details__toggle:hover, .converter-details__toggle:focus-visible { border-color: #4f46e5; outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15); }
.converter-details__summary { color: #6c757d; font-weight: 500; }
.converter-details__panel { margin-top: 0.75rem; }

/* Cycle 4 batch 7 — stepper: "ready" step, client-side busy marker, stacked comparison */
.converter-stepper__step.is-ready { border-color: #198754; color: #14532d; border-style: dashed; }
.converter-stepper__step.is-ready .converter-stepper__number { background: #fff; color: #198754; border: 2px solid #198754; }
.converter-stepper__client-status { display: none; align-items: center; }
.converter-stepper.is-client-busy .converter-stepper__server-status { display: none; }
.converter-stepper.is-client-busy .converter-stepper__client-status { display: inline-flex; }
.converter-visual-review.is-stacked { grid-template-columns: 1fr; }
.converter-visual-review.is-stacked .converter-visual-review__source img { max-height: none; }
.converter-visual-review__stack-toggle { justify-self: end; }

/* Cycle 4 batch 8 — while the client-side busy marker is on, step 1 reads as done and step 2 as current */
.converter-stepper.is-client-busy .converter-stepper__step:nth-child(1) { border-color: #198754; color: #14532d; box-shadow: none; }
.converter-stepper.is-client-busy .converter-stepper__step:nth-child(1) .converter-stepper__number { background: #198754; color: #fff; }
.converter-stepper.is-client-busy .converter-stepper__step:nth-child(2) { border-color: #4f46e5; color: #1f2340; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }
.converter-stepper.is-client-busy .converter-stepper__step:nth-child(2) .converter-stepper__number { background: #4f46e5; color: #fff; }

/* Cycle 4 batch 10 — D-077: until the circuit is interactive, convert buttons look pending and a click says so */
html:not(.circuit-ready) [data-immediate-busy] { cursor: progress; }
.converter-stepper__connecting-status { display: none; align-items: center; color: #7c2d12; }
.converter-stepper.is-client-connecting .converter-stepper__server-status,
.converter-stepper.is-client-connecting .converter-stepper__client-status { display: none; }
.converter-stepper.is-client-connecting .converter-stepper__connecting-status { display: inline-flex; }

/* D-077b — CSS-only: until the circuit is interactive the stepper says "Connecting…", even before any script has loaded */
html:not(.circuit-ready) .converter-stepper__server-status { display: none; }
html:not(.circuit-ready) .converter-stepper__connecting-status { display: inline-flex; }
.mermaid-preview-loading, .mermaid-preview-skipped { margin: 0; padding: 1rem; color: #4a5068; font-size: 0.9rem; }