/* 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: var(--s-9) var(--s-5);
}
.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 var(--s-4);
  max-width: 760px;
  text-align: center;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: 800;
  letter-spacing: -.028em;
  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: 620px;
  text-align: center;
  font-size: var(--t-lead);
  line-height: 1.6;
  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: var(--s-8) 0 var(--s-9);
}

.hero h1 {
  margin: 0 0 var(--s-5);
  font-size: var(--t-hero);
  line-height: var(--t-hero-lh);
  font-weight: 800;
  letter-spacing: -.035em;
  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: var(--t-lead);
  line-height: 1.62;
  max-width: 500px;
  margin: 0 0 var(--s-6);
}

/* 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: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--e-2);
  transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--e-3); transform: translateY(-2px); }
.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 var(--s-3);
  font-size: var(--t-h3);
  line-height: var(--t-h3-lh);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.018em;
}
.card p { margin: 0; font-size: var(--t-body); line-height: 1.62; }

/* 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: var(--r-md);
  background: var(--soft);
  font-size: var(--t-small);
  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 var(--s-4);
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  font-weight: 800;
  letter-spacing: -.028em;
  color: var(--ink);
}

.rows { margin-top: 28px; display: grid; gap: 14px; }
.row {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--e-1);
  transition: box-shadow .18s ease;
}
.row:hover { box-shadow: var(--e-2); }
.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: var(--s-5) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--e-1);
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.num b {
  font-size: 46px;
  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; }
}

/* ---------- plans ----------

   The page now has something to sell, so it needs somewhere to say the price.
   Two cards rather than a table: the free side is large enough to be worth
   reading, because most of the app genuinely is free and hiding that would
   make the paid side look like the whole product. */

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 880px;
  margin: 48px auto 0;
  align-items: start;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--e-2);
}

/* The paid card carries the brand edge and a little more lift, so the eye
   lands on it without the free card being made to look poor. */
.plan.paid {
  border: 2px solid var(--forest);
  box-shadow: var(--e-brand);
}

@media (prefers-color-scheme: dark) {
  .plan.paid {
    border-color: var(--mint);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .45);
  }
}

.plan .tier {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

/* baseline alignment so "27" and "₾/თვე" sit on one line however tall the
   Georgian fallback face runs. */
.plan .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.plan .price b {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
  line-height: 1.1;
}
.plan .price span { font-size: 15px; color: var(--muted); }

.plan .second {
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--muted);
}
.plan .second b { color: var(--ink); font-weight: 700; }

.plan .blurb {
  margin: 0 0 20px;
  font-size: 14.5px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.plan ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.plan li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--body);
  /* not center: a wrapped two-line item should keep its tick beside the first
     line rather than floating to the middle of the block. */
  align-items: flex-start;
}
.plan li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--emerald); flex: none; }
.plan li.no { color: var(--muted); }
.plan li.no svg { color: var(--muted); opacity: .55; }

.plan .foot { margin-top: auto; }

.plan-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* min-height, not height: the Georgian label runs longer than the English it
     was laid out against, and a button that cannot grow simply clips it. */
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.plan-btn.solid { background: var(--forest); color: #fff; }
.plan-btn.solid:hover { opacity: .92; }
.plan-btn.quiet {
  background: var(--soft);
  border: 1px solid var(--soft-line);
  color: var(--ink);
}
.plan-btn.quiet:hover { border-color: var(--forest); }

@media (prefers-color-scheme: dark) {
  .plan-btn.solid { background: var(--emerald); }
}

.plan .after {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

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

/* ---------- what we do not do ----------

   The strongest thing this app can say about privacy is a list of what is
   absent, and absence is hard to draw. Four flat tiles, no icons competing
   for attention, each one a thing another fitness app would have. */

.nots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}

.not {
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--e-1);
}
.not b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.not span { font-size: 13.5px; color: var(--muted); }

@media (max-width: 980px) { .nots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nots { grid-template-columns: 1fr; } }

/* ---------- how to get premium today ---------- */

.getin {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 26px 28px;
  border: 1px solid var(--soft-line);
  border-radius: 22px;
  background: var(--soft);
}
.getin h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--ink); }
.getin p { margin: 0 0 16px; font-size: 14.5px; }
.getin a.mailto {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14.5px;
}
.getin a.mailto:hover { border-color: var(--forest); color: var(--accent); }
.getin a.mailto svg { width: 16px; height: 16px; color: var(--emerald); }

/* ---------- monthly / annual switch ----------

   The two prices are both in the markup and the switch shows one of them. No
   request, no recalculation: whichever is hidden is still the number the other
   half of the page quotes, so they cannot drift apart the way a computed
   discount and a written one do. */

.billing {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1);
  margin: var(--s-6) auto 0;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--e-1);
}
.billing-row { display: flex; justify-content: center; }

.billing button {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: var(--s-2) var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
}
.billing button[aria-pressed="true"] {
  background: var(--forest);
  color: #fff;
  box-shadow: 0 2px 8px rgba(11, 110, 60, .28);
}
@media (prefers-color-scheme: dark) {
  .billing button[aria-pressed="true"] { background: var(--emerald); }
}

.billing .save {
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--soft);
  border: 1px solid var(--soft-line);
  color: var(--forest);
  font-size: var(--t-micro);
  font-weight: 800;
}
.billing button[aria-pressed="true"] .save {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}

/* ---------- comparison ----------

   A table rather than two lists, because the question it answers is "what do I
   lose by not paying", and two lists make the reader hold both in their head to
   work that out. */

.compare {
  max-width: 880px;
  margin: var(--s-8) auto 0;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--e-2);
  /* clips the header's corners to the card's radius */
  overflow: hidden;
}

.compare table { width: 100%; border-collapse: collapse; }

.compare th,
.compare td {
  padding: var(--s-4) var(--s-5);
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-body);
  vertical-align: middle;
}
.compare tr:last-child td { border-bottom: 0; }

.compare thead th {
  background: var(--soft);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
/* The paid column is tinted the whole way down, so the eye can follow it
   without re-reading the header on every row. */
.compare thead th.paid,
.compare td.paid { background: var(--soft); color: var(--forest); }
.compare thead th.paid { color: var(--forest); }

.compare td.what { color: var(--ink); font-weight: 600; width: 46%; }
.compare td.free,
.compare td.paid { text-align: center; width: 27%; color: var(--muted); }

.compare svg { width: 18px; height: 18px; vertical-align: -3px; }
.compare .yes { color: var(--emerald); }
.compare .no { color: var(--muted); opacity: .45; }

@media (max-width: 640px) {
  .compare th, .compare td { padding: var(--s-3) var(--s-4); font-size: var(--t-small); }
  .compare td.what { width: 52%; }
}

/* ---------- questions ----------

   <details>/<summary> rather than a scripted accordion: it opens with
   JavaScript off, the browser gives it keyboard handling and screen-reader
   semantics for free, and Ctrl+F finds text inside a closed one. */

.qa { max-width: 820px; margin: var(--s-7) auto 0; display: grid; gap: var(--s-3); }

.q {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  box-shadow: var(--e-1);
  overflow: hidden;
}
.q[open] { box-shadow: var(--e-2); }

.q summary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  cursor: pointer;
  list-style: none;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--ink);
}
/* Safari draws its own triangle through ::-webkit-details-marker and ignores
   list-style, so both have to be turned off to get one chevron instead of two. */
.q summary::-webkit-details-marker { display: none; }
.q summary:hover { color: var(--accent); }

.q .chev {
  margin-left: auto;
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform .2s ease;
}
.q[open] .chev { transform: rotate(180deg); }

.q .ans {
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--t-body);
  line-height: 1.68;
  color: var(--body);
}
.q .ans p { margin: 0; }
.q .ans p + p { margin-top: var(--s-3); }

/* ---------- a quieter closing band ----------

   The gradient block at the foot was doing the same job as the hero and
   competing with it. This one earns its place by being the last thing read,
   not the loudest. */

.cta { box-shadow: var(--e-brand); }
.cta h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: -.028em; }
.cta p { font-size: var(--t-lead); line-height: 1.6; }

/* The two prices live side by side in the markup and the section attribute
   decides which is on screen. !important for the same reason the language
   rules carry it: whether a price belongs to the billing period being shown is
   not something a component rule gets a say in. */
.price .when-month,
.price .when-year,
.second .when-month,
.second .when-year { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-2); }
.second .when-month,
.second .when-year { display: inline; }
[data-billing="monthly"] .when-year { display: none !important; }
[data-billing="yearly"] .when-month { display: none !important; }