/* RentDock coming-soon page. Dark, premium, calm; one accent gradient used
   sparingly (hero glow, AI block, primary button). Mobile-first, no
   horizontal scroll, 16px gutters. System font stack only, no web fonts. */

:root {
  --color-bg: #05060a;
  --color-bg-elevated: #0c0e17;
  --color-bg-elevated-2: #11141f;
  --color-text: #f4f5fa;
  --color-text-muted: #a3a8bd;
  --color-border: #20243570;
  /* Form controls need to actually register against the page (addendum 6):
     white at 38% measures 3.46:1 against --color-bg and 3.13:1 against the
     darkest elevated surface (--color-bg-elevated-2) – both clear the 3:1
     non-text-contrast bar regardless of which background the control sits
     on. --color-border alone (~2:1) was the "barely visible" the owner
     flagged. */
  --color-border-strong: rgba(255, 255, 255, 0.38);
  --color-indigo: #4f46e5;
  --color-cyan: #06b6d4;
  /* Exact dark-mode wordmark tokens from v2/packages/shared-ui/src/styles/index.css
     (.dark --t-accent / --t-ink) – the same two colours the admin app's own
     sidebar wordmark uses, not eyeballed. */
  --color-wordmark-accent: #818cf8;
  --color-wordmark-ink: #f8fafc;
  --gradient-accent: linear-gradient(135deg, var(--color-indigo), var(--color-cyan));
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji";
  --container-max: 1120px;
  --gutter: 16px;
  --radius: 20px;
  --radius-sm: 12px;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-cyan);
  /* The header's own fixed height (set explicitly, not content-driven, so
     .hero can cancel it out precisely – see "Header" below). */
  --header-h: 4.75rem;
}

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

a {
  color: inherit;
}

button,
input {
  font-family: inherit;
  color: inherit;
}

ul {
  margin: 0;
  padding-left: 1.25em;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 640px) {
  .container {
    padding-inline: 32px;
  }
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-bg-elevated);
  color: var(--color-text);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.btn-primary {
  background: var(--gradient-accent);
  color: #fff;
  box-shadow: 0 8px 24px -8px #4f46e588;
}

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

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Header – a macOS-style "liquid glass" bar (round 3 addendum 4.2): a
   translucent fill of the page background, blurred and saturated behind it,
   a hairline top highlight and bottom edge, sitting sticky above a hero
   whose own background (glow included) continues underneath it (see
   .hero's negative margin-top below). `@supports` falls back to a plain
   solid bar wherever backdrop-filter isn't available. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(5, 6, 10, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 0 var(--color-border),
    0 12px 30px -20px rgba(0, 0, 0, 0.6);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(5, 6, 10, 0.55);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.brand-name {
  font-weight: 700;
  font-size: 1.125rem;
}

.brand-name-accent {
  color: var(--color-wordmark-accent);
}

.brand-name-ink {
  color: var(--color-wordmark-ink);
}

.brand-tagline {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.site-header nav a,
.site-footer nav a {
  text-decoration: none;
  color: var(--color-text-muted);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
}

.site-header nav a:hover,
.site-footer nav a:hover {
  color: var(--color-text);
}

/* Hero – pulled up by the header's own height and repadded by the same
   amount, so its background (the glow included) visually extends UNDER the
   sticky glass header instead of stopping where the header's normal flow
   position would otherwise end it. */
.hero {
  position: relative;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(3rem, 8vw, 6rem));
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  background: radial-gradient(60% 60% at 30% 20%, #4f46e555, transparent 70%),
    radial-gradient(50% 50% at 80% 60%, #06b6d455, transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-glow {
    /* Two independent animations on the same element: a slow positional
       drift and a much slower, gentle opacity breathing, so the glow reads
       as quietly alive rather than a single mechanical loop. */
    animation:
      hero-drift 22s ease-in-out infinite alternate,
      hero-pulse 7s ease-in-out infinite;
  }
}

@keyframes hero-drift {
  from {
    transform: translate3d(-3%, -2%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, 2%, 0) scale(1.06);
  }
}

@keyframes hero-pulse {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 1;
  }
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(2.25rem, 4.5vw + 1rem, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-rotator {
  margin-top: 1.25rem;
  min-height: 1.8em;
  font-size: clamp(1.1rem, 1.5vw + 0.8rem, 1.4rem);
  color: var(--color-text-muted);
}

.hero-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  background: var(--color-cyan);
  vertical-align: text-bottom;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-caret {
    animation: caret-blink 1s steps(1) infinite;
  }

  /* A brief "thinking" beat between phrases: app.js adds is-thinking to the
     rotator across the fade-out swap and a short pause after it, before the
     next line starts typing – the caret breathes instead of just blinking,
     a small signal that something is about to happen rather than a dead
     gap. */
  .hero-rotator.is-thinking .hero-caret {
    animation: caret-think 0.5s ease-in-out infinite;
  }

  /* A light shimmer sweeping across a just-finished line: app.js adds
     is-complete for the hold before the fade-out swap to the next line.
     background-clip: text paints the gradient only where the glyphs are, so
     the highlight reads as a sheen crossing the text rather than a
     coloured box behind it. */
  .hero-rotator-text.is-complete {
    background: linear-gradient(
      100deg,
      var(--color-text-muted) 0%,
      var(--color-text-muted) 42%,
      #ffffff 50%,
      var(--color-text-muted) 58%,
      var(--color-text-muted) 100%
    );
    background-size: 260% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shimmer-sweep 1.3s ease-out 1;
  }

  /* Swapping to the next phrase is a ~150ms fade+lift, not a char-by-char
     backspace (addendum 7 – deletion read as too slow even at 3x the
     typing speed; a fixed-duration swap stays snappy regardless of how
     long the outgoing phrase is). app.js removes the class and clears the
     text once the animation ends, so typing resumes from a blank, fully
     opaque line. */
  .hero-rotator-text.is-swapping {
    animation: rotator-swap-out 150ms ease-out forwards;
  }
}

@keyframes rotator-swap-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

@keyframes caret-think {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleY(0.7);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes shimmer-sweep {
  from {
    background-position: 180% 0;
  }
  to {
    background-position: -60% 0;
  }
}

.hero-paragraph {
  margin-top: 1.5rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.hero-actions {
  margin-top: 2rem;
}

/* Scroll reveal: only takes effect once JS opts elements in, so a no-JS
   visitor always sees full content with no hidden state. */
.js-reveal-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.js-reveal-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Features */
.features {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.feature-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.feature-icon {
  color: var(--color-cyan);
  margin-bottom: 1rem;
  width: 28px;
  height: 28px;
}

.feature-icon svg {
  width: 100%;
  height: 100%;
}

.feature-card h3,
.ai-teaser h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.feature-card p,
.ai-teaser p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* AI section – distinct via a bordered, glowing panel floating on the
   page's own continuous background, never a page-wide colour band: no
   section-level background swap and no 1px seam against the sections
   above/below (round 3 addendum 2.1 – the earlier hard top rule + flat
   elevated-colour band read as a visible patch, not a soft transition). */
.ai-section {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.ai-panel {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius) * 1.4);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  /* The glow itself: two soft, large, heavily-blurred colour pools bleeding
     outward from the panel's edges onto the plain page background behind
     it – a shadow, not a background-colour rectangle, so it fades to
     nothing with no visible edge. */
  box-shadow:
    0 0 90px -10px #4f46e559,
    0 0 130px -30px #06b6d44d;
}

.ai-intro-block {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.ai-section h2 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 0.5rem;
}

.ai-intro {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.ai-teasers {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.ai-teaser {
  background: var(--color-bg-elevated-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
}

/* FAQ */
.faq {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.faq h2 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align: center;
}

.faq-list {
  margin-top: 2rem;
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}

.faq-item {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

.faq-item summary::after {
  content: "+";
  color: var(--color-cyan);
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Subscribe */
.subscribe {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.subscribe-inner {
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
  /* Same glass language as the header (translucent fill, inner top
     highlight, hairline border, soft shadow) but without its heavy blur –
     nothing scrolls independently behind a static block, so the panel
     exists to read as one distinct object (addendum 6), not to blur
     content behind it. */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border-strong);
  border-radius: calc(var(--radius) * 1.2);
  padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 20px 60px -30px rgba(0, 0, 0, 0.6);
}

.subscribe h2 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2rem);
  font-weight: 800;
}

.subscribe-subtext {
  margin-top: 0.75rem;
  color: var(--color-text-muted);
}

.subscribe-form {
  margin-top: 2rem;
  text-align: left;
  display: grid;
  gap: 1.1rem;
}

.field label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.field input[type="email"] {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--color-bg-elevated-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

/* Custom box: appearance: none drops the native control (barely visible on
   a dark page in most browsers) for one with a guaranteed, measured border
   and an accent fill when checked (addendum 6). accent-color is a cheap
   fallback for the unlikely case appearance: none is ignored. */
.field-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  accent-color: var(--color-indigo);
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  background: var(--color-bg-elevated-2);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 0.3rem;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}

.field-checkbox input[type="checkbox"]:checked {
  background: var(--gradient-accent);
  border-color: transparent;
}

.field-checkbox input[type="checkbox"]:checked::after {
  content: "";
  width: 0.3rem;
  height: 0.55rem;
  border: solid var(--color-bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.field-checkbox label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.field-checkbox a {
  color: var(--color-cyan);
}

.subscribe-form .btn {
  justify-self: start;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  background: #06b6d422;
  border: 1px solid #06b6d455;
  color: var(--color-text);
}

.form-error {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: #ef444422;
  border: 1px solid #ef444455;
  color: #fecaca;
  font-size: 0.9rem;
}

[hidden] {
  display: none !important;
}

/* Privacy + 404 pages */
.privacy,
.notfound {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.privacy-inner {
  max-width: 720px;
  margin-inline: auto;
}

.privacy h1,
.notfound h1 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  font-weight: 800;
}

.privacy-updated {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.privacy-section {
  margin-top: 2rem;
}

.privacy-section h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.privacy-section p + p {
  margin-top: 0.75rem;
}

.privacy-section ul {
  margin-top: 0.75rem;
  color: var(--color-text-muted);
}

.notfound {
  text-align: center;
}

.notfound p {
  margin-top: 1rem;
  color: var(--color-text-muted);
}

.notfound .btn {
  margin-top: 1.75rem;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: 1.75rem;
  margin-top: 2rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.footer-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer-note {
  opacity: 0.75;
}

/* Reduced motion: belt-and-suspenders on top of the animations above being
   opt-in via (prefers-reduced-motion: no-preference) already. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}