.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 112px 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.pill-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand-gradient);
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--violet);
}

.title {
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.lead {
  margin: 0;
  font-size: 1.12rem;
  color: var(--text-secondary);
}

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Store badge */

store-badge {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px 11px 18px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  line-height: 1.15;
}

.store-badge svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.store-badge small {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.7;
}

.store-badge strong {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cta-note {
  font-size: 0.92rem;
  color: var(--muted);
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 0;
  text-align: center;
}

/* Two soft glows, each on its own layer, drifting on different timers so the loop never shows.
   Each glow fades to transparent inside its own box, so no edge shows however far it moves.
   Movement and size run as separate two-step animations: smooth, with no pause mid-loop. */
.hero {
  --glow-a: rgba(255, 138, 91, 0.2);
  --glow-b: rgba(124, 58, 237, 0.15);
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  top: -4%;
  width: 80%;
  height: 90%;
  pointer-events: none;
  will-change: translate, scale;
}

.hero::before {
  left: -14%;
  background: radial-gradient(closest-side, var(--glow-a), transparent);
  animation:
    hero-drift-a 13s ease-in-out infinite alternate,
    hero-breathe 7s ease-in-out infinite alternate;
}

.hero::after {
  left: 34%;
  background: radial-gradient(closest-side, var(--glow-b), transparent);
  animation:
    hero-drift-b 17s ease-in-out infinite alternate,
    hero-breathe 9s ease-in-out infinite alternate-reverse;
}

@keyframes hero-drift-a {
  to { translate: 42% 12%; }
}

@keyframes hero-drift-b {
  to { translate: -42% -10%; }
}

@keyframes hero-breathe {
  from { scale: 0.9; }
  to { scale: 1.15; }
}

/* On a narrow screen the hero is tall, so a glow sized off it turns into a column: widen it. */
@media (max-width: 640px) {
  .hero::before,
  .hero::after {
    width: 150%;
    height: 60%;
  }
  .hero::before {
    left: -75%;
  }
  .hero::after {
    left: 25%;
  }
}

.hero > * {
  position: relative;
}

.hero h1 {
  max-width: 860px;
  margin: 22px auto 20px;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero .lead {
  max-width: 600px;
  margin: 0 auto 32px;
  font-size: 1.2rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

/* Launch sign-up in the hero, in place of the store badge until the app is live. */
.hero-signup {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.hero-signup .waitlist-form {
  width: 100%;
}

/* The early sign-up offer, just above the hero form. */
.signup-offer {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--violet-soft);
  color: var(--violet);
  font-size: 0.9rem;
  font-weight: 700;
}

.hero-signup .cta-note {
  margin-top: 10px;
}

.hero-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 64px;
  padding-top: 8px;
  height: 600px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.hero-phones app-phone {
  flex: none;
}

.hero-phones .phone-main {
  width: 320px;
  z-index: 2;
}

.hero-phones .phone-side {
  width: 280px;
}

.hero-phones .phone-left {
  margin-right: -40px;
  transform: rotate(-6deg) translateY(72px);
}

.hero-phones .phone-right {
  margin-left: -40px;
  transform: rotate(6deg) translateY(72px);
}

/* Condition chips */

.conditions {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}

.conditions p {
  margin: 0 0 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface-muted);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Feature rows */

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 72px;
}

.feature-row + .feature-row {
  margin-top: 128px;
}

.feature-row.flip .feature-copy {
  order: 2;
}

.feature-copy {
  max-width: 480px;
}

.feature-visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

.feature-visual::before {
  content: '';
  position: absolute;
  inset: 0 6%;
  border-radius: 40px;
  background: var(--tint, var(--violet-soft));
}

.feature-visual app-phone {
  position: relative;
}

.tint-coral {
  --tint: linear-gradient(160deg, #fff1ea, #ffe4ea);
}

.tint-violet {
  --tint: linear-gradient(160deg, #f5f3ff, #ede9fe);
}

.tint-green {
  --tint: linear-gradient(160deg, #f0fdf4, #dcfce7);
}

.tint-sky {
  --tint: linear-gradient(160deg, #f0f9ff, #e0f2fe);
}

.checks {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 34px;
  color: var(--text-secondary);
}

.checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}

.checks strong {
  color: var(--text);
}

/* Screen gallery */

.gallery-head {
  max-width: 620px;
  margin: 0 auto 56px;
  text-align: center;
}

.gallery {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.gallery figure {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 310px;
  margin: 0;
  text-align: center;
}

.gallery app-phone {
  width: 260px;
}

.gallery figcaption {
  margin-top: 20px;
  font-weight: 700;
}

.gallery figcaption span {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}

/* Tabby AI */

.ai {
  background: linear-gradient(180deg, transparent, var(--violet-soft) 30%, var(--violet-soft) 70%, transparent);
}

.ai-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 72px;
}

.ai-point {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}

.ai-point h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ai-point p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.ai-note {
  margin: 32px 0 0;
  text-align: center;
  font-size: 0.92rem;
  color: var(--muted);
}

/* Plus */

.plus {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 56px;
  padding: 64px;
  border-radius: 40px;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(124, 58, 237, 0.45), transparent 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(236, 78, 119, 0.35), transparent 70%),
    #120d1d;
  color: #fff;
  overflow: hidden;
}

.plus .eyebrow {
  color: #c4b5fd;
}

.plus .lead {
  color: rgba(255, 255, 255, 0.78);
}

.plus .checks li {
  color: rgba(255, 255, 255, 0.78);
}

.plus .checks strong {
  color: #fff;
}

.plus .checks li::before {
  background-color: #7c3aed;
}

.plus-visual {
  display: flex;
  justify-content: center;
}

.plus-price {
  margin-top: 28px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}

/* FAQ */

.faq {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
}

.faq details {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.faq details:first-child {
  padding-top: 0;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  font-weight: 500;
  color: var(--faint);
}

.faq details[open] summary::after {
  content: '–';
}

.faq details p {
  margin: 10px 0 0;
  color: var(--text-secondary);
}

/* Closing call to action */

.closing {
  padding: 96px 24px;
  border-radius: 40px;
  background: var(--brand-gradient);
  color: #fff;
  text-align: center;
}

.closing img {
  border-radius: 22px;
  box-shadow: 0 16px 40px -12px rgba(59, 24, 48, 0.5);
}

.closing .title {
  margin: 28px 0 12px;
}

.closing .lead {
  margin: 0 auto 32px;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.9);
}

.closing .store-badge {
  background: #fff;
  color: var(--ink);
}

/* About */

.about-hero {
  position: relative;
  padding: 88px 0 48px;
  text-align: center;
}

.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(35% 60% at 35% 70%, rgba(255, 138, 91, 0.18), transparent 70%),
    radial-gradient(35% 60% at 65% 60%, rgba(124, 58, 237, 0.12), transparent 70%);
  pointer-events: none;
}

.about-hero > * {
  position: relative;
}

.about-hero h1 {
  max-width: 820px;
  margin: 0 auto 18px;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.about-hero .lead {
  max-width: 520px;
  margin: 0 auto;
}

.about-cats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.cat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 320px;
  max-width: 100%;
  padding: 18px 24px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.cat-card h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.cat-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.cat-initial {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
}

.cat-initial-coral {
  background: var(--brand-gradient);
}

.cat-initial-violet {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.story {
  max-width: 760px;
  padding-top: 56px;
}

.story-card {
  padding: 48px;
  border: 1px solid var(--border);
  border-radius: 32px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.story-card p {
  margin: 0 0 20px;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.story-card p:first-child {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
}

.signature {
  display: flex;
  flex-direction: column;
  margin: 32px 0 0 !important;
  font-weight: 800;
  font-size: 1.2rem !important;
  color: var(--text) !important;
}

.signature span {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
}

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.values article {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.values h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.values p {
  margin: 0;
  color: var(--text-secondary);
}

.contact-badge {
  padding: 14px 28px;
  font-weight: 700;
  font-size: 1.05rem;
}

.closing .contact-badge {
  background: #fff;
  color: var(--ink);
}

/* Home page story teaser */

.story-teaser {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 40px;
  padding: 48px;
  border: 1px solid var(--border);
  border-radius: 32px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.story-teaser .cat-pair {
  display: flex;
}

.story-teaser .cat-initial {
  width: 84px;
  height: 84px;
  font-size: 2rem;
  border: 4px solid var(--surface);
}

.story-teaser .cat-initial + .cat-initial {
  margin-left: -18px;
}

.story-teaser blockquote {
  margin: 0 0 16px;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.story-teaser a {
  font-weight: 700;
  text-decoration: none;
}

/* Vets */

.vet-hero {
  padding-bottom: 96px;
}

.button-dark {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
}

.report-card {
  max-width: 560px;
  margin: 64px auto 0;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: left;
}

.report-patient {
  display: flex;
  align-items: center;
  gap: 14px;
}

.report-patient strong {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.report-patient span {
  font-size: 0.9rem;
  color: var(--muted);
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0 16px;
}

.report-metrics div {
  padding: 14px;
  border-radius: 16px;
  background: var(--surface-muted);
}

.report-metrics small {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}

.report-metrics b {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}

.report-alert {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.92rem;
}

.report-summary {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: var(--violet-soft);
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.report-summary b {
  color: var(--violet);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
  counter-reset: step;
}

.steps .ai-point::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  font-weight: 800;
}

/* Waitlist forms */

.waitlist-form {
  display: grid;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}

.waitlist-row {
  display: flex;
  gap: 8px;
}

.waitlist-form input {
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.waitlist-form input::placeholder {
  color: var(--faint);
}

.waitlist-form input:focus {
  outline: 2px solid var(--violet);
  outline-offset: 1px;
}

.waitlist-form button {
  flex-shrink: 0;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.waitlist-form button:disabled {
  opacity: 0.7;
  cursor: default;
}

.waitlist-error {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pink);
}

.waitlist-error:empty {
  display: none;
}

.waitlist-done {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 700;
  text-align: center;
}

/* The form swaps for the thank-you card after a successful send. */
.waitlist-form[hidden],
.waitlist-done[hidden] {
  display: none;
}

.waitlist-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Calm entrance, no overshoot */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after {
    animation: none;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 960px) {
  .section {
    padding: 80px 0;
  }
  .feature-row,
  .plus,
  .faq {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .feature-row.flip .feature-copy {
    order: 0;
  }
  .feature-row + .feature-row {
    margin-top: 96px;
  }
  .plus {
    padding: 48px 20px 40px;
  }
  .values {
    grid-template-columns: 1fr;
  }
  .story-teaser {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 28px;
  }
  .story-card {
    padding: 32px 26px;
  }
  .gallery {
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 24px 24px;
    margin: 0 -24px;
    scroll-snap-type: x mandatory;
  }
  .gallery figure {
    scroll-snap-align: center;
  }
  .ai-points {
    grid-template-columns: 1fr 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* The sign-up form has to fit on the first screen, Instagram's in-app browser included. */
  .hero {
    padding-top: 28px;
  }
  .hero h1 {
    margin: 16px auto 14px;
    font-size: 2.4rem;
  }
  .hero .lead {
    margin-bottom: 20px;
    font-size: 1.05rem;
  }
  .hero-signup {
    gap: 8px;
  }
  .hero-signup .cta-note {
    margin-top: 0;
  }
  .hero-phones {
    height: 500px;
    margin-top: 40px;
  }
  .hero-phones .phone-main {
    width: 260px;
  }
  .hero-phones .phone-side {
    display: none;
  }
  .feature-visual app-phone {
    width: 260px;
  }
  .ai-points {
    grid-template-columns: 1fr;
  }
  .closing {
    padding: 72px 20px;
    border-radius: 28px;
  }
  .report-card {
    padding: 20px;
  }
  .report-metrics {
    grid-template-columns: 1fr 1fr;
  }
  .waitlist-row {
    display: grid;
    grid-template-columns: 1fr;
  }
}