/* Flexora landing page.

   Loaded after style.css, which owns the colour tokens, the dark scheme and
   the language switching. Only what the marketing page adds lives here, so the
   policy pages stay exactly as they were.

   The document pages are a 780px column; this one needs a wider stage, hence
   the .wide override on the shared header and footer. */

.wide { max-width: 1160px !important; }

section { padding: 0 22px; }

:root {
  /* A second, cooler tint for alternating bands. The green --soft reads as
     part of the brand; this one just separates one band from the next. */
  --cool: #f4f5fb;
  --cool-line: #e7e9f5;
  --amber: #f0a13c;
  --card-shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 10px 30px rgba(16, 24, 32, .06);
  --float-shadow: 0 16px 40px rgba(16, 24, 32, .14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cool: #131a20;
    --cool-line: #1e2a33;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
    --float-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  }
}

.band {
  max-width: 1160px;
  margin: 0 auto;
  padding: 92px 22px;
}
.band.tint,
.band.cool {
  max-width: none;
  padding-left: 22px;
  padding-right: 22px;
}
.band.tint { background: var(--soft); border-block: 1px solid var(--soft-line); }
.band.cool { background: var(--cool); border-block: 1px solid var(--cool-line); }
.band.tint > .inner,
.band.cool > .inner { max-width: 1160px; margin: 0 auto; }

.eyebrow-c {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

h2.section-title {
  margin: 0 auto 16px;
  max-width: 720px;
  text-align: center;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  /* No tight line-height: Georgian renders in a fallback face whose descenders
     get clipped by a box tighter than the font asks for. */
}

p.section-lead {
  margin: 0 auto;
  max-width: 660px;
  text-align: center;
  color: var(--muted);
}

/* ---------- header ---------- */

.site-header .inner { padding: 12px 22px; }

.brand .tile {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  /* Literal, not --ink: this chip is dark in both schemes, and --ink is the
     text colour, which flips light when the page does. */
  background: #101820;
  display: grid;
  place-items: center;
  flex: none;
}
.brand .tile svg { width: 17px; height: 17px; }

.nav {
  display: flex;
  gap: 28px;
  margin-left: 38px;
}
.nav a {
  color: var(--body);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.nav a:hover { color: var(--accent); }

.header-cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--forest);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.header-cta:hover { opacity: .92; }

@media (max-width: 900px) {
  .nav { display: none; }
}

/* ---------- hero ---------- */

/* The wash is the one piece of decoration on the page: a green bloom behind
   the words and a warm one behind the phone, so the two halves sit on
   different ground without a hard edge between them. */
.hero-wrap {
  position: relative;
  background:
    radial-gradient(58% 78% at 6% 16%, rgba(83, 224, 160, .20), transparent 62%),
    radial-gradient(52% 72% at 94% 6%, rgba(244, 186, 128, .30), transparent 62%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}

@media (prefers-color-scheme: dark) {
  .hero-wrap {
    background:
      radial-gradient(58% 78% at 6% 16%, rgba(83, 224, 160, .10), transparent 62%),
      radial-gradient(52% 72% at 94% 6%, rgba(244, 186, 128, .08), transparent 62%),
      var(--bg);
  }
}

.hero {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 56px;
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 0 88px;
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 5.4vw, 54px);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
}
.hero h1 .accent { color: var(--forest); display: block; }

@media (prefers-color-scheme: dark) {
  .hero h1 .accent { color: var(--mint); }
}

.hero .lead {
  font-size: 17px;
  max-width: 520px;
  margin: 0 0 28px;
}

/* The proof row. No invented ratings and no invented member counts - what it
   carries is what the app actually is. */
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--muted);
}
.proof .dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--soft-line);
  color: var(--accent);
  font-weight: 700;
}

.store-row { display: flex; flex-wrap: wrap; gap: 12px; }

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 24px;
  border-radius: 14px;
  background: var(--ink);
  /* --bg, not #fff: the face is --ink, so the text has to be whatever --ink
     is not. In dark mode --ink goes light and white text disappeared. */
  color: var(--bg);
  text-decoration: none;
  line-height: 1.15;
  box-shadow: 0 8px 22px rgba(16, 24, 32, .18);
}
.store-btn:hover { opacity: .9; }
.store-btn svg { width: 24px; height: 24px; flex: none; }
.store-btn small { display: block; font-size: 10px; opacity: .75; }
.store-btn strong { font-size: 15px; font-weight: 700; color: var(--bg); }

.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--muted);
}
.ticks span { display: inline-flex; align-items: center; gap: 7px; }
.ticks svg { width: 15px; height: 15px; color: var(--emerald); flex: none; }

/* ---------- the phone, and the cards floating off it ---------- */

.phone-stage {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 300px;
}

.phone {
  width: 100%;
  border-radius: 38px;
  border: 9px solid #101820;
  background: #101820;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(16, 24, 32, .20);
}
.phone img { display: block; width: 100%; height: auto; }

.float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--float-shadow);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.float b { display: block; color: var(--ink); font-size: 13px; font-weight: 700; }
.float .pip {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}
.float .pip svg { width: 15px; height: 15px; }
.float.one { top: 54px; left: -66px; }
.float.two { bottom: 92px; right: -58px; }

@media (max-width: 1080px) {
  .float.one { left: -28px; }
  .float.two { right: -20px; }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding: 44px 0 64px; }
  .phone-stage { max-width: 268px; }
  .float { display: none; }
}

/* ---------- the strip under the hero ---------- */

.strip {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.strip .inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 34px;
  font-size: 14px;
  color: var(--muted);
}
.strip .lbl { font-weight: 600; color: var(--body); }
.strip .item { display: inline-flex; align-items: center; gap: 8px; color: var(--body); }
.strip .item svg { width: 16px; height: 16px; color: var(--emerald); flex: none; }

/* ---------- pillars ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 26px;
  box-shadow: var(--card-shadow);
}
.card .ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.card .ico svg { width: 20px; height: 20px; }
.card .kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.card p { margin: 0; font-size: 14.5px; }

/* The inset at the foot of each card: one concrete detail, pushed to the
   bottom so the three line up however long the paragraphs run. */
.card .inset {
  margin-top: auto;
  padding-top: 18px;
}
.card .inset .in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--soft);
  font-size: 12px;
  color: var(--muted);
}
.card .inset .in svg { width: 15px; height: 15px; color: var(--emerald); flex: none; }
.card .inset .in strong { color: var(--ink); font-weight: 600; }
.card .inset .in .tag {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--soft-line);
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
}

/* Icon tiles, one hue each, the way the three pillars read as three things. */
.t-green { background: #e6f6ec; color: #0b6e3c; }
.t-amber { background: #fdf0df; color: #b4701a; }
.t-blue  { background: #e8eefb; color: #2b5bb8; }

@media (prefers-color-scheme: dark) {
  .t-green { background: #10251a; color: #53e0a0; }
  .t-amber { background: #2a2014; color: #e8b877; }
  .t-blue  { background: #141d2e; color: #8fb2f0; }
}

@media (max-width: 880px) {
  .cards { grid-template-columns: 1fr; }
}

/* ---------- split section ---------- */

.split {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 62px;
  align-items: center;
}

.shot-stage { position: relative; justify-self: center; width: 100%; max-width: 282px; }

.shot {
  width: 100%;
  border-radius: 32px;
  border: 8px solid #101820;
  background: #101820;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(16, 24, 32, .18);
}
.shot img { display: block; width: 100%; height: auto; }

.split h2 {
  margin: 0 0 14px;
  font-size: clamp(27px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.rows { margin-top: 28px; display: grid; gap: 14px; }
.row {
  display: flex;
  gap: 14px;
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--bg);
  box-shadow: var(--card-shadow);
}
.row .ico {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
}
.row .ico svg { width: 17px; height: 17px; }
.row strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 3px; }
.row p { margin: 0; font-size: 13.5px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 42px; }
}

/* ---------- honest numbers ---------- */

.figures {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 34px;
  align-items: center;
}

.figures .say { max-width: 520px; }
.figures .say h2 {
  margin: 0 0 12px;
  font-size: clamp(25px, 3.2vw, 32px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.figures .say p { margin: 0; }

.numbers { display: grid; gap: 16px; }
.num {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--card-shadow);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.num b {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--forest);
}
.num span { font-size: 14px; color: var(--muted); }

@media (prefers-color-scheme: dark) {
  .num b { color: var(--mint); }
}

@media (max-width: 880px) {
  .figures { grid-template-columns: 1fr; gap: 26px; }
}

/* ---------- closing call to action ---------- */

.cta {
  max-width: 1160px;
  margin: 0 auto 92px;
  border-radius: 30px;
  padding: 62px 28px 58px;
  text-align: center;
  background: linear-gradient(135deg, #0b6e3c 0%, #12a05c 55%, #1fb96c 100%);
  color: #fff;
}
.cta .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: 12px;
  font-weight: 700;
}
.cta .pill svg { width: 14px; height: 14px; }
.cta h2 {
  margin: 0 auto 12px;
  max-width: 640px;
  font-size: clamp(27px, 3.8vw, 38px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.cta p { margin: 0 auto 28px; max-width: 560px; color: rgba(255, 255, 255, .92); }
.cta .store-row { justify-content: center; }
.cta .store-btn { background: #fff; color: #101820; box-shadow: 0 10px 26px rgba(0, 0, 0, .18); }
.cta .store-btn strong { color: #101820; }
.cta .note { margin: 20px 0 0; font-size: 13px; color: rgba(255, 255, 255, .78); }

/* ---------- footer ---------- */

.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 22px 30px;
}
.foot-grid h4 {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-grid a { display: block; color: var(--body); text-decoration: none; font-size: 14px; margin-bottom: 9px; }
.foot-grid a:hover { color: var(--accent); }
.foot-grid .brand { margin-bottom: 12px; }
.foot-grid p { margin: 0; font-size: 14px; max-width: 330px; }

.foot-bar {
  border-top: 1px solid var(--line);
}
.foot-bar .inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 18px 22px 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--muted);
}
.foot-bar .right { margin-left: auto; }

@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .band { padding: 66px 0; }
  .cta { padding: 48px 22px 44px; margin-bottom: 66px; }
}