/* =====================================================================
   AG+ landing page styles

   1. Design settings: colours, fonts, sizes, spacing, corners
      (change these first; the rest of the file uses them)
   2. Fonts
   3. Base
   4. Layout helpers
   5. Buttons
   6. Header
   7. Hero
   8. Value lines
   9. Sections and features
   10. Coach (Maya)
   11. Statement
   12. Your data
   13. Download
   14. Footer
   15. Not-found page (404.html)
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Design settings
   --------------------------------------------------------------------- */
:root {
  /* Brand colours (from the AG+ app UI guidelines) */
  --color-navy: #102F43;             /* headings, main text, dark cards */
  --color-navy-rgb: 16 47 67;        /* the same navy as R G B, used for see-through overlays */
  --color-orange: #FF861A;           /* main buttons and the orange "+" */
  --color-orange-hover: #FF9D47;     /* main buttons when hovered */
  --color-canvas: #FFFFFF;           /* page background */
  --color-footer-bg: #FFFFFF;        /* keep white: the logo file has a white background */
  --color-soft-blue: #E7F0F5;        /* supporting panels and the statement band */
  --color-text: var(--color-navy);   /* normal text */
  --color-text-muted: #586D80;       /* supporting text on light backgrounds */
  --color-border: #E0E6ED;           /* quiet lines and borders */
  --color-on-dark: #FFFFFF;          /* text on navy or on the photo */
  --color-on-dark-muted: #CAD7E1;    /* supporting text on navy or on the photo */

  /* Main button colours. The app uses white text on orange, but on a website
     that is only 2.4:1 contrast (below the WCAG minimum of 4.5:1), so the page
     uses navy text on orange (5.8:1). Change to #FFFFFF to match the app. */
  --button-primary-bg: var(--color-orange);
  --button-primary-bg-hover: var(--color-orange-hover);
  --button-primary-text: var(--color-navy);

  /* Keyboard focus outline */
  --color-focus: var(--color-navy);  /* on light backgrounds */
  --color-focus-on-dark: #FFFFFF;    /* on navy or on the photo */

  /* Fonts. "AG Sans" is Roboto, the app's font, loaded from assets/fonts. */
  --font-sans: "AG Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Text sizes. clamp(smallest, preferred, largest) grows with screen width. */
  --text-small: 0.875rem;                                        /* 14px  captions, footer */
  --text-body: 1.0625rem;                                        /* 17px  body text */
  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);     /* 18-21px intro text */
  --text-h4: 1.25rem;                                            /* 20px  small headings */
  --text-h3: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);             /* 24-34px feature headings */
  --text-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);                /* 30-48px section headings */
  --text-h1: clamp(2.375rem, 1.5rem + 4vw, 4.5rem);              /* 38-72px hero headline */
  --text-statement: clamp(2rem, 1.3rem + 3.2vw, 4rem);           /* 32-64px brand statement */
  --line-height-body: 1.6;
  --line-height-heading: 1.12;

  /* Spacing */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-s: 0.75rem;     /* 12px */
  --space-m: 1rem;        /* 16px */
  --space-l: 1.5rem;      /* 24px */
  --space-xl: 2.5rem;     /* 40px */
  --space-2xl: 4rem;      /* 64px */
  --space-section: clamp(4rem, 2.5rem + 6vw, 8rem);  /* space above and below sections */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);       /* page side margin: 16px on phones */

  /* Widths */
  --page-width: 75rem;    /* 1200px: widest the content gets */
  --text-width: 40rem;    /* keeps paragraphs to a comfortable line length */

  /* Corners and controls */
  --radius-large: 28px;   /* hero photo, coach card, download card */
  --radius-card: 20px;    /* images and panels */
  --radius-badge: 10px;   /* skill badges */
  --radius-pill: 999px;   /* buttons */
  --button-height: 52px;
  --header-height: 72px;
}


/* ---------------------------------------------------------------------
   2. Fonts (self-hosted, no outside requests)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "AG Sans";
  src: url("assets/fonts/roboto-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AG Sans";
  src: url("assets/fonts/roboto-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AG Sans";
  src: url("assets/fonts/roboto-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ---------------------------------------------------------------------
   3. Base
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-m));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: var(--line-height-heading);
  overflow-wrap: break-word;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-h3);
  letter-spacing: -0.015em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* Dark areas switch the focus outline to white */
.on-dark {
  --color-focus: var(--color-focus-on-dark);
}

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 100;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-badge);
  background: var(--color-navy);
  color: var(--color-on-dark);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  --color-focus: var(--color-orange);
}

.tm {
  font-size: 0.5em;
  font-weight: 400;
  vertical-align: 0.6em;
  line-height: 0;
}


/* ---------------------------------------------------------------------
   4. Layout helpers
   --------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
}

.section-intro {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.section-intro p {
  margin-top: var(--space-m);
  color: var(--color-text-muted);
  font-size: var(--text-lead);
}

/* List with the orange "+" from the AG+ logo as its marker */
.plus-list {
  display: grid;
  gap: var(--space-s);
  margin: var(--space-l) 0 0;
  padding: 0;
  list-style: none;
}

.plus-list li {
  position: relative;
  padding-left: 1.75rem;
}

.plus-list li::before {
  content: "+";
  content: "+" / "";
  position: absolute;
  top: -0.05em;
  left: 0;
  color: var(--color-orange);
  font-size: 1.375em;
  font-weight: 700;
  line-height: 1.2;
}


/* ---------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 14px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
}

.button--primary:hover {
  background: var(--button-primary-bg-hover);
}

.button--secondary {
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.button--secondary:hover {
  background: var(--color-navy);
  color: var(--color-on-dark);
}

.button--compact {
  min-height: 48px;
  padding: 10px 20px;
  font-size: 0.9375rem;
}

/* App Store / Google Play buttons */
.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.store-button {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 13rem;
  min-height: 60px;
  padding: 9px 30px 10px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  line-height: 1.15;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.store-button:hover {
  background: var(--button-primary-bg-hover);
}

.store-button__small {
  font-size: 0.8125rem;
  font-weight: 500;
}

.store-button__large {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (max-width: 479px) {
  .store-button {
    flex: 1 1 100%;
    align-items: center;
  }
}


/* ---------------------------------------------------------------------
   6. Header
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-height);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.brand__logo {
  width: auto;
  height: 40px;
}

.site-nav {
  display: none;
}

@media (min-width: 860px) {
  .site-nav {
    display: block;
    margin-left: auto;
  }

  .site-nav ul {
    display: flex;
    gap: var(--space-l);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav a {
    display: inline-block;
    padding: var(--space-s) var(--space-2xs);
    font-weight: 500;
    text-decoration: none;
    text-underline-offset: 6px;
  }

  .site-nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
  }
}


/* ---------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------- */
.hero {
  padding-top: var(--space-xs);
}

.hero__frame {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 34rem;
  min-height: clamp(34rem, calc(100vh - var(--header-height) - 1.5rem), 50rem);
  min-height: clamp(34rem, calc(100svh - var(--header-height) - 1.5rem), 50rem);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-navy);
  color: var(--color-on-dark);
}

.hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 30%;   /* keeps the runner in view when the photo is cropped */
}

/* Navy shading over the photo so the white text stays readable */
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(var(--color-navy-rgb) / 0.96) 0%,
    rgb(var(--color-navy-rgb) / 0.9) 45%,
    rgb(var(--color-navy-rgb) / 0.45) 68%,
    rgb(var(--color-navy-rgb) / 0) 88%
  );
}

.hero__content {
  width: 100%;
  max-width: 40rem;
  padding: var(--space-xl) 20px 20px;
}

.hero__title {
  font-size: var(--text-h1);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.hero__title > span {
  display: block;
}

.hero__lead {
  max-width: 34rem;
  margin-top: var(--space-l);
  color: var(--color-on-dark-muted);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.hero .store-buttons {
  margin-top: var(--space-xl);
}

@media (min-width: 600px) {
  .hero__frame {
    border-radius: var(--radius-large);
  }

  .hero__content {
    padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  }
}

@media (min-width: 860px) {
  .hero__frame {
    align-items: center;
  }

  .hero__frame::before {
    background:
      linear-gradient(
        90deg,
        rgb(var(--color-navy-rgb) / 0.9) 0%,
        rgb(var(--color-navy-rgb) / 0.72) 38%,
        rgb(var(--color-navy-rgb) / 0.12) 62%,
        rgb(var(--color-navy-rgb) / 0) 76%
      ),
      linear-gradient(to top, rgb(var(--color-navy-rgb) / 0.45), rgb(var(--color-navy-rgb) / 0) 35%);
  }

  .hero__content {
    padding: var(--space-2xl) clamp(2.5rem, 5vw, 5rem);
  }
}

/* One gentle "settle" of the photo on page load. Off for people who prefer less motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero__image {
    animation: hero-settle 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  @keyframes hero-settle {
    from {
      transform: scale(1.06);
    }
    to {
      transform: none;
    }
  }
}


/* ---------------------------------------------------------------------
   8. Value lines (below the hero)
   --------------------------------------------------------------------- */
.pillars {
  padding-block: var(--space-2xl) 0;
  text-align: center;
}

.pillars__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s) var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-h4);
  font-weight: 700;
  line-height: 1.3;
}

.pillars__list li::before {
  content: "+";
  content: "+" / "";
  margin-right: 0.4em;
  color: var(--color-orange);
}

.pillars__note {
  margin-top: var(--space-s);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

@media (max-width: 599px) {
  .pillars__list {
    flex-direction: column;
    align-items: center;
  }
}


/* ---------------------------------------------------------------------
   9. Sections and features
   --------------------------------------------------------------------- */
.feature {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-2xl);
}

.feature + .feature {
  margin-top: var(--space-section);
}

.feature__text {
  max-width: var(--text-width);
}

.feature__text p {
  margin-top: var(--space-m);
  color: var(--color-text-muted);
}

.feature__text p:first-of-type {
  margin-top: var(--space-m);
  color: var(--color-text);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.feature__image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
}

@media (min-width: 860px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl) clamp(2.5rem, 5vw, 5rem);
  }

  .feature--reverse .feature__visual {
    order: -1;
  }
}

/* Mental Performance Profile panel */
.profile-card {
  margin: 0;
  padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);
  border-radius: var(--radius-card);
  background: var(--color-soft-blue);
}

.profile-card figcaption {
  display: grid;
  gap: var(--space-2xs);
  margin-bottom: var(--space-l);
}

.profile-card figcaption strong {
  font-size: var(--text-h4);
  line-height: 1.3;
}

.profile-card figcaption span {
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.skill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill-badges li {
  padding: 9px 12px;
  border-radius: var(--radius-badge);
  background: var(--color-canvas);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Race journey: a real sequence, so it is shown as a track */
.journey {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey li {
  position: relative;
  padding: 0 0 var(--space-l) 2.25rem;
}

.journey li:last-child {
  padding-bottom: 0;
}

/* the dot */
.journey li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 16px;
  height: 16px;
  border: 3px solid var(--color-navy);
  border-radius: 50%;
  background: var(--color-canvas);
}

/* the line to the next dot */
.journey li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(0.3em + 16px);
  bottom: 0;
  left: 7px;
  width: 2px;
  background: var(--color-border);
}

.journey .journey__race-day::before {
  border-color: var(--color-orange);
  background: var(--color-orange);
}

.journey strong {
  display: block;
  line-height: 1.4;
}

.journey span {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

@media (min-width: 860px) {
  .journey {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-l);
    padding-top: var(--space-l);
    border-top: 1px solid var(--color-border);
  }

  .journey li {
    padding: 2rem 0 0;
  }

  .journey li::before {
    top: 0;
  }

  .journey li:not(:last-child)::after {
    top: 7px;
    bottom: auto;
    left: 24px;
    right: calc(-1 * var(--space-l) + 8px);
    width: auto;
    height: 2px;
  }
}


/* ---------------------------------------------------------------------
   10. Coach (Maya)
   --------------------------------------------------------------------- */
.coach-section {
  padding-bottom: var(--space-section);
}

.coach {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  padding: clamp(1.5rem, 0.8rem + 3.5vw, 4.5rem);
  border-radius: var(--radius-large);
  background: var(--color-navy);
  color: var(--color-on-dark);
}

.coach__avatar {
  width: clamp(8.5rem, 30vw, 19rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgb(255 255 255 / 0.08);
}

.coach__text {
  max-width: var(--text-width);
}

.coach__lead {
  margin-top: var(--space-m);
  color: var(--color-on-dark-muted);
  font-size: var(--text-lead);
  line-height: 1.5;
}

.coach__note {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  color: var(--color-on-dark-muted);
  font-size: var(--text-small);
}

@media (min-width: 760px) {
  .coach {
    grid-template-columns: auto 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}


/* ---------------------------------------------------------------------
   11. Statement
   --------------------------------------------------------------------- */
.statement {
  padding-block: var(--space-section);
  background: var(--color-soft-blue);
  text-align: center;
}

.statement__title {
  max-width: 26ch;
  margin-inline: auto;
  font-size: var(--text-statement);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.statement__text {
  margin-top: var(--space-l);
  color: var(--color-text-muted);
  font-size: var(--text-lead);
}


/* ---------------------------------------------------------------------
   12. Your data
   --------------------------------------------------------------------- */
.data-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-xl) var(--space-l);
  margin: var(--space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

.data-points li {
  padding-top: var(--space-m);
  border-top: 2px solid var(--color-navy);
}

.data-points h3 {
  font-size: var(--text-h4);
  letter-spacing: 0;
}

.data-points p {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
}

.safety-note {
  margin-top: var(--space-2xl);
  padding: clamp(1.25rem, 0.9rem + 1.5vw, 2rem);
  border-radius: var(--radius-card);
  background: var(--color-soft-blue);
}

.safety-note h3 {
  font-size: 1.125rem;
  letter-spacing: 0;
}

.safety-note p {
  max-width: 62rem;
  margin-top: var(--space-xs);
}

.text-link {
  margin-top: var(--space-l);
  font-weight: 700;
}

.text-link a {
  display: inline-block;
  padding-block: var(--space-xs);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.text-link a:hover {
  color: var(--color-text-muted);
}


/* ---------------------------------------------------------------------
   13. Download
   --------------------------------------------------------------------- */
.download {
  padding-bottom: var(--space-section);
}

.download__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-section) clamp(1.25rem, 0.5rem + 4vw, 4rem);
  border-radius: var(--radius-large);
  background: var(--color-navy);
  color: var(--color-on-dark);
  text-align: center;
}

.download__icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18);
}

.download__card h2 {
  max-width: 30ch;
  margin-top: var(--space-l);
}

.download__card h2 > span {
  display: block;
}

.download__card p {
  margin-top: var(--space-m);
  color: var(--color-on-dark-muted);
  font-size: var(--text-lead);
}

.download .store-buttons {
  justify-content: center;
  margin-top: var(--space-xl);
}


/* ---------------------------------------------------------------------
   14. Footer
   --------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--color-border);
  background: var(--color-footer-bg);
  color: var(--color-text-muted);
  font-size: var(--text-small);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-l);
}

.site-footer__logo {
  width: auto;
  height: 40px;
}

.site-footer__tagline {
  margin-top: var(--space-xs);
  color: var(--color-text);
  font-weight: 500;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__links a {
  display: inline-block;
  padding-block: var(--space-s);
  color: var(--color-text);
  font-weight: 500;
  text-underline-offset: 4px;
}

.site-footer__links a:hover {
  text-decoration-thickness: 2px;
}

.site-footer__legal p + p {
  margin-top: var(--space-2xs);
}

@media (min-width: 860px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
    padding-top: var(--space-l);
    border-top: 1px solid var(--color-border);
  }
}


/* ---------------------------------------------------------------------
   15. Not-found page (404.html)
   --------------------------------------------------------------------- */
.not-found {
  padding-block: var(--space-section);
  text-align: center;
}

.not-found h1 {
  font-size: var(--text-h2);
  letter-spacing: -0.02em;
}

.not-found p {
  max-width: 32rem;
  margin: var(--space-m) auto 0;
  color: var(--color-text-muted);
  font-size: var(--text-lead);
}

.not-found .button {
  margin-top: var(--space-xl);
}