/** Shopify CDN: Minification failed

Line 117:5 Unexpected "}"
Line 119:75 Unterminated string token
Line 123:71 Unterminated string token
Line 126:75 Unterminated string token

**/
/* ═════════════════════════════════════════════════════════════════════════
   Riven Supply — design system
   Ported from the Claude Design "industry" export on 2026-08-17.
   Rewritten 2026-08-17 (round 2) to own the page frame globally instead of
   per section, so Horizon's header, footer, cart, collection grids and every
   section we never wrote sit inside the same boxed plate.

   Load order matters: this file is linked from layout/theme.liquid AFTER
   'theme-styles-variables' and 'color-palette', because it overrides custom
   properties those snippets declare on :root. Moving the link earlier (into
   snippets/stylesheets.liquid, next to base.css) silently breaks the
   overrides — a later inline <style> beats an earlier <link> at equal
   specificity.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

/* ────────────────────────────────────────────────────────────────────────
   1. Tokens
   Declared on :root so global frame rules can use them, and repeated on .rs
   so a section still styles correctly if this file is ever scoped tighter.
   Every name is --rs- prefixed and cannot collide with Horizon's --color-*.
   ────────────────────────────────────────────────────────────── */

:root,
.rs {
  /* PLATE WIDTH — the single number that sets how wide the whole store is.
     The Claude Design export drew the page at exactly 1180px (its wrapper is
     `flex: 0 0 1180px`) and that was the value until 2026-08-18. It is not
     sacred: the mockup was authored on a ~1290px canvas, where 1180 filled
     the screen edge to edge. On a 2560px monitor the same number occupies
     46% of the viewport and reads as a narrow column of content floating in
     grey.

     Raised to 1320px. That is wide enough to stop the store looking cramped
     on a large display, and it widens the hero copy column by ~70px, which
     is what lets the headline and subheading each lose a line — shortening
     the hero and shrinking the empty field around a square hero image.
     Still inside Horizon's own --narrow-page-width (90rem / 1440px), so the
     frame maths in §2 is unaffected.

     If this changes again, change the max-width media query in §2 to match.
     The two numbers must stay in step or the vertical hairlines reappear on
     screens narrower than the plate. */
  --rs-plate: 1320px;
  --rs-backdrop: #dededf;

  --rs-bg: #f2f2f3;
  --rs-surface: #e9e9ea;
  --rs-text: #1d1f20;
  --rs-accent: #5980a6;
  --rs-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --rs-n-100: #f5f5f8; --rs-n-200: #e7e7ea; --rs-n-300: #d4d4d7;
  --rs-n-400: #b7b7ba; --rs-n-500: #98989b; --rs-n-600: #7a7a7d;
  --rs-n-700: #5d5d60; --rs-n-800: #424244; --rs-n-900: #2b2b2d;

  --rs-a-100: #eef6ff; --rs-a-200: #d6ebff; --rs-a-300: #b5d9fd;
  --rs-a-400: #94bce3; --rs-a-500: #749dc4; --rs-a-600: #597ea3;
  --rs-a-700: #416180; --rs-a-800: #2c455d; --rs-a-900: #1d2d3d;

  --rs-font-heading: "Barlow Condensed", system-ui, sans-serif;
  --rs-font-body: "Barlow", system-ui, sans-serif;
  --rs-hw: 600;

  --rs-1: 3.4px; --rs-2: 6.8px; --rs-3: 10.2px;
  --rs-4: 13.6px; --rs-6: 20.4px; --rs-8: 27.2px;

  /* Vertical rhythm for a section's own padding. The horizontal value is
     never set here — it always comes from --page-margin (see §2). */
  --rs-band: 48px;
}

@media screen and (max-width: 749px) {
  :root, .rs { --rs-band: 32px; }
}

/* ────────────────────────────────────────────────────────────────────────
   2. The frame — one boxed plate for the whole store

   Horizon builds every section as a three-column grid:
     minmax(--page-margin, 1fr) | content | minmax(--page-margin, 1fr)
   with the content column set to min(--page-width, 100% - 2 * --page-margin).

   The second term is the important one: it clamps to the PARENT's width. So
   capping the top-level children of .page-wrapper is enough — every Horizon
   section, including ones this project never wrote, shrinks to the plate and
   keeps its own gutter. Nothing here needs to know about --page-width.

   Two traps are baked into the rule below. Both cost a debugging round.

   TRAP 1 — the selector must be `#header-group > .shopify-section`, never
   `#header-group`. With a sticky header, sections/header.liquid declares:

     #header-group:has(#header-component[sticky]) { display: contents; }

   so #header-group generates no box at all and every box property set on it
   — max-width, margin, background, border — is discarded in silence. Its
   children are real boxes and are what must be capped. Do not "fix" this by
   forcing #header-group back to display:block: that traps the sticky header
   in a header-height box and it stops sticking.

   TRAP 2 — no `background` on these three. Horizon paints a section's colour
   with an absolutely-positioned child at `z-index: -2`:

     .shopify-section:not(.header-section) .section-background {
       position: absolute; inset: 0;
       z-index: var(--layer-section-background);   /* -2 */
     }

   A negative-z-index child paints behind its own parent's background, so a
   background here masks every section colour a merchant sets in the editor.
   It cost us the dark announcement bar, which rendered white-on-paper and
   looked like it had disappeared. The plate needs no fill of its own: every
   section paints paper already, and body's backdrop shows through only
   outside the plate, which is the intended look.

   --page-margin is declared by base.css on the body's .page-width-* class:
   16px below 750px, 40px above. Our sections read the same variable, which
   is what makes a Riven heading line up with a Shopify collection grid.
   ────────────────────────────────────────────────────────────── */

body {
  background: var(--rs-backdrop);
}

#header-group > .shopify-section,
.content-for-layout,
.page-wrapper > footer {
  width: 100%;
  max-width: var(--rs-plate);
  margin-inline: auto;
  border-inline: 1px solid var(--rs-divider);
}

/* Never add overflow or transform to .page-wrapper or to these boxes. At
   >=990px base.css makes .page-wrapper the scroll container (html and body
   are overflow:hidden); either property kills the sticky header, and
   overflow also clips the mega-menu, which overhangs the header by design. */

/* Must match --rs-plate. Below the plate width there is no backdrop showing,
   so the vertical hairlines would sit hard against the viewport edge. */
@media screen and (max-width: 1320px) {
  #header-group > .shopify-section,
  .content-for-layout,
  .page-wrapper > footer { border-inline: 0; }
}

/* A Riven section is a plain block inside the plate; the plate itself is the
   frame. .rs-plate is kept as a hook so section markup did not have to
   change when the frame moved out of it. */
.rs-plate { width: 100%; }
.rs-plate--top { border-top: 1px solid var(--rs-divider); }
.rs-plate--bottom { border-bottom: 1px solid var(--rs-divider); }
.rs-pad { padding: var(--rs-band) var(--page-margin, 40px); }
.rs-rule { border-bottom: 1px solid var(--rs-divider); }
.rs-gutter { padding-inline: var(--page-margin, 40px); }

/* ────────────────────────────────────────────────────────────────────────
   3. Horizon harmonisation
   Default sections we did not write — collection grids, recommendations,
   search, cart, 404 — inherit the palette from settings_data.json. These
   rules cover what settings cannot reach.

   One known viewport-unit hazard, currently unused: base.css sets
   --full-page-margin-inline-offset from 100vw, which assumes a full-bleed
   page. Only the Marquee section consumes it. If a Marquee is ever added it
   will overhang the plate and needs an override here.
   ────────────────────────────────────────────────────────────── */

.page-wrapper h1, .page-wrapper h2, .page-wrapper h3,
.page-wrapper h4, .page-wrapper h5, .page-wrapper h6 {
  letter-spacing: -0.015em;
}

/* Horizon rounds product card media and quick-add controls; the design
   system is square throughout. */
.product-card__content,
.product-card img,
.collection-card img,
.resource-list img { border-radius: 0; }

/* ────────────────────────────────────────────────────────────────────────
   4. Typography
   ────────────────────────────────────────────────────────────── */

.rs {
  background: var(--rs-bg);
  color: var(--rs-text);
  font-family: var(--rs-font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
}
.rs *, .rs *::before, .rs *::after { box-sizing: border-box; }

.rs h1, .rs h2, .rs h3, .rs h4, .rs h5, .rs h6 {
  font-family: var(--rs-font-heading); font-weight: var(--rs-hw);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--rs-2);
  text-transform: none;
}
.rs h1 { font-size: 42px; }
.rs h2 { font-size: 32px; }
.rs h3 { font-size: 25px; }
.rs h4 { font-size: 20px; }
.rs h5 { font-size: 16px; }
.rs h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.rs p { margin: 0 0 var(--rs-3); }
.rs p:last-child { margin-bottom: 0; }
.rs a { color: var(--rs-accent); text-underline-offset: 3px; }
.rs img { display: block; max-width: 100%; }
.rs .text-muted { color: color-mix(in srgb, var(--rs-text) 55%, transparent); }
.rs .rs-kicker,
.rs .rs-eyebrow {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rs-a-700);
}
.rs .rs-num { font-family: var(--rs-font-heading); font-weight: var(--rs-hw); }
.rs .rs-lede { font-size: 16px; max-width: 52ch; }
.rs :focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
.rs ::selection { background: color-mix(in srgb, var(--rs-accent) 30%, transparent); }

/* ────────────────────────────────────────────────────────────────────────
   5. Blueprint frame and imagery
   ────────────────────────────────────────────────────────────── */

.rs .blueprint { position: relative; border: 1px solid var(--rs-divider); border-radius: 0; }
.rs .blueprint.duotone { overflow: visible; }
.rs .blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--rs-text) 55%, transparent);
}
.rs .blueprint > .corner::before, .rs .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.rs .blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.rs .blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.rs .blueprint > .corner.tl { top: -6px; left: -6px; }
.rs .blueprint > .corner.tr { top: -6px; right: -6px; }
.rs .blueprint > .corner.bl { bottom: -6px; left: -6px; }
.rs .blueprint > .corner.br { bottom: -6px; right: -6px; }

/* Kept subtle: label stock is white and a full colour blend makes it read
   blue-grey rather than white. Sections can opt out entirely — riven-hero's
   "Tint the image" checkbox drops this class for artwork that is already
   drawn in the brand palette. */
.rs .duotone { position: relative; overflow: hidden; }
.rs .duotone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--rs-accent); mix-blend-mode: color; opacity: .35;
}
.rs .rs-media {
  display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--rs-n-300) 0 6px, var(--rs-n-200) 6px 12px);
}
.rs .rs-media img { width: 100%; height: 100%; object-fit: cover; }
.rs .rs-stamp {
  font-family: ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em;
  color: var(--rs-n-700); background: var(--rs-bg); padding: 3px 7px;
}

/* ────────────────────────────────────────────────────────────────────────
   6. Buttons
   ────────────────────────────────────────────────────────────── */

.rs .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--rs-font-heading); font-weight: var(--rs-hw);
  font-size: 14px; line-height: 1.2; color: var(--rs-text);
  background: transparent; border: 1px solid var(--rs-divider);
  padding: var(--rs-2) calc(var(--rs-3) * 1.2); border-radius: 0;
}
.rs .btn-lg { padding: 11px 20px; font-size: 15px; }
.rs .btn-primary { background: var(--rs-accent); color: var(--rs-bg); border-color: var(--rs-accent); }
.rs .btn-primary:hover { background: var(--rs-a-600); }
.rs .btn-primary:active { background: var(--rs-a-700); }
.rs .btn-secondary:hover { background: color-mix(in srgb, var(--rs-text) 7%, transparent); }
.rs .btn-secondary:active { background: color-mix(in srgb, var(--rs-text) 14%, transparent); }
.rs .btn-ghost { color: var(--rs-accent); border-color: transparent; padding-inline: var(--rs-1); }
.rs .btn-ghost:hover { background: color-mix(in srgb, var(--rs-accent) 10%, transparent); }
.rs .btn:disabled { opacity: .45; cursor: not-allowed; }

/* A quiet third tier below btn-secondary. The sample request lives here:
   findable for anyone looking, never competing with Add to cart. */
.rs .rs-quiet {
  font-size: 13px; color: color-mix(in srgb, var(--rs-text) 62%, transparent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--rs-text) 28%, transparent);
}
.rs .rs-quiet:hover { color: var(--rs-accent); }

/* ────────────────────────────────────────────────────────────────────────
   7. Forms, cards, tags, tables
   ────────────────────────────────────────────────────────────── */

.rs .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--rs-text) 70%, transparent); }
.rs .input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--rs-text); caret-color: var(--rs-accent);
  background: var(--rs-surface); border: 1px solid var(--rs-divider); border-radius: 0;
}
.rs .input:hover { border-color: color-mix(in srgb, var(--rs-text) 45%, transparent); }
.rs .input:focus-visible { border-color: var(--rs-accent); outline-offset: 0; }
.rs .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--rs-divider); border-radius: 0; }
.rs .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.rs .seg-opt + .seg-opt { border-left: 1px solid var(--rs-divider); }
.rs .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rs .seg-opt:has(input:checked) { background: var(--rs-accent); color: var(--rs-bg); }
.rs .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--rs-text) 7%, transparent); }

.rs .card {
  display: flex; flex-direction: column; gap: var(--rs-2);
  padding: var(--rs-3); border-radius: 0; background: transparent;
  border: 1px solid var(--rs-divider);
}
.rs .card-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--rs-accent); }
.rs .card-title { font-family: var(--rs-font-heading); font-weight: var(--rs-hw); font-size: 17px; line-height: 1.2; }

.rs .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .02em; padding: 3px 10px; border-radius: 0; }
.rs .tag-accent { background: var(--rs-a-100); color: var(--rs-a-800); }
.rs .tag-neutral { background: var(--rs-n-100); color: var(--rs-n-800); }
.rs .tag-outline { border: 1px solid var(--rs-accent); color: var(--rs-accent); }

.rs .table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rs .table th {
  text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--rs-text) 60%, transparent);
  padding: var(--rs-2); border-bottom: 1px solid var(--rs-divider);
}
.rs .table td { padding: var(--rs-2); border-bottom: 1px solid color-mix(in srgb, var(--rs-text) 8%, transparent); }
.rs .table tbody tr:hover { background: color-mix(in srgb, var(--rs-text) 4%, transparent); }
.rs .table td.rs-v { font-family: var(--rs-font-heading); font-weight: var(--rs-hw); font-size: 15px; }

/* ────────────────────────────────────────────────────────────────────────
   8. Shared layout helpers
   ────────────────────────────────────────────────────────────── */

.rs .rs-grid { display: grid; gap: 18px; grid-template-columns: repeat(var(--rs-cols, 4), 1fr); }
.rs .rs-two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.rs .rs-tile:hover { border-color: var(--rs-accent); }
.rs .rs-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 24px; flex-wrap: wrap;
}
.rs .rs-dark { background: var(--rs-a-900); color: var(--rs-bg); }
.rs .rs-dark a { color: var(--rs-bg); text-decoration: none; opacity: .85; }
.rs .rs-dark a:hover { opacity: 1; }
.rs .rs-dark .text-muted { color: color-mix(in srgb, #f2f2f3 65%, transparent); }

@media (max-width: 990px) {
  .rs .rs-grid { grid-template-columns: repeat(var(--rs-cols-sm, 2), 1fr); }
  .rs .rs-two { grid-template-columns: 1fr; gap: 32px; }
  .rs h1 { font-size: 34px; }
  .rs h2 { font-size: 26px; }
}
@media (max-width: 600px) {
  .rs .rs-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────────
   9. Shopify policy pages  (/policies/*)

   Policy pages CANNOT take an Online Store 2.0 template — Shopify renders
   them with a built-in minimal template and a rich-text editor behind it.
   They DO render inside layout/theme.liquid, so the header, announcement
   bar and riven-closer already wrap them; only the content area arrives
   unstyled.

   The alternative — intercepting request.path in theme.liquid and rendering
   a hand-built section per policy — was rejected deliberately. It duplicates
   the policy text into the theme, and the copy that binds at checkout is the
   one in Settings → Policies. Two refund policies that can drift apart is a
   legal problem, not a design one. So we style, never duplicate.

   NOTE: no ::before text content anywhere here. A hardcoded English kicker
   would render untranslated on the LT, DE and FR locales.
   ────────────────────────────────────────────────────────────── */

.shopify-policy__container {
  width: 100%; max-width: var(--rs-plate); margin-inline: auto;
  padding: 56px var(--page-margin, 40px) 76px;
  background: var(--rs-bg); color: var(--rs-text);
  font-family: var(--rs-font-body); font-size: 15px; line-height: 1.6;
}
.shopify-policy__title {
  text-align: left; margin: 0 0 32px; padding: 0 0 22px;
  border-bottom: 1px solid var(--rs-divider);
}
.shopify-policy__title::before {
  content: ""; display: block; width: 48px; height: 2px;
  background: var(--rs-accent); margin-bottom: 18px;
}
.shopify-policy__title h1 {
  font-family: var(--rs-font-heading); font-weight: var(--rs-hw);
  font-size: 42px; line-height: 1.12; letter-spacing: -0.015em;
  margin: 0; text-transform: none;
}
.shopify-policy__body { max-width: 74ch; }

/* ────────────────────────────────────────────────────────────────────────
   10. Page body copy  (.page-content — the page-content block)

   Horizon renders page.content at its own narrow measure, hard against the
   left of the 1320px plate, and at Horizon's heading scale rather than ours.
   On About that read as a thin ribbon of text beside an empty half-page,
   with headings far larger than anything else on the site.

   Fixed to one reading measure and the Riven type scale. Deliberately NOT
   centred: riven-section-header above it is left-aligned, and a centred
   prose column under a left-aligned header reads as two different pages.
   ────────────────────────────────────────────────────────────── */

.page-content {
  width: 100%;
  max-width: 72ch;
  margin-inline: 0;
  align-self: start;
  justify-self: start;
  font-size: 15px;
  line-height: 1.65;
}
.page-content :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--rs-font-heading); font-weight: var(--rs-hw);
  line-height: 1.15; letter-spacing: -0.01em; text-transform: none;
  margin: 36px 0 12px;
}
.page-content :first-child { margin-top: 0; }
.page-content h1 { font-size: 32px; }
.page-content h2 { font-size: 25px; }
.page-content h3 { font-size: 20px; }
.page-content h4 { font-size: 16px; }
.page-content :is(h5, h6) {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rs-a-700);
}
.page-content p, .page-content ul, .page-content ol { margin: 0 0 16px; }
.page-content li { margin-bottom: 6px; }
.page-content a { color: var(--rs-accent); text-underline-offset: 3px; }
.page-content hr {
  border: 0; border-top: 1px solid var(--rs-divider); margin: 32px 0;
}

@media (max-width: 990px) {
  .shopify-policy__container { padding: 36px var(--page-margin, 16px) 52px; }
  .shopify-policy__title h1 { font-size: 34px; }
  .page-content h2 { font-size: 22px; }
}

/* ── 10b. Page body: defeat Horizon's centred content grid ──────────────
   §10 set the measure, but the copy still sat centred in the plate while
   riven-section-header and riven-faq above and below it sat hard left.

   Cause, measured in the browser rather than guessed: Horizon wraps the
   main-page section in `.page-width-content`, a CSS grid whose middle
   track is a centred, narrow content column. `.page-content` was correctly
   72ch wide but the TRACK holding it started at x=684 while the Riven
   sections started at x=401. No amount of margin/align-self on the child
   could fix that — the constraint was the grid track.

   Fix: make the grid's child span every track and left-align, then give
   the section the same --page-margin gutter the Riven sections use.
   Verified: heading, body and FAQ all land on x=401.

   Scoped with :has(.page-content) so it touches ONLY a section that
   actually renders page body copy — not product, collection or any other
   section using .page-width-content. Where :has() is unsupported the rule
   is dropped and the copy simply stays centred, which is the current
   behaviour, not a break.

   --page-margin is 40px on desktop and 16px below 990px, so the gutter
   follows the breakpoint automatically.
   ────────────────────────────────────────────────────────────── */

.page-width-content:has(.page-content) {
  padding-inline: var(--page-margin, 40px);
}
.page-width-content:has(.page-content) > * {
  grid-column: 1 / -1;
  justify-self: start;
  width: 100%;
}

/* ────────────────────────────────────────────────────────────────────────
   11. VAT-inclusive companion price  (snippets/riven-vat-line.liquid)

   DISPLAY ONLY — see the snippet header. One quiet line under Horizon's own
   price block, which already renders the net figure. Deliberately small and
   muted: it is supporting information, not a second price.

   WHY THE TRIPLED CLASS (2026-08-29). The single-class rule below was losing
   everywhere the price block carries a heading preset. base.css:758 has

       h6, .h6.h6, .text-block.h6 > *, .text-block.h6 :is(h1..h6) {
         font-family / weight / size / line-height / letter-spacing /
         text-transform / color: var(--color);
       }

   `.text-block.h6 > *` is (0,2,1) and the VAT span is a direct child of
   <product-price class="text-block ... h6">, so it inherited the price's own
   family, weight and colour — which is exactly the "same weight, looks messy"
   report from the collection grid. `.rs-vat` at (0,1,0) never stood a chance.
   `.rs-vat.rs-vat.rs-vat` is (0,3,0) and wins on specificity rather than on
   load order, so it survives Shopify reordering the stylesheets. Horizon uses
   the same doubled-class trick itself (`.h6.h6`, `.text-block.text-block`).

   SIZE IS RELATIVE, NOT FIXED. The old 13px was larger than the 12px price on
   a collection card — the secondary figure outranking the primary one. It is
   now 0.7em of whatever the price block is set to, with an 11px floor so it
   stays legible: ~11px beside a 12px card price, ~14px beside a 20px product
   page price.
   ────────────────────────────────────────────────────────────── */

.rs-vat.rs-vat.rs-vat {
  display: block;
  margin-top: 3px;
  font-family: var(--rs-font-body);
  font-size: max(11px, 0.7em);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: color-mix(in srgb, var(--rs-text) 55%, transparent);
}
.rs-vat .rs-vat__tag { font-size: 0.88em; letter-spacing: .03em; }