@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

/* Sandbox/tmp dirs may be permission-locked; do not scan them for class detection. */
@source not "../../.codex-tmp";
@source not "../../.codex-tmp/**/*";
@source not "../../backend/.codex-tmp";
@source not "../../backend/.codex-tmp/**/*";

@custom-variant dark (&:is(.dark *));

/* ═══════════════════════════════════════════════════
   DocDoe AI — Clean Study Workspace Design System
   Aesthetic: NotebookLM × Apple Notes × Google Material 3
   Light-first, readable, calm, workspace-focused
   ═══════════════════════════════════════════════════ */

/* ─── Premium Easing Curves ─── */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glass: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

/* ─── Core Tokens — De-vibecoded · Minimal · Apple Study Workspace ─── */
:root {
  --bg-root: #050505;
  --bg-surface: #0B0B0C;
  --bg-elevated: #111113;
  --bg-panel: #171719;
  --bg-hover: rgba(255, 255, 255, 0.04);
  --bg-active: rgba(255, 255, 255, 0.07);
  --bg-glass: rgba(255, 255, 255, 0.04);
  --bg-glass-hover: rgba(255, 255, 255, 0.06);
  --bg-glass-strong: rgba(11, 11, 12, 0.92);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.10);
  --border-focus: rgba(255, 255, 255, 0.25);

  --text-primary: #F5F5F0;
  --text-secondary: rgba(245, 245, 240, 0.65);
  --text-muted: rgba(245, 245, 240, 0.40);
  --text-ghost: rgba(245, 245, 240, 0.38);

  /* Primary accent: white. DocDoe is a monochrome black/white identity — the
     old warm amber fought it on every focus ring, link, spinner, and badge. */
  --accent-primary: #ffffff;
  --accent-primary-light: rgba(255, 255, 255, 0.12);
  --accent-primary-hover: rgba(255, 255, 255, 0.9);
  /* Secondary accent: muted neutral */
  --accent-indigo: #ffffff;
  --accent-indigo-light: rgba(255, 255, 255, 0.024);
  --accent-blue: #60A5FA;
  --accent-blue-light: rgba(96, 165, 250, 0.10);
  --accent-green: #34D399;
  --accent-green-light: rgba(52, 211, 153, 0.10);
  --accent-amber: #F59E0B;
  --accent-amber-light: rgba(245, 158, 11, 0.12);
  --accent-red: #FB7185;
  --accent-red-light: rgba(251, 113, 133, 0.10);
  --accent-violet: #17181b;
  --accent-violet-light: rgba(23, 24, 27, 0.08);
  --accent-emerald: #10B981;
  --accent-emerald-light: rgba(16, 185, 129, 0.10);
  --accent-emerald-dim: linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  --glow-emerald: rgba(255, 255, 255, 0.06);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 8px 30px rgba(0,0,0,0.28);
  --shadow-md: 0 12px 40px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.45);
  --shadow-card: 0 8px 30px rgba(0,0,0,0.28), 0 0 0 1px var(--border-subtle);
  --shadow-glow: none;
  --shadow-glow-lg: none;

  --background: var(--bg-root);
  --foreground: var(--text-primary);
}

/* ─── Tailwind v4 Theme Injection ─── */
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-jakarta), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-space), ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-heading: var(--font-space), var(--font-jakarta), ui-sans-serif, system-ui, sans-serif;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);

  /* DocDoe craft palette.
     The literals live once, on .docdoe-student-os in student-os.css. These
     entries only expose them to Tailwind, so `bg-dd-paper` and the `dd-*`
     components in student-os.css resolve the identical token — there is no
     second copy of the scale to drift.
     Consequence: these utilities require the student shell ancestor. They are
     only ever used on authenticated student routes, which all have one. */
  --color-dd-paper: var(--dd-paper);
  --color-dd-canvas: var(--dd-canvas);
  --color-dd-sunk: var(--dd-sunk);
  --color-dd-panel: var(--dd-panel);
  --color-dd-ink: var(--dd-ink);
  --color-dd-ink-2: var(--dd-ink-2);
  --color-dd-muted: var(--dd-muted);
  --color-dd-faint: var(--dd-faint);
  --color-dd-line: var(--dd-line);
  --color-dd-line-strong: var(--dd-line-strong);
  --color-dd-positive: var(--dd-positive);
  --color-dd-positive-soft: var(--dd-positive-soft);
  --color-dd-positive-line: var(--dd-positive-line);
  --color-dd-attention: var(--dd-attention);
  --color-dd-attention-soft: var(--dd-attention-soft);
  --color-dd-attention-line: var(--dd-attention-line);
  --color-dd-critical: var(--dd-critical);
  --color-dd-critical-soft: var(--dd-critical-soft);
  --color-dd-critical-line: var(--dd-critical-line);
  --color-dd-board: var(--dd-board);
  --color-dd-board-panel: var(--dd-board-panel);
  --color-dd-board-line: var(--dd-board-line);
  --color-dd-board-ink: var(--dd-board-ink);
  --color-dd-board-muted: var(--dd-board-muted);
  --color-dd-chalk: var(--dd-chalk);
}

/* ─── Base ─── */
html {
  scroll-behavior: smooth;
  color-scheme: light;
}

html.lenis,
html.lenis body {
  scroll-behavior: auto !important;
}

html.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

html.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  background: var(--bg-root);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: 0;
}

button, a { cursor: pointer; }

/* Eliminate 300ms tap delay on all interactive elements — critical for mobile */
button, a, [role="button"], label, input[type="checkbox"], input[type="radio"] {
  touch-action: manipulation;
}

/* Reduce expensive backdrop-filter on mobile where GPU performance is limited.
   Touch devices (hover: none) typically have less GPU headroom.
   Background colors already provide sufficient contrast on dark theme. */
@media (max-width: 768px) and (hover: none) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

::selection {
  background: rgba(17, 18, 23, 0.14);
  color: var(--text-primary);
}

/* ═══════════════════════════
   WORKSPACE CARD
   Clean white card with soft border
   ═══════════════════════════ */

.workspace-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.workspace-card:hover {
  box-shadow: var(--shadow-md);
}

/* Legacy alias — keeps existing components working */
.premium-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.premium-panel:hover {
  box-shadow: var(--shadow-md);
}

.command-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

/* ═══════════════════════════
   BUTTONS
   ═══════════════════════════ */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: #080808;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: background 0.15s ease, transform 0.1s ease;
  gap: 8px;
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
}

.btn-primary:active {
  transform: scale(0.98);
}

/* Legacy alias for existing hero buttons */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  height: 44px;
  padding: 0 24px;
  border-radius: var(--radius-sm);
  background: var(--accent-primary);
  color: #080808;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  border: none;
  transition: background 0.15s ease, transform 0.1s ease;
  gap: 8px;
}

.btn-hero:hover {
  background: var(--accent-primary-hover);
}

.btn-hero:active {
  transform: scale(0.98);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border-medium);
  transition: background 0.15s ease, border-color 0.15s ease;
  gap: 8px;
}

.btn-secondary:hover {
  background: var(--bg-elevated);
  border-color: var(--border-medium);
}

/* ═══════════════════════════
   FORM INPUTS
   ═══════════════════════════ */

.input-field {
  height: 44px;
  width: 100%;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-field::placeholder {
  color: var(--text-ghost);
}

.input-field:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.08);
}

/* ═══════════════════════════
   STUDIO OUTPUT TILE
   ═══════════════════════════ */

.studio-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.studio-tile:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-md);
}

.studio-tile-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-primary-light);
}

/* ═══════════════════════════
   SOURCE CARD
   ═══════════════════════════ */

.source-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.source-card:hover {
  background: var(--bg-elevated);
}

/* ═══════════════════════════
   WORKSPACE SECTIONS
   ═══════════════════════════ */

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1.3;
}

/* ═══════════════════════════
   BADGE / CHIP
   ═══════════════════════════ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}

.chip-primary {
  background: var(--accent-primary-light);
  color: var(--accent-primary);
}

.chip-green {
  background: var(--accent-green-light);
  color: var(--accent-green);
}

.chip-amber {
  background: var(--accent-amber-light);
  color: var(--accent-amber);
}

.chip-red {
  background: var(--accent-red-light);
  color: var(--accent-red);
}

.chip-violet {
  background: var(--accent-violet-light);
  color: var(--accent-violet);
}

/* ═══════════════════════════
   PREMIUM CINEMATIC ANIMATIONS
   ═══════════════════════════ */

/* ─── Fade up (stagger-ready) ─── */
@keyframes dd-app-loading-sweep {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(360%);
  }
}

.dd-app-loading-bar {
  animation: dd-app-loading-sweep 1.25s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .dd-app-loading-bar {
    animation: none;
    opacity: 0.72;
    transform: translateX(75%);
  }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes msg-in-user {
  from { opacity: 0; transform: translateX(12px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes msg-in-assistant {
  from { opacity: 0; transform: translateX(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes progress-step {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.animate-msg-user      { animation: msg-in-user 0.35s var(--ease-out) both; will-change: transform, opacity; }
.animate-msg-assistant { animation: msg-in-assistant 0.35s var(--ease-out) both; will-change: transform, opacity; }

/* Study chat / knowledge brain tokens */
:root {
  --kb-card-border: rgba(255, 255, 255, 0.085);
  --kb-card-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018));
  --kb-trust-muted: rgba(255, 255, 255, 0.42);
  --kb-citation-bg: rgba(0, 0, 0, 0.2);
}

.kb-stream-cursor::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 1rem;
  margin-left: 0.15rem;
  vertical-align: -0.15rem;
  background: rgba(255, 255, 255, 0.72);
  animation: kb-blink 1s step-end infinite;
}

@keyframes kb-blink {
  50% { opacity: 0; }
}
.animate-progress-step { animation: progress-step 2s var(--ease-smooth) infinite; }

.animate-fade-up    { animation: fade-up 0.4s var(--ease-out) both; will-change: transform, opacity; }
.animate-fade-up-d1 { animation: fade-up 0.4s var(--ease-out) 0.08s both; will-change: transform, opacity; }
.animate-fade-up-d2 { animation: fade-up 0.4s var(--ease-out) 0.16s both; will-change: transform, opacity; }
.animate-fade-up-d3 { animation: fade-up 0.4s var(--ease-out) 0.24s both; will-change: transform, opacity; }
.animate-fade-up-d4 { animation: fade-up 0.4s var(--ease-out) 0.32s both; will-change: transform, opacity; }
.animate-fade-up-d5 { animation: fade-up 0.4s var(--ease-out) 0.40s both; will-change: transform, opacity; }
.animate-fade-in    { animation: fade-in 0.3s var(--ease-out) both; will-change: opacity; }
.animate-slide-up   { animation: slide-up 0.5s var(--ease-out) both; will-change: transform, opacity; }
.animate-slide-down { animation: slide-down 0.35s var(--ease-out) both; will-change: transform, opacity; }
.animate-scale-in   { animation: scale-in 0.3s var(--ease-out) both; will-change: transform, opacity; }

/* ─── Mobile Utilities ─── */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Safe area padding for mobile bottom nav */
.safe-bottom-padding {
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
}

/* ─── Stagger children (applied to parent) ─── */
.stagger-children > * {
  opacity: 0;
  animation: fade-up 0.4s var(--ease-out) forwards;
  will-change: transform, opacity;
}

.stagger-children > *:nth-child(1)  { animation-delay: 0.02s; }
.stagger-children > *:nth-child(2)  { animation-delay: 0.06s; }
.stagger-children > *:nth-child(3)  { animation-delay: 0.10s; }
.stagger-children > *:nth-child(4)  { animation-delay: 0.14s; }
.stagger-children > *:nth-child(5)  { animation-delay: 0.18s; }
.stagger-children > *:nth-child(6)  { animation-delay: 0.22s; }
.stagger-children > *:nth-child(7)  { animation-delay: 0.26s; }
.stagger-children > *:nth-child(8)  { animation-delay: 0.30s; }

/* ─── Panel utilities (minimal, no blur) ─── */
.glass-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.glass-panel-strong {
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

/* ─── Focus ring ─── */
.glow-ring {
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.glow-ring-subtle {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ─── Cinematic light streak ─── */
@keyframes light-streak {
  0%   { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { transform: translateX(400%) skewX(-15deg); opacity: 0; }
}

.light-streak {
  position: relative;
  overflow: hidden;
}

.light-streak::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%) skewX(-15deg);
  pointer-events: none;
}

.light-streak:hover::after {
  animation: light-streak 0.8s var(--ease-out);
}

/* ─── Floating animation ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}

.animate-float     { animation: float 6s ease-in-out infinite; will-change: transform; }
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; will-change: transform; }
.animate-float-d1  { animation: float 6s ease-in-out 1s infinite; will-change: transform; }
.animate-float-d2  { animation: float 6s ease-in-out 2s infinite; will-change: transform; }

/* ─── Pulse glow (disabled — workspace is minimal) ─── */
.animate-pulse-glow {
  /* no-op */
}

/* ─── Breathing border glow (disabled) ─── */
.animate-border-glow {
  /* no-op */
}

/* ─── Shimmer on hover ─── */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer-hover {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  background-size: 200% 100%;
}

.shimmer-hover:hover {
  animation: shimmer 1.5s var(--ease-out);
}

/* ─── Typing indicator ─── */
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.typing-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typing-dot 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Staged "thinking" beat — each new beat fades/slides in as it swaps */
@keyframes stage-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-stage-in { animation: stage-in 0.28s var(--ease-out, ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .animate-stage-in { animation: none; }
}

/* ─── App feel: motion + depth layer ───────────────────────────────────────
   Product-register motion for the working app surfaces. Screens breathe in on
   navigation, card rows cascade, interactive surfaces gain tactile depth on
   hover/press. Strict monochrome — depth is white-alpha borders and shadow,
   never colour. All of it collapses under prefers-reduced-motion. */

/* Whole-screen reveal, re-triggered per route (keyed on pathname in AppLayout) */
@keyframes dd-route-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.dd-route-enter {
  animation: dd-route-enter 0.42s var(--ease-out) both;
  /* Deliberately no `will-change`: it permanently promoted the whole route to
     a compositor layer, which costs more VRAM than it saves on low-end
     Android. The browser promotes for the animation duration anyway. */
}

/* Cascade: direct children reveal in sequence. Apply to a row/list wrapper. */
@keyframes dd-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dd-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* The container carries one fade so items past the cap still arrive as part of
   a single motion rather than popping in. */
.dd-stagger {
  animation: dd-fade 0.5s var(--ease-out) both;
}
.dd-stagger > * {
  animation: dd-rise 0.5s var(--ease-out) both;
}
.dd-stagger > *:nth-child(1) { animation-delay: 0.04s; }
.dd-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.dd-stagger > *:nth-child(3) { animation-delay: 0.16s; }
.dd-stagger > *:nth-child(4) { animation-delay: 0.22s; }
.dd-stagger > *:nth-child(5) { animation-delay: 0.28s; }
.dd-stagger > *:nth-child(6) { animation-delay: 0.34s; }
/* Capped at 6: beyond that the children stop animating individually and ride
   the container fade. Two reasons — a long list should not run dozens of
   animations, and previously item 9+ had no delay at all, so later items
   appeared *before* earlier ones had settled. */
.dd-stagger > *:nth-child(n + 7) { animation: none; }

/* Tactile depth for interactive cards/rows. Compose with existing borders. */
.dd-lift {
  transition:
    transform 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out),
    box-shadow 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out);
}
.dd-lift:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
}
.dd-press { transition: transform 0.12s var(--ease-out); }
.dd-press:active { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .dd-route-enter,
  .dd-stagger,
  .dd-stagger > * { animation: none; }
  .dd-lift:hover { transform: none; }
  .dd-press:active { transform: none; }
}

/* ─── Spinner glow ─── */
@keyframes spinner-glow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-glow {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spinner-glow 0.8s linear infinite;
  will-change: transform;
}

/* ─── Emphasis text ─── solid white; gradient text fought the mono brand. */
.gradient-text {
  color: #ffffff;
}

/* ─── Expand animation for FAQ / collapsible ─── */
@keyframes expand-in {
  from { opacity: 0; transform: scaleY(0.96); max-height: 0; }
  to { opacity: 1; transform: scaleY(1); max-height: 500px; }
}

@keyframes collapse-out {
  from { opacity: 1; transform: scaleY(1); max-height: 500px; }
  to { opacity: 0; transform: scaleY(0.96); max-height: 0; }
}

/* ─── Cine pearl background shine ─── */
@keyframes cine-pearl {
  0%   { background-position: 100% 50%; }
  40%  { background-position: 0% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Hardware acceleration helper ─── */
.gpu {
  transform: translateZ(0);
  will-change: transform;
}

/* ═══════════════════════════
   GRID OVERLAY (subtle)
   ═══════════════════════════ */

.grid-overlay {
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.3;
}

/* ═══════════════════════════
   PRICING CARDS
   ═══════════════════════════ */

.pricing-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.pricing-card-featured {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary), var(--shadow-lg);
  position: relative;
}

/* ═══════════════════════════
   WORKSPACE PREVIEW (Landing)
   ═══════════════════════════ */

.workspace-preview {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.workspace-preview-panel {
  border-right: 1px solid var(--border-subtle);
  padding: 16px;
}

.workspace-preview-panel:last-child {
  border-right: none;
}

/* ═══════════════════════════
   SCORE PATH (horizontal steps)
   ═══════════════════════════ */

.score-path-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
}

.score-path-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-primary-light);
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
  position: relative;
  z-index: 1;
}

.score-path-connector {
  position: absolute;
  top: 24px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 2px;
  background: var(--border-medium);
}

/* ═══════════════════════════
   NAV ACTIVE INDICATOR
   ═══════════════════════════ */

.nav-active {
  background: var(--accent-primary-light);
  color: var(--accent-primary);
  font-weight: 600;
}

/* ═══════════════════════════
   SCROLLBAR (clean)
   ═══════════════════════════ */

::-webkit-scrollbar {
  width: 4.5px;
  height: 4.5px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ═══════════════════════════
   RESPONSIVE UTILS
   ═══════════════════════════ */

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* ═══════════════════════════════════════════════════
   LANDING PAGE — Premium Dark Theme (scoped)
   Deep navy / midnight with blue-violet accents
   Only affects elements inside .landing
   ═══════════════════════════════════════════════════ */

.landing {
  --l-bg: #0B0B0C;
  --l-bg-card: #111113;
  --l-bg-elevated: #161618;
  --l-bg-glass: rgba(255,255,255,0.03);
  --l-border: rgba(255,255,255,0.07);
  --l-border-hover: rgba(255,255,255,0.12);
  --l-text: #F0F1F5;
  --l-text-sub: #9CA3B8;
  --l-text-dim: #636A82;
  --l-accent: #ffffff;
  --l-accent-hover: #ffffff;
  --l-accent-glow: rgba(255, 255, 255, 0.03);
  --l-violet: #ffffff;
  --l-blue: #c0c0c0;
  --l-green: #10B981;
  --l-amber: #F59E0B;
  --l-red: #EF4444;

  background: var(--l-bg);
  color: var(--l-text);
  font-family: var(--font-jakarta), ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

.landing ::selection {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* ─── Landing Navbar ─── */
.l-nav {
  position: sticky;
  top: 0;
  z-index: 5120;
  border-bottom: 1px solid var(--l-border);
  background: rgba(11,14,26,0.82);
  backdrop-filter: blur(36px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* ─── Landing Buttons ─── */
.l-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  background: var(--l-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.l-btn-primary:hover {
  background: var(--l-accent-hover);
  box-shadow: 0 0 20px var(--l-accent-glow);
}

.l-btn-primary:active { transform: scale(0.98); }

.l-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 22px;
  border-radius: 8px;
  background: transparent;
  color: var(--l-text-sub);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--l-border);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.l-btn-ghost:hover {
  border-color: var(--l-border-hover);
  color: var(--l-text);
  background: var(--l-bg-glass);
}

/* ─── Landing Pill ─── */
.l-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 100px;
  background: var(--l-accent-glow);
  color: var(--l-accent-hover);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* ─── Landing Card ─── */
.l-card {
  background: var(--l-bg-card);
  border: 1px solid var(--l-border);
  border-radius: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.l-card:hover {
  border-color: var(--l-border-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* ─── Hero Product Visual ─── */
.l-visual-container {
  position: relative;
}

.l-float-panel {
  background: var(--l-bg-card);
  border: 1px solid var(--l-border);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  position: absolute;
}

.l-float-panel-glow {
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 30px var(--l-accent-glow);
}

/* ─── Capability Card ─── */
.l-cap-card {
  background: var(--l-bg-card);
  border: 1px solid var(--l-border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.l-cap-card:hover {
  border-color: var(--l-border-hover);
  transform: translateY(-2px);
}

.l-cap-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

/* ─── Pricing Card ─── */
.l-price-card {
  background: var(--l-bg-card);
  border: 1px solid var(--l-border);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.l-price-featured {
  border-color: var(--l-accent);
  box-shadow: 0 0 0 1px var(--l-accent), 0 8px 32px rgba(255, 255, 255, 0.02);
  position: relative;
}

/* ─── Landing Animations ─── */
@keyframes l-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes l-glow-drift {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

.l-anim-float-1 { animation: l-float 6s ease-in-out infinite; }
.l-anim-float-2 { animation: l-float 7s ease-in-out 1s infinite; }
.l-anim-float-3 { animation: l-float 5s ease-in-out 2s infinite; }
.l-anim-float-4 { animation: l-float 8s ease-in-out 0.5s infinite; }

.l-anim-glow {
  animation: l-glow-drift 4s ease-in-out infinite;
}

.animate-fade-up-d3 {
  animation: fade-up 0.4s ease-out 0.3s both;
}

.animate-fade-up-d4 {
  animation: fade-up 0.4s ease-out 0.4s both;
}

.animate-fade-up-d5 {
  animation: fade-up 0.4s ease-out 0.5s both;
}

/* ==========================================================================
   DocDoe AI cinematic landing hero
   ========================================================================== */

/* content-visibility off on landing: it breaks hash-anchor scroll positions
   (Proof / Tonight / Pricing nav links jump to the wrong fold). */
.docdoe-landing > section {
  content-visibility: visible;
}

.docdoe-landing {
  --dd-bg: #030303;
  --dd-pricing-bg: #050505;
  --dd-faq-stripe-a: #050505;
  --dd-faq-stripe-b: #0a0a0a;
  --dd-surface: #0c0c0c;
  --dd-elevated: #111111;
  --dd-primary: #ffffff;
  --dd-secondary: #ffffff;
  --dd-text: #f2f4f1;
  --dd-text-secondary: rgba(242, 244, 241, 0.62);
  --dd-border: rgba(255, 255, 255, 0.12);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--dd-bg);
  color: var(--dd-text);
  color-scheme: dark;
  font-family: var(--font-docdoe-sans), "Onest", ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: 0;
}

.docdoe-landing .font-display,
.docdoe-landing .font-display * {
  font-family: var(--font-docdoe-display), "Archivo", ui-sans-serif, system-ui, sans-serif;
}

.docdoe-landing * {
  letter-spacing: 0;
}

.docdoe-landing ::selection {
  background: rgba(255, 255, 255, 0.087);
  color: #ffffff;
}

.docdoe-landing section,
.docdoe-landing footer {
  scroll-margin-top: 96px;
}

/* --------------------------------------------------------------------------
   Global landing atmosphere (noise, dot grid, top glow)
   -------------------------------------------------------------------------- */

.docdoe-atmosphere-noise {
  opacity: 1;
  mix-blend-mode: soft-light;
}

.docdoe-atmosphere-dots {
  opacity: 0.03;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 1) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
}

.docdoe-atmosphere-global-glow {
  top: -120px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.016) 0%, transparent 68%);
  filter: blur(180px);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Hero atmosphere enhancements
   -------------------------------------------------------------------------- */

.docdoe-hero-blob-tl {
  position: absolute;
  top: -12%;
  left: -8%;
  width: min(520px, 72vw);
  height: min(420px, 58vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 72%);
  filter: blur(160px);
  opacity: 0.1;
}

.docdoe-hero-blob-tr {
  position: absolute;
  top: -10%;
  right: -6%;
  width: min(480px, 68vw);
  height: min(400px, 56vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.044) 45%, transparent 70%);
  filter: blur(160px);
  opacity: 0.1;
}

.docdoe-hero-cta-stage {
  position: absolute;
  left: 50%;
  bottom: 8%;
  z-index: 2;
  width: min(420px, 88vw);
  height: 140px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(248, 250, 252, 0.22) 0%, rgba(255, 255, 255, 0.063) 28%, rgba(255, 255, 255, 0.016) 52%, transparent 72%);
  filter: blur(48px);
  opacity: 0.55;
  transform: translateX(-50%) rotateX(72deg);
  animation: docdoe-hero-cta-stage-breathe 3.4s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;
}

@keyframes docdoe-hero-cta-stage-breathe {
  from {
    opacity: 0.42;
    transform: translateX(-50%) rotateX(72deg) scale(0.94);
  }

  to {
    opacity: 0.68;
    transform: translateX(-50%) rotateX(72deg) scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   What is DocDoe — orbital atmosphere
   -------------------------------------------------------------------------- */

.docdoe-what-core-blob {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(560px, 72vw);
  height: min(380px, 52vw);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.056) 38%, transparent 72%);
  filter: blur(100px);
  opacity: 0.85;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.docdoe-what-ring-field {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: min(720px, 88vw);
  height: min(520px, 72vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.docdoe-what-ring-field span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.018);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.docdoe-what-ring-field span:nth-child(1) {
  width: 28%;
  height: 28%;
}

.docdoe-what-ring-field span:nth-child(2) {
  width: 44%;
  height: 44%;
}

.docdoe-what-ring-field span:nth-child(3) {
  width: 60%;
  height: 60%;
}

.docdoe-what-ring-field span:nth-child(4) {
  width: 76%;
  height: 76%;
}

.docdoe-what-ring-field span:nth-child(5) {
  width: 92%;
  height: 92%;
}

.docdoe-what-ring-field span:nth-child(6) {
  width: 108%;
  height: 108%;
}

/* --------------------------------------------------------------------------
   How it works — column glows
   -------------------------------------------------------------------------- */

.docdoe-story-headline-glow {
  position: absolute;
  left: -8%;
  top: 12%;
  z-index: 0;
  width: min(520px, 110%);
  height: min(420px, 72%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.044) 0%, rgba(255, 255, 255, 0.016) 42%, transparent 70%);
  filter: blur(90px);
  opacity: 0.55;
  pointer-events: none;
}

.docdoe-flow-timeline-glow {
  position: absolute;
  left: 68px;
  top: 12%;
  z-index: 0;
  width: 200px;
  height: 76%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.056) 0%, rgba(255, 255, 255, 0.02) 45%, transparent 72%);
  filter: blur(70px);
  opacity: 0.65;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Pricing — section band + card glows
   -------------------------------------------------------------------------- */

.docdoe-pricing-popular-underglow {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 0;
  width: min(280px, 72%);
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.11) 0%, transparent 68%);
  filter: blur(80px);
  opacity: 0.15;
  transform: translate(-50%, -35%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Footer CTA — card spotlight
   -------------------------------------------------------------------------- */

.docdoe-final-cta-spotlight {
  position: absolute;
  left: 50%;
  bottom: 18%;
  z-index: 1;
  width: min(480px, 88vw);
  height: 200px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.036) 40%, transparent 72%);
  filter: blur(56px);
  opacity: 0.75;
  transform: translateX(-50%);
  pointer-events: none;
}

.docdoe-navbar {
  pointer-events: none;
  backdrop-filter: blur(14px);
}

.docdoe-nav-shell {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.022);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.044), rgba(248, 250, 252, 0.008)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.021), rgba(255, 255, 255, 0.008), rgba(255, 255, 255, 0.009)),
    rgba(2, 4, 8, 0.14);
  box-shadow:
    0 14px 46px rgba(0, 0, 0, 0.2),
    0 0 58px rgba(255, 255, 255, 0.009),
    inset 0 1px 0 rgba(255, 255, 255, 0.065),
    inset 0 -1px 0 rgba(255, 255, 255, 0.012);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

.docdoe-nav-shell::before {
  position: absolute;
  inset: 1px;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(110deg, transparent 0 22%, rgba(255, 255, 255, 0.08) 35%, transparent 51%),
    radial-gradient(circle at 14% 50%, rgba(255, 255, 255, 0.038), transparent 28%),
    radial-gradient(circle at 86% 50%, rgba(255, 255, 255, 0.018), transparent 25%);
  opacity: 0.42;
  pointer-events: none;
}

.docdoe-nav-shell::after {
  position: absolute;
  inset: auto 18% 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.11), transparent);
  pointer-events: none;
}

.docdoe-nav-shell > * {
  position: relative;
  z-index: 1;
}

.docdoe-hero-trust-row {
  max-width: min(100%, 620px);
}

.docdoe-hero-trust-item {
  min-width: 0;
  white-space: nowrap;
}

.docdoe-logo-mark {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  border: 1px solid rgba(248, 250, 252, 0.08);
  border-radius: 11px;
  background-image: url("/docdoe-logo-mark.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 102%;
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.07),
    0 0 28px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.docdoe-logo-mark::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 42%),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.22), transparent 28%);
  mix-blend-mode: screen;
  opacity: 0.36;
  pointer-events: none;
}

.docdoe-logo-mark::after {
  position: absolute;
  inset: 1px;
  content: "";
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  pointer-events: none;
}

.docdoe-nav-cta {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.135);
  border-radius: 999px;
  padding: 0 15px 0 18px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 500;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.012)),
    linear-gradient(100deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.01)),
    rgba(2, 4, 8, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.028),
    0 9px 28px rgba(0, 0, 0, 0.16),
    0 0 24px rgba(255, 255, 255, 0.019);
  transition:
    transform 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease,
    background 320ms ease;
}

.docdoe-nav-cta:hover {
  border-color: rgba(248, 250, 252, 0.34);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.022)),
    linear-gradient(100deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.015)),
    rgba(11, 22, 34, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    0 11px 34px rgba(0, 0, 0, 0.18),
    0 0 32px rgba(255, 255, 255, 0.03);
  transform: translateY(-1px);
}

.docdoe-nav-cta:focus-visible,
.docdoe-hero-cta:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.378);
  outline-offset: 4px;
}

.docdoe-hero {
  background:
    radial-gradient(ellipse at 50% 39%, rgba(248, 250, 252, 0.058), transparent 18%),
    radial-gradient(ellipse at 50% 56%, rgba(255, 255, 255, 0.04), transparent 37%),
    radial-gradient(ellipse at 50% 88%, rgba(255, 255, 255, 0.036), transparent 36%),
    linear-gradient(180deg, #080808 0%, #080808 43%, #080808 100%);
}

.docdoe-hero-depth,
.docdoe-fine-grid {
  position: absolute;
  inset: 0;
}

.docdoe-hero-depth {
  background:
    radial-gradient(ellipse at center top, rgba(255, 255, 255, 0.033), transparent 45%),
    radial-gradient(ellipse at 28% 54%, rgba(255, 255, 255, 0.025), transparent 35%),
    radial-gradient(ellipse at 70% 48%, rgba(255, 255, 255, 0.032), transparent 33%),
    radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.034), transparent 45%);
}

.docdoe-fine-grid {
  opacity: 0.04;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(248, 250, 252, 0.16) 0 0.8px, transparent 1px);
  background-position: center;
  background-size: 112px 112px, 112px 112px, 58px 58px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 72%);
}

.docdoe-particle-veil {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    radial-gradient(circle, rgba(248, 250, 252, 0.5) 0 0.7px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.171) 0 0.8px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.081) 0 0.7px, transparent 1.1px);
  background-position: 12px 8px, 78px 44px, 38px 116px;
  background-size: 164px 164px, 231px 231px, 296px 296px;
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 78%);
  animation: docdoe-particles-drift 34s linear infinite;
}

.docdoe-ambient-mesh {
  position: absolute;
  inset: -14% -8%;
  opacity: 0.74;
  background:
    radial-gradient(ellipse at 31% 32%, rgba(255, 255, 255, 0.06), transparent 35%),
    radial-gradient(ellipse at 68% 32%, rgba(255, 255, 255, 0.045), transparent 33%),
    radial-gradient(ellipse at 50% 62%, rgba(248, 250, 252, 0.055), transparent 37%);
  filter: blur(54px);
  transform: translateZ(0);
}

.docdoe-liquid-fog {
  position: absolute;
  left: 50%;
  width: min(1120px, 120vw);
  height: 520px;
  border-radius: 48% 52% 55% 45%;
  filter: blur(60px);
  opacity: 0.36;
  mix-blend-mode: screen;
  transform: translateX(-50%);
  animation: docdoe-liquid-float 22s ease-in-out infinite;
}

.docdoe-liquid-fog-one {
  top: 16%;
  margin-left: -18vw;
  background: linear-gradient(115deg, transparent 2%, rgba(255, 255, 255, 0.052) 42%, rgba(248, 250, 252, 0.045) 62%, transparent 94%);
}

.docdoe-liquid-fog-two {
  top: 30%;
  margin-left: 18vw;
  opacity: 0.28;
  background: linear-gradient(65deg, transparent 4%, rgba(255, 255, 255, 0.041) 34%, rgba(255, 255, 255, 0.045) 70%, transparent 96%);
  animation-delay: -9s;
  animation-direction: reverse;
}

.docdoe-aurora {
  position: absolute;
  left: 50%;
  width: min(920px, 96vw);
  height: 420px;
  border-radius: 999px;
  opacity: 0.4;
  filter: blur(36px);
  mix-blend-mode: screen;
  transform: translateX(-50%) rotate(-9deg);
  animation: docdoe-aurora-drift 18s ease-in-out infinite;
}

.docdoe-aurora-left {
  top: 20%;
  margin-left: -22vw;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.075) 38%, rgba(255, 255, 255, 0.027) 72%, transparent 100%);
}

.docdoe-aurora-right {
  top: 30%;
  margin-left: 24vw;
  opacity: 0.3;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.045) 28%, rgba(255, 255, 255, 0.05) 62%, transparent 100%);
  animation-delay: -8s;
  animation-direction: reverse;
}

.docdoe-orbit-arc {
  position: absolute;
  top: 11%;
  left: 50%;
  width: min(1420px, 136vw);
  height: min(720px, 64vw);
  border: 1px solid rgba(255, 255, 255, 0.068);
  border-bottom-color: rgba(255, 255, 255, 0.018);
  border-radius: 50%;
  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.014),
    0 0 42px rgba(255, 255, 255, 0.016);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 86%, transparent 100%);
  transform: translateX(-50%) rotate(-7deg);
  animation: docdoe-orbit-drift 22s ease-in-out infinite;
}

.docdoe-orbit-arc::before {
  position: absolute;
  left: 50%;
  top: -1px;
  width: 18%;
  height: 1px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.34), transparent);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.07));
  transform: translateX(-50%);
}

.docdoe-orbit-arc-secondary {
  top: 28%;
  width: min(1280px, 124vw);
  height: min(610px, 58vw);
  border-color: rgba(255, 255, 255, 0.024);
  border-left-color: rgba(255, 255, 255, 0.029);
  transform: translateX(-50%) rotate(19deg);
  animation-duration: 28s;
  animation-direction: reverse;
}

.docdoe-orbit-arc-tertiary {
  top: 39%;
  width: min(960px, 96vw);
  height: min(360px, 42vw);
  border-color: rgba(248, 250, 252, 0.055);
  border-top-color: rgba(255, 255, 255, 0.029);
  border-bottom-color: transparent;
  transform: translateX(-50%) rotate(-2deg);
  animation-duration: 32s;
}

.docdoe-comet {
  position: absolute;
  top: 49%;
  left: 6.7%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 18px #ffffff,
    0 0 46px rgba(255, 255, 255, 0.245),
    0 0 96px rgba(255, 255, 255, 0.155);
  animation: docdoe-comet-float 9s ease-in-out infinite;
}

.docdoe-comet::before {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 260px;
  height: 3px;
  content: "";
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.045), rgba(248, 250, 252, 0.9));
  filter: blur(1px);
  transform: translateY(-50%) rotate(-32deg);
  transform-origin: right center;
}

.docdoe-comet::after {
  position: absolute;
  inset: -55px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07), transparent 68%);
  filter: blur(8px);
}

.docdoe-planet-system {
  position: absolute;
  top: 28%;
  right: 7.6%;
  width: 178px;
  aspect-ratio: 1;
  animation: docdoe-planet-drift 13s ease-in-out infinite;
}

.docdoe-planet-ring,
.docdoe-planet-axis,
.docdoe-planet-core,
.docdoe-planet-node {
  position: absolute;
  display: block;
}

.docdoe-planet-ring {
  border: 1px solid rgba(255, 255, 255, 0.153);
  border-radius: 50%;
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.02),
    0 0 24px rgba(255, 255, 255, 0.025);
}

.docdoe-planet-ring-outer {
  inset: 0;
}

.docdoe-planet-ring-inner {
  inset: 20px;
  border-color: rgba(255, 255, 255, 0.105);
  transform: rotate(22deg) scaleX(1.12);
}

.docdoe-planet-axis {
  top: 50%;
  left: -8%;
  width: 116%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.25), transparent);
}

.docdoe-planet-core {
  inset: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 37% 31%, rgba(255, 255, 255, 0.92) 0 4%, rgba(255, 255, 255, 0.396) 10%, transparent 19%),
    radial-gradient(circle at 48% 45%, rgba(255, 255, 255, 0.237), rgba(57, 33, 126, 0.92) 48%, rgba(2, 4, 8, 0.98) 74%);
  box-shadow:
    inset -18px -18px 36px rgba(0, 0, 0, 0.72),
    inset 9px 8px 24px rgba(255, 255, 255, 0.12),
    0 0 32px rgba(255, 255, 255, 0.225),
    0 0 84px rgba(255, 255, 255, 0.095);
}

.docdoe-planet-core::after {
  position: absolute;
  inset: -24px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.065), transparent 70%);
  filter: blur(8px);
}

.docdoe-planet-node {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow: 0 0 12px rgba(248, 250, 252, 0.9);
}

.docdoe-planet-node-one {
  top: 0;
  left: 49%;
}

.docdoe-planet-node-two {
  right: 0;
  top: 49%;
}

.docdoe-portal-system {
  position: absolute;
  bottom: -1.5%;
  left: 50%;
  width: min(960px, 112vw);
  height: 350px;
  perspective: 900px;
  transform: translateX(-50%);
}

.docdoe-portal-ring,
.docdoe-portal-core,
.docdoe-portal-beam {
  position: absolute;
  left: 50%;
  display: block;
}

.docdoe-portal-ring {
  bottom: 102px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.045),
    0 0 22px rgba(255, 255, 255, 0.045);
  transform: translateX(-50%) rotateX(68deg);
  animation: docdoe-portal-pulse 7s ease-in-out infinite;
}

.docdoe-portal-ring-one {
  width: 28%;
  height: 28%;
  border-color: rgba(248, 250, 252, 0.62);
  box-shadow:
    0 0 18px rgba(248, 250, 252, 0.34),
    0 0 42px rgba(255, 255, 255, 0.145),
    inset 0 0 22px rgba(255, 255, 255, 0.105);
}

.docdoe-portal-ring-two {
  width: 42%;
  height: 42%;
  border-color: rgba(255, 255, 255, 0.16);
  animation-delay: -1.2s;
}

.docdoe-portal-ring-three {
  width: 56%;
  height: 56%;
  border-color: rgba(255, 255, 255, 0.105);
  animation-delay: -2.4s;
}

.docdoe-portal-ring-four {
  width: 72%;
  height: 72%;
  border-color: rgba(255, 255, 255, 0.08);
  animation-delay: -3.6s;
}

.docdoe-portal-ring-five {
  width: 92%;
  height: 92%;
  border-color: rgba(255, 255, 255, 0.05);
  animation-delay: -4.8s;
}

.docdoe-portal-core {
  bottom: 96px;
  width: 92px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 10%, rgba(255, 255, 255, 0.378) 24%, rgba(255, 255, 255, 0.095) 48%, transparent 75%);
  filter: blur(1px);
  box-shadow:
    0 0 20px rgba(248, 250, 252, 0.88),
    0 0 72px rgba(255, 255, 255, 0.21),
    0 0 120px rgba(255, 255, 255, 0.072);
  transform: translateX(-50%);
  animation: docdoe-core-pulse 6s ease-in-out infinite;
}

.docdoe-portal-beam {
  bottom: 118px;
  width: 2px;
  height: 184px;
  background: linear-gradient(180deg, transparent, rgba(248, 250, 252, 0.46), rgba(255, 255, 255, 0.23), #ffffff);
  box-shadow:
    0 0 18px rgba(248, 250, 252, 0.82),
    0 0 42px rgba(255, 255, 255, 0.175);
  transform: translateX(-50%);
  opacity: 0.56;
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 100%);
}

.docdoe-horizon-glow {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: min(940px, 114vw);
  height: 240px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(248, 250, 252, 0.052) 0 4%, rgba(255, 255, 255, 0.05) 12%, rgba(255, 255, 255, 0.018) 32%, transparent 64%),
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.022) 25%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.022) 75%, transparent 100%);
  filter: blur(34px);
  opacity: 0.68;
  transform: translateX(-50%) rotateX(68deg);
  animation: docdoe-horizon-breathe 12s ease-in-out infinite;
}

.docdoe-horizon-glow::after {
  position: absolute;
  inset: 44% 12% auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.18), rgba(255, 255, 255, 0.063), transparent);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.035),
    0 0 34px rgba(255, 255, 255, 0.036);
}

.docdoe-lens-line {
  position: absolute;
  left: 50%;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.063), rgba(248, 250, 252, 0.08), transparent);
  transform: translateX(-50%);
  animation: docdoe-lens-drift 14s ease-in-out infinite;
}

.docdoe-lens-line-one {
  bottom: 21%;
  width: min(740px, 88vw);
  opacity: 0.4;
}

.docdoe-lens-line-two {
  bottom: 17%;
  width: min(520px, 72vw);
  opacity: 0.24;
  animation-delay: -6s;
}

.docdoe-floor-atmosphere {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: min(980px, 116vw);
  height: 320px;
  perspective: 1200px;
  opacity: 0.9;
  transform: translateX(-50%);
}

.docdoe-floor-atmosphere span {
  position: absolute;
  left: 50%;
  display: block;
  transform: translateX(-50%);
}

.docdoe-floor-haze {
  bottom: 42px;
  width: min(920px, 108vw);
  height: 190px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(248, 250, 252, 0.045) 0 6%, rgba(255, 255, 255, 0.045) 20%, rgba(255, 255, 255, 0.018) 42%, transparent 72%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.036), transparent);
  filter: blur(24px);
  opacity: 0.7;
  transform: translateX(-50%) rotateX(72deg);
  animation: docdoe-floor-breathe 14s ease-in-out infinite;
}

.docdoe-floor-bloom {
  bottom: 125px;
  width: 230px;
  height: 20px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(248, 250, 252, 0.34) 44%, rgba(255, 255, 255, 0.12) 55%, transparent 100%),
    radial-gradient(ellipse at center, rgba(248, 250, 252, 0.18), transparent 64%);
  box-shadow:
    0 0 24px rgba(248, 250, 252, 0.16),
    0 0 56px rgba(255, 255, 255, 0.045);
  filter: blur(10px);
  opacity: 0.44;
  transform: translateX(-50%) rotateX(70deg);
  animation: docdoe-floor-bloom 11s ease-in-out infinite;
}

.docdoe-floor-ring {
  bottom: 84px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.026), transparent),
    radial-gradient(ellipse at center, transparent 52%, rgba(255, 255, 255, 0.013) 68%, transparent 72%);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.009),
    0 0 18px rgba(255, 255, 255, 0.014);
  transform: translateX(-50%) rotateX(72deg);
  animation: docdoe-floor-ring 16s ease-in-out infinite;
}

.docdoe-floor-ring-one {
  width: 38%;
  height: 27%;
  border-color: rgba(248, 250, 252, 0.14);
  box-shadow:
    0 0 14px rgba(248, 250, 252, 0.08),
    0 0 36px rgba(255, 255, 255, 0.03);
}

.docdoe-floor-ring-two {
  width: 62%;
  height: 41%;
  border-color: rgba(255, 255, 255, 0.043);
  opacity: 0.78;
  animation-delay: -4s;
}

.docdoe-floor-ring-three {
  width: 88%;
  height: 57%;
  border-color: rgba(255, 255, 255, 0.018);
  opacity: 0.62;
  animation-delay: -8s;
}

.docdoe-floor-reflection {
  bottom: 22px;
  width: min(880px, 104vw);
  height: 138px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(248, 250, 252, 0.035), rgba(255, 255, 255, 0.034) 26%, rgba(255, 255, 255, 0.01) 48%, transparent 72%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  filter: blur(34px);
  opacity: 0.54;
  transform: translateX(-50%) rotateX(70deg);
}

.docdoe-star {
  position: absolute;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow:
    0 0 8px rgba(248, 250, 252, 0.88),
    0 0 18px rgba(255, 255, 255, 0.095);
  animation: docdoe-star-drift 16s ease-in-out infinite;
}

.docdoe-motion-no-css-animation {
  animation: none !important;
}

.docdoe-eyebrow {
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.175),
    0 0 26px rgba(255, 255, 255, 0.036);
}

.docdoe-eyebrow::before,
.docdoe-eyebrow::after {
  display: inline-block;
  width: clamp(44px, 13vw, 120px);
  height: 1px;
  margin: 0 18px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.216), transparent);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.docdoe-gradient-text {
  color: #ffffff;
  background: none;
  background-clip: unset;
  -webkit-background-clip: unset;
  text-shadow: none;
}

.docdoe-hero-cta {
  position: relative;
  display: inline-flex;
  width: min(306px, calc(100vw - 48px));
  min-width: 0;
  max-width: 344px;
  min-height: 70px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.42), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.07) 34%, rgba(255, 255, 255, 0.018) 100%),
    linear-gradient(102deg, rgba(255, 255, 255, 0.336) 0%, rgba(255, 255, 255, 0.29) 28%, rgba(255, 255, 255, 0.17) 64%, rgba(255, 255, 255, 0.156) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    inset 0 -16px 32px rgba(2, 4, 8, 0.24),
    inset 0 0 26px rgba(255, 255, 255, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.081),
    0 18px 64px rgba(255, 255, 255, 0.08),
    0 0 48px rgba(255, 255, 255, 0.054);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  transition:
    transform 360ms ease,
    box-shadow 360ms ease,
    filter 360ms ease;
}

.docdoe-hero-cta::before {
  position: absolute;
  inset: 1px;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0 24%, rgba(255, 255, 255, 0.34) 36%, transparent 52%),
    radial-gradient(ellipse at 20% 18%, rgba(255, 255, 255, 0.36), transparent 34%),
    radial-gradient(ellipse at 72% 86%, rgba(255, 255, 255, 0.09), transparent 50%);
  opacity: 0.62;
  transform: translateX(-24%);
  transition: transform 560ms ease, opacity 360ms ease;
}

.docdoe-hero-cta:hover {
  filter: saturate(1.015) brightness(1.025);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    inset 0 -16px 32px rgba(2, 4, 8, 0.22),
    inset 0 0 30px rgba(255, 255, 255, 0.13),
    0 20px 74px rgba(255, 255, 255, 0.095),
    0 0 56px rgba(255, 255, 255, 0.072);
  transform: translateY(-2px);
}

.docdoe-hero-cta:hover::before {
  opacity: 0.76;
  transform: translateX(18%);
}

.docdoe-hero-cta > span {
  position: relative;
  z-index: 1;
}

.docdoe-hero-cta-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -10px 18px rgba(2, 4, 8, 0.08),
    0 0 24px rgba(255, 255, 255, 0.14);
}

.docdoe-hero-cta-bloom {
  position: absolute;
  inset: -16px;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.084) 0%, rgba(255, 255, 255, 0.03) 42%, transparent 72%);
  filter: blur(20px);
  opacity: 0.72;
  transform: translateZ(0);
  animation: docdoe-hero-cta-bloom-pulse 2.85s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;
}

.docdoe-hero-period-pulse {
  animation: docdoe-hero-period-pulse 2.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;
  animation-delay: var(--period-delay, 1.2s);
}

.docdoe-flow-line-progress {
  will-change: transform;
}

.docdoe-final-cta-button-bloom {
  position: absolute;
  inset: -14px;
  z-index: 0;
  border-radius: 999px;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.076) 0%, rgba(255, 255, 255, 0.025) 45%, transparent 72%);
  filter: blur(18px);
  opacity: 0.7;
  transform: translateZ(0);
  animation: docdoe-hero-cta-bloom-pulse 3s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate;
}

.docdoe-pricing-button-shimmer::after {
  position: absolute;
  inset: 0;
  left: -100%;
  width: 100%;
  border-radius: inherit;
  content: "";
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 48%,
    transparent 100%
  );
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateZ(0);
  transition: left 0.65s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.35s ease;
}

.docdoe-pricing-button-shimmer:hover::after {
  left: 100%;
  opacity: 0.55;
}

@keyframes docdoe-hero-cta-bloom-pulse {
  from {
    opacity: 0.52;
    transform: translateZ(0) scale(0.94);
  }

  to {
    opacity: 0.92;
    transform: translateZ(0) scale(1.06);
  }
}

@keyframes docdoe-hero-period-pulse {
  from {
    color: rgba(248, 250, 252, 0.95);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.07);
  }

  to {
    color: #e0e0e0;
    text-shadow:
      0 0 28px rgba(255, 255, 255, 0.17),
      0 0 52px rgba(255, 255, 255, 0.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .docdoe-hero-cta-bloom,
  .docdoe-final-cta-button-bloom,
  .docdoe-hero-period-pulse,
  .docdoe-lens-line,
  .docdoe-ai-core,
  .docdoe-feature-node,
  .docdoe-comet,
  .docdoe-planet-system {
    animation: none !important;
    opacity: 0.65;
  }

  .docdoe-pricing-button-shimmer:hover::after {
    left: -100%;
    opacity: 0;
  }

  .docdoe-flow-node,
  .docdoe-ai-core.docdoe-ai-core-soft-pulse.docdoe-motion-no-css-animation {
    animation: none !important;
  }

  .stagger-children > * {
    opacity: 1;
    animation: none !important;
  }

  .animate-fade-up,
  .animate-fade-up-d1,
  .animate-fade-up-d2,
  .animate-fade-up-d3,
  .animate-fade-up-d4,
  .animate-fade-up-d5,
  .animate-fade-in,
  .animate-slide-up,
  .animate-slide-down,
  .animate-scale-in,
  .animate-float,
  .animate-float-slow,
  .animate-float-d1,
  .animate-float-d2,
  .animate-pulse-glow,
  .animate-border-glow {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hide-motion {
    display: none;
  }
}

.docdoe-what-section {
  min-height: 96svh;
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.03), transparent 36%),
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.036), transparent 34%),
    radial-gradient(ellipse at 25% 62%, rgba(255, 255, 255, 0.021), transparent 36%),
    radial-gradient(ellipse at 74% 62%, rgba(255, 255, 255, 0.025), transparent 34%),
    linear-gradient(180deg, #020202 0%, #040404 48%, #020202 100%);
}

.docdoe-what-section::before,
.docdoe-what-section::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.docdoe-what-section::before {
  background:
    linear-gradient(180deg, #020202 0%, transparent 12%, transparent 88%, #020202 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(2, 4, 8, 0.5) 78%);
  z-index: 1;
}

.docdoe-what-section::after {
  background: radial-gradient(ellipse at 50% 52%, rgba(248, 250, 252, 0.04), transparent 44%);
  mix-blend-mode: screen;
  opacity: 0.72;
  z-index: 0;
}

.docdoe-what-depth,
.docdoe-what-grid {
  position: absolute;
  inset: 0;
}

.docdoe-what-depth {
  background:
    radial-gradient(ellipse at 50% 25%, rgba(255, 255, 255, 0.035), transparent 42%),
    radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.033), transparent 36%);
  opacity: 0.84;
}

.docdoe-what-grid {
  opacity: 0.09;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.024) 1px, transparent 1px);
  background-position: center;
  background-size: 118px 118px;
  mask-image: radial-gradient(ellipse at 50% 52%, #000 0%, transparent 72%);
}

.docdoe-what-fog {
  position: absolute;
  left: 50%;
  width: min(900px, 110vw);
  height: 430px;
  border-radius: 50%;
  filter: blur(62px);
  mix-blend-mode: screen;
  opacity: 0.3;
  transform: translateX(-50%);
  animation: docdoe-what-fog-drift 24s ease-in-out infinite;
}

.docdoe-what-fog-left {
  top: 26%;
  margin-left: -24vw;
  background: linear-gradient(110deg, transparent 5%, rgba(255, 255, 255, 0.05), transparent 92%);
}

.docdoe-what-fog-right {
  top: 36%;
  margin-left: 26vw;
  background: linear-gradient(70deg, transparent 8%, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.025), transparent 94%);
  animation-delay: -11s;
  animation-direction: reverse;
}

.docdoe-what-horizon {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: min(940px, 112vw);
  height: 210px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(248, 250, 252, 0.04), rgba(255, 255, 255, 0.032) 26%, rgba(255, 255, 255, 0.009) 48%, transparent 72%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.027), transparent);
  filter: blur(32px);
  opacity: 0.54;
  transform: translateX(-50%) rotateX(70deg);
}

.docdoe-what-particle {
  position: absolute;
  border-radius: 999px;
  background: #f8fafc;
  mix-blend-mode: screen;
  box-shadow:
    0 0 8px rgba(248, 250, 252, 0.52),
    0 0 18px rgba(255, 255, 255, 0.06);
  animation: docdoe-what-particle-drift 22s ease-in-out infinite;
}

.docdoe-what-label {
  letter-spacing: 0.28em;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.13),
    0 0 28px rgba(255, 255, 255, 0.036);
}

.docdoe-what-title-highlight {
  color: #ffffff;
  background: none;
  background-clip: unset;
  -webkit-background-clip: unset;
  text-shadow: none;
}

.docdoe-intelligence-stage {
  position: relative;
  width: min(100%, 1100px);
  height: 540px;
  margin-top: 38px;
}

.docdoe-intelligence-stage::before,
.docdoe-intelligence-stage::after {
  position: absolute;
  left: 50%;
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

.docdoe-intelligence-stage::before {
  top: 50%;
  width: min(680px, 68vw);
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(248, 250, 252, 0.04), rgba(255, 255, 255, 0.016) 38%, transparent 72%);
  filter: blur(34px);
  opacity: 0.66;
  transform: translate(-50%, -50%);
}

.docdoe-intelligence-stage::after {
  bottom: 20px;
  width: min(780px, 86vw);
  height: 132px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(248, 250, 252, 0.032), rgba(255, 255, 255, 0.027) 28%, transparent 70%);
  filter: blur(24px);
  opacity: 0.72;
  transform: translateX(-50%) rotateX(70deg);
}

.docdoe-what-core-ring-spin {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(220px, 52vw);
  height: min(220px, 52vw);
  margin-left: calc(min(220px, 52vw) / -2);
  margin-top: calc(min(220px, 52vw) / -2);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.028);
  opacity: 0.45;
  transform: translateZ(0);
  animation: docdoe-what-ring-spin 48s linear infinite;
}

@keyframes docdoe-what-ring-spin {
  to {
    transform: translateZ(0) rotate(360deg);
  }
}

.docdoe-ai-core.docdoe-ai-core-soft-pulse.docdoe-motion-no-css-animation {
  animation: docdoe-ai-core-soft-pulse 5.5s cubic-bezier(0.25, 0.1, 0.25, 1) infinite alternate !important;
}

@keyframes docdoe-ai-core-soft-pulse {
  from {
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    transform: translate(-50%, -50%) scale(1.035);
  }
}

.docdoe-what-orbit {
  --orbit-rotation: 0deg;

  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(255, 255, 255, 0.077);
  border-radius: 50%;
  box-shadow:
    inset 0 0 42px rgba(255, 255, 255, 0.009),
    0 0 34px rgba(255, 255, 255, 0.015);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  transform: translate(-50%, -50%) rotate(var(--orbit-rotation));
  animation: docdoe-what-orbit-drift 26s ease-in-out infinite;
}

.docdoe-what-orbit-one {
  --orbit-rotation: -9deg;

  width: 79%;
  height: 54%;
}

.docdoe-what-orbit-two {
  --orbit-rotation: 19deg;

  width: 68%;
  height: 68%;
  border-color: rgba(248, 250, 252, 0.105);
  animation-duration: 32s;
  animation-direction: reverse;
}

.docdoe-what-orbit-three {
  --orbit-rotation: 48deg;

  width: 48%;
  height: 78%;
  border-color: rgba(255, 255, 255, 0.036);
  opacity: 0.82;
  animation-duration: 36s;
}

.docdoe-what-axis {
  position: absolute;
  z-index: 1;
  opacity: 0.36;
  pointer-events: none;
}

.docdoe-what-axis-horizontal {
  left: 12%;
  top: 50%;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.072), transparent);
}

.docdoe-what-axis-vertical {
  left: 50%;
  top: 16%;
  width: 1px;
  height: 68%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.054), transparent);
}

.docdoe-what-axis-hidden {
  opacity: 0 !important;
}

.docdoe-ai-core {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: grid;
  width: 178px;
  height: 178px;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: docdoe-ai-core-breathe 9s ease-in-out infinite;
}

.docdoe-ai-core::before,
.docdoe-ai-core::after {
  position: absolute;
  content: "";
  border-radius: inherit;
  pointer-events: none;
}

.docdoe-ai-core::before {
  inset: -42px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.022) 32%, transparent 72%);
  filter: blur(17px);
  opacity: 0.64;
}

.docdoe-ai-core::after {
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.18), transparent 24%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.065), transparent 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.docdoe-ai-core-glass {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: inherit;
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.22), transparent 19%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.081), rgba(255, 255, 255, 0.022) 46%, rgba(6, 13, 20, 0.34) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -28px 54px rgba(2, 4, 8, 0.42),
    0 20px 72px rgba(255, 255, 255, 0.045),
    0 0 58px rgba(255, 255, 255, 0.041);
  backdrop-filter: blur(24px) saturate(135%);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
}

.docdoe-ai-core-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.065);
  border-radius: 50%;
  pointer-events: none;
}

.docdoe-ai-core-ring-one {
  inset: -14px;
  opacity: 0.6;
  animation: docdoe-ai-core-ring 14s ease-in-out infinite;
}

.docdoe-ai-core-ring-two {
  inset: -28px;
  border-color: rgba(255, 255, 255, 0.025);
  opacity: 0.4;
  animation: docdoe-ai-core-ring 18s ease-in-out infinite reverse;
}

.docdoe-ai-core-inner {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  gap: 12px;
}

.docdoe-ai-core-mark {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid rgba(248, 250, 252, 0.075);
  border-radius: 16px;
  background-image: url("/docdoe-logo-mark.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 104%;
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.065),
    0 0 34px rgba(255, 255, 255, 0.032),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.docdoe-ai-core-mark::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 44%),
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.2), transparent 28%);
  mix-blend-mode: screen;
  opacity: 0.38;
  pointer-events: none;
}

.docdoe-ai-core-text {
  color: rgba(248, 250, 252, 0.86);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.099);
}

.docdoe-feature-node {
  position: absolute;
  z-index: 5;
  display: flex;
  width: min(318px, 28vw);
  align-items: center;
  gap: 13px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, 0.018);
  border-radius: 28px 34px 30px 36px;
  padding: 12px 14px;
  color: #f8fafc;
  text-align: left;
  background:
    radial-gradient(ellipse at var(--node-light-x, 50%) -15%, rgba(248, 250, 252, 0.12), transparent 38%),
    radial-gradient(ellipse at var(--node-light-x, 50%) 72%, rgba(255, 255, 255, 0.033), transparent 66%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.024), rgba(255, 255, 255, 0.011) 45%, rgba(6, 13, 20, 0.05)),
    rgba(6, 13, 20, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -18px 42px rgba(2, 4, 8, 0.14),
    0 13px 42px rgba(0, 0, 0, 0.12),
    0 0 42px rgba(255, 255, 255, 0.018);
  backdrop-filter: blur(26px) saturate(138%);
  -webkit-backdrop-filter: blur(26px) saturate(138%);
  animation: docdoe-feature-float 12s ease-in-out infinite;
}

.docdoe-feature-node::before {
  position: absolute;
  top: 50%;
  width: 100px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.135), transparent);
  opacity: 0.56;
  pointer-events: none;
}

.docdoe-feature-node::after {
  position: absolute;
  inset: -1px;
  z-index: 0;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--node-light-x, 50%) 18%, rgba(248, 250, 252, 0.12), transparent 26%),
    linear-gradient(115deg, transparent 0 28%, rgba(255, 255, 255, 0.055) 44%, transparent 64%);
  opacity: 0.68;
  pointer-events: none;
}

.docdoe-feature-node > * {
  position: relative;
  z-index: 1;
}

.docdoe-feature-node-upper-left,
.docdoe-feature-node-lower-left {
  --node-light-x: 85%;

  flex-direction: row-reverse;
  text-align: right;
}

.docdoe-feature-node-upper-right,
.docdoe-feature-node-lower-right {
  --node-light-x: 15%;
}

.docdoe-feature-node-upper-left::before,
.docdoe-feature-node-lower-left::before {
  right: -84px;
}

.docdoe-feature-node-upper-right::before,
.docdoe-feature-node-lower-right::before {
  left: -84px;
}

.docdoe-feature-node-upper-left {
  left: 34px;
  top: 68px;
  animation-delay: -3s;
}

.docdoe-feature-node-upper-right {
  right: 34px;
  top: 68px;
  animation-delay: -8s;
}

.docdoe-feature-node-lower-left {
  left: 76px;
  bottom: 76px;
  animation-delay: -5s;
}

.docdoe-feature-node-lower-right {
  right: 76px;
  bottom: 76px;
  animation-delay: -10s;
}

.docdoe-feature-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  color: rgba(248, 250, 252, 0.9);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.18), transparent 42%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.045), transparent 68%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 24px rgba(255, 255, 255, 0.04);
}

.docdoe-feature-copy {
  display: grid;
  gap: 5px;
}

.docdoe-feature-copy h3 {
  margin: 0;
  color: rgba(248, 250, 252, 0.92);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.22;
}

.docdoe-feature-copy p {
  margin: 0;
  color: rgba(248, 250, 252, 0.56);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
}

.docdoe-story-section {
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 24% 28%, rgba(255, 255, 255, 0.025), transparent 34%),
    radial-gradient(ellipse at 76% 32%, rgba(255, 255, 255, 0.032), transparent 32%),
    radial-gradient(ellipse at 50% 88%, rgba(255, 255, 255, 0.02), transparent 38%),
    linear-gradient(180deg, #020202 0%, #030710 46%, #020202 100%);
}

.docdoe-story-section::before,
.docdoe-story-section::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.docdoe-story-section::before {
  z-index: 1;
  background:
    linear-gradient(180deg, #020202 0%, transparent 10%, transparent 90%, #020202 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(2, 4, 8, 0.48) 82%);
}

.docdoe-story-section::after {
  z-index: 0;
  background: radial-gradient(ellipse at 50% 52%, rgba(248, 250, 252, 0.026), transparent 48%);
  opacity: 0.82;
  mix-blend-mode: screen;
}

.docdoe-story-depth,
.docdoe-story-grid {
  position: absolute;
  inset: 0;
}

.docdoe-story-depth {
  background:
    radial-gradient(ellipse at 22% 42%, rgba(255, 255, 255, 0.035), transparent 42%),
    radial-gradient(ellipse at 68% 46%, rgba(255, 255, 255, 0.034), transparent 42%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.018), transparent 46%);
  opacity: 0.88;
}

.docdoe-story-grid {
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-position: center;
  background-size: 124px 124px;
  mask-image: radial-gradient(ellipse at 50% 54%, #000 0%, transparent 74%);
}

.docdoe-story-fog {
  position: absolute;
  left: 50%;
  width: min(760px, 94vw);
  height: 430px;
  border-radius: 50%;
  filter: blur(64px);
  mix-blend-mode: screen;
  opacity: 0.26;
  transform: translateX(-50%);
  animation: docdoe-story-fog-drift 26s ease-in-out infinite;
}

.docdoe-story-fog-left {
  top: 22%;
  margin-left: -30vw;
  background: linear-gradient(112deg, transparent 5%, rgba(255, 255, 255, 0.055), transparent 92%);
}

.docdoe-story-fog-right {
  top: 20%;
  margin-left: 31vw;
  background: linear-gradient(70deg, transparent 8%, rgba(255, 255, 255, 0.059), rgba(255, 255, 255, 0.02), transparent 94%);
  animation-delay: -12s;
  animation-direction: reverse;
}

.docdoe-story-orbit-field {
  position: absolute;
  left: 50%;
  top: 49%;
  width: min(760px, 82vw);
  height: min(520px, 54vw);
  border: 1px solid rgba(255, 255, 255, 0.047);
  border-radius: 50%;
  box-shadow:
    inset 0 0 44px rgba(255, 255, 255, 0.009),
    0 0 38px rgba(255, 255, 255, 0.011);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
  transform: translate(-50%, -50%) rotate(-26deg);
  animation: docdoe-story-orbit-drift 34s ease-in-out infinite;
}

.docdoe-story-orbit-field-secondary {
  top: 55%;
  width: min(620px, 70vw);
  height: min(390px, 43vw);
  border-color: rgba(255, 255, 255, 0.033);
  opacity: 0.72;
  transform: translate(-50%, -50%) rotate(20deg);
  animation-duration: 40s;
  animation-direction: reverse;
}

.docdoe-story-particle {
  position: absolute;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow:
    0 0 8px rgba(248, 250, 252, 0.54),
    0 0 18px rgba(255, 255, 255, 0.065);
  mix-blend-mode: screen;
  animation: docdoe-story-particle-drift 22s ease-in-out infinite;
}

.docdoe-story-label {
  letter-spacing: 0.26em;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.135),
    0 0 28px rgba(255, 255, 255, 0.036);
}

.docdoe-story-label::after {
  display: inline-block;
  width: clamp(40px, 7vw, 96px);
  height: 1px;
  margin-left: 14px;
  content: "";
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.207), transparent);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.075);
}

.docdoe-story-title-highlight {
  color: transparent;
  background: linear-gradient(100deg, #f8fafc 0%, #e8e0ff 18%, #bda8ff 48%, #8f79ff 72%, #d0d0d0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.03);
}

.docdoe-story-title-highlight > span {
  color: transparent;
  background-image: linear-gradient(100deg, #f8fafc 0%, #e8e0ff 18%, #bda8ff 48%, #8f79ff 72%, #d0d0d0 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

.docdoe-story-point {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #f8fafc;
}

.docdoe-story-point-icon {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  color: rgba(248, 250, 252, 0.9);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.16), transparent 40%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.045), transparent 70%),
    rgba(6, 13, 20, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 30px rgba(255, 255, 255, 0.03);
}

.docdoe-story-point-icon::after {
  position: absolute;
  inset: -10px;
  content: "";
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.033), transparent 68%);
  filter: blur(6px);
  opacity: 0.8;
  pointer-events: none;
}

.docdoe-story-point h3 {
  margin: 0;
  color: rgba(248, 250, 252, 0.93);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.docdoe-story-point p {
  margin: 7px 0 0;
  color: rgba(248, 250, 252, 0.58);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
}

.docdoe-flow-system {
  position: relative;
  display: grid;
  gap: 34px;
  min-height: 650px;
  padding: 42px 0 42px 30px;
}

.docdoe-flow-ambient {
  position: absolute;
  left: 6%;
  top: 50%;
  width: 390px;
  height: 520px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 42% 44%, rgba(255, 255, 255, 0.03), transparent 42%),
    radial-gradient(ellipse at 50% 50%, rgba(248, 250, 252, 0.04), transparent 62%);
  filter: blur(18px);
  opacity: 0.92;
  transform: translateY(-50%) rotate(-12deg);
  pointer-events: none;
}

.docdoe-flow-line {
  position: absolute;
  left: 80px;
  top: 86px;
  bottom: 86px;
  width: 1px;
  background: none;
  pointer-events: none;
}

.docdoe-flow-line-progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  border-radius: inherit;
  background:
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.153) 12%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.126) 88%, transparent),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.07),
    0 0 34px rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.docdoe-flow-line::before,
.docdoe-flow-line::after {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: #f8fafc;
  box-shadow:
    0 0 14px rgba(248, 250, 252, 0.74),
    0 0 28px rgba(255, 255, 255, 0.11);
  transform: translateX(-50%);
}

.docdoe-flow-line::before {
  top: 0;
}

.docdoe-flow-line::after {
  bottom: 0;
}

.docdoe-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 116px 42px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  min-height: 118px;
}

.docdoe-flow-step::before {
  position: absolute;
  left: 80px;
  top: 50%;
  width: 58px;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.171), transparent);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.04);
  transform: translateY(-50%);
}

.docdoe-flow-node {
  position: relative;
  z-index: 2;
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: rgba(248, 250, 252, 0.92);
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.18), transparent 40%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.05), rgba(6, 13, 20, 0.16) 68%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -18px 34px rgba(2, 4, 8, 0.2),
    0 0 40px rgba(255, 255, 255, 0.033);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  animation: docdoe-flow-node-breathe 10s ease-in-out infinite;
}

.docdoe-flow-node.docdoe-motion-no-css-animation {
  animation: none !important;
}

.docdoe-flow-node::before {
  position: absolute;
  inset: -16px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.02);
  border-radius: inherit;
  opacity: 0.84;
}

.docdoe-flow-number {
  color: #b59bff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.09);
}

.docdoe-flow-copy h3 {
  margin: 0;
  color: rgba(248, 250, 252, 0.95);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.25;
}

.docdoe-flow-copy p {
  max-width: 360px;
  margin: 10px 0 0;
  color: rgba(248, 250, 252, 0.62);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
}

.docdoe-story-cta-strip {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 48% 0%, rgba(255, 255, 255, 0.054), transparent 48%),
    radial-gradient(ellipse at 5% 50%, rgba(255, 255, 255, 0.035), transparent 34%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.032), rgba(248, 250, 252, 0.008)),
    rgba(6, 13, 20, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 70px rgba(0, 0, 0, 0.2),
    0 0 68px rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(28px) saturate(138%);
  -webkit-backdrop-filter: blur(28px) saturate(138%);
}

.docdoe-story-cta-strip::before {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.153), transparent);
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.docdoe-story-cta-orb {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(248, 250, 252, 0.08);
  border-radius: 17px;
  background-image: url("/docdoe-logo-mark.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 112%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 32px rgba(255, 255, 255, 0.055),
    0 0 44px rgba(255, 255, 255, 0.024);
}

.docdoe-story-cta-orb::after {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), transparent 44%),
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.18), transparent 28%);
  mix-blend-mode: screen;
  opacity: 0.36;
  pointer-events: none;
}

.docdoe-story-cta-strip strong,
.docdoe-story-cta-strip span span {
  display: block;
}

.docdoe-story-cta-strip strong {
  color: rgba(248, 250, 252, 0.94);
  font-size: 18px;
  line-height: 1.35;
}

.docdoe-story-cta-strip span span {
  margin-top: 5px;
  color: rgba(248, 250, 252, 0.62);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.docdoe-story-cta-button {
  display: inline-flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.117);
  border-radius: 999px;
  padding: 0 18px 0 22px;
  color: #f8fafc;
  font-size: 15px;
  font-weight: 700;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.18), transparent 46%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.075), rgba(248, 250, 252, 0.012)),
    rgba(255, 255, 255, 0.019);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 30px rgba(255, 255, 255, 0.03);
  transition:
    transform 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}

.docdoe-story-cta-button:hover {
  border-color: rgba(248, 250, 252, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 46px rgba(255, 255, 255, 0.045);
  transform: translateY(-2px);
}

.docdoe-pricing-section {
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 28% 16%, rgba(255, 255, 255, 0.03), transparent 34%),
    radial-gradient(ellipse at 64% 38%, rgba(255, 255, 255, 0.036), transparent 36%),
    radial-gradient(ellipse at 52% 92%, rgba(255, 255, 255, 0.025), transparent 44%),
    var(--dd-pricing-bg, #090909);
}

.docdoe-pricing-section::before,
.docdoe-pricing-section::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.docdoe-pricing-section::before {
  z-index: 1;
  background:
    linear-gradient(180deg, #090909 0%, transparent 10%, transparent 90%, #090909 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(10, 10, 31, 0.42) 84%);
}

.docdoe-pricing-section::after {
  z-index: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(248, 250, 252, 0.024), transparent 52%);
  opacity: 0.74;
  mix-blend-mode: screen;
}

.docdoe-pricing-depth,
.docdoe-pricing-grid-texture {
  position: absolute;
  inset: 0;
}

.docdoe-pricing-depth {
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.028), transparent 42%),
    radial-gradient(ellipse at 35% 65%, rgba(255, 255, 255, 0.023), transparent 42%),
    radial-gradient(ellipse at 72% 70%, rgba(255, 255, 255, 0.018), transparent 40%);
  opacity: 0.9;
}

.docdoe-pricing-grid-texture {
  opacity: 0.07;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-position: center;
  background-size: 132px 132px;
  mask-image: radial-gradient(ellipse at 50% 52%, #000 0%, transparent 74%);
}

.docdoe-pricing-fog {
  position: absolute;
  left: 50%;
  width: min(800px, 94vw);
  height: 440px;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: 0.22;
  transform: translateX(-50%);
  animation: docdoe-pricing-fog-drift 28s ease-in-out infinite;
}

.docdoe-pricing-fog-left {
  top: 18%;
  margin-left: -31vw;
  background: linear-gradient(116deg, transparent 8%, rgba(255, 255, 255, 0.05), transparent 92%);
}

.docdoe-pricing-fog-right {
  top: 23%;
  margin-left: 31vw;
  background: linear-gradient(70deg, transparent 8%, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018), transparent 94%);
  animation-delay: -13s;
  animation-direction: reverse;
}

.docdoe-pricing-orbit {
  position: absolute;
  left: 50%;
  --pricing-orbit-rotation: -7deg;
  border: 1px solid rgba(255, 255, 255, 0.043);
  border-radius: 50%;
  box-shadow:
    inset 0 0 44px rgba(255, 255, 255, 0.007),
    0 0 34px rgba(255, 255, 255, 0.01);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
  transform: translateX(-50%) rotate(var(--pricing-orbit-rotation));
  animation: docdoe-pricing-orbit-drift 36s ease-in-out infinite;
}

.docdoe-pricing-orbit-one {
  top: 15%;
  width: min(1060px, 86vw);
  height: min(420px, 36vw);
}

.docdoe-pricing-orbit-two {
  --pricing-orbit-rotation: 9deg;
  top: 31%;
  width: min(900px, 78vw);
  height: min(360px, 32vw);
  border-color: rgba(255, 255, 255, 0.028);
  opacity: 0.76;
  animation-duration: 42s;
  animation-direction: reverse;
}

.docdoe-pricing-particle {
  position: absolute;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow:
    0 0 8px rgba(248, 250, 252, 0.5),
    0 0 18px rgba(255, 255, 255, 0.065);
  mix-blend-mode: screen;
  animation: docdoe-pricing-particle-drift 24s ease-in-out infinite;
}

.docdoe-pricing-label {
  letter-spacing: 0.3em;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.14),
    0 0 28px rgba(255, 255, 255, 0.036);
}

.docdoe-pricing-label::after {
  display: block;
  width: 54px;
  height: 1px;
  margin: 12px auto 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.225), transparent);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
}

.docdoe-pricing-title-highlight {
  color: transparent;
  background: linear-gradient(100deg, #f8fafc 0%, #ece6ff 20%, #c2b0ff 47%, #8f74ff 74%, #a9baff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.025);
}

.docdoe-pricing-grid-wrap {
  isolation: isolate;
}

.docdoe-pricing-grid {
  position: relative;
  z-index: 2;
  align-items: stretch;
}

.docdoe-pricing-card-glow {
  position: absolute;
  top: 24px;
  width: min(330px, 28vw);
  height: 520px;
  border-radius: 50%;
  filter: blur(68px);
  opacity: 0.34;
  pointer-events: none;
  transform: translateX(-50%);
}

.docdoe-pricing-card-glow-popular {
  left: 37.5%;
  background: rgba(255, 255, 255, 0.105);
}

.docdoe-pricing-card-glow-premium {
  left: 62.5%;
  background:
    radial-gradient(circle, rgba(244, 216, 121, 0.2), transparent 58%),
    rgba(255, 255, 255, 0.05);
}

.docdoe-pricing-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: 490px;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 28px;
  padding: 26px 24px 22px;
  background:
    radial-gradient(ellipse at 24% 0%, rgba(255, 255, 255, 0.075), transparent 42%),
    radial-gradient(ellipse at 50% 118%, rgba(255, 255, 255, 0.018), transparent 48%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.038), rgba(248, 250, 252, 0.01)),
    rgba(6, 13, 20, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -30px 70px rgba(2, 4, 8, 0.16),
    0 24px 86px rgba(0, 0, 0, 0.26),
    0 0 46px rgba(255, 255, 255, 0.014);
  backdrop-filter: blur(28px) saturate(136%);
  -webkit-backdrop-filter: blur(28px) saturate(136%);
  transition:
    transform 360ms ease,
    border-color 360ms ease,
    box-shadow 360ms ease,
    background 360ms ease;
}

.docdoe-pricing-card::before,
.docdoe-pricing-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.docdoe-pricing-card::before {
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11), transparent);
  opacity: 0.9;
}

.docdoe-pricing-card::after {
  z-index: -2;
  inset: -26% -20% auto;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.025), transparent 68%);
  filter: blur(24px);
  opacity: 0.72;
}

.docdoe-pricing-card:hover {
  border-color: rgba(255, 255, 255, 0.077);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -30px 70px rgba(2, 4, 8, 0.16),
    0 28px 96px rgba(0, 0, 0, 0.32),
    0 0 68px rgba(255, 255, 255, 0.028);
  transform: translateY(-6px);
}

.docdoe-pricing-card-popular {
  border-color: rgba(255, 255, 255, 0.144);
  background:
    radial-gradient(ellipse at 42% 0%, rgba(255, 255, 255, 0.068), transparent 44%),
    radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.04), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(248, 250, 252, 0.012)),
    rgba(7, 10, 28, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.025),
    0 26px 96px rgba(0, 0, 0, 0.32),
    0 0 76px rgba(255, 255, 255, 0.045);
}

.docdoe-pricing-card-popular::after {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05), transparent 68%);
}

.docdoe-pricing-card-premium {
  border-color: rgba(244, 216, 121, 0.22);
  background:
    radial-gradient(ellipse at 42% 0%, rgba(244, 216, 121, 0.13), transparent 40%),
    radial-gradient(ellipse at 50% 114%, rgba(255, 255, 255, 0.033), transparent 48%),
    linear-gradient(180deg, rgba(244, 216, 121, 0.042), rgba(248, 250, 252, 0.012)),
    rgba(10, 11, 18, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(244, 216, 121, 0.055),
    0 26px 96px rgba(0, 0, 0, 0.32),
    0 0 70px rgba(244, 216, 121, 0.09),
    0 0 58px rgba(255, 255, 255, 0.028);
}

.docdoe-pricing-card-teacher {
  background:
    radial-gradient(ellipse at 24% 0%, rgba(255, 255, 255, 0.041), transparent 42%),
    radial-gradient(ellipse at 50% 118%, rgba(255, 255, 255, 0.013), transparent 48%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.034), rgba(248, 250, 252, 0.01)),
    rgba(6, 13, 20, 0.24);
}

.docdoe-pricing-badge {
  position: absolute;
  top: 17px;
  right: 17px;
  z-index: 3;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.docdoe-pricing-badge-popular {
  border: 1px solid rgba(248, 250, 252, 0.12);
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.22), transparent 52%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.261), rgba(255, 255, 255, 0.13));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 24px rgba(255, 255, 255, 0.055);
}

.docdoe-pricing-badge-premium {
  color: #190f02;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.36), transparent 52%),
    linear-gradient(180deg, #ffe88a, #d3a62e);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 26px rgba(244, 216, 121, 0.2);
}

.docdoe-pricing-plan-icon {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.414);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.15), transparent 40%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.045), transparent 70%),
    rgba(6, 13, 20, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 26px rgba(255, 255, 255, 0.033);
}

.docdoe-pricing-card-premium .docdoe-pricing-plan-icon {
  border-color: rgba(244, 216, 121, 0.24);
  color: rgba(244, 216, 121, 0.96);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 40%),
    radial-gradient(circle at center, rgba(244, 216, 121, 0.18), transparent 72%),
    rgba(6, 13, 20, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 28px rgba(244, 216, 121, 0.13);
}

.docdoe-pricing-card h3 {
  margin: 16px 0 0;
  color: rgba(248, 250, 252, 0.95);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
}

.docdoe-pricing-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 8px;
}

.docdoe-pricing-price span {
  color: #b59bff;
  font-size: clamp(2.62rem, 3.5vw, 3.08rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 0.98;
  text-shadow: 0 0 26px rgba(255, 255, 255, 0.045);
}

.docdoe-pricing-price small {
  color: rgba(248, 250, 252, 0.6);
  font-size: 13px;
  font-weight: 650;
}

.docdoe-pricing-card-premium .docdoe-pricing-price span {
  color: #c2a8ff;
}

.docdoe-pricing-card-teacher .docdoe-pricing-price span {
  font-size: clamp(2.34rem, 3.2vw, 2.82rem);
}

.docdoe-pricing-description {
  min-height: 42px;
  margin: 14px 0 0;
  color: rgba(248, 250, 252, 0.67);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.docdoe-pricing-divider {
  height: 1px;
  margin: 15px 0 16px;
  background: linear-gradient(90deg, transparent, rgba(248, 250, 252, 0.09), transparent);
}

.docdoe-pricing-features {
  display: grid;
  flex: 1;
  gap: 9px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.docdoe-pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(248, 250, 252, 0.7);
  font-size: 13.5px;
  font-weight: 520;
  line-height: 1.35;
}

.docdoe-pricing-check {
  display: grid;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #080711;
  background: linear-gradient(180deg, #cbbdff, #8f74ff);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.045);
}

.docdoe-pricing-card-premium .docdoe-pricing-check {
  background: linear-gradient(180deg, #ffed9a, #d1a22f);
  box-shadow: 0 0 14px rgba(244, 216, 121, 0.16);
}

.docdoe-pricing-button {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  border-radius: 999px;
  padding: 0 18px 0 22px;
  font-size: 14px;
  font-weight: 780;
  line-height: 1;
  transition:
    transform 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease,
    background 320ms ease;
}

.docdoe-pricing-button::before {
  position: absolute;
  inset: 1px 20% auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  opacity: 0.82;
}

.docdoe-pricing-button-starter,
.docdoe-pricing-button-teacher {
  border: 1px solid rgba(255, 255, 255, 0.099);
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.13), transparent 46%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.058), rgba(248, 250, 252, 0.01)),
    rgba(255, 255, 255, 0.01);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 28px rgba(255, 255, 255, 0.018);
}

.docdoe-pricing-button-popular {
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(203, 189, 255, 0.88), rgba(255, 255, 255, 0.22));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -18px 34px rgba(58, 28, 163, 0.22),
    0 18px 46px rgba(255, 255, 255, 0.055);
}

.docdoe-pricing-button-premium {
  border: 1px solid rgba(255, 232, 138, 0.4);
  color: #160e02;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.42), transparent 48%),
    linear-gradient(180deg, #ffe88a, #d3a22f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    inset 0 -18px 34px rgba(130, 81, 4, 0.16),
    0 18px 46px rgba(244, 216, 121, 0.15),
    0 0 42px rgba(255, 255, 255, 0.025);
}

.docdoe-pricing-button:hover {
  transform: translateY(-2px);
}

.docdoe-pricing-button-starter:hover,
.docdoe-pricing-button-teacher:hover {
  border-color: rgba(248, 250, 252, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 44px rgba(255, 255, 255, 0.033);
}

.docdoe-pricing-button-popular:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -18px 34px rgba(58, 28, 163, 0.22),
    0 20px 56px rgba(255, 255, 255, 0.07);
}

.docdoe-pricing-button-premium:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -18px 34px rgba(130, 81, 4, 0.16),
    0 20px 56px rgba(244, 216, 121, 0.2),
    0 0 52px rgba(255, 255, 255, 0.03);
}

.docdoe-pricing-trust {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.059);
  border-radius: 999px;
  color: rgba(248, 250, 252, 0.55);
  font-size: 13px;
  font-weight: 600;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.041), transparent 52%),
    rgba(6, 13, 20, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 0 38px rgba(255, 255, 255, 0.014);
  backdrop-filter: blur(22px) saturate(132%);
  -webkit-backdrop-filter: blur(22px) saturate(132%);
}

.docdoe-pricing-trust span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}

.docdoe-pricing-trust span + span::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 16px;
  content: "";
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.369);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.105);
}

.docdoe-pricing-trust svg {
  color: rgba(255, 255, 255, 0.351);
}

.docdoe-final-section {
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 22% 20%, rgba(255, 255, 255, 0.022), transparent 34%),
    radial-gradient(ellipse at 78% 32%, rgba(255, 255, 255, 0.032), transparent 34%),
    linear-gradient(180deg, #020202 0%, #030711 50%, #020202 100%);
}

.docdoe-final-section::before,
.docdoe-final-section::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.docdoe-final-section::before {
  z-index: 1;
  background:
    linear-gradient(180deg, #020202 0%, transparent 10%, transparent 92%, #020202 100%),
    radial-gradient(ellipse at center, transparent 0%, rgba(2, 4, 8, 0.5) 84%);
}

.docdoe-final-section::after {
  z-index: 0;
  background: radial-gradient(ellipse at 50% 48%, rgba(248, 250, 252, 0.023), transparent 52%);
  opacity: 0.72;
  mix-blend-mode: screen;
}

.docdoe-final-depth,
.docdoe-final-grid {
  position: absolute;
  inset: 0;
}

.docdoe-final-depth {
  background:
    radial-gradient(ellipse at 50% 15%, rgba(255, 255, 255, 0.03), transparent 40%),
    radial-gradient(ellipse at 36% 68%, rgba(255, 255, 255, 0.023), transparent 44%),
    radial-gradient(ellipse at 68% 80%, rgba(255, 255, 255, 0.014), transparent 42%);
  opacity: 0.92;
}

.docdoe-final-grid {
  opacity: 0.06;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-position: center;
  background-size: 132px 132px;
  mask-image: radial-gradient(ellipse at 50% 46%, #000 0%, transparent 74%);
}

.docdoe-final-fog {
  position: absolute;
  left: 50%;
  width: min(760px, 92vw);
  height: 430px;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity: 0.21;
  transform: translateX(-50%);
  animation: docdoe-final-fog-drift 30s ease-in-out infinite;
}

.docdoe-final-fog-left {
  top: 16%;
  margin-left: -32vw;
  background: linear-gradient(112deg, transparent 8%, rgba(255, 255, 255, 0.05), transparent 92%);
}

.docdoe-final-fog-right {
  top: 28%;
  margin-left: 32vw;
  background: linear-gradient(72deg, transparent 8%, rgba(255, 255, 255, 0.054), rgba(255, 255, 255, 0.018), transparent 94%);
  animation-delay: -14s;
  animation-direction: reverse;
}

.docdoe-final-orbit {
  position: absolute;
  left: 50%;
  --final-orbit-rotation: -8deg;
  border: 1px solid rgba(255, 255, 255, 0.041);
  border-radius: 50%;
  box-shadow:
    inset 0 0 42px rgba(255, 255, 255, 0.007),
    0 0 32px rgba(255, 255, 255, 0.009);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  transform: translateX(-50%) rotate(var(--final-orbit-rotation));
  animation: docdoe-final-orbit-drift 38s ease-in-out infinite;
}

.docdoe-final-orbit-one {
  top: 18%;
  width: min(900px, 82vw);
  height: min(360px, 36vw);
}

.docdoe-final-orbit-two {
  --final-orbit-rotation: 10deg;
  top: 42%;
  width: min(720px, 72vw);
  height: min(280px, 30vw);
  border-color: rgba(255, 255, 255, 0.028);
  opacity: 0.7;
  animation-duration: 44s;
  animation-direction: reverse;
}

.docdoe-final-particle {
  position: absolute;
  border-radius: 999px;
  background: #f8fafc;
  box-shadow:
    0 0 8px rgba(248, 250, 252, 0.48),
    0 0 18px rgba(255, 255, 255, 0.06);
  mix-blend-mode: screen;
  animation: docdoe-final-particle-drift 24s ease-in-out infinite;
}

.docdoe-final-label {
  letter-spacing: 0.3em;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.145),
    0 0 28px rgba(255, 255, 255, 0.036);
}

.docdoe-final-label::after {
  display: block;
  width: 50px;
  height: 1px;
  margin: 12px auto 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.234), transparent);
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
}

.docdoe-final-title-highlight {
  color: transparent;
  background: linear-gradient(100deg, #f8fafc 0%, #ece6ff 20%, #c6b4ff 48%, #9277ff 76%, #acbcff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.028);
}

.docdoe-final-title-highlight > span {
  color: rgba(242, 244, 241, 0.92);
}

.docdoe-faq-list {
  display: grid;
  gap: 13px;
}

.docdoe-faq-item:nth-child(odd),
.docdoe-faq-item:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.docdoe-faq-item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  text-align: left;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.docdoe-faq-item:hover,
.docdoe-faq-item[open],
.docdoe-faq-item.docdoe-faq-item-open {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 16px 48px rgba(0, 0, 0, 0.22);
}

.docdoe-faq-item.docdoe-faq-item-open {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
}

.docdoe-faq-item summary,
.docdoe-faq-item .docdoe-faq-trigger {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 92px;
  padding: 18px 28px 18px 24px;
  cursor: pointer;
  list-style: none;
}

.docdoe-faq-item .docdoe-faq-trigger {
  width: 100%;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.docdoe-faq-item summary::-webkit-details-marker {
  display: none;
}

.docdoe-faq-item[open] .docdoe-faq-plus,
.docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-plus {
  border-color: rgba(255, 255, 255, 0.108);
  background: rgba(255, 255, 255, 0.022);
}

.docdoe-faq-icon {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.47);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.18), transparent 40%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.07), rgba(6, 13, 20, 0.12) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 30px rgba(255, 255, 255, 0.04);
}

.docdoe-faq-question {
  color: rgba(248, 250, 252, 0.94);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.35;
}

.docdoe-faq-plus {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(248, 250, 252, 0.018);
  transition:
    border-color 280ms ease,
    background 280ms ease;
}

.docdoe-faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.docdoe-faq-answer-wrap.docdoe-faq-answer-wrap-open {
  grid-template-rows: 1fr;
}

.docdoe-faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}

.docdoe-faq-answer {
  margin: -8px 86px 26px 120px;
  color: rgba(248, 250, 252, 0.66);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.72;
}

.docdoe-faq-answer p {
  margin: 0;
}

.docdoe-final-cta-section {
  scroll-margin-top: 112px;
  padding-top: clamp(82px, 7.4vw, 112px);
  padding-bottom: clamp(86px, 7.2vw, 112px);
  color: #f8fafc;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.02), transparent 42%),
    linear-gradient(180deg, #020202 0%, #020202 100%);
}

.docdoe-final-cta-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 340px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 52px 28px 58px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    #080808;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 28px 100px rgba(0, 0, 0, 0.4);
}

.docdoe-final-cta-card::before,
.docdoe-final-cta-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.docdoe-final-cta-card::before {
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.02)),
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.03), transparent 55%);
}

.docdoe-final-cta-card::after {
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.docdoe-final-cta-orbit {
  position: absolute;
  left: 50%;
  top: 55%;
  border: 1px solid rgba(255, 255, 255, 0.054);
  border-radius: 50%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  animation: docdoe-final-cta-orbit-drift 36s ease-in-out infinite;
}

.docdoe-final-cta-orbit-one {
  width: min(820px, 84vw);
  height: min(250px, 29vw);
}

.docdoe-final-cta-orbit-two {
  width: min(620px, 68vw);
  height: min(198px, 24vw);
  border-color: rgba(255, 255, 255, 0.033);
  transform: translate(-50%, -50%) rotate(12deg);
  animation-duration: 42s;
  animation-direction: reverse;
}

.docdoe-final-cta-horizon {
  position: absolute;
  left: 50%;
  bottom: -54px;
  width: min(920px, 102vw);
  height: 166px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(248, 250, 252, 0.44), rgba(255, 255, 255, 0.099) 12%, rgba(255, 255, 255, 0.03) 28%, transparent 64%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.189), transparent);
  filter: blur(2px);
  opacity: 0.54;
  transform: translateX(-50%) rotateX(70deg);
  animation: docdoe-final-horizon-breathe 12s ease-in-out infinite;
  pointer-events: none;
}

.docdoe-final-cta-orb {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  color: rgba(248, 250, 252, 0.94);
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.22), transparent 38%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.08), rgba(6, 13, 20, 0.18) 70%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 34px rgba(255, 255, 255, 0.055);
  transform: translateX(-50%);
}

.docdoe-final-cta-button {
  position: relative;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  overflow: hidden;
  min-width: 240px;
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0 26px;
  color: #f8fafc;
  font-size: 16px;
  font-weight: 800;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.24), transparent 46%),
    linear-gradient(180deg, rgba(203, 189, 255, 0.9), rgba(255, 255, 255, 0.225));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -20px 38px rgba(58, 28, 163, 0.22),
    0 18px 54px rgba(255, 255, 255, 0.06);
  transition:
    transform 320ms ease,
    box-shadow 320ms ease,
    border-color 320ms ease;
}

.docdoe-final-cta-button::before {
  position: absolute;
  inset: 1px 22% auto;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
  opacity: 0.86;
}

.docdoe-final-cta-button:hover {
  border-color: rgba(248, 250, 252, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -20px 38px rgba(58, 28, 163, 0.22),
    0 22px 64px rgba(255, 255, 255, 0.075);
  transform: translateY(-2px);
}

.docdoe-footer {
  color: #f8fafc;
  border-top: 1px solid rgba(255, 255, 255, 0.043);
  background:
    radial-gradient(ellipse at 22% 0%, rgba(255, 255, 255, 0.02), transparent 34%),
    radial-gradient(ellipse at 84% 6%, rgba(255, 255, 255, 0.025), transparent 30%),
    linear-gradient(180deg, #020202 0%, #020202 100%);
}

.docdoe-footer::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.018), transparent 28%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.015), transparent 48%);
  pointer-events: none;
}

.docdoe-hero-cta-btn {
  position: relative;
  z-index: 20;
  display: inline-flex !important;
  min-height: 3.6rem !important;
  width: 100% !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.7rem !important;
  padding: 0 2.5rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  pointer-events: auto !important;
}

@media (min-width: 640px) {
  .docdoe-hero-cta-btn {
    width: auto !important;
  }
}

.docdoe-secondary-action-btn {
  display: inline-flex;
  min-height: 3.5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0 2.25rem;
  font-size: 0.96rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.02);
  transition: all 200ms ease;
}

@media (min-width: 640px) {
  .docdoe-secondary-action-btn {
    width: auto;
  }
}

.docdoe-secondary-action-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  transform: translateY(-1px);
}

.docdoe-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 0.6fr) 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 1024px) {
  .docdoe-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .docdoe-footer-brand {
    grid-column: span 2;
  }

  .docdoe-footer-newsletter {
    grid-column: span 2;
    max-width: 420px;
  }
}

@media (max-width: 639px) {
  .docdoe-footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .docdoe-footer-brand,
  .docdoe-footer-newsletter {
    grid-column: span 1;
  }
}

.docdoe-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.docdoe-footer-brand p {
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.92rem;
  line-height: 1.6;
}

.docdoe-footer-column h3 {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.docdoe-footer-column ul {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.docdoe-footer-column a {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.9rem;
  transition: color 200ms ease;
}

.docdoe-footer-column a:hover {
  color: #ffffff;
}

.docdoe-footer-newsletter label {
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.docdoe-footer-newsletter p {
  margin-top: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9rem;
}

.docdoe-footer-email {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin-top: 22px;
  border: 1px solid rgba(255, 255, 255, 0.063);
  border-radius: 999px;
  padding: 0 7px 0 17px;
  color: rgba(255, 255, 255, 0.351);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(248, 250, 252, 0.08), transparent 52%),
    rgba(6, 13, 20, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 34px rgba(255, 255, 255, 0.014);
  backdrop-filter: blur(20px) saturate(132%);
  -webkit-backdrop-filter: blur(20px) saturate(132%);
}

.docdoe-footer-email input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: rgba(248, 250, 252, 0.9);
  font-size: 14px;
  font-weight: 600;
  background: transparent;
}

.docdoe-footer-email input::placeholder {
  color: rgba(248, 250, 252, 0.46);
}

.docdoe-footer-email input:focus-visible {
  outline: none;
}

.docdoe-footer-email:focus-within {
  border-color: rgba(255, 255, 255, 0.126);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 44px rgba(255, 255, 255, 0.028);
}

.docdoe-footer-email button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #f8fafc;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.2), transparent 38%),
    linear-gradient(180deg, rgba(203, 189, 255, 0.92), rgba(255, 255, 255, 0.23));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 26px rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition:
    transform 240ms ease,
    box-shadow 240ms ease;
}

.docdoe-footer-email button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 34px rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.docdoe-footer-bottom {
  margin-top: 52px;
  border-top: 1px solid rgba(255, 255, 255, 0.041);
  padding-top: 24px;
  text-align: center;
}

.docdoe-footer-bottom span {
  color: rgba(248, 250, 252, 0.46);
  font-size: 13px;
  font-weight: 550;
}

@keyframes docdoe-story-fog-drift {
  0%,
  100% {
    transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1);
  }
  50% {
    transform: translateX(-50%) translate3d(0, -18px, 0) rotate(2deg) scale(1.04);
  }
}

@keyframes docdoe-story-orbit-drift {
  0%,
  100% {
    opacity: 0.62;
    transform: translate(-50%, -50%) rotate(-26deg) scale(1);
  }
  50% {
    opacity: 0.82;
    transform: translate(-50%, -50%) rotate(-22deg) scale(1.015);
  }
}

@keyframes docdoe-story-particle-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(5px, -9px, 0);
  }
}

@keyframes docdoe-pricing-fog-drift {
  0%,
  100% {
    transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1);
  }
  50% {
    transform: translateX(-50%) translate3d(0, -16px, 0) rotate(2deg) scale(1.035);
  }
}

@keyframes docdoe-pricing-orbit-drift {
  0%,
  100% {
    opacity: 0.58;
    transform: translateX(-50%) rotate(var(--pricing-orbit-rotation)) scale(1);
  }
  50% {
    opacity: 0.82;
    transform: translateX(-50%) rotate(calc(var(--pricing-orbit-rotation) + 3deg)) scale(1.012);
  }
}

@keyframes docdoe-pricing-particle-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(5px, -8px, 0);
  }
}

@keyframes docdoe-final-fog-drift {
  0%,
  100% {
    transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1);
  }
  50% {
    transform: translateX(-50%) translate3d(0, -16px, 0) rotate(2deg) scale(1.035);
  }
}

@keyframes docdoe-final-orbit-drift {
  0%,
  100% {
    opacity: 0.56;
    transform: translateX(-50%) rotate(var(--final-orbit-rotation)) scale(1);
  }
  50% {
    opacity: 0.78;
    transform: translateX(-50%) rotate(calc(var(--final-orbit-rotation) + 3deg)) scale(1.012);
  }
}

@keyframes docdoe-final-particle-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(5px, -8px, 0);
  }
}

@keyframes docdoe-faq-answer-in {
  from {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes docdoe-final-cta-orbit-drift {
  0%,
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }
  50% {
    opacity: 0.82;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.012);
  }
}

@keyframes docdoe-final-horizon-breathe {
  0%,
  100% {
    opacity: 0.54;
    transform: translateX(-50%) rotateX(70deg) scale(0.98);
  }
  50% {
    opacity: 0.72;
    transform: translateX(-50%) rotateX(70deg) scale(1.03);
  }
}

@keyframes docdoe-flow-node-breathe {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -4px, 0) scale(1.025);
  }
}

@keyframes docdoe-what-fog-drift {
  0%,
  100% {
    transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1);
  }
  50% {
    transform: translateX(-50%) translate3d(0, -18px, 0) rotate(2deg) scale(1.035);
  }
}

@keyframes docdoe-what-particle-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(5px, -8px, 0);
  }
}

@keyframes docdoe-what-orbit-drift {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(var(--orbit-rotation)) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(calc(var(--orbit-rotation) + 3deg)) scale(1.012);
  }
}

@keyframes docdoe-ai-core-breathe {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.025);
  }
}

@keyframes docdoe-ai-core-ring {
  0%,
  100% {
    transform: rotate(0deg) scale(0.985);
    opacity: 0.42;
  }
  50% {
    transform: rotate(7deg) scale(1.02);
    opacity: 0.76;
  }
}

@keyframes docdoe-feature-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes docdoe-orbit-drift {
  0%,
  100% {
    opacity: 0.84;
    transform: translateX(-50%) rotate(-7deg) scale(1);
  }
  50% {
    opacity: 0.68;
    transform: translateX(-50%) rotate(-5deg) scale(1.012);
  }
}

@keyframes docdoe-aurora-drift {
  0%,
  100% {
    transform: translateX(-50%) rotate(-9deg) scale(1);
  }
  50% {
    transform: translateX(-50%) rotate(-6deg) scale(1.06);
  }
}

@keyframes docdoe-horizon-breathe {
  0%,
  100% {
    opacity: 0.62;
    transform: translateX(-50%) rotateX(68deg) scale(0.98);
  }
  50% {
    opacity: 0.86;
    transform: translateX(-50%) rotateX(68deg) scale(1.04);
  }
}

@keyframes docdoe-lens-drift {
  0%,
  100% {
    transform: translateX(-50%) scaleX(0.94);
  }
  50% {
    transform: translateX(-50%) scaleX(1.04);
  }
}

@keyframes docdoe-particles-drift {
  0% {
    background-position: 12px 8px, 78px 44px, 38px 116px;
  }
  100% {
    background-position: 176px 172px, 309px 275px, 334px 412px;
  }
}

@keyframes docdoe-liquid-float {
  0%,
  100% {
    transform: translateX(-50%) translate3d(0, 0, 0) rotate(-2deg) scale(1);
  }
  50% {
    transform: translateX(-50%) translate3d(0, -18px, 0) rotate(2deg) scale(1.04);
  }
}

@keyframes docdoe-floor-breathe {
  0%,
  100% {
    opacity: 0.56;
    transform: translateX(-50%) rotateX(72deg) scale(0.985);
  }
  50% {
    opacity: 0.76;
    transform: translateX(-50%) rotateX(72deg) scale(1.02);
  }
}

@keyframes docdoe-floor-bloom {
  0%,
  100% {
    opacity: 0.34;
    transform: translateX(-50%) rotateX(70deg) scaleX(0.96);
  }
  50% {
    opacity: 0.5;
    transform: translateX(-50%) rotateX(70deg) scaleX(1.06);
  }
}

@keyframes docdoe-floor-ring {
  0%,
  100% {
    opacity: 0.5;
    transform: translateX(-50%) rotateX(72deg) scale(0.99);
  }
  50% {
    opacity: 0.76;
    transform: translateX(-50%) rotateX(72deg) scale(1.018);
  }
}

@keyframes docdoe-comet-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(7px, -12px, 0);
  }
}

@keyframes docdoe-planet-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-10px, 12px, 0) rotate(2deg);
  }
}

@keyframes docdoe-portal-pulse {
  0%,
  100% {
    opacity: 0.52;
    transform: translateX(-50%) rotateX(68deg) scale(1);
  }
  50% {
    opacity: 0.9;
    transform: translateX(-50%) rotateX(68deg) scale(1.035);
  }
}

@keyframes docdoe-core-pulse {
  0%,
  100% {
    opacity: 0.84;
    transform: translateX(-50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

@keyframes docdoe-star-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(6px, -9px, 0);
  }
}

@media (min-width: 640px) {
  .docdoe-hero-cta {
    width: auto;
    max-width: none;
    padding-left: 48px;
    padding-right: 12px;
  }
}

@media (max-width: 1100px) {
  .docdoe-intelligence-stage {
    height: 600px;
  }

  .docdoe-feature-node {
    width: min(286px, 31vw);
  }

  .docdoe-feature-node-upper-left {
    left: 0;
  }

  .docdoe-feature-node-upper-right {
    right: 0;
  }

  .docdoe-feature-node-lower-left {
    left: 18px;
  }

  .docdoe-feature-node-lower-right {
    right: 18px;
  }

  .docdoe-flow-system {
    min-height: 610px;
    padding-left: 10px;
  }

  .docdoe-flow-step {
    grid-template-columns: 104px 38px minmax(0, 1fr);
    gap: 18px;
  }

  .docdoe-pricing-card {
    min-height: 470px;
  }

  .docdoe-pricing-card-glow-popular {
    left: 25%;
  }

  .docdoe-pricing-card-glow-premium {
    left: 75%;
  }

  .docdoe-footer-grid {
    grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(130px, 1fr));
  }

  .docdoe-footer-newsletter {
    grid-column: 1 / -1;
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  .docdoe-landing > section {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }

  .docdoe-nav-shell {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding-left: 12px;
    padding-right: 7px;
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
  }

  .docdoe-nav-shell::before {
    opacity: 0.28;
  }

  .docdoe-landing section,
  .docdoe-landing footer {
    scroll-margin-top: 84px;
  }

  .docdoe-atmosphere-global-glow {
    width: 340px;
    height: 340px;
    filter: blur(72px);
    opacity: 0.72;
  }

  .docdoe-hero-blob-tl,
  .docdoe-hero-blob-tr {
    filter: blur(72px);
    opacity: 0.075;
  }

  .docdoe-what-core-blob,
  .docdoe-story-headline-glow,
  .docdoe-flow-timeline-glow,
  .docdoe-pricing-card-glow,
  .docdoe-final-cta-spotlight {
    filter: blur(42px);
  }

  .docdoe-what-fog,
  .docdoe-story-fog,
  .docdoe-pricing-fog,
  .docdoe-final-fog {
    filter: blur(34px);
    opacity: 0.42;
  }

  .docdoe-feature-node,
  .docdoe-flow-node,
  .docdoe-story-cta-strip,
  .docdoe-pricing-card,
  .docdoe-faq-item,
  .docdoe-final-cta-card,
  .docdoe-footer-email {
    backdrop-filter: blur(10px) saturate(118%);
    -webkit-backdrop-filter: blur(10px) saturate(118%);
  }

  .docdoe-logo-mark {
    width: 32px;
    height: 32px;
  }

  .docdoe-nav-cta {
    min-height: 40px;
    gap: 8px;
    padding: 0 13px 0 15px;
    font-size: 12px;
  }

  .docdoe-hero-trust-row {
    max-width: 330px;
    gap: 8px 10px;
  }

  .docdoe-hero-trust-separator {
    display: none;
  }

  .docdoe-hero-trust-item span {
    font-size: 10.5px;
  }

  .docdoe-eyebrow::before,
  .docdoe-eyebrow::after {
    width: 34px;
    margin: 0 10px;
  }

  .docdoe-orbit-arc {
    top: 17%;
    width: 178vw;
    height: 92vw;
  }

  .docdoe-orbit-arc-secondary {
    top: 36%;
    width: 148vw;
    height: 84vw;
  }

  .docdoe-orbit-arc-tertiary {
    top: 47%;
    width: 112vw;
    height: 48vw;
  }

  .docdoe-particle-veil {
    opacity: 0.36;
    background-size: 132px 132px, 192px 192px, 246px 246px;
  }

  .docdoe-aurora {
    width: 108vw;
    height: 330px;
    filter: blur(24px);
  }

  .docdoe-aurora-left {
    top: 19%;
    margin-left: -24vw;
  }

  .docdoe-aurora-right {
    top: 31%;
    margin-left: 26vw;
  }

  .docdoe-horizon-glow {
    bottom: 2%;
    width: 122vw;
    height: 190px;
    opacity: 0.54;
  }

  .docdoe-liquid-fog {
    width: 112vw;
    height: 420px;
    filter: blur(32px);
    opacity: 0.24;
  }

  .docdoe-liquid-fog-one {
    top: 16%;
    margin-left: -28vw;
  }

  .docdoe-liquid-fog-two {
    top: 34%;
    margin-left: 30vw;
  }

  .docdoe-floor-atmosphere {
    bottom: -4.5%;
    width: 128vw;
    height: 250px;
  }

  .docdoe-floor-haze {
    bottom: 34px;
    height: 148px;
    opacity: 0.58;
  }

  .docdoe-floor-bloom {
    bottom: 98px;
    width: 168px;
    height: 16px;
    opacity: 0.34;
  }

  .docdoe-floor-ring {
    bottom: 64px;
  }

  .docdoe-floor-reflection {
    bottom: 24px;
    width: 116vw;
    height: 112px;
    opacity: 0.46;
  }

  .docdoe-lens-line-one {
    bottom: 21%;
    width: 86vw;
  }

  .docdoe-lens-line-two {
    bottom: 18%;
    width: 68vw;
  }

  .docdoe-comet {
    top: 42%;
    left: -2%;
    width: 13px;
    height: 13px;
  }

  .docdoe-comet::before {
    width: 150px;
  }

  .docdoe-planet-system {
    top: 22%;
    right: -42px;
    width: 118px;
    opacity: 0.88;
  }

  .docdoe-planet-core {
    inset: 28px;
  }

  .docdoe-portal-system {
    bottom: -2%;
    width: 132vw;
    height: 260px;
  }

  .docdoe-portal-ring {
    bottom: 78px;
  }

  .docdoe-portal-core {
    bottom: 75px;
  }

  .docdoe-portal-beam {
    bottom: 94px;
    height: 132px;
  }

  .docdoe-hero-cta {
    min-height: 64px;
    gap: 16px;
    font-size: 18px;
  }

  .docdoe-hero-cta-icon {
    width: 46px;
    height: 46px;
  }

  .docdoe-story-section {
    padding-top: 86px;
    padding-bottom: 88px;
  }

  .docdoe-story-copy {
    text-align: center;
  }

  .docdoe-story-label {
    letter-spacing: 0.18em;
  }

  .docdoe-story-label::after {
    display: none;
  }

  .docdoe-story-points {
    max-width: 350px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }

  .docdoe-story-point {
    gap: 15px;
  }

  .docdoe-story-point-icon {
    width: 48px;
    height: 48px;
  }

  .docdoe-story-point h3 {
    font-size: 16px;
  }

  .docdoe-story-point p {
    margin-top: 5px;
    font-size: 13.5px;
  }

  .docdoe-flow-system {
    width: min(100%, 370px);
    min-height: auto;
    margin-right: auto;
    margin-left: auto;
    gap: 24px;
    padding: 18px 0 8px;
  }

  .docdoe-flow-ambient {
    left: 50%;
    width: 112vw;
    height: 520px;
    opacity: 0.68;
    transform: translate(-50%, -50%) rotate(-9deg);
  }

  .docdoe-flow-line {
    left: 31px;
    top: 56px;
    bottom: 56px;
  }

  .docdoe-flow-timeline-glow {
    left: 31px;
    width: 120px;
  }

  .docdoe-intelligence-stage > svg {
    display: none;
  }

  .docdoe-story-headline-glow {
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    opacity: 0.4;
  }

  .docdoe-flow-step {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    min-height: 108px;
  }

  .docdoe-flow-step::before {
    left: 31px;
    width: 33px;
  }

  .docdoe-flow-node {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
  }

  .docdoe-flow-node::before {
    inset: -10px;
  }

  .docdoe-flow-number {
    align-self: end;
    font-size: 15px;
  }

  .docdoe-flow-copy {
    grid-column: 2;
  }

  .docdoe-flow-copy h3 {
    font-size: 16px;
  }

  .docdoe-flow-copy p {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.62;
  }

  .docdoe-story-cta-strip {
    max-width: 370px;
    flex-direction: column;
    align-items: stretch;
    border-radius: 30px;
    padding: 22px;
    text-align: center;
  }

  .docdoe-story-cta-orb {
    margin-right: auto;
    margin-left: auto;
  }

  .docdoe-story-cta-button {
    width: 100%;
  }

  .docdoe-pricing-section {
    padding-top: 86px;
    padding-bottom: 88px;
  }

  .docdoe-pricing-label {
    letter-spacing: 0.24em;
  }

  .docdoe-pricing-orbit-one {
    top: 14%;
    width: 142vw;
    height: 290px;
    opacity: 0.66;
  }

  .docdoe-pricing-orbit-two {
    top: 27%;
    width: 118vw;
    height: 260px;
    opacity: 0.5;
  }

  .docdoe-pricing-fog {
    width: 126vw;
    height: 360px;
    filter: blur(54px);
  }

  .docdoe-pricing-fog-left {
    top: 12%;
    margin-left: -26vw;
  }

  .docdoe-pricing-fog-right {
    top: 34%;
    margin-left: 27vw;
  }

  .docdoe-pricing-grid-wrap {
    margin-top: 40px;
  }

  .docdoe-pricing-card-glow {
    top: 160px;
    width: 86vw;
    height: 430px;
    opacity: 0.18;
  }

  .docdoe-pricing-card-glow-popular,
  .docdoe-pricing-card-glow-premium {
    left: 50%;
  }

  .docdoe-pricing-card {
    min-height: auto;
    border-radius: 26px;
    padding: 26px 22px 22px;
  }

  .docdoe-pricing-badge {
    top: 15px;
    right: 15px;
    min-height: 26px;
    padding: 0 10px;
    font-size: 9px;
  }

  .docdoe-pricing-plan-icon {
    width: 46px;
    height: 46px;
  }

  .docdoe-pricing-card h3 {
    margin-top: 20px;
    font-size: 21px;
  }

  .docdoe-pricing-price span,
  .docdoe-pricing-card-teacher .docdoe-pricing-price span {
    font-size: clamp(2.6rem, 15vw, 3.12rem);
  }

  .docdoe-pricing-description {
    min-height: auto;
  }

  .docdoe-pricing-features {
    gap: 11px;
  }

  .docdoe-pricing-trust {
    width: min(100%, 370px);
    border-radius: 28px;
    padding: 15px 18px;
  }

  .docdoe-pricing-trust span + span::before {
    display: none;
  }

  .docdoe-faq-section {
    padding-top: 86px;
    padding-bottom: 86px;
  }

  .docdoe-final-label {
    letter-spacing: 0.24em;
  }

  .docdoe-final-orbit-one {
    top: 16%;
    width: 136vw;
    height: 280px;
    opacity: 0.62;
  }

  .docdoe-final-orbit-two {
    top: 39%;
    width: 110vw;
    height: 240px;
    opacity: 0.48;
  }

  .docdoe-final-fog {
    width: 126vw;
    height: 360px;
    filter: blur(54px);
  }

  .docdoe-final-fog-left {
    top: 12%;
    margin-left: -26vw;
  }

  .docdoe-final-fog-right {
    top: 38%;
    margin-left: 27vw;
  }

  .docdoe-faq-list {
    margin-top: 38px;
    gap: 12px;
  }

  .docdoe-faq-item {
    border-radius: 24px;
  }

  .docdoe-faq-item summary,
  .docdoe-faq-item .docdoe-faq-trigger {
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 13px;
    min-height: 0;
    padding: 20px;
    outline: none;
  }

  .docdoe-faq-item:focus-within {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  }

  .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-trigger {
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    min-height: 74px;
    padding: 15px 16px;
  }

  .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-question {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    line-height: 1.34;
  }

  .docdoe-faq-item.docdoe-faq-item-open .docdoe-faq-plus {
    grid-column: 3;
    grid-row: 1;
  }

  .docdoe-faq-icon {
    grid-column: 1;
    grid-row: 1;
    width: 44px;
    height: 44px;
  }

  .docdoe-faq-question {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 17px;
    line-height: 1.32;
  }

  .docdoe-faq-plus {
    grid-column: 2;
    grid-row: 1;
    width: 34px;
    height: 34px;
    justify-self: end;
  }

  .docdoe-faq-answer {
    margin: -2px 20px 22px;
    font-size: 15px;
    line-height: 1.65;
  }

  .docdoe-faq-item:not(.docdoe-faq-item-open) .docdoe-faq-trigger {
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    min-height: 74px;
    padding: 15px 16px;
  }

  .docdoe-faq-item:not(.docdoe-faq-item-open) .docdoe-faq-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .docdoe-faq-item:not(.docdoe-faq-item-open) .docdoe-faq-question {
    grid-column: 2;
    grid-row: 1;
    font-size: 15px;
    line-height: 1.34;
  }

  .docdoe-faq-item:not(.docdoe-faq-item-open) .docdoe-faq-plus {
    grid-column: 3;
    grid-row: 1;
  }

  .docdoe-final-cta-section {
    padding-top: 88px;
    padding-bottom: 94px;
  }

  .docdoe-final-cta-card {
    min-height: 326px;
    border-radius: 30px;
    padding: 70px 22px 50px;
  }

  .docdoe-final-cta-orb {
    top: 24px;
    width: 52px;
    height: 52px;
  }

  .docdoe-final-cta-orbit-one {
    width: 116vw;
    height: 218px;
  }

  .docdoe-final-cta-orbit-two {
    width: 90vw;
    height: 182px;
  }

  .docdoe-final-cta-horizon {
    bottom: -42px;
    width: 116vw;
    height: 126px;
    opacity: 0.46;
  }

  .docdoe-final-cta-button {
    width: 100%;
    min-width: 0;
    max-width: 320px;
  }

  .docdoe-footer {
    padding-top: 54px;
  }

  .docdoe-footer-brand p {
    margin-top: 14px;
  }

  .docdoe-footer-column ul {
    margin-top: 14px;
    gap: 10px;
  }

  .docdoe-footer-newsletter {
    max-width: none;
  }

  .docdoe-footer-email {
    min-height: 52px;
  }

  .docdoe-footer-bottom {
    margin-top: 40px;
  }

  .docdoe-what-section {
    min-height: auto;
    padding-top: 70px;
    padding-bottom: 64px;
  }

  .docdoe-what-label {
    letter-spacing: 0.18em;
    font-size: 11px;
  }

  .docdoe-what-section h2 {
    max-width: 350px;
    font-size: clamp(2rem, 8.4vw, 2.7rem);
    line-height: 1.06;
  }

  .docdoe-what-section p {
    max-width: 350px;
  }

  .docdoe-intelligence-stage {
    display: flex;
    height: auto;
    min-height: 0;
    width: min(100%, 358px);
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding-top: 0;
  }

  .docdoe-intelligence-stage::before {
    top: 72px;
    width: 102vw;
    height: 210px;
    opacity: 0.42;
  }

  .docdoe-intelligence-stage::after {
    bottom: 16px;
    width: 96vw;
    height: 96px;
    opacity: 0.34;
  }

  .docdoe-intelligence-stage > svg,
  .docdoe-what-orbit,
  .docdoe-what-core-ring-spin {
    display: none;
  }

  .docdoe-what-axis {
    display: none;
  }

  .docdoe-ai-core {
    position: relative;
    left: auto;
    top: auto;
    width: 126px;
    height: 126px;
    margin-bottom: 6px;
    transform: none;
    animation-name: docdoe-ai-core-breathe-mobile;
  }

  .docdoe-ai-core.docdoe-ai-core-soft-pulse.docdoe-motion-no-css-animation {
    width: 126px;
    height: 126px;
    transform: none;
    animation-name: docdoe-ai-core-breathe-mobile !important;
  }

  .docdoe-ai-core::before {
    inset: -28px;
  }

  .docdoe-ai-core-ring-one {
    inset: -10px;
  }

  .docdoe-ai-core-ring-two {
    inset: -19px;
  }

  .docdoe-ai-core-mark {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .docdoe-ai-core-text {
    font-size: 10px;
  }

  .docdoe-feature-node,
  .docdoe-feature-node-upper-left,
  .docdoe-feature-node-upper-right,
  .docdoe-feature-node-lower-left,
  .docdoe-feature-node-lower-right {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: min(100%, 340px);
    border-radius: 20px 24px 22px 26px;
    flex-direction: row;
    gap: 10px;
    padding: 11px 12px;
    text-align: left;
  }

  .docdoe-feature-node::before {
    display: none;
  }

  .docdoe-feature-icon {
    width: 38px;
    height: 38px;
  }

  .docdoe-feature-copy h3 {
    font-size: 13.5px;
  }

  .docdoe-feature-copy p {
    font-size: 12px;
    line-height: 1.45;
  }
}

@media (max-width: 430px) {
  .docdoe-beta-badge {
    display: none;
  }
}

@media (max-width: 380px) {
  .docdoe-nav-cta {
    padding-left: 12px;
    padding-right: 10px;
  }
}

@media (max-width: 350px) {
  .docdoe-brand-text {
    display: none;
  }
}

@keyframes docdoe-ai-core-breathe-mobile {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {
  .docdoe-orbit-arc,
  .docdoe-aurora,
  .docdoe-particle-veil,
  .docdoe-liquid-fog,
  .docdoe-horizon-glow,
  .docdoe-lens-line,
  .docdoe-floor-haze,
  .docdoe-floor-bloom,
  .docdoe-hero-cta-stage,
  .docdoe-floor-ring,
  .docdoe-comet,
  .docdoe-planet-system,
  .docdoe-portal-ring,
  .docdoe-portal-core,
  .docdoe-star,
  .docdoe-what-fog,
  .docdoe-what-particle,
  .docdoe-what-orbit,
  .docdoe-ai-core,
  .docdoe-ai-core-ring,
  .docdoe-feature-node,
  .docdoe-story-fog,
  .docdoe-story-orbit-field,
  .docdoe-story-particle,
  .docdoe-flow-node,
  .docdoe-pricing-fog,
  .docdoe-pricing-orbit,
  .docdoe-pricing-particle,
  .docdoe-final-fog,
  .docdoe-final-orbit,
  .docdoe-final-particle,
  .docdoe-final-cta-orbit,
  .docdoe-final-cta-horizon {
    animation: none;
  }

  .docdoe-nav-cta,
  .docdoe-hero-cta,
  .docdoe-hero-cta::before,
  .docdoe-story-cta-button,
  .docdoe-pricing-card,
  .docdoe-pricing-button,
  .docdoe-faq-item,
  .docdoe-faq-plus,
  .docdoe-final-cta-button,
  .docdoe-footer-column a,
  .docdoe-footer-email button {
    transition: none;
  }
}

/* === BETA BADGE + TRUST ADDITIONS === */

@keyframes docdoe-beta-pulse { 
  0%, 100% { opacity: 0.4; } 
  50% { opacity: 1.0; } 
} 

.docdoe-beta-dot { 
  animation: docdoe-beta-pulse 2s ease-in-out infinite; 
} 

/* ═══════════════════════════════════════════════════
   ONBOARDING — Cinematic Landing Theme Match
   ═══════════════════════════════════════════════════ */

.docdoe-onboarding {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.docdoe-onboarding * {
  letter-spacing: 0;
}

/* Reuse all landing page atmosphere classes */
.docdoe-onboarding .docdoe-hero-blob-tl,
.docdoe-onboarding .docdoe-hero-blob-tr,
.docdoe-onboarding .docdoe-hero-depth,
.docdoe-onboarding .docdoe-particle-veil,
.docdoe-onboarding .docdoe-ambient-mesh,
.docdoe-onboarding .docdoe-liquid-fog,
.docdoe-onboarding .docdoe-aurora,
.docdoe-onboarding .docdoe-orbit-arc,
.docdoe-onboarding .docdoe-horizon-glow,
.docdoe-onboarding .docdoe-lens-line,
.docdoe-onboarding .docdoe-floor-atmosphere,
.docdoe-onboarding .docdoe-star,
.docdoe-onboarding .docdoe-hero-cta-stage {
  /* All atmosphere classes inherited from landing page */
}

/* Onboarding-specific overrides for landing components */
.docdoe-onboarding .docdoe-nav-cta {
  min-height: 36px;
  padding: 0 16px;
  font-size: 12px;
}

.docdoe-onboarding .docdoe-hero-cta {
  width: 100%;
  max-width: none;
  min-height: 52px;
  padding: 0 24px;
  font-size: 16px;
}

.docdoe-onboarding .docdoe-hero-cta-icon {
  width: 40px;
  height: 40px;
}

@media (min-width: 640px) {
  .docdoe-onboarding .docdoe-hero-cta {
    padding: 0 32px;
  }
}

/* Student dashboard V2 */
.docdoe-dashboard {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  background:
    radial-gradient(80% 48% at 50% -18%, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 68%),
    linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(6, 8, 16, 0) 34%),
    linear-gradient(180deg, #080b16 0%, #060814 48%, #04050b 100%);
}

.docdoe-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.18;
}

.docdoe-dashboard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 16%),
    radial-gradient(90% 40% at 50% 100%, rgba(16, 185, 129, 0.055), transparent 70%);
}

.docdoe-dashboard * {
  letter-spacing: 0;
}

.docdoe-dashboard-nav,
.docdoe-dashboard-panel {
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: linear-gradient(180deg, rgba(16, 20, 38, 0.92), rgba(10, 12, 24, 0.86));
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.docdoe-dashboard-nav {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}

.docdoe-dashboard-panel {
  position: relative;
  overflow: hidden;
}

.docdoe-dashboard-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.38), transparent);
  opacity: 0.72;
}

@media (max-width: 767px) {
  .docdoe-dashboard-nav {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

nextjs-portal,
[data-nextjs-toast],
[data-nextjs-dialog-overlay],
[data-next-badge-root],
[data-next-badge] {
  display: none !important;
}

/* ─── KaTeX dark-mode overrides ──────────────────────────────────────────────
   KaTeX ships its own CSS that assumes a light background. Override here so
   formulas render with good contrast on DocDoe's dark purple theme.        */

.katex {
  color: rgba(255,255,255,0.88);
  display: inline-block;
  font-size: 1em;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
}
.katex-display { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.katex-display > .katex { white-space: normal; }
.katex .mord, .katex .mop, .katex .mbin, .katex .mrel,
.katex .mopen, .katex .mclose, .katex .mpunct,
.katex .minner { color: inherit; }
.katex .mfrac .frac-line { border-bottom-color: rgba(255,255,255,0.7); }
.katex .sqrt .sqrt-line { border-top-color: rgba(255,255,255,0.7); }
.katex .vlist-t { color: rgba(255,255,255,0.88); }

/* Restored LightRays hero treatment used with the monochrome landing design. */
.docdoe-navbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.docdoe-navbar-shell {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(5, 5, 5, 0.72);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  transition: border-color 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    background-color 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
    box-shadow 220ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}

.docdoe-navbar-shell-scrolled {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(3, 3, 3, 0.9);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.docdoe-navbar-logo {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #050505;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.docdoe-navbar-brand:hover .docdoe-navbar-logo,
.docdoe-navbar-brand:focus-visible .docdoe-navbar-logo {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 18px rgba(255, 255, 255, 0.06);
}

.docdoe-navbar-beta {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.03);
}

.docdoe-navbar-link {
  color: rgba(255, 255, 255, 0.62);
  transition: color 160ms ease;
}

.docdoe-navbar-link:hover,
.docdoe-navbar-link:focus-visible {
  color: #fff;
}

.docdoe-navbar-cta {
  border: 1px solid rgba(255, 255, 255, 0.92);
  color: #030303;
  background: #fff;
  transition: background-color 180ms ease, transform 180ms ease;
}

.docdoe-navbar-cta:hover {
  background: #f1f1f1;
  transform: translateY(-1px);
}

.docdoe-navbar-cta:hover .docdoe-action-arrow {
  transform: translateX(2px);
}

.docdoe-cinematic-hero {
  --bg: #030303;
  --surface: rgba(255, 255, 255, 0.045);
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.09);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  position: relative;
  background: var(--bg) !important;
}

.docdoe-cinematic-hero::before {
  position: absolute;
  top: -9rem;
  left: 50%;
  z-index: 0;
  width: min(66rem, 94vw);
  height: clamp(19rem, 35vw, 29rem);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.2), rgba(232, 236, 246, 0.095) 31%, transparent 69%);
  filter: blur(20px);
  content: "";
  opacity: 0.92;
  pointer-events: none;
}

.docdoe-hero-light-source {
  top: 0;
  left: 50%;
  z-index: 1;
  width: min(14rem, 34vw);
  height: 1px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 24px 10px rgba(255, 255, 255, 0.15), 0 0 82px 40px rgba(226, 232, 244, 0.11);
}

.docdoe-hero-light-beams {
  z-index: 0;
  background:
    conic-gradient(from 157deg at 50% -5%, transparent 0 13deg, rgba(255, 255, 255, 0.105) 20deg, transparent 30deg 46deg, rgba(255, 255, 255, 0.09) 55deg, transparent 67deg 360deg),
    linear-gradient(111deg, transparent 23%, rgba(255, 255, 255, 0.048) 42%, transparent 54%),
    linear-gradient(69deg, transparent 47%, rgba(255, 255, 255, 0.044) 60%, transparent 76%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.92) 39%, transparent 82%);
  mix-blend-mode: screen;
  opacity: 0.82;
  transform-origin: 50% 0;
  animation: docdoe-restored-beams 12s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
}

.docdoe-hero-light-field {
  z-index: 0;
  background:
    radial-gradient(ellipse 39% 62% at 50% -8%, rgba(255, 255, 255, 0.2), transparent 72%),
    conic-gradient(from 214deg at 50% -4%, transparent 0deg 45deg, rgba(255, 255, 255, 0.038) 52deg, transparent 59deg 74deg, rgba(255, 255, 255, 0.045) 80deg, transparent 88deg 360deg);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.78) 47%, transparent 90%);
  opacity: 0.94;
}

.docdoe-reactbits-lighting {
  z-index: 0;
  opacity: 0.9;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.95) 44%, transparent 86%);
  mix-blend-mode: screen;
}

.docdoe-reactbits-rays {
  position: absolute;
  inset: 0;
}

.docdoe-reactbits-lighting .custom-rays canvas {
  opacity: 1;
  filter: brightness(1.46) contrast(1.07);
}

.docdoe-hero-vignette {
  z-index: 1;
  background: linear-gradient(180deg, transparent 25%, rgba(3, 3, 3, 0.12) 61%, var(--bg) 100%);
}

.docdoe-hero-grain {
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.docdoe-hero-content {
  z-index: 2;
  animation: docdoe-restored-content 780ms cubic-bezier(0.165, 0.84, 0.44, 1) both;
}

.docdoe-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(242, 244, 241, 0.58);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

.docdoe-hero-kicker-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #f2f4f1;
  box-shadow: 0 0 0 3px rgba(242, 244, 241, 0.12);
  animation: docdoe-live-pulse 2.4s ease-out infinite;
}

.docdoe-hero-signal {
  transition: border-color 180ms ease, background-color 180ms ease, transform 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .docdoe-hero-signal:hover {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.045);
    transform: translateY(-1px);
  }
}

/* Board stage: product-as-hero chrome */
.docdoe-board-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1.25rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    #080b0a;
  box-shadow:
    0 50px 140px -40px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.docdoe-board-stage::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%);
  pointer-events: none;
}

.docdoe-board-stage-chrome {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.7rem 0.95rem;
  background: rgba(0, 0, 0, 0.28);
}

.docdoe-board-live-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #f2f4f1;
  box-shadow: 0 0 0 3px rgba(242, 244, 241, 0.1);
  animation: docdoe-live-pulse 2.4s ease-out infinite;
}

.docdoe-board-frame {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.docdoe-board-stage-caption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem 1.05rem;
}

@keyframes docdoe-live-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(242, 244, 241, 0.1);
  }
  50% {
    opacity: 0.55;
    box-shadow: 0 0 0 5px rgba(242, 244, 241, 0.04);
  }
}

/* Product workspace preview — mirrors tuition app chrome */
.docdoe-product-preview {
  position: relative;
  border-radius: 1.25rem;
  padding: 1px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 40%, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 48px 120px -40px rgba(0, 0, 0, 0.92),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.docdoe-product-preview::before {
  position: absolute;
  inset: -20% -10% auto;
  z-index: 0;
  height: 60%;
  content: "";
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.08), transparent 65%);
  pointer-events: none;
}

.docdoe-product-preview-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
  overflow: hidden;
  min-height: 420px;
  border-radius: calc(1.25rem - 1px);
  background: #050505;
}

.docdoe-product-preview-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 0.75rem 0.85rem;
  background: #050505;
}

.docdoe-product-preview-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%),
    #080808;
}

@media (max-width: 640px) {
  .docdoe-product-preview-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .docdoe-product-preview-sidebar {
    display: none;
  }
}

.docdoe-reactbits-logo.border-glow-card {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.docdoe-reactbits-logo.border-glow-card::after {
  mix-blend-mode: normal;
}

.docdoe-reactbits-logo .border-glow-inner {
  overflow: visible;
}

.docdoe-hero-mark {
  display: flex;
  width: clamp(4.25rem, 7vw, 5.75rem);
  height: clamp(4.25rem, 7vw, 5.75rem);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: clamp(1.125rem, 2vw, 1.45rem);
  background: #050505;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 42px rgba(0, 0, 0, 0.28);
}

.docdoe-hero-badge {
  margin: 1.15rem 0 0;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 0.55rem 0.95rem 0.5rem;
  color: var(--muted);
  background: var(--surface);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  line-height: 1;
  text-transform: uppercase;
}

.docdoe-hero-title {
  max-width: 870px;
  margin: clamp(1.35rem, 2vw, 1.85rem) 0 0;
  color: var(--text);
  font-size: clamp(2.75rem, 7.3vw, 6.55rem);
  font-weight: 650;
  letter-spacing: -0.065em;
  line-height: 0.94;
  text-wrap: balance;
}

.docdoe-hero-subtitle {
  max-width: 650px;
  margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
  color: var(--muted);
  font-size: clamp(0.96rem, 1.25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.75;
  text-wrap: pretty;
}

.docdoe-hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}

.docdoe-primary-action,
.docdoe-secondary-action {
  display: inline-flex;
  min-height: 3.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  border-radius: 999px;
  padding: 0 2rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.docdoe-primary-action {
  border: 1px solid rgba(255, 255, 255, 0.92);
  color: #030303;
  background: #ffffff;
  transition: background-color 180ms ease, transform 180ms ease;
}

.docdoe-primary-action:hover {
  background: #f1f1f1;
  transform: translateY(-1px);
}

.docdoe-secondary-action {
  border: 1px solid var(--border);
  color: var(--text);
  background: transparent;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.docdoe-secondary-action:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.025);
  transform: translateY(-1px);
}

.docdoe-action-arrow {
  transition: transform 180ms ease;
}

.docdoe-primary-action:hover .docdoe-action-arrow {
  transform: translateX(2px);
}

@keyframes docdoe-restored-beams {
  to {
    transform: scaleX(1.045) translateX(0.15%);
    opacity: 0.72;
  }
}

@keyframes docdoe-restored-content {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .docdoe-cinematic-hero {
    min-height: min(100svh, 740px) !important;
    padding-top: 6.8rem !important;
    padding-bottom: 2.8rem !important;
  }

  .docdoe-cinematic-hero::before {
    width: 126vw;
    height: 19rem;
    opacity: 0.86;
  }

  .docdoe-hero-light-field {
    background: radial-gradient(ellipse 78% 50% at 50% -4%, rgba(255, 255, 255, 0.17), transparent 72%);
    opacity: 0.88;
  }

  .docdoe-reactbits-lighting {
    opacity: 0.8;
  }

  .docdoe-reactbits-lighting .custom-rays canvas {
    filter: brightness(1.34) contrast(1.05);
  }

  .docdoe-reactbits-logo.border-glow-card::before,
  .docdoe-reactbits-logo.border-glow-card::after,
  .docdoe-reactbits-logo.border-glow-card > .edge-light {
    display: none;
  }

  .docdoe-hero-title {
    font-size: clamp(2.45rem, 11.5vw, 3.15rem);
    line-height: 1.01;
  }

  .docdoe-hero-subtitle {
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.54);
  }

  .docdoe-hero-actions {
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2.15rem;
  }

  .docdoe-primary-action,
  .docdoe-secondary-action {
    width: 100%;
    min-height: 3.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docdoe-hero-content,
  .docdoe-hero-light-beams,
  .docdoe-hero-kicker-dot,
  .docdoe-board-live-dot {
    animation: none;
  }

  .docdoe-primary-action,
  .docdoe-secondary-action,
  .docdoe-action-arrow,
  .docdoe-hero-signal,
  .docdoe-hero-secondary-cta {
    transition: none;
  }
}

/* Restored screenshot-era sections use a restrained monochrome finish. */
.docdoe-landing {
  --dd-bg: #030303;
  background: #030303 !important;
  font-family: var(--font-docdoe-sans), ui-sans-serif, system-ui, sans-serif;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.docdoe-hero-title,
.docdoe-signal-title,
.docdoe-focus-title,
.docdoe-pricing-heading h2,
.docdoe-final-cta-card h2,
#faq h2 {
  font-family: var(--font-docdoe-display), var(--font-docdoe-sans), ui-sans-serif, system-ui, sans-serif;
}

.docdoe-setup {
  font-family: var(--font-docdoe-setup), ui-sans-serif, system-ui, sans-serif;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

@keyframes docdoe-setup-signal {
  0%,
  100% {
    opacity: 0.64;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.docdoe-setup-signal-dot {
  animation: docdoe-setup-signal 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .docdoe-setup-signal-dot {
    animation: none;
  }
}

.docdoe-landing-atmosphere,
.docdoe-what-section,
.docdoe-story-section,
.docdoe-pricing-section,
.docdoe-final-cta-section,
.docdoe-footer {
  background-color: #030303 !important;
  color: #f8fafc;
}

.docdoe-what-section,
.docdoe-story-section,
.docdoe-pricing-section {
  background-image:
    radial-gradient(ellipse at 50% 36%, rgba(255, 255, 255, 0.035), transparent 43%),
    linear-gradient(180deg, #030303, #030303) !important;
}

.docdoe-what-section::before,
.docdoe-story-section::before,
.docdoe-pricing-section::before,
.docdoe-what-section::after,
.docdoe-story-section::after,
.docdoe-pricing-section::after {
  background: none !important;
}

.docdoe-what-depth,
.docdoe-what-grid,
.docdoe-what-fog,
.docdoe-what-horizon,
.docdoe-story-depth,
.docdoe-story-grid,
.docdoe-story-fog,
.docdoe-story-orbit-field,
.docdoe-pricing-depth,
.docdoe-pricing-grid-texture,
.docdoe-pricing-fog,
.docdoe-pricing-orbit,
.docdoe-pricing-particle,
.docdoe-pricing-card-glow,
.docdoe-pricing-popular-underglow {
  opacity: 0 !important;
  animation: none !important;
}

.docdoe-what-label,
.docdoe-story-label,
.docdoe-pricing-label,
.docdoe-final-label {
  color: rgba(255, 255, 255, 0.58) !important;
  text-shadow: none !important;
}

.docdoe-story-label::after,
.docdoe-pricing-label::after,
.docdoe-final-label::after {
  background: rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.docdoe-what-title-highlight,
.docdoe-story-title-highlight,
.docdoe-story-title-highlight > span,
.docdoe-pricing-title-highlight,
.docdoe-final-title-highlight,
.docdoe-final-title-highlight > span {
  color: #f8fafc !important;
  background: none !important;
  -webkit-text-fill-color: #f8fafc !important;
  text-shadow: none !important;
}

.docdoe-intelligence-stage::before {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.085), transparent 68%) !important;
  filter: blur(34px);
  opacity: 0.55;
}

.docdoe-intelligence-stage::after {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.048), transparent 68%) !important;
  opacity: 0.44;
}

.docdoe-what-core-blob {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035) 42%, transparent 72%) !important;
  opacity: 0.52;
  filter: blur(72px);
}

.docdoe-what-ring-field span,
.docdoe-what-orbit,
.docdoe-what-core-ring-spin,
.docdoe-ai-core-ring {
  border-color: rgba(255, 255, 255, 0.085) !important;
  box-shadow: none !important;
}

.docdoe-what-axis-horizontal,
.docdoe-what-axis-vertical {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent) !important;
}

.docdoe-intelligence-stage path {
  stroke: rgba(255, 255, 255, 0.2) !important;
}

.docdoe-ai-core::before {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 34%, transparent 72%) !important;
}

.docdoe-ai-core-glass {
  background:
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.18), transparent 20%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 48%, rgba(3, 3, 3, 0.48) 72%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -28px 54px rgba(0, 0, 0, 0.42),
    0 18px 56px rgba(0, 0, 0, 0.4) !important;
}

.docdoe-ai-core-mark {
  filter: grayscale(1) brightness(2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 24px rgba(255, 255, 255, 0.09) !important;
}

.docdoe-ai-core-text {
  text-shadow: none !important;
}

.docdoe-feature-node {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background:
    radial-gradient(ellipse at var(--node-light-x, 50%) -10%, rgba(255, 255, 255, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
    #080808 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.3) !important;
}

.docdoe-feature-node::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent) !important;
}

.docdoe-feature-icon,
.docdoe-story-point-icon,
.docdoe-flow-node {
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 255, 255, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.docdoe-story-headline-glow,
.docdoe-flow-timeline-glow,
.docdoe-flow-ambient {
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.045), transparent 70%) !important;
  opacity: 0.45;
}

.docdoe-flow-line-progress {
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent) !important;
  box-shadow: none !important;
}

.docdoe-flow-step {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 255, 255, 0.05), transparent 44%),
    rgba(255, 255, 255, 0.026);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.docdoe-flow-step::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.17), transparent) !important;
  box-shadow: none !important;
}

.docdoe-flow-number {
  color: rgba(255, 255, 255, 0.52) !important;
  text-shadow: none !important;
}

.docdoe-story-cta-strip {
  border-color: rgba(255, 255, 255, 0.09) !important;
  background: rgba(255, 255, 255, 0.026) !important;
  box-shadow: none !important;
}

.docdoe-story-cta-strip::before {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

.docdoe-story-cta-orb {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}

.docdoe-story-cta-button {
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #111 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.docdoe-pricing-card {
  height: 100%;
  min-height: 502px;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    radial-gradient(ellipse at 24% 0%, rgba(255, 255, 255, 0.065), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.012)),
    #070707 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 58px rgba(0, 0, 0, 0.28) !important;
}

.docdoe-pricing-card::before,
.docdoe-pricing-card::after {
  background: none !important;
}

.docdoe-pricing-card-popular,
.docdoe-pricing-card-premium {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.docdoe-pricing-card:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.34) !important;
}

.docdoe-pricing-badge-popular,
.docdoe-pricing-badge-premium {
  border-color: transparent !important;
  color: #101010 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.docdoe-pricing-plan-icon,
.docdoe-pricing-card-premium .docdoe-pricing-plan-icon {
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: rgba(255, 255, 255, 0.82) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

.docdoe-pricing-price span,
.docdoe-pricing-card-premium .docdoe-pricing-price span {
  color: #f8fafc !important;
  text-shadow: none !important;
}

.docdoe-pricing-check,
.docdoe-pricing-card-premium .docdoe-pricing-check {
  color: #080808 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.docdoe-pricing-button-starter,
.docdoe-pricing-button-teacher {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

.docdoe-pricing-button-popular,
.docdoe-pricing-button-premium {
  border-color: transparent !important;
  color: #101010 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.docdoe-pricing-trust {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background: rgba(255, 255, 255, 0.024) !important;
  box-shadow: none !important;
}

.docdoe-pricing-trust span + span::before,
.docdoe-pricing-trust svg {
  color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.4) !important;
  box-shadow: none !important;
}

.docdoe-faq-item {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)),
    #070707 !important;
  box-shadow: none !important;
}

.docdoe-faq-item:hover,
.docdoe-faq-item[open],
.docdoe-faq-item.docdoe-faq-item-open {
  border-color: rgba(255, 255, 255, 0.17) !important;
  box-shadow: none !important;
}

.docdoe-faq-item.docdoe-faq-item-open {
  border-left-color: rgba(59, 130, 246, 0.42) !important;
}

.docdoe-final-cta-section {
  background-image: linear-gradient(180deg, #030303, #030303) !important;
}

.docdoe-final-cta-card {
  border-color: rgba(255, 255, 255, 0.11) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.07), transparent 43%),
    radial-gradient(ellipse at 50% 104%, rgba(59, 130, 246, 0.045), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #070707 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 74px rgba(0, 0, 0, 0.28) !important;
}

.docdoe-final-cta-card::before,
.docdoe-final-cta-card::after,
.docdoe-final-cta-orbit,
.docdoe-final-cta-horizon {
  border-color: rgba(255, 255, 255, 0.07) !important;
  background: none !important;
  box-shadow: none !important;
}

.docdoe-final-cta-spotlight {
  background: radial-gradient(ellipse, rgba(59, 130, 246, 0.1), transparent 70%) !important;
  opacity: 0.42;
}

.docdoe-final-cta-orb {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  box-shadow: none !important;
}

.docdoe-final-cta-button {
  border-color: transparent !important;
  color: #101010 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

.docdoe-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #030303;
  padding-bottom: 4rem !important;
}

.docdoe-footer::before {
  display: none;
}

.docdoe-footer .docdoe-logo-mark {
  filter: brightness(1.2);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
}

.docdoe-footer-email {
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}

.docdoe-footer-email:focus-within {
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2) !important;
}

.docdoe-footer-email button {
  border-color: transparent !important;
  color: #101010 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

@media (max-width: 767px) {
  .docdoe-pricing-card {
    height: auto;
    min-height: 522px;
  }

  .docdoe-flow-step {
    border-radius: 20px;
  }
}

/* Guidance section: a single focused instrument, not an onboarding card stack. */
.docdoe-focus-section {
  min-height: auto;
  padding-top: clamp(5.75rem, 9vw, 7.75rem) !important;
  padding-bottom: clamp(5.75rem, 9vw, 7.75rem) !important;
}

.docdoe-focus-ambient {
  position: absolute;
  inset: 12% 0 auto 50%;
  width: min(55rem, 86vw);
  height: 33rem;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 72% 42%, rgba(255, 255, 255, 0.045), transparent 46%),
    radial-gradient(ellipse at 74% 45%, rgba(59, 130, 246, 0.038), transparent 58%);
  filter: blur(30px);
  transform: translateX(-50%);
}

.docdoe-focus-layout {
  display: grid;
  grid-template-columns: minmax(19rem, 0.92fr) minmax(23rem, 1fr);
  align-items: center;
  gap: clamp(3.5rem, 7.5vw, 6.5rem);
}

.docdoe-focus-copy {
  min-width: 0;
}

.docdoe-focus-kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.docdoe-focus-kicker::after {
  width: 3.25rem;
  height: 1px;
  content: "";
  background: rgba(255, 255, 255, 0.16);
}

.docdoe-focus-title {
  max-width: 11.5ch;
  margin: clamp(1.4rem, 2.2vw, 1.8rem) 0 0;
  color: #f8fafc;
  font-size: clamp(2.8rem, 5vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.058em;
  line-height: 0.99;
  text-wrap: balance;
}

.docdoe-focus-title-line {
  display: block !important;
}

.docdoe-focus-title-line-muted {
  margin-top: 0.32em;
  color: rgba(248, 250, 252, 0.82);
}

.docdoe-focus-body {
  max-width: 30rem;
  margin: clamp(1.6rem, 3vw, 2.1rem) 0 0;
  color: rgba(248, 250, 252, 0.62);
  font-size: clamp(1rem, 1.25vw, 1.08rem);
  font-weight: 420;
  letter-spacing: -0.014em;
  line-height: 1.82;
}

.docdoe-focus-proof {
  max-width: 31.5rem;
  margin: clamp(2.25rem, 4vw, 3.1rem) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.docdoe-focus-proof-row {
  display: grid;
  grid-template-columns: 8.35rem minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.docdoe-focus-proof-row dt {
  color: rgba(248, 250, 252, 0.82);
  font-size: 0.77rem;
  font-weight: 650;
  letter-spacing: 0.025em;
}

.docdoe-focus-proof-row dd {
  margin: 0;
  color: rgba(248, 250, 252, 0.49);
  font-size: 0.87rem;
  font-weight: 430;
  line-height: 1.55;
}

.docdoe-focus-console {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.65rem;
  padding: clamp(1.2rem, 2.8vw, 1.7rem);
  background:
    radial-gradient(ellipse at 86% 0%, rgba(255, 255, 255, 0.045), transparent 36%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.014)),
    #070707;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 2.4rem 5.6rem rgba(0, 0, 0, 0.36);
}

.docdoe-focus-console::before {
  position: absolute;
  top: 0;
  left: 2.2rem;
  right: 2.2rem;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.34), rgba(255, 255, 255, 0.18), transparent);
}

.docdoe-focus-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0 1.25rem;
}

.docdoe-focus-console-header p {
  margin: 0 0 0.45rem;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.docdoe-focus-console-header h3 {
  margin: 0;
  color: rgba(248, 250, 252, 0.94);
  font-size: clamp(1.15rem, 2vw, 1.32rem);
  font-weight: 620;
  letter-spacing: -0.035em;
}

.docdoe-focus-status {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 0 0.7rem;
  color: rgba(248, 250, 252, 0.6);
  font-size: 0.72rem;
  font-weight: 550;
}

.docdoe-focus-status span,
.docdoe-focus-active-dot,
.docdoe-focus-footer-dot {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0.65rem rgba(59, 130, 246, 0.45);
}

.docdoe-focus-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.docdoe-focus-sources > span {
  margin-right: auto;
  color: rgba(255, 255, 255, 0.37);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.docdoe-focus-sources p {
  margin: 0;
  padding: 0 0.68rem;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(248, 250, 252, 0.55);
  font-size: 0.76rem;
  line-height: 1;
}

.docdoe-focus-sources p:last-child {
  padding-right: 0;
  border-right: 0;
}

.docdoe-focus-path {
  position: relative;
  padding: 0.95rem 0 0;
}

.docdoe-focus-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.docdoe-focus-rail {
  position: absolute;
  left: 3.68rem;
  top: 2.45rem;
  bottom: 2.4rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(59, 130, 246, 0.38) 58%, rgba(255, 255, 255, 0.08));
  transform-origin: top;
}

.docdoe-focus-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.3rem 2.8rem minmax(0, 1fr) 0.65rem;
  align-items: center;
  gap: 0.75rem;
  min-height: 5.75rem;
  padding: 0.72rem 0.75rem 0.72rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.docdoe-focus-row-active {
  border-radius: 1.1rem;
  background: radial-gradient(ellipse at 82% 50%, rgba(59, 130, 246, 0.06), transparent 58%);
}

.docdoe-focus-number {
  align-self: start;
  padding-top: 0.95rem;
  color: rgba(248, 250, 252, 0.38);
  font-size: 0.73rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
}

.docdoe-focus-row-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: rgba(248, 250, 252, 0.75);
  background: #0b0b0b;
}

.docdoe-focus-row-active .docdoe-focus-row-icon {
  border-color: rgba(59, 130, 246, 0.26);
}

.docdoe-focus-row-copy {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.docdoe-focus-row-label {
  color: rgba(248, 250, 252, 0.37);
  font-size: 0.62rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.docdoe-focus-row-copy strong {
  color: rgba(248, 250, 252, 0.9);
  font-size: clamp(0.98rem, 1.35vw, 1.06rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.docdoe-focus-row-copy > span:last-child {
  max-width: 29ch;
  color: rgba(248, 250, 252, 0.5);
  font-size: 0.78rem;
  font-weight: 420;
  line-height: 1.52;
}

.docdoe-focus-console-footer {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.15rem;
  padding: 1.05rem 0.1rem 0.1rem;
  color: rgba(255, 255, 255, 0.39);
  font-size: 0.72rem;
}

.docdoe-focus-console-footer strong {
  margin-left: auto;
  color: rgba(248, 250, 252, 0.78);
  font-size: 0.78rem;
  font-weight: 560;
}

.docdoe-focus-footer-dot {
  width: 0.35rem;
  height: 0.35rem;
}

@media (max-width: 1023px) {
  .docdoe-focus-layout {
    grid-template-columns: 1fr;
    gap: clamp(2.9rem, 8vw, 4.25rem);
  }

  .docdoe-focus-title {
    max-width: 13.2ch;
  }

  .docdoe-focus-body,
  .docdoe-focus-proof {
    max-width: 37rem;
  }

  .docdoe-focus-console {
    max-width: 42rem;
  }
}

@media (max-width: 639px) {
  .docdoe-focus-section {
    padding-top: 4.6rem !important;
    padding-bottom: 4.75rem !important;
  }

  .docdoe-focus-title {
    max-width: 100%;
    font-size: clamp(2.35rem, 11.6vw, 2.8rem);
    line-height: 1.02;
  }

  .docdoe-focus-body {
    line-height: 1.7;
  }

  .docdoe-focus-proof-row {
    grid-template-columns: 1fr;
    gap: 0.42rem;
    padding: 0.9rem 0;
  }

  .docdoe-focus-console {
    border-radius: 1.3rem;
    padding: 1.05rem 0.95rem 0.95rem;
  }

  .docdoe-focus-console-header {
    align-items: flex-start;
  }

  .docdoe-focus-status {
    min-height: 1.8rem;
    padding: 0 0.58rem;
    font-size: 0.67rem;
  }

  .docdoe-focus-sources > span {
    width: 100%;
    margin-bottom: 0.35rem;
  }

  .docdoe-focus-sources p:first-of-type {
    padding-left: 0;
  }

  .docdoe-focus-rail {
    left: 2.63rem;
  }

  .docdoe-focus-row {
    grid-template-columns: 1.55rem 2.35rem minmax(0, 1fr) 0.5rem;
    gap: 0.48rem;
    min-height: 5.85rem;
    padding-right: 0.25rem;
  }

  .docdoe-focus-number {
    font-size: 0.64rem;
  }

  .docdoe-focus-row-icon {
    width: 2.35rem;
    height: 2.35rem;
  }
}

/* Landing lock pass: DocDoe-specific proof language and student-only pricing. */
@keyframes docdoe-study-signal {
  0%,
  14% {
    opacity: 0.36;
    transform: scale(0.86);
  }
  22%,
  40% {
    opacity: 1;
    transform: scale(1);
  }
  54%,
  100% {
    opacity: 0.36;
    transform: scale(0.86);
  }
}

.docdoe-hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.95rem, 2.8vw, 1.45rem);
  margin: clamp(2.15rem, 4vh, 2.7rem) 0 0;
  padding: 0;
  color: rgba(248, 250, 252, 0.43);
  font-size: 0.7rem;
  font-weight: 570;
  letter-spacing: 0.09em;
  list-style: none;
  text-transform: uppercase;
}

.docdoe-hero-proof li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.docdoe-hero-proof li:not(:last-child)::after {
  width: clamp(1.05rem, 3.2vw, 2rem);
  height: 1px;
  margin-left: clamp(0.4rem, 1.5vw, 0.75rem);
  content: "";
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.045));
}

.docdoe-hero-proof-dot {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: #3b82f6;
  animation: docdoe-study-signal 3.15s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.docdoe-signal-section {
  scroll-margin-top: 5.75rem;
  padding-top: clamp(5.8rem, 9vw, 7.4rem);
  padding-bottom: clamp(5.8rem, 9vw, 7.2rem);
}

.docdoe-signal-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(23rem, 1fr);
  align-items: center;
  gap: clamp(3.75rem, 8vw, 7.25rem);
}

.docdoe-signal-copy {
  min-width: 0;
}

.docdoe-signal-kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  color: rgba(248, 250, 252, 0.48);
  font-size: 0.67rem;
  font-weight: 650;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.docdoe-signal-kicker::after {
  display: inline-block;
  width: 3.15rem;
  height: 1px;
  content: "";
  background: rgba(248, 250, 252, 0.16);
}

.docdoe-signal-title {
  max-width: 10.5ch;
  margin: clamp(1.4rem, 2vw, 1.7rem) 0 0;
  color: #f8fafc;
  font-size: clamp(2.7rem, 5.25vw, 4.35rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.98;
  text-wrap: balance;
}

.docdoe-signal-body {
  max-width: 29rem;
  margin: clamp(1.55rem, 3vw, 2rem) 0 0;
  color: rgba(248, 250, 252, 0.62);
  font-size: clamp(0.98rem, 1.25vw, 1.06rem);
  font-weight: 420;
  letter-spacing: -0.015em;
  line-height: 1.8;
}

.docdoe-signal-terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.72rem 1.3rem;
  margin-top: clamp(2rem, 3.8vw, 2.65rem);
  color: rgba(248, 250, 252, 0.47);
  font-size: 0.72rem;
  font-weight: 570;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.docdoe-signal-terms span + span::before {
  display: inline-block;
  width: 0.23rem;
  height: 0.23rem;
  margin-right: 1.3rem;
  vertical-align: middle;
  content: "";
  border-radius: 50%;
  background: rgba(248, 250, 252, 0.32);
}

.docdoe-signal-board {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 1.15rem 0 0;
  border-top: 1px solid rgba(248, 250, 252, 0.13);
}

.docdoe-signal-board::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: min(8.4rem, 30%);
  height: 1px;
  content: "";
  background: rgba(59, 130, 246, 0.42);
}

.docdoe-signal-board-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.4rem;
}

.docdoe-signal-board-header p {
  margin: 0 0 0.45rem;
  color: rgba(248, 250, 252, 0.41);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.docdoe-signal-board-header h3 {
  margin: 0;
  color: rgba(248, 250, 252, 0.92);
  font-size: clamp(1.18rem, 2vw, 1.38rem);
  font-weight: 620;
  letter-spacing: -0.035em;
}

.docdoe-signal-status {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  border: 1px solid rgba(248, 250, 252, 0.09);
  border-radius: 999px;
  padding: 0.52rem 0.7rem;
  color: rgba(248, 250, 252, 0.58);
  font-size: 0.7rem;
  font-weight: 560;
  white-space: nowrap;
}

.docdoe-signal-status i {
  width: 0.37rem;
  height: 0.37rem;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 0.55rem rgba(59, 130, 246, 0.38);
}

.docdoe-signal-inputs {
  display: flex;
  gap: clamp(1.05rem, 3vw, 1.7rem);
  padding: 0.82rem 0 0.88rem;
  border-block: 1px solid rgba(248, 250, 252, 0.065);
  color: rgba(248, 250, 252, 0.43);
  font-size: 0.74rem;
}

.docdoe-signal-inputs span {
  position: relative;
}

.docdoe-signal-inputs span + span::before {
  position: absolute;
  top: 50%;
  left: calc(clamp(1.05rem, 3vw, 1.7rem) / -2);
  width: 1px;
  height: 0.7rem;
  content: "";
  background: rgba(248, 250, 252, 0.1);
  transform: translateY(-50%);
}

.docdoe-signal-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.docdoe-signal-row {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.15rem);
  min-height: 5.7rem;
  border-bottom: 1px solid rgba(248, 250, 252, 0.065);
}

.docdoe-signal-rank {
  color: rgba(248, 250, 252, 0.37);
  font-size: 0.67rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

.docdoe-signal-detail {
  display: grid;
  min-width: 0;
  gap: 0.28rem;
}

.docdoe-signal-detail > span {
  color: rgba(248, 250, 252, 0.41);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.docdoe-signal-detail strong {
  color: rgba(248, 250, 252, 0.87);
  font-size: clamp(0.93rem, 1.35vw, 1.02rem);
  font-weight: 590;
  letter-spacing: -0.02em;
}

.docdoe-signal-meter {
  width: min(13rem, 100%);
  height: 1px;
  margin-top: 0.36rem;
  background: rgba(248, 250, 252, 0.1);
}

.docdoe-signal-meter i {
  display: block;
  height: 1px;
  background: rgba(248, 250, 252, 0.42);
  will-change: transform, opacity;
}

.docdoe-signal-row-featured .docdoe-signal-meter i {
  background: rgba(59, 130, 246, 0.7);
}

.docdoe-signal-result {
  display: grid;
  justify-items: end;
  gap: 0.28rem;
  color: rgba(248, 250, 252, 0.47);
  font-size: 0.68rem;
}

.docdoe-signal-result strong {
  color: rgba(248, 250, 252, 0.72);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.docdoe-signal-row-featured .docdoe-signal-result span {
  color: rgba(59, 130, 246, 0.88);
}

.docdoe-signal-board figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  color: rgba(248, 250, 252, 0.38);
  font-size: 0.68rem;
}

.docdoe-signal-board figcaption strong {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(248, 250, 252, 0.68);
  font-weight: 570;
}

.docdoe-signal-board figcaption strong::before {
  width: 0.36rem;
  height: 0.36rem;
  content: "";
  border-radius: 50%;
  background: #3b82f6;
}

.docdoe-locked-pricing {
  scroll-margin-top: 5.75rem;
  padding-top: clamp(4.75rem, 6.6vw, 5.8rem);
  padding-bottom: clamp(5.1rem, 7vw, 6.4rem);
}

.docdoe-locked-pricing,
.docdoe-locked-pricing * {
  overflow-anchor: none;
}

.docdoe-pricing-heading {
  display: grid;
  grid-template-columns: minmax(21rem, 1fr) auto;
  grid-template-areas:
    "label controls"
    "title controls"
    "copy controls";
  align-items: end;
  column-gap: clamp(3rem, 8vw, 7rem);
  row-gap: 0;
  text-align: left;
}

.docdoe-pricing-heading .docdoe-pricing-label {
  grid-area: label;
  margin: 0 0 1rem;
  color: rgba(248, 250, 252, 0.48) !important;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.23em;
  text-transform: uppercase;
}

.docdoe-pricing-heading .docdoe-pricing-label::after {
  display: none;
}

.docdoe-pricing-heading h2 {
  grid-area: title;
  margin: 0;
  color: #f8fafc;
  font-size: clamp(2.7rem, 5.25vw, 4.25rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.docdoe-pricing-heading > p:not(.docdoe-pricing-label) {
  grid-area: copy;
  max-width: 32rem;
  margin: 1.45rem 0 0;
  color: rgba(248, 250, 252, 0.58);
  font-size: clamp(0.98rem, 1.25vw, 1.06rem);
  line-height: 1.72;
}

.docdoe-billing-controls {
  grid-area: controls;
  display: grid;
  gap: 0.8rem;
  justify-items: end;
  padding-bottom: 0.25rem;
}

.docdoe-billing-toggle {
  position: relative;
  display: inline-flex;
  gap: 0.3rem;
  border: 1px solid rgba(248, 250, 252, 0.1);
  border-radius: 999px;
  padding: 0.3rem;
  background: #080808;
}

.docdoe-billing-toggle button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  min-height: 2.8rem;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  border-radius: 999px;
  padding: 0 1rem;
  color: rgba(248, 250, 252, 0.53);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 580;
  background: transparent;
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.docdoe-billing-toggle button[data-selected="true"] {
  color: #080808;
}

.docdoe-billing-toggle button:not([data-selected="true"]):hover {
  color: rgba(248, 250, 252, 0.75);
}

.docdoe-billing-toggle button:focus-visible {
  outline: 2px solid rgba(59, 130, 246, 0.62);
  outline-offset: 2px;
}

.docdoe-billing-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  padding: 0;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 rgba(7, 7, 7, 0.1);
  pointer-events: none;
}

.docdoe-billing-label,
.docdoe-billing-offer {
  position: relative;
  z-index: 1;
}

.docdoe-billing-offer {
  display: inline-flex;
  min-height: 1.35rem;
  align-items: center;
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 999px;
  padding: 0 0.46rem;
  color: rgba(59, 130, 246, 0.9);
  font-size: 0.64rem;
  font-weight: 670;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.docdoe-billing-toggle button[data-selected="true"] .docdoe-billing-offer {
  border-color: rgba(59, 130, 246, 0.18);
  background: rgba(59, 130, 246, 0.08);
}

.docdoe-billing-support {
  margin: 0;
  color: rgba(248, 250, 252, 0.44);
  font-size: 0.74rem;
  font-weight: 520;
}

.docdoe-locked-pricing .docdoe-pricing-grid-wrap {
  margin-top: clamp(2.45rem, 4vw, 3.15rem);
}

.docdoe-locked-pricing .docdoe-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.1vw, 1.35rem);
}

.docdoe-locked-pricing .docdoe-pricing-card {
  min-height: 37rem;
  border-radius: 1.45rem;
  padding: 1.25rem 1.3rem 1.25rem;
  border-color: rgba(248, 250, 252, 0.095) !important;
  background:
    radial-gradient(ellipse at 24% 0%, rgba(248, 250, 252, 0.045), transparent 42%),
    #070707 !important;
  box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.048) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.docdoe-locked-pricing .docdoe-pricing-card::before {
  background: none !important;
}

.docdoe-locked-pricing .docdoe-pricing-card-popular {
  border-color: rgba(59, 130, 246, 0.28) !important;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(59, 130, 246, 0.06), transparent 39%),
    #08090b !important;
}

.docdoe-locked-pricing .docdoe-pricing-card-popular::before {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.56), transparent) !important;
}

.docdoe-locked-pricing .docdoe-pricing-card-premium {
  border-color: rgba(248, 250, 252, 0.16) !important;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(248, 250, 252, 0.065), transparent 42%),
    #080808 !important;
}

.docdoe-locked-pricing .docdoe-pricing-card:hover {
  border-color: rgba(248, 250, 252, 0.2) !important;
  box-shadow: inset 0 1px 0 rgba(248, 250, 252, 0.075) !important;
}

.docdoe-pricing-tier {
  display: flex;
  min-height: 1.8rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: rgba(248, 250, 252, 0.4);
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.21em;
  text-transform: uppercase;
}

.docdoe-pricing-signal {
  display: block;
  height: 1px;
  margin: 0.8rem 0 0.95rem;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.06);
}

.docdoe-pricing-signal > span {
  display: block;
  width: 3.7rem;
  height: 1px;
  background: rgba(248, 250, 252, 0.42);
  opacity: 0.28;
  transform: scaleX(0.3);
  transform-origin: left;
  transition:
    opacity 230ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 230ms cubic-bezier(0.22, 1, 0.36, 1);
}

.docdoe-pricing-card-popular .docdoe-pricing-signal > span {
  background: rgba(59, 130, 246, 0.68);
  opacity: 0.9;
  transform: scaleX(1);
}

.docdoe-pricing-card-premium .docdoe-pricing-signal > span {
  opacity: 0.48;
  transform: scaleX(0.58);
}

.docdoe-locked-pricing .docdoe-pricing-card:is(:hover, :focus-within) .docdoe-pricing-signal > span {
  opacity: 0.9;
  transform: scaleX(1);
}

.docdoe-locked-pricing .docdoe-pricing-badge {
  position: static;
  min-height: 1.6rem;
  border: 1px solid rgba(248, 250, 252, 0.1) !important;
  padding: 0 0.64rem;
  color: rgba(248, 250, 252, 0.68) !important;
  font-size: 0.61rem;
  letter-spacing: 0.12em;
  background: rgba(248, 250, 252, 0.035) !important;
}

.docdoe-locked-pricing .docdoe-pricing-badge-popular {
  border-color: rgba(59, 130, 246, 0.22) !important;
  color: rgba(157, 194, 255, 0.94) !important;
  background: rgba(59, 130, 246, 0.065) !important;
}

.docdoe-locked-pricing .docdoe-pricing-card h3 {
  margin: 0 0 0;
  font-size: 1.55rem;
  font-weight: 640;
  letter-spacing: -0.045em;
}

.docdoe-locked-pricing .docdoe-pricing-description {
  min-height: 3.35rem;
  margin: 0.6rem 0 0;
  color: rgba(248, 250, 252, 0.54);
  font-size: 0.86rem;
  font-weight: 420;
  line-height: 1.55;
}

.docdoe-pricing-price-shell {
  min-height: 7.7rem;
  margin-top: 1.25rem;
}

.docdoe-locked-pricing .docdoe-pricing-price {
  margin: 0;
}

.docdoe-locked-pricing .docdoe-pricing-price span {
  color: #f8fafc !important;
  font-size: clamp(2.7rem, 3.8vw, 3.15rem);
  font-weight: 680;
  letter-spacing: -0.065em;
}

.docdoe-locked-pricing .docdoe-pricing-price small {
  color: rgba(248, 250, 252, 0.46);
  font-size: 0.77rem;
  font-weight: 520;
}

.docdoe-pricing-effective {
  display: flex;
  min-height: 2.65rem;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.65rem 0 0;
  color: rgba(248, 250, 252, 0.42);
  font-size: 0.73rem;
}

.docdoe-pricing-yearly-offer {
  flex-basis: 100%;
  color: rgba(248, 250, 252, 0.53);
  font-weight: 540;
}

.docdoe-pricing-effective strong {
  color: rgba(248, 250, 252, 0.64);
  font-weight: 570;
}

.docdoe-pricing-effective.is-yearly strong {
  color: rgba(132, 179, 255, 0.92);
}

.docdoe-locked-pricing .docdoe-pricing-divider {
  margin: 0.2rem 0 1.15rem;
  background: rgba(248, 250, 252, 0.075);
}

.docdoe-locked-pricing .docdoe-pricing-features {
  gap: 0.7rem;
  margin-bottom: 1.45rem;
}

.docdoe-locked-pricing .docdoe-pricing-features li {
  color: rgba(248, 250, 252, 0.64);
  font-size: 0.84rem;
  font-weight: 440;
}

.docdoe-locked-pricing .docdoe-pricing-check {
  width: 1rem;
  height: 1rem;
  color: rgba(248, 250, 252, 0.73) !important;
  border: 1px solid rgba(248, 250, 252, 0.19);
  background: transparent !important;
}

.docdoe-locked-pricing .docdoe-pricing-check svg {
  width: 0.62rem;
  height: 0.62rem;
}

.docdoe-locked-pricing .docdoe-pricing-button {
  min-height: 3.05rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 610;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.docdoe-locked-pricing .docdoe-pricing-button::before {
  display: none;
}

.docdoe-locked-pricing .docdoe-pricing-button-starter {
  border: 1px solid rgba(248, 250, 252, 0.17) !important;
  color: rgba(248, 250, 252, 0.85) !important;
  background: rgba(248, 250, 252, 0.025) !important;
}

.docdoe-locked-pricing .docdoe-pricing-button-popular,
.docdoe-locked-pricing .docdoe-pricing-button-premium {
  border: 1px solid transparent !important;
  color: #070707 !important;
  background: #f8fafc !important;
}

.docdoe-locked-pricing .docdoe-pricing-button:hover {
  transform: translateY(-1px);
  box-shadow: none !important;
}

.docdoe-locked-pricing .docdoe-pricing-trust {
  display: flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem 1.15rem;
  margin: clamp(2.25rem, 4vw, 2.8rem) auto 0;
  border-color: rgba(248, 250, 252, 0.075) !important;
  padding: 0.8rem 1.2rem;
  color: rgba(248, 250, 252, 0.48);
  background: transparent !important;
  font-size: 0.75rem;
  font-weight: 510;
}

.docdoe-locked-pricing .docdoe-pricing-trust span {
  gap: 0;
}

.docdoe-locked-pricing .docdoe-pricing-trust span + span::before {
  width: 0.22rem;
  height: 0.22rem;
  margin-right: 1.15rem;
  background: rgba(248, 250, 252, 0.28) !important;
}

.docdoe-faq-item.docdoe-faq-item-open {
  border-color: rgba(59, 130, 246, 0.21) !important;
  border-left-color: rgba(59, 130, 246, 0.21) !important;
}

.docdoe-final-cta-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

@media (max-width: 1023px) {
  .docdoe-signal-layout {
    grid-template-columns: 1fr;
    gap: clamp(3.1rem, 7vw, 4.25rem);
  }

  .docdoe-signal-title,
  .docdoe-signal-body {
    max-width: 36rem;
  }

  .docdoe-signal-board {
    max-width: 44rem;
  }

  .docdoe-pricing-heading {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "copy"
      "controls";
  }

  .docdoe-billing-controls {
    justify-items: start;
    margin-top: 2.2rem;
  }

  .docdoe-locked-pricing .docdoe-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 28.5rem;
    margin: 0 auto;
  }

  .docdoe-locked-pricing .docdoe-pricing-card {
    min-height: auto;
  }
}

@media (max-width: 639px) {
  .docdoe-hero-mark {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 1rem;
  }

  .docdoe-hero-proof {
    flex-wrap: wrap;
    gap: 0.42rem 0.65rem;
    margin-top: 2rem;
    font-size: 0.56rem;
    letter-spacing: 0.04em;
  }

  .docdoe-hero-proof li {
    gap: 0.35rem;
  }

  .docdoe-hero-proof li:not(:last-child)::after {
    display: none;
  }

  .docdoe-signal-section,
  .docdoe-locked-pricing {
    padding-top: 4.7rem;
    padding-bottom: 4.75rem;
  }

  .docdoe-signal-kicker {
    gap: 0.6rem;
  }

  .docdoe-signal-kicker::after {
    width: 2rem;
  }

  .docdoe-signal-title,
  .docdoe-pricing-heading h2 {
    font-size: clamp(2.38rem, 11.8vw, 2.78rem);
    line-height: 1.015;
  }

  .docdoe-signal-body {
    line-height: 1.7;
  }

  .docdoe-signal-terms {
    gap: 0.65rem 1rem;
  }

  .docdoe-signal-terms span + span::before {
    margin-right: 1rem;
  }

  .docdoe-signal-board-header {
    align-items: start;
  }

  .docdoe-signal-row {
    grid-template-columns: 1.8rem minmax(0, 1fr);
    row-gap: 0.45rem;
    min-height: 6.2rem;
    padding: 0.72rem 0;
  }

  .docdoe-signal-result {
    grid-column: 2;
    grid-auto-flow: column;
    justify-content: space-between;
    justify-items: initial;
  }

  .docdoe-billing-toggle {
    width: 100%;
  }

  .docdoe-billing-toggle button {
    flex: 1;
    justify-content: center;
    padding-inline: 0.55rem;
    font-size: 0.8rem;
  }

  .docdoe-billing-offer {
    padding-inline: 0.38rem;
    font-size: 0.57rem;
  }

  .docdoe-locked-pricing .docdoe-pricing-grid-wrap {
    margin-top: 2.7rem;
  }

  .docdoe-locked-pricing .docdoe-pricing-card {
    border-radius: 1.25rem;
    padding: 1.15rem;
  }

  .docdoe-locked-pricing .docdoe-pricing-trust {
    justify-content: flex-start;
    border-radius: 1rem;
    padding: 0.85rem 1rem;
  }

  .docdoe-locked-pricing .docdoe-pricing-trust span + span::before {
    margin-right: 0.7rem;
  }
}

@media (max-width: 767px) {
  .docdoe-atmosphere-noise,
  .docdoe-atmosphere-dots,
  .docdoe-atmosphere-global-glow {
    display: none;
  }

  .docdoe-navbar-shell {
    background: #070707;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .docdoe-focus-ambient,
  .docdoe-final-cta-spotlight {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .docdoe-hero-proof-dot {
    animation: none;
    opacity: 0.72;
    transform: none;
  }

  .docdoe-billing-toggle button,
  .docdoe-pricing-signal > span {
    transition: none;
  }
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.87 0 0);
  --chart-2: oklch(0.556 0 0);
  --chart-3: oklch(0.439 0 0);
  --chart-4: oklch(0.371 0 0);
  --chart-5: oklch(0.269 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}