/* Product pages (Produto, Caixa de entrada, Assistentes de IA, Conexão oficial, Demonstração).
   Loaded after home.css, which holds the shared product pieces (product screens, settings card, demo
   stage, accordions). This file only places them on the inner pages: page head, two-column splits,
   the route cards and the one designed block per page. Tokens only, no literal colours. */

/* ============================================================ Page head */
.page-head { padding-block: clamp(32px, 6vw, 88px) clamp(24px, 4vw, 56px); position: relative; overflow: clip; }
.page-head > .container { position: relative; z-index: 1; }
.page-title { font-size: clamp(2.25rem, 1.35rem + 2.8vw, 3.75rem); line-height: 1.04; letter-spacing: -0.032em; max-width: 19ch; }
.page-head .lead { max-width: 58ch; }
.page-head .btn-row { margin-top: var(--s-5); }
.page-status { margin-top: var(--s-5); display: flex; gap: 10px; align-items: flex-start; max-width: 62ch; color: var(--text-2); font-size: var(--fs-14); }
.page-status .soon-tag { margin-top: 1px; flex: none; }
.page-head .aurora .a1 { right: -10%; top: -40%; }

/* Sections inside an inner page sit a little closer than on the home. */
.page-sec { padding-block: clamp(48px, 6vw, 88px); }
.page-sec .section-head { margin-bottom: clamp(24px, 4vw, 40px); }

/* ============================================================ Two columns from 1024 px */
.split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .split--head { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .split--head .section-head { position: sticky; top: calc(var(--header-h) + 24px); }
}
.split .elist > li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 1024px) { .elist.cols-2 > li:nth-child(2) { border-top: 0; padding-top: 0; } }

/* ============================================================ Route cards (Produto) */
.routes { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.route { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; text-decoration: none; color: inherit; align-items: start; }
.route .icon-tile { grid-row: span 3; }
.route h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.route .link { font-size: var(--fs-14); margin-top: 4px; }
.route:active { transform: scale(0.99); }
@media (max-width: 767px) { .route p { display: none; } }

/* ============================================================ Flow strip (Produto): three columns from 768 px */
@media (min-width: 768px) {
  .flow.receipt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .flow .receipt-item + .receipt-item { background-image: none; }
  .flow .receipt-item + .receipt-item::before { top: 50%; left: -4px; margin: -3.5px 0 0; }
}
.flow .step-n { font-size: var(--fs-12); font-weight: 600; color: var(--brand-ink); }

/* ============================================================ Inbox screen (Caixa de entrada) */
.screen-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--s-3); }
.inbox { display: grid; font-size: var(--fs-14); }
.inbox-list { padding: 12px; }
.inbox-thread { display: none; padding: 18px; border-left: 1px solid var(--border); background: var(--page); }
@media (min-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .inbox-thread { display: grid; gap: 12px; align-content: start; }
}
.inbox-thread .who { display: flex; align-items: center; gap: 10px; }
.inbox-thread .who .avatar { width: 34px; height: 34px; font-size: var(--fs-12); }
.inbox-thread .who small { display: block; color: var(--text-2); }
.inbox .scr-foot { padding: 0 12px 12px; margin-top: 0; }
.window { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--text-2); }

/* ============================================================ Numbers panel (Conexão oficial) */
.numbers { display: grid; gap: 10px; padding: 18px; }
.num { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.num-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.num-top b { font-weight: 600; }
.num p { color: var(--text-2); font-size: var(--fs-14); }
.num.is-down { background: var(--surface-2); }
.num .btn { min-height: 44px; font-size: var(--fs-14); width: fit-content; }

/* Statements that are a plain "no" (groups, calls): quiet panel, the answer first. */
.nope { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .nope { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nope .card-plain h3 { font-size: var(--fs-18); }
.nope .card-plain p { margin-top: 6px; }
.nope .answer-no { font-family: var(--font-display); font-weight: 700; color: var(--text); }

/* ============================================================ Demo page */
.demo-title { font-size: clamp(2.25rem, 1.35rem + 2.8vw, 3.75rem); line-height: 1.04; letter-spacing: -0.032em; max-width: 16ch; }
.demo-hero .hero-fine { display: flex; gap: 10px; align-items: flex-start; }
.demo-hero .hero-fine .soon-tag { flex: none; }
.sources { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sources .card h3 { display: flex; align-items: center; gap: 10px; }
.sources .card p { margin-top: 8px; }
.sources .chip { margin-top: 12px; width: fit-content; }
.transcript ol { display: grid; gap: var(--s-5); padding-bottom: 8px; }
.transcript h3 { font-size: var(--fs-16); margin-bottom: 6px; }
.transcript p { color: var(--text-2); }
.transcript p b { color: var(--text); font-weight: 600; }
.transcript .src { color: var(--brand-ink); font-size: var(--fs-14); }

/* Phone budget and calm design: secondary lines wait for wider screens. */
@media (max-width: 767px) {
  .page-status { font-size: var(--fs-14); }
  .sources .card p { display: none; }
}
.split .h3 { margin-bottom: var(--s-4); }