/* Homepage only. The fold is a copy column that paints itself in, then
   splits to reveal a product mock on the right, after multify.co. */
.home-fold { min-height: calc(100vh - 63px); min-height: calc(100dvh - 63px); display: flex; flex-direction: column; }
.home-hero { flex: 1 0 auto; display: flex; align-items: center; text-align: center; padding: 2.5rem 1rem; }
.home-hero-inner { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; container-type: inline-size; }
@media (min-width: 1400px) { .home-hero-inner { max-width: min(1600px, 92vw); } }
.home-copy { flex: 1 1 auto; min-width: 0; }

.home-title { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: clamp(2.1rem, 6.5vw, 4.5rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 1.25rem; color: var(--sc-text); transition: font-size 0.75s cubic-bezier(0.65, 0, 0.35, 1); }
.home-verb, .home-noun { display: block; }
.home-verb { height: 1.12em; overflow: hidden; }
.home-verb-track { display: block; transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1); will-change: transform; }
.home-verb-item { display: block; height: 1.12em; white-space: nowrap; }

/* Five model tiles. The first four swoosh in from the right, then a reel of
   other names flutters through the fifth and lands on Grok. */
.home-brands { display: flex; justify-content: center; gap: 0.6rem; height: 3rem; margin: 0 0 1.4rem; }
.home-brand { position: relative; width: 3rem; height: 3rem; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--sc-border); background: var(--sc-card); opacity: 0; transition: opacity 0.25s ease; }
.home-brand.is-on { opacity: 1; }
.home-brand img { position: absolute; width: 1.75rem; height: 1.75rem; object-fit: contain; will-change: transform, opacity; }
.home-brand img.in { animation: brand-in 0.46s cubic-bezier(0.2, 0.85, 0.3, 1.12) forwards; }
.home-brand img.out { animation: brand-out 0.26s ease-out forwards; }
@keyframes brand-in { from { opacity: 0; transform: translate(var(--from, 90px), 12px) rotate(-16deg) scale(0.55); } to { opacity: 1; transform: none; } }
@keyframes brand-out { to { opacity: 0; } }
[data-theme="dark"] .home-brand img.is-ink, [data-theme="dark"] .mock-logo img.ata-logo--ink { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 575.98px) { .home-brands { gap: 0.45rem; height: 2.6rem; } .home-brand { width: 2.6rem; height: 2.6rem; } .home-brand img { width: 1.45rem; height: 1.45rem; } }

.home-sub { font-size: clamp(1.15rem, 2.4vw, 1.65rem); font-weight: 600; line-height: 1.35; color: var(--sc-text); margin: 0 auto 2.25rem; max-width: 30ch; transition: font-size 0.75s cubic-bezier(0.65, 0, 0.35, 1), margin-bottom 0.75s cubic-bezier(0.65, 0, 0.35, 1); }
.home-sub-line1 { position: relative; display: block; min-height: 1.35em; overflow: hidden; }
.home-sub-tease { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(110%); }
.home-sub-tease.is-in { animation: tease-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.home-sub-tease.is-out { animation: tease-out 0.4s cubic-bezier(0.6, 0, 0.8, 0.3) forwards; }
@keyframes tease-in { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
@keyframes tease-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-110%); } }
.home-sub-type, .home-sub-slide { display: block; min-height: 1.35em; }
.home-sub-type.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 0.08em; vertical-align: -0.12em; background: currentColor; animation: home-caret 0.8s steps(1) infinite; }
@keyframes home-caret { 50% { opacity: 0; } }
.home-sub-slide { opacity: 0; transform: translateY(0.7em); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); color: var(--sc-muted); }
.home-sub-slide.is-in { opacity: 1; transform: none; }

.home-cta { display: inline-flex; }
.home-note { font-size: 0.8rem; color: var(--sc-muted); margin: 1rem 0 0; }
.home-note-line { display: block; margin-top: 0.35rem; }
.home-note a { color: var(--sc-text); font-weight: 600; border-bottom: 1px solid var(--sc-border); }
.home-note a:hover { border-bottom-color: var(--sc-text); }

/* Split */
.home-media { flex: 0 0 0%; max-width: 0; overflow: hidden; transition: flex-basis 0.75s cubic-bezier(0.65, 0, 0.35, 1), max-width 0.75s cubic-bezier(0.65, 0, 0.35, 1); }
.home-media-inner { box-sizing: border-box; width: 60cqw; padding-left: 2.5rem; opacity: 0; transform: translateX(2.5rem); transition: opacity 0.5s ease 0.2s, transform 0.75s cubic-bezier(0.65, 0, 0.35, 1); }
.home-hero.is-split .home-media { flex-basis: 60%; max-width: 60%; }
.home-hero.is-split .home-media-inner { opacity: 1; transform: none; }
.home-hero.is-split .home-title { font-size: clamp(2rem, 4.2vw, 3.3rem); }
.home-hero.is-split .home-sub { font-size: clamp(1.05rem, 1.8vw, 1.35rem); margin-bottom: 1.75rem; }
.home-hero.is-split .home-brands { margin-bottom: 1.1rem; }

/* Tabs above the frame: the active one drains its bar while its panel shows. */
.home-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0 0 0.75rem; }
.home-tab { position: relative; display: flex; align-items: flex-start; gap: 0.45rem; padding: 0.55rem 0.75rem 0.7rem; border: 1px solid var(--sc-border); background: transparent; color: var(--sc-muted); font: inherit; font-size: 0.78rem; font-weight: 500; line-height: 1.25; text-align: left; cursor: pointer; transition: color 0.2s, border-color 0.2s, background-color 0.2s; }
.home-tab svg { width: 0.95rem; height: 0.95rem; flex: none; margin-top: 0.05rem; }
.home-tab:hover { color: var(--sc-text); border-color: var(--sc-muted); background: var(--sc-card); }
.home-tab.is-active { color: var(--sc-text); border-color: var(--sc-text); }
.home-tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; display: block; overflow: hidden; }
.home-tab-bar > b { display: block; height: 100%; background: var(--sc-border); transform-origin: left center; transform: scaleX(1); }
.home-tab.is-active .home-tab-bar > b { background: var(--sc-text); transition: transform linear; }
.home-tab.is-done .home-tab-bar > b { transform: scaleX(0); }

/* Browser-window mock */
.home-frame { margin: 0; border: 1px solid var(--sc-border); background: var(--sc-bg); text-align: left; }
.home-frame-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--sc-border); }
.home-frame-bar b { width: 0.6rem; height: 0.6rem; background: var(--sc-border); display: block; }
.home-frame-bar em { font-style: normal; font-size: 0.72rem; color: var(--sc-muted); margin-left: 0.75rem; padding: 0.15rem 0.6rem; border: 1px solid var(--sc-border); background: var(--sc-card); flex: 1; text-align: center; }
.home-frame-stage { position: relative; aspect-ratio: 16 / 9.6; overflow: hidden; }
.home-panel { position: absolute; inset: 0; padding: 1.1rem 1.25rem; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; display: flex; flex-direction: column; gap: 0.75rem; }
.home-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.mock-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mock-head strong { font-size: 0.95rem; font-weight: 600; }
.mock-head span { font-size: 0.72rem; color: var(--sc-muted); }
.mock-rows { display: grid; gap: 1px; background: var(--sc-border); border: 1px solid var(--sc-border); }
.mock-row { display: grid; grid-template-columns: 1.9rem 6.5rem minmax(0, 1fr) 5.5rem; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; background: var(--sc-bg); font-size: 0.8rem; }
.mock-logo { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--sc-border); background: var(--sc-card); overflow: hidden; }
.mock-logo img { height: 0.7rem; width: auto; max-width: 1.6rem; object-fit: contain; }
.mock-row .mock-logo, .mock-answer .mock-logo { flex: none; }
.mock-row-name { font-weight: 600; }
.mock-bar { height: 0.55rem; background: var(--sc-card2); position: relative; overflow: hidden; }
.mock-bar > b { position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); background: var(--sc-text); transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.home-panel.is-active .mock-bar > b { transform: scaleX(1); }
.mock-pill { justify-self: end; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.45rem; border: 1px solid var(--sc-border); color: var(--sc-muted); white-space: nowrap; }
.mock-pill.ok { color: var(--sc-success); border-color: var(--sc-success); }
.mock-pill.bad { color: var(--sc-danger); border-color: var(--sc-danger); }
.mock-q { font-size: 0.95rem; font-weight: 600; line-height: 1.35; margin: 0; }
.mock-answers { display: grid; gap: 1px; background: var(--sc-border); border: 1px solid var(--sc-border); }
.mock-answer { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0.75rem; background: var(--sc-bg); font-size: 0.78rem; line-height: 1.45; color: var(--sc-muted); align-items: start; }
.mock-answer .hl { color: var(--sc-text); font-weight: 600; }
.mock-answer small { display: block; font-size: 0.68rem; margin-top: 0.15rem; color: var(--sc-muted); }
.mock-code { margin: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--sc-border); background: var(--sc-card); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; line-height: 1.55; color: var(--sc-text); white-space: pre; overflow: hidden; }
.mock-code .c { color: var(--sc-muted); }
.mock-foot { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--sc-muted); }
.mock-foot .mock-pill { justify-self: auto; }
@media (max-width: 575.98px) { .mock-row { grid-template-columns: 1.9rem minmax(0, 1fr) 4.5rem; } .mock-row .mock-bar { display: none; } .home-frame-stage { aspect-ratio: auto; min-height: 20rem; } .home-tabs { grid-template-columns: 1fr; } }

@media (max-width: 991.98px) {
  .home-hero-inner { flex-direction: column; align-items: stretch; }
  .home-media { flex: none; max-width: none; overflow: visible; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.75s cubic-bezier(0.65, 0, 0.35, 1); }
  .home-media-inner { width: auto; padding: 0; min-height: 0; overflow: hidden; transform: translateY(1.5rem); }
  .home-hero.is-split .home-media { grid-template-rows: 1fr; flex-basis: auto; max-width: none; }
  .home-hero.is-split .home-media-inner { transform: none; }
  .home-tabs { margin-top: 2.25rem; }
  .home-hero.is-split .home-title { font-size: clamp(2.1rem, 6.5vw, 4.5rem); }
  .home-hero.is-split .home-sub { font-size: clamp(1.15rem, 2.4vw, 1.65rem); margin-bottom: 2.25rem; }
}
@media (max-width: 575.98px) {
  .home-hero { padding: 1.75rem 1rem; }
  .home-title, .home-hero.is-split .home-title { font-size: 2.1rem; margin-bottom: 1rem; }
  .home-sub, .home-hero.is-split .home-sub { font-size: 1.15rem; margin-bottom: 1.75rem; }
  .home-cta { width: 100%; justify-content: center; }
}
@media (max-height: 640px) { .home-hero { padding: 0.75rem 1rem; } .home-title { font-size: clamp(1.75rem, 5vw, 3rem); margin-bottom: 0.75rem; } .home-sub { margin-bottom: 1.25rem; } }

/* Below the fold */
.home-more { border-top: 1px solid var(--sc-border); padding: 4.5rem 1rem 5rem; }
.home-more-inner { max-width: 1400px; margin: 0 auto; }
.home-more h2 { font-family: 'Instrument Sans', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.85rem; }
.home-lede { color: var(--sc-muted); font-size: 1.05rem; line-height: 1.55; max-width: 64ch; margin: 0 0 2.5rem; }
.home-public { border-top: 1px solid var(--sc-border); padding: 2rem 1rem; }
.home-public-inner { max-width: 1400px; margin: 0 auto; }
.home-public-list { display: grid; gap: 1px; background: var(--sc-border); border: 1px solid var(--sc-border); margin-top: 0.9rem; }
.home-public-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; background: var(--sc-bg); font-size: 0.9rem; }
.home-public-item:hover { background: var(--sc-card); }
.home-public-item span { color: var(--sc-muted); font-size: 0.78rem; white-space: nowrap; }
.home-public-item svg { width: 1rem; height: 1rem; color: var(--sc-muted); flex: none; }
.home-faq { margin-top: 3.5rem; max-width: 72ch; }
.home-faq h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.home-faq h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.35rem; }
.home-faq p { color: var(--sc-muted); line-height: 1.55; margin: 0; }
.home-cta-row { margin-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.home-cta-row .ata-footer-link { font-weight: 600; color: var(--sc-text); }
@media (max-width: 575.98px) { .home-more { padding: 3rem 1rem 3.5rem; } .home-cta-row .btn-ata-lg { width: 100%; justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  .home-verb-track, .home-media, .home-media-inner, .home-title, .home-sub, .home-tab, .home-sub-slide, .mock-bar > b { transition: none; }
  .home-sub-slide { transform: none; }
  .home-brand img.in, .home-brand img.out { animation-duration: 0.01s; }
  .home-sub-type.is-typing::after { animation: none; }
}