/* ==========================================================================
   FitLocker — fitlocker.app
   Shared stylesheet for the landing page and the legal pages.
   Tokens mirror the app's Pelagio design system (lib/theme.ts).
   ========================================================================== */

/* --- Manrope (variable, self-hosted — no third-party requests) ----------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Surfaces */
  --cream: #f8f6f1;
  --white: #ffffff;

  /* Brand */
  --green: #0f5c3e;
  --green-deep: #0a4b32;
  --lime: #c4f08e;
  --lime-deep: #8fd63f;
  --pale-blue: #d5e9fd;

  /* The one flat colour behind every device shot. Change this single value
     to re-tone both dark sections. */
  --band: #0a4b32;

  /* Text */
  --ink: #0d0d0d;
  --muted: #6a6a6a;
  --muted-soft: #8a8a8a;
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.72);
  --on-dark-soft: rgba(255, 255, 255, 0.46);

  /* Lines */
  --divider: rgba(13, 13, 13, 0.08);
  --divider-dark: rgba(255, 255, 255, 0.14);

  /* Geometry */
  --r-card: 18px;
  --r-field: 14px;
  --wrap: 1120px;
  --gutter: 24px;
  --section-y: clamp(76px, 9vw, 128px);
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
::selection {
  background: var(--lime);
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid var(--lime-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow {
  max-width: 760px;
}
.section {
  padding: var(--section-y) 0;
}

/* Flat brand-green band. No gradient, no pattern — the device frames are the
   only thing on it. */
.band-dark {
  background: var(--band);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}

/* --- Type ---------------------------------------------------------------- */
.overline {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 18px;
}
.band-dark .overline,
.overline--lime {
  color: var(--lime);
}

h1,
.h1 {
  font-size: clamp(41px, 7.2vw, 76px);
  line-height: 1.03;
  font-weight: 800;
  letter-spacing: -0.035em;
}
h2,
.h2 {
  font-size: clamp(31px, 4.4vw, 48px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.032em;
}
.h3 {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.lede {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}
.band-dark .lede {
  color: var(--on-dark-muted);
}
.fine {
  font-size: 14px;
  color: var(--muted-soft);
  font-weight: 500;
}
.band-dark .fine {
  color: var(--on-dark-soft);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.16s ease, background-color 0.16s ease,
    box-shadow 0.16s ease, border-color 0.16s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 10px 24px -12px rgba(15, 92, 62, 0.7);
}
.btn--primary:hover {
  background: var(--green-deep);
}

.btn--light {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.6);
}
.btn--light:hover {
  background: var(--lime);
}

.btn--ghost {
  background: transparent;
  color: var(--on-dark);
  border-color: var(--divider-dark);
}
.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

.btn--sm {
  height: 42px;
  padding: 0 20px;
  font-size: 14.5px;
  gap: 7px;
}

.btn-store__top {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.62;
  line-height: 1.1;
  margin-bottom: 1px;
}
.btn-store__main {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.btn-store__label {
  text-align: left;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
}
.site-header--light {
  position: sticky;
  left: auto;
  right: auto;
  background: rgba(248, 246, 241, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--divider);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 76px;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav__logo img {
  height: 26px;
  width: auto;
}
/* single-colour transparent wordmark → recolour to white on dark chrome */
.site-header:not(.site-header--light) .nav__logo img,
.footer__logo img {
  filter: brightness(0) invert(1);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
.nav__link {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--on-dark-muted);
  transition: color 0.16s ease;
}
.nav__link:hover {
  color: var(--on-dark);
}
.site-header--light .nav__link {
  color: var(--muted);
}
.site-header--light .nav__link:hover {
  color: var(--ink);
}

/* --- Device frame -------------------------------------------------------- */
/* Raw app screenshots in a drawn iPhone bezel. Every dimension derives from
   --w, so one value scales the whole thing. */
.device {
  --w: 320px;
  width: var(--w);
  flex: none;
  padding: calc(var(--w) * 0.026);
  border-radius: calc(var(--w) * 0.128);
  background: #101114;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09),
    0 34px 70px -28px rgba(0, 0, 0, 0.62);
}
.device img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--w) * 0.104);
  display: block;
}

/* A full 19.5:9 device is ~2.2x its width tall, which makes a feature row
   enormous. This shows the top of the screen at full size and dissolves the
   rest into the band. */
.device--crop {
  height: clamp(400px, 43vw, 580px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 99%);
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  padding-top: clamp(112px, 11vw, 152px);
  padding-bottom: 0;
  text-align: center;
}
.hero__inner {
  max-width: 880px;
  margin: 0 auto;
}
.hero h1 {
  margin-bottom: 22px;
}
.hero .lede {
  max-width: 600px;
  margin: 0 auto 30px;
  font-size: clamp(17px, 1.5vw, 20px);
}
.hero .cta-row {
  justify-content: center;
  margin-bottom: 16px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.pill {
  border: 1.5px solid rgba(196, 240, 142, 0.45);
  color: var(--lime);
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Three devices, centre one forward, all bleeding off the bottom of the band */
/* A fixed-height window the devices are taller than, so they run off the
   bottom edge of the band. Aligned to the top and clipped, so the height is
   predictable and can never grow upward into the CTA. */
.hero-devices {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(14px, 2.2vw, 30px);
  margin-top: clamp(52px, 6vw, 84px);
  padding: 0 var(--gutter);
  height: clamp(300px, 33vw, 480px);
  overflow: hidden;
}
.hero-devices .device {
  --w: clamp(200px, 25vw, 340px);
}
.hero-devices .device--side {
  --w: clamp(160px, 20vw, 272px);
  margin-top: clamp(24px, 3.4vw, 56px);
}
.hero-devices .device:first-child {
  transform: rotate(-3.5deg);
  transform-origin: top right;
}
.hero-devices .device:last-child {
  transform: rotate(3.5deg);
  transform-origin: top left;
}

/* --- Steps --------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  margin-top: 52px;
}
.step__num {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--green-deep);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 20px;
}
.step h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 8px;
}
.step p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.58;
}

/* --- Feature rows -------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}
.feature + .feature {
  margin-top: clamp(64px, 7vw, 104px);
}
.feature:nth-child(even) .feature__media {
  order: -1;
}
.feature__copy .h3 {
  margin-bottom: 16px;
}
.feature__copy .lede {
  max-width: 46ch;
}
.feature__media {
  display: flex;
  justify-content: center;
}
.feature__media .device {
  --w: clamp(280px, 30vw, 380px);
}

/* --- Closing CTA --------------------------------------------------------- */
.closing {
  text-align: center;
}
.closing .lede {
  max-width: 46ch;
  margin: 18px auto 0;
}
.closing .cta-row {
  justify-content: center;
  margin-top: 34px;
}
.closing .fine {
  margin-top: 16px;
}

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--band);
  color: var(--on-dark);
  padding: clamp(52px, 6vw, 76px) 0 40px;
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--divider-dark);
}
.footer__logo img {
  height: 24px;
  width: auto;
  margin-bottom: 16px;
}
.footer__blurb {
  color: var(--on-dark-muted);
  font-size: 15.5px;
  max-width: 34ch;
  line-height: 1.55;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
}
.footer__links a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.16s ease;
}
.footer__links a:hover {
  color: var(--lime);
}
.footer__bottom {
  padding-top: 26px;
  color: var(--on-dark-soft);
  font-size: 14px;
}

/* --- Legal pages --------------------------------------------------------- */
.legal {
  padding: clamp(48px, 6vw, 76px) 0 clamp(64px, 8vw, 104px);
}
.legal h1 {
  font-size: clamp(34px, 5vw, 46px);
  margin-bottom: 8px;
}
.legal .updated {
  color: var(--muted-soft);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 40px;
}
.legal h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 40px 0 12px;
}
.legal p,
.legal li {
  font-size: 16.5px;
  line-height: 1.7;
  color: #33383a;
  font-weight: 500;
}
.legal p {
  margin: 0 0 14px;
}
.legal .lede {
  font-size: 19px;
  line-height: 1.62;
  color: var(--muted);
  margin-bottom: 8px;
}
.legal ul {
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal li {
  margin-bottom: 8px;
}
.legal a {
  color: var(--green);
  font-weight: 600;
  text-decoration-color: rgba(15, 92, 62, 0.3);
  text-underline-offset: 3px;
}
.legal a:hover {
  text-decoration-color: var(--green);
}
.legal strong {
  font-weight: 700;
  color: var(--ink);
}
.legal hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: 48px 0 26px;
}
.legal .legal-footer {
  color: var(--muted-soft);
  font-size: 14.5px;
}
.legal .legal-footer a {
  color: var(--muted);
}

/* --- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
    @keyframes reveal-up {
      from {
        opacity: 0;
        transform: translateY(26px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
    justify-items: center;
  }
  .feature:nth-child(even) .feature__media {
    order: 0;
  }
  .feature__copy .lede {
    max-width: 52ch;
    margin-inline: auto;
  }
  /* the media column must stay full-width: justify-items:center would make it
     shrink-to-fit, and a percentage width inside would resolve to 0 */
  .feature__media {
    width: 100%;
  }
  .feature__media .device {
    --w: min(330px, 78vw);
  }
  .steps {
    grid-template-columns: 1fr;
    gap: 34px;
    max-width: 460px;
    margin-inline: auto;
  }
  .step {
    text-align: center;
  }
  .step__num {
    margin-inline: auto;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .nav {
    height: 66px;
  }
  .nav__links .nav__link {
    display: none;
  }
  .nav__logo img {
    height: 19px;
  }
  .hero .cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .cta-row .btn {
    width: 100%;
  }
  .hero-devices {
    gap: 10px;
    margin-top: 44px;
    padding: 0 10px;
    height: 80vw;
  }
  /* order matters: --side must follow the base rule — same specificity */
  .hero-devices .device {
    --w: 52vw;
  }
  .hero-devices .device--side {
    --w: 30vw;
    margin-top: 16px;
  }
  .footer__top {
    flex-direction: column;
    gap: 26px;
  }
  .footer__links {
    flex-direction: column;
    gap: 12px;
  }
}