/* Direction: Pabbly Black Friday — clean white page, black type, light mint-green used only as an accent */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fcfdfc;
  --surface: #ffffff;
  --surface-2: #f4f6f5;
  --border: #e5e9e6;
  --border-strong: #b4b6b4;
  --ink: #0b0f0d;
  --muted: #5a625d;
  --accent: #3fcf85;
  --accent-hover: #36b071;
  --accent-ink: #0b0f0d;
  --accent-text: #0f7a45;
  --accent-strong: #23734a;
  --accent-soft: #e0f6ea;
  --accent-border: #a7e8c6;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e0eee5;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f3e9df;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f4e2e1;
  --danger-strong: #b91c1c;
  --chart-1: #18a665;
  --chart-2: #219bb6;
  --chart-3: #5f69ca;
  --chart-4: #d071ba;
  --chart-5: #b74a2c;
  --chart-6: #a99121;

  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --radius-card: 22px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --shadow-card: 0 1px 2px rgba(11, 15, 13, 0.04), 0 12px 32px -12px rgba(11, 15, 13, 0.12);
  --x-band: #0b0f0d;
  --x-band-2: #171d1a;
  --x-on-photo: #ffffff;
  --x-connect: #1f9d5f;
  --x-email: #d6403f;
  --x-billing: #0e7490;
  --x-forms: #c26a05;
  --x-verify: #7c3fc4;
  --x-hook: #2563eb;
  --x-chat: #2f9e44;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0b0f0d;
  --surface: #232725;
  --surface-2: #171b19;
  --border: #2d312f;
  --border-strong: #545756;
  --ink: #fcfdfc;
  --muted: #9c9e9c;
  --accent: #3fcf85;
  --accent-hover: #5cd697;
  --accent-ink: #0b0f0d;
  --accent-text: #3fcf85;
  --accent-strong: #3fcf85;
  --accent-soft: #163927;
  --accent-border: #226543;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0d2818;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #301e0c;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #311210;
  --danger-strong: #d16969;
  --chart-1: #3fcf85;
  --chart-2: #23d3f6;
  --chart-3: #7f8cfb;
  --chart-4: #fe92e5;
  --chart-5: #e76b49;
  --chart-6: #ddbc12;
}

html { scroll-behavior: smooth; }
section[id], header[id] { scroll-margin-top: 84px; }

/* product identities */
.pd-connect { --pc: var(--x-connect); }
.pd-email { --pc: var(--x-email); }
.pd-billing { --pc: var(--x-billing); }
.pd-forms { --pc: var(--x-forms); }
.pd-verify { --pc: var(--x-verify); }
.pd-hook { --pc: var(--x-hook); }
.pd-chat { --pc: var(--x-chat); }
.pd-tile { background: var(--pc); color: var(--x-on-photo); }
.pd-soft { background: color-mix(in srgb, var(--pc) 12%, var(--surface)); color: var(--pc); }
.pd-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.pd-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pc) 45%, var(--border)); box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--pc) 40%, transparent); }
.pd-card:hover .pd-arrow { transform: translate(2px, -2px); }
.pd-arrow { transition: transform .2s ease; }

/* hero backdrop: faint grid + soft glow */
.hero-grid {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%);
}

/* floating motion */
@keyframes bf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bf-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
.float-a { animation: bf-float 6s ease-in-out infinite; }
.float-b { animation: bf-float 7.5s ease-in-out -2s infinite; }
.float-c { animation: bf-float 5.5s ease-in-out -4s infinite; }
.marquee-track { animation: bf-marquee 38s linear infinite; width: max-content; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.live-dot { animation: bf-pulse 1.8s ease-out infinite; }

/* workflow connector */
.wf-line { background: repeating-linear-gradient(to bottom, var(--border) 0 4px, transparent 4px 8px); width: 2px; }

/* bars */
.bar { transform-origin: bottom; }

/* FAQ */
details.faq summary { list-style: none; cursor: pointer; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-chev { transform: rotate(180deg); }
.faq-chev { transition: transform .2s ease; }

/* dark band texture */
.band-dots {
  background-image: radial-gradient(color-mix(in srgb, var(--x-on-photo) 14%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}

html.reduced-motion .float-a, html.reduced-motion .float-b, html.reduced-motion .float-c,
html.reduced-motion .marquee-track, html.reduced-motion .live-dot { animation: none; }
html.reduced-motion { scroll-behavior: auto; }