/* Aatox home page. Builds on style.css and marketing.css. */

/* ---------- hero ---------- */
.hero { padding-top: var(--s900); }
.hero-grid { display: grid; gap: var(--s400); align-items: center; padding-block: var(--s400) var(--s600); }
.hero-copy { max-width: 680px; }
.hero-copy .chip { margin-bottom: var(--s300); }
.hero-copy h1 { margin-bottom: var(--s200); }
.hero-copy .lead { margin-bottom: var(--s400); }
.hero-phones { display: flex; justify-content: center; align-items: flex-start; padding-bottom: var(--s200); }
.hero-phones .phone-back { --pw: 160px; margin-top: var(--s600); }
.hero-phones .phone-front { --pw: 192px; margin-left: calc(-1 * var(--s500)); z-index: 2; }
@media (min-width: 640px) {
  .hero-phones .phone-back { --pw: 208px; margin-top: var(--s700); }
  .hero-phones .phone-front { --pw: 248px; margin-left: calc(-1 * var(--s500)); }
}
@media (min-width: 960px) {
  .hero { min-height: 100dvh; display: flex; align-items: center; padding-bottom: var(--s400); }
  .hero .wrap { width: min(1200px, 100% - var(--s600)); }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s600); padding-block: var(--s400); }
  .hero-phones .phone-back { --pw: 240px; margin-top: var(--s800); }
  .hero-phones .phone-front { --pw: 280px; margin-left: calc(-1 * var(--s600)); }
}

/* ---------- good to know strip ---------- */
.strip { padding-block: var(--s400) var(--s700); }
.facts { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--s300); }
.facts li { display: flex; gap: var(--s100); align-items: flex-start; }
.facts .ico { width: 24px; height: 24px; color: var(--accent); margin-top: var(--s25); }
.facts b { display: block; font-weight: 700; }
.facts span { display: block; font-size: 14px; line-height: 20px; color: var(--muted); }
@media (min-width: 640px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(4, 1fr); gap: var(--s400); } }

/* ---------- product spotlight ---------- */
.spot { display: grid; gap: var(--s600); align-items: center; }
.prod { display: flex; align-items: center; gap: var(--s200); margin-bottom: var(--s300); }
.prod img { width: 64px; height: 64px; border-radius: var(--r-2xl); flex: none; }
.prod .eyebrow { margin: 0; }
.prod b { display: block; font-size: 24px; line-height: 32px; letter-spacing: -0.02em; }
.spot .h2 { margin-bottom: var(--s200); }
.new-note { display: grid; grid-template-columns: auto 1fr; gap: var(--s100); align-items: start; padding: var(--s200); background: #ffffff; border-radius: var(--r-2xl); margin-block: var(--s300); }
.new-note p { color: var(--muted); }
.new-note b { color: var(--ink); }
.checks { list-style: none; display: grid; gap: var(--s75); margin-bottom: var(--s300); }
.checks li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s75); color: var(--muted); }
.checks .ico { width: 20px; height: 20px; color: var(--accent); margin-top: var(--s25); }
.fan { position: relative; height: 380px; }
.fan .phone { position: absolute; top: 0; left: 50%; }
.fan .f-c { --pw: 192px; transform: translateX(-50%); z-index: 2; }
.fan .f-l, .fan .f-r { --pw: 144px; top: var(--s500); }
.fan .f-l { transform: translateX(calc(-50% - 96px)) rotate(-6deg); }
.fan .f-r { transform: translateX(calc(-50% + 96px)) rotate(6deg); }
@media (min-width: 640px) {
  .fan { height: 480px; }
  .fan .f-c { --pw: 232px; }
  .fan .f-l, .fan .f-r { --pw: 184px; top: var(--s500); }
  .fan .f-l { transform: translateX(calc(-50% - 144px)) rotate(-6deg); }
  .fan .f-r { transform: translateX(calc(-50% + 144px)) rotate(6deg); }
}
@media (min-width: 960px) {
  .spot { grid-template-columns: 1fr 1fr; gap: var(--s700); }
  .fan { height: 560px; }
  .fan .f-c { --pw: 264px; }
  .fan .f-l, .fan .f-r { --pw: 208px; top: var(--s600); }
  .fan .f-l { transform: translateX(calc(-50% - 168px)) rotate(-6deg); }
  .fan .f-r { transform: translateX(calc(-50% + 168px)) rotate(6deg); }
}

/* ---------- what it does: an uneven bento, not a row of equal cards ---------- */
.bento { display: grid; gap: var(--s200); grid-template-columns: 1fr; }
.tile { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-3xl); padding: var(--s300); transition: all 500ms var(--ease); }
.tile:hover { background: var(--raised); transform: translateY(-4px); }
.tile .ico { width: 32px; height: 32px; color: var(--accent); }
.tile h3 { font-size: 20px; line-height: 28px; letter-spacing: -0.01em; margin: var(--s200) 0 var(--s75); }
.tile p { color: var(--muted); max-width: 520px; }
.tile .visual { margin-top: auto; padding-top: var(--s300); }
.tile.soft { background: var(--accent-soft); }
.tile.soft:hover { background: #dfd6f8; }
.tile .chip { align-self: flex-start; margin-bottom: var(--s100); }
.tile .chip + .ico { margin-top: var(--s0); }
.timeline { list-style: none; display: grid; gap: var(--s200); }
.timeline li { display: grid; grid-template-columns: 12px 1fr; gap: var(--s100); align-items: start; font-weight: 600; }
.timeline li::before { content: ""; width: 8px; height: 8px; margin-top: var(--s75); border-radius: var(--r-full); background: var(--accent); opacity: 0.45; }
.timeline li:last-child::before { opacity: 1; box-shadow: 0 0 0 4px rgba(83, 46, 207, 0.2); }
.timeline small { display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--muted); }
.searchbox { display: flex; align-items: center; gap: var(--s100); padding: var(--s100) var(--s200); background: #ffffff; border-radius: var(--r-xl); color: var(--muted); }
.searchbox .ico { width: 20px; height: 20px; color: var(--muted); }
.results { list-style: none; display: grid; gap: var(--s75); margin-top: var(--s75); }
.results li { display: flex; justify-content: space-between; gap: var(--s100); padding: var(--s75) var(--s200); background: #ffffff; border-radius: var(--r-xl); font-size: 14px; line-height: 20px; }
.results b { font-weight: 600; }
.results span { color: var(--muted); text-align: right; }
.minis { list-style: none; display: grid; grid-template-columns: 1fr; gap: var(--s300); }
.minis li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s100); }
.minis .ico { width: 24px; height: 24px; color: var(--accent); margin: 0; }
.minis b { display: block; }
.minis span { color: var(--muted); font-size: 14px; line-height: 20px; }
.tile.wide h3 { margin-top: 0; }
@media (min-width: 640px) { .minis { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .b-a { grid-column: span 7; } .b-b { grid-column: span 5; }
  .b-c, .b-d, .b-e { grid-column: span 4; }
  .b-f { grid-column: span 12; }
  .minis { grid-template-columns: repeat(4, 1fr); }
  .tile.wide { flex-direction: row; gap: var(--s600); align-items: center; }
  .tile.wide h3 { flex: none; width: 240px; }
  .tile.wide .minis { flex: 1; }
}

/* ---------- how it works: three steps climbing down the page ---------- */
.steps { list-style: none; display: grid; gap: var(--s600); }
.step { display: grid; gap: var(--s200); align-content: start; }
.step .num { font-size: 60px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.step h3 { font-size: 24px; line-height: 32px; }
.step p { color: var(--muted); max-width: 440px; }
.step .peek { height: 340px; padding-top: var(--s300); border-radius: var(--r-3xl); background: var(--tint); margin-top: var(--s100); }
.step .peek .phone { --pw: 208px; }
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s300); align-items: start; }
  .step:nth-child(2) { margin-top: var(--s600); }
  .step:nth-child(3) { margin-top: var(--s900); }
}

/* ---------- private by design ---------- */
.priv { display: grid; gap: var(--s600); align-items: start; }
.priv .sec-head { margin-bottom: var(--s300); }
.priv .peek { height: 320px; padding-top: var(--s300); border-radius: var(--r-3xl); background: var(--tint); margin-top: var(--s400); display: none; }
.priv .peek .phone { --pw: 208px; }
@media (min-width: 960px) {
  .priv { grid-template-columns: 1fr 1.25fr; gap: var(--s700); }
  .priv .peek { display: flex; }
}

/* ---------- principles ---------- */
.pr-list { list-style: none; }
.pr { display: grid; gap: var(--s100); padding-block: var(--s400); border-top: 1px solid var(--line); }
.pr:last-child { border-bottom: 1px solid var(--line); }
.pr .n { font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--accent); }
.pr h3 { font-size: 24px; line-height: 32px; }
.pr p { color: var(--muted); max-width: 480px; }
@media (min-width: 760px) {
  .pr { grid-template-columns: 120px 1fr 1.2fr; gap: var(--s300); align-items: baseline; }
}

/* ---------- the Aatox idea ---------- */
.next { display: grid; gap: var(--s500); align-items: center; }
.next .mark { width: 128px; height: 128px; }
.next .h2 { margin-bottom: var(--s200); }
.next p { color: var(--muted); max-width: 560px; }
.next p + p { margin-top: var(--s200); }
@media (min-width: 900px) { .next { grid-template-columns: 240px 1fr; gap: var(--s700); } .next .mark { width: 200px; height: 200px; } }