/* VinDevs Teams, shared surface styles.

   Load position: linked from inside the page body, so it cascades AFTER all
   four shell stylesheets (render.css -> design-system.css -> vd-console.css ->
   dev-os.css). Namespace: every selector is prefixed .vt- and nothing here
   styles a bare element.

   Rules this file obeys:
   - Tokens only. No literal palette values except neutral alphas derived from
     currentColor / color-mix. Gold is premium-only and never appears here.
   - Light mode is an aggressive !important whitewash applied from the shell
     head (WHITE_MODE_ENFORCER_STYLE). Anything that must survive it lives in
     the light-mode block at the end, at class-level specificity.
   - .app-shell carries a transform, so position:fixed/sticky resolves against
     it, not the viewport. Sticky here is only ever used inside a local
     overflow container, which is safe.
   - Wide tables scroll inside .vt-scroll-x. The body never scrolls sideways.
   - Version this file with TEAMS_ASSET_VERSION from
     src/services/TeamsService/catalog.ts. */

/* ---------------------------------------------------------------------------
   Local tokens. All derived, nothing invented.
   --------------------------------------------------------------------------- */

.vt-page,
.vt-hero,
.vt-section,
.vt-package,
.vt-proof-item,
.vt-proposal,
.vt-queue,
.vt-wizard,
.vt-empty {
    /* ---- Type scale -----------------------------------------------------
       ONE scale, eight steps. This file previously carried 31 distinct
       font-size values, 0.72 / 0.73 / 0.74 / 0.75 / 0.76 / 0.78 / 0.79 /
       0.8 / 0.82 / 0.84 / 0.86 / 0.88 / 0.9 / 0.91 ..., twenty-six of them
       packed between 11.5px and 17px, i.e. steps of a sixth of a pixel that
       no reader can perceive and no author can choose between. Every size
       below is a real step. Adding a 9th needs a reason written down here.

       2xs is reserved for UPPERCASE tracked micro-labels, where the caps and
       letter-spacing carry the size back up; it is never used for sentences.
       Body copy floors at base (16px). */
    --vt-text-2xs: 0.75rem; /* 12px, uppercase labels only */
    --vt-text-xs: 0.8125rem; /* 13px, captions, card meta */
    --vt-text-sm: 0.875rem; /* 14px, secondary copy, tables */
    --vt-text-base: 1rem; /* 16px, body */
    --vt-text-lg: 1.125rem; /* 18px, lede, card titles */
    --vt-text-xl: 1.25rem; /* 20px */
    --vt-text-2xl: 1.5rem; /* 24px */
    /* ---- Weights: three, not five. Was 600/620/640/650/700, where 620 and
       640 are invisible next to each other and to 600. */
    --vt-weight-normal: 400;
    --vt-weight-medium: 600;
    --vt-weight-bold: 700;
    /* ---- Radii ----------------------------------------------------------
       Two steps for surfaces (control 8, card 12) and a pill that is
       RESERVED for interactive filter chips, the popular-search terms.
       Everything else that used to be a 999px pill (discipline chips,
       package meta, proof kinds) is a static label, and 29 pills on one page
       is the "rounded-full everywhere" look this design is not. */
    --vt-radius-control: 8px;
    --vt-radius: 12px;
    --vt-radius-lg: 12px;
    --vt-radius-pill: 999px;
    --vt-border: 1px solid var(--ds-border, var(--border-soft));
    --vt-border-strong: 1px solid var(--ds-border-strong, var(--border-strong));
    --vt-surface: var(--ds-surface, var(--bg-panel));
    --vt-surface-raised: var(--ds-canvas-raised, var(--bg-surface));
    --vt-text: var(--ds-text, var(--text-strong));
    --vt-muted: var(--ds-text-muted, var(--text-muted));
    --vt-subtle: var(--ds-text-subtle, var(--text-subtle));
    --vt-accent: var(--ds-accent, var(--accent-primary));
    --vt-accent-ink: var(--ds-accent-ink, #fff);
    --vt-accent-soft: color-mix(in srgb, var(--ds-accent, #4c7dff) 14%, transparent);
    --vt-accent-line: color-mix(in srgb, var(--ds-accent, #4c7dff) 38%, transparent);
    --vt-success: var(--ds-success, #3fbf95);
    --vt-warning: var(--ds-warning, #d9a441);
    --vt-danger: var(--ds-danger, #d96a63);
    --vt-gap: var(--surface-gap, 18px);
    --vt-pad: 24px; /* one card padding everywhere; never viewport-scaled */
    --vt-motion: var(--motion-duration-short, 150ms);
    --vt-ease: var(--motion-ease-standard, cubic-bezier(0.2, 0, 0, 1));
}

/* ---------------------------------------------------------------------------
   Page scaffolding
   --------------------------------------------------------------------------- */

.vt-page {
    display: flex;
    flex-direction: column;
    /* THE vertical rhythm. Every top-level block on a commercial page is
       exactly this far from its neighbours, the gap is the only source of
       section spacing, so it cannot drift with the viewport or stack with
       margins. */
    gap: 64px;
    width: 100%;
    min-width: 0;
}

/* No section supplies its own vertical margin inside the page: the shell's
   .hero { margin-bottom: 48px } and .section-block margins were ADDING to the
   flex gap, which is how "hero to categories" measured 108px while other
   pairs measured 76px. Two classes + child combinator outranks the shell's
   single-class rules without !important. */
.vt-page > .hero,
.vt-page > .section-block,
.vt-page > section {
    margin-top: 0;
    margin-bottom: 0;
}

.vt-section {
    display: flex;
    flex-direction: column;
    gap: var(--vt-gap);
    min-width: 0;
}

.vt-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.vt-section__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    max-width: 62ch;
}

.vt-section__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--vt-text);
}

.vt-section__lede {
    margin: 0;
    max-width: 66ch;
    color: var(--vt-muted);
    font-size: var(--vt-text-lg, 1.125rem);
    line-height: 1.62;
}

.vt-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.vt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: var(--vt-text-2xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vt-subtle);
}

.vt-divider {
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--ds-border, var(--border-soft));
}

/* Generic horizontal scroller. Wrap anything wide in this. */
.vt-scroll-x {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.vt-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: clamp(28px, 4vw, 56px) 0 clamp(20px, 3vw, 36px);
    min-width: 0;
}

.vt-hero--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 72ch;
}

.vt-hero__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.vt-hero__title {
    margin: 0;
    max-width: 20ch;
    font-family: var(--font-display);
    font-size: clamp(2.375rem, 1.7rem + 2.4vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.014em;
    font-weight: var(--vt-weight-bold, 700);
    color: var(--vt-text);
    text-wrap: balance;
}

.vt-hero__body {
    margin: 0;
    max-width: 56ch;
    font-size: var(--vt-text-lg, 1.125rem);
    line-height: 1.6;
    color: var(--vt-muted);
}

.vt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.vt-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--vt-subtle);
    font-size: var(--vt-text-sm, 0.875rem);
}

.vt-hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.vt-hero__trust li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--vt-accent-line);
    flex: 0 0 auto;
}

.vt-hero__aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--vt-pad);
    border: var(--vt-border);
    border-radius: var(--vt-radius-lg);
    background: var(--vt-surface);
    min-width: 0;
}

.vt-hero__aside-title {
    margin: 0;
    font-size: var(--vt-text-base, 1rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
}

/* ---------------------------------------------------------------------------
   Steps
   --------------------------------------------------------------------------- */

.vt-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--vt-gap);
    counter-reset: vt-step;
    min-width: 0;
}

.vt-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--vt-pad);
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    min-width: 0;
}

.vt-step__index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--vt-accent-line);
    background: var(--vt-accent-soft);
    color: var(--vt-text);
    font-family: var(--font-mono);
    font-size: var(--vt-text-xs, 0.8125rem);
    font-weight: 600;
    flex: 0 0 auto;
}

.vt-step__title {
    margin: 0;
    font-size: var(--vt-text-lg, 1.125rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
}

.vt-step__detail {
    margin: 0;
    font-size: var(--vt-text-base, 1rem);
    line-height: 1.58;
    color: var(--vt-muted);
}

/* ---------------------------------------------------------------------------
   Packages
   --------------------------------------------------------------------------- */

.vt-package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: var(--vt-gap);
    align-items: stretch;
    min-width: 0;
}

.vt-package {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--vt-pad);
    border: var(--vt-border);
    border-radius: var(--vt-radius-lg);
    background: var(--vt-surface);
    min-width: 0;
    transition:
        border-color var(--vt-motion) var(--vt-ease),
        background var(--vt-motion) var(--vt-ease);
}

a.vt-package,
.vt-package--interactive {
    text-decoration: none;
    color: inherit;
}

a.vt-package:hover,
a.vt-package:focus-visible,
.vt-package--interactive:hover {
    border-color: var(--vt-accent-line);
    background: var(--ds-surface-hover, var(--vt-surface));
}

/* Emphasis, not a sale. No gold, no glow. */
.vt-package--featured {
    border-color: var(--vt-accent-line);
}

.vt-package__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.vt-package__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--vt-text-xl, 1.25rem);
    font-weight: var(--vt-weight-medium, 600);
    letter-spacing: -0.006em;
    color: var(--vt-text);
}

.vt-package__tagline {
    margin: 0;
    font-size: var(--vt-text-base, 1rem);
    line-height: 1.55;
    color: var(--vt-muted);
}

.vt-package__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vt-package__meta li {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: var(--vt-border);
    border-radius: var(--vt-radius-control, 8px);
    font-size: var(--vt-text-xs, 0.8125rem);
    color: var(--vt-muted);
    white-space: nowrap;
}

/* Soft pricing only. The copy comes from formatStartingAround(). */
/* On a pricing card the price is the answer the buyer came for: larger and
   heavier than the title, tabular so figures align across the row. It was
   0.92rem/600, smaller than the tagline it sat next to. */
/* Two classes on purpose: the shell's blanket ".section-block p" rule
   (0,1,1) outranks a single component class, so the component must outrank
   the blanket, not fight it with !important. */
.vt-package .vt-package__price {
    margin: 0;
    padding-top: 2px;
    font-size: var(--vt-text-2xl, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--vt-text);
}

/* One package may carry an honest structural distinction (e.g. the
   lowest-risk entry point). This is a factual product property from the
   catalog, never a fabricated "most popular" claim. */
.vt-package--featured {
    border-color: color-mix(in srgb, var(--ds-accent, var(--vt-accent)) 45%, transparent);
}
.vt-package__flag {
    align-self: flex-start;
    margin: 0;
    padding: 3px 10px;
    border-radius: var(--vt-radius-control, 8px);
    font-size: var(--vt-text-xs, 0.8125rem);
    font-weight: 600;
    color: var(--ds-accent, var(--vt-accent));
    background: color-mix(in srgb, var(--ds-accent, var(--vt-accent)) 10%, transparent);
}

.vt-package__price-note {
    margin: 0;
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.5;
    color: var(--vt-subtle);
}

.vt-package__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.vt-package__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
    align-items: center;
}

/* Include / exclude lists ---------------------------------------------------*/

.vt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vt-list li {
    position: relative;
    padding-left: 20px;
    font-size: var(--vt-text-base, 1rem);
    line-height: 1.55;
    color: var(--vt-muted);
}

.vt-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    border: 1px solid var(--vt-accent-line);
    background: var(--vt-accent-soft);
}

.vt-list--exclude li::before {
    border-radius: 999px;
    border-color: var(--ds-border-strong, var(--border-strong));
    background: transparent;
}

.vt-list--plain li {
    padding-left: 0;
}

.vt-list--plain li::before {
    display: none;
}

.vt-list__label {
    margin: 0 0 2px;
    font-size: var(--vt-text-2xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vt-subtle);
}

/* Process rail --------------------------------------------------------------*/

.vt-process {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.vt-process__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 20px 26px;
    border-left: 1px solid var(--ds-border, var(--border-soft));
    min-width: 0;
}

.vt-process__item:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.vt-process__item::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--vt-accent);
}

.vt-process__title {
    margin: 0;
    font-size: var(--vt-text-lg, 1.125rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
}

.vt-process__detail {
    margin: 0;
    font-size: var(--vt-text-base, 1rem);
    line-height: 1.58;
    color: var(--vt-muted);
}

/* ---------------------------------------------------------------------------
   Proof / case studies
   DELIVERED and CAPABILITY must read as different claims. The kind chip is
   the only place that distinction is carried, so it is never decorative.
   --------------------------------------------------------------------------- */

.vt-proof {
    display: flex;
    flex-direction: column;
    gap: var(--vt-gap);
    min-width: 0;
}

.vt-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--vt-gap);
    min-width: 0;
}

.vt-proof-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--vt-pad);
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    text-decoration: none;
    color: inherit;
    min-width: 0;
    transition: border-color var(--vt-motion) var(--vt-ease);
}

a.vt-proof-item:hover,
a.vt-proof-item:focus-visible {
    border-color: var(--vt-accent-line);
}

.vt-proof-item__kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--vt-radius-control, 8px);
    border: 1px solid var(--vt-accent-line);
    background: var(--vt-accent-soft);
    font-size: var(--vt-text-2xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vt-text);
    white-space: nowrap;
}

/* Capability work is real, but it is not a VinDevs protected delivery. It gets
   a quiet outline instead of the filled delivered chip, so the two can never be
   mistaken for one another at a glance. */
.vt-proof-item--capability .vt-proof-item__kind,
.vt-proof-item__kind--capability {
    border-color: var(--ds-border-strong, var(--border-strong));
    background: transparent;
    color: var(--vt-muted);
}

.vt-proof-item__title {
    margin: 0;
    font-size: var(--vt-text-lg, 1.125rem);
    font-weight: var(--vt-weight-medium, 600);
    line-height: 1.3;
    color: var(--vt-text);
}

.vt-proof-item__summary {
    margin: 0;
    font-size: var(--vt-text-base, 1rem);
    line-height: 1.58;
    color: var(--vt-muted);
}

.vt-proof-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    margin-top: auto;
    padding: 0;
    list-style: none;
    font-size: var(--vt-text-xs, 0.8125rem);
    color: var(--vt-subtle);
}

/* A standing note that capability entries are not VinDevs deliveries. */
.vt-proof__note {
    margin: 0;
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.55;
    color: var(--vt-subtle);
}

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.vt-faq {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.vt-faq__item {
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    overflow: hidden;
}

.vt-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    cursor: pointer;
    font-size: var(--vt-text-base, 1rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
    list-style: none;
}

.vt-faq__q::-webkit-details-marker {
    display: none;
}

.vt-faq__q::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.55;
    transition: transform var(--vt-motion) var(--vt-ease);
}

.vt-faq__item[open] > .vt-faq__q::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.vt-faq__a {
    margin: 0;
    padding: 0 18px 18px;
    font-size: var(--vt-text-base, 1rem);
    line-height: 1.62;
    color: var(--vt-muted);
    max-width: 74ch;
}

/* ---------------------------------------------------------------------------
   Wizard. Reuses the sell-wizard conventions from render.css: the shell is
   .sell-wizard-* and the step internals are .wiz-*. Everything below is the
   Teams-specific addition, chiefly the choice cards the brief needs.
   --------------------------------------------------------------------------- */

.vt-wizard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.vt-wizard__intro {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 62ch;
}

.vt-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    min-width: 0;
}

.vt-choice-grid--tight {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.vt-choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    cursor: pointer;
    text-align: left;
    min-width: 0;
    transition:
        border-color var(--vt-motion) var(--vt-ease),
        background var(--vt-motion) var(--vt-ease);
}

.vt-choice:hover {
    border-color: var(--vt-accent-line);
}

.vt-choice__label {
    font-size: var(--vt-text-base, 1rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
}

.vt-choice__detail {
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.5;
    color: var(--vt-muted);
}

.vt-choice.is-selected,
.vt-choice[aria-pressed="true"],
.vt-choice__input:checked + .vt-choice {
    border-color: var(--vt-accent);
    background: var(--vt-accent-soft);
}

/* The native control stays in the DOM for keyboard and form semantics. */
.vt-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.vt-choice__input:focus-visible + .vt-choice {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.vt-wizard__review {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--vt-pad);
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    min-width: 0;
}

.vt-wizard__fact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ds-border, var(--border-soft));
    font-size: var(--vt-text-sm, 0.875rem);
    min-width: 0;
}

.vt-wizard__fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.vt-wizard__fact dt {
    margin: 0;
    color: var(--vt-subtle);
}

.vt-wizard__fact dd {
    margin: 0;
    color: var(--vt-text);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   SLA
   --------------------------------------------------------------------------- */

.vt-sla {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: var(--vt-radius-control, 8px);
    border: var(--vt-border);
    background: var(--vt-surface);
    font-size: var(--vt-text-xs, 0.8125rem);
    font-weight: 600;
    color: var(--vt-muted);
    white-space: nowrap;
}

.vt-sla__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.vt-sla--ok {
    color: var(--vt-success);
    border-color: color-mix(in srgb, var(--ds-success, #3fbf95) 42%, transparent);
}

.vt-sla--due-soon {
    color: var(--vt-warning);
    border-color: color-mix(in srgb, var(--ds-warning, #d9a441) 46%, transparent);
}

.vt-sla--breached {
    color: var(--vt-danger);
    border-color: color-mix(in srgb, var(--ds-danger, #d96a63) 52%, transparent);
    background: color-mix(in srgb, var(--ds-danger, #d96a63) 10%, transparent);
}

.vt-sla__time {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* Full-width statement used on the brief confirmation screen. */
.vt-sla-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--vt-accent-line);
    border-radius: var(--vt-radius);
    background: var(--vt-accent-soft);
    color: var(--vt-text);
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.5;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Staff queue
   --------------------------------------------------------------------------- */

.vt-queue {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.vt-queue__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.vt-queue__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.vt-queue__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vt-queue__stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--vt-text-xl, 1.25rem);
    font-weight: 600;
    color: var(--vt-text);
}

.vt-queue__stat-label {
    font-size: var(--vt-text-2xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vt-subtle);
}

.vt-queue__table-wrap {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    -webkit-overflow-scrolling: touch;
}

.vt-queue__table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: var(--vt-text-sm, 0.875rem);
}

.vt-queue__table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 16px;
    text-align: left;
    font-size: var(--vt-text-2xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vt-subtle);
    background: var(--vt-surface-raised);
    border-bottom: var(--vt-border);
    white-space: nowrap;
}

.vt-queue__table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--ds-border, var(--border-soft));
    color: var(--vt-muted);
    vertical-align: top;
}

.vt-queue__table tr:last-child td {
    border-bottom: 0;
}

.vt-queue__table tbody tr:hover td {
    background: var(--ds-surface-hover, transparent);
}

.vt-queue__primary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.vt-queue__primary a {
    color: var(--vt-text);
    font-weight: var(--vt-weight-medium, 600);
    text-decoration: none;
}

.vt-queue__primary a:hover {
    text-decoration: underline;
}

.vt-queue__note {
    font-size: var(--vt-text-xs, 0.8125rem);
    color: var(--vt-subtle);
    overflow-wrap: anywhere;
}

.vt-queue__row--breached td {
    background: color-mix(in srgb, var(--ds-danger, #d96a63) 7%, transparent);
}

/* Card fallback for narrow viewports. Render both, hide one per breakpoint. */
.vt-queue__cards {
    display: none;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.vt-queue-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    min-width: 0;
}

.vt-queue-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ---------------------------------------------------------------------------
   Chips + meta
   --------------------------------------------------------------------------- */

.vt-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--vt-radius-control, 8px);
    border: var(--vt-border);
    background: transparent;
    font-size: var(--vt-text-xs, 0.8125rem);
    font-weight: 600;
    color: var(--vt-muted);
    white-space: nowrap;
}

.vt-chip--accent {
    border-color: var(--vt-accent-line);
    background: var(--vt-accent-soft);
    color: var(--vt-text);
}

.vt-chip--ok {
    color: var(--vt-success);
    border-color: color-mix(in srgb, var(--ds-success, #3fbf95) 42%, transparent);
}

.vt-chip--warn {
    color: var(--vt-warning);
    border-color: color-mix(in srgb, var(--ds-warning, #d9a441) 46%, transparent);
}

.vt-chip--danger {
    color: var(--vt-danger);
    border-color: color-mix(in srgb, var(--ds-danger, #d96a63) 52%, transparent);
}

.vt-chip--muted {
    color: var(--vt-subtle);
}

.vt-meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.vt-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vt-meta-item__label {
    font-size: var(--vt-text-2xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vt-subtle);
}

.vt-meta-item__value {
    font-size: var(--vt-text-sm, 0.875rem);
    color: var(--vt-text);
    overflow-wrap: anywhere;
}

.vt-note {
    margin: 0;
    padding: 12px 14px;
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.55;
    color: var(--vt-muted);
}

.vt-note--warn {
    border-color: color-mix(in srgb, var(--ds-warning, #d9a441) 46%, transparent);
    color: var(--vt-text);
}

.vt-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Timeline
   --------------------------------------------------------------------------- */

.vt-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.vt-timeline__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 0 22px 28px;
    border-left: 1px solid var(--ds-border, var(--border-soft));
    min-width: 0;
}

.vt-timeline__item:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.vt-timeline__marker {
    position: absolute;
    left: -6px;
    top: 3px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--ds-border-strong, var(--border-strong));
    background: var(--ds-canvas, var(--bg-primary));
}

.vt-timeline__item.is-done .vt-timeline__marker {
    border-color: var(--vt-success);
    background: var(--vt-success);
}

.vt-timeline__item.is-current .vt-timeline__marker {
    border-color: var(--vt-accent);
    background: var(--vt-accent);
}

.vt-timeline__item.is-blocked .vt-timeline__marker {
    border-color: var(--vt-danger);
    background: var(--vt-danger);
}

.vt-timeline__title {
    margin: 0;
    font-size: var(--vt-text-base, 1rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
}

.vt-timeline__meta {
    font-size: var(--vt-text-xs, 0.8125rem);
    color: var(--vt-subtle);
    font-variant-numeric: tabular-nums;
}

.vt-timeline__body {
    margin: 0;
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.58;
    color: var(--vt-muted);
    max-width: 70ch;
}

/* ---------------------------------------------------------------------------
   Proposal
   --------------------------------------------------------------------------- */

.vt-proposal {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
    max-width: 860px;
    margin: 0 auto;
    min-width: 0;
}

.vt-proposal__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: var(--vt-border);
    min-width: 0;
}

.vt-proposal__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.012em;
    color: var(--vt-text);
}

.vt-proposal__summary {
    margin: 0;
    max-width: 70ch;
    font-size: var(--vt-text-base, 1rem);
    line-height: 1.65;
    color: var(--vt-muted);
    white-space: pre-line;
}

.vt-proposal__block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.vt-proposal__block-title {
    margin: 0;
    font-size: var(--vt-text-2xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vt-subtle);
}

.vt-milestones {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.vt-milestone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 18px;
    padding: 16px 18px;
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    min-width: 0;
}

.vt-milestone__title {
    margin: 0;
    grid-column: 1;
    font-size: var(--vt-text-base, 1rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
}

.vt-milestone__amount {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--vt-text-base, 1rem);
    font-weight: 600;
    color: var(--vt-text);
    white-space: nowrap;
}

.vt-milestone__detail {
    margin: 0;
    grid-column: 1 / -1;
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.58;
    color: var(--vt-muted);
}

.vt-milestone__due {
    grid-column: 1 / -1;
    font-size: var(--vt-text-xs, 0.8125rem);
    color: var(--vt-subtle);
}

.vt-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.vt-member {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 14px 16px;
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    min-width: 0;
}

.vt-member__role {
    font-size: var(--vt-text-2xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vt-subtle);
}

.vt-member__name {
    font-size: var(--vt-text-base, 1rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
    overflow-wrap: anywhere;
}

.vt-member__note {
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.5;
    color: var(--vt-muted);
}

/* Fee disclosure. Required on every proposal, never collapsed behind a link. */
.vt-proposal__fee {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface-raised);
    min-width: 0;
}

.vt-proposal__fee-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--vt-text-lg, 1.125rem);
    font-weight: 600;
    color: var(--vt-text);
}

/* The sum is the answer: divided from its line items and visibly heavier, so
   a buyer scanning the money block reads three numbers as two inputs and one
   conclusion, not three identical rows. */
.vt-proposal__fee-total--sum {
    margin-top: 4px;
    padding-top: 10px;
    border-top: var(--vt-border);
    font-size: var(--vt-text-xl, 1.25rem);
    font-weight: 700;
}


.vt-proposal__fee-line {
    margin: 0;
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.55;
    color: var(--vt-muted);
}

.vt-proposal__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    min-width: 0;
}

.vt-proposal__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    border: var(--vt-border);
    border-radius: var(--vt-radius);
    background: var(--vt-surface);
    font-size: var(--vt-text-sm, 0.875rem);
    color: var(--vt-muted);
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Empty state. Used wherever there is genuinely nothing to show. Preferred
   over rendering a fabricated or zero-value metric.
   --------------------------------------------------------------------------- */

.vt-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: clamp(24px, 4vw, 40px);
    border: 1px dashed var(--ds-border, var(--border-soft));
    border-radius: var(--vt-radius);
    background: transparent;
    min-width: 0;
}

.vt-empty--center {
    align-items: center;
    text-align: center;
}

.vt-empty__title {
    margin: 0;
    font-size: var(--vt-text-lg, 1.125rem);
    font-weight: var(--vt-weight-medium, 600);
    color: var(--vt-text);
}

.vt-empty__body {
    margin: 0;
    max-width: 58ch;
    font-size: var(--vt-text-base, 1rem);
    line-height: 1.6;
    color: var(--vt-muted);
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .vt-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .vt-proposal {
        max-width: none;
    }
}

@media (max-width: 760px) {
    .vt-page {
        /* Mobile rhythm: one step down from the desktop 64, still on the
           4/8 scale. Equal everywhere on a given viewport is the rule. */
        gap: 48px;
    }

    .vt-hero {
        padding-top: 12px;
    }

    .vt-hero__title {
        max-width: none;
    }

    .vt-hero__actions > * {
        width: 100%;
    }

    .vt-section__head {
        align-items: flex-start;
    }

    /* The queue table is unreadable at phone width. Render both markups and
       swap here: no horizontal page scroll either way. */
    .vt-queue__table-wrap {
        display: none;
    }

    .vt-queue__cards {
        display: flex;
    }

    .vt-milestone {
        grid-template-columns: minmax(0, 1fr);
    }

    .vt-milestone__amount {
        grid-column: 1;
        grid-row: auto;
    }

    .vt-wizard__fact dd {
        text-align: left;
    }

    /* iOS zoom guard: the shell sets 16px on inputs at this width, keep any
       Teams control from undercutting it. */
    .vt-wizard input,
    .vt-wizard textarea,
    .vt-wizard select {
        font-size: var(--vt-text-base, 1rem);
    }
}

@media (max-width: 520px) {
    .vt-package-grid,
    .vt-proof-grid,
    .vt-steps,
    .vt-choice-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vt-queue__stats {
        gap: 12px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vt-package,
    .vt-proof-item,
    .vt-choice,
    .vt-faq__q::after {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Light mode.
   The shell's white-mode enforcer whitewashes backgrounds, borders and text
   with zero-specificity :where() rules carrying !important. Tokens above pick
   up the light values automatically; the rules below restore the few states
   whose meaning is carried by colour, and give dashed/soft surfaces a visible
   edge now that shadows are gone.
   --------------------------------------------------------------------------- */

html[data-color-mode="light"] body .vt-step,
html[data-color-mode="light"] body .vt-package,
html[data-color-mode="light"] body .vt-proof-item,
html[data-color-mode="light"] body .vt-faq__item,
html[data-color-mode="light"] body .vt-choice,
html[data-color-mode="light"] body .vt-milestone,
html[data-color-mode="light"] body .vt-member,
html[data-color-mode="light"] body .vt-queue-card,
html[data-color-mode="light"] body .vt-queue__table-wrap,
html[data-color-mode="light"] body .vt-hero__aside,
html[data-color-mode="light"] body .vt-wizard__review,
html[data-color-mode="light"] body .vt-proposal__fee,
html[data-color-mode="light"] body .vt-proposal__status,
html[data-color-mode="light"] body .vt-note {
    border-color: rgba(0, 0, 0, 0.18) !important;
}

html[data-color-mode="light"] body .vt-empty {
    border: 1px dashed rgba(0, 0, 0, 0.28) !important;
}

/* Selection and emphasis read as a solid black rule in light mode, matching
   the shell's monochrome treatment. */
html[data-color-mode="light"] body .vt-package--featured,
html[data-color-mode="light"] body .vt-choice.is-selected,
html[data-color-mode="light"] body .vt-choice[aria-pressed="true"],
html[data-color-mode="light"] body .vt-choice__input:checked + .vt-choice,
html[data-color-mode="light"] body .vt-sla-banner,
html[data-color-mode="light"] body .vt-proof-item__kind {
    border-color: #000 !important;
    background: #fff !important;
    color: #000 !important;
}

html[data-color-mode="light"] body .vt-proof-item__kind {
    background: #000 !important;
    color: #fff !important;
}

html[data-color-mode="light"] body .vt-proof-item--capability .vt-proof-item__kind,
html[data-color-mode="light"] body .vt-proof-item__kind--capability {
    background: #fff !important;
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
}

/* Status colour is information, not decoration: keep it in light mode. */
html[data-color-mode="light"] body .vt-sla--breached,
html[data-color-mode="light"] body .vt-chip--danger {
    border-color: #000 !important;
    border-width: 2px !important;
    color: #000 !important;
    font-weight: 700 !important;
}

html[data-color-mode="light"] body .vt-queue__row--breached td {
    background: rgba(0, 0, 0, 0.05) !important;
}

html[data-color-mode="light"] body .vt-timeline__item.is-done .vt-timeline__marker,
html[data-color-mode="light"] body .vt-timeline__item.is-current .vt-timeline__marker {
    background: #000 !important;
    border-color: #000 !important;
}

html[data-color-mode="light"] body .vt-timeline__item.is-blocked .vt-timeline__marker {
    background: #fff !important;
    border-color: #000 !important;
}

html[data-color-mode="light"] body .vt-step__index,
html[data-color-mode="light"] body .vt-process__item::before,
html[data-color-mode="light"] body .vt-list li::before {
    background: #fff !important;
    border-color: #000 !important;
    color: #000 !important;
}

html[data-color-mode="light"] body .vt-process__item::before {
    background: #000 !important;
}

/* =====================================================================
   Search hero + category rail (homepage front door).
   Lives HERE, not in public-surface.css, because the homepage renders
   these for every viewer, and a component whose styles load for only one
   audience ships as raw markup for the other (unsized viewBox SVGs then
   balloon to viewport width). Colors ride the --ds-* tokens, so the
   public surface resolves brand teal and the signed-in OS resolves its
   own accent; the STRUCTURE is identical on both.
   ===================================================================== */
.pub-search {
    display: flex;
    width: 100%;
    max-width: 640px;
    border: 1.5px solid var(--ds-text, currentColor);
    border-radius: var(--vt-radius, 12px);
    background: var(--ds-surface, rgba(255, 255, 255, 0.04));
    overflow: hidden;
}
.pub-search input[type="search"] {
    flex: 1;
    /* The shell gives every input a 12px radius. Inside a 12px overflow:hidden
       shell that reads as a double corner, and the field is edge-to-edge with
       the wrapper anyway, the wrapper owns the shape. */
    border-radius: 0;
    /* 165px at 320px wide was the old floor: the submit button (124px) nearly
       matched the field, and the placeholder was unreadable. The button drops
       to its icon below 30rem (see the narrow-viewport block) and the field
       keeps the room. */
    min-width: 8rem;
    border: 0;
    padding: 14px 16px;
    font-size: var(--vt-text-base, 1rem);
    font-family: inherit;
    color: var(--ds-text, inherit);
    background: transparent;
}
.pub-search input[type="search"]:focus {
    outline: none;
}
.pub-search input[type="search"]::placeholder {
    color: var(--ds-text-subtle, rgba(128, 128, 128, 0.8));
}
.pub-search button[type="submit"] {
    border: 0;
    padding: 0 22px;
    /* --ds-accent is the accent-as-TEXT value; behind near-white ink it
       measured 3.38:1 on the OS surface. --ds-accent-solid is the filled
       variant, dark enough to carry the ink. */
    background: var(--ds-accent-solid, var(--ds-accent, #164346));
    color: var(--ds-accent-ink, #ffffff);
    font-weight: 600;
    font-size: var(--vt-text-base, 1rem);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 180ms ease;
}
.pub-search button[type="submit"]:hover {
    background: var(--ds-accent-hover, var(--ds-accent-solid, #0f3134));
}
.pub-search button[type="submit"] svg {
    width: 18px;
    height: 18px;
    flex: none;
}
.pub-search:focus-within {
    box-shadow: 0 0 0 3px
        color-mix(in srgb, var(--ds-accent, #164346) 22%, transparent);
}
.pub-search-popular {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
.pub-search-popular a {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border: 1px solid var(--ds-border, rgba(128, 128, 128, 0.35));
    border-radius: 999px;
    color: var(--ds-text-muted, inherit);
    font-size: var(--vt-text-sm, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 120ms ease, color 120ms ease;
}
.pub-search-popular a:hover {
    border-color: var(--ds-accent, #164346);
    color: var(--ds-accent, #164346);
}
.pub-search-popular .pub-search-popular__label {
    color: var(--ds-text-subtle, rgba(128, 128, 128, 0.8));
    font-size: var(--vt-text-sm, 0.875rem);
}
.pub-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pub-cats a {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--ds-surface, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--ds-border, rgba(128, 128, 128, 0.35));
    border-radius: var(--vt-radius, 12px);
    color: var(--ds-text, inherit);
    font-weight: 600;
    font-size: var(--vt-text-sm, 0.875rem);
    line-height: 1.3;
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease;
}
.pub-cats a:hover {
    border-color: var(--ds-accent, #164346);
    transform: translateY(-2px);
}
.pub-cats svg {
    width: 26px;
    height: 26px;
    flex: none;
    color: var(--ds-accent, #164346);
}

/* =====================================================================
   Rhythm overrides for shell-owned homepage components. teams.css loads
   last on these pages, so equal-specificity rules here win: the proof
   strip joins the 16px grid gap, and the community hub joins the same
   64px section rhythm as the commercial zone above it (it sat 18px apart
   while commercial sections sat 76-108px, the single biggest "nothing
   is coherent" signal on the page).
   ===================================================================== */
.home-proof-strip {
    gap: 16px;
}

/* =====================================================================
   Section rhythm.

   .section-block is the SHELL's generic card primitive, and a commercial
   page uses it as a page section. Two things followed from that:

   1  It carries `padding: var(--surface-padding)`, which dev-os.css
      resolves to clamp(20px, 1.8vw, 26px), 23.04px at a 1280px viewport.
      Every section on the page therefore had the same off-scale 23px
      inset, while the hero (not a .section-block) had none. On the public
      surface, where the card's own background and border are stripped
      away, that inset is not reading as a card edge: it is just the H1 and
      the search field sitting 23px to the LEFT of every heading below
      them. The page had two left edges.

   2  `tone: "surface"`, requested by five of the nine home sections, was
      inert on BOTH surfaces. Public: public-surface.css sets
      `.section-block { background: transparent }` at higher specificity
      than `.section-surface`. Signed-in: dev-os.css restates the block
      background. So nine sections rendered identically, at identical
      padding, in identical order: the flattest possible page.

   Below: one left edge everywhere, and a band that actually bands.
   ===================================================================== */

/* One grid. Section content starts exactly where the hero starts. The card
   inset is restored per-surface below, only where a card is actually drawn. */
.vt-page > .section-block {
    padding-inline: 0;
    padding-block: 0;
}

/* Signed-in OS: sections ARE cards there (dev-os draws the panel), so give
   them back a padding from the scale instead of the 23.04px viewport clamp. */
html:not([data-surface="public"]) .vt-page > .section-block {
    padding: var(--vt-pad, 24px);
}

/* Public commercial surface: open bands on the canvas.
   `tone: "surface"` becomes a real full-bleed band. The bleed is painted
   with a spread box-shadow and clipped horizontally, box-shadow takes no
   part in layout, so unlike a 100vw pseudo-element this can never widen the
   document or fight the scrollbar. */
html[data-surface="public"] .vt-page > .section-surface {
    background: var(--ds-surface, #ffffff);
    box-shadow: 0 0 0 100vmax var(--ds-surface, #ffffff);
    clip-path: inset(0 -100vmax);
    /* Bands breathe more than open sections: this is where section heights
       stop being uniform. */
    padding-block: 64px;
    border-radius: 0;
}

/* Two bands in a row read as one band with a seam. The flex gap between them
   is canvas, so close it and let them merge deliberately. */
html[data-surface="public"] .vt-page > .section-surface + .section-surface {
    margin-top: -64px;
    padding-top: 0;
}

@media (max-width: 720px) {
    html[data-surface="public"] .vt-page > .section-surface {
        padding-block: 40px;
    }
    html[data-surface="public"] .vt-page > .section-surface + .section-surface {
        margin-top: -64px;
    }
}

/* Compact inline callout. A section whose whole content is "one sentence and
   one button" does not need the full section stack, laid out as a single
   bordered row it stops reading as a duplicate of the page's closing CTA. */
.vt-page > .section-block.vt-callout {
    display: flex;
    /* .section-block is `flex-direction: column` in the shell. Without this the
       row never happens and `flex: 1 1 24rem` on the header resolves against
       HEIGHT, giving the callout a 384px-tall empty column. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border: var(--vt-border);
    border-radius: var(--vt-radius, 12px);
    background: var(--vt-surface);
}
.vt-page > .section-block.vt-callout .section-header {
    margin-bottom: 0;
    flex: 1 1 24rem;
    min-width: 0;
}
.vt-page > .section-block.vt-callout h2 {
    font-size: var(--vt-text-xl, 1.25rem);
    line-height: 1.3;
}
.vt-page > .section-block.vt-callout .section-lede {
    font-size: var(--vt-text-sm, 0.875rem);
}
/* renderSection always emits a .section-body, even for the CTA sections whose
   body is "". An empty div still consumes a flex-gap slot, which is why the
   closing CTA had a 40px hole between its subtitle and its buttons. */
.vt-page .section-body:empty {
    display: none;
}
.vt-page > .section-block.vt-callout .section-actions {
    flex: 0 0 auto;
}

/* The commercial flow closes on a full-bleed band, and the shell then added
   253px of bare canvas between that band and the footer, which reads as the
   page running out of content rather than deliberately ending. Drop the
   trailing padding only when the band IS the last thing on the page; when the
   signed-in community zone renders below, .vt-page is no longer :last-child and
   the shell's spacing is left alone. */
html[data-surface="public"] main:has(> .home-container > .vt-page:last-child),
html[data-surface="public"] .home-container:has(> .vt-page:last-child) {
    padding-bottom: 0;
}

/* Narrow viewports: the search button gives up its label so the field keeps
   enough room to show a placeholder. The icon and the accessible name stay. */
@media (max-width: 30rem) {
    .pub-search button[type="submit"] {
        padding: 0 16px;
    }
    .pub-search button[type="submit"] > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
}
.home-container > :is(.hub-hero, .hub-announcement, .hub-latest-grid, .hub-section, .promo-card) {
    margin-top: 64px;
    margin-bottom: 0;
}
.home-container > :is(.hub-hero, .hub-announcement, .hub-latest-grid, .hub-section, .promo-card):first-child {
    margin-top: 0;
}
/* =====================================================================
   Type ownership on a commercial page.

   The shell owns two blanket rules that outrank every single-class
   component rule in this file:

     .section-block p  { font-size: var(--text-size-base) }   (0,1,1)
     @media (max-width: 760px) { .section-block p { 0.94rem } }

   --text-size-base is 0.98rem, so ALL card body copy on this page rendered
   at 15.68px no matter what the component asked for, under the 16px body
   floor, and the reason the page had a "everything is the same slightly
   too small grey" texture. Two moves, no !important:

     1  point the blanket rule at the scale, so unclassed paragraphs land
        on 16px instead of 15.68px;
     2  restate the components that are deliberately NOT body size at
        (0,2,0), which outranks (0,1,1).
   ===================================================================== */
.vt-page {
    --text-size-base: var(--vt-text-base, 1rem);
    --text-size-sm: var(--vt-text-sm, 0.875rem);
}

.vt-page :is(.hero-description, .section-lede, .vt-section__lede, .vt-hero__body) {
    font-size: var(--vt-text-lg, 1.125rem);
    line-height: 1.6;
}

.vt-page
    :is(
        .vt-package__price-note,
        .vt-proof__note,
        .vt-choice__detail,
        .vt-member__note,
        .vt-milestone__detail,
        .vt-timeline__body,
        .vt-note,
        .vt-queue__note,
        .vt-sla-banner,
        .vt-proposal__status,
        .vt-wizard__fact
    ) {
    font-size: var(--vt-text-sm, 0.875rem);
}

.vt-page :is(.vt-package__flag, .vt-milestone__due, .vt-timeline__meta) {
    font-size: var(--vt-text-xs, 0.8125rem);
}

/* Inside a section: heading block to body is one step (24px); the heading's
   own title-to-subtitle gap is half a step (12px). */
.vt-section__heading,
.section-block .section-header {
    margin-bottom: 24px;
}
.vt-section__heading > * + *,
.section-block .section-header > * + * {
    margin-top: 12px;
}