/* Shared components — nav, buttons, cards, tags, footer, marquee. */

/* =========================================================
   Interactive states — "soft white halo" (system 1)
   Single source of truth for hover/active/focus-visible across every
   clickable in the site: pill buttons, nav/footer text links, and the
   small controls (swatches, toggle, FAQ rows, modal buttons).
   - hover:  faint outer glow (--halo-shadow-hover) + hairline brightens
   - active: same halo, tighter/dimmer — short, legible click feedback
   - focus-visible: same family, slightly stronger — replaces the
     browser's default blue ring, keyboard users get an equivalent cue
   Selector list below is the single registry: add a new clickable here
   instead of hand-rolling hover/active/focus elsewhere.
   ========================================================= */
.btn,
.plan-btn,
.nav-links a,
.footer-col a,
.footer-legal a,
.footer-social a,
.newsletter button,
.dp-submit,
.dp-close,
.faq-q,
.plan-toggle {
  transition: box-shadow var(--halo-transition), border-color var(--halo-transition),
    background-color var(--halo-transition), color var(--halo-transition);
}
/* .btn--glow / .btn--glow-lg / .plan-btn--bright already carry an ambient
   ("always on") white glow at rest — the halo must layer on top of it, not
   replace it, or hover would visually read as *less* lit. Plain buttons
   (no ambient glow) get the halo as their only shadow. */
.btn:not(.btn--glow):not(.btn--glow-lg):hover,
.plan-btn:not(.plan-btn--bright):hover,
.newsletter button:hover,
.dp-submit:not([disabled]):hover,
.dp-close:hover,
.faq-q:hover,
.plan-toggle:hover {
  box-shadow: var(--halo-shadow-hover);
}
.btn:not(.btn--glow):not(.btn--glow-lg):active,
.plan-btn:not(.plan-btn--bright):active,
.newsletter button:active,
.dp-submit:not([disabled]):active,
.dp-close:active,
.faq-q:active,
.plan-toggle:active {
  box-shadow: var(--halo-shadow-active);
}
.btn--glow:hover, .btn--glow-lg:hover, .plan-btn--bright:hover {
  box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 56px 0px, var(--halo-shadow-hover);
}
.btn--glow:active, .btn--glow-lg:active, .plan-btn--bright:active {
  box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 56px 0px, var(--halo-shadow-active);
}
.nav-links a:hover,
.footer-col a:hover,
.footer-legal a:hover {
  color: var(--halo-text-hover);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
}
.nav-links a:active,
.footer-col a:active,
.footer-legal a:active {
  color: var(--halo-text-hover);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.1);
}
.footer-social a:hover {
  box-shadow: var(--halo-shadow-hover);
}
.footer-social a:active {
  box-shadow: var(--halo-shadow-active);
}
/* .btn--outline / .plan-card--enterprise .plan-btn: hairline brightens on hover too */
.btn--outline:hover {
  border-color: var(--halo-border-hover);
}
.plan-card--enterprise .plan-btn:hover {
  box-shadow: inset 0 0 0 1px var(--halo-border-hover), var(--halo-shadow-hover);
}
.plan-card--enterprise .plan-btn:active {
  box-shadow: inset 0 0 0 1px var(--halo-border-hover), var(--halo-shadow-active);
}

/* focus-visible — same halo family everywhere, no default blue ring */
.btn:not(.btn--glow):not(.btn--glow-lg):focus-visible,
.plan-btn:not(.plan-btn--bright):focus-visible,
.newsletter button:focus-visible,
.dp-submit:focus-visible,
.dp-close:focus-visible,
.faq-q:focus-visible,
.plan-toggle:focus-visible,
.footer-social a:focus-visible {
  outline: none;
  box-shadow: var(--halo-shadow-focus);
}
.btn--glow:focus-visible, .btn--glow-lg:focus-visible, .plan-btn--bright:focus-visible {
  outline: none;
  box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 56px 0px, var(--halo-shadow-focus);
}
.nav-links a:focus-visible,
.footer-col a:focus-visible,
.footer-legal a:focus-visible {
  outline: none;
  color: var(--halo-text-hover);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .plan-btn,
  .nav-links a,
  .footer-col a,
  .footer-legal a,
  .footer-social a,
  .newsletter button,
  .dp-submit,
  .dp-close,
  .faq-q,
  .plan-toggle {
    transition-duration: 1ms;
  }
}

/* =========================================================
   Pill buttons
   ========================================================= */
.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 56px;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.btn p {
  font-family: var(--font-medium);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  text-align: center;
}
.btn--primary { background-image: var(--grad-iridescent); }
.btn--primary p { color: rgb(0, 0, 0); }
.btn--glow { box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 56px 0px; }
.btn--glow-lg { box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 56px 6px; }
.btn--outline { border: 1px solid var(--outline); }
.btn--outline p { color: var(--title); }
/* sizes (outline variants compensate the 1px border to keep identical box) */
.btn--md { padding: 8px 20px; }              /* h40 */
.btn--outline.btn--md { padding: 7px 19px; }
.btn--lg { padding: 10px 24px; }             /* h44 */
.btn--outline.btn--lg { padding: 9px 23px; }
.btn--nav { padding: 4px 12px; }             /* h29 */
.btn--outline.btn--nav { padding: 3px 11px; }
.btn--nav p { font-size: 14px; line-height: 21px; letter-spacing: -0.14px; }

/* =========================================================
   Nav
   ========================================================= */
.site-nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.nav-blur {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 127px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0; /* stacking context: contains the layers' z 1-8 below .site-nav */
}
.nav-blur div { position: absolute; inset: 0; }
.nav-blur div:nth-child(1) { backdrop-filter: blur(0.5px);  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 60%); mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 60%); }
.nav-blur div:nth-child(2) { backdrop-filter: blur(1.5px);  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 45%); mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 45%); }
.nav-blur div:nth-child(3) { backdrop-filter: blur(4px);    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 10%, transparent 30%); mask-image: linear-gradient(to bottom, black 0%, black 10%, transparent 30%); }
.site-nav {
  position: relative;
  z-index: 1; /* above the .nav-blur stack */
  height: 77px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-logo {
  display: block;
  width: 63px;
  height: 28px;
}
.nav-logo svg { display: block; width: 100%; height: 100%; }
/* light: hardcoded white wordmark → near-black so it reads on the light nav */
[data-theme="light"] .nav-logo svg path { fill: var(--title); }
.nav-links {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  display: flex;
  gap: 32px;
}
.nav-links a {
  font-family: var(--font-book);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: var(--nav-link);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 809.98px) {
  .nav-links { display: none; }
}

/* =========================================================
   Theme toggle — vertical pill (sun top / moon bottom),
   the thumb slides LEFT-RIGHT (conventional horizontal switch).
   Sits in the footer's bottom row, next to the social icon — a quiet,
   tucked-away spot, not in the header. Sober, mono-line SVG icons — site DNA.
   The dark state is the default: thumb parked over the moon (left).
   Selecting light slides the thumb to the sun (right).
   Driven purely by [data-theme] (js/theme.js owns the attr).

   ⚠️ PAUSED (2026-07-02): light mode isn't polished yet, so the control
   ships `disabled` AND hidden (display:none) — the markup/CSS/JS all stay
   in place, just not rendered. To re-enable: drop `disabled` from the
   button in every page's footer (7 files), remove the
   `.theme-toggle[disabled] { display: none; }` rule below, and remove the
   `if(false&&...)` guard in each page's anti-flash <head> script.
   js/theme.js needs no changes either way.
   ========================================================= */
.theme-toggle {
  flex: none;
  width: 44px;
  height: 25px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.theme-toggle[disabled] { display: none; }
.theme-toggle-track {
  position: relative;
  width: 44px;
  height: 25px;
  border-radius: 999px;
  border: 1px solid var(--outline);
  background-color: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  transition: border-color var(--halo-transition), background-color var(--halo-transition);
}
.theme-ico {
  position: relative;
  z-index: 2;
  width: 13px;
  height: 13px;
  display: block;
  color: var(--muted);
  transition: color 0.25s ease;
}
/* thumb — pill knob that slides between the two icons */
.theme-toggle-thumb {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 3px;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  border-radius: 50%;
  background-color: var(--muted-strong);
  transition: transform 0.32s var(--ease-appear), background-color var(--halo-transition);
}
/* dark (default): thumb at left over the moon → moon reads active */
.theme-ico--moon { color: rgb(20, 20, 20); }
/* light: thumb travels right to the sun */
[data-theme="light"] .theme-toggle-thumb { transform: translateX(21px); }
[data-theme="light"] .theme-ico--moon { color: var(--muted); }
[data-theme="light"] .theme-ico--sun { color: rgb(250, 250, 250); }
/* hover / focus halo — reuse the shared tokens (light-aware, see tokens.css) */
.theme-toggle:hover .theme-toggle-track { box-shadow: var(--halo-shadow-hover); border-color: var(--halo-border-hover); }
.theme-toggle:active .theme-toggle-track { box-shadow: var(--halo-shadow-active); }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .theme-toggle-track { box-shadow: var(--halo-shadow-focus); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-thumb, .theme-toggle-track, .theme-ico { transition-duration: 1ms; }
}

/* =========================================================
   Cards & tags
   ========================================================= */
.card {
  background-color: var(--card);
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
  position: relative;
}

/* Floating tag pill (Without/With Hypra) */
.tag {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.04);
  box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 11px 0px inset;
  backdrop-filter: blur(9px);
  white-space: nowrap;
}
.tag--bright { background-color: rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px); }
.tag .tag-icon {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tag .tag-icon svg { display: block; }
.tag p {
  font-family: var(--font-medium);
  font-size: 18px;
  line-height: 24.3px;
  letter-spacing: -0.54px;
  color: var(--title);
}

/* =========================================================
   Marquee (continuous scrollers)
   [data-marquee] > .marquee-track — content duplicated by JS.
   ========================================================= */
[data-marquee] { overflow: hidden; position: relative; }
[data-marquee] .marquee-track {
  display: flex;
  will-change: transform;
}
[data-marquee][data-marquee-dir="up"] .marquee-track,
[data-marquee][data-marquee-dir="down"] .marquee-track { flex-direction: column; }
@keyframes marquee-neg { to { transform: translateY(calc(-1 * var(--marquee-dist))); } }
@keyframes marquee-neg-x { to { transform: translateX(calc(-1 * var(--marquee-dist))); } }
@keyframes marquee-pos { from { transform: translateY(calc(-1 * var(--marquee-dist))); } to { transform: translateY(0); } }
@keyframes marquee-pos-x { from { transform: translateX(calc(-1 * var(--marquee-dist))); } to { transform: translateX(0); } }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  position: relative;
  background: var(--bg);
  padding: 48px 0;
  min-height: 700px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.footer-shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 70.4075%);
  pointer-events: none;
}
/* light: the black-to-transparent veil would paint a dark band over the
   near-white page — fade from the light bg instead (same top-heavy shape). */
[data-theme="light"] .footer-shade {
  background-image: linear-gradient(var(--bg) 0%, rgba(251, 251, 251, 0) 70.4075%);
}
.footer-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1280px;
  padding: 0 24px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-cols {
  display: flex;
  gap: 24px;
}
.footer-col { width: 160px; }
.footer-col h4 {
  font-family: var(--font-book);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--title);
  margin-bottom: 8px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col a {
  font-family: var(--font-book);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--nav-link);
}
.newsletter {
  width: 320px;
  max-width: 320px;
  background-color: rgba(48, 48, 48, 0.5);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* light: glass card reads as a light frosted panel with a hairline */
[data-theme="light"] .newsletter {
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.newsletter h4 {
  font-family: var(--font-book);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--title);
}
.newsletter form { display: flex; flex-direction: column; gap: 16px; }
.newsletter .fields { display: flex; flex-direction: column; gap: 12px; }
.field {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 8px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
/* light: inset field on the light panel — subtle darker fill + hairline */
[data-theme="light"] .field {
  background: rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
.field input, .field select {
  width: 100%;
  font-family: var(--font-book);
  font-size: 14px;
  line-height: 16.8px;
  letter-spacing: -0.14px;
  color: #fff;
}
.field input::placeholder { color: rgb(153, 153, 153); opacity: 1; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  color: rgb(153, 153, 153);
}
/* light: dark text in the fields, keep placeholders muted */
[data-theme="light"] .field input,
[data-theme="light"] .field select { color: var(--text); }
[data-theme="light"] .field input::placeholder { color: var(--muted); }
[data-theme="light"] .field select { color: var(--muted); }
.field .chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.newsletter button {
  height: 36px;
  border-radius: 100px;
  background-color: rgba(240, 240, 240, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.newsletter button p {
  font-family: var(--font-medium);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.48px;
  color: rgb(0, 0, 0);
}
.newsletter-msg {
  font-family: var(--font-book);
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  margin-top: -4px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
}
.footer-legal {
  flex: 1;
  display: flex;
  gap: 24px;
}
.footer-legal a {
  font-family: var(--font-book);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--title);
}
.footer-logo { display: block; width: 63px; height: 28px; }
.footer-logo svg { display: block; width: 100%; height: 100%; }
/* light: the wordmark ships with a hardcoded white fill — recolor to the
   near-black title so it reads on the light footer */
[data-theme="light"] .footer-logo svg path { fill: var(--title); }
.footer-social {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.footer-social a {
  width: 48px;
  height: 48px;
  border-radius: 64px;
  background-color: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.footer-social svg { width: 16px; height: 16px; }
/* light: the glyph ships as a hardcoded white fill in the markup — recolor
   it dark so it reads on the light chip */
[data-theme="light"] .footer-social svg { fill: var(--title); }

@media (max-width: 1199.98px) {
  .footer-inner { max-width: 928px; padding: 0; }
}
@media (max-width: 809.98px) {
  .site-footer { padding: 32px 0; min-height: 772px; }
  .footer-inner { padding: 0 24px; }
  .footer-top { flex-direction: column; gap: 40px; }
  .newsletter { width: 100%; max-width: none; }
  .footer-bottom {
    flex-direction: column;
    gap: 30px;
    height: auto;
    align-items: stretch;
  }
  .footer-legal { flex: none; order: 0; }
  .footer-social { flex: none; order: 1; justify-content: flex-end; }
  .footer-logo { order: 2; align-self: center; }
}

/* =========================================================
   Discovery Pack modal (shareable dialog — driven by js/discovery.js)
   Overlay 65% black + light blur; card = --card / --border / r16,
   two columns >=810px (visual stack | copy + form), stacked on mobile.
   ========================================================= */
.dp-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dp-modal[hidden] { display: none; }
.dp-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dp-card {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  display: flex;
  align-items: stretch;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-appear);
}
.dp-modal.is-open .dp-overlay { opacity: 1; }
.dp-modal.is-open .dp-card { opacity: 1; transform: none; }
/* programmatic focus target on open — no browser ring on the dialog itself */
.dp-card:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .dp-card { transform: none; transition: opacity 0.2s ease; }
}
.dp-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: pointer;
}
/* icon tint on hover/focus — halo (box-shadow, transition) comes from the
   shared interactive-states block above */
.dp-close:hover, .dp-close:focus-visible { color: var(--title); }

/* Visual column — scattered pile of sample prints over a faint glow. */
.dp-visual {
  position: relative;
  flex: 1 1 46%;
  min-height: 560px;
  background-color: var(--card-deep);
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.dp-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 45% at 50% 42%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
.dp-stack { position: absolute; inset: 0; }
.dp-im {
  position: absolute;
  width: 38%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.55) 0px 18px 40px 0px;
}
.dp-im--1 { left: 8%;  top: 7%;  transform: rotate(-8deg); }
.dp-im--2 { left: 56%; top: 5%;  transform: rotate(6deg); }
.dp-im--3 { left: 6%;  top: 52%; transform: rotate(5deg); }
.dp-im--4 { left: 57%; top: 50%; transform: rotate(-6deg); }
.dp-im--5 {
  left: 29%;
  top: 27%;
  width: 42%;
  z-index: 2;
  transform: rotate(-2deg);
  box-shadow: rgba(0, 0, 0, 0.65) 0px 28px 56px 0px;
}
.dp-visual-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 2;
  text-align: center;
  color: var(--muted);
}

/* Content column */
.dp-body {
  flex: 1 1 54%;
  padding: 44px 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Title — site serif display ratios (96% leading, -3% tracking). */
.dp-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 30.72px;
  letter-spacing: -0.96px;
  text-transform: uppercase;
  color: var(--title);
}
.dp-desc {
  margin-top: 14px;
  font-family: var(--font-book);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: var(--muted);
}
.dp-feats {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dp-feats li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 18px;
}
.dp-feat-ico {
  width: 14px;
  height: 14px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background-color: rgba(76, 175, 80, 0.16);
}
.dp-feat-ico svg { display: block; width: 14px; height: 14px; }
.dp-feat-ico svg path { stroke: #4caf50; }
.dp-feats p {
  font-family: var(--font-book);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.14px;
  color: var(--title);
  opacity: 0.75;
}
.dp-form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.dp-form .fields { display: flex; flex-direction: column; gap: 12px; }
.dp-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.dp-error {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background-color: rgba(255, 0, 0, 0.09);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: var(--font-book);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  color: rgb(255, 89, 89);
}
.dp-submit {
  height: 36px;
  border-radius: 100px;
  background-color: rgba(240, 240, 240, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dp-submit[disabled] { opacity: 0.6; cursor: default; }
.dp-submit p {
  font-family: var(--font-medium);
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.48px;
  color: rgb(0, 0, 0);
}
/* Success state */
.dp-step--success .dp-title:focus { outline: none; }
.dp-sent-email { color: var(--muted-strong); }
.dp-success-btn { margin-top: 24px; }
.dp-hint { margin-top: 12px; color: var(--muted); }
/* Second CTA — straight to the full catalog */
.dp-alt {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dp-alt-label { color: var(--muted); }
/* Scroll lock while the modal is open (js/discovery.js) */
body.dp-lock { overflow: hidden; }

@media (max-width: 809.98px) {
  .dp-modal { padding: 16px; }
  .dp-card {
    flex-direction: column;
    max-width: 480px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
  }
  .dp-visual {
    flex: none;
    min-height: 0;
    height: 232px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .dp-im { width: 22%; }
  .dp-im--1 { left: 6%;  top: 12%; }
  .dp-im--2 { left: 57%; top: 6%; }
  .dp-im--3 { left: 19%; top: 36%; }
  .dp-im--4 { left: 75%; top: 32%; }
  .dp-im--5 { left: 39%; top: 12%; width: 25%; }
  .dp-visual-note { bottom: 12px; }
  .dp-body { padding: 28px 24px 24px; }
  .dp-title { font-size: 28px; line-height: 26.88px; letter-spacing: -0.84px; }
  .dp-feats { margin-top: 16px; }
  .dp-form { margin-top: 20px; }
  .dp-alt { margin-top: 24px; padding-top: 16px; }
}