/* ============================================================
   zobi.css — Zobi design-language skin for Landmark
   Single consolidated pass. One rule per concern, no
   contradictions. Phone mockups (w-[393px] frames) are
   excluded from every page-level rule.

   Covers:
   1. Base tokens & type (Zobi palette + Instrument Sans scale)
   2. Chrome (sticky blurred header, CTA buttons, footer)
   3. Edge-to-edge page ground (uniform cream, flush dark bands)
   4. Content cards (Zobi .note language)
   5. FAQ plain rows
   6. Icon color treatment (green accents)
   7. Responsiveness (fluid widths, wrapping K/V rows)
   ============================================================ */

:root {
  --bg: #F7F6F2;
  --card: #FFFFFF;
  --radius: 12px;
  --ink: #0E0E10;
  --muted: #46464C;
  --faint: #68686F;
  --line: #E5E3DC;
  --dark: #0A0A0C;
  --green: #2E7D4F;
  --green-soft: #7CC79A;
  --green-tint: rgba(124, 199, 154, .16);
  --green-line: rgba(46, 125, 79, .30);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ==================== 1. BASE & TYPE ==================== */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: #fff; }
a { transition: color .15s cubic-bezier(.33,1,.68,1),
                 background-color .15s cubic-bezier(.33,1,.68,1),
                 border-color .15s cubic-bezier(.33,1,.68,1); }
h1, h2, p { text-wrap: pretty; }
h2 { text-wrap: balance; }

h1 {
  font-weight: 600 !important;
  letter-spacing: -.042em !important;
  line-height: 1.06 !important;
  font-size: clamp(38px, 5.2vw, 72px) !important;
}
h2 {
  font-weight: 600 !important;
  letter-spacing: -.03em !important;
  line-height: 1.12 !important;
  font-size: clamp(26px, 3.5vw, 40px) !important;
}

/* page-level muted body copy → Zobi --muted (phones excluded) */
[data-pencil-name="main"] [class*="text-[#49454f]" i]:not([class*="w-[393px]"] *),
[data-pencil-name="main"] [class*="text-[#3d4238]" i]:not([class*="w-[393px]"] *),
[data-pencil-name="main"] [class*="text-[#3f4b42]" i]:not([class*="w-[393px]"] *) {
  color: var(--muted) !important;
}
[data-pencil-name="main"] [class*="border:1px_solid_#CAC4D0" i]:not([class*="w-[393px]"] *) {
  border-color: var(--line) !important;
}

/* micro kicker labels → Zobi mono (direct children of sections) */
[data-pencil-name="main"] > [data-pencil-name] > [class*="text-[11px]"] {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--faint) !important;
}

/* ==================== 2. CHROME ==================== */
[data-pencil-name="header"] {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  background: rgba(247, 246, 242, .86) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--line) !important;
}
[data-pencil-name="nav"] a {
  font-size: 13.5px !important;
  color: #44444A !important;
}
[data-pencil-name="nav"] a:hover { color: var(--ink) !important; }

a[href="https://speechbolt.ai/"] {
  border-radius: 6px !important;
  transition: background-color .15s cubic-bezier(.33,1,.68,1),
              transform .18s cubic-bezier(.33,1,.68,1),
              box-shadow .18s cubic-bezier(.33,1,.68,1) !important;
}
a[href="https://speechbolt.ai/"]:hover {
  background: #2E2E33 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px -16px rgba(14,14,16,.4) !important;
}
a[href="https://speechbolt.ai/"] div {
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}

/* ==================== 3. EDGE-TO-EDGE GROUND ==================== */
[data-pencil-name="main"] > [data-pencil-name]:not([class*="bg-[#0A0A0C]"]) {
  background: var(--bg) !important;
  border: 0 !important;
}
[data-pencil-name="main"] [class*="border-color:#c8ccc3"] {
  border-color: transparent !important;
}
/* legacy tinted bands → uniform cream */
[data-pencil-name="main"] > [class*="bg-[#fdfbf7]" i],
[data-pencil-name="main"] > [class*="bg-[#f9f7f1]" i] {
  background: var(--bg) !important;
  border: 0 !important;
}

/* ==================== 4. CONTENT CARDS (Zobi .note) ==================== */
[data-pencil-name="main"] [class*="box-shadow:8px_8px_0px_0px_#0A0A0C33"]:not([class*="w-[393px]"] *),
[data-pencil-name="main"] [class*="box-shadow:0px_8px_0px_0px_#0A0A0C22" i]:not([class*="w-[393px]"] *),
[data-pencil-name="main"] [class*="bg-[#FFFBFE]" i]:not([data-pencil-name="Live Call"]):not([data-pencil-name="SMS phone — page"]):not([class*="w-[393px]"] *),
[data-pencil-name="main"] [data-pencil-name^="Step "] {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 30px -22px rgba(14,14,16,.25) !important;
  transition: transform .15s cubic-bezier(.33,1,.68,1),
              box-shadow .15s cubic-bezier(.33,1,.68,1) !important;
}
[data-pencil-name="main"] [data-pencil-name^="Step "]:hover,
[data-pencil-name="main"] [class*="box-shadow:8px_8px_0px_0px_#0A0A0C33"]:hover:not([class*="w-[393px]"] *) {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 38px -22px rgba(14,14,16,.32) !important;
}

/* ==================== 5. FAQ PLAIN ROWS ==================== */
.faq-toggle {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.faq-toggle:hover { transform: none !important; box-shadow: none !important; }

/* ==================== 6. ICON COLOR TREATMENT ==================== */
/* trust chips (No fees unless we win, Free claim review) */
[data-pencil-name="Trust chips"] svg { color: var(--green) !important; }
/* how-step icon chips: soft green tint + green stroke */
[data-pencil-name="main"] .how-icon {
  color: var(--green) !important;
  background: var(--green-tint) !important;
  border: 1px solid var(--green-line) !important;
  border-radius: 10px !important;
}
[data-pencil-name="main"] .how-icon svg {
  color: var(--green) !important;
  stroke: var(--green) !important;
  fill: var(--green) !important;
}
/* record/attestation card icons */
[data-pencil-name="main"] [class*="box-shadow:8px_8px_0px_0px_#0A0A0C33"] svg,
[data-pencil-name="main"] [class*="bg-[#FFFBFE]" i] svg { color: var(--green) !important; }
/* dark-ground icons → soft green for contrast */
[class*="p-[100px_168px_130px_168px]"] svg,
[data-pencil-name="footer"] svg { color: var(--green-soft) !important; }
/* gray 60px phone action circles → subtle green */
[data-pencil-name="main"] [class*="rounded-[30px]"][class*="bg-[#E5E4DF]"] svg { color: var(--green) !important; }

/* step-card body copy → muted (it was green) */
[data-pencil-name="main"] [data-pencil-name^="Step "] [class*="text-[#2E7D4F]" i] { color: var(--muted) !important; }
/* step-card eyebrow number (01/02/03) → green accent */
[data-pencil-name="main"] [data-pencil-name^="Step "] [class*="tracking-[1.4px]" i] { color: var(--green) !important; }

/* ==================== 7. DARK SECTIONS (text + button) ==================== */
[class*="p-[100px_168px_130px_168px]"] [class*="text-[#2E7D4F]"] { color: #F2F2F0 !important; }
[class*="p-[100px_168px_130px_168px]"] [class*="bg-[#2E7D4F]"] { background: #fff !important; border-color: #fff !important; }
[class*="p-[100px_168px_130px_168px]"] [class*="bg-[#2E7D4F]"]:hover { background: #D9D9D6 !important; }
[class*="p-[100px_168px_130px_168px]"] [class*="bg-[#2E7D4F]"] > div { color: var(--ink) !important; }
[data-pencil-name="main"] [class*="bg-[#0A0A0C]"] > [class*="text-[#2E7D4F]"] { color: #F2F2F0 !important; }
[data-pencil-name="footer"] [class*="text-[#2E7D4F]" i] { color: #F2F2F0 !important; }
[data-pencil-name="footer"] {
  background: var(--dark) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
[data-pencil-name="footer"] a:hover { color: #fff !important; }
[data-pencil-name^="Attorney Advertising"] {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  letter-spacing: .08em !important;
}

/* ==================== 8. RESPONSIVENESS ==================== */
/* fluid caps — fixed pixel widths compress to container */
[data-pencil-name="main"] [class*="w-[1063px]" i],
[data-pencil-name="main"] [class*="w-[1000px]" i],
[data-pencil-name="main"] [class*="w-[900px]" i],
[data-pencil-name="main"] [class*="w-[820px]" i],
[data-pencil-name="main"] [class*="w-[760px]" i],
[data-pencil-name="main"] [class*="w-[670px]" i],
[data-pencil-name="main"] [class*="w-[640px]" i],
[data-pencil-name="main"] [class*="w-[560px]" i],
[data-pencil-name="footer"] [class*="w-[760px]" i] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
[data-pencil-name="footer"] [data-pencil-name="Footer right"] { flex: 1 1 auto !important; min-width: 0 !important; max-width: 760px; }
[data-pencil-name="main"] [data-pencil-name="p"] { max-width: 100% !important; }

/* K/V rows (Gateway attestation, Verification, Line type, Call history) wrap cleanly */
[data-pencil-name="Verification"],
[data-pencil-name="Line type"],
[data-pencil-name="Call history"],
[data-pencil-name="Gateway attestation"] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px !important;
}
[data-pencil-name="Verification"] div,
[data-pencil-name="Line type"] div,
[data-pencil-name="Call history"] div {
  white-space: normal !important;
  text-align: left !important;
  word-break: break-word;
}

/* Shared homepage alignment, including semantic guide sections. */
#landmark-viewport { --landmark-gutter: max(clamp(32px, 8vw, 168px), calc((100% - 1767px) / 2)); }
html body #landmark-viewport [data-pencil-name="header"],
html body #landmark-viewport [data-pencil-name="footer"],
html body #landmark-viewport [data-pencil-name="main"] > * {
 padding-left: var(--landmark-gutter) !important;
 padding-right: var(--landmark-gutter) !important;
}
html body #landmark-viewport [data-pencil-name="main"] > [data-pencil-name="section"]:first-child {
 padding-top: clamp(48px, 5vw, 72px) !important;
 padding-bottom: clamp(48px, 5vw, 72px) !important;
}
#landmark-viewport [data-pencil-name="Trust chips"] { flex-wrap: wrap !important; row-gap: 10px !important; }

/* Center the desktop hero as one composition, with a readable copy column. */
@media (min-width: 961px) {
 html body #landmark-viewport [data-pencil-name="main"] > [data-pencil-name="section"]:first-child {
  grid-template-columns: minmax(0, 820fr) minmax(0, 580fr);
  padding-top: clamp(48px, 4vw, 56px) !important;
  padding-bottom: clamp(40px, 3vw, 48px) !important;
  gap: clamp(40px, 5vw, 80px) !important;
  padding-left: max(var(--landmark-gutter), calc((100% - 1480px) / 2)) !important;
  padding-right: max(var(--landmark-gutter), calc((100% - 1480px) / 2)) !important;
 }
 #landmark-viewport [data-pencil-name="main"] > [data-pencil-name="section"]:first-child h1 {
  font-size: clamp(44px, 4.4vw, 64px) !important;
 }
 #landmark-viewport [data-pencil-name="Speechbolt answers unfamiliar calls, cap"] {
  max-width: 720px !important;
 }
 #landmark-viewport [data-pencil-name="Hero caption"] { margin-left: 60px !important; }
}
@media (min-width: 961px) and (max-width: 1600px) {
 html body #landmark-viewport [data-pencil-name="main"] > [data-pencil-name="section"]:first-child {
  grid-template-columns: minmax(0, 760fr) minmax(0, 420fr);
 }
}
@media (max-width: 760px) {
 #landmark-viewport { --landmark-gutter: 20px; }
 #landmark-viewport [data-pencil-name="Hero caption"] { margin-left: 0 !important; max-width: 100% !important; }
}

/* ==================== 9. REVEAL ==================== */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}