/*
 * theme.css — Pabbly Email Marketing landing page.
 *
 * Mood: bold-geometric x sunset-gradient. Flat colour blocks, 0px corners,
 * no card shadows, thick 2px strokes, a coral-to-rose glow token for the
 * hero and the pricing band. Space Grotesk display / Manrope body / JetBrains
 * Mono for the odd figure.
 */

:root {
  --canvas: #fff9f2;
  --surface: #fffcf9;
  --surface-2: #f7ead9;
  --border: #ecdcc8;
  --border-strong: #1d1029;
  --ink: #1d1029;
  --muted: #6d646f;
  --accent: #ff3b57;
  --accent-hover: #e42a46;
  --accent-ink: #1d1029;
  --accent-text: #b74329;
  --accent-strong: #b72a3f;
  --accent-soft: #ffe3d6;
  --accent-border: #ffb3a0;
  --success: #1f8a4c;
  --success-ink: #ffffff;
  --success-soft: #dff3e4;
  --success-strong: #146c39;
  --warning: #c9781a;
  --warning-ink: #ffffff;
  --warning-soft: #fbe8cf;
  --warning-strong: #9c5b0e;
  --danger: #c8202f;
  --danger-ink: #ffffff;
  --danger-soft: #fbdede;
  --danger-strong: #a01515;
  --chart-1: #ff3b57;
  --chart-2: #ffb020;
  --chart-3: #1d1029;
  --chart-4: #6d646f;
  --chart-5: #b72a3f;
  --chart-6: #2f9e64;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 2px;
  --border-strong-w: 2px;
  --shadow-card: none;
  --shadow-btn: none;
  --shadow-raised: 0 24px 48px -24px rgba(29, 16, 41, 0.35);
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.02em;
  --btn-weight: 700;
  --measure: 62ch;

  --gradient-glow: linear-gradient(120deg, #ffcf6b 0%, #ff7a45 45%, #ff3b57 100%);
  --gradient-glow-soft: radial-gradient(60% 60% at 50% 40%, rgba(255, 122, 69, 0.35), rgba(255, 59, 87, 0) 70%);
}

html[data-theme="dark"] {
  --canvas: #1b0f24;
  --surface: #241633;
  --surface-2: #2e1c40;
  --border: #3c2650;
  --border-strong: #f4e9dd;
  --ink: #fdf3e7;
  --muted: #b9a8c4;
  --accent: #ff3b57;
  --accent-hover: #ff5a72;
  --accent-ink: #1b0f24;
  --accent-text: #ff9478;
  --accent-strong: #ff8a6b;
  --accent-soft: #47212f;
  --accent-border: #6b2f3d;
  --success: #2fbd6a;
  --success-ink: #08210f;
  --success-soft: #123420;
  --success-strong: #6fdb9d;
  --warning: #e0a233;
  --warning-ink: #241300;
  --warning-soft: #3a2710;
  --warning-strong: #f0c988;
  --danger: #ff5c5c;
  --danger-ink: #2a0808;
  --danger-soft: #3a1414;
  --danger-strong: #ff9b9b;
  --chart-1: #ff3b57;
  --chart-2: #ffb020;
  --chart-3: #f4e9dd;
  --chart-4: #b9a8c4;
  --chart-5: #ff8a6b;
  --chart-6: #4fd191;

  --shadow-raised: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
  --gradient-glow: linear-gradient(120deg, #ffcf6b 0%, #ff7a45 45%, #ff3b57 100%);
  --gradient-glow-soft: radial-gradient(60% 60% at 50% 40%, rgba(255, 122, 69, 0.28), rgba(255, 59, 87, 0) 70%);
}

/*
 * app.css — Pabbly Email Marketing's own styling: the compose-window hero
 * collage, the builder panel dividers, the automation flow diagram, the two
 * warm/dark statement bands, and the once-on-load typewriter caret. Tokens
 * only, per theme.css.
 */

/* ---- Navbar: hamburger swap + mobile drawer --------------------------
   [data-nav-toggle] is a real <button> (app.js toggles .nav-open on the
   header and flips its own aria-expanded); the drawer and the icon swap
   both read off those two facts, so a screen reader and a keyboard get a
   real, labelled control instead of a bare checkbox. */
.icon-close { display: none; }
[data-nav-toggle][aria-expanded="true"] .icon-open { display: none; }
[data-nav-toggle][aria-expanded="true"] .icon-close { display: inline-flex; }

.drawer {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 30;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--canvas);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
}
.navbar.nav-open .drawer {
  display: flex;
  animation: fade-up 200ms var(--ease-out) both;
}
html.reduced-motion .navbar.nav-open .drawer { animation: none; }
/* Belt and braces: the drawer (and its toggle) exist for phones only. */
@media (min-width: 640px) {
  .drawer, .navbar.nav-open .drawer { display: none !important; }
}

/* ---- Hero collage --------------------------------------------------- */
.hero-collage {
  position: relative;
  padding-bottom: 3.5rem;
}

.hero-panel {
  position: absolute;
  width: 10.5rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--ink);
  z-index: 0;
}
.hero-panel-dnd { top: -1.75rem; left: -1.5rem; transform: rotate(-7deg); }
.hero-panel-rich { top: -1.25rem; right: -1.5rem; transform: rotate(6deg); }
.hero-panel-html { bottom: -2rem; left: 6%; transform: rotate(4deg); }

@media (max-width: 900px) {
  .hero-panel { width: 8rem; padding: 0.6rem 0.75rem; }
  .hero-panel-dnd { top: -1rem; left: -0.25rem; }
  .hero-panel-rich { top: -0.75rem; right: -0.25rem; }
  .hero-panel-html { bottom: -1.25rem; left: 2%; }
}
@media (max-width: 560px) {
  .hero-panel { width: 6.25rem; padding: 0.5rem 0.6rem; }
  .hero-panel .icon { display: none; }
}

.compose-card {
  isolation: isolate;
}
.compose-card::before {
  content: "";
  position: absolute;
  inset: -3rem -2rem;
  z-index: -1;
  background: var(--gradient-glow);
  filter: blur(64px);
  opacity: 0.32;
}

/* ---- Typewriter (the ONE thing that moves) --------------------------- */
.typewriter {
  display: inline-block;
}
.typewriter.is-typing {
  border-right: 2px solid currentColor;
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink {
  50% { border-color: transparent; }
}
html.reduced-motion .typewriter.is-typing {
  animation: none;
  border-right-color: transparent;
}

/* ---- Builder panels: flat blocks, hairline dividers, no card sameness */
.builder-panel + .builder-panel {
  border-top: 2px solid var(--ink);
}
@media (min-width: 640px) {
  .builder-panel + .builder-panel {
    border-top: 0;
    border-left: 2px solid var(--ink);
  }
}

/* ---- Automation flow diagram ------------------------------------------ */
.flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.flow-node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem;
  border: 2px solid var(--ink);
}
.flow-line {
  width: 2px;
  height: 1.5rem;
  background: var(--border-strong);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .flow { flex-direction: row; align-items: stretch; }
  .flow-line { width: 2rem; height: 2px; align-self: center; margin: 0; }
}

/* ---- Pricing band: warm ember-to-amber wash with a soft glow --------- */
.glow-band {
  position: relative;
  background: radial-gradient(120% 160% at 50% -10%, color-mix(in srgb, var(--accent) 22%, var(--surface-2)) 0%, var(--surface-2) 55%);
}
.glow-band::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background: var(--gradient-glow);
  filter: blur(96px);
  opacity: 0.22;
  z-index: 0;
}

/* ---- Dark closing band: contrasts against whichever mode is active --- */
.dark-band {
  position: relative;
}
.dark-band::before {
  content: "";
  position: absolute;
  inset: -20% 20% auto 20%;
  height: 60%;
  background: var(--gradient-glow);
  filter: blur(110px);
  opacity: 0.25;
  z-index: 0;
}