/*
 * CoachAssistant product landing page.
 *
 * SELF CONTAINED ON PURPOSE. This file is served from the "home" docroot, which
 * is a sibling of the Atletico docroot and shares nothing with it: no
 * css/site.css, no assets/fonts. So the tokens below are COPIED BY VALUE from
 * css/site.css and the two woff2 files are copied into home/fonts/ by push.sh.
 * If a brand value changes in site.css, change it here by hand as well; there
 * is no import that will do it for you.
 *
 * Same neo-brutalist family as the team site: ink borders, hard offset lifts,
 * the red. Mobile first, because the first person a coach sends this link to
 * opens it on a phone.
 *
 * Class prefix pl- (product landing) to match the site's per-page prefixes.
 */

@font-face {
  font-family: 'Oswald';
  src: url('/home/fonts/oswald-variable-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/home/fonts/inter-variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #C8102E;
  --red-dark: #9A0B22;
  --ink: #161616;
  --ink-soft: #3A3A3A;
  --muted: #5F5F5F;
  --paper: #FFFFFF;
  --bone: #F4F1ED;
  --rule: #DCD6CF;
  --new: #1D6B3C;
  --new-wash: #E3EFE7;

  --display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --radius: 10px;
  --border: 3px solid var(--ink);
  --lift: 5px 5px 0 var(--ink);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --speed: 180ms;

  /* One wrap width for the hero, the two columns and the proof strip, so the
     three sections line up down the left edge instead of drifting. */
  --wrap: 1080px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}

a { color: var(--red); }

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

/* The skip link is the first focusable thing on the page and it lands ON TOP of
   the dark hero, so it cannot use the team site's ink-on-ink treatment: it would
   be an invisible box and the red focus ring on it would be invisible too. Paper
   slab, ink text, ink border, which also gives the red ring something to sit on.
   The -9999px park is safe without a body overflow-x mask: a negative left does
   not extend scrollWidth in LTR, and scrollWidth was measured equal to
   innerWidth at 320, 390, 700, 768, 860, 960, 1024, 1180 and 1280 with the mask
   gone. That mask used to hide real overflow bugs, so it is not coming back. */
.pl-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  padding: 12px 18px;
  font-weight: 700;
  text-decoration: none;
}
.pl-skip-link:focus { left: 0; }

.pl-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Hero. Ink slab with the red diagonal, the same split the old front page used,
 * kept because it is the one piece of this domain's identity anyone has seen.
 * The gradient stop is a hard edge (55% to 55.2%), not a blend.
 * ------------------------------------------------------------------------ */

.pl-hero {
  background: linear-gradient(118deg, var(--ink) 0%, var(--ink) 55%, var(--red) 55.2%, var(--red-dark) 100%);
  color: var(--paper);
  border-bottom: 6px solid var(--ink);
  padding: 40px var(--gutter) 48px;
}
.pl-hero__inner { max-width: var(--wrap); margin: 0 auto; }

.pl-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.pl-brand__logo { width: 52px; height: 52px; border-radius: 12px; flex: none; }
.pl-brand__name {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 15px;
}

.pl-hero__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(38px, 8vw, 78px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  max-width: 16ch;
  text-wrap: balance;
}

.pl-hero__promise {
  font-size: clamp(16px, 2.2vw, 19px);
  line-height: 1.5;
  margin: 0 0 28px;
  max-width: 50ch;
  color: #EFE9E4;
}

/* Below the full-desktop width there is no room to the RIGHT of the text for
   the diagonal, so the split runs across the top instead of down the middle.

   Two things changed here after measuring, and both matter:

   1. The cutover is 1200px, not the 700px it was. 700 only covered phones; the
      diagonal was still slicing through the headline everywhere above it, worst
      at 1024 (iPad landscape).

   2. The band is a HORIZONTAL split at a fixed pixel offset, not the 10 degree
      slant it used to be. An angled gradient's edge travels further down the
      box the wider the box gets (a 10 degree tilt drops 208px across a 1180px
      hero), so the old band cut the top off "YOUR" at 1180 and clipped the "Y"
      even at 390. There is no angle that is safe at every width in this range,
      but a horizontal seam is at the same place at every width, so it can be
      parked once, in the gap between the brand row and the headline, and stay
      there. 104px = 40px hero padding + the 52px logo + 12px of air, and the
      first headline glyph does not start until about 125px.

   Change either number and re-run the seam check across 390 through 1200: no
   line of text may have the seam running through it. */
@media (max-width: 1200px) {
  .pl-hero {
    background: linear-gradient(180deg, var(--red-dark) 0, var(--red) 104px, var(--ink) 105px, var(--ink) 100%);
  }
}

/* Above the cutover the diagonal is back, and moving the breakpoint alone was
   NOT enough: at 1201 the seam still landed inside a 50ch paragraph and two of
   its lines changed background mid-sentence. So on the diagonal the promise
   takes a shorter measure and stays entirely on the ink side.
   1201 is the tightest case, because that is where the seam sits furthest left
   relative to the hero text; every wider viewport only adds clearance. Verified
   by render at 1201, 1280, 1440 and 1920. */
@media (min-width: 1201px) {
  .pl-hero__promise { max-width: 40ch; }
}

/* ---------------------------------------------------------------------------
 * Buttons. The lift shadow is white on the dark hero so the offset reads at
 * all; everywhere else on the site it is ink on bone.
 * ------------------------------------------------------------------------ */

.pl-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* The global focus ring is the brand red, which is the one colour it cannot be
   inside the hero: the two buttons sit on the ink/red slab, where red on red
   measures 1.00:1 and the ring simply is not there for a keyboard user. Only the
   COLOUR is overridden, so the 3px width and 3px offset stay consistent with the
   rest of the site. Scoped to the hero because red on bone is fine everywhere else. */
.pl-hero :focus-visible { outline-color: var(--paper); }

.pl-btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 17px;
  line-height: 1.2;
  padding: 15px 26px;
  border: 3px solid var(--paper);
  border-radius: var(--radius);
  background: transparent;
  color: var(--paper);
  text-decoration: none;
  box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.35);
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.pl-btn--primary {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.pl-btn:hover, .pl-btn:focus-visible { transform: translate(-2px, -3px); box-shadow: 8px 9px 0 rgba(255, 255, 255, 0.45); }
.pl-btn--primary:hover, .pl-btn--primary:focus-visible { box-shadow: 8px 9px 0 var(--ink); }
.pl-btn:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.35); }
.pl-btn--primary:active { box-shadow: 3px 3px 0 var(--ink); }

/* ---------------------------------------------------------------------------
 * Sections.
 * ------------------------------------------------------------------------ */

/* The hero puts its gutter on the full-bleed slab and centres a --wrap inner,
   so its content edge sits at (viewport - wrap) / 2. The sections below carry
   their own gutter INSIDE the centred box, so their max-width has to include
   that gutter twice or every section would sit 20px inboard of the hero title.
   Same reason for the footer. */
.pl-section {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 44px var(--gutter) 0;
}

.pl-h2 {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(26px, 4.5vw, 38px);
  line-height: 1.1;
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 4px solid var(--ink);
}
.pl-lede { color: var(--muted); margin: 0 0 22px; max-width: 58ch; }

/* The two-sided story. One column on a phone, two once there is room for two
   comfortable measures side by side. auto-fit rather than a media query, same
   pattern as the coach hub. */
.pl-sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.pl-side {
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 24px 22px 26px;
}
.pl-side__title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  color: var(--red);
  margin: 0 0 14px;
}

.pl-list { list-style: none; margin: 0; padding: 0; }
.pl-list li {
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.5;
  padding: 12px 0;
  border-top: 2px solid var(--rule);
}
.pl-list li:first-child { border-top: 0; padding-top: 0; }
.pl-list strong { color: var(--ink); font-weight: 700; }

.pl-tag {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 3px;
  color: var(--new);
  background: var(--new-wash);
  vertical-align: 2px;
}

/* ---------------------------------------------------------------------------
 * Proof strip. Three real captures, all 1100x720, so one aspect-ratio holds
 * the row steady before the PNGs arrive and nothing reflows on load.
 * ------------------------------------------------------------------------ */

/* Explicit breakpoint rather than auto-fit. Three items in an auto-fit track
   spend a wide band (roughly 720px to 1010px) in TWO columns, which leaves the
   third shot alone on its own row looking like a mistake. There is no minmax
   value that fixes that: any width too narrow for three columns is a width that
   orphans one. So the strip is either all three across or all three stacked.
   860px is where three 260px columns plus two 20px gaps fit inside the gutters. */
.pl-shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 860px) {
  .pl-shots { grid-template-columns: repeat(3, 1fr); }
}

.pl-shot { margin: 0; }
.pl-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1100 / 720;
  object-fit: cover;
  object-position: top left;
  background: var(--paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--lift);
}
.pl-shot figcaption {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 14px;
}

/* ---------------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------------ */

.pl-foot {
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 56px auto 0;
  padding: 22px var(--gutter) 48px;
  border-top: 4px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pl-foot p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.pl-foot__year {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .pl-btn { transition: none; }
  .pl-btn:hover, .pl-btn:focus-visible, .pl-btn:active { transform: none; }
}