/* ==========================================================================
   MARKETING SITE -- docs/design/04-WEBSITES_SPEC.md B, Phase F1.
   Artboards: docs/design/artboards/MadarHome.dc.html + MobileMadarHome.dc.html

   Scope: the public page at '/' and nothing else. The app shell (base.css
   6.2) is replaced entirely by this page via {% block shell %}, the same way
   the sign-in screen does it.

   CONSUMES TOKENS, DEFINES NONE. Zero new colours -- that was a constraint on
   this round and it held. Two things made it possible:
     * the artboards' dark announcement bar and footer are already the
       --sidebar family, which tokens.css defines as a dark surface in BOTH
       themes, which is exactly what a footer wants;
     * section alternation is --surface (white) against --bg (the page tint)
       rather than the artboards' one-off tinted green. Subtler in light,
       correct in dark, and it is the alternation every app screen uses.

   Namespace: every class here starts with m-dash. Buttons (.btn*), fields
   (.field, the input/select/textarea element selectors) and alerts come from
   base.css and are NOT restated -- a second definition of a button is a
   second button.

   No shadows (6.1). No physical left/right. No hex. Enforced, not promised:
   core/test_design_rules.py scans this file.
   ========================================================================== */


/* ==========================================================================
   PAGE AND SECTION SCAFFOLDING
   ========================================================================== */

.m-page {
  background: var(--surface);
  color: var(--ink);
}

.m-section {
  padding-block: var(--sp-64);
  padding-inline: var(--sp-32);
}

/* The alternating tinted band. --bg, not a bespoke tint. */
.m-section--tint { background: var(--bg); }

/* A dark band in both themes -- announcement bar, footer, featured plan.
   --sidebar is the token that already means "a dark surface regardless of
   theme", so this needs no new colour and cannot drift from the sidebar. */
.m-section--dark {
  background: var(--sidebar);
  color: var(--sidebar-text);
}

/* THE FOOTER NEEDS A LINE ABOVE IT, and only in dark mode is it obvious why.
   In light, the footer's --sidebar (#14261A) against the section above it is
   its own boundary. In DARK, --sidebar is #000000 and --bg is ALSO #000000 --
   so the footer and the tinted section above it paint the identical ground and
   the page appears to end with no footer at all. A --border rule, not a new
   colour, and on the footer specifically: the announcement bar is the first
   element on the page, where a top border draws nothing. */
footer.m-section--dark { border-block-start: 1px solid var(--border); }

.m-section--flush { padding-block-start: 0; }

.m-section__inner {
  max-inline-size: 1240px;
  margin-inline: auto;
}

.m-section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  text-align: center;
  padding-block-end: var(--sp-48);
}

.m-section__head--start {
  align-items: stretch;
  text-align: start;
  padding-block-end: var(--sp-26);
}

.m-eyebrow {
  color: var(--link);
  font-size: var(--fs-13);
  font-weight: 700;
}

.m-h1 {
  margin: 0;
  font-size: var(--fs-56);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -1.6px;
}

.m-h2 {
  margin: 0;
  font-size: var(--fs-38);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -1px;
}

.m-h3 {
  margin: 0;
  font-size: var(--fs-32);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.8px;
}

.m-lede {
  margin: 0;
  color: var(--muted-warm);
  font-size: var(--fs-17);
  max-inline-size: 620px;
  line-height: 1.75;
}

.m-section__head .m-lede { margin-inline: auto; }


/* ==========================================================================
   ANNOUNCEMENT BAR + NAV  (spec 1 and 2)
   ========================================================================== */

.m-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  min-block-size: 44px;
  padding: var(--sp-10) var(--sp-16);
  font-size: var(--fs-13);
  text-align: center;
}

/* inline-flex + the 44px floor, not a bare inline <a>. Measured at 22px tall
   before this: an inline link is exactly as tall as its line box, and a
   min-block-size on an inline element does nothing. The bar itself does not
   grow -- it was already 64px (44 + its own 20px of padding). */
.m-announce__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height);
  color: var(--on-dark);
  font-weight: 700;
  text-decoration: none;
}
.m-announce__link:hover { text-decoration: underline; }

.m-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--surface);
  border-block-end: 1px solid var(--border);
}

.m-nav__inner {
  max-inline-size: 1240px;
  margin-inline: auto;
  min-block-size: 72px;
  padding-inline: var(--sp-32);
  display: flex;
  align-items: center;
  gap: var(--sp-26);
}

/* The wordmark on a LIGHT ground. base.css's .wordmark is tuned for the
   sidebar -- .wordmark__name is --on-primary, which is near-white in light
   mode and therefore invisible here. Its own component rather than an
   override, so neither can silently break the other. */
.m-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  /* The glyph is 34px and the link was 34px with it -- under the 44px floor,
     in the nav AND the footer. The link grows, the glyph does not. */
  min-block-size: var(--control-height);
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.m-wordmark__glyph {
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-14);
}

.m-wordmark__name {
  font-size: var(--fs-20);
  font-weight: 700;
  color: var(--ink);
}

/* The footer's wordmark: inverted glyph on the dark band. */
.m-wordmark--on-dark .m-wordmark__glyph {
  background: var(--primary-soft);
  /* --brand-ink, following base.css's .wordmark__glyph -- this comment
     already said "the marketing footer's mark and the app sidebar's mark
     are the same square", and one square with two inks is the thing that
     sentence exists to prevent. See the token's note in tokens.css for
     why it is no longer --link. */
  color: var(--brand-ink);
  inline-size: 32px;
  block-size: 32px;
}
.m-wordmark--on-dark .m-wordmark__name { color: var(--on-dark); }

.m-nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-26);
}

.m-nav__link {
  color: var(--muted-2);
  text-decoration: none;
  font-size: var(--fs-14);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height);
}
.m-nav__link:hover { color: var(--ink); }

.m-nav__link--active {
  color: var(--ink);
  font-weight: 600;
}

.m-nav__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-14);
}

.m-nav__signin {
  color: var(--link);
  text-decoration: none;
  font-size: var(--fs-14);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height);
  padding-inline: var(--sp-4);
}
.m-nav__signin:hover { color: var(--link-hover); }

/* The mobile disclosure. Hidden above 1024px; the anchor row is hidden
   below it. One Alpine boolean, no drawer, no scrim -- this is a one-page
   site and every link in it is an in-page anchor. */
.m-nav__toggle {
  display: none;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted-2);
  cursor: pointer;
}

.m-nav__panel {
  display: none;
  flex-direction: column;
  border-block-start: 1px solid var(--border);
  padding: var(--sp-8) var(--sp-16) var(--sp-16);
  background: var(--surface);
}

.m-nav__panel-link {
  display: flex;
  align-items: center;
  min-block-size: var(--control-height);
  color: var(--muted-2);
  text-decoration: none;
  font-size: var(--fs-15);
  border-block-end: 1px solid var(--line);
}
.m-nav__panel-link:hover { color: var(--ink); }
/* No rule under the last item -- it would underline nothing. */
.m-nav__panel-link:last-child { border-block-end: none; }


/* ==========================================================================
   HERO  (spec 3)
   ========================================================================== */

.m-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-48);
  align-items: center;
}

.m-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--sp-22);
}

.m-badge {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-14);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--link);
  font-size: var(--fs-13);
  font-weight: 600;
}

/* --link, not a status dot: --link on --primary-soft is already a measured
   pair (docs/design/contrast_check.py) and clears the 4.5 text threshold,
   which no green dot token does on this ground. */
.m-badge__dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-pill);
  background: var(--link);
  flex-shrink: 0;
}

.m-hero__lede {
  margin: 0;
  color: var(--muted-warm);
  font-size: var(--fs-17);
  max-inline-size: 520px;
  line-height: 1.75;
}

.m-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

.m-assurances {
  display: flex;
  align-items: center;
  gap: var(--sp-22);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--fs-13);
}

.m-assurance {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
}

.m-assurance .icon { color: var(--link); flex-shrink: 0; }


/* ---- the product shot: our own calendar, drawn in tokens ---------------- */

.m-shot {
  border-radius: var(--radius-xl);
  background: var(--primary-soft);
  padding: var(--sp-26);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.m-shot__window {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.m-shot__chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-14);
  border-block-end: 1px solid var(--line);
}

.m-shot__dot {
  inline-size: 9px;
  block-size: 9px;
  border-radius: var(--radius-pill);
  background: var(--border);
}

.m-shot__chrome-label {
  margin-inline-start: auto;
  color: var(--muted);
  font-size: var(--fs-12);
}

.m-shot__body {
  padding: var(--sp-14);
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

/* Lanes are flex, not a grid with explicit column spans: a flex ratio needs
   no per-cell placement class and survives a 375px viewport by shrinking,
   which an explicit grid-column span does not. */
.m-shot__lane {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.m-shot__lane--head {
  color: var(--muted);
  font-size: var(--fs-11);
}

.m-shot__unit {
  inline-size: 84px;
  flex-shrink: 0;
  font-size: var(--fs-12);
  font-weight: 600;
}

.m-shot__daynum {
  flex: 1;
  text-align: center;
}
.m-shot__daynum--today {
  color: var(--link);
  font-weight: 700;
}

.m-shot__gap { flex: 1; }
.m-shot__gap--2 { flex: 2; }

.m-shot__block {
  flex: 1;
  min-inline-size: 0;
  block-size: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding-inline: var(--sp-8);
  font-size: var(--fs-11);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-shot__block--2 { flex: 2; }
.m-shot__block--3 { flex: 3; }

.m-shot__block--confirmed {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  color: var(--success-text);
}
.m-shot__block--hold {
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  color: var(--info-text);
}
.m-shot__block--pending {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

.m-shot__kpis {
  display: flex;
  gap: var(--sp-12);
}

.m-shot__kpi {
  flex: 1;
  min-inline-size: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-14);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.m-shot__kpi--warn { border-color: var(--warning-border); }

.m-shot__kpi-label {
  color: var(--muted);
  font-size: var(--fs-12);
}

.m-shot__kpi-value {
  font-size: var(--fs-20);
  font-weight: 700;
}
.m-shot__kpi-value--warn { color: var(--warning-text); }


/* ==========================================================================
   PROBLEM  (spec 4)
   ========================================================================== */

.m-problem {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-48);
  align-items: start;
}

.m-problem__intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.m-problem__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-14);
}


/* ==========================================================================
   CARD -- shared by problem, features and the FAQ column
   ========================================================================== */

.m-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-18);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.m-card--roomy { padding: var(--sp-26); gap: var(--sp-12); }

/* «قريبًا» -- a card whose feature is NOT BUILT YET.
   --neutral-bg/--neutral-text, the pair this product already uses for "no
   state / not active"; both are in the measured contrast map. Deliberately
   quiet: the badge is an honesty marker, not a promotion, and a loud one
   would read as advertising the thing it is disclaiming. */
.m-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.m-card__soon {
  padding: var(--sp-2) var(--sp-10);
  border-radius: var(--radius-pill);
  background: var(--neutral-bg);
  color: var(--neutral-text);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
}

.m-card__num {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
}

.m-card__title {
  font-size: var(--fs-15);
  font-weight: 600;
  line-height: 1.5;
}

.m-card--roomy .m-card__title { font-size: var(--fs-17); font-weight: 700; }

.m-card__body {
  color: var(--muted-warm);
  font-size: var(--fs-14);
  line-height: 1.75;
}

.m-icon-tile {
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-soft);
  color: var(--link);
  flex-shrink: 0;
}
.m-icon-tile--warm { background: var(--tag-bg); color: var(--tag-text); }
.m-icon-tile--info { background: var(--info-bg); color: var(--info-text); }


/* ==========================================================================
   HOW IT WORKS  (spec 5)
   ========================================================================== */

.m-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-20);
}

.m-step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.m-step__head {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.m-step__mark {
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-13);
}

.m-step__rule {
  flex: 1;
  block-size: 1px;
  background: var(--border);
}

.m-step__title { font-weight: 700; font-size: var(--fs-15); }

.m-step__body {
  color: var(--muted-warm);
  font-size: var(--fs-14);
  line-height: 1.75;
}


/* ==========================================================================
   FEATURES  (spec 6)
   ========================================================================== */

.m-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-16);
}


/* ==========================================================================
   PRICING  (spec 7) -- BUILT AND DELIBERATELY NOT RENDERED.

   The partial exists and is styled; home.html does not include it. It
   unhides when real prices exist -- the figures in the artboards are
   placeholders (docs/design/05-OPEN_DECISIONS.md 3). These rules are kept
   live because the dead-class test scans the partial whether or not any page
   renders it, and because deleting them would mean rewriting them blind.
   ========================================================================== */

.m-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-18);
  max-inline-size: 900px;
  margin-inline: auto;
}

.m-plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-26);
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.m-plan--featured {
  background: var(--sidebar);
  border-color: var(--sidebar-line);
  color: var(--sidebar-text);
}

.m-plan__name { font-size: var(--fs-17); font-weight: 700; }
.m-plan--featured .m-plan__name { color: var(--on-dark); }

.m-plan__head {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.m-plan__badge {
  padding: var(--sp-2) var(--sp-10);
  border-radius: var(--radius-pill);
  background: var(--sidebar-active);
  color: var(--sidebar-text);
  font-size: var(--fs-12);
  font-weight: 600;
}

.m-plan__price {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-8);
}

.m-plan__amount {
  font-size: var(--fs-38);
  font-weight: 700;
  line-height: 1;
}
.m-plan--featured .m-plan__amount { color: var(--on-dark); }

.m-plan__unit {
  color: var(--muted);
  padding-block-end: var(--sp-6);
}
.m-plan--featured .m-plan__unit { color: var(--sidebar-text); }

.m-plan__summary { color: var(--muted-warm); font-size: var(--fs-14); }
.m-plan--featured .m-plan__summary { color: var(--sidebar-text); }

.m-plan__rule { block-size: 1px; background: var(--line); }
.m-plan--featured .m-plan__rule { background: var(--sidebar-line); }

.m-plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.m-plan__feature {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  color: var(--muted-warm);
  font-size: var(--fs-14);
}
.m-plan__feature .icon { color: var(--link); flex-shrink: 0; }
.m-plan--featured .m-plan__feature { color: var(--sidebar-text); }
.m-plan--featured .m-plan__feature .icon { color: var(--focus-on-dark); }

.m-plan__cta { margin-block-start: auto; }


/* ==========================================================================
   FAQ  (spec 8) -- native details/summary, so it opens with no JavaScript
   ========================================================================== */

.m-faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.m-faq__item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.m-faq__q {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  min-block-size: var(--control-height);
  padding: var(--sp-14) var(--sp-18);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.m-faq__q::-webkit-details-marker { display: none; }

.m-faq__marker {
  margin-inline-start: auto;
  display: inline-flex;
  color: var(--chevron);
  flex-shrink: 0;
}

/* The open state turns the marker over. This is the whole reason the FAQ uses
   `chevron-down` rather than `chevron`: a marker that points along the inline
   axis says "go somewhere", and one that points down and then up says "this
   opens and closes". One glyph rotated, never two glyphs that can disagree. */
.m-faq__item[open] .m-faq__marker { transform: rotate(180deg); }

.m-faq__a {
  padding: 0 var(--sp-18) var(--sp-16);
  color: var(--muted-warm);
  font-size: var(--fs-14);
  line-height: 1.75;
}


/* ==========================================================================
   CONTACT  (spec 9) -- the lead form. THE section that must actually work.
   ========================================================================== */

.m-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-48);
  align-items: start;
}

.m-contact__copy {
  background: var(--primary-soft);
  border-radius: var(--radius-xl);
  padding: var(--sp-32);
  display: flex;
  flex-direction: column;
  gap: var(--sp-18);
}

.m-contact__title { color: var(--ink); }

/* --ink, not --link. --link is the colour this product uses to mean "this is
   clickable", and this is a paragraph. The pairing is measured either way
   (--ink gained --primary-soft as a ground in docs/design/contrast_check.py
   this round), so the change is about meaning, not contrast -- on the one card
   whose whole job is to be trusted, four lines of prose painted link-green is
   four invitations to click nothing. The check icons below stay --link: they
   are the card's accent, and nobody tries to click an icon in a list. */
.m-contact__body {
  margin: 0;
  color: var(--ink);
  line-height: 1.75;
}

.m-contact__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

.m-contact__point {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-10);
  color: var(--ink);
  font-size: var(--fs-14);
  line-height: 1.75;
}
.m-contact__point .icon { color: var(--link); flex-shrink: 0; margin-block-start: var(--sp-4); }

.m-contact__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-26);
}

.m-contact__panel-title {
  font-size: var(--fs-20);
  font-weight: 700;
  display: block;
  margin-block-end: var(--sp-6);
}

.m-contact__panel-note {
  margin: 0 0 var(--sp-18);
  color: var(--muted-warm);
  font-size: var(--fs-13);
  line-height: 1.75;
}

.m-form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-14);
}

.m-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-10);
}

.m-form__actions .btn { inline-size: 100%; }

.m-form__note {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-12);
  line-height: 1.75;
}

/* The honeypot. Not display:none -- some bots skip hidden inputs, and this
   one is meant to be filled. Parked out of the flow instead, aria-hidden and
   untabbable on the markup side so no human and no screen reader meets it. */
.m-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.m-success {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  align-items: flex-start;
}

.m-success__mark {
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  color: var(--success-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-success__title { font-size: var(--fs-20); font-weight: 700; }

.m-success__body {
  margin: 0;
  color: var(--muted-warm);
  font-size: var(--fs-14);
  line-height: 1.75;
}


/* ==========================================================================
   FOOTER  (spec 10)
   ========================================================================== */

.m-footer__inner {
  max-inline-size: 1240px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-26);
  flex-wrap: wrap;
}

.m-footer__links {
  display: flex;
  align-items: center;
  gap: var(--sp-22);
  font-size: var(--fs-14);
}

.m-footer__link {
  color: var(--sidebar-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height);
}
.m-footer__link:hover { color: var(--on-dark); }

.m-footer__meta {
  margin-inline-start: auto;
  font-size: var(--fs-13);
  color: var(--sidebar-text);
}


/* ==========================================================================
   RESPONSIVE -- 1024px, then 640px (6.1's breakpoints, not new ones)
   ========================================================================== */

@media (max-width: 1023px) {
  .m-section {
    padding-block: var(--sp-32);
    padding-inline: var(--sp-16);
  }

  .m-nav__inner { padding-inline: var(--sp-16); gap: var(--sp-10); }
  .m-nav__links { display: none; }
  .m-nav__toggle { display: flex; }
  .m-nav__panel[data-open="true"] { display: flex; }

  /* «لدي حساب» moves into the panel, which already carries it. Left in the
     bar it put four things -- wordmark, sign-in, CTA, toggle -- into 375px,
     and it was the same link twice on one screen. The CTA stays in the bar:
     it is the page's whole purpose and must not be behind a tap. */
  .m-nav__signin { display: none; }

  .m-h1 { font-size: var(--fs-32); letter-spacing: -1px; }
  .m-h2 { font-size: var(--fs-24); letter-spacing: -0.6px; }
  .m-h3 { font-size: var(--fs-24); letter-spacing: -0.6px; }
  .m-lede, .m-hero__lede { font-size: var(--fs-15); }

  .m-hero,
  .m-problem,
  .m-contact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-26);
  }

  .m-section__head { padding-block-end: var(--sp-26); }

  .m-steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  /* Stacked, the connecting rule points at nothing. */
  .m-step__rule { display: none; }

  .m-features,
  .m-pricing,
  .m-problem__cards { grid-template-columns: minmax(0, 1fr); }

  .m-contact__copy { padding: var(--sp-22); }

  .m-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-12); }
  .m-footer__meta { margin-inline-start: 0; }
  .m-footer__links { flex-wrap: wrap; gap: var(--sp-16); }
}

@media (max-width: 640px) {
  .m-actions { flex-direction: column; align-items: stretch; }
  .m-actions .btn { inline-size: 100%; }

  .m-assurances { flex-direction: column; align-items: flex-start; gap: var(--sp-8); }

  .m-shot { padding: var(--sp-14); }
  .m-shot__unit { inline-size: 64px; }
  .m-shot__kpis { gap: var(--sp-10); }

  .m-form__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}