/* ==========================================================================
   myEcon — business presentation landing page
   Stylesheet for ams_landing.html

   Same structure and class names as the three membership sets
   (cfm_landing.css, mcs_landing.css, csm_landing.css), with the differences
   this page's mockup calls for:

     * the masthead carries a Contact Me button on the right,
     * there is no "Video 1 of 3" eyebrow — the video is the first thing,
     * the video is inset from the container rather than filling it,
     * each of the three columns is a membership with its own Join Now button,
       so the calls to action live in the columns instead of one .actions row.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --navy:       #0c2f9a;   /* headline and membership labels */
  --navy-deep:  #08246f;   /* Contact Me label */
  --body:       #1a45bd;   /* supporting copy */
  --blue:       #0062eb;   /* Join Now fill, Contact Me border */
  --blue-light: #1a72f4;   /* gradient top */
  --blue-deep:  #0058d8;   /* gradient bottom */
  --blue-hover: #0050c4;
  --rule-blue:  #1265e1;   /* the short bar under the headline */
  --sky:        #d4ebfe;   /* icon circle tint — also baked into the icon PNGs */
  --sky-soft:   #eaf4ff;   /* Contact Me hover */
  --rule:       #dbe6f5;   /* hairline dividers */
  --page:       #ffffff;
  --focus:      #0062eb;

  --shell:      1100px;    /* the page box — nothing gets wider than this */
  --shell-bg:   #eceff4;   /* light grey surround on screens wider than the box */
  --container:  1040px;    /* content inset inside the box */
  --hero:       910px;     /* the video sits narrower than the container */
  --measure:    760px;     /* comfortable line length for body copy */
  --btn-radius: 999px;     /* this page's buttons are pills */

  /* Matches the aspect ratio of ams_video_poster.jpg. Becomes 16 / 9 once the
     Vimeo embed is in — see README.md. */
  --video-aspect: 821 / 389;

  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
          Arial, "Helvetica Neue", sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--shell-bg);
}

/* The body is the page box: capped at --shell and centred, so the footer
   banner stops at the same edge as everything else on wide monitors. */
body {
  margin: 0 auto;
  max-width: var(--shell);
  background: var(--page);
  box-shadow: 0 0 0 1px rgba(12, 47, 154, 0.06);
  color: var(--body);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

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

h1, h2, p, figure { margin: 0; }

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

:where(a, button):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --------------------------------------------------------------------------
   3. Masthead — logo on the left, Contact Me on the right
   The supplied logo already carries the divider rule and "The Cashflow
   Success Company", so none of that is rebuilt as HTML text here.
   -------------------------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 34px);
  padding: clamp(18px, 2.6vw, 30px) 0 clamp(16px, 2.2vw, 24px);
  border-bottom: 1px solid var(--rule);
}

/* Layout wrapper only — the logo is not a link. */
.masthead__logo { flex: 0 0 auto; }

.masthead__logo img { width: clamp(230px, 36vw, 420px); }

/* --------------------------------------------------------------------------
   4. Video facade
   Poster image + play affordance. The real player is injected on click by
   ams_video.js, so nothing third-party loads until the visitor asks for it.
   -------------------------------------------------------------------------- */
.hero {
  width: 100%;
  max-width: var(--hero);
  margin-inline: auto;
  padding-block: clamp(20px, 3.2vw, 36px);
}

.video {
  position: relative;
  aspect-ratio: var(--video-aspect);
  overflow: hidden;
  border-radius: 12px;
  background: #0b1320;
  box-shadow: 0 8px 28px rgba(12, 47, 154, 0.16);
}

.video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video__play:hover,
.video__play:focus-visible { background: rgba(4, 20, 46, 0.18); }

.video__play:focus-visible { outline-offset: -4px; }

/* Play circle. Hidden when the poster already has one drawn into it — see the
   data-poster-play="baked" note in the HTML. */
.video__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 9vw, 96px);
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: rgba(10, 20, 40, 0.32);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.video__play-icon::before {
  content: "";
  border-style: solid;
  border-width: 0.55em 0 0.55em 0.9em;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.22em;
  font-size: clamp(18px, 2.6vw, 28px);
}

.video__play:hover .video__play-icon,
.video__play:focus-visible .video__play-icon {
  transform: scale(1.06);
  background: rgba(10, 20, 40, 0.5);
}

.video[data-poster-play="baked"] .video__play-icon { display: none; }

.video iframe,
.video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* --------------------------------------------------------------------------
   5. Pitch — headline, short rule, supporting copy
   -------------------------------------------------------------------------- */
.pitch {
  padding: clamp(10px, 1.6vw, 18px) 0 clamp(18px, 2.6vw, 28px);
  text-align: center;
}

/* Capped well short of the container so the headline breaks after "Financial"
   and keeps the two-line shape the mockup has, rather than running out to one
   long line on a wide monitor. */
.pitch__heading {
  max-width: 660px;
  margin-inline: auto;
  color: var(--navy);
  font-size: clamp(30px, 5.2vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* The short bar under the headline, drawn in CSS. */
.pitch__heading::after {
  content: "";
  display: block;
  width: 47px;
  height: 6px;
  margin: 0.38em auto 0;
  border-radius: 999px;
  background: var(--rule-blue);
}

.pitch__copy {
  max-width: var(--measure);
  margin: clamp(14px, 2vw, 22px) auto 0;
  font-size: clamp(16px, 2.1vw, 23px);
  line-height: 1.45;
  text-wrap: pretty;
}

/* An extra line break that only applies on phones. Off by default, switched
   on at the .br-phone rule in section 9. */
.br-phone { display: none; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  font-family: inherit;
  font-size: clamp(16px, 1.9vw, 21px);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(180deg, var(--blue-light) 0%, var(--blue-deep) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 98, 235, 0.26);
}

.btn--primary:hover { filter: saturate(1.05) brightness(1.06); }
.btn--primary:active { filter: brightness(0.94); }

/* Contact Me — white pill with a blue keyline. */
.btn--outline {
  background: #fff;
  border-color: var(--blue);
  color: var(--navy-deep);
  min-height: 48px;
  padding: 10px 24px;
  font-size: clamp(15px, 1.7vw, 19px);
}

.btn--outline:hover {
  background: var(--sky-soft);
  border-color: var(--blue-hover);
  color: var(--blue-hover);
}

/* Arrow, drawn in CSS so it stays crisp at any size. */
.btn__arrow {
  position: relative;
  width: 1.05em;
  height: 0.11em;
  background: currentColor;
  flex: 0 0 auto;
}

.btn__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 0.42em;
  height: 0.42em;
  border-top: 0.11em solid currentColor;
  border-right: 0.11em solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

/* Envelope on Contact Me, drawn as a box with a folded flap across it. */
.btn__envelope {
  position: relative;
  width: 1.28em;
  height: 0.94em;
  border: 0.11em solid currentColor;
  border-radius: 0.12em;
  flex: 0 0 auto;
  overflow: hidden;
}

.btn__envelope::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.42em;
  width: 0.86em;
  height: 0.86em;
  border-right: 0.11em solid currentColor;
  border-bottom: 0.11em solid currentColor;
  transform: translateX(-50%) rotate(45deg);
}

/* --------------------------------------------------------------------------
   7. Memberships — three columns, each with its own Join Now
   -------------------------------------------------------------------------- */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  padding: clamp(10px, 1.8vw, 20px) 0 clamp(28px, 4vw, 46px);
}

.benefit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  padding-inline: clamp(8px, 2vw, 26px);
  text-align: center;
}

.benefit + .benefit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2%;
  bottom: 2%;
  width: 1px;
  background: var(--rule);
}

/* The PNGs carry ~14% transparent padding each side, so the visible circle
   reads smaller than the box. Sized so the circle lands where the mockup
   has it. */
.benefit__icon { width: clamp(118px, 20vw, 206px); }

.benefit__label {
  color: var(--navy);
  font-size: clamp(15px, 2.1vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

/* Push every Join Now to the same baseline even when one label wraps to an
   extra line. */
.benefit .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   8. Footer banner
   The skyline and the logo lockup on the right are in the artwork. The
   copyright line was painted out of it and is rebuilt here as live text,
   positioned where it used to sit: 4% in from the left, on the same baseline
   as the lockup.
   -------------------------------------------------------------------------- */
.site-footer { margin-top: auto; }

.banner { position: relative; }

.banner img { width: 100%; }

/* The percentages track the artwork, so the line stays put as the band
   scales. The size does not track it all the way down, though — a purely
   proportional line would fall to about 5px on a phone, so it is held to a
   legible floor instead. */
.banner__copyright {
  position: absolute;
  left: 4%;
  top: 77.7%;
  transform: translateY(-50%);
  color: var(--navy);
  font-size: clamp(11px, 1.18vw, 13px);
  line-height: 1.2;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .masthead {
    justify-content: center;
    gap: 16px;
    padding-top: 20px;
  }

  .masthead__logo { flex-basis: 100%; display: flex; justify-content: center; }
  .masthead__logo img { width: min(74vw, 320px); }
}

/* Phone-only break in the supporting copy. Below about 460px the first
   sentence no longer fits on one line and wraps with "strategies." orphaned,
   so it is broken after "education" instead. Enlarging the type cannot
   achieve this: the second sentence is the longer of the two, so any size big
   enough to push "and" down has already split that line as well. 470px leaves
   a little room for fonts that set wider than Roboto. */
@media (max-width: 470px) {
  .br-phone { display: inline; }
}

@media (max-width: 560px) {
  .container { padding-inline: 16px; }

  /* One membership per row, each keeping its icon-above-label-above-button
     shape — these columns each end in a button, so the icon-on-the-left
     treatment the other sets use at this width does not suit them. */
  .benefits { grid-template-columns: 1fr; gap: 0; }

  .benefit {
    padding: 24px 4px;
    gap: 12px;
  }

  .benefit + .benefit::before {
    left: 4px;
    right: 4px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .benefit__icon { width: 118px; }
  .benefit__label { font-size: 19px; }
  .benefit .btn { width: 100%; }

  .btn--outline { width: 100%; }
}

/* --------------------------------------------------------------------------
   10. Preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  html { background: #fff; }
  body { max-width: none; box-shadow: none; }
  .video__play { display: none; }
  .btn { border: 1px solid #000; color: #000; background: #fff; box-shadow: none; }
}