/* Feature pages on marhela.com (SEO, 2026-09-22): one page per job an office searches for.
   Source of truth: docs/designs/feature-pages/feature.css. Built from the landing page's own
   vocabulary — container, section-heading, buttons, FAQ — so a visitor who arrives from Google
   lands somewhere that is plainly the same product. */
.fp { background: var(--ax-bg); color: var(--ax-ink); }
.fp-hero { padding: 150px 0 72px; background: #f9faf8; }
[data-theme="dark"] .fp-hero { background: #0a1224; }
.fp-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.fp-crumbs { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; font-size: 14px; font-weight: 700; }
.fp-crumbs a { color: var(--ax-gold-ink); }
.fp-hero h1 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; line-height: 1.25; color: var(--ax-ink); }
.fp-hero h1 em { font-style: normal; color: #537e9a; }
[data-theme="dark"] .fp-hero h1 em { color: #93b7de; }
.fp-lead { margin-top: 18px; max-width: 46ch; font-size: 18px; line-height: 1.9; font-weight: 500; }
.fp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fp-panel { border-radius: 28px; background: #0c1e40; padding: 26px; box-shadow: var(--ax-shadow); }
[data-theme="dark"] .fp-panel { background: #060d1c; box-shadow: inset 0 0 0 1px var(--ax-line); }
.fp-panel [data-scene] { max-width: 460px; margin-inline: auto; }
.fp-section { padding: 84px 0; }
.fp-section.alt { background: var(--ax-surface-2); }
.fp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.fp-row.flip > div:first-child { order: 2; }
.fp-row h2 { font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; line-height: 1.35; }
.fp-row p { margin-top: 14px; font-size: 17px; line-height: 1.9; font-weight: 500; max-width: 46ch; }
.fp-list { display: grid; gap: 10px; margin-top: 20px; }
.fp-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 700; line-height: 1.7; }
.fp-list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 7px; background: var(--ax-ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8a4c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / 13px no-repeat; }
.fp-shot { border-radius: 24px; background: #0c1e40; padding: 22px; }
[data-theme="dark"] .fp-shot { background: #060d1c; box-shadow: inset 0 0 0 1px var(--ax-line); }
.fp-shot [data-scene] { max-width: 440px; margin-inline: auto; }
.fp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.fp-card { padding: 24px; border-radius: 22px; background: var(--ax-surface); box-shadow: var(--ax-shadow); }
.fp-card b { display: block; font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.fp-card p { font-size: 15px; line-height: 1.8; font-weight: 500; }
.fp-faq { display: grid; gap: 12px; margin-top: 36px; max-width: 820px; }
.fp-q { padding: 20px 24px; border-radius: 18px; background: var(--ax-surface); box-shadow: var(--ax-shadow); }
.fp-q b { display: block; font-size: 18px; font-weight: 800; }
.fp-q p { margin-top: 8px; font-size: 16px; line-height: 1.85; font-weight: 500; }
.fp-cta { margin: 0 auto; padding: 40px 36px; border-radius: 28px; background: var(--ax-navy); color: var(--ax-on-navy); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.fp-cta b { font-size: 24px; font-weight: 800; }
.fp-cta p { margin-top: 6px; font-size: 16px; font-weight: 500; }
.fp-cta a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 12px; background: var(--ax-on-navy); color: var(--ax-navy); font-weight: 800; }
@media (max-width: 900px) {
  .fp-hero { padding: 120px 0 48px; }
  .fp-hero-inner, .fp-row { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fp-row.flip > div:first-child { order: 0; }
  .fp-cards { grid-template-columns: minmax(0, 1fr); }
  .fp-section { padding: 56px 0; }
}
[hidden] { display: none !important; }
.fv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px; font-size: 14px; font-weight: 800; }
.fv-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--ax-line); font-size: 13px; }
.fv-row small { display: block; font-size: 11.5px; font-weight: 600; }
.fv-day { font-weight: 800; min-width: 62px; }
.fv-worker b { font-weight: 800; font-size: 13.5px; }
.fv-note { padding: 12px 14px 14px; font-size: 12.5px; font-weight: 700; }

/* Press feedback on the one CTA that is not a .marhela-button (emil-design-eng): a control that
   cannot be felt reads as inert. 160ms, transform only, and nothing to move under reduced motion. */
.fp-cta a { transition: transform 160ms cubic-bezier(.22, 1, .36, 1); }
.fp-cta a:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .fp-cta a { transition: none; } .fp-cta a:active { transform: none; } }

/* The answer paragraph: the first thing a visitor — or an AI answer quoting the page — reads.
   One idea, no card, no icon; it has to look like the page talking, not like a callout. */
.fp-answer { max-width: 64ch; margin: 0 auto 34px; font-size: 17.5px; line-height: 2; font-weight: 500; text-align: center; }
@media (max-width: 900px) { .fp-answer { text-align: start; font-size: 16.5px; margin-bottom: 26px; } }

/* The نقل الخدمات ladder: one row per stage, the waiting one carrying its own deadline. */
.ft-step { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--ax-line); font-size: 13px; }
.ft-step:first-of-type { border-top: 0; }
.ft-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ax-navy); box-shadow: 0 0 0 4px var(--ax-surface-2); }
.ft-step:nth-of-type(3) .ft-dot { background: var(--ax-gold); }
.ft-name b { display: block; font-size: 13.5px; font-weight: 800; }
.ft-name small { display: block; font-size: 11.5px; font-weight: 600; }


/* Reserve the scene's box before the scene exists.

   The scenes are built in JavaScript and injected on load, so until then each host is 0px tall and
   everything under it jumps when it fills: measured CLS 0.23-0.29 on these pages (threshold 0.10),
   in 2 of 8 throttled loads. The home page never had the problem because its stage slots sit in a
   fixed grid area. These numbers are measured per scene at 1440 and at 390 — a min, so a scene that
   grows is still free to. */
@media (min-width: 901px) {
  .fp [data-scene="contracts"] { min-height: 312px; }
  .fp [data-scene="visits"] { min-height: 338px; }
  .fp [data-scene="housing"] { min-height: 311px; }
  .fp [data-scene="desk"] { min-height: 402px; }
  .fp [data-scene="assistant"] { min-height: 513px; }
  .fp [data-scene="tplcustom"] { min-height: 374px; }
  .fp [data-scene="alerts"] { min-height: 240px; }
  .fp [data-scene="expiry"] { min-height: 219px; }
  .fp [data-scene="transfer"] { min-height: 345px; }
  .fp [data-scene="template"] { min-height: 275px; }
  .fp [data-scene="emailapprove"] { min-height: 277px; }
  .fp [data-scene="docs"] { min-height: 271px; }
  .fp [data-scene="ladder"] { min-height: 249px; }
  .fp [data-scene="emaildetect"] { min-height: 250px; }
  .fp [data-scene="cv"] { min-height: 276px; }
}
@media (max-width: 900px) {
  .fp [data-scene="contracts"] { min-height: 323px; }
  .fp [data-scene="visits"] { min-height: 377px; }
  .fp [data-scene="housing"] { min-height: 311px; }
  .fp [data-scene="desk"] { min-height: 413px; }
  .fp [data-scene="assistant"] { min-height: 535px; }
  .fp [data-scene="tplcustom"] { min-height: 426px; }
  .fp [data-scene="alerts"] { min-height: 240px; }
  .fp [data-scene="expiry"] { min-height: 270px; }
  .fp [data-scene="transfer"] { min-height: 364px; }
  .fp [data-scene="template"] { min-height: 297px; }
  .fp [data-scene="emailapprove"] { min-height: 288px; }
  .fp [data-scene="docs"] { min-height: 400px; }
  .fp [data-scene="ladder"] { min-height: 249px; }
  .fp [data-scene="emaildetect"] { min-height: 250px; }
  .fp [data-scene="cv"] { min-height: 276px; }
}