/* Homepage (approved v1.2.0 design). The other pages keep style.css. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 900;
  font-stretch: 62% 75%;
  font-display: swap;
  src: url(assets/fonts/archivo-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/space-grotesk-latin-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root { color-scheme: dark; }
body { margin: 0; background: #141618; }

.home {
  --ink: #141618; --fg: #F3F5F1; --mut: #A2A8A3; --lime: #C9F24D; --line: #303537;
  --cream: #EEEFEA; --cmut: #4D534F; --gut: 56px;
  background: var(--ink); color: var(--fg);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.home *, .home *::before, .home *::after { box-sizing: border-box; }
.home a { color: inherit; }
.home img { display: block; max-width: 100%; height: auto; }
.home picture { display: contents; }
.home .disp { font-family: 'Archivo', 'Arial Narrow', sans-serif; font-stretch: 62%; font-weight: 900; text-transform: uppercase; margin: 0; line-height: .82; }
.home .wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }
.home .label { font-size: 13px; font-weight: 600; letter-spacing: .16em; color: var(--mut); display: flex; align-items: center; gap: 12px; margin: 0; }
.home .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: 4px; background: var(--lime); color: var(--ink); font-weight: 600; font-size: 17px; text-decoration: none; white-space: nowrap; }
.home .btn:hover { background: #DDFB73; }
.home .phone { border: 6px solid #090B0C; border-radius: 13% / 6%; overflow: hidden; background: #191D20; aspect-ratio: 644 / 1400; }
.home .phone img { width: 100%; }

/* focus and skip link */
.home a:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 2px; }
/* Lime rings vanish on the light sections, so those use ink. */
.home .app a:focus-visible, .home .close a:focus-visible { outline-color: var(--ink); }
.home .skip { position: absolute; left: 16px; top: -80px; z-index: 20; background: var(--lime); color: var(--ink); padding: 10px 14px; font-weight: 600; }
.home .skip:focus { top: 12px; }

/* header */
.home header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px var(--gut); max-width: 1440px; margin: 0 auto; }
.home .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; letter-spacing: -.05em; text-decoration: none; white-space: nowrap; }
.home .brand img { width: 30px; height: 30px; border-radius: 7px; }
.home header nav { display: flex; gap: 28px; font-size: 15px; font-weight: 500; align-items: center; }
.home header nav a { text-decoration: none; }
.home header nav a:not(.btn):hover { color: var(--lime); }
.home header nav .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* 01 hero */
.home .hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding-top: 24px; padding-bottom: 96px; }
/* 19.5% of the text column: ((page width - 2 gutters - gap) x 1.1/2) x 0.195 */
.home .hero h1 { margin-top: 36px; font-size: calc((min(100vw, 1440px) - 168px) * .10725); }
.home .hero h1 .c { color: var(--lime); }
.home .lede { margin-top: 48px; max-width: 460px; }
.home .lede p { margin: 0; }
.home .what { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -.03em; }
.home .sub { margin-top: 10px !important; font-size: 17px; line-height: 1.55; color: var(--mut); }
.home .cta { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.home .cta small { font-size: 14px; line-height: 1.5; color: var(--mut); }
.home .hero-fig { position: relative; aspect-ratio: 5 / 6; margin: 0; }
.home .hf-photo { position: absolute; right: 0; top: 0; width: 80%; height: 75.5%; overflow: hidden; z-index: 1; }
.home .hf-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; }
.home .hf-block { position: absolute; left: 0; bottom: 0; width: 50%; height: 50%; background: var(--lime); z-index: 2; }
.home .hf-phone { position: absolute; left: 12%; bottom: 4%; width: 37%; transform: rotate(-3deg); z-index: 3; }
.home .hf-phone .phone { box-shadow: 0 24px 48px rgba(0, 0, 0, .45); }
/* The frame takes its height from the screenshot so the circle's percentages map onto the image. */
.home .hf-screen { position: relative; aspect-ratio: auto; }
.home .hf-screen .hand { position: absolute; left: .69%; top: 56.57%; width: 52.8%; height: 7.1%; overflow: visible; pointer-events: none; }
.home .hf-screen .hand path { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ticker */
.home .ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; padding: 16px 0; }
.home .track { display: flex; width: max-content; animation: home-ticker 58.66s linear infinite; font-family: 'Archivo', 'Arial Narrow', sans-serif; font-stretch: 70%; font-weight: 700; font-size: 26px; text-transform: uppercase; white-space: nowrap; }
.home .track b { color: var(--lime); font-weight: 700; }
/* The track holds five identical copies and moves by exactly one (a fifth of its width) per cycle, so the loop
   restarts on an identical frame. The four copies still showing cover viewports up to about 5,000px wide. Each copy
   ends with the same spacing that separates the items inside it, so the join is invisible. 58.66s keeps the
   original speed (about 21px a second at 26px type). */
@keyframes home-ticker { to { transform: translateX(-20%); } }

/* 02 the app */
.home .app { background: var(--cream); color: var(--ink); }
.home .app .label { color: var(--cmut); }
.home .app-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; padding-top: 130px; }
.home .app-head h2 { font-size: clamp(72px, 8.4vw, 124px); margin-top: 28px; }
.home .app-head p { margin: 0; font-size: 19px; line-height: 1.55; color: var(--cmut); max-width: 380px; }
.home .lead { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: end; margin-top: 72px; padding-top: 110px; }
.home .lead-band { position: absolute; left: calc(-1 * var(--gut)); right: calc(-1 * var(--gut)); top: 0; height: 64%; overflow: hidden; }
.home .lead-band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 92%; }
.home .lead .phone { position: relative; width: clamp(240px, 23vw, 320px); margin-right: 8vw; border-color: var(--ink); box-shadow: 0 36px 70px rgba(20, 22, 24, .3); }
.home .lead-cap { position: relative; justify-self: start; max-width: 380px; padding-bottom: 8px; }
.home .cap b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--cmut); }
.home .cap h3 { margin: 8px 0 0; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; font-weight: 600; }
.home .cap p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--cmut); }
.home .second { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin: 110px auto 0; max-width: 820px; }
.home .second .phone { width: min(100%, 280px); border-color: var(--ink); box-shadow: 0 24px 48px rgba(20, 22, 24, .18); }
.home .second .crop { display: none; width: 100%; border-radius: 12px; }
.home .second .cap { margin-top: 24px; max-width: 300px; }
.home .second .cap h3 { font-size: 24px; }
.home .more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; margin-top: 100px; border-top: 2px solid var(--ink); padding-top: 28px; }
.home .more h3 { margin: 0; font-size: 20px; letter-spacing: -.025em; font-weight: 600; }
.home .more p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--cmut); }
.home .facts { margin: 48px 0 0; padding: 20px 0 120px; border-top: 1px solid #C9CBC4; display: flex; flex-wrap: wrap; gap: 10px 30px; font-size: 16px; font-weight: 500; list-style: none; }
.home .facts li { display: flex; align-items: center; gap: 10px; }
.home .facts li::before { content: ''; width: 7px; height: 7px; background: var(--ink); border-radius: 50%; }
.home .facts .more-link { margin-left: auto; }
.home .facts .more-link::before { display: none; }
.home .facts a { font-weight: 600; }

/* 03 still counts */
.home .counts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
.home .counts-copy { padding: 140px var(--gut) 130px max(var(--gut), calc((100vw - 1440px) / 2 + var(--gut))); }
.home .counts h2 { margin-top: 32px; font-size: clamp(76px, 10vw, 150px); }
.home .counts h2 span { color: var(--lime); }
.home .counts .why { margin: 32px 0 0; max-width: 440px; font-size: 19px; line-height: 1.55; color: var(--mut); }
.home .story { list-style: none; margin: 56px 0 0; padding: 0; }
.home .story li { padding: 26px 0; border-top: 1px solid var(--line); }
.home .story li:last-child { border-bottom: 1px solid var(--line); }
.home .story s { display: block; font-size: 17px; color: #8F9590; text-decoration-thickness: 2px; }
.home .story strong { display: block; margin-top: 8px; font-family: 'Archivo', 'Arial Narrow', sans-serif; font-stretch: 70%; font-weight: 800; font-size: clamp(34px, 3.9vw, 56px); line-height: .95; text-transform: uppercase; }
.home .story em { font-style: normal; color: var(--lime); }
.home .counts .fine { margin: 28px 0 0; max-width: 520px; font-size: 15px; line-height: 1.6; color: #8F9590; }
/* The photo is a wide panorama, so a 7:10 frame (rather than the full column height) keeps the woman, the leash and the
   dog in view. It sits at the bottom of the section, against the lime band. */
.home .counts-photo { position: relative; align-self: end; aspect-ratio: 7 / 10; }
.home .counts-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* 04 closing */
.home .close { background: var(--lime); color: var(--ink); }
.home .close .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; padding-top: 110px; padding-bottom: 110px; }
.home .close .label { color: var(--ink); }
.home .close h2 { margin-top: 32px; font-size: clamp(96px, 13vw, 190px); line-height: .8; }
.home .close-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin: 0 0 36px; }
.home .close-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.home .steps { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.home .steps li { display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid #9DBA3A; font-size: 17px; line-height: 1.5; }
.home .steps li b { font-weight: 700; }
.home .close .btn { margin-top: 28px; background: var(--ink); color: var(--lime); }
.home .close .btn:hover { background: #2A2F31; }
.home .close small { display: block; margin-top: 12px; font-size: 15px; line-height: 1.5; color: #2B2E1E; }
.home .close small a { color: var(--ink); }

/* footer */
.home footer { max-width: 1440px; margin: 0 auto; padding: 30px var(--gut) 44px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.home footer nav { display: flex; gap: 12px 24px; flex-wrap: wrap; }
.home footer nav a { text-decoration: none; }
.home footer nav a:hover { color: var(--lime); }
.home footer p { margin: 0; color: var(--mut); }

@media (prefers-reduced-motion: reduce) {
  .home .track { animation: none; }
  .home * { transition: none !important; }
}

/* small laptops */
@media (max-width: 1199px) {
  .home { --gut: 40px; }
  .home .hero { gap: 40px; }
  .home .hero h1 { font-size: calc((100vw - 120px) * .10725); }
  .home .app-head { gap: 40px; }
  .home .more { gap: 32px; }
  .home .close .wrap { gap: 48px; }
}

/* tablets */
@media (max-width: 899px) {
  .home .hero { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-bottom: 80px; }
  .home .hero h1 { font-size: calc((100vw - 80px) * .18); }
  .home .lede { max-width: 560px; }
  .home .hero-fig { aspect-ratio: 4 / 3; width: min(100%, 640px); justify-self: end; }
  .home .hf-photo { width: 76%; height: 82%; }
  .home .hf-block { width: 44%; height: 52%; }
  .home .hf-phone { width: 30%; left: 9%; bottom: 3%; }
  .home .app-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home .lead .phone { margin-right: 4vw; }
  .home .second { gap: 32px; }
  .home .more { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home .counts { grid-template-columns: minmax(0, 1fr); }
  .home .counts-photo { order: -1; min-height: 0; aspect-ratio: 1 / 1; }
  .home .counts-copy { padding: 72px var(--gut) 96px; }
  .home .close .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
  .home .close-photo { max-width: 560px; }
}

/* phones */
@media (max-width: 640px) {
  .home { --gut: 16px; }
  .home header { padding: 12px var(--gut); }
  .home header nav a:not(.btn) { display: none; }
  .home .brand { font-size: 18px; }
  .home .label { letter-spacing: .1em; }
  .home .hero { padding-top: 20px; gap: 40px; padding-bottom: 64px; }
  .home .hero h1 { margin-top: 22px; font-size: calc((100vw - 32px) * .26); }
  .home .hero h1 span { display: block; }
  .home .lede { margin-top: 24px; }
  .home .what { font-size: 21px; }
  .home .sub { font-size: 17px; }
  .home .cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .home .cta small { text-align: center; }
  .home .hero-fig { aspect-ratio: 10 / 11; width: 100%; }
  .home .hf-photo { width: 82%; height: 71%; }
  .home .hf-photo img { object-position: 60% 50%; }
  .home .hf-block { width: 54%; height: 46%; }
  .home .hf-phone { width: 44%; left: 6%; bottom: 3%; }
  .home .track { font-size: 20px; }
  .home .app-head { padding-top: 80px; }
  .home .app-head h2 { font-size: 20vw; }
  .home .app-head p { font-size: 17px; }
  .home .lead { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; padding-top: 150px; justify-items: center; }
  .home .lead-band { height: 300px; }
  .home .lead-band img { object-position: 50% 40%; }
  .home .lead .phone { width: 88%; margin: 0; }
  .home .lead-cap { justify-self: stretch; text-align: left; max-width: none; order: 2; }
  .home .cap h3 { font-size: 24px; }
  .home .cap p, .home .more p { font-size: 17px; }
  .home .second { grid-template-columns: minmax(0, 1fr); gap: 48px; margin-top: 64px; }
  .home .second .phone { width: 72%; }
  .home .second .has-crop .phone { display: none; }
  .home .second .has-crop .crop { display: block; }
  .home .second .cap { max-width: none; margin-top: 18px; }
  .home .more { margin-top: 56px; }
  .home .facts { padding-bottom: 72px; gap: 10px 20px; font-size: 17px; }
  .home .facts .more-link { margin-left: 0; width: 100%; }
  .home .counts-photo { aspect-ratio: 4 / 5; }
  .home .counts-copy { padding: 56px var(--gut) 72px; }
  .home .counts h2 { font-size: 21vw; }
  .home .counts .why { font-size: 17px; }
  .home .counts .fine { font-size: 16px; }
  .home .story { margin-top: 36px; }
  .home .story strong { font-size: 34px; }
  .home .close .wrap { padding-top: 72px; padding-bottom: 72px; gap: 32px; }
  .home .close h2 { font-size: 27vw; }
  .home .close .btn { width: 100%; }
  .home footer { padding: 28px var(--gut) 36px; flex-direction: column; align-items: flex-start; font-size: 16px; }
  .home footer nav a { padding: 6px 0; }
}