/* ==========================================================================
   DAYSWAY MARKETING WEBSITE — Phase M2B (Anchor-Referenced Craftsmanship)
   ========================================================================== */

:root {
  --bg: #f4f4f4;
  --surface: #eaeaea;
  --card: #ffffff;
  --cream: #f9f6f3;
  --stage: #e4e2ec;
  --ink: #2e2e2e;
  --ink-2: #29292999;
  --ink-3: #29292961;
  --line: #00000014;
  --cyan: #7c3aed;
  --purple: #9333ea;
  --green: #35c759;
  --orange: #ff8d28;
  --star: #ffab1a;
  --yellow: #ffcc00;
  --blue: #6d28d9;
  --indigo: #5b21b6;
  --daysway-accent: #7c3aed;
  --night: #0d0b14;
  --ocean-0: #160d29;
  --ocean-1: #231442;
  --ocean-2: #351d63;
  --radius-xl: 44px;
  --radius-l: 32px;
  --radius-m: 20px;
  --gutter: 20px;
  --max: 1240px;
  --section: 48px;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Mona Sans", "Inter", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Mona Sans", "Inter", sans-serif;
  --expanded: 132%;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-window: 0 1px 0 #ffffff66 inset, 0 30px 60px -20px #15092e59, 0 12px 24px -12px #00000040;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --section: 72px;
  }
}

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

html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

h1, h2, h3, p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 8px;
}

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.display {
  font-family: var(--font-display);
  font-stretch: var(--expanded);
  overflow-wrap: break-word;
  hyphens: auto;
  letter-spacing: -0.036em;
  font-weight: 760;
  line-height: 1.02;
}

.eyebrow {
  font-family: var(--font-display);
  font-stretch: var(--expanded);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink-2);
}

@media (min-width: 768px) {
  .eyebrow {
    font-size: 14px;
  }
}

.lead {
  color: var(--ink-2);
  max-width: 58ch;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 460;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* Squircle System */
[data-squircle] {
  --sq-r: 20px;
  --sq-s: 0.7;
  border-radius: var(--sq-r);
}

[data-squircle][data-sq-ready] {
  border-radius: 0px !important;
}

[data-squircle-border] {
  position: relative;
}

[data-squircle-border][data-sq-ready]::after {
  content: "";
  pointer-events: none;
  background-image: var(--sq-outline);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* Category Rotated Tag Pills */
.tag {
  --tint: var(--cyan);
  color: var(--tint);
  background-color: color-mix(in srgb, var(--tint) 16%, var(--bg));
  background-image: linear-gradient(#ffffff52, #ffffff00);
  --sq-r: 18px;
  --sq-border: #ffffffeb;
  --sq-border-w: 2.5px;
  font-family: var(--font-display);
  font-stretch: var(--expanded);
  letter-spacing: -0.02em;
  rotate: -3deg;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 11px 17px 11px 15px;
  font-size: 22px;
  font-weight: 760;
  line-height: 1;
  display: inline-flex;
  box-shadow: 0 18px 20px -12px color-mix(in srgb, var(--tint) 22%, transparent);
}

.tag > * {
  filter: url("#soft-s");
}

.tag svg {
  width: 22px;
  height: 22px;
  flex: none;
}

@media (min-width: 768px) {
  .tag {
    --sq-r: 22px;
    --sq-border-w: 3px;
    gap: 11px;
    padding: 13px 22px 13px 18px;
    font-size: 28px;
  }
  .tag svg {
    width: 26px;
    height: 26px;
  }
}

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

.only-desktop {
  display: none;
}

@media (min-width: 768px) {
  .only-phone {
    display: none !important;
  }
  .only-desktop {
    display: block;
  }
}

/* Entrance Reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   0. STICKY NAVBAR (`Nav`)
   ========================================================================== */
.nav-bar {
  pointer-events: none;
  z-index: 50;
  padding-top: 16px;
  position: sticky;
  top: 0;
}

.nav-bar > * {
  pointer-events: auto;
}

.nav-frame {
  max-width: calc(var(--max) + var(--gutter) * 2);
  padding-inline: var(--gutter);
  transition: max-width 0.55s var(--ease-out), padding 0.55s var(--ease-out);
  margin-inline: auto;
}

.nav-bar[data-scrolled="true"] .nav-frame {
  max-width: calc(1040px + var(--gutter) * 2);
}

.nav-inner {
  --sq-r: 999px;
  transition:
    background-color 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    backdrop-filter 0.45s var(--ease-out),
    -webkit-backdrop-filter 0.45s var(--ease-out),
    padding 0.55s var(--ease-out);
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 7px 0;
  display: grid;
}

.nav-bar[data-scrolled="true"] .nav-inner {
  backdrop-filter: saturate(1.8) blur(24px);
  -webkit-backdrop-filter: saturate(1.8) blur(24px);
  background: rgba(255, 255, 255, 0.72);
  padding: 7px 10px 7px 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 12px 32px -12px rgba(0, 0, 0, 0.12);
}

.nav-logo {
  color: var(--ink);
  justify-self: start;
  align-items: center;
  gap: 9px;
  display: inline-flex;
  font-family: var(--font-display);
  font-stretch: var(--expanded);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.035em;
}

.nav-logo-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px -2px rgba(109, 40, 217, 0.45);
}

.nav-logo-mark svg {
  width: 16px;
  height: 16px;
}

.nav-links {
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.nav-links a {
  color: var(--ink-2);
  transition: color 0.15s;
  font-size: 15px;
  font-weight: 560;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-actions {
  justify-self: end;
  align-items: center;
  gap: 8px;
  display: flex;
}

.nav-platform-pill {
  color: var(--ink-2);
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 11px;
  font-size: 13px;
  font-weight: 640;
  letter-spacing: 0.01em;
  display: inline-flex;
  border-radius: 999px;
  transition: color 0.15s, background-color 0.15s;
}

.nav-platform-pill:hover {
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
}

.nav-cta {
  color: var(--ink);
  background: #29292914;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background-color 0.2s;
  white-space: nowrap;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
}

@media (min-width: 768px) {
  .nav-cta {
    height: 50px;
    padding: 0 22px;
    font-size: 16px;
  }
}

.nav-cta:hover {
  background: #29292924;
  transform: scale(1.02);
}

@media (max-width: 820px) {
  .nav-inner {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    min-height: 54px;
  }
  .nav-bar[data-scrolled="true"] .nav-inner {
    padding: 7px 8px 7px 18px;
  }
  .nav-links {
    display: none;
  }
  .nav-platform-pill span {
    display: none;
  }
}

/* ==========================================================================
   CTA BUTTONS (`Downloads`)
   ========================================================================== */
.cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cta-wrap[data-align="start"] {
  align-items: flex-start;
}

.cta-row {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.cta-row.only-desktop {
  display: none;
}

@media (min-width: 768px) {
  .cta-row.only-desktop {
    display: flex;
  }
}

.cta-lift {
  display: inline-flex;
  border-radius: 18px;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  box-shadow: 0 18px 20px -12px rgba(0, 0, 0, 0.22);
}

.cta-lift:hover {
  transform: scale(1.02);
  box-shadow: 0 22px 26px -12px rgba(0, 0, 0, 0.26);
}

.cta-lift:active {
  transform: scale(0.98);
}

.cta-primary {
  --knockout: #ffffff;
  background-color: #1c1c1e;
  background-image: linear-gradient(#ffffff29, #ffffff00);
  color: #ffffff;
  --sq-r: 18px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  align-items: center;
  gap: 11px;
  height: 58px;
  padding: 0 26px 0 22px;
  font-size: 17px;
  font-weight: 600;
  display: inline-flex;
}

.cta-secondary {
  color: var(--ink);
  background: #29292914;
  --sq-r: 18px;
  border: 0;
  cursor: pointer;
  transition: transform 0.25s var(--ease-out), background-color 0.2s;
  white-space: nowrap;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 24px 0 22px;
  font-size: 17px;
  font-weight: 600;
  display: inline-flex;
}

.cta-secondary:hover {
  background: #29292924;
  transform: scale(1.02);
}

.cta-secondary:active {
  transform: scale(0.98);
}

/* ==========================================================================
   1. STICKY 3D SCROLL HERO (`HeroStage` + `Hero`)
   ========================================================================== */
.hero-copy {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  display: flex;
}

.hero-title {
  color: var(--ink);
  font-size: clamp(27px, 7.1vw, 68px);
  line-height: 1.02;
}

.hero-line {
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.22em;
  display: inline-flex;
}

.hero-soft {
  filter: url("#soft-s");
}

@media (min-width: 768px) {
  .hero-soft {
    filter: url("#soft-l");
  }
}

.hero-pill {
  vertical-align: -0.06em;
  display: inline-flex;
}

.hero-pill-body {
  color: #6d28d9;
  background-color: color-mix(in srgb, #7c3aed 16%, var(--bg));
  background-image: linear-gradient(#ffffff52, #ffffff00);
  --sq-r: 16px;
  --sq-border: #ffffffeb;
  --sq-border-w: 2.5px;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
  transform: rotate(-3deg);
  align-items: center;
  gap: 0.22em;
  height: 42px;
  padding: 0 14px 0 11px;
  display: inline-flex;
  box-shadow: 0 18px 20px -12px rgba(124, 58, 237, 0.24);
}

.hero-pill-icon {
  width: 0.86em;
  height: 0.86em;
  flex: none;
  display: inline-flex;
}

@media (min-width: 768px) {
  .hero-pill-body {
    --sq-r: 26px;
    --sq-border-w: 3.5px;
    height: 78px;
    padding: 0 26px 0 20px;
  }
}

@media (hover: hover) {
  .hero-pill-body:hover {
    transform: rotate(-1.5deg) scale(1.03);
    box-shadow: 0 22px 26px -12px rgba(124, 58, 237, 0.32);
  }
}

.hero-lead {
  margin-block: 2px 4px;
  max-width: 600px;
}

.hero-sublead {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 640;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.hero-submeta {
  margin-top: 8px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 560;
  color: var(--ink-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.hero-submeta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(53, 199, 89, 0.18);
}

.hero-rise {
  animation: 0.8s var(--ease-out) var(--d, 0ms) both hero-rise;
}

@keyframes hero-rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sticky Scroll Track */
.hero-track {
  height: 280svh;
  margin-bottom: -14svh;
  position: relative;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .hero-track {
    height: 290svh;
    margin-bottom: -24svh;
  }
}

.hero-stage {
  height: 100svh;
  position: sticky;
  top: 0;
  overflow: clip;
}

.hero-copy-layer {
  z-index: 2;
  min-height: 100svh;
  margin-top: -100svh;
  padding-top: clamp(28px, 5.2vh, 64px);
  position: relative;
}

.hero-frame {
  --zoom: 0;
  --tilt: 0;
  --exit: 0;
  --from: 1.04;
  --y0: 28%;
  opacity: calc(1 - var(--exit));
  filter: blur(calc(var(--exit) * 16px));
  will-change: transform, opacity, filter;
  transform: scale(calc(1 - var(--exit) * 0.08));
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: 0;
}

@media (min-width: 768px) {
  .hero-frame {
    --from: 1.06;
    --y0: 45%;
  }
}

.hero-scene {
  --w: min(92vw, calc(74svh * 0.724));
  width: var(--w);
  transform-origin: 50% 50%;
  will-change: transform;
  transform:
    translateY(calc((1 - var(--zoom)) * var(--y0) + var(--zoom) * 4%))
    scale(calc(var(--from) - var(--zoom) * (var(--from) - 0.96)));
  position: relative;
}

@media (min-width: 768px) {
  .hero-scene {
    --w: min(84vw, 1080px, calc(78svh * 1.512));
  }
}

.hero-hands {
  aspect-ratio: var(--ar-phone, 0.724);
  transform-origin: 50% 0%;
  will-change: transform;
  transform: perspective(1200px) rotateX(calc((1 - var(--tilt)) * 28deg));
  z-index: 2;
  width: 100%;
  position: relative;
}

@media (min-width: 768px) {
  .hero-hands {
    aspect-ratio: var(--ar-desk, 1.512);
    transform: perspective(1200px) rotateX(calc((1 - var(--tilt)) * 34deg));
  }
}

.hero-hands picture,
.hero-hands img {
  user-select: none;
  pointer-events: none;
  width: 100%;
  height: auto;
  display: block;
}

.hero-haze {
  opacity: calc(1 - var(--tilt));
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(#f4f4f400 0%, #f4f4f4bf 62%, var(--bg) 96%);
  height: 16%;
  position: absolute;
  bottom: 0;
  inset-inline: -30vw;
}

/* Floating Hero Planning Blocks (.bit) */
.hero-bit {
  --spread: 1.15;
  top: calc(var(--y) * 1%);
  left: calc(50% + var(--x) * var(--spread) * var(--w));
  z-index: 3;
  pointer-events: none;
  position: absolute;
}

@media (min-width: 768px) {
  .hero-bit {
    --spread: 1.04;
  }
}

.hero-bit[data-front] {
  z-index: 4;
}

.hero-pop {
  --b: 0;
  opacity: clamp(0, var(--b) * 1.6, 1);
  will-change: transform, opacity;
  transform:
    translate(-50%, -50%)
    translate(
      calc((1 - var(--b)) * var(--x) * -140px),
      calc((1 - var(--b)) * 36px)
    )
    scale(calc(var(--z) * (0.4 + var(--b) * 0.6)))
    rotate(calc(var(--tilt) * (1.8 - var(--b) * 0.8)));
  display: block;
}

.hero-drift {
  will-change: transform;
  display: block;
}

.hero-bob {
  animation: 5.2s ease-in-out calc(var(--n) * -0.65s) infinite hero-bob;
  display: block;
}

@keyframes hero-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

.hero-block {
  --ink-b: color-mix(in oklch, var(--c) 58%, #000);
  background: color-mix(in srgb, var(--c) 20%, #fff);
  color: var(--ink-b);
  white-space: nowrap;
  border-radius: 15px;
  flex-direction: column;
  justify-content: space-between;
  min-width: 152px;
  min-height: calc(var(--len) * 56px);
  padding: 9px 10px 9px 11px;
  display: flex;
  box-shadow:
    0 1px 0 #ffffffb3 inset,
    0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent),
    0 18px 36px -10px color-mix(in srgb, var(--c) 32%, #0000002e),
    0 6px 14px -4px #00000014;
}

.hero-block-head {
  align-items: center;
  gap: 6px;
  display: flex;
}

.hero-block-dot {
  background: var(--c);
  color: #fff;
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.hero-block-dot svg {
  width: 11px;
  height: 11px;
}

.hero-block-title {
  letter-spacing: -0.02em;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.15;
}

.hero-block-count {
  color: color-mix(in oklch, var(--c) 62%, #00000080);
  margin-left: -2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.hero-block-pill {
  background: color-mix(in srgb, var(--c) 20%, transparent);
  color: var(--ink-b);
  letter-spacing: -0.01em;
  border-radius: 999px;
  margin-left: auto;
  padding: 3px 7px;
  font-size: 10.5px;
  font-weight: 680;
  line-height: 1;
}

.hero-block-items {
  color: color-mix(in oklch, var(--c) 62%, #00000080);
  letter-spacing: -0.01em;
  padding-top: 8px;
  padding-left: 2px;
  font-size: 11px;
  font-weight: 560;
  line-height: 1.1;
}

/* Word-by-Word Scroll Statement */
.hero-next {
  --say: 0;
  pointer-events: none;
  z-index: 3;
  align-items: flex-end;
  padding-bottom: 20svh;
  display: flex;
  position: absolute;
  inset: 0;
}

@media (min-width: 768px) {
  .hero-next {
    padding-bottom: 27svh;
  }
}

.hero-statement {
  max-width: 22ch;
  font-size: clamp(26px, 5.2vw, 60px);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.hero-w {
  --p: clamp(0, (var(--say) * (var(--n) + 4) - var(--i)) / 4, 1);
  opacity: var(--p);
  filter: blur(calc((1 - var(--p)) * 10px));
  will-change: opacity, filter, transform;
  transform: translateY(calc((1 - var(--p)) * 0.28em));
  color: var(--ink);
  display: inline-block;
}

.hero-w[data-muted] {
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  .hero-track {
    height: auto;
    margin-bottom: 0;
  }
  .hero-stage {
    height: auto;
    position: relative;
  }
  .hero-copy-layer {
    min-height: 0;
    margin-top: 0;
    padding-bottom: 32px;
  }
  .hero-frame {
    position: relative;
    padding-top: 24px;
    --tilt: 1 !important;
    --zoom: 0 !important;
    --exit: 0 !important;
  }
  .hero-bob {
    animation: none;
  }
  .hero-next {
    position: relative;
    padding-block: var(--section) 48px;
    --say: 1 !important;
  }
}

/* ==========================================================================
   2. PRODUCT INTRODUCTION (`Overview`)
   ========================================================================== */
.overview-section {
  position: relative;
  z-index: 4;
  padding-top: 8px;
  padding-bottom: 44px;
}

@media (min-width: 768px) {
  .overview-section {
    padding-top: 12px;
    padding-bottom: 56px;
  }
}

.overview-steps {
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

@media (min-width: 960px) {
  .overview-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}

.overview-step {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  display: flex;
}

.overview-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--TintBg, rgba(0, 192, 232, 0.14));
  color: var(--TintFg, var(--ink));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.overview-icon svg {
  width: 26px;
  height: 26px;
}

.overview-step h3 {
  font-family: var(--font-display);
  font-stretch: 125%;
  letter-spacing: -0.02em;
  max-width: 15ch;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 740;
  line-height: 1.2;
}

.overview-step p {
  font-size: 14.5px;
  color: var(--ink-2);
  max-width: 24ch;
  line-height: 1.45;
  margin-top: -8px;
}

@media (min-width: 768px) {
  .overview-step h3 {
    filter: url("#soft-s");
  }
}

/* ==========================================================================
   3–6. STICKY PLATFORM SCOPE & 4 FEATURE CHAPTERS (`Platform` + `FeatureSection`)
   ========================================================================== */
.platform-scope {
  background: var(--bg);
  --sq-r: 0 0 40px 40px;
  z-index: 2;
  position: relative;
}

@media (min-width: 768px) {
  .platform-scope {
    --sq-r: 0 0 64px 64px;
  }
}

.platform-dock {
  z-index: 30;
  pointer-events: none;
  justify-content: center;
  height: 0;
  display: flex;
  position: sticky;
  top: calc(100dvh - 54px - 28px);
}

.platform-rest {
  height: 48px;
}

.platform-switch {
  pointer-events: auto;
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  background: rgba(232, 232, 234, 0.78);
  border-radius: 999px;
  align-items: center;
  gap: 2px;
  height: 54px;
  padding: 5px;
  display: inline-flex;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 12px 32px -8px rgba(0, 0, 0, 0.16);
}

.platform-option {
  cursor: pointer;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: 999px;
  transition: color 0.2s;
  height: 44px;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 600;
  position: relative;
}

.platform-option:hover {
  color: var(--ink);
}

.platform-option[aria-pressed="true"] {
  color: #ffffff;
}

.platform-thumb {
  z-index: 0;
  background: #1c1c1e;
  border-radius: 999px;
  position: absolute;
  inset: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: transform 0.4s cubic-bezier(0.22, 1.18, 0.36, 1), width 0.4s var(--ease-out);
}

.platform-option-label {
  z-index: 1;
  position: relative;
}

.platform-media {
  width: 100%;
  height: 100%;
  display: grid;
}

.platform-layer {
  grid-area: 1 / 1;
  justify-content: center;
  align-items: center;
  min-width: 0;
  min-height: 0;
  transition: opacity 0.45s var(--ease-out), filter 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  display: flex;
}

.platform-layer[data-active="false"] {
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  transform: scale(0.97);
}

.platform-layer[data-active="true"] {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

/* Feature Chapters */
.feature-section {
  padding-block: 38px;
}

@media (min-width: 768px) {
  .feature-section {
    padding-block: 48px;
  }
}

.feature-grid {
  grid-template-columns: 1fr;
  align-items: center;
  gap: 36px;
  display: grid;
}

@media (min-width: 960px) {
  .feature-grid {
    grid-template-columns: 5fr 6fr;
    gap: 68px;
  }
  .feature-grid[data-flip="true"] {
    grid-template-columns: 6fr 5fr;
  }
  .feature-grid[data-flip="true"] .feature-copy {
    order: 2;
  }
  .feature-grid[data-flip="true"] .feature-media-wrap {
    order: 1;
  }
}

.feature-grid[data-flip="true"] .tag {
  rotate: 2.5deg;
}

.feature-copy {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  display: flex;
}

.feature-title {
  margin-top: 4px;
  font-size: clamp(34px, 6.8vw, 56px);
}

@media (min-width: 768px) {
  .feature-title {
    filter: url("#soft-m");
  }
}

.feature-media-card {
  background: radial-gradient(125% 115% at 50% 0%, #3b1d70 0%, #1d1038 58%, #110a22 100%);
  --sq-r: 32px;
  aspect-ratio: 4 / 3.85;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 24px 54px -20px rgba(24, 11, 52, 0.35);
}

@media (min-width: 768px) {
  .feature-media-card {
    --sq-r: 44px;
  }
}

.feature-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   STAGESHOW / HYPERFRAMES ANIMATED PRODUCT STAGES (Chapters 1–4)
   ========================================================================== */
.ss-stage {
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(18px, 3.2vw, 30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  overflow: hidden;
  font-family: var(--font-body);
}

.ss-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(167, 139, 250, 0.24), transparent 52%),
    radial-gradient(circle at 82% 80%, rgba(124, 58, 237, 0.22), transparent 55%);
  pointer-events: none;
}

.ss-badge-bar {
  position: absolute;
  top: 16px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
  pointer-events: none;
}

.ss-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(15, 11, 29, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11.5px;
  font-weight: 640;
  letter-spacing: 0.01em;
}

.ss-live-dot {
  width: 6.5px;
  height: 6.5px;
  border-radius: 50%;
  background: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
  animation: ss-pulse 2s infinite;
}

@keyframes ss-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.9); }
}

.ss-kbd-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ss-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 23px;
  padding: 0 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  transition: transform 0.18s ease, background-color 0.18s ease;
}

.ss-kbd.is-pressed {
  transform: translateY(2px);
  background: #7c3aed;
  border-color: #c4b5fd;
}

/* Native macOS App Window Frame inside Stage */
.ss-mac-window {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 26px 58px -14px rgba(8, 4, 20, 0.58),
    0 0 0 1px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  color: #0f172a;
}

.ss-mac-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.ss-dots {
  display: flex;
  gap: 6px;
}

.ss-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.ss-dots span:nth-child(1) { background: #ff5f57; }
.ss-dots span:nth-child(2) { background: #febc2e; }
.ss-dots span:nth-child(3) { background: #28c840; }

.ss-win-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 720;
  color: #1e293b;
}

.ss-win-logo {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(145deg, #8b5cf6, #6d28d9);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* iPhone Frame inside Stage */
.ss-phone-window {
  position: relative;
  z-index: 2;
  width: min(100%, 305px);
  background: #ffffff;
  border-radius: 32px;
  border: 6px solid #1e1b2e;
  box-shadow:
    0 26px 54px -12px rgba(8, 4, 20, 0.62),
    0 0 0 1px rgba(255, 255, 255, 0.16);
  overflow: hidden;
  color: #0f172a;
}

.ss-phone-notch {
  width: 76px;
  height: 18px;
  border-radius: 999px;
  background: #0f0d1a;
  margin: 8px auto 6px;
}

/* Animated Cursor */
.ss-cursor {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  left: 72%;
  top: 74%;
  transition:
    left 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s ease;
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.35));
}

.ss-cursor.is-clicking {
  transform: scale(0.86);
}

.ss-cursor-ring {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #7c3aed;
  opacity: 0;
  transform: scale(0.5);
}

.ss-cursor.is-clicking .ss-cursor-ring {
  animation: ss-click-ring 0.45s ease-out;
}

@keyframes ss-click-ring {
  0% { opacity: 0.95; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(1.75); }
}

/* Chapter 1: Magic Capture Stage */
.ss-cap-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-cap-switch {
  display: inline-flex;
  align-self: flex-start;
  background: #f1f5f9;
  padding: 3px;
  border-radius: 9px;
  gap: 3px;
}

.ss-cap-tab {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  color: #64748b;
}

.ss-cap-tab.is-active {
  background: #7c3aed;
  color: #ffffff;
}

.ss-cap-input-box {
  background: #f8fafc;
  border: 2px solid #7c3aed;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 640;
  color: #0f172a;
}

.ss-caret {
  display: inline-block;
  width: 2px;
  height: 16px;
  background: #7c3aed;
  margin-left: 2px;
  animation: ss-blink 0.9s infinite;
}

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

.ss-cap-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ss-token {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 680;
  background: #f3e8ff;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
  opacity: 0.28;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.28s ease, transform 0.28s ease, background-color 0.28s ease;
}

.ss-token.is-parsed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ss-cap-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #f1f5f9;
}

.ss-cap-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #7c3aed;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 9px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.ss-cap-btn.is-triggered {
  background: #10b981;
  transform: scale(0.96);
}

.ss-cap-preview-slot {
  background: #faf5ff;
  border: 1px dashed #c4b5fd;
  border-radius: 11px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.35s var(--ease-out);
}

.ss-cap-preview-slot.is-saved {
  background: #ede9fe;
  border-style: solid;
  border-color: #8b5cf6;
  box-shadow: 0 8px 20px -8px rgba(124, 58, 237, 0.35);
}

/* Chapter 2: Plan Drag & Drop Stage */
.ss-plan-body {
  display: grid;
  grid-template-columns: 185px 1fr;
  min-height: 270px;
}

@media (max-width: 520px) {
  .ss-plan-body {
    grid-template-columns: 145px 1fr;
  }
}

.ss-plan-sidebar {
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ss-plan-h {
  font-size: 10.5px;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

.ss-task-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 8px 9px;
  font-size: 11.5px;
  font-weight: 650;
  color: #1e293b;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.04);
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.ss-task-card.is-dragging {
  opacity: 0.35;
  border-style: dashed;
  border-color: #7c3aed;
}

.ss-task-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: #64748b;
}

.ss-prio-high {
  color: #6d28d9;
  background: #f3e8ff;
  padding: 1px 6px;
  border-radius: 99px;
  font-weight: 700;
}

.ss-plan-timeline {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.ss-time-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.ss-time-lbl {
  font-size: 10.5px;
  font-weight: 640;
  color: #94a3b8;
}

.ss-time-slot {
  border-top: 1px solid #f1f5f9;
  min-height: 42px;
  border-radius: 9px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 660;
}

.ss-slot-fixed {
  background: #f1f5f9;
  color: #334155;
  border-left: 3px solid #64748b;
}

.ss-slot-dropzone {
  border: 1.5px dashed #cbd5e1;
  color: #94a3b8;
  background: #f8fafc;
  transition: all 0.35s var(--ease-out);
}

.ss-slot-dropzone.is-hovered {
  border-color: #7c3aed;
  background: #f5f3ff;
  color: #6d28d9;
}

.ss-slot-dropzone.is-filled {
  border-style: solid;
  border-color: #7c3aed;
  border-left-width: 4px;
  background: #ede9fe;
  color: #4c1d95;
  box-shadow: 0 8px 18px -6px rgba(124, 58, 237, 0.28);
}

.ss-floating-drag {
  position: absolute;
  z-index: 12;
  width: 165px;
  background: #ffffff;
  border: 1.5px solid #7c3aed;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #4c1d95;
  box-shadow: 0 18px 32px -8px rgba(109, 40, 217, 0.38);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition:
    left 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* Chapter 3: Focus Capsule & Menu Bar Stage */
.ss-focus-menubar {
  width: 100%;
  max-width: 560px;
  background: rgba(15, 11, 29, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  border-radius: 11px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 640;
  margin-bottom: 14px;
  z-index: 3;
}

.ss-menubar-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 58, 237, 0.32);
  border: 1px solid rgba(167, 139, 250, 0.45);
  padding: 3px 10px;
  border-radius: 999px;
  color: #ede9fe;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
}

.ss-focus-capsule {
  width: 100%;
  max-width: 560px;
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow:
    0 24px 48px -12px rgba(9, 4, 22, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.8);
  color: #0f172a;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ss-capsule-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ss-capsule-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f3e8ff;
  color: #6d28d9;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ss-capsule-status.is-done {
  background: #dcfce7;
  color: #15803d;
}

.ss-capsule-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ss-capsule-timer {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  letter-spacing: -0.03em;
}

.ss-capsule-bar {
  width: 100%;
  height: 7px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.ss-capsule-fill {
  height: 100%;
  width: 38%;
  background: linear-gradient(90deg, #8b5cf6, #6d28d9);
  border-radius: 999px;
  transition: width 0.55s ease, background 0.3s ease;
}

.ss-capsule-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.ss-capsule-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  background: #f1f5f9;
  color: #334155;
  transition: all 0.22s ease;
}

.ss-capsule-btn.primary {
  background: #7c3aed;
  color: #ffffff;
}

.ss-capsule-btn.primary.is-complete {
  background: #10b981;
}

/* Chapter 4: One-Click Replan Diff Stage */
.ss-replan-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ss-replan-banner {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 650;
  color: #92400e;
  transition: all 0.3s ease;
}

.ss-replan-banner.is-resolved {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.ss-replan-trigger {
  background: #7c3aed;
  color: #ffffff;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}

.ss-diff-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ss-diff-row {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  transition: all 0.4s var(--ease-out);
}

.ss-diff-row.is-applied {
  background: #f5f3ff;
  border-color: #c4b5fd;
}

.ss-diff-times {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
}

.ss-old-time {
  color: #ef4444;
  text-decoration: line-through;
}

.ss-new-time {
  background: #ede9fe;
  color: #6d28d9;
  padding: 2px 7px;
  border-radius: 6px;
}

.ss-replan-undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f172a;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 640;
  opacity: 0.35;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ss-replan-undo-bar.is-active {
  opacity: 1;
}

.ss-undo-pill {
  background: rgba(255, 255, 255, 0.16);
  color: #c4b5fd;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

/* 2x2 Specs Grid inside Feature Chapter */
.specs-grid {
  border-top: 1px solid var(--line);
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  width: 100%;
  margin: 12px 0 0;
  padding: 22px 0 0;
  list-style: none;
  display: grid;
}

.specs-item {
  color: var(--ink-2);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  line-height: 1.4;
  display: flex;
}

.specs-item strong {
  color: var(--ink);
  font-weight: 640;
}

.specs-icon {
  color: var(--ink-2);
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.specs-icon svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   7. DARK UNDERLAY & CLOSER LOOK CAROUSEL (`Underlay` + `CloserLook`)
   ========================================================================== */
.underlay-sticky {
  position: relative;
  z-index: 1;
}

.closer-section {
  background: radial-gradient(ellipse 90% 55% at 50% 0%, #261742 0%, #150d26 55%, var(--night) 100%);
  color: #ffffff;
  padding-top: 96px;
  padding-bottom: 36px;
  margin-top: -56px;
  overflow: hidden;
}

.closer-slide {
  will-change: transform;
}

.closer-intro {
  max-width: 680px;
  margin-bottom: 32px;
}

.closer-intro .eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

.closer-title {
  margin-top: 10px;
  font-size: clamp(36px, 7.4vw, 60px);
}

@media (min-width: 768px) {
  .closer-title {
    filter: url("#soft-m");
  }
}

.closer-track {
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2));
  scrollbar-width: none;
  gap: 16px;
  margin: 0;
  padding: 8px max(var(--gutter), calc((100vw - var(--max)) / 2)) 16px;
  list-style: none;
  display: flex;
  overflow-x: auto;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
}

.closer-track.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

.closer-track::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .closer-track {
    gap: 20px;
  }
}

.closer-card {
  --sq-r: 36px;
  --sq-border: rgba(255, 255, 255, 0.1);
  scroll-snap-align: start;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
  aspect-ratio: 5 / 7.3;
  flex-direction: column;
  flex: none;
  width: min(82vw, 350px);
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .closer-card {
    --sq-r: 44px;
    width: 400px;
  }
}

.closer-head {
  z-index: 1;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 12px;
  display: flex;
  position: relative;
}

@media (min-width: 768px) {
  .closer-head {
    padding: 32px 32px 14px;
  }
}

.closer-card-title {
  color: #ffffff;
  font-size: 24px;
  line-height: 1.12;
}

@media (min-width: 768px) {
  .closer-card-title {
    filter: url("#soft-s");
  }
}

.closer-card-body {
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.45;
}

.closer-stage {
  flex: 1;
  justify-content: center;
  align-items: stretch;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.closer-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.closer-controls {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  display: flex;
}

.closer-loop-hint {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 560;
}

.closer-arrow-group {
  display: inline-flex;
  gap: 10px;
}

.closer-arrow {
  cursor: pointer;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  transition: background-color 0.2s, opacity 0.2s, transform 0.2s var(--ease-out);
  display: inline-flex;
}

.closer-arrow:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.35);
  border-color: rgba(167, 139, 250, 0.5);
  transform: scale(1.06);
}

.closer-arrow:active:not(:disabled) {
  transform: scale(0.95);
}

/* ==========================================================================
   8. DARK CROSS-DEVICE MAC + IPHONE SECTION (`MacSection`)
   ========================================================================== */
.mac-section {
  background: var(--night);
  color: #ffffff;
  --sq-r: 0 0 40px 40px;
  z-index: 2;
  padding-top: 28px;
  padding-bottom: 56px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .mac-section {
    --sq-r: 0 0 64px 64px;
  }
}

.mac-intro {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
}

.mac-intro .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}

.mac-intro .lead {
  color: rgba(255, 255, 255, 0.65);
}

.mac-title {
  max-width: 16ch;
  font-size: clamp(36px, 7.4vw, 64px);
}

@media (min-width: 768px) {
  .mac-title {
    filter: url("#soft-m");
  }
}

.mac-stage {
  max-width: 1100px;
  margin: 48px auto 0;
}

.mac-duo {
  width: 100%;
  height: auto;
  display: block;
}

.mac-points {
  grid-template-columns: 1fr;
  gap: 36px 24px;
  max-width: 1080px;
  margin: 56px auto 0;
  padding: 40px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  list-style: none;
  display: grid;
}

@media (min-width: 640px) {
  .mac-points {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .mac-points {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}

.mac-point {
  color: rgba(255, 255, 255, 0.72);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.45;
  display: flex;
}

.mac-point strong {
  color: #ffffff;
  font-weight: 660;
}

.mac-point-icon {
  color: rgba(255, 255, 255, 0.85);
  width: 24px;
  height: 24px;
  display: inline-flex;
}

/* ==========================================================================
   9. LOCAL-FIRST & PRIVACY BENTO GRID (`Privacy`)
   ========================================================================== */
.privacy-section {
  padding-block: 52px 32px;
}

.privacy-bento {
  grid-template-columns: 1fr;
  gap: 16px;
  display: grid;
}

@media (min-width: 640px) {
  .privacy-bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .privacy-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr 1fr;
  }
}

.privacy-lead {
  background: var(--night);
  color: #ffffff;
  --sq-r: 36px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 36px;
  display: flex;
  position: relative;
  overflow: hidden;
}

@media (min-width: 640px) {
  .privacy-lead {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .privacy-lead {
    --sq-r: 44px;
    grid-area: 1 / 3 / 3 / 5;
    padding: 48px;
  }
}

.privacy-infinity {
  color: #ffffff;
  width: 48px;
  height: 48px;
  margin-bottom: auto;
  display: inline-flex;
}

.privacy-lead .eyebrow {
  color: rgba(255, 255, 255, 0.5);
}

.privacy-lead-title {
  white-space: pre-line;
  font-size: clamp(32px, 4.2vw, 52px);
}

@media (min-width: 768px) {
  .privacy-lead-title {
    filter: url("#soft-m");
  }
}

.privacy-lead-body {
  color: rgba(255, 255, 255, 0.65);
  max-width: 38ch;
  font-size: 17px;
  line-height: 1.5;
}

.privacy-card {
  background: var(--card);
  --sq-r: 32px;
  --sq-border: var(--line);
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 32px;
  display: flex;
}

.privacy-icon {
  color: var(--ink);
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  display: inline-flex;
}

.privacy-card h3 {
  font-size: 22px;
  line-height: 1.15;
}

@media (min-width: 768px) {
  .privacy-card h3 {
    filter: url("#soft-s");
  }
}

.privacy-card p {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.5;
}

/* ==========================================================================
   10. PROVISIONAL PRICING & 3D HOLOGRAPHIC CARD (`Pricing` + `HoloCard`)
   ========================================================================== */
.pricing-section {
  padding-block: 44px;
}

.pricing-intro {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  margin-inline: auto;
  display: flex;
}

.pricing-title {
  font-size: clamp(36px, 7.4vw, 60px);
}

@media (min-width: 768px) {
  .pricing-title {
    filter: url("#soft-m");
  }
}

.pricing-provisional-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(124, 58, 237, 0.12);
  color: #5b21b6;
  border: 1px solid rgba(124, 58, 237, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 620;
  margin-top: 4px;
}

.pricing-cards {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 460px;
  margin: 36px auto 0;
  display: grid;
}

@media (min-width: 820px) {
  .pricing-cards {
    grid-template-columns: 1fr auto 1fr;
    max-width: 920px;
  }
}

.pricing-plus {
  z-index: 2;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin: -10px auto;
  display: flex;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.14);
}

@media (min-width: 820px) {
  .pricing-plus {
    align-self: center;
    margin: 0 -14px;
  }
}

.pricing-card {
  background: var(--card);
  --sq-r: 36px;
  --sq-border: var(--line);
  flex-direction: column;
  padding: 36px;
  display: flex;
}

@media (min-width: 768px) {
  .pricing-card {
    --sq-r: 44px;
    padding: 44px;
  }
}

/* 3D Holographic Pro Card (`HoloCard`) */
.holo-wrap {
  perspective: 900px;
  display: flex;
}

.holo-card {
  --rx: 0deg;
  --ry: 0deg;
  --fx: 50%;
  --fy: 50%;
  --sx: 0%;
  --sy: 0%;
  --hue: 0deg;
  --gx: 38%;
  --gy: 30%;
  color: #161822;
  transform-style: preserve-3d;
  will-change: transform;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  background:
    radial-gradient(120% 90% at 15% 10%, #ffffff70, #ffffff00 55%),
    linear-gradient(135deg, #dcc8ff 0%, #c8befc 32%, #b4dcff 68%, #aeece4 100%);
  width: 100%;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 #ffffffeb inset,
    0 30px 60px -24px #1e193c47,
    0 18px 36px -18px #00000024;
  --sq-r: 36px;
}

@media (min-width: 768px) {
  .holo-card {
    --sq-r: 44px;
  }
}

.holo-content {
  z-index: 2;
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
}

.holo-layer {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  inset: 0;
}

.holo-foil {
  opacity: 0.34;
  mix-blend-mode: soft-light;
  filter: hue-rotate(var(--hue)) saturate(1.4);
  background-image: repeating-linear-gradient(
    118deg,
    #ff85b3 0%,
    #ffb86c 7%,
    #fff275 14%,
    #7ae582 21%,
    #66d9ef 28%,
    #9b87f5 35%,
    #f087e8 42%,
    #ff85b3 50%
  );
  background-position: var(--fx) var(--fy);
  background-size: 260% 260%;
}

.holo-fine {
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: repeating-linear-gradient(
    -52deg,
    #ffffff00 0px,
    #ffffff00 5px,
    #ffffffb3 6px,
    #ffffff00 7px,
    #ffffff00 13px
  );
  background-position: calc(100% - var(--fx)) var(--fy);
  background-size: 200% 200%;
}

.holo-tex {
  -webkit-mask-image: var(--tex);
  mask-image: var(--tex);
  -webkit-mask-size: var(--tile-w, 223px) var(--tile-h, 223px);
  mask-size: var(--tile-w, 223px) var(--tile-h, 223px);
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
}

.holo-base {
  opacity: 0.2;
  mix-blend-mode: overlay;
  background: #ffffff;
}

.holo-tex-foil {
  opacity: 0.72;
  mix-blend-mode: soft-light;
  filter: hue-rotate(calc(var(--hue) * -1.4)) saturate(1.6);
  background-image:
    radial-gradient(circle at calc(100% - var(--gx)) calc(100% - var(--gy)), #ffffff 0%, #ffffff4d 28%, #00000000 62%),
    repeating-linear-gradient(
      32deg,
      #ff7ab8 0%,
      #ffd06b 9%,
      #6ef2b8 18%,
      #5ec8ff 27%,
      #b48cff 36%,
      #ff7ab8 45%
    );
  background-position: 0 0, calc(100% - var(--fx)) calc(100% - var(--fy));
  background-size: 100% 100%, 240% 240%;
}

.holo-grain {
  opacity: 0.2;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.7) 1px, transparent 0);
  background-size: 12px 12px;
}

.holo-glare {
  opacity: 0.7;
  mix-blend-mode: soft-light;
  background: radial-gradient(
    circle at var(--gx) var(--gy),
    #ffffffeb 0%,
    #ffffff59 26%,
    #ffffff00 62%
  );
}

.holo-streak {
  opacity: 0.55;
  mix-blend-mode: overlay;
  background: linear-gradient(
    108deg,
    #ffffff00 32%,
    #ffffff8c 47%,
    #ffffffeb 50%,
    #ffffff8c 53%,
    #ffffff00 68%
  );
  background-position: var(--fx) var(--fy);
  background-size: 240% 240%;
}

.pricing-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 20px;
  background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -6px rgba(109, 40, 217, 0.45);
}

.pricing-icon-wrap.pro {
  background: linear-gradient(145deg, #161822 0%, #31354d 100%);
  box-shadow: 0 10px 24px -6px rgba(22, 24, 34, 0.35);
}

.pricing-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pricing-name {
  font-size: 22px;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .pricing-name {
    filter: url("#soft-s");
  }
}

.pricing-cycle-toggle {
  display: inline-flex;
  background: rgba(22, 24, 34, 0.08);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.pricing-cycle-btn {
  border: 0;
  background: transparent;
  color: rgba(22, 24, 34, 0.65);
  font-size: 12px;
  font-weight: 660;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pricing-cycle-btn[aria-pressed="true"] {
  background: #161822;
  color: #ffffff;
}

.pricing-price-line {
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
}

.pricing-price {
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
}

@media (min-width: 768px) {
  .pricing-price {
    filter: url("#soft-m");
  }
}

.pricing-period {
  color: rgba(22, 24, 34, 0.62);
  font-size: 17px;
  font-weight: 600;
}

.pricing-save-badge {
  background: rgba(53, 199, 89, 0.18);
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.pricing-list {
  flex-direction: column;
  gap: 14px;
  margin: 28px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  display: flex;
}

.holo-card .pricing-list {
  border-top-color: rgba(22, 24, 34, 0.12);
}

.pricing-list li {
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  display: flex;
}

.pricing-check {
  background: var(--surface);
  color: var(--ink);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: inline-flex;
}

.holo-card .pricing-check {
  background: #161822;
  color: #ffffff;
}

.pricing-note {
  color: rgba(22, 24, 34, 0.62);
  margin-top: auto;
  padding-top: 24px;
  font-size: 14px;
  line-height: 1.45;
}

.pricing-cta {
  justify-content: center;
  margin-top: 40px;
  display: flex;
}

/* ==========================================================================
   11. FOUNDER / PRODUCT STORY (`Maker`)
   ========================================================================== */
.maker-section {
  padding-block: 44px;
}

.maker-grid {
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
  max-width: 520px;
  margin-inline: auto;
  display: grid;
}

@media (min-width: 820px) {
  .maker-grid {
    grid-template-columns: 5fr 6fr;
    gap: 80px;
    max-width: 1000px;
  }
}

.maker-photo-wrap {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  position: relative;
}

@media (min-width: 820px) {
  .maker-photo-wrap {
    max-width: none;
  }
}

.maker-photo {
  --sq-r: 36px;
  --sq-border: var(--line);
  aspect-ratio: 4 / 5;
  background: #141518;
  rotate: -2deg;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.18);
}

@media (min-width: 768px) {
  .maker-photo {
    --sq-r: 44px;
  }
}

.maker-photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.maker-badge {
  rotate: 6deg;
  filter: drop-shadow(0 16px 24px rgba(109, 40, 217, 0.32));
  pointer-events: none;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(145deg, #8b5cf6 0%, #6d28d9 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -12px;
  bottom: -14px;
}

@media (min-width: 768px) {
  .maker-badge {
    width: 104px;
    height: 104px;
    border-radius: 24px;
    right: -18px;
    bottom: -18px;
  }
}

.maker-copy {
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.maker-title {
  margin-bottom: 4px;
  font-size: clamp(36px, 7.4vw, 56px);
}

@media (min-width: 768px) {
  .maker-title {
    filter: url("#soft-m");
  }
}

.maker-letter {
  color: var(--ink-2);
  flex-direction: column;
  gap: 16px;
  max-width: 50ch;
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.6;
  display: flex;
}

.maker-sign-row {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 50ch;
  margin-top: 8px;
  display: flex;
}

.maker-sign {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.maker-name {
  color: var(--ink);
  font-size: 24px;
}

.maker-role {
  color: var(--ink-3);
  font-size: 14px;
}

.maker-write {
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: transform 0.2s var(--ease-out), border-color 0.2s;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px 0 15px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  cursor: pointer;
}

.maker-write:hover {
  border-color: var(--ink-3);
  transform: translateY(-1px);
}

/* ==========================================================================
   12. FREQUENTLY ASKED QUESTIONS (`Faq`)
   ========================================================================== */
.faq-section {
  padding-block: 44px;
}

.faq-grid {
  grid-template-columns: 1fr;
  gap: 40px;
  display: grid;
}

@media (min-width: 960px) {
  .faq-grid {
    grid-template-columns: 4fr 7fr;
    gap: 64px;
  }
}

.faq-intro {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.faq-title {
  font-size: clamp(36px, 7.4vw, 56px);
}

@media (min-width: 768px) {
  .faq-title {
    filter: url("#soft-m");
  }
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
}

.faq-q button {
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 22px 0;
  display: flex;
}

.faq-icon {
  color: var(--ink-2);
  transition: transform 0.35s var(--ease-out), color 0.2s;
  flex: none;
}

.faq-item[data-open="true"] .faq-icon {
  color: var(--ink);
  transform: rotate(45deg);
}

.faq-answer {
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.38s var(--ease-out), opacity 0.38s var(--ease-out);
  display: grid;
}

.faq-item[data-open="true"] .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-answer p {
  color: var(--ink-2);
  max-width: 62ch;
  padding-bottom: 24px;
  font-size: 16px;
  line-height: 1.6;
}

/* ==========================================================================
   13. CLOSING FOOTER & ICON SHUFFLE (`Closing` + `IconShuffle`)
   ========================================================================== */
.closing-footer {
  padding-top: 48px;
  overflow: hidden;
}

.closing-cta {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding-bottom: 48px;
  display: flex;
}

.icon-shuffle-stack {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  border-radius: 22px;
  width: 96px;
  height: 96px;
  padding: 0;
  transition: transform 0.25s var(--ease-out), filter 0.25s var(--ease-out);
  display: grid;
  position: relative;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.16));
}

.icon-shuffle-stack:hover {
  transform: scale(1.05);
}

.icon-shuffle-stack:active {
  transform: scale(0.94);
}

.icon-shuffle-stack[data-landed="true"] {
  animation: 0.55s var(--ease-out) icon-land;
}

.icon-shuffle-item {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-shuffle-item[data-active="false"] {
  opacity: 0;
}

.icon-shuffle-item[data-active="true"] {
  opacity: 1;
  animation: 0.16s var(--ease-out) icon-pop;
}

@keyframes icon-pop {
  0% { transform: scale(0.86); }
  100% { transform: scale(1); }
}

@keyframes icon-land {
  0% { transform: scale(1); }
  35% { transform: scale(1.14) rotate(-5deg); }
  68% { transform: scale(0.95) rotate(2deg); }
  86% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.closing-title {
  max-width: 14ch;
  font-size: clamp(44px, 10vw, 96px);
  line-height: 0.98;
}

@media (min-width: 768px) {
  .closing-title {
    filter: url("#soft-l");
  }
}

.closing-bar {
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 28px;
  font-size: 14px;
  display: flex;
}

.closing-left {
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  display: flex;
}

.closing-links {
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.closing-links a,
.closing-links button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.closing-links a:hover,
.closing-links button:hover {
  color: var(--ink);
}

.closing-wordmark {
  color: #00000012;
  pointer-events: none;
  user-select: none;
  width: 100%;
  margin-top: 24px;
  margin-bottom: -2.2vw;
  line-height: 0;
  display: block;
}

.closing-wordmark svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   MODALS (Honest Waitlist Preview & Reserved Legal/Support Sheets)
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 12, 13, 0.52);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-out);
}

.modal-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  background: var(--card);
  color: var(--ink);
  --sq-r: 32px;
  width: 100%;
  max-width: 520px;
  padding: 32px;
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.32);
  transform: translateY(14px) scale(0.97);
  transition: transform 0.32s var(--ease-out);
  position: relative;
}

.modal-backdrop[data-open="true"] .modal-card {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--ink);
}

.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(124, 58, 237, 0.14);
  color: #6d28d9;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.modal-title {
  font-size: 28px;
  margin-bottom: 10px;
}

.modal-body {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-notice {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ink-2);
  margin-top: 6px;
}

.modal-notice strong {
  color: var(--ink);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}