/* SMP CRM interface styles.
   Written as a plain stylesheet with no build step, so the application runs
   from a clean checkout without a front-end toolchain. */

:root {
    --ink: #12212f;
    --ink-soft: #4a5b6b;
    --ink-faint: #7c8b99;
    --line: #dde4ea;
    --line-soft: #eef2f5;
    --page: #f4f7f9;
    --surface: #ffffff;
    --brand: #14506b;
    --brand-dark: #0e3b50;
    --brand-soft: #e6eff3;
    --accent: #b8862b;
    --good: #1d6f4a;
    --good-soft: #e5f3ec;
    --warn: #8a5a12;
    --warn-soft: #fbf1de;
    --bad: #99321f;
    --bad-soft: #fbeae6;
    --radius: 8px;
    --shadow: 0 1px 2px rgba(18, 33, 47, 0.06), 0 4px 14px rgba(18, 33, 47, 0.05);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--page);
    color: var(--ink);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.app { display: flex; min-height: 100vh; }

/* Sidebar */
.sidebar {
    width: 246px;
    flex: 0 0 246px;
    background: var(--brand-dark);
    color: #d8e5ec;
    display: flex;
    flex-direction: column;
    padding: 18px 0 12px;
}

.sidebar .brand {
    display: block;
    padding: 0 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    margin-bottom: 12px;
}

.sidebar .brand img.wordmark { display: block; width: 100%; max-width: 172px; height: auto; }
/* The subtitle is longer than the sidebar is wide, so it wraps.  Tightened
   deliberately rather than clipped: `nowrap` here cuts the last word off
   mid-letter, which reads as a rendering fault. */
.sidebar .brand .sub { display: block; margin-top: 7px; font-size: 9.5px; line-height: 1.35; color: #8fb0c1; letter-spacing: 0.4px; text-transform: uppercase; }

.sidebar nav { flex: 1; }
/* Collapsible sections.

   Built on details/summary, so the sections open and close with no JavaScript
   at all.  The script only enforces the one-at-a-time rule, which is a
   refinement rather than the mechanism: with scripting off the navigation is
   still fully usable, just less tidy. */
.sidebar .nav-section { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

.sidebar summary.nav-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 18px 10px 20px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: #7ea0b2;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.sidebar summary.nav-group::-webkit-details-marker { display: none; }
.sidebar summary.nav-group:hover { color: #cfe0e9; background: rgba(255, 255, 255, 0.04); }
.sidebar summary.nav-group:focus-visible { outline: 2px solid #8fb0c1; outline-offset: -2px; }

/* A triangle on the right, pointing right when closed and down when open, so
   the state is readable at a glance without reading the labels underneath. */
.sidebar .nav-caret {
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    flex: 0 0 auto;
    transition: transform 120ms ease;
}

.sidebar .nav-section[open] > summary.nav-group { color: #cfe0e9; }
.sidebar .nav-section[open] .nav-caret { transform: rotate(90deg); }

/* The section holding the page being looked at.  Marked so the eye finds it
   without opening anything, since it is the one section that is open on
   arrival. */
.sidebar .nav-section[data-anchored] > summary.nav-group { color: #a9c6d4; }

.sidebar .nav-section > a.nav-item:last-child { margin-bottom: 6px; }

/* The dashboard, which belongs to no section. */
.sidebar a.nav-item.standalone {
    margin: 2px 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.sidebar a.nav-item {
    display: block;
    padding: 8px 20px 8px 21px;
    color: #cfe0e9;
    font-size: 14px;
    border-left: 3px solid transparent;
}

.sidebar a.nav-item:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; color: #fff; }
.sidebar a.nav-item.active { background: rgba(255, 255, 255, 0.1); border-left-color: var(--accent); color: #fff; font-weight: 600; }

.sidebar .sidebar-foot {
    padding: 12px 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 11.5px;
    color: #86a8ba;
}

/* Main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 12px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Pushed right rather than spread by `space-between`: with a logo beside the
   organization's name there are three children, and spreading them puts the
   name in the middle of the bar away from the mark it belongs to. */
.topbar .who { margin-left: auto; }

.topbar .tenant { font-weight: 600; }
.topbar .tenant small { display: block; font-weight: 400; color: var(--ink-faint); font-size: 11.5px; }
.topbar .who { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-soft); }

/* The account menu.
   Built on details/summary so it opens without any JavaScript at all: the
   script beside it only closes the panel on an outside click, which is a
   refinement rather than the mechanism. */
.who-menu { position: relative; }

.who-menu > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.who-menu > summary::-webkit-details-marker { display: none; }
.who-menu > summary:hover { background: var(--line-soft); }
.who-menu > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.who-menu[open] > summary { background: var(--line-soft); }

.who-menu .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    flex: 0 0 auto;
}

.who-menu .who-name { color: var(--ink); font-weight: 500; white-space: nowrap; }

.who-menu .chevron {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--ink-faint);
    flex: 0 0 auto;
}

.who-menu[open] .chevron { transform: rotate(180deg); }

.who-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 232px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.who-panel-head { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.who-panel-name { color: var(--ink); font-weight: 600; }
.who-panel-email { color: var(--ink-faint); font-size: 12px; margin-top: 1px; word-break: break-all; }

.who-panel-body { padding: 10px 14px 12px; }

.who-panel-label {
    color: var(--ink-faint);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 5px;
}

/* One per line.  Four roles set inline is what pushed the header wider than
   the window in the first place. */
.who-role { color: var(--ink-soft); font-size: 12.5px; line-height: 1.6; }
.who-role.muted { color: var(--ink-faint); font-style: italic; }

.content { padding: 24px 28px 44px; flex: 1; }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.page-head h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.2px; }
.page-head p { margin: 0; color: var(--ink-soft); font-size: 13.5px; max-width: 70ch; }

/* The actions in a page head, kept together on the right.  The head itself is
   `space-between`, which spreads loose buttons across the whole width; grouping
   them means adding a second action does not move the first. */
.head-actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* An opened panel in the head would otherwise stretch the row it sits in. */
.head-actions .row-edit[open] {
    position: relative;
}

/* Cards */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.card > h2, .card > .card-head {
    margin: 0;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-body { padding: 16px 18px; }
/* Wide tables scroll inside their own card rather than spilling over the one
   beside them. */
.card-body.tight { padding: 0; overflow-x: auto; }

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

/* `two` and `three` are the wrapping variants: as many across as fit, dropping
   to fewer on a narrow screen.  `cols-2` holds two columns regardless, which is
   right for a dashboard row and wrong for a pair of forms. */
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.cols-4, .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

/* Statistic tiles */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-faint); }
.stat .value { font-size: 25px; font-weight: 600; letter-spacing: -0.5px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .note { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.stat.accrued .value { color: var(--warn); }
.stat.payable .value { color: var(--good); }
.stat.paid .value { color: var(--brand); }

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-faint); padding: 10px 18px; border-bottom: 1px solid var(--line); font-weight: 600; }
td { padding: 11px 18px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafcfd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-faint); }
.nowrap { white-space: nowrap; }
.small { font-size: 12px; }

/* Badges */
.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px; }
.badge.neutral { background: var(--line-soft); color: var(--ink-soft); }
.badge.good { background: var(--good-soft); color: var(--good); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.brand { background: var(--brand-soft); color: var(--brand); }

/* Forms and buttons */
label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=file], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.field { margin-bottom: 14px; }
.field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

.btn {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 6px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; color: #fff; }
.btn.secondary { background: #fff; color: var(--brand); }
.btn.secondary:hover { background: var(--brand-soft); color: var(--brand-dark); }
.btn.quiet { background: #fff; color: var(--ink-soft); border-color: var(--line); }
.btn.quiet:hover { background: var(--line-soft); color: var(--ink); }
.btn.small { padding: 5px 11px; font-size: 12.5px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Notices */
.notice { padding: 11px 16px; border-radius: var(--radius); margin-bottom: 18px; font-size: 13.5px; border: 1px solid; }
.notice.good { background: var(--good-soft); border-color: #bfe0ce; color: var(--good); }
.notice.warn { background: var(--warn-soft); border-color: #ecd6ab; color: var(--warn); }
.notice.bad { background: var(--bad-soft); border-color: #f0c8be; color: var(--bad); }
.notice.info { background: var(--brand-soft); border-color: #c4dae4; color: var(--brand-dark); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* The derivation: a commission amount is never shown without it. */
.derivation { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fdfefe; }
.derivation .derivation-head {
    padding: 10px 16px;
    background: var(--brand-soft);
    border-bottom: 1px solid #cfe0e8;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-dark);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.derivation .step {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 20px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--line-soft);
    align-items: baseline;
}
.derivation .step:last-child { border-bottom: none; }
.derivation .step .label { grid-column: 1; font-weight: 600; font-size: 13px; }
.derivation .step .detail { grid-column: 1; font-size: 12.5px; color: var(--ink-soft); }
.derivation .step .amount { grid-column: 2; grid-row: 1 / span 2; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; white-space: nowrap; text-align: right; align-self: center; }
.derivation .step.skipped { background: #fbfbfc; }
.derivation .step.skipped .label, .derivation .step.skipped .amount { color: var(--ink-faint); font-weight: 500; }
.derivation .row-collected, .derivation .row-total {
    display: flex;
    justify-content: space-between;
    padding: 11px 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.derivation .row-collected { border-bottom: 1px solid var(--line); background: #f8fafb; }
.derivation .row-total { border-top: 2px solid var(--brand); background: #f8fafb; font-size: 16px; }
.derivation .derivation-foot { padding: 8px 16px; font-size: 11.5px; color: var(--ink-faint); border-top: 1px solid var(--line-soft); }

/* Definition lists */
.dl { display: grid; grid-template-columns: 190px 1fr; gap: 7px 16px; font-size: 13.5px; }
.dl dt { color: var(--ink-faint); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; padding-top: 2px; }
.dl dd { margin: 0; }

/* Pipeline display on the structure pages */
.pipeline { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.pipeline li { padding: 8px 0 8px 34px; position: relative; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.pipeline li:last-child { border-bottom: none; }
.pipeline li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0;
    top: 8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-dark);
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.op-key { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 11.5px; color: var(--ink-faint); font-weight: 400; }
span.op-key { margin-left: 7px; }

/* `nowrap` because a chip is one label.  "Managed Service Retainer" broken
   across three lines inside a rounded box reads as three chips. */
.chip { display: inline-block; background: var(--line-soft); border-radius: 5px; padding: 1px 7px; font-size: 11.5px; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink-soft); white-space: nowrap; }

/* Sign in */
.signin { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #0e3b50, #14506b 55%, #1b6785); padding: 20px; }
.signin .panel { width: 100%; max-width: 400px; background: #fff; border-radius: 12px; padding: 30px 30px 26px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
.signin .panel .mark { text-align: center; margin-bottom: 20px; }
.signin .panel .mark img { width: 54px; height: 54px; }
.signin .panel h1 { font-size: 19px; margin: 10px 0 2px; text-align: center; }
.signin .panel .lede { text-align: center; color: var(--ink-faint); font-size: 13px; margin: 0 0 22px; }
.signin .foot { text-align: center; margin-top: 18px; font-size: 11.5px; color: var(--ink-faint); }

.error-page { max-width: 560px; margin: 90px auto; }
.correlation { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--line-soft); padding: 3px 8px; border-radius: 5px; }

.empty { padding: 34px 18px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }

.toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .field { margin-bottom: 0; }
.toolbar input, .toolbar select { min-width: 190px; }

.pagination { display: flex; gap: 6px; padding: 12px 18px; font-size: 13px; align-items: center; flex-wrap: wrap; }
.pagination a, .pagination span { padding: 4px 9px; border-radius: 5px; border: 1px solid var(--line); }
.pagination .active span, .pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }
.pagination .muted { color: var(--ink-faint); border-color: var(--line-soft); }
/* Pushed to the right so the page numbers stay together on the left. */
.pagination .pagination-count { margin-left: auto; border: 0; padding: 4px 0; color: var(--ink-faint); font-size: 12px; }

code.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
pre.json { background: #0e2230; color: #d6e6ef; padding: 16px; border-radius: var(--radius); overflow-x: auto; font-size: 12px; line-height: 1.5; }

/* The alternative sign-in methods, separated from the password form so the
   two are not mistaken for one another. */
.sso-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 12px; }
.sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn.block { display: block; width: 100%; text-align: center; margin-bottom: 8px; }

/* ---------------------------------------------------------------------------
   The public pages.

   Everything a visitor sees before they have an account.  Deliberately in the
   same stylesheet and the same palette as the application, so somebody arriving
   from the storefront recognizes the product when they get inside it.
   --------------------------------------------------------------------------- */

body.public { background: var(--page); }

body.public main { max-width: 1120px; margin: 0 auto; padding: 0 24px 64px; }

.public-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 24px;
}

.public-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; text-decoration: none; }
.public-brand img { width: 30px; height: 30px; border-radius: 6px; }

.public-nav { display: flex; align-items: center; gap: 18px; }
.public-nav a { color: var(--ink-soft); text-decoration: none; font-size: 14px; }
.public-nav a:hover { color: var(--ink); }
.public-nav a.here { color: var(--brand); font-weight: 600; }
.public-nav a.btn { color: #fff; }

.public-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

/* The hero carries the brand rather than being the largest white area on the
   page.  The dark band also sets up the contrast the plan cards sit against:
   white cards on a light page under a dark band is a legible hierarchy, where
   three shades of nearly-white is not. */
.hero {
    background: linear-gradient(160deg, var(--brand-dark), var(--brand));
    color: #fff;
    border-radius: 0 0 20px 20px;
    margin: 0 -24px 44px;
    padding: 60px 32px 52px;
    text-align: center;
}

.hero h1 { margin: 0 auto; max-width: 26ch; font-size: 40px; line-height: 1.15; letter-spacing: -0.6px; }
.hero p { margin: 18px auto 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; color: #cfe0e9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.hero-actions .btn.quiet { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.hero-actions .btn.quiet:hover { background: rgba(255, 255, 255, 0.12); }
.hero-note { font-size: 13px !important; color: #a9c6d4 !important; margin-top: 14px !important; }

.pitch { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 52px; }
.pitch-item h2 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.2px; }
.pitch-item p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

.centered { text-align: center; }
.lede.centered { max-width: 70ch; margin-left: auto; margin-right: auto; }
.page-intro { padding: 28px 0 8px; text-align: center; }
.page-intro h1 { font-size: 32px; letter-spacing: -0.5px; margin: 0 0 10px; }
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }

/* The monthly and yearly cards are both in the page, one hidden, so switching
   between them is instant and costs no request. */
.interval-toggle {
    display: inline-flex;
    gap: 4px;
    margin: 22px auto 0;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.interval-toggle { display: flex; width: fit-content; }
.interval-toggle button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 7px 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
}
.interval-toggle button.on { background: var(--brand); color: #fff; }
.interval-toggle button .save { color: var(--good); font-weight: 600; }
.interval-toggle button.on .save { color: #b6e3cd; }

/* The hidden interval must actually hide.  A class setting `display: grid`
   outranks the browser's own rule for `[hidden]`, so without this both sets of
   cards render and the page shows every price twice. */
.plan-grid[hidden] { display: none; }

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 18px;
    margin: 26px 0 8px;
    align-items: start;
}

.plan-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px 20px 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

.plan-card.featured { border-color: var(--brand); box-shadow: 0 2px 6px rgba(20, 80, 107, 0.12), 0 12px 28px rgba(20, 80, 107, 0.1); }

.plan-badge {
    position: absolute;
    top: -10px;
    left: 20px;
    background: var(--accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
}

.plan-card h3 { margin: 0; font-size: 18px; letter-spacing: -0.2px; }
.plan-tagline { margin: 3px 0 0; color: var(--ink-faint); font-size: 13px; }
.plan-price { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; }
.plan-price .amount { font-size: 32px; font-weight: 700; letter-spacing: -1px; }
.plan-price.small-price .amount { font-size: 24px; }
.plan-price .per { color: var(--ink-faint); font-size: 13px; }
.plan-price-note { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; min-height: 18px; }
.plan-seats { margin-top: 12px; font-weight: 600; font-size: 14px; color: var(--brand); }
.plan-description { margin: 10px 0 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }

.plan-features { list-style: none; margin: 14px 0 18px; padding: 0; }
.plan-features li { position: relative; padding: 4px 0 4px 20px; font-size: 13.5px; color: var(--ink-soft); }
.plan-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.plan-features li.excluded { color: var(--ink-faint); text-decoration: line-through; }
.plan-features li.excluded::before { content: "\2013"; color: var(--ink-faint); }
.plan-features li .small { display: block; text-decoration: none; }

.plan-cta { margin-top: auto; text-align: center; }

.compare { margin-top: 48px; }
.compare-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; }
.compare-table th, .compare-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.compare-table thead th { font-size: 14px; }
.compare-table td { text-align: center; color: var(--ink-soft); }
.compare-table tbody th { font-weight: 400; color: var(--ink-soft); }
.compare-table .group-row th { background: var(--line-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--ink-faint); text-align: left; }
.compare-table .featured { background: var(--brand-soft); }
.compare-table .tick { color: var(--good); font-weight: 700; }

.addons { margin-top: 52px; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 22px; }
.addon-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; }
/* An add-on nobody can buy yet is visibly held back rather than sitting beside
   the real ones looking purchasable. */
.addon-card.soon { border-style: dashed; background: transparent; }
.addon-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.addon-head h3 { margin: 0; font-size: 16.5px; }
.addon-note { margin-top: auto; padding-top: 12px; color: var(--ink-faint); font-size: 12.5px; font-style: italic; }

.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 52px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.faq-item h2 { margin: 0 0 6px; font-size: 15.5px; }
.faq-item p { margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }

.signup-form { max-width: 560px; margin: 24px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: var(--shadow); }
.plan-choice { border: 0; margin: 0 0 18px; padding: 0; }
.plan-choice legend { font-weight: 600; font-size: 14px; padding: 0 0 8px; }
.plan-choice-item { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.plan-choice-item:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.plan-choice-body { display: flex; flex-direction: column; }
.plan-choice-name { font-weight: 600; }
.plan-choice-seats { color: var(--brand); font-size: 13px; }
.plan-choice-price { color: var(--ink-faint); font-size: 12.5px; }

@media (max-width: 640px) {
    .hero h1 { font-size: 30px; }
    .public-foot { flex-direction: column; align-items: flex-start; }
}

/* The plan console's feature list: a checkbox, its wording, and whether the
   tier includes it, on one line each so a long catalog stays scannable. */
.feature-row { display: grid; grid-template-columns: 1fr 240px 110px; gap: 12px; align-items: center; padding: 3px 0; }
.feature-row input[type="text"] { padding: 5px 8px; font-size: 13px; }
@media (max-width: 780px) { .feature-row { grid-template-columns: 1fr; } }

/* The notification bell. */
.bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--ink-faint); }
.bell:hover { background: var(--line-soft); color: var(--ink); }
.bell svg { width: 19px; height: 19px; fill: currentColor; }
.bell.has-unread { color: var(--brand); }

.bell-count {
    position: absolute;
    top: -1px;
    right: -3px;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--bad);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.notice-list { display: flex; flex-direction: column; gap: 10px; }
.notification {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--radius);
    padding: 14px 16px;
}
/* Unread reads as unread without a second colour scheme: the same card, held
   open by a heavier left edge and a solid title. */
.notification.unread { border-left-color: var(--brand); }
.notification.read { opacity: 0.72; }
.notification.tone-action { border-left-color: var(--accent); }
.notification.tone-warn { border-left-color: var(--warn); }
.notification-body { flex: 1; }
.notification-title { font-weight: 600; }
.notification.read .notification-title { font-weight: 400; }
.notification-meta { color: var(--ink-faint); font-size: 12px; margin-top: 3px; }
.notification-text { color: var(--ink-soft); font-size: 13.5px; margin-top: 4px; line-height: 1.55; }
.notification-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.pitch-band { margin-top: 52px; padding: 32px 0 8px; border-top: 1px solid var(--line); }
.pitch-item h2 .pill { vertical-align: middle; margin-left: 6px; font-size: 10px; }

.public-foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.public-foot-links a { color: var(--ink-soft); font-size: 13px; }

/* Legal text.  A single measured column, because these are read rather than
   scanned, and a line that runs the width of a monitor is not read. */
.legal { max-width: 74ch; margin: 24px auto 0; }
.legal h1 { font-size: 30px; letter-spacing: -0.5px; margin: 0 0 18px; }
.legal h2 { font-size: 19px; margin: 30px 0 8px; }
.legal h3 { font-size: 16px; margin: 22px 0 6px; }
.legal p { color: var(--ink-soft); line-height: 1.7; margin: 0 0 14px; }
.legal ul { color: var(--ink-soft); line-height: 1.7; margin: 0 0 14px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--ink); }
.legal-meta { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 12.5px; }

.legal-consent { margin: 16px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line-soft); }
.legal-consent a { text-decoration: underline; }

/* The organization's mark, in the light bar beside its name.  Most logos are
   drawn for a light background, and the sidebar is not one. */
.topbar .tenant-logo {
    max-width: 150px;
    max-height: 38px;
    object-fit: contain;
    flex: 0 0 auto;
    margin-right: 14px;
}

/* The structure builder.  Every operation the vocabulary defines gets a card,
   generated from the vocabulary itself rather than written out by hand. */
.builder-add { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.builder-add > summary { padding: 9px 14px; cursor: pointer; font-weight: 600; font-size: 13.5px; list-style: none; }
.builder-add > summary::-webkit-details-marker { display: none; }
.builder-add > summary:hover { background: var(--line-soft); }
.builder-add[open] > summary { border-bottom: 1px solid var(--line); }
.builder-add-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; padding: 14px; }
.builder-op { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; background: var(--surface); }
.builder-op-head { display: flex; align-items: baseline; gap: 8px; }
.builder-op p { margin: 4px 0 8px; }
.builder-op-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.builder-op-fields .field { margin-bottom: 4px; }
.band-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 5px; }
.band-row input { padding: 5px 7px; font-size: 12.5px; }

/* The bell's panel.  Same mechanism as the account menu: details/summary, so it
   opens with no scripting; the script only closes it and keeps the two panels
   from overlapping. */
.bell-menu { position: relative; }
.bell-menu > summary { list-style: none; cursor: pointer; }
.bell-menu > summary::-webkit-details-marker { display: none; }
.bell-menu[open] > summary { background: var(--line-soft); color: var(--ink); }

.bell-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.bell-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 600;
    font-size: 13px;
}

.bell-panel-body { max-height: 340px; overflow-y: auto; }

.bell-item { display: block; padding: 9px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); }
.bell-item:hover { background: var(--line-soft); }
.bell-item.unread { border-left: 3px solid var(--brand); padding-left: 9px; }
.bell-item-title { display: block; font-size: 13px; color: var(--ink); }
.bell-item.unread .bell-item-title { font-weight: 600; }
.bell-item-meta { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.bell-empty { padding: 16px 12px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.bell-panel-foot { display: block; padding: 9px 12px; text-align: center; font-size: 12.5px; }

/* A button that is deliberately unavailable, with the reason on hover. */
.btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: auto; }

/* A card for something listed but not yet available. */
.muted-card { border-style: dashed; background: transparent; }

/* A checkbox with its explanation beside it rather than under it.  The label
   wraps the box so the whole line is a hit target. */
.check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-weight: 400;
    margin-top: 7px;
    line-height: 1.45;
}

.check input[type="checkbox"] {
    width: auto;
    margin-top: 3px;
    flex: 0 0 auto;
}

.check span {
    font-size: 13px;
    color: var(--ink-soft, #4a5568);
}

/* An edit form that opens inside a table row.  `details` so it works with no
   JavaScript at all; the summary is styled as the button it behaves like. */
.row-edit > summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
}

.row-edit > summary::-webkit-details-marker {
    display: none;
}

.row-edit[open] {
    display: block;
    min-width: 320px;
    /* Capped so an opened form does not spread across the whole card: a hint
       line 900 pixels wide is harder to read than the same line at 400. */
    max-width: 460px;
}

.row-edit[open] > summary {
    margin-bottom: 4px;
}

/* A label on the left, its control on the right, wrapping rather than
   overflowing on a narrow screen. */
.row-between {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* An organization's square mark, or its initials where it has none.  Both
   render at exactly the size asked for, so a row does not change height
   depending on whether an icon was uploaded. */
.org-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--line, #e2e8f0);
    overflow: hidden;
    vertical-align: middle;
}

.org-avatar.is-initials {
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    border-color: transparent;
}

/* A long unbreakable string, such as a URL somebody has to copy.  A class
   rather than an inline style, because two of them are shown side by side on
   the accounting setup page and a third will want the same thing. */
.wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* The catalog media gallery: pictures and video in one run, wrapping. */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.gallery-tile {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gallery-tile.is-primary {
    border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand);
}

.gallery-tile img {
    width: 100%;
    height: 140px;
    object-fit: contain;
    background: var(--line-soft);
    display: block;
}

/* A 16:9 box the frame fills, so a row of tiles keeps one height whether it
   holds a picture or a video. */
.gallery-video {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 140px;
    background: #0e2230;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d6e6ef;
    font-size: 12px;
}

.gallery-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.gallery-tile figcaption {
    padding: 9px 10px 4px;
    font-size: 12.5px;
    line-height: 1.4;
}

/* A team on an account, with its people under it.  The grouping is the point:
   somebody put a team here, and the members are that team's, not a flat list
   that happens to contain them. */
.roster-group {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}

.roster-group:last-child {
    margin-bottom: 0;
}

.roster-group-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: var(--line-soft);
    border-bottom: 1px solid var(--line);
}

.roster-group table {
    margin: 0;
}

.roster-group .empty {
    padding: 16px;
}

/* Choosing one record by typing part of its name.  The select underneath is
   hidden rather than removed: it is still what the form submits. */
.record-picker {
    position: relative;
}

.record-picker-input {
    width: 100%;
}

.record-picker-list {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.record-picker-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 7px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.record-picker-option:hover,
.record-picker-option[aria-selected="true"] {
    background: var(--brand-soft);
}

.record-picker-label {
    color: var(--ink);
}

.record-picker-hint {
    color: var(--ink-faint);
    font-size: 12px;
    white-space: nowrap;
}

.record-picker-message {
    padding: 8px 10px;
    color: var(--ink-faint);
    font-size: 13px;
}

/* A written guide, read beside the screen it explains. */
body.plain {
    background: var(--page);
    color: var(--ink);
}

.plain-page {
    max-width: 780px;
    margin: 0 auto;
    padding: 36px 24px 64px;
}

.guide h1 { font-size: 26px; margin: 0 0 8px; }
.guide h2 { font-size: 19px; margin: 30px 0 8px; }
.guide h3 { font-size: 16px; margin: 22px 0 6px; }
.guide p, .guide li { line-height: 1.62; }
.guide hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }

.guide pre {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    overflow-x: auto;
}

.guide code {
    font-size: 13px;
}

.guide table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
}

.guide th, .guide td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.guide blockquote {
    margin: 14px 0;
    padding-left: 14px;
    border-left: 3px solid var(--brand-soft);
    color: var(--ink-soft);
}