/* Cosmos Author Your Destiny landing — live at /. Not GPS/Thread. */
:root {
  --d-void: #020208;
  --d-ink: #f7f3eb;
  --d-ink-2: rgba(247, 243, 235, 0.88);
  --d-ink-3: rgba(247, 243, 235, 0.48);
  /* One signal color (matches /next + Start). Orb keeps its own heritage hues in the mark only. */
  --d-accent: #f5e547;
  --d-font: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --d-sans: var(--d-font);
  --d-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-measure: min(42rem, calc(100vw - 3rem));
  --d-gutter: clamp(1.25rem, 4vw, 2.5rem);
}

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

html {
  scroll-behavior: auto;
  background: var(--d-void);
  color: var(--d-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  min-height: 100svh;
  font-family: var(--d-font);
  background: transparent;
  overflow-x: hidden;
}

::selection {
  background: rgba(245, 229, 71, 0.35);
  color: var(--d-ink);
}

#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background: var(--d-void);
}

.d-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem var(--d-gutter);
  padding-top: max(0.95rem, env(safe-area-inset-top));
  overflow: visible;
  background: linear-gradient(
    to bottom,
    rgba(2, 2, 8, 0.82) 0%,
    rgba(2, 2, 8, 0.35) 55%,
    transparent 100%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.d-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  overflow: visible;
  font-family: var(--d-sans);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--d-ink);
  text-decoration: none;
  cursor: pointer;
}

/* Animated Polarity orb: classic X-tilted orbits; spin only while hovered/tapped */
.d-mark-orb {
  position: relative;
  width: 2.15rem;
  height: 2.15rem;
  flex-shrink: 0;
  display: block;
  overflow: visible;
  perspective: 240px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 180ms var(--d-ease);
}

.d-mark:hover .d-mark-orb,
.d-mark:focus-visible .d-mark-orb {
  transform: scale(1.08);
}

.d-mark:active .d-mark-orb {
  transform: scale(0.95);
}

.d-orb-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(78, 205, 196, 0.4) 0%,
    rgba(187, 143, 206, 0.12) 42%,
    transparent 72%
  );
  filter: blur(5px);
  transform: scale(1.45);
  pointer-events: none;
}

/*
  Ellipses wrap the core (X tilt). Animation is applied only while hovered
  so hover-off snaps back to the resting transform (not paused mid-spin).
*/
.d-orb-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.9rem;
  height: 1.2rem;
  margin-left: -0.95rem;
  margin-top: -0.6rem;
  border-radius: 50%;
  box-sizing: border-box;
  transform-style: preserve-3d;
  backface-visibility: visible;
  animation: none;
}

.d-orb-ring-1 {
  border: 1.5px solid rgba(78, 205, 196, 0.95);
  box-shadow: 0 0 6px rgba(78, 205, 196, 0.5);
  transform: rotateX(40deg) rotateZ(-60deg);
}

.d-orb-ring-2 {
  border: 1.5px solid rgba(255, 160, 122, 0.95);
  box-shadow: 0 0 6px rgba(255, 160, 122, 0.5);
  transform: rotateX(40deg) rotateZ(60deg);
}

.d-orb-ring-3 {
  border: 1.5px solid rgba(187, 143, 206, 0.95);
  box-shadow: 0 0 6px rgba(187, 143, 206, 0.5);
  transform: rotateX(40deg) rotateZ(0deg);
}

.d-mark:hover .d-orb-ring-1,
.d-mark:focus-visible .d-orb-ring-1,
.d-mark.is-spinning .d-orb-ring-1 {
  animation: d-orbit-1 7s linear infinite;
}

.d-mark:hover .d-orb-ring-2,
.d-mark:focus-visible .d-orb-ring-2,
.d-mark.is-spinning .d-orb-ring-2 {
  animation: d-orbit-2 9s linear infinite;
}

.d-mark:hover .d-orb-ring-3,
.d-mark:focus-visible .d-orb-ring-3,
.d-mark.is-spinning .d-orb-ring-3 {
  animation: d-orbit-3 11s linear infinite;
}

.d-orb-electron {
  position: absolute;
  width: 0.26rem;
  height: 0.26rem;
  border-radius: 50%;
  top: -0.13rem;
  left: 50%;
  margin-left: -0.13rem;
  animation: none;
}

.d-orb-ring-1 .d-orb-electron {
  background: radial-gradient(circle at 30% 30%, #6ee7df, #4ecdc4);
  box-shadow: 0 0 5px rgba(78, 205, 196, 0.85);
}

.d-orb-ring-2 .d-orb-electron {
  background: radial-gradient(circle at 30% 30%, #ffb89a, #ffa07a);
  box-shadow: 0 0 5px rgba(255, 160, 122, 0.85);
  left: auto;
  right: 0;
  margin-left: 0;
  margin-right: -0.13rem;
}

.d-orb-ring-3 .d-orb-electron {
  background: radial-gradient(circle at 30% 30%, #d4a5e8, #bb8fce);
  box-shadow: 0 0 5px rgba(187, 143, 206, 0.85);
  top: auto;
  bottom: -0.13rem;
  left: 25%;
  margin-left: 0;
}

.d-mark:hover .d-orb-ring-1 .d-orb-electron,
.d-mark:focus-visible .d-orb-ring-1 .d-orb-electron,
.d-mark.is-spinning .d-orb-ring-1 .d-orb-electron {
  animation: d-electron-run 2.4s ease-in-out infinite;
}

.d-mark:hover .d-orb-ring-2 .d-orb-electron,
.d-mark:focus-visible .d-orb-ring-2 .d-orb-electron,
.d-mark.is-spinning .d-orb-ring-2 .d-orb-electron {
  animation: d-electron-run-rev 2.8s ease-in-out infinite;
}

.d-mark:hover .d-orb-ring-3 .d-orb-electron,
.d-mark:focus-visible .d-orb-ring-3 .d-orb-electron,
.d-mark.is-spinning .d-orb-ring-3 .d-orb-electron {
  animation: d-electron-run 3.2s ease-in-out infinite;
}

.d-orb-core {
  position: absolute;
  width: 0.58rem;
  height: 0.58rem;
  left: 50%;
  top: 50%;
  margin-left: -0.29rem;
  margin-top: -0.29rem;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 60% 40% at 35% 30%, rgba(255, 255, 255, 0.55) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #6ee7df 0%, #4ecdc4 42%, #2ba89f 100%);
  box-shadow:
    0 0 6px rgba(78, 205, 196, 0.75),
    0 0 12px rgba(78, 205, 196, 0.35);
  transform: translateZ(1px);
  animation: none;
}

.d-mark:hover .d-orb-core,
.d-mark:focus-visible .d-orb-core,
.d-mark.is-spinning .d-orb-core {
  animation: d-core-pulse 2.2s ease-in-out infinite;
}

@keyframes d-orbit-1 {
  from { transform: rotateX(40deg) rotateZ(-60deg); }
  to { transform: rotateX(40deg) rotateZ(300deg); }
}

@keyframes d-orbit-2 {
  from { transform: rotateX(40deg) rotateZ(60deg); }
  to { transform: rotateX(40deg) rotateZ(-300deg); }
}

@keyframes d-orbit-3 {
  from { transform: rotateX(40deg) rotateZ(0deg); }
  to { transform: rotateX(40deg) rotateZ(360deg); }
}

@keyframes d-electron-run {
  0%, 100% { left: 8%; }
  50% { left: 92%; }
}

@keyframes d-electron-run-rev {
  0%, 100% { right: 8%; left: auto; }
  50% { right: 92%; left: auto; }
}

@keyframes d-core-pulse {
  0%, 100% { transform: translateZ(1px) scale(1); }
  50% { transform: translateZ(1px) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .d-mark:hover .d-orb-ring-1,
  .d-mark:hover .d-orb-ring-2,
  .d-mark:hover .d-orb-ring-3,
  .d-mark:hover .d-orb-electron,
  .d-mark:hover .d-orb-core,
  .d-mark:focus-visible .d-orb-ring-1,
  .d-mark:focus-visible .d-orb-ring-2,
  .d-mark:focus-visible .d-orb-ring-3,
  .d-mark:focus-visible .d-orb-electron,
  .d-mark:focus-visible .d-orb-core,
  .d-mark.is-spinning .d-orb-ring-1,
  .d-mark.is-spinning .d-orb-ring-2,
  .d-mark.is-spinning .d-orb-ring-3,
  .d-mark.is-spinning .d-orb-electron,
  .d-mark.is-spinning .d-orb-core {
    animation: none !important;
  }

  .d-mark:hover .d-mark-orb,
  .d-mark:focus-visible .d-mark-orb {
    transform: none;
  }
}

.d-chrome-start {
  font-family: var(--d-sans);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--d-void);
  background: var(--d-accent);
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: filter 180ms var(--d-ease), transform 180ms var(--d-ease);
}

.d-chrome-start:hover { filter: brightness(1.06); }
.d-chrome-start:active { transform: translateY(1px); }
.d-chrome-start:focus-visible,
.d-mark:focus-visible,
.d-btn-primary:focus-visible,
.d-btn-ghost:focus-visible,
.d-link:focus-visible,
.d-footer a:focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 3px;
}

.d-scroll {
  position: relative;
  z-index: 1;
}

.d-hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem var(--d-gutter) 3.25rem;
  padding-bottom: max(3.25rem, env(safe-area-inset-bottom));
  position: relative;
  max-width: 56rem;
}

.d-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(58vh, 28rem);
  background: linear-gradient(
    to top,
    rgba(2, 2, 8, 0.78) 0%,
    rgba(2, 2, 8, 0.35) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.d-hero-line,
.d-hero-doors {
  position: relative;
  z-index: 1;
}

.d-hero-line {
  margin: 0;
  font-size: clamp(2.7rem, 9.5vw, 5.1rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
  max-width: 13ch;
  color: var(--d-ink);
}

.d-hero-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.35rem;
  margin-top: 1.85rem;
  align-items: center;
}

.d-btn-primary {
  font-family: var(--d-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--d-void);
  background: var(--d-accent);
  border: none;
  border-radius: 999px;
  padding: 0.9rem 1.5rem;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  transition: filter 180ms var(--d-ease), transform 180ms var(--d-ease);
}

.d-btn-primary:hover { filter: brightness(1.06); }
.d-btn-primary:active { transform: translateY(1px); }

.d-btn-ghost {
  font-family: var(--d-sans);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--d-ink);
  background: transparent;
  border: none;
  padding: 0.9rem 0.25rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--d-ink-3);
  transition: text-decoration-color 180ms var(--d-ease);
}

.d-btn-ghost:hover { text-decoration-color: var(--d-ink); }

.d-section {
  position: relative;
  isolation: isolate;
  max-width: var(--d-measure);
  margin: 0 auto;
  padding: clamp(3.75rem, 8vh, 5.5rem) var(--d-gutter);
}

/* Even wash so type reads over the starfield (Series craft). */
.d-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.75rem calc(var(--d-gutter) * -0.55);
  border-radius: 1.5rem;
  background: radial-gradient(
    ellipse 78% 72% at 42% 42%,
    rgba(2, 2, 8, 0.88) 0%,
    rgba(2, 2, 8, 0.55) 48%,
    rgba(2, 2, 8, 0.12) 72%,
    transparent 88%
  );
  pointer-events: none;
}

.d-kicker {
  font-family: var(--d-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--d-ink-3);
  margin: 0 0 0.7rem;
  font-weight: 500;
}

.d-section h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.85rem, 4.8vw, 2.45rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--d-ink);
  text-wrap: balance;
  max-width: 22ch;
}

#start h2 {
  color: var(--d-ink);
  max-width: 16ch;
}

.d-section p {
  margin: 0 0 1rem;
  font-size: clamp(1.08rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--d-ink-2);
  font-weight: 400;
  max-width: 38rem;
}

.d-section p:last-child { margin-bottom: 0; }

.d-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.d-list li {
  position: relative;
  padding: 0.65rem 0 0.65rem 1.35rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--d-ink-2);
  border-top: 1px solid rgba(244, 240, 232, 0.1);
}

.d-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--d-accent);
}

.d-muted {
  color: var(--d-ink-3);
  font-size: 0.95rem !important;
}

.d-link {
  color: var(--d-ink);
  text-underline-offset: 0.18em;
  cursor: pointer;
  transition: opacity 160ms var(--d-ease);
}

.d-link:hover { opacity: 0.82; }

.d-footer {
  max-width: var(--d-measure);
  margin: 0 auto;
  padding: 2.75rem var(--d-gutter) 4rem;
  padding-bottom: max(4rem, env(safe-area-inset-bottom));
  font-family: var(--d-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--d-ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.35rem;
}

.d-footer a {
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms var(--d-ease);
}

/* Quiet orb echo: readable rest, brighter on hover */
.d-footer a:nth-child(1) { color: rgba(110, 220, 212, 0.92); }
.d-footer a:nth-child(2) { color: rgba(255, 176, 148, 0.92); }
.d-footer a:nth-child(3) { color: rgba(205, 170, 220, 0.92); }
.d-footer a:nth-child(4) { color: rgba(120, 228, 220, 0.88); }
.d-footer a:nth-child(n+5) { color: var(--d-ink-2); }

.d-footer a:nth-child(1):hover { color: #7ee8e0; }
.d-footer a:nth-child(2):hover { color: #ffc4a8; }
.d-footer a:nth-child(3):hover { color: #d4b4e4; }
.d-footer a:nth-child(4):hover { color: #9af0ea; }
.d-footer a:nth-child(n+5):hover { color: var(--d-ink); }

/* Subpages (how / connectors): same skin, no full-viewport hero */
.d-page-top {
  padding-top: max(6.5rem, calc(4.5rem + env(safe-area-inset-top)));
}

.d-connector-grid {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.d-connector {
  padding: 1rem 0;
  border-top: 1px solid rgba(244, 240, 232, 0.08);
}

.d-connector:last-child {
  border-bottom: 1px solid rgba(244, 240, 232, 0.08);
}

.d-connector-name {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--d-ink);
  font-weight: 400;
}

.d-connector-meta {
  margin: 0;
  font-family: var(--d-sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}

.d-connector p {
  margin: 0.45rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--d-ink-2);
}

.d-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  align-items: center;
  margin-top: 2rem;
}

.d-cta-row .d-btn-ghost {
  padding-left: 0;
  padding-right: 0;
}

.d-verse {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 3.8vw, 1.85rem);
  line-height: 1.35;
  color: var(--d-ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
  max-width: 30rem;
}

.d-verse + .d-verse {
  margin-top: -0.35rem;
}

.d-logo-band {
  margin-top: 2.75rem;
}

.d-logo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 1.75rem 2rem;
}

.d-logo-grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.d-logo-grid img {
  width: 2.75rem;
  height: 2.75rem;
  display: block;
  object-fit: contain;
}

.d-and-more {
  margin: 1.75rem 0 0;
  font-family: var(--d-sans);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--d-ink-3);
}

/* Section enter */
.d-reveal {
  opacity: 0;
  transform: translate3d(0, 1.35rem, 0);
  transition:
    opacity 0.85s var(--d-ease),
    transform 0.85s var(--d-ease);
  will-change: opacity, transform;
}

.d-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.d-hero.d-reveal {
  transition-duration: 1.05s;
}

.d-hero.d-reveal.is-in .d-hero-doors {
  transition: opacity 0.7s var(--d-ease) 0.18s, transform 0.7s var(--d-ease) 0.18s;
}

@media (prefers-reduced-motion: reduce) {
  .d-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Quiet subpages: solid void, no flying starfield, more air */
body.d-sub {
  background: var(--d-void);
}

body.d-sub .d-chrome {
  background: linear-gradient(to bottom, rgba(2, 2, 8, 0.92), transparent);
}

body.d-sub .d-section.d-page-top {
  max-width: var(--d-measure);
  padding-top: max(6.75rem, calc(5rem + env(safe-area-inset-top)));
  padding-bottom: 1.75rem;
  padding-left: var(--d-gutter);
  padding-right: var(--d-gutter);
}

body.d-sub .d-section::before {
  display: none;
}

body.d-sub .d-kicker {
  margin-bottom: 0.85rem;
  color: var(--d-ink-3);
}

body.d-sub .d-section h2 {
  margin-bottom: 1.1rem;
  max-width: 20ch;
  line-height: 1.18;
}

body.d-sub .d-section p {
  margin-bottom: 1.2rem;
  line-height: 1.65;
  max-width: 34rem;
}

body.d-sub .d-list {
  margin: 1.75rem 0 1.85rem;
}

body.d-sub .d-list li {
  padding: 0.95rem 0 0.95rem 1.5rem;
  font-size: 1.08rem;
  line-height: 1.5;
}

body.d-sub .d-list li::before {
  top: 1.4rem;
}

body.d-sub .d-logo-band {
  margin-top: 2.5rem;
  margin-bottom: 0;
}

body.d-sub .d-logo-grid {
  gap: 2rem 2.25rem;
  max-width: 36rem;
}

body.d-sub .d-logo-grid img {
  width: 3rem;
  height: 3rem;
}

body.d-sub .d-and-more {
  margin-top: 1.35rem;
}

/* Keep Start + ghost links tight under the block above (no viewport hole) */
body.d-sub .d-cta-after-logos {
  margin-top: 2rem;
}

body.d-sub .d-cta-after-content {
  margin-top: 2.15rem;
}

body.d-sub .d-cta-row {
  margin-bottom: 0;
}

body.d-sub .d-footer {
  max-width: var(--d-measure);
  padding-top: 2.25rem;
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
  gap: 0.85rem 1.75rem;
  padding-left: var(--d-gutter);
  padding-right: var(--d-gutter);
}

/* Subpages: no side-kicker grid (long labels like "connectors" were overlapping the title) */
@media (min-width: 900px) {
  body.d-sub .d-section:not(.d-close):not(.d-legal) {
    display: block;
  }

  body.d-sub .d-section:not(.d-close):not(.d-legal) > .d-kicker {
    margin: 0 0 0.85rem;
  }
}

/* Legal depth pages */
.d-legal {
  max-width: 40rem;
}

.d-legal .d-meta {
  margin: -0.75rem 0 1.75rem;
  font-family: var(--d-sans);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--d-ink-3);
}

.d-legal h2 {
  margin: 2.25rem 0 0.85rem;
  font-size: clamp(1.2rem, 3vw, 1.45rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--d-ink);
  max-width: none !important;
}

.d-legal > h2:first-of-type {
  margin-top: 0;
  font-size: clamp(1.7rem, 4.6vw, 2.25rem);
  margin-bottom: 0.35rem;
}

.d-legal ul {
  margin: 0 0 1.25rem;
  padding: 0 0 0 1.15rem;
  color: var(--d-ink-2);
  font-size: 1.05rem;
  line-height: 1.6;
}

.d-legal li {
  margin: 0 0 0.65rem;
}

.d-legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: var(--d-ink);
}

.d-close {
  text-align: left;
}

.d-close .d-cta-row {
  margin-top: 1.75rem;
}

/* Phone + small tablet: touch targets, stacked doors, tighter measure */
@media (max-width: 720px) {
  :root {
    --d-measure: min(42rem, calc(100vw - 2rem));
    --d-gutter: clamp(1.1rem, 5.2vw, 1.5rem);
  }

  .d-chrome {
    padding: 0.7rem var(--d-gutter);
    padding-top: max(0.7rem, env(safe-area-inset-top));
  }

  .d-mark {
    font-size: 0.85rem;
    gap: 0.5rem;
    min-height: 2.75rem;
  }

  .d-mark-orb {
    width: 1.95rem;
    height: 1.95rem;
  }

  .d-chrome-start {
    min-height: 2.75rem;
    min-width: 4.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
  }

  .d-hero {
    min-height: 100svh;
    padding-top: max(5.75rem, calc(4.25rem + env(safe-area-inset-top)));
    padding-bottom: max(2.35rem, calc(1.25rem + env(safe-area-inset-bottom)));
    max-width: none;
  }

  .d-hero-line {
    font-size: clamp(2.35rem, 11.5vw, 3.15rem);
    line-height: 1.05;
    max-width: 10.5ch;
  }

  .d-hero-doors {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: 1.5rem;
    width: min(100%, 19.5rem);
  }

  .d-hero-doors .d-btn-primary,
  .d-cta-row .d-btn-primary {
    width: 100%;
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.85rem 1.25rem;
  }

  .d-hero-doors .d-btn-ghost,
  .d-cta-row .d-btn-ghost {
    width: 100%;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.65rem 0.2rem;
  }

  .d-section {
    padding: 3.15rem var(--d-gutter);
  }

  .d-section::before {
    inset: 0.35rem calc(var(--d-gutter) * -0.35);
  }

  .d-section h2 {
    font-size: clamp(1.55rem, 7.2vw, 2.05rem);
    max-width: 18ch;
    line-height: 1.2;
  }

  .d-section p {
    font-size: 1.08rem;
    line-height: 1.6;
    max-width: none;
  }

  .d-verse {
    font-size: clamp(1.25rem, 5.5vw, 1.55rem);
    max-width: none;
  }

  .d-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    width: min(100%, 19.5rem);
  }

  .d-footer {
    gap: 0.35rem 1.25rem;
    padding-top: 2rem;
    padding-bottom: max(2.75rem, env(safe-area-inset-bottom));
  }

  .d-footer a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.1rem;
  }

  body.d-sub .d-section.d-page-top {
    padding-top: max(6.25rem, calc(4.75rem + env(safe-area-inset-top)));
    padding-bottom: 1.5rem;
  }

  body.d-sub .d-logo-band {
    margin-top: 2rem;
  }

  body.d-sub .d-logo-grid {
    gap: 1.25rem 1.4rem;
    max-width: none;
  }

  body.d-sub .d-logo-grid img {
    width: 2.45rem;
    height: 2.45rem;
  }

  body.d-sub .d-and-more {
    margin-top: 1.15rem;
  }

  body.d-sub .d-cta-after-logos,
  body.d-sub .d-cta-after-content {
    margin-top: 1.75rem;
  }

  body.d-sub .d-list {
    margin: 1.5rem 0 1.6rem;
  }

  body.d-sub .d-list li {
    padding: 0.85rem 0 0.85rem 1.35rem;
    font-size: 1.02rem;
  }

  .d-legal ul {
    font-size: 1rem;
    padding-left: 1.05rem;
  }
}

@media (max-width: 380px) {
  .d-hero-line {
    font-size: clamp(2.05rem, 12vw, 2.55rem);
  }

  .d-mark span:last-child {
    max-width: 9rem;
  }
}

@media (min-width: 900px) {
  .d-section:not(.d-close):not(.d-legal) {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 1.75rem;
    align-items: start;
  }

  .d-section:not(.d-close):not(.d-legal) > .d-kicker {
    grid-column: 1;
    grid-row: 1;
    margin: 0.45rem 0 0;
  }

  .d-section:not(.d-close):not(.d-legal) > :not(.d-kicker) {
    grid-column: 2;
  }
}

/* Auth + Mirror pack (/login, /begin) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.d-auth-page .d-auth-main {
  min-height: 100svh;
}

.d-auth-card {
  max-width: 26rem;
}

.d-auth-card .step { display: none; }
.d-auth-card .step.active { display: block; }

.d-auth-lead {
  margin-bottom: 1.75rem;
}

.d-auth-stack {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: stretch;
}

.d-auth-input {
  font-family: var(--d-sans);
  font-size: 1.05rem;
  color: var(--d-ink);
  background: rgba(247, 243, 235, 0.04);
  border: 1px solid rgba(247, 243, 235, 0.16);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  width: 100%;
  outline: none;
}

.d-auth-input:focus {
  border-color: rgba(245, 229, 71, 0.55);
}

.d-auth-input-code {
  letter-spacing: 0.35em;
  text-align: center;
  font-size: 1.35rem;
}

.d-auth-submit {
  width: 100%;
  text-align: center;
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.d-auth-trust {
  margin: 0;
  font-size: 0.85rem;
  color: var(--d-ink-3);
}

.d-auth-error {
  margin: 0;
  min-height: 1.25rem;
  font-size: 0.9rem;
  color: #ff9b9b;
}

.d-auth-waitlist-msg {
  margin: 0;
  font-size: 0.95rem;
  color: var(--d-ink-2);
}

.d-auth-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.d-auth-secondary .d-btn-ghost {
  padding-left: 0;
  min-height: 2.5rem;
}

/* Mirror pack notebook */
.d-pack-page .d-pack-main {
  max-width: var(--d-measure);
  margin: 0 auto;
  padding: max(6.5rem, calc(5rem + env(safe-area-inset-top))) var(--d-gutter) 4rem;
  padding-bottom: max(4rem, env(safe-area-inset-bottom));
}

.d-pack-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}

.d-pack-progress li {
  font-family: var(--d-sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}

.d-pack-progress li.is-current {
  color: var(--d-accent);
}

.d-pack-progress li.is-done {
  color: var(--d-ink-2);
}

.d-pack-prompt {
  margin: 0 0 1.25rem;
  font-size: clamp(1.55rem, 5vw, 2.05rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--d-ink);
  max-width: 22ch;
}

.d-pack-hint {
  margin: 0 0 1.5rem;
  color: var(--d-ink-2);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 34rem;
}

.d-pack-compose {
  display: flex;
  gap: 0.65rem;
  align-items: stretch;
  margin-bottom: 1.25rem;
}

.d-pack-compose .d-auth-input {
  flex: 1;
}

.d-pack-compose .d-btn-primary {
  flex-shrink: 0;
  min-width: 5.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.d-pack-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.d-pack-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-list li:last-child {
  border-bottom: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-item-text {
  flex: 1;
  margin: 0;
  color: var(--d-ink);
  font-size: 1.08rem;
  line-height: 1.45;
}

.d-pack-item-remove {
  font-family: var(--d-sans);
  font-size: 0.8rem;
  color: var(--d-ink-3);
  background: none;
  border: none;
  cursor: pointer;
  min-height: 2.5rem;
  padding: 0.35rem 0.25rem;
}

.d-pack-item-remove:hover {
  color: var(--d-ink);
}

.d-pack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.d-pack-status {
  margin: 0.85rem 0 0;
  min-height: 1.25rem;
  font-size: 0.9rem;
  color: var(--d-ink-3);
}

.d-pack-stub {
  margin-top: 0.5rem;
}

.d-pack-detail-group {
  margin: 0 0 1.75rem;
}

.d-pack-detail-kicker {
  margin: 0 0 0.65rem;
  font-family: var(--d-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}

.d-pack-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.d-pack-detail-item {
  padding: 0.95rem 0;
  border-top: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-detail-item:last-child {
  border-bottom: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.d-pack-detail-toggle {
  font-family: var(--d-sans);
  font-size: 0.8rem;
  color: var(--d-ink-2);
  background: none;
  border: none;
  cursor: pointer;
  min-height: 2.5rem;
  padding: 0.35rem 0.25rem;
  white-space: nowrap;
}

.d-pack-detail-toggle:hover {
  color: var(--d-accent);
}

.d-pack-detail-preview {
  margin: 0.55rem 0 0;
  color: var(--d-ink-2);
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 36rem;
}

.d-pack-detail-note {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.5;
}

.d-pack-detail-save {
  margin-top: 0.75rem;
  min-width: 7.5rem;
}

.d-pack-theme-ref {
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.d-pack-theme-ref-group {
  margin: 0;
}

.d-pack-theme-ref-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.d-pack-theme-ref-list li {
  padding: 0.7rem 0;
  border-top: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-theme-ref-list li:last-child {
  border-bottom: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-theme-suggest-bar {
  margin: 0 0 1.25rem;
}

.d-pack-theme-suggestions {
  margin: 0 0 1.75rem;
}

.d-pack-theme-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.d-pack-theme-suggest-list li {
  padding: 0.95rem 0;
  border-top: 1px solid rgba(247, 243, 235, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.d-pack-theme-suggest-list li:last-child {
  border-bottom: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-theme-suggest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.d-pack-theme-suggest-actions .d-btn-primary,
.d-pack-theme-suggest-actions .d-btn-ghost {
  min-height: 2.5rem;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.d-pack-toast {
  position: fixed;
  left: 50%;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(92vw, 24rem);
  padding: 0.85rem 1rem;
  border: 1px solid rgba(247, 243, 235, 0.18);
  background: rgba(12, 12, 12, 0.94);
  color: var(--d-ink);
  font-size: 0.95rem;
  line-height: 1.35;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.d-pack-toast-undo {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--d-yellow, #f5e6a3);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.15rem 0;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.d-pack-toast-undo:hover,
.d-pack-toast-undo:focus-visible {
  color: var(--d-ink);
}

.d-pack-clarify-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}

.d-pack-clarify-list li {
  padding: 1rem 0;
  border-top: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-clarify-list li:last-child {
  border-bottom: 1px solid rgba(247, 243, 235, 0.1);
}

.d-pack-clarify-q {
  margin: 0.45rem 0 0.75rem;
  color: var(--d-ink-2);
  font-size: 1rem;
  line-height: 1.45;
}

.d-chrome-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 720px) {
  .d-pack-compose {
    flex-direction: column;
  }

  .d-pack-compose .d-btn-primary {
    width: 100%;
    min-height: 3rem;
  }

  .d-pack-actions {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 19.5rem);
  }

  .d-pack-actions .d-btn-primary,
  .d-pack-actions .d-btn-ghost {
    width: 100%;
    min-height: 2.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}