:root {
--brand: #01b151;
--brand-strong: #008a3f;
--ink: #1b1b2e;
--ink-soft: #3d3d57;
--muted: #5d6275;
--bg: #f3f8fb;
--surface: #ffffff;
--line: #dde5ec;
--focus: #1a73e8;
--danger: #b42318;
--ok: #067647;
--warn: #b54708;
--accent: var(--brand-strong);
--accent-ink: #ffffff;
--accent-soft: #e6f7ee;
--accent-2: #c9a24a;
--font-sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-arabic: "Noto Naskh Arabic", "Geeza Pro", "Al Nile", serif;
--step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
--step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
--step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
--step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
--step-3: clamp(1.8rem, 1.4rem + 2vw, 2.9rem);
--step-4: clamp(2.2rem, 1.6rem + 3vw, 3.8rem);
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
--space-5: 1.5rem;  --space-6: 2rem;   --space-7: 3rem;    --space-8: 4.5rem;
--radius-s: 8px; --radius-m: 14px; --radius-l: 22px; --radius-pill: 999px;
--shadow-1: 0 1px 2px rgb(27 27 46 / 6%), 0 2px 8px rgb(27 27 46 / 6%);
--shadow-2: 0 10px 30px rgb(27 27 46 / 12%);
--container: 1160px;
}
.theme-masjids {
--accent: #0b6b45; --accent-ink: #ffffff; --accent-soft: #e7f3ec; --accent-2: #b8892b;
--hero-from: #0c2a22; --hero-to: #0f3d2e;
}
.theme-schools {
--accent: #2f3f8f; --accent-ink: #ffffff; --accent-soft: #eceffb; --accent-2: #c7791c;
--hero-from: #1e2757; --hero-to: #2f3f8f;
}
.theme-community {
--accent: #0d6e6e; --accent-ink: #ffffff; --accent-soft: #e5f3f2; --accent-2: #c2553a;
--hero-from: #0b3f40; --hero-to: #0d6e6e;
}
.theme-businesses {
--accent: #6b2346; --accent-ink: #ffffff; --accent-soft: #f6ebf0; --accent-2: #b7791f;
--hero-from: #2e0f20; --hero-to: #5a1d3b;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
:root {
--motif: none;
--motif-soft: none;
--motif-size: 64px;
--hero-from: #10213a; --hero-to: #1b1b2e;
--hero-ink: #ffffff;
--hero-muted: #d5dde6;
--accent-2-on-dark: #f3cf7a;
--pill-soon-bg: #fff4e5; --pill-soon-ink: #8a3a00;
--pill-ok-bg: #e7f6ee;   --pill-ok-ink: #05603a;
--radius-xl: 28px;
--header-h: 64px;
--shadow-3: 0 24px 60px rgb(10 20 30 / 28%);
--field-border: #7b8594;
}
.theme-home { --accent: #007a38; --accent-soft: #e6f5ec; }
.theme-masjids {
--motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1'%3E%3Cpath d='M18 18h28v28H18z'/%3E%3Cpath d='M32 12.2 51.8 32 32 51.8 12.2 32z'/%3E%3Cpath d='M32 0v12.2M32 51.8V64M0 32h12.2M51.8 32H64'/%3E%3Cpath d='M0 0l8 8M64 0l-8 8M0 64l8-8M64 64l-8-8'/%3E%3C/g%3E%3C/svg%3E");
--motif-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='rgba(11,107,69,0.10)' stroke-width='1'%3E%3Cpath d='M18 18h28v28H18z'/%3E%3Cpath d='M32 12.2 51.8 32 32 51.8 12.2 32z'/%3E%3Cpath d='M32 0v12.2M32 51.8V64M0 32h12.2M51.8 32H64'/%3E%3Cpath d='M0 0l8 8M64 0l-8 8M0 64l8-8M64 64l-8-8'/%3E%3C/g%3E%3C/svg%3E");
--motif-size: 64px;
--accent-2-on-dark: #f0cd7c;
}
.theme-schools {
--motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 0v24M0 24h24' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='1'/%3E%3C/svg%3E");
--motif-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M24 0v24M0 24h24' fill='none' stroke='rgba(47,63,143,0.09)' stroke-width='1'/%3E%3C/svg%3E");
--motif-size: 24px;
--accent-2-on-dark: #f6c77e;
}
.theme-community {
--motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.10)' stroke-width='1'%3E%3Ccircle cx='42' cy='48' r='30'/%3E%3Ccircle cx='78' cy='48' r='30'/%3E%3Ccircle cx='60' cy='80' r='30'/%3E%3C/g%3E%3C/svg%3E");
--motif-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='rgba(13,110,110,0.10)' stroke-width='1'%3E%3Ccircle cx='42' cy='48' r='30'/%3E%3Ccircle cx='78' cy='48' r='30'/%3E%3Ccircle cx='60' cy='80' r='30'/%3E%3C/g%3E%3C/svg%3E");
--motif-size: 120px;
--accent-2-on-dark: #f6b3a0;
}
.theme-businesses {
--motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M0 32L32 0M-8 8L8 -8M24 40L40 24' fill='none' stroke='rgba(255,255,255,0.09)' stroke-width='6'/%3E%3C/svg%3E");
--motif-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M0 32L32 0M-8 8L8 -8M24 40L40 24' fill='none' stroke='rgba(107,35,70,0.07)' stroke-width='6'/%3E%3C/svg%3E");
--motif-size: 32px;
--accent-2-on-dark: #f5c26b;
}
@font-face {
font-family: "Figtree";
font-style: normal;
font-display: swap;
font-weight: 300 900;
src: url("/_m/fonts/figtree-latin-wght-normal.4ba7d3d096.woff2") format("woff2-variations"),
url("/_m/fonts/figtree-latin-wght-normal.4ba7d3d096.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--surface);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0; color: inherit; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: #ffffff; }
section[id], #main { scroll-margin-top: 16px; }
#main:focus { outline: none; }
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: 16px; top: -100px; z-index: 100;
background: var(--surface); color: var(--ink); padding: 0.75rem 1rem; border-radius: var(--radius-s);
font-weight: 700; box-shadow: var(--shadow-2);
}
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; position: relative; }
.wrap-narrow { max-width: 820px; }
@media (min-width: 768px) { .wrap { padding-inline: 32px; } }
.icon { width: 1.1em; height: 1.1em; flex: none; }
.icon-sm { width: 0.95em; height: 0.95em; }
.muted { color: var(--muted); }
.motif {
position: absolute; inset: 0; pointer-events: none;
background-image: var(--motif); background-size: var(--motif-size) var(--motif-size);
-webkit-mask-image: radial-gradient(120% 90% at 85% 20%, #000 20%, transparent 75%);
mask-image: radial-gradient(120% 90% at 85% 20%, #000 20%, transparent 75%);
}
.motif-soft {
background-image: var(--motif-soft);
-webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
min-height: 44px; padding: 0.65rem 1.15rem; border-radius: 12px;
font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2; letter-spacing: -0.005em;
text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgb(0 0 0 / 8%), 0 6px 16px -8px var(--accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-outline { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); background: var(--surface); }
.btn-outline:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn-ghost { color: #fff; border-color: rgb(255 255 255 / 38%); background: rgb(255 255 255 / 6%); }
.btn-ghost:hover { background: rgb(255 255 255 / 14%); border-color: rgb(255 255 255 / 70%); }
.on-dark .btn-primary, .site-header .btn-primary { background: #ffffff; color: var(--accent); box-shadow: 0 8px 24px -10px rgb(0 0 0 / 50%); }
.on-dark .btn-primary:hover, .site-header .btn-primary:hover { background: var(--accent-soft); }
.lead-form .btn-primary { background: var(--accent); color: var(--accent-ink); }
.lead-form .btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn-lg { min-height: 52px; padding: 0.8rem 1.45rem; font-size: 1.05rem; }
.btn-sm { min-height: 44px; padding: 0.45rem 0.9rem; font-size: 0.95rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.7; cursor: progress; }
.site-header { background: var(--hero-from); color: #fff; position: relative; z-index: 5; }
.header-bar { display: flex; align-items: center; gap: 12px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; color: inherit; text-decoration: none; margin-inline-end: auto; min-width: 0; }
.brand-mark { width: 32px; height: 32px; border-radius: 9px; box-shadow: 0 0 0 1px rgb(255 255 255 / 18%); }
.brand-name { font-weight: 750; font-size: 1.15rem; letter-spacing: -0.01em; }
.brand-vertical { font-weight: 550; color: var(--accent-2-on-dark); font-size: 1rem; white-space: nowrap; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.signin-link { color: #fff; font-weight: 600; font-size: 0.95rem; text-decoration: none; padding: 0.5rem 0.5rem; opacity: 0.9; display: inline-flex; align-items: center; min-height: 44px; }
.signin-link:hover { opacity: 1; text-decoration: underline; }
.header-cta { display: none; }
@media (min-width: 600px) { .header-cta { display: inline-flex; } }
@media (max-width: 380px) { .brand-vertical { display: none; } }
.hero {
position: relative; overflow: hidden; color: var(--hero-ink);
background: linear-gradient(165deg, var(--hero-from) 0%, color-mix(in srgb, var(--hero-to) 72%, var(--hero-from)) 100%);
padding-block: 40px 56px;
}
.hero::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: rgb(255 255 255 / 10%);
}
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) {
.hero { padding-block: 72px 96px; }
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; }
.hero-grid.hero-solo { grid-template-columns: minmax(0, 1fr); }
}
.eyebrow { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2-on-dark); margin-bottom: 14px; }
.hero h1 { font-size: var(--step-4); font-weight: 780; letter-spacing: -0.028em; line-height: 1.04; max-width: 15ch; }
.hero-sub { margin-top: 18px; font-size: var(--step-1); line-height: 1.5; color: var(--hero-muted); max-width: 52ch; font-weight: 420; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-actions .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .hero-actions .btn { flex: 0 0 auto; } }
.proof-line { display: flex; gap: 0.55rem; align-items: flex-start; margin-top: 24px; color: var(--hero-muted); font-size: 0.95rem; max-width: 52ch; }
.proof-line .icon { color: var(--accent-2-on-dark); margin-top: 0.2em; }
.hero-visual { position: relative; padding-bottom: 36px; padding-right: 17%; }
.hero-visual .frame-browser { box-shadow: var(--shadow-3); }
.hero-visual .frame-browser:only-child { margin-right: -17%; }
.hero-visual .frame-phone:only-child { position: relative; margin-inline: auto; width: 78%; max-width: 340px; }
.hero-visual.visual-browser-phone { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) 50%; padding: 0; }
.visual-browser-phone .frame-browser { grid-area: 1 / 1 / 2 / 3; align-self: start; }
.visual-browser-phone .frame-phone { grid-area: 1 / 2 / 2 / 3; align-self: start; margin-top: 15cqw; position: relative; z-index: 1; }
.frame-browser { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid rgb(27 27 46 / 10%); }
.frame-bar { display: flex; gap: 6px; align-items: center; height: 26px; padding-inline: 12px; background: #eef1f5; border-bottom: 1px solid #e1e6ec; }
.frame-bar span { width: 9px; height: 9px; border-radius: 50%; background: #cfd6de; }
.frame-screen { position: relative; }
.frame-screen img { width: 100%; }
.frame-phone { background: #0b0f14; padding: 7px; border-radius: 26px; box-shadow: var(--shadow-3); }
.frame-phone .frame-screen { border-radius: 20px; overflow: hidden; background: #fff; }
.section { position: relative; padding-block: 64px; }
@media (min-width: 960px) { .section { padding-block: 96px; } }
.tinted { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); overflow: hidden; }
.kicker { font-size: 0.8rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.section h2 { font-size: var(--step-3); font-weight: 760; letter-spacing: -0.022em; max-width: 24ch; }
.section-intro { margin-top: 14px; color: var(--muted); max-width: 62ch; font-size: var(--step-0); }
.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 40px; }
.section-cta-note { color: var(--muted); font-size: 0.95rem; }
.card-row { list-style: none; display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 768px) { .card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 24px; position: relative; }
.card h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.card p { color: var(--ink-soft); }
.problem-list { counter-reset: pain; }
.problem-card { counter-increment: pain; background: var(--bg); border-color: transparent; }
.problem-card::before {
content: counter(pain, decimal-leading-zero); display: block; font-weight: 750; font-size: 0.85rem;
color: var(--muted); letter-spacing: 0.08em; margin-bottom: 14px;
}
.solution-card { box-shadow: var(--shadow-1); border-color: color-mix(in srgb, var(--accent) 14%, var(--line)); }
.tick { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); margin-bottom: 16px; }
.demo-grid { display: grid; gap: 24px; margin-top: 32px; }
.demo-stage .frame-screen { height: min(640px, 82vh); min-height: 460px; background: var(--bg); }
@media (min-width: 960px) { .demo-stage .frame-screen { height: min(780px, 86vh); } }
.demo-poster {
position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center;
background-color: var(--accent-soft); background-image: var(--motif-soft); background-size: var(--motif-size) var(--motif-size);
}
.demo-poster-text { color: var(--ink-soft); font-weight: 550; max-width: 32ch; }
.demo-frame, .demo-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.demo-open { margin-top: 10px; font-size: 0.95rem; }
.demo-open a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; min-height: 44px; }
.demo-shots { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.shot { margin: 0; flex: 3 1 320px; min-width: 0; }
.shot-phone { flex: 1 1 150px; max-width: 190px; }
.shot-phone .frame-screen { aspect-ratio: 9 / 16; }
.shot-phone .frame-screen img { height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 639px) { .shot-phone { flex-basis: 40%; max-width: 46%; } }
.shot figcaption { margin-top: 10px; color: var(--muted); font-size: 0.93rem; }
.steps { list-style: none; display: grid; gap: 24px; margin-top: 36px; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.step { position: relative; padding-top: 4px; }
.step-num {
display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.1rem; margin-bottom: 16px;
border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
@media (min-width: 768px) {
.step:not(:last-child)::after {
content: ""; position: absolute; top: 26px; left: 60px; right: -20px; height: 2px;
background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
}
}
.step h3 { font-size: var(--step-1); font-weight: 700; margin-bottom: 6px; }
.step p { color: var(--ink-soft); }
.feature-groups { margin-top: 32px; column-gap: 20px; }
@media (min-width: 720px) { .feature-groups { columns: 2; } }
@media (min-width: 1100px) { .feature-groups { columns: 3; } }
.feature-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px 22px 10px; margin-bottom: 20px; break-inside: avoid; -webkit-column-break-inside: avoid; }
.feature-group h3 { font-size: 1.05rem; font-weight: 750; padding-bottom: 12px; border-bottom: 2px solid var(--accent); margin-bottom: 4px; }
.feature-list { list-style: none; }
.feature { padding-block: 12px; border-bottom: 1px solid var(--line); }
.feature:last-child { border-bottom: 0; }
.feature-name { font-weight: 650; font-size: 0.98rem; }
.feature-body { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin-top: 2px; }
.feature.is-soon .feature-name { color: var(--ink-soft); }
.pill { display: inline-block; vertical-align: 0.12em; padding: 0.14rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
.pill-soon { background: var(--pill-soon-bg); color: var(--pill-soon-ink); }
.pill-founding { background: var(--accent-soft); color: var(--accent); font-size: 0.8rem; }
.proof-list { list-style: none; display: grid; gap: 20px; margin-top: 32px; }
@media (min-width: 800px) { .proof-list { display: block; columns: 2; column-gap: 28px; } .proof-card { break-inside: avoid; margin-bottom: 28px; } }
.proof-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; display: flex; flex-direction: column; }
.proof-card > .frame-browser { border-radius: 0; box-shadow: none; border: 0; border-bottom: 1px solid var(--line); }
.proof-card > .frame-browser .frame-screen { aspect-ratio: 16 / 10; overflow: hidden; }
.proof-card > .frame-browser img { object-fit: cover; object-position: top; height: 100%; }
.proof-body { padding: 22px 24px 26px; }
.proof-body h3 { font-size: var(--step-1); font-weight: 750; }
.proof-kind { color: var(--accent); font-weight: 650; font-size: 0.9rem; margin: 4px 0 10px; }
.proof-body p:not(.proof-kind) { color: var(--ink-soft); }
.proof-link { margin-top: 12px; }
.proof-link a { display: inline-flex; gap: 0.35rem; align-items: center; font-weight: 650; min-height: 44px; }
.section-pricing { background: var(--bg); }
.draft-ribbon {
display: block; margin-bottom: 28px; padding: 12px 16px; border-radius: var(--radius-s);
color: #3d2400; font-weight: 550; border: 2px solid #b54708;
background: repeating-linear-gradient(-45deg, #fff1d6 0 14px, #ffe4b0 14px 28px);
}
.draft-ribbon strong { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 0.4rem; }
.pricing-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 24px; }
.billing-toggle { display: inline-flex; border: 0; padding: 4px; margin: 0; background: var(--surface); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line); }
.billing-toggle label { position: relative; }
.billing-toggle input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.billing-toggle span { display: flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: var(--radius-pill); font-weight: 650; font-size: 0.95rem; color: var(--muted); }
.billing-toggle input:checked + span { background: var(--accent); color: var(--accent-ink); }
.billing-toggle input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.annual-note { color: var(--ok); font-weight: 650; font-size: 0.95rem; }
.no-js .billing-toggle { display: none; }
.founding-note { margin-top: 16px; color: var(--ink-soft); max-width: 72ch; font-size: 0.95rem; }
.founding-terms { margin-top: 6px; }
.founding-terms summary { cursor: pointer; font-weight: 650; color: var(--accent); padding-block: 10px; }
.founding-terms summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.founding-terms p { margin-top: 8px; }
.tiers { list-style: none; display: grid; gap: 20px; margin-top: 32px; align-items: start; }
@media (min-width: 960px) { .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 26px 24px; position: relative; display: flex; flex-direction: column; gap: 12px; }
.tier-highlight { border: 2px solid var(--accent); box-shadow: var(--shadow-2); }
@media (min-width: 960px) { .tier-highlight { transform: translateY(-10px); } }
.tier-flag { position: absolute; top: -13px; left: 24px; background: var(--accent); color: var(--accent-ink); font-size: 0.78rem; font-weight: 750; padding: 0.2rem 0.7rem; border-radius: var(--radius-pill); letter-spacing: 0.03em; }
.tier-name { font-size: var(--step-1); font-weight: 780; }
.tier-tagline { color: var(--muted); margin-top: -6px; }
.tiers[data-count="2"] { max-width: 880px; margin-inline: auto; }
@media (min-width: 720px) { .tiers[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.tier-prices { display: grid; gap: 10px; padding-block: 6px; border-block: 1px solid var(--line); }
.price-label { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.5rem; }
.price-regular { color: var(--muted); font-size: 1.05rem; text-decoration-thickness: 2px; }
.price-now { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.price-unit { color: var(--muted); font-size: 0.95rem; }
.js [data-billing-view="monthly"] .price[data-billing="annual"],
.js [data-billing-view="annual"] .price[data-billing="monthly"] { display: none; }
.js .price-label { display: none; }
.price-tag { line-height: 1; }
.price-min, .price-example { font-size: 0.93rem; color: var(--ink-soft); }
.tiers-note { margin-top: 20px; color: var(--ink-soft); font-size: 0.95rem; font-weight: 600; }
.price-min s, .price-example s { color: var(--muted); }
.price-min strong, .price-example strong { color: var(--ink); }
.tier-includes-head { font-weight: 700; font-size: 0.95rem; }
.tier-more { margin-top: -2px; }
.tier-more summary { cursor: pointer; font-weight: 650; color: var(--accent); font-size: 0.95rem; padding-block: 11px; }
.tier-more summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.tier-more[open] summary { margin-bottom: 10px; }
.price-example { background: var(--bg); border-radius: var(--radius-s); padding: 10px 12px; }
.tier-best { font-size: 0.93rem; color: var(--ink-soft); }
.tier-includes, .check-list { list-style: none; display: grid; gap: 8px; }
.tier-includes li, .check-list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.95rem; }
.tier-includes .icon, .check-list .icon { color: var(--accent); margin-top: 0.3em; }
.tier .btn { margin-top: auto; }
.tier-includes { margin-bottom: 10px; }
.pricing-extra { display: grid; gap: 24px; margin-top: 40px; }
@media (min-width: 900px) { .pricing-extra { grid-template-columns: 1.2fr 1fr; gap: 40px; } }
.pricing-extra h3 { font-size: 1.05rem; font-weight: 750; margin-bottom: 12px; }
.pricing-addons p, .addon-list { color: var(--ink-soft); font-size: 0.95rem; }
.pricing-addons h3:not(:first-child) { margin-top: 20px; }
.addon-list { list-style: none; display: grid; gap: 10px; }
.addon-price { color: var(--accent); font-weight: 650; }
.app-launch { margin-top: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 24px; display: grid; gap: 20px; }
@media (min-width: 900px) { .app-launch { grid-template-columns: 0.8fr 1.2fr; gap: 40px; padding: 28px; } }
.app-launch h3 { font-size: var(--step-1); font-weight: 780; }
.app-launch-price { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em; margin: 4px 0; }
.app-launch-covers { font-weight: 700; margin-bottom: 10px; }
.app-launch-notes { list-style: none; display: grid; gap: 8px; margin-top: 16px; color: var(--ink-soft); font-size: 0.95rem; }
.pricing-soon { margin-top: 40px; }
.pricing-soon h3 { font-size: 1.05rem; font-weight: 750; margin-bottom: 6px; }
.soon-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.soon-list li { background: var(--pill-soon-bg); color: var(--pill-soon-ink); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; font-size: 0.9rem; font-weight: 600; }
.faq-list { margin-top: 28px; display: grid; gap: 10px; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-m); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.05rem; font-weight: 680; line-height: 1.35; }
.faq-item summary::after {
content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
transform: rotate(45deg) translate(-3px, -3px); transition: transform 0.2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-answer { padding: 0 20px 20px; color: var(--ink-soft); max-width: 68ch; }
.section-book { background: linear-gradient(165deg, var(--hero-from), color-mix(in srgb, var(--hero-to) 72%, var(--hero-from))); color: #fff; overflow: hidden; }
.book-grid { display: grid; gap: 36px; align-items: start; }
@media (min-width: 960px) { .book-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; } }
.section-book h2 { font-size: var(--step-3); max-width: 18ch; }
.book-body { margin-top: 14px; color: var(--hero-muted); font-size: var(--step-1); line-height: 1.5; max-width: 42ch; }
.book-next { margin-top: 28px; display: grid; gap: 12px; list-style: none; counter-reset: next; }
.book-next li { counter-increment: next; display: flex; gap: 12px; align-items: center; color: #fff; font-weight: 550; }
.book-next li::before {
content: counter(next); display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none;
border-radius: 50%; border: 1.5px solid rgb(255 255 255 / 45%); font-size: 0.9rem; font-weight: 750;
}
.book-alt { margin-top: 28px; color: var(--hero-muted); }
.book-alt a { color: #fff; font-weight: 650; }
.book-alt a, .footer-note a { display: inline-block; padding-block: 12px; }
.lead-form { background: var(--surface); color: var(--ink); border-radius: var(--radius-l); padding: 24px 20px; box-shadow: var(--shadow-3); display: grid; gap: 16px; position: relative; }
@media (min-width: 600px) { .lead-form { padding: 32px; } }
.field-row { display: grid; gap: 16px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-weight: 650; font-size: 0.95rem; }
.req { color: var(--danger); }
.field-hint { color: var(--muted); font-size: 0.86rem; margin-top: -2px; }
.field input, .field select, .field textarea {
width: 100%; min-height: 48px; padding: 0.65rem 0.8rem; font: inherit; font-size: 1rem; color: var(--ink);
background: var(--surface); border: 1.5px solid var(--field-border); border-radius: 10px;
}
.field select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem;
background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field [aria-invalid="true"] { border-color: var(--danger); background: #fff7f6; }
.field-error { color: var(--danger); font-size: 0.9rem; font-weight: 600; }
.form-privacy { color: var(--muted); font-size: 0.86rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 12px 14px; border-radius: var(--radius-s); font-weight: 550; font-size: 0.95rem; }
.notice a { font-weight: 700; display: inline-flex; gap: 0.35rem; align-items: center; }
.notice-ok { background: var(--pill-ok-bg); color: var(--pill-ok-ink); border: 1px solid #a6dcbf; }
.notice-error { background: #fef3f2; color: var(--danger); border: 1px solid #fecdca; }
.notice-warn { background: var(--pill-soon-bg); color: #6a2c00; border: 1px solid #fed7aa; }
.notice-warn a { color: #6a2c00; }
.lead-form.is-sent .field, .lead-form.is-sent .field-row, .lead-form.is-sent [data-lead-submit], .lead-form.is-sent .form-privacy { display: none; }
.site-footer { background: #0f1420; color: #c6cfda; padding-block: 48px 40px; font-size: 0.95rem; }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer a { color: #ffffff; }
.brand-footer { color: #fff; }
.footer-note { margin-top: 12px; max-width: 36ch; }
.footer-h { font-size: 0.8rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa7b6; margin-bottom: 12px; }
.site-footer ul { list-style: none; display: grid; gap: 0; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: rgb(255 255 255 / 94%); border-top: 1px solid var(--line);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition: transform 0.25s ease;
}
.sticky-cta.is-hidden { transform: translateY(110%); }
.has-sticky-cta { padding-bottom: 72px; }
@media (min-width: 768px) {
.sticky-cta { display: none; }
.has-sticky-cta { padding-bottom: 0; }
}
.theme-home .hero-home { padding-block: 56px 88px; text-align: center; }
.hero-home-inner { display: grid; justify-items: center; }
.hero-home h1 { max-width: 18ch; margin-inline: auto; }
.hero-home .hero-sub { margin-inline: auto; }
.motif-home {
background-image:
radial-gradient(circle at 20% 30%, rgb(1 177 81 / 22%), transparent 40%),
radial-gradient(circle at 80% 70%, rgb(110 139 239 / 20%), transparent 45%);
background-size: 100% 100%; background-repeat: no-repeat;
-webkit-mask-image: none; mask-image: none;
}
.section-verticals { padding-top: 0; }
.vertical-cards { list-style: none; display: grid; gap: 20px; margin-top: -48px; position: relative; }
@media (min-width: 760px) { .vertical-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.vertical-card {
position: relative; background: var(--surface); border-radius: var(--radius-l); overflow: hidden;
border: 1px solid var(--line); box-shadow: var(--shadow-2); padding: 128px 24px 26px;
transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column;
}
.vertical-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.vertical-card-motif {
inset: 0 0 auto 0; height: 104px;
background-color: var(--hero-to);
background-image: var(--motif), linear-gradient(165deg, var(--hero-from), var(--hero-to));
background-size: var(--motif-size) var(--motif-size), auto;
-webkit-mask-image: none; mask-image: none;
}
.vertical-card h3 { font-size: var(--step-2); font-weight: 780; letter-spacing: -0.015em; }
.vertical-card-link { color: var(--ink); text-decoration: none; }
.vertical-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vertical-card-link:focus-visible { outline: none; }
.vertical-card:has(.vertical-card-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.vertical-card p { color: var(--ink-soft); margin-top: 8px; }
.vertical-card .vertical-card-go { color: var(--accent); font-weight: 700; margin-top: auto; padding-top: 18px; display: inline-flex; gap: 0.4rem; align-items: center; }
.one-signin { text-align: center; margin: 72px auto 0; max-width: 560px; display: grid; gap: 12px; justify-items: center; }
.one-signin h2 { font-size: var(--step-2); }
.one-signin p { color: var(--ink-soft); }
.vertical-card .vertical-card-proof { font-size: var(--step--1); color: var(--muted); }
.home-promise { margin: 72px auto 0; max-width: 900px; text-align: center; }
.home-promise h2, .one-signin h2 { margin-inline: auto; }
.home-promise h2 { font-size: var(--step-2); }
.promise-list { list-style: none; display: grid; gap: 20px; margin-top: 24px; text-align: left; }
@media (min-width: 760px) { .promise-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.promise-list h3 { font-size: var(--step-0); font-weight: 750; }
.promise-list p { color: var(--ink-soft); margin-top: 4px; }
.demo-video { margin: var(--space-5) 0 var(--space-6); }
.demo-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-m); box-shadow: var(--shadow-2); background: var(--hero-from, var(--ink)); }
.demo-video figcaption { margin-top: var(--space-3); color: var(--muted); font-size: var(--step--1); }
.demo-video figcaption a { color: var(--accent); }
.section-logos { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: 40px 44px; overflow: hidden; }
.section-logos h2 { font-size: var(--step-1); font-weight: 720; letter-spacing: -0.012em; text-align: center; max-width: none; }
.logos-lead { margin-top: 6px; text-align: center; color: var(--muted); font-size: var(--step--1); text-wrap: balance; }
.logo-controls { display: flex; justify-content: flex-end; margin-top: 2px; }
.logo-pause { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 999px; cursor: pointer; opacity: 0.7; }
.logo-pause:hover, .logo-pause:focus-visible { opacity: 1; color: var(--ink); border-color: var(--line); }
.logo-pause .logo-pause-on { display: none; }
.logo-pause[aria-pressed="true"] .logo-pause-on { display: inline; }
.logo-pause[aria-pressed="true"] .logo-pause-off { display: none; }
.logo-pause[hidden] { display: none; }
.logo-pause:hover { color: var(--ink); border-color: var(--muted); }
.logo-marquee {
--logo-h: 44px; --logo-gap: 20px; --logo-pad: 16px;
margin-top: 18px; overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
@media (min-width: 768px) { .logo-marquee { --logo-h: 52px; --logo-gap: 28px; --logo-pad: 20px; } }
.logo-track { display: flex; width: max-content; margin-left: 16px; animation: logo-scroll 36s linear infinite; will-change: transform; }
.logo-list { list-style: none; display: flex; flex: none; align-items: center; gap: var(--logo-gap); padding: 6px var(--logo-gap) 10px 0; margin: 0; }
.logo-list li { flex: none; }
.logo-list a, .logo-list .logo-static {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
height: calc(var(--logo-h) + 2 * var(--logo-pad) + 34px); width: 168px;
padding-inline: 12px; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-m);
box-shadow: var(--shadow-1); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.logo-list a:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.logo-list a:focus-visible { border-radius: var(--radius-m); }
.logo-list img { display: block; height: var(--logo-h); width: auto; max-width: none; }
.logo-burlington-masjid img { height: calc(var(--logo-h) * 0.9); }
.logo-biss img { height: calc(var(--logo-h) * 0.82); }
.logo-al-aqsa-clinic img { height: calc(var(--logo-h) * 0.94); }
.logo-al-razi-school img { height: calc(var(--logo-h) * 1.08); }
.logo-mec-charlotte img { height: calc(var(--logo-h) * 1.04); }
.logo-marquee:focus-within { -webkit-mask-image: none; mask-image: none; }
.logo-marquee:hover .logo-track, .logo-marquee:focus-within .logo-track, .logo-marquee.is-paused .logo-track { animation-play-state: paused; }
@keyframes logo-scroll { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@media (prefers-reduced-motion: reduce) {
.logo-marquee { -webkit-mask-image: none; mask-image: none; }
.logo-track { animation: none; width: auto; justify-content: center; margin-left: 0; padding-inline: 16px; will-change: auto; }
.logo-list { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: center; padding: 6px 0 10px; row-gap: var(--logo-gap); max-width: 1000px; }
.logo-list[aria-hidden="true"] { display: none; }
.logo-pause { display: none; }
}
.section-logos + .section-verticals { padding-top: 48px; }
.section-logos + .section-verticals .vertical-cards { margin-top: 0; }
@media (min-width: 960px) { .section-logos + .section-verticals { padding-top: 64px; } }
.logo-name { display: block; max-width: 100%; font-size: 12.5px; line-height: 1.25; font-weight: 600; color: var(--ink-soft); text-align: center; text-wrap: balance; }
.logo-list a:hover .logo-name { color: var(--ink); }
.logo-list .logo-nolabel img { height: calc(var(--logo-h) * 1.45); }