/* ==========================================================================
   base.css — reset, layout primitives, type scale, controls, animations

   Sections:
     1. Reset
     2. Focus
     3. Keyframes and entrance utilities
     4. Layout primitives
     5. Type scale
     6. Eyebrow / heading devices
     7. Buttons
     8. Surfaces — card, panel, media, glass
     9. Code and terminal
    10. Links
    11. Utilities
    12. No-JavaScript fallbacks
    13. Reduced motion
    14. Print

   The legacy Carbon class names (.btn--primary, .section-heading, .eyebrow …)
   are kept as aliases onto the new system so existing markup restyles without
   being rewritten wholesale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep in-page anchors clear of the floating header */
  scroll-padding-top: calc(var(--ds-header-height) + var(--ds-space-7));
  background-color: var(--ds-color-bg-page);
}

/* Horizontal bleed is contained per-section. `clip` rather than `hidden`
   because `hidden` makes this a scroll container and breaks sticky children. */
@supports (overflow: clip) {
  html {
    overflow-x: clip;
  }
}

body {
  margin: 0;
  background-color: var(--ds-color-bg-page);
  color: var(--ds-color-text-primary);
  font-family: var(--ds-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-locked {
  overflow: hidden;
}

/* A low-contrast moving field continues the hero's energy through the whole
   landing page. Because it is the main element's own background, it is always
   behind the content and cannot interfere with stacking or interaction. */
main {
  background:
    radial-gradient(ellipse 65% 30% at 8% 22%, rgba(15, 98, 254, 0.13), transparent 70%),
    radial-gradient(ellipse 58% 26% at 90% 48%, rgba(51, 177, 255, 0.1), transparent 72%),
    radial-gradient(ellipse 52% 24% at 42% 82%, rgba(138, 63, 252, 0.07), transparent 70%);
  background-size: 150% 150%, 160% 160%, 170% 170%;
  background-position: 0 0, 100% 20%, 40% 100%;
  animation: landing-background-drift 30s var(--ds-ease-in-out) infinite alternate;
}

@keyframes landing-background-drift {
  to {
    background-position: 24% 12%, 74% 38%, 58% 70%;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
video,
svg,
picture {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

a {
  color: var(--ds-color-text-primary);
  text-decoration: none;
}

button {
  margin: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

/* Thin, tinted scrollbars to match the dark shell */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ds-color-scrollbar) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background-color: var(--ds-color-scrollbar);
  border-radius: var(--ds-radius-pill);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* --------------------------------------------------------------------------
   2. Focus
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--ds-border-width-thick) solid var(--ds-color-focus);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   3. Keyframes and entrance utilities

   Four signature animations, ported from the reference:
     ds-hero-enter   staggered fade + rise + deblur for above-the-fold content
     arrow-sweep     draws an arrow's stroke on hover
     blink           terminal caret
     rotating-border a conic gradient sweeping a card's border
     ds-trail-line   a milestone rule drawing out from the left
     ds-trail-dot    a milestone dot dropping in behind its rule
     ds-stagger-in   one item of a [data-stagger] group arriving in its turn

   Section-local keyframes live with their section: hero.css, voting.css and
   page-bg.css each define their own.
   -------------------------------------------------------------------------- */

@keyframes ds-hero-enter {
  0% {
    opacity: 0;
    transform: translateY(var(--enter-y, 20px));
    filter: blur(var(--enter-blur, 0));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes arrow-sweep {
  0% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes rotating-border {
  0% {
    --border-angle: 0deg;
  }
  100% {
    --border-angle: 360deg;
  }
}

/* The membership timeline draws itself: each step's rule sweeps out from the
   left, then its dot drops in. Sequenced per step via --trail-i. */
@keyframes ds-trail-line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes ds-trail-dot {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  65% {
    opacity: 1;
    transform: scale(1.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



/* Above-the-fold entrance. Each element sets its own --enter-y, --enter-blur,
   animation-duration and animation-delay inline, which is how the reference
   stages the hero. `backwards` holds the start frame during the delay. */
.ds-hero-enter {
  animation: ds-hero-enter var(--ds-duration-enter) var(--ds-ease-out) backwards;
}

/* Scroll-triggered reveal. Starts hidden only once JS is present, so the page
   stays fully readable when JS is off or fails. */
.js .ds-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ds-ease-out), transform 700ms var(--ds-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .ds-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Sections share a quiet arrival cue. Individual cards still keep their own
   reveal; this only animates a background halo, so content is never hidden. */
main > .section {
  isolation: isolate;
}

main > .section::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 12% 0;
  pointer-events: none;
  background: radial-gradient(ellipse 54% 44% at 50% 40%, rgba(15, 98, 254, 0.09), transparent 72%);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 900ms var(--ds-ease-out), transform 1100ms var(--ds-ease-out);
}

main > .section.is-in-view::after {
  opacity: 1;
  transform: scale(1);
}

/* Staggered group. Every child of a [data-stagger] container arrives in turn,
   so a grid cascades instead of landing as one block. main.js sets each
   child's --reveal-delay; the hidden state is keyed on the attribute so it is
   in place from the first paint.

   This is an animation rather than a transition because it carries the same
   rise + deblur as the hero entrance, and `both` is what holds the start frame
   through the delay and the end frame afterwards. */
@keyframes ds-stagger-in {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.js [data-stagger] > * {
  opacity: 0;
}

/* opacity is restated here on purpose. The animation's `forwards` fill would
   hold the end frame anyway, but then the visible state would depend entirely
   on the animation running — kill it, and the element goes invisible. Setting
   the resting state in CSS means the animation only supplies the motion. */
.js [data-stagger] > *.is-visible {
  opacity: 1;
  animation: ds-stagger-in 700ms var(--ds-ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* Scroll-linked dimming for stepped feature lists: everything sits muted
   until it becomes the active step. */
.js .ds-dim {
  opacity: 0.35;
  transition: opacity var(--ds-duration-slower) var(--ds-ease-standard);
}

.js .ds-dim.is-active {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.ds-container,
.container {
  width: var(--ds-container);
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 48px, 720px);
}

.container--wide {
  width: min(100% - 48px, 1320px);
}

@media (min-width: 768px) {
  .ds-container,
  .container {
    width: min(100% - 144px, 1140px);
  }

  .container--narrow {
    width: min(100% - 144px, 720px);
  }

  .container--wide {
    width: min(100% - 96px, 1320px);
  }
}

@media (min-width: 1560px) {
  .ds-container,
  .container {
    width: min(100% - 160px, 1280px);
  }
}

.section {
  position: relative;
  padding-block: var(--ds-section-y);
}

/* Pages without a hero (pricing) open straight onto a section, which would
   otherwise start underneath the fixed header. Clear it. */
main > .section:first-child {
  padding-top: calc(var(--ds-header-height) + var(--ds-section-y-tight));
}

.section--tight {
  padding-block: var(--ds-section-y-tight);
}

.section--flush {
  padding-block: 0;
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-top: var(--flow, var(--ds-space-4));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}

/* --------------------------------------------------------------------------
   5. Type scale
   -------------------------------------------------------------------------- */

.ds-text-hero {
  font-family: var(--ds-font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 130%;
}

.ds-text-heading1 {
  font-family: var(--ds-font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
}

.ds-text-subtitle {
  font-family: var(--ds-font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 150%;
}

.ds-text-title {
  font-family: var(--ds-font-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 150%;
}

.ds-text-body {
  font-family: var(--ds-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  text-wrap: pretty;
}

.ds-text-caption {
  font-family: var(--ds-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}

@media (min-width: 768px) {
  .ds-text-hero {
    font-size: 46px;
  }

  .ds-text-heading1 {
    font-size: 36px;
  }
}

/* Legacy display aliases, mapped onto the new scale */
.display-01,
.display-02 {
  font-family: var(--ds-font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 130%;
}

.heading-fluid-04 {
  font-family: var(--ds-font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 140%;
}

.heading-fluid-03 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 150%;
}

@media (min-width: 768px) {
  .display-01 {
    font-size: 46px;
  }

  .display-02 {
    font-size: 56px;
  }

  .heading-fluid-04 {
    font-size: 36px;
  }
}

.lede {
  max-width: 46ch;
  font-size: 18px;
  line-height: 160%;
  color: var(--ds-color-text-description);
}

.body-copy,
.text-secondary {
  color: var(--ds-color-text-description);
  line-height: 160%;
}

.mono {
  font-family: var(--ds-font-mono);
}

/* --------------------------------------------------------------------------
   6. Eyebrow and heading devices

   The reference sets small metadata labels as mono, uppercase, wide-tracked
   text inside a translucent pill.
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-2) var(--ds-space-3);
  padding: 6px var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-color-bg-surface-1);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-text-secondary);
  backdrop-filter: blur(var(--ds-blur-glass));
  -webkit-backdrop-filter: blur(var(--ds-blur-glass));
}

.eyebrow--accent {
  color: var(--ds-color-brand);
  border-color: color-mix(in srgb, var(--ds-color-brand) 40%, transparent);
}

/* A short gradient rule, used where a section wants an accent mark instead */
.eyebrow__rule {
  display: block;
  width: var(--ds-space-7);
  height: 3px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-gradient-accent);
}

/* Section headings. The trailing slash in the markup is kept but toned down
   so it reads as punctuation rather than a Carbon-era device. */
.section-heading {
  font-family: var(--ds-font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.02em;
  color: var(--ds-color-text-primary);
}

@media (min-width: 768px) {
  .section-heading {
    font-size: 36px;
  }
}

.section-heading__slash,
.videos__slash,
.voting__slash,
.cta__slash {
  color: var(--ds-color-brand);
  font-weight: 400;
}

/* Inline code-ish token, e.g. a session tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 5px var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-color-bg-surface-2);
  color: var(--ds-color-text-secondary);
  font-family: var(--ds-font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.tag--accent {
  border-color: color-mix(in srgb, var(--ds-color-brand) 45%, transparent);
  color: var(--ds-color-brand);
}

/* --------------------------------------------------------------------------
   7. Buttons

   Pill geometry with a radial "liquid" wipe: a circular ::after scales up
   from the centre on hover. `overflow: hidden` plus `isolation: isolate`
   keep that wipe inside the pill and behind the label.
   -------------------------------------------------------------------------- */

.ds-btn-primary,
.ds-btn-secondary,
.ds-btn-ghost,
.ds-btn-liquid,
.ds-btn-text,
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border: var(--ds-border-width) solid transparent;
  border-radius: var(--ds-radius-pill);
  box-sizing: border-box;
  font-family: var(--ds-font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 120%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--ds-duration-slow) var(--ds-ease-standard),
    color var(--ds-duration-slow) var(--ds-ease-standard);
}

.ds-btn-primary::after,
.ds-btn-secondary::after,
.ds-btn-ghost::after,
.ds-btn-liquid::after,
.ds-btn-text::after,
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  z-index: -1;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 360ms var(--ds-ease-out), opacity 100ms ease;
}

.ds-btn-primary:hover::after,
.ds-btn-secondary:hover::after,
.ds-btn-ghost:hover::after,
.ds-btn-liquid:hover::after,
.ds-btn-text:hover::after,
.btn:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Variants */
.ds-btn-primary,
.btn--primary {
  background-color: var(--ds-btn-primary-bg);
  color: var(--ds-btn-primary-text);
  border-color: var(--ds-btn-primary-border);
}

.ds-btn-primary::after,
.btn--primary::after {
  background-color: var(--ds-btn-primary-hover-bg);
}

.ds-btn-secondary,
.btn--secondary {
  background-color: var(--ds-btn-secondary-bg);
  color: var(--ds-btn-secondary-text);
  border-color: var(--ds-btn-secondary-border);
  backdrop-filter: blur(var(--ds-blur-glass));
  -webkit-backdrop-filter: blur(var(--ds-blur-glass));
}

.ds-btn-secondary::after,
.btn--secondary::after {
  background-color: var(--ds-btn-secondary-hover-bg);
}

.ds-btn-secondary:hover,
.btn--secondary:hover {
  border-color: var(--ds-btn-secondary-hover-border);
}

/* Tertiary and ghost both read as the reference's ghost button */
.ds-btn-ghost,
.btn--ghost,
.btn--tertiary {
  background-color: var(--ds-btn-ghost-bg);
  color: var(--ds-btn-ghost-text);
  border-color: var(--ds-btn-ghost-border);
  font-weight: 400;
}

.ds-btn-ghost::after,
.btn--ghost::after,
.btn--tertiary::after {
  background-color: var(--ds-btn-ghost-hover-bg);
}

.ds-btn-ghost:hover,
.btn--ghost:hover,
.btn--tertiary:hover {
  border-color: var(--ds-btn-ghost-hover-border);
}

.btn--tertiary {
  border-color: var(--ds-color-border-input);
}

.event-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.event-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.event-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 16, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.event-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 1100px);
  height: min(82vh, 820px);
  display: flex;
  flex-direction: column;
  background: rgba(13, 18, 27, 0.96);
  border: 1px solid rgba(152, 196, 255, 0.18);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.event-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(152, 196, 255, 0.12);
  background: rgba(18, 24, 36, 0.9);
}

.event-modal__eyebrow {
  margin-bottom: 4px;
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-text-description);
}

.event-modal__header h2 {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.2;
}

.event-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(152, 196, 255, 0.18);
  background: rgba(255, 255, 255, 0.02);
  color: var(--ds-color-text-primary);
  cursor: pointer;
}

.event-modal__close svg {
  width: 18px;
  height: 18px;
}

.event-modal__body {
  flex: 1;
  padding: 28px 20px 24px;
  overflow-y: auto;
  background:
    radial-gradient(circle at top, rgba(53, 125, 255, 0.12), transparent 30%),
    rgba(9, 12, 18, 0.94);
}

.event-modal__card {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px;
  border: 1px solid rgba(152, 196, 255, 0.12);
  border-radius: 20px;
  background: rgba(17, 24, 35, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.event-modal__tag {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(120, 170, 255, 0.24);
  background: rgba(120, 170, 255, 0.08);
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-brand);
}

.event-modal__card h3 {
  margin-top: 18px;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.event-modal__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 24px;
  padding: 18px 0;
  border-top: 1px solid rgba(152, 196, 255, 0.12);
  border-bottom: 1px solid rgba(152, 196, 255, 0.12);
}

.event-modal__meta div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-modal__meta dt {
  font-family: var(--ds-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-color-text-description);
}

.event-modal__meta dd {
  font-size: 1.05rem;
  color: var(--ds-color-text-primary);
}

.event-modal__text {
  margin-top: 18px;
  color: var(--ds-color-text-description);
  font-size: 1.02rem;
}

.policy-list {
  display: grid;
  gap: var(--ds-space-3);
  margin: 0;
  padding-left: 1.4rem;
  color: var(--ds-color-text-description);
}

.policy-list li {
  padding-left: var(--ds-space-1);
  line-height: 1.6;
}

.policy-list strong {
  color: var(--ds-color-text-primary);
}

.event-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.ds-btn-liquid {
  border: none;
  background-color: var(--ds-btn-liquid-bg);
  color: var(--ds-color-static-black);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(115, 163, 210, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
  transition: box-shadow var(--ds-duration-base);
}

.ds-btn-liquid::after {
  background-color: var(--ds-btn-liquid-hover-bg);
}

.ds-btn-liquid:hover {
  box-shadow: 0 4px 12px rgba(115, 163, 210, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.ds-btn-text {
  padding: var(--ds-space-3) var(--ds-space-4);
  background: transparent;
  color: var(--ds-color-brand);
}

.ds-btn-text::after {
  background-color: var(--ds-btn-secondary-hover-bg);
}

/* Sizes */
.ds-btn-m {
  font-size: 15px;
  padding: 11px 18px;
}

.ds-btn-s,
.btn--sm {
  font-size: 14px;
  padding: var(--ds-space-2) var(--ds-space-3);
}

.ds-btn-xs {
  font-size: 14px;
  padding: 6px 12px;
}

.ds-btn-l,
.btn--lg {
  font-size: 16px;
  padding: 14px 24px;
}

.ds-btn-m svg,
.btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.ds-btn-s svg,
.ds-btn-xs svg,
.btn--sm svg {
  width: 14px;
  height: 14px;
}

.btn--block {
  width: 100%;
}

/* The reference leads with the icon; existing markup puts .btn__icon after
   the label, so reorder visually rather than editing every button. */
.btn__icon {
  order: -1;
}

.btn[aria-disabled='true'],
.btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Surfaces
   -------------------------------------------------------------------------- */

.ds-card {
  border: var(--ds-border-width) solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-card);
  background-color: var(--ds-color-bg-surface-3);
}

.ds-panel {
  border: var(--ds-border-width) solid var(--ds-color-border-default);
  border-radius: var(--ds-radius-panel);
  background-color: var(--ds-color-bg-surface-2);
}

.ds-media {
  overflow: hidden;
  border: var(--ds-border-width) solid var(--ds-color-border-subtle);
  border-radius: var(--ds-radius-media);
  background-color: var(--ds-color-bg-surface-3);
}

.ds-glass {
  background-color: var(--ds-color-bg-surface-raised);
  backdrop-filter: blur(var(--ds-blur-glass));
  -webkit-backdrop-filter: blur(var(--ds-blur-glass));
  border: var(--ds-border-width) solid var(--ds-color-border-default);
}

/* Featured surface with a conic gradient sweeping its border. The gradient
   lives on a padded parent; the inner fill masks all but a 1px rim. */
.ds-card--featured {
  position: relative;
  background:
    linear-gradient(var(--ds-color-bg-page), var(--ds-color-bg-page)) padding-box,
    conic-gradient(
        from var(--border-angle),
        transparent 0%,
        var(--ds-color-brand) 12%,
        var(--purple-50) 25%,
        transparent 40%,
        transparent 100%
      )
      border-box;
  border: var(--ds-border-width) solid transparent;
  animation: rotating-border 6s linear infinite;
}

/* --------------------------------------------------------------------------
   9. Code and terminal
   -------------------------------------------------------------------------- */

.ds-code {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-input);
  background-color: var(--ds-color-bg-code);
  font-family: var(--ds-font-mono);
  font-size: 14px;
  line-height: 160%;
}

.ds-code__prompt {
  user-select: none;
  color: var(--ds-color-brand);
}

.ds-code__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ds-color-text-primary);
}

.ds-code__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-1);
  padding: 2px 6px;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-color-text-description);
  font-family: var(--ds-font-sans);
  font-size: 12px;
  cursor: pointer;
  transition: color var(--ds-duration-base), background-color var(--ds-duration-base);
}

.ds-code__copy:hover {
  color: var(--ds-color-text-primary);
  background-color: var(--ds-color-bg-hover);
}

.ds-code__copy svg {
  width: 13px;
  height: 13px;
}

/* Blinking caret, for the terminal prompt */
.ds-caret {
  display: inline-block;
  width: 8px;
  height: 1.05em;
  vertical-align: text-bottom;
  background-color: var(--ds-color-brand);
  animation: blink 1.1s steps(1, end) infinite;
}

/* --------------------------------------------------------------------------
   10. Links
   -------------------------------------------------------------------------- */

a:hover {
  color: var(--ds-color-brand);
}

/* Dashed-underline inline link, as used in the reference's body copy */
.ds-link,
.river__link a:not(.link-arrow) {
  color: var(--ds-color-text-primary);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--ds-color-border-divider);
  text-underline-offset: 4px;
  transition: color var(--ds-duration-base);
}

.ds-link:hover {
  color: var(--ds-color-brand);
}

/* Arrow link. The stroke draws itself on hover via arrow-sweep. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  color: var(--ds-color-text-primary);
  font-size: 15px;
  font-weight: 500;
  transition: color var(--ds-duration-base) var(--ds-ease-standard);
}

.link-arrow svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  transition: transform var(--ds-duration-base) var(--ds-ease-standard);
}

.link-arrow:hover {
  color: var(--ds-color-brand);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}

.link-arrow:hover svg path {
  stroke-dasharray: 20;
  animation: arrow-sweep var(--ds-duration-slow) var(--ds-ease-out) forwards;
}

/* --------------------------------------------------------------------------
   11. Utilities
   -------------------------------------------------------------------------- */

/* Sprite host — stays in the layout tree so <use> keeps resolving */
.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--ds-space-2);
  left: var(--ds-space-2);
  z-index: var(--ds-z-toast);
  padding: var(--ds-space-3) var(--ds-space-4);
  border-radius: var(--ds-radius-pill);
  background-color: var(--ds-color-static-white);
  color: var(--ds-color-static-black);
  font-size: 14px;
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--ds-duration-base) var(--ds-ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.no-wrap {
  white-space: nowrap;
}

.rule {
  border: 0;
  border-top: var(--ds-border-width) solid var(--ds-color-border-subtle);
}

.rule--gradient {
  height: 2px;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-gradient-accent);
}

/* Soft top glow, used behind hero and closing bands */
.ds-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ds-gradient-glow);
  pointer-events: none;
}

/* Faint dot field, the reference's texture behind the closing CTA */
.ds-dotfield::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.14) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 75%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   12. No-JavaScript fallbacks

   `no-js` is on <html> in the markup and swapped by main.js. Anything JS
   would reveal must be open without it, or the content becomes unreachable.
   -------------------------------------------------------------------------- */

.no-js .tabs__list {
  display: none;
}

.no-js .tabs__panel[hidden] {
  display: block;
}

.no-js .tabs__panel + .tabs__panel {
  margin-top: var(--ds-space-7);
}

.no-js .accordion__panel[hidden] {
  display: block;
}

.no-js .accordion__icon {
  display: none;
}

.no-js .accordion__trigger {
  cursor: default;
}

.no-js .carousel__controls {
  display: none;
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  main {
    animation: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Staggered entrances hold their start frame through the delay, so the
       delay has to go too or content sits invisible for its full stagger. */
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveals must land in their finished state, not their hidden one */
  .js .ds-reveal,
  .js [data-stagger] > * {
    opacity: 1;
    transform: none;
  }

  .js .ds-dim {
    opacity: 1;
  }

  .ds-caret {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   14. Print
   -------------------------------------------------------------------------- */

@media print {
  .site-nav,
  .nav-drawer,
  .carousel__controls,
  .testimonials__controls,
  .skip-link,
  .hero__backdrop {
    display: none !important;
  }

  .accordion__panel[hidden],
  .tabs__panel[hidden] {
    display: block !important;
  }

  .js .ds-reveal,
  .js .ds-dim,
  .js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}