:root {
  --meta-blue: #496C5C;
  --meta-blue-dark: #355747;
  --ink: #202528;
  --muted: #777F82;
  --line: #E3E7E2;
  --soft: #F3F5F2;
  --white: #ffffff;
  --success: #31a24c;
  --warning: #f7b928;
  --danger: #d92d20;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 26px rgba(0, 0, 0, 0.05);
  --preview-primary: #496C5C;
  --preview-secondary: #EDF2ED;
  --preview-accent: #7DA18B;
  --preview-text: #202528;
  --preview-font: 'Cairo', sans-serif;
  --logo-font: 'Alexandria', sans-serif;
  --preview-column-width: 372px;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #F8F8F6;
  --field-border: #D4DBD5;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --ink: #F3F5F2;
  --muted: #aeb6c2;
  --line: #343a46;
  --soft: #171b22;
  --white: #20252e;
  --surface: #20252e;
  --surface-raised: #272d38;
  --surface-subtle: #191e26;
  --field-border: #4a5362;
  --meta-blue: #91B19D;
  --meta-blue-dark: #7D9F89;
  --shadow: 0 1px 2px rgba(0,0,0,.28), 0 12px 32px rgba(0,0,0,.22);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--soft); font-family: 'Cairo', Arial, sans-serif; font-size: 16px; line-height: 1.6; transition: color .2s ease, background-color .2s ease; }
button, input, textarea { font: inherit; }
button { cursor: pointer; transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease, transform .18s ease; }
button:not(:disabled):hover { filter: saturate(1.06) brightness(.96); }
button:not(:disabled):active { transform: translateY(1px) scale(.99); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, label:has(input:focus-visible) { outline: 3px solid rgba(73,108,92,.35); outline-offset: 2px; }
[hidden] { display: none !important; }

.skip-link { position: fixed; inset: 10px auto auto 10px; z-index: 999; transform: translateY(-150%); padding: 10px 16px; color: white; background: var(--ink); border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.topbar { height: 72px; padding: 0 clamp(18px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.brand { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.platform-logo { width: 180px; height: 58px; display: block; object-fit: cover; object-position: center; }
.header-actions, .preference-controls { display: flex; align-items: center; }
.header-actions { gap: 8px; }
.preference-controls { order: 4; gap: 4px; padding-inline-start: 8px; border-inline-start: 1px solid var(--line); }
.preference-menu-wrap { position: relative; }
.preference-trigger { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 50%; }
.preference-trigger:hover, .preference-trigger[aria-expanded="true"] { color: var(--ink); background: var(--soft); }
.preference-trigger svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.preference-menu { position: absolute; z-index: 100; top: calc(100% + 12px); inset-inline-end: 0; width: 190px; padding: 8px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.2); }
.preference-menu > strong { display: block; padding: 5px 8px 8px; color: var(--muted); font-size: 11px; }
.preference-option { width: 100%; min-height: 44px; padding: 6px 8px; display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 0; border-radius: 9px; text-align: start; font-weight: 600; }
.preference-option:hover { background: var(--soft); }
.preference-option i { color: var(--meta-blue); font-style: normal; opacity: 0; }
.preference-option.selected i { opacity: 1; }
.option-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--meta-blue); background: rgba(73,108,92,.12); border-radius: 8px; font-size: 16px; }
.language-icon { font-size: 10px; font-weight: 800; letter-spacing: -.02em; }
.help-menu-wrap { position: relative; order: 3; }
.help-menu-button { min-height: 44px; padding: 5px 9px 5px 12px; display: flex; align-items: center; gap: 8px; color: var(--ink); background: transparent; border: 0; border-radius: 10px; font-weight: 700; }
.help-menu-button:hover, .help-menu-button[aria-expanded="true"] { background: var(--soft); }
.help-menu-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.help-menu-copy small { color: var(--muted); font-size: 9px; font-weight: 500; }
.help-menu-label { font-size: 11px; font-weight: 700; white-space: nowrap; }
.help-question-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); border-radius: 12px; font-size: 20px; font-weight: 800; }
[lang="en"] .help-question-icon { transform: scaleX(-1); }
.help-menu-button[aria-expanded="true"] .help-question-icon { color: white; background: var(--meta-blue); }
.help-chevron { color: var(--muted); font-size: 17px; transition: transform .15s ease; }
.help-menu-button[aria-expanded="true"] .help-chevron { transform: rotate(180deg); }
.help-menu { position: absolute; z-index: 100; top: calc(100% + 10px); inset-inline-end: 0; width: 285px; padding: 12px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,.16); }
.help-menu > strong { display: block; padding: 3px 6px 9px; font-size: 13px; }
.help-option { width: 100%; min-height: 64px; padding: 9px; display: flex; align-items: center; gap: 11px; color: var(--ink); background: transparent; border: 0; border-radius: 10px; text-align: right; }
.help-option:hover { background: var(--soft); }
.help-option + .help-option { margin-top: 3px; }
.help-option-icon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 50%; font-size: 19px; font-weight: 700; }
.help-option-icon svg { width: 21px; height: 21px; fill: currentColor; }
.whatsapp-option .help-option-icon { color: #137a39; background: #e2f7e9; }
.call-option .help-option-icon { color: var(--meta-blue); background: #EDF2ED; }
.faq-option { text-decoration: none; }
.faq-option .help-option-icon { color: #7D7385; background: #f1ebff; }
[lang="en"] .faq-option .help-option-icon { transform: scaleX(-1); }
.help-option > span:last-child { display: flex; flex-direction: column; }
.help-option b { font-size: 13px; }.help-option small { color: var(--muted); font-size: 10px; }
[dir="ltr"] .help-option { text-align: left; }
[dir="ltr"] .help-option > span:last-child { align-items: flex-start; }

.faq-screen { min-height: calc(100vh - 72px); padding: clamp(28px,5vw,64px) clamp(16px,4vw,44px) 88px; background: var(--surface-subtle); }
.faq-shell { width: min(100%, 1040px); margin-inline: auto; }
.faq-hero { position: relative; overflow: hidden; padding: clamp(30px,5vw,58px); color: white; background: linear-gradient(135deg,#355747 0%,#496C5C 54%,#4f8fff 100%); border-radius: 28px; box-shadow: 0 20px 50px rgba(73,108,92,.18); }
.faq-hero::before { content: '?'; position: absolute; inset: -64px auto auto -18px; color: rgba(255,255,255,.08); font-size: 250px; font-weight: 800; line-height: 1; transform: rotate(10deg); }
[dir="ltr"] .faq-hero::before { inset: -64px -18px auto auto; transform: rotate(-10deg); }
.faq-hero > * { position: relative; z-index: 1; }
.faq-kicker { display: inline-flex; padding: 5px 12px; color: white; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26); border-radius: 999px; font-size: 12px; font-weight: 700; }
.faq-hero h1 { max-width: 720px; margin: 14px 0 8px; font-size: clamp(34px,6vw,58px); line-height: 1.18; letter-spacing: -.035em; }
.faq-hero > p { max-width: 760px; margin: 0; color: rgba(255,255,255,.88); font-size: clamp(15px,2vw,19px); line-height: 1.85; }
.faq-content { margin-top: clamp(30px,5vw,52px); display: grid; gap: 38px; }
.faq-category { scroll-margin-top: 100px; }
.faq-category-heading { margin-bottom: 13px; display: flex; align-items: center; gap: 12px; }
.faq-category-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 10%,var(--surface)); border: 1px solid color-mix(in srgb,var(--meta-blue) 18%,var(--line)); border-radius: 14px; font-size: 20px; font-weight: 800; }
.faq-category-heading h2 { margin: 0; font-size: clamp(20px,3vw,27px); line-height: 1.3; }
.faq-category-heading p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.faq-list { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.faq-item h3 { margin: 0; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-question { width: 100%; min-height: 72px; padding: 17px 20px; display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; gap: 16px; color: var(--ink); background: transparent; border: 0; text-align: start; font-size: 15px; font-weight: 700; line-height: 1.65; }
.faq-question:hover { background: color-mix(in srgb,var(--meta-blue) 4%,var(--surface)); }
.faq-question[aria-expanded="true"] { color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 6%,var(--surface)); }
.faq-question-icon { width: 32px; height: 32px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 10%,var(--surface)); border-radius: 50%; font-size: 23px; font-weight: 400; line-height: 1; transition: transform .18s ease, color .18s ease, background-color .18s ease; }
.faq-question[aria-expanded="true"] .faq-question-icon { color: white; background: var(--meta-blue); transform: rotate(45deg); }
.faq-answer { padding: 0 20px 20px; color: var(--muted); background: color-mix(in srgb,var(--meta-blue) 3%,var(--surface)); font-size: 14px; line-height: 1.95; }
.faq-answer p { max-width: 860px; margin: 0; padding-top: 17px; border-top: 1px solid color-mix(in srgb,var(--meta-blue) 15%,var(--line)); white-space: pre-line; }
.faq-contact-card { margin-top: clamp(42px,7vw,72px); padding: clamp(24px,5vw,48px); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); }
.faq-contact-intro { display: flex; align-items: flex-start; gap: 15px; }
.faq-contact-icon { width: 52px; height: 52px; flex: 0 0 52px; display: grid; place-items: center; color: white; background: var(--meta-blue); border-radius: 17px; font-size: 27px; font-weight: 800; }
.faq-contact-intro h2 { margin: 0; font-size: clamp(22px,4vw,32px); line-height: 1.35; }
.faq-contact-intro p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.faq-contact-options { margin-top: 24px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.faq-contact-option { min-height: 92px; padding: 15px; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 12px; color: var(--ink); background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 16px; text-align: start; }
.faq-contact-option:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--meta-blue) 45%,var(--line)); box-shadow: 0 10px 22px rgba(20,32,52,.08); }
.faq-contact-option > span:first-child { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: 21px; font-weight: 800; }
.faq-contact-option > span:first-child svg { width: 24px; height: 24px; fill: currentColor; }
.faq-contact-option.whatsapp > span:first-child { color: #167a3c; background: #e2f7e9; }
.faq-contact-option.call > span:first-child { color: var(--meta-blue); background: #EDF2ED; }
.faq-contact-option > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.faq-contact-option strong { font-size: 14px; }
.faq-contact-option small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.faq-suggestion-divider { margin: 32px 0 24px; display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.faq-suggestion-divider::before, .faq-suggestion-divider::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.faq-suggestion-form { display: grid; grid-template-columns: 1fr; gap: 16px; }
.faq-suggestion-form textarea { min-height: 136px; resize: vertical; }
.faq-mobile-field { margin-top: 2px; }
.faq-submit-button { min-height: 48px; width: 100%; margin-top: 2px; }
.header-projects-menu-wrap { position: relative; order: 1; }.header-projects-menu-button { min-height: 46px; padding: 4px 10px 4px 7px; display: flex; align-items: center; gap: 8px; color: var(--ink); background: transparent; border: 0; border-radius: 12px; text-align: start; }.header-projects-menu-button:hover, .header-projects-menu-button[aria-expanded="true"] { background: var(--soft); }.header-projects-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }.header-projects-copy small { color: var(--muted); font-size: 9px; }.header-projects-copy strong { max-width: 120px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.header-projects-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; line-height: 0; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); border-radius: 12px; }.header-projects-icon .ui-icon { width: 34px; height: 34px; margin: auto; transform: none; }.header-projects-chevron { color: var(--muted); transition: transform .18s ease; }.header-projects-menu-button[aria-expanded="true"] .header-projects-chevron { transform: rotate(180deg); }.header-projects-menu { top: calc(100% + 12px); width: min(390px,calc(100vw - 24px)); padding: 14px; border-radius: 20px; box-shadow: 0 22px 58px rgba(20,32,52,.22); }
.header-projects-menu .account-summary > .account-icon { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; }.header-projects-menu .account-summary > .account-icon .ui-icon { width: 54px; height: 54px; margin: auto; }
.user-menu-wrap { position: relative; order: 2; }
.user-menu-button { min-height: 46px; padding: 4px 10px 4px 7px; display: flex; align-items: center; gap: 8px; color: var(--ink); background: transparent; border: 0; border-radius: 12px; text-align: start; }
.user-menu-button:hover, .user-menu-button[aria-expanded="true"] { background: var(--soft); }
.user-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); border-radius: 12px; }.user-avatar .ui-icon { width: 30px; height: 30px; }
.user-menu-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }.user-menu-copy small { color: var(--muted); font-size: 9px; }.user-menu-copy strong { max-width: 120px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-chevron { color: var(--muted); transition: transform .18s ease; }.user-menu-button[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }
.user-menu { position: absolute; z-index: 120; top: calc(100% + 12px); inset-inline-end: 0; width: min(390px, calc(100vw - 24px)); padding: 14px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 22px 58px rgba(20,32,52,.22); }
.user-menu-summary { padding: 8px 8px 16px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); }.user-menu-avatar { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 10%,var(--surface)); border-radius: 18px; }.user-menu-avatar .ui-icon { width: 46px; height: 46px; }.user-menu-summary > span:last-child { min-width: 0; display: flex; flex-direction: column; }.user-menu-summary small, .user-menu-summary em { color: var(--muted); font-size: 10px; font-style: normal; }.user-menu-summary strong { overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }.account-menu-phone { display: inline-flex; align-items: center; gap: 4px; }.account-menu-phone .ui-icon { width: 11px; height: 11px; flex: 0 0 11px; }.account-menu-phone b { font: inherit; }.account-menu-user-id { direction: ltr; unicode-bidi: isolate; color: var(--meta-blue) !important; font-weight: 800; }
.user-menu-links { padding-top: 9px; display: grid; gap: 3px; }.user-menu-links button { width: 100%; min-height: 64px; padding: 8px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; color: var(--ink); background: transparent; border: 0; border-radius: 12px; text-align: start; }.user-menu-links button:hover { background: var(--soft); }.user-menu-links button > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 10%,var(--surface)); border-radius: 12px; font-size: 20px; font-weight: 800; }.user-menu-links button > span:last-child { display: flex; flex-direction: column; }.user-menu-links strong { font-size: 13px; }.user-menu-links small { color: var(--muted); font-size: 10px; }.user-menu-links .signout-link { color: var(--danger); }.user-menu-links .signout-link > span:first-child { color: var(--danger); background: color-mix(in srgb,var(--danger) 8%,var(--surface)); }
.user-menu-links .menu-projects-icon .ui-icon { width: 34px; height: 34px; }
.icon-button, .help-dot { border: 0; display: inline-grid; place-items: center; color: #59625D; background: var(--soft); border-radius: 50%; font-weight: 700; }
.icon-button { width: 40px; height: 40px; font-size: 18px; }
.help-dot { width: 26px; height: 26px; flex: 0 0 26px; font-size: 13px; }
.tooltip { position: relative; }
.tooltip::after { display: none !important; }
.tooltip-dock { position: fixed; z-index: 190; inset-inline: 16px; bottom: max(18px, env(safe-area-inset-bottom)); width: fit-content; max-width: min(620px, calc(100vw - 32px)); margin-inline: auto; padding: 11px 18px; color: white; background: rgba(28,30,33,.94); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 12px 34px rgba(15,25,40,.24); font-size: 13px; font-weight: 600; line-height: 1.55; text-align: center; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease; }
.tooltip-dock.visible { opacity: 1; transform: translateY(0); }

.setup-screen { max-width: 1160px; margin: 0 auto; padding: 64px 28px 80px; }
.setup-top-actions { display: flex; justify-content: center; width: 100%; margin-bottom: 20px; }
.setup-projects-button { min-height: 48px; padding: 7px 15px 7px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: var(--meta-blue); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font-weight: 800; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.setup-projects-button:hover { transform: translateY(-2px); border-color: var(--meta-blue); box-shadow: 0 10px 24px rgba(73,108,92,.14); }
.setup-projects-button:focus-visible { outline: 3px solid rgba(73,108,92,.22); outline-offset: 3px; }
.setup-projects-button .ui-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.setup-intro { max-width: 620px; margin: 0 auto 34px; text-align: center; }
.step-pill, .special-label, .demo-badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 11px; color: var(--meta-blue); background: #EDF2ED; border-radius: 999px; font-size: 12px; font-weight: 700; }
.setup-intro h1, .builder-heading h1, .payment-card h1 { margin: 12px 0 4px; font-size: clamp(29px, 4vw, 42px); line-height: 1.25; }
.setup-intro p, .builder-heading p { margin: 0; color: var(--muted); font-size: 18px; }
.profession-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }.profession-grid[hidden] { display: none; }
.selected-profession-toggle { width: min(720px,100%); min-height: 88px; margin: 0 auto; padding: 10px 16px; display: grid; grid-template-columns: 66px 1fr 34px; align-items: center; gap: 14px; color: var(--ink); text-align: start; background: var(--surface); border: 2px solid var(--meta-blue); border-radius: 18px; box-shadow: 0 10px 28px rgba(73,108,92,.12); cursor: pointer; }.selected-profession-toggle[hidden] { display: none; }.selected-profession-toggle img { width: 66px; height: 66px; object-fit: contain; }.selected-profession-toggle > span { min-width: 0; display: grid; gap: 1px; }.selected-profession-toggle small { color: var(--meta-blue); font-size: 10px; font-weight: 800; }.selected-profession-toggle strong { overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }.selected-profession-toggle em { overflow: hidden; color: var(--muted); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }.selected-profession-toggle > i { width: 32px; height: 32px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); border-radius: 9px; font-style: normal; font-size: 20px; transition: transform .18s ease; }.selected-profession-toggle[aria-expanded="true"] > i { transform: rotate(180deg); }
.profession-card { position: relative; min-height: 245px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink); background: white; border: 2px solid transparent; border-radius: 20px; box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.profession-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.1); }
.profession-card.selected { border-color: var(--meta-blue); box-shadow: 0 0 0 3px rgba(73,108,92,.1), var(--shadow); }
.profession-card strong { font-size: 20px; }
.profession-card small { color: var(--muted); }
.profession-illustration { width: 142px; height: 120px; margin-bottom: 8px; display: grid; place-items: center; overflow: hidden; border-radius: 28px; transform: rotate(-1deg); }
.profession-illustration img { width: 146px; height: 110px; display: block; object-fit: contain; transform: rotate(1deg) scale(1.08); filter: drop-shadow(0 8px 8px rgba(23,50,77,.1)); }
.doctor { background: #E2ECE5; }.lawyer { background: #F2EBDD; }.photographer { background: #f0e6ff; }.restaurant { background: #ffe8e4; }.engineer { background: #E2ECE5; }.teacher { background: #fff6cc; }.craftsman { background: #F2EBDD; }.travel-agent { background: #E2ECE5; }.real-estate { background: #E2ECE5; }.wedding-planner { background: #F0E4E7; }.beauty-salon { background: #EEE8EF; }.makeup-artist { background: #F0E4E7; }.hairdresser { background: #EDF2ED; }.auto-showroom { background: #e8eef8; }.jewelry-shop { background: #F2EBDD; }.watch-shop { background: #e7edf4; }.other { background: #EDF2ED; }
.selection-check { position: absolute; top: 14px; left: 14px; width: 27px; height: 27px; display: none; place-items: center; color: white; background: var(--meta-blue); border-radius: 50%; font-weight: 700; }
.profession-card.selected .selection-check { display: grid; }
.setup-form { max-width: 720px; margin: 28px auto 0; padding: 26px; }
.card-surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.field { margin-bottom: 20px; }
.field label { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-weight: 700; }
.required { color: var(--danger); font-size: 11px; font-weight: 700; }
input[type="text"], input[type="tel"], input[type="email"], textarea { width: 100%; min-height: 52px; padding: 12px 14px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--field-border); border-radius: 10px; transition: border .15s ease, box-shadow .15s ease; }
textarea { resize: vertical; }
input:hover, textarea:hover { border-color: #8a8d91; }
input:focus, textarea:focus { border-color: var(--meta-blue); box-shadow: 0 0 0 3px rgba(73,108,92,.1); outline: 0; }
.input-with-icon { position: relative; }
.input-with-icon > span { position: absolute; top: 50%; right: 15px; z-index: 1; transform: translateY(-50%); color: var(--muted); }
.input-with-icon input { padding-right: 44px; }
.field-hint, .field-meta { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.field-meta { display: flex; justify-content: space-between; }
.inline-error { margin: -4px 0 16px; padding: 10px 13px; color: #8a1c14; background: #fff0ef; border-radius: 8px; font-size: 14px; }
.primary-button, .secondary-button, .quiet-button, .add-item-button { min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; border: 0; font-weight: 700; transition: background .15s ease, transform .1s ease; }
.primary-button { color: white; background: var(--meta-blue); box-shadow: 0 4px 10px rgba(73,108,92,.2); }
.primary-button:hover { background: var(--meta-blue-dark); }
.launch-button { background: #159447; box-shadow: 0 5px 14px rgba(21,148,71,.24); }
.launch-button:hover { background: #0d7d3a; }
.secondary-button { color: var(--ink); background: var(--soft); }
.quiet-button { color: var(--meta-blue); background: transparent; border: 1px solid #bec3c9; }
.large-button { width: 100%; min-height: 56px; font-size: 17px; }
.primary-button:active, .secondary-button:active, .quiet-button:active { transform: scale(.98); }

.builder-screen { max-width: 1560px; margin: 0 auto; padding: 30px 24px 70px; }
.builder-heading { margin-bottom: 20px; }
.builder-heading > div:first-child { display: block; }
.builder-heading h1 { margin-top: 4px; font-size: 32px; }
.builder-heading p { font-size: 15px; }
.builder-title-spacer { height: 42px; min-height: 42px; margin: 4px 0; }
.builder-description { max-width: 1080px; display: grid; gap: 3px; line-height: 1.75; }.builder-description span:first-child { color: var(--ink); font-weight: 600; }.builder-description span:last-child { color: var(--muted); }
.back-link { padding: 0; display: inline-flex; gap: 6px; color: var(--meta-blue); background: none; border: 0; font-weight: 700; }
.localized-arrow { display: inline-block; }
[dir="ltr"] .localized-arrow { transform: scaleX(-1); }
.directional-arrow { display: inline-block; }
[lang="en"] .directional-arrow { transform: scaleX(-1); }
.ui-icon { width: 1em; height: 1em; display: block; overflow: visible; color: currentColor; }
.ui-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.project-identity-editor { width: 100%; margin-bottom: 14px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) 135px; align-items: stretch; gap: 14px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.builder-brand-field { position: relative; min-width: 0; height: 74px; padding: 8px 12px; display: grid; align-content: center; gap: 2px; background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--meta-blue) 9%,var(--surface))); border: 1px solid color-mix(in srgb,var(--meta-blue) 38%,var(--line)); border-radius: 13px; box-shadow: 0 7px 20px rgba(23,50,77,.07); cursor: text; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.builder-brand-field:hover { border-color: var(--meta-blue); box-shadow: 0 0 0 3px rgba(73,108,92,.08); }
.builder-brand-field:focus-within { border-color: var(--meta-blue); box-shadow: 0 0 0 3px rgba(73,108,92,.13), inset 0 -3px 0 rgba(73,108,92,.16); }
.builder-brand-field > span, .profession-menu-button small { color: var(--muted); font-size: 10px; font-weight: 700; }
.builder-brand-field input { width: 100%; height: 27px; min-height: 0; padding: 0 24px 0 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px dashed color-mix(in srgb,var(--meta-blue) 48%,transparent); border-radius: 0; cursor: text; font: 800 14px/1 var(--font); }.builder-brand-field input:focus { box-shadow: none; outline: none; border-bottom-style: solid; }
[dir="rtl"] .builder-brand-field input { padding: 0 0 0 24px; }
.builder-brand-field::after { content: '\270E'; position: absolute; inset-inline-end: 12px; bottom: 13px; color: var(--meta-blue); font-size: 15px; line-height: 1; pointer-events: none; opacity: .78; }
.profession-switcher { position: relative; }
.profession-menu-button { width: 100%; min-width: 0; height: 74px; padding: 5px 10px; display: flex; align-items: center; gap: 10px; color: var(--ink); background: linear-gradient(145deg,var(--surface),color-mix(in srgb,#6F8F7B 10%,var(--surface))); border: 1px solid color-mix(in srgb,#6F8F7B 34%,var(--line)); border-radius: 13px; box-shadow: 0 7px 20px rgba(23,50,77,.07); text-align: start; }
.profession-menu-button img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain; filter: drop-shadow(0 5px 7px rgba(23,50,77,.14)); }
.profession-menu-button > span { min-width: 0; flex: 1; display: grid; }
.profession-menu-button strong { max-width: 112px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profession-menu-button i { color: var(--muted); font-style: normal; transition: transform .18s ease; }.profession-menu-button[aria-expanded="true"] i { transform: rotate(180deg); }
.profession-menu { position: fixed; z-index: 130; width: min(680px, calc(100vw - 28px)); max-width: calc(100vw - 28px); max-height: min(70vh, 560px); padding: 12px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px rgba(20,32,52,.2); }
.profession-menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mini-profession-card { min-height: 88px; padding: 8px 5px; display: grid; justify-items: center; align-content: center; gap: 4px; color: var(--ink); background: var(--soft); border: 1px solid transparent; border-radius: 10px; font: 700 11px/1.2 var(--font); }
.mini-profession-card img { width: 50px; height: 46px; object-fit: contain; }
.mini-profession-card:hover, .mini-profession-card.selected { color: var(--meta-blue); background: rgba(73,108,92,.08); border-color: var(--meta-blue); }
.profession-custom-edit { margin-top: 10px; display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
.profession-custom-edit input { height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; }
.project-tools { display: flex; align-items: center; gap: 9px; }
.project-identity-editor > .project-tools { display: contents; }
.new-project-button, .account-menu-button { width: 100%; height: 74px; min-height: 74px; box-sizing: border-box; display: flex; align-items: center; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.new-project-button { padding: 0 14px; gap: 7px; color: var(--meta-blue); background: linear-gradient(145deg,var(--surface),color-mix(in srgb,#D8C79F 14%,var(--surface))); border-color: color-mix(in srgb,#e6a91b 30%,var(--line)); box-shadow: 0 7px 20px rgba(23,50,77,.07); }
.new-project-button > span { font-size: 21px; }.new-project-button strong { font-size: 12px; }
.account-menu-wrap { position: relative; min-width: 0; height: 74px; }
.account-menu-button { min-width: 0; padding: 6px 10px; gap: 9px; background: linear-gradient(145deg,var(--surface),color-mix(in srgb,#8B8296 9%,var(--surface))); border-color: color-mix(in srgb,#8B8296 28%,var(--line)); box-shadow: 0 7px 20px rgba(23,50,77,.07); text-align: start; }
.account-menu-button:hover, .account-menu-button[aria-expanded="true"], .new-project-button:hover { background: var(--soft); }
.account-icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; color: var(--meta-blue); background: transparent; font-size: 21px; }.account-icon .ui-icon { width: 44px; height: 44px; filter: drop-shadow(0 5px 7px rgba(23,50,77,.13)); }
.account-button-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.3; }.account-button-copy small { color: var(--muted); font-size: 9px; }.account-button-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu { position: absolute; z-index: 110; top: calc(100% + 10px); inset-inline-end: 0; width: 310px; padding: 10px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 44px rgba(0,0,0,.2); }
.topbar .preference-menu,
.topbar .help-menu,
.topbar .header-projects-menu,
.topbar .user-menu { top: calc(50% + 38px); }
.account-summary { padding: 8px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.account-summary span:last-child { display: flex; flex-direction: column; }.account-summary small { color: var(--muted); font-size: 10px; }
.account-menu-heading { padding: 12px 7px 6px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 11px; }.account-menu-heading > button { width: 28px; height: 28px; color: var(--meta-blue); background: var(--soft); border: 0; border-radius: 8px; font-size: 18px; }.account-menu-heading .account-projects-link { width: auto; height: auto; padding: 3px 1px; display: inline-flex; align-items: center; gap: 6px; background: transparent; border-radius: 5px; font-size: 11px; }.account-projects-link:hover { text-decoration: underline; }.account-projects-link span { font-size: 14px; line-height: 1; }[lang="en"] .account-projects-link span { transform: scaleX(-1); }
.account-projects { display: grid; gap: 3px; }.account-project-row { display: grid; grid-template-columns: minmax(0,1fr) 36px; gap: 3px; }.account-project-option { width: 100%; min-height: 48px; padding: 7px; display: flex; align-items: center; gap: 9px; color: var(--ink); background: transparent; border: 0; border-radius: 9px; text-align: start; }.account-project-option:hover { background: var(--soft); }.account-project-option.active { background: rgba(73,108,92,.1); }.account-project-option > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; color: white; background: var(--meta-blue); border-radius: 8px; font-weight: 700; }.account-project-option > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }.account-project-option strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.account-project-option small { color: var(--muted); font-size: 9px; }.account-project-option i { color: var(--meta-blue); font-style: normal; }.delete-project-button { width: 36px; min-height: 42px; color: var(--danger); background: transparent; border: 0; border-radius: 8px; font-size: 18px; }.delete-project-button:hover { background: #fff0ef; }
.remove-section-button { margin-inline-start: auto; min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; color: var(--danger); background: transparent; border: 1px solid currentColor; border-radius: 9px; font-weight: 700; }

.overall-progress { margin-bottom: 20px; padding: 15px 18px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 20px; }
.progress-copy { display: flex; align-items: center; gap: 16px; }
.progress-copy .progress-icon { width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center; color: var(--meta-blue); background: transparent; font-size: 27px; }
.progress-icon .ui-icon { width: 58px; height: 58px; overflow: visible; filter: drop-shadow(0 7px 9px rgba(23,50,77,.16)); animation: rocket-hover 2.4s ease-in-out infinite; }
.progress-icon .rocket-flame { transform-box: fill-box; transform-origin: center top; animation: rocket-flame .38s ease-in-out infinite alternate; }
@keyframes rocket-hover { 0%,100% { transform: translate3d(0,1px,0) rotate(-1deg); } 50% { transform: translate3d(1px,-3px,0) rotate(1.5deg); } }
@keyframes rocket-flame { from { transform: scaleY(.78) scaleX(.92); opacity: .82; } to { transform: scaleY(1.18) scaleX(1.05); opacity: 1; } }
.progress-copy div { display: flex; flex-direction: column; }
.progress-copy strong { font-size: 14px; }
.progress-copy span { color: var(--muted); font-size: 12px; }
.progress-number { display: flex; align-items: baseline; gap: 6px; }
.progress-number strong { color: var(--meta-blue); font-size: 26px; }
.progress-number span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.progress-track { grid-column: 1 / -1; height: 10px; overflow: hidden; background: #E3E7E2; border-radius: 999px; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #496C5C, #91AA99); border-radius: inherit; transition: width .35s ease; }

.workspace { display: grid; grid-template-columns: var(--preview-column-width) minmax(0, 1fr); grid-template-areas: "preview forms"; gap: 20px; align-items: start; direction: ltr; }
.preview-panel { grid-area: preview; width: var(--preview-column-width); min-width: var(--preview-column-width); position: sticky; top: 92px; overflow: hidden; direction: rtl; }
.form-panel { grid-area: forms; min-width: 0; direction: rtl; }
.preview-header { padding: 18px 18px 8px; display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.preview-header h2 { margin: 6px 0 0; font-size: 17px; }
.demo-badge { padding: 3px 8px; font-size: 10px; }
.demo-note { margin: 0 18px 12px; color: var(--muted); font-size: 11px; }
.preview-tabs { margin: 0 18px 12px; padding: 4px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: var(--soft); border-radius: 9px; }
.preview-tab { min-height: 38px; display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--muted); background: transparent; border: 0; border-radius: 7px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.preview-tab > span { width: 21px; height: 21px; display: grid; place-items: center; font-size: 19px; }
.preview-tab.active { color: var(--meta-blue); background: white; box-shadow: 0 1px 3px rgba(0,0,0,.11); }
.preview-viewport { height: min(620px, calc(100vh - 310px)); min-height: 430px; margin: 0 14px; overflow-y: auto; overscroll-behavior: contain; background: #E3E7E2; border: 1px solid #D8DED9; border-radius: 10px; scrollbar-width: thin; }
.preview-footer { padding: 9px 18px 13px; display: flex; justify-content: center; gap: 7px; color: var(--muted); font-size: 10px; }
.mobile-preview-toggle, .mobile-preview-backdrop { display: none; }
.mobile-preview-toggle svg { width: 25px; height: 25px; flex: 0 0 25px; }
.mobile-preview-close-icon { display: none; }
.website-preview, .slides-preview, .business-card-preview { min-height: 100%; color: var(--preview-text); background: white; font-family: var(--preview-font); }
.mini-browser-bar { height: 23px; padding: 0 8px; display: flex; align-items: center; gap: 4px; background: #f4f5f6; border-bottom: 1px solid #e7e7e7; direction: ltr; }
.mini-browser-bar i { width: 5px; height: 5px; border-radius: 50%; background: #C4CCC6; }
.mini-browser-bar span { width: 58%; height: 7px; margin-left: auto; background: #DDE3DE; border-radius: 9px; }
.mini-site-nav { height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(0,0,0,.07); font-size: 7px; }
.mini-site-nav strong { margin-left: auto; color: var(--preview-primary); font-family: var(--logo-font); font-size: 11px; }
.mini-hero { position: relative; min-height: 255px; padding: 34px 18px 24px; overflow: hidden; background: linear-gradient(145deg, var(--preview-secondary), white 70%); }
.mini-kicker { color: var(--preview-primary); font-size: 7px; font-weight: 700; }
.mini-hero h3 { position: relative; z-index: 2; max-width: 68%; margin: 8px 0; font-size: 19px; line-height: 1.45; }
.mini-hero h3 span { font-family: var(--logo-font); }
.mini-hero p { position: relative; z-index: 2; max-width: 68%; margin: 0 0 12px; color: #5d6875; font-size: 7px; }
.mini-hero button { position: relative; z-index: 2; padding: 6px 12px; color: white; background: var(--preview-primary); border: 0; border-radius: 5px; font-size: 7px; }
.hero-art { position: absolute; left: -20px; bottom: -24px; width: 150px; height: 150px; display: grid; place-items: center; color: white; background: var(--preview-primary); border-radius: 56% 44% 44% 56% / 56% 43% 57% 44%; transform: rotate(-12deg); opacity: .95; }
.hero-art span { color: var(--preview-accent); font-size: 45px; transform: rotate(12deg); opacity: 1; }
.hero-art.has-image { background-position: center; background-size: cover; }
.hero-art.has-image span { display: none; }
.mini-content-section { padding: 24px 18px; }
.mini-content-section h4, .mini-contact-section h4 { margin: 3px 0 12px; font-size: 15px; }
.mini-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-service-card { min-height: 90px; padding: 10px; display: flex; flex-direction: column; background: #f7f8fa; border: 1px solid #ebedf0; border-top: 3px solid var(--preview-accent); border-radius: 7px; }
.mini-service-card span { color: var(--preview-primary); font-size: 7px; }.mini-service-card strong { margin-top: auto; font-size: 9px; }.mini-service-card small { color: #777; font-size: 6px; }
.mini-stats-section { padding: 16px 18px; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; background: var(--preview-primary); }
.mini-stats-section div { padding: 9px 5px; display: flex; flex-direction: column; color: white; text-align: center; border-bottom: 3px solid var(--preview-accent); }.mini-stats-section strong { font-size: 13px; }.mini-stats-section span { font-size: 6px; opacity: .8; }
.mini-why-section { padding: 24px 18px; background: linear-gradient(135deg, white, var(--preview-secondary)); }.mini-why-section h4 { margin: 3px 0 12px; font-size: 15px; }
.mini-feature-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.mini-feature-row span { padding: 9px 5px; background: white; border: 1px solid var(--preview-accent); border-radius: 6px; font-size: 6px; text-align: center; }
.mini-contact-section { padding: 20px 18px; color: white; background: var(--preview-text); }
.mini-contact-section p { margin: 0; color: rgba(255,255,255,.72); font-size: 7px; }
.slides-preview { padding: 12px; background: #c9ced5; }
.mini-slide { position: relative; aspect-ratio: 16/9; margin-bottom: 12px; padding: 20px; overflow: hidden; background: #fff; border-radius: 4px; box-shadow: 0 6px 18px rgba(31,43,58,.16); }
.mini-slide h3 { margin: 7px 0 4px; color: var(--preview-text); font-family: var(--logo-font); font-size: 22px; line-height: 1.25; }.mini-slide h4 { margin: 6px 0; font-size: 16px; line-height: 1.25; }.mini-slide p { color: #777F82; font-size: 7px; line-height: 1.65; }
.cover-slide { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 12px; background: linear-gradient(125deg, #fff 0 62%, var(--preview-secondary) 62%); }.cover-copy { position: relative; z-index: 2; }.cover-copy p { max-width: 82%; margin: 0; }.cover-visual { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; color: var(--preview-accent); background: var(--preview-primary); border-radius: 48% 52% 35% 65% / 52% 35% 65% 48%; font-size: 34px; transform: rotate(-7deg); }.cover-visual span { transform: rotate(7deg); }.cover-visual i { position: absolute; width: 34%; height: 34%; inset-inline-start: -12%; bottom: 5%; background: var(--preview-accent); border-radius: 50%; }
.story-slide { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 18px; }.story-heading { align-self: end; padding-bottom: 14px; }.story-heading::after { content: ''; width: 32px; height: 4px; margin-top: 12px; display: block; background: var(--preview-accent); }.story-copy { position: relative; min-height: 72%; padding: 22px 16px 14px; display: flex; align-items: center; background: var(--preview-secondary); border-radius: 14px 2px 14px 14px; }.story-copy p { max-width: none; margin: 0; color: var(--preview-text); }.story-mark { position: absolute; top: -14px; inset-inline-start: 12px; color: var(--preview-primary); font-size: 42px; font-weight: 700; line-height: 1; }
.offering-slide { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 14px; }.offering-title { position: relative; z-index: 2; }.offering-slide .slide-list { position: relative; z-index: 2; display: grid; gap: 7px; }.slide-list span { padding: 9px 10px; color: var(--preview-text); background: #fff; border-inline-start: 4px solid var(--preview-accent); border-radius: 3px; box-shadow: 0 3px 10px rgba(31,43,58,.09); font-size: 7px; font-weight: 700; }.offering-orbit { position: absolute; width: 140px; height: 140px; inset-inline-end: -55px; bottom: -66px; background: var(--preview-secondary); border: 18px solid var(--preview-primary); border-radius: 50%; opacity: .8; }
.accent-slide { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 16px; background: var(--preview-secondary); }.slide-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.slide-stats div { min-height: 76px; padding: 10px 5px; display: flex; flex-direction: column; justify-content: center; text-align: center; background: #fff; border-bottom: 4px solid var(--preview-accent); border-radius: 3px; }.slide-stats strong { color: var(--preview-primary); font-size: 15px; }.slide-stats span { color: #777F82; font-size: 6px; }
.process-slide { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 14px; }.slide-process { display: grid; gap: 7px; }.slide-process span { padding: 9px 10px; display: flex; align-items: center; gap: 8px; background: var(--preview-secondary); border-radius: 3px; font-size: 7px; font-weight: 700; }.slide-process b { width: 10px; height: 10px; flex: 0 0 10px; background: var(--preview-accent); border: 3px solid var(--preview-primary); border-radius: 50%; }
.closing-slide { display: grid; place-items: center; color: #fff; text-align: center; background: var(--preview-primary); }.closing-copy { position: relative; z-index: 2; }.closing-thanks { display: block; color: var(--preview-accent); font-size: 26px; font-weight: 700; line-height: 1; }.closing-slide h3 { margin: 8px 0 3px; color: #fff; }.closing-slide p { margin: 0 auto; color: rgba(255,255,255,.78); }.closing-accent { position: absolute; width: 120px; height: 120px; inset-inline-end: -45px; bottom: -52px; background: var(--preview-accent); border-radius: 50%; }.closing-ring { position: absolute; width: 90px; height: 90px; inset-inline-start: -35px; top: -38px; border: 14px solid var(--preview-secondary); border-radius: 50%; opacity: .85; }
.business-card-preview { padding: 28px 16px; background: radial-gradient(circle at 20% 16%, color-mix(in srgb,var(--preview-accent) 20%,transparent), transparent 28%), linear-gradient(145deg,#d9dee7,#bfc7d3); }
.business-card-stage { min-height: 390px; display: grid; place-items: center; align-content: center; perspective: 900px; }
.business-card-face { position: relative; width: 100%; aspect-ratio: 1.75 / 1; display: grid; grid-template-columns: 1fr 92px; overflow: hidden; color: var(--preview-text); background: linear-gradient(135deg,#fff 0 68%,var(--preview-secondary) 68%); border: 1px solid rgba(255,255,255,.82); border-radius: 15px; box-shadow: 0 24px 45px rgba(23,50,77,.23), inset 0 0 0 1px rgba(255,255,255,.48); transform: rotateX(2deg) rotateY(-2deg); }
.business-card-main { position: relative; z-index: 2; padding-block: 22px 18px; padding-inline: 22px 10px; display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
.business-card-logo { min-width: 64px; min-height: 25px; display: grid; place-items: center; color: var(--preview-primary); font-family: var(--logo-font); font-size: 15px; font-weight: 800; background-position: left center; background-repeat: no-repeat; background-size: contain; }
.business-card-person { margin-top: auto; }.business-card-person h3 { margin: 0; max-width: 185px; overflow: hidden; font-family: var(--logo-font); font-size: 18px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.business-card-person p { margin: 4px 0 0; color: var(--preview-primary); font-size: 8px; font-weight: 800; }
.business-card-contact { margin-top: 15px; display: grid; gap: 5px; }.business-card-contact span { display: flex; align-items: center; gap: 6px; color: #777F82; font-size: 6.3px; line-height: 1.2; }.business-card-contact i { width: 15px; height: 15px; display: grid; place-items: center; color: #fff; background: var(--preview-primary); border-radius: 5px; font-style: normal; font-size: 7px; }.business-card-contact b { max-width: 165px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.business-card-qr-wrap { position: relative; z-index: 3; align-self: end; justify-self: center; margin-bottom: 22px; display: grid; justify-items: center; gap: 7px; color: var(--preview-primary); }.business-card-qr { width: 58px; height: 58px; padding: 5px; color: var(--preview-primary); background: #fff; border-radius: 10px; box-shadow: 0 9px 18px color-mix(in srgb,var(--preview-primary) 20%,transparent); }.business-card-qr-wrap > span { color: var(--preview-text); font-size: 5.5px; font-weight: 800; }
.business-card-edge { position: absolute; z-index: 1; width: 155px; height: 155px; inset: -92px -64px auto auto; background: var(--preview-primary); border: 22px solid color-mix(in srgb,var(--preview-accent) 50%,transparent); border-radius: 50%; opacity: .88; }.business-card-orbit { position: absolute; z-index: 1; display: block; border-radius: 50%; }.business-card-orbit-one { width: 68px; height: 68px; inset: auto 66px -36px auto; background: var(--preview-accent); opacity: .38; }.business-card-orbit-two { width: 24px; height: 24px; inset: 19px 93px auto auto; border: 7px solid var(--preview-primary); opacity: .28; }
.business-card-caption { margin: 22px 0 0; color: #5f6a79; font-size: 8px; font-weight: 700; text-align: center; }

/* Premium live preview: a cohesive mini website and presentation system. */
.preview-panel { border-radius: 22px; box-shadow: 0 14px 45px rgba(24,39,75,.1); }
.preview-header { padding: 18px 18px 6px; }
.preview-header h2 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.02em; }
.demo-note { margin-bottom: 13px; }
.preview-tabs { padding: 5px; background: color-mix(in srgb, var(--soft) 82%, var(--meta-blue) 3%); border: 1px solid var(--line); border-radius: 12px; }
.preview-tab { border-radius: 9px; transition: color .18s ease, background .18s ease, transform .18s ease; }
.preview-tab.active { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(20,32,55,.08); }
.preview-viewport { background: #d7dce5; border-color: #c9d0da; border-radius: 14px; box-shadow: inset 0 1px 5px rgba(23,50,77,.12); }
.website-preview, .slides-preview, .business-card-preview { width: 100%; }
.website-preview { overflow: hidden; }
.mini-browser-bar { height: 25px; background: #f7f8fa; }
.mini-browser-bar i:nth-child(1) { background: #ff6b66; }.mini-browser-bar i:nth-child(2) { background: #ffcc55; }.mini-browser-bar i:nth-child(3) { background: #4cc776; }
.mini-browser-bar span { height: 8px; background: white; border: 1px solid #e4e7eb; }
.mini-site-nav { height: 52px; padding: 0 17px; gap: 13px; background: rgba(255,255,255,.94); font-size: 6.7px; }
.mini-site-nav strong { font-size: 12px; }
.mini-hero { min-height: 285px; padding: 34px 18px 28px; display: grid; grid-template-columns: 1.06fr .94fr; align-items: center; gap: 4px; background: radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--preview-accent) 24%, transparent) 0 12%, transparent 13%), linear-gradient(145deg, var(--preview-secondary), #fff 68%); }
.mini-hero::after { content: ''; position: absolute; inset: auto -30px -70px auto; width: 150px; height: 150px; border: 20px solid color-mix(in srgb, var(--preview-primary) 10%, transparent); border-radius: 50%; }
.mini-hero-copy { position: relative; z-index: 3; }
.mini-kicker { display: inline-flex; align-items: center; gap: 4px; color: var(--preview-primary); font-size: 6.8px; font-weight: 800; letter-spacing: .02em; }
.mini-kicker::before { content: ''; width: 12px; height: 2px; background: var(--preview-accent); border-radius: 999px; }
.mini-hero h3 { max-width: none; margin: 7px 0; font-size: 20px; line-height: 1.35; }
.mini-hero p { max-width: none; margin-bottom: 12px; line-height: 1.7; }
.mini-hero-actions { display: flex; align-items: center; gap: 8px; }
.mini-hero-actions button { padding: 7px 12px; border-radius: 999px; box-shadow: 0 5px 12px color-mix(in srgb, var(--preview-primary) 22%, transparent); }
.mini-hero-actions > span { color: var(--preview-primary); font-size: 6px; font-weight: 800; }
.mini-trust-row { margin-top: 13px; display: flex; gap: 9px; color: #667085; font-size: 5.2px; }
.hero-art { position: relative; left: auto; bottom: auto; width: 145px; height: 165px; justify-self: end; overflow: visible; background: transparent; border-radius: 0; transform: none; opacity: 1; }
.hero-art::before { content: ''; position: absolute; z-index: 0; inset: 13px 6px 3px 9px; background: linear-gradient(145deg, color-mix(in srgb, var(--preview-primary) 19%, white), color-mix(in srgb, var(--preview-accent) 38%, white)); border-radius: 46% 54% 38% 62% / 56% 40% 60% 44%; transform: rotate(-7deg); box-shadow: 0 14px 25px color-mix(in srgb, var(--preview-primary) 16%, transparent); }
.hero-art img { position: relative; z-index: 2; width: 158px; height: 152px; margin-top: 5px; object-fit: contain; filter: drop-shadow(0 9px 10px rgba(23,50,77,.13)); }
.art-orbit { position: absolute; z-index: 3; width: 21px; height: 21px; inset: 7px 4px auto auto; background: var(--preview-accent); border: 5px solid white; border-radius: 50%; box-shadow: 0 4px 10px rgba(23,50,77,.12); }
.mini-content-section { padding: 27px 18px 29px; background: #fff; }
.mini-content-section h4, .mini-about-section h4, .mini-journey-section h4, .mini-contact-section h4 { margin: 3px 0 13px; font-size: 15px; line-height: 1.35; }
.mini-card-row { gap: 9px; }
.mini-service-card { position: relative; min-height: 98px; padding: 11px; overflow: hidden; background: linear-gradient(150deg, #fff, #f8fafc); border-color: #e8ebf0; border-top: 0; border-radius: 10px; box-shadow: 0 7px 18px rgba(23,50,77,.06); }
.mini-service-card::after { content: ''; position: absolute; width: 42px; height: 42px; inset: -15px -14px auto auto; background: var(--preview-secondary); border-radius: 50%; }
.mini-service-card > span { width: 24px; height: 24px; display: grid; place-items: center; color: var(--preview-primary); background: var(--preview-secondary); border-radius: 7px; font-size: 6px; font-weight: 800; }
.mini-service-card strong { position: relative; z-index: 1; margin-top: auto; font-size: 8.5px; }.mini-service-card small { line-height: 1.5; }
.website-preview[data-profession="restaurant"] .mini-card-row { grid-template-columns: 1fr; }
.website-preview[data-profession="restaurant"] .mini-service-card { min-height: 82px; }
.mini-about-section { padding: 27px 18px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: 13px; background: linear-gradient(145deg, var(--preview-secondary), #fff); }
.mini-about-art { position: relative; height: 140px; overflow: hidden; background: color-mix(in srgb, var(--preview-primary) 9%, white); border-radius: 50% 50% 18px 18px; }
.mini-about-art span { position: absolute; width: 44px; height: 44px; left: -10px; bottom: -10px; background: var(--preview-accent); border-radius: 50%; }
.mini-about-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transform: scale(1.18) translateY(5px); }
.mini-about-section p { margin: 0 0 9px; color: #687385; font-size: 6.3px; line-height: 1.7; }.mini-about-section a { color: var(--preview-primary); font-size: 6.3px; font-weight: 800; }
.mini-stats-section { padding: 20px 18px; gap: 7px; background: linear-gradient(120deg, var(--preview-primary), color-mix(in srgb, var(--preview-primary) 76%, #202528)); }
.mini-stats-section div { border: 1px solid rgba(255,255,255,.15); border-bottom: 3px solid var(--preview-accent); border-radius: 8px; background: rgba(255,255,255,.07); }.mini-stats-section strong { font-size: 15px; }
.mini-why-section { padding: 28px 18px; background: #fff; }.mini-why-section h4 { font-size: 15px; }
.mini-feature-row { gap: 7px; }.mini-feature-row span { min-height: 55px; padding: 9px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: #fff; border: 1px solid #e5e9ef; border-radius: 10px; box-shadow: 0 6px 15px rgba(23,50,77,.05); }.mini-feature-row b { color: var(--preview-primary); font-size: 10px; }
.mini-journey-section { padding: 26px 18px; background: linear-gradient(145deg, #fff, var(--preview-secondary)); }
.mini-journey-section > div { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: center; gap: 2px; }.mini-journey-section span { min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: white; border-radius: 9px; box-shadow: 0 5px 14px rgba(23,50,77,.05); font-size: 5.5px; text-align: center; }.mini-journey-section b { width: 18px; height: 18px; display: grid; place-items: center; color: #fff; background: var(--preview-primary); border-radius: 50%; font-size: 7px; }.mini-journey-section i { height: 1px; background: var(--preview-accent); }
.mini-testimonial-section { position: relative; padding: 28px 30px 24px; text-align: center; background: #fff; }.quote-mark { position: absolute; top: 10px; right: 18px; color: var(--preview-secondary); font-family: Georgia, serif; font-size: 48px; line-height: 1; }.mini-testimonial-section p { position: relative; margin: 0 auto 10px; max-width: 90%; color: var(--preview-text); font-size: 8px; font-weight: 700; line-height: 1.8; }.mini-testimonial-section div { display: flex; justify-content: center; gap: 8px; color: #818A85; font-size: 5.8px; }.mini-testimonial-section div span { color: #ffb020; letter-spacing: 1px; }
.mini-contact-section { min-height: 110px; padding: 25px 19px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: radial-gradient(circle at 90% 20%, color-mix(in srgb, var(--preview-accent) 40%, transparent), transparent 35%), var(--preview-text); }.mini-contact-section h4 { margin-bottom: 5px; }.mini-contact-section .mini-kicker { color: var(--preview-accent); }.mini-contact-section p { max-width: 170px; }.mini-contact-section button { flex: 0 0 auto; padding: 8px 11px; color: var(--preview-text); background: var(--preview-accent); border: 0; border-radius: 999px; font-size: 6.5px; font-weight: 800; }

.slides-preview { padding: 14px; background: #cbd1da; }
.mini-slide { margin-bottom: 14px; padding: 21px; border-radius: 8px; box-shadow: 0 9px 24px rgba(31,43,58,.18); }
.mini-slide::after { content: ''; position: absolute; right: 14px; bottom: 9px; width: 18px; height: 2px; background: var(--preview-accent); border-radius: 99px; opacity: .8; }
.cover-slide { grid-template-columns: 1.08fr .92fr; background: radial-gradient(circle at 13% 15%, color-mix(in srgb, var(--preview-accent) 22%, transparent) 0 9%, transparent 10%), linear-gradient(125deg, #fff 0 59%, var(--preview-secondary) 59%); }
.cover-copy h3 { font-size: 24px; }.cover-copy p { font-size: 7.5px; }
.cover-visual { width: 118%; margin-inline-start: -13%; background: transparent; border-radius: 0; transform: none; }
.cover-visual::before { content: ''; position: absolute; inset: 13px; background: linear-gradient(145deg, var(--preview-primary), color-mix(in srgb, var(--preview-primary) 65%, var(--preview-accent))); border-radius: 49% 51% 37% 63% / 55% 40% 60% 45%; transform: rotate(-6deg); }
.cover-visual img { position: relative; z-index: 2; width: 122%; height: 122%; object-fit: contain; filter: drop-shadow(0 7px 7px rgba(23,50,77,.12)); }.cover-visual i { z-index: 3; }
.story-slide { grid-template-columns: .76fr 1.24fr; }.story-slide h4 { font-size: 15px; }.story-copy { overflow: hidden; }.story-copy p { position: relative; z-index: 2; width: 62%; }.story-copy img { position: absolute; width: 46%; height: 88%; left: -3%; bottom: -4%; object-fit: contain; opacity: .95; }
.offering-slide { background: linear-gradient(140deg, #fff, color-mix(in srgb, var(--preview-secondary) 62%, white)); }
.proof-slide { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 15px; background: linear-gradient(130deg, var(--preview-secondary), #fff 62%); }.proof-visual { height: 122px; overflow: hidden; background: color-mix(in srgb, var(--preview-primary) 9%, white); border-radius: 20px 20px 8px 20px; }.proof-visual img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.13); }.proof-slide ul { margin: 8px 0 0; padding: 0; display: grid; gap: 5px; list-style: none; }.proof-slide li { position: relative; padding-inline-start: 13px; color: #626d7c; font-size: 6.5px; }.proof-slide li::before { content: '✓'; position: absolute; inset-inline-start: 0; color: var(--preview-primary); font-weight: 800; }
.process-slide { background: #fff; }.slide-process span { border: 1px solid color-mix(in srgb, var(--preview-primary) 10%, transparent); border-radius: 8px; }
.quote-slide { padding-inline: 42px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: linear-gradient(145deg, var(--preview-text), color-mix(in srgb, var(--preview-primary) 38%, var(--preview-text))); }.quote-slide-mark { position: absolute; top: 18px; inset-inline-start: 27px; color: var(--preview-accent); font-family: Georgia,serif; font-size: 50px; line-height: 1; }.quote-slide blockquote { position: relative; z-index: 1; max-width: 90%; margin: 0 0 14px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.65; }.quote-slide div { color: rgba(255,255,255,.68); font-size: 6px; }.quote-slide div span { margin-inline-start: 8px; color: #ffca54; letter-spacing: 1px; }
.closing-slide { grid-template-columns: 1.15fr .85fr; text-align: start; background: linear-gradient(125deg, var(--preview-primary), color-mix(in srgb, var(--preview-primary) 60%, var(--preview-text))); }.closing-copy { justify-self: center; }.closing-thanks { font-size: 23px; }.closing-symbol { position: relative; z-index: 2; width: 112px; height: 112px; justify-self: center; display: grid; place-items: center; color: var(--preview-primary); background: var(--preview-accent); border: 8px solid rgba(255,255,255,.28); border-radius: 30px 48px 34px 52px; transform: rotate(-7deg); box-shadow: 0 16px 30px rgba(0,0,0,.18); }.closing-symbol span { font-size: 46px; line-height: 1; transform: rotate(7deg); }.closing-symbol i, .closing-symbol b { position: absolute; display: block; background: #fff; border-radius: 50%; }.closing-symbol i { width: 18px; height: 18px; top: -15px; inset-inline-end: 5px; }.closing-symbol b { width: 10px; height: 10px; bottom: 5px; inset-inline-start: -17px; }.closing-accent, .closing-ring { opacity: .35; }
.slides-preview[data-profession="restaurant"] .offering-slide .slide-list { align-self: center; }
.slides-preview[data-profession="restaurant"] .slide-list span { min-height: 54px; display: flex; align-items: center; }

.section-tabs-wrap { padding: 12px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--line); }
.section-tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.section-tabs::-webkit-scrollbar { display: none; }
.section-tab { position: relative; min-width: 106px; min-height: 67px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--muted); background: transparent; border: 0; border-radius: 10px; white-space: nowrap; }
.section-tab > span { width: 25px; height: 25px; display: grid; place-items: center; font-size: 23px; line-height: 1; }.section-tab em { font-style: normal; font-size: 12px; font-weight: 700; }
.section-tab:hover { background: var(--soft); }.section-tab.active { color: var(--meta-blue); background: #EDF2ED; }
.tab-status { position: absolute; top: 6px; left: 7px; width: 19px; height: 19px; display: grid; place-items: center; color: #fff; background: #aeb5bf; border: 2px solid var(--surface); border-radius: 50%; font-size: 11px; font-style: normal; font-weight: 900; line-height: 1; box-shadow: 0 1px 4px rgba(23,50,77,.16); }.section-tab.incomplete .tab-status { background: #aeb5bf; }.section-tab.done .tab-status { background: var(--success); }
.section-tab.add-tab { color: var(--meta-blue); border: 1px dashed #a5bce6; }.section-tab.add-tab .tab-status { display: none; }
.tabs-scroll { width: 32px; height: 45px; padding: 0 0 2px; flex: 0 0 32px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); border: 1px solid color-mix(in srgb,var(--meta-blue) 35%,var(--line)); border-radius: 8px; font-family: Arial,sans-serif; font-size: 24px; font-weight: 600; line-height: 1; transform: scaleX(-1); transition: color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease; }
.tabs-scroll:hover:not(:disabled) { color: white; background: var(--meta-blue); border-color: var(--meta-blue); }
.tabs-scroll:disabled { color: color-mix(in srgb,var(--muted) 55%,var(--surface)); background: color-mix(in srgb,var(--muted) 5%,var(--surface)); border-color: color-mix(in srgb,var(--muted) 18%,var(--line)); cursor: default; opacity: .72; }
[dir="ltr"] .section-tabs { order: 2; }
[dir="ltr"] .tabs-scroll[data-scroll="prev"] { order: 1; transform: none; }
[dir="ltr"] .tabs-scroll[data-scroll="next"] { order: 3; transform: none; }
#collectionForm { min-height: 620px; }
.form-section { padding: 28px clamp(20px, 4vw, 46px) 36px; }
.section-heading { margin-bottom: 26px; display: flex; align-items: flex-start; gap: 15px; }
.section-icon { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; color: var(--meta-blue); background: #EDF2ED; border-radius: 14px; font-size: 31px; }.section-icon .ui-icon { width: 34px; height: 34px; }
.section-heading h2 { margin: 0; font-size: 25px; }.section-heading p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }.section-heading .special-label { margin-bottom: 5px; }
.form-block { padding: 22px 0; border-top: 1px solid var(--line); }
.identity-subtabs { margin: 2px 0 18px; padding: 7px; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; background: var(--soft); border: 1px solid var(--line); border-radius: 13px; }.identity-subtab { min-height: 64px; padding: 8px; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 9px; }.identity-subtab span { width: 28px; height: 28px; display: grid; place-items: center; font-size: 27px; font-weight: 800; line-height: 1; }.identity-subtab em { font-style: normal; font-size: 11px; font-weight: 800; }.identity-subtab:hover { color: var(--meta-blue); background: color-mix(in srgb,var(--surface) 72%,transparent); }.identity-subtab.active { color: var(--meta-blue); background: var(--surface); border-color: color-mix(in srgb,var(--meta-blue) 28%,var(--line)); box-shadow: 0 3px 10px rgba(23,50,77,.08); }.identity-subpanel { padding-top: 4px; border-top: 0; }.identity-subpanel + .identity-subpanel:not([hidden]) { padding-top: 22px; border-top: 1px solid var(--line); }
.block-title { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.logo-name-font-block { margin-top: 22px; padding-bottom: 0; }
.block-title h3 { margin: 0; font-size: 17px; }.block-title p { margin: 1px 0 0; color: var(--muted); font-size: 12px; }
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-card { min-height: 114px; padding: 14px; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; color: var(--ink); background: white; border: 1.5px solid #D4DBD5; border-radius: 12px; cursor: pointer; }
.choice-card.selected { border-color: var(--meta-blue); background: #f7fbff; box-shadow: 0 0 0 2px rgba(73,108,92,.09); }.choice-card input, .font-card input, .content-font input, .palette-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-icon { grid-row: 1 / 3; width: 44px; height: 44px; display: grid; place-items: center; color: var(--meta-blue); background: #EDF2ED; border-radius: 10px; font-size: 28px; font-weight: 700; }.choice-card strong { align-self: end; }.choice-card small { align-self: start; color: var(--muted); }
.upload-zone { min-height: 130px; margin-top: 13px; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); background: #F8F8F6; border: 2px dashed #bec3c9; border-radius: 12px; cursor: pointer; text-align: center; transition: border .15s, background .15s; }
.upload-zone:hover { border-color: var(--meta-blue); background: #f6faff; }.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.upload-zone small { color: var(--muted); }.upload-icon { width: 42px; height: 42px; margin-bottom: 5px; display: grid; place-items: center; color: var(--meta-blue); background: #EDF2ED; border-radius: 12px; font-size: 28px; }.compact-upload { min-height: 110px; margin-top: 22px; }
.font-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.font-card { min-height: 116px; padding: 12px; display: flex; flex-direction: column; justify-content: center; color: var(--ink); border: 1.5px solid #D4DBD5; border-radius: 11px; cursor: pointer; font-family: var(--font); }.font-card.selected { border-color: var(--meta-blue); background: #f7fbff; }.font-card .font-brand-sample { margin-bottom: 7px; overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }.font-card .font-name { font-family: 'Cairo',sans-serif; font-size: 11px; font-weight: 700; }.font-card small { color: var(--muted); font-family: 'Cairo', sans-serif; font-size: 9px; }
.mega-selector { color: var(--ink); background: white; border: 1.5px solid #D4DBD5; border-radius: 12px; }
.preset-palette-frame.selected { border-color: var(--meta-blue); background: #f7fbff; box-shadow: 0 0 0 2px rgba(73,108,92,.09); }
.mega-selector > summary { min-height: 76px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.mega-selector > summary::-webkit-details-marker { display: none; }.mega-selector[open] > summary { border-bottom: 1px solid var(--line); }
.mega-selection, .preset-palette-heading { min-width: 0; display: flex; flex: 1; flex-direction: column; }.mega-selection strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }.mega-selection small, .preset-palette-heading small { color: var(--muted); font-size: 10px; }
.mega-chevron { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: var(--muted); background: var(--soft); border-radius: 50%; transition: transform .16s ease; }.mega-selector[open] .mega-chevron { transform: rotate(180deg); }
.mega-panel { padding: 14px; }.content-font-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.content-font { min-height: 116px; padding: 12px; display: flex; flex-direction: column; justify-content: center; border: 1.5px solid #D4DBD5; border-radius: 10px; cursor: pointer; font-family: var(--font); }.content-font.selected { border-color: var(--meta-blue); background: #f7fbff; }.content-font .font-brand-sample { margin-bottom: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; }.content-font .font-name { font-family: 'Cairo',sans-serif; font-size: 11px; font-weight: 700; }.content-font small { color: var(--muted); font-family: 'Cairo',sans-serif; font-size: 9px; }
[lang="ar"] .content-font[data-script="en"], [lang="en"] .content-font[data-script="ar"] { display: none; }
.palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }.palette-card { min-height: 84px; padding: 9px; border: 1.5px solid #D4DBD5; border-radius: 10px; cursor: pointer; }.palette-card.selected { border-color: var(--meta-blue); box-shadow: 0 0 0 2px rgba(73,108,92,.09); }.palette-colors { height: 37px; display: grid; grid-template-columns: 1.4fr 1fr .7fr; overflow: hidden; border-radius: 7px; }.palette-card small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; text-align: center; }
.logo-palette-card { position: relative; min-height: 76px; margin-bottom: 14px; padding: 13px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; color: var(--ink); background: white; border: 1.5px solid #D4DBD5; border-radius: 12px; cursor: pointer; }
.logo-palette-card > input { position: absolute; opacity: 0; pointer-events: none; }.logo-palette-card.selected { border-color: var(--meta-blue); box-shadow: 0 0 0 2px rgba(73,108,92,.09); }.logo-palette-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--meta-blue); background: #EDF2ED; border-radius: 10px; font-size: 20px; }.logo-palette-card strong, .logo-palette-card small { display: block; }.logo-palette-card small { color: var(--muted); font-size: 10px; }.logo-palette-swatches { width: 72px; height: 34px; display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; background: var(--soft); border: 1px solid var(--line); border-radius: 7px; }.logo-palette-swatches i { background: #d8dce3; }.logo-palette-card.ready .logo-palette-icon { color: white; background: var(--success); }
.preset-palette-frame { margin-bottom: 14px; }.mega-summary-palette { width: 84px; height: 36px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.preset-palette-icon { position: relative; width: 48px; height: 42px; flex: 0 0 48px; display: block; }
.preset-palette-icon i { position: absolute; width: 31px; height: 19px; border: 2px solid white; border-radius: 6px; box-shadow: 0 3px 8px rgba(23,50,77,.16); transform: rotate(-7deg); }
.preset-palette-icon i:nth-child(1) { top: 2px; right: 1px; background: linear-gradient(90deg,#496C5C 0 34%,#EDF2ED 34% 67%,#7DA18B 67%); }
.preset-palette-icon i:nth-child(2) { top: 12px; right: 8px; background: linear-gradient(90deg,#c2410c 0 34%,#ffedd5 34% 67%,#fb923c 67%); transform: rotate(3deg); }
.preset-palette-icon i:nth-child(3) { top: 21px; right: 15px; background: linear-gradient(90deg,#7D7385 0 34%,#ede9fe 34% 67%,#6F8F7B 67%); transform: rotate(10deg); }
.custom-palette-card { position: relative; margin-top: 14px; padding: 16px; display: grid; gap: 15px; color: var(--ink); background: white; border: 1.5px solid #D4DBD5; border-radius: 12px; cursor: pointer; }
.custom-palette-card.selected { border-color: var(--meta-blue); box-shadow: 0 0 0 2px rgba(73,108,92,.09); }
.custom-palette-card > input { position: absolute; opacity: 0; pointer-events: none; }
.custom-palette-heading { display: flex; flex-direction: column; }.custom-palette-heading small { color: var(--muted); }
.custom-color-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.custom-color-field { min-width: 0; padding: 10px; display: grid; grid-template-columns: 45px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; }
.custom-color-field input[type="color"] { grid-row: 1 / 3; width: 45px; height: 45px; padding: 2px; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.custom-color-field b { font-size: 12px; }.custom-color-field code { color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; direction: ltr; }
.optional-label { margin-inline-start: 5px; padding: 2px 7px; color: var(--muted); background: var(--soft); border-radius: 999px; font-size: 9px; font-weight: 600; }.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.item-upload { min-height: 82px; margin-top: 10px; padding: 12px; }.item-upload .upload-icon { width: 30px; height: 30px; font-size: 15px; }.media-upload-zone { min-height: 190px; }.upload-error { margin: 9px 0 0; padding: 10px 12px; color: var(--danger); background: #fff0ef; border-radius: 8px; font-size: 12px; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 15px; }
.input-with-prefix { display: flex; align-items: center; border: 1.5px solid #D4DBD5; border-radius: 10px; overflow: hidden; direction: ltr; }.input-with-prefix:focus-within { border-color: var(--meta-blue); box-shadow: 0 0 0 3px rgba(73,108,92,.1); }.input-with-prefix span { padding: 0 12px; color: var(--muted); background: var(--soft); font-size: 12px; white-space: nowrap; }.input-with-prefix input { min-width: 0; border: 0; border-radius: 0; direction: ltr; }.input-with-prefix input:focus { box-shadow: none; }
.repeat-list { display: grid; gap: 14px; }.repeat-item { position: relative; padding: 18px; background: #F8F8F6; border: 1px solid var(--line); border-radius: 13px; }.repeat-item-heading { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }.repeat-item-heading strong { color: var(--meta-blue); }.remove-item { width: 36px; height: 36px; color: var(--danger); background: #fff0ef; border: 0; border-radius: 8px; font-size: 17px; }.add-item-button { width: 100%; min-height: 74px; margin-top: 14px; color: var(--meta-blue); background: white; border: 1.5px dashed #8aa9db; }.add-item-button span { font-size: 23px; }.add-item-button small { color: var(--muted); font-weight: 400; }
.product-category-manager { margin-bottom: 16px; padding: 16px; background: var(--soft); border: 1px solid var(--line); border-radius: 13px; }.category-manager-heading { margin-bottom: 12px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.category-manager-heading > div { display: grid; }.category-manager-heading small { color: var(--muted); font-size: 11px; }.product-categories-list { display: grid; gap: 8px; }.product-category-row { display: grid; grid-template-columns: minmax(0,1fr) 38px; gap: 8px; }.product-category-row input, .product-category-add input { min-height: 44px; }.product-category-row button { width: 38px; min-height: 38px; color: var(--danger); background: #fff0ef; border: 0; border-radius: 9px; font-size: 18px; }.product-category-add { margin-top: 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }.product-category-add .secondary-button { min-height: 44px; white-space: nowrap; }.product-item select { width: 100%; min-height: 52px; padding: 10px 14px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--field-border); border-radius: 10px; }
.product-description-field textarea { min-height: 190px; line-height: 1.8; }
.contact-groups { align-items: start; }.contact-group { min-width: 0; }.contact-list { display: grid; gap: 7px; }.contact-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }.contact-entry .input-with-icon { min-width: 0; }.remove-contact-button { width: 40px; color: var(--danger); background: #fff0ef; border: 0; border-radius: 9px; font-size: 18px; }.add-contact-button { width: max-content; margin-top: 7px; padding: 4px 0; color: var(--meta-blue); background: none; border: 0; font-weight: 700; font-size: 11px; }
.font-upload-zone { margin-top: 12px; min-height: 74px; }.font-upload-zone .upload-icon { font-size: 17px; font-weight: 800; }.font-upload-error { margin-top: 7px; }
.danger-button { min-height: 48px; padding: 0 20px; color: white; background: var(--danger); border: 0; border-radius: 10px; font-weight: 800; }.danger-button:hover { filter: brightness(.9); }.danger-icon { color: var(--danger); background: #fff0ef !important; }.math-challenge { margin-top: 15px; display: grid; gap: 7px; }.math-challenge label { font-weight: 700; }.math-challenge input { height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 18px; }
.profession-guidance { margin-bottom: 18px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; color: var(--ink); background: rgba(49,162,76,.09); border: 1px solid rgba(49,162,76,.24); border-radius: 12px; }
.profession-details-note { margin-bottom: 18px; padding: 13px 15px; display: flex; align-items: center; gap: 10px; color: var(--ink); background: rgba(73,108,92,.07); border: 1px solid rgba(73,108,92,.16); border-radius: 11px; }.profession-details-note > span { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; color: var(--meta-blue); background: white; border-radius: 9px; }.profession-details-note p { margin: 0; color: var(--muted); font-size: 12px; }.profession-fields { display: grid; gap: 4px; }.profession-fields .field textarea { min-height: 120px; resize: vertical; }
.profession-guidance > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: white; background: var(--success); border-radius: 50%; font-weight: 700; }
.profession-guidance strong { display: block; margin-bottom: 2px; }
.profession-guidance p { margin: 0; color: var(--muted); font-size: 13px; }
.custom-copy { display: grid; gap: 14px; }.custom-copy textarea { min-height: 150px; }
.file-list { width: 100%; margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.file-pill { max-width: 100%; padding: 4px 5px 4px 9px; display: inline-flex; align-items: center; gap: 6px; color: var(--meta-blue); background: #EDF2ED; border-radius: 999px; font-size: 10px; }
.file-pill-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-remove { width: 20px; height: 20px; padding: 0; display: grid; place-items: center; color: var(--danger); background: rgba(215, 54, 54, .1); border: 0; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; }
.file-remove:hover, .file-remove:focus-visible { color: white; background: var(--danger); outline: none; }
.form-actions { padding: 18px clamp(20px, 4vw, 46px); display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); }.action-group { display: flex; gap: 10px; }

.payment-screen { max-width: 760px; margin: 0 auto; padding: 70px 24px; text-align: center; }.payment-card { padding: clamp(28px, 6vw, 56px); }.success-icon { width: 72px; height: 72px; margin: 20px auto 4px; display: grid; place-items: center; color: white; background: var(--success); border-radius: 50%; font-size: 34px; box-shadow: 0 0 0 10px rgba(49,162,76,.11); }.payment-card > p { max-width: 560px; margin: 8px auto 25px; color: var(--muted); }.project-summary { margin: 24px 0; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.project-summary div { padding: 16px 10px; display: flex; flex-direction: column; }.project-summary div + div { border-right: 1px solid var(--line); }.project-summary span { color: var(--muted); font-size: 11px; }.payment-note { margin: 20px 0; padding: 14px; display: flex; gap: 10px; text-align: right; background: #fff8e7; border-radius: 10px; }.payment-note p { margin: 0; font-size: 13px; }.centered { margin: 18px auto 0; }
.payment-card > .payment-followup { max-width: 610px; margin: 30px auto 34px; color: var(--muted); font-size: 15px; line-height: 1.9; text-wrap: pretty; }.payment-followup span { display: block; }.payment-followup span + span { margin-top: 6px; color: var(--ink); font-weight: 700; }
.payment-return-actions { margin-top: 18px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 24px; }.payment-return-actions .centered { margin: 0; }
.projects-screen { max-width: 1320px; margin: 0 auto; padding: 54px 24px 80px; }
.projects-manager-shell { padding: clamp(22px,4vw,42px); background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.projects-manager-header { margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.projects-manager-heading { display: flex; align-items: center; gap: 18px; }
.projects-manager-icon { width: 78px; height: 78px; flex: 0 0 78px; display: grid; place-items: center; }.projects-manager-icon .ui-icon { width: 72px; height: 72px; filter: drop-shadow(0 8px 12px rgba(23,50,77,.13)); }
.projects-manager-heading h1 { margin: 7px 0 2px; font-size: clamp(28px,4vw,42px); line-height: 1.2; }.projects-manager-heading p { margin: 0; color: var(--muted); }
.projects-create-button { min-height: 52px; padding-inline: 20px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }.projects-create-button span { font-size: 22px; }
.projects-manager-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.project-manager-card { position: relative; min-height: 260px; padding: 22px; display: flex; flex-direction: column; overflow: visible; background: color-mix(in srgb,var(--soft) 78%,var(--surface)); border: 1px solid var(--line); border-radius: 20px; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.project-manager-card:hover { z-index: 3; transform: translateY(-3px); border-color: color-mix(in srgb,var(--meta-blue) 38%,var(--line)); box-shadow: 0 16px 30px rgba(23,50,77,.1); }
.project-manager-card.active { background: color-mix(in srgb,var(--meta-blue) 5%,var(--surface)); border-color: color-mix(in srgb,var(--meta-blue) 45%,var(--line)); }
.project-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.project-card-illustration { width: 92px; height: 82px; object-fit: contain; filter: drop-shadow(0 8px 9px rgba(23,50,77,.12)); }.project-card-current { padding: 4px 9px; color: var(--success); background: color-mix(in srgb,var(--success) 10%,var(--surface)); border-radius: 999px; font-size: 10px; font-weight: 800; }
.project-manager-card h2 { margin: 15px 0 2px; overflow: hidden; font-size: 21px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.project-manager-card > p { margin: 0; color: var(--muted); font-size: 13px; }
.project-publication-status { width: fit-content; margin-top: 10px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 10px; font-weight: 800; }.project-publication-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }.project-publication-status.published { color: var(--success); background: color-mix(in srgb,var(--success) 10%,var(--surface)); }.project-publication-status.submitted { color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 10%,var(--surface)); }.project-publication-status.unpublished { color: #a56a00; background: color-mix(in srgb,#B89D62 15%,var(--surface)); }
.project-card-progress { margin-top: auto; padding-top: 20px; }.project-card-progress > div { margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }.project-card-progress strong { color: var(--meta-blue); font-size: 13px; }.project-card-progress-track { height: 7px; display: block; background: color-mix(in srgb,var(--line) 78%,var(--surface)); border-radius: 999px; }.project-card-progress-track > i { height: 100%; display: block; background: linear-gradient(90deg,var(--meta-blue),#6F8F7B); border-radius: inherit; transition: width .25s ease; }.project-card-progress-track:focus-visible { outline: 3px solid rgba(73,108,92,.2); outline-offset: 3px; }
.project-publish-button { width: 100%; min-height: 44px; margin-top: 13px; }.project-card-actions { padding-top: 13px; display: grid; grid-template-columns: 1fr 44px 44px; gap: 9px; }.project-open-button { min-height: 44px; color: white; background: var(--meta-blue); border: 0; border-radius: 10px; font-weight: 800; }.project-open-button:hover { background: var(--meta-blue-dark); }.project-duplicate-card-button, .project-delete-card-button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; font-size: 22px; }.project-duplicate-card-button { color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 7%,var(--surface)); border: 1px solid color-mix(in srgb,var(--meta-blue) 22%,var(--line)); }.project-duplicate-card-button:hover { background: color-mix(in srgb,var(--meta-blue) 14%,var(--surface)); }.project-delete-card-button { color: var(--danger); background: color-mix(in srgb,var(--danger) 7%,var(--surface)); border: 1px solid color-mix(in srgb,var(--danger) 22%,var(--line)); }.project-delete-card-button:hover { background: color-mix(in srgb,var(--danger) 14%,var(--surface)); }.project-delete-card-button .ui-icon { width: 29px; height: 29px; }
.projects-manager-empty { grid-column: 1 / -1; padding: 64px 20px; text-align: center; color: var(--muted); background: var(--soft); border: 1px dashed var(--line); border-radius: 18px; }.projects-manager-empty strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 20px; }
.account-screen { max-width: 1120px; margin: 0 auto; padding: 54px 24px 80px; }
.account-page-shell { min-height: 620px; display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; }
.account-page-visual { padding: 46px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 18% 12%,rgba(255,207,112,.34),transparent 24%),linear-gradient(145deg,#EDF2ED,#f6f1ff); }.account-page-visual svg { width: min(330px,100%); margin: 0 auto 20px; }.account-page-visual span { color: var(--meta-blue); font-size: 12px; font-weight: 800; }.account-page-visual strong { max-width: 360px; margin-top: 7px; color: #202528; font-size: 23px; line-height: 1.55; }
.account-form-area { padding: clamp(28px,5vw,58px); background: var(--surface); }
.auth-tabs { margin-bottom: 30px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; background: var(--soft); border: 1px solid var(--line); border-radius: 13px; }.auth-tab { min-height: 46px; color: var(--muted); background: transparent; border: 0; border-radius: 9px; font-weight: 800; }.auth-tab.active { color: var(--meta-blue); background: var(--surface); box-shadow: 0 3px 10px rgba(20,32,52,.09); }
.auth-panel > h1, .profile-heading h1 { margin: 10px 0 3px; font-size: clamp(28px,4vw,40px); line-height: 1.3; }.auth-panel > p, .profile-heading p { margin: 0 0 26px; color: var(--muted); }
.account-form { display: grid; gap: 18px; }.account-field { display: grid; gap: 7px; }.account-field label { font-size: 13px; font-weight: 800; }.account-field > input, .account-field > select, .password-field input { width: 100%; height: 52px; padding: 0 14px; color: var(--ink); background-color: var(--surface-subtle); border: 1px solid var(--field-border); border-radius: 11px; }.account-field > select { padding-inline-end: 44px; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2365676b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 15px center; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }.account-field > select:hover { border-color: color-mix(in srgb,var(--meta-blue) 45%,var(--field-border)); background-color: color-mix(in srgb,var(--meta-blue) 3%,var(--surface-subtle)); }[dir="ltr"] .account-field > select { background-position: right 15px center; }.account-field > small { color: var(--muted); font-size: 10px; }.account-field-error { margin: 0; color: var(--danger); font-size: 11px; font-weight: 700; }
.country-select { position: relative; min-width: 0; }.country-select.open { z-index: 40; }.country-select-trigger { width: 100%; height: 52px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); background: var(--surface-subtle); border: 1px solid var(--field-border); border-radius: 11px; text-align: start; }.country-select-trigger:hover, .country-select-trigger[aria-expanded="true"] { border-color: color-mix(in srgb,var(--meta-blue) 55%,var(--field-border)); background: color-mix(in srgb,var(--meta-blue) 3%,var(--surface-subtle)); box-shadow: 0 0 0 3px rgba(73,108,92,.08); }.country-select-value { min-width: 0; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 9px; }.country-select-value b { font-size: 19px; line-height: 1; }.country-select-value span { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.country-select-value small { direction: ltr; color: var(--muted); font-size: 11px; }.country-select-trigger > i { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; color: var(--muted); background: var(--soft); border-radius: 8px; font-style: normal; transition: transform .18s ease; }.country-select-trigger[aria-expanded="true"] > i { transform: rotate(180deg); }.country-select-menu { position: absolute; z-index: 80; top: calc(100% + 8px); inset-inline: 0; max-height: 310px; padding: 10px; display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; overflow-y: auto; overscroll-behavior: contain; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 22px 58px rgba(20,32,52,.22); }.country-select.open .country-select-menu { display: grid; }.country-option { min-width: 0; min-height: 48px; padding: 7px 9px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto 18px; align-items: center; gap: 7px; color: var(--ink); background: transparent; border: 0; border-radius: 10px; text-align: start; }.country-option:hover { background: var(--soft); }.country-option.selected { color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); }.country-option b { font-size: 19px; line-height: 1; }.country-option span { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.country-option small { direction: ltr; color: var(--muted); font-size: 9px; }.country-option i { color: var(--meta-blue); font-style: normal; opacity: 0; }.country-option.selected i { opacity: 1; }
.country-select-value { grid-template-columns: 26px auto minmax(0,1fr); }.country-select-menu { max-height: none; overflow: hidden; }.country-select.open .country-select-menu { display: block; }.country-search { height: 46px; margin-bottom: 8px; padding: 0 11px; display: flex; align-items: center; gap: 8px; background: var(--surface-subtle); border: 1px solid var(--field-border); border-radius: 10px; }.country-search:focus-within { border-color: var(--meta-blue); box-shadow: 0 0 0 3px rgba(73,108,92,.1); }.country-search > span { color: var(--muted); font-size: 21px; }.country-search input { width: 100%; min-width: 0; height: 42px; padding: 0; color: var(--ink); background: transparent; border: 0; outline: 0; box-shadow: none; }.country-options-list { max-height: 270px; display: grid; grid-template-columns: 1fr; gap: 4px; overflow-y: auto; overscroll-behavior: contain; }.country-option { grid-template-columns: 28px auto minmax(0,1fr) 18px; }.country-no-results { margin: 0; padding: 24px 12px; color: var(--muted); font-size: 12px; text-align: center; }
.password-field { position: relative; }.password-field input { padding-inline-end: 76px; }.password-field button { position: absolute; inset-inline-end: 7px; top: 7px; min-width: 58px; height: 38px; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); border: 0; border-radius: 8px; font-size: 10px; font-weight: 800; }
.account-submit { min-height: 52px; margin-top: 4px; font-size: 15px; }.account-switch-link { min-height: 42px; color: var(--meta-blue); background: transparent; border: 0; font-weight: 800; }
.profile-card { max-width: 760px; margin: 0 auto; padding: clamp(26px,5vw,52px); }.profile-heading { margin-bottom: 30px; display: flex; align-items: center; gap: 18px; }.profile-heading-icon { width: 82px; height: 82px; flex: 0 0 82px; display: grid; place-items: center; color: var(--meta-blue); background: color-mix(in srgb,var(--meta-blue) 9%,var(--surface)); border-radius: 24px; }.profile-heading-icon .ui-icon { width: 65px; height: 65px; }.profile-heading p { margin-bottom: 0; }.profile-user-id { width: fit-content; margin-top: 12px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; background: color-mix(in srgb,var(--meta-blue) 8%,var(--surface)); border: 1px solid color-mix(in srgb,var(--meta-blue) 22%,var(--line)); border-radius: 9px; }.profile-user-id span { color: var(--muted); font-size: 10px; font-weight: 700; }.profile-user-id strong { direction: ltr; unicode-bidi: isolate; color: var(--meta-blue); font-size: 13px; letter-spacing: .03em; }
.profile-form { max-width: 620px; }.profile-actions { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.profile-actions .secondary-button { min-height: 52px; }
.app-dialog { width: min(520px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 18px; box-shadow: 0 24px 80px rgba(0,0,0,.28); }.app-dialog::backdrop { background: rgba(28,30,33,.58); backdrop-filter: blur(2px); }.app-dialog form { position: relative; padding: 28px; }.dialog-close { position: absolute; top: 15px; left: 15px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--muted); background: var(--soft); border: 0; border-radius: 50%; cursor: pointer; transition: color .18s ease, background-color .18s ease, transform .18s ease; }.dialog-close svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }.dialog-close:hover { color: var(--danger); background: #fff0ef; transform: scale(1.06); }.dialog-close:focus-visible { color: var(--danger); outline: 3px solid rgba(229,57,53,.22); outline-offset: 2px; }.dialog-icon { width: 52px; height: 52px; display: grid; place-items: center; color: var(--meta-blue); background: #EDF2ED; border-radius: 14px; font-size: 24px; }.dialog-illustration { width: 132px; height: 94px; display: block; object-fit: contain; margin: 0 auto 10px; }.app-dialog h2 { margin: 12px 0 6px; }.app-dialog > form > p { margin: 0 0 20px; color: var(--muted); }.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-top: 30px; padding-top: 2px; }.dialog-actions > button { min-height: 48px; }.toast { position: fixed; z-index: 200; inset-inline: 16px; top: 88px; width: fit-content; max-width: calc(100vw - 32px); margin-inline: auto; transform: translateY(-18px); padding: 12px 18px; color: white; background: #202528; border-radius: 10px; box-shadow: 0 8px 25px rgba(0,0,0,.22); opacity: 0; pointer-events: none; text-align: center; transition: .2s ease; }.toast.show { opacity: 1; transform: translateY(0); }

/* The app chrome follows the selected mode; the project preview remains an accurate light-site preview. */
:root[data-theme="dark"] .platform-logo { content: url('assets/startkit-logo-dark-transparent.png'); }
:root[data-theme="dark"] .profession-card,
:root[data-theme="dark"] .tabs-scroll,
:root[data-theme="dark"] .choice-card,
:root[data-theme="dark"] .font-card,
:root[data-theme="dark"] .content-font,
:root[data-theme="dark"] .mega-selector,
:root[data-theme="dark"] .palette-card,
:root[data-theme="dark"] .logo-palette-card,
:root[data-theme="dark"] .preset-palette-frame,
:root[data-theme="dark"] .custom-palette-card,
:root[data-theme="dark"] .add-item-button,
:root[data-theme="dark"] .app-dialog { color: var(--ink); background: var(--surface); border-color: var(--field-border); }
:root[data-theme="dark"] .choice-card.selected,
:root[data-theme="dark"] .font-card.selected,
:root[data-theme="dark"] .content-font.selected,
:root[data-theme="dark"] .preset-palette-frame.selected { background: rgba(145,177,157,.1); }
:root[data-theme="dark"] .upload-zone,
:root[data-theme="dark"] .repeat-item { background: var(--surface-subtle); border-color: var(--field-border); }
:root[data-theme="dark"] .upload-zone:hover { background: rgba(145,177,157,.08); }
:root[data-theme="dark"] .preview-tab.active { background: var(--surface-raised); }
:root[data-theme="dark"] .section-tab.active,
:root[data-theme="dark"] .section-icon,
:root[data-theme="dark"] .step-pill,
:root[data-theme="dark"] .special-label,
:root[data-theme="dark"] .demo-badge,
:root[data-theme="dark"] .choice-icon,
:root[data-theme="dark"] .upload-icon,
:root[data-theme="dark"] .file-pill,
:root[data-theme="dark"] .dialog-icon { background: rgba(145,177,157,.14); }
:root[data-theme="dark"] .payment-note { background: #332b18; }
:root[data-theme="dark"] .account-page-visual { background: radial-gradient(circle at 18% 12%,rgba(255,207,112,.12),transparent 24%),linear-gradient(145deg,#17243a,#242139); }
:root[data-theme="dark"] .account-page-visual strong { color: var(--ink); }
:root[data-theme="dark"] .inline-error,
:root[data-theme="dark"] .remove-item { background: #3a2022; }
:root[data-theme="dark"] .tooltip::after,
:root[data-theme="dark"] .toast { background: #090b0f; }

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 148px;
  padding: 26px 18px 30px;
  color: var(--muted);
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.site-footer-wordmark {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
}
.site-footer p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}
.site-footer small {
  font-size: 12px;
  line-height: 1.5;
}

[dir="ltr"] .preview-panel,
[dir="ltr"] .form-panel { direction: ltr; }
[dir="ltr"] .mini-site-nav strong { margin-left: 0; margin-right: auto; }
[dir="ltr"] .input-with-icon > span { right: auto; left: 15px; }
[dir="ltr"] .tooltip::after { right: auto; left: 0; }
[dir="ltr"] .story-copy img { right: -3%; left: auto; }
[dir="ltr"] .input-with-icon input { padding-right: 14px; padding-left: 44px; }
[dir="ltr"] .tab-status { left: auto; right: 9px; }
[dir="ltr"] .payment-note { text-align: left; }
@media (min-width: 821px) {
  [dir="ltr"] .workspace { grid-template-columns: minmax(0,1fr) var(--preview-column-width); grid-template-areas: "forms preview"; }
}
[dir="ltr"] .project-summary div + div { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .business-card-logo { background-position: right center; }

@media (max-width: 1100px) {
  .projects-manager-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profession-grid { grid-template-columns: repeat(3, 1fr); }
  .form-section { padding-inline: 24px; }
  .choice-row, .two-columns { grid-template-columns: 1fr; }
  .content-font-options, .palette-grid { grid-template-columns: repeat(2,1fr); }
  .custom-color-fields { grid-template-columns: 1fr; }
  .tooltip::after, [dir="ltr"] .tooltip::after { position: fixed; inset: auto 24px 24px; width: auto; max-width: none; transform: none; text-align: center; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }.action-group { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .faq-contact-options { grid-template-columns: 1fr; }
  .setup-screen { padding: 38px 16px 60px; }.profession-grid { grid-template-columns: repeat(2, 1fr); }.profession-card { min-height: 210px; }.profession-illustration { width: 100px; height: 100px; }
  .builder-screen { padding: 20px 12px 60px; }.project-identity-editor { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr) 52px; }.profession-menu-grid { grid-template-columns: repeat(3, 1fr); }.new-project-button strong, .account-button-copy { display: none; }.new-project-button { padding: 0; justify-content: center; }.account-menu-button { padding: 6px; justify-content: center; }.account-menu-button > span:last-child { display: none; }.account-icon { width: 44px; flex-basis: 44px; }.account-menu { position: fixed; inset: 70px 12px auto 12px; width: auto; }
  .workspace { grid-template-columns: 1fr; grid-template-areas: "forms"; }.preview-panel { display: none; }
  .mobile-preview-toggle { position: fixed; z-index: 152; inset-inline-end: 16px; bottom: max(16px, env(safe-area-inset-bottom)); min-height: 52px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: white; background: linear-gradient(135deg, var(--meta-blue), #6F8F7B); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; box-shadow: 0 14px 35px rgba(73,108,92,.34); font-weight: 800; transition: transform .18s ease, box-shadow .18s ease; }
  .mobile-preview-toggle:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(73,108,92,.4); }
  .mobile-preview-toggle:focus-visible { outline: 3px solid rgba(73,108,92,.28); outline-offset: 3px; }
  .mobile-preview-backdrop { position: fixed; z-index: 130; inset: 0; display: block; background: rgba(10,20,36,.58); backdrop-filter: blur(3px); }
  .mobile-preview-backdrop[hidden] { display: none; }
  body.mobile-preview-open { overflow: hidden; }
  body.mobile-preview-open .preview-panel { position: fixed; z-index: 140; inset: 66px 0 76px; width: 100vw; min-width: 0; height: auto; max-height: none; display: flex; flex-direction: column; overflow: hidden; border-radius: 20px 20px 0 0; box-shadow: 0 20px 60px rgba(8,20,38,.34); }
  body.mobile-preview-open .preview-viewport { min-height: 0; height: auto; flex: 1 1 auto; }
  body.mobile-preview-open .mobile-preview-toggle { background: #17243a; box-shadow: 0 12px 30px rgba(8,20,38,.38); }
  body.mobile-preview-open .mobile-preview-open-icon { display: none; }
  body.mobile-preview-open .mobile-preview-close-icon { display: block; }
  .overall-progress { grid-template-columns: 1fr auto; }
  .user-menu-copy, .header-projects-copy { display: none; }.user-menu-button, .header-projects-menu-button { padding: 4px; }.user-menu, .header-projects-menu { position: fixed; inset: 70px 12px auto 12px; width: auto; }
  .account-page-shell { grid-template-columns: 1fr; }.account-page-visual { min-height: 220px; padding: 24px; display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 18px; }.account-page-visual svg { width: 150px; margin: 0; grid-row: 1 / span 2; }.account-page-visual strong { font-size: 18px; }
}
@media (max-width: 560px) {
  .toast { top: 74px; }
  .faq-screen { min-height: calc(100vh - 62px); padding: 22px 12px 64px; }
  .faq-hero { padding: 28px 22px; border-radius: 22px; }
  .faq-hero h1 { font-size: 34px; }
  .faq-category-heading { align-items: flex-start; }
  .faq-question { min-height: 66px; padding: 15px 14px; grid-template-columns: minmax(0,1fr) 30px; gap: 10px; font-size: 14px; }
  .faq-question-icon { width: 30px; height: 30px; }
  .faq-answer { padding: 0 14px 17px; font-size: 13px; }
  .faq-contact-card { padding: 22px 16px; border-radius: 22px; }
  .faq-contact-intro { flex-direction: column; }
  .projects-screen { padding: 24px 12px 60px; }.projects-manager-shell { padding: 18px; border-radius: 18px; }.projects-manager-header { align-items: stretch; flex-direction: column; }.projects-manager-heading { align-items: flex-start; }.projects-manager-icon { width: 58px; height: 58px; flex-basis: 58px; }.projects-manager-icon .ui-icon { width: 54px; height: 54px; }.projects-create-button { width: 100%; justify-content: center; }.projects-manager-grid { grid-template-columns: 1fr; }
  body { font-size: 15px; }.topbar { height: 62px; padding: 0 14px; }.platform-logo { width: 145px; height: 48px; }
  .header-actions { gap: 4px; }.preference-controls { gap: 0; padding-inline-start: 4px; }.preference-trigger { width: 34px; height: 34px; }.help-menu-button { padding-inline: 4px; gap: 4px; }.help-menu-copy, .help-chevron { display: none; }.help-question-icon { width: 38px; height: 38px; }.help-menu, .preference-menu { position: fixed; inset: 70px 12px auto 12px; width: auto; }
  .setup-top-actions { margin-bottom: 18px; }.setup-projects-button { width: 100%; }.setup-intro h1, .payment-card h1 { font-size: 28px; }.setup-intro p { font-size: 15px; }.profession-grid { gap: 10px; }.profession-card { min-height: 176px; padding: 12px 8px; }.profession-illustration { width: 80px; height: 80px; font-size: 36px; }.profession-card strong { font-size: 17px; }.profession-card small { font-size: 10px; }.setup-form { padding: 18px; }
  .custom-color-fields { grid-template-columns: 1fr; }
  .product-category-add { grid-template-columns: 1fr; }.product-category-add .secondary-button { width: 100%; }
  .builder-heading h1 { font-size: 26px; }.project-identity-editor { grid-template-columns: 1fr 1fr; }.builder-brand-field, .profession-switcher { width: 100%; grid-column: 1 / -1; }.profession-menu-button { width: 100%; }.new-project-button, .account-menu-wrap, .account-menu-button { width: 100%; }.new-project-button strong { display: block; }.account-button-copy { display: flex; }.account-menu-button > span:last-child { display: inline; }.profession-menu-grid { grid-template-columns: repeat(2, 1fr); }.overall-progress { gap: 8px; padding: 12px; }.progress-copy strong { font-size: 12px; }.progress-copy div span { display: none; }.progress-number strong { font-size: 22px; }
  .section-tabs-wrap { padding: 8px 5px; }.section-tab { min-width: 94px; }.tabs-scroll { display: grid; place-items: center; }.form-section { padding: 22px 16px 30px; }.section-heading h2 { font-size: 22px; }.identity-subtabs { grid-template-columns: repeat(4,minmax(62px,1fr)); overflow-x: auto; }.identity-subtab { min-height: 58px; padding: 6px; }.choice-row, .two-columns, .font-options { grid-template-columns: 1fr; }.content-font-options, .palette-grid { grid-template-columns: repeat(2, 1fr); }.action-group { grid-template-columns: 1fr; }.form-actions button { width: 100%; }.project-summary { grid-template-columns: 1fr; }.project-summary div + div { border-top: 1px solid var(--line); border-right: 0; }
  .tooltip::after { position: fixed; inset: auto 12px 12px; width: auto; max-width: none; transform: none; text-align: center; }
  .account-screen { padding: 20px 12px 60px; }.account-page-shell { border-radius: 18px; }.account-page-visual { display: none; }.account-form-area, .profile-card { padding: 22px 16px; }.profile-heading { align-items: flex-start; }.profile-heading-icon { width: 62px; height: 62px; flex-basis: 62px; border-radius: 18px; }.profile-heading-icon .ui-icon { width: 50px; height: 50px; }.profile-actions { grid-template-columns: 1fr; }.user-menu { inset-inline: 8px; }.user-menu-chevron { display: none; }
  .country-select-menu { max-height: none; }.country-options-list { max-height: 230px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
/* Marketing landing page: quiet editorial rhythm, StartKit palette and existing type. */
.landing-screen{--home-ink:#202528;--home-muted:#777f82;--home-line:#e6e7e4;--home-paper:#f8f8f6;--home-blue:#496C5C;--home-green:#1c7658;position:relative;overflow:hidden;color:var(--home-ink);background:#fbfbfa;font-family:'Cairo',Arial,sans-serif}
.landing-screen [hidden]{display:none!important}
.landing-hero{position:relative;min-height:690px;max-width:1320px;margin:auto;padding:105px clamp(32px,8vw,120px) 60px;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:22px}
.landing-hero-copy{position:relative;z-index:2;max-width:510px;animation:home-enter .7s cubic-bezier(.2,.75,.2,1) both}
.landing-eyebrow,.section-kicker{display:block;color:#74817c;font-size:11px;font-weight:700;letter-spacing:.07em}
.landing-eyebrow:before{content:'';width:7px;height:7px;margin-inline-end:9px;display:inline-block;vertical-align:1px;background:#50a47e;border-radius:50%}
.landing-hero h1{margin:24px 0 18px;font-size:clamp(48px,6vw,76px);line-height:1.16;letter-spacing:-.055em;font-weight:600;text-wrap:balance}
.landing-hero h1 em{color:#496c5c;font-style:normal}
.landing-hero-copy>p:not(.landing-hero-note){max-width:450px;margin:0;color:#6d7777;font-size:16px;line-height:1.95}
.landing-actions{display:flex;align-items:center;gap:22px;margin-top:29px}
.landing-primary{min-height:47px;padding:0 21px;display:inline-flex;align-items:center;justify-content:center;gap:19px;color:#fff;background:#252928;border:0;border-radius:999px;font:inherit;font-size:12px;font-weight:700;white-space:nowrap;text-decoration:none;cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.landing-primary:hover{transform:translateY(-2px);background:#416b58;box-shadow:0 8px 22px rgba(42,81,62,.17)}
.landing-primary:active{transform:translateY(1px) scale(.99)}
.landing-primary span,.landing-text-link span{font-size:17px;transition:transform .2s ease}
.landing-primary:hover span{transform:translateX(-3px)}
[dir="ltr"] .landing-primary:hover span{transform:translateX(3px)}
.landing-text-link{display:inline-flex;align-items:center;gap:8px;color:#535f5a;font-size:11px;font-weight:700;text-decoration:none;transition:color .2s ease}
.landing-text-link:hover{color:var(--home-green)}
.landing-text-link:hover span{transform:translateX(-3px)}
[dir="ltr"] .landing-text-link:hover span{transform:translateX(3px)}
[lang="en"] .landing-primary:hover .directional-arrow,[lang="en"] .landing-text-link:hover .directional-arrow{transform:translateX(3px) scaleX(-1)}
.landing-hero-note{margin:30px 0 0;display:flex;align-items:center;gap:9px;color:#858d89;font-size:10px}
.note-mark,.suite-label-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#64a785;box-shadow:0 0 0 4px #e9f2ec}
.landing-hero-visual{position:relative;min-width:0;margin:0;animation:home-enter .8s .08s cubic-bezier(.2,.75,.2,1) both}
.landing-hero-visual img{width:115%;max-width:none;height:auto;display:block;object-fit:contain;transform:translateX(3%);filter:drop-shadow(0 23px 34px rgba(38,55,46,.12));animation:hero-drift 7s ease-in-out infinite}
.landing-hero-visual figcaption{position:absolute;right:7%;bottom:8%;padding:9px 15px;color:#57635d;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.8);border-radius:999px;box-shadow:0 6px 22px rgba(45,55,49,.08);font-size:10px}
[dir="ltr"] .landing-hero-visual img{transform:translateX(-3%)}
.landing-scroll-cue{position:absolute;bottom:26px;left:50%;display:flex;align-items:center;gap:8px;color:#929995;font-size:9px;text-decoration:none;transform:translateX(-50%)}
.landing-scroll-cue span{width:22px;height:22px;display:grid;place-items:center;border:1px solid #d8ded9;border-radius:50%;font-size:13px;transition:transform .2s ease}
.landing-scroll-cue:hover span{transform:translateY(3px)}
.landing-proof{width:min(1090px,calc(100% - 80px));min-height:104px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;border-top:1px solid var(--home-line);border-bottom:1px solid var(--home-line)}
.proof-item{min-height:54px;padding:0 28px;display:flex;align-items:center;justify-content:center;gap:13px;color:#69746e;font-size:11px}
.proof-item+.proof-item{border-inline-start:1px solid var(--home-line)}
.proof-item b{color:#a9b7ad;font-size:10px;font-weight:500}
.landing-suite{max-width:1180px;margin:auto;padding:145px 48px 132px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;column-gap:clamp(45px,8vw,112px);row-gap:48px}
.suite-copy{max-width:440px}.suite-copy h2,.fields-copy h2,.human-copy h2{margin:13px 0 17px;font-size:clamp(35px,4.5vw,57px);line-height:1.3;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.suite-copy p,.fields-copy p,.human-copy p{max-width:430px;color:#747d79;font-size:13px;line-height:2}
.suite-copy .landing-text-link{margin-top:11px}
.suite-visual{position:relative;min-height:318px;display:grid;place-items:center;background:#edf1ec;border-radius:4px;overflow:visible}
.suite-visual:before{content:'';position:absolute;inset:15px -15px -15px 15px;border:1px solid #dce5dd;z-index:0}
.suite-visual img{position:relative;z-index:1;width:100%;height:318px;display:block;object-fit:cover;object-position:center;border-radius:3px}
.suite-label{position:absolute;z-index:2;inset:auto auto 18px 18px;padding:10px 14px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:2px;box-shadow:0 8px 22px rgba(44,54,48,.09)}
.suite-label>span:last-child{display:grid;gap:1px}.suite-label b{font-size:10px}.suite-label small{color:#87918b;font-size:9px}
.suite-index{position:absolute;z-index:2;right:17px;top:17px;color:#fff;text-shadow:0 1px 8px #19231c;font-size:9px;direction:ltr}.suite-index i{width:30px;height:1px;margin:0 8px 3px;display:inline-block;background:#fff}
.suite-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--home-line);border-bottom:1px solid var(--home-line)}
.suite-list article{min-height:112px;padding:21px 24px;display:grid;grid-template-columns:28px 1fr 20px;align-items:start;gap:11px}
.suite-list article+article{border-inline-start:1px solid var(--home-line)}
.suite-list article>span{padding-top:3px;color:#a7b4aa;font-size:9px}
.suite-list article h3{margin:0 0 4px;font-size:13px;font-weight:700}.suite-list article p{margin:0;color:#89918c;font-size:10px;line-height:1.8}.suite-list article>b{color:#87988d;font-size:15px;font-weight:400}
.landing-value{padding:106px 32px 114px;background:#f3f5f2}
.section-heading-center{max-width:640px;margin:0 auto 43px;text-align:center}.section-heading-center h2{margin:11px 0 8px;font-size:clamp(31px,4vw,48px);font-weight:600;letter-spacing:-.04em;line-height:1.3;text-wrap:balance}.section-heading-center p{margin:0;color:#7c8580;font-size:12px;line-height:1.8}
.value-grid{width:min(100%,1015px);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.value-tile{min-height:310px;padding:26px 25px 25px;display:flex;flex-direction:column;align-items:flex-start;background:#fff;border:1px solid rgba(51,68,57,.04);border-radius:4px;transition:transform .24s ease,box-shadow .24s ease}
.value-tile:hover{transform:translateY(-5px);box-shadow:0 16px 35px rgba(43,59,48,.07)}
.value-simple{background:#eef5f0}.value-guided{background:#edf2f5}.value-reviewed{background:#f1eff4}
.tile-art{height:132px;width:100%;margin-bottom:17px;overflow:hidden;background:#e9eee9;border-radius:2px}.tile-art img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .55s cubic-bezier(.2,.75,.2,1)}.value-tile:hover .tile-art img{transform:scale(1.04)}
.tile-number{color:#718178;font-size:9px;font-weight:700;letter-spacing:.05em}.value-tile h3{margin:7px 0 4px;font-size:16px;font-weight:600}.value-tile p{max-width:260px;margin:0;color:#7b8580;font-size:10px;line-height:1.9}
.landing-footnote{margin:26px auto 0;color:#8b938f;font-size:9px;text-align:center}
.landing-fields{max-width:1180px;margin:auto;padding:143px 48px 134px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:70px}
.fields-copy h2{margin-top:13px}.fields-copy .landing-text-link{margin-top:11px}.field-tags{max-width:390px;margin:23px 0 21px;display:flex;flex-wrap:wrap;gap:8px}.field-tags span{padding:7px 12px;color:#56665c;background:#f0f3ef;border:1px solid #e9ede9;border-radius:999px;font-size:9px}
.fields-gallery{height:445px;position:relative;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr .85fr;gap:12px;padding:5px}
.field-photo{position:relative;margin:0;min-width:0;overflow:hidden;background:#e8eee9;border-radius:3px}.field-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .65s cubic-bezier(.2,.75,.2,1)}.field-photo:hover img{transform:scale(1.04)}
.field-photo-large{grid-row:1/3}.field-photo-small{height:100%}.field-photo-wide{height:100%}.field-photo figcaption{position:absolute;inset:auto 12px 12px auto;padding:6px 10px;color:#fff;background:rgba(27,38,31,.7);border-radius:2px;font-size:9px;backdrop-filter:blur(8px)}
.gallery-note{position:absolute;right:-5px;top:-24px;color:#89928c;font-size:9px}
.landing-stories{padding:117px 35px 126px;background:#f5f2f5;border-radius:40px 40px 0 0}
.landing-stories .section-heading-center{margin-bottom:40px}
.story-grid{width:min(100%,1030px);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.story-card{overflow:hidden;background:#fff;border:1px solid #f0eef0;border-radius:4px;transition:transform .22s ease,box-shadow .22s ease}.story-card:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(44,49,45,.07)}
.story-card>img{width:100%;height:155px;display:block;object-fit:cover}.story-card>div{padding:18px 19px 21px}.story-card>div>span{color:#849087;font-size:9px}.story-card h3{margin:8px 0 5px;font-size:14px;line-height:1.65;font-weight:600}.story-card p{margin:0;color:#828b85;font-size:10px;line-height:1.8}.story-disclaimer{margin:22px 0 0;color:#9a9b98;font-size:9px;text-align:center}
.landing-human{max-width:1120px;margin:auto;padding:140px 48px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(50px,9vw,120px)}
.human-photo{height:400px;position:relative;overflow:hidden;background:#e8eee9}.human-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 40%}.human-photo span{position:absolute;inset:auto auto 18px 18px;padding:8px 12px;color:#fff;background:rgba(26,35,29,.7);font-size:9px}
.human-copy h2{font-size:clamp(33px,4vw,50px)}.human-copy p{margin:0 0 19px}
.landing-manifesto{min-height:390px;padding:100px 35px 96px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#edf2ed}
.landing-manifesto .section-kicker{position:relative;z-index:1}.landing-manifesto h2{max-width:780px;margin:16px auto;font-size:clamp(34px,5.5vw,64px);line-height:1.28;letter-spacing:-.05em;font-weight:600;text-wrap:balance;position:relative;z-index:1}.landing-manifesto>p{max-width:650px;margin:0 auto;color:#6d7771;font-size:12px;line-height:2;position:relative;z-index:1}.manifesto-link{margin-top:24px;color:#426d54;font-size:10px;font-weight:700;text-decoration:none;position:relative;z-index:1}.manifesto-mark{position:absolute;inset:5% auto auto 9%;color:rgba(48,89,61,.045);font-size:330px;font-weight:700;line-height:1;pointer-events:none}
.landing-faq{padding:116px 24px 120px}.landing-faq .section-heading-center{margin-bottom:35px}.landing-faq-list{max-width:680px;margin:auto;border-top:1px solid var(--home-line)}.landing-faq-list details{border-bottom:1px solid var(--home-line)}.landing-faq-list summary{min-height:64px;padding:18px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#39413d;font-size:12px;font-weight:600;cursor:pointer;list-style:none}.landing-faq-list summary::-webkit-details-marker{display:none}.landing-faq-list summary:after{content:'+';width:21px;height:21px;flex:0 0 21px;display:grid;place-items:center;color:#718078;border:1px solid #dfe5e0;border-radius:50%;font-size:15px;font-weight:400;transition:transform .2s ease}.landing-faq-list details[open] summary:after{transform:rotate(45deg)}.landing-faq-list details p{max-width:590px;margin:-2px 0 19px;padding-inline-end:26px;color:#7a837e;font-size:10px;line-height:1.9}
.landing-faq-more{width:max-content;margin:32px auto 0;display:flex}
.landing-start{padding:104px clamp(22px,6vw,70px) 96px;background:#f1f3ef;scroll-margin-top:82px}.start-heading{max-width:680px;margin:0 auto 31px;text-align:center}.start-heading h2{margin:10px 0 4px;font-size:clamp(31px,4vw,45px);line-height:1.3;font-weight:600;letter-spacing:-.04em}.start-heading p{margin:0;color:#7b8580;font-size:11px;line-height:1.8}.landing-setup-slot{max-width:1100px;margin:auto;padding:25px 27px;background:#fff;border:1px solid #eaede8}
.landing-setup-slot .setup-screen{min-height:0;padding:18px 10px 28px;background:transparent}.landing-setup-slot .setup-top-actions{margin-bottom:9px}.landing-setup-slot .setup-projects-button{min-height:34px;padding:4px 10px;font-size:10px}.landing-setup-slot .setup-intro{margin-bottom:22px}.landing-setup-slot .setup-intro h1{font-size:25px}.landing-setup-slot .setup-intro p{font-size:12px}.landing-setup-slot .profession-grid{gap:10px}.landing-setup-slot .profession-card{min-height:170px}.landing-setup-slot .setup-form{max-width:650px;margin:25px auto 0}.landing-setup-slot .large-button{min-height:52px}
.landing-footer{min-height:148px;padding:35px clamp(24px,7vw,90px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;color:#d4d8d4;background:#222724}
.landing-footer>a:first-child{color:#fff;font-size:22px;font-weight:700;letter-spacing:-.05em;text-decoration:none}.landing-footer>a:first-child span{margin-inline-start:2px;color:#7da18b;font-size:10px;vertical-align:top}.landing-footer p{grid-column:1;grid-row:2;margin:0;color:#8e9891;font-size:9px}.landing-footer>a:nth-of-type(2){grid-column:3;grid-row:1/3;justify-self:end;color:#d4d8d4;font-size:10px;text-decoration:none}.landing-footer>a:nth-of-type(2):hover{color:#a9d4b7}.landing-footer>small{grid-column:2;grid-row:2;color:#7b847e;font-size:8px}
@keyframes home-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes hero-drift{0%,100%{translate:0 0}50%{translate:0 -9px}}
@media(max-width:980px){.landing-hero{min-height:600px;padding:78px 50px 55px;grid-template-columns:.95fr 1.05fr}.landing-hero h1{font-size:56px}.landing-hero-visual img{width:120%}.landing-suite,.landing-fields{padding-inline:36px;column-gap:38px}.fields-gallery{height:385px}.suite-visual,.suite-visual img{min-height:270px;height:270px}}
@media(max-width:720px){.landing-hero{min-height:auto;padding:64px 24px 54px;grid-template-columns:1fr;gap:0;text-align:center}.landing-hero-copy{max-width:600px;margin:auto}.landing-eyebrow{font-size:10px}.landing-hero h1{margin:18px 0 10px;font-size:clamp(43px,10vw,64px)}.landing-hero-copy>p:not(.landing-hero-note){max-width:470px;margin:auto;font-size:13px}.landing-actions{justify-content:center;margin-top:22px;flex-wrap:wrap}.landing-hero-note{justify-content:center;margin-top:19px}.landing-hero-visual{max-width:560px;margin:4px auto 0}.landing-hero-visual img{width:100%;transform:none}.landing-hero-visual figcaption{right:5%;bottom:7%;font-size:8px}.landing-scroll-cue{position:static;justify-content:center;grid-row:3;transform:none;margin-top:-3px}.landing-proof{width:calc(100% - 40px);min-height:0;grid-template-columns:1fr;padding:10px 0}.proof-item{min-height:46px;justify-content:flex-start;padding:0 13px;font-size:10px}.proof-item+.proof-item{border-inline-start:0;border-top:1px solid var(--home-line)}.landing-suite,.landing-fields{padding:84px 22px;grid-template-columns:1fr;gap:27px}.suite-copy h2,.fields-copy h2,.human-copy h2{font-size:39px}.suite-copy p,.fields-copy p,.human-copy p{font-size:12px}.suite-visual{min-height:0;height:260px}.suite-visual img{height:260px}.suite-list{grid-template-columns:1fr}.suite-list article{min-height:86px;padding:16px 8px}.suite-list article+article{border-inline-start:0;border-top:1px solid var(--home-line)}.landing-value{padding:81px 20px 85px}.section-heading-center{margin-bottom:29px}.section-heading-center h2{font-size:35px}.section-heading-center p{font-size:10px}.value-grid{grid-template-columns:1fr;gap:10px}.value-tile{min-height:0;padding:18px 20px 20px;display:grid;grid-template-columns:106px 1fr;grid-template-rows:auto auto auto;column-gap:18px;align-items:center}.tile-art{grid-column:1;grid-row:1/4;width:106px;height:112px;margin:0}.tile-number{grid-column:2;align-self:end}.value-tile h3{grid-column:2;margin:4px 0 1px;font-size:14px}.value-tile p{grid-column:2;font-size:9px}.landing-footnote{font-size:8px}.landing-fields{gap:34px}.fields-gallery{height:370px}.field-photo figcaption{font-size:8px}.landing-stories{padding:82px 20px 88px;border-radius:28px 28px 0 0}.story-grid{max-width:440px;grid-template-columns:1fr;gap:10px}.story-card{display:grid;grid-template-columns:124px 1fr;min-height:138px}.story-card>img{height:100%;min-height:138px}.story-card>div{padding:14px}.story-card h3{font-size:12px}.story-card p{font-size:9px}.landing-human{padding:86px 22px;grid-template-columns:1fr;gap:29px}.human-photo{height:310px;order:2}.human-copy{order:1}.landing-manifesto{min-height:350px;padding:77px 25px}.landing-manifesto h2{font-size:39px}.landing-manifesto>p{font-size:10px}.manifesto-mark{font-size:230px}.landing-faq{padding:83px 20px}.landing-faq-list summary{min-height:59px;font-size:11px}.landing-start{padding:75px 14px 68px;scroll-margin-top:68px}.landing-setup-slot{padding:12px 8px}.landing-setup-slot .setup-screen{padding:14px 4px 22px}.landing-setup-slot .profession-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-footer{min-height:138px;grid-template-columns:1fr auto;padding:28px 22px}.landing-footer p{grid-column:1;grid-row:2}.landing-footer>a:nth-of-type(2){grid-column:2;grid-row:1/3}.landing-footer>small{grid-column:1;grid-row:3}.landing-primary{min-height:44px}}
@media(max-width:390px){.landing-hero{padding-inline:17px}.landing-hero h1{font-size:41px}.landing-actions{gap:13px}.landing-actions .landing-primary{padding-inline:17px}.landing-text-link{font-size:10px}.fields-gallery{height:320px}.story-card{grid-template-columns:106px 1fr}.story-card>div{padding:11px}.landing-footer{font-size:8px}}
:root[data-theme="dark"] .landing-screen{--home-ink:#eff1ef;--home-muted:#b2bab4;--home-line:#3a413c;color:#eff1ef;background:#1d211e}
:root[data-theme="dark"] .landing-proof,:root[data-theme="dark"] .landing-suite,:root[data-theme="dark"] .landing-fields,:root[data-theme="dark"] .landing-human,:root[data-theme="dark"] .landing-faq{color:#eff1ef}
:root[data-theme="dark"] .landing-value,:root[data-theme="dark"] .landing-start{background:#252b26}
:root[data-theme="dark"] .value-tile,:root[data-theme="dark"] .story-card,:root[data-theme="dark"] .landing-setup-slot{background:#2b312c;border-color:#3b443d}
:root[data-theme="dark"] .landing-stories{background:#29282b}
:root[data-theme="dark"] .landing-manifesto{background:#26312a}
:root[data-theme="dark"] .landing-setup-slot .setup-screen{background:transparent}
:root[data-theme="dark"] .landing-screen h1,:root[data-theme="dark"] .landing-screen h2,:root[data-theme="dark"] .landing-screen h3{color:#f0f2f0}
:root[data-theme="dark"] .landing-screen p,:root[data-theme="dark"] .landing-screen .landing-text-link{color:#b2bab4}
@media(prefers-reduced-motion:reduce){.landing-screen *,.landing-screen *:before,.landing-screen *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Landing page refinement: centered promise, tangible deliverables, and profession reel. */
.landing-hero{min-height:780px;max-width:1120px;padding:78px 32px 0;display:flex;flex-direction:column;align-items:center;gap:17px;text-align:center}
.landing-hero-copy{max-width:790px;margin:0 auto}
.landing-hero h1{margin:20px 0 20px;font-size:clamp(49px,7.2vw,86px);line-height:1.28;letter-spacing:-.055em}
.landing-hero-copy>p:not(.landing-hero-note){max-width:650px;margin:0 auto;font-size:15px;line-height:2.05}
.landing-actions{justify-content:center;margin-top:26px}
.landing-price-button{min-height:61px;padding:8px 19px 8px 24px;gap:22px}
.landing-button-copy{display:grid;gap:2px;text-align:start;line-height:1.25}
.landing-button-copy strong{font-size:12px}
.landing-button-copy small{color:rgba(255,255,255,.72);font-size:8px;font-weight:600}
.landing-button-arrow{font-size:18px!important}
.landing-primary:hover .landing-button-copy,[dir="ltr"] .landing-primary:hover .landing-button-copy{transform:none}
.landing-hero-note{justify-content:center;margin-top:22px;line-height:1.8}
.landing-hero-visual{width:min(820px,100%);margin:-8px auto -50px}
.landing-hero-visual img{width:100%;max-width:100%;max-height:440px;object-fit:contain;transform:none}
[dir="ltr"] .landing-hero-visual img{transform:none}
.landing-hero-visual figcaption{right:50%;bottom:7%;transform:translateX(50%);white-space:nowrap}
.landing-suite{max-width:1180px;padding:145px 48px 132px;display:block}
.suite-heading{max-width:720px;margin-bottom:48px}
.suite-heading h2,.fields-heading h2{margin:13px 0 14px;font-size:clamp(35px,4.5vw,57px);line-height:1.4;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.suite-heading p,.fields-heading p{max-width:590px;margin:0 auto;color:#747d79;font-size:12px;line-height:2}
.deliverables-grid{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.deliverable-card{overflow:visible;background:transparent;border:0;border-radius:5px;transition:transform .28s cubic-bezier(.2,.75,.2,1)}
.deliverable-card:nth-child(2),.deliverable-card:nth-child(3),.deliverable-card:nth-child(4){background:transparent}
.deliverable-card:hover{transform:translateY(-6px)}
.deliverable-card img{width:100%;height:350px;display:block;object-fit:contain;transition:transform .7s cubic-bezier(.2,.75,.2,1);filter:drop-shadow(0 18px 24px rgba(43,59,48,.08))}
.deliverable-card:hover img{transform:scale(1.025)}
.deliverable-card div{padding:22px 24px 25px}
.deliverable-card span{color:#7e8a83;font-size:9px;font-weight:700;letter-spacing:.04em}
.deliverable-card h3{margin:6px 0 5px;font-size:17px;font-weight:700}
.deliverable-card p{margin:0;color:#7a847f;font-size:10px;line-height:1.9}
.landing-fields{max-width:none;padding:140px 0 132px;display:block;overflow:hidden}
.fields-heading{max-width:730px;margin:0 auto 44px;padding:0 24px}
.profession-marquee{overflow:hidden;direction:ltr;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.profession-track{width:max-content;display:flex;animation:profession-left 54s linear infinite;will-change:transform}
.profession-marquee:hover .profession-track{animation-play-state:paused}
.profession-set{display:flex;gap:14px;padding-right:14px}
.profession-set figure{width:286px;flex:0 0 286px;margin:0;text-align:start}
.profession-set img{width:100%;height:382px;display:block;object-fit:contain;background:transparent;border-radius:5px;filter:drop-shadow(0 12px 18px rgba(44,55,48,.09));transition:transform .3s ease,filter .3s ease}
.profession-set figure:hover img{transform:translateY(-5px);filter:drop-shadow(0 18px 24px rgba(44,55,48,.14))}
.profession-set figcaption{padding:11px 3px 0;color:#4f5b55;font-size:11px;font-weight:700}
.fields-link{width:max-content;margin:32px auto 0}
@keyframes profession-left{to{transform:translateX(-50%)}}
@media(max-width:980px){.landing-hero{min-height:710px;padding:70px 32px 0}.landing-hero h1{font-size:66px}.landing-suite{padding-inline:34px}.deliverable-card img{height:300px}.profession-set figure{width:250px;flex-basis:250px}.profession-set img{height:334px}}
@media(max-width:720px){.landing-hero{min-height:auto;padding:60px 22px 0;gap:12px}.landing-hero h1{margin:17px 0 14px;font-size:clamp(43px,12vw,59px);line-height:1.35}.landing-hero-copy>p:not(.landing-hero-note){font-size:13px;line-height:2}.landing-price-button{min-height:59px}.landing-hero-note{margin-top:17px}.landing-hero-visual{margin:0 auto -12px}.landing-hero-visual figcaption{bottom:3%;max-width:90%;white-space:normal}.landing-suite{padding:92px 20px}.suite-heading h2,.fields-heading h2{font-size:37px;line-height:1.42}.deliverables-grid{grid-template-columns:1fr;gap:12px}.deliverable-card img{height:auto;aspect-ratio:1.22/1}.deliverable-card div{padding:18px 20px 21px}.landing-fields{padding:92px 0}.fields-heading{margin-bottom:31px}.profession-set figure{width:218px;flex-basis:218px}.profession-set img{height:291px}.profession-track{animation-duration:42s}}
@media(max-width:390px){.landing-hero h1{font-size:42px}.landing-price-button{padding-inline:18px}.landing-button-arrow{display:none}.deliverable-card h3{font-size:15px}.profession-set figure{width:190px;flex-basis:190px}.profession-set img{height:254px}}
@media(prefers-reduced-motion:reduce){.profession-track{animation:none}.profession-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.profession-set[aria-hidden="true"]{display:none}}

/* Continuous profession reel with three full compositions in view. */
.profession-marquee{width:100%;margin:0;padding-block:28px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.08) .08%,rgba(0,0,0,.24) .22%,rgba(0,0,0,.48) .42%,rgba(0,0,0,.74) .65%,rgba(0,0,0,.92) .82%,#000 1%,#000 99%,rgba(0,0,0,.92) 99.18%,rgba(0,0,0,.74) 99.35%,rgba(0,0,0,.48) 99.58%,rgba(0,0,0,.24) 99.78%,rgba(0,0,0,.08) 99.92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.08) .08%,rgba(0,0,0,.24) .22%,rgba(0,0,0,.48) .42%,rgba(0,0,0,.74) .65%,rgba(0,0,0,.92) .82%,#000 1%,#000 99%,rgba(0,0,0,.92) 99.18%,rgba(0,0,0,.74) 99.35%,rgba(0,0,0,.48) 99.58%,rgba(0,0,0,.24) 99.78%,rgba(0,0,0,.08) 99.92%,transparent)}
.profession-marquee::-webkit-scrollbar{display:none}
.profession-track{width:max-content;display:flex;align-items:stretch;animation:none;transform:none;will-change:auto}
.profession-set{display:flex;gap:18px;padding-right:18px}
.profession-set figure{width:clamp(220px,calc((min(1180px,100vw) - 72px)/3),360px);flex:0 0 clamp(220px,calc((min(1180px,100vw) - 72px)/3),360px);position:relative;margin:0;text-align:center;cursor:pointer;transform-origin:center bottom;transition:transform .26s cubic-bezier(.2,.75,.2,1);z-index:1}
.profession-set img{width:100%;height:410px;display:block;object-fit:contain;background:transparent;filter:drop-shadow(0 16px 22px rgba(44,55,48,.1));transition:transform .35s ease,filter .35s ease}
.profession-set figure:hover,.profession-set figure:focus-visible{transform:translateY(-8px) scale(1.11);z-index:4}
.profession-set figure:focus-visible{outline:2px solid #557767;outline-offset:5px;border-radius:6px}
.profession-set figure:has(+ figure:hover),.profession-set figure:hover+figure{transform:translateY(-3px) scale(1.045);z-index:2}
.profession-set figure:hover img,.profession-set figure:focus-visible img{filter:drop-shadow(0 22px 28px rgba(44,55,48,.15))}
.profession-set figcaption{padding:11px 0 0;color:#303a35;font-size:17px;font-weight:800;line-height:1.5;text-align:center}
.profession-marquee:hover .profession-track,.profession-marquee:focus-within .profession-track,.profession-marquee:active .profession-track{animation-play-state:paused}
.profession-gallery-shell{position:relative}
.profession-gallery-arrow{position:absolute;z-index:8;top:50%;width:68px;height:68px;padding:0;display:grid;place-items:center;color:#304139;background:rgba(248,248,246,.5);border:1px solid rgba(48,65,57,.1);border-radius:50%;box-shadow:0 10px 30px rgba(31,43,36,.06);font:300 40px/1 Arial,sans-serif;opacity:0;pointer-events:none;transform:translateY(-50%) scale(.94);backdrop-filter:blur(6px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.75,.2,1),color .25s ease,background-color .25s ease,box-shadow .25s ease}
.profession-gallery-arrow span{width:100%;height:100%;display:grid;place-items:center;line-height:1;transform:translateY(-2px)}
.profession-gallery-arrow-left{left:14px}.profession-gallery-arrow-right{right:14px}
.profession-gallery-shell:hover .profession-gallery-arrow,.profession-gallery-shell:focus-within .profession-gallery-arrow{opacity:.46;pointer-events:auto}
.profession-gallery-shell .profession-gallery-arrow:hover,.profession-gallery-shell .profession-gallery-arrow:focus-visible{color:#20362b;background:rgba(255,255,255,.86);box-shadow:0 14px 38px rgba(31,43,36,.13);opacity:.95;transform:translateY(-50%) scale(1.08)}
.profession-gallery-arrow:active{transform:translateY(-50%) scale(1.01)!important}
:root[data-theme="dark"] .profession-gallery-arrow{color:#dce8e0;background:rgba(29,33,30,.55);border-color:rgba(220,232,224,.14);box-shadow:0 12px 34px rgba(0,0,0,.16)}
:root[data-theme="dark"] .profession-gallery-arrow:hover,:root[data-theme="dark"] .profession-gallery-arrow:focus-visible{color:#fff;background:rgba(43,49,44,.9);box-shadow:0 16px 40px rgba(0,0,0,.28)}
@media(max-width:720px){.profession-set{gap:12px;padding-right:12px}.profession-set figure{width:72vw;flex-basis:72vw}.profession-set img{height:340px}.profession-set figcaption{font-size:15px}}
@media(max-width:390px){.profession-set img{height:300px}}
@media(prefers-reduced-motion:reduce){.profession-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}.profession-track{animation:none}.profession-set[aria-hidden="true"]{display:none}}
/* Existing header home control retained without changing its appearance. */
.home-menu-button{order:-1;min-height:42px;padding:0 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;background:#142b45;border:1px solid rgba(255,255,255,.12);border-radius:12px;font:inherit;font-size:12px;font-weight:800;box-shadow:0 5px 14px rgba(11,35,61,.13);transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.home-menu-button:hover{transform:translateY(-2px);background:#496C5C;box-shadow:0 9px 20px rgba(73,108,92,.24)}
.home-menu-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Shared visual language: platform and landing page. */
:root{
  --meta-blue:#496c5c;
  --meta-blue-dark:#355747;
  --ink:#202528;
  --muted:#777f82;
  --line:#e3e7e2;
  --soft:#f3f5f2;
  --white:#fff;
  --success:#557f67;
  --warning:#b89d62;
  --preview-primary:#496c5c;
  --preview-secondary:#edf2ed;
  --preview-accent:#7da18b;
  --preview-text:#202528;
  --surface:#fff;
  --surface-raised:#fff;
  --surface-subtle:#f8f8f6;
  --field-border:#d4dbd5;
  --shadow:0 1px 2px rgba(32,37,40,.05),0 12px 30px rgba(45,68,55,.06);
}
:root[data-theme="dark"]{
  --ink:#eff1ef;
  --muted:#b2bab4;
  --line:#3a413c;
  --soft:#1d211e;
  --white:#252b26;
  --surface:#252b26;
  --surface-raised:#2b312c;
  --surface-subtle:#202521;
  --field-border:#4a554c;
  --meta-blue:#91b19d;
  --meta-blue-dark:#aac7b5;
  --shadow:0 1px 2px rgba(0,0,0,.24),0 14px 34px rgba(0,0,0,.2);
}
body,button,input,textarea,select{font-family:'Cairo',Arial,sans-serif}
body{color:var(--ink);background:var(--soft);line-height:1.75}
h1,h2,h3,h4,.setup-intro h1,.section-heading h2,.builder-heading h1,.faq-hero h1{font-family:'Cairo',Arial,sans-serif;font-weight:600;letter-spacing:-.035em;line-height:1.38}
input,textarea,select{line-height:1.65}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,label:has(input:focus-visible){outline-color:rgba(73,108,92,.32)}
.primary-button,.home-menu-button{background:#252928;box-shadow:0 7px 18px rgba(37,41,40,.14)}
.primary-button:hover,.home-menu-button:hover{background:#416b58;box-shadow:0 9px 22px rgba(65,107,88,.2)}
.faq-hero{background:linear-gradient(135deg,#355747 0%,#496c5c 56%,#7da18b 100%);box-shadow:0 20px 50px rgba(73,108,92,.18)}
.option-icon,.help-question-icon,.faq-category-icon,.faq-contact-icon,.dialog-icon,.upload-icon,.choice-icon,.section-icon{color:var(--meta-blue);background:color-mix(in srgb,var(--meta-blue) 10%,var(--surface))}
.faq-option .help-option-icon,.call-option .help-option-icon,.faq-contact-option.call>span:first-child{color:var(--meta-blue);background:#edf2ed}
.profession-card:nth-child(4n+1) .profession-illustration{background:#e2ece5}
.profession-card:nth-child(4n+2) .profession-illustration{background:#f2ebdd}
.profession-card:nth-child(4n+3) .profession-illustration{background:#eee8ef}
.profession-card:nth-child(4n) .profession-illustration{background:#f0e4e7}
.builder-brand-field input,.mini-profession-card{font-family:'Cairo',Arial,sans-serif}
.topbar,.card-surface,.form-section,.preview-panel,.account-menu,.user-menu,.preference-menu,.help-menu{background-color:var(--surface)}
.platform-logo{filter:grayscale(1) sepia(.22) hue-rotate(82deg) saturate(1.25) brightness(.72)}
:root[data-theme="dark"] .platform-logo{filter:grayscale(1) sepia(.16) hue-rotate(82deg) saturate(1.1) brightness(1.35)}
@media(max-width:560px){.home-menu-button{width:38px;min-height:38px;padding:0;border-radius:11px}.home-menu-button span{display:none}.home-menu-button svg{width:19px}}

/* Make the embedded project starter feel like part of the landing section. */
.landing-start{--landing-start-background:#f1f3ef}
.landing-setup-slot{padding:0;background:var(--landing-start-background);border:0;box-shadow:none}
.landing-setup-slot .setup-screen{padding:0}
.landing-setup-slot .setup-top-actions,
.landing-setup-slot .setup-intro{display:none}
.landing-setup-slot .profession-card,
.landing-setup-slot .selected-profession-toggle,
.landing-setup-slot .setup-form,
.landing-setup-slot .field input,
.landing-setup-slot .field textarea{background:var(--landing-start-background)}
.landing-setup-slot .profession-illustration,
.landing-setup-slot .profession-card:nth-child(n) .profession-illustration{
  width:104px;
  height:84px;
  flex:0 0 84px;
  margin-bottom:7px;
  overflow:visible;
  background:transparent;
  border-radius:0;
  transform:none;
}
.landing-setup-slot .profession-illustration img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform:none;
}
.landing-setup-slot .profession-card strong,
.landing-setup-slot .profession-card small{
  display:block;
  position:relative;
  z-index:1;
  text-align:center;
}
.landing-setup-slot .setup-form{margin-top:36px;box-shadow:none}
.landing-setup-slot .selected-profession-toggle:not([hidden]) + .profession-grid:not([hidden]){margin-top:20px}
:root[data-theme="dark"] .landing-start{--landing-start-background:#1d211e;background:transparent}
:root[data-theme="dark"] .landing-setup-slot,
:root[data-theme="dark"] .landing-setup-slot .setup-screen{background:transparent}

/* Keep every landing-page text role legible on dark surfaces. */
:root[data-theme="dark"] .landing-hero h1 em{color:#9fc6ad}
:root[data-theme="dark"] .landing-eyebrow,
:root[data-theme="dark"] .section-kicker,
:root[data-theme="dark"] .landing-scroll-cue,
:root[data-theme="dark"] .proof-item,
:root[data-theme="dark"] .suite-heading p,
:root[data-theme="dark"] .fields-heading p,
:root[data-theme="dark"] .deliverable-card p,
:root[data-theme="dark"] .value-tile p,
:root[data-theme="dark"] .story-card p,
:root[data-theme="dark"] .human-copy p,
:root[data-theme="dark"] .landing-manifesto>p,
:root[data-theme="dark"] .landing-faq-list details p,
:root[data-theme="dark"] .start-heading p,
:root[data-theme="dark"] .landing-footnote,
:root[data-theme="dark"] .story-disclaimer{color:#b8c1bb}
:root[data-theme="dark"] .proof-item b,
:root[data-theme="dark"] .deliverable-card span,
:root[data-theme="dark"] .tile-number,
:root[data-theme="dark"] .story-card>div>span,
:root[data-theme="dark"] .gallery-note{color:#9eaaa2}
:root[data-theme="dark"] .profession-set figcaption,
:root[data-theme="dark"] .landing-faq-list summary{color:#eef2ef}
:root[data-theme="dark"] .landing-text-link,
:root[data-theme="dark"] .manifesto-link{color:#a9cdb6}
:root[data-theme="dark"] .landing-text-link:hover,
:root[data-theme="dark"] .manifesto-link:hover{color:#d0e4d7}
:root[data-theme="dark"] .landing-faq-list summary:after{color:#b9cbbf;border-color:#566159}
:root[data-theme="dark"] .field-tags span{color:#c7d0ca;background:#303832;border-color:#465149}
:root[data-theme="dark"] .landing-hero-visual figcaption{color:#dfe7e2;background:rgba(37,43,38,.9);border-color:rgba(145,177,157,.24)}

/* A simple, human-led three-step path from submitted details to final delivery. */
.landing-process{padding:108px 32px 116px;background:#f1f4f0;scroll-margin-top:84px}
.landing-process .section-heading-center{margin-bottom:48px}
.process-steps{width:min(100%,1060px);margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;border-block:1px solid #dce3dd}
.process-steps li{min-height:210px;padding:31px 30px 34px;display:grid;grid-template-rows:auto 1fr;gap:28px;position:relative}
.process-steps li+li{border-inline-start:1px solid #dce3dd}
.process-number{color:#779182;font-size:12px;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.process-steps h3{margin:0 0 9px;color:#303a35;font-size:18px;line-height:1.5;font-weight:700}
.process-steps p{max-width:32ch;margin:0;color:#727e77;font-size:13px;line-height:1.9}
[lang="en"] .process-steps p{font-size:13.5px;line-height:1.85}
:root[data-theme="dark"] .landing-process{background:#252b26}
:root[data-theme="dark"] .process-steps{border-color:#414a43}
:root[data-theme="dark"] .process-steps li+li{border-color:#414a43}
:root[data-theme="dark"] .process-number{color:#9ab5a3}
:root[data-theme="dark"] .process-steps h3{color:#f0f2f0}
:root[data-theme="dark"] .process-steps p{color:#b8c1bb}
@media(max-width:720px){.landing-process{padding:82px 20px 90px}.landing-process .section-heading-center{margin-bottom:30px}.process-steps{grid-template-columns:1fr}.process-steps li{min-height:0;padding:24px 8px;grid-template-columns:42px 1fr;grid-template-rows:auto;gap:14px}.process-steps li+li{border-inline-start:0;border-top:1px solid #dce3dd}.process-number{padding-top:4px}.process-steps h3{font-size:16px}.process-steps p{max-width:45ch}}

/* More comfortable landing-page reading sizes, with extra room for English. */
.landing-screen :where(.suite-heading p,.fields-heading p,.deliverable-card p,.section-heading-center p,.value-tile p,.human-copy p,.landing-faq-list details p,.start-heading p){font-size:12px;line-height:1.9}
.landing-screen :where(.landing-footnote,.story-disclaimer){font-size:10px}
.landing-screen .landing-text-link{font-size:12px}
[lang="ar"] .landing-screen :where(.suite-heading p,.fields-heading p,.deliverable-card p,.section-heading-center p,.value-tile p,.human-copy p,.landing-faq-list details p,.start-heading p){font-size:13px;line-height:1.9}
[lang="ar"] .landing-screen .landing-hero-note{font-size:11px}
[lang="ar"] .landing-screen .landing-footer p{font-size:10px}
[lang="en"] .landing-hero-copy>p:not(.landing-hero-note){font-size:16px}
[lang="en"] .landing-screen :where(.suite-heading p,.fields-heading p,.deliverable-card p,.section-heading-center p,.value-tile p,.human-copy p,.landing-faq-list details p,.start-heading p){font-size:13.5px;line-height:1.85}
[lang="en"] .landing-screen :where(.landing-footnote,.story-disclaimer){font-size:11.5px}
[lang="en"] .landing-screen .landing-text-link{font-size:13px}