/*
 * equesty.app — the home and result pages (website-1 AD-12; prototype rev 3,
 * Desktop 1440 and iPhone 393, deltas P-1…P-8). Every rule sits under
 * `body.home`; the legal pages never load this file.
 *
 * Every colour and radius comes from tokens.css (GENERATED from
 * design/tokens.json — `yarn tokens:generate`). A veil or a shadow that needs
 * a token at partial opacity is written with `color-mix()` over that token,
 * never as a literal, so the prototype's rgba() stops keep their token. The
 * prototype's container queries are media queries here, at 760 and 1200 px:
 * the hero's `<source media>` cannot read a container, and the two must
 * agree on where the landscape photo takes over. Three more queries (ST-3;
 * .claude/rules/site/website-changes.md §12): under 393 px the header
 * tightens; at 960 px the section links join it, where they fit on one row
 * beside the switch and the long pill; the hero's device frame, the cards'
 * room for it and the three-column steps start at 1000 px. From 760 to
 * 1000 px the page has the landscape hero and the one-row header, a narrower
 * hero column with a 56 px h1, and the cards and steps keep the phone layout.
 *
 * Type: Playfair 400 for h1 and h2, 400 italic for the step numbers and the
 * hero note, Playfair 700 for the card titles; DM Sans 400/600 for the rest
 * (styles.css declares the faces; AD-11).
 */

body.home {
  --page-inline: 20px;
  --veil-0: color-mix(in srgb, var(--color-bg-parchment) 0%, transparent);
  --veil-25: color-mix(in srgb, var(--color-bg-parchment) 25%, transparent);
  --veil-80: color-mix(in srgb, var(--color-bg-parchment) 80%, transparent);
  --veil-86: color-mix(in srgb, var(--color-bg-parchment) 86%, transparent);
  --veil-90: color-mix(in srgb, var(--color-bg-parchment) 90%, transparent);
  --veil-96: color-mix(in srgb, var(--color-bg-parchment) 96%, transparent);
  --forest-30: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --forest-35: color-mix(in srgb, var(--color-primary) 35%, transparent);
  --forest-45: color-mix(in srgb, var(--color-primary) 45%, transparent);
  --forest-60: color-mix(in srgb, var(--color-primary) 60%, transparent);
  --forest-93: color-mix(in srgb, var(--color-primary) 93%, transparent);
  --shadow-6: color-mix(in srgb, var(--color-primary) 6%, transparent);
  --shadow-8: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --ink-60: color-mix(in srgb, var(--color-black) 60%, transparent);
  --serif-regular: var(--font-display-regular), Georgia, 'Times New Roman', serif;
  overflow-x: hidden;
}

body.home .wrap {
  max-width: 1280px;
}

body.home button:focus-visible,
body.home input:focus-visible,
body.home textarea:focus-visible {
  outline: 3px solid var(--color-info);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

body.home .eyebrow {
  letter-spacing: 0.2em;
}

body.home .muted {
  color: var(--color-ink-muted-text);
}

body.home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--sans-strong);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

body.home .btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

body.home .btn-primary:hover {
  background: var(--color-primary-gradient-end);
}

body.home .btn-light {
  background: var(--color-white);
  color: var(--color-primary);
}

/* ── Header, over the hero ──────────────────────────────── */

body.home .hdr {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  border-bottom: 0;
}

body.home:has(> main.result) .hdr {
  position: static;
  border-bottom: 1px solid var(--color-linen);
}

body.home .hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

body.home .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 26px;
  letter-spacing: -0.4px;
}

body.home .logo-mark {
  display: block;
  width: 34px;
  height: 42px;
  object-fit: contain;
}

/* The section links' landmark itself is hidden until its links show, so no
   empty "navigation" reaches a screen reader and no empty flex item takes a gap. */
body.home .hdr-in > nav {
  display: none;
}

body.home .nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
}

body.home .nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

body.home .nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.home .hdr-r {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* A parchment pill behind PL / EN, so the pair reads on a token ground over
   the photo (ink-muted-text on parchment 4.70:1; a veil lets the photo through
   and falls under 4.5:1); each link is a 44 × 44 target (ST-3). */
body.home .lang {
  display: inline-flex;
  gap: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-parchment);
  font-family: var(--sans-strong);
  font-weight: 600;
  font-size: 13px;
}

body.home .lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 7px;
  border-radius: var(--radius-pill);
  color: var(--color-ink-muted-text);
  text-decoration: none;
}

body.home .lang a[aria-current='page'] {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body.home .hdr .btn {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

body.home .hdr .btn .long {
  display: none;
}

/* Under the 393 px artboard the header tightens so logo, switch and the
   flag-on pill keep one row inside the gutter down to 360 px (ST-3). */
@media (max-width: 392.98px) {
  body.home .hdr-in {
    gap: 8px;
  }

  body.home .hdr-r {
    gap: 6px;
  }

  body.home .lang {
    gap: 0;
  }

  body.home .hdr .btn {
    padding: 0 10px;
  }
}

/* ── Result pages: the same header on parchment, static ─── */

body.home .result {
  display: grid;
  gap: 16px;
  justify-items: start;
  align-content: start;
  min-height: 420px;
  padding-block: 48px 40px;
}

body.home .result h1 {
  font-family: var(--serif-regular);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--color-primary);
  text-wrap: balance;
}

body.home .result p {
  max-width: 46ch;
  font-size: 18px;
  color: var(--color-ink-muted-text);
}

/* ── Hero ───────────────────────────────────────────────── */

body.home .hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 830px;
  isolation: isolate;
}

body.home .hero-ph {
  position: absolute;
  inset: 0;
  z-index: -2;
}

body.home .hero-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

body.home .hero .veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--veil-0) 44%, var(--veil-90) 66%, var(--color-bg-parchment) 90%);
}

body.home .hero-in {
  display: grid;
  gap: 16px;
  justify-items: start;
  padding-block: 0 24px;
}

body.home .hero-copy {
  display: grid;
  gap: 18px;
  justify-items: start;
}

body.home .hero .eyebrow {
  color: var(--color-bg-parchment);
  text-shadow: 0 1px 2px var(--forest-45);
}

body.home .hero h1 {
  font-family: var(--serif-regular);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -1.2px;
  color: var(--color-primary);
  text-wrap: balance;
}

body.home .hero .lead {
  max-width: 40ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-ink);
}

body.home .hero .cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

body.home .hero .fine {
  font-size: 15px;
  color: var(--color-ink-muted-text);
}

body.home .store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius-m);
}

body.home .store-badge img {
  display: block;
  width: auto;
  height: 48px;
}

body.home .hero .soon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-family: var(--sans-strong);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-primary);
}

body.home .aside-note {
  margin-top: 6px;
  font-family: var(--serif-regular);
  font-style: italic;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-primary);
}

body.home .hero .device {
  display: none;
}

/* ── Device frame: the simulator's proportions ──────────── */

body.home .phone {
  position: relative;
  flex: none;
  width: 230px;
  aspect-ratio: 1320 / 2868;
  padding: 6px;
  border-radius: 14.5% / 6.7%;
  background: var(--color-ink);
  box-shadow:
    0 0 0 1.5px var(--color-ink-border),
    0 30px 60px var(--forest-35);
}

body.home .phone::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2.3%;
  z-index: 1;
  width: 34%;
  height: 1.1%;
  transform: translateX(-50%);
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  opacity: 0.9;
}

body.home .phone picture,
body.home .phone img {
  display: block;
  width: 100%;
  height: 100%;
}

body.home .phone img {
  object-fit: cover;
  border-radius: 12.5% / 5.8%;
  background: var(--color-bg-parchment);
}

/* ── Three audience cards ───────────────────────────────── */

body.home .cards {
  padding-block: 26px 10px;
}

body.home .cards ul {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

body.home .cards li {
  display: grid;
}

body.home .card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-bg-surface);
  box-shadow:
    0 1px 0 var(--shadow-6),
    0 14px 36px var(--shadow-8);
  text-decoration: none;
}

body.home .card .top {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 22px 22px 0;
}

body.home .card .ring {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

body.home .card .ring.g {
  background: var(--color-primary-subtle);
}

body.home .card .ring.s {
  background: var(--color-accent);
}

body.home .card .ring.b {
  background: var(--color-accent-light);
}

body.home .ico {
  display: block;
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}

body.home .card h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-ink);
}

body.home .card p {
  max-width: 30ch;
  min-height: 3lh;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-ink-muted-text);
}

body.home .card .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  padding: 14px 22px 0;
  font-family: var(--sans-strong);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-primary);
}

body.home .card-ph {
  display: block;
  align-self: end;
  margin-top: 20px;
}

body.home .card-ph img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

/* ── Tagline rule ───────────────────────────────────────── */

body.home .rule {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 34px 10px;
}

body.home .rule::before,
body.home .rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.7;
}

body.home .rule span {
  font-family: var(--sans-strong);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-accent-dark-text);
}

/* ── How it works: three real screens ───────────────────── */

body.home .how {
  display: grid;
  gap: 26px;
  padding-block: 40px 10px;
}

body.home .how header {
  display: grid;
  gap: 8px;
  justify-items: start;
}

body.home .how h2 {
  font-family: var(--serif-regular);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--color-primary);
  text-wrap: balance;
}

body.home .steps {
  display: grid;
  gap: 28px;
  padding: 0;
  list-style: none;
}

body.home .steps li {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  justify-items: start;
}

body.home .steps .phone {
  width: 200px;
  justify-self: center;
}

body.home .steps .n {
  font-family: var(--serif-regular);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  color: var(--color-accent-dark);
}

body.home .steps h3 {
  display: block;
  margin-bottom: 4px;
  font-size: 20px;
  line-height: 1.3;
}

body.home .steps li > div > span {
  display: block;
  max-width: 32ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-ink-muted-text);
}

/* ── Stable strip: photo + CTA ──────────────────────────── */

body.home .strip {
  margin-block: 44px 0;
}

body.home .strip-in {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  isolation: isolate;
}

body.home .strip-ph {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* On the phone the crop keeps the trainer, the horse and the rider (78 % across). */
body.home .strip-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% 30%;
}

body.home .strip-in::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--forest-30) 0%, var(--forest-60) 50%, var(--forest-93) 100%);
}

body.home .strip-txt {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 28px 24px;
  color: var(--color-white);
}

body.home .strip-txt .eyebrow {
  font-size: 13px;
  color: var(--color-bg-parchment);
  text-shadow: 0 1px 3px var(--ink-60);
}

body.home .strip-txt h2 {
  font-family: var(--serif-regular);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--color-white);
}

body.home .strip-txt p {
  max-width: 44ch;
  font-size: 18px;
  color: var(--color-linen);
}

body.home .strip-txt .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

/* ── Contact (quiet) ────────────────────────────────────── */

body.home .contact {
  display: grid;
  gap: 22px;
  padding-block: 48px 10px;
}

body.home .contact h2 {
  font-family: var(--serif-regular);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: var(--color-primary);
}

body.home .contact .intro {
  display: grid;
  gap: 12px;
}

body.home .contact .intro p {
  font-size: 17px;
}

body.home .contact .alt {
  font-size: 14px;
  color: var(--color-ink-muted-text);
}

body.home .contact .alt a {
  color: var(--color-primary);
}

body.home .form {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

body.home .field {
  display: grid;
  gap: 6px;
}

body.home .field label {
  font-family: var(--sans-strong);
  font-weight: 600;
  font-size: 13px;
}

body.home .field input,
body.home .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-linen);
  border-radius: var(--radius-m);
  background: var(--color-bg-surface);
  font: inherit;
  font-size: 16px;
  color: var(--color-ink);
}

body.home .field textarea {
  min-height: 120px;
  resize: vertical;
}

/* The engine's own placeholder grey is under AA in Safari; `opacity: 1` for Firefox. */
body.home .field input::placeholder,
body.home .field textarea::placeholder {
  color: var(--color-ink-muted-text);
  opacity: 1;
}

body.home .form-note {
  margin: 0;
  font-size: 13px;
  color: var(--color-ink-muted-text);
}

body.home .form-note a {
  color: var(--color-primary);
}

/* The honeypot (P-5, 5.4): off-screen, never display:none, so a bot still fills it. */
body.home .honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Footer ─────────────────────────────────────────────── */

body.home .ftr {
  margin-top: 24px;
}

body.home .ftr-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding-block: 24px 30px;
  font-size: 14px;
  color: var(--color-ink-muted-text);
}

body.home .ftr-in .sp {
  flex: 1 1 auto;
}

/* ── Wider: the landscape hero and the desktop gutter (from 760 px) ── */

@media (min-width: 760px) {
  body.home {
    --page-inline: 48px;
  }

  body.home .hero {
    align-items: center;
    min-height: 720px;
  }

  body.home .hero-ph img {
    object-position: 50% 40%;
  }

  body.home .hero .veil {
    background:
      linear-gradient(180deg, var(--veil-80) 0%, var(--veil-0) 18%),
      linear-gradient(90deg, var(--veil-96) 0%, var(--veil-86) 30%, var(--veil-25) 52%, var(--veil-0) 68%),
      linear-gradient(180deg, var(--veil-0) 72%, var(--color-bg-parchment) 100%);
  }

  /* Until the frame shows, the copy stays left of the photo's subject and the
     h1 keeps one sentence per line (ST-3). */
  body.home .hero-in {
    grid-template-columns: minmax(0, calc(50vw + 30px)) 1fr;
    align-items: center;
    padding-block: 130px 70px;
  }

  body.home .hero h1 {
    font-size: 56px;
    letter-spacing: -1.6px;
  }

  body.home .hero .eyebrow {
    color: var(--color-accent-dark-text);
    text-shadow: none;
  }

  body.home .hero .lead {
    font-size: 21px;
  }

  body.home .aside-note {
    font-size: 24px;
  }

  body.home .rule {
    padding-block: 44px 10px;
  }

  /* The step frames are 220 px wide from here, as SIZES.stepFrame in home.mjs says. */
  body.home .steps .phone {
    width: 220px;
  }

  body.home .strip-in {
    min-height: 460px;
  }

  body.home .strip-ph img {
    object-position: 50% 35%;
  }

  body.home .strip-txt {
    padding: 44px 48px;
  }

  body.home .strip-txt h2 {
    font-size: 44px;
  }

  body.home .contact {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* ── The section links and the long pill (from 960 px) ──── */

@media (min-width: 960px) {
  body.home .hdr-in > nav {
    display: block;
  }

  body.home .hdr .btn .long {
    display: inline;
  }

  body.home .hdr .btn .short {
    display: none;
  }
}

/* ── The device frame, the cards beside it, three steps (from 1000 px) ── */

@media (min-width: 1000px) {
  body.home .hero-in {
    grid-template-columns: minmax(0, 600px) 1fr;
  }

  body.home .hero h1 {
    font-size: 72px;
    letter-spacing: -2.2px;
  }

  body.home .hero .device {
    display: block;
    position: absolute;
    right: var(--page-inline);
    bottom: -130px;
    z-index: 4;
  }

  body.home .hero .device .phone {
    width: 250px;
  }

  body.home .cards {
    padding-block: 40px 0;
  }

  body.home .cards ul {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    padding-right: 300px;
  }

  body.home .card-ph img {
    height: 170px;
  }

  body.home .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  body.home .steps .phone {
    justify-self: start;
    align-self: end;
  }

  body.home .steps li > div {
    min-height: 7.5em;
  }
}

@media (min-width: 1200px) {
  body.home {
    --page-inline: 72px;
  }

  body.home .hero h1 {
    font-size: 84px;
  }

  body.home .hero .device .phone {
    width: 280px;
  }

  body.home .cards ul {
    padding-right: 330px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.home .btn,
  body.home .nav a {
    transition:
      background 120ms ease,
      color 120ms ease;
  }
}