/*!
 * WP24h — Design System (Technical Precision)
 * Portado 1:1 do projeto Lovable/React (src/styles.css + src/routes/index.tsx).
 * Convenção: BEM leve com prefixo wp24h-. Mobile-first.
 */

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);

  --background: oklch(0.99 0.003 240);
  --surface: oklch(0.985 0.004 240);
  --surface-alt: oklch(0.965 0.006 240);
  --foreground: oklch(0.2 0.02 250);
  --ink: oklch(0.145 0.02 250);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.02 250);
  --brand: oklch(0.55 0.11 190);
  --brand-dark: oklch(0.44 0.1 190);
  --brand-soft: oklch(0.96 0.03 190);
  --brand-foreground: oklch(0.99 0.005 190);
  --muted: oklch(0.965 0.006 240);
  --muted-foreground: oklch(0.5 0.02 250);
  --accent-foreground: oklch(0.32 0.09 190);
  --success: oklch(0.62 0.14 155);
  --success-soft: oklch(0.955 0.04 155);
  --warning: oklch(0.72 0.15 70);
  --warning-soft: oklch(0.96 0.05 80);
  --danger: oklch(0.58 0.22 27);
  --danger-soft: oklch(0.96 0.04 27);
  --info: oklch(0.6 0.14 240);
  --info-soft: oklch(0.955 0.03 240);
  --border: oklch(0.92 0.006 240);

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 80rem;
  --shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 10px 25px -12px rgb(15 23 42 / 0.15);
  --shadow-xl: 0 20px 40px -18px rgb(15 23 42 / 0.18);
}

/* ============================================================
   2. Base / reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: color-mix(in oklab, var(--brand) 25%, transparent); color: var(--ink); }

/* ============================================================
   3. Layout helpers
   ============================================================ */
.wp-container { max-width: var(--container); margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 640px) { .wp-container { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .wp-container { padding-inline: 2rem; } }

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

/* ============================================================
   4. Botões
   ============================================================ */
.wp24h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .625rem 1rem; border-radius: .625rem; font-weight: 500; font-size: .9rem;
  border: 1px solid transparent; cursor: pointer; transition: all .15s ease;
  text-decoration: none; line-height: 1;
}
.wp24h-btn--brand { background: var(--brand); color: var(--brand-foreground); }
.wp24h-btn--brand:hover { background: var(--brand-dark); }
.wp24h-btn--outline { background: var(--card); color: var(--ink); border-color: var(--border); }
.wp24h-btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.wp24h-btn--dark { background: var(--ink); color: #fff; }
.wp24h-btn--dark:hover { background: color-mix(in oklab, var(--ink) 90%, transparent); }
.wp24h-btn--danger { background: var(--danger); color: #fff; }
.wp24h-btn--danger:hover { filter: brightness(.95); }
.wp24h-btn--ghost { background: transparent; color: var(--ink); }
.wp24h-btn--ghost:hover { background: var(--brand-soft); }
.wp24h-btn--light { background: #fff; color: var(--ink); }
.wp24h-btn--light:hover { background: color-mix(in oklab, #fff 90%, transparent); }
.wp24h-btn--outline-light {
  background: transparent; color: #fff; border-color: rgb(255 255 255 / .2);
}
.wp24h-btn--outline-light:hover { background: rgb(255 255 255 / .1); }
.wp24h-btn--lg { padding: .8rem 1.25rem; font-size: 1rem; }
.wp24h-btn--sm { padding: .4rem .7rem; font-size: .8rem; }
.wp24h-btn__icon { width: 16px; height: 16px; }

/* ============================================================
   5. Ícones (inline SVG stroke via currentColor)
   ============================================================ */
.wp24h-ico { width: 20px; height: 20px; stroke-width: 2; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.wp24h-ico--sm { width: 14px; height: 14px; }
.wp24h-ico--md { width: 18px; height: 18px; }
.wp24h-ico--lg { width: 24px; height: 24px; }

/* ============================================================
   6. Badges / pills
   ============================================================ */
.wp24h-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent;
}
.wp24h-badge--brand { background: var(--brand-soft); color: var(--accent-foreground); border-color: color-mix(in oklab, var(--brand) 20%, transparent); }
.wp24h-badge--danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, transparent); }
.wp24h-badge--warning { background: var(--warning-soft); color: var(--warning); }
.wp24h-badge--info { background: var(--info-soft); color: var(--info); }
.wp24h-badge--success { background: var(--success-soft); color: var(--success); }
.wp24h-badge--muted { background: var(--muted); color: var(--muted-foreground); }
.wp24h-badge--dark { background: var(--ink); color: #fff; }

.wp24h-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
}

.wp24h-demo-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1rem .5rem; border-radius: 999px;
  font-size: .625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--warning-soft); color: var(--warning);
  border: 1px solid color-mix(in oklab, var(--warning) 30%, transparent);
}
.wp24h-demo-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--warning);
}

.demo-notice {
  background: color-mix(in oklab, var(--warning-soft) 70%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--warning) 30%, transparent);
  color: var(--warning);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .5rem 1rem;
}
.demo-notice::before { content: "⚠  "; }

/* ============================================================
   7. Header
   ============================================================ */
.wp24h-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wp24h-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; height: 4rem;
}
.wp24h-header__left { display: flex; align-items: center; gap: 2rem; min-width: 0; }
.wp24h-header__nav { display: none; align-items: center; gap: 1.5rem; }
.wp24h-header__nav a {
  font-size: .875rem; font-weight: 500; color: var(--muted-foreground);
  transition: color .15s;
}
.wp24h-header__nav a:hover { color: var(--ink); }
.wp24h-header__nav a[aria-current="page"] { color: var(--brand); }
.wp24h-header__right { display: flex; align-items: center; gap: .5rem; }
.wp24h-header__login { display: none; font-size: .875rem; font-weight: 500; color: var(--muted-foreground); padding: .4rem .5rem; }
.wp24h-header__login:hover { color: var(--ink); }
.wp24h-header__cta { display: none; }
.wp24h-header__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; background: transparent; border: 0; border-radius: .5rem; color: var(--ink);
}
.wp24h-header__burger:hover { background: var(--brand-soft); }

@media (min-width: 640px) {
  .wp24h-header__login { display: inline-flex; }
  .wp24h-header__cta { display: inline-flex; }
}
@media (min-width: 1024px) {
  .wp24h-header__nav { display: flex; }
  .wp24h-header__burger { display: none; }
}

/* Second row: quick searches (desktop only) */
.wp24h-header__quick {
  display: none; border-top: 1px solid var(--border); background: var(--surface);
}
.wp24h-header__quick-inner {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0; font-size: .72rem; color: var(--muted-foreground);
}
.wp24h-header__quick-inner strong { font-weight: 500; }
.wp24h-header__quick-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.wp24h-header__quick-list a {
  border: 1px solid var(--border); background: var(--card);
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .68rem; font-weight: 500; color: var(--ink);
}
.wp24h-header__quick-list a:hover { border-color: var(--brand); color: var(--brand); }
@media (min-width: 768px) { .wp24h-header__quick { display: block; } }

/* Mobile drawer */
.wp24h-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.wp24h-drawer[data-open="true"] { visibility: visible; }
.wp24h-drawer__overlay {
  position: absolute; inset: 0; background: rgb(15 23 42 / .5);
  opacity: 0; transition: opacity .2s;
}
.wp24h-drawer[data-open="true"] .wp24h-drawer__overlay { opacity: 1; }
.wp24h-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(20rem, 90vw);
  background: var(--card); box-shadow: var(--shadow-xl);
  padding: 1.25rem; overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column; gap: 1rem;
}
.wp24h-drawer[data-open="true"] .wp24h-drawer__panel { transform: translateX(0); }
.wp24h-drawer__head { display: flex; align-items: center; justify-content: space-between; }
.wp24h-drawer__close {
  background: transparent; border: 0; padding: .4rem; border-radius: .5rem; color: var(--muted-foreground);
}
.wp24h-drawer__nav { display: flex; flex-direction: column; gap: .1rem; }
.wp24h-drawer__nav a {
  padding: .625rem .75rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 500; color: var(--ink);
}
.wp24h-drawer__nav a:hover { background: var(--brand-soft); }
.wp24h-drawer__actions {
  display: flex; flex-direction: column; gap: .5rem;
  border-top: 1px solid var(--border); padding-top: 1rem; margin-top: .5rem;
}
.wp24h-drawer__notice {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .75rem; border-radius: .5rem;
  background: color-mix(in oklab, var(--brand-soft) 60%, transparent);
  color: var(--accent-foreground); font-size: .72rem;
  margin-top: .5rem;
}

/* Logo */
.wp24h-logo { display: inline-flex; align-items: center; gap: .5rem; }
.wp24h-logo__mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: .5rem; background: var(--brand); color: var(--brand-foreground);
  box-shadow: var(--shadow-sm);
}
.wp24h-logo__word { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.wp24h-logo__word em { font-style: normal; color: var(--brand); }

/* ============================================================
   8. Hero
   ============================================================ */
.wp24h-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--brand-soft) 40%, transparent) 0%,
    var(--surface) 60%);
}
.wp24h-hero__inner { padding: 4rem 0; }
@media (min-width: 640px) { .wp24h-hero__inner { padding: 6rem 0; } }
.wp24h-hero__grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) {
  .wp24h-hero__grid { grid-template-columns: 1.15fr 1fr; align-items: center; }
}
.wp24h-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  background: #fff; box-shadow: var(--shadow-sm);
  padding: .3rem .75rem; border-radius: 999px;
  font-size: .72rem; font-weight: 500; color: var(--accent-foreground);
  margin-bottom: 1.25rem;
}
.wp24h-hero__badge-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.wp24h-hero__badge-dot::before, .wp24h-hero__badge-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--success);
}
.wp24h-hero__badge-dot::before { animation: wp24h-ping 1.4s cubic-bezier(0,0,.2,1) infinite; opacity: .7; }
@keyframes wp24h-ping {
  0% { transform: scale(1); opacity: .7; }
  75%, 100% { transform: scale(2); opacity: 0; }
}
.wp24h-hero__title {
  font-size: clamp(2rem, 4vw + 1rem, 3.75rem); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--ink);
}
.wp24h-hero__title em { font-style: normal; color: var(--brand); }
.wp24h-hero__lede {
  margin-top: 1.25rem; max-width: 36rem; font-size: 1.125rem;
  color: var(--muted-foreground);
}
.wp24h-hero__form {
  margin-top: 2rem; display: flex; flex-direction: column; gap: .5rem;
  max-width: 36rem;
  border: 1px solid var(--border); background: var(--card);
  border-radius: 1rem; padding: .5rem; box-shadow: var(--shadow-sm);
}
.wp24h-hero__form-input {
  display: flex; align-items: center; gap: .5rem; padding: 0 .5rem; flex: 1;
}
.wp24h-hero__form-input input {
  flex: 1; border: 0; background: transparent; outline: 0;
  padding: .75rem .25rem; font-size: .95rem;
}
@media (min-width: 640px) { .wp24h-hero__form { flex-direction: row; } }
.wp24h-hero__checks {
  margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem;
  font-size: .875rem; color: var(--muted-foreground);
}
.wp24h-hero__checks span { display: inline-flex; align-items: center; gap: .35rem; }
.wp24h-hero__checks svg { color: var(--success); }

/* Hero preview card */
.wp24h-hero-preview {
  border: 1px solid var(--border); border-radius: 1rem; background: var(--card);
  padding: 1.25rem;
  box-shadow: 0 20px 40px -20px color-mix(in oklab, var(--brand) 20%, transparent);
}
.wp24h-hero-preview__head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-bottom: .75rem;
}
.wp24h-hero-preview__label {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted-foreground);
}
.wp24h-hero-preview__label::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--success);
}
.wp24h-hero-preview__body { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.wp24h-hero-preview__demand {
  border: 1px solid var(--border); background: var(--surface);
  padding: 1rem; border-radius: .5rem;
}
.wp24h-hero-preview__demand p:first-child { font-size: .72rem; font-weight: 500; color: var(--muted-foreground); }
.wp24h-hero-preview__demand p:nth-child(2) { margin-top: .25rem; font-weight: 600; color: var(--ink); }
.wp24h-hero-preview__demand-meta {
  margin-top: .75rem; display: flex; align-items: center; justify-content: space-between; font-size: .72rem;
}
.wp24h-hero-preview__proposal {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); background: var(--card);
  padding: .75rem; border-radius: .5rem;
}
.wp24h-hero-preview__proposal-p { display: flex; align-items: center; gap: .75rem; }
.wp24h-hero-preview__avatar {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 999px; background: var(--brand-soft);
  font-size: .72rem; font-weight: 600; color: var(--accent-foreground);
}
.wp24h-hero-preview__proposal-name { font-size: .875rem; font-weight: 500; color: var(--ink); }
.wp24h-hero-preview__proposal-time { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; color: var(--muted-foreground); }
.wp24h-hero-preview__proposal-value { font-size: .875rem; font-weight: 600; color: var(--ink); }
.wp24h-hero-preview__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem; border-radius: .5rem;
  background: color-mix(in oklab, var(--brand-soft) 70%, transparent);
  color: var(--accent-foreground); font-size: .72rem;
}
.wp24h-hero-preview__foot span { display: inline-flex; align-items: center; gap: .5rem; }

/* ============================================================
   9. Portas de entrada (5 cards)
   ============================================================ */
.wp24h-portas { border-bottom: 1px solid var(--border); background: var(--surface); padding: 4rem 0; }
.wp24h-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem;
}
.wp24h-section__head h2 { margin-top: .5rem; font-size: 1.875rem; letter-spacing: -0.02em; }
.wp24h-section__link {
  display: none; align-items: center; gap: .25rem;
  font-size: .875rem; font-weight: 500; color: var(--brand);
}
.wp24h-section__link:hover { text-decoration: underline; }
@media (min-width: 640px) { .wp24h-section__link { display: inline-flex; } }

.wp24h-portas__grid {
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 768px) { .wp24h-portas__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wp24h-portas__grid { grid-template-columns: repeat(5, 1fr); } }
.wp24h-porta {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--card); border-radius: .75rem;
  padding: 1.25rem; text-decoration: none; color: inherit;
  transition: all .2s ease;
}
.wp24h-porta:hover {
  transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  box-shadow: var(--shadow-md);
}
.wp24h-porta__head { display: flex; align-items: center; justify-content: space-between; }
.wp24h-porta__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: .5rem; background: var(--brand-soft); color: var(--accent-foreground);
}
.wp24h-porta--sos .wp24h-porta__icon { background: var(--danger-soft); color: var(--danger); }
.wp24h-porta__sub { margin-top: 1rem; font-size: .68rem; font-weight: 500; letter-spacing: .1em; color: var(--muted-foreground); text-transform: uppercase; }
.wp24h-porta__title { margin-top: .25rem; font-weight: 600; color: var(--ink); }
.wp24h-porta__desc { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.wp24h-porta__cta { margin-top: 1rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 500; color: var(--brand); }

/* ============================================================
   10. Passos (Como funciona - cliente)
   ============================================================ */
.wp24h-passos { padding: 5rem 0; }
.wp24h-passos__intro { max-width: 40rem; }
.wp24h-passos__intro h2 { font-size: 1.875rem; margin-top: .5rem; letter-spacing: -0.02em; }
.wp24h-passos__intro p { margin-top: .75rem; color: var(--muted-foreground); }
.wp24h-passos__grid {
  margin-top: 2.5rem; display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .wp24h-passos__grid { grid-template-columns: repeat(3, 1fr); } }
.wp24h-passo {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); background: var(--card);
  border-radius: 1rem; padding: 1.5rem;
}
.wp24h-passo__n {
  position: absolute; top: -8px; right: -8px; user-select: none;
  font-family: var(--font-mono); font-size: 4rem; font-weight: 600;
  color: var(--brand-soft);
}
.wp24h-passo__icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: .5rem; background: var(--brand); color: var(--brand-foreground);
}
.wp24h-passo h3 { margin-top: 1rem; font-weight: 600; color: var(--ink); }
.wp24h-passo p { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }

/* ============================================================
   11. SOS banner
   ============================================================ */
.wp24h-sos {
  border-top: 1px solid color-mix(in oklab, var(--danger) 15%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--danger) 15%, transparent);
  background: color-mix(in oklab, var(--danger-soft) 40%, transparent);
  padding: 3.5rem 0;
}
.wp24h-sos__inner {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 1.5rem;
}
@media (min-width: 768px) {
  .wp24h-sos__inner { flex-direction: row; align-items: center; }
}
.wp24h-sos__body { max-width: 36rem; }
.wp24h-sos__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
  background: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  color: var(--danger); text-transform: uppercase;
}
.wp24h-sos h2 { margin-top: .75rem; font-size: 1.5rem; letter-spacing: -0.02em; }
@media (min-width: 640px) { .wp24h-sos h2 { font-size: 1.875rem; } }
.wp24h-sos p { margin-top: .5rem; color: var(--muted-foreground); }
.wp24h-sos__actions { display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 640px) { .wp24h-sos__actions { flex-direction: row; } }

/* ============================================================
   12. Cards de oportunidade / profissional
   ============================================================ */
.wp24h-section-alt { background: var(--surface-alt); padding: 5rem 0; }
.wp24h-section { padding: 5rem 0; }
.wp24h-cards-3 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .wp24h-cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wp24h-cards-3 { grid-template-columns: repeat(3, 1fr); } }
.wp24h-cards-2 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .wp24h-cards-2 { grid-template-columns: repeat(2, 1fr); } }

.wp24h-op {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--card);
  border-radius: .75rem; padding: 1.5rem;
  transition: all .2s ease; text-decoration: none; color: inherit;
}
.wp24h-op:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand) 40%, transparent); box-shadow: var(--shadow-md); }
.wp24h-op__head { display: flex; align-items: center; justify-content: space-between; }
.wp24h-op__ref { margin-top: .75rem; font-family: var(--font-mono); font-size: .68rem; color: var(--muted-foreground); }
.wp24h-op__title { margin-top: .25rem; font-size: 1.125rem; line-height: 1.35; font-weight: 600; color: var(--ink); }
.wp24h-op__desc {
  margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wp24h-op__foot {
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.wp24h-op__foot p:first-child { font-size: .625rem; font-weight: 500; letter-spacing: .08em; color: var(--muted-foreground); text-transform: uppercase; }
.wp24h-op__price { font-size: .875rem; font-weight: 600; color: var(--ink); }
.wp24h-op__meta { text-align: right; font-size: .72rem; color: var(--muted-foreground); }

.wp24h-pro {
  position: relative; display: flex; gap: 1.25rem;
  border: 1px solid var(--border); background: var(--card);
  border-radius: 1rem; padding: 1.25rem;
}
.wp24h-pro__avatar-wrap { position: relative; flex-shrink: 0; }
.wp24h-pro__avatar {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: .75rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: var(--brand-foreground); font-size: 1.125rem; font-weight: 600;
}
.wp24h-pro__online {
  position: absolute; right: -4px; bottom: -4px;
  display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 999px; background: var(--success); border: 2px solid var(--card);
}
.wp24h-pro__body { min-width: 0; flex: 1; }
.wp24h-pro__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wp24h-pro__name { font-weight: 600; color: var(--ink); }
.wp24h-pro__title { font-size: .875rem; color: var(--muted-foreground); }
.wp24h-pro__location { margin-top: .25rem; font-size: .72rem; color: var(--muted-foreground); }
.wp24h-pro__tags { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.wp24h-pro__tags span {
  background: var(--muted); color: var(--muted-foreground);
  padding: .1rem .5rem; border-radius: 999px;
  font-size: .625rem; font-weight: 500;
}
.wp24h-pro__foot {
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; font-size: .72rem;
}
.wp24h-pro__stats { display: flex; align-items: center; gap: 1rem; }
.wp24h-pro__stats strong { color: var(--ink); }

/* ============================================================
   13. Segurança (dark)
   ============================================================ */
.wp24h-seg { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: 5rem 0; }
.wp24h-seg__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .wp24h-seg__grid { grid-template-columns: 1fr 1.2fr; align-items: center; } }
.wp24h-seg__pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .15); background: rgb(255 255 255 / .05);
  font-size: .72rem; font-weight: 500;
}
.wp24h-seg__pill svg { color: var(--brand); }
.wp24h-seg h2 { color: #fff; font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); margin-top: 1rem; letter-spacing: -0.02em; }
.wp24h-seg__lede { margin-top: 1rem; color: rgb(255 255 255 / .7); max-width: 36rem; }
.wp24h-seg__actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.wp24h-seg__pillars { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wp24h-seg__pillars { grid-template-columns: 1fr 1fr; } }
.wp24h-seg__card {
  border: 1px solid rgb(255 255 255 / .1); background: rgb(255 255 255 / .05);
  border-radius: .75rem; padding: 1.25rem;
}
.wp24h-seg__card svg { color: var(--brand); }
.wp24h-seg__card h3 { color: #fff; margin-top: .75rem; font-weight: 600; }
.wp24h-seg__card p { margin-top: .25rem; font-size: .875rem; color: rgb(255 255 255 / .7); }

/* ============================================================
   14. Área do profissional
   ============================================================ */
.wp24h-pro-section { padding: 5rem 0; }
.wp24h-pro-section__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .wp24h-pro-section__grid { grid-template-columns: 1fr 1fr; align-items: center; } }
.wp24h-pro-section h2 { margin-top: .5rem; font-size: 1.875rem; letter-spacing: -0.02em; }
.wp24h-pro-section__lede { margin-top: .75rem; max-width: 36rem; color: var(--muted-foreground); }
.wp24h-pro-section__list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.wp24h-pro-section__list li { display: flex; gap: .75rem; font-size: .875rem; color: var(--ink); }
.wp24h-pro-section__list svg { color: var(--success); flex-shrink: 0; margin-top: 2px; }
.wp24h-pro-section__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.wp24h-pro-panel {
  border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand-soft) 50%, transparent), var(--surface));
}
.wp24h-pro-panel__inner {
  border: 1px solid var(--border); background: var(--card);
  border-radius: .75rem; padding: 1.25rem; box-shadow: var(--shadow-sm);
}
.wp24h-pro-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem;
}
.wp24h-pro-panel__head span:first-child { font-family: var(--font-mono); color: var(--muted-foreground); }
.wp24h-pro-panel__stats {
  margin-top: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; text-align: center;
}
.wp24h-pro-panel__stat { border: 1px solid var(--border); background: var(--surface); padding: .75rem; border-radius: .5rem; }
.wp24h-pro-panel__stat p:first-child { font-size: .625rem; font-weight: 500; letter-spacing: .06em; color: var(--muted-foreground); text-transform: uppercase; }
.wp24h-pro-panel__stat p:last-child { margin-top: .25rem; font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.wp24h-pro-panel__list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.wp24h-pro-panel__list p.head { font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--muted-foreground); text-transform: uppercase; }
.wp24h-pro-panel__op {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); background: var(--card);
  padding: .75rem; border-radius: .5rem; font-size: .875rem;
}
.wp24h-pro-panel__op div { min-width: 0; flex: 1; }
.wp24h-pro-panel__op p:first-child { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp24h-pro-panel__op p:last-child { font-size: .72rem; color: var(--muted-foreground); }

/* ============================================================
   15. IA e automação
   ============================================================ */
.wp24h-ia {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--brand-soft) 40%, transparent); padding: 4rem 0;
}
.wp24h-ia__grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .wp24h-ia__grid { grid-template-columns: 1fr 1.4fr; align-items: center; } }
.wp24h-ia__pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; padding: .3rem .75rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; color: var(--accent-foreground);
}
.wp24h-ia h2 { margin-top: 1rem; font-size: 1.875rem; letter-spacing: -0.02em; }
.wp24h-ia__lede { margin-top: .75rem; color: var(--muted-foreground); }
.wp24h-ia__cards { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wp24h-ia__cards { grid-template-columns: 1fr 1fr; } }
.wp24h-ia__card {
  border: 1px solid var(--border); background: var(--card);
  padding: 1rem; border-radius: .75rem;
}
.wp24h-ia__card h3 { font-weight: 600; color: var(--ink); }
.wp24h-ia__card p { margin-top: .25rem; font-size: .875rem; color: var(--muted-foreground); }

/* ============================================================
   16. Blog (home)
   ============================================================ */
.wp24h-post {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); background: var(--card);
  border-radius: .75rem; padding: 1.5rem; text-decoration: none; color: inherit;
  transition: box-shadow .2s;
}
.wp24h-post:hover { box-shadow: var(--shadow-md); }
.wp24h-post__cat {
  align-self: flex-start; background: var(--brand-soft); color: var(--accent-foreground);
  padding: .1rem .5rem; border-radius: 999px;
  font-size: .625rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.wp24h-post__title { margin-top: .75rem; font-size: 1.125rem; line-height: 1.35; font-weight: 600; color: var(--ink); }
.wp24h-post__excerpt { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.wp24h-post__more { margin-top: 1rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 500; color: var(--brand); }

/* ============================================================
   17. Duplo CTA
   ============================================================ */
.wp24h-duplo { padding: 5rem 0; }
.wp24h-duplo__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .wp24h-duplo__grid { grid-template-columns: 1fr 1fr; } }
.wp24h-duplo__card {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2rem; border-radius: 1rem;
}
.wp24h-duplo__card--client {
  background: var(--brand-soft); border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
}
.wp24h-duplo__card--client h3 { color: var(--ink); font-size: 1.5rem; margin-top: 1rem; }
.wp24h-duplo__card--client p { margin-top: .5rem; font-size: .875rem; color: var(--accent-foreground); }
.wp24h-duplo__card--client svg { color: var(--brand); }

.wp24h-duplo__card--pro { background: var(--ink); color: #fff; border: 1px solid var(--ink); }
.wp24h-duplo__card--pro h3 { color: #fff; font-size: 1.5rem; margin-top: 1rem; }
.wp24h-duplo__card--pro p { margin-top: .5rem; font-size: .875rem; color: rgb(255 255 255 / .7); }
.wp24h-duplo__card--pro svg { color: var(--brand); }

.wp24h-duplo__btn { margin-top: 1.5rem; align-self: flex-start; }

/* ============================================================
   18. Parceiros
   ============================================================ */
.wp24h-parc {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface-alt); padding: 3rem 0;
}
.wp24h-parc__title {
  text-align: center; font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; color: var(--muted-foreground); text-transform: uppercase;
}
.wp24h-parc__grid {
  margin-top: 1.5rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .wp24h-parc__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .wp24h-parc__grid { grid-template-columns: repeat(8, 1fr); } }
.wp24h-parc__cell {
  display: grid; place-items: center; height: 48px;
  border: 1px solid var(--border); background: var(--card); border-radius: .375rem;
  font-size: .875rem; font-weight: 500; color: var(--muted-foreground);
}

/* ============================================================
   19. FAQ
   ============================================================ */
.wp24h-faq { padding: 5rem 0; }
.wp24h-faq__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .wp24h-faq__grid { grid-template-columns: 1fr 1.6fr; } }
.wp24h-faq h2 { margin-top: .5rem; font-size: 1.875rem; letter-spacing: -0.02em; }
.wp24h-faq__lede { margin-top: .75rem; color: var(--muted-foreground); }
.wp24h-faq__lede a { color: var(--brand); font-weight: 500; }
.wp24h-faq__lede a:hover { text-decoration: underline; }
.wp24h-accordion > details {
  border-bottom: 1px solid var(--border);
}
.wp24h-accordion > details > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; font-size: 1rem; font-weight: 500; color: var(--ink);
  gap: 1rem;
}
.wp24h-accordion > details > summary::-webkit-details-marker { display: none; }
.wp24h-accordion > details > summary::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0;
  border-right: 2px solid var(--muted-foreground);
  border-bottom: 2px solid var(--muted-foreground);
  transform: rotate(45deg); transition: transform .2s ease;
}
.wp24h-accordion > details[open] > summary::after { transform: rotate(-135deg); }
.wp24h-accordion > details > div {
  padding: 0 0 1.25rem 0; color: var(--muted-foreground); font-size: .95rem;
}

/* ============================================================
   20. Footer
   ============================================================ */
.wp24h-footer {
  margin-top: 4rem; border-top: 1px solid var(--border);
  background: var(--surface-alt);
}
.wp24h-footer__inner { padding: 3.5rem 0; }
.wp24h-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wp24h-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .wp24h-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.wp24h-footer__brand p { margin-top: 1rem; max-width: 20rem; font-size: .875rem; color: var(--muted-foreground); }
.wp24h-footer__badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem;
  padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  background: var(--brand-soft); font-size: .72rem; font-weight: 500; color: var(--accent-foreground);
}
.wp24h-footer__col h4 {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.wp24h-footer__col ul { margin-top: 1rem; display: flex; flex-direction: column; gap: .625rem; }
.wp24h-footer__col a { font-size: .875rem; color: var(--muted-foreground); }
.wp24h-footer__col a:hover { color: var(--brand); }
.wp24h-footer__bar {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 1rem;
  font-size: .72rem; color: var(--muted-foreground);
}
@media (min-width: 640px) { .wp24h-footer__bar { flex-direction: row; align-items: center; justify-content: space-between; } }
.wp24h-footer__bar code {
  margin-left: .5rem; background: var(--muted); color: var(--muted-foreground);
  font-family: var(--font-mono); font-size: .625rem;
  padding: .1rem .4rem; border-radius: .25rem;
}
.wp24h-footer__disclaimer { max-width: 26rem; text-align: right; }

/* ============================================================
   21. PageHeader (usado por templates internos, ex: single-landing)
   ============================================================ */
.wp24h-pageheader {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--brand-soft) 40%, transparent), var(--surface));
}
.wp24h-pageheader--danger {
  background: linear-gradient(to bottom, color-mix(in oklab, var(--danger-soft) 40%, transparent), var(--surface));
}
.wp24h-pageheader__inner { padding: 3.5rem 0; }
@media (min-width: 640px) { .wp24h-pageheader__inner { padding: 5rem 0; } }
.wp24h-pageheader h1 { font-size: clamp(1.75rem, 3vw + 1rem, 3rem); max-width: 48rem; letter-spacing: -0.02em; }
.wp24h-pageheader p { margin-top: 1rem; max-width: 36rem; font-size: 1.125rem; color: var(--muted-foreground); }

/* Landing (resolver) 3 blocos */
.wp24h-landing__blocos { display: grid; gap: 2rem; grid-template-columns: 1fr; padding: 3.5rem 0; }
@media (min-width: 1024px) { .wp24h-landing__blocos { grid-template-columns: repeat(3, 1fr); } }
.wp24h-landing__bloco {
  border: 1px solid var(--border); background: var(--card);
  border-radius: 1rem; padding: 1.5rem;
}
.wp24h-landing__bloco h3 { font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.wp24h-landing__bloco ul { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.wp24h-landing__bloco li { display: flex; gap: .5rem; align-items: flex-start; }
.wp24h-landing__bloco svg { color: var(--brand); flex-shrink: 0; margin-top: 2px; }
.wp24h-landing__faq {
  border-top: 1px solid var(--border); background: var(--surface-alt);
  padding: 3.5rem 0;
}
.wp24h-landing__faq-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; }
.wp24h-landing__faq-item {
  border: 1px solid var(--border); background: var(--card);
  border-radius: .75rem; padding: 1.25rem;
}
.wp24h-landing__faq-item p:first-child { font-weight: 600; color: var(--ink); }
.wp24h-landing__faq-item p:last-child { margin-top: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.wp24h-landing__cta {
  padding: 3.5rem 0;
}
.wp24h-landing__cta-box {
  border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent);
  background: var(--brand-soft); border-radius: 1rem; padding: 2rem; text-align: center;
}
.wp24h-landing__cta-box h2 { font-size: 1.5rem; }
.wp24h-landing__cta-box p { margin: .5rem auto 0; max-width: 32rem; font-size: .875rem; color: var(--muted-foreground); }

/* ============================================================
   22. Prose (single post)
   ============================================================ */
.wp24h-prose { max-width: 44rem; margin: 0 auto; padding: 3rem 0; }
.wp24h-prose h1 { font-size: 2rem; letter-spacing: -0.02em; margin-bottom: 1rem; }
.wp24h-prose h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: .75rem; }
.wp24h-prose h3 { font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: .5rem; }
.wp24h-prose p { margin: 1rem 0; color: var(--foreground); line-height: 1.7; }
.wp24h-prose ul { margin: 1rem 0; padding-left: 1.5rem; list-style: disc; }
.wp24h-prose ol { margin: 1rem 0; padding-left: 1.5rem; list-style: decimal; }
.wp24h-prose a { color: var(--brand); text-decoration: underline; }
.wp24h-prose__meta {
  display: flex; flex-wrap: wrap; gap: .75rem;
  font-size: .72rem; color: var(--muted-foreground); margin-bottom: 1.5rem;
}
.wp24h-prose__meta span { display: inline-flex; align-items: center; gap: .25rem; }

/* Utility */
.wp24h-hide-mobile { display: none; }
@media (min-width: 640px) { .wp24h-hide-mobile { display: initial; } }

/* Print reset */
@media print {
  .wp24h-header, .wp24h-footer, .demo-notice { display: none; }
}

/* ============================================================
   23. Marketplace internal routes — ported from Lovable React
   ============================================================ */
.wp24h-market-section{padding:3rem 0 4.5rem;background:var(--surface)}
.wp24h-market-layout{display:grid;gap:2rem;align-items:start}
@media(min-width:1024px){.wp24h-market-layout{grid-template-columns:280px minmax(0,1fr)}}
.wp24h-filter-card{border:1px solid var(--border);background:var(--card);border-radius:.875rem;padding:1.25rem;display:flex;flex-direction:column;gap:1.5rem;box-shadow:var(--shadow-sm)}
@media(min-width:1024px){.wp24h-filter-card{position:sticky;top:8rem}}
.wp24h-filter-label,.wp24h-filter-group h3{display:block;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);margin-bottom:.7rem}
.wp24h-input,.wp24h-select{width:100%;border:1px solid var(--border);background:var(--card);border-radius:.5rem;padding:.58rem .7rem;font-size:.85rem;outline:none}
.wp24h-input:focus,.wp24h-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 12%,transparent)}
.wp24h-filter-group{display:flex;flex-direction:column;gap:.55rem}.wp24h-filter-group h3{margin:0 0 .15rem}.wp24h-filter-group label{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--ink);cursor:pointer}.wp24h-filter-group input{accent-color:var(--brand);width:16px;height:16px}
.wp24h-filter-clear{width:100%}.wp24h-list-toolbar{min-height:2rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--muted-foreground)}.wp24h-list-toolbar>span{display:flex;align-items:center;gap:.4rem}.wp24h-list-toolbar .wp24h-select{width:auto;padding:.35rem .55rem;font-size:.75rem}
.wp24h-opp-list{display:flex;flex-direction:column;gap:1rem}.wp24h-opp-card{border:1px solid var(--border);background:var(--card);border-radius:.875rem;padding:1.25rem;transition:border-color .15s,box-shadow .15s}.wp24h-opp-card:hover{border-color:color-mix(in oklab,var(--brand) 40%,var(--border));box-shadow:var(--shadow-sm)}
.wp24h-opp-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.wp24h-opp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.62rem;text-transform:uppercase;letter-spacing:.045em;color:var(--muted-foreground);font-weight:600}.wp24h-opp-card h3{margin-top:.5rem;font-size:1.05rem}.wp24h-opp-card h3 a:hover{color:var(--brand)}.wp24h-opp-card__desc{margin-top:.7rem;font-size:.86rem;color:var(--muted-foreground);line-height:1.55}.wp24h-opp-card__foot{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}.wp24h-opp-stats{display:flex;flex-wrap:wrap;gap:1.5rem}.wp24h-opp-stats div{display:flex;flex-direction:column}.wp24h-opp-stats small{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted-foreground)}.wp24h-opp-stats strong{font-size:.82rem;color:var(--ink)}
.wp24h-empty{border:1px dashed var(--border);background:var(--card);border-radius:.875rem;padding:2.25rem;text-align:center;font-size:.85rem;color:var(--muted-foreground)}.wp24h-empty a{color:var(--brand);font-weight:600}.wp24h-empty--inline{margin-top:2rem}.wp24h-empty--cta{margin-top:2rem}.wp24h-empty--cta .wp24h-btn{margin-top:1rem;color:#fff}
.wp24h-pro-grid{display:grid;gap:1rem}@media(min-width:640px){.wp24h-pro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.wp24h-pro-card{display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);border-radius:.875rem;padding:1.25rem}.wp24h-pro-card__top{display:flex;align-items:flex-start;gap:1rem}.wp24h-avatar-wrap{position:relative;flex:0 0 auto}.wp24h-avatar{width:56px;height:56px;display:grid;place-items:center;border-radius:.75rem;background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;font-weight:700}.wp24h-online-dot{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;border:2px solid var(--card);background:var(--success)}.wp24h-pro-card__identity{min-width:0;flex:1}.wp24h-pro-card__name{display:flex;align-items:center;gap:.35rem}.wp24h-pro-card__name h3{font-size:.95rem}.wp24h-verified{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--info-soft);color:var(--info);font-size:.65rem;font-weight:800}.wp24h-pro-card__identity p{font-size:.8rem;color:var(--muted-foreground)}.wp24h-pro-card__identity small{font-size:.72rem;color:var(--muted-foreground)}.wp24h-pro-card__bio{margin-top:1rem;min-height:3.9em;font-size:.83rem;color:var(--muted-foreground)}.wp24h-tag-list{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}.wp24h-tag-list span{border-radius:999px;background:var(--muted);padding:.18rem .48rem;font-size:.62rem;font-weight:500;color:var(--muted-foreground)}.wp24h-pro-card__foot{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1rem}.wp24h-pro-card__foot>div{display:flex;align-items:center;gap:.8rem;font-size:.72rem}.wp24h-pro-card__foot span{color:var(--muted-foreground)}
.wp24h-category-list{display:flex;flex-direction:column;gap:1rem}.wp24h-category-row{display:block;border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1.5rem;transition:box-shadow .15s,border-color .15s}.wp24h-category-row:hover{box-shadow:var(--shadow-md);border-color:color-mix(in oklab,var(--brand) 30%,var(--border))}.wp24h-category-row__head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem}.wp24h-category-row__identity{display:flex;align-items:flex-start;gap:1rem}.wp24h-category-icon{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border-radius:.75rem;background:var(--brand-soft);color:var(--accent-foreground)}.wp24h-category-row__identity p{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--brand)}.wp24h-category-row__identity h2{font-size:1.15rem}.wp24h-category-row__identity span{display:block;margin-top:.15rem;max-width:44rem;font-size:.82rem;color:var(--muted-foreground)}.wp24h-category-row__head>strong{font-size:.75rem;color:var(--brand);font-weight:600}.wp24h-tag-list--bordered{margin-top:1.1rem}.wp24h-tag-list--bordered span{background:var(--surface);border:1px solid var(--border);padding:.2rem .55rem}.wp24h-tag-list--bordered .wp24h-tag-more{background:var(--brand-soft);border-color:transparent;color:var(--accent-foreground);font-weight:700}
.wp24h-category-detail{display:grid;gap:2.5rem}@media(min-width:1024px){.wp24h-category-detail{grid-template-columns:1.4fr 1fr}.wp24h-category-detail aside{position:sticky;top:8rem;align-self:start}}.wp24h-category-detail h2{font-size:1.25rem}.wp24h-lede-small{margin-top:.2rem;color:var(--muted-foreground);font-size:.85rem}.wp24h-subcategory-grid{display:grid;gap:.55rem;margin-top:1.5rem}@media(min-width:640px){.wp24h-subcategory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.wp24h-subcategory-grid a{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--border);background:var(--card);border-radius:.6rem;padding:.75rem 1rem;font-size:.83rem}.wp24h-subcategory-grid a:hover{border-color:var(--brand);background:color-mix(in oklab,var(--brand-soft) 40%,var(--card))}.wp24h-subcategory-grid b{color:var(--brand)}.wp24h-category-cta,.wp24h-other-cats{border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1.5rem}.wp24h-category-cta{border-color:color-mix(in oklab,var(--brand) 20%,var(--border));background:var(--brand-soft)}.wp24h-category-cta h3{font-size:1.05rem}.wp24h-category-cta p{margin:.45rem 0 1rem;font-size:.83rem;color:var(--accent-foreground)}.wp24h-other-cats{margin-top:1rem;display:flex;flex-direction:column;gap:.6rem}.wp24h-other-cats h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted-foreground);margin-bottom:.25rem}.wp24h-other-cats a{font-size:.83rem}.wp24h-other-cats a:hover{color:var(--brand)}
@media(max-width:639px){.wp24h-opp-card__foot{align-items:stretch}.wp24h-opp-card__foot .wp24h-btn{width:100%}.wp24h-opp-stats{width:100%;justify-content:space-between}.wp24h-category-row__identity{width:100%}.wp24h-category-icon{width:42px;height:42px}.wp24h-category-row__head>strong{margin-left:58px}.wp24h-pro-card__foot{align-items:flex-end}}

.wp24h-demand-detail{display:grid;gap:2rem}@media(min-width:1024px){.wp24h-demand-detail{grid-template-columns:minmax(0,1fr) 360px}.wp24h-unlock-card{position:sticky;top:8rem;align-self:start}}.wp24h-back-link{display:inline-flex;margin-bottom:1rem;font-size:.82rem;color:var(--muted-foreground)}.wp24h-back-link:hover{color:var(--brand)}.wp24h-detail-card{border:1px solid var(--border);background:var(--card);border-radius:1rem;padding:1.5rem}@media(min-width:640px){.wp24h-detail-card{padding:2rem}}.wp24h-detail-badges{display:flex;flex-wrap:wrap;gap:.45rem}.wp24h-detail-card h2{margin-top:1rem;font-size:1.4rem}.wp24h-detail-copy{margin-top:.75rem;color:var(--muted-foreground);line-height:1.65}.wp24h-detail-copy p{margin:.7rem 0}.wp24h-detail-stats{display:grid;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}@media(min-width:640px){.wp24h-detail-stats{grid-template-columns:repeat(3,1fr)}}.wp24h-detail-stats dt{font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground)}.wp24h-detail-stats dd{margin:.25rem 0 0;font-weight:600;color:var(--ink)}.wp24h-client-card{margin-top:1rem}.wp24h-client-card h3{font-size:1rem}.wp24h-client-card>div{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.65rem;font-size:.84rem;color:var(--muted-foreground)}.wp24h-client-card p{margin-top:.65rem;font-size:.72rem;color:var(--muted-foreground)}.wp24h-unlock-card{border:1px solid color-mix(in oklab,var(--brand) 22%,var(--border));background:var(--card);border-radius:1rem;padding:1.5rem}.wp24h-unlock-card__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}.wp24h-unlock-card__top>span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand)}.wp24h-unlock-card__top strong{display:flex;align-items:center;gap:.3rem;background:var(--brand-soft);color:var(--accent-foreground);padding:.2rem .55rem;border-radius:999px;font-size:.72rem}.wp24h-unlock-card>p{margin-top:.8rem;font-size:.83rem;color:var(--muted-foreground)}.wp24h-unlock-info{margin:1rem 0;padding:.75rem;border:1px solid var(--border);background:var(--surface);border-radius:.55rem;display:flex;flex-direction:column;gap:.35rem;font-size:.72rem;color:var(--muted-foreground)}.wp24h-btn--block{width:100%}.wp24h-protected-link{display:block;margin-top:.75rem;text-align:center;font-size:.7rem;color:var(--brand)}#wp24h-contact{margin-top:1rem}.wp24h-contact-box{border:1px solid color-mix(in oklab,var(--success) 30%,var(--border));background:var(--success-soft);border-radius:.75rem;padding:1rem}.wp24h-contact-box h3{font-size:.95rem}.wp24h-contact-box p{margin-top:.35rem;font-size:.8rem}