/* =====================================================
   PALACE - ZELIJ SHAPES
   Bevel and star-cut utilities mirroring the Flutter
   shape engine (lib/core/theme/palace_shapes.dart).

   ONE MECHANISM, EVERY BROWSER: the bevel is cut with
   clip-path, which every current engine supports, so
   Chromium, Firefox and Safari render an identical
   silhouette. The CSS corner-shape property was tried here
   and removed: it is Chromium-only (~68% of traffic), so
   it could never decide how the site looks without giving
   Firefox and iOS a different design.

   The component-level bevels live in the CROSS-BROWSER
   BEVEL section at the bottom of this file. The .bvl*
   utilities here are for one-off markup and for shapes
   border-radius cannot express (the stars).

   THE CLIP-PATH TRAP: clip-path clips borders AND
   box-shadows. Never put `border:` or `box-shadow:` on a
   bevel or star utility element — use one of these instead:
     1. .bvl-frame > .bvl-frame-inner   (bordered bevel)
     2. filter: drop-shadow(...)        (shadowed bevel)
        - use the .drop-shadow-sm/md/lg helpers below.

   Careful with comments in this file: writing a class glob
   that pairs an asterisk with a slash closes the comment
   early and the stray text then swallows the next rule.
   ===================================================== */

/* ===== UNIFORM BEVEL (octagonal chamfer) =====
   The polygons live in custom properties so the utilities below and the
   no-corner-shape fallback at the bottom of this file stay in lockstep. */

:root {
  --clip-bvl-sm: polygon(
    min(var(--bevel-sm), var(--bevel-max)) 0, calc(100% - min(var(--bevel-sm), var(--bevel-max))) 0,
    100% min(var(--bevel-sm), var(--bevel-max)), 100% calc(100% - min(var(--bevel-sm), var(--bevel-max))),
    calc(100% - min(var(--bevel-sm), var(--bevel-max))) 100%, min(var(--bevel-sm), var(--bevel-max)) 100%,
    0 calc(100% - min(var(--bevel-sm), var(--bevel-max))), 0 min(var(--bevel-sm), var(--bevel-max))
  );
  --clip-bvl-md: polygon(
    min(var(--bevel-md), var(--bevel-max)) 0, calc(100% - min(var(--bevel-md), var(--bevel-max))) 0,
    100% min(var(--bevel-md), var(--bevel-max)), 100% calc(100% - min(var(--bevel-md), var(--bevel-max))),
    calc(100% - min(var(--bevel-md), var(--bevel-max))) 100%, min(var(--bevel-md), var(--bevel-max)) 100%,
    0 calc(100% - min(var(--bevel-md), var(--bevel-max))), 0 min(var(--bevel-md), var(--bevel-max))
  );
  --clip-bvl-lg: polygon(
    min(var(--bevel-lg), var(--bevel-max)) 0, calc(100% - min(var(--bevel-lg), var(--bevel-max))) 0,
    100% min(var(--bevel-lg), var(--bevel-max)), 100% calc(100% - min(var(--bevel-lg), var(--bevel-max))),
    calc(100% - min(var(--bevel-lg), var(--bevel-max))) 100%, min(var(--bevel-lg), var(--bevel-max)) 100%,
    0 calc(100% - min(var(--bevel-lg), var(--bevel-max))), 0 min(var(--bevel-lg), var(--bevel-max))
  );
}

.bvl,
.bvl-sm,
.bvl-lg { border-radius: 0; }
.bvl    { clip-path: var(--clip-bvl-md); }
.bvl-sm { clip-path: var(--clip-bvl-sm); }
.bvl-lg { clip-path: var(--clip-bvl-lg); }

/* ===== BORDERED BEVEL — the two-layer technique =====
   Outer element is clipped and filled with the border
   colour; the inset child is clipped and filled with the
   surface colour. Use --frame-width to set border weight.
   Example:
     <div class="bvl-frame">
       <div class="bvl-frame-inner">…content…</div>
     </div> */
.bvl-frame {
  position: relative;
  padding: var(--frame-width, 1px);
  background: var(--frame-color, var(--color-surface-border));
}
.bvl-frame.bvl { background: var(--frame-color, var(--color-surface-border)); }
.bvl-frame-inner {
  width: 100%;
  height: 100%;
  background: var(--frame-bg, var(--color-surface));
}

/* ===== SHADOWED BEVEL =====
   drop-shadow() follows the clipped silhouette, unlike
   box-shadow which gets cut off. */
.drop-shadow-sm { filter: drop-shadow(0 2px 8px rgba(11, 34, 51, 0.18)); }
.drop-shadow-md { filter: drop-shadow(0 4px 16px rgba(11, 34, 51, 0.22)); }
.drop-shadow-lg { filter: drop-shadow(0 8px 32px rgba(11, 34, 51, 0.28)); }

[data-theme="dark"] .drop-shadow-sm { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); }
[data-theme="dark"] .drop-shadow-md { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.55)); }
[data-theme="dark"] .drop-shadow-lg { filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.65)); }

/* ===== SHAPE CUTS =====
   .cube — 45° rotated cube (clean diamond silhouette).
   Mirrors cubePath(). */
.cube {
  clip-path: polygon(
    50% 0%, 100% 50%, 50% 100%, 0% 50%
  );
}

/* ===== .hexagon — regular flat-top hexagon (equal edge lengths) =====
   Height adjusted so it's not stretched when square. */
.hexagon {
  clip-path: polygon(
    25% 6.7%, 75% 6.7%, 100% 50%,
    75% 93.3%, 25% 93.3%, 0% 50%
  );
}

/* ===== .star-8 — true {8/2} octagram =====
   Two squares at 45°; inner/outer vertex ratio 0.7654,
   mirroring kPalaceOctagramInnerRatio in palace_shapes.dart.
   Best on square elements. */
.star-8 {
  clip-path: polygon(
    50% 0%, 64.64% 14.64%, 85.36% 14.64%, 85.36% 35.36%,
    100% 50%, 85.36% 64.64%, 85.36% 85.36%, 64.64% 85.36%,
    50% 100%, 35.36% 85.36%, 14.64% 85.36%, 14.64% 64.64%,
    0% 50%, 14.64% 35.36%, 14.64% 14.64%, 35.36% 14.64%
  );
}

/* Star silhouettes need breathing room for their tips. */
.cube,
.hexagon,
.star-8 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== THEME TOGGLE =====
   Auto-injected by js/main.js into .footer-bottom-bar. */
.theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  font: 600 var(--text-xs)/1.4 var(--font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.theme-toggle:hover {
  color: var(--color-text);
}

/* =====================================================
   CROSS-BROWSER BEVEL — the parity layer
   ---------------------------------------------------
   corner-shape is Chromium-only (~68% of traffic), so it
   can never be the mechanism that decides how the site
   LOOKS: Firefox and every Safari, iOS included, would
   render a different design. Everything below uses
   clip-path, which is universally supported, so all
   browsers get the identical silhouette.

   clip-path cuts away borders and box-shadows, so:

   • BORDERS are redrawn as background layers. A
     transparent border still reserves its space; the fill
     paints to padding-box and the edge colour to
     border-box, making the "border" part of the
     background — which the clip then cuts to the same
     polygon as everything else.
   • SHADOWS become filter: drop-shadow(), which follows
     the clipped silhouette.

   This block is GENERATED from the border-radius rules in
   components.css / download-redesign.css / readme.css so
   every fill below is exactly what that component already
   declares. Regenerate rather than hand-edit.

   Excluded on purpose: true circles (avatars, step
   numbers, dots, radial glows) and the device mockups,
   which must keep looking like real hardware.
   ===================================================== */

/* ---- small chamfer ---- */
.logo img,
.mobile-nav .nav-link,
.download-btn .badge,
.hero-badge,
.footer-brand-col .footer-logo img,
.footer-social-btn,
.footer-badge,
.feature-tag,
.feature-text-bg,
.highlight-box,
.discount-badge,
.dl-back-btn,
.unlock-badge,
.chip-icon,
.chip-tag,
.store-card-tag,
.version-select-wrap,
#version-select,
.guide-container code,
#guide-search,
.code-copy-btn,
.guide-inline-shot figcaption {
  border-radius: 0;
  clip-path: var(--clip-bvl-sm);
}

/* Block code must NOT take the inline chip's clip: clip-path on a
   multi-line inline fragments the box and paints only the first line. */
.guide-container pre > code {
  clip-path: none;
}

/* ---- medium chamfer ---- */
.btn,
.feature-icon,
.platform-icon,
.download-btn,
.platform-badge,
.contact-box,
.verify-input,
.verify-btn-small,
.platform-group--multi,
.dl-chip,
.store-banner-icon,
.play-store-icon,
.play-store-shots img,
.guide-container pre,
.guide-tip,
.guide-note,
.guide-warning,
.feature-highlight-card,
.step-card,
.guide-nav-btn,
.platform-card-glass,
.capability-group,
.style-strip,
.showmode-cell,
.faq-item,
.guide-faq details,
.unlock-panel,
.install-help details,
.what-you-get-card,
.store-matrix-wrap {
  border-radius: 0;
  clip-path: var(--clip-bvl-md);
}

/* ---- large chamfer ---- */
.app-icon-fix,
.card,
.feature-card,
.platform-card,
.hero-image,
.hero-image img,
.screenshot-item,
.feature-showcase-icon,
.platform-btn-new,
.store-banner,
.purchase-notice,
.pitch-card {
  border-radius: 0;
  clip-path: var(--clip-bvl-lg);
}

/* ---- borders redrawn as background layers ----
   The edge colour sits behind --bvl-edge so :hover / :focus can recolour the
   drawn border the same way they used to recolour the real one. ---- */
.card {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    var(--gradient-card) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.feature-card {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    var(--gradient-card) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.platform-card {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    var(--gradient-card) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.download-btn {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.hero-badge {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.footer-social-btn {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.footer-badge {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.platform-badge {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.feature-tag {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.feature-text-bg {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.highlight-box {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) left / 4px 100% no-repeat border-box,
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.contact-box {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.platform-btn-new {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.verify-input {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.verify-btn-small {
  --bvl-edge: rgba(0,0,0,0.25);
  border-color: transparent;
  background:
    linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.dl-back-btn {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.unlock-badge {
  --bvl-edge: var(--color-success);
  border-color: transparent;
  background:
    linear-gradient(var(--color-success-bg), var(--color-success-bg)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.platform-group--multi {
  --bvl-edge: rgba(0,0,0,0.12);
  border-color: transparent;
  background:
    linear-gradient(rgba(0,0,0,0.03), rgba(0,0,0,0.03)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.dl-chip {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.chip-icon {
  --bvl-edge: var(--chip-icon-border, rgba(14,107,168,0.2));
  border-color: transparent;
  background:
    linear-gradient(var(--chip-icon-bg, rgba(14,107,168,0.1)), var(--chip-icon-bg, rgba(14,107,168,0.1))) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.chip-tag {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.store-banner {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.store-banner-icon {
  --bvl-edge: color-mix(in srgb, var(--icon-color, #0E6BA8) 25%, transparent);
  border-color: transparent;
  background:
    linear-gradient(color-mix(in srgb, var(--icon-color, #0E6BA8) 12%, transparent), color-mix(in srgb, var(--icon-color, #0E6BA8) 12%, transparent)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.play-store-shots img {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.purchase-notice {
  --bvl-edge: rgba(14,107,168,0.3);
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.04)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.version-select-wrap {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-bg-secondary), var(--color-bg-secondary)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
#version-select {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.guide-container pre {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.guide-tip {
  --bvl-edge: rgba(14, 107, 168, 0.25);
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(14, 107, 168, 0.08), rgba(63, 167, 214, 0.06)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.guide-note {
  --bvl-edge: rgba(16, 185, 129, 0.3);
  border-color: transparent;
  background:
    linear-gradient(var(--color-success-bg), var(--color-success-bg)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.guide-warning {
  --bvl-edge: rgba(202, 138, 4, 0.35);
  border-color: transparent;
  background:
    linear-gradient(var(--color-warning-bg), var(--color-warning-bg)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.feature-highlight-card {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    var(--gradient-card) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.step-card {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    var(--gradient-card) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}

/* ---- interactive states ---- */
.card:hover { --bvl-edge: var(--color-primary); }
.feature-card:hover { --bvl-edge: var(--color-primary); }
.platform-card:hover { --bvl-edge: var(--color-primary); }
.download-btn:hover { --bvl-edge: var(--color-primary); }
.footer-social-btn:hover { --bvl-edge: rgba(14,107,168,.45); }
.platform-badge:hover { --bvl-edge: var(--color-primary); }
.verify-input:focus { --bvl-edge: var(--color-primary); }
.dl-back-btn:hover { --bvl-edge: var(--color-text-dim); }
.dl-chip:hover { --bvl-edge: var(--chip-accent, var(--color-primary)); }
#version-select:hover { --bvl-edge: rgba(14,107,168,0.5); }
#version-select:focus { --bvl-edge: var(--color-primary); }
.feature-highlight-card:hover { --bvl-edge: var(--color-primary); }

/* New canvas — glass and onboarding surfaces. Glass is an opaque-ish fill
   that sits directly on the stage photo; its edge is just translucency, so
   the regular border rewrite is not needed. The bordered marketing cards
   below still need their 1px edge moved into the background. */
.what-you-get-card {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.unlock-panel {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.store-matrix-wrap {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.install-help details {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.faq-item {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--on-image-surface), var(--on-image-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.guide-faq details {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}

/* ---- shadows on clipped surfaces ----
   clip-path cuts box-shadow off at the polygon, so every shadow on a beveled
   element is re-cast as a filter, which follows the clipped silhouette. ---- */

.logo img,
.feature-icon,
.feature-text-bg,
.screenshot-item,
.dl-chip:hover {
  box-shadow: none;
  filter: var(--fx-shadow-md);
}

.btn-primary,
.btn-accent {
  box-shadow: none;
  filter: var(--fx-shadow-md) var(--fx-glow);
}
.btn-accent { filter: var(--fx-shadow-md) var(--fx-glow-accent); }

.btn-primary:hover,
.btn-accent:hover,
.card:hover,
.feature-card:hover,
.screenshot-item:hover,
.hero-image,
.feature-showcase-icon {
  box-shadow: none;
  filter: var(--fx-shadow-lg) var(--fx-glow);
}
.btn-accent:hover { filter: var(--fx-shadow-lg) var(--fx-glow-accent); }

.platform-card:hover,
.platform-badge:hover {
  box-shadow: none;
  filter: var(--fx-shadow-lg);
}

.download-btn  { box-shadow: none; filter: var(--fx-shadow-md); }
.discount-badge { box-shadow: none; filter: drop-shadow(0 3px 8px rgba(228, 164, 91, 0.35)); }

/* ---- focus rings ----
   An outset ring (box-shadow or outline) is clipped away entirely, which would
   leave keyboard users with no visible focus at all. Inset rings are drawn
   inside the silhouette, so they survive the clip. ---- */
/* The outset ring components.css puts on .btn:focus is clipped to nothing —
   drop it, then draw an inset ring for keyboard focus only. */
.btn:focus { box-shadow: none; }
.btn:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-primary);
  outline: none;
}
.verify-input:focus,
#version-select:focus {
  box-shadow: inset 0 0 0 2px rgba(14, 107, 168, 0.35);
  outline: none;
}

/* ---- small controls take the shallow cut ----
   Depth is a fixed length, so on a short control a medium chamfer eats too
   much of the height. Anything compact drops to the small bevel. ---- */
.btn-sm,
.verify-btn-small,
.guide-nav-btn,
.chip-icon,
.play-store-icon,
.store-banner-icon {
  border-radius: 0;
  clip-path: var(--clip-bvl-sm);
}

/* ---- variant classes ----
   These add a border (or a radius) without declaring a border-radius of their
   own, so they are invisible to the generator above — it keys off rules that
   set border-radius. Their border still has to move into the background, or
   the clip cuts it at the chamfers. ---- */

.btn-secondary,
.hero .btn-secondary.hero-secondary {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.btn-secondary:hover,
.hero .btn-secondary.hero-secondary:hover {
  --bvl-edge: var(--color-primary);
  background:
    linear-gradient(rgba(14, 107, 168, 0.12), rgba(14, 107, 168, 0.12)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}

.chip-tag.new      { --bvl-edge: rgba(16, 185, 129, 0.30); }
.chip-tag.soon     { --bvl-edge: rgba(63, 167, 214, 0.30); }
.store-card-tag.live,
.store-card-tag.soon { border-color: transparent; }
.store-card-tag.live {
  --bvl-edge: rgba(16, 185, 129, 0.35);
  background:
    linear-gradient(var(--color-success-bg), var(--color-success-bg)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.store-card-tag.soon {
  --bvl-edge: rgba(63, 167, 214, 0.30);
  background:
    linear-gradient(rgba(63, 167, 214, 0.12), rgba(63, 167, 214, 0.12)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}
.guide-nav-btn {
  --bvl-edge: var(--color-surface-border);
  border-color: transparent;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    linear-gradient(var(--bvl-edge), var(--bvl-edge)) border-box;
}

/* ---- stray radii on clipped elements ----
   A radius shallower than the chamfer is harmless, but a deeper one wins and
   hides the bevel entirely. ---- */
.feature-showcase-image,
.step-number.star-8,
.error-buttons .btn,
.btn.bvl-sm,
.btn.bvl,
.btn.bvl-lg {
  border-radius: 0;
}

/* Variant classes set border-color at higher specificity than the base rule. */
.chip-tag.new,
.chip-tag.soon,
.chip-tag.new.soon { border-color: transparent; }

/* .guide-nav-btn-primary is a filled variant of .guide-nav-btn. The border
   rewrite above would otherwise replace its gradient with the plain surface
   fill, leaving white label text on a white button. */
.guide-nav-btn-primary {
  --bvl-edge: transparent;
  border-color: transparent;
  background: var(--gradient-primary) padding-box;
}

/* ===== TOOLBAR THEME TOGGLE =====
   Injected by js/main.js into the header nav (and mobile menu). Compact
   icon+label button matching .btn-sm metrics so it sits flush with
   "Use now". */
.theme-toggle-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font: 600 var(--text-sm)/1.4 var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: none; /* the bvl-sm clip is the decoration */
}
.theme-toggle-nav:hover {
    color: var(--color-primary);
}
.theme-toggle-nav svg {
    display: block;
}

/* Mobile menu variant: full-width row. */
.mobile-nav .theme-toggle-nav {
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-6);
}