/* ============================================================
   Vesper theme, 2026-09 redesign.

   Loaded after global.css so it can override the older chrome.
   Dark only by decision: the light theme and the accessibility
   preferences panel were both removed in this redesign. Motion is
   still governed by the OS setting through prefers-reduced-motion
   at the bottom of this file.
   ============================================================ */

:root {
  /* night sky */
  --sky-0: #070a12;   /* deepest, behind everything */
  --sky-1: #0c1020;   /* page ground */

  /* ink. The homepage uses --ink-*; every older page (docs, guides,
     product and marketing pages) uses --text-* from global.css:81-83.
     The comment here used to say --text2 was "lifted" in this file; it
     never was, so body copy site-wide stayed #8892a8, a mid-gray that
     drew reader complaints and measured 3.92:1 over the sky. Steven,
     2026-09-13: "I get complaints all the time about our 'not white'
     body copy... Can we brighten all of this body copy color across
     the site?" Body copy is now near-white, one step under headings so
     the hierarchy survives. Both token families are set together. */
  --ink:   #f2f5ff;
  --ink-2: #e2e7f2;   /* body copy; was #bcc4d6, before that #a7b0c6 */
  --ink-3: #7d8aa2;
  --text:  var(--ink);
  --text2: var(--ink-2);

  --violet-hi:    #8d5cb6;
  --lavender-hi:  #bcb0dd;
  --green:        #4ade80;
  --red:          #f87171;

  /* the ambient pair, retinted per product scene by the homepage script */
  --glow-a: #7b4ea6;
  --glow-b: #2d1b5e;

  /* product accents, from the approved assignment. Scene atmosphere,
     glass tint, tile lighting and selected navigation only. Never small
     text, and never the only signal for a status. */
  --p-audit:   #784a9d;
  --p-colors:  #d98aa8;
  --p-inspect: #139589;
  --p-mosaic:  #8296d9;
  --p-orbit:   #fdbb25;
  --p-guides:  #998ac2;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --body-font: "Gabarito", "Helvetica Neue", Arial, sans-serif;

  /* one content column, and one edge every piece of chrome aligns to.
     Sized to match the legacy interior pages (.container, .psh-inner,
     docs, guides: max-width 1440px with 40px side padding, 20px under
     860px, 16px under 480px), so the header logo and footer sit on the
     same left edge as the page text everywhere. Was 1280px and a
     clamp(20px, 4.2vw, 56px) gutter, which put the logo 40px inside the
     text edge at 1440 and wider (2026-09-14). Mirrored in home.css. */
  --gut: 40px;
  --content: 1360px;
  --edge: max(var(--gut), calc((100vw - var(--content)) / 2));

  --nav-h: 76px;

  /* modest rounding. No pill primary buttons in this design. */
  --r-control: 10px;
  --r-surface: 18px;
  --r-glass: 22px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}
@media (max-width: 860px) { :root { --gut: 20px; } }
@media (max-width: 480px) { :root { --gut: 16px; } }

html {
  scroll-behavior: smooth;
  background: var(--sky-0);   /* the ground, so a negative-z atmosphere still shows */
  /* The header scrolls with the page (Steven, 2026-09-13: "Not a fan of
     the sticky header at all"), so an anchor landing only needs a little
     air above it. */
  scroll-padding-top: 28px;
  scroll-padding-bottom: 32px;
}

body {
  background: transparent;    /* an opaque body would cover .v-atmos */
  color: var(--ink);
  font-family: var(--body-font);
  overflow-x: hidden;
}

.v-wrap { max-width: var(--content); margin: 0 auto; padding-inline: var(--gut); }

/* The `a` form is here on purpose: global.css:40 sets a violet ring on
   a:focus-visible at (0,1,1), which beat the bare pseudo-class and shipped
   a 2.3:1 ring on a violet page (a11y sweep, 2026-09-13). */
a:focus-visible,
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.v-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--violet); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-control) 0; font-weight: 600;
}
.v-skip:focus { left: 0; }

/* ---------- fixed atmosphere ------------------------------- */
/* Sits behind everything on every page. The star canvas is drawn by
   theme.js; if that never runs the gradients alone still read as a
   night sky, so nothing depends on script. */
.v-atmos {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--sky-0);
  overflow: hidden;              /* the blobs are wider than the viewport */
}
.v-atmos canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-blob {
  position: absolute; left: 50%; top: 50%;
  width: 120vmax; height: 120vmax; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--glow-a) 78%, transparent) 0%,
    color-mix(in oklab, var(--glow-b) 62%, transparent) 34%,
    rgba(7, 10, 18, 0) 62%);
  filter: blur(24px);
  transform: translate(calc(-50% + var(--glow-dx, 0%)), calc(-50% + var(--glow-dy, 0%)));
  transition: background 1.1s ease, transform .28s cubic-bezier(.22,.7,.3,1);  /* .5s before 2026-09-13; Steven wanted the follow more responsive */
}
.v-blob-2 {
  width: 70vmax; height: 70vmax; left: 72%; top: 40%; opacity: .6;
  transform: translate(calc(-50% + var(--glow-dx, 0%) * -1.7), calc(-50% + var(--glow-dy, 0%) * -1.7));
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--glow-a) 50%, transparent) 0%, rgba(7, 10, 18, 0) 60%);
  transition: background 1.1s ease, transform .34s cubic-bezier(.22,.7,.3,1),
              left 1.4s cubic-bezier(.3,.7,.3,1), top 1.4s cubic-bezier(.3,.7,.3,1);
}
/* Reading pages get a quieter sky. The homepage scenes are built on the
   full glow and home.css (loaded after this file) restores it there.
   Everywhere else the copy is the point, and at full strength the violet
   glow put lavender links at 3.95:1 on /docs/colors/ (2026-09-13).
   Steven: "Do we need to darken the background once we leave the
   homepage? It is a bit much for reading content over it." */
.v-blob { opacity: .5; }
.v-blob-2 { opacity: .3; }

.v-atmos::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--grain); opacity: .16; mix-blend-mode: overlay;
}

/* ---------- glass ------------------------------------------ */
/* Translucent dark surface, faint grain, lit upper edge, restrained
   bevel. Product accent belongs to the light around it, set by
   --tint on the element. */
.glass {
  position: relative;
  border-radius: var(--r-glass);
  background:
    linear-gradient(152deg, rgba(255,255,255,.15), rgba(255,255,255,.04) 42%, rgba(255,255,255,.08)),
    linear-gradient(rgba(12,15,34,.62), rgba(12,15,34,.62));
  backdrop-filter: blur(26px) saturate(1.5);
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.17);
  box-shadow:
    0 50px 110px -40px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.26);
  overflow: hidden;
}
.glass::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: .3; mix-blend-mode: overlay;
}
.glass-quiet {
  background:
    linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 60%),
    linear-gradient(rgba(12,15,34,.55), rgba(12,15,34,.55));
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16);
}

/* ---------- controls --------------------------------------- */
.v-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body-font); font-size: 15px; font-weight: 600;
  padding: 13px 22px; border-radius: var(--r-control);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.v-btn-primary {
  background: var(--violet); color: #fff; border-color: rgba(255,255,255,.14);
  box-shadow: 0 10px 30px -14px rgba(141,92,182,.95), inset 0 1px 0 rgba(255,255,255,.18);
}
.v-btn-primary:hover { background: var(--violet-hi); color: #fff; }
.v-btn-secondary {
  background: rgba(255,255,255,.06); color: var(--ink);
  border-color: rgba(255,255,255,.16);
}
.v-btn-secondary:hover { background: rgba(255,255,255,.12); color: var(--ink); }
.v-btn .dl-icon { width: 15px; height: 15px; flex: none; }
.v-btn .arrow-icon { width: 15px; height: 15px; flex: none; }

.v-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px;
}
.v-link:hover { color: var(--amber); border-bottom-color: var(--amber); }
.v-link .arrow-icon { width: 14px; height: 14px; }

.picon { width: 20px; height: 20px; flex: none; }

/* ---------- header ----------------------------------------- */
.v-header {
  position: relative; z-index: 60;   /* was sticky; removed 2026-09-13 */
  padding: 14px var(--edge);
  background: linear-gradient(180deg, rgba(7,10,18,.92) 40%, rgba(7,10,18,0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.v-header-in { display: flex; align-items: center; gap: 20px; }
.v-logo { display: flex; align-items: center; flex: none; }
.v-logo svg, .v-logo img { height: 27px; width: auto; display: block; }

.v-prodnav {
  display: flex; gap: 2px; margin-inline: auto; padding: 5px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.v-prodnav a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: var(--r-control);
  font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.v-prodnav a:hover { background: rgba(255,255,255,.09); color: var(--ink); }
.v-prodnav a[aria-current="page"],
.v-prodnav a[aria-current="true"] {
  background: rgba(255,255,255,.13); color: var(--ink);
}
.v-prodnav .picon { width: 17px; height: 17px; opacity: .8; }
.v-prodnav a:hover .picon,
.v-prodnav a[aria-current="page"] .picon,
.v-prodnav a[aria-current="true"] .picon { opacity: 1; }

.v-header .v-btn { flex: none; padding: 11px 20px; font-size: 14px; }

/* The menu wrapper is layout-transparent at every width where the nav
   and Contact stand on their own. It only becomes a box in menu mode. */
.v-header-menu { display: contents; }

/* The Menu button. Hidden until theme.js enables menu mode, and then
   only at phone widths (the 640px block below). */
.v-menu-btn {
  display: none; align-items: center; gap: 9px;
  font-family: var(--body-font); font-size: 14px; font-weight: 600;
  padding: 11px 16px; border-radius: var(--r-control);
  background: rgba(255,255,255,.06); color: var(--ink);
  border: 1px solid rgba(255,255,255,.16); cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.v-menu-btn:hover { background: rgba(255,255,255,.12); }
.v-menu-btn[aria-expanded="true"] { background: rgba(255,255,255,.13); }
.v-menu-ico { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 16px; height: 16px; }
.v-menu-ico i { display: block; height: 2px; border-radius: 1px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.v-menu-btn[aria-expanded="true"] .v-menu-ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.v-menu-btn[aria-expanded="true"] .v-menu-ico i:nth-child(2) { opacity: 0; }
.v-menu-btn[aria-expanded="true"] .v-menu-ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Narrow: the product nav drops to its own row and wraps. It used to
   scroll sideways with the scrollbar hidden, which at 390px showed four
   of the six tools and gave no sign there were more (2026-09-13). */
@media (max-width: 1080px) {
  /* Two rows now, so the fade above would sit under the product nav and
     let scrolling copy show through. Solid to the bottom edge instead. */
  .v-header { background: rgba(7,10,18,.92); }
  .v-header-in { flex-wrap: wrap; }
  .v-prodnav {
    order: 3; width: 100%; margin-inline: 0;
    flex-wrap: wrap; justify-content: flex-start;
  }
  .v-header .v-contact { margin-left: auto; }
}

/* Phone: one header row, logo and Menu. The six tools and Contact open
   below the row as a list. Only when theme.js has set data-menu; with
   script off the 1080px rules above still apply and the nav wraps. */
@media (max-width: 640px) {
  .v-prodnav a { padding: 8px 10px; font-size: 13px; }
  .v-header[data-menu] .v-menu-btn { display: inline-flex; margin-left: auto; }
  .v-header[data-menu] .v-header-menu { display: none; }
  .v-header[data-menu="open"] .v-header-menu {
    display: flex; flex-direction: column; gap: 10px;
    order: 3; width: 100%; margin-top: 4px;
  }
  .v-header[data-menu] .v-prodnav {
    order: 0;   /* the 1080px rule above would put it after Contact */
    flex-direction: column; gap: 2px; padding: 6px;
    border-radius: var(--r-surface);
  }
  .v-header[data-menu] .v-prodnav a {
    padding: 12px 14px; font-size: 15px; gap: 12px;
  }
  .v-header[data-menu] .v-prodnav .picon { width: 19px; height: 19px; }
  .v-header[data-menu] .v-contact { margin-left: 0; justify-content: center; padding: 13px 20px; }
}

/* ---------- footer ----------------------------------------- */
.v-footer {
  position: relative; z-index: 10;
  margin-top: clamp(56px, 8vw, 110px);
  border-top: 1px solid rgba(255,255,255,.09);
  background: rgba(7,10,18,.6);
  padding: clamp(38px, 5vw, 60px) var(--edge) 34px;
}
.v-sitemap {
  display: grid; gap: 28px 32px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  max-width: var(--content); margin: 0 auto;
}
.v-sitemap h2 {
  font-family: var(--body-font);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px;
}
.v-sitemap ul { list-style: none; margin: 0; padding: 0; }
.v-sitemap li { margin-bottom: 8px; }
.v-sitemap a { font-size: 14px; color: var(--ink-2); text-decoration: none; }
.v-sitemap a:hover { color: var(--ink); text-decoration: underline; }

.v-footer-base {
  max-width: var(--content); margin: 0 auto;
  margin-top: clamp(30px, 4vw, 46px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
  font-size: 13.5px; color: var(--ink-3);
}
.v-footer-base .sep { opacity: .45; }
.v-footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* the Vesper Builds maker's mark, as resolved 2026-08-31.
   Everything inherits from the footer except the star. */
.vesper-badge {
  --vb-star: #a8710a;
  display: inline-flex; align-items: baseline; gap: .4em;
  font-family: inherit; font-size: inherit; font-weight: 400; line-height: inherit;
  color: inherit; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: border-color .18s ease;
}
.vesper-badge b { font-weight: 700; letter-spacing: -.005em; }
.vesper-badge svg {
  width: .82em; height: .82em; flex: none; align-self: center;
  fill: var(--vb-star); overflow: visible;
}
.vesper-badge:hover { border-bottom-color: currentColor; }
.vesper-badge:focus-visible { outline: 2px solid var(--vb-star); outline-offset: 3px; }
.vesper-badge--on-dark { --vb-star: #fdbb25; }

/* ---------- page shell ------------------------------------- */
.v-main { position: relative; z-index: 1; }

/* ---------- motion ----------------------------------------- */
/* There is no in-page motion toggle in this design, so the OS setting
   is the only control and it has to be honored properly. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .v-blob, .v-blob-2 { --glow-dx: 0%; --glow-dy: 0%; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Harmonizing the existing pages.

   The homepage is rebuilt on the components above. Every other page
   still uses the older marketing and product classes, so rather than
   rewrite each one, this block brings them onto the new ground: the
   night sky shows through, panels become glass, controls take the 10px
   geometry, and colored accent borders come off cards per the house
   rule. Page structure and content are untouched.
   ============================================================ */

/* let the fixed atmosphere show through the old opaque sections.
   .psh is the product sub-header's real class (global.css:5, eight
   product pages); .product-sub-header below matched nothing, so the
   sub-header stayed an opaque slab between the fading header and the
   transparent hero. Steven, 2026-09-13: "Can you see that break
   between the hero and the new header?" */
.psh,
.product-hero,
.feature-section,
.pricing-section,
.cta-bar,
.product-sub-header,
.guides-hero,
.docs-hub,
.contact-section { background: transparent; }

/* Off the opaque slab, --text2 fell to 3.9:1 over the sky (measured on
   every product page, 2026-09-13). --ink-2 is what body copy over the
   glows already uses. */
.psh-desc { color: var(--ink-2); }

/* Prose links stay --lavender. They measured 3.95:1 over the full glow
   on /docs/colors/ and 5.31:1 once the sky was quieted below; doc.css:368
   and guides.css:373 set link color after this file anyway. */

/* The platform rail beside the sub-header title stacked its six
   buttons in one column: 264px of rail next to a 129px title block,
   so the sub-header ran to 316px and the tool started 135px lower
   than it needed to (measured on /colors/ at 1154px, 2026-09-13;
   Steven: "There is SO much wasted space here... We could use that
   height"). Two columns of three match the title's height. Above
   600px only; below that colors-tool.css and orbit.css already lay
   the rail out as a wrapping row. */
@media (min-width: 601px) {
  /* .psh prefix: the page stylesheets load after this file */
  .psh .vc-psh-right { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
}

.product-hero-title,
.feature-section h2,
.pricing-section h2,
.cta-bar h2 { font-family: var(--display); letter-spacing: -.028em; }

.feature-section-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
}

/* cards become glass, and lose any colored accent edge */
.plan-card,
.feature-card,
.output-card,
.screenshot-wrap {
  border-radius: var(--r-surface);
  background:
    linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03) 60%),
    linear-gradient(rgba(12,15,34,.55), rgba(12,15,34,.55));
  border: 1px solid rgba(255,255,255,.12);
  border-top-width: 1px; border-left-width: 1px;
  border-top-color: rgba(255,255,255,.12);
  border-left-color: rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.16);
}
/* the Supporter column and card stay distinguishable by tint, not by a bar */
.plan-card.plan-pro {
  background:
    linear-gradient(160deg, rgba(120,74,157,.22), rgba(255,255,255,.03) 62%),
    linear-gradient(rgba(12,15,34,.55), rgba(12,15,34,.55));
  border-color: rgba(153,138,194,.3);
}

/* controls */
.btn-primary,
.btn-plan-cta,
.cta-bar .btn-primary {
  border-radius: var(--r-control) !important;
  background: var(--violet); color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px -14px rgba(141,92,182,.95), inset 0 1px 0 rgba(255,255,255,.18);
  font-weight: 600;
}
.btn-primary:hover, .btn-plan-cta:hover { background: var(--violet-hi); color: #fff; }
.btn-secondary,
.btn-secondary-link {
  border-radius: var(--r-control);
  color: var(--ink);
}

/* comparison table (macros/compare-table.njk): one glass panel, an intro
   row, a continuous tinted Supporter column, numbered groups, square marks.
   Adapted from the Astra handoff audit page. Nothing here reaches Colors. */
.cmp {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-surface);
  background:
    linear-gradient(140deg, rgba(255,255,255,.07), transparent 45%),
    rgba(12,15,34,.72);
  border: 1px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.3);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -30px rgba(0,0,0,.9);
}
.cmp-intro {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 28px;
  padding: 30px 32px 26px;
}
.cmp-eyebrow {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--lavender);
}
.cmp-intro h3 {
  margin: 0; font-family: var(--display); font-weight: 600; font-size: 28px;
  letter-spacing: -.028em; line-height: 1.15; color: var(--ink);
}
.cmp-lede { margin: 0; flex: none; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-align: right; }
.cmp { scroll-margin-top: 28px; }
.cmp:focus { outline: none; }
.cmp-scroll { overflow-x: auto; }
/* the jump from the plan cards down to the table */
.cmp-jump-wrap { text-align: center; margin: 28px 0 0; }
.cmp-jump {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--r-control);
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -16px rgba(0,0,0,.9);
}
.cmp-jump svg { flex: none; opacity: .8; }
.cmp-jump:hover { background: linear-gradient(160deg, rgba(255,255,255,.15), rgba(255,255,255,.06)); color: var(--ink); }
.cmp-jump:is(:visited,:active) { color: var(--ink); }
.cmp-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; text-align: left; }
.cmp-col-feature { width: 52%; }
.cmp-col-pro { background: rgba(120,74,157,.14); }
.cmp-table thead th {
  padding: 22px 18px; text-align: center; vertical-align: bottom;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 0;
  background: rgba(255,255,255,.015); font-weight: 400;
}
.cmp-table thead th:first-child { text-align: left; padding-left: 32px; }
.cmp-table thead th.is-pro {
  background: linear-gradient(145deg, rgba(153,138,194,.12), transparent);
  box-shadow: inset 0 2px 0 rgba(153,138,194,.55);
}
.cmp-th-label { font-size: 13px; color: var(--ink-3); }
.cmp-plan { display: block; font-family: var(--display); font-weight: 500; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.cmp-price { display: block; font-family: var(--display); font-weight: 500; font-size: 32px; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); }
.cmp-price > span { font-family: var(--body-font); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--ink-2); margin-left: 2px; }
.cmp-plan-note { display: block; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.cmp-table .cmp-group th {
  padding: 15px 32px; text-align: left;
  background: rgba(25,33,53,.7);
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 13px; font-weight: 500; letter-spacing: .025em; color: var(--lavender-hi);
}
.cmp-group th > span { display: inline-block; margin-right: 14px; font-size: 11px; color: var(--ink-3); }
.cmp-table .cmp-row th {
  padding: 11px 20px 11px 32px; font-weight: 400; vertical-align: middle;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cmp-name { display: block; font-size: 15px; line-height: 1.45; color: var(--ink); }
.cmp-desc { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
/* with JS, descriptions collapse; the info button, hover, or Show Descriptions reveal them */
.cmp-intro-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cmp-toggle {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  padding: 7px 12px; border-radius: var(--r-control); cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
}
.cmp-toggle:hover { background: rgba(255,255,255,.09); }
.cmp-toggle[aria-pressed="true"] { background: rgba(153,138,194,.18); border-color: rgba(153,138,194,.4); }
.cmp-name { display: flex; align-items: center; gap: 8px; }
.cmp-info {
  flex: none; width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer;
  font: 700 11px/1 var(--display); color: var(--ink-2);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
  display: inline-flex; align-items: center; justify-content: center;
}
.cmp-info[hidden], .cmp-toggle[hidden] { display: none; }
.cmp-info:hover, .cmp-info[aria-expanded="true"] { color: var(--ink); background: rgba(153,138,194,.22); border-color: rgba(153,138,194,.45); }
.cmp.has-js .cmp-table .cmp-row th { position: relative; }
.cmp.has-js .cmp-desc { display: none; }
.cmp.has-js .cmp-row.is-open .cmp-desc,
.cmp.has-js.show-desc .cmp-desc { display: block; }
@media (hover: hover) {
  .cmp.has-js:not(.show-desc) .cmp-row:not(.is-open) th:hover .cmp-desc {
    display: block; position: absolute; z-index: 5; left: 32px; right: 16px; top: calc(100% - 6px);
    margin: 0; padding: 10px 12px; border-radius: 10px; color: var(--ink);
    background: #161b33; border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
  }
}
.cmp-table .cmp-row td {
  text-align: center; vertical-align: middle; padding: 9px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cmp-table tbody:last-child .cmp-row:last-child th,
.cmp-table tbody:last-child .cmp-row:last-child td { border-bottom: 0; }
.cmp-row:hover th, .cmp-row:hover td { background: rgba(255,255,255,.025); }
.cmp-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 8px; line-height: 1;
}
.cmp-mark.yes { color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.cmp-mark.yes.pro { color: #ded6f4; background: rgba(153,138,194,.16); border-color: rgba(153,138,194,.3); }
.cmp-mark.no { color: var(--ink-3); font-size: 17px; }
.cmp-partial {
  display: inline-block; padding: 4px 9px; border-radius: 7px; font-size: 12px; line-height: 1.3;
  color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
}
.cmp-foot {
  margin: 0; padding: 18px 32px; font-size: 13px; line-height: 1.6; color: var(--ink-2);
  border-top: 1px solid rgba(255,255,255,.08);
}
@media (max-width: 600px) {
  .cmp-intro { display: block; padding: 24px 18px 20px; }
  .cmp-intro h3 { font-size: 24px; }
  .cmp-lede { margin-top: 0; text-align: left; }
  .cmp-intro-side { margin-top: 12px; }
  .cmp-col-feature { width: 48%; }
  .cmp-table thead th { padding: 16px 8px; }
  .cmp-table thead th:first-child { padding-left: 18px; }
  .cmp-plan { font-size: 15px; }
  .cmp-price { font-size: 26px; }
  .cmp-plan-note, .cmp-th-label { font-size: 11px; }
  .cmp-table .cmp-group th { padding: 13px 18px; font-size: 12px; }
  .cmp-group th > span { margin-right: 10px; }
  .cmp-table .cmp-row th { padding: 12px 10px 12px 18px; }
  .cmp-name { font-size: 13.5px; }
  .cmp-intro-side { align-items: flex-start; }
  .cmp-table .cmp-row td { padding: 12px 8px; }
  .cmp-mark { width: 24px; height: 24px; }
  .cmp-foot { padding: 16px 18px; font-size: 12px; }
}

/* guide cards: the house rule is a plain faint border, no color accent */
.guide-card,
.guides-grid > a,
.guides-grid > article { border-top-color: rgba(255,255,255,.12) !important; }

/* Guides cards. The house rule is a plain faint border, never a colored
   accent edge, so the category color moves to the tag where it still
   carries the same information without becoming a decorative bar. */
.gs-card {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--r-surface);
  background:
    linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025) 60%),
    linear-gradient(rgba(12,15,34,.55), rgba(12,15,34,.55));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14);
}
.gs-card:hover {
  border-color: rgba(255,255,255,.24) !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.13), rgba(255,255,255,.04) 60%),
    linear-gradient(rgba(12,15,34,.55), rgba(12,15,34,.55));
}
.gs-tag-cat {
  color: var(--ink);
  background: color-mix(in oklab, var(--cat-color, var(--violet)) 32%, transparent);
  border: 1px solid color-mix(in oklab, var(--cat-color, var(--violet)) 55%, transparent);
}

/* ---------- visited and pressed links ------------------------ */
/* global.css:39 and :41 recolor every visited link lavender and every
   pressed link violet, at (0,1,1), which outranks a component's own
   color. On this ground that put lavender text on the violet primary
   button once it had been clicked, and violet on violet while pressed
   (Steven, 2026-09-13: "the light text is back"). Each component pins
   its color across those states; hover stays as declared above. */
.v-btn-primary:is(:visited,:active),
.btn-primary:is(:visited,:active),
.btn-plan-cta:is(:visited,:active) { color: #fff; }
.v-btn-secondary:is(:visited,:active),
.btn-secondary:is(:visited,:active),
.btn-secondary-link:is(:visited,:active) { color: var(--ink); }
.v-prodnav a:is(:visited,:active) { color: var(--ink-2); }
.v-prodnav a:is(:visited,:active):hover,
.v-prodnav a[aria-current]:is(:visited,:active) { color: var(--ink); }
.v-sitemap a:is(:visited,:active) { color: var(--ink-2); }
.v-sitemap a:is(:visited,:active):hover { color: var(--ink); }
.v-link:is(:visited,:active) { color: var(--ink); }
.v-link:is(:visited,:active):hover { color: var(--amber); }
.v-logo:is(:visited,:active),
.vesper-badge:is(:visited,:active) { color: inherit; }