@import url('/assets/sincere-nav.css');

/* Sincere shared design system — every page loads this file.
   Single source of truth: edit here, never per page. */


:root {
  --sincere-bg: #080a0d;
  --sincere-surface: #101318;
  --sincere-text: #eef0f4;
  --sincere-muted: #a4adb9;
  --sincere-chrome: #dce3ed;
  --sincere-radius: 16px;
  /* Display face is always set in italic at the usage site. */
  --font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-expo: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
html, body { margin: 0; padding: 0; background: #0a0b0e; }
* { box-sizing: border-box; }
::selection { background: rgba(255,255,255,0.18); }
body { -webkit-font-smoothing: antialiased; }
a { color: #e8e9ec; text-decoration: none; }
a:hover { color: #ffffff; }
input { font-family: inherit; }
input::placeholder { color: #6b6e78; }
input:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.35); transition: box-shadow .15s var(--ease-out-expo); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
@keyframes vc-drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4%, -3%, 0) scale(1.08); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes vc-drift2 { 0% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-5%, 4%, 0) scale(1); } 100% { transform: translate3d(0,0,0) scale(1.05); } }
@keyframes vc-float { 0% { transform: translateY(0); } 50% { transform: translateY(-7px); } 100% { transform: translateY(0); } }
@keyframes vc-float-slow { 0% { transform: translateY(0); } 50% { transform: translateY(9px); } 100% { transform: translateY(0); } }
@keyframes vc-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes vc-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vc-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }


/* Scroll reveal.
   The motion is an animation, not a transition, and that is load-bearing: many
   revealed elements declare their own `transition` for hover (the FAQ rows
   inline, every .vc-lift card in this file). A second `transition` on the same
   element replaces this one wholesale rather than merging, which left those
   elements with no fade at all — they snapped from hidden to visible. An
   `animation` occupies a different property, so nothing on the element can
   clobber it.
   No `filter` in here either. `blur(0)` is not `none`, so a filter left behind
   on a revealed card makes that card its own backdrop root and permanently
   disables the `backdrop-filter` frosting it is built on. The driver strips
   both attributes once the animation ends, so a finished element is pristine
   and its hover transform is free again.
   No `will-change` either. Nearly every revealed element here is a glass card
   carrying `backdrop-filter`, which is already composited; adding a promotion
   hint for the duration of the animation and dropping it again at settle makes
   the browser rasterize the frosted layer two different ways either side of
   that boundary, so the card's fill visibly steps as the motion finishes. */
[data-sr-hide]:not([data-in]) { opacity: 0; }
[data-sr-hide][data-in] {
  animation: vc-sr-up .58s var(--ease-out-expo) var(--sr-delay, 0s) both;
}
[data-sr-hide][data-in][data-reveal="left"] { animation-name: vc-sr-left; }
[data-sr-hide][data-in][data-reveal="right"] { animation-name: vc-sr-right; }
[data-sr-hide][data-in][data-reveal="pop"] { animation-name: vc-sr-pop; }
/* Translate-only for the three directional variants: these land on full-width
   rows and cards whose 1px border sits on the pixel grid, and scaling or
   rotating that border mid-flight makes the edge crawl. */
/* 18px, not the 30px this started at: a `backdrop-filter` element samples the
   backdrop at its transformed position, so the frosted content slides inside the
   card's own frame for the length of the travel and settles with a shunt. Short
   travel keeps that drift below the point where it reads. */
@keyframes vc-sr-up { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes vc-sr-left { from { opacity: 0; transform: translate3d(-34px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes vc-sr-right { from { opacity: 0; transform: translate3d(34px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes vc-sr-pop { from { opacity: 0; transform: scale(0.972); } to { opacity: 1; transform: none; } }
@keyframes vc-panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Glass surface + button system ─────────────────────────────────────
   Ported from the DeepSeek Harness dark theme: a 12px glass blur, a
   centred radial bloom that scales up from the button's middle on hover,
   and border-colour as the only other hover channel. */
:root {
  --glass-blur: 12px;
  /* The nav bar sits over near-black artwork, so its fill has to be a dark
     translucent tint, not a white one — a white wash at any usable alpha
     reads as a pale slab and drops the link text toward its background.
     The frosted effect comes from the blur and saturation, not the fill. */
  --nav-glass-blur: 22px;
  --surface-raised: hsla(228,16%,7%,0.62);
  --nav-shadow: 0 12px 38px rgba(0,0,0,0.46), inset 0 1px 0 hsla(0,0%,100%,0.09);
  --surface-1: hsla(0,0%,100%,0.06);
  --border-default: hsla(0,0%,100%,0.10);
  --btn-secondary-border: hsla(0,0%,100%,0.38);
  --btn-secondary-hover-border: hsla(0,0%,100%,0.72);
  --btn-secondary-hover-bg: hsla(0,0%,100%,0.16);
  --btn-liquid-hover-bg: rgba(0,0,0,0.16);
  --btn-ghost-hover-bg: hsla(0,0%,100%,0.08);
  --btn-ghost-hover-border: hsla(0,0%,100%,0.30);
  /* White chip lift, matching the reference badge's inner pill. */
  --chip-shadow: 0 4px 14px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.22);
  --chip-shadow-hover: 0 8px 22px rgba(0,0,0,0.42), 0 1px 2px rgba(0,0,0,0.26);
  --shadow-card: hsla(0,0%,100%,0.12) 0 1px 0 0 inset;
}

.vc-glass, .vc-solid, .vc-ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 100px;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 500;
  line-height: 120%;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
/* Full-width chips (pricing cards) still need the pill shape. */
.vc-btn-block { display: flex; width: 100%; }
.vc-btn-m  { font-size: 15px; padding: 11px 18px; }
.vc-btn-s  { font-size: 14px; padding: 8px 12px; }
.vc-btn-xs { font-size: 14px; padding: 6px 12px; }

/* Bloom sits above the button's own background but below its label,
   because a negative z-index child paints after the background only. */
.vc-glass::after, .vc-solid::after, .vc-ghost::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(0);
  transition: transform .36s ease-out, opacity .1s ease;
}
.vc-glass:hover::after, .vc-solid:hover::after, .vc-ghost:hover::after {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

.vc-ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid transparent;
  font-weight: 400;
  transition: border-color .2s;
}
.vc-ghost::after { background: var(--btn-ghost-hover-bg); }
.vc-ghost:hover { border-color: var(--btn-ghost-hover-border); }
.vc-ghost:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Outlined glass: the core stays transparent so the artwork behind reads
   straight through, and the rim carries the whole surface. The top inset
   highlight is what keeps it from flattening into a plain outline. */
.vc-glass {
  background: transparent;
  color: #ffffff;
  border: 1px solid var(--btn-secondary-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  box-shadow: inset 0 1px 0 0 hsla(0,0%,100%,0.20);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.vc-glass::after { background: var(--btn-secondary-hover-bg); }
.vc-glass:hover {
  border-color: var(--btn-secondary-hover-border);
  box-shadow: inset 0 1px 0 0 hsla(0,0%,100%,0.34);
}
.vc-glass:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* No bloom to clip here, so the inner chip's shadow can spill past the rim. */
.vc-static-glass { overflow: visible; }
.vc-static-glass::after { display: none; }
.vc-static-glass:hover {
  border-color: var(--btn-secondary-border);
  box-shadow: inset 0 1px 0 0 hsla(0,0%,100%,0.20);
}

/* Solid white chip: pure white on a dark drop shadow, as on the badge. */
.vc-solid {
  border: none;
  background: #ffffff;
  color: #0a0b0e;
  box-shadow: var(--chip-shadow);
  transition: box-shadow .25s ease;
}
.vc-solid::after { background: var(--btn-liquid-hover-bg); }
.vc-solid:hover { box-shadow: var(--chip-shadow-hover); }
.vc-solid:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }

.vc-play {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--chip-shadow);
  transition: box-shadow .25s ease;
}
.vc-play::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 150%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--btn-liquid-hover-bg);
  opacity: 0; z-index: -1; pointer-events: none;
  transform: translate(-50%,-50%) scale(0);
  transition: transform .36s ease-out, opacity .1s ease;
}
a:hover .vc-play { box-shadow: var(--chip-shadow-hover); }
a:hover .vc-play::after { opacity: 1; transform: translate(-50%,-50%) scale(1); }
a:focus-visible .vc-play { outline: 2px solid #ffffff; outline-offset: 3px; }

.vc-lift {
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-card);
  transition: border-color .35s ease, background .35s ease;
}
.vc-lift:hover { border-color: hsla(0,0%,100%,0.20) !important; }

/* Disabled is the one state permitted to drop contrast. Form submits across
   the auth pages bind it to their loading flag. */
.vc-glass:disabled, .vc-solid:disabled, .vc-ghost:disabled,
.vc-glass[aria-disabled="true"], .vc-solid[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.vc-glass:disabled::after, .vc-solid:disabled::after, .vc-ghost:disabled::after {
  display: none;
}

/* Icon-only round button, sized past the 44px touch minimum. */
.vc-btn-icon { width: 44px; height: 44px; padding: 0; flex: none; }

/* The xs/s scale is comfortable with a mouse but under the 44px touch
   minimum, so it grows only where the pointer is actually coarse rather
   than costing every desktop view the extra height. */
@media (pointer: coarse) {
  .vc-btn-xs, .vc-btn-s { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  [style*="vc-drift"], [style*="vc-float"], [style*="vc-sweep"], [style*="vc-blink"], [style*="vc-panel-in"] { animation: none !important; }
  /* The driver already declines to arm reveals here; this is the backstop so a
     page can never be left with content stuck at opacity 0. */
  [data-sr-hide] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .vc-glass, .vc-solid, .vc-ghost, .vc-lift, .vc-play { transition: none !important; }
  .vc-glass::after, .vc-solid::after, .vc-ghost::after, .vc-play::after { transition: none !important; }
  .vc-glass:hover::after, .vc-solid:hover::after, .vc-ghost:hover::after, a:hover .vc-play::after { opacity: 0 !important; }
}

@view-transition { navigation: none; }
::view-transition-old(root) { animation: vc-page-out .28s var(--ease-in-expo) both; }
::view-transition-new(root) { animation: vc-page-in .5s var(--ease-out-expo) both; }
@keyframes vc-page-out { to { opacity: 0; transform: translateY(-14px) scale(0.985); } }
@keyframes vc-page-in { from { opacity: 0; transform: translateY(18px) scale(0.985); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

html { scroll-behavior: smooth; }
/* Never put a transform on <body>. Any value other than `none` makes body
   the containing block for position:fixed children, which unpins the header
   and the ambient glow from the viewport. The leave transition fades only. */
body {
  opacity: 1;
  transition: opacity 180ms var(--ease-out-expo);
}
body.vc-leaving {
  opacity: 0;
  pointer-events: none;
}
a[href] { -webkit-tap-highlight-color: transparent; }
a[href]:active { transform: scale(0.97); transition-duration: 100ms; }

/* Wordmark → home. Inherits the header's own text colour rather than the
   global link colour, and brightens on hover so contrast only ever rises. */
.vc-brand {
  color: inherit;
  text-decoration: none;
  border-radius: 100px;
  transition: color 200ms var(--ease-out-expo);
}
.vc-brand:hover { color: #ffffff; }
.vc-brand:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }
/* The mark is only 26px tall, so give it a real target where there's no cursor. */
@media (pointer: coarse) {
  .vc-brand { padding: 9px 5px; margin-left: -5px; }
}
@media (prefers-reduced-motion: reduce) {
  .vc-brand { transition: none; }
}

/* ── Header ────────────────────────────────────────────────────────────
   Geometry mirrors DeepSeek Harness: a fixed wrapper whose own width is
   viewport-clamped, and an inner bar whose max-width / inline padding are
   driven frame-by-frame from script so the shrink reads as a spring
   rather than a two-state CSS transition. Only the glass layer fades
   via CSS, on the same .4s ease-in-out they use. */
/* The wrapper only supplies viewport gutters. It must never be narrower
   than the bar's expanded target, or the first slice of the spring's
   travel gets clamped away and the shrink looks like it never fires. */
#site-nav {
  margin: 0 auto;
  width: 100%;
  padding: 8px 24px 0;
  pointer-events: none;
}
#vc-nav-shell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 4px 0;
  border-radius: 100px;
  overflow: visible;
  border: 1px solid transparent;
  background: transparent;
  max-width: 1280px;
  pointer-events: auto;
}
#vc-nav-shell::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  backdrop-filter: blur(var(--nav-glass-blur)) saturate(165%);
  -webkit-backdrop-filter: blur(var(--nav-glass-blur)) saturate(165%);
  box-shadow: var(--nav-shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease-in-out, visibility 0s .4s;
}
#vc-nav-shell.is-scrolled::before {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease-in-out, visibility 0s;
}
#vc-nav-shell .vc-nav-gap { flex: 1; }

/* The header CTA mounts on scroll. Its width is driven by the same spring
   as the bar rather than a display swap — a swap injects its full width in
   one frame, which snaps the centred nav links sideways mid-animation.
   box-sizing is border-box globally, so width:0 collapses padding too. */
.vc-nav-cta {
  white-space: nowrap;
  flex: 0 0 auto;
  width: 0;
  opacity: 0;
  pointer-events: none;
}
#vc-nav-shell.is-scrolled .vc-nav-cta { pointer-events: auto; }

@media (min-width: 768px) {
  #site-nav { padding: 8px 32px 0; }
}
@media (min-width: 1560px) {
  #site-nav { padding: 8px 40px 0; }
}
@media (max-width: 767px) {
  #vc-nav-shell nav, #vc-nav-shell .vc-nav-gap, #nav-auth { display: none !important; }
  /* No room to trade width for a CTA here, so it stays mounted; the script
     holds its target at full width on this breakpoint. */
  .vc-nav-cta { pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none !important; }
  a[href]:active { transform: none !important; }
  #vc-nav-shell::before { transition: none !important; }
}

/* ── Interactive lattice ───────────────────────────────────────────────
   A still, straight grid whose nodes are pushed away from the cursor and
   spring back. Painted white rather than DeepSeek's blue to stay inside
   Sincere Client's monochrome palette. Strength lives in vc-system.js. */
.vc-mesh {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}
/* Held just off the viewport edges so it reads as depth behind the page
   rather than a texture stuck to the window. */
.vc-mesh-page {
  -webkit-mask:
    linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
/* Cursor-driven, so it earns nothing on touch and the script skips it. */
@media (max-width: 767px) { .vc-mesh { display: none; } }

/* ── Hero model stage ──────────────────────────────────────────────────
   The mace, sword and end crystal render into one canvas that fills the whole
   hero behind the copy, so it takes its size from the section rather than
   holding a slab of its own height. */
.vc-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.vc-stage-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Fades the models out before the section edges: at the top they would
     otherwise run into the fixed nav pill, and at the bottom into the
     trusted row, which sits outside the scrim below and has no cover. */
  -webkit-mask:
    linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 9%, #000 88%, transparent 99%);
  mask-composite: intersect;
}
/* Nothing has loaded yet, so an empty box would flash before first paint.
   The models then come up at full strength — legibility is handled locally by
   the scrim below and the halo on the copy, not by dimming the whole canvas,
   which cost the outer two models their brightness for no reason. */
.vc-stage-canvas:not([data-ready="1"]) { opacity: 0; }
.vc-stage-canvas[data-ready="1"] {
  opacity: 1;
  transition: opacity .9s var(--ease-out-expo);
}
/* Sits over the canvas and under the copy, covering the headline and subhead —
   the band where text actually crosses a model. Sized to the copy rather than
   the section: the previous ellipse was wide and darkest dead centre, which is
   exactly where the sword stands, so it erased the middle model to protect
   text that the halo below already protects. Against a fully-lit texel the
   headline holds about 7:1 here and the subhead about 5:1. */
.vc-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 44% 34% at 50% 40%,
    rgba(10, 11, 14, 0.72) 0%,
    rgba(10, 11, 14, 0.66) 44%,
    rgba(10, 11, 14, 0.26) 76%,
    rgba(10, 11, 14, 0) 100%);
}
/* Narrow viewports keep only the sword, centred — see the aspect branch in
   vc-hero3d.js — so the scrim tightens onto the text column with it. */
@media (max-width: 767px) {
  .vc-stage::after {
    background: radial-gradient(ellipse 92% 36% at 50% 42%,
      rgba(10, 11, 14, 0.78) 0%,
      rgba(10, 11, 14, 0.7) 52%,
      rgba(10, 11, 14, 0.3) 80%,
      rgba(10, 11, 14, 0) 100%);
  }
}
/* Per-glyph protection, so the models stay visible in the gaps between
   letterforms instead of being flattened by a larger, darker scrim. */
.vc-hero-copy > h1 { text-shadow: 0 2px 26px rgba(10, 11, 14, 0.92); }
.vc-hero-copy > p { text-shadow: 0 1px 16px rgba(10, 11, 14, 0.95); }
@media (prefers-reduced-motion: reduce) {
  .vc-stage-canvas[data-ready="1"] { transition: none; }
}

/* Non-hero pages have no full-bleed hero to sit under the fixed bar, so they
   open with this spacer instead of absorbing the offset into every section.
   Sized so the first heading only reaches the bar's lower edge after 80px of
   scroll — the point where the frosted layer has already faded in. Anything
   shorter lets content slide under a still-transparent bar. */
.vc-nav-spacer { height: 72px; flex: none; }

/* ── Footer disclaimer ─────────────────────────────────────────────────
   Shares the 1240px page gutter so it lines up with the footer grid and the
   nav above it, rather than floating as its own centred column. */
.vc-legal {
  max-width: 1240px;
  margin: 0 auto;
  padding: 26px 24px 32px;
  font-size: 11px;
  line-height: 1.6;
  color: #7c808a;
}
/* Reading width applied to the text, not the container, so capping the line
   length can't pull the block out of alignment. */
.vc-legal > span { display: block; max-width: 74ch; }
/* On the home page a link grid sits directly above, so the disclaimer
   continues that block instead of opening a new one. */
.vc-legal-flush { padding-top: 0; }

/* Auth and checkout pages carry the disclaimer with no link grid above it, so
   the filled-and-blurred footer surface ends up wrapping one line of legalese
   and reads as a floating band rather than a footer. The solo variant drops the
   surface and centres the text under the page's centred card. */
.vc-footer-solo .vc-legal {
  padding: 4px 24px 44px;
  text-align: center;
}
.vc-footer-solo .vc-legal > span {
  margin-inline: auto;
  text-wrap: balance;
}

/* ── Sticky footer: ensure footer sits flush at the viewport bottom on short pages ── */
div[style*="min-height:100vh"]:not(.adm-shell),
div[style*="min-height: 100vh"]:not(.adm-shell),
#dc-root > .sc-host > div:not(.adm-shell) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
div[style*="min-height:100vh"]:not(.adm-shell) > section,
div[style*="min-height: 100vh"]:not(.adm-shell) > section,
#dc-root > .sc-host > div:not(.adm-shell) > section,
div[style*="min-height:100vh"]:not(.adm-shell) > main,
div[style*="min-height: 100vh"]:not(.adm-shell) > main,
#dc-root > .sc-host > div:not(.adm-shell) > main {
  width: 100% !important;
  box-sizing: border-box !important;
}
footer {
  margin-top: auto !important;
}

/* Sincere surface rules: 16px content, 8px in-game controls, pill actions.
   Refraction belongs on fixed chrome; scrolling content uses opaque layers. */
html { scroll-padding-top: 100px; }
body { color: var(--sincere-text); }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--sincere-chrome) !important; outline-offset: 4px; }
[hidden] { display: none !important; }
.vc-brand > span { font-family: var(--font-body) !important; font-style: normal !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .14em !important; }
.vc-brand > div:first-child { border-radius: 8px !important; background: linear-gradient(135deg,#e9edf4,#a2adbd 42%,#edf1f7 46%,#637081) !important; color: #0a0c10 !important; border: 0 !important; }
section h1, section h2 { line-height: 1.12 !important; padding-bottom: .08em; text-wrap: balance; }
section [style*="backdrop-filter"], footer[style*="backdrop-filter"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.vc-glass:not(.vc-static-glass) { backdrop-filter: none; -webkit-backdrop-filter: none; }
.vc-solid, .vc-glass { transition: transform .24s var(--ease-out-expo), opacity .24s var(--ease-out-expo), background .24s var(--ease-out-expo); }
.vc-solid:active, .vc-glass:active { transform: scale(.98); }
.sincere-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(65 76 94 / .12); transition: transform .3s var(--ease-out-expo); }
a:hover > .sincere-arrow { transform: translate(2px,-2px); }
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #vc-nav-shell::before, .vc-glass { background: #15191f !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-sr-hide] { opacity: 1 !important; transform: none !important; }
}