@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("/fonts/material-symbols-rounded.woff2") format("woff2");
}

:root {
    --ink: #11172f;
    --muted: #677089;
    --line: #e7e9f2;
    --soft: #f6f7fb;
    --panel: #fff;
    --primary: #6048e8;
    --primary-dark: #4b32d1;
    --primary-soft: #eeeaff;
    --success: #168b68;
    --danger: #d34855;
    --amber: #b87008;
    --shadow: 0 18px 60px rgba(28, 30, 64, .12);
    --radius: 18px;
}

.material-symbols-rounded {
    display: inline-block;
    overflow: hidden;
    font-family: "Material Symbols Rounded";
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    font-variation-settings: "FILL" 0, "wght" 420, "GRAD" 0, "opsz" 24;
    letter-spacing: normal;
    line-height: 1;
    text-transform: none;
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}

.material-symbols-rounded.is-filled,
.active > .material-symbols-rounded {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background: #fff;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
}

body {
    overflow-x: hidden;
}

a {
    color: inherit;
}

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

button, a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid rgba(96, 72, 232, .35);
    outline-offset: 3px;
}

h1:focus {
    outline: none;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.03em;
    text-decoration: none;
}

.brand img {
    filter: drop-shadow(0 6px 12px rgba(80, 53, 215, .2));
    object-fit: contain;
}

.brand--dark {
    color: var(--ink);
}

.brand--light {
    color: #fff;
}

.button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .72rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button--primary {
    color: #fff;
    background: linear-gradient(135deg, #735bf4, #5239d8);
    box-shadow: 0 8px 22px rgba(82, 57, 216, .23);
}

.button--primary:hover {
    color: #fff;
    box-shadow: 0 12px 28px rgba(82, 57, 216, .31);
}

.button--ghost {
    color: var(--ink);
    background: #fff;
    border-color: #dfe1eb;
}

.button--ghost:hover {
    background: var(--soft);
}

.button--text {
    color: var(--ink);
    background: transparent;
}

.button--small {
    min-height: 36px;
    padding: .55rem .75rem;
    gap: .4rem;
    border-radius: 9px;
    font-size: .78rem;
}

.button--large {
    min-height: 52px;
    padding-inline: 1.4rem;
    border-radius: 13px;
}

.button--block {
    width: 100%;
}

.button > .material-symbols-rounded {
    font-size: 1.08rem;
}

.inline-link {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.inline-link .material-symbols-rounded {
    font-size: .95rem;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--primary);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.eyebrow > span {
    width: 24px;
    height: 1px;
    background: currentColor;
}

.marketing-nav {
    width: min(1440px, calc(100% - 7vw));
    min-height: 84px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.marketing-nav--solid {
    border-bottom: 1px solid var(--line);
}

.marketing-nav__links {
    display: flex;
    align-items: center;
    gap: 2.1rem;
}

.marketing-nav__links a {
    color: #4e566c;
    font-size: .88rem;
    font-weight: 650;
    text-decoration: none;
}

.marketing-nav__links a:hover {
    color: var(--primary);
}

.marketing-nav__actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
}

.hero {
    min-height: 690px;
    display: grid;
    grid-template-columns: minmax(420px, .83fr) minmax(640px, 1.17fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 7rem);
    padding: 5rem max(3.5vw, calc((100vw - 1440px) / 2));
    background:
        radial-gradient(circle at 83% 42%, rgba(113, 86, 255, .13), transparent 31rem),
        linear-gradient(180deg, #fff 0%, #fbfaff 100%);
}

.hero__copy {
    position: relative;
    z-index: 2;
}

.hero h1,
.section-heading h1,
.section-heading h2,
.solution-hero h1,
.final-cta h2 {
    margin: 1.25rem 0 1.3rem;
    color: #12162a;
    font-size: clamp(3rem, 5vw, 5.2rem);
    line-height: .99;
    letter-spacing: -.065em;
}

.hero h1 em,
.section-heading h1 em,
.section-heading h2 em,
.solution-hero h1 em {
    color: var(--primary);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 500;
}

.hero__copy > p {
    max-width: 620px;
    margin: 0;
    color: #626b80;
    font-size: 1.08rem;
    line-height: 1.7;
}

.hero__actions {
    display: flex;
    gap: .6rem;
    margin-top: 2rem;
}

.hero__proof {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.2rem;
}

.hero__proof p {
    margin: 0;
    color: #777f91;
    font-size: .74rem;
    line-height: 1.5;
}

.hero__proof strong {
    color: #353b50;
    font-size: .78rem;
}

.avatar-stack {
    display: flex;
    padding-left: 9px;
}

.avatar-stack span {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    margin-left: -9px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: #5340be;
    font-size: .56rem;
    font-weight: 800;
}

.avatar-stack span:nth-child(2) {
    background: #cb7855;
}

.avatar-stack span:nth-child(3) {
    background: #177867;
}

.hero-preview {
    min-width: 760px;
    position: relative;
    perspective: 1800px;
}

.preview-window {
    height: 550px;
    display: grid;
    grid-template-columns: 170px 1fr;
    overflow: hidden;
    border: 1px solid #e3e5ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 34px 90px rgba(35, 31, 85, .18);
    transform: rotateY(-4deg) rotateX(1deg);
    transform-origin: left center;
}

.preview-sidebar {
    display: flex;
    flex-direction: column;
    padding: 17px 11px 13px;
    color: #daddf1;
    background: #151931;
}

.preview-brand {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 7px 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.preview-brand img {
    width: 24px;
    height: 24px;
}

.preview-org {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
}

.preview-org > span,
.preview-user > span,
.preview-top > span {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: white;
    background: linear-gradient(135deg, #7a61f6, #4e36cf);
    font-size: 8px;
    font-weight: 800;
}

.preview-org p,
.preview-user p {
    min-width: 0;
    flex: 1;
    margin: 0;
    color: white;
    font-size: 8px;
    font-weight: 700;
}

.preview-org small,
.preview-user small {
    display: block;
    margin-top: 2px;
    color: #9298af;
    font-size: 6.4px;
    font-weight: 500;
}

.preview-org b {
    color: #7c8298;
    font-size: 9px;
}

.preview-nav {
    display: grid;
    gap: 3px;
    margin-top: 16px;
}

.preview-nav > span {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 9px;
    border-radius: 7px;
    color: #8f95ae;
    font-size: 8.5px;
}

.preview-nav > span.active {
    color: white;
    background: rgba(119, 91, 245, .19);
}

.preview-nav .material-symbols-rounded {
    flex: 0 0 15px;
    font-size: 11px;
}

.preview-nav b {
    flex: 1;
    font-weight: 650;
}

.preview-nav i {
    min-width: 16px;
    padding: 2px 4px;
    border-radius: 8px;
    color: #bfb8ff;
    background: rgba(111, 83, 236, .2);
    font-size: 6px;
    font-style: normal;
    text-align: center;
}

.preview-user {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 9px 7px 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.preview-main {
    min-width: 0;
    background: #f7f8fc;
}

.preview-top {
    height: 57px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
    border-bottom: 1px solid #eceef4;
    background: #fff;
}

.preview-top > div {
    flex: 1;
}

.preview-top small {
    display: block;
    margin-bottom: 2px;
    color: #9aa0b0;
    font-size: 6.8px;
}

.preview-top strong {
    display: block;
    font-size: 11px;
}

.preview-top button {
    width: 28px;
    height: 28px;
    border: 1px solid #e8eaf0;
    border-radius: 7px;
    color: #667086;
    background: #fff;
    font-size: 11px;
}

.preview-body {
    padding: 22px;
}

.preview-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.preview-heading h2 {
    margin: 0 0 4px;
    font-size: 18px;
    letter-spacing: -.04em;
}

.preview-heading p {
    margin: 0;
    color: #858b9b;
    font-size: 8px;
}

.preview-heading button {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    color: #fff;
    background: var(--primary);
    font-size: 7px;
    font-weight: 700;
}

.preview-heading button .material-symbols-rounded {
    font-size: 9px;
}

.preview-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 18px;
}

.preview-metrics article {
    min-width: 0;
    padding: 12px;
    border: 1px solid #e9ebf2;
    border-radius: 10px;
    background: white;
}

.preview-metrics small {
    display: block;
    overflow: hidden;
    color: #777e91;
    font-size: 6.4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-metrics strong {
    display: block;
    margin: 7px 0 4px;
    font-size: 19px;
}

.preview-metrics em {
    display: block;
    color: #9096a5;
    font-size: 5.8px;
    font-style: normal;
}

.preview-metrics em.positive {
    color: var(--success);
}

.preview-metrics em.danger {
    color: var(--danger);
}

.preview-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 11px;
    margin-top: 12px;
}

.preview-card {
    padding: 14px;
    border: 1px solid #e9ebf2;
    border-radius: 10px;
    background: white;
}

.card-title {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.card-title > div {
    flex: 1;
}

.card-title strong {
    display: block;
    font-size: 9px;
}

.card-title small {
    display: block;
    margin-top: 3px;
    color: #9a9fad;
    font-size: 6px;
}

.card-title a,
.card-title > span {
    color: var(--primary);
    font-size: 6px;
    text-decoration: none;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-top: 1px solid #f0f1f5;
}

.task-check {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border: 1px solid #cdd1dc;
    border-radius: 50%;
}

.task-row > div {
    min-width: 0;
    flex: 1;
}

.task-row strong,
.task-row small {
    display: block;
    overflow: hidden;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-row small {
    margin-top: 3px;
    color: #979caa;
    font-size: 5.8px;
}

.pill {
    padding: 3px 5px;
    border-radius: 8px;
    color: #697083;
    background: #f0f1f5;
    font-size: 5px;
    font-style: normal;
}

.pill--high {
    color: #a75e00;
    background: #fff2d8;
}

.pill--urgent {
    color: #c74451;
    background: #ffe9eb;
}

.stage-chart {
    display: grid;
    gap: 13px;
    margin-top: 18px;
}

.stage-chart > div {
    display: grid;
    grid-template-columns: 53px 1fr 12px;
    align-items: center;
    gap: 7px;
    color: #737a8d;
    font-size: 6px;
}

.stage-chart b {
    height: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: #f0f1f6;
}

.stage-chart i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #785ff5, #a897ff);
}

.stage-chart strong {
    color: #373d50;
    font-size: 6.4px;
}

.floating-proof {
    position: absolute;
    right: 8%;
    bottom: -26px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 17px;
    border: 1px solid #e6e8ef;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 15px 40px rgba(35, 31, 85, .18);
}

.floating-proof > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--success);
    font-size: 15px;
}

.floating-proof p {
    margin: 0;
}

.floating-proof strong,
.floating-proof small {
    display: block;
    font-size: 8px;
}

.floating-proof small {
    margin-top: 3px;
    color: #8c92a1;
    font-size: 6px;
}

.sectors {
    padding: 3.3rem 5vw;
    text-align: center;
    border-block: 1px solid var(--line);
}

.sectors p {
    margin: 0 0 1.8rem;
    color: #9298a8;
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sectors div {
    display: flex;
    justify-content: center;
    gap: clamp(2rem, 7vw, 7rem);
}

.sectors a {
    color: #5d6374;
    font-family: Georgia, serif;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    font-weight: 600;
    text-decoration: none;
}

.sectors a:hover {
    color: var(--primary);
}

.value-section {
    padding: 8rem max(5vw, calc((100vw - 1280px) / 2));
}

.section-heading {
    max-width: 780px;
    margin: 0 auto 4.5rem;
    text-align: center;
}

.section-heading h1,
.section-heading h2 {
    margin-top: 1rem;
    font-size: clamp(2.5rem, 4.3vw, 4.3rem);
}

.section-heading > p {
    max-width: 650px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.value-grid article {
    min-height: 325px;
    padding: 2.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(150deg, #fff, #fafaff);
}

.feature-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #ddd8ff;
    border-radius: 13px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 1.4rem;
}

.value-grid h3 {
    margin: 3rem 0 .8rem;
    font-size: 1.25rem;
    letter-spacing: -.03em;
}

.value-grid p {
    min-height: 72px;
    margin: 0;
    color: var(--muted);
    font-size: .91rem;
    line-height: 1.65;
}

.value-grid a {
    display: inline-block;
    margin-top: 1.3rem;
    color: var(--primary);
    font-size: .83rem;
    font-weight: 750;
    text-decoration: none;
}

.value-grid a.inline-link {
    display: inline-flex;
}

.workflow-section {
    padding: 8rem max(5vw, calc((100vw - 1280px) / 2));
    color: #fff;
    background:
        radial-gradient(circle at 15% 15%, rgba(113, 86, 255, .25), transparent 25rem),
        #14182e;
}

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

.section-heading--light .eyebrow {
    color: #a99bff;
}

.workflow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: rgba(255, 255, 255, .1);
}

.workflow li {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    padding: 1.7rem;
    background: #171b34;
}

.workflow li > span {
    color: #8e82d7;
    font-family: Georgia, serif;
    font-size: .85rem;
}

.workflow li > div {
    margin-top: auto;
}

.workflow h3 {
    margin: 0 0 .8rem;
    font-size: 1.2rem;
}

.workflow p {
    margin: 0;
    color: #a9aec0;
    font-size: .86rem;
    line-height: 1.6;
}

.final-cta {
    padding: 8rem 1.5rem;
    text-align: center;
    background: #faf9ff;
}

.final-cta h2 {
    margin: 1.4rem auto;
    font-size: clamp(2.4rem, 4.5vw, 4.3rem);
}

.final-cta p {
    margin-bottom: 2rem;
    color: var(--muted);
}

.final-cta small {
    display: block;
    margin-top: 1rem;
    color: #969baa;
    font-size: .72rem;
}

.marketing-footer {
    display: grid;
    grid-template-columns: 1fr 1.3fr auto;
    align-items: center;
    gap: 2rem;
    padding: 3rem max(5vw, calc((100vw - 1280px) / 2));
    color: #aeb2c2;
    background: #101428;
}

.marketing-footer p {
    margin: 0;
    font-size: .8rem;
}

.marketing-footer nav {
    display: flex;
    gap: 1.5rem;
}

.marketing-footer nav a {
    color: #d8dbe6;
    font-size: .78rem;
    text-decoration: none;
}

.marketing-footer small {
    grid-column: 1 / -1;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #74798d;
}

.pricing-page,
.solution-page {
    min-height: calc(100vh - 84px);
    padding: 6.5rem max(5vw, calc((100vw - 1200px) / 2));
    background: linear-gradient(180deg, #fff, #f8f7ff);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 1rem;
}

.pricing-grid article {
    position: relative;
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
}

.pricing-grid article.featured {
    border-color: #7b64eb;
    box-shadow: var(--shadow);
}

.pricing-grid .popular {
    position: absolute;
    top: 0;
    right: 1.5rem;
    padding: .45rem .7rem;
    border-radius: 0 0 8px 8px;
    color: white;
    background: var(--primary);
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.pricing-grid article > span {
    color: var(--primary);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .1em;
}

.pricing-grid h2 {
    margin: 1.2rem 0 .7rem;
    font-size: 2.8rem;
    letter-spacing: -.05em;
}

.pricing-grid h2 small {
    font-size: .75rem;
}

.pricing-grid h2 em {
    color: var(--muted);
    font-size: .8rem;
    font-style: normal;
    font-weight: 500;
}

.pricing-grid p {
    min-height: 72px;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.6;
}

.pricing-grid ul {
    display: grid;
    gap: .8rem;
    margin: 1.7rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    color: #51596e;
    font-size: .82rem;
}

.pricing-grid li::before {
    content: "check";
    font-family: "Material Symbols Rounded";
    font-size: .95rem;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 20;
    line-height: 1;
    vertical-align: -.15rem;
    margin-right: .6rem;
    color: var(--success);
    font-weight: 800;
}

.solution-hero {
    display: grid;
    grid-template-columns: 1fr 440px;
    align-items: center;
    gap: 6rem;
}

.solution-hero h1 {
    font-size: clamp(3rem, 5vw, 5rem);
}

.solution-hero > div:first-child > p {
    max-width: 650px;
    margin-bottom: 2rem;
    color: var(--muted);
    font-size: 1.03rem;
    line-height: 1.7;
}

.solution-card {
    padding: 2rem;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: var(--shadow);
}

.solution-card > span {
    color: var(--primary);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .1em;
}

.solution-card h2 {
    margin: .7rem 0 1.7rem;
    font-size: 1.65rem;
    letter-spacing: -.04em;
}

.solution-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.solution-meta p {
    margin: 0;
    padding: 1rem;
    border-radius: 10px;
    background: var(--soft);
}

.solution-meta small,
.solution-meta strong {
    display: block;
}

.solution-meta small {
    margin-bottom: .4rem;
    color: #9096a8;
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .08em;
}

.solution-meta strong {
    font-size: .8rem;
}

.solution-progress {
    margin: 1.5rem 0;
}

.solution-progress > span {
    height: 7px;
    display: block;
    border-radius: 5px;
    background: #eeeff4;
}

.solution-progress b {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #7057ed, #9e8dff);
}

.solution-progress small {
    display: block;
    margin-top: .55rem;
    color: #7d8496;
    font-size: .68rem;
}

.solution-card ul {
    display: grid;
    gap: .8rem;
    margin: 0;
    padding: 1.3rem 0 0;
    border-top: 1px solid var(--line);
    list-style: none;
    font-size: .79rem;
}

.solution-card li {
    display: flex;
    gap: .65rem;
}

.solution-card li i {
    color: var(--success);
    font-style: normal;
}

.solution-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 7rem;
}

.solution-benefits article {
    padding: 2rem;
    border-top: 1px solid #cbc5ef;
}

.solution-benefits article > span {
    color: var(--primary);
    font-family: Georgia, serif;
    font-size: .75rem;
}

.solution-benefits h3 {
    margin: 2rem 0 .8rem;
}

.solution-benefits p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.65;
}

.product-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    background: #f6f7fb;
}

.product-sidebar {
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 1.35rem .9rem 1rem;
    color: #cbd0e1;
    background: #14182f;
}

.product-sidebar-backdrop {
    display: none;
}

.sidebar-close {
    display: none;
}

.product-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 .7rem 1.25rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 820;
    text-decoration: none;
}

.product-brand img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: drop-shadow(0 8px 15px rgba(71, 52, 196, .28));
}

.org-switcher {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .65rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 11px;
    color: inherit;
    background: rgba(255, 255, 255, .035);
    text-align: left;
    cursor: pointer;
}

.org-switcher > span,
.sidebar-user > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #765cf1, #4c33cf);
    font-size: .66rem;
    font-weight: 850;
}

.org-switcher > span > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.org-switcher p,
.sidebar-user p {
    min-width: 0;
    flex: 1;
    margin: 0;
    overflow: hidden;
    color: #f6f7fb;
    font-size: .75rem;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-switcher small,
.sidebar-user small {
    display: block;
    margin-top: .2rem;
    overflow: hidden;
    color: #7f879e;
    font-size: .6rem;
    font-weight: 500;
    text-overflow: ellipsis;
}

.org-switcher b {
    color: #747c94;
    font-size: 1.1rem;
}

.skeleton-block {
    animation: skeleton 1.3s ease-in-out infinite alternate;
}

.organization-menu {
    position: absolute;
    top: 125px;
    right: .9rem;
    left: .9rem;
    z-index: 4;
    overflow: hidden;
    border: 1px solid #30364f;
    border-radius: 10px;
    background: #20253d;
    box-shadow: 0 16px 30px rgba(0, 0, 0, .3);
}

.organization-menu button {
    width: 100%;
    display: block;
    padding: .75rem;
    border: 0;
    border-bottom: 1px solid #30364f;
    color: #fff;
    background: transparent;
    font-size: .72rem;
    text-align: left;
}

.organization-menu button:hover {
    background: #2a304a;
}

.organization-menu small {
    display: block;
    margin-top: .2rem;
    color: #8f96aa;
    font-size: .58rem;
}

.product-nav {
    display: grid;
    gap: .2rem;
    margin-top: 1.2rem;
}

.product-nav a {
    min-height: 39px;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 .75rem;
    border-radius: 8px;
    color: #8f96ad;
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
}

.product-nav a > span {
    width: 19px;
    color: #777f99;
    font-size: 1.1rem;
    text-align: center;
}

.product-nav a > i {
    min-width: 20px;
    margin-left: auto;
    padding: .18rem .35rem;
    border-radius: 8px;
    color: #b7afff;
    background: rgba(112, 84, 237, .18);
    font-size: .56rem;
    font-style: normal;
    text-align: center;
}

.product-nav a.active {
    color: #fff;
    background: rgba(111, 83, 237, .16);
}

.product-nav a.active > span {
    color: #9f90ff;
}

.product-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .045);
}

.product-nav--secondary {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
    padding: .8rem .65rem 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.sidebar-user > span {
    width: 31px;
    height: 31px;
    border-radius: 50%;
}

.sidebar-user > a {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #7e859b;
    text-decoration: none;
}

.sidebar-user > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.sidebar-user > a .material-symbols-rounded {
    font-size: 1.1rem;
}

.product-stage {
    min-width: 0;
}

.product-topbar {
    height: 70px;
    display: flex;
    align-items: center;
    gap: .65rem;
    position: sticky;
    top: 0;
    z-index: 15;
    padding: 0 clamp(1.2rem, 3vw, 2.8rem);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(15px);
}

.product-topbar > div {
    flex: 1;
}

.product-topbar small,
.product-topbar strong {
    display: block;
}

.product-topbar small {
    margin-bottom: .25rem;
    color: #989eae;
    font-size: .62rem;
    text-transform: capitalize;
}

.product-topbar strong {
    font-size: .8rem;
}

.topbar-action,
.mobile-menu {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid #e6e8ef;
    border-radius: 9px;
    color: #596177;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
}

.topbar-action .material-symbols-rounded,
.mobile-menu .material-symbols-rounded {
    font-size: 1.1rem;
}

.mobile-menu {
    display: none;
}

.topbar-avatar {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: white;
    background: #1f7464;
    font-size: .64rem;
    font-weight: 800;
    text-decoration: none;
}

.product-content {
    width: min(1500px, 100%);
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.8rem);
}

.page-loading {
    min-height: 50vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    color: #7f879a;
}

.page-loading span {
    width: 30px;
    height: 30px;
    border: 3px solid #ddd8ff;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.page-loading p {
    margin: 0;
    font-size: .78rem;
}

.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.page-kicker {
    color: var(--primary);
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .11em;
}

.page-heading h1 {
    margin: .5rem 0 .35rem;
    font-size: clamp(1.85rem, 3vw, 2.55rem);
    line-height: 1.1;
    letter-spacing: -.05em;
}

.page-heading p {
    margin: 0;
    color: #858c9d;
    font-size: .8rem;
}

.dashboard-skeleton,
.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.dashboard-skeleton span {
    height: 145px;
    border-radius: 14px;
    background: #eceef4;
    animation: skeleton 1.3s ease-in-out infinite alternate;
}

.metric-card {
    padding: 1.25rem;
    border: 1px solid #e8eaf1;
    border-radius: 14px;
    background: #fff;
}

.metric-card > div {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.metric-card > div > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #6750db;
    background: #eeebff;
    font-size: 1rem;
    font-weight: 850;
}

.metric-card small {
    color: #757d90;
    font-size: .69rem;
    font-weight: 650;
}

.metric-card > strong {
    display: block;
    margin: 1rem 0 .25rem;
    font-size: 2rem;
    letter-spacing: -.05em;
}

.metric-card > p {
    margin: 0;
    color: #949aaa;
    font-size: .62rem;
}

.metric-card--danger > div > span {
    color: #bc3340;
    background: #ffeaec;
}

.metric-card--danger > strong {
    color: #c9404d;
}

.metric-card--amber > div > span {
    color: #a76806;
    background: #fff2d9;
}

.metric-card--cyan > div > span {
    color: #087883;
    background: #e1f6f6;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(420px, 1.4fr) minmax(300px, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.product-card {
    min-width: 0;
    padding: 1.35rem;
    border: 1px solid #e8eaf1;
    border-radius: 14px;
    background: #fff;
}

.product-card > header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.product-card > header > div {
    flex: 1;
}

.product-card h2 {
    margin: 0;
    font-size: .92rem;
    letter-spacing: -.02em;
}

.product-card header p {
    margin: .25rem 0 0;
    color: #979dad;
    font-size: .64rem;
}

.product-card header a {
    color: var(--primary);
    font-size: .65rem;
    font-weight: 720;
    text-decoration: none;
}

.work-row {
    min-height: 59px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem 0;
    border-top: 1px solid #f0f1f5;
}

.work-check {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 1px solid #c8ccd8;
    border-radius: 50%;
    background: #fff;
}

.work-row > div {
    min-width: 0;
    flex: 1;
}

.work-row strong,
.work-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work-row strong {
    font-size: .72rem;
}

.work-row small {
    margin-top: .25rem;
    color: #989ead;
    font-size: .61rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: .3rem .5rem;
    border-radius: 8px;
    color: #5e6577;
    background: #f0f1f5;
    font-size: .55rem;
    font-style: normal;
    white-space: nowrap;
}

.status-pill--urgent {
    color: #bd3744;
    background: #ffe9eb;
}

.status-pill--high {
    color: #a56300;
    background: #fff1d6;
}

.status-pill--low {
    color: #187361;
    background: #e6f5f1;
}

.compact-empty {
    min-height: 210px;
    display: grid;
    place-items: center;
    align-content: center;
    color: #9299aa;
}

.compact-empty > span {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--success);
    background: #e8f6f2;
}

.compact-empty p {
    font-size: .75rem;
}

.distribution-list {
    display: grid;
    gap: 1rem;
    padding-top: .4rem;
}

.distribution-list > div {
    display: grid;
    grid-template-columns: 110px 1fr 22px;
    align-items: center;
    gap: .8rem;
    color: #656d81;
    font-size: .66rem;
}

.distribution-list b {
    height: 6px;
    overflow: hidden;
    border-radius: 5px;
    background: #eff0f5;
}

.distribution-list i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #7760ee;
}

.distribution-list i.tone-success {
    background: #43a78a;
}

.distribution-list i.tone-amber {
    background: #e6a43e;
}

.distribution-list i.tone-cyan {
    background: #4ca9b4;
}

.distribution-list i.tone-slate {
    background: #8c95a8;
}

.recent-activity {
    min-height: 310px;
}

.activity-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 0;
    border-top: 1px solid #f0f1f5;
}

.activity-row > span {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #6149d6;
    background: #efecff;
    font-size: .95rem;
    font-weight: 800;
}

.activity-row strong,
.activity-row small {
    display: block;
}

.activity-row strong {
    font-size: .68rem;
}

.activity-row small {
    margin-top: .2rem;
    color: #979dad;
    font-size: .57rem;
}

.currency-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    color: #fff;
    background: linear-gradient(135deg, #1b203b, #292451);
}

.currency-card > span {
    margin-bottom: 1.25rem;
    color: #9e92ec;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .11em;
}

.currency-card h2 {
    color: #fff;
    font-size: 1.6rem;
}

.currency-card h2 small {
    display: block;
    margin-top: .35rem;
    color: #8f96ac;
    font-size: .6rem;
    font-weight: 500;
}

.currency-card p {
    margin: 1.25rem 0 0;
    color: #aeb3c6;
    font-size: .65rem;
    line-height: 1.6;
}

.list-toolbar {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1rem;
}

.search-box {
    width: min(430px, 100%);
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 .8rem;
    border: 1px solid #dfe2eb;
    border-radius: 10px;
    background: #fff;
}

.search-box > span {
    color: #858b9c;
}

.search-box input {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: var(--ink);
    background: transparent;
    font-size: .72rem;
}

.filter-button,
.view-switch button {
    min-height: 40px;
    padding: 0 .8rem;
    border: 1px solid #dfe2eb;
    border-radius: 9px;
    color: #656d81;
    background: #fff;
    font-size: .7rem;
}

.filter-button {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
}

.filter-button .material-symbols-rounded,
.view-switch .material-symbols-rounded {
    font-size: 1.05rem;
}

.view-switch {
    display: flex;
    margin-left: auto;
    padding: .2rem;
    border: 1px solid #dfe2eb;
    border-radius: 9px;
    background: #fff;
}

.view-switch button {
    min-height: 31px;
    border: 0;
    padding: 0 .65rem;
}

.view-switch button.active {
    color: var(--primary);
    background: var(--primary-soft);
}

.client-table-card {
    overflow: hidden;
    border: 1px solid #e5e7ef;
    border-radius: 14px;
    background: #fff;
}

.client-table {
    overflow-x: auto;
}

.client-table__head,
.client-table__row {
    min-width: 960px;
    display: grid;
    grid-template-columns: minmax(230px, 1.4fr) minmax(130px, .8fr) minmax(130px, .8fr) minmax(180px, 1fr) minmax(145px, .8fr) 20px;
    align-items: center;
    gap: 1rem;
    padding: 0 1.2rem;
}

.client-table__head {
    min-height: 42px;
    color: #9298a9;
    background: #fafafd;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.client-table__row {
    min-height: 68px;
    border-top: 1px solid #eef0f4;
    color: #5f677b;
    font-size: .67rem;
    text-decoration: none;
}

.client-table__row:hover {
    background: #fbfbff;
}

.row-chevron {
    color: #98a0b2;
    font-size: 1.05rem;
}

.client-identity {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.client-identity > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #5c46ca;
    background: #ece9ff;
    font-size: .61rem;
    font-style: normal;
    font-weight: 800;
}

.client-identity b {
    color: #242a3d;
    font-size: .72rem;
}

.client-identity small,
.next-action small {
    display: block;
    margin-top: .25rem;
    color: #9aa0af;
    font-size: .58rem;
    font-weight: 500;
}

.stage-badge {
    display: inline-flex;
    padding: .3rem .5rem;
    border-radius: 8px;
    color: #5a6477;
    background: #eef0f4;
    font-size: .59rem;
    font-style: normal;
}

.stage-badge--success {
    color: #17745f;
    background: #e6f5f0;
}

.stage-badge--amber {
    color: #9f6207;
    background: #fff1d8;
}

.stage-badge--violet,
.stage-badge--indigo {
    color: #5e47cd;
    background: #eeeaff;
}

.signal-cell {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.signal-cell i {
    padding: .25rem .4rem;
    border-radius: 6px;
    color: #6550ca;
    background: #f0edff;
    font-size: .54rem;
    font-style: normal;
}

.table-footer {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    border-top: 1px solid #e9ebf1;
    color: #8b92a2;
    font-size: .62rem;
}

.table-footer > span {
    flex: 1;
}

.table-footer button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    color: #81889a;
    background: transparent;
}

.table-footer button.active {
    color: #fff;
    background: var(--primary);
}

.table-loading {
    display: grid;
    gap: 1px;
}

.table-loading span {
    height: 68px;
    background: #f3f4f7;
    animation: skeleton 1.3s ease-in-out infinite alternate;
}

.empty-state {
    min-height: 390px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 2rem;
    text-align: center;
}

.empty-state > span {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 1.2rem;
}

.empty-state h2 {
    margin: 1.2rem 0 .5rem;
    font-size: 1.15rem;
}

.empty-state p {
    max-width: 420px;
    margin: 0 0 1.4rem;
    color: var(--muted);
    font-size: .78rem;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(13, 16, 32, .55);
    backdrop-filter: blur(5px);
}

.modal-panel {
    width: min(590px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.7rem;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(13, 16, 32, .25);
}

.modal-panel > header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.modal-panel > header > div {
    flex: 1;
}

.modal-panel h2 {
    margin: .55rem 0 1.3rem;
    font-size: 1.35rem;
    letter-spacing: -.04em;
}

.modal-panel > header > button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    color: #778094;
    background: #f3f4f7;
    cursor: pointer;
}

.modal-panel > header > button .material-symbols-rounded {
    font-size: 1.1rem;
}

.segmented-control {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 1.2rem;
    padding: .25rem;
    border-radius: 10px;
    background: #f1f2f6;
}

.segmented-control button {
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    color: #737b8f;
    background: transparent;
    font-size: .7rem;
}

.segmented-control button.active {
    color: var(--ink);
    background: #fff;
    box-shadow: 0 3px 10px rgba(25, 28, 52, .08);
}

.field {
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
}

.account-panel {
    width: min(430px, 100%);
}

.account-panel > h1 {
    margin: .65rem 0 .45rem;
    font-size: clamp(2rem, 5vw, 2.6rem);
    letter-spacing: -.055em;
}

.account-panel > p {
    margin: 0 0 1.8rem;
    color: #80879a;
    font-size: .76rem;
    line-height: 1.6;
}

.account-state {
    text-align: center;
}

.account-state__icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 1.15rem;
    border-radius: 16px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 1.55rem;
}

.account-state .page-kicker {
    display: block;
}

.account-state .alert {
    margin-bottom: 1rem;
    text-align: left;
}

.account-panel form > .field label {
    color: #4e566b;
    font-size: .66rem;
    font-weight: 700;
}

.account-panel form > .field input {
    width: 100%;
    min-height: 47px;
    padding: .7rem .8rem;
    border: 1px solid #dfe2eb;
    border-radius: 9px;
    color: var(--ink);
    background: #fff;
    font-size: .75rem;
    outline: 0;
}

.account-panel form > .field input:focus {
    border-color: #8b78ec;
    box-shadow: 0 0 0 3px rgba(111, 83, 237, .1);
}

.account-options {
    display: flex;
    align-items: center;
    margin: -.25rem 0 1rem;
    color: #737b8f;
    font-size: .63rem;
}

.account-options label {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1;
}

.account-options a,
.account-footer a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}

.account-divider {
    height: 36px;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #a1a6b4;
    font-size: .6rem;
}

.account-divider::before,
.account-divider::after {
    height: 1px;
    flex: 1;
    content: "";
    background: #e7e9ef;
}

.account-footer {
    margin-top: 1.4rem;
    color: #858c9d;
    font-size: .67rem;
    text-align: center;
}

.account-terms {
    margin: .2rem 0 1rem;
    color: #9298a8;
    font-size: .58rem;
    line-height: 1.5;
}

.account-panel .validation-message,
.account-panel .text-danger {
    font-size: .62rem;
}

.field > span {
    color: #4e566b;
    font-size: .66rem;
    font-weight: 700;
}

.field input,
.field select,
.portal-field input,
.portal-field textarea {
    width: 100%;
    min-height: 43px;
    padding: .7rem .8rem;
    border: 1px solid #dfe2eb;
    border-radius: 9px;
    color: var(--ink);
    background: #fff;
    font-size: .75rem;
    outline: 0;
}

.field input:focus,
.field select:focus,
.portal-field input:focus,
.portal-field textarea:focus {
    border-color: #8b78ec;
    box-shadow: 0 0 0 3px rgba(111, 83, 237, .1);
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
}

.form-error {
    padding: .8rem;
    border-radius: 9px;
    color: #b53a45;
    background: #fff0f1;
    font-size: .7rem;
}

.modal-panel > footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.hub-card {
    min-height: 520px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: 1.2rem;
    padding: 2rem;
    border: 1px solid #e4e7ef;
    border-radius: 16px;
    background: #fff;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.3rem;
    color: #9298a8;
    font-size: .63rem;
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb strong {
    color: #525a6e;
}

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

.client-profile-avatar {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #6049d0;
    background: #ece9ff;
    font-size: 1rem;
    font-weight: 850;
}

.client-profile-header > div:nth-child(2) {
    flex: 1;
}

.client-profile-header h1 {
    margin: .5rem 0 .25rem;
    font-size: 1.75rem;
    letter-spacing: -.045em;
}

.client-profile-header p {
    margin: 0;
    color: #8d94a5;
    font-size: .66rem;
}

.client-profile-actions {
    display: flex;
    gap: .6rem;
}

.detail-tabs {
    display: flex;
    gap: 1.2rem;
    margin: 1.8rem 0 1rem;
    border-bottom: 1px solid #dde0e8;
}

.detail-tabs button {
    min-height: 42px;
    padding: 0 .15rem;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #858c9e;
    background: transparent;
    font-size: .67rem;
    font-weight: 650;
}

.detail-tabs button.active {
    border-bottom-color: var(--primary);
    color: var(--primary);
}

.client-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.next-action-card {
    color: #fff;
    background: linear-gradient(135deg, #1a2039, #2b2859);
}

.next-action-card .page-kicker {
    color: #a89bff;
}

.next-action-card h2 {
    margin: 1.2rem 0 .4rem;
    color: #fff;
    font-size: 1.25rem;
}

.next-action-card > p {
    color: #a6adc0;
    font-size: .66rem;
}

.next-action-card > div {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.next-action-card > div span,
.next-action-card > div strong {
    display: block;
}

.next-action-card > div span {
    color: #858da5;
    font-size: .56rem;
}

.next-action-card > div strong {
    margin-top: .3rem;
    font-size: .7rem;
}

.client-facts dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0;
}

.client-facts dl > div {
    padding: .8rem;
    border-radius: 9px;
    background: #f6f7fa;
}

.client-facts dt {
    color: #969cac;
    font-size: .55rem;
    font-weight: 650;
}

.client-facts dd {
    margin: .35rem 0 0;
    font-size: .7rem;
    font-weight: 700;
}

.work-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.work-summary > span {
    padding: 1rem;
    border-right: 1px solid var(--line);
    text-align: center;
}

.work-summary > span:last-child {
    border-right: 0;
}

.work-summary strong,
.work-summary small {
    display: block;
}

.work-summary strong {
    font-size: 1.5rem;
}

.work-summary small {
    margin-top: .35rem;
    color: #9298a8;
    font-size: .57rem;
}

.contact-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 0;
    border-top: 1px solid var(--line);
}

.contact-row > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #126f5c;
    background: #e5f5ef;
    font-size: .55rem;
    font-weight: 800;
}

.contact-row p {
    flex: 1;
    margin: 0;
}

.contact-row strong,
.contact-row small {
    display: block;
}

.contact-row strong {
    font-size: .67rem;
}

.contact-row small {
    margin-top: .25rem;
    color: #979dad;
    font-size: .55rem;
}

.contact-row i {
    padding: .25rem .4rem;
    border-radius: 6px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: .5rem;
    font-style: normal;
}

.detail-list-card {
    min-height: 420px;
}

.detail-list-row {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: .8rem;
    border-top: 1px solid var(--line);
}

.detail-list-row p {
    flex: 1;
    margin: 0;
}

.detail-list-row strong,
.detail-list-row small {
    display: block;
}

.detail-list-row strong {
    font-size: .7rem;
}

.detail-list-row small {
    margin-top: .25rem;
    color: #969cac;
    font-size: .58rem;
}

.detail-icon {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: .65rem;
}

.hub-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 1.2rem;
}

.hub-card h2 {
    margin: .2rem 0 .5rem;
    font-size: 1.2rem;
}

.hub-card > div:nth-child(2) p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.6;
}

.hub-list,
.hub-facts {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.hub-list > div {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 62px;
    border-bottom: 1px solid var(--line);
}

.hub-list p {
    flex: 1;
    margin: 0;
}

.hub-list strong,
.hub-list small {
    display: block;
}

.hub-list strong {
    font-size: .73rem;
}

.hub-list small {
    margin-top: .25rem;
    color: #9298a8;
    font-size: .61rem;
}

.hub-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.hub-facts > span {
    padding: 1.5rem;
    border-right: 1px solid var(--line);
}

.hub-facts > span:last-child {
    border-right: 0;
}

.hub-facts strong,
.hub-facts small {
    display: block;
}

.hub-facts strong {
    font-size: 1rem;
}

.hub-facts small {
    margin-top: .4rem;
    color: #9298a8;
    font-size: .65rem;
}

.onboarding-shell {
    min-height: 100vh;
    background: #f7f7fb;
}

.onboarding-header {
    height: 70px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 clamp(1.2rem, 4vw, 4rem);
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.onboarding-header > a:first-child {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
}

.onboarding-header img {
    width: 32px;
    height: 32px;
}

.onboarding-header small {
    color: #868d9e;
    font-size: .65rem;
    font-weight: 700;
}

.onboarding-header > a:last-child {
    justify-self: end;
    color: #7b8396;
    font-size: .68rem;
    text-decoration: none;
}

.onboarding-content {
    min-height: calc(100vh - 70px);
    display: grid;
    grid-template-columns: 240px minmax(480px, 760px) minmax(260px, 360px);
    justify-content: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding: 4rem 3rem;
}

.onboarding-progress {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.onboarding-progress > div {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: .75rem;
    opacity: .48;
}

.onboarding-progress > div.active {
    opacity: 1;
}

.onboarding-progress > div > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #d8dbe5;
    border-radius: 50%;
    color: #737b8f;
    background: #fff;
    font-size: .64rem;
    font-weight: 800;
}

.onboarding-progress > div.active > span {
    border-color: var(--primary);
    color: #fff;
    background: var(--primary);
}

.onboarding-progress p {
    margin: 0;
    color: #343b50;
    font-size: .71rem;
    font-weight: 720;
}

.onboarding-progress small {
    display: block;
    margin-top: .2rem;
    color: #969dad;
    font-size: .58rem;
    font-weight: 500;
}

.onboarding-progress article {
    margin-top: auto;
    padding: 1rem;
    border: 1px solid #e0dcfb;
    border-radius: 11px;
    background: #f0edff;
}

.onboarding-progress article strong {
    color: var(--primary);
    font-size: .7rem;
}

.onboarding-progress article p {
    margin-top: .45rem;
    color: #68607e;
    font-size: .61rem;
    font-weight: 500;
    line-height: 1.55;
}

.onboarding-panel {
    min-height: 650px;
    padding: 2.6rem;
    border: 1px solid #e6e8ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(25, 28, 62, .06);
}

.onboarding-panel > h1 {
    margin: .7rem 0 .5rem;
    font-size: 2rem;
    letter-spacing: -.05em;
}

.onboarding-panel > p {
    margin: 0 0 2rem;
    color: #82899b;
    font-size: .75rem;
}

.field--large {
    margin-top: 2rem;
}

.field--large input {
    min-height: 50px;
    font-size: .85rem;
}

.currency-choice {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 1rem;
}

.currency-choice p {
    margin: 0;
    padding: .8rem;
    border-radius: 9px;
    color: #777089;
    background: #f4f2ff;
    font-size: .61rem;
    line-height: 1.55;
}

.currency-choice p > span {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    margin-right: .4rem;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-size: .55rem;
}

.preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
}

.preset-grid button {
    min-height: 125px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    gap: .35rem .7rem;
    padding: 1rem;
    border: 1px solid #e1e4eb;
    border-radius: 11px;
    color: var(--ink);
    background: #fff;
    text-align: left;
}

.preset-grid button.active {
    border-color: #7d68e8;
    background: #fbfaff;
    box-shadow: 0 0 0 2px rgba(111, 83, 237, .08);
}

.preset-grid button > span {
    width: 31px;
    height: 31px;
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: .9rem;
}

.preset-grid strong {
    font-size: .72rem;
}

.preset-grid small {
    color: #8b92a3;
    font-size: .58rem;
    line-height: 1.45;
}

.preset-grid i {
    grid-column: 3;
    grid-row: 1;
    color: var(--primary);
    font-size: .65rem;
    font-style: normal;
}

.terminology-preview {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.2rem;
    padding: .8rem 1rem;
    border-radius: 9px;
    color: #7d8496;
    background: #f5f6f9;
    font-size: .61rem;
}

.terminology-preview > span {
    margin-right: auto;
}

.terminology-preview strong {
    color: #41495d;
}

.terminology-preview b {
    color: #aaaebe;
}

.template-options {
    display: grid;
    gap: .6rem;
}

.template-options label {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .9rem;
    border: 1px solid #e4e6ed;
    border-radius: 10px;
}

.template-options label > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--primary);
    background: var(--primary-soft);
}

.template-options p {
    flex: 1;
    margin: 0;
}

.template-options strong,
.template-options small {
    display: block;
}

.template-options strong {
    font-size: .7rem;
}

.template-options small {
    margin-top: .25rem;
    color: #9197a6;
    font-size: .57rem;
}

.onboarding-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 10px;
    background: #f5f6f9;
}

.onboarding-summary small,
.onboarding-summary strong {
    display: block;
}

.onboarding-summary small {
    margin-bottom: .25rem;
    color: #9399a9;
    font-size: .53rem;
    font-weight: 750;
    letter-spacing: .06em;
}

.onboarding-summary strong {
    font-size: .68rem;
}

.onboarding-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.onboarding-aside {
    align-self: center;
}

.onboarding-aside blockquote {
    margin: 0 0 2rem;
    color: #5c6478;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.55;
}

.mini-preview {
    padding: 1.2rem;
    border: 1px solid #e2e4ec;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(25, 28, 62, .07);
}

.mini-preview > span {
    color: var(--primary);
    font-size: .53rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.mini-preview > strong {
    display: block;
    margin: .5rem 0 1rem;
    font-size: .78rem;
}

.mini-preview p {
    margin: 0;
    padding: .6rem 0;
    border-top: 1px solid var(--line);
    color: #72798c;
    font-size: .61rem;
}

.mini-preview i {
    margin-right: .5rem;
    color: var(--success);
    font-style: normal;
}

.portal-shell {
    min-height: 100vh;
    color: #24293b;
    background: #f6f7fb;
}

.portal-header {
    height: 72px;
    display: flex;
    align-items: center;
    padding: 0 max(1.2rem, calc((100vw - 900px) / 2));
    border-bottom: 1px solid #e3e6ed;
    background: #fff;
}

.portal-header > div {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex: 1;
    font-size: .8rem;
    font-weight: 800;
}

.portal-header img {
    width: 33px;
    height: 33px;
    padding: 3px;
    border: 1px solid #e7e8ef;
    border-radius: 9px;
    background: #fff;
    object-fit: contain;
}

.portal-header > span {
    padding: .35rem .55rem;
    border-radius: 8px;
    color: #5e6578;
    background: #f0f1f5;
    font-size: .58rem;
}

.portal-content {
    width: min(900px, calc(100% - 2rem));
    margin: auto;
    padding: 3.5rem 0 5rem;
}

.portal-intro {
    text-align: center;
}

.portal-intro h1 {
    margin: .7rem 0 .75rem;
    font-size: clamp(2rem, 5vw, 3.1rem);
    letter-spacing: -.055em;
}

.portal-intro > p {
    max-width: 650px;
    margin: 0 auto;
    color: #737b8e;
    font-size: .83rem;
    line-height: 1.65;
}

.portal-intro > div {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
    color: #8a91a2;
    font-size: .63rem;
}

.portal-intro > div strong {
    margin-left: .3rem;
    color: #353b4e;
}

.portal-progress {
    margin: 2.2rem 0 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid #e3e6ed;
    border-radius: 11px;
    background: #fff;
}

.portal-progress > div {
    height: 7px;
    overflow: hidden;
    border-radius: 6px;
    background: #eceef3;
}

.portal-progress > div > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #6f55ed, #9d8cff);
}

.portal-progress p {
    margin: .6rem 0 0;
    color: #858c9e;
    font-size: .6rem;
}

.portal-progress strong {
    color: #4c5367;
}

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

.portal-form > article {
    padding: 1.5rem;
    border: 1px solid #e3e6ed;
    border-radius: 14px;
    background: #fff;
}

.portal-form > article > header {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.portal-form > article > header > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #fff;
    background: var(--primary);
    font-size: .62rem;
    font-weight: 800;
}

.portal-form h2 {
    margin: 0;
    font-size: .9rem;
}

.portal-field {
    position: relative;
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--line);
}

.portal-field:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.portal-field > label {
    display: block;
    margin-bottom: .4rem;
    font-size: .72rem;
    font-weight: 720;
}

.portal-field > label > b {
    margin-left: .4rem;
    padding: .2rem .35rem;
    border-radius: 5px;
    color: #765e2c;
    background: #fff2d8;
    font-size: .5rem;
}

.portal-field > p {
    margin: 0 0 .8rem;
    color: #8a91a2;
    font-size: .62rem;
}

.portal-field textarea {
    resize: vertical;
}

.autosave,
.selected-file {
    display: block;
    margin-top: .5rem;
    color: var(--success);
    font-size: .56rem;
}

.autosave .material-symbols-rounded,
.selected-file .material-symbols-rounded {
    font-size: .78rem;
    vertical-align: -.12rem;
}

.secure-upload {
    min-height: 105px;
    display: flex;
    align-items: center;
    gap: .9rem;
    position: relative;
    padding: 1rem;
    border: 1px dashed #bbb5e9;
    border-radius: 11px;
    background: #faf9ff;
}

.secure-upload > span {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--primary);
    background: var(--primary-soft);
}

.secure-upload > div {
    flex: 1;
}

.secure-upload strong,
.secure-upload p {
    display: block;
    margin: 0;
}

.secure-upload strong {
    font-size: .68rem;
}

.secure-upload p {
    margin-top: .25rem;
    color: #8b91a1;
    font-size: .57rem;
}

.secure-upload input {
    max-width: 180px;
    font-size: .6rem;
}

.review-comment {
    margin-top: .7rem;
    padding: .8rem;
    border-left: 3px solid #d49b3a;
    border-radius: 0 8px 8px 0;
    background: #fff7e8;
}

.review-comment strong,
.review-comment p {
    display: block;
    margin: 0;
    font-size: .61rem;
}

.review-comment p {
    margin-top: .3rem;
    color: #776647;
}

.portal-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border: 1px solid #e3e6ed;
    border-radius: 13px;
    background: #fff;
}

.portal-actions > div {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1;
}

.portal-actions > div > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--success);
    font-size: .6rem;
}

.portal-actions p {
    margin: 0;
    font-size: .65rem;
    font-weight: 700;
}

.portal-actions small {
    display: block;
    margin-top: .2rem;
    color: #9299a9;
    font-size: .55rem;
    font-weight: 500;
}

.portal-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid #cde9df;
    border-radius: 14px;
    background: linear-gradient(135deg, #f4fbf8, #fff);
    box-shadow: 0 16px 40px rgba(31, 111, 85, .08);
}

.portal-confirmation > .material-symbols-rounded {
    width: 46px;
    height: 46px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: var(--success);
    font-size: 1.5rem;
}

.portal-confirmation h2 {
    margin: .35rem 0 .45rem;
    font-size: 1.15rem;
}

.portal-confirmation p {
    margin: 0;
    color: #687286;
    font-size: .72rem;
    line-height: 1.65;
}

.portal-loading,
.portal-message {
    min-height: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 2rem;
    text-align: center;
}

.portal-loading img,
.portal-message img {
    width: 48px;
    height: 48px;
}

.portal-loading p,
.portal-message p {
    color: #7e8597;
    font-size: .75rem;
}

.portal-message h1 {
    margin: 1.2rem 0 .5rem;
    font-size: 1.8rem;
}

.manage-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 306px minmax(0, 1fr);
    background:
        radial-gradient(circle at 87% 8%, rgba(112, 84, 237, .08), transparent 28rem),
        #f6f7fb;
}

.manage-sidebar {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    padding: 1.5rem 1.15rem;
    color: #cbd0e1;
    background:
        radial-gradient(circle at 10% 0, rgba(111, 83, 237, .18), transparent 20rem),
        #14182f;
}

.manage-brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    padding: 0 .55rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 820;
    text-decoration: none;
}

.manage-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 9px 18px rgba(73, 51, 206, .35));
}

.manage-back {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 1.25rem 0 .85rem;
    padding: 0 .7rem;
    border-radius: 9px;
    color: #a6aec4;
    font-size: .71rem;
    font-weight: 650;
    text-decoration: none;
}

.manage-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.manage-back .material-symbols-rounded {
    font-size: 1rem;
}

.manage-identity {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
    padding: .85rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .04);
}

.manage-avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #765cf1, #4c33cf);
    font-size: .68rem;
    font-weight: 850;
}

.manage-identity > div {
    min-width: 0;
    flex: 1;
}

.manage-identity strong,
.manage-identity small {
    display: block;
}

.manage-identity strong {
    color: #fff;
    font-size: .75rem;
}

.manage-identity small {
    margin-top: .18rem;
    color: #838ba2;
    font-size: .59rem;
}

.manage-verified {
    color: #47c7a3;
    font-size: 1rem;
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.manage-nav {
    display: grid;
    gap: .25rem;
}

.manage-nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .72rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: #9199b0;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.manage-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .045);
}

.manage-nav a.active {
    border-color: rgba(138, 116, 255, .16);
    color: #fff;
    background: rgba(111, 83, 237, .16);
}

.manage-nav a > .material-symbols-rounded {
    width: 22px;
    color: #78819b;
    font-size: 1.15rem;
}

.manage-nav a.active > .material-symbols-rounded {
    color: #a99bff;
}

.manage-nav a > span:last-child {
    font-size: .72rem;
    font-weight: 690;
}

.manage-nav small {
    display: block;
    margin-top: .15rem;
    color: #6f7891;
    font-size: .56rem;
    font-weight: 500;
}

.manage-nav a.active small {
    color: #8e96ad;
}

.manage-sidebar-note {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-top: auto;
    padding: .9rem .7rem .25rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.manage-sidebar-note > .material-symbols-rounded {
    margin-top: .1rem;
    color: #7e88a3;
    font-size: 1rem;
}

.manage-sidebar-note p {
    margin: 0;
}

.manage-sidebar-note strong,
.manage-sidebar-note small {
    display: block;
}

.manage-sidebar-note strong {
    color: #bdc3d3;
    font-size: .65rem;
}

.manage-sidebar-note small {
    margin-top: .24rem;
    color: #717990;
    font-size: .55rem;
    line-height: 1.45;
}

.manage-stage {
    min-width: 0;
}

.manage-topbar {
    height: 72px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0 clamp(1.4rem, 4vw, 4rem);
    border-bottom: 1px solid #e6e8ef;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px);
}

.manage-topbar > div {
    flex: 1;
}

.manage-topbar span,
.manage-topbar strong {
    display: block;
}

.manage-topbar > div > span {
    margin-bottom: .2rem;
    color: #989eae;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .1em;
}

.manage-topbar strong {
    font-size: .78rem;
}

.manage-topbar > a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e5ed;
    border-radius: 9px;
    color: #687087;
    background: #fff;
    text-decoration: none;
}

.manage-topbar > a .material-symbols-rounded {
    font-size: 1.1rem;
}

.manage-content {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.settings-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.settings-page-heading h1 {
    margin: .6rem 0 .4rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    letter-spacing: -.055em;
}

.settings-page-heading p {
    max-width: 620px;
    margin: 0;
    color: #7d8598;
    font-size: .79rem;
    line-height: 1.55;
}

.settings-health {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .72rem;
    border: 1px solid #cfece3;
    border-radius: 999px;
    color: #17745f;
    background: #edf9f5;
    font-size: .62rem;
    font-weight: 750;
    white-space: nowrap;
}

.settings-health .material-symbols-rounded {
    font-size: .95rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
    align-items: start;
    gap: 1rem;
}

.settings-card {
    padding: 1.6rem;
    border: 1px solid #e3e6ef;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(23, 27, 54, .02);
}

.settings-card--quiet {
    background: linear-gradient(150deg, #fff, #fafaff);
}

.settings-card > header {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #eceef3;
}

.settings-card > header > div {
    flex: 1;
}

.settings-card-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: #654dde;
    background: #eeeaff;
    font-size: 1.15rem;
}

.settings-card h2 {
    margin: 0;
    font-size: .94rem;
    letter-spacing: -.02em;
}

.settings-card header p {
    margin: .3rem 0 0;
    color: #8d94a5;
    font-size: .65rem;
    line-height: 1.5;
}

.settings-field {
    display: grid;
    gap: .45rem;
    margin-bottom: 1rem;
}

.settings-field > span {
    color: #4f576c;
    font-size: .66rem;
    font-weight: 720;
}

.settings-field input,
.settings-field select {
    width: 100%;
    min-height: 46px;
    padding: .75rem .85rem;
    border: 1px solid #dce0e9;
    border-radius: 10px;
    color: var(--ink);
    background: #fff;
    font-size: .74rem;
    outline: 0;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.settings-field input:focus,
.settings-field select:focus {
    border-color: #8875e9;
    box-shadow: 0 0 0 3px rgba(111, 83, 237, .1);
}

.settings-field input:disabled {
    color: #70788b;
    background: #f4f5f8;
}

.settings-field small {
    color: #959bac;
    font-size: .57rem;
}

.settings-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eceef3;
}

.settings-facts {
    display: grid;
    gap: .8rem;
    margin: 0;
}

.settings-facts > div {
    padding: .85rem;
    border-radius: 10px;
    background: #f5f6fa;
}

.settings-facts dt {
    color: #9097a8;
    font-size: .56rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.settings-facts dd {
    margin: .35rem 0 0;
    color: #30374c;
    font-size: .69rem;
    font-weight: 700;
}

.manage-content > .alert,
.settings-card .alert {
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: .68rem;
}

.manage-content > .alert-success,
.settings-card .alert-success {
    border-color: #cbeade;
    color: #176e5a;
    background: #edf9f5;
}

.manage-content > .alert-danger,
.settings-card .alert-danger {
    border-color: #f0c9ce;
    color: #a52f3c;
    background: #fff0f2;
}

.settings-empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    padding: 2rem;
    border: 1px dashed #d9dce6;
    border-radius: 13px;
    text-align: center;
    background: #fafafd;
}

.settings-empty > .material-symbols-rounded {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #6951de;
    background: #eeeaff;
    font-size: 1.35rem;
}

.settings-empty h3 {
    margin: 1rem 0 .35rem;
    font-size: .9rem;
}

.settings-empty p {
    max-width: 420px;
    margin: 0 0 1.2rem;
    color: #878e9f;
    font-size: .66rem;
    line-height: 1.55;
}

.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.settings-provider-list {
    display: grid;
    gap: .7rem;
}

.settings-provider {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem;
    padding: .85rem;
    border: 1px solid #e5e7ef;
    border-radius: 12px;
    background: #fafafd;
}

.settings-provider > .material-symbols-rounded {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #654dde;
    background: #eeeaff;
}

.settings-provider > div {
    display: grid;
    gap: .2rem;
}

.settings-provider strong,
.settings-provider-actions > strong {
    color: #30374c;
    font-size: .72rem;
}

.settings-provider small {
    color: #8d94a5;
    font-size: .58rem;
}

.settings-provider-actions {
    display: grid;
    gap: .8rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eceef3;
}

.settings-provider-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

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

.recovery-code {
    display: block;
    padding: .8rem;
    border: 1px solid #e0dce8;
    border-radius: 10px;
    color: #3d3555;
    background: #faf8ff;
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-align: center;
}

.settings-copy {
    margin: 0 0 1.3rem;
    color: #697186;
    font-size: .7rem;
    line-height: 1.65;
}

.settings-card--danger {
    border-color: #efdadd;
    background: linear-gradient(150deg, #fff, #fff8f9);
}

.settings-card--danger .settings-card-icon {
    color: #bd3744;
    background: #ffeaec;
}

.settings-steps {
    display: grid;
    gap: 1.1rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: settings-step;
}

.settings-steps > li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: .9rem;
    align-items: start;
    counter-increment: settings-step;
}

.settings-steps > li::before {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: rgba(91, 72, 232, .1);
    color: var(--violet);
    content: counter(settings-step);
    font-size: .82rem;
    font-weight: 800;
}

.settings-steps strong {
    color: var(--ink);
}

.settings-steps p {
    margin: .25rem 0 .7rem;
    color: var(--muted);
    line-height: 1.55;
}

.settings-secret {
    display: inline-block;
    padding: .72rem .9rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #f7f8fc;
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9rem;
    letter-spacing: .08em;
}

.settings-passkey-list {
    display: grid;
    gap: .65rem;
}

.settings-passkey-list > article {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .8rem;
    border: 1px solid #e8eaf0;
    border-radius: 11px;
}

.settings-passkey-list > article > .material-symbols-rounded {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #654dde;
    background: #eeeaff;
    font-size: 1rem;
}

.settings-passkey-list > article > div {
    min-width: 0;
    flex: 1;
}

.settings-passkey-list strong,
.settings-passkey-list small {
    display: block;
}

.settings-passkey-list strong {
    font-size: .7rem;
}

.settings-passkey-list small {
    margin-top: .22rem;
    color: #9299aa;
    font-size: .57rem;
}

.settings-passkey-list form {
    display: flex;
    gap: .35rem;
}

.icon-button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid #e1e4ec;
    border-radius: 8px;
    color: #687087;
    background: #fff;
    cursor: pointer;
}

.icon-button .material-symbols-rounded {
    font-size: 1rem;
}

.icon-button--danger {
    border-color: #efd4d8;
    color: #b73542;
    background: #fff6f7;
}

.button--danger {
    color: #fff;
    background: #c9404d;
    box-shadow: 0 8px 20px rgba(201, 64, 77, .18);
}

.button--danger:hover {
    color: #fff;
    background: #b83542;
}

.button--danger-ghost {
    border-color: #efd4d8;
    color: #b73542;
    background: #fff7f8;
}

.button--danger-ghost:hover {
    border-color: #e7bcc2;
    color: #9e2935;
    background: #fff0f2;
}

.button-spinner {
    width: 13px;
    height: 13px;
    display: inline-block;
    margin-right: .35rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: spin .7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.search-box > button {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #8a91a2;
    background: #f4f5f8;
    cursor: pointer;
}

.search-box > button .material-symbols-rounded {
    font-size: .95rem;
}

.filter-button {
    cursor: pointer;
}

.filter-button.active {
    border-color: #cfc6fb;
    color: var(--primary);
    background: #f7f5ff;
}

.filter-button i {
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--primary);
    font-size: .53rem;
    font-style: normal;
    font-weight: 800;
}

.client-filter-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr)) auto;
    align-items: end;
    gap: .75rem;
    margin: -.35rem 0 1rem;
    padding: 1rem;
    border: 1px solid #e2e4ec;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(27, 31, 52, .06);
}

.client-filter-panel .field {
    margin: 0;
}

.client-filter-actions {
    display: flex;
    gap: .5rem;
    padding-bottom: .02rem;
}

.operation-banner {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .75rem .9rem;
    border: 1px solid;
    border-radius: 10px;
    font-size: .68rem;
}

.operation-banner p {
    flex: 1;
    margin: 0;
}

.operation-banner > span {
    font-size: 1.05rem;
}

.operation-banner > button {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.operation-banner > button .material-symbols-rounded {
    font-size: .95rem;
}

.operation-banner--error {
    border-color: #f0cdd2;
    color: #a7333e;
    background: #fff4f5;
}

.operation-banner--success {
    border-color: #bfe7da;
    color: #176b58;
    background: #f0faf7;
}

.client-table-card {
    position: relative;
}

.client-table-card.is-loading::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    content: "";
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(1px);
}

.client-table__row.is-archived {
    opacity: .67;
}

.client-identity small em {
    color: #b45b65;
    font-style: normal;
}

.table-footer > div {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.table-footer > div strong {
    min-width: 86px;
    color: #697186;
    font-size: .59rem;
    text-align: center;
}

.table-footer button:not(:disabled) {
    cursor: pointer;
}

.client-kanban {
    display: grid;
    grid-auto-columns: minmax(250px, 1fr);
    grid-auto-flow: column;
    gap: .8rem;
    min-height: 500px;
    padding: 1rem;
    overflow-x: auto;
    background: #f7f8fb;
}

.kanban-column {
    min-width: 250px;
    padding: .75rem;
    border: 1px solid #e5e7ef;
    border-radius: 12px;
    background: #fff;
}

.kanban-column > header {
    display: flex;
    align-items: center;
    margin-bottom: .7rem;
}

.kanban-column > header > span {
    flex: 1;
}

.kanban-column > header > strong {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #687087;
    background: #f1f2f6;
    font-size: .58rem;
}

.kanban-column__cards {
    display: grid;
    align-content: start;
    gap: .65rem;
}

.client-kanban-card {
    overflow: hidden;
    border: 1px solid #e5e7ef;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(29, 32, 52, .05);
}

.client-kanban-card > a {
    display: block;
    padding: .8rem;
    color: inherit;
    text-decoration: none;
}

.client-kanban-card > a:hover {
    background: #fbfbff;
}

.client-kanban-card > a > p {
    min-height: 32px;
    margin: .75rem 0 .25rem;
    color: #555e74;
    font-size: .64rem;
    line-height: 1.45;
}

.client-kanban-card > a > small {
    color: #989faf;
    font-size: .56rem;
}

.client-kanban-card > label {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    border-top: 1px solid #eceef3;
    color: #9097a8;
    background: #fafafd;
    font-size: .54rem;
}

.client-kanban-card > label select {
    min-width: 0;
    flex: 1;
    padding: .32rem .4rem;
    border: 1px solid #dfe2ea;
    border-radius: 7px;
    color: #555e73;
    background: #fff;
    font-size: .57rem;
}

.kanban-empty {
    margin: 0;
    padding: 1.3rem .5rem;
    border: 1px dashed #dfe2ea;
    border-radius: 9px;
    color: #a0a6b5;
    font-size: .6rem;
    text-align: center;
}

.modal-panel--wide {
    width: min(720px, 100%);
}

.modal-panel--confirm {
    width: min(500px, 100%);
}

.confirm-copy {
    margin: 0 0 1.2rem;
    color: #6f778b;
    font-size: .72rem;
    line-height: 1.65;
}

.client-header-badges {
    display: flex;
    align-items: center;
    gap: .45rem;
}

.client-quick-controls {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr);
    gap: .75rem;
    margin-top: 1.2rem;
    padding: .85rem;
    border: 1px solid #e4e6ee;
    border-radius: 12px;
    background: #fff;
}

.client-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .75rem;
}

.client-context-actions .button {
    min-height: 38px;
}

.settings-retention-grid {
    display: grid;
    grid-template-columns: minmax(220px, .7fr) minmax(280px, 1fr);
    gap: .85rem;
    margin-top: 1.25rem;
}

.settings-policy-switch {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem;
    border: 1px solid #e4e6ee;
    border-radius: 12px;
    background: #fff;
}

.settings-policy-switch input {
    width: 18px;
    height: 18px;
    margin-top: .08rem;
    accent-color: #5f55c8;
}

.settings-policy-switch span {
    display: grid;
    gap: .25rem;
}

.settings-policy-switch strong {
    color: #343b50;
    font-size: .72rem;
}

.settings-policy-switch small {
    color: #7c8396;
    font-size: .63rem;
    line-height: 1.5;
}

.client-quick-controls .field {
    margin: 0;
}

.client-quick-controls .field select {
    min-height: 38px;
    padding-block: .45rem;
}

.client-quick-controls > div {
    display: grid;
    align-content: center;
    gap: .28rem;
    padding-left: .8rem;
    border-left: 1px solid #e8eaf0;
}

.client-quick-controls > div span {
    color: #969cad;
    font-size: .53rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.client-quick-controls > div strong {
    color: #343b50;
    font-size: .66rem;
}

.next-action-card > .inline-link {
    margin-top: 1rem;
    color: #b8afff;
}

.next-action-card > .inline-link:hover {
    color: #fff;
}

@media (max-width: 940px) {
    .manage-shell {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .manage-sidebar {
        padding-inline: .75rem;
    }

    .manage-brand,
    .manage-back,
    .manage-identity,
    .manage-nav a,
    .manage-sidebar-note {
        justify-content: center;
    }

    .manage-brand span,
    .manage-identity > div,
    .manage-verified,
    .manage-nav a > span:last-child,
    .manage-sidebar-note p {
        display: none;
    }

    .manage-back {
        font-size: 0;
    }

    .manage-nav a > .material-symbols-rounded {
        width: auto;
        font-size: 1.2rem;
    }

    .manage-sidebar-note {
        padding-inline: 0;
    }

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

@media (max-width: 620px) {
    .manage-shell {
        display: block;
    }

    .manage-sidebar {
        min-height: 0;
        display: block;
        position: static;
        padding: .9rem;
    }

    .manage-brand,
    .manage-back,
    .manage-identity,
    .manage-sidebar-note {
        display: none;
    }

    .manage-nav {
        display: flex;
        gap: .25rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .manage-nav a {
        min-width: 48px;
        min-height: 44px;
        flex: 0 0 auto;
        justify-content: center;
        padding: .5rem .75rem;
    }

    .manage-nav a > span:last-child {
        display: none;
    }

    .manage-topbar {
        height: 64px;
        padding: 0 1rem;
    }

    .manage-content {
        padding: 1.35rem 1rem 2.5rem;
    }

    .settings-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-health {
        align-self: flex-start;
    }

    .settings-card {
        padding: 1.2rem;
    }
}

.onboarding-optional-grid {
    display: grid;
    gap: 0.9rem;
    margin: 1.1rem 0;
}

.onboarding-optional-grid > article {
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}

.onboarding-optional-grid > article > header {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.onboarding-optional-grid > article > header > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, transparent);
}

.onboarding-optional-grid h2,
.onboarding-optional-grid p {
    margin: 0;
}

.onboarding-optional-grid p,
.onboarding-optional-grid small {
    color: var(--muted);
}

.onboarding-optional-work > small {
    display: block;
    margin-top: 0.65rem;
}

.onboarding-stage-choice {
    margin: 1.1rem 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}

.onboarding-stage-choice h2,
.onboarding-stage-choice p {
    margin: 0;
}

.onboarding-stage-choice p {
    margin-top: 0.25rem;
    color: var(--muted);
}

.onboarding-stage-choice > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.onboarding-stage-choice label {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}

.onboarding-stage-choice input {
    accent-color: var(--primary);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes skeleton {
    from { opacity: .55; }
    to { opacity: 1; }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    padding: 1rem;
    color: white;
    background: var(--danger);
}

#blazor-error-ui {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    z-index: 9999;
    display: none;
    max-width: 650px;
    margin: auto;
    padding: 1rem 3rem 1rem 1rem;
    border-radius: 12px;
    color: #fff;
    background: #1e2339;
    box-shadow: var(--shadow);
}

#blazor-error-ui a {
    color: #c6beff;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: .7rem;
    right: 1rem;
    cursor: pointer;
}

@media (max-width: 1180px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 4rem;
    }

    .hero__copy {
        max-width: 760px;
        margin: auto;
        text-align: center;
    }

    .hero__copy > p {
        margin-inline: auto;
    }

    .hero__actions,
    .hero__proof {
        justify-content: center;
    }

    .hero-preview {
        width: 850px;
        min-width: 0;
        margin: auto;
    }

    .solution-hero {
        gap: 3rem;
    }

    .onboarding-content {
        grid-template-columns: 180px minmax(480px, 760px);
    }

    .onboarding-aside {
        display: none;
    }
}

@media (max-width: 860px) {
    .marketing-nav {
        width: calc(100% - 2rem);
        grid-template-columns: 1fr auto;
    }

    .marketing-nav__links {
        display: none;
    }

    .marketing-nav__actions .button--ghost {
        display: none;
    }

    .hero {
        min-height: 0;
        padding: 4rem 1.25rem;
    }

    .hero h1 {
        font-size: clamp(2.7rem, 13vw, 4.2rem);
    }

    .hero-preview {
        width: 100%;
    }

    .preview-window {
        height: 430px;
        grid-template-columns: 125px 1fr;
        transform: none;
    }

    .preview-sidebar {
        padding-inline: 7px;
    }

    .preview-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .stage-card {
        display: none;
    }

    .sectors div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .value-grid,
    .pricing-grid,
    .solution-benefits {
        grid-template-columns: 1fr;
    }

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

    .marketing-footer {
        grid-template-columns: 1fr;
    }

    .marketing-footer small {
        grid-column: 1;
    }

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

    .solution-card {
        max-width: 520px;
    }

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

    .product-brand span,
    .org-switcher p,
    .org-switcher b,
    .product-nav a:not(.active)::after,
    .product-nav a {
        font-size: 0;
    }

    .product-brand,
    .org-switcher,
    .product-nav a {
        justify-content: center;
    }

    .product-nav a > span {
        font-size: .95rem;
    }

    .product-nav a > i,
    .sidebar-user p,
    .sidebar-user > a {
        display: none;
    }

    .sidebar-user {
        justify-content: center;
        padding-inline: 0;
    }

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

    .metric-grid,
    .dashboard-skeleton {
        grid-template-columns: 1fr 1fr;
    }

    .onboarding-content {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .onboarding-progress {
        flex-direction: row;
    }

    .onboarding-progress > div {
        flex: 1;
    }

    .onboarding-progress > div p,
    .onboarding-progress article {
        display: none;
    }
}

@media (max-width: 560px) {
    .hero__actions {
        flex-direction: column;
    }

    .hero__proof {
        align-items: flex-start;
        text-align: left;
    }

    .hero-preview {
        margin-top: 1rem;
    }

    .preview-window {
        height: 390px;
        grid-template-columns: 1fr;
    }

    .preview-sidebar {
        display: none;
    }

    .preview-body {
        padding: 15px;
    }

    .floating-proof {
        right: 12px;
    }

    .value-section,
    .workflow-section,
    .pricing-page,
    .solution-page {
        padding: 5rem 1.25rem;
    }

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

    .product-shell {
        display: block;
    }

    .product-sidebar {
        width: min(84vw, 290px);
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        transform: translateX(-105%);
        transition: transform .22s ease;
        box-shadow: 24px 0 60px rgba(8, 10, 25, .25);
    }

    .product-sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-close {
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        position: absolute;
        top: 1.15rem;
        right: .9rem;
        z-index: 2;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 9px;
        color: #d9dceb;
        background: rgba(255, 255, 255, .06);
        cursor: pointer;
    }

    .sidebar-close .material-symbols-rounded {
        font-size: 1.05rem;
    }

    .product-sidebar .product-brand {
        padding-right: 3rem;
    }

    .product-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        border: 0;
        background: rgba(14, 17, 33, .48);
        backdrop-filter: blur(2px);
    }

    .mobile-menu {
        display: grid;
    }

    .product-content {
        padding: 1.2rem;
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .metric-grid,
    .dashboard-skeleton {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-grid {
        display: block;
    }

    .product-card {
        margin-top: 1rem;
    }

    .field-grid,
    .preset-grid,
    .onboarding-summary,
    .currency-choice,
    .hub-facts {
        grid-template-columns: 1fr;
    }

    .hub-facts > span {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .onboarding-header {
        padding: 0 1rem;
    }

    .onboarding-header > a:first-child span {
        display: none;
    }

    .onboarding-content {
        padding: 1rem;
    }

    .onboarding-panel {
        min-height: 0;
        padding: 1.3rem;
    }

    .onboarding-progress {
        justify-content: center;
    }

    .onboarding-progress > div {
        flex: 0 0 auto;
    }

    .portal-content {
        padding-top: 2rem;
    }

    .portal-intro > div,
    .portal-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .secure-upload {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

/* Internal document center */
.document-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.document-summary article {
    min-width: 0;
    padding: .9rem 1rem;
    border: 1px solid #e3e4eb;
    border-radius: 13px;
    background: #fff;
}

.document-summary small,
.document-summary strong,
.document-summary span {
    display: block;
}

.document-summary small {
    color: #9298a8;
    font-size: .46rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.document-summary strong {
    margin-top: .35rem;
    color: #2e3347;
    font-size: .95rem;
}

.document-summary span {
    margin-top: .12rem;
    color: #949aa9;
    font-size: .5rem;
}

.document-toolbar {
    flex-wrap: wrap;
}

.document-toolbar .search-box {
    min-width: min(100%, 330px);
    flex: 1;
}

.document-toolbar .compact-select {
    min-width: 145px;
}

.document-list-card {
    overflow: hidden;
    border: 1px solid #e2e3ea;
    border-radius: 14px;
    background: #fff;
}

.document-list-card.is-loading {
    opacity: .65;
    pointer-events: none;
}

.document-table {
    overflow-x: auto;
}

.document-table__head,
.document-table__row {
    min-width: 980px;
    display: grid;
    grid-template-columns: minmax(220px, 1.35fr) minmax(190px, 1fr) minmax(190px, 1fr) 105px 120px 112px;
    align-items: center;
    gap: .8rem;
    padding: .72rem .9rem;
}

.document-table__head {
    color: #8e94a4;
    background: #fafafd;
    font-size: .47rem;
    font-weight: 850;
    letter-spacing: .06em;
}

.document-table__row {
    border-top: 1px solid #ececf2;
    color: #666d80;
    font-size: .56rem;
}

.document-file-cell {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: .62rem;
}

.document-file-cell > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #5e48ca;
    background: #efecff;
    font-size: 1rem;
}

.document-file-cell p,
.document-file-cell strong,
.document-file-cell small,
.document-request-cell strong,
.document-request-cell small {
    min-width: 0;
    display: block;
}

.document-file-cell p {
    margin: 0;
}

.document-file-cell strong,
.document-request-cell strong {
    overflow: hidden;
    color: #34394c;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-file-cell small,
.document-request-cell small,
.document-context-cell small {
    margin-top: .15rem;
    color: #969cab;
    font-size: .47rem;
}

.document-context-cell,
.document-request-cell {
    min-width: 0;
}

.document-context-cell a,
.document-request-cell {
    display: block;
    overflow: hidden;
    color: #5140b4;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-context-cell a + a {
    margin-top: .18rem;
    color: #7d8497;
}

.document-status {
    width: fit-content;
    padding: .24rem .45rem;
    border-radius: 999px;
    color: #76571d;
    background: #fff1d5;
    font-size: .48rem;
    font-weight: 800;
}

.document-status--clean {
    color: #176953;
    background: #e4f5ee;
}

.document-status--rejected,
.document-status--malicious {
    color: #a13945;
    background: #ffebee;
}

.document-table__row time,
.document-unavailable {
    color: #8c92a2;
    font-size: .49rem;
}

.document-download {
    min-height: 32px;
    justify-content: center;
    padding: .4rem .55rem;
    font-size: .5rem;
}

@media (max-width: 900px) {
    .document-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .document-summary {
        grid-template-columns: 1fr;
    }

    .document-toolbar .compact-select,
    .document-toolbar .button {
        width: 100%;
    }
}

/* Subscription, plan capacity and payment actions */
.billing-heading {
    align-items: flex-end;
    margin-bottom: 1rem;
}

.billing-heading .button {
    white-space: nowrap;
}

.billing-currency-note {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #ded9f7;
    border-radius: 13px;
    color: #5c48bd;
    background: #f6f3ff;
}

.billing-currency-note > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #6651c8;
    font-size: 1rem;
}

.billing-currency-note p,
.billing-currency-note strong,
.billing-currency-note small {
    display: block;
    margin: 0;
}

.billing-currency-note strong {
    color: #43358f;
    font-size: .62rem;
}

.billing-currency-note small {
    margin-top: .18rem;
    color: #7e72b5;
    font-size: .51rem;
    line-height: 1.45;
}

.billing-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.billing-current,
.billing-usage > article,
.billing-plans {
    border: 1px solid #e2e3ea;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(48, 46, 67, .035);
}

.billing-current {
    padding: 1.25rem 1.35rem;
    background:
        radial-gradient(circle at 88% 5%, rgba(128, 104, 229, .13), transparent 38%),
        #fff;
}

.billing-current > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.billing-current h2 {
    margin: .32rem 0 0;
    color: #313546;
    font-size: 1.28rem;
    letter-spacing: -.035em;
}

.billing-status {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    padding: .34rem .58rem;
    border-radius: 999px;
    color: #777d8c;
    background: #f0f1f4;
    font-size: .5rem;
    font-weight: 800;
}

.billing-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.billing-status.is-active {
    color: #297c68;
    background: #e5f6f0;
}

.billing-status.is-warning {
    color: #9a681a;
    background: #fff3d8;
}

.billing-price {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-top: 1.1rem;
}

.billing-price strong {
    color: #4835aa;
    font-size: 1.55rem;
    letter-spacing: -.045em;
}

.billing-price span {
    color: #9196a5;
    font-size: .58rem;
}

.billing-trial {
    display: flex;
    align-items: center;
    gap: .42rem;
    margin: .85rem 0 0;
    color: #73798a;
    font-size: .54rem;
}

.billing-trial > span {
    color: #5b48bf;
    font-size: .9rem;
}

.billing-subscription-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .9rem;
}

.billing-subscription-meta > p {
    display: flex;
    align-items: center;
    gap: .48rem;
    min-width: 126px;
    margin: 0;
    padding: .5rem .65rem;
    border: 1px solid #e7e5f0;
    border-radius: 10px;
    background: rgba(250, 249, 253, .85);
}

.billing-subscription-meta .material-symbols-rounded {
    color: #6656b6;
    font-size: 1rem;
}

.billing-subscription-meta > p > span:last-child {
    display: grid;
    gap: .06rem;
}

.billing-subscription-meta small {
    color: #8b8f9d;
    font-size: .47rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.billing-subscription-meta strong {
    color: #454958;
    font-size: .56rem;
}

.billing-empty-copy {
    margin: 1rem 0 0;
    color: #8c91a0;
    font-size: .56rem;
}

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

.billing-usage > article {
    padding: 1rem 1.05rem;
}

.billing-usage header {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.billing-usage header > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #5d49c5;
    background: #efebff;
    font-size: 1rem;
}

.billing-usage p,
.billing-usage small,
.billing-usage strong {
    display: block;
    margin: 0;
}

.billing-usage p small {
    color: #9a9fad;
    font-size: .45rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.billing-usage strong {
    margin-top: .22rem;
    color: #3d4152;
    font-size: .64rem;
}

.billing-usage > article > small {
    margin-top: .45rem;
    color: #999eac;
    font-size: .46rem;
}

.billing-meter {
    height: 5px;
    margin-top: .8rem;
    overflow: hidden;
    border-radius: 999px;
    background: #eeeff3;
}

.billing-meter i {
    min-width: 2px;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #6450c9, #8d79e5);
}

.billing-plans {
    padding: 1.2rem;
}

.billing-plans > header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.billing-plans > header h2 {
    margin: .25rem 0 0;
    color: #343849;
    font-size: .9rem;
}

.billing-plans > header > p {
    max-width: 310px;
    margin: 0;
    color: #9297a6;
    font-size: .49rem;
    line-height: 1.45;
    text-align: right;
}

.billing-plans code {
    padding: .1rem .24rem;
    border-radius: 4px;
    color: #624ec4;
    background: #f1edff;
    font-size: .46rem;
}

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

.billing-plan {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border: 1px solid #e5e6ec;
    border-radius: 13px;
    background: #fbfbfd;
}

.billing-plan.is-current {
    border-color: #9a88e5;
    background: #f8f6ff;
    box-shadow: inset 0 0 0 1px rgba(105, 82, 204, .12);
}

.billing-plan > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    min-height: 46px;
}

.billing-plan h3 {
    margin: 0;
    color: #35394a;
    font-size: .74rem;
}

.billing-plan header div > span {
    display: inline-block;
    margin-top: .3rem;
    padding: .23rem .4rem;
    border-radius: 6px;
    color: #5a44bd;
    background: #ebe6ff;
    font-size: .42rem;
    font-weight: 800;
}

.billing-plan header p {
    margin: 0;
    text-align: right;
}

.billing-plan header strong,
.billing-plan header small {
    display: block;
}

.billing-plan header strong {
    color: #4736a7;
    font-size: .78rem;
}

.billing-plan header small {
    margin-top: .16rem;
    color: #989dab;
    font-size: .44rem;
}

.billing-plan ul {
    display: grid;
    flex: 1;
    gap: .58rem;
    margin: .8rem 0 1rem;
    padding: .8rem 0;
    border-top: 1px solid #e8e8ee;
    border-bottom: 1px solid #e8e8ee;
    list-style: none;
}

.billing-plan li {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #747a8b;
    font-size: .5rem;
}

.billing-plan li > span {
    color: #5aaf94;
    font-size: .78rem;
}

.billing-plan .button {
    width: 100%;
    min-height: 36px;
}

.billing-plan:not(.is-current) .button:disabled {
    border-color: #e3e4e9;
    color: #9297a5;
    background: #eceef2;
    box-shadow: none;
    opacity: 1;
}

.billing-checkout-note {
    margin: .9rem 0 0;
    padding: .7rem .8rem;
    border-radius: 9px;
    color: #7f8493;
    background: #f4f5f7;
    font-size: .49rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 980px) {
    .billing-overview {
        grid-template-columns: 1fr;
    }

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

    .billing-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .billing-heading {
        align-items: stretch;
    }

    .billing-heading .button {
        width: 100%;
    }

    .billing-usage {
        grid-template-columns: 1fr;
    }

    .billing-plans > header {
        display: grid;
    }

    .billing-plans > header > p {
        max-width: none;
        text-align: left;
    }
}

/* Client relationship operations */
.detail-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
}

.detail-tabs button {
    flex: 0 0 auto;
}

.client-relations-card > header,
.detail-list-card > header {
    align-items: center;
}

.client-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding-top: .75rem;
    border-top: 1px solid var(--line);
}

.client-collaborator-list {
    display: grid;
    gap: .5rem;
    padding-top: .7rem;
    border-top: 1px solid var(--line);
}

.client-collaborator-list > span {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #6450c9;
    font-size: .5rem;
    font-weight: 850;
}

.client-collaborator-list > span::first-letter {
    text-transform: uppercase;
}

.client-collaborator-list strong {
    color: #4b5062;
    font-size: .58rem;
}

.contact-row > .icon-button {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.client-relation-modal {
    width: min(620px, calc(100vw - 2rem));
}

.client-relation-modal > header p {
    max-width: 430px;
    margin: .35rem 0 0;
    color: #8e94a4;
    font-size: .56rem;
    line-height: 1.45;
}

.client-contact-switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin: .85rem 0 1rem;
}

.client-contact-switches label,
.client-collaborator-options label {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .72rem;
    border: 1px solid #e3e4ea;
    border-radius: 10px;
    background: #fafafd;
    cursor: pointer;
}

.client-contact-switches input,
.client-collaborator-options input {
    accent-color: #614bc7;
}

.client-contact-switches span,
.client-contact-switches strong,
.client-contact-switches small {
    display: block;
}

.client-contact-switches strong {
    color: #454a5b;
    font-size: .57rem;
}

.client-contact-switches small {
    margin-top: .18rem;
    color: #979cab;
    font-size: .47rem;
}

.modal-footer-spacer {
    flex: 1;
}

.client-tag-suggestions {
    margin: .7rem 0 1rem;
    padding: .7rem;
    border-radius: 10px;
    background: #f5f4fa;
}

.client-tag-suggestions > small {
    display: block;
    margin-bottom: .45rem;
    color: #9196a5;
    font-size: .47rem;
    font-weight: 750;
}

.client-tag-suggestions button {
    margin: .18rem .22rem .18rem 0;
    padding: .3rem .48rem;
    border: 1px solid #ddd9f4;
    border-radius: 7px;
    color: #5e49be;
    background: #fff;
    font-size: .5rem;
}

.client-collaborator-options {
    max-height: 310px;
    display: grid;
    gap: .5rem;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.client-collaborator-options .client-profile-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    font-size: .55rem;
}

.client-collaborator-options p {
    flex: 1;
    margin: 0;
}

.client-collaborator-options strong,
.client-collaborator-options small {
    display: block;
}

.client-collaborator-options strong {
    color: #45495a;
    font-size: .58rem;
}

.client-collaborator-options small {
    margin-top: .17rem;
    color: #989dac;
    font-size: .47rem;
}

.client-relation-modal textarea {
    resize: vertical;
}

@media (max-width: 640px) {
    .client-contact-switches {
        grid-template-columns: 1fr;
    }

    .client-profile-header {
        align-items: flex-start;
    }
}

@media (max-width: 1180px) {
    .client-filter-panel {
        grid-template-columns: 1fr 1fr;
    }

    .client-filter-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .client-quick-controls {
        grid-template-columns: 1fr 1fr;
    }

    .client-quick-controls > div:nth-child(3) {
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .list-toolbar {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .search-box {
        width: 100%;
    }

    .view-switch {
        margin-left: auto;
    }

    .client-filter-panel,
    .client-quick-controls {
        grid-template-columns: 1fr;
    }

    .client-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .client-quick-controls > div {
        padding: .65rem 0 0;
        border-top: 1px solid #e8eaf0;
        border-left: 0;
    }

    .client-profile-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .client-profile-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .client-profile-actions .button {
        flex: 1;
    }

    .client-context-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .client-context-actions .button {
        justify-content: center;
    }

    .settings-retention-grid {
        grid-template-columns: 1fr;
    }
}

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

.field-textarea,
.task-comment-composer textarea {
    width: 100%;
    min-height: 105px;
    resize: vertical;
    padding: .75rem .8rem;
    border: 1px solid #dfe2eb;
    border-radius: 9px;
    color: var(--ink);
    background: #fff;
    font: inherit;
    font-size: .75rem;
    line-height: 1.55;
    outline: 0;
}

.field-textarea:focus,
.task-comment-composer textarea:focus {
    border-color: #8b78ec;
    box-shadow: 0 0 0 3px rgba(111, 83, 237, .1);
}

.task-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .8rem;
    margin-bottom: 1rem;
}

.task-metric {
    min-height: 96px;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: .7rem;
    padding: 1rem;
    border: 1px solid #e5e7ef;
    border-radius: 13px;
    color: #596177;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.task-metric:hover,
.task-metric.active {
    border-color: #cfc6fb;
    box-shadow: 0 9px 24px rgba(47, 39, 95, .08);
    transform: translateY(-1px);
}

.task-metric > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #654fd5;
    background: #efecff;
    font-size: 1.05rem;
}

.task-metric small {
    font-size: .66rem;
    font-weight: 700;
}

.task-metric strong {
    color: #23293d;
    font-size: 1.5rem;
    letter-spacing: -.05em;
}

.task-metric--danger > span {
    color: #b93240;
    background: #ffeaec;
}

.task-metric--amber > span {
    color: #a66708;
    background: #fff2d9;
}

.task-metric--cyan > span {
    color: #08727c;
    background: #e1f5f6;
}

.task-scope-tabs {
    display: flex;
    gap: .35rem;
    margin-bottom: 1rem;
    padding-bottom: .15rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.task-scope-tabs button {
    min-height: 34px;
    flex: 0 0 auto;
    padding: .45rem .75rem;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #767e91;
    background: transparent;
    font-size: .64rem;
    font-weight: 680;
    cursor: pointer;
}

.task-scope-tabs button:hover,
.task-scope-tabs button.active {
    color: #533bc9;
    background: #eeebff;
}

.task-scope-tabs button.active {
    border-color: #d9d1ff;
}

.task-filter-panel {
    grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
}

.task-list-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7ef;
    border-radius: 14px;
    background: #fff;
}

.task-list-card.is-loading::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    content: "";
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(1px);
}

.task-table {
    overflow-x: auto;
}

.task-table__head,
.task-table__row {
    min-width: 880px;
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(165px, .9fr) minmax(105px, .65fr) 112px 118px 64px;
    align-items: center;
    gap: 1rem;
    padding: 0 1.2rem;
}

.task-table__head {
    min-height: 42px;
    color: #9298a9;
    background: #fafafd;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.task-table__row {
    min-height: 72px;
    border-top: 1px solid #eef0f4;
    color: #5f677b;
    font-size: .67rem;
}

.task-table__row:hover {
    background: #fbfbff;
}

.task-table__row.is-overdue {
    box-shadow: inset 3px 0 #ce4552;
}

.task-main-cell,
.task-context-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    color: inherit;
    text-decoration: none;
}

.task-main-cell > span,
.task-context-cell {
    min-width: 0;
}

.task-main-cell strong,
.task-main-cell small,
.task-context-cell strong,
.task-context-cell small,
.task-due small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-main-cell strong,
.task-context-cell strong {
    color: #282e42;
    font-size: .7rem;
}

.task-main-cell small,
.task-context-cell small,
.task-due small {
    margin-top: .27rem;
    color: #969dad;
    font-size: .56rem;
    font-weight: 500;
}

.task-priority-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border: 2px solid #a4aaba;
    border-radius: 50%;
}

.task-priority-dot--urgent {
    border-color: #d1414f;
    background: #d1414f;
}

.task-priority-dot--high {
    border-color: #d78717;
    background: #f4b44f;
}

.task-priority-dot--low {
    border-color: #78a2a6;
}

.task-due.is-overdue {
    color: #bd3946;
    font-weight: 750;
}

.task-status-control select,
.task-inline-status select {
    width: 100%;
    min-height: 34px;
    padding: .4rem .55rem;
    border: 1px solid #dfe2ea;
    border-radius: 8px;
    color: #596177;
    background: #fff;
    font-size: .61rem;
    outline: 0;
}

.task-row-actions {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
}

.task-row-actions button,
.task-row-actions a {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #777f94;
    background: transparent;
    cursor: pointer;
}

.task-row-actions button:hover,
.task-row-actions a:hover {
    color: #5740ce;
    background: #eeebff;
}

.task-row-actions .material-symbols-rounded {
    font-size: 1rem;
}

.follow-up-box {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #e1dcfb;
    border-radius: 11px;
    background: #faf9ff;
}

.follow-up-box > div {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .9rem;
}

.follow-up-box > div > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #6048d0;
    background: #ebe7ff;
    font-size: 1rem;
}

.follow-up-box p {
    margin: 0;
}

.follow-up-box strong,
.follow-up-box small {
    display: block;
}

.follow-up-box strong {
    font-size: .7rem;
}

.follow-up-box small {
    margin-top: .2rem;
    color: #8e95a7;
    font-size: .57rem;
    font-weight: 500;
}

.follow-up-box .field:last-child {
    margin-bottom: 0;
}

.task-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.task-detail-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 15px;
    color: #5d46cd;
    background: #ebe8ff;
    font-size: 1.4rem;
}

.task-detail-title {
    min-width: 0;
    flex: 1;
}

.task-detail-title h1 {
    margin: .5rem 0 .28rem;
    overflow-wrap: anywhere;
    font-size: 1.75rem;
    letter-spacing: -.045em;
}

.task-detail-title > p {
    margin: 0;
    color: #8d94a5;
    font-size: .66rem;
}

.task-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.task-status-pill,
.task-priority-pill {
    display: inline-flex;
    align-items: center;
    padding: .28rem .52rem;
    border-radius: 8px;
    color: #5d6578;
    background: #eff0f4;
    font-size: .55rem;
    font-weight: 680;
}

.task-status-pill--inprogress {
    color: #5c45c8;
    background: #ece9ff;
}

.task-status-pill--blocked,
.task-priority-pill--urgent {
    color: #b63441;
    background: #ffe9ec;
}

.task-status-pill--done {
    color: #17705c;
    background: #e5f5ef;
}

.task-status-pill--canceled {
    color: #666d7e;
    background: #e8eaef;
}

.task-priority-pill--high {
    color: #9a5f08;
    background: #fff0d7;
}

.task-priority-pill--low {
    color: #47757a;
    background: #e7f3f4;
}

.task-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
    align-items: start;
    gap: 1rem;
}

.task-detail-main,
.task-detail-side {
    display: grid;
    gap: 1rem;
}

.task-inline-status {
    width: 130px;
    display: grid;
    gap: .3rem;
    color: #9097a7;
    font-size: .54rem;
    font-weight: 700;
}

.task-description {
    margin: 0 0 1rem;
    padding: 1rem;
    border-radius: 10px;
    color: #555d71;
    background: #f7f8fb;
    font-size: .7rem;
    line-height: 1.65;
    white-space: pre-wrap;
}

.task-description--empty {
    color: #969cac;
    font-style: italic;
}

.task-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
    margin: 0;
}

.task-facts > div {
    min-width: 0;
    padding: .75rem;
    border: 1px solid #eceef3;
    border-radius: 9px;
}

.task-facts dt {
    color: #989eae;
    font-size: .53rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.task-facts dd {
    margin: .35rem 0 0;
    overflow: hidden;
    color: #333a4e;
    font-size: .65rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-facts a {
    color: #5a43ca;
    text-decoration: none;
}

.task-outcome {
    display: flex;
    gap: .7rem;
    margin-top: 1rem;
    padding: .9rem;
    border: 1px solid #cce9df;
    border-radius: 10px;
    color: #176a57;
    background: #f0faf7;
}

.task-outcome > span {
    font-size: 1.1rem;
}

.task-outcome p {
    margin: 0;
}

.task-outcome small,
.task-outcome strong {
    display: block;
}

.task-outcome small {
    margin-bottom: .3rem;
    font-size: .5rem;
    letter-spacing: .06em;
}

.task-outcome strong {
    color: #275d51;
    font-size: .66rem;
    line-height: 1.5;
}

.checklist-progress-value {
    color: #6048ce;
    font-size: .68rem;
    font-weight: 800;
}

.checklist-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: #eceef3;
}

.checklist-progress > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #7057ed, #8f7cf6);
    transition: width .2s ease;
}

.task-checklist {
    margin-top: .6rem;
}

.task-checklist-item {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-bottom: 1px solid #eef0f4;
}

.task-checklist-item > label {
    position: relative;
}

.task-checklist-item input {
    position: absolute;
    opacity: 0;
}

.task-checklist-item > label > span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border: 1px solid #cbd0db;
    border-radius: 6px;
    color: transparent;
    font-size: .85rem;
    cursor: pointer;
}

.task-checklist-item.is-complete > label > span {
    border-color: #6c55dc;
    color: #fff;
    background: #6c55dc;
}

.task-checklist-item p {
    flex: 1;
    margin: 0;
    color: #3f475b;
    font-size: .67rem;
}

.task-checklist-item.is-complete p {
    color: #9299a8;
    text-decoration: line-through;
}

.task-checklist-item .icon-button {
    border-color: transparent;
    background: transparent;
    opacity: 0;
}

.task-checklist-item:hover .icon-button,
.task-checklist-item .icon-button:focus-visible {
    opacity: 1;
}

.task-inline-form {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: .6rem;
    margin-top: 1rem;
}

.task-inline-form .field {
    margin: 0;
}

.task-comment-composer {
    display: grid;
    justify-items: end;
    gap: .6rem;
    padding: .85rem;
    border: 1px solid #e6e8ef;
    border-radius: 11px;
    background: #fafafd;
}

.task-comment-composer textarea {
    min-height: 78px;
    border: 0;
    padding: .2rem;
    background: transparent;
    box-shadow: none;
}

.task-comment-composer .button {
    min-height: 36px;
    padding: .55rem .8rem;
    font-size: .66rem;
}

.task-comments {
    margin-top: 1rem;
}

.task-comments > article {
    display: flex;
    gap: .7rem;
    padding: .85rem 0;
    border-top: 1px solid #eef0f4;
}

.task-comments > article > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #5b44ca;
    background: #ebe8ff;
    font-size: .54rem;
    font-weight: 800;
}

.task-comments article > div {
    min-width: 0;
    flex: 1;
}

.task-comments p {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .4rem;
}

.task-comments strong {
    font-size: .65rem;
}

.task-comments small {
    color: #9aa0af;
    font-size: .53rem;
}

.task-comments article > div > div {
    color: #545c70;
    font-size: .66rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.task-empty-copy {
    padding: 1rem 0 0;
    color: #9ba1b0;
    font-size: .63rem;
    text-align: center;
}

.task-reminders {
    margin-bottom: 1rem;
}

.task-reminders > div {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-top: 1px solid #eef0f4;
}

.task-reminders > div > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #9a630c;
    background: #fff1d9;
    font-size: 1rem;
}

.task-reminders p {
    flex: 1;
    margin: 0;
}

.task-reminders strong,
.task-reminders small {
    display: block;
}

.task-reminders strong {
    font-size: .61rem;
}

.task-reminders small {
    margin-top: .2rem;
    color: #9aa0af;
    font-size: .52rem;
}

.task-secondary-actions {
    padding-bottom: .5rem;
}

.task-secondary-actions > button {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 0;
    border: 0;
    border-top: 1px solid #eef0f4;
    color: #596177;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.task-secondary-actions > button > span:first-child {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #6048ce;
    background: #eeebff;
    font-size: 1rem;
}

.task-secondary-actions > button > span:last-child {
    color: #989faf;
    font-size: 1rem;
}

.task-secondary-actions > button p {
    flex: 1;
    margin: 0;
}

.task-secondary-actions > button strong,
.task-secondary-actions > button small {
    display: block;
}

.task-secondary-actions > button strong {
    font-size: .64rem;
}

.task-secondary-actions > button small {
    margin-top: .2rem;
    color: #979dad;
    font-size: .53rem;
}

.task-secondary-actions > button.is-danger > span:first-child {
    color: #b53643;
    background: #ffeaec;
}

.task-secondary-actions > button.is-danger strong {
    color: #aa303b;
}

.detail-list-row--link {
    color: inherit;
    text-decoration: none;
    transition: background .16s ease;
}

.detail-list-row--link:hover {
    margin-inline: -.55rem;
    padding-inline: .55rem;
    border-radius: 9px;
    background: #faf9ff;
}

.detail-list-row--link > .material-symbols-rounded:last-child {
    color: #9ca2b1;
    font-size: 1rem;
}

.workspace-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .7rem;
    margin-bottom: 1rem;
}

.workspace-metric {
    min-height: 88px;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid #e5e7ef;
    border-radius: 13px;
    color: #596177;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.workspace-metric:hover,
.workspace-metric.active {
    border-color: #cfc6fb;
    box-shadow: 0 9px 24px rgba(47, 39, 95, .08);
    transform: translateY(-1px);
}

.workspace-metric > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #17705c;
    background: #e5f5ef;
    font-size: 1rem;
}

.workspace-metric small {
    color: #687085;
    font-size: .61rem;
    font-weight: 720;
}

.workspace-metric strong {
    color: #23293d;
    font-size: 1.35rem;
    letter-spacing: -.05em;
}

.workspace-metric--danger > span {
    color: #b93240;
    background: #ffeaec;
}

.workspace-metric--violet > span {
    color: #654fd5;
    background: #efecff;
}

.workspace-metric--amber > span {
    color: #a66708;
    background: #fff2d9;
}

.workspace-metric--muted > span {
    color: #687085;
    background: #eff1f5;
}

.workspace-filter-panel {
    grid-template-columns: repeat(3, minmax(145px, 1fr)) repeat(3, minmax(145px, 1fr)) auto;
}

.workspace-list-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7ef;
    border-radius: 14px;
    background: #fff;
}

.workspace-list-card.is-loading::after {
    position: absolute;
    inset: 0;
    z-index: 5;
    content: "";
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(1px);
}

.workspace-table {
    overflow-x: auto;
}

.workspace-table__head,
.workspace-table__row {
    min-width: 900px;
    display: grid;
    grid-template-columns: minmax(185px, 1.3fr) minmax(115px, .82fr) 120px minmax(100px, .72fr) 120px 100px 20px;
    align-items: center;
    gap: .6rem;
    padding: 0 1.2rem;
}

.workspace-table__head {
    min-height: 42px;
    color: #9298a9;
    background: #fafafd;
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .06em;
}

.workspace-table__row {
    min-height: 78px;
    border-top: 1px solid #eef0f4;
    color: #5f677b;
    font-size: .65rem;
    text-decoration: none;
    transition: background .15s ease;
}

.workspace-table__row:hover {
    background: #fbfbff;
}

.workspace-table__row.is-overdue {
    box-shadow: inset 3px 0 #ce4552;
}

.workspace-main-cell,
.workspace-client-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
}

.workspace-main-cell > span,
.workspace-client-cell {
    min-width: 0;
}

.workspace-main-cell strong,
.workspace-main-cell small,
.workspace-client-cell strong,
.workspace-client-cell small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-main-cell strong,
.workspace-client-cell strong {
    color: #282e42;
    font-size: .69rem;
}

.workspace-main-cell small,
.workspace-client-cell small {
    margin-top: .27rem;
    color: #969dad;
    font-size: .55rem;
}

.workspace-priority-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border: 2px solid #a4aaba;
    border-radius: 50%;
}

.workspace-priority-dot--urgent {
    border-color: #d1414f;
    background: #d1414f;
}

.workspace-priority-dot--high {
    border-color: #d78717;
    background: #f4b44f;
}

.workspace-priority-dot--low {
    border-color: #78a2a6;
}

.workspace-stage {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    padding: .3rem .5rem;
    border-radius: 8px;
    color: #596177;
    background: #f0f1f5;
    font-size: .55rem;
    font-style: normal;
    font-weight: 700;
}

.workspace-stage::before,
.stage-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    flex: 0 0 auto;
    border-radius: 50%;
    content: "";
    background: #8d94a5;
}

.stage-dot--violet::before,
.stage-dot--violet {
    background: #7056e8;
}

.stage-dot--blue::before,
.stage-dot--blue {
    background: #3f76db;
}

.stage-dot--cyan::before,
.stage-dot--cyan {
    background: #188a92;
}

.stage-dot--amber::before,
.stage-dot--amber {
    background: #ce8619;
}

.stage-dot--green::before,
.stage-dot--green {
    background: #238266;
}

.stage-dot--neutral::before,
.stage-dot--neutral {
    background: #8d94a5;
}

.stage-dot--slate::before,
.stage-dot--slate {
    background: #64748b;
}

.stage-dot--indigo::before,
.stage-dot--indigo {
    background: #4f46e5;
}

.workspace-owner-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-progress-cell > span {
    width: 100%;
    height: 5px;
    display: block;
    overflow: hidden;
    border-radius: 5px;
    background: #eceef3;
}

.workspace-progress-cell > span > i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #7057ed, #8f7cf6);
}

.workspace-progress-cell small,
.workspace-due-cell small {
    display: block;
    margin-top: .35rem;
    color: #969dad;
    font-size: .52rem;
}

.workspace-due-cell.is-overdue {
    color: #bd3946;
    font-weight: 750;
}

.workspace-chevron {
    color: #9da3b2;
    font-size: 1rem;
}

.workspace-kanban {
    display: grid;
    grid-auto-columns: minmax(250px, 1fr);
    grid-auto-flow: column;
    gap: .85rem;
    padding: 1rem;
    overflow-x: auto;
    background: #f8f8fb;
}

.workspace-kanban-column {
    min-width: 250px;
    max-width: 340px;
}

.workspace-kanban-column > header {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .25rem;
}

.workspace-kanban-column > header strong {
    flex: 1;
    color: #50586c;
    font-size: .64rem;
}

.workspace-kanban-column > header span {
    min-width: 22px;
    padding: .2rem .35rem;
    border-radius: 7px;
    color: #777f92;
    background: #e9eaf0;
    font-size: .52rem;
    font-weight: 800;
    text-align: center;
}

.workspace-kanban-column > div {
    display: grid;
    align-content: start;
    gap: .65rem;
}

.workspace-kanban-card {
    overflow: hidden;
    border: 1px solid #e1e3eb;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(42, 45, 70, .04);
}

.workspace-kanban-card.is-overdue {
    border-left: 3px solid #ce4552;
}

.workspace-kanban-card > a {
    display: block;
    padding: .85rem;
    color: inherit;
    text-decoration: none;
}

.workspace-kanban-card > a:hover {
    background: #fdfcff;
}

.workspace-kanban-card > a > small,
.workspace-kanban-card > a > strong,
.workspace-kanban-card > a > p {
    display: block;
}

.workspace-kanban-card > a > small {
    color: #8e95a6;
    font-size: .52rem;
}

.workspace-kanban-card > a > strong {
    margin-top: .42rem;
    color: #2c3245;
    font-size: .68rem;
    line-height: 1.35;
}

.workspace-kanban-card > a > p {
    margin: .32rem 0 .75rem;
    color: #9aa0ae;
    font-size: .53rem;
}

.workspace-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
    color: #697186;
    font-size: .54rem;
}

.workspace-priority {
    padding: .22rem .36rem;
    border-radius: 6px;
    color: #687085;
    background: #eff0f4;
    font-size: .49rem;
    font-weight: 700;
}

.workspace-priority--urgent {
    color: #b63441;
    background: #ffe9ec;
}

.workspace-priority--high {
    color: #9a5f08;
    background: #fff0d7;
}

.workspace-card-progress {
    height: 4px;
    overflow: hidden;
    border-radius: 5px;
    background: #eceef3;
}

.workspace-card-progress > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: #7057ed;
}

.workspace-kanban-card > a > footer {
    display: flex;
    justify-content: space-between;
    margin-top: .4rem;
    color: #959baa;
    font-size: .48rem;
}

.workspace-kanban-card > label {
    display: block;
    padding: .55rem .7rem;
    border-top: 1px solid #eceef3;
    background: #fafafd;
}

.workspace-kanban-card > label select {
    width: 100%;
    min-height: 30px;
    padding: .3rem .4rem;
    border: 1px solid #dfe2ea;
    border-radius: 7px;
    color: #555e73;
    background: #fff;
    font-size: .55rem;
}

.workspace-member-picker {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .85rem;
    border: 1px solid #e5e7ef;
    border-radius: 11px;
}

.workspace-member-picker legend {
    padding: 0 .35rem;
    color: #70788c;
    font-size: .64rem;
    font-weight: 700;
}

.workspace-member-picker label {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem;
    border-radius: 8px;
    color: #3e4559;
    background: #f8f8fb;
    font-size: .63rem;
    cursor: pointer;
}

.workspace-member-picker label > span {
    display: grid;
    gap: .15rem;
}

.workspace-member-picker small {
    color: #969cac;
    font-size: .5rem;
}

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

.workspace-detail-header > .icon-button {
    flex: 0 0 auto;
}

.workspace-detail-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 15px;
    color: #5d46cd;
    background: #ebe8ff;
    font-size: 1.4rem;
}

.workspace-detail-title {
    min-width: 0;
    flex: 1;
}

.workspace-detail-title h1 {
    margin: .45rem 0 .25rem;
    overflow-wrap: anywhere;
    font-size: 1.75rem;
    letter-spacing: -.045em;
}

.workspace-detail-title > p {
    margin: 0;
    color: #8d94a5;
    font-size: .64rem;
}

.workspace-detail-title > p a {
    color: #6048d8;
    font-weight: 700;
    text-decoration: none;
}

.workspace-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.workspace-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.workspace-control-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
    padding: .8rem;
    border: 1px solid #e5e7ef;
    border-radius: 13px;
    background: #fff;
}

.workspace-control-strip > label,
.workspace-control-strip > div {
    min-width: 0;
    display: grid;
    gap: .32rem;
    padding: .25rem .45rem;
    border-right: 1px solid #eceef3;
}

.workspace-control-strip > :last-child {
    border-right: 0;
}

.workspace-control-strip span {
    color: #969dac;
    font-size: .5rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.workspace-control-strip strong {
    overflow: hidden;
    color: #353c50;
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-control-strip strong.is-overdue {
    color: #bd3946;
}

.workspace-control-strip select {
    width: 100%;
    min-height: 32px;
    padding: .35rem .45rem;
    border: 1px solid #dfe2ea;
    border-radius: 8px;
    color: #50586d;
    background: #fff;
    font-size: .6rem;
}

.workspace-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(290px, .7fr);
    align-items: start;
    gap: 1rem;
}

.workspace-detail-main,
.workspace-detail-side {
    display: grid;
    gap: 1rem;
}

.workspace-progress-value {
    color: #6048ce;
    font-size: 1.45rem;
    letter-spacing: -.05em;
}

.workspace-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 8px;
    background: #eceef3;
}

.workspace-progress-track > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #6650dc, #8d78f2);
}

.workspace-progress-copy {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .55rem;
}

.workspace-progress-copy strong {
    color: #464e62;
    font-size: .61rem;
}

.workspace-progress-copy span {
    color: #969dac;
    font-size: .54rem;
}

.workspace-next-action {
    display: flex;
    gap: .7rem;
    margin: 1rem 0;
    padding: .85rem;
    border: 1px solid #ded8fb;
    border-radius: 10px;
    background: #faf9ff;
}

.workspace-next-action > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #6048ce;
    background: #ebe7ff;
    font-size: 1rem;
}

.workspace-next-action small,
.workspace-next-action strong,
.workspace-next-action p {
    display: block;
}

.workspace-next-action small {
    color: #8f96a7;
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.workspace-next-action strong {
    margin-top: .3rem;
    color: #363d51;
    font-size: .68rem;
}

.workspace-next-action p {
    margin: .25rem 0 0;
    color: #8d94a5;
    font-size: .53rem;
}

.workspace-description {
    margin: 0 0 1rem;
    padding: .9rem;
    border-radius: 10px;
    color: #555d71;
    background: #f7f8fb;
    font-size: .67rem;
    line-height: 1.65;
    white-space: pre-wrap;
}

.workspace-description.is-empty {
    color: #969cac;
    font-style: italic;
}

.workspace-subtabs {
    display: flex;
    gap: .3rem;
    margin-bottom: .7rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #eceef3;
}

.workspace-subtabs button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .42rem .62rem;
    border: 0;
    border-radius: 8px;
    color: #777f92;
    background: transparent;
    font-size: .6rem;
    font-weight: 700;
    cursor: pointer;
}

.workspace-subtabs button.active {
    color: #5941cb;
    background: #eeebff;
}

.workspace-subtabs button span {
    min-width: 18px;
    padding: .12rem .28rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, .75);
    font-size: .48rem;
}

.workspace-related-list > a {
    min-height: 60px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: .65rem;
    border-top: 1px solid #eef0f4;
    color: inherit;
    text-decoration: none;
}

.workspace-related-list > a > span:first-child {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #6048ce;
    background: #eeebff;
    font-size: .95rem;
}

.workspace-related-list > a > span:last-child {
    color: #9aa0af;
    font-size: .95rem;
}

.workspace-related-list p {
    min-width: 0;
    margin: 0;
}

.workspace-related-list strong,
.workspace-related-list small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-related-list strong {
    color: #373e52;
    font-size: .64rem;
}

.workspace-related-list small {
    margin-top: .25rem;
    color: #969cac;
    font-size: .52rem;
}

.workspace-related-list time {
    color: #777f92;
    font-size: .54rem;
}

.workspace-related-list time.is-overdue {
    color: #bd3946;
    font-weight: 750;
}

.workspace-file-summary {
    display: grid;
    justify-items: center;
    padding: 2rem 1rem;
    text-align: center;
}

.workspace-file-summary > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #5d46cd;
    background: #ebe8ff;
    font-size: 1.3rem;
}

.workspace-file-summary strong {
    margin-top: .75rem;
    font-size: .7rem;
}

.workspace-file-summary p {
    max-width: 380px;
    margin: .35rem 0 0;
    color: #969cac;
    font-size: .57rem;
    line-height: 1.55;
}

.workspace-blockers-card > header > strong {
    color: #b63441;
    font-size: .6rem;
}

.workspace-blocker-list > article {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-top: 1px solid #eef0f4;
}

.workspace-blocker-list > article > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #b63441;
    background: #ffe9ec;
    font-size: .95rem;
}

.workspace-blocker-list article.is-resolved {
    opacity: .7;
}

.workspace-blocker-list article.is-resolved > span {
    color: #17705c;
    background: #e5f5ef;
}

.workspace-blocker-list article > div {
    min-width: 0;
    flex: 1;
}

.workspace-blocker-list strong,
.workspace-blocker-list small {
    display: block;
}

.workspace-blocker-list strong {
    color: #3e4559;
    font-size: .63rem;
}

.workspace-blocker-list small {
    margin-top: .25rem;
    color: #979eae;
    font-size: .5rem;
}

.workspace-blocker-list .button {
    min-height: 30px;
    padding: .35rem .55rem;
    font-size: .53rem;
}

.workspace-note-list > article {
    display: flex;
    gap: .65rem;
    padding: .85rem 0;
    border-top: 1px solid #eef0f4;
}

.workspace-note-list > article > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #5b44ca;
    background: #ebe8ff;
    font-size: .52rem;
    font-weight: 800;
}

.workspace-note-list article > div {
    min-width: 0;
    flex: 1;
}

.workspace-note-list p {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .35rem;
}

.workspace-note-list strong {
    font-size: .62rem;
}

.workspace-note-list small {
    color: #9aa0af;
    font-size: .5rem;
}

.workspace-note-list article > div > div {
    color: #545c70;
    font-size: .64rem;
    line-height: 1.55;
    white-space: pre-wrap;
}

.workspace-note-list .icon-button {
    flex: 0 0 auto;
}

.workspace-collaborators-card fieldset {
    display: grid;
    gap: .2rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.workspace-collaborators-card fieldset > label {
    min-height: 45px;
    display: grid;
    grid-template-columns: auto 30px minmax(0, 1fr);
    align-items: center;
    gap: .55rem;
    padding: .35rem;
    border-radius: 8px;
    cursor: pointer;
}

.workspace-collaborators-card fieldset > label:hover {
    background: #f8f8fb;
}

.workspace-collaborators-card fieldset > label > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #5b44ca;
    background: #ebe8ff;
    font-size: .49rem;
    font-weight: 800;
}

.workspace-collaborators-card p {
    min-width: 0;
    margin: 0;
}

.workspace-collaborators-card strong,
.workspace-collaborators-card small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-collaborators-card strong {
    color: #3d4458;
    font-size: .61rem;
}

.workspace-collaborators-card small {
    margin-top: .2rem;
    color: #989faf;
    font-size: .49rem;
}

.workspace-save-members {
    width: 100%;
    min-height: 36px;
    margin-top: .7rem;
    font-size: .58rem;
}

.workspace-activity-list > article {
    display: flex;
    gap: .6rem;
    padding: .65rem 0;
    border-top: 1px solid #eef0f4;
}

.workspace-activity-list > article > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #6048ce;
    background: #eeebff;
    font-size: .9rem;
}

.workspace-activity-list strong,
.workspace-activity-list small {
    display: block;
}

.workspace-activity-list strong {
    color: #434a5e;
    font-size: .58rem;
    line-height: 1.4;
}

.workspace-activity-list small {
    margin-top: .22rem;
    color: #9aa0af;
    font-size: .47rem;
}

.workspace-danger-card .button {
    width: 100%;
    font-size: .6rem;
}

.workspace-danger-card .button.is-danger {
    color: #b63441;
    border-color: #f0c7cc;
    background: #fffafb;
}

@media (max-width: 1180px) {
    .task-filter-panel {
        grid-template-columns: repeat(3, 1fr);
    }

    .task-filter-panel .client-filter-actions {
        grid-column: 1 / -1;
    }

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

    .workspace-filter-panel {
        grid-template-columns: repeat(3, 1fr);
    }

    .workspace-filter-panel .client-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 940px) {
    .task-detail-layout {
        grid-template-columns: 1fr;
    }

    .task-detail-side {
        grid-template-columns: 1fr 1fr;
    }

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

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

    .workspace-danger-card {
        grid-column: 1 / -1;
    }

    .workspace-control-strip {
        grid-template-columns: repeat(3, 1fr);
    }

    .workspace-control-strip > :nth-child(3) {
        border-right: 0;
    }
}

@media (max-width: 720px) {
    .task-metric-grid {
        grid-template-columns: 1fr 1fr;
    }

    .task-filter-panel {
        grid-template-columns: 1fr;
    }

    .task-detail-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .task-detail-actions {
        width: 100%;
    }

    .task-detail-actions .button {
        flex: 1;
    }

    .task-detail-side {
        grid-template-columns: 1fr;
    }

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

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

    .workspace-detail-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .workspace-detail-actions {
        width: 100%;
    }

    .workspace-detail-actions .button {
        flex: 1;
    }

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

    .workspace-control-strip > label,
    .workspace-control-strip > div {
        border-right: 0;
        border-bottom: 1px solid #eceef3;
    }

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

    .workspace-danger-card {
        grid-column: auto;
    }

    .workspace-progress-copy {
        display: grid;
    }
}

@media (max-width: 520px) {
    .task-metric-grid {
        grid-template-columns: 1fr;
    }

    .task-detail-icon {
        width: 44px;
        height: 44px;
    }

    .task-detail-title h1 {
        font-size: 1.35rem;
    }

    .task-facts,
    .task-inline-form {
        grid-template-columns: 1fr;
    }

    .task-inline-form .button {
        width: 100%;
    }

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

    .workspace-detail-icon {
        width: 44px;
        height: 44px;
    }

    .workspace-detail-title h1 {
        font-size: 1.35rem;
    }

    .workspace-control-strip,
    .workspace-member-picker {
        grid-template-columns: 1fr;
    }

    .workspace-related-list > a {
        grid-template-columns: 30px minmax(0, 1fr) 20px;
    }

    .workspace-related-list time {
        display: none;
    }
}

.heading-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.request-metric-grid {
    margin-bottom: 1rem;
}

.request-filter-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}

.request-list-card,
.review-inbox-card {
    padding: 0;
    overflow: hidden;
}

.request-table-head,
.request-table-row {
    display: grid;
    grid-template-columns: minmax(260px, 2.1fr) minmax(120px, .8fr) minmax(110px, .75fr) minmax(130px, .9fr) 110px 28px;
    gap: 1rem;
    align-items: center;
}

.request-table-head {
    padding: .75rem 1.25rem;
    color: #747b91;
    background: #fafbfc;
    border-bottom: 1px solid #eceef3;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.request-table-row {
    width: 100%;
    padding: 1rem 1.25rem;
    color: #4e566d;
    text-align: left;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eef0f4;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}

.request-table-row:last-child {
    border-bottom: 0;
}

.request-table-row:hover {
    background: #fbfaff;
}

.request-primary {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .75rem;
}

.request-primary > i {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--violet);
    font-style: normal;
    background: #f1edff;
    border-radius: 12px;
}

.request-primary p,
.request-progress {
    display: grid;
    min-width: 0;
    gap: .2rem;
    margin: 0;
}

.request-primary strong {
    overflow: hidden;
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-primary small,
.request-progress small {
    overflow: hidden;
    color: #7b8296;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.request-progress strong {
    color: var(--ink);
}

.request-status {
    font-size: .7rem;
}

.request-status--draft { color: #5d657a; background: #eff1f5; }
.request-status--sent,
.request-status--inprogress { color: #1558b0; background: #e8f2ff; }
.request-status--submitted { color: #6e3ab7; background: #f1eafd; }
.request-status--needschanges { color: #a45c08; background: #fff2d9; }
.request-status--completed { color: #187454; background: #e4f7ef; }
.request-status--archived { color: #636a79; background: #eceef2; }

.request-create-modal {
    width: min(780px, calc(100vw - 2rem));
}

.request-create-modal .form-grid {
    max-height: min(66vh, 690px);
    padding-right: .35rem;
    overflow: auto;
}

.request-custom-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    background: #faf9ff;
    border: 1px solid #e8e1fb;
    border-radius: 14px;
}

.request-custom-item > .page-kicker,
.request-custom-item > .field--wide {
    grid-column: 1 / -1;
}

.request-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(280px, .75fr);
    gap: 1rem;
    align-items: start;
}

.request-detail-main,
.request-detail-side {
    display: grid;
    gap: 1rem;
}

.request-description-card p {
    margin: .65rem 0 0;
    color: #4f576d;
    line-height: 1.65;
}

.request-section-card {
    padding: 0;
    overflow: hidden;
}

.request-section-card > header {
    padding: 1.1rem 1.25rem;
    background: linear-gradient(135deg, #fbfaff, #fff);
    border-bottom: 1px solid #ece9f5;
}

.request-section-card > header > span {
    color: #778097;
    font-size: .78rem;
    font-weight: 700;
}

.request-item-stack {
    display: grid;
}

.request-item-card {
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid #eef0f4;
}

.request-item-card:last-child {
    border-bottom: 0;
}

.request-item-card > header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: start;
}

.request-item-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    color: #6350ae;
    background: #f1edff;
    border-radius: 11px;
}

.request-item-card h3 {
    margin: 0;
    color: var(--ink);
    font-size: .96rem;
}

.request-item-card h3 i {
    margin-left: .4rem;
    color: #7e5bc1;
    font-size: .62rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.request-item-card header p {
    margin: .25rem 0 0;
    color: #737a8e;
    font-size: .82rem;
}

.request-item-status {
    color: #5f677c;
    background: #f0f2f6;
}

.request-item-card--accepted .request-item-status,
.request-item-card--notapplicable .request-item-status {
    color: #187454;
    background: #e5f7ef;
}

.request-item-card--submitted .request-item-status {
    color: #6e3ab7;
    background: #f1eafd;
}

.request-item-card--needschanges .request-item-status {
    color: #a45c08;
    background: #fff2d9;
}

.request-response-preview,
.request-review-message,
.request-file-guidance {
    display: flex;
    gap: .65rem;
    margin: .9rem 0 0 3.1rem;
    padding: .75rem .85rem;
    color: #3f485f;
    background: #f8f9fb;
    border: 1px solid #eceef3;
    border-radius: 11px;
}

.request-response-preview {
    display: grid;
    gap: .25rem;
}

.request-response-preview span {
    color: #7a8295;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.request-review-message {
    color: #82510e;
    background: #fff8e9;
    border-color: #f5dfb5;
}

.request-review-message p,
.request-file-guidance p {
    display: grid;
    gap: .15rem;
    margin: 0;
    line-height: 1.45;
}

.request-file-guidance {
    color: #566078;
    background: #f5f7fb;
}

.request-response-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: end;
    margin: .9rem 0 0 3.1rem;
}

.currency-response-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: .55rem;
}

.request-response-editor textarea,
.request-response-editor input,
.request-response-editor select,
.request-notes-card textarea,
.request-link-card input {
    width: 100%;
    min-height: 42px;
    padding: .65rem .75rem;
    color: var(--ink);
    font: inherit;
    background: #fff;
    border: 1px solid #dfe2e9;
    border-radius: 10px;
    resize: vertical;
}

.choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.choice-grid label {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .7rem;
    background: #f8f7fc;
    border: 1px solid #e7e2f4;
    border-radius: 9px;
}

.request-review-button {
    margin: .9rem 0 0 3.1rem;
}

.request-item-card > footer {
    margin: .75rem 0 0 3.1rem;
    color: #8a90a0;
    font-size: .72rem;
}

.request-submit-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    border-color: #d9ceeF;
    background: linear-gradient(135deg, #faf8ff, #fff);
}

.request-submit-card > div {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.request-submit-card > div > span {
    color: var(--violet);
}

.request-submit-card p {
    display: grid;
    gap: .2rem;
    margin: 0;
    color: #626a7e;
}

.request-submit-card strong {
    color: var(--ink);
}

.request-detail-side .product-card {
    padding: 1rem;
}

.request-link-card header,
.request-link-card,
.request-communication-card,
.request-actions-card,
.request-notes-card,
.request-history-card {
    display: grid;
    gap: .75rem;
}

.request-communication-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.request-communication-card > header > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #6048d1;
    background: #efeaff;
}

.request-contact-summary {
    display: grid;
    gap: .22rem;
    padding: .72rem;
    border: 1px solid #e7e8ee;
    border-radius: 10px;
    background: #fafafd;
}

.request-contact-summary strong {
    color: #34384a;
    font-size: .78rem;
}

.request-contact-summary span,
.request-contact-warning {
    color: #858b9a;
    font-size: .67rem;
}

.request-contact-warning {
    margin: 0;
    padding: .6rem;
    border-radius: 8px;
    color: #91580e;
    background: #fff5df;
}

.request-reminder-scheduler {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
}

.request-reminder-scheduler .field {
    margin: 0;
}

.request-reminder-scheduler .button {
    width: 100%;
    min-height: 42px;
}

.request-whatsapp-preview {
    display: grid;
    gap: .55rem;
    padding: .75rem;
    border: 1px solid #d8eadf;
    border-radius: 10px;
    background: #f4fbf7;
}

.request-whatsapp-preview > span {
    color: #267051;
    font-size: .67rem;
    font-weight: 800;
}

.request-whatsapp-preview textarea {
    width: 100%;
    padding: .6rem;
    border: 1px solid #d5e5db;
    border-radius: 8px;
    color: #47594f;
    background: #fff;
    font: inherit;
    font-size: .66rem;
    line-height: 1.45;
    resize: vertical;
}

.request-whatsapp-preview > div {
    display: flex;
    gap: .45rem;
}

.request-whatsapp-preview small {
    color: #738379;
    font-size: .59rem;
}

.request-delivery-list {
    display: grid;
    border-top: 1px solid #eceef3;
}

.request-delivery-list > div {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    border-bottom: 1px solid #f0f1f4;
}

.request-delivery-list > div > span {
    color: #6c55bd;
    font-size: 1rem;
}

.request-delivery-list p {
    display: grid;
    gap: .12rem;
    margin: 0;
}

.request-delivery-list strong {
    color: #4d5264;
    font-size: .67rem;
}

.request-delivery-list small {
    color: #9297a6;
    font-size: .59rem;
}

.request-link-card > p {
    margin: 0;
    color: #687084;
    font-size: .84rem;
    line-height: 1.55;
}

.button--wide {
    width: 100%;
    justify-content: center;
}

.button--danger-soft {
    color: #a43d47;
    background: #fff0f1;
    border-color: #f4d2d6;
}

.request-actions-card > button {
    display: flex;
    width: 100%;
    gap: .6rem;
    align-items: center;
    padding: .7rem;
    color: #4f576c;
    text-align: left;
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 10px;
}

.request-actions-card > button.is-danger {
    color: #a13b44;
}

.request-notes-card > div {
    padding-top: .7rem;
    border-top: 1px solid #eceef3;
}

.request-notes-card p {
    margin: 0 0 .25rem;
    color: #424b60;
    font-size: .84rem;
    line-height: 1.5;
}

.request-notes-card small {
    color: #8990a0;
}

.request-history-card > div {
    display: flex;
    gap: .6rem;
}

.request-history-card > div > span {
    color: #7863bd;
}

.request-history-card p {
    display: grid;
    gap: .15rem;
    margin: 0;
    font-size: .78rem;
}

.request-history-card small {
    color: #8a91a2;
}

.review-decision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}

.review-decision-grid button {
    display: grid;
    gap: .35rem;
    justify-items: center;
    padding: .85rem .45rem;
    color: #5e667a;
    background: #fafafd;
    border: 1px solid #e5e7ed;
    border-radius: 12px;
}

.review-decision-grid button.active {
    color: #6549ab;
    background: #f2edff;
    border-color: #bcaee5;
}

.template-toolbar {
    justify-content: space-between;
}

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

.template-grid > .page-loading,
.template-grid > .empty-state {
    grid-column: 1 / -1;
}

.template-card {
    display: grid;
    gap: 1rem;
}

.template-card.is-archived {
    opacity: .72;
}

.template-card > header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
}

.template-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #6d55b7;
    background: #f0ecfc;
    border-radius: 12px;
}

.template-card h2 {
    font-size: 1rem;
}

.template-card > p {
    min-height: 2.8em;
    margin: 0;
    color: #697186;
    font-size: .84rem;
    line-height: 1.5;
}

.template-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .45rem;
}

.template-stats span {
    display: grid;
    gap: .15rem;
    padding: .65rem;
    text-align: center;
    background: #f8f9fb;
    border-radius: 10px;
}

.template-stats strong {
    color: var(--ink);
    font-size: .9rem;
}

.template-stats small {
    color: #858c9c;
    font-size: .65rem;
}

.template-card > footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: .5rem;
    align-items: center;
}

.template-card > footer > .button {
    min-width: 0;
}

.template-card > footer > .icon-button {
    flex: 0 0 32px;
    overflow: hidden;
}

.icon-button.is-danger {
    color: #a23e47;
}

.template-builder-backdrop {
    z-index: 120;
    padding: 1rem;
}

.template-builder {
    width: min(1180px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
}

.template-builder > header p {
    margin: .25rem 0 0;
    color: #737b90;
    font-size: .82rem;
}

.template-builder-body {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

.template-settings {
    display: grid;
    align-content: start;
    gap: .85rem;
    padding: 1rem;
    overflow: auto;
    background: #fafafd;
    border-right: 1px solid #e8eaf0;
}

.template-preview-note {
    display: flex;
    gap: .55rem;
    padding: .75rem;
    color: #665683;
    background: #f1edfb;
    border-radius: 11px;
}

.template-preview-note p {
    display: grid;
    gap: .2rem;
    margin: 0;
    font-size: .76rem;
    line-height: 1.45;
}

.template-canvas {
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: 1rem;
    overflow: auto;
    background: #f5f6f8;
}

.template-section-editor {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e3e5eb;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(28, 31, 49, .04);
}

.template-section-editor > header {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    padding: .85rem;
    background: #fbfaff;
    border-bottom: 1px solid #ece9f4;
}

.section-order {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    background: var(--violet);
    border-radius: 9px;
}

.template-section-editor > header > div:nth-child(2) {
    display: grid;
    gap: .15rem;
}

.inline-title-input,
.inline-description-input {
    width: 100%;
    padding: .2rem .35rem;
    color: var(--ink);
    font: inherit;
    font-weight: 750;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
}

.inline-description-input {
    color: #737b8d;
    font-size: .75rem;
    font-weight: 500;
}

.inline-title-input:focus,
.inline-description-input:focus {
    background: #fff;
    border-color: #c9bce9;
    outline: none;
}

.editor-order-actions {
    display: flex;
    gap: .25rem;
}

.editor-order-actions button {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    color: #697185;
    background: #fff;
    border: 1px solid #e4e6ec;
    border-radius: 8px;
}

.editor-order-actions button:disabled {
    opacity: .35;
}

.editor-order-actions button.is-danger {
    color: #a43e48;
}

.editor-order-actions .material-symbols-rounded {
    font-size: 17px;
}

.template-item-stack {
    display: grid;
}

.template-item-editor {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: start;
    padding: .85rem;
    border-bottom: 1px solid #eef0f4;
}

.template-item-editor > span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    color: #745bb5;
    background: #f1edfa;
    border-radius: 9px;
    font-size: 18px;
}

.template-item-fields {
    display: grid;
    gap: .45rem;
}

.template-item-fields .field-row {
    align-items: end;
}

.template-add-item,
.template-add-section {
    display: flex;
    width: 100%;
    gap: .4rem;
    justify-content: center;
    align-items: center;
    padding: .7rem;
    color: #6953a6;
    font-weight: 700;
    background: #fbfaff;
    border: 0;
}

.template-add-section {
    background: #fff;
    border: 1px dashed #bcb3d3;
    border-radius: 12px;
}

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

.review-summary-grid article {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid #e5e7ed;
    border-radius: 13px;
}

.review-summary-grid article > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #6a52b0;
    background: #f0ecfb;
    border-radius: 11px;
}

.review-summary-grid article.is-danger > span {
    color: #b54c55;
    background: #fff0f1;
}

.review-summary-grid p {
    display: grid;
    gap: .1rem;
    margin: 0;
}

.review-summary-grid small {
    color: #7d8496;
}

.review-summary-grid strong {
    color: var(--ink);
    font-size: 1.25rem;
}

.review-inbox-head,
.review-inbox-row {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) minmax(150px, .8fr) 120px 110px 24px;
    gap: 1rem;
    align-items: center;
}

.review-inbox-head {
    padding: .75rem 1.2rem;
    color: #7a8295;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #fafbfc;
    border-bottom: 1px solid #eceef3;
}

.review-inbox-row {
    width: 100%;
    padding: 1rem 1.2rem;
    color: #4e566b;
    text-align: left;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eef0f4;
}

.review-inbox-row:hover {
    background: #fbfaff;
}

.review-inbox-row em {
    margin-left: .35rem;
    color: #7658b7;
    font-size: .6rem;
    font-style: normal;
    text-transform: uppercase;
}

.review-policy-note {
    display: flex;
    gap: .7rem;
    align-items: center;
    margin-top: 1rem;
    padding: .85rem 1rem;
    color: #626a7f;
    background: #f7f8fb;
    border: 1px solid #e7e9ef;
    border-radius: 12px;
}

.review-policy-note > span {
    color: #6652a4;
}

.review-policy-note p {
    display: grid;
    gap: .15rem;
    margin: 0;
    font-size: .78rem;
}

.review-policy-note strong {
    color: #353d54;
}

@media (max-width: 1100px) {
    .request-table-head,
    .request-table-row {
        grid-template-columns: minmax(240px, 1.8fr) 120px 100px 28px;
    }

    .request-table-head > :nth-child(4),
    .request-table-row > :nth-child(4),
    .request-table-head > :nth-child(5),
    .request-table-row > :nth-child(5) {
        display: none;
    }

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

@media (max-width: 820px) {
    .request-detail-layout,
    .template-builder-body {
        grid-template-columns: 1fr;
    }

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

    .template-settings {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 280px;
        border-right: 0;
        border-bottom: 1px solid #e8eaf0;
    }

    .review-inbox-head,
    .review-inbox-row {
        grid-template-columns: minmax(240px, 1.7fr) minmax(130px, .8fr) 24px;
    }

    .review-inbox-head > :nth-child(3),
    .review-inbox-row > :nth-child(3),
    .review-inbox-head > :nth-child(4),
    .review-inbox-row > :nth-child(4) {
        display: none;
    }
}

@media (max-width: 620px) {
    .heading-actions,
    .heading-actions .button,
    .request-submit-card {
        width: 100%;
    }

    .request-filter-panel,
    .request-custom-item,
    .template-grid,
    .review-summary-grid,
    .review-decision-grid,
    .request-detail-side,
    .template-settings {
        grid-template-columns: 1fr;
    }

    .request-table-head {
        display: none;
    }

    .request-table-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .request-table-row > :nth-child(2),
    .request-table-row > :nth-child(3) {
        display: none;
    }

    .request-item-card > header {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .request-item-card > header > .status-pill {
        grid-column: 2;
        justify-self: start;
    }

    .request-response-preview,
    .request-review-message,
    .request-file-guidance,
    .request-response-editor,
    .request-review-button,
    .request-item-card > footer {
        margin-left: 0;
    }

    .request-response-editor {
        grid-template-columns: 1fr;
    }

    .request-submit-card {
        display: grid;
    }

    .template-builder,
    .template-builder-backdrop {
        width: 100%;
        max-height: 100vh;
        padding: 0;
        border-radius: 0;
    }

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

    .template-item-editor > .editor-order-actions {
        grid-column: 2;
    }

    .review-inbox-head {
        display: none;
    }

    .review-inbox-row {
        grid-template-columns: minmax(0, 1fr) 24px;
    }

    .review-inbox-row > :nth-child(2) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}

/* Team and organization access */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.team-heading {
    align-items: center;
}

.team-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.team-plan-card,
.team-role-card,
.team-section {
    border: 1px solid #e5e7ef;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(24, 27, 51, .025);
}

.team-plan-card {
    padding: 1.25rem 1.35rem 1.05rem;
}

.team-plan-card__title {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.team-plan-card__title > span,
.team-role-card > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    color: #6048dc;
    background: #eeeaff;
    font-size: 1.2rem;
}

.team-plan-card__title p,
.team-role-card p {
    display: grid;
    gap: .28rem;
    margin: 0;
}

.team-plan-card__title small,
.team-role-card small {
    color: #9298a8;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .075em;
}

.team-plan-card__title strong,
.team-role-card strong {
    color: #31364a;
    font-size: .82rem;
}

.team-capacity {
    height: 7px;
    margin: 1.1rem 0 .85rem;
    overflow: hidden;
    border-radius: 999px;
    background: #edeef3;
}

.team-capacity > i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #745cf4, #5a40dd);
    transition: width .25s ease;
}

.team-plan-card footer {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: #777e91;
    font-size: .59rem;
}

.team-plan-card footer span + span::before {
    margin-right: .8rem;
    color: #c1c5d0;
    content: "•";
}

.team-plan-card footer a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    color: #6149dc;
    font-weight: 750;
    text-decoration: none;
}

.team-plan-card footer a .material-symbols-rounded {
    font-size: .85rem;
}

.team-role-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1.25rem;
    background: linear-gradient(145deg, #fff, #faf9ff);
}

.team-role-card em {
    color: #858c9e;
    font-size: .59rem;
    font-style: normal;
    line-height: 1.45;
}

.team-limit-notice {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    border: 1px solid #f1ddb8;
    border-radius: 12px;
    color: #76541c;
    background: #fff9ec;
}

.team-limit-notice > span {
    font-size: 1.05rem;
}

.team-limit-notice p {
    margin: 0;
    font-size: .66rem;
    line-height: 1.55;
}

.team-limit-notice strong {
    margin-right: .25rem;
}

.team-section {
    margin-top: 1rem;
    overflow: hidden;
}

.team-section > header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.35rem;
    border-bottom: 1px solid #eceef3;
}

.team-section > header > div {
    flex: 1;
}

.team-section > header h2 {
    margin: 0;
    font-size: .9rem;
    letter-spacing: -.02em;
}

.team-section > header p {
    margin: .28rem 0 0;
    color: #9298a9;
    font-size: .61rem;
}

.team-section > header > span {
    min-width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding-inline: .45rem;
    border-radius: 9px;
    color: #6650d7;
    background: #f0edff;
    font-size: .62rem;
    font-weight: 800;
}

.team-member-list,
.team-invitation-list {
    display: grid;
}

.team-member-row {
    min-height: 76px;
    display: grid;
    grid-template-columns: 40px minmax(170px, 1fr) 90px minmax(160px, .42fr) 34px;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.35rem;
    border-bottom: 1px solid #f0f1f5;
}

.team-member-row:last-child,
.team-invitation-list > article:last-child {
    border-bottom: 0;
}

.team-member-row.is-inactive {
    background: #fafafd;
}

.team-member-row.is-inactive .team-avatar,
.team-member-row.is-inactive .team-person {
    opacity: .64;
}

.team-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #5741c8;
    background: linear-gradient(145deg, #eeeaff, #e5e0ff);
    font-size: .67rem;
    font-weight: 850;
}

.team-person {
    min-width: 0;
}

.team-person p {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.team-person strong {
    overflow: hidden;
    font-size: .69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-person em {
    padding: .18rem .38rem;
    border-radius: 6px;
    color: #6550d3;
    background: #f0edff;
    font-size: .48rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.team-person small {
    display: block;
    overflow: hidden;
    margin-top: .28rem;
    color: #9298a8;
    font-size: .58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-state {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: #71798b;
    font-size: .56rem;
    font-weight: 700;
}

.team-state > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #a7acb8;
}

.team-state.is-active {
    color: #267560;
}

.team-state.is-active > i {
    background: #31a582;
    box-shadow: 0 0 0 3px #e6f7f1;
}

.team-role-select select {
    width: 100%;
    min-height: 36px;
    padding: .52rem 2rem .52rem .7rem;
    border: 1px solid #dfe2e9;
    border-radius: 9px;
    color: #4f566a;
    background: #fff;
    font-size: .6rem;
    outline: 0;
}

.team-role-select select:focus {
    border-color: #8875e9;
    box-shadow: 0 0 0 3px rgba(111, 83, 237, .1);
}

.team-role-select select:disabled {
    color: #858b9b;
    background: #f5f6f8;
}

.team-role-readonly {
    justify-self: end;
    color: #636b7e;
    font-size: .61rem;
    font-weight: 700;
}

.team-invitation-list > article {
    min-height: 72px;
    display: grid;
    grid-template-columns: 38px minmax(180px, 1fr) minmax(125px, .35fr) 32px 32px;
    align-items: center;
    gap: .75rem;
    padding: .8rem 1.35rem;
    border-bottom: 1px solid #f0f1f5;
}

.team-invitation-list > article > .material-symbols-rounded,
.team-empty > .material-symbols-rounded {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #6c57da;
    background: #f0edff;
    font-size: 1.05rem;
}

.team-invitation-list p {
    min-width: 0;
    margin: 0;
}

.team-invitation-list p strong,
.team-invitation-list p small,
.team-empty strong,
.team-empty small {
    display: block;
}

.team-invitation-list p strong {
    overflow: hidden;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-invitation-list p small {
    margin-top: .28rem;
    color: #9298a8;
    font-size: .56rem;
}

.team-delivery {
    display: grid;
    justify-items: start;
    gap: .22rem;
}

.team-delivery small {
    color: #9a9fae;
    font-size: .5rem;
}

.delivery-status {
    display: inline-flex;
    padding: .28rem .5rem;
    border-radius: 7px;
    color: #75641f;
    background: #fff6d9;
    font-size: .51rem;
    font-weight: 750;
}

.delivery-status--sent {
    color: #22735e;
    background: #e8f7f1;
}

.delivery-status--retrying {
    color: #a24731;
    background: #fff0eb;
}

.delivery-status--sending {
    color: #5841c7;
    background: #f0edff;
}

.team-empty {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 1.5rem;
}

.team-empty p {
    margin: 0;
}

.team-empty strong {
    color: #4c5265;
    font-size: .66rem;
}

.team-empty small {
    margin-top: .25rem;
    color: #969baa;
    font-size: .56rem;
}

.team-invite-modal {
    width: min(510px, calc(100vw - 2rem));
}

.team-invite-modal > header p {
    margin: .35rem 0 0;
    color: #8c92a2;
    font-size: .62rem;
    line-height: 1.5;
}

.team-role-explainer {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin: .4rem 0 1rem;
    padding: .8rem;
    border-radius: 11px;
    color: #5542bd;
    background: #f4f1ff;
}

.team-role-explainer > span {
    font-size: 1.05rem;
}

.team-role-explainer p {
    margin: 0;
}

.team-role-explainer strong,
.team-role-explainer small {
    display: block;
}

.team-role-explainer strong {
    font-size: .63rem;
}

.team-role-explainer small {
    margin-top: .28rem;
    color: #756ba1;
    font-size: .55rem;
    line-height: 1.45;
}

.invitation-accept-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1.3rem;
    padding: 2rem;
    background:
        radial-gradient(circle at 50% 10%, rgba(111, 83, 237, .11), transparent 34rem),
        #f6f6fa;
}

.invitation-accept-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #262a3c;
    font-size: .82rem;
    font-weight: 850;
    text-decoration: none;
}

.invitation-accept-brand img {
    width: 28px;
    height: 28px;
}

.invitation-accept-card {
    width: min(520px, 100%);
    min-height: 360px;
    display: grid;
    justify-items: center;
    align-content: center;
    padding: clamp(2rem, 6vw, 3.5rem);
    border: 1px solid #e3e4ec;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(34, 31, 68, .08);
    text-align: center;
}

.invitation-accept-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    color: #5e46d5;
    background: #eeeaff;
    font-size: 1.6rem;
}

.invitation-accept-icon.is-error {
    color: #b43845;
    background: #ffebed;
}

.invitation-accept-card h1 {
    margin: .65rem 0 .7rem;
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    letter-spacing: -.05em;
}

.invitation-accept-card > p {
    max-width: 390px;
    margin: 0 0 1.6rem;
    color: #7f8698;
    font-size: .72rem;
    line-height: 1.65;
}

.invitation-accept-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

@media (max-width: 820px) {
    .team-overview {
        grid-template-columns: 1fr;
    }

    .team-member-row {
        grid-template-columns: 40px minmax(0, 1fr) 34px;
    }

    .team-member-row > .team-state {
        grid-column: 2;
    }

    .team-role-select,
    .team-role-readonly {
        grid-column: 2;
        justify-self: stretch;
    }

    .team-member-row > .icon-button {
        grid-column: 3;
        grid-row: 1;
    }

    .team-invitation-list > article {
        grid-template-columns: 38px minmax(0, 1fr) 32px 32px;
    }

    .team-delivery {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    .team-heading {
        align-items: stretch;
    }

    .team-heading .button {
        width: 100%;
    }

    .team-plan-card footer {
        flex-wrap: wrap;
    }

    .team-plan-card footer a {
        width: 100%;
        margin-left: 0;
    }

    .team-member-row,
    .team-invitation-list > article {
        padding-inline: 1rem;
    }
}

/* Organization settings */
.settings-heading {
    align-items: flex-end;
}

.settings-readonly,
.settings-currency-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid #ddd9fa;
    border-radius: 12px;
    color: #5544af;
    background: #f5f2ff;
}

.settings-readonly > span,
.settings-currency-note > span {
    margin-top: .02rem;
    font-size: 1rem;
}

.settings-readonly p,
.settings-currency-note p {
    margin: 0;
    font-size: .61rem;
    line-height: 1.55;
}

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

.settings-summary article {
    min-width: 0;
    padding: 1rem 1.05rem;
    border: 1px solid #e2e3eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 31, 54, .025);
}

.settings-summary small,
.settings-summary strong,
.settings-summary span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-summary small {
    color: #969bab;
    font-size: .46rem;
    font-weight: 850;
    letter-spacing: .11em;
}

.settings-summary strong {
    margin-top: .45rem;
    color: #262a3d;
    font-size: .82rem;
}

.settings-summary span {
    margin-top: .2rem;
    color: #9297a7;
    font-size: .52rem;
}

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

.settings-tabs {
    display: grid;
    gap: .45rem;
    padding: .45rem;
    border: 1px solid #e1e2ea;
    border-radius: 14px;
    background: #fff;
}

.settings-tabs button {
    width: 100%;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: .65rem;
    padding: .72rem;
    border: 0;
    border-radius: 10px;
    color: #7f8598;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.settings-tabs button:hover {
    background: #f7f6fb;
}

.settings-tabs button.active {
    color: #543bca;
    background: #efebff;
}

.settings-tabs button > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: inherit;
    background: rgba(111, 83, 237, .08);
    font-size: 1rem;
}

.settings-tabs p {
    min-width: 0;
    margin: 0;
}

.settings-tabs strong,
.settings-tabs small {
    display: block;
}

.settings-tabs strong {
    font-size: .62rem;
}

.settings-tabs small {
    margin-top: .18rem;
    color: #999eac;
    font-size: .5rem;
}

.settings-panel {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid #e1e2ea;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(31, 31, 54, .03);
}

.settings-panel > header {
    margin-bottom: 1.4rem;
}

.settings-panel > header h2 {
    margin: .35rem 0 .42rem;
    color: #222638;
    font-size: 1.25rem;
    letter-spacing: -.035em;
}

.settings-panel > header p {
    max-width: 650px;
    margin: 0;
    color: #8d93a4;
    font-size: .62rem;
    line-height: 1.55;
}

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

.settings-form-grid .field {
    margin: 0;
}

.settings-form-grid .field > span {
    color: #686f82;
    font-size: .55rem;
    font-weight: 750;
}

.settings-form-grid input,
.settings-form-grid select {
    min-height: 43px;
    border-color: #dfe1e9;
    background: #fbfbfd;
    font-size: .64rem;
}

.settings-form-grid input:disabled,
.settings-form-grid select:disabled {
    color: #767c8d;
    background: #f3f4f7;
    cursor: not-allowed;
}

.settings-currency-note {
    margin: 1rem 0 1.45rem;
    border-color: #d9e6f7;
    color: #45627f;
    background: #f3f8ff;
}

.settings-profile {
    padding-top: 1.35rem;
    border-top: 1px solid #ececf2;
}

.settings-profile > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}

.settings-profile h3 {
    margin: 0;
    color: #333748;
    font-size: .75rem;
}

.settings-profile header p {
    margin: .28rem 0 0;
    color: #9297a6;
    font-size: .55rem;
}

.settings-profile .button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: .45rem .7rem;
    font-size: .54rem;
}

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

.settings-profile-grid > button {
    min-width: 0;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: .65rem;
    padding: .85rem;
    border: 1px solid #e0e1e9;
    border-radius: 12px;
    color: #777d8f;
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.settings-profile-grid > button:not(:disabled):hover {
    border-color: #c9c0f7;
    background: #fbfaff;
}

.settings-profile-grid > button.active {
    border-color: #9584eb;
    box-shadow: 0 0 0 2px rgba(111, 83, 237, .08);
}

.settings-profile-grid > button:disabled {
    cursor: default;
}

.settings-profile-check {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #654bd7;
    background: #eeeaff;
    font-size: .95rem;
}

.settings-profile-grid p {
    min-width: 0;
    margin: 0;
}

.settings-profile-grid strong,
.settings-profile-grid small {
    display: block;
}

.settings-profile-grid strong {
    color: #363a4c;
    font-size: .62rem;
}

.settings-profile-grid small {
    margin-top: .25rem;
    color: #969baa;
    font-size: .51rem;
    line-height: 1.45;
}

.settings-terminology-preview {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.4rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: #f5f2ff;
}

.settings-terminology-preview span {
    padding: .35rem .55rem;
    border-radius: 8px;
    color: #5741bf;
    background: #fff;
    font-size: .57rem;
    font-weight: 750;
}

.settings-terminology-preview i {
    color: #a49bcf;
    font-size: .8rem;
    font-style: normal;
}

.settings-terms {
    display: grid;
    gap: 1.4rem;
}

.settings-terms fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.settings-terms legend {
    width: 100%;
    margin-bottom: .85rem;
    padding-bottom: .55rem;
    border-bottom: 1px solid #ececf2;
    color: #3b3f50;
    font-size: .67rem;
    font-weight: 800;
}

@media (max-width: 980px) {
    .settings-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

@media (max-width: 640px) {
    .settings-heading {
        align-items: stretch;
    }

    .settings-heading .button {
        width: 100%;
    }

    .settings-summary,
    .settings-form-grid,
    .settings-profile-grid {
        grid-template-columns: 1fr;
    }

    .settings-panel {
        padding: 1.15rem;
    }

    .settings-profile > header {
        display: grid;
    }

    .settings-profile .button {
        width: 100%;
    }
}

/* Real dashboard coverage and operational reports */
.dashboard-heading-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.dashboard-attention {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin: 1rem 0;
}

.dashboard-attention > article {
    overflow: hidden;
    padding: .9rem 1rem;
    border: 1px solid #e4e5ec;
    border-radius: 13px;
    background: #fff;
}

.dashboard-attention header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
}

.dashboard-attention header > span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #6149d3;
    background: #efebff;
    font-size: .9rem;
}

.dashboard-attention h2 {
    margin: 0;
    color: #3c4052;
    font-size: .68rem;
}

.dashboard-attention a {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    border-top: 1px solid #f0f1f5;
    color: #777d8e;
    font-size: .54rem;
    text-decoration: none;
}

.dashboard-attention a:hover span {
    color: #5b43c8;
}

.dashboard-attention a strong {
    color: #333748;
    font-size: .65rem;
}

.reports-heading {
    margin-bottom: 1.2rem;
}

.reports-filters {
    display: grid;
    grid-template-columns: 180px minmax(220px, 1fr) auto auto;
    align-items: end;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .8rem;
    border: 1px solid #e1e2ea;
    border-radius: 13px;
    background: #fff;
}

.reports-filters .field {
    margin: 0;
}

.reports-filters select {
    min-height: 39px;
    font-size: .61rem;
}

.reports-filters .button {
    min-height: 39px;
    white-space: nowrap;
}

.reports-filters > p {
    align-self: center;
    margin: 0;
    color: #969baa;
    font-size: .52rem;
    white-space: nowrap;
}

.reports-advanced {
    margin: 0 0 1rem;
    border: 1px solid #e1e2ea;
    border-radius: 13px;
    background: #fff;
}

.reports-advanced > summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem .85rem;
    color: #596074;
    font-size: .62rem;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}

.reports-advanced > summary::-webkit-details-marker {
    display: none;
}

.reports-advanced > summary::after {
    margin-left: auto;
    content: "expand_more";
    font-family: "Material Symbols Rounded";
    font-size: 1rem;
    font-weight: normal;
    transition: transform .18s ease;
}

.reports-advanced[open] > summary::after {
    transform: rotate(180deg);
}

.reports-advanced > summary .material-symbols-rounded {
    color: #684fdf;
    font-size: 1rem;
}

.reports-advanced__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    padding: .15rem .85rem .85rem;
    border-top: 1px solid #eff0f4;
}

.reports-advanced__grid .field {
    margin: .7rem 0 0;
}

.reports-advanced__grid select {
    min-height: 39px;
    font-size: .61rem;
}

.reports-advanced > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: .7rem .85rem;
    border-top: 1px solid #eff0f4;
    color: #8f95a5;
    font-size: .54rem;
}

.reports-advanced > footer .button {
    min-height: 35px;
    white-space: nowrap;
}

.reports-metrics {
    margin-bottom: 1rem;
}

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

.reports-grid > .product-card {
    min-width: 0;
}

.reports-timeline,
.report-workload,
.report-client-stages {
    grid-column: 1;
}

.report-request-performance,
.report-stage-duration {
    grid-column: 2;
}

.reports-legend {
    display: flex;
    align-items: center;
    gap: .38rem;
    color: #8b91a1;
    font-size: .49rem;
}

.reports-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4eb697;
}

.reports-legend i:nth-of-type(2) {
    margin-left: .3rem;
    background: #dd727a;
}

.report-series {
    display: grid;
    gap: .48rem;
    margin-top: .85rem;
}

.report-series > div {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr) 48px;
    align-items: center;
    gap: .65rem;
}

.report-series span {
    overflow: hidden;
    color: #858b9c;
    font-size: .5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-series b {
    min-height: 13px;
    display: grid;
    align-content: center;
    gap: 2px;
}

.report-series b i {
    height: 4px;
    min-width: 0;
    border-radius: 8px;
}

.report-series .is-completed {
    background: #4eb697;
}

.report-series .is-overdue {
    background: #dd727a;
}

.report-series strong {
    color: #606678;
    font-size: .52rem;
    text-align: right;
}

.report-percentage {
    display: grid;
    justify-items: center;
    margin: .9rem 0;
    padding: 1rem;
    border-radius: 13px;
    color: #553ec4;
    background: #f1edff;
}

.report-percentage strong {
    font-size: 1.8rem;
    letter-spacing: -.05em;
}

.report-percentage span {
    margin-top: .18rem;
    font-size: .54rem;
    font-weight: 750;
}

.report-request-performance dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
}

.report-request-performance dl div {
    padding: .65rem;
    border: 1px solid #eaebf0;
    border-radius: 9px;
    background: #fbfbfd;
}

.report-request-performance dt {
    color: #9196a5;
    font-size: .49rem;
}

.report-request-performance dd {
    margin: .25rem 0 0;
    color: #35394b;
    font-size: .72rem;
    font-weight: 800;
}

.report-method {
    margin: .8rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid #eeeeF3;
    color: #9297a7;
    font-size: .5rem;
    line-height: 1.55;
}

.report-table {
    overflow-x: auto;
    margin-top: .7rem;
}

.report-table__head,
.report-table__row {
    min-width: 580px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(4, 80px);
    align-items: center;
    gap: .5rem;
    min-height: 38px;
    padding: 0 .7rem;
}

.report-table__head {
    border-radius: 8px;
    color: #9297a6;
    background: #f7f7fa;
    font-size: .48rem;
    font-weight: 750;
}

.report-table__row {
    border-bottom: 1px solid #f0f1f4;
    color: #6f7587;
    font-size: .54rem;
}

.report-table__row strong {
    overflow: hidden;
    color: #3f4355;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-table__row b {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #5b43c7;
    background: #efebff;
}

.stage-duration-list {
    display: grid;
    margin-top: .65rem;
}

.stage-duration-list > div {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: .6rem;
    min-height: 43px;
    border-bottom: 1px solid #f0f1f4;
}

.stage-duration-list > div > i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9284df;
}

.stage-duration-list span,
.stage-duration-list small {
    display: block;
}

.stage-duration-list span {
    color: #4d5263;
    font-size: .55rem;
}

.stage-duration-list small {
    margin-top: .15rem;
    color: #999eac;
    font-size: .46rem;
}

.stage-duration-list strong {
    color: #383c4e;
    font-size: .57rem;
}

@media (max-width: 1120px) {
    .dashboard-attention {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .reports-filters > .button,
    .reports-filters > p {
        align-self: center;
    }
}

@media (max-width: 820px) {
    .dashboard-heading-actions {
        width: 100%;
    }

    .dashboard-heading-actions .button {
        flex: 1;
    }

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

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

    .reports-timeline,
    .report-workload,
    .report-client-stages,
    .report-request-performance,
    .report-stage-duration {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .dashboard-attention,
    .reports-filters {
        grid-template-columns: 1fr;
    }

    .reports-advanced__grid {
        grid-template-columns: 1fr;
    }

    .reports-advanced > footer {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-heading-actions {
        display: grid;
    }

    .report-series > div {
        grid-template-columns: 62px minmax(0, 1fr) 42px;
    }
}

/* Advanced client operations */
.page-heading__actions,
.saved-filter-bar,
.client-bulk-bar {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.compact-select,
.saved-filter-bar label,
.client-bulk-bar label {
    display: grid;
    gap: .2rem;
    color: #737b8f;
    font-size: .55rem;
    font-weight: 750;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.compact-select select,
.saved-filter-bar select,
.client-bulk-bar select,
.client-bulk-bar input {
    min-height: 39px;
    padding: 0 .72rem;
    border: 1px solid #dfe2eb;
    border-radius: 9px;
    color: #343b50;
    background: #fff;
    font: inherit;
    font-size: .67rem;
    font-weight: 650;
    text-transform: none;
}

.saved-filter-bar {
    justify-content: flex-end;
    margin: -.2rem 0 1rem;
    padding: .65rem .75rem;
    border: 1px solid #e6e8f0;
    border-radius: 12px;
    background: #fafafd;
}

.saved-filter-bar label {
    min-width: 240px;
    margin-right: auto;
}

.client-column-panel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    margin: -.2rem 0 1rem;
    padding: .75rem;
    border: 1px solid #dedbea;
    border-radius: 12px;
    background: #fbfaff;
}

.client-column-panel > div {
    min-width: 220px;
    flex: 1;
}

.client-column-panel strong,
.client-column-panel small {
    display: block;
}

.client-column-panel strong {
    color: #40475c;
    font-size: .69rem;
}

.client-column-panel small {
    margin-top: .2rem;
    color: #8a91a3;
    font-size: .57rem;
}

.client-column-panel label {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .65rem;
    border: 1px solid #e1e3eb;
    border-radius: 9px;
    color: #596176;
    background: #fff;
    font-size: .62rem;
    font-weight: 650;
}

.client-column-panel input {
    accent-color: var(--primary);
}

.client-bulk-bar {
    position: sticky;
    top: .75rem;
    z-index: 5;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .75rem;
    border: 1px solid #cfc8f7;
    border-radius: 12px;
    background: #f6f3ff;
    box-shadow: 0 10px 28px rgba(52, 41, 112, .1);
}

.client-bulk-bar > strong {
    min-width: 120px;
    color: #453897;
    font-size: .68rem;
}

.client-bulk-bar label {
    min-width: 175px;
}

.client-bulk-bar__tags {
    flex: 1;
}

.client-table__head > span:first-child {
    display: flex;
    align-items: center;
    gap: .65rem;
}

.client-identity > input,
.client-table__head input {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    accent-color: var(--primary);
}

.client-identity > a {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
}

.client-identity i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #5c46ca;
    background: #ece9ff;
    font-size: .61rem;
    font-style: normal;
    font-weight: 800;
}

.row-chevron {
    display: grid;
    place-items: center;
    color: #98a0b2;
    font-size: 1.05rem;
    text-decoration: none;
}

.client-import-modal {
    max-height: min(88vh, 850px);
    overflow-y: auto;
}

.csv-dropzone {
    min-height: 170px;
    display: grid;
    place-items: center;
    gap: .35rem;
    margin: 1rem 0;
    padding: 1.25rem;
    border: 1px dashed #bfc4d6;
    border-radius: 13px;
    color: #60687d;
    background: #fafafd;
    text-align: center;
    cursor: pointer;
}

.csv-dropzone .material-symbols-rounded {
    color: var(--primary);
    font-size: 2rem;
}

.csv-dropzone strong {
    color: #252b3f;
    font-size: .82rem;
}

.csv-dropzone small,
.csv-columns p,
.supporting-copy {
    color: #81889a;
    font-size: .63rem;
    line-height: 1.6;
}

.csv-dropzone input {
    max-width: 270px;
    font-size: .64rem;
}

.csv-columns {
    margin-bottom: 1rem;
    color: #5f677b;
    font-size: .67rem;
}

.import-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .65rem;
    margin: 1rem 0;
}

.import-summary > div {
    display: grid;
    gap: .15rem;
    padding: .7rem;
    border: 1px solid #e5e7ef;
    border-radius: 10px;
    background: #fafafd;
}

.import-summary strong {
    color: #272d42;
    font-size: 1rem;
}

.import-summary span {
    color: #858c9d;
    font-size: .57rem;
    font-weight: 750;
    text-transform: uppercase;
}

.import-preview-table {
    max-height: 330px;
    overflow: auto;
    border: 1px solid #e5e7ef;
    border-radius: 10px;
}

.import-preview-table > div {
    min-width: 700px;
    display: grid;
    grid-template-columns: 50px minmax(210px, 1fr) 100px minmax(210px, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .62rem .75rem;
    border-top: 1px solid #eceef3;
    color: #666e81;
    font-size: .62rem;
}

.import-preview-table > div:first-child {
    position: sticky;
    top: 0;
    border-top: 0;
    color: #8b91a2;
    background: #f8f8fb;
    font-size: .52rem;
    letter-spacing: .04em;
}

.import-preview-table span {
    min-width: 0;
}

.import-preview-table span > strong,
.import-preview-table span > small {
    display: block;
}

.import-preview-table span > strong {
    color: #2c3247;
}

.import-preview-table span > small {
    margin-top: .15rem;
    color: #9096a6;
}

.import-status {
    width: fit-content;
    padding: .2rem .42rem;
    border-radius: 999px;
    font-weight: 750;
}

.import-status--valid {
    color: #176b58;
    background: #e7f6f1;
}

.import-status--duplicate {
    color: #8a6419;
    background: #fff4d6;
}

.import-status--invalid {
    color: #a7333e;
    background: #ffecef;
}

@media (max-width: 760px) {
    .page-heading__actions,
    .saved-filter-bar {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-heading__actions .button,
    .saved-filter-bar label {
        flex: 1;
    }

    .saved-filter-bar label {
        min-width: 100%;
    }

    .compact-select {
        flex: 1;
    }

    .import-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .recovery-code-grid {
        grid-template-columns: 1fr;
    }
}

.organization-logo-editor,
.onboarding-logo-choice {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}

.organization-logo-editor {
    margin-bottom: 1.25rem;
}

.onboarding-logo-choice {
    margin: 1.1rem 0;
}

.organization-logo-preview {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 10px 28px rgb(31 35 48 / 10%);
}

.organization-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.65rem;
}

.organization-logo-editor h3,
.onboarding-logo-choice h2 {
    margin: 0;
}

.organization-logo-editor p,
.onboarding-logo-choice p {
    margin: 0.3rem 0 0.85rem;
    color: var(--muted);
}

.organization-logo-editor small,
.onboarding-logo-choice small {
    display: block;
    margin-top: 0.65rem;
    color: var(--muted);
}

.organization-logo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.organization-logo-actions label {
    position: relative;
    cursor: pointer;
}

.organization-logo-actions label.is-disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

.organization-logo-actions input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 620px) {
    .organization-logo-editor,
    .onboarding-logo-choice {
        grid-template-columns: 1fr;
    }
}

/* Operational custom fields and explicit duplicate merge */
.custom-fields-card > header,
.settings-custom-field-group > header,
.settings-custom-fields-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.custom-fields-card .inline-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.custom-fields-card .inline-link .material-symbols-rounded {
    font-size: .82rem;
}

.custom-fields-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem 1rem;
    margin: 1rem 0 0;
}

.custom-fields-values > div {
    min-width: 0;
    padding: .72rem .8rem;
    border: 1px solid #ececf2;
    border-radius: 10px;
    background: #fbfbfd;
}

.custom-fields-values dt {
    color: #8c92a2;
    font-size: .5rem;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.custom-fields-values dd {
    margin: .3rem 0 0;
    overflow-wrap: anywhere;
    color: #303548;
    font-size: .66rem;
    line-height: 1.5;
}

.custom-fields-values dd.is-empty {
    color: #a0a5b2;
    font-style: italic;
}

.custom-fields-modal {
    max-height: min(88vh, 820px);
    overflow-y: auto;
}

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

.custom-fields-form .field {
    margin: 0;
}

.custom-field-input > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.custom-field-input > span small {
    padding: .16rem .38rem;
    border-radius: 999px;
    color: #624cc4;
    background: #f0edff;
    font-size: .45rem;
    font-weight: 800;
}

.custom-field-input:has(textarea) {
    grid-column: 1 / -1;
}

.client-merge-modal {
    max-width: 680px;
}

.client-merge-direction {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.client-merge-direction > article {
    min-width: 0;
    padding: .85rem;
    border: 1px solid #e5e6ee;
    border-radius: 11px;
    background: #fafafd;
}

.client-merge-direction small,
.client-merge-direction strong,
.client-merge-direction span {
    display: block;
}

.client-merge-direction small {
    color: #9298a8;
    font-size: .46rem;
    font-weight: 850;
    letter-spacing: .08em;
}

.client-merge-direction strong {
    margin-top: .32rem;
    overflow: hidden;
    color: #2e3347;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-merge-direction article span {
    margin-top: .16rem;
    color: #979cab;
    font-size: .52rem;
}

.client-merge-direction > .material-symbols-rounded {
    color: #7461d5;
    font-size: 1rem;
}

.client-merge-search {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    margin-bottom: .8rem;
}

.client-merge-search .field {
    flex: 1;
    margin: 0;
}

.client-merge-empty {
    margin: -.25rem 0 .8rem;
    color: #8d93a3;
    font-size: .57rem;
}

.client-merge-confirm {
    display: flex;
    align-items: flex-start;
    gap: .62rem;
    margin-top: 1rem;
    padding: .8rem;
    border: 1px solid #f0d7da;
    border-radius: 10px;
    color: #7c545a;
    background: #fff8f8;
    font-size: .58rem;
    line-height: 1.55;
}

.client-merge-confirm input {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: .08rem;
    accent-color: #aa3643;
}

.settings-custom-fields-heading {
    margin-bottom: 1.2rem;
}

.settings-custom-field-groups {
    display: grid;
    gap: 1rem;
}

.settings-custom-field-group {
    padding: 1rem;
    border: 1px solid #e5e6ed;
    border-radius: 13px;
    background: #fcfcfe;
}

.settings-custom-field-group > header {
    align-items: center;
    margin-bottom: .8rem;
}

.settings-custom-field-group h3,
.settings-custom-field-group p {
    margin: 0;
}

.settings-custom-field-group h3 {
    color: #34394b;
    font-size: .72rem;
}

.settings-custom-field-group p {
    margin-top: .18rem;
    color: #9399a9;
    font-size: .53rem;
}

.settings-custom-field-group .button {
    min-height: 34px;
    padding: .42rem .65rem;
    font-size: .52rem;
}

.settings-custom-field-list {
    display: grid;
    gap: .5rem;
}

.settings-custom-field-list > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 30px;
    align-items: center;
    gap: .55rem;
    padding: .65rem .72rem;
    border: 1px solid #e8e9ef;
    border-radius: 9px;
    background: #fff;
}

.settings-custom-field-list strong,
.settings-custom-field-list span {
    display: block;
}

.settings-custom-field-list strong {
    color: #363b4d;
    font-size: .62rem;
}

.settings-custom-field-list span {
    margin-top: .16rem;
    color: #969baa;
    font-size: .48rem;
}

.settings-custom-field-list small {
    padding: .2rem .4rem;
    border-radius: 999px;
    color: #6d7486;
    background: #f0f1f5;
    font-size: .45rem;
    font-weight: 750;
}

.settings-custom-field-list small.is-active {
    color: #176953;
    background: #e5f5ef;
}

.settings-custom-field-list small.is-inactive {
    color: #8a5e1b;
    background: #fff2d7;
}

.settings-custom-field-empty {
    padding: 1rem;
    border: 1px dashed #d9dbe5;
    border-radius: 9px;
    color: #9499a8;
    background: #fff;
    font-size: .58rem;
    text-align: center;
}

.settings-custom-field-modal {
    max-height: min(88vh, 850px);
    overflow-y: auto;
}

.settings-custom-field-modal .field > small {
    margin-top: .25rem;
    color: #969baa;
    font-size: .48rem;
}

.settings-custom-field-choices {
    grid-column: 1 / -1;
}

.settings-custom-field-switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: 1rem;
}

.settings-custom-field-switches > label {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem;
    border: 1px solid #e5e6ed;
    border-radius: 10px;
    background: #fafafd;
}

.settings-custom-field-switches input {
    width: 15px;
    height: 15px;
    margin-top: .1rem;
    accent-color: var(--primary);
}

.settings-custom-field-switches strong,
.settings-custom-field-switches small {
    display: block;
}

.operational-definition-groups {
    display: grid;
    gap: 1.25rem;
}

.operational-definition-group {
    padding: 1.2rem;
    border: 1px solid #e6e8ef;
    border-radius: 18px;
    background: #fff;
}

.operational-definition-group > header,
.workspace-definition-card > header,
.workspace-stage-editor-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.operational-definition-group > header {
    margin-bottom: 1rem;
}

.operational-definition-group h3,
.operational-definition-group p {
    margin: 0;
}

.operational-definition-group p {
    margin-top: .25rem;
    color: #747b8c;
    font-size: .78rem;
}

.operational-definition-list,
.workspace-definition-list {
    display: grid;
    gap: .75rem;
}

.operational-definition-list > article,
.workspace-definition-card {
    padding: .9rem;
    border: 1px solid #eceef4;
    border-radius: 14px;
    background: #fafbfc;
}

.operational-definition-row {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(180px, 1.4fr) minmax(120px, .8fr) 84px;
    gap: .7rem;
    flex: 1;
}

.operational-definition-row .field {
    margin: 0;
}

.operational-definition-switches {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .7rem;
    color: #596174;
    font-size: .72rem;
}

.operational-definition-switches label,
.compact-check {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.operational-definition-switches .icon-button {
    margin-left: auto;
}

.workspace-definition-card > header .operational-definition-row {
    grid-template-columns: minmax(140px, .8fr) minmax(220px, 1.4fr);
}

.workspace-definition-card > header .operational-definition-switches {
    margin: 0;
}

.workspace-stage-editor {
    display: grid;
    gap: .55rem;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid #e8eaf0;
}

.workspace-stage-editor-title {
    color: #303648;
    font-size: .76rem;
}

.workspace-stage-editor-title button {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .55rem;
    border: 0;
    color: #5b47c7;
    background: transparent;
    font-weight: 700;
}

.workspace-stage-editor-title .material-symbols-rounded {
    font-size: 1rem;
}

.workspace-stage-editor-row {
    display: grid;
    grid-template-columns: minmax(110px, .8fr) minmax(160px, 1.2fr) 120px 70px auto auto 34px;
    align-items: end;
    gap: .55rem;
}

.workspace-stage-editor-row .field {
    margin: 0;
}

.compact-check {
    min-height: 2.35rem;
    color: #596174;
    font-size: .68rem;
}

@media (max-width: 1100px) {
    .operational-definition-row,
    .workspace-stage-editor-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .operational-definition-group > header,
    .workspace-definition-card > header {
        align-items: stretch;
        flex-direction: column;
    }

    .operational-definition-row,
    .workspace-definition-card > header .operational-definition-row,
    .workspace-stage-editor-row {
        grid-template-columns: 1fr;
    }
}

.settings-custom-field-switches strong {
    color: #3d4254;
    font-size: .58rem;
}

.settings-custom-field-switches small {
    margin-top: .18rem;
    color: #969baa;
    font-size: .49rem;
    line-height: 1.45;
}

@media (max-width: 980px) {
    .settings-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .settings-tabs {
        grid-template-columns: 1fr;
    }

    .custom-fields-values,
    .custom-fields-form,
    .settings-custom-field-switches {
        grid-template-columns: 1fr;
    }

    .client-merge-direction {
        grid-template-columns: 1fr;
    }

    .client-merge-direction > .material-symbols-rounded {
        justify-self: center;
        transform: rotate(90deg);
    }

    .client-merge-search,
    .settings-custom-field-group > header {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-custom-field-list > article {
        grid-template-columns: minmax(0, 1fr) auto 30px;
    }

    .settings-custom-field-list > article > small:not(.is-active):not(.is-inactive) {
        display: none;
    }
}

/* Personal work context */
.my-work-context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: .9rem 0 1rem;
}

.my-work-context-card {
    min-width: 0;
    padding: 1rem;
}

.my-work-context-card > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .7rem;
    margin-bottom: .8rem;
}

.my-work-context-card h2,
.my-work-context-card p {
    margin: 0;
}

.my-work-context-card h2 {
    color: #303548;
    font-size: .72rem;
}

.my-work-context-card header p {
    margin-top: .2rem;
    color: #9298a8;
    font-size: .5rem;
    line-height: 1.45;
}

.my-work-context-card .inline-link {
    flex: 0 0 auto;
    font-size: .5rem;
}

.my-work-context-list {
    display: grid;
}

.my-work-context-list > a,
.my-work-context-list > div {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .55rem 0;
    border-top: 1px solid #ececf2;
    color: inherit;
    text-decoration: none;
}

.my-work-context-list > :first-child {
    border-top: 0;
}

.my-work-context-list > a > span,
.my-work-context-list > div > span {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #604bd0;
    background: #f0edff;
    font-size: .82rem;
}

.my-work-context-list p,
.my-work-context-list strong,
.my-work-context-list small {
    min-width: 0;
    display: block;
}

.my-work-context-list strong {
    overflow: hidden;
    color: #3b4052;
    font-size: .56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-work-context-list small {
    margin-top: .14rem;
    overflow: hidden;
    color: #949aa9;
    font-size: .46rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.my-work-context-list time {
    color: #858c9e;
    font-size: .46rem;
    white-space: nowrap;
}

.my-work-context-list time.is-overdue {
    color: #b03c49;
    font-weight: 800;
}

@media (max-width: 1080px) {
    .my-work-context-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .my-work-context-card > header {
        display: grid;
    }

    .my-work-context-list > a,
    .my-work-context-list > div {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .my-work-context-list time {
        grid-column: 2;
    }
}
.request-bulk-toggle {
    align-items: flex-start;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
}

.request-bulk-toggle span {
    display: grid;
    gap: 0.2rem;
}

.request-bulk-toggle small,
.request-bulk-clients > small {
    color: var(--muted);
    font-weight: 500;
}

.request-bulk-clients {
    border: 1px solid var(--line);
    border-radius: 14px;
    margin: 0;
    padding: 0.9rem 1rem;
}

.request-bulk-clients legend {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 750;
    padding: 0 0.35rem;
}

.request-bulk-clients > div {
    display: grid;
    gap: 0.45rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 12rem;
    overflow: auto;
    padding: 0.15rem 0 0.55rem;
}

.request-bulk-clients label {
    align-items: center;
    border-radius: 9px;
    display: flex;
    gap: 0.55rem;
    padding: 0.45rem 0.5rem;
}

.request-bulk-clients label:hover {
    background: var(--soft);
}

@media (max-width: 640px) {
    .request-bulk-clients > div {
        grid-template-columns: 1fr;
    }
}

/* Request detail navigation */
.request-jump-bar {
    position: sticky;
    top: 82px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: 1rem;
    padding: .55rem;
    border: 1px solid #e4e6ed;
    border-radius: 14px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 10px 28px rgba(35, 30, 65, .08);
    backdrop-filter: blur(14px);
}

.request-jump-bar > a,
.request-more-actions > summary {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .72rem;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #50586d;
    background: transparent;
    font-size: .66rem;
    font-weight: 750;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.request-jump-bar > a:hover,
.request-jump-bar > a:focus-visible,
.request-more-actions > summary:hover,
.request-more-actions > summary:focus-visible,
.request-more-actions[open] > summary {
    color: #503ba4;
    background: #f6f2ff;
    border-color: #e2d9fb;
}

.request-jump-bar .material-symbols-rounded {
    font-size: 1rem;
}

.request-more-actions {
    position: relative;
    margin-left: auto;
}

.request-more-actions > summary {
    list-style: none;
}

.request-more-actions > summary::-webkit-details-marker {
    display: none;
}

.request-more-actions__chevron {
    transition: transform .16s ease;
}

.request-more-actions[open] .request-more-actions__chevron {
    transform: rotate(180deg);
}

.request-more-actions > div {
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    width: min(290px, calc(100vw - 2rem));
    display: grid;
    gap: .4rem;
    padding: .55rem;
    border: 1px solid #e4e6ed;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(30, 25, 58, .16);
}

.request-more-actions > div button {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 40px;
    padding: .65rem .7rem;
    border: 0;
    border-radius: 9px;
    color: #4f576c;
    background: transparent;
    font: inherit;
    font-size: .66rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.request-more-actions > div button:hover,
.request-more-actions > div button:focus-visible {
    background: #f5f3fb;
}

.request-more-actions > div button.is-danger {
    color: #a13b44;
}

.request-more-actions > div button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

#request-content,
#request-client-access,
#request-communications,
#request-internal-notes {
    scroll-margin-top: 144px;
}

.review-received-at {
    display: grid;
    gap: .12rem;
    white-space: nowrap;
}

.review-received-at strong {
    color: #4e566b;
    font-size: .66rem;
}

.review-received-at small {
    color: #8b92a2;
    font-size: .6rem;
}

/* Guided product tour */
.guided-tour {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}

.guided-tour__shade,
.guided-tour__target,
.guided-tour__dialog {
    position: fixed;
}

.guided-tour__shade {
    z-index: 1000;
    background: rgba(20, 17, 37, .62);
    pointer-events: auto;
    backdrop-filter: blur(1px);
}

.guided-tour__shade--full {
    inset: 0;
}

.guided-tour__target {
    z-index: 1001;
    border: 3px solid #8d74f7;
    border-radius: 13px;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, .9),
        0 0 0 8px rgba(116, 84, 222, .26),
        0 12px 40px rgba(29, 22, 64, .2);
    pointer-events: auto;
}

.guided-tour__dialog {
    z-index: 1002;
    width: min(390px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border: 1px solid rgba(108, 83, 190, .22);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 26px 70px rgba(18, 13, 42, .3);
    outline: 0;
    pointer-events: auto;
}

.guided-tour__dialog:focus-visible {
    box-shadow:
        0 0 0 4px rgba(135, 109, 232, .28),
        0 26px 70px rgba(18, 13, 42, .3);
}

.guided-tour__dialog > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem .75rem;
}

.guided-tour__dialog > header > div {
    display: grid;
    gap: .2rem;
}

.guided-tour__dialog > header span:not(.material-symbols-rounded) {
    color: #6951b7;
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.guided-tour__dialog > header strong {
    color: #7c8497;
    font-size: .64rem;
}

.guided-tour__progress {
    height: 3px;
    margin: 0 1.1rem;
    overflow: hidden;
    border-radius: 99px;
    background: #ece8f8;
}

.guided-tour__progress > span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #6550bd, #9d7df0);
    transition: width .22s ease;
}

.guided-tour__copy {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: .85rem;
    padding: 1.15rem 1.1rem 1rem;
}

.guided-tour__step-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(145deg, #5543ac, #8467dd);
    font-size: 1.25rem;
    box-shadow: 0 8px 18px rgba(91, 67, 177, .22);
}

.guided-tour__copy h2 {
    margin: 0 0 .45rem;
    color: #252b3c;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.25;
}

.guided-tour__copy p {
    margin: 0;
    color: #60687c;
    font-size: .72rem;
    line-height: 1.65;
}

.guided-tour__error {
    margin: 0 1.1rem .75rem;
    padding: .65rem .75rem;
    border-radius: 9px;
    color: #9f3944;
    background: #fff0f1;
    font-size: .65rem;
}

.guided-tour__dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1.1rem 1rem;
    border-top: 1px solid #eceef3;
}

.guided-tour__dialog > footer > div {
    display: flex;
    gap: .45rem;
    margin-left: auto;
}

.guided-tour__skip {
    padding: .45rem 0;
    border: 0;
    color: #737b8e;
    background: transparent;
    font-size: .64rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.guided-tour__dialog button:disabled {
    opacity: .55;
    cursor: wait;
}

@media (max-width: 720px) {
    .request-jump-bar {
        top: 78px;
        grid-template-columns: 1fr 1fr;
        display: grid;
    }

    .request-jump-bar > a,
    .request-more-actions,
    .request-more-actions > summary {
        width: 100%;
    }

    .request-more-actions {
        grid-column: 1 / -1;
        margin-left: 0;
    }

    .request-more-actions > summary {
        justify-content: center;
        border-color: #e6e2f2;
        background: #faf8ff;
    }

    .request-more-actions > div {
        position: static;
        width: 100%;
        margin-top: .45rem;
        border-color: #e6e2f2;
        box-shadow: none;
    }

    #request-content,
    #request-client-access,
    #request-communications,
    #request-internal-notes {
        scroll-margin-top: 250px;
    }

    .guided-tour__dialog > footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .guided-tour__dialog > footer > div {
        width: 100%;
        margin-left: 0;
    }

    .guided-tour__dialog > footer .button {
        flex: 1;
    }

    .guided-tour__skip {
        align-self: center;
    }
}

@media (max-width: 620px) {
    .product-topbar {
        gap: .45rem;
        padding-inline: 1.2rem;
    }

    .product-topbar > div {
        display: none;
    }

    .product-topbar .mobile-menu {
        margin-right: auto;
    }
}