/* Aatox site: components for the content pages (about, compare, guide, contact).
   Same rules as style.css: Manrope only, one indigo accent, flat tints, spacing and radius from the fixed scales,
   44px touch targets, 4.5:1 text contrast, motion only through the shared reveal in style.css. */

/* ---------- page hero ---------- */
.page-hero { padding-top: var(--s900); }
.page-hero .wrap { padding-block: var(--s500) var(--s600); }
.page-hero .copy { max-width: 760px; }
.page-hero .eyebrow { margin-bottom: var(--s200); }
.page-hero h1 { margin-bottom: var(--s200); }
.page-hero .lead { margin-bottom: var(--s300); max-width: 680px; }
.page-hero .meta { font-size: 14px; line-height: 20px; color: var(--muted); max-width: 680px; }
.page-hero .meta a { color: var(--accent); }
.page-hero .cta-row { margin-top: var(--s400); }

/* stat chips under a hero */
.stats { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s100); margin-top: var(--s400); }
.stats li { display: inline-flex; align-items: center; gap: var(--s75); min-height: 44px; padding: var(--s75) var(--s200); border-radius: var(--r-full); background: var(--surface); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.stats .ico { width: 20px; height: 20px; color: var(--accent); }

/* ---------- card grids ---------- */
.cards { display: grid; gap: var(--s200); grid-template-columns: 1fr; }
.card { display: flex; flex-direction: column; gap: var(--s100); background: var(--surface); border-radius: var(--r-3xl); padding: var(--s300); transition: background 500ms var(--ease), transform 500ms var(--ease); }
.card:hover { background: var(--raised); transform: translateY(-4px); }
.card .ico { width: 32px; height: 32px; color: var(--accent); margin-bottom: var(--s100); }
.card h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; }
.card p, .card li { color: var(--muted); }
.card p b { color: var(--ink); }
.card.soft { background: var(--accent-soft); }
.card.soft:hover { background: #dfd6f8; }
.card .link-arrow { margin-top: auto; padding-top: var(--s200); }
.card .small { color: var(--muted); }
.band-surface .card, .band-tint .card { background: #ffffff; }
.band-surface .card:hover, .band-tint .card:hover { background: #ffffff; }
.band-surface .card.soft, .band-tint .card.soft { background: var(--accent-soft); }
@media (min-width: 640px) {
  .cards.two, .cards.three, .cards.four { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .cards.three { grid-template-columns: repeat(3, 1fr); }
  .cards.four { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- facts grid (definition list as cards) ---------- */
.facts-grid { display: grid; gap: var(--s200); grid-template-columns: 1fr; margin: 0; }
.fact-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r-2xl); padding: var(--s200) var(--s300); }
.fact-card dt { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s50); }
.fact-card dd { margin: 0; color: var(--ink); font-weight: 500; }
.fact-card dd a { color: var(--accent); }
@media (min-width: 640px) { .facts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .facts-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- product spotlight (text beside a phone) ---------- */
.spotlight { display: grid; gap: var(--s500); align-items: center; }
.spotlight .peek { height: 360px; padding-top: var(--s300); border-radius: var(--r-3xl); background: var(--tint); }
.band-tint .spotlight .peek { background: #ffffff; }
.spotlight .peek .phone { --pw: 224px; }
.spotlight .prod { display: flex; align-items: center; gap: var(--s200); margin-bottom: var(--s300); }
.spotlight .prod img { width: 64px; height: 64px; border-radius: var(--r-2xl); }
.spotlight .prod b { display: block; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; }
.spotlight .prod .eyebrow { margin-bottom: 0; }
.spotlight .h2 { margin-bottom: var(--s200); }
.spotlight p { color: var(--muted); max-width: 560px; }
.spotlight p + p { margin-top: var(--s200); }
.spotlight .link-row { display: flex; flex-wrap: wrap; gap: var(--s200) var(--s400); margin-top: var(--s300); }
@media (min-width: 900px) {
  .spotlight { grid-template-columns: 1fr 1fr; }
  .spotlight.flip .peek { order: -1; }
}

/* ---------- numbered items (principles, habits) ---------- */
.numbered { list-style: none; display: grid; gap: var(--s200); }
.numbered li { display: grid; grid-template-columns: 56px 1fr; gap: var(--s200); background: var(--surface); border-radius: var(--r-3xl); padding: var(--s300); }
.band-surface .numbered li, .band-tint .numbered li { background: #ffffff; }
.numbered .n { font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.numbered h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; margin-bottom: var(--s50); }
.numbered p { color: var(--muted); }
@media (min-width: 900px) {
  .numbered.two { grid-template-columns: 1fr 1fr; }
  .numbered.three { grid-template-columns: repeat(3, 1fr); }
  .numbered.three li { grid-template-columns: 1fr; gap: var(--s100); }
}

/* ---------- founder ---------- */
.founder { display: grid; gap: var(--s400); align-items: start; }
.founder .portrait { width: min(100%, 360px); border-radius: var(--r-3xl); overflow: hidden; background: var(--raised); box-shadow: var(--shadow); }
.founder .portrait img { display: block; width: 100%; height: auto; }
.founder .name { font-size: 30px; line-height: 36px; letter-spacing: -0.03em; margin-bottom: var(--s50); }
.founder .role { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--accent); margin-bottom: var(--s200); }
.founder p { color: var(--muted); max-width: 600px; }
.founder p + p { margin-top: var(--s200); }
.founder .facts { list-style: none; display: grid; gap: var(--s100); margin-top: var(--s300); }
.founder .facts li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s100); align-items: start; color: var(--ink); }
.founder .facts .ico { width: 24px; height: 24px; color: var(--accent); }
.founder .facts span { color: var(--muted); }
.founder .profile-links { margin-top: var(--s300); }
@media (min-width: 900px) { .founder { grid-template-columns: 360px 1fr; gap: var(--s600); } }

.profile-links { display: flex; flex-wrap: wrap; gap: var(--s100); }
.profile-links a { display: inline-flex; align-items: center; gap: var(--s75); min-height: 44px; padding: var(--s75) var(--s200); border-radius: var(--r-full); background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; line-height: 20px; text-decoration: none; transition: background 300ms var(--ease); }
.profile-links a:hover { background: var(--raised); color: var(--ink); }
.profile-links .ico { width: 18px; height: 18px; color: var(--accent); }
.band-surface .profile-links a, .band-tint .profile-links a { background: #ffffff; }
.band-surface .profile-links a:hover, .band-tint .profile-links a:hover { background: var(--accent-soft); }

/* ---------- comparison table ---------- */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-3xl); border: 1px solid var(--line); background: #ffffff; }
.cmp { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: var(--s200); border-bottom: 1px solid var(--line); color: var(--muted); }
.cmp thead th { color: var(--ink); font-weight: 700; background: var(--surface); }
.cmp tbody th { color: var(--ink); font-weight: 600; background: #ffffff; position: sticky; left: 0; z-index: 1; min-width: 176px; box-shadow: 1px 0 0 var(--line); }
.cmp .kw { background: var(--tint); color: var(--ink); }
.cmp thead th.kw { background: var(--accent); color: #ffffff; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp-note { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: var(--s200); }

/* ---------- yes / no verdict cards ---------- */
.verdicts { display: grid; gap: var(--s200); }
.verdict { background: #ffffff; border-radius: var(--r-3xl); padding: var(--s300); }
.verdict h2 { font-size: 24px; line-height: 32px; letter-spacing: -0.02em; margin-bottom: var(--s200); }
.verdict ul { list-style: none; display: grid; gap: var(--s100); }
.verdict li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s100); color: var(--muted); }
.verdict li b { color: var(--ink); }
.verdict .ico { width: 24px; height: 24px; margin-top: 2px; color: var(--muted); }
.verdict.yes .ico { color: var(--accent); }
@media (min-width: 900px) { .verdicts { grid-template-columns: 1fr 1fr; } }

/* ---------- straight answer band ---------- */
.answer .wrap { max-width: 880px; }
.answer .eyebrow { color: rgba(255, 255, 255, 0.8); }
.answer .h2 { margin-bottom: var(--s200); }
.answer p { font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.92); }
.answer p + p { margin-top: var(--s200); }
.answer .link-arrow { color: #ffffff; margin-top: var(--s300); }

/* ---------- text beside a chat mock or a pull quote ---------- */
.two-col { display: grid; gap: var(--s400); align-items: center; }
.two-col .sec-head { margin-bottom: 0; }
.two-col .chat { max-width: 440px; background: #ffffff; border-radius: var(--r-3xl); padding: var(--s300); margin-top: 0; }
.two-col .chat .cap { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s75); }
.pull { background: var(--accent-soft); border-radius: var(--r-3xl); padding: var(--s400); font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-deep); max-width: 440px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.1fr 0.9fr; } }

/* ---------- byline ---------- */
.byline { display: flex; align-items: center; gap: var(--s200); }
.byline img { width: 56px; height: 56px; border-radius: var(--r-full); object-fit: cover; }
.byline b { display: block; }
.byline span { color: var(--muted); font-size: 14px; line-height: 20px; }
.byline a { color: var(--accent); }

/* ---------- contact ---------- */
.card a.mailto { font-weight: 700; color: var(--accent); word-break: break-word; }
.checklist { list-style: none; display: grid; gap: var(--s100); max-width: 680px; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s100); color: var(--muted); }
.checklist .ico { width: 24px; height: 24px; color: var(--accent); margin-top: 2px; }
.checklist b { color: var(--ink); }

/* ---------- call to action on these pages ---------- */
.cta-panel .cta-row { margin-top: var(--s300); }
.cta-panel .link-arrow { color: #ffffff; }