/* marhela.com landing page (owner's design, 2026-09-14).
   Ported from the design export by hand: same class names and rules, re-set in Cairo, re-toned
   from the export's slate and jade to the navy brand (#0c1e40), with hover motion gated to real
   pointers and ambient motion switched off for reduced-motion readers.
   Everything is scoped under .mh so the shared _base.html styles stay untouched elsewhere. */

/* The base template's strip and footer belong to the app pages, not this one. */
.topstrip, body > .foot { display: none !important; }
body { background: #fff; overflow-x: hidden; }

/* Preflight at zero specificity, so every design rule below wins over it. */
:where(.mh), :where(.mh) *, :where(.mh) ::before, :where(.mh) ::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; }
:where(.mh) { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.5; color: #0c1e40;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
:where(.mh) h1, :where(.mh) h2, :where(.mh) h3 { font-size: inherit; font-weight: inherit; }
:where(.mh) a { color: inherit; text-decoration: inherit; -webkit-tap-highlight-color: transparent; }
:where(.mh) b, :where(.mh) strong { font-weight: 700; }
:where(.mh) small { font-size: 80%; }
:where(.mh) ol, :where(.mh) ul { list-style: none; }
:where(.mh) img, :where(.mh) svg { display: block; vertical-align: middle; }
:where(.mh) img { max-width: 100%; height: auto; }
:where(.mh) button { font: inherit; color: inherit; background-color: transparent; border-radius: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.mh) label { display: block; margin: 0; font-weight: inherit; font-size: inherit; }
:where(.mh) em, :where(.mh) i { font-style: normal; }
:where(.mh) bdi { direction: ltr; unicode-bidi: isolate; }
.mh ::selection { background: #dfb26c; color: #0c1e40; }
html { scroll-behavior: smooth; }
.lucide { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes nav-drop { from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: translateY(0); } }
@keyframes grid-drift { from { background-position: 0 0, 0 0; }
  to { background-position: 46px 46px, 46px 46px; } }
@keyframes glow-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(22px, -16px, 0) scale(1.06); } }
@keyframes glow-drift-alt { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-18px, 18px, 0) scale(.94); } }
@keyframes product-drift { 0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg); }
  50% { transform: translate3d(0, -9px, 0) rotateX(.35deg); } }
@keyframes orbit-spin { from { transform: rotate(0deg); }
  to { transform: rotate(360deg); } }
@keyframes signal-pulse { 0%, 100% { opacity: .45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); } }
@keyframes shimmer-in { from { transform: translateX(-130%); }
  to { transform: translateX(130%); } }
@keyframes screenshot-enter { from { opacity: 0; transform: scale(1.025); filter: blur(3px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes step-pop { 0% { transform: scale(.86) rotate(-6deg); }
  65% { transform: scale(1.08) rotate(2deg); }
  100% { transform: scale(1) rotate(0); } }
@keyframes bar-rise { from { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
  to { opacity: 1; transform: scaleY(1); transform-origin: bottom; } }
@keyframes product-drift-sharp { 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); } }
.container-marhela { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.noise::after { content: ''; pointer-events: none; position: fixed; z-index: 60; inset: 0; opacity: .018; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.js .reveal-delay-1 { transition-delay: .1s; }
.js .reveal-delay-2 { transition-delay: .2s; }
.js .reveal-delay-3 { transition-delay: .3s; }
.top-nav { position: absolute; z-index: 30; inset: 0 0 auto; color: #40566b; }
.nav-inner { display: flex; height: 82px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(139,157,171,.28); }
.desktop-nav { display: flex; gap: 36px; margin-right: 70px; }
.desktop-nav a, .login-link { color: #526a7d; font-size: 13px; text-decoration: none; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .desktop-nav a:hover, .login-link:hover { color: #0c1e40; } }
.nav-actions { display: flex; align-items: center; gap: 19px; }
.login-link { padding: 8px 3px; border: 0; background: transparent; cursor: pointer; font-weight: 600; }
.marhela-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 0 21px; border: 1px solid transparent; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { .marhela-button:hover { transform: translateY(-2px); } }
.marhela-button:active { transform: translateY(0); }
.marhela-button:focus-visible, .mobile-menu:focus-visible, .faq-item button:focus-visible { outline: 2px solid #dfb26c; outline-offset: 3px; }
.button-primary { background: #0c1e40; color: #fbfaf6; box-shadow: 0 10px 22px rgba(30,53,75,.14); }
@media (hover: hover) and (pointer: fine) { .button-primary:hover { background: #16305c; box-shadow: 0 12px 27px rgba(30,53,75,.19); } }
.button-secondary { border-color: #b8cad5; background: rgba(255,255,255,.4); color: #294e6a; }
@media (hover: hover) and (pointer: fine) { .button-secondary:hover { border-color: #537c99; background: #fff; } }
.nav-cta { min-height: 40px; padding-inline: 17px; border-radius: 9px; font-size: 13px; }
.mobile-menu { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid #b8cad5; border-radius: 11px; background: transparent; color: #294e6a; cursor: pointer; }
.mobile-panel { display: none; }
.hero { position: relative; overflow: hidden; background: #f9faf8; padding-top: 150px; }
.hero-inner { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; padding-bottom: 100px; }
.hero-grid-lines, .showcase-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(59,91,116,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(59,91,116,.055) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.hero-glow { position: absolute; border-radius: 999px; filter: blur(2px); pointer-events: none; }
.hero-glow-one { top: 240px; left: -170px; width: 480px; height: 480px; background: rgba(219,231,237,.53); }
.hero-glow-two { top: 75px; right: -100px; width: 310px; height: 310px; background: rgba(241,225,195,.33); }
.hero-copy { position: relative; z-index: 1; text-align: right; }
.hero h1 { max-width: 620px; margin: 0; color: #0c1e40; font-size: clamp(44px, 5.5vw, 76px); font-weight: 700; letter-spacing: 0; line-height: 1.18; }
.hero h1 em { position: relative; color: #537e9a; font-style: normal; }
.hero h1 em::after { position: absolute; right: 3px; bottom: -4px; width: 78%; height: 3px; border-radius: 4px; background: #dfb26c; content: ''; opacity: .75; }
.hero h1 strong { color: #0c1e40; font-weight: 700; }
.hero-copy > p { max-width: 490px; margin: 25px 0 0; color: #607689; font-size: 16px; line-height: 2; }
.hero-actions { display: flex; align-items: center; justify-content: flex-start; gap: 15px; margin-top: 31px; }
.hero-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 10px; color: #496b82; font-size: 14px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
@media (hover: hover) and (pointer: fine) { .hero-actions a:hover { color: #bd8139; } }
.hero-product { position: relative; z-index: 1; padding-top: 17px; }
.hero-bottom { position: relative; border-top: 1px solid #d6e0e5; background: #f0f1f4; color: #7c919f; font-size: 11px; }
.hero-bottom > div { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 20px; }
.hero-bottom > div > div { display: flex; gap: 38px; }
.preview-wrap { position: relative; padding-bottom: 45px; }
.product-window { position: relative; overflow: hidden; border: 1px solid #bacdd8; border-radius: 17px; background: #fbfcfb; box-shadow: 0 30px 80px rgba(42,72,95,.16), 0 4px 12px rgba(42,72,95,.08); }
.window-bar { display: flex; height: 41px; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #d9e3e7; background: #fff; }
.window-title { display: flex; align-items: center; gap: 7px; color: #6f8492; font-size: 10px; }
.window-dot { width: 7px; height: 7px; border-radius: 50%; background: #dfb26c; }
.window-controls { display: flex; gap: 5px; direction: ltr; }
.window-controls i { width: 7px; height: 7px; border-radius: 50%; background: #d4e0e4; }
.request-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid #edeef1; }
.avatar-green { background: #dce9e5; color: #4b7d7e; }
.avatar-amber { background: #f1dfc6; color: #aa7436; }
.avatar-blue { background: #dce8ed; color: #527589; }
.preview-orbit { position: absolute; border: 1px solid rgba(94,140,168,.25); border-radius: 50%; pointer-events: none; }
.orbit-one { top: -80px; right: -130px; width: 270px; height: 270px; }
.orbit-two { bottom: 28px; left: -140px; width: 230px; height: 230px; }
.preview-tabs { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.preview-tabs button { padding: 7px 12px; border: 0; border-radius: 99px; background: #e5edf0; color: #5d7888; cursor: pointer; font-size: 10px; transition: background .2s ease, color .2s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine) { .preview-tabs button:hover { transform: translateY(-1px); } }
.preview-tabs button.selected { background: #2f5875; color: #fff; }
.preview-description { min-height: 24px; margin: 11px auto 0; color: #6e8591; font-size: 12px; line-height: 1.8; text-align: center; }
.stats-band { background: #0c1e40; color: #f6f7f3; }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); padding: 40px 0; }
.stat { padding: 2px 28px; border-left: 1px solid rgba(196,218,228,.26); }
.stat:last-child { border-left: 0; }
.stat strong { display: block; color: #e5bd7b; font-family: inherit; font-size: 43px; letter-spacing: 0; }
.stat span { display: block; margin-top: 4px; color: #c5d4da; font-size: 13px; }
.section-kicker { display: block; margin-bottom: 15px; color: #b67e3e; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.section-heading h2, .showcase-copy h2, .workflow-head h2, .faq-intro h2, .contact-content h2 { margin: 0; color: #0c1e40; font-size: clamp(36px, 4vw, 52px); font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.section-heading h2 span, .workflow-head h2 span, .faq-intro h2 span { color: #7893a2; }
.section-heading p, .showcase-copy > p, .workflow-head > p, .faq-intro > p { color: #6c8290; font-size: 15px; line-height: 2; }
.friction-section { padding: 125px 0 135px; background: #fcfcfa; }
.section-heading { max-width: 575px; }
.section-heading p { max-width: 470px; margin: 19px 0 0; }
.friction-cards { display: grid; grid-template-columns: 1.35fr .85fr .85fr; gap: 16px; margin-top: 60px; }
.friction-card { display: flex; min-height: 285px; flex-direction: column; justify-content: space-between; padding: 27px; border-radius: 16px; }
.card-wide { background: #edeff3; }
.card-amber { background: #f8efdf; }
.card-blue { background: #e8f0f3; }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.card-top small { color: #889ca6; font-family: inherit; font-size: 11px; }
.feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #dae8eb; color: #4c7b91; }
.card-amber .feature-icon { background: #efddbd; color: #ae7938; }
.card-blue .feature-icon { background: #d6e5eb; color: #557d8f; }
.friction-card h3 { margin: 0; color: #31556b; font-size: 21px; }
.friction-card p { max-width: 340px; margin: 10px 0 0; color: #69808b; font-size: 13px; line-height: 2; }
.card-amber h3 { color: #654d32; }
.card-amber p { color: #806e57; }
.card-blue h3 { color: #3e606d; }
.card-blue p { color: #607d86; }
.card-wide > b { display: flex; align-items: center; gap: 7px; color: #4d6185; font-size: 11px; }
.showcase-section { position: relative; overflow: hidden; padding: 125px 0 150px; background: #e9f1f4; }
.showcase-grid-lines { opacity: .6; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 84%, transparent); }
.showcase-inner { position: relative; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 72px; }
.showcase-copy { order: 2; }
.showcase-product { order: 1; }
.showcase-copy h2 { font-size: clamp(38px, 4vw, 53px); }
.showcase-copy > p { max-width: 420px; margin: 19px 0 0; }
.check-list { display: grid; gap: 12px; margin-top: 25px; color: #486f81; font-size: 13px; font-weight: 600; }
.check-list div { display: flex; align-items: center; gap: 10px; }
.check-list span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #d0e3e8; color: #4e8290; }
.showcase-cta { margin-top: 30px; }
.workflow-section { padding: 125px 0 135px; background: #fcfcfa; }
.workflow-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; }
.workflow-head > p { max-width: 310px; margin: 0 0 4px; }
.workflow-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 55px; margin-top: 65px; }
.workflow-step { position: relative; }
.workflow-step:not(:last-child)::after { position: absolute; top: 28px; left: -46px; width: 35px; border-top: 1px solid #c7d7dd; content: ''; }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-top > span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #e5e9f1; color: #4d7d91; }
.step-top small { color: #a2afb4; font-family: inherit; font-size: 11px; }
.workflow-step h3 { margin: 22px 0 0; color: #2f5268; font-size: 20px; }
.workflow-step p { max-width: 270px; margin: 9px 0 0; color: #708691; font-size: 13px; line-height: 2; }
.quote-section { padding: 115px 0; background: #0c1e40; color: #f6f7f3; }
.quote-grid { display: grid; grid-template-columns: 1fr .8fr; align-items: center; gap: 70px; }
.quote-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border-radius: 14px; background: #1b3160; color: #e5bd7b; }
.quote-main blockquote { max-width: 675px; margin: 0; color: #f3f5f1; font-size: clamp(31px, 4vw, 45px); font-weight: 500; letter-spacing: 0; line-height: 1.55; }
.quote-author { display: flex; align-items: center; gap: 11px; margin-top: 29px; }
.quote-author > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e5bd7b; color: #0c1e40; font-weight: 700; }
.quote-author b, .quote-author small { display: block; }
.quote-author b { font-size: 13px; }
.quote-author small { margin-top: 4px; color: #b9ccd4; font-size: 10px; }
.quote-aside { padding-right: 47px; border-right: 1px solid #33466b; }
.quote-aside p { margin: 0; color: #c6d6dc; font-size: 15px; line-height: 2.1; }
.quote-aside > div { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 31px; }
.quote-aside b, .quote-aside small { display: block; }
.quote-aside b { color: #e5bd7b; font-family: inherit; font-size: 24px; }
.quote-aside small { margin-top: 3px; color: #b9ccd4; font-size: 10px; }
.faq-section { padding: 125px 0 115px; background: #f9faf8; }
.faq-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.faq-intro > p { max-width: 300px; margin: 18px 0 0; }
.faq-intro > a { display: inline-flex; align-items: center; gap: 8px; margin-top: 19px; color: #315f78; font-size: 13px; font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .faq-intro > a:hover { color: #ba7e3b; } }
.faq-list { border-top: 1px solid #d6e0e3; }
.faq-item { border-bottom: 1px solid #d6e0e3; }
.faq-item button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; border: 0; background: none; color: #36586b; cursor: pointer; font-size: 15px; font-weight: 700; text-align: right; }
.faq-item button i { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid #c8d6db; border-radius: 50%; color: #698592; transition: background .25s ease, color .25s ease, transform .25s ease; }
.faq-item[data-open="true"] button i { background: #315d78; color: #fff; }
.faq-answer p { margin: 0; color: #718692; font-size: 13px; line-height: 2; }
.contact-section { padding-bottom: 125px; background: #f9faf8; }
.contact-card { position: relative; overflow: hidden; padding: 78px 25px; border-radius: 20px; background: #dcebef; text-align: center; }
.contact-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(48,92,116,.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(48,92,116,.09) 1px, transparent 1px); background-size: 35px 35px; mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
.contact-card::before, .contact-card::after { position: absolute; width: 180px; height: 180px; border: 1px solid rgba(82,129,151,.25); border-radius: 50%; content: ''; }
.contact-card::before { top: -80px; left: -50px; }
.contact-card::after { right: -50px; bottom: -100px; }
.contact-content { position: relative; }
.eyebrow-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: #c6e0e7; color: #4a7a8d; font-size: 11px; font-weight: 700; }
.contact-content h2 { margin-top: 17px; color: #0c1e40; font-size: clamp(38px, 4vw, 54px); }
.contact-content h2 span { color: #b77938; }
.contact-content p { max-width: 440px; margin: 17px auto 0; color: #5f7a88; font-size: 15px; line-height: 2; }
.contact-content .marhela-button { margin-top: 28px; }
.footer { padding: 37px 0; background: #0c1e40; color: #edeff3; }
.footer-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.footer p { max-width: 250px; margin: 14px 0 0; color: #b8cad2; font-size: 12px; line-height: 1.9; }
.footer-links { display: flex; flex-wrap: wrap; gap: 25px; }
.footer a, .footer small { color: #b8cad2; font-size: 12px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: #e5bd7b; } }
.footer small { color: #8ea6b1; font-size: 10px; }
@media (max-width: 900px) {
  .hero-inner, .showcase-inner { grid-template-columns: 1fr; gap: 58px; }
  .hero-copy { order: 1; }
  .hero-product, .showcase-product { order: 2; }
  .showcase-copy { order: 1; }
  .showcase-inner { gap: 45px; }
  .showcase-copy { max-width: 600px; }
  .quote-grid { gap: 45px; }
  .desktop-nav { gap: 20px; margin-right: 0; }
}
@media (max-width: 767px) {
  .container-marhela { width: min(100% - 32px, 620px); }
  .top-nav { position: absolute; }
  .nav-inner { height: 70px; }
  .desktop-nav, .nav-actions { display: none; }
  .mobile-menu { display: grid; }
  .mobile-panel { display: grid; gap: 3px; padding: 8px; border: 1px solid #cfdee2; border-radius: 14px; background: #fbfcfa; box-shadow: 0 14px 35px rgba(38,67,86,.13); }
  .mobile-panel button:not(.marhela-button) { padding: 12px 14px; border: 0; border-radius: 9px; background: transparent; color: #526e7e; cursor: pointer; font-size: 13px; text-align: right; }
  .mobile-panel button:not(.marhela-button):hover { background: #eef1f5; }
  .mobile-demo { width: 100%; margin-top: 3px; }
  .hero { padding-top: 116px; }
  .hero-inner { gap: 35px; padding-bottom: 58px; }
  .hero h1 { font-size: clamp(42px, 12vw, 58px); }
  .hero-copy > p { margin-top: 19px; font-size: 15px; line-height: 1.9; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 7px; margin-top: 25px; }
  .hero-actions .marhela-button { width: 100%; }
  .hero-actions a { justify-content: center; }
  .hero-bottom > div { min-height: 88px; flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
  .hero-bottom > div > div { gap: 16px; font-size: 10px; }
  .hero-product { padding-top: 0; }
  .product-window { border-radius: 13px; }
  .request-row { padding: 8px 0; }
  .preview-tabs { gap: 4px; margin-top: 19px; }
  .preview-tabs button { padding: 6px 8px; font-size: 9px; }
  .preview-description { font-size: 11px; }
  .stats-grid { grid-template-columns: 1fr; padding: 21px 0; }
  .stat { padding: 13px 0; border-left: 0; border-bottom: 1px solid rgba(196,218,228,.26); }
  .stat:last-child { border-bottom: 0; }
  .stat strong { font-size: 35px; }
  .stat span { font-size: 12px; }
  .friction-section, .showcase-section, .workflow-section, .faq-section { padding: 78px 0; }
  .friction-cards { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  .friction-card { min-height: 240px; padding: 22px; }
  .card-wide { min-height: 260px; }
  .section-heading h2, .showcase-copy h2, .workflow-head h2, .faq-intro h2 { font-size: 38px; }
  .showcase-inner { gap: 38px; }
  .showcase-cta { width: 100%; }
  .workflow-head { display: block; }
  .workflow-head > p { margin-top: 18px; }
  .workflow-steps { grid-template-columns: 1fr; gap: 35px; margin-top: 42px; }
  .workflow-step:not(:last-child)::after { top: auto; right: 28px; bottom: -26px; left: auto; width: 1px; height: 18px; border-top: 0; border-right: 1px solid #c7d7dd; }
  .workflow-step h3 { margin-top: 16px; }
  .quote-section { padding: 78px 0; }
  .quote-grid { grid-template-columns: 1fr; gap: 42px; }
  .quote-main blockquote { font-size: 32px; }
  .quote-aside { padding: 25px 0 0; border-top: 1px solid #33466b; border-right: 0; }
  .faq-grid { grid-template-columns: 1fr; gap: 42px; }
  .faq-intro > p { margin-top: 14px; }
  .faq-list { margin-top: 0; }
  .contact-section { padding-bottom: 78px; }
  .contact-card { padding: 58px 18px; }
  .contact-content h2 { font-size: 40px; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 26px; }
  .footer-links { gap: 18px; }
}
.top-nav { animation: nav-drop .7s cubic-bezier(.22, 1, .36, 1) both; }
.hero-grid-lines, .showcase-grid-lines { animation: grid-drift 24s linear infinite; }
.hero-glow-one { animation: glow-drift 10s ease-in-out infinite; }
.hero-glow-two { animation: glow-drift-alt 12s ease-in-out infinite; }
.hero-copy.visible h1 { animation: nav-drop .85s .16s cubic-bezier(.22, 1, .36, 1) both; }
.hero-copy.visible > p { animation: nav-drop .75s .28s cubic-bezier(.22, 1, .36, 1) both; }
.hero-copy.visible .hero-actions { animation: nav-drop .7s .4s cubic-bezier(.22, 1, .36, 1) both; }
.hero-product.visible .product-window { animation: product-drift 9s 1.05s ease-in-out infinite; }
.preview-tabs { flex-wrap: wrap; }
.hero-product.visible .window-bar, .showcase-product.visible .window-bar { position: relative; }
.hero-product.visible .window-bar::after, .showcase-product.visible .window-bar::after { position: absolute; top: 0; right: 0; width: 28%; height: 1px; background: linear-gradient(90deg, transparent, rgba(82,140,184,.5), transparent); content: ''; animation: shimmer-in 4.8s 1.4s ease-in-out infinite; }
.orbit-one { animation: orbit-spin 26s linear infinite; }
.orbit-two { animation: orbit-spin 20s linear reverse infinite; }
.friction-card, .workflow-step, .contact-card, .showcase-cta { transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
@media (hover: hover) and (pointer: fine) { .friction-card:hover { transform: translateY(-8px); box-shadow: 0 18px 38px rgba(55,102,143,.10); } }
@media (hover: hover) and (pointer: fine) { .workflow-step:hover { transform: translateY(-6px); } }
@media (hover: hover) and (pointer: fine) { .workflow-step:hover .step-top > span { animation: step-pop .55s cubic-bezier(.22, 1, .36, 1) both; } }
@media (hover: hover) and (pointer: fine) { .contact-card:hover { box-shadow: 0 22px 55px rgba(55,102,143,.12); } }
@media (hover: hover) and (pointer: fine) { .showcase-cta:hover { transform: translateY(-4px); } }
.marhela-button svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .marhela-button:hover svg { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}
.custom-window { border-color: #c4cbd7; background: #f0f1f4; }
.mockup-app { display: grid; min-height: 480px; grid-template-columns: 146px minmax(0, 1fr); background: #f1f2f5; color: #2c384c; font-family: inherit; }
.mockup-sidebar { grid-column: 1; grid-row: 1; padding: 18px 11px 12px; border-left: 1px solid #d9dee6; background: #fbfcfb; }
.mockup-brand { display: flex; align-items: center; gap: 8px; padding: 2px 5px 19px; color: #273b5e; font-size: 11px; font-weight: 700; }
.mockup-nav { display: grid; gap: 3px; }
.mockup-nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 7px; color: #828c9c; font-size: 9px; }
.mockup-nav-item > span { display: grid; width: 16px; height: 16px; place-items: center; color: #8b95a6; font-size: 14px; line-height: 1; }
.mockup-nav-item.active { background: #e7ecf4; color: #0c1e40; font-weight: 700; }
.mockup-nav-item.active > span { color: #0c1e40; }
.mockup-user { display: flex; align-items: center; gap: 7px; margin-top: 74px; padding: 12px 4px 0; border-top: 1px solid #e1e4e9; color: #677182; font-size: 8px; }
.mockup-user > span { width: 22px; height: 22px; border-radius: 50%; background: #e8d7b7; color: #976d35; font-size: 9px; }
.mockup-main { grid-column: 2; grid-row: 1; min-width: 0; padding: 19px 22px 16px; background: #f2f3f6; }
.mockup-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mockup-breadcrumb { display: block; margin-bottom: 3px; color: #919aa9; font-size: 8px; }
.mockup-heading h3 { margin: 0; color: #0c1e40; font-size: 19px; letter-spacing: 0; }
.mockup-heading-actions { display: flex; align-items: center; gap: 7px; }
.mockup-search { display: flex; align-items: center; gap: 4px; min-width: 108px; padding: 6px 8px; border: 1px solid #dce0e7; border-radius: 6px; background: #fff; color: #a2a8b2; font-size: 12px; }
.mockup-search > span { font-size: 7px; }
.mockup-heading-actions button, .panel-button { border: 0; border-radius: 6px; background: #0c1e40; color: #fff; cursor: pointer; font-size: 9px; }
.mockup-heading-actions button { padding: 8px 10px; }
.mockup-screen { min-height: 380px; padding-top: 17px; animation: screenshot-enter .55s cubic-bezier(.22,1,.36,1) both; }
.screen-kpis, .team-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.screen-kpis > div, .team-summary > div { min-width: 0; padding: 12px; border: 1px solid #e0e4ea; border-radius: 9px; background: #fff; }
.screen-kpis small, .team-summary small { display: block; color: #8c95a3; font-size: 8px; }
.screen-kpis strong, .team-summary strong { display: block; margin-top: 4px; color: #0c1e40; font-family: inherit; font-size: 23px; line-height: 1; }
.screen-kpis div:nth-child(2) strong { color: #c28b42; }
.screen-kpis div:nth-child(3) strong { color: #52798e; }
.screen-kpis span, .team-summary span { display: block; margin-top: 5px; color: #a0a6b1; font-size: 7px; }
.trend-up { color: #368b76 !important; }
.screen-columns, .journey-columns { display: grid; grid-template-columns: 1.05fr .95fr; gap: 10px; margin-top: 12px; }
.screen-panel { min-width: 0; padding: 12px; border: 1px solid #e0e4ea; border-radius: 9px; background: #fff; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #3e4b62; font-size: 9px; }
.panel-heading > span { color: #a0a6b0; font-size: 7px; }
.fake-chart { display: flex; height: 103px; align-items: flex-end; gap: 7%; margin-top: 19px; padding: 0 5%; border-bottom: 1px solid #e3e6ec; background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #edeff3 32px); }
.fake-chart i { display: block; width: 10%; border-radius: 4px 4px 0 0; background: #c5cfe0; animation: bar-rise .8s cubic-bezier(.22,1,.36,1) both; }
.fake-chart i:nth-child(1) { height: 34%; animation-delay: .05s; }
.fake-chart i:nth-child(2) { height: 56%; animation-delay: .1s; }
.fake-chart i:nth-child(3) { height: 42%; animation-delay: .15s; }
.fake-chart i:nth-child(4) { height: 82%; background: #0c1e40; animation-delay: .2s; }
.fake-chart i:nth-child(5) { height: 61%; animation-delay: .25s; }
.fake-chart i:nth-child(6) { height: 73%; animation-delay: .3s; }
.fake-chart i:nth-child(7) { height: 52%; animation-delay: .35s; }
.chart-legend { display: flex; gap: 13px; margin-top: 10px; color: #9098a6; font-size: 7px; }
.chart-legend span { display: flex; align-items: center; gap: 4px; }
.chart-legend i { width: 6px; height: 6px; border-radius: 50%; background: #0c1e40; }
.chart-legend span:last-child i { background: #d6dde9; }
.mock-request { display: grid; grid-template-columns: 23px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 9px 0; border-top: 1px solid #eef0f3; }
.mock-request:first-of-type { margin-top: 6px; }
.mock-avatar { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; font-size: 8px; font-weight: 700; }
.mock-request > div { min-width: 0; }
.mock-request b, .mock-request small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-request b { color: #475266; font-size: 8px; }
.mock-request small { margin-top: 2px; color: #a0a6b0; font-size: 7px; }
.request-chip { display: inline-flex; align-items: center; padding: 4px 6px; border-radius: 99px; font-size: 6px; white-space: nowrap; }
.chip-green { background: #e2f1ec; color: #37806e; }
.chip-amber { background: #f7ecd9; color: #aa773b; }
.chip-blue { background: #e4eef2; color: #557c8c; }
.screen-note { display: flex; align-items: center; gap: 5px; margin-top: 11px; color: #619184; font-size: 8px; }
.screen-note > span { color: #43a889; font-size: 10px; }
.screen-note small { margin-right: auto; color: #a5aab3; font-size: 7px; }
.journey-intro { display: flex; align-items: center; gap: 10px; }
.journey-intro .eyebrow-pill { padding: 5px 8px; font-size: 8px; }
.journey-intro b { color: #3d4a61; font-size: 11px; }
.journey-intro small { color: #9aa0ab; font-size: 7px; }
.journey-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 25px; }
.journey-step { position: relative; text-align: center; }
.journey-step:not(:last-child)::after { position: absolute; top: 11px; right: 62%; width: 76%; border-top: 1px solid #dce0e8; content: ''; }
.journey-step > span { position: relative; z-index: 1; display: grid; width: 22px; height: 22px; margin-inline: auto; place-items: center; border: 1px solid #d5dae3; border-radius: 50%; background: #f2f3f6; color: #9da4b0; font-size: 8px; }
.journey-step.complete > span, .journey-step.current > span { border-color: #0c1e40; background: #0c1e40; color: #fff; }
.journey-step.current > span { box-shadow: 0 0 0 4px rgba(12,30,64,.12); }
.journey-step b, .journey-step small { display: block; }
.journey-step b { margin-top: 7px; color: #677183; font-size: 7px; }
.journey-step small { margin-top: 3px; color: #a2a7b1; font-size: 6px; }
.journey-columns { grid-template-columns: repeat(2, 1fr); }
.next-action { margin: 18px 0 13px; color: #636d7f; font-size: 9px; line-height: 1.8; }
.panel-button { padding: 7px 9px; }
.document-row { display: flex; align-items: center; gap: 5px; margin-top: 11px; color: #6d7788; font-size: 8px; }
.document-row > span { color: #2c9a7d; }
.document-row b { margin-right: auto; color: #9da3ae; font-size: 7px; font-weight: 400; }
.document-row.pending > span, .document-row.pending b { color: #bd8844; }
.table-toolbar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.table-search, .filter-button { padding: 7px 9px; border: 1px solid #e0e4ea; border-radius: 6px; background: #fff; color: #a0a6b0; font-size: 8px; }
.table-search { flex: 1; }
.table-head, .table-row { display: grid; grid-template-columns: 1.4fr .8fr 1fr .7fr; align-items: center; gap: 8px; }
.table-head { padding: 8px; color: #a0a6b0; font-size: 7px; }
.table-row { padding: 8px; border-top: 1px solid #edeff3; color: #717b8c; font-size: 8px; }
.table-row > span:first-child { display: flex; align-items: center; gap: 6px; }
.table-row > span:first-child i { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; background: #e2e7f0; color: #345285; font-size: 7px; font-style: normal; }
.table-row b { color: #545f72; font-size: 8px; font-weight: 600; }
.table-row em { justify-self: start; padding: 4px 6px; border-radius: 99px; font-size: 6px; font-style: normal; }
.table-green { background: #e0f1eb; color: #37816f; }
.table-blue { background: #e3eef1; color: #557f8f; }
.table-amber { background: #f7ecd9; color: #aa773b; }
.screen-messages { display: grid; min-height: 350px; grid-template-columns: .75fr 1.25fr; overflow: hidden; border: 1px solid #e0e4ea; border-radius: 9px; background: #fff; }
.message-list { border-left: 1px solid #e4e7ec; }
.message-list-head { display: flex; align-items: center; justify-content: space-between; padding: 12px; color: #445167; font-size: 8px; }
.message-list-head span { color: #0c1e40; font-size: 7px; }
.message-contact { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-top: 1px solid #eff1f4; }
.message-contact.selected { background: #e5eaf2; }
.message-contact > i, .conversation-head > i { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #dce2ee; color: #325186; font-size: 8px; font-style: normal; }
.message-contact > div { min-width: 0; }
.message-contact b, .message-contact small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-contact b { color: #535e72; font-size: 8px; }
.message-contact small { margin-top: 2px; color: #a0a6b0; font-size: 7px; }
.message-contact > span { margin-right: auto; color: #a0a6b0; font-size: 7px; }
.conversation { display: flex; min-width: 0; flex-direction: column; }
.conversation-head { display: flex; align-items: center; gap: 7px; padding: 12px; border-bottom: 1px solid #e7eaef; }
.conversation-head b { color: #4a5569; font-size: 9px; }
.conversation-head small { display: block; margin-top: 2px; color: #395d9c; font-size: 7px; font-weight: 400; }
.conversation-body { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; background: #f3f4f7; }
.message-in, .message-out { max-width: 78%; padding: 8px 9px; border-radius: 8px; color: #667082; font-size: 8px; line-height: 1.7; }
.message-in { align-self: flex-start; border-top-right-radius: 2px; background: #fff; }
.message-out { align-self: flex-end; border-top-left-radius: 2px; background: #dce3ef; }
.message-in small, .message-out small { display: block; margin-top: 3px; color: #a0a6b0; font-size: 6px; }
.conversation-input { margin: 10px; padding: 8px 9px; border: 1px solid #dfe3ea; border-radius: 7px; color: #a5aab3; font-size: 8px; }
.conversation-input span { float: left; color: #0c1e40; }
.team-summary { margin-bottom: 12px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.team-card { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: 7px; padding: 12px 10px; border: 1px solid #e0e4ea; border-radius: 9px; background: #fff; }
.team-card > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 50%; background: #dce3ef; color: #2f4e83; font-size: 10px; }
.team-card b, .team-card small { display: block; }
.team-card b { color: #49556a; font-size: 8px; }
.team-card small { margin-top: 3px; color: #9fa4ae; font-size: 7px; }
.team-card em { color: #0c1e40; font-size: 7px; font-style: normal; }
@media (max-width: 767px) {
  .mockup-app { min-height: 310px; grid-template-columns: 58px minmax(0, 1fr); }
  .mockup-sidebar { padding: 12px 6px; }
  .mockup-brand { justify-content: center; padding: 2px 0 15px; }
  .mockup-brand b, .mockup-user b { display: none; }
  .mockup-nav-item { justify-content: center; padding: 7px 2px; }
  .mockup-nav-item b { display: none; }
  .mockup-user { justify-content: center; margin-top: 48px; padding-inline: 0; }
  .mockup-user > span { width: 21px; height: 21px; }
  .mockup-main { padding: 12px 10px 10px; }
  .mockup-breadcrumb { font-size: 6px; }
  .mockup-heading h3 { font-size: 13px; }
  .mockup-heading-actions { gap: 4px; }
  .mockup-search { display: none; }
  .mockup-heading-actions button { padding: 6px 7px; font-size: 7px; }
  .mockup-screen { min-height: 235px; padding-top: 10px; }
  .screen-kpis, .team-summary { gap: 4px; }
  .screen-kpis > div, .team-summary > div { padding: 7px 5px; }
  .screen-kpis small, .team-summary small { font-size: 6px; }
  .screen-kpis strong, .team-summary strong { font-size: 14px; }
  .screen-kpis span, .team-summary span { font-size: 5px; }
  .screen-columns, .journey-columns { gap: 5px; margin-top: 6px; }
  .screen-panel { padding: 7px; border-radius: 6px; }
  .panel-heading { font-size: 7px; }
  .panel-heading > span { font-size: 5px; }
  .fake-chart { height: 54px; margin-top: 9px; }
  .chart-legend { gap: 6px; margin-top: 5px; font-size: 5px; }
  .chart-legend i { width: 4px; height: 4px; }
  .mock-request { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 4px; padding: 5px 0; }
  .mock-avatar { width: 16px; height: 16px; font-size: 6px; }
  .mock-request b { font-size: 6px; }
  .mock-request small { font-size: 5px; }
  .request-chip { padding: 3px 4px; font-size: 4px; }
  .screen-note { margin-top: 5px; font-size: 5px; }
  .screen-note > span { font-size: 7px; }
  .screen-note small { font-size: 5px; }
  .journey-intro { gap: 5px; }
  .journey-intro .eyebrow-pill { padding: 3px 5px; font-size: 5px; }
  .journey-intro b { font-size: 7px; }
  .journey-intro small { font-size: 4px; }
  .journey-track { margin-top: 15px; }
  .journey-step:not(:last-child)::after { top: 6px; }
  .journey-step > span { width: 12px; height: 12px; font-size: 5px; }
  .journey-step b { margin-top: 4px; font-size: 4px; }
  .journey-step small { margin-top: 2px; font-size: 3px; }
  .next-action { margin: 8px 0 6px; font-size: 6px; }
  .panel-button { padding: 5px 6px; font-size: 5px; }
  .document-row { gap: 3px; margin-top: 6px; font-size: 5px; }
  .document-row b { font-size: 4px; }
  .table-toolbar { gap: 4px; margin-bottom: 6px; }
  .table-search, .filter-button { padding: 4px 5px; font-size: 5px; }
  .table-head, .table-row { gap: 4px; padding: 4px; font-size: 5px; }
  .table-row > span:first-child { gap: 3px; }
  .table-row > span:first-child i { width: 13px; height: 13px; font-size: 5px; }
  .table-row b { font-size: 5px; }
  .table-row em { padding: 3px 4px; font-size: 4px; }
  .screen-messages { min-height: 220px; }
  .message-list-head, .message-contact { padding: 7px 6px; }
  .message-list-head { font-size: 5px; }
  .message-list-head span { font-size: 4px; }
  .message-contact { gap: 4px; }
  .message-contact > i, .conversation-head > i { width: 15px; height: 15px; font-size: 5px; }
  .message-contact b { font-size: 5px; }
  .message-contact small { font-size: 4px; }
  .message-contact > span { font-size: 4px; }
  .conversation-head { gap: 4px; padding: 7px; }
  .conversation-head b { font-size: 6px; }
  .conversation-head small { font-size: 4px; }
  .conversation-body { gap: 5px; padding: 7px; }
  .message-in, .message-out { padding: 5px; font-size: 5px; }
  .message-in small, .message-out small { font-size: 4px; }
  .conversation-input { margin: 5px; padding: 5px; font-size: 5px; }
  .team-grid { gap: 5px; }
  .team-card { grid-template-columns: 17px 1fr; gap: 4px; padding: 7px 5px; }
  .team-card > span { width: 17px; height: 17px; font-size: 6px; }
  .team-card b { font-size: 5px; }
  .team-card small { margin-top: 2px; font-size: 4px; }
  .team-card em { display: none; }
}
.hero { min-height: 920px; padding-top: 158px; background: radial-gradient(ellipse 65% 42% at 50% 86%, rgba(183,213,239,.55), transparent 72%), linear-gradient(180deg, #ffffff 0%, #fbfcfd 40%, #eef5fb 100%); }
.hero::before { position: absolute; right: 9%; bottom: 105px; width: 230px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: -85px 25px 0 5px rgba(255,255,255,.64), 88px 24px 0 1px rgba(255,255,255,.72); content: ''; filter: blur(17px); opacity: .8; }
.hero::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 210px; background: linear-gradient(180deg, transparent, rgba(169,201,231,.35)); content: ''; pointer-events: none; }
.hero-inner { z-index: 1; display: flex; max-width: 1080px; flex-direction: column; align-items: center; gap: 0; padding-bottom: 0; }
.hero-copy { max-width: 850px; text-align: center; }
.hero h1 { max-width: 850px; color: #0c1e40; font-size: clamp(50px, 6.1vw, 84px); line-height: 1.09; text-wrap: balance; }
.hero h1 em { color: #39719f; }
.hero h1 strong { color: #0c1e40; }
.hero-copy > p { margin-inline: auto; color: #586b7b; text-align: center; }
.hero-actions { justify-content: center; }
.hero-product { width: min(940px, 100%); padding-top: 63px; }
.hero-product .preview-wrap { padding-bottom: 70px; }
.hero-product .product-window { box-shadow: 0 35px 90px rgba(55,102,143,.20), 0 5px 16px rgba(55,102,143,.10); }
.hero-bottom { z-index: 2; background: rgba(255,255,255,.74); }
.stats-band { position: relative; z-index: 2; border-top: 1px solid #dce5ec; border-bottom: 1px solid #dce5ec; background: #ffffff; color: #1b2834; }
.stats-grid { padding: 34px 0; }
.stat { border-color: #dbe5ec; }
.stat strong { color: #3473a4; }
.stat span { color: #748492; }
.friction-section { background: #ffffff; }
.showcase-section { background: #edf5fb; }
.quote-section { background: #0c1e40; }
.contact-section { background: #ffffff; }
.footer { background: #081631; }
@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 128px; }
  .hero-inner { gap: 0; }
  .hero-copy { max-width: 760px; }
  .hero h1 { font-size: clamp(45px, 9vw, 70px); }
  .hero-product { padding-top: 43px; }
}
@media (max-width: 767px) {
  .hero { padding-top: 110px; }
  .hero::before { right: 0; bottom: 95px; width: 150px; height: 85px; }
  .hero::after { height: 130px; }
  .hero h1 { font-size: clamp(43px, 12.8vw, 58px); line-height: 1.13; }
  .hero-product { width: 100%; padding-top: 34px; }
  .hero-product .preview-wrap { padding-bottom: 44px; }
  .stats-grid { padding: 22px 0; }
}
.hero-product.visible .product-window, .showcase-product.visible .product-window { animation: product-drift-sharp 9s 1.05s ease-in-out infinite; }
.hero-product { width: min(1080px, 100%); }
.mockup-app { min-height: 550px; grid-template-columns: 174px minmax(0, 1fr); }
.mockup-sidebar { padding: 22px 14px 14px; }
.mockup-brand { gap: 9px; padding: 2px 5px 22px; font-size: 13px; }
.mockup-nav-item { gap: 9px; padding: 10px 9px; font-size: 11px; }
.mockup-nav-item > span { width: 18px; height: 18px; font-size: 16px; }
.mockup-user { margin-top: 86px; padding-top: 14px; font-size: 10px; }
.mockup-user > span { width: 25px; height: 25px; }
.mockup-main { padding: 23px 26px 19px; }
.mockup-breadcrumb { margin-bottom: 5px; font-size: 10px; }
.mockup-heading h3 { font-size: 23px; }
.mockup-search { min-width: 128px; padding: 8px 10px; font-size: 15px; }
.mockup-search > span { font-size: 9px; }
.mockup-heading-actions button { padding: 10px 12px; font-size: 10px; }
.mockup-screen { min-height: 430px; padding-top: 20px; }
.screen-kpis, .team-summary { gap: 11px; }
.screen-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.screen-filters span { padding: 6px 9px; border: 1px solid #e0e4ea; border-radius: 99px; background: #fff; color: #8a93a1; font-size: 8px; }
.screen-filters span.active { border-color: #0c1e40; background: #0c1e40; color: #fff; }
.screen-kpis > div, .team-summary > div { padding: 15px; }
.screen-kpis small, .team-summary small { font-size: 10px; }
.screen-kpis strong, .team-summary strong { font-size: 28px; }
.screen-kpis span, .team-summary span { font-size: 9px; }
.screen-columns, .journey-columns { gap: 12px; margin-top: 14px; }
.screen-panel { padding: 15px; }
.panel-heading { font-size: 11px; }
.panel-heading > span { font-size: 9px; }
.fake-chart { height: 125px; margin-top: 22px; }
.chart-legend { margin-top: 12px; font-size: 9px; }
.mock-request { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; padding: 11px 0; }
.mock-avatar { width: 28px; height: 28px; font-size: 10px; }
.mock-request b { font-size: 10px; }
.mock-request small { font-size: 9px; }
.request-chip { padding: 5px 7px; font-size: 8px; }
.screen-note { margin-top: 13px; font-size: 10px; }
.screen-note small { font-size: 9px; }
.screen-distribution { margin-top: 12px; }
.service-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 12px; }
.service-item { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px; border: 1px solid #edeff2; border-radius: 7px; background: #fbfcfb; }
.service-item > i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 3px; }
.service-green { background: #2caa78; }
.service-blue { background: #4eabb1; }
.service-purple { background: #8b68c6; }
.service-amber { background: #d5a151; }
.service-item > span { display: block; min-width: 0; color: #667184; font-size: 8px; }
.service-item > span small { display: block; margin-top: 2px; color: #a2a7b0; font-size: 7px; }
.service-item > b { margin-right: auto; color: #5a677e; font-family: inherit; font-size: 8px; }
@media (max-width: 767px) {
  .mockup-app { min-height: 340px; grid-template-columns: 60px minmax(0, 1fr); }
  .mockup-sidebar { padding: 13px 6px; }
  .mockup-brand { padding: 2px 0 15px; }
  .mockup-nav-item { padding: 8px 2px; }
  .mockup-nav-item > span { width: 18px; height: 18px; font-size: 15px; }
  .mockup-user { margin-top: 53px; }
  .mockup-main { padding: 13px 10px 10px; }
  .mockup-breadcrumb { font-size: 7px; }
  .mockup-heading h3 { font-size: 14px; }
  .mockup-heading-actions button { padding: 7px 8px; font-size: 8px; }
  .mockup-screen { min-height: 265px; padding-top: 12px; }
  .screen-filters { gap: 3px; margin-top: 7px; }
  .screen-filters span { padding: 4px 5px; font-size: 5px; }
  .screen-kpis, .team-summary { gap: 5px; }
  .screen-kpis > div, .team-summary > div { padding: 8px 6px; }
  .screen-kpis small, .team-summary small { font-size: 7px; }
  .screen-kpis strong, .team-summary strong { font-size: 16px; }
  .screen-kpis span, .team-summary span { font-size: 6px; }
  .screen-columns, .journey-columns { gap: 6px; margin-top: 8px; }
  .screen-panel { padding: 8px; }
  .panel-heading { font-size: 8px; }
  .panel-heading > span { font-size: 6px; }
  .fake-chart { height: 65px; margin-top: 11px; }
  .chart-legend { margin-top: 6px; font-size: 6px; }
  .mock-request { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 5px; padding: 6px 0; }
  .mock-avatar { width: 18px; height: 18px; font-size: 7px; }
  .mock-request b { font-size: 7px; }
  .mock-request small { font-size: 6px; }
  .request-chip { padding: 3px 5px; font-size: 5px; }
  .screen-note { margin-top: 7px; font-size: 6px; }
  .screen-note small { font-size: 5px; }
  .screen-distribution { margin-top: 7px; }
  .service-items { gap: 3px; margin-top: 7px; }
  .service-item { gap: 3px; padding: 5px 4px; }
  .service-item > i { width: 5px; height: 5px; border-radius: 2px; }
  .service-item > span { font-size: 5px; }
  .service-item > span small { margin-top: 1px; font-size: 4px; }
  .service-item > b { font-size: 5px; }
}
.showcase-inner { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 40px; }
.showcase-product { min-width: 0; }
@media (max-width: 1300px) {
  .showcase-inner { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .showcase-copy { order: 1; max-width: 600px; }
  .showcase-product { order: 2; width: 100%; }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .showcase-inner { gap: 34px; }
  .showcase-product .mockup-app { min-height: 440px; }
  .showcase-product .mockup-screen { min-height: 340px; }
  .showcase-product .mockup-main { padding: 18px 19px 15px; }
  .showcase-product .mockup-heading h3 { font-size: 19px; }
  .showcase-product .screen-kpis > div, .showcase-product .team-summary > div { padding: 10px; }
  .showcase-product .screen-kpis strong, .showcase-product .team-summary strong { font-size: 22px; }
}
@media (max-width: 767px) {
  .showcase-inner { display: flex; flex-direction: column; gap: 38px; }
  .showcase-copy { order: 1; width: 100%; }
  .showcase-product { order: 2; width: 100%; }
  .mockup-heading { flex-wrap: wrap; gap: 8px; }
  .mockup-heading-actions { flex-wrap: wrap; max-width: 100%; }
  .screen-columns { grid-template-columns: minmax(0, 1fr); }
  .screen-kpis > div { min-width: 0; }
  .footer-links { flex-wrap: wrap; }
}
.mockup-app small { font-size: 11px !important; line-height: 1.4; }
.preview-description { font-size: 13px; }
.section-kicker { font-size: 13px; }
.eyebrow-pill { font-size: 12px; }
.friction-card .card-top small, .workflow-step .step-top small { display: none; }
.quote-author small, .quote-aside small, .footer small { font-size: 12px; }
.screen-housing { display: grid; gap: 12px; }
.housing-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.housing-summary > div { padding: 13px; border: 1px solid #e0e4ea; border-radius: 8px; background: #fff; }
.housing-summary small, .housing-summary strong, .housing-summary span { display: block; }
.housing-summary small { color: #768092; }
.housing-summary strong { margin-top: 7px; color: #405270; font-family: inherit; font-size: 23px; }
.housing-summary strong.kpi-green { color: #0d8b72; }
.housing-summary strong.kpi-amber { color: #bc8038; }
.housing-summary span { margin-top: 3px; color: #a3a8b2; }
.housing-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.housing-filters span { padding: 6px 9px; border: 1px solid #e0e4ea; border-radius: 99px; background: #fff; color: #8a93a1; }
.housing-filters span.active { border-color: #0c1e40; background: #0c1e40; color: #fff; }
.housing-table { overflow: hidden; }
.housing-row { display: grid; grid-template-columns: 1.45fr .8fr 1.1fr .95fr; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #edeef1; color: #6c778a; }
.housing-header { padding-top: 3px; border-top: 0; color: #a1a6b0; }
.housing-person { display: flex; min-width: 0; align-items: center; gap: 8px; }
.housing-person b { overflow: hidden; color: #4b5970; text-overflow: ellipsis; white-space: nowrap; }
.housing-person .mock-avatar { width: 25px; height: 25px; font-size: 9px; }
.housing-row > span, .housing-row > em { font-size: 9px; }
.housing-detail { margin-top: 0; }
.housing-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.housing-detail-grid > span { color: #9298a4; }
.housing-detail-grid strong { display: block; margin-top: 5px; color: #4a5871; font-size: 10px; }
@media (max-width: 767px) {
  .mockup-app small { font-size: 9px !important; }
  .preview-description { font-size: 12px; }
  .section-kicker { font-size: 12px; }
  .eyebrow-pill { font-size: 11px; }
  .quote-author small, .quote-aside small, .footer small { font-size: 11px; }
  .screen-housing { gap: 7px; }
  .housing-summary { gap: 4px; }
  .housing-summary > div { padding: 7px 5px; }
  .housing-summary strong { margin-top: 4px; font-size: 15px; }
  .housing-summary span { margin-top: 2px; }
  .housing-filters { gap: 3px; }
  .housing-filters span { padding: 4px 5px; font-size: 6px; }
  .housing-row { grid-template-columns: 1.45fr .8fr 1.1fr; gap: 5px; padding: 6px 0; }
  .housing-row > span, .housing-row > em { font-size: 7px; }
  .housing-row > span:last-child, .housing-header > span:last-child { display: none; }
  .housing-person { gap: 4px; }
  .housing-person .mock-avatar { width: 18px; height: 18px; font-size: 7px; }
  .housing-detail-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 7px; }
  .housing-detail-grid > span { font-size: 7px; }
  .housing-detail-grid strong { margin-top: 3px; font-size: 8px; }
}
.screen-requests { display: grid; gap: 10px; }
.request-type-tabs { display: flex; gap: 5px; padding: 4px; border: 1px solid #dfe3ea; border-radius: 7px; background: #f4f5f8; }
.request-type-tabs span { flex: 1; padding: 7px 8px; border-radius: 5px; color: #778192; text-align: center; font-size: 8px; white-space: nowrap; }
.request-type-tabs span.active { background: #fff; box-shadow: 0 2px 7px rgba(43,61,91,.08); color: #0c1e40; }
.request-type-tabs b { margin-right: 3px; font-family: inherit; font-size: 7px; }
.requests-actions, .requests-actions > div, .requests-segments, .requests-toolbar { display: flex; align-items: center; }
.requests-actions { justify-content: space-between; }
.requests-actions > div { gap: 6px; }
.requests-actions button { border: 0; border-radius: 6px; padding: 7px 10px; font-family: inherit; font-size: 9px; }
.request-primary { background: #0c1e40; color: #fff; }
.request-secondary { border: 1px solid #dce0e8 !important; background: #fff; color: #5b687e; }
.request-count { color: #929aa8; font-size: 9px; }
.requests-segments { gap: 5px; padding-bottom: 1px; border-bottom: 1px solid #e4e7ec; }
.requests-segments span { padding: 7px 9px; color: #8c93a0; font-size: 9px; }
.requests-segments span.active { border-bottom: 2px solid #0c1e40; color: #0c1e40; }
.requests-segments b { margin-right: 3px; font-family: inherit; font-size: 8px; }
.requests-toolbar { flex-wrap: wrap; gap: 6px; }
.requests-toolbar > span { padding: 6px 8px; border: 1px solid #e0e4ea; border-radius: 5px; background: #fff; color: #868f9e; font-size: 8px; }
.requests-toolbar .request-search { min-width: 185px; margin-left: auto; color: #a4a9b1; }
.requests-table { overflow: hidden; }
.request-row { display: grid; grid-template-columns: 1.35fr 1.1fr 1.05fr 1fr .95fr .8fr; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #edeef1; color: #778192; }
.request-header { padding-top: 2px; border-top: 0; color: #a1a6b0; }
.request-row > span, .request-row > em { min-width: 0; font-size: 8px; }
.request-client { display: flex; min-width: 0; align-items: center; gap: 6px; }
.request-client i { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #e1e6ef; color: #375382; font-size: 9px; font-style: normal; font-weight: 700; }
.request-client b { overflow: hidden; color: #4b5970; text-overflow: ellipsis; white-space: nowrap; }
.request-row > span:last-child { font-family: inherit; color: #657185; }
.request-row > span:last-child small { font-family: inherit; color: #a1a6b0; font-size: 7px; }
@media (max-width: 767px) {
  .screen-requests { gap: 6px; }
  .request-type-tabs { gap: 2px; padding: 2px; }
  .request-type-tabs span { padding: 5px 3px; font-size: 5px; }
  .request-type-tabs b { margin-right: 2px; font-size: 5px; }
  .requests-actions > div { gap: 3px; }
  .requests-actions button { padding: 5px 6px; font-size: 6px; }
  .request-count { font-size: 7px; }
  .requests-segments { gap: 1px; overflow: hidden; }
  .requests-segments span { padding: 5px 4px; font-size: 6px; white-space: nowrap; }
  .requests-segments b { font-size: 6px; }
  .requests-toolbar { gap: 3px; }
  .requests-toolbar > span { padding: 4px 5px; font-size: 6px; }
  .requests-toolbar .request-search { min-width: 130px; }
  .request-row { grid-template-columns: 1.45fr .95fr 1fr; gap: 4px; padding: 6px 0; }
  .request-row > span, .request-row > em { font-size: 6px; }
  .request-row > span:nth-child(3), .request-row > span:nth-child(5), .request-header > span:nth-child(3), .request-header > span:nth-child(5) { display: none; }
  .request-client { gap: 4px; }
  .request-client i { width: 17px; height: 17px; font-size: 7px; }
  .request-row > span:last-child small { font-size: 5px; }
}
.screen-labor { display: grid; gap: 12px; }
.labor-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.labor-summary > div { padding: 13px; border: 1px solid #e0e4ea; border-radius: 8px; background: #fff; }
.labor-summary small, .labor-summary strong, .labor-summary span { display: block; }
.labor-summary small { color: #768092; }
.labor-summary strong { margin-top: 7px; color: #405270; font-family: inherit; font-size: 23px; }
.labor-summary strong.kpi-green { color: #0d8b72; }
.labor-summary strong.kpi-amber { color: #bc8038; }
.labor-summary strong.kpi-red { color: #c35d63; }
.labor-summary span { margin-top: 3px; color: #a3a8b2; }
.labor-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.labor-filters span { padding: 6px 9px; border: 1px solid #e0e4ea; border-radius: 99px; background: #fff; color: #8a93a1; font-size: 9px; }
.labor-filters span.active { border-color: #0c1e40; background: #0c1e40; color: #fff; }
.labor-table { overflow: hidden; }
.labor-row { display: grid; grid-template-columns: 1.35fr .8fr .9fr 1.15fr 1fr; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid #edeef1; color: #6c778a; }
.labor-header { padding-top: 3px; border-top: 0; color: #a1a6b0; }
.labor-row > span, .labor-row > em { min-width: 0; font-size: 9px; }
.labor-person { display: flex; min-width: 0; align-items: center; gap: 8px; }
.labor-person b { overflow: hidden; color: #4b5970; text-overflow: ellipsis; white-space: nowrap; }
.labor-person .mock-avatar { width: 25px; height: 25px; flex: 0 0 auto; font-size: 9px; }
.labor-detail-head { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.labor-detail-head > div { min-width: 0; }
.labor-detail-head > div b, .labor-detail-head > div small { display: block; }
.labor-detail-head > div b { color: #4b5970; font-size: 11px; }
.labor-detail-head > div small { margin-top: 3px; color: #8d94a0; }
.labor-detail-head > em { margin-right: auto; }
.labor-detail-head .mock-avatar { width: 31px; height: 31px; flex: 0 0 auto; }
.labor-detail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 13px; padding-top: 11px; border-top: 1px solid #edeef1; }
.labor-detail-grid > span { color: #9298a4; font-size: 9px; }
.labor-detail-grid strong { display: block; margin-top: 5px; color: #4a5871; font-size: 10px; }
@media (max-width: 767px) {
  .screen-labor { gap: 7px; }
  .labor-summary { gap: 4px; }
  .labor-summary > div { padding: 7px 5px; }
  .labor-summary strong { margin-top: 4px; font-size: 15px; }
  .labor-summary span { margin-top: 2px; }
  .labor-filters { gap: 3px; }
  .labor-filters span { padding: 4px 5px; font-size: 6px; }
  .labor-row { grid-template-columns: 1.45fr .8fr 1fr; gap: 5px; padding: 6px 0; }
  .labor-row > span, .labor-row > em { font-size: 7px; }
  .labor-row > span:nth-child(3), .labor-row > span:nth-child(4), .labor-header > span:nth-child(3), .labor-header > span:nth-child(4) { display: none; }
  .labor-person { gap: 4px; }
  .labor-person .mock-avatar { width: 18px; height: 18px; font-size: 7px; }
  .labor-detail-head { gap: 5px; margin-top: 7px; }
  .labor-detail-head > div b { font-size: 8px; }
  .labor-detail-head > div small { margin-top: 2px; font-size: 7px; }
  .labor-detail-head .mock-avatar { width: 22px; height: 22px; }
  .labor-detail-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 7px; padding-top: 7px; }
  .labor-detail-grid > span { font-size: 7px; }
  .labor-detail-grid strong { margin-top: 3px; font-size: 8px; }
}
.request-stages-section { position: relative; overflow: hidden; padding: 112px 0 118px; background: #f4f5f8; }
.request-stages-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(59,91,116,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(59,91,116,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, transparent 0, #000 17%, #000 82%, transparent 100%); }
.request-stages-section .container-marhela { position: relative; z-index: 1; }
.request-stages-heading { max-width: 600px; margin: 0 auto 34px; text-align: center; }
.request-stages-heading h2 { margin-bottom: 14px; }
.request-stages-heading p { max-width: 540px; margin-inline: auto; }
.request-type-switcher { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 930px; margin: 0 auto 28px; padding: 6px; border: 1px solid #dbe0e8; border-radius: 13px; background: rgba(255,255,255,.7); }
.request-type-switcher button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border: 0; border-radius: 9px; padding: 8px 13px; background: transparent; color: #758092; cursor: pointer; font-family: inherit; font-size: 13px; text-align: right; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.request-type-switcher button small { color: #a7adb7; font-family: inherit; font-size: 10px; }
.request-type-switcher button.active { background: #fff; box-shadow: 0 5px 16px rgba(48,65,94,.08); color: #0c1e40; }
.request-type-switcher button.active small { color: #0c1e40; }
.request-stages-layout { display: grid; grid-template-columns: .92fr 1.08fr; align-items: stretch; gap: 26px; max-width: 1030px; margin: 0 auto; }
.request-flow, .request-form-card { border: 1px solid #dce9e5; border-radius: 18px; background: rgba(255,255,255,.86); box-shadow: 0 16px 42px rgba(63,78,105,.07); }
.request-flow { padding: 28px; }
.request-flow-intro { padding-bottom: 20px; }
.request-flow-intro .eyebrow-pill { margin-bottom: 11px; }
.request-flow-intro h3 { margin: 0; color: #0c1e40; font-size: 25px; letter-spacing: 0; }
.request-flow-intro p { max-width: 400px; margin: 9px 0 0; color: #6a7486; font-size: 14px; line-height: 1.8; }
.stage-list { position: relative; padding-top: 4px; }
.stage-list::before { position: absolute; top: 22px; bottom: 22px; right: 17px; width: 1px; background: #cfd5e0; content: ""; }
.stage-item { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; }
.stage-number { position: relative; z-index: 1; display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 1px solid #d4d9e3; border-radius: 50%; background: #fff; color: #8d96a4; font-family: inherit; font-size: 11px; }
.stage-item.current .stage-number { border-color: #0c1e40; background: #0c1e40; color: #fff; box-shadow: 0 0 0 5px rgba(12,30,64,.1); }
.stage-item > div { flex: 1; padding-top: 2px; }
.stage-item b { display: block; color: #4b5970; font-size: 14px; }
.stage-item p { margin: 4px 0 0; color: #9198a4; font-size: 12px; line-height: 1.5; }
.request-form-card { align-self: center; overflow: hidden; }
.request-form-top { display: flex; align-items: center; justify-content: space-between; padding: 17px 21px; border-bottom: 1px solid #e7eaef; }
.request-form-top span { display: flex; align-items: center; gap: 8px; color: #35445f; font-size: 14px; font-weight: 700; }
.request-form-top span svg { color: #0c1e40; }
.request-form-top small { color: #a1a6b0; font-family: inherit; font-size: 10px; }
.request-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 13px; padding: 24px 21px 28px; }
.request-form-fields label { display: block; }
.request-form-fields label:first-child, .request-form-fields label:last-child { grid-column: 1 / -1; }
.request-form-fields label > span { display: block; margin-bottom: 7px; color: #7a8393; font-size: 11px; }
.request-form-fields label > span em { margin-right: 3px; color: #ce6c67; font-style: normal; }
.request-form-fields label > b { display: block; border: 1px solid #dfe3ea; border-radius: 8px; padding: 11px 12px; background: #fbfcfd; color: #5f6a7e; font-size: 12px; font-weight: 500; }
.request-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 21px; border-top: 1px solid #e7eaef; background: #fbfcfd; }
.request-form-footer > span { display: flex; align-items: center; gap: 5px; color: #8c94a2; font-size: 11px; }
.request-form-footer > span svg { color: #0c1e40; }
.request-form-footer button { display: flex; align-items: center; gap: 6px; border: 0; border-radius: 7px; padding: 9px 12px; background: #0c1e40; color: #fff; cursor: pointer; font-family: inherit; font-size: 11px; }
@media (max-width: 767px) {
  .request-stages-section { padding: 80px 0 86px; }
  .request-stages-heading { margin-bottom: 24px; }
  .request-stages-heading h2 { font-size: 35px; }
  .request-stages-heading p { font-size: 13px; }
  .request-type-switcher { grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: 10px; }
  .request-type-switcher button { min-height: 39px; padding: 7px 8px; font-size: 10px; }
  .request-type-switcher button small { font-size: 8px; }
  .request-stages-layout { display: flex; flex-direction: column; gap: 12px; }
  .request-flow { order: 1; padding: 18px; }
  .request-form-card { order: 2; }
  .request-flow-intro { padding-bottom: 12px; }
  .request-flow-intro h3 { font-size: 20px; }
  .request-flow-intro p { margin-top: 6px; font-size: 11px; }
  .stage-list::before { top: 20px; bottom: 20px; right: 14px; }
  .stage-item { gap: 10px; padding: 8px 0; }
  .stage-number { width: 29px; height: 29px; font-size: 9px; }
  .stage-item b { font-size: 11px; }
  .stage-item p { margin-top: 2px; font-size: 9px; }
  .request-form-top { padding: 13px 14px; }
  .request-form-top span { gap: 5px; font-size: 11px; }
  .request-form-top small { font-size: 8px; }
  .request-form-fields { gap: 11px 7px; padding: 16px 14px 19px; }
  .request-form-fields label > span { margin-bottom: 4px; font-size: 9px; }
  .request-form-fields label > b { padding: 8px 9px; font-size: 9px; }
  .request-form-footer { align-items: flex-start; flex-direction: column; padding: 11px 14px; }
  .request-form-footer > span { font-size: 9px; }
  .request-form-footer button { padding: 8px 10px; font-size: 9px; }
}


/* ======================================================================================
   Additions for the Django port. Anything below either replaces a React-only behaviour or
   is a Marhela rule the export did not follow.
   ====================================================================================== */

/* Brand lockup: the committed SVGs, near-black in the nav, white in the footer. */
.brand-lockup { display: block; width: 132px; height: auto; }
.footer .brand-lockup { filter: brightness(0) invert(1); }
.mockup-brand .brand-lockup { width: 108px; }
.mockup-brand .brand-mark-sm { display: none; width: 30px; height: auto; }

/* Mobile menu: a real disclosure, links rather than scroll buttons. */
.mobile-panel[hidden] { display: none !important; }
@media (max-width: 767px) {
  .mobile-panel a:not(.marhela-button) { display: block; padding: 12px 14px; border-radius: 9px; color: #525c6e; font-size: 14px; }
  .mobile-panel a:not(.marhela-button):active { background: #eef1f5; }
  .mockup-brand .brand-lockup { display: none; }
  .mockup-brand .brand-mark-sm { display: block; }
}
.mobile-menu .lucide { width: 19px; height: 19px; }
.mobile-menu .icon-close, .mobile-menu[aria-expanded="true"] .icon-open { display: none; }
.mobile-menu[aria-expanded="true"] .icon-close { display: block; }

/* Buttons: an honest press. The export only lifted on hover. */
.marhela-button .lucide { width: 17px; height: 17px; }
.marhela-button, .preview-tabs button, .request-type-switcher button, .request-form-footer button, .mobile-menu {
  transition-property: background-color, color, border-color, box-shadow, transform; transition-duration: 160ms; transition-timing-function: var(--ease-out); }
.marhela-button:active, .preview-tabs button:active, .request-type-switcher button:active, .request-form-footer button:active, .mobile-menu:active { transform: scale(.97); }
.preview-tabs button:focus-visible, .request-type-switcher button:focus-visible, .request-form-footer button:focus-visible,
.desktop-nav a:focus-visible, .login-link:focus-visible, .hero-actions a:focus-visible, .faq-intro > a:focus-visible, .footer a:focus-visible { outline: 2px solid #dfb26c; outline-offset: 3px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) { .preview-tabs button:hover { transform: none; background: #dfe5ee; } .preview-tabs button.selected:hover { background: #1b3160; } }

/* Hero proof line: a live dot, and the office count only when the registry has one. */
.hero-actions .lucide { width: 16px; height: 16px; }
/* The export's primary CTA was a <button>; here it is a link, so `.hero-actions a` must not recolour it. */
.hero-actions a.marhela-button { padding: 0 21px; color: #fbfaf6; }
@media (hover: hover) and (pointer: fine) { .hero-actions a.marhela-button:hover { color: #fff; } }
@media (max-width: 767px) {
  /* Cairo sets wider than the export's face; at the export's size the headline broke into four lines. */
  .hero h1 { font-size: clamp(36px, 10.4vw, 50px); line-height: 1.2; }
  .request-form-card { align-self: stretch; }
  .request-form-top { flex-wrap: wrap; gap: 4px 10px; }
}

/* Office logos under the hero (owner's pick B, 2026-09-10), kept from the previous page. */
.lmB { position: relative; z-index: 2; padding: 34px 16px 40px; background: #fff; }
.lm-label { margin-bottom: 14px; color: #6b7a90; font-size: 13px; font-weight: 700; text-align: center; }
.lm-label b { color: #0c1e40; font-weight: 800; }
.lm { position: relative; overflow: hidden; direction: ltr; max-width: 980px; margin: 0 auto; border-block: 1px solid #e3e8ef; }
.lm-view { overflow: hidden; padding: 10px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
.lm-track, .lm-group { display: flex; width: max-content; align-items: center; gap: 64px; }
.lm-group { padding-inline: 32px; }
.lm-group li { display: flex; flex: 0 0 auto; align-items: center; height: 64px; filter: grayscale(1); opacity: .62; transition: filter .25s ease, opacity .25s ease; }
@media (hover: hover) and (pointer: fine) { .lm:hover .lm-group li { filter: none; opacity: 1; } }
.lm-office { display: inline-flex; align-items: center; gap: 10px; direction: rtl; color: #1b2a4a; }
.lm-office svg { width: 46px; height: 23px; }
.lm-office img { display: block; width: auto; height: 34px; }
.lm-office b { font-size: 21px; font-weight: 900; line-height: 1; }
.lm-office small { align-self: flex-end; margin-bottom: 2px; color: #5a6478; font-size: 13px; font-weight: 700; }
.lm-sv b { color: #5b2333; }

/* Product preview: every screen is server-rendered; the tabs only toggle `hidden`. */
.mockup-screen[hidden] { display: none; }
.mockup-app .lucide { width: 14px; height: 14px; stroke-width: 1.8; }
.mockup-nav-item > span .lucide { width: 16px; height: 16px; }
.mockup-search .lucide { width: 12px; height: 12px; }
.requests-actions > div > span, .mockup-heading-actions > span.mock-cta, .panel-button { display: inline-block; }
.mockup-heading-actions > span.mock-cta { padding: 10px 12px; border-radius: 6px; background: #0c1e40; color: #fff; font-size: 10px; }
.requests-actions > div > span { border-radius: 6px; padding: 7px 10px; font-size: 9px; }
.journey-step > span .lucide { width: 11px; height: 11px; stroke-width: 3; }
.conversation-input span .lucide { width: 12px; height: 12px; }
.preview-note { margin: 6px auto 0; color: #97a3b4; font-size: 11px; text-align: center; }
@media (max-width: 767px) {
  .mockup-heading-actions > span.mock-cta { padding: 7px 8px; font-size: 8px; }
  .requests-actions > div > span { padding: 5px 6px; font-size: 6px; }
  .mockup-app .lucide { width: 11px; height: 11px; }
}

/* Request journeys: the استقدام list is <ol id="railTrack">, generated from the state machine.
   Each <li> holds only its label (the rail guard reads it); number and note are drawn here. */
.stage-list { counter-reset: stage; }
.stage-item { display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: start; column-gap: 14px; padding: 9px 0; color: #4c5a72; font-size: 14px; font-weight: 700; line-height: 1.5; counter-increment: stage; }
.stage-item::before { display: grid; grid-row: 1 / span 2; width: 35px; height: 35px; place-items: center; border: 1px solid #d4dbe7; border-radius: 50%; background: #fff; color: #8e98a9; content: counter(stage, decimal-leading-zero); font-size: 11px; font-weight: 600; position: relative; z-index: 1; }
.stage-item::after { grid-column: 2; margin-top: 2px; color: #919cad; content: attr(data-note); font-size: 12px; font-weight: 400; line-height: 1.6; }
.stage-item.current::before { border-color: #0c1e40; background: #0c1e40; color: #fff; box-shadow: 0 0 0 5px rgba(12,30,64,.1); }
.stage-item.current { color: #0c1e40; }
.stage-list::before { top: 26px; bottom: 26px; right: 17px; }
.request-panel[hidden] { display: none; }
.request-form-card { align-self: start; position: sticky; top: 110px; margin-top: 118px; }
.stat strong span { display: inline; margin: 0; color: inherit; font-size: inherit; }
@media (max-width: 767px) { .request-form-card { position: static; margin-top: 0; } }
.request-form-fields label > b.placeholder { color: #a6b0bf; }
.request-form-top .lucide, .request-form-footer .lucide { width: 15px; height: 15px; }
@media (max-width: 767px) {
  .stage-item { grid-template-columns: 29px minmax(0, 1fr); column-gap: 10px; padding: 6px 0; font-size: 12px; }
  .stage-item::before { width: 29px; height: 29px; font-size: 9px; }
  .stage-item::after { font-size: 10px; }
  .stage-list::before { top: 22px; bottom: 22px; right: 14px; }
}

/* Stats: Arabic-Indic figures in Cairo, not a monospace Latin face. */
.stat strong { font-weight: 800; line-height: 1.2; }
.card-wide > b .lucide, .check-list .lucide { width: 14px; height: 14px; }
.feature-icon .lucide { width: 20px; height: 20px; }
.step-top > span .lucide, .quote-icon .lucide { width: 22px; height: 22px; }

/* The approver rule sits where the export had a testimonial. */
.quote-main blockquote { font-weight: 700; }
.quote-author > span .lucide { width: 18px; height: 18px; stroke-width: 2.4; }

.faq-item button i .lucide { width: 15px; height: 15px; }
.faq-intro > a .lucide { width: 15px; height: 15px; }
@keyframes bar-rise { from { opacity: 0; transform: scaleY(.15); transform-origin: bottom; } to { opacity: 1; transform: scaleY(1); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mh *, .mh *::before, .mh *::after { animation: none !important; }
}

/* ======================================================================================
   Legibility (design review, 2026-09-14). The export's secondary text was a pale slate that
   measured 2.1:1 to 4.3:1 against its own backgrounds; 60 text elements failed WCAG AA.
   Every value below was measured against the surface it sits on and clears 4.5:1 (3:1 for
   the 50px heading halves). Hue is kept, only lightness moves.
   ====================================================================================== */
.desktop-nav a, .login-link { color: #3f4e63; }
.hero-bottom { color: #56657a; }
.section-kicker { color: #8a561b; }
.section-heading h2 span, .workflow-head h2 span, .faq-intro h2 span { color: #5a7384; }
.contact-content h2 span { color: #8f5a1f; }
.section-heading p, .showcase-copy > p, .workflow-head > p, .faq-intro > p { color: #4f5f6c; }
.eyebrow-pill { color: #2f5566; }
.request-type-switcher button { color: #4f5a6f; }
.request-type-switcher button small { color: #6b7489; }
.request-form-top small { color: #636d84; }
.request-form-fields label > span { color: #5b6477; }
.request-form-fields label > b { color: #4a5569; }
.request-form-fields label > b.placeholder { color: #6b7489; }
.request-form-footer > span { color: #5f6a80; }
.stage-item::after { color: #5f6b7e; }
.stat span { color: #56657a; }
.card-wide p { color: #4f6070; }
.card-blue p { color: #465f69; }
.card-amber p { color: #6b5436; }
.workflow-step p { color: #52636f; }
.faq-answer p { color: #4f5d6c; }
.contact-content p { color: #44606e; }
.preview-tabs button { color: #3f5a6b; }
.preview-description { color: #4f5f6c; }
.preview-note { color: #66728a; }
.lm-label { color: #56657a; }

/* Type floor. The export set reading copy at 13px and labels at 10-11px, which Cairo's
   compact x-height makes smaller still. Reading copy is now 16px or more, labels 13px or
   more on desktop; the phone keeps the same floors instead of shrinking under them. */
.desktop-nav a, .login-link { font-size: 15px; }
.nav-cta { font-size: 14px; }
.hero-bottom { font-size: 13px; }
.section-kicker { font-size: 15px; letter-spacing: 0; }
.section-heading p, .showcase-copy > p, .workflow-head > p, .faq-intro > p { font-size: 17px; }
.eyebrow-pill { font-size: 13px; }
.request-flow-intro p { font-size: 16px; }
.request-type-switcher button { font-size: 15px; }
.request-type-switcher button small { font-size: 12px; }
.stage-item { font-size: 16px; }
.stage-item::after { font-size: 14px; }
.request-form-top span { font-size: 15px; }
.request-form-top small { font-size: 12px; }
.request-form-fields label > span { font-size: 13px; }
.request-form-fields label > b { font-size: 14px; }
.request-form-footer > span { font-size: 13px; }
.stat span { font-size: 15px; line-height: 1.7; }
.check-list { font-size: 15px; }
.friction-card p, .workflow-step p { font-size: 15px; }
.card-wide > b { font-size: 13px; }
.quote-aside p { font-size: 17px; }
.quote-author b { font-size: 15px; }
.quote-author small, .quote-aside small { font-size: 13px; }
.faq-item button { font-size: 16px; }
.faq-answer p { font-size: 15px; }
.faq-intro > a { font-size: 15px; }
.contact-content p { font-size: 17px; }
.preview-tabs button { font-size: 13px; }
.preview-description { font-size: 15px; }
.preview-note { font-size: 12px; }
.lm-label { font-size: 14px; }
.footer p, .footer a { font-size: 14px; }
.footer small { font-size: 13px; }
@media (max-width: 767px) {
  .hero-bottom > div > div { font-size: 13px; }
  .section-heading p, .showcase-copy > p, .workflow-head > p, .faq-intro > p, .contact-content p { font-size: 16px; }
  .request-stages-heading p { font-size: 15px; }
  .request-flow-intro p { font-size: 14px; }
  .request-type-switcher button { font-size: 13px; }
  .request-type-switcher button small { font-size: 12px; }
  .stage-item { font-size: 15px; }
  .stage-item::after { font-size: 13px; }
  .request-form-top span { font-size: 14px; }
  .request-form-top small, .request-form-footer > span { font-size: 12px; }
  .request-form-fields label > span { font-size: 12px; }
  .request-form-fields label > b { font-size: 13px; }
  .stat span { font-size: 14px; }
  .preview-tabs button { font-size: 12px; }
  .preview-description { font-size: 14px; }
  .quote-author small, .quote-aside small, .footer small { font-size: 12px; }
}

/* The journeys' form card sits beside the list on desktop (align-self: start, sticky); on
   the phone the layout is one column and that rule shrank the card to its content width. */
@media (max-width: 767px) { .request-form-card { align-self: stretch; position: static; margin-top: 0; } }

/* Headings under 30px were weight 400: in Cairo that reads as body text, not a title. */
.request-flow-intro h3, .friction-card h3, .workflow-step h3 { font-weight: 700; }

/* Touch targets: the preview tabs were 29px tall and the text links 20px. 44px is the floor
   for a thumb; the visual weight of each control is unchanged, only its hit area grows. */
.preview-tabs button { min-height: 38px; padding-inline: 14px; border-radius: 999px; }
.desktop-nav a, .login-link, .faq-intro > a, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.hero-actions a:not(.marhela-button) { min-height: 44px; }
.nav-cta { min-height: 44px; }
@media (max-width: 767px) {
  .preview-tabs { gap: 6px; }
  .preview-tabs button { min-height: 44px; padding-inline: 12px; }
}
@media (max-width: 767px) {
  .mobile-menu { width: 44px; height: 44px; }
  .nav-inner > a { display: inline-flex; align-items: center; min-height: 44px; }
  .request-type-switcher button { min-height: 44px; }
}

/* The product mock. It is an illustration, but a visitor reads it to understand the product,
   and the export drew it at 7-8px on desktop and 4-6px on the phone. Floors: 11px on desktop
   (10px for chips and ordinals), 8px on the phone, where the sidebar labels already fold away. */
.window-title, .mockup-breadcrumb { font-size: 11px; }
.panel-heading { font-size: 13px; }
.panel-heading > span, .chart-legend, .screen-note, .screen-note small { font-size: 11px; }
.request-chip, .table-row em { font-size: 10px; padding: 4px 8px; }
.screen-filters span, .housing-filters span, .labor-filters span { font-size: 11px; }
.mock-request b, .service-item > span, .team-card b, .message-contact b, .conversation-head b { font-size: 12px; }
.mockup-app small, .service-item > span small, .service-item > b, .team-card em, .message-contact > span { font-size: 11px !important; }
.request-type-tabs span, .requests-segments span, .requests-toolbar > span, .request-count, .requests-actions > div > span { font-size: 11px; }
.request-type-tabs b, .requests-segments b { font-size: 10px; }
.request-row > span, .request-row > em, .housing-row > span, .housing-row > em, .labor-row > span, .labor-row > em { font-size: 11px; }
.table-head, .table-row, .table-row b, .table-search, .filter-button { font-size: 11px; }
.journey-intro b { font-size: 13px; }
.journey-step b { font-size: 11px; }
.journey-step small { font-size: 10px !important; }
.next-action { font-size: 12px; }
.document-row { font-size: 11px; }
.document-row b { font-size: 10px; }
.message-list-head, .message-in, .message-out, .conversation-input { font-size: 11px; }
.housing-detail-grid > span, .labor-detail-grid > span, .labor-detail-grid strong, .housing-detail-grid strong { font-size: 11px; }
.mockup-nav-item { font-size: 12px; }
@media (max-width: 767px) {
  .window-title, .mockup-breadcrumb { font-size: 9px; }
  .mockup-heading h3 { font-size: 15px; }
  .panel-heading { font-size: 10px; }
  .panel-heading > span, .chart-legend, .screen-note, .screen-note small { font-size: 8px; }
  .request-chip, .table-row em { font-size: 8px; padding: 3px 5px; }
  .screen-filters span, .housing-filters span, .labor-filters span { font-size: 8px; }
  .mock-request b, .service-item > span, .team-card b, .message-contact b, .conversation-head b { font-size: 9px; }
  .mockup-app small, .service-item > span small, .service-item > b, .team-card em, .message-contact > span { font-size: 8px !important; }
  .screen-kpis small, .team-summary small, .housing-summary small, .labor-summary small { font-size: 8px !important; }
  .screen-kpis span, .team-summary span { font-size: 8px; }
  .request-type-tabs span, .requests-segments span, .requests-toolbar > span, .request-count, .requests-actions > div > span { font-size: 8px; }
  .request-type-tabs b, .requests-segments b { font-size: 8px; }
  .request-row > span, .request-row > em, .housing-row > span, .housing-row > em, .labor-row > span, .labor-row > em { font-size: 8px; }
  .table-head, .table-row, .table-row b, .table-search, .filter-button { font-size: 8px; }
  .journey-intro b { font-size: 10px; }
  .journey-step b { font-size: 8px; }
  .journey-step small { font-size: 8px !important; }
  .next-action, .document-row, .document-row b { font-size: 8px; }
  .message-list-head, .message-in, .message-out, .conversation-input { font-size: 8px; }
  .housing-detail-grid > span, .labor-detail-grid > span, .labor-detail-grid strong, .housing-detail-grid strong { font-size: 8px; }
  .service-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  /* The export hid two of six request columns but kept a three-column grid, so the amount
     wrapped under each row. Four visible columns, four tracks. */
  .request-row { grid-template-columns: 1.4fr .9fr 1fr .8fr; }
}

/* ======================================================================================
   beUI layer (beui.dev/components, 2026-09-14). The owner's picks (every variant A) ported
   from beUI's own source, github.com/starc007/ui-components, to plain CSS and JS: same
   choreography, same durations, and Motion's springs pre-solved into CSS linear() with the
   solver the office app's port uses (it reproduces that port's 884ms tabs and 282ms tooltip
   springs exactly). Tokens match appplane/static/css/beui.css, so marhela.com and the office
   app move the same way.
   Derived from beUI, Copyright (c) 2026 Saurabh Chauhan, MIT License.
   Marhela rules win where they differ: RTL mirroring, the navy palette, hover motion only on
   a fine pointer, keyboard moves without travel, 44px targets, and every component drops its
   travel under prefers-reduced-motion.
   ====================================================================================== */
:where(.mh) {
  /* lib/ease.ts, 1:1 */
  --bu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bu-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --bu-motion-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --bu-colors: cubic-bezier(0.4, 0, 0.2, 1);
  --bu-tween: cubic-bezier(0.25, 0.1, 0.35, 1);
  /* Shared with the office app's beui.css (SPRING_PRESS, tabs glide, tooltip, badge roll). */
  --bu-press-ms: 304ms;
  --bu-press: linear(0, 0.0385, 0.1292, 0.2446, 0.3663, 0.4832, 0.5889, 0.6806, 0.7575, 0.8202, 0.87, 0.9087, 0.9381, 0.9598, 0.9756, 0.9866, 0.9941, 0.9989, 1.0019, 1.0035, 1.0042, 1.0043, 1.0041, 1.0037, 1.0031, 1.0026, 1.0021, 1.0017, 1.0013, 1);
  --bu-tabs-ms: 884ms;
  --bu-tabs: linear(0, 0.0513, 0.1617, 0.2896, 0.4141, 0.5255, 0.6208, 0.6998, 0.764, 0.8155, 0.8563, 0.8885, 0.9137, 0.9333, 0.9485, 0.9603, 0.9694, 0.9765, 0.9819, 0.9861, 0.9893, 0.9918, 0.9937, 0.9952, 0.9963, 0.9971, 0.9978, 0.9983, 0.9987, 1);
  --bu-tip-ms: 282ms;
  --bu-tip: linear(0, 0.0223, 0.0779, 0.1531, 0.2381, 0.326, 0.412, 0.4934, 0.5682, 0.6355, 0.6951, 0.7472, 0.7921, 0.8303, 0.8627, 0.8897, 0.9121, 0.9306, 0.9457, 0.9579, 0.9677, 0.9755, 0.9817, 0.9865, 0.9903, 0.9932, 0.9953, 0.997, 0.9982, 1);
  --bu-spring-y-ms: 540ms;
  --bu-spring-y: linear(0, 0.038, 0.128, 0.242, 0.361, 0.475, 0.578, 0.667, 0.743, 0.804, 0.854, 0.893, 0.923, 0.946, 0.963, 0.976, 0.985, 0.991, 0.995, 0.998, 1, 1.001, 1.001, 1.002, 1.002, 1.002, 1.001, 1.001, 1);
  /* Solved here: TextReveal y (k140 c26 m1.2), SPRING_LAYOUT, SPRING_PANEL, the badge's layout
     spring, and the Bouncy Accordion's four duration/bounce springs. */
  --bu-text-y-ms: 863ms;
  --bu-text-y: linear(0, 0.0421, 0.1363, 0.2512, 0.3681, 0.4772, 0.5737, 0.6567, 0.7262, 0.7833, 0.8295, 0.8668, 0.8963, 0.9196, 0.938, 0.9523, 0.9634, 0.9719, 0.9786, 0.9837, 0.9876, 0.9906, 0.9928, 0.9946, 0.9959, 0.9969, 0.9977, 0.9982, 0.9987, 1);
  --bu-layout-ms: 464ms;
  --bu-layout: linear(0, 0.0586, 0.1798, 0.3151, 0.4426, 0.5537, 0.6466, 0.7221, 0.7827, 0.8306, 0.8683, 0.8978, 0.9207, 0.9386, 0.9525, 0.9633, 0.9716, 0.978, 0.983, 0.9869, 0.9898, 0.9921, 0.9939, 0.9953, 0.9964, 0.9972, 0.9978, 0.9983, 0.9987, 1);
  --bu-mouse-ms: 321ms;
  --bu-mouse: linear(0, 0.0345, 0.1141, 0.2155, 0.322, 0.426, 0.5209, 0.6058, 0.6787, 0.741, 0.7929, 0.8354, 0.8703, 0.8982, 0.9207, 0.9385, 0.9526, 0.9636, 0.9723, 0.9789, 0.9841, 0.988, 0.991, 0.9933, 0.9951, 0.9964, 0.9973, 0.9981, 0.9986, 1);
  --bu-panel-ms: 572ms;
  --bu-panel: linear(0, 0.1009, 0.2664, 0.4177, 0.542, 0.6413, 0.719, 0.78, 0.8279, 0.8653, 0.8945, 0.9175, 0.9354, 0.9494, 0.9605, 0.969, 0.9758, 0.981, 0.9852, 0.9884, 0.9909, 0.9929, 0.9944, 0.9956, 0.9966, 0.9973, 0.9979, 0.9984, 0.9987, 1);
  --bu-badge-layout-ms: 356ms;
  --bu-badge-layout: linear(0, 0.0384, 0.1277, 0.2418, 0.3613, 0.4771, 0.5821, 0.6726, 0.7494, 0.8118, 0.8621, 0.9012, 0.9314, 0.954, 0.9704, 0.9823, 0.9905, 0.996, 0.9996, 1.0017, 1.0028, 1.0033, 1.0033, 1.0031, 1.0028, 1.0024, 1.002, 1.0016, 1.0013, 1);
  --bu-acc-row-ms: 550ms;
  --bu-acc-row: linear(0, 0.0593, 0.1989, 0.375, 0.5545, 0.7157, 0.849, 0.9495, 1.0182, 1.0597, 1.0794, 1.0831, 1.0763, 1.0637, 1.0489, 1.0341, 1.0211, 1.0106, 1.0028, 0.9976, 0.9945, 0.9932, 0.9931, 0.9938, 0.9949, 0.9962, 0.9974, 0.9984, 0.9993, 1);
  --bu-acc-open-ms: 580ms;
  --bu-acc-open: linear(0, 0.0514, 0.1734, 0.328, 0.4882, 0.6367, 0.7638, 0.8655, 0.9417, 0.9948, 1.0284, 1.0467, 1.0537, 1.0529, 1.0474, 1.0395, 1.0308, 1.0225, 1.0151, 1.0091, 1.0045, 1.0012, 0.999, 0.9978, 0.9972, 0.9971, 0.9973, 0.9977, 0.9982, 1);
  --bu-acc-close-ms: 460ms;
  --bu-acc-close: linear(0, 0.0457, 0.1534, 0.2913, 0.435, 0.5716, 0.6917, 0.7911, 0.8703, 0.93, 0.9724, 1.0011, 1.0185, 1.0278, 1.0312, 1.0307, 1.0278, 1.0236, 1.0191, 1.0147, 1.0108, 1.0075, 1.0048, 1.0027, 1.0012, 1.0002, 0.9996, 0.9992, 0.999, 1);
  --bu-acc-chev-ms: 420ms;
  --bu-acc-chev: linear(0, 0.0475, 0.1601, 0.3021, 0.4515, 0.5919, 0.7144, 0.8151, 0.8936, 0.9511, 0.9912, 1.0168, 1.0312, 1.0373, 1.0379, 1.0349, 1.0301, 1.0244, 1.0188, 1.0137, 1.0093, 1.0058, 1.0031, 1.0012, 0.9999, 0.9991, 0.9987, 0.9985, 0.9986, 1);
}
@supports not (transition-timing-function: linear(0, 1)) {
  :where(.mh) { --bu-press: cubic-bezier(0.314, 0.598, 0.082, 1.106); --bu-tabs: cubic-bezier(0.267, 0.573, 0.076, 1.052);
    --bu-tip: cubic-bezier(0.243, 0.197, 0.185, 1.055); --bu-spring-y: var(--bu-ease-out); --bu-text-y: var(--bu-ease-out);
    --bu-layout: var(--bu-ease-out); --bu-panel: var(--bu-ease-out); --bu-badge-layout: var(--bu-ease-out);
    --bu-acc-row: cubic-bezier(0.34, 1.36, 0.64, 1); --bu-acc-open: cubic-bezier(0.34, 1.3, 0.64, 1);
    --bu-acc-close: cubic-bezier(0.3, 1.15, 0.6, 1); --bu-acc-chev: cubic-bezier(0.34, 1.25, 0.64, 1); }
}

/* Scroll Animation: ScrollReveal (y 16px, blur 8px, 600ms EASE_OUT, 30% in view). Sibling
   blocks keep the export's 100ms steps. */
.js .reveal { opacity: 0; transform: translateY(16px); filter: blur(8px);
  transition: opacity 600ms var(--bu-ease-out), transform 600ms var(--bu-ease-out), filter 600ms var(--bu-ease-out); }
.js .reveal.visible { opacity: 1; transform: none; filter: none; }
.js .reveal-delay-1 { transition-delay: 100ms; }
.js .reveal-delay-2 { transition-delay: 200ms; }
.js .reveal-delay-3 { transition-delay: 300ms; }

/* Scroll Animation: ScrollProgress, a 2px bar on PROGRESS_SPRING (k120 c30 m0.6). landing.js
   runs the spring; it grows from the reading start. */
.scroll-progress { position: fixed; z-index: 70; inset: 0 0 auto; height: 2px; background: #0c1e40;
  transform: scaleX(var(--progress, 0)); transform-origin: right; pointer-events: none; }

/* Text Animation: TextReveal, word by word. Each word rises 40% on its spring, fades over
   700ms and unblurs from 12px over 900ms, 90ms after the last. The supporting line, actions and
   proof follow as ScrollReveals once the headline is under way. */
.hero-copy.visible h1 { animation: none; }
.tr-word { display: inline-block; white-space: pre; }
.js [data-text-reveal] .tr-word { opacity: 0; transform: translateY(40%); filter: blur(12px);
  transition: transform var(--bu-text-y-ms) var(--bu-text-y), opacity 700ms var(--bu-ease-out), filter 900ms var(--bu-ease-out);
  transition-delay: calc(var(--i) * 90ms); }
.js [data-text-reveal].tr-in .tr-word { opacity: 1; transform: none; filter: none; }
@keyframes bu-rise { from { opacity: 0; transform: translateY(16px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.hero-copy.visible > p { animation: bu-rise 600ms 350ms var(--bu-ease-out) both; }
.hero-copy.visible .hero-actions { animation: bu-rise 600ms 450ms var(--bu-ease-out) both; }

/* Shared Layout Background: one pill glides between nav links on SPRING_LAYOUT and arrives
   and leaves through a 6px blur (Motion's default 300ms tween). */
.desktop-nav { position: relative; gap: 6px; }
.desktop-nav a { position: relative; z-index: 1; padding-inline: 14px; border-radius: 16px; }
.nav-pill { position: absolute; z-index: 0; top: 0; left: 0; border-radius: 16px; background: rgba(12, 30, 64, .06);
  opacity: 0; filter: blur(6px); pointer-events: none;
  transition: transform var(--bu-layout-ms) var(--bu-layout), width var(--bu-layout-ms) var(--bu-layout), height var(--bu-layout-ms) var(--bu-layout),
    opacity 300ms var(--bu-tween), filter 300ms var(--bu-tween); }
.nav-pill.on { opacity: 1; filter: none; }
.nav-pill.jump { transition: opacity 300ms var(--bu-tween), filter 300ms var(--bu-tween); }

/* Tabs, variant A: one indicator glides on the tabs spring (k170 c30 m1.2). Width follows on
   the same spring: beUI snaps it from the physical left edge, which in Arabic is the trailing
   edge. On the preview chips a copy of the labels in white is clipped to the pill's rect, so
   the text changes colour at the pill's edge mid-glide. The chips have backgrounds of their own,
   so on them the clipped copy also paints the pill, above the chips, and the indicator only measures. A panel that appears rises 4px over
   180ms. A keyboard move places everything without travel. */
[data-glide] { position: relative; isolation: isolate; }
.glide-indicator { position: absolute; z-index: -1; top: 0; left: 0; pointer-events: none;
  transition: transform var(--bu-tabs-ms) var(--bu-tabs), width var(--bu-tabs-ms) var(--bu-tabs), height var(--bu-tabs-ms) var(--bu-tabs); }
.glide-indicator.jump, .bu-tabs-hi.jump { transition: none; }
.preview-tabs .glide-indicator { border-radius: 999px; background: #2f5875; }
.preview-tabs button { position: relative; transition: color 150ms var(--bu-colors), background-color 150ms var(--bu-colors), transform var(--bu-press-ms) var(--bu-press); }
.preview-tabs button::after { position: absolute; inset: -3px 0; content: ''; }
.preview-tabs.glide-ready button.selected { background: transparent; color: #2f5875; }
.bu-tabs-hi { position: absolute; z-index: 1; inset: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: inherit; pointer-events: none;
  background: #2f5875; clip-path: inset(0 100% 100% 0); transition: clip-path var(--bu-tabs-ms) var(--bu-tabs); }
.preview-tabs.glide-ready .glide-indicator { visibility: hidden; }
.mh .bu-tabs-hi button { background: transparent; color: #fff; box-shadow: none; }
.mh .bu-tabs-hi button.is-down { transform: scale(.97); }
.request-type-switcher .glide-indicator { border-radius: 9px; background: #fff; box-shadow: 0 5px 16px rgba(49, 69, 93, .1); }
.request-type-switcher.glide-ready button.active { background: transparent; box-shadow: none; }
.request-type-switcher button { transition: color 150ms var(--bu-colors), background-color 150ms var(--bu-colors), transform var(--bu-press-ms) var(--bu-press); }
@keyframes bu-tab-in { from { opacity: 0; transform: translateY(4px); } }
.mockup-screen, .request-panel, .bu-tab-in { animation: bu-tab-in 180ms var(--bu-ease-out); }
[data-instant] .mockup-screen, [data-instant] .bu-tab-in, .request-panel[data-instant] { animation: none; }

/* Button, variant A: a mouse-only 1.02 hover, and a press to 0.93 that springs back on
   SPRING_PRESS both ways (also for Enter and Space, as Motion's press gesture does). */
.marhela-button { transition: background-color 150ms var(--bu-colors), color 150ms var(--bu-colors), border-color 150ms var(--bu-colors),
  box-shadow 150ms var(--bu-colors), transform var(--bu-press-ms) var(--bu-press); }
@media (hover: hover) and (pointer: fine) { .marhela-button:hover { transform: scale(1.02); } }
.marhela-button:active, .marhela-button.is-pressed { transform: scale(.93); }
.marhela-button:hover svg { transform: none; }

/* Expanding Arrow Button (Animated CTA Buttons) on the two signup CTAs: a light tile at the
   reading start opens across the button on SPRING_LAYOUT while the label steps aside, and five
   dotted chevrons arrive 25ms apart, fading toward the direction they point. Mirrored for RTL.
   Its own press is 0.97, as in beUI, and it has no hover scale. */
.mh .marhela-button.cta-trail { position: relative; overflow: hidden; padding-inline: 58px 22px; }
.bu-xa-tile { position: absolute; z-index: 1; inset-block: 5px; inset-inline-start: 5px; width: 36px; overflow: hidden; border-radius: 9px;
  background: #fbfaf6; color: #0c1e40; transition: width var(--bu-layout-ms) var(--bu-layout); }
.bu-xa-rest, .bu-xa-trail { position: absolute; inset: 0; }
.bu-xa-rest { display: grid; place-items: center; transition: opacity 100ms var(--bu-ease-out); }
.bu-xa-trail { display: flex; align-items: center; justify-content: space-around; padding-inline: 10px; }
.bu-xa-trail > span { display: inline-grid; place-items: center; opacity: 0; transform: translateX(6px); color: rgba(12, 30, 64, var(--o));
  transition: opacity 180ms var(--bu-ease-out), transform 180ms var(--bu-ease-out); }
.bu-xa-chev { width: 10px; height: 14px; fill: currentColor; }
.cta-trail .cta-label { position: relative; z-index: 0; transition: opacity 120ms var(--bu-ease-out), transform 120ms var(--bu-ease-out); }
.cta-trail:focus-visible .bu-xa-tile { width: calc(100% - 10px); }
.cta-trail:focus-visible .bu-xa-rest { opacity: 0; }
.cta-trail:focus-visible .bu-xa-trail > span { opacity: 1; transform: none; transition-delay: calc(40ms + var(--i) * 25ms); }
.cta-trail:focus-visible .cta-label { opacity: 0; transform: translateX(-6px); }
@media (hover: hover) and (pointer: fine) {
  .marhela-button.cta-trail:hover { transform: none; }
  .cta-trail:hover .bu-xa-tile { width: calc(100% - 10px); }
  .cta-trail:hover .bu-xa-rest { opacity: 0; }
  .cta-trail:hover .bu-xa-trail > span { opacity: 1; transform: none; transition-delay: calc(40ms + var(--i) * 25ms); }
  .cta-trail:hover .cta-label { opacity: 0; transform: translateX(-6px); }
}
.marhela-button.cta-trail:active, .marhela-button.cta-trail.is-pressed { transform: scale(.97); }

/* Number Animation: AnimatedNumber, the count-up. The server renders the true figure; when
   60% of it is in view, landing.js counts the visible digits up from ٠ over 1.2s on EASE_OUT,
   on a fixed-width left-to-right island so nothing jitters, and keeps the figure for screen readers. */
.stat strong { direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: center; }
.stat strong > span[data-count] { display: inline-flex; }
.stat strong .bu-count-row { display: inline-block; direction: ltr; unicode-bidi: isolate; white-space: nowrap; text-align: end; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Bouncy Accordion (the FAQ): single-open, and the open answer separates into its own rounded
   card. Rows glide into their new places and corners reshape on the row spring (0.55s,
   bounce .38); the answer's height opens on 0.58s/.32 and closes on 0.46s/.26; the text fades
   over 180ms; the chevron turns on 0.42s/.28. landing.js marks where each group starts and ends. */
.faq-list { display: flex; flex-direction: column; border-top: 0; }
.mh .faq-item { overflow: hidden; margin-top: 0; border-bottom: 0; border-radius: 0; background: #fff;
  box-shadow: inset 1px 0 0 #e3e8ee, inset -1px 0 0 #e3e8ee, inset 0 1px 0 #eef1f4;
  transition: margin-top var(--bu-acc-row-ms) var(--bu-acc-row), border-radius var(--bu-acc-row-ms) var(--bu-acc-row); }
.mh .faq-item[data-starts] { border-start-start-radius: 28px; border-start-end-radius: 28px; box-shadow: inset 1px 0 0 #e3e8ee, inset -1px 0 0 #e3e8ee, inset 0 1px 0 #e3e8ee; }
.mh .faq-item[data-ends] { border-end-start-radius: 28px; border-end-end-radius: 28px; box-shadow: inset 1px 0 0 #e3e8ee, inset -1px 0 0 #e3e8ee, inset 0 1px 0 #eef1f4, inset 0 -1px 0 #e3e8ee; }
.mh .faq-item[data-starts][data-ends] { box-shadow: inset 1px 0 0 #e3e8ee, inset -1px 0 0 #e3e8ee, inset 0 1px 0 #e3e8ee, inset 0 -1px 0 #e3e8ee; }
.mh .faq-item[data-gap] { margin-top: 12px; }
.mh .faq-item button { min-height: 54px; gap: 16px; padding: 14px 20px; }
.mh .faq-item button i { width: 24px; height: 24px; border: 0; border-radius: 0; background: none; color: #56657a; transform: rotate(0deg);
  transition: transform var(--bu-acc-chev-ms) var(--bu-acc-chev); }
.mh .faq-item[data-open="true"] button i { background: none; color: #56657a; transform: rotate(180deg); }
.mh .faq-item button i .lucide { width: 16px; height: 16px; }
.faq-answer { overflow: hidden; height: 0; transition: height var(--bu-acc-close-ms) var(--bu-acc-close); }
.faq-item[data-open="true"] .faq-answer { height: auto; transition: height var(--bu-acc-open-ms) var(--bu-acc-open); }
.faq-answer.is-instant, .faq-item.is-instant, .faq-item.is-instant button i { transition: none !important; }
.faq-answer-inner { padding: 0 20px 20px; opacity: 0; transition: opacity 180ms var(--bu-ease-out); }
.faq-item[data-open="true"] .faq-answer-inner { opacity: 1; }
.faq-answer p { padding-bottom: 0; }
html:not(.js) .faq-answer { height: auto; }
html:not(.js) .faq-answer-inner { opacity: 1; }
html:not(.js) .mh .faq-item:first-child { border-start-start-radius: 28px; border-start-end-radius: 28px; }
html:not(.js) .mh .faq-item:last-child { border-end-start-radius: 28px; border-end-end-radius: 28px; }

/* Tooltip, variant A: 120ms before the first opens, none within 300ms of one closing. It
   enters from 8px below at 0.9 through a 5px blur (transform on the tooltip spring, opacity
   140ms, blur 180ms) and leaves in 120ms toward 4.8px, 0.94 and 3px. Positioned by landing.js
   because its triggers sit inside clipped sections. */
.tip-trigger { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: 0; padding: 0 4px; border-radius: 8px; color: inherit; cursor: help; }
.tip-trigger b { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tip-trigger:focus-visible { outline: 2px solid #dfb26c; outline-offset: 2px; }
.tip { position: fixed; z-index: 90; top: 0; left: 0; max-width: 260px; padding: 8px 11px; border-radius: 9px; background: #0c1e40; color: #fff;
  font-size: 13px; font-weight: 500; line-height: 1.7; text-align: start; box-shadow: 0 10px 15px -3px rgba(12, 30, 64, .2), 0 4px 6px -4px rgba(12, 30, 64, .2); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, calc(-100% + 8px)) scale(.9); transform-origin: 50% 100%; filter: blur(5px); transition: none; }
.tip[data-state="open"] { opacity: 1; visibility: visible; transform: translate(-50%, -100%) scale(1); filter: blur(0);
  transition: transform var(--bu-tip-ms) var(--bu-tip), opacity 140ms var(--bu-ease-out), filter 180ms var(--bu-ease-out), visibility 0s; }
.tip[data-state="closing"] { opacity: 0; visibility: hidden; transform: translate(-50%, calc(-100% + 4.8px)) scale(.94); filter: blur(3px);
  transition: transform 120ms var(--bu-ease-out), opacity 120ms var(--bu-ease-out), filter 120ms var(--bu-ease-out), visibility 0s linear 120ms; }
.quote-aside .tip-trigger { justify-content: flex-start; padding: 0; color: #e5bd7b; }

/* Animated Badge: the preview window's title. On a change the old label rolls up and out
   through a blur in 200ms while the new one rises from 85% below on the badge's y spring
   (fade 300ms, blur 420ms), and the pill's width follows on its layout spring. Nothing moves
   on first paint. */
.badge-roll { position: relative; display: inline-flex; overflow: hidden; height: 1.6em; align-items: center; padding-inline: 8px;
  border-radius: 999px; background: #f1f4f8; color: #3d4a63; vertical-align: middle; white-space: nowrap; }
.badge-roll > span { display: inline-block; white-space: nowrap; }
.bu-roll-in { animation: bu-in-y var(--bu-spring-y-ms) var(--bu-spring-y) both, bu-in-fade 300ms var(--bu-ease-out) both, bu-in-blur 420ms var(--bu-ease-out) both; }
@keyframes bu-in-y { from { translate: 0 85%; } }
@keyframes bu-in-fade { from { opacity: .76; } }
@keyframes bu-in-blur { from { filter: blur(6px); } }
.badge-roll > .bu-roll-out { position: absolute; inset-inline-start: 8px; pointer-events: none; animation: bu-out-label 200ms var(--bu-ease-out) forwards; }
@keyframes bu-out-label { to { opacity: .5; translate: 0 -85%; filter: blur(6px); } }

/* Drawer: the phone menu, a 20rem panel from the right on SPRING_PANEL both ways, over a
   black 40% scrim with an 8px blur that fades in 250ms. */
.mobile-menu .icon-close { display: none !important; }
.mobile-menu[aria-expanded="true"] .icon-open { display: block; }
.drawer-backdrop { position: fixed; z-index: 80; inset: 0; width: 100%; border: 0; background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; cursor: default; transition: opacity 250ms var(--bu-ease-out); }
.drawer-backdrop.open { opacity: 1; }
.mh .mobile-panel { position: fixed; z-index: 81; inset-block: 0; inset-inline-start: 0; display: flex; flex-direction: column; gap: 6px;
  width: 20rem; max-width: 85vw; height: 100dvh; margin: 0; padding: 14px 14px max(20px, env(safe-area-inset-bottom));
  border: 0; border-inline-end: 1px solid #e8ecf2; border-radius: 0; background: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); overflow-y: auto;
  transform: translateX(100%); transition: transform var(--bu-panel-ms) var(--bu-panel); }
.mh .mobile-panel.open { transform: translateX(0); }
.mh .mobile-panel[hidden] { display: none !important; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 14px; border-bottom: 1px solid #e8ecf2; margin-bottom: 6px; }
.drawer-close { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; color: #3f4e63; }
.drawer-close .lucide { width: 20px; height: 20px; }
.mh .mobile-panel nav a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; color: #3f4e63; font-size: 16px; font-weight: 600; }
.mh .mobile-panel nav a:active { background: #eef1f5; }
.mh .mobile-panel .mobile-demo { margin-top: auto; width: 100%; }
.drawer-close:focus-visible, .mh .mobile-panel nav a:focus-visible { outline: 2px solid #dfb26c; outline-offset: 2px; }
@media (min-width: 768px) { .mh .mobile-panel, .drawer-backdrop { display: none !important; } }

/* Marquee: the office logos under the hero line (owner's pick B, 2026-09-10), with beUI's
   12% / 88% edge fade. landing.js eases it to a stop under the pointer. */
.hero-inner > .lmB { width: min(760px, 100%); margin-top: 28px; padding: 0; background: transparent; }
.lm { border-block-color: rgba(12, 30, 64, .08); }
.lm-view { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
@media (max-width: 900px) { .hero-inner > .lmB { order: 1; } }
@media (max-width: 767px) { .hero-inner > .lmB { margin-top: 20px; } .lm-group li { height: 52px; } .lm-office b { font-size: 18px; } }

/* The product window is the thing being read: it does not float. */
.hero-product.visible .product-window, .showcase-product.visible .product-window { animation: none; }
.workflow-step, .contact-card { transition: transform var(--bu-layout-ms) var(--bu-layout), box-shadow 300ms var(--bu-tween); }

/* Reduced motion, as beUI does it: the information still arrives, only the travel is dropped. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js [data-text-reveal] .tr-word { transform: none; filter: none; transition: opacity 250ms var(--bu-ease-out); transition-delay: 0s; }
  .nav-pill, .glide-indicator, .bu-tabs-hi, .preview-tabs button, .request-type-switcher button, .bu-xa-tile, .bu-xa-rest, .bu-xa-trail > span, .cta-trail .cta-label,
  .mh .faq-item, .mh .faq-item button i, .faq-answer, .faq-item[data-open="true"] .faq-answer { transition: none !important; }
  .faq-answer-inner { transition: opacity 180ms var(--bu-ease-out); }
  .marhela-button:hover, .marhela-button:active, .marhela-button.is-pressed, .marhela-button.cta-trail:active { transform: none; }
  .tip, .tip[data-state] { transform: translate(-50%, -100%); filter: none; }
  .tip[data-state="open"] { transition: opacity 140ms var(--bu-ease-out), visibility 0s; }
  .tip[data-state="closing"] { transition: opacity 100ms var(--bu-ease-out), visibility 0s linear 100ms; }
  .bu-roll-in { animation: none; }
  .badge-roll > .bu-roll-out { display: none; }
  .mh .mobile-panel { transform: none; opacity: 0; transition: opacity 200ms var(--bu-ease-out); }
  .mh .mobile-panel.open { opacity: 1; }
}

/* ======================================================================================
   21st.dev layer (2026-09-14): the owner's three picks from the 21st.dev lab, ported from
   each component's MIT source to plain CSS and JS, in the page's own copy and palette.
   ====================================================================================== */

/* Hero background · Magic UI "Flickering Grid" (github.com/magicuidesign/magicui, MIT).
   4px navy squares on a 10px pitch; each frame a square re-rolls its opacity with probability
   0.3 x dt, up to 0.16. Drawn by landing.js; it sleeps when the hero is off screen. */
.hero-flicker { position: absolute; z-index: 0; inset: 0 0 auto; height: min(1000px, 100%); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, #000 20%, transparent 75%); }
.hero-flicker canvas { display: block; }
.hero-inner { z-index: 1; }

/* Features · Magic UI "Bento Grid" (MIT). Cards on a 22rem row grid with a small scene behind
   each; on a mouse hover the text lifts 40px, the icon shrinks to 0.75 and a link rises into the
   freed space, all on 300ms. On touch the link is simply there. */
.mub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 22rem; gap: 16px; margin-top: 60px; }
.mub-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 0 2px 4px rgba(0, 0, 0, .05), 0 12px 24px rgba(0, 0, 0, .05); }
.mub-card.s2 { grid-column: span 2; }
.mub-card.s3 { grid-column: span 3; }
.mub-bg { position: absolute; inset: 0; overflow: hidden; }
.mub-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding: 18px 20px; pointer-events: none;
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1); }
.mub-ico { width: 44px; height: 44px; color: #0c1e40; transform-origin: right center; transition: transform 300ms cubic-bezier(.4, 0, .2, 1); }
.mub-body h3 { margin: 0; color: #0c1e40; font-size: 21px; font-weight: 700; }
.mub-body p { max-width: 34rem; margin: 0; color: #56657a; font-size: 15px; line-height: 1.8; }
.mub-cta { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; display: flex; padding: 14px 20px; opacity: 0; transform: translateY(40px);
  transition: opacity 300ms cubic-bezier(.4, 0, .2, 1), transform 300ms cubic-bezier(.4, 0, .2, 1); }
.mub-cta a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #0c1e40; font-size: 14px; font-weight: 700; text-decoration: none; }
.mub-cta a:focus-visible { outline: 2px solid #dfb26c; outline-offset: 2px; border-radius: 6px; }
.mub-cta svg { width: 16px; height: 16px; }
.mub-tint { position: absolute; inset: 0; pointer-events: none; transition: background-color 300ms cubic-bezier(.4, 0, .2, 1); }
@media (hover: hover) and (pointer: fine) {
  .mub-card:hover .mub-body, .mub-card:focus-within .mub-body { transform: translateY(-40px); }
  .mub-card:hover .mub-ico, .mub-card:focus-within .mub-ico { transform: scale(.75); }
  .mub-card:hover .mub-cta, .mub-card:focus-within .mub-cta { opacity: 1; transform: none; }
  .mub-card:hover .mub-tint { background: rgba(0, 0, 0, .03); }
}
@media (hover: none), (pointer: coarse), (max-width: 900px) { .mub-cta { position: static; opacity: 1; transform: none; padding-top: 0; } }
.mub-bg:has(.mub-files) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mub-files { position: absolute; inset: 18px 0 auto; display: flex; gap: 14px; width: max-content; animation: mub-marquee 40s linear infinite;
  -webkit-mask-image: linear-gradient(to top, transparent 5%, #000 60%); mask-image: linear-gradient(to top, transparent 5%, #000 60%); }
@keyframes mub-marquee { to { transform: translateX(50%); } }
.mub-file { width: 150px; padding: 14px; border: 1px solid rgba(12, 30, 64, .1); border-radius: 12px; background: rgba(12, 30, 64, .02); filter: blur(1px); transform: rotate(-1deg);
  transition: filter 300ms ease-out, transform 300ms ease-out; }
.mub-card:hover .mub-file { filter: none; transform: none; }
.mub-file b { display: block; color: #0c1e40; font-size: 14px; }
.mub-file small { color: #56657a; font-size: 12px; }
.mub-notes { position: absolute; inset: 16px 16px auto; display: flex; flex-direction: column; gap: 10px; transition: transform 300ms ease-out;
  -webkit-mask-image: linear-gradient(to top, transparent 10%, #000 70%); mask-image: linear-gradient(to top, transparent 10%, #000 70%); }
.mub-card:hover .mub-notes { transform: scale(1.03); }
.mub-note { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 0 2px 4px rgba(0, 0, 0, .05), 0 12px 24px rgba(0, 0, 0, .05); }
.js .mub-note { opacity: 0; }
.js .visible .mub-note { opacity: 1; animation: mub-note-in 600ms cubic-bezier(.34, 1.36, .64, 1) both; animation-delay: calc(400ms + var(--i) * 450ms); }
@keyframes mub-note-in { from { opacity: 0; transform: scale(.9) translateY(-12px); } }
.mub-note i { display: grid; flex: none; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #e8eef7; color: #0c1e40; }
.mub-note i svg { width: 16px; height: 16px; }
.mub-note b { display: block; color: #0c1e40; font-size: 13px; }
.mub-note small { color: #56657a; font-size: 12px; }
.mub-rail { position: absolute; inset: 26px 20px auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 60%); mask-image: linear-gradient(to top, transparent 0%, #000 60%); }
.mub-rail span { padding: 6px 12px; border: 1px solid #dbe2ec; border-radius: 999px; background: #f8fafc; color: #4f5d6c; font-size: 13px; white-space: nowrap; }
.mub-rail span.on { border-color: #0c1e40; background: #0c1e40; color: #fff; }
@media (max-width: 900px) {
  .mub { grid-template-columns: 1fr; grid-auto-rows: auto; margin-top: 40px; }
  .mub-card.s2, .mub-card.s3 { grid-column: auto; }
  .mub-card { min-height: 22rem; }
  .mub-card:has(.mub-notes) { min-height: 30rem; }
  .mub-card:has(.mub-rail) { min-height: 27rem; }
}

/* Final call to action · Magic UI's own site CTA (apps/www/components/sections/cta.tsx, MIT).
   A band between hairlines; rows of the page's own icons drift behind in opposite directions and
   fade to white; a glass tile holds the mark; an outline pill whose chevron steps on hover. */
.muc-section { padding: 40px 0 110px; background: #fff; }
.muc { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: center; padding: 72px 16px; border-block: 1px solid #e6ebf1; background: #fff; }
.muc-rows { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; transform: rotate(-8deg) scale(1.25); }
.muc-row { display: flex; gap: 16px; width: max-content; animation: muc-drift 40s linear infinite; }
.muc-row.r { animation-direction: reverse; }
@keyframes muc-drift { to { transform: translateX(50%); } }
.muc-tile { display: grid; flex: none; width: 88px; height: 88px; place-items: center; border: 1px solid #e6ebf1; border-radius: 22px; background: #fff; color: #0c1e40; box-shadow: 0 2px 8px rgba(12, 30, 64, .05); }
.muc-tile svg { width: 38px; height: 38px; opacity: .7; }
.muc-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, .15), #fff 70%); }
.muc-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.muc-mark { display: grid; width: 128px; height: 128px; place-items: center; border: 1px solid rgba(12, 30, 64, .1); border-radius: 32px; background: rgba(255, 255, 255, .35);
  box-shadow: 0 25px 50px -12px rgba(12, 30, 64, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.muc-mark img { width: 84px; height: auto; }
.muc h2 { margin: 18px 0 0; color: #0c1e40; font-size: clamp(32px, 4vw, 48px); font-weight: 800; line-height: 1.3; }
.muc p { max-width: 520px; margin: 8px 0 0; color: #4f5f6c; font-size: 17px; line-height: 1.9; }
.muc-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; margin-top: 20px; padding: 0 24px; border: 1px solid #cfd6e0; border-radius: 32px; background: #fff;
  color: #0c1e40; font-size: 15px; font-weight: 700; text-decoration: none;
  transition: background-color 150ms var(--bu-colors), transform var(--bu-press-ms) var(--bu-press); }
.muc-pill svg { width: 16px; height: 16px; transition: transform 300ms ease-out; }
.muc-pill:focus-visible { outline: 2px solid #dfb26c; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .muc-pill:hover { background: #f5f7fa; transform: scale(1.02); } .muc-pill:hover svg { transform: translateX(-4px); } }
.muc-pill:active { transform: scale(.93); }
@media (max-width: 767px) { .muc-section { padding: 20px 0 70px; } .muc { padding: 56px 16px; } .muc-tile { width: 72px; height: 72px; border-radius: 18px; } .muc-tile svg { width: 30px; height: 30px; } }

@media (prefers-reduced-motion: reduce) {
  .mub-files, .muc-row { animation: none; }
  .js .visible .mub-note { animation: none; }
  .mub-body, .mub-ico, .mub-cta, .mub-notes, .mub-file, .muc-pill, .muc-pill svg { transition: none; }
  .muc-pill:active { transform: none; }
}

/* ======================================================================================
   better-ui pass (github.com/jakubkrehel/skills, better-ui; 2026-09-14). Surfaces, icons and
   press feedback, applied where they do not overrule a pick the owner made by pixels (the beUI
   0.93 press on the main buttons stays). The product mock keeps its borders: it depicts the
   office app, whose panels are structure, not elevation.
   ====================================================================================== */
:where(.mh) {
  --shadow-border: 0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px -1px oklch(0 0 0 / 0.06), 0 2px 4px 0 oklch(0 0 0 / 0.04);
  --shadow-border-hover: 0 0 0 1px oklch(0 0 0 / 0.08), 0 1px 2px -1px oklch(0 0 0 / 0.08), 0 2px 4px 0 oklch(0 0 0 / 0.06);
}

/* Shadows for elevation, borders for structure. These were full borders doing the job of depth;
   the border stays as a transparent 1px so nothing inside moves. */
.mh .button-secondary, .mh .muc-pill, .mh .mobile-menu, .mh .mub-file, .mh .mub-rail span:not(.on), .mh .request-type-switcher {
  border-color: transparent; box-shadow: var(--shadow-border); }
@media (hover: hover) and (pointer: fine) {
  .mh .button-secondary:hover, .mh .muc-pill:hover, .mh .mobile-menu:hover { border-color: transparent; box-shadow: var(--shadow-border-hover); }
}
.mh .muc-tile, .mh .muc-mark { border-color: transparent; }
.mh .muc-tile { box-shadow: var(--shadow-border), 0 2px 8px rgba(12, 30, 64, .05); }
.mh .muc-mark { box-shadow: var(--shadow-border), 0 25px 50px -12px rgba(12, 30, 64, .25); }
.mh .request-flow, .mh .request-form-card { border-color: transparent; box-shadow: var(--shadow-border), 0 16px 42px rgba(63, 78, 105, .07); }
.mh .product-window { border-color: transparent; box-shadow: 0 0 0 1px oklch(0 0 0 / 0.08), 0 35px 90px rgba(55, 102, 143, .20), 0 5px 16px rgba(55, 102, 143, .10); }
.mh .button-secondary, .mh .muc-pill, .mh .mobile-menu {
  transition: background-color 150ms var(--bu-colors), color 150ms var(--bu-colors), box-shadow 150ms ease-out, transform var(--bu-press-ms) var(--bu-press), scale 150ms ease-out; }

/* Concentric radius: outer = inner + inset. The signup tile sits 6px inside a 12px button; the
   request-type pill sits 7px (5px on the phone) inside its track. */
.mh .bu-xa-tile { border-radius: 6px; }
.mh .request-type-switcher { border-radius: 16px; }
@media (max-width: 767px) { .mh .request-type-switcher { border-radius: 14px; } }

/* Optical alignment: a trailing icon makes symmetric padding look lopsided, so its side
   (inline-end, the left in Arabic) takes 2px less. */
.mh .showcase-cta { padding-inline: 21px 19px; }
.mh .muc-pill { padding-inline: 24px 22px; }
.mh .hero-actions a:not(.marhela-button) { padding-inline: 10px 8px; }

/* Icon stroke matches the weight of the text beside it: 2.5 next to bold, 1.5 next to regular,
   and the large bento icons draw at 1.5 so their rendered stroke sits with the bold heading. */
.mh .mub-cta .lucide, .mh .muc-pill .lucide, .mh .faq-intro > a .lucide, .mh .request-form-top .lucide { stroke-width: 2.5; }
.mh .request-form-footer .lucide, .mh .mub-ico { stroke-width: 1.5; }

/* Scale on press: 0.96 on the controls the beUI pick does not cover, on the `scale` property so
   it composes with any transform and releases mid-press without a jump. */
.mh .preview-tabs button:active, .mh .request-type-switcher button:active, .mh .mobile-menu:active { transform: none; }
.mh .preview-tabs button, .mh .request-type-switcher button, .mh .faq-item button, .mh .drawer-close, .mh .tip-trigger { transition-property: color, background-color, scale; transition-duration: 150ms; transition-timing-function: ease-out; }
.mh .preview-tabs button:active, .mh .request-type-switcher button:active, .mh .faq-item button:active,
.mh .drawer-close:active, .mh .tip-trigger:active, .mh .mobile-menu:active, .mh .bu-tabs-hi button.is-down { scale: .96; }
.mh .bu-tabs-hi button.is-down { transform: none; }
.mh .bu-tabs-hi button { transition: scale 150ms ease-out; }

/* Contextual icon: the menu button's bars and cross cross-fade (scale 0.25, opacity, 4px blur,
   300ms on cubic-bezier(0.2, 0, 0, 1)) instead of swapping with display. Both stay in the DOM. */
.mh .mobile-menu { position: relative; }
.mh .mobile-menu .icon-open, .mh .mobile-menu .icon-close, .mh .mobile-menu[aria-expanded="true"] .icon-open, .mh .mobile-menu[aria-expanded="true"] .icon-close {
  display: block !important; transition-property: opacity, filter, scale; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
.mh .mobile-menu .icon-close { position: absolute; inset: 0; margin: auto; opacity: 0; scale: .25; filter: blur(4px); }
.mh .mobile-menu[aria-expanded="true"] .icon-close { opacity: 1; scale: 1; filter: blur(0); }
.mh .mobile-menu[aria-expanded="true"] .icon-open { opacity: 0; scale: .25; filter: blur(4px); }

/* Motion restraint: hovers people pass over many times answer in 150ms or less, and a hover
   never replays a keyframe entrance. */
.mh .desktop-nav a, .mh .login-link, .mh .hero-actions a:not(.marhela-button), .mh .faq-intro > a, .mh .footer a { transition: color 150ms ease-out; }
.mh .lm-group li { transition: filter 150ms ease-out, opacity 150ms ease-out; }
@media (hover: hover) and (pointer: fine) { .mh .workflow-step:hover .step-top > span { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .mh .mobile-menu .icon-open, .mh .mobile-menu .icon-close { transition: opacity 150ms ease-out; scale: 1 !important; filter: none !important; }
  .mh .preview-tabs button:active, .mh .request-type-switcher button:active, .mh .faq-item button:active, .mh .drawer-close:active, .mh .tip-trigger:active, .mh .mobile-menu:active, .mh .bu-tabs-hi button.is-down { scale: 1; }
}

/* ======================================================================================
   Dual mode (2026-09-14). Light is the page the owner approved by pixels, so its literals stay
   where they are; dark is one layer of tokens over it, and they are the office app's own cockpit
   palette (appplane/static/css/app.css, the dark :root): the site and the product are the same
   room with the lights down. Navy keeps its job as the band colour; the accent that sits on it
   inverts to light ink with a navy glyph, as it does inside the app. Every text pair below was
   measured in the rendered page and clears WCAG AA. New colour work adds both themes.
   ====================================================================================== */
:where(.mh) { --flicker-rgb: 12, 30, 64; --flicker-max: .16; }
html[data-theme="dark"], html[data-theme="dark"] body { background: #0a1224; color-scheme: dark; }
[data-theme="dark"] .mh {
  --bg: #0a1224; --bg-alt: #0d1629; --surface: #101a30; --surface-2: #17223b; --line: #1f2b45; --line-2: #2a3857;
  --ink: #e8edf7; --ink-2: #aab4c8; --ink-3: #8a95ab; --accent: #e8edf7; --on-accent: #0c1e40;
  --blue: #93b7de; --gold: #e5bd7b; --ok: #5cc97a; --warn: #f2c94c; --info: #7eb0ff; --danger: #ff7a70;
  --ok-soft: #12291c; --warn-soft: #3a3218; --info-soft: #16284a;
  --shadow-border: 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px -1px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);
  --shadow-border-hover: 0 0 0 1px rgba(255, 255, 255, .14), 0 1px 2px -1px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .4);
  --flicker-rgb: 147, 183, 222; --flicker-max: .11;
  color: var(--ink);
}

/* Theme Toggle (beUI): a 44px square in the nav, beside the menu on the phone. The moon and the
   sun share the slot and cross-fade the way the menu icon does (better-ui contextual icon). */
.theme-toggle { position: relative; display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 12px; color: #3f4e63; box-shadow: var(--shadow-border);
  transition: color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out, scale 150ms ease-out; }
.theme-toggle[hidden] { display: none !important; }
.theme-toggle .lucide { grid-area: 1 / 1; width: 19px; height: 19px; transition: opacity 300ms cubic-bezier(.2, 0, 0, 1), scale 300ms cubic-bezier(.2, 0, 0, 1), filter 300ms cubic-bezier(.2, 0, 0, 1); }
.theme-toggle .icon-sun, [data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; scale: .25; filter: blur(4px); }
[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; scale: 1; filter: blur(0); }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { color: #0c1e40; box-shadow: var(--shadow-border-hover); } }
.theme-toggle:active { scale: .96; }
.theme-toggle:focus-visible { outline: 2px solid #dfb26c; outline-offset: 3px; }
.theme-toggle-phone { display: none; }
@media (max-width: 767px) { .mh .theme-toggle-phone { display: grid; margin-inline: auto 8px; } }

/* The switch itself: the new theme opens as a circle from the button through an 8px blur
   (beUI circle-blur, 700ms, Material standard curve). The old page stays still underneath. */
html[data-vt="theme"]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html[data-vt="theme"]::view-transition-new(root) { mix-blend-mode: normal; animation: mh-theme-reveal 700ms cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes mh-theme-reveal {
  from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 0%)); filter: blur(8px); }
  to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 0%)); filter: blur(0); }
}

/* The surprise: the rail walks the real journey. The stage list is generated from stages.py, so
   when landing.js walks it, stage by stage, the fill line and the filled marker travel through
   exactly the order the office app enforces. The line fills on the layout spring. */
.stage-list::after { position: absolute; top: 26px; right: 16px; width: 3px; height: calc(100% - 52px); border-radius: 2px; background: #0c1e40; content: ""; pointer-events: none;
  transform: scaleY(var(--rail-p, 0)); transform-origin: top; transition: transform var(--bu-layout-ms) var(--bu-layout); }
.stage-list.is-quick::after { transition: transform 200ms var(--bu-ease-out); }
.stage-item { transition: color 200ms var(--bu-ease-out); }
.stage-item::before { transition: background-color 200ms var(--bu-ease-out), border-color 200ms var(--bu-ease-out), color 200ms var(--bu-ease-out), box-shadow 300ms var(--bu-ease-out); }
.stage-item.done::before { border-color: #0c1e40; color: #0c1e40; }
.stage-item.done { color: #3f4e63; }
@media (max-width: 767px) { .stage-list::after { top: 22px; right: 13px; height: calc(100% - 44px); } }

/* The headline's second line ran into the first: at 1.09 Cairo's ascenders touched the line
   above and the underline under «مرحلة» crossed «واضحة». */
.hero h1 { line-height: 1.22; }
.hero h1 em::after { bottom: .2em; }
@media (max-width: 767px) { .hero h1 { line-height: 1.26; } }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle .lucide { transition: opacity 150ms ease-out; scale: 1 !important; filter: none !important; }
  .theme-toggle:active { scale: 1; }
  html[data-vt="theme"]::view-transition-new(root) { animation: none; }
  .stage-list::after, .stage-item, .stage-item::before { transition: none; }
}

/* ---- Dark: the page ---- */
[data-theme="dark"] .mh .theme-toggle { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .theme-toggle:hover { color: var(--ink); } }
[data-theme="dark"] .mh .nav-inner { border-bottom-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .mh .brand-lockup, [data-theme="dark"] .mh .brand-mark-sm, [data-theme="dark"] .mh .muc-mark img { filter: brightness(0) invert(1); }
[data-theme="dark"] .mh .desktop-nav a, [data-theme="dark"] .mh .login-link { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .desktop-nav a:hover, [data-theme="dark"] .mh .login-link:hover { color: var(--ink); } }
[data-theme="dark"] .mh .nav-pill { background: rgba(255, 255, 255, .07); }
[data-theme="dark"] .mh .scroll-progress { background: var(--blue); }
[data-theme="dark"] .mh .button-primary, [data-theme="dark"] .mh .hero-actions a.marhela-button { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 22px rgba(0, 0, 0, .35); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .button-primary:hover, [data-theme="dark"] .mh .hero-actions a.marhela-button:hover { background: #fff; color: var(--on-accent); box-shadow: 0 12px 27px rgba(0, 0, 0, .45); } }
[data-theme="dark"] .mh .bu-xa-tile { background: #0c1e40; color: var(--ink); }
[data-theme="dark"] .mh .bu-xa-trail > span { color: rgba(232, 237, 247, var(--o)); }
[data-theme="dark"] .mh .button-secondary { background: rgba(255, 255, 255, .03); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .button-secondary:hover { background: rgba(255, 255, 255, .07); } }
[data-theme="dark"] .mh .mobile-menu { color: var(--ink-2); }
[data-theme="dark"] .mh .mobile-panel { border-inline-end-color: var(--line); background: var(--surface); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); }
[data-theme="dark"] .mh .drawer-head { border-bottom-color: var(--line); }
[data-theme="dark"] .mh .drawer-close, [data-theme="dark"] .mh .mobile-panel nav a { color: var(--ink-2); }
[data-theme="dark"] .mh .mobile-panel nav a:active { background: var(--surface-2); }
[data-theme="dark"] .mh .drawer-backdrop { background: rgba(0, 0, 0, .55); }

[data-theme="dark"] .mh .hero { background: radial-gradient(ellipse 65% 42% at 50% 86%, rgba(57, 113, 159, .30), transparent 72%), linear-gradient(180deg, #0a1224 0%, #0b1428 45%, #0e1a33 100%); }
[data-theme="dark"] .mh .hero::before { opacity: .04; }
[data-theme="dark"] .mh .hero::after { background: linear-gradient(180deg, transparent, rgba(57, 113, 159, .14)); }
[data-theme="dark"] .mh .preview-orbit { border-color: rgba(147, 183, 222, .12); }
[data-theme="dark"] .mh .hero h1, [data-theme="dark"] .mh .hero h1 strong { color: var(--ink); }
[data-theme="dark"] .mh .hero h1 em { color: var(--blue); }
[data-theme="dark"] .mh .hero-copy > p, [data-theme="dark"] .mh .hero-actions a:not(.marhela-button) { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .hero-actions a:not(.marhela-button):hover { color: var(--gold); } }
[data-theme="dark"] .tip { background: #e8edf7; color: #0c1e40; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .5), 0 4px 6px -4px rgba(0, 0, 0, .5); }
[data-theme="dark"] .mh .hero-bottom { border-top-color: var(--line); background: rgba(10, 18, 36, .72); color: var(--ink-3); }
[data-theme="dark"] .mh .lm { border-block-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .mh .lm-label { color: var(--ink-3); }
[data-theme="dark"] .mh .lm-label b, [data-theme="dark"] .mh .lm-office { color: var(--ink); }
[data-theme="dark"] .mh .lm-office small { color: var(--ink-3); }
[data-theme="dark"] .mh .lm-group li { filter: grayscale(1) brightness(1.7); opacity: .7; }
[data-theme="dark"] .mh .lm-sv b { color: #e7a8b7; }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .lm:hover .lm-group li { filter: none; opacity: 1; } }

[data-theme="dark"] .mh .request-stages-section, [data-theme="dark"] .mh .showcase-section { background: var(--bg-alt); }
[data-theme="dark"] .mh .request-stages-grid-lines, [data-theme="dark"] .mh .showcase-grid-lines { background-image: linear-gradient(to right, rgba(147, 183, 222, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(147, 183, 222, .05) 1px, transparent 1px); }
[data-theme="dark"] .mh .section-kicker { color: var(--gold); }
[data-theme="dark"] .mh .section-heading h2, [data-theme="dark"] .mh .showcase-copy h2, [data-theme="dark"] .mh .workflow-head h2, [data-theme="dark"] .mh .faq-intro h2, [data-theme="dark"] .mh .muc h2 { color: var(--ink); }
[data-theme="dark"] .mh .section-heading h2 span, [data-theme="dark"] .mh .workflow-head h2 span, [data-theme="dark"] .mh .faq-intro h2 span { color: #8ea3bd; }
[data-theme="dark"] .mh .section-heading p, [data-theme="dark"] .mh .showcase-copy > p, [data-theme="dark"] .mh .workflow-head > p, [data-theme="dark"] .mh .faq-intro > p, [data-theme="dark"] .mh .muc p { color: var(--ink-2); }
[data-theme="dark"] .mh .eyebrow-pill { background: rgba(147, 183, 222, .12); color: #b9d0ea; }
[data-theme="dark"] .mh .request-type-switcher { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .mh .request-type-switcher button { color: var(--ink-2); }
[data-theme="dark"] .mh .request-type-switcher button small { color: var(--ink-3); }
[data-theme="dark"] .mh .request-type-switcher button.active, [data-theme="dark"] .mh .request-type-switcher button.active small { color: var(--ink); }
[data-theme="dark"] .mh .request-type-switcher button.active { background: var(--surface-2); }
[data-theme="dark"] .mh .request-type-switcher.glide-ready button.active { background: transparent; }
[data-theme="dark"] .mh .request-type-switcher .glide-indicator { background: var(--surface-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 5px 16px rgba(0, 0, 0, .35); }
[data-theme="dark"] .mh .request-flow, [data-theme="dark"] .mh .request-form-card { background: var(--surface); box-shadow: var(--shadow-border), 0 16px 42px rgba(0, 0, 0, .35); }
[data-theme="dark"] .mh .request-flow-intro h3 { color: var(--ink); }
[data-theme="dark"] .mh .request-flow-intro p { color: var(--ink-2); }
[data-theme="dark"] .mh .stage-list::before { background: var(--line-2); }
[data-theme="dark"] .mh .stage-list::after { background: var(--blue); }
[data-theme="dark"] .mh .stage-item { color: var(--ink-2); }
[data-theme="dark"] .mh .stage-item::before { border-color: var(--line-2); background: var(--surface); color: var(--ink-3); }
[data-theme="dark"] .mh .stage-item::after { color: var(--ink-3); }
[data-theme="dark"] .mh .stage-item.done::before { border-color: var(--blue); color: var(--blue); }
[data-theme="dark"] .mh .stage-item.current::before { border-color: var(--blue); background: var(--blue); color: var(--on-accent); box-shadow: 0 0 0 5px rgba(147, 183, 222, .16); }
[data-theme="dark"] .mh .stage-item.current { color: var(--ink); }
[data-theme="dark"] .mh .request-form-top { border-bottom-color: var(--line); }
[data-theme="dark"] .mh .request-form-top span { color: var(--ink); }
[data-theme="dark"] .mh .request-form-top span svg { color: var(--blue); }
[data-theme="dark"] .mh .request-form-top small, [data-theme="dark"] .mh .request-form-fields label > span, [data-theme="dark"] .mh .request-form-fields label > b.placeholder, [data-theme="dark"] .mh .request-form-footer > span { color: var(--ink-3); }
[data-theme="dark"] .mh .request-form-fields label > span em { color: #ff8f87; }
[data-theme="dark"] .mh .request-form-fields label > b { border-color: var(--line-2); background: var(--surface-2); color: var(--ink-2); }
[data-theme="dark"] .mh .request-form-footer { border-top-color: var(--line); background: rgba(255, 255, 255, .02); }
[data-theme="dark"] .mh .request-form-footer > span svg { color: var(--ok); }

[data-theme="dark"] .mh .stats-band { border-color: var(--line); background: var(--bg); color: var(--ink); }
[data-theme="dark"] .mh .stat { border-color: var(--line); }
[data-theme="dark"] .mh .stat strong { color: var(--blue); }
[data-theme="dark"] .mh .stat span { color: var(--ink-2); }

[data-theme="dark"] .mh .friction-section, [data-theme="dark"] .mh .workflow-section, [data-theme="dark"] .mh .faq-section, [data-theme="dark"] .mh .muc-section, [data-theme="dark"] .mh .muc { background: var(--bg); }
[data-theme="dark"] .mh .mub-card { background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 2px 4px rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .3); }
[data-theme="dark"] .mh .mub-ico, [data-theme="dark"] .mh .mub-body h3, [data-theme="dark"] .mh .mub-cta a, [data-theme="dark"] .mh .mub-file b, [data-theme="dark"] .mh .mub-note b { color: var(--ink); }
[data-theme="dark"] .mh .mub-body p { color: var(--ink-2); }
[data-theme="dark"] .mh .mub-file small, [data-theme="dark"] .mh .mub-note small { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .mub-card:hover .mub-tint { background: rgba(255, 255, 255, .025); } }
[data-theme="dark"] .mh .mub-file { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .mh .mub-note { background: var(--surface-2); box-shadow: var(--shadow-border), 0 12px 24px rgba(0, 0, 0, .3); }
[data-theme="dark"] .mh .mub-note i { background: rgba(147, 183, 222, .12); color: var(--blue); }
[data-theme="dark"] .mh .mub-rail span { background: rgba(255, 255, 255, .03); color: var(--ink-2); }
[data-theme="dark"] .mh .mub-rail span.on { border-color: var(--blue); background: var(--blue); color: var(--on-accent); }

[data-theme="dark"] .mh .check-list { color: var(--ink-2); }
[data-theme="dark"] .mh .check-list span, [data-theme="dark"] .mh .step-top > span { background: rgba(147, 183, 222, .1); color: var(--blue); }
[data-theme="dark"] .mh .preview-tabs button { background: rgba(255, 255, 255, .05); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .preview-tabs button:hover { background: rgba(255, 255, 255, .09); } [data-theme="dark"] .mh .preview-tabs button.selected:hover { background: #a9c6e6; } }
[data-theme="dark"] .mh .preview-tabs button.selected { background: var(--blue); color: var(--on-accent); }
[data-theme="dark"] .mh .preview-tabs.glide-ready button.selected { background: transparent; color: var(--blue); }
[data-theme="dark"] .mh .preview-tabs .glide-indicator, [data-theme="dark"] .mh .bu-tabs-hi { background: var(--blue); }
[data-theme="dark"] .mh .bu-tabs-hi button { color: var(--on-accent); }
[data-theme="dark"] .mh .preview-description { color: var(--ink-2); }
[data-theme="dark"] .mh .preview-note { color: var(--ink-3); }

[data-theme="dark"] .mh .workflow-step h3 { color: var(--ink); }
[data-theme="dark"] .mh .workflow-step p { color: var(--ink-2); }
[data-theme="dark"] .mh .workflow-step:not(:last-child)::after { border-color: var(--line-2); }
[data-theme="dark"] .mh .quote-section { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(255, 255, 255, .07); }
[data-theme="dark"] .mh .quote-icon { background: rgba(255, 255, 255, .07); }

[data-theme="dark"] .mh .faq-intro > a { color: var(--blue); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .faq-intro > a:hover { color: var(--gold); } }
[data-theme="dark"] .mh .faq-item { background: var(--surface); box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 1px 0 rgba(255, 255, 255, .04); }
[data-theme="dark"] .mh .faq-item[data-starts] { box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 1px 0 var(--line); }
[data-theme="dark"] .mh .faq-item[data-ends] { box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 -1px 0 var(--line); }
[data-theme="dark"] .mh .faq-item[data-starts][data-ends] { box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line), inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
[data-theme="dark"] .mh .faq-item button { color: var(--ink); }
[data-theme="dark"] .mh .faq-item button i, [data-theme="dark"] .mh .faq-item[data-open="true"] button i { color: var(--ink-3); }
[data-theme="dark"] .mh .faq-answer p { color: var(--ink-2); }

[data-theme="dark"] .mh .muc { border-block-color: var(--line); }
[data-theme="dark"] .mh .muc-tile { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-border), 0 2px 8px rgba(0, 0, 0, .3); }
[data-theme="dark"] .mh .muc-fade { background: linear-gradient(to bottom, rgba(10, 18, 36, .15), #0a1224 70%); }
[data-theme="dark"] .mh .muc-mark { background: rgba(255, 255, 255, .05); box-shadow: var(--shadow-border), 0 25px 50px -12px rgba(0, 0, 0, .6); }
[data-theme="dark"] .mh .muc-pill { background: var(--surface); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .mh .muc-pill:hover { background: var(--surface-2); } }
[data-theme="dark"] .mh .footer { background: #070d1b; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* ---- Dark: the product mock shows the office app in its own dark theme ---- */
[data-theme="dark"] .mh .product-window { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 35px 90px rgba(0, 0, 0, .5), 0 0 120px rgba(57, 113, 159, .16); }
[data-theme="dark"] .mh .window-bar { border-bottom-color: var(--line); background: var(--surface); }
[data-theme="dark"] .mh .window-title { color: var(--ink-3); }
[data-theme="dark"] .mh .window-controls i { background: var(--line-2); }
[data-theme="dark"] .mh .badge-roll { background: var(--surface-2); color: var(--ink-2); }
[data-theme="dark"] .mh .custom-window, [data-theme="dark"] .mh .mockup-app, [data-theme="dark"] .mh .mockup-main, [data-theme="dark"] .mh .conversation-body { background: var(--bg); }
[data-theme="dark"] .mh .mockup-app { color: var(--ink-2); }
[data-theme="dark"] .mh .mockup-sidebar { border-left-color: var(--line); background: var(--surface); }
[data-theme="dark"] .mh .mockup-brand, [data-theme="dark"] .mh .mockup-heading h3, [data-theme="dark"] .mh .mockup-nav-item.active, [data-theme="dark"] .mh .mockup-nav-item.active > span,
[data-theme="dark"] .mh .screen-kpis strong, [data-theme="dark"] .mh .team-summary strong, [data-theme="dark"] .mh .housing-summary strong, [data-theme="dark"] .mh .labor-summary strong,
[data-theme="dark"] .mh .journey-intro b, [data-theme="dark"] .mh .table-row b, [data-theme="dark"] .mh .message-list-head span, [data-theme="dark"] .mh .conversation-head b, [data-theme="dark"] .mh .conversation-input span,
[data-theme="dark"] .mh .team-card em, [data-theme="dark"] .mh .housing-person b, [data-theme="dark"] .mh .labor-person b, [data-theme="dark"] .mh .labor-detail-head > div b, [data-theme="dark"] .mh .request-client b { color: var(--ink); }
[data-theme="dark"] .mh .mockup-nav-item, [data-theme="dark"] .mh .mockup-nav-item > span, [data-theme="dark"] .mh .mockup-user, [data-theme="dark"] .mh .mockup-breadcrumb, [data-theme="dark"] .mh .mockup-search,
[data-theme="dark"] .mh .screen-kpis small, [data-theme="dark"] .mh .team-summary small, [data-theme="dark"] .mh .screen-kpis span, [data-theme="dark"] .mh .team-summary span,
[data-theme="dark"] .mh .housing-summary small, [data-theme="dark"] .mh .housing-summary span, [data-theme="dark"] .mh .labor-summary small, [data-theme="dark"] .mh .labor-summary span,
[data-theme="dark"] .mh .screen-filters span, [data-theme="dark"] .mh .housing-filters span, [data-theme="dark"] .mh .labor-filters span, [data-theme="dark"] .mh .panel-heading > span, [data-theme="dark"] .mh .chart-legend,
[data-theme="dark"] .mh .mock-request small, [data-theme="dark"] .mh .screen-note small, [data-theme="dark"] .mh .service-item > span small, [data-theme="dark"] .mh .journey-intro small, [data-theme="dark"] .mh .journey-step small,
[data-theme="dark"] .mh .document-row b, [data-theme="dark"] .mh .table-search, [data-theme="dark"] .mh .filter-button, [data-theme="dark"] .mh .table-head, [data-theme="dark"] .mh .message-contact small,
[data-theme="dark"] .mh .message-contact > span, [data-theme="dark"] .mh .message-in small, [data-theme="dark"] .mh .message-out small, [data-theme="dark"] .mh .conversation-input, [data-theme="dark"] .mh .team-card small,
[data-theme="dark"] .mh .housing-header, [data-theme="dark"] .mh .labor-header, [data-theme="dark"] .mh .housing-detail-grid > span, [data-theme="dark"] .mh .labor-detail-grid > span, [data-theme="dark"] .mh .labor-detail-head > div small,
[data-theme="dark"] .mh .request-type-tabs span, [data-theme="dark"] .mh .request-count, [data-theme="dark"] .mh .requests-segments span, [data-theme="dark"] .mh .requests-toolbar > span,
[data-theme="dark"] .mh .request-header, [data-theme="dark"] .mh .request-row > span:last-child small { color: var(--ink-3); }
[data-theme="dark"] .mh .panel-heading, [data-theme="dark"] .mh .mock-request b, [data-theme="dark"] .mh .service-item > span, [data-theme="dark"] .mh .service-item > b, [data-theme="dark"] .mh .journey-step b,
[data-theme="dark"] .mh .next-action, [data-theme="dark"] .mh .document-row, [data-theme="dark"] .mh .table-row, [data-theme="dark"] .mh .message-list-head, [data-theme="dark"] .mh .message-contact b,
[data-theme="dark"] .mh .message-in, [data-theme="dark"] .mh .message-out, [data-theme="dark"] .mh .team-card b, [data-theme="dark"] .mh .housing-row, [data-theme="dark"] .mh .labor-row,
[data-theme="dark"] .mh .housing-detail-grid strong, [data-theme="dark"] .mh .labor-detail-grid strong, [data-theme="dark"] .mh .request-row, [data-theme="dark"] .mh .request-row > span:last-child, [data-theme="dark"] .mh .request-secondary { color: var(--ink-2); }
[data-theme="dark"] .mh .mockup-nav-item.active, [data-theme="dark"] .mh .message-contact.selected, [data-theme="dark"] .mh .message-out, [data-theme="dark"] .mh .table-row > span:first-child i, [data-theme="dark"] .mh .request-client i { background: var(--surface-2); }
[data-theme="dark"] .mh .mockup-search, [data-theme="dark"] .mh .screen-kpis > div, [data-theme="dark"] .mh .team-summary > div, [data-theme="dark"] .mh .screen-panel, [data-theme="dark"] .mh .housing-summary > div,
[data-theme="dark"] .mh .labor-summary > div, [data-theme="dark"] .mh .team-card, [data-theme="dark"] .mh .screen-messages, [data-theme="dark"] .mh .service-item, [data-theme="dark"] .mh .screen-filters span,
[data-theme="dark"] .mh .housing-filters span, [data-theme="dark"] .mh .labor-filters span, [data-theme="dark"] .mh .table-search, [data-theme="dark"] .mh .filter-button, [data-theme="dark"] .mh .message-in,
[data-theme="dark"] .mh .requests-toolbar > span, [data-theme="dark"] .mh .request-secondary { border-color: var(--line) !important; background: var(--surface); }
[data-theme="dark"] .mh .mockup-user, [data-theme="dark"] .mh .mock-request, [data-theme="dark"] .mh .request-row, [data-theme="dark"] .mh .table-row, [data-theme="dark"] .mh .message-list, [data-theme="dark"] .mh .message-contact,
[data-theme="dark"] .mh .conversation-head, [data-theme="dark"] .mh .conversation-input, [data-theme="dark"] .mh .housing-row, [data-theme="dark"] .mh .labor-row, [data-theme="dark"] .mh .labor-detail-grid,
[data-theme="dark"] .mh .requests-segments, [data-theme="dark"] .mh .request-type-tabs, [data-theme="dark"] .mh .fake-chart { border-color: var(--line); }
[data-theme="dark"] .mh .housing-header, [data-theme="dark"] .mh .labor-header, [data-theme="dark"] .mh .request-header { border-color: transparent; }
[data-theme="dark"] .mh .mockup-heading-actions button, [data-theme="dark"] .mh .panel-button, [data-theme="dark"] .mh .mockup-heading-actions > span.mock-cta, [data-theme="dark"] .mh .request-primary { background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .mh .screen-filters span.active, [data-theme="dark"] .mh .housing-filters span.active, [data-theme="dark"] .mh .labor-filters span.active { border-color: var(--accent) !important; background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .mh .screen-kpis div:nth-child(2) strong, [data-theme="dark"] .mh .kpi-amber { color: var(--warn); }
[data-theme="dark"] .mh .screen-kpis div:nth-child(3) strong { color: var(--info); }
[data-theme="dark"] .mh .trend-up { color: var(--ok) !important; }
[data-theme="dark"] .mh .housing-summary strong.kpi-green, [data-theme="dark"] .mh .labor-summary strong.kpi-green { color: var(--ok); }
[data-theme="dark"] .mh .housing-summary strong.kpi-amber, [data-theme="dark"] .mh .labor-summary strong.kpi-amber { color: var(--warn); }
[data-theme="dark"] .mh .labor-summary strong.kpi-red { color: var(--danger); }
[data-theme="dark"] .mh .fake-chart { background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #17223b 32px); }
[data-theme="dark"] .mh .fake-chart i, [data-theme="dark"] .mh .chart-legend span:last-child i { background: var(--line-2); }
[data-theme="dark"] .mh .fake-chart i:nth-child(4), [data-theme="dark"] .mh .chart-legend i { background: var(--accent); }
[data-theme="dark"] .mh .avatar-green, [data-theme="dark"] .mh .chip-green, [data-theme="dark"] .mh .table-green { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .mh .avatar-amber, [data-theme="dark"] .mh .chip-amber, [data-theme="dark"] .mh .table-amber, [data-theme="dark"] .mh .mockup-user > span { background: var(--warn-soft); color: var(--warn); }
[data-theme="dark"] .mh .avatar-blue, [data-theme="dark"] .mh .chip-blue, [data-theme="dark"] .mh .table-blue, [data-theme="dark"] .mh .message-contact > i, [data-theme="dark"] .mh .conversation-head > i, [data-theme="dark"] .mh .team-card > span { background: var(--info-soft); color: var(--info); }
[data-theme="dark"] .mh .table-row > span:first-child i, [data-theme="dark"] .mh .request-client i, [data-theme="dark"] .mh .conversation-head small { color: var(--info); }
[data-theme="dark"] .mh .screen-note, [data-theme="dark"] .mh .screen-note > span, [data-theme="dark"] .mh .document-row > span { color: var(--ok); }
[data-theme="dark"] .mh .document-row.pending > span, [data-theme="dark"] .mh .document-row.pending b { color: var(--warn); }
[data-theme="dark"] .mh .journey-step:not(:last-child)::after { border-color: var(--line-2); }
[data-theme="dark"] .mh .journey-step > span { border-color: var(--line-2); background: var(--bg); color: var(--ink-3); }
[data-theme="dark"] .mh .journey-step.complete > span, [data-theme="dark"] .mh .journey-step.current > span { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
[data-theme="dark"] .mh .journey-step.current > span { box-shadow: 0 0 0 4px rgba(232, 237, 247, .12); }
[data-theme="dark"] .mh .request-type-tabs { background: #0c1528; }
[data-theme="dark"] .mh .request-type-tabs span.active { background: var(--surface-2); box-shadow: none; color: var(--ink); }
[data-theme="dark"] .mh .requests-segments span.active { border-bottom-color: var(--accent); color: var(--ink); }
[data-theme="dark"] .mh .housing-header, [data-theme="dark"] .mh .labor-header, [data-theme="dark"] .mh .request-header { color: var(--ink-3); }
/* Light: the preview's small print measured 4.39:1 on the showcase's pale blue. */
.mh .preview-note { color: #5d6880; }

/* ======================================================================================
   Section flow (owner's pick E, 2026-09-15). Three lab variants went to Fable and GPT; the owner
   chose GPT's cut: the sections keep their own surfaces and hand off quietly. The header condenses
   once the hero is behind you (interior.dev Sticky Header) and an ink bar marks the section being
   read (interior.dev Scroll Spy on beUI's layout spring). Light sections melt into each other
   through a tone seam; the product section is a still rounded card and its preview lifts once;
   headings drift 8px on beUI's parallax spring. Nothing is tied to scrolling on a phone, and the
   navy rule stays full bleed and still.
   ====================================================================================== */
/* Anything the browser scrolls to (an anchor, a focused control, scrollIntoView) stops 80px down, clear
   of the fixed header, so keyboard focus is never hidden under it (WCAG 2.4.11). */
html { scroll-padding-top: 80px; }
.mh .top-nav { position: fixed; transition: background-color 250ms var(--bu-ease-out), box-shadow 250ms var(--bu-ease-out); }
.mh .top-nav .nav-inner { transition: height 250ms var(--bu-ease-out), border-color 250ms var(--bu-ease-out); }
.mh .top-nav.is-condensed { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); box-shadow: 0 1px 0 rgba(12, 30, 64, .08); }
.mh .top-nav.is-condensed .nav-inner { height: 64px; border-bottom-color: transparent; }
@media (max-width: 767px) { .mh .top-nav.is-condensed .nav-inner { height: 60px; } }
[data-theme="dark"] .mh .top-nav.is-condensed { background: rgba(10, 18, 36, .86); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.nav-spy { position: absolute; z-index: 1; bottom: 3px; left: 0; height: 2px; border-radius: 2px; background: #0c1e40; opacity: 0; pointer-events: none;
  transition: transform var(--bu-layout-ms) var(--bu-layout), width var(--bu-layout-ms) var(--bu-layout), opacity 200ms var(--bu-ease-out); }
.nav-spy.on { opacity: 1; }
.nav-spy.jump { transition: opacity 200ms var(--bu-ease-out); }
.mh .desktop-nav a[aria-current] { color: #0c1e40; }
[data-theme="dark"] .mh .nav-spy { background: var(--blue); }
[data-theme="dark"] .mh .desktop-nav a[aria-current] { color: var(--ink); }

/* Tone seams: a light section's top is a gradient from the tone above it. The navy rule gets none. */
.mh :is(.request-stages-section, .showcase-section, .workflow-section, .muc-section) { position: relative; isolation: isolate; }
.mh :is(.request-stages-section, .showcase-section, .workflow-section, .muc-section)::before { position: absolute; z-index: -1; inset: 0 0 auto; height: min(20vh, 160px);
  background: linear-gradient(var(--seam-from), transparent); content: ""; pointer-events: none; }
.mh .request-stages-section { --seam-from: #eef3f8; }
.mh .showcase-section, .mh .workflow-section { --seam-from: #fff; }
.mh .muc-section { --seam-from: #f9faf8; }
[data-theme="dark"] .mh .request-stages-section { --seam-from: #0e1a33; }
[data-theme="dark"] .mh :is(.showcase-section, .workflow-section, .muc-section) { --seam-from: #0a1224; }

/* The product section is a still card; its preview lifts 16px once, on the smooth-out curve. */
.mh .showcase-section { margin-inline: clamp(16px, 3vw, 40px); border-radius: 24px; }
@media (max-width: 767px) { .mh .showcase-section { margin-inline: 8px; border-radius: 20px; } }
.js .mh .showcase-product.reveal { transform: translateY(16px); opacity: .9; filter: none; transition: transform 300ms cubic-bezier(.22, 1, .36, 1), opacity 300ms cubic-bezier(.22, 1, .36, 1); }
.js .mh .showcase-product.reveal.visible { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .mh .top-nav, .mh .top-nav .nav-inner, .nav-spy { transition: none; }
  .js .mh .showcase-product.reveal { transform: none; transition: opacity 200ms ease-out; }
}

/* SEO audit (2026-09-22). The keyword line above the headline, and a hero that paints on the
   first frame: the whole hero copy used to wait at opacity 0 for landing.js, which put mobile LCP
   at 3.0s on a slow phone. The headline words still rise out of their blur; they are simply never
   invisible, so the reveal reads the same and the browser counts the headline as painted. */
.mh .hero-kicker { margin-bottom: 14px; color: #8a5a1c; font-size: 15px; font-weight: 800; }
[data-theme="dark"] .mh .hero-kicker { color: #e5bd7b; }
.js .mh .hero-copy.reveal { opacity: 1; transform: none; }
.js [data-text-reveal] .tr-word { opacity: 1; }
/* The headline rises as one line out of a light blur, drawn by CSS on the first frame. It was
   split into words by landing.js, and that re-draw at script time was what the browser measured
   as LCP (2.5s on a slow phone even once visible). Opacity never leaves 1, so it counts at once. */
.mh .hero h1 { animation: mh-h1-rise 900ms var(--bu-ease-out, cubic-bezier(.16, 1, .3, 1)) both; }
@keyframes mh-h1-rise { from { transform: translateY(14px); filter: blur(6px); } to { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .mh .hero h1 { animation: none; } }