/* Shared secondary navigation and native checkbox states in both app themes. */
/* Reserve the same thin scrollbar lane on long and short documents. */
html {scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
:where(*) {scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar {width:8px;height:8px}
::-webkit-scrollbar-thumb {background:var(--line-strong);border:2px solid var(--bg);border-radius:8px}
::-webkit-scrollbar-track {background:transparent}
@media(forced-colors:active){html,:where(*){scrollbar-color:auto}}
/* Content has its own base paint so native chrome can sample the shaded body. */
.ambient-surface {background-color:var(--bg)}
/* Site pages and shared dialogs use one button component and its variants.
   Dialogs are body siblings, outside About's #guidePage content container. */
:where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button {display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:46px;border-radius:10px;border:2px solid var(--ink);font-size:var(--font-button);font-weight:500;line-height:1.5;padding:12px 19px;transition:background .18s;text-decoration:none}
:where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button.primary {background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media(hover:hover){:where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button.primary:hover {background:var(--ink);border-color:var(--ink);filter:brightness(.92)}}
:where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button.secondary {color:var(--ink)}
:where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button .icon {width:20px;height:20px}
:where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button.small {min-height:40px;min-width:0;padding:6px 12px;gap:8px;font-size:var(--font-body);line-height:1.4;border-radius:9px}
:where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button.small .icon {width:16px;height:16px}
:where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button:disabled {opacity:.48;cursor:not-allowed}
@media(max-width:720px){
 :where(html[data-page="home"],html[data-page="contact"],html[data-page="system"],#guidePage,.device-dialog) .button:not(.small),
 html[data-page="home"] .hero-cta>.composer-cta {font-size:var(--font-lead)}
}
@media(min-width:721px){
 :where(html[data-page="home"],html[data-page="system"]) :is(.hero-actions .primary,.promise-actions .button,.deeper-layer .button),
 :is(#guidePage,.system-page) :is(.guide-purpose,.guide-cta-actions) .button:not(.small) {min-width:230px}
}
/* Regular buttons reveal their actual containing surface, including nested cards
   and translucent panels, instead of painting a separate white fill. */
.button:not(:is(.primary,.spectrum-selected,.quiet,.ghost)) {background:transparent}
@media(hover:hover){.button:not(:is(.primary,.spectrum-selected,.quiet,.ghost)):hover {background:transparent}}
.button.quiet,.button.quiet:active {background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
@media(hover:hover){.button.quiet:hover {background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}}
@media(hover:hover){.button.quiet:hover {color:var(--ink)}}
.button .icon {display:block;flex:none;align-self:center}

/* Prismatic is an opt-in regular button variant. Desktop content-page buttons
   borrow this treatment only on hover; mobile buttons require .prismatic. */
:root {
  --prismatic-spectrum:linear-gradient(110deg,#406abd 0%,#b84c69 25%,#94752e 48%,#347754 72%,#7855b0 100%);
  --prismatic-glow:0 0 11px rgba(64,106,189,.14),0 0 17px rgba(120,85,176,.12),inset 0 0 5px rgba(64,106,189,.10),inset 0 0 8px rgba(120,85,176,.08);
  --prismatic-text-glow:-2px 0 9px rgba(64,106,189,.16),2px 0 9px rgba(120,85,176,.14);
  --prismatic-icon:#7855b0;
  --prismatic-border-fallback:#7855b0;
  --prismatic-primary-base:#20282b;
  --prismatic-primary-glow-rest:0 0 2px transparent,0 0 4px transparent,0 0 6px transparent;
  --prismatic-primary-inset-glow-rest:inset 0 0 1px transparent,inset 0 0 2px transparent;
  --prismatic-primary-spectrum:linear-gradient(110deg,#709cdb 0%,#e187a5 25%,#dbbd70 48%,#68c9a5 72%,#b48bdc 100%);
  --prismatic-primary-fill:linear-gradient(115deg,rgba(90,151,232,.055) 0%,rgba(233,117,160,.035) 27%,rgba(223,190,103,.02) 49%,rgba(92,202,156,.038) 73%,rgba(174,131,220,.055) 100%);
  --prismatic-primary-glow:0 0 12px rgba(85,133,240,.32),0 0 26px rgba(164,103,233,.29),0 0 38px rgba(69,164,116,.16);
  --prismatic-primary-inset-glow:inset 0 0 9px rgba(114,169,255,.20),inset 0 0 18px rgba(200,153,255,.15);
}
:root[data-theme="dark"] {
  --prismatic-spectrum:linear-gradient(110deg,#a6c2ff 0%,#ffc0c8 25%,#f4dc9e 48%,#a8e4c7 72%,#d6bafc 100%);
  --prismatic-glow:0 0 12px rgba(166,194,255,.19),0 0 19px rgba(214,186,252,.17),inset 0 0 5px rgba(166,194,255,.13),inset 0 0 9px rgba(214,186,252,.10);
  --prismatic-text-glow:-2px 0 9px rgba(166,194,255,.19),2px 0 9px rgba(214,186,252,.16);
  --prismatic-icon:#d6bafc;
  --prismatic-border-fallback:#d6bafc;
  --prismatic-primary-spectrum:linear-gradient(110deg,#a7c9f4 0%,#edb1c7 25%,#eddaa0 48%,#9fe2c3 72%,#d2b8ef 100%);
  --prismatic-primary-fill:linear-gradient(115deg,rgba(148,191,250,.065) 0%,rgba(240,160,195,.045) 27%,rgba(233,208,131,.025) 49%,rgba(153,229,195,.043) 73%,rgba(205,172,247,.06) 100%);
  --prismatic-primary-glow:0 0 12px rgba(130,184,255,.40),0 0 27px rgba(207,163,255,.36),0 0 39px rgba(126,226,174,.20);
  --prismatic-primary-inset-glow:inset 0 0 10px rgba(145,196,255,.23),inset 0 0 20px rgba(218,187,255,.18);
}
@keyframes prismatic-shift {from{background-position:0% 50%}to{background-position:100% 50%}}
/* The gradient must drop immediately when a Shop step replaces Home,
   rather than transitioning from transparent text and briefly disappearing. */
@media(min-width:721px){
  .header-nav #headerStart {transition:text-decoration-color .22s ease}
}
/* Keep Start here a text link, not a prismatic button. The shared palette and
   subtle gradient motion appear on desktop content pages and on the Home
   landing only; the hidden landing switches it off inside the Shop flow. */
@media(min-width:721px) and (forced-colors:none){
  :is(html[data-page="home"]:has(#landing:not([hidden])),html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .header-nav #headerStart {
    color:transparent;
    background-image:var(--prismatic-spectrum);
    background-size:220% 100%;
    background-clip:text;
    -webkit-background-clip:text;
    animation:prismatic-shift 12s ease-in-out infinite alternate;
  }
}
@media(prefers-reduced-motion:reduce){
  .header-nav #headerStart {animation:none!important}
}
/* Match the native stroke footprint. Absolute pseudo-elements start at the
   padding edge, so their gradient ring must extend THROUGH the real border.
   The two strokes crossfade in one footprint, never as nested outlines. */
:where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"],#guidePage,.device-dialog) .button {
  --prismatic-border-width:2px;
}
.button.prismatic:not(:is(.primary,.quiet,.ghost,.spectrum-selected)):not(:disabled),
:where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button:not(:is(.primary,.quiet,.ghost,.icon-only,.spectrum-selected,.prismatic)):not(:disabled) {
  position:relative;
  isolation:isolate;
  background-image:var(--prismatic-spectrum);
  background-size:220% 100%;
  background-clip:text;
  -webkit-background-clip:text;
  animation:prismatic-shift 12s ease-in-out infinite alternate paused;
  transition:color .3s ease,border-color .3s ease,text-shadow .3s ease,box-shadow .3s ease,background-color .3s ease;
}
.button.prismatic:not(:is(.primary,.quiet,.ghost,.spectrum-selected)):not(:disabled) {
  border-color:transparent;
  color:transparent;
  text-shadow:var(--prismatic-text-glow);
  box-shadow:var(--prismatic-glow);
  animation-play-state:running;
}
/* Both the resting dark surface and hover gradient occupy identical rounded
   layers. An always-transparent native border removes corner anti-alias bleed
   from the old solid border underneath the gradient. */
:is(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary:not(:disabled) {
  position:relative;
  isolation:isolate;
  background:transparent;
  border-color:transparent;
}
:is(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary:not(:disabled)::after {
  content:"";
  position:absolute;
  inset:calc(0px - var(--prismatic-border-width,2px));
  border-radius:inherit;
  background:var(--ink);
  pointer-events:none;
  opacity:1;
  transition:opacity .3s ease;
  z-index:-2;
}
.button.prismatic:not(:disabled) .icon {color:var(--prismatic-icon);transition:color .3s ease}
:where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button:not(:is(.quiet,.ghost,.icon-only,.spectrum-selected)):not(:disabled) .icon {transition:color .3s ease}
/* Theme-adjusted icon accent is shared between explicit and hover states. */
/* The same spectrum drives label and border, with identical slow cadence. */
.button.prismatic:not(:disabled)::before,
:where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button:not(:is(.quiet,.ghost,.icon-only,.spectrum-selected)):not(:disabled)::before {
  content:"";
  position:absolute;
  inset:calc(0px - var(--prismatic-border-width,1px));
  /* Primary gets a 3px ring, occupying the original 2px border plus 1px of
     interior space. Inset stays fixed, so its outer box never grows. */
  padding:var(--prismatic-ring-width,var(--prismatic-border-width,1px));
  border-radius:inherit;
  pointer-events:none;
  background:var(--prismatic-ring,var(--prismatic-spectrum));
  background-size:220% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  animation:prismatic-shift 12s ease-in-out infinite alternate paused;
  transition:opacity .3s ease;
}
.button.prismatic:not(.primary):not(:disabled)::before {opacity:1;animation-play-state:running}
@media(min-width:721px) and (hover:hover) {
  :is(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary:not(:disabled) {
    --prismatic-ring:var(--prismatic-primary-spectrum);
    --prismatic-ring-width:3px;
    /* An opaque interior remains behind both fading surfaces. Clipping it to
       the padding box keeps dark paint away from the gradient's outer corners. */
    background:var(--ink);
    background-clip:padding-box;
    box-shadow:var(--prismatic-primary-glow-rest);
    transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .35s ease,filter .3s ease;
  }
  /* Primary only: use native rounded background clipping in place of the
     composited mask, which leaves corner seams at high-density pixels.
     The ring's outer edge still matches the original 2px border. Its third
     pixel and the faint tinted fill are drawn inward, under the button text. */
  :is(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary:not(:disabled)::before {
    z-index:-1;
    padding:0;
    border:3px solid transparent;
    -webkit-mask:none;
    mask:none;
    background:
      var(--prismatic-primary-fill) padding-box,
      linear-gradient(var(--prismatic-primary-base),var(--prismatic-primary-base)) padding-box,
      var(--prismatic-primary-spectrum) border-box;
    background-size:220% 100%,100% 100%,220% 100%;
    background-position:0% 50%,center,0% 50%;
    box-shadow:var(--prismatic-primary-inset-glow-rest);
    transition:opacity .3s ease,box-shadow .35s ease;
  }
  :where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button:not(:is(.primary,.quiet,.ghost,.icon-only,.spectrum-selected,.prismatic)):not(:disabled):hover {
    color:transparent;
    border-color:transparent;
    text-shadow:var(--prismatic-text-glow);
    box-shadow:var(--prismatic-glow);
    animation-play-state:running;
  }
  :where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button:not(:is(.quiet,.ghost,.icon-only,.spectrum-selected)):not(:disabled):hover::before {
    opacity:1;
    animation-play-state:running;
  }
  :where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button:not(:is(.primary,.quiet,.ghost,.icon-only,.spectrum-selected,.prismatic)):not(:disabled):hover .icon {
    color:var(--prismatic-icon);
  }
  /* A deep fill keeps white text readable in both themes. The spectrum border
     and outer glow ease in without brightness filters or a box-size change. */
  :is(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary:not(:disabled):hover {
    color:#fff;
    background-color:var(--prismatic-primary-base);
    border-color:transparent;
    filter:none;
    box-shadow:var(--prismatic-primary-glow);
  }
  :where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary:not(:disabled):hover .icon {color:#fff}
  :is(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary:not(:disabled):hover::before {
    box-shadow:var(--prismatic-primary-inset-glow);
  }
  /* Fade the old solid layer completely out as the gradient arrives so there
     is no dark anti-aliased fringe at the corners after the hover settles. */
  :is(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary:not(:disabled):hover::after {
    opacity:0;
  }
}
/* A static border remains usable where compositing masks are unsupported. */
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)) {
  /* The mask-free primary gradient does not need a fallback. Only the regular
     masked variant loses its gradient ring in these browsers. */
  .button.prismatic:not(.primary)::before,
  :where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button:not(.primary)::before {display:none}
  .button.prismatic:not(:disabled):not(.primary) {border-color:var(--prismatic-border-fallback)}
  @media(min-width:721px) and (hover:hover) {
    :where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button:not(:disabled):not(:is(.primary,.ghost,.quiet,.icon-only)):hover {border-color:var(--prismatic-border-fallback)}
  }
}
/* Preserve contrast and do not animate ornamental color in accessibility modes. */
@media(prefers-reduced-motion:reduce) {
  .button.prismatic,:where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button {
    animation:none!important;
    transition-duration:.01ms!important;
  }
  .button.prismatic::before,:where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button::before,
  :where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button.primary::after {animation:none!important;transition-duration:.01ms!important}
}
@media(forced-colors:active) {
  .button.prismatic,:where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button {
    background-image:none!important;
    background-clip:border-box!important;
    -webkit-background-clip:border-box!important;
    color:ButtonText!important;
    text-shadow:none!important;
    box-shadow:none!important;
  }
  .button.prismatic::before,:where(html[data-page="home"],html[data-page="about"],html[data-page="system"],html[data-page="contact"]) .button::before {display:none!important}
}

.catalog-controls {background:var(--panel-solid);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:720px){
  /* Start with the actual panel color so the glass blend never crosses transparent. */
  .catalog-panel .catalog-controls:not(.is-stuck){background:inherit}
}
/* Clear at the top; the shared header surface becomes glass over scrolled content. */
.shop-header {position:sticky;top:0;z-index:40}
.shop-header,.topbar,.mobile-detail-nav,.guide-nav {background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .2s,box-shadow .2s}
.shop-header.is-scrolled,.mobile-detail-nav.is-scrolled,.mobile-product-view>.detail-summary.is-visible,.mobile-catalog-body .supplier-toolbar.is-stuck,.guide-nav.is-stuck,.catalog-controls.is-stuck {background:color-mix(in srgb,var(--bg) 76%,transparent);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.mobile-product-view>.mobile-detail-nav {position:relative;z-index:7;background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Sticky edges share the header treatment independently of their surface color. */
.shop-header.is-scrolled,.mobile-detail-nav.is-scrolled,.mobile-catalog-body .supplier-toolbar.is-stuck,.guide-nav.is-stuck,.catalog-controls.is-stuck,.catalog-panel.is-scrolled>.catalog-controls,.detail-summary.is-visible {border-bottom-color:transparent;box-shadow:0 1px 0 var(--line),inset 0 1px 0 color-mix(in srgb,var(--ink) 5%,transparent)}
.catalog-controls.is-stuck .catalog-filters {border-bottom-color:transparent}
.capability-tabs.is-scrolled {box-shadow:0 3px 8px #0001}
/* Keep one real separator above the summary, painted by the header on top. */
.mobile-product-view>.mobile-detail-nav.is-scrolled {border-bottom-color:var(--line);box-shadow:none}
.mobile-product-view>.detail-summary.is-visible {box-shadow:0 1px 0 var(--line)}
.guide-nav.is-stuck {box-shadow:0 1px 0 var(--line)}
@supports not (backdrop-filter:blur(1px)){.shop-header.is-scrolled,.mobile-detail-nav.is-scrolled,.mobile-product-view>.detail-summary.is-visible,.mobile-catalog-body .supplier-toolbar.is-stuck,.guide-nav.is-stuck,.catalog-controls.is-stuck{background:var(--bg)}}
@media(max-width:720px){
 .mobile-detail-nav{position:sticky;top:0;z-index:40}
 .shop-header #mobileMenuButton,.topbar #mobileMenuButton,.shop-header #exitShopFlow,.mobile-detail-nav .button.icon-only {display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--muted)}
 @media(hover:hover){.shop-header #mobileMenuButton:hover,.topbar #mobileMenuButton:hover,.shop-header #exitShopFlow:hover,.mobile-detail-nav .button.icon-only:hover {background:transparent;color:var(--ink)}}
 #mobileMenuButton .icon,#exitShopFlow .icon,.mobile-detail-nav .button.icon-only .icon {width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){.capability-tabs,.shop-header,.topbar,.mobile-detail-nav,.guide-nav,.catalog-controls,.detail-summary,.mobile-product-view>.detail-summary{transition:none}}
@media(prefers-reduced-transparency:reduce){.shop-header.is-scrolled,.mobile-detail-nav.is-scrolled,.mobile-product-view>.detail-summary.is-visible,.mobile-catalog-body .supplier-toolbar.is-stuck,.guide-nav.is-stuck,.catalog-controls.is-stuck{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}
input[type="checkbox"] {appearance:none;-webkit-appearance:none;box-sizing:border-box;display:inline-grid;place-content:center;flex:none;width:22px;height:22px;margin:0;padding:0;border:1px solid var(--muted);border-radius:5px;background:var(--bg);color:var(--bg);vertical-align:middle;cursor:pointer}
input[type="checkbox"]::before {content:"";width:11px;height:6px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-1px) rotate(-45deg);visibility:hidden}
input[type="checkbox"]:checked {background:var(--ink);border-color:var(--ink)}
input[type="checkbox"]:checked::before {visibility:visible}
input[type="checkbox"]:indeterminate {background:var(--ink);border-color:var(--ink)}
input[type="checkbox"]:indeterminate::before {height:0;border-left:0;transform:none;visibility:visible}
input[type="checkbox"]:disabled {opacity:.5;cursor:default}
@media(forced-colors:active){input[type="checkbox"]{appearance:auto;-webkit-appearance:auto}input[type="checkbox"]::before{display:none}.button.quiet:focus-visible{outline-color:Highlight}}

/* Keep browser/author focus rings for keyboard and virtual navigation only. */
:focus:not(:focus-visible),html[data-pointer-focus] :focus {outline:none!important}

/* Shared Home and About footer. */
.shop-footer{max-width:1344px;margin:auto;padding:20px 48px calc(35px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:22px}
.wordmark.small{font-size:var(--font-body);gap:8px}
.shop-footer p{font-size:var(--font-small);color:var(--quiet)}
.shop-footer .wordmark{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:650}
.shop-footer .footer-nav{display:flex;align-items:center;gap:20px;margin-left:auto}
.shop-footer .footer-nav :is(a,button){display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;color:var(--muted);font:inherit;font-size:var(--font-control);text-decoration:none}
.shop-footer .footer-nav .icon{width:16px;height:16px}
.guide-inner>.shop-footer{padding:28px 0 0;border-top:1px solid var(--line);margin-top:40px}
@media(max-width:720px){.shop-footer{padding:14px 22px calc(28px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:10px}.shop-footer p{flex:1;text-align:right}.shop-footer .footer-nav{width:100%;justify-content:space-between;margin-left:0;gap:10px}}



/* Fade each spectrum layer to zero before its rectangular paint boundary. */
.ambient-light{mask-image:radial-gradient(ellipse closest-side,#000 65%,transparent 100%)}

/* Shared wordmark layout for the planning header and mobile Details. */
.brand-mark { filter:none; }
.brand-home { display:flex; align-items:center; gap:13px; border:0; padding:0; color:inherit; background:none; cursor:pointer; text-align:left; border-radius:10px; }
@media(max-width:720px){.brand-home{gap:7px}}

/* Mobile content pages share one section/CTA breathing space. */
@media(max-width:720px){:root{--content-section-space:64px}}

:root{--content-cta-space:32px}