@charset "UTF-8";
/* ==========================================================================
   Skiwo UI — Design Tokens (base / default skin)
   The reusable token CONTRACT. Components reference var(--token) only — never a
   hard-coded value. Per-product themes override these var VALUES (one file, no
   forked stylesheet); dark theme overrides under [data-theme="dark"] at bottom.

   Structure + values lifted from the bemywords design handoff
   (the source handoff files have since been removed from docs/). The
   violet --brand is the catalog's PLACEHOLDER default skin; a dedicated neutral
   Skiwo palette swaps in here later without touching any component.
   ========================================================================== */
:root {
  /* ---- Brand (violet — placeholder default skin) ---- */
  --brand: #5B5BD6; /* primary actions, active nav, focus ring, links */
  --brand-hover: #4B4BC4; /* hover/pressed on primary */
  --brand-ink: #4B4BC4; /* brand-colored text on light bg */
  --brand-tint: #EEEDFB; /* active nav bg, icon chips */
  --brand-tint-2: #F4F4FD; /* selected sub-item bg, subtle brand fill */
  --brand-tint-3: #F3EEFC; /* zone bg accents */
  --brand-avatar-bg: #E7E7FA; /* avatar circle bg */
  --brand-border: #D7D6F6; /* brand-tinted hairline (ghost-button outline) */
  --brand-ring: rgba(91,91,214,.12); /* focus ring around active input */
  --brand-deep: #3F3FA8; /* the accent taken deep: chrome stripe, masthead */
  --brand-deep-ink: #FFFFFF; /* text on the deep band */
  --brand-deep-muted: #BFBFE4; /* dim text on the deep band */
  /* ---- The nav rail, both of its faces ----
     A workspace can name these two outright in Branding (2026-09-11); left
     unnamed they are the accent taken tint-ward and deep-ward, which is what
     the chrome derived for itself before. The values here are the default
     palette's, for the pages that carry no workspace palette at all. */
  --sidebar: #DBD4FC; /* the expanded rail */
  --sidebar-ink: #000000; /* labels on it */
  --sidebar-muted: #535160; /* idle labels and icons */
  --sidebar-line: #BCB6D9; /* group dividers */
  --sidebar-accent: #5237DD; /* the active row */
  --sidebar-collapsed: #442EB8; /* the collapsed stripe */
  --sidebar-collapsed-ink: #FFFFFF;
  --sidebar-collapsed-muted: #ABA1DF;
  --sidebar-collapsed-line: #6958C6;
  --sidebar-collapsed-accent: #C0B3FB;
  /* ---- Neutrals / surfaces ---- */
  --bg-app: #FBFAFE; /* app canvas behind cards: near-white, faint lilac */
  --surface: #FFFFFF; /* cards, bars, inputs */
  --surface-2: #FAFBFC; /* subtle raised/inset (filter bars, source cells) */
  --surface-3: #FBFBFC; /* read-only cell bg */
  --surface-light-violet: #FAFAFE; /* active editor-row wash (KeyRow) */
  /* ---- Borders / dividers (light -> strong) ---- */
  --hairline: #F1F2F4; /* in-grid row dividers */
  --border-1: #F0F1F4; /* faint section dividers */
  --border-2: #EAECF0; /* default card/bar border */
  --border-3: #E8EAEF; /* card border (slightly stronger) */
  --border-4: #E4E6EB; /* control/input border */
  /* ---- Text ---- */
  --text: #1B1D27; /* headings, primary values */
  --text-2: #2A2D38; /* strong body */
  --text-3: #3A3D49; /* read-only/source text */
  --text-mid: #4A4E5A; /* secondary labels, ghost-button text */
  --text-muted: #5A5E6B; /* muted body */
  --text-faint: #8A8F9C; /* meta, placeholders */
  --text-faint2: #9499A6; /* keys, captions, disabled */
  --on-brand: #FFFFFF; /* fg on a solid brand/coloured fill (primary btn, done marker) — stays white in dark too */
  --icon-faint: #A9AEBA; /* default stroke-icon color in lists */
  /* ---- Semantic (status) — each has ink + bar + tint(bg) ---- */
  --ok: #1F8A5B;
  --ok-bar: #27a36b;
  --ok-tint: #E6F4EC; /* Approved / live / 100% */
  --info: #3A6EA5;
  --info-bar: #4581c2;
  --info-tint: #E8F0F8; /* AI draft / in-progress / mid */
  --warn: #9a6a17;
  --warn-bar: #cf982f;
  --warn-tint: #FBF1DF; /* Needs review / low coverage */
  --warn-strong:#c79a3a; /* amber editor border for review state */
  --danger: #C2410C;
  --danger-ink:#C06868;
  --danger-tint: #FBE9E2; /* Empty / Untranslated */
  --danger-cell:#FDF6F6; /* untranslated grid-cell bg */
  --destruct: #D14343; /* destructive actions (delete, remove) */
  /* ---- Shields (UI::Shield): four hue families for a badge wall, 0 = grey for
     a badge not yet earned. Each family is ink (stroke), deep (glyph), tint (face). ---- */
  --shield-1: #5B5BD6;
  --shield-1-deep: #3F3FA8;
  --shield-1-tint: #EEEDFB;
  --shield-2: #12857A;
  --shield-2-deep: #0B6B61;
  --shield-2-tint: #E3F4F1;
  --shield-3: #B45309;
  --shield-3-deep: #94450A;
  --shield-3-tint: #FBEFDD;
  --shield-4: #2569AC;
  --shield-4-deep: #1D5C96;
  --shield-4-tint: #E4EFFA;
  --shield-0: #B9B6CC;
  --shield-0-deep: #A5A2BC;
  --shield-0-tint: #FFFFFF;
  /* ---- Mode badges ---- */
  --mode-script-ink: #5B5BD6;
  --mode-script-bg: #EEEDFB;
  --mode-standard-ink:#5A5E6B;
  --mode-standard-bg:#EEF0F3;
  /* ---- Candy hue set — avatars, tags, chart series; cycle in this order ---- */
  --candy-violet: #5B3DF5;
  --candy-pink: #DB2777;
  --candy-cyan: #0891B2;
  --candy-amber: #D97706;
  --candy-green: #0F9D76;
  --candy-yellow: #FFE066;
  /* ---- Typography (per-product token, not a fork) ---- */
  --font-ui: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-prose: "Hanken Grotesk", system-ui, sans-serif; /* auth rail, marketing prose */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* keys, IDs, code, numeric */
  --fs-display:36px;
  --fw-display:700; /* hero numbers — pricing amount, big stat */
  --fs-page: 22px;
  --fw-page: 700; /* page H1 */
  --fs-h2: 18px;
  --fw-h2: 700; /* card/section headings */
  --fs-title: 15px;
  --fw-title:600; /* card titles, nav items */
  --fs-read: 15.5px; /* text being JUDGED, not skimmed — a
   social post in the deck/composer/
   preview reads at the size it will be
   read at on the platform */
  --fs-body: 13.5px; /* default body / inputs */
  --fs-body-sm:13px;
  --fs-sm: 12.5px; /* secondary controls */
  --fs-meta: 12px; /* meta text */
  --fs-cap: 11px; /* captions, key mono */
  --fs-tiny: 10.5px;
  --fw-tiny: 600; /* status pills, tiny caps labels */
  --lh-tight: 1.4;
  --lh-body: 1.5;
  /* ---- Spacing scale (4px base) ---- */
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 10px;
  --s-5: 12px;
  --s-6: 14px;
  --s-7: 16px;
  --s-8: 18px;
  --s-9: 20px;
  --s-10: 24px;
  --s-11: 32px;
  --s-12: 36px; /* card-scale padding: the top of the scale */
  /* ---- Radii ---- */
  --r-mark: 5px; /* data marks & inline runs: bar caps, diff spans, inline focus rings */
  --r-chip: 8px; /* below control size: legend swatches, keycaps, small menu rows */
  --r-control: 12px; /* buttons, inputs, chips */
  --r-control-sm: 10px; /* small inline buttons */
  --r-card: 16px; /* cards */
  --r-card-lg: 20px; /* large panels */
  --r-pill: 999px;
  /* ---- Over the page, not in it: the modal scrim and the two warning rings.
     Every component that dims the page or rings a control reads these, so a
     workspace palette moves them with everything else. ---- */
  --scrim: rgba(20, 22, 40, .42);
  /* ---- The marked row -------------------------------------------------
     One row in a chart that has to read first however small it is: the AI
     column in a channel breakdown is twenty visits against three thousand,
     and a bar scaled honestly against the largest makes exactly that row
     invisible. Deliberately NOT --brand (the other bars wear it) and not a
     status ink (nothing is wrong). Arrived as a #db2777 literal inside
     UI::ChannelBars with no dark value; it is a token now, with one. */
  --mark: #DB2777;
  --ring-warn: rgba(199, 154, 58, .14);
  --ring-danger:rgba(209, 67, 67, .14);
  /* ---- Shadows ---- */
  --sh-card: 0 1px 2px rgba(16,18,30,.04); /* resting card */
  --sh-raise: 0 6px 20px rgba(16,18,30,.09); /* hover card */
  --sh-float: 0 14px 44px rgba(20,22,40,.12); /* modals, menus, popovers */
  --sh-btn: 0 2px 8px rgba(91,91,214,.35); /* primary button, brand-tinted (themes retint) */
  --sh-focus: 0 0 0 3px var(--brand-ring); /* focused control ring */
  --sh-brand: 0 10px 28px rgba(91, 91, 214, .18); /* a card lifted in the brand */
  /* ---- Layout constants ---- */
  --header-h: 60px;
  /* Rail geometry. SoftReply's numbers, promoted to the kit default
     2026-07-31 (Gautam: the LeftTopSideBottom products are one chrome, so the
     widths are the kit's, not each product's) — every product that had been
     redeclaring these now inherits them. */
  --sidebar-w: 216px;
  --sidebar-w-collapsed: 52px;
  --rail-w: 200px; /* the Folder column — a FLOOR; it grows to fit */
  --rail-w-max: 320px; /* …up to here, then labels ellipsize */
  --content-max: 1320px;
  --tap-min: 44px; /* minimum mobile hit target */
  --grid-row-h: 32px; /* dense table row height */
  /* ---- Gantt (UI::Gantt) structural constants — geometry only, no colour ---- */
  --gantt-label-w: 200px; /* width of the lane / header label column */
  --gantt-col-w: 34px; /* min width of one time-axis (day) column */
  --gantt-row-h: 30px; /* height of one bar track row */
  /* ---- Kanban (UI::Kanban) structural constants — geometry only, no colour ---- */
  --kanban-col-w: 288px; /* fixed width of one board column */
  --kanban-track-min: 64px; /* min height of a column's card track so an empty
   column still presents a droppable area */
  /* ---- Density — app-chrome spacing that scales comfortable (default) →
     compact. Set [data-density] on the AppShell root; the chrome reads THESE
     (never the raw scale) so a product flips density globally with no
     per-component overrides. Comfortable values equal the current look, so
     existing consumers see no change. Compact lives in the block at file end. */
  --dz-rail-pad: var(--s-5); /* UI::Sidebar outer padding */
  --dz-nav-pad-block: var(--s-2); /* UI::NavItem row padding (block axis) */
  --dz-nav-pad-inline: var(--s-5); /* UI::NavItem row padding (inline axis) */
  --dz-pagehead-gap: var(--s-9); /* UI::PageHeader space below the title row */
  --nt-detractor-ink: #7B3F28;
  --nt-detractor-bg: #FCE8F1;
  --nt-detractor-border: #ECD3CA;
  --nt-passive-ink: #4A5568;
  --nt-passive-bg: #F7FAFC;
  --nt-passive-border: #E2E8F0;
  --nt-promoter-ink: #276749;
  --nt-promoter-bg: #E5F6EB;
  --nt-promoter-border: #CFE6D9;
  --auth-rail-bg: #1B1D27;
  --auth-rail-ink: #FFFFFF;
  --auth-rail-ink-dim: rgba(255, 255, 255, 0.72);
  --auth-rail-accent: #FFFFFF;
  --auth-rail-glow: var(--brand);
  --auth-rail-card-bg: rgba(255, 255, 255, 0.06);
  --auth-rail-card-border: rgba(255, 255, 255, 0.12);
}

/* Dark theme: override token VALUES only — every component references vars, so
   this single mixin re-themes the whole UI. It is included twice: once for the
   reader who CHOSE dark, and once inside a media query for the reader who chose
   to follow their system, because a stored preference of "system" is not a
   value CSS can match on its own. */
[data-theme=dark] {
  --bg-app: #15161C;
  --surface: #1B1D27;
  --surface-2:#20222D;
  --surface-3:#20222D;
  --surface-light-violet:#201F33;
  /* --hairline and --border-1 were absent here until 2026-08-15, so the two
     FAINTEST light-mode dividers kept their light values (#F1F2F4 / #F0F1F4)
     in dark — which made every "faint" rule the brightest line on the page:
     table row hairlines, the cadence grid's hour rules, section dividers, 37
     files' worth. Faintest in light means faintest in dark. */
  --hairline: #242634;
  --border-1: #262837;
  --border-2: #2A2C38;
  --border-3: #2A2C38;
  --border-4: #313445;
  /* Native form controls (checkboxes, selects, scrollbars) draw themselves
     from the UA's colour scheme, not from our tokens — without this every
     checkbox in dark is a white box with a black tick. */
  color-scheme: dark;
  --text: #ECEDF2;
  --text-2: #D7D9E2;
  --text-3: #C2C5D1;
  --text-mid: #A3A7B5;
  --text-muted:#9499A6;
  --text-faint:#7C8090;
  --brand-tint:#262648;
  --brand-tint-2:#20203B;
  --brand-border:#33335A;
  /* The rail after dark, same derivation as light (see the light block). */
  --sidebar:#261F4C;
  --sidebar-ink:#FFFFFF;
  --sidebar-muted:#ADAABB;
  --sidebar-line:#443E65;
  --sidebar-accent:#9380F9;
  --sidebar-collapsed:#503CB9;
  --sidebar-collapsed-ink:#FFFFFF;
  --sidebar-collapsed-muted:#B0A7E0;
  --sidebar-collapsed-line:#7363C7;
  --sidebar-collapsed-accent:#CCC2FB;
  /* Semantic (status) — absent until 2026-08-15, so every ok/warn/danger TINT
     surface (ConfirmRow shells, Banner fills, stale-claim rows) stayed pale
     pastel in dark. Ink brightens, bar holds, tint goes deep. */
  --ok: #57C28A;
  --ok-bar: #2F8F5F;
  --ok-tint: #17281E;
  --info: #7BA7D4;
  --info-bar: #4581C2;
  --info-tint: #17222E;
  --warn: #D8AE5A;
  --warn-bar: #CF982F;
  --warn-tint: #2A2213;
  --danger: #E07856;
  --danger-ink:#D98A8A;
  --danger-tint: #2E1815;
  --danger-cell:#261418;
  /* Shields: ink brightens a step, the face goes deep so the glyph still reads. */
  --shield-1: #8A8AE8;
  --shield-1-deep: #C9C9F2;
  --shield-1-tint: #23234A;
  --shield-2: #3FB5A8;
  --shield-2-deep: #A8E4DC;
  --shield-2-tint: #10302C;
  --shield-3: #D9853A;
  --shield-3-deep: #F3C99A;
  --shield-3-tint: #33220F;
  --shield-4: #5F97D0;
  --shield-4-deep: #B7D2EE;
  --shield-4-tint: #12283D;
  --shield-0: #6F6C86;
  --shield-0-deep: #8B889F;
  --shield-0-tint: #1B1B24;
  /* The page under a modal is already dark, so the scrim has to be deeper to
     read as one at all. */
  --scrim: rgba(0, 0, 0, .62);
  /* Lifted for dark: the light value sits at 4.0:1 on #1B1D27 and this is a
     bar a reader has to find, not read. */
  --mark: #F472B6;
  --ring-warn: rgba(216, 174, 90, .18);
  --ring-danger:rgba(224, 120, 86, .18);
}

@media (prefers-color-scheme: dark) {
  [data-theme=system] {
    --bg-app: #15161C;
    --surface: #1B1D27;
    --surface-2:#20222D;
    --surface-3:#20222D;
    --surface-light-violet:#201F33;
    /* --hairline and --border-1 were absent here until 2026-08-15, so the two
       FAINTEST light-mode dividers kept their light values (#F1F2F4 / #F0F1F4)
       in dark — which made every "faint" rule the brightest line on the page:
       table row hairlines, the cadence grid's hour rules, section dividers, 37
       files' worth. Faintest in light means faintest in dark. */
    --hairline: #242634;
    --border-1: #262837;
    --border-2: #2A2C38;
    --border-3: #2A2C38;
    --border-4: #313445;
    /* Native form controls (checkboxes, selects, scrollbars) draw themselves
       from the UA's colour scheme, not from our tokens — without this every
       checkbox in dark is a white box with a black tick. */
    color-scheme: dark;
    --text: #ECEDF2;
    --text-2: #D7D9E2;
    --text-3: #C2C5D1;
    --text-mid: #A3A7B5;
    --text-muted:#9499A6;
    --text-faint:#7C8090;
    --brand-tint:#262648;
    --brand-tint-2:#20203B;
    --brand-border:#33335A;
    /* The rail after dark, same derivation as light (see the light block). */
    --sidebar:#261F4C;
    --sidebar-ink:#FFFFFF;
    --sidebar-muted:#ADAABB;
    --sidebar-line:#443E65;
    --sidebar-accent:#9380F9;
    --sidebar-collapsed:#503CB9;
    --sidebar-collapsed-ink:#FFFFFF;
    --sidebar-collapsed-muted:#B0A7E0;
    --sidebar-collapsed-line:#7363C7;
    --sidebar-collapsed-accent:#CCC2FB;
    /* Semantic (status) — absent until 2026-08-15, so every ok/warn/danger TINT
       surface (ConfirmRow shells, Banner fills, stale-claim rows) stayed pale
       pastel in dark. Ink brightens, bar holds, tint goes deep. */
    --ok: #57C28A;
    --ok-bar: #2F8F5F;
    --ok-tint: #17281E;
    --info: #7BA7D4;
    --info-bar: #4581C2;
    --info-tint: #17222E;
    --warn: #D8AE5A;
    --warn-bar: #CF982F;
    --warn-tint: #2A2213;
    --danger: #E07856;
    --danger-ink:#D98A8A;
    --danger-tint: #2E1815;
    --danger-cell:#261418;
    /* Shields: ink brightens a step, the face goes deep so the glyph still reads. */
    --shield-1: #8A8AE8;
    --shield-1-deep: #C9C9F2;
    --shield-1-tint: #23234A;
    --shield-2: #3FB5A8;
    --shield-2-deep: #A8E4DC;
    --shield-2-tint: #10302C;
    --shield-3: #D9853A;
    --shield-3-deep: #F3C99A;
    --shield-3-tint: #33220F;
    --shield-4: #5F97D0;
    --shield-4-deep: #B7D2EE;
    --shield-4-tint: #12283D;
    --shield-0: #6F6C86;
    --shield-0-deep: #8B889F;
    --shield-0-tint: #1B1B24;
    /* The page under a modal is already dark, so the scrim has to be deeper to
       read as one at all. */
    --scrim: rgba(0, 0, 0, .62);
    /* Lifted for dark: the light value sits at 4.0:1 on #1B1D27 and this is a
       bar a reader has to find, not read. */
    --mark: #F472B6;
    --ring-warn: rgba(216, 174, 90, .18);
    --ring-danger:rgba(224, 120, 86, .18);
  }
}
/* Density — compact preference. Set [data-density="compact"] on the AppShell
   root (UI::AppShell density: :compact, or the ui-density controller at runtime);
   --header-h + the chrome tokens tighten and the whole shell follows. Comfortable
   is the :root default. NOTE: --tap-min (NavItem touch target) intentionally does
   NOT shrink — compact is a desktop spacing preference, not a hit-target override
   (WCAG 2.5.8 target size stays satisfied). */
[data-density=compact] {
  --header-h: 50px;
  --dz-rail-pad: var(--s-3);
  --dz-nav-pad-block: var(--s-1);
  --dz-nav-pad-inline: var(--s-4);
  --dz-pagehead-gap: var(--s-5);
}

/* The kit is designed for the border-box model; on most surfaces Bootstrap
   supplies it as the substrate. A page loading skiwo_ui WITHOUT Bootstrap
   (PrepperShaker's paid shell) fell back to content-box and every fixed-width
   element grew by its padding — the collapsed 52px sidebar rendered 76px and
   clipped against the content (2026-08-02). Scoped to the kit root; identical
   to Bootstrap's own reset, so co-loading changes nothing. */
.skiwo-ui,
.skiwo-ui *,
.skiwo-ui *::before,
.skiwo-ui *::after {
  box-sizing: border-box;
}

.theme-soft-reply.vs-console {
  --header-h: 56px;
  --rail-w: 352px;
  --rail-w-max: 352px;
  --content-max: none;
  --rail-bg: var(--brand);
  --rail-edge: color-mix(in srgb, var(--on-brand) 18%, transparent);
  --rail-ink: var(--on-brand);
  --rail-ink-idle: color-mix(in srgb, var(--on-brand) 78%, transparent);
  --rail-icon: color-mix(in srgb, var(--on-brand) 78%, transparent);
  --rail-hover-bg: color-mix(in srgb, var(--on-brand) 10%, transparent);
  --rail-active-bg: color-mix(in srgb, var(--on-brand) 16%, transparent);
  --rail-active-ink: var(--on-brand);
  --rail-active-icon: var(--candy-yellow);
  --rail-toggle-bg: color-mix(in srgb, var(--on-brand) 10%, transparent);
  --sidebar-ink: var(--on-brand);
}
.theme-soft-reply.vs-console .skiwo-app-shell__content {
  padding: 28px 36px;
}
.theme-soft-reply.vs-console.vs-console--calm .skiwo-app-shell__content {
  padding: 56px 40px;
}
.theme-soft-reply.vs-console .vs-today__answer .skiwo-empty-state {
  padding-block: 8px;
}
.theme-soft-reply.vs-console .vs-today__caps {
  margin: 32px 0 10px;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-today__since .skiwo-list-item__leading .vs-door__mark,
.theme-soft-reply.vs-console .vs-burning .vs-door__mark {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  display: inline-block;
}
.theme-soft-reply.vs-console .vs-burning {
  padding: 28px 20px;
}
.theme-soft-reply.vs-console .vs-burning .skiwo-section-head {
  margin-block-end: 14px;
}
.theme-soft-reply.vs-console .vs-burning .skiwo-tabs {
  margin-block-end: 18px;
}
.theme-soft-reply.vs-console .vs-burning .vs-today__caps {
  margin-block-start: 24px;
}
.theme-soft-reply.vs-console .vs-burning__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.theme-soft-reply.vs-console .vs-burning__state {
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--text);
}
.theme-soft-reply.vs-console .vs-burning .vs-tone--danger {
  color: var(--danger);
  font-weight: 700;
}
.theme-soft-reply.vs-console .vs-burning .vs-tone--warn {
  color: var(--warn);
  font-weight: 700;
}
.theme-soft-reply.vs-console .vs-burning .vs-tone--ok {
  color: var(--ok);
}
.theme-soft-reply.vs-console .vs-burning__confirm {
  display: contents;
}
.theme-soft-reply.vs-console .vs-burning__confirm .skiwo-field {
  margin: 0;
  flex: 1 1 40%;
  min-inline-size: 0;
}
.theme-soft-reply.vs-console .vs-incident__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-block-end: 6px;
}
.theme-soft-reply.vs-console .vs-incident__lead {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.theme-soft-reply.vs-console .vs-incident__lead .skiwo-section-head {
  margin: 0;
}
.theme-soft-reply.vs-console .vs-incident__lead .skiwo-section-head__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
.theme-soft-reply.vs-console .vs-incident__product {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-end: 6px;
  font-size: 14px;
  font-weight: 700;
}
.theme-soft-reply.vs-console .vs-incident__acts {
  flex: none;
  margin-inline-start: auto;
}
.theme-soft-reply.vs-console .vs-incident__course {
  margin: 0 0 24px;
  font-size: var(--fs-body-sm);
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-incident .skiwo-tabs {
  margin-block-end: 20px;
}
.theme-soft-reply.vs-console .vs-incident__body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.theme-soft-reply.vs-console .vs-incident__timeline {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.theme-soft-reply.vs-console .vs-incident__aside {
  flex: none;
  inline-size: 340px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 1100px) {
  .theme-soft-reply.vs-console .vs-incident__body {
    flex-direction: column;
  }
  .theme-soft-reply.vs-console .vs-incident__aside {
    inline-size: 100%;
  }
}
.theme-soft-reply.vs-console .vs-incident__significance {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}
.theme-soft-reply.vs-console .vs-incident__copy {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}
.theme-soft-reply.vs-console .vs-promises {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.theme-soft-reply.vs-console .vs-promises__list {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.theme-soft-reply.vs-console .vs-promises__list .skiwo-card {
  overflow-x: auto;
}
.theme-soft-reply.vs-console .vs-promises__aside {
  flex: none;
  inline-size: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1180px) {
  .theme-soft-reply.vs-console .vs-promises {
    flex-direction: column;
  }
  .theme-soft-reply.vs-console .vs-promises__aside {
    inline-size: 100%;
  }
}
.theme-soft-reply.vs-console .vs-promises__name {
  font-weight: 600;
  color: inherit;
  text-decoration: none;
}
.theme-soft-reply.vs-console .vs-promises__heard {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}
.theme-soft-reply.vs-console .vs-promise__product {
  margin-block-end: 4px;
  font-size: 12.5px;
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-promise .skiwo-section-head {
  margin: 0 0 14px;
}
.theme-soft-reply.vs-console .vs-promise .skiwo-section-head__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
}
.theme-soft-reply.vs-console .vs-promise__finding {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block: var(--s-5);
}
.theme-soft-reply.vs-console .vs-promise__incidents {
  list-style: none;
  margin: 14px 0 0;
  padding: 12px 0 0;
  border-block-start: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.theme-soft-reply.vs-console .vs-promise__incidents a {
  color: var(--text-mid);
  text-decoration: none;
}
.theme-soft-reply.vs-console .vs-promise__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: 14px;
}
.theme-soft-reply.vs-console .vs-setup {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.theme-soft-reply.vs-console .vs-setup__choices {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.theme-soft-reply.vs-console .vs-setup__choices legend {
  font-size: 12.5px;
  font-weight: 600;
  margin-block-end: 5px;
}
.theme-soft-reply.vs-console .vs-setup__row {
  display: flex;
  gap: 10px;
}
.theme-soft-reply.vs-console .vs-setup__row > * {
  flex: 1 1 50%;
  min-inline-size: 0;
}
.theme-soft-reply.vs-console .vs-snippet {
  max-inline-size: 760px;
}
.theme-soft-reply.vs-console .vs-snippet .vs-incident__product a {
  color: inherit;
  text-decoration: none;
}
.theme-soft-reply.vs-console .vs-snippet .skiwo-code + .skiwo-btn {
  margin-block-start: 12px;
}
.theme-soft-reply.vs-console .vs-snippet .skiwo-tabs {
  margin-block-end: 0;
}
.theme-soft-reply.vs-console .vs-snippet__wait {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block: 22px 16px;
  padding: 16px 20px;
  border: 1px dashed var(--border-3);
  border-radius: var(--r-control);
  font-size: var(--fs-body-sm);
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-snippet__dot {
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--r-pill);
  background: var(--border-3);
  flex: none;
}
.theme-soft-reply.vs-console .vs-snippet__dot.is-on {
  background: var(--ok);
}
.theme-soft-reply.vs-console .vs-snippet__checking {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.theme-soft-reply.vs-console .vs-woken {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}
.theme-soft-reply.vs-console .vs-woken__people {
  flex: none;
  inline-size: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.theme-soft-reply.vs-console .vs-woken__ladders {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1180px) {
  .theme-soft-reply.vs-console .vs-woken {
    flex-direction: column;
  }
  .theme-soft-reply.vs-console .vs-woken__people {
    inline-size: 100%;
  }
}
.theme-soft-reply.vs-console .vs-woken__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.theme-soft-reply.vs-console .vs-woken__replace {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
  margin-block-start: var(--s-4);
}
.theme-soft-reply.vs-console .vs-woken__replace .skiwo-field {
  margin: 0;
  flex: 1 1 200px;
}
.theme-soft-reply.vs-console .vs-person__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 10px;
}
.theme-soft-reply.vs-console .vs-person__name {
  font-size: 14px;
  font-weight: 700;
}
.theme-soft-reply.vs-console .vs-person__meta {
  font-size: var(--fs-meta);
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-person__channels {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}
.theme-soft-reply.vs-console .vs-person__channels i {
  inline-size: 18px;
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-person__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-start: 12px;
}
.theme-soft-reply.vs-console .vs-person--gone {
  opacity: 0.72;
}
.theme-soft-reply.vs-console .vs-ladder__orders {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-block: 16px;
}
.theme-soft-reply.vs-console .vs-ladder__orders > * {
  flex: 1 1 300px;
  min-inline-size: 0;
}
.theme-soft-reply.vs-console .vs-ladder--unused {
  opacity: 0.6;
}
.theme-soft-reply.vs-console .vs-workspace {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-inline-size: 1060px;
}
@media (max-width: 980px) {
  .theme-soft-reply.vs-console .vs-workspace {
    grid-template-columns: 1fr;
  }
}
.theme-soft-reply.vs-console .vs-workspace__label {
  margin: 14px 0 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.theme-soft-reply.vs-console .vs-workspace__mono {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}
.theme-soft-reply.vs-console .vs-workspace__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
  margin-block-start: var(--s-5);
}
.theme-soft-reply.vs-console .vs-workspace__inline .skiwo-field {
  margin: 0;
  flex: 1 1 160px;
}
.theme-soft-reply.vs-console .vs-product__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 6px;
  cursor: pointer;
  list-style: none;
}
.theme-soft-reply.vs-console .vs-product__row::-webkit-details-marker {
  display: none;
}
.theme-soft-reply.vs-console .vs-product__row--new {
  color: var(--brand-ink);
  font-weight: 600;
  font-size: var(--fs-body-sm);
}
.theme-soft-reply.vs-console .vs-product__mark {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 9px;
  background: var(--text-mid);
  color: var(--on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  flex: none;
}
.theme-soft-reply.vs-console .vs-product__who {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
}
.theme-soft-reply.vs-console .vs-product__name {
  font-size: 13.5px;
  font-weight: 700;
}
.theme-soft-reply.vs-console .vs-product__line {
  font-size: var(--fs-meta);
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-product__hex {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-product__fields {
  margin: 0 0 8px 44px;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.theme-soft-reply.vs-console .vs-index {
  max-inline-size: 1120px;
}
.theme-soft-reply.vs-console .vs-index .skiwo-card {
  overflow-x: auto;
}
.theme-soft-reply.vs-console .vs-index__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block: 18px 10px;
}
.theme-soft-reply.vs-console .vs-index__jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .vs-index__jump-label {
  margin-inline-end: var(--s-2);
}
.theme-soft-reply.vs-console .vs-index__number {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: inherit;
  text-decoration: none;
}
.theme-soft-reply.vs-console .vs-filing {
  max-inline-size: 760px;
}
.theme-soft-reply.vs-console .vs-filing .vs-incident__product a {
  color: inherit;
  text-decoration: none;
}
.theme-soft-reply.vs-console .vs-filing__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-block-start: var(--s-5);
}
.theme-soft-reply.vs-console .vs-filing__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block: var(--s-5);
}
.theme-soft-reply.vs-console .vs-burning__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block: 18px 16px;
}
.theme-soft-reply.vs-console .vs-burning__filters-note {
  font-size: 12.5px;
  color: var(--text-mid);
}
.theme-soft-reply.vs-console .skiwo-global-search {
  max-inline-size: 360px;
}
.theme-soft-reply.vs-console .vs-rail-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-inline-size: 0;
}
.theme-soft-reply.vs-console .vs-rail-account__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sidebar-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-soft-reply.vs-door,
.theme-soft-reply.vs-sheet {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 20px 16px 28px;
  max-width: 480px;
  margin-inline: auto;
}
.theme-soft-reply.vs-door .vs-door__act,
.theme-soft-reply.vs-sheet .vs-door__act {
  position: sticky;
  bottom: 16px;
}
.theme-soft-reply.vs-door .vs-sheet__body,
.theme-soft-reply.vs-sheet .vs-sheet__body {
  display: contents;
}

.theme-soft-reply.vs-door .vs-door__sheet,
.theme-soft-reply.vs-sheet .vs-door__sheet {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-block: 6px 28px;
}
.theme-soft-reply.vs-door .vs-door__expiry,
.theme-soft-reply.vs-sheet .vs-door__expiry {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mid);
}
.theme-soft-reply.vs-door .vs-door__product,
.theme-soft-reply.vs-sheet .vs-door__product {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
}
.theme-soft-reply.vs-door .vs-door__mark,
.theme-soft-reply.vs-sheet .vs-door__mark {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  background: var(--text-mid);
  flex: none;
}
.theme-soft-reply.vs-door .vs-door__ref,
.theme-soft-reply.vs-door .vs-door__opened,
.theme-soft-reply.vs-sheet .vs-door__ref,
.theme-soft-reply.vs-sheet .vs-door__opened {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mid);
}
.theme-soft-reply.vs-door .vs-door__opened,
.theme-soft-reply.vs-sheet .vs-door__opened {
  margin-inline-start: auto;
}
.theme-soft-reply.vs-door .vs-door__caps,
.theme-soft-reply.vs-sheet .vs-door__caps {
  margin: 0 0 10px;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mid);
}
.theme-soft-reply.vs-door .vs-door__woken,
.theme-soft-reply.vs-sheet .vs-door__woken {
  border-block-start: 1px solid var(--hairline);
  padding-block-start: 16px;
}
.theme-soft-reply.vs-door .vs-door__severity-note,
.theme-soft-reply.vs-sheet .vs-door__severity-note {
  margin-inline-start: 10px;
  color: var(--text-mid);
}
.theme-soft-reply.vs-door .skiwo-section-head__title,
.theme-soft-reply.vs-sheet .skiwo-section-head__title {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.22;
  text-wrap: pretty;
}
.theme-soft-reply.vs-door .vs-door__act,
.theme-soft-reply.vs-sheet .vs-door__act {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.theme-soft-reply.vs-door .vs-door__act .skiwo-btn,
.theme-soft-reply.vs-sheet .vs-door__act .skiwo-btn {
  inline-size: 100%;
  justify-content: center;
}
.theme-soft-reply.vs-door .vs-door__act .skiwo-prose,
.theme-soft-reply.vs-sheet .vs-door__act .skiwo-prose {
  text-align: center;
  color: var(--text-mid);
}

.theme-soft-reply.vs-door {
  color-scheme: dark;
  --bg-app: #17131F;
  --surface: #201A2E;
  --surface-2: #201A2E;
  --text: #F2EFFA;
  --text-2: #F2EFFA;
  --text-mid: #B7AFD1;
  --text-muted: #B7AFD1;
  --text-faint: #B7AFD1;
  --border-2: #322A47;
  --border-3: #4A3F68;
  --hairline: #322A47;
  --brand: #5B3DF5;
  --on-brand: #FFFFFF;
  --warn: #FFD466;
  --warn-tint: #3A2E14;
  --danger: #E75A9B;
  --danger-tint: #3A1626;
  --ok: #5FD9A2;
  --ok-tint: #123526;
  background: var(--bg-app);
  color: var(--text);
}

.theme-soft-reply.vs-document {
  background: var(--bg-app);
  color: var(--text);
}
.theme-soft-reply.vs-document .vs-document__page {
  max-inline-size: 820px;
  margin-inline: auto;
  padding: 40px 32px 56px;
}
.theme-soft-reply.vs-document .vs-document__head {
  margin-block-end: 24px;
}
.theme-soft-reply.vs-document .vs-document__report {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mid);
}
.theme-soft-reply.vs-document .skiwo-section-head {
  margin-block: 28px 10px;
}
.theme-soft-reply.vs-document .vs-document__quote {
  font-style: italic;
}
.theme-soft-reply.vs-document .vs-document__meta {
  color: var(--text-mid);
  font-size: var(--fs-meta);
}
.theme-soft-reply.vs-document .vs-document__foot {
  margin-block-start: 36px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--hairline);
  font-size: var(--fs-body-sm);
}
.theme-soft-reply.vs-document .vs-document__foot p {
  margin: 0 0 4px;
}
@media print {
  .theme-soft-reply.vs-document {
    background: white;
    color: black;
  }
  .theme-soft-reply.vs-document .vs-document__page {
    max-inline-size: none;
    padding: 0;
  }
  .theme-soft-reply.vs-document .skiwo-btn, .theme-soft-reply.vs-document .skiwo-page-header__actions {
    display: none;
  }
  .theme-soft-reply.vs-document .skiwo-section-head {
    break-after: avoid;
  }
  .theme-soft-reply.vs-document table {
    break-inside: auto;
  }
  .theme-soft-reply.vs-document tr {
    break-inside: avoid;
  }
  .theme-soft-reply.vs-document .vs-document__foot {
    break-inside: avoid;
  }
}

.theme-soft-reply.vs-marketing {
  background: var(--bg-app);
  color: var(--text);
}
.theme-soft-reply.vs-marketing .vs-marketing__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 48px;
  border-block-end: 1px solid var(--hairline);
  background: var(--surface);
}
.theme-soft-reply.vs-marketing .vs-marketing__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: inherit;
  text-decoration: none;
}
.theme-soft-reply.vs-marketing .vs-marketing__mark {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  background: var(--brand);
  color: var(--on-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.theme-soft-reply.vs-marketing .vs-marketing__nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 600;
}
.theme-soft-reply.vs-marketing .vs-marketing__nav a {
  color: inherit;
  text-decoration: none;
}
.theme-soft-reply.vs-marketing .vs-marketing__main {
  padding: 0 48px 48px;
}
.theme-soft-reply.vs-marketing .skiwo-hero {
  padding-block: 56px 0;
}
.theme-soft-reply.vs-marketing .skiwo-hero__headline {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.theme-soft-reply.vs-marketing .vs-marketing__footline {
  margin: 12px 0 48px;
  font-size: var(--fs-body-sm);
  color: var(--text-mid);
}
.theme-soft-reply.vs-marketing .vs-marketing__section {
  padding-block: 40px;
  border-block-start: 1px solid var(--hairline);
}
.theme-soft-reply.vs-marketing .vs-marketing__section .skiwo-section-head {
  margin: 24px 0 14px;
}
.theme-soft-reply.vs-marketing .vs-marketing__section .skiwo-section-head__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}
.theme-soft-reply.vs-marketing .vs-marketing__section--slim {
  padding-block: 24px;
}
.theme-soft-reply.vs-marketing .vs-marketing__section--narrow {
  max-inline-size: 640px;
  border: 0;
}
.theme-soft-reply.vs-marketing .vs-marketing__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-block: 24px 16px;
}
@media (max-width: 900px) {
  .theme-soft-reply.vs-marketing .vs-marketing__header {
    padding: 14px 20px;
    flex-wrap: wrap;
  }
  .theme-soft-reply.vs-marketing .vs-marketing__nav {
    gap: 14px;
  }
  .theme-soft-reply.vs-marketing .vs-marketing__main {
    padding: 0 20px 32px;
  }
  .theme-soft-reply.vs-marketing .skiwo-hero__headline {
    font-size: 36px;
  }
}

.vs-vignette {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.vs-vignette__phone {
  --surface: #17131F;
  --border-2: #322A47;
  --text: #F2EFFA;
  --text-mid: #B7AFD1;
  inline-size: 270px;
  padding: 22px 20px;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  color: var(--text);
  box-shadow: var(--sh-float);
}
.vs-vignette__product {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-end: 12px;
  font-size: 11.5px;
  font-weight: 700;
}
.vs-vignette__time {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-mid);
}
.vs-vignette__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  margin-block-end: 12px;
}
.vs-vignette__line {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-mid);
  margin-block-end: 14px;
}
.vs-vignette__press {
  padding: 12px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--on-brand);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}
.vs-vignette__report {
  inline-size: 230px;
  margin-block-start: 44px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  box-shadow: var(--sh-float);
}
.vs-vignette__caps {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-block-end: 5px;
}
.vs-vignette__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.3;
  padding-block-end: 8px;
  margin-block-end: 10px;
  border-block-end: 2px solid var(--text);
}
.vs-vignette__facts {
  font-size: 10px;
  line-height: 1.7;
  color: var(--text-mid);
  white-space: pre-line;
}
@media (max-width: 900px) {
  .vs-vignette {
    flex-wrap: wrap;
  }
  .vs-vignette__report {
    margin-block-start: 0;
  }
}