/* reckoner.fit landing page.

   The commercial front of the site, and the only page built directly out of the
   brand palette (brand/BRAND.md) rather than the --surface / --text tokens the
   app pages use. It is dark in both themes on purpose: graphite is the identity
   ground, not a dark-mode variant of a light page, so there is nothing here for
   prefers-color-scheme to flip.

   The auth overlay is the exception. Its card is a plain .login-card from
   app.css, so it follows the reader's theme and stays identical to login.html.
   One card style, two places it can appear.

   Ported by hand from the design-system template in Design/. Vanilla CSS, zero
   build step, same as the rest of the site. */

body.landing {
  background: var(--graphite);
  color: var(--bone);
}

/* Bone at partial alpha, rather than --text-secondary, because this page does
   not flip with the theme and always sits on graphite. */
.landing { --bone-72: rgba(242, 240, 233, 0.72);
           --bone-66: rgba(242, 240, 233, 0.66);
           --bone-50: rgba(242, 240, 233, 0.50);
           --hair:    rgba(242, 240, 233, 0.12);
           --hair-lift: rgba(242, 240, 233, 0.14); }

.mkt { max-width: 1120px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* top bar */
.mkt-nav {
  position: sticky; top: 0; z-index: 5;
  background: rgba(23, 21, 15, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid var(--hair);
}
.mkt-nav .mkt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 16px; padding-bottom: 16px;
}
.mkt-brand { display: flex; align-items: baseline; gap: 2px; }
.mkt-brand img { align-self: center; margin-right: 9px; }
.mkt-brand b { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--bone); }
.mkt-brand span { font-size: 14px; color: var(--oxide-lift); }
.mkt-nav-right { display: flex; align-items: center; gap: 10px; }
.mkt-nav-right a.mkt-quiet { font-size: 14px; color: var(--bone-72); text-decoration: none; padding: 8px 12px; }
.mkt-nav-right a.mkt-quiet:hover { color: var(--bone); }

/* buttons. Chalk is the primary fill: oxide stays reserved for the mark. */
.btn-chalk, .btn-ghost {
  font-family: inherit; font-size: 14px; font-weight: 500;
  border-radius: var(--radius); padding: 9px 16px; cursor: pointer;
  white-space: nowrap;
}
.btn-chalk { background: var(--chalk); color: var(--iron); border: 0; }
/* The signed-in page swaps these buttons for real links to the app. */
a.btn-chalk, a.btn-ghost { display: inline-block; text-decoration: none; }
.btn-chalk:hover { filter: brightness(1.05); }
.btn-ghost { background: none; color: var(--bone); border: 0.5px solid rgba(242, 240, 233, 0.32); }
.btn-ghost:hover { border-color: rgba(242, 240, 233, 0.55); }
.btn-plain { background: none; border: 0; color: var(--bone); font-family: inherit;
  font-size: 14px; cursor: pointer; padding: 8px 12px; white-space: nowrap; }
.btn-lg { font-size: 16px; padding: 14px 24px; }

/* hero */
.mkt-hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
  padding-top: 72px; padding-bottom: 64px;
}
.mkt-eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oxide-lift); font-weight: 500; margin-bottom: 18px;
}
.mkt-hero h1 {
  font-size: clamp(38px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.02em;
  font-weight: 500; color: var(--bone); margin: 0 0 20px;
}
.mkt-lede { font-size: 18px; line-height: 1.55; color: rgba(242, 240, 233, 0.74); max-width: 480px; margin: 0 0 30px; }
.mkt-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mkt-fine { font-size: 13px; color: var(--bone-50); margin-top: 22px; max-width: 460px; line-height: 1.6; }
.mkt-fine span { display: block; }
.mkt-fine span + span { margin-top: 6px; }

/* Early access kicker. The eyebrow gains a quiet pill beside it. The row carries
   the 18px gap down to the h1 that the eyebrow used to, so the pill sits centred
   on the eyebrow rather than pushed down by the eyebrow's own margin. */
.mkt-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.mkt-kicker .mkt-eyebrow { margin-bottom: 0; }
.mkt-pill {
  font-size: 12px; color: var(--bone-72); background: none;
  border: 0.5px solid var(--hair-lift); border-radius: var(--radius);
  padding: 3px 9px; line-height: 1.4;
}

.mkt-shot {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  border: 0.5px solid var(--hair); background: var(--iron);
}
.mkt-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mkt-hero .mkt-shot { height: 480px; }
.mkt-credit {
  position: absolute; right: 8px; bottom: 6px; font-size: 10px; letter-spacing: 0.01em;
  color: rgba(242, 240, 233, 0.42);
}
.mkt-credit a { color: inherit; text-decoration: none; }
.mkt-credit a:hover { text-decoration: underline; }

/* how it works */
.mkt-how { padding-top: 40px; padding-bottom: 72px; }
.mkt-how-grid {
  border-top: 0.5px solid var(--hair-lift); padding-top: 40px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px;
}
.mkt-step-n { font-size: 13px; font-family: var(--font-mono); color: var(--oxide-lift); margin-bottom: 12px; }
.mkt-step h3 { font-size: 20px; font-weight: 500; color: var(--bone); margin: 0 0 8px; }
.mkt-step p { font-size: 15px; line-height: 1.55; color: var(--bone-66); margin: 0; }

/* features, on the lighter iron band */
.mkt-band { background: var(--iron); }
.mkt-band .mkt { padding-top: 72px; padding-bottom: 72px; }
.mkt-band h2 {
  font-size: clamp(28px, 3.6vw, 40px); font-weight: 500; letter-spacing: -0.01em;
  color: var(--bone); margin: 0 0 12px; max-width: 620px; line-height: 1.1;
}
.mkt-band .mkt-sub { font-size: 17px; color: var(--bone-66); max-width: 560px; margin: 0 0 44px; line-height: 1.55; }
.mkt-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.mkt-feature { display: flex; gap: 16px; align-items: flex-start; }
.mkt-feature i { font-size: 24px; color: var(--oxide-lift); flex: none; margin-top: 2px; }
.mkt-feature h3 { font-size: 18px; font-weight: 500; color: var(--bone); margin: 0 0 5px; }
.mkt-feature p { font-size: 15px; line-height: 1.55; color: rgba(242, 240, 233, 0.64); margin: 0; }

/* the founders band. It reuses .mkt-band (iron ground, same heading and sub
   scale) and adds one thing: an oxide lift hairline across the top, the single
   mark that says this is the page's offer. No fill, no seal, no red. */
.mkt-founders { border-top: 0.5px solid rgba(201, 95, 54, 0.28); }
.mkt-founders .mkt-eyebrow { margin-bottom: 16px; }
.mkt-founders .mkt-sub { max-width: 640px; text-wrap: pretty; }
.mkt-founders-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px 40px; margin-bottom: 36px;
}
/* Body copy here is load bearing, so it sits brighter than the features band's,
   and the item type is a notch down from that band to suit three across. */
.mkt-founders-grid .mkt-feature i { font-size: 22px; }
.mkt-founders-grid .mkt-feature h3 { font-size: 17px; }
.mkt-founders-grid .mkt-feature p { color: var(--bone-72); }
.mkt-founders-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.mkt-founders-cap { font-size: 13px; color: var(--bone-72); }

/* the watch band */
.mkt-watch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding-top: 80px; padding-bottom: 80px;
}
.mkt-watch .mkt-shot { height: 360px; }
/* The watch face. Not a photo of a watch: an actual capture off the device,
   round-cropped and given a bezel, sitting on the iron ground rather than
   filling the frame the way the hero photo does. */
.mkt-watch-face {
  display: flex; align-items: center; justify-content: center;
  background: var(--iron);
}
.mkt-watch-face img {
  width: 244px; height: 244px; border-radius: 50%;
  border: 7px solid #0d0b08;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  object-fit: cover;
}
.mkt-watch h2 {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; letter-spacing: -0.01em;
  color: var(--bone); margin: 0 0 16px; line-height: 1.08;
}
.mkt-watch p { font-size: 17px; color: rgba(242, 240, 233, 0.68); line-height: 1.55; margin: 0 0 26px; }

/* the Connect IQ store badge. Sits beside the Start training button in the watch
   band: one CTA opens an account, the badge takes the reader to the Garmin
   listing. inline-block so it hugs the badge art rather than the column.

   Width only, with height left to the file's own 278:95 ratio. Garmin's badge
   is theirs and goes on the page unaltered, so a height that fought the artwork
   would stretch it. The radius matches the corner drawn into the badge at this
   width, which is what a focus ring follows.

   155px is not a taste: it is the width at which the badge stands 53px, which
   is the height of the button beside it. At 210px it stood 72px against a 53px
   button and read as the louder of the two, when the button is the one that
   opens an account. */
.mkt-ciq { display: inline-block; vertical-align: middle; margin-left: 16px; line-height: 0; border-radius: 7px; }
.mkt-ciq img { display: block; width: 155px; height: auto; }
/* The badge ground is near black, so the hover lift has to be bigger than it
   would be on white artwork to register at all. */
.mkt-ciq:hover { filter: brightness(1.18); }
/* The Start training button shares the row, so it aligns to the badge. */
.mkt-watch .btn-chalk { vertical-align: middle; }

/* footer */
.mkt-footer { border-top: 0.5px solid var(--hair); }
.mkt-footer .mkt {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  justify-content: space-between; padding-top: 28px; padding-bottom: 28px;
}
.mkt-footer-right { font-size: 13px; color: var(--bone-50); display: flex; gap: 18px; align-items: center; }
.mkt-footer-right a { color: rgba(242, 240, 233, 0.6); text-decoration: none; }
.mkt-footer-right a:hover { color: var(--bone); }

/* the cookie notice. Shape and behaviour come from app.css; only the colours
   are restated, because this page is graphite in both themes and the shared bar
   is not: in light mode it would arrive as a white card on a dark page, which
   reads as something that got loose rather than part of the site. Same reason
   the rest of this file exists. */
.landing .rk-consent {
  background: rgba(42, 39, 31, 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: var(--hair-lift);
  color: var(--bone-72);
}
.landing .rk-consent a { color: var(--bone); }
/* Reject is a ghost button on the dark landing, Accept is the filled chalk one.
   Both are full buttons; the weight difference is deliberate, not a demotion of
   the reject. */
.landing .rk-consent-btn {
  background: transparent; color: var(--bone); border-color: var(--hair-lift);
}
.landing .rk-consent-btn:hover {
  background: rgba(255, 255, 255, 0.08); color: var(--bone); border-color: var(--bone-72);
}
.landing .rk-consent-btn-primary {
  background: var(--chalk); color: var(--iron); border-color: transparent;
}
.landing .rk-consent-btn-primary:hover {
  background: var(--bone); color: var(--iron); filter: none;
}

/* the auth overlay. The scrim is graphite; the card inside is a .login-card
   straight out of app.css, so it matches login.html exactly. */
.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(15, 13, 9, 0.68);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.scrim[hidden] { display: none; }
.scrim .login-card { margin: 0; width: 100%; max-width: 404px; position: relative; }
.scrim .login-card .brand { margin-bottom: 18px; }
.auth-close {
  position: absolute; top: 14px; right: 14px; background: none; border: 0;
  color: var(--text-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px;
}
.auth-close:hover { color: var(--text-primary); }
.auth-swap { font-size: 13px; color: var(--text-secondary); margin-top: 18px; text-align: center; }
.auth-swap button {
  background: none; border: 0; color: var(--accent); cursor: pointer;
  font-family: inherit; font-size: 13px; padding: 0;
}

/* Narrow. The two-column bands stack and the hero photo loses most of its
   height, because on a phone it is a garnish and the words are the page. */
@media (max-width: 900px) {
  .mkt { padding-left: 20px; padding-right: 20px; }
  .mkt-hero, .mkt-watch { grid-template-columns: 1fr; gap: 32px; }
  .mkt-hero { padding-top: 48px; padding-bottom: 44px; }
  .mkt-watch { padding-top: 56px; padding-bottom: 56px; }
  .mkt-hero .mkt-shot { height: 260px; }
  .mkt-watch .mkt-shot { height: 240px; order: 2; }
  .mkt-how-grid, .mkt-features { grid-template-columns: 1fr; gap: 28px; }
  .mkt-band .mkt { padding-top: 52px; padding-bottom: 52px; }
  .mkt-nav-right a.mkt-quiet { display: none; }
  .mkt-lede { font-size: 17px; }
  /* Button and badge stack rather than sharing a row, so the badge starts at
     the left edge instead of carrying its inline gap. fit-content keeps the
     link the width of the badge: block alone would stretch it across the
     column and leave a strip of empty ground that still goes to Garmin. */
  .mkt-watch .btn-chalk { display: block; }
  .mkt-ciq { display: block; width: fit-content; margin-left: 0; margin-top: 18px; }
}

/* Phone. The brand plus two buttons does not fit, and letting them wrap gives a
   two-line top bar. The nav keeps the one call to action; the hero right below
   it offers both, so nothing is lost by dropping "Sign in" here. */
@media (max-width: 560px) {
  .mkt-nav-right [data-open-auth="signin"] { display: none; }
  .mkt-nav .mkt { padding-top: 12px; padding-bottom: 12px; }
  .mkt-brand b { font-size: 19px; }
  .mkt-brand img { width: 22px; height: 22px; margin-right: 7px; }
  /* Scoped to the top bar. Written as a bare `.btn-chalk, .btn-ghost` this also
     shrank the hero's `.btn-lg` buttons, because the two selectors have equal
     specificity and this one comes later in the file: the primary call to
     action ended up smaller on a phone than on a desktop, which is backwards. */
  .mkt-nav-right .btn-chalk, .mkt-nav-right .btn-ghost {
    padding: 8px 13px;
    min-height: 44px;      /* narrow screen means a finger, so keep it tappable */
  }
  .mkt-cta-row .btn-lg { flex: 1 1 100%; }
}

/* Belt and braces for a touch screen that is not narrow, a tablet in landscape
   say, where the rule above does not apply but the pointer is still a finger. */
@media (pointer: coarse) {
  .btn-chalk, .btn-ghost, .btn-plain { min-height: 44px; }
  /* The footer links are 20px of text. Grow the hit area, not the type. */
  .mkt-footer-right a { display: inline-block; padding: 12px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .btn-chalk, .btn-ghost, .mkt-nav-right a.mkt-quiet, .mkt-footer-right a { transition: all 0.15s ease; }
}