/* page.css — InvoicePath page + section system (loaded after global.css).
   Covers: the dark page hero, light/tinted content sections, the homepage
   building blocks (hero visual, steps, feature split, logo strip, stats,
   testimonial), card grids, and the AEO-style Q&A accordion. */

:root {
  --page-max: 72rem;                 /* reading column for inner/legal pages */
  --page-pad: clamp(24px, 5vw, 80px);
}

.wrap { max-width: var(--container-9xl); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }
.page-wrap { max-width: var(--page-max); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }

/* =====================================================================
   Dark page hero (inner pages)
   ===================================================================== */
.page-hero { background: var(--surface-dark); color: var(--ink-on-dark); padding: clamp(44px, 8vh, 96px) 0 clamp(40px, 7vh, 80px); position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; top: -40%; right: -10%; width: 55%; height: 150%; background: radial-gradient(closest-side, rgba(113,92,255,0.16), transparent 70%); pointer-events: none; }
.page-hero-eyebrow {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-on-dark-soft); margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.page-hero-eyebrow a { color: inherit; opacity: 0.8; }
.page-hero-eyebrow a:hover { opacity: 1; }
.page-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.6rem); line-height: 1.03; color: #fff; max-width: 20ch; }
.page-hero h1 .accent { color: var(--accent-blue); }
.page-lede { margin-top: 1.5rem; max-width: 46rem; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; color: var(--ink-on-dark-soft); }
.page-hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.page-meta { margin-top: clamp(2rem, 5vh, 3rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 560px) { .page-meta { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.page-meta-item { display: flex; flex-direction: column; gap: 0.35rem; }
.page-meta-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-on-dark-soft); }
.page-meta-value { font-size: 1.0625rem; color: var(--ink-on-dark); }
.page-meta-value .accent { color: var(--accent-blue); }

/* =====================================================================
   Generic content section
   ===================================================================== */
.section { padding: clamp(48px, 8vh, 104px) 0; }
.section--tint { background: var(--canvas-cool); }
.section--soft { background: var(--canvas-soft); }
.section--dark { background: var(--surface-dark); color: var(--ink-on-dark); }
.section-head { max-width: 52rem; }
.section-eyebrow-row {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(12,12,41,0.5); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: clamp(20px,3vh,28px);
}
.section--dark .section-eyebrow-row { color: var(--ink-on-dark-soft); }
.section-eyebrow-accent { color: var(--brand-coral); display: inline-flex; align-items: center; gap: 0.6rem; }
.section-eyebrow-accent::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--brand-coral); }
.section h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); line-height: 1.06; color: var(--terminal); max-width: 24ch; }
.section--dark h2 { color: #fff; }
.section h2 .quiet { color: rgba(12,12,41,0.4); }
.section--dark h2 .quiet, .section--dark h2 .accent { color: var(--accent-blue); }
.section h2 .accent { color: var(--brand-blue); }
.section-prose { margin-top: 1.25rem; max-width: 44rem; font-size: 1.0625rem; line-height: 1.65; color: rgba(12,12,41,0.74); }
.section--dark .section-prose { color: var(--ink-on-dark-soft); }
.section-prose p + p { margin-top: 1rem; }

/* =====================================================================
   Homepage hero
   ===================================================================== */
.hero { position: relative; background: var(--surface-dark); color: var(--ink-on-dark); padding: clamp(3rem,8vh,6rem) 0 clamp(3.5rem,9vh,7rem); overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -30%; right: -8%; width: 60%; height: 150%; background: radial-gradient(closest-side, rgba(0,121,202,0.18), transparent 70%); pointer-events: none; }
.hero::after { content: ""; position: absolute; bottom: -40%; left: -10%; width: 50%; height: 130%; background: radial-gradient(closest-side, rgba(188,75,255,0.12), transparent 70%); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem,5vw,4rem); align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); } }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink-on-dark-soft); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: clamp(1.25rem,3vh,1.75rem); }
.hero-eyebrow::before { content: ""; width: 22px; height: 1px; background: rgba(140,153,184,0.6); }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1.01; color: #fff; max-width: 14ch; }
.hero h1 .accent { color: var(--accent-blue); }
.hero-lede { margin-top: clamp(1rem,2.2vh,1.4rem); font-size: clamp(1.0625rem,1.4vw,1.25rem); line-height: 1.55; color: rgba(227,236,247,0.78); max-width: 40ch; }
.hero-cta { margin-top: clamp(1.75rem,3.5vh,2.5rem); display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-trust { margin-top: clamp(1.5rem,3vh,2.25rem); font-size: 0.8125rem; color: var(--ink-on-dark-soft); display: flex; align-items: center; gap: 0.5rem; }

/* Hero visual — CSS-only "received → extracted → synced" card stack */
.hero-visual { position: relative; display: grid; gap: 0.85rem; }
.flow-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  padding: 1rem 1.15rem; display: flex; align-items: center; gap: 0.9rem; backdrop-filter: blur(2px);
}
.flow-card .flow-dot { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.flow-card:nth-child(1) .flow-dot { background: linear-gradient(135deg, var(--brand-coral), var(--brand-pink)); }
.flow-card:nth-child(3) .flow-dot { background: linear-gradient(135deg, var(--brand-violet), var(--brand-dark-blue)); }
.flow-card:nth-child(5) .flow-dot { background: linear-gradient(135deg, var(--brand-blue), var(--brand-green)); }
.flow-card > span:not(.flow-dot):not(.flow-meta) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flow-card .flow-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-on-dark-soft); }
.flow-card .flow-title { font-size: 0.9375rem; color: #fff; }
.flow-card .flow-meta { margin-left: auto; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent-blue); }
.flow-arrow { justify-self: center; color: rgba(255,255,255,0.3); }

/* =====================================================================
   Steps (how it works)
   ===================================================================== */
.steps { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: clamp(2rem,4vh,3rem); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding-top: 1.25rem; border-top: 2px solid var(--brand-blue); }
.step:nth-child(2) { border-top-color: var(--brand-violet); }
.step:nth-child(3) { border-top-color: var(--brand-green); }
.step-num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.step h3 { margin-top: 0.5rem; font-size: 1.25rem; color: var(--terminal); }
.step p { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.6; color: rgba(12,12,41,0.7); }

/* =====================================================================
   Feature split (AP / AR)
   ===================================================================== */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(1rem,2vw,1.5rem); margin-top: clamp(2rem,4vh,3rem); }
@media (min-width: 820px) { .split { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.split-card { background: #fff; border: 1px solid var(--rule-light); border-radius: var(--radius-2xl); padding: clamp(1.75rem,3vw,2.5rem); display: flex; flex-direction: column; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.split-card:hover { border-color: rgba(0,121,202,0.45); transform: translateY(-3px); box-shadow: 0 26px 54px -32px rgba(12,12,41,0.4); }
.split-tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-blue); }
.split-card h3 { margin-top: 0.7rem; font-size: clamp(1.4rem,2.4vw,1.8rem); color: var(--terminal); }
.split-card > p { margin-top: 0.7rem; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }
.split-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; }
.split-list li { position: relative; padding-left: 1.6rem; font-size: 0.9375rem; line-height: 1.5; color: rgba(12,12,41,0.78); }
.split-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 9px; height: 9px; border-radius: 3px; background: var(--brand-blue); }
.split-card:nth-child(2) .split-tag { color: var(--brand-violet); }
.split-card:nth-child(2) .split-list li::before { background: var(--brand-violet); }
.split-more { margin-top: auto; padding-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-blue); }

/* =====================================================================
   Generic card grid (features / "what changes")
   ===================================================================== */
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: clamp(2rem,4vh,3rem); }
@media (min-width: 680px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: #fff; border: 1px solid var(--rule-light); border-top: 2px solid color-mix(in oklab, var(--brand-blue) 38%, #c4ccda); border-radius: 14px; padding: 1.5rem 1.5rem 1.625rem; }
.card:nth-child(3n+2) { border-top-color: color-mix(in oklab, var(--brand-purple) 34%, #c4ccda); }
.card:nth-child(3n+3) { border-top-color: color-mix(in oklab, var(--brand-green) 34%, #c4ccda); }
.card-index { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.card h3 { margin-top: 0.5rem; font-size: 1.125rem; line-height: 1.25; color: var(--terminal); }
.card p { margin-top: 0.625rem; font-size: 0.9375rem; line-height: 1.55; color: rgba(12,12,41,0.7); }

/* =====================================================================
   Integration logo strip
   ===================================================================== */
.logos { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.75rem,3.5vh,2.5rem); }
.logo-chip {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem;
  border: 1px solid var(--rule-light); border-radius: 999px; background: #fff;
  font-size: 0.9375rem; color: var(--terminal); font-weight: 500;
}
.section--dark .logo-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: #fff; }
.logo-chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand-green); }

/* =====================================================================
   Stats band
   ===================================================================== */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem,3vw,2.5rem); margin-top: clamp(2rem,4vh,3rem); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat-num { font-size: clamp(2rem,4vw,3rem); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.stat-num.accent { color: var(--accent-blue); }
.stat-label { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.45; color: var(--ink-on-dark-soft); }

/* =====================================================================
   Testimonial
   ===================================================================== */
.quote-card { max-width: 52rem; margin: clamp(2rem,4vh,3rem) auto 0; text-align: center; }
.quote-card blockquote { font-size: clamp(1.25rem,2.6vw,1.85rem); line-height: 1.3; letter-spacing: -0.02em; color: var(--terminal); }
.section--dark .quote-card blockquote { color: #fff; }
.quote-card .quote-by { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.section--dark .quote-card .quote-by { color: var(--ink-on-dark-soft); }

/* =====================================================================
   Pricing
   ===================================================================== */
.price-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem,2vw,1.5rem); margin-top: clamp(2rem,4vh,3rem); }
@media (min-width: 860px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-card { background: #fff; border: 1px solid var(--rule-light); border-radius: var(--radius-2xl); padding: clamp(1.75rem,3vw,2.25rem); display: flex; flex-direction: column; }
.price-card.featured { border-color: rgba(113,92,255,0.5); box-shadow: 0 26px 54px -32px rgba(12,12,41,0.45); position: relative; }
.price-badge { position: absolute; top: -0.75rem; left: 1.75rem; background: var(--brand-violet); color: #fff; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.7rem; border-radius: 999px; }
.price-name { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.price-amount { margin-top: 0.75rem; font-size: clamp(1.75rem,3vw,2.25rem); letter-spacing: -0.03em; color: var(--terminal); }
.price-amount small { font-size: 0.9375rem; color: var(--ink-soft); font-weight: 400; letter-spacing: 0; }
.price-desc { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
.price-features { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.price-features li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; line-height: 1.45; color: rgba(12,12,41,0.78); }
.price-features li::before { content: "✓"; position: absolute; left: 0; color: var(--brand-green); font-weight: 600; }
.price-card .btn { margin-top: auto; }
.price-card .price-cta-wrap { margin-top: 1.5rem; }

/* =====================================================================
   AEO Q&A accordion
   ===================================================================== */
.qa { margin-top: 2rem; border-top: 1px solid var(--rule-light); max-width: 52rem; }
.qa-item { border-bottom: 1px solid var(--rule-light); }
.qa-item > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 1rem; padding: 1.125rem 0; font-size: 1.0625rem; font-weight: 500; color: var(--terminal); }
.qa-item > summary::-webkit-details-marker { display: none; }
.qa-item > summary::after { content: ""; margin-left: auto; flex: 0 0 auto; width: 11px; height: 11px; margin-top: 6px; border-right: 2px solid var(--brand-blue); border-bottom: 2px solid var(--brand-blue); transform: rotate(45deg); transition: transform 200ms ease; }
.qa-item[open] > summary::after { transform: rotate(-135deg); }
.qa-answer { padding: 0 0 1.25rem; max-width: 46rem; font-size: 1rem; line-height: 1.65; color: rgba(12,12,41,0.74); }
.qa-answer p + p { margin-top: 0.85rem; }

/* =====================================================================
   Legal / prose pages
   ===================================================================== */
.legal { padding: clamp(40px,6vh,72px) 0 clamp(56px,8vh,96px); }
.legal h2 { font-size: clamp(1.4rem,2.4vw,1.85rem); color: var(--terminal); margin-top: clamp(2rem,4vh,3rem); }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.125rem; color: var(--terminal); margin-top: 1.75rem; }
.legal p, .legal li { font-size: 1rem; line-height: 1.7; color: rgba(12,12,41,0.78); }
.legal p { margin-top: 1rem; }
.legal ul { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.legal ul li { position: relative; padding-left: 1.4rem; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 2px; background: var(--brand-blue); }
.legal a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }
.legal .updated { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.legal .toc { margin: 1.5rem 0 0; padding: 1.25rem 1.5rem; background: var(--canvas-soft); border: 1px solid var(--rule-light); border-radius: 14px; }
.legal .toc h4 { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.75rem; }
.legal .toc ul { margin: 0; gap: 0.4rem; }
.legal .toc li { padding-left: 0; }
.legal .toc li::before { display: none; }

/* =====================================================================
   Contact block
   ===================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem,3vw,2.5rem); margin-top: clamp(2rem,4vh,3rem); }
@media (min-width: 820px) { .contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.contact-form { display: flex; flex-direction: column; gap: 0.85rem; }
.contact-field { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-field label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.contact-field input, .contact-field textarea, .contact-field select {
  font: inherit; font-size: 0.9375rem; padding: 0.75rem 0.9rem; border: 1px solid var(--rule-light);
  border-radius: var(--radius-lg); background: #fff; color: var(--terminal); outline: none;
  transition: border-color 150ms ease;
}
.contact-field input:focus, .contact-field textarea:focus, .contact-field select:focus { border-color: var(--brand-blue); }
.contact-aside { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-aside .lead { font-size: 1.0625rem; line-height: 1.6; color: rgba(12,12,41,0.74); }
.contact-line { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-line .k { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.contact-line .v { font-size: 1rem; color: var(--terminal); }
.contact-line .v a { color: var(--brand-blue); }
.form-status { font-size: 0.875rem; color: var(--brand-green); min-height: 1.2em; }