/* iTazell — static mirror of the Lovable design system (src/styles.css)
   Self-contained plain CSS: design tokens, component classes ported verbatim,
   and the Tailwind utilities used by the pages compiled into real rules. */

/* ── Tokens ── */
:root {
  --radius: 0.75rem;
  --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);
  --radius-3xl: calc(var(--radius) + 12px);

  /* Brand */
  --brand-amber: #FDAA3E;
  --brand-ink: #1a1a1a;
  --brand-night: #050d0a;

  --background: #fbfaf8;
  --foreground: #1a1a1a;
  --card: #ffffff;
  --card-foreground: #1a1a1a;
  --primary: #FDAA3E;
  --primary-foreground: #1a1a1a;
  --secondary: rgba(0, 0, 0, 0.04);
  --muted: rgba(0, 0, 0, 0.04);
  --muted-foreground: #56534e;
  --accent: rgba(253, 170, 62, 0.16);
  --accent-foreground: #4a3208;
  --destructive: #b3261e;
  --border: rgba(0, 0, 0, 0.1);
  --input: rgba(0, 0, 0, 0.12);
  --ring: #b9791a;

  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.5;
}
h1, h2, h3, p, ul, ol, hr, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { background-color: var(--accent); color: var(--foreground); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* The brand name is never uppercased, anywhere. */
.brand { text-transform: none !important; font-variant: normal; }

/* ── Building blocks (ported verbatim) ── */

.hero-band {
  background-color: var(--brand-night);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.hero-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(5, 13, 10, 0.92) 0%,
    rgba(5, 13, 10, 0.72) 38%,
    rgba(5, 13, 10, 0.35) 70%,
    rgba(5, 13, 10, 0.15) 100%
  );
  z-index: 1;
}

.parachute-wrap {
  position: absolute;
  top: 11%;
  right: 6%;
  width: 86px;
  height: 99px;
  pointer-events: none;
  z-index: 5;
  opacity: 0.95;
}
.parachute-svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .parachute-svg { animation: para-drift 32s ease-in-out infinite; }
}
@keyframes para-drift {
  0%, 100% { transform: translateY(-18px) translateX(0) rotate(0deg); }
  25% { transform: translateY(8px) translateX(8px) rotate(1.5deg); }
  50% { transform: translateY(26px) translateX(-5px) rotate(-2deg); }
  75% { transform: translateY(2px) translateX(6px) rotate(1deg); }
}
@media (max-width: 640px) {
  .parachute-wrap { width: 48px; height: 55px; top: 9%; right: 3%; }
}

.hero-glow, .hero-bubble { position: absolute; pointer-events: none; z-index: 2; }
.hero-glow {
  top: -30%;
  left: 50%;
  width: min(900px, 140vw);
  height: min(900px, 140vw);
  transform: translateX(-50%);
  background: radial-gradient(
    circle at center,
    rgba(253, 170, 62, 0.24) 0%,
    rgba(253, 170, 62, 0.09) 38%,
    rgba(5, 13, 10, 0) 68%
  );
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #a06a12;
}
.hero-band .eyebrow { color: var(--brand-amber); }

.card-surface {
  border-radius: var(--radius-2xl);
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background-color: var(--brand-amber);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.875rem 1.5rem;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), filter 200ms ease;
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.985); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  background-color: #ffffff;
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  transition: background-color 180ms ease, transform 180ms ease;
}
.btn-secondary:hover { background-color: rgba(0, 0, 0, 0.04); }
.btn-secondary:active { transform: scale(0.985); }

.amber-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 9999px;
  background-color: rgba(253, 170, 62, 0.18);
  border: 1px solid rgba(253, 170, 62, 0.5);
  color: #6b4508;
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

.field-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--foreground); }
.field-label .optional { font-weight: 400; color: var(--muted-foreground); }
.field-help { display: block; font-size: 0.8125rem; color: var(--muted-foreground); margin-top: 0.125rem; }
.field-input {
  margin-top: 0.5rem;
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--input);
  background-color: #ffffff;
  padding: 0.7rem 0.85rem;
  font-size: 0.9375rem;
  color: var(--foreground);
}
.field-input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
textarea.field-input { resize: vertical; }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-revealed { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ── Logo (measured geometry) ── */
.logo {
  display: block;
  overflow: visible;
  color: currentColor;
}
.logo .logo-word {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 700;
  font-size: 248px;
  letter-spacing: -1px;
  fill: currentColor;
}
.logo .stem { fill: currentColor; }
.logo .tittle { fill: var(--brand-amber); }

@keyframes dive-word {
  0% { transform: translateY(-26px); opacity: 0; }
  60% { transform: translateY(3px); opacity: 1; }
  80% { transform: translateY(-1px); }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes dive-dot {
  0% { transform: translateY(-900px); opacity: 0; }
  10% { opacity: 1; }
  60% { transform: translateY(-64px); }
  100% { transform: translateY(0); }
}
@keyframes unread {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.22); opacity: 0.86; }
}
@media (prefers-reduced-motion: no-preference) {
  .logo-animated .logo-word,
  .logo-animated .stem {
    animation: dive-word 1050ms cubic-bezier(0.22, 1, 0.28, 1) both;
  }
  .logo-animated .tittle {
    transform-box: fill-box;
    transform-origin: center;
    animation:
      dive-dot 1750ms 180ms cubic-bezier(0.12, 0.82, 0.16, 1) both,
      unread 3.2s 2300ms ease-in-out infinite;
  }
}

@keyframes fade-up-blur {
  from { transform: translateY(16px); opacity: 0; filter: blur(4px); }
  to { transform: translateY(0); opacity: 1; filter: blur(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .animate-fade-up-blur { animation: fade-up-blur 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── Marketplace layout language ── */
.hero-bubble {
  border-radius: 9999px;
  filter: blur(2px);
  background: radial-gradient(
    circle at center,
    rgba(253, 170, 62, 0.2) 0%,
    rgba(253, 170, 62, 0.08) 42%,
    rgba(5, 13, 10, 0) 70%
  );
}
.hero-bubble-a { top: -10%; left: -12%; width: min(560px, 90vw); height: min(560px, 90vw); }
.hero-bubble-b { bottom: -30%; right: -14%; width: min(620px, 100vw); height: min(620px, 100vw); }
@keyframes bubble-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4%, -6%, 0) scale(1.08); }
}
@keyframes bubble-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
  50% { transform: translate3d(-6%, 5%, 0) scale(0.94); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bubble-a { animation: bubble-drift-a 24s ease-in-out infinite; }
  .hero-bubble-b { animation: bubble-drift-b 29s ease-in-out infinite; }
  .hero-glow { animation: bubble-drift-a 26s ease-in-out infinite; }
}

/* Search bar card */
.search-card {
  border-radius: var(--radius-2xl);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 18px 40px -18px rgba(5, 13, 10, 0.45), 0 2px 8px -2px rgba(5, 13, 10, 0.12);
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem;
}
@media (min-width: 768px) {
  .search-card { flex-direction: row; align-items: center; }
}
.search-segment {
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-xl);
  transition: background-color 180ms ease;
  min-width: 0;
  flex: 1 1 0%;
}
.search-segment:hover { background-color: rgba(0, 0, 0, 0.03); }
.search-segment select {
  margin-top: 0.15rem;
  width: 100%;
  border: 0;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--foreground);
  padding: 0;
}
.search-segment label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.search-divider { width: 1px; align-self: stretch; background-color: rgba(0, 0, 0, 0.08); display: none; }
@media (min-width: 768px) { .search-divider { display: block; } }
.search-card .btn-primary { margin: 0.25rem; flex-shrink: 0; }
@media (min-width: 768px) { .search-card .btn-primary { margin: 0 0.25rem 0 0; } }

/* Listing card */
.listing-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-2xl);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease;
}
.listing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -20px rgba(5, 13, 10, 0.4);
}
.listing-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 116px;
  background: linear-gradient(135deg, rgba(253, 170, 62, 0.9), rgba(253, 170, 62, 0.35));
  color: var(--brand-ink);
}
.listing-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
}

/* Step strip */
.step-strip {
  display: grid;
  gap: 0;
  border-radius: var(--radius-2xl);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  overflow: hidden;
}
.step-strip > * + * { border-top: 1px solid rgba(0, 0, 0, 0.07); }
@media (min-width: 768px) {
  .step-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step-strip > * + * { border-left: 1px solid rgba(0, 0, 0, 0.07); border-top: 0; }
}

/* Category tabs */
.cat-tab {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 0.25rem 0.9rem;
  border-bottom: 2px solid transparent;
  color: var(--muted-foreground);
  text-align: left;
  transition: color 180ms ease, border-color 180ms ease;
}
.cat-tab:hover { color: var(--foreground); }
.cat-tab[aria-selected="true"] { color: var(--foreground); border-bottom-color: var(--brand-ink); }

/* Filter/amenities panel rows */
.filter-row {
  border-radius: var(--radius-xl);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: #ffffff;
  overflow: hidden;
}
.count-badge {
  display: inline-flex;
  min-width: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.06);
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
}

/* Price card (booking panel look) */
.price-card {
  border-radius: var(--radius-2xl);
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 30px -22px rgba(5, 13, 10, 0.5);
  padding: 1.5rem;
}
.price-card--featured {
  border-color: rgba(253, 170, 62, 0.55);
  box-shadow: 0 18px 40px -24px rgba(253, 170, 62, 0.7);
}

/* Nav pill */
.nav-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  background-color: var(--brand-amber);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.5rem 1rem;
  transition: filter 180ms ease, transform 180ms ease;
}
.nav-pill:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Hero marketplace furniture */
.hero-float-card {
  border-radius: var(--radius-2xl);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-float-card:hover { transform: translateY(-6px) rotate(0deg); }

.chip {
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0.4rem 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}
.chip:hover { border-color: rgba(253, 170, 62, 0.55); color: #ffffff; }
.chip-active {
  background-color: rgba(253, 170, 62, 0.16);
  border-color: rgba(253, 170, 62, 0.7);
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .listing-card:hover { transform: none; }
  .hero-float-card { transition: none; }
  .hero-float-card:hover { transform: none; }
}

/* ── Site nav ── */
.site-nav { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.07); color: var(--foreground); }
.site-nav.nav-dark { border-bottom-color: rgba(255, 255, 255, 0.1); color: #ffffff; }
.site-nav-inner {
  margin: 0 auto;
  display: flex;
  max-width: 72rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0.5rem;
  padding: 0.875rem 1.25rem;
}
.site-nav-links {
  order: 9;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0.25rem;
  font-size: 13px;
  font-weight: 600;
}
@media (min-width: 640px) {
  .site-nav-links { order: 0; width: auto; justify-content: center; font-size: 0.875rem; }
}
.site-nav-links a { color: rgba(26, 26, 26, 0.65); padding: 0.25rem 0; border-radius: 0.375rem; transition: opacity 180ms ease; }
.site-nav-links a:hover { opacity: 0.7; }
.site-nav-links a[aria-current="page"] { color: var(--foreground); }
.nav-dark .site-nav-links a { color: rgba(255, 255, 255, 0.75); }
.nav-dark .site-nav-links a[aria-current="page"] { color: #ffffff; }

/* ── Hero content spacing ── */
.hero-content-wrap { position: relative; z-index: 10; }
.hero-content { margin: 0 auto; max-width: 72rem; padding: 2.5rem 1.25rem 6rem; }
@media (min-width: 640px) { .hero-content { padding-bottom: 7rem; } }
.hero-content.slim { padding: 1.5rem 1.25rem 3rem; }

/* Home hero grid */
.hero-grid { display: grid; align-items: center; gap: 3rem; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; } }

.hero-h1 {
  margin-top: 2rem;
  max-width: 16ch;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #ffffff;
}
@media (min-width: 640px) { .hero-h1 { font-size: 3rem; } }
.hero-h1 .dim { color: rgba(255, 255, 255, 0.55); }
.hero-lead {
  margin-top: 1.25rem;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.625;
  color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 640px) { .hero-lead { font-size: 1.125rem; } }

.popular-row { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.popular-label {
  margin-right: 0.25rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35);
}
.trust-row {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
}
.trust-row span.item { display: flex; align-items: center; gap: 0.5rem; }
.amber-dot { height: 0.5rem; width: 0.5rem; border-radius: 9999px; background-color: var(--brand-amber); display: inline-block; }

/* Hero floating cards column */
.hero-cards {
  position: relative;
  display: none;
  height: 520px;
  width: 100%;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) { .hero-cards { display: flex; } }
.hero-cards-stack { position: relative; width: 100%; max-width: 24rem; }
.float-a { position: absolute; top: -11rem; right: -2rem; width: 16rem; transform: rotate(6deg); padding: 1.25rem; }
.float-main { position: relative; z-index: 10; width: 100%; padding: 1.5rem; background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.float-b { position: absolute; bottom: -8rem; left: -2rem; width: 18rem; transform: rotate(-3deg); padding: 1.25rem; }
.float-icon-sm {
  display: grid;
  height: 2.5rem;
  width: 2.5rem;
  place-items: center;
  border-radius: 0.5rem;
  background-color: rgba(253, 170, 62, 0.2);
  color: var(--brand-amber);
}
.float-icon-round { border-radius: 9999px; background-color: rgba(253, 170, 62, 0.18); }
.float-icon-lg {
  display: grid;
  height: 3rem;
  width: 3rem;
  place-items: center;
  border-radius: 0.75rem;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}
.float-tag {
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.1);
}
.float-head { margin-bottom: 1rem; display: flex; align-items: flex-start; justify-content: space-between; }
.float-head-lg { margin-bottom: 1.5rem; }
.float-title { font-size: 1rem; font-weight: 700; color: #ffffff; }
.float-title-lg { font-size: 1.5rem; font-weight: 700; color: #ffffff; }
.float-sub { margin-top: 0.25rem; font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); }
.float-sub-xs { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); }
.float-mono { font-family: var(--font-mono); font-size: 0.75rem; color: rgba(255, 255, 255, 0.25); }
.progress-track { margin-top: 1rem; height: 0.5rem; overflow: hidden; border-radius: 9999px; background-color: rgba(255, 255, 255, 0.08); }
.progress-fill { height: 100%; width: 85%; background-color: var(--brand-amber); }
.progress-legend { margin-top: 0.5rem; display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.5); }
.float-row { display: flex; align-items: center; gap: 1rem; }

/* ── Sections and layout utilities ── */
.container-6xl { margin: 0 auto; max-width: 72rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.container-5xl { margin: 0 auto; max-width: 64rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.container-3xl { margin: 0 auto; max-width: 48rem; padding-left: 1.25rem; padding-right: 1.25rem; }

.section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .section { padding-top: 5rem; padding-bottom: 5rem; } }
.section-b { padding-bottom: 5rem; }

.h2 { margin-top: 0.75rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 640px) { .h2 { font-size: 1.875rem; } }
.h2-narrow { max-width: 22ch; }

.services-grid { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.listing-body { display: flex; flex: 1 1 0%; flex-direction: column; padding: 1.25rem; }
.listing-title { font-size: 1rem; font-weight: 700; }
.listing-copy { margin-top: 0.5rem; flex: 1 1 0%; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.listing-card .listing-meta { margin-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.06); padding-top: 0.75rem; }

.step-strip li { padding: 1.5rem; }
.step-num { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-amber); }
.step-title { margin-top: 0.75rem; font-size: 1rem; font-weight: 700; }
@media (min-width: 640px) { .step-title { font-size: 1.125rem; } }
.step-copy { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }

/* ── Audit page ── */
.slim-h1 { margin-top: 1.25rem; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; color: #ffffff; }
@media (min-width: 640px) { .slim-h1 { font-size: 2.25rem; } }
.slim-lead { margin-top: 1rem; max-width: 58ch; font-size: 0.875rem; line-height: 1.625; color: rgba(255, 255, 255, 0.75); }
@media (min-width: 640px) { .slim-lead { font-size: 1rem; } }

.audit-main { padding-top: 3rem; padding-bottom: 3rem; }
@media (min-width: 640px) { .audit-main { padding-top: 4rem; padding-bottom: 4rem; } }
.tablist { display: flex; gap: 2rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.tab-label { display: block; font-size: 0.875rem; font-weight: 700; }
.tab-sub { display: block; font-size: 0.75rem; color: var(--muted-foreground); }

.panel-card { margin-top: 1.5rem; }
@media (min-width: 640px) { .panel-card { padding: 1.75rem; } }
.panel-title { margin-top: 0.5rem; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
@media (min-width: 640px) { .panel-title { font-size: 1.5rem; } }
.panel-copy { margin-top: 0.5rem; max-width: 58ch; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.form-stack { margin-top: 1.5rem; }
.form-stack > * + * { margin-top: 1.25rem; }

.group-shell { border-radius: 1rem; border: 1px solid rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.02); padding: 0.75rem; }
@media (min-width: 640px) { .group-shell { padding: 1rem; } }
.group-shell .eyebrow { padding-left: 0.25rem; padding-right: 0.25rem; }
.group-stack { margin-top: 0.75rem; }
.group-stack > * + * { margin-top: 0.75rem; }
.group-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  text-align: left;
}
.group-toggle-left { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }
.group-num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.group-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 700; }
.group-toggle-right { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }
.group-caret { color: var(--muted-foreground); transition: transform 180ms ease; }
.group-toggle[aria-expanded="true"] .group-caret { transform: rotate(180deg); }
.group-body { border-top: 1px solid rgba(0, 0, 0, 0.06); padding: 1.25rem 1rem; }
.group-body > * + * { margin-top: 1.25rem; }

.trust-card { margin-top: 2.5rem; padding: 1.25rem; }
.trust-list {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.trust-list li { display: flex; align-items: center; gap: 0.75rem; }
.trust-sep { color: var(--brand-amber); }

/* Fallback panel */
.fallback {
  margin-top: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background-color: rgba(0, 0, 0, 0.03);
  padding: 1rem;
}
@media (min-width: 640px) { .fallback { padding: 1.25rem; } }
.fallback-copy { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.fallback-copy a { font-weight: 500; color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; border-radius: 0.25rem; }
.fallback-label { margin-top: 1rem; display: block; font-size: 0.875rem; font-weight: 500; }
.fallback textarea {
  margin-top: 0.375rem;
  width: 100%;
  resize: vertical;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--foreground);
}
.fallback-actions { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.fallback-actions a { font-size: 0.875rem; text-decoration: underline; text-underline-offset: 4px; border-radius: 0.25rem; }

.updates-note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* ── After page ── */
.pricing-main { padding-top: 3.5rem; padding-bottom: 4rem; }
.pricing-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr 1fr 1.2fr; align-items: start; }
  .pricing-grid .price-card { position: sticky; top: 1.5rem; }
}
.price-card { display: flex; height: 100%; flex-direction: column; }
.price-head { margin-top: 0.75rem; display: flex; align-items: baseline; gap: 0.5rem; }
.price-amount { font-family: var(--font-mono); font-size: 1.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.price-period { font-size: 0.875rem; color: var(--muted-foreground); }
.tier-points { margin-top: 1.25rem; flex: 1 1 0%; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.tier-points > * + * { margin-top: 0.625rem; }
.tier-points li { display: flex; gap: 0.625rem; }
.tier-dash { color: var(--brand-amber); }
.works-intro { margin-top: 0.75rem; max-width: 62ch; font-size: 0.875rem; line-height: 1.625; }
@media (min-width: 640px) { .works-intro { font-size: 1rem; } }
.works-points { margin-top: 1.5rem; display: grid; flex: 1 1 0%; gap: 0.625rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
@media (min-width: 640px) { .works-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.works-points li { display: flex; gap: 0.625rem; }
.price-card .btn-primary { margin-top: 1.5rem; width: 100%; }
.pricing-note { margin-top: 2.5rem; max-width: 62ch; font-size: 0.875rem; line-height: 1.625; color: var(--muted-foreground); }
.pricing-cta { margin-top: 2rem; }
.pricing-cta .btn-primary { width: auto; }

/* ── Footer ── */
.site-footer { margin-top: 5rem; border-top: 1px solid rgba(0, 0, 0, 0.08); background-color: rgba(0, 0, 0, 0.02); }
.site-footer-inner { margin: 0 auto; max-width: 64rem; padding: 3rem 1.25rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.footer-tag { margin-top: 0.75rem; max-width: 26ch; font-size: 0.875rem; color: var(--muted-foreground); }
.footer-list { margin-top: 0.75rem; font-size: 0.875rem; }
.footer-list > * + * { margin-top: 0.5rem; }
.footer-list a:hover { text-decoration: underline; }
.footer-list a.mail { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.footer-list .muted { color: var(--muted-foreground); }
.site-footer hr { margin-top: 2.5rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.footer-legal { margin-top: 1.5rem; font-size: 0.75rem; line-height: 1.625; color: var(--muted-foreground); }
.footer-legal > * + * { margin-top: 0.5rem; }
.footer-legal a { text-decoration: underline; text-underline-offset: 4px; border-radius: 0.25rem; }

/* ── Small helpers ── */
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.hidden { display: none !important; }
.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;
}