/* HiDub-specific additions on top of the LLP design system (/ds/styles.css).
   Built from the same tokens — no raw hex, no shadows, 2px max radius —
   for the patterns the marketing-focused component set doesn't template:
   long-form doc content, callouts, and the beta access-code card. */

/* _ds_bundle.css sets `overflow-x: hidden` on body, which the spec
   propagates to the viewport rather than clipping body's own box — the
   language marquee's full-width (unclipped) track can still register as
   real horizontal scroll room. Setting it on html too closes that gap. */
html {
  overflow-x: hidden;
}

.brand {
  gap: 10px;
}

.brand-word {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand-beta {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 3px 6px;
}

/* Long-form doc content (install / privacy / limits body copy). */
.doc-section {
  max-width: 640px;
}

.doc-section h2 {
  margin: 44px 0 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(23px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.doc-section h2:first-child {
  margin-top: 0;
}

.doc-section p,
.doc-section li {
  margin-bottom: 12px;
  color: var(--body);
  font-size: 17px;
  line-height: 1.65;
}

.doc-section ul,
.doc-section ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.doc-section strong {
  color: var(--ink);
  font-weight: 600;
}

.doc-section code {
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 0.85em;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.12em 0.4em;
}

/* Hero: text left, small looping demo clip right — kept in view with no
   scroll on typical desktop heights. _ds_bundle.css sizes .hero for a
   flagship full-bleed marketing page; HiDub's hero is compact instead so
   it (and the video) fit above the fold without scrolling. */
.hero {
  min-height: 0;
  padding: clamp(44px, 6vw, 76px) var(--pad) clamp(36px, 5vw, 56px);
}

.hero-grid {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.hero-text {
  flex: 1 1 460px;
  min-width: 0;
}

.hero-media {
  flex: 0 0 auto;
  width: clamp(300px, 39vw, 540px);
  pointer-events: auto;
}

.hero-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper-alt);
}

@media (max-width: 860px) {
  .hero {
    padding-top: clamp(28px, 5vw, 44px);
    padding-bottom: clamp(20px, 4vw, 32px);
  }

  .hero-grid {
    display: block;
  }

  .hero-media {
    width: min(450px, 90vw);
    margin-top: 20px;
  }
}

.small-note {
  color: var(--muted);
  font-size: 15px;
}

.form-error {
  margin-top: 10px;
  color: var(--accent);
  font-size: 15px;
}

/* Callout — warnings, status alerts. */
.callout {
  margin: 20px 0;
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
  background: var(--paper-alt);
  color: var(--body);
  font-size: 15px;
  line-height: 1.6;
}

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

/* Beta access-code card. */
.access-card {
  max-width: 480px;
  margin: 20px 0 24px;
  padding: 20px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper-alt);
}

.access-row {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.access-row code {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper);
  padding: 10px 14px;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
}

.access-row button {
  border: none;
  background: none;
  padding: 0 4px;
  cursor: pointer;
}

.access-help {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.checksum {
  margin: 4px 0 8px;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
}

.fingerprint {
  max-width: 480px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-alt);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.fingerprint code {
  background: var(--paper);
}

@media (max-width: 480px) {
  .access-row {
    flex-direction: column;
  }
}